/* ─── Reset ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── KWCAG 2.1 웹접근성 포커스 표시 (GS인증 필수) ─ */
:focus-visible {
  outline: 2px solid #00A0C8 !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}
/* 마우스 클릭 시 포커스 링 숨김 (UX) */
:focus:not(:focus-visible) { outline: none; }

/* 스킵 네비게이션 (키보드 접근성) */
.skip-nav {
  position: absolute; top: -60px; left: 8px; z-index: 99999;
  background: #00A0C8; color: #fff; padding: 8px 16px;
  border-radius: 0 0 8px 8px; font-size: 14px; font-weight: 600;
  transition: top .2s; text-decoration: none;
}
.skip-nav:focus { top: 0; }

/* ─── Design Tokens (Variant Navy-Cyan Dark) ────── */
:root {
  /* backgrounds — Variant 딥네이비 계열 */
  --main-bg:       #001020;
  --sidebar-bg:    #001530;
  --card-bg:       #001e3c;
  --card-inner:    #001020;
  --input-bg:      #001530;

  /* borders & shadows — 시안 계열 */
  --border:        rgba(0,160,200,.15);
  --border-strong: rgba(0,160,200,.30);
  --shadow-sm:     0 2px 8px rgba(0,10,30,.4);
  --shadow-md:     0 4px 20px rgba(0,10,30,.45), 0 1px 4px rgba(0,160,200,.08);
  --shadow-lg:     0 8px 40px rgba(0,10,30,.5),  0 2px 8px rgba(0,160,200,.12);

  /* text — KWCAG 2.1 AA 색상 대비 4.5:1 이상 보장 */
  --text-bright:   #e8f4fd;  /* 대비 기준 유지 */
  --text-primary:  #b8d4ea;
  --text-muted:    #7ba7c4;

  /* brand colors — Variant 팔레트 */
  --accent:        #00A0C8;   /* 시안 메인 */
  --accent-dark:   #005A8C;   /* 미드블루 */
  --brand-navy:    #003366;   /* 딥네이비 */
  --green:         #34d399;
  --yellow:        #fbbf24;
  --red:           #f87171;
  --orange:        #fb923c;
  --purple:        #a78bfa;
  --cyan:          #00A0C8;

  /* sidebar active — 시안 강조 */
  --sidebar-active-bg:  rgba(0,160,200,.18);
  --sidebar-hover-bg:   rgba(0,160,200,.08);

  /* typography — 나눔고딕 통일 */
  --font: "NanumGothic", "Nanum Gothic", "NanumBarunGothic", "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, sans-serif;

  /* radii */
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 18px;
}

/* ─── Base ──────────────────────────────────────── */
html, body {
  height: 100%; font-family: var(--font);
  background: var(--main-bg); color: var(--text-primary);
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ─── Layout ────────────────────────────────────── */
#app { display: flex; height: 100vh; overflow: hidden; }

/* ══════════════════════════════════════════════════
   SIDEBAR  (Nifty style)
══════════════════════════════════════════════════ */
#sidebar {
  width: 248px; min-width: 248px; flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  box-shadow: 2px 0 20px rgba(0,0,0,.25);
  position: relative; z-index: 10;
}

/* Logo */
#sidebar-logo {
  padding: 20px 18px 16px;
  display: flex; align-items: center; gap: 12px;
}
.logo-icon {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, #005A8C, #00A0C8);
  color: #fff; font-size: 20px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,160,200,.35);
}
.logo-title { font-size: 16px; font-weight: 800; color: var(--text-bright); letter-spacing: -.01em; }
.logo-sub   { font-size: 10px; color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; }

/* Nav */
#sidebar-nav { flex: 1; padding: 8px 12px; overflow-y: auto; }
.nav-section-label {
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .08em;
  padding: 12px 8px 4px;
}
.nav-item {
  padding: 9px 12px; border-radius: var(--radius);
  cursor: pointer; color: var(--text-muted);
  display: flex; align-items: center; gap: 10px;
  transition: background .15s, color .15s;
  margin-bottom: 2px; font-size: 13px; font-weight: 500;
}
.nav-item:hover  { background: var(--sidebar-hover-bg); color: var(--text-primary); }
.nav-item.active {
  background: var(--sidebar-active-bg);
  color: var(--accent); font-weight: 700;
  border-left: 3px solid var(--accent);
  padding-left: 9px;
}
.nav-icon {
  font-size: 16px; width: 20px; text-align: center;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; line-height: 1;
}
.nav-icon svg {
  display: block;
  color: inherit;
  stroke: currentColor;
}

/* Footer status */
#sidebar-footer {
  padding: 8px 18px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-muted);
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-dot.online { background: var(--green); box-shadow: 0 0 6px rgba(52,211,153,.6); }

/* User info */
#sidebar-user {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
#sidebar-user-info { flex: 1; min-width: 0; }
#user-role-badge {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px; margin-top: 2px;
  letter-spacing: .02em;
}
.btn-logout {
  background: none; border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer;
  padding: 5px 8px; border-radius: var(--radius);
  font-size: 14px; flex-shrink: 0;
  transition: color .15s, border-color .15s;
}
.btn-logout:hover { color: var(--red); border-color: var(--red); }

/* SSE 연결 상태 */
#sse-status {
  padding: 6px 18px;
  display: flex; align-items: center; gap: 6px;
  border-top: 1px solid var(--border);
}
.sse-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  transition: background .4s;
}
.sse-dot.green  { background: var(--green);  box-shadow: 0 0 6px rgba(52,211,153,.7); animation: pulse-green 2s infinite; }
.sse-dot.red    { background: var(--red);    box-shadow: 0 0 4px rgba(248,113,113,.5); }
.sse-dot.grey   { background: var(--text-muted); }
@keyframes pulse-green {
  0%,100% { opacity: 1; }
  50%      { opacity: .45; }
}

/* ══════════════════════════════════════════════════
   MAIN / TOPBAR
══════════════════════════════════════════════════ */
#main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

#topbar {
  padding: 14px 28px;
  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  box-shadow: var(--shadow-sm);
}
#page-title { font-size: 18px; font-weight: 800; color: var(--text-bright); letter-spacing: -.02em; }

#topbar-actions { display: flex; align-items: center; gap: 10px; }

/* 갱신 인디케이터 */
.refresh-indicator {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--green);
  background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.25);
  border-radius: 20px; padding: 3px 10px;
  animation: fade-in .3s ease;
}
.refresh-indicator.hidden { display: none; }
.refresh-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
@keyframes fade-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }

/* ─── Views ─────────────────────────────────────── */
.view { display: none; flex: 1; overflow-y: auto; padding: 24px 28px; }
.view.active { display: block; }

/* ══════════════════════════════════════════════════
   BUTTONS  (Nifty style)
══════════════════════════════════════════════════ */
.btn {
  padding: 8px 16px; border-radius: var(--radius);
  font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; transition: all .18s;
  letter-spacing: .01em;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: none; }
.btn-primary {
  background: var(--accent);
  color: #fff; border-color: transparent;
  box-shadow: 0 2px 10px rgba(0,160,200,.3);
  border-radius: var(--radius);
}
.btn-primary:hover { background: var(--accent-dark); box-shadow: 0 4px 18px rgba(0,160,200,.45); }
.btn-secondary { background: rgba(255,255,255,.06); border-color: var(--border); color: var(--text-primary); }
.btn-secondary:hover { background: rgba(255,255,255,.1); }
.btn-approve { background: rgba(52,211,153,.15); color: var(--green); border-color: rgba(52,211,153,.3); }
.btn-approve:hover { background: rgba(52,211,153,.25); }
.btn-reject  { background: rgba(248,113,113,.15); color: var(--red); border-color: rgba(248,113,113,.3); }
.btn-reject:hover  { background: rgba(248,113,113,.25); }

/* ══════════════════════════════════════════════════
   CARDS  (no border, shadow)
══════════════════════════════════════════════════ */
.card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  border: 1px solid var(--border);
}
.card-header {
  padding: 14px 18px; font-size: 13px; font-weight: 700;
  color: var(--text-bright); border-bottom: 1px solid var(--border);
  letter-spacing: .01em;
}
.card-body { padding: 8px 0; }

/* ══════════════════════════════════════════════════
   STAT CARDS  (Nifty icon-style)
══════════════════════════════════════════════════ */
.stats-row { display: flex; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.stat-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 18px 20px;
  min-width: 140px; flex: 1;
  border: 1px solid var(--border);
  position: relative; overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.stat-card::after {
  content: ""; position: absolute;
  top: -30px; right: -20px;
  width: 90px; height: 90px; border-radius: 50%;
  background: currentColor; opacity: .04;
}
.stat-value { font-size: 30px; font-weight: 800; color: var(--text-bright); line-height: 1; margin-bottom: 6px; }
.stat-label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.stat-sub   { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.stat-icon  {
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; margin-bottom: 12px;
}

/* Color variants */
.stat-card.accent  { --c: var(--accent);  }
.stat-card.green   { --c: var(--green);   }
.stat-card.yellow  { --c: var(--yellow);  }
.stat-card.red     { --c: var(--red);     }
.stat-card.purple  { --c: var(--purple);  }
.stat-card.orange  { --c: var(--orange);  }
.stat-card.cyan    { --c: var(--cyan);    }
.stat-card.accent  .stat-value { color: var(--accent);  }
.stat-card.green   .stat-value { color: var(--green);   }
.stat-card.yellow  .stat-value { color: var(--yellow);  }
.stat-card.red     .stat-value { color: var(--red);     }
.stat-card.purple  .stat-value { color: var(--purple);  }
.stat-card.orange  .stat-value { color: var(--orange);  }
.stat-card.cyan    .stat-value { color: var(--cyan);    }
.stat-card.accent  .stat-icon  { background: rgba(0,160,200,.15); color: var(--accent); }
.stat-card.green   .stat-icon  { background: rgba(52,211,153,.15);  color: var(--green); }
.stat-card.yellow  .stat-icon  { background: rgba(251,191,36,.15);  color: var(--yellow); }
.stat-card.red     .stat-icon  { background: rgba(248,113,113,.15); color: var(--red); }
.stat-card.purple  .stat-icon  { background: rgba(167,139,250,.15); color: var(--purple); }
.stat-card.orange  .stat-icon  { background: rgba(251,146,60,.15);  color: var(--orange); }

/* ─── Dashboard grid (legacy) ───────────────────── */
.dashboard-grid { display: grid; grid-template-columns: 1fr 340px; gap: 18px; }
@media (max-width: 960px) { .dashboard-grid { grid-template-columns: 1fr; } }

/* ─── Nifty 사이드바 계층 메뉴 ──────────────────── */
.nav-group-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; cursor: pointer;
  color: var(--text-muted); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
  border-radius: 6px; margin: 1px 6px;
  transition: color .15s, background .15s;
}
.nav-group-header:hover { color: var(--text-bright); background: var(--surface-2); }
.nav-group-header .nav-arrow {
  margin-left: auto; font-size: 10px; transition: transform .2s;
  color: var(--text-muted);
}
.nav-group-header[aria-expanded="true"] .nav-arrow { transform: rotate(180deg); }

.nav-group-body {
  display: none; padding: 2px 6px 4px 30px;
}
.nav-group-body.open { display: block; }

.nav-sub-item {
  display: block; padding: 7px 12px; font-size: 13px;
  color: var(--text-muted); text-decoration: none;
  border-radius: 6px; cursor: pointer; transition: all .15s;
}
.nav-sub-item:hover { background: var(--surface-2); color: var(--text-bright); }
.nav-sub-item.active { background: rgba(129,140,248,.15); color: var(--accent); font-weight: 600; }

/* Topbar */
#topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px; height: 54px;
  background: var(--topbar-bg, var(--surface));
  border-bottom: 1px solid var(--border);
}
#topbar-search input {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 6px 12px; font-size: 13px;
  color: var(--text-bright); width: 260px; outline: none;
}
#topbar-search input:focus { border-color: var(--accent); }
#topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.topbar-icon {
  padding: 6px 10px; border-radius: 8px; cursor: pointer;
  color: var(--text-muted); font-size: 16px; position: relative;
  background: none; border: none;
  transition: background .15s, color .15s;
}
.topbar-icon:hover { background: var(--surface-2); color: var(--text-bright); }
.topbar-icon .badge {
  position: absolute; top: 2px; right: 2px;
  background: #f87171; color: #fff; font-size: 9px;
  border-radius: 50%; width: 14px; height: 14px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}

/* Page tabs (서브페이지 탭) */
.page-tabs {
  display: flex; gap: 0; border-bottom: 2px solid var(--border);
  margin-bottom: 18px; overflow-x: auto; scrollbar-width: none;
}
.page-tabs::-webkit-scrollbar { display: none; }
.page-tab {
  padding: 9px 18px; background: none; border: none;
  color: var(--text-muted); font-size: 13px; font-weight: 600;
  cursor: pointer; border-bottom: 3px solid transparent;
  margin-bottom: -2px; white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.page-tab:hover { color: var(--accent); }
.page-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ─── Dashboard Tabs ─────────────────────────────── */
.dash-tab-nav {
  display: flex; gap: 2px; margin-bottom: 16px;
  border-bottom: 2px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.dash-tab-nav::-webkit-scrollbar { display: none; }
.dash-tab {
  padding: 9px 18px; font-size: 13px; font-weight: 600;
  color: var(--text-muted); background: none; border: none;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  cursor: pointer; white-space: nowrap;
  transition: color .18s, border-color .18s;
}
.dash-tab:hover { color: var(--accent); }
.dash-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.dash-tab-panel { display: none; }
.dash-tab-panel.active { display: block; }

/* ─── Chart grid ─────────────────────────────────── */
.chart-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 960px) { .chart-grid-2 { grid-template-columns: 1fr; } }

.chart-card { min-height: 280px; }
.chart-body { padding: 14px 16px; display: flex; align-items: center; justify-content: center; }
.chart-body canvas { max-height: 240px; width: 100% !important; }

/* ─── Server health tile ─────────────────────────── */
.server-tile {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 10px 12px; border-radius: 8px;
  font-size: 11px; font-weight: 600; cursor: default;
  min-width: 80px; text-align: center;
}
.server-tile.ok      { background: rgba(52,211,153,.18); color: #34d399; }
.server-tile.warn    { background: rgba(251,191,36,.18);  color: #fbbf24; }
.server-tile.critical{ background: rgba(239,68,68,.18);   color: #f87171; }
.server-tile.unknown { background: rgba(148,163,184,.12); color: #94a3b8; }
.server-tile-name { font-size: 10px; color: var(--text-muted); max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Recent SR rows */
.recent-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .12s;
}
.recent-row:last-child { border-bottom: none; }
.recent-row:hover { background: rgba(255,255,255,.03); }
.recent-sr-id { font-size: 11px; color: var(--text-muted); font-family: monospace; min-width: 148px; }
.recent-title { flex: 1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-time  { font-size: 11px; color: var(--text-muted); }

/* Status bar chart */
.status-bar-list { padding: 14px 18px; }
.status-bar-item { margin-bottom: 12px; }
.status-bar-label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
.status-bar-track { height: 7px; background: rgba(255,255,255,.06); border-radius: 4px; overflow: hidden; }
.status-bar-fill  { height: 100%; border-radius: 4px; transition: width .5s ease; }

/* ══════════════════════════════════════════════════
   BADGES
══════════════════════════════════════════════════ */
.badge {
  display: inline-block; padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 700; white-space: nowrap; letter-spacing: .02em;
}
.badge-RECEIVED              { background: rgba(100,116,139,.2);  color: #94a3b8; }
.badge-PARSED                { background: rgba(34,211,238,.15);  color: #22d3ee; }
.badge-PENDING_APPROVAL      { background: rgba(251,191,36,.15);  color: #fbbf24; }
.badge-APPROVED              { background: rgba(52,211,153,.15);  color: #34d399; }
.badge-IN_PROGRESS           { background: rgba(129,140,248,.15); color: #818cf8; }
.badge-PENDING_PM_VALIDATION { background: rgba(167,139,250,.18); color: #a78bfa; }
.badge-COMPLETED             { background: rgba(52,211,153,.2);   color: #34d399; }
.badge-FAILED_ROLLBACK       { background: rgba(248,113,113,.2);  color: #f87171; }
.badge-REJECTED              { background: rgba(248,113,113,.15); color: #fca5a5; }

.badge-priority-CRITICAL { background: rgba(248,113,113,.2);  color: #f87171; }
.badge-priority-HIGH     { background: rgba(251,146,60,.18);   color: #fb923c; }
.badge-priority-MEDIUM   { background: rgba(251,191,36,.15);  color: #fbbf24; }
.badge-priority-LOW      { background: rgba(100,116,139,.15); color: #94a3b8; }

.badge-type-DEPLOY  { background: rgba(129,140,248,.15); color: #818cf8; }
.badge-type-RESTART { background: rgba(248,113,113,.15); color: #f87171; }
.badge-type-LOG     { background: rgba(167,139,250,.15); color: #a78bfa; }
.badge-type-INQUIRY { background: rgba(34,211,238,.12);  color: #22d3ee; }
.badge-type-OTHER   { background: rgba(100,116,139,.12); color: #94a3b8; }

/* ══════════════════════════════════════════════════
   KANBAN
══════════════════════════════════════════════════ */
#kanban-board {
  display: flex; gap: 14px; overflow-x: auto;
  padding-bottom: 16px; min-height: calc(100vh - 110px);
}
#kanban-board::-webkit-scrollbar { height: 5px; }
#kanban-board::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.kanban-col {
  min-width: 244px; flex-shrink: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 110px);
}
.kanban-col-header {
  padding: 11px 14px; font-size: 12px; font-weight: 700;
  color: var(--text-muted); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  text-transform: uppercase; letter-spacing: .04em;
}
.kanban-col-header .col-count {
  background: rgba(255,255,255,.08); border-radius: 10px;
  padding: 2px 7px; font-size: 11px; font-weight: 700;
}
.kanban-cards { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }

.kanban-card {
  background: var(--card-inner);
  border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px;
  cursor: pointer; transition: border-color .15s, transform .15s;
}
.kanban-card:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.kanban-card-id    { font-size: 10px; color: var(--text-muted); font-family: monospace; margin-bottom: 5px; }
.kanban-card-title { font-size: 13px; color: var(--text-bright); line-height: 1.45; margin-bottom: 8px; font-weight: 500; }
.kanban-card-meta  { display: flex; gap: 4px; flex-wrap: wrap; }

/* ══════════════════════════════════════════════════
   SR TABLE
══════════════════════════════════════════════════ */
.list-toolbar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.search-box {
  flex: 1; min-width: 200px;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 14px;
  color: var(--text-primary); font-size: 13px; outline: none;
  transition: border-color .15s;
}
.search-box:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.filter-select {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 12px;
  color: var(--text-primary); font-size: 13px; outline: none; cursor: pointer;
}
.filter-select:focus { border-color: var(--accent); }

.sr-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.sr-table th {
  text-align: left; padding: 11px 14px; font-size: 11px;
  font-weight: 700; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .06em; border-bottom: 1px solid var(--border);
  background: var(--card-bg);
}
.sr-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
.sr-table tbody tr { cursor: pointer; transition: background .12s; }
.sr-table tbody tr:hover { background: rgba(255,255,255,.03); }

/* ══════════════════════════════════════════════════
   AUDIT
══════════════════════════════════════════════════ */
.audit-header-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.audit-title { font-size: 15px; font-weight: 700; color: var(--text-bright); flex: 1; }
#verify-result { font-size: 13px; font-weight: 700; }
#verify-result.ok   { color: var(--green); }
#verify-result.fail { color: var(--red);   }
.hash-code { font-family: "Consolas", monospace; font-size: 11px; color: var(--text-muted); }

/* ══════════════════════════════════════════════════
   CMDB
══════════════════════════════════════════════════ */
.cmdb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.cmdb-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden;
}
.cmdb-card-header {
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  font-weight: 700; color: var(--text-bright); display: flex; justify-content: space-between; align-items: center;
}
.cmdb-servers { padding: 8px 0; }
.cmdb-server-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 18px; font-size: 13px; transition: background .12s;
}
.cmdb-server-row:hover { background: rgba(255,255,255,.03); }
.server-role-badge {
  padding: 3px 7px; border-radius: 6px; font-size: 10px; font-weight: 700;
}
.role-WEB { background: rgba(129,140,248,.18); color: #818cf8; }
.role-WAS { background: rgba(52,211,153,.18);  color: #34d399; }
.role-DB  { background: rgba(167,139,250,.18); color: #a78bfa; }
.server-active   { color: var(--green); font-size: 12px; margin-left: auto; }
.server-inactive { color: var(--text-muted); font-size: 12px; margin-left: auto; }

/* ══════════════════════════════════════════════════
   MODAL
══════════════════════════════════════════════════ */
#modal-overlay, #new-sr-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.65);
  z-index: 100; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px);
}
#modal-overlay.hidden, #new-sr-overlay.hidden { display: none; }

#modal {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: 680px; max-width: 96vw; max-height: 86vh;
  overflow-y: auto; padding: 28px; position: relative;
}
#new-sr-modal {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: 520px; max-width: 96vw; padding: 28px; position: relative;
}
#new-sr-modal h2 { font-size: 17px; font-weight: 800; margin-bottom: 18px; color: var(--text-bright); }

.modal-close {
  position: absolute; top: 16px; right: 16px;
  background: rgba(255,255,255,.06); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 18px; cursor: pointer;
  line-height: 1; border-radius: var(--radius); padding: 4px 8px;
  transition: color .15s, background .15s;
}
.modal-close:hover { color: var(--text-bright); background: rgba(255,255,255,.12); }

.modal-title { font-size: 19px; font-weight: 800; color: var(--text-bright); margin-bottom: 12px; line-height: 1.3; }
.modal-meta  { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.modal-section { margin-bottom: 18px; }
.modal-section-title {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px;
}
.modal-desc { font-size: 13px; color: var(--text-primary); line-height: 1.65; }
.modal-actions { display: flex; gap: 8px; margin-top: 18px; }

/* Timeline */
.timeline { border-left: 2px solid var(--border); padding-left: 18px; }
.timeline-item { position: relative; margin-bottom: 14px; }
.timeline-item::before {
  content: ""; position: absolute; left: -22px; top: 5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); border: 2px solid var(--card-bg);
}
.timeline-item.done::before   { background: var(--green); }
.timeline-item.active::before { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.timeline-action { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.timeline-detail { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

/* Form */
label { display: block; margin-bottom: 12px; font-size: 12px; color: var(--text-muted); font-weight: 600; letter-spacing: .02em; }
label input, label select, label textarea {
  display: block; width: 100%; margin-top: 5px;
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 9px 12px;
  color: var(--text-primary); font-size: 13px; outline: none;
  font-family: var(--font); transition: border-color .15s;
}
label input:focus, label select:focus, label textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ══════════════════════════════════════════════════
   WORKLOAD PANEL
══════════════════════════════════════════════════ */
.workload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px; padding: 4px 0;
}
.workload-eng-card {
  background: var(--card-inner);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px; transition: border-color .15s, transform .15s;
}
.workload-eng-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.workload-eng-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.eng-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-dark), #8b5cf6);
  color: #fff; font-size: 15px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(99,102,241,.35);
}
.eng-name  { font-size: 13px; font-weight: 700; color: var(--text-bright); }
.eng-count { margin-left: auto; font-size: 20px; font-weight: 800; }
.workload-bar-track { height: 6px; background: rgba(255,255,255,.07); border-radius: 4px; margin-bottom: 8px; overflow: hidden; }
.workload-bar-fill  { height: 100%; border-radius: 4px; transition: width .5s ease; }
.workload-tags { display: flex; gap: 4px; flex-wrap: wrap; }

/* 엔지니어 대시보드 개인 워크로드 바 */
.eng-workload-bar-wrap {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px 20px;
  margin-bottom: 18px; box-shadow: var(--shadow-sm);
}

/* Tags */
.skill-tag {
  font-size: 10px; padding: 3px 8px; border-radius: 20px; font-weight: 600;
  background: rgba(129,140,248,.12); color: var(--accent);
  border: 1px solid rgba(129,140,248,.25);
}
.inst-tag {
  background: rgba(167,139,250,.12); color: var(--purple);
  border: 1px solid rgba(167,139,250,.25);
}
.eng-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(52,211,153,.12); color: var(--green);
  border: 1px solid rgba(52,211,153,.25);
  border-radius: 20px; font-size: 11px; padding: 3px 9px; font-weight: 700;
}

/* ══════════════════════════════════════════════════
   KNOWLEDGE BASE
══════════════════════════════════════════════════ */
#kb-results { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }

.kb-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden;
}
.kb-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; cursor: pointer; gap: 12px; transition: background .12s;
}
.kb-card-header:hover { background: rgba(255,255,255,.03); }
.kb-card-title { font-size: 14px; font-weight: 700; color: var(--text-bright); flex: 1; }
.kb-toggle-icon { color: var(--text-muted); font-size: 12px; }
.kb-score {
  font-size: 11px; font-weight: 700;
  background: rgba(129,140,248,.12); color: var(--accent);
  border: 1px solid rgba(129,140,248,.25);
  border-radius: 20px; padding: 3px 9px; white-space: nowrap;
}
.kb-keywords { padding: 0 18px 10px; display: flex; gap: 4px; flex-wrap: wrap; }
.kb-keywords code {
  font-size: 10px; padding: 2px 7px; border-radius: 4px;
  background: rgba(255,255,255,.06); color: var(--text-muted);
}
.kb-cat-badge {
  font-size: 10px; font-weight: 700; padding: 3px 8px;
  border-radius: 6px; border: 1px solid; white-space: nowrap; flex-shrink: 0;
}
.kb-card-body { border-top: 1px solid var(--border); padding: 14px 18px; }
.kb-section { margin-bottom: 14px; }
.kb-section-label {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px;
}
.kb-section-text { font-size: 13px; color: var(--text-primary); line-height: 1.65; }
.kb-pre {
  font-size: 12px; color: var(--accent);
  background: var(--card-inner); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
  white-space: pre-wrap; word-break: break-all;
  font-family: "Consolas", "Monaco", monospace; line-height: 1.5;
}
.kb-pre.cmd { color: var(--green); }
.kb-doc-id { font-size: 11px; color: var(--text-muted); font-family: monospace; }

.kb-card-compact {
  background: var(--card-inner); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px; cursor: pointer;
  margin-bottom: 7px; transition: border-color .15s;
}
.kb-card-compact:hover { border-color: var(--accent); }
.kb-compact-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kb-compact-title {
  font-size: 13px; font-weight: 600; color: var(--text-bright);
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ══════════════════════════════════════════════════
   AI CHAT PANEL
══════════════════════════════════════════════════ */
#ai-chat-fab {
  position: fixed; bottom: 28px; right: 28px; z-index: 900;
  width: 54px; height: 54px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-dark), #8b5cf6);
  color: #fff; font-size: 22px; border: none; cursor: pointer;
  box-shadow: 0 6px 24px rgba(99,102,241,.5);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s, box-shadow .2s;
}
#ai-chat-fab:hover { transform: scale(1.1); box-shadow: 0 8px 32px rgba(99,102,241,.65); }

#ai-chat-panel {
  position: fixed; bottom: 96px; right: 28px; z-index: 901;
  width: 370px; max-height: 570px;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
#ai-chat-panel.hidden { display: none; }

#ai-chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 800; color: var(--text-bright);
}
#ai-chat-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1;
}
#ai-chat-close:hover { color: var(--text-bright); }

#ai-chat-messages {
  flex: 1; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 8px; min-height: 200px;
}
.chat-msg {
  max-width: 90%; padding: 9px 13px;
  border-radius: var(--radius-lg); font-size: 13px; line-height: 1.6; word-break: break-word;
}
.chat-ai   { align-self: flex-start; background: var(--card-inner); border: 1px solid var(--border); color: var(--text-primary); }
.chat-user { align-self: flex-end;   background: var(--accent-dark); color: #fff; }
.chat-bullet { color: var(--accent); }
.chat-links { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chat-sr-link {
  font-size: 11px; padding: 2px 7px; border-radius: 4px;
  background: rgba(129,140,248,.12); color: var(--accent);
  border: 1px solid rgba(129,140,248,.25); cursor: pointer; font-family: monospace;
}
.chat-sr-link:hover { background: rgba(129,140,248,.25); }

#ai-chat-suggestions { padding: 6px 10px 2px; display: flex; flex-wrap: wrap; gap: 4px; border-top: 1px solid var(--border); }
.chat-suggestion {
  font-size: 11px; padding: 3px 10px; border-radius: 20px;
  background: var(--card-inner); color: var(--text-muted);
  border: 1px solid var(--border); cursor: pointer; transition: color .15s, border-color .15s;
}
.chat-suggestion:hover { color: var(--text-bright); border-color: var(--accent); }

#ai-chat-input-row { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--border); }
#ai-chat-input {
  flex: 1; background: var(--card-inner); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 12px;
  color: var(--text-primary); font-size: 13px; outline: none; font-family: var(--font);
}
#ai-chat-input:focus { border-color: var(--accent); }
#ai-chat-send {
  background: var(--accent-dark); color: #fff; border: none;
  border-radius: var(--radius); padding: 8px 16px;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: background .15s;
}
#ai-chat-send:hover { background: #818cf8; }

/* ══════════════════════════════════════════════════
   PHASE 6 — 실시간 / 추이 차트 / 토스트
══════════════════════════════════════════════════ */

/* 7일 추이 차트 컨테이너 */
.trend-chart {
  width: 100%; min-height: 130px;
  display: flex; align-items: center; justify-content: center;
}
.trend-chart svg { width: 100%; }
.trend-legend { display: flex; gap: 16px; margin-top: 8px; }
.trend-legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); }
.trend-legend-dot { width: 10px; height: 10px; border-radius: 2px; }

/* 토스트 알림 */
.toast {
  position: fixed; bottom: 90px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 12px 20px; font-size: 13px; font-weight: 600;
  color: var(--text-bright); z-index: 9999;
  opacity: 0; transition: opacity .3s, transform .3s;
  white-space: nowrap; pointer-events: none;
  max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-info    { border-left: 3px solid var(--accent); }
.toast-success { border-left: 3px solid var(--green);  }
.toast-warning { border-left: 3px solid var(--yellow); }
.toast-error   { border-left: 3px solid var(--red);    }

/* ─── Scrollbar ─────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.08) transparent; }
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.18); }

/* ══════════════════════════════════════════════════
   THEME SWITCHER  (사이드바 하단)
══════════════════════════════════════════════════ */
#theme-switcher {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}
.theme-switcher-label {
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 7px;
}
.theme-swatches { display: flex; gap: 6px; }
.theme-swatch {
  flex: 1; padding: 6px 4px; border-radius: var(--radius);
  background: rgba(255,255,255,.05); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer; font-size: 10px; font-weight: 700;
  transition: all .18s; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; line-height: 1;
}
.theme-swatch:hover { background: rgba(255,255,255,.1); color: var(--text-primary); border-color: var(--accent); }
.theme-swatch.active { background: var(--accent-dark); color: #fff; border-color: transparent; box-shadow: 0 2px 10px rgba(99,102,241,.4); }
.theme-swatch-icon { font-size: 14px; }
.theme-swatch-name { font-size: 9px; }

/* ══════════════════════════════════════════════════
   THEME: LIGHT  ☀️
══════════════════════════════════════════════════ */
body[data-theme="light"] {
  color-scheme: light;
  --main-bg:       #f0f4f8;
  --sidebar-bg:    #ffffff;
  --card-bg:       #ffffff;
  --card-inner:    #f8fafc;
  --input-bg:      #f8fafc;
  --border:        rgba(15,23,42,.09);
  --shadow-sm:     0 2px 8px rgba(15,23,42,.06);
  --shadow-md:     0 4px 20px rgba(15,23,42,.08);
  --shadow-lg:     0 8px 40px rgba(15,23,42,.12);
  --text-bright:   #0f172a;
  --text-primary:  #334155;
  --text-muted:    #64748b;
  --sidebar-hover-bg: rgba(15,23,42,.04);
}
/* 라이트 테마 트랙 배경 */
body[data-theme="light"] .status-bar-track,
body[data-theme="light"] .workload-bar-track { background: rgba(15,23,42,.08); }
/* 라이트 테마 코드 블록 */
body[data-theme="light"] .kb-pre {
  background: #f1f5f9; color: #4f46e5;
  border-color: rgba(15,23,42,.09);
}
body[data-theme="light"] .kb-pre.cmd { color: #059669; }
/* 라이트 테마 스크롤바 */
body[data-theme="light"] * { scrollbar-color: rgba(15,23,42,.12) transparent; }
body[data-theme="light"] *::-webkit-scrollbar-thumb { background: rgba(15,23,42,.12); }
body[data-theme="light"] *::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,.22); }
/* 라이트 테마 사이드바 시스템 */
body[data-theme="light"] #sidebar {
  box-shadow: 2px 0 20px rgba(15,23,42,.08);
}
/* 라이트 모드 KB keywords */
body[data-theme="light"] .kb-keywords code {
  background: rgba(15,23,42,.06); color: #475569;
}
/* 라이트 chat */
body[data-theme="light"] .chat-user { background: #6366f1; }
/* 라이트 theme-swatch active */
body[data-theme="light"] .theme-swatch { background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.1); }
body[data-theme="light"] .theme-swatch:hover { background: rgba(15,23,42,.08); }
body[data-theme="light"] .theme-swatch.active { background: #6366f1; color: #fff; border-color: transparent; }

/* ══════════════════════════════════════════════════
   THEME: MIDNIGHT  🌌
══════════════════════════════════════════════════ */
body[data-theme="midnight"] {
  --main-bg:        #020408;
  --sidebar-bg:     #060c18;
  --card-bg:        #0a1020;
  --card-inner:     #020408;
  --input-bg:       #020408;
  --border:         rgba(255,255,255,.04);
  --shadow-sm:      0 2px 8px rgba(0,0,0,.6);
  --shadow-md:      0 4px 20px rgba(0,0,0,.6);
  --shadow-lg:      0 8px 40px rgba(0,0,0,.7);
  --accent:         #22d3ee;
  --accent-dark:    #0891b2;
  --green:          #34d399;
  --sidebar-active-bg: #0891b2;
}
/* 미드나잇 active 버튼 */
body[data-theme="midnight"] .nav-item.active {
  background: linear-gradient(90deg, #0891b2, #06b6d4);
  box-shadow: 0 4px 14px rgba(6,182,212,.4);
}
body[data-theme="midnight"] .btn-primary {
  background: linear-gradient(135deg, #0891b2, #06b6d4);
  box-shadow: 0 2px 10px rgba(6,182,212,.4);
}
body[data-theme="midnight"] .btn-primary:hover { box-shadow: 0 4px 18px rgba(6,182,212,.55); }
body[data-theme="midnight"] #ai-chat-send { background: #0891b2; }
body[data-theme="midnight"] #ai-chat-send:hover { background: #22d3ee; }
body[data-theme="midnight"] .chat-user { background: #0891b2; }
body[data-theme="midnight"] .logo-icon { background: linear-gradient(135deg, #0891b2, #06b6d4); box-shadow: 0 4px 14px rgba(6,182,212,.4); }
body[data-theme="midnight"] .eng-avatar { background: linear-gradient(135deg, #0891b2, #06b6d4); box-shadow: 0 3px 10px rgba(6,182,212,.3); }
body[data-theme="midnight"] #ai-chat-fab { background: linear-gradient(135deg, #0891b2, #06b6d4); box-shadow: 0 6px 24px rgba(6,182,212,.45); }
/* 미드나잇 theme-swatch active */
body[data-theme="midnight"] .theme-swatch.active { background: #0891b2; box-shadow: 0 2px 10px rgba(6,182,212,.4); }

/* ══════════════════════════════════════════════════
   PHASE 3 — 기관관리 · 스크립트 · 타임테이블
══════════════════════════════════════════════════ */

/* ── 사이드바 구분선 ────────────────────────────── */
.nav-separator {
  height: 1px;
  background: var(--border);
  margin: 8px 12px;
}

/* ── 모달 크기 확장 ─────────────────────────────── */
.modal-wide {
  max-width: 680px;
  width: 96%;
}
.modal-xlarge {
  max-width: 820px;
}

/* ── 상세 정보 그리드 ───────────────────────────── */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  font-size: 13px;
}
.detail-grid > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.detail-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.detail-text-block {
  font-size: 13px;
  color: var(--text-primary);
  background: var(--card-inner);
  border-radius: var(--radius);
  padding: 10px 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid var(--border);
}

/* ── 코드 블록 ──────────────────────────────────── */
.code-block {
  background: #0d1117;
  color: #e6edf3;
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: "Consolas", "JetBrains Mono", monospace;
  font-size: 12px;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
  border: 1px solid rgba(255,255,255,.08);
}
.code-textarea {
  font-family: "Consolas", "JetBrains Mono", monospace;
  font-size: 12px;
  line-height: 1.6;
  background: #0d1117;
  color: #e6edf3;
  border-radius: var(--radius);
  resize: vertical;
  min-height: 120px;
}
body[data-theme="light"] .code-block,
body[data-theme="light"] .code-textarea {
  background: #f6f8fa;
  color: #24292f;
  border-color: #d0d7de;
}

/* ── 스크립트 카드 ──────────────────────────────── */
.script-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  margin-bottom: 8px;
}
.script-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.script-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.script-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-bright);
  font-family: "Consolas", monospace;
}
.script-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.script-card-meta {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--text-muted);
}

/* ── 타임테이블 결과 상태 색상 ──────────────────── */
.badge-tt-SUCCESS  { background: rgba(52,211,153,.15);  color: #34d399; }
.badge-tt-FAILED   { background: rgba(248,113,113,.15); color: #f87171; }
.badge-tt-PARTIAL  { background: rgba(251,191,36,.15);  color: #fbbf24; }
.badge-tt-PENDING  { background: rgba(148,163,184,.12); color: #94a3b8; }
.badge-tt-CANCELLED{ background: rgba(148,163,184,.08); color: #64748b; }

/* ── modal-section-title ────────────────────────── */
.modal-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* ── 기관 테이블 컬럼 ───────────────────────────── */
#inst-table th:nth-child(9),
#inst-table td:nth-child(9) { width: 70px; text-align: center; }

/* ── 타임테이블 테이블 ──────────────────────────── */
#tt-table th:nth-child(9),
#tt-table td:nth-child(9) { width: 70px; text-align: center; }

/* ── Light theme code override ──────────────────── */
body[data-theme="light"] .script-card {
  background: #ffffff;
  border-color: rgba(15,23,42,.09);
}
body[data-theme="light"] .detail-text-block {
  background: #f8fafc;
}

/* ── contact modal width ────────────────────────── */
#contact-modal { max-width: 540px; width: 96%; }

/* ── 파일 업로드 영역 ───────────────────────────── */
.file-upload-area {
  margin-top: 10px;
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  transition: border-color .2s;
}
.file-upload-area:hover { border-color: var(--accent); }
.file-upload-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
  user-select: none;
}
.file-upload-label:hover { color: var(--text-primary); }
.file-upload-icon { font-size: 18px; }
.file-preview-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.file-preview-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  background: var(--bg-secondary);
  border-radius: 4px;
  padding: 4px 8px;
}
.file-preview-icon { font-size: 15px; flex-shrink: 0; }
.file-preview-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-preview-size { color: var(--text-muted); flex-shrink: 0; }

/* ── 첨부파일 목록 ──────────────────────────────── */
.attachment-list { display: flex; flex-direction: column; gap: 4px; }
.attachment-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  transition: background .15s;
}
.attachment-item:hover { background: var(--bg-hover); }
.att-icon   { font-size: 16px; flex-shrink: 0; }
.att-name   {
  flex: 1;
  color: var(--accent);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.att-name:hover { text-decoration: underline; }
.att-size     { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
.att-uploader { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
.att-date     { color: var(--text-muted); font-size: 11px; flex-shrink: 0; }
.att-del {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 14px;
  opacity: .5;
  flex-shrink: 0;
  transition: opacity .15s;
}
.att-del:hover { opacity: 1; background: rgba(248,113,113,.15); }

/* ── Light theme overrides ──────────────────────── */
body[data-theme="light"] .file-upload-area { border-color: #d1d5db; }
body[data-theme="light"] .file-upload-area:hover { border-color: var(--accent); }
body[data-theme="light"] .attachment-item { background: #f8fafc; border-color: #e5e7eb; }
body[data-theme="light"] .attachment-item:hover { background: #f1f5f9; }

/* ── 외부 페이지 링크 네비 아이템 ──────────────── */
.nav-link-ext {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.nav-link-ext:hover {
  background: var(--bg-hover, rgba(255,255,255,.05));
  color: var(--text-primary);
}

/* 외부 페이지 공통 레이아웃 */
.page-wrap { display: flex; flex-direction: column; min-height: 100vh; }
.topnav {
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px; height: 52px;
  background: var(--sidebar-bg); border-bottom: 1px solid var(--border);
  flex-shrink: 0; position: sticky; top: 0; z-index: 50;
}
.topnav-logo { font-weight: 700; font-size: 16px; color: var(--accent); text-decoration: none; }
.topnav-links { display: flex; gap: 4px; flex-wrap: wrap; }
.topnav-link {
  padding: 6px 12px; font-size: 13px; color: var(--text-muted);
  text-decoration: none; border-radius: 6px;
  transition: background .15s, color .15s;
}
.topnav-link:hover { background: var(--bg-hover, rgba(255,255,255,.05)); color: var(--text-primary); }
.topnav-link.active { background: rgba(129,140,248,.15); color: var(--accent); font-weight: 600; }
.topnav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.page-content { flex: 1; overflow-y: auto; padding: 24px; background: var(--main-bg); }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.page-title { font-size: 22px; font-weight: 700; color: var(--text-bright); }

/* 외부 페이지 공통 컴포넌트 */
.ext-stats-row { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 14px; margin-bottom: 20px; }
.ext-stat-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px 18px;
}
.ext-stat-val { font-size: 28px; font-weight: 700; color: var(--accent); }
.ext-stat-lbl { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.ext-toolbar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.ext-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.ext-tab-btn {
  padding: 8px 16px; font-size: 13px; background: none;
  border: none; color: var(--text-muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s;
}
.ext-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.ext-tab-content { display: none; }
.ext-tab-content.active { display: block; }
.ext-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  z-index: 200; display: none; align-items: center; justify-content: center;
}
.ext-modal-overlay.open { display: flex; }
.ext-modal-box {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 28px; width: 560px;
  max-width: 95vw; max-height: 88vh; overflow-y: auto; position: relative;
}
.ext-modal-box h2 { font-size: 18px; margin-bottom: 18px; color: var(--text-bright); }
.ext-modal-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; font-size: 22px;
  cursor: pointer; color: var(--text-muted);
}
.ext-modal-close:hover { color: var(--text-primary); }
.ext-form-label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.ext-form-label input,
.ext-form-label select,
.ext-form-label textarea {
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 10px; color: var(--text-primary); font-size: 13px;
}
.ext-form-label input:focus,
.ext-form-label select:focus,
.ext-form-label textarea:focus { outline: none; border-color: var(--accent); }
.ext-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ext-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px; }
.ext-code-block {
  background: #0d1117; color: #e6edf3; border-radius: 8px;
  padding: 14px 16px; font-family: 'Courier New', monospace;
  font-size: 12px; line-height: 1.6; overflow-x: auto; white-space: pre;
  border: 1px solid rgba(255,255,255,.08);
}

/* Light/Midnight theme overrides for ext pages */
body[data-theme="light"] .topnav { background: #fff; border-bottom-color: #e5e7eb; }
body[data-theme="light"] .ext-stat-card { background: #fff; border-color: #e5e7eb; }
body[data-theme="light"] .ext-modal-box { background: #fff; border-color: #e5e7eb; }
body[data-theme="light"] .ext-form-label input,
body[data-theme="light"] .ext-form-label select,
body[data-theme="light"] .ext-form-label textarea { background: #f8fafc; border-color: #d1d5db; }
body[data-theme="midnight"] .topnav { background: #0a0e1a; }