:root {
      --bg: #f5f5f5;
      --panel: #ffffff;
      --text: #111111;
      --muted: #666666;
      --soft: #8a8a8a;
      --line: #dddddd;
      --accent: #c40000;
      --shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    }

    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      min-height: 100%;
      background: var(--bg);
      color: var(--text);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      overscroll-behavior: none;
      overscroll-behavior-y: none;
    }
    body {
      min-height: 100dvh;
      overscroll-behavior: none;
      overscroll-behavior-y: none;
    }

    .app {
      width: 100%;
      min-height: 100dvh;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .panel {
      background: var(--panel);
      border-radius: 16px;
      box-shadow: var(--shadow);
      padding: 10px;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .title { font-size: 20px; font-weight: 900; }

    .topbar-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .link-btn,
    .small-btn,
    .action-btn,
    .mode-btn,
    .key-btn {
      border: 1px solid var(--line);
      background: #fff;
      color: #222;
      border-radius: 12px;
      cursor: pointer;
      font-weight: 900;
      text-decoration: none;
      white-space: nowrap;
    }

    .link-btn { padding: 9px 11px; font-size: 13px; }
    .small-btn { min-height: 36px; padding: 7px 10px; font-size: 13px; }
    .action-btn { min-height: 42px; padding: 8px 10px; font-size: 14px; }
    .action-btn.primary, .small-btn.primary, .mode-btn.active {
      background: #111;
      border-color: #111;
      color: #fff;
    }
    .action-btn:disabled, .small-btn:disabled { opacity: .45; cursor: not-allowed; }

    .scan-head {
      display: grid;
      grid-template-columns: auto auto auto 1fr auto auto;
      gap: 6px;
      align-items: center;
    }

    .mode-btn,
    .mode-select {
      min-height: 42px;
      padding: 8px 12px;
      font-size: 14px;
    }

    .mode-select {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      color: var(--ink);
      font-weight: 900;
    }

    .scan-status {
      min-width: 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 900;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .zipocr-barcode-badge {
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      padding: 6px 10px;
      color: #444;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }
    .zipocr-barcode-badge.busy { background:#111; color:#fff; border-color:#111; }
    .zipocr-barcode-badge.ok { background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
    .zipocr-barcode-badge.fail { background:#fef2f2; color:#991b1b; border-color:#fecaca; }

    .zipocr-barcode-guide {
      display: none;
      width: 100%;
      margin-top: 8px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #111;
      overflow: hidden;
    }

    .zipocr-barcode-panel.scanning .zipocr-barcode-guide {
      display: grid;
      gap: 8px;
      padding: 8px;
    }

    .zipocr-barcode-video-wrap,
    .zipocr-barcode-canvas-wrap {
      position: relative;
      width: 100%;
      background: #111;
      overflow: hidden;
      border-radius: 10px;
    }

    .zipocr-barcode-video-wrap {
      aspect-ratio: var(--zipocr-video-aspect, 648 / 282);
    }

    .zipocr-barcode-canvas-wrap {
      aspect-ratio: var(--zipocr-canvas-aspect, 648 / 282);
    }

    .zipocr-barcode-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      display: block;
      background: #000;
    }

    .zipocr-barcode-debug-canvas {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      background: #000;
    }

    .zipocr-barcode-roi {
      position: absolute;
      inset: 0;
      border: 2px solid rgba(255,255,255,.95);
      border-radius: 10px;
      box-shadow: none;
      pointer-events: none;
    }

    .zipocr-barcode-roi-line {
      position: absolute;
      left: 8px;
      right: 8px;
      top: 50%;
      border-top: 2px dashed rgba(255,255,255,.75);
    }


    .compact-input-row {
      display: grid;
      grid-template-columns: auto minmax(0, .75fr) minmax(0, 1.25fr) auto;
      gap: 6px;
      align-items: center;
    }

    .zip-prefix {
      min-height: 46px;
      padding: 0 10px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #f7f7f7;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: 1000;
      color: #111;
    }

    .compact-input {
      min-width: 0;
      width: 100%;
      min-height: 46px;
      border: 2px solid var(--line);
      border-radius: 12px;
      padding: 8px 10px;
      font-size: 24px;
      font-weight: 1000;
      text-align: center;
      background: #fff;
      color: #111;
      caret-color: transparent;
    }

    .compact-input.active {
      border-color: #111;
      background: #f7f7f7;
    }

    .candidate-panel {
      display: none;
      flex-direction: column;
      gap: 8px;
    }
    .candidate-panel.show { display: flex; }
    .candidate-title { font-size: 14px; font-weight: 900; color: var(--muted); }
    .candidate-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }
    .candidate-btn {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      min-height: 46px;
      padding: 8px 6px;
      font-size: 16px;
      font-weight: 900;
      color: #111;
      cursor: pointer;
      word-break: keep-all;
    }
    .candidate-btn.selected { border-color: #444; background: #f0f0f0; }

    .result-panel {
      min-height: 170px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 8px;
      text-align: center;
    }
    .line1 { font-size: clamp(20px, 4.8vw, 28px); font-weight: 800; line-height: 1.35; word-break: keep-all; }
    .line2 { font-size: clamp(24px, 5.4vw, 38px); font-weight: 900; line-height: 1.2; color: var(--accent); word-break: keep-all; }
    .line3 { font-size: clamp(16px, 3.8vw, 21px); font-weight: 700; color: #222; line-height: 1.35; word-break: keep-all; }
    .line4 { font-size: 14px; color: var(--muted); line-height: 1.35; word-break: keep-all; }

    .list-panel {
      display: none;
      flex-direction: column;
      gap: 8px;
    }
    .list-panel.show { display: flex; }
    .list-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .list-title { font-size: 14px; font-weight: 900; color: var(--muted); }
    .list-actions { display: flex; gap: 8px; }
    .result-table-wrap {
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow: auto;
      max-height: 280px;
      background: #fff;
    }
    table.result-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      font-size: 14px;
    }
    .result-table thead th {
      position: sticky;
      top: 0;
      background: #f7f7f7;
      z-index: 1;
      font-size: 13px;
      font-weight: 900;
      color: #444;
      border-bottom: 1px solid var(--line);
      padding: 10px 8px;
      text-align: center;
    }
    .result-table tbody td {
      border-bottom: 1px solid #eee;
      padding: 12px 8px;
      text-align: center;
      font-weight: 800;
      color: #111;
      word-break: break-word;
    }
    .result-table tbody tr { cursor: pointer; background: #fff; }
    .result-table tbody tr.selected { background: #e7e7e7; font-weight: 900; }
    .result-table tbody tr:last-child td { border-bottom: 0; }
    .empty-list { padding: 16px; text-align: center; color: var(--muted); font-size: 14px; font-weight: 800; }

    .keypad-panel {
      display: none;
      position: fixed;
      left: 8px;
      right: 8px;
      bottom: calc(8px + env(safe-area-inset-bottom));
      z-index: 1000;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      border: 1px solid var(--line);
      box-shadow: 0 8px 28px rgba(0,0,0,.18);
    }

    body.touch-keypad-open .keypad-panel {
      display: grid;
    }

    body.touch-keypad-open .app {
      padding-bottom: calc(var(--touch-keypad-space, 196px) + env(safe-area-inset-bottom));
    }

    body.touch-keypad-open.keypad-fan-mode .app {
      padding-bottom: calc(var(--touch-keypad-space, 420px) + env(safe-area-inset-bottom));
    }

    body.touch-keypad-open.keypad-fan-mode .keypad-panel {
      max-height: calc(100dvh - 12px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
      overflow-y: auto;
    }

    .key-btn {
      min-height: 52px;
      padding: 8px 6px;
      font-size: 20px;
      background: #fff;
    }
    .key-btn.command { font-size: 15px; }
    .key-btn.primary { background: #111; color: #fff; border-color: #111; }
    .key-btn { touch-action: none; user-select: none; }

    .keypad-mode-row {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      align-items: center;
    }

    .keypad-mode-btn {
      min-height: 38px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      color: #222;
      font-size: 13px;
      font-weight: 1000;
      cursor: pointer;
      touch-action: manipulation;
    }

    .keypad-mode-btn.active {
      background: #111;
      border-color: #111;
      color: #fff;
    }

    .keypad-gesture-preview {
      grid-column: 1 / -1;
      min-height: 24px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 900;
      text-align: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .keypad-panel.fan-layout {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .keypad-panel.fan-layout [data-keypad-digit="1"] { order: 10; }
    .keypad-panel.fan-layout [data-keypad-digit="2"] { order: 11; }
    .keypad-panel.fan-layout [data-keypad-digit="3"] { order: 12; }
    .keypad-panel.fan-layout [data-keypad-digit="4"] { order: 20; }
    .keypad-panel.fan-layout [data-keypad-digit="5"] { order: 21; }
    .keypad-panel.fan-layout [data-keypad-digit="6"] { order: 22; }
    .keypad-panel.fan-layout [data-keypad-digit="7"] { order: 30; }
    .keypad-panel.fan-layout [data-keypad-digit="8"] { order: 31; }
    .keypad-panel.fan-layout [data-keypad-digit="9"] { order: 32; }
    .keypad-panel.fan-layout #keypadBackspace { order: 40; }
    .keypad-panel.fan-layout [data-keypad-digit="0"] { order: 41; }
    .keypad-panel.fan-layout #keypadEnter { order: 42; }

    .keypad-panel.fan-layout .keypad-mode-row { order: 1; }
    .keypad-panel.fan-layout .keypad-gesture-preview { order: 2; }

    .keypad-panel.fan-layout .key-btn[data-keypad-digit="5"] {
      background: #f7f7f7;
      border-color: #bbb;
    }

    /* P7 R4: GRID input mode (pad, cells, grid-layout) removed. */

    .parcel-queue-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 8px;
      align-items: center;
    }

    .parcel-queue-status {
      min-width: 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 900;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .parcel-player-panel {
      display: none;
      flex-direction: column;
      gap: 10px;
    }

    .parcel-player-panel.show {
      display: flex;
    }

    .parcel-player-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .parcel-player-title {
      font-size: 15px;
      font-weight: 900;
      color: #111;
    }

    .parcel-player-count {
      color: var(--muted);
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
    }

    .parcel-barcode-wrap {
      min-height: 150px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      padding: 8px;
    }

    .parcel-barcode-svg {
      width: 100%;
      max-width: 520px;
      height: 130px;
    }

    .parcel-tracking-text {
      font-size: clamp(24px, 7vw, 42px);
      font-weight: 1000;
      letter-spacing: .04em;
      text-align: center;
      color: #111;
      word-break: break-all;
    }

    .parcel-player-message {
      min-height: 22px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      text-align: center;
    }

    .parcel-player-actions {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
    }

    .parcel-player-main-next {
      min-height: 54px;
      font-size: 18px;
    }


    .parcel-light-control {
      display: grid;
      grid-template-columns: auto auto minmax(90px, 1fr) auto;
      gap: 8px;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #f7f7f7;
      padding: 8px;
    }

    .parcel-light-label {
      color: var(--muted);
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
    }

    .parcel-light-slider {
      width: 100%;
      min-width: 0;
    }

    .parcel-light-status {
      color: var(--muted);
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }

    .parcel-light-video {
      display: none;
    }

    @media (max-width: 420px) {
      .scan-head { grid-template-columns: auto auto minmax(0, 1fr) auto auto; }
      .parcel-queue-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .parcel-queue-status { grid-column: 1 / -1; }
      .parcel-queue-panel .small-btn { width: 100%; }
      .parcel-player-actions { grid-template-columns: 1fr; }
      .parcel-light-control { grid-template-columns: 1fr 1fr; }
      .parcel-light-slider { grid-column: 1 / -1; }
      .parcel-light-status { grid-column: 1 / -1; }
    }


    .scan-flash-overlay {
      position: fixed;
      inset: 0;
      z-index: 3000;
      pointer-events: none;
      opacity: 0;
      background: rgba(196, 0, 0, 0.78);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: clamp(28px, 8vw, 56px);
      font-weight: 1000;
      line-height: 1.25;
      text-align: center;
      white-space: pre-line;
      transition: opacity 80ms ease-out;
    }

    .scan-flash-overlay.show {
      opacity: 1;
    }

    .scan-flash-overlay.duplicate {
      background: rgba(80, 80, 80, 0.78);
    }

    .scan-flash-overlay.error {
      background: rgba(153, 27, 27, 0.88);
    }


    /* P7 R3: code generator panel styles removed. */



/* v4.4: compact_v2의 정상 동작 DOM/JS를 그대로 유지하고 배치만 고정 영역으로 변경 */
:root {
  --v44-red: #9d1010;
  --v44-blue: #174a78;
  --v44-green: #1f6a3b;
  --v44-amber: #d99a00;
}
html, body { height: 100%; overflow: hidden; background: #111; }
body { margin: 0; }
.app {
  height: 100dvh;
  min-height: 0;
  padding: 0;
  gap: 0;
  display: grid;
  grid-template-rows: 50px 48px minmax(0, 1fr) 88px 62px;
  background: #111;
}
.panel { border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.topbar { grid-row: 1; padding: 0 10px; background: #171717; color: #fff; border-bottom: 1px solid #333; }
.title { font-size: 18px; }
.version-badge { color: #ffd34d; font-size: 14px; }
.topbar .link-btn { display: none; }
.topbar .small-btn { min-height: 34px; border-radius: 0; background: #3a3a3a; color: #fff; border: 0; }
.workflow-panel { grid-row: 2; display: grid; grid-template-columns: 130px 1fr; align-items: center; background: #292929; color: #fff; }
.workflow-mode { height: 100%; display:flex; align-items:center; justify-content:center; background: var(--v44-blue); font-weight: 900; }
.workflow-hint { padding: 0 10px; font-size: 14px; font-weight: 800; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#barcodePanel { grid-row: 3; min-height: 0; display:flex; flex-direction:column; background:#090909; }
.scan-head { min-height: 58px; display:grid; grid-template-columns: 1fr 92px; padding:0; background:var(--v44-red); }
.scan-head #barcodeModeToggle, .scan-head #barcodeState { display:none; }
.scan-status { display:flex; align-items:center; justify-content:center; color:#fff; font-size:17px; font-weight:900; }
#compactScanButton { display:block !important; min-height:58px; border:0; border-radius:0; background:#f0b000; color:#111; font-size:19px; font-weight:1000; }
.zipocr-barcode-guide { flex:1; min-height:0; margin:0; border:0; border-radius:0; }
.zipocr-barcode-panel.scanning .zipocr-barcode-guide { display:block; padding:0; }
.zipocr-barcode-video-wrap { height:100%; aspect-ratio:auto; border-radius:0; }
.zipocr-barcode-roi { inset:22% 7%; border-radius:0; border:3px solid rgba(255,255,255,.95); }
.zipocr-barcode-canvas-wrap { display:none; }
.hidden-original-controls { display:none !important; }
.compact-input-row { grid-row:4; display:grid; grid-template-columns:62px 1fr 1.25fr 78px; gap:0; background:#eee; border-top:3px solid #111; }
.zip-prefix, .compact-input, #compactSearchButton { min-height:85px; border:0; border-radius:0; margin:0; }
.zip-prefix { background:#d3d3d3; font-size:27px; }
.compact-input { background:#fff; border-left:2px solid #bbb; font-size:28px; }
.compact-input.active { background:#fff0ad; outline:4px solid var(--v44-amber); outline-offset:-4px; }
#compactSearchButton { background:var(--v44-green); color:#fff; font-size:17px; }
.result-panel { grid-row:5; padding:7px 12px; background:var(--v44-blue); color:#fff; overflow:hidden; }
.result-panel .line1 { font-size:18px; font-weight:1000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.result-panel .line2 { font-size:14px; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.result-panel .line3, .result-panel .line4 { display:none; }
#parcelQueuePanel, #parcelPlayerPanel { display:none !important; }
.candidate-panel, .list-panel, .keypad-panel { position:fixed; left:0; right:0; bottom:0; z-index:50; border-radius:0; box-shadow:0 -5px 18px rgba(0,0,0,.4); }
.candidate-panel { max-height:56dvh; overflow:auto; }
.list-panel { top:50px; overflow:auto; }
.keypad-panel { background:#202020; }
.keypad-mode-row { grid-template-columns:repeat(3,1fr) !important; }
.scan-flash-overlay { position:fixed; inset:0; z-index:9999; background:var(--v44-red); color:#fff; }
@media (max-width:420px) {
  .compact-input-row { grid-template-columns:54px 1fr 1.15fr 68px; }
  .zip-prefix, .compact-input, #compactSearchButton { min-height:82px; }
}

/* v4.5: 등록 / 조회 / 송장 3모드 복구 */
.workflow-panel {
  grid-template-columns: minmax(0, 390px) 1fr;
}
.workflow-modes {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  min-width: 0;
}
.workflow-mode-button {
  min-width: 0;
  height: 100%;
  padding: 0 5px;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.24);
  border-radius: 0;
  background: #3b3b3b;
  color: #ddd;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.1;
}
.workflow-mode-button.active {
  background: var(--v44-blue);
  color: #fff;
  box-shadow: inset 0 -4px 0 #ffd34d;
}
body[data-workflow-mode="lookup"] .workflow-mode-button.active { background: #6a4314; }
body[data-workflow-mode="parcel"] .workflow-mode-button.active { background: #5b245f; }
body[data-workflow-mode="parcel"] #parcelQueuePanel {
  display: grid !important;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  min-height: 62px;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #292929;
  color: #fff;
}
body[data-workflow-mode="parcel"] #parcelPlayerPanel.open,
body[data-workflow-mode="parcel"] #parcelPlayerPanel[style*="display: block"] {
  display: block !important;
}
@media (max-width: 520px) {
  .workflow-panel { grid-template-columns: 1fr; }
  .workflow-hint { display: none; }
  .workflow-mode-button { font-size: 12px; padding: 0 2px; }
}


/* v4.6: 모드 버튼 바로 아래 한 줄 전체를 스캔 버튼으로 사용 */
.scan-head {
  min-height: 58px;
  display: block;
  padding: 0;
  background: transparent;
}
.scan-head #barcodeModeToggle,
.scan-head #barcodeMessage,
.scan-head #barcodeState {
  display: none !important;
}
#compactScanButton {
  width: 100%;
  height: 58px;
  min-height: 58px;
  display: block !important;
  border: 0;
  border-radius: 0;
  background: #d99a00;
  color: #111;
  font-size: 20px;
  font-weight: 1000;
}
#compactScanButton:active {
  filter: brightness(.9);
}


/* v4.7: 송장 모드 전용 수집/재생 화면 */
.parcel-replay-mode-button,
.parcel-mode-dashboard {
  display: none;
}

body[data-workflow-mode="parcel"] .scan-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 58px;
}

body[data-workflow-mode="parcel"] #compactScanButton {
  width: auto;
  background: #d99a00;
  color: #111;
}

body[data-workflow-mode="parcel"] #compactScanButton::after {
  content: "";
}

body[data-workflow-mode="parcel"] .parcel-replay-mode-button {
  display: block;
  height: 58px;
  border: 0;
  border-left: 2px solid #111;
  border-radius: 0;
  background: #5b245f;
  color: #fff;
  font-size: 20px;
  font-weight: 1000;
}

body[data-workflow-mode="parcel"] #barcodePanel {
  grid-row: 3 / 6;
  background: #111;
}

body[data-workflow-mode="parcel"] #barcodePanel:not(.scanning) .zipocr-barcode-guide {
  display: none !important;
}

body[data-workflow-mode="parcel"] .compact-input-row,
body[data-workflow-mode="parcel"] .candidate-panel,
body[data-workflow-mode="parcel"] .result-panel,
body[data-workflow-mode="parcel"] #resultListPanel,
body[data-workflow-mode="parcel"] #keypadPanel {
  display: none !important;
}

body[data-workflow-mode="parcel"] .parcel-mode-dashboard {
  display: flex;
  position: absolute;
  top: 156px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  flex-direction: column;
  justify-content: center;
  background: #111;
  color: #fff;
  text-align: center;
  overflow: hidden;
}

body[data-workflow-mode="parcel"] #barcodePanel.scanning + .parcel-mode-dashboard,
body[data-workflow-mode="parcel"] #barcodePanel.scanning ~ .parcel-mode-dashboard {
  display: none;
}

.parcel-dashboard-collection {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
}

.parcel-dashboard-label {
  font-size: 18px;
  font-weight: 800;
  color: #bbb;
}

.parcel-dashboard-count {
  margin-top: 4px;
  font-size: 52px;
  line-height: 1;
  font-weight: 1000;
  color: #fff;
}

.parcel-dashboard-count span {
  color: #ffd34d;
}

.recent-label {
  margin-top: 28px;
}

.parcel-dashboard-recent {
  margin-top: 6px;
  font-size: 25px;
  font-weight: 900;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}

.parcel-dashboard-playback {
  display: none;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  justify-content: center;
  padding: 18px;
  background: #171717;
}

.parcel-mode-dashboard.playback .parcel-dashboard-collection {
  display: none;
}

.parcel-mode-dashboard.playback .parcel-dashboard-playback {
  display: flex;
}

.parcel-dashboard-barcode-label {
  font-size: 20px;
  font-weight: 900;
  color: #bbb;
}

.parcel-dashboard-playback-number {
  margin: 18px 0 28px;
  font-size: 34px;
  font-weight: 1000;
  letter-spacing: .06em;
  overflow-wrap: anywhere;
}

.parcel-dashboard-nav {
  display: grid;
  grid-template-columns: 92px 1fr 92px;
  align-items: center;
  gap: 10px;
}

.parcel-dashboard-nav .action-btn {
  min-height: 54px;
  border-radius: 0;
}

.parcel-dashboard-position {
  font-size: 22px;
  font-weight: 1000;
}

body[data-workflow-mode="parcel"] #parcelQueuePanel {
  display: none !important;
}

body[data-workflow-mode="parcel"] #parcelPlayerPanel {
  display: none !important;
}

body[data-workflow-mode="parcel"] #parcelPlayerPanel.parcel-player-mounted {
  display: contents !important;
}


/* v4.8: 실제 CODE128 바코드와 붉은빛 자동넘김 UI를 송장 재생 화면에 이식 */
.parcel-playback-mount {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

.parcel-playback-mount .parcel-barcode-wrap {
  display: flex;
  min-height: 150px;
  align-items: center;
  justify-content: center;
  margin: 4px 14px 0;
  padding: 8px;
  background: #fff;
  border: 3px solid #fff;
}

.parcel-playback-mount .parcel-barcode-svg {
  width: 100%;
  max-width: 420px;
  height: 130px;
}

.parcel-playback-mount .parcel-tracking-text {
  margin-top: 8px;
  color: #fff;
  font-size: 26px;
  font-weight: 1000;
  letter-spacing: .05em;
}

.parcel-playback-mount .parcel-player-message {
  margin: 5px 12px 8px;
  color: #aaa;
  font-size: 13px;
}

.parcel-playback-mount .parcel-light-control {
  display: grid;
  grid-template-columns: 118px auto 1fr auto;
  align-items: center;
  gap: 7px;
  margin: 2px 12px 8px;
}

.parcel-playback-mount .parcel-light-control .small-btn {
  min-height: 42px;
  font-size: 14px;
  font-weight: 900;
}

.parcel-playback-mount .parcel-light-label,
.parcel-playback-mount .parcel-light-status {
  color: #ddd;
  font-size: 12px;
  white-space: nowrap;
}

.parcel-playback-mount .parcel-light-slider {
  width: 100%;
}

.parcel-playback-mount .parcel-light-video {
  display: block;
  width: 72px;
  height: 54px;
  object-fit: cover;
  margin: 0 auto 7px;
  border: 1px solid #555;
  background: #000;
}

.parcel-playback-mount .parcel-player-actions {
  display: grid;
  grid-template-columns: 92px 1fr 92px;
  gap: 10px;
  margin: 0 12px 10px;
}

.parcel-playback-mount .parcel-player-actions .action-btn {
  min-height: 52px;
  border-radius: 0;
}

.parcel-playback-mount #parcelClosePlayerButton {
  display: none;
}

.parcel-playback-mount .parcel-player-head {
  display: none;
}


/* v4.9: 송장 재생 화면 정리 */
.parcel-playback-mount .parcel-player-message {
  display: none !important;
}

.parcel-playback-mount .parcel-light-video {
  display: none !important;
}

.parcel-playback-mount .parcel-player-actions {
  order: 3;
  grid-template-columns: 1fr 1fr;
  margin: 10px 12px 8px;
}

.parcel-playback-mount .parcel-light-control {
  order: 4;
  margin: 0 12px 10px;
}

.parcel-playback-mount .parcel-barcode-wrap {
  order: 1;
}

.parcel-playback-mount .parcel-tracking-text {
  order: 2;
}

.parcel-playback-mount #parcelClosePlayerButton {
  display: none !important;
}


/* v5.0: 현재 위치 표시 + QR/CODE128 전환 */
.parcel-playback-mount .parcel-player-actions {
  grid-template-columns: minmax(86px, 1fr) minmax(88px, auto) minmax(86px, 1fr);
  align-items: center;
}

.parcel-playback-mount .parcel-player-position {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  font-weight: 1000;
  white-space: nowrap;
}

.parcel-playback-mount .parcel-light-control {
  grid-template-columns: minmax(112px, 1fr) minmax(76px, .7fr) auto minmax(70px, 1fr) auto;
}

.parcel-playback-mount .parcel-code-type-toggle {
  min-width: 76px;
}

.parcel-playback-mount .parcel-barcode-svg.qr {
  width: min(72vw, 250px);
  max-width: 250px;
  height: min(72vw, 250px);
  max-height: 250px;
}

.parcel-playback-mount .parcel-barcode-wrap.qr-mode {
  min-height: 270px;
}

@media (max-width: 420px) {
  .parcel-playback-mount .parcel-light-control {
    grid-template-columns: 1fr 82px;
  }

  .parcel-playback-mount .parcel-light-label,
  .parcel-playback-mount .parcel-light-slider,
  .parcel-playback-mount .parcel-light-status {
    grid-column: span 1;
  }

  .parcel-playback-mount .parcel-light-slider {
    grid-column: 1 / -1;
  }
}


/* v5.1: parcel operation-state labels */
body[data-workflow-mode="parcel"] #compactScanButton,
body[data-workflow-mode="parcel"] #parcelReplayModeButton {
  min-width: 0;
}

/* v5.4: 결과 화면은 일반 문서 흐름으로 전환하여 전체 페이지를 세로 스크롤 */
html.result-view-open,
body.result-view-open {
  height: auto !important;
  min-height: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: #f2f2f2;
  overscroll-behavior-y: auto;
}
body.result-view-open .app {
  width: 100%;
  height: auto !important;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: visible !important;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: #f2f2f2;
}
body.result-view-open .topbar {
  min-height: 50px;
  flex: 0 0 auto;
}
body.result-view-open .workflow-panel {
  min-height: 48px;
  flex: 0 0 auto;
}
body.result-view-open #barcodePanel {
  min-height: 58px;
  flex: 0 0 auto;
}
body.result-view-open #barcodePanel:not(.scanning) .zipocr-barcode-guide {
  display: none !important;
}
body.result-view-open .compact-input-row {
  flex: 0 0 auto;
}
body.result-view-open .result-panel {
  min-height: 188px;
  flex: 0 0 auto;
  padding: 16px 12px 18px;
  overflow: visible;
  background: #fff;
  color: #111;
  text-align: center;
}
body.result-view-open .result-panel .line1,
body.result-view-open .result-panel .line2 {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  letter-spacing: -0.025em;
  transform-origin: center center;
}
body.result-view-open .result-panel .line1 {
  color: #111;
  line-height: 1.18;
}
body.result-view-open .result-panel .line2 {
  margin-top: 7px;
  color: #a20c0c;
  line-height: 1.14;
}
body.result-view-open .result-panel .line3,
body.result-view-open .result-panel .line4 {
  display: block;
  margin-top: 8px;
}
body.result-view-open .candidate-panel,
body.result-view-open .list-panel {
  position: static !important;
  inset: auto !important;
  z-index: 1;
  flex: 0 0 auto;
  max-height: none !important;
  box-shadow: none;
  overflow: visible !important;
}
body.result-view-open .list-panel.show {
  display: flex;
}
body.result-view-open .result-table-wrap {
  width: 100%;
  max-height: none !important;
  overflow-x: auto;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch;
}
body.result-view-open .result-table {
  min-width: 100%;
}

/* 첫 두 줄은 실제 가로 폭을 측정해 JS가 93~94% 폭에 맞추며, 아래 값은 초기 렌더링용 */
.result-panel .line1 {
  font-size: clamp(20px, 6.2vw, 38px);
}
.result-panel .line2 {
  font-size: clamp(24px, 7.2vw, 44px);
}



/* v5.5: 개선 1차 마무리 - 등록 입력/키패드 흐름 및 일회성 구지번 모드 */
body[data-workflow-mode="register"]:not(.result-view-open) .app,
body[data-workflow-mode="lookup"]:not(.result-view-open) .app {
  height: 100dvh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  background: #111;
}

body[data-workflow-mode="register"]:not(.result-view-open) .topbar,
body[data-workflow-mode="lookup"]:not(.result-view-open) .topbar {
  flex: 0 0 50px;
}
body[data-workflow-mode="register"]:not(.result-view-open) .workflow-panel,
body[data-workflow-mode="lookup"]:not(.result-view-open) .workflow-panel {
  flex: 0 0 48px;
}
body[data-workflow-mode="register"]:not(.result-view-open) #barcodePanel,
body[data-workflow-mode="lookup"]:not(.result-view-open) #barcodePanel {
  flex: 0 0 58px;
  min-height: 58px;
}
body[data-workflow-mode="register"]:not(.result-view-open) #barcodePanel.scanning,
body[data-workflow-mode="lookup"]:not(.result-view-open) #barcodePanel.scanning {
  flex: 1 1 auto;
  min-height: 220px;
}

/* 등록 모드: 구지번/도로명 1/4 + 스캔 3/4 */
body[data-workflow-mode="register"] .scan-head {
  display: grid !important;
  grid-template-columns: minmax(74px, 1fr) minmax(0, 3fr);
  width: 100%;
  height: 58px;
  min-height: 58px;
}
body[data-workflow-mode="register"] .scan-head #barcodeModeToggle {
  display: block !important;
  width: 100%;
  height: 58px;
  min-height: 58px;
  padding: 0 4px;
  border: 0;
  border-right: 2px solid #111;
  border-radius: 0;
  background: #454545;
  color: #fff;
  font-size: clamp(13px, 3.8vw, 17px);
  font-weight: 1000;
}
body[data-workflow-mode="register"] .scan-head #barcodeModeToggle.active {
  background: #174a78;
  color: #fff;
}
body[data-workflow-mode="register"] #compactScanButton {
  width: 100%;
  min-width: 0;
}

/* 조회 모드는 스캔 버튼만 남긴다. */
body[data-workflow-mode="lookup"] .scan-head {
  display: block !important;
  width: 100%;
  height: 58px;
}
body[data-workflow-mode="lookup"] .scan-head #barcodeModeToggle {
  display: none !important;
}
body[data-workflow-mode="lookup"] #compactScanButton {
  width: 100%;
}

/* 우편번호/메인번호 줄은 스캔 버튼과 같은 높이로 축소 */
body[data-workflow-mode="register"] .compact-input-row {
  flex: 0 0 58px;
  min-height: 58px;
  height: 58px;
  grid-template-columns: 56px minmax(72px, .85fr) minmax(108px, 1.45fr) 72px;
  gap: 0;
  border-top: 2px solid #111;
  background: #e8e8e8;
}
body[data-workflow-mode="register"] .zip-prefix,
body[data-workflow-mode="register"] .compact-input,
body[data-workflow-mode="register"] #compactSearchButton {
  height: 56px;
  min-height: 56px;
  border: 0;
  border-radius: 0;
  margin: 0;
}
body[data-workflow-mode="register"] .zip-prefix {
  padding: 0 4px;
  font-size: clamp(22px, 6vw, 28px);
}
body[data-workflow-mode="register"] .compact-input {
  padding: 4px 6px;
  border-left: 2px solid #bbb;
  font-size: clamp(22px, 6.5vw, 30px);
}
body[data-workflow-mode="register"] #compactSearchButton {
  font-size: clamp(15px, 4.3vw, 18px);
}

/* 가상 키보드는 화면 하단 고정이 아니라 입력줄 바로 아래의 일반 흐름 */
body[data-workflow-mode="register"] .keypad-panel {
  position: static !important;
  inset: auto !important;
  z-index: 1;
  flex: 0 0 auto;
  width: 100%;
  max-height: none !important;
  margin: 0;
  padding: 8px;
  border: 0;
  border-top: 2px solid #111;
  border-radius: 0;
  box-shadow: none;
  overflow: visible !important;
  background: #202020;
}
body[data-workflow-mode="register"].touch-keypad-open .keypad-panel {
  display: grid;
}
body[data-workflow-mode="register"].touch-keypad-open .app,
body[data-workflow-mode="register"].touch-keypad-open.keypad-fan-mode .app {
  padding-bottom: 0 !important;
}

/* 등록 대기 중의 청록색 결과 안내판은 숨기고 실제 검색 결과부터 표시 */
body[data-workflow-mode="register"]:not(.result-view-open) .result-panel {
  display: none;
}
body[data-workflow-mode="register"]:not(.result-view-open) .candidate-panel {
  position: static !important;
  inset: auto !important;
  flex: 0 0 auto;
  max-height: none !important;
  border-radius: 0;
  box-shadow: none;
  overflow: visible !important;
}

/* 조회 대기 화면은 스캔 아래를 완전히 비운다. 조회 성공/실패 결과만 다시 표시한다. */
body[data-workflow-mode="lookup"] .compact-input-row,
body[data-workflow-mode="lookup"] .keypad-panel,
body[data-workflow-mode="lookup"] .candidate-panel,
body[data-workflow-mode="lookup"] #resultListPanel {
  display: none !important;
}
body[data-workflow-mode="lookup"]:not(.result-view-open) .result-panel {
  display: none !important;
}

@media (max-width: 360px) {
  body[data-workflow-mode="register"] .compact-input-row {
    grid-template-columns: 48px minmax(65px, .8fr) minmax(96px, 1.4fr) 64px;
  }
}

/* 통상/소포 보조 정보: full 화면과 동일 */
.result-panel .compact-delivery-detail-start,
.result-panel .compact-delivery-detail-start + .line4 {
  color: #777;
  font-size: 15px;
  line-height: 1.7;
  text-align: center;
}
.result-panel .compact-delivery-detail-start {
  margin-top: 10px;
}
.result-panel .compact-delivery-detail-start + .line4 {
  margin-top: 0;
}


/* v6.5-r9: compact 화면 상태/크기 보정 및 full 이동 버튼 */

/* 상단 작업 메뉴는 가로만 반응형으로 나누고 세로는 항상 48px로 고정한다. */
.workflow-panel {
  width: 100%;
  min-width: 0;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  overflow: hidden;
}
.workflow-modes {
  width: 100%;
  min-width: 0;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
}
.workflow-mode-button {
  min-width: 0;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
}
body.result-view-open .workflow-panel,
body.result-view-open .workflow-modes {
  flex: 0 0 48px;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  overflow: hidden !important;
}

/* 송장 모드에서 grid의 암시적 열이 내용 폭으로 줄어들지 않도록 전체 가로 폭을 확정한다. */
body[data-workflow-mode="parcel"] {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
body[data-workflow-mode="parcel"] .app {
  position: relative;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  overflow-x: hidden;
}
body[data-workflow-mode="parcel"] .app > *,
body[data-workflow-mode="parcel"] .topbar,
body[data-workflow-mode="parcel"] .workflow-panel,
body[data-workflow-mode="parcel"] #barcodePanel,
body[data-workflow-mode="parcel"] .scan-head,
body[data-workflow-mode="parcel"] .parcel-mode-dashboard {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  justify-self: stretch;
}
body[data-workflow-mode="parcel"] .parcel-mode-dashboard {
  left: 0;
  right: 0;
}

/* compact 상단에서 full 화면으로 즉시 이동한다. */
.topbar .link-btn {
  display: inline-flex !important;
  height: 34px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: #174a78;
  color: #fff;
  font-size: 13px;
  font-weight: 1000;
}
.topbar-actions {
  min-width: 0;
  gap: 6px;
}
.topbar .small-btn {
  height: 34px;
  min-height: 34px;
  padding: 0 10px;
}

@media (max-width: 380px) {
  .topbar {
    padding-left: 8px;
    padding-right: 8px;
    gap: 5px;
  }
  .title {
    font-size: 17px;
    white-space: nowrap;
  }
  .version-badge {
    font-size: 12px;
  }
  .topbar-actions {
    gap: 4px;
  }
  .topbar .link-btn,
  .topbar .small-btn {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 12px;
  }
}


/* v6.5-r10: 송장 재생 화면을 버전 상태 표시줄 바로 아래로 이동 */
.topbar {
  position: relative;
  z-index: 90;
}

body[data-workflow-mode="parcel"] .parcel-mode-dashboard.playback {
  top: 50px;
  z-index: 80;
  justify-content: flex-start;
}

body[data-workflow-mode="parcel"] .parcel-mode-dashboard.playback .parcel-dashboard-playback {
  justify-content: flex-start;
  padding: 0 0 max(8px, env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
}

body[data-workflow-mode="parcel"] .parcel-mode-dashboard.playback .parcel-playback-mount {
  justify-content: flex-start;
}

body[data-workflow-mode="parcel"] .parcel-mode-dashboard.playback .parcel-barcode-wrap {
  margin: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}

.parcel-playback-exit-button {
  display: none;
}

body[data-workflow-mode="parcel"] .parcel-mode-dashboard.playback .parcel-playback-exit-button {
  display: block;
  flex: 0 0 auto;
  width: calc(100% - 24px);
  min-height: 46px;
  margin: 0 12px;
  border: 0;
  border-radius: 0;
  background: #5b245f;
  color: #fff;
  font-size: 16px;
  font-weight: 1000;
}

body[data-workflow-mode="parcel"] .parcel-mode-dashboard.playback .parcel-playback-exit-button:active {
  filter: brightness(.9);
}


/* v6.5-r12: 후보 도로명 가독성/강조 강화 + 핵심 2줄 고정 + 상세 접기 */
.result-road-names[hidden],
.result-details[hidden],
.result-details-toggle[hidden] {
  display: none !important;
}

body.result-view-open .result-panel .result-road-names {
  display: flex;
  width: 100%;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 10px;
  margin: 0 auto 14px;
  padding: 10px 8px 14px;
  border-bottom: 2px solid #d7b43c;
  color: #111;
  font-size: clamp(24px, 6.8vw, 40px);
  font-weight: 1000;
  line-height: 1.18;
  word-break: keep-all;
}

body.result-view-open .result-panel .result-road-name-item {
  display: inline-block;
  padding: 7px 12px 8px;
  border: 2px solid #c99500;
  border-radius: 10px;
  background: #fff0a8;
  color: #111;
  box-shadow: 0 2px 0 rgba(127, 91, 0, .22), 0 3px 8px rgba(0, 0, 0, .10);
}

body.result-view-open .result-panel .result-details {
  width: 100%;
  margin-top: 4px;
}

body.result-view-open .result-panel .result-details .line3,
body.result-view-open .result-panel .result-details .line4 {
  display: block;
}

body.result-view-open .result-panel .result-details-toggle {
  align-self: center;
  min-width: 96px;
  min-height: 32px;
  margin: 9px auto 20px;
  padding: 5px 14px;
  border: 1px solid #c9c9c9;
  border-radius: 999px;
  background: #f7f7f7;
  color: #444;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  cursor: pointer;
}

body.result-view-open .result-panel.compact-delivery-mode-full {
  min-height: 0 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

body.result-view-open .result-panel .result-details-toggle + .compact-delivery-mode-toggle {
  bottom: 7px;
}


/* v6.6: SHIPMENT_IMPLEMENTATION_PLAN §8.5 타건기 버튼 · §8.6 우편번호 바코드 팝업 · §8.7 관리자 패널
   두 패널은 5행 grid(.app) 밖의 fixed 오버레이다. 기본 display:none !important, .show일 때만 표시. */
.manager-panel {
  display: none !important;
  position: fixed;
  left: 0;
  right: 0;
  top: 50px;
  z-index: 88;
  padding: 12px;
  gap: 10px;
  background: #171717;
  color: #fff;
  border-bottom: 3px solid #f0b000;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}
.manager-panel.show { display: grid !important; }
.manager-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.manager-title { font-size: 16px; font-weight: 1000; }
.manager-status { font-size: 14px; font-weight: 800; line-height: 1.4; word-break: keep-all; }
.manager-verification-code {
  padding: 10px;
  border-radius: 10px;
  background: #2a2a2a;
  color: #ffd34d;
  font-size: 32px;
  font-weight: 1000;
  letter-spacing: .28em;
  text-indent: .28em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.manager-verification-code[hidden] { display: none !important; }
.manager-actions { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.manager-actions .small-btn[hidden] { display: none !important; }
.manager-panel .small-btn { min-height: 40px; }

.zipcode-barcode-panel {
  display: none !important;
  position: fixed;
  left: 0;
  right: 0;
  top: 50px;
  bottom: 0;
  z-index: 89;
  padding: 12px;
  background: #fff;
  color: #111;
}
.zipcode-barcode-panel.show {
  display: grid !important;
  grid-template-rows: auto 1fr;
  gap: 10px;
  align-content: start;
}
.zipcode-barcode-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
#zipcodeBarcodeValue { font-size: 28px; font-weight: 1000; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
#zipcodeBarcodeSvg { width: 100%; height: auto; max-height: 60vh; background: #fff; }
#zipcodeBarcodeSvg.qr { max-width: 70vw; margin: 0 auto; }

/* P5 C10: register marking bar — current tracking + marking toggle + shipment outcome.
   Visible in the register workflow only, in both the input and result views,
   independent of the result details fold. */
#registerMarkingRow { display: none; }
body[data-workflow-mode="register"] #registerMarkingRow {
  display: grid !important;
  flex: 0 0 44px;
  min-height: 44px;
  height: 44px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  border-top: 2px solid #111;
  background: #1f2a36;
  color: #fff;
}
body[data-workflow-mode="register"].result-view-open #registerMarkingRow {
  flex: 0 0 auto;
}
.register-tracking-text {
  min-width: 0;
  font-size: clamp(14px, 4.2vw, 18px);
  font-weight: 1000;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: #ffe08a;
}
.register-tracking-text.empty { color: #9fb0c2; font-weight: 800; letter-spacing: 0; }
.register-marking-status {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(12px, 3.4vw, 14px);
  font-weight: 800;
  color: #d8e2ec;
}
.register-marking-toggle {
  min-height: 34px;
  padding: 0 12px;
  border: 2px solid #6b7c8f;
  border-radius: 8px;
  background: #33404e;
  color: #fff;
  font-size: clamp(13px, 3.8vw, 15px);
  font-weight: 1000;
  white-space: nowrap;
}
.register-marking-toggle.active,
.register-marking-toggle[aria-pressed="true"] {
  border-color: #ffb300;
  background: #f0b000;
  color: #111;
}

/* Server save failure dialog: blocks the page until 확인, which ends the failed item. */
.save-failure-dialog[hidden] { display: none !important; }
.save-failure-dialog {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, .72);
}
.save-failure-box {
  width: min(100%, 420px);
  display: grid;
  gap: 12px;
  padding: 18px 16px 16px;
  border-top: 8px solid var(--v44-red);
  border-radius: 10px;
  background: #fff;
  color: #111;
  text-align: center;
}
.save-failure-title { font-size: clamp(24px, 7vw, 32px); font-weight: 1000; color: var(--v44-red); }
.save-failure-message { font-size: clamp(15px, 4.4vw, 18px); font-weight: 800; white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; }
.save-failure-note { font-size: 14px; font-weight: 700; color: #444; word-break: keep-all; }
.save-failure-confirm {
  min-height: 56px;
  border: 0;
  border-radius: 8px;
  background: var(--v44-red);
  color: #fff;
  font-size: 20px;
  font-weight: 1000;
}

/* Cancel of the displayed saved registration: two-step inline confirmation. */
.register-cancel-bar[hidden],
.register-cancel-confirm[hidden],
.register-cancel-btn[hidden] { display: none !important; }
.register-cancel-bar { display: flex; justify-content: center; margin-top: 10px; }
.register-cancel-confirm { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.register-cancel-question { flex: 1 0 100%; font-size: 15px; font-weight: 900; word-break: keep-all; }
.register-cancel-btn {
  min-height: 40px;
  padding: 0 16px;
  border: 2px solid #6b7c8f;
  border-radius: 8px;
  background: #eef1f4;
  color: #111;
  font-size: 15px;
  font-weight: 900;
}
.register-cancel-btn.danger { border-color: var(--v44-red); background: var(--v44-red); color: #fff; }
.register-cancel-btn:disabled { opacity: .55; }

/* ZIP AI 예외 검색(구현 계약 §6): AI 검색 버튼·상세 폼·결과 블록·Compact x0 근거 */
.db-date-label { color: #bdbdbd; font-size: 12px; font-weight: 800; white-space: nowrap; }
.ai-search-button {
  position: absolute;
  left: 8px;
  bottom: 6px;
  z-index: 30;
  padding: 4px 10px;
  border: 1px solid #f0b000;
  border-radius: 7px;
  background: #f0b000;
  color: #111;
  font-size: 13px;
  font-weight: 1000;
  line-height: 1.25;
}
body[data-workflow-mode="lookup"] .ai-search-button,
body[data-workflow-mode="parcel"] .ai-search-button { display: none !important; }
body.exception-form-open { overflow: hidden; }
.exception-panel[hidden] { display: none !important; }
.exception-panel {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  justify-content: center;
  background: rgba(0, 0, 0, .72);
}
.exception-box {
  width: min(100%, 560px);
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  padding: 10px 12px 24px;
  background: #fff;
  color: #111;
}
.exception-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.exception-title { font-size: 20px; font-weight: 1000; }
.exc-form { display: grid; gap: 6px; }
.exc-field { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 6px; }
.exc-label { font-size: 14px; font-weight: 900; color: #333; }
.exc-field input, .exc-field select {
  min-height: 40px; box-sizing: border-box; width: 100%; padding: 4px 8px;
  border: 1px solid #bbb; border-radius: 6px; font-size: 17px; background: #fff; color: #111;
}
.exc-readonly { min-height: 32px; display: flex; align-items: center; font-size: 17px; font-weight: 900; letter-spacing: .5px; }
.exc-zip { display: grid; grid-template-columns: 40px 1fr; align-items: center; }
.exc-zip-prefix { font-size: 18px; font-weight: 1000; text-align: center; }
.exception-box .exc-search-btn { min-height: 46px; border: 0; border-radius: 8px; background: var(--v44-green); color: #fff; font-size: 18px; font-weight: 1000; }
.exception-box .exc-search-btn:disabled { opacity: .45; }
.exc-status[hidden], .exc-save[hidden], .exc-end-actions[hidden],
.exc-status-actions .small-btn[hidden], .exc-x0-view[hidden] { display: none !important; }
.exc-status { margin-top: 10px; padding: 8px 10px; border-radius: 6px; background: #eef3f8; font-size: 16px; font-weight: 900; }
.exc-status.progress { background: #fff6d6; }
.exc-status.error { background: #fde8e8; color: var(--v44-red); }
.exc-status-actions { display: flex; gap: 8px; margin-top: 6px; }
.exc-result { margin-top: 10px; display: grid; gap: 10px; }
.exc-run-head { display: grid; gap: 2px; }
.exc-run-title { font-size: 17px; font-weight: 1000; }
.exc-run-auto { font-size: 16px; font-weight: 1000; color: var(--v44-green); }
.exc-block { display: grid; gap: 6px; padding: 8px; border: 1px solid #ddd; border-radius: 8px; }
.exc-block-title { font-size: 15px; font-weight: 1000; }
.exc-message { font-size: 17px; font-weight: 1000; }
.exc-warning { border-color: var(--v44-amber); background: #fff6d6; font-size: 15px; font-weight: 1000; }
.exc-correction { font-size: 15px; font-weight: 1000; color: var(--v44-blue); }
.exc-item { display: grid; gap: 3px; padding: 6px 0; border-top: 1px solid #eee; }
.exc-item:first-of-type { border-top: 0; }
.exc-line1 { font-size: 15px; font-weight: 900; overflow-wrap: anywhere; }
.exc-line2 { font-size: 13px; font-weight: 700; color: #444; overflow-wrap: anywhere; }
.exc-tags { font-size: 12px; font-weight: 800; color: #666; }
.exc-failure { font-size: 13px; font-weight: 900; color: var(--v44-red); }
.exc-subblock { display: grid; gap: 4px; padding: 6px; border-radius: 6px; background: #f6f6f6; }
.exc-route-btn {
  justify-self: start; min-height: 36px; padding: 2px 12px; border: 2px solid var(--v44-blue);
  border-radius: 7px; background: #fff; color: var(--v44-blue); font-size: 15px; font-weight: 1000; text-align: left;
}
.exc-route-btn.secondary { border-color: #6b7c8f; color: #333; }
.exc-route-btn.auto, .exc-route-btn.chosen { background: var(--v44-blue); color: #fff; }
.exc-route-btn:disabled { opacity: .55; }
.exc-bar { display: flex; height: 18px; overflow: hidden; border-radius: 4px; background: #eee; }
.exc-bar-seg { height: 100%; }
.exc-legend { grid-template-columns: 14px 1fr auto; align-items: center; column-gap: 6px; }
.exc-legend .exc-line2 { grid-column: 1 / -1; }
.exc-swatch { width: 12px; height: 12px; border-radius: 2px; }
.c0 { background: #174a78; } .c1 { background: #d99a00; } .c2 { background: #1f6a3b; }
.c3 { background: #9d1010; } .c4 { background: #6b4fa3; } .c5 { background: #6b7c8f; }
.exc-figure { width: 100%; max-height: 260px; background: #fafafa; border: 1px solid #ddd; border-radius: 6px; }
.exc-fig-target { fill: rgba(157, 16, 16, .35); stroke: #9d1010; }
.exc-fig-cand { fill: rgba(23, 74, 120, .18); stroke: #174a78; }
.exc-fig-cand.excluded { fill: rgba(120, 120, 120, .15); stroke: #888; stroke-dasharray: 4 3; }
.exc-fig-road { fill: none; stroke: #aaa; }
.exc-fig-road.barrier { stroke: #d99a00; }
.exc-fig-label { fill: #111; font-weight: 900; }
.exc-fig-link { stroke: #174a78; opacity: .8; }
.exc-fig-link.crossing { stroke: #c62828; stroke-dasharray: 4 3; }
.exc-fig-center { fill: #174a78; }
.exc-fig-center.excluded { fill: #888; }
.exc-fig-origin { fill: #9d1010; stroke: #fff; }
.exc-fig-note { font-size: 12px; color: #555; }
.exc-evidence { display: grid; gap: 2px; padding: 6px 8px; border-radius: 6px; background: #f6f6f6; }
.exc-ev-line { font-size: 12px; font-weight: 700; color: #444; overflow-wrap: anywhere; }
.exc-save { margin-top: 8px; font-size: 16px; font-weight: 1000; }
.exc-save.ok { color: var(--v44-green); }
.exc-save.error { color: var(--v44-red); }
.exc-end-actions { display: flex; gap: 8px; margin-top: 10px; }
.exc-x0-view { display: grid; gap: 4px; margin-top: 6px; padding: 6px; border-radius: 6px; background: #fff; color: #111; }
.exc-x0-view .exc-route-btn { display: none; }