/* canggan.css — 地支藏干（人元）支柱頁專用樣式。
   在 style.css、article.css 之後載入；沿用 article.css 的暖象牙名牌色 token。
   五行色沿用 solo.css（金/木/水/火/土），確保與排盤結果同一套視覺語言。 */

:root {
  --wx-jin: #b8912a; --wx-mu: #4b8b3b; --wx-shui: #3a6ea5;
  --wx-huo: #c0492f; --wx-tu: #9c7b3a;
}

/* 段落副標（承接 article h2 之後的一句引導） */
.cg-sub { color: var(--text-dim); font-size: 0.98rem; line-height: 1.85; margin: 6px 0 14px; }

/* 明暗對照：天干在檯面、地支藏干在底下 */
.cg-layer {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 8px;
}
.cg-layer .cg-lc {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 16px 14px;
}
.cg-layer .cg-lc.is-hidden { border-style: dashed; }
.cg-layer .cg-tag {
  display: inline-block; font-size: 0.72rem; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; margin-bottom: 8px;
}
.cg-layer h3 { margin: 0 0 6px; font-family: 'Noto Serif TC', serif; font-size: 1.15rem; color: var(--gold); }
.cg-layer p { margin: 0; font-size: 0.92rem; line-height: 1.8; color: var(--text-dim); }

/* 藏干五行藥丸 */
.cg-gan {
  display: inline-flex; align-items: baseline; gap: 3px;
  padding: 3px 9px; border-radius: 999px; margin: 2px 3px 2px 0;
  font-family: 'Noto Serif TC', serif; font-size: 1.02rem; line-height: 1;
  border: 1px solid currentColor; white-space: nowrap;
}
.cg-gan small { font-size: 0.7rem; font-family: 'Jost','Noto Sans TC',sans-serif; opacity: 0.9; }
.cg-gan.wx-jin  { color: var(--wx-jin);  background: color-mix(in srgb, var(--wx-jin) 8%, transparent); }
.cg-gan.wx-mu   { color: var(--wx-mu);   background: color-mix(in srgb, var(--wx-mu) 8%, transparent); }
.cg-gan.wx-shui { color: var(--wx-shui); background: color-mix(in srgb, var(--wx-shui) 8%, transparent); }
.cg-gan.wx-huo  { color: var(--wx-huo);  background: color-mix(in srgb, var(--wx-huo) 8%, transparent); }
.cg-gan.wx-tu   { color: var(--wx-tu);   background: color-mix(in srgb, var(--wx-tu) 8%, transparent); }
/* 本氣飽滿、中氣中等、餘氣最淡——濃淡即分量 */
.cg-gan.g-ben  { font-weight: 700; }
.cg-gan.g-zhong { opacity: 0.82; }
.cg-gan.g-yu   { opacity: 0.6; border-style: dashed; }

/* 圖例 */
.cg-legend { display: flex; flex-wrap: wrap; gap: 14px 18px; margin: 4px 0 18px; font-size: 0.82rem; color: var(--text-dim); }
.cg-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cg-legend i { width: 26px; height: 12px; border-radius: 999px; border: 1px solid var(--gold-soft); display: inline-block; }
.cg-legend i.l-ben  { background: var(--gold-soft); }
.cg-legend i.l-zhong { background: color-mix(in srgb, var(--gold-soft) 55%, transparent); }
.cg-legend i.l-yu   { background: transparent; border-style: dashed; }

/* 藏干總表 */
.cg-tablewrap { overflow-x: auto; margin: 8px 0 6px; }
.cg-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.cg-table th, .cg-table td {
  border: 1px solid var(--border); padding: 9px 10px; text-align: left; vertical-align: middle;
}
.cg-table thead th { background: var(--bg-input); color: var(--text-dim); font-weight: 500; font-size: 0.85rem; }
.cg-table td.cg-zhi { font-family: 'Noto Serif TC', serif; font-size: 1.35rem; color: var(--text); text-align: center; width: 3.2em; }
.cg-table td.cg-zhi small { display: block; font-size: 0.72rem; color: var(--text-dim); font-family: inherit; margin-top: 2px; }
.cg-table td.cg-type { text-align: center; font-size: 0.82rem; color: var(--text-dim); white-space: nowrap; }
.cg-table .t-wang { color: var(--wx-huo); }
.cg-table .t-sheng { color: var(--wx-mu); }
.cg-table .t-mu { color: var(--wx-tu); }
.cg-table tbody tr:nth-child(odd) td { background: color-mix(in srgb, var(--bg-card) 60%, transparent); }

/* 三種地支：旺 / 生 / 墓 */
.cg-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 8px; }
.cg-card {
  background: var(--bg-card); border: 1px solid var(--border); border-top: 3px solid var(--gold-soft);
  border-radius: 12px; padding: 14px 15px;
}
.cg-card.k-wang { border-top-color: var(--wx-huo); }
.cg-card.k-sheng { border-top-color: var(--wx-mu); }
.cg-card.k-mu { border-top-color: var(--wx-tu); }
.cg-card h3 { margin: 0 0 2px; font-family: 'Noto Serif TC', serif; font-size: 1.12rem; color: var(--gold); }
.cg-card .cg-members { font-family: 'Noto Serif TC', serif; font-size: 0.9rem; color: var(--text-dim); margin: 0 0 8px; letter-spacing: 0.05em; }
.cg-card p { margin: 0; font-size: 0.9rem; line-height: 1.8; color: var(--text-dim); }

/* 狀態卡（本氣/中氣/餘氣）——頂線濃淡呼應圖例 */
.cg-card.s-ben   { border-top-color: var(--gold); }
.cg-card.s-zhong { border-top-color: var(--gold-soft); }
.cg-card.s-yu    { border-top-color: color-mix(in srgb, var(--gold-soft) 45%, transparent); }

/* 柱位表：第一欄（柱名）強調 */
.cg-table td.cg-pcol {
  font-family: 'Noto Serif TC', serif; font-size: 1.08rem; color: var(--gold);
  text-align: center; white-space: nowrap; width: 3.4em;
}
.cg-table td.cg-pcol small { display: block; font-size: 0.7rem; color: var(--text-dim); font-family: 'Jost','Noto Sans TC',sans-serif; margin-top: 2px; }

/* 誠實話 note（沿用 article 卡片語彙） */
.cg-note {
  background: linear-gradient(160deg, var(--bg-card), var(--bg-input));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 20px 8px; margin: 30px 0 8px;
}
.cg-note h2 { margin-top: 4px; }

@media (max-width: 560px) {
  .cg-layer { grid-template-columns: 1fr; }
  .cg-three { grid-template-columns: 1fr; }
  .cg-table td.cg-zhi { font-size: 1.15rem; }
  /* 柱位表 4 欄較寬：手機改水平捲動（表格自身捲，頁面不溢出），避免柱名被壓成直排 */
  .cg-palace { min-width: 500px; }
}