/* * Toss 디자인 토큰 * * 출처: tosspayments.com 시각 분석 * 컨셉: 한국 B2B 정확함 — 큰 굵은 헤드라인 + 선명한 Toss blue + 절제된 라운드 * * 활성화: */ [data-brand="toss"], .brand-toss { /* Surface */ --surface-0: #ffffff; --surface-1: #f9fafb; /* Toss signature pale */ --surface-2: #e5e8eb; --surface-3: #d1d6db; --surface-hover: #f2f4f6; --surface-active: #e5e8eb; --border-subtle: #e5e8eb; /* Text */ --text-primary: #191f28; /* Toss deep ink */ --text-secondary: #4e5968; --text-tertiary: #8b95a1; --text-inverse: #ffffff; /* Brand */ --primary: #191f28; --primary-hover: #0e1116; --brand-accent: #3182f6; /* Toss blue */ --cta: #3182f6; --cta-hover: #1b69d4; /* Status */ --destructive: #f04452; --destructive-light: #ffe5e8; --destructive-dark: #c1303d; --destructive-border: #ffbac1; --status-success: #00a86b; --status-success-light: #d6f5e6; --status-success-dark: #007a4d; --status-success-border: #a3e3c4; --status-warning: #f59f00; --status-warning-light: #fff3cf; --status-warning-dark: #c47700; --status-warning-border: #ffe0a3; --status-info: #3182f6; --status-info-light: #dbe9fc; --status-info-dark: #1b69d4; --status-info-border: #a8caf8; /* Radius */ --radius-sm: 6px; --radius-md: 10px; /* Toss CTA 라운드 */ --radius-lg: 14px; --radius-full: 9999px; /* Shadow — 또렷한 elevation */ --shadow-subtle: 0 1px 3px rgba(25, 31, 40, 0.06); --shadow-card: 0 2px 8px rgba(25, 31, 40, 0.08); --shadow-card-hover: 0 4px 16px -2px rgba(25, 31, 40, 0.12); --shadow-elevated: 0 8px 24px -4px rgba(25, 31, 40, 0.16); --shadow-overlay: 0 16px 48px -8px rgba(25, 31, 40, 0.22); --shadow-toast: 0 12px 32px -8px rgba(25, 31, 40, 0.20); --shadow-dropdown: 0 8px 24px -4px rgba(25, 31, 40, 0.18); --shadow-focus-ring: 0 0 0 3px rgba(49, 130, 246, 0.25); --shadow-cta-ring: 0 0 0 3px rgba(49, 130, 246, 0.30); --shadow-btn: 0 1px 2px rgba(25, 31, 40, 0.10); --shadow-btn-hover: 0 4px 12px -2px rgba(49, 130, 246, 0.28); } /* Body 폰트 — Pretendard primary (Toss Product Sans는 비공개라 가장 가까운 한국어 폰트) */ [data-brand="toss"] body, .brand-toss body, [data-brand="toss"] { font-family: 'Pretendard Variable', Pretendard, -apple-system, system-ui, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; } /* Toss는 헤딩 굵기로 인상 — page-title 강화 */ [data-brand="toss"] h1.page-title, [data-brand="toss"] .section-title-xl { font-weight: 700; letter-spacing: -0.02em; }