:root{color-scheme:light dark;--bg:#ffffff;--surface:#f6f8fa;--raised:#eaeef2;--fg:#1f2328;--muted:#5a6169;--line:#d0d7de;--accent:#0a5fbd;--ok:#1a7f37;--warn:#7a5300;--bad:#cf222e;--sp:8px;--r:10px;--ln:1px;--mo:120ms}
@media (prefers-color-scheme:dark){:root{--bg:#0d1017;--surface:#161b22;--raised:#21262d;--fg:#e6edf3;--muted:#9aa7b2;--line:#30363d;--accent:#6cb6ff;--ok:#6fd58f;--warn:#e3b341;--bad:#ff8080;}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.6 Noto Sans KR, sans-serif}
code,pre{font-family:120NO}
.top{display:flex;gap:calc(var(--sp)*3);align-items:center;padding:var(--sp) calc(var(--sp)*3);background:var(--surface);border-bottom:var(--ln) solid var(--line);position:sticky;top:0}
.top nav{display:flex;gap:calc(var(--sp)*2)}
.brand{font-weight:700;color:var(--fg);text-decoration:none}
a{color:var(--accent);transition:color var(--mo)}
main{max-width:72rem;margin:0 auto;padding:calc(var(--sp)*3)}
.lead{color:var(--muted);font-size:1.15em}
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:var(--sp);padding:0;list-style:none}
.flow li{background:var(--surface);border:var(--ln) solid var(--line);border-radius:var(--r);padding:calc(var(--sp)*1.5)}
.flow b{display:block;color:var(--accent)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:calc(var(--sp)*2)}
.card{margin:0;background:var(--surface);border:var(--ln) solid var(--line);border-radius:var(--r);overflow:hidden}
.card img{display:block;width:100%;height:auto}
.card figcaption{padding:var(--sp);color:var(--muted);font-size:12px}
.note{color:var(--muted);font-size:12px}
.feat{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--sp)}
.feat li{background:var(--surface);border:var(--ln) solid var(--line);border-radius:var(--r);padding:calc(var(--sp)*2)}
.feat b{display:block;color:var(--accent);margin-bottom:calc(var(--sp)/2)}
.card.pad{padding:calc(var(--sp)*2)} .card h3{margin-top:0}
.go.small{padding:calc(var(--sp)/2) calc(var(--sp)*1.5)}
.go{display:inline-block;padding:var(--sp) calc(var(--sp)*2);border-radius:var(--r);background:var(--accent);color:var(--bg);text-decoration:none;font-weight:600}
pre{background:var(--surface);border:var(--ln) solid var(--line);border-radius:var(--r);padding:calc(var(--sp)*1.5);overflow-x:auto}
table{border-collapse:collapse;width:100%;margin:var(--sp) 0}
th,td{border-bottom:var(--ln) solid var(--line);padding:var(--sp);text-align:left;vertical-align:top}
th{color:var(--muted);font-weight:600}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--sp);padding:calc(var(--sp)*2) calc(var(--sp)*3);color:var(--muted);font-size:12px;border-top:var(--ln) solid var(--line)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}