/* =========================================================================
   APS_WEB v3.1 디자인 리뉴얼
   - v3.0 KWS 기능 클래스 유지
   - HTML 샘플의 APS 네이비 사이드바, 상단바, 카드, 테이블, 배지, 로그인 톤 반영
   ========================================================================= */
:root{
  --navy:#1b2a4a;
  --navy-2:#243b6b;
  --navy-line:#2f4170;
  --navy-ink:#0f1b33;
  --primary:#2f5bea;
  --primary-soft:rgba(47,91,234,.12);
  --success:#16a34a;
  --success-soft:rgba(22,163,74,.12);
  --warning:#e08a0b;
  --warning-soft:rgba(224,138,11,.14);
  --danger:#e23b3b;
  --danger-soft:rgba(226,59,59,.12);
  --violet:#7b4dff;
  --violet-soft:rgba(123,77,255,.14);
  --bg:#eef1f8;
  --surface:#ffffff;
  --surface-2:#f7f9fc;
  --surface-3:#f1f4fa;
  --border:#e6eaf3;
  --text:#13203b;
  --text-muted:#697995;
  --shadow:0 6px 22px rgba(20,38,80,.07);
  --radius:14px;
  --aps-sidebar-width:248px;
  --aps-content-width:1380px;
  --line:var(--border);
  --ink:var(--text);
  --muted:var(--text-muted);
  --card:var(--surface);
  --up:var(--success);
  --warn:var(--warning);
  --down:var(--danger);
  --gray:#8b96ac;
  --blue:var(--primary);
}
.theme-light{
  --bg:#eef1f8;
  --surface:#ffffff;
  --surface-2:#f7f9fc;
  --surface-3:#f1f4fa;
  --border:#e6eaf3;
  --text:#13203b;
  --text-muted:#697995;
  --shadow:0 6px 22px rgba(20,38,80,.07);
}
.theme-dark{
  --bg:#0a1020;
  --surface:#10192d;
  --surface-2:#151f36;
  --surface-3:#1a2742;
  --border:#263553;
  --text:#e8eef9;
  --text-muted:#9aa9c4;
  --shadow:0 10px 28px rgba(0,0,0,.34);
  --navy:#10192d;
  --navy-2:#17233d;
  --navy-line:#2a3a5d;
  --line:var(--border);
  --ink:var(--text);
  --muted:var(--text-muted);
  --card:var(--surface);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;color:#25406f}
.text-muted2,.stat-sub,.note{color:var(--text-muted)}
.ml-auto{margin-left:auto}

/* ---------- 버튼 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:36px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  padding:8px 13px;
  border-radius:8px;
  font-size:13px;
  font-weight:700;
  transition:border-color .15s,color .15s,background .15s,box-shadow .15s;
}
.btn:hover{border-color:var(--primary);color:var(--primary);box-shadow:0 2px 10px rgba(47,91,234,.10)}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-primary:hover{background:#244ed0;color:#fff}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-muted);box-shadow:none}
.btn-ghost:hover{background:var(--surface-3);color:var(--text);border-color:var(--border)}
.btn-block{width:100%}
.btn-sm{min-height:30px;padding:5px 10px;font-size:12px}
.btn-soft{background:var(--surface-3);border-color:var(--border)}
.btn:disabled,.lbtn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}

/* ---------- 로그인 ---------- */
.login-body{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:
    radial-gradient(circle at 18% 12%,rgba(47,91,234,.28),transparent 28%),
    linear-gradient(135deg,var(--navy-ink),var(--navy-2));
}
.login-wrap,.login-wrap2{width:100%;max-width:392px;padding:24px}
.login-card,.login-card2{
  background:#fff;
  border:1px solid rgba(255,255,255,.65);
  border-radius:8px;
  box-shadow:0 18px 50px rgba(10,18,38,.42);
  padding:34px 30px;
}
.login-brand{text-align:center;margin-bottom:24px}
.login-brand .lg{
  width:54px;
  height:54px;
  border-radius:8px;
  margin:0 auto 14px;
  background:linear-gradient(135deg,var(--navy),var(--navy-2));
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:900;
  font-size:18px;
  letter-spacing:.04em;
  box-shadow:0 8px 20px rgba(27,42,74,.35);
}
.brand-group{color:#6b7794;font-size:12px;letter-spacing:.12em;font-weight:800}
.brand-platform{color:var(--navy-2);font-size:13px;font-weight:800;margin-top:2px}
.brand-app{font-size:30px;font-weight:900;color:var(--navy);letter-spacing:.04em}
.brand-sub{color:#6b7794;font-size:11px;margin-top:4px}
.field,.lfield{display:block;margin-bottom:14px}
.field>span,.field label,.lfield>span{
  display:block;
  font-size:12px;
  color:var(--text-muted);
  margin-bottom:6px;
  font-weight:700;
}
.field>input,.field>select,.field textarea,.lfield>input,.input,.inp{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  border-radius:8px;
  font-size:13px;
}
.field>input:focus,.field>select:focus,.field textarea:focus,.lfield>input:focus,.input:focus,.inp:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-soft);
}
.lbtn{
  width:100%;
  background:var(--navy);
  color:#fff;
  border:0;
  padding:12px;
  border-radius:8px;
  font-size:14px;
  font-weight:800;
  margin-top:4px;
}
.lbtn:hover{background:var(--navy-2)}
.login-error,.login-error2{
  margin-top:14px;
  color:#b91c1c;
  font-size:13px;
  background:#fff1f2;
  border:1px solid #fecaca;
  padding:9px 12px;
  border-radius:8px;
}
.login-hint2,.login-hint{
  margin-top:14px;
  color:#6b7794;
  font-size:12px;
  text-align:center;
  background:#f6f8fd;
  border:1px dashed #e3e8f2;
  padding:8px 10px;
  border-radius:8px;
}
.login-foot,.login-foot2{text-align:center;color:rgba(255,255,255,.65);font-size:11px;margin-top:18px}

/* ---------- 앱 셸 ---------- */
.app-shell,.app{display:flex;min-height:100vh}
.sidebar{
  width:var(--aps-sidebar-width);
  flex-shrink:0;
  background:var(--navy);
  color:#cdd6ea;
  display:flex;
  flex-direction:column;
  position:fixed;
  inset:0 auto 0 0;
  z-index:40;
  transition:transform .22s ease;
}
.main{flex:1;min-width:0;margin-left:var(--aps-sidebar-width);display:flex;flex-direction:column}
.sidebar-brand,.brand{
  display:flex;
  align-items:center;
  gap:11px;
  padding:20px 22px 16px;
  color:inherit;
}
.sidebar-brand.brand-link:hover{background:rgba(255,255,255,.06)}
.brand-logo,.brand .logo{
  width:38px;
  height:38px;
  border-radius:8px;
  flex-shrink:0;
  background:linear-gradient(135deg,#2f5bea,#5673ff);
  display:grid;
  place-items:center;
  color:#fff;
  font-weight:900;
  font-size:13px;
  letter-spacing:.02em;
  box-shadow:0 4px 14px rgba(47,91,234,.45);
}
.brand-copy{display:flex;flex-direction:column;min-width:0}
.sb-group{font-size:10px;letter-spacing:.18em;color:#8fa0c4;font-weight:800}
.sb-app{font-size:19px;font-weight:900;color:#fff;letter-spacing:.04em;line-height:1.08}
.sb-sub{font-size:11px;color:#8fa0c4;margin-top:2px}
.menu,.side-nav{
  flex:1;
  overflow-y:auto;
  padding:2px 12px 10px;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.16) transparent;
}
.menu::-webkit-scrollbar{width:6px}
.menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:8px}
.menu-section,.nav-label{
  padding:14px 12px 6px;
  font-size:10px;
  letter-spacing:.16em;
  color:#7184ab;
  font-weight:900;
}
.menu-item,.side-nav a{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:40px;
  padding:10px 13px;
  border-radius:8px;
  color:#b9c6e6;
  font-weight:700;
  font-size:13.5px;
  margin-bottom:2px;
  cursor:pointer;
  border-left:0;
  transition:background .15s,color .15s,box-shadow .15s;
}
.menu-item:hover,.side-nav a:hover{background:var(--navy-2);color:#fff}
.menu-item.active,.side-nav a.active{
  background:linear-gradient(90deg,var(--primary),#4a6dff);
  color:#fff;
  box-shadow:0 6px 16px rgba(47,91,234,.35);
}
.menu-item .mi-ico,.side-nav a i.nav-ic{width:20px;text-align:center;flex-shrink:0;opacity:.9;font-size:15px}
.menu-badge{
  margin-left:auto;
  min-width:20px;
  height:20px;
  border-radius:999px;
  display:inline-grid;
  place-items:center;
  background:rgba(255,255,255,.16);
  color:#fff;
  font-size:10px;
  font-weight:900;
}
.menu-group{display:flex;flex-direction:column}
.menu-group-h{user-select:none}
.menu-group-h .mg-caret{margin-left:auto;font-size:11px;opacity:.75;transition:transform .15s}
.menu-group.collapsed .mg-caret{transform:rotate(-90deg)}
.menu-group.collapsed .menu-sub{display:none}
.menu-sub,.nav-sub{
  display:flex;
  flex-direction:column;
  margin:2px 0 5px 8px;
  padding-left:8px;
  border-left:1px solid var(--navy-line);
}
.menu-item.menu-child{
  min-height:34px;
  padding:8px 12px;
  font-size:12.5px;
  color:#9fb0d4;
  box-shadow:none;
}
.menu-item.menu-child.active{background:rgba(47,91,234,.22);color:#fff;font-weight:800;box-shadow:none}
.sidebar-foot,.side-foot{
  margin:12px;
  padding:13px 14px;
  border-radius:8px;
  background:var(--navy-2);
  border:1px solid var(--navy-line);
  color:#dfe6f7;
  font-size:11.5px;
  font-weight:800;
  display:flex;
  align-items:center;
  gap:8px;
}
.pulse{
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
  background:#34d399;
  box-shadow:0 0 0 0 rgba(52,211,153,.55);
  animation:pulse 1.8s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}
  70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}
  100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}
}

/* ---------- 상단바 / 본문 ---------- */
.topbar{
  position:sticky;
  top:0;
  z-index:30;
  height:72px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:0 24px;
  display:flex;
  align-items:center;
  gap:16px;
}
.topbar-search{
  flex:0 1 390px;
  min-width:250px;
  height:42px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.search-ico{
  color:#8fa0bd;
  font-size:20px;
  line-height:1;
  transform:rotate(-12deg);
}
.topbar-search input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font-weight:700;
}
.topbar-search input::placeholder{color:#9aa9c4}
.hamburger{
  display:none;
  width:40px;
  height:40px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  font-size:18px;
}
.topbar-title{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
.page-title,.topbar h1{font-size:17px;font-weight:900;margin:0;letter-spacing:0;line-height:1.2}
.page-crumb,.topbar .crumb{color:var(--text-muted);font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-right{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;margin-left:auto}
.user-chip{
  max-width:280px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text-muted);
  font-size:12.5px;
  font-weight:700;
}
.prod-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 12px;
  border-radius:999px;
  background:var(--success-soft);
  color:var(--success);
  font-weight:900;
  font-size:12px;
  border:1px solid rgba(22,163,74,.25);
}
.context-chip,.icon-btn,.profile-chip{
  height:40px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  box-shadow:0 2px 8px rgba(20,38,80,.04);
}
.context-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 13px;
  border-radius:13px;
  font-weight:900;
  white-space:nowrap;
}
.ctx-icon{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:var(--primary-soft);
  color:var(--primary);
  font-size:12px;
}
.ctx-caret{color:var(--text-muted);font-size:12px}
.icon-btn{
  position:relative;
  width:40px;
  min-width:40px;
  padding:0;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-size:15px;
  font-weight:900;
  line-height:1;
}
.icon-btn:hover,.context-chip:hover,.profile-chip:hover{
  border-color:rgba(47,91,234,.35);
  color:var(--primary);
}
.theme-toggle[aria-pressed="true"]{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}
.notify-btn i{
  position:absolute;
  right:8px;
  top:8px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--danger);
}
.profile-chip{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:0 12px 0 7px;
  border-radius:14px;
  max-width:240px;
  min-width:0;
}
.profile-avatar{
  width:28px;
  height:28px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:var(--primary);
  color:#fff;
  font-weight:900;
  flex:0 0 auto;
}
.profile-meta{
  min-width:0;
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.profile-name{
  max-width:150px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text);
  font-size:12.5px;
  font-weight:900;
}
.profile-role{
  max-width:150px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text-muted);
  font-size:10.5px;
  font-weight:800;
}
.logout-link{height:40px;border-radius:12px;white-space:nowrap}
.theme-dark .topbar-search{box-shadow:none}
.theme-dark .context-chip,.theme-dark .icon-btn,.theme-dark .profile-chip{box-shadow:none;background:var(--surface-2)}
.content{
  padding:22px;
  width:100%;
  max-width:calc(var(--aps-content-width) + 44px);
  margin-right:auto;
  overflow-y:auto;
}

/* ---------- 카드 / 그리드 ---------- */
.grid{display:grid;gap:16px;align-items:stretch}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card,.card2{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px;
  min-width:0;
}
.card h3,.card2 .hd h6{
  margin:0 0 12px;
  font-size:14px;
  color:var(--text);
  font-weight:900;
  letter-spacing:0;
}
.card2{padding:0}
.card2 .hd{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--border)}
.card2 .bd{padding:18px}
.stat,.kpi{display:flex;flex-direction:column;gap:7px;min-height:112px}
.stat .stat-label,.kpi .lbl{font-size:12px;color:var(--text-muted);font-weight:800}
.stat .stat-value,.kpi .val{font-size:28px;font-weight:900;color:var(--navy-ink);line-height:1.05;letter-spacing:0}
.stat .stat-sub{font-size:12px;color:var(--text-muted);line-height:1.45}
.section-title,.fleet-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin:20px 0 12px;
  font-size:13px;
  font-weight:900;
  color:var(--text);
}
.fleet-head .on{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--success);font-weight:900}
.row,.vsi-inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* ---------- 첨부 디자인 기준 대시보드/모니터 전용 ---------- */
.content-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin:0 0 18px;
}
.content-head h2{
  margin:0;
  font-size:22px;
  line-height:1.2;
  font-weight:900;
  color:#0f1b33;
  letter-spacing:0;
}
.content-head p{
  margin:4px 0 0;
  color:var(--text-muted);
  font-size:12.5px;
  font-weight:700;
}
.srv-grid{margin-bottom:16px}
.srv-card{min-height:150px;padding:18px}
.srv-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.srv-hd b{font-size:13px;font-weight:900;color:#0f1b33}
.srv-hd span{font-size:12px;color:#52617e;font-weight:900}
.mini-line{width:100%;height:92px;display:block}
.mini-line .grid-lines line{stroke:#e8edf6;stroke-width:1}
.fleet-grid{margin-bottom:16px}
.fleet-card{min-height:150px;padding:18px}
.fleet-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.fleet-top b{display:block;font-size:14px;color:#0f1b33;font-weight:900}
.fleet-top small{display:flex;align-items:center;gap:6px;margin-top:3px;color:var(--success);font-size:11.5px;font-weight:900}
.fleet-top small .dot-s{background:currentColor}
.icon-tile{
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  flex-shrink:0;
  font-size:11px;
  font-weight:900;
  color:var(--primary);
  background:var(--primary-soft);
}
.icon-tile.ok{color:var(--success);background:var(--success-soft)}
.icon-tile.warn{color:var(--warning);background:var(--warning-soft)}
.icon-tile.bad{color:var(--danger);background:var(--danger-soft)}
.fl-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px 16px;
  border-top:1px solid var(--border);
  padding-top:10px;
}
.fl-grid span{color:var(--text-muted);font-size:11.5px;font-weight:800}
.fl-grid b{text-align:right;color:#0f1b33;font-size:12.5px;font-weight:900;min-width:0;overflow:hidden;text-overflow:ellipsis}
.fl-grid span:nth-last-child(2){grid-column:1}
.fl-grid span:nth-last-child(2)+b{grid-column:2}
.table-card{padding:0;margin-top:16px;overflow:hidden}
.table-card h3{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:18px 20px;
  border-bottom:1px solid var(--border);
}
.table-card h3 span{color:var(--text-muted);font-size:11.5px;font-weight:700}
.metric-grid{margin-bottom:16px}
.metric-card{position:relative;min-height:118px;padding-left:54px}
.metric-card .metric-ic{
  position:absolute;
  left:18px;
  top:20px;
  width:28px;
  height:28px;
  border-radius:9px;
  background:var(--primary-soft);
}
.metric-card.green .metric-ic{background:var(--success-soft)}
.metric-card.orange .metric-ic{background:var(--warning-soft)}
.metric-card.red .metric-ic{background:var(--danger-soft)}
.response-card{padding:0;margin-bottom:16px}
.response-card h3{padding:18px 20px;margin:0;border-bottom:1px solid var(--border)}
.response-card h3 span{display:block;margin-top:2px;color:var(--text-muted);font-size:11.5px}
.svc-bars{
  height:330px;
  padding:22px 28px 30px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(46px,1fr));
  gap:22px;
  align-items:end;
  background:linear-gradient(#fff,#fff),repeating-linear-gradient(to top,transparent 0,transparent 53px,#edf1f7 54px);
}
.svc-bar{height:260px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:10px}
.svc-bar span{width:100%;max-width:72px;border-radius:8px 8px 0 0;background:#355eea;display:block;min-height:4px}
.svc-bar span.warn{background:#e08a0b}
.svc-bar b{font-size:11px;color:var(--text-muted);font-weight:800;white-space:nowrap}
.engine-grid{max-width:1180px}
.engine-card{min-height:190px;padding:20px}
.engine-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}
.engine-head>div{display:grid;grid-template-columns:34px 1fr;gap:0 12px;align-items:center}
.engine-head .icon-tile{grid-row:1 / span 2}
.engine-head b{font-size:15px;font-weight:900;color:#0f1b33}
.engine-head small{display:block;color:var(--text-muted);font-size:11.5px;font-weight:800;margin-top:2px}
.engine-meters{display:grid;gap:11px}
.progress-row{display:grid;grid-template-columns:72px 1fr 58px;gap:10px;align-items:center}
.progress-row span{font-size:12px;font-weight:900;color:#0f1b33}
.progress-row b{text-align:right;font-size:12px;color:var(--text-muted);font-weight:900}
.progress{height:8px;background:#eef2f8;border-radius:99px;overflow:hidden}
.progress span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2f5bea,#7b4dff)}
.progress span.violet{background:#7b4dff}
.engine-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.engine-tags span{
  padding:5px 9px;
  border-radius:999px;
  background:var(--primary-soft);
  color:var(--primary);
  font-size:11px;
  font-weight:900;
}
.engine-tags span:nth-child(2){background:var(--danger-soft);color:var(--danger)}
.engine-tags span:nth-child(3){background:var(--violet-soft);color:var(--violet)}
.engine-note{margin-top:14px!important;background:#eef3ff!important;border-color:#cad7ff!important;color:#3154c6!important}
.theme-dark .engine-head b,.theme-dark .progress-row span{color:var(--text)}
.theme-dark .progress{background:#22304b}
.theme-dark .engine-note{background:#17254b!important;border-color:#2b4380!important;color:#9bb6ff!important}

/* ---------- 테이블 ---------- */
.table-wrap{overflow-x:auto;background:var(--surface);border-radius:8px}
.tbl,table.tbl{width:100%;border-collapse:separate;border-spacing:0}
.tbl thead th,table.tbl th{
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-muted);
  font-weight:900;
  padding:11px 14px;
  text-align:left;
  border-bottom:1px solid var(--border);
  background:var(--surface-2);
  white-space:nowrap;
}
.tbl tbody td,table.tbl td{
  padding:13px 14px;
  border-bottom:1px solid var(--border);
  font-size:13px;
  vertical-align:middle;
  white-space:nowrap;
}
.tbl tbody tr:last-child td,table.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover,table.tbl tr:hover td{background:var(--surface-2)}
.tbl .strong{font-weight:900}

/* ---------- 상태 배지 ---------- */
.badge,.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:24px;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:11px;
  font-weight:900;
  letter-spacing:.02em;
  line-height:1;
  white-space:nowrap;
}
.badge::before,.chip::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:currentColor;
}
.b-up,.b-done,.b-success,.chip.g{color:#047857;background:#ecfdf5;border-color:#a7f3d0}
.b-degraded,.b-warning,.b-warn,.b-medium,.chip.w{color:#b45309;background:#fffbeb;border-color:#fde68a}
.b-down,.b-failed,.b-critical,.b-error,.b-high,.chip.r{color:#b91c1c;background:#fff1f2;border-color:#fecaca}
.b-unknown,.b-queued,.b-pending{color:#475569;background:#f8fafc;border-color:#cbd5e1}
.b-processing,.b-running,.b-info,.chip.b{color:var(--primary);background:var(--primary-soft);border-color:rgba(47,91,234,.24)}
.b-partial,.chip.v,.b-low{color:var(--violet);background:var(--violet-soft);border-color:rgba(123,77,255,.24)}
.dot-s{width:8px;height:8px;border-radius:50%;display:inline-block}

/* ---------- 폼 / 툴바 / 알림 ---------- */
.toolbar,.toolbar-r{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.toolbar input,.toolbar select,.toolbar-r input,.toolbar-r select{
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text);
  font-size:13px;
}
.toolbar-r .spacer{flex:1}
.pager{display:flex;gap:6px;justify-content:flex-end;align-items:center;margin-top:14px;font-size:13px;color:var(--text-muted)}
.loading{padding:42px;text-align:center;color:var(--text-muted)}
.empty{
  padding:34px;
  text-align:center;
  color:var(--text-muted);
  border:1px dashed var(--border);
  border-radius:8px;
  background:var(--surface);
}
.alert,.banner{
  padding:11px 14px;
  border-radius:8px;
  font-size:13px;
  margin-bottom:12px;
  font-weight:700;
}
.alert-warn,.banner-warn{background:#fffbeb;border:1px solid #fde68a;color:#9a6212}
.alert-crit,.banner-crit{background:#fff1f2;border:1px solid #fecaca;color:#a32420}
.banner-ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#127a55}

/* ---------- 모달 ---------- */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,27,51,.48);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:60;
  padding:18px;
}
.modal{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:0 18px 50px rgba(10,18,38,.32);
  width:100%;
  max-width:460px;
  padding:22px;
}
.modal h3{margin:0 0 16px;color:var(--text);font-size:16px}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}

/* ---------- 경량 차트 / VSI 보조 ---------- */
.bars{display:flex;align-items:flex-end;gap:3px;height:120px;padding-top:6px}
.bars .bar{flex:1;background:linear-gradient(180deg,var(--primary),#7b4dff);border-radius:4px 4px 0 0;min-height:2px;opacity:.86}
.bars .bar:hover{opacity:1}
.bar-legend{font-size:11px;color:var(--text-muted);margin-top:6px;display:flex;justify-content:space-between}
.vsi-keybox{
  display:flex;
  gap:8px;
  align-items:center;
  background:#0f172a;
  border:1px solid #2a3550;
  border-radius:8px;
  padding:10px 12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:#cfe0ff;
  word-break:break-all;
}
.kv{display:grid;grid-template-columns:160px 1fr;gap:8px 14px;font-size:14px}
.kv dt{color:var(--text-muted)}
.kv dd{margin:0;word-break:break-all}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px}
pre.snip{background:#0f1b33;color:#cfe0ff;border-radius:8px;padding:12px;font-size:12px;overflow:auto;margin:6px 0 0;max-height:240px;white-space:pre-wrap;word-break:break-word}
.diag-row{padding:12px 0;border-bottom:1px solid var(--border)}
.diag-row:last-child{border-bottom:0}
.diag-row .r1{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.diag-row .nm{font-weight:900;color:var(--navy-2)}
.diag-row .tg{font-family:ui-monospace,monospace;font-size:12px;color:var(--text-muted)}
.httpcode{font-family:ui-monospace,monospace;font-size:12px;background:#eef0f5;border-radius:6px;padding:2px 8px;color:#33456e}
.admin-foot{text-align:center;color:var(--text-muted);font-size:11px;padding:18px 0}
.foot-note{text-align:center;color:var(--text-muted);font-size:11.5px;margin:26px 0 6px}

/* ---------- 반응형 ---------- */
@media (max-width:1200px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topbar-search{flex-basis:320px}
  .profile-role{display:none}
}
@media (max-width:900px){
  .sidebar{transform:translateX(-100%)}
  .app-shell.nav-open .sidebar{transform:translateX(0)}
  .main{margin-left:0}
  .hamburger{display:grid;place-items:center}
  .content{max-width:none}
  .topbar-search{flex:1 1 260px;min-width:180px}
  .topbar-right{gap:7px}
  .prod-badge{display:none}
  .context-chip span:not(.ctx-icon){display:none}
  .context-chip{width:40px;padding:0;justify-content:center}
}
@media (max-width:680px){
  .topbar{height:auto;min-height:64px;align-items:center;padding:12px 14px;flex-wrap:wrap}
  .topbar-search{order:3;flex:1 1 100%;min-width:0}
  .topbar-right{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
  .user-chip{max-width:48px;padding-right:7px}
  .profile-meta{display:none}
  .logout-link{display:none}
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
  .content{padding:16px}
  .card{padding:16px}
  .kv{grid-template-columns:110px 1fr}
}