/* 대지검토 화면 — UI 규약 B 표면(product). 설계서 flow-steps 3절, 화면 예시(flow_mock.html, 2026-10-12 사용자 확인)의 토큰.
   세 단계(① 주소·필지 → ② 토지이용계획 → ③ 규모)를 한 번에 하나만 크게 보인다.
   뉴트럴은 청색 기운(hue 255, chroma 0.002~0.012). 액센트는 현재 단계·주 버튼·고리 링크·선택 필지에만(10% 이하).
   판정 색은 늘 글자와 함께 쓴다(색만으로 구분하지 않는다). 서체는 SUIT 하나(화살표 글리프만 Segoe UI Symbol), 숫자는 tabular-nums.
   시그니처: '이 대지에 주는 영향' 고리 — ② 행에서 바뀌는 ③ 숫자로, ③ '남은 확인'에서 ② 행으로(.link.go, .hit).
   색 값은 :root 토큰에만 둔다. 규칙은 var(--…)만 쓴다. */
/* 화살표·펼침 글리프(→ ← ▸ ▾)만 기호 서체로 — SUIT의 화살표는 >처럼 보인다. 시스템 서체(local)라 내려받지 않는다 */
@font-face {
  font-family: "Arrow Glyphs";
  src: local("Segoe UI Symbol"), local("Apple Symbols"), local("Noto Sans Symbols 2"), local("DejaVu Sans");
  unicode-range: U+2190-21FF, U+25B8, U+25BE;
}
:root {
  --bg: oklch(0.975 0.004 255);
  --panel: oklch(0.995 0.002 255);
  --line: oklch(0.88 0.008 255);
  --ink: oklch(0.24 0.012 255);
  --muted: oklch(0.47 0.012 255);
  --accent: oklch(0.50 0.14 255);
  --accent-ink: oklch(0.99 0 0);
  --select: oklch(0.95 0.03 255);
  --ok: oklch(0.45 0.11 150);
  --cond: oklch(0.50 0.11 75);
  --need: oklch(0.50 0.16 30);
  --fail: oklch(0.45 0.17 25);
  --na: oklch(0.50 0.01 255);
  --need-bg: oklch(0.96 0.02 30);       /* 목업 hue 40 → 30: 크림 범위(40~100) 밖, '확인 필요'와 같은 계열 */
  --ai: oklch(0.40 0.07 200);           /* 'AI 검토 — 미확인' 표지 글자·테 — 판정 색(녹·황·적·회)·액센트(청 255)와 다른 청록 회색 */
  --ai-bg: oklch(0.95 0.015 200);       /* 그 표지 바탕(대비 ≥ 4.5:1) */
  --map: oklch(0.93 0.006 255);
  --off-bg: oklch(0.93 0.004 255);      /* 꺼진 단추 바탕 — --muted 글자와 대비 5.5:1(≥4.5:1, 계산함). 흐림은 opacity 대신 이 색으로 */
  --scrim: oklch(0.24 0.012 255 / 0.72);  /* 그림 크게 보기 창 뒤 가림 - 본문 글자색(--ink)과 같은 색상, 투명도만 */
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 48px;
  --z-map: 0; --z-sticky: 10; --z-dropdown: 20; --z-status: 30;
  --radius: 4px;
  --font: "Arrow Glyphs", "SUIT", "Apple SD Gothic Neo", "Segoe UI Symbol", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.6 var(--font); font-variant-numeric: tabular-nums;
  word-break: keep-all; overflow-wrap: anywhere; letter-spacing: 0;
}
h1, h2, h3 { text-wrap: balance; margin: 0; letter-spacing: 0; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; letter-spacing: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--muted); }
.nb { white-space: nowrap; }
.count { font-size: 13px; font-weight: 400; color: var(--muted); }
.empty { color: var(--muted); }

/* ── 단추·입력 */
.btn {
  display: inline-flex; align-items: center; height: 32px; padding: 0 var(--s3); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.btn:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--select); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.primary:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--ink); border-color: var(--ink); }
.btn.block { width: 100%; justify-content: center; }
/* 꺼진 단추(공통) — 회색 바탕·점선 테·흐린 글자(--muted)·보통 굵기. 주 단추(.primary)의 액센트도 지운다(사용자 화면 확인 2026-10-20:
   꺼진 [대지 기하 조회]가 보통 단추처럼 보였다) */
.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--off-bg); border-color: var(--line); border-style: dashed; color: var(--muted); font-weight: 400; cursor: not-allowed;
}
.mini {
  height: 22px; padding: 0 var(--s2); font-size: 12.5px; line-height: 1; vertical-align: baseline;
  background: var(--panel); color: var(--accent); border: 1px solid var(--accent); border-radius: var(--radius); cursor: pointer;
}
.mini:hover, .mini[aria-expanded="true"] { background: var(--select); }
.mini:disabled { color: var(--muted); border-color: var(--line); border-style: dashed; background: var(--off-bg); cursor: not-allowed; }
.link {
  padding: 0; background: none; border: 0; color: var(--accent); cursor: pointer; text-align: left;
  text-decoration: underline; text-underline-offset: 2px;
}
.link:hover { text-decoration-thickness: 2px; }
.link.go { display: inline-block; white-space: nowrap; }
input, select {
  height: 32px; padding: 0 var(--s2); background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
}
input::placeholder { color: var(--muted); }

/* ── 판정·출처 표지: 글자 + 색(+ 테두리 모양). 색만으로 구분하지 않는다 */
.st {
  display: inline-block; padding: 0 var(--s2); font-size: 12px; line-height: 1.5; font-weight: 600;
  border: 1px solid currentColor; border-radius: var(--radius); white-space: nowrap; vertical-align: baseline;
}
.st.ok { color: var(--ok); }
.st.cond { color: var(--cond); }
.st.need { color: var(--need); background: var(--need-bg); }
.st.fail { color: var(--fail); font-weight: 800; text-decoration: underline; }
.st.na { color: var(--na); }
.tag {
  display: inline-block; margin-left: var(--s1); padding: 0 var(--s1); font-size: 12px; line-height: 1.5; font-weight: 400;
  color: var(--muted); border: 1px solid var(--muted); border-radius: var(--radius); white-space: nowrap; vertical-align: baseline;
}
td > .tag:first-child { margin-left: 0; }
.tag.api { border-style: solid; }
.tag.manual { border-style: dashed; color: var(--ink); border-color: var(--ink); }
.tag.calc { border-style: dotted; }
.tag.registry, .tag.data { border-style: double; border-width: 3px; }
.cite { color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.trust { color: var(--need); font-weight: 600; }

/* ── 위 줄: 제목 · 단계 막대 · 사업 목록 · 면책(늘 보임) */
.topbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  min-height: 53px; display: flex; align-items: center; gap: var(--s4);
  padding: 0 var(--s4); background: var(--panel); border-bottom: 1px solid var(--line);
}
.topbar h1 { flex: none; font-size: 16px; font-weight: 700; white-space: nowrap; }   /* 사업 이름이 길어도 '대지검토'가 두 줄로 깨지지 않게 */
.stepbar { display: flex; align-items: center; align-self: stretch; }
.stepbar button {
  align-self: stretch; padding: 0 var(--s3); background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--ink); cursor: pointer; white-space: nowrap;
}
.stepbar button[aria-current="step"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.stepbar button:disabled { color: var(--muted); cursor: not-allowed; }
.stepbar .rule { width: var(--s4); height: 1px; background: var(--line); }
.topbar .right { margin-left: auto; display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.topbar select { max-width: 320px; min-width: 0; }
.topbar .final { font-size: 14px; font-weight: 700; white-space: nowrap; }
.keynote { padding: var(--s2) var(--s4); background: var(--need-bg); border-bottom: 1px solid var(--line); }
.status { padding: 2px var(--s4); min-height: 1.6em; font-size: 13px; color: var(--muted); }
.status.error { color: var(--need); font-weight: 700; }

/* 로딩 막대 — 이 화면의 유일한 모션(VWorld 조회·계산 대기를 알린다). 줄이기 설정이면 멈춘 막대 */
.busy { position: fixed; top: 0; left: 0; right: 0; height: 3px; overflow: hidden; background: var(--select); z-index: var(--z-status); }
.busy::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%; background: var(--accent);
  animation: busy 1.4s cubic-bezier(0.25, 1, 0.5, 1) infinite;
}
@keyframes busy { from { transform: translateX(-100%); } to { transform: translateX(340%); } }

/* ── 공통 쪽 머리 */
.wrap { max-width: 1240px; margin: 0 auto; padding: var(--s3) var(--s3) var(--s5); }
.pagehead { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4); margin-bottom: var(--s2); }
.pagehead h2 { font-size: 20px; font-weight: 700; }
.pagehead .sum { margin-top: var(--s1); color: var(--muted); }
.pagehead .sum .st { margin-left: 2px; }
.pagehead .acts { display: flex; gap: var(--s2); flex: none; }
h3.sec {
  margin: var(--s5) 0 var(--s2); padding-bottom: var(--s1);
  font-size: 15px; font-weight: 700; border-bottom: 1px solid var(--line);
}
.pagehead + * > h3.sec:first-child, .pagehead + h3.sec { margin-top: var(--s4); }

/* ── 표 — 법규 데이터는 카드가 아니라 괘선 행이다 */
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* 표 상자: 칸 폭의 합이 화면보다 넓으면 표만 이 상자 안에서 옆으로 밀린다 — 쪽 전체는 가로로 밀리지 않는다.
   표마다 최소 폭을 둬 마지막 칸(너비 자동)이 0으로 줄어 머리글이 옆 칸에 겹치지 않게 한다. 넓은 화면에서는 100% 그대로 */
/* position: relative — 표 안의 화면 읽기용 숨은 글자(.vh, position: absolute)가 상자 밖 쪽 폭을 늘리지 않게(390px 실측) */
.tscroll { position: relative; overflow-x: auto; overscroll-behavior-x: contain; }
.t3 { min-width: 760px; } .t4 { min-width: 680px; } .t-land { min-width: 680px; } .tord { min-width: 720px; }
th {
  padding: var(--s2) var(--s3); text-align: left; font-size: 12.5px; font-weight: 600; color: var(--muted);
  border-bottom: 1px solid var(--muted); vertical-align: bottom;
}
td { padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); vertical-align: top; }
.num { text-align: right; }
tr[id], li[id], .verdict { scroll-margin-top: 96px; }
tr.has-sub > td { border-bottom: 0; }
td.sub { padding-top: 0; color: var(--muted); font-size: 12.5px; }
td.sub p + p { margin-top: 2px; }
td.sub p, .block-need p, .help p { max-width: 75ch; }      /* 한글 40~50자(B-2) */
.help { margin-bottom: var(--s2); }               /* 체크리스트 확인 도움(checkHelp) — 문장 줄 뒤 입력 칸과 띄운다 */
td.formcell { background: var(--need-bg); }
tr.hit > td, tr.hit > th, tr.hit.has-sub + tr.sub-row > td, li.hit { background: var(--select); }
/* 입력 칸으로 가기(I(WEB-1·4)) — 펼친 ② 항목 칸, ④ 주출입·차량 진입 칸, ④ 변 표 */
.m4-entry .field.hit, #m4-edges.hit { background: var(--select); }
.reason { margin-top: 2px; color: var(--muted); font-size: 12.5px; }
/* 입력 칸 없는 확인 필요 행의 확인처 한 줄(flow check_where) — 사유(흐린 글자)와 달리 할 일이라 본문 색 */
.where { margin-top: 2px; color: var(--ink); font-size: 12.5px; }
/* ② 근거 줄 아래 근거 고시(flow notice) — 근거 줄과 같은 흐린 글자, 기관 추정·미확인은 .trust 표지 */
.notice { margin-top: 2px; }
.acts-inline { display: inline-flex; flex-wrap: wrap; gap: var(--s1) var(--s2); align-items: baseline; margin-left: var(--s1); }

/* ── ① 주소·필지: 지도 크게 + 오른쪽 좁은 칸 */
.s1 { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s4); padding: var(--s3) var(--s4) var(--s5); align-items: start; }
.searchrow { position: relative; display: flex; gap: var(--s2); margin-bottom: var(--s2); }
.searchrow input { flex: 1; min-width: 0; }
.results {
  position: absolute; top: calc(100% + var(--s1)); left: 0; right: 0; z-index: var(--z-dropdown);
  margin: 0; padding: var(--s1) 0; list-style: none; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); max-height: 320px; overflow: auto;
}
.results button {
  display: block; width: 100%; padding: var(--s2) var(--s3); text-align: left; white-space: normal;
  background: none; border: 0; cursor: pointer;
}
.results button:hover, .results button:focus-visible { background: var(--select); }
.results .road { display: block; color: var(--muted); font-size: 12px; }
.results .empty { padding: var(--s2) var(--s3); }
.seg { display: inline-flex; flex: none; }
.seg button { height: 32px; padding: 0 var(--s3); background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
.seg button:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.seg button:last-child { border-radius: 0 var(--radius) var(--radius) 0; margin-left: -1px; }
.seg button[aria-pressed="true"] { position: relative; background: var(--select); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.maptools { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; margin-bottom: var(--s2); }
.maptools .seg button { height: 28px; font-size: 13px; }
.note { color: var(--muted); font-size: 12.5px; }
.map {
  position: relative; isolation: isolate; z-index: var(--z-map); height: 600px; min-height: 320px;
  background: var(--map); border: 1px solid var(--line); overflow: hidden;
}
.map .maperr { padding: var(--s4); color: var(--muted); }
.leaflet-container { font: inherit; background: var(--map); }
/* 소수 배율(Windows 125%·150% — devicePixelRatio 1.25·1.5)에서 타일 경계가 반 픽셀 어긋나 흰 가로줄이 생기던 결함(사용자 제보 2026-10-20,
   ①·④ 지도 공통). 투명 outline으로 타일을 따로 그리게 한다. 타일을 0.5px 키워 겹치는 방법(256.5px)은 헤드리스 Edge 1.25·1.5배
   측정에서 오히려 모든 타일 경계에 줄이 생겨 쓰지 않는다(2026-10-20 — 크기를 바꾸면 이미지 가장자리가 섞인다) */
.leaflet-tile-container img.leaflet-tile { outline: 1px solid transparent; }
.leaflet-tooltip.lot { background: var(--panel); color: var(--ink); border: 1px solid var(--accent); box-shadow: none; padding: 0 4px; font-size: 12px; }
.side { background: var(--panel); border: 1px solid var(--line); padding: var(--s3); }
.side h2 { font-size: 15px; font-weight: 700; margin-bottom: var(--s2); }
.side th, .side td { padding: var(--s2) var(--s1); }
.picked col.c1 { width: 92px; } .picked col.c2 { width: 44px; } .picked col.c4 { width: 52px; }
.picked tr.total td { border-bottom: 0; font-weight: 600; }
.picked td.empty { text-align: left; }
.side .use { margin: var(--s3) 0; }
.side .note { margin-top: var(--s2); }

/* ── ② 토지이용계획: 할 일(번호) → 영향별 묶음(판정에 쓴 지정 · 별도 검토 · 규모·용도와 무관 — 접힘). 사용자 승인 2026-10-20
   (시안 B 순서 + 시안 A 펼치는 행). 행은 단추(aria-expanded) — 넓은 폭은 6칸 격자, 좁은 폭(760px 이하)은 한 단으로 쌓는다(가로 밀림 없음).
   할 일 번호 원(.n)은 숫자 글자 + 화면 읽기용 '할 일' — ③ 확정 조건 칸과 같은 번호(서버 build_todos). 새 색 없이 기존 토큰만 */
.todos { margin-top: var(--s2); }
.todos > h3.sec:first-child, .s3todos > h3.sec:first-child { margin-top: var(--s3); }   /* 첫 판정 띠 바로 아래 — 큰 빈칸 없이 */
.todolist { margin: 0; padding: 0; list-style: none; }
.todo {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--s1) var(--s3); align-items: start;
  padding: var(--s3) var(--s2); border-bottom: 1px solid var(--line);
}
.todo-n { padding-top: 2px; }
.todo-body p + p { margin-top: 2px; }
.todo-what { font-size: 15px; line-height: 1.5; }
.todo-links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin-top: var(--s1); }
.todo-acts { display: flex; gap: var(--s2); }
.todo-form { grid-column: 1 / -1; padding: var(--s2) var(--s3); background: var(--need-bg); }
.todo-form .head, .inform .head { margin-bottom: var(--s2); }
.n {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; background: var(--ink); color: var(--panel); font-size: 12px; font-weight: 700; line-height: 1;
}
.ns { display: inline-flex; flex-wrap: wrap; gap: var(--s1); vertical-align: middle; }
/* 할 일 위 한 줄들(사용자 결정 2026-10-21): 토지이음 조회 실패 + [다시 조회], 다른 할 일 대기(입력 단추 없음). 새 색 없이 기존 토큰만 */
.failline, .waitline { margin-top: var(--s1); font-size: 12.5px; }
.failline { color: var(--need); font-weight: 600; }
.failline .btn { margin-left: var(--s1); font-weight: 400; color: var(--ink); }
.waitline { color: var(--ink); }
/* 자동 값으로 닫은 칸 — 값마다 출처 표지(자동조회·계산값), 출처 문장은 작게 */
.autoval { margin-bottom: var(--s2); }
.autoval p + p { margin-top: 2px; }
.autoval .cite { max-width: 75ch; }
/* 설계안이 정해지면 확인 — 번호 없는 묶음(번호 칸은 비운다) */
.later { margin-top: var(--s3); }
.laterlist { margin: 0; padding: 0; list-style: none; }
.link.go.todoref { white-space: normal; }
.todoref .n { margin-right: 2px; }
.lugroup { margin-top: var(--s4); }
.lugroup h3.sec { margin-top: 0; }
.gnote { margin-bottom: var(--s2); color: var(--muted); font-size: 12.5px; }
.gnames { margin-bottom: var(--s2); font-size: 13px; }
.grouptoggle {
  display: inline-flex; align-items: baseline; gap: var(--s1); padding: 0; background: none; border: 0;
  color: var(--ink); font-weight: 700; text-align: left; cursor: pointer;
}
.lulist { margin: 0; padding: 0; list-style: none; }
.luhead, .lurow {
  display: grid; grid-template-columns: 16px minmax(150px, 210px) 72px 132px minmax(0, 1fr) 104px; gap: var(--s1) var(--s3);
  padding: var(--s2);
}
.luhead { font-size: 12.5px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--muted); }
.lu { border-bottom: 1px solid var(--line); }
.lurow {
  position: relative; width: 100%; align-items: baseline; background: none; border: 0; color: var(--ink); text-align: left;
  cursor: pointer;
}
.lurow:hover { background: var(--select); }
.lurow .c-meta { display: contents; }
.lurow .c-caret { grid-column: 1; grid-row: 1; } .lurow .c-name { grid-column: 2; grid-row: 1; }
.lurow .c-touch { grid-column: 3; grid-row: 1; } .lurow .c-status { grid-column: 4; grid-row: 1; }
.lurow .c-effect { grid-column: 5; grid-row: 1; } .lurow .c-dc { grid-column: 6; grid-row: 1; }
.c-caret::before { content: "▸"; color: var(--muted); }
[aria-expanded="true"] > .c-caret::before { content: "▾"; }
.c-effect { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.law { white-space: nowrap; color: var(--muted); font-size: 12.5px; font-weight: 400; }
.lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ludetail {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2) var(--s5);
  padding: var(--s1) var(--s2) var(--s3) calc(16px + var(--s2) + var(--s3));
}
.dcol > * + * { margin-top: var(--s1); }
.dcol.dwide { grid-column: 1 / -1; padding-top: var(--s2); border-top: 1px solid var(--line); }
.dcol p, .detail p { max-width: 75ch; }
.dlabel { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.dcol > .dlabel:not(:first-child) { margin-top: var(--s3); }
.ludetail .bases, .detail .bases { margin: 0; padding: 0; list-style: none; }
.ludetail .bases li + li { margin-top: 2px; }
.inform { padding: var(--s2) var(--s3); background: var(--need-bg); }
.block-need { margin-top: var(--s4); padding: var(--s2) var(--s3); background: var(--need-bg); border: 1px solid var(--line); }
.block-need p + p { margin-top: var(--s1); }
.excluded { margin: var(--s2) 0 0; color: var(--muted); font-size: 12.5px; }
.t-land col.c1 { width: 92px; } .t-land col.c2 { width: 64px; } .t-land col.c4 { width: 180px; } .t-land col.c5 { width: 200px; }
.after-table { margin-top: var(--s2); }

/* 입력 칸 — 할 일·② 행 [고치기] 자리에서 넣고 [다시 계산] */
.check { display: flex; flex-direction: column; gap: var(--s2); }
.check .rows { display: flex; flex-direction: column; gap: var(--s2); }
.check .row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2) var(--s3); }
.check > .link { align-self: flex-start; }
.field { display: inline-flex; flex-direction: column; gap: 2px; }
.field > span:first-child { font-size: 12.5px; font-weight: 600; }
.field .unit { display: inline-flex; align-items: center; gap: var(--s1); }
.field input.num { width: 96px; text-align: right; }
.field input.text { width: 260px; max-width: 100%; }
.check .actions { display: flex; gap: var(--s2); align-items: center; }
.check .err { color: var(--need); font-weight: 700; }
.check .err:empty { display: none; }
.readonly { color: var(--muted); font-size: 12.5px; }
.check .hint { max-width: 75ch; color: var(--muted); font-size: 12.5px; }
/* ② 입력 칸 제안(계약 input-suggest) — 칸 위 옅은 바탕 한 줄: 제안(표지) 이름: 값 [이 값으로 채우기] 출처·주의(작은 글).
   같은 group은 '둘 중 하나' 묶음으로 나란히(좁은 폭은 아래로). 경고는 기존 .vwarn 꼴. 새 색 토큰 없음 */
.suggest { display: flex; flex-direction: column; gap: var(--s1); }
.sline { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); padding: var(--s1) var(--s2);
  background: var(--select); border: 1px solid var(--line); border-radius: var(--radius); }
.sline .shead { font-weight: 600; font-variant-numeric: tabular-nums; }
.sline .cite { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.sgroup { display: flex; flex-direction: column; gap: var(--s1); }
.sgroup-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--s1) var(--s2); }
.sdone { max-width: 75ch; font-size: 12.5px; }
.sdone:empty { display: none; }
.sdone .st { margin-right: var(--s1); }

/* ── ③ 규모: 이 숫자들을 바꾸는 할 일 → 계산 표(항목 | 값 | 어떻게 | 확정 조건 — 행 머리 단추로 근거 원문 펼침) → 조례 기준을
   확인할 값. 값은 표 안에서 16px 굵게(큰 숫자 타일 없음). 값 옆 판정 글자·출처 표지는 그대로 */
.t3 col.c1 { width: 190px; } .t3 col.c2 { width: 250px; } .t3 col.c4 { width: 160px; }
.t3 .val { font-size: 16px; font-weight: 600; }
.t3 .val .st { margin-left: var(--s2); font-size: 12px; }
.t3 .val .st:first-child { margin-left: 0; }
.t3 .val .plain { font-size: 14px; font-weight: 400; }
.t3 .val .zone { display: block; }
.t3 .val .path { display: block; }              /* 해석 갈래 — 갈래마다 한 줄(값 + 판정) */
.t3 .val .src { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; }
.t3 .val .src .tag { margin-left: 0; }
.t3 tbody th, .tord tbody th {
  padding: var(--s2) var(--s3); font-size: 14px; font-weight: 600; color: var(--ink); text-align: left;
  border-bottom: 1px solid var(--line); vertical-align: top;
}
.t3 tr.item { cursor: pointer; }
.t3 tr.item:hover > * { background: var(--panel); }
.t3 tr.open > * { border-bottom: 0; }
.t3 .how p + p { margin-top: 2px; }
.t3 .how .cite { margin-top: var(--s1); }
.t3 .fix .ns { margin-right: var(--s1); }
.fstate { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.t3 td.detail { padding-top: 0; }
.dtodo { margin-bottom: var(--s2); }
.dtodo .dlabel + p { margin-top: 2px; }
.detail .dlabel { margin-top: var(--s2); }
.s3todo { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s1); }
.verdict.short { margin-bottom: var(--s2); padding: var(--s2) 0; }
.tord col.c1 { width: 150px; } .tord col.c3 { width: 250px; } .tord col.c4 { width: 120px; }
.tord td p + p { margin-top: 2px; }
.tabs { display: flex; gap: var(--s1); margin-bottom: var(--s2); }
.tabs button {
  height: 28px; padding: 0 var(--s3); background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); cursor: pointer;
}
.tabs button[aria-selected="true"] { background: var(--select); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.t4 col.c1 { width: 240px; } .t4 col.c2 { width: 110px; } .t4 col.c4 { width: 280px; }
.t4 tr.item { cursor: pointer; }
.t4 tr.item:hover > td { background: var(--bg); }
.t4 tr.open > td { border-bottom: 0; }
.t4 .oneline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t3 .rowbtn, .t4 .rowbtn { padding: 0; background: none; border: 0; color: var(--ink); font-weight: 600; text-align: left; cursor: pointer; }
.t3 .rowbtn::before, .t4 .rowbtn::before { content: "▸ "; color: var(--muted); }
.t3 .rowbtn[aria-expanded="true"]::before, .t4 .rowbtn[aria-expanded="true"]::before { content: "▾ "; }
.t4 td.detail { padding-top: 0; }
.detail .full { max-width: 75ch; }
.detail .bases { margin: var(--s2) 0 0; padding: 0; list-style: none; }
.detail .bases li + li { margin-top: var(--s1); }
.detail .excerpt { display: block; color: var(--muted); font-size: 12.5px; }
.detail .check { margin-top: var(--s2); padding: var(--s2) var(--s3); background: var(--need-bg); }
dl.record { display: grid; grid-template-columns: 140px minmax(0, 1fr); margin: 0; }
dl.record dt, dl.record dd { margin: 0; padding: var(--s1) var(--s3); border-bottom: 1px solid var(--line); font-size: 13px; }
dl.record dt { color: var(--muted); font-weight: 600; }

/* ── 문서 검토(AI) — 설계서 zone-document-review 3절·Z22·Z23. 'AI 검토 — 미확인'은 각진(radius 0) 채운 표지 + 글자 —
   자동조회(실선)·수동입력(파선)·계산값(점선) 테와 모양이 다르다. 카드는 상자가 아니라 괘선으로 나눈 묶음이고 값은 표다.
   시그니처: 원문 발췌 안에서 코드가 원문 대조한 값 글자를 짚는다(mark — AI 해석값은 짚지 않는다). 진행은 글자로(모션 없음) */
.tag.ai { border: 1px solid var(--ai); border-radius: 0; color: var(--ai); background: var(--ai-bg); font-weight: 600; }
.aibox { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); min-width: 0; }
.aibox label { font-size: 13px; font-weight: 600; }
.aibox select { height: 28px; }
.ai-login { font-size: 12.5px; color: var(--muted); }
.aihelp { padding: var(--s2) var(--s4) var(--s3); background: var(--panel); border-bottom: 1px solid var(--line); }
.aihelp p { max-width: 75ch; }
/* 명령 글('--provider')이 서체 합자로 대시처럼 보이지 않게 — 복사하는 글자와 보이는 글자가 같아야 한다 */
.aihelp, .docline, .ai-login { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.aihelp .prov + .prov { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px solid var(--line); }
.aihelp .cmdrow { display: flex; align-items: center; gap: var(--s2); max-width: 900px; margin-top: var(--s1); }
.aihelp input.cmd { flex: 1; min-width: 0; height: 28px; font-size: 12.5px; }
.aihelp > .note { margin-top: var(--s3); }
.docrev { margin-top: var(--s1); }
.docline { font-size: 12.5px; }
.docline + .docline, .docmore { margin-top: 2px; }   /* .docmore — '문서 N개 모두 보기'로 펴는 나머지 문서 줄(② 펼친 행) */
.progress { color: var(--ink); font-weight: 600; }
.docreview { margin-top: var(--s4); }
.runline { color: var(--muted); font-size: 12.5px; }
.runline .progress, .runline .mini { margin-left: var(--s1); }
.field.inline { flex-direction: row; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.rtabs { flex-wrap: wrap; margin-top: var(--s3); }
.rtabs .count { margin-left: 2px; font-size: 12px; }
.adopted { margin-top: var(--s2); padding: var(--s2) var(--s3); background: var(--select); border: 1px solid var(--line); }
.adopted p + p { margin-top: 2px; }
.rcard { padding: var(--s3) 0 var(--s4); border-bottom: 1px solid var(--line); }
.rhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); }
.rloc { font-weight: 600; }
.st.yes { color: var(--ink); }
.st.part { color: var(--cond); }
.st.unknown { color: var(--need); background: var(--need-bg); }
.st.no { color: var(--na); }
.quote {
  margin: var(--s2) 0; padding: var(--s2) var(--s3); max-width: 75ch;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
}
.quote figcaption { font-size: 12px; font-weight: 600; color: var(--muted); }
.quote blockquote { margin: 2px 0 0; line-height: 1.7; white-space: pre-wrap; }
.quote mark { background: var(--select); color: var(--ink); text-decoration: underline 2px var(--accent); text-underline-offset: 3px; }
.rsum { max-width: 75ch; margin-bottom: var(--s2); }
.tv { min-width: 640px; } .trelax { min-width: 560px; }
.tv col.c1 { width: 200px; } .tv col.c2 { width: 150px; } .tv col.c3 { width: 110px; } .tv col.c4 { width: 170px; }
.trelax col.c1 { width: 140px; } .trelax col.c2 { width: 200px; }
.trelax { margin-top: var(--s2); }
.adoptwrap { margin-top: var(--s2); padding: var(--s2) var(--s3); max-width: 900px; background: var(--need-bg); border: 1px solid var(--line); }
.adoptbox { display: flex; flex-direction: column; gap: var(--s2); }
.adoptbox .actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.adoptbox .err { color: var(--need); font-weight: 700; }
.adoptbox .err:empty { display: none; }
.pairs { display: flex; flex-direction: column; gap: var(--s1); }
.pair, .confirm { display: block; cursor: pointer; }
.pair input, .confirm input { height: auto; margin: 0 var(--s1) 0 0; vertical-align: -2px; }
.creasons { margin: 0; padding-left: var(--s4); }
.creasons li { color: var(--ink); font-size: 12.5px; line-height: 1.5; }
.creasons li + li { margin-top: 2px; }
.racts { margin-top: var(--s2); }
.rcard .check { margin-top: var(--s2); padding: var(--s2) var(--s3); background: var(--need-bg); }
.field input.wide { width: 520px; }
details.na-cards { margin-top: var(--s3); }
details.na-cards > summary { padding: var(--s2) 0; color: var(--muted); font-weight: 600; cursor: pointer; }
details.na-cards[open] > summary { border-bottom: 1px solid var(--line); }
.rfinal { margin-top: var(--s4); font-weight: 700; }

/* ── 그림 근거(2026-10-14 그림 함께 읽기, 설계서 Z30) - 원문 발췌 옆에 작은 그림(1px 괘선 틀, 상자 속 상자 없음), 누르면 <dialog>로
   크게 확대·이동. 'AI 그림 판독 · 확인 필요'는 글자 + .st.need 테두리·바탕. 뒤 가림은 토큰(--scrim)뿐이고 애니메이션·흐림은 없다.
   그림은 늘 max-width: 100%(좁은 폭에서 가로로 밀리지 않는다) */
.qrow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s1) var(--s3); }
.qrow .quote { flex: 1 1 32ch; min-width: 0; }
.figs { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0; max-width: 100%; }
.fig { margin: 0; width: 180px; max-width: 100%; }
.fthumb {
  display: block; width: 100%; max-width: 100%; padding: 0; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); cursor: zoom-in;
}
.fthumb:hover { background: var(--select); }
.fimg { display: block; width: 100%; max-width: 100%; height: auto; }
.fmiss { display: block; padding: var(--s3) var(--s2); color: var(--need); font-size: 12.5px; }
.fig figcaption { margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.adoptfig .fig { margin-top: var(--s1); }
.figline { max-width: 75ch; }
dialog.figbox {
  width: min(96vw, 1400px); height: min(92vh, 960px); max-width: 96vw; max-height: 92vh; padding: 0;
  color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
dialog.figbox[open] { display: flex; flex-direction: column; }
dialog.figbox::backdrop { background: var(--scrim); }
.fb-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s3);
  padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line);
}
.fb-title { min-width: 0; margin: 0; font-size: 14px; font-weight: 700; }
.fb-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.fb-zoom { min-width: 5.5em; color: var(--muted); font-size: 12.5px; text-align: right; }
.fb-view {
  position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--bg);
  cursor: grab; touch-action: none; user-select: none;
}
.fb-view.dragging { cursor: grabbing; }
.fb-img { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; -webkit-user-drag: none; }
.fb-miss { padding: var(--s4); color: var(--need); font-weight: 600; }
.fb-hint { padding: var(--s1) var(--s3); border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }

/* ── 지정 검토 화면(설계서 Z61·Z69, 과제 O17) — R1 2.1 순서(경고 → 머리 → 한 줄 결론 → 값과 판정 → 근거 → 갈래 → 단서·완화 →
   확인 필요 → ▶ 요약 → 기록). 한 줄 결론과 ▶ 요약은 같은 문장·같은 띠(상자 없는 회색 띠 — 검토서 ▶ 띠와 같은 꼴, 문장 전체는 굵게 하지
   않고 띠 안 값만 굵게). 강조는 한 수단에 한 뜻: 굵게 = 값, 밑줄 + '[단서]' = 단서 낱말, .st 글자 = 판정·상태, 괄호 글자 = 값 출처
   표지. 카드·색칠한 행·새 색 토큰 없음 — 판정 색은 늘 글자와 함께. 시그니처: 원문 속 값(굵게)과 단서 표지 */
.zline { margin-top: var(--s1); font-size: 12.5px; }
.zline .zlabel { color: var(--muted); }
.zline .zstate { font-weight: 600; }
.zline .zstate.need { color: var(--need); }
.routes { margin-top: 2px; font-size: 12.5px; }
.routes-body { margin-top: var(--s1); }
.rlist { margin: var(--s1) 0 0; padding: 0; list-style: none; max-width: 75ch; }
.rlist li + li { margin-top: var(--s2); }
.rlist .tier { color: var(--muted); }
.band { margin: var(--s2) 0 var(--s3); padding: var(--s2) var(--s3); max-width: 120ch; background: var(--map); line-height: 1.7; }
.band strong { font-weight: 700; }
.zaxes { margin-top: var(--s2); }
.tzv { min-width: 860px; }
.tzv col.c1 { width: 80px; } .tzv col.c2 { width: 120px; } .tzv col.c3 { width: 200px; } .tzv col.c4 { width: 110px; }
.tzv col.c5 { width: 160px; } .tzv col.c6 { width: 70px; }
.mark { font-size: 12.5px; }
.tza { min-width: 900px; }
.tza col.c1 { width: 190px; } .tza col.c2 { width: 150px; } .tza col.c3 { width: 170px; } .tza col.c5 { width: 190px; }
.inq { margin: 0; line-height: 1.7; }
.tzb { min-width: 820px; }
.tzb col.c1 { width: 90px; } .tzb col.c2 { width: 64px; } .tzb col.c3 { width: 240px; } .tzb col.c4 { width: 160px; }
.tzb col.c5 { width: 100px; }
.cue { margin-right: 2px; color: var(--need); font-size: 12px; font-weight: 600; }
.quote u, .inq u { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.quote strong, .inq strong, .tzv strong, .tzb strong, .tza strong { font-weight: 700; }
.zbases, .zprov { margin: 0; padding: 0; list-style: none; }
.zbases li + li, .zprov li + li { margin-top: var(--s3); }
.zchecks { margin: 0; padding-left: var(--s4); }
.zchecks li + li { margin-top: var(--s3); }
.zchecks p, .zbases p, .zprov p { max-width: 75ch; }
.cite-doc { color: var(--ink); }
.zstart { margin-top: var(--s3); }
details.zrecord { margin-top: var(--s4); }
details.zrecord > summary { padding: var(--s2) 0; color: var(--muted); font-weight: 600; cursor: pointer; }
details.zrecord[open] > summary { border-bottom: 1px solid var(--line); }
details.zrecord ul { margin: var(--s1) 0 var(--s2); padding-left: var(--s4); font-size: 12.5px; }
.sublabel { margin-top: var(--s2); font-size: 12.5px; font-weight: 600; }
.tzp { min-width: 760px; }
.topbar #pending-open { font-size: 13px; white-space: nowrap; }
textarea.wide {
  width: 520px; max-width: 100%; padding: var(--s1) var(--s2); background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); font: inherit;
}
.field input.text.wide { width: 520px; }

/* ── ④ 매스·DC 배치(통합 설계서 7.6 웹 ④, 계획서 dc-design-integration W8-5) — 대지 지도(경계 변)·변 표·변 대응, 경로별 외피·바닥판,
   ALT 목록(표 — 행 하나에 ALT 하나, 같은 규격 상자를 늘어놓지 않는다 — UI 규약 B-3)·상세(평면 고정·입력 스크롤, 층 탭, aria-pressed
   토글). 판정(.st 글자·테)과 배치 경고(.mwarn — 판정 아님, 파선 테·본문 색)는 다른 class다(설계서 8.2). 변 선 색은 토큰(--na·--ink·
   --accent)이고 역할(주출입·차량 진입·도로 대응)은 툴팁·표에 글자로도 적는다(색만으로 구분하지 않는다) */
.m4-runbox { flex: none; display: flex; flex-direction: column; align-items: flex-end; max-width: 360px; }
.m4-runwhy { margin-top: var(--s1); color: var(--ink); font-size: 12.5px; line-height: 1.5; text-align: right; }   /* [ALT 계산]이 꺼진 사유(M.canRun) */
.m4-ro { margin-top: var(--s2); padding: var(--s2) var(--s3); background: var(--need-bg); border: 1px solid var(--line); color: var(--ink); }
.m4-map { height: 420px; margin-top: var(--s2); }
.leaflet-interactive.medge { stroke: var(--na); }
.leaflet-interactive.medge.road { stroke: var(--ink); }
.leaflet-interactive.medge.main { stroke: var(--accent); }
.leaflet-interactive.medge.vehicle { stroke-dasharray: 8 6; }
.leaflet-tooltip.medge-tip { background: var(--panel); color: var(--ink); border: 1px solid var(--line); box-shadow: none; padding: 0 4px; font-size: 12px; }
.m4-geomkv { max-width: 720px; margin-bottom: var(--s2); }
.m4-acts { margin-top: var(--s2); }
.tm4e { min-width: 960px; margin-top: var(--s3); }
.tm4e col.c1 { width: 150px; } .tm4e col.c2 { width: 84px; } .tm4e col.c3 { width: 72px; } .tm4e col.c4 { width: 170px; }
.tm4e col.c6 { width: 170px; } .tm4e col.c7 { width: 170px; }
.m4-role { font-size: 12px; font-weight: 600; color: var(--accent); }
.m4-sugg, .m4-limits { margin: 0; padding: 0; list-style: none; font-size: 12.5px; }
.m4-sugg li + li, .m4-limits li + li { margin-top: 2px; }
.m4-picks label { display: block; cursor: pointer; }
.m4-picks input { height: auto; margin: 0 var(--s1) 0 0; vertical-align: -2px; }
.m4-entry { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s2) var(--s3); margin-top: var(--s3); }
.m4-hints { flex-basis: 100%; }
.m4-save { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); margin-top: var(--s3); }
.m4-save .cite, .m4-save .err, .m4-save .m4-saved { flex-basis: 100%; }
.m4-save .err { color: var(--need); font-weight: 700; }
.m4-save .m4-saved { font-weight: 600; }
/* 경로·영역·사유 칸은 긴 글(갈림길 선택·영역 메모·축소 사유)이라 넉넉히 — 좁으면 행이 수천 px로 늘어난다(W8-6 화면 확인) */
.tm4p { min-width: 1720px; }
.tm4p col.c1 { width: 230px; } .tm4p col.c2 { width: 70px; } .tm4p col.c3 { width: 320px; } .tm4p col.c4 { width: 120px; }
.tm4p col.c5 { width: 130px; } .tm4p col.c6 { width: 90px; } .tm4p col.c7 { width: 80px; } .tm4p col.c8 { width: 250px; }
.tm4p col.c9 { width: 80px; }
.m4-listbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-bottom: var(--s2); }
/* 마지막 '배치 경고' 칸에도 폭을 준다 — 앞 칸 합(1290px)이 최소 폭보다 크면 table-layout fixed에서 0으로 눌린다(W8-6 화면 확인) */
.tm4a { min-width: 1570px; }
.tm4a col.c1 { width: 230px; } .tm4a col.c2 { width: 110px; } .tm4a col.c3 { width: 80px; } .tm4a col.c4 { width: 120px; }
.tm4a col.c5 { width: 120px; } .tm4a col.c6 { width: 100px; } .tm4a col.c7 { width: 80px; } .tm4a col.c8 { width: 70px; }
.tm4a col.c9 { width: 240px; } .tm4a col.c10 { width: 140px; } .tm4a col.c11 { width: 280px; }
tr.m4-variant > td { color: var(--muted); font-size: 12.5px; }
.tgbtn, .m4-toggles button {
  height: 28px; padding: 0 var(--s3); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.tgbtn[aria-pressed="true"], .m4-toggles button[aria-pressed="true"] { background: var(--select); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.tgbtn:disabled, .m4-toggles button:disabled {     /* 꺼진 토글 — 눌림(aria-pressed)이 남아도 꺼진 모양이 이긴다(.btn:disabled와 같은 모양) */
  background: var(--off-bg); border-color: var(--line); border-style: dashed; color: var(--muted); font-weight: 400; cursor: not-allowed;
}
.m4-detail { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s4); align-items: start; }
.m4-plan { position: sticky; top: 64px; }        /* 평면 고정 — 오른쪽 용량·판정·근거·채택이 스크롤된다 */
.m4-plan .tabs { flex-wrap: wrap; min-height: 28px; }
.m4-toggles { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin: var(--s2) 0; }
.m4-figure { min-height: 320px; padding: var(--s3); background: var(--panel); border: 1px solid var(--line); overflow: auto; }
.m4-figure object { display: block; width: 100%; max-width: 100%; }
.m4-legend { margin: var(--s2) 0 0; padding: 0; list-style: none; font-size: 12.5px; }
.m4-legend li + li { margin-top: 2px; }
.m4-h { margin: var(--s3) 0 var(--s1); font-size: 13px; font-weight: 700; }
.m4-side > .m4-h:first-child { margin-top: 0; }
.m4-adopt { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }
.m4-adopt .note { margin-top: var(--s1); }
.mwarn {
  display: inline-block; padding: 0 var(--s2); font-size: 12px; line-height: 1.5; font-weight: 600; white-space: nowrap;
  color: var(--ink); border: 1px dashed var(--muted); border-radius: var(--radius);
}
/* ALT 연결(W8-5b): 실행 줄·작업 상태, 행 고르기(ID 단추 — 키보드), 판정 칸 목록, 경로별 대지 그림, 용량·높이 kv, 채택 확인 줄 */
.m4-runinfo { flex-basis: 100%; }
.m4-job { flex-basis: 100%; font-weight: 600; }
.m4-job.err { color: var(--need); font-weight: 700; }
.tm4a tr.m4-item { cursor: pointer; }
.tm4a tr.m4-item:hover > td { background: var(--bg); }
tr.m4-sel > td, tr.m4-sel:hover > td { background: var(--select); }
.m4-pick { padding: 0; background: none; border: 0; color: var(--ink); font-weight: 700; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.m4-pick[aria-pressed="true"] { color: var(--accent); }
.m4-vlist { margin: 0; padding: 0; list-style: none; }
.m4-vlist li + li { margin-top: 2px; }
.m4-tier { margin-top: var(--s1); font-size: 12.5px; }
td.empty .m4-why { margin: var(--s1) 0 0; padding-left: 1.2em; text-align: left; font-size: 12.5px; }  /* ALT 없음 사유 목록 */
.m4-sitefig { margin-top: var(--s3); }
.m4-sitefig .tabs { flex-wrap: wrap; }          /* 경로 탭 여덟 — 폭 375에서 가로로 밀리지 않게 */
.m4-sitefig .m4-figure { min-height: 240px; }
.m4-kv { grid-template-columns: 120px minmax(0, 1fr); }
.m4-kv dd .m4-limits { margin-top: 2px; }
.m4-counts { font-weight: 600; }
.m4-vitems { margin: var(--s2) 0 0; padding: 0; list-style: none; }
.m4-vitems > li { padding: var(--s1) 0; border-bottom: 1px solid var(--line); }
.m4-sub { margin-top: var(--s2); font-size: 12.5px; font-weight: 700; }
.m4-confirm { margin-top: var(--s2); padding: var(--s2) var(--s3); background: var(--need-bg); border: 1px solid var(--line); }
.m4-confirm p + p { margin-top: var(--s1); }
.m4-adopt .err { margin-top: var(--s2); color: var(--need); font-weight: 700; }
.m4-adopt .m4-saved { margin-top: var(--s2); font-weight: 600; overflow-wrap: anywhere; }
.m4-figure .err { color: var(--need); font-weight: 700; }

/* ── 첫 판정 띠(설계서 dc-use-verdict 11.1·11.5, 계획서 V-5) — ②·③ 머리 바로 아래 같은 띠. 상자·카드 없이 위아래 괘선 한 쌍 안의
   글자 줄과 표: 판정 낱말은 .st 글자 배지(조금 크게 — .st.big, 색은 보조), 한 줄 결론은 ▶ 회색 띠(.band — 지정 검토 화면·검토서 ▶ 띠와
   같은 꼴, 엔진 문장 그대로), 단위 묶음 상태는 정의 목록(묶음 이름 | 상태 글자 + 지정 이름), 확정에 필요한 순서는 번호 목록(실제 차례).
   근거 표는 접어 둔다(건수는 늘 보인다). 새 색·서체 없음 — 기존 토큰만. 시그니처 고리(.link.go)로 ② 지정 행·입력 칸에 간다 */
.verdict { margin: var(--s2) 0 var(--s4); padding: var(--s2) 0 var(--s3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); }
.vcounts { color: var(--ink); }                   /* ② 머리: 조건 · 별도 검토 · 확인 건수(서버 screen.landuse.band) */
.vhead > .link:last-child { margin-left: auto; }  /* [판정 근거] 펼침 — 머리 줄 끝 */
.vbody { margin-top: var(--s2); }
.vlabel { font-size: 15px; font-weight: 700; }
.st.big { font-size: 14px; line-height: 1.6; padding: 0 var(--s2); }
.vline { margin-top: var(--s1); max-width: 100ch; }                 /* 한글 50자 안팎(B-2) */
.verdict .band { margin: var(--s2) 0 var(--s3); max-width: 100ch; }
.vwarn { margin-top: var(--s1); color: var(--need); font-weight: 600; }
.vwarn .st { margin-right: var(--s1); }
.vgroups { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s1) var(--s3); margin: 0 0 var(--s2); }
.vgroups dt { font-weight: 600; }
.vgroups dd { margin: 0; }
.vgroups .st { margin-right: var(--s2); }
.vsub { margin-top: var(--s4); font-weight: 700; }
.vchecks { margin: var(--s1) 0 0; padding-left: var(--s4); }
.vchecks li + li { margin-top: var(--s2); }
.vchecks p { max-width: 75ch; }
details.vtable { margin-top: var(--s3); }
details.vtable > summary { padding: var(--s1) 0; font-weight: 600; cursor: pointer; }
details.vtable[open] > summary { border-bottom: 1px solid var(--line); }
.tv3 { min-width: 760px; }
.tv3 col.c1 { width: 230px; } .tv3 col.c3 { width: 320px; }
.tv3 td p + p { margin-top: 2px; }
.cond { margin-top: 2px; font-size: 12.5px; }
.pre { white-space: pre-line; }
.vbases { margin-top: var(--s3); max-width: 100ch; }
.vfinal { margin-top: var(--s2); font-weight: 700; }
.useline { margin-top: var(--s1); font-size: 12.5px; }
.useline .st { font-size: 12px; }
.premise { margin: 0 0 var(--s2); font-weight: 600; }

/* 좁은 폭: ①을 한 단으로 쌓고 위 줄은 줄바꿈 — 칸이 내용보다 작아지거나 단추가 지도에 가리지 않는다 */
@media (max-width: 1180px) {
  .topbar { flex-wrap: wrap; height: auto; gap: var(--s2) var(--s3); padding: var(--s2) var(--s3); }
  .topbar .right { margin-left: 0; flex-wrap: wrap; }
  .s1 { grid-template-columns: minmax(0, 1fr); padding: var(--s3); }
  .map { height: 480px; }
  .pagehead { flex-wrap: wrap; }
  .t3 col.c1 { width: 160px; } .t3 col.c2 { width: 220px; } .t3 col.c4 { width: 140px; }
  .t4 col.c1 { width: 180px; } .t4 col.c4 { width: 180px; }
  .m4-detail { grid-template-columns: minmax(0, 1fr); }
  .m4-plan { position: static; }
  .m4-map { height: 320px; }
  .luhead, .lurow { grid-template-columns: 16px minmax(130px, 180px) 64px 124px minmax(0, 1fr) 96px; }
}
/* ② 좁은 폭(760px 이하): 지정 행을 한 단으로 쌓는다 — 이름 / 걸림·상태·데이터센터(글자 머리 보임) / 영향. 펼친 칸·할 일도 한 단 */
@media (max-width: 760px) {
  .luhead { display: none; }
  .lurow { grid-template-columns: 16px minmax(0, 1fr); gap: 2px var(--s2); }
  .lurow .c-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s3); grid-column: 2; grid-row: 2; }
  .lurow .c-touch, .lurow .c-status, .lurow .c-dc { grid-column: auto; grid-row: auto; }
  .lurow .c-effect { grid-column: 2; grid-row: 3; }
  .lbl { position: static; width: auto; height: auto; overflow: visible; clip-path: none; color: var(--muted); font-size: 12.5px; }
  .ludetail { grid-template-columns: minmax(0, 1fr); gap: var(--s2); padding-left: var(--s4); }
  .todo { grid-template-columns: 28px minmax(0, 1fr); padding: var(--s2) var(--s1); }
  .todo-acts { grid-column: 2; }
  .vhead > .link:last-child { margin-left: 0; }
  /* ③ 계산 표·조례 기준 표: 행마다 한 단으로(칸 머리는 data-label 글자) — 확정 조건 번호가 옆으로 밀려 숨지 않게 */
  .t3, .tord { min-width: 0; }
  .t3 colgroup, .tord colgroup, .t3 thead, .tord thead { display: none; }
  .t3, .t3 tbody, .t3 tr, .t3 th, .t3 td, .tord, .tord tbody, .tord tr, .tord th, .tord td { display: block; }
  .t3 tr.item, .tord tbody tr { padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
  .t3 tr.open { border-bottom: 0; }
  .t3 tr.detailrow { padding-bottom: var(--s2); border-bottom: 1px solid var(--line); }
  .t3 tbody th, .t3 td, .tord tbody th, .tord td { padding: 2px var(--s2); border-bottom: 0; }
  .t3 td[data-label]::before, .tord td[data-label]::before {
    content: attr(data-label); display: block; color: var(--muted); font-size: 12.5px; font-weight: 600;
  }
}
/* 아주 좁은 폭(휴대폰, 360px~): 단계 막대는 간격을 줄이고, ④까지 네 단추가 한 줄에 안 들어가면 줄을 바꾼다(가로로 밀리지 않게) —
   표는 위 표 상자가 받는다 */
@media (max-width: 480px) {
  .stepbar { flex-wrap: wrap; }
  .stepbar button { padding: 0 var(--s2); }
  .stepbar .rule { width: var(--s2); }
}
@media (prefers-reduced-motion: reduce) {
  .busy::before { animation: none; width: 100%; }
  .leaflet-zoom-anim .leaflet-zoom-animated, .leaflet-fade-anim .leaflet-tile { transition: none; }
}

/* 세션 확인 전에는 이전 계정의 화면이 다시 노출되지 않는다. */
.session-checking body { visibility: hidden; }
.account-controls { display: inline-flex; align-items: center; gap: var(--s2); }
#current-account { color: var(--muted); white-space: nowrap; }
@media (max-width: 1400px) {
  .topbar:has(.account-controls:not([hidden])) { flex-wrap: wrap; padding-top: var(--s2); padding-bottom: var(--s2); }
  .topbar:has(.account-controls:not([hidden])) .right { flex-wrap: wrap; }
}