/* ============================================================= MY5K 2026 — Design Tokens 브랜드 보존: 오렌지(주 강조) + 스카이블루/옐로(보조·장식만) 접근성: 모든 텍스트 WCAG AA(4.5:1) 검증 / CTA는 AA-safe 딥오렌지 사용 ============================================================= */ :root { /* ── Brand ───────────────────────────────────────────────── 기본값 = 기존 사이트 레드(#E20613). ↩ 오렌지로 되돌리려면 index.html 의 에 data-brand="orange" 추가. (팔레트 정의는 파일 하단 [data-brand] 블록 참고) */ --brand: #E20613; /* 브랜드 강조: 숫자·아이콘·보더·헤드라인 포인트 */ --brand-deep: #E20613; /* CTA 배경 / 흰 글자 (white 대비 4.9:1 AA) */ --brand-hover: #C0050F; --brand-soft: #FDE8EB; /* 틴트 배경 */ --brand-line: #F4C7CD; --blue: #2E90C9; /* 보조: 장식·임팩트 액센트 (CTA에는 사용 금지) */ --blue-soft: #EAF5FC; --yellow: #FFC93C; /* 배지·장식 액센트 */ /* ── Neutral ───────────────────────────────────────────── */ --ink: #1B1815; /* 헤딩 */ --body: #4C463F; /* 본문 (white 대비 9:1) */ --muted: #6E665D; /* 보조 텍스트 (white 대비 4.6:1, AA) */ --line: #ECE6DE; /* 보더·구분선 */ --line-strong: #D9D1C6; --bg: #FFFFFF; --bg-warm: #FAF6F0; /* 섹션 교차 배경 */ --bg-cream: #FBF3EA; --ink-section: #16120F; /* 다크 섹션 (임팩트·갤러리) */ --ink-section-2: #211B16; --on-dark: #FFFFFF; --on-dark-muted: #C9C0B6; /* ── Typography ────────────────────────────────────────── */ --font-display: 'Black Han Sans', 'Pretendard', sans-serif; /* 임팩트 헤드라인·숫자 */ --font-sans: 'Pretendard', 'Apple SD Gothic Neo', system-ui, sans-serif; --font-en: 'Montserrat', 'Pretendard', sans-serif; /* 영문·숫자 강조 */ --font-wm: 'Archivo Black', 'Montserrat', sans-serif; /* My5K 워드마크: 두껍고 비율 정확 */ --text-xs: 0.8125rem; /* 13 */ --text-sm: 0.9375rem; /* 15 */ --text-base: 1.0625rem; /* 17 */ --text-lg: 1.1875rem; /* 19 */ --text-xl: 1.5rem; /* 24 */ --text-2xl: 1.875rem; /* 30 */ --text-3xl: 2.375rem; /* 38 */ --text-4xl: 3rem; /* 48 */ --lh-tight: 1.18; --lh-snug: 1.4; --lh-base: 1.7; /* ── Spacing (4px scale) ───────────────────────────────── */ --space-1: 4px; --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; --space-24: 96px; --space-32: 128px; --section-py: clamp(56px, 8vw, 112px); --container-max: 1200px; --container-px: 24px; /* ── Radius (한 시스템 고정: pill 버튼 / 20px 카드 / 10px 소형) ── */ --r-pill: 999px; --r-card: 20px; --r-lg: 28px; --r-sm: 10px; /* ── Shadow (배경색에 맞춘 따뜻한 톤, 순수 검정 금지) ───── */ --shadow-sm: 0 1px 2px rgba(27,24,21,.06); --shadow-card: 0 10px 30px -12px rgba(27,24,21,.16); --shadow-lift: 0 18px 48px -16px rgba(27,24,21,.24); /* ── Motion ────────────────────────────────────────────── */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: .18s var(--ease); --t-base: .3s var(--ease); /* ── Z-index scale ─────────────────────────────────────── */ --z-header: 100; --z-drawer: 200; --z-skip: 300; } /* ============================================================= BRAND PALETTE SWAP 기본(레드)은 위 :root 에 정의됨. 오렌지로 되돌리기: index.html ============================================================= */ [data-brand="orange"] { --brand: #E85D24; --brand-deep: #CC4A12; /* white 대비 4.6:1 AA */ --brand-hover: #B5400E; --brand-soft: #FFF1E9; --brand-line: #F6D2BF; } [data-brand="red"] { /* 명시적으로 레드 고정하고 싶을 때 */ --brand: #E20613; --brand-deep: #E20613; --brand-hover: #C0050F; --brand-soft: #FDE8EB; --brand-line: #F4C7CD; }