/* 화면 공통 스타일 — 색·모서리·그림자는 **shadcn(slate, 라이트 한 벌)** 토큰을 쓴다.
   가져온 것은 CSS 변수와 컴포넌트의 생김새뿐이다. React·빌드 도구는 넣지 않았다.
   ⚠️ 이모지를 쓰지 않는다. 표시는 문자·도형·색으로만 한다.

   변수는 두 층이다.
     ① shadcn 토큰 — `--background` `--foreground` `--primary` `--destructive` …
     ② 예전 이름 — `--diff` `--similar` `--line` `--bg-soft` … **지우지 않고** ①을 가리킨다.
        크롭 위 SVG 상자·접점이 이 이름들로 색을 받는다(`.ovl .bx{stroke:var(--diff)}`).
   `--accent` 는 예전부터 **진한 강조색**(흰 글자를 얹는 바탕)으로 쓰여 왔다. shadcn 의
   `--accent`(옅은 면)와 뜻이 충돌하므로, 옅은 면은 `--secondary` 로만 부르고
   `--accent` 는 예전 뜻 그대로 `--primary` 를 가리키게 둔다. */
:root{
  /* ── shadcn slate (light) ──────────────────────────────── */
  --background:#ffffff;
  --foreground:#020617;
  --card:#ffffff;
  --card-foreground:#020617;
  --popover:#ffffff;
  --popover-foreground:#020617;
  --primary:#0f172a;
  --primary-foreground:#f8fafc;
  --secondary:#f1f5f9;
  --secondary-foreground:#0f172a;
  --muted:#f1f5f9;
  --muted-foreground:#64748b;
  --destructive:#dc2626;
  --destructive-foreground:#f8fafc;
  --border:#e2e8f0;
  --input:#e2e8f0;
  --ring:#94a3b8;
  --shadow-xs:0 1px 2px 0 rgb(2 6 23 / .05);
  --shadow-sm:0 1px 3px 0 rgb(2 6 23 / .07), 0 1px 2px -1px rgb(2 6 23 / .07);

  /* ── 판정 다섯 + 경고 ──────────────────────────────────────
     배경만으로 구별하지 않는다 — 글자색까지 다르게 둔다(색약·인쇄 대비).
     글자색 명도 순서: DIFF(적700) · SAME(녹700) · SIMILAR(청700) · NO_VALUE(보라700) ·
     ONE_SIDE(회색600, 채도 0에 가깝다). */
  --diff:#b91c1c;    --diff-bg:#fee2e2;    --diff-line:#fca5a5;     /* destructive 계열 */
  --ok:#15803d;      --ok-bg:#dcfce7;      --ok-line:#86efac;       /* SAME */
  --similar:#1d4ed8; --similar-bg:#dbeafe; --similar-line:#93c5fd;  /* SIMILAR */
  --info:#6d28d9;    --info-bg:#ede9fe;    --info-line:#c4b5fd;     /* NO_VALUE */
  --neutral:#475569; --neutral-bg:#f1f5f9; --neutral-line:#cbd5e1;  /* ONE_SIDE */
  --warn:#b45309;    --warn-bg:#fef3c7;    --warn-line:#fcd34d;     /* 경고 */

  /* ── 예전 이름 (지우지 않는다 — 위 토큰을 가리킨다) ───────────── */
  --fg:var(--foreground); --fg-mute:var(--muted-foreground); --fg-faint:#94a3b8;
  --bg:var(--background); --bg-soft:var(--muted); --bg-hover:#f8fafc;
  --line:var(--border); --line-strong:#cbd5e1;
  --accent:var(--primary);

  --radius:8px; --radius-sm:6px; --radius-lg:10px;
  --gap:12px; --page:1200px;
  --font:15px/1.65 system-ui,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font:var(--font);color:var(--fg);background:var(--bg);
     -webkit-font-smoothing:antialiased}
/* 초점 테두리 — shadcn 의 ring. 두께로 자리를 밀지 않게 box-shadow 로 그린다. */
:where(button,input,select,a,[tabindex]):focus-visible{outline:none;
  box-shadow:0 0 0 3px rgb(148 163 184 / .45)}

/* ── 뼈대 : 헤더는 전체 폭, 내용은 가운데 한 컨테이너 ───────────── */
.wrap{max-width:var(--page);margin:0 auto;padding:0 24px}
header{border-bottom:1px solid var(--line);background:var(--bg);
       position:sticky;top:0;z-index:10}
header .wrap{display:flex;align-items:center;gap:20px;height:56px}
.brand{font-weight:700;font-size:16px;color:var(--fg);text-decoration:none;white-space:nowrap;
       letter-spacing:-.2px}
/* 탭 — shadcn Tabs: 옅은 홈 안에서 고른 것만 흰 카드로 떠오른다 */
nav{display:flex;gap:2px;background:var(--muted);border-radius:var(--radius);padding:3px}
nav:empty{display:none}          /* 업로드 화면에는 탭이 없다 — 빈 홈만 남으면 안 된다 */
nav a{color:var(--muted-foreground);text-decoration:none;font-size:14px;font-weight:500;
      padding:4px 12px;border-radius:var(--radius-sm);white-space:nowrap}
nav a:hover{color:var(--foreground);text-decoration:none}
nav a.on{color:var(--foreground);font-weight:700;background:var(--background);
         box-shadow:var(--shadow-xs)}
.grow{flex:1}
main{padding:28px 0 56px}
footer{border-top:1px solid var(--line);padding:18px 0 40px;color:var(--fg-mute);font-size:13px}
footer .wrap{max-width:var(--page)}

h1{font-size:22px;margin:0 0 6px;letter-spacing:-.2px}
h2{font-size:16px;margin:32px 0 10px;letter-spacing:-.1px}
h3{font-size:14px;margin:0}
.sub{color:var(--fg-mute);font-size:13px}
section, .block{margin-bottom:32px}
a{color:var(--similar)}
a:hover{text-decoration:underline}

/* ── 표 ────────────────────────────────────────────────────── */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);
           background:var(--card);box-shadow:var(--shadow-xs)}
table{border-collapse:collapse;font-size:14px;width:100%}
th,td{padding:10px 12px;text-align:left;vertical-align:top;
      border-bottom:1px solid var(--line)}
th{background:var(--muted);color:var(--muted-foreground);font-weight:600;white-space:nowrap;
   border-bottom:1px solid var(--line-strong);position:sticky;top:0}
th[data-sort]{cursor:pointer;user-select:none}
th[data-sort]:hover{color:var(--fg)}
tbody tr:last-child td{border-bottom:0}
tr.clickable{cursor:pointer}
tbody tr:hover{background:var(--bg-hover)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.c{text-align:center}
tr.hot{background:#fef2f2}
tr.hot:hover{background:#fde8e8}
td.actions{text-align:right;white-space:nowrap;width:1%}
.zero{color:var(--fg-faint)}
.count-bad{color:var(--diff);font-weight:700}

/* ── 버튼·입력 ─────────────────────────────────────────────
   기본 = shadcn outline · .primary = default(진한 면) · .secondary = 조용한 면 */
button{font:inherit;font-size:14px;font-weight:500;padding:7px 14px;
       border:1px solid var(--input);border-radius:var(--radius-sm);
       background:var(--background);color:var(--fg);cursor:pointer;
       box-shadow:var(--shadow-xs);transition:background-color .12s,border-color .12s,color .12s}
button:hover:not(:disabled){background:var(--secondary);border-color:var(--line-strong)}
button.primary{background:var(--primary);color:var(--primary-foreground);
               border-color:var(--primary)}
button.primary:hover:not(:disabled){background:#1e293b;border-color:#1e293b}
button.secondary{background:var(--secondary);color:var(--muted-foreground);
                 border-color:transparent;box-shadow:none}
button.secondary:hover:not(:disabled){background:#e2e8f0;color:var(--foreground);
                                      border-color:transparent}
button.small{padding:4px 10px;font-size:13px}
button:disabled{opacity:.5;cursor:not-allowed;background:var(--muted);color:var(--fg-faint);
                border-color:var(--border);box-shadow:none}
input[type=text],select{font:inherit;font-size:14px;padding:6px 9px;
       border:1px solid var(--input);border-radius:var(--radius-sm);
       background:var(--background);color:var(--fg);box-shadow:var(--shadow-xs)}
input[type=text]::placeholder{color:var(--fg-faint)}
input[type=text]:hover,select:hover{border-color:var(--line-strong)}
select{cursor:pointer}
label{cursor:pointer;user-select:none}
/* 체크박스 — 네이티브를 그대로 두되 shadcn 의 진한 면으로 칠한다(DOM 을 안 바꾼다) */
input[type=checkbox]{cursor:pointer;margin-right:4px;vertical-align:-1px;
       width:14px;height:14px;accent-color:var(--primary)}
.filters{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:16px 0}

/* ── 배지 ─────────────────────────────────────────────────
   테두리는 inset box-shadow 로 그린다 — 실제 높이를 늘리지 않는다(표가 안 흔들린다). */
.badge{display:inline-block;min-width:22px;padding:1px 7px;border-radius:var(--radius-sm);
       font-size:12px;font-weight:700;line-height:18px;text-align:center}
.badge.yes{background:var(--ok-bg);color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok-line)}
.badge.part{background:var(--warn-bg);color:var(--warn);box-shadow:inset 0 0 0 1px var(--warn-line)}
.badge.miss{background:var(--muted);color:var(--fg-faint);box-shadow:inset 0 0 0 1px var(--border)}
.badge.unknown{background:var(--info-bg);color:var(--info);box-shadow:inset 0 0 0 1px var(--info-line)}
.v{display:inline-block;padding:1px 8px;border-radius:var(--radius-sm);font-size:12px;
   font-weight:700;letter-spacing:.1px}
.v.DIFF{background:var(--diff-bg);color:var(--diff);box-shadow:inset 0 0 0 1px var(--diff-line)}
.v.SIMILAR{background:var(--similar-bg);color:var(--similar);
           box-shadow:inset 0 0 0 1px var(--similar-line)}
.v.SAME{background:var(--ok-bg);color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok-line)}
.v.ONE_SIDE{background:var(--neutral-bg);color:var(--neutral);
            box-shadow:inset 0 0 0 1px var(--neutral-line)}
.v.NO_VALUE{background:var(--info-bg);color:var(--info);box-shadow:inset 0 0 0 1px var(--info-line)}
.st{display:inline-block;font-weight:700;font-size:13px}
.st.done{color:var(--fg-mute)} .st.failed{color:var(--diff)}
.st.running{color:var(--similar)} .st.queued{color:var(--fg-faint)}
.sev.FATAL,.sev.ERROR{color:var(--diff);font-weight:700}
.sev.WARN{color:var(--warn);font-weight:700}
.err{color:var(--diff);font-weight:700}
/* 좁은 폭에서 이 칸이 한 글자씩 접혀 행이 세로로 늘어난다 — 최소 폭을 줘서
   표가 접히는 대신 가로로 스크롤되게 한다(.tablewrap). */
.note{color:var(--info);min-width:190px}

/* ── 요약 카드 ─────────────────────────────────────────────── */
.cards{display:flex;gap:var(--gap);flex-wrap:wrap;margin:18px 0 4px}
.card{border:1px solid var(--line);border-radius:var(--radius-lg);padding:10px 16px;
      min-width:118px;background:var(--card);color:var(--card-foreground);
      box-shadow:var(--shadow-xs)}
.card b{display:block;font-size:22px;line-height:1.25;font-variant-numeric:tabular-nums}
.card span{color:var(--fg-mute);font-size:12px}
.card.DIFF b{color:var(--diff)} .card.SIMILAR b{color:var(--similar)}
.card.SAME b{color:var(--ok)} .card.NO_VALUE b{color:var(--info)}
.card.q b{color:var(--info)}

/* ── 업로드 ───────────────────────────────────────────────── */
.drops{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin:18px 0}
.drop{border:1px dashed var(--line-strong);border-radius:var(--radius-lg);padding:14px 16px;
      display:flex;flex-direction:column;min-height:210px;background:var(--card)}
.drop.over{border-color:var(--primary);border-style:solid;background:var(--secondary)}
.drop.filled{border-color:var(--ok);border-style:solid}
.drop .head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.drop .cnt{font-size:12px;color:var(--fg-mute)}
.drop .hint{color:var(--fg-mute);font-size:12px;margin:2px 0 10px}
.drop input[type=file]{font-size:13px;width:100%;color:var(--fg-mute)}
.drop input[type=file]::file-selector-button{font:inherit;font-size:12.5px;font-weight:500;
       margin-right:8px;padding:4px 10px;border:1px solid var(--input);
       border-radius:var(--radius-sm);background:var(--background);color:var(--fg);
       cursor:pointer;box-shadow:var(--shadow-xs)}
.drop input[type=file]::file-selector-button:hover{background:var(--secondary)}
.drop .files{margin:10px 0 0;padding:0;list-style:none;overflow:auto;flex:1;
             border-top:1px dashed var(--line);padding-top:8px}
.drop .files li{font-size:12.5px;padding:2px 0;color:var(--fg);
                white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drop .files li.bad{color:var(--diff)}
.drop .files .empty{color:var(--fg-faint)}

/* ── 진행 ─────────────────────────────────────────────────── */
.bar{height:8px;background:var(--muted);border:1px solid var(--line);
     border-radius:5px;overflow:hidden;max-width:640px;margin:6px 0 12px}
.bar>i{display:block;height:100%;background:var(--primary)}
.steps{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;max-width:900px;
       background:var(--card);box-shadow:var(--shadow-xs)}
.steps .row{display:grid;grid-template-columns:88px 116px 1fr 64px;gap:10px;
            padding:9px 14px;border-bottom:1px solid var(--line);align-items:baseline}
.steps .row:last-child{border-bottom:0}
.steps .code{color:var(--fg-mute);font-size:13px}
.steps .counts{color:var(--fg-mute);font-size:12.5px}
.steps .secs{text-align:right;color:var(--fg-mute);font-size:12.5px;
             font-variant-numeric:tabular-nums}

/* ── 장비 상세 : 위(이미지 고정) / 아래(표 스크롤) 분할 ─────────────
   행을 누를 때마다 위로 스크롤하지 않아도 되게, 이미지 영역을 화면에 고정하고
   표만 자체 스크롤한다. 사이의 손잡이로 비율을 바꾸고 localStorage 에 남긴다. */
.split{display:flex;flex-direction:column;min-height:320px}
.split .filters{margin:6px 0 10px}
.split-top{display:flex;flex-direction:column;overflow:hidden;min-height:200px}
.split-top .stagehost{flex:1;min-height:0;overflow:auto}
/* 높이 사슬 — 이 중 하나라도 auto 면 이미지 칸이 위쪽 영역을 안 채운다 */
.split-top .stagehost > .block{height:100%;margin:0}
.split-handle{height:10px;flex:0 0 10px;cursor:row-resize;background:var(--muted);
              border-top:1px solid var(--line);border-bottom:1px solid var(--line);
              margin:6px 0;border-radius:3px}
.split-handle:hover{background:#e2e8f0}
.split-handle::after{content:'';display:block;width:44px;height:2px;background:var(--line-strong);
                     margin:4px auto;border-radius:1px}
.split-bot{flex:1;min-height:120px;overflow:auto}
.split-bot .block{margin-bottom:18px}
.split-bot h2{margin-top:10px}
/* 분할 안에서는 이미지 칸이 위쪽 영역을 채운다 (격자·3열은 스크롤) */
.split .panes.two, .split .panes.single{height:100%;align-content:stretch}
.split .panes.two .pane, .split .panes.single .pane{display:flex;flex-direction:column;
                                                    min-height:0;height:100%}
.split .panes.two .stage, .split .panes.single .stage{flex:1;min-height:120px;height:auto}

/* ── 장비 상세 : 크롭 보기 ────────────────────────────────────
   pane 하나 = 머리(선택·배율) + stage(잘라내는 창) + canvas(이미지+SVG 오버레이).
   확대·이동은 canvas 에 transform 으로 건다 — 상자가 같이 움직인다. */
.segmented{display:inline-flex;border:1px solid var(--input);border-radius:var(--radius-sm);
           overflow:hidden;box-shadow:var(--shadow-xs)}
.segmented .seg{border:0;border-right:1px solid var(--line);border-radius:0;
                background:var(--background);box-shadow:none}
.segmented .seg:last-child{border-right:0}
.segmented .seg:hover:not(:disabled){background:var(--secondary)}
.segmented .seg.on{background:var(--primary);color:var(--primary-foreground)}
.segmented .seg.on:hover:not(:disabled){background:#1e293b}
.panes{display:grid;gap:var(--gap);align-items:start}
.panes.two{grid-template-columns:repeat(auto-fit,minmax(420px,1fr))}
.panes.single{grid-template-columns:1fr}
.panes.grid{grid-template-columns:repeat(auto-fit,minmax(460px,1fr))}
.panes.three{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.srccol{display:flex;flex-direction:column;gap:var(--gap)}
.srccol h3{padding:2px 0;color:var(--fg-mute)}
.pane{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
      background:var(--card);box-shadow:var(--shadow-xs)}
.panehead{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--muted);
          border-bottom:1px solid var(--line);flex-wrap:wrap}
.panehead select{max-width:340px;font-size:13px}
.zoomtxt{font-variant-numeric:tabular-nums;min-width:44px;color:var(--fg-mute);font-size:13px}
.stage{position:relative;overflow:hidden;height:420px;background:#fff;cursor:grab;
       touch-action:none}
.panes.single .stage{height:640px}
.panes.three .stage{height:320px}
.stage.grabbing{cursor:grabbing}
.canvas{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.canvas img{display:block;width:100%;height:100%}
/* ⚠️ height:100% 는 부모(.canvas) 높이가 auto 라 0 으로 풀린다 — 상자가 안 보인다.
   inset:0 으로 네 변을 물려 실제 높이를 갖게 한다(실측 2026-09-02). */
.ovl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ovl .bx{fill:rgba(29,78,216,.16);stroke:var(--similar);stroke-width:1.5px}
.ovl .bx.DIFF{fill:rgba(185,28,28,.16);stroke:var(--diff)}
/* 센 대상(개수·집합의 근거) — 여러 개가 한꺼번에 뜨므로 옅게 */
.ovl .bx.dim{fill:rgba(100,116,139,.10);stroke:#94a3b8;stroke-dasharray:3 2}
.meta{padding:8px 12px;font-size:12px;color:var(--fg-mute);word-break:break-all;
      border-top:1px solid var(--line)}
/* 크롭이 원본 그림인지 토큰으로 다시 그린 그림인지 — 소스마다 다르므로 밝힌다 */
.meta .mode{padding:1px 6px;border-radius:var(--radius-sm);font-size:11px;
            border:1px solid var(--line)}
.meta .mode.native{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.meta .mode.rebuilt{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
/* 문자 단위 차이 — 배경색만 쓴다. 밑줄·굵게를 겹치면 읽기 어려워진다. */
mark.d{padding:0 1px;border-radius:2px;background:none;color:inherit}
mark.d.DIFF{background:var(--diff-bg);color:var(--diff)}
mark.d.SIMILAR{background:var(--warn-bg);color:var(--warn)}
/* 기하 접점 — 값 상자(사각형)와 구분되게 원으로. 표기 있으면 채운 원 + 값. */
.ovl .ct circle{fill:#fff;fill-opacity:.75;stroke:#64748b;stroke-width:1.5px}
.ovl .ct text.num{fill:#334155;text-anchor:middle;font-weight:700}
.ovl .ct text.val{fill:#b45309;font-weight:700}
.ovl .ct.has circle{fill:#fef3c7;fill-opacity:.95;stroke:#d97706}
.ovl .ct.has text.num{fill:#b45309}
.ovl .ct.on circle{stroke-width:2.5px;stroke:#1d4ed8}
.ovl .ct{pointer-events:auto;cursor:pointer}
tr.picked{outline:2px solid var(--similar);outline-offset:-2px}
.labels{position:absolute;inset:0;pointer-events:none}
.lab{position:absolute;font-size:11px;line-height:15px;padding:0 4px;border-radius:3px;
     white-space:nowrap;border:1px solid;background:#fff}
.lab.DIFF{color:var(--diff);border-color:var(--diff-line)}
.lab.SIMILAR{color:var(--warn);border-color:var(--warn-line)}
.strip{grid-column:1/-1;display:flex;gap:8px;overflow-x:auto;padding:8px 0}
.thumb{height:64px;border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;
       background:#fff}
.thumb.on{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.fullscreen{position:fixed;inset:0;background:rgba(2,6,23,.9);z-index:100;overflow:auto;
            padding:24px;cursor:zoom-out}
.fullbox{background:#fff;display:inline-block;min-width:100%}
.fullbox img{display:block}
.fshint{position:fixed;left:0;right:0;bottom:12px;text-align:center;color:#fff;font-size:13px}

@media (max-width:900px){
  .drops{grid-template-columns:1fr}
  header .wrap{gap:12px}
  .wrap{padding:0 16px}
}

/* 진행 중인 단계 — 실제 개수로 채우는 막대 + 은은한 줄무늬 (가짜 진행이 아니다) */
.steps .row.live{background:#f8fafc}
.stepbar{grid-column:1 / -1;height:4px;border-radius:2px;background:var(--border);
         overflow:hidden;margin:4px 0 2px}
.stepbar i{display:block;height:100%;background:var(--primary);
           background-image:linear-gradient(90deg,rgba(255,255,255,.35) 25%,
             transparent 25%,transparent 50%,rgba(255,255,255,.35) 50%,
             rgba(255,255,255,.35) 75%,transparent 75%);
           background-size:16px 16px;animation:flow 1.4s linear infinite;
           transition:width .4s ease}
@keyframes flow{to{background-position:16px 0}}
@media (prefers-reduced-motion: reduce){.stepbar i{animation:none}}

/* ── 표 확인(반려) 카드 — 크롭이 크게 보여야 사람이 한눈에 아니라고 할 수 있다 */
.cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 10px;
  background: var(--card); box-shadow: var(--shadow-xs); }
.card .chead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.card img.crop { width: 100%; max-height: 320px; object-fit: contain; object-position: top;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; margin: 6px 0; }
.card .bases { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.card .tagchip { border: 1px solid var(--border); border-radius: 999px; padding: 0 7px;
  font-size: 11px; background: var(--muted); color: var(--muted-foreground); }
.card button.no { width: 100%; margin-top: 6px; }
.card button.no:hover { border-color: var(--destructive); color: var(--destructive);
  background: var(--diff-bg); }
/* 숨긴 실행 — 옅게, 그러나 읽히게 */
tr.hiddenrun td { opacity: .45; }

/* 파일 목록 — 이름 + [×] */
.drop .files li { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.drop .files li .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop .files li button.x { border: 0; background: none; cursor: pointer; color: var(--fg-mute);
  font-size: 15px; line-height: 1; padding: 0 3px; box-shadow: none; }
.drop .files li button.x:hover { color: var(--diff); background: none; }
.drop .cnt.dup { color: var(--diff); }
#proj { padding: 5px 8px; border: 1px solid var(--input); border-radius: var(--radius-sm);
  min-width: 190px; background: var(--background); box-shadow: var(--shadow-xs); }
/* 목록 체크박스 */
td.pick, th:first-child { width: 26px; }
/* 관문 안내 */
.wait { display: inline-block; background: var(--similar-bg); color: var(--similar);
  border-radius: var(--radius-sm); padding: 3px 8px; margin: 4px 6px 4px 0;
  box-shadow: inset 0 0 0 1px var(--similar-line); }
.st.awaiting_review { background: var(--similar-bg); color: var(--similar);
  border-radius: var(--radius-sm); padding: 1px 6px; }
.empty-why { border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); padding: 16px;
  background: var(--muted); }
.empty-why .sub { margin-top: 6px; }

/* 판독 0 사유 배지 — 고장처럼 보이지 않게 이유를 붙인다 */
.wait.readgap { display: block; margin: 8px 0; background: var(--similar-bg);
  color: var(--similar); line-height: 1.5; }

/* 읽지 못한 호칭경 표기 카드 — 그림이 없으므로 글자를 크게 */
.card.size .chead b { font-size: 17px; }
.card.size { min-height: 120px; }