/* ============================================================= * 디자인 토큰 — 단일 진실 공급원의 CSS 구현. * * 출처: DESIGN-TOKENS.md * 모든 색·폰트·간격·radius·shadow·breakpoint 값은 이 파일의 :root * (또는 @media :root) 변수로만 정의한다. * 새 값이 필요해지면 DESIGN-TOKENS.md 부터 갱신 → 이 파일 동기화. * * prefix: --ws- * ============================================================= */ :root { /* ============================================================ * 1. Color * ============================================================ */ /* Primary / Brand — 강조색은 primary 하나로 통일 */ --ws-color-primary: #575FB8; /* Text */ --ws-color-text: #242424; /* 본문 텍스트 (가장 짙음) */ --ws-color-text-2: #2E2E2E; /* 카드 제목 */ --ws-color-text-muted: #B9C6D3; /* 서브카피 */ --ws-color-text-mute2: #7E7E7E; /* 푸터·캡션 */ --ws-color-text-mute3: #A3B0BC; /* CTA 어두운 배경 위 라벨 */ --ws-color-text-grey: #A1A1A1; /* 카드 설명, 블로그 리스트 설명 */ --ws-color-text-beige: #877F74; /* No image placeholder 텍스트 (Figma: Text/Txt_beige3) */ --ws-color-text-white: #FFFFFF; /* Accent 2 — 블로그 카테고리 드롭다운 1차 hover (Figma: Accent/Accent2). primary 와 별개. */ --ws-color-accent-2: #E6756C; /* Background */ --ws-color-bg: #FFFFFF; --ws-color-bg-alt: #EFF6FB; /* 섹션 분리 (메인 섹션2 배경) */ --ws-color-bg-tag: #F1F1F1; /* 태그 기본 배경 */ --ws-color-bg-img: #515151; /* 이미지 placeholder 배경 */ --ws-color-bg-nav: rgba(255, 255, 255, 0.7); --ws-color-overlay: rgba(0, 0, 0, 0.6); /* Border */ --ws-color-border: #E6E6E6; --ws-color-border-2: #E5E2D9; /* 모바일 헤더 하단 보더 */ --ws-color-border-dark: #424242; /* 푸터 상단 보더 */ /* CTA theme — 텍스트 색만 분기 (light/dark 수동 선택, 기본 light) */ --ws-cta-light-label: var(--ws-color-text-muted); --ws-cta-light-title: var(--ws-color-text); --ws-cta-dark-label: var(--ws-color-text-mute3); --ws-cta-dark-title: var(--ws-color-text-white); /* ============================================================ * 2. Typography * ============================================================ */ /* Font family */ --ws-font-display: 'GyeonggiMillenniumTitle', 'Pretendard', sans-serif; --ws-font-body: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif; /* Font size — PC defaults (Mobile 은 아래 @media 에서 덮어씀) */ --ws-fs-h1: 48px; --ws-fs-h2: 40px; --ws-fs-h3: 24px; --ws-fs-h4: 18px; --ws-fs-cta: 28px; /* CTA 배너 메인 타이틀 */ --ws-fs-subtitle: 20px; --ws-fs-menu: 17px; --ws-fs-menu-mobile: 22px; /* Mobile 햄버거 드로어 메뉴 — PC와 별도 토큰 */ --ws-fs-link: 16px; --ws-fs-category: 16px; --ws-fs-body-1: 17px; /* 긴 문단 (블로그 본문, 푸터 회사정보) */ --ws-fs-body-2: 15px; /* 짧은 카드 설명 */ --ws-fs-body-hero: 17px; --ws-fs-caption: 13px; --ws-fs-pagination: 18px; --ws-fs-table-title: 18px; /* Font weight */ --ws-fw-regular: 400; --ws-fw-medium: 500; --ws-fw-bold: 700; /* Line height */ --ws-lh-tight: 1.2; --ws-lh-snug: 1.3; --ws-lh-base: 1.4; --ws-lh-relaxed: 1.5; --ws-lh-loose: 1.6; /* Letter spacing */ --ws-ls-tight: -0.04em; --ws-ls-normal: -0.005em; --ws-ls-base: -0.03em; /* ============================================================ * 3. Spacing (4px 기반) * ============================================================ */ --ws-space-1: 4px; --ws-space-2: 8px; --ws-space-3: 12px; --ws-space-4: 16px; --ws-space-5: 20px; --ws-space-6: 24px; --ws-space-7: 28px; --ws-space-8: 32px; --ws-space-9: 40px; --ws-space-10: 48px; --ws-space-11: 60px; --ws-space-12: 80px; /* ============================================================ * 4. Layout * ============================================================ */ --ws-layout-max: 1280px; --ws-container-pad-pc: 40px; /* ★ .ws-container 좌우 padding (≥768) — 전 섹션 공통 */ --ws-container-pad-mobile: 20px; /* ★ .ws-container 좌우 padding (<768) — 전 섹션 공통 */ --ws-layout-gutter-pc: 320px; /* (구) — 직접 사용 ❌ */ --ws-layout-gutter-mobile: 20px; /* (구) — 신규 코드는 --ws-container-pad-mobile */ --ws-layout-gutter-mobile-hero: 24px; /* (구) — 신규 코드는 --ws-container-pad-mobile 통일 */ --ws-header-h: 80px; --ws-header-h-mobile: 72px; /* ============================================================ * 5. Radius * ============================================================ */ --ws-radius-sm: 4px; /* 작은 썸네일 */ --ws-radius-md: 8px; /* 버튼 */ --ws-radius-lg: 12px; /* 카드, hero, CTA 배너 */ --ws-radius-xl: 20px; /* 후기 카드 */ --ws-radius-pill: 100px; /* 태그 pill */ --ws-radius-circle: 50%; /* ============================================================ * 6. Shadow & Effect * 카드 hover 는 4 변수로 일괄 관리. * ============================================================ */ --ws-blur-nav: 20px; --ws-blur-overlay: 50px; --ws-shadow-card: none; --ws-shadow-card-hover: 0 6px 16px rgba(0, 0, 0, 0.08); --ws-card-hover-translate: -3px; --ws-card-hover-transition: transform 200ms ease-out, box-shadow 200ms ease-out; /* ============================================================ * 7. Z-index * ============================================================ */ --ws-z-base: 0; --ws-z-sticky: 100; --ws-z-floating: 500; --ws-z-overlay: 900; --ws-z-modal: 1000; /* ============================================================ * 8. Transition * ============================================================ */ --ws-transition-fast: 150ms ease-out; --ws-transition-base: 200ms ease-out; --ws-transition-slow: 300ms ease-out; } /* ============================================================ * Mobile typography override * (CSS 변수는 @media 에서 재정의 가능 — 자식 요소가 자동으로 따라감) * ============================================================ */ @media (max-width: 767px) { :root { --ws-fs-h1: 32px; --ws-fs-h2: 26px; --ws-fs-category: 14px; --ws-fs-body-1: 15px; --ws-fs-body-hero: 15px; } }