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

:root {
  /* 暖象牙精品色（覆蓋 style.css 暗金 token，只作用於載本檔的頁） */
  --bg: #f7f3ec;          /* paper */
  --bg-card: #ffffff;     /* card */
  --bg-input: #fffdf9;    /* paper-2 */
  --border: #e4ddce;      /* line */
  --text: #201d18;        /* ink */
  --text-dim: #6f685c;    /* ink-soft */
  --gold: #a6824c;        /* antique gold */
  --gold-soft: #c0a070;
  --radius: 14px;
  /* 五行色（配白底加深） */
  --e-mu:#5b8a63; --e-huo:#bd5f42; --e-tu:#a97e33; --e-jin:#8a8f9c; --e-shui:#5a7fb0;
  /* 補洩剋語意色 */
  --c-bu:#4f8c5f; --c-xie:#4f7bab; --c-ke:#b45c3f;
  --lux-serif: 'Cormorant Garamond', 'Noto Serif TC', Georgia, serif;
  --lux-sans: 'Jost', 'Noto Sans TC', 'Helvetica Neue', Arial, sans-serif;
}

/* 名牌字體：內文 Jost（拉丁）＋思源黑（中文），標題 Cormorant（拉丁）＋思源宋（中文） */
body { font-family: var(--lux-sans); }
.article h1, .article h2, .wxy-note h2 { font-family: var(--lux-serif); font-weight: 600; }
.article h1 { font-size: 2.25rem; letter-spacing: 0.01em; }
.article h2 { letter-spacing: 0.02em; }
.article .lead { font-size: 1.08rem; }

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

/* 相生相剋循環圖 */
.wxy-cycle {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 14px 20px; margin: 8px 0 18px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.wxy-cycle svg { width: 100%; max-width: 380px; height: auto; }
.wxy-legend { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; font-size: 0.9rem; color: var(--text-dim); }
.wxy-legend b { color: var(--text); font-weight: 500; }
.wxy-legend i { display: inline-block; width: 24px; height: 0; vertical-align: middle; margin-right: 7px; }
.wxy-legend .l-sheng { border-top: 3px solid var(--gold); }
.wxy-legend .l-ke { border-top: 3px dashed var(--c-ke); }

/* 三手法卡 */
.wxy-methods { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 4px 0 8px; }
.wxy-method {
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--mc); border-radius: 12px; padding: 16px 20px;
}
.wxy-method h3 {
  margin: 0 0 6px; font-family: var(--lux-serif); font-size: 1.42rem; color: var(--mc);
  display: flex; align-items: baseline; gap: 10px; font-weight: 600;
}
.wxy-method h3 .tag { font-size: 0.72rem; color: var(--text-dim); font-family: var(--lux-sans); font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; }
.wxy-method p { margin: 0; color: var(--text); font-size: 0.97rem; line-height: 1.85; }

.wxy-rule {
  background: var(--bg-input); border: 1px solid var(--border); border-left: 3px solid var(--gold-soft);
  border-radius: 12px; padding: 14px 18px; margin: 16px 0 8px; color: var(--text-dim); font-size: 0.96rem; line-height: 1.9;
}
.wxy-rule b { color: var(--gold); }

/* 五行卡（補洩剋逐味） */
.wxy-elcard {
  background: var(--bg-card); border: 1px solid var(--border);
  border-top: 3px solid var(--ec); border-radius: 12px; padding: 16px 20px 8px; margin: 0 0 14px;
}
.wxy-elhead { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.wxy-eldot {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-family: var(--lux-serif); font-size: 1.3rem;
  color: #fffdf9; font-weight: 600; background: var(--ec);
}
.wxy-elname { font-family: var(--lux-serif); font-size: 1.35rem; color: var(--text); font-weight: 600; line-height: 1.1; }
.wxy-elrel { font-size: 0.78rem; color: var(--text-dim); margin-top: 3px; letter-spacing: 0.02em; }
.wxy-bxk { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 10px 0 4px; margin: 0; }
.wxy-bxk dt {
  font-family: var(--lux-serif); font-size: 1.15rem; font-weight: 600; color: var(--tag);
  white-space: nowrap; padding-top: 1px;
}
.wxy-bxk dt small { display: block; font-family: var(--lux-sans); font-size: 0.64rem; color: var(--text-dim); font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }
.wxy-bxk dd { margin: 0 0 9px; color: var(--text); font-size: 0.95rem; line-height: 1.8; }
.wxy-bxk dd b { color: var(--tag); font-weight: 500; }

/* 五行→生活/職業對照表 */
.wxy-tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); margin: 4px 0 8px; }
.wxy-table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 0.94rem; }
.wxy-table thead th {
  background: var(--bg-input); color: var(--gold); font-family: var(--lux-serif); font-weight: 600; font-size: 1.02rem;
  text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; letter-spacing: 0.02em;
}
.wxy-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text); }
.wxy-table tbody tr:last-child td { border-bottom: none; }
.wxy-table tbody td.wxy-t-el { font-family: var(--lux-serif); font-size: 1.2rem; color: var(--tc); white-space: nowrap; font-weight: 600; }
.wxy-table td.wxy-t-daily { color: var(--text-dim); font-size: 0.9rem; }

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

@media (max-width: 430px) {
  .article h1 { font-size: 1.9rem; }
  .wxy-bxk { grid-template-columns: 1fr; gap: 2px; }
  .wxy-bxk dt { padding-top: 8px; }
  .wxy-legend { gap: 12px; font-size: 0.84rem; }
}