:root{--ink:#1c2430;--muted:#66717f;--line:#e3e8ee;--paper:#fff;--field:#f5f7fa;--accent:#1f3a5f;--accent-soft:#e6edf6;--save:#1e7a4c;--save-soft:#e3f3ea;--warn:#a85b12;--warn-soft:#fbeedf;--danger:#b4322d;--danger-soft:#fbe5e3}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;line-height:1.7;-webkit-text-size-adjust:100%;word-break:keep-all}
a{color:var(--accent)}
.top{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:5}
.top .in{max-width:960px;margin:0 auto;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;font-size:14px;gap:12px}
.top .brand{font-weight:800;color:var(--accent);text-decoration:none;font-size:18px;letter-spacing:-0.02em;white-space:nowrap}
.top nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.top nav a{color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:8px;white-space:nowrap}
.top nav a.on,.top nav a:hover{background:var(--field);color:var(--ink)}
.wrap{max-width:960px;margin:0 auto;padding:28px 16px 64px}
.narrow{max-width:720px}
.crumb{font-size:13px;color:var(--muted);margin-bottom:12px}
.crumb a{color:var(--muted);text-decoration:none}
h1{font-size:30px;font-weight:800;line-height:1.3;margin:0 0 10px;letter-spacing:-0.02em}
.lead{font-size:17px;color:var(--muted);margin:0 0 16px}
.meta{font-size:13px;color:var(--muted);margin:0 0 20px}
h2{font-size:22px;font-weight:700;margin:40px 0 12px;letter-spacing:-0.01em}
h3{font-size:17px;font-weight:700;margin:22px 0 8px}
p{margin:0 0 14px;font-size:16px}
ul,ol{padding-left:22px;margin:0 0 14px;font-size:16px}
li{margin-bottom:6px}
.hero{padding:36px 0 8px}
.hero h1{font-size:34px}
.hero .lead{font-size:18px;max-width:640px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 8px}
.chip{display:inline-block;font-size:14px;padding:7px 14px;border-radius:999px;background:var(--field);color:var(--ink);text-decoration:none;border:1px solid var(--line)}
.chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.callout{border-left:4px solid var(--accent);background:var(--accent-soft);padding:12px 16px;border-radius:0 10px 10px 0;margin:0 0 16px;font-size:15px}
.callout.warn{border-color:var(--warn);background:var(--warn-soft)}
.callout.save{border-color:var(--save);background:var(--save-soft)}
.tblwrap{overflow-x:auto;margin:0 0 16px;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:10px 10px;text-align:left;vertical-align:middle}
.tbl th{background:var(--field);font-weight:600;font-size:13px;color:var(--muted);white-space:nowrap}
.tbl td.num,.tbl th.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl tr:hover td{background:#fafbfc}
.tbl a.pname{font-weight:600;text-decoration:none;color:var(--ink)}
.save{color:var(--save);font-weight:700}
.off{color:var(--muted)}
.badge{display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;vertical-align:middle;margin-left:6px}
.badge.lock{background:var(--danger-soft);color:var(--danger)}
.badge.new{background:var(--save-soft);color:var(--save)}
.badge.hot{background:var(--warn-soft);color:var(--warn)}
.badge.v{background:var(--accent-soft);color:var(--accent)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:0 0 16px}
.card{border:1px solid var(--line);border-radius:14px;padding:14px 16px;text-decoration:none;color:var(--ink);background:var(--paper);display:block}
.card:hover{border-color:var(--accent)}
.card b{display:block;font-size:16px;margin-bottom:2px}
.card .pr{font-size:20px;font-weight:800;color:var(--accent)}
.card .pr small{font-size:12px;color:var(--muted);font-weight:400}
.card .sub{font-size:12px;color:var(--muted)}
.cta{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:700;padding:14px 22px;border-radius:12px;font-size:16px}
.cta:hover{filter:brightness(1.1)}
.cta.wide{display:block;text-align:center}
.ctabox{background:var(--field);border-radius:16px;padding:20px;margin:20px 0}
.ctabox .code{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--paper);border:1px dashed var(--accent);padding:4px 10px;border-radius:8px;font-weight:700;letter-spacing:.05em}
.ctabox .fine{font-size:13px;color:var(--muted);margin:10px 0 0}
.kv{display:grid;grid-template-columns:140px 1fr;gap:6px 12px;font-size:15px;margin:0 0 16px}
.kv dt{color:var(--muted)}
.kv dd{margin:0}
.changes li{margin-bottom:10px}
.changes .d{font-size:12px;color:var(--muted)}
.up{color:var(--danger);font-weight:700}
.down{color:var(--save);font-weight:700}
.faq details{border-bottom:1px solid var(--line);padding:12px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:16px}
.faq details p{margin-top:8px;font-size:15px}
.disc{font-size:13px;color:var(--muted);background:var(--field);border-radius:10px;padding:12px 14px;margin:24px 0 0}
footer{border-top:1px solid var(--line);margin-top:48px}
footer .in{max-width:960px;margin:0 auto;padding:24px 16px;font-size:13px;color:var(--muted)}
footer a{color:var(--muted)}
@media (max-width:600px){h1{font-size:25px}.hero h1{font-size:27px}.kv{grid-template-columns:1fr}.tbl{min-width:0}.tbl.compact th:nth-child(n+5),.tbl.compact td:nth-child(n+5){display:none}}