:root{
  --bg:#f7f8fb;--card:#ffffff;--ink:#12203a;--mute:#56627a;--line:#e1e5ee;--acc:#1b56f0;--soft:#eef2ff;
  --warn:#a85a00;--warn-bg:#fff4e0;--ph-bg:#fff0b3;--ph-ink:#5a4300;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0d1322;--card:#151c2f;--ink:#e9edf6;--mute:#9aa7bf;--line:#26304a;--acc:#6c93ff;--soft:#1a2644;
    --warn:#f0b35a;--warn-bg:#33270f;--ph-bg:#4a3a00;--ph-ink:#ffe8a3;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);word-break:keep-all;overflow-wrap:break-word;
  font:16px/1.8 -apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif}
a{color:var(--acc)}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}
header.top{border-bottom:1px solid var(--line);background:var(--card)}
.bar{display:flex;align-items:center;justify-content:space-between;height:58px}
.brand{font-weight:800;color:var(--ink);text-decoration:none}
.bar a.back{color:var(--mute);text-decoration:none;font-size:.92rem}
h1{font-size:clamp(1.6rem,3.6vw,2.1rem);letter-spacing:-.02em;margin:34px 0 6px;line-height:1.3}
.meta{color:var(--mute);font-size:.9rem;margin:0 0 20px}
.draft{background:var(--warn-bg);border:1px solid var(--warn);border-radius:12px;padding:14px 16px;font-size:.93rem;margin:0 0 22px}
.draft b{color:var(--warn)}
.draft ul{margin:6px 0 0;padding-left:18px}
.toc{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:0 0 26px}
.toc b{display:block;margin-bottom:6px}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:28px;font-size:.92rem}
.toc a{text-decoration:none}
@media (max-width:640px){.toc ol{columns:1}}
article.doc h2{font-size:1.22rem;margin:38px 0 10px;padding-top:6px;border-top:1px solid var(--line);letter-spacing:-.01em}
article.doc h3{font-size:1rem;margin:20px 0 4px}
article.doc p,article.doc li{font-size:.97rem}
article.doc ol.n{padding-left:22px}
article.doc ol.n li{margin:4px 0}
.box{background:var(--soft);border-radius:12px;padding:12px 16px;margin:12px 0;font-size:.94rem}
table{border-collapse:collapse;width:100%;margin:10px 0 16px;font-size:.9rem;display:block;overflow-x:auto}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
th{background:var(--soft);white-space:nowrap}
mark.ph{background:var(--ph-bg);color:var(--ph-ink);border-radius:4px;padding:0 3px}
footer{border-top:1px solid var(--line);margin-top:48px;padding:24px 0 56px;color:var(--mute);font-size:.86rem}
footer a{color:var(--mute)}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:6px}