:root { color-scheme: light; --ink:#1f2937; --muted:#64748b; --line:#d7dde7; --soft:#f7f9fc; --accent:#dc2626; --blue:#2563eb; }
* { box-sizing:border-box; }
body { margin:0; background:#eef2f7; color:var(--ink); font-family:Inter,"Noto Sans KR","Malgun Gothic",Arial,sans-serif; line-height:1.55; }
main { width:min(1180px,calc(100% - 32px)); margin:28px auto; background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
header,.section,footer { padding:26px 32px; border-bottom:1px solid var(--line); }
h1,h2,p { margin-top:0; } h1 { margin-bottom:8px; font-size:clamp(26px,3vw,38px); } h2 { margin-bottom:14px; font-size:22px; }
.lead,footer { color:var(--muted); } .hint { padding:12px 14px; background:var(--soft); border-left:4px solid var(--blue); }
.figure-map { border:1px solid var(--line); overflow:auto; background:#fff; }
.figure-canvas { position:relative; min-width:900px; }
.figure-map img { display:block; width:100%; height:auto; }
.badge { position:absolute; display:grid; place-items:center; width:36px; height:36px; border:3px solid var(--accent); border-radius:50%; background:#fff; color:var(--accent); font-weight:800; font-size:18px; }
.figure-caption { margin:10px 0 0; text-align:center; font-size:13px; font-weight:700; }
.figure-source { margin:6px 0 0; color:var(--muted); font-size:12px; }
.learning-figure { margin:16px 0 0; overflow:auto; border:1px solid var(--line); background:#fbfaf6; }
.learning-figure img { display:block; width:100%; min-width:900px; height:auto; }
.table-wrap { overflow-x:auto; border-top:2px solid var(--ink); } table { width:100%; min-width:900px; border-collapse:collapse; font-size:14px; }
th,td { padding:10px 11px; border:1px solid var(--line); vertical-align:top; } th { background:var(--soft); text-align:left; }
.group th { background:#eef2f7; } .num { display:inline-grid; place-items:center; width:26px; height:26px; margin-right:6px; border-radius:50%; background:var(--accent); color:#fff; font-weight:800; }
.mono { font-family:"SFMono-Regular",Consolas,monospace; } .field { white-space:nowrap; font-family:"SFMono-Regular",Consolas,monospace; }
.field-role { display:block; margin-bottom:6px; color:#334155; font-weight:800; }
.value-list { display:grid; gap:3px; }
.value-item { display:block; }
.value-code { display:inline-block; min-width:62px; font-family:"SFMono-Regular",Consolas,monospace; font-weight:800; }
.field-note { display:block; margin-top:6px; color:#475569; font-size:13px; }
.support,.simplified { color:#047857; font-weight:700; } .visible,.reference { color:#b91c1c; font-weight:700; }
pre { margin:16px 0 0; padding:12px 14px; overflow:auto; background:#172033; color:#e2e8f0; font:13px/1.55 "SFMono-Regular",Consolas,monospace; }
.links { display:flex; flex-wrap:wrap; gap:8px 16px; } a { color:#1d4ed8; }
.proof-list { margin:0; padding-left:20px; } .proof-list li + li { margin-top:6px; }
@media (max-width:640px) { main { width:100%; margin:0; border-radius:0; } header,.section,footer { padding-left:18px; padding-right:18px; } }