/* * tokens.css — 프로젝트 전역 디자인 토큰 * * 모든 화면(로비/대기방/인게임/결과)이 공유하는 단일 참조원(source of truth). * 색/타이포/간격/모서리/보더/그림자를 CSS 커스텀 프로퍼티로만 노출한다. * 컴포넌트는 이 파일의 var(--token) 만 참조하고, 원시 값을 직접 쓰지 않는다. * * 비주얼 방향성: "이펙트가 화려한 카툰 렌더링 풍" * - 높은 채도의 팝한 색 * - 굵은 잉크 아웃라인(border) * - 흐림 없는 하드 오프셋 그림자(스티커/코믹 느낌) * - 둥근 모서리와 두툼한 디스플레이 서체 */ :root { /* ── Color ───────────────────────────────────────────── 역할별 시맨틱 색. 배경/표면/텍스트/브랜드/강조/상태색. */ --color-surface-base: #2a1f5c; /* 페이지 배경 (딥 그레이프) */ --color-surface-raised: #ffffff; /* 카드·패널 표면 */ --color-surface-sunken: #efe9ff; /* 인셋·입력 필드 배경 */ --color-ink: #17123a; /* 카툰 아웃라인 + 기본 텍스트 잉크 */ --color-text-default: #17123a; /* 밝은 표면 위 기본 텍스트 */ --color-text-muted: #6b6396; /* 보조/설명 텍스트 */ --color-text-inverse: #fdf7ff; /* 어둡거나 컬러풀한 표면 위 텍스트 */ --color-primary: #ff4d6d; /* 주요 액션/브랜드 (방 만들기 등) */ --color-primary-strong: #e02e54; /* primary hover/pressed 강조 */ --color-secondary: #ffd23f; /* 하이라이트 옐로우 */ --color-accent: #35c8d8; /* 터콰이즈 팝 */ --color-support: #8a63ff; /* 그레이프 보조 강조 */ --color-success: #3ddc84; /* 성공/긍정 상태 */ --color-danger: #ff3b3b; /* 오류/위험 상태 */ --color-warning: #ffb020; /* 경고 상태 */ /* 테트로미노 조각 정체성 색: 타입 id(I/O/T/S/Z/J/L)에 안정 매핑. 브랜드/상태색과 분리된 독립 시맨틱(조각 정체성). 딥 well 위에서 또렷이 구분되도록 7종을 서로 다른 고채도 팝 색상으로 잡는다. */ --color-piece-i: #29d3e6; /* I — 시안 */ --color-piece-o: #ffce3a; /* O — 옐로우 */ --color-piece-t: #a855f7; /* T — 퍼플 */ --color-piece-s: #4ade5b; /* S — 그린 */ --color-piece-z: #ff5470; /* Z — 레드 */ --color-piece-j: #3b82f6; /* J — 블루 */ --color-piece-l: #ff9424; /* L — 오렌지 */ /* 보드(플레이필드) 색: 조각이 튀도록 well 을 페이지 배경보다 더 어둡게, 그 위에 미세한 그리드라인. (셀 크기·간격은 반응형 레이아웃 설정값으로 렌더링 단계가 소유한다 — 토큰 아님.) */ --color-board-well: #1b1440; /* 플레이필드 well 배경(딥 그레이프) */ --color-grid-line: #3a2d6b; /* 셀 격자선(well 위 은은한 구분선) */ /* 아이템 정체성 색: 획득 가능한 아이템 종류(id)에 안정 매핑되는 대표색. 조각 정체성(color-piece-*)과 같은 계층의 독립 시맨틱 — 브랜드/상태색에 얹지 않아, 브랜드 변경이 아이템 정체성을 흔들지 않게 결합을 끊는다. id 는 엔진·서버·클라이언트가 공유하는 계약(카탈로그 참조). */ --color-item-bomb: #ff3860; /* bomb 폭탄 — 크림슨 */ --color-item-lightning: #ffcc29; /* lightning 번개 — 골드 */ --color-item-shield: #3d6bff; /* shield 방패 — 로열 블루 */ --color-item-potion: #2ec4b6; /* potion 물약 — 틸 */ --color-item-magnet: #9d4edd; /* magnet 자석 — 바이올렛(자기장 끌림) */ --color-item-star: #e94dd6; /* star 별 — 마젠타 스파클(골드는 lightning 점유) */ --color-item-meteor: #ff6b35; /* meteor 운석 — 화염 오렌지(불타는 꼬리) */ --color-item-broom: #66d92e; /* broom 빗자루 — 라임 그린(정화·청소의 상쾌함, 타 id 색 계열 회피) */ --color-item-fog: #1f9fe0; /* fog 안개 — 차가운 스카이/애저(시야 흐림, 쓰레기 회색과도 구별) */ /* 아이템 정체성 글리프: 각 아이템 id 에 안정 매핑되는 언어 무관 아이콘 글리프의 렌더 계층 단일 출처(값의 의미상 소유처는 카탈로그 계약). 셀·프리뷰·이펙트가 --item-glyph-{id} 를 content 로 소비하고, 미주입 시 ★ 로 폴백한다 — 개별 셀렉터에 이모지를 흩어 하드코딩하지 않는다(:root 한 곳에서만 선언). 값은 카탈로그 아이콘(item-catalog.js)과 정합해야 한다. */ --item-glyph-bomb: "💣"; --item-glyph-lightning: "⚡"; --item-glyph-shield: "🛡️"; --item-glyph-potion: "🧪"; --item-glyph-magnet: "🧲"; --item-glyph-star: "⭐"; --item-glyph-meteor: "☄️"; --item-glyph-broom: "🧹"; --item-glyph-fog: "🌫️"; /* 순위 정체성 색: 최후 1인 생존으로 가려지는 최종 순위/우승자(시상대) 표시의 등수 대표색. 조각(color-piece-*)·아이템(color-item-*) 정체성과 같은 계층의 독립 시맨틱 — 등수(1/2/3)에 안정 매핑하며, 브랜드/상태색에 얹지 않아 브랜드 변경이 순위 표현을 흔들지 않게 결합을 끊는다. 최후 1인(1위)=골드. 4위 이하는 별도 색 없이 기본 표면 톤을 쓴다(상위 3위만 시상대 강조). */ --color-rank-first: #ffcf3f; /* 1위 — 골드(우승) */ --color-rank-second: #c7ccd6; /* 2위 — 실버 */ --color-rank-third: #cf8a4a; /* 3위 — 브론즈 */ /* 방해(쓰레기) 블록 색: 공격받아 쌓인 '쓰레기 줄'을 이루는 방해 블록의 채움색. 조각(color-piece-*)·아이템(color-item-*)·순위(color-rank-*) 같은 정체성색과도, 상태색과도 분리된 독립 시맨틱 — 단 이들과 달리 '정체성'이 아니라 "공격으로 생긴 무의미한 방해 블록"을 뜻하는 중립 회색이다. 채도를 죽인 회색이라 고채도 조각/아이템 셀 사이에서 튀지 않으면서, --color-board-well(딥 그레이프 well) 위에서는 또렷이 읽힌다(방해 줄임을 한눈에 구분). */ --color-garbage: #5c5a66; /* 쓰레기 줄 — 무채색에 가까운 중립 회색(정체성 아님) */ /* ── Typography ──────────────────────────────────────── 서체 패밀리 / 크기 스케일 / 굵기 / 행간 / 자간. */ --font-family-display: "Jua", "Baloo 2", "Gaegu", system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI", sans-serif; --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; --text-size-xs: 0.75rem; /* 12px */ --text-size-sm: 0.875rem; /* 14px */ --text-size-md: 1rem; /* 16px 기준 */ --text-size-lg: 1.25rem; /* 20px */ --text-size-xl: 1.75rem; /* 28px */ --text-size-2xl: 2.5rem; /* 40px */ --text-size-3xl: 3.5rem; /* 56px 히어로 */ --font-weight-regular: 400; --font-weight-bold: 700; --font-weight-black: 900; --line-height-tight: 1.1; --line-height-snug: 1.3; --line-height-base: 1.6; --letter-spacing-tight: -0.01em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.04em; /* ── Spacing ─────────────────────────────────────────── 여백/간격/패딩 배분. 4px(0.25rem) 기반 스케일. */ --space-2xs: 0.25rem; /* 4 */ --space-xs: 0.5rem; /* 8 */ --space-sm: 0.75rem; /* 12 */ --space-md: 1rem; /* 16 */ --space-lg: 1.5rem; /* 24 */ --space-xl: 2rem; /* 32 */ --space-2xl: 3rem; /* 48 */ --space-3xl: 4rem; /* 64 */ /* ── Radius ──────────────────────────────────────────── 모서리 둥글기. */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px; /* 블록 셀(활성/잠긴 스택·고스트·프리뷰 셀)의 둥근 모서리. 크기가 아닌 형태 역할이라 비율값으로 둔다 — 메인/프리뷰/미니 등 서로 다른 셀 스케일에서도 동일한 둥근 비율을 유지해 일관된 인상을 준다(radius-pill 이 크기가 아닌 형태를 담당한 것과 동종). 값을 낮게 잡아 '말랑한 젤리'보다 모서리가 또렷한 '단단한 블록' 인상을 준다(카드/버튼의 넉넉한 pill/lg 둥글기와 대비되는 셀 전용 형태). */ --radius-blob: 22%; /* ── Border ──────────────────────────────────────────── 카툰 아웃라인 두께. 보더 '색'은 color 그룹을 참조한다. */ --border-width-thin: 2px; --border-width-thick: 3px; --border-width-chunky: 5px; /* ── Shadow ──────────────────────────────────────────── 카툰 하드 오프셋 그림자(흐림 0) + 부드러운 깊이 + 강조 글로우. */ --shadow-pop-sm: 3px 3px 0 var(--color-ink); --shadow-pop-md: 5px 5px 0 var(--color-ink); --shadow-pop-lg: 8px 8px 0 var(--color-ink); --shadow-float: 0 10px 24px rgba(23, 18, 58, 0.28); --shadow-glow: 0 0 18px rgba(255, 210, 63, 0.65); /* 발동 순간의 더 강한 강조 광채: shadow-glow 와 같은 골드 계열이되 반경/알파를 키운 2겹 글로우(안쪽 조밀 + 바깥 번짐)로, 아이템 발동 버스트가 확 터지는 임팩트를 준다. shadow-glow 의 강화판(같은 역할·색상, 더 센 강도). */ --shadow-glow-strong: 0 0 16px rgba(255, 210, 63, 0.85), 0 0 40px rgba(255, 210, 63, 0.5); /* ── Motion ──────────────────────────────────────────── 전환·애니메이션의 시간과 이징만. 카툰의 "튀는" 느낌을 위한 오버슈트(pop) 이징을 포함한다. 무엇이 움직이는지(속성)·키프레임은 각 컴포넌트가 소유한다. */ --duration-fast: 120ms; /* 상호작용 상태 전환(선택/처리 중 디밍·hover/press) */ --duration-base: 300ms; /* 이펙트 오버레이 조각(글리프·캡션) 등장 — 발동 메시지 글자 스탬프는 전용 --duration-word-stamp 소비(분리) */ --duration-slow: 600ms; /* 느린 전체 재생(결과 화면 챔피언 축하 글로우·스파크) */ --duration-flicker: 1600ms; /* 아이템 블록 셀 배경 밝기 펄스(자연스러운 반짝임) 1회 왕복 주기(잉크→흰빛→잉크). 급격한 스냅 대신 천천히 오가도록 넉넉히 길게 잡는다 */ --duration-collapse: 360ms; /* 라인 제거 순간 블록이 '깨지는' 연출(락 flash→디졸브/붕괴) 재생 시간. 진행이 잠깐 멈추는 라인 클리어 딜레이라 또렷하되 짧게 잡는다 */ --duration-shake: 420ms; /* 다중(2줄 이상)/연속(콤보≥2) 줄 제거 강화 연출에서 보드 프레임 전체가 짧게 '흔들리는'(board-shake) 지속 시간. 타격감의 '한 방'을 주되 시야를 오래 흔들지 않도록 또렷하고 짧게 잡는다. 흔들림 진폭(px)은 키프레임 구현 설정값이고 이 토큰은 흔들림 시간만 소유한다. 순수 표현 계층 — 낙하/판정 타이밍(clear freeze envelope --duration-collapse)과 독립이다. 렌더러(.board--shake modifier 제거 타이머 SHAKE_MS)가 이 값을 단일 출처로 소비한다(하드코딩 금지). reduced-motion 에서는 흔들림을 생략한다(콤보 팝업 정보는 유지). 화면 흔들림 지속의 단일 출처 */ /* 통합 아이템 이펙트(effect-overlay) 수명 envelope: 등장 → 유지 → 퇴장 3위상을 단일 출처로 소유한다. 전체 수명(--duration-effect-life) = 등장 + 유지 + 퇴장. 컨테이너 페이드(effect-overlay-life)·버스트 지속·JS 정리 수명(EFFECT_LIFE_MS)이 모두 이 토큰을 소비한다. effect-overlay-life 키프레임의 위상 경계 %(등장 끝 41% ≈ 700/1700, 유지 끝 88% ≈ 1500/1700)는 이 위상/전체 비율의 투영이다 — 키프레임 offset 은 CSS 상 토큰화가 불가하므로 아래 위상 지속에서 파생한 값을 명시한다. */ --duration-effect-enter: 700ms; /* 등장 위상: 버스트가 터지고 통합 메시지 글자(음절)가 계단식으로 '박히며' 나타나는 구간. 마지막 글자까지 이 위상 안에서 수렴하도록 500→700ms 로 넓혔다(확장분은 유지 위상에서 차용). 글자 수 N 은 어절보다 크므로 nominal --duration-stagger-step 을 그대로 쓰면 넘칠 수 있어, 조립 계층이 유효 계단 스텝을 (enter−--duration-word-stamp)/(N−1) 로 캡해(--char-stagger 주입) 수렴을 보장한다 */ --duration-effect-hold: 800ms; /* 유지 위상: 완성된 통합 메시지가 판독되도록 머무는 구간. 등장 위상 확장에 맞춰 1000→800ms 로 줄였으나 여전히 세 위상 중 가장 길어 내용 전달을 보장한다 */ --duration-effect-exit: 200ms; /* 퇴장 위상: 오버레이가 빠르게 페이드 아웃하는 구간(easing-exit) */ --duration-effect-life: 1700ms; /* 통합 이펙트 전체 수명 = enter(700) + hold(800) + exit(200). 위상 재분배(등장↑·유지↓)에도 총합 1700ms 고정 → EFFECT_LIFE_MS·큐 창 불변. effect-overlay 컨테이너·버스트 재생 및 JS 정리 수명의 단일 출처 */ --duration-stagger-step: 75ms; /* 통합 발동 메시지의 스탬프 단위(글자·음절)가 하나씩 '박히듯' 순차 등장하는 **nominal** 계단 간격(각 글자 animation-delay = 글자 순번 × 유효 스텝). 글자 수 N 은 어절보다 크므로, 조립 계층이 등장 위상 수렴을 보장하도록 유효 스텝을 min(이 값, (--duration-effect-enter − --duration-word-stamp)/(N−1)) 로 캡해 --char-stagger 로 주입한다 — 이 토큰은 캡 상한이자 짧은 문구(캡 불필요)의 계단 값이다(폴백 단일 출처). stagger 간격의 단일 출처 */ --duration-word-stamp: 300ms; /* 스탬프 단위(글자·음절) '크게 등장 → 스케일 다운 박힘'(격투 게임식) 1개 글자의 등장 모션 지속 시간. 그동안 각 글자가 큰 시작 스케일(키프레임 소유 — 스케일 값은 컴포넌트 소관, 모션 축 아님)에서 제자리(1)로 easing-pop 오버슈트로 내려꽂힌다. --duration-base(300ms, 글리프·캡션 공용 등장)와 분리된 스탬프 전용 모션(독립 튜닝) — 값은 300ms 로 유지해 개별 스탬프 재생감을 불변으로 둔다. 수렴 조건: 마지막 글자가 등장 위상 안에서 수렴하도록 (글자수 N) ⇒ (N−1) × 유효 계단 스텝 + 이 값 ≤ --duration-effect-enter(700ms). 유효 스텝은 (700−300)/(N−1) 상한으로 캡되므로 N 에 무관하게 항상 수렴한다(어절보다 큰 N 대응). 등장 위상 내부 값이라 전체 수명(--duration-effect-life 1700ms) envelope 은 불변. 글자 스탬프 등장 지속의 단일 출처 */ --duration-travel: 480ms; /* 화면 간 아이콘 투사체(상대 대상 아이템)가 시작 보드→도착 보드까지 날아가는 이동 시간. 순간이동이 아닌 또렷한 비행으로 방향(누가 누구에게)이 직관적으로 읽히도록 420→480ms 로 늘려 투사체 가시성·타격감을 키웠다. 도착이 통합 이펙트 등장 위상(--duration-effect-enter 700ms) 안에서 전체화면 버스트와 맞물리도록 그보다 짧게 유지한다(480 < 700 — 등장 위상 안에서 도착·착탄 임팩트·버스트가 겹친다). 투사체 이동 시간의 단일 출처 */ --duration-impact: 180ms; /* 투사체가 도착 보드에 '착탄'하는 순간의 임팩트 연출(글리프가 제 크기로 내려꽂히며 튀는 스쿼시/플래시) 지속 시간. 도착(--duration-travel 480ms) 직후 시작해 등장 위상(--duration-effect-enter 700ms) 끝(480+180=660 < 700) 안에서 마무리되어 전체화면 버스트 등장과 시간적으로 맞물린다('착탄=버스트'). 착탄 키프레임(items.css)·투사체 노드 정리 버퍼(발사 계층)가 이 값을 단일 출처로 소비한다(하드코딩 금지). 착탄 임팩트 타이밍의 단일 출처 */ --easing-standard: cubic-bezier(0.2, 0, 0, 1); /* 일반 상태 전환 */ --easing-pop: cubic-bezier(0.34, 1.56, 0.64, 1); /* 등장 강조(오버슈트 팝) */ --easing-exit: cubic-bezier(0.4, 0, 1, 1); /* 퇴장(빠르게 가속) */ --easing-gentle: cubic-bezier(0.37, 0, 0.63, 1); /* 은은한 왕복(양 끝에서 완만히 머무는 대칭 이즈인아웃) — 밝기 펄스/셔머가 스냅 없이 부드럽게 오간다 */ --easing-travel: cubic-bezier(0.5, 0, 0.1, 1); /* 화면 간 투사체 이동 곡선. 발사 보드에서 더 강하게 가속하며 튀어나가(ease-in 심화) 도착 보드에서 급감속하며 내려꽂히는(ease-out) 비대칭 이즈 — 착탄 순간의 급감속이 착탄 임팩트(--duration-impact)·버스트로 자연스럽게 이어진다('발사→착탄'). 발사·착탄 프로파일을 또렷이 하도록 in/out 을 (0.45,0,0.15,1)→(0.5,0,0.1,1)로 조정. 기존 이징(standard/pop/exit)이 못 주는 발사·착탄 전용 */ }