/* ============================================================================ * 디자인 토큰 (Design Tokens) — CSS 변수 단일 소스 * ---------------------------------------------------------------------------- * 모든 도메인(표지 HTML→PDF · 상세페이지 · 랜딩/웹)에서 import 해 재사용. * 동일 값 JSON: ./tokens.json * 출처/근거: ../raw/2026-06-20_design-tokens.md * * 토큰 계층: * 1) Primitive (원시값) : --ds-color-blue-500, --ds-size-16 ... * 2) Semantic (의미값) : --ds-text, --ds-bg, --ds-primary ... * 3) Component (컴포넌트): 각 템플릿에서 semantic 을 참조해 정의 * ============================================================================ */ :root { /* ========================================================================== * 1. 타이포그래피 * - 본문 베이스 16px. 모듈러 스케일 비율 1.25 (Major Third). * - 16 / 1.25^n 으로 단계 산출 → rem 으로 표기 (1rem = 16px). * ========================================================================== */ /* 폰트 패밀리 (한글 우선 + 시스템 폴백) */ --ds-font-sans: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ds-font-serif: "Noto Serif KR", "Nanum Myeongjo", Georgia, serif; --ds-font-mono: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace; /* 폰트 크기 스케일 (Major Third 1.25, base 16px) */ --ds-text-xs: 0.64rem; /* 10.24px — 캡션/라벨 보조 */ --ds-text-sm: 0.8rem; /* 12.8px — 캡션/메타 */ --ds-text-base: 1rem; /* 16px — 본문 기준 */ --ds-text-lg: 1.25rem; /* 20px — 리드 문단 */ --ds-text-xl: 1.563rem; /* 25px — h4 */ --ds-text-2xl: 1.953rem; /* 31.25px — h3 */ --ds-text-3xl: 2.441rem; /* 39px — h2 */ --ds-text-4xl: 3.052rem; /* 48.8px — h1 */ --ds-text-5xl: 3.815rem; /* 61px — 디스플레이/표지 */ /* 폰트 굵기 (4단계 권장) */ --ds-weight-regular: 400; --ds-weight-medium: 500; --ds-weight-semibold: 600; --ds-weight-bold: 700; /* 행간 (line-height) — 한글은 영문보다 높게 (1.6~1.8) */ --ds-leading-tight: 1.25; /* 큰 제목 */ --ds-leading-snug: 1.4; /* 소제목 */ --ds-leading-normal: 1.6; /* 한글 본문 기본 */ --ds-leading-relaxed: 1.75; /* 긴 한글 지문(가독성 우선) */ /* 자간 (letter-spacing) — 한글 본문은 살짝 좁게(-0.01~-0.02em) */ --ds-tracking-tighter: -0.02em; /* 큰 한글 제목 */ --ds-tracking-tight: -0.01em; /* 한글 본문 기본 */ --ds-tracking-normal: 0; /* 영문/숫자 */ --ds-tracking-wide: 0.02em; /* 영문 대문자 라벨 */ /* ========================================================================== * 2. 스페이싱 (4/8pt 그리드) * - 4px 기본 단위, 8 배수 위주. 작은 간격만 4·12 사용. * ========================================================================== */ --ds-space-0: 0; --ds-space-1: 0.25rem; /* 4px */ --ds-space-2: 0.5rem; /* 8px */ --ds-space-3: 0.75rem; /* 12px */ --ds-space-4: 1rem; /* 16px */ --ds-space-5: 1.5rem; /* 24px */ --ds-space-6: 2rem; /* 32px */ --ds-space-7: 2.5rem; /* 40px */ --ds-space-8: 3rem; /* 48px */ --ds-space-9: 4rem; /* 64px */ --ds-space-10: 5rem; /* 80px */ --ds-space-11: 6rem; /* 96px */ --ds-space-12: 8rem; /* 128px */ /* ========================================================================== * 3. 색 시스템 (Primitive) * - 명도 단계 50~900. 60-30-10 비율로 운용(배경60/보조30/포인트10). * ========================================================================== */ /* 중립 (Neutral / Gray) — 배경·텍스트·보더 60+30% */ --ds-gray-50: #f8fafc; --ds-gray-100: #f1f5f9; --ds-gray-200: #e2e8f0; --ds-gray-300: #cbd5e1; --ds-gray-400: #94a3b8; --ds-gray-500: #64748b; --ds-gray-600: #475569; --ds-gray-700: #334155; --ds-gray-800: #1e293b; --ds-gray-900: #0f172a; /* 주조색 (Primary / Blue) — 포인트 10% */ --ds-blue-50: #eff6ff; --ds-blue-100: #dbeafe; --ds-blue-300: #93c5fd; --ds-blue-500: #3b82f6; --ds-blue-600: #2563eb; /* primary 기본 (흰 글자 대비 AA 통과) */ --ds-blue-700: #1d4ed8; --ds-blue-900: #1e3a8a; /* 시맨틱 상태색 (Status) */ --ds-green-500: #16a34a; /* success */ --ds-amber-500: #d97706; /* warning */ --ds-red-500: #dc2626; /* danger/error */ --ds-sky-500: #0284c7; /* info */ /* ----- Semantic (의미 토큰) ----- */ --ds-bg: #ffffff; /* 60% 도미넌트 배경 */ --ds-bg-subtle: var(--ds-gray-50); --ds-surface: var(--ds-gray-100); /* 30% 보조 면(카드/내비) */ --ds-border: var(--ds-gray-200); --ds-border-strong: var(--ds-gray-300); --ds-text: var(--ds-gray-900); /* 본문 (흰 배경 대비 AAA) */ --ds-text-muted: var(--ds-gray-500); /* 보조 텍스트 (대비 AA) */ --ds-text-inverse: #ffffff; --ds-primary: var(--ds-blue-600); /* 10% 포인트 (CTA/링크) */ --ds-primary-hover: var(--ds-blue-700); --ds-primary-subtle: var(--ds-blue-50); --ds-on-primary: #ffffff; --ds-success: var(--ds-green-500); --ds-warning: var(--ds-amber-500); --ds-danger: var(--ds-red-500); --ds-info: var(--ds-sky-500); /* ========================================================================== * 4. 라운드 / 보더 / 그림자(엘리베이션) * ========================================================================== */ /* Border radius */ --ds-radius-none: 0; --ds-radius-sm: 0.25rem; /* 4px */ --ds-radius-md: 0.5rem; /* 8px */ --ds-radius-lg: 0.75rem; /* 12px */ --ds-radius-xl: 1rem; /* 16px */ --ds-radius-2xl: 1.5rem; /* 24px */ --ds-radius-full: 9999px; /* pill/원형 */ /* Border width */ --ds-border-width: 1px; --ds-border-width-thick: 2px; /* Elevation (그림자) — Material 의 0/1/2/3/4 단계 매핑 */ --ds-shadow-none: none; --ds-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.10); /* 카드 기본 */ --ds-shadow-2: 0 2px 4px rgba(15, 23, 42, 0.06), 0 4px 8px rgba(15, 23, 42, 0.10); /* 떠 있는 카드 */ --ds-shadow-3: 0 6px 12px rgba(15, 23, 42, 0.08), 0 10px 20px rgba(15, 23, 42, 0.12); /* 드롭다운/팝오버 */ --ds-shadow-4: 0 12px 24px rgba(15, 23, 42, 0.10), 0 20px 40px rgba(15, 23, 42, 0.16); /* 모달/다이얼로그 */ /* ========================================================================== * 5. 레이아웃 토큰 (컨테이너 / 브레이크포인트) * - 브레이크포인트는 미디어쿼리에서 직접 사용 (CSS 변수는 @media 불가). * - 컨테이너 max-width 는 변수로 사용 가능. * ========================================================================== */ --ds-container-sm: 640px; --ds-container-md: 768px; --ds-container-lg: 1024px; --ds-container-xl: 1280px; --ds-container-2xl: 1440px; --ds-gutter: var(--ds-space-4); /* 좌우 기본 패딩 16px */ --ds-gutter-lg: var(--ds-space-6); /* 넓은 화면 32px */ /* 브레이크포인트 참고값 (@media 에 직접 입력) * sm: 640px / md: 768px / lg: 1024px / xl: 1280px / 2xl: 1536px */ /* ========================================================================== * 6. 기타 (z-index / motion) * ========================================================================== */ --ds-z-base: 0; --ds-z-dropdown: 1000; --ds-z-sticky: 1100; --ds-z-overlay: 1200; --ds-z-modal: 1300; --ds-z-toast: 1400; --ds-duration-fast: 120ms; --ds-duration-base: 200ms; --ds-duration-slow: 320ms; --ds-ease: cubic-bezier(0.4, 0, 0.2, 1); } /* ---------------------------------------------------------------------------- * 다크 모드 (semantic 만 재정의 — primitive·스케일은 불변) * -------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root { --ds-bg: var(--ds-gray-900); --ds-bg-subtle: var(--ds-gray-800); --ds-surface: var(--ds-gray-800); --ds-border: var(--ds-gray-700); --ds-border-strong: var(--ds-gray-600); --ds-text: var(--ds-gray-50); --ds-text-muted: var(--ds-gray-400); --ds-text-inverse: var(--ds-gray-900); --ds-primary: var(--ds-blue-500); --ds-primary-hover: var(--ds-blue-300); --ds-primary-subtle: var(--ds-blue-900); } }