body {
  margin: 0;
  overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────────────────
   VaultAI Design Token System  (--vt-*)
   Light theme (default)
───────────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* ── Brand ─────────────────────────────────────────────────────────────── */
  --vt-brand:          #0f766e;                                    /* teal-700  */
  --vt-brand-end:      #0e7490;                                    /* cyan-600  */
  --vt-brand-gradient: linear-gradient(135deg, #0f766e 0%, #0e7490 100%);
  --vt-brand-subtle:   rgba(15, 118, 110, 0.08);                  /* tinted bg */
  --vt-brand-border:   rgba(15, 118, 110, 0.22);                  /* tinted border */
  --vt-brand-shadow:   0 10px 26px rgba(14, 116, 144, 0.26);

  /* ── Backgrounds ───────────────────────────────────────────────────────── */
  --vt-bg-app:         #f3f6fb;                                    /* 앱 최외곽 */
  --vt-bg-main:        #f8fafd;                                    /* 메인 콘텐츠 */
  --vt-bg-sidebar:     linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  --vt-bg-surface:     #ffffff;                                    /* 카드·패널 */
  --vt-bg-elevated:    #ffffff;                                    /* 팝오버·다이얼로그 */
  --vt-bg-subtle:      #f1f5f9;                                    /* hover, 비활성 영역 */
  --vt-bg-overlay:     rgba(15, 23, 42, 0.32);                    /* 모달 딤 */

  /* ── Borders ───────────────────────────────────────────────────────────── */
  --vt-border:         #dbe5ee;
  --vt-border-strong:  #b8c9d9;                                    /* 강조 구분선 */
  --vt-border-subtle:  #edf2f7;                                    /* 가벼운 구분선 */

  /* ── Text ──────────────────────────────────────────────────────────────── */
  --vt-text-strong:      #0f172a;                                  /* 제목·레이블 */
  --vt-text-normal:      #334155;                                  /* 본문 */
  --vt-text-muted:       #64748b;                                  /* 보조·메타 */
  --vt-text-disabled:    #94a3b8;
  --vt-text-placeholder: #94a3b8;
  --vt-text-inverse:     #ffffff;                                  /* 브랜드 bg 위 */

  /* ── Navigation ────────────────────────────────────────────────────────── */
  --vt-nav-hover:       #f1f5f9;
  --vt-nav-active:      linear-gradient(135deg, #0f766e 0%, #0e7490 100%);
  --vt-nav-active-text: #f8fafc;

  /* ── Interactive / Focus ───────────────────────────────────────────────── */
  --vt-focus-color:  #0f766e;
  --vt-focus-shadow: 0 0 0 3px rgba(15, 118, 110, 0.18);

  /* ── Primary (alias → brand, 컴포넌트 공통 선택색) ─────────────────────── */
  --vt-primary: var(--vt-brand);

  /* ── Status ────────────────────────────────────────────────────────────── */
  --vt-success:        #047857;
  --vt-success-bg:     #ecfdf5;
  --vt-success-border: #a7f3d0;
  --vt-success-text:   #065f46;

  --vt-warning:        #b45309;
  --vt-warning-bg:     #fffbeb;
  --vt-warning-border: #fde68a;
  --vt-warning-text:   #92400e;

  --vt-error:          #b91c1c;
  --vt-error-bg:       #fef2f2;
  --vt-error-border:   #fecaca;
  --vt-error-text:     #991b1b;

  --vt-info:           #1d4ed8;
  --vt-info-bg:        #eff6ff;
  --vt-info-border:    #bfdbfe;
  --vt-info-text:      #1e40af;

  /* ── Overlay / Popover ─────────────────────────────────────────────────── */
  --vt-popover-bg:     #ffffff;
  --vt-popover-border: #e2e8f0;
  --vt-popover-shadow: 0 20px 44px rgba(15, 23, 42, 0.18);

  /* ── Danger Menu ───────────────────────────────────────────────────────── */
  --vt-menu-danger-bg:   #fef2f2;
  --vt-menu-danger-text: #b91c1c;

  /* ── Typography ────────────────────────────────────────────────────────── */
  --vt-font-sans: 'Pretendard Variable', 'SUIT Variable', 'Noto Sans KR', sans-serif;
  --vt-font-mono: ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

  --vt-text-xs:   0.72rem;    /* ~11.5px — helper, meta */
  --vt-text-sm:   0.82rem;    /* ~13px   — body, label */
  --vt-text-base: 0.875rem;   /* 14px    — default */
  --vt-text-lg:   1.0rem;     /* 16px    — section title */
  --vt-text-xl:   1.32rem;    /* ~21px   — page title */

  /* ── Spacing (8px grid) ────────────────────────────────────────────────── */
  --vt-space-1: 4px;
  --vt-space-2: 8px;
  --vt-space-3: 12px;
  --vt-space-4: 16px;
  --vt-space-5: 20px;
  --vt-space-6: 24px;
  --vt-space-8: 32px;

  /* ── Radius ────────────────────────────────────────────────────────────── */
  --vt-radius-sm:   6px;      /* 인풋, 소형 버튼 */
  --vt-radius-md:   10px;     /* 네비 아이템, 중형 카드 */
  --vt-radius-lg:   14px;     /* 팝오버, 다이얼로그 */
  --vt-radius-xl:   20px;     /* 대형 패널 */
  --vt-radius-full: 9999px;   /* 필·배지 */

  /* ── Shadow ────────────────────────────────────────────────────────────── */
  --vt-shadow-sm:    0 1px 4px rgba(15, 23, 42, 0.07);
  --vt-shadow-md:    0 8px 24px rgba(15, 23, 42, 0.10);
  --vt-shadow-lg:    0 20px 44px rgba(15, 23, 42, 0.18);
  --vt-shadow-brand: 0 10px 26px rgba(14, 116, 144, 0.26);

  /* ── Transition ────────────────────────────────────────────────────────── */
  --vt-transition-fast: 0.1s ease;
  --vt-transition:      0.15s ease;
  --vt-transition-slow: 0.2s ease;

  /* ── Component: Table (전역 기본값, vt-table 상속) ─────────────────────── */
  --vt-table-header-bg: #f7fafd;
  --vt-table-row-hover: #f8fafc;

  /* ── Component: User Popover (main-app 전용) ───────────────────────────── */
  --vt-user-popover-bg:     var(--vt-popover-bg);
  --vt-user-popover-border: var(--vt-popover-border);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Dark theme overrides
───────────────────────────────────────────────────────────────────────────── */
:root[theme="dark"] {
  color-scheme: dark;

  /* Backgrounds */
  --vt-bg-app:      #0b1220;
  --vt-bg-main:     #0f172a;
  --vt-bg-sidebar:  linear-gradient(180deg, #111b2f 0%, #0f1a2b 100%);
  --vt-bg-surface:  #111b2f;
  --vt-bg-elevated: #16243a;
  --vt-bg-subtle:   #16243a;
  --vt-bg-overlay:  rgba(0, 0, 0, 0.60);

  /* Borders */
  --vt-border:        #22324a;
  --vt-border-strong: #2b3f5c;
  --vt-border-subtle: #1a2844;

  /* Text */
  --vt-text-strong:      #e2e8f0;
  --vt-text-normal:      #cbd5e1;
  --vt-text-muted:       #94a3b8;
  --vt-text-disabled:    #64748b;
  --vt-text-placeholder: #64748b;

  /* Navigation */
  --vt-nav-hover: #16243a;

  /* Brand */
  --vt-brand-subtle: rgba(14, 116, 144, 0.15);
  --vt-brand-border: rgba(14, 116, 144, 0.30);

  /* Focus */
  --vt-focus-shadow: 0 0 0 3px rgba(15, 118, 110, 0.28);

  /* Status */
  --vt-success-bg:     #022c22;
  --vt-success-border: #064e3b;
  --vt-warning-bg:     #1c0d02;
  --vt-warning-border: #451a03;
  --vt-error-bg:       #1c0606;
  --vt-error-border:   #450a0a;
  --vt-info-bg:        #0c1e3d;
  --vt-info-border:    #1e3a5f;

  /* Popover */
  --vt-popover-bg:     #111b2f;
  --vt-popover-border: #2b3f5c;
  --vt-popover-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);

  /* Danger */
  --vt-menu-danger-bg:   #2d1318;
  --vt-menu-danger-text: #fecaca;

  /* Table */
  --vt-table-header-bg: #0f1a2b;
  --vt-table-row-hover: #16243a;
}