:root{--red:#c92a2a;--redbg:#fff1f1;--bg:#f4f5f7;--card:#fff;--line:#e3e5ea;--ink:#1a1d24;--sub:#6b7280;--acc:#2f6fed;--warn:#d9480f;--ok:#2b8a3e;--chip:#eef2ff;--nav-h:58px}
*{box-sizing:border-box}
html,body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--ink);font-family:"Pretendard","Noto Sans KR",system-ui,-apple-system,sans-serif;font-size:15px;-webkit-tap-highlight-color:transparent}
button,input,select{font-family:inherit;font-size:inherit}
.loading{padding:40px;text-align:center;color:var(--sub)}
#app{min-height:100vh;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:5;background:#fff;border-bottom:1px solid var(--line);padding:12px 14px;display:flex;align-items:center;gap:10px;font-weight:700;padding-top:calc(12px + env(safe-area-inset-top))}
.top .back{color:var(--acc);cursor:pointer;font-weight:500}
.top .sp{flex:1}
.body{flex:1;padding:12px;padding-bottom:calc(var(--nav-h) + 20px);max-width:1100px;width:100%;margin:0 auto}
.nav{position:fixed;left:0;right:0;bottom:0;height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#fff;border-top:1px solid var(--line);display:flex;z-index:5}
.nav a{flex:1;text-align:center;padding:8px 0 6px;font-size:11px;color:var(--sub);text-decoration:none}
.nav a.on{color:var(--acc);font-weight:700}
.nav a b{display:block;font-size:20px;line-height:1.1}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px}
.kpi{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.kpi .card{margin:0}
.kpi small{color:var(--sub);font-size:12px}
.kpi b{font-size:26px;display:block;line-height:1.2}
.kpi .warn b{color:var(--warn)}
.row{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row .nm{flex:1;min-width:0}
.row .nm small{display:block;color:var(--sub);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .nm .ttl{font-size:16px;font-weight:600;line-height:1.25}
.meter{height:5px;background:#e9ebef;border-radius:99px;margin:5px 0 4px;max-width:180px;overflow:hidden}
.meter i{display:block;height:100%;background:#c5c9d1;border-radius:99px}
.meter.lv0 i{background:var(--ok)}.meter.lv1 i{background:var(--warn)}.meter.lv2 i{background:var(--red)}.meter.lv3 i{background:#7a0e0e}
.row .std b{font-size:14px}
.step{display:flex;align-items:center;gap:4px}
.step button{width:42px;height:42px;border:1px solid var(--line);background:#fff;border-radius:8px;font-size:20px;cursor:pointer}
.step input{width:58px;height:42px;text-align:center;border:1px solid var(--line);border-radius:8px;font-size:19px;font-weight:600}
.calc{text-align:right;line-height:1.25;min-width:84px}
.calc small{display:block;color:var(--sub);font-size:11px}
.badge{font-size:11px;padding:2px 7px;border-radius:99px;background:var(--chip);color:var(--acc);white-space:nowrap}
.badge.short{background:#fff0e6;color:var(--warn)}
.badge.ok{background:#e9f7ec;color:var(--ok)}
.badge.gray{background:#eee;color:var(--sub)}
.tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:10px;padding-bottom:2px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs span{padding:7px 11px;border-radius:99px;background:#fff;border:1px solid var(--line);font-size:13px;white-space:nowrap;cursor:pointer}
.tabs span.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn{display:block;width:100%;padding:14px;border:0;border-radius:12px;background:var(--acc);color:#fff;font-size:16px;font-weight:700;cursor:pointer}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.sm{padding:9px 12px;font-size:13px;width:auto;display:inline-block}
.btn.warn{background:var(--warn)}
.btn:disabled{opacity:.5}
.sticky{position:sticky;bottom:calc(var(--nav-h) + 8px);background:linear-gradient(transparent,var(--bg) 30%);padding-top:14px}
h4{margin:10px 0 8px;font-size:13px;color:var(--sub);font-weight:600}
pre.txt{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;font-size:13px;white-space:pre-wrap;font-family:inherit;line-height:1.5}
.sup{font-weight:700;margin:14px 0 4px;display:flex;justify-content:space-between;align-items:baseline}
.sup small{color:var(--sub);font-weight:400;font-size:12px}
.pin{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:260px;margin:20px auto}
.pin button{padding:18px;font-size:22px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer}
.dots{font-size:26px;letter-spacing:10px;text-align:center;margin:10px 0}
.note{font-size:12px;color:var(--sub);margin-top:6px;line-height:1.5}
.note.warn{color:var(--warn)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:10px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{color:var(--sub);font-weight:600;font-size:12px;white-space:nowrap}
td small{display:block;color:var(--sub);font-size:10px}
.r{text-align:right;white-space:nowrap}
tr.tot td{border-top:2px solid var(--ink);border-bottom:0;font-weight:700}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
label.f{display:block;font-size:12px;color:var(--sub);margin:8px 0 3px}
input.f,select.f{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;font-size:15px;background:#fff}
input.f.sm{padding:6px;width:70px;font-size:14px}
.total{display:flex;justify-content:space-between;align-items:center}
.total b{font-size:24px}
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 16px);transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:99px;font-size:14px;z-index:20;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.show{opacity:1}
.empty{text-align:center;color:var(--sub);padding:30px 0}
.wide{overflow-x:auto}
@media (min-width:900px){
  #app{flex-direction:row}
  .top{display:none}
  .nav{position:sticky;top:0;left:auto;right:auto;bottom:auto;height:100vh;width:200px;flex:0 0 200px;flex-direction:column;border-top:0;border-right:1px solid var(--line);padding:12px 8px;gap:2px}
  .body{flex:1 1 auto;width:auto;min-width:0}
  .nav a{flex:0 0 auto;text-align:left;padding:11px 12px;border-radius:8px;font-size:14px;display:flex;gap:10px;align-items:center}
  .nav a.on{background:var(--chip)}
  .nav a b{font-size:18px}
  .nav .brand{display:block;font-weight:700;padding:8px 12px 16px;font-size:15px}
  .body{padding:20px 24px 40px}
  .kpi{grid-template-columns:repeat(4,1fr)}
  .sticky{bottom:8px}
  .toast{bottom:24px}
}
@media print{.nav,.top,.btn,.sticky,.tabs{display:none!important}.body{padding:0}}

/* 등급 색: lv0 충분 / lv1 부족 / lv2 긴급 */
.badge.urgent{background:var(--red);color:#fff;font-weight:700}
.row.lv2{background:var(--redbg);margin:0 -12px;padding-left:12px;padding-right:12px;border-left:4px solid var(--red)}
.row.lv1{border-left:4px solid var(--warn);margin-left:-12px;padding-left:8px}
.row.lv0{border-left:4px solid var(--ok);margin-left:-12px;padding-left:8px}
.row .std b{font-size:13px;color:var(--ink)}
.row .std b.none{color:var(--red)}
.step input.lv2{border-color:var(--red);color:var(--red);font-weight:700;background:var(--redbg)}
.step input.lv1{border-color:var(--warn);color:var(--warn);font-weight:700}
.calc .badge{font-size:12px}
tr.lv2 td{background:var(--redbg)}
tr.lv2 .oq{color:var(--red);font-size:15px}
tr.lv1 .oq{color:var(--warn)}
small.urg{display:block;color:var(--red);font-size:10px;font-weight:700}
.kpi .red b{color:var(--red)}
.legend{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
@media (min-width:900px){.nav{order:-1}}
.badge.urgent.lv3{background:#7a0e0e}
.row.lv3{background:#ffe3e3;margin:0 -12px;padding-left:12px;padding-right:12px;border-left:6px solid #7a0e0e}
.step input.lv3{border-color:#7a0e0e;color:#7a0e0e;font-weight:700;background:#ffe3e3}
tr.lv3 td{background:#ffe3e3}
tr.lv3 .oq{color:#7a0e0e;font-size:15px}
.tog{padding:2px 8px;border-radius:99px;border:1px solid var(--line);font-size:11px;cursor:pointer;background:#fff;margin-left:auto}
.tog.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* 재고조사 행: 폰은 2단(품목명+입력 / 게이지·현재기준+판정), 넓은 화면은 1줄 */
.row.cnt{display:grid;grid-template-columns:1fr auto;grid-template-areas:"nm step" "meta calc";row-gap:6px;column-gap:10px;align-items:center}
.row.cnt .nm{grid-area:nm}.row.cnt .step{grid-area:step}.row.cnt .meta{grid-area:meta;min-width:0}.row.cnt .calc{grid-area:calc;text-align:right}
.row.cnt .nm .ttl{white-space:normal;font-size:17px}
.row.cnt .meta small{display:block;color:var(--sub);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row.cnt .meter{max-width:none;margin:0 0 4px}
@media (min-width:700px){
  .row.cnt{grid-template-columns:minmax(140px,1fr) minmax(180px,1.2fr) auto auto;grid-template-areas:"nm meta calc step";row-gap:0}
  .row.cnt .calc{min-width:110px}
}

/* 인라인 편집·추가 폼 */
.std.ed{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
.row.cnt .edit{grid-column:1 / -1;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;margin-top:4px}
.card.form{border-color:var(--acc)}
.ownbar{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.ownbar .note{margin:0}
.oqin{width:64px;text-align:right;font-weight:700}
.oqin.lv2,.oqin.lv3{color:var(--red);border-color:var(--red)}
.catren{font-size:12px;color:var(--sub);display:inline-flex;align-items:center;gap:6px}
.nav .brand{display:none}
@media (min-width:900px){.nav .brand{display:block}}