/* ========================================================================== CGV 예매 오픈 알리미 — Design Tokens -------------------------------------------------------------------------- 단일 진실 원천. style.css는 이 파일의 custom property만 사용한다. 하드코딩 색상/크기 금지. 새 값이 필요하면 이 파일에 토큰을 먼저 추가한다. 컨셉: "심야 상영관" — 따뜻한 잉크/필름지 뉴트럴 + 프로젝터 브라스 골드 액센트. 상세 근거·컴포넌트 스펙: docs/DESIGN.md ========================================================================== */ :root { /* 네이티브 폼 컨트롤(date/time picker, 스크롤바)이 시스템 테마를 따르게 한다 */ color-scheme: light dark; /* ====================================================================== 1. TYPOGRAPHY ====================================================================== */ /* Pretendard가 설치/로드되어 있으면 사용, 아니면 각 OS 한글 시스템 폰트로 폴백. 네트워크 의존 없음. (선택) CDN 사용 시 docs/DESIGN.md §3 참고. */ --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif; /* 시각·날짜·좌석수 등 "상영시간표 숫자" 전용. 반드시 font-variant-numeric: tabular-nums와 함께. */ --font-mono: ui-monospace, "SFMono-Regular", "SF Mono", "Cascadia Mono", "JetBrains Mono", Consolas, "D2Coding", Menlo, monospace; /* 크기 스케일 (root 16px 기준) */ --fs-2xs: 0.6875rem; /* 11px — 배지 보조, 캡션 */ --fs-xs: 0.75rem; /* 12px — 배지 라벨, 폼 힌트 */ --fs-sm: 0.8125rem; /* 13px — 카드 메타, 상대 시각 */ --fs-base: 0.9375rem; /* 15px — 본문 기본, 폼 입력값 */ --fs-md: 1rem; /* 16px — 버튼 라벨, 강조 본문 */ --fs-lg: 1.125rem; /* 18px — 카드 제목(영화명), 섹션 타이틀 */ --fs-xl: 1.3125rem; /* 21px — 다이얼로그 제목, 헤더 로고 */ --fs-2xl: 1.625rem; /* 26px — 빈 상태 제목 */ --fs-3xl: 2rem; /* 32px — 예비(숫자 강조) */ /* 행간 — 한글은 라틴보다 넉넉하게 */ --lh-tight: 1.25; /* 큰 제목 */ --lh-snug: 1.4; /* 카드 제목, 버튼 */ --lh-normal: 1.6; /* 기본 UI 텍스트 */ --lh-relaxed: 1.75; /* 여러 줄 안내문 */ /* 굵기 — 한글 가독성 때문에 300 이하 사용 금지 */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* 자간 */ --ls-tight: -0.02em; /* 18px 이상 제목 */ --ls-normal: -0.005em; /* 본문 */ --ls-mono: 0.01em; /* 모노 숫자 */ /* ====================================================================== 2. SPACING (4px 그리드) ====================================================================== */ --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-2-5: 10px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ====================================================================== 3. RADIUS ====================================================================== */ --radius-xs: 4px; /* 회차 칩, 태그 */ --radius-sm: 6px; /* 작은 버튼, 아이콘 버튼 */ --radius-md: 10px; /* 입력, 버튼, 세그먼트 */ --radius-lg: 14px; /* 카드, 패널 */ --radius-xl: 20px; /* 다이얼로그, 빈 상태 박스 */ --radius-full: 999px;/* 배지, 펄스 점 */ /* ====================================================================== 4. LAYOUT / SIZING ====================================================================== */ --container-max: 1160px; /* 페이지 최대 폭 */ --container-pad: var(--space-4); /* 모바일 좌우 여백 */ --container-pad-lg: var(--space-8); /* ≥1024px 좌우 여백 */ --col-form-w: 380px; /* 데스크톱 좌측 폼 컬럼 고정 폭 */ --col-gap: var(--space-8); /* 폼/목록 컬럼 간격 */ --header-h: 60px; --control-h: 44px; /* 기본 컨트롤 높이 = 최소 터치 타깃 */ --control-h-sm: 36px; /* 포인터 환경 전용 보조 버튼 (모바일에서는 44px로 승격) */ --touch-min: 44px; /* 모든 인터랙티브 요소의 최소 hit area */ --icon-sm: 16px; --icon-md: 20px; --rail-w: 3px; /* watch 카드 좌측 상태 레일 두께 */ --border-w: 1px; /* ====================================================================== 5. Z-INDEX ====================================================================== */ --z-base: 0; --z-sticky: 100; /* sticky 헤더, sticky 폼 컬럼 */ --z-popover: 200; /* 자동완성 리스트박스 */ --z-dialog: 800; /* + backdrop */ --z-toast: 900; /* ====================================================================== 6. MOTION ====================================================================== */ --dur-instant: 90ms; /* hover/active 색 변화 */ --dur-fast: 140ms; /* 버튼, 배지, 포커스 링 */ --dur-base: 200ms; /* 카드 상태 전환, 아코디언 */ --dur-slow: 320ms; /* 토스트/다이얼로그 진입 */ --dur-pulse: 2.4s; /* WATCHING 라이브 점 */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* 진입 — 기본값 */ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* 상태 변화 */ --ease-emphasized: cubic-bezier(0.34, 1.28, 0.64, 1); /* 토스트 등 강조 진입 */ /* ====================================================================== 7. COLOR — LIGHT (기본) --------------------------------------------------------------------- 뉴트럴은 중성회색이 아니라 따뜻한 잉크/필름지 계열이다. ====================================================================== */ /* 표면 */ --color-bg: #f7f4f0; /* 페이지 바탕 — 필름지 */ --color-bg-subtle: #efeae4; /* 섹션 구분용 옅은 바닥 */ --color-surface: #ffffff; /* 카드/폼 패널 */ --color-surface-raised: #ffffff; --color-surface-hover: #faf8f5;/* 카드 hover */ --color-surface-sunken: #f2ede7;/* 입력 내부, 회차 칩 바닥 */ --color-overlay: rgba(26, 23, 20, 0.44); /* 다이얼로그 backdrop */ /* 경계선 */ --color-border: #e4ded6; --color-border-strong: #cfc6bb; /* 입력 테두리, hover 경계 */ --color-border-muted: #efeae4; /* 카드 내부 구분선 */ /* 텍스트 (모두 --color-surface 위에서 4.5:1 이상) */ --color-text: #1a1714; /* 17.8:1 */ --color-text-secondary: #57504a;/* 7.9:1 */ --color-text-tertiary: #6f6862; /* 5.5:1 — 12~13px 메타에도 안전 */ --color-text-inverse: #fbf9f6; --color-text-link: #1a56c4; /* 브랜드 / 주 액션 — 프로젝터 브라스 골드. ⚠ 골드는 "채움(fill)·장식선" 전용. 텍스트 색으로 쓰지 않는다(대비 미달). */ --color-primary: #dfa22b; --color-primary-hover: #cf9420; --color-primary-active: #b98217; --color-primary-soft: #fdf3df; /* 골드 틴트 바닥 */ --color-primary-border: #f0dcae; --color-on-primary: #1a1714; /* 골드 위 잉크 텍스트 — 7.9:1 */ /* 파괴적 액션 — 커튼 크림슨 */ --color-danger: #b3202e; --color-danger-hover: #9c1a27; --color-danger-soft: #fceceb; --color-danger-border: #f2cfcd; --color-on-danger: #ffffff; /* 6.6:1 */ /* 피드백 (토스트/인라인 알림) */ --color-success: #0e7a50; --color-success-soft: #e4f4ec; --color-success-border: #bfe4d3; --color-warning: #9a5a00; --color-warning-soft: #fcf0dc; --color-warning-border: #f2dcb0; --color-info: #1a56c4; --color-info-soft: #e6eefc; --color-info-border: #c3d6f7; /* 포커스 링 */ --color-focus: #1a56c4; --focus-ring-w: 2px; --focus-ring-offset: 2px; /* ---------------------------------------------------------------------- 7-1. WATCH STATUS — 6종 배지 + PENDING 각 상태는 fg(라벨·아이콘·카드 레일) / bg(배지 바닥) / border 3종 세트. fg는 해당 bg 위에서 4.5:1 이상. ---------------------------------------------------------------------- */ /* WATCHING — 🟢 예매 오픈 대기중 (라이브 그린 + 펄스 점) */ --state-watching-fg: #0e7a50; --state-watching-bg: #e4f4ec; --state-watching-border: #bfe4d3; /* ALREADY_OPEN — 🔵 이미 예매 오픈됨 (코발트) */ --state-open-fg: #1a56c4; --state-open-bg: #e6eefc; --state-open-border: #c3d6f7; /* NOTIFIED — ✅ 알림 전송 완료 (티켓 스탬프 와인) */ --state-notified-fg: #8e2f53; --state-notified-bg: #faeaf0; --state-notified-border: #f0cedc; /* PAUSED — ⏸ 감시 중지 (슬레이트 · 점선 테두리) */ --state-paused-fg: #40525f; --state-paused-bg: #eaeff4; --state-paused-border: #cdd9e3; /* EXPIRED — ⚪ 날짜 만료 (무채색, 카드 전체 저채도) */ --state-expired-fg: #6f6862; --state-expired-bg: #f0ede9; --state-expired-border: #ded8d1; /* PENDING — 등록 직후 baseline 조회 중 (수 초간) */ --state-pending-fg: #57504a; --state-pending-bg: #f0ede9; --state-pending-border: #ded8d1; /* health=degraded — 🟠 조회 오류, 자동 재시도 중. 배지가 아니라 "솔리드 칩"으로 렌더해 상태 배지와 형태부터 구분한다. */ --state-degraded-fg: #ffffff; /* 솔리드 칩 위 텍스트 */ --state-degraded-bg: #9a5a00; /* 솔리드 앰버 */ --state-degraded-border: #9a5a00; --state-degraded-soft-fg: #9a5a00; /* 인라인 안내문 텍스트용 */ --state-degraded-soft-bg: #fcf0dc; /* ====================================================================== 8. ELEVATION — 따뜻한 잉크 그림자 (푸른 회색 금지) ====================================================================== */ --shadow-xs: 0 1px 2px rgba(26, 23, 20, 0.06); --shadow-sm: 0 1px 2px rgba(26, 23, 20, 0.05), 0 2px 6px rgba(26, 23, 20, 0.05); --shadow-md: 0 2px 4px rgba(26, 23, 20, 0.05), 0 8px 20px -6px rgba(26, 23, 20, 0.12); --shadow-lg: 0 12px 36px -10px rgba(26, 23, 20, 0.22), 0 2px 8px rgba(26, 23, 20, 0.08); --shadow-focus: 0 0 0 var(--focus-ring-offset) var(--color-surface), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-w)) var(--color-focus); /* 헤더 하단 "스크린 빛" 헤어라인 */ --gradient-screen-light: linear-gradient( 90deg, transparent 0%, rgba(223, 162, 43, 0) 4%, rgba(223, 162, 43, 0.55) 50%, rgba(223, 162, 43, 0) 96%, transparent 100% ); /* 스켈레톤 로딩 */ --skeleton-base: #ece6df; --skeleton-shine: #f6f2ec; } /* ========================================================================== 9. COLOR — DARK (@prefers-color-scheme) 상영관 소등 상태. 뉴트럴은 따뜻한 차콜, 표면은 border로 분리하고 그림자는 약하게 쓴다(어두운 배경에서 그림자는 잘 보이지 않는다). ========================================================================== */ @media (prefers-color-scheme: dark) { :root { /* 표면 */ --color-bg: #14110f; --color-bg-subtle: #191614; --color-surface: #1d1917; --color-surface-raised: #221d1b; --color-surface-hover: #262120; --color-surface-sunken: #171413; --color-overlay: rgba(8, 6, 5, 0.66); /* 경계선 */ --color-border: #332c29; --color-border-strong: #4a413c; --color-border-muted: #2a2422; /* 텍스트 (--color-surface 위 기준) */ --color-text: #f2ede7; /* 15.1:1 */ --color-text-secondary: #b8afa6;/* 8.1:1 */ --color-text-tertiary: #948a81; /* 5.2:1 */ --color-text-inverse: #14110f; --color-text-link: #8fb6ff; /* 브랜드 — 어두운 배경에서 한 단계 밝게 */ --color-primary: #f0b846; --color-primary-hover: #f7c766; --color-primary-active: #dda634; --color-primary-soft: #2a2018; --color-primary-border: #4a3a1e; --color-on-primary: #14110f; /* 9.7:1 */ --color-danger: #e8564c; --color-danger-hover: #f2695f; --color-danger-soft: #2c1917; --color-danger-border: #4d2723; --color-on-danger: #1a0d0b; --color-success: #45c98f; --color-success-soft: rgba(69, 201, 143, 0.14); --color-success-border: rgba(69, 201, 143, 0.30); --color-warning: #e6a13a; --color-warning-soft: rgba(230, 161, 58, 0.14); --color-warning-border: rgba(230, 161, 58, 0.30); --color-info: #7ca9ff; --color-info-soft: rgba(124, 169, 255, 0.14); --color-info-border: rgba(124, 169, 255, 0.30); --color-focus: #8fb6ff; /* 상태 — 다크에서는 fg를 밝게, bg는 저알파 틴트로 */ --state-watching-fg: #45c98f; --state-watching-bg: rgba(69, 201, 143, 0.16); --state-watching-border: rgba(69, 201, 143, 0.32); --state-open-fg: #7ca9ff; --state-open-bg: rgba(124, 169, 255, 0.16); --state-open-border: rgba(124, 169, 255, 0.32); --state-notified-fg: #e58aab; --state-notified-bg: rgba(229, 138, 171, 0.16); --state-notified-border: rgba(229, 138, 171, 0.32); --state-paused-fg: #9db2c4; --state-paused-bg: rgba(157, 178, 196, 0.14); --state-paused-border: rgba(157, 178, 196, 0.30); --state-expired-fg: #8f857c; --state-expired-bg: rgba(143, 133, 124, 0.12); --state-expired-border: rgba(143, 133, 124, 0.26); --state-pending-fg: #b8afa6; --state-pending-bg: rgba(184, 175, 166, 0.12); --state-pending-border: rgba(184, 175, 166, 0.26); --state-degraded-fg: #14110f; --state-degraded-bg: #e6a13a; --state-degraded-border: #e6a13a; --state-degraded-soft-fg: #e6a13a; --state-degraded-soft-bg: rgba(230, 161, 58, 0.14); /* 그림자 — 다크에서는 존재감만 남기고 경계선이 층위를 담당한다 */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.36); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.28); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.44), 0 10px 24px -8px rgba(0, 0, 0, 0.55); --shadow-lg: 0 16px 44px -12px rgba(0, 0, 0, 0.72), 0 2px 8px rgba(0, 0, 0, 0.5); --gradient-screen-light: linear-gradient( 90deg, transparent 0%, rgba(240, 184, 70, 0) 4%, rgba(240, 184, 70, 0.42) 50%, rgba(240, 184, 70, 0) 96%, transparent 100% ); --skeleton-base: #262120; --skeleton-shine: #302a28; } } /* ========================================================================== 10. MOTION 감소 설정 — 모든 전환/애니메이션을 사실상 제거 ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 1ms; --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-pulse: 0s; } }