/* 운영자 콘솔 (ops) — tokens.css(v2) 이식 + 콘솔 컴포넌트. 업무 표면은 일관성 수준이면 충분. */
:root{
  --raw-paper-100:#FBFAF5; --raw-paper-200:#F6F4EC; --raw-paper-300:#F3F2EC; --raw-white:#FFFFFF;
  --raw-ink-deep:#181C15; --raw-ink:#20241C; --raw-charcoal:#3A3F32; --raw-slate:#6B6F62;
  --raw-steel:#8B8F7E; --raw-stone:#A6AA9B;
  --raw-green-700:#14402E; --raw-green-600:#1E5B41; --raw-green-100:#E7F0EA;
  --raw-red-700:#A72F1F; --raw-red-600:#D6402B; --raw-red-100:#FBEAE6;
  --raw-gold-600:#B98A1F; --raw-gold-100:#F6EFDC;
  --raw-cold-600:#1D5A80; --raw-cold-100:#E4EEF5;
  --raw-line:#E0DCCE; --raw-line-soft:#EFECDF;
  --canvas:var(--raw-paper-300); --surface:var(--raw-white); --surface-soft:var(--raw-paper-100);
  --ink-deep:var(--raw-ink-deep); --ink:var(--raw-ink); --charcoal:var(--raw-charcoal);
  --slate:var(--raw-slate); --steel:var(--raw-steel); --stone:var(--raw-stone);
  --hairline:var(--raw-line); --hairline-soft:var(--raw-line-soft);
  --brand:var(--raw-green-600); --brand-deep:var(--raw-green-700); --brand-soft:var(--raw-green-100);
  --convert:var(--raw-red-600); --convert-deep:var(--raw-red-700); --convert-soft:var(--raw-red-100);
  --target:var(--raw-gold-600); --target-soft:var(--raw-gold-100);
  --cold:var(--raw-cold-600); --cold-soft:var(--raw-cold-100);
  --font:'Pretendard Variable',Pretendard,-apple-system,'Noto Sans KR',sans-serif;
  --num:tabular-nums;
  --r-md:8px; --r-card:16px; --r-full:100px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--canvas);color:var(--ink);font:400 15px/1.5 var(--font);
  -webkit-font-smoothing:antialiased}
.num,.kpi .v,td.num{font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--cold);outline-offset:2px}

/* 레이아웃 — 사이드바 + 메인 */
.shell{display:grid;grid-template-columns:224px 1fr;min-height:100vh}
.side{background:var(--ink-deep);color:var(--raw-paper-200);padding:22px 16px;display:flex;flex-direction:column;gap:6px}
.side .brand{font:800 17px var(--font);letter-spacing:-.01em;color:#fff;padding:6px 10px 18px}
.side .brand small{display:block;font:700 11px var(--font);color:var(--raw-steel);letter-spacing:.06em;margin-top:3px}
.side a.item{padding:10px 12px;border-radius:var(--r-md);color:var(--raw-stone);font:700 14px var(--font)}
.side a.item.on{background:rgba(255,255,255,.09);color:#fff}
.side a.item:hover{color:#fff}
.side .foot{margin-top:auto;font:400 12px var(--font);color:var(--raw-steel);padding:10px}
.side .foot a{color:var(--raw-stone);text-decoration:underline}
.main{padding:26px 32px 48px;min-width:0}
.main-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.main-h h1{font:700 24px/1.2 var(--font);letter-spacing:-.01em}
.main-h .sub{font:400 13px var(--font);color:var(--slate);margin-top:4px}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:22px}
.kpi{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);padding:18px}
.kpi .l{font:800 11px var(--font);letter-spacing:.04em;color:var(--slate);text-transform:uppercase}
.kpi .v{font:900 26px/1.1 var(--font);margin-top:8px;letter-spacing:-.02em}
.kpi .v em{font:700 14px var(--font);font-style:normal;color:var(--slate);margin-left:2px}
.kpi .s{font:400 12px var(--font);color:var(--steel);margin-top:6px}

/* 카드 + 표 */
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);
  overflow:hidden;margin-bottom:18px}
.card-h{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;
  border-bottom:1px solid var(--hairline-soft)}
.card-h b{font:800 15px var(--font)}
.card-h .hint{font:400 12px var(--font);color:var(--steel)}
table{width:100%;border-collapse:collapse}
th{font:800 11px var(--font);letter-spacing:.04em;color:var(--slate);text-transform:uppercase;
  text-align:left;padding:11px 18px;border-bottom:1px solid var(--hairline-soft)}
td{padding:13px 18px;border-bottom:1px solid var(--hairline-soft);font:400 14px var(--font);vertical-align:middle}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover,tr:hover{background:var(--surface-soft)}
.empty{padding:40px 18px;text-align:center;color:var(--steel)}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 20px;
  border:none;border-radius:var(--r-full);font:700 14px var(--font);cursor:pointer;
  background:var(--ink);color:var(--raw-paper-100)}
.btn:active{background:var(--charcoal)}
.btn.sm{min-height:32px;padding:6px 14px;font-size:13px}
.btn.buy{background:var(--convert);color:#fff;box-shadow:0 3px 0 var(--convert-deep)}
.btn.buy:active{background:var(--convert-deep);box-shadow:none;transform:translateY(2px)}
.btn.brand{background:var(--brand)}.btn.brand:active{background:var(--brand-deep)}
.btn.ghost{background:transparent;border:2px solid rgba(24,28,21,.14);color:var(--ink-deep)}
.rowbtns{display:flex;gap:8px;flex-wrap:wrap}

/* 배지 */
.badge{display:inline-block;padding:4px 10px;border-radius:var(--r-full);font:700 11.5px var(--font)}
.badge.ok{background:var(--brand-soft);color:var(--brand)}
.badge.warn{background:var(--target-soft);color:var(--target)}
.badge.bad{background:var(--convert-soft);color:var(--convert)}
.badge.idle{background:#EDEBE0;color:var(--slate)}
.badge.cold{background:var(--cold-soft);color:var(--cold)}

/* BEP·목표 게이지 (시그니처) */
.gauge{min-width:180px}
.gauge .bar{position:relative;height:10px;background:#E9E6D8;border-radius:var(--r-full)}
.gauge .fill{height:100%;border-radius:inherit;background:var(--brand)}
.gauge .fill.under{background:var(--target)}
.gauge .bep{position:absolute;top:-4px;width:2px;height:18px;background:var(--convert)}
.gauge .cap{display:flex;justify-content:space-between;font:700 11px var(--font);color:var(--steel);margin-top:8px}

/* 폼 */
.form{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);padding:22px;max-width:640px}
.frow{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center;margin-bottom:14px}
.frow label{font:800 12px var(--font);color:var(--slate)}
.input,select{height:44px;padding:0 12px;border:1px solid var(--hairline);border-radius:var(--r-md);
  background:var(--surface);font:400 15px var(--font);width:100%}
.input:focus,select:focus{border:2px solid var(--cold);outline:none}
.help{font:400 12px var(--font);color:var(--steel);margin-top:2px}

/* 로그인 */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:32px;width:360px;max-width:100%}
.login h1{font:800 20px var(--font);margin-bottom:6px}
.login p{font:400 13px var(--font);color:var(--slate);margin-bottom:20px}
.login .input{margin-bottom:12px}
.login .btn{width:100%}
.login .err{color:var(--convert);font:700 13px var(--font);margin-bottom:12px}

@media(max-width:768px){.shell{grid-template-columns:1fr}.side{flex-direction:row;flex-wrap:wrap;gap:6px}
  .side .foot{margin:0}.main{padding:18px}}