/* css/style.css */
:root{--bg:#fff;--fg:#1c1e21;--mut:#6b7280;--line:#e5e7eb;--acc:#2563eb;--card:#f8fafc}
@media(prefers-color-scheme:dark){:root{--bg:#0f1115;--fg:#e8eaed;--mut:#9aa0a6;--line:#262a31;--acc:#6ea8ff;--card:#161a20}}

/* base */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.7 -apple-system,"Pretendard","Noto Sans KR",sans-serif}
main{max-width:860px;margin:0 auto;padding:56px 24px 96px}
section{scroll-margin-top:24px}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
ul{margin:.4rem 0 .6rem;padding-left:1.2rem}
li{margin:.25rem 0}
footer{margin-top:64px;color:var(--mut);font-size:.82rem}

/* header */
h1{font-size:2.2rem;margin:0}
.role{color:var(--mut);margin:.2rem 0 1rem;font-size:1.1rem}
.links{display:flex;gap:14px;flex-wrap:wrap;font-size:.95rem}

/* stat cards */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 12px;margin:28px 0;align-items:stretch}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:12px;display:flex;flex-direction:column}
.stat b{display:block;font-size:1.15rem;color:var(--acc)}
.stat p{margin:.3rem 0 .8rem;font-weight:600;line-height:1.45}
.stat span{display:block;font-size:.8rem;color:var(--mut);margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
@supports (grid-template-rows:subgrid){
 .stat{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0}
 .stat span{margin-top:0;align-self:end}
}

/* section title + intro */
h2{font-size:.85rem;letter-spacing:.15em;text-transform:uppercase;color:var(--mut);margin:56px 0 18px;border-bottom:1px solid var(--line);padding-bottom:8px}
.lead{font-size:1.4rem;font-weight:700;line-height:1.5;margin:0 0 14px;letter-spacing:-.01em}
.intro-p{margin:0 0 18px}
.pts{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.pts li{margin:0;padding-left:14px;border-left:3px solid var(--acc)}
.pts strong{display:block;font-size:.98rem}
.pts span{color:var(--mut);font-size:.93rem}

/* tags + collapsible cards */
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.tag{font-size:.76rem;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:1px 10px}
details{border:1px solid var(--line);border-radius:12px;margin:0 0 10px;background:var(--card)}
details>summary{list-style:none;cursor:pointer;padding:14px 18px 14px 44px;position:relative;display:grid;gap:2px}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"▸";position:absolute;left:18px;top:14px;color:var(--mut);transition:transform .15s}
details[open]>summary::before{transform:rotate(90deg)}
summary .t{font-weight:700}
summary .m{font-size:.82rem;color:var(--mut)}
summary .o{font-size:.92rem}
.b{padding:0 18px 16px 44px;font-size:.95rem}
details.more{background:transparent;border-style:dashed}
details.more>summary{font-weight:600;color:var(--acc)}
details.more>.list{padding:0 12px 6px}
details.more details{background:var(--bg)}

/* tables */
table{border-collapse:collapse;width:100%;font-size:.93rem}
td,th{border-bottom:1px solid var(--line);padding:8px;text-align:left;vertical-align:top}
th{width:130px;color:var(--mut);font-weight:600}
.num{font-weight:700}

/* scroll progress + side TOC */
#bar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--acc);z-index:20}
#toc{position:fixed;top:50%;right:max(16px,calc((100vw - 860px)/2 - 170px));transform:translateY(-50%) translateX(12px);
 opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:10}
#toc.show{opacity:1;pointer-events:auto;transform:translateY(-50%)}
#toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
#toc a{display:flex;align-items:center;gap:10px;padding:5px 0 5px 14px;margin-left:-2px;border-left:2px solid transparent;font-size:.82rem;color:var(--mut);transition:color .15s,border-color .15s;white-space:nowrap}
#toc a:hover{color:var(--fg);text-decoration:none}
#toc a.on{color:var(--acc);border-left-color:var(--acc);font-weight:700}
#toc .dot{display:none}

/* narrow screens: dot rail, vertically centered on the right */
@media(max-width:1180px){
 #toc{right:10px}
 #toc ol{border-left:0}
 #toc a{justify-content:flex-end;padding:7px 0;margin:0;border-left:0;position:relative}
 #toc .dot{display:block;width:8px;height:8px;border-radius:50%;background:var(--line);flex:none;transition:background .15s,transform .15s}
 #toc a.on .dot{background:var(--acc);transform:scale(1.4)}
 #toc .lb{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:1px 10px;opacity:0;transform:translateX(6px);transition:opacity .15s,transform .15s;pointer-events:none}
 #toc a.on .lb,#toc a:hover .lb,#toc a:focus .lb{opacity:1;transform:none}
 #toc a:not(.on) .lb{position:absolute;right:20px}
}

@media print{#toc,#bar{display:none}main{padding:0}}