/* hidden 속성이 늘 이긴다 — display 를 준 요소(머리·도구줄·쪽 목록)에 hidden 을 달아도 보이던 결함(팝업·작업대 뷰어의 embed 모드) */
[hidden] { display: none !important; }
:root {
  /* 토큰 한 벌(화면 디자인 개선 1묶음, 대표 승인 2026-10-30 · docs/ux/2026-10-29-design-refresh-audit.md §3.1) — 글꼴 하나 · 크기 4단계 · 색 8 + 흰 카드 · 간격 척도 · 모서리 둘 + 알약 · 그림자 둘 */
  --font: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;  /* 도면번호 · 파일명 · 단축키만 */
  --fs-sm: 12px;    /* 보조 — 칩 안 수 · 캡션 · 엔진 판 */
  --fs-base: 14px;  /* 본문 — 표 · 칩 · 길잡이 · 단추 · 입력 칸 */
  --fs-lg: 16px;    /* 소제목(h2 · h3) · 카드 제목 · 단면 코드 */
  --fs-h1: 22px;    /* 화면 제목 · 타일의 큰 수 */
  --lh: 1.5;
  --fg: #1d2127; --muted: #5b6472; --line: #e4e6ea; --bg: #f6f7f8; --card: #ffffff; --on-accent: #ffffff;
  --accent: #1f5fbf; --ok: #16794c; --cand: #b7791f; --bad: #b42318;  /* 판정색은 그대로 — 초록 · 주황 · 빨강 */
  --cand-fg: #8a5a00;  /* 주황의 글자용 짙은 짝 — #b7791f 는 흰 바탕 3.6:1 이라 글자엔 못 쓴다(테두리 · 칠에만) */
  --line-strong: #c9ced6;  /* 입력 칸 · 단추 · 거르개의 테두리 — 카드의 --line 보다 한 단 짙게(경계가 보이도록) */
  /* 옅은 바탕 · 테두리는 토큰에서 만든다 — 초록 톤 일곱 색이 한 줄로 */
  --tint-ok: color-mix(in srgb, var(--ok) 10%, white);
  --tint-cand: color-mix(in srgb, var(--cand) 12%, white);
  --tint-bad: color-mix(in srgb, var(--bad) 9%, white);
  --tint-hover: color-mix(in srgb, var(--accent) 4%, white);  /* 줄 위에 올렸을 때 */
  --tint-cand-soft: color-mix(in srgb, var(--cand) 6%, white);  /* 줄 · 큰 면의 강조 — 칩보다 옅게 */
  --tint-bad-soft: color-mix(in srgb, var(--bad) 4%, white);
  --tint-accent: color-mix(in srgb, var(--accent) 9%, white);
  --line-cand: color-mix(in srgb, var(--cand) 38%, white);
  --line-bad: color-mix(in srgb, var(--bad) 32%, white);
  /* 간격 척도 · 모서리 · 그림자(떠 있는 층에만) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;
  --r-card: 8px; --r-ctl: 6px; --r-pill: 999px;
  --shadow-pop: 0 8px 24px rgba(16, 24, 40, .12);
  --shadow-modal: 0 20px 60px rgba(16, 24, 40, .25);
  /* 도면 위 색(뜻이 설계서에 적혀 있어 그대로) */
  --mark: #d6336c; --view: #7048e8; --level: #1c7ed6; --vspan: #0ca678; --segment: #f08c00;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: var(--fs-base)/var(--lh) var(--font); }
button, input, select, textarea { font: inherit; }  /* 폼 조종도 같은 글꼴 — 13.333px Arial 이 프로젝트 · 올리기 · AI 분석 · 뷰어 · 대기열 화면에 남아 있었다 */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }  /* 숫자 칸 공통 — Pretendard 는 tnum 이 있어 세로로 훑는 표가 맞는다(맑은 고딕은 없었다) */
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
header.top { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 6px 20px; background: var(--fg); color: var(--on-accent); }
header.top a { color: var(--on-accent); } .brand { font-weight: 700; font-size: var(--fs-lg); } .brand span { font-weight: 400; opacity: .7; margin-left: 6px; }
header nav { font-size: var(--fs-base); } .who { opacity: .85; }
main { max-width: 1600px; margin: 0 auto; padding: 16px 20px 48px; }  /* 듀얼 모니터 — 본문은 읽기 폭 1,600px */
main.wide { max-width: none; }  /* 뷰어·대조 작업대·단면 카드는 창 폭을 다 쓴다 */
h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.35; }  /* 화면 안 위계는 크기가 아니라 자리와 간격으로 — h2 · h3 모두 16/600 */
h1 { font-size: var(--fs-h1); margin: var(--sp-2) 0 var(--sp-3); letter-spacing: -0.01em; } h2, h3 { font-size: var(--fs-lg); } h4, h5, h6 { font-size: var(--fs-base); }
h2 { margin: var(--sp-6) 0 var(--sp-2); }
h1 .small, h1 small { font-weight: 400; }  /* 제목 옆 한 줄 설명은 회색 · 보통 굵기 */
code, samp, pre { font-family: var(--font-mono); font-size: var(--fs-sm); }
.muted { color: var(--muted); } .small { font-size: var(--fs-sm); } .error { color: var(--bad); font-weight: 600; }
.crumbs { font-size: var(--fs-base); color: var(--muted); margin: 0; }
table { border-collapse: collapse; width: 100%; background: var(--card); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }  /* 표 안의 숫자는 모두 같은 폭 — 값 · 심도 · 하중 · 날짜를 세로로 훑는다(정렬은 표마다 그대로) */
th, td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: var(--fs-base); }
th { background: var(--card); font-weight: 600; color: var(--muted); }
tbody tr:hover > td { background: var(--tint-hover); }  /* 줄 올리면 옅은 파랑 — 상태 색(.need · .on 등)은 더 구체적인 규칙이 이긴다 */
table.stickyhead thead th { position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -1px 0 var(--line); }  /* 긴 표는 머리 고정(09-29) */
table.stickyhead .num { text-align: right; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; } td.raw { white-space: pre-line; color: var(--fg); font-size: var(--fs-base); }
.cards { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 10px 14px; min-width: 150px; }
.card b { display: block; font-size: var(--fs-h1); } .card span { color: var(--muted); font-size: var(--fs-base); }
.btn { display: inline-block; background: var(--accent); color: var(--on-accent); padding: 5px 14px; border: 1px solid var(--accent); border-radius: var(--r-ctl); margin-right: 6px; line-height: 1.5; font-weight: 500; cursor: pointer; }
.btn.light { background: var(--card); color: var(--fg); border-color: var(--line-strong); } .btn:hover { text-decoration: none; opacity: .9; } .btn.light:hover { background: var(--bg); opacity: 1; }
/* 칩 한 가족 — .chip · .tag · .st · .tchip · .rep · .e6st · .hck · .lkchip · .mkchip · .fb-status · .wvmodek · .wvcktag 가 같은 모양(12px · 줄 높이 20 · 알약 · 1px 선). 선택자는 그대로, 값만 */
.st { font-size: var(--fs-sm); line-height: 20px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--r-pill); background: var(--bg); white-space: nowrap; }
.st-ready { background: var(--tint-ok); color: var(--ok); } .st-running, .st-queued { background: var(--tint-cand); color: var(--cand-fg); } .st-failed { background: var(--tint-bad); color: var(--bad); }
.tag { font-size: var(--fs-sm); line-height: 20px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--r-pill); margin-left: 4px; white-space: nowrap; }
.tag.locked { background: var(--tint-ok); color: var(--ok); } .tag.cand { background: var(--tint-cand); color: var(--cand-fg); }
.tag.purpose { background: var(--tint-accent); color: var(--accent); } .tag.flag { background: var(--tint-bad); color: var(--bad); cursor: help; }
.tag.sys { background: var(--tint-ok); color: var(--ok); font-weight: 600; }
.slopenote { margin: 6px 0 0; padding: 6px 8px; background: var(--tint-cand); border-left: 3px solid var(--cand); }
form label { display: block; margin: 8px 0; } form input { padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--card); color: var(--fg); min-width: 260px; }
select, textarea, input[type=text], input[type=search], input[type=number], input[type=date] { border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--card); color: var(--fg); padding: 4px 8px; }
form button, .rev button { background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); padding: 5px 14px; border-radius: var(--r-ctl); cursor: pointer; }
.login { max-width: 380px; margin: 60px auto; background: var(--card); padding: 24px; border: 1px solid var(--line); border-radius: var(--r-card); }
.upload { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 16px; }
.sec { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-1) var(--sp-4) var(--sp-3); margin: var(--sp-6) 0; }
.sec h2 { margin-top: 10px; } .views { font-size: var(--fs-base); }
/* 단면 값 전체(대표 09-29) — 왼쪽 고정 목차 · 확인할 단면만 펼침 · 표 머리 고정 · 값 오른쪽 */
.secwrap { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start; margin-top: 12px; }
nav.sectoc { position: sticky; top: 10px; max-height: calc(100vh - 20px); overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 6px; font-size: var(--fs-base); }
nav.sectoc p { margin: 2px 4px 6px; line-height: 1.6; }
nav.sectoc a { display: flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 4px; color: inherit; text-decoration: none; }
nav.sectoc a:hover { background: var(--bg); } nav.sectoc .c { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
nav.sectoc .n { font-size: var(--fs-sm); font-weight: 600; min-width: 18px; padding: 0 5px; border-radius: var(--r-pill); text-align: center; font-variant-numeric: tabular-nums; }
nav.sectoc .n.disp { background: var(--tint-bad); color: var(--bad); } nav.sectoc .n.cand { background: var(--tint-cand); color: var(--cand-fg); }
.secwrap details.sec { margin: 0 0 var(--sp-3); scroll-margin-top: 10px; }
.secwrap details.sec > summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; padding: 8px 0; cursor: pointer; list-style: none; }
.secwrap details.sec > summary::-webkit-details-marker { display: none; }
.secwrap details.sec > summary::before { content: "▸"; color: var(--muted); width: 12px; }
.secwrap details.sec[open] > summary::before { content: "▾"; }
.secwrap details.sec > summary h2 { margin: 0; font-size: var(--fs-lg); }
.secwrap table.vals thead th { position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -1px 0 var(--line); }
.secwrap table.vals .num { text-align: right; }
.secwrap table.vals tr.need td { background: var(--tint-cand-soft); }
@media (max-width: 900px) { .secwrap { grid-template-columns: minmax(0, 1fr); } nav.sectoc { position: static; max-height: 40vh; } }
.rev button { padding: 2px 9px; font-size: var(--fs-base); margin-right: 3px; } .rev button[data-v="wrong"] { background: var(--card); color: var(--fg); border-color: var(--line-strong); }  /* 맞다 = 주 · 틀리다 = 보조 */
.rev .state { font-size: var(--fs-sm); color: var(--muted); margin-left: 4px; }
.legend { font-size: var(--fs-sm); margin: 6px 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.legend .bx { position: static; display: inline-block; padding: 0 6px; border-width: 2px; }
.viewer { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.page { position: relative; background: var(--card); border: 1px solid var(--line); }
.page img { display: block; width: 100%; height: auto; }
.bx { position: absolute; border: 2px solid; border-radius: 2px; }
.bx.cand { border-style: dashed; }
.bx.mark { border-color: var(--mark); background: rgba(214, 51, 108, .12); cursor: pointer; }
.bx.view { border-color: var(--view); } .bx.level { border-color: var(--level); } .bx.vspan { border-color: var(--vspan); }
.bx.segment { border-color: var(--segment); } .bx.hit { border: 3px solid transparent; }
.bx.hit.on { border-color: #ff0; box-shadow: 0 0 0 3px rgba(0,0,0,.6); }
aside { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 6px 12px; max-height: 85vh; overflow: auto; position: sticky; top: 10px; }
aside .val { padding: 5px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-base); cursor: pointer; } aside .val:hover { background: var(--bg); }
@media (max-width: 900px) { .viewer { grid-template-columns: 1fr; } aside { position: static; max-height: none; } }
.tag.corro { background: var(--tint-accent); color: var(--accent); } .tag.disp { background: var(--tint-bad); color: var(--bad); font-weight: 600; }
.tag.ai { background: var(--tint-accent); color: var(--accent); } .vlm { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
/* ── UI v1 ── */
.head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.overview { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; margin: 10px 0 6px; }
.funnel { display: flex; align-items: stretch; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-3) var(--sp-4); flex-wrap: wrap; }
.funnel .step { min-width: 90px; } .funnel .step.wide { flex: 1; min-width: 260px; } .funnel b { font-size: var(--fs-h1); display: block; }
.funnel .arrow { color: var(--muted); font-size: var(--fs-lg); align-self: center; }
.bad { color: var(--bad); }
.todo { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-2) var(--sp-4); }
.todo h3 { margin: 4px 0 8px; font-size: var(--fs-lg); } .todo-i { display: block; padding: 4px 0; font-size: var(--fs-base); color: inherit; }
.navhead { display: flex; align-items: center; justify-content: space-between; }
.toggle button { border: 1px solid var(--line-strong); background: var(--card); color: var(--muted); padding: 3px 12px; line-height: 20px; border-radius: var(--r-pill); cursor: pointer; } .toggle button.on { color: var(--fg); border-color: var(--fg); background: var(--bg); font-weight: 600; }
.kind h3 { font-size: var(--fs-lg); margin: 14px 0 6px; }
.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.sheetcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; color: inherit; display: flex; flex-direction: column; }
.sheetcard:hover { border-color: var(--accent); text-decoration: none; }
.sheetcard img { width: 100%; height: 140px; object-fit: contain; background: var(--card); border-bottom: 1px solid var(--line); }
.sheetcard .meta { padding: 6px 8px; font-size: var(--fs-base); }
.chips { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font-size: var(--fs-sm); line-height: 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0 8px; color: var(--fg); }
body.listmode .cards-grid { grid-template-columns: 1fr; } body.listmode .sheetcard { flex-direction: row; } body.listmode .sheetcard img { display: none; }
.secgrid { display: flex; flex-wrap: wrap; gap: 8px; } .seccard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 6px 10px; color: inherit; }
/* 뷰어 */
.vbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.vtools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: var(--fs-base); }
.layers label { margin-right: 8px; white-space: nowrap; } .sw { display: inline-block; width: 10px; height: 10px; border: 2px solid; vertical-align: -1px; }
.sw.mark { border-color: var(--mark); } .sw.view { border-color: var(--view); } .sw.level { border-color: var(--level); } .sw.vspan { border-color: var(--vspan); } .sw.segment { border-color: var(--segment); }
.viewer3 { display: grid; grid-template-columns: 110px minmax(0, 1fr) 330px; gap: 10px; margin-top: 8px; }
.film { max-height: 82vh; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.film a { display: block; border: 2px solid transparent; border-radius: 4px; background: var(--card); font-size: var(--fs-sm); text-align: center; color: inherit; }
.film a.cur { border-color: var(--accent); } .film img { width: 100%; height: 70px; object-fit: contain; display: block; }
.osd { height: 82vh; background: var(--card); border: 1px solid var(--line); position: relative; }
/* 엔진 상자(rect.bx)의 선은 vector-effect 로 굵기가 화면 기준이다 — --sw 는 화면 px 길이 상수(1.6px, 올림 선은 그 ×2.5 · ×3). 옛 viewer.js 는 --sw 를 1.6/배율 로 두어 이중 보정이었고 12배에서 0.14 px 로 사라졌다 */
.ovl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; --sw: 1.6px; }
.ovl rect.bx { fill: none; stroke-width: var(--sw, 1.6px); vector-effect: non-scaling-stroke; }
.ovl rect.bx.cand { stroke-dasharray: 5 3; }
.ovl rect.mark { stroke: var(--mark); fill: rgba(214, 51, 108, .14); pointer-events: all; cursor: pointer; }
.ovl rect.view { stroke: var(--view); } .ovl rect.level { stroke: var(--level); } .ovl rect.vspan { stroke: var(--vspan); } .ovl rect.segment { stroke: var(--segment); }
.ovl rect.hit { fill: none; stroke: #ffbf00; stroke-width: 4; vector-effect: non-scaling-stroke; opacity: 0; }
.ovl rect.hit.on { animation: blink 1.6s ease-out 2; opacity: 1; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
.vside { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 6px 10px; max-height: 82vh; overflow: auto; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.tabs button { border: 0; background: none; padding: 6px 8px; cursor: pointer; font-size: var(--fs-base); } .tabs button.on { border-bottom: 2px solid var(--accent); font-weight: 600; }
.vside .val { display: block; color: inherit; } .vside .val.on { background: var(--tint-cand-soft); }
.pv { position: fixed; z-index: 50; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 8px; box-shadow: var(--shadow-pop); max-width: 580px; font-size: var(--fs-base); }
.pv img { max-width: 100%; max-height: 380px; display: block; margin-bottom: 4px; }
/* 단면 카드 */
.secpanel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-2) var(--sp-4) var(--sp-3); margin: var(--sp-4) 0; }
.secgrid2 { display: grid; grid-template-columns: minmax(300px, 560px) minmax(0, 1fr); gap: 14px; align-items: start; }
.schem .t { font-size: 12px; fill: #1d2127; } .schem .mut { fill: #6b7280; } .schem .dim { fill: #1f5fbf; } .schem .gw { fill: #1c7ed6; }
tr.rowdisp { background: var(--tint-bad-soft); }
/* 대기열 */
.prog { width: 200px; height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; } .prog i { display: block; height: 100%; background: var(--ok); }
.queue3 { display: grid; grid-template-columns: 320px minmax(0, 1fr) 340px; gap: 12px; margin-top: 8px; }
.qlist { max-height: 78vh; overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 4px 8px 4px 28px; margin: 0; font-size: var(--fs-base); }
.qlist li { padding: 4px 2px; cursor: pointer; border-bottom: 1px solid var(--line); } .qlist li.cur { background: var(--tint-accent); } .qlist li.done { color: var(--muted); }
.qev { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-3); min-height: 300px; } .qev img.crop { max-width: 100%; border: 1px solid var(--line); }
.qdec { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-3) var(--sp-4); }
.qdec .big { font-size: var(--fs-h1); font-weight: 700; margin: 6px 0; } .qdec .why { font-size: var(--fs-sm); color: var(--muted); }
.decbtn button, .fix button { background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); border-radius: var(--r-ctl); padding: 7px 14px; margin: 4px 4px 4px 0; cursor: pointer; }
.decbtn button[data-v="wrong"] { background: var(--card); color: var(--fg); border-color: var(--line-strong); }
.decbtn button kbd { color: inherit; background: transparent; border-color: currentColor; opacity: .85; }  /* 단축키 칸 — 파란 단추 위의 흰 글이 흰 바탕에 묻히던 것(대비 1:1) */ .fix input { padding: 6px 8px; width: 70%; } kbd { font-size: var(--fs-sm); background: rgba(255,255,255,.25); padding: 0 4px; border-radius: 3px; }
@media (max-width: 1100px) { .viewer3, .queue3, .overview, .secgrid2 { grid-template-columns: 1fr; } .film { flex-direction: row; max-height: none; } .osd { height: 70vh; } }

/* 값 자리 — 색은 등급(확정 초록 · 교차 확인 파랑 · 엔진≠AI 빨강 · 후보 주황), 누르면 목록의 그 값 */
.ovl rect.value { pointer-events: all; cursor: pointer; fill: rgba(255, 255, 255, 0); }
.ovl rect.value.st-locked { stroke: #1a7f37; fill: rgba(26, 127, 55, .10); }
.ovl rect.value.st-corroborated { stroke: #1f6feb; fill: rgba(31, 111, 235, .10); }
.ovl rect.value.st-disputed { stroke: #cf222e; fill: rgba(207, 34, 46, .16); }
.ovl rect.value.st-candidate { stroke: #d4a72c; fill: rgba(212, 167, 44, .12); }
.ovl rect.value.hov { stroke-width: calc(var(--sw, 1.6px) * 2.5); fill-opacity: .35; }
.sw.value { background: linear-gradient(90deg, #1a7f37 0 25%, #1f6feb 25% 50%, #cf222e 50% 75%, #d4a72c 75%); }

/* 단면 카드 — 단 × 칸 표(도면 제원표와 같은 차례) · 칸 팝업 */
.legend { margin: 4px 0 8px; }
.stagewrap { overflow-x: auto; margin-top: 10px; }
table.stages { border-collapse: separate; border-spacing: 3px; font-size: var(--fs-base); }
table.stages th { font-weight: 600; color: var(--muted); padding: 4px 8px; text-align: center; white-space: nowrap; }
table.stages td.cell { padding: 6px 10px; text-align: right; border: 2px solid transparent; border-radius: var(--r-ctl); background: var(--card); cursor: pointer;
  font-variant-numeric: tabular-nums; white-space: nowrap; position: relative; }
table.stages td.cell:hover, table.stages td.cell.sel { box-shadow: 0 0 0 2px #ffbf00; }
table.stages td.st-locked { border-color: #1a7f37; background: #f0faf3; }
table.stages td.st-corroborated { border-color: #1f6feb; background: #f1f6ff; }
table.stages td.st-disputed { border-color: #cf222e; background: #fff1f1; font-weight: 700; }
table.stages td.st-candidate { border-color: #d4a72c; background: #fffaeb; }
table.stages td.ai { border-style: dashed; }
table.stages td.done::after { content: "✓"; position: absolute; top: -6px; right: -4px; font-size: var(--fs-sm); color: var(--ok); background: var(--card); border-radius: 50%; }
table.stages td.empty { color: var(--muted); text-align: center; cursor: default; }
tr.cellrow { cursor: pointer; } tr.cellrow:hover, tr.cellrow.sel { background: var(--tint-cand-soft); }
.cellpop { position: absolute; z-index: 50; width: 380px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow-pop); padding: 10px 12px; }
.cellpop .cp-head { display: flex; gap: 6px; align-items: center; } .cellpop .cp-x { margin-left: auto; border: 0; background: none; font-size: var(--fs-lg); cursor: pointer; }
.cellpop .cp-val { font-size: var(--fs-h1); font-weight: 700; margin: 4px 0; }
.cellpop .cp-img { display: block; max-width: 100%; margin: 6px 0; border: 1px solid var(--line); border-radius: var(--r-ctl); }
.cellpop .cp-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.tag.rev-done { background: var(--tint-ok); color: var(--ok); }

/* 계산서 대조 표시 — ✓ 같음 · 회색 정의·반올림 차이 · 빨강 다름 */
.rep { font-size: var(--fs-sm); line-height: 20px; font-weight: 600; padding: 0 6px; border-radius: var(--r-pill); white-space: nowrap; }
.rep.ok { color: var(--ok); } .rep.def { color: var(--muted); background: var(--bg); } .rep.bad { color: var(--bad); background: var(--tint-bad); } .rep.none { color: var(--muted); }
.rep.type { color: var(--cand-fg); background: var(--tint-cand); } /* 지보 형식 다름 — 값을 견주지 않은 칸 */
.cellpop .cp-rep { border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 6px; }
.cellpop .cp-rep-img { display: block; max-width: 100%; margin: 6px 0; border: 1px solid var(--line); border-radius: var(--r-ctl); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.filters .chip, .filters .btn { display: inline-block; margin: 0; padding: 3px 12px; font-size: var(--fs-base); line-height: 20px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--card); color: var(--muted); font-weight: 400; }  /* 보기 방식(거르개)은 단추가 아니라 칩 — 파란 채움 단추는 그 화면에서 할 일 하나뿐 */
.filters .chip.on, .filters .btn:not(.light), .filters .btn.cur { color: var(--fg); border-color: var(--fg); background: var(--bg); font-weight: 600; outline: 0; }
table.cmp td { vertical-align: top; } table.cmp .small .muted { max-width: 420px; }
.cellpop { width: min(560px, calc(100vw - 24px)); } /* 계산서 조각은 표 한 줄이라 넓게 */

/* 근거 팝업 뷰어 — 한 쪽 또는 도면·계산서 나란히 */
.evmodal { position: fixed; inset: 0; z-index: 100; background: rgba(15, 20, 30, .55); display: flex; align-items: center; justify-content: center; }
.evmodal[hidden] { display: none; }
.evbox { width: min(1500px, 96vw); height: 92vh; background: var(--card); border-radius: var(--r-card); display: flex; flex-direction: column; box-shadow: var(--shadow-modal); }
.evhead { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.evhead .evx { margin-left: auto; border: 0; background: none; font-size: var(--fs-lg); cursor: pointer; }
.evpanes { flex: 1; display: grid; grid-template-columns: 1fr; gap: 6px; padding: 6px; min-height: 0; }
.evpanes.two { grid-template-columns: 1fr 1fr; }
.evpane { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.evlabel { font-size: var(--fs-sm); padding: 4px 8px; background: var(--bg); }
.evpane iframe { flex: 1; border: 0; width: 100%; }
body.noscroll { overflow: hidden; }
.embedbar { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; padding: 4px 8px; font-size: var(--fs-base); white-space: nowrap; }
.embedbar .ebt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .embedbar > :not(.ebt) { flex: none; }  /* 좁은 칸에서도 한 줄 — 이름이 줄어든다 */
/* 끼운 뷰어 — 도구줄(28~40px) 아래를 창 끝까지 채운다(바깥 문서가 스크롤되지 않게, 09-30) */
body:has(.viewer3.embed) main { padding: 0; max-width: none; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.viewer3.embed { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr); flex: 1 1 auto; min-height: 0; margin-top: 0; } .viewer3.embed .osd { height: auto; min-height: 0; }
body:has(.viewer3.embed) .embedbar { flex: none; }

.secfilter { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.secfilter button { border: 1px solid var(--line-strong); background: var(--card); color: var(--muted); border-radius: var(--r-pill); padding: 3px 12px; font-size: var(--fs-base); line-height: 20px; cursor: pointer; }
.secfilter button.on { color: var(--fg); border-color: var(--fg); background: var(--bg); font-weight: 600; }
.seccard .tag { margin-left: 4px; }
.seccard[hidden] { display: none; }
.schem a.svlink { cursor: pointer; } .schem a.svlink text { fill: #1f5fbf; text-decoration: underline; } .schem a.svlink:hover line { stroke-width: 5; }

/* 대조 작업대 — 뷰어 둘 + 대조표 */
main.fit { padding-bottom: 0; }  /* 작업대는 창 안에 — 페이지가 한 번 더 스크롤되지 않게(09-29 실측 1,121/1,080) */
.wb { display: flex; flex-direction: column; height: calc(100vh - var(--wbtop, 70px)); }  /* --wbtop: 작업대가 시작하는 자리(workbench.js) */
.wbhead .crumbs { margin: 0 0 4px; }
.wbbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wbbar h1 { font-size: var(--fs-h1); margin: 0 6px; }
.wbchips { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.wbchip { border: 1px solid var(--line-strong); background: var(--card); color: var(--muted); border-radius: var(--r-pill); padding: 3px 12px; font-size: var(--fs-base); line-height: 20px; cursor: pointer; }
.wbchip.bad b { color: var(--bad); } .wbchip.def b { color: var(--muted); } .wbchip.ok b { color: var(--ok); } .wbchip.type b { color: var(--cand-fg); }
.wbchip.on { color: var(--fg); border-color: var(--fg); background: var(--bg); font-weight: 600; }
.wbpanes { flex: 1 1 58%; min-height: 260px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.wbpane { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--card); }
.wbpane iframe { flex: 1; width: 100%; border: 0; }
.wblabel { padding: 4px 8px; border-bottom: 1px solid var(--line); font-size: var(--fs-base); background: var(--bg); }
.wbempty { margin: auto; color: var(--muted); }
.wbtable { flex: 1 1 42%; overflow: auto; margin-top: 8px; }
.wbrow { cursor: pointer; } .wbrow.on td { background: var(--tint-cand-soft); } .wbrow.bad td:first-child { border-left: 3px solid var(--bad); } .wbrow.type td:first-child { border-left: 3px solid var(--cand); }
.wbrow:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.vrep { margin-top: 2px; } .vrep a { margin-left: 4px; }
.wbcall { margin: 4px 0 8px; }
@media (max-width: 800px) { .wbpanes { grid-template-columns: 1fr; } .wb { height: auto; } .wbpane { height: 45vh; } }
.small-h { font-size: var(--fs-lg); margin: 12px 0 6px; } .cmpsecs .rep { margin-left: 4px; }
ul.why { margin: 6px 0; padding-left: 18px; } ul.why li { margin: 2px 0; }
.tag.wall { background: var(--tint-accent); color: var(--accent); font-weight: 600; }

/* 단면 카드 연결 줄 — 평면 → 단면도 → 전개도 → 계산서 */
.linkrow { display: flex; align-items: stretch; gap: 6px; margin: 6px 0 10px; flex-wrap: wrap; }
.lk { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 6px 8px; min-width: 150px; display: flex; flex-direction: column; gap: 4px; }
.lkh { font-size: var(--fs-sm); font-weight: 600; color: var(--fg); }
.lkarrow { align-self: center; color: var(--muted); font-size: var(--fs-lg); }
.lkcard { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); color: inherit; }
.lkcard img { width: 180px; height: auto; border: 1px solid var(--line); border-radius: 4px; background: var(--card); }
.lkchip { font-size: var(--fs-sm); line-height: 20px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); color: var(--accent); white-space: nowrap; }  /* 근거 링크 칩 — 같은 모양에 밑줄 없는 파랑 글로만 구분(누르면 근거 창) */
.lkchip:hover { text-decoration: none; background: var(--tint-accent); }
.lkchip.strong { border-color: var(--accent); color: var(--accent); font-weight: 600; }
/* 전개도 칩 — 짐작은 눈에 띄는 점선(호박색 1.5 px) · 확정은 짙은 실선(같은 굵기) + 글의 「±m」(전개도 매핑 M1, 대표 답 ③ · 과제 5 검토 G1) */
.lkchip.dotted { border: 2px dashed var(--cand); } .lkchip.sure { border: 2px solid var(--muted); }
.jumpbox { display: flex; align-items: center; gap: 10px; margin-left: auto; margin-right: 16px; }
#jump { width: 260px; padding: 5px 9px; border-radius: var(--r-ctl); border: 1px solid color-mix(in srgb, var(--on-accent) 25%, transparent); background: color-mix(in srgb, var(--on-accent) 12%, transparent); color: var(--on-accent); }
#jump::placeholder { color: color-mix(in srgb, var(--on-accent) 62%, transparent); } #jump.miss { outline: 2px solid var(--bad); }
.toplink { color: var(--on-accent); font-size: var(--fs-base); }
.val.fwd { display: flex; gap: 8px; align-items: center; } .val.fwd img { width: 70px; height: auto; border: 1px solid var(--line); }
/* 도면 연결표 */
.maptbl td { vertical-align: top; } .maptbl .lkchip { display: inline-block; margin: 1px 2px; }
.maptbl .lkplus { margin-left: 8px; } #lkerr { margin-left: 8px; }

/* 프로젝트 첫 화면 — 탭 · 큰 단면 카드 · 접는 낱장 묶음 */
.ptabs { display: flex; gap: 6px; align-items: center; margin: var(--sp-6) 0 var(--sp-3); border-bottom: 1px solid var(--line); }
.ptabs > button { border: 0; background: none; padding: 8px 14px; font-size: var(--fs-lg); font-weight: 600; color: var(--muted); border-bottom: 3px solid transparent; cursor: pointer; }
.ptabs > button.on { color: var(--fg); border-bottom-color: var(--accent); }
.ptablinks { margin-left: auto; font-size: var(--fs-base); white-space: nowrap; }
.secgrid.big { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.seccard.big { display: flex; gap: 10px; padding: 8px; align-items: flex-start; }
.seccard.big img { width: 96px; height: 68px; object-fit: cover; object-position: center; border: 1px solid var(--line); border-radius: 4px; background: var(--card); flex: none; }
.seccard.big .sccode { font-size: var(--fs-lg); } .scbody { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.scflags { display: flex; flex-wrap: wrap; gap: 3px; }
details.kind > summary { cursor: pointer; list-style: none; } details.kind > summary::-webkit-details-marker { display: none; }
details.kind > summary h3::before { content: "▸ "; color: var(--muted); } details.kind[open] > summary h3::before { content: "▾ "; }
details.kind > summary h3 { display: inline; }

.lkplans { max-width: 640px; } .lkthumbs { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-end; }
.lkimg { position: relative; display: inline-block; line-height: 0; }
.lkimg img { width: 150px; height: auto; }
.lkmark { position: absolute; border: 2px solid #e5484d; border-radius: 3px; box-shadow: 0 0 0 2px rgba(229,72,77,.25); min-width: 6px; min-height: 6px; transform: translate(-2px, -2px); }
.nowrap { white-space: nowrap; }
.ovl rect.mark.hov { stroke-width: calc(var(--sw, 1.6px) * 3); fill: #e5484d; fill-opacity: .3; }
.tag.info { background: var(--tint-accent); color: var(--accent); }
.overview { align-items: start; }
.notice { background: var(--tint-cand); border: 1px solid var(--line-cand); border-radius: var(--r-ctl); padding: 6px 10px; margin: 6px 0; font-size: var(--fs-base); }

/* ── 마감(09-28) — 한글 줄바꿈 · 카드 넘침 · 요약 숫자 줄 · 첫 화면 카드 · 좁은 화면 머리줄 ── */
body { word-break: keep-all; overflow-wrap: anywhere; }
td.num, .tag, .rep, .lkchip, .nowrap, .st { overflow-wrap: normal; }
.secgrid.big > *, .seccard.big { min-width: 0; }
.scflags .tag, .scflags .rep { white-space: normal; text-align: left; margin-left: 0; }
.funnel .arrow { display: none; }
.funnel .step { padding: 0 14px; border-left: 1px solid var(--line); } .funnel .step:first-child { border-left: 0; padding-left: 2px; }
.funnel small b, .funnel .bad { font-size: inherit; display: inline; }
.wbempty2 { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 16px; max-width: 760px; }
.wbempty2 .chips { margin-top: 8px; }
@media (max-width: 760px) {
  header.top { flex-wrap: wrap; gap: 6px 10px; padding: 8px 12px; }
  .brand span { display: none; }
  .jumpbox { order: 3; width: 100%; margin: 0; } #jump { flex: 1; width: auto; min-width: 0; }
  main { padding: 12px 12px 40px; }
  .funnel .step { border-left: 0; padding: 0; }
  .ptabs { overflow-x: auto; }
}

/* 라이브러리(09-28) — 표 한 장 · 도서 종류 고르기 */
table.lib td { vertical-align: top; } table.lib td.libfiles div { margin: 2px 0; } table.lib td.libfiles .muted { overflow-wrap: anywhere; }
.kinds { border: 1px solid var(--line); border-radius: var(--r-card); padding: 6px 10px; margin: 8px 0; }
.kinds legend { font-size: var(--fs-base); color: var(--muted); padding: 0 4px; } .kinds label { display: inline-block; margin-right: 14px; }
.kinds input[type=radio] { min-width: 0; padding: 0; border: 0; width: auto; margin-right: 4px; }

/* 프로젝트 홈 — 도서 세 줄 */
.docs4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin: var(--sp-3) 0 6px; }
.doclane { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-1) var(--sp-4) var(--sp-3); min-width: 0; }
.docstrip + #docs-inverse { margin-top: calc(var(--sp-3) - var(--sp-6)); margin-bottom: var(--sp-6); }  /* 「역해석」 카드 — 접힌 도서 띠 바로 아래의 보이는 자리(띠 아래 간격 24 − 12 = 12) */
.doclane h3 { font-size: var(--fs-lg); margin: var(--sp-3) 0 var(--sp-2); }
.docrow { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; font-size: var(--fs-base); padding: 3px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.docname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.docup { margin-top: 8px; } .docup .btn { cursor: pointer; }
.vh { position: absolute; width: 1px; height: 1px; min-width: 0; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.docup .btn { position: relative; } .docup .btn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.monsum p { margin: 4px 0; }
.monsum details { margin-top: 6px; max-height: 240px; overflow: auto; }
.lkmon .moninst { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 3px 0; }
.hck { font-size: var(--fs-sm); line-height: 20px; padding: 0 8px; border-radius: var(--r-pill); border: 1px solid var(--line); }
.hck.same { color: var(--ok); } .hck.differ, .hck.looser { color: var(--bad); border-color: var(--line-bad); } .hck.na, .hck.stage { color: var(--muted); }
.safety { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin: 10px 0; }
.safety h3 { width: 100%; margin: 0 0 2px; font-size: var(--fs-lg); }
.safety .sf { display: flex; gap: 8px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 8px 12px; text-decoration: none; color: inherit; min-width: 180px; }
.safety .sf b { font-size: var(--fs-h1); } .safety .sf b.bad { color: var(--bad); }
table.fusion tr.st-no_mark td, table.fusion tr.h-na td { color: var(--muted); }
table.fusion tr.h-differ td:last-child b { color: var(--bad); }
.followtools { display: inline-flex; gap: 6px; margin-right: 10px; }
.followtools button { font: inherit; font-size: var(--fs-base); padding: 2px 8px; border-radius: var(--r-ctl); border: 1px solid var(--line-strong); background: transparent; color: inherit; cursor: pointer; }
.followtools .ft-follow[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
table.fusion { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: var(--fs-base); }
table.fusion th, table.fusion td { border-bottom: 1px solid var(--line); padding: 5px 8px; text-align: left; vertical-align: top; }
a.docname { color: inherit; text-decoration: none; }
a.docname:hover, a.docname:focus { color: var(--accent); text-decoration: underline; }
.evtools { display: inline-flex; gap: 6px; }
.evtools .btn.small { padding: 2px 10px; font-size: var(--fs-base); }
/* 전개도 치수열(⑤-2) — 붉은 것(단면도보다 불리 · 못 읽음)부터, 범위 안은 파란 안내 */
.e6head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
main:has(.e6head) { --fs-sm: var(--fs-base); }  /* 전개도 치수열 화면은 글자를 키운 뒤(의견 64) 14px 아래로 내리지 않는다 — 12px 보조 글(.small · 칩 · 캡션)도 이 화면에선 14(감사 §2 · 대표 승인 ②) */
.e6filters { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 14px; }  /* 「전체」 한 칩 + 두 줄(결과 · 판독 상태, 의견 70) */
.e6frows { display: flex; flex-direction: column; gap: 6px; }
.e6frow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.e6flab { flex: none; min-width: 64px; font-size: var(--fs-base); color: var(--muted); }  /* 두 줄의 머리글을 같은 폭에 — 칩이 세로로 가지런하다 */
.e6f { font-size: var(--fs-base); padding: 3px 12px; line-height: 20px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); color: var(--muted); text-decoration: none; background: var(--card); white-space: nowrap; }  /* nowrap — 수가 글에서 떨어져 아랫줄로 꺾이지 않는다(좁으면 칩째 줄을 옮김) */
.e6f.on { color: var(--fg); border-color: var(--fg); background: var(--bg); font-weight: 600; } .e6f.bad b { color: var(--bad); }
.e6grid { display: grid; grid-template-columns: minmax(340px, 500px) minmax(0, 1fr); gap: 12px; align-items: start; }
.e6list { max-height: calc(100vh - 170px); overflow: auto; }
.e6row { cursor: pointer; } .e6row.sel { background: var(--tint-accent); }
.e6st { font-size: var(--fs-base); line-height: 20px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--r-pill); white-space: nowrap; }  /* 전개도 화면은 14px 아래로 내리지 않는다(의견 64) */
.e6st.bad { background: var(--tint-bad); color: var(--bad); font-weight: 600; } .e6st.info { background: var(--tint-accent); color: var(--accent); }
.e6st.ok { background: var(--tint-ok); color: var(--ok); } .e6st.none { background: var(--bg); color: var(--muted); }
.e6band { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); }
.e6ctx { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-top: 4px; }
.e6body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 490px); gap: 10px; }
.e6side { min-width: 0; overflow-x: auto; }  /* 글자를 키운 뒤(의견 64) 대조 칸은 490px 까지 — 그래도 넘치면 칸 안에서만 민다 */
.e6list th, .e6list td:first-child, .e6list td:nth-child(2), .e6list td.small, .e6cmp td:first-child, .e6cmp th { white-space: nowrap; }
.e6list th, .e6list td { padding-left: 10px; padding-right: 10px; }  /* 14px 로 풀린 보조 글 + Pretendard 폭 — 480px 목록 칸에 낱장 · 단면 · 값 · 상태가 한 줄로 든다(줄 36px) */
.e6view { width: 100%; height: calc(100vh - 250px); min-height: 420px; border: 1px solid var(--line); border-radius: var(--r-card); }
.e6o.same { color: var(--ok); } .e6o.inside { color: var(--accent); } .e6o.worse { color: var(--bad); font-weight: 600; } .e6o.na { color: var(--muted); }
.e6act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.e6seg { margin-top: 16px; }
.lkchip.e6chip.bad { border-color: var(--line-bad); color: var(--bad); } .lkchip.e6chip.ok { color: var(--ok); } .lkchip.e6chip.info { color: var(--accent); }
.ovl rect.bx.chain { stroke: #7c3aed; fill: none; cursor: pointer; } .sw.chain { border-color: #7c3aed; }
/* E6 설계 선 · EL 표기 점(설계서 2026-10-22 §10) — 지반선 갈색 · 천단 검정 · 굴착 바닥 파랑, 확정 실선 · 후보 점선 */
.ovl polyline.bx.e6line { fill: none; stroke-width: calc(var(--sw, 1.6px) * 1.4); vector-effect: non-scaling-stroke; }
.ovl polyline.bx.e6line.ln-ground { stroke: #8b5a2b; } .ovl polyline.bx.e6line.ln-top { stroke: #111827; } .ovl polyline.bx.e6line.ln-bottom { stroke: #1d4ed8; }
.ovl polyline.bx.e6line.cand { stroke-dasharray: 6 4; }
.ovl rect.bx.e6level { stroke: #7c3aed; fill: rgba(124, 58, 237, .35); } .ovl rect.bx.e6level.cand { fill: none; stroke-dasharray: 2 2; }
.sw.e6line { border-color: #a0522d; }
/* 올림 글 — 가는 선 · 작은 점은 보이지 않는 굵은 짝(.e6hit)이 올림을 받고 글(.e6tip)이 화면에 뜬다. 짝은 올림 · 이동만(끌기 · 누름은 도면으로) */
.ovl rect.bx.e6hit, .ovl polyline.bx.e6hit { stroke: transparent; stroke-width: 14px; vector-effect: non-scaling-stroke; cursor: help; }
.ovl rect.bx.e6hit { fill: transparent; pointer-events: all; } .ovl polyline.bx.e6hit { fill: none; pointer-events: stroke; }
.ovl polyline.bx.e6line.hov { stroke-width: calc(var(--sw, 1.6px) * 3); } .ovl rect.bx.e6level.hov { stroke-width: calc(var(--sw, 1.6px) * 2.5); fill-opacity: .6; }
.e6tip { position: fixed; z-index: 60; max-width: 380px; padding: 5px 9px; border-radius: var(--r-ctl); background: var(--fg); color: var(--on-accent); font-size: var(--fs-base); line-height: 1.4; pointer-events: none; box-shadow: var(--shadow-pop); white-space: pre-line; }
/* 뷰어 「드론」 층(M3 설계서 2026-10-25 §10.2) — 드론 지반 초록(짐작 자리 점선) · 측정 천단 검정 점선 · 측정 바닥 파랑 점선(설계 선과 같은 빛깔 · 다른 줄무늬),
   「확인」 상자 주황 · 참고 상자 회색 점선. 누르는 상자(벽 따라 보기로)는 손 모양 */
.ovl polyline.bx.droneline { fill: none; stroke-width: calc(var(--sw, 1.6px) * 1.6); vector-effect: non-scaling-stroke; stroke-linecap: round; }
.ovl polyline.bx.droneline.ln-ground { stroke: #15803d; } .ovl polyline.bx.droneline.ln-ground.cand { stroke-dasharray: 6 4; }
.ovl polyline.bx.droneline.ln-top { stroke: #111827; stroke-dasharray: 1 4; } .ovl polyline.bx.droneline.ln-floor { stroke: #1d4ed8; stroke-dasharray: 1 4; }
.ovl polyline.bx.droneline.hov { stroke-width: calc(var(--sw, 1.6px) * 3); }
.ovl rect.bx.dronecheck.st-check { stroke: var(--cand); fill: rgba(183, 121, 31, .16); stroke-width: calc(var(--sw, 1.6px) * 1.4); stroke-dasharray: none; }
.ovl rect.bx.dronecheck.st-ref { stroke: #6b7280; fill: none; stroke-dasharray: 4 3; }
.ovl rect.bx.dronecheck.hov { stroke-width: calc(var(--sw, 1.6px) * 2.5); }
.ovl rect.bx.e6hit.go { cursor: pointer; }
.sw.droneline { border-color: #15803d; border-style: dotted; }
.e6tip[hidden] { display: none; }
@media (max-width: 1600px) {  /* 1280 에서 뷰어가 318px 였다 — 대조 칸을 뷰어 아래로, 목록은 480px(글자를 키운 뒤 표 최소 폭 약 454 — 440 은 목록이 가로로 밀리고 줄이 129px) */
  .e6grid { grid-template-columns: 480px minmax(0, 1fr); }
  .e6body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) { .e6grid, .e6body { grid-template-columns: 1fr; } }
/* 올리기 화면 — 이름 · 놓기 영역 · 파일 줄(진행 · 제안 종류 · 칸 옆 문장) · 확정 */
.head .btn:last-child { margin-left: auto; }
.up { max-width: 980px; }
.upfield { margin: 6px 0 14px; } .upfield input { display: block; margin-top: 4px; width: min(420px, 100%); }
.uperr { display: block; color: var(--bad); font-size: var(--fs-base); margin-top: 4px; }
.upnote { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 8px 12px; font-size: var(--fs-base); }
.drop { display: block; border: 2px dashed var(--line-strong); border-radius: var(--r-card); padding: 28px 16px; text-align: center; background: var(--card); cursor: pointer; }
.drop b { display: block; font-size: var(--fs-lg); margin-bottom: 6px; } .droppick { color: var(--accent); text-decoration: underline; }
.drop.over, .drop:focus-visible { border-color: var(--accent); background: var(--tint-accent); outline: 2px solid transparent; }
table.upfiles { width: 100%; margin: 12px 0 4px; border-collapse: collapse; }
table.upfiles th, table.upfiles td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.upfiles .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.upname { overflow-wrap: anywhere; min-width: 0; } .upkind { width: 260px; }
.upkind select { min-width: 160px; } .upkind progress { width: 160px; } .upmsg { margin: 4px 0 0; color: var(--muted); } .upmsg.bad { color: var(--bad); }
.upgo { display: flex; gap: 12px; align-items: center; margin-top: 10px; } #upwhy.bad { color: var(--bad); }
/* 도서 줄 — 지우기 · 종류 바꾸기 · 새 개정 올리기(그 자리 확인) */
.docacts { margin-left: auto; white-space: nowrap; min-width: 0; max-width: 100%; } .docask { white-space: normal; }
.docask input[type=file] { max-width: 220px; font-size: var(--fs-sm); } .docask input:not([type=file]) { width: 11em; }
.linkbtn { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0 4px; font-size: var(--fs-base); min-width: 0; }
.linkbtn:hover { text-decoration: underline; } .linkbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.linkbtn.danger { color: var(--bad); font-weight: 600; } .docerr { color: var(--bad); display: block; }
.docacts .docerr { white-space: normal; }  /* `.docacts` 의 nowrap 을 물려받으면 409 문장이 한 줄로 삐져나간다 */
/* 판독 중 띠 — 제목 바로 아래 */
.readbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--tint-cand); border: 1px solid var(--line-cand); border-radius: var(--r-card); padding: 8px 12px; margin: 6px 0 10px; }
.readbar progress { width: 160px; }
/* 필름 — 도면번호 아래 도면명 한 줄 */
.film a em.ftt { display: block; font-style: normal; font-size: var(--fs-sm); line-height: 1.25; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* 대시보드 2단계(09-29) — 확인할 것 타일: 같은 폭 · 같은 높이, 붉은 것 먼저, 0 은 회색 한 줄 */
.todo1 { margin: var(--sp-6) 0 var(--sp-3); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.tile { display: flex; align-items: center; gap: 10px; min-height: 72px; box-sizing: border-box; padding: 10px 14px; margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); color: inherit; text-decoration: none; overflow: hidden; }
a.tile:hover { border-color: var(--muted); }
.tile b { font-size: var(--fs-h1); font-variant-numeric: tabular-nums; min-width: 1.4em; text-align: right; }
.tile span { font-size: var(--fs-base); line-height: 1.35; min-width: 0; font-weight: 600; }
.tile small { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.bad { border-color: var(--line-bad); } .tile.bad b { color: var(--bad); } .tile.cand b { color: var(--cand-fg); }
.tile.none span { color: var(--ok); }
.zeros { font-size: var(--fs-sm); color: var(--muted); margin: 6px 2px 2px; }
/* 「검수 진행」 한 칸 — 타일 줄 옆(1100 미만은 아래). 주 단추 하나, 나머지는 글자 링크 */
.dash1 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; margin: 10px 0; }
.dash1 .todo1 { margin: 0; }
/* 도서 띠 — 다 읽힌 도서는 한 줄로 접는다(실패 · 판독 안 됨 · 대기 · 판독 중이 있거나 도서가 없으면 펼친 채) */
.docstrip { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); margin: var(--sp-6) 0; }
.docstrip > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 16px; cursor: pointer; list-style: none; font-size: var(--fs-base); }
.docstrip > summary > b { font-size: var(--fs-lg); font-weight: 700; margin-right: 4px; letter-spacing: -0.01em; }
.docstrip > summary::-webkit-details-marker { display: none; }
.docstrip > summary::before { content: "▸"; color: var(--muted); } .docstrip[open] > summary::before { content: "▾"; }
.docstrip[open] .dsmore { display: none; } .docstrip > summary .btn { margin-left: auto; }
.docstrip .docs4 { margin: 0; padding: 0 0 8px; gap: 0; border-top: 1px solid var(--line); }
.docstrip .doclane { border: 0; border-radius: 0; background: none; } .docstrip .doclane + .doclane { border-left: 1px solid var(--line); }  /* 칸 안의 칸이 아니라 나눈 열 */
/* 단면 탭 줄에 거르개 — 카드가 첫 화면에(1920 에서 y≈330) */
.ptabs { flex-wrap: wrap; }
.ptabs .secfilter { margin: 0 0 0 12px; }
/* 프로젝트 목록 — 확인 필요 칩(대시보드 타일과 같은 수 · 같은 차례), 파일은 종류 칩 */
.libtodo { min-width: 180px; } .libtodo .tchip { display: inline-block; margin: 0 4px 3px 0; padding: 0 8px; border: 1px solid transparent; border-radius: var(--r-pill); font-size: var(--fs-sm); line-height: 20px; white-space: nowrap; text-decoration: none; }
.tchip.bad { background: var(--tint-bad); color: var(--bad); } .tchip.cand { background: var(--tint-cand); color: var(--cand-fg); }
.libfiles .chip { display: inline-block; margin: 0 4px 3px 0; white-space: nowrap; }  /* 줄이 모자라면 칩째로 다음 줄 — 칩 안에서 꺾이지 않는다 */
/* 분할 뷰어(3단계 1차) — 필름 | 왼 칸 | 손잡이 | 옆 칸 | 옆 패널. 옆 칸 폭은 --rw(끌어 조절 · 창마다 기억), 없으면 반반 */
body.split .viewer3 { grid-template-columns: 110px minmax(0, 1fr) 6px var(--rw, minmax(0, 1fr)) 300px; }
.splitgrip { height: 82vh; border-radius: 3px; background: var(--line); cursor: col-resize; touch-action: none; }
.splitgrip:hover, .splitgrip:focus-visible { background: var(--muted); outline: none; }
.rpane { display: flex; flex-direction: column; height: 82vh; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.rphead { display: flex; align-items: center; gap: 10px; padding: 3px 8px; font-size: var(--fs-sm); border-bottom: 1px solid var(--line); background: var(--bg); }
.rphead b { flex: 1; }
#rpframe { flex: 1; width: 100%; border: 0; }
@media (max-width: 1100px) { body.split .viewer3 { grid-template-columns: 1fr; } .splitgrip { display: none; } .rpane { height: 70vh; } }
/* 이 단면의 연결 — 뷰어 옆 패널 위(평면 · 단면도 · 전개도 · 계산서 쪽, Shift+클릭 = 옆 칸) */
.seclinks { border-bottom: 1px solid var(--line); padding: 2px 0 6px; margin-bottom: 6px; }
.seclinks p { margin: 2px 0 4px; } .seclinks .sl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 2px 0; font-size: var(--fs-sm); }
.seclinks .sl b { margin-right: 2px; }
/* 분할 뷰어 2차 — 옆 패널이 활성 칸을 따름: 패널 머리 [메인 | 옆 칸], 활성 칸 테두리 */
.panelsw { display: flex; width: max-content; margin: 0 0 6px; border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; position: sticky; top: 0; z-index: 2; background: var(--card); }  /* 긴 목록에서도 보이게 */
.panelsw button { border: 0; background: var(--card); padding: 3px 12px; font-size: var(--fs-base); color: var(--muted); cursor: pointer; }
.panelsw button + button { border-left: 1px solid var(--line); }
.panelsw button.on { background: var(--tint-accent); color: var(--accent); font-weight: 600; }
.rpane.active, body.split .osd.active { outline: 2px solid var(--accent); outline-offset: -2px; }
/* 옆 패널 접기(P) — 도면 칸을 넓게 */
body.panelfold .vside { display: none; }
body.panelfold .viewer3 { grid-template-columns: 110px minmax(0, 1fr); }
body.split.panelfold .viewer3 { grid-template-columns: 110px minmax(0, 1fr) 6px var(--rw, minmax(0, 1fr)); }
#panelfold[aria-pressed="true"] { background: var(--tint-accent); }
@media (max-width: 1100px) { body.panelfold .viewer3, body.split.panelfold .viewer3 { grid-template-columns: 1fr; } }
.panelbody.loading { opacity: .45; pointer-events: none; }  /* 옆 칸 패널을 받는 동안 — 앞 쪽 값을 누르지 않게 */
.qfilter { margin: 4px 0 6px; font-size: var(--fs-base); }

/* (10-05) 단면 카드 — 표마다 소제목. 지보 단 표를 형상 표 곁으로(의견 49):
   1800px 이상 = 도식 | 형상 | 지보 단 세 칸, 1100~1800px = 도식 | (형상 위 · 지보 단 아래), 그 아래 = 위아래.
   실측 — 지보 단 표가 9열(자유장 · 정착장 · 여유장 · 전체장 · 각도 · 수평 간격 · 축력 …)이면 1440 폭 세 칸에서 형상 표가 한 글자 폭이 된다.
   세 칸의 경계(의견 73 뒤 고침): 지보 단 표의 최소 폭은 열 열 개 · 3단에서 596px(줄바꿈 가능한 가장 좁게) — 1600 창은 지보 단 칸이 438px 라 옆으로 밀렸다.
   도식 380 + 형상 최소 520 + 지보 단 596 + 여백(길잡이 164 · 본문 40 · 카드 30 · 칸 사이 28) + 세로 줄 15 = 1773 → 경계 1800(1800~1920 은 칸이 596 이상) */
.secgrid3 { display: grid; gap: 14px; align-items: start; grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
  grid-template-areas: "schem geo" "schem stage"; }
.secgrid3 > .schemwrap { grid-area: schem; } .secgrid3 > .geocol { grid-area: geo; } .secgrid3 > .stagecol { grid-area: stage; }
.secgrid3 .stagewrap { max-height: 560px; overflow: auto; margin-top: 0; }
.secgrid3 table.geo td.num { white-space: nowrap; }
.secgrid3 table.geo .geolab { white-space: nowrap; }  /* (의견 73) 첫 칸 이름은 한 글자씩 꺾이지 않는다 — 곁에 붙는 꼬리표 · 관리기준 칩만 아랫줄로 */
.secgrid3.nostage { grid-template-areas: "schem geo"; }  /* 지보 단이 없으면 빈 셋째 칸을 두지 않는다 — 형상 표가 남는 폭을 다 쓴다 */
h4.sub { margin: 0 0 6px; font-size: var(--fs-base); color: var(--muted); }
@media (min-width: 1800px) {
  .secgrid3 { grid-template-columns: minmax(260px, 380px) minmax(520px, 0.9fr) minmax(0, 1.5fr); grid-template-areas: "schem geo stage"; }  /* 형상 칸 최소 520px — 다섯 칸 표(형상 · 값 · 도면 글 · 상태 · 계산서)가 420px 에선 첫 칸이 꺾였다(의견 73) */
  .secgrid3.nostage { grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); grid-template-areas: "schem geo"; }
  .secgrid3 table.stages { font-size: var(--fs-sm); border-spacing: 2px; }
  .secgrid3 table.stages th { padding: 4px 4px; }
  .secgrid3 table.stages td.cell { padding: 4px 6px; }
}
@media (max-width: 1100px) { .secgrid3, .secgrid3.nostage { grid-template-columns: 1fr; grid-template-areas: "schem" "geo" "stage"; } }
/* (10-05) 홈 구역 제목 · 도면 세트의 계측 · 배수 · 시공순서 접기 */
h2.dh { font-size: var(--fs-lg); margin: 0 0 8px; color: var(--fg); font-weight: 700; letter-spacing: -0.01em; }
details.otherset { margin: 8px 0 0; } details.otherset > summary { cursor: pointer; font-size: var(--fs-base); color: var(--muted); }
/* (10-05) 검수 대기열 근거 — 확대 가능한 뷰어 */
.qev iframe.qview { width: 100%; height: 62vh; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--card); }
.ovl rect.hit.val { stroke: #cf222e; }
/* (10-07) 설명서 — 검토 화면의 설명은 여기로, 화면엔 제목 옆 「?」 만 */
a.help { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1px solid var(--line); border-radius: 50%; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); text-decoration: none; background: var(--card); vertical-align: middle; flex: none; }
a.help:hover, a.help:focus-visible { color: var(--fg); border-color: var(--muted); }
h1 + a.help { margin-left: -4px; }
.manual { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: start; }
.mantoc { position: sticky; top: 10px; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-base); }
.mantoc a { padding: 3px 8px; border-radius: 4px; color: inherit; text-decoration: none; }
.mantoc a:hover { background: var(--bg); }
.manbody { max-width: 760px; }
.manbody section { margin: 0 0 22px; scroll-margin-top: 12px; }
.manbody h2 { font-size: var(--fs-lg); margin: 0 0 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.manbody ul { margin: 4px 0 8px; padding-left: 18px; line-height: 1.7; font-size: var(--fs-base); }
.manbody section:target h2 { color: var(--accent); }
.mantab { width: auto; margin: 6px 0; }
.mantab td, .mantab th { font-size: var(--fs-base); padding: 4px 10px; }
.mantab.keys td:first-child { white-space: nowrap; }
kbd { font: var(--fs-sm)/1 var(--font-mono); padding: 2px 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--card); }
@media (max-width: 760px) { .manual { grid-template-columns: 1fr; } .mantoc { position: static; flex-direction: row; flex-wrap: wrap; } }
/* (의견 58 · 64) 프로젝트 목록 — 표를 한 장으로(둥근 모서리), 줄을 넉넉히, 이름을 크게, 줄에 올리면 옅은 바탕 */
table.lib { border-collapse: separate; border-spacing: 0; border-radius: var(--r-card); overflow: hidden; }
table.lib th { padding: 10px 14px; } table.lib td { padding: 12px 14px; }
table.lib tbody tr:last-child td { border-bottom: 0; } table.lib tbody tr:hover td { background: var(--tint-hover); }
table.lib td:first-child > a b { font-size: var(--fs-lg); letter-spacing: -0.01em; }
table.lib td.num { color: var(--fg); }
.head h1 { letter-spacing: -0.02em; }

/* (10-09) 프로젝트 길잡이 — 1,280px 이상은 왼쪽 붙박이, 좁은 화면은 위 탭 줄. 자리만 옮기고 내용은 그대로 */
body.has-rail { display: grid; grid-template-columns: 164px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); min-height: 100vh; align-content: start; }
body.has-rail > header.top { grid-column: 1 / -1; }
body.has-rail > main { grid-column: 2; min-width: 0; width: 100%; }
.prail { grid-column: 1; grid-row: 2; position: sticky; top: 0; align-self: start; max-height: 100vh; overflow: auto; display: flex; flex-direction: column; gap: 2px; padding: 14px 8px; font-size: var(--fs-base); background: var(--card); border-right: 1px solid var(--line); }
.prail a { display: block; padding: 6px 10px; border-radius: var(--r-ctl); color: inherit; text-decoration: none; white-space: nowrap; }
.prail a:hover { background: var(--bg); text-decoration: none; }
.prail a[aria-current="page"] { background: var(--tint-accent); color: var(--accent); font-weight: 600; }
.prail-h { padding: 14px 10px 4px; font-size: var(--fs-sm); line-height: 1.4; color: var(--muted); white-space: nowrap; } .prail-h:first-child { padding-top: 0; }  /* 그룹 제목(이 현장 · 자료 · 검토) — 12px 회색 한글 한 줄, 접지 않는다 */
.railanchor { position: relative; top: -8px; height: 0; }  /* #닻 — 길잡이가 짚는 자리, 보이지 않는다 */
@media (max-width: 1279px) {
  body.has-rail { display: block; } .prail-h { display: none; }  /* 위 탭 줄에선 제목 없이 항목만 */
  .prail { position: static; max-height: none; flex-direction: row; gap: 0; padding: 0 12px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .prail a { border-radius: 0; border-bottom: 3px solid transparent; padding: 8px 12px; }
  .prail a[aria-current="page"] { background: none; border-bottom-color: var(--accent); }
}
/* (10-09) 현장 지도 — 도서 띠 아래. 평면도 그림 위 층(평면도 · 시추공 · 계기 · 단면 위치 · 드론) · 범례 · 축척 · 표식 목록 */
.sitemap { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); margin: var(--sp-6) 0; padding: var(--sp-3) var(--sp-4); }
.sitemap.empty { padding: var(--sp-3) var(--sp-4); }
.smhead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.smhead h2.dh { margin: 0; } .smhead .tag { margin-left: 0; } .smhead .smsheet { margin-left: auto; } .smbasis { overflow-wrap: anywhere; }
.smlayers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 6px; }
.smlayers button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); background: var(--card); border-radius: var(--r-pill); padding: 3px 12px; font-size: var(--fs-base); line-height: 20px; cursor: pointer; color: var(--muted); }
.smlayers button[aria-pressed="true"] { color: var(--fg); border-color: var(--fg); background: var(--bg); font-weight: 600; }
.smlayers button[aria-pressed="false"] .sw { opacity: .35; }
.smlayers button:disabled { cursor: not-allowed; opacity: .6; }
.smlayers .smscale { margin-left: auto; font-variant-numeric: tabular-nums; }
.smgroup { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* 확대 · 이동(의견 #65) — ＋ － 맞춤 단추는 층 단추와 같은 띠, 안내 한 줄은 그 옆. 끝에 닿은 단추는 흐리게(disabled 가 아니라 초점을 지킨다) */
.smzoom { margin-left: 8px; }
.smzoom button { color: var(--fg); justify-content: center; min-width: 30px; }
.smzoom button[aria-disabled="true"] { opacity: .45; cursor: default; }
.smlayers .smhint { white-space: nowrap; }
/* 단면 찾기(의견 #69) — 칸 아래 펼침 목록(지도에 그려진 이름) · 같은 이름 차례 ‹ 1/3 › · 「지도에 없음」 한 줄. 목록은 창 밖으로 나가지 않게(map.js 가 왼쪽으로 민다) */
.smfind { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 100%; }
.smfind input { width: 9em; min-width: 0; box-sizing: border-box; padding: 3px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font: inherit; font-size: var(--fs-base); }
.smfind input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (pointer: coarse) { .smfind input { font-size: var(--fs-lg); } }  /* 손가락 화면은 16 px — 초점에 화면이 저절로 커지지 않게 */
.smflist { position: absolute; z-index: 6; top: 100%; left: 0; width: max-content; min-width: 100%; max-width: min(320px, calc(100vw - 24px)); max-height: 260px; overflow: auto; box-sizing: border-box;
  margin: 4px 0 0; padding: 4px 0; list-style: none; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-card); box-shadow: var(--shadow-pop); }
.smflist li { padding: 4px 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smflist li[aria-selected="true"], .smflist li:hover { background: var(--tint-accent); }
.smflist li .muted { white-space: pre; }
.smfnav { display: inline-flex; align-items: center; gap: 2px; }
.smlayers .smfnav button { padding: 1px 9px; color: var(--fg); }
.smfnav #smfnum { min-width: 2.6em; text-align: center; font-variant-numeric: tabular-nums; }
.smfmsg { color: var(--muted); overflow-wrap: anywhere; } .smfmsg:empty { display: none; }
/* 단면 긋기(의견 #83) — 켜면 단추가 붉은 테 · 지도 커서가 십자, 결과는 지도 아래 칸(줄에 올리면 지도에서 밝힘) */
.smlayers .smcutbtn { color: var(--fg); }
.smlayers .smcutbtn[aria-pressed="true"] { background: var(--tint-bad); border-color: var(--bad); color: var(--bad); }
#smcv.cutting { cursor: crosshair; touch-action: none; }  /* 켠 동안은 손가락으로 끌어도 쪽이 밀리지 않고 선이 그어진다 */
.smcut { margin: 8px 0 0; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--card); overflow-wrap: anywhere; }
.smcuthead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.smcut p { margin: 4px 0 0; } .smcutpart { margin-top: 4px; }
.smcut ul { margin: 4px 0 2px; padding-left: 18px; } .smcut li { padding: 2px 4px; border-radius: 4px; } .smcut li.hot { background: var(--tint-accent); }
[class*="smsw-"] { width: 10px; height: 10px; border-radius: 50%; border-width: 2px; flex: none; }
.smsw-plan { border-color: #9ca3af; border-radius: 1px; } .smsw-bh { border-color: #1f5fbf; background: #1f5fbf; }
.smsw-inst { border-color: #d6336c; background: #d6336c; border-radius: 1px; } .smsw-sec { border-color: #f08c00; background: #f08c00; transform: rotate(45deg); border-radius: 1px; }
.smsw-drone { border-color: #16794c; border-radius: 1px; background: repeating-linear-gradient(45deg, #16794c 0 2px, transparent 2px 4px); }
.smbody { position: relative; }
.smbody canvas { display: block; max-width: 100%; margin: 0 auto; user-select: none; -webkit-user-select: none; }  /* 높이 상한(72vh)에 걸리면 가운데에 · 끌 때 글자가 선택되지 않게 */
#smcv:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }  /* 글쇠(+ − 0 방향키)로 닿았을 때 */
.smtip { position: absolute; z-index: 5; pointer-events: none; background: var(--fg); color: var(--on-accent); padding: 3px 8px; border-radius: var(--r-ctl); max-width: min(520px, 90%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smlegend { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; } .smlegend .sw { margin-right: 2px; }
.smlegend b.cand { color: var(--cand-fg); }
.smbase { position: relative; } .smbase > summary { cursor: pointer; color: var(--link, var(--accent)); }
.smbasebox { position: absolute; z-index: 5; top: 100%; left: 0; width: min(560px, 90vw); margin-top: 4px; padding: 8px 10px; background: var(--card);
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl); box-shadow: var(--shadow-pop); }
.smbasebox p { margin: 0 0 6px; } .smbasebox ul { margin: 0 0 6px; padding-left: 0; list-style: none; max-height: 260px; overflow: auto; }
.smbasebox li { padding: 2px 0; } .smbasebox .smbasenow { margin-left: 4px; }
.smzc { margin-top: 6px; } .smzc > summary { cursor: pointer; } .smzc ul { margin: 4px 0 0; padding-left: 0; list-style: none; max-height: 200px; overflow: auto; }
.smzc li { padding: 1px 0; } .smzc button[disabled] { color: var(--muted); cursor: default; }
.smlist { margin-top: 6px; } .smlist > summary { cursor: pointer; color: var(--muted); }
.smlist ul { margin: 4px 0 0; padding-left: 18px; columns: 3; column-gap: 20px; max-height: 260px; overflow: auto; }
.smlist li { break-inside: avoid; padding: 1px 0; }
@media (max-width: 900px) { .smlist ul { columns: 1; } .smhead .smsheet { margin-left: 0; } }
/* 벽 따라 보기(설계서 2026-10-13 §5.3) — 지도 오른쪽 판 */
.smsw-wall { border-color: #0b6e4f; background: #40a383; border-radius: 1px; height: 4px; }
.smsw-pile { border-color: #5f3dc4; background: #e5dbff; border-radius: 1px; }  /* 말뚝 번호 층 — 잠김은 꽉 찬 꼬리표, 후보는 빈 꼬리표 */
.smsw-zone { border-color: #6b7280; border-style: dashed; background: transparent; border-radius: 1px; }  /* 굴착 구역 후보 — 지도의 회색 점선 다각형 */
.m3dtbl .lkchip { display: inline-block; margin: 1px 4px 1px 0; white-space: normal; }
.smwallpick select { margin-left: 4px; max-width: 280px; }
.smmain { display: flex; gap: 12px; align-items: flex-start; }
.smmain > .smbody { flex: 1 1 auto; min-width: 0; width: 100%; }
.smwall { flex: 0 0 460px; max-width: 48%; box-sizing: border-box; border: 1px solid var(--line-strong); border-radius: var(--r-card); padding: 8px 10px; background: var(--card); max-height: 84vh; overflow: auto; }
.smwallhead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.wvacts { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }  /* 3D · 크게 보기 · 닫기 — 줄이 모자라면 한 덩이로 다음 줄 오른쪽에 */
.smwallchips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; } .smwallchips .chip { border: 1px solid var(--line); border-radius: var(--r-pill); padding: 0 8px; font-size: var(--fs-sm); color: var(--muted); background: var(--bg); }  /* 출처 — 조용한 한 줄 */
.smwallflag { border-left: 3px solid var(--cand); background: var(--tint-cand-soft); padding: 3px 8px; margin: 6px 0; } .smwallflag ul { margin: 4px 0 2px; padding-left: 18px; }
/* 「확인」 — 한 줄(펼치면 까닭 셋), 종단이 첫 화면에 남게(고침 1 판정 3) */
.smwallflag > summary { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; list-style: none; } .smwallflag > summary::-webkit-details-marker { display: none; }
.smwallflag > summary::before { content: "▸ "; color: var(--cand-fg); } .smwallflag[open] > summary { white-space: normal; } .smwallflag[open] > summary::before { content: "▾ "; }
.smwallflag > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.smwallfig { margin: 6px 0; } .smwallfig svg { width: 100%; height: auto; display: block; background: #fafbfc; border: 1px solid #eceef1; overflow: visible; }
/* 벽 따라 보기 화면 고침(설계 메모 wall-view-ux) — 판(현장 지도) · 탭(대시보드) · 크게 보기 대화창이 같은 몸(_wall_view.html) */
:is(.smwall, .drwall):not([data-state="ready"]) .wvneed { display: none; }  /* 받는 중 · 값 없음 · 받지 못함 — 빈 그래프 대신 위의 까닭 한 줄 */
.smwallat { display: flex; align-items: center; gap: 6px; } .smwallat input { flex: 1; }
.smwalltbl th { text-align: left; font-weight: 500; color: var(--muted); padding-right: 8px; white-space: nowrap; }
.smwallnotes, .drpanel ul.smwallnotes { margin: 6px 0 0; padding-left: 18px; font-size: var(--fs-sm); line-height: 1.55; } .smcheck { margin: 4px 0 0; }
.wvbigbtn { margin: 0; padding: 2px 9px; } .wvhead .wvbigbtn { margin-left: auto; } .wvbigbtn:disabled { opacity: .45; cursor: not-allowed; }
.wvhead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .wvhead h3 { margin: 0; }
/* 한눈에 줄 — 작은 칸 넷(드론 − 도서 · 깊이 · 설계 선 · 근입), 표처럼 테두리 */
.wvsum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 8px 0 6px; border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; background: var(--card); }
.wvsum :is(.wvelevcell, .wvembedcell, .wvline1) { grid-column: 1 / -1; }  /* 수 둘은 나란히, 설계 선 · 근입 · 오늘 문장(글이 긴 칸)은 한 줄 다 */
.wvtop .wvcell { padding: 3px 10px 4px; } .wvtop .wvline1 { display: flex; align-items: baseline; gap: 8px; } .wvtop .wvline1 dt { flex: none; margin: 0; }
.wvcell dd.wvone { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-sm); }  /* 설계 선 한 줄 — 올리면 서버 범례 글, 자세히는 아래 칸 */
.wvtop .wvval { font-size: var(--fs-lg); } .wvrest { margin-top: 6px; }
.wvcell { padding: 5px 10px 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 -1px -1px 0; min-width: 0; }
.wvcell dt { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 1px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.wvcell dd { margin: 0; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wvval { font-size: var(--fs-lg); font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.25; } .wvval.cand { color: var(--cand-fg); }
.wvwords { font-size: var(--fs-sm); overflow-wrap: anywhere; } .wvnote { font-size: var(--fs-sm); overflow-wrap: anywhere; } .wvnote.cand { color: var(--cand-fg); }
.wvl { display: block; } .wvl .muted { font-size: var(--fs-sm); }
.wvkey { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-sm); }
.wvk { display: inline-block; width: 14px; height: 0; border-top: 2px solid #374151; margin-left: 4px; } .wvk.dotted { border-top-style: dotted; } .wvk.dash { border-top: 2px dashed #1f5fbf; }
.wvchipline .lkchip { display: inline-block; margin: 3px 4px 0 0; white-space: normal; font-size: var(--fs-sm); }
.wvpages > summary { display: inline-block; cursor: pointer; list-style: none; margin-top: 3px; font-size: var(--fs-sm); } .wvpages > summary::-webkit-details-marker { display: none; }
.wvpages > summary::after { content: " ▾"; color: var(--muted); } .wvpages[open] > summary::after { content: " ▴"; }
.wvpages > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wvpagelist { display: block; } .wvhint { display: block; margin-top: 3px; font-size: var(--fs-sm); }
ul.wvwarn, .drpanel ul.wvwarn { list-style: none; margin: 6px 0; padding: 0; font-size: var(--fs-sm); line-height: 1.5; } .wvwarn li { border-left: 3px solid var(--cand); background: var(--tint-cand-soft); padding: 2px 8px; margin: 0 0 3px; }
/* 층 단추 · 단계 고르기 — 색은 그래프 · 범례 · 읽기와 같다(드론 초록 · 단면도 대표값 파랑 · 전개도 설계 선 밤색/검정 · 단계 바닥 빨강) */
.wvctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 4px; }
.wvlayers { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.wvlayers button { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line-strong); background: var(--card); border-radius: var(--r-pill); padding: 2px 10px; line-height: 20px; font: inherit; font-size: var(--fs-base); cursor: pointer; color: var(--muted); }
.wvlayers button[aria-pressed="true"] { color: var(--fg); border-color: var(--fg); background: var(--bg); font-weight: 600; }
.wvlayers button[aria-pressed="false"] .sw { opacity: .3; }
.wvlayers button:disabled { opacity: .45; cursor: not-allowed; }
.wvstagepick select { font: inherit; font-size: var(--fs-base); padding: 1px 4px; max-width: 180px; }
:is(.wvlayers button, .wvstagepick select, .wvbigbtn, .wvplot svg):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 그래프 · 십자선 읽기 */
.wvplot { position: relative; }
.wvplot svg { cursor: crosshair; touch-action: pan-y; user-select: none; -webkit-user-select: none; }  /* 가로로 끌면 횡단 자리 · 세로 밀기는 쪽 넘김 */
/* 읽기 — 판 · 탭은 종단 밑 띠(덮지 않는다 — 고침 1 판정 1), 크게 보기는 그래프 위에 뜨되 안내선 반대쪽 · 그림 칸 안(wall_view.js 가 자리를 셈) */
.wvread { font-variant-numeric: tabular-nums; } .wvreadh { margin: 0; font-size: var(--fs-sm); } .wvreadd { font-size: var(--fs-sm); }
.wvread ul, .drpanel .wvread ul { list-style: none; margin: 1px 0 0; padding: 0; font-size: var(--fs-sm); line-height: 1.4; }
.wvrn { margin-left: 4px; white-space: nowrap; } .wvrv { margin-left: 5px; white-space: nowrap; } .wvrw { margin-left: 5px; color: var(--muted); font-size: var(--fs-sm); }
.wvstrip { margin: 0; padding: 3px 8px 4px; border: 1px solid var(--line); border-top: 0; background: var(--card); }  /* 줄 자리는 셈이 늘 같은 수로 잡는다(빈 줄 포함) */
.wvstrip ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 0 12px; }
.wvstrip li { display: grid; grid-template-columns: 16px auto auto 1fr; align-items: baseline; column-gap: 4px; min-width: 0; }
.wvstrip li > * { margin: 0; }
/* 출처 · 상태는 두 줄까지 감싼다(「세로 ±0.6 m · 선 후보」 같은 짐작 까닭을 자르지 않게 — 고침 3 · 재검토 N9), 그래도 넘치면 줄 끝 「…」 + 올리면 온 글(title) */
.wvstrip .wvrw { grid-column: 2 / -1; line-height: 15px; height: 30px; margin: 0 0 2px; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.wvstrip li { white-space: nowrap; height: 50px; overflow: hidden; } .wvstrip .wvrn { overflow: hidden; text-overflow: ellipsis; } .wvstrip li.wvempty { visibility: hidden; }  /* 줄마다 같은 높이(이름 한 줄 + 출처 · 상태 두 줄 = 50 px — 글꼴이 달라도) — 빈 줄 자리도 */
.wvbigprof .wvstrip { flex: none; } .wvbigprof .wvstrip ul { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }  /* 크게 보기도 그래프 밑 띠(고침 2 판정 ②) */
.wvrs { display: inline-block; width: 14px; height: 0; border-top: 2px solid currentColor; vertical-align: middle; } .wvrs.dotted { border-top-style: dashed; }
.wvrs.wv-drone { color: #16794c; } .wvrs.wv-band { color: #9aa5ab; } .wvrs.wv-top, .wvrs.wv-bottom { color: #1f5fbf; border-top-style: dashed; } .wvrs.wv-rock { color: #8a5a00; border-top-style: dotted; }
.wvrs.wv-stage { color: #c92a2a; border-top-style: dashed; } .wvrs.wvd-ground { color: #a0522d; } .wvrs.wvd-top { color: #111827; } .wvrs.wvd-bottom { color: #6b4f2a; } .wvrs.wvd-stage { color: #c92a2a; }
.wvguide { stroke: #4b5563; stroke-width: 1; stroke-dasharray: 3 3; fill: none; pointer-events: none; }
text.wvedge { font-size: 12px; font-weight: 600; fill: #4b5563; } text.wvedge.ek-rock { fill: #8a5a00; }  /* 축 밖 선 — 가장자리 화살 꼬리표(그림 칸 밖 줄) */
/* 단계 표 · 자세히 */
.wvstg { margin: 8px 0; } .wvstgtbl caption { text-align: left; caption-side: top; padding: 0 0 3px; color: var(--fg); }
.wvstgtbl th, .wvstgtbl td { padding: 3px 8px; font-size: var(--fs-sm); } .wvstgtbl thead th { color: var(--muted); font-weight: 500; white-space: nowrap; }
.wvstgtbl td.num { font-variant-numeric: tabular-nums; } .wvstgtbl tr.wvst-cand td:last-child { color: var(--cand-fg); font-weight: 600; } .wvstgtbl tr.wvst-ok td:last-child { color: var(--ok); }
.wvstg > p { margin: 3px 0 0; }
.wvmore { margin: 8px 0 2px; } .wvmore > summary { cursor: pointer; color: var(--muted); } .wvmore > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 그래프 선 · 글 — 확정 실선 · 짐작 점선, 단면도 대표값(구간 한 값)은 긴 파선 */
.wvgrid { stroke: #eceef1; stroke-width: 1; } .wvtick { font-size: 12px; fill: #4b5563; } .wvempty { font-size: var(--fs-sm); fill: #6b7280; }
.wvground { fill: none; stroke: #16794c; stroke-width: 2; } .wvband { fill: #cfd8dc; opacity: .7; stroke: none; }
.wvline { fill: none; stroke-width: 1.5; stroke-dasharray: 6 4; }
.wvlabel, .wvdlabel { font-size: 12px; font-weight: 600; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.wv-top, .wv-bottom { stroke: #1f5fbf; fill: #1f5fbf; } .wv-stage { stroke: #c92a2a; fill: #b42318; } .wv-drone { fill: #16794c; stroke: #16794c; }
.wv-rock { stroke: #8a5a00; fill: #8a5a00; } .wvline.wv-rock { stroke-dasharray: 1 3; }
.wvlabel.wv-top, .wvlabel.wv-bottom, .wvlabel.wv-stage, .wvlabel.wv-rock, .wvlabel.wv-drone { stroke: #fff; }
.wvcursor, .wvwall { stroke: #7048e8; stroke-width: 1.5; } .wvwall { stroke: #1d2127; }
/* 전개도 설계 선(설계서 2026-10-22 §10) — 지반선 밤색 · 천단 검정 · 굴착 바닥 짙은 밤색 · 단계 바닥 빨강, 확정 실선 · 짐작 점선 */
.wvd { fill: none; stroke-width: 2; } .wvd.dotted { stroke-dasharray: 4 3; }
.wvd.wvd-ground { stroke: #a0522d; } .wvd.wvd-top { stroke: #111827; } .wvd.wvd-bottom { stroke: #6b4f2a; stroke-width: 2.4; } .wvd.wvd-stage { stroke: #c92a2a; }
.wvdlabel.wvd-ground { fill: #a0522d; } .wvdlabel.wvd-top { fill: #111827; } .wvdlabel.wvd-bottom { fill: #6b4f2a; } .wvdlabel.wvd-stage { fill: #b42318; }
svg path.wvleader { fill: none; stroke: #9ca3af; stroke-width: .9; stroke-dasharray: none; opacity: .8; }
path.wvleader.lk-wv-top, path.wvleader.lk-wv-bottom { stroke: #1f5fbf; } path.wvleader.lk-wv-stage, path.wvleader.lk-wvd-stage { stroke: #c92a2a; } path.wvleader.lk-wv-drone { stroke: #16794c; }
path.wvleader.lk-wvd-ground { stroke: #a0522d; } path.wvleader.lk-wvd-top { stroke: #111827; } path.wvleader.lk-wvd-bottom { stroke: #6b4f2a; } path.wvleader.lk-wv-rock { stroke: #8a5a00; }
.wvsw-dground { border-color: #a0522d; height: 0; } .wvsw-dtop { border-color: #111827; height: 0; } .wvsw-dbottom { border-color: #6b4f2a; height: 0; } .wvsw-dstage, .wvsw-stage { border-color: #c92a2a; height: 0; }
.wvsw-ground { border-color: #16794c; background: #16794c; height: 3px; } .wvsw-band { border-color: #cfd8dc; background: #cfd8dc; }
.wvsw-top { border-color: #1f5fbf; border-style: dashed; height: 0; } .wvsw-bottom { border-color: #1f5fbf; border-style: dashed; height: 0; } .wvsw-rock { border-color: #8a5a00; border-style: dotted; height: 0; }
.wvctl .sw, .smwalllegend .sw { width: 14px; }
/* 드론 비교(M3 설계서 2026-10-25 §10.1) — 방식 칩 · 「확인 n · 참고 m」 목록 · 종단 밑 차 띠(범위 안 옅은 초록 · 확인 주황 · 참고 안 옅은 회색 · 참고 밖 짙은 회색 빗금) ·
   B 측정 표식(▲ 천단 · ▼ 바닥) · 가림 눈금 · 「종단에서」 의 옅은 범위. 색만으로 말하지 않는다 — 칸마다 title · 목록 · 표 · 읽기 띠에 같은 글 */
.wvmode { margin: 4px 0 2px; line-height: 1.5; overflow-wrap: anywhere; } .wvmodek { display: inline-block; padding: 0 8px; line-height: 20px; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 650; background: var(--bg); color: var(--fg); }
.wvmodek.wvmode-before { background: var(--tint-ok); color: var(--ok); } .wvmodek.wvmode-during { background: var(--tint-cand); color: var(--cand-fg); }
.wvmoden { display: block; color: var(--muted); }  /* 판 전체 까닭은 방식 칩 밑 둘째 줄(과제 5 고침 1 · 검토 I-2) */
.smwallflag.wvck-none { border-left-color: #9ca3af; background: #f6f7f9; } .smwallflag.wvck-none > summary::before { color: var(--muted); }
ol.wvcklist { list-style: none; margin: 4px 0 2px; padding: 0; } .wvckrow { border-top: 1px solid var(--line); padding: 5px 0 4px; } .wvckrow:first-child { border-top: 0; }
.wvckrow > p { margin: 0 0 2px; } .wvckhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; } .wvckrange { font-variant-numeric: tabular-nums; color: var(--muted); }
.wvcktag { font-size: var(--fs-sm); line-height: 20px; padding: 0 8px; border-radius: var(--r-pill); } .wvcktag-check { background: var(--cand-fg); color: var(--on-accent); } .wvcktag-ref { background: var(--bg); color: var(--fg); }  /* 확인 꼬리표 흰 글 5.9:1(검토 M-3) */
.wvckwords { font-size: var(--fs-sm); } .wvcknote { color: var(--muted); }
.wvckchips { display: flex; flex-wrap: wrap; gap: 3px; } .wvckchips .chip { font-size: var(--fs-sm); border: 1px solid var(--line); background: var(--bg); color: var(--muted); } .wvckchips .chip.ev { border-style: dashed; }
.wvckgo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; } .wvckgo .btn { margin: 0; padding: 2px 9px; border: 0; cursor: pointer; font: inherit; font-size: var(--fs-base); }
.wvckgo .lkchip { font-size: var(--fs-sm); }
:is(.wvckgo .btn, .wvckgo .lkchip, .wvckref > summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wvckref { margin: 4px 0 2px; } .wvckref > summary { cursor: pointer; color: var(--fg); } .wvckwhy > p { margin: 6px 0 0; } .wvckwhy ul { margin: 2px 0 2px; padding-left: 18px; }
.smwallfig svg.wvckstrip, .wvplot svg.wvckstrip { height: 14px; margin-top: -1px; border-top: 0; background: #fff; cursor: default; overflow: hidden; }
.wvck { stroke: none; } .wvck-in { fill: #b7dfc6; } .wvck-check { fill: var(--cand); } .wvck-short { fill: var(--cand); fill-opacity: .4; } .wvck-refin { fill: #dfe3e8; }
.wvck-refout { stroke: #4b5563; stroke-width: .6; } .wvckhbg { fill: #9aa1ab; } .wvckhln { stroke: #4b5563; stroke-width: 2.2; }
.wvmk { stroke: #fff; stroke-width: .8; } .wvmk-top { fill: #111827; } .wvmk-floor { fill: #6b4f2a; }
.wvocc { stroke: #b42318; stroke-width: 1.5; fill: none; } .wvhl { fill: var(--cand); opacity: .12; stroke: none; pointer-events: none; }
.wvsw-check { border-color: var(--cand); background: linear-gradient(90deg, #b7dfc6 0 33%, var(--cand) 33% 66%, #9aa1ab 66%); height: 6px; }
.wvsw-ckin, .wvsw-ckcheck, .wvsw-ckshort, .wvsw-ckrefin, .wvsw-ckrefout { height: 8px; border: 1px solid #9ca3af; vertical-align: 0; } .wvsw-ckshort { background: #e9d6b4; border-color: var(--cand); }
.wvsw-ckin { background: #b7dfc6; } .wvsw-ckcheck { background: var(--cand); border-color: var(--cand); } .wvsw-ckrefin { background: #dfe3e8; }
.wvsw-ckrefout { background: repeating-linear-gradient(45deg, #4b5563 0 2px, #9aa1ab 2px 5px); }
.wvckkey { white-space: normal; }
.wvrs.wvckr { height: 8px; border: 0; border-radius: 2px; background: #e5e7eb; vertical-align: 0; } .wvrs.wvck-in { background: #b7dfc6; } .wvrs.wvck-check { background: var(--cand); } .wvrs.wvck-short { background: #e9d6b4; border: 1px solid var(--cand); }
.wvrs.wvck-refin { background: #dfe3e8; } .wvrs.wvck-refout { background: repeating-linear-gradient(45deg, #4b5563 0 2px, #9aa1ab 2px 5px); } .wvrs.wvck-skip { background: none; border: 1px dashed #9ca3af; }
/* 크게 보기 — 창의 96 % × 92 %: 큰 종단(위 60 %) · 횡단(왼쪽 아래) · 한눈에 줄 + 표(오른쪽 아래). 좁은 창(< 900 px)은 세로로 쌓는다 */
.wvdlg { width: 96vw; max-width: 96vw; height: 92vh; max-height: 92vh; padding: 10px 14px 12px; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; box-sizing: border-box; }
.wvdlg[open] { display: flex; flex-direction: column; }
.wvdlg::backdrop { background: rgba(10, 16, 24, .55); }
body:has(.wvdlg[open]) { overflow: hidden; }  /* 열린 동안 뒤 페이지는 밀리지 않음 */
.wvdlghead { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 6px; } .wvdlghead h3 { margin: 0; font-size: var(--fs-lg); }
.wvdlghead .wvctl { margin: 0; } .wvdlgat { display: inline-flex; align-items: center; gap: 6px; } .wvdlgat input { width: 160px; }
.wvdlghead .btn { margin: 0 0 0 auto; }
.wvdlgbody { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr); grid-template-rows: minmax(0, 7fr) minmax(0, 3fr); gap: 8px 14px; }  /* 위 칸은 큰 종단 + 그 밑 읽기 띠 */
.wvbigprof { grid-column: 1 / -1; }
.wvbigprof, .wvbigsec { margin: 0; display: flex; flex-direction: column; min-height: 0; } .wvbigprof figcaption, .wvbigsec figcaption { margin: 0 0 2px; }
.wvbigprof .wvplot, .wvbigsec .wvplot { flex: 1 1 auto; min-height: 0; }
.wvbigprof svg, .wvbigsec svg { display: block; width: 100%; height: 100%; background: #fafbfc; border: 1px solid #eceef1; }
.wvbigside { overflow: auto; min-height: 0; padding-right: 2px; } .wvbigside .wvsum { margin-top: 0; }
@media (max-width: 899px) {
  .wvdlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; padding: 8px 12px; overflow: auto; }
  .wvdlg[open] { display: block; }
  .wvdlgbody { display: flex; flex-direction: column; gap: 10px; }
  .wvbigprof .wvplot { height: 340px; flex: none; } .wvbigsec .wvplot { height: 230px; flex: none; } .wvbigside { overflow: visible; }
  .wvbigprof .wvplot { height: auto; } .wvbigprof svg { height: 340px; }
  .wvdlgat input { width: 120px; }
}
@media (prefers-reduced-motion: no-preference) { .wvdlg[open] { animation: wvopen .14s ease-out; } }
@keyframes wvopen { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .smmain { flex-direction: column; align-items: stretch; } .smwall { flex: 1 1 auto; max-width: none; width: 100%; max-height: none; overflow: visible; } }  /* 좁은 창 — 판 안 스크롤 없이 쪽과 함께 */
/* 「의견」 단추 — 모달 대화창이 열린 동안 숨김(뒤 막 아래에서 눌리지도 않는다), 좁은 창은 판 끝에 단추만큼 빈자리(마지막 글이 단추 밑에 깔리지 않게 — 고침 1 판정 7) */
body:has(dialog:modal) .fb-open { display: none; }
@media (max-width: 900px) { .smwall, .drwall { padding-bottom: 88px; } }  /* 단추(높이 37 + 아래 18) 위로 넉넉히 */

/* 검토 표시 — 도구 띠 · 도면 위 표시 · 말풍선 (markup.js) */
.mktools { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; margin-left: 10px; }
.mktools .cur { outline: 2px solid var(--accent); }
/* 띠의 단추는 사이를 gap 하나로 · 옆 여백을 줄여 M1a 단추(되돌리기 · 다시 하기 · 색 · 굵기)가 늘어도 1280 px 머리가 한 줄 더 늘지 않게 */
.mktools .btn { margin-right: 0; padding-left: 9px; padding-right: 9px; }
.mktools [data-tool] { position: relative; min-width: 3.4em; }  /* 도구 단추 — 잠금 배지의 자리 · 글이 짧아도 누르기 좋은 폭 */
.mkmore { display: inline-flex; } .mkmore #mkmoreface { min-width: 6.1em; border-top-right-radius: 0; border-bottom-right-radius: 0; } .mkmore #mkmorebtn { min-width: 0; padding-left: 5px; padding-right: 5px; border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }  /* 「구름+ ▾」 — 얼굴 + ▾ 한 덩이, 얼굴 폭은 가장 긴 이름 「하이라이트」(13 px 글꼴에서 78.2 px)에 맞춰 얼굴이 바뀌어도 띠가 줄을 바꾸지 않는다 */
.mktools [data-lock]::after { content: "잠금"; position: absolute; top: -10px; right: -8px; padding: 0 4px; border-radius: var(--r-card); background: var(--accent); color: var(--on-accent); font-size: var(--fs-sm); line-height: 16px; pointer-events: none; }  /* 도구 잠금(Shift+누름 · 두 번 누름 · Shift+단축키) — 폭을 먹지 않는 배지라 띠가 줄을 바꾸지 않는다 */
#mkwidth { min-width: 6.9em; }  /* 가장 긴 「굵기 가늘게」 폭 — 굵기를 바꿔도 띠 폭 그대로 */
#mkcount { display: inline-block; min-width: 2ch; font-variant-numeric: tabular-nums; }  /* 표시 수(0 → 1 → 12)가 바뀌어도 층 칸 폭 그대로 — 머리 띠가 줄을 바꿔 도면이 밀리지 않게 */
.mkstyle { display: inline-flex; gap: 4px; } .mkstyle .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; }
.mkmenu { position: fixed; z-index: 62; display: flex; flex-wrap: wrap; gap: 4px; max-width: 260px; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); padding: 6px; box-shadow: var(--shadow-pop); }
.mkmenu button { font: inherit; font-size: var(--fs-base); padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--card); cursor: pointer; }
.mkmenu button[data-color]:not([data-color=""])::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 2px; background: var(--sw); vertical-align: -1px; }
.mkmenu button[aria-checked="true"] { outline: 2px solid var(--accent); }
.mkmenu .mkmenunote { flex-basis: 100%; margin: 0 0 2px; } .mkmenu button.mkdrop { padding: 2px 6px; color: var(--muted); }
.mkmenu .mkpair { display: inline-flex; gap: 2px; }
.mkstyle #mkfill[aria-pressed="true"] { outline: 2px solid var(--accent); }
.mkslot { display: inline-grid; } .mkslot > * { grid-area: 1 / 1; }
.mkkeys { position: fixed; z-index: 62; right: 16px; bottom: 16px; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-card); padding: 10px 14px; font-size: var(--fs-sm); box-shadow: var(--shadow-pop); }
.mkkeys div { display: flex; gap: 10px; padding: 2px 0; } .mkkeys kbd { min-width: 12em; }
/* 연결 알림 · 도구 안내 칸 — 폭 · 높이가 정해진 한 줄(넘치면 …, 다 보려면 마우스를 올린다). 글이 들고 나도 도구 띠가 줄을 바꾸지 않아 도면이 밀리지 않는다(R18) */
#mkstate { display: inline-block; flex: none; width: 19.5em; max-width: 100%; height: 1.5em; line-height: 1.5em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; }
/* 칸 폭 234 px = 19.5em × 12px(.small 의 보조 글 토큰) — 글자 크기가 13 → 12 로 바뀌며 em 만 맞췄다(px 는 그대로, 안내 문장은 이 폭 안에 든다) */
#mkstate > span:not(:empty) + span:not(:empty)::before { content: " · "; }  /* 연결 알림(mkconn)과 도구 안내(mkhint)가 함께 있을 때 */
body:has(.viewer3.embed) .mktools { flex: none; margin-left: 0; padding: 2px 8px; font-size: var(--fs-base); }  /* 옆 칸: 머리줄 아래 한 줄 */
/* 표시 선 굵기는 도면을 얼마나 확대해도 화면 2.5 px — vector-effect 가 굵기를 화면 기준으로 두므로 배율로 나눈 값을 다시 곱하지 않는다(이중 보정이면 12배에서 0.3 px).
   화살촉 · 메모 점은 --u(화면 1 px = 쪽 pt 몇 개, viewer.js sync)를 곱해 화면 기준 크기로 둔다. 점선 길이도 화면 기준. */
.ovl .mk, .ovl .mk * { vector-effect: non-scaling-stroke; }
.ovl .mk { stroke: var(--mkc, #1f5fbf); fill: none; stroke-width: 2.5px; stroke-linejoin: round; cursor: pointer; }
.ovl .mk .head { fill: var(--mkc, #1f5fbf); stroke: none; }
.ovl .mk.note { fill: var(--mkc); fill-opacity: .9; stroke: #fff; stroke-width: 1px; }  /* 메모 = 화면 16 px 말풍선 아이콘 */
.ovl .mk.image { stroke-dasharray: 6px 3px; }
.ovl .mk.thin { stroke-width: 1.25px; } .ovl .mk.thick { stroke-width: 5px; }  /* 표시마다 굵기(M1a) — 보통 2.5 px 의 0.5 · 2 배, 화살촉은 markup.js 가 같은 배수로 */
.ovl .mk.resolved, .ovl .mkimg.resolved { opacity: .5; }  /* 해결된 표시는 지우지 않고 흐리게 + 점선 — 눌림은 그대로 */
.ovl .mk.resolved, .ovl .mkimg.resolved .frame { stroke-dasharray: 7px 5px; }
/* M1b 새 모양 다섯(보기) — 사각형 채움은 옅게(15 %), 하이라이트는 선 없이 옅은 판(35 %, 아래 도면 선이 비친다), 구름+ 는 흰 글 상자 안 9 pt 글(도면과 함께 커짐 · 8 px 밑이면 숨김),
   스탬프는 굵기가 쪽 pt 라 vector-effect 를 끄고(테 · 글자 윤곽이 도면과 함께 커진다) 글자는 흰 선 위에 색 칠, 이 판이 모르는 종류는 회색 점선 둘레 */
.ovl .mk.rect.fill { fill: var(--mkc); fill-opacity: .15; }
.ovl .mk.highlight { fill: var(--mkc); fill-opacity: .35; stroke: none; }
.ovl .mk.cloud_plus .tb { fill: #fff; }
.ovl .mk.cloud_plus .tbtext { font: 9px/1 system-ui, sans-serif; fill: #1d2127; stroke: none; }
.ovl .mkfar .tbtext { display: none; }
.ovl .mk.stamp, .ovl .mk.stamp * { vector-effect: none; }
.ovl .mk.stamp .halo { stroke: #fff; fill: none; } .ovl .mk.stamp .frame { stroke: var(--mkc); fill: none; }
.ovl .mk.stamp .glyph { fill: var(--mkc); stroke: #fff; paint-order: stroke; stroke-linejoin: round; stroke-dasharray: none; }
.ovl .mk.unknown { stroke: #737373; stroke-dasharray: 4px 3px; fill: none; }
.ovl .mk.ghost { stroke: #666; stroke-dasharray: 3px 3px; }
.ovl .mk.ghost .head { fill: #666; }
.ovl .mkimg.ghost { opacity: .6; }
.ovl .moving { opacity: .35; }  /* 끌어 옮기는 중인 원본 — 점선 틀(ghost)이 손을 따라간다 */
/* 고른 표시(M1a) — 화면 1 px 파란 점선 둘레 + 화면 8 px 흰 손잡이(--u 로 확대해도 같은 크기). 누름 판정은 markup.js 가 한다 */
.ovl .mksel { fill: none; stroke: #1f6feb; stroke-width: 1px; stroke-dasharray: 4px 3px; vector-effect: non-scaling-stroke; }
.ovl .mkhandle { fill: #fff; stroke: #1f6feb; stroke-width: 1px; vector-effect: non-scaling-stroke; }
/* 도면 위 글(M1a) — 번호 딱지는 화면 12 px(--u), 테두리 = 지은 사람 색(stroke 속성). 첫 줄은 쪽 pt 9 pt 라 도면과 함께 커지고, 8 px 밑이면 숨는다(.mkfar) */
.ovl .mkbadge { fill: #fff; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.ovl .mkbadgetext { font: 600 12px/1 system-ui, sans-serif; fill: #1d2127; }
.ovl .mkline { font: 9px/1 system-ui, sans-serif; fill: #1d2127; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ovl .mkfar .mkline { display: none; }
.mkhover .ovl rect.bx { pointer-events: none; }  /* 표시 위 — 아래 엔진 상자의 마우스 올림 · 미리보기보다 표시의 풍선이 먼저 */
.mktip { position: fixed; z-index: 61; max-width: 280px; background: var(--fg); color: var(--on-accent); border-radius: var(--r-ctl); padding: 6px 9px; font-size: var(--fs-sm); pointer-events: none; box-shadow: var(--shadow-pop); }
.mktip .mktiphead { font-weight: 600; } .mktip .mktipfoot { color: var(--muted); font-size: var(--fs-sm); }
.mktip .mktiptext { white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }  /* 글 넉 줄 */
.sw.mk { background: #1f5fbf; } .sw.mk.done { background: #9aa0a6; }
.mkpop { position: fixed; z-index: 60; width: 320px; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-card); box-shadow: var(--shadow-pop); padding: 10px 12px; font-size: var(--fs-base); }
.mkpop .mkhead { display: flex; gap: 6px; align-items: center; } .mkpop .x { margin-left: auto; border: 0; background: none; font-size: var(--fs-lg); cursor: pointer; }
.mkpop .mkreplies { list-style: none; padding: 0; margin: 6px 0; max-height: 140px; overflow: auto; } .mkpop .mkreplies li { padding: 4px 0; border-top: 1px solid var(--line); }
.mkpop .mkreply { display: flex; gap: 4px; } .mkpop .mkreply input { flex: 1; } .mkpop .mkacts { margin-top: 6px; display: flex; gap: 4px; }
.mkpop .mkerr { color: var(--bad); margin: 6px 0 0; } .mkpop textarea, .mkpop input { width: 100%; box-sizing: border-box; margin-top: 4px; }
.tag.open { background: var(--tint-accent); color: var(--accent); } .tag.resolved { background: var(--tint-ok); color: var(--ok); }

/* 검토 표시 목록 */
.heads { margin: 4px 0 8px; } .heads .btn { margin-left: 2px; }
.filters select, .filters input, .filters button { font: inherit; font-size: var(--fs-base); } .filters { align-items: center; }
.filters select, .filters input:not([type=checkbox]):not([type=radio]) { height: 32px; }  /* 검토 표시 거르개 select 열두 개 — 높이 32 통일 */
.tag.bad { background: var(--tint-bad); color: var(--bad); }
table.mklist td.mktext { white-space: pre-line; overflow-wrap: anywhere; min-width: 14em; }
table.mklist .rerr { color: var(--bad); font-size: var(--fs-sm); }
table.mklist tr.go { cursor: pointer; } table.mklist tr.go:hover { background: var(--tint-hover); } table.mklist tr.go:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }  /* 행 전체가 그 도면 자리로 가는 길 */

/* 개정 교체 — 개정 보고서 · 이력(설계서 2026-10-11-revision-swap-design.md §3.3 · §3.5) */
table.revtab { border-collapse: collapse; margin: 8px 0 14px; } table.revtab th, table.revtab td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.revtab td.num, table.revtab th.num { text-align: right; } table.revtab tr.unpaired td, table.revtab tr.added td { background: var(--tint-cand-soft); }
.revacts { white-space: nowrap; } .revask select { max-width: 18em; } .revhead { margin: 2px 0 8px; }

/* 개정 교체 — 옛 개정 보기 띠(설계서 §3.4): 「옛 개정 n(이름) — 읽기 전용」 · 「현재 개정의 같은 시트로」 */
.revband { display: flex; gap: 10px; align-items: center; background: var(--tint-cand); border: 1px solid var(--line-cand); border-radius: var(--r-card); padding: 6px 12px; margin: 6px 0; }
.viewer3.old { grid-template-columns: 110px minmax(0, 1fr); }  /* 옆 패널 없음(엔진 값 · 연결은 지금 개정의 것) — 도면 칸을 넓게 */
@media (max-width: 1100px) { .viewer3.old { grid-template-columns: 1fr; } }
/* 겹쳐 보기 · 비교(설계서 2026-10-11-overlay-compare-design.md) — 색은 app/overlay.py 의 OVERLAY_PALETTE 와 같다 */
.viewer3.ovr { grid-template-columns: minmax(0, 1fr) 330px; }
.ovr-sides { margin-left: 8px; font-size: var(--fs-sm); } .tag.ovr-a { background: #fde8e8; color: #dc2626; } .tag.ovr-b { background: #e0f2f1; color: #0d9488; }
.ovr-modes { display: inline-flex; gap: 4px; } .ovr-modes .cur { outline: 2px solid var(--accent); }
.ovr-legend { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.sw.ovr-sa { background: #dc2626; border-color: #dc2626; } .sw.ovr-sb { background: #0d9488; border-color: #0d9488; } .sw.ovr-same { background: #000; border-color: #000; }
.ovr-twohint { margin: 4px 0 0; color: var(--accent); font-weight: 600; }
.ovr-head { display: flex; gap: 6px; align-items: center; margin: 4px 0; } .ovr-head b { margin-right: auto; }
.ovr-list { list-style: none; padding: 0; margin: 0; }
.ovr-list li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 8px; padding: 6px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.ovr-list li.on { background: var(--tint-cand-soft); }
.ovr-thumb { width: 120px; height: 80px; border: 1px solid var(--line); background-color: var(--card); background-repeat: no-repeat; }
.ovr-info { font-size: var(--fs-sm); } .ovr-made { color: var(--ok); } .ovr-rowerr { display: block; }
@media (max-width: 1100px) { .viewer3.ovr { grid-template-columns: 1fr; } }

/* 도면 뷰어의 「비교」 고르기 창 */
.ovr-pick { width: min(560px, 92vw); max-height: 80vh; border: 1px solid var(--line); border-radius: var(--r-card); padding: 10px 14px; }
.ovr-pick::backdrop { background: rgba(0, 0, 0, .25); }
.ovr-pickhead { display: flex; gap: 8px; align-items: center; } .ovr-pickhead .x { margin-left: auto; }
.ovr-pick input[type="text"] { width: 100%; }
.ovr-picklist { list-style: none; padding: 0; margin: 4px 0 8px; max-height: 30vh; overflow: auto; } .ovr-picklist li { padding: 2px 0; }

/* 검토 회차(설계서 2026-10-11-review-rounds-design.md) — 목록 머리 「회차」 칸 · 번호 열 · 뷰어 머리 띠의 열린 회차 */
.roundbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 4px 0 10px; padding: 6px 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-ctl); font-size: var(--fs-base); }
.roundbar form { display: inline-flex; gap: 6px; margin: 0; } .roundbar input[name="name"] { width: 12em; font: inherit; }
.roundbar .rclosed { color: var(--muted); } .roundbar .rerr { color: var(--bad); }
table.mklist td.mkno, .mkpop .mkno { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tag.round { background: var(--tint-accent); color: var(--accent); font-size: var(--fs-sm); }
.rhead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; font-size: var(--fs-base); color: var(--muted); }
.rhead .rerr, #racterr { color: var(--bad); } .rreports .btn { margin-bottom: 4px; }
table.rpeople { width: auto; min-width: 320px; }
ol.ractivity { list-style: none; padding: 0; margin: 0 0 8px; background: var(--card); border: 1px solid var(--line); }
ol.ractivity li { padding: 4px 10px; border-bottom: 1px solid var(--line); font-size: var(--fs-base); } ol.ractivity .when { color: var(--muted); font-variant-numeric: tabular-nums; }

/* AI 분석(설계서 2026-10-12-project-agent-design.md §3.8) — 왼쪽 대화 목록 · 오른쪽 대화 · 아래 질문 칸, 한도 줄은 머리 오른쪽 */
.aghead { display: flex; align-items: baseline; gap: 10px; }
.agbudget { margin-left: auto; font-size: var(--fs-base); padding: 2px 10px; border-radius: var(--r-card); background: var(--bg); color: var(--fg); }
.agbudget.warn { background: var(--tint-cand); color: var(--cand-fg); } .agbudget.over { background: var(--tint-bad); color: var(--bad); font-weight: 600; }
.agbudget[role="button"] { cursor: pointer; }
.notice.agwarn { background: var(--tint-cand); border-left: 3px solid var(--cand); } .notice.agover { background: var(--tint-bad); border-left: 3px solid var(--bad); }
.agbreak { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0; } .agbreak table { width: auto; }
.aglayout { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .aglayout { grid-template-columns: 1fr; } }
.agthreads { position: sticky; top: 10px; }
.agthreads ol { list-style: none; padding: 0; margin: 8px 0; } .agthreads li { padding: 6px 0; border-bottom: 1px solid var(--line); }
.agthreads a[aria-current] { font-weight: 700; }
.agrun { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-3); }
.agquestion { white-space: pre-wrap; margin: 4px 0 6px; font-weight: 600; }
.agsteps summary { cursor: pointer; font-size: var(--fs-base); color: var(--muted); } .agsteps ol { font-size: var(--fs-base); margin: 4px 0; } .agsteps li.bad { color: var(--bad); }
.agstream { white-space: pre-wrap; color: var(--fg); }
.agtext p { margin: 6px 0; } .agtext.cut { opacity: .8; border-left: 3px solid var(--line); padding-left: 8px; }
.chip.agcite { font-size: var(--fs-sm); padding: 0 8px; margin: 0 2px; border-radius: var(--r-pill); background: var(--tint-accent); border-color: transparent; color: var(--accent); } .chip.gone { font-size: var(--fs-sm); color: var(--muted); text-decoration: line-through; }
.agtablebox { margin: 8px 0; } .agtablehead { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.agtable td.num { text-align: right; font-variant-numeric: tabular-nums; }
.agexamples { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; } .agexamples .chip { cursor: pointer; border: 1px solid var(--line-strong); background: var(--card); color: var(--muted); font-size: var(--fs-base); padding: 3px 12px; border-radius: var(--r-pill); }
.agask textarea { width: 100%; padding: 8px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); font: inherit; }
.agbar { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.agtopicbar { display: flex; gap: 10px; align-items: center; margin: 4px 0 8px; } .agtopicbar .chip { cursor: pointer; border: 1px solid var(--line-strong); background: var(--card); color: var(--muted); font-size: var(--fs-base); padding: 3px 12px; border-radius: var(--r-pill); } .agtopicbar .chip:disabled { cursor: default; }
.agtopicbar .chip[aria-pressed="true"] { color: var(--fg); border-color: var(--fg); background: var(--bg); font-weight: 600; }

/* 뷰어 「벽 위 자리」 · 「벽 구간」 층 · 「두 점으로 맞추기」(전개도 매핑 M1, 설계서 2026-10-21 §8.2 · §8.3) — 짐작은 점선, 확정은 실선(대표 답 ③ · G1) */
div.wallpos { border-bottom: 1px solid var(--line); padding: 2px 0 6px; margin-bottom: 6px; } div.wallpos > p { margin: 2px 0 4px; }
.wallpos .wp { border: 2px solid var(--muted); border-radius: var(--r-ctl); padding: 3px 6px; margin: 4px 0; font-size: var(--fs-sm); }
.wallpos .wp.dotted { border: 2px dashed var(--cand); background: var(--tint-cand); }
.wallpos .wp .lkchip { margin-left: 2px; } .wphint { color: var(--cand-fg); margin: 4px 0; }
.wpsaved { margin-top: 6px; } .wpsaved > p { margin: 2px 0; } .wpq, .wpr { margin: 2px 0; } .wpq.orphan > span { color: var(--muted); }
.sw.wallpos { border-color: #7048e8; border-style: dashed; }
.ovl rect.bx.wallpos { stroke: #7048e8; fill: rgba(112, 72, 232, .25); }
.ovl rect.bx.wallpos.cand { stroke: #b45309; fill: none; stroke-dasharray: 6 4; stroke-width: calc(var(--sw, 1.6px) * 1.4); }
dialog.elevpin { position: fixed; inset: 64px 12px auto auto; margin: 0; width: min(520px, 46vw); max-height: calc(100vh - 80px); overflow: auto; z-index: 60;
  border: 1px solid var(--line); border-radius: var(--r-card); padding: 10px 14px; box-shadow: var(--shadow-pop); background: var(--card); }
dialog.elevpin.left { inset: 64px auto auto 12px; }  /* 「반대쪽으로」 — 대화창이 전개도의 누를 자리를 덮을 때 */
.elevpin .epwrap { position: relative; display: inline-block; line-height: 0; margin: 6px 0; border: 1px solid var(--line); }
.elevpin #epimg { display: block; max-width: 100%; max-height: 58vh; width: auto; height: auto; cursor: crosshair; }
.elevpin #epsvg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.elevpin .epring { fill: none; stroke: #0b6e4f; stroke-width: 2; vector-effect: non-scaling-stroke; }
.elevpin .epstr { fill: none; stroke: #7048e8; stroke-width: 1.5; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; }
.elevpin #epprev { font-weight: 600; } .elevpin #epwarn { color: var(--bad); }
.eppt { fill: rgba(214, 51, 108, .25); stroke: #d6336c; stroke-width: 2; vector-effect: non-scaling-stroke; }