/* 🔴 서체 확정(관리자 · 2026-09-11 · D159): **본문 = Pretendard(가변) · 제목 = Noto Sans KR**.
   전부 «자체 호스팅»(/static/fonts/ · 외부 CDN 로드 0 — 회사망 차단 가설의 처방 그대로).
   - Pretendard: npm pretendard@1.3.9 의 PretendardVariable.woff2 «한 파일»(≈2.06MB · 가변축
     wght 45~920 전 굵기 · OFL). static 서브셋 5굵기(≈3.5MB+)보다 작고 @font-face 도 하나다.
   - Noto Sans KR: 아래 woff2 10개(@fontsource 5.0.18 korean·latin) 그대로 — 제목 몫.
   🔴 순서가 규칙이다 — 같은 weight 에서 korean(범위 없음 = 전체)을 «먼저», latin(unicode-range)
   을 «나중에» 선언해야 라틴 글리프는 가벼운 latin 파일이 이긴다. */
@font-face { font-family:"Pretendard Variable"; font-style:normal; font-weight:45 920;
  font-display:swap;
  src:url("/static/fonts/PretendardVariable.woff2") format("woff2-variations"); }
/* 워드마크 서체 TT투게더(관리자 확정 2026-09-11 · D160 — D145/D148 의 Black Han Sans 를
   대체·외부 폰트 로드 0 완성). 출처: 눈누 projectnoonnu/noonfonts_2001@1.1 TTTogetherA.woff.
   🔴 라이선스(투게더그룹 · 상업 무료): 웹서버 탑재 허용 · «수정 금지 — 배포 형태 그대로»
   → 서브셋·woff2 재변환 금지, woff «원본 그대로» 탑재한다.
   🔴 굵기가 «하나»뿐 — 쓰는 자리(.brand-*)가 font-weight:normal 을 명시해 가짜 굵힘을 막는다. */
@font-face { font-family:"TTTogetherA"; font-style:normal; font-weight:normal; font-display:swap;
  src:url("/static/fonts/TTTogetherA.woff") format("woff"); }
@font-face { font-family:"Noto Sans KR"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/static/fonts/noto-sans-kr-korean-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Noto Sans KR"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/static/fonts/noto-sans-kr-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Noto Sans KR"; font-style:normal; font-weight:500; font-display:swap;
  src:url("/static/fonts/noto-sans-kr-korean-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Noto Sans KR"; font-style:normal; font-weight:500; font-display:swap;
  src:url("/static/fonts/noto-sans-kr-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Noto Sans KR"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/static/fonts/noto-sans-kr-korean-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Noto Sans KR"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/static/fonts/noto-sans-kr-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Noto Sans KR"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/static/fonts/noto-sans-kr-korean-700-normal.woff2") format("woff2"); }
@font-face { font-family:"Noto Sans KR"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/static/fonts/noto-sans-kr-latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Noto Sans KR"; font-style:normal; font-weight:800; font-display:swap;
  src:url("/static/fonts/noto-sans-kr-korean-800-normal.woff2") format("woff2"); }
@font-face { font-family:"Noto Sans KR"; font-style:normal; font-weight:800; font-display:swap;
  src:url("/static/fonts/noto-sans-kr-latin-800-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* 🔴 테마는 «3층»이다 — 라이트가 기본이고 다크는 «두 경로»로 온다 (관리자 지시 2026-08-25,
   그전 「다크 확정 · 토글 없음」(2026-08-06)을 대체한다).
     ① 저장값 없음   → `@media (prefers-color-scheme)` 가 OS·브라우저 설정을 따른다  ← 기본
     ② 사람이 토글함 → `[data-theme]` 가 ① 을 «이긴다» (뒤에 오고 특정도가 높다)
   🔴 첫 방문자에게 `data-theme` 를 써 넣지 마라 — 써 넣는 순간 ① 이 죽고 「OS 우선」이
      깨진다. 그 규칙은 base.html 인라인 스크립트가 지킨다 (없으면 «안 붙인다»).
   🔴 색 «값»은 아래 --l-* / --d-* 에 «한 번만» 적는다. 3층은 그걸 가리키기만 한다 —
      값을 두 벌 적으면 한쪽만 고치는 사고가 난다. */
:root {
  /* ── 라이트 원값 (신설) ── */
  --l-bg:#f4f7f6; --l-surface:#ffffff; --l-surface2:#e3e9e7; --l-line:#d3dcd9;
  --l-ink:#141a18; --l-ink2:#4a5553; --l-ink3:#68736f;
  --l-accent:#0f7d6e;
  --l-anchor-hl:rgba(15,125,110,.22);      /* 앵커로 «떨어진 자리»를 잠깐 칠한다 */
  --l-anchor-hl-soft:rgba(15,125,110,.12); /* 일반페이지 전용 — 더 연하게(2026-09-01 개편) */
  --l-g-human:#196b39; --l-g-machine:#7d5209; --l-g-unverified:#b32b21;
  --l-g-human-bg:rgba(25,107,57,.14); --l-g-machine-bg:rgba(125,82,9,.14); --l-g-unverified-bg:rgba(179,43,33,.14);
  --l-raw:#7d5209; --l-use:#5f45a0;
  --l-scrim:rgba(20,26,24,.45);
  --l-sh-a:rgba(31,41,38,.14); --l-sh-b:rgba(31,41,38,.16); --l-sh-c:rgba(31,41,38,.18);

  /* ── 다크 원값 — 2026-08-25 까지 «고정»이던 그 값 «그대로»다. 한 자도 안 바꿨다 ── */
  --d-bg:#101413; --d-surface:#181d1c; --d-surface2:#1f2624; --d-line:#2c3533;
  --d-ink:#e6ebe9; --d-ink2:#a6b0ae; --d-ink3:#78827f;
  --d-accent:#57b8a9;
  --d-anchor-hl:rgba(87,184,169,.24);
  --d-anchor-hl-soft:rgba(87,184,169,.14);
  --d-g-human:#68b97c; --d-g-machine:#d9a341; --d-g-unverified:#e2786e;
  --d-g-human-bg:rgba(104,185,124,.12); --d-g-machine-bg:rgba(217,163,65,.12); --d-g-unverified-bg:rgba(226,120,110,.10);
  --d-raw:#d9a341; --d-use:#a891d6;
  --d-scrim:rgba(6,9,8,.78);
  --d-sh-a:rgba(0,0,0,.35); --d-sh-b:rgba(0,0,0,.45); --d-sh-c:rgba(0,0,0,.5);

  /* 색이 «역할»을 뜻한다 (03-map 과 같은 배정) — 수집=호박 · 적재/사람=청록 · 조회=자수정.
     🔴 라이트도 «같은 색상(hue)»이고 명도만 내렸다 (호박 H37.8° · 청록 · 자수정 그대로) —
        역할이 계열로 읽혀야 하고, 등급 셋(사람/기계/미검증)이 서로 갈려야 한다. */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  /* 🔴 서체 확정(관리자 2026-09-11 · D159) — «본문» 스택은 Pretendard(가변·자체 호스팅)가
     맨 앞, «제목» 스택(--head)은 Noto Sans KR 이 맨 앞. 어디가 제목인지는 아래
     「제목 서체」 규칙 «한 곳»이 정한다 — 여기저기서 따로 지정하지 않는다.
     🔴 워드마크(--tb-display · TT투게더 — D160)는 이 배선 밖이다. */
  --sans: "Pretendard Variable", Pretendard, "Noto Sans KR", -apple-system,
    BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, sans-serif;
  --head: "Noto Sans KR", "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, sans-serif;

  /* ── 1층: 라이트가 기본 ── */
  color-scheme: light;
  --bg:var(--l-bg); --surface:var(--l-surface); --surface2:var(--l-surface2); --line:var(--l-line);
  --ink:var(--l-ink); --ink2:var(--l-ink2); --ink3:var(--l-ink3);
  --accent:var(--l-accent); --anchor-hl:var(--l-anchor-hl); --anchor-hl-soft:var(--l-anchor-hl-soft);
  --g-human:var(--l-g-human); --g-machine:var(--l-g-machine); --g-unverified:var(--l-g-unverified);
  --g-human-bg:var(--l-g-human-bg); --g-machine-bg:var(--l-g-machine-bg); --g-unverified-bg:var(--l-g-unverified-bg);
  --raw:var(--l-raw); --use:var(--l-use);
  --scrim:var(--l-scrim); --sh-a:var(--l-sh-a); --sh-b:var(--l-sh-b); --sh-c:var(--l-sh-c);
}

/* ── 2층: 저장값이 «없을 때»만 OS 를 따른다. `[data-theme=light]` 는 :not() 으로 빠진다 ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:var(--d-bg); --surface:var(--d-surface); --surface2:var(--d-surface2); --line:var(--d-line);
    --ink:var(--d-ink); --ink2:var(--d-ink2); --ink3:var(--d-ink3);
    --accent:var(--d-accent); --anchor-hl:var(--d-anchor-hl); --anchor-hl-soft:var(--d-anchor-hl-soft);
    --g-human:var(--d-g-human); --g-machine:var(--d-g-machine); --g-unverified:var(--d-g-unverified);
    --g-human-bg:var(--d-g-human-bg); --g-machine-bg:var(--d-g-machine-bg); --g-unverified-bg:var(--d-g-unverified-bg);
    --raw:var(--d-raw); --use:var(--d-use);
    --scrim:var(--d-scrim); --sh-a:var(--d-sh-a); --sh-b:var(--d-sh-b); --sh-c:var(--d-sh-c);
  }
}

/* ── 3층: 사람이 «고른» 것. OS 를 이긴다 (2층보다 뒤 · 특정도도 높다) ── */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:var(--d-bg); --surface:var(--d-surface); --surface2:var(--d-surface2); --line:var(--d-line);
  --ink:var(--d-ink); --ink2:var(--d-ink2); --ink3:var(--d-ink3);
  --accent:var(--d-accent); --anchor-hl:var(--d-anchor-hl); --anchor-hl-soft:var(--d-anchor-hl-soft);
  --g-human:var(--d-g-human); --g-machine:var(--d-g-machine); --g-unverified:var(--d-g-unverified);
  --g-human-bg:var(--d-g-human-bg); --g-machine-bg:var(--d-g-machine-bg); --g-unverified-bg:var(--d-g-unverified-bg);
  --raw:var(--d-raw); --use:var(--d-use);
  --scrim:var(--d-scrim); --sh-a:var(--d-sh-a); --sh-b:var(--d-sh-b); --sh-c:var(--d-sh-c);
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); line-height:1.75;
  font-family:var(--sans); }
/* 🔴 제목 서체 = Noto Sans KR (관리자 확정 2026-09-11 · D159 · 본문은 body 의 --sans =
   Pretendard). 「제목」의 판정(내 판단 — 회신함):
   ① 제목 요소 h1~h4 전부 — 본문 마크다운의 절 제목 포함 · 독자/관리 두 표면 공통
   ② 카드·목록의 «문서 제목» 링크(.wh-list·.wl-cards — D158 이 굵힌 그 자리)
   ③ 관리 목록 제목(.pl-title) · 속성카드 머리(.wi-h)
   🔴 워드마크(.topnav 의 --tb-display · TT투게더 — D160)는 밖이다. */
h1, h2, h3, h4, .wi-h, .wh-list li > a, .wl-cards li > a, .pl-title { font-family:var(--head); }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* 🔴 2026-09-02 헤더 개편 — 관리자 핸드오프 시트(claude.ai/code/artifact/4090e50c) «그대로»
   반영한다(D145 · 리더 경유). 한 줄 62px · 왼쪽 뒤로가기+로고 · 가운데 검색 · 오른쪽 계정+
   테마. 🔴 아래 D107·D109 의 51→95→107px 계단은 «두 줄 그리드»가 전제였다 — 그 전제가
   이번 지시로 바뀐다(폐기 표에 남긴다). «부풀었다»로 되돌리는 것이 아니라 «새 시안으로
   교체»하는 것임을 여기 적는다.
   🔴 시트의 hex 는 «전역 --accent 등을 안 건드리고» `.topnav` 스코프 토큰(--tb-*)으로만
   받는다 — `.layout.wread` 가 자기 팔레트를 스코프에 두는 것과 같은 패턴(D142). */
.topnav {
  --tb-surface:#fff; --tb-ink:#111815; --tb-muted:#68766D; --tb-line:#E2E8E2;
  --tb-green:#14663A; --tb-green-ink:#14663A; --tb-green-soft:#E9F2EB; --tb-key:#F1F4F0;
  /* 워드마크 = TT투게더(D160 · 자체 호스팅) — Black Han Sans(외부) 는 걷었다 */
  --tb-display:'TTTogetherA',sans-serif;
  display:flex; align-items:center; gap:14px; height:62px; padding:0 20px;
  background:var(--tb-surface); border-bottom:2px solid var(--tb-green);
  position:sticky; top:0; z-index:10;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .topnav {
    --tb-surface:#151B18; --tb-ink:#E9F0EA; --tb-muted:#93A399; --tb-line:#28322C;
    --tb-green:#3FB871; --tb-green-ink:#5ECE8C; --tb-green-soft:#17261D; --tb-key:#1E2621;
  }
}
:root[data-theme="dark"] .topnav {
  --tb-surface:#151B18; --tb-ink:#E9F0EA; --tb-muted:#93A399; --tb-line:#28322C;
  --tb-green:#3FB871; --tb-green-ink:#5ECE8C; --tb-green-soft:#17261D; --tb-key:#1E2621;
}
/* 뒤로가기 — 맨 왼쪽 34px. 비활성일 때도 자리를 지운다 그대로 남긴다(시트 §03 · disabled 로) */
.tb-back { flex:none; width:34px; height:34px; display:grid; place-items:center;
  border:1px solid var(--tb-line); border-radius:9px; background:transparent;
  color:var(--tb-ink); cursor:pointer; transition:background .15s,border-color .15s; }
.tb-back:hover:not(:disabled) { background:var(--tb-green-soft);
  border-color:var(--tb-green); color:var(--tb-green-ink); }
.tb-back:disabled { opacity:.34; cursor:default; color:var(--tb-muted); }
.tb-back:focus-visible { outline:2px solid var(--tb-green); outline-offset:2px; }

.brand { color:var(--tb-ink); white-space:nowrap; display:flex; align-items:center; gap:10px;
  flex:none; }
.brand:hover { text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:var(--tb-green); color:#fff; font-family:var(--tb-display); font-size:13px;
  font-weight:normal; flex:none; }   /* 🔴 TT투게더는 한 굵기 — bold 상속을 끊는다(D160) */
.brand-ko { font-family:var(--tb-display); font-size:22px; line-height:1; color:var(--tb-green-ink);
  font-weight:normal; }
/* 🔴 `.brand-en` 은 «전역» 클래스다 — 상단바 말고도 푸터(`.sf-brand`)·로그인 카드·대문
   랜딩 머리(`.landing-head`)가 같은 이름을 쓴다(각자 `display:block` 등을 더 얹는 식).
   상단바 전용 크기·색은 `.topnav` 를 붙여 «그 셋을 안 건드리고» 좁힌다. */
.brand-en { font-size:11px; color:var(--ink3); letter-spacing:.06em; text-transform:uppercase; }
@media (max-width:700px) { .brand-en { display:none; } }
.topnav .brand-en { font-size:10px; font-weight:700; letter-spacing:.15em;
  color:var(--tb-muted); padding-top:3px; white-space:nowrap; }
@media (max-width:1040px) { .topnav .brand-en { display:none; } }
.navlink { font-size:14px; white-space:nowrap; }
/* 🔴 `.nav-right` 자체가 flex 여야 한다 — 안 그러면 안의 `.acct`(자기도 flex 라 block 이 된다)
   뒤로 구분선·테마 토글이 «다음 줄»로 떨어진다(flex 항목의 자동 blockify 때문 · 2026-09-02
   헤더 개편에서 실측으로 잡음). */
.nav-right { display:flex; align-items:center; gap:14px; flex:none; }
.navnote { font-size:12px; color:var(--tb-muted); white-space:nowrap; }
/* 계정 — 아바타·이메일·로그아웃 한 덩어리(시트 §02). 좁아지면 이메일부터, 그다음 로그아웃이 접힌다 */
.acct { display:flex; align-items:center; gap:8px; flex:none; min-width:0; white-space:nowrap; }
.acct-av { width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--tb-green-soft); border:1px solid var(--tb-line); font-size:13px; flex:none; }
.acct-mail { font-size:12.5px; color:var(--tb-muted); max-width:190px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:1040px) { .acct-mail { display:none; } }
.acct-out { font-size:12.5px; font-weight:700; color:var(--tb-green-ink); text-decoration:none; }
.acct-out:hover { text-decoration:underline; }
.nav-div { width:1px; height:20px; background:var(--tb-line); flex:none; }
@media (max-width:820px) { .acct-out, .nav-div { display:none; } .searchform { max-width:none; } }
/* 해/달 2단 토글 — 두 글리프를 «같이» 보이고 지금 쓰는 쪽만 밝힌다(어느 쪽이 켜졌는지가
   버튼 안에서 읽혀야 한다). 🔴 `hidden` 이 기본이고 app.js 가 켠다 — JS 없으면 안 보인다. */
.themetoggle { display:inline-flex; align-items:center; gap:2px;
  padding:2px 6px; background:transparent; border:1px solid var(--tb-line); border-radius:999px;
  cursor:pointer; line-height:1; font-size:12px; color:var(--tb-muted); }
.themetoggle[hidden] { display:none; }
.themetoggle:hover { border-color:var(--tb-green); }
.themetoggle span { padding:2px 4px; border-radius:999px; }
.themetoggle .ti-sun  { color:var(--tb-ink); background:var(--tb-green-soft); }
.themetoggle .ti-moon { color:var(--tb-muted); background:transparent; }
.themetoggle.on .ti-sun  { color:var(--tb-muted); background:transparent; }
.themetoggle.on .ti-moon { color:var(--tb-ink); background:var(--tb-green-soft); }
/* 검색 — 헤더 안 최대 520px 초록 테두리 박스(시트 §02 · 브랜드 색을 쓰는 유일한 입력) */
.searchform { position:relative; display:flex; align-items:center; flex:1 1 auto;
  max-width:520px; min-width:0; margin:0 auto; gap:9px; height:38px; padding:0 10px 0 12px;
  border:1.5px solid var(--tb-green); border-radius:9px; background:var(--tb-surface); }
.searchform:focus-within { box-shadow:0 0 0 3px rgba(20,102,58,.22); }
.search-ic { flex:none; color:var(--tb-green-ink); }
.searchform input { flex:1; min-width:0; font-size:13.5px; padding:0;
  border:0; border-radius:0; background:transparent; color:var(--tb-ink);
  outline:none; box-shadow:none; }
.searchform input::placeholder { color:var(--tb-muted); }
/* 단축키를 «화면에 표기»한다 — 있는 줄 모르면 없는 것과 같다 */
.kbd { flex:none; font:600 11px/1 ui-monospace, "SF Mono", Menlo, monospace; color:var(--tb-muted);
  border:1px solid var(--tb-line); border-radius:5px; padding:3px 7px;
  background:var(--tb-key); cursor:pointer; user-select:none; white-space:nowrap; }
.searchform input:focus + .kbd { opacity:0; pointer-events:none; }
/* ⌘K 후보 — 입력창 «바로 아래». 🔴 `hidden` 이 기본이고 app.js 가 채운다 (D83) */
.acbox { position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:40;
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:4px 0; box-shadow:0 10px 30px var(--sh-c); max-height:60vh; overflow-y:auto; }
.acbox[hidden] { display:none; }
.acrow { display:flex; align-items:baseline; gap:8px; padding:6px 12px; font-size:13.5px;
  color:var(--ink); }
.acrow:hover, .acrow.on { background:var(--surface2); text-decoration:none; color:var(--accent); }
.acrow .ac-t { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 🔴 폐기 장은 후보에 «남되» 눈에 덜 띈다 — 빼지 않는 것이 규칙이다 (D92) */
.acrow .ac-k.dead { color:var(--ink3); }
.type-badge.dead { color:var(--ink3); background:var(--surface2); border-color:var(--line); }
/* 제목엔 없고 «다른 이름»에 걸린 것 — 왜 떴는지가 보여야 한다 */
.acrow .ac-a { font-size:11.5px; color:var(--ink3); white-space:nowrap; }
/* 제목이 «같은» 장이 둘일 때(사방넷 = 용어·개체) 이것이 유일한 구분자다 */
.acrow .ac-k { font-size:11px; color:var(--ink3); white-space:nowrap; opacity:.85; }

/* 좁은 폰 폭 — 헤더는 여전히 «한 줄»이다(시트 §05 그대로). 검색은 감추고 로고만 남긴다.
   ⚠️ 폰 화면 확인은 헤드리스 크롬 `--window-size` 로 하면 «틀린다» — 맥에서 창이
   500px 아래로 안 줄어들어 500px 렌더를 잘라 보여준다. iframe 을 390px 로 잡고 볼 것. */
@media (max-width:600px) {
  .topnav { gap:10px; padding:0 12px; }
  .searchform { display:none; }
  .brand-ko { font-size:19px; }
}

.layout { display:flex; align-items:flex-start; max-width:1200px; margin:0 auto; }
/* 사이드바 없는 화면(대문·개요·규격·적재현황) — 본문을 가운데로 넓게 */
.layout.wide .page { max-width:980px; margin:0 auto; }

/* ── 우측 목차 (2026-09-01 일반페이지 개편 · TOC 좌→우 이동) — `.layout` 의 «세 번째 flex 항목».
   `.page` 가 `flex:1 min-width:0` 라 이 열의 폭만큼 «저절로» 좁아진다(추가 계산 없음).
   🔵 폭이 좁아지면(≤1180px) 통째로 감춘다 — 사이드바처럼 ☰ 로 다시 불러오는 길은 두지
   않는다(문서 안 헤딩으로 스크롤은 여전히 되므로 «못 가는 곳»이 생기지 않는다 · D126 의 「모바일
   완벽 지원은 범위 밖」과 같은 결). */
.toc-side { width:230px; flex-shrink:0; position:sticky; top:var(--navh, 62px);
  max-height:calc(100vh - var(--navh, 62px)); overflow-y:auto; padding:14px 8px 40px 14px;
  font-size:13px; }  /* 🔴 사이드바(.wside)와 «같은 값» — 관리자 지적 「글자 크기부터 다르다」 */
@media (max-width:1180px) { .toc-side { display:none; } }
/* 지금 읽는 절 — 스크롤스파이(app.js 아님 · w.html 인라인, 이 화면만의 행동)가 단다.
   🔴 2026-09-01 2차 — «배경 블록»을 없앴다(관리자 「깜박거리고 높이도 안 맞는다」 · 레퍼런스
   가이드 「no decorative accent · highlight 대신 표만」). 굵기 + accent 글자색 + «왼쪽 세로선»
   (box-shadow, 텍스트 상자 높이를 안 물어 세로가 어긋날 자리가 구조적으로 없다)만 남긴다. */
.ws-toc a.active { color:var(--accent); font-weight:650; border-radius:0 5px 5px 0;
  box-shadow:inset 2px 0 0 var(--accent); }
/* ── 폴더 트리 — 파일 탐색기처럼. 꺾쇠 · 폴더 아이콘 · 들여쓰기(--d) · 현재 문서 강조 ── */
/* 🔴 사이드바도 같은 값을 쓴다 — 여기도 53px 로 박혀 있어 같은 틈이 있었다 (app.js 가 잰다) */
.sidebar { width:262px; flex-shrink:0; position:sticky; top:var(--navh, 62px);
  max-height:calc(100vh - var(--navh, 62px)); 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; }
/* 🔴🔴 «답»은 작은 회색 글씨로 하지 않는다 (2026-08-28 밤 · 관리자 「〔저장〕을 눌렀는데
   역시 락도 안 걸리고 **반응이 없다** — 작업 안 된 것 같다」 · 리더 경유).
   📏 그때 그 줄은 **12.5px · `rgb(74,85,83)` 회색**이었다(헤드리스 실측 1440px). 저장은 «됐는데»
      관리자는 안 된 줄 알고 그 창을 떠났다 — 🔴 그러면 «같은 글을 다시 친다».
   🔴 **`.err` 는 «아무 규칙도 없었다»** — 즉 「원격에 올리지 못했습니다」 같은 «실패»도 같은
      회색으로 속삭이고 있었다. 성공보다 이쪽이 더 위험해서 같이 세웠다.
   🔵 새 낱말·새 자리를 만들지 않았다 — 이미 있는 줄의 «크기와 색»만 올린다(관리자 피드백 ④를
      「자리와 크기만」으로 처리한 그 방식과 같다). */
.fb-note.ok, .fb-note.err { font-size:13.5px; font-weight:600; padding:12px 16px; }
.fb-note.ok { color:var(--accent); background:var(--surface);
  border-top:2px solid var(--accent); }
.fb-note.err { color:var(--g-unverified); background:var(--g-unverified-bg);
  border-top:2px solid var(--g-unverified); }
/* 「이 숫자를 «무엇으로» 셌나」 — 규칙 판이 바뀌면 장수가 바뀐다 (D46 과 같은 이유) */
.fb-src { display:block; margin-top:4px; color:var(--ink3); }

/* ── 목록 툴바 — 왼쪽은 몇 장, 오른쪽이 옵션·정렬 ── */
.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 라 그 아래에 얹혀야 겹치지 않는다.
      z-index 는 상단바(10)보다 «낮게» 둔다 — 스크롤되어 올라온 이 바가 상단바를 덮으면 안 된다. */
/* 🔴 `top` 을 «숫자로 박지 않는다». app.js 가 상단바를 재서 `--navh` 에 심는다 — 아래 값은
      JS 가 안 돌 때의 대비다. 🔴 2026-09-02 헤더 개편(D145) — 폭에 따라 51↔83 으로 갈리던
      «두 줄» 전제가 사라졌다(한 줄 62px, 모든 폭에서 같다) — 대비값도 폭 구분 없이 62px.
   🔴 1px 겹친다 — 서브픽셀 반올림으로 머리카락 같은 틈이 남는 것을 막는다. 상단바가
      z-index 10 이라 그 1px 은 상단바가 덮는다. */
.pagenav { position:sticky; top:calc(var(--navh, 62px) - 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; }

/* ── 압축 줄 — 신뢰 카드가 화면 위로 사라지면 나타난다 (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 var(--sh-a); }
.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); }
/* 도장 «보류» — 손대지 말라는 신호라 미검증과 같은 색을 쓴다 (색 = 역할 · D25) */
.badge.hold         { color:var(--g-unverified); background:var(--g-unverified-bg); }
/* 「도장 뒤 바뀜」 — 🔴 「낡음」(노랑)과 «다른 색»이어야 한다. 나란히 서는 자리가 있고
   (목록 배지·필터 칩) 같은 색이면 두 상태가 한 덩어리로 읽힌다. 손이 필요한 쪽이라 경고색. */
.badge.unsealed     { color:var(--g-unverified); background:var(--g-unverified-bg); }
/* 🌐 웹 출처 — 등급도 경고도 아니다(회사 자료 vs 바깥 자료 표시일 뿐) · 중립 회색 */
.badge.web          { color:var(--ink2);         background:var(--surface2); }

/* ── 🆕 「이 문서의 코멘트」 — 🔴 이 화면에 사람 코멘트가 «한 건도» 안 보였다(2026-08-28 · ⓓ).
   🔴 **자리가 신뢰 카드 «위»다** — 이 화면의 일은 도장이고 「미확인 코멘트」는 「이 문서가
   틀렸다」는 말이라, 도장을 찍기 «전»에 보여야 한다.
   🟢 **새 모양·새 색을 만들지 않았다** — `.trust-card` 의 옷(왼쪽 굵은 띠 + 상자)을 그대로 쓰고
   색만 「손이 필요함」 축(`--g-unverified`)으로 간다. 🔵 사람이 할 일이 «없을» 때는 조용한 회색. */
.cmt-here { border:1px solid var(--line); border-left:4px solid var(--ink3);
  background:var(--surface); border-radius:8px; padding:12px 18px; margin:18px 0 0;
  display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; font-size:13.5px; }
.cmt-here.urgent { border-left-color:var(--g-unverified); }
.cmt-here .ch-n { font-weight:700; font-size:15px; }
.cmt-here.urgent .ch-n { color:var(--g-unverified); }
.cmt-here .ch-split { display:flex; flex-wrap:wrap; gap:6px; }
.cmt-here .ch-raised, .cmt-here .ch-lost, .cmt-here .ch-wait {
  font-size:12px; border-radius:999px; padding:1px 8px; border:1px solid var(--line);
  font-weight:600; white-space:nowrap; }
.cmt-here .ch-raised, .cmt-here .ch-lost { color:var(--g-unverified);
  background:var(--g-unverified-bg); border-color:var(--g-unverified); }
/* 🔴 `--ink3` → `--ink2` 로 갈았다 — 📏 이 칩만 **밝은 4.00 · 어두운 3.89**(문턱 4.5)였다.
   사유: `--ink3` 가 «`--surface2` 위»에 얹혀서다. 🔵 리더가 「알고 받은」 4.30 은 `--ink3` ↔
   «평범한 배경»의 값이고, 여기는 회색 바탕이 그보다 «더» 깎았다 — 즉 **이건 토큰 문제가 아니라
   «내가 만든 짝»이다**(그래서 내가 고친다). 🟢 조용한 느낌은 «바탕과 굵기»가 여전히 낸다 —
   빨간 칩들과 «색으로» 갈리는 것도 그대로다. */
.cmt-here .ch-wait { color:var(--ink2); background:var(--surface2); font-weight:400; }
.cmt-here .ch-why { color:var(--ink2); font-size:13px; flex:1 1 240px; }
.cmt-here .btn { margin-left:auto; }

.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; }
/* 「도장 뒤 바뀜」 문단 — 등급 줄 바로 «밑»에 붙어 그 줄을 정정한다. 배지 한 개로는
   「사람 검토」라는 초록 문장을 못 이긴다 (그래서 칸을 따로 준다). */
.tc-warn { border-left:3px solid var(--g-unverified); background:var(--g-unverified-bg);
  border-radius:0 6px 6px 0; padding:8px 12px; font-size:13.5px; line-height:1.6; }

/* 원천 구역 — 신뢰 카드 안, 도장 버튼 바로 위 */
/* 이력 — 누가·언제·무엇 (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; }
/* .md 가 아닌 사본(.csv) — 평문 그대로. 표가 길어 가로는 제 칸 안에서만 흐른다 */
.snapshot-plain { font-family:var(--mono); font-size:12.5px; line-height:1.6;
  background:var(--surface2); border:1px solid var(--line); border-radius:8px;
  padding:14px 16px; overflow-x:auto; white-space:pre; }

.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); }
/* 🔴 배너 «안»의 도장 버튼 — 판정 직후 그 자리에서 이어 찍는 자리다. 문장에 붙여 두면
   스쳐 눌린다: 한 줄 띄워 «따로 누르는 것»으로 보이게 한다 (도장은 되돌릴 수 없다). */
.banner-act { margin:8px 0 2px; }

.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-count { font-size:12px; color:var(--ink2); margin:0 0 2px; letter-spacing:.02em; }
.verdict h2.v-topic { font-size:19px; line-height:1.45; margin:0 0 12px; color:var(--ink); }
.v-detail > summary { cursor:pointer; font-size:13px; color:var(--ink2); margin-bottom:6px; }
.v-quote { background:var(--bg); padding:2px 18px; font-size:14px; margin-bottom:12px; }
.v-quote > *:first-child { margin-top:.6em; }
/* 1차 자동 검토가 남긴 것 — 🔴 이 화면의 «주 산출물»이라 발췌·원천보다 위에 크게 앉는다.
   실 위키에서 자동으로 닫히는 건은 드물고(02-analysis §5 ⑥), 사람이 정작 필요로 하는 것은
   「왜 중요한가 · 무엇을 확인하면 확정되나」다. 그래서 «사람 몫» 카드가 강조색을 갖는다. */
.an { border-left:3px solid var(--accent); background:var(--surface2);
  border-radius:0 8px 8px 0; padding:10px 14px; margin:0 0 14px; }
.an.an-auto { border-left-color:var(--g-machine); }
.an-head { margin:0 0 6px; font-size:13.5px; line-height:1.5; }
.an-head .an-meta { color:var(--ink3); font-size:12px; font-weight:400; margin-left:8px;
  white-space:nowrap; }
.an-head .an-tag { color:var(--g-machine); font-size:12px; font-weight:600; margin-left:6px; }
.an-body { margin:0 0 6px; font-size:14px; line-height:1.7; color:var(--ink); }
.an-body:last-child { margin-bottom:0; }
.an-body.an-why { color:var(--ink2); font-size:13.5px; }
.v-presets button.chip.machine { border-color:var(--g-machine); color:var(--g-machine); }

/* 목록의 분석 줄 — 논점 «이름»까지다. 사유 전문은 판정 화면의 것 */
.badge.an-done { color:var(--g-machine); background:var(--g-machine-bg); }
.badge.an-none { color:var(--ink3); background:var(--surface2); }
.pl-an { font-size:12.5px; color:var(--ink2); margin-top:3px; }
.pl-an .an-topic { display:inline-block; background:var(--surface2); border-radius:4px;
  padding:1px 7px; margin-right:5px; color:var(--ink); }
/* 🔴 기계 판정은 «잠정»이라 도장 줄과 갈라 앉힌다 — 같은 칸에 두면 「검토됐다」로 읽힌다 */
.tc-warn.tc-machine { border-left-color:var(--g-machine); background:var(--g-machine-bg); }

/* 원천 발췌 — 판정에 필요한 줄만. 🔴 «보조»라 원천 블록을 대신하지 않는다 */
.mk-wrap { margin:0 0 14px; }
.mk-head { font-size:13px; color:var(--ink); margin:0 0 6px; font-weight:600; }
.mk-head .mk-note { font-weight:400; color:var(--ink2); }
.mk { border-left:2px solid var(--line); padding:0 0 0 10px; margin:0 0 8px; }
.mk-src { font-size:12px; color:var(--ink2); margin-bottom:2px; }
.mk-src .mk-no { opacity:.75; }
.mk-src a { margin-left:6px; }
.mk-body { margin:0; padding:6px 10px; background:var(--bg); border-radius:6px;
  font-size:12.5px; line-height:1.6; white-space:pre-wrap; word-break:break-word;
  font-family:inherit; color:var(--ink2); max-height:11em; overflow-y:auto; }
.mk-body mark { background:var(--accent); color:var(--bg); border-radius:3px;
  padding:0 2px; font-weight:700; }
.mk-cut { font-size:12px; color:var(--ink2); margin:0; }

/* 결론 프리셋 — 🔴 칸을 채우는 «보조»다. 저장 버튼처럼 보이면 안 된다(강조색 없음) */
.v-presets { margin:0 0 8px; display:flex; flex-wrap:wrap; gap:6px; }
.v-presets button.chip { cursor:pointer; font-family:inherit; margin-right:0; }
.v-presets button.chip:hover { filter:brightness(1.12); border-color:var(--ink2); }
.v-presets button.chip.range { border-style:dashed; }
.v-hint { font-size:12.5px; color:var(--ink2); margin:0 0 10px; line-height:1.55; }
.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:var(--scrim);
  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; }
/* 🔴 합을 «가른» 수 — 문면(「확인 대기」)이 자기 수와 안 맞던 자리다(2026-08-28 실측: 6 =
   미확인 5 + 문단 못 찾음 1). 🔵 새 색값을 만들지 않고 이미 있는 축을 쓴다: 「손이 필요함」의
   그 경고색. 🔴 큰 수(`.tr-n`)보다 «작게» 둔다 — 합이 여전히 그 줄의 주인이다. */
.todo-row .tr-split { font-size:12.5px; color:var(--g-unverified); white-space:nowrap;
  border:1px solid var(--g-unverified); background:var(--g-unverified-bg);
  border-radius:999px; padding:1px 8px; }
.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, .wbody 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, .wbody 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, .wbody 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, .wbody 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); }

.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; }

/* ══════════════════════════════════════════════════════════════════
   독자 표면 (`/w`) — 🔵 0단계 실험. 승인되면 `/page` 가 이 화면이 된다.
   🔴 `.md`(위 731~)를 «건드리지 않는다» — 정제사본·규격 문서·판정 발췌 다섯 곳이 그걸 쓴다.
   🔴 값은 `.doc`(498~)에서 가져왔다(16px/1.75 · 66ch · h1 36 · h2 23 · 표는 아래 선만).
      🔴 다만 «컨테이너 규칙»은 못 쓴다 — `.doc` 은 `display:flex; gap:56px` 이라 마크다운이
      뱉는 문단 «전부» 사이에 56px 이 들어간다. 그래서 여기는 margin 리듬으로 따로 쓴다.
      🔵 표만 선택자 목록을 «늘려» 공유한다(아래 `.doc table, .wbody table`) — 값이 같아서다.
   ══════════════════════════════════════════════════════════════════ */
/* 🔴 독자 표면 전용 팔레트(2026-09-01 2차 · 관리자 1차 시제품 평가 반영 — 「가이드 색표를
   추측하지 말고 그대로 넣어라」). `.layout.wread` «안에서만» :root 별칭을 덮는다 — 관리자
   화면(`.md`)은 이 선택자에 안 걸려 위 :root 값(옛 팔레트) 그대로다(개편 범위 밖 유지).
   3층 테마 규칙과 같은 얼개(라이트 기본 → OS 다크 → 사람이 고른 다크가 이긴다)를 그대로
   따르되 선택자 끝에 `.layout.wread` 만 붙인다. 🔵 훈님레퍼런스가 안 준 값(`--ink3` 등
   세 번째 회색조·카드 전용 배경)은 «지어내지 않고» 기존 :root 값을 그대로 물려받는다. */
/* 🔴 2026-09-02 3차 — 가이드 대조표에서 빠진 토큰 여덟 개를 채운다(관리자 「최종 체크」 지시 ·
   리더 승인 「가이드 값 그대로 · 고르지 마라」). 🔴 **`--surface` 를 «흰색」(가이드 `--bg-raise`)
   으로 되돌린다** — 1차 때 `--bg` 와 같은 값을 잘못 넣어 표·카드·`.cmt`·`.cadd` 가 전부 배경에
   «묻혀» 있었다(관리자 「흰색으로 감싸진다거나 하는 게 없다」의 진짜 원인). `--surface` 는
   이미 코드 곳곳(`.cmt`·`.cadd`·`.winfo` 등)에서 «카드 배경»으로 쓰고 있던 토큰이라 이름을
   새로 만들지 않고 값만 고친다. 🔵 `--ink3`(가이드 `--text-3`)는 1차 때 "가이드가 안 준
   값"으로 판단해 옛 팔레트를 그대로 물렸는데 — 가이드에 있었다. 여기서 정정한다. */
.layout.wread {
  --bg:#fcfcfb; --surface:#ffffff; --surface2:#f6f7f6; --hover:#eff2ef;
  --line:#e7ebe8; --line-strong:#d3dad5;
  --ink:#232b28; --ink2:#67736d; --ink3:#94a09a;
  --accent:#157a4a; --accent-strong:#0e5e38; --accent-bg:#ebf4ee;
  --anchor-hl:rgba(21,122,74,.22); --anchor-hl-soft:rgba(21,122,74,.12);
  --code-bg:#f0f3f1; --code-text:#3e4b44;
  /* 🔴 모서리 두 값 — 밝기·색과 달리 라이트/다크가 같은 값이라 여기 한 번만 둔다.
     새로 만드는 것(표·카드)부터 이 토큰을 쓴다 — 기존 자리는 값을 흔들면 모양이
     크게 바뀌는 곳(내비 링크·아이콘 버튼 등 «작은 상자»)이 있어 이번엔 안 당겼다. */
  --radius:8px; --radius-lg:12px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .layout.wread {
    --bg:#15181a; --surface:#1c2123; --surface2:#191d1e; --hover:#232928;
    --line:#272d2b; --line-strong:#343c39;
    --ink:#e5eae7; --ink2:#9aa6a0; --ink3:#6c7872;
    --accent:#47c584; --accent-strong:#62d398; --accent-bg:#1b2a22;
    --anchor-hl:rgba(71,197,132,.24); --anchor-hl-soft:rgba(71,197,132,.14);
    --code-bg:#212725; --code-text:#b8c3bd;
  }
}
:root[data-theme="dark"] .layout.wread {
  --bg:#15181a; --surface:#1c2123; --surface2:#191d1e; --hover:#232928;
  --line:#272d2b; --line-strong:#343c39;
  --ink:#e5eae7; --ink2:#9aa6a0; --ink3:#6c7872;
  --accent:#47c584; --accent-strong:#62d398; --accent-bg:#1b2a22;
  --anchor-hl:rgba(71,197,132,.24); --anchor-hl-soft:rgba(71,197,132,.14);
  --code-bg:#212725; --code-text:#b8c3bd;
}
/* 사이드바·목차 패널은 본문보다 한 톤 어둡다(레퍼런스의 두 배경값 — 페이지/패널) —
   `.wside`·`.toc-side` 는 관리자 트리(`.sidebar` 공용 규칙)와 겹치지 않는 «독자 전용» 클래스다. */
.wside, .toc-side { background:var(--surface2); }

.layout.wread .page { max-width:720px; padding-top:22px; }

/* ── ① 빵부스러기 ── */
.wcrumb { display:flex; flex-wrap:wrap; align-items:baseline; gap:7px;
  font-size:12.5px; color:var(--ink3); }
.wcrumb a { color:var(--ink3); }
.wcrumb a:hover { color:var(--accent); }
.wcrumb .here { color:var(--ink2); }
.wcrumb .sep { color:var(--line); }
.wcrumb .wmod { margin-left:auto; font-family:var(--mono); font-size:11.5px; }

/* ── ② 제목 · ③ 리드 ── */
/* 🔴 2026-09-01 2차 — 타이포 스케일을 훈님레퍼런스 값으로 교체(관리자 「가이드대로 안 됐다」).
   추측하지 않는다 — H1 27/700/-.015em · H2 20/700/margin-top 52px · H3 16.5/700 ·
   본문 15.5/400/1.75(아래 `.wbody`)를 «그 값 그대로» 넣는다. */
.wtitle { font-size:27px; line-height:1.3; letter-spacing:-.015em; font-weight:700;
  margin:14px 0 0; text-wrap:balance; }
/* 🔴 관리자 지적(2026-09-02) — 제목 밑 요약 글자가 크다. 본문(`.wbody`)과 같은 15.5px 로
   맞춘다 — 색·굵기·줄간격·여백은 그대로 둔다(크기만 지적했다). */
.wlede { font-size:15.5px; line-height:1.65; color:var(--ink2); max-width:62ch;
  margin:12px 0 0; }

/* ── ④ 경고 띠 — 색이 있어야 «본문 위»에 남긴 값을 한다 ── */
.wnote { margin-top:16px; padding:11px 14px; border-radius:var(--radius, 8px); font-size:14px;
  line-height:1.6; color:var(--ink2); border-left:3px solid var(--line);
  background:var(--surface); }
.wnote b { color:var(--ink); font-weight:650; margin-right:4px; }
.wnote a { margin-left:6px; white-space:nowrap; }
.wnote.bad  { border-left-color:var(--g-unverified); background:var(--g-unverified-bg); }
.wnote.warn { border-left-color:var(--g-machine);    background:var(--g-machine-bg); }

/* ── ④b 신뢰 «줄» — 카드가 아니다. 높이 한 줄이 전부다 ── */
/* 🔴 옛 「한 줄 신뢰 띠」(.wmeta·.wgrade)는 관리자 개편 ③(2026-09-11)으로 w.html 에서
   걷히면서 고아가 돼 같이 지웠다 — 등급 표시는 관리 표면(.badge.g-*)에 그대로 있다. */

/* ── ⑥ 본문 — 🔴 배경·테두리·radius 를 «주지 않는다». 패널이 아니라 페이지다 ── */
.wbody { margin-top:30px; font-size:15.5px; line-height:1.75; color:var(--ink2);
  overflow-wrap:break-word; counter-reset:wh2; }
.wbody > *:first-child { margin-top:0; }
.wbody p, .wbody li { max-width:70ch; }
.wbody p { margin:1.15em 0; }
.wbody strong { color:var(--ink); font-weight:650; }
/* 🔴 P22(2026-09-02) — 용어 문서 「정의 문단」을 크게. «구조»(첫 블록이 문단인가)만 본다 —
   길이·문장부호를 읽지 않는다. 첫 블록이 문단이 아니면(예: 경고 블록쿼트로 시작) 이 선택자가
   아예 안 걸려 저절로 빠진다. 글씨 크기만 — 색·자간은 안 건드린다(관리자 지시). */
.wbody-term > .blk:first-child p { font-size:18px; }
/* 🔴 관리자 버그 제보(2026-09-02) — 메타데이터(정보상자)를 펼치면 「요지」를 «뚫고» 내려앉는다.
   원인: 정보상자(`.winfo`)는 `float:right` 인데, h2(테두리·구분선)는 «떠 있지 않은» 보통 블록
   이라 그 테두리는 폭 전체로 그려진다 — 인라인 글자만 float 을 피해 좁아질 뿐, 테두리·배경은
   float 을 «모른다»(CSS 기본 그리기 순서상 보통 블록의 테두리가 float «아래»에 깔린다). 정보상자가
   커져(펼쳐져) 그 구간에 h2 가 걸리면 구분선이 상자 밑으로 사라져 보인다. 🔴 최소로 고친다 —
   레이아웃을 새로 안 짜고 `clear:right` 로 «상자 밑에 걸리면 그 아래로 내려서게»만 한다(상자가
   없거나 안 걸치면 평소와 똑같다). */
.wbody h2 { font-size:20px; line-height:1.35; letter-spacing:-.012em; font-weight:700;
  color:var(--ink); margin:52px 0 .75em; padding-top:22px; clear:right;
  border-top:1px solid var(--line); counter-reset:wh3; }
.wbody h3 { font-size:16.5px; font-weight:700; color:var(--ink); margin:1.9em 0 .5em; }
.wbody h4 { font-size:15.5px; font-weight:650; color:var(--ink); margin:1.6em 0 .4em; }
/* 나무위키식 절 번호 — 목차의 번호와 «같은 규칙»이라 눈으로 맞춰 읽힌다 */
.wbody h2::before { counter-increment:wh2; content:counter(wh2) ". "; color:var(--ink3); }
.wbody h3::before { counter-increment:wh3;
  content:counter(wh2) "." counter(wh3) ". "; color:var(--ink3); font-weight:600; }
/* 🔴 «상수를 베끼지 않는다» — 여백은 «실측된 머리띠 높이»에서 나온다.
   경위: 8/27 아침에 각주 줄이 머리띠 밑으로 들어가길래 절 제목의 `76px` 을 그대로
   베껴 왔다. 그런데 그 76 자체가 「51(머리띠) + 25(숨돌릴 틈)」를 «굳힌» 값이라
   머리띠가 커지는 폭에서 같이 깨졌다 — 절 제목도 «원래부터» 같은 병이었다.
   실측(`terms/cleverse` · 폭 12개 · `.topnav` 높이):
     폭 ≥720 → 51px      폭 ≤700 → 83px  (`.topnav` 이 `flex-wrap` 으로 줄바꿈한다)
     그래서 `76px` 은 좁은 폭에서 «7px 모자랐다» — 각주 줄도 절 제목도 그만큼 잘렸다.
   🔵 `--navh` 는 app.js 가 `getBoundingClientRect()` 로 재서 심고 `ResizeObserver`
      로 따라간다(app.js §설정) — 그래서 계산식은 «어느 폭에서도» 맞는다.
   🔴 대비값(JS 가 아직 안 돈 찰나)만 폭별로 둔다 — `.pagenav` 가 쓰는 그 방식 그대로. */
/* 🔴 «앵커로 떨어질 수 있는 자리»는 여기 «한 곳»에서만 여백을 받는다 — 화면마다 상수를
   따로 두면 오늘 우리가 위키에서 잡은 병(정정이 한 군데만 반영됨)을 코드에 심는다.
   합류시킨 것: 독자(`.wbody`) · 관리(`.md` — 각주가 여기도 산다) · 문서(`.doc section[id]`).
   🔴 `.doc section[id]` 은 원래 `70px` 이었다. 실측하니 그 화면(`/specs/*`·`/manage/overcap`)
      에는 **id 달린 section 도 제목도 내부 앵커도 «0개»** — 즉 «아무것도 안 맞는 죽은 상수»였다.
      지우지 않고 이 식에 합류시킨다(나중에 앵커가 생기면 바로 맞는다).
   🔴 덮개는 «둘»이다: 상단바 + 관리 화면의 문서 이동줄. 실측(폭 12개):
        독자  1440~720 → 51px          ≤700 → 83px
        관리  1440~720 → 105px(51+54)  ≤700 → 137px(83+54)
      그래서 `--navh` «와» `--pagenavh` 를 «둘 다» 더한다 — app.js 가 각각 재서 심는다.
   🔵 미디어쿼리는 「JS 가 아직 안 돈 찰나」의 대비값만 가른다.
   🔴 2026-09-02 헤더 개편(D145) — 상단바가 «한 줄 62px»로 폭과 무관해졌다(위 51↔83 두 줄
   전제는 폐기 표에). 대비값도 폭 구분 없이 62px 하나로 합친다. */
.wbody h2[id], .wbody h3[id], .layout.wread .footnotes li, .wbody .cmt, .wbody .blk[id],
.md h2[id], .md h3[id], .md .footnotes li,
.doc section[id] { scroll-margin-top:calc(var(--navh, 62px) + var(--pagenavh, 0px) + 25px); }

/* 🔴 «어디에 떨어졌는지» 화면이 말한다 (2026-08-27 관리자 「여전히 포커싱은 잘 안 됨」).
   스크롤이 맞게 가도 «표시»가 없으면 사람은 「안 갔다」로 읽는다 — 각주 줄은 화면 맨 위에
   서고 그 아래를 다른 구역이 채우니 더 그렇다.
   🔵 잠깐 띄고 사라진다 — 남겨 두면 「이게 왜 칠해져 있지」가 된다.
   🔵 각주·절 제목·코멘트 셋 다 — 앵커로 «떨어질 수 있는» 자리는 같은 병을 앓는다. */
/* 🔴 표시를 «거는 주체»가 둘이다 — JS 가 있으면 `.anchor-hit`(같은 대상을 다시 눌러도
   «다시» 돈다), 없으면 `:target`(한 번은 돈다). 🔴 둘을 «같이» 켜면 안 된다 — `:target` 이
   계속 매칭된 채라 JS 가 클래스를 떼었다 붙여도 애니메이션이 안 다시 돈다. */
/* 🔴 「본문에서 이 코멘트 보기」가 떨어지는 «대상»은 코멘트가 아니라 그 «블록»(`.blk`)
   이다 — `id` 를 블록 쪽이 갖는다(`render.BlockAnchors.wrap`). 관리자가 「코멘트 보기
   했을 때도 «사각형으로 이쁘게 감싸주고»」라고 한 것이 바로 이 자리다. */
.wbody h2[id], .wbody h3[id], .layout.wread .footnotes li, .wbody .cmt, .wbody .blk[id],
.md h2[id], .md h3[id], .md .footnotes li { border-radius:4px; }

/* 🔴 관리자 버그 제보(2026-09-02) — 대제목(h2) 포커싱 배경이 «윗칸»까지 칠해졌다. 원인:
   h2 는 절 구분을 위해 `padding-top:22px` + `border-top`(위 §)을 갖는데(h3 엔 없다), 배경색은
   기본으로 padding 까지 칠해져 그 칸이 같이 물든다. 🔵 여백·구분선은 절 간격을 만드는
   구조라 «건드리지 않는다» — 배경이 «칠해지는 범위»만 글자 상자로 좁힌다.
   🔴 `.footnotes li`·`.cmt`·`.blk[id]` 는 여기 넣지 않는다 — 그쪽은 카드 padding 째로
   «사각형으로 감싸» 칠해지는 게 요구사항이다(위 «사각형으로 이쁘게 감싸주고» 참고) —
   content-box 를 걸면 그 카드들의 강조가 도리어 좁아진다. */
.wbody h2[id], .wbody h3[id] { background-clip:content-box; }

/* 관리 화면(.md) — 🔴 이번 개편 대상이 아니다. 테두리+박스섀도 강조 «그대로» 둔다
   (관리자 2026-08-27 「좀 «티나게»」 · 1.0초 그대로 있다가 0.6초에 걸쳐 사라진다). */
.md h2[id], .md h3[id], .md .footnotes li { outline:2px solid transparent; outline-offset:3px; }
@keyframes anchorflash {
  0%, 62% { background:var(--anchor-hl); outline-color:var(--accent);
            box-shadow:0 0 0 5px var(--anchor-hl); }
  100%    { background:transparent;      outline-color:transparent;
            box-shadow:0 0 0 5px transparent; }
}
.md .anchor-hit { animation:anchorflash 1.6s ease-out; }
html:not(.js-anchor) .md .footnotes li:target { animation:anchorflash 1.6s ease-out; }

/* 일반페이지(.wbody) — 2026-09-01 개편(스샷5): 대제목·소제목처럼 요소 크기가 다르면
   «라운드 박스」 테두리가 안 맞아 예쁘지 않았다 — 테두리를 걷고 색만 더 연하게, 은은한
   깜빡임(fade)으로 1.8초 안에 끝낸다. 「그대로 있다가 사라지는」 것이 아니라 처음부터
   옅어지기 시작한다 — 그것이 «은은함»이다. */
/* 🔴 `background`(축약)이 아니라 `background-color`(단일 속성)로 애니메이션한다 — 축약
   속성을 키프레임에 쓰면 그 축약이 덮는 «다른» 하위 속성(`background-clip` 포함)까지
   초기값(border-box)으로 «같이» 리셋된다(2026-09-02 실측 — 픽셀 단위로 색을 재서 잡았다:
   정적 상태에선 `background-clip:content-box`가 맞게 읽히는데 «깜빡이는 동안»만 border-box로
   돌아갔다). 대제목(h2) 배경이 윗칸까지 새는 버그의 진짜 자리가 여기였다. */
@keyframes anchorflash-reader {
  0%   { background-color:var(--anchor-hl-soft); }
  100% { background-color:transparent; }
}
.layout.wread .anchor-hit { animation:anchorflash-reader 1.8s ease-out; }
html:not(.js-anchor) .wbody h2[id]:target, html:not(.js-anchor) .wbody h3[id]:target,
html:not(.js-anchor) .layout.wread .footnotes li:target, html:not(.js-anchor) .wbody .cmt:target,
html:not(.js-anchor) .wbody .blk[id]:target { animation:anchorflash-reader 1.8s ease-out; }
.wbody ul, .wbody ol { padding-left:24px; margin:1.1em 0; }
.wbody li { margin:.42em 0; }
.wbody blockquote { border-left:3px solid var(--line); margin:1.3em 0; padding:2px 0 2px 18px;
  color:var(--ink3); }
.wbody hr { border:0; border-top:1px solid var(--line); margin:2em 0; }
.wbody code { font-family:var(--mono); font-size:.86em; background:var(--code-bg);
  padding:.1em .35em; border-radius:3px; color:var(--code-text); }
.wbody pre { background:var(--code-bg); border:1px solid var(--line); border-radius:var(--radius, 8px);
  padding:14px 16px; overflow-x:auto; font-size:13px; line-height:1.6; }
.wbody pre code { background:none; padding:0; font-size:13px; }
/* 🔴 표는 «본문 폭을 넘을 수 있다» — 제 칸에서 가로로 구른다 */
.wbody .twrap, .wbody table { max-width:100%; }
/* 🔴 관리자 지시(2026-09-02) — 표 오른쪽에 빈 흰 상자가 뜨고 내용이 잘렸다. 원인은
   `display:block`으로 «표 자신»을 스크롤시키던 수법 — 표는 블록 상자로 100% 너비를 받는데
   «안의 행·칸»은 그 상자에 안 늘어나고 제 내용 너비(auto)로만 앉는다(실측: `table.offsetWidth`
   660 vs `tr.offsetWidth` 489). 카드 테두리·배경이 그 «빈 660px 상자»에 걸려 오른쪽이 통째로
   비어 보였고, 칸은 좁은 489px 안에서만 줄바꿈해 내용이 잘렸다. 표준대로 되돌린다 —
   `render.py` `_wrap_tables()` 가 감싸는 `<div class="table-wrap">`이 스크롤·카드를 맡고,
   표는 `display:table`(기본값)로 돌아가 «칸이 실제로 늘어난다». */
.wbody .table-wrap { width:100%; overflow-x:auto; margin:0 0 1.5em; border:1px solid var(--line);
  border-radius:var(--radius-lg, 12px); background:var(--surface);
  box-shadow:0 1px 2px rgba(23,42,32,.05); }
/* 🔵 표의 «값»은 위 `.doc` 규칙(683~)의 선택자 목록에 `.wbody` 를 더해 공유한다 —
   여기에 복사해 두면 한쪽만 고쳐져 두 화면이 조용히 갈린다. 여기는 컨테이너만 정한다.
   🔴 `.doc table` 은 여전히 `display:block` 감싸는 div 없는 옛 수법이다 — 관리 화면은
   이번 개편 대상 밖이라 안 건드렸다(같은 병이 있을 수 있지만 별건이다). */
.wbody table { border-collapse:collapse; width:100%; font-size:14px; line-height:1.6; }
/* 🔴 `thead th`·`tbody th`·`tbody td` 는 위(679행대) `.doc` 과 «선택자 자체를 공유»한다 —
   값을 거기서 «직접» 못 고친다(그러면 관리 화면도 바뀐다). 대신 `.wbody` «만» 다시 걸어
   같은 특정도(0,2,1)를 나중에(=이 파일 아래쪽) 선언해 소스 순서로 이긴다. 가이드 값 그대로:
   sans 12.5px/700 · `--bg-side`(=`--surface2`) 배경. 모노스페이스 소문자 자간은 `.doc` 전용이
   됐다(관리 화면은 그대로 유지 — 이번 개편 대상 밖). */
.wbody thead th { font-family:var(--sans); font-size:12.5px; font-weight:700; letter-spacing:0;
  text-transform:none; color:var(--ink2); background:var(--surface2);
  padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
.wbody tbody td { padding:10px 14px; border-bottom:1px solid var(--line); }
.wbody tbody tr:last-child td { border-bottom:none; }
.wbody tbody tr:hover td { background:var(--hover); }
/* 🔴 관리자 지시(2026-09-02) — 「원천」제목 밑에 «빈 공간 + 가로줄»이 있었다(버그로 짚음).
   원인은 이 규칙 — 각주가 «본문 안에서» 뜰 때 쓰던 구분선(3em 여백 + 위 테두리)이다.
   D143 에서 정의 블록을 `.wlinks` 로 뗀 뒤로 이 규칙은 «그 옛 자리에서 쓸 일이 없는데» 값만
   남아 있었다(specificity 때문에 별도 override 로는 못 이겼다 — 원본을 고친다). 「여기를
   가리키는 문서」와 «같은 값»(`.wl-fold ul` 의 10px)으로 맞춘다. */
.layout.wread .footnotes { margin-top:10px; }
.layout.wread .footnotes ol { padding-left:20px; }
/* 🔴 관리자 지시(2026-09-02) — 「원천」도 카드로. 더보기(12개 문턱 · `render.py`
   `_fold_footnotes`)는 «나머지 N개 보기」와 같은 `.wmore` 손짓을 그대로 쓴다 — 다섯 번째
   신호를 안 만든다.
   🔴 **번호는 뺐다(2026-09-02 밤 · 관리자 재지적, 「순서가 뜻을 갖는 목록이 아니다」)** —
   같은 날 이전 지시(「번호는 남긴다 — 각주 참조[1]↔카드 대응」)를 뒤집는다. 각주 마커는
   기본 «숨김»(위 `.wbody .footnote-ref a`)이라 평소엔 대응시킬 [1]이 화면에 없다 — 대응이
   뜻을 가지는 자리는 「각주 보기」를 켰을 때뿐인데 그때도 굳이 이 목록 번호에 기대지 않아도
   된다는 게 이번 판정이다. */
.layout.wread .footnotes-list { list-style:none; padding-left:0; }
.layout.wread .footnotes-list li { border:1px solid var(--line); border-radius:var(--radius-lg, 12px);
  background:var(--surface); padding:10px 12px; margin:.5em 0; box-shadow:0 1px 2px rgba(23,42,32,.05); }
/* 🔴 관리자 지시(2026-09-02) — 카드가 «글자 한 줄인데 두세 줄 높이»였다. 원인: 각주 내용을
   감싸는 `<p>` 에 브라우저 기본 여백(1em 위아래)이 그대로 살아 있었다(카드 안에서는 padding
   과 «겹쳐» 필요 없는 여백이다). 지운다 — 카드 높이가 글자에 딱 맞아진다. */
.layout.wread .footnotes-list li p { margin:0; }
/* 🔴 관리자 지시(2026-09-02) — 「굵기가 다르다」(색깔 칠해진 글자 = 초록 링크). 제목 링크만
   다른 두 카드의 제목과 같은 굵기로 — 뒤따르는 「원본·정제사본」은 부제 결이라 그대로 둔다. */
.layout.wread .footnotes-list li p > a:first-child { font-weight:700; }
/* 🔴 마커(작은 번호)는 기본 «꺼짐»(2026-09-01 개편). 1·2차는 문장 hover 로 대신 띄웠으나
   관리자가 「불편하다 · 안 떠야 할 곳에서 뜬다」로 «걷어냈다»(3차 — w.html 인라인 스크립트
   참고, 원인은 거기 적혀 있다). 지금은 ⋮ 도구의 「각주 보기」 토글이 켜졌을 때만(`html.
   fn-shown`) 번호가 «예전처럼» 다시 보이고, 그 번호를 눌러야 뜬다. 파일의 각주 자체는
   그대로 산다(적재 판정) — 화면 표시만 토글로 가린다. */
.wbody .footnote-ref a { display:none; }
/* 🔴 관리자 지시(2026-09-02) — 「보기가 아쉬운 자리」①: 각주 번호가 브라우저 기본 렌더
   그대로였다. 하이퍼링크·목차처럼 손질한다 — 새 토큰(`--accent-bg`·`--radius`)이 이번에
   생겨서 가능해졌다. 🔵 ②③(체크박스 신호)은 안 건드린다(관리자가 그 메뉴를 직접 정했다). */
html.fn-shown .wbody .footnote-ref a { display:inline-flex; align-items:center;
  justify-content:center; min-width:1.5em; height:1.5em; margin:0 .05em;
  padding:0 .3em; border-radius:var(--radius, 8px); background:var(--accent-bg);
  color:var(--accent-strong); font-size:11px; font-weight:650; line-height:1;
  text-decoration:none; vertical-align:middle; position:relative; top:-.3em; cursor:pointer; }
html.fn-shown .wbody .footnote-ref a:hover { background:var(--accent); color:#fff; }

/* ── ⑥b 「요지」 뒤 절은 접힌다 — 관리자 판정(야간지시 §2 · 8/24). 사라지는 것은 없다,
   순서만 내린다. 구분선은 h2 가 아니라 이 상자가 진다(펼쳐도 자리가 안 튄다) ── */
/* 🔴 `.wbody h2` 와 같은 이유로 `clear:right` — 정보상자에 걸리는 절 구분선은 이쪽(«둘째
   대제목부터»는 h2 자체가 아니라 이 감싸는 `.wsec` 이 테두리·여백을 갖는다)이 실제로 그린다. */
.wsec { border-top:1px solid var(--line); margin:2.3em 0 .75em; padding-top:22px; clear:right; }
.wsec > summary { cursor:pointer; list-style:none; display:flex; align-items:baseline; gap:8px; }
.wsec > summary::-webkit-details-marker { display:none; }
.wsec > summary::before { content:"▸"; color:var(--ink3); font-size:14px; flex:0 0 auto; }
.wsec[open] > summary::before { content:"▾"; }
.wsec > summary h2 { margin:0; padding:0; border-top:none; }
.wsec-body { margin-top:6px; }

/* ── ⑥c 편집용 주석(⚠️ 모순·✅ 판정·📌 갈렸던 원천) — 항목 하나만 접는다. 독자도 펼쳐 본다 ── */
.wfold { margin:.3em 0; }
.wfold > summary { cursor:pointer; list-style:none; display:inline-block;
  font-size:12.5px; font-weight:650; color:var(--ink3); padding:2px 9px;
  border-radius:99px; background:var(--surface2); }
.wfold > summary::-webkit-details-marker { display:none; }
.wfold[open] > summary { margin-bottom:6px; }

/* ── ⑥d 🔴🟡🔵 는 «작업 중» 표시다 — 독자 화면에서는 작게 눌러 둔다.
   🔴 `filter:grayscale` 는 실측에서 «채운 원 그대로」인 색 이모지를 통짜 회색 얼룩으로
   뭉갠다(테두리·톤이 사라져 오타처럼 보인다) — 그래서 무채색화 대신 옅게만 뺀다. */
.mrk { font-size:.72em; opacity:.5; }

/* ── 미리보기 박스 — 용어 링크(위키피디아 방식 · 관리자 확정 8/25) «그리고» 각주(공용,
   2026-09-01 2차) — 관리자 「각주도 하이퍼링크와 동일한 폼으로」. X 버튼 없이 마우스가
   벗어나면 자동으로 닫힌다(app.js 가 아니라 w.html 안 스크립트가 연다). 🔴 따로 두지
   않는다 — 같은 요소를 그대로 써야 자리·클릭 가능(박스 안 링크)·호버 유지가 같이 온다. ── */
.tvbox { position:absolute; z-index:50; width:320px; max-width:90vw; display:none;
  background:var(--surface2); border:1px solid var(--line); border-radius:8px;
  padding:12px 14px; font-size:13.5px; line-height:1.6; color:var(--ink2);
  box-shadow:0 10px 30px var(--sh-c); }
.tvbox.on { display:block; }
.tvbox .tvh { font-weight:650; color:var(--ink); font-size:14.5px; margin-bottom:6px; }
.tvbox .tvh:empty { display:none; margin-bottom:0; }  /* 🔴 각주는 제목 줄이 없다 */
.tvbox .tvb p { margin:0; }
.tvbox .footnote-backref { display:none; }  /* 각주 내용의 ↩ 되돌이 화살표 — 박스 안에서는 의미 없다 */

/* ── ⑦ 이어지는 곳 ── */
/* 🔴 관리자 지시(2026-09-02) — 셋 다 접혔을 때 「여기를 가리키는 문서」↔「원천」 세로 간격이
   «문단 하나 건너뛴» 느낌이었다(관리자 표현 「다음 줄 정도 느낌」). 재서 확인 — 실제로는
   행 사이 `gap`(34px)이 «그대로» 적용된 것뿐이었다(백링크 밑↔원천 위 = 정확히 34px, 배로
   벌어지는 병은 없었다). 접힌 한 줄(22.75px)짜리 행에는 34px 이 크게 느껴진다. 🔴 가로
   (칸 사이)와 세로(행 사이) 간격을 갈라 세로만 줄인다 — 가로는 관리자가 지적 안 했다. */
.wlinks { display:grid; grid-template-columns:1fr 1fr; row-gap:14px; column-gap:34px;
  margin-top:52px; padding-top:26px; border-top:1px solid var(--line); }
@media (max-width:760px) { .wlinks { grid-template-columns:1fr; row-gap:14px; } }
/* 🔴 접힌 채로는 14px 이 «다음 줄」 느낌을 주지만, «펼치면» 카드 바로 밑에 다음 절 제목이
   붙어 버린다(관리자가 걱정한 그 자리) — 펼쳤을 때만 아래 여백을 더 준다. */
.wlinks .wl-fold[open] { margin-bottom:20px; }
/* 🔴 관리자 지시(2026-09-02) — 「원천」을 좌우 두 칸 «밑에 한 줄 전체»로. 좁은 화면(한
   칸으로 접힘)에서는 `grid-column` 이 의미가 없어져 그냥 순서대로 쌓인다 — 무너지지 않는다. */
.wlinks .wl-full { grid-column:1 / -1; }
.wlinks h2 { font-size:13px; font-weight:700; letter-spacing:.03em; color:var(--ink3);
  text-transform:uppercase; margin:0 0 10px; }
/* 🔴 관리자 지시(2026-09-02) — 「악센트는 링크·활성 상태에만」 위반 하나를 걷어낸다. 숫자를
   죽이는 게 아니라 색만 뺀다 — 굵기(부모 h2 가 이미 700)로 위계는 남는다. */
.wlinks h2 b { color:var(--ink2); }
.wlinks ul { list-style:none; margin:0; padding:0; }
.wlinks li { font-size:14.5px; line-height:1.75; margin:.2em 0; }
.wlinks .k { font-size:11px; color:var(--ink3); margin-left:6px; }
.wlinks .none { font-size:13.5px; color:var(--ink3); margin:0; }
/* 🔴 관리자 지시(2026-09-02) — 카드로 바꾼다(「여기를 가리키는 문서」·「원천」만 · 「같은 분류」는
   보류 — 이유는 render.py `_fold_footnotes` 옆 · 아래 주석 참고). 가이드 카드 값 그대로:
   테두리+`--radius-lg`+흰 배경+패딩, 제목 14.5px/700, 부제 13px/`--ink2`. */
.wl-cards { display:flex; flex-direction:column; gap:8px; }
.wl-cards li { border:1px solid var(--line); border-radius:var(--radius-lg, 12px);
  background:var(--surface); padding:10px 12px; margin:0; box-shadow:0 1px 2px rgba(23,42,32,.05); }
.wl-cards li > a { font-weight:700; }
.wl-cards .wd { display:block; margin-top:2px; font-size:13px; line-height:1.6; color:var(--ink2); }
/* 「나머지 N개 보기」— `.wl-fold` 와 같은 ▸/▾ 손짓(다섯 번째 신호를 안 만든다). 지금까지는
   브라우저 기본 삼각형이었다 — 그것도 이번에 맞춘다. */
.wmore > summary { list-style:none; cursor:pointer; display:flex; gap:8px; align-items:baseline;
  font-size:13.5px; color:var(--ink2); margin-top:10px; }
.wmore > summary::-webkit-details-marker { display:none; }
.wmore > summary::before { content:"▸"; color:var(--ink3); font-size:12px; }
.wmore[open] > summary::before { content:"▾"; }
.wmore > summary:hover { color:var(--accent); }
.wmore ul, .wmore ol { margin-top:10px; }
/* 「여기를 가리키는 문서」 접기 (2026-09-01 개편) — 기본 접힘. `.cretired` 와 «같은 손짓»
   (▸/▾ 직접 그린다 · 기본 마커 지움) — 새 몸짓을 만들지 않는다. */
.wl-fold > summary { list-style:none; cursor:pointer; display:flex; gap:8px; align-items:baseline; }
.wl-fold > summary::-webkit-details-marker { display:none; }
.wl-fold > summary::before { content:"▸"; color:var(--ink3); font-size:12px; }
.wl-fold[open] > summary::before { content:"▾"; }
.wl-fold > summary:hover h2 { color:var(--accent); }
.wl-fold > summary h2 { margin:0; }
.wl-fold ul, .wl-fold p.none { margin-top:10px; }

/* ── ⑧ 분류 줄 — 나무위키의 하단 「분류:」 ── */
.wcats { margin-top:34px; padding:11px 14px; border:1px solid var(--line);
  border-radius:7px; background:var(--surface); font-size:13.5px; color:var(--ink3); }
.wcats a { margin:0 4px; }
.wcats .bar { color:var(--line); }

/* ── 왼쪽 사이드바 — 폴더 트리 «대신» 목차 (위키백과와 같은 자리) ── */
.wside { font-size:13px; }
.ws-h { font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink3); padding:2px 8px 8px; }
.ws-h.tocline { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.ws-nav { list-style:none; margin:0 0 4px; padding:0; }
.ws-nav a { display:block; padding:4px 8px; border-radius:5px; color:var(--ink2); }
.ws-nav a:hover { background:var(--surface); color:var(--accent); text-decoration:none; }
.ws-toc a { display:block; padding:3px 8px; border-radius:5px; color:var(--ink2);
  line-height:1.5; }
.ws-toc a:hover { background:var(--surface); color:var(--accent); text-decoration:none; }
.ws-toc .n { font-family:var(--mono); font-size:11px; color:var(--ink3); margin-right:7px; }
/* 접기 — h3 를 품은 절만 꺾쇠가 붙는다 */
.ws-toc details > summary { display:flex; align-items:center; list-style:none; cursor:pointer; }
.ws-toc details > summary::-webkit-details-marker { display:none; }
.ws-toc details > summary::before { content:"›"; width:14px; flex-shrink:0;
  color:var(--ink3); font-size:13px; text-align:center; transition:transform .12s; }
.ws-toc details[open] > summary::before { transform:rotate(90deg); }
.ws-toc details > summary > a { flex:1; }
.ws-toc details ul { list-style:none; margin:0; padding:0 0 2px 14px; }
.ws-toc details li a { font-size:12.5px; }
.ws-toc .ws-t2 { padding-left:14px; }

/* ── ⋮ 도구 — 위키백과 우상단의 그 메뉴. 순수 HTML details 라 JS 가 없다 ── */
.wtools { position:relative; }
.wtools > summary { list-style:none; cursor:pointer; padding:0 7px; border-radius:5px;
  border:1px solid transparent; color:var(--ink3); font-size:15px; line-height:1.4; }
.wtools > summary::-webkit-details-marker { display:none; }
.wtools > summary:hover { background:var(--surface); color:var(--ink); }
.wtools[open] > summary { border-color:var(--accent); color:var(--accent); }
.wt-menu { position:absolute; right:0; top:26px; z-index:30; min-width:224px;
  background:var(--surface2); border:1px solid var(--line); border-radius:8px;
  padding:8px 0; box-shadow:0 10px 30px var(--sh-c); }
.wt-menu a { display:block; padding:6px 14px; font-size:13px; color:var(--ink2); }
.wt-menu a:hover { background:var(--surface); color:var(--accent); text-decoration:none; }
/* 🆕 「각주 보기」 — 이동이 아니라 켬/끔이라 체크박스로(관리자 직접 지시로 이 항목만 추가) */
.wt-toggle { display:flex; align-items:center; gap:8px; padding:6px 14px; font-size:13px;
  color:var(--ink2); cursor:pointer; }
.wt-toggle:hover { background:var(--surface); color:var(--accent); }
.wt-toggle input { margin:0; }

/* ── 정보상자 — 위키백과의 오른쪽 상자. 🔴 사진 칸은 «아직» 없다(사본에 그림 0장) ── */
/* 🔴 `position:relative; z-index:1` 은 «장식이 아니라 클릭을 살리는 줄»이다
   (2026-08-27 관리자 「우측에는 마우스를 가져다대도 클릭할 수가 없다」).
   뜬 상자(float)는 CSS 칠하기 순서상 4층인데 `.blk` 이 `position:relative`(6층)라
   본문 블록이 정보상자 «위»에 깔린다 — 글자는 흘러서 안 겹치는데 «상자만» 포인터를
   빼앗긴다. 그래서 「보이는데 안 눌린다」가 되고, 블록 «사이 틈»에서는 눌려서
   「몇몇이 그런다」로 보였다. 실측(W1440 · 상자 세로 14자리 훑기): 고치기 «전» 3자리만
   상자에 닿고 9자리를 `.blk`·`.cthread` 가 먹었다 → 고친 «뒤» 12자리 전부 닿는다.
   🔴 `.blk` 의 relative 를 빼는 길도 같은 값을 냈지만 그쪽은 표 칩(`.cwide`)이 붙어
      띄우는 자리라 안 건드린다. 🔵 z-index 1 은 `.pagenav`(8)·`.topnav`(10)·
      `.tvbox`(50) 보다 «아래»라 그것을 가리지 않는다. */
.winfo { float:right; width:298px; margin:6px 0 22px 30px; border:1px solid var(--line);
  border-radius:8px; background:var(--surface); overflow:hidden;
  position:relative; z-index:1; }
/* 🔴 관리자 지시(2026-09-02) — 접힌 정보상자가 회색으로 남아 있었다. `.winfo` 는 이미
   흰색(`--surface`)인데 «접혔을 때 유일하게 보이는» 이 머리띠(`<summary>`)만 `--surface2`
   였다 — 카드가 다 흰색이 됐는데 이것만 눈에 띄었다. 같은 흰색으로 맞춘다. */
.wi-h { background:var(--surface); border-bottom:1px solid var(--line);
  padding:10px 14px; font-size:14px; font-weight:680; color:var(--ink);
  text-align:center; text-wrap:balance; }
.winfo table { width:100%; border-collapse:collapse; }
.winfo th { width:78px; text-align:left; vertical-align:top; font-size:11.5px;
  font-weight:600; color:var(--ink3); padding:8px 8px 8px 14px; white-space:nowrap;
  border-bottom:1px solid var(--line); }
.winfo td { vertical-align:top; font-size:12.5px; line-height:1.55; color:var(--ink2);
  padding:8px 14px 8px 0; border-bottom:1px solid var(--line);
  overflow-wrap:anywhere; }
.winfo tr:last-child th, .winfo tr:last-child td { border-bottom:0; }
/* 관리자 개편 ②(2026-09-11) — 접힘 라벨이 「속성보기」 하나라, 접힌 카드는 글자를 감쌀
   만큼만(폭·높이). 펼치면 표가 있어 원래 폭(298px)으로 돌아간다. */
.winfo:not([open]) { width:auto; }
.winfo:not([open]) > summary.wi-h { border-bottom:0; padding:7px 32px 7px 14px; font-size:12.5px; }
/* 상태 줄의 「사람확인」 풀어쓴 한 줄 — 상태가 먼저, 이건 작게 */
.winfo td .wi-small { display:block; font-size:11px; line-height:1.5; color:var(--ink3); margin-top:3px; }
/* 속성 라벨 호버 설명 — 🔴 점선 밑줄은 «걷었다»(관리자 눈판정 ③ · 2026-09-11 「전부 제거」).
   기능(툴팁)은 그대로고 표시만 없다 · 도움 커서는 점선이 아니라 남긴다. */
.winfo th[data-tip] { cursor:help; }
@media (max-width:860px) {
  .winfo { float:none; width:auto; margin:16px 0 22px; }
  .winfo:not([open]) { width:fit-content; }
}


/* 관리자 눈판정 ⑧(2026-09-11) — /manage 진입이 콜드 캐시에서 5~6초라 「눌렀는데 반응이
   없다」로 읽힌다. 클릭 즉시 화면을 막고, 새 문서가 오면 문서 교체로 저절로 사라진다.
   뒤로가기(bfcache) 복원만 app.js 의 pageshow 가 끈다. */
.loadveil { position:fixed; inset:0; z-index:999; display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; background:var(--scrim); }
.loadveil.on { display:flex; }
.lv-spin { width:34px; height:34px; border-radius:50%; border:3px solid var(--surface);
  border-top-color:var(--accent); animation:lvspin .8s linear infinite; }
.lv-t { color:#fff; font-size:13.5px; font-weight:600; }
@keyframes lvspin { to { transform:rotate(360deg); } }

/* ── 읽는 사람의 대문 (`/w`) — 🔴 「지금 할 일」이 없는 대문 ── */
.whome { max-width:100%; }
/* 🔴 대문 머리도 가운데로 (관리자 「최상단을 중앙 배치」 · 「등」이라고 복수로 말했다).
   🔴 그리고 이 자리에서 «큰 검색창을 걷었다» — 그대로 두면 아래가 허해 보이므로 가운데
      정렬이 그 자리를 메운다. 둘은 한 덩이라 «같이» 낸다.
   🔵 글자 크기·색·굵기는 «안 건드렸다» — 관리자가 「지금도 충분히 이쁨」이라고 했다. */
.wh-head { padding:14px 0 30px; border-bottom:1px solid var(--line); text-align:center; }
.wh-head h1 { font-size:40px; line-height:1.15; letter-spacing:-.02em; font-weight:700;
  margin:0; }
.wh-sub { font-size:16.5px; line-height:1.7; color:var(--ink2); max-width:64ch;
  margin:12px auto 0; }
.wh-sub b { color:var(--ink); }
.wh-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:30px; }
@media (max-width:820px) { .wh-grid { grid-template-columns:1fr; } }
.wh-box { border:1px solid var(--line); border-radius:var(--radius, 8px); background:var(--surface);
  padding:16px 20px 18px; }
.wh-box h2 { font-size:15px; font-weight:680; color:var(--ink); margin:0; }
.wh-note { font-size:12.5px; color:var(--ink3); margin:5px 0 12px; }
.wh-list { list-style:none; margin:0; padding:0; }
.wh-list li { padding:7px 0; border-top:1px solid var(--line); font-size:14.5px; }
.wh-list li:first-child { border-top:0; }
/* 눈판정 2차 ①③(2026-09-11) — 목록 제목은 «굵게» + 제목 옆 세모 화살표(v1 ◂ 계열의 오른쪽).
   🔴 .wh-list 는 대문·/recent·/browse 가 «같은 부품»이라 셋이 같이 받는다(갈라 두면 D147 병 ·
   지시 범위는 대문, 확장은 내 판단 — 회신함). 화살표는 링크 «안»(::after)이라 눌리는 영역이다. */
.wh-list li > a { font-weight:700; }
.wh-list li > a::after { content:"▸"; margin-left:4px; font-size:.82em; }
/* 눈판정 2차 ② — 설명(회색)은 제목과 «확실히» 갈리게 더 작게(12.5→11.5px) */
.wh-list .wd { display:block; font-size:11.5px; color:var(--ink3); line-height:1.5;
  margin-top:2px; }
.wn { font-family:var(--mono); font-size:11px; color:var(--ink3); margin-left:6px; }
.wh-more { display:inline-block; margin-top:12px; font-size:13px; }
.wh-cats { margin-top:26px; }
.wh-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.wh-tags .chip { margin:0; }
.wh-foot { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.wh-foot .btn { font-size:13.5px; }
/* 🔴 2026-09-01 2차 — 배경판 없앴다(목차 활성과 같은 처방 · 통일성 지적). 굵기 + accent 글자색만. */
.ws-nav a.on { color:var(--accent); font-weight:650; }
.wb-group { margin-top:20px; }
.wb-flag { font-size:11.5px; color:var(--g-unverified); margin-left:8px; }

/* ── ☰ 사이드바 보기·숨기기 — 위키백과의 그 단추 ── */
.sbtoggle { background:none; border:1px solid transparent; border-radius:6px; cursor:pointer;
  color:var(--ink3); font-size:15px; line-height:1; padding:5px 8px; flex-shrink:0; }
.sbtoggle:hover { background:var(--surface); color:var(--ink); border-color:var(--line); }
.sbtoggle.small { font-size:12px; padding:3px 6px; margin-left:auto; }
.ws-top { display:flex; align-items:center; gap:6px; }
/* 🔴 **여는 단추와 닫는 단추를 «모양으로» 가른다** (관리자 2026-08-27 · 리더 경유 —
   「좌측 메뉴가 펼쳐져 있는데 작대기 3개가 둘 보인다」). ☰ 는 «연다»에만 쓰고, 열려 있는
   동안 보이는 것은 「접기」(◂)여야 한다. 그래서 사이드바가 «보이는» 동안 중앙 ☰ 를 감춘다.
   🔴 ≤900px 은 위(`.sidebar{display:none}`)에서 «펼침 상태여도» 사이드바가 없다 — 그 폭에서
      중앙 ☰ 까지 감추면 여는 길이 «하나도» 안 남는다. 그래서 되돌린다.
   🔵 말도 같이 갈린다 — 두 단추는 «각각 한 상태에서만» 보이므로 이름을 상태별로 박았다
      (사이드바 안 = 「사이드바 접기」 · 중앙 = 「사이드바 보기」). JS 없이도 거꾸로 안 읽힌다. */
html:not(.sb-off) .wcrumb .sbtoggle { display:none; }
@media (max-width:900px) { html:not(.sb-off) .wcrumb .sbtoggle { display:inline-block; } }
/* 🔴 접히면 본문이 그 자리를 «받아» 넓어진다 — 빈 칸으로 남기면 접은 값이 없다 */
html.sb-off .layout.wread .wside { display:none; }
html.sb-off .layout.wread .page { max-width:1120px; margin:0 auto; }

/* ── 정보상자 접기 · 각주 되돌이 화살표 ── */
.winfo > summary { cursor:pointer; list-style:none; position:relative; }
.winfo > summary::-webkit-details-marker { display:none; }
.winfo > summary::after { content:"▾"; position:absolute; right:12px; top:50%;
  transform:translateY(-50%); color:var(--ink3); font-size:11px; }
.winfo:not([open]) > summary::after { content:"▸"; }
.winfo:not([open]) { padding-bottom:0; }
.wminfo { background:none; border:0; padding:0; cursor:pointer; font:inherit;
  color:var(--accent); border-bottom:1px dotted currentColor; }
.wminfo:hover { color:var(--ink); }
/* 🔴 각주의 되돌이 화살표(↩)는 인용 횟수만큼 붙는다 — 한 원천을 15번 인용하면 15개다.
   실제로 누르는 것은 「정제사본」이지 그 화살표가 아니다(관리자 지시 2026-08-24). */
.layout.wread .footnotes .footnote-backref { display:none; }
/* ── 폐기된 문서 — 🔴 감추지 않고 «흐리게 + 말로» 표시한다(파일은 남는다) ── */
.wnote.dead { border-left-color:var(--ink3); background:var(--surface2); }
.wh-list li.dead a, .wlinks li.dead a { color:var(--ink3); text-decoration:line-through; }
.wh-list li.dead, .wlinks li.dead { opacity:.72; }
.wb-flag.dead { color:var(--ink3); }

/* ── 블록 코멘트 (P2 1단계 · D84) ──────────────────────────────────────────
   🔴 «달린» 코멘트는 본문을 밀지 않는다 — 붙었다고 문단 폭이 바뀌면 읽는 사람이 그걸
      먼저 눈치챈다. 🔴 다만 «달기 칩»은 8/26 부터 흘린다(float) — 그래야 글자·정보상자와
      겹치지 않는다(아래). 🔵 흘리면 «줄이 칩만큼 짧아질 수는 있다»: 실측으로는 오른쪽에
      정보상자가 떠 있는 «첫 문단»에서만 첫 줄이 한 낱말쯤 밀렸고, 나머지 493 블록은
      70ch(=728px) < 칸 890px 이라 그대로였다. 겹치는 것보다 이쪽이 낫다는 판단이다. */
.blk { position:relative; }      /* 🔴 표 칩(`.cwide`)이 붙여 띄우는 자리라 남긴다 */
/* 「＋ 코멘트」 — 🔴 2026-08-26 관리자 「코멘트 기능조차도 안 보인다」의 자리다.
   옛 값(`opacity:0` + `position:absolute; right:-26px`)이 «세 겹»으로 안 보였다
   (실측 · 실제 app.js·style.css 를 물려 «눌러» 잰 값):
     ⓐ 올리기 «전»엔 완전 투명이라 훑는 눈에 아무 단서가 없다
     ⓑ 본문칸 좌우 여백이 «24px 뿐»인데 -26px 이라 밖으로 나간다 —
        W1440 칩=[1302..1322](문단 글자는 965 에서 끝) · 🔴 W1100·W960 은 «화면 밖»
     ⓒ 「＋」 한 글자로는 «무슨 기능인지»가 안 보인다 (라벨은 app.js 가 만든다)
   🔴 고침은 «자리를 잡는 방식»을 바꾼 것이다 — 붙여 띄우지(absolute) 않고 «흘린다»(float).
   그래야 ① 글자와 겹칠 수가 «구조적으로» 없고(줄상자가 알아서 피한다) ② 오른쪽에 떠 있는
   정보상자(`.winfo` 도 `float:right`)를 «자동으로» 비켜 간다 — 붙여 띄웠더니 첫 문단의 칩이
   정보상자 「상태」 칸 위에 얹혔다(2026-08-26 스크린샷) ③ 창 폭 경계값을 «둘 필요가 없다».
   🔵 문단·목록은 70ch(=728px)에서 끝나고 칸은 890px 이라 평소엔 글자가 밀리지도 않는다. */
.cadd { float:right; margin:2px 0 2px 12px; padding:1px 8px;
  border:1px solid var(--line); border-radius:999px; background:var(--surface);
  color:var(--ink2); font-size:11.5px; line-height:1.6; white-space:nowrap;
  cursor:pointer; transition:color .12s, border-color .12s, background .12s, opacity .15s ease; }
/* 🔴 «흐리게»(opacity)로 «보이긴 하는데 안 보이는» 반투명 조용함은 여전히 안 만든다(실측
   대비가 라이트 2.13:1 · 다크 2.24:1 로 떨어졌던 그 자리) — 이건 «다른 문제»다: 마우스가
   그 문단에 없으면 완전히 감추고(0), 있으면 «항상 보이던 그 대비 그대로»(1) 낸다
   (2026-09-01 개편 · 관리자 확인 — 「지금은 모든 문단에 무조건 노출되고 있다」가 버그). */
.blk .cadd { opacity:0; pointer-events:none; }
.blk:hover .cadd, .blk:focus-within .cadd { opacity:1; pointer-events:auto; }
.cadd:hover { border-color:var(--accent); background:var(--surface2); color:var(--accent); }
/* 🔴 표«만» 예외로 붙여 띄워 «위»로 올린다 — 표는 `display:block; width:100%` 라 줄상자가
   없어서 흘려도 «안 피한다»(칩 위에 그대로 얹힌다). 표 위 여백(1.5em)에 들어간다. */
.blk.cwide .cadd { float:none; position:absolute; top:-23px; right:0; margin:0; }
/* 🔴 옛 900px 경계의 동작은 그대로 둔다 — 좁은 화면에선 흘리지 않고 줄 아래에 세운다 */
@media (max-width:900px) { .cadd { float:none; margin:0 0 0 6px; } }

/* 달린 코멘트 — 🔴 같은 블록 여러 건이 «하나»로 묶여 N건으로 보인다 */
.cthread { margin:6px 0 14px; }
.cthread > summary { display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  list-style:none; font-size:12px; color:var(--g-unverified);
  background:var(--g-unverified-bg); border:1px solid var(--g-unverified);
  border-radius:999px; padding:2px 10px; }
.cthread > summary::-webkit-details-marker { display:none; }
.cthread > summary:hover { text-decoration:underline; }
.cthread .cb-ico { font-size:11px; }
/* 🔵 카드가 생겼으니 왼쪽 막대는 «얇게» 남긴다 — 「이 묶음이 그 블록의 것」이라는
   표시라 지우진 않되, 카드와 둘이 겹쳐 시끄럽지 않게 한 겹 줄인다. */
.cmt-list { list-style:none; margin:8px 0 0; padding:0 0 0 10px;
  border-left:2px solid var(--g-unverified); }
/* 🔴 코멘트 하나 = «사각형» 하나 (관리자 2026-08-27 「사각형으로 감싼 거 맞아?」 ·
   「같은 영역에 코멘트가 각각 달려도 구분되게끔 명확하게 표시해 줘」).
   🔴 관리자가 그 둘을 «같이» 물은 이유가 이것이다 — 같은 블록의 두 코멘트가 왼쪽 막대
      하나로만 갈려 「하나처럼」 보였다. 카드가 서면 구분이 «저절로» 선다.
   🔵 그래서 앞서 넣었던 구분선(`.cmt + .cmt { border-top }`)은 «걷었다» — 카드와 겹친다.
   🔵 하단 「지나간 코멘트」(`.cret`)가 이미 쓰는 그 꼴(테두리+배경+둥근 모서리)에 맞춘다 —
      세 자리(본문 옆 · 하단 · 관리 목록)의 코멘트 생김새가 어긋나지 않게. */
.cmt { margin:0 0 8px; font-size:13.5px; line-height:1.65;
  border:1px solid var(--line); border-radius:7px; background:var(--surface);
  padding:9px 12px; }
.cmt:last-child { margin-bottom:0; }
.cmt-b { color:var(--ink); white-space:pre-wrap; }
.cmt-m { margin-top:2px; font-size:11.5px; color:var(--ink3); display:flex; gap:8px; }
.cmt-who { font-family:var(--mono); }

/* 「달기」 폼 — 하이퍼링크 삽입 창 같은 작은 상자. 🔴 JS 가 켤 때만 보인다 */
.cform { position:relative; z-index:20; margin:10px 0 14px; padding:12px 14px;
  background:var(--surface); border:1px solid var(--accent); border-radius:10px;
  box-shadow:0 10px 30px var(--sh-c); max-width:560px; }
.cform[hidden] { display:none; }
.cf-head { font-size:13px; font-weight:650; color:var(--ink); margin-bottom:6px; }
.cform textarea { width:100%; font-family:var(--sans); font-size:13.5px; line-height:1.6;
  padding:8px 10px; border-radius:8px; border:1px solid var(--line);
  background:var(--bg); color:var(--ink); resize:vertical; }
.cform textarea:focus { outline:none; border-color:var(--accent); }
.cf-btns { display:flex; gap:8px; margin-top:8px; }
/* 「수정」·「삭제」(본인) · 「내림」(권한자) — 🔴 하는 일이 달라서 말도 다르다 (D88) */
.cmt-del { display:inline; }
.cmt-del button, .cmt-act { padding:0; border:0; background:none; cursor:pointer;
  font-size:11.5px; color:var(--ink3); text-decoration:underline; font-family:inherit; }
.cmt-del button:hover, .cmt-act:hover { color:var(--g-unverified); }
.cmt-actions { margin-left:auto; display:flex; gap:10px; align-items:baseline; }
.cmt-actions .cmt-del { display:flex; align-items:baseline; }
/* 작성자만 보는 편집칸 — 🔴 서버가 그려 두고 JS 는 보이고 숨기는 것만 한다 */
.cmt-edit[hidden] { display:none; }
.cmt-edit textarea { width:100%; font-family:var(--sans); font-size:13.5px; line-height:1.6;
  padding:8px 10px; border-radius:8px; border:1px solid var(--line);
  background:var(--bg); color:var(--ink); resize:vertical; }
.cmt-edit textarea:focus { outline:none; border-color:var(--accent); }

/* ② 처리 내역 — 🔴 원래 글에 «딸린» 모양이어야 한다(별개 코멘트처럼 보이면 안 된다 ·
   관리자 확정 2026-08-26). 그래서 들여쓰고 왼쪽 띠로 원래 글에 매단다. */
.cmt-done { margin:6px 0 0 10px; padding:5px 10px; border-left:2px solid var(--line);
  background:var(--surface2); border-radius:0 6px 6px 0;
  font-size:11.5px; color:var(--ink3); display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; }
.cd-tag { font-weight:650; }
.cmt-done.d-accepted .cd-tag { color:var(--g-human, var(--accent)); }
.cmt-done.d-rejected .cd-tag { color:var(--ink3); }
.cd-who { font-family:var(--mono); }
.cd-note { flex-basis:100%; color:var(--ink2); font-size:12.5px; white-space:pre-wrap; }
/* 권한자의 판정칸 — 🔴 한마디는 «선택»이다(placeholder 가 그렇게 말한다) */
.cmt-judge[hidden] { display:none; }
.cmt-judge { margin:6px 0 0 10px; }
/* 🔴 `[type=text]` 로 «집어서» 걸었다 — R-14 관문 체크칸이 이 폼에 들어와 `input` 이 «둘»이
   됐다. 그냥 `input` 이면 체크칸이 `width:100%` + 패딩 + 테두리를 받아 «칸처럼» 커진다.
   🔵 옆의 `.cq-judge` 는 처음부터 이렇게 집어 걸려 있었다 — 두 폼을 같은 모양으로 맞춘다. */
.cmt-judge input[type=text] { width:100%; max-width:420px; font-family:var(--sans); font-size:13px;
  padding:6px 10px; border-radius:8px; border:1px solid var(--line);
  background:var(--bg); color:var(--ink); }
.cmt-judge input[type=text]:focus { outline:none; border-color:var(--accent); }
/* 🔴 **R-14 「관문」의 체크칸** — 판정 폼 «둘»이 같은 옷을 입는다(`.cmt-judge`·`.cq-judge`).
   🔴 «켠 것»이 눈에 띄어야 한다 — 이 한 칸이 위키 «본문»을 바꾸는 갈림길이라, 껐을 때와
   같은 무게로 보이면 사람이 자기가 켰는지를 화면에서 못 읽는다. 그래서 켜지면 글자를
   진하게 올린다(`:has` 는 이미 `.page-list.pickable` 에서 쓰던 방식이다).
   🔵 색을 새로 만들지 않는다 — `--ink2`→`--ink` 로 «있는 두 층»을 오간다(테마 3층 그대로). */
.cmt-keep { display:flex; gap:7px; align-items:center; margin:8px 0 0;
  font-size:12.5px; color:var(--ink2); cursor:pointer; user-select:none; }
.cmt-keep input[type=checkbox] { width:15px; height:15px; margin:0; flex:0 0 auto; cursor:pointer; }
.cmt-keep:has(input:checked) { color:var(--ink); font-weight:600; }
/* 🔵 처리가 끝난 묶음은 알약을 «가라앉힌다» — 「미확인」이 아니라서 눈을 덜 끈다 */
.cthread.done > summary { color:var(--ink3); background:var(--surface2); border-color:var(--line); }

/* 하단으로 «물러난» 코멘트 — ③ 반영 완료 + 앵커를 잃은 것. 🔴 0건이면 서버가 «안 그린다» */
.cretired { margin-top:3em; padding-top:20px; border-top:1px solid var(--line); }
.cretired h2 { font-size:17.5px; font-weight:650; color:var(--ink); margin:0 0 4px;
  display:inline; }
/* 🔴 접힘 손잡이 — 「미확인 코멘트」 묶음(`.cthread > summary`)과 «같은 몸짓»이다:
   기본 화살표를 지우고 ▸/▾ 를 직접 그린다. 🔵 접힌 채로도 수(`<b>`)가 보인다. */
.cretired > summary { list-style:none; cursor:pointer; display:flex; gap:8px;
  align-items:baseline; margin-bottom:4px; }
.cretired > summary::-webkit-details-marker { display:none; }
.cretired > summary::before { content:"▸"; color:var(--ink3); font-size:12px; }
.cretired[open] > summary::before { content:"▾"; }
.cretired > summary:hover h2 { color:var(--accent); }
/* 🔴 접혀 있을 땐 설명줄도 같이 숨는다 — `details` 가 알아서 한다(summary 밖이라서) */
.cret-lede { font-size:13px; color:var(--ink3); margin:0 0 14px; max-width:70ch; }
.cret-list { list-style:none; margin:0; padding:0; }
.cret { border:1px solid var(--line); border-radius:8px; padding:10px 14px; margin:0 0 10px;
  background:var(--surface); }
.cret-h { display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; margin-bottom:4px; }
/* 🔴 물러난 «사유»를 색으로도 가른다 — 「반영됐나 잘렸나」가 한눈에 보여야 한다 (D91) */
.cret-why { font-size:11.5px; font-weight:650; color:var(--ink3); }
.cret.k-done .cret-why { color:var(--g-human, var(--accent)); }
.cret.k-rej  .cret-why { color:var(--g-unverified); }
.cret.k-done { border-left:3px solid var(--g-human, var(--accent)); }
.cret.k-rej  { border-left:3px solid var(--g-unverified); }
.cret.k-lost { border-left:3px solid var(--line); }
.cret-also { font-size:11px; color:var(--ink3); padding:1px 7px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface2); }
.cret-blk { font-size:11.5px; color:var(--ink3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:52ch; }
.cret .cmt-list { border-left:0; padding-left:0; }

/* 🔴 보내는 동안 «막는다» — 커밋+push 가 1~3초 걸려서, 안 막으면 「눌렀는데 아무 일도
   없다」로 보이고 두 번 눌러 두 건이 들어간다(서버는 중복을 안 막는다 · app.js 주석). */
.sending { position:fixed; inset:0; z-index:200; background:var(--sh-c);
  display:flex; align-items:center; justify-content:center; cursor:progress; }
.sending-box { background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:14px 22px; font-size:13.5px; color:var(--ink); box-shadow:0 10px 30px var(--sh-c); }
.cmt-del button[disabled], .cmt-act[disabled], .cform button[disabled],
.cmt-edit button[disabled] { opacity:.5; cursor:progress; }

/* ── D · 관리자 「코멘트 된 문서」 (D97) ──────────────────────────────────
   🔴 이 화면의 «일»은 정렬이다 — 가장 오래 방치된 것이 위다. 색은 «방치»와
   «문단이 사라진 것» 둘만 세게 쓴다. 나머지는 목록 화면의 알약을 그대로 쓴다. */
.cq-doc { border:1px solid var(--line); border-radius:10px; background:var(--surface);
  padding:14px 18px; margin:0 0 16px; }
.cq-head { display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; }
.cq-title { font-size:16px; font-weight:650; color:var(--ink); }
.cq-title:hover { color:var(--accent); }
.cq-links { display:flex; flex-wrap:wrap; gap:14px; align-items:baseline;
  margin:6px 0 12px; font-size:12.5px; }
.cq-src { color:var(--ink3); }
.cq-src a { margin-right:2px; }
/* ── 「적재를 지금 돌려보기」 (R-13 · 관리자 2026-08-27) ── */
.cq-test { display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; margin:2px 0 10px; }
.cq-test .wn { font-size:12.5px; }
.ct-box { border:1px solid var(--line); border-left:3px solid var(--line); border-radius:6px;
  background:var(--surface); padding:12px 16px; margin:16px 0; }
.ct-box p { margin:0 0 6px; }
.ct-box p:last-child { margin-bottom:0; }
.ct-ok { border-left-color:var(--g-human); }
.ct-bad { border-left-color:var(--g-unverified); }
/* 🔵 「반드시 알아야 할 것」 상자 — 나쁜 일이 난 것이 아니라 «미리» 알리는 것이라 색을 갈랐다.
   🔴 새 토큰을 안 만든다 — `--g-machine` 은 이미 라이트/다크 두 벌이 있다(테마 3층 그대로). */
.ct-warn { border-left-color:var(--g-machine, var(--accent)); }

.ct-note { font-size:13.5px; color:var(--ink2); margin:14px 0 8px; }
/* 🔴 보고서는 «줄이 긴» 글이다(diff 가 들어온다) — 가로로 «넘치게» 두고 상자만 스크롤한다.
   접거나 줄바꿈하면 diff 가 다른 글이 된다. */
.ct-out { overflow-x:auto; white-space:pre; font-family:var(--mono); font-size:12.5px;
  line-height:1.55; background:var(--surface2); border:1px solid var(--line);
  border-radius:6px; padding:14px 16px; margin:0 0 16px; }
.ct-err { background:var(--surface); color:var(--ink2); }
.ct-what { margin:8px 0 20px; font-size:13.5px; color:var(--ink2); }
.ct-what summary { cursor:pointer; color:var(--accent); }
.ct-what p { margin:8px 0 0; }
.ct-again { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px;
  padding-top:18px; border-top:1px solid var(--line); }
.cq-list { list-style:none; margin:0; padding:0; }
.cq-item { border-top:1px solid var(--line); padding:12px 0 14px; }
.cq-item:first-child { border-top:0; padding-top:0; }
/* 🔴 문단이 사라진 것은 «왼쪽 띠»로 표시한다 — 관리 화면에서는 이것이 «할 일이 생긴» 신호다
   (독자 화면은 반대로 «물러나는» 신호다 · D91 ↔ D97). */
.cq-item.lost { border-left:3px solid var(--g-unverified); padding-left:12px; }
.cq-blk { font-size:11.5px; color:var(--ink3); margin-bottom:5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:64ch; }
.cq-lost { font-size:12.5px; color:var(--g-unverified); margin-bottom:6px; }
/* 🔴 **재료를 «그 자리에»** (R-23 ⓑ) — 「새 본문을 보고」라면서 새 본문을 안 보여 주면 사람이
   다른 화면으로 가서 스스로 찾아야 한다. 🔵 새 색을 안 만든다 — 링크는 기본 링크색 그대로. */
.cq-lost-go { display:block; margin-top:5px; font-size:12px; }
.cq-lost-go .wn { margin-left:2px; }
.cq-body { font-size:14px; line-height:1.65; color:var(--ink); white-space:pre-wrap; }
.cq-meta { display:flex; flex-wrap:wrap; gap:8px; align-items:baseline;
  margin-top:6px; font-size:12px; color:var(--ink3); }
.cq-judge { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px; }
.cq-judge input[type=text] { flex:1 1 22ch; min-width:0; padding:6px 10px; font:inherit;
  font-size:13px; border-radius:8px; border:1px solid var(--line);
  background:var(--bg); color:var(--ink); }
.cq-judge input[type=text]:focus { border-color:var(--accent); outline:none; }
/* 🔴 관문 체크칸은 «자기 줄»을 갖는다 — 한마디 칸과 판정 버튼 사이에 끼워 넣으면 좁은 폭에서
   버튼 사이로 끼어 들어가 「무엇에 붙은 체크칸인지」를 못 읽는다. */
.cq-judge .cmt-keep { flex-basis:100%; margin-top:2px; }
.cq-jump { display:inline-block; margin-top:8px; font-size:12px; }
/* 🔴 «정해진 것»은 정해진 것처럼 보여야 한다 (2026-08-27 관리자 「반영 상태의 UI가 표가 안 남
   … 뭔가 상태가 안 변한 것 같음」). 실제로 관리자는 판정이 «먹은 줄 모르고» 57초 뒤에 같은
   판정을 다시 눌렀다(okf `538a547` → `8514215` · handled_at 만 밀렸다). 🔴 병은 멱등이
   아니라 «화면이 결과를 안 말한 것»이었다.
   🔵 판정 폼은 숨기고 이 줄이 대신 선다 — D91 「판정은 고칠 수 있다」는 「반영 코멘트 수정」
   버튼으로 «한 단계 뒤»에 그대로 살아 있다. */
.cq-item.judged { background:var(--surface2); border-radius:6px;
  padding-left:12px; padding-right:12px; }
.cq-verdict { display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin-top:10px; font-size:12.5px; color:var(--ink2); }
.cq-verdict strong { color:var(--ink); }
.cq-redo { margin-left:auto; flex-shrink:0; font-size:12px; }
/* 🔴 좁은 폭에서 판정 줄이 «화면 밖»으로 나가지 않게 — 8/26 에 칩이 그 자리에서 걸렸다 */
@media (max-width:640px) {
  .cq-judge input[type=text] { flex:1 1 100%; }
}

/* ── B · 찾아보기 「더 보기」 (D98) ─────────────────────────────────────
   🔴 «링크»다 — JS 가 죽어도 눌러서 다음 판에 간다. 그래서 버튼처럼 보이되 링크다. */
.wb-more { margin:16px 0 0; text-align:center; }
.wb-more .btn { display:inline-block; }
/* 🔵 갈래 꼬리표 — 갈래 «구역»은 없앴지만 줄의 꼬리표는 남긴다(관리자 답 대기 · D98) */
.wh-list li > .k { font-size:11.5px; color:var(--ink3); margin-left:7px; }

/* ── C · 최근 바뀜의 «날짜 묶음» (D99) ─────────────────────────────────
   🔴 이 화면을 「찾아보기」와 다르게 만드는 것이 이 머리줄이다 — 343장을 한 덩어리로 주면
   같은 화면이 된다. 🔵 목록 폼 자체는 `/browse` 것을 그대로 쓴다. */
.rc-day { font-size:12.5px; font-weight:650; color:var(--ink2);
  padding:14px 0 6px; border-top:0; }
.rc-list > li.rc-day + li { border-top:0; }
.rc-list > li.rc-day:first-child { padding-top:0; }