/* 달인대보 ERP — 각진 모서리, 단색, 숫자는 고정폭 */
:root{
  --ink:#12151a;
  --navy:#1b2a41;

  --line:#e2e5ea;
  --line-2:#cfd4dc;
  --bg:#f5f6f8;
  --panel:#ffffff;
  --muted:#6b7280;
  --muted-2:#9aa1ab;
  --up:#1a6b46;
  --down:#a8322a;
  --focus:#1b2a41;
}
*{box-sizing:border-box;border-radius:0!important}
html,body{margin:0;padding:0}
body{
  font-family:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic",system-ui,sans-serif;
  color:var(--ink);background:var(--bg);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
input{font:inherit}

/* ── 로그인 ───────────────────────────── */
.gate{min-height:100vh;display:grid;place-items:center;background:var(--navy)}
.gate-box{width:360px;background:#fff;padding:34px 30px;border:1px solid #000}
.gate-brand{display:flex;gap:12px;align-items:center;margin-bottom:26px;color:var(--navy)}
.gate-brand strong{display:block;font-size:16px;letter-spacing:-.2px}
.gate-brand span{font-size:12px;color:var(--muted)}
.gate-box label{display:block;font-size:12px;color:var(--muted);margin-bottom:14px;letter-spacing:.2px}
.gate-box input{width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--line-2);background:#fff;font-size:14px}
.gate-box input:focus{outline:2px solid var(--navy);outline-offset:-2px}
.btn-primary{width:100%;background:var(--navy);color:#fff;padding:11px;font-weight:600;letter-spacing:.3px}
.btn-primary:hover{background:#16233a}
.gate-note{margin:16px 0 0;font-size:11px;color:var(--muted-2);text-align:center}
.err{color:var(--down);font-size:12px;margin:0 0 12px}

/* ── 레이아웃 ─────────────────────────── */
.shell{display:grid;grid-template-columns:212px 1fr;min-height:100vh}
.side{background:var(--navy);color:#c9d1dc;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:20px 18px;border-bottom:1px solid #2c3a52;color:#fff}
.brand strong{display:block;font-size:15px;letter-spacing:-.2px}
.brand span{font-size:10px;letter-spacing:2px;color:#7f8ca1}
#nav{padding:10px 0;flex:1}
#nav a{display:flex;align-items:center;gap:10px;padding:10px 18px;font-size:13.5px;color:#aeb8c6;border-left:2px solid transparent}
#nav a:hover{background:#20304a;color:#fff}
#nav a.on{background:#20304a;color:#fff;border-left-color:#fff}
#nav a svg{opacity:.8}
.side-foot{padding:14px 18px;border-top:1px solid #2c3a52}
.user-box{font-size:12px;color:#8b97a8;margin-bottom:10px;line-height:1.4}
.user-box b{display:block;color:#fff;font-size:13px;font-weight:600}
.btn-ghost{border:1px solid var(--line-2);padding:7px 12px;font-size:12.5px;color:var(--ink);background:#fff}
.side .btn-ghost{background:transparent;border-color:#3a4a63;color:#c9d1dc;width:100%}
.side .btn-ghost:hover{background:#20304a}

.main{padding:0 26px 40px;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:22px 0 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.topbar h1{font-size:19px;margin:0;letter-spacing:-.3px;font-weight:700}
.range{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.presets{display:flex;border:1px solid var(--line-2);background:#fff}
.presets button{padding:6px 11px;font-size:12px;color:var(--muted);border-right:1px solid var(--line)}
.presets button:last-child{border-right:none}
.presets button.on{background:var(--navy);color:#fff}
.date{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px}
.date input{border:1px solid var(--line-2);padding:5px 7px;background:#fff;font-size:12.5px}

.badges{display:flex;gap:8px;flex-wrap:wrap;padding:12px 0 0}
.badge{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);border:1px solid var(--line);background:#fff;padding:5px 9px}
.dot{width:6px;height:6px;background:var(--up)}
.dot.warn{background:#b8860b}
.dot.err{background:var(--down)}
.dot.idle{background:var(--muted-2)}

.view{padding-top:18px}
.foot{margin-top:34px;padding-top:14px;border-top:1px solid var(--line);font-size:11px;color:var(--muted-2)}

/* ── 카드 ─────────────────────────────── */
.grid{display:grid;gap:14px}
.kpis{grid-template-columns:repeat(4,1fr)}
.panels{grid-template-columns:1.6fr 1fr}
@media (max-width:1180px){.kpis{grid-template-columns:repeat(2,1fr)}.panels{grid-template-columns:1fr}}
@media (max-width:760px){.shell{grid-template-columns:1fr}.side{position:static;height:auto}#nav{display:flex;overflow-x:auto}#nav a{border-left:none;border-bottom:2px solid transparent;white-space:nowrap}#nav a.on{border-left:none;border-bottom-color:#fff}.kpis{grid-template-columns:1fr 1fr}}

.card{background:var(--panel);border:1px solid var(--line);padding:16px 18px}
.card h2{font-size:12px;font-weight:600;letter-spacing:.4px;color:var(--muted);margin:0 0 12px;text-transform:uppercase}
.kpi-label{font-size:12px;color:var(--muted);margin-bottom:8px}
.kpi-value{font-size:25px;font-weight:700;letter-spacing:-.6px;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.kpi-value small{font-size:13px;font-weight:500;color:var(--muted);margin-left:3px}
.kpi-sub{margin-top:8px;font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center}
.delta{font-variant-numeric:tabular-nums;font-weight:600}
.delta.up{color:var(--up)}
.delta.down{color:var(--down)}
.delta.flat{color:var(--muted)}

/* ── 표 ───────────────────────────────── */
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:9px 10px;text-align:right;border-bottom:1px solid var(--line);font-size:13px;white-space:nowrap}
th{font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.3px;border-bottom:1px solid var(--line-2);background:#fafbfc}
th:first-child,td:first-child{text-align:left}
td.name,th.name{text-align:left}
tbody td:nth-child(2),thead th:nth-child(2){text-align:left}
tbody tr:hover{background:#fafbfc}
td.name{font-weight:600}
td.muted{color:var(--muted)}
.table-wrap{overflow-x:auto}
.rank{display:inline-block;width:18px;color:var(--muted-2);font-variant-numeric:tabular-nums}

/* ── 차트 ─────────────────────────────── */
.chart{width:100%;height:220px;display:block}
.chart .axis{stroke:var(--line);stroke-width:1}
.chart .grid-line{stroke:#eef0f3;stroke-width:1}
.chart text{font-size:10px;fill:var(--muted-2)}
.legend{display:flex;gap:16px;font-size:11.5px;color:var(--muted);margin-top:10px;flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:3px;margin-right:5px;vertical-align:middle}

.bar-row{display:grid;grid-template-columns:120px 1fr 90px;align-items:center;gap:12px;padding:7px 0;border-bottom:1px solid #f0f2f4}
.bar-row:last-child{border-bottom:none}
.bar-track{background:#eef0f3;height:14px;position:relative;display:block}
.bar-fill{background:var(--navy);height:100%;display:block}
.bar-fill.alt{background:#8595ab}
.bar-row .val{text-align:right;font-variant-numeric:tabular-nums;font-size:12.5px}

.empty{padding:34px;text-align:center;color:var(--muted);font-size:13px;border:1px dashed var(--line-2);background:#fbfcfd}
.note{font-size:12px;color:var(--muted);margin:0 0 12px}
.stack{display:flex;flex-direction:column;gap:14px}