@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&family=JetBrains+Mono:wght@500;700&display=swap');
:root {
  --bg:#f0f2f5; --surface:#fff; --surface2:#f8f9fa; --border:#e2e6ea;
  --text:#1a1d23; --sub:#6b7280; --muted:#9ca3af;
  --in:#1a7a4a; --in-bg:#e6f4ed;
  --out:#1a4a7a; --out-bg:#e6edf4;
  --inv:#7a4a1a; --inv-bg:#f4ede6;
  --mat:#7b2d8e; --mat-bg:#f3e6f8;
  --danger:#dc3545; --ok:#198754;
  --r:10px; --rs:6px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
body{font-family:'Noto Sans KR',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;max-width:480px;margin:0 auto;font-size:14px;line-height:1.5;}

/* ── screens ── */
.screen{display:none;} .screen.active{display:block;}

/* ── header ── */
.hdr{background:var(--surface);border-bottom:1px solid var(--border);padding:11px 14px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:100;}
.hdr-back{width:34px;height:34px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--rs);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--sub);flex-shrink:0;}
.hdr-title{font-size:15px;font-weight:700;flex:1;}
.hdr-badge{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;}
.b-in{background:var(--in-bg);color:var(--in);}
.b-out{background:var(--out-bg);color:var(--out);}
.b-inv{background:var(--inv-bg);color:var(--inv);}
.b-mat{background:var(--mat-bg);color:var(--mat);}

/* ── home ── */
.stat-row{margin:14px 14px 10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:12px 0;display:flex;}
.stat-item{flex:1;text-align:center;padding:0 6px;}
.stat-item+.stat-item{border-left:1px solid var(--border);}
.sv{font-size:20px;font-weight:700;font-family:'JetBrains Mono',monospace;}
.sl{font-size:10px;color:var(--muted);margin-top:2px;}
.c-in{color:var(--in);} .c-out{color:var(--out);} .c-inv{color:var(--inv);} .c-mat{color:var(--mat);}

.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 14px 20px;}
.mcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:18px 14px;cursor:pointer;display:flex;flex-direction:column;gap:7px;transition:transform .1s;}
.mcard:active{transform:scale(.97);}
.mcard .ci{font-size:26px;} .mcard .cl{font-size:14px;font-weight:700;} .mcard .cd{font-size:11px;color:var(--sub);line-height:1.5;}
.m-in{border-top:3px solid var(--in);} .m-out{border-top:3px solid var(--out);} .m-inv{border-top:3px solid var(--inv);} .m-mat{border-top:3px solid var(--mat);}

/* ── section ── */
.scr-body{padding-bottom:80px;}
.sec{margin:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;}
.sec-ttl{padding:8px 13px;font-size:11px;font-weight:700;color:var(--sub);letter-spacing:.7px;text-transform:uppercase;background:var(--surface2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;}
.sec-ttl em{font-style:normal;font-size:12px;font-weight:600;color:var(--text);text-transform:none;letter-spacing:0;}
.sec-ttl small{font-size:11px;color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0;}

/* ── list items ── */
.li{padding:11px 13px;border-bottom:1px solid var(--border);cursor:pointer;display:flex;align-items:center;gap:9px;transition:background .1s;}
.li:last-child{border-bottom:none;} .li:active{background:var(--surface2);} .li.sel{background:#f0f7ff;}
.chk{width:22px;height:22px;border:2px solid var(--border);border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;transition:all .15s;}
.chk.ck-in{background:var(--in);border-color:var(--in);}
.chk.ck-out{background:var(--out);border-color:var(--out);}
.lb{flex:1;min-width:0;} .lm{font-size:13px;font-weight:600;} .ls{font-size:11px;color:var(--sub);margin-top:2px;}
.lr{text-align:right;flex-shrink:0;}
.lq{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:700;}
.lu{font-size:10px;color:var(--muted);}

/* ── item row (qty display) ── */
.ir{padding:11px 13px;border-bottom:1px solid var(--border);cursor:pointer;display:flex;align-items:center;gap:9px;transition:background .1s;}
.ir:last-child{border-bottom:none;} .ir:active{background:var(--surface2);}
.irb{flex:1;min-width:0;} .irn{font-size:13px;font-weight:600;} .irs{font-size:11px;color:var(--sub);margin-top:2px;}
.irr{text-align:right;flex-shrink:0;min-width:72px;}
.irq{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:700;color:var(--muted);}
.irq.got-in{color:var(--in);} .irq.got-out{color:var(--out);} .irq.got-mat{color:var(--mat);}
.chk.ck-mat{background:var(--mat);border-color:var(--mat);}
.iru{font-size:10px;color:var(--muted);}

.lot{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:700;background:#efefef;color:var(--sub);padding:1px 5px;border-radius:3px;}

.mat-item-hdr{padding:10px 13px;background:var(--surface2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;}
.mat-item-hdr:not(:first-child){border-top:2px solid var(--border);}
.mat-item-name{font-size:13px;font-weight:700;flex:1;min-width:0;}
.mat-item-info{font-size:11px;color:var(--sub);}
.mat-item-badge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;flex-shrink:0;}
.mat-badge-done{background:#e6f4ed;color:var(--ok);}
.mat-badge-pending{background:var(--mat-bg);color:var(--mat);}
.mat-lot-row{padding:9px 13px 9px 32px;border-bottom:1px solid var(--border);cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .1s;}
.mat-lot-row:last-child{border-bottom:none;}
.mat-lot-row:active{background:var(--surface2);}
.mat-lot-row.mat-lot-selected{background:#f8f0fc;}

/* ── form ── */
.fr{padding:10px 13px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border);}
.fr:last-child{border-bottom:none;}
.fl{font-size:12px;color:var(--sub);width:66px;flex-shrink:0;font-weight:500;}
.fi{flex:1;border:1px solid var(--border);border-radius:var(--rs);padding:7px 10px;font-size:13px;font-family:'Noto Sans KR',sans-serif;background:var(--surface);color:var(--text);outline:none;}
.fi:focus{border-color:#6b9bd2;}
.fs{flex:1;border:1px solid var(--border);border-radius:var(--rs);padding:7px 28px 7px 10px;font-size:13px;font-family:'Noto Sans KR',sans-serif;background:var(--surface);color:var(--text);outline:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%239ca3af' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;}

/* ── buttons ── */
.btn{display:flex;align-items:center;justify-content:center;gap:5px;padding:13px;border:none;border-radius:var(--r);font-size:14px;font-family:'Noto Sans KR',sans-serif;font-weight:700;cursor:pointer;width:100%;transition:opacity .1s,transform .1s;}
.btn:active{opacity:.85;transform:scale(.99);}
.btn:disabled{opacity:.5;pointer-events:none;}
.btn-in{background:var(--in);color:#fff;} .btn-out{background:var(--out);color:#fff;} .btn-inv{background:var(--inv);color:#fff;} .btn-mat{background:var(--mat);color:#fff;}
.btn-sec{background:var(--surface2);color:var(--text);border:1px solid var(--border);}
.brow{display:flex;gap:8px;padding:10px 14px;} .brow .btn{flex:1;}

/* ── mode tabs ── */
.tabs{display:flex;gap:8px;padding:10px 13px;}
.tab{flex:1;padding:9px;border:1px solid var(--border);border-radius:var(--rs);background:var(--surface2);font-size:13px;font-weight:600;color:var(--sub);cursor:pointer;text-align:center;transition:all .15s;}
.tab.act-out{background:var(--out-bg);border-color:var(--out);color:var(--out);}
.tab.act-mat{background:var(--mat-bg);border-color:var(--mat);color:var(--mat);}

/* ── scan box ── */
.scan{margin:10px 14px;border:2px dashed var(--border);border-radius:var(--r);padding:26px 16px;text-align:center;cursor:pointer;transition:all .2s;}
.scan:active{border-color:var(--inv);background:var(--inv-bg);}
.scan-ic{font-size:34px;margin-bottom:7px;} .scan-lb{font-size:13px;font-weight:600;color:var(--sub);} .scan-sb{font-size:11px;color:var(--muted);margin-top:3px;}

/* ── steps ── */
.steps{display:flex;gap:4px;padding:8px 14px 2px;}
.step{flex:1;height:3px;border-radius:2px;background:var(--border);}
.s-in{background:var(--in);} .s-out{background:var(--out);} .s-inv{background:var(--inv);} .s-mat{background:var(--mat);}

/* ── toast ── */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(70px);background:#1a1d23;color:#fff;padding:10px 18px;border-radius:20px;font-size:13px;font-weight:500;z-index:9999;transition:transform .28s ease;white-space:nowrap;pointer-events:none;}
.toast.on{transform:translateX(-50%) translateY(0);}

/* ── qty modal ── */
.mo{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:600;display:none;align-items:flex-end;justify-content:center;}
.mo.open{display:flex;}
.ms{background:var(--surface);border-radius:16px 16px 0 0;width:100%;max-width:480px;animation:su .22s ease;padding-bottom:env(safe-area-inset-bottom,0px);}
@keyframes su{from{transform:translateY(100%)}to{transform:translateY(0)}}
.mh{width:40px;height:4px;background:var(--border);border-radius:2px;margin:10px auto 0;}
.mhead{padding:10px 14px 9px;border-bottom:1px solid var(--border);}
.mname{font-size:15px;font-weight:700;}
.mmeta{font-size:11px;color:var(--sub);margin-top:3px;}
.qbar{display:flex;align-items:center;padding:10px 14px;gap:8px;background:var(--surface2);border-bottom:1px solid var(--border);}
.qlabel{font-size:12px;color:var(--sub);white-space:nowrap;}
.qnum{flex:1;text-align:right;font-family:'JetBrains Mono',monospace;font-size:34px;font-weight:700;transition:color .12s;}
.qmax{font-size:11px;color:var(--muted);white-space:nowrap;}
.phint{margin:6px 12px;padding:7px 11px;background:#fffbe6;border:1px solid #ffe58f;border-radius:var(--rs);font-size:11px;color:#7a5c00;display:none;}
.phint.on{display:block;}
.np{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:7px 11px;}
.nb{height:54px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);font-size:22px;font-family:'JetBrains Mono',monospace;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .1s;color:var(--text);}
.nb:active{background:#d0d5dd;} .nb.del{color:var(--danger);}
.mact{display:flex;gap:8px;padding:8px 12px 14px;}
.mact .btn{flex:1;padding:13px;font-size:14px;}

/* ── inv table ── */
.inv-tbl{margin:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;}
.inv-hd{display:grid;grid-template-columns:1fr 68px 68px;background:var(--surface2);border-bottom:1px solid var(--border);padding:7px 12px;gap:6px;}
.inv-th{font-size:10px;font-weight:700;color:var(--sub);text-transform:uppercase;}
.inv-th:not(:first-child){text-align:right;}
.inv-row{display:grid;grid-template-columns:1fr 68px 68px;padding:8px 12px;gap:6px;border-bottom:1px solid var(--border);align-items:center;}
.inv-row:last-child{border-bottom:none;}
.ic{font-size:12px;} .ic:not(:first-child){text-align:right;font-family:'JetBrains Mono',monospace;font-weight:600;}
.dp{color:var(--ok);} .dn{color:var(--danger);} .dz{color:var(--muted);}

/* ── separator ── */
.sep{text-align:center;color:var(--muted);font-size:12px;margin:-2px 0 2px;}

/* ── loading ── */
.loading{text-align:center;padding:30px 14px;color:var(--muted);font-size:13px;}
.loading::before{content:'';display:block;width:24px;height:24px;border:3px solid var(--border);border-top-color:var(--sub);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 10px;}
@keyframes spin{to{transform:rotate(360deg)}}
.empty-msg{text-align:center;padding:30px 14px;color:var(--muted);font-size:13px;}

/* ── LOT select modal ── */
.lot-mo{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:500;display:none;align-items:flex-end;justify-content:center;}
.lot-mo.open{display:flex;}
.lot-ms{background:var(--surface);border-radius:16px 16px 0 0;width:100%;max-width:480px;max-height:70vh;display:flex;flex-direction:column;animation:su .22s ease;padding-bottom:env(safe-area-inset-bottom,0px);}
.lot-ms .sec-ttl{flex-shrink:0;}
.lot-list{flex:1;overflow-y:auto;}