/* ============================================================
   SMARTRA 디자인 토큰 v2 (2026 모던 리프레시)
   설계 의도 (ADR-009 단순성):
   - CSS variables 만. SCSS / CSS-in-JS 없음.
   - 라이트/다크 두 테마. data-theme="dark" 로 토글.
   - 2026 트렌드 — Linear/Vercel/Raycast 풍:
       · 더 큰 radius (부드러움)
       · 미묘한 shadow + 색상 있는 ring (focus·hover 표현)
       · 시그니처 그라데이션 (hero·CTA 한정)
       · 4-Layer 구분 유지 + 톤 정제
       · typography hierarchy 강화 (display / heading / body)
       · 가독성·정보 밀도 최적화
   ============================================================ */

/* ─── 폰트 (Pretendard + Inter fallback) ──────────────────── */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@import url('https://rsms.me/inter/inter.css');

/* ─── 라이트 (기본) ───────────────────────────────────────── */
:root {
  /* 브랜드 — indigo·violet 시그니처. 무채색 베이스에 한 점 강조. */
  --c-primary: #4f46e5;             /* indigo-600 — 더 차분한 톤 */
  --c-primary-hover: #4338ca;       /* indigo-700 */
  --c-primary-active: #3730a3;      /* indigo-800 */
  --c-primary-bg: rgba(79, 70, 229, 0.08);
  --c-primary-bg-strong: rgba(79, 70, 229, 0.14);
  --c-accent: #8b5cf6;              /* violet-500 */
  --c-accent-bg: rgba(139, 92, 246, 0.08);

  /* 시그니처 그라데이션 — hero/CTA 한정 */
  --grad-brand: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(79, 70, 229, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
  --grad-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --grad-warn: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --grad-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);

  /* 상태 (semantic) */
  --c-success: #059669;
  --c-success-bg: rgba(5, 150, 105, 0.1);
  --c-success-bg-strong: rgba(5, 150, 105, 0.16);
  --c-warn: #d97706;
  --c-warn-bg: rgba(217, 119, 6, 0.1);
  --c-warn-bg-strong: rgba(217, 119, 6, 0.18);
  --c-danger: #dc2626;
  --c-danger-bg: rgba(220, 38, 38, 0.1);
  --c-danger-bg-strong: rgba(220, 38, 38, 0.16);
  --c-info: #0891b2;
  --c-info-bg: rgba(8, 145, 178, 0.1);
  --c-info-bg-strong: rgba(8, 145, 178, 0.16);

  /* 표면 — 4-Layer (시인성 강화 v3 — Linear/Vercel/Notion 톤)
     라이트 모드는 더 명확한 보더 + 진한 텍스트로 가독성 우선. */
  --c-bg: #f0f3f8;                 /* Layer 3: 콘텐츠 영역 — 더 회색조 (카드 흰색과 명확히 구분) */
  --c-bg-subtle: #e8ecf3;          /* sticky / 미묘 hover / zebra striping 용 */
  --c-bg-zebra: #fafbfd;           /* 카드 안 zebra (테이블 짝수 행) */
  --c-sidebar-bg: #e1e6ee;         /* Layer 2: 펼침 사이드바 (콘텐츠보다 진함) */
  --c-topbar-bg: rgba(240, 243, 248, 0.88);  /* 반투명 (frosted glass) */
  --c-topbar-border: rgba(0, 0, 0, 0.08);
  --c-card: #ffffff;               /* Layer 4: 카드 (가장 밝음) */
  --c-card-hover: #f1f4f9;         /* hover 시 더 명확히 변화 */
  --c-card-elev: #ffffff;          /* 떠오른 카드 */
  --c-border: #d5dae5;             /* 보더 더 진하게 (1px 가 분명히 보이도록) */
  --c-border-strong: #b8c0cd;
  --c-divider: #e4e8ef;            /* 약한 divider (테이블 행 사이) */
  /* [v4 row 구분] zebra 대체 — 진한 row line + hairline shadow + hover bar.
     설계 의도: 사용자 피드백 — 줄무늬 빼고 위·아래 행 구분이 더 잘 보이도록.
                Stripe/Linear/Notion 의 "calm but scannable" 패턴. */
  --c-row-line: #d8dde8;           /* 행 사이 진한 라인 (divider 보다 진함) */
  --c-row-hover-bg: #eef2f8;       /* hover 행 배경 — 명확히 보이게 */
  --c-row-hover-bar: var(--c-primary);  /* hover 시 좌측 색상 바 */
  --c-row-zebra: transparent;      /* zebra 사용 안 함 — 호환용으로만 정의 */
  --c-overlay: rgba(15, 23, 42, 0.5);   /* modal backdrop */

  /* 레일 전용 — 다크 슬레이트 (라이트 모드에서도 다크, Linear/Discord 풍) */
  --c-rail-bg: #1a1f2e;            /* 더 inky 한 톤 */
  --c-rail-fg: #8b95a7;            /* slate-400 톤 */
  --c-rail-fg-hover: #f1f5f9;
  --c-rail-btn-hover: #2a3142;
  --c-rail-divider: #2a3142;
  --c-rail-active-bg: rgba(99, 102, 241, 0.18);
  --c-rail-active-fg: #a5b4fc;     /* indigo-300 — 다크 위 강조 */
  --c-rail-active-bar: #6366f1;    /* 활성 표시 좌측 바 */

  /* 호환 */
  --c-bg-elev: var(--c-rail-bg);

  /* 텍스트 — 시인성 우선 (Linear 풍 진한 본문) */
  --c-fg: #1a2233;                 /* 본문 — 더 진하게 (시인성) */
  --c-fg-strong: #0a0f1c;          /* 강한 본문 / 헤딩 — 거의 검정 */
  --c-fg-mute: #525e72;            /* 무드 텍스트 — 더 진하게 (회색 너무 옅던 문제 해결) */
  --c-fg-subtle: #8590a3;          /* 보조 (placeholder, 미래 등) */
  --c-fg-on-primary: #ffffff;

  /* 그림자 — 시인성 향상 (Linear/Vercel 풍 약간 진한 보더 + 미묘 그림자) */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.1), 0 4px 8px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.14), 0 8px 16px rgba(15, 23, 42, 0.07);
  --shadow-focus: 0 0 0 3px rgba(79, 70, 229, 0.25);
  --shadow-hover-ring: 0 0 0 1px rgba(79, 70, 229, 0.22), 0 4px 12px rgba(79, 70, 229, 0.1);

  /* 간격 */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Radius — 더 부드럽게 */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-full: 999px;

  /* 타이포 */
  --f-base: 'Pretendard', 'Inter', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --f-display: 'Pretendard', 'Inter', system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', 'D2Coding', 'SF Mono', Consolas, monospace;
  --f-size-xs: 11px;
  --f-size-sm: 13px;
  --f-size-base: 14px;
  --f-size-md: 15px;
  --f-size-lg: 17px;
  --f-size-xl: 20px;
  --f-size-2xl: 24px;
  --f-size-3xl: 30px;
  --f-size-4xl: 38px;
  --f-size-5xl: 48px;
  --f-size-6xl: 60px;
  --f-weight-normal: 400;
  --f-weight-medium: 500;
  --f-weight-semibold: 600;
  --f-weight-bold: 700;
  --f-weight-extrabold: 800;
  --f-line-tight: 1.2;
  --f-line-snug: 1.35;
  --f-line-base: 1.55;
  --f-line-relaxed: 1.75;
  --f-tracking-tight: -0.022em;     /* display size 용 */
  --f-tracking-snug: -0.012em;
  --f-tracking-base: 0;
  --f-tracking-wide: 0.06em;        /* UPPERCASE / 라벨 용 */

  /* z-index */
  --z-base: 0;
  --z-sticky: 100;
  --z-modal: 1000;
  --z-toast: 2000;
  --z-tooltip: 3000;

  /* 전환 — spring-like easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);          /* easeOutExpo — pop */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-fast: 0.12s var(--ease-out);
  --transition-base: 0.18s var(--ease-out);
  --transition-slow: 0.28s var(--ease-out);

  /* Blur — frosted glass */
  --blur-sm: blur(8px);
  --blur-md: blur(16px);
  --blur-lg: blur(24px);

  /* ─── Cyber 토큰 (2026-06-24 사이버 디자인 시스템) ────────
     설계 의도: Sci-Fi 인디고+시안 액센트 + glassmorphism 강화 + 그리드 패턴.
                Linear/Vercel 의 "calm modern" 베이스 위에 사이버 액센트 한 점.
     사용 위치: hero, CTA, focus ring, hover glow, 사이드바 active 라인. */
  --c-cyber-cyan: #06b6d4;             /* cyan-500 — sci-fi 액센트 */
  --c-cyber-cyan-strong: #22d3ee;      /* cyan-400 — 글로우 강조 */
  --c-cyber-magenta: #d946ef;          /* fuchsia-500 — 보조 액센트 (희소) */
  --c-cyber-indigo: #6366f1;           /* indigo-500 — primary glow */

  --grad-cyber: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
  --grad-cyber-vivid: linear-gradient(135deg, #6366f1 0%, #22d3ee 100%);
  --grad-cyber-soft: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(6, 182, 212, 0.12) 100%);
  --grad-cyber-hero: linear-gradient(135deg, #4f46e5 0%, #7c3aed 40%, #06b6d4 100%);

  /* Glow shadows — focus/hover 시 사이버 글로우 */
  --shadow-glow-cyan: 0 0 0 1px rgba(6, 182, 212, 0.36), 0 0 20px rgba(6, 182, 212, 0.22);
  --shadow-glow-indigo: 0 0 0 1px rgba(99, 102, 241, 0.36), 0 0 20px rgba(99, 102, 241, 0.22);
  --shadow-glow-soft: 0 0 24px rgba(99, 102, 241, 0.18);
  --shadow-glow-strong: 0 0 0 1px rgba(99, 102, 241, 0.5), 0 0 32px rgba(99, 102, 241, 0.35), 0 0 8px rgba(6, 182, 212, 0.3);

  /* 사이버 그리드 배경 패턴 — 미세 라인 */
  --cyber-grid-bg: linear-gradient(rgba(99, 102, 241, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 102, 241, 0.04) 1px, transparent 1px);
  --cyber-grid-size: 32px 32px;

  /* 사이버 보더 — 그라데이션 보더 illusion */
  --cyber-border-glow: rgba(99, 102, 241, 0.28);
  --cyber-border-glow-strong: rgba(99, 102, 241, 0.55);
}

/* ─── 다크 ────────────────────────────────────────────────── */
[data-theme='dark'] {
  --c-primary: #818cf8;             /* indigo-400 */
  --c-primary-hover: #a5b4fc;
  --c-primary-active: #c7d2fe;
  --c-primary-bg: rgba(129, 140, 248, 0.15);
  --c-primary-bg-strong: rgba(129, 140, 248, 0.22);
  --c-accent: #a78bfa;
  --c-accent-bg: rgba(167, 139, 250, 0.15);

  --grad-brand: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(99, 102, 241, 0.18) 0%, rgba(139, 92, 246, 0.18) 100%);

  --c-success: #34d399;
  --c-success-bg: rgba(52, 211, 153, 0.15);
  --c-success-bg-strong: rgba(52, 211, 153, 0.22);
  --c-warn: #fbbf24;
  --c-warn-bg: rgba(251, 191, 36, 0.15);
  --c-warn-bg-strong: rgba(251, 191, 36, 0.22);
  --c-danger: #f87171;
  --c-danger-bg: rgba(248, 113, 113, 0.15);
  --c-danger-bg-strong: rgba(248, 113, 113, 0.22);
  --c-info: #22d3ee;
  --c-info-bg: rgba(34, 211, 238, 0.15);
  --c-info-bg-strong: rgba(34, 211, 238, 0.22);

  /* [cyber 2026-06-25 v4] 표면 — 다크 5-Layer.
     설계 의도: v3 에서 콘텐츠(#232e44)와 카드(#2d3954) 명도차가 ~10 으로 너무 좁아
     카드가 배경에 묻혀 구분이 안 됨(사용자 지적). 콘텐츠 bg 를 한 단계 더 어둡게 내려
     카드(Layer 5)가 명확히 떠오르도록 차등(명도차 ~20)을 확보한다. 카드 값은 유지.
     Layer 1 (rail)      : #06090d  ← 거의 검정 (그대로)
     Layer 2 (topbar)    : #0b1019 0.92  ← cool dark (그대로)
     Layer 3 (sidebar)   : #0e1525  ← 인디고 톤 (그대로)
     Layer 4 (콘텐츠 bg) : #232e44 → #1a2336  ← 더 어둡게 ★ (카드와 대비 ↑)
     Layer 5 (카드)      : #2d3954  ← 유지 (콘텐츠 대비 확실히 떠오름) */
  --c-bg: #1a2336;                 /* 콘텐츠 — 더 어둡게 (v4, 카드 대비 강화) */
  --c-bg-subtle: #212b42;
  --c-sidebar-bg: #0e1525;         /* sidebar — 변경 X */
  --c-topbar-bg: rgba(11, 16, 25, 0.92);  /* topbar — 변경 X */
  --c-topbar-border: rgba(255, 255, 255, 0.06);
  --c-card: #2d3954;               /* 카드 — 컨텐츠 보다 한 단계 밝게 */
  --c-card-hover: #364260;
  --c-card-elev: #384566;
  --c-border: #3a4566;
  --c-border-strong: #545f80;
  --c-divider: #303c54;
  /* [v4 row 구분] 다크 모드 — 더 진한 라인 + 명확한 hover */
  --c-row-line: #232a36;           /* 행 사이 라인 (border 와 동일 톤) */
  --c-row-hover-bg: #1f2632;       /* hover 행 배경 */
  --c-row-hover-bar: var(--c-primary);
  --c-row-zebra: transparent;
  --c-overlay: rgba(0, 0, 0, 0.7);

  --c-rail-bg: #06090d;
  --c-rail-fg: #64748b;
  --c-rail-fg-hover: #f1f5f9;
  --c-rail-btn-hover: #1a1f2e;
  --c-rail-divider: #1a1f2e;
  --c-rail-active-bg: rgba(129, 140, 248, 0.2);
  --c-rail-active-fg: #a5b4fc;
  --c-rail-active-bar: #818cf8;

  --c-bg-elev: var(--c-rail-bg);

  --c-fg: #e2e8f0;
  --c-fg-strong: #f8fafc;
  --c-fg-mute: #94a3b8;
  --c-fg-subtle: #64748b;
  --c-fg-on-primary: #0f172a;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.7);
  --shadow-focus: 0 0 0 3px rgba(129, 140, 248, 0.28);
  --shadow-hover-ring: 0 0 0 1px rgba(129, 140, 248, 0.22), 0 4px 12px rgba(129, 140, 248, 0.12);

  /* [2026-06-24] 다크 모드 사이버 토큰 — 글로우 더 강하게 */
  --c-cyber-cyan: #22d3ee;
  --c-cyber-cyan-strong: #67e8f9;
  --c-cyber-magenta: #e879f9;
  --c-cyber-indigo: #818cf8;

  --grad-cyber: linear-gradient(135deg, #6366f1 0%, #22d3ee 100%);
  --grad-cyber-vivid: linear-gradient(135deg, #818cf8 0%, #67e8f9 100%);
  --grad-cyber-soft: linear-gradient(135deg, rgba(99, 102, 241, 0.18) 0%, rgba(34, 211, 238, 0.18) 100%);
  --grad-cyber-hero: linear-gradient(135deg, #6366f1 0%, #a855f7 40%, #22d3ee 100%);

  --shadow-glow-cyan: 0 0 0 1px rgba(34, 211, 238, 0.45), 0 0 24px rgba(34, 211, 238, 0.32);
  --shadow-glow-indigo: 0 0 0 1px rgba(129, 140, 248, 0.45), 0 0 24px rgba(129, 140, 248, 0.32);
  --shadow-glow-soft: 0 0 32px rgba(129, 140, 248, 0.22);
  --shadow-glow-strong: 0 0 0 1px rgba(129, 140, 248, 0.6), 0 0 40px rgba(129, 140, 248, 0.4), 0 0 12px rgba(34, 211, 238, 0.35);

  /* [v2] 콘텐츠 배경이 #1a2230 으로 밝아져 그리드는 미묘하게 — opacity 8% → 5% */
  --cyber-grid-bg: linear-gradient(rgba(99, 102, 241, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 102, 241, 0.05) 1px, transparent 1px);

  --cyber-border-glow: rgba(129, 140, 248, 0.3);
  --cyber-border-glow-strong: rgba(129, 140, 248, 0.55);
}

/* ─── 시스템 추종 ──────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
  }
}

/* ─── 글로벌 reset / 기본 ─────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: var(--f-base);
  font-size: var(--f-size-base);
  line-height: var(--f-line-base);
  color: var(--c-fg);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  /* CJK 자간 미세 조정 */
  word-break: keep-all;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-fg);
  transition:
    background var(--transition-base),
    color var(--transition-base);
}

a {
  color: var(--c-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover {
  color: var(--c-primary-hover);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--c-fg-strong);
  font-weight: var(--f-weight-bold);
  line-height: var(--f-line-tight);
  letter-spacing: var(--f-tracking-snug);
  margin: 0 0 var(--space-3);
}
h1 {
  font-size: var(--f-size-3xl);
  letter-spacing: var(--f-tracking-tight);
  font-weight: var(--f-weight-extrabold);
}
h2 { font-size: var(--f-size-2xl); font-weight: var(--f-weight-semibold); }
h3 { font-size: var(--f-size-xl);  font-weight: var(--f-weight-semibold); }
h4 { font-size: var(--f-size-lg); }

p { margin: 0 0 var(--space-3); }

code,
pre {
  font-family: var(--f-mono);
  font-size: 0.92em;
}
code {
  background: var(--c-primary-bg);
  color: var(--c-primary);
  padding: 1px 6px;
  border-radius: var(--r-xs);
  font-weight: var(--f-weight-medium);
}
pre {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  padding: var(--space-4);
  border-radius: var(--r-md);
  overflow-x: auto;
  line-height: var(--f-line-base);
}

hr {
  border: none;
  border-top: 1px solid var(--c-border);
  margin: var(--space-6) 0;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* [fix 2026-06-27] 모든 select 가독성 — color:inherit(다크 전경=흰색) + 네이티브 기본 밝은 배경
   조합으로 글자가 안 보이던 문제. 다크 토큰으로 배경/글자 명시 + option 드롭다운도 지정.
   (.form-select 등 클래스 스타일은 더 높은 specificity 라 그대로 유지) */
select {
  background-color: var(--c-bg);
  color: var(--c-fg);
}
select option,
select optgroup {
  background-color: var(--c-card);
  color: var(--c-fg);
}
button {
  cursor: pointer;
  background: none;
  border: none;
}

::selection {
  background: var(--c-primary-bg-strong);
  color: var(--c-fg-strong);
}

/* 접근성 */
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* 인쇄 */
@media print {
  body { background: white; color: black; }
  a { color: black; text-decoration: underline; }
}

/* 스크롤바 — 모던 미니멀 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: var(--r-full); border: 2px solid var(--c-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--c-fg-subtle); }