@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* Primary */ --primary: #635BFF; --primary-dark: #4F46E5; --primary-light: #EEECFF; /* Backgrounds */ --bg: #FFFFFF; --bg-page: #F7F7F8; --bg-input: #FAFAFA; --bg-subtle: #F3F4F6; --bg-subtle-hover: #E9EAEC; --bg-hover: #FDFCFF; /* Text */ --text: #111827; --text-secondary: #6B7280; --text-muted: #9CA3AF; /* Border */ --border: #E5E7EB; --border-light: #F3F4F6; /* Shadows */ --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-sm: 0 1px 3px rgba(0,0,0,0.05); --shadow-md: 0 10px 40px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.05); --shadow-hover: 0 8px 24px rgba(0,0,0,0.11), 0 1px 2px rgba(0,0,0,0.04); --shadow-focus: 0 0 0 3px rgba(99,91,255,0.18); /* Semantic */ --green: #059669; --green-light: #ECFDF5; --amber: #D97706; --amber-light: #FFFBEB; --red: #DC2626; --red-light: #FEF2F2; --blue: #2563EB; --blue-light: #EFF6FF; /* Legacy aliases */ --purple: #635BFF; --purple-light: #EEECFF; --teal: #059669; --teal-light: #ECFDF5; /* Gradients */ --gradient-primary: linear-gradient(135deg, #635BFF 0%, #4338CA 100%); --gradient-hero: linear-gradient(160deg, #09091a 0%, #130e3b 45%, #0d0d22 100%); --gradient-text: linear-gradient(135deg, #818CF8 0%, #635BFF 50%, #C7D2FE 100%); --gradient-card-green: linear-gradient(145deg, #f0fdf4 0%, #dcfce7 100%); --gradient-card-amber: linear-gradient(145deg, #fffbeb 0%, #fef3c7 100%); --gradient-card-red: linear-gradient(145deg, #fef2f2 0%, #fee2e2 100%); --gradient-card-purple: linear-gradient(145deg, #f5f3ff 0%, #ede9fe 100%); /* Glow shadows */ --shadow-glow: 0 0 40px rgba(99,91,255,0.22), 0 4px 16px rgba(99,91,255,0.18); --shadow-glow-sm: 0 0 16px rgba(99,91,255,0.18); --shadow-green: 0 4px 14px rgba(16,185,129,0.18); --shadow-amber: 0 4px 14px rgba(245,158,11,0.18); --shadow-red: 0 4px 14px rgba(239,68,68,0.18); /* Radius */ --radius: 8px; --radius-lg: 12px; --radius-xl: 16px; /* Typography */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", monospace; } /* ─────────────────────────────────────────────────────────────────────────── 다크 테마 — 일 때 적용 (theme.js가 관리) ─────────────────────────────────────────────────────────────────────────── */ :root[data-theme="dark"] { --primary-light: #2B2860; /* Backgrounds */ --bg: #181B26; --bg-page: #0F1117; --bg-input: #1D2130; --bg-subtle: #232838; --bg-subtle-hover: #2B3144; --bg-hover: #1D2130; /* Text */ --text: #F3F4F6; --text-secondary: #A6ADBB; --text-muted: #6B7280; /* Border */ --border: #2B3144; --border-light: #232838; /* Shadows — 다크에서는 깊이감만 살짝 */ --shadow-card: 0 1px 3px rgba(0,0,0,0.4); --shadow-sm: 0 1px 3px rgba(0,0,0,0.35); --shadow-md: 0 10px 40px rgba(0,0,0,0.5); --shadow-hover: 0 8px 24px rgba(0,0,0,0.45); --shadow-focus: 0 0 0 3px rgba(99,91,255,0.35); /* Semantic light 배경 → 어두운 톤 */ --green-light: rgba(5,150,105,0.16); --amber-light: rgba(217,119,6,0.16); --red-light: rgba(220,38,38,0.16); --blue-light: rgba(37,99,235,0.16); --purple-light: #2B2860; --teal-light: rgba(5,150,105,0.16); /* Semantic 본색 — 다크 배경 대비 밝게 */ --green: #34D399; --amber: #FBBF24; --red: #F87171; --blue: #60A5FA; /* 카드 그라디언트 다크 버전 */ --gradient-card-green: linear-gradient(145deg, rgba(16,185,129,0.12) 0%, rgba(16,185,129,0.05) 100%); --gradient-card-amber: linear-gradient(145deg, rgba(245,158,11,0.12) 0%, rgba(245,158,11,0.05) 100%); --gradient-card-red: linear-gradient(145deg, rgba(239,68,68,0.12) 0%, rgba(239,68,68,0.05) 100%); --gradient-card-purple: linear-gradient(145deg, rgba(99,91,255,0.14) 0%, rgba(99,91,255,0.06) 100%); } :root[data-theme="dark"] body { color-scheme: dark; } @keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes glow-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } @keyframes page-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .page-enter { animation: page-enter 0.38s cubic-bezier(0.22, 1, 0.36, 1) both; } /* Staggered children */ .page-enter > * { animation: fade-up 0.40s cubic-bezier(0.22, 1, 0.36, 1) both; } .page-enter > *:nth-child(1) { animation-delay: 0.04s; } .page-enter > *:nth-child(2) { animation-delay: 0.08s; } .page-enter > *:nth-child(3) { animation-delay: 0.12s; } .page-enter > *:nth-child(4) { animation-delay: 0.16s; } .page-enter > *:nth-child(5) { animation-delay: 0.20s; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-sans); background: var(--bg-page); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; } /* ─────────────────────────────────────────────────────────────────────────── 반응형 — 공통 ─────────────────────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .container { padding: 0 16px; } }