:root{--bg:#f7f9f8;--card:#fff;--ink:#14232b;--mute:#5b6b72;--line:#d3ddd7;--accent:#1f6f5c;--on:#fff;--hi:#ffd45c;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0f1a1e;--card:#172a30;--ink:#e8f0ec;--mute:#9fb2b8;--line:#2a4047;--accent:#5fc3a8;--on:#0f1a1e;--hi:#ffd45c;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0f1a1e;--card:#172a30;--ink:#e8f0ec;--mute:#9fb2b8;--line:#2a4047;--accent:#5fc3a8;--on:#0f1a1e;--hi:#ffd45c;color-scheme:dark}
*,*:before,*:after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.7 'Noto Sans KR',system-ui,sans-serif;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:var(--accent)}
.wrap{max-width:1240px;margin:0 auto;padding:16px 16px 48px}
h1,h2,.logo{font-family:'Black Han Sans','Noto Sans KR',sans-serif;font-weight:400;margin:0}
.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0 18px}
.logo{font-size:2rem;line-height:1.25;color:inherit;text-decoration:none}
.logo mark{background:var(--hi);color:#14232b;padding:0 .2em}
.sub{color:var(--mute);margin:0;flex:1 1 220px}
.theme{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 14px;font:inherit;font-size:.9rem;cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.layout{display:grid;grid-template-columns:230px minmax(0,1fr) 300px;grid-template-areas:". head ." "side main rail";column-gap:20px;row-gap:0;align-items:start}
.layout.nohead{grid-template-areas:"side main rail"}
.pagehead{grid-area:head;min-width:0}#side{grid-area:side}main{grid-area:main}#rail{grid-area:rail}
main{min-width:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px;margin-bottom:16px}
.page-title{font-size:1.9rem;line-height:1.3;margin:0 0 6px}
.lead{color:var(--mute);margin:0 0 16px}
label{display:block;font-weight:500;margin:12px 0 4px}
input,select{width:100%;padding:11px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);font:inherit}
.btn{margin-top:16px;width:100%;padding:13px;border:0;border-radius:6px;background:var(--accent);color:var(--on);font:700 1rem 'Noto Sans KR',sans-serif;cursor:pointer}
.big{font-family:'Black Han Sans',sans-serif;font-size:2.4rem;color:var(--accent);line-height:1.2}
table{width:100%;border-collapse:collapse;margin-top:10px}
td,th{padding:7px 4px;border-bottom:1px solid var(--line);text-align:left}
td:last-child{text-align:right}
.note{font-size:.85rem;color:var(--mute);margin-top:12px}
.opt{display:block;width:100%;text-align:left;margin-top:8px;padding:12px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);font:inherit;cursor:pointer}
.opt:hover{border-color:var(--accent)}
/* 왼쪽 메뉴 */
#side{position:sticky;top:12px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px;max-height:calc(100vh - 40px);overflow:auto}
#side nav>a{display:block;border-left:3px solid transparent;color:var(--ink);font-weight:700;padding:11px 10px;border-radius:0 6px 6px 0;text-decoration:none}
#side nav>a:hover{background:var(--bg)}
#side nav>a[aria-current=page]{background:var(--bg);border-left-color:var(--accent)}
.toc{margin:2px 0 8px 16px}
.toc a{position:relative;display:flex;align-items:center;gap:6px;color:var(--ink);text-decoration:none;font-size:.95rem;padding:7px 8px 7px 20px}
.toc a::before{content:'';position:absolute;left:0;top:0;bottom:0;border-left:1px dotted var(--mute)}
.toc a:last-child::before{bottom:50%}
.toc a::after{content:'';position:absolute;left:0;top:50%;width:12px;border-top:1px dotted var(--mute)}
.toc a:hover .lb{text-decoration:underline}
.toc a[aria-current=true] .lb{font-weight:700;color:var(--accent)}
.ic{display:inline-block;width:14px;height:14px;border:1px solid var(--mute);border-radius:2px;background:radial-gradient(circle,var(--accent) 0 3px,transparent 3.5px),var(--card);flex:none}
.n{color:var(--mute)}
.nb{background:#f26a21;color:#fff;font:700 10px/14px sans-serif;width:14px;height:14px;text-align:center;border-radius:2px}
/* 오른쪽 */
#rail{position:sticky;top:12px}
#rail h2{font-size:1.15rem;margin-bottom:8px}
#rail ol{margin:0;padding-left:1.2em}
#rail li{margin:.4em 0;line-height:1.45}
#rail a{color:var(--ink);text-decoration:none}
#rail a:hover{text-decoration:underline}
/* 글 목록 */
.feed{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.fi{display:block;padding:20px 22px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.fi:last-child{border-bottom:0}
.fi:hover{background:var(--bg)}
.fh{display:flex;align-items:center;gap:10px}
.av{width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--on);display:grid;place-items:center;font:400 1.1rem 'Black Han Sans',sans-serif;flex:none}
.au{font-weight:700}
.bd{color:var(--accent);font-weight:700;font-size:.9rem;border-left:1px solid var(--line);padding-left:10px}
.tm{margin-left:auto;color:var(--mute);font-size:.9rem}
.ft{font-size:1.2rem;font-weight:700;line-height:1.4;margin:14px 0 4px}
.pv{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fb{display:flex;justify-content:space-between;align-items:center;margin-top:14px;color:var(--mute);font-size:.9rem}
.chip{border:1px solid var(--line);border-radius:999px;padding:2px 12px}
/* 글 본문 */
.post .meta{font-size:.85rem;color:var(--mute)}
.post h1{font-size:1.7rem;line-height:1.35;margin:4px 0 6px}
.post h2{font:700 1.2rem 'Noto Sans KR',sans-serif;margin:1.8em 0 .3em}
.post p,.post li{margin:.8em 0}
.post ul,.post ol{padding-left:1.2em}
.post svg{display:block;width:100%;height:auto;margin:12px 0;font-family:'Noto Sans KR',sans-serif}
.post table{font-size:.95rem}
.back{display:inline-block;font-weight:700;text-decoration:none;margin-bottom:10px}
.related a{display:block;padding:8px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.related a:last-child{border-bottom:0}
.related a:hover{color:var(--accent)}
footer{color:var(--mute);font-size:.85rem;margin-top:28px;border-top:1px solid var(--line);padding-top:16px}
footer a{color:var(--mute);margin-right:12px}
/* 방문자·읽음·조회수 */
.visits .vrow{display:flex;justify-content:space-between;padding:4px 0}
.visits b{font-variant-numeric:tabular-nums}
.rd{font-size:.78rem;font-weight:700;color:var(--mute);border:1px solid var(--line);border-radius:4px;padding:0 6px;margin-right:8px}
.fi.read .ft{color:var(--mute)}
.fv:not(:empty)::after{content:" · "}
[hidden]{display:none!important}
@media(max-width:1000px){.layout{grid-template-columns:230px minmax(0,1fr);grid-template-areas:". head" "side main" "rail rail"}.layout.nohead{grid-template-areas:"side main" "rail rail"}#rail{position:static}}
@media(max-width:700px){.layout{grid-template-columns:1fr;grid-template-areas:"side" "head" "main" "rail";row-gap:12px}.layout.nohead{grid-template-areas:"side" "main" "rail"}#side{position:static;max-height:none;padding:6px}#side nav{display:flex;flex-wrap:wrap}#side nav>a{flex:1 1 auto;text-align:center;border-left:0;border-bottom:3px solid transparent;border-radius:6px 6px 0 0;padding:8px 6px;font-size:.92rem}#side nav>a[aria-current=page]{border-bottom-color:var(--accent)}.toc{flex:1 1 100%;order:1}.logo{font-size:1.7rem}.page-title{font-size:1.6rem}.post h1{font-size:1.45rem}.fi{padding:16px}}