:root{
  --bg:#fcfcfa; --panel:#f4f3ee; --text:#1b1a17; --muted:#6f6b62;
  --rule:#e2e0d8; --link:oklch(0.47 0.1 250); --seed:oklch(0.55 0.11 45);
  --serif:'Noto Serif KR', Georgia, serif;
  --sans:'Noto Sans KR', Helvetica, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
}
html[data-theme=dark]{
  --bg:#131311; --panel:#1a1a17; --text:#e7e5de; --muted:#98938a;
  --rule:#2e2d29; --link:oklch(0.79 0.08 245); --seed:oklch(0.76 0.1 55);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
.mono{font-family:var(--mono)}
.dim{color:var(--muted);font-size:11px}
.kicker{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.site-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:18px 40px;background:var(--bg);border-bottom:1px solid var(--rule)}
.head-left{display:flex;align-items:baseline;gap:16px}
.brand{font-family:var(--serif);font-size:17px;font-weight:600;color:var(--text)}
.site-head nav{display:flex;gap:14px;font-family:var(--mono);font-size:12px}
.head-right{display:flex;align-items:center;gap:12px}
.head-right input,.head-right button{background:transparent;color:var(--text);border:1px solid var(--rule);
  padding:7px 11px;font-size:13px;font-family:var(--sans);outline:none;min-width:0}
.head-right input{width:230px}
.head-right button{font-family:var(--mono);font-size:12px;color:var(--muted);cursor:pointer;white-space:nowrap;flex-shrink:0}
.head-right button:hover{color:var(--text);border-color:var(--muted)}
.head-right input:focus{border-color:var(--muted)}

main{padding:64px 40px 80px}
body.narrow main{max-width:760px}
h1{margin:0;font-family:var(--serif);font-size:26px;font-weight:600}
.tagline{margin:0 0 10px;max-width:44ch;font-family:var(--serif);font-size:18px;line-height:1.8;
  color:var(--muted);text-wrap:pretty}
.lede{margin:8px 0 30px;max-width:46ch;font-size:14px;line-height:1.7;color:var(--muted)}

.groups{display:flex;flex-direction:column;gap:44px;margin-top:48px;padding-top:40px;border-top:1px solid var(--rule)}
.group{display:flex;flex-direction:column;gap:12px}
.group-head{display:flex;align-items:baseline;gap:10px}
.group-head h2{margin:0;font-family:var(--serif);font-size:20px;font-weight:600}
.rows{display:flex;flex-direction:column;gap:14px}
.row{display:flex;flex-direction:column;gap:3px}
.row:hover{text-decoration:none}
.row-title{font-size:16px;color:var(--link)}
.row:hover .row-title{text-decoration:underline;text-underline-offset:3px}
.row-sum{font-size:14px;line-height:1.65;color:var(--muted)}
.badge{margin-left:8px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted)}

.changes{display:flex;flex-direction:column;margin-top:8px}
.change{display:grid;grid-template-columns:92px 1fr auto;gap:14px;align-items:baseline;
  padding:12px 0;border-top:1px solid var(--rule)}
.change:hover{text-decoration:none}
.change-title{font-size:16px;color:var(--link)}
.change:hover .change-title{text-decoration:underline;text-underline-offset:3px}

body.note-page main{display:grid;grid-template-columns:236px minmax(0,64ch);gap:0 52px;
  padding:44px 40px 96px;align-items:start}
.rail{position:sticky;top:86px;display:flex;flex-direction:column;gap:7px;padding-top:16px}
.rail .back{font-size:11px;margin-bottom:14px}
.toc{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.toc a{font-size:13px;line-height:1.6;color:var(--muted)}
.toc a:hover{color:var(--text)}
.toc-3{padding-left:10px}
.stats{display:flex;flex-direction:column;gap:6px;margin-top:24px;padding-top:18px;
  border-top:1px solid var(--rule);font-size:11px;color:var(--muted);line-height:1.7}

article{display:flex;flex-direction:column;gap:20px;min-width:0}
article h1{font-size:33px;line-height:1.4;letter-spacing:-.015em}
.orig{margin:-14px 0 0;font-size:12px;letter-spacing:.04em;color:var(--muted)}
.subtitle{margin:0;font-family:var(--serif);font-size:19px;line-height:1.75;color:var(--muted);text-wrap:pretty}
article h2,article h3,article h4{margin:18px 0 0;font-family:var(--serif);font-weight:600;
  line-height:1.45;scroll-margin-top:96px}
article h2{font-size:21px} article h3{font-size:17px} article h4{font-size:15px}
article p{margin:0;font-family:var(--serif);font-size:18px;line-height:1.95;text-wrap:pretty}
article ul,article ol{margin:0;padding-left:22px;font-family:var(--serif);font-size:18px;line-height:1.75}
article li{margin-bottom:4px}
article li ul{margin:6px 0 2px;padding-left:20px;list-style:circle;font-size:1em}
article blockquote{margin:0;padding:2px 0 2px 20px;border-left:2px solid var(--seed);
  display:flex;flex-direction:column;gap:10px;color:var(--muted)}
article pre{margin:0;padding:16px 18px;background:var(--panel);overflow-x:auto;
  font-family:var(--mono);font-size:13px;line-height:1.65}
article code{font-family:var(--mono);font-size:.86em;background:var(--panel);padding:1px 5px}
article pre code{background:none;padding:0;font-size:inherit}
article hr{margin:10px 0;border:0;border-top:1px solid var(--rule)}
a.wiki{border-bottom:1px solid var(--rule)}
a.ext{color:var(--muted);border-bottom:1px dotted var(--rule)}
.dead{color:var(--muted)}

.scroll-x{overflow-x:auto}
article table{border-collapse:collapse;width:100%;font-family:var(--sans)}
article th,article td{padding:9px 12px;border-bottom:1px solid var(--rule);text-align:left;
  vertical-align:top;font-size:14px;line-height:1.6}
article th{font-weight:500;font-size:12px;letter-spacing:.04em;color:var(--muted);border-bottom-color:var(--muted)}

.source{display:flex;flex-direction:column;gap:6px;padding:14px 18px;background:var(--panel);
  border-left:2px solid var(--seed)}
.source .kicker{color:var(--seed)}
.source-note{font-size:14px;line-height:1.7;color:var(--muted)}
.source a{font-family:var(--mono);font-size:12px;line-height:1.7}
.backlinks{display:flex;flex-direction:column;gap:9px;margin-top:34px;padding-top:22px;border-top:1px solid var(--rule)}
.backlinks a{font-size:15px;line-height:1.9}

#search-results{padding:48px 40px 72px;max-width:760px}
#search-results .hit{display:flex;flex-direction:column;gap:5px;padding:16px 0;border-top:1px solid var(--rule)}
#search-results .hit:hover{text-decoration:none}
#search-results .hit-title{font-family:var(--serif);font-size:17px;color:var(--link)}
#search-results .hit:hover .hit-title{text-decoration:underline;text-underline-offset:3px}
#search-results .hit-folder{margin-left:9px;font-family:var(--mono);font-size:10px;color:var(--muted)}
#search-results .hit-ex{font-size:14px;line-height:1.7;color:var(--muted)}
#search-results .count{margin:0 0 22px;font-family:var(--mono);font-size:12px;color:var(--muted)}

@media (max-width:860px){
  .site-head{flex-wrap:wrap;gap:12px;padding:14px 20px}
  .head-right input{width:100%;flex:1}
  main,#search-results{padding:40px 20px 64px}
  body.note-page main{grid-template-columns:minmax(0,1fr);gap:32px;padding:32px 20px 64px}
  .rail{position:static;order:2;padding-top:24px;border-top:1px solid var(--rule)}
  article{order:1}
  .change{grid-template-columns:1fr auto}
  .change span:first-child{grid-column:1/-1}
}

/* 아직 쓰지 않은 문서로의 링크 — 위키에서는 이게 정상이고, 다음에 쓸 것을 가리킨다. */
a.wiki.new,a.new,.row-title.new{color:var(--muted);border-bottom:1px dashed var(--rule)}
a.wiki.new:hover,a.new:hover,.row-title.new:hover{color:var(--seed);border-bottom-color:var(--seed);text-decoration:none}
h1.wiki-name{font-family:var(--mono);font-size:23px;letter-spacing:-.01em}