/* 🔴 다크 «확정». prefers-color-scheme 에 맡기지 않는다 — OS·브라우저 설정과 무관하게
   항상 이 값으로 뜬다. 토글도 없다 (관리자 지시 2026-08-06). */
:root {
  color-scheme: dark;
  --bg:#101413; --surface:#181d1c; --surface2:#1f2624; --line:#2c3533;
  --ink:#e6ebe9; --ink2:#a6b0ae; --ink3:#78827f;
  --accent:#57b8a9;
  --g-human:#68b97c; --g-machine:#d9a341; --g-unverified:#e2786e;
  --g-human-bg:rgba(104,185,124,.12); --g-machine-bg:rgba(217,163,65,.12); --g-unverified-bg:rgba(226,120,110,.10);
  /* 색이 «역할»을 뜻한다 (03-map 과 같은 배정) — 수집=호박 · 적재/사람=청록 · 조회=자수정 */
  --raw:#d9a341; --use:#a891d6;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", system-ui, sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); line-height:1.75;
  font-family:var(--sans); }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

.topnav { display:flex; align-items:center; gap:16px; padding:10px 20px;
  background:var(--surface); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10; }
.brand { color:var(--ink); white-space:nowrap; display:flex; align-items:baseline; gap:8px; }
.brand:hover { text-decoration:none; }
.brand-ko { font-weight:700; letter-spacing:-.01em; }
.brand-en { font-size:11px; color:var(--ink3); letter-spacing:.06em; text-transform:uppercase; }
@media (max-width:700px) { .brand-en { display:none; } }
.navlink { font-size:14px; white-space:nowrap; }
.navnote { font-size:12px; color:var(--ink3); white-space:nowrap; margin-left:auto; }
.searchform { flex:1; max-width:420px; position:relative; display:flex; }
.searchform input { width:100%; font-size:14px; padding:6px 46px 6px 12px; border-radius:8px;
  border:1px solid var(--line); background:var(--bg); color:var(--ink); outline:none; }
.searchform input:focus { border-color:var(--accent); }
/* 단축키를 «화면에 표기»한다 — 있는 줄 모르면 없는 것과 같다 */
.kbd { position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font:600 11px/1 ui-monospace, "SF Mono", Menlo, monospace; color:var(--ink3);
  border:1px solid var(--line); border-radius:5px; padding:4px 6px;
  background:var(--surface); cursor:pointer; user-select:none; white-space:nowrap; }
.searchform input:focus + .kbd { opacity:0; pointer-events:none; }

/* 폰 폭에서는 상단바를 두 줄로 접는다 — 브랜드와 이메일이 nowrap 이라 한 줄에 두면
   검색창에 60px 밖에 안 남아 쓸 수 없다. 폰으로 슬랙 링크를 여는 몫이 크다.
   🔴 이 블록은 위 `.searchform` 규칙보다 «뒤»에 있어야 한다 — 앞에 두면 flex:1 이
   flex-basis 를 0 으로 되돌려 검색창이 줄바꿈하지 않는다(그렇게 한 번 틀렸다).
   ⚠️ 폰 화면 확인은 헤드리스 크롬 `--window-size` 로 하면 «틀린다» — 맥에서 창이
   500px 아래로 안 줄어들어 500px 렌더를 잘라 보여준다. iframe 을 390px 로 잡고 볼 것. */
@media (max-width:700px) {
  .topnav { flex-wrap:wrap; gap:8px 12px; padding:8px 14px; }
  .searchform { order:3; flex:1 0 100%; max-width:none; }
  /* 이메일은 «잘려도» 된다 — 누구로 로그인했는지는 앞부분만 봐도 알아본다 */
  .navnote { min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:11.5px; }
}

.layout { display:flex; align-items:flex-start; max-width:1200px; margin:0 auto; }
/* 사이드바 없는 화면(대문·개요·규격·적재현황) — 본문을 가운데로 넓게 */
.layout.wide .page { max-width:980px; margin:0 auto; }
/* ── 폴더 트리 — 파일 탐색기처럼. 꺾쇠 · 폴더 아이콘 · 들여쓰기(--d) · 현재 문서 강조 ── */
/* 🔴 사이드바도 같은 값을 쓴다 — 여기도 53px 로 박혀 있어 같은 틈이 있었다 (app.js 가 잰다) */
.sidebar { width:262px; flex-shrink:0; position:sticky; top:var(--navh, 51px);
  max-height:calc(100vh - var(--navh, 51px)); overflow-y:auto; padding:14px 6px 40px 12px;
  font-size:13px; border-right:1px solid var(--line); }
.sb-head { font-size:11.5px; font-weight:600; color:var(--ink3); letter-spacing:.02em;
  padding:4px 8px 8px; }
.sb-head .count { font-weight:400; }

/* 들여쓰기: 깊이 1칸 = 14px. 꺾쇠·아이콘 자리를 포함해 세로선이 가지런하게 맞는다 */
.tdir > summary, .tfile { padding-left:calc(8px + var(--d) * 14px); }
.tdir > summary { display:flex; align-items:center; gap:6px; cursor:pointer;
  list-style:none; padding-top:4px; padding-bottom:4px; padding-right:6px;
  border-radius:6px; color:var(--ink); font-weight:600; }
.tdir > summary::-webkit-details-marker { display:none; }
.tw  { flex-shrink:0; width:9px; font-size:9px; color:var(--ink3); }
.tw::before { content:"▶"; }
.tdir[open] > summary .tw::before { content:"▼"; }
.tfico { flex-shrink:0; font-size:12px; }
.tfico::before { content:"📁"; }
.tdir[open] > summary .tfico::before { content:"📂"; }
.tdir > summary:hover { background:var(--surface2); }
.tdir > summary:hover .tw { color:var(--accent); }
.tdir .tpath { font:400 11px ui-monospace, "SF Mono", Menlo, monospace; color:var(--ink3);
  opacity:0; }
.tdir > summary:hover .tpath { opacity:1; }
.tdir .count { margin-left:auto; font-size:11.5px; color:var(--ink3); }

.tfile { display:flex; align-items:center; gap:6px; color:var(--ink2);
  padding-top:3px; padding-bottom:3px; padding-right:8px; border-radius:5px; }
.tfile::before { content:"📄"; font-size:10px; flex-shrink:0; opacity:.55; }
.tfile .tname { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tfile:hover { background:var(--surface); color:var(--accent); text-decoration:none; }
.tfile.on { background:var(--surface2); color:var(--accent); font-weight:600;
  box-shadow:inset 2px 0 0 var(--accent); }
.tflag { margin-left:auto; font-size:10px; flex-shrink:0; }
.tflag.warn { color:var(--g-unverified); }
.tflag.good { color:var(--g-human); }
@media (max-width:900px) { .sidebar { display:none; } }

.page { flex:1; min-width:0; max-width:860px; padding:28px 24px 80px; }
.back { font-size:14px; }

h1 { font-size:28px; line-height:1.3; margin:.4em 0 .2em; letter-spacing:-.01em; }
.lede { color:var(--ink2); margin:.2em 0 0; }

.chip { display:inline-block; font-size:12.5px; padding:2px 10px; border-radius:99px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink2); margin-right:6px; }
.chip.warn { border-color:var(--g-unverified); color:var(--g-unverified); }
.chip.mid  { border-color:var(--g-machine); color:var(--g-machine); }
.chip.good { border-color:var(--g-human); color:var(--g-human); }
a.chip:hover { text-decoration:none; filter:brightness(1.08); }
.chip.active { outline:2px solid var(--accent); font-weight:700; }
.filter-note { font-size:13px; color:var(--ink2); margin:8px 0 0; }

/* ── 필터 한 상자 — 「신뢰 등급」과 「상태」를 가르고, 아래 한 줄이 지금 탭의 뜻이다 ── */
.filterbar { margin:14px 0 0; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); padding:4px 0 0; }
.fb-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  padding:8px 16px; }
.fb-row + .fb-row { border-top:1px solid var(--line); }
.fb-label { font-size:11.5px; font-weight:600; color:var(--ink3); width:56px; flex-shrink:0;
  letter-spacing:.02em; }
.fb-row .chip { margin-right:0; }
.fb-row .chip b { font-weight:700; }
.fb-note { margin:0; padding:10px 16px; border-top:1px solid var(--line);
  background:var(--surface2); border-radius:0 0 9px 9px;
  font-size:12.5px; color:var(--ink2); line-height:1.6; }

/* ── 목록 툴바 — 왼쪽은 몇 장, 오른쪽이 옵션·정렬 ── */
.listbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:22px 0 0; padding-bottom:8px; border-bottom:1px solid var(--line); font-size:13px; }
.lb-left { color:var(--ink2); }
.lb-right { margin-left:auto; display:flex; align-items:center; gap:14px; }
.opt { font-size:12.5px; color:var(--ink2); white-space:nowrap; }
.opt:hover { text-decoration:none; color:var(--accent); }
.opt.on { color:var(--accent); font-weight:600; }
.sortform { display:flex; align-items:center; gap:6px; }
.sortform label { font-size:11.5px; color:var(--ink3); }
.sortform select { font:inherit; font-size:12.5px; padding:3px 6px; border-radius:6px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); }
.lb-note { font-size:12px; color:var(--ink3); margin:8px 0 0; line-height:1.6; }
.btn.tiny { font-size:12px; padding:3px 9px; }
.bodybar { display:flex; justify-content:flex-end; margin:18px 0 -6px; }
.btn.on { border-color:var(--accent); color:var(--accent); }

/* 🔴 `<!-- 주석 -->` — 기본 숨김. html.show-mdc 가 붙으면 보인다(브라우저 로컬 토글).
   주석«만» 있는 문단(.mdc-block)은 통째로 접는다 — 안 그러면 빈 줄이 남는다.
   그 판정은 서버가 한다(render.py) — CSS 의 :only-child 로는 본문 있는 문단까지 지운다. */
.mdc, .mdc-block { display:none; }
html.show-mdc .mdc { display:inline; color:var(--ink3); font-style:italic; font-size:.94em; }
html.show-mdc .mdc-block { display:block; }
.snippet { font-size:13px; color:var(--ink3); margin-top:4px; }
.empty { color:var(--ink3); }

/* 구역을 «눈에 보이게» 끊는다 — 문서가 늘어나면 구획이 없으면 한 덩어리로 읽힌다 */
.type-sec { margin-top:22px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); overflow:hidden; }
.type-sec h2 { font-size:14px; margin:0; display:flex; align-items:center; gap:9px;
  padding:9px 16px; background:var(--surface2); border-bottom:1px solid var(--line); }
.type-sec .count { color:var(--ink3); font-size:12px; font-weight:400; }
.type-sec .page-list { padding:10px 12px; }
/* 「제목만 보기」 — 줄 간격을 좁혀 훑기 좋게 */
.type-sec.compact .page-list { padding:4px 12px; }
.type-sec.compact .page-list li { padding:6px 12px; margin-bottom:3px; }
.type-badge { font-size:12px; font-weight:600; padding:2px 9px; border-radius:4px;
  background:var(--g-human-bg); color:var(--accent); border:1px solid var(--accent); }

.page-list { list-style:none; margin:0; padding:0; }
.page-list li { background:var(--bg); border:1px solid var(--line); border-radius:8px;
  padding:11px 15px; margin-bottom:6px; }
.page-list li:last-child { margin-bottom:0; }
.pl-title { font-weight:600; font-size:15.5px; }
.pl-desc { font-size:13.5px; color:var(--ink2); margin-top:2px; }
.badges { margin-left:8px; }

/* ── 일괄 도장 「가확인」 ─────────────────────────────────────────
   🔴 체크칸은 «도장이 아니다». 도장 아이콘·초록색을 쓰지 않는다 — 체크한 순간
      「찍었다」로 읽히면 사람이 확인 화면을 안 보고 떠난다. */
.pl-pick { width:15px; height:15px; margin:0 9px 0 0; vertical-align:-2px;
  accent-color:var(--g-machine); cursor:pointer; }
/* 모순 문서 자리 — 칸을 비우면 제목이 들쭉날쭉해진다. 폭만 잡고 「못 찍는다」를 보인다 */
.pl-pick.off { display:inline-block; width:15px; margin:0 9px 0 0; text-align:center;
  color:var(--ink3); cursor:not-allowed; font-size:12px; }
.page-list.pickable .pl-desc { padding-left:24px; }
.page-list.pickable li:has(.pl-pick:checked) { border-color:var(--g-machine);
  background:var(--g-machine-bg); }

/* 🔴 `hidden` 속성이 실제로 «감추게» 한다. 브라우저 기본 규칙 `[hidden]{display:none}` 은
   저자 스타일시트에 무조건 진다 — `.btn{display:inline-block}` 하나로 무력화된다.
   app.js 가 안 돌 때 「눌러도 안 되는 버튼」이 남지 않게 하는 것이 이 한 줄이다. */
[hidden] { display:none !important; }

/* 「담기」 버튼 — 🔴 도장 버튼과 «다르게» 보여야 한다. 담기는 커밋이 아니다 */
.btn.pickbtn { border-color:var(--g-machine); color:var(--g-machine); background:transparent; }
.btn.pickbtn.on { background:var(--g-machine-bg); }

/* ── 이전/다음 — 「어느 목록의 몇 번째인지」가 화살표보다 먼저 온다 ──
   🔴 **상단에 붙어 따라온다.** 문서를 끝까지 읽고 다음 장으로 넘어가는 것이 도장의 동선인데,
      맨 위로 되돌아가야 화살표가 있으면 그 동선이 끊긴다.
   🔴 `top` 은 «상단바 높이»다 — 상단바도 sticky 라 그 아래에 얹혀야 겹치지 않는다.
      실측 2026-08-07: 데스크톱 53px · 폰(390px)에서는 상단바가 두 줄로 접혀 **83px**.
      z-index 는 상단바(10)보다 «낮게» 둔다 — 스크롤되어 올라온 이 바가 상단바를 덮으면 안 된다. */
/* 🔴 `top` 을 «숫자로 박지 않는다». 상단바 높이는 폭·확대 배율·글꼴에 따라 달라진다 —
      실측 2026-08-07: 데스크톱 51px · 폰 83px 인데 53px 로 박혀 있었고, 그 2px(확대하면 더
      벌어진다) 틈으로 본문이 «띠»처럼 비쳐 「글씨가 삐져나온」 것처럼 보였다.
      app.js 가 상단바를 재서 `--navh` 에 심는다. 아래 값은 JS 가 안 돌 때의 대비다.
   🔴 1px 겹친다 — 서브픽셀 반올림으로 머리카락 같은 틈이 남는 것을 막는다. 상단바가
      z-index 10 이라 그 1px 은 상단바가 덮는다. */
.pagenav { position:sticky; top:calc(var(--navh, 51px) - 1px); z-index:8;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  /* 좌우 음수 여백으로 본문 폭을 «가득» 덮는다 — 안 그러면 글이 바 옆으로 스쳐 지나간다 */
  margin:-28px -24px 16px; padding:12px 24px;
  background:var(--bg); border-bottom:1px solid var(--line); }
.pagenav .back { margin:0; white-space:nowrap; }
.pn-pos { font-size:12.5px; color:var(--ink3); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pn-pos strong { font-family:var(--mono); color:var(--ink2); }
.pn-arrows { margin-left:auto; display:flex; gap:8px; flex-shrink:0; }
/* 문서 끝의 것은 «따라오지 않는다» — 거기까지 왔으면 이미 끝이다 */
.pagenav.bottom { position:static; margin:26px 0 0; padding:16px 0 0;
  border-top:1px solid var(--line); border-bottom:0; background:none; }
/* 자리 표시는 «윗줄»로 올린다 — 화살표 둘이 양 끝을 차지해야 어디로 가는지 한눈에 보인다 */
.pagenav.bottom .pn-pos { flex-basis:100%; }
.pagenav.bottom .pn-arrows { margin-left:0; flex:1; justify-content:space-between; }
.pagenav.bottom .btn { max-width:46%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:700px) { .pagenav { top:calc(var(--navh, 83px) - 1px); } }

/* ── 압축 줄 — 신뢰 카드가 화면 위로 사라지면 나타난다 (app.js) ──
   🔴 카드를 «통째로» 고정하지 않는 이유: 제목+요약+카드가 세로 300px 을 먹어 본문이
      거의 안 남는다. 필요한 것은 «어느 문서인가»와 «손이 닿는 버튼» 둘뿐이다. */
.pn-doc { flex-basis:100%; display:flex; align-items:center; gap:8px;
  min-width:0; padding-top:10px; border-top:1px solid var(--line); }
.pn-title { flex:1; min-width:0; font-weight:600; font-size:13.5px; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pn-doc form.inline { margin:0; }

/* 🔴 바닥에 붙어 따라온다 — 43장을 훑다가 위로 돌아가야 서브밋할 수 있으면 안 쓰게 된다 */
.batchbar { position:sticky; bottom:0; z-index:5; display:flex; flex-wrap:wrap; gap:8px 14px;
  align-items:center; margin-top:18px; padding:12px 16px; border:1px solid var(--line);
  border-radius:10px; background:var(--surface2); box-shadow:0 -6px 18px rgba(0,0,0,.35); }
.batchbar.on { border-color:var(--g-machine); }
.bb-n { font-size:14px; color:var(--ink2); }
.bb-n strong { font-family:var(--mono); font-size:16px; color:var(--ink); }
.bb-note { font-size:12px; color:var(--ink3); flex:1; min-width:180px; }
.bb-off { font-size:12px; color:var(--g-machine); font-weight:600; }

.badge { display:inline-block; font-size:11.5px; font-weight:600; padding:1px 8px;
  border-radius:99px; vertical-align:1px; }
.badge.g-human      { color:var(--g-human);      background:var(--g-human-bg); }
.badge.g-machine    { color:var(--g-machine);    background:var(--g-machine-bg); }
.badge.g-unverified { color:var(--g-unverified); background:var(--g-unverified-bg); }
.badge.contested    { color:var(--g-unverified); background:var(--g-unverified-bg); }
.badge.stale        { color:var(--g-machine);    background:var(--g-machine-bg); }

.trust-card { border:1px solid var(--line); border-left:4px solid var(--ink3);
  background:var(--surface); border-radius:8px; padding:14px 18px; margin:18px 0 26px;
  display:flex; flex-direction:column; gap:8px; font-size:14px; }
.trust-card.g-human      { border-left-color:var(--g-human); }
.trust-card.g-machine    { border-left-color:var(--g-machine); }
.trust-card.g-unverified { border-left-color:var(--g-unverified); }
.tc-row { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; }
.tc-kv { color:var(--ink2); font-size:13px; }

/* 원천 구역 — 신뢰 카드 안, 도장 버튼 바로 위 */
/* 이력 — 누가·언제·무엇 (D6). 기본은 접혀 있고 요약 줄에 «마지막»만 보인다. */
.hist { margin:22px 0 8px; border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
.hist > summary { cursor:pointer; font-size:13.5px; color:var(--ink2); }
.hist-sec { margin:12px 0 6px; font-size:12.5px; color:var(--ink2); font-weight:600; }
.hist-list { list-style:none; margin:0; padding:0; }
.hist-list > li { padding:5px 0; border-top:1px solid var(--line); font-size:13.5px; }
.hist-subj { color:var(--ink2); font-size:12.5px; }

.src-block { border-top:1px solid var(--line); padding-top:10px; }
.src-block > summary { cursor:pointer; font-size:13.5px; color:var(--ink2); }
.src-list { list-style:none; margin:10px 0 2px; padding:0;
  counter-reset:src; display:flex; flex-direction:column; gap:8px; }
.src-list > li { counter-increment:src; border:1px solid var(--line); border-radius:7px;
  background:var(--bg); padding:9px 13px; }
.src-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.src-title { font-weight:600; font-size:14px; }
.src-title::before { content:counter(src) ". "; color:var(--ink3); font-weight:400; }
.src-meta { font-size:12.5px; color:var(--ink3); }
.src-note { font-size:13px; margin-top:5px; border-radius:6px; padding:6px 10px; }
.src-note.warn { color:var(--g-machine); background:var(--g-machine-bg); }
.src-links { margin-top:5px; font-size:12.5px; display:flex; gap:14px; }
.src-body { margin-top:6px; }
.src-body > summary { cursor:pointer; font-size:13px; color:var(--accent); }
.src-body .snapshot { margin-top:6px; max-height:60vh; overflow-y:auto;
  padding:4px 18px 14px; font-size:13.5px; line-height:1.65; }
.src-body .snapshot h1 { font-size:18px; } .src-body .snapshot h2 { font-size:16px; }

/* 같은 논점이 걸친 형제 장 (판정 화면) */
.sib-list { margin:8px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:7px; }
.sib-quote { font-size:12.5px; color:var(--ink3); margin-top:2px; }

.readable-banner { background:var(--g-machine-bg); border:1px solid var(--g-machine);
  border-radius:8px; padding:10px 16px; margin:14px 0 22px; font-size:14px; }

.banner { border:1px solid var(--line); background:var(--surface); border-radius:8px;
  padding:10px 16px; margin:14px 0; font-size:14px; }
.banner.ok  { border-color:var(--g-human); background:var(--g-human-bg); }
.banner.err { border-color:var(--g-unverified); background:var(--g-unverified-bg); }

.btn { display:inline-block; font-size:13.5px; font-weight:600; padding:6px 14px;
  border-radius:7px; border:1px solid var(--line); background:var(--surface);
  color:var(--ink); cursor:pointer; font-family:inherit; }
.btn:hover { border-color:var(--accent); text-decoration:none; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.disabled { color:var(--ink3); cursor:not-allowed; }
.inline { display:inline; }
.actions { margin-top:4px; display:flex; gap:8px; align-items:center; }

.editform textarea { width:100%; font-family:ui-monospace, "SF Mono", Menlo, monospace;
  font-size:13.5px; line-height:1.7; padding:16px; border-radius:8px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink); resize:vertical; }
.editform textarea:focus { outline:none; border-color:var(--accent); }
.editform .actions { margin-top:12px; }

/* 모순 판정 — 칸을 채우면 코드가 규격 문장을 조립한다 */
.verdict { border:1px solid var(--line); background:var(--surface); border-radius:10px;
  padding:16px 20px; margin:18px 0; }
.verdict h2 { font-size:15px; margin:0 0 10px; color:var(--ink2); }
.v-quote { background:var(--bg); padding:2px 18px; font-size:14px; margin-bottom:12px; }
.v-quote > *:first-child { margin-top:.6em; }
.v-label { display:block; font-weight:600; font-size:14px; margin:14px 0 4px; }
.v-label .req { font-weight:400; font-size:12px; color:var(--g-unverified); }
.v-input { width:100%; font-size:14.5px; line-height:1.6; padding:9px 12px; border-radius:7px;
  border:1px solid var(--line); background:var(--bg); color:var(--ink);
  font-family:inherit; resize:vertical; }
.v-input:focus { outline:none; border-color:var(--accent); }
.v-preview { border:1px dashed var(--line); border-radius:8px; padding:12px 16px;
  margin:20px 0; font-size:13px; color:var(--ink2); }
.v-preview pre { background:var(--bg); border:1px solid var(--line); border-radius:6px;
  padding:10px 12px; font-size:12.5px; overflow-x:auto; white-space:pre-wrap; }

/* ── 🔴 쓰기 중 화면 잠금 — 도장·수정 저장·판정 저장. 진행 표시 + 입력 차단 ── */
.lockwrap { position:fixed; inset:0; z-index:1000; display:flex;
  align-items:center; justify-content:center; background:rgba(6,9,8,.78);
  backdrop-filter:blur(2px); cursor:progress; }
.lockbox { background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:26px 34px; text-align:center; max-width:420px; }
.lockbox p { margin:14px 0 4px; font-size:14.5px; font-weight:600; }
.lock-sub { font-size:12.5px; color:var(--ink3); }
.spin { width:26px; height:26px; margin:0 auto; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--accent);
  animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .spin { animation-duration:2.4s; } }

.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; }
.login-card { background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:40px 44px; text-align:center; max-width:360px; }
.login-card .brand-en { display:block; margin-bottom:4px; }
.login-card h1 { font-size:24px; margin:0 0 10px; }
.login-card p { color:var(--ink2); font-size:14px; margin:0 0 20px; }
.login-card .btn { font-size:15px; padding:10px 22px; }

/* ── 대문 (랜딩) — 갈래 + 현재 상태 + 지금 할 일 ─────────────────── */
.landing-head { padding:22px 0 4px; }
.landing-head h1 { font-size:31px; margin:0; }
.landing-head .brand-en { font-size:12px; display:block; margin-bottom:6px; }
.landing-head .lede { max-width:62ch; }

.statstrip { display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 0; }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:9px;
  padding:10px 16px; min-width:96px; border-top:2px solid var(--line); }
.stat b { display:block; font-size:22px; line-height:1.2; letter-spacing:-.02em; }
.stat span { font-size:12px; color:var(--ink3); }
.stat.good { border-top-color:var(--g-human); } .stat.good b { color:var(--g-human); }
.stat.mid  { border-top-color:var(--g-machine); } .stat.mid b { color:var(--g-machine); }
.stat.warn { border-top-color:var(--g-unverified); } .stat.warn b { color:var(--g-unverified); }

.todo-box { margin:24px 0 0; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); overflow:hidden; }
.todo-box h2 { font-size:13px; color:var(--ink3); font-weight:600; margin:0;
  padding:10px 18px; border-bottom:1px solid var(--line); background:var(--surface2); }
.todo-row { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center;
  padding:12px 18px; border-top:1px solid var(--line); font-size:14px; }
.todo-row:first-of-type { border-top:0; }
.todo-row .tr-n { font-weight:700; font-size:16px; }
.todo-row .tr-why { color:var(--ink3); font-size:13px; }
.todo-row .btn { margin-left:auto; }
.todo-row.urgent .tr-n { color:var(--g-unverified); }
.todo-none { padding:14px 18px; font-size:14px; color:var(--ink2); }

.gate-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(258px, 1fr));
  gap:12px; margin:26px 0 0; }
.gate { display:flex; flex-direction:column; gap:5px; background:var(--surface);
  border:1px solid var(--line); border-radius:11px; padding:18px 20px 16px; color:var(--ink); }
a.gate:hover { text-decoration:none; border-color:var(--accent); background:var(--surface2); }
/* 아이콘: 인라인 SVG · currentColor. 색이 «어느 갈래인지»를 뜻한다 — 팔레트 밖 색은 쓰지 않는다 */
.gate-ico { line-height:0; margin-bottom:3px; }
.gate-ico svg { width:23px; height:23px; display:block; }
.gate.i-wiki  .gate-ico { color:var(--accent); }
.gate.i-guide .gate-ico { color:var(--use); }
.gate.i-specs .gate-ico { color:var(--ink2); }
.gate.i-raw   .gate-ico { color:var(--raw); }
.gate.i-chat  .gate-ico { color:var(--ink3); }
.gate-t { font-weight:700; font-size:16px; }
.gate-d { font-size:13px; color:var(--ink2); line-height:1.6; }
.gate-n { font-size:12px; color:var(--ink3); margin-top:auto; padding-top:8px; }
.gate.soon { opacity:.55; }
.gate.soon .gate-n { color:var(--g-machine); }

/* ── 최근 갱신 — 한 줄 = 한 문서. 배지는 목록 화면의 것을 그대로 쓴다 ── */
.recent { margin:30px 0 0; }
.recent h2 { display:flex; align-items:baseline; gap:10px; font-size:13px; color:var(--ink3);
  font-weight:600; margin:0 0 8px; }
.rc-sub { font-weight:400; color:var(--ink3); opacity:.8; }
.rc-more { font-size:12px; font-weight:400; margin-left:auto; }
.rc-list { list-style:none; margin:0; padding:0; border:1px solid var(--line);
  border-radius:10px; overflow:hidden; background:var(--surface); }
.rc-list li { display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:9px 16px; border-top:1px solid var(--line); font-size:14px; }
.rc-list li:first-child { border-top:0; }
.rc-list li:hover { background:var(--surface2); }
.rc-title { color:var(--ink); flex:1; min-width:0; }
.rc-at { font-family:var(--mono); font-size:11.5px; color:var(--ink3); white-space:nowrap; }
/* 좁은 화면에서는 제목이 «한 줄을 통째로» 쓴다 — 배지·시각과 나란히 두면 제목 몫이
   90px 로 줄어 네 줄로 쪼개진다(실측). 제목 먼저, 배지·시각은 아랫줄로. */
@media (max-width:560px) {
  .rc-list li { row-gap:5px; padding:10px 14px; }
  .rc-title { order:-1; flex-basis:100%; font-weight:600; }
}

/* ══════════════════════════════════════════════════════════════════
   문서형 화면 (/guide) — 여백이 구조를 만든다.
   🔴 어휘를 ingest 의 `개발현황/03-map.html` 에서 가져왔다 (관리자가 그 문서를
      기준으로 지목했다): eyebrow + h2 + <hr> 의 반복 · 문단 66ch · 절 간격 56px ·
      표는 «아래 선만» · 색이 «역할»을 뜻하고 카드마다 --edge 로 꽂는다.
   🔴 접기(details)를 쓰지 않는다 — 한 번에 흐르는 스크롤이 저 문서의 성질이다.
   ══════════════════════════════════════════════════════════════════ */
.doc { display:flex; flex-direction:column; gap:56px; padding:8px 0 60px;
  font-size:16px; line-height:1.75; }
.doc hr { border:0; border-top:1px solid var(--line); margin:0; }
.doc p { max-width:66ch; color:var(--ink2); margin:0; }
.doc strong { color:var(--ink); font-weight:650; }
.doc .m { font-family:var(--mono); font-size:.88em; }
.doc code { font-family:var(--mono); font-size:.88em; background:var(--surface2);
  padding:.1em .35em; border-radius:3px; color:var(--ink); }

.doc section { display:flex; flex-direction:column; gap:20px; }
.doc .sechead { display:flex; flex-direction:column; gap:3px; }
.eyebrow { font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink3); }
.doc h1 { font-size:36px; line-height:1.2; letter-spacing:-.015em; margin:10px 0 0;
  font-weight:680; text-wrap:balance; }
.doc h2 { font-size:23px; line-height:1.35; letter-spacing:-.01em; margin:0;
  font-weight:670; text-wrap:balance; }
.doc h3 { font-size:15.5px; margin:0; font-weight:650; }
.doc .lede { font-size:18px; line-height:1.65; color:var(--ink2); max-width:60ch;
  margin-top:14px; }
.doc header { display:flex; flex-direction:column; }

/* 색이 역할을 뜻한다 — 범례를 맨 앞에 둔다 */
.legend { display:flex; flex-wrap:wrap; gap:8px 22px; font-size:13px;
  font-family:var(--mono); color:var(--ink2); }
.legend .dot { display:inline-block; width:9px; height:9px; border-radius:50%;
  margin-right:7px; vertical-align:1px; }

/* ── 타임라인 — 왼쪽 시각 칸, 오른쪽 설명 ── */
.tl { display:flex; flex-direction:column; border-top:1px solid var(--ink3); }
.step { display:grid; grid-template-columns:100px 1fr; gap:20px;
  padding:17px 0; border-bottom:1px solid var(--line); }
@media (max-width:640px) { .step { grid-template-columns:1fr; gap:6px; } }
.clock { font-family:var(--mono); font-size:14.5px; font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--edge); line-height:1.4; }
.clock .st { display:block; font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink3); font-weight:500; margin-top:3px; }
.sbody { display:flex; flex-direction:column; gap:5px; }
.sbody .th { font-size:15px; font-weight:640; }
.sbody .td { font-size:14px; color:var(--ink2); max-width:64ch; }
.sbody .tm { font-family:var(--mono); font-size:11.5px; color:var(--ink3); margin-top:2px; }

/* ── 퍼널 (/raw) — 합이 전체가 되는 «분할». 줄을 누르면 목록이 펼쳐진다 ── */
.funnel { display:flex; flex-direction:column; gap:8px; }
.fn { border:1px solid var(--line); border-left:3px solid var(--edge); border-radius:0 8px 8px 0;
  background:var(--surface); overflow:hidden; }
.fn > summary { cursor:pointer; list-style:none; display:grid;
  grid-template-columns:1fr minmax(90px, 3fr) 62px 52px; gap:14px; align-items:center;
  padding:13px 18px; }
.fn > summary::-webkit-details-marker { display:none; }
.fn > summary:hover { background:var(--surface2); }
.fn-l { font-size:14.5px; font-weight:640; white-space:nowrap; }
.fn-l::before { content:"▶"; font-size:8px; color:var(--ink3); margin-right:8px;
  vertical-align:2px; }
.fn[open] .fn-l::before { content:"▼"; }
.fn-bar { display:block; height:9px; border-radius:99px; background:var(--bg);
  border:1px solid var(--line); overflow:hidden; }
.fn-bar i { display:block; height:100%; background:var(--edge); opacity:.75; }
.fn-n { font-family:var(--mono); font-size:16px; font-weight:600; text-align:right;
  color:var(--edge); font-variant-numeric:tabular-nums; }
.fn-p { font-family:var(--mono); font-size:11.5px; color:var(--ink3); text-align:right; }
.fn[open] > summary { border-bottom:1px solid var(--line); background:var(--surface2); }
.fn-body { padding:16px 18px 18px; display:flex; flex-direction:column; gap:14px; }
.fn-body > p { font-size:13.5px; color:var(--ink2); max-width:70ch; margin:0; }
.fn-why { color:var(--ink) !important; font-weight:600; }
.fn-why2 { border-left:2px solid var(--g-machine); padding-left:12px; }
.fn-body table { min-width:0; font-size:13px; }
.fn-body tbody th, .fn-body tbody td { padding:8px 12px 8px 0; }
@media (max-width:700px) {
  .fn > summary { grid-template-columns:1fr auto auto; }
  .fn-bar { grid-column:1 / -1; order:9; }
}

.holdgrp { border:1px solid var(--line); border-radius:7px; background:var(--bg);
  padding:11px 14px; }
.hg-h { font-size:13px; color:var(--ink2); display:flex; flex-wrap:wrap; gap:8px;
  align-items:baseline; }
.hg-tag { font-family:var(--mono); font-size:11px; font-weight:600; color:var(--g-machine);
  border:1px solid var(--g-machine); border-radius:4px; padding:1px 7px; }
.hg-n { margin-left:auto; font-family:var(--mono); font-size:11.5px; color:var(--ink3); }
.hg-list { margin:9px 0 0; padding-left:20px; columns:2; column-gap:26px; }
.hg-list li { font-size:12.5px; color:var(--ink3); line-height:1.75; break-inside:avoid; }
/* 🔴 여기서는 링크를 «링크처럼» 보이게 한다 — 목록 22개가 전부 파랗게 되면 시끄럽지만,
   눌러지는 줄 모르면 통로를 만든 뜻이 없다. 그래서 색은 본문색, 밑줄로만 알린다. */
.hg-list a { color:var(--ink2); text-decoration:underline; text-decoration-style:dotted;
  text-decoration-color:var(--ink3); text-underline-offset:3px; }
.hg-list a:hover { color:var(--accent); text-decoration-color:var(--accent); }
@media (max-width:700px) { .hg-list { columns:1; } }

/* 🔴 조인 못 한 항목 — 링크처럼 보이면 안 된다. 「눌러도 안 간다」가 한눈에 보여야 한다 */
.nolink { color:var(--ink3); text-decoration:line-through dotted var(--ink3); }
.nolink-why { font-size:11.5px; color:var(--g-unverified); white-space:nowrap; }
/* 🔴 D31 — 「몇 건이 링크되지 않았나」를 숫자로 밝힌다. 조용히 틀린 화면을 만들지 않는다 */
.joinnote { font-size:12.5px; color:var(--ink2); margin:0; border-left:2px solid var(--g-unverified);
  padding-left:12px; }
.joinnote.ok { border-left-color:var(--g-human); color:var(--ink3); }
.plainlist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.plainlist li { font-family:var(--mono); font-size:12.5px; }

/* ── 카드 — 신뢰 등급 · 담는 것 4종 · 레포 ── */
/* ── 파이프라인 그림 — 띠(누가) 안에 정거장 상자와 → 화살표. 띠 사이는 ↓ + 등급 라벨 ──
   🔴 03-map 의 「서버 지도」와 같은 어휘다: 상자 → 라벨 붙은 화살표 → 그것을 담는 판. */
.pipewrap { display:flex; flex-direction:column; }
.band { border:1px solid var(--line); border-left:3px solid var(--edge);
  border-radius:0 8px 8px 0; background:var(--surface); padding:14px 16px 16px;
  display:flex; flex-direction:column; gap:12px; }
.band-h { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; }
.band-h .bt { font-family:var(--mono); font-size:11.5px; font-weight:600; color:var(--edge);
  letter-spacing:.07em; text-transform:uppercase; }
.band-h .bs { font-size:12.5px; color:var(--ink3); }
.nodes { display:flex; align-items:stretch; gap:7px; overflow-x:auto; padding-bottom:3px; }
.node { flex:1 1 0; min-width:120px; background:var(--bg); border:1px solid var(--line);
  border-radius:6px; padding:10px 11px 11px; display:flex; flex-direction:column; gap:2px; }
.node.in { border-style:dashed; }
.node .nn { font-family:var(--mono); font-size:10.5px; color:var(--edge); font-weight:600; }
.node .nt { font-size:13.5px; font-weight:640; line-height:1.35; }
.node .nd { font-size:11.5px; color:var(--ink3); line-height:1.5; margin-top:2px; }
.node .ar { display:none; }
.arrow { align-self:center; flex:0 0 auto; color:var(--ink3); font-size:15px; }
.down { display:flex; align-items:center; gap:11px; padding:11px 0 11px 20px;
  font-family:var(--mono); font-size:11.5px; color:var(--ink2); }
.down .da { font-size:16px; color:var(--edge); }
.down strong { font-family:var(--sans); }

/* ── 데이터 지도 — 카드 3장 → ↓라벨 → 공유 판(트리 + 하위 카드) ── */
.mapd { display:flex; flex-direction:column; }
.mapd .tops, .mapd .pipes { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.home { border:1px solid var(--line); border-left:3px solid var(--edge); border-radius:7px;
  background:var(--surface); padding:14px 16px; display:flex; flex-direction:column; gap:7px; }
.home.ghost { background:transparent; border-style:dashed; border-left-style:solid; }
.home .acct { font-family:var(--mono); font-size:12.5px; color:var(--edge); font-weight:600; }
.home .role { font-size:14.5px; font-weight:640; }
.home .path { font-family:var(--mono); font-size:11.5px; color:var(--ink3); line-height:1.6;
  word-break:break-all; }
.mapd .pipe { font-family:var(--mono); font-size:11px; color:var(--ink3); text-align:center;
  line-height:1.5; padding:11px 0 9px; }
.mapd .pipe .a { display:block; font-size:16px; color:var(--edge); }
.floor { border:1px solid var(--line); border-radius:8px; background:var(--surface2);
  padding:16px; display:flex; flex-direction:column; gap:14px; }
.floor .fh { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; }
.floor .fh .t { font-family:var(--mono); font-size:13.5px; font-weight:600; color:var(--ink); }
.floor .fh .s { font-size:12.5px; color:var(--ink3); }
.tree { font-family:var(--mono); font-size:12.5px; line-height:1.95; color:var(--ink2);
  background:var(--surface); border:1px solid var(--line); border-radius:6px;
  padding:12px 16px; margin:0; overflow-x:auto; }
.tree em { font-style:normal; font-weight:600; color:var(--accent); }
.bins { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bin { background:var(--surface); border:1px solid var(--line); border-radius:6px;
  border-bottom:3px solid var(--edge); padding:12px 14px; }
.bin .bp { font-family:var(--mono); font-size:12.5px; font-weight:600; color:var(--edge); }
.bin .bd { font-size:12.5px; color:var(--ink2); line-height:1.65; margin-top:5px; }
@media (max-width:760px) {
  .mapd .tops, .mapd .pipes, .bins { grid-template-columns:1fr; }
  .mapd .pipe { padding:4px 0; }
}

.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:14px; }
/* 4장짜리는 «2×2» 로 — auto-fit 에 맡기면 3+1 이 되어 마지막 한 장이 고아처럼 남는다 */
.cards.two { grid-template-columns:repeat(auto-fit, minmax(360px, 1fr)); }
.card { background:var(--surface); border:1px solid var(--line);
  border-top:3px solid var(--edge); border-radius:7px; padding:16px 18px;
  display:flex; flex-direction:column; gap:9px; }
.card .name { font-family:var(--mono); font-size:13px; color:var(--edge); font-weight:600; }
.card .what { font-size:15px; font-weight:640; }
.card p { font-size:13.5px; line-height:1.65; }
.card .foot { font-family:var(--mono); font-size:11.5px; color:var(--ink3); margin-top:auto; }
.card dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:3px 12px;
  font-size:13px; align-items:baseline; }
.card dt { font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink3); white-space:nowrap; }
.card dd { margin:0; color:var(--ink2); line-height:1.6; }

/* ── 강조 상자 — 「이것만 기억하라」 · 「이건 위험하다」 ── */
.note { border-left:3px solid var(--edge); border-radius:0 6px 6px 0;
  background:var(--surface); padding:14px 18px;
  display:flex; flex-direction:column; gap:7px; }
.note .nt { font-size:14.5px; font-weight:650; color:var(--ink); }
.note p { font-size:14px; max-width:64ch; }
/* 한국어에 모노는 자간이 벌어져 지저분하다 — 여기만 sans 로 두고 선으로 격을 만든다 */
.creed { text-align:center; font-size:17px; font-weight:650; color:var(--accent) !important;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:18px 0; margin:0; max-width:none; letter-spacing:-.005em; }

/* ── 표 — 아래 선만. thead 는 모노 대문자 ── */
.twrap { overflow-x:auto; }
.doc table { border-collapse:collapse; width:100%; min-width:520px; font-size:14px; }
.doc thead th { font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink3); font-weight:600; text-align:left;
  padding:0 12px 9px 0; border-bottom:1px solid var(--ink3); white-space:nowrap; }
.doc tbody th { font-family:var(--mono); font-size:12.5px; font-weight:600;
  text-align:left; vertical-align:top; padding:13px 14px 13px 0; white-space:nowrap;
  color:var(--accent); border-bottom:1px solid var(--line); }
.doc tbody td { vertical-align:top; padding:13px 12px 13px 0; color:var(--ink2);
  line-height:1.7; border-bottom:1px solid var(--line); }
.doc tbody td:last-child { padding-right:0; }
.doc tbody th.bad { color:var(--g-unverified); }
.doc .sub { display:block; font-size:12.5px; color:var(--ink3); margin-top:5px; }

/* ── 목록 ── */
.doc ol.steps, .doc ul.plain { margin:0; padding-left:24px;
  display:flex; flex-direction:column; gap:11px; }
.doc ol.steps li, .doc ul.plain li { font-size:14.5px; color:var(--ink2);
  line-height:1.7; max-width:66ch; }
.doc ol.steps::marker, .doc ol.steps li::marker { color:var(--ink3); }

/* ── 🔴 2층 경계 — «아주 명확하게». 기본은 접혀 있다 (관리자 지시).
   일반 사용자는 운영 상세의 벽을 만나지 않고, 관리자만 한 번 펼친다. ── */
.tier2 { border:1px solid var(--accent); border-radius:12px; background:var(--surface);
  box-shadow:inset 0 3px 0 var(--accent); overflow:hidden; }
.tier2 > summary { cursor:pointer; list-style:none; padding:24px 26px;
  display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.tier2 > summary::-webkit-details-marker { display:none; }
.tier2 > summary:hover { background:var(--surface2); }
.tsum { flex:1 1 320px; display:flex; flex-direction:column; gap:5px; }
.tsum .tt { font-size:21px; font-weight:670; letter-spacing:-.01em; }
.tsum .tt::before { content:"▶ "; font-size:12px; color:var(--accent); vertical-align:2px; }
.tier2[open] .tsum .tt::before { content:"▼ "; }
.tsum .ts { font-size:13.5px; color:var(--ink2); line-height:1.7; max-width:70ch; }
/* 펼침/접힘 글자는 CSS 가 낸다 — 상태와 문구가 어긋날 자리를 없앤다 (JS 도 쓰지 않는다) */
.tbtn { flex:0 0 auto; font-family:var(--mono); font-size:11.5px; color:var(--accent);
  border:1px solid var(--accent); border-radius:99px; padding:6px 16px; white-space:nowrap; }
.tier2:not([open]) .tbtn::before { content:"펼치기"; }
.tier2[open] .tbtn::before { content:"접기"; }
.tier2[open] > summary { border-bottom:1px solid var(--line); background:var(--surface2); }
.tierbody { display:flex; flex-direction:column; gap:56px; padding:34px 26px 40px; }
.tierbody > .toc { margin-top:-10px; }

.toc { display:flex; flex-wrap:wrap; gap:7px 8px; }
.toc a { font-family:var(--mono); font-size:11.5px; color:var(--ink2);
  border:1px solid var(--line); border-radius:99px; padding:4px 12px; background:var(--bg); }
.toc a:hover { text-decoration:none; border-color:var(--accent); color:var(--accent); }
.doc section[id] { scroll-margin-top:70px; }

.md { background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:8px 28px 20px; overflow-wrap:break-word; }
.md h1 { font-size:24px; } .md h2 { font-size:19px; margin-top:1.6em; }
.md h3 { font-size:16px; }
.md pre { background:var(--bg); border:1px solid var(--line); border-radius:6px;
  padding:12px 14px; overflow-x:auto; font-size:13px; }
.md code { font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:.88em;
  background:var(--bg); padding:.1em .35em; border-radius:3px; }
.md pre code { background:none; padding:0; }
.md table { border-collapse:collapse; display:block; overflow-x:auto; }
.md th, .md td { border:1px solid var(--line); padding:6px 12px; font-size:14px; }
.md blockquote { border-left:3px solid var(--line); margin-left:0; padding-left:16px; color:var(--ink2); }
.md hr { border:0; border-top:1px solid var(--line); }
.md .footnotes { font-size:13.5px; color:var(--ink2); }

/* ══════════════════════════════════════════════════════════════════
   푸터 · 오류 화면 — 어느 화면에서든 「여기가 어디고 어디로 가나」를 남긴다
   ══════════════════════════════════════════════════════════════════ */
.sitefoot { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px;
  max-width:1200px; margin:0 auto; padding:18px 24px 30px;
  border-top:1px solid var(--line); font-size:12.5px; color:var(--ink3); }
.sf-brand { font-weight:600; color:var(--ink2); display:flex; align-items:baseline; gap:7px; }
.sf-links { display:flex; flex-wrap:wrap; gap:14px; }
/* 🔴 마지막 줄은 «항상 아래로» 내린다 — 브랜드·링크와 같은 줄에 끼면 문장이 조각난다 */
.sf-note { flex-basis:100%; color:var(--ink3); }

.errpage { padding:56px 0 40px; max-width:60ch; }
.err-code { font-family:var(--mono); font-size:13px; color:var(--g-unverified);
  letter-spacing:.08em; }
.errpage h1 { font-size:26px; margin:6px 0 10px; }
.err-why { color:var(--ink2); margin:0; }
.err-detail { background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:12px 14px; margin:16px 0 0; font-size:13px; color:var(--ink2);
  white-space:pre-wrap; overflow-wrap:anywhere; }
.err-acts { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }