:root {
  --bg:#f4f5f7; --card:#fff; --ink:#1b1f24; --sub:#5b6570; --line:#d9dde2;
  --accent:#1458c7; --in:#18794e; --out:#b54708; --ng:#b42318; --warn:#b54708; --on-accent:#fff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#14171b; --card:#1e2329; --ink:#eef1f4; --sub:#9aa5b1; --line:#323a43;
    --accent:#6ea8ff; --in:#4ade80; --out:#fbbf24; --ng:#ff8a80; --warn:#fbbf24; --on-accent:#0b1220;
  }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:system-ui,-apple-system,"Malgun Gothic",sans-serif; line-height:1.4; }
main { max-width:560px; margin:0 auto; padding:12px 16px 80px; }
small { display:block; font-size:12px; font-weight:400; color:var(--sub); }
a { color:var(--accent); }

.topbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:4px 0 10px; }
.topbar h1 { font-size:20px; margin:0; }
.topbar a { font-size:14px; text-decoration:none; text-align:right; }
.banner { background:rgba(181,71,8,.12); border:1px solid var(--warn); color:var(--ink); border-radius:10px; padding:8px 12px; margin-bottom:10px; font-size:14px; }

.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:12px; }
.card h2 { font-size:16px; margin:0 0 8px; }

button, .btn { min-height:52px; padding:8px 14px; border-radius:10px; border:1px solid var(--accent); background:var(--accent); color:var(--on-accent); font-size:17px; font-weight:700; cursor:pointer; text-align:center; font-family:inherit; }
button small, .btn small { color:inherit; opacity:.85; }
button.secondary, .btn.secondary { background:transparent; color:var(--accent); }
button.secondary small, .btn.secondary small { color:var(--sub); }
button.small { min-height:40px; font-size:14px; padding:4px 10px; }
button:disabled { opacity:.45; cursor:default; }
.row { display:flex; gap:10px; flex-wrap:wrap; }
.row > * { flex:1 1 140px; }
.filebtn { display:flex; flex-direction:column; justify-content:center; }
.filebtn input { display:none; }

/* 렉 + 모드 */
.rackname { font-size:34px; font-weight:800; letter-spacing:.5px; }
.rackname.none { font-size:18px; font-weight:700; color:var(--sub); }
.rackline { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rackline button { flex:0 0 auto; }
select, input[type=text], input[type=password] { width:100%; min-height:48px; font-size:17px; padding:6px 10px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--ink); font-family:inherit; }
.seg { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.seg button { background:transparent; color:var(--ink); border:2px solid var(--line); min-height:64px; font-size:19px; padding-left:4px; padding-right:4px; }
.seg button.on.in { background:var(--in); border-color:var(--in); color:#fff; }
.seg button.on.out { background:var(--out); border-color:var(--out); color:#fff; }
.seg button.on.audit { background:var(--warn); border-color:var(--warn); color:#fff; }
.seg button.on small { color:#fff; opacity:.9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .seg button.on.in, :root:not([data-theme="light"]) .seg button.on.out { color:#0b1220; } :root:not([data-theme="light"]) .seg button.on small { color:#0b1220; } }

/* 카메라 */
.video-wrap { position:relative; margin-top:12px; border-radius:10px; overflow:hidden; background:#000; display:none; }
.video-wrap.on { display:block; }
.video-wrap.top video { max-height:36vh; }
.video-wrap.top { margin:0 0 12px; position:sticky; top:0; z-index:5; box-shadow:0 2px 10px rgba(0,0,0,.25); }
video { width:100%; display:block; max-height:50vh; object-fit:cover; }
.aim { position:absolute; left:50%; top:50%; width:60%; aspect-ratio:1; transform:translate(-50%,-50%); border:3px solid rgba(255,255,255,.85); border-radius:12px; pointer-events:none; box-shadow:0 0 0 9999px rgba(0,0,0,.25); }
.hint { font-size:14px; margin-top:8px; color:var(--sub); }
.status { margin-top:8px; font-size:14px; }
.status.err { color:var(--ng); }

/* 결과 알림 */
.flash { border-radius:12px; padding:12px 14px; margin-bottom:12px; font-weight:700; border:2px solid; }
.flash.in { border-color:var(--in); color:var(--in); }
.flash.out { border-color:var(--out); color:var(--out); }
.flash.err { border-color:var(--ng); color:var(--ng); }
.flash .detail { font-weight:400; color:var(--ink); font-size:14px; margin-top:4px; }

/* 재고 목록 */
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:13px; }
td.num, th.num { text-align:right; }
.mono { font-family:ui-monospace,Consolas,monospace; font-size:13px; word-break:break-all; }
.tag { display:inline-block; padding:1px 8px; border-radius:99px; font-size:12px; font-weight:700; border:1px solid currentColor; }
.tag.off { color:var(--sub); }
.tag.on { color:var(--in); }
.tag.warn { color:var(--warn); }
.warntxt { color:var(--warn); }

/* 확인 창 */
dialog { border:3px solid var(--accent); border-radius:14px; padding:0; width:min(480px, calc(100vw - 24px)); background:var(--card); color:var(--ink); }
dialog.in { border-color:var(--in); } dialog.out { border-color:var(--out); } dialog.audit { border-color:var(--warn); } dialog.audit-ok { border-color:var(--in); }
dialog::backdrop { background:rgba(0,0,0,.55); }
.dlg-head { padding:12px 16px; font-size:22px; font-weight:800; color:#fff; }
dialog.in .dlg-head { background:var(--in); } dialog.out .dlg-head { background:var(--out); } dialog.audit .dlg-head { background:var(--warn); } dialog.audit-ok .dlg-head { background:var(--in); }
.dlg-head small { color:#fff; opacity:.9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dlg-head, :root:not([data-theme="light"]) .dlg-head small { color:#0b1220; } }
.dlg-body { padding:14px 16px; }
dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:8px 12px; }
dt { font-weight:700; }
dd { margin:0; font-size:18px; font-weight:700; word-break:break-all; }
dd.dim { font-size:14px; font-weight:400; color:var(--sub); }
.warns { margin:12px 0 0; padding:0; list-style:none; }
.warns li { border:2px solid var(--warn); border-radius:10px; padding:8px 10px; margin-bottom:8px; font-weight:700; }
.warns li.block { border-color:var(--ng); color:var(--ng); }
.warns li .more { font-weight:400; font-size:14px; color:var(--ink); }
.dlg-foot { display:flex; gap:10px; padding:0 16px 16px; }
.dlg-foot button { flex:1; }
.dlg-foot .primary-wide { flex:2; }

/* 렉 관리 */
.addform { display:grid; gap:10px; }
.addform .two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.qrbox { display:flex; flex-direction:column; align-items:center; gap:8px; padding:8px 0; }
.qrbox svg, .qrbox img { width:220px; height:220px; }
.qrname { font-size:30px; font-weight:800; }

/* 확인 버튼 색을 입고(초록)/출고(주황)에 맞춤 */
dialog.in #dlgOk { background:var(--in); border-color:var(--in); color:#fff; }
dialog.out #dlgOk { background:var(--out); border-color:var(--out); color:#fff; }
dialog.in #dlgOk small, dialog.out #dlgOk small { color:#fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) dialog.in #dlgOk, :root:not([data-theme="light"]) dialog.out #dlgOk, :root:not([data-theme="light"]) dialog.in #dlgOk small, :root:not([data-theme="light"]) dialog.out #dlgOk small { color:#0b1220; } }

/* 렉 관리 표: 좁은 화면에서 글자가 깨지지 않게 */
.tag, th { white-space:nowrap; }
td .small { min-width:34px; padding:2px 8px; }
#rackBody td:first-child { min-width:90px; }
td .small { min-width:30px; padding:2px 6px; font-size:13px; }
#rackBody td:first-child { min-width:70px; }
#rackBody td { padding-left:4px; padding-right:4px; }
#rackBody td:last-child { padding-right:0; }
button:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
dialog button:focus:not(:focus-visible) { outline:none; }

/* 재고 찾기 */
.sgrp { border-top:1px solid var(--line,#ddd); padding:8px 0; }
.sgrp:first-child { border-top:0; }
.shead { display:flex; flex-wrap:wrap; gap:2px 8px; align-items:baseline; }
.shead small { color:var(--sub,#666); }
.stot { margin-left:auto; font-weight:700; white-space:nowrap; }
.sgrp table { margin-top:4px; }
.sgrp.pick .shead { cursor:pointer; padding:6px 0; }
.sgrp.pick .shead::before { content:'▸'; color:var(--sub,#666); }
.sgrp.pick.open .shead::before { content:'▾'; }
.sgrp.pick table { display:none; }
.sgrp.pick.open table { display:table; }
.sgrp .none { color:var(--sub,#666); font-weight:400; }
.sgrp td { padding:4px 4px; vertical-align:middle; }
.hrow { display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.hist td { padding:3px 4px; font-size:13px; }
.hist .hin b { color:#1a7f37; }
.hist .hout b { color:#b3261e; }
.hist .hnote { color:var(--sub,#666); font-size:12px; padding-top:0; }
.sgrp .mono { font-family:monospace; font-size:12px; word-break:break-all; }

/* 재고 실사 */
.aprog { font-size:28px; font-weight:800; margin:2px 0 6px; }
.aprog small { font-size:14px; font-weight:400; color:var(--sub,#666); margin-left:6px; }
.arow { display:flex; gap:8px; align-items:baseline; padding:6px 0; border-top:1px solid var(--line,#ddd); }
.arow:first-child { border-top:0; }
.arow .mark { width:22px; font-weight:800; color:var(--in); }
.arow.bad .mark { color:var(--warn); }
.arow .mono { font-family:monospace; font-size:12.5px; word-break:break-all; flex:1; }
.arow.new { background:rgba(37,99,235,.10); }
.asec { margin:10px 0 4px; font-weight:800; }
.asec.warn { color:var(--warn); }
.alist { font-size:14px; }
.alist .arow { padding:4px 0; }
.adet summary { cursor:pointer; font-weight:700; padding:6px 0; }
#auditFoot { display:flex; flex-direction:column; gap:8px; padding:12px 16px 16px; }
#auditFoot button { width:100%; }
.aprog small { display:inline; }
.asec small { display:block; font-weight:400; color:var(--sub,#666); font-size:13px; }

/* 재고 현황판 */
.tiles { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:12px; }
@media (min-width:640px) { .tiles { grid-template-columns:repeat(4,1fr); } }
.tile { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; }
.tile .tv { font-size:28px; font-weight:800; line-height:1.1; }
.tile .tl { font-size:14px; margin-top:4px; }
.tile .ts { font-size:12px; color:var(--sub); }
.bar { display:grid; grid-template-columns:72px 1fr 32px; align-items:center; gap:8px; padding:3px 0; font-size:14px; }
.bar .bn { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar .bt { background:var(--line); border-radius:99px; height:12px; overflow:hidden; display:block; }
.bar .bf { background:var(--accent); height:100%; display:block; min-width:0; }
.bar .bv { text-align:right; font-variant-numeric:tabular-nums; }