:root{--ink:#17252c;--muted:#56676d;--line:#d5dfdd;--soft:#e3eae8;--paper:#f3f6f5;--panel:#fff;--water:#2f7d8c;--water-ink:#1f5f6b;--pool:#dcefee;--amber:#a86a12;--amber-bg:#fff8ec;--amber-line:#e7c58e;--danger:#a8352a}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.7 Pretendard,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;word-break:keep-all}
a{color:var(--water-ink)}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px}
:not(pre)>code{background:#e6eeed;border-radius:4px;padding:1px 6px}
.wrap{display:flex;flex-wrap:wrap;max-width:1240px;margin:0 auto;gap:32px;padding:32px 24px 80px}
nav.toc{flex:1 1 220px;max-width:100%}
@media(min-width:960px){nav.toc{flex:0 0 240px;position:sticky;top:24px;align-self:flex-start;max-height:calc(100vh - 48px);overflow:auto}}
.toc .brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:17px;margin-bottom:18px;color:var(--ink);text-decoration:none}
.toc .brand-mark{display:block;flex:none;width:24px;height:24px}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.toc a{display:block;padding:6px 10px;border-radius:8px;text-decoration:none;color:var(--muted);font-size:14px}
.toc a:hover{background:#e6eeed;color:var(--ink)}
main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:22px}
header.hero{background:var(--ink);color:#e9f0ef;border-radius:16px;padding:32px}
header.hero h1{margin:0 0 8px;font-size:28px;color:#fff}
header.hero p{margin:0;color:#b9c9c6;max-width:720px}
.meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.meta span{font-size:12px;background:#233640;border:1px solid #34505c;border-radius:999px;padding:3px 10px;color:#dfe8e6}
section{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px 28px}
section h2{margin:0 0 12px;font-size:21px;display:flex;align-items:center;gap:10px}
section h2 .n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:var(--water);color:#fff;font-size:14px;flex:none}
section h3{font-size:16px;margin:22px 0 8px}
section p{margin:8px 0}
ul,ol.steps{padding-left:20px;margin:8px 0}
li{margin:4px 0}
table{width:100%;border-collapse:collapse;font-size:14px;margin:10px 0}
th,td{text-align:left;padding:10px;border-bottom:1px solid var(--soft);vertical-align:top}
th{font-size:13px;color:var(--muted);font-weight:600;background:#f7faf9}
.code{position:relative;margin:10px 0}
.code pre{margin:0;background:#10202a;color:#dfe9e8;border-radius:10px;padding:16px 18px;overflow-x:auto;line-height:1.6}
.code .copy{position:absolute;top:8px;right:8px;font:inherit;font-size:12px;border:1px solid #34505c;background:#1b3340;color:#dfe8e6;border-radius:6px;padding:3px 10px;cursor:pointer}
.code .copy:hover{background:#26475a}
.code .label{position:absolute;top:8px;left:14px;font-size:11px;color:#8fb0b6;letter-spacing:.03em}
.code .label + pre{padding-top:30px}
.note{border-radius:10px;padding:12px 16px;font-size:14px;margin:12px 0}
.note.info{background:#eef6f6;border:1px solid #cfe3e3;color:var(--water-ink)}
.note.warn{background:var(--amber-bg);border:1px solid var(--amber-line);color:#5e3a06}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:12px 0}
.card{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fbfcfc}
.card h4{margin:0 0 6px;font-size:15px}
.card p{margin:0;font-size:14px;color:var(--muted)}
.tag{display:inline-block;font-size:11px;font-weight:700;border-radius:4px;padding:1px 6px;margin-left:6px;vertical-align:2px}
.tag.ok{background:var(--pool);color:var(--water-ink)}
.tag.soon{background:#e6eaeb;color:#44545a}
.flow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0;font-size:13px}
.flow span{background:#f7faf9;border:1px solid var(--line);border-radius:8px;padding:6px 10px}
.flow b{color:var(--muted);font-weight:400}
.check{list-style:none;padding:0}
.check li{padding-left:28px;position:relative;margin:8px 0}
.check li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border:2px solid var(--water);border-radius:4px}
footer{color:var(--muted);font-size:13px;text-align:center;padding-top:8px}
@media print{nav.toc,.copy{display:none}body{background:#fff}section{break-inside:avoid}}