/* ========================================================= Pilldoc Design System - Design Tokens (v2) 이 파일이 색·타입·간격·반경·그림자의 유일한 출처다. 컴포넌트 CSS 는 리터럴 값을 쓰지 않고 여기의 토큰만 참조한다. 구조 1. Primitive 원시 팔레트. 값이 직접 박히는 유일한 층. 2. Semantic 역할 기반 별칭. 컴포넌트는 이 층만 참조한다. 3. Dimension 간격·반경·크기·높이 4. Effect 그림자·모션·레이어 Semantic 층이 있는 이유: 다크 테마나 브랜드 조정이 필요할 때 Primitive 를 건드리지 않고 이 층의 매핑만 바꾸면 되기 때문이다. ========================================================= */ :root { /* ======================================================= 1. PRIMITIVE ======================================================= */ /* ---------- Mint (brand primary) ---------- */ --pd-mint-50: #E6F7F7; --pd-mint-100: #C7EEEF; --pd-mint-200: #9FE2E4; --pd-mint-300: #6CD2D5; --pd-mint-400: #39BFC4; /* 브랜드 기본. 로고 오른쪽 알약(D) */ --pd-mint-500: #2AA9AD; --pd-mint-600: #1E8F93; --pd-mint-700: #166F72; --pd-mint-800: #0F4F52; /* ---------- Coral (brand accent) ---------- */ --pd-coral-50: #FDEEE9; --pd-coral-100: #FBD7CC; --pd-coral-200: #F7B6A3; --pd-coral-300: #F58F80; --pd-coral-400: #F37268; /* 브랜드 액센트. 로고 왼쪽 알약(P) */ --pd-coral-500: #E0574C; --pd-coral-600: #C04437; --pd-coral-700: #8E3025; --pd-coral-800: #5E1E18; /* ---------- Gold (마일리지·포인트 전용) ---------- */ --pd-gold-50: #FDF4DE; --pd-gold-400: #F2B84B; --pd-gold-500: #E0A12A; --pd-gold-700: #8A5A08; /* ---------- Ink (neutral) ---------- */ --pd-ink-900: #1F2328; --pd-ink-800: #2D2D2D; --pd-ink-700: #4A4F55; --pd-ink-600: #6B7177; --pd-ink-500: #8A9099; --pd-ink-400: #B2B8BF; --pd-ink-300: #D5D9DE; --pd-ink-200: #E6E9ED; --pd-ink-100: #F1F3F5; --pd-ink-50: #F7F8FA; --pd-white: #FFFFFF; /* ---------- Feedback ---------- */ --pd-green-50: #E8F6EF; --pd-green-500: #26A47A; --pd-green-700: #166E4D; --pd-red-50: #FCEBEB; --pd-red-500: #D94C4C; --pd-red-700: #993333; /* ======================================================= 2. SEMANTIC 컴포넌트가 참조하는 층. Primitive 를 역할로 다시 이름 붙인다. ======================================================= */ /* 표면 */ --pd-surface: var(--pd-white); /* 카드·시트·입력 배경 */ --pd-surface-sunken: var(--pd-ink-50); /* 페이지 배경, 테이블 헤더 */ --pd-surface-muted: var(--pd-ink-100); /* 비활성 입력, 세그먼트 트랙 */ --pd-surface-inverted: var(--pd-ink-900); /* 토스트, 툴팁 */ /* 텍스트. 값 뒤 숫자는 --pd-surface 대비 명도비다. */ --pd-text: var(--pd-ink-900); /* 13.4:1 본문·제목 */ --pd-text-secondary: var(--pd-ink-700); /* 8.1:1 보조 설명 */ --pd-text-muted: var(--pd-ink-600); /* 5.4:1 캡션·힌트. AA 하한 */ --pd-text-placeholder: var(--pd-ink-500); /* 3.6:1 플레이스홀더 전용. 큰 텍스트 기준만 통과하므로 본문 색으로 쓰면 안 된다. */ --pd-text-on-accent: var(--pd-white); --pd-text-inverted: var(--pd-white); /* 경계 */ --pd-border: var(--pd-ink-200); /* 카드·구분선 */ --pd-border-strong: var(--pd-ink-300); /* 입력 테두리 */ --pd-border-hover: var(--pd-ink-400); /* 액션 */ --pd-accent: var(--pd-mint-400); --pd-accent-hover: var(--pd-mint-500); --pd-accent-active: var(--pd-mint-600); --pd-accent-subtle: var(--pd-mint-50); --pd-accent-on-subtle: var(--pd-mint-700); --pd-cta: var(--pd-coral-400); --pd-cta-hover: var(--pd-coral-500); --pd-cta-subtle: var(--pd-coral-50); --pd-cta-on-subtle: var(--pd-coral-600); --pd-neutral-action: var(--pd-ink-900); --pd-neutral-action-hover: var(--pd-ink-800); /* 상태 */ --pd-success: var(--pd-green-500); --pd-success-subtle: var(--pd-green-50); --pd-success-on-subtle: var(--pd-green-700); --pd-warning: var(--pd-gold-500); --pd-warning-subtle: var(--pd-gold-50); --pd-warning-on-subtle: var(--pd-gold-700); --pd-danger: var(--pd-red-500); --pd-danger-subtle: var(--pd-red-50); --pd-danger-on-subtle: var(--pd-red-700); --pd-info: var(--pd-mint-400); /* 차트 계열. 순서가 중요하다. 파이와 도넛에서는 1번과 2번 조각이 맞닿으므로 인접한 두 계열은 색상과 명도가 둘 다 달라야 한다. 브랜드 램프를 순서대로(400, 500, 600...) 쓰면 같은 청록이 이어져 조각 경계가 안 보인다. 그래서 청록과 난색을 번갈아 놓고, 진한 색과 연한 색도 교대시켰다. 계열을 추가할 때 이 교대를 깨지 않는다. */ --pd-chart-1: #39BFC4; /* 밝은 청록 */ --pd-chart-2: #F37268; /* 살몬 */ --pd-chart-3: #F2B84B; /* 앰버 */ --pd-chart-4: #166F72; /* 진한 청록 */ --pd-chart-5: #8E3025; /* 진한 벽돌 */ --pd-chart-6: #6B7177; /* 회색 */ --pd-chart-7: #9FE2E4; /* 연한 청록 */ --pd-chart-8: #B2B8BF; /* 연한 회색 */ --pd-chart-grid: var(--pd-ink-200); --pd-chart-axis: var(--pd-ink-500); /* ======================================================= 3. DIMENSION ======================================================= */ /* ---------- Type ---------- Pretendard GOV Variable 은 숫자가 고정폭이다. 그래서 금액·수량 정렬을 위해 별도의 모노 서체를 들이지 않는다. 숫자 정렬이 필요한 곳은 .t-num (font-variant-numeric: tabular-nums) 을 쓴다. --pd-font-mono 는 코드 블록 전용이며 시스템 서체만 참조한다. 즉 이 시스템은 웹폰트를 한 벌만 내려받는다. */ --pd-font-sans: "Pretendard GOV Variable", "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; --pd-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --pd-weight-regular: 400; --pd-weight-medium: 500; --pd-weight-semibold: 600; --pd-weight-bold: 700; --pd-weight-extrabold: 800; /* ---------- Spacing (4px 기준) ---------- */ --pd-space-1: 4px; --pd-space-2: 8px; --pd-space-3: 12px; --pd-space-4: 16px; --pd-space-5: 20px; --pd-space-6: 24px; --pd-space-8: 32px; --pd-space-10: 40px; --pd-space-12: 48px; --pd-space-16: 64px; --pd-space-20: 80px; /* ---------- Radius ---------- 값은 v1 그대로다. 바꾼 것은 매핑 규칙이다. v1 은 버튼이 md(6px), 입력이 sm(4px) 이어서 나란히 놓으면 모서리가 어긋났다. xs 2px 체크박스 sm 4px 배지, 태그, 칩 md 6px 버튼·입력·선택·텍스트영역 (모든 컨트롤 공통) lg 10px 카드·시트·모달·팝오버 xl 16px 히어로급 대형 카드 pill 세그먼트·필 버튼·아바타 이 매핑을 벗어난 값을 새로 만들지 않는다. */ --pd-radius-xs: 2px; --pd-radius-sm: 4px; --pd-radius-md: 6px; --pd-radius-lg: 10px; --pd-radius-xl: 16px; --pd-radius-pill: 999px; /* ---------- Control size ---------- 모든 입력형 컨트롤(input, select, textarea 한 줄, button)이 같은 높이 토큰을 쓴다. type=password 도 예외가 아니다. */ --pd-control-h-sm: 32px; --pd-control-h: 40px; --pd-control-h-lg: 48px; --pd-control-px: var(--pd-space-3); --pd-control-px-sm: var(--pd-space-2); --pd-control-px-lg: var(--pd-space-5); /* ---------- Icon ---------- Lucide 기준. 원본 stroke-width 가 2 이므로 그 값을 유지한다. 1.8 같은 임의 값으로 바꾸면 Lucide 의 광학 격자가 깨진다. */ --pd-icon-sm: 16px; --pd-icon: 20px; --pd-icon-lg: 24px; --pd-icon-stroke: 2; /* ---------- Breakpoint ---------- 선언용. @media 는 CSS 변수를 못 읽으므로 실제 쿼리에는 리터럴을 쓴다. 기존 pilldocsite 는 960/961px 을 쓰는데, 신규 화면은 아래 값으로 통일한다. */ --pd-bp-sm: 640px; --pd-bp-md: 768px; --pd-bp-lg: 1024px; --pd-bp-xl: 1280px; /* ---------- 읽는 폭 ---------- 본문 컨테이너는 1440px 이지만, 읽기만 하는 화면(고객센터·약관)에서 글줄이 1400px 이면 눈이 다음 줄로 못 넘어옵니다. 표도 마찬가지로 제목 칸만 늘어나 날짜와 멀어집니다. 한 화면씩 900px 을 손으로 적어 두었더니 같은 고객센터 안에서 자주 묻는 질문·제휴문의만 900, 공지사항·문의·뉴스는 1400 으로 갈렸습니다. 값을 여기 하나로 둡니다. */ --pd-read-w: 900px; /* ======================================================= 4. EFFECT ======================================================= */ /* 그림자는 순수 검정이 아니라 배경 색조를 띈 남색 계열을 쓴다. */ --pd-shadow-xs: 0 1px 2px rgba(19, 28, 45, 0.06); --pd-shadow-sm: 0 2px 6px rgba(19, 28, 45, 0.06), 0 1px 2px rgba(19, 28, 45, 0.04); --pd-shadow-md: 0 6px 16px rgba(19, 28, 45, 0.08), 0 2px 4px rgba(19, 28, 45, 0.04); --pd-shadow-lg: 0 14px 34px rgba(19, 28, 45, 0.10), 0 4px 8px rgba(19, 28, 45, 0.05); --pd-focus-ring: 0 0 0 3px rgba(57, 191, 196, 0.32); --pd-focus-ring-danger: 0 0 0 3px rgba(217, 76, 76, 0.28); --pd-ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */ --pd-dur-fast: 120ms; /* @kind other */ --pd-dur: 200ms; /* @kind other */ --pd-dur-slow: 320ms; /* @kind other */ /* 레이어. 임의의 z-index 를 쓰지 않고 이 6단계만 사용한다. */ --pd-z-base: 0; /* @kind other */ --pd-z-sticky: 10; /* @kind other */ --pd-z-dropdown: 100; /* @kind other */ --pd-z-overlay: 200; /* @kind other */ --pd-z-modal: 300; /* @kind other */ --pd-z-toast: 400; /* @kind other */ --pd-z-tooltip: 500; /* @kind other */ } /* 모션을 줄이도록 설정한 사용자에게는 전역 트랜지션을 무력화한다. */ @media (prefers-reduced-motion: reduce) { :root { --pd-dur-fast: 1ms; --pd-dur: 1ms; --pd-dur-slow: 1ms; } }