/* ============================================================================= * 서명전에 — TDS (Toss Design System) tokens * Apps in Toss UI Kit 2026.03-1 기준 · 191 lightV1 color tokens + 타이포 스케일 * ========================================================================== */ /* Toss Product Sans가 공개 배포되지 않으므로 Pretendard를 한글 폴백으로 사용 */ @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css"); :root { /* ============================================================ * @toss/tds-colors 완전 팔레트 (Last updated 2026-03-09 기준) * 모든 hex 는 https://tds.toss.im 문서 그대로. * 코드에선 가급적 시맨틱 alias(--brand/--label/--alert/...) 를 쓰고, * 팔레트(--tds-*) 는 시맨틱이 부족할 때만 직접 참조. * ============================================================ */ /* ---------- TDS Brand (Toss Blue 500 = semanticFillBrand) ---------- */ --brand: #3182f6; /* blue500 */ --brand-hover: #2272eb; /* blue600 */ --brand-press: #1b64da; /* blue700 */ --brand-soft: #e8f3ff; /* blue50 */ --brand-ink: #1957c2; /* blue800 */ /* ---------- Grey ---------- */ --tds-grey-50: #f9fafb; --tds-grey-100: #f2f4f6; --tds-grey-200: #e5e8eb; --tds-grey-300: #d1d6db; --tds-grey-400: #b0b8c1; --tds-grey-500: #8b95a1; --tds-grey-600: #6b7684; --tds-grey-700: #4e5968; --tds-grey-800: #333d4b; --tds-grey-900: #191f28; /* ---------- Blue ---------- */ --tds-blue-50: #e8f3ff; --tds-blue-100: #c9e2ff; --tds-blue-200: #90c2ff; --tds-blue-300: #64a8ff; --tds-blue-400: #4593fc; --tds-blue-500: #3182f6; --tds-blue-600: #2272eb; --tds-blue-700: #1b64da; --tds-blue-800: #1957c2; --tds-blue-900: #194aa6; /* ---------- Red ---------- */ --tds-red-50: #ffeeee; --tds-red-100: #ffd4d6; --tds-red-200: #feafb4; --tds-red-300: #fb8890; --tds-red-400: #f66570; --tds-red-500: #f04452; --tds-red-600: #e42939; --tds-red-700: #d22030; --tds-red-800: #bc1b2a; --tds-red-900: #a51926; /* ---------- Orange ---------- */ --tds-orange-50: #fff3e0; --tds-orange-100: #ffe0b0; --tds-orange-200: #ffcd80; --tds-orange-300: #ffbd51; --tds-orange-400: #ffa927; --tds-orange-500: #fe9800; --tds-orange-600: #fb8800; --tds-orange-700: #f57800; --tds-orange-800: #ed6700; --tds-orange-900: #e45600; /* ---------- Yellow ---------- */ --tds-yellow-50: #fff9e7; --tds-yellow-100: #ffefbf; --tds-yellow-200: #ffe69b; --tds-yellow-300: #ffdd78; --tds-yellow-400: #ffd158; --tds-yellow-500: #ffc342; --tds-yellow-600: #ffb331; --tds-yellow-700: #faa131; /* 이전 토큰에서 #dd7d02(=yellow900)로 잘못 들어있던 값 수정 */ --tds-yellow-800: #ee8f11; --tds-yellow-900: #dd7d02; /* ---------- Green ---------- */ --tds-green-50: #f0faf6; --tds-green-100: #aeefd5; --tds-green-200: #76e4b8; --tds-green-300: #3fd599; --tds-green-400: #15c47e; --tds-green-500: #03b26c; --tds-green-600: #02a262; --tds-green-700: #029359; --tds-green-800: #028450; --tds-green-900: #027648; /* ---------- Teal ---------- */ --tds-teal-50: #edf8f8; --tds-teal-100: #bce9e9; --tds-teal-200: #89d8d8; --tds-teal-300: #58c7c7; --tds-teal-400: #30b6b6; --tds-teal-500: #18a5a5; --tds-teal-600: #109595; --tds-teal-700: #0c8585; --tds-teal-800: #097575; --tds-teal-900: #076565; /* ---------- Purple ---------- */ --tds-purple-50: #f9f0fc; --tds-purple-100: #edccf8; --tds-purple-200: #da9bef; --tds-purple-300: #c770e4; --tds-purple-400: #b44bd7; --tds-purple-500: #a234c7; --tds-purple-600: #9128b4; --tds-purple-700: #8222a2; --tds-purple-800: #73228e; --tds-purple-900: #65237b; /* ---------- Grey Opacity (overlay/scrim 용) * 합성색 = 베이스 hex + alpha. CSS 에선 #RRGGBBAA 8자리 hex 로 바로 사용. * 예) backdrop: var(--tds-grey-opacity-500) / hairline: var(--tds-grey-opacity-200) * ---------- */ --tds-grey-opacity-50: #00173305; /* #001733 @ 0.02 */ --tds-grey-opacity-100: #0220470c; /* #022047 @ 0.05 */ --tds-grey-opacity-200: #001b371a; /* #001b37 @ 0.10 */ --tds-grey-opacity-300: #001d3a2e; /* #001d3a @ 0.18 */ --tds-grey-opacity-400: #0019364f; /* #001936 @ 0.31 */ --tds-grey-opacity-500: #03183275; /* #031832 @ 0.46 */ --tds-grey-opacity-600: #00132b94; /* #00132b @ 0.58 */ --tds-grey-opacity-700: #031228b3; /* #031228 @ 0.70 */ --tds-grey-opacity-800: #000c1ecc; /* #000c1e @ 0.80 */ --tds-grey-opacity-900: #020913e8; /* #020913 @ 0.91 */ /* ---------- Legacy iOS aliases → TDS 매핑 ---------- */ --ios-blue: var(--tds-blue-500); --ios-green: var(--tds-green-500); --ios-indigo: var(--tds-blue-500); --ios-orange: var(--tds-orange-500); --ios-pink: var(--tds-red-500); --ios-purple: var(--tds-purple-500); --ios-red: var(--tds-red-500); --ios-teal: var(--tds-teal-500); --ios-yellow: var(--tds-yellow-500); /* ---------- TDS Background semantic * - background : 페이지 기본(흰색) * - greyBackground : 회색 페이지(grey100) — 카드 위에 카드를 얹는 화면 * - layeredBackground : 카드/시트 등 위로 얹히는 표면(흰색) * - floatedBackground : 떠있는 표면(흰색) * ---------- */ --tds-bg-default: #ffffff; --tds-bg-grey: var(--tds-grey-100); --tds-bg-layered: #ffffff; --tds-bg-floated: #ffffff; /* App-level background aliases — 기존 컴포넌트 호환 */ --bg: var(--tds-bg-grey); /* 페이지 (회색) */ --bg-2: var(--tds-bg-default); /* 카드 (흰색) */ --bg-3: var(--tds-grey-50); /* 미묘한 회색 강조 */ --surface: var(--tds-bg-layered); /* 시트/모달 표면 */ --surface-2: var(--tds-grey-100); /* 입력 필드/필 */ /* ---------- Label / Text (TDS semantic text) ---------- */ --label: var(--tds-grey-900); /* semanticTextStrong */ --label-secondary: var(--tds-grey-700); /* semanticTextNeutral */ --label-tertiary: var(--tds-grey-500); /* semanticTextWeak */ --label-quaternary:var(--tds-grey-400); /* semanticTextWeaker */ /* ---------- Fill (button tints, pressed states) * TDS grey opacity 토큰으로 통일 → 카드·이미지 위 어디에서도 자연스럽게 동작. * ---------- */ --fill-1: var(--tds-grey-opacity-100); /* semanticFillNeutralWeak */ --fill-2: var(--tds-grey-opacity-100); /* semanticFillPressed */ --fill-3: var(--tds-grey-opacity-50); /* semanticBackgroundUpper */ --fill-4: var(--tds-grey-50); /* ---------- Separator (TDS hairline) ---------- */ --separator: var(--tds-grey-200); /* legacySemanticBorderHairline */ --separator-opaque: var(--tds-grey-200); /* ---------- Semantic (app) * fill = 베이스(500) · soft = 50(연한 배경 틴트) · ink = 700~900(텍스트용 진한 색) * 모든 hex 는 TDS 팔레트 참조이므로 색이 어긋날 일이 없음. * ---------- */ --alert: var(--tds-red-500); /* semanticFillDanger */ --alert-soft: var(--tds-red-50); /* danger surface */ --alert-ink: var(--tds-red-700); /* semanticTextDanger */ /* 경고(warn) 토큰은 기존 yellow 에서 orange 로 교체. 이유: "불공정 조항" / "주의" 시그널이 옅은 yellow-500(#ffc342) 로는 경고감이 약해서 사용자가 위험도를 과소평가하는 회귀가 있었음. TDS 팔레트에 이미 정의된 orange 계열로 옮겨 red(alert) 와 green(safe) 사이 경고 위계를 선명히. yellow-500 → orange-500 (#fe9800) 로 한 단계 강화 (채도↑ 명도 비슷). */ --warn: var(--tds-orange-500); /* semanticFillWarning (orange) */ --warn-soft: var(--tds-orange-50); /* warning surface (orange tint) */ --warn-ink: var(--tds-orange-900); /* semanticTextWarning (본문용 진한 오렌지) */ --safe: var(--tds-green-500); /* semanticFillSuccess */ --safe-soft: var(--tds-green-50); /* success surface */ --safe-ink: var(--tds-green-700); /* semanticTextSuccess */ /* ---------- Type — Toss Product Sans (fallback Pretendard/SF Pro) ---------- */ --font: "Toss Product Sans", -apple-system, BlinkMacSystemFont, "Pretendard Variable", "SF Pro Text", "SF Pro Display", system-ui, sans-serif; --font-rounded: "Toss Product Sans", -apple-system-rounded, "SF Pro Rounded", "Pretendard Variable", system-ui, sans-serif; /* ======================================================================== * TDS Typography — Mobile 2026-03 * 권장 가이드: 표에 나온 값을 직접 하드코딩하지 않고 토큰만 참조할 것. * 하드코딩하면 iOS Dynamic Type / Android 글자 크기 배율에서 깨진다. * * 구성: * · Typography 1~7 — 메인 7종 (heading/title/body 용) * · subTypography 1~13 — 보조 13종 (caption/meta/sub-label 용) * · Weight 5종 — Light/Regular/Medium/Semibold/Bold * · --ty-scale — 네이티브 어댑터가 런타임에 주입 (기본 1) * · clamp(min, scaled, max) — iOS Max 캡/Android 배율 한도 반영 * ======================================================================== */ /* Runtime scale (1 = 100%, 1.1 = 110% … iOS 기준 최대 3.10) 네이티브에서 preferredContentSizeCategory 또는 fontScale 이 오면 document.documentElement.style.setProperty('--ty-scale', v) 로 주입 */ --ty-scale: 1; /* Weight tokens (5종) — Toss Product Sans 공식 굵기 */ --w-light: 300; --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; /* -------- Typography 1~7 (Main) -------- 포맷: --ty-N-fs / --ty-N-lh / --ty-N-max(iOS Max cap) size * --ty-scale 을 clamp 안에 넣어 Max 초과를 방지 */ /* ty-1 — 30/40, iOS Max 42 */ --ty-1-fs: clamp(30px, calc(30px * var(--ty-scale)), 42px); --ty-1-lh: calc(var(--ty-1-fs) * 40 / 30); /* ty-2 — 26/35, iOS Max 37 */ --ty-2-fs: clamp(26px, calc(26px * var(--ty-scale)), 37px); --ty-2-lh: calc(var(--ty-2-fs) * 35 / 26); /* ty-3 — 22/30, iOS Max 32 */ --ty-3-fs: clamp(22px, calc(22px * var(--ty-scale)), 32px); --ty-3-lh: calc(var(--ty-3-fs) * 30 / 22); /* ty-4 — 19/28, iOS Max 30 */ --ty-4-fs: clamp(19px, calc(19px * var(--ty-scale)), 30px); --ty-4-lh: calc(var(--ty-4-fs) * 28 / 19); /* ty-5 — 17/26, iOS Max 28 */ --ty-5-fs: clamp(17px, calc(17px * var(--ty-scale)), 28px); --ty-5-lh: calc(var(--ty-5-fs) * 26 / 17); /* ty-6 — 15/22, iOS Max 24 */ --ty-6-fs: clamp(15px, calc(15px * var(--ty-scale)), 24px); --ty-6-lh: calc(var(--ty-6-fs) * 22 / 15); /* ty-7 — 13/18, iOS Max 20 */ --ty-7-fs: clamp(13px, calc(13px * var(--ty-scale)), 20px); --ty-7-lh: calc(var(--ty-7-fs) * 18 / 13); /* -------- subTypography 1~13 (Sub) -------- ty- 보다 한 단계 촘촘하게 제공되어 caption/meta 대응 */ /* sub-ty-1 — 28/38, iOS Max 40 */ --sub-ty-1-fs: clamp(28px, calc(28px * var(--ty-scale)), 40px); --sub-ty-1-lh: calc(var(--sub-ty-1-fs) * 38 / 28); /* sub-ty-2 — 24/32, iOS Max 34 */ --sub-ty-2-fs: clamp(24px, calc(24px * var(--ty-scale)), 34px); --sub-ty-2-lh: calc(var(--sub-ty-2-fs) * 32 / 24); /* sub-ty-3 — 21/29, iOS Max 31 */ --sub-ty-3-fs: clamp(21px, calc(21px * var(--ty-scale)), 31px); --sub-ty-3-lh: calc(var(--sub-ty-3-fs) * 29 / 21); /* sub-ty-4 — 20/28, iOS Max 30 */ --sub-ty-4-fs: clamp(20px, calc(20px * var(--ty-scale)), 30px); --sub-ty-4-lh: calc(var(--sub-ty-4-fs) * 28 / 20); /* sub-ty-5 — 18/26, iOS Max 28 */ --sub-ty-5-fs: clamp(18px, calc(18px * var(--ty-scale)), 28px); --sub-ty-5-lh: calc(var(--sub-ty-5-fs) * 26 / 18); /* sub-ty-6 — 16/24, iOS Max 26 */ --sub-ty-6-fs: clamp(16px, calc(16px * var(--ty-scale)), 26px); --sub-ty-6-lh: calc(var(--sub-ty-6-fs) * 24 / 16); /* sub-ty-7 — 14/21, iOS Max 22 */ --sub-ty-7-fs: clamp(14px, calc(14px * var(--ty-scale)), 22px); --sub-ty-7-lh: calc(var(--sub-ty-7-fs) * 21 / 14); /* sub-ty-8 — 13/19, iOS Max 20 */ --sub-ty-8-fs: clamp(13px, calc(13px * var(--ty-scale)), 20px); --sub-ty-8-lh: calc(var(--sub-ty-8-fs) * 19 / 13); /* sub-ty-9 — 12/17, iOS Max 19 */ --sub-ty-9-fs: clamp(12px, calc(12px * var(--ty-scale)), 19px); --sub-ty-9-lh: calc(var(--sub-ty-9-fs) * 17 / 12); /* sub-ty-10 — 11/15, iOS Max 17 */ --sub-ty-10-fs: clamp(11px, calc(11px * var(--ty-scale)), 17px); --sub-ty-10-lh: calc(var(--sub-ty-10-fs) * 15 / 11); /* sub-ty-11 — 10/14, iOS Max 16 */ --sub-ty-11-fs: clamp(10px, calc(10px * var(--ty-scale)), 16px); --sub-ty-11-lh: calc(var(--sub-ty-11-fs) * 14 / 10); /* sub-ty-12 — 9/12, iOS Max 14 */ --sub-ty-12-fs: clamp(9px, calc(9px * var(--ty-scale)), 14px); --sub-ty-12-lh: calc(var(--sub-ty-12-fs) * 12 / 9); /* sub-ty-13 — 8/11, iOS Max 12 */ --sub-ty-13-fs: clamp(8px, calc(8px * var(--ty-scale)), 12px); --sub-ty-13-lh: calc(var(--sub-ty-13-fs) * 11 / 8); /* ======================================================================== * 시맨틱 별칭 — TDS 20 토큰을 프로덕트 역할(display/title/body/subtext/label)에 매핑. * 컴포넌트는 직접 ty-N / sub-ty-N 을 쓰거나 이 별칭을 통해 간접 참조한다. * ======================================================================== */ /* Display */ --fs-display-sm: var(--ty-2-fs); --lh-display-sm: var(--ty-2-lh); --w-display-sm: var(--w-bold); --fs-display-md: var(--ty-1-fs); --lh-display-md: var(--ty-1-lh); --w-display-md: var(--w-bold); --fs-display-lg: var(--ty-1-fs); --lh-display-lg: var(--ty-1-lh); --w-display-lg: var(--w-bold); /* Title */ --fs-title-xs: var(--ty-5-fs); --lh-title-xs: var(--ty-5-lh); --w-title-xs: var(--w-semibold); --fs-title-sm: var(--ty-4-fs); --lh-title-sm: var(--ty-4-lh); --w-title-sm: var(--w-semibold); --fs-title-md: var(--ty-3-fs); --lh-title-md: var(--ty-3-lh); --w-title-md: var(--w-bold); --fs-title-lg: var(--ty-2-fs); --lh-title-lg: var(--ty-2-lh); --w-title-lg: var(--w-bold); /* Body */ --fs-body-xs: var(--sub-ty-8-fs); --lh-body-xs: var(--sub-ty-8-lh); --w-body-xs: var(--w-regular); --fs-body-md: var(--ty-5-fs); --lh-body-md: var(--ty-5-lh); --w-body-md: var(--w-regular); --fs-body-md-strong: var(--ty-5-fs); --lh-body-md-strong: var(--ty-5-lh); --w-body-md-strong: var(--w-semibold); --fs-body-lg: var(--ty-4-fs); --lh-body-lg: var(--ty-4-lh); --w-body-lg: var(--w-regular); /* Subtext */ --fs-subtext-sm: var(--sub-ty-9-fs); --lh-subtext-sm: var(--sub-ty-9-lh); --w-subtext-sm: var(--w-regular); --fs-subtext-md: var(--sub-ty-8-fs); --lh-subtext-md: var(--sub-ty-8-lh); --w-subtext-md: var(--w-regular); --fs-subtext-lg: var(--ty-6-fs); --lh-subtext-lg: var(--ty-6-lh); --w-subtext-lg: var(--w-medium); /* Label (buttons, chips) */ --fs-label-xs: var(--sub-ty-8-fs); --lh-label-xs: var(--sub-ty-8-lh); --w-label-xs: var(--w-medium); --fs-label-sm: var(--ty-6-fs); --lh-label-sm: var(--ty-6-lh); --w-label-sm: var(--w-semibold); --fs-label-md: var(--ty-5-fs); --lh-label-md: var(--ty-5-lh); --w-label-md: var(--w-semibold); --fs-label-lg: var(--ty-4-fs); --lh-label-lg: var(--ty-4-lh); --w-label-lg: var(--w-bold); /* ---------- Legacy HIG aliases → TDS mapped (기존 컴포넌트 호환) ---------- */ --fs-largetitle: var(--fs-display-lg); --lh-largetitle: var(--lh-display-lg); --w-largetitle: var(--w-bold); --fs-title1: var(--fs-display-md); --lh-title1: var(--lh-display-md); --w-title1: var(--w-bold); --fs-title2: var(--fs-title-md); --lh-title2: var(--lh-title-md); --w-title2: var(--w-bold); --fs-title3: var(--fs-title-sm); --lh-title3: var(--lh-title-sm); --w-title3: var(--w-semibold); --fs-headline: var(--fs-title-xs); --lh-headline: var(--lh-title-xs); --w-headline: var(--w-semibold); --fs-body: var(--fs-body-md); --lh-body: var(--lh-body-md); --w-body: var(--w-regular); --fs-callout: var(--fs-body-md); --lh-callout: var(--lh-body-md); --w-callout: var(--w-medium); --fs-subhead: var(--fs-subtext-lg); --lh-subhead: var(--lh-subtext-lg); --w-subhead: var(--w-regular); --fs-footnote: var(--fs-subtext-md); --lh-footnote: var(--lh-subtext-md); --w-footnote: var(--w-regular); --fs-caption1: var(--fs-subtext-sm); --lh-caption1: var(--lh-subtext-sm); --w-caption1: var(--w-regular); --fs-caption2: var(--sub-ty-10-fs); --lh-caption2: var(--sub-ty-10-lh); --w-caption2: var(--w-regular); /* ---------- Shape (TDS에 공개 반경 토큰이 없어 iOS HIG 값 유지) ---------- */ --r-sm: 8px; --r-md: 10px; /* buttons */ --r-lg: 14px; /* cards */ --r-xl: 20px; --r-2xl: 28px; /* bottom sheets */ --r-pill: 999px; /* ---------- Elevation (TDS semanticShadow* 색상) ---------- */ --shadow-tiny-down: 0 1px 2px #001b3719; /* semanticShadowTiny */ --shadow-weak-down: 0 4px 12px #001b3719; /* semanticShadowWeak */ --shadow-medium-down: 0 8px 24px #001d3a2d; /* semanticShadowMedium */ --shadow-tiny-up: 0 -1px 2px #001b3719; --shadow-weak-up: 0 -4px 12px #001b3719; --shadow-medium-up: 0 -8px 24px #001d3a2d; /* Legacy aliases */ --shadow-1: var(--shadow-tiny-down); --shadow-2: var(--shadow-weak-down); --shadow-3: var(--shadow-medium-down); /* ---------- Motion ---------- */ --ease: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-spring: cubic-bezier(0.32, 0.72, 0, 1); --dur-1: 150ms; --dur-2: 250ms; --dur-3: 400ms; /* Safe areas */ --sa-top: env(safe-area-inset-top, 0px); --sa-bottom: env(safe-area-inset-bottom, 0px); /* Bar heights */ --tabbar-h: 49px; --navbar-h: 44px; --navbar-large-h: 96px; /* ---------- Semantic aliases (기존 코드 호환) ---------- */ --ink: var(--label); --ink-subtle: var(--label-secondary); --surface-soft: var(--surface-2); --font-text: var(--font); --font-num: var(--font-rounded); } /* ============================================================================= * 앱인토스 비게임 미니앱 체크리스트(디자인): 라이트 모드 전용. * 기존 :root[data-theme="dark"] 토큰 블록은 정책 준수를 위해 제거됨. * 참고: tokens.css v1.x 다크 테마 정의는 git history에서 복구 가능. * ========================================================================== */ /* ============================================================================= * Base * ========================================================================== */ * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; } body { font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--label); background: var(--bg); word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv01"; letter-spacing: -0.01em; min-height: 100dvh; } button { font-family: inherit; } .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; letter-spacing: -0.02em; }