/* ========================================================================== 디자인 토큰 — WHALEY : SAPPHIRE PLATINUM (딥 사파이어 · 플래티넘) 2026-09-10 디자인팀 지정. 원본(exit-igaming)의 보라·금 팔레트를 갈아 끼웠다. 받은 값 여섯: 배경 #05080F · 서피스 #0C1220 · 사이드바 #162034 프라이머리 #1E4FA8 · CTA #D8DEE6 · 텍스트 #BECBDD 나머지 단계는 그 여섯의 결로 뽑았다. ⚠⚠ CTA 가 <밝다>. 원본은 노랑(#FFCE00)이라 어두운 글자를 올렸는데, 플래티넘도 밝은 금속이라 같은 규칙이 그대로 맞는다 — --text-on-cta 는 바닥색이다. ⚠ 등급 골드는 vip.css 가 --gold-hi/--gold-lo 를 <따로> 들고 있다. 여기 CTA 를 바꿔도 VIP 금색은 그대로다. (예전 주석의 「골드는 --cta 를 그대로 쓴다」는 낡았다 — 플래티넘으로 바뀌었으므로 더는 참이 아니다) ========================================================================== */ :root{ /* ---- 배경 4단 ------------------------------------------------------ 테두리와 그림자를 거의 쓰지 않고 이 4단계 밝기 차이로만 구분한다. --------------------------------------------------------------------- */ --bg: #05080F; /* 0 · 페이지 바닥 (지정) */ --surface-1: #0C1220; /* 1 · 카드 · 패널 · 헤더 · 사이드바 (지정) */ --surface-2: #162034; /* 2 · 카드 위의 카드 · 버튼 · 입력창 (지정) */ --surface-3: #22304B; /* 3 · 사이드바 그룹 박스 */ /* ---- 사이드바 세부 ---- */ --nav-box: #1A2740; /* 펼친 그룹 박스 바탕 */ --nav-head: #24344F; /* 펼친 그룹 헤더 (한 단계 밝다) */ --nav-closed: #101A2C; /* 접힌 그룹 · 단일 항목 */ --nav-caret: #2E4570; /* 화살표 칩 */ --nav-item: #A9BBD3; /* 하위 항목 글자 */ --nav-icon: #7C92B3; /* 하위 항목 아이콘 */ --nav-badge: #0E1626; /* LIVE 뱃지 바탕 */ /* ---- 브랜드 ---- */ --primary: #1E4FA8; /* 사파이어 — 활성 메뉴 · 주요 버튼 · 선택 (지정) */ --cta: #D8DEE6; /* 플래티넘 — 입금 · 가장 강한 행동 유도 (지정) */ --cta-hi: #F2F6FA; /* CTA 버튼 위쪽 하이라이트 (금속 결) */ --cta-lo: #8E9CAE; /* CTA 버튼 아래쪽 그림자 */ --success: #3FD98A; /* 잔액 · 당첨 · 성공 — 사파이어 위에서 읽히는 초록 */ /* ★ 빨강을 <여기로 올린다> (2026-09-15). wallet.css 안에 --lose 로만 있어서 다른 화면은 쓸 수 없었고, 쓰려면 저마다 #ff5470 을 베껴 적어야 했다. 베낀 값은 언젠가 한쪽만 바뀐다. */ --danger: #FF5470; /* 손실 · 경고 · 운영 답변 — 사파이어 위에서 읽히는 빨강 */ --veil: rgba(120,145,180,.48); --line: #2A3A57; /* 헤더 버튼·잔액 테두리 — 배경(#162034)보다 뚜렷하게 밝아야 보인다 */ /* ---- 분류 색 (프로모션) ---- ★ 이것은 <갈래를 가리는> 색이라 서로 달라야 한다. 브랜드 색에 맞추다 비슷해지면 회원이 카테고리를 구분하지 못한다. */ --tag-casino: #B01340; /* 카지노 — 크림슨 */ --tag-sports: #43C46A; /* 스포츠 — 초록 */ --tag-vip: #E7B93C; /* VIP — 금 (등급색과 같은 결) */ --tag-mini: #3FC8F5; /* 미니게임 — 하늘 */ /* ---- 종목 색 (스포츠 목록) ---- ★ 경기 줄에서 <종목을 가리는> 색이다. 분류 색과 같은 뜻이 아니다 — 분류 색은 카지노/스포츠/VIP 를 가르고, 이것은 스포츠 <안에서> 축구와 야구를 가른다. 그래서 서로 달라야 하고, 브랜드 색에 맞추면 안 된다. ⚠ 진하게 쓰지 않는다. 목록에 스무 줄이 깔리는데 100% 로 쓰면 알록달록해진다. 띠 5px · 워시 22% · 글리프 15% · 시각 앞 점 8px 이 지금 세기다(sports.css .sb-row[data-sport]). ⚠ 여기 없는 종목은 --sp 기본값(회색)으로 떨어진다. 색을 더 늘릴 때는 이미 있는 다섯과 <눈으로 구분되는지> 보고 넣는다. */ --sp-soccer: #3FD98A; /* 축구 — 잔디 초록 */ --sp-basketball: #FF8A3C; /* 농구 — 공 주황 */ --sp-baseball: #E7B93C; /* 야구 — 흙 금색 */ --sp-volleyball: #3FC8F5; /* 배구 — 코트 하늘 */ --sp-ice-hockey: #8FB6FF; /* 아이스하키 — 얼음 파랑 */ /* 2026-09-17 추가 다섯. 앞의 다섯과 <겹치지 않는 색>으로 골랐다 — 경기 목록을 세로로 훑을 때 종목이 색으로 갈려야 한다. */ --sp-tennis: #C6F24E; /* 테니스 — 공 형광 연두 */ --sp-handball: #FF6FA3; /* 핸드볼 — 코트 분홍 */ --sp-american-football: #B07A4A; /* 미식축구 — 가죽 갈색 */ --sp-e-games: #A78BFA; /* E게임 — 네온 보라 */ --sp-mma-boxing: #F2594B; /* MMA·복싱 — 글러브 빨강 */ /* ---- 업 · 다운 ---- 선물게임(UP AND DOWN)의 상징색. **빨강은 언제나 다운**이다. 머리 마크도, 고른 버튼도 같은 뜻으로 쓴다. ⚠ 업(파랑)이 --primary 와 <같은 계열>이다. 한 단계 밝게 잡아 두어야 「선택된 것」과 「업」이 섞이지 않는다. */ --updown-up: #4E93FF; /* 업 — 파랑 */ --updown-down: #FF4B4B; /* 다운 — 빨강 */ /* ---- 등급 색 ---- ★ 실버는 원래 「팔레트가 연보라라 은색으로 안 읽혀서」 따로 뒀다. 이제 팔레트가 차가운 회색이라 그 까닭은 사라졌지만, 금속 결을 내는 3단(하이라이트·본색·그림자)은 여전히 필요해서 그대로 둔다. ⚠ 골드는 vip.css 의 --gold-hi/--gold-lo 다. --cta 가 아니다. */ --tier-silver-hi: #F2F5FB; /* 하이라이트 */ --tier-silver-mid: #C6CDDD; /* 본색 */ --tier-silver-lo: #8E97AC; /* 그림자 */ /* ---- 글자 6단 ------------------------------------------------------ 보조 텍스트가 회색이 아니라 <차가운 청회색>이다. 이것이 핵심이다. --------------------------------------------------------------------- */ --text: #FFFFFF; --text-2: #DCE5F0; --text-3: #BECBDD; /* 지정 — 본문 보조 */ --text-4: #94A6BE; --text-5: #6E829E; --text-6: #52657F; --text-on-cta: #05080F; /* ★ 플래티넘·초록 버튼 위의 어두운 글자 */ /* ---- 타이포 ---- 굵기는 400 · 500 · 700 · 900 네 단계만. 600은 쓰지 않는다. */ --font: "Pretendard", "Excon", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", Arial, sans-serif; --font-vip: "Playfair Display SC", "Nanum Myeongjo", serif; --fs-badge: 9px; --lh-badge: 16px; --fs-tab: 11px; --lh-tab: 16px; /* 모바일 하단 탭바 라벨 */ --fs-sm: 12px; --lh-sm: 16px; /* 가장 많이 쓰는 작은 글씨 */ --fs-xs: 13px; --lh-xs: 16px; --fs-base: 14px; --lh-base: 20px; --fs-md: 16px; --lh-md: 24px; /* 가장 많이 쓰는 글씨 */ --fs-lg: 18px; --lh-lg: 26px; --fs-xl: 24px; --lh-xl: 32px; --fs-2xl: 28px; --lh-2xl: 36px; /* 섹션 제목 */ --fs-3xl: 36px; --lh-3xl: 44px; --fs-4xl: 44px; --lh-4xl: 56px; /* VIP 대제목 */ --fs-hero: 56px; --lh-hero: 64px; /* ---- 모양 ---- */ --r-xs: 4px; --r-sm: 6px; --r-chip: 8px; --r-tab: 10px; --r: 12px; /* 기본 */ --r-lg: 16px; /* 헤더 버튼 · 모달 */ --r-full: 999px; /* ---- 모션 ---- 탄성 곡선. 색이 바뀔 때 톡 튀는 느낌을 준다. */ --ease-pop: cubic-bezier(0.7, -0.4, 0.4, 1.4); --t-color: .2s ease-in-out; --t-bg: .15s var(--ease-pop); --t-zoom: .3s ease-in-out; /* ---- 치수 (PC) ---- */ --header-h: 72px; --sidebar-w: 220px; --nav-w: 188px; /* 사이드바 안쪽 메뉴 폭 */ --nav-row: 36px; /* 메뉴 행 높이 — 그룹·하위 공통 */ --icon: 24px; /* 아이콘은 예외 없이 24 */ --btn-sm: 36px; /* 사이드바 접기 · 메뉴 화살표 */ --btn: 44px; /* 헤더 아이콘 버튼 */ --container: 1200px; --gutter: 24px; --gap-sec: 24px; /* 섹션 사이 */ --gap-card: 16px; /* 카드 사이 */ --fs-sec: 28px; /* 섹션 제목 */ --tabbar-h: 0px; } /* ---- 모바일 ---- 색·글꼴·라운드는 그대로 두고 간격과 크기만 줄인다. */ @media (max-width: 1024px){ :root{ --header-h: 56px; --gutter: 16px; --gap-sec: 16px; --gap-card: 8px; --fs-sec: 24px; --btn: 40px; --tabbar-h: 60px; } } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation:none !important; transition:none !important; } }