: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; min-height: 100%;
      background: var(--bg); color: var(--text);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    body { min-height: 100dvh; }

    .app {
      max-width: 560px;
      margin: 0 auto;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 100dvh;
    }

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

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

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

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

    .switch-btn {
      border: 1px solid var(--line);
      background: #fff;
      color: #222;
      padding: 10px 12px;
      border-radius: 12px;
      text-decoration: none;
      font-size: 14px;
      font-weight: 700;
      white-space: nowrap;
    }

    .input-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }

    .input-wrap {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

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

    .input-label {
      font-size: 14px;
      font-weight: 700;
      color: var(--muted);
    }

    .db-info {
      font-size: 12px;
      font-weight: 600;
      color: var(--soft);
      white-space: nowrap;
    }

    .search-input {
      width: 100%;
      border: 2px solid var(--line);
      border-radius: 14px;
      padding: 14px 16px;
      font-size: 24px;
      font-weight: 700;
      outline: none;
      background: #fff;
    }

    .search-input:focus { border-color: #999; }
    .ime-ko { ime-mode: active; }

    .hint {
      margin-top: 6px;
      font-size: 13px;
      color: var(--soft);
      line-height: 1.45;
    }

    .action-row {
      margin-top: 10px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .action-btn {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      min-height: 46px;
      padding: 10px 12px;
      font-size: 15px;
      font-weight: 800;
      cursor: pointer;
    }

    .action-btn.primary {
      background: #111;
      color: #fff;
      border-color: #111;
    }

    .candidate-panel {
      display: none;
      flex-direction: column;
      gap: 8px;
    }

    .candidate-panel.show { display: flex; }
    .candidate-title { font-size: 14px; font-weight: 800; 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: 800;
      color: #111;
      cursor: pointer;
      word-break: keep-all;
    }

    .candidate-btn.selected {
      border-color: #444;
      background: #f0f0f0;
    }

    .result-panel {
      min-height: 180px;
      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: 800;
      color: var(--muted);
    }

    .list-actions {
      display: flex;
      gap: 8px;
    }

    .small-btn {
      border: 1px solid var(--line);
      border-radius: 10px;
      background: #fff;
      min-height: 36px;
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
    }

    .small-btn.primary {
      background: #111;
      color: #fff;
      border-color: #111;
    }

    .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: 800;
      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: 700;
      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: 700;
    }


    .example-panel {
      color: var(--soft);
      font-size: 13px;
      line-height: 1.55;
    }

    .example-title {
      font-weight: 800;
      color: var(--muted);
      margin-bottom: 4px;
    }

    .example-line {
      word-break: keep-all;
    }

    @media (max-width: 420px) {
      .search-input {
        font-size: 20px;
        padding: 12px 12px;
      }
      .candidate-btn { font-size: 14px; }
      .result-table thead th, .result-table tbody td { font-size: 12px; padding: 10px 6px; }
    }
  

  .zipocr-barcode-panel{display:flex;flex-direction:column;gap:10px}
  .zipocr-barcode-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
  .zipocr-barcode-title{font-size:18px;font-weight:900}
  .zipocr-barcode-sub{margin-top:4px;color:var(--muted,#666);font-size:13px;line-height:1.4}
  .zipocr-barcode-badge{border:1px solid var(--line,#ddd);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{border:1px solid var(--line,#ddd);border-radius:14px;background:#111;overflow:hidden}
  .zipocr-barcode-video-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#111}
  .zipocr-barcode-video{width:100%;height:100%;object-fit:cover;display:block}
  .zipocr-barcode-roi{position:absolute;left:7%;right:7%;top:38%;height:24%;border:3px solid rgba(255,255,255,.95);border-radius:14px;box-shadow:0 0 0 999px rgba(0,0,0,.38);pointer-events:none}
  .zipocr-barcode-roi-line{position:absolute;left:8px;right:8px;top:50%;border-top:2px dashed rgba(255,255,255,.75)}
  .zipocr-barcode-actions,.zipocr-barcode-manual{display:flex;gap:8px;align-items:center}
  .zipocr-barcode-actions button,.zipocr-barcode-manual button{white-space:nowrap}
  .zipocr-barcode-input{flex:1;min-width:0;border:1px solid var(--line,#ddd);border-radius:12px;padding:11px 12px;font-size:16px;font-weight:900;letter-spacing:.08em}
  .zipocr-barcode-message{min-height:22px;color:var(--muted,#666);font-size:14px;font-weight:800;line-height:1.45;word-break:keep-all}


    .barcode-quick-panel {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .barcode-quick-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }

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

    .barcode-quick-status {
      margin-top: 3px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.35;
      word-break: keep-all;
    }

    .barcode-quick-help {
      color: var(--soft);
      font-size: 12px;
      font-weight: 700;
      line-height: 1.35;
      word-break: keep-all;
    }

    .barcode-mode-toggle {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-width: 136px;
      border: 1px solid var(--line);
      border-radius: 12px;
      overflow: hidden;
      background: #fff;
    }

    .barcode-mode-btn {
      border: 0;
      background: #fff;
      min-height: 38px;
      padding: 7px 9px;
      font-size: 13px;
      font-weight: 900;
      color: #333;
      cursor: pointer;
    }

    .barcode-mode-btn + .barcode-mode-btn {
      border-left: 1px solid var(--line);
    }

    .barcode-mode-btn.selected {
      background: #111;
      color: #fff;
    }

    @media (max-width: 420px) {
      .barcode-quick-row {
        align-items: stretch;
        flex-direction: column;
      }
      .barcode-mode-toggle {
        width: 100%;
      }
    }

  
    /* address_mobile compact barcode scanner override */
    .zipocr-barcode-panel {
      gap: 8px;
      padding: 10px;
    }
    .zipocr-barcode-title {
      font-size: 15px;
    }
    .zipocr-barcode-sub {
      display: none;
    }
    .zipocr-barcode-guide {
      border-radius: 12px;
    }
    .zipocr-barcode-roi {
      left: 8%;
      right: 8%;
      top: 30%;
      height: 40%;
      border-width: 2px;
      border-radius: 10px;
    }
    .zipocr-barcode-actions,
    .zipocr-barcode-manual,
    .zipocr-barcode-combined {
      gap: 6px;
    }
    .zipocr-barcode-actions .action-btn,
    .zipocr-barcode-manual .action-btn,
    .zipocr-barcode-combined .action-btn {
      min-height: 38px;
      padding: 7px 9px;
      font-size: 13px;
      border-radius: 10px;
    }
    .zipocr-barcode-input {
      min-height: 38px;
      padding: 8px 10px;
      font-size: 14px;
      border-radius: 10px;
    }
    .zipocr-barcode-message {
      min-height: 18px;
      font-size: 12px;
    }
    .barcode-quick-panel {
      padding: 10px;
    }

  
    /* compact scan UI v2 */
    .zipocr-barcode-panel {
      gap: 8px;
      padding: 10px;
    }
    .zipocr-barcode-head {
      align-items: center;
    }
    .zipocr-barcode-title {
      font-size: 15px;
    }
    .zipocr-barcode-sub {
      display: none;
    }
    .zipocr-barcode-guide {
      display: none;
      border-radius: 12px;
    }
    .zipocr-barcode-panel.scanning .zipocr-barcode-guide {
      display: block;
    }
    .zipocr-barcode-video-wrap {
      aspect-ratio: 2.1/1;
      max-height: 140px;
    }
    .zipocr-barcode-roi {
      left: 8%;
      right: 8%;
      top: 28%;
      height: 44%;
      border-width: 2px;
      border-radius: 10px;
    }
    .zipocr-barcode-actions,
    .zipocr-barcode-manual,
    .zipocr-barcode-combined {
      gap: 6px;
    }
    .zipocr-barcode-actions .action-btn,
    .zipocr-barcode-manual .action-btn,
    .zipocr-barcode-combined .action-btn {
      min-height: 38px;
      padding: 7px 9px;
      font-size: 13px;
      border-radius: 10px;
    }
    .zipocr-barcode-input {
      min-height: 38px;
      padding: 8px 10px;
      font-size: 14px;
      border-radius: 10px;
    }
    .zipocr-barcode-message {
      min-height: 18px;
      font-size: 12px;
    }
    .barcode-quick-panel.compact {
      padding: 8px 10px;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 8px;
      align-items: center;
    }
    .barcode-quick-panel.compact .barcode-quick-status {
      margin: 0;
      font-size: 13px;
      font-weight: 900;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .barcode-mode-one-btn {
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      min-height: 34px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 900;
      color: #222;
      cursor: pointer;
      white-space: nowrap;
    }
    .barcode-mode-one-btn.jibun {
      background: #111;
      border-color: #111;
      color: #fff;
    }
    .barcode-mode-toggle {
      display: none !important;
    }
    .barcode-quick-help,
    .barcode-quick-title {
      display: none !important;
    }


    .input-mode-btn {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      min-height: 42px;
      padding: 9px 12px;
      font-size: 14px;
      font-weight: 900;
      color: #222;
      cursor: pointer;
      white-space: nowrap;
    }

    .input-mode-btn.selected {
      background: #111;
      border-color: #111;
      color: #fff;
    }

    .input-mode-btn.site {
      background: #111;
      border-color: #111;
      color: #fff;
    }

    .zipocr-barcode-combined {
      display: grid;
      grid-template-columns: auto auto minmax(0, 1fr) auto;
      gap: 6px;
      align-items: center;
    }

    .zipocr-barcode-combined .action-btn {
      min-height: 38px;
      padding: 7px 9px;
      font-size: 13px;
      border-radius: 10px;
      white-space: nowrap;
    }

    .zipocr-barcode-combined .zipocr-barcode-input {
      min-width: 0;
      width: 100%;
    }

    .site-keyboard-panel {
      display: none;
      flex-direction: column;
      gap: 8px;
    }

    .site-keyboard-panel.show {
      display: flex;
    }

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

    .site-keyboard-title {
      font-size: 14px;
      font-weight: 900;
      color: var(--muted);
    }

    .site-keyboard-mode {
      border: 1px solid var(--line);
      border-radius: 999px;
      background: #fff;
      min-height: 32px;
      padding: 5px 10px;
      font-size: 12px;
      font-weight: 900;
      color: #222;
      cursor: pointer;
      white-space: nowrap;
    }

    .site-key-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .site-key-btn {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      min-height: 44px;
      padding: 8px 6px;
      font-size: 17px;
      font-weight: 900;
      color: #111;
      cursor: pointer;
    }

    .site-key-btn.wide {
      grid-column: span 2;
    }

    .site-key-btn.primary {
      background: #111;
      border-color: #111;
      color: #fff;
    }

    .site-key-btn.soft {
      background: #f7f7f7;
    }

    @media (max-width: 420px) {
      .input-mode-btn { font-size: 13px; min-height: 40px; }
      .site-key-btn { font-size: 15px; min-height: 42px; }
    }

/* v2 visual refinement: preserve behavior, reduce visual density. */
.app { max-width: 720px; padding: 14px; gap: 12px; }
.panel { border: 1px solid #e7e7e7; box-shadow: 0 2px 10px rgba(0,0,0,.055); }
.topbar { position: sticky; top: 0; z-index: 20; }
.search-input { min-height: 58px; }
.result-panel { min-height: 200px; }
.result-table-wrap { max-height: 360px; }
.example-panel { background: #fafafa; }
@media (min-width: 760px) {
  .input-grid { grid-template-columns: 1fr; }
  .candidate-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}