/* PPASS VLMOps 평가 화면 바닐라 이식본 */
.ppass-evaluation {
  --pe-primary: #2970ff;
  --pe-primary-deep: #1d5ae6;
  --pe-primary-weak: #eaf1ff;
  --pe-amber: #f59e0b;
  --pe-surface: #fff;
  --pe-bg: #f5f5f5;
  --pe-line: #e5e7eb;
  --pe-border: #d4d4d4;
  --pe-text: #1f2937;
  --pe-muted: #64748b;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--pe-bg);
  color: var(--pe-text);
}

.ppass-evaluation *,
.ppass-evaluation *::before,
.ppass-evaluation *::after { box-sizing: border-box; }

.ppass-evaluation button,
.ppass-evaluation input { border-radius: 0 !important; }

.ppass-evaluation button:focus-visible,
.ppass-evaluation input:focus-visible,
.ppass-evaluation [tabindex="0"]:focus-visible {
  outline: 2px solid var(--pe-primary);
  outline-offset: 1px;
}

.pe-scroll { height: 100%; overflow-y: scroll; }
.pe-content { width: min(100%, 1720px); margin: 0 auto; padding: 32px 40px 64px; }   /* 라이브러리·대시보드와 같은 상자(최대 폭 1720px, 여백 32/40/64) — 2026-08-19 */
/* 갤러리 화면은 남은 높이를 채운다. 빈 상태가 위쪽에 붙으면 화면이 왜 비었는지 알기 어렵다(2026-08-12 Benson) */
.pe-scroll > .pe-content.is-fill { min-height: 100%; display: flex; flex-direction: column; }
.pe-content.is-fill > .pe-gallery-empty { flex: 1; }

.pe-page-head { margin-bottom: 24px; }
.pe-page-head h1 { margin: 0; color: var(--pe-text); font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.pe-page-head p { margin: 8px 0 0; max-width: 760px; color: var(--pe-muted); font-size: 14px; line-height: 1.6; }

.pe-card { border: 1px solid var(--pe-line); background: var(--pe-surface); }
.pe-settings-card { margin-bottom: 24px; }
.pe-card-title { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--pe-line); padding: 12px 20px; color: var(--pe-text); font-size: 14px; font-weight: 700; }
.pe-card-title svg { color: var(--pe-primary); }
.pe-settings-body { display: flex; flex-direction: column; gap: 20px; padding: 20px; }

.pe-step-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.pe-step-title { display: flex; min-width: 0; align-items: center; gap: 8px; color: var(--pe-text); font-size: 12px; font-weight: 600; }
.pe-step > .pe-step-title { margin-bottom: 8px; }
.pe-step-number { width: 20px; height: 20px; flex: 0 0 20px; display: grid; place-items: center; background: var(--pe-primary-weak); color: var(--pe-primary); font-size: 11px; font-weight: 700; }
.pe-info { display: inline-flex; color: rgba(100,116,139,.5); cursor: help; }
.pe-info:hover, .pe-info:focus-visible { color: var(--pe-muted); }

.pe-dataset-actions { display: flex; align-items: center; gap: 8px; }
.pe-source-toggle { display: flex; border: 1px solid var(--pe-border); padding: 2px; font-size: 11px; }
.pe-source-toggle button { border: 0; background: transparent; padding: 2px 8px; color: var(--pe-muted); font-size: 11px; line-height: 1.45; cursor: pointer; }
.pe-source-toggle button.is-active { background: var(--pe-primary); color: #fff; }
.pe-source-toggle button:disabled { cursor: not-allowed; opacity: .5; }
.pe-clear-all { border: 0; background: transparent; padding: 4px 2px; color: rgba(100,116,139,.75); font-size: 11px; font-weight: 500; cursor: pointer; }
.pe-clear-all:hover { color: #e34d59; }
.pe-clear-all:disabled { cursor: not-allowed; opacity: .45; }

/* 버튼 톤앤매너는 템플릿 관리(.vlmops-btn)·워크플로우(.ppw-btn)와 동일: 34px·12px·650. */
.pe-button { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--pe-border); background: var(--pe-surface); padding: 7px 12px; color: #334155; font-size: 12px; font-weight: 650; line-height: 1; cursor: pointer; white-space: nowrap; }
.pe-button:hover { background: var(--pe-bg); }
.pe-button:disabled { cursor: not-allowed; opacity: .45; }
.pe-button.is-primary { min-height: 36px; border-color: var(--pe-primary); background: var(--pe-primary); color: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.pe-button.is-primary:hover { border-color: var(--pe-primary-deep); background: var(--pe-primary-deep); }
.pe-button.is-upload { min-height: 30px; border-color: rgba(41,112,255,.4); background: var(--pe-primary-weak); padding: 6px 12px; color: var(--pe-primary); font-size: 12px; font-weight: 600; }
.pe-button.is-upload:hover { border-color: var(--pe-primary); background: var(--pe-primary); color: #fff; }

.pe-builtin-dataset { display: flex; align-items: center; gap: 8px; border: 1px solid var(--pe-line); background: var(--pe-bg); padding: 10px 12px; }
.pe-builtin-dataset > svg { flex: 0 0 auto; color: var(--pe-primary); }
.pe-builtin-dataset > span:not(.pe-badge-brand) { color: var(--pe-text); font-size: 14px; font-weight: 500; }
.pe-badge-brand { display: inline-flex; align-items: center; background: var(--pe-primary-weak); padding: 2px 8px; color: var(--pe-primary-deep); font-size: 11px; font-weight: 500; white-space: nowrap; }
.pe-dataset-empty { margin: 0; border: 1px dashed var(--pe-border); padding: 16px 12px; color: rgba(100,116,139,.7); font-size: 12px; text-align: center; }

.pe-upload-box { border: 1px solid var(--pe-line); }
.pe-upload-empty { margin: 0; padding: 24px 12px; color: rgba(100,116,139,.7); font-size: 12px; text-align: center; }
.pe-upload-list { max-height: 224px; overflow-y: auto; }
.pe-upload-row { min-height: 39px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--pe-text); font-size: 12px; }
.pe-upload-row + .pe-upload-row { border-top: 1px solid rgba(229,231,235,.6); }
.pe-file-icon { display: inline-flex; flex: 0 0 auto; color: rgba(100,116,139,.6); }
.pe-file-name { min-width: 0; flex: 1; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.pe-ground-truth-count { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; background: #ecfdf5; padding: 2px 6px; color: #047857; font-size: 10px; font-weight: 500; }
.pe-ground-truth-count button { display: inline-flex; border: 0; background: transparent; padding: 0; color: inherit; cursor: pointer; }
.pe-ground-truth-count button:hover { color: #065f46; }
.pe-ground-truth-upload { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; border: 1px dashed var(--pe-border); background: var(--pe-surface); padding: 4px 8px; color: var(--pe-muted); font-size: 11px; cursor: pointer; }
.pe-ground-truth-upload:hover { border-color: var(--pe-primary); color: var(--pe-primary); }
.pe-remove-document { display: inline-flex; flex: 0 0 auto; border: 0; background: transparent; padding: 2px; color: rgba(100,116,139,.5); cursor: pointer; }
.pe-remove-document:hover { color: #e34d59; }
.pe-hidden-input { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }

.pe-slot-grid { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: stretch; gap: 12px; }
.pe-slot { --pe-side: var(--pe-primary); border: 2px solid var(--pe-side); background: var(--pe-surface); padding: 12px; }
.pe-slot.is-b { --pe-side: var(--pe-amber); }
.pe-slot-title { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--pe-side); font-size: 12px; font-weight: 700; }
.pe-side-label { --pe-side: var(--pe-primary); width: 20px; height: 20px; flex: 0 0 20px; display: inline-grid; place-items: center; background: var(--pe-side); color: #fff; font-size: 11px; font-weight: 700; }
.pe-slot.is-b .pe-side-label, .pe-side-label.is-b { --pe-side: var(--pe-amber); }
.pe-side-label.is-a { --pe-side: var(--pe-primary); }
.pe-field-label { display: block; color: var(--pe-muted); font-size: 11px; }
.pe-field-label .pe-select { margin-top: 4px; }
.pe-version-label { margin-top: 8px; }
.pe-swap { display: flex; align-items: center; justify-content: center; padding: 0 2px; color: rgba(100,116,139,.5); }

.pe-select { position: relative; min-width: 0; }
.pe-select-trigger { width: 100%; height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--pe-border); background: var(--pe-surface); padding: 0 12px; color: var(--pe-text); font-size: 14px; text-align: left; cursor: pointer; }
.pe-select-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-select-trigger > svg { flex: 0 0 auto; color: var(--pe-muted); transition: color .15s ease, transform .15s ease; }
.pe-select.is-open .pe-select-trigger > svg { color: var(--pe-primary); transform: rotate(180deg); }
.pe-select-trigger:hover, .pe-select.is-open .pe-select-trigger { border-color: rgba(41,112,255,.6); }
.pe-select.is-disabled .pe-select-trigger { cursor: not-allowed; background: #f1f5f9; color: #94a3b8; }
.pe-select-menu { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; min-width: 100%; max-height: 256px; overflow: auto; border: 1px solid var(--pe-line); background: var(--pe-surface); padding: 4px 0; box-shadow: 0 10px 24px rgba(15,23,42,.14); }
.pe-select-option { width: 100%; min-height: 32px; display: flex; align-items: center; gap: 8px; border: 0; background: var(--pe-surface); padding: 6px 12px; color: var(--pe-text); font-size: 14px; text-align: left; white-space: nowrap; cursor: pointer; }
.pe-select-option:hover { background: var(--pe-bg); }
.pe-select-option.is-selected { color: var(--pe-primary); font-weight: 600; }
.pe-select-check { display: inline-flex; flex: 0 0 auto; color: var(--pe-primary); opacity: 0; }
.pe-select-check.is-visible { opacity: 1; }
.pe-select-option-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pe-select.is-compact { min-width: 180px; }
.pe-select.is-compact .pe-select-trigger { height: 32px; font-size: 12px; }
.pe-select.is-compact .pe-select-option { font-size: 12px; }

.pe-same-warning { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; border: 1px solid #fde68a; background: #fffbeb; padding: 8px 12px; color: #b45309; font-size: 11px; }
.pe-same-warning svg { flex: 0 0 auto; }
.pe-pipeline-select { width: min(100%, 320px); }

.pe-run-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border-top: 1px solid var(--pe-line); background: var(--pe-bg); padding: 12px 20px; }
.pe-run-bar p { min-width: 0; flex: 1; margin: 0; color: rgba(100,116,139,.72); font-size: 11px; font-variant-numeric: tabular-nums; }
.pe-button-spinner { width: 14px; height: 14px; display: inline-block; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; animation: pe-spin .7s linear infinite; }

.pe-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed var(--pe-border); background: rgba(255,255,255,.4); padding: 64px 20px; text-align: center; }
.pe-empty strong { color: var(--pe-muted); font-size: 14px; }
.pe-empty p { margin: 4px 0 0; color: rgba(100,116,139,.7); font-size: 12px; }
.pe-running { min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 64px 20px; }
.pe-running strong { color: var(--pe-text); font-size: 14px; }
.pe-running p { margin: 0; color: var(--pe-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.pe-spinner { width: 18px; height: 18px; border: 2px solid var(--pe-primary); border-top-color: transparent; border-radius: 50% !important; animation: pe-spin .7s linear infinite; }
.pe-run-error { display: flex; align-items: flex-start; gap: 8px; border: 1px solid #fecaca; background: rgba(254,242,242,.6); padding: 16px; color: #e34d59; }
.pe-run-error svg { flex: 0 0 auto; }
.pe-run-error strong { font-size: 14px; }
.pe-run-error p { margin: 4px 0 0; color: var(--pe-muted); font-size: 12px; word-break: break-all; }

.pe-results { display: flex; flex-direction: column; gap: 24px; }
.pe-winner { min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--pe-line); background: var(--pe-surface); padding: 16px; }
.pe-winner strong { color: var(--pe-text); font-size: 14px; }
.pe-badge-green { display: inline-flex; align-items: center; gap: 4px; background: #ecfdf5; padding: 2px 8px; color: #047857; font-size: 11px; font-weight: 500; white-space: nowrap; }

.pe-summary-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.pe-summary-card { position: relative; border: 1px solid var(--pe-line); background: var(--pe-surface); padding: 20px; }
.pe-summary-card.is-winner { box-shadow: 0 0 0 2px var(--pe-side); }
.pe-summary-title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.pe-summary-title .pe-side-label { --pe-side: inherit; width: 24px; height: 24px; flex-basis: 24px; background: var(--pe-side); font-size: 12px; }
.pe-summary-title > strong { min-width: 0; flex: 1; overflow: hidden; color: var(--pe-text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.pe-main-metric { display: flex; align-items: baseline; gap: 6px; }
.pe-main-metric strong { color: var(--pe-side); font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pe-main-metric span { color: var(--pe-muted); font-size: 12px; }
.pe-metric-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 12px; text-align: center; }
.pe-metric-grid > div { background: var(--pe-bg); padding: 8px 4px; }
.pe-metric-grid strong { display: block; color: var(--pe-text); font-size: 12px; font-variant-numeric: tabular-nums; }
.pe-metric-grid span { display: block; margin-top: 2px; color: var(--pe-muted); font-size: 10px; }
.pe-side-diagnostic { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; padding: 6px 8px; font-size: 11px; cursor: help; }
.pe-side-diagnostic.is-error { background: #fef2f2; color: #e34d59; }
.pe-side-diagnostic.is-warning { background: #fffbeb; color: #b45309; }

.pe-comparison-card { overflow: hidden; }
.pe-comparison-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px 16px 0; }
.pe-comparison-heading > strong { color: var(--pe-text); font-size: 14px; }
.pe-comparison-heading > span { color: rgba(100,116,139,.7); font-size: 11px; font-weight: 400; }
.pe-document-select { max-width: 360px; }
.pe-diff-filter { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--pe-border); background: var(--pe-surface); padding: 4px 10px; color: var(--pe-muted); font-size: 11px; font-weight: 500; cursor: pointer; }
.pe-diff-filter:hover { border-color: var(--pe-primary); color: var(--pe-primary); }
.pe-diff-filter.is-active { border-color: var(--pe-primary); background: var(--pe-primary-weak); color: var(--pe-primary); }
.pe-table-wrap { max-height: 448px; margin-top: 12px; overflow: auto; }
.pe-result-table { width: 100%; border-collapse: collapse; color: var(--pe-text); font-size: 14px; text-align: left; }
.pe-result-table th { position: sticky; z-index: 1; top: 0; background: var(--pe-bg); color: var(--pe-muted); font-size: 12px; font-weight: 500; }
.pe-result-table th, .pe-result-table td { border-top: 1px solid var(--pe-line); padding: 8px 16px; vertical-align: top; }
.pe-result-table tbody tr.is-different { background: #fff7ed; }
.pe-result-table td:first-child { font-weight: 500; white-space: nowrap; }
.pe-result-table td.is-wrong { color: #e34d59; }
.pe-table-side { display: inline-grid; width: 20px; height: 20px; place-items: center; background: var(--pe-primary); color: #fff; font-size: 10px; }
.pe-table-side.is-b { background: var(--pe-amber); }
.pe-ground-truth-value { color: #047857; }
.pe-ground-truth-value > span, .pe-missing { color: rgba(100,116,139,.4); }
.pe-correct-mark, .pe-wrong-mark { display: inline-flex; margin-left: 4px; vertical-align: middle; }
.pe-correct-mark { color: #059669; }
.pe-wrong-mark { color: #e34d59; }
.pe-table-empty { padding: 24px 16px !important; color: rgba(100,116,139,.6); font-size: 12px; font-weight: 400 !important; text-align: center; }

@keyframes pe-spin { to { transform: rotate(360deg); } }

@media (max-width: 820px) {
  .pe-step-heading { align-items: flex-start; flex-direction: column; }
  .pe-dataset-actions { width: 100%; flex-wrap: wrap; }
  .pe-slot-grid, .pe-summary-grid { grid-template-columns: 1fr; }
  .pe-swap { padding: 2px 0; transform: rotate(90deg); }
  .pe-comparison-heading { align-items: stretch; flex-direction: column; }
  .pe-document-select { width: 100%; max-width: none; }
  .pe-diff-filter { margin-left: 0; align-self: flex-start; }
}

@media (max-width: 560px) {
  .pe-page-head h1 { font-size: 24px; }
  .pe-page-head p { font-size: 13px; }
  .pe-source-toggle { order: 3; width: 100%; }
  .pe-source-toggle button { flex: 1; }
  .pe-upload-row { flex-wrap: wrap; }
  .pe-file-name { flex-basis: calc(100% - 52px); }
  .pe-ground-truth-count, .pe-ground-truth-upload { margin-left: 22px; }
  .pe-run-bar { align-items: stretch; flex-direction: column; }
  .pe-run-bar .pe-button { align-self: flex-start; }
  .pe-winner { flex-wrap: wrap; }
  .pe-summary-title { flex-wrap: wrap; }
  .pe-result-table { min-width: 620px; }
}

@media (prefers-reduced-motion: reduce) {
  .pe-spinner, .pe-button-spinner { animation: none; }
}

/* ── 템플릿 카드뷰 진입 (첫 화면, 정책 1.7) ── */
.pe-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }   /* 템플릿 관리·워크플로우 카드 격자와 같은 3열·16px(2026-08-19) */
.pe-tpl-icon { width: 36px; height: 36px; display: grid; place-items: center; margin-bottom: 5px; background: var(--pe-primary-weak); color: var(--pe-primary); }
/* 빈 상태는 남은 영역의 가운데에 둔다. 위쪽에 붙으면 화면이 비어 보이는 이유를 알기 어렵다(2026-08-12 Benson) */
.pe-gallery-empty { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 100%; padding: 60px 24px; color: #94a3b8; text-align: center; }
.pe-gallery-empty strong { color: var(--pe-text); font-size: 15px; }
.pe-gallery-empty p { margin: 0; max-width: 360px; color: var(--pe-muted); font-size: 12px; line-height: 1.55; }
.pe-page-head-detail { display: flex; align-items: center; gap: 14px; }
.pe-page-head-detail > div { min-width: 0; }
.pe-back { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; border: 1px solid var(--pe-border); background: #fff; padding: 7px 11px; color: var(--pe-muted); font-size: 12px; font-weight: 600; cursor: pointer; }
.pe-back:hover { border-color: var(--pe-primary); color: var(--pe-primary); }

/* ── 상세: 3영역 워크스페이스 (정책 1.7) ── */
.pe-detail { height: 100%; min-height: 0; display: flex; flex-direction: column; background: var(--pe-bg); }
.pe-detail-bar { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 48px; border-bottom: 1px solid var(--pe-line); background: var(--pe-surface); padding: 8px 16px; }   /* 템플릿 관리 상세 머리(.vlmops-detail-bar)와 같은 높이·여백 */
/* 이름과 설명을 한 줄에 나란히 둔다. 템플릿 관리 상세와 같은 문법이다(2026-09-30 Benson). */
.pe-detail-title { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.pe-detail-title strong { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--pe-text); font-size: 13px; font-weight: 700; }
.pe-detail-title span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--pe-muted); font-size: 11px; }
@media (max-width: 720px) { .pe-detail-title span { display: none; } }   /* 좁은 화면에서는 템플릿 관리처럼 설명을 숨긴다 */
.pe-workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(240px, 300px) minmax(280px, 1fr) minmax(360px, 1.4fr); overflow: hidden; }
.pe-ws-col { min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--pe-surface); border-right: 1px solid var(--pe-line); }
.pe-ws-col:last-child { border-right: 0; }
.pe-ws-head { min-height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto; border-bottom: 1px solid var(--pe-line); padding: 0 14px; }
.pe-ws-head strong { overflow: hidden; color: var(--pe-text); font-size: 13px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.pe-ws-count { flex: 0 0 auto; color: var(--pe-muted); font-size: 11px; font-weight: 600; }
.pe-ws-doclist { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; }
.pe-ws-docrow { width: 100%; display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 8px 9px; text-align: left; cursor: pointer; }
.pe-ws-docrow:hover { background: var(--pe-bg); }
.pe-ws-docrow.is-active { background: var(--pe-primary-weak); }
.pe-ws-docrow .pe-file-icon { flex: 0 0 auto; color: var(--pe-muted); }
.pe-ws-docname { min-width: 0; flex: 1; overflow: hidden; color: var(--pe-text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.pe-ws-gt { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px; color: #047857; font-size: 10px; font-style: normal; font-weight: 650; }
/* 행 hover 시 제거 버튼 — 워크플로우 실행 기록 레일과 같은 패턴. */
.pe-ws-docremove { display: none; flex: 0 0 auto; border: 0; background: transparent; padding: 0; color: #94a3b8; cursor: pointer; }
.pe-ws-docrow:hover .pe-ws-docremove { display: grid; place-items: center; }
.pe-ws-docremove:hover { color: #b91c1c; }
.pe-ws-empty { margin: 0; padding: 20px 14px; color: var(--pe-muted); font-size: 12px; line-height: 1.6; }
.pe-ws-foot { flex: 0 0 auto; border-top: 1px solid var(--pe-line); padding: 10px; }
.pe-ws-foot .pe-button { width: 100%; }
/* 테스트 문서셋 추가 버튼을 상단에(DEEP OCR 문서 추가처럼). */
.pe-ws-add { flex: 0 0 auto; border-bottom: 1px solid var(--pe-line); padding: 10px; }
.pe-ws-add .pe-button { width: 100%; }
/* 버전 비교 헤더 행에 실행 버튼(헤더 액션 패턴). */
.pe-ws-compare .pe-ws-head .pe-button { flex: 0 0 auto; min-height: 30px; padding: 5px 12px; font-size: 12px; }
.pe-ws-viewer .pe-ws-doc { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: flex-start; justify-content: center; background: #eceff1; padding: 18px; }
.pe-doc-page { width: min(100%, 420px); aspect-ratio: 3 / 4; display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--pe-border); background: #fff; padding: 26px 24px; box-shadow: 0 1px 6px rgba(15,23,42,.1); }
.pe-doc-page-head { padding-bottom: 10px; border-bottom: 2px solid var(--pe-line); color: #334155; font-size: 14px; font-weight: 700; }
.pe-doc-page-lines { display: flex; flex-direction: column; gap: 11px; }
.pe-doc-page-lines span { display: block; height: 8px; background: #eef1f4; }
/* 빈 상태만 상하 가운데 정렬한다. 부모의 align-items:flex-start는 실제 문서 미리보기(스크롤)용이라 유지하고,
   플렉스 항목의 margin:auto가 align-items보다 우선하는 성질로 빈 상태만 중앙에 놓는다. */
.pe-ws-doc-empty { display: grid; justify-items: center; gap: 8px; color: #94a3b8; margin: auto; }
.pe-ws-doc-empty p { margin: 0; font-size: 12px; }
.pe-ws-compare { background: var(--pe-bg); }
.pe-ws-compare .pe-ws-head { background: var(--pe-surface); }
.pe-ws-versions { display: flex; align-items: flex-end; gap: 10px; flex: 0 0 auto; border-bottom: 1px solid var(--pe-line); background: var(--pe-surface); padding: 12px 14px; }
.pe-ws-ver { min-width: 0; flex: 1; display: flex; align-items: center; gap: 7px; }
.pe-ws-ver .pe-select { flex: 1; min-width: 0; }
.pe-ws-arrow { flex: 0 0 auto; padding-bottom: 6px; color: var(--pe-muted); }
.pe-ws-compare .pe-same-warning { margin: 0; }
.pe-ws-run { flex: 0 0 auto; border-bottom: 1px solid var(--pe-line); background: var(--pe-surface); padding: 10px 14px; }
.pe-ws-run .pe-button { width: 100%; }
.pe-ws-results { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; }
@media (max-width: 1120px) {
  .pe-workspace { overflow-x: auto; }
  .pe-ws-col { min-width: 260px; }
}

/* ── 테스트 문서셋 추가 모달 (검수 완료 인퍼런스만 선택, 정책 1.7·1.5) ── */
.pe-modal { position: fixed; z-index: 240; inset: 0; display: grid; place-items: center; padding: 24px; }
.pe-modal-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.5); }
.pe-modal-card { position: relative; width: min(94vw, 560px); max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #cbd5e1; background: #fff; box-shadow: 0 22px 55px rgba(15,23,42,.28); }
.pe-modal-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--pe-line); padding: 15px 18px; }
.pe-modal-card > header h2 { margin: 0; color: var(--pe-text); font-size: 16px; font-weight: 700; }
.pe-modal-card > header p { margin: 5px 0 0; color: var(--pe-muted); font-size: 12px; line-height: 1.55; }
.pe-modal-card > header button { border: 0; background: transparent; color: #94a3b8; cursor: pointer; }
.pe-modal-body { min-height: 0; overflow-y: auto; padding: 12px; }
.pe-modal-card > footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--pe-line); padding: 12px 18px; }
.pe-inf-list { display: flex; flex-direction: column; }
.pe-inf-row { display: flex; align-items: center; gap: 10px; border: 1px solid transparent; border-bottom: 1px solid var(--pe-line); padding: 11px 10px; cursor: pointer; }
.pe-inf-row:last-child { border-bottom: 0; }
.pe-inf-row:hover:not(.is-disabled) { background: var(--pe-bg); }
.pe-inf-row.is-selected { border-color: var(--pe-primary); background: var(--pe-primary-weak); }
.pe-inf-row.is-disabled { opacity: .55; cursor: not-allowed; }
.pe-inf-check { width: 18px; height: 18px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--pe-border); background: #fff; color: #fff; }
.pe-inf-row.is-selected .pe-inf-check { border-color: var(--pe-primary); background: var(--pe-primary); }
.pe-inf-name { min-width: 0; flex: 1; overflow: hidden; color: var(--pe-text); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.pe-inf-type { flex: 0 0 auto; color: var(--pe-muted); font-size: 11px; }
.pe-inf-done { flex: 0 0 auto; background: #ecfdf5; padding: 2px 7px; color: #047857; font-size: 10px; font-style: normal; font-weight: 700; }
.pe-inf-pending { flex: 0 0 auto; background: #fff7ed; padding: 2px 7px; color: #c2410c; font-size: 10px; font-style: normal; font-weight: 700; }
.pe-inf-empty { margin: 0; padding: 30px 18px; color: var(--pe-muted); font-size: 12px; line-height: 1.6; text-align: center; }

/* ── 비교 후: 평균 스코어 + 문서별 스코어 카드 (정책 1.7) ── */

.pe-avg-card { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--pe-line); background: #fff; padding: 14px 16px; }
.pe-avg-card.is-win { border-color: var(--pe-primary); background: var(--pe-primary-weak); box-shadow: inset 0 0 0 1px var(--pe-primary); }
.pe-avg-top { display: flex; align-items: center; gap: 7px; color: var(--pe-muted); font-size: 12px; }
.pe-avg-ver { font-weight: 650; }
.pe-avg-card strong { color: var(--pe-text); font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.pe-avg-card strong i { margin-left: 3px; font-size: 14px; font-style: normal; font-weight: 600; color: var(--pe-muted); }
.pe-avg-arrow { flex: 0 0 auto; display: grid; place-items: center; color: #94a3b8; }

/* 스코어 상세 모달 (DEEP OCR형 Key별 정답/A/B) */
.pe-modal-card.is-wide { width: min(94vw, 1120px); }
.pe-sm-empty { padding: 24px; color: var(--pe-muted); text-align: center; }

/* ── 카드뷰 검색·정렬 (다른 리스트 화면과 동일한 툴바 패턴) ── */
.pe-gallery-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pe-gsearch { display: flex; flex: 0 1 340px; align-items: center; gap: 7px; border: 1px solid var(--pe-border); background: #fff; padding: 0 10px; color: #94a3b8; }
.pe-gsearch input { min-height: 34px; flex: 1; min-width: 0; border: 0; background: transparent; color: var(--pe-text); font-size: 12px; outline: none; }
.pe-gsearch:focus-within { border-color: var(--pe-primary); }
.pe-gsort { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; color: var(--pe-muted); font-size: 12px; }
.pe-gsort .pe-select { min-width: 170px; }

/* 버전 비교 헤더 — 파이프라인 셀렉트 + 실행 버튼 */
.pe-ws-head-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; min-width: 0; }
.pe-ws-pipeline { min-width: 0; }
.pe-ws-pipeline .pe-select { min-width: 168px; }

/* 상세바 템플릿 전환 셀렉트 */
.pe-detail-switch { margin-left: auto; }
.pe-detail-switch .pe-select { min-width: 200px; }

/* 상세 뒤로가기 — 워크플로우 상세와 동일한 아이콘 버튼 패턴 */
.pe-icon-back { width: 32px; height: 32px; display: grid; flex: 0 0 auto; place-items: center; border: 0; background: transparent; color: var(--pe-muted); cursor: pointer; }
.pe-icon-back:hover { background: #f1f5f9; color: var(--pe-primary); }

/* 문서 뷰어 — 실물 스캔 이미지 */
.pe-doc-img { display: block; width: min(100%, 560px); height: auto; margin: 0 auto; border: 1px solid var(--pe-border); background: #fff; box-shadow: 0 1px 6px rgba(15,23,42,.1); }

/* 우세 시각화 — 평균 스코어 기본 바 (원문 '기본 UI' 그래프) */
.pe-win-badge { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; background: #ecfdf5; padding: 2px 7px; color: #047857; font-size: 10px; font-weight: 750; }
.pe-vsbar { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--pe-line); background: #fff; padding: 10px 12px; }
.pe-vsbar-row { display: flex; align-items: center; gap: 8px; }
.pe-vsbar-track { position: relative; height: 8px; flex: 1; overflow: hidden; background: var(--pe-bg); }
.pe-vsbar-track i { position: absolute; inset: 0 auto 0 0; display: block; }
.pe-vsbar-track i.is-a { background: var(--pe-primary); }
.pe-vsbar-track i.is-b { background: var(--pe-amber); }
.pe-vsbar-row b { width: 30px; flex: 0 0 auto; color: var(--pe-text); font-size: 12px; text-align: right; }

/* 분류/KIE 영역 박스 안 데이터셋 카드 — 가로 스크롤 스트립 */
.pe-cards-strip { display: flex; gap: 10px; overflow-x: auto; padding: 12px; }
.pe-dcard { min-width: 210px; max-width: 250px; display: flex; flex: 0 0 auto; flex-direction: column; gap: 5px; border: 1px solid var(--pe-line); background: #fff; padding: 11px 13px; text-align: left; cursor: pointer; }
.pe-dcard:hover { border-color: var(--pe-primary); background: var(--pe-primary-weak); }
.pe-dcard-name { overflow: hidden; color: var(--pe-text); font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.pe-dcard-type { overflow: hidden; color: var(--pe-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.pe-dcard-ab { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.pe-dcard-ab em { padding: 2px 7px; font-size: 11px; font-style: normal; font-weight: 700; background: var(--pe-bg); color: var(--pe-muted); }
.pe-dcard-ab em.is-a { color: #1d4ed8; }
.pe-dcard-ab em.is-b { color: #b45309; }
.pe-dcard-ab em.is-top.is-a { background: var(--pe-primary-weak); }
.pe-dcard-ab em.is-top.is-b { background: #fff7ed; }
.pe-dcard-ab i { color: #94a3b8; font-style: normal; }

/* 상세 모달 상단 — 문서 스코어 + 페이지 매핑 스트립 (BL6 기본형) */

/* 분류 영역 박스 + KIE 영역 박스 (구조 동일, 정책 1.7) */

/* 카드 격자와 본문 여백은 템플릿 관리와 같은 분기점을 쓴다(2026-08-19).
   기본 규칙(.pe-gallery·.pe-content)보다 뒤에 두어야 적용된다. */
@media (max-width: 1180px) {
  .pe-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .pe-gallery { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .pe-content { padding: 18px 18px 32px; }
}

/* ── 2026-09-29 버전 비교 실코드 기능 이식 (PerformancePanel.tsx 기준) ──
   모드 탭 · A·B·C 슬롯 · C 만들기 · 경고 · 결과(승자 배너 · 요약 카드 · 필드 비교) · 파일 업로드 문서셋 · 끌어다 놓기 */
.pe-mode-tabs { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--pe-border); background: var(--pe-surface); padding: 2px; }
.pe-mode-tab { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; padding: 5px 10px; color: var(--pe-muted); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pe-mode-tab:hover { color: var(--pe-primary); }
.pe-mode-tab.is-active { background: var(--pe-primary); color: #fff; }
.pe-gallery-tools .pe-mode-tabs { margin-right: auto; }
.pe-gallery-tools .pe-gsearch { margin-left: 0; }

.pe-side-label.is-empty { border: 1px dashed var(--pe-border); background: transparent; color: rgba(100,116,139,.6); font-size: 10px; }
.pe-side-label.is-schema { background: var(--pe-primary-weak); color: var(--pe-primary); }

.pe-ws-compare .pe-ws-head { flex-wrap: wrap; row-gap: 6px; padding-top: 7px; padding-bottom: 7px; }
.pe-model-label { flex: 0 0 auto; color: var(--pe-muted); font-size: 11px; cursor: help; }
.pe-ws-model .pe-select { min-width: 160px; }
.pe-ws-model .pe-select-trigger { height: 30px; font-size: 12px; }

.pe-slots { display: grid; gap: 6px; }
.pe-slot-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pe-slot-row > .pe-side-label { width: 24px; height: 24px; flex-basis: 24px; font-size: 12px; }
.pe-slot-control { min-width: 0; flex: 1; }
.pe-slot-schema { display: flex; gap: 6px; }
.pe-slot-schema > .pe-select:first-child { flex: 1; min-width: 0; }
.pe-slot-schema > .pe-select:last-child { width: 96px; flex: 0 0 96px; }
.pe-slot-trail { width: 32px; flex: 0 0 32px; display: grid; place-items: center; }
.pe-slot-add { min-width: 0; flex: 1; height: 36px; border: 1px dashed var(--pe-border); background: var(--pe-surface); padding: 0 12px; color: var(--pe-muted); font-size: 12px; text-align: left; cursor: pointer; }
.pe-slot-add:hover:not(:disabled) { border-color: var(--pe-primary); color: var(--pe-primary); }
.pe-slot-add:disabled { cursor: not-allowed; opacity: .5; }
.pe-slot-help { margin: 0 0 4px 32px; color: rgba(100,116,139,.8); font-size: 11px; line-height: 1.55; }
.pe-slot-help b { color: var(--pe-muted); font-weight: 600; }
.pe-slot-foot { display: flex; justify-content: flex-end; margin-top: 2px; }
.pe-icon-btn { width: 32px; height: 36px; display: grid; place-items: center; border: 0; background: transparent; color: var(--pe-muted); cursor: pointer; }
.pe-icon-btn:hover { color: var(--pe-primary); }
.pe-icon-btn.is-danger:hover { color: #e34d59; }
.pe-cedit-btn { display: inline-flex; align-items: center; gap: 5px; height: 30px; border: 1px solid rgba(41,112,255,.4); background: var(--pe-primary-weak); padding: 0 10px; color: var(--pe-primary); font-size: 11px; font-weight: 650; cursor: pointer; }
.pe-cedit-btn:hover:not(:disabled) { background: var(--pe-primary); color: #fff; }
.pe-cedit-btn:disabled { cursor: not-allowed; opacity: .5; }

.pe-warn { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; border: 1px solid var(--pe-line); background: var(--pe-bg); padding: 8px 12px; color: var(--pe-muted); font-size: 11px; line-height: 1.55; }
.pe-warn svg { flex: 0 0 auto; margin-top: 1px; }
.pe-warn.is-amber { border-color: #fde68a; background: #fffbeb; color: #b45309; }
.pe-ws-resultbody { margin-top: 14px; }

.pe-select-trigger .is-placeholder { color: rgba(100,116,139,.7); }
.pe-select-option.is-disabled { cursor: not-allowed; color: #e34d59; opacity: .75; }
.pe-select-option.is-disabled:hover { background: var(--pe-surface); }
.pe-opt-tag { margin-left: auto; flex: 0 0 auto; background: #fef2f2; padding: 1px 6px; color: #e34d59; font-size: 10px; font-style: normal; font-weight: 700; }

.pe-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.pe-badge.is-green { background: #ecfdf5; color: #047857; }
.pe-badge.is-amber { background: #fffbeb; color: #b45309; }
.pe-badge.is-gray { background: #f1f5f9; color: var(--pe-muted); }
.pe-badge.is-brand { background: var(--pe-primary-weak); color: var(--pe-primary-deep); }

.pe-result { display: grid; gap: 14px; }
.pe-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--pe-line); background: var(--pe-surface); padding: 12px; }
.pe-banner > .pe-side-label { width: 24px; height: 24px; flex-basis: 24px; font-size: 12px; }
.pe-banner strong { color: var(--pe-text); font-size: 14px; font-weight: 700; }
.pe-banner-failnote { width: 100%; color: #e34d59; font-size: 11px; text-align: center; }
.pe-banner.is-fail { display: block; border-color: #fecaca; background: rgba(254,242,242,.6); text-align: left; }
.pe-banner.is-fail strong { display: flex; align-items: center; gap: 6px; color: #e34d59; }
.pe-banner.is-fail p { margin: 4px 0 0; color: var(--pe-muted); font-size: 12px; word-break: break-all; }
.pe-banner.is-fail p.is-sub { margin-top: 6px; color: rgba(100,116,139,.8); font-size: 11px; }

.pe-sum-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pe-sum-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pe-sum-card { border: 1px solid var(--pe-line); background: var(--pe-surface); padding: 14px; }
.pe-sum-card.is-win { box-shadow: 0 0 0 2px var(--pe-side); border-color: transparent; }
.pe-sum-top { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; min-width: 0; }
.pe-sum-top strong { min-width: 0; flex: 1; overflow: hidden; color: var(--pe-text); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.pe-sum-main { display: flex; align-items: baseline; gap: 6px; }
.pe-sum-main b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pe-sum-main span { color: var(--pe-muted); font-size: 11px; }
.pe-sum-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 10px; text-align: center; }
.pe-sum-stats div { background: var(--pe-bg); padding: 6px 0; }
.pe-sum-stats b { display: block; color: var(--pe-text); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pe-sum-stats span { color: var(--pe-muted); font-size: 10px; }
.pe-sum-err { display: flex; align-items: center; gap: 5px; margin: 8px 0 0; background: #fffbeb; padding: 6px 8px; color: #b45309; font-size: 11px; cursor: help; }
.pe-sum-err.is-failed { background: #fef2f2; color: #e34d59; }
.pe-sum-sub { margin: 6px 0 0; overflow: hidden; color: rgba(100,116,139,.75); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.pe-fc { border: 1px solid var(--pe-line); background: var(--pe-surface); }
.pe-fc-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 14px 14px 0; }   /* 왼쪽 정보는 줄어들고 오른쪽 도구는 고정 폭(2026-10-01) */
.pe-fc-title { display: flex; min-width: 0; align-items: center; gap: 8px; }
.pe-fc-title strong, .pe-fc-title small { flex: 0 0 auto; white-space: nowrap; }
.pe-fc-title .pe-fc-doc { flex: 0 1 auto; max-width: none; }
.pe-fc { container-type: inline-size; }
@container (max-width: 640px) {   /* 패널이 좁으면 내용과 상관없이 도구 줄을 늘 둘째 줄 왼쪽에 둔다 */
  .pe-fc-head { grid-template-columns: minmax(0, 1fr); }
  .pe-fc-tools { justify-self: start; }
}
.pe-fc-tools .pe-button:disabled, .pe-chip:disabled { opacity: .45; cursor: not-allowed; }
.pe-chip:disabled:hover { border-color: var(--pe-border); color: var(--pe-muted); }
.pe-fc-head strong { color: var(--pe-text); font-size: 14px; font-weight: 700; }
.pe-fc-head small { color: rgba(100,116,139,.75); font-size: 11px; }
.pe-fc-doc { min-width: 0; max-width: 40%; overflow: hidden; color: var(--pe-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.pe-fc-tools { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
.pe-fc-tools .pe-button { min-height: 26px; padding: 4px 9px; font-size: 11px; }
.pe-view-toggle { display: inline-flex; border: 1px solid var(--pe-border); padding: 2px; }
.pe-view-toggle button { border: 0; background: transparent; padding: 2px 9px; color: var(--pe-muted); font-size: 11px; cursor: pointer; }
.pe-view-toggle button.is-active { background: var(--pe-primary); color: #fff; }
.pe-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--pe-border); background: var(--pe-surface); padding: 4px 9px; color: var(--pe-muted); font-size: 11px; font-weight: 600; cursor: pointer; }
.pe-chip:hover, .pe-chip.is-on { border-color: var(--pe-primary); color: var(--pe-primary); }
.pe-chip.is-on { background: var(--pe-primary-weak); }
.pe-fc-scroll { max-height: 26rem; margin-top: 12px; overflow: auto; }
.pe-fc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pe-fc-table th { position: sticky; top: 0; background: #f8fafc; padding: 8px 14px; color: var(--pe-muted); font-size: 11px; font-weight: 700; text-align: left; }
.pe-fc-table td { border-top: 1px solid var(--pe-line); padding: 8px 14px; color: var(--pe-text); vertical-align: top; word-break: break-all; }
.pe-fc-table tr.is-differ td { background: #fff7ed; }
.pe-fc-table td i { color: rgba(100,116,139,.45); font-style: normal; }
.pe-fc-table td.is-bad { color: #e34d59; }
.pe-fc-field { font-weight: 600; white-space: nowrap; }
.pe-fc-gt { color: #047857; }
.pe-fc-mark { margin-left: 4px; font-size: 10px; }
.pe-fc-mark.is-ok { color: #059669; }
.pe-fc-empty { padding: 22px 14px !important; color: rgba(100,116,139,.6) !important; font-size: 12px; text-align: center; }
.pe-json { max-height: 26rem; margin: 12px 14px 14px; overflow: auto; background: #0f172a; padding: 12px; color: #e2e8f0; font-size: 11px; line-height: 1.55; }

/* 파일 업로드 문서셋 레일 */
.pe-rail-tools { display: grid; gap: 8px; flex: 0 0 auto; border-bottom: 1px solid var(--pe-line); padding: 12px; }
.pe-upload-btn { width: 100%; cursor: pointer; }
.pe-button.is-dashed { width: 100%; border-style: dashed; color: var(--pe-muted); font-weight: 600; }
.pe-button.is-dashed:hover { border-color: var(--pe-primary); background: var(--pe-surface); color: var(--pe-primary); }
.pe-rail-note { margin: 0; color: rgba(100,116,139,.8); font-size: 10px; line-height: 1.55; }
.pe-rail-note b { color: var(--pe-muted); font-weight: 600; }
.pe-rail-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pe-rail-sub { display: flex; align-items: center; gap: 4px; overflow: hidden; font-size: 10px; white-space: nowrap; }
.pe-rail-sub em { font-style: normal; }
.pe-rail-gt { display: inline-flex; align-items: center; gap: 2px; color: #047857; }
.pe-rail-nogt { color: rgba(100,116,139,.7); }
.pe-rail-pages { color: var(--pe-primary); }
.pe-row-actions { display: flex; flex: 0 0 auto; align-items: center; opacity: 0; transition: opacity .12s ease; }
.pe-ws-docrow:hover .pe-row-actions, .pe-ws-docrow:focus-within .pe-row-actions { opacity: 1; }
.pe-row-actions button { width: 26px; height: 26px; display: grid; place-items: center; border: 0; background: transparent; color: var(--pe-muted); cursor: pointer; }
.pe-row-actions button:hover { background: #fff; color: var(--pe-primary); }
.pe-row-actions button.is-danger:hover { color: #e11d48; }
.pe-row-actions button[data-pe-action="pick-gt"]:hover, .pe-row-actions button[data-pe-action="pick-gt"]:focus-visible { color: #047857; }   /* 정답 연결 = 레일의 정답 표시와 같은 초록 */
.pe-row-actions button[data-pe-action="clear-gt"]:hover, .pe-row-actions button[data-pe-action="clear-gt"]:focus-visible { color: #e11d48; }   /* 정답 제거 = 문서 삭제와 같은 빨강 */

/* 끌어다 놓기 */
.pe-workspace { position: relative; }
.pe-drop-overlay { position: absolute; z-index: 30; inset: 0; display: none; place-items: center; border: 2px dashed var(--pe-primary); background: rgba(234,241,255,.9); pointer-events: none; }
.pe-workspace.is-dropping .pe-drop-overlay { display: grid; }
.pe-drop-overlay div { display: grid; justify-items: center; gap: 6px; color: var(--pe-primary); text-align: center; }
.pe-drop-overlay strong { font-size: 14px; }
.pe-drop-overlay p { margin: 0; color: var(--pe-muted); font-size: 12px; }

/* 문서 미리보기 */
.pe-doc-pdf { width: 100%; height: 100%; min-height: 520px; border: 1px solid var(--pe-line); background: #fff; }
/* 문서 미리보기 — 공용 문서 보기 툴바(.dvt-bar)로 확대와 회전을 한다. 확대는 폭으로, 회전은 틀째 돌린다(2026-09-30 Benson). */
.pe-doc-frame { flex: 0 0 auto; width: calc(min(100%, 560px) * var(--pe-zoom, 1)); max-width: none; margin: 0 auto; transform-origin: center top; transition: transform .15s ease; }
.pe-doc-frame .pe-doc-img { width: 100%; max-width: none; }
.pe-doc-frame.is-pdf { width: calc(100% * var(--pe-zoom, 1)); height: calc(100% * var(--pe-zoom, 1)); min-height: calc(520px * var(--pe-zoom, 1)); }
.pe-doc-frame.is-pdf .pe-doc-pdf { width: 100%; height: 100%; }
.pe-ws-viewer .dvt-bar { min-height: 46px; }   /* 옆 열 머리(46px)와 줄을 맞춘다 */
/* 추출 페이지 범위 — 2페이지 이상 문서에서만. 툴바를 DEEP OCR과 같게 두려고 문서셋 목록의 선택된 문서 줄에 둔다 */
.pe-rail-pages-edit { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--pe-muted); font-size: 10.5px; white-space: nowrap; cursor: default; }
.pe-rail-pages-edit input { width: 100%; min-width: 0; height: 24px; border: 1px solid var(--pe-border); background: var(--pe-surface); padding: 0 6px; color: var(--pe-text); font-size: 11px; outline: none; }
.pe-rail-pages-edit input:focus { border-color: var(--pe-primary); }
.pe-rail-pages-edit.is-invalid input { border-color: #e34d59; }   /* 문서 페이지 수를 넘는 번호 */

/* 템플릿 카드 배지 */

/* C 만들기 모달 */
.pe-ced > header h2 { display: flex; align-items: center; gap: 8px; }
.pe-ced-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--pe-line); padding: 8px 18px; }
.pe-ced-tabs button { border: 1px solid var(--pe-border); background: var(--pe-surface); padding: 4px 10px; color: var(--pe-muted); font-size: 11px; font-weight: 600; cursor: pointer; }
.pe-ced-tabs button.is-active { border-color: var(--pe-primary); background: var(--pe-primary); color: #fff; }
.pe-ced .pe-modal-body { padding: 16px 18px; }
.pe-ced-table { width: 100%; border: 1px solid var(--pe-line); border-collapse: collapse; font-size: 13px; }
.pe-ced-table th { border-bottom: 1px solid var(--pe-line); background: #f8fafc; padding: 8px 10px; color: #64748b; font-size: 12px; font-weight: 600; text-align: left; }
.pe-ced-table th:last-child { width: 44px; }
.pe-ced-table td { border-top: 1px solid var(--pe-line); padding: 0; }
.pe-ced-key { width: 32%; border-right: 1px solid var(--pe-line); background: #f3f4f6; }
.pe-ced-table input { width: 100%; height: 36px; border: 0; background: transparent; padding: 0 10px; color: var(--pe-text); font-size: 13px; outline: none; }
.pe-ced-table input:focus { background: #fff; box-shadow: inset 0 0 0 1px var(--pe-primary); }
.pe-ced-group { display: block; padding: 9px 10px; color: rgba(100,116,139,.8); font-size: 12px; }
/* 그룹과 표 행 — 이름은 굵게, 안쪽 필드는 들여쓰기(2026-10-01) */
.pe-ced-grouprow td { background: #f8fafc; }
.pe-ced-grouprow .pe-ced-key input { font-weight: 700; }
.pe-ced-addrow td { border-top: 1px dashed var(--pe-line); padding: 0; }
.pe-ced-addrow button { display: inline-flex; align-items: center; gap: 4px; width: 100%; height: 30px; border: 0; background: transparent; padding-right: 10px; color: var(--pe-primary); font-size: 11.5px; font-weight: 600; text-align: left; cursor: pointer; }
.pe-ced-addrow button:hover { background: var(--pe-primary-weak); }
.pe-ced-act { text-align: center; }
.pe-ced-act button { width: 28px; height: 28px; border: 0; background: transparent; color: var(--pe-muted); cursor: pointer; }
.pe-ced-act button:hover { color: #e34d59; }
.pe-ced-add { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; width: auto; margin-top: 10px; }
.pe-ced-foot { display: flex; align-items: center; gap: 8px; }
.pe-ced-foot input { min-width: 0; flex: 1; height: 36px; border: 1px solid var(--pe-border); background: var(--pe-surface); padding: 0 12px; color: var(--pe-text); font-size: 13px; outline: none; }
.pe-ced-foot input:focus { border-color: var(--pe-primary); }

@media (max-width: 1280px) {
  .pe-sum-grid, .pe-sum-grid.is-3 { grid-template-columns: minmax(0, 1fr); }
}

/* 2026-09-29 채점 제외(스키마에 없는 필드) 표시 — 실코드 채점 범위와 맞춤 */
.pe-fc-table td.is-skip { color: #94a3b8; background: #f8fafc; }

/* 2026-09-29 목록 카드와 툴바를 템플릿 관리(vlmops.css의 vlmops-card, vlmops-list-toolbar)와 같은 치수로 맞춤 */
.pe-tpl-card { position: relative; min-height: 180px; display: flex; flex-direction: column; border: 1px solid #e5e7eb; background: #fff; padding: 20px; cursor: pointer; transition: border-color .14s ease, box-shadow .14s ease; }
.pe-tpl-card:hover, .pe-tpl-card:focus-within { border-color: rgba(41,112,255,.7); box-shadow: 0 8px 22px rgba(15,23,42,.07); }
.pe-tpl-open { position: absolute; z-index: 1; inset: 0; border: 0; background: transparent; cursor: pointer; }
.pe-tpl-open:focus-visible { outline: 2px solid #2970ff; outline-offset: -3px; }
.pe-version-chip { display: inline-flex; min-height: 20px; flex: 0 0 auto; align-items: center; border: 1px solid #c9d9ff; background: #eaf1ff; padding: 2px 7px; color: #1b58d4; font-size: 10px; font-weight: 750; line-height: 1; }
.pe-gallery-tools { gap: 12px; margin-bottom: 20px; }
.pe-gallery-tools .pe-gsearch { flex: 0 1 288px; width: 288px; border-color: #d4d4d4; padding: 0 10px; }
.pe-gallery-tools .pe-gsearch input { min-height: 34px; }
.pe-gallery-tools .pe-gsort { margin-left: auto; font-size: 11px; color: #64748b; }
.pe-gallery-tools .pe-gsort .pe-select { min-width: 128px; width: 128px; }
.pe-gallery-tools .pe-mode-tabs { margin-right: 0; }
.pe-page-head p { color: #4a5565; }   /* 템플릿 관리 페이지 설명과 같은 색 */

/* 2026-09-29 버전 비교 카드의 태그 두 개만 실코드 CompareCard 배지 모양(Badge brand, gray)을 따른다. 카드 틀은 템플릿 관리 카드 */
.pe-tpl-card .pe-tpl-icon { margin-bottom: 0; }
.pe-tag { display: inline-flex; align-items: center; border: 1px solid #d4d4d4; background: #fff; padding: 1px 7px; color: #4a5565; font-size: 11px; font-weight: 500; line-height: 16px; white-space: nowrap; }
.pe-tag.is-brand { border-color: #eaf1ff; background: #eaf1ff; color: #1b58d4; }
.pe-tag.is-amber { border-color: #fffbeb; background: #fffbeb; color: #b45309; }
.pe-tpl-warn { color: #b45309; }

/* 2026-09-29 PPASS 동일화: 세 영역 폭 조절(문서셋 px, 비교 패널 %, 가운데가 나머지), 삭제 확인 창 */
.pe-workspace { display: flex; }
.pe-workspace > .pe-ws-datasets, .pe-workspace > .pe-ws-compare { flex: 0 0 auto; }
.pe-workspace > .pe-ws-viewer { flex: 1 1 0; min-width: 240px; }
.pe-resize { flex: 0 0 4px; width: 4px; background: var(--pe-line); cursor: col-resize; transition: background-color .12s ease; }
.pe-resize:hover { background: rgba(41,112,255,.6); }
.pe-confirm-card { width: min(94vw, 420px); }
.pe-confirm-detail { margin: 0; padding: 14px 18px; color: var(--pe-muted); font-size: 12px; line-height: 1.55; }
.pe-button.is-danger { border-color: #e34d59; background: #e34d59; color: #fff; }
.pe-button.is-danger:hover { border-color: #c9303d; background: #c9303d; }