:root {
  --bg:#F6F7F9; --card:#fff; --line:#E4E7EC; --line2:#F0F1F4; --text:#1A1D23; --muted:#5B6270; --faint:#98A2B3;
  --accent:#4F46E5; --accent-d:#3730A3; --accent-bg:#EEF2FF;
  --in:#1E40AF; --in-bg:#DBEAFE; --out:#92400E; --out-bg:#FEF3C7;
  --ok:#166534; --ok-bg:#DCFCE7; --err:#991B1B; --err-bg:#FEE2E2; --warn:#78350F; --warn-bg:#FEF3C7;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:'Noto Sans KR', system-ui, sans-serif; font-size:14px; }
button, input, select { font:inherit; }
[hidden] { display:none !important; }

/* 로그인 */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; }
.login { width:100%; max-width:400px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:40px 32px; display:flex; flex-direction:column; gap:18px; text-align:center; }
.logo { font-size:20px; font-weight:700; letter-spacing:.08em; }

/* 레이아웃 */
header.top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:12px 24px; background:var(--card); border-bottom:1px solid var(--line); }
header.top .left { display:flex; align-items:center; gap:14px; }
.shell { display:flex; flex-wrap:wrap; min-height:calc(100vh - 57px); }
nav.side { flex:1 1 200px; max-width:100%; background:var(--card); border-right:1px solid var(--line); padding:16px 12px; display:flex; flex-direction:column; gap:4px; }
nav.side a { display:flex; align-items:center; justify-content:space-between; min-height:42px; padding:0 12px; border-radius:8px; color:#3D4350; text-decoration:none; }
nav.side a.on { background:var(--accent-bg); color:var(--accent-d); font-weight:600; }
nav.side a.off { color:var(--faint); pointer-events:none; }
nav.side .soon { font-size:11px; color:var(--faint); }
main { flex:999 1 560px; min-width:0; padding:24px 28px 48px; display:flex; flex-direction:column; gap:18px; }
h1 { margin:0; font-size:22px; }
h2 { margin:0; font-size:15px; font-weight:600; }
.sub { font-size:13px; color:var(--muted); }

/* 공통 */
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 20px; }
.grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
.stat .k { font-size:12px; color:var(--muted); }
.stat .v { font-size:20px; font-weight:700; margin-top:6px; }
.btn { min-height:40px; padding:0 14px; border:1px solid #D0D5DD; border-radius:8px; background:#fff; color:var(--text); cursor:pointer; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.btn.pill { border-radius:999px; }
.btn.pill.on { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
input, select { min-height:42px; padding:8px 12px; border:1px solid #D0D5DD; border-radius:8px; background:#fff; color:var(--text); width:100%; }
label.f { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:500; }
.row { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.two { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.tag { display:inline-block; font-size:12px; font-weight:600; padding:2px 9px; border-radius:999px; white-space:nowrap; }
.tag.in { background:var(--in-bg); color:var(--in); } .tag.out { background:var(--out-bg); color:var(--out); }
.tag.ok { background:var(--accent-bg); color:var(--accent-d); } .tag.wait { background:var(--warn-bg); color:var(--warn); }
.tag.late { background:var(--err-bg); color:var(--err); } .tag.grey { background:var(--line2); color:var(--muted); }
.msg { padding:10px 12px; border-radius:8px; font-size:13px; }
.msg.ok { background:var(--ok-bg); color:var(--ok); } .msg.err { background:var(--err-bg); color:var(--err); }
.muted { color:var(--muted); font-size:12px; }

/* 표 */
.tbl-wrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; }
th { font-size:12px; font-weight:600; color:var(--muted); text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
td { font-size:13px; padding:10px 12px; border-bottom:1px solid var(--line2); white-space:nowrap; }
td.r, th.r { text-align:right; }
tr.click { cursor:pointer; } tr.click:hover td { background:#FAFAFF; }
.pno { font-weight:600; color:var(--accent-d); }
.bar { height:6px; background:var(--line2); border-radius:999px; overflow:hidden; min-width:140px; }
.bar > i { display:block; height:100%; background:#2563EB; }

/* 상세 */
.steps { display:grid; grid-template-columns:repeat(6, minmax(110px,1fr)); gap:4px; overflow-x:auto; }
.step { font-size:12px; font-weight:600; text-align:center; padding:10px 6px; border-radius:8px; background:var(--bg); color:var(--muted); white-space:nowrap; }
.step.done { background:var(--accent); color:#fff; } .step.now { background:var(--warn-bg); color:var(--warn); border:1px solid #FCD34D; }
.split { display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start; }
.split > .main { flex:999 1 520px; min-width:0; display:flex; flex-direction:column; gap:18px; }
.split > .panel { flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:12px; }
.krw { display:flex; justify-content:space-between; align-items:center; padding:12px; background:var(--accent-bg); border-radius:10px; color:var(--accent-d); font-size:13px; }
.krw b { font-size:16px; }

button.sortable { all:unset; cursor:pointer; font-weight:600; color:var(--muted); white-space:nowrap; }
button.sortable:hover { color:var(--accent-d); }
button.sortable:focus-visible { outline:2px solid var(--accent); border-radius:4px; }