/* 64 卦详解（导览 + 详情），暗金 · 终南六爻风格 */

/* 爻画：自上而下堆叠；阳=整条，阴=断开两段 */
.hx{display:inline-flex;flex-direction:column;gap:4px;width:46px;vertical-align:middle}
.hx .ln{display:flex;height:7px}
.hx .ln b{flex:1;background:linear-gradient(90deg,#e8c877,#d29a3b);border-radius:1.5px;box-shadow:0 0 6px #d29a3b33}
.hx .ln.br{gap:9px}
.hx.sm{width:30px;gap:2.5px}
.hx.sm .ln{height:4px}
.hx.sm .ln.br{gap:6px}
.hx.lg{width:78px;gap:6px}
.hx.lg .ln{height:10px}
.hx.lg .ln.br{gap:12px}

/* 五行着色（木绿火红土黄金灰水蓝） */
.w-mu{color:#7fc98a}
.w-huo{color:#e88a82}
.w-tu{color:#d8b26a}
.w-jin{color:#b8c0c6}
.w-shui{color:#6fb0e0}

/* ---- 导览页 ---- */
.gua-group{padding-top:6px}
.gua-gh{font:600 20px var(--serif);color:#f7d79d;margin:0 0 14px;border-left:3px solid var(--gold);padding-left:12px}
.gua-gh small{color:var(--muted);font-size:13px;font-weight:400}
.gua-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
.gua-card{display:flex;align-items:center;gap:14px;padding:13px 15px;border:1px solid #2a3a44;border-radius:11px;
  background:linear-gradient(150deg,#0d1923,#0a1620);text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s}
.gua-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 10px 26px #0007}
.gua-card .gc-fig{flex:none}
.gc-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.gc-name{font:600 17px var(--serif);color:#f4e6c9;letter-spacing:1px}
.gc-sub{color:var(--ink-soft);font-size:12.5px}
.gc-gong{color:var(--gold-deep);font-size:11.5px}

/* ---- 详情页 ---- */
.gua-hero{display:flex;gap:26px;align-items:center;flex-wrap:wrap;border:1px solid #705331;border-radius:14px;
  background:#07141dcc;padding:20px 22px;margin-bottom:14px}
.gua-big{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:120px}
.gua-big .gb-t{text-align:center}
.gua-big .gb-t b{display:block;font:600 26px var(--serif);color:#f4e6c9;letter-spacing:3px}
.gua-big .gb-t small{color:var(--muted);font-size:13px}
.gua-yt{flex:1;min-width:290px;border-collapse:collapse;font-size:14px}
.gua-yt th{color:var(--gold-deep);font-weight:500;font-size:12px;text-align:center;padding:4px 6px;border-bottom:1px solid #2a3a44}
.gua-yt td{padding:7px 6px;text-align:center;border-bottom:1px solid #17232c;color:var(--ink-soft)}
.gua-yt tr:last-child td{border-bottom:0}
.gua-yt .yt-hx{width:44px}
.gua-yt .yt-pos{color:#cbd6de;white-space:nowrap}
.gua-yt .yt-zhi{font-weight:600;font-size:16px}
.gua-yt .yt-zhi small{color:var(--muted);font-weight:400;font-size:11px;margin-left:2px}
.gua-yt .yt-qin{color:#e6d7b4}
.sy{display:inline-block;min-width:22px;padding:1px 6px;border-radius:9px;font-size:12px}
.sy.shi{color:#1d170f;background:var(--gold-bright);font-weight:600}
.sy.ying{color:var(--gold-bright);border:1px solid #a9772f}
.gua-note{color:#8a929a;font-size:13px;line-height:1.8;margin:0 0 18px;padding:11px 14px;
  border:1px dashed #2a3843;border-radius:8px}
.gua-note a{color:var(--gold-bright)}

/* 文献分区（经文 / 集解 / 本义 / 杂卦 / 卦象 / 易林） */
.src-body{color:var(--ink-soft);font-size:14.5px;line-height:1.95}
.src-body p{margin:0 0 10px}
.src-body p:last-child{margin-bottom:0}
.ci-main{color:#f4e6c9;font-size:16px;line-height:1.9;margin:0 0 8px}
.gua-missing{color:var(--muted);font-size:14px}
.yao-list{margin:8px 0 0;padding-left:22px;color:var(--ink-soft);line-height:1.95}
.yao-list li{margin:3px 0}
.ci-note{color:#7f888e;font-size:12px;line-height:1.7;margin:12px 0 0;border-top:1px dashed #2a3843;padding-top:9px}
.gua-xiang h5{color:var(--gold-bright);font:600 15px var(--serif);margin:14px 0 6px}
.gua-xiang h5:first-child{margin-top:0}
.shuo{color:var(--muted);font-size:13.5px;line-height:1.85;margin:0 0 8px;padding-left:12px;border-left:2px solid #2a3a44}
.shuo b{color:var(--gold-deep)}
.src-body b{color:#f0dcae}

/* 可折叠来源（集解 / 本义 / 易林） */
.gua-src{border:1px solid #2a3a44;border-radius:12px;background:#0a1620;padding:0}
.gua-src>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 18px}
.gua-src>summary::-webkit-details-marker{display:none}
.gua-src>summary .kick{margin:0}
.gua-src>summary .sum-t{color:#f4e6c9;font:600 16px var(--serif)}
.gua-src>summary .sum-hint{margin-left:auto;color:var(--gold-deep);font-size:12px;white-space:nowrap}
.gua-src[open]>summary{border-bottom:1px solid #1c2830}
.gua-src>.src-body,.gua-src>.ci-note{padding:14px 18px}
.gua-src>.ci-note{padding-top:0;border-top:0}
.gua-yilin .src-body{columns:2;column-gap:26px}
.gua-yilin .src-body p{break-inside:avoid}
@media (max-width:640px){.gua-yilin .src-body{columns:1}.gua-hero{gap:18px}}