/* ===== Theme variables ===== */
:root{
  --bg:#f9fafb; --fg:#0f172a; --muted:#6b7280; --border:#e5e7eb; --card:#ffffff; --subtle:#f3f4f6;
  --primary:#2563eb; --warn:#f59e0b; --danger:#ef4444;
  --btn-bg:var(--subtle); --btn-text:#111827; --btn-border:var(--border);
  --th-bg:#f9fafb; --th-fg:#374151;
  --ok-bg:#ecfdf5; --ok-fg:#047857; --ok-br:#a7f3d0;
  --w-bg:#fff7ed; --w-fg:#9a3412; --w-br:#fed7aa;
  --d-bg:#fef2f2; --d-fg:#b91c1c; --d-br:#fecaca;
}

/* Dark theme overrides */
:is(html,body)[data-theme="dark"]{
  --bg:#0b1220; --fg:#e5e7eb; --muted:#9ca3af; --border:#1f2937; --card:#0f172a; --subtle:#111827;
  --primary:#60a5fa; --warn:#fbbf24; --danger:#f87171;
  --btn-bg:#111827; --btn-text:#e5e7eb; --btn-border:#1f2937;
  --th-bg:#111827; --th-fg:#e5e7eb;
  --ok-bg:rgba(16,185,129,.12);  --ok-fg:#6ee7b7; --ok-br:rgba(16,185,129,.35);
  --w-bg:rgba(251,191,36,.12);   --w-fg:#fcd34d;  --w-br:rgba(251,191,36,.35);
  --d-bg:rgba(248,113,113,.12);  --d-fg:#fca5a5;  --d-br:rgba(248,113,113,.35);
}

/* ===== Layout ===== */
html,body{
  margin:0;padding:0;height:100%;width:100%;overflow:hidden;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial;
  background:var(--bg);color:var(--fg);
}
*{box-sizing:border-box}

/* Header */
.app-header{
  position:fixed;top:0;left:0;right:0;height:60px;
  background:var(--card);border-bottom:1px solid var(--border);z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 14px; backdrop-filter:saturate(180%) blur(8px);
}
.logo{height:38px}
.header-right{display:flex;align-items:center;gap:6px}

.btn{
  display:inline-flex;align-items:center;gap:5px;border-radius:8px;height:30px;padding:0 10px;
  font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-text);
  transition:opacity .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn-primary{background:var(--primary);color:#fff;border:none}
.btn-ghost{background:transparent;color:var(--fg);border-color:transparent}
.btn-light{background:var(--subtle);color:var(--fg)}
.btn:hover{opacity:.92}
.material-symbols-outlined{font-size:18px;line-height:1}

/* Page */
.page{
  position:absolute;top:60px;bottom:0;left:0;right:0;
  display:flex;flex-direction:column;overflow:hidden;padding:8px 12px;
}

/* KPI */
.kpi-grid{
  flex:0 0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:8px;margin-bottom:8px;
}
.kpi-card{
  background:var(--card);border:1px solid var(--border);border-radius:10px;padding:10px;text-align:center
}
.kpi-icon{color:var(--primary)}
.kpi-label{color:var(--muted);font-size:12px}
.kpi-value{font-size:18px;font-weight:700;color:var(--fg)}

/* Panel */
.panel{
  flex:1 1 auto;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);
  border-radius:10px;overflow:hidden;
}
.panel-head{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--border);
}
.search-wrap{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.input{
  height:30px;padding:0 8px;border-radius:8px;border:1px solid var(--border);width:180px;font-size:12px;
  background:var(--bg);color:var(--fg)
}

/* ===== Table (균등 간격 핵심) ===== */
.table-wrap{flex:1 1 auto;overflow:auto}
.table{
  width:100%;
  border-collapse:separate;border-spacing:0;
  table-layout:auto; /* colgroup 폭을 사용 */
}

/* 헤더/셀 간격·타이포 통일 */
.table th,.table td{
  padding:8px 10px; /* 동일 패딩 */
  border-bottom:1px solid var(--border);
  text-align:center; vertical-align:middle;
  font-size:12.5px; line-height:1.35; color:var(--fg);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.table th{background:var(--th-bg);color:var(--th-fg);font-weight:700}
.t-left{text-align:left}

/* MAC/날짜는 가독성용 타이포 */
.table td:nth-child(4){
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
}

/* 상태 pill */
.status{padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:700;border:1px solid transparent}
.status.success{background:var(--ok-bg);color:var(--ok-fg);border-color:var(--ok-br)}
.status.warn{background:var(--w-bg);color:var(--w-fg);border-color:var(--w-br)}
.status.danger{background:var(--d-bg);color:var(--d-fg);border-color:var(--d-br)}

/* 관리 버튼 그룹 */
.table thead th.manage,.table tbody td.manage{min-width:260px}
.btn-group{display:inline-flex;align-items:center;gap:8px;justify-content:center;flex-wrap:nowrap}
.btn-pill{
  border-radius:999px;padding:0 10px;height:28px;font-size:12px;font-weight:700;
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-text);
}
.btn-pill:hover{background:color-mix(in oklab, var(--btn-bg), #fff 6%)}
.btn-history{background:linear-gradient(90deg,#6366f1,#22d3ee);color:#fff;border:none}
.btn-history:hover{opacity:.92}

/* 좁은 화면: 버튼 텍스트 숨김 */
@media (max-width: 1366px){
  .btn-pill .btn-text{display:none}
}

/* 기타 */
.p_hidden{display:none}

/* 다크 스크롤바 */
:is(html,body)[data-theme="dark"] .table-wrap{scrollbar-color:#374151 transparent;}