/* ═══════════════════════════════════════════════════════════ 두손기획인쇄 — WDS Foundation Tokens Wanted Design System(WDS) 기반 + 두손 브랜드 컬러 생성일: 2026-05-05 결정: 블루 메인(#3366FF) + 레드 보조(#C41E3A) 참조 문서: docs/02-design/features/wds-foundation-tokens.design.md ⚠️ 충돌 방지: - 기존 css/design-tokens.css(--color-* 패턴)와 별도 시스템 - 두 시스템 병행 → Phase 2~5에서 점진 마이그레이션 - Phase 1은 토큰 추가만, 기존 CSS 무수정 → 시각 회귀 0 ═══════════════════════════════════════════════════════════ */ /* Pretendard Variable 폰트 자동 로드 (12페이지 통일, 2026-05-05 추가) 이전: 페이지별로 Pretendard CDN 개별 로드 (3/14 페이지만) 이후: wds-tokens.css 인클루드된 모든 페이지 자동 적용 */ @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css'); :root { /* ───────────────────────────────────────────── Brand: 블루 메인 + 레드 보조 ───────────────────────────────────────────── */ /* Primary — WDS 블루 (CTA, 헤더, 링크, 활성 상태) */ --ds-brand-blue: #3366FF; /* 대비 5.88:1 on white (AA) */ --ds-brand-blue-light: #E8F3FF; /* 호버 배경, 보조 강조 */ --ds-brand-blue-dark: #1A4BD4; /* 액티브, pressed */ /* Accent — 두손 레드 (긴급성 강조: 당일출고/마감임박) */ --ds-brand-red: #C41E3A; /* 대비 6.67:1 on white (AA) */ --ds-brand-red-light: #ff6b6b; /* em 텍스트, 가벼운 강조 */ /* 두손 시그니처 다크 컬러 (히어로/숫자) */ --ds-brand-navy: #121f40; /* 대비 15.97:1 on white (AAA) */ --ds-brand-charcoal: #1A1A1A; /* 히어로 배경 */ /* ───────────────────────────────────────────── Gray Scale (WDS, 0=검정 / 100=흰색) ───────────────────────────────────────────── */ --ds-gray-100: #FFFFFF; --ds-gray-95: #F7F7F7; --ds-gray-90: #F0F0F0; --ds-gray-80: #D9D9D9; --ds-gray-60: #ABABAB; /* 대비 2.85:1 — placeholder/disabled 전용 */ --ds-gray-40: #767676; /* 대비 4.54:1 — 보조 텍스트 (AA 경계) */ --ds-gray-20: #404040; /* 대비 10.37:1 — 본문 텍스트 */ --ds-gray-0: #000000; /* ───────────────────────────────────────────── Status (의미론적 컬러) — v0.3 WDS 확장 (2026-05-05) 기존 4종 + light/dark 변형 12종 = 총 12개 Light: 배경/카드용 (옅은 톤) Dark: 텍스트/강조용 (진한 톤) ───────────────────────────────────────────── */ /* Success (초록) */ --ds-status-success: #15803D; /* WCAG AA 5.36:1 on white */ --ds-status-success-light: #DCFCE7; /* 배경용 */ --ds-status-success-dark: #14532D; /* 강조용 */ /* Warning (노랑) */ --ds-status-warning: #FFAA00; /* 본문 부적합, 배경/장식용만 */ --ds-status-warning-light: #FEF3C7; /* 배경용 */ --ds-status-warning-dark: #78350F; /* WCAG AA 진한 갈색 */ /* Error (빨강) */ --ds-status-error: #DC2626; /* WCAG AA 5.74:1 on white */ --ds-status-error-light: #FEE2E2; /* 배경용 */ --ds-status-error-dark: #7F1D1D; /* 강조용 */ /* Info (파랑) */ --ds-status-info: var(--ds-brand-blue); --ds-status-info-light: var(--ds-brand-blue-light); /* #E8F3FF */ --ds-status-info-dark: var(--ds-brand-blue-dark); /* #1A4BD4 */ /* Brand red dark 추가 (light는 이미 #ff6b6b) */ --ds-brand-red-dark: #8B1020; /* 두손 시그니처 dark red */ /* ───────────────────────────────────────────── Legacy 변수 호환 (alias) — 미정의 fallback 방지 기존 CSS 파일들이 사용하는 변수를 우리 WDS 토큰으로 연결 이 alias 없으면 var(--미정의)가 inherit → 검정으로 fallback ───────────────────────────────────────────── */ /* customer-corporate-design.css 호환 */ --primary-color: var(--ds-brand-blue); /* unified-inline-form.css 등 호환 */ --dsp-primary: var(--ds-brand-blue); --dsp-primary-light: var(--ds-brand-blue-light); /* flier-*.css 호환 (전단지 디자인 강제 파일들) */ --flier-green: var(--ds-status-success); --flier-green-primary: var(--ds-status-success); /* ───────────────────────────────────────────── Surface (배경 시맨틱) ───────────────────────────────────────────── */ --ds-surface-default: var(--ds-gray-100); /* 기본 배경 */ --ds-surface-subtle: var(--ds-gray-95); /* 미묘한 배경 */ --ds-surface-raised: var(--ds-gray-90); /* 카드/패널 */ --ds-surface-border: var(--ds-gray-80); /* 일반 테두리 */ --ds-surface-strong: var(--ds-gray-60); /* 강조 테두리 */ /* ───────────────────────────────────────────── Text (텍스트 시맨틱) ───────────────────────────────────────────── */ --ds-text-primary: var(--ds-gray-0); /* 기본 본문 */ --ds-text-secondary: var(--ds-gray-40); /* 보조 텍스트 */ --ds-text-disabled: var(--ds-gray-60); /* 비활성 */ --ds-text-inverse: var(--ds-gray-100); /* 어두운 배경 위 */ --ds-text-link: var(--ds-brand-blue); --ds-text-emphasis: var(--ds-brand-red); /* "당일출고/마감임박" */ /* ───────────────────────────────────────────── Typography (Pretendard Variable) ───────────────────────────────────────────── */ --ds-font-base: 'Pretendard Variable', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif; /* ───────────────────────────────────────────── Spacing (4px 배수, WDS) ───────────────────────────────────────────── */ --ds-space-4: 4px; --ds-space-8: 8px; --ds-space-12: 12px; --ds-space-16: 16px; --ds-space-20: 20px; --ds-space-24: 24px; --ds-space-32: 32px; --ds-space-48: 48px; --ds-space-64: 64px; --ds-space-80: 80px; /* ───────────────────────────────────────────── Shadow (Elevation) ───────────────────────────────────────────── */ --ds-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08); --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10); --ds-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); /* ───────────────────────────────────────────── Border Radius ───────────────────────────────────────────── */ --ds-radius-sm: 4px; --ds-radius-md: 8px; --ds-radius-lg: 12px; --ds-radius-xl: 16px; --ds-radius-full: 9999px; } /* ═══════════════════════════════════════════════════════════ 사용 가이드 (참조용 — 적용은 Phase 2~5에서) ✅ 권장 패턴: .cta-button { background: var(--ds-brand-blue); color: var(--ds-text-inverse); padding: var(--ds-space-12) var(--ds-space-24); border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-sm); } ❌ 금지 패턴: .bad { background: #3366FF !important; ← 1) hex 직접 사용 X ← 2) !important 금지 (CLAUDE.md) } 📌 fallback 안전망 (필요 시): background: var(--ds-brand-blue, #3366FF); ═══════════════════════════════════════════════════════════ */