/* * 디자인 토큰 — Figma WSG(아동권리영화제_WSG) 기준 (2026-07-30 추출·검증) * 색상: 컬러 가이드 node 22:18 / 간격: node 13:204 / 래디어스: node 13:324 / 레이아웃: node 167:786 * 규칙: 화면 CSS 에서 색상·여백·둥글기는 반드시 이 토큰(var)만 사용한다 (raw 값 직접 기입 금지) * 상세 사용 규칙(WCAG 등급별 제약 등): docs/conventions/design-guide.md * * 구조: ① 원시 토큰(팔레트 스케일) → ② 시맨틱 별칭(용도 이름) 2계층. * 화면 코드는 가급적 ② 시맨틱 별칭을 참조한다. * * ⚠️ 반응형 브레이크포인트(1023px)는 CSS 변수를 미디어쿼리에 쓸 수 없어 토큰화 불가 — * 모바일 분기는 `@media (max-width: 1023px)` 고정 리터럴로 통일한다 (design-guide.md). */ :root { /* ── ① 원시 토큰 ─────────────────────────────────────── */ /* Primary — 상징색. 주요 액션·중요 정보 강조 (10 진함 → 100 연함) */ --color-primary-10: #d73026; /* 메인 CTA */ --color-primary-20: #db4a41; /* 강조 포인트 */ --color-primary-30: #e0645c; /* 강조 보조톤 */ --color-primary-40: #e47e77; /* 강조 밝은톤 */ --color-primary-50: #e89892; /* 중간 톤 */ --color-primary-60: #edb2ad; /* 연한 배경 */ --color-primary-70: #f1cbc8; /* 연한 배경 */ --color-primary-80: #f5e5e3; /* 연한 배경 */ --color-primary-90: #faf0ef; /* 연한 배경 */ --color-primary-100: #fdf8f8; /* 최연한 배경 */ /* Grayscale — 배경·텍스트·구분선 (10 진함 → 100 연함) */ --color-gray-10: #222222; /* 헤드라인 */ --color-gray-20: #333333; /* 서브 타이틀 */ --color-gray-30: #444444; /* 중간톤 텍스트 */ --color-gray-40: #555555; /* 본문 텍스트 */ --color-gray-50: #6e6e6e; /* 보조 텍스트 */ --color-gray-60: #767676; /* 캡션 텍스트 */ --color-gray-70: #9a9a9a; /* 버튼 보더 */ --color-gray-80: #cccccc; /* disabled 상태 */ --color-gray-85: #dddddd; /* 기본 보더 */ --color-gray-90: #f3f3f3; /* 섹션 배경 */ --color-gray-95: #f5f5f5; /* 카드 배경 (메인 영화 카드 등 — 시안 raw #f5f5f5) */ --color-gray-100: #ffffff; /* 기본 배경 */ /* System — 상태·속성 표현 (05 텍스트 · 20/40 라인·아이콘 · 60 강조 배경 · 80 연한 배경) */ /* Red = Error(오류·위험) */ --color-red-05: #b71c1c; --color-red-20: #e86060; /* WSG 22:18 갱신 반영 2026-08-05 (구 #e48b8b) — 라인·아이콘·error */ --color-red-40: #f99494; --color-red-60: #ffb3b3; --color-red-80: #ffd6d6; /* Pink = Highlight(이벤트·프로모션·신규 태그) */ --color-pink-05: #7a3e73; --color-pink-20: #e48ad7; --color-pink-40: #f0a8e2; --color-pink-60: #ffb1ed; --color-pink-80: #ffd8f6; /* Yellow = Notice(팁·보조 안내) */ --color-yellow-05: #7f7535; --color-yellow-20: #f9e668; --color-yellow-40: #f9ec94; --color-yellow-60: #fff5b3; --color-yellow-80: #fffad6; /* Green = Success(완료·긍정 피드백) */ --color-green-05: #617f28; --color-green-20: #95c33d; --color-green-40: #b5d953; --color-green-60: #daf069; --color-green-80: #edf7b4; /* Blue = Information(안내·참고 정보) */ --color-blue-05: #1b4db8; --color-blue-20: #3a7bf6; --color-blue-40: #93b2ec; --color-blue-60: #c4d2ee; --color-blue-80: #e9eef7; /* Purple = 보조 강조 (System 외 추가 강조) — WSG 22:18 신규 계열 2026-08-05 */ --color-purple-05: #180e81; --color-purple-20: #5040cc; --color-purple-40: #8e86ea; --color-purple-60: #aeb7ff; --color-purple-80: #e6e5f6; /* Sky = 부가 정보·보조 안내 — WSG 22:18 신규 계열 2026-08-05 */ --color-sky-05: #1b6e98; --color-sky-20: #0c95da; --color-sky-40: #70c2eb; --color-sky-60: #aee4ff; --color-sky-80: #e5f0f5; /* ── ② 시맨틱 별칭 — 화면 코드는 이쪽을 우선 사용 ────────── */ /* 액션·강조 */ --color-cta: var(--color-primary-10); --color-accent: var(--color-primary-20); /* 텍스트 */ --color-text-heading: var(--color-gray-10); --color-text-subtitle: var(--color-gray-20); --color-text-body: var(--color-gray-40); --color-text-secondary: var(--color-gray-50); --color-text-caption: var(--color-gray-60); --color-text-inverse: var(--color-gray-100); --color-text-inverse-soft: rgba(255, 255, 255, 0.8); /* 다크 배경 보조 텍스트 — 푸터 시안(57:890) 등록 2026-07-31 */ /* 보더·비활성 */ --color-border: var(--color-gray-85); --color-border-button: var(--color-gray-70); --color-border-inverse: rgba(234, 234, 234, 0.2); /* 다크 배경 구분선 — 푸터 시안(57:890) 등록 2026-07-31 */ --color-divider: #eeeeee; /* 시안 line/divider/standard — 탭 구분선 (단체가입 tab_large 등록 2026-08-03) */ --color-disabled: var(--color-gray-80); /* SNS 브랜드 (로그인 JI-8100 시안 실측 2026-08-03 — 네이버는 공식 #03c75a 와 상이한 시안값, 질의 대상) */ --color-kakao: #fee500; --color-naver: #03a94d; /* 오버레이 — hover 딤 (Figma 변수 color/dim/black 20, 버튼 시안 46:2835 등록 2026-07-31) */ --color-dim-20: rgba(0, 0, 0, 0.2); --color-dim-40: rgba(0, 0, 0, 0.4); /* 캐러셀 화살표 딤 (Figma color/dim/black 40, 공동체 상영 IconButton_80 시안 1926:78591 등록 2026-08-18) */ --color-dim-modal: rgba(0, 0, 0, 0.6); /* 모달 딤 배경 (Figma color/dim/modal, 팝업 시안 46:5270 등록 2026-07-31) */ --color-dim-white-20: rgba(255, 255, 255, 0.2); /* 딤 위 흰 20% — 캐러셀 도트·유리 버튼 (Figma color/dim/ui-white, 2026-08-03) */ --color-dim-white-40: rgba(255, 255, 255, 0.4); /* 딤 위 흰 40% — 히어로 인디케이터 유리 pill·nav (Figma color/dim/white-40) */ /* 스크롤 — 카드 내 커스텀 스크롤 thumb (영화상세 UT-08 시안 627:6729, 색 확정 2026-08-28) */ --color-scrollbar-thumb: #d9d9d9; /* 배경 */ --color-background: var(--color-gray-100); --color-background-section: var(--color-gray-90); --color-background-primary-soft: var(--color-primary-90); --color-surface-black: #1c1c1c; /* 다크 표면 — 이미지 뷰어 레터박스 (Figma color/surface/standard/black, UT-13 627:8479 등록 2026-08-27 · 디자이너 확인 대상) */ /* 야외 존 카드 배경 — 존별 파스텔 (Figma OC-4000 좌석안내 627:41108, 시안 raw hex·Figma 변수 미지정 → 디자이너 확인 대상, CRFF-211 등록 2026-09-14) */ --color-zone-vip: #fefdb9; /* 빈백존(VIP) — 옐로우 */ --color-zone-picnic: #dcfdf1; /* 피크닉존 — 민트 */ --color-zone-pet: #fee7fd; /* 펫존 — 핑크 */ /* 상태 (텍스트 / 라인·아이콘 / 연한 배경) */ --color-error-text: var(--color-red-05); --color-error: var(--color-red-20); --color-error-background: var(--color-red-80); --color-highlight-text: var(--color-pink-05); --color-highlight: var(--color-pink-20); --color-highlight-background: var(--color-pink-80); --color-notice-text: var(--color-yellow-05); --color-notice: var(--color-yellow-20); --color-notice-background: var(--color-yellow-80); --color-success-text: var(--color-green-05); --color-success: var(--color-green-20); --color-success-background: var(--color-green-80); --color-info-text: var(--color-blue-05); --color-info: var(--color-blue-20); --color-info-background: var(--color-blue-80); /* ── 간격 (Spacing) — 4의 배수 스케일, 2px 는 예외 시작점 ── */ --spacing-2: 2px; --spacing-4: 4px; --spacing-6: 6px; /* 예외 — Figma spacing/6 실존 (탭 칩 간격, 60:143 등록 2026-07-31) */ --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --spacing-20: 20px; --spacing-24: 24px; --spacing-28: 28px; /* Figma spacing/28 (마이페이지 LNB 좌우패딩 MY-7000 등록 2026-08-07) */ --spacing-32: 32px; --spacing-36: 36px; /* Figma spacing/36 (마이페이지 요약카드 상하패딩 MY-7000 등록 2026-08-07) */ --spacing-40: 40px; --spacing-48: 48px; --spacing-56: 56px; /* Figma spacing/56 실존 (로그인 JI-8100 등록 2026-08-03) */ --spacing-60: 60px; /* Figma spacing/60 (마이페이지 LNB↔컨텐츠 간격 MY-7000 등록 2026-08-07) */ --spacing-64: 64px; --spacing-80: 80px; --spacing-120: 120px; /* Figma spacing/120 실존 (로그인 JI-8100 등록 2026-08-03) */ /* ── 래디어스 (Radius) ─────────────────────────────────── */ --radius-xsmall: 8px; --radius-small: 12px; --radius-medium: 16px; --radius-large: 24px; --radius-xlarge: 40px; --radius-xxlarge: 48px; --radius-full: 999px; /* pill·원형 */ /* ── 그림자 (Elevation) — Figma 스타일 shadow 4 (드롭다운 시안 43:2345 등록 2026-08-03) ── */ --shadow-panel: 0 0 2px rgba(18, 20, 33, 0.08), 0 16px 24px rgba(18, 20, 33, 0.12); /* 띄운 패널(드롭다운·툴팁) */ --shadow-calendar: 0 6px 4px rgba(24, 39, 75, 0.12), 0 8px 8px rgba(24, 39, 75, 0.08); /* 캘린더 팝업 (공동체 상영 신청 시안 1926:79202 등록 2026-08-18 — shadow-panel 과 별개 스타일) */ /* ── 타이포 (Typography) — 폰트 정의: fonts.css. 스케일은 타이포 가이드 확정 후 추가 ── */ --font-family-base: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; --font-family-display: 'Paperlogy', var(--font-family-base); /* 제목·브랜드 표시용 */ --font-family-brand: 'SavetheChildren', var(--font-family-base); /* 세이브더칠드런 브랜드 서체(주로 라틴/영문) — 신규 화면은 이 토큰 참조 */ /* ── 레이아웃 (Layout) — PC 1024px↑ / Mobile 390~1023px ── */ --layout-content-width: 1400px; /* PC 본문 콘텐츠 최대 폭 */ --layout-margin: 24px; /* PC 콘텐츠 좌우 최소 여백 */ --layout-margin-mobile: 16px; /* Mobile 좌우 여백 */ --layout-gutter: 16px; /* PC 콘텐츠 12컬럼 거터 */ --layout-gutter-wide: 24px; /* 전폭(Common) 섹션 12컬럼 거터 */ --layout-gutter-mobile: 16px; /* Mobile 6컬럼 거터 */ }