/* NUMP-KUMC 흉부 X-ray 분석 — 디자인 토큰 & 레이아웃 (CLAUDE.md §3)
   판독실 관행에 맞춰 기본 다크. 캔버스는 두 테마 모두 순검정 유지. */

@font-face {
  font-family: 'Pretendard';
  src: url('/static/fonts/Pretendard-Regular.subset.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('/static/fonts/Pretendard-SemiBold.subset.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('/static/fonts/Pretendard-Bold.subset.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}

:root {
  --font: 'Pretendard', -apple-system, 'Malgun Gothic', 'NanumGothic', system-ui, sans-serif;

  /* 의료용 딥블루/틸 — 채도를 낮춰 병원 문서 톤에 맞춘다 */
  --accent: #1d6fa5;
  --accent-hi: #2b8bc9;
  --teal: #0f8b8d;
  --danger: #c0392b;
  --warn: #b45309;
  --ok: #15803d;

  --hdr-h: 38px;   /* 정보 표시 전용 — 최대한 납작하게 */
  --left-w: 208px;
  /* X-ray 뷰포트: 최소 330px, 최대는 그 2.925배(≈965px)로 고정.
     (1.95배 → 다시 1.5배 확대 = 판독 영역을 더 크게)
     남는 가로 공간은 전부 소견 패널이 가져간다. */
  --center-min: 330px;
  --center-max: calc(var(--center-min) * 2.925);
  /* 소견 패널 최소폭 = 편집 툴바·옵션이 한 줄에 들어가는 폭.
     이 아래로는 창이 더 줄지 않는다(#app 의 min-width 가 가로 스크롤로 막는다). */
  --right-min: 430px;

  --r-sm: 6px; --r-md: 9px; --r-lg: 13px;
  --shadow: 0 1px 3px rgba(0,0,0,.14), 0 6px 18px rgba(0,0,0,.10);
  --t: 180ms cubic-bezier(.4,0,.2,1);
}

:root[data-theme="light"] {
  --bg: #eef1f5;
  --surface: #ffffff;
  --surface-2: #f6f8fa;
  --surface-3: #eceff3;
  --line: #d9e0e8;
  --line-soft: #e8edf2;
  --text: #16202b;
  --text-2: #5a6b7c;
  --text-3: #8494a3;
  --hdr-bg: linear-gradient(100deg, #12456b, #1d6fa5 60%, #17798a);
  --hdr-text: #ffffff;
  --input-bg: #ffffff;
  --chip-bg: #e8f0f7;
}
:root[data-theme="dark"] {
  --bg: #0b1119;
  --surface: #121a25;
  --surface-2: #16202d;
  --surface-3: #1c2836;
  --line: #253444;
  --line-soft: #1c2836;
  --text: #dfe7ef;
  --text-2: #93a4b6;
  --text-3: #6b7f93;
  --hdr-bg: linear-gradient(100deg, #0d2f49, #14547e 60%, #10606e);
  --hdr-text: #eaf2f8;
  --input-bg: #0e1721;
  --chip-bg: #16283a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* id 선택자의 display 가 브라우저 기본 [hidden] 규칙을 이겨버리므로 명시적으로 이긴다.
   (#welcome{display:grid}, .stage{display:flex} 등이 hidden 을 무시하던 문제) */
[hidden] { display: none !important; }
/* ★ 창 최소 폭 강제 (= 좌측 208 + X-ray 최소 330 + 소견 툴바 한 줄 430 = 968px)
   이보다 좁아지면 레이아웃이 뭉개지므로 **가로 스크롤**로 막는다.
   스크롤 컨테이너는 html 이어야 한다 — body 에만 overflow 를 걸면 스크롤바가 생기지 않고
   내용이 그냥 잘려나간다(소견 패널이 화면 밖으로 사라지던 원인). */
html {
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
/* Dr.NUMPAI 팝아웃 창(chat.html)도 이 CSS 를 불러온다.
   거기에 3분할 레이아웃용 min-width 를 걸면 작은 창에서 가로 스크롤이 생기고 깨진다. */
body:not(.npi-popout) {
  min-width: calc(var(--left-w) + var(--center-min) + var(--right-min));
}
body {
  height: 100%;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.55;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; border-radius: 4px; }

/* ── 헤더 ───────────────────────────────────────── */
#hdr {
  height: var(--hdr-h);
  min-width: calc(var(--left-w) + var(--center-min) + var(--right-min));
  background: var(--hdr-bg);
  color: var(--hdr-text);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px; gap: 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,.25), 0 3px 12px rgba(0,0,0,.18);
  position: relative; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* 두 로고의 박스 높이(=img 높이 + 상하 패딩)를 동일하게 유지한다.
   NUMP 로고는 원본이 가로로 넙적해서(1.40:1) 정사각 캔버스에 중앙 배치해 두었다. */
.logo {
  height: 22px; width: 22px; object-fit: contain;   /* 정사각 박스 */
  background: #fff; border-radius: 3px; padding: 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
/* KU Medicine 로고는 워드마크가 흰 글자라 흰 배경에서는 보이지 않는다.
   로고 방패에서 뽑은 크림슨(#960021) 위에 얹는다. */
.logo.kumc {
  background: #960021; width: auto; max-width: 104px; padding: 2px 6px;
}
.logo-sep { width: 1px; height: 16px; background: rgba(255,255,255,.28); }
.wordmark {
  font-size: 10px; font-weight: 700; line-height: 1.15; letter-spacing: -.2px;
  background: #fff; color: #7c1e2b; padding: 4px 7px; border-radius: var(--r-sm);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* ── 발표용 가림막 (기믹) ────────────────────────────────────────────
   협력기관 식별자를 읽히지는 않되 실루엣·색만 남긴다.
   두 값만 조절하면 세기가 바뀐다. 0 으로 두면 원래대로 완전히 보인다.
   글자와 로고는 크기가 달라 같은 blur 값에서도 가려지는 정도가 달라 분리했다. */
:root {
  --veil-text: 0px;   /* 0 = 블러 해제(선명). 발표용으로 가릴 땐 2.2~2.6px 로 */
  --veil-logo: 0px;   /* 0 = 블러 해제(선명). 가릴 땐 3.0~3.4px 로 */
}
.veil-text {
  display: inline-block;          /* inline 에 filter 를 걸면 줄바꿈 지점에서 잘린다 */
  filter: blur(var(--veil-text));
}
.logo.kumc.veil { filter: blur(var(--veil-logo)); }
.wordmark.veil  { filter: blur(var(--veil-logo)); }
/* 가려둔 걸 드래그로 복사해 가면 의미가 없다 */
.veil { user-select: none; -webkit-user-select: none; pointer-events: none; }
/* 제목·부제를 한 줄로 (헤더를 납작하게 유지) */
.titles { margin-left: 3px; display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.titles h1 { font-size: 14px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; }
.titles p {
  font-size: 9.5px; color: rgba(255,255,255,.68); letter-spacing: .2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.titles .dim { color: rgba(255,255,255,.5); }

.hdr-actions { display: flex; align-items: center; gap: 6px; }
.badge {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.2);
}
.badge .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #94a3b8; transition: background var(--t);
}
.badge.ok .dot { background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.22); }
.badge.err .dot { background: #f87171; box-shadow: 0 0 0 3px rgba(248,113,113,.22); }
.icon-btn {
  width: 23px; height: 23px; display: grid; place-items: center;
  border-radius: 4px; border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.1); transition: background var(--t);
}
.icon-btn:hover { background: rgba(255,255,255,.22); }
.icon-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.hdr-btn {
  display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px;
  font-size: 10.5px; font-weight: 600; color: inherit;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.1); transition: background var(--t);
}
.hdr-btn:hover { background: rgba(255,255,255,.24); }
.hdr-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; }

/* ── 사용법 팝업 ─────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 24px;
  background: rgba(4, 10, 17, .62); backdrop-filter: blur(2px);
  animation: fade .16s ease-out;
}
@keyframes fade { from { opacity: 0; } }
.modal-card {
  width: min(760px, 100%); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: 0 18px 60px rgba(0,0,0,.45);
  animation: rise .2s cubic-bezier(.2,1,.35,1);
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.modal-head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.modal-head h2 { font-size: 14.5px; font-weight: 700; letter-spacing: -.2px; }
.icon-btn.ghost {
  border-color: var(--line); background: var(--surface-2); color: var(--text-2);
  width: 28px; height: 28px;
}
.icon-btn.ghost:hover { background: var(--surface-3); color: var(--text); }
.modal-body { overflow-y: auto; padding: 4px 16px 16px; }

.help-sec { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.help-sec:last-child { border-bottom: none; }
.help-sec h3 {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 7px;
}
.help-sec h3 .num {
  display: grid; place-items: center; width: 18px; height: 18px; flex: none;
  font-size: 10.5px; font-weight: 700; color: #fff;
  background: var(--accent); border-radius: 50%;
}
.help-sec p { font-size: 12px; color: var(--text-2); line-height: 1.7; }
.help-sec ul { margin: 5px 0 0; padding-left: 16px; }
.help-sec li { font-size: 12px; color: var(--text-2); line-height: 1.75; margin-bottom: 2px; }
.help-sec b { color: var(--text); font-weight: 600; }
.help-sec code {
  font-size: 11px; padding: 1px 5px; border-radius: 4px;
  background: var(--surface-3); color: var(--accent-hi);
}
.help-sec .tip {
  margin-top: 8px; padding: 8px 10px; font-size: 11.5px; line-height: 1.65;
  background: var(--surface-2); border-left: 2.5px solid var(--teal);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.help-sec.warn .tip, .help-sec.warn li { color: var(--text-2); }
.help-sec.warn h3 { color: var(--danger); }
.badge-on {
  font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  background: var(--accent); color: #fff; vertical-align: 1px;
}

table.keys { width: 100%; border-collapse: collapse; }
table.keys td { padding: 5px 0; font-size: 12px; vertical-align: middle; }
table.keys td:first-child { color: var(--text-2); width: 132px; }
table.keys tr + tr td { border-top: 1px solid var(--line-soft); }
table.keys kbd {
  display: inline-block; font-size: 10.5px; font-weight: 600; color: var(--text);
  padding: 2px 6px; margin-right: 2px; border-radius: 4px;
  background: var(--surface-3); border: 1px solid var(--line); box-shadow: 0 1px 0 var(--line);
}
.k-note { margin-left: 8px; font-size: 10.5px; color: var(--text-3); }

/* ── 3분할 ──────────────────────────────────────── */
/* 폭 배분
   · X-ray 뷰포트 — 330px ~ 495px (최소의 1.5배) 사이에서만 움직인다.
   · 소견 패널   — 남는 공간을 전부 가져간다(1fr). 최소 430px(툴바 한 줄).
   · 창을 줄이면 소견 패널이 먼저 줄고, 뷰포트가 최대→최소로 좁아진다.
     둘 다 하한에 닿으면 창이 더 줄지 않는다(가로 스크롤). */
#app {
  height: calc(100vh - var(--hdr-h));
  display: grid;
  grid-template-columns:
    var(--left-w)
    minmax(var(--center-min), var(--center-max))
    minmax(var(--right-min), 1fr);
  min-width: calc(var(--left-w) + var(--center-min) + var(--right-min));
}
.col { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
#col-left  { background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; }
#col-right { background: var(--surface); border-left: 1px solid var(--line); }
#col-center { background: #000; }

/* 좁은 화면 — 소견 패널이 하한에 가까워지면 글자를 줄여 표가 잘리지 않게 한다 */
@media (max-width: 1360px) {
  :root { --left-w: 190px; }
  #findings { font-size: 12px; }
  #findings table { font-size: 10.5px; }
  #findings th, #findings td { padding: 2px 5px; }
}
@media (max-width: 1180px) {
  :root { --left-w: 180px; }
  #findings { font-size: 11.5px; }
  #findings table { font-size: 10px; }
}

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px 4px;
}
/* 우측 패널 제목은 더 납작하게 — 본문에 자리를 넘긴다 */
#col-right .panel-head { padding: 6px 12px 3px; }
.panel-head h2 {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--text-3);
}
.chip {
  font-size: 10px; font-weight: 600; padding: 2.5px 7px; border-radius: 999px;
  background: var(--chip-bg); color: var(--accent-hi); border: 1px solid var(--line);
}
.chip.dim { color: var(--text-3); }

/* ── 좌측: 드롭존 ────────────────────────────────── */
/* 드롭존 — 세로 높이 80%로 축소 (아이콘·여백을 줄이고 지원 포맷은 툴팁으로) */
#dropzone {
  margin: 0 12px; padding: 10px 8px;
  border: 1.5px dashed var(--line); border-radius: var(--r-md);
  background: var(--surface-2);
  text-align: center; cursor: pointer;
  transition: border-color var(--t), background var(--t), transform var(--t);
}
#dropzone:hover, #dropzone:focus-visible { border-color: var(--accent-hi); background: var(--surface-3); }
#dropzone.drag { border-color: var(--accent-hi); background: var(--chip-bg); transform: scale(1.012); }
.dz-icon {
  width: 20px; height: 20px; margin-bottom: 3px;
  fill: none; stroke: var(--accent-hi); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.dz-main { font-size: 11px; color: var(--text); line-height: 1.4; }
.dz-main b { color: var(--accent-hi); font-weight: 600; }
.dz-sub { margin-top: 2px; font-size: 9px; color: var(--text-3); line-height: 1.35; }

.progress { height: 3px; margin: 6px 12px 0; background: var(--surface-3); border-radius: 2px; overflow: hidden; }
.progress .fill { height: 100%; width: 30%; background: var(--accent-hi); animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }

/* ── 좌측: 폼 (라벨-입력 가로 배치) ─────────────────
   좌측 패널이 208px 로 좁으므로 라벨·입력·라디오를 모두 타이트하게. 줄바꿈 금지. */
.form { padding: 0 12px; display: flex; flex-direction: column; gap: 4px; }
.field { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.field > span {
  flex: 0 0 44px; font-size: 10px; font-weight: 600; color: var(--text-2);
  line-height: 1.2; white-space: nowrap;
}
.field em { display: none; }          /* "(선택)" 은 툴팁으로만 (공간 절약) */
.field input[type="text"] {
  flex: 1; min-width: 0; padding: 4px 7px; font-size: 11.5px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--input-bg); color: var(--text);
  transition: border-color var(--t);
}
.field input[type="text"]:focus { outline: none; border-color: var(--accent-hi); }
.radios { flex: 1; display: flex; gap: 3px; min-width: 0; }
.radios label { flex: 1; min-width: 0; }
.radios input { position: absolute; opacity: 0; }
.radios i {
  display: block; text-align: center; font-style: normal; font-size: 10px;
  padding: 3px 0; border-radius: var(--r-sm); white-space: nowrap;
  border: 1px solid var(--line); background: var(--input-bg); color: var(--text-2);
  cursor: pointer; transition: all var(--t);
}
.radios input:checked + i {
  border-color: var(--accent-hi); background: var(--chip-bg); color: var(--accent-hi); font-weight: 600;
}
.radios input:focus-visible + i { outline: 2px solid var(--accent-hi); outline-offset: 1px; }

/* ── 좌측: 정보 ──────────────────────────────────── */
.kv { padding: 0 12px; display: flex; flex-direction: column; gap: 1px; }
.kv > div {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 4px 8px; border-radius: var(--r-sm); background: var(--surface-2);
}
.kv dt { font-size: 10.5px; color: var(--text-3); flex: none; }
.kv dd {
  font-size: 11px; font-weight: 600; text-align: right; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.phi-note {
  margin: 10px 12px 14px; padding: 7px 9px;
  font-size: 9.5px; line-height: 1.55; color: var(--text-3);
  background: var(--surface-2); border-left: 2px solid var(--teal); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.phi-note b { color: var(--text-2); }

/* ── 중앙: 뷰포트 ────────────────────────────────── */
#viewport { position: relative; flex: 1; min-height: 0; background: #000; overflow: hidden; }
#canvas { display: block; width: 100%; height: 100%; cursor: grab; }
#canvas.panning { cursor: grabbing; }
#canvas.wl { cursor: crosshair; }
/* 돋보기 활성 시 손 모양 커서를 없앤다 — 돋보기 원이 포인터를 대신한다.
   panning 보다 뒤에 두어 우선하게 한다. */
#canvas.mag { cursor: none; }
#canvas.hidden { display: none; }

#welcome {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
  gap: 12px; color: #4b5b6b; pointer-events: none;
}
.wc-icon { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 1.1; opacity: .55; }
#welcome p { font-size: 12.5px; }

.vp-overlay {
  position: absolute; font-size: 11px; font-weight: 600; line-height: 1.6;
  color: #8fd3ff; text-shadow: 0 1px 3px #000; pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.vp-overlay.tl { top: 10px; left: 12px; }
.vp-overlay.tr { top: 10px; right: 12px; text-align: right; }
.vp-overlay.bl { bottom: 10px; left: 12px; }
.vp-overlay.br { bottom: 10px; right: 12px; text-align: right; }

#magnifier {
  position: absolute; width: 270px; height: 270px; border-radius: 3px;
  border: 2px solid var(--accent-hi); box-shadow: 0 6px 26px rgba(0,0,0,.6);
  overflow: hidden; pointer-events: none; z-index: 5; background: #000;
}
#magnifier canvas { display: block; }
#magnifier .cross-h, #magnifier .cross-v { position: absolute; background: rgba(120,200,255,.55); }
#magnifier .cross-h { left: 0; right: 0; top: 50%; height: 1px; }
#magnifier .cross-v { top: 0; bottom: 0; left: 50%; width: 1px; }

/* ── 중앙: 툴바 ──────────────────────────────────── */
/* 툴바 — 타이트하게. 창이 좁아지면 줄바꿈 (가로 스크롤 대신) */
#toolbar {
  flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 3px 4px;
  padding: 4px 6px; background: var(--surface); border-top: 1px solid var(--line);
}
.tool-group { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.tool-sep { width: 1px; height: 15px; background: var(--line); flex: none; margin: 0 1px; }
.tool-label { font-size: 9.5px; color: var(--text-3); margin-right: 2px; }
.tbtn {
  min-width: 22px; height: 21px; padding: 0 5px;
  font-size: 11px; font-weight: 600; color: var(--text-2);
  border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2);
  transition: all var(--t); white-space: nowrap; line-height: 1;
}
/* 병변검출/병변위치 버튼 — "교육용"을 작은 배지처럼 붙여 폭을 줄인다 */
#xrv-open em, #loc-open em {
  font-style: normal; font-size: 8.5px; font-weight: 700; margin-left: 3px;
  padding: 1px 3px; border-radius: 3px; vertical-align: middle;
  background: var(--teal); color: #fff;
}
.tbtn:hover:not(:disabled) { border-color: var(--accent-hi); color: var(--accent-hi); }
.tbtn:disabled { opacity: .4; cursor: not-allowed; }
.tbtn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tool-hint {
  margin-left: auto; font-size: 10px; color: var(--text-3); white-space: nowrap;
}
.tool-hint b { color: var(--text-2); font-weight: 600; }

/* ── 우측: 옵션 ──────────────────────────────────── */
/* 옵션 한 줄 — 소견 영역의 세로 공간을 최대한 확보한다.
   패널이 좁아지면 줄바꿈해서 잘리지 않게 한다. */
#options {
  padding: 0 12px 5px; display: flex; align-items: center; flex-wrap: wrap; gap: 5px 6px;
  border-bottom: 1px solid var(--line-soft);
}
.seg {
  display: flex; padding: 2px; gap: 2px;
  background: var(--surface-3); border-radius: var(--r-sm); border: 1px solid var(--line);
}
.seg button {
  padding: 3.5px 7px; font-size: 11px; font-weight: 600; color: var(--text-2);
  border-radius: 4px; transition: all var(--t); white-space: nowrap;
}
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
#opt-purpose { flex: 1; }
#opt-purpose button { flex: 1; }

.switch { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; }
.switch .track {
  width: 30px; height: 17px; border-radius: 999px; flex: none;
  background: var(--surface-3); border: 1px solid var(--line);
  position: relative; transition: background var(--t), border-color var(--t);
}
.switch .knob {
  position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--text-3); transition: transform var(--t), background var(--t);
}
/* 마크업이 input → sw-label → track 순서라 인접(+) 대신 일반 형제(~)로 .track 을 잡아야 한다.
   (+ 였을 때 라벨이 사이에 껴서 체크 상태가 시각적으로 반영되지 않아 토글이 꺼진 채로 보였다) */
.switch input:checked ~ .track { background: var(--accent); border-color: var(--accent); }
.switch input:checked ~ .track .knob { transform: translateX(13px); background: #fff; }
.switch input:focus-visible ~ .track { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.sw-label { font-size: 11px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.sw-label em { font-style: normal; font-weight: 400; color: var(--text-3); }
.opt-hint { margin-left: auto; font-size: 9.5px; color: var(--text-3); white-space: nowrap; }

/* ── 우측: 분석 ──────────────────────────────────── */
.analyze-row { display: flex; gap: 5px; padding: 5px 12px 0; }
.analyze-row button { flex: 1; height: 26px; border-radius: var(--r-sm); font-weight: 700; font-size: 12px; transition: all var(--t); }
button.primary { background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
button.primary:hover:not(:disabled) { background: var(--accent-hi); }
button.primary:disabled { opacity: .42; cursor: not-allowed; }
button.danger { background: var(--danger); color: #fff; flex: 0 0 72px; }
kbd {
  font: inherit; font-size: 9.5px; font-weight: 600; opacity: .7;
  padding: 1px 4px; border-radius: 3px; background: rgba(255,255,255,.16); margin-left: 4px;
}
.stage {
  margin: 5px 12px 0; padding: 4px 8px; font-size: 10.5px; font-weight: 600;
  color: var(--accent-hi); background: var(--chip-bg);
  border-radius: var(--r-sm); border: 1px solid var(--line);
  display: flex; align-items: center; gap: 6px;
}
.stage .spin {
  width: 11px; height: 11px; flex: none; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent-hi);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 우측: 소견 ──────────────────────────────────── */
/* ── 편집 툴바 — 한 줄에 타이트하게 ── */
#edit-tools {
  flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  padding: 2px 8px; border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
}
#edit-tools button {
  min-width: 20px; height: 18px; padding: 0 4px;
  font-size: 10.5px; line-height: 1; color: var(--text-2);
  border: 1px solid transparent; border-radius: 4px;
  transition: all var(--t);
}
#edit-tools button:hover { background: var(--surface-3); border-color: var(--line); color: var(--accent-hi); }
#edit-tools button[data-cmd="removeFormat"] { font-size: 9.5px; font-weight: 600; padding: 0 5px; }
#edit-tools select {
  width: 54px; height: 18px; padding: 0 2px;
  font-size: 9.5px; line-height: 1;
  color: var(--text-2); background: var(--input-bg);
  border: 1px solid var(--line); border-radius: 4px;
  appearance: none; text-align: center;
}
/* AI 원본 / 편집됨 — 서식 해제 오른쪽 */
#edit-tools #edit-chip {
  margin-left: auto; font-size: 9.5px; padding: 1.5px 6px; white-space: nowrap;
}
#edit-tools .et-hint { margin-left: 4px; }
.et-sep { width: 1px; height: 13px; margin: 0 2px; background: var(--line); }
.et-color { position: relative; display: grid; place-items: center; cursor: pointer; }
.et-color input[type="color"] {
  position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer;
  border: none; padding: 0;
}
.et-swatch {
  display: grid; place-items: center; width: 20px; height: 18px;
  font-size: 10.5px; font-weight: 700; line-height: 1; border-radius: 4px;
  border: 1px solid var(--line); background: var(--input-bg);
}
.et-swatch.hl { color: #16202b; }
.et-hint {
  margin-left: auto; width: 14px; height: 14px; display: grid; place-items: center;
  font-size: 9px; font-weight: 700; color: var(--text-3);
  border: 1px solid var(--line); border-radius: 50%; cursor: help;
}

/* 소견 본문 — 우측 패널에서 가장 중요한 영역. 남는 세로 공간을 전부 가져간다. */
#findings-wrap {
  flex: 1 1 auto; min-height: 220px; overflow-y: auto; padding: 5px 12px 4px;
}
/* 정확히 3줄로 보이도록 각 줄을 nowrap 블록으로 (패널 폭이 바뀌어도 줄수가 흔들리지 않는다) */
.empty {
  height: 100%; display: grid; place-content: center; justify-items: center;
  text-align: center; font-size: 11.5px; line-height: 1.9; color: var(--text-3);
}
.empty span { display: block; white-space: nowrap; }
.empty b { color: var(--text-2); font-weight: 600; }

/* ── 소견 본문 (Markdown → HTML, 그대로 편집) ──
   PC 화면에서 스크롤 없이 최대한 많이 보이도록 줄간격·여백을 조인다. */
#findings {
  font-size: 12.5px; line-height: 1.5; color: var(--text);
  border-radius: var(--r-md); padding: 2px;
  outline: none; transition: box-shadow var(--t), background var(--t);
}
#findings.editable {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 8px 10px; cursor: text;
}
#findings.editable:focus-within { box-shadow: inset 0 0 0 1.5px var(--accent-hi); }

/* 편집됨 표시 */
.chip.edited {
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  color: var(--warn); border-color: var(--warn);
}

/* 헤딩에는 자동 번호를 붙이지 않는다 — 번호는 LLM 이 본문 계층에서 직접 붙인다.
   여기서 또 붙이면 이중으로 찍힌다. */
#findings h2, #findings h3, #findings h4 {
  font-size: 12px; font-weight: 700; color: var(--accent-hi);
  margin: 6px 0 2px; padding-bottom: 1px; border-bottom: 1px solid var(--line-soft);
}
#findings h2:first-child, #findings h3:first-child { margin-top: 0; }
#findings p { margin: 2px 0; }
#findings strong { font-weight: 600; color: var(--text); }
#findings em { font-style: italic; color: var(--text-2); }
#findings code {
  font-size: 11.5px; padding: 1px 5px; border-radius: 4px;
  background: var(--surface-3); color: var(--accent-hi);
}
/* 계층형 개조식 — 마커(1. / 가. / 1))는 **LLM 이 직접 붙인다.**
   우리가 CSS 카운터로 다시 붙이면 LLM 마커와 겹쳐 번호가 이중으로 찍힌다.
   여기서는 들여쓰기와 마커 정렬만 담당한다. */
#findings .outline { margin: 3px 0; }
#findings .ol-row {
  display: flex; gap: 5px; align-items: baseline;
  margin: 1px 0; line-height: 1.5;
}
#findings .ol-mark { flex: none; color: var(--text-3); font-weight: 600; min-width: 15px; }
#findings .ol-text { flex: 1; min-width: 0; }
#findings .ol-row.d1 { padding-left: 18px; }
#findings .ol-row.d2 { padding-left: 36px; }
#findings .ol-row.d3 { padding-left: 54px; }

/* 일반 목록(중첩 아님) */
#findings ul, #findings ol { margin: 2px 0; padding-left: 20px; }
#findings li { margin: 0; }

#findings hr { margin: 6px 0; border: none; border-top: 1px solid var(--line); }

/* ⚠ 응급 소견 — 제목만이 아니라 그 섹션의 내용까지 적색으로. 즉시 눈에 띄어야 한다. */
#findings p.alert {
  margin: 5px 0; padding: 6px 9px; font-weight: 600; color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-left: 3px solid var(--danger); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
#findings h3.alert, #findings h4.alert {
  color: var(--danger); border-bottom-color: var(--danger);
}
#findings h3.alert::before, #findings h4.alert::before { color: var(--danger); }
#findings ul.alert, #findings ol.alert {
  margin: 4px 0; padding: 5px 9px 5px 26px; color: var(--danger); font-weight: 600;
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border-left: 3px solid var(--danger); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
#findings ul.alert strong, #findings ol.alert strong { color: var(--danger); }

#findings table {
  width: 100%; border-collapse: collapse; margin: 5px 0;
  font-size: 11.5px; table-layout: auto;
}
#findings th, #findings td {
  border: 1px solid var(--line); padding: 3px 7px; text-align: left; vertical-align: top;
  line-height: 1.45;
}
#findings th {
  background: var(--surface-3); font-weight: 600; color: var(--text-2);
  font-size: 11px; white-space: nowrap;
}
#findings td:focus { outline: 2px solid var(--accent-hi); outline-offset: -2px; }

/* 옵션 비활성 (분석 중) */
#options.disabled { opacity: .5; pointer-events: none; }

.disclaimer {
  flex: none; margin: 0 12px; padding: 4px 8px;
  font-size: 9px; line-height: 1.45; color: var(--text-2);
  background: var(--surface-2); border-left: 2.5px solid var(--danger);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.export-row { flex: none; display: flex; flex-wrap: wrap; gap: 5px; padding: 5px 12px 7px; }
.export-row button {
  flex: 1 1 96px; height: 25px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text-2); transition: all var(--t);
}
.export-row button:hover:not(:disabled) { border-color: var(--accent-hi); color: var(--accent-hi); }
.export-row button:disabled { opacity: .4; cursor: not-allowed; }
.export-row button.accent { background: var(--teal); border-color: var(--teal); color: #fff; }
.export-row button.accent:hover:not(:disabled) { filter: brightness(1.1); color: #fff; }

/* ── 토스트 ──────────────────────────────────────── */
#toasts {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 7px; z-index: 100; pointer-events: none;
}
.toast {
  padding: 9px 15px; border-radius: var(--r-md); font-size: 12.5px; font-weight: 600;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-left: 3px solid var(--accent-hi);
  box-shadow: var(--shadow); animation: pop .22s cubic-bezier(.2,1.3,.4,1);
  max-width: 520px;
}
.toast.err { border-left-color: var(--danger); }
.toast.ok  { border-left-color: var(--ok); }
@keyframes pop { from { opacity: 0; transform: translateY(9px); } }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }