:root{
  --bg:#f5f4f0; --surface:#fbfbf9; --panel:#ffffff; --panel-soft:#f7f6f2;
  --ink:#1c1c1a; --ink-hover:#3a3935; --ink-2:#55534d; --sub:#7a776f; --muted:#8a877f;
  --line:#e3e1db; --line-2:#dcdad3; --line-3:#efeee9; --hover:#efeee9; --soft:#f3f2ee; --track:#ebe9e3;
  --accent:#2453d6; /* 스캐너 블루 */
  --accent-hover:#1b43b3;
  --accent-soft:#e6edfd;
  --ok:#1f9d6a; --mid:#e0a213; --low:#e5484d;
  --font:"IBM Plex Sans KR",sans-serif; --mono:"JetBrains Mono",monospace;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
.mono-label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted)}
.mono{font-family:var(--mono)}
.app{min-height:100vh;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 28px;border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:6px 14px;min-width:0;flex-wrap:wrap}
.brand-title{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{height:36px;padding:0 14px;background:transparent;border:1px solid var(--line-2);border-radius:999px;font-size:13px;cursor:pointer;white-space:nowrap;transition:background .15s,opacity .15s}
.btn:hover{background:var(--hover)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn--solid{background:var(--ink);color:#fff;border:none;font-weight:500}
.btn--solid:hover{background:var(--ink-hover)}
.btn--solid:disabled:hover{background:var(--ink)}
.btn--small{height:32px;font-size:12.5px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:640px){ .topbar{padding:14px 16px} }

/* ---------- 레이아웃 ---------- */
.ocr{flex:1;width:100%;max-width:1320px;margin:0 auto;padding:28px;display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
.stage-wrap{display:flex;flex-direction:column;gap:10px;min-width:0}
.stage{position:relative;min-height:420px;border-radius:18px;background:
  linear-gradient(var(--line-3) 1px,transparent 1px) 0 0/24px 24px,
  linear-gradient(90deg,var(--line-3) 1px,transparent 1px) 0 0/24px 24px,var(--surface);
  border:1px solid var(--line);display:grid;place-items:center;padding:20px;transition:border-color .15s,background-color .15s}
.stage.is-over{border-color:var(--accent);background-color:var(--accent-soft)}
.drop{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:36px 20px;cursor:pointer;width:100%;max-width:460px;border:1.5px dashed var(--line-2);border-radius:16px;background:rgba(255,255,255,.7);transition:border-color .15s,transform .15s}
.drop:hover{border-color:var(--accent);transform:translateY(-2px)}
.drop strong{font-size:16px}
.drop span{font-size:13px;color:var(--sub);line-height:1.6}
.drop-icon{position:relative;width:96px;height:72px;margin-bottom:6px;display:grid;place-items:center}
.drop-icon b{font-family:var(--mono);font-size:22px;color:var(--accent);letter-spacing:-.02em}
.drop-icon i{position:absolute;width:18px;height:18px;border:3px solid var(--ink)}
.drop-icon i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.drop-icon i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-radius:0 6px 0 0}
.drop-icon i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 6px}
.drop-icon i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 6px 0}
kbd{font-family:var(--mono);font-size:11px;padding:1px 5px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;background:#fff;color:var(--ink)}

.view{position:relative;line-height:0;max-width:100%;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 24px 50px -28px rgba(20,30,70,.45);border-radius:6px;overflow:hidden;background:#fff}
.view img{display:block;max-width:100%;max-height:72vh;width:auto;height:auto}
.boxes{position:absolute;inset:0;width:100%;height:100%}
.boxes rect{fill:rgba(36,83,214,.08);stroke-width:2;vector-effect:non-scaling-stroke;pointer-events:all;cursor:help;transition:fill .12s}
.boxes rect:hover{fill:rgba(36,83,214,.22)}
.boxes .c-ok{stroke:var(--ok)}
.boxes .c-mid{stroke:var(--mid)}
.boxes .c-low{stroke:var(--low);fill:rgba(229,72,77,.1)}
.scan{position:absolute;left:0;right:0;top:0;height:28%;background:linear-gradient(180deg,transparent,rgba(36,83,214,.18) 85%,rgba(36,83,214,.75) 100%);animation:scan 1.6s ease-in-out infinite alternate;pointer-events:none}
@keyframes scan{from{transform:translateY(-100%)}to{transform:translateY(260%)}}

.stage-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.legend{margin:0;font-size:12px;color:var(--sub);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.lg{display:inline-block;width:12px;height:12px;border-radius:3px;border:2px solid}
.lg--ok{border-color:var(--ok)} .lg--mid{border-color:var(--mid)} .lg--low{border-color:var(--low)}
.lg + .lg,.legend .lg{margin-left:6px}

.seg{display:flex;background:var(--soft);border-radius:999px;padding:3px;gap:2px;border:1px solid var(--line)}
.seg-btn{height:28px;padding:0 12px;border:none;background:transparent;border-radius:999px;font-size:12.5px;color:var(--sub);cursor:pointer;white-space:nowrap}
.seg-btn.is-active{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* ---------- 패널 ---------- */
.panel{display:flex;flex-direction:column;gap:12px;min-width:0}
.box{display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:16px}
.box-title{margin:0;font-size:14px;font-weight:700;display:flex;align-items:baseline;gap:8px}
.box-title small{font-weight:400;font-size:12px;color:var(--muted)}
.langs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lang{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px;border:1px solid var(--line-2);border-radius:12px;background:var(--panel);text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.lang b{font-size:13.5px}
.lang small{font-size:11.5px;color:var(--muted);line-height:1.4}
.lang:hover{border-color:var(--ink)}
.lang.is-active{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.field{display:flex;flex-direction:column;gap:6px}
.field-label{font-size:12.5px;color:var(--ink-2)}
.select{height:38px;padding:0 10px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);font-size:13.5px}
.check{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;line-height:1.4}
.check input{width:16px;height:16px;accent-color:var(--accent);flex:0 0 auto}
.btn--run{height:46px;font-size:14.5px;background:var(--accent)}
.btn--run:hover{background:var(--accent-hover)}
.btn--run:disabled:hover{background:var(--accent)}
.progress{display:flex;flex-direction:column;gap:6px}
.progress-head{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-2)}
.bar{height:8px;border-radius:999px;background:var(--track);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:inherit;transition:width .2s}
.alert{margin:0;padding:10px 12px;border-radius:10px;background:#fdecec;color:#9b2226;font-size:12.5px;line-height:1.6}

.result{animation:rise .25s ease}
.result-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.text{width:100%;min-height:260px;resize:vertical;padding:12px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);font-size:14px;line-height:1.7}
.text:focus{outline:2px solid var(--accent);outline-offset:-1px}
.result-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

.box--note{background:var(--panel-soft);gap:8px}
.note{margin:0;font-size:12px;line-height:1.65;color:var(--sub)}
.note b{color:var(--ink-2)}
.note--file{padding:8px 10px;border-radius:8px;background:#fff6e0;color:#7a5600}
.credit a{color:var(--ink-2)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:1px}

.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:100;max-width:calc(100vw - 32px);text-align:center}
.toast.is-show{opacity:1;transform:translate(-50%,0)}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (max-width:960px){
  .ocr{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .ocr{padding:16px;gap:16px}
  .stage{min-height:260px;padding:12px}
  .actions{width:100%}
  .actions .btn{flex:1}
  .langs{grid-template-columns:1fr}
  .stage-foot .seg{width:100%}
  .stage-foot .seg-btn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* 다크 모드 (인쇄는 라이트 그대로) — 올린 이미지와 인식 박스는 원래 색 그대로 */
@media screen{
  :root[data-theme="dark"]{
    color-scheme:dark;
    --bg:#141318; --surface:#1a1920; --panel:#1f1e26; --panel-soft:#24232c;
    --ink:#ecebf0; --ink-hover:#ffffff; --ink-2:#c9c7d1; --sub:#a09eab; --muted:#8a8895;
    --line:#2e2d36; --line-2:#393843; --line-3:#24232b; --hover:#2a2932; --soft:#26252d; --track:#34333d;
    --accent:#7c9cf5; --accent-hover:#6a8cf0; --accent-soft:rgba(124,156,245,.15);
  }
  :root[data-theme="dark"] .btn--solid,:root[data-theme="dark"] .toast{color:var(--bg)}
  :root[data-theme="dark"] .drop{background:rgba(31,30,38,.78)}
  :root[data-theme="dark"] kbd{background:var(--panel-soft)}
  :root[data-theme="dark"] .view{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 24px 50px -28px rgba(0,0,0,.8)}
  :root[data-theme="dark"] .seg-btn.is-active{background:var(--line-2);box-shadow:0 1px 3px rgba(0,0,0,.4)}
  :root[data-theme="dark"] .alert{background:rgba(255,123,114,.12);color:#ffb3ab}
  :root[data-theme="dark"] .note--file{background:rgba(240,185,60,.12);color:#f2cd7a}
}