/* ───────── FIBC 재고관리 · UI ───────── */
:root{
  --bg:#f3f5f9; --card:#fff; --line:#e6e9ef; --line2:#eef1f5; --text:#18202e; --muted:#6b7385;
  --brand:#1f4fd1; --brand-d:#173ea6; --brand-l:#eef3ff;
  --side:#0f1a2e; --side2:#18263f; --side-t:#a9b4c7;
  --vn:#e2611b; --ld:#d48a06; --sea:#0b8aa3; --hq:#2f5ee0; --ok:#16a34a; --warn:#dc2626; --adj:#7c3aed;
  --r:12px; --sh:0 1px 2px rgba(16,24,40,.04),0 2px 8px rgba(16,24,40,.05);
  --sidew:236px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:"Pretendard","Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo","Segoe UI",system-ui,sans-serif;
  background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
.ic{width:20px;height:20px;fill:currentColor;flex:none;vertical-align:-5px}

/* ── 사이드바 ── */
.side{position:fixed;inset:0 auto 0 0;width:var(--sidew);background:var(--side);color:var(--side-t);
  display:flex;flex-direction:column;z-index:30}
.brand{display:flex;align-items:center;gap:11px;padding:20px 20px 18px;color:#fff;text-decoration:none!important}
.brand .mark{width:38px;height:38px;flex:none;filter:drop-shadow(0 2px 6px rgba(37,99,235,.45))}
.brand b{display:block;font-size:16px;letter-spacing:.5px;line-height:1.1}
.brand small{display:block;font-size:12px;color:var(--side-t)}
.side nav{flex:1;overflow-y:auto;padding:4px 12px 12px}
.side .grp{font-size:11px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:#5f6b82;padding:14px 10px 6px}
.side nav a{display:flex;align-items:center;gap:11px;padding:9px 10px;margin:1px 0;border-radius:8px;color:var(--side-t);
  font-weight:500;text-decoration:none}
.side nav a:hover{background:var(--side2);color:#fff}
.side nav a.on{background:var(--brand);color:#fff;box-shadow:0 4px 12px rgba(31,79,209,.35)}
.who{display:flex;align-items:center;gap:10px;padding:14px 18px;border-top:1px solid #1d2a43}
.avatar{width:34px;height:34px;border-radius:50%;background:#26365a;color:#fff;display:grid;place-items:center;font-weight:700}
.who .nm{min-width:0}.who b{display:block;color:#fff;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.role{display:inline-block;font-size:11px;padding:1px 8px;border-radius:20px;background:#26365a;color:#c7d2fe;margin-top:2px}
.role.r-VN{background:rgba(226,97,27,.18);color:#fdba8c}.role.r-HQ{background:rgba(47,94,224,.25);color:#bfd0ff}
.role.r-ADMIN{background:rgba(124,58,237,.25);color:#ddd0ff}
.tools{display:flex;gap:6px;align-items:center;padding:0 18px 18px}
.tools select{flex:1;background:var(--side2);color:#fff;border:1px solid #26365a;border-radius:8px;padding:6px 8px;font-size:12px}
.tools a,.tools button{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;background:var(--side2);
  color:var(--side-t);border:1px solid #26365a;cursor:pointer;padding:0}
.tools a:hover,.tools button:hover{color:#fff;background:#22324f}
.ver{padding:0 18px 12px;margin-top:-8px;font-size:11px;color:#55627a}
.mtop,.scrim{display:none}

/* ── 본문 ── */
main{margin-left:var(--sidew);padding:26px 32px 60px;min-height:100vh}
body.guest main{margin:0;padding:0}
h1{font-size:23px;font-weight:700;margin:0 0 20px;letter-spacing:-.3px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
h1 .sub,h1 .muted{font-size:14px;font-weight:500;color:var(--muted)}
h1 .btn{font-size:13px;font-weight:500}
h2{font-size:15px;font-weight:700;margin:0 0 14px;display:flex;align-items:center;gap:8px}
h2 .more,h2 .small{margin-left:auto;font-size:12.5px;font-weight:500}
h2.danger{color:var(--warn)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:18px;box-shadow:var(--sh)}
.card>h2:first-child{margin-top:0}
.grid{display:grid;gap:18px}.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:1fr 1fr}
.grid>.card{margin-bottom:0}.grid+.grid,.grid+.card,.card+.grid{margin-top:18px}

/* KPI */
a.kpi{display:flex;align-items:center;gap:16px;color:var(--text);text-decoration:none;transition:transform .12s,box-shadow .12s;
  position:relative;overflow:hidden}
a.kpi:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(16,24,40,.08)}
.kpi .ico{width:48px;height:48px;border-radius:12px;display:grid;place-items:center}
.kpi .ico .ic{width:26px;height:26px}
.kpi .l{color:var(--muted);font-size:13px;font-weight:500}
.kpi .n{font-size:30px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums;line-height:1.15}
.kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.kpi.vn .ico{background:#fff1e8;color:var(--vn)}.kpi.vn::after{background:var(--vn)}
.kpi.ld .ico{background:#fff6dc;color:var(--ld)}.kpi.ld::after{background:var(--ld)}
.kpi.sea .ico{background:#e3f6fa;color:var(--sea)}.kpi.sea::after{background:var(--sea)}
.kpi.hq .ico{background:#e9efff;color:var(--hq)}.kpi.hq::after{background:var(--hq)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px;background:#999}
.dot.vn{background:var(--vn)}.dot.ld{background:var(--ld)}.dot.sea{background:var(--sea)}.dot.hq{background:var(--hq)}

/* 표 */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:#fff}
.card .tbl{border-color:var(--line2)}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:10px 12px;border-bottom:1px solid var(--line2);text-align:left;vertical-align:middle}
th{background:#f7f9fc;font-size:12.5px;font-weight:600;color:#556070;white-space:nowrap}
tr:last-child td{border-bottom:0}
tbody tr:hover td,table tr:hover td{background:#fafbff}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
tr.low td{color:var(--warn);font-weight:600}
tr.cx td{color:#a3aab8;text-decoration:line-through}

/* 폼 · 버튼 */
form.inline{display:inline}
input,select,textarea,button{font:inherit;color:inherit}
input[type=text],input[type=number],input[type=date],input[type=password],input[type=search],input[type=email],
input[type=file],select,textarea{border:1px solid #d5dbe5;border-radius:8px;padding:8px 11px;background:#fff;min-height:38px;
  transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgba(31,79,209,.15)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #d5dbe5;background:#fff;border-radius:8px;
  padding:8px 15px;min-height:38px;cursor:pointer;color:var(--text);font-weight:500;white-space:nowrap;text-decoration:none!important;
  transition:background .12s,border-color .12s}
.btn:hover{background:#f4f6fa;border-color:#c6cdd9}
.btn.p{background:var(--brand);border-color:var(--brand);color:#fff}.btn.p:hover{background:var(--brand-d)}
.btn.d{color:var(--warn);border-color:#f5c2c2}.btn.d:hover{background:#fef2f2}
.btn.s{padding:4px 10px;min-height:28px;font-size:12.5px;border-radius:7px}
.btn.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.block{width:100%}
.bar{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:16px}
.bar label{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted);font-weight:500}
form.bar{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh)}
.muted{color:var(--muted)}.small{font-size:12.5px}
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600;background:#eef1f6}
.st-LOADING{background:#fff4d6;color:#8a5a00}.st-IN_TRANSIT{background:#dbf4f8;color:#0b6577}
.st-ARRIVED{background:#e3ebff;color:#1e3fa8}.st-CLOSED{background:#dcf5e5;color:#166534}
.k-PRODUCE{color:var(--vn);font-weight:600}.k-SHIP{color:var(--sea);font-weight:600}.k-RECEIVE,.k-IN{color:var(--hq);font-weight:600}
.k-OUT{color:#b45309;font-weight:600}.k-ADJUST{color:var(--adj);font-weight:600}

/* 알림 */
.msgs{list-style:none;padding:0;margin:0 0 16px}
.msgs li{padding:11px 16px;border-radius:10px;margin-bottom:8px;border:1px solid transparent;font-weight:500}
.msgs .success{background:#ecfdf3;border-color:#bbf0cf;color:#166534}
.msgs .error{background:#fef2f2;border-color:#fbcaca;color:#991b1b}
.msgs .warning{background:#fffbeb;border-color:#fde3a0;color:#854d0e}
.msgs .info{background:#eff6ff;border-color:#c7dcfe;color:#1e40af}

/* 스캔 */
.status{padding:18px 22px;border-left:8px solid #999;background:#f8fafc;border-radius:10px;font-size:19px;font-weight:700;
  white-space:pre-wrap;min-height:64px;line-height:1.45}
.c-produce{border-color:var(--vn);color:var(--vn);background:#fff7f1}.c-ship{border-color:var(--sea);color:var(--sea);background:#f0fafc}
.c-receive,.c-in{border-color:var(--hq);color:var(--hq);background:#f3f6ff}.c-out{border-color:#b45309;color:#b45309;background:#fffaf0}
.c-adjust{border-color:var(--adj);color:var(--adj);background:#f7f3ff}.c-lookup{border-color:var(--ok);color:var(--ok);background:#f0fdf4}
.c-err,.c-warn{border-color:var(--warn);color:var(--warn);background:#fef2f2}.c-muted{border-color:#c4cad6;color:#5b6475}
.modes{display:flex;gap:8px;flex-wrap:wrap}
.modes button{border:1px solid #d5dbe5;background:#fff;padding:11px 18px;border-radius:10px;cursor:pointer;font-weight:600;
  font-size:14.5px;transition:all .12s}
.modes button:hover{border-color:var(--brand);color:var(--brand)}
.modes button.on{background:var(--side);color:#fff;border-color:var(--side);box-shadow:0 4px 12px rgba(15,26,46,.25)}
.scanbox{font-size:20px;padding:12px 14px!important;width:100%;min-height:52px!important;border-width:2px!important}
.diff-neg{color:var(--warn);font-weight:700}.diff-pos{color:var(--adj);font-weight:700}
.pager{margin-top:14px;display:flex;gap:6px;align-items:center}
details summary{cursor:pointer;color:var(--brand);font-weight:500}
.right{text-align:right}.mt{margin-top:14px}.hide{display:none!important}

/* ── 로그인 ── */
.auth{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.auth-art{background:radial-gradient(1200px 600px at 10% 10%,#2448b8 0%,#0f1a2e 60%);color:#fff;padding:48px 56px;
  display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-art::before{content:"";position:absolute;right:-120px;bottom:-120px;width:420px;height:420px;border-radius:50%;
  border:60px solid rgba(255,255,255,.04)}
.brand.big{padding:0}.brand.big .mark{width:52px;height:52px}
.brand.big b{font-size:22px}.brand.big small{font-size:14px;color:#b9c6e4}
.flow{display:flex;align-items:center;gap:14px}
.flow div{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:14px;color:#cdd8f2}
.flow .ic{width:56px;height:56px;padding:14px;border-radius:16px;background:rgba(255,255,255,.08);color:#fff}
.flow i{flex:1;max-width:90px;height:2px;margin-bottom:28px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 6px,transparent 6px 12px)}
.foot{margin:0;font-size:12px;letter-spacing:1.5px;color:#8696bd}
.auth-form{display:grid;place-items:center;padding:40px 24px;background:#fff}
.auth-form .box{width:100%;max-width:360px}
.auth-form h1{font-size:26px;margin:18px 0 22px}
.langs{display:flex;gap:4px;background:#f1f4f9;padding:4px;border-radius:10px;width:max-content}
.langs a{padding:5px 12px;border-radius:7px;font-size:12.5px;color:var(--muted);text-decoration:none!important}
.langs a.on{background:#fff;color:var(--text);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.fld{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:#3d4657;margin-bottom:16px}
.fld input{min-height:46px!important;font-size:15px}
.auth-form .btn.p{min-height:48px;font-size:15px;font-weight:700;margin-top:6px}
.login{max-width:420px;margin:60px auto}

/* 머리글 정렬 */
th.sortable{cursor:pointer;user-select:none;position:relative;padding-right:22px}
th.sortable:hover{background:#eef2fb;color:var(--text)}
th.sortable::after{content:"";position:absolute;right:8px;top:50%;margin-top:-5px;border:4px solid transparent;
  border-top-color:#b8c0cd;border-bottom:0;opacity:.0;transition:opacity .1s}
th.sortable:hover::after{opacity:1}
th.sortable.asc::after,th.sortable.desc::after{opacity:1;border-top:0;border-bottom:5px solid var(--brand);margin-top:-3px}
th.sortable.desc::after{border-bottom:0;border-top:5px solid var(--brand)}
th.sortable.asc,th.sortable.desc{color:var(--brand)}

/* 수동 입력 */
.man-tg{margin-left:8px}.man-tg.on{background:#7c3aed;border-color:#7c3aed;color:#fff}
.man{margin-top:12px;border:1px dashed #b9a3f5;background:#faf7ff;border-radius:10px;padding:14px 16px}
.man-h{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}.man-h b{color:#6d28d9}
.dt{display:flex;gap:4px;align-items:center}.dt input{width:120px}
.small.ok{color:var(--ok);font-weight:600}.small.err{color:var(--warn);font-weight:600}

/* 로그인 문구 */
.hero h2{font-size:34px;line-height:1.25;font-weight:800;letter-spacing:-.8px;margin:0 0 12px;color:#fff;max-width:460px;display:block}
.hero p{margin:0 0 44px;color:#b9c6e4;font-size:15px}
.grid>*{min-width:0}
.badge,td .btn{white-space:nowrap}

/* ── 반응형 ── */
@media(max-width:1200px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:960px){
  .side{transform:translateX(-100%);transition:transform .2s}
  body.nav-open .side{transform:none}
  body.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:25}
  .mtop{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:20;height:54px;padding:0 14px;
    background:var(--side);color:#fff}
  .mtop button{background:none;border:0;color:#fff;padding:6px;cursor:pointer}.mtop .ic{width:24px;height:24px}
  .mtop .mark{width:26px;height:26px}
  main{margin-left:0;padding:18px 14px 50px}
  .g3,.g2{grid-template-columns:1fr}
  th,td{white-space:nowrap;padding:9px 10px}
  .hero h2{font-size:24px}.hero p{margin-bottom:24px}
  h1{font-size:20px}.card{padding:16px}
  .auth{grid-template-columns:1fr}.auth-art{padding:28px 24px;min-height:auto;gap:26px}
  .flow .ic{width:44px;height:44px;padding:10px}
}
@media(max-width:560px){.g4{grid-template-columns:1fr 1fr}.kpi .n{font-size:24px}.kpi .ico{width:40px;height:40px}
  a.kpi{gap:10px;padding:14px}}
@media print{.side,.mtop{display:none}main{margin:0;padding:0}.card{box-shadow:none}}