/* ============================================================================ Phoenix v2 · Design Tokens 톤: Stripe/Mercury 프로페셔널 금융 + Linear typography·motion 체계: OKLCH perceptual color + 8pt grid + 4-tier elevation + reduced-motion ============================================================================ */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css'); :root { color-scheme: light; /* ────────────────────────────────────────────────────────────────────────── Color · OKLCH (perceptually uniform). 모든 색은 lightness 단계로 계열 구성. ────────────────────────────────────────────────────────────────────────── Lightness scale (OKLCH L): 50: 0.985 / 100: 0.97 / 200: 0.93 / 300: 0.87 / 400: 0.78 500: 0.66 / 600: 0.54 / 700: 0.42 / 800: 0.32 / 900: 0.22 / 950: 0.14 */ /* Neutrals — slate 계열 (warm-leaning) */ --gray-50: oklch(0.985 0.002 240); --gray-100: oklch(0.97 0.004 240); --gray-150: oklch(0.95 0.005 240); --gray-200: oklch(0.92 0.006 240); --gray-300: oklch(0.86 0.008 240); --gray-400: oklch(0.72 0.010 240); --gray-500: oklch(0.58 0.013 240); --gray-600: oklch(0.46 0.015 245); --gray-700: oklch(0.36 0.017 250); --gray-800: oklch(0.27 0.019 255); --gray-900: oklch(0.18 0.020 260); --gray-950: oklch(0.12 0.022 265); /* Brand — Phoenix Indigo (Stripe-leaning, but cooler & deeper) */ --brand-50: oklch(0.97 0.018 265); --brand-100: oklch(0.94 0.035 265); --brand-200: oklch(0.88 0.065 265); --brand-300: oklch(0.78 0.110 265); --brand-400: oklch(0.66 0.155 265); --brand-500: oklch(0.56 0.180 265); --brand-600: oklch(0.48 0.180 265); --brand-700: oklch(0.40 0.165 265); --brand-800: oklch(0.32 0.135 265); --brand-900: oklch(0.24 0.105 265); /* Accent — Aurora (Layer 6 / 권고 hero 강조) */ --accent-300: oklch(0.84 0.155 60); --accent-400: oklch(0.76 0.175 55); --accent-500: oklch(0.68 0.180 50); --accent-600: oklch(0.58 0.170 45); /* Semantic */ --success-500: oklch(0.66 0.150 152); --success-600: oklch(0.55 0.140 152); --success-50: oklch(0.97 0.025 152); --warn-500: oklch(0.72 0.150 70); --warn-600: oklch(0.62 0.150 60); --warn-50: oklch(0.97 0.030 75); --danger-500: oklch(0.62 0.220 25); --danger-600: oklch(0.54 0.215 25); --danger-50: oklch(0.97 0.025 25); --info-500: oklch(0.66 0.140 230); --info-50: oklch(0.97 0.025 230); /* ────────────────────────────────────────────────────────────────────────── Surface elevation — 4 tier bg(0): 페이지 배경 / surface(1): 카드 / raised(2): hover/popover overlay(3): modal/sheet / inverse: 다크 영역 (sidebar) ────────────────────────────────────────────────────────────────────────── */ --bg-canvas: oklch(0.985 0.003 250); /* 페이지 베이스 */ --bg-subtle: oklch(0.97 0.005 250); /* alt 영역 */ --surface-1: #ffffff; /* 카드 기본 */ --surface-2: #ffffff; /* hover/popover (그림자로 분리) */ --surface-3: #ffffff; /* modal */ --surface-inverse: var(--gray-950); /* sidebar */ --border-subtle: oklch(0.94 0.005 250); /* divider, table row */ --border-default: oklch(0.90 0.006 250); /* 카드 테두리 */ --border-strong: oklch(0.84 0.008 250); /* 인풋 테두리 */ --border-focus: var(--brand-500); /* Text */ --fg-primary: var(--gray-900); --fg-secondary: var(--gray-700); --fg-tertiary: var(--gray-500); --fg-disabled: var(--gray-400); --fg-on-brand: #ffffff; --fg-on-inverse: var(--gray-100); --fg-on-inverse-muted: var(--gray-400); /* ────────────────────────────────────────────────────────────────────────── Typography ────────────────────────────────────────────────────────────────────────── */ --font-sans: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", "Roboto Mono", ui-monospace, monospace; --font-display: var(--font-sans); /* Type scale — 8pt anchored, modular */ --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 15px; --text-lg: 17px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --text-4xl: 38px; /* Line heights — content vs UI */ --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.5; --leading-loose: 1.65; /* Letter spacing */ --tracking-tight: -0.02em; --tracking-tighter: -0.03em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-caps: 0.06em; /* Weights (Pretendard Variable) */ --weight-regular: 420; --weight-medium: 520; --weight-semibold: 620; --weight-bold: 720; /* ────────────────────────────────────────────────────────────────────────── Spacing · 8pt grid (with 4pt half-step) ────────────────────────────────────────────────────────────────────────── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* Radii — Stripe-leaning (slightly soft) */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-full: 999px; /* ────────────────────────────────────────────────────────────────────────── Elevation · 4 tier shadow (Linear/Stripe blend) 단일 색 그림자 + 매우 옅은 ambient ring. 절대 짙게 가지 않음. ────────────────────────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 1px oklch(0.20 0.020 260 / 0.04), 0 0 0 1px oklch(0.20 0.020 260 / 0.04); --shadow-sm: 0 1px 2px oklch(0.20 0.020 260 / 0.05), 0 1px 1px oklch(0.20 0.020 260 / 0.03); --shadow-md: 0 4px 8px -2px oklch(0.20 0.020 260 / 0.06), 0 1px 2px oklch(0.20 0.020 260 / 0.04); --shadow-lg: 0 12px 24px -8px oklch(0.20 0.020 260 / 0.10), 0 4px 8px -2px oklch(0.20 0.020 260 / 0.06); --shadow-xl: 0 24px 48px -12px oklch(0.20 0.020 260 / 0.18); --shadow-focus: 0 0 0 3px oklch(0.56 0.180 265 / 0.18); /* ────────────────────────────────────────────────────────────────────────── Motion · Linear-quality ────────────────────────────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Linear의 시그니처 */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-instant: 80ms; --duration-fast: 140ms; --duration-base: 220ms; --duration-slow: 320ms; /* Z layers */ --z-base: 1; --z-sticky: 10; --z-overlay: 100; --z-modal: 200; --z-toast: 300; } @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } } /* ============================================================================ Base reset · Stripe-leaning ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--fg-primary); background: var(--bg-canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "ss02", "cv11"; /* Pretendard 미세 조정 */ } /* tabular numbers — 모든 숫자 데이터 */ .tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* prose-grade focus visible */ :focus { outline: none; } :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); } /* selection */ ::selection { background: oklch(0.56 0.180 265 / 0.18); color: var(--fg-primary); }