/* career.css — 「事業篇」支柱 cluster 專用樣式（暖象牙精品名牌風，沿用支柱頁色系）。
   本頁走亮色：在 :root 覆蓋 style.css 的暗金 token（本檔在 style.css / article.css 之後載入），
   整頁 chrome（header / footer / .article / .cta-card / .rizhu-card / .faq）自動翻亮；
   共用件沿用 article.css 結構，本檔只覆蓋配色/字體並補本 cluster 專屬元件。 */

:root {
  --bg: #f7f3ec; --bg-card: #ffffff; --bg-input: #fffdf9; --border: #e4ddce;
  --text: #201d18; --text-dim: #6f685c; --gold: #a6824c; --gold-soft: #c0a070;
  --radius: 14px;
  /* 十神職業引擎五色 */
  --guansha:#46618f;   /* 官殺：制度靛藍 */
  --caixing:#a97e33;   /* 財星：經營古金 */
  --shishang:#c15f7c;  /* 食傷：才藝緋玫 */
  --yinxing:#4f8c5f;   /* 印星：學問松綠 */
  --bijie:#7d8494;     /* 比劫：競爭鋼灰 */
  --lux-serif: 'Cormorant Garamond', 'Noto Serif TC', Georgia, serif;
  --lux-sans: 'Jost', 'Noto Sans TC', 'Helvetica Neue', Arial, sans-serif;
}

body { font-family: var(--lux-sans); }
.article h1, .article h2, .cr-note h2 { font-family: var(--lux-serif); font-weight: 600; }
.article h1 { font-size: 2.2rem; letter-spacing: 0.01em; line-height: 1.32; }
.article h2 { letter-spacing: 0.02em; }
.article .lead { font-size: 1.08rem; }
.article .lead b { color: var(--gold); font-weight: 500; }

.cr-sub { color: var(--text-dim); font-size: 0.98rem; margin: 0 0 18px; }

/* ── 古今身分翻轉：一列一張，古（暗）→ 今（金） ── */
.cr-flip { display: grid; gap: 12px; margin: 8px 0 14px; }
.cr-flip-row {
  display: grid; grid-template-columns: 1fr auto 1.1fr; align-items: center; gap: 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--star, var(--gold)); border-radius: 12px; padding: 14px 16px;
}
.cr-old .cr-era {
  display: inline-block; font-size: 0.68rem; letter-spacing: 0.08em; color: #fffdf9;
  background: #9a9186; padding: 2px 9px; border-radius: 999px; margin-bottom: 5px;
}
.cr-old .cr-role { font-size: 0.95rem; color: var(--text-dim); line-height: 1.5; }
.cr-arrow { font-family: var(--lux-serif); font-size: 1.5rem; color: var(--gold-soft); }
.cr-new { text-align: right; }
.cr-new .cr-who {
  font-family: var(--lux-serif); font-size: 1.18rem; font-weight: 600; color: var(--gold);
  line-height: 1.4; display: block;
}
.cr-new .cr-star {
  display: inline-block; margin-top: 5px; font-size: 0.7rem; letter-spacing: 0.06em;
  color: var(--star, var(--gold)); border: 1px solid var(--star, var(--gold-soft));
  padding: 1px 8px; border-radius: 999px;
}

/* ── 亮點翻案框（傷官見官） ── */
.cr-callout {
  background: linear-gradient(160deg, #fbf6ee, #fffdf9);
  border: 1px solid var(--gold-soft); border-left: 4px solid var(--shishang);
  border-radius: 12px; padding: 18px 20px; margin: 14px 0;
}
.cr-callout h3 {
  margin: 0 0 8px; font-family: var(--lux-serif); font-size: 1.28rem; color: var(--shishang); font-weight: 600;
}
.cr-callout p { margin: 0; color: var(--text); font-size: 0.96rem; line-height: 1.85; }
.cr-callout p + p { margin-top: 8px; }
.cr-callout b { color: var(--shishang); }

/* ── 十神職業引擎（5 卡，導子頁） ── */
.cr-engines { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 8px 0 12px; }
.cr-engine {
  display: flex; flex-direction: column; background: var(--bg-card);
  border: 1px solid var(--border); border-top: 3px solid var(--ec); border-radius: 12px;
  padding: 15px 17px 14px; text-decoration: none; transition: border-color .15s, transform .15s;
}
.cr-engine:hover { border-color: var(--ec); transform: translateY(-2px); }
.cr-engine .cr-e-tag {
  font-family: var(--lux-sans); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim);
}
.cr-engine h3 { margin: 3px 0 6px; font-family: var(--lux-serif); font-size: 1.4rem; color: var(--ec); font-weight: 600; }
.cr-engine .cr-e-jobs { font-size: 0.9rem; color: var(--text); line-height: 1.7; margin: 0 0 8px; }
.cr-engine .cr-e-flip { font-size: 0.82rem; color: var(--text-dim); line-height: 1.6; margin: 0 0 10px; }
.cr-engine .cr-e-flip b { color: var(--ec); font-weight: 500; }
.cr-engine .cr-e-more { margin-top: auto; font-size: 0.88rem; color: var(--ec); font-weight: 500; }

/* ── 兩欄對照（子頁：食神 vs 傷官、上班 vs 創業…） ── */
.cr-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 8px 0 12px; }
.cr-col {
  background: var(--bg-card); border: 1px solid var(--border);
  border-top: 3px solid var(--cc, var(--gold)); border-radius: 12px; padding: 16px 18px 14px;
}
.cr-col .cr-c-tag { font-family: var(--lux-sans); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.cr-col h3 { margin: 4px 0 3px; font-family: var(--lux-serif); font-size: 1.5rem; color: var(--cc, var(--gold)); font-weight: 600; }
.cr-col .cr-c-one { font-size: 0.85rem; color: var(--text-dim); margin: 0 0 10px; }
.cr-col ul { margin: 0; padding-left: 1.05em; }
.cr-col li { color: var(--text); font-size: 0.92rem; line-height: 1.7; margin-bottom: 5px; }
.cr-col li::marker { color: var(--cc, var(--gold)); }

/* ── 三個開關（3 態卡，沿用 timing 風） ── */
.cr-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 6px 0 12px; }
.cr-sw {
  background: var(--bg-card); border: 1px solid var(--border); border-top: 3px solid var(--sc);
  border-radius: 12px; padding: 15px 15px 13px;
}
.cr-sw .cr-sw-n { font-family: var(--lux-serif); font-size: 1.15rem; color: var(--sc); font-weight: 600; }
.cr-sw .cr-sw-k { display: block; font-size: 0.76rem; color: var(--sc); margin: 1px 0 7px; letter-spacing: 0.04em; }
.cr-sw p { margin: 0; color: var(--text-dim); font-size: 0.86rem; line-height: 1.75; }
.cr-sw b { color: var(--text); font-weight: 500; }

/* ── 五行 × 行業對照表 ── */
.cr-tablewrap { overflow-x: auto; margin: 6px 0 12px; border-radius: 12px; }
.cr-table { width: 100%; border-collapse: collapse; background: var(--bg-card); font-size: 0.92rem; }
.cr-table th, .cr-table td { border: 1px solid var(--border); padding: 11px 13px; text-align: left; vertical-align: top; }
.cr-table thead th { background: #f1eadd; color: var(--text-dim); font-weight: 500; font-size: 0.85rem; }
.cr-table tbody th {
  font-family: var(--lux-serif); font-size: 1.15rem; color: #fffdf9; background: var(--rc, var(--gold));
  text-align: center; width: 3.4em; font-weight: 600;
}
.cr-table td { color: var(--text); line-height: 1.7; }
.cr-table .t-dim { color: var(--text-dim); font-size: 0.86rem; }

/* ── 誠實話 ── */
.cr-note {
  background: linear-gradient(160deg, var(--bg-card), var(--bg-input));
  border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; margin: 12px 0 8px;
}
.cr-note h2 { margin-top: 0; }
.cr-note p { color: var(--text-dim); }
.cr-note b { color: var(--gold); }

/* ── 雙 CTA（排盤＋十神/回總覽） ── */
.cta-card .cta-btns .btn-affinity { border: 1px solid var(--shishang); color: var(--shishang); }

@media (max-width: 560px) {
  .cr-engines { grid-template-columns: 1fr; }
  .cr-switch { grid-template-columns: 1fr; }
  .cr-vs { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .cr-flip-row { grid-template-columns: 1fr; text-align: left; gap: 6px; }
  .cr-arrow { transform: rotate(90deg); justify-self: start; }
  .cr-new { text-align: left; }
}
@media (max-width: 430px) {
  .article h1 { font-size: 1.82rem; }
}