:root{
  --bg:#ffffff; --fg:#1c1a18; --dim:#6b6560; --line:#e6e2dd;
  --panel:#faf8f6; --accent:#1d4ed8; --code:#f3f0ec;
  --ok:#15803d; --warn:#b45309; --danger:#b91c1c;
  --sidebar-w:262px;
}
:root[data-theme="dark"]{
  --bg:#16181c; --fg:#e8e6e3; --dim:#9a948d; --line:#2c2f36;
  --panel:#1c1f24; --accent:#7aa2ff; --code:#22262c;
  --ok:#4ade80; --warn:#fbbf24; --danger:#f87171;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg);
  font-family:"Pretendard Variable",Pretendard,"Malgun Gothic","맑은 고딕",
              -apple-system,system-ui,sans-serif;
  font-size:16.5px; line-height:1.78;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
code,pre,kbd{font-family:"D2Coding",Consolas,"Courier New",monospace}

/* ---------- 상단바 ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:12px;
  height:52px; padding:0 14px;
  background:var(--bg); border-bottom:1px solid var(--line);
}
.spacer{flex:1}
.brand{
  font-weight:700; font-size:15.5px; color:var(--fg);
  letter-spacing:-.01em; white-space:nowrap;
}
.icon-btn{
  width:34px; height:34px; display:grid; place-items:center; gap:3px;
  background:none; border:1px solid transparent; border-radius:8px;
  color:var(--fg); cursor:pointer; font-size:15px; padding:0;
}
.icon-btn:hover{background:var(--panel); border-color:var(--line)}
#navToggle{gap:1.5px}
#navToggle span{
  display:block; width:15px; height:1.5px; background:var(--fg);
  border-radius:2px; grid-column:1;
}
.pill{
  height:30px; padding:0 12px; font-size:13px;
  background:none; color:var(--dim);
  border:1px solid var(--line); border-radius:99px; cursor:pointer;
  font-family:inherit;
}
.pill.on{background:var(--accent); border-color:var(--accent); color:#fff}

/* ---------- 레이아웃 ---------- */
.layout{display:flex; align-items:flex-start}
.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  position:sticky; top:52px; height:calc(100vh - 52px);
  overflow-y:auto; padding:18px 10px 60px 16px;
  border-right:1px solid var(--line); background:var(--bg);
  font-size:14px;
}
body.nav-closed .sidebar{display:none}
.main{flex:1; min-width:0; display:flex; justify-content:center}
.doc{width:100%; max-width:760px; padding:34px 26px 120px}

/* ---------- 사이드바 ---------- */
.nav-group{margin-bottom:14px}
.nav-head{
  display:flex; align-items:center; gap:7px;
  font-weight:600; color:var(--fg); padding:4px 6px; font-size:14px;
}
.nav-sub{
  font-size:12.5px; color:var(--dim); padding:6px 6px 2px 6px;
}
.dot{width:8px; height:8px; border-radius:99px; display:inline-block}
.cnt{margin-left:auto; color:var(--dim); font-size:12.5px; font-weight:400}
.sidebar ul{list-style:none; margin:2px 0 0; padding:0}
.sidebar li a{
  display:block; padding:5px 8px 5px 20px; border-radius:7px;
  color:var(--dim); font-size:13.8px; line-height:1.45;
}
.sidebar li a:hover{background:var(--panel); color:var(--fg)}
.sidebar li a.active{background:var(--panel); color:var(--fg); font-weight:600}
.ch{color:var(--dim); margin-right:7px; font-size:12.5px}
.nav-sep{height:1px; background:var(--line); margin:14px 6px}
.soon{cursor:default; opacity:.55}
.soon:hover{background:none !important}
.soon-tag{font-size:11px; color:var(--dim); border:1px solid var(--line);
  border-radius:4px; padding:0 4px; margin-left:5px}

/* ---------- 문서 머리 ---------- */
.kicker{font-size:13px; font-weight:600; letter-spacing:.02em; margin-bottom:6px}
.doc h1{
  font-size:33px; line-height:1.3; margin:0 0 16px;
  letter-spacing:-.022em; text-wrap:balance;
}
.meta-row{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:7px}
.meta-key{font-size:12.5px; color:var(--dim); margin-right:4px}
.chip{
  font-size:12.5px; color:var(--dim);
  border:1px solid var(--line); border-radius:99px; padding:1.5px 9px;
}
.chip.tool{color:var(--c); border-color:color-mix(in srgb,var(--c) 40%,transparent)}
.byline{color:var(--dim); font-size:13px; margin:12px 0 0}
.doc h1 + .meta-row{margin-top:2px}

.actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px}
.act{
  display:inline-block; padding:7px 14px; font-size:13.5px;
  border:1px solid var(--line); border-radius:8px; color:var(--dim);
}
.act:hover{border-color:var(--accent); color:var(--accent)}
.act-run{
  border-color:color-mix(in srgb,#1d4ed8 45%,transparent); color:#1d4ed8;
}
:root[data-theme="dark"] .act-run{
  border-color:color-mix(in srgb,#7aa2ff 45%,transparent); color:#7aa2ff;
}

.codebox{
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
  margin:0 0 20px;
}
.codebox-name{
  padding:8px 14px; font-size:12.5px; color:var(--dim);
  background:var(--panel); border-bottom:1px solid var(--line);
  font-family:"D2Coding",Consolas,monospace;
}
.codebox pre{border:0; border-radius:0; margin:0; max-height:520px}

/* ---------- 본문 ---------- */
.content{margin-top:30px}
.content h2{
  font-size:21px; margin:44px 0 14px; padding-bottom:8px;
  border-bottom:1px solid var(--line); letter-spacing:-.015em;
}
.content h3{font-size:17px; margin:30px 0 10px}
.content p{margin:0 0 16px}
.content ul,.content ol{margin:0 0 16px; padding-left:22px}
.content li{margin:5px 0}
.content strong{font-weight:700}
.content hr{border:0; border-top:1px solid var(--line); margin:36px 0}

.tw{overflow-x:auto; margin:0 0 18px}
.content table{
  border-collapse:collapse; width:100%; font-size:15px;
}
.content th,.content td{
  border:1px solid var(--line); padding:8px 12px; text-align:left;
  vertical-align:top;
}
.content th{background:var(--panel); font-weight:600}

.content pre{
  background:var(--code); border:1px solid var(--line); border-radius:9px;
  padding:14px 16px; overflow-x:auto; font-size:14px; line-height:1.6;
}
.content :not(pre) > code{
  background:var(--code); border-radius:5px; padding:1.5px 5px; font-size:.9em;
}

figure{margin:22px 0; text-align:center}
figure img{
  max-width:100%; height:auto; border:1px solid var(--line); border-radius:9px;
}
figcaption{
  margin-top:9px; font-size:13.5px; color:var(--dim); line-height:1.6;
}
.img-missing{
  border:1.5px dashed var(--line); border-radius:9px; padding:34px 18px;
  color:var(--dim); font-size:13.5px; background:var(--panel);
  margin:0 auto;
}
.img-missing code{background:none; color:var(--dim)}

/* ---------- 링크 ---------- */
.wlink{
  color:inherit; text-decoration:none;
  border-bottom:1px solid transparent;
}
.wlink:hover{border-bottom-color:var(--accent); color:var(--accent)}
body.show-links .wlink{
  border-bottom:1px dotted var(--accent); color:var(--accent);
}
.taglink{
  color:var(--accent); font-size:.95em;
  background:color-mix(in srgb,var(--accent) 9%,transparent);
  border-radius:6px; padding:1px 7px; white-space:nowrap;
}
body.show-links .taglink{border-bottom:none}
.link-missing{color:var(--dim); border-bottom:1px dotted var(--dim)}

/* ---------- 콜아웃 ---------- */
.callout{
  border:1px solid var(--line); border-left:3px solid var(--dim);
  background:var(--panel); border-radius:9px;
  padding:16px 18px 4px; margin:24px 0;
}
.callout-title{
  font-weight:700; font-size:14.5px; margin-bottom:10px;
  letter-spacing:-.01em;
}
.callout p{margin:0 0 12px}
.callout table{margin-bottom:12px; font-size:14.5px}
.callout-question{border-left-color:var(--accent)}
.callout-question .callout-title{color:var(--accent)}
.callout-example{border-left-color:var(--ok)}
.callout-example .callout-title{color:var(--ok)}
.callout-warning{border-left-color:var(--warn)}
.callout-warning .callout-title{color:var(--warn)}
.callout-danger{border-left-color:var(--danger)}
.callout-danger .callout-title{color:var(--danger)}

/* ---------- 백링크 / 피드백 ---------- */
.backlinks{
  margin-top:54px; padding-top:18px; border-top:1px solid var(--line);
  font-size:14px;
}
.bl-head{color:var(--dim); font-size:12.5px; margin-bottom:6px}
.feedback{
  margin-top:34px; padding:22px; border:1px solid var(--line);
  border-radius:12px; background:var(--panel);
}
.fb-q{font-size:14.5px; margin-bottom:14px}
.fb-btns{display:flex; gap:10px; flex-wrap:wrap}
.fb{
  padding:9px 20px; font-size:14px; font-family:inherit; cursor:pointer;
  border:1px solid var(--line); border-radius:9px;
  background:var(--bg); color:var(--fg);
}
.fb:hover{border-color:var(--accent); color:var(--accent)}
.fb-more{margin-top:18px}
.fb-sub{font-size:13.5px; color:var(--dim); margin-bottom:10px}
.opt{font-size:12.5px; opacity:.75}
.fb-chips{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px}
.chip-btn{
  font-size:13px; padding:5px 12px; cursor:pointer; font-family:inherit;
  border:1px solid var(--line); border-radius:99px;
  background:var(--bg); color:var(--dim);
}
.chip-btn.on{border-color:var(--accent); color:var(--accent)}
.fb-more textarea{
  width:100%; min-height:64px; padding:10px 12px; font-family:inherit;
  font-size:14px; border:1px solid var(--line); border-radius:9px;
  background:var(--bg); color:var(--fg); resize:vertical;
}
.fb-send{display:flex; gap:9px; justify-content:flex-end; margin-top:10px}
.ghost,.solid{
  padding:8px 16px; font-size:13.5px; border-radius:8px; cursor:pointer;
  font-family:inherit; border:1px solid var(--line);
}
.ghost{background:none; color:var(--dim)}
.solid{background:var(--accent); border-color:var(--accent); color:#fff}
.fb-done{font-size:14.5px; color:var(--ok)}

/* ---------- 문단 표시 (모르겠어요) ---------- */
.blk{position:relative}
.flag{
  position:absolute; left:-30px; top:5px;
  width:22px; height:22px; padding:0; line-height:1;
  border:1px solid transparent; border-radius:7px;
  background:none; color:var(--dim); cursor:pointer;
  font-family:inherit; font-size:13px; opacity:0;
  transition:opacity .12s;
}
.blk:hover .flag{opacity:.45}
.flag:hover{opacity:1 !important; background:var(--panel); border-color:var(--line)}
.blk.flagged{
  box-shadow:-14px 0 0 -12px var(--warn);
}
.blk.flagged .flag{
  opacity:1; color:var(--warn); border-color:var(--warn);
  background:var(--bg);
}
.flag-box{
  margin:-4px 0 20px; padding:14px 16px;
  border:1px solid var(--line); border-left:3px solid var(--warn);
  border-radius:9px; background:var(--panel);
}
.flag-box .fb-lab{font-size:13.5px; color:var(--fg); margin-bottom:9px}
.flag-box .fb-lab .opt{margin-left:8px; font-size:12.5px; color:var(--dim)}
.flag-box .fb-lab.done{color:var(--ok); margin:0}
.flag-box textarea{
  width:100%; padding:9px 11px; font-family:inherit; font-size:14px;
  border:1px solid var(--line); border-radius:8px;
  background:var(--bg); color:var(--fg); resize:vertical; line-height:1.6;
}
.flag-act{display:flex; gap:8px; justify-content:flex-end; margin-top:9px}

@media (max-width:1100px){
  .flag{left:auto; right:-4px; top:-2px}
  .blk.flagged{box-shadow:none; background:color-mix(in srgb,var(--warn) 7%,transparent);
    border-radius:7px}
}

/* ---------- 맨 위로 ---------- */
.to-top{
  position:fixed; right:22px; bottom:22px; width:40px; height:40px;
  border-radius:99px; border:1px solid var(--line); background:var(--bg);
  color:var(--fg); cursor:pointer; font-size:17px; opacity:0;
  transition:opacity .18s; pointer-events:none;
}
.to-top.on{opacity:1; pointer-events:auto}

/* ---------- 수식 ---------- */
.katex-display{overflow-x:auto; overflow-y:hidden; padding:4px 0; margin:20px 0}

/* ---------- 좁은 화면 ---------- */
@media (max-width:900px){
  .sidebar{
    position:fixed; left:0; top:52px; z-index:40;
    box-shadow:0 10px 30px rgba(0,0,0,.14);
  }
  body:not(.nav-open) .sidebar{display:none}
  .doc{padding:26px 18px 100px}
  .doc h1{font-size:27px}
}

.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:12px; margin-top:24px}
.card{display:block; padding:16px 18px; border:1px solid var(--line);
  border-radius:11px; background:var(--panel); color:var(--fg)}
.card:hover{border-color:var(--accent)}
.card-t{font-weight:600; margin-top:4px; font-size:15.5px}