/* =============================================
   Verdi CRM — Design System v4.18.0 (2026-05-16)
   ─────────────────────────────────────────────
   디자인 에이전트 최종 시안 흡수 — Navy-Indigo Premium + Glassmorphism
   
   설계 원칙:
   - 기존 css/style.css는 건드리지 않음 (비파괴)
   - 이 파일은 index.html에서 style.css 이후 로드되는 오버레이
   - 문제 발생 시 <link> 한 줄 제거로 v4.17.0/v4.16.3 즉시 롤백
   
   참조 이미지: https://www.genspark.ai/api/files/s/GOjGXrhM
   ============================================= */

:root {
  /* ─────────── BACKGROUND GRADIENT (Navy-Indigo) ─────────── */
  --v18-bg-0: #08122B;
  --v18-bg-1: #0B1636;
  --v18-bg-2: #121A44;
  --v18-bg-3: #0E102B;
  --v18-bg-gradient: radial-gradient(ellipse at top left, #121A44 0%, #0B1636 40%, #08122B 100%);

  /* ─────────── GLASSMORPHISM CARDS ─────────── */
  --v18-card-bg:        rgba(82, 104, 132, 0.18);
  --v18-card-bg-strong: rgba(40, 52, 76, 0.45);
  --v18-card-border:    rgba(126, 141, 184, 0.20);
  --v18-card-blur:      blur(20px);
  --v18-card-shadow:    0 12px 40px rgba(0,0,0,0.35), 0 0 32px rgba(91,140,255,0.08);
  --v18-card-shadow-hv: 0 16px 48px rgba(0,0,0,0.45), 0 0 40px rgba(91,140,255,0.18);
  --v18-card-radius:    20px;
  --v18-card-radius-lg: 24px;

  /* ─────────── TEXT COLORS ─────────── */
  --v18-text-primary:   #F3F7FF;
  --v18-text-secondary: #AAB4C8;
  --v18-text-tertiary:  #7E879A;
  --v18-text-muted:     rgba(243,247,255,0.6);

  /* ─────────── ACCENT COLORS (KPI Variety) ─────────── */
  --v18-acc-cyan:       #42E8F7;
  --v18-acc-cyan-dark:  #18D6FF;
  --v18-acc-green:      #53E27B;
  --v18-acc-green-dark: #35C96A;
  --v18-acc-gold:       #E3B45C;
  --v18-acc-gold-dark:  #D7A74A;
  --v18-acc-purple:     #B072F2;
  --v18-acc-purple-dk:  #8F63E8;
  --v18-acc-red:        #F05C5C;
  --v18-acc-red-dark:   #D94C4C;
  --v18-acc-orange:     #FF9B38;
  --v18-acc-orange-dk:  #F38A20;

  /* ─────────── KPI GRADIENTS (6 cards) ─────────── */
  --v18-kpi-customer:    linear-gradient(135deg, #42E8F7, #18D6FF);
  --v18-kpi-active:      linear-gradient(135deg, #53E27B, #35C96A);
  --v18-kpi-revenue:     linear-gradient(135deg, #E3B45C, #D7A74A);
  --v18-kpi-expense:     linear-gradient(135deg, #B072F2, #8F63E8);
  --v18-kpi-profit:      linear-gradient(135deg, #53E27B, #18D6FF);
  --v18-kpi-country:     linear-gradient(135deg, #42E8F7, #B072F2);

  /* ─────────── PIPELINE STAGE COLORS (5 stages) ─────────── */
  --v18-stage-estimate:    rgba(126,141,184,0.25);
  --v18-stage-estimate-bd: rgba(126,141,184,0.50);
  --v18-stage-contracted:  rgba(227,180,92,0.20);
  --v18-stage-contracted-bd: rgba(227,180,92,0.55);
  --v18-stage-invoiced:    rgba(255,155,56,0.20);
  --v18-stage-invoiced-bd: rgba(255,155,56,0.55);
  --v18-stage-paid:        rgba(83,226,123,0.22);
  --v18-stage-paid-bd:     rgba(83,226,123,0.60);
  --v18-stage-cancelled:   rgba(120,120,140,0.15);
  --v18-stage-cancelled-bd:rgba(120,120,140,0.35);

  /* ─────────── HEATMAP COLORS (Taiwan) ─────────── */
  --v18-heat-high:   #F05C5C;
  --v18-heat-midhi:  #FF9B38;
  --v18-heat-mid:    #E3B45C;
  --v18-heat-low:    #42E8F7;
  --v18-heat-vlow:   #5B8CFF;

  /* ─────────── SPACING (8px grid) ─────────── */
  --v18-sp-1:  4px;
  --v18-sp-2:  8px;
  --v18-sp-3:  12px;
  --v18-sp-4:  16px;
  --v18-sp-5:  20px;
  --v18-sp-6:  24px;
  --v18-sp-8:  32px;
  --v18-sp-10: 40px;
  --v18-sp-12: 48px;

  /* ─────────── TYPOGRAPHY ─────────── */
  --v18-font-sans: 'Inter', 'Pretendard', 'Noto Sans KR', 'Noto Sans TC', -apple-system, sans-serif;
  --v18-fs-micro:  11px;
  --v18-fs-small:  13px;
  --v18-fs-body:   14px;
  --v18-fs-label:  16px;
  --v18-fs-h3:     20px;
  --v18-fs-h2:     24px;
  --v18-fs-h1:     30px;
  --v18-fs-kpi:    38px;
  --v18-fs-kpi-lg: 44px;
  --v18-fw-regular: 400;
  --v18-fw-medium:  500;
  --v18-fw-semibold:600;
  --v18-fw-bold:    700;
  --v18-fw-extra:   800;

  /* ─────────── ANIMATIONS ─────────── */
  --v18-trans-fast: 150ms ease-out;
  --v18-trans-base: 250ms ease-out;
  --v18-trans-slow: 400ms ease-out;
  --v18-glow-gold: 0 0 12px rgba(227,180,92,0.6), 0 0 24px rgba(227,180,92,0.3);
  --v18-glow-cyan: 0 0 12px rgba(66,232,247,0.5), 0 0 24px rgba(66,232,247,0.25);

  /* ─────────── BREAKPOINTS (reference) ─────────── */
  --v18-bp-mobile:  640px;
  --v18-bp-tablet:  1024px;
  --v18-bp-desktop: 1280px;
}

/* ═════════════════════════════════════════════
   BODY & BACKGROUND
   ═════════════════════════════════════════════ */
body {
  background: var(--v18-bg-gradient) !important;
  background-attachment: fixed !important;
  color: var(--v18-text-primary) !important;
  font-family: var(--v18-font-sans) !important;
  min-height: 100vh;
}

/* 본문 영역에도 어두운 톤 적용 */
.main-wrapper {
  background: transparent !important;
}

/* ═════════════════════════════════════════════
   TOPBAR (Premium feel)
   ═════════════════════════════════════════════ */
.topbar {
  background: rgba(8,18,43,0.65) !important;
  backdrop-filter: var(--v18-card-blur);
  -webkit-backdrop-filter: var(--v18-card-blur);
  border-bottom: 1px solid var(--v18-card-border) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}
.topbar-title, .topbar h1 { color: var(--v18-text-primary) !important; }
.topbar-date { color: var(--v18-text-secondary) !important; }
.topbar-date i { color: var(--v18-acc-gold); }

/* LIVE 배지 (헤더 새로 추가) */
.v18-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(83,226,123,0.15);
  border: 1px solid var(--v18-acc-green);
  color: var(--v18-acc-green);
  font-size: var(--v18-fs-micro);
  font-weight: var(--v18-fw-bold);
  letter-spacing: 1.2px;
}
.v18-live-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--v18-acc-green);
  box-shadow: 0 0 8px var(--v18-acc-green);
  animation: v18-pulse 1.5s ease-in-out infinite;
}
@keyframes v18-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.3); }
}

/* 국기 배지 */
.v18-flag-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(82,104,132,0.20);
  border: 1px solid var(--v18-card-border);
  font-size: 16px;
}
.v18-currency-pill {
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(40,52,76,0.55);
  border: 1px solid var(--v18-card-border);
  color: var(--v18-acc-gold);
  font-size: var(--v18-fs-small);
  font-weight: var(--v18-fw-bold);
  letter-spacing: 0.5px;
}

/* ═════════════════════════════════════════════
   SIDEBAR (Premium Navy)
   ═════════════════════════════════════════════ */
.sidebar {
  background: linear-gradient(180deg, #0A1228 0%, #0E1532 100%) !important;
  border-right: 1px solid var(--v18-card-border) !important;
  box-shadow: 4px 0 24px rgba(0,0,0,0.3);
}
.sidebar-logo, .sidebar-brand, .logo { color: var(--v18-text-primary) !important; }
.nav-section-title {
  color: var(--v18-text-tertiary) !important;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: var(--v18-fs-micro);
  font-weight: var(--v18-fw-semibold);
}
.nav-item {
  color: var(--v18-text-secondary) !important;
  border-radius: 10px !important;
  transition: var(--v18-trans-base);
}
.nav-item:hover {
  background: rgba(91,140,255,0.10) !important;
  color: var(--v18-text-primary) !important;
}
.nav-item.active {
  background: linear-gradient(135deg, rgba(66,232,247,0.15), rgba(176,114,242,0.10)) !important;
  color: var(--v18-text-primary) !important;
  border-left: 3px solid var(--v18-acc-cyan);
  padding-left: 13px !important;
}
.nav-item i { color: var(--v18-acc-cyan); }
.nav-badge {
  background: rgba(91,140,255,0.20) !important;
  color: var(--v18-acc-cyan) !important;
  border: 1px solid rgba(66,232,247,0.30);
}
.nav-badge-new {
  background: var(--v18-acc-red) !important;
  color: #fff !important;
  border: none;
  animation: v18-pulse 1.8s ease-in-out infinite;
}

.sidebar-footer {
  background: rgba(8,18,43,0.50);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--v18-card-border);
}
.user-info { color: var(--v18-text-primary); }
.user-name { color: var(--v18-text-primary) !important; }
.user-role-badge {
  background: rgba(227,180,92,0.20) !important;
  color: var(--v18-acc-gold) !important;
  border: 1px solid rgba(227,180,92,0.40);
}
.sidebar-version {
  background: rgba(40,52,76,0.55);
  color: var(--v18-acc-gold) !important;
  border-top: 1px solid var(--v18-card-border);
  font-weight: var(--v18-fw-semibold);
  letter-spacing: 0.5px;
}

/* ═════════════════════════════════════════════
   CARD BASE (Glassmorphism)
   ═════════════════════════════════════════════ */
.kpi-card,
.chart-card,
.table-card,
.action-card,
.entity-is-section > *,
.dash-prj-section > * {
  background: var(--v18-card-bg) !important;
  backdrop-filter: var(--v18-card-blur);
  -webkit-backdrop-filter: var(--v18-card-blur);
  border: 1px solid var(--v18-card-border) !important;
  border-radius: var(--v18-card-radius) !important;
  box-shadow: var(--v18-card-shadow) !important;
  color: var(--v18-text-primary) !important;
  transition: var(--v18-trans-base) !important;
}
.kpi-card:hover,
.chart-card:hover {
  transform: translateY(-2px);
  border-color: rgba(66,232,247,0.35) !important;
  box-shadow: var(--v18-card-shadow-hv) !important;
}

/* ═════════════════════════════════════════════
   KPI CARDS — 6 cards with data-kpi attribute
   ═════════════════════════════════════════════ */
.kpi-card {
  position: relative;
  padding: var(--v18-sp-6) var(--v18-sp-6) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--v18-sp-3);
  min-height: 150px;
  overflow: hidden;
}

/* 카드 상단 컬러 스트라이프 */
.kpi-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--v18-card-radius) var(--v18-card-radius) 0 0;
  opacity: 0.9;
}
.kpi-card[data-kpi="customer"]::before  { background: var(--v18-kpi-customer); }
.kpi-card[data-kpi="active"]::before    { background: var(--v18-kpi-active); }
.kpi-card[data-kpi="revenue"]::before   { background: var(--v18-kpi-revenue); }
.kpi-card[data-kpi="expense"]::before   { background: var(--v18-kpi-expense); }
.kpi-card[data-kpi="profit"]::before    { background: var(--v18-kpi-profit); }
.kpi-card[data-kpi="country"]::before   { background: var(--v18-kpi-country); }

/* KPI 아이콘은 v4.18에서 우측 상단 미니 트렌드 칩으로 대체 — 기존 아이콘은 작게 조정 */
.kpi-card .kpi-icon {
  position: absolute;
  top: var(--v18-sp-4);
  right: var(--v18-sp-4);
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px !important;
  opacity: 0.65;
}
.kpi-card[data-kpi="customer"] .kpi-icon  { background: var(--v18-kpi-customer); color: #fff; }
.kpi-card[data-kpi="active"] .kpi-icon    { background: var(--v18-kpi-active); color: #fff; }
.kpi-card[data-kpi="revenue"] .kpi-icon   { background: var(--v18-kpi-revenue); color: #fff; }
.kpi-card[data-kpi="expense"] .kpi-icon   { background: var(--v18-kpi-expense); color: #fff; }
.kpi-card[data-kpi="profit"] .kpi-icon    { background: var(--v18-kpi-profit); color: #fff; }
.kpi-card[data-kpi="country"] .kpi-icon   { background: var(--v18-kpi-country); color: #fff; }

.kpi-card .kpi-info {
  display: flex;
  flex-direction: column;
  gap: var(--v18-sp-2);
  margin-top: var(--v18-sp-4);
}

.kpi-card .kpi-label {
  color: var(--v18-text-secondary) !important;
  font-size: var(--v18-fs-label) !important;
  font-weight: var(--v18-fw-medium) !important;
  letter-spacing: 0.2px;
  /* 글자 잘림 방지 — 2줄까지 허용 */
  line-height: 1.3;
  max-width: 90%;
  white-space: normal;
  overflow: visible;
}

.kpi-card .kpi-value {
  color: var(--v18-text-primary) !important;
  font-size: var(--v18-fs-kpi) !important;
  font-weight: var(--v18-fw-extra) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.5px;
  text-shadow: 0 0 24px rgba(255,255,255,0.10);
  font-variant-numeric: tabular-nums;
}

/* 골드 글로우 애니메이션 (값 변경 시 JS가 토글) */
.kpi-card.v18-flash .kpi-value {
  animation: v18-gold-glow 0.6s ease-out;
}
@keyframes v18-gold-glow {
  0%   { text-shadow: 0 0 0 rgba(227,180,92,0); color: #fff; }
  50%  { text-shadow: var(--v18-glow-gold); color: var(--v18-acc-gold); }
  100% { text-shadow: 0 0 24px rgba(255,255,255,0.10); color: var(--v18-text-primary); }
}

/* 클릭 가능 카드 — 돋보기 아이콘 위치 조정 */
.kpi-card.kpi-card-clickable { cursor: pointer; }
.kpi-card.kpi-card-clickable:hover {
  border-color: var(--v18-acc-gold) !important;
}
.kpi-source-icon {
  position: absolute;
  bottom: var(--v18-sp-4);
  right: var(--v18-sp-4);
  color: var(--v18-acc-gold) !important;
  opacity: 0.55;
  font-size: 12px !important;
}

/* ═════════════════════════════════════════════
   CHART CARDS
   ═════════════════════════════════════════════ */
.chart-card {
  padding: var(--v18-sp-6) !important;
}
.chart-card-header h3 {
  color: var(--v18-text-primary) !important;
  font-size: var(--v18-fs-h3) !important;
  font-weight: var(--v18-fw-semibold) !important;
  margin: 0 0 var(--v18-sp-4) 0;
}
.chart-card-sub {
  color: var(--v18-text-tertiary);
  font-size: var(--v18-fs-small);
}

/* ═════════════════════════════════════════════
   TABLES (Top 5, deals 등)
   ═════════════════════════════════════════════ */
.table-card { padding: var(--v18-sp-6) !important; }
.table-card-header h3 { color: var(--v18-text-primary) !important; }
.link-all {
  color: var(--v18-acc-cyan) !important;
  text-decoration: none;
}
.mini-table {
  color: var(--v18-text-primary);
}
.mini-table thead th {
  background: rgba(40,52,76,0.50) !important;
  color: var(--v18-text-secondary) !important;
  border-bottom: 1px solid var(--v18-card-border) !important;
  font-size: var(--v18-fs-small);
  font-weight: var(--v18-fw-semibold);
}
.mini-table tbody td {
  color: var(--v18-text-primary) !important;
  border-bottom: 1px solid rgba(126,141,184,0.10) !important;
}
.mini-table tbody tr:hover td {
  background: rgba(91,140,255,0.06) !important;
}

/* ═════════════════════════════════════════════
   ENTITY INCOME STATEMENT (법인별 손익)
   ═════════════════════════════════════════════ */
.entity-is-section {
  display: block;
  margin-top: var(--v18-sp-6);
}
.entity-is-section table {
  color: var(--v18-text-primary);
}
.entity-is-section th {
  color: var(--v18-text-secondary) !important;
  background: rgba(40,52,76,0.40) !important;
}
.entity-is-section td {
  border-color: rgba(126,141,184,0.15) !important;
}

/* ═════════════════════════════════════════════
   PIPELINE STAGE CARDS (5 stages)
   ═════════════════════════════════════════════ */
.v18-pipeline-stage {
  background: var(--v18-stage-estimate);
  border: 1px solid var(--v18-stage-estimate-bd);
  border-radius: 16px;
  padding: var(--v18-sp-5);
  margin-bottom: var(--v18-sp-4);
  position: relative;
  transition: var(--v18-trans-base);
}
.v18-pipeline-stage:hover { transform: translateX(-3px); }

.v18-pipeline-stage[data-stage="estimate"]   { background: var(--v18-stage-estimate);   border-color: var(--v18-stage-estimate-bd);   border-style: dashed; }
.v18-pipeline-stage[data-stage="contracted"] { background: var(--v18-stage-contracted); border-color: var(--v18-stage-contracted-bd); }
.v18-pipeline-stage[data-stage="invoiced"]   { background: var(--v18-stage-invoiced);   border-color: var(--v18-stage-invoiced-bd); }
.v18-pipeline-stage[data-stage="paid"]       { background: var(--v18-stage-paid);       border-color: var(--v18-stage-paid-bd);       box-shadow: 0 0 16px rgba(83,226,123,0.15); }
.v18-pipeline-stage[data-stage="cancelled"]  { background: var(--v18-stage-cancelled);  border-color: var(--v18-stage-cancelled-bd);  opacity: 0.6; }

.v18-stage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--v18-sp-3);
}
.v18-stage-label {
  font-size: var(--v18-fs-label);
  font-weight: var(--v18-fw-semibold);
  color: var(--v18-text-primary);
}
.v18-stage-count {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(8,18,43,0.55);
  border: 2px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--v18-fs-body);
  font-weight: var(--v18-fw-bold);
}
.v18-pipeline-stage[data-stage="estimate"]   .v18-stage-count { color: #c8d0e8; }
.v18-pipeline-stage[data-stage="contracted"] .v18-stage-count { color: var(--v18-acc-gold); }
.v18-pipeline-stage[data-stage="invoiced"]   .v18-stage-count { color: var(--v18-acc-orange); }
.v18-pipeline-stage[data-stage="paid"]       .v18-stage-count { color: var(--v18-acc-green); }
.v18-pipeline-stage[data-stage="cancelled"]  .v18-stage-count { color: #888; }

.v18-stage-progress {
  height: 6px;
  background: rgba(8,18,43,0.40);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: var(--v18-sp-3);
}
.v18-stage-progress-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease-out;
}
.v18-pipeline-stage[data-stage="estimate"]   .v18-stage-progress-bar { background: linear-gradient(90deg, #c8d0e8, #7e87a0); }
.v18-pipeline-stage[data-stage="contracted"] .v18-stage-progress-bar { background: var(--v18-kpi-revenue); }
.v18-pipeline-stage[data-stage="invoiced"]   .v18-stage-progress-bar { background: linear-gradient(90deg, #FF9B38, #F05C5C); }
.v18-pipeline-stage[data-stage="paid"]       .v18-stage-progress-bar { background: var(--v18-kpi-active); }
.v18-pipeline-stage[data-stage="cancelled"]  .v18-stage-progress-bar { background: #888; }

.v18-stage-amount {
  text-align: right;
  font-size: var(--v18-fs-label);
  font-weight: var(--v18-fw-bold);
  color: var(--v18-text-primary);
  font-variant-numeric: tabular-nums;
}

/* ═════════════════════════════════════════════
   TAIWAN HEATMAP CARD (left)
   ═════════════════════════════════════════════ */
.v18-heatmap-card {
  padding: var(--v18-sp-6);
}
.v18-heatmap-canvas {
  position: relative;
  width: 100%;
  min-height: 320px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--v18-sp-3);
}
.v18-region {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--v18-sp-4) var(--v18-sp-5);
  border-radius: 14px;
  background: rgba(8,18,43,0.40);
  border: 1px solid var(--v18-card-border);
  position: relative;
  overflow: hidden;
}
.v18-region::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: 4px 0 0 4px;
}
.v18-region[data-heat="high"]::before  { background: var(--v18-heat-high);  box-shadow: 0 0 12px var(--v18-heat-high); }
.v18-region[data-heat="midhi"]::before { background: var(--v18-heat-midhi); box-shadow: 0 0 10px var(--v18-heat-midhi); }
.v18-region[data-heat="mid"]::before   { background: var(--v18-heat-mid);   box-shadow: 0 0 8px var(--v18-heat-mid); }
.v18-region[data-heat="low"]::before   { background: var(--v18-heat-low);   box-shadow: 0 0 6px var(--v18-heat-low); }
.v18-region[data-heat="vlow"]::before  { background: var(--v18-heat-vlow); }
.v18-region-name {
  color: var(--v18-text-primary);
  font-weight: var(--v18-fw-semibold);
  font-size: var(--v18-fs-label);
}
.v18-region-count {
  color: var(--v18-text-secondary);
  font-size: var(--v18-fs-h3);
  font-weight: var(--v18-fw-bold);
  font-variant-numeric: tabular-nums;
}
.v18-heatmap-legend {
  display: flex;
  align-items: center;
  gap: var(--v18-sp-3);
  margin-top: var(--v18-sp-4);
  justify-content: flex-end;
  font-size: var(--v18-fs-micro);
  color: var(--v18-text-tertiary);
}
.v18-legend-strip {
  width: 80px;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--v18-heat-high), var(--v18-heat-midhi), var(--v18-heat-mid), var(--v18-heat-low));
}

/* ═════════════════════════════════════════════
   ACTIVITY FEED (bottom)
   ═════════════════════════════════════════════ */
.v18-feed-section {
  margin-top: var(--v18-sp-6);
}
.v18-feed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--v18-sp-4);
}
.v18-feed-card {
  background: var(--v18-card-bg);
  border: 1px solid var(--v18-card-border);
  border-left: 3px solid var(--v18-acc-cyan);
  border-radius: 14px;
  padding: var(--v18-sp-5);
  backdrop-filter: var(--v18-card-blur);
  transition: var(--v18-trans-base);
}
.v18-feed-card:hover { transform: translateY(-2px); }
.v18-feed-card[data-feed-type="alert"]   { border-left-color: var(--v18-acc-red); }
.v18-feed-card[data-feed-type="success"] { border-left-color: var(--v18-acc-green); }
.v18-feed-card[data-feed-type="info"]    { border-left-color: var(--v18-acc-cyan); }
.v18-feed-card[data-feed-type="warn"]    { border-left-color: var(--v18-acc-gold); }

.v18-feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--v18-sp-2);
}
.v18-feed-pill {
  font-size: var(--v18-fs-micro);
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: var(--v18-fw-bold);
  letter-spacing: 0.5px;
}
.v18-feed-card[data-feed-type="alert"] .v18-feed-pill   { background: rgba(240,92,92,0.18); color: var(--v18-acc-red); }
.v18-feed-card[data-feed-type="success"] .v18-feed-pill { background: rgba(83,226,123,0.18); color: var(--v18-acc-green); }
.v18-feed-card[data-feed-type="info"] .v18-feed-pill    { background: rgba(66,232,247,0.18); color: var(--v18-acc-cyan); }
.v18-feed-card[data-feed-type="warn"] .v18-feed-pill    { background: rgba(227,180,92,0.18); color: var(--v18-acc-gold); }

.v18-feed-time {
  color: var(--v18-text-tertiary);
  font-size: var(--v18-fs-micro);
}
.v18-feed-title {
  color: var(--v18-text-primary);
  font-weight: var(--v18-fw-semibold);
  font-size: var(--v18-fs-body);
  margin: var(--v18-sp-2) 0 var(--v18-sp-1) 0;
}
.v18-feed-desc {
  color: var(--v18-text-secondary);
  font-size: var(--v18-fs-small);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ═════════════════════════════════════════════
   MODALS — Glassmorphism
   ═════════════════════════════════════════════ */
.modal-overlay {
  background: rgba(8,18,43,0.75) !important;
  backdrop-filter: blur(12px);
}
.modal {
  background: rgba(20,30,60,0.85) !important;
  backdrop-filter: var(--v18-card-blur);
  border: 1px solid var(--v18-card-border) !important;
  border-radius: var(--v18-card-radius-lg) !important;
  color: var(--v18-text-primary) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.modal h2, .modal h3, .modal label { color: var(--v18-text-primary) !important; }
.modal input, .modal select, .modal textarea {
  background: rgba(8,18,43,0.55) !important;
  color: var(--v18-text-primary) !important;
  border: 1px solid var(--v18-card-border) !important;
}
.modal input:focus, .modal select:focus, .modal textarea:focus {
  border-color: var(--v18-acc-cyan) !important;
  box-shadow: 0 0 0 3px rgba(66,232,247,0.20) !important;
}

/* ═════════════════════════════════════════════
   BUTTONS
   ═════════════════════════════════════════════ */
.btn-primary {
  background: linear-gradient(135deg, var(--v18-acc-cyan), var(--v18-acc-purple-dk)) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(66,232,247,0.25) !important;
  font-weight: var(--v18-fw-semibold);
  transition: var(--v18-trans-base);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(66,232,247,0.40) !important;
}

/* ═════════════════════════════════════════════
   TOAST (실시간 알림)
   ═════════════════════════════════════════════ */
.v18-toast {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: 9999;
  background: rgba(20,30,60,0.95);
  backdrop-filter: blur(20px);
  border: 1px solid var(--v18-acc-green);
  border-left: 4px solid var(--v18-acc-green);
  border-radius: 12px;
  padding: 14px 20px;
  color: var(--v18-text-primary);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4), 0 0 16px rgba(83,226,123,0.25);
  min-width: 280px;
  max-width: 360px;
  animation: v18-toast-in 0.4s ease-out;
}
.v18-toast.v18-toast-out { animation: v18-toast-out 0.4s ease-in forwards; }
@keyframes v18-toast-in {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes v18-toast-out {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(120%); opacity: 0; }
}
.v18-toast-title {
  font-weight: var(--v18-fw-bold);
  font-size: var(--v18-fs-body);
  margin-bottom: 4px;
}
.v18-toast-desc {
  font-size: var(--v18-fs-small);
  color: var(--v18-text-secondary);
}

/* ═════════════════════════════════════════════
   PAGE TITLE (각 메인 페이지 상단)
   ═════════════════════════════════════════════ */
.page h1, .page > h2 {
  color: var(--v18-text-primary) !important;
}

/* 도넛/바 차트 컨테이너 */
.chart-container { background: transparent; }

/* ═════════════════════════════════════════════
   RESPONSIVE
   ═════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .kpi-card .kpi-value { font-size: 32px !important; }
}
@media (max-width: 1024px) {
  .v18-heatmap-canvas { grid-template-columns: 1fr; }
  .v18-feed-grid      { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .kpi-card { min-height: 130px; padding: var(--v18-sp-4) !important; }
  .kpi-card .kpi-value { font-size: 28px !important; }
  .v18-feed-grid { grid-template-columns: 1fr; }
}

/* ═════════════════════════════════════════════
   SCROLLBAR (Premium)
   ═════════════════════════════════════════════ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(8,18,43,0.40); }
::-webkit-scrollbar-thumb {
  background: rgba(91,140,255,0.30);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(66,232,247,0.50); background-clip: padding-box; }