/* ============================================================ HIARC Design Tokens — CSS Custom Properties Figma 파일: 8IVwudyngJw7O5isuozZ6U (추출일: 2026-03-03) SCSS 소스: public/scss/tokens/ ============================================================ */ /* ── Google Fonts: Inter ─────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;500;600;700;900&display=swap'); /* ── 기본 토큰 (:root) ────────────────────────────────────── */ :root { /* 색상 — 원시값 */ --color-black: #000000; --color-white: #FFFFFF; --color-accent: #CBAFF9; /* 라벤더 포인트 (연도별 오버라이드) */ --color-orange: #FF753E; /* 오렌지 강조 */ --color-gray-200: #C4C4C4; --color-gray-100: #D9D9D9; --color-gray-50: #E7E7E7; --color-error: #FB0101; /* 색상 — 시맨틱 */ --color-bg: var(--color-white); --color-bg-inverse: var(--color-black); --color-text: var(--color-black); --color-text-inverse: var(--color-white); --color-text-muted: var(--color-gray-200); --color-border: var(--color-black); --color-border-light: var(--color-gray-100); --color-highlight: var(--color-accent); --color-cta: var(--color-orange); /* 폰트 패밀리 */ --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* 폰트 크기 */ --fs-10: 10px; --fs-12: 12px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-32: 32px; --fs-36: 36px; --fs-56: 56px; /* 폰트 웨이트 */ --fw-light: 300; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 900; /* 라인 헤이트 */ --lh-tight: 1.0; --lh-heading: 1.1; --lh-snug: 1.2; --lh-normal: 1.45; --lh-relaxed: 1.6; /* 레터 스페이싱 */ --ls-tightest: -0.4px; --ls-tighter: -0.32px; --ls-tight: -0.16px; --ls-snug: -0.12px; --ls-normal: -0.09px; --ls-wide: 0; /* 스페이싱 */ --spacing-xs: 6px; --spacing-sm: 8px; --spacing-10: 10px; --spacing-12: 12px; --spacing-13: 13px; --spacing-15: 15px; --spacing-md: 16px; --spacing-20: 20px; --spacing-lg: 24px; --spacing-25: 25px; --spacing-30: 30px; --spacing-32: 32px; --spacing-35: 35px; --spacing-xl: 40px; --spacing-45: 45px; --spacing-48: 48px; --spacing-50: 50px; --spacing-60: 60px; --spacing-2xl: 64px; --spacing-72: 72px; --spacing-80: 80px; --spacing-90: 90px; --spacing-3xl: 96px; --spacing-4xl: 120px; --spacing-200: 200px; --spacing-210: 210px; --spacing-240: 240px; /* 그림자 */ --shadow-sm: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); /* 보더 반지름 */ --radius-none: 0px; --radius-sm: 8px; /* 보더 굵기 */ --border-thin: 0.75px; --border-base: 1px; --border-medium: 2px; --border-thick: 3px; /* 레이아웃 */ --container: 960px; --header-height: 150px; /* 컴포넌트 */ --card-width: 300px; --card-height: 326px; --thumbnail-width: 360px; --thumbnail-height: 245px; } /* ── 연도별 테마 오버라이드 ──────────────────────────────────── */ /* 사용법: */ .theme-2020 { --color-accent: #CBAFF9; } .theme-2021 { --color-accent: #CBAFF9; } .theme-2022 { --color-accent: #CBAFF9; } .theme-2023 { --color-accent: #CBAFF9; } .theme-2024 { --color-accent: #CBAFF9; } .theme-2025 { --color-accent: #FF753E; } /* ── 다크 테마 (전시 랜딩) ───────────────────────────────────── */ .theme-dark { --color-bg: #000000; --color-bg-inverse: #FFFFFF; --color-text: #FFFFFF; --color-text-inverse: #000000; --color-border: #FFFFFF; --color-border-light: rgba(255, 255, 255, 0.2); } /* ── 태블릿 (≤800px) ──────────────────────────────────────── */ @media (max-width: 800px) { :root { --container: 728px; --header-height: 64px; --card-width: 250px; } } /* ── 모바일 (≤375px) ──────────────────────────────────────── */ @media (max-width: 375px) { :root { --container: 327px; --header-height: 56px; } } /* ── 타이포그래피 유틸리티 클래스 ──────────────────────────────── */ .text-brand-display { font-family: var(--font-base); font-size: var(--fs-56); font-weight: var(--fw-extrabold); line-height: var(--lh-heading); letter-spacing: var(--ls-wide); } .text-page-hero { font-family: var(--font-base); font-size: var(--fs-36); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: -0.9px; } .text-page-heading { font-family: var(--font-base); font-size: var(--fs-32); font-weight: var(--fw-bold); line-height: var(--lh-normal); letter-spacing: var(--ls-tight); } .text-section-title { font-family: var(--font-base); font-size: var(--fs-24); font-weight: var(--fw-bold); line-height: var(--lh-normal); letter-spacing: var(--ls-snug); } .text-sub-heading { font-family: var(--font-base); font-size: var(--fs-24); font-weight: var(--fw-semibold); line-height: var(--lh-relaxed); letter-spacing: var(--ls-snug); } .text-card-title { font-family: var(--font-base); font-size: var(--fs-20); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-tightest); } .text-body-large { font-family: var(--font-base); font-size: var(--fs-20); font-weight: var(--fw-medium); line-height: var(--lh-relaxed); letter-spacing: -0.1px; } .text-body { font-family: var(--font-base); font-size: var(--fs-18); font-weight: var(--fw-medium); line-height: var(--lh-normal); letter-spacing: var(--ls-normal); } .text-nav-link { font-family: var(--font-base); font-size: var(--fs-18); font-weight: var(--fw-bold); line-height: var(--lh-normal); letter-spacing: var(--ls-normal); text-transform: uppercase; } .text-label-large { font-family: var(--font-base); font-size: var(--fs-16); font-weight: var(--fw-bold); line-height: var(--lh-normal); letter-spacing: -0.08px; } .text-label { font-family: var(--font-base); font-size: var(--fs-16); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--ls-tighter); } .text-caption { font-family: var(--font-base); font-size: var(--fs-12); font-weight: var(--fw-bold); line-height: var(--lh-normal); letter-spacing: -0.24px; } .text-badge { font-family: var(--font-base); font-size: var(--fs-10); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: -0.2px; }