/* 가이드 글 공통 스타일 (guides/*.html) */
:root{ --bg:#0a0a0f; --panel:#12121a; --line:#23232e; --text:#f2f0ea; --dim:#b3b3c2; --faint:#74748a; --brand:#f5b841; --ok:#52e29a; }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Pretendard","Malgun Gothic",sans-serif; line-height:1.8; word-break:keep-all; }
a{ color:var(--brand); }
.doc{ max-width:780px; margin:0 auto; padding:36px 20px 24px; }
.crumb{ font-size:12.5px; color:var(--faint); margin-bottom:14px; }
.crumb a{ color:var(--faint); text-decoration:none; } .crumb a:hover{ color:var(--brand); }
h1{ font-size:clamp(25px,4vw,34px); line-height:1.35; margin:0 0 10px; letter-spacing:-0.01em; }
.meta{ color:var(--faint); font-size:13px; margin:0 0 26px; }
h2{ font-size:20px; margin:38px 0 10px; line-height:1.45; }
h3{ font-size:16.5px; margin:24px 0 6px; }
p, li{ color:var(--dim); font-size:15.5px; }
li{ margin:4px 0; }
b, strong{ color:var(--text); }
.lead{ background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:10px; padding:14px 18px; margin:0 0 8px; }
.lead p{ margin:0; color:var(--text); }
.formula{ background:#0f0f16; border:1px solid var(--line); border-radius:10px; padding:12px 16px; margin:14px 0; font-family:"Cambria Math","Times New Roman",serif; font-size:17px; color:var(--text); text-align:center; overflow-x:auto; }
table{ width:100%; border-collapse:collapse; margin:14px 0; font-size:14px; }
th, td{ border-bottom:1px solid var(--line); padding:8px 10px; text-align:left; color:var(--dim); }
th{ color:var(--text); font-weight:600; background:#15151f; }
td.num, th.num{ text-align:right; font-family:"SFMono-Regular",Consolas,Menlo,monospace; }
.tablewrap{ overflow-x:auto; }
.note{ background:#15151f; border:1px solid var(--line); border-radius:10px; padding:12px 16px; margin:16px 0; }
.note p{ margin:0; font-size:14.5px; }
.cta{ display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:linear-gradient(90deg, rgba(245,184,65,.12), rgba(245,184,65,.03)); border:1px solid rgba(245,184,65,.35); border-radius:12px; padding:16px 18px; margin:34px 0 10px; }
.cta p{ margin:0; color:var(--text); font-size:15px; }
.cta a{ background:var(--brand); color:#15110a; text-decoration:none; font-weight:700; padding:10px 16px; border-radius:9px; white-space:nowrap; }
.related{ margin:30px 0 0; padding-top:18px; border-top:1px solid var(--line); }
.related h2{ font-size:16px; margin:0 0 8px; }
.related ul{ padding-left:18px; }
.glist{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin:12px 0 24px; }
.glist a{ display:block; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px; text-decoration:none; }
.glist a:hover{ border-color:var(--brand); }
.glist b{ display:block; color:var(--text); font-size:15px; margin-bottom:4px; line-height:1.45; }
.glist span{ color:var(--dim); font-size:13.5px; line-height:1.55; display:block; }
.tag{ display:inline-block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); font-weight:700; margin-bottom:2px; }
.fig{ margin:18px 0 24px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 14px 12px; overflow-x:auto; }
.fig svg{ display:block; width:100%; min-width:460px; height:auto; font-size:14px; font-family:inherit; fill:var(--dim); }
.fig .tb{ font-weight:700; }
.fig .tf{ font-size:12.5px; fill:var(--faint); }
.fig .ts{ font-size:11px; }
.fig .ts2{ font-size:13px; }
.fig figcaption{ font-size:13.5px; color:var(--faint); margin-top:10px; line-height:1.65; }
.fig figcaption b{ color:var(--dim); }
@media (max-width:600px){ .formula{ font-size:15px; } table{ font-size:13px; } }