/* ──────────────────────────────────────────────────────────────
   허위·과장 광고 탐지 화면 (L3)
   - 전제: design-system/krds.css → roles.css → components.css 순서로 먼저 불러온다. <html data-density="work">
   - 치수는 roles.css 역할 토큰만 쓴다. 색은 krds의 뜻 이름(fg·bg·border·action·status)과 roles의 면·선 이름을 쓴다.
     리터럴 px는 화면 폭 전환 조건(@media)에만 있고, 값은 roles.css 중단점 등록부에 있는 것만 쓴다.
   - 표면 층은 Insight-Note(Files·Admin·Settings)와 민원AI(Card·Panel·PanelHead)를 따른다.
     바탕은 움푹 면, 상단 바는 흰 크롬, 읽을 내용은 모두 흰 패널 위에 둔다. 패널 안은 머리 띠·채움 면·구분선으로만 나누고
     패널 안에 패널을 다시 넣지 않는다.
   - 「KRDS 컴포넌트」 구획은 KRDS 컴포넌트 견본집(shared/design-system/docs/research/krds-extensions-2026-09-27/
     components/css)의 형태와 값을 옮긴 것이다. 견본집이 components.css로 승격되면 이 구획을 지우고 공용 클래스로 바꾼다.
     기준과 다르게 둔 곳은 docs/ui-redesign.md 차이표에 적었다.
   ────────────────────────────────────────────────────────────── */

[hidden] { display: none !important; }
html { scrollbar-gutter: stable; }
html, body { background: var(--surface-sunken); }
body {
  /* 상단 높이(--bar-h, --top-h)와 패널 헤더 높이(--head-h)는 이 제품의 역할 파일 product-roles.css에 있다(WORK_UI_PATTERNS 7) */
  font-size: var(--type-body); line-height: var(--type-body-lh); color: var(--color-fg-primary);
  word-break: keep-all; overflow-wrap: anywhere;
}
ol, ul { list-style: none; }
.sr-only { position: absolute; width: var(--line); height: var(--line); margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* 줄이 바뀔 수 있는 문구 옆 아이콘은 첫 줄 높이 칸 안에서 가운데에 둔다(ICON_GUIDE 5.5) */
.ico-slot { display: inline-flex; align-items: center; height: 1lh; flex-shrink: 0; }

/* ══ KRDS 컴포넌트 (견본집에서 옮김) ══════════════════════════ */

/* 버튼(KRDS 05_02): components.css .btn의 색 위계를 쓰고 치수는 역할 값, 글자 굵기는 KRDS 보통 굵기로 맞춘다 */
.btn { height: var(--ctl-h-md); padding: 0 var(--ctl-pad-x); gap: var(--ctl-gap); font-size: var(--ctl-font); font-weight: normal; line-height: 1; border-radius: var(--radius-control); white-space: nowrap; flex-shrink: 0; }
.btn .ms { font-size: var(--icon-inline); }
.btn-sm { height: var(--ctl-h-xs); padding: 0 var(--ctl-pad-x-sm); font-size: var(--ctl-font-sm); }
.btn-lg { height: var(--ctl-h-lg); }
.btn-xl { height: var(--ctl-h-xl); padding: 0 var(--space-section); }
.btn-secondary { border: var(--line) solid var(--color-border-default); color: var(--color-fg-primary); }
.btn-secondary:active { background: var(--hover-surface); }
.btn-ghost { color: var(--color-fg-secondary); }
/* 비활성: 흐리게 하지 않고 회색 면·회색 테두리·회색 글자 */
.btn:disabled, .btn:disabled:hover { background: var(--color-bg-muted); color: var(--color-fg-disabled); border: var(--line) solid var(--color-border-subtle); cursor: not-allowed; }
/* 진행 중: 글자 자리와 폭을 그대로 두고 표시만 돈다 */
.btn[aria-busy="true"] { position: relative; color: transparent; cursor: progress; }
.btn[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; margin: auto; width: var(--icon-inline); height: var(--icon-inline); border: var(--line-strong) solid var(--divider-strong); border-top-color: var(--color-action-primary); border-radius: 50%; animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 셀렉트(KRDS 06_03, WORK_UI_PATTERNS 2): 네이티브 select에 공용 셰브론 하나. 정본은 Insight-Note Admin.html .filter-select이고
   치수는 roles --select-*다. 초점은 테두리 주색과 옅은 면 한 겹만 쓰고, components.css의 전역 외곽선을 겹치지 않는다(FORM_GUIDE) */
select.field {
  width: auto; height: var(--select-h); min-width: var(--select-min-w); max-width: 100%;
  padding: 0 var(--select-pad-r) 0 var(--select-pad-l);
  border: var(--line) solid var(--select-border); border-radius: var(--radius-control);
  font-size: var(--ctl-font); color: var(--color-fg-secondary); background-color: var(--surface-page); text-overflow: ellipsis;
}
select.field option { color: var(--color-fg-primary); }
/* 초점은 KRDS 그대로 주색 테두리 2, 바깥 배경 없음(shared 결정 30 C안, 2026-10-12, FORM_GUIDE). shared components.css의 .field:focus와 같게 테두리 1에 안쪽 선 1을 더한다. 자리는 움직이지 않고 외곽선은 겹치지 않는다 */
select.field:focus, select.field:focus-visible { border-color: var(--color-action-primary); outline: none; box-shadow: inset 0 0 0 var(--line) var(--color-action-primary); }

/* 폼 그룹(KRDS form-group): 라벨 → 입력 → 도움말 순서. 라벨은 입력 바로 위에 붙인다 */
.form-field { display: flex; flex-direction: column; gap: var(--space-field); min-width: 0; }
.form-label-row { display: flex; align-items: center; gap: var(--space-stack); min-height: var(--ctl-h-xs); }
.form-label { font-size: var(--type-label); font-weight: var(--type-label-weight); color: var(--color-fg-tertiary); }
.form-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-stack); }
/* 폼 값을 고르는 셀렉트는 값이 본문색이다(견본집 .c-select.form). 같은 줄 버튼과 높이가 같다 */
.form-row select.field { color: var(--color-fg-primary); }
.form-row .btn { height: var(--select-h); }
.form-hint { color: var(--color-fg-secondary); }

/* 안내 상자(KRDS 04_02): 선 없이 면으로, 앞 낱말로도 종류를 알린다. 한 줄 자리는 작은 버튼 높이라 버튼이 있든 없든 높이가 같다 */
.notice { display: flex; align-items: flex-start; gap: var(--space-stack); padding: var(--space-stack) var(--ctl-pad-x); border-radius: var(--radius-control); background: var(--surface-sunken); min-width: 0; }
.notice > .ico-slot { height: var(--ctl-h-xs); color: var(--color-fg-tertiary); }
.notice > .ico-slot > .ms { font-size: var(--icon-inline); }
.notice-body { flex: 1 1 auto; min-width: 0; padding-block: var(--notice-pad-y); }
.notice-body b { font-weight: var(--weight-strong); margin-right: var(--space-stack); }
.notice-act { flex: none; }
.notice.warn { background: var(--status-warning-surface); }
.notice.warn > .ico-slot { color: var(--color-status-warning); }

/* 배지(KRDS 04_06): 모양(높이 24, 모서리 4, 보통 굵기, 글자 크기)은 shared components.css의 .badge를 그대로 쓴다(결정 37, 2026-10-15).
   여기서는 톤이 없을 때의 옅은 회색, 이 레포가 쓰는 data-tone 속성과 공유 배지 색 역할의 연결, 아이콘 크기만 둔다. 공유 클래스(.badge-danger 등)로 바꿀지는 결정 문서 D-17 */
.badge { background: var(--badge-bg-muted); color: var(--badge-fg-muted); }
.badge .ms { font-size: var(--icon-xs); }
.badge[data-tone="err"] { background: var(--badge-bg-err); color: var(--badge-fg-err); }
.badge[data-tone="warn"] { background: var(--badge-bg-warn); color: var(--badge-fg-warn); }
.badge[data-tone="ok"] { background: var(--badge-bg-ok); color: var(--badge-fg-ok); }
.badge[data-tone="info"] { background: var(--badge-bg-info); color: var(--badge-fg-info); }

/* 값 표식: AI가 정한 값과 사람이 고친 값을 구분한다. 좌측 선으로 구분하지 않는다 */
.mark { display: inline-flex; align-items: center; gap: var(--space-inline); height: var(--icon); padding: 0 var(--space-inline); border-radius: var(--radius-badge); font-size: var(--type-meta); font-weight: var(--weight-semi); white-space: nowrap; }
.mark .ms { font-size: var(--icon-xs); }
.mark.ai { background: var(--color-action-primary-surface); color: var(--color-fg-primary); }
.mark.ai .ms { color: var(--color-action-primary); }
.mark.human { background: var(--surface-sunken); color: var(--color-fg-secondary); }
.ai-label { display: inline-flex; align-items: center; gap: var(--space-inline); font-size: var(--type-meta); font-weight: var(--weight-semi); color: var(--color-fg-secondary); }
.ai-label .ms { color: var(--color-action-primary); }

/* 아코디언(KRDS 04_07 선형)과 디스클로저(04_04): 머리 전체가 버튼, 펼침은 grid-template-rows 0fr ↔ 1fr */
.acc-item:not(:last-child) { border-bottom: var(--line) solid var(--divider); }
.acc-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-stack); min-height: var(--row-h); padding: var(--space-stack) var(--panel-pad); border: 0; background: none; font: inherit; font-size: var(--ctl-font); font-weight: var(--weight-semi); color: var(--color-fg-primary); text-align: left; cursor: pointer; transition: background var(--duration-base) var(--ease-out); }
.acc-btn:hover { background: var(--hover-surface); }
.acc-btn:focus-visible, .disc-btn:focus-visible { outline: var(--line-strong) solid var(--color-border-primary); outline-offset: var(--line-strong-neg); border-radius: 0; }
.acc-btn > .ms, .disc-btn > .ms { font-size: var(--icon); color: var(--color-fg-tertiary); transition: transform var(--duration-emphasized) var(--ease-out); }
.acc-btn[aria-expanded="true"] > .ms, .disc-btn[aria-expanded="true"] > .ms { transform: rotate(180deg); }
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-emphasized) var(--ease-out); }
.acc-panel.is-open { grid-template-rows: 1fr; }
.acc-in { overflow: hidden; min-height: 0; }
.acc-body { display: flex; flex-direction: column; gap: var(--space-stack); padding: 0 var(--panel-pad) var(--space-block); }
.acc-note { color: var(--color-fg-tertiary); }
.disc { display: flex; flex-direction: column; align-items: flex-start; }
.disc > .acc-panel { width: 100%; }
.disc-btn { display: inline-flex; align-items: center; gap: var(--space-inline); padding: var(--space-inline) 0; border: 0; border-radius: var(--radius-chip); background: none; font: inherit; font-size: var(--ctl-font); color: var(--color-fg-primary); text-align: left; cursor: pointer; }
.disc-btn:hover > span:last-child { text-decoration: underline; text-underline-offset: var(--space-inline); }

/* 스피너(KRDS 07_02): 끝을 모르는 기다림에 쓴다. 움직임 줄이기에서도 멈추지 않고 느리게 돈다 */
.spinner { flex: none; width: var(--icon); height: var(--icon); border: var(--line-strong) solid var(--divider-strong); border-top-color: var(--color-action-primary); border-radius: 50%; animation: spin 900ms linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .spinner, .btn[aria-busy="true"]::after { animation-duration: 3s !important; animation-iteration-count: infinite !important; }
}

/* 토스트(KRDS 12_05): 화면 가운데 아래 어두운 면 한 줄 */
.toast-zone { position: fixed; left: 50%; bottom: var(--space-page); transform: translateX(-50%); z-index: 60; width: max-content; max-width: var(--float-max-w); pointer-events: none; }
.toast { display: flex; align-items: center; gap: var(--space-stack); min-height: var(--toast-min-h); padding: var(--space-stack) var(--ctl-pad-x); border-radius: var(--radius-panel); background: var(--color-fg-primary); color: var(--color-fg-inverse); font-size: var(--ctl-font); font-weight: var(--weight-semi); box-shadow: var(--shadow-float); animation: toast-in var(--duration-emphasized) var(--ease-out) both; }
.toast.is-out { animation: toast-out var(--duration-exit-base) var(--ease-out) both; }
.toast > .ms { color: var(--on-dark-action); }
@keyframes toast-in { from { opacity: 0; transform: translateY(var(--space-stack)); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(var(--space-inline)); } }

/* 폭 조절 핸들: 잡는 영역·막대 치수는 roles --resizer-* (WORK_UI_PATTERNS 1-1). 두 패널 사이 바탕에 막대만 둔다 */
.resizer { grid-column: 2; justify-self: center; align-self: stretch; width: var(--resizer-hit); cursor: col-resize; touch-action: none; }
.resizer::after { content: ""; position: sticky; top: 50vh; display: block; width: var(--resizer-bar); height: var(--resizer-len); margin: 0 auto; border-radius: var(--radius-max); background: var(--color-border-default); transition: background var(--duration-base) var(--ease-out), height var(--duration-base) var(--ease-out); }
.resizer:hover::after, .resizer:focus-visible::after, .is-resizing .resizer::after { height: var(--resizer-len-active); background: var(--color-action-primary); }
.resizer:focus-visible { outline: none; }
.is-resizing { cursor: col-resize; user-select: none; }

/* ══ 화면 틀 ════════════════════════════════════════════════ */

/* 상단 바(Insight-Note .topbar): 흰 면, 아래 구분선과 옅은 그림자, 제목 앞 주색 아이콘 하나 */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; height: var(--bar-h); padding: 0 var(--space-page-x); background: var(--surface-page); border-bottom: var(--line) solid var(--divider); box-shadow: var(--shadow-bar); }
.brand { display: flex; align-items: center; gap: var(--space-stack); font-size: var(--type-section-title); font-weight: var(--type-section-title-weight); line-height: 1; }
.brand .ms { font-size: var(--icon); color: var(--color-action-primary); }

/* 연결 끊김 안내: 상단 바 바로 아래에 붙는 한 줄. 상태 면이 반투명이라 아래에 불투명한 페이지 면을 깐다 */
.sysbar { position: sticky; top: var(--bar-h); z-index: 29; background: var(--surface-page); }
.sysbar > .notice { padding-inline: var(--space-page-x); border-radius: 0; }

.page { padding: var(--space-section) var(--space-page-x) var(--space-page-end); }
/* 두 패널 사이는 열 간격(--panel-gap)이고, 그 가운데에 폭 조절 핸들이 선다 */
.bench { display: grid; grid-template-columns: minmax(var(--pane-w-min), var(--src-ratio, 45%)) var(--panel-gap) minmax(0, 1fr); align-items: start; }
.src { grid-column: 1; position: sticky; top: var(--sticky-top); }
.page[data-view="work"] .src { height: var(--sticky-h); }
.judge { grid-column: 3; display: flex; flex-direction: column; gap: var(--space-section); min-width: 0; }

/* 패널(민원AI Panel·PanelHead, Insight-Note .table-wrap): 바탕 위에 올라온 흰 면 하나. 머리는 옅은 띠, 발은 움푹 면 */
.panel { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: var(--line) solid var(--divider); border-radius: var(--radius-panel); background: var(--surface-page); box-shadow: var(--shadow-rest); }
.panel-head { flex: none; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-stack) var(--space-block); min-height: var(--head-h-line); padding: var(--panel-head-pad-y) var(--panel-pad); border-bottom: var(--line) solid var(--divider); background: var(--surface-page); }
.panel-head-main { flex: 1 1 0; display: flex; align-items: baseline; gap: var(--space-stack); min-width: 0; }
.panel-head-actions { flex: none; display: flex; align-items: center; gap: var(--space-stack); }
.panel-foot { padding: var(--panel-foot-pad-y) var(--panel-pad); border-top: var(--line) solid var(--divider); background: var(--surface-sunken); color: var(--color-fg-tertiary); }
/* 패널 안의 안내 상자는 모서리 없이 패널 폭을 다 쓴다 */
.panel > .notice { border-radius: 0; padding-inline: var(--panel-pad); }

.section-title { flex: none; display: flex; align-items: baseline; gap: var(--space-stack); font-size: var(--type-section-title); font-weight: var(--type-section-title-weight); line-height: var(--type-section-title-lh); white-space: nowrap; }
.count { font-size: var(--type-meta); font-weight: var(--weight-medium); color: var(--color-fg-tertiary); font-variant-numeric: tabular-nums; }

/* ══ 왼쪽 패널: 원본 광고 ═══════════════════════════════════ */

.file-name, .file-meta { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-name { color: var(--color-fg-secondary); }
.file-meta { font-size: var(--type-meta); color: var(--color-fg-tertiary); font-variant-numeric: tabular-nums; }
.file-name:empty, .file-meta:empty { display: none; }
.page[data-view="start"] #srcActions { display: none; }

/* 파일 올리기(KRDS 09_04, Insight-Note .empty-state): 제한 도움말은 올리는 면 위, 면 안에는 아이콘·제목·안내 한 문장·파일 선택 */
.upload { display: flex; flex-direction: column; gap: var(--space-stack); padding: var(--panel-pad); }
.upload-rule { color: var(--color-fg-tertiary); }
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-block); min-height: 44dvh; padding: var(--space-page) var(--panel-pad); border: var(--line) dashed var(--divider-strong); border-radius: var(--radius-panel); background: var(--surface-sunken); text-align: center; transition: border-color var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out); }
.drop-icon { display: flex; align-items: center; justify-content: center; width: var(--ctl-h-xl); height: var(--ctl-h-xl); border-radius: var(--radius-panel); background: var(--surface-page); color: var(--color-fg-tertiary); }
.drop-title { font-size: var(--type-page-title); font-weight: var(--type-page-title-weight); line-height: var(--type-page-title-lh); }
.drop-text { margin-top: var(--space-stack-neg); color: var(--color-fg-secondary); }
.is-dragging .drop { border-color: var(--color-action-primary); background: var(--selected-surface); }
.is-dragging .viewer { background: var(--selected-surface); box-shadow: inset 0 0 0 var(--line-strong) var(--color-action-primary); }
/* 오류 문구는 툴팁에 숨기지 않고 올리는 자리 바로 곁 본문에 둔다 */
.field-error { color: var(--color-status-danger); font-weight: var(--weight-medium); }
.source > .field-error { padding: var(--space-stack) var(--panel-pad); border-bottom: var(--line) solid var(--divider); background: var(--status-danger-surface); }

.source { flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* 보기 도구 줄(패턴집 WK-20): 패널 머리 바로 아래 한 줄. 배율을 쓰는 이미지에서만 보인다 */
.viewer-bar { flex: none; display: flex; align-items: center; padding: var(--space-stack) var(--panel-pad); border-bottom: var(--line) solid var(--divider); }
/* 아이콘 버튼은 그림이 칸 가운데에 있어, 그림의 왼쪽 끝이 패널 머리의 제목과 한 줄에 서게 칸의 남는 폭만큼 당긴다 */
.viewer-tools { display: flex; align-items: center; gap: var(--space-inline); margin-left: var(--tools-shift); }
.viewer-tools .icon-btn { width: var(--select-h); height: var(--select-h); border-radius: var(--radius-control); color: var(--color-fg-secondary); }
.viewer-tools .icon-btn:disabled, .viewer-tools .icon-btn:disabled:hover { background: none; color: var(--color-fg-disabled); cursor: not-allowed; }
/* 도구 줄의 셀렉트는 내용 폭에 맞춘다(시안 viewer.html .v-tools .filter-select) */
.viewer-tools select.field { min-width: 0; }

/* 무대는 어둡게 바꾸지 않고 움푹 면을 쓴다(패턴집 WK-20) */
/* 확대하면 가로로도 넘친다. 가로 스크롤바를 늘 표시하고 세로 스크롤바 폭도 잡아 두어, 확대해도 보기 영역의 크기가 그대로다(공통 규칙 7절) */
.viewer { flex: 1; min-height: 0; display: flex; overflow-y: auto; overflow-x: scroll; scrollbar-gutter: stable; padding: var(--space-block); background: var(--surface-sunken); transition: background var(--duration-base) var(--ease-out); }
.viewer > img { flex: none; margin: auto; max-width: none; height: auto; user-select: none; }
.viewer > video { margin: auto; max-width: 100%; max-height: 100%; border-radius: var(--radius-control); }
.viewer.is-image { cursor: grab; }
.viewer.is-image.is-panning { cursor: grabbing; }
.viewer:focus-visible { outline: var(--line-strong) solid var(--color-border-primary); outline-offset: var(--line-strong-neg); border-radius: 0; }
.viewer.is-flash { animation: viewer-flash 480ms var(--ease-out); }
@keyframes viewer-flash { from { box-shadow: inset 0 0 0 var(--focus-border) var(--color-action-primary); } to { box-shadow: inset 0 0 0 var(--focus-border) transparent; } }
.viewer-fail { display: flex; align-items: flex-start; gap: var(--space-stack); margin: auto; color: var(--color-fg-tertiary); }

/* 영상 구간별 판정 띠: 구간 길이만큼 폭을 나눠 갖는다. 톤은 면으로, 뜻은 아이콘과 글자로 */
.timeline { flex: none; display: flex; flex-direction: column; gap: var(--space-field); padding: var(--panel-foot-pad-y) var(--panel-pad); border-top: var(--line) solid var(--divider); }
.timeline-title { font-size: var(--type-label); font-weight: var(--type-label-weight); color: var(--color-fg-tertiary); }
.timeline-bar { display: flex; gap: var(--space-inline); }
.seg { flex: var(--span, 1) 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-inline) var(--space-stack); border: var(--line-strong) solid transparent; border-radius: var(--radius-control); background: var(--surface-sunken); font: inherit; font-size: var(--type-meta); color: var(--color-fg-primary); text-align: left; cursor: pointer; }
.seg:hover { border-color: var(--color-border-default); }
.seg[aria-current="true"] { border-color: var(--color-fg-primary); }
.seg[data-tone="err"] { background: var(--status-danger-surface); }
.seg[data-tone="warn"] { background: var(--status-warning-surface); }
.seg[data-tone="ok"] { background: var(--status-success-surface); }
.seg-time { color: var(--color-fg-tertiary); font-variant-numeric: tabular-nums; }
.seg-name { display: inline-flex; align-items: center; gap: var(--space-inline); max-width: 100%; font-weight: var(--weight-semi); overflow: hidden; white-space: nowrap; }
.seg[data-tone="err"] .ms { color: var(--color-status-danger); }
.seg[data-tone="warn"] .ms { color: var(--color-status-warning); }
.seg[data-tone="ok"] .ms { color: var(--color-status-success); }
.seg[data-tone="hold"] .ms { color: var(--color-fg-tertiary); }

/* ══ 오른쪽: 판정 패널 ══════════════════════════════════════ */

.ready { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-block); padding: var(--panel-pad); }
.ready-note { flex: 1 1 0; min-width: 40%; color: var(--color-fg-tertiary); }
.ready-note:empty { display: none; }

/* 진행: 서버가 단계를 알려 주지 않아 스피너와 지금 하는 일 한 줄, 지난 시간만 보인다 */
.progress { display: flex; flex-direction: column; gap: var(--space-inline); padding: var(--space-block) var(--panel-pad); }
.progress-row { display: flex; align-items: center; gap: var(--space-stack); min-height: var(--ctl-h-xs); }
.progress-text { flex: 1 1 auto; min-width: 0; font-weight: var(--weight-semi); }
.progress-text:focus { outline: none; }
.progress-time { flex: none; font-size: var(--type-meta); color: var(--color-fg-tertiary); font-variant-numeric: tabular-nums; }
.progress-note { padding-left: var(--indent-icon); color: var(--color-fg-tertiary); }

/* 좁은 화면에서 결과로 내려갈 때 위쪽 sticky 바에 가리지 않게 그 높이만큼 띄운다 */
.result { display: flex; flex-direction: column; scroll-margin-top: var(--scroll-top); transition: opacity var(--duration-base) var(--ease-out); }
.result:empty { display: none; }
.result.is-stale { opacity: 0.45; }
#resultBody { gap: var(--space-section); }

/* 판정: 종합 신호는 여기 한 곳에만 둔다. 상태는 좌측 선이 아니라 패널 폭을 다 쓰는 면으로 구분한다(ANTI_AI_TELLS 13) */
.verdict { display: flex; flex-direction: column; gap: var(--space-stack); padding: var(--panel-pad); background: var(--surface-sunken); }
.verdict[data-tone="err"] { background: var(--status-danger-surface); }
.verdict[data-tone="warn"] { background: var(--status-warning-surface); }
.verdict[data-tone="ok"] { background: var(--status-success-surface); }
.verdict-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-stack); }
.verdict-actions { display: flex; flex-wrap: wrap; gap: var(--space-stack); }
.export-note { align-self: flex-end; color: var(--color-status-danger); font-weight: var(--weight-medium); text-align: right; }
.verdict-label { display: flex; align-items: center; gap: var(--space-stack); font-size: var(--type-page-title); font-weight: var(--type-page-title-weight); line-height: var(--type-page-title-lh); }
.verdict-label:focus { outline: none; }
.verdict[data-tone="err"] .verdict-label .ms { color: var(--color-status-danger); }
.verdict[data-tone="warn"] .verdict-label .ms { color: var(--color-status-warning); }
.verdict[data-tone="ok"] .verdict-label .ms { color: var(--color-status-success); }
.verdict[data-tone="hold"] .verdict-label .ms { color: var(--color-fg-tertiary); }
.verdict-part { margin-left: var(--space-inline); font-size: var(--type-section-title); font-weight: var(--weight-semi); color: var(--color-fg-secondary); }
.verdict-count { font-size: var(--type-meta); color: var(--color-fg-secondary); }
.verdict-summary { margin-top: var(--space-stack); }
/* 읽는 문장은 넓은 화면에서도 한 줄이 한글 마흔네 자쯤을 넘지 않게 한다 */
.verdict-summary, .find-why, .find-nolaw, .check-sub, .law-text, .law-none, .acc-note, .fail-hint, .progress-note, .upload-rule, .form-hint { max-width: 80ch; }

/* 이전 판정과 비교: 다시 판정했을 때만 뜨는 상자. 테두리와 옅은 정보 면으로 눈에 띄게 둔다 */
.change { display: flex; flex-direction: column; gap: var(--space-stack); margin: var(--space-block) var(--panel-pad) 0; padding: var(--space-block); border: var(--line) solid var(--color-border-primary); border-radius: var(--radius-control); background: var(--status-info-surface); }
.change-title { display: flex; align-items: center; gap: var(--space-inline); font-size: var(--type-block-title); font-weight: var(--type-block-title-weight); line-height: var(--type-block-title-lh); }
.change-title .ms { color: var(--color-action-primary); }
.change .rule-list dt, .change .rule-list dd { padding-block: var(--space-inline); border: 0; }

/* 상품군: AI가 분류한 값을 검토자가 고쳐 다시 판정한다. 라벨 바로 아래에 셀렉트와 다시 판정 버튼을 붙여 둔다 */
.cat { padding: var(--space-block) var(--panel-pad); }

/* ══ 오른쪽: 근거 패널들 ════════════════════════════════════ */

/* 판단 기준(판정 전) */
.criteria { display: flex; flex-direction: column; gap: var(--space-section); }
.crit-list { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-block); }
.crit-list > li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; padding: var(--space-stack) var(--panel-pad); }
.crit-list > li:not(:last-child) { border-bottom: var(--line) solid var(--divider); }
.crit-name { font-weight: var(--weight-semi); }
.crit-signal { color: var(--color-fg-tertiary); }
.rule-list { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.rule-list > div { display: contents; }
.rule-list dt, .rule-list dd { padding: var(--space-stack) 0; }
.rule-list > div:not(:last-child) > * { border-bottom: var(--line) solid var(--divider); }
.rule-list dt { padding-right: var(--space-section); font-weight: var(--weight-semi); color: var(--color-fg-secondary); white-space: nowrap; }
/* 패널에 바로 놓인 목록은 구분선이 패널 폭을 다 쓰고, 글은 패널 여백만큼 들여 쓴다 */
.panel > .rule-list dt { padding-left: var(--panel-pad); }
.panel > .rule-list dd { padding-right: var(--panel-pad); }

/* 걸린 기준: 패널 안에서 항목을 다시 카드로 감싸지 않고 구분선으로 나눈다(ANTI_AI_TELLS 1) */
.find { display: flex; flex-direction: column; gap: var(--space-stack); padding: var(--space-block) var(--panel-pad); }
.find:not(:last-child) { border-bottom: var(--line) solid var(--divider); }
.find-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-stack); }
.find-name { font-size: var(--type-block-title); font-weight: var(--type-block-title-weight); line-height: var(--type-block-title-lh); }
.quotes { display: flex; flex-direction: column; gap: var(--space-inline); }
.quote { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-block); padding: var(--space-stack) var(--ctl-pad-x); border: 0; border-radius: var(--radius-control); background: var(--surface-sunken); font: inherit; color: var(--color-fg-primary); text-align: left; }
button.quote { cursor: pointer; transition: background var(--duration-base) var(--ease-out); }
button.quote:hover { background: var(--hover-surface); }
/* 원본에서 보고 있는 근거는 옅은 정보 면으로 남긴다(패턴집 WK-21) */
button.quote[aria-pressed="true"] { background: var(--status-info-surface); }
.quote-text { font-weight: var(--weight-medium); }
.quote-text::before { content: "“"; }
.quote-text::after { content: "”"; }
.quote-go { flex: none; font-size: var(--ctl-font-sm); font-weight: var(--weight-semi); color: var(--selected-fg); white-space: nowrap; }
.find-why { color: var(--color-fg-secondary); }
.find-nolaw { color: var(--color-fg-tertiary); }
.laws { display: flex; flex-direction: column; gap: var(--space-block); margin: var(--space-inline) 0 var(--space-stack); padding: var(--space-block); border-radius: var(--radius-control); background: var(--surface-sunken); }
.law { display: flex; flex-direction: column; gap: var(--space-inline); }
.law-name { font-weight: var(--weight-semi); }
.law-text { color: var(--color-fg-secondary); white-space: pre-line; }
.law-none { color: var(--color-fg-tertiary); }
.find-empty { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-stack); padding: var(--space-block) var(--panel-pad); color: var(--color-fg-secondary); }

/* 검토자가 확인할 것: 조회 상태는 글과 아이콘으로 함께 보인다 */
.checks { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-section); }
.check { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding: var(--space-block) var(--panel-pad); }
.check:not(:last-child) { border-bottom: var(--line) solid var(--divider); }
.check-key { font-size: var(--type-label); font-weight: var(--type-label-weight); color: var(--color-fg-tertiary); line-height: var(--line-h-body); white-space: nowrap; }
.check-values { display: flex; flex-direction: column; gap: var(--space-stack); min-width: 0; }
.check-value { display: flex; flex-direction: column; gap: var(--space-inline); min-width: 0; }
.check-text { display: flex; align-items: flex-start; gap: var(--space-inline); font-weight: var(--weight-semi); }
.check-text > .ico-slot { color: var(--color-fg-tertiary); }
.check-text[data-tone="err"] > .ico-slot { color: var(--color-status-danger); }
.check-text[data-tone="warn"] > .ico-slot { color: var(--color-status-warning); }
.check-text[data-tone="ok"] > .ico-slot { color: var(--color-status-success); }
.check-sub { padding-left: var(--indent-icon-sm); color: var(--color-fg-tertiary); }

/* 판정 자료(접어 두는 것) */
.misses { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-stack) var(--space-block); align-items: baseline; }
.misses > li { display: contents; }
.miss-name { font-weight: var(--weight-medium); }
.miss-why { color: var(--color-fg-tertiary); }
.texts { display: flex; flex-direction: column; counter-reset: line; }
.texts > li { display: flex; align-items: baseline; gap: var(--space-stack); padding: var(--space-inline) var(--space-stack); border-radius: var(--radius-chip); counter-increment: line; }
.texts > li::before { content: counter(line); flex: none; min-width: 2ch; text-align: right; font-size: var(--type-meta); color: var(--color-fg-tertiary); font-variant-numeric: tabular-nums; }
/* 근거로 쓰인 줄은 옅은 경고 면으로 칠한다(패턴집 WK-21) */
.texts > li.is-hit { background: var(--status-warning-surface); font-weight: var(--weight-semi); }
.time-btn { flex: none; display: inline-flex; align-items: center; height: var(--ctl-h-xs); padding: 0 var(--space-stack); border: 0; border-radius: var(--radius-chip); background: var(--color-action-primary-surface); color: var(--selected-fg); font: inherit; font-size: var(--type-meta); font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; cursor: pointer; }
.time-btn:hover { background: var(--color-action-primary); color: var(--color-fg-inverse); }

/* 판정 실패: 그 자리에서 무엇이 안 됐는지와 다음 행동을 알린다. 오류 코드는 접힌 기술 정보에만 둔다 */
.fail { display: flex; flex-direction: column; gap: var(--space-stack); padding: var(--panel-pad); background: var(--status-danger-surface); }
.fail-title { display: flex; align-items: flex-start; gap: var(--space-stack); font-size: var(--type-section-title); font-weight: var(--type-section-title-weight); line-height: var(--type-section-title-lh); }
.fail-title:focus { outline: none; }
.fail-title .ico-slot { color: var(--color-status-danger); }
.fail-actions { display: flex; gap: var(--space-stack); margin: var(--space-stack) 0; }
.tech { display: flex; flex-direction: column; gap: var(--space-stack); padding: var(--space-stack) 0; font-size: var(--type-meta); color: var(--color-fg-secondary); }
.raw { padding: var(--space-stack); border-radius: var(--radius-control); background: var(--surface-page); font-family: inherit; white-space: pre-wrap; }

/* 화면 상태 보기 막대(?mock= 일 때만 mock.js가 붙인다). 제품 화면이 아니라 미리 보기 도구다 */
.mockbar { position: fixed; left: var(--space-block); bottom: var(--space-block); z-index: 70; display: flex; align-items: center; gap: var(--space-stack); padding: var(--space-stack) var(--space-stack) var(--space-stack) var(--ctl-pad-x); border: var(--line) solid var(--color-border-default); border-radius: var(--radius-panel); background: var(--surface-page); box-shadow: var(--shadow-float); }
.mockbar label { font-size: var(--ctl-font-sm); font-weight: var(--weight-semi); color: var(--color-fg-secondary); white-space: nowrap; }

/* ══ 좁은 화면 ══════════════════════════════════════════════ */

/* 태블릿 이하: 원본 패널을 위에, 판정을 아래에 쌓는다. 폭 조절 핸들은 쓸 일이 없어 내린다 */
@media (max-width: 1023px) {
  .bench { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-section); }
  .src, .judge { grid-column: 1; }
  .src, .page[data-view="work"] .src { position: static; height: auto; }
  .resizer { display: none; }
  .drop { min-height: 28dvh; }
  .viewer { flex: none; max-height: 56dvh; }
  .viewer > video { max-height: 48dvh; }
  /* 단축키 안내는 키보드를 쓰는 넓은 화면에서만 보인다(패턴집 WK-20 좁은 화면) */
  #viewerHelp { display: none; }
}
@media (max-width: 767px) {
  .page { padding-inline: var(--space-block); }
  .topbar { padding-inline: var(--space-block); }
  .sysbar > .notice { padding-inline: var(--space-block); }
  /* 원본 패널 머리: 파일 이름과 파일 정보가 둘 다 몇 글자로 잘리지 않게 제목 아래 줄로 내린다 */
  .src .panel-head-main { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); column-gap: var(--space-stack); }
  .src .panel-head-main > .section-title { grid-column: 1 / -1; }
  .crit-list { grid-template-columns: minmax(0, 1fr); }
  .checks { grid-template-columns: minmax(0, 1fr); }
  .check { row-gap: var(--space-inline); }
  /* 내보내기 버튼은 판정과 요약을 읽은 뒤에 오게 판정 면 맨 아래로 내린다 */
  .verdict-top { display: contents; }
  .verdict-actions { order: 8; margin-top: var(--space-stack); }
  .verdict-actions .btn { height: var(--ctl-h-md); padding: 0 var(--ctl-pad-x); font-size: var(--ctl-font); }
  .export-note { order: 9; }
  .misses { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .miss-why { margin-bottom: var(--space-stack); }
  .quote { flex-direction: column; gap: var(--space-inline); }
  .form-row select.field { flex: 1 1 auto; }
  .export-note { align-self: flex-start; text-align: left; }
  .mockbar { left: var(--space-stack); right: var(--space-stack); }
  .mockbar select.field { flex: 1 1 auto; min-width: 0; }
  .mockbar label { display: none; }
}