/* =========================================================================
   Dr.Check 데이터 및 검증지식관리 LLM — Design OS V2.1 (Verified Interface System)
   토큰 출처: doAZ_design_os_master_guidebook_v2_1.pdf
     p.09 COLOR SYSTEM V2.1 · p.10 TYPOGRAPHY V2 · p.11 LAYOUT SYSTEM
     p.15 AI STATE MODEL · p.16-18 Verdict Card / Evidence Drawer /
     Cross-Verification Board · p.19 DRAWING VIEWER · p.33 ACCESSIBILITY
     p.34 MOTION SYSTEM · p.40 DESIGN QA CHECKLIST
   원칙: 판정 상태는 색만으로 전달하지 않는다 (색 + 라벨 + 아이콘).
        브랜드 블루는 활성 지능·연결·핵심 액션에만. neon 금지. 이모지 금지.
   ========================================================================= */

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root {
  /* Brand · Surface (p.09) */
  --paper:        #FBFAF7;
  /* 회색 4단은 전부 **본문 텍스트로 쓰인다**(캡션·미인식 표시·감사로그 시각 등).
     그래서 4단 모두 가장 어두운 표면(--surface-3 #EAE7DF) 위에서 WCAG AA 본문
     기준 4.5:1 을 넘겨야 한다. 실측 대비(paper/surface/surface-2/surface-3):
       ink   16.16 16.87 15.07 13.65
       ink-2  9.81 10.23  9.15  8.28
       ink-3  6.16  6.43  5.75  5.20
       ink-4  5.45  5.69  5.09  4.61
     이전 값(ink-3 #767E8C · ink-4 #A2A8B4)은 3.31 / **1.93** 이었다. 특히 ink-4 는
     3:1(UI 경계 기준)에도 못 미쳐, 「미인식」 상태 문구(.sheet-card .dname.unk,
     .rail-item .l2.unk)가 사실상 안 읽혔다 — 검토자가 가장 봐야 할 글자였다.
     색조(hue)와 채도는 그대로 두고 명도만 낮춰 위계는 유지했다. */
  --ink:          #1A1D24;
  --ink-2:        #3A4150;
  --ink-3:        #595F69;
  --ink-4:        #5F6776;
  --blue-800:     #1B41B9;
  --blue-600:     #3661EA;
  --cyan-500:     #29AFE6;   /* 연결(link) 표현 · data-viz 전용 */

  --surface:      #FFFFFF;
  --surface-2:    #F4F2ED;
  --surface-3:    #EAE7DF;
  --line:         #E4E1D9;
  --line-strong:  #D5D0C4;

  /* 판정 상태 (p.09) */
  --verified:     #2A7351;
  --warning:      #9A6A16;
  --error:        #B23A2B;
  --review:       #6D5BD0;
  --abstain:      #5C6676;

  --tint-blue:      rgba(54, 97, 234, .10);
  --tint-cyan:      rgba(41, 175, 230, .12);
  --tint-verified:  rgba(42, 115, 81, .10);
  --tint-warning:   rgba(154, 106, 22, .12);
  --tint-error:     rgba(178, 58, 43, .10);
  --tint-review:    rgba(109, 91, 208, .11);
  --tint-abstain:   rgba(92, 102, 118, .10);

  /* Layout (p.11) — base unit 4px */
  --u: 4px;
  --pad-product: 24px;
  --r-ctl:  8px;    /* 컨트롤 (base unit ×2) */
  --r-card: 12px;
  --r-panel:16px;
  --r-lg:   24px;
  --r-xl:   32px;

  /* Typography (p.10) — 3계층. Pretendard 는 vendor/pretendard(동적 부분 집합 — 쓰는 글자 구간의 woff2 만 받는다, OFL)에서 싣는다 — 없으면 Windows 가 맑은 고딕으로 그렸다(검토 P2) */
  --font-product: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
                  'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;
  --font-display: 'Inter', 'Schibsted Grotesk', 'Pretendard Variable', 'Pretendard', -apple-system,
                  'Apple SD Gothic Neo', system-ui, sans-serif;
  --font-mono:    'SF Mono', 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  --t-micro: 11px;     /* 라벨 · 배지 전용 — 문장은 --t-cap 이상(검토 U6: 10.5px 가 가장 많이 쓰인 토큰이었다) */
  --t-cap:   12px;
  --t-sm:    12.5px;
  --t-body:  13.5px;
  --t-lg:    15px;
  --t-h3:    17px;
  --t-h2:    21px;
  --t-h1:    27px;
  /* 쓰이는데 정의가 없던 셋(검토 U2) — 화면 제목이 상속 13.5px 로 브랜드 글자보다 작았다. 기존 단계에 잇는다 */
  --t-small: var(--t-sm);
  --t-md:    var(--t-lg);
  --t-xl:    var(--t-h2);

  /* Elevation · Motion (p.34) */
  --sh-1: 0 1px 2px rgba(26, 29, 36, .06);
  --sh-2: 0 2px 6px rgba(26, 29, 36, .07), 0 1px 2px rgba(26, 29, 36, .05);
  --sh-3: 0 12px 32px -14px rgba(26, 29, 36, .30), 0 2px 6px rgba(26, 29, 36, .06);
  --ease: cubic-bezier(.2, .7, .3, 1);
  --d-fast:   120ms;
  --d-base:   180ms;
  --d-verify: 240ms;   /* motion.duration.verify */
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-product);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
table { border-collapse: collapse; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 8px;
  border: 3px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; border-radius: 4px; }

/* JS 가 채워 넣는 아이콘 슬롯 */
[data-icon] { display: inline-flex; align-items: center; flex-shrink: 0; }
[data-icon] svg { width: 14px; height: 14px; display: block; }
.dz-icon svg { width: 100%; height: 100%; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num  { font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Shell ────────────────────────────────────────────────────────────── */
.shell { display: flex; flex-direction: column; height: 100vh; }

.topbar {
  display: flex; align-items: center; gap: 16px;
  height: 56px; padding: 0 20px; flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-text { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.brand-text h1 {
  font-family: var(--font-display);
  font-size: var(--t-lg); font-weight: 650; letter-spacing: -.02em;
  white-space: nowrap;
}
.brand-text h1 em { font-style: normal; color: var(--blue-800); }
.brand-text .sub {
  font-size: var(--t-cap); color: var(--ink-3); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

.tabs { display: flex; gap: 2px; margin-left: auto; flex-shrink: 0; }
.tab {
  padding: 7px 13px; border-radius: var(--r-ctl);
  font-size: var(--t-sm); font-weight: 550; color: var(--ink-3);
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
  white-space: nowrap;
}
.tab:hover { background: var(--surface-2); color: var(--ink-2); }
.tab.on { background: var(--tint-blue); color: var(--blue-800); }
.tab .tab-n {
  display: inline-block; margin-left: 6px; padding: 0 5px;
  border-radius: 999px; background: var(--surface-3);
  font-family: var(--font-display); font-size: var(--t-micro); color: var(--ink-3);
}
.tab.on .tab-n { background: rgba(27, 65, 185, .14); color: var(--blue-800); }

.top-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.project-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface-2);
  font-size: var(--t-cap); color: var(--ink-2);
  transition: border-color var(--d-fast) var(--ease);
}
.project-chip:hover { border-color: var(--blue-600); }
.project-chip svg { width: 13px; height: 13px; color: var(--blue-600); }
.save-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 10px; border-radius: 999px;
  font-size: var(--t-cap); color: var(--ink-3);
  transition: background var(--d-verify) var(--ease), color var(--d-verify) var(--ease);
}
.save-chip svg { width: 13px; height: 13px; }
.save-chip.saved { background: var(--tint-verified); color: var(--verified); }
.demo-tag {
  padding: 3px 9px; border-radius: 999px;
  background: var(--tint-warning); color: var(--warning);
  font-size: var(--t-micro); font-weight: 600; white-space: nowrap;
}

.view { display: none; flex: 1; min-height: 0; }
.view.on { display: flex; }

/* ── AI State Model (p.15) — 색 + 라벨 + 아이콘 3중 인코딩 ─────────────── */
.state {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px 2px 6px; border-radius: 999px;
  font-size: var(--t-micro); font-weight: 650; letter-spacing: .01em;
  white-space: nowrap; line-height: 1.5;
}
.state svg { width: 11px; height: 11px; flex-shrink: 0; }
.state[data-s="parsed"]      { background: var(--tint-blue);     color: var(--blue-800); }
.state[data-s="linked"]      { background: var(--tint-cyan);     color: #12708F; }
.state[data-s="crosschecked"]{ background: rgba(27,65,185,.13);  color: var(--blue-800); }
.state[data-s="verified"]    { background: var(--tint-verified); color: var(--verified); }
.state[data-s="mismatch"]    { background: var(--tint-error);    color: var(--error); }
.state[data-s="review"]      { background: var(--tint-warning);  color: var(--warning); }
.state[data-s="abstained"]   { background: var(--tint-abstain);  color: var(--abstain); }
.state[data-s="approved"]    { background: var(--verified);      color: #fff; }
.state[data-s="exported"]    { background: var(--tint-review);   color: var(--review); }
.state.lg { font-size: var(--t-cap); padding: 4px 11px 4px 8px; }
.state.lg svg { width: 13px; height: 13px; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 13px;
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  background: var(--surface);
  font-size: var(--t-sm); font-weight: 550; color: var(--ink-2);
  transition: background var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease),
              color var(--d-fast) var(--ease);
  white-space: nowrap;
}
.btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.btn:hover { background: var(--surface-2); border-color: var(--ink-4); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { background: var(--surface); border-color: var(--line-strong); }
.btn.primary {
  background: var(--blue-800); border-color: var(--blue-800); color: #fff;
}
.btn.primary:hover { background: var(--blue-600); border-color: var(--blue-600); }
.btn.on { background: var(--tint-blue); border-color: var(--blue-600); color: var(--blue-800); }
.btn.markup-on { background: var(--error); border-color: var(--error); color: #fff; }
.btn.sm { height: 30px; padding: 0 10px; font-size: var(--t-cap); }   /* 26px 은 트랙패드로 자주 빗나갔다(검토 U6) */
.btn.icon { width: 30px; padding: 0; }
.btn.icon.sm { width: 26px; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-2); border-color: transparent; }

.seg {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  background: var(--surface); overflow: hidden; height: 32px;
}
.seg > button {
  height: 100%; padding: 0 9px; font-size: var(--t-sm); color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--d-fast) var(--ease);
}
.seg > button:hover { background: var(--surface-2); }
.seg > button + button, .seg > span + button { border-left: 1px solid var(--line); }
.seg > span {
  padding: 0 8px; font-family: var(--font-display); font-size: var(--t-sm);
  color: var(--ink-3); font-variant-numeric: tabular-nums; user-select: none;
  min-width: 48px; text-align: center;
}
.seg svg { width: 14px; height: 14px; }
.vr { width: 1px; height: 20px; background: var(--line); flex-shrink: 0; }

.field {
  height: 32px; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl);
  background: var(--surface); font-size: var(--t-sm); color: var(--ink);
  transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.field::placeholder { color: var(--ink-4); }
.field:focus {
  outline: none; border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(54, 97, 234, .13);
}
textarea.field { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.5; }
select.field { padding-right: 6px; }

.chip {
  height: 26px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface);
  font-size: var(--t-cap); font-weight: 550; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 5px;
  transition: border-color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.chip:hover { border-color: var(--ink-4); color: var(--ink-2); }
.chip.on { background: var(--tint-blue); border-color: var(--blue-600); color: var(--blue-800); }

.rail-title {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px 8px;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0;
  color: var(--ink-3);
}
.rail-title b {
  font-family: var(--font-display); font-size: var(--t-cap);
  letter-spacing: 0; text-transform: none; color: var(--ink-2);
}

.panel-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-panel); padding: 18px 20px;
}
.panel-card > h3 {
  font-family: var(--font-display); font-size: var(--t-h3);
  font-weight: 650; letter-spacing: -.015em; margin-bottom: 3px;
}
.panel-card > .sub { font-size: var(--t-cap); color: var(--ink-3); margin-bottom: 14px; }

.block-title {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0;
  color: var(--ink-3); margin-bottom: 7px;
}
.note {
  font-size: var(--t-cap); color: var(--ink-3); line-height: 1.65;
}
.note b { color: var(--ink-2); font-weight: 600; }

/* =========================================================================
   VIEW 1 — 시작 (Intake) : 업로드 → 파싱 → 낱장 분리
   ========================================================================= */
#viewIntake { flex-direction: column; overflow-y: auto; }
.intake-wrap {
  width: 100%; max-width: 1240px; margin: 0 auto;
  padding: 28px var(--pad-product) 56px;
}
.intake-head { margin-bottom: 20px; }
.intake-head .kicker {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0;
  color: var(--blue-600); margin-bottom: 8px;
}
.intake-head h2 {
  font-family: var(--font-display);
  font-size: var(--t-h1); font-weight: 680; letter-spacing: -.03em; line-height: 1.2;
}
.intake-head p { font-size: var(--t-lg); color: var(--ink-2); margin-top: 8px; max-width: 62ch; }

.drop-zone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 40px 24px; text-align: center;
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--d-base) var(--ease), background var(--d-base) var(--ease);
  cursor: pointer;
}
.drop-zone:hover, .drop-zone.hot { border-color: var(--blue-600); background: rgba(54, 97, 234, .04); }
.drop-zone.hot { border-style: solid; }
.drop-zone .dz-icon {
  width: 40px; height: 40px; color: var(--blue-600);
  background: var(--tint-blue); border-radius: var(--r-card);
  display: grid; place-items: center;
}
.drop-zone .dz-icon svg { width: 21px; height: 21px; }
.drop-zone b { font-size: var(--t-lg); font-weight: 620; }
.drop-zone span { font-size: var(--t-sm); color: var(--ink-3); }
.drop-zone .dz-local {
  margin-top: 2px; font-size: var(--t-micro); color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 5px;
}
.drop-zone .dz-local i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--verified); display: block;
}
/* 도면이 올라온 뒤(2026-10-22 대표 지적): 큰 올리기 상자 · 큰 제목을 접어 도면 목록이 위로 — 첫 사용 때만 크게 */
#viewIntake.has-sheets .intake-head { margin-bottom: 10px; }
#viewIntake.has-sheets .intake-head h2 { font-size: var(--t-xl); }
#viewIntake.has-sheets .intake-head p { display: none; }
#viewIntake.has-sheets .drop-zone { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 9px 14px; text-align: left; }
#viewIntake.has-sheets .drop-zone .dz-icon { width: 26px; height: 26px; border-radius: 8px; }
#viewIntake.has-sheets .drop-zone .dz-icon svg { width: 14px; height: 14px; }
#viewIntake.has-sheets .drop-zone b { font-size: var(--t-sm); }
#viewIntake.has-sheets .drop-zone > span:not(.dz-local) { font-size: var(--t-cap); }
#viewIntake.has-sheets .drop-zone .dz-local { margin: 0 0 0 auto; }

/* 통계 띠(2026-10-22 대표 지적: 큰 카드가 본문을 아래로 민다) — 시작 · 프로젝트 · 닥터체크 DB 가 같은 띠. .stat 카드 꼴은 띠 밖에서만 */
.stat-row, .proj-stats, .db-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin: 10px 0 0; padding: 0 2px; }
.stat-row .stat, .proj-stats .stat, .db-stats .stat { background: none; border: 0; border-radius: 0; padding: 0; min-width: 0; display: inline-flex; align-items: baseline; gap: 6px; }
.stat-row .stat b, .proj-stats .stat b, .db-stats .stat b { display: inline; font-size: 15px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-row .stat span, .proj-stats .stat span, .db-stats .stat span { font-size: var(--t-cap); }
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 14px 16px;
}
.stat > span::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px;
  background: var(--stat-c, var(--line-strong)); }   /* 옆 줄무늬(3px) 대신 앞 점 — 둥근 카드에 한쪽 띠는 템플릿 티(검토 FINDING-009) */
.stat b {
  display: block; font-family: var(--font-display);
  font-size: 26px; font-weight: 680; letter-spacing: -.03em; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: var(--t-cap); color: var(--ink-3); }
.stat.s1 { --stat-c: var(--blue-800); }
.stat.s2 { --stat-c: var(--cyan-500); }
.stat.s3 { --stat-c: var(--verified); }
.stat.s4 { --stat-c: var(--abstain); }
.stat.s4 b { color: var(--abstain); }
.stat.s5 { --stat-c: var(--review); }

.parse-log {
  margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface); overflow: hidden;
}
.parse-log:empty { display: none; }   /* 빈 상자가 띠 하나만큼 자리를 차지하던 것(2026-10-22) */
.parse-file {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: var(--t-sm);
}
.parse-file:last-child { border-bottom: none; }
.parse-file .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parse-file .meta { color: var(--ink-3); font-size: var(--t-cap); white-space: nowrap; }
.bar { width: 110px; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.bar > i {
  display: block; height: 100%; background: var(--blue-600); border-radius: 2px;
  transition: width var(--d-verify) var(--ease);
}

.sheet-toolbar {
  display: flex; align-items: center; gap: 8px; margin: 14px 0 10px; flex-wrap: wrap;
}
.sheet-toolbar h3 {
  font-family: var(--font-display); font-size: var(--t-h3);
  font-weight: 650; letter-spacing: -.015em;
}
.sheet-toolbar .spacer { flex: 1; }

.sheet-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 12px;
}
.sheet-card {
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface); overflow: hidden; text-align: left;
  transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease),
              transform var(--d-fast) var(--ease);
  display: flex; flex-direction: column;
}
.sheet-card:hover {
  border-color: var(--blue-600); box-shadow: var(--sh-2); transform: translateY(-1px);
}
.sheet-card .thumb {
  aspect-ratio: 4 / 3; background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  display: grid; place-items: center; overflow: hidden; position: relative;
}
.sheet-card .thumb canvas, .sheet-card .thumb img {
  max-width: 100%; max-height: 100%; display: block; object-fit: contain;
}
.sheet-card .thumb .ph {
  font-size: var(--t-micro); color: var(--ink-4);
}
.sheet-card .thumb .pg {
  position: absolute; left: 6px; top: 6px;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(26, 29, 36, .72); color: #fff;
  font-family: var(--font-display); font-size: var(--t-micro); font-variant-numeric: tabular-nums;
}
.sheet-card .body { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 5px; }
.sheet-card .dno {
  font-family: var(--font-mono); font-size: var(--t-cap); font-weight: 600; color: var(--blue-800);
}
.sheet-card .dno.unk { color: var(--abstain); font-family: var(--font-product); font-weight: 550; }
/* 값은 읽혔으나 잘림·구분자 누락이 의심되는 값 — 인식 건수에 넣지 않고 눈에 띄게 구분한다 */
.sheet-card .dno.low { color: var(--warn, #b26a00); }
.rail-item .dno.low { color: var(--warn, #b26a00); }
.sheet-card .dname {
  font-size: var(--t-sm); color: var(--ink); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sheet-card .dname.unk { color: var(--ink-4); }
.sheet-card .foot { display: flex; align-items: center; gap: 6px; margin-top: 1px; }
.sheet-card .foot .src {
  font-size: var(--t-micro); color: var(--ink-4); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

.empty-hint {
  padding: 44px 24px; text-align: center; color: var(--ink-3);
  border: 1px dashed var(--line-strong); border-radius: var(--r-card);
  font-size: var(--t-sm); line-height: 1.7;
}

/* AI State Model 진행 레일 (p.15) */
.state-rail {
  display: flex; align-items: stretch; gap: 6px; margin-top: 18px; flex-wrap: wrap;
}
.state-step {
  flex: 1 1 120px; min-width: 118px;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--surface); padding: 9px 11px;
  opacity: .5; transition: opacity var(--d-verify) var(--ease), border-color var(--d-verify) var(--ease);
}
.state-step.active { opacity: 1; border-color: var(--line-strong); }
.state-step .n {
  font-family: var(--font-display); font-size: var(--t-micro);
  color: var(--ink-4); font-weight: 700;
}
.state-step .lbl { font-size: var(--t-sm); font-weight: 600; margin: 1px 0 2px; }
.state-step .dsc { font-size: var(--t-micro); color: var(--ink-3); line-height: 1.45; }
.state-step .cnt {
  font-family: var(--font-display); font-size: var(--t-cap);
  font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 600;
}

/* =========================================================================
   VIEW 2 — 검토 AI
   레이아웃: 낱장 레일 | 도면 뷰어(먼저) | Verdict/Evidence | 하단 데이터 그리드
   ========================================================================= */
#viewCockpit { flex-direction: column; }
.cockpit-main { display: flex; flex: 1; min-height: 0; --rail-w: 224px; --panel-w: 372px; }
/* 경계선 — 끌어서 목록·도면·패널 폭을 바꾼다(2026-09-03). 폭은 CSS 변수로 두고 JS 가 변수만 바꾼다. */
.gutter { width: 6px; flex-shrink: 0; cursor: col-resize; background: transparent; position: relative; z-index: 2; margin: 0 -3px; }
.gutter:hover, .gutter.on { background: var(--blue-600); }
body.resizing { cursor: col-resize; user-select: none; }
/* 끄는 동안은 폭 전환 애니메이션을 끈다 — 켜 두면 패널이 커서를 뒤따라오고, 측정도 중간값을 준다(실측) */
body.resizing .verdict-wrap, body.resizing .sheet-rail { transition: none; }

/* 좌 — 낱장 레일 */
.sheet-rail {
  width: var(--rail-w, 224px); min-width: 176px; flex-shrink: 0;
  border-right: 1px solid var(--line); background: var(--surface);
  display: flex; flex-direction: column; min-height: 0;
}
.rail-search { padding: 0 10px 9px; position: relative; }
.rail-search .field { width: 100%; padding-left: 29px; height: 30px; }
.rail-search svg {
  position: absolute; left: 19px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; color: var(--ink-4); pointer-events: none;
}
.rail-list { flex: 1; overflow-y: auto; padding: 0 6px 10px; }
.rail-item {
  display: block; width: 100%; text-align: left;
  padding: 7px 9px; border-radius: var(--r-ctl);
  border-left: 2px solid transparent;
  transition: background var(--d-fast) var(--ease);
}
.rail-item:hover { background: var(--surface-2); }
.rail-item.on { background: var(--tint-blue); border-left-color: var(--blue-800); }
.rail-item .l1 { display: flex; align-items: center; gap: 5px; }
.rail-item .pg {
  font-family: var(--font-display); font-size: var(--t-micro);
  color: var(--ink-3); background: var(--surface-3);
  padding: 0 5px; border-radius: 4px; flex-shrink: 0;
}
.rail-item.on .pg { background: rgba(27, 65, 185, .14); color: var(--blue-800); }
.rail-item .dno {
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  color: var(--blue-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail-item .dno.unk { color: var(--abstain); font-family: var(--font-product); }
.rail-item .mk {
  margin-left: auto; flex-shrink: 0; min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 999px; background: var(--tint-error); color: var(--error);
  font-family: var(--font-display); font-size: var(--t-micro); font-weight: 700;
  display: grid; place-items: center;
}
.rail-item .l2 {
  font-size: var(--t-cap); color: var(--ink-2); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail-item .l2.unk { color: var(--ink-4); }

/* 중앙 — 도면 뷰어 */
.viewer-col { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.viewer-bar {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 9px 12px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.viewer-bar .doc-label {
  font-size: var(--t-sm); color: var(--ink-2); min-width: 130px; max-width: 240px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center;
}
.viewer-bar label { display: inline-flex; align-items: center; gap: 6px; }
.viewer-bar label > span { font-size: var(--t-cap); color: var(--ink-3); white-space: nowrap; }

.viewer-split { flex: 1; display: flex; min-height: 0; }
.viewer-pane {
  flex: 1; min-width: 0; overflow: auto; padding: 24px;
  background-color: #EDEFF3;
  background-image:
    linear-gradient(rgba(54, 97, 234, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 97, 234, .07) 1px, transparent 1px);
  background-size: 28px 28px;
  cursor: grab;
}
.viewer-pane.panning { cursor: grabbing; }
.canvas-stack {
  margin: 0 auto; position: relative; background: #fff;
  box-shadow: var(--sh-3); border-radius: 2px;
}
.canvas-stack canvas { display: block; width: 100%; height: 100%; }
/* 오버레이는 늘 포인터를 받는다 — 연결 기호 · 실 구역 · 지난 의견 핀의 클릭 · 호버가 여기 있다(none 이던 8월 규칙 때문에 마크 모드 밖에서는
   한 번도 닿지 않았다, 10-11 실측). 끌기(이동)는 viewerPane 으로 올라가 그대로 동작하고, 손가락 스크롤은 touch-action 이 맡는다 */
.canvas-stack .overlay { position: absolute; inset: 0; pointer-events: auto; }
.canvas-stack .overlay.armed { cursor: crosshair; }
.viewer-empty {
  height: 100%; display: grid; place-items: center;
  color: var(--ink-3); font-size: var(--t-sm); text-align: center; line-height: 1.8;
}

/* 비교 페인 (Cross-Verification: 도면 ↔ 도면) */
.compare-pane {
  flex: 1; min-width: 0; display: none; flex-direction: column;
  border-left: 1px solid var(--line); background: var(--surface);
}
.compare-pane.on { display: flex; }
.compare-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.compare-bar .lbl {
  font-size: var(--t-cap); color: var(--ink-2); max-width: 170px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.compare-body { flex: 1; min-height: 0; overflow: auto; padding: 24px;   /* 왼쪽 창(.viewer-pane 24px)과 같은 여백 — 두 도면의 위 끝이 같은 줄 */
  background-color: #EDEFF3;
  background-image:
    linear-gradient(rgba(54, 97, 234, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(54, 97, 234, .07) 1px, transparent 1px);
  background-size: 28px 28px; cursor: grab;
}
.compare-body.panning { cursor: grabbing; }

/* 우 — Verdict / Evidence */
.verdict-col {
  width: 372px; min-width: 300px; flex-shrink: 0;
  border-left: 1px solid var(--line); background: var(--surface);
  overflow-y: auto; padding: 14px 16px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
/* flex 자식은 기본적으로 줄어든다 — 이걸 막지 않으면 카드가 눌려서
   원본 참조·판정 버튼이 overflow:hidden 안쪽으로 잘려 사라진다
   (컬럼은 scrollHeight == clientHeight 가 되어 스크롤조차 생기지 않는다). */
.verdict-col > * { flex: 0 0 auto; }

/* Verdict Card (p.16) — 1 상태 / 2 원본참조 / 3 계산추적 / 4 신뢰도 / 5 액션 / 6 감사로그 */
.verdict-card {
  border: 1px solid var(--line); border-radius: var(--r-panel);
  background: var(--surface); overflow: hidden;
}
.verdict-card > .vc-head {
  padding: 13px 15px 12px; border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.verdict-card > .vc-head .vc-title {
  font-size: var(--t-lg); font-weight: 620; letter-spacing: -.01em;
  margin-top: 8px; line-height: 1.4;
}
.verdict-card > .vc-head .vc-desc {
  font-size: var(--t-sm); color: var(--ink-2); margin-top: 4px; line-height: 1.55;
}
.vc-section { padding: 12px 15px; border-bottom: 1px solid var(--line); }
.vc-section:last-child { border-bottom: none; }

/* Source Row (p.06 pattern) */
.source-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 5px 9px; border-radius: 6px; background: var(--surface-2);
  font-family: var(--font-mono); font-size: var(--t-cap);
  color: var(--ink-2); line-height: 1.6; margin-bottom: 4px;
  overflow-wrap: anywhere;
}
.source-row:last-child { margin-bottom: 0; }
.source-row .k { color: var(--ink-3); flex-shrink: 0; }
.source-row .v { color: var(--ink); }
.source-row.link { background: var(--tint-cyan); }
.source-row.warn { background: var(--tint-warning); color: var(--warning); }
.source-row.abstain { background: var(--tint-abstain); color: var(--abstain); }

/* Confidence Meter (p.07 pattern) — 숫자 하나가 아니라 이유와 함께 */
.conf { display: flex; flex-direction: column; gap: 5px; }
.conf-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.conf-lv { font-family: var(--font-display); font-size: var(--t-cap); font-weight: 700; }
.conf-bar { height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; display: flex; gap: 2px; }
.conf-bar i { display: block; height: 100%; flex: 1; border-radius: 2px; background: var(--surface-3); }
.conf-bar i.f { background: currentColor; }
.conf[data-lv="HIGH"]   { color: var(--verified); }
.conf[data-lv="MEDIUM"] { color: var(--warning); }
.conf[data-lv="LOW"]    { color: var(--abstain); }
.conf-why { font-size: var(--t-micro); color: var(--ink-3); line-height: 1.55; }

/* 사람의 액션 */
.action-row { display: flex; gap: 6px; flex-wrap: wrap; }
.action-row .btn { flex: 1 1 auto; }
.btn.approve { background: var(--verified); border-color: var(--verified); color: #fff; }
.btn.approve:hover { background: #236244; border-color: #236244; }
.btn.reject { border-color: rgba(178, 58, 43, .4); color: var(--error); }
.btn.reject:hover { background: var(--tint-error); border-color: var(--error); }

/* 감사 로그 (Audit trail) */
.audit-list { display: flex; flex-direction: column; gap: 0; max-height: 168px; overflow-y: auto; }
.audit-item {
  display: grid; grid-template-columns: 56px 1fr; gap: 8px;
  padding: 5px 0; border-bottom: 1px dashed var(--line);
  font-size: var(--t-micro); line-height: 1.5;
}
.audit-item:last-child { border-bottom: none; }
.audit-item .ts { font-family: var(--font-mono); color: var(--ink-4); }
.audit-item .ev b { font-weight: 650; }
.audit-item .ev span { color: var(--ink-3); }
.audit-empty { font-size: var(--t-micro); color: var(--ink-4); }

/* AI 5필드 초안 */
.ai5-row {
  display: grid; grid-template-columns: 40px 1fr; gap: 8px;
  padding: 5px 0; border-bottom: 1px dashed var(--line);
  font-size: var(--t-cap); line-height: 1.55;
}
.ai5-row:last-child { border-bottom: none; }
.ai5-row .k { color: var(--ink-3); font-weight: 600; }
.ai5-row .v { color: var(--ink); }
.ai5-row .v.unk { color: var(--abstain); font-style: normal; }
.draft-flag {
  margin-top: 8px; padding: 7px 10px; border-radius: 6px;
  background: var(--tint-warning); color: var(--warning);
  font-size: var(--t-micro); line-height: 1.55; font-weight: 550;
}

/* 하단 데이터 그리드 */
.grid-dock {
  height: 226px; min-height: 96px; flex-shrink: 0;
  border-top: 1px solid var(--line); background: var(--surface);
  display: flex; flex-direction: column; position: relative;
}
.dock-handle {
  position: absolute; top: -4px; left: 0; right: 0; height: 9px;
  cursor: row-resize; z-index: 6; display: grid; place-items: center;
}
.dock-handle i {
  display: block; width: 42px; height: 3px; border-radius: 2px;
  background: var(--line-strong); transition: background var(--d-fast) var(--ease);
}
.dock-handle:hover i { background: var(--blue-600); }
.dock-head {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
/* nowrap + 축소 금지가 없으면 좁은 화면에서 flex 가 제목을 최소 폭까지 눌러
   "검/증/데/이/터" 처럼 한 글자씩 세로로 쌓인다. */
.dock-head .t {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  font-size: var(--t-sm); font-weight: 620; white-space: nowrap;
}
.dock-head .t svg { width: 15px; height: 15px; color: var(--blue-600); }
.dock-head .cnt {
  padding: 1px 7px; border-radius: 999px; background: var(--tint-blue);
  color: var(--blue-800); font-family: var(--font-display);
  font-size: var(--t-micro); font-weight: 650;
}
.dock-head .spacer { flex: 1; }
.dock-body { flex: 1; overflow: auto; }

table.grid { width: 100%; font-size: var(--t-sm); }
table.grid thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  padding: 7px 11px; text-align: left;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0;
  color: var(--ink-3); white-space: nowrap;
}
table.grid tbody td {
  padding: 7px 11px; border-bottom: 1px solid var(--line);
  vertical-align: middle; color: var(--ink-2);
}
table.grid tbody tr { transition: background var(--d-fast) var(--ease); }
table.grid tbody tr:hover { background: var(--surface-2); }
table.grid tbody tr.sel { background: var(--tint-blue); }
table.grid .no {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 999px; background: var(--tint-error); color: var(--error);
  font-family: var(--font-display); font-size: var(--t-micro); font-weight: 700;
}
table.grid .ttl { color: var(--ink); font-weight: 550; }
table.grid .crop {
  height: 38px; border-radius: 5px; border: 1px solid var(--line-strong);
  display: block; cursor: zoom-in; transition: box-shadow var(--d-fast) var(--ease);
}
table.grid .crop:hover { box-shadow: 0 0 0 2px var(--blue-600); }
table.grid .row-acts { display: flex; gap: 3px; justify-content: center; }
.grid-empty { padding: 26px; text-align: center; color: var(--ink-3); font-size: var(--t-sm); }

/* 마크업 저작 팝업 (클라우드 마크 → 자동 저작) */
/* 검토의견 작성 팝업 — 세 가지를 고쳤다(2026-09-03, 사용자 지시).
   ① 시작 위치를 마우스 옆이 아니라 **화면 우측에 붙인다** — 커서를 따라오면 도면
      한복판을 가려 방금 그린 마크가 안 보인다.
   ② 창 전체가 스크롤하던 것을 **머리·바닥 고정 + 본문만 스크롤**로 바꿨다.
      전에는 아래로 굴려야 취소·저장이 나왔다.
   ③ 머리에 잡이와 「끌어서 이동」 글자를 넣었다 — 옮길 수 있다는 것을 알 길이
      cursor:move 뿐이어서, 마우스를 올리기 전에는 아무도 몰랐다. */
.markup-pop {
  position: fixed; z-index: 80; width: 380px;
  max-height: calc(100vh - 24px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-panel); box-shadow: var(--sh-3);
  padding: 13px 16px 0;
  animation: pop var(--d-base) var(--ease);
}
.mp-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; padding-bottom: 4px; }
.mp-grip {
  width: 22px; height: 4px; border-radius: 2px; flex-shrink: 0;
  background:
    radial-gradient(circle 1px at 3px 1px, var(--ink-4) 99%, transparent 100%),
    radial-gradient(circle 1px at 11px 1px, var(--ink-4) 99%, transparent 100%),
    radial-gradient(circle 1px at 19px 1px, var(--ink-4) 99%, transparent 100%),
    radial-gradient(circle 1px at 3px 4px, var(--ink-4) 99%, transparent 100%),
    radial-gradient(circle 1px at 11px 4px, var(--ink-4) 99%, transparent 100%),
    radial-gradient(circle 1px at 19px 4px, var(--ink-4) 99%, transparent 100%);
}
.mp-move {
  margin-left: auto; font-size: var(--t-micro); color: var(--ink-4);
  white-space: nowrap; user-select: none;
}
.markup-pop .mp-head:hover .mp-move { color: var(--ink-3); }
.markup-pop[hidden] { display: none; }
@keyframes pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.mp-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.mp-head svg { width: 15px; height: 15px; color: var(--error); }
.mp-head h4 { font-size: var(--t-lg); font-weight: 620; letter-spacing: -.01em; }
.mp-sub { font-size: var(--t-micro); color: var(--ink-3); margin-bottom: 11px; line-height: 1.5; }
.mp-evidence {
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--surface-2); overflow: hidden; margin-bottom: 11px;
}
.mp-evidence .cap {
  padding: 5px 9px; border-bottom: 1px solid var(--line);
  font-size: var(--t-micro); font-weight: 650; color: var(--ink-3);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.mp-evidence img { display: block; width: 100%; max-height: 132px; object-fit: contain; background: #fff; }
.mp-evidence .noimg { padding: 14px; text-align: center; font-size: var(--t-micro); color: var(--ink-4); }
.mp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 8px; }
.mp-grid.one { grid-template-columns: 1fr; }
.mp-label {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
  font-size: var(--t-micro); font-weight: 650; color: var(--ink-3);
}
.mp-label .auto {
  padding: 0 5px; border-radius: 4px; font-weight: 600;
  background: var(--tint-blue); color: var(--blue-800);
}
.mp-label .auto[data-k="abstain"] { background: var(--tint-abstain); color: var(--abstain); }
.markup-pop .field { width: 100%; }
.mp-actions {
  flex-shrink: 0;
  display: flex; justify-content: flex-end; gap: 7px;
  margin: 0 -16px; padding: 10px 16px 13px;
  background: var(--surface); border-top: 1px solid var(--line);
}

/* 추출된 도면 문자 = 자동 저작의 유일한 근거원 */
.mp-extract {
  margin-top: 9px; border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--surface-2); padding: 8px 10px;
}
.mp-extract .hd {
  font-size: var(--t-micro); font-weight: 650; color: var(--ink-3); margin-bottom: 5px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.mp-extract .ln {
  font-family: var(--font-mono); font-size: var(--t-micro); color: var(--ink-2);
  line-height: 1.6; overflow-wrap: anywhere;
}
.mp-extract .ln + .ln { border-top: 1px dashed var(--line); padding-top: 3px; margin-top: 3px; }
.mp-extract .dims { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.mp-extract .dims b {
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  padding: 1px 6px; border-radius: 4px; background: var(--tint-blue); color: var(--blue-800);
}
.mp-abstain {
  margin-top: 9px; padding: 10px 12px; border-radius: var(--r-ctl);
  background: var(--tint-abstain); color: var(--abstain);
  font-size: var(--t-cap); line-height: 1.6;
}

/* 근거 권위 배지 — 조항 임의 생성 금지 규칙의 시각화 */
.auth {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 4px;
  font-size: var(--t-micro); font-weight: 650; white-space: nowrap;
}
.auth[data-a="CHECKLIST"]        { background: var(--tint-blue);   color: var(--blue-800); }
.auth[data-a="DESIGN_DOCUMENT"]  { background: var(--tint-cyan);   color: #12708F; }
.auth[data-a="DRAWING_CITATION"] { background: var(--surface-3);   color: var(--ink-2); }
.auth[data-a="UNKNOWN"]          { background: var(--tint-abstain); color: var(--abstain); }
.unverified { font-size: var(--t-micro); color: var(--warning); font-weight: 600; }

/* 오버레이 재확인 배너 */
.viewer-hint {
  position: absolute; left: 16px; right: 16px; bottom: 14px; width: fit-content; margin: 0 auto;   /* 가운데 · 글이 길면 양쪽 16px 까지 넓어진다(left 50% 이면 폭이 절반에 묶여 세 줄로 접혔다) */
  z-index: 5; padding: 6px 13px; border-radius: 999px;
  background: rgba(26, 29, 36, .86); color: #fff;
  font-size: var(--t-cap); font-weight: 550; pointer-events: none;
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap; max-width: calc(100% - 32px);
}
.viewer-hint svg { width: 13px; height: 13px; }
.viewer-hint[hidden] { display: none; }
.viewer-hint .ms-actions, .viewer-hint .ms-scale { pointer-events: auto; }
.viewer-hint .ms-scale { font-weight: 600; }
.viewer-hint .ms-actions .btn { height: 24px; padding: 0 8px; font-size: 11px; }
.ms-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px dashed var(--line); font-size: var(--t-sm); }
.ms-row .ms-v { font-weight: 700; color: #B45309; min-width: 72px; }
.ms-row .field { height: 26px; font-size: 11px; flex: 1; min-width: 0; }
.ms-row .ms-t { color: var(--ink-3); min-width: 30px; }
.ms-row .ms-sc { display: block; font-size: 11px; font-weight: 500; color: var(--ink-3); white-space: nowrap; line-height: 1.2; }
.ms-row .ms-sc.unsure { color: #B45309; font-weight: 700; }
.ms-row > .ms-sc { display: inline-block; font-size: 11px; color: var(--ink-2); padding: 1px 6px; border: 1px solid var(--line); border-radius: 10px; }
.ms-note { margin: 2px 0 4px; font-size: 11px; }
.ms-note.ms-warn { color: #B45309; font-weight: 600; }
/* 마크 모양 고르개 — 안내 띠 앞머리. 띠는 도면 위에 떠 있어 포인터를 받지 않고, 고르개만 받는다 */
.viewer-hint .mk-shapes { pointer-events: auto; display: inline-flex; gap: 2px; padding: 2px; margin-left: -8px; border-radius: 999px; background: rgba(255, 255, 255, .1); flex-shrink: 0; }
.mk-shapes button {
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px 0 9px;
  border: 0; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, .8);
  font: inherit; font-size: var(--t-cap); font-weight: 600; cursor: pointer;
  transition: background-color 120ms cubic-bezier(.2, .7, .3, 1), color 120ms cubic-bezier(.2, .7, .3, 1);
}
.mk-shapes button:hover { color: #fff; background: rgba(255, 255, 255, .14); }
.mk-shapes button[aria-checked="true"] { background: #fff; color: var(--ink); }
.mk-shapes button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.mk-shapes button span { display: inline-flex; }
.mk-shapes button svg { width: 14px; height: 14px; }
#viewerHintText, #viewerHintBs { min-width: 0; white-space: normal; line-height: 1.35; }   /* 기본 한 줄 안내도 좁은 화면에서 접힌다(띠 밖으로 넘치지 않게, 검토 2차) */
@media (prefers-reduced-motion: reduce) { .mk-shapes button { transition: none; } }
@media (max-width: 640px) {
  .viewer-hint { left: 8px; right: 8px; max-width: none; flex-wrap: wrap; justify-content: center; border-radius: 18px; row-gap: 4px; }
  .viewer-hint .mk-shapes { margin-left: 0; }
  #viewerHintText, #viewerHintBs { text-align: center; }
}

/* =========================================================================
   VIEW 3 — 검토의견 DB
   ========================================================================= */
#viewDb { flex-direction: column; overflow: hidden; padding: 12px var(--pad-product) 0; gap: 8px; }
/* 통계 띠(2026-10-22) — 큰 카드 넷 대신 한 줄: 목록이 위로 올라온다 */
.db-stats { flex-shrink: 0; margin: 0; }
.db-filters { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; flex-shrink: 0; }
.db-filters .db-search { margin-left: auto; width: 240px; min-width: 180px; }
/* 거르개 내림 메뉴(2026-10-22) — 축마다 하나, 한 줄 */
.db-facets { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.db-sel { display: inline-flex; align-items: center; gap: 4px; }
.db-sel .k { font-size: var(--t-micro); color: var(--ink-3); white-space: nowrap; }
.db-sel select { font: inherit; font-size: var(--t-sm); color: var(--ink); padding: 3px 22px 3px 7px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); width: auto; max-width: 170px; cursor: pointer; }
.db-sel select:hover { border-color: var(--ink-4); }
.db-sel select:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 1px; }
.db-sel select:has(option:checked:not([value=""])) { border-color: var(--blue-600); background: var(--tint-blue); color: var(--blue-800); }
.db-filters .lbl {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0;
  color: var(--ink-3);
}
.db-search { width: 260px; margin-left: auto; }
.db-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 384px; gap: 12px; min-height: 0; padding-bottom: 16px; }
.db-table-wrap {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-panel); overflow: auto; min-height: 0;
}
.db-shown { padding: 9px 14px; font-size: var(--t-micro); color: var(--ink-3); }
.lhlib-f[data-db-proj] { cursor: pointer; }
.lhlib-f[data-db-proj]:hover { border-color: var(--blue-600); }
.lhlib-f.on { background: var(--tint-blue); border-color: var(--blue-600); color: var(--blue-800); }
.lhlib-f[data-db-proj]:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 1px; }
.rd-chip .src { font-style: normal; font-size: var(--t-micro); color: var(--ink-3); margin-right: 5px; padding-right: 5px; border-right: 1px solid var(--line); }
#dbBody tr[tabindex]:focus-visible { outline: 2px solid var(--blue-600); outline-offset: -2px; }
.db-detail {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-panel); overflow-y: auto; padding: 16px 18px; min-height: 0;
}
.detail-empty { color: var(--ink-3); font-size: var(--t-sm); text-align: center; padding: 40px 10px; line-height: 1.8; }
.d-head { margin-bottom: 12px; }
.d-head .id { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--ink-3); }
.d-head h3 { font-size: var(--t-h3); font-weight: 640; letter-spacing: -.015em; margin-top: 3px; line-height: 1.35; }
.axes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; }
.axis {
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  padding: 7px 9px; background: var(--surface-2);
}
.axis .k { display: block; font-size: var(--t-micro); color: var(--ink-3); }
.axis .v { font-size: var(--t-cap); font-weight: 600; }
.axis .v.g { color: var(--verified); }
.axis .v.a { color: var(--warning); }
.axis .v.c { color: var(--blue-800); }
.axis .v.vio { color: var(--review); }
.opinion-box {
  border: 1px solid rgba(27, 65, 185, .16); background: var(--tint-blue);
  border-radius: var(--r-ctl); padding: 9px 12px;
  font-size: var(--t-sm); line-height: 1.65; color: var(--ink-2);
}
.opinion-box .who {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: 0;
  color: var(--ink-3); margin-bottom: 3px;
}
.answer-item {
  border: 1px solid var(--line); border-radius: var(--r-ctl);
  padding: 9px 11px; margin-top: 7px; background: var(--surface);
}
.answer-item .head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; flex-wrap: wrap; }
.answer-item .head .v {
  font-family: var(--font-display); font-size: var(--t-micro); font-weight: 700;
  background: var(--surface-3); color: var(--ink-2); padding: 0 5px; border-radius: 4px;
}
.answer-item .head .type { font-size: var(--t-cap); font-weight: 620; color: var(--blue-800); }
.answer-item .head .verdict { font-size: var(--t-micro); color: var(--ink-3); margin-left: auto; }
.answer-item p { font-size: var(--t-cap); color: var(--ink-2); line-height: 1.6; }
.rev-line {
  margin-top: 9px; padding: 8px 11px; border-radius: var(--r-ctl);
  background: var(--tint-verified); color: var(--verified);
  font-size: var(--t-cap); line-height: 1.55;
}
.rev-line b { font-weight: 700; }
.dp-block { margin-top: 14px; }
.rd {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: var(--t-micro); font-weight: 650;
}
.rd[data-lv="1"] { background: var(--tint-abstain); color: var(--abstain); }
.rd[data-lv="2"] { background: var(--tint-blue); color: var(--blue-800); }
.rd[data-lv="3"] { background: var(--tint-cyan); color: #12708F; }
.rd[data-lv="4"] { background: var(--tint-verified); color: var(--verified); }
.cid { display: block; font-family: var(--font-mono); font-size: var(--t-micro); color: var(--ink-3); }
.ct { font-size: var(--t-sm); color: var(--ink); }
.err-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: var(--t-cap);
}
.err-row:last-child { border-bottom: none; }
.err-row .n { font-family: var(--font-display); font-weight: 650; font-variant-numeric: tabular-nums; }
.err-row .tr { width: 20px; text-align: center; color: var(--ink-3); }

/* =========================================================================
   VIEW 4 — 지식 개선순환
   ========================================================================= */
#viewFly { overflow-y: auto; }
.fly-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 20px var(--pad-product) 40px; }
.fly-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.funnel-row {
  display: grid; grid-template-columns: 190px 1fr 76px; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px dashed var(--line);
}
.funnel-row:last-child { border-bottom: none; }
.funnel-row .nm { font-size: var(--t-cap); font-weight: 600; }
.funnel-row .nm small { display: block; font-weight: 400; color: var(--ink-3); font-size: var(--t-micro); }
.funnel-bar { height: 7px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.funnel-bar i {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--blue-800), var(--blue-600));
}
.funnel-row .n {
  text-align: right; font-family: var(--font-display); font-size: var(--t-cap);
  font-weight: 650; font-variant-numeric: tabular-nums;
}
.fly-note {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--r-ctl);
  background: var(--surface-2); font-size: var(--t-micro); color: var(--ink-3); line-height: 1.65;
}
.fly-note b { color: var(--ink-2); }
.loop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.loop-card {
  border: 1px solid var(--line); --loop-c: var(--blue-600);
  border-radius: var(--r-card); padding: 12px 13px; background: var(--surface);
}
.loop-card .nm::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--loop-c); }
.loop-card[data-c="cyan"]  { --loop-c: var(--cyan-500); }
.loop-card[data-c="green"]  { --loop-c: var(--verified); }
.loop-card[data-c="violet"]  { --loop-c: var(--review); }
.loop-card[data-c="amber"]  { --loop-c: var(--warning); }
.loop-card .nm { font-size: var(--t-cap); font-weight: 650; margin-bottom: 6px; }
.loop-card .metric {
  font-family: var(--font-display); font-size: var(--t-cap);
  font-weight: 650; margin-right: 6px;
}
.loop-card .delta { font-size: var(--t-micro); color: var(--verified); font-weight: 600; }
.loop-card .desc { font-size: var(--t-micro); color: var(--ink-3); margin-top: 6px; line-height: 1.55; }

/* Cross-Verification Board (p.18) */
.xv-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.xv-cell {
  border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 13px; background: var(--surface); text-align: center;
}
.xv-cell .ax {
  font-family: var(--font-display); font-size: var(--t-cap);
  font-weight: 650; letter-spacing: -.01em; margin-bottom: 5px;
}
.xv-cell .st { margin-bottom: 7px; }
.xv-cell .dsc { font-size: var(--t-micro); color: var(--ink-3); line-height: 1.55; }

/* =========================================================================
   VIEW 5 — 학습자료 내보내기
   ========================================================================= */
#viewExport { overflow: hidden; padding: 16px var(--pad-product); }
.exp-main { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 14px; width: 100%; min-height: 0; }
.exp-list {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-panel); overflow-y: auto; padding-bottom: 12px; min-height: 0;
}
.exp-detail {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-panel); padding: 18px 20px; overflow-y: auto; min-height: 0;
}
.exp-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 13px; border-left: 2px solid transparent;
  transition: background var(--d-fast) var(--ease);
}
.exp-item:hover { background: var(--surface-2); }
.exp-item.on { background: var(--tint-blue); border-left-color: var(--blue-800); }
.exp-item .id { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--ink-3); }
.exp-item .t { display: block; font-size: var(--t-sm); margin: 1px 0 4px; }
.exp-item .meta { display: flex; gap: 5px; flex-wrap: wrap; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.chk-row {
  display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start;
  padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: var(--t-cap); line-height: 1.5;
}
.chk-row:last-child { border-bottom: none; }
.chk-row .m { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; }
.chk-row .m svg { width: 11px; height: 11px; }
.chk-row[data-ok="true"]  .m { background: var(--tint-verified); color: var(--verified); }
.chk-row[data-ok="false"] .m { background: var(--tint-error); color: var(--error); }
.chk-row small { display: block; color: var(--error); font-size: var(--t-micro); }
.chk-warn {
  margin-top: 10px; padding: 9px 11px; border-radius: var(--r-ctl);
  background: var(--tint-error); color: var(--error);
  font-size: var(--t-micro); line-height: 1.6;
}
.json-prev {
  margin: 0; padding: 12px 14px; border-radius: var(--r-ctl);
  background: #1A1D24; color: #D6DEEA;
  font-family: var(--font-mono); font-size: var(--t-micro); line-height: 1.65;
  max-height: 400px; overflow: auto; white-space: pre-wrap; word-break: break-all;
}
.ds-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 0; border-bottom: 1px dashed var(--line); font-size: var(--t-micro);
}
.ds-row:last-child { border-bottom: none; }
.ds-row .v { font-family: var(--font-mono); color: var(--ink-2); text-align: right; }
.ds-row .v.g { color: var(--verified); font-weight: 600; }
.exp-note { margin-top: 14px; font-size: var(--t-micro); color: var(--ink-3); line-height: 1.7; }

/* ── Modal ────────────────────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: rgba(26, 29, 36, .55); backdrop-filter: blur(3px);
}
.modal[hidden] { display: none; }
.modal-box {
  width: 452px; max-width: calc(100vw - 32px);
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--sh-3); padding: 26px 28px;
}
.modal-box h2 {
  font-family: var(--font-display); font-size: var(--t-h2);
  font-weight: 660; letter-spacing: -.025em;
}
.modal-box .lead { font-size: var(--t-sm); color: var(--ink-2); margin: 8px 0 18px; line-height: 1.65; }
.modal-box label {
  display: block; font-size: var(--t-cap); font-weight: 600; color: var(--ink-2); margin-bottom: 5px;
}
.modal-box .field { width: 100%; height: 38px; }
.modal-box .btn { width: 100%; height: 40px; margin-top: 16px; }
.resume-list { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.resume-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-ctl);
  margin-bottom: 6px; background: var(--surface);
  transition: border-color var(--d-fast) var(--ease);
}
.resume-item:hover { border-color: var(--blue-600); }
.resume-item .nm { flex: 1; min-width: 0; }
.resume-item .nm b { display: block; font-size: var(--t-sm); font-weight: 600; }
.resume-item .nm span { font-size: var(--t-micro); color: var(--ink-3); }

/* ── Toast ────────────────────────────────────────────────────────────── */
.toast-dock {
  position: fixed; right: 18px; bottom: 18px; z-index: 120;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.toast {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--r-ctl);
  background: var(--ink); color: #fff; font-size: var(--t-sm);
  box-shadow: var(--sh-3); animation: pop var(--d-base) var(--ease);
  max-width: 380px;
}
.toast svg { width: 15px; height: 15px; flex-shrink: 0; }
.toast[data-k="ok"]   svg { color: #6FD1A0; }
.toast[data-k="warn"] svg { color: #F0C270; }
.toast[data-k="err"]  svg { color: #F0958A; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .verdict-col { width: 330px; }
  .cockpit-main { --rail-w: 200px; }
  .loop-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1080px) {
  /* 제목이 길어지면서 좁은 화면에서 탭 영역을 23px 침범했다(실측). 부제뿐 아니라
     제목 뒷단(서술부)도 접는다 — 남는 것은 제품명 'Dr.Check' 하나다. */
  .brand-text .sub, .brand-text h1 .brand-desc { display: none; }
  .db-main { grid-template-columns: minmax(0, 1fr); }
  .db-detail { max-height: 420px; }
  .exp-main { grid-template-columns: 260px minmax(0, 1fr); }
  .fly-grid { grid-template-columns: 1fr; }
  /* 좁은 화면에서 표를 100% 로 두면 칸이 눌려 한 단어씩 세로로 흐른다.
     최소 폭을 주고 가로 스크롤로 넘긴다. */
  .dock-body table.grid { min-width: 1180px; }
  .db-table-wrap table.grid { min-width: 720px; }
}
@media (max-width: 860px) {
  body { overflow: auto; }
  /* 데스크톱은 100vh 안에서 패널이 각자 스크롤하지만, 모바일에서는 세로로 쌓기 때문에
     셸을 100vh 로 묶어두면 cockpit-main 이 뷰포트 높이에 갇히고 그 자식들이 박스 밖으로
     넘쳐, 뒤따르는 그리드가 뷰어 위에 겹쳐 그려진다. 모바일은 문서 흐름으로 되돌린다. */
  .shell { height: auto; min-height: 100vh; }
  .view { min-height: 0; }
  .view.on, .cockpit-main, .viewer-col, .sheet-rail { flex: none; }
  #viewDb, #viewExport { overflow: visible; }
  .db-main, .exp-main { min-height: 0; }
  .exp-list { max-height: 420px; }
  .topbar { height: auto; flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  .tabs { margin-left: 0; width: 100%; overflow-x: auto; }
  .top-right { margin-left: auto; }
  .stat-row, .db-stats { grid-template-columns: repeat(2, 1fr); }
  .cockpit-main { flex-direction: column; }
  .sheet-rail { width: 100%; max-height: 176px; border-right: none; border-bottom: 1px solid var(--line); }
  .gutter { display: none; }
  .verdict-col { width: 100%; border-left: none; border-top: 1px solid var(--line); }
  .viewer-split { min-height: 380px; flex-direction: column; }
  .compare-pane.on { border-left: none; border-top: 1px solid var(--line); min-height: 300px; }
  .grid-dock { height: auto !important; }
  .dock-handle { display: none; }
  .dock-body { max-height: 320px; }
  table.grid thead th { position: static; }
  .exp-main, .cols2 { grid-template-columns: minmax(0, 1fr); }
  .xv-board { grid-template-columns: 1fr; }
  .markup-pop { width: calc(100vw - 24px); left: 12px !important; }

}

/* ── Reduced motion (p.33/34) — 루프 모션은 정지 라벨로 대체 ───────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ── Print (인쇄 리포트, p.33) ────────────────────────────────────────── */
@media print {
  .topbar, .tabs, .sheet-rail, .grid-dock, .toast-dock, .markup-pop { display: none !important; }
  body { overflow: visible; }
  .view { display: block !important; }
}

/* ── v3 분류 파셋·칩 ─────────────────────────────────────────────── */
.sheet-body{display:flex;gap:14px;align-items:flex-start}
.facet-panel{flex:0 0 200px;border:1px solid var(--line);border-radius:12px;padding:10px;position:sticky;top:8px;max-height:70vh;overflow:auto;background:var(--paper,#fff)}
.facet-group{margin-bottom:10px}
.facet-group>b{display:block;font-size:11px;color:var(--ink-4);margin:2px 0 6px}
.facet-item{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;background:none;text-align:left;padding:4px 6px;border-radius:8px;cursor:pointer;font-size:12px}
.facet-item:hover{background:rgba(27,65,185,.06)}
.facet-item.on{background:rgba(27,65,185,.12);font-weight:600}
.facet-item.zero{opacity:.45}
.facet-item .n{font-size: var(--t-micro);color:var(--ink-4)}
.facet-item>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:6px}
.facet-more{display:block;width:100%;border:0;background:none;text-align:left;padding:4px 6px;font:inherit;font-size:var(--t-micro);color:var(--blue-700,#1b41b9);cursor:pointer;border-radius:8px}.facet-more:hover{background:rgba(27,65,185,.06)}
.facet-item .fc-code{font-family:var(--font-mono,ui-monospace,monospace);font-size:var(--t-micro);color:var(--ink-4);margin-right:5px}
/* 표제란을 아직 읽지 않은 도면 — 「미분류」로 세지 않고 읽는 중으로 따로 보인다(113턴) */
.facet-reading{position:relative;margin:0 0 10px;padding:8px 8px 10px;border-radius:8px;background:var(--tint-blue,rgba(27,65,185,.06));font-size:12px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px;overflow:hidden}
.facet-reading>b{font-weight:600}.facet-reading>span{color:var(--ink-3);font-variant-numeric:tabular-nums}.facet-reading>small{flex-basis:100%;font-size:11px;color:var(--ink-4);line-height:1.45}
.facet-reading>i{position:absolute;left:0;bottom:0;height:3px;background:var(--blue-600,#1b41b9);transition:width .3s}
.cls-chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px}
.cls-chip{display:inline-flex;align-items:center;gap:4px;font-size: var(--t-micro);padding:1px 7px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2)}
.cls-chip.unc{color:var(--ink-4);border-style:dashed}
.conf-dot{width:6px;height:6px;border-radius:50%}
.conf-dot[data-c="HIGH"]{background:#2A7351}
.conf-dot[data-c="MEDIUM"]{background:#9A6A16}
.conf-dot[data-c="LOW"]{background:#B23A2B}
.state[hidden]{display:none}
@media (max-width: 900px){.sheet-body{flex-direction:column}.facet-panel{position:static;flex:none;width:100%;max-height:none}}


/* ── 리비전 비교 ─────────────────────────────────────────────────────────
   구판=빨강 · 신판=파랑 · multiply 겹침(공통부는 어둡게)은 도면 비교 도구들이
   수렴한 관례라 그대로 쓴다. 색은 착색 렌더러(engine.js)와 짝. */
.rev-wrap { display: flex; flex-direction: column; height: calc(100vh - 118px); gap: 10px; }
.rev-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rev-title { font-weight: 700; font-size: 15px; margin-right: 6px; }
.rev-vs { color: var(--gray-500); }
.rev-bar .field { height: 32px; max-width: 300px; }
.rev-legend { margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--gray-600); }
.rev-legend .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.rev-legend .sw.old { background: #e11d48; }
.rev-legend .sw.new { background: #2563eb; }
.rev-legend .sw.both { background: #4c1d95; }
.rev-main { display: grid; grid-template-columns: 320px 1fr; gap: 12px; flex: 1; min-height: 0; }
/* 휴대폰 — 목록 위 · 보기 아래로 쌓는다(320px 목록 옆에 보기가 한 글자 폭으로 눌렸다, 2026-10-10 실측). 화면은 세로로 넘긴다 */
@media (max-width: 640px) {
  .rev-wrap { height: auto; }
  .rev-main { grid-template-columns: minmax(0, 1fr); }
  .rev-list { max-height: 50vh; }
  .rev-viewer { min-height: 70vh; }
}
.rev-list { border: 1px solid var(--line); border-radius: 12px; background: var(--paper);
  overflow-y: auto; padding: 10px; }
.rev-empty { font-size: 12.5px; line-height: 1.7; color: var(--gray-600); padding: 8px; }
.rev-group { margin-bottom: 12px; }
.rev-group > h4 { font-size: 11.5px; color: var(--gray-600); margin: 4px 4px 6px;
  display: flex; justify-content: space-between; }
.rev-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; background: none;
  cursor: pointer; font: inherit; font-size: 12.5px; }
.rev-item:hover { background: var(--gray-50); }
.rev-item.on { border-color: var(--blue-300); background: var(--blue-50); }
.rev-item .no { font-family: var(--font-product); font-weight: 650; white-space: nowrap; }
.rev-item .nm { color: var(--gray-600); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rev-item .badge { margin-left: auto; font-size: var(--t-micro); padding: 1px 7px; border-radius: 99px; }
.rev-item .badge.removed { background: #fee2e2; color: #b91c1c; }
.rev-item .badge.added { background: #dbeafe; color: #1d4ed8; }
.rev-item .badge.amb { background: #fef3c7; color: #92400e; }
.rev-viewer { display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper); overflow: hidden; }
.rev-tools { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.rev-tools .spacer { flex: 1; }
.rev-pairlabel { font-size: 12.5px; font-weight: 650; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg-btn { border: 0; background: none; padding: 5px 11px; font: inherit; font-size: 12px;
  cursor: pointer; color: var(--gray-700); }
.seg-btn + .seg-btn { border-left: 1px solid var(--line); }
.seg-btn.on { background: var(--tint-blue); color: var(--blue-800); font-weight: 600; }
#revCurtain { width: 160px; }
.rev-body { flex: 1; overflow: auto; position: relative; background: var(--gray-100); padding: 18px; }
.rev-body .canvas-stack { margin: 0 auto; box-shadow: var(--shadow-2); }
.rev-body canvas { width: 100%; height: 100%; display: block; }

/* ── 연결된 도면 (기호 칩) ──────────────────────────────────────────────
   파랑 계열 = 일람표 정의로 연결됨(클릭 시 나란히 보기) · 호박 = 정의 미확인
   (확인 후보 — 오류 확정 아님) · 회색 = 사용처 없음(일람표 쪽에서만) */
.sym-row { display: flex; flex-wrap: wrap; gap: 5px; }
.sym-chip { border: 1px solid var(--line); border-radius: 7px; background: #fff;
  padding: 2px 8px; font: inherit; font-size: 11.5px; font-family: var(--font-product);
  font-weight: 650; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.sym-chip i { font-style: normal; font-size: var(--t-micro); color: var(--gray-500); font-weight: 500; }
.sym-chip.def { border-color: var(--blue-300); background: var(--blue-50); color: var(--blue-800); }
.sym-chip.def:hover { border-color: var(--blue-500); }
.sym-chip.warn { border-color: #fcd34d; background: #fffbeb; color: #92400e; }
.sym-chip.idle { color: var(--gray-500); cursor: default; }
.sym-more { font-size: 11px; color: var(--gray-500); align-self: center; }
.sym-warn-n { font-size: var(--t-micro); color: #92400e; background: #fef3c7;
  border-radius: 99px; padding: 1px 8px; font-weight: 600; }
.rev-item .badge.manual { background: #ede9fe; color: #6d28d9; }
/* 짝 없는 도면 한 줄 — 미리 보기 단추 + 「짝 고르기」(2026-10-10). 수동 쌍은 「풀기」 */
.rev-row { display: flex; align-items: center; gap: 4px; }
.rev-row > .rev-item { flex: 1 1 auto; min-width: 0; }
.rev-row > .rev-pk { flex: none; white-space: nowrap; }
.rev-row .rev-item .nm { flex: 0 1 auto; min-width: 0; }
.rev-row .rev-item .badge, .rev-row .rev-item .no, .rev-row .rev-item .pg, .rev-row .rev-item .chg { flex: none; white-space: nowrap; }
.rev-row > .rev-item { overflow: hidden; }
.rev-item .pg { color: var(--ink-3); font-size: var(--t-micro); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rev-tag { flex: none; font-size: var(--t-micro); color: var(--ink-3); border: 1px solid var(--line); border-radius: 99px; padding: 0 6px; }
.rev-note { font-size: var(--t-cap); line-height: 1.6; color: var(--ink-3); margin: -2px 4px 6px; }
.rev-sub { font-size: var(--t-micro); color: var(--ink-3); margin: 8px 4px 2px; }
.rev-amb { display: flex; align-items: center; gap: 8px; padding: 6px 8px 2px; font-size: 12.5px; }
.rev-amb .no { font-family: var(--font-product); font-weight: 650; }
.rev-amb .nm { color: var(--gray-600); }
.rev-amb .badge { margin-left: auto; font-size: var(--t-micro); padding: 1px 7px; border-radius: 99px; background: #fef3c7; color: #92400e; }

/* ═══ 검토 AI 화면 대수술 (ui-v2) — 폴백: git tag ui-v1-classic ═══════════════
   상단 바=문서·배율, 도구=좌측 수직 툴독, 이동=캔버스 셰브런,
   표제란 교정=전용 스트립, 검증 데이터=우측 패널 2번째 탭. */

/* 표제란 교정 스트립 */
.meta-strip {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 5px 12px; border-bottom: 1px solid var(--line); background: var(--surface);
  font-size: 11.5px; color: var(--ink-2);
}
.meta-strip .ms-cap { font-weight: 700; color: var(--ink-3); font-size: var(--t-micro); letter-spacing: .04em; }
.meta-strip label { display: inline-flex; align-items: center; gap: 6px; }
.meta-strip .field { height: 26px; font-size: 12px; }

/* 좌측 수직 툴독 */
.tooldock {
  flex-shrink: 0; width: 52px; border-right: 1px solid var(--line);
  background: var(--surface); display: flex; flex-direction: column;
  align-items: center; gap: 6px; padding-top: 10px;
}
.td-btn {
  width: 42px; height: 46px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--paper); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; cursor: pointer;
}
.td-btn svg { width: 16px; height: 16px; }
.td-btn .td-cap { font-size: var(--t-micro); color: var(--ink-3); }
.td-btn:hover { border-color: var(--blue-600); }
.td-btn.on { background: var(--tint-blue); border-color: var(--blue-800); color: var(--blue-800); }
.td-btn.on .td-cap { color: var(--blue-800); font-weight: 700; }

/* 캔버스 이동 셰브런 */
.nav-chev {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 30px; height: 52px; border: 1px solid var(--line); border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  display: grid; place-items: center; cursor: pointer; opacity: .45;
  transition: opacity var(--d-fast) var(--ease);
}
.viewer-pane:hover .nav-chev { opacity: 1; }
.nav-chev.prev { left: 8px; }
.nav-chev.next { right: 8px; }
.nav-chev svg { width: 14px; height: 14px; }

/* 우측 패널 탭 구조 */
.verdict-wrap {
  width: var(--panel-w, 372px); min-width: 300px; flex-shrink: 0;
  border-left: 1px solid var(--line); background: var(--surface);
  display: flex; flex-direction: column; min-height: 0;
  transition: width var(--d-fast) var(--ease);
}
.verdict-wrap.wide { width: var(--panel-wide-w, min(680px, 46vw)); }   /* 설계 검증 탭은 넓게 — 끌면 --panel-wide-w 가 바뀐다 */
.vc-tabs {
  display: flex; gap: 2px; padding: 8px 10px 0; border-bottom: 1px solid var(--line);
  flex-shrink: 0; background: var(--surface);
}
.vc-tab {
  border: 1px solid var(--line); border-bottom: none;
  border-radius: 9px 9px 0 0; background: var(--surface-2);
  padding: 6px 9px; font: inherit; font-size: 12px; color: var(--ink-2); cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;            /* 탭이 다섯 개 — 좁으면 글자가 세로로 꺾였다(실측). 줄바꿈 금지 */
  min-width: 0;
}
.vc-tabs { overflow-x: auto; scrollbar-width: none; }   /* 그래도 모자라면 가로로 밀린다 */
.vc-tabs::-webkit-scrollbar { display: none; }
.vc-tab.on { background: var(--tint-blue); color: var(--blue-800); font-weight: 650;   /* 1차 내비(.tab.on)와 같은 옅은 파랑 — 흰 탭 · 검정 알약 · 파랑 테두리가 한 화면에 섞였다(검토 U3) */
  position: relative; top: 1px; }
.verdict-wrap .verdict-col { width: auto; min-width: 0; border-left: none; flex: 1; }
.data-col { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.data-actions {
  display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 12px;
  border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.data-body { flex: 1; overflow: auto; }
/* 표가 패널보다 넓으면 「관리」 열이 잘리고 가로 스크롤이 생긴다(실측: 패널 679 vs 표 900).
   열을 9→7 로 줄였으니 min-width 도 함께 내린다 — 이게 남아 있으면 열을 줄인 효과가 없다. */
.data-body .grid { min-width: 560px; }
/* [hidden] 은 UA 의 display:none 인데 위의 display:flex 선언이 이겨버린다 —
   이 프로젝트에서 **세 번** 밟은 함정이다(.state[hidden] → .data-col[hidden] →
   .verdict-wrap[hidden]). 세 번째는 팝아웃에서 났다: 패널을 별도 창으로 띄우면
   openPanelPopout 이 D.verdictWrap.hidden = true 로 접는데, .verdict-wrap 의
   display:flex 가 이겨서 본창에도 그대로 남아 같은 패널이 두 곳에 보였다.
   ★display 를 선언하는 요소에 hidden 을 걸 때는 반드시 이 짝을 함께 둘 것. */
.data-col[hidden], .verdict-col[hidden], .verdict-wrap[hidden], .chk-col[hidden], .chk-fig[hidden], .chk-answer[hidden], .gpane[hidden],
.rev-tools[hidden], .save-chip[hidden] { display: none; }
/* ★.save-chip 은 「저장 실패일 때만 보인다」로 만들어 둔 것인데 이 규칙이 없어서
   **한 번도 숨겨진 적이 없었다**(display:inline-flex 가 이겼다). 검사가 잡았다. */

/* 툴독의 마크 켜짐 상태 — 기존 markup-on 클래스를 툴독 문법으로 계승 */
.td-btn.markup-on { background: var(--tint-error, #fee2e2); border-color: var(--error, #d92d20); }
.td-btn.markup-on .td-cap { color: var(--error, #d92d20); font-weight: 700; }

/* ── 분리 창 (듀얼 모니터) ─────────────────────────────────────────────── */
.vc-tab.pop { margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  border-radius: 9px; border-bottom: 1px solid var(--line); top: 0; background: var(--paper); }
.vc-tab.pop svg { width: 11px; height: 11px; transform: rotate(-45deg); }
.pop-wrap { display: flex; height: 100vh; background: var(--paper, #fbfaf7); }
.pop-head { font-weight: 700; font-size: 13px; padding: 12px 16px 8px;
  border-bottom: 1px solid var(--line); flex-shrink: 0; }
.pop-verdict { width: 440px; min-width: 360px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; min-height: 0; }
.pop-verdict .verdict-col { width: auto; min-width: 0; border-left: none; flex: 1; }
.pop-data { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pop-data .data-body { flex: 1; overflow: auto; }
.pop-data .grid { min-width: 1000px; }

/* 키보드 내비 — 포커스된 목록에 테두리 표시 (어디에 키가 먹는지 보이게) */
[data-keynav]:focus-visible { outline: 2px solid var(--blue-600); outline-offset: -2px; border-radius: 8px; }
.mp-head { user-select: none; }

/* 재작업 이력 (지적 → 회신 → 반영 → 해소) */
.rw-row { display: grid; grid-template-columns: 92px 1fr; gap: 4px 8px;
  padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 12px; }
.rw-step { font-weight: 650; color: var(--blue-800); }
.rw-txt { color: var(--ink-2); word-break: break-word; }
.rw-at { grid-column: 2; font-size: var(--t-micro); color: var(--ink-4); }
.rw-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }

/* 원본 미복원 배너 — 검토의견은 살아 있고 그림만 없는 상태를 명확히 알린다 */
.reattach-banner { border: 1px solid #fcd34d; background: #fffbeb; color: #92400e;
  border-radius: 10px; padding: 10px 14px; font-size: 12.5px; line-height: 1.6; margin-bottom: 12px; }
.reattach-banner[hidden] { display: none; }

/* 시연용 예시 데이터 고지. data.js 의 DB_STATS·READINESS·TOP_ERRORS·CASES 는
   목표 화면 예시인데 화면에는 실측처럼 렌더된다. 예전에 상단 칩으로 알리던 것을
   지우면서 고지가 0곳이 됐다 — 검토위원이 지어낸 수치를 실적으로 읽게 된다. */
.demo-note { border: 1px solid #fcd34d; background: #fffbeb; color: #92400e;
  border-radius: 10px; padding: 9px 13px; font-size: 12px; line-height: 1.6; margin: 0 0 12px; }
.demo-note[hidden] { display: none; }


/* ═══ 검증 데이터 표 — 행 높이 고정 (2026-08-22) ═══════════════════════════
   실측 문제: 행 하나가 158px 였다. 40건이면 6,320px — 화면 8.5개 분량을 스크롤해야
   전부 훑는다. 원인은 "검토의견이 길어서"가 아니라(이미 90자로 잘려 있었다) 고정폭
   8개 열이 820px 를 먼저 가져가 검토의견에 120px 만 남긴 탓이다. 90자가 10줄로 접혔다.

   그래서 ① 모든 셀을 1줄로 고정하고 ② 전문은 행을 클릭해 그 자리에서 펼친다.
   팝업이 아니라 인라인인 이유는 스크롤 위치를 잃지 않기 위해서다 — 수십 건을 훑다가
   하나 열어 보고 다시 훑는 흐름이 실제 사용 방식이다. */
table.grid { table-layout: fixed; }
table.grid tbody td.cell1 {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0;
}
table.grid tbody tr[data-id] > td { height: 40px; padding-top: 0; padding-bottom: 0; }
table.grid tbody tr[data-id] { cursor: pointer; }
table.grid tbody tr[data-id].open { background: var(--surface-2); }

/* 상태 3종(자동저작·근거·판정)을 한 칸에 묶은 배지. 각각 열을 차지할 만큼
   정보량이 크지 않은데 셋이서 266px 를 먹고 있었다. */
.st-cell { text-align: center; white-space: nowrap; padding-left: 4px !important; padding-right: 4px !important; }
.st-dot {
  display: inline-grid; place-items: center; width: 19px; height: 19px; margin: 0 1px;
  border-radius: 5px; font-family: var(--font-display); font-size: var(--t-micro); font-weight: 700;
  background: var(--surface-3); color: var(--ink-3); vertical-align: middle;
}
.st-dot[data-s="verified"] { background: var(--tint-verified); color: var(--verified); }
.st-dot[data-s="review"]   { background: var(--tint-warning);  color: var(--warning); }
.st-dot[data-s="abstained"]{ background: var(--surface-3);     color: var(--abstain); }
.st-dot[data-s="approved"] { background: var(--tint-verified); color: var(--verified); }
.st-dot[data-s="evi"]      { background: var(--tint-blue);     color: var(--blue-800); }
.st-dot[data-s="none"]     { background: transparent; color: var(--ink-4); }
.row-caret { color: var(--ink-3); font-size: 12px; user-select: none; }

/* 펼침 행 */
.row-detail > td { background: var(--surface-2); padding: 0 !important; }
.rd-wrap { display: flex; gap: 13px; padding: 13px 14px 15px; background: var(--tint-blue); border-radius: var(--r-card); }
.rd-crop {
  width: 168px; height: auto; max-height: 132px; object-fit: contain; flex-shrink: 0;
  border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface);
  cursor: zoom-in;
}
.rd-noimg {
  width: 168px; height: 76px; flex-shrink: 0; display: grid; place-items: center;
  border: 1px dashed var(--line-strong); border-radius: 6px;
  color: var(--ink-3); font-size: var(--t-micro);
}
.rd-body { min-width: 0; flex: 1; }
.rd-title { font-weight: 650; color: var(--ink); font-size: var(--t-sm); margin-bottom: 5px; }
.rd-text {
  margin: 0 0 7px; font-size: var(--t-cap); line-height: 1.62; color: var(--ink-2);
  white-space: pre-wrap; word-break: break-word;
}
.rd-meta { font-size: var(--t-cap); color: var(--ink-3); margin-bottom: 9px; }
.rd-acts { display: flex; gap: 6px; flex-wrap: wrap; }

/* ═══ 근거 크롭 확대 보기 (2026-08-22) ═══════════════════════════════════════
   저장된 크롭은 이미 컸는데(실측 339×286 ~ 1400×1159) 화면에서는 168px 로 줄여
   보여 주고 있었다. 여기서는 원본 픽셀을 기준(100%)으로 삼는다.
   z-index 는 저작 팝업(.markup-pop 80) 위, 토스트(120) 아래. */
.crop-lb {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(26, 29, 36, .82);
  display: flex; flex-direction: column;
}
.crop-lb[hidden] { display: none; }
.clb-bar {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 9px 12px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.clb-title {
  font-weight: 650; color: var(--ink); font-size: var(--t-sm);
  max-width: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.clb-badge {
  font-size: var(--t-micro); font-weight: 650; padding: 3px 8px; border-radius: 999px;
  background: var(--surface-3); color: var(--ink-2); white-space: nowrap;
}
.clb-badge.ok   { background: var(--tint-verified); color: var(--verified); }
.clb-badge.warn { background: var(--tint-warning);  color: var(--warning); }
.clb-spacer { flex: 1; }
.clb-zoom {
  font-family: var(--font-mono); font-size: var(--t-micro); color: var(--ink-2);
  min-width: 46px; text-align: center;
}
.clb-pane {
  flex: 1; min-height: 0; overflow: auto; display: grid; place-items: center;
  padding: 12px; cursor: grab; background: #EDEFF3;
}
.clb-pane.panning { cursor: grabbing; }
.clb-img { display: block; background: #fff; image-rendering: auto; }
.clb-foot {
  padding: 7px 12px; background: var(--surface); border-top: 1px solid var(--line);
  font-size: var(--t-micro); color: var(--ink-3);
}
/* 확대 창을 열 수 있는 크롭은 커서로 그렇게 말한다 — 예전에는 zoom-in 커서인데
   실제로는 도면이 이동해 신호가 거짓이었다. */
[data-zoom] { cursor: zoom-in; }


/* ═══ 프로젝트 화면 — 시작 모달 대체 (2026-09-03) ═════════════════════════ */
.proj-wrap { max-width: 1180px; margin: 0 auto; padding: 28px 24px 40px; }
.proj-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.proj-head h2 { font-size: var(--t-xl); font-weight: 680; letter-spacing: -.01em; }
.proj-head .sub { font-size: var(--t-sm); color: var(--ink-3); margin-top: 6px; max-width: 560px; line-height: 1.6; }
.proj-new { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.proj-new .field { width: 300px; height: 36px; }
.proj-stats { margin: 0 0 12px; }
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.proj-card {
  border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface);
  padding: 14px 15px 12px; display: flex; flex-direction: column; gap: 9px; text-align: left;
  cursor: pointer; transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.proj-card:hover { border-color: var(--blue-600); box-shadow: var(--sh-2); }
.proj-card.current { border-color: var(--blue-600); background: var(--blue-50, #f2f6ff); }
.proj-card .nm { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.proj-card .nm b { font-size: var(--t-md); font-weight: 650; letter-spacing: -.01em; }
.proj-card .nm time { font-size: var(--t-micro); color: var(--ink-4); white-space: nowrap; }
.proj-card .kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.proj-card .kv div { font-size: var(--t-micro); color: var(--ink-3); }
.proj-card .kv b { display: block; font-size: var(--t-lg); font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.proj-card .bar { height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.proj-card .bar i { display: block; height: 100%; background: var(--blue-600); }
.proj-card .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.proj-card .foot .state { font-size: var(--t-micro); }
.proj-card .acts { display: flex; gap: 4px; }
#projEmpty[hidden] { display: none; }


/* ═══ 체크리스트 탭 (2026-09-03) ═══════════════════════════════════════ */
.chk-col { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.chk-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.chk-ver { font-size: var(--t-micro); color: var(--ink-3); }
.chk-all { font-size: var(--t-micro); color: var(--ink-3); display: flex; align-items: center; gap: 4px; }
.chk-list { overflow-y: auto; flex: 1; min-height: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.chk-card { border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface); padding: 10px 11px; }
.chk-card.linked { border-color: var(--blue-600); }
.chk-id { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); font-size: var(--t-micro); font-weight: 650; }
.chk-id .no { padding: 1px 6px; border-radius: 999px; background: var(--ink); color: #fff; }
.chk-id .st { color: var(--ink-3); }
.chk-id .st[data-st="A"] { color: var(--blue-700); } .chk-id .st[data-st="B"] { color: #92400e; } .chk-id .st[data-st="C"] { color: #4c1d95; }
.chk-why { font-size: var(--t-micro); color: var(--ink-4); margin-left: auto; }
.chk-title { font-size: var(--t-sm); font-weight: 650; margin: 5px 0 6px; line-height: 1.4; }
.chk-docs { font-size: var(--t-micro); color: var(--ink-3); margin-bottom: 6px; }
.chk-cp { list-style: none; padding: 0; margin: 0 0 6px; display: flex; flex-direction: column; gap: 4px; }
.chk-cp li { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: start; font-size: var(--t-micro); line-height: 1.45; }
.chk-cp select { height: 22px; font-size: 11px; padding: 0 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink-3); }
.chk-cp select[data-v="반영"] { color: #166534; border-color: #86efac; } .chk-cp select[data-v="미반영"] { color: #b91c1c; border-color: #fca5a5; } .chk-cp select[data-v="해당없음"] { color: var(--ink-4); }
.chk-basis { font-size: var(--t-cap); color: var(--ink-3); border-left: 2px solid var(--line-strong); padding-left: 7px; margin: 6px 0; line-height: 1.45; }
.chk-figs { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 4px; }
.chk-figs img { width: 118px; height: 78px; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; cursor: zoom-in; background: #fff; }
.chk-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; }
.chk-page { font-size: var(--t-cap); color: var(--ink-4); }
.chk-ask { display: flex; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--line); }
.chk-ask .field { flex: 1; height: 30px; font-size: 12px; }
.chk-answer { padding: 8px 12px 10px; border-top: 1px solid var(--line); font-size: var(--t-sm); line-height: 1.55; max-height: 34vh; overflow-y: auto; background: var(--surface-2); }
.chk-answer .src { display: inline-flex; align-items: center; gap: 3px; margin: 0 2px; padding: 0 6px; border-radius: 999px; background: var(--blue-100, #dbeafe); color: var(--blue-700); font-size: 11px; font-weight: 650; cursor: pointer; }
.chk-answer .meta { font-size: var(--t-micro); color: var(--ink-4); margin-top: 6px; }
.chk-fig { position: fixed; inset: 0; z-index: 90; background: rgba(20,24,32,.72); display: flex; align-items: center; justify-content: center; padding: 24px; }
.chk-fig-box { background: #fff; border-radius: var(--r-panel); padding: 12px; max-width: min(1100px, 96vw); max-height: 92vh; display: flex; flex-direction: column; gap: 8px; }
.chk-fig-box img { max-width: 100%; max-height: 78vh; object-fit: contain; }
.chk-fig-cap { font-size: var(--t-sm); color: var(--ink-2); display: flex; justify-content: space-between; gap: 10px; }
.chk-empty { font-size: var(--t-sm); color: var(--ink-3); padding: 16px 4px; line-height: 1.6; }


/* ① 확대 가능한 근거 이미지 — 커서와 안내 한 줄로 '누르면 커진다'를 약속한다 */
.zoomable { cursor: zoom-in; }
.zoom-hint { font-size: var(--t-micro); color: var(--ink-4); margin-top: 3px; }
.zoom-hint b { font-weight: 650; color: var(--ink-3); }
.clb-hint { font-size: var(--t-micro); color: var(--ink-4); margin-right: 8px; white-space: nowrap; }

/* ③ 분리 창 — 본창과 같은 탭 컴포넌트를 그대로 쓴다 */
.pop-wrap-tabs { width: auto !important; min-width: 0; height: 100vh; border-left: none; }
.pop-wrap-tabs .data-col, .pop-wrap-tabs .chk-col { max-height: none; }

/* ⑤ 체크리스트 관리 화면 */
.guide-wrap { max-width: 1280px; margin: 0 auto; padding: 24px 24px 40px; display: flex; flex-direction: column; gap: 14px; }
.guide-head h2 { font-size: var(--t-xl); font-weight: 680; letter-spacing: -.01em; }
.guide-head .sub { font-size: var(--t-sm); color: var(--ink-3); margin-top: 6px; }
.guide-versions { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.guide-ver { border: 1px solid var(--line); border-radius: var(--r-panel); padding: 12px 14px; background: var(--surface); display: flex; flex-direction: column; gap: 6px; }
.guide-ver.current { border-color: var(--blue-600); }
.guide-ver .nm { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 650; }
.guide-ver .kv { font-size: var(--t-micro); color: var(--ink-3); line-height: 1.6; }
.guide-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.guide-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.guide-ver-panel { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line);
  border-radius: var(--r-panel); background: var(--surface-2); }
.guide-ver-panel[hidden] { display: none; }   /* display:grid 가 hidden 을 이겨 늘 펼쳐져 있었다(2026-10-22) — 접어 둔 설계(2026-09-03)대로 */
.guide-ver-panel .guide-howto { border-top: 1px solid var(--line); }
.guide-toolbar h3 { font-size: var(--t-md); font-weight: 650; }
.guide-body { border: 1px solid var(--line); border-radius: var(--r-panel); overflow: auto; max-height: 62vh; background: var(--surface); }
.guide-table { min-width: 940px; }
.guide-table th:nth-child(4), .guide-table td:nth-child(4) { min-width: 240px; }
.guide-table tbody tr[data-gid] { cursor: pointer; }
.guide-table tbody tr[data-gid]:hover td { background: var(--surface-2); }
.guide-table td.c { text-align: center; font-variant-numeric: tabular-nums; }
.guide-table .chk-id .no { white-space: nowrap; }
.guide-detail td { background: var(--surface-2); padding: 10px 14px; }
.guide-detail ul { margin: 4px 0 6px 16px; padding: 0; font-size: var(--t-sm); line-height: 1.5; }
.guide-status { display: inline-flex; gap: 4px; font-size: var(--t-micro); }
.guide-status i { font-style: normal; padding: 0 5px; border-radius: 999px; background: var(--surface-2); color: var(--ink-3); }
.guide-status i[data-k="반영"] { background: #dcfce7; color: #166534; } .guide-status i[data-k="미반영"] { background: #fee2e2; color: #b91c1c; }
.guide-howto { font-size: var(--t-micro); color: var(--ink-3); line-height: 1.6; border-top: 1px solid var(--line); padding-top: 10px; }
.guide-howto code { font-family: var(--font-mono, monospace); background: var(--surface-2); padding: 0 4px; border-radius: 4px; }


/* ═══ 가이드북 원본 쪽 미리보기 (펴고 접기) ═══════════════════════════════ */
.chk-split { display: flex; flex: 1; min-height: 0; }
/* 원본 쪽을 펴면 카드가 좁아진다. 372px 를 반으로 가르면 양쪽 다 못 쓴다(실측: 카드 글자가
   세로로 찌그러짐). 그래서 펴는 순간 패널 자체를 넓힌다(.verdict-wrap.wide 와 같은 기계). */
.chk-split .chk-list { flex: 1 1 340px; min-width: 300px; }
.chk-split .gpane { flex: 0 0 300px; min-width: 240px; max-width: 46%; }
.gpane { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--surface-2); flex: 0 0 46%; min-width: 260px; }
.gpane-side { flex: 0 0 420px; border-right: none; border: 1px solid var(--line); border-radius: var(--r-panel); max-height: 62vh; }
.gpane-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--surface); font-size: var(--t-micro); }
.gpane-bar .pg { font-family: var(--font-display); font-variant-numeric: tabular-nums; min-width: 78px; }
.gpane-bar input { width: 52px; height: 24px; font-size: 11px; text-align: center; }
.gpane-bar .spacer { flex: 1; }
.gpane-body { flex: 1; min-height: 0; overflow: auto; padding: 8px; }
.gpane-body img { width: calc(100% * var(--z, 1)); max-width: none; display: block; border: 1px solid var(--line); background: #fff; }
/* 확대했을 때만 끌어서 이동 — 배율은 JS 가 커서까지 함께 바꾼다 */
.gpane-body.grabbing { cursor: grabbing; user-select: none; }
.gpane-hit { font-size: var(--t-micro); color: var(--blue-700); padding: 0 8px 6px; }
.guide-split { display: flex; gap: 12px; align-items: flex-start; }
.guide-split .guide-body { flex: 1; min-width: 0; }
.chk-card.hit { border-color: var(--blue-600); box-shadow: 0 0 0 2px var(--blue-100, #dbeafe); }
.cp-card.hit { border-color: var(--blue-600); box-shadow: 0 0 0 2px var(--blue-100, #dbeafe); }   /* 연결 도면 코드 칩에서 온 상세도 카드 */
.chk-foot button.pg-go { font-family: var(--font-display); }

/* ═══ 답변 가독성 ═══ */
.chk-answer { line-height: 1.6; }
.chk-answer .q { font-size: var(--t-micro); color: var(--ink-3); margin-bottom: 6px; }
.chk-answer .q b { color: var(--ink); }
.chk-answer .a p { margin: 0 0 8px; }
.chk-answer .a ul { margin: 0 0 8px 16px; padding: 0; }
.chk-answer .a li { margin: 2px 0; }
.chk-answer .a b { font-weight: 650; }
.chk-answer .cursor { display: inline-block; width: 6px; height: 14px; background: var(--blue-600); vertical-align: -2px; animation: blink 1s steps(2) infinite; margin-left: 2px; }
@keyframes blink { to { visibility: hidden; } }
.chk-answer .src.on { background: var(--blue-700); color: #fff; }
.chk-answer .warn { color: #92400e; }
.chk-fig-desc { font-size: var(--t-micro); color: var(--ink-3); line-height: 1.5; margin: 4px 0 2px; }
.chk-fig-desc b { color: var(--ink-2); }

/* ═══ 법령·건설기준 (두아즈 공유 코퍼스) ═══════════════════════════════════
   기존 어휘(.btn .field .chk-page .chk-empty .cp-code)를 되쓰고 새 클래스는 최소로.
   색만으로 뜻을 전하지 않는다 — 상태·출처는 언제나 글자를 함께 붙인다. */
.cp-status { font-size: var(--t-micro); padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-3); }
.cp-status[data-s="ok"]  { border-color: var(--green-300, #86c79a); color: var(--green-700, #1d6b38); }
.cp-status[data-s="off"] { border-color: var(--red-300, #e2a3a3); color: var(--red-700, #9c2b2b); }

.cp-scope { display: flex; gap: 10px; align-items: center; font-size: var(--t-sm); }
.cp-scope label, .cp-filters label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.cp-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: var(--t-sm); }
.cp-filters .spacer { flex: 1; }

.cp-split { display: flex; gap: 12px; align-items: flex-start; }
.cp-list { flex: 0 0 42%; min-width: 320px; max-height: 68vh; overflow: auto;
  border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.cp-detail { flex: 1; min-width: 0; max-height: 68vh; overflow: auto;
  border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }

.cp-group { position: sticky; top: 0; z-index: 1; padding: 6px 10px; font-size: var(--t-micro);
  font-weight: 650; color: var(--ink-3); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.cp-card { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0;
  border-bottom: 1px solid var(--line); background: none; cursor: pointer; font: inherit; }
.cp-card:hover { background: var(--surface-2); }
.cp-card:focus-visible { outline: 2px solid var(--blue-500, #2f6fdb); outline-offset: -2px; }
.cp-card-h { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.cp-card-t { font-size: var(--t-sm); font-weight: 600; margin-top: 3px; }
.cp-card-x { font-size: var(--t-micro); color: var(--ink-3); line-height: 1.55; margin-top: 3px; }
.cp-code { font-family: var(--font-display); font-weight: 680; font-size: var(--t-sm);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-code.law { white-space: normal; }
.cp-sec { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: var(--t-micro);
  padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink-2); }
.cp-score { font-size: var(--t-micro); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cp-tag { font-size: var(--t-micro); color: var(--ink-3); padding: 1px 6px;
  background: var(--surface-2); border-radius: 4px; }

.cp-d-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 2; }
.cp-d-head h3 { font-size: var(--t-md); font-weight: 650; margin-top: 4px; }
.cp-d-act { display: flex; gap: 6px; flex-wrap: wrap; }
.cp-d-body { padding: 12px; font-size: var(--t-sm); line-height: 1.7; }
.cp-sec-block + .cp-sec-block { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.cp-sec-block.hit { background: var(--amber-50, #fdf6e3); border-radius: 6px; padding: 8px; }
.cp-sec-no { font-family: var(--font-display); font-weight: 650; font-size: var(--t-micro);
  color: var(--blue-700); margin-bottom: 4px; display: flex; gap: 8px; align-items: baseline; }
.cp-hit-note { padding: 8px 12px; font-size: var(--t-sm); background: var(--surface-2); border-bottom: 1px solid var(--line); }

/* 인용(callout) — 눌러서 그 조문으로 건너간다 */
.cp-callouts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.cp-chip { font: inherit; font-size: var(--t-micro); font-family: var(--font-display);
  padding: 3px 8px; border: 1px solid var(--blue-300, #a9c3ee); border-radius: 999px;
  background: var(--surface); color: var(--blue-700); cursor: pointer; white-space: nowrap; }
.cp-chip:hover { background: var(--blue-50, #eef4fe); }
.cp-nocl { color: var(--ink-3); }
.cp-trail { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 12px;
  font-size: var(--t-micro); border-bottom: 1px solid var(--line); }
.cp-crumb { font: inherit; border: 0; background: none; color: var(--blue-700); cursor: pointer; padding: 0; }
.cp-crumb:hover { text-decoration: underline; }

/* 조문 표 — 셀마다 escape 한 데이터로만 그린다(마크업 재조립 금지) */
.cp-tablewrap { overflow-x: auto; margin: 6px 0; }
.cp-table { border-collapse: collapse; font-size: var(--t-micro); min-width: 100%; }
.cp-table th, .cp-table td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; vertical-align: top; }
.cp-table th { background: var(--surface-2); font-weight: 650; white-space: nowrap; }
.cp-table tr.cp-merged td { background: var(--surface-2); color: var(--ink-3); font-size: var(--t-micro); }

.cp-fail { margin: 10px 12px; padding: 10px; font-size: var(--t-sm);
  border: 1px solid var(--red-300, #e2a3a3); border-radius: 6px; color: var(--red-700, #9c2b2b); background: var(--red-50, #fdf1f1); }

@media (max-width: 1100px) {
  .cp-split { flex-direction: column; }
  .cp-list, .cp-detail { flex: 1 1 auto; width: 100%; max-height: 46vh; }
}

/* 기준 문서 전체 = 조문 목록. 99개 본문을 한 벽에 쏟으면 아무것도 못 찾는다(실측). */
.cp-toc { display: grid; gap: 2px; }
.cp-toc-i { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left;
  font: inherit; font-size: var(--t-micro); padding: 5px 8px; border: 0; border-radius: 5px;
  background: none; cursor: pointer; }
.cp-toc-i:hover { background: var(--surface-2); }
.cp-toc-i:focus-visible { outline: 2px solid var(--blue-500, #2f6fdb); outline-offset: -2px; }
.cp-toc-i span:last-child { color: var(--ink-2); }

/* ═══ 도면 구조화 ═══════════════════════════════════════════════════════════
   색만으로 뜻을 전하지 않는다 — 「해석」「지어냄 의심」은 언제나 글자 라벨과 함께. */
.st-box { max-width: min(640px, 94vw); padding: 18px 20px; gap: 12px; }
.st-h { font-size: var(--t-lg); font-weight: 680; }
.st-body { font-size: var(--t-sm); line-height: 1.65; display: grid; gap: 10px; }
.st-body table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.st-body td { padding: 4px 8px; border-bottom: 1px solid var(--line); }
.st-body td:last-child { text-align: right; font-family: var(--font-display); }
.st-body .st-warn { padding: 8px 10px; border: 1px solid var(--amber-300, #e8c46a); border-radius: 6px;
  background: var(--amber-50, #fdf6e3); font-size: var(--t-micro); }
.st-formula { color: var(--ink-3); font-size: var(--t-micro); }
.st-actions { display: flex; justify-content: flex-end; gap: 8px; }

.st-log .parse-file .nm { font-weight: 600; }
.st-log .bar { width: 160px; }
.st-ctrl { display: flex; gap: 6px; }
.st-ctrl .btn { height: 26px; padding: 0 8px; font-size: var(--t-micro); }

/* 판정 패널의 구조화 절 */
.st-sheet { display: flex; gap: 8px; flex-wrap: wrap; font-size: var(--t-sm); margin-bottom: 6px; }
.st-sheet b { font-family: var(--font-display); }
.st-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 8px; }
.st-chip { font-size: var(--t-micro); padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-2); cursor: default; }
.st-list { list-style: none; padding: 0; margin: 0 0 8px; font-size: var(--t-micro); display: grid; gap: 3px; }
.st-list li { display: flex; gap: 8px; align-items: baseline; }
.st-list .v { font-family: var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-list .v[title] { border-bottom: 1px dotted var(--ink-4); cursor: help; }
.st-interp { color: var(--ink-3); }
.st-interp::before { content: '해석 · '; font-size: var(--t-micro); letter-spacing: .02em; color: var(--ink-4); }
.st-sub { font-size: var(--t-micro); font-weight: 650; color: var(--ink-2); margin: 8px 0 3px; }
.st-fab { margin: 6px 0; padding: 6px 8px; border: 1px solid var(--red-300, #e2a3a3); border-radius: 6px;
  background: var(--red-50, #fdf1f1); color: var(--red-700, #9c2b2b); font-size: var(--t-micro); }
.st-meta { color: var(--ink-4); font-size: var(--t-cap); margin-top: 4px; }
.st-more { font: inherit; font-size: var(--t-micro); border: 0; background: none; color: var(--blue-700); cursor: pointer; padding: 0; }

/* 관련성 표시 — 색만이 아니라 글자(직접·관련·낮음)로 */
.cp-tag.rel-hi { background: var(--tag-soft); color: var(--tag); }
button.cp-tag { font: inherit; font-size: var(--t-micro); cursor: pointer; }   /* 상세도 카드의 체크리스트 칩 — 검증도구 항목으로 */
button.cp-tag:hover { text-decoration: underline; }
.cp-tag.rel-lo { background: var(--paper-2, var(--surface-2)); color: var(--ink-3); }
.cp-fold { border-top: 1px dashed var(--line); }
.cp-fold > summary { padding: 8px 12px; font-size: var(--t-micro); color: var(--ink-3); cursor: pointer; list-style: none; }
.cp-fold > summary::before { content: '▸ '; }
.cp-fold[open] > summary::before { content: '▾ '; }

/* 판정 패널 · 법/기준 탭 */
.law-col { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px 16px; display: grid; gap: 10px; align-content: start;
  /* ★grid-auto-rows 기본(auto)은 overflow:hidden 인 .law-sec 의 최소 기여를 0 으로 보고, 남는 높이를 섹션에 **균등 분배**한다 —
     내용이 열 높이를 넘으면 네 섹션이 똑같이 101px 로 잘렸다(사내기준 탭 실측 2026-09-07: offsetHeight 101 / scrollHeight 503).
     max-content 로 트랙을 내용 크기에 고정하면 열이 스크롤된다. */
  grid-auto-rows: max-content; }
.law-col[hidden] { display: none !important; }
.law-head { display: grid; gap: 6px; }
.law-q { font-size: var(--t-sm); line-height: 1.5; }
.law-act { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.law-sec { border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); overflow: hidden; }
.law-sec .block-title { padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.law-sec .cp-card:last-child { border-bottom: 0; }
.law-basis { list-style: none; margin: 0; padding: 6px 12px 8px; display: grid; gap: 4px; font-size: var(--t-micro); }
.law-basis li { display: flex; gap: 8px; align-items: baseline; }
.law-basis .src { cursor: pointer; }

/* 설계 검증 표 — 현재 낱장의 행. 색만이 아니라 왼쪽 띠로도 구분한다 */
.grid tbody tr.cur td:first-child, #gridBody tr.cur td:first-child { box-shadow: inset 3px 0 0 var(--tag); }
#gridBody tr.cur td { background: color-mix(in srgb, var(--tag-soft) 55%, transparent); }

/* 칩 — 레일 · AI 검수 · LH 의견 칩이 함께 쓴다. 시작 화면의 도서 진단 카드 규칙(그 카드의 격자 · 통계 · 목록 · 접기)은 2026-10-24 대표 지시로 카드와 함께 없앴다 */
.bd-chip { padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.bd-chip.muted { color: var(--ink-3); }
.cls-chip.vol { background: var(--tag-soft); color: var(--tag); }

/* 연결 도면 */
.link-groups .lg-group { margin-top: 8px; }
.lg-title { font-size: var(--t-micro); color: var(--ink-3); margin: 6px 0 4px; display: flex; gap: 6px; align-items: center; }
.lg-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.link-card { text-align: left; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 6px 9px; cursor: pointer; display: grid; gap: 2px; font: inherit; color: var(--ink); min-width: 0; }
.link-card:hover { border-color: var(--tag); background: var(--tag-soft); }
.link-card .lc-no { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--t-micro); color: var(--tag); font-weight: 650; }
.link-card .lc-name { font-size: var(--t-micro); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-card .lc-why { font-size: 11px; color: var(--ink-3); }
.link-card.ext { border-style: dashed; color: var(--ink-3); }   /* 표준상세 코드 — 사내기준 탭 카드로 가는 단추 */

/* 체크리스트 v2 — 「종류 다름」 표시: 시설은 맞지만 도서 종류가 달라 본문 근거로만 붙은 항목 */
.chk-flag { font-size: var(--t-micro); color: var(--amber-700, #b45309); background: var(--amber-50, #fffbeb); border: 1px solid var(--amber-200, #fde68a); border-radius: 999px; padding: 0 6px; margin-left: 6px; white-space: nowrap; }
.chk-card.chk-soft { border-style: dashed; }

/* 법/기준 탭 — 가이드북 근거줄(경로 1): 종류별 칩과 해소된 조문 원문 */
.law-basis li { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.basis-cite { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-micro); border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; background: var(--surface); white-space: nowrap; }
.basis-cite .k { color: var(--ink-4); }
.basis-cite.law { border-color: var(--blue-300, #93c5fd); }
.basis-cite.miss { border-style: dashed; color: var(--ink-4); }
.basis-text { flex-basis: 100%; font-size: var(--t-cap); color: var(--ink-3); border-left: 2px solid var(--blue-300, #93c5fd); padding: 2px 8px; margin: 2px 0 4px; }
.basis-text b { color: var(--ink-2); }

/* 떠나기 전 미리보기 — 카드·핫스팟 위 350ms 뒤 대상 도면 썸네일·이유·열기/나란히 */
.peek { position: fixed; z-index: 60; width: 320px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(20, 30, 50, .22); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
/* ★네 번째 [hidden] 사고(2026-09-11): 위 display:flex 가 UA 의 [hidden]{display:none} 을 이겨 Esc·마우스 떠남으로
   hidden 을 걸어도 미리보기가 화면에 남았다. JS 로 만든 요소라 id 기반 검사가 못 봤다 — 검사를 넓혔다(run_hidden_tests). */
.peek[hidden] { display: none !important; }
.peek-img { aspect-ratio: 1190 / 842; border: 1px solid var(--line); border-radius: 6px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.peek-img img { width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; }
.peek-t { display: flex; align-items: baseline; gap: 8px; font-weight: 600; }
.peek-t .lc-no { color: var(--blue-600); }
.peek-why { font-size: var(--t-micro); color: var(--ink-3); }
.peek-btns { display: flex; align-items: center; gap: 6px; }
.peek-btns .chk-page { margin-left: auto; }

/* 적용성 검토(AI) — 항목마다 「이 도면에서 검토할 수 있는가」 판정 칩과 근거 */
.chk-ai { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-micro); border-radius: 999px; padding: 0 7px; margin-left: 6px; white-space: nowrap; border: 1px solid var(--line); }
.chk-ai[data-a="yes"] { color: var(--green-700, #15803d); background: var(--green-50, #f0fdf4); border-color: var(--green-200, #bbf7d0); }
.chk-ai[data-a="partial"] { color: var(--amber-700, #b45309); background: var(--amber-50, #fffbeb); border-color: var(--amber-200, #fde68a); }
.chk-ai[data-a="no"] { color: var(--ink-4); background: var(--surface-2, #f6f7f9); }
.chk-ai-why { font-size: var(--t-micro); color: var(--ink-3); margin: 2px 0 0; }
.chk-ai-why b { color: var(--ink-2); font-weight: 600; }
.chk-card.chk-ai-no { opacity: .72; }
.chk-ai-fold summary { font-size: var(--t-small); color: var(--ink-3); cursor: pointer; padding: 6px 2px; }

/* 위원 정정 — 연결 카드의 「아님」(올렸을 때만) · 적용성 칩은 눌러 판정을 바꾼다 */
.link-card { position: relative; }
.link-card .lc-fix { position: absolute; right: 6px; top: 5px; display: none; font-size: var(--t-micro); line-height: 1; padding: 2px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-4); }
.link-card:hover .lc-fix { display: inline-block; }
.link-card .lc-fix:hover { border-color: var(--amber-500, #f59e0b); color: var(--amber-700, #b45309); }
button.chk-ai { font: inherit; font-size: var(--t-micro); cursor: pointer; }
button.chk-ai:hover { filter: brightness(.96); }

/* ── 설계검토 파트너 — 상황 띠 · 자료 갈래 바 · 자료 상태 띠 (LH 「탭 메뉴구조 제안」 반영 2026-09-07) ──
   작업 탭(판정·설계 검증)은 탭 모양, 자료 갈래 다섯은 알약 모양 — 「쓰는 자리」와 「읽는 자리」가 눈에서 갈린다.
   ★hidden 을 코드로 거는 요소마다 [hidden] 무효화 짝을 둔다(run_hidden_tests). */
.ctx-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 7px 10px 6px; border-bottom: 1px solid var(--line); background: var(--surface-2); flex-shrink: 0; }
.ctx-strip[hidden] { display: none !important; }
/* 상황 띠는 칩 일곱 개가 아니라 한 줄 글(검토 U1) — 값은 진하게, 사이는 가운뎃점, 위원이 고친 값은 파란 점선 밑줄 */
.ctx-facets { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px; font-size: var(--t-cap); color: var(--ink); font-weight: 600; min-width: 0; }
.ctx-v.fixed { text-decoration: underline dotted var(--blue-600); text-underline-offset: 3px; }
.ctx-v.fixed::after { content: '정정'; margin-left: 3px; font-size: var(--t-micro); font-weight: 600; color: var(--blue-800); }   /* 위원이 고친 값 — 툴팁만이면 터치 · 키보드에서 안 보인다 */
.ctx-sep { color: var(--ink-4); font-weight: 400; margin: 0 3px; }
/* AI 체크사항 — 결과가 없는 상태는 카드 대신 한 줄(검토 U1: 도면을 연 첫 순간 「못함 · 없음」 카드가 쌓였다) */
.ai-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--surface-2); font-size: var(--t-cap); color: var(--ink-3); }
.ai-line-t { font-weight: 650; color: var(--ink-2); }
.ai-line-m { flex: 1; min-width: 0; }
.ctx-lbl { font-size: var(--t-micro); color: var(--ink-3); margin-right: 2px; }
.ctx-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-size: var(--t-micro); color: var(--ink-3); }
.ctx-chip b { font-weight: 600; color: var(--ink); }
.pt-bar { display: flex; gap: 3px; padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--surface-2); flex-shrink: 0; }
.pt-bar { overflow-x: auto; scrollbar-width: none; }      /* 372px 에 다섯 알약 + 배지 — 넘치면 눌리지 말고 가로로 밀린다 */
.pt-bar::-webkit-scrollbar { display: none; }
.pt { flex: 1 1 auto; min-width: max-content; display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: inherit; font-size: var(--t-micro); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.pt:hover { border-color: var(--line-strong); background: var(--surface-3); }
.pt.on, .pt.on:hover { background: var(--tint-blue); color: var(--blue-800); border-color: var(--blue-600); font-weight: 600; }
.pt .tab-n { padding: 0 4px; font-size: var(--t-micro); min-width: 0; }
.pt.on .tab-n { background: rgba(27, 65, 185, .14); color: var(--blue-800); }
.verdict-wrap.wide .pt { font-size: 12px; }
.src-bar { display: flex; align-items: center; gap: 8px; padding: 5px 12px; border-bottom: 1px solid var(--line); background: var(--surface); font-size: var(--t-micro); color: var(--ink-3); flex-shrink: 0; }
.src-bar[hidden] { display: none !important; }
.src-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-req { color: var(--error); font-weight: 600; white-space: nowrap; }
.src-st { display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.src-st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.src-st[data-st="ok"] { background: var(--tint-verified); color: var(--verified); }
.src-st[data-st="pub"] { background: var(--tint-blue); color: var(--blue-800); }
.src-st[data-st="wait"] { background: var(--tint-error); color: var(--error); }
.src-st[data-st="recv"] { background: rgba(138, 86, 0, .12); color: #7A4C00; }   /* 접수됨 · 색인 전 — 원본은 있고 연결은 아직: 초록(연결)도 빨강(대기)도 아니다 */
.src-empty.recv { border-style: solid; }

/* ── 자료실 · 원문 열람 — 자료 / 차례 / 본문 3열. 표·본문은 밀도를 지킨다(전문가 도구). ── */
/* 원문 열람은 화면 폭 전부(2026-10-22 대표 지시) — 본문 칸이 남은 폭을 다 쓴다 */
#viewReader .guide-wrap { max-width: none; width: 100%; flex: 1 1 auto; align-self: stretch; padding: 12px 16px 16px; }
.rd-cols { display: grid; grid-template-columns: 250px 300px minmax(0, 1fr); gap: 12px; align-items: start; }
.rd-pop .lh-pop-card { width: min(96vw, 1100px); }
.rd-pop-body { max-height: 78vh; }
.rd-src, .rd-toc, .rd-body { border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); max-height: 72vh; overflow: auto; }
.rd-src { padding: 6px; }
/* 자료 패널 — 갈래 폴더(접고 펴기) + 자료 한 줄(2026-10-22) */
.rd-grp { border: 0; padding: 0; }
.rd-grp summary { list-style: none; display: flex; align-items: center; gap: 6px; padding: 7px 8px 4px; font-size: var(--t-micro); font-weight: 600; color: var(--ink-2); cursor: pointer; user-select: none; }
.rd-grp summary::-webkit-details-marker { display: none; }
.rd-grp summary::before { content: ''; width: 0; height: 0; border-left: 5px solid var(--ink-4); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform var(--d-base) var(--ease); }
.rd-grp[open] summary::before { transform: rotate(90deg); }
.rd-grp summary .rd-grp-c { margin-left: auto; font-weight: 400; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.rd-grp summary:focus-visible { outline: 2px solid var(--blue-600); outline-offset: -2px; border-radius: 6px; }
.rd-srcbtn .rd-doc { float: left; width: 10px; height: 12px; margin: 3px 6px 0 2px; border: 1.5px solid var(--ink-4); border-radius: 2px; background: linear-gradient(var(--ink-4), var(--ink-4)) no-repeat 2px 4px / 4px 1px, linear-gradient(var(--ink-4), var(--ink-4)) no-repeat 2px 7px / 4px 1px; }
.rd-srcbtn.on .rd-doc { border-color: var(--blue-600); }
.rd-srcbtn .rd-src-t { display: block; font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-srcbtn .rd-src-m { display: block; font-size: var(--t-micro); color: var(--ink-3); margin: 1px 0 0 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.rd-srcbtn { display: block; width: 100%; text-align: left; border: 1px solid transparent; background: none; padding: 4px 8px 4px 6px; border-radius: var(--r-ctl); cursor: pointer; font: inherit; color: var(--ink); }
.rd-srcbtn:hover { background: var(--surface-2); }
.rd-srcbtn.on { border-color: var(--blue-600); background: var(--tint-blue); }
.rd-srcbtn b { display: block; font-size: var(--t-sm); }
.rd-srcbtn span { display: block; font-size: var(--t-micro); color: var(--ink-3); margin-top: 2px; }
.rd-srcbtn .src-st { font-size: var(--t-micro); margin-top: 3px; }
.rd-toc { padding: 8px; display: grid; gap: 8px; align-content: start; }
.rd-tree { display: grid; gap: 1px; }
.rd-node { border: 0; background: none; text-align: left; padding: 4px 6px; border-radius: 4px; cursor: pointer; font: inherit; font-size: var(--t-sm); color: var(--ink); line-height: 1.45; display: flex; gap: 6px; align-items: baseline; }
.rd-node:hover { background: var(--surface-2); }
.rd-node.on { background: var(--tint-blue); color: var(--blue-800); }
.rd-node.branch { font-weight: 600; }
.rd-node .n-sub { font-size: var(--t-micro); color: var(--ink-3); font-weight: 400; }
.rd-node .n-page { margin-left: auto; font-size: var(--t-micro); color: var(--ink-4); font-variant-numeric: tabular-nums; }
.rd-kids { margin-left: 10px; border-left: 1px solid var(--line); padding-left: 4px; display: grid; gap: 1px; }
.rd-body { padding: 14px 16px 20px; font-size: var(--t-sm); line-height: 1.7; }
.rd-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.rd-h h3 { margin: 0; font-size: var(--t-lg); }
.rd-meta { font-size: var(--t-cap); color: var(--ink-3); display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.rd-act { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 12px; }
.rd-p { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 6px; margin: 4px 0; }
.rd-p .lbl { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rd-p.wide { grid-template-columns: 1fr; }
.rd-sec { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--line); }
.rd-sec .block-title { margin-bottom: 6px; }
.rd-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.rd-chip { font: inherit; font-size: var(--t-micro); border: 1px solid var(--line-strong); background: var(--surface-2); border-radius: 999px; padding: 2px 8px; cursor: pointer; color: var(--ink); }
.rd-chip:hover { border-color: var(--blue-600); color: var(--blue-800); }
.rd-chip.plain { cursor: default; color: var(--ink-3); }
.rd-hit { font-size: var(--t-micro); color: var(--ink-3); margin-left: 6px; }
.rd-img { max-width: 100%; border: 1px solid var(--line); border-radius: 4px; margin: 6px 0; }
@media (max-width: 1100px) { .rd-cols { grid-template-columns: 1fr; } .rd-src, .rd-toc, .rd-body { max-height: none; } }
/* 빈 상태 = 요청서: 무엇이 오면 무엇이 보이는가 · 필요한 것 · 담당 */
.src-empty { margin: 8px 12px 10px; border: 1px dashed var(--line-strong); border-radius: var(--r-ctl); padding: 8px 10px; background: var(--surface-2); font-size: var(--t-micro); color: var(--ink-2); display: grid; gap: 3px; line-height: 1.5; }
.src-empty b { color: var(--ink); }
.src-empty .who { color: var(--ink-4); }
/* 권위 등급 배지 — 1 법령 · 2 사내기준 · 3 검증도구 · 4 확정사례 · 5 참고 (색 + 글자, 색만으로 전달하지 않는다) */
.auth-badge { font-size: var(--t-micro); font-weight: 700; padding: 1px 6px; border-radius: 5px; color: #fff; letter-spacing: .02em; white-space: nowrap; }
.auth-badge.a1 { background: var(--blue-800); } .auth-badge.a2 { background: var(--warning); } .auth-badge.a3 { background: var(--verified); }
.auth-badge.a4 { background: var(--review); } .auth-badge.a5 { background: var(--abstain); }
.case-why { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.std-cite { cursor: default; }
.std-cite .src { font: inherit; font-size: inherit; color: var(--blue-800); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted; }
.ref-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px 12px; }
.ref-figs figure { margin: 0; border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; background: var(--surface); }
.ref-figs img { width: 100%; display: block; cursor: zoom-in; aspect-ratio: 4 / 3; object-fit: cover; }
.ref-figs figcaption { font-size: var(--t-micro); color: var(--ink-3); padding: 4px 6px; line-height: 1.35; }
.ref-figs figcaption b { color: var(--ink-2); }
.law-col .demo-note { margin: 0; }

/* ── 근거 바구니 — 카드 옆 「인용」, 판정 탭의 근거 칩 ── */
.cite-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.cite-row > .cp-card { flex: 1; min-width: 0; border-bottom: 0; }
.cite-row:last-child { border-bottom: 0; }
.cite-btn { flex: 0 0 auto; font: inherit; font-size: var(--t-micro); font-weight: 600; color: var(--blue-800); background: var(--surface); border: 0; border-left: 1px solid var(--line); padding: 0 9px; cursor: pointer; white-space: nowrap; }
.cite-btn:hover { background: var(--tint-blue); }
.cite-btn.on { background: var(--blue-800); color: #fff; }
.cite-btn.inl { border: 1px solid var(--line); border-radius: 7px; padding: 1px 7px; line-height: 1.5; margin-left: auto; }
.cp-card-h .cite-btn.inl, figcaption .cite-btn.inl { margin-left: auto; }
.law-basis .cite-btn.inl { margin-left: 0; }
.ref-list { display: flex; flex-wrap: wrap; gap: 4px; }
.ref-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 6px 2px 4px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); font-size: var(--t-micro); color: var(--ink-2); max-width: 100%; }
.ref-chip.k-case, .ref-chip.k-ref, .ref-chip.k-guide { border-style: dashed; }
.ref-chip .x { border: 0; background: none; color: var(--ink-3); cursor: pointer; font: inherit; padding: 0 2px; line-height: 1; }
.ref-chip .x:hover { color: var(--error); }
.ref-chip .go { border: 0; background: none; color: inherit; font: inherit; padding: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }   /* 글귀를 누르면 그 근거가 있는 곳으로 */
.ref-chip .go:hover { color: var(--blue-800); }
.ol-basis .ref-chip { margin: 1px 2px 1px 0; }

/* ── 상단 그룹 탭 아래 줄(자료실·지식관리) · 자료 현황 표 ── */
.subnav { display: flex; align-items: center; gap: 6px; padding: 5px 24px; border-bottom: 1px solid var(--line); background: var(--surface-2); flex-shrink: 0; }
.subnav[hidden] { display: none !important; }
.subnav-in { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.subnav-in[hidden] { display: none !important; }
.subnav-lbl { font-size: var(--t-micro); color: var(--ink-3); font-weight: 600; margin-right: 4px; letter-spacing: .02em; }
.subnav .sub { font: inherit; font-size: var(--t-cap); color: var(--ink-2); padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; white-space: nowrap; }
.subnav .sub:hover { border-color: var(--line-strong); }
.subnav .sub.on { background: var(--tint-blue); color: var(--blue-800); border-color: var(--blue-600); font-weight: 600; }
.reg-sum { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--t-sm); color: var(--ink-2); margin-bottom: 8px; }
.reg-table td { font-size: var(--t-cap); vertical-align: top; line-height: 1.5; }
.reg-table th { font-size: var(--t-micro); }

/* ── 상황 띠 — 사업유형 · 고치기 ── */
.ctx-biz select { font: inherit; font-size: var(--t-micro); border: 0; background: transparent; color: var(--ink); padding: 0; margin-left: 1px; font-weight: 600; cursor: pointer; }
.ctx-edit { cursor: pointer; border-style: dashed; font: inherit; }
.ctx-edit:hover { border-color: var(--line-strong); background: var(--surface-2); }
.ctx-edit.fixed { border-style: solid; color: var(--warning); border-color: var(--warning); font-weight: 600; }
.ctx-editor { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 4px; }
.ctx-editor[hidden] { display: none !important; }
.ctx-editor select, .ctx-editor input { font: inherit; font-size: var(--t-micro); height: 26px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--ink); padding: 0 6px; max-width: 150px; }
.ctx-editor input { flex: 1; min-width: 120px; }

/* 검증도구 머리의 「전체 항목」 라벨이 좁은 패널에서 세로로 꺾였다(실측 2026-09-07) */
.chk-all { white-space: nowrap; }

/* 검증도구 탭 — 항목 아래 「더 붙을 자료」 자리 */
.chk-wait { margin-top: 10px; border-top: 1px dashed var(--line-strong); padding-top: 8px; }
.chk-wait-h { font-size: var(--t-micro); color: var(--ink-3); font-weight: 600; padding: 0 2px 2px; display: flex; align-items: center; gap: 6px; }
.chk-wait .src-empty { margin: 6px 0; }
.src-empty .se-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* 프로젝트 카드의 사업유형 칩 */
.proj-card .biz-chip { font-size: var(--t-micro); font-weight: 600; color: var(--blue-800); background: var(--tint-blue); border-radius: 999px; padding: 1px 8px; margin-left: 6px; white-space: nowrap; }
.proj-card .biz-sel { font: inherit; font-size: var(--t-micro); font-weight: 600; color: var(--blue-800); background: var(--tint-blue); border: 0; border-radius: 999px; padding: 1px 6px; margin-left: 6px; cursor: pointer; }   /* 열려 있는 프로젝트의 사업유형 — 상황 띠에서 옮겨 옴(2026-10-11) */

/* ── Context Inspector (지침 v1.2 §8) — 고정 헤더 · 검수 이유 · 판정 행동 · 저장 상태 ── */
.verdict-wrap .verdict-col { overflow: auto; }
.ins-head { position: sticky; top: 0; z-index: 3; background: var(--surface); border-bottom: 1px solid var(--line); padding: 9px 14px 8px; display: grid; gap: 4px; }
.ins-l1 { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ins-no { font-family: var(--font-display); font-weight: 700; color: var(--ink-3); }
.ins-title { font-weight: 650; font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ins-l2 { font-size: var(--t-micro); color: var(--ink-3); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ins-l2 .mono { font-family: var(--font-mono); color: var(--blue-800); font-weight: 600; }
.save-state { display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; border-radius: 999px; font-weight: 600; font-size: var(--t-micro); background: var(--surface-2); color: var(--ink-3); }
.save-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.save-state[data-save-state="saved"], .save-state[data-save-state="clean"] { background: var(--tint-verified); color: var(--verified); }
.save-state[data-save-state="dirty"], .save-state[data-save-state="saving"] { background: var(--tint-warning); color: var(--warning); }
.save-state[data-save-state="error"] { background: var(--tint-error); color: var(--error); }
.ins-content { font-size: var(--t-sm); line-height: 1.6; white-space: pre-wrap; }
.ins-draft { margin-top: 6px; font-size: var(--t-micro); color: var(--ink-3); }
.ins-draft summary { cursor: pointer; }
.ins-draft-body { margin-top: 4px; padding: 6px 8px; border-left: 2px solid var(--line-strong); color: var(--ink-2); white-space: pre-wrap; }
.reason-list { margin: 0; padding-left: 16px; font-size: var(--t-micro); color: var(--ink-2); display: grid; gap: 3px; }
.reason-list li[data-k="unjudged"], .reason-list li[data-k="noimg"], .reason-list li[data-k="noref"] { color: var(--warning); }
.reason-list li[data-k="abstain"], .reason-list li[data-k="lowconf"] { color: var(--error); }
.ins-btns { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.ins-btns .btn.on { background: var(--tint-blue); color: var(--blue-800); border-color: var(--blue-600); font-weight: 600; }
.ins-nav { display: flex; gap: 5px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.ins-ai summary { cursor: pointer; font-size: var(--t-sm); font-weight: 600; }
.ins-ai .source-row { margin-top: 6px; }

/* ── Navigation Rail (지침 v1.2 §4) — 탐색 목적 아이콘 레일 + 옆 패널 ── */
.nav-rail { width: 54px; flex-shrink: 0; border-right: 1px solid var(--line); background: var(--surface-2); display: flex; flex-direction: column; gap: 2px; padding: 8px 4px; }
.nr-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px 6px; border-radius: var(--r-ctl); color: var(--ink-3); font: inherit; background: none; border: 0; cursor: pointer; }
.nr-btn svg { width: 17px; height: 17px; }
.nr-cap { font-size: var(--t-micro); letter-spacing: -.01em; }
.nr-btn:hover { background: var(--surface); color: var(--ink-2); }
.nr-btn.on { background: var(--tint-blue); color: var(--blue-800); font-weight: 650; }
.nr-n { position: absolute; top: 3px; right: 6px; min-width: 15px; padding: 0 4px; border-radius: 999px; background: var(--warning); color: #fff; font-size: var(--t-micro); font-weight: 700; line-height: 15px; }
.nav-pane { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.nav-pane[hidden], #navSheets[hidden] { display: none !important; }
#navSheets { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* 재개 카드 (§14) */
.rc-b { font-size: var(--t-micro); color: var(--ink-2); line-height: 1.5; }
/* 검수 현황 — 분모를 나눠서 (§12) */
/* 검수 큐 */
.q-chip { border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 2px 8px; font: inherit; font-size: var(--t-micro); color: var(--ink-3); cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.q-chip i { font-style: normal; color: var(--ink-4); font-family: var(--font-display); }
.q-chip.on { background: var(--tint-blue); color: var(--blue-800); border-color: var(--blue-600); font-weight: 600; }
.q-chip.on i { color: var(--blue-800); }
.q-item { display: block; width: 100%; text-align: left; padding: 7px 9px; border-radius: var(--r-ctl); border-left: 2px solid transparent; background: none; border-top: 0; border-right: 0; border-bottom: 0; font: inherit; cursor: pointer; }
.q-item:hover { background: var(--surface-2); }
.q-item.on { background: var(--tint-blue); border-left-color: var(--blue-800); }
.q-item .l1 { display: flex; align-items: center; gap: 5px; }
.q-item .pg { font-family: var(--font-display); font-size: var(--t-micro); color: var(--ink-3); background: var(--surface-3); padding: 0 5px; border-radius: 4px; flex-shrink: 0; }
.q-item .dno { font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600; color: var(--blue-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-item .l2 { display: block; font-size: var(--t-cap); color: var(--ink); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-item .l3 { display: block; font-size: var(--t-micro); color: var(--ink-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 레이어 매니저 (§10) */
.lay-note { font-size: var(--t-micro); color: var(--ink-3); padding: 2px 10px 8px; line-height: 1.5; }
.lay-raw, .lay-item { display: flex; gap: 7px; align-items: flex-start; padding: 7px 10px; font-size: var(--t-cap); cursor: pointer; }
.lay-raw { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-2); }
.lay-item.off { opacity: .5; }
.lay-item .lt b { font-weight: 600; }
/* 레이어 범례(2026-10-11) — 도면 위 색 · 선 모양 견본 */
.lay-leg { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 4px; font-size: var(--t-micro); color: inherit; }
.lay-leg .lg { display: inline-flex; align-items: center; white-space: nowrap; }   /* 견본과 글은 한 덩이 — 줄이 바뀌어도 안 갈라진다 */
.lay-leg .sw { display: inline-block; width: 16px; height: 10px; margin-right: 4px; box-sizing: border-box; border-radius: 2px; flex: 0 0 auto; }
/* 공동 검토 — 따라가는 중이면 단추 테두리를 띄운다(2026-10-11) */
#btnCollab.following { box-shadow: 0 0 0 2px var(--review, #2563eb) inset; }
.src-badge { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 4px; font-size: var(--t-micro); font-weight: 700; color: #fff; vertical-align: 1px; }
.src-badge.s-ai { background: var(--review); } .src-badge.s-hu { background: var(--error); } .src-badge.s-ru { background: var(--blue-800); }
/* 갈래별 찾기 (§4.5) */
.s-sec { border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.s-h { font-size: var(--t-micro); color: var(--ink-3); font-weight: 600; padding: 7px 10px 4px; }
.s-h b { font-family: var(--font-display); color: var(--ink-2); }

/* 상황 띠의 프로젝트 칩 — 어디에 저장되는지 작업 화면에서 보인다(지침 v1.2 §5) */
.ctx-chip.proj { border-color: var(--blue-600); background: var(--tint-blue); }
.ctx-chip.proj b { color: var(--blue-800); }

/* 새로 저장한 행을 잠깐 강조 — 표는 아래로 늘어나서, 데려와도 맨 아래 행은 토스트와 겹쳐 눈에 안 띈다 */
@keyframes grid-flash { 0% { background: var(--tint-warning); } 100% { background: transparent; } }
.grid tbody tr.flash td { animation: grid-flash 1.4s var(--ease, ease-out); }
@media (prefers-reduced-motion: reduce) {
  .grid tbody tr.flash td { animation: none; }
  .grid tbody tr.flash td:first-child { box-shadow: inset 3px 0 0 var(--warning); }
}

/* BP 도면 탭 — 짝을 지을 기준 네 칸 · 접수되면 할 일 (자료 접수 전이라 BP 낱장은 지어내지 않는다) */
.bp-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 10px 12px; }
.bp-key { display: grid; gap: 2px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface-2); min-width: 0; }
.bp-key span { font-size: var(--t-micro); color: var(--ink-3); }
.bp-key b { font-size: var(--t-cap); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bp-key b i { font-style: normal; font-weight: 400; color: var(--ink-4); }
.bp-key em { font-style: normal; font-size: var(--t-micro); color: var(--ink-4); line-height: 1.35; }
.bp-then { margin: 0; padding: 8px 12px 10px 28px; font-size: var(--t-micro); color: var(--ink-2); display: grid; gap: 4px; line-height: 1.5; }

/* ── 검증도구 탭 · 원장 줄 · 최근 결정 (PR E) ── */
.chk-ledger { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--t-micro); color: var(--ink-2); margin: 2px 0 4px; }
.chk-ledger .btn { margin-left: auto; }
.chk-decs { margin: 0 0 10px; }
.chk-dec .cp-card-x .rd-chip { margin: 2px 4px 2px 0; }
.chk-dec .rd-open { margin-left: 6px; }

/* ── BP 짝 후보 (PR F) ── */
.bp-pair .cp-card-x .rd-chip { margin: 2px 4px 2px 0; }
.bp-co { margin: 6px 0 4px; padding-left: 18px; font-size: var(--t-micro); color: var(--ink-2); line-height: 1.6; }
.bp-co li { margin: 1px 0; }
.bp-co .more { color: var(--ink-4); list-style: none; margin-left: -12px; }

/* ── 프로젝트 법규 체크리스트 (PR G) ── */
.lc-sec .cp-card-t { font-weight: 600; }
.lc-v { font-size: var(--t-micro); padding: 1px 7px; border-radius: 999px; font-weight: 600; }
.lc-v[data-v="ok"] { background: var(--tint-verified); color: var(--verified); }
.lc-v[data-v="na"] { background: var(--surface-2); color: var(--ink-3); }
.lc-v[data-v="todo"] { background: rgba(138, 86, 0, .12); color: #7A4C00; }
.lc-v[data-v="no"] { background: var(--tint-error); color: var(--error); }
.lc-v[data-v="etc"] { background: var(--tint-blue); color: var(--blue-800); }
.lc-vtext { color: var(--ink-2); }

/* ── BP 검토 표기(콜아웃) — 코드 단추 · 팝오버 · 도면 위 겹침 ── */
.bpm-code { font: 600 var(--t-micro)/1 var(--mono, ui-monospace, monospace); padding: 3px 7px; border-radius: 5px; border: 1px solid currentColor; background: var(--surface); cursor: pointer; white-space: nowrap; }
.bpm-code[data-k="chk"] { color: #B4002F; }
.bpm-code[data-k="issue"] { color: #0A6FB8; }
.bpm-code:hover { background: var(--surface-2); }
.bpm-code.off { color: var(--ink-4); border-style: dashed; cursor: default; font-weight: 500; }
.bpm-list { list-style: none; margin: 6px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bpm-row { display: flex; align-items: baseline; gap: 8px; font-size: var(--t-micro); color: var(--ink-2); line-height: 1.5; }
.bpm-row .bpm-t { flex: 1; min-width: 0; }
.bpm-list .more { color: var(--ink-4); font-size: var(--t-micro); }
.bpm-st { font-size: 11px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--ink-3); white-space: nowrap; }
.bpm-st[data-st="미반영"] { background: var(--tint-error); color: var(--error); }
.bpm-pop { position: fixed; z-index: 70; width: 340px; max-height: min(70vh, 560px); overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(20, 30, 50, .22); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.bpm-pop[hidden] { display: none !important; }
.bpm-pop-h { display: flex; align-items: center; gap: 8px; }
.bpm-pop-h .btn { margin-left: auto; }
.bpm-h { font-weight: 600; line-height: 1.45; }
.bpm-here { font-size: var(--t-micro); color: var(--ink-3); }
.bpm-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: var(--t-micro); color: var(--ink-3); }
.bpm-meta span + span::before { content: '·'; margin-right: 8px; color: var(--ink-4); }
.bpm-cps { margin: 0; padding-left: 22px; font-size: var(--t-small, 13px); line-height: 1.6; color: var(--ink); }
.bpm-lines { font-size: var(--t-small, 13px); line-height: 1.6; color: var(--ink-2); }
.bpm-where { border-top: 1px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.bpm-wh { display: flex; gap: 6px; align-items: baseline; text-align: left; font-size: var(--t-micro); padding: 4px 6px; border: 0; border-radius: 6px; background: none; color: var(--ink-2); cursor: pointer; }
.bpm-wh:hover { background: var(--surface-2); }
.bpm-wh em { margin-left: auto; font-style: normal; color: var(--ink-4); white-space: nowrap; }
.chk-bpm { margin-top: 6px; font-size: var(--t-micro); }
.chk-bpm summary { cursor: pointer; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.chk-bpm[open] summary { margin-bottom: 4px; }
.canvas-stack .bpm-layer { position: absolute; inset: 0; pointer-events: none; }
.canvas-stack .overlay.armed ~ .bpm-layer, .canvas-stack .overlay.placing ~ .bpm-layer, .canvas-stack .overlay.region ~ .bpm-layer { display: none; }   /* 마크를 그리는 동안 · 지난 의견 자리를 찍는 동안은 표기 단추가 클릭을 가로채지 않게 */
.bpm-hot { position: absolute; pointer-events: auto; padding: 0; border: 2px solid transparent; border-radius: 3px; background: transparent; cursor: pointer; box-sizing: content-box; margin: -2px; }
.bpm-hot[data-k="chk"]:hover, .bpm-hot[data-k="chk"]:focus-visible, .bpm-hot[data-k="chk"].on { border-color: #B4002F; background: rgba(180, 0, 47, .12); outline: none; }
.bpm-hot[data-k="issue"]:hover, .bpm-hot[data-k="issue"]:focus-visible, .bpm-hot[data-k="issue"].on { border-color: #0A6FB8; background: rgba(10, 111, 184, .12); outline: none; }
.bpm-hot.off { cursor: default; }
.bpm-target { position: absolute; border-radius: 4px; transition: background .12s ease-out; }
.bpm-target.on[data-k="chk"] { background: rgba(180, 0, 47, .16); box-shadow: 0 0 0 2px #B4002F; }
.bpm-target.on[data-k="issue"] { background: rgba(10, 111, 184, .16); box-shadow: 0 0 0 2px #0A6FB8; }
.bpm-chip { border-color: #0A6FB8; color: #0A6FB8; }
.bpm-chip[hidden] { display: none; }

/* ── 상세 크롭(그림 + 설명) ── */
.rd-img { display: block; max-width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #fff; margin: 4px 0 12px; cursor: zoom-in; }
.rd-thumb { display: block; width: 100%; max-height: 220px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: #fff; margin: 6px 0; cursor: zoom-in; }
.bpd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 8px 12px 12px; }
.bpd { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); }
.bpd img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; cursor: zoom-in; }
.bpd figcaption { font-size: var(--t-micro); color: var(--ink-2); padding: 6px 8px; line-height: 1.5; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }

/* ── BP 표(칸 단위) ── */
.rd-tblwrap { overflow: auto; max-height: 70vh; border: 1px solid var(--line); border-radius: 8px; margin: 6px 0 12px; background: var(--surface); }
.rd-tbl { border-collapse: collapse; font-size: var(--t-micro); line-height: 1.45; min-width: 100%; }
.rd-tbl td { border: 1px solid var(--line); padding: 3px 6px; vertical-align: middle; cursor: pointer; white-space: normal; min-width: 28px; }
.rd-tbl td:hover { background: var(--tint-blue); }
.rd-tbl tr:first-child td, .rd-tbl tr:nth-child(2) td { background: var(--surface-2); font-weight: 600; position: sticky; top: 0; }
.rd-tbl .rd-chip { padding: 0 6px; font-size: 11px; }
/* 참조 도서 — 그림 카드(그림 + 설명) · 본문 속 작은 제목 · 원본 자리 없는 표 */
.rd-fig { margin: 8px 0 14px; }
.rd-fig .rd-img { margin-bottom: 4px; max-height: 70vh; }
.rd-fig figcaption { font-size: var(--t-micro); line-height: 1.5; }
.rd-fig figcaption .chk-page { margin-left: 6px; }
.rd-p.rd-subh > div { font-weight: 700; }
.rd-tbl.plain td { cursor: default; vertical-align: top; }
.rd-tbl.plain td:hover { background: transparent; }
.canvas-stack .cmp-focus { position: absolute; border: 2px solid #C77700; background: rgba(199, 119, 0, .18); border-radius: 2px; pointer-events: none; }

/* ── 통합 찾기(자료실) ── */
.rd-find { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 0 0 10px; flex: 0 0 auto; }
.rd-find .field { flex: 1; min-width: 260px; }
.rd-sem { display: flex; align-items: center; gap: 5px; font-size: var(--t-micro); color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.rd-found { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin-bottom: 12px; max-height: 46vh; overflow: auto; flex: 0 0 auto; }
.rd-found[hidden] { display: none; }
.rd-found .rd-fgrp { position: sticky; top: 0; background: var(--surface-2); padding: 5px 12px; font-size: var(--t-micro); font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.rd-hit { display: flex; gap: 8px; align-items: baseline; width: 100%; text-align: left; padding: 7px 12px; border: 0; border-bottom: 1px solid var(--line-2, var(--line)); background: none; cursor: pointer; font-size: var(--t-small, 13px); }
.rd-hit:hover { background: var(--tint-blue); }
.rd-hit b { font-weight: 600; flex: 1; min-width: 0; }
.rd-hit em { font-style: normal; color: var(--ink-4); font-size: var(--t-micro); white-space: nowrap; }
.rd-hit .rd-via { font-size: 11px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--ink-3); }
.rd-found .rd-sum { padding: 8px 12px; font-size: var(--t-micro); color: var(--ink-3); border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ── 통합 묻기 ── */
.rd-answer { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 12px 14px; margin-bottom: 12px; flex: 0 0 auto; }
.rd-answer[hidden] { display: none; }
.rd-answer .q { font-weight: 600; margin-bottom: 8px; }
.rd-answer .a { font-size: var(--t-small, 13px); line-height: 1.7; white-space: pre-wrap; }
.rd-answer .a b { font-weight: 600; }
.rd-answer .meta { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); font-size: var(--t-micro); color: var(--ink-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rd-cite { display: inline-block; font-size: 11px; padding: 0 6px; margin: 0 1px; border-radius: 4px; border: 1px solid var(--line); background: var(--surface-2); color: var(--blue-800, #1B41B9); cursor: pointer; font-family: var(--mono, ui-monospace, monospace); }
.rd-cite:hover { background: var(--tint-blue); }
.rd-cite.bad { color: var(--error); border-color: var(--error); cursor: default; }
.rd-answer .cursor { display: inline-block; width: 7px; height: 14px; background: var(--ink-3); animation: blink 1s steps(2) infinite; vertical-align: -2px; }

/* ── 사업승인 검토사례 편람 ── */
.mn-cases { list-style: none; margin: 6px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-micro); color: var(--ink-2); line-height: 1.55; }
.mn-cases li { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.mn-dist { font-weight: 600; color: var(--ink); white-space: nowrap; }
.mn-cases .more { color: var(--ink-4); }
.mn-img { width: 92px; height: 64px; object-fit: cover; object-position: center; border: 1px solid var(--line); border-radius: 4px; background: #fff; cursor: zoom-in; }
.mn-card .cp-card-x b { font-weight: 600; }

/* ── 하자 사례 ── */
.df-card .df-basis { color: var(--ink-3); font-size: var(--t-micro); white-space: pre-wrap; }
.df-card .cp-card-t { font-weight: 600; }

/* ── 공사감독 핸드북 ── */
/* 핸드북 사진 자리(2026-10-11) — 쪽 그림을 잘라 보이는 썸네일 격자. 누르면 원본 쪽 */
.hb-figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px 10px; margin: 6px 0 10px; }
.hb-figs.small { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hb-fig { display: block; padding: 0; margin: 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.hb-fig .hb-thumb { display: block; width: 100%; background-repeat: no-repeat; border: 1px solid var(--line); border-radius: 6px; }
.hb-fig:hover .hb-thumb, .hb-fig:focus-visible .hb-thumb { outline: 2px solid var(--accent, #1B41B9); outline-offset: 1px; }
.hb-fig .hb-cap { display: block; margin-top: 3px; font-size: var(--t-micro); line-height: 1.4; color: var(--ink-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hb-figs .hb-more { align-self: center; grid-column: 1 / -1; }
.hb-fig.drawing .hb-thumb { background-color: #fff; }   /* 선 그림(도해) — 흰 바탕이 칸 밖으로 비치지 않게 */
.hb-caps { list-style: disc; margin: 6px 0 4px; padding-left: 18px; font-size: var(--t-micro); color: var(--ink-2); line-height: 1.6; }
.hb-caps .more { list-style: none; margin-left: -12px; color: var(--ink-4); }

/* ── BP 폴더 연결 띠 ── */
.bp-conn { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 10px; padding: 8px 10px; border: 1px dashed var(--line-strong); border-radius: 8px; font-size: var(--t-micro); color: var(--ink-3); }
.bp-find { width: 100%; margin: 0 0 10px; color: var(--ink-3); }
.bp-conn.on { border-style: solid; border-color: var(--line); color: var(--ink-2); }
.bp-conn b { color: var(--ink); }


/* ── LH 분류 체계 통일안 · AI 검토 마크 · 세트 격자 (2026-09-30) ── */
.rail-item .l3 { display:flex; align-items:center; gap:4px; font-size: var(--t-micro); color: var(--ink-3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rail-item .l3 .cnt { margin-left:4px; padding:0 5px; border-radius:999px; font-weight:700; flex:none }   /* 2026-10-21: 표기 N(체크리스트 ITR) · 검수 N(AI 검수) — 검토밀도 통계 대신 */
.rail-item .l3 .cnt.itr { background:#FEE2E2; color:#991B1B } .rail-item .l3 .cnt.rv { background:#DBE4FF; color:#1B41B9 }
.rail-item .l3 .cnt.zero { background:#EEF2F6; color:#9CA3AF; font-weight:500 }
.cls-chip.lh { background:#E6F4F1; color:#0E5E56 }
.ai-row { display:flex; align-items:center; gap:6px; padding:4px 0; border-bottom:1px dashed var(--line); font-size:12px } .ai-row .ai-desc { flex:1; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#btnCmpSync.on { background:#0E7C86; color:#fff }
.set-grid-wrap { overflow:auto; padding:0 6px 8px } .set-grid { border-collapse:collapse; font-size:11px; width:100% } .set-grid th, .set-grid td { border-bottom:1px solid var(--line); padding:3px 4px; vertical-align:top; text-align:left } .set-grid thead th { position:sticky; top:0; background:var(--paper, #fff); font-weight:700; color:var(--ink-3); white-space:nowrap } .set-grid tbody th { white-space:nowrap; font-weight:700; color:var(--ink-1) } .set-grid tbody th i { font-style:normal; color:var(--ink-4); margin-left:4px; font-weight:400 }
.set-chip { display:inline-block; margin:1px 2px 1px 0; padding:1px 6px; border:1px solid var(--line); border-radius:999px; background:#fff; font-size:11px; cursor:pointer; color:var(--ink-2) } .set-chip.on { background: var(--tint-blue); color: var(--blue-800); border-color: var(--blue-600) }
.std-panel { margin-top:6px; padding:6px; border:1px solid var(--line); border-radius:8px; background:#fff } .std-panel img { display:block; width:100%; max-height:240px; object-fit:contain; border:1px solid var(--line); border-radius:6px; background:#fff; cursor:zoom-in }
.ai-row { flex-wrap:wrap } .ai-row .ai-no { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; color:#fff; font-size:11px; font-weight:700; flex:none }
.ai-row .lhc { color:#1f3cff; border:1.5px solid #1f3cff; border-radius:3px; padding:0 5px; background:#fff; font-size:11px }

/* ── 이동 기록 · 연결 정정 (UX 연구 G·H, 2026-09-30) ── */
.nav-hist { display:flex; align-items:center; gap:4px; padding:3px 10px; border-bottom:1px solid var(--line); font-size:11px; white-space:nowrap; overflow:hidden; min-height:26px }
.nav-hist[hidden] { display:none }
.nh-chip { display:inline-flex; align-items:center; gap:3px; padding:1px 7px; border:1px solid var(--line); border-radius:999px; background:#fff; font-size:11px; cursor:pointer; color:var(--ink-2); font-family:var(--font-product) }
.nh-chip:hover { background:var(--surface-2, #f3f4f6) } .nh-chip.pin { border-color:#0E7C86; color:#0E5E56 } .nh-chip.pin.on { background:#0E7C86; color:#fff }
.nh-chip i { font-style:normal; opacity:.6; padding-left:2px } .nh-chip i:hover { opacity:1; color:#B23A2B }
.nh-sep { width:1px; height:14px; background:var(--line); margin:0 4px } .nh-arrow { color:var(--ink-4); padding:0 1px }
.nh-cur { padding:1px 7px; border-radius:999px; background:var(--ink-1, #111); color:#fff; font-family:var(--font-product); font-weight:700 }
.nh-btn { height:20px; padding:0 6px; border:1px solid var(--line); border-radius:5px; background:#fff; cursor:pointer; font-size:11px } .nh-btn:disabled { opacity:.35; cursor:default }
.nh-recent { position:relative; margin-left:auto } .nh-recent summary { cursor:pointer; list-style:none; padding:1px 7px; border:1px solid var(--line); border-radius:5px; background:#fff } .nh-recent summary::-webkit-details-marker { display:none }
.nh-list { position:absolute; right:0; top:calc(100% + 4px); z-index:30; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.12); min-width:280px; padding:4px; display:flex; flex-direction:column }
.nh-list button { text-align:left; padding:5px 8px; border:0; background:none; cursor:pointer; font-size:12px; border-radius:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .nh-list button:hover { background:var(--surface-2, #f3f4f6) }
.fix-menu { position:fixed; z-index:60; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.14); padding:6px; min-width:200px; display:flex; flex-direction:column }
.fix-menu .fm-title { font-size:11px; color:var(--ink-3); padding:2px 6px 6px } .fix-menu button { text-align:left; border:0; background:none; padding:6px 8px; border-radius:6px; cursor:pointer; font-size:12px } .fix-menu button:hover { background:#FEF3C7 }
.lg-actions { margin-top:6px } body.link-add .rail-item { outline:1px dashed #0E7C86; cursor:copy }

/* 연관 표준상세 추천(2026-10-03) — 사내기준 탭 카드 + 나란히 비교 */
.das-card{display:grid;grid-template-columns:72px 1fr;gap:8px;cursor:pointer;border-style:dashed;border-color:#c4b5fd;background:#f5f3ff}
.das-card img{width:72px;height:56px;object-fit:contain;background:#fff;border:1px solid var(--line,#e3e6eb);border-radius:5px}
.das-card.das-habit{border-color:#fcd34d;background:#fffbeb}.das-card.das-weak{border-color:#d1d5db;background:#f9fafb}
.das-g{font-size: var(--t-micro);border-radius:7px;padding:0 6px;font-weight:700;margin-left:4px}.das-g-강{background:#166534;color:#fff}.das-g-중{background:#bbf7d0;color:#14532d}.das-g-약{background:#e5e7eb;color:#374151}.das-g-관행{background:#fef3c7;color:#92400e}
.das-chip{font-size:11px;border-radius:8px;padding:1px 6px;margin:1px;display:inline-block;background:color-mix(in srgb,var(--c) 18%,#fff);border:1px solid color-mix(in srgb,var(--c) 55%,#fff)}
.das-cmp{position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;z-index:900}.das-cmp.on{display:block}
.das-box{position:absolute;inset:16px;background:#fff;border-radius:12px;display:grid;grid-template-rows:auto 1fr auto auto;overflow:hidden}
.das-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 14px;border-bottom:1px solid #e3e6eb}.das-h [data-x]{margin-left:auto}.das-code{color:#7c3aed;font-size:16px}
.das-g2{display:grid;grid-template-columns:1fr 1fr;min-height:0}.das-p{display:flex;flex-direction:column;min-height:0;border-right:1px solid #e3e6eb}.das-pt{padding:6px 12px;font-size:12px;color:#6b7280;border-bottom:1px solid #e3e6eb}
.das-v{position:relative;flex:1;overflow:hidden;background:#f1f3f6}.das-s{position:absolute;left:0;top:0;transform-origin:0 0}.das-s img{display:block}
.das-o{position:absolute;border:2px solid var(--c);background:color-mix(in srgb,var(--c) 22%,transparent);border-radius:3px;font-size: var(--t-micro);color:#fff;line-height:0}
.das-terms{padding:7px 14px;border-top:1px solid #e3e6eb;background:#fafbfc}.das-f{display:flex;gap:8px;align-items:center;padding:9px 14px 9px 120px;border-top:1px solid #e3e6eb;position:relative}
.das-menu{position:absolute;bottom:48px;left:50%;background:#fff;border:1px solid #e3e6eb;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.15);padding:4px;display:none}.das-menu.on{display:block}.das-menu div{padding:6px 12px;border-radius:5px;cursor:pointer;font-size:13px}.das-menu div:hover{background:#eef1f5}

/* ═══════════════════ 의견 목록(A1) — 뷰어 자리의 표 + 레일 패널 (docs/specs/2026-10-09-opinion-list-A1.md) ═══════════════════ */
.list-col { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--surface); }
.list-col[hidden] { display: none; }
.list-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: var(--t-cap); color: var(--ink-3); }
.list-tools .lt-title { font-weight: 650; color: var(--ink); font-size: var(--t-body); }
.list-tools .lt-n { font-family: var(--font-display); color: var(--ink-2); }
.list-tools .spacer { flex: 1; }
.list-body { flex: 1; min-height: 0; overflow: auto; }
.ol-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-sm); }
.ol-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); border-bottom: 1px solid var(--line); padding: 7px 10px; text-align: left; font-size: var(--t-cap); font-weight: 700; color: var(--ink-3); white-space: nowrap; cursor: pointer; user-select: none; }
.ol-table thead th:hover { color: var(--ink); }
.ol-table thead th .dir { color: var(--blue-800); margin-left: 3px; }
.ol-table tbody td { padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.ol-table tbody tr.row { cursor: pointer; }
.ol-table tbody tr.row:hover { background: var(--surface-2); }
.ol-table tbody tr.row.sel { background: var(--tint-blue); }
.ol-table tbody tr.row.sel td { color: var(--ink); }
.ol-table tr.grp td { background: var(--surface-3, var(--surface-2)); color: var(--ink); font-weight: 650; padding: 6px 10px; border-bottom: 1px solid var(--line-strong, var(--line)); }
.ol-table tr.grp td i { font-style: normal; color: var(--ink-3); font-weight: 500; margin-left: 6px; font-family: var(--font-display); }
.ol-table td.c { text-align: center; } .ol-table td.num { text-align: right; font-family: var(--font-display); }
.ol-no { display: inline-block; min-width: 20px; height: 20px; line-height: 18px; text-align: center; border: 1.5px solid var(--error); border-radius: 50%; color: var(--error); font-weight: 700; font-size: var(--t-cap); font-family: var(--font-display); }
.ol-dno { font-family: var(--font-mono); color: var(--ink); } .ol-dname { display: block; color: var(--ink-3); font-size: var(--t-cap); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-thumb { width: 76px; height: 54px; object-fit: cover; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); display: block; }
.ol-thumb-empty { width: 76px; height: 54px; border: 1px dashed var(--line); border-radius: 4px; color: var(--ink-4); font-size: var(--t-micro); display: flex; align-items: center; justify-content: center; }
.ol-code { display: inline-block; border: 1px solid var(--blue-800); color: var(--blue-800); border-radius: 4px; padding: 0 5px; font-size: var(--t-micro); font-family: var(--font-display); margin: 1px 2px 1px 0; white-space: nowrap; }
.ol-kind { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-2); font-size: var(--t-cap); white-space: nowrap; }
.ol-kind.est { border-style: dashed; color: var(--ink-3); }
.ol-title { color: var(--ink); font-weight: 600; } .ol-content { display: block; color: var(--ink-3); font-size: var(--t-cap); max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-space { font-size: var(--t-cap); color: var(--ink-2); } .ol-space .near { color: var(--ink-4); }
.ol-src { font-size: var(--t-cap); color: var(--ink-3); white-space: nowrap; } .ol-src b { color: var(--ink-2); font-weight: 600; }
.ol-empty { padding: 48px 20px; text-align: center; color: var(--ink-3); }
.ol-empty b { display: block; color: var(--ink); margin-bottom: 6px; }
/* 레일 패널 */
.lp-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px 10px 4px; }
.lp-sum div { border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 6px 8px; text-align: center; }
.lp-sum b { display: block; font-family: var(--font-display); font-size: var(--t-lg); color: var(--ink); } .lp-sum span { color: var(--ink-3); font-size: var(--t-micro); }
.lp-sec { padding: 8px 10px 4px; } .lp-sec .block-title { margin-bottom: 4px; }
.lp-acts { display: flex; flex-direction: column; gap: 5px; padding: 6px 10px 10px; }
.lp-acts .btn { justify-content: flex-start; height: auto; min-height: 30px; white-space: normal; text-align: left; }   /* 긴 이름은 잘리지 않고 줄을 바꾼다(2026-10-26) */
.lp-acts .lp-note { margin: 2px 0 0; line-height: 1.4; }
.lp-card { margin: 6px 10px 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2); font-size: var(--t-cap); color: var(--ink-2); }
.lp-card .t { color: var(--ink); font-weight: 650; font-size: var(--t-sm); margin-bottom: 2px; } .lp-card .b { white-space: pre-wrap; max-height: 140px; overflow: auto; }
.lp-card .acts { display: flex; gap: 6px; margin-top: 6px; }
@media print { .list-col { display: none; } }
/* 「의견」 모드에서 뷰어 열을 감춘다 — display:flex 가 hidden 속성을 이기므로 명시한다 */
.viewer-col[hidden] { display: none; }
.ol-code.rule { border-style: dashed; border-color: var(--ink-4); color: var(--ink-3); }
button.ol-code { background: none; cursor: pointer; }
button.ol-code:hover { background: var(--tag-soft); }
.verdict-wrap[hidden], .gutter[hidden] { display: none; }

/* ═══════════════════ 의견 도구함(A6) — 종류 칩 · 틀 · 단축키 안내 · 같은 자리 복제 ═══════════════════ */
.mp-kinds { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.mp-kind { border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 2px 9px; font: inherit; font-size: var(--t-cap); color: var(--ink-3); cursor: pointer; }
.mp-kind:hover { color: var(--ink); border-color: var(--ink-3); }
.mp-kind.on { background: var(--tint-blue); border-color: var(--blue-600); color: var(--blue-800); font-weight: 600; }
.mp-tpl { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.mp-tpl .field { height: 26px; font-size: 11px; flex: 1; min-width: 0; }
.kh-box { max-width: 520px; overflow-y: auto; overscroll-behavior: contain; }   /* 단축키가 늘어 상자가 화면보다 길다 — 목록은 굴리고 닫기 줄은 아래에 붙인다 */
.kh-box .st-actions { position: sticky; bottom: -18px; background: var(--surface); padding: 10px 0 2px; margin-bottom: -2px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.kh-box table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); margin: 4px 0 8px; }
.kh-box td { padding: 6px 8px; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: top; }
.kh-box td:first-child { width: 190px; white-space: nowrap; }
.kh-box kbd { font-family: var(--font-mono); font-size: var(--t-cap); border: 1px solid var(--line-strong, var(--line)); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; background: var(--surface-2); color: var(--ink); white-space: nowrap; }
.paste-list { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-ctl); margin: 8px 0; }
.pl-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: var(--t-sm); cursor: pointer; }
.pl-row:last-child { border-bottom: 0; } .pl-row:hover { background: var(--surface-2); }
.pl-row[hidden] { display: none; }
.pl-row .pl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.pl-row input { margin: 0; }


/* ═══════════════════ 개정 비교(A3) — 변화율 칩 · 변경 없음 묶음 · 변경 영역 목록 ═══════════════════ */
.rev-item .chg { margin-left: auto; font-size: var(--t-micro); padding: 1px 6px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-3); white-space: nowrap; font-family: var(--font-display); }
.rev-item .chg[data-lv="큼"] { border-color: var(--error); color: var(--error); }
.rev-item .chg[data-lv="작음"] { border-color: var(--warning); color: var(--warning); }
.rev-item .chg[data-lv="없음"] { color: var(--ink-4); }
.rev-none > summary { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); margin: 4px 4px 6px; cursor: pointer; }
.rev-regions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: var(--t-cap); color: var(--ink-2); background: var(--surface); }
.rev-regions[hidden] { display: none; }
.rg-head { margin-right: 6px; } .rg-head b { font-family: var(--font-display); }
.rg-toggle { margin-left: 8px; display: inline-flex; gap: 4px; align-items: center; font-weight: 400; cursor: pointer; } .rg-toggle input { margin: 0; }
.rg-item { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; background: var(--surface); font: inherit; font-size: var(--t-cap); color: var(--ink-2); cursor: pointer; }
.rg-item:hover { border-color: var(--ink-3); }
.rg-item b { font-family: var(--font-display); color: var(--ink); }
.rg-item[data-kind="added"] b { color: var(--blue-800); } .rg-item[data-kind="removed"] b { color: var(--error); } .rg-item[data-kind="modified"] b { color: #7048e8; }
.rg-item i { font-style: normal; color: var(--blue-800); border-left: 1px solid var(--line); padding-left: 6px; } .rg-item i:hover { text-decoration: underline; }

/* ═══════════════════ 상태 워크플로(A4) — 대화상자 · 진행 칩 · 일괄 처리 막대 · 회차 ═══════════════════ */
.ask-box { max-width: 520px; width: min(520px, 92vw); }
.ask-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0; }
.ask-chips .ask-lbl { font-size: var(--t-cap); color: var(--ink-3); margin-right: 4px; min-width: 56px; } .ask-chips .ask-lbl i { font-style: normal; color: var(--error); font-size: var(--t-micro); }
.ol-stage { display: inline-block; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); font-size: var(--t-cap); color: var(--ink-2); white-space: nowrap; background: var(--surface); }
.ol-stage[data-st="지적"] { border-color: var(--blue-600); color: var(--blue-800); }
.ol-stage[data-st="회신"] { border-color: var(--warning); color: var(--warning); }
.ol-stage[data-st="해소"] { border-color: var(--verified); color: var(--verified); }
.ol-stage[data-st="재지적"] { border-color: var(--error); color: var(--error); }
.ol-stage[data-st="초안"] { color: var(--ink-3); border-style: dashed; }
.list-tools .lb { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--blue-600); border-radius: var(--r-ctl); background: var(--tint-blue); color: var(--blue-800); font-size: var(--t-cap); }
.list-tools .lb[hidden] { display: none; } .list-tools .lb b { font-family: var(--font-display); }
.ol-table th.c, .ol-table td.c input { text-align: center; }
.rw-step i { font-style: normal; color: var(--ink-4); font-size: var(--t-micro); } .rw-txt b { color: var(--ink); font-weight: 600; margin-right: 2px; }

/* 되돌리기 토스트(B8) */
.toast.act { pointer-events: auto; }
.toast .toast-btn { margin-left: 10px; border: 1px solid rgba(255,255,255,.55); background: transparent; color: inherit; border-radius: 6px; padding: 2px 9px; font: inherit; font-size: var(--t-cap); font-weight: 600; cursor: pointer; white-space: nowrap; }
.toast .toast-btn:hover { background: rgba(255,255,255,.14); }

/* ═══════════════════ 개정 누적(B6) — 판 계보 칩 · 신판 있는 구판 · 자리 바뀜 ═══════════════════ */
.ctx-chip.ctx-rev { cursor: pointer; border-color: var(--blue-600); } .ctx-chip.ctx-rev b { color: var(--blue-800); }
.ctx-chip.ctx-rev.next { border-color: var(--warning); } .ctx-chip.ctx-rev.next b { color: var(--warning); }
.rail-item.superseded { opacity: .6; } .rail-item.superseded .dno::after { content: ' 구판'; color: var(--ink-4); font-weight: 400; font-size: var(--t-micro); }
.chk-page.warn { color: var(--error); }

/* ── 원본 쪽 보기 팝업(모든 자료) ─────────────────────────────────────────── */
.src-pop { position: fixed; inset: 0; z-index: 70; background: rgba(15, 23, 42, .5); display: flex; align-items: center; justify-content: center; padding: 16px; }
.src-pop[hidden] { display: none; }
.src-pop-in { width: min(1120px, 96vw); height: 92vh; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 64px rgba(0, 0, 0, .35); }
.src-pop-in .gpane-bar { flex: 0 0 auto; }
.src-pop-in .sp-title { font-family: var(--font-display); font-size: var(--t-small); }
.src-pop-in .sp-hint { max-width: 36%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-pop-in .sp-body { flex: 1; min-height: 0; overflow: auto; padding: 10px; background: var(--surface-2); }
.src-pop-in .sp-body img { width: calc(100% * var(--z, 1)); max-width: none; display: block; margin: 0 auto; border: 1px solid var(--line); background: #fff; }
.src-pop-in .sp-body.grabbing { cursor: grabbing; }
/* 그림 메타(비전 모델 서술) — 그림 카드 아래 한 줄 */
.fig-meta { font-size: var(--t-micro); color: var(--ink-2); line-height: 1.5; padding: 4px 0 2px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.fig-meta[hidden] { display: none; }
.fig-meta b { color: var(--ink); font-weight: 600; }
/* 펜 · 터치 마크업(C2) — 손가락은 마크업 모드에서만 그린다. 그 밖엔 브라우저가 화면을 끈다 */
#overlayCanvas { touch-action: pan-x pan-y pinch-zoom; }
.markup-on #overlayCanvas, .region-on #overlayCanvas { touch-action: none; }
.list-answer { margin: 0 10px 6px; }
.list-answer[hidden] { display: none; }

/* 지식 그래프 「이어진 자료」 칩 */
.kg-slot[hidden] { display: none; }
.kg-slot { margin-top: 8px; }
.kg-row { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; margin: 4px 0; }
.kg-row .kg-t { font-size: var(--t-micro); color: var(--ink-2); min-width: 64px; }
.ol-table tbody tr.row.hl { background: var(--tint-warning); box-shadow: inset 0 0 0 1px var(--line); }
#askBody .note { white-space: pre-line; }   /* 여러 줄 요약(교환 파일 반영 등) */

/* 이어 보기(스티칭) */
.stitch .src-pop-in { width: min(1400px, 98vw); height: 94vh; }
.st-bar { flex-wrap: wrap; row-gap: 4px; }
.st-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.st-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--t-micro); background: var(--surface-2); }
.st-chip button { border: 0; background: none; cursor: pointer; color: var(--ink-2); padding: 0 2px; }
.st-bar #stAdd { height: 26px; max-width: 280px; font-size: var(--t-micro); }
.st-bar [data-st].on { background: var(--tint-blue); }
.st-note { padding: 4px 10px; border-bottom: 1px solid var(--line); }
.st-body { position: relative; background: var(--surface-2); cursor: grab; touch-action: none; }
.st-body.grabbing { cursor: grabbing; }
.st-stage { position: relative; transform-origin: 0 0; }
.st-tile { position: absolute; box-shadow: 0 0 0 1px var(--line); background: #fff; }
.st-tile canvas { display: block; width: 100%; height: 100%; }
.st-tile .st-lab { position: absolute; left: calc(6px / var(--stz, 1)); top: calc(6px / var(--stz, 1)); font-size: calc(12px / var(--stz, 1)); padding: calc(1px / var(--stz, 1)) calc(6px / var(--stz, 1)); border-radius: calc(4px / var(--stz, 1)); background: rgba(15, 23, 42, .72); color: #fff; pointer-events: none; }
.stitch.aligning .st-tile { cursor: move; box-shadow: 0 0 0 2px var(--accent, #2563eb); }
.stitch.st-busy .st-tile, .stitch.st-busy.marking #stStage { cursor: progress; }   /* 자동 맞추는 동안 — 끌기 · 마크는 쉬어 간다 */
@media (max-width: 640px) {   /* 휴대폰 — 팝업은 화면을 다 쓰고, 도구 줄은 감싸며, 제목은 맨 윗줄 한 줄로 */
  .src-pop { padding: 0; }
  .src-pop-in, .stitch .src-pop-in { width: 100vw; height: 100dvh; border-radius: 0; }
  .src-pop-in .gpane-bar { flex-wrap: wrap; row-gap: 6px; }
  .src-pop-in .sp-title, .st-bar > b { flex: 1 0 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .src-pop-in .sp-hint, .src-pop-in .gpane-bar .spacer { display: none; }
  .st-bar .st-chips { flex: 1 0 100%; }
  .st-bar #stAdd { max-width: none; flex: 1 1 100%; }
}

/* 현장 사진(의견 입력 창) */
.mp-photos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.mp-photo-list { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mp-photo { position: relative; display: inline-block; }
.mp-photo img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); display: block; }
.mp-photo button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); cursor: pointer; line-height: 1; font-size: 12px; }

/* 공동 검토(B3) */
.cl-btn { display: inline-flex; align-items: center; gap: 6px; }
.cl-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: 0 0 auto; }
.cl-dot.in { background: var(--ink-2); }
.cl-dot.live { background: #16a34a; }
.cl-dot.wait { background: #f59e0b; }
.cl-n { font-size: var(--t-micro); padding: 0 5px; border-radius: 999px; background: var(--tint-blue); }
.cl-avs { display: inline-flex; margin-right: 4px; }
.cl-av { width: 22px; height: 22px; border-radius: 50%; background: var(--tint-blue); border: 2px solid var(--surface); margin-left: -6px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.collab .cl-in { width: min(960px, 96vw); height: auto; max-height: 92vh; }
.cl-body { overflow: auto; padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.cl-me { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cl-me .chk-page.warn { color: var(--warning); font-weight: 600; }   /* 오늘 AI 사용료가 상한의 80% 넘음 */
.cl-me button { margin-left: auto; }
.cl-sec { border: 1px solid var(--line); border-radius: var(--r-panel); padding: 10px 12px; background: var(--surface); }
.cl-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.cl-row .spacer { flex: 1; }
.cl-row .field { height: 28px; }
.cl-row input[type=search], .cl-row input[type=text] { flex: 1 1 220px; min-width: 0; }
.cl-tbl { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.cl-tbl th, .cl-tbl td { padding: 4px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.cl-tbl .c { text-align: center; }
.cl-act { max-height: 180px; overflow: auto; font-size: var(--t-small); display: flex; flex-direction: column; gap: 2px; }
/* 새 소식(2026-10-11) — 안 읽은 줄은 옅은 바탕, 내 의견에 닿은 줄은 굵게 */
.cl-act .new { background: var(--review-bg, #eef3ff); border-radius: 4px; padding: 1px 4px; }
.cl-act .me { font-weight: 600; }
.cl-n.new { background: var(--accent, #1B41B9); color: #fff; }
.cl-n.new.me { background: #B23A2B; }
.cl-notify { margin-left: auto; font-weight: 400; display: inline-flex; align-items: center; gap: 4px; }
.cl-list { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow: auto; }
.cl-item { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.cl-inv-in { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 0; }
.cl-inv-in input { flex: 1 1 320px; min-width: 0; height: 28px; font-size: var(--t-micro); }
.note.warn { color: #b45309; }
@media (max-width: 640px) { .cl-tbl th:nth-child(5), .cl-tbl td:nth-child(5) { display: none; } .cl-avs { display: none; } }

/* ── 좁은 화면 보정(2026-10-10, 검토 U5 · FINDING-013) — 앞쪽 860px 블록보다 뒤에 있어야 아래 기본 규칙(.proj-new 300px 등)을 이긴다 ── */
@media (max-width: 860px) {
  /* 프로젝트 화면 — 소개 글이 한 글자씩 세로로 꺾였다(375px 실측 787px 너비, 검토 U5) */
  .proj-head { flex-direction: column; gap: 12px; }
  .proj-new { flex-wrap: wrap; width: 100%; flex-shrink: 1; }
  .proj-new .field { width: 100%; flex: 1 1 100%; }
  .proj-stats { flex-wrap: wrap; }
  /* 자료 현황표 — 375px 에서 10px 표가 화면 밖으로 밀렸다. 행마다 카드로 쌓고 칸 이름을 앞에(검토 FINDING-013) */
  .reg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* 눈에서만 숨긴다 — 화면 읽기는 머리글을 그대로(표는 role 로 의미 유지) */
  .reg-table, .reg-table tbody, .reg-table tr, .reg-table td { display: block; width: 100% !important; }
  .reg-table tr { border: 1px solid var(--line); border-radius: var(--r-card); margin-bottom: 10px; padding: 8px 12px; background: var(--surface); }
  .reg-table td { border: 0 !important; padding: 3px 0 !important; }
  .reg-table td:nth-child(4)::before { content: '지금 있는 것 · '; color: var(--ink-4); }
  .reg-table td:nth-child(5)::before { content: '접수 · 색인되면 · '; color: var(--ink-4); }
  .reg-table td:nth-child(6)::before { content: '필요한 것 · '; color: var(--ink-4); }
}

/* 인라인 style 을 클래스로(검토 P2) — 토큰 밖 11 · 12px 와 26px 높이를 글자 바닥 · 30px 로 */
.field.compact { height: 32px; font-size: var(--t-cap); }
.field.rail-sel { height: 30px; font-size: var(--t-cap); }   /* 레일의 도면 찾기 칸(#railSearch) */
.field.intake-search { width: 230px; padding-left: 29px; }

/* 접근성(검토 P2) — 본문 건너뛰기 링크는 초점을 받을 때만 보인다 · main 은 상자를 만들지 않는 랜드마크 */
.main-wrap { display: contents; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 1000; padding: 8px 14px; border-radius: var(--r-ctl); background: var(--blue-800); color: var(--surface);
  font-weight: 650; text-decoration: none; transition: top var(--d-fast) var(--ease); }
.skip-link:focus { top: 12px; outline: 2px solid var(--blue-600); outline-offset: 2px; }

/* 의견 창 — 마크 안 글자를 읽는 동안의 자리 표시(검토 P2: 마크 → 창 5.1초 무응답) */
.mp-skel { display: grid; gap: 6px; padding: 8px 0; }
.mp-skel i { display: block; height: 10px; border-radius: 4px; background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: mp-skel 1.2s ease-in-out infinite; }
.mp-skel i:nth-child(3) { width: 82%; } .mp-skel i:nth-child(4) { width: 58%; }
@keyframes mp-skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .mp-skel i { animation: none; } }
#markupPop[aria-busy="true"] .field:disabled { background: var(--surface-2); cursor: progress; }
.nh-chip svg, .nh-btn svg { width: 11px; height: 11px; flex: none; vertical-align: -1px; }   /* 고정 표시 — 이모지(📌) 대신 아이콘 */
.nh-btn { display: inline-flex; align-items: center; gap: 3px; }

/* 도면 겹쳐 보기 — 기준 빨강 · 대상 파랑(그림 색과 같은 값), 둘 다 같은 자리면 검정 */
:root { --ov-base: #e11d48; --ov-other: #2563eb; }
.overlay .src-pop-in { width: min(1480px, 98vw); height: 94vh; }
.ov-bar { flex-wrap: wrap; row-gap: 4px; }
.ov-pair { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; }
.ov-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 420px; padding: 2px 4px 2px 8px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--surface-2); font-size: var(--t-cap); }
.ov-chip #ovBaseName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 4px; }
.ov-chip select { height: 30px; max-width: 340px; font-size: var(--t-cap); border: 0; background-color: transparent; color: var(--ink); }
.ov-role { color: var(--ink-3); font-size: var(--t-micro); font-weight: 650; }
.ov-sw { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.ov-sw.base { background: var(--ov-base); } .ov-sw.other { background: var(--ov-other); }
.ov-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--surface); }
.ov-seg { display: inline-flex; }
.ov-seg .btn { border-radius: 0; margin-left: -1px; }
.ov-seg .btn:first-child { border-radius: var(--r-ctl) 0 0 var(--r-ctl); margin-left: 0; }
.ov-seg .btn:last-child { border-radius: 0 var(--r-ctl) var(--r-ctl) 0; }
.ov-tools [aria-pressed="true"] { background: var(--tint-blue); color: var(--blue-800); border-color: var(--blue-600); position: relative; }
.ov-op { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-cap); color: var(--ink-2); }
.ov-op input { width: 110px; accent-color: var(--ov-other); }
.ov-sep { width: 1px; height: 20px; background: var(--line); }
.ov-tools .spacer { flex: 1; }
.ov-note { padding: 5px 10px; border-bottom: 1px solid var(--line); font-size: var(--t-cap); color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.ov-note .ov-key { display: inline-flex; align-items: center; gap: 5px; }
.ov-note .ov-key i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.ov-note .ov-key i.ink { background: var(--ink); }
.ov-note .ov-st { color: var(--ink); }
.ov-note .ov-st.mid { color: var(--warning); } .ov-note .ov-st.low { color: var(--error); }
.ov-body { position: relative; background: var(--surface-2); cursor: grab; touch-action: none; overscroll-behavior: contain; }
.ov-body.grabbing { cursor: grabbing; }
.overlay.nudging .ov-body { cursor: move; }
.overlay.picking .ov-body, .overlay.marking .ov-body { cursor: crosshair; }
.overlay.curtaining .ov-body { cursor: ew-resize; }
.ov-stage { position: relative; transform-origin: 0 0; box-shadow: 0 0 0 1px var(--line); background: #fff; }
.ov-stage canvas { display: block; }
.ov-stage #ovMarks { position: absolute; inset: 0; pointer-events: none; }
.ov-busy .ov-tools [data-ov="auto"] { opacity: .55; cursor: progress; }
@media (max-width: 640px) {   /* 휴대폰 — 제목 줄에 저장 · 닫기, 그 아래 기준 · 대상 두 줄과 옆의 맞바꾸기 */
  .overlay .src-pop-in { width: 100vw; height: 100dvh; border-radius: 0; }
  .ov-bar > b { flex: 1 1 auto; order: 0; }
  .ov-bar [data-ov="save"], .ov-bar [data-ov="close"] { order: 1; }
  .ov-bar .spacer { display: none; }
  .ov-pair { order: 2; flex: 1 0 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
  .ov-pair > .ov-chip:first-child { grid-column: 1; grid-row: 1; }
  .ov-pair > [data-ov="swap"] { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; height: auto; }
  .ov-pair > .ov-chip:last-child { grid-column: 1; grid-row: 2; }
  .ov-chip { max-width: none; }
  .ov-chip select { flex: 1; max-width: none; min-width: 0; }
  .ov-op input { width: 84px; }
  .ov-sep { display: none; }
}

/* 이어 보기 2단계 — 켜진 도구 · 구름마크 그리기 */
.st-bar [aria-pressed="true"] { background: var(--tint-blue); color: var(--blue-800); border-color: var(--blue-600); }
.stitch.marking .st-body { cursor: crosshair; }
.st-draft { position: absolute; border: calc(2px / var(--stz, 1)) solid #B23A2B; background: rgba(178, 58, 43, .06); pointer-events: none; z-index: 2; }

/* ── 내 틀(도구함, 2026-10-10) — 의견 창의 고르개(관리 칸은 2026-10-26 뺐다) ── */
.mp-tpl #mpMyTools { flex: 0 1 120px; }

/* ── 휴대폰 배치(640px 이하, 2026-10-10) — 탐색 레일 = 왼쪽 서랍, 판정 패널 = 아래 시트(손잡이 52px), 도면이 가운데를 다 쓴다 ──
   앞쪽 860px 블록(세로로 쌓기)보다 뒤에 둬야 이긴다. 데스크톱에서는 손잡이 · 닫기 · 가림막이 보이지 않는다. */
.vw-handle, .rail-close, .rail-scrim, .ph-only { display: none; }
@media (max-width: 640px) {
  body { padding-bottom: 52px; }                                   /* 아래 시트 손잡이 자리 */
  .cockpit-main { display: block; }
  .nav-rail { position: sticky; top: 0; z-index: 30; width: 100%; flex-direction: row; gap: 2px; padding: 4px 6px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .nr-btn { flex: 1 0 52px; padding: 6px 2px 5px; }
  .nr-n { right: calc(50% - 22px); }
  .sheet-rail {
    position: fixed; z-index: 70; top: 0; bottom: 0; left: 0; width: min(88vw, 360px) !important; max-height: none; min-width: 0;
    border-right: 1px solid var(--line); border-bottom: 0; box-shadow: var(--sh-3);
    transform: translateX(-102%); visibility: hidden; transition: transform var(--d-verify) var(--ease), visibility 0s linear var(--d-verify);
  }
  body.rail-open .sheet-rail { transform: none; visibility: visible; transition: transform var(--d-verify) var(--ease); }
  .rail-scrim { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(26, 29, 36, .42); }
  .rail-scrim[hidden] { display: none; }
  .ph-only { display: inline-flex; }
  .rail-title { gap: 8px; }
  .rail-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -6px -8px -6px 0; border: 0; border-radius: var(--r-ctl); background: none; color: var(--ink-3); cursor: pointer; }
  .rail-close:hover { background: var(--surface-2); color: var(--ink); }
  .rail-close svg { width: 16px; height: 16px; }
  .viewer-col { min-height: calc(100dvh - 96px); }
  /* 도면 도구는 세로 덩어리 대신 얇은 가로 줄 — 도면이 그만큼 위로 온다 */
  .tooldock { width: 100%; flex-direction: row; align-items: center; gap: 6px; padding: 4px 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .tooldock .td-btn { flex-direction: row; gap: 5px; width: auto; height: 34px; padding: 0 10px; }
  .viewer-pane { padding: 8px; }
  #verdictWrap {                                                   /* 새 창 패널(#popWrap)도 .verdict-wrap 이라 id 로 좁힌다(PR #108 검토) */
    position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; width: auto !important; min-width: 0; height: min(82dvh, 760px);
    border-left: 0; border-top: 1px solid var(--line); border-radius: var(--r-panel) var(--r-panel) 0 0; box-shadow: var(--sh-3);
    transform: translateY(calc(100% - 52px)); transition: transform var(--d-verify) var(--ease);
  }
  body.sheet-open #verdictWrap { transform: none; }
  .vw-handle {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0; width: 100%; height: 52px; padding: 0 16px;
    border: 0; border-bottom: 1px solid var(--line); border-radius: var(--r-panel) var(--r-panel) 0 0; background: var(--surface);
    font: inherit; font-size: var(--t-sm); font-weight: 650; color: var(--ink); cursor: pointer; position: relative;
  }
  .vw-handle i { position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 999px; background: var(--line-strong); }
  .vw-handle .vw-chev { margin-left: auto; display: inline-flex; color: var(--ink-3); transform: rotate(-90deg); transition: transform var(--d-verify) var(--ease); }
  .vw-handle .vw-chev svg { width: 16px; height: 16px; }
  body.sheet-open .vw-handle .vw-chev { transform: rotate(90deg); }
  /* 아래 시트 손잡이 위로 — 알림과 의견 위젯 단추가 손잡이를 가리지 않게(위젯은 스스로 bottom:12px 을 넣으므로 id 를 더한 선택자로 이긴다) */
  .toast-dock { bottom: 64px; }
  html body #fbw-root { bottom: 64px; }
  /* 마크 모양 고르개 — 뷰어 맨 아래는 화면 밖이라 손잡이 바로 위에 고정한다(열린 시트가 덮는다). 그동안 의견 위젯은 그 위로 */
  .viewer-hint { position: fixed; bottom: 60px; z-index: 50; }
  html body.markup-on #fbw-root { bottom: 140px; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .sheet-rail, body.rail-open .sheet-rail, #verdictWrap, .vw-handle .vw-chev { transition: none !important; }
}

/* ── B7 번호만 있는 기호 — 대상 후보 고르개(연결 정정 메뉴와 같은 틀) · 패널 카드 ── */
.fix-menu.co-pick { width: min(360px, calc(100vw - 16px)); gap: 2px; }
.co-pick .cp-row { display: flex; align-items: stretch; gap: 4px; }
.co-pick .cp-go { flex: 1; min-width: 0; display: grid; gap: 1px; }
.co-pick .cp-go b { font-weight: 600; font-size: var(--t-cap); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-pick .cp-no { flex: none; color: var(--ink-3); font-size: var(--t-micro) !important; }
.co-pick .cp-no:hover { background: var(--tint-error) !important; color: var(--error); }
.co-pick p { margin: 4px 6px 2px; }
.co-pick button:focus-visible { outline: 2px solid var(--blue-600); outline-offset: -2px; }
.link-card.co-card.pick { border-style: dashed; border-color: var(--warning); background: var(--tint-warning); }
.link-card.co-card.pick .lc-no { color: var(--warning); }

/* ── AI 도구 연결(MCP 원격, 2026-10-10) — 공동 검토 창의 제안 목록 · 한 번만 보이는 연결 키 ── */
.cl-props { list-style: none; margin: 4px 0 6px; padding: 0; display: grid; gap: 2px; }
.cl-props li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 30px; padding: 2px 0; border-bottom: 1px solid var(--line); font-size: var(--t-cap); }
.cl-props li b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.cl-props li .btn { margin-left: auto; }
.cl-key-once { margin: 6px 0; padding: 8px 10px; border: 1px solid var(--blue-600); border-radius: var(--r-card); background: var(--tint-blue); }
.cl-key-once input { font-family: var(--font-mono); }
.cl-n.ai { background: var(--tint-warning); color: var(--warning); font-weight: 650; }   /* 대기 중인 AI 제안 = 확인 필요(황토) */

/* ── 도면 고르기(겹쳐 보기 · 이어 보기 · 나란히 · 연결 추가가 함께 쓴다) ─────────────
   한 줄에 도번(고정폭) · 도면명 · 쪽. 지금 열린 도면은 맨 위에 점으로, 이미 고른 도면은 체크로.
   층: 겹쳐 보기 · 이어 보기 창(70) · 의견 팝업(80) · 대화상자(90) · 모달(100) 위, 크게 보기(110) · 알림(120) 아래 */
.pk-trigger { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; text-align: left; cursor: pointer; }
.pk-trigger:hover { border-color: var(--ink-4); }
.pk-trigger svg { flex: none; width: 14px; height: 14px; color: var(--ink-3); transform: rotate(90deg); }
.pk-trigger.bp-find svg { transform: none; }   /* 찾기 돋보기는 돌리지 않는다(위 규칙이 뒤라 겹 선택자로) */
.pk-trig-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ovOther.pk-trigger { height: 26px; font-size: var(--t-cap); max-width: 340px; }
.compare-bar #compareBtn { flex: 1; min-width: 120px; height: 28px; }
.pk-pop {
  position: fixed; z-index: 105; display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card); box-shadow: var(--sh-3);
  font-size: var(--t-sm); color: var(--ink); overflow: hidden;
}
.pk-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; }
.pk-title { font-size: var(--t-sm); font-weight: 650; }
.pk-count { color: var(--ink-3); font-size: var(--t-cap); font-variant-numeric: tabular-nums; }
.pk-x { margin-left: auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-ctl); color: var(--ink-3); }
.pk-x:hover { background: var(--surface-2); color: var(--ink); }
.pk-x svg { width: 14px; height: 14px; }
.pk-q { margin: 0 12px 8px; width: auto; flex: none; }
.pk-list { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 0 4px 6px; border-top: 1px solid var(--line); }
.pk-group { position: sticky; top: 0; z-index: 1; padding: 8px 8px 4px; background: var(--surface); color: var(--ink-3); font-size: var(--t-cap); font-weight: 600; }
.pk-opt {
  display: grid; grid-template-columns: 16px minmax(64px, max-content) minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline;
  padding: 6px 8px; border-radius: var(--r-ctl); cursor: pointer;
}
.pk-opt.act { background: var(--tint-blue); }
.pk-opt.cur { cursor: default; background: var(--surface-2); }
.pk-opt.dis { cursor: default; }
.pk-opt.dis .pk-name, .pk-opt.dis .pk-no { color: var(--ink-3); font-weight: 400; }
.pk-opt.dis .pk-mark { color: var(--verified); }
.pk-head .pk-clear { margin-left: auto; height: 26px; }
.pk-head .pk-clear:not([hidden]) + .pk-x { margin-left: 0; }
.pk-mark { align-self: center; display: grid; place-items: center; width: 16px; height: 16px; color: var(--blue-800); }
.pk-mark svg { width: 13px; height: 13px; }
.pk-dot { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-600); box-shadow: 0 0 0 3px var(--tint-blue); }
.pk-no { font-family: var(--font-mono); font-size: var(--t-cap); font-weight: 600; color: var(--blue-800); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pk-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.pk-opt.chosen .pk-name { font-weight: 600; }
.pk-pg { color: var(--ink-3); font-size: var(--t-cap); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-why { grid-column: 3 / -1; color: var(--ink-3); font-size: var(--t-cap); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-empty { padding: 18px 12px; color: var(--ink-3); line-height: 1.6; }
.pk-foot:empty { display: none; }
.pk-foot { padding: 6px 12px 10px; border-top: 1px solid var(--line); }
.pk-foot .btn { width: 100%; justify-content: center; }
/* 휴대폰 — 아래에서 올라오는 판. 손가락 높이(44px)로 줄을 키운다 */
.pk-pop.pk-sheet { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: min(78vh, 620px); border-radius: var(--r-panel) var(--r-panel) 0 0; padding-bottom: env(safe-area-inset-bottom); }
.pk-sheet .pk-opt { min-height: 44px; align-items: center; }
.pk-sheet .pk-q { height: 40px; font-size: 16px; }
.paste-q { width: 100%; }
.paste-n { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .pk-pop { animation: pk-in var(--d-base) var(--ease); }
  .pk-pop.pk-sheet { animation: pk-up var(--d-verify) var(--ease); }
  @keyframes pk-in { from { opacity: 0; transform: translateY(-4px); } }
  @keyframes pk-up { from { transform: translateY(24px); opacity: .6; } }
}

/* ── 나란히 보기(2026-10-10, 대표 지적 4) — 두 창의 위 끝을 맞춘다 ─────────────────────────
   전에는 오른쪽 창만 자기 도구줄(두 줄 79px)을 도면 위에 두어 두 도면이 71px 어긋났다. 이제 양쪽 모두 같은 높이(44px)의
   머리줄 — 왼쪽은 지금 도면, 오른쪽은 고르개 · 차분 · 동기화 — 이고 여백도 같다. 오른쪽 배율은 도면 위 오른쪽 아래에 띄운다. */
.main-pane { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; }   /* 도면 넘기기 화살표 · 안내 띠의 기준 — 도구 기둥(이미지 · AI 가 늘어난 10-12) 위에 겹치지 않게 */
.main-pane > .viewer-pane { flex: 1; min-height: 0; }
.pane-head { flex: none; min-height: 44px; min-width: 0; align-items: center; gap: 8px; box-sizing: border-box; }
/* 왼쪽 머리줄 높이 = 오른쪽 도구줄 높이(--ph-h, 오른쪽이 좁아 두 줄로 접히면 왼쪽도 같이) — 두 도면의 위 끝이 늘 같은 줄 */
.main-pane > .pane-head { display: none; height: var(--ph-h, 44px); padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--surface); }
.viewer-split.cmp .main-pane > .pane-head { display: flex; }
.ph-role { flex: none; font-size: var(--t-cap); font-weight: 600; color: var(--ink-3); }
.ph-id { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-sm); color: var(--ink); }
.ph-id .ph-no { font-family: var(--font-mono); font-size: var(--t-cap); font-weight: 600; color: var(--blue-800); margin-right: 6px; }
.compare-pane { position: relative; }
.compare-bar #compareBtn { flex: 1 1 140px; min-width: 0; }
.compare-pane { container-type: inline-size; container-name: cmp; }
@container cmp (max-width: 380px) { .compare-bar .ph-role { display: none; } }
.compare-bar .btn { flex: none; }
.cmp-zoom { position: absolute; right: 12px; bottom: 12px; z-index: 3; height: 30px; background: var(--surface); box-shadow: var(--sh-2); }
.cmp-zoom #cmpZoomLabel { min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }
.compare-pane:not(:has(#compareStack:not([hidden]))) .cmp-zoom { display: none; }
.viewer-empty > p { margin: 0; }
/* 표준상세 나란히 비교 — 두 그림 위의 제목을 한 줄로: 제목이 두 줄이 되는 쪽만 그림이 내려가 어긋났다 */
.das-pt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.das-pt:focus-visible, .das-pt.open { white-space: normal; overflow-wrap: anywhere; outline: 2px solid var(--blue-600); outline-offset: -2px; }   /* 키보드 · 손가락으로도 전체 제목 */
.das-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .das-p { min-width: 0; }

/* ── 겹쳐 보기 의견 자리 메뉴(2026-10-10, 대표 지적 2) — 겹친 화면의 의견을 누르면: 원본에서 보기 · 의견 고치기 ── */
.ov-mark-menu { position: fixed; z-index: 6; min-width: 200px; max-width: 228px; padding: 6px; display: grid; gap: 2px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card); box-shadow: var(--sh-3); font-size: var(--t-sm); }
.ov-mark-menu .omm-t { padding: 4px 8px 6px; color: var(--ink-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.ov-mark-menu button { text-align: left; padding: 7px 8px; border-radius: var(--r-ctl); color: var(--ink); }
.ov-mark-menu button:hover, .ov-mark-menu button:focus-visible { background: var(--tint-blue); outline: none; }
#btnOverlay .tab-n { margin-left: 2px; }
#ovBody:focus { outline: none; }
#ovBody:focus-visible { outline: 2px solid var(--blue-600); outline-offset: -2px; }

/* ── 도면 정체성 한 줄(2026-10-10, 대표 지적 6) — 표제란 상태 · 번호 · 이름(입력칸이 곧 글) · 분류 · 이동 기록 ─────────
   전에는 표제란 줄 · 분류 줄 · 이동 기록 줄 · 패널 제목 카드가 같은 정체성을 네 번 보였다. 번호 · 이름은 글처럼 보이다가 누르면 고친다. */
.id-line { gap: 4px 8px; padding: 5px 12px; min-height: 38px; font-size: var(--t-sm); }
.id-line .id-state .state { font-size: var(--t-micro); padding: 1px 7px; }
.id-in { height: 28px; padding: 0 6px; border: 1px solid transparent; border-radius: var(--r-ctl); background: transparent; color: var(--ink);
  min-width: 4ch; max-width: 100%; field-sizing: content; transition: border-color var(--d-fast) var(--ease), background var(--d-fast) var(--ease); }
.id-in:hover { border-color: var(--line-strong); background: var(--surface); }
.id-in:focus { outline: none; border-color: var(--blue-600); background: var(--surface); box-shadow: 0 0 0 3px rgba(54, 97, 234, .13); }
.id-in::placeholder { color: var(--warning); opacity: 1; }
.id-no { font-family: var(--font-mono); font-size: var(--t-sm); font-weight: 600; color: var(--blue-800); }
.id-name { font-size: var(--t-body); font-weight: 600; }
.id-sep { color: var(--ink-4); margin: 0 -4px; }
.id-cls { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; color: var(--ink-2); font-size: var(--t-cap); }
.id-cls[hidden] { display: none; }
.id-cls .ctx-facets { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
.id-c { color: var(--ink-2); white-space: nowrap; }
.id-c + .id-c::before, .id-c + .ctx-facets::before, .ctx-facets + .id-c::before { content: '·'; color: var(--ink-4); margin-right: 6px; }
.id-c.unc { color: var(--warning); font-weight: 600; }
.id-dens { color: var(--ink-3); }
.id-line .nav-hist { margin-left: auto; padding: 0; border: 0; min-height: 0; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.nh-here { color: var(--ink-3); font-size: var(--t-micro); padding: 0 2px; }
.vc-warn { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-card); background: var(--tint-warning); color: var(--ink); font-size: var(--t-sm); line-height: 1.6; }
/* 새 창 패널 머리 — 번호 · 이름 · 표제란 상태(본창 정체성 줄이 다른 모니터에 있을 때) */
.pop-id { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--surface); font-size: var(--t-sm); min-width: 0; }
.pop-id:empty { display: none; }
.pop-id .state { font-size: var(--t-micro); }
.pop-id-no { font-family: var(--font-mono); color: var(--blue-800); }
.pop-id-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
@media (hover: none) { .id-in { border-bottom: 1px dashed var(--line-strong); border-radius: 0; } }   /* 손가락 화면 — 고칠 수 있는 칸임을 밑줄로 */

/* ── 기본 / 자세히(2026-10-10, 대표 지적 5) ─────────────────────────────────────────────
   기본: 쓰는 데 필요한 것만(검토의견 · 판정 · 연결 도면 · 근거). 자세히: 안내 · 처리 이력 · 연결 까닭 · 구조화 · 원본 참조 · 옛 21종 거르개. */
body:not(.detail-on) .dt-only { display: none !important; }
body.detail-on .bs-only { display: none !important; }
/* 자료 갈래 여섯 줄은 기본 화면에서 「근거」를 눌렀을 때만(대표 지적 10-10 「화면이 복잡함」) — 판정 · 설계 검증 중에는 한 줄 */
body:not(.detail-on) .verdict-wrap:not(.partner-on) .pt-bar { display: none; }
/* 레일 거르개(거르기 띠 · 걸린 칩 · 고르기 상자)는 2026-10-26 뺐다 */

/* ── 지식 그래프 보기(2026-10-10) — 「이어진 자료」를 그래프로. 종류 색은 캔버스와 범례가 함께 쓴다 ── */
:root { --kg-item: #B23A2B; --kg-da: #1B41B9; --kg-fig: #2A7351; --kg-part: #9A6A16; --kg-mat: #6D5BD0; }
.kg-graph-btn { margin-left: 6px; }
.kgv-in { width: min(1320px, 97vw); height: 92vh; }
.kgv-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.kgv-title { font-family: var(--font-display); font-size: var(--t-sm); white-space: nowrap; }
.kgv-trail { display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1 1 240px; overflow: hidden; }
.kgv-trail button { border: 0; background: none; font: inherit; font-size: var(--t-cap); color: var(--ink-3); padding: 3px 6px; border-radius: var(--r-ctl); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.kgv-trail button:hover { background: var(--surface-2); color: var(--ink); }
.kgv-trail button[aria-current="true"] { color: var(--ink); font-weight: 650; }
.kgv-trail .kgv-sep { color: var(--ink-4); font-size: var(--t-cap); }
.kgv-trail .kgv-back { color: var(--blue-800); }
.kgv-find { position: relative; width: min(280px, 100%); }
.kgv-find .field { width: 100%; height: 32px; }
.kgv-sug { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 3; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 8px 24px rgba(26, 29, 36, .14); max-height: 320px; overflow: auto; padding: 4px; }
.kgv-sug[hidden] { display: none; }
.kgv-sug [role="option"] { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: var(--t-cap); cursor: pointer; }
.kgv-sug [role="option"].act, .kgv-sug [role="option"]:hover { background: var(--tint-blue); }
.kgv-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.kgv-stage { position: relative; min-width: 0; min-height: 0; background: var(--surface-2); overflow: hidden; }
.kgv-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.kgv-stage canvas.on-node { cursor: pointer; }
.kgv-stage canvas.panning { cursor: grabbing; }
.kgv-legend { position: absolute; left: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 150px); }
.kgv-legend button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 3px 9px; font: inherit; font-size: var(--t-micro); color: var(--ink-2); cursor: pointer; }
.kgv-legend button[aria-pressed="false"] { color: var(--ink-4); background: var(--surface-2); }
.kgv-legend button[aria-pressed="false"] .kgv-dot { opacity: .3; }
.kgv-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.kgv-dot.hub { background: var(--surface); border: 2px solid var(--c); width: 7px; height: 7px; }
.kgv-dot.t-item { border-radius: 2px; }                                   /* 체크리스트 = 네모 · 그림 = 마름모 · 표준상세 = 원 — 색만으로 가르지 않는다(캔버스와 같다) */
.kgv-dot.t-fig { border-radius: 1px; transform: rotate(45deg) scale(.86); }
.kgv-name:focus { outline: none; }
.kgv-name:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; border-radius: 4px; }
.is-popout [data-kg-graph] { display: none; }                               /* 새 창 패널에는 그래프 창이 없다 — 누를 수 없는 단추를 보이지 않는다 */
.kgv-zoom { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 4px; }
.kgv-tip { position: absolute; pointer-events: none; z-index: 2; max-width: 280px; background: var(--ink); color: var(--paper); font-size: var(--t-cap); line-height: 1.45; padding: 6px 8px; border-radius: 8px; }
.kgv-tip[hidden] { display: none; }
.kgv-side { border-left: 1px solid var(--line); overflow: auto; padding: 14px; background: var(--surface); }
.kgv-kind { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-micro); color: var(--ink-3); }
.kgv-name { font-size: var(--t-sm); font-weight: 650; line-height: 1.45; margin: 6px 0 8px; word-break: keep-all; overflow-wrap: anywhere; }
.kgv-facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: var(--t-cap); margin: 0 0 10px; }
.kgv-facts dt { color: var(--ink-3); }
.kgv-facts dd { margin: 0; color: var(--ink-2); }
.kgv-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.kgv-grp { font-size: var(--t-micro); color: var(--ink-3); margin: 12px 0 4px; display: flex; align-items: center; gap: 6px; }
.kgv-nb button { display: flex; align-items: baseline; gap: 6px; width: 100%; text-align: left; border: 0; background: none; font: inherit; font-size: var(--t-cap); color: var(--ink); padding: 5px 6px; border-radius: 8px; cursor: pointer; }
.kgv-nb button:hover, .kgv-nb button:focus-visible { background: var(--tint-blue); }
.kgv-nb button .kgv-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kgv-nb button .kgv-why { color: var(--ink-4); font-size: var(--t-micro); white-space: nowrap; }
.kgv-note { font-size: var(--t-cap); color: var(--ink-3); line-height: 1.6; margin: 8px 0 0; }
@media (max-width: 760px) {
  .kgv-in { width: 100vw; height: 100dvh; border-radius: 0; }
  .src-pop.kgv { padding: 0; }
  .kgv-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 58%) minmax(0, 42%); }
  .kgv-side { border-left: 0; border-top: 1px solid var(--line); }
  .kgv-find { width: 100%; order: 5; }
  .kgv-legend { max-width: calc(100% - 20px); bottom: 48px; }
}

/* ── AI 체크사항 카드 — 기본은 결과만(2026-10-10 대표 지적: 화면이 너무 복잡하다), 글자 크기 단추 ── */
.ai-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-sum { font-weight: 500; color: var(--ink-3); font-size: var(--t-cap); }
.ai-head-act { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.ai-font { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-ctl); overflow: hidden; background: var(--surface); }
.ai-font button { border: 0; background: none; font: inherit; font-size: var(--t-cap); font-weight: 650; color: var(--ink-2); padding: 3px 8px; cursor: pointer; min-height: 26px; }
.ai-font button:hover:not([disabled]) { background: var(--surface-2); }
.ai-font button[disabled] { color: var(--ink-4); cursor: default; opacity: .5; }
.ai-font-v { font-size: var(--t-micro); color: var(--ink-3); padding: 0 6px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); line-height: 26px; white-space: nowrap; }
/* 기본 화면 — 칩이 빠진 자리를 내용이 쓴다: 두 줄까지 감싸 읽히게(말줄임 「오…」 대신) */
body:not(.detail-on) .ai-row .ai-desc { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.45; min-width: 0; }
body:not(.detail-on) .ai-row { flex-wrap: nowrap; align-items: flex-start; padding: 6px 0; }
body:not(.detail-on) .ai-row .ai-no, body:not(.detail-on) .ai-row .lhc { margin-top: 1px; }

/* ── AI 검수 종합(94턴) — 항목 표 + 곁 상자. 큰 숫자 카드 격자는 쓰지 않는다(DESIGN §6); 상태는 색 + 글자 + 앞 점 ── */
.dg .proj-head .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.dg-line { margin: 4px 0 12px; font-size: var(--t-body, 14px); } .dg-line .muted { color: var(--ink-3); font-weight: 400; }   /* 117턴: 「AI 검수」 탭의 한 줄 요약(판정 수 · 남은 묶음 카드 대신) */
.dg-tbl { margin: 4px 0 18px; }
.dg-tbl th, .dg-tbl td { text-align: right; white-space: nowrap; }
.dg-tbl th:first-child, .dg-tbl td:first-child, .dg-tbl th.l, .dg-tbl td.l { text-align: left; }
.dg-tbl td.l.topics { white-space: normal; min-width: 280px; }
.dg-tbl th.l.topics { white-space: normal; }
.dg-tbl th, .dg-tbl td { padding: 7px 9px; }
.dg-tbl { table-layout: auto; }
.dg-tbl td.num, .dg-tbl th.num { width: 74px; min-width: 64px; }
.dg-tbl td.ttl { min-width: 150px; }
.dg-no { display: inline-block; min-width: 1.6em; margin-right: 6px; color: var(--ink-4); font-variant-numeric: tabular-nums; font-size: var(--t-micro); }
..dg-tbl tr.none td { color: var(--ink-4); }
.dg-tbl tr.go { cursor: pointer; }                                   /* 지적이 있는 항목 행 — 행 전체가 파트너로 간다(2026-10-21 대표 지적) */
.dg-tbl tr.go:hover td, .dg-tbl tr.go:focus-visible td { background: var(--tint-blue); }
.dg-tbl tr.go:focus-visible { outline: 2px solid var(--blue-600); outline-offset: -2px; }
.dg-tbl tr.go td.ttl { color: var(--blue-800); }
.dg-tbl td.num { font-variant-numeric: tabular-nums; }
.dg-st { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: var(--t-micro); font-weight: 600; border: 1px solid var(--line); background: var(--surface); color: var(--ink-3); }
.dg-st::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.dg-st.todo { color: #9A6A16; border-color: rgba(154, 106, 22, .35); } .dg-st.todo::before { background: #9A6A16; border-radius: 1px; }
.dg-st.done { color: #2A7351; border-color: rgba(42, 115, 81, .35); } .dg-st.done::before { background: #2A7351; }
.dg-st.later { color: #5C6676; } .dg-st.later::before { background: #5C6676; }
.dg-topic { font: inherit; font-size: var(--t-micro); padding: 1px 8px; margin: 1px 2px 1px 0; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--blue-800); cursor: pointer; }
.dg-topic:hover { border-color: var(--blue-600); background: var(--tint-blue); }
.dg-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-bottom: 14px; }
.dg-side .box { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.dg-side .box h4 { font-size: var(--t-sm); font-weight: 650; margin: 0; }
.dg-side .box p { font-size: var(--t-sm); color: var(--ink-3); margin: 0; line-height: 1.55; }
.dg-side .box .acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.dg .note { font-size: var(--t-micro); color: var(--ink-4); line-height: 1.6; max-width: 900px; }
.dg .empty-hint { margin-top: 8px; }

/* ── LH 지난 검토의견(가져온 「평가지원 보고서-2」, 2026-10-11) — 줄 하나 = 의견 하나, 누르면 검토의견 · 설계자 답변 · 평가 ── */
.lh-op { border-bottom: 1px dashed var(--line); padding: 4px 0; font-size: var(--t-sm); }
.lh-op > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; cursor: pointer; list-style: none; line-height: 1.5; }
.lh-op > summary::-webkit-details-marker { display: none; }
.lh-op > summary b { flex: 1 1 100%; font-weight: 600; color: var(--ink); }
.lh-op[open] > summary b { white-space: normal; }
.lh-op-body { display: grid; gap: 6px; padding: 6px 0 4px; }
.lh-op-body .k { display: block; font-size: var(--t-micro); color: var(--ink-3); }
.lh-op-body p { margin: 0; white-space: pre-wrap; color: var(--ink-2); line-height: 1.6; }
.bd-chip.lh-ok { color: var(--verified); border-color: currentColor; background: var(--tint-verified); }
.bd-chip.lh-bad { color: var(--error); border-color: currentColor; background: var(--tint-error); }
.bd-chip.lh-warn { color: var(--warning); border-color: currentColor; background: var(--tint-warning); }
.bd-chip.lh-muted { color: var(--ink-3); }
/* LH 지난 검토의견을 도면 위에 — 「도면 위 N」 칩은 핀과 같은 색, 누르면 도면에서 보인다 */
.bd-chip.lh-pin { color: #fff; background: #8E3B6B; border-color: #8E3B6B; cursor: pointer; font: inherit; line-height: inherit; }
.bd-chip.lh-pin:hover { background: #73305A; }
.lh-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.lh-carry { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 2px 0 8px; }
.bd-chip.lh-ok[data-sel] { cursor: pointer; font: inherit; line-height: inherit; }
.mp-tpl { flex-wrap: wrap; }
.mp-tpl #mpLhPick { flex: 1 1 100%; }
#btnLhOpsClear[hidden] { display: none; }
#btnNameCheck[hidden] { display: none; }   /* .btn 의 inline-flex 가 hidden 을 이긴다 — 확인할 이름이 없으면 단추를 숨긴다(검토 지적) */

/* ── AI 검수 요청 진행 상자(98턴) ── */
.dg-job { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: 12px 14px; margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; }
.dg-job .hd { display: flex; align-items: center; gap: 10px; font-size: var(--t-sm); }
.dg-job .hd .st { color: var(--ink-3); } .dg-job.failed .hd .st { color: #B23A2B; } .dg-job.done .hd .st { color: #2A7351; }
.dg-job .hd .acts { margin-left: auto; display: flex; gap: 6px; }
.dg-job .bar { height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; } .dg-job .bar i { display: block; height: 100%; background: var(--blue-600); transition: width .3s; }
.dg-job .steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--t-micro); color: var(--ink-3); }
.dg-job .steps li::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--line-strong); vertical-align: 1px; }
.dg-job .steps li.ok::before { background: #2A7351; } .dg-job .steps li.bad::before { background: #B23A2B; } .dg-job .steps li.run::before { background: var(--blue-600); }
.dg-job .err { color: #B23A2B; font-size: var(--t-sm); margin: 0; }
.dg-job .note { font-size: var(--t-micro); color: var(--ink-4); margin: 0; }

/* LH 검토의견 사례(검토의견 DB 화면 머리) — 가져온 파일마다 이름 · 건수 · 빼기 */
.db-lhlib { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 4px 0 10px; font-size: var(--t-sm); }
.db-lhlib .lbl { font-weight: 600; color: var(--ink-2); }
.lhlib-f { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.cp-tag.lh-ded { color: var(--error); border-color: currentColor; }

/* ── 프로젝트 카드의 AI 검수 한 줄(102턴) ── */
.proj-card .pj-ai { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: var(--t-micro); color: var(--ink-3); }
.proj-card .pj-ai b { font-weight: 600; color: var(--ink-2); } .proj-card .pj-ai b.todo { color: #9A6A16; } .proj-card .pj-ai b.ok { color: #2A7351; }

/* ── AI 검수 요청의 선택(103턴) ── */
.dg .dg-opt { display: flex; align-items: center; gap: 8px; font-size: var(--t-sm); color: var(--ink-2); margin: 0 0 12px; }

/* ── 규칙 없는 항목의 뜻 · 겹치는 지구 알림(105턴) ── */
.dg-tbl td.why { white-space: normal; color: var(--ink-3); font-size: var(--t-micro); line-height: 1.55; }
.dg-job.dup { border-color: rgba(154, 106, 22, .45); } .dg-job.dup .hd .st { color: #9A6A16; }

/* ── 다른 판과 견줌(108턴) — 표 아래 한 상자. 세 목록을 나란히, 좁으면 아래로 ── */
.dg-diff { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); padding: 12px 14px; margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; }
.dg-diff .hd { display: flex; align-items: center; gap: 10px; font-size: var(--t-sm); flex-wrap: wrap; } .dg-diff .hd .st { color: var(--ink-3); } .dg-diff .hd .acts { margin-left: auto; }
.dg-diff .sum { font-size: var(--t-sm); color: var(--ink-2); margin: 0; line-height: 1.6; }
.dg-diff .caveat { font-size: var(--t-micro); color: #9A6A16; margin: 0; }
.dg-diff .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.dg-diff h5 { font-size: var(--t-micro); font-weight: 650; color: var(--ink-3); margin: 0 0 4px; }
.dg-diff ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dg-diff li { font-size: var(--t-sm); line-height: 1.5; } .dg-diff li small { display: block; font-size: var(--t-micro); color: var(--ink-3); }
.dg-diff li small.why-ok { color: #2A7351; } .dg-diff li small.why-warn { color: #9A6A16; }
.dg-diff .none { font-size: var(--t-micro); color: var(--ink-4); margin: 0; } .dg-diff details summary { font-size: var(--t-micro); color: var(--blue-800); cursor: pointer; margin: 6px 0; }
.dg-diff .note { font-size: var(--t-micro); color: var(--ink-4); margin: 0; }

/* ── 처음 안내(2026-10-11) — 스포트라이트 + 작은 카드. 어둡게 덮은 바깥은 누르지 않는다(카드 단추 · Esc 로 움직인다) ── */
.tour { position: fixed; inset: 0; z-index: 100; }
body.touring #fbw-root { visibility: hidden; }   /* 의견 위젯 단추가 안내 카드 위에 겹친다(위젯은 맨 위 층) */
.tour-hole { position: fixed; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(26, 29, 36, .46); outline: 2px solid var(--blue-600); outline-offset: 0; pointer-events: none;
  transition: left var(--d-base) var(--ease), top var(--d-base) var(--ease), width var(--d-base) var(--ease), height var(--d-base) var(--ease); }
.tour-card { position: fixed; width: 312px; max-width: calc(100vw - 32px); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--sh-3); padding: 16px 16px 12px; font-family: var(--font-product); }
.tour-card.in { animation: tour-in var(--d-base) var(--ease); }
@keyframes tour-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tour-card h3 { margin: 0 0 6px; font-size: var(--t-lg); font-weight: 700; letter-spacing: -.01em; }
.tour-card p { margin: 0 0 14px; font-size: var(--t-body); line-height: 1.6; color: var(--ink-2); }
.tour-foot { display: flex; align-items: center; gap: 6px; }
.tour-n { margin-right: auto; font-size: var(--t-cap); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tour-foot .btn:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 2px; }
@media (max-width: 640px) { .tour-card { left: 16px; right: 16px; bottom: 16px; width: auto; max-width: none; } }
@media (prefers-reduced-motion: reduce) { .tour-hole { transition: none; } .tour-card.in { animation: none; } }

/* 도면 옅게(F) — 바탕 PDF 만 흐리게, 의견 · 표시 층은 그대로 */
#canvasStack.faded #pdfCanvas, #compareStack.faded #compareCanvas { opacity: .38; transition: opacity var(--d-base) var(--ease); }
#canvasStack #pdfCanvas { transition: opacity var(--d-base) var(--ease); }
.lay-kbd { font-family: var(--font-mono); font-size: var(--t-micro); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; color: var(--ink-2); background: var(--surface); }
@media (prefers-reduced-motion: reduce) { #canvasStack #pdfCanvas { transition: none; } }
.lay-leg .lg-n { margin-left: 3px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* 도면 회전(2026-10-12) — 도구 기둥 「회전」 두 단추 · 시작 탭 카드 미리보기 위 돌리기 */
.td-rot { cursor: default; width: 50px; }
.td-rot-row { display: flex; gap: 2px; }
.td-rot-row button { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--ink-2); cursor: pointer; padding: 0; }
.td-rot-row button:hover { border-color: var(--blue-600); color: var(--blue-800); }
.td-rot-row button:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 1px; }
.td-rot-row svg { width: 14px; height: 14px; }
.td-rot:hover { border-color: var(--line); }
.sc-wrap { position: relative; display: flex; min-width: 0; }
.sc-wrap > .sheet-card { flex: 1; min-width: 0; }
.sc-rot { position: absolute; right: 6px; top: 6px; z-index: 2; display: flex; gap: 4px; opacity: 0; transition: opacity var(--d-fast) var(--ease); }
.sc-wrap:hover .sc-rot, .sc-wrap:focus-within .sc-rot { opacity: 1; }
@media (hover: none) { .sc-rot { opacity: 1; } }
.sc-rot button { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink-2); cursor: pointer; box-shadow: var(--sh-1); }
.sc-rot button:hover { border-color: var(--blue-600); color: var(--blue-800); }
.sc-rot button:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 1px; opacity: 1; }
.sc-rot svg { width: 15px; height: 15px; }
.rev-up { cursor: pointer; }
.rev-up:focus-within { outline: 2px solid var(--blue-600); outline-offset: 2px; }   /* 숨긴 파일 칸에 초점이 오면 단추에 테두리 */

/* 도면 위 그림(2026-10-12) — 고른 그림 위에 떠 있는 띠 */
.img-bar { position: fixed; z-index: 85; display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; max-width: min(560px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: var(--sh-3); }
.img-bar[hidden] { display: none; }
.img-bar button { height: 28px; min-width: 28px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: var(--t-cap); cursor: pointer; }
.img-bar button:hover:not(:disabled) { border-color: var(--blue-600); color: var(--blue-800); }
.img-bar button:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 1px; }
.img-bar button:disabled { opacity: .45; cursor: not-allowed; }
.img-bar button.primary { background: var(--blue-800); border-color: var(--blue-800); color: #fff; }
.img-bar button.danger { color: var(--error); }
.img-bar svg { width: 15px; height: 15px; }
.img-bar b { font-weight: 700; font-variant-numeric: tabular-nums; }
#canvasStack.img-editing #overlayCanvas { touch-action: none; }   /* 그림을 고른 동안 손가락 · 펜 끌기는 그림 몫 */

/* AI 검토 도우미(2026-10-12) — 오른쪽 칸(판정 칸 위). 대화 · 도구 줄 · 인용 칩 · 초안 구름 단추 */
.agent-panel { position: fixed; top: 64px; right: 12px; bottom: 12px; width: min(440px, calc(100vw - 24px)); z-index: 80; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-panel); box-shadow: var(--sh-3); font-family: var(--font-product); }
.agent-panel[hidden] { display: none; }
/* 창 옮기기 · 크기(2026-10-30) — 머리줄이 손잡이, 가장자리 · 모서리는 보이지 않는 손잡이. 좁은 화면(아래에서 올라오는 판)은 쓰지 않는다 */
.ag-head { cursor: grab; touch-action: none; user-select: none; }
.ag-head .btn, .ag-head select { cursor: pointer; }
body.ag-dragging, body.ag-dragging * { user-select: none !important; }
body.ag-dragging-move, body.ag-dragging-move * { cursor: grabbing !important; }
.ag-rz { position: absolute; z-index: 2; touch-action: none; }
.ag-rz-n, .ag-rz-s { left: 14px; right: 14px; height: 9px; cursor: ns-resize; }
.ag-rz-e, .ag-rz-w { top: 14px; bottom: 14px; width: 9px; cursor: ew-resize; }
.ag-rz-n { top: -5px; } .ag-rz-s { bottom: -5px; } .ag-rz-e { right: -5px; } .ag-rz-w { left: -5px; }
.ag-rz-ne, .ag-rz-nw, .ag-rz-se, .ag-rz-sw { width: 18px; height: 18px; }
.ag-rz-ne { top: -6px; right: -6px; cursor: nesw-resize; } .ag-rz-sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.ag-rz-nw { top: -6px; left: -6px; cursor: nwse-resize; } .ag-rz-se { bottom: -6px; right: -6px; cursor: nwse-resize; }
.ag-rz-n:hover, .ag-rz-s:hover, .ag-rz-e:hover, .ag-rz-w:hover { background: var(--tint-blue); }
@media (pointer: coarse) { .ag-rz-n, .ag-rz-s { height: 18px; } .ag-rz-e, .ag-rz-w { width: 18px; } .ag-rz-ne, .ag-rz-nw, .ag-rz-se, .ag-rz-sw { width: 28px; height: 28px; } }
/* 도우미 칸이 열려 있으면 알림(되돌리기 등)을 칸 왼쪽으로 — 보내기 단추를 가리지 않게. 좁은 화면은 칸이 꽉 차므로 입력칸 위로 */
body.ag-open .toast-dock { right: var(--ag-dock, calc(min(440px, 100vw - 24px) + 24px)); }
@media (max-width: 900px) { body.ag-open .toast-dock { right: 18px; bottom: 150px; } }
.ag-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; border-bottom: 1px solid var(--line); }
.ag-head b { font-size: var(--t-lg); }
.ag-sp { flex: 1; }
.ag-ctx { padding: 6px 12px; font-size: var(--t-cap); color: var(--ink-3); border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.ag-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.ag-empty { color: var(--ink-3); font-size: var(--t-sm); line-height: 1.6; }
.ag-msg { font-size: var(--t-body); line-height: 1.6; }
.ag-msg.me { align-self: flex-end; max-width: 88%; background: var(--tint-blue); color: var(--ink); padding: 8px 10px; border-radius: 12px 12px 4px 12px; white-space: pre-wrap; }
.ag-msg.ai { align-self: stretch; }
.ag-text { color: var(--ink); overflow-wrap: anywhere; }   /* 줄 단위 블록(agMdHtml) — 제목 · 표 · 목록 */
.ag-text .ag-p { white-space: pre-wrap; }
.ag-text .ag-gap { height: 6px; }
.ag-text .ag-h { font-weight: 700; color: var(--ink); margin: 10px 0 4px; }
.ag-text .ag-h1 { font-size: var(--t-lg); }
.ag-text .ag-h2 { font-size: var(--t-body); border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.ag-text .ag-h3, .ag-text .ag-h4 { font-size: var(--t-sm); color: var(--ink-2); }
.ag-text .ag-li { display: flex; gap: 6px; padding-left: calc(var(--ind, 0) * 14px); }
.ag-text .ag-bul { flex: 0 0 auto; color: var(--ink-3); min-width: 10px; }
.ag-text .ag-hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }
.ag-text code { font-size: .92em; background: var(--surface-2); padding: 0 3px; border-radius: 4px; }
.ag-tblw { overflow-x: auto; margin: 6px 0; }
.ag-tbl { border-collapse: collapse; font-size: var(--t-sm); min-width: 100%; }
.ag-tbl th, .ag-tbl td { border: 1px solid var(--line); padding: 4px 6px; text-align: left; vertical-align: top; }
.ag-tbl th { background: var(--surface-2); font-weight: 600; }
.ag-tools { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--t-cap); color: var(--ink-3); }
.ag-tool::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--line-strong); vertical-align: 1px; }
.ag-tool.run::before { background: var(--blue-600); animation: ag-pulse 1s ease-in-out infinite; }
.ag-tool.ok::before { background: var(--verified); }
.ag-tool.err::before { background: var(--error); }
.ag-tool > span:first-child { color: var(--ink-2); font-weight: 600; }
@keyframes ag-pulse { 50% { opacity: .35; } }
.ag-marks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ag-warn { margin-top: 6px; font-size: var(--t-cap); color: var(--error); font-weight: 600; }
.ag-cite-body { margin: 4px 0 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); font-size: var(--t-sm); white-space: normal; }
.ag-cite-body div { margin: 4px 0; color: var(--ink-2); max-height: 320px; overflow-y: auto; white-space: pre-wrap; }   /* 자료 본문 전부(자르지 않는다) — 길면 안에서 굴린다 */
.ag-bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line); }
.ag-convl { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; font-size: var(--t-cap); color: var(--ink-3); }
.ag-convs { flex: 1; min-width: 0; height: 30px; font-size: var(--t-sm); }
.ag-prog { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line); font-size: var(--t-cap); color: var(--ink-2); }
.ag-prog progress { flex: 0 0 120px; height: 8px; accent-color: var(--blue-600); }
.ag-head2 { margin-bottom: 4px; }
.ag-head2 .btn { font-weight: 700; padding-left: 0; }
.ag-resume { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-2); font-size: var(--t-sm); color: var(--ink-2); }
.ag-resume span { flex: 1; }
/* 일하는 중 — 칸을 닫아도 계속하므로 도구 기둥 「AI」에 점으로 알린다 */
#btnAgent { position: relative; }
#btnAgent.ag-busy::after { content: ''; position: absolute; top: 4px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue-600); animation: ag-pulse 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { #btnAgent.ag-busy::after, .ag-tool.run::before { animation: none; } }
.ag-form { border-top: 1px solid var(--line); padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.ag-form textarea { width: 100%; resize: vertical; min-height: 52px; max-height: 200px; font-size: var(--t-body); }
.ag-acts { display: flex; align-items: center; gap: 6px; }
.ag-acts .chk-page { flex: 1; }
.agent-panel [hidden] { display: none !important; }   /* .btn 의 display 가 hidden 을 덮었다(멈추기가 늘 보였다) */
#btnAgent.on { border-color: var(--blue-600); background: var(--tint-blue); }
@media (max-width: 640px) { .agent-panel { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; height: 78vh; } }
@media (max-width: 640px) { .ag-rz { display: none; } .ag-head { cursor: default; touch-action: auto; } }
@media (prefers-reduced-motion: reduce) { .ag-tool.run::before { animation: none; } }

/* 도면 PDF 내보내기(2026-10-12) — 장을 차례로 여는 동안 화면을 가린다(그사이 누르면 엉뚱한 장에 그려진다). 그만두기만 받는다 */
.pdfx-veil { position: fixed; inset: 0; z-index: 140; background: rgba(15, 23, 42, .28); display: flex; align-items: center; justify-content: center; }
.pdfx-card { width: min(420px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-panel); box-shadow: var(--sh-3); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; font-family: var(--font-product); }
.pdfx-card b { font-size: var(--t-lg); }
.pdfx-card .pdfx-t { margin: 0; font-size: var(--t-body); color: var(--ink); min-height: 1.4em; overflow-wrap: anywhere; }
.pdfx-card progress { width: 100%; height: 8px; accent-color: var(--blue-600); }
.pdfx-card .btn { align-self: flex-end; }


/* 닥터체크 DB — 배포 말뭉치(LH 검토의견 원장)의 근거 후보 칩 · 되풀이 지적 묶음(2026-10-19) */
.case-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 2px 12px 8px; }
.case-links .kg-t { font-size: var(--t-micro); color: var(--ink-3); margin-right: 2px; }
.lh-rep > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.lh-rep .lh-op-body { display: flex; flex-wrap: wrap; gap: 4px; }

/* AI 체크사항 행의 단추(의견 초안 · 같은 코드 LH 의견)(2026-10-20) */
.ai-row .ai-act { display: inline-flex; gap: 4px; margin-left: auto; flex-shrink: 0; }

/* AI 검수 → 설계검토 파트너(2026-10-20): 레일 거르기 칩 · 강조 행 */
.rail-ai-chip { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.ai-row.ai-hot { background: var(--tint-info, #eef3ff); border-radius: 6px; }

/* LH 의견이 놓인 낱장 팝업(2026-10-21) — 허브에서 받은 그림 + 자리 상자(퍼센트 좌표) */
.lh-pop { position: fixed; inset: 0; z-index: 1200; background: rgba(20, 24, 36, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.lh-pop-card { background: var(--bg, #fff); color: var(--fg, #111); border-radius: 10px; max-width: min(96vw, 1500px); max-height: 94vh; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); overflow: hidden; }
.lh-pop-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line, #e5e7eb); }
.lh-pop-head b { flex: 1; font-size: var(--t-body, 14px); }
.lh-pop-body { overflow: auto; padding: 10px 14px 14px; }
.lh-pop-img { position: relative; display: inline-block; max-width: 100%; }
.lh-pop-img img { display: block; max-width: 100%; height: auto; }
.lh-pop-box { position: absolute; border: 3px solid #e60000; border-radius: 4px; background: rgba(230, 0, 0, .06); pointer-events: none; }
.lh-pop-box.ok { border-color: #1B41B9; background: rgba(27, 65, 185, .08); }

/* 닥터체크 DB 상세 — 이전 · 다음(2026-10-21) */
.d-head .d-nav { float: right; display: inline-flex; gap: 4px; margin-left: 8px; }

/* 자동 기능 잠금 안내 띠 · 비서 단추 잠금 · 측정 선택 칩(2026-10-26 LH 의견) */
.ai-lock { display: flex; gap: 10px; align-items: center; padding: 7px 16px; background: var(--tint-warning, #fff7e6); border-bottom: 1px solid var(--line); font-size: var(--t-sm); color: var(--ink-2); }
.ai-lock[hidden] { display: none; }
.ai-lock b { color: var(--ink); white-space: nowrap; }
.ai-lock .spacer { flex: 1; }
.td-btn.locked { opacity: .55; }
.ms-chip { position: fixed; z-index: 60; display: flex; gap: 4px; align-items: center; padding: 4px 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.12); font-size: var(--t-sm); }
.ms-chip[hidden] { display: none; }
.ms-chip-t { color: var(--ink-2); padding: 0 4px; white-space: nowrap; }
.ag-lock { margin: 0 12px 6px; padding: 6px 10px; border-radius: 8px; background: var(--tint-warning, #fff7e6); font-size: var(--t-sm); color: var(--ink-2); }
.ag-lock[hidden] { display: none; }

/* 근거 탭 — 최종 감점 사례의 대분류 묶음 · 접는 절(2026-10-26 LH 의견) */
.case-cat { margin-bottom: 6px; }
.case-cat-h { font-size: var(--t-micro); color: var(--ink-3); margin: 8px 0 4px; display: flex; gap: 6px; align-items: center; }
details.law-sec > summary.block-title { cursor: pointer; list-style: none; }
details.law-sec > summary.block-title::-webkit-details-marker { display: none; }

/* 도면 위 범례(2026-10-26 LH 의견) — 뷰어 왼쪽 아래에 붙어 따라온다(sticky), 지금 도면에 그려진 종류만 */
.ov-legend { position: sticky; left: 12px; bottom: 12px; z-index: 5; display: inline-flex; flex-direction: column; gap: 3px; width: max-content; max-width: 70%; margin-top: 8px; padding: 6px 9px; background: rgba(255,255,255,.95); border: 1px solid var(--line); border-radius: 8px; font-size: var(--t-micro); color: var(--ink-2); box-shadow: 0 2px 8px rgba(0,0,0,.08); cursor: default; }
.ov-legend[hidden] { display: none; }
.ov-legend .ovl-head { display: flex; gap: 6px; align-items: center; }
.ov-legend .ovl-head b { color: var(--ink); }
.ov-legend .ovl-btn { font: inherit; font-size: var(--t-micro); padding: 0 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-2); cursor: pointer; }
.ov-legend .ovl-row { display: flex; flex-wrap: wrap; gap: 3px 8px; align-items: center; }
.ov-legend .ovl-t { font-weight: 700; color: var(--ink); }
.ov-legend .ovl-n { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ov-legend .lg { display: inline-flex; align-items: center; white-space: nowrap; }
.ov-legend .sw { display: inline-block; width: 14px; height: 9px; margin-right: 3px; box-sizing: border-box; border-radius: 2px; flex: 0 0 auto; }
.ov-legend .ovl-codes { color: var(--ink-3); }
.ov-legend.min .ovl-row { display: none; }

/* 검토 비서 — 되묻기 선택지 · 근거 가르기 배지(2026-10-26) */
.ag-choices { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.ag-gen { display: inline-block; padding: 0 5px; border-radius: 4px; background: var(--surface-2); color: var(--ink-3); font-size: var(--t-micro); font-weight: 700; margin-right: 2px; vertical-align: 1px; }
.ag-ask { color: var(--blue-800); }

/* 설계보완목록(2026-10-26 LH 의견) */
.punch-wrap { width: 100%; flex: 1 1 auto; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.punch-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.punch-bar h2 { margin: 0; }
.punch-bar .spacer { flex: 1; }
.punch-stats { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.punch-stats .stat { display: inline-flex; gap: 4px; align-items: baseline; font-size: var(--t-sm); color: var(--ink-3); }
.punch-stats .stat .num { font-weight: 700; color: var(--ink); }
.punch-grid { overflow: auto; min-height: 0; }
.punch-table th, .punch-table td { vertical-align: top; }
.punch-table tr[data-punch] { cursor: pointer; }
.punch-table tr[data-punch]:hover td { background: var(--tint-blue, #eef3ff); }

/* 영역 묻기(2026-10-26) — 켜진 단추는 측정 · 주석표기와 같은 파란 표시 */
#btnRegion.on { background: var(--tint-blue); border-color: var(--blue-800); color: var(--blue-800); }

/* ── 자동도면검토 VLM 결과(계약 v1, 2026-10-28) — 오른쪽 카드 줄 · 도면 위 지적을 누르면 뜨는 까닭 창 ── */
.rv-row { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 5px 0; cursor: pointer; font: inherit; color: inherit; display: flex; align-items: center; gap: 6px; }
.rv-row:hover { background: var(--surface-2); }
.rv-row:focus-visible { outline: 2px solid var(--blue-800); outline-offset: 1px; }
.rv-row .ai-desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-chip { display: inline-flex; align-items: center; padding: 0 6px; min-height: 20px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--t-cap); color: var(--ink-2); background: var(--surface); white-space: nowrap; }
.rv-chip.ok { color: #1F5A3F; border-color: #2A7351; background: #DCEFE4; }
.rv-chip.wait { color: #8A2A1B; border-color: #B23A2B; background: #F6E6E3; }
.rv-chip.muted { color: var(--ink-3); }
.rv-pop { position: fixed; z-index: 60; max-height: calc(100vh - 24px); overflow: auto; background: var(--surface); border: 1px solid var(--line-strong, var(--line)); border-radius: var(--r-card); box-shadow: 0 8px 28px rgba(0,0,0,.18); padding: 10px 12px; font-size: var(--t-sm); color: var(--ink); }
.rv-pop[hidden] { display: none; }
.rv-pop .rv-head { display: flex; align-items: flex-start; gap: 8px; }
.rv-pop .rv-head b { flex: 1; min-width: 0; line-height: 1.35; }
.rv-pop .rv-no { flex: none; border: 1.5px solid; border-radius: 4px; padding: 0 5px; font-weight: 700; font-size: var(--t-cap); }
.rv-pop .rv-tags, .rv-pop .rv-basis { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; align-items: center; }
.rv-pop .rv-reason { margin: 6px 0; line-height: 1.5; color: var(--ink-2); white-space: pre-wrap; }
.rv-pop .rv-vals { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: var(--t-cap); }
.rv-pop .rv-vals th, .rv-pop .rv-vals td { border-bottom: 1px solid var(--line); padding: 3px 4px; text-align: left; vertical-align: top; }
.rv-pop .rv-vals th { color: var(--ink-3); font-weight: 500; width: 40%; }
.rv-pop .rv-rel ul { margin: 2px 0 0; padding-left: 16px; }
.rv-pop .linkish { background: none; border: 0; padding: 0; color: var(--blue-800); text-decoration: underline; cursor: pointer; font: inherit; }
.rv-pop .rv-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.rv-pop .rv-foot { margin-top: 6px; font-size: var(--t-cap); }
.note.warn { color: #8A2A1B; }
.rv-tgs { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; }
.rv-tg { cursor: pointer; font: inherit; font-size: var(--t-cap); }
.rv-tg.on { background: var(--tint-blue); border-color: var(--blue-600); color: var(--blue-800); }
.rv-tg[disabled] { opacity: .5; cursor: default; }
/* 자동 검토 결과 — 등급 글자 · 점검해 문제없던 것(2026-10-29) */
.rv-row .rv-grade { flex: none; }
.rv-checks { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; font-size: var(--t-sm); }
.rv-checks > summary { cursor: pointer; color: var(--ink-2); padding: 2px 0; }
.rv-checks > summary b { color: #1F5A3F; }
.rv-chk-all { display: flex; align-items: center; gap: 6px; margin: 6px 0; font-size: var(--t-cap); color: var(--ink-2); }
.rv-chk-g { margin: 6px 0 8px; }
.rv-chk-h { display: flex; flex-direction: column; gap: 1px; margin-bottom: 2px; }
.rv-chk-h b { color: var(--ink); font-weight: 600; }
.rv-chk-h .muted { font-size: var(--t-cap); }
.rv-chk-i { display: block; width: 100%; text-align: left; background: none; border: 0; border-left: 2px solid #27ae60; padding: 3px 8px; margin: 2px 0; font: inherit; font-size: var(--t-cap); color: var(--ink-2); cursor: pointer; }
.rv-chk-i:hover { background: var(--surface-2); color: var(--ink); }
.rv-chk-i:focus-visible { outline: 2px solid var(--blue-800); outline-offset: 1px; }
/* 검토 비서 — 생각 중 줄(2026-10-29) */
.ag-think { margin-top: 6px; font-size: var(--t-cap); color: var(--ink-2); }
.ag-think::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; vertical-align: middle; border-radius: 50%; background: var(--blue-600); animation: agpulse 1.2s ease-in-out infinite; }
@keyframes agpulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ag-think::before { animation: none; } }