/* gua.css — 由 tools/build-seo-pages.js 生成，供 64 卦静态页使用 */
:root{--ink:#16201b;--ink2:#41524a;--ink3:#6b7a72;--line:#e3e9e5;--bg:#f7f9f7;--card:#fff;
--brand:#1f6b4a;--brand-soft:#e8f3ee;--gold:#a9812f;--radius:12px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft JhengHei","Microsoft YaHei",sans-serif;
font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.page-shell{max-width:860px;margin:0 auto;padding:0 20px}

.topbar{border-bottom:1px solid var(--line);background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
position:sticky;top:0;z-index:20}
.topbar-in{max-width:860px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;
justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{font-size:17px;font-weight:700;letter-spacing:.04em;color:#183328}
.topnav{display:flex;gap:18px;font-size:14px;flex-wrap:wrap}
.topnav a{color:var(--ink2)}
.topnav a:hover{color:var(--brand)}

.breadcrumb{margin:20px 0 0;font-size:13px;color:var(--ink3)}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.breadcrumb li+li::before{content:"›";margin-right:8px;color:#c3cdc7}

.gua-article{margin-top:8px}
.gua-head{margin:22px 0 30px}
.kicker{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
font-weight:700;margin:0 0 10px}
h1{font-size:31px;line-height:1.32;margin:0 0 14px;letter-spacing:-.01em}
.lede{font-size:16.5px;color:var(--ink2);margin:0;padding:16px 20px;background:var(--brand-soft);
border-left:4px solid var(--brand);border-radius:0 var(--radius) var(--radius) 0}
h2{font-size:20px;margin:40px 0 12px;padding-bottom:10px;border-bottom:2px solid var(--line)}
h3{font-size:16.5px;margin:24px 0 8px}
p{margin:12px 0}
.classic{font-size:17.5px;line-height:2;color:#123;background:var(--card);border:1px solid var(--line);
border-radius:var(--radius);padding:16px 20px;margin:14px 0;letter-spacing:.03em}
.note{color:var(--ink2);font-size:15.5px}
.note b{display:inline-block;background:var(--brand-soft);color:var(--brand);font-size:12.5px;
padding:2px 8px;border-radius:5px;margin-right:8px;vertical-align:1px}
.section-note{color:var(--ink3);font-size:14px}

.factbox{margin:26px 0}
.factbox table{width:100%;border-collapse:collapse;background:var(--card);
border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:15px}
.factbox th{text-align:left;width:96px;padding:11px 16px;background:#f1f5f2;color:var(--ink2);
font-weight:600;border-bottom:1px solid var(--line);white-space:nowrap}
.factbox td{padding:11px 16px;border-bottom:1px solid #eef2ef}
.factbox tr:last-child th,.factbox tr:last-child td{border-bottom:none}

.line-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:16px 20px;margin:14px 0}
.line-card h3{margin:0 0 8px;font-size:16px;color:var(--ink2)}
.line-badge{display:inline-block;min-width:52px;text-align:center;background:#183328;color:#fff;
font-size:13px;font-weight:700;padding:3px 10px;border-radius:6px;margin-right:10px}
.line-card .classic{font-size:16.5px;margin:10px 0;padding:12px 16px}

.keypoint{background:linear-gradient(135deg,#f3f8f5,#eaf3ee);border:1px solid #d6e6dd;
border-radius:var(--radius);padding:4px 22px 18px;margin:34px 0}
.keypoint h2{border-bottom-color:#d6e6dd;margin-top:24px}

.faq details{background:var(--card);border:1px solid var(--line);border-radius:10px;
padding:12px 18px;margin:9px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:15.5px;color:#183328}
.faq summary::marker{color:var(--brand)}
.faq details p{margin:10px 0 4px;color:var(--ink2);font-size:15px}

.related{margin:34px 0}
.rel-list{list-style:none;padding:0;margin:14px 0}
.rel-list li{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:14px 18px;margin:10px 0;display:flex;flex-direction:column;gap:4px}
.rel-list b{font-size:12.5px;color:var(--gold);letter-spacing:.04em}
.rel-list a{font-size:16px;font-weight:600}
.rel-list span{font-size:13.5px;color:var(--ink3)}
.navline{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;
margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}

.gua-grid{list-style:none;padding:0;margin:18px 0;display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.gua-card a{display:flex;flex-direction:column;gap:3px;background:var(--card);
border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;height:100%;
transition:border-color .15s,transform .15s}
.gua-card a:hover{border-color:var(--brand);transform:translateY(-2px);text-decoration:none}
.gua-card .num{font-size:11.5px;color:var(--gold);font-weight:700;letter-spacing:.06em}
.gua-card .nm{font-size:18px;font-weight:700;color:#183328}
.gua-card .tn{font-size:12.5px;color:var(--brand)}
.gua-card .ds{font-size:12.5px;color:var(--ink3);line-height:1.6;margin-top:4px}

.intro{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:4px 22px 16px;margin:26px 0}
.intro h2{margin-top:24px}

.cta{margin:44px 0 34px;padding:26px 24px;background:linear-gradient(135deg,#183328,#22543f);
border-radius:var(--radius);color:#fff;text-align:center}
.cta h2{color:#fff;border:none;margin:0 0 8px;font-size:20px;padding:0}
.cta p{color:rgba(255,255,255,.82);font-size:14.5px;margin:0 auto 20px;max-width:520px}
.cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:11px 22px;border-radius:99px;font-size:15px;font-weight:600;
transition:opacity .15s}
.btn:hover{opacity:.88;text-decoration:none}
.btn-primary{background:#fff;color:#183328}
.btn-wa{background:#25d366;color:#fff}
.btn-line{background:#06c755;color:#fff}

.site-footer{margin-top:20px;padding:26px 0 44px;border-top:1px solid var(--line);
font-size:13px;color:var(--ink3);text-align:center}
.site-footer p{margin:6px 0}
.copyright{margin-top:14px;color:#93a09a}

@media(max-width:640px){
h1{font-size:25px}
h2{font-size:18px}
.classic{font-size:16.5px}
.lede{font-size:15.5px}
.topnav{gap:13px;font-size:13px}
}