:root { /* ============================================================ Brand colors — Pantone Coated standards Navy: Pantone 2766 C → #141B4D (20, 27, 77) Gold: Pantone 7407 C → #C79B4D (199, 155, 77) ============================================================ */ /* Base RGB triplets — single source of truth for brand colors. All alpha variants below derive from these via rgba(). */ --color-primary-rgb: 20, 27, 77; --color-accent-rgb: 199, 155, 77; --color-white-rgb: 255, 255, 255; --color-paper-rgb: 243, 246, 248; /* = --color-paper. 사진 위 반투명 패널용 */ /* Primary scale (Navy) */ --color-primary: #141B4D; --color-primary-dark: #070D2D; --color-primary-light: rgba(var(--color-primary-rgb), 0.08); --color-primary-soft: rgba(var(--color-primary-rgb), 0.04); /* Accent scale (Gold) — 텍스트 골드 기본. #8A6C2E는 페이퍼(#F7F4EE) 위 4.49:1로 AA 미달이라 한 단계 진한 #7A5F28(5.5:1)을 쓴다. 채움은 --color-accent-fill. */ /* 다크 아일랜드가 --color-accent를 채움 골드로 덮는 구간(cta-strip 등) 안에서 밝은 카드가 텍스트 골드로 되돌아올 때 참조할 기준값 */ --color-accent-base: #7A5F28; --color-accent: var(--color-accent-base); --color-accent-dark: #A07F38; --color-accent-on-light: #8A6C2E; /* 흰 배경용 진한 골드 — WCAG AA(4.9:1) */ --color-accent-light: rgba(var(--color-accent-rgb), 0.25); --color-accent-soft: rgba(var(--color-accent-rgb), 0.12); /* Background — 라이트 에디토리얼 정본 (LT2 root 정규화, 2026-07-26). 다크 아일랜드(cta-strip·오버레이·푸터)는 컴포넌트 스코프에서 명시 복원. */ --color-bg: #FFFFFF; --color-bg-soft: #FFFFFF; --color-bg-cream: var(--color-paper-soft); /* Text — 네이비 잉크 */ --color-text: #141B4D; --color-text-body: rgba(var(--color-primary-rgb), 0.84); --color-text-muted: rgba(var(--color-primary-rgb), 0.72); /* 0.62는 페이퍼 위 AA 경계(4.5:1) 미달 */ --color-text-subtle: rgba(var(--color-primary-rgb), 0.44); /* Borders — 네이비 헤어라인 */ --color-border: rgba(var(--color-primary-rgb), 0.16); --color-border-strong: #C79B4D; /* Card context (light bg + dark text) */ --color-white: #FFFFFF; --color-card-bg: #FFFFFF; --color-card-alt: #F2EDE4; --color-card-text: #1A1A2E; --color-card-text-muted: rgba(var(--color-primary-rgb), 0.62); /* Footer (deepest) */ --color-footer-bg: #050925; --color-footer-text: rgba(255,255,255,0.85); --color-footer-text-muted: rgba(255,255,255,0.60); --color-footer-border: rgba(255,255,255,0.10); /* Typography */ --font-sans: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif; --font-serif: 'Cormorant Garamond', Georgia, 'Pretendard', sans-serif; --fs-hero: clamp(2rem, 5vw, 3.5rem); --fs-h1: clamp(1.85rem, 3.4vw, 2.9rem); --fs-h2: clamp(1.5rem, 3vw, 2.375rem); --fs-h3: 1.375rem; --fs-h4: 1.125rem; --fs-body: 1rem; --fs-body-lg: 1.0625rem; --fs-body-sm: 0.9375rem; --fs-small: 0.875rem; --lh-tight: 1.3; --lh-normal: 1.75; /* Spacing (8px scale) */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4rem; --sp-7: 8rem; --sp-8: 11rem; /* 대형 화면 섹션 보이드 — 초미니멀 리듬용 */ /* Radius */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; /* Shadow — 네이비 틴트 라이트 섀도 */ --shadow-sm: 0 1px 3px rgba(var(--color-primary-rgb), 0.10); --shadow-md: 0 6px 20px rgba(var(--color-primary-rgb), 0.12); --shadow-lg: 0 16px 44px rgba(var(--color-primary-rgb), 0.16); /* Container */ --container-max: 1320px; --header-h: 76px; /* 스크롤 후 축소된 헤더 높이 — .site-header.is-scrolled가 이 값으로 줄어든다. 100dvh 기반 풀블리드 섹션이 가시영역을 정확히 채우려면 이 값을 빼야 한다. */ --header-h-compact: 62px; /* ============================================================ Cinematic / motion / glow — added by C1 (atmosphere layer). Future cinematic cycles (C2 scroll bar, C3 header pill, C4 CTA glow, …) extend this block. Brand canon (§3) unchanged. ============================================================ */ --color-glass: #FFFFFF; --color-glass-strong: rgba(255, 255, 255, 0.92); --color-border-soft: rgba(var(--color-primary-rgb), 0.10); --glow-gold: rgba(var(--color-accent-rgb), 0.30); --color-teal: #5BE0C8; --color-teal-rgb: 91, 224, 200; --glow-teal: rgba(var(--color-teal-rgb), 0.45); --ease: cubic-bezier(0.22, 1, 0.36, 1); /* vignette helper — RGB triplets for existing bg tokens so .bg-vignette can use rgba(var(--…-rgb), alpha) without re-introducing hex literals. */ --color-bg-rgb: 10, 17, 50; --color-primary-dark-rgb: 7, 13, 45; /* Display headline alias + cinematic accent colors (C5). 표현 전용 — 브랜드 텍스트 색이 아니다. 디스플레이 폰트 토큰은 H1·섹션 디스플레이 헤드라인 한정(결정 A)이고 본문·UI는 산세리프 유지. 로즈·퍼플 계열은 글로우/그라데이션 레이어(.grad) 전용으로, 카드면·CTA·로고에는 사용 금지(결정 B). */ --font-display: 'Cormorant Garamond', Georgia, 'Pretendard', sans-serif; --color-rose: #F08AA8; --color-purple: #8A6BFF; --color-purple-deep: #6940FF; /* ============================================================ Light-context tokens — theme-light 라이트 에디토리얼 정본(§3, 2026-07-26 전환). 다크 토큰은 다크 아일랜드(cta-strip·오버레이·푸터)용으로 유지. ============================================================ */ --color-paper: #F3F6F8; /* 밝은 미스트 배경 */ --color-paper-soft: #E7EEF2; /* 미스트 딥 스텝 */ --color-cream: #F0E8D7; /* 다크 아일랜드용 크림 텍스트(=다크 정본 --color-text) */ --color-cream-muted: rgba(240, 232, 215, 0.58); --color-accent-fill: #C79B4D; /* 채움용 골드 — 라이트 문맥에서 --color-accent가 진해져도 버튼 채움은 본래 골드 */ } /* 2026 premium redesign: shared layout and display tokens. */ :root { --brand-logo-size: 48px; --pv-gutter: clamp(12px, 2vw, 32px); --pv-radius: 24px; --pv-section-space: clamp(64px, 7.5vw, 110px); --pv-hero-size: clamp(2.7rem, 5.4vw, 5.1rem); --pv-page-size: clamp(2.15rem, 4.3vw, 3.8rem); --editorial-ink: #303431; --editorial-body: #505650; --editorial-muted: #626862; --editorial-paper: #F7F6F2; --editorial-line: #DADCD5; --editorial-accent: #52665E; --editorial-photo-radius: 96px 8px 96px 8px; --editorial-shadow: 0 18px 38px rgba(48, 52, 49, .08); }