/*--------------------------------------------------------- 포세이돈 — the palette. ── 값이 어디서 왔는가 ──────────────────────────────── 지어낸 것이 없습니다. bluebet export 자신의 `:root` 열일곱 개에서 가져왔습니다 — `custom.css` 의 `--theme-*` 아홉과 `game.css` 의 `--bg-*`/`--accent-*`/`--text-*` 여덟. --theme-bg-dark #0A0F1A 쪽 바탕 --theme-bg-panel #141828 카드 --theme-border-color #313448 선 --theme-accent-blue #00A9FF 강조 --theme-text-light #EAEAEA 글자 --theme-text-muted #8A91A8 흐린 글자 ── `--color-gold` 가 왜 파란가 ─────────────────────── 그 이름은 「금색」이 아니라 **「돈」**입니다 — 금액을 무슨 색으로 찍는가. 이 export 는 금액을 `--theme-accent-blue` 로 찍습니다. 헤라도 같은 이유로 청록이고, 제우스의 답을 따 온 이름이 그대로 남은 것이 이 토큰이 이고 있는 흠입니다. 따라야 하는 것은 이름이 아니라 뜻입니다. ── 왜 이 파일이 있는가 ─────────────────────────────── 없으면 이 스킨은 자기 시트가 안 닿는 곳마다 제우스의 색을 씁니다. 서른한 개 `--color-*` 가 `globals.css` 의 `@theme` 에 있고, 그 블록은 `1bet_v4` 에서 옮겨 온 것이라 **플랫폼의 팔레트가 곧 첫 스킨의 것**이기 때문입니다. 아래는 전부 재선언이고 레이어 밖이라, 순서와 무관하게 `@theme` 를 이깁니다. 이 스킨의 전역 시트 중 **맨 앞**에 실리므로 뒤따르는 시트가 `var(--color-…)` 를 읽으면 이 답이 나옵니다. ---------------------------------------------------------*/ /* ── 밝은 조합이 생기면서 바뀐 것 (2026-09-05) ───────── 아래 스물 몇 개는 값이 박혀 있었습니다. 어두운 조합 다섯만 있을 때는 안 드러났습니다 — 바탕이 다 검정에 가까웠으니 `#070b13` 한 값이 다섯 다 맞았습니다. 아이보리가 들어오면서 틀렸습니다. export 의 시트 일곱(`reset`·`common`· `default`·`game`·`board`·`custom`)이 표면을 **전부 이 이름들로** 칠하므로, 여기 검정이 박혀 있으면 상아빛 쪽 위에 검은 덩어리가 뜹니다. 두 가지 방식으로 풉니다: - **면**은 `color-mix` 로 조합의 바탕에서 한 단씩 옮깁니다. 검정을 섞으면 어느 조합에서나 「더 눌린」 이고, 겹(`--t-veil-rgb`) 을 섞으면 어느 조합에서나 「더 뜬」 입니다. - **선**은 알파로 둡니다. 선은 제 밑에 깔린 면과 겨루는 것이라, 값이 아니라 대비로 말해야 조합이 바뀌어도 같은 세기로 남습니다. 옛 값을 알파로 옮긴 비율은 재서 골랐습니다 — `#313448` 을 옛 바탕 `#0a0f1a` 위에 얹으면 흰색 0.17 입니다. 그래서 어두운 다섯은 이 바꿈 전후가 같아 보입니다. */ :root { --color-base: var(--t-base, #0a0f1a); /* 쪽보다 한 단 눌린 띠 — 어느 조합에서나 검정 쪽으로 갑니다. */ --color-deep: color-mix(in srgb, var(--t-base, #0a0f1a) 88%, #000); --color-panel: var(--t-panel, #141828); --color-field: var(--t-sunk, #0f1320); /* 카드 위에 한 단 뜬 칩 — 어두우면 밝게, 밝으면 어둡게. */ --color-raise: color-mix(in srgb, var(--t-panel, #141828) 90%, rgb(var(--t-veil-rgb, 255 255 255))); --color-alt: color-mix(in srgb, var(--t-base, #0a0f1a) 88%, #000); --color-card: var(--t-panel, #141828); --color-sunk: var(--t-sunk, #0f1320); --color-line: rgb(var(--t-veil-rgb, 255 255 255) / 0.17); --color-line-soft: rgb(var(--t-veil-rgb, 255 255 255) / 0.14); --color-line-tile: rgb(var(--t-veil-rgb, 255 255 255) / 0.17); --color-line-head: rgb(var(--t-veil-rgb, 255 255 255) / 0.08); --color-brand: var(--t-accent, #1fb6ff); --color-brand-glow: var(--t-accent-soft, #bfe7ff); /* 돈. 처음엔 강조 파랑이었습니다 — 이 export 가 금액을 그렇게 찍기 때문입니다. 지금은 **조합의 금색**입니다 (2026-09-04 요청: 「블루톤 + 옐로우골드 그런느낌으로 색 조화」). 조작과 금액이 색으로 갈립니다. */ --color-gold: var(--t-money, #e8bd55); --color-gold-alt: var(--t-money-soft, #ffe0a3); /* 뜻이 있는 색은 조합에 안 딸립니다 — 빨강은 어느 조합에서나 막힘이고 초록은 당첨입니다. 칠하는 **면**은 그대로 둡니다. **글자만** 조합을 탑니다. `#c8e6c9` 는 검은 판 위에서 읽으라고 고른 연둣빛이고, 상아빛 위에서는 안 보입니다. 뜻은 초록에 두고 밝기만 조합의 글자색 쪽으로 당깁니다 — 색은 안 바뀌고 읽히기만 합니다. */ --color-danger: #e53935; --color-danger-hover: #c62828; --color-danger-text: color-mix(in srgb, #e53935 62%, var(--t-ink, #eaeaea)); --color-up: #43a047; --color-up-text: color-mix(in srgb, #43a047 42%, var(--t-ink, #eaeaea)); --color-down: #e53935; --color-down-text: color-mix(in srgb, #e53935 42%, var(--t-ink, #eaeaea)); --color-win: #8e54e9; --color-ink: var(--t-ink, #eaeaea); /* 본문보다 한 단 더 또렷하게 — 어두우면 흰 쪽, 밝으면 검은 쪽. */ --color-ink-strong: color-mix(in srgb, var(--t-ink, #eaeaea) 80%, rgb(var(--t-veil-rgb, 255 255 255))); --color-ink-soft: color-mix(in srgb, var(--t-ink, #eaeaea) 82%, var(--t-ink-muted, #8a91a8)); --color-ink-nav: var(--t-ink-muted, #8a91a8); --color-ink-label: var(--t-ink-muted, #8a91a8); --color-ink-muted: color-mix(in srgb, var(--t-ink-muted, #8a91a8) 78%, var(--t-ink, #eaeaea)); --color-ink-team: var(--t-ink-muted, #8a91a8); /* 이 export 는 `reset.css` 에서 SCoreDream 과 Pretendard 를 CDN 으로 불러 그 순서로 씁니다. 숫자 얼굴은 세 스킨이 같습니다 — 금액은 어느 스킨에서나 같은 방식으로 읽힙니다. */ --font-sans: "SCoreDream", "Pretendard", "Noto Sans KR", sans-serif; --font-numeric: "Rajdhani", "SCoreDream", sans-serif; --font-display: "SCoreDream", "Pretendard", sans-serif; } /*--------------------------------------------------------- 공용 컨트롤을 이 스킨의 색과 크기로. 이 export 의 버튼은 모서리 6px 에 높이 34~48 입니다 (`default.css` 의 `.btn` 계열). 헤라의 8px/46~52 보다 각지고 낮습니다. `page-shell.tsx` 는 구조만 들고 있고 숫자는 어느 스킨의 것도 아닙니다. ---------------------------------------------------------*/ :root { --ui-btn-radius: 6px; --ui-btn-h-sm: 34px; --ui-btn-h-md: 42px; --ui-btn-h-lg: 48px; /* 강조색 위의 글자는 조합이 들고 있습니다 (`accentInk`). 박아 두면 밝은 강조색에 흰 글자가 얹히는 조합이 생깁니다 — 표에서 조합마다 재 보고 고른 값이라 여기서 다시 정하면 안 됩니다. */ --ui-btn-primary-bg: var(--color-brand); --ui-btn-primary-ink: var(--t-accent-ink, #04121d); --ui-btn-primary-bg-hover: var(--t-accent, #1fb6ff); --ui-btn-primary-line: transparent; --ui-btn-accent-bg: var(--color-brand); --ui-btn-accent-ink: var(--t-accent-ink, #04121d); --ui-btn-accent-bg-hover: var(--t-accent, #1fb6ff); --ui-btn-accent-line: transparent; --ui-btn-outline-bg: transparent; --ui-btn-outline-ink: var(--color-brand); --ui-btn-outline-bg-hover: var(--color-brand); --ui-btn-outline-ink-hover: var(--t-accent-ink, #04121d); --ui-btn-outline-line: var(--color-brand); /* 조용한 단추는 「카드 위에 한 단 뜬 칩」입니다 — `--color-raise` 와 같은 뜻. */ --ui-btn-quiet-bg: var(--color-raise); --ui-btn-quiet-ink: var(--color-ink-nav); --ui-btn-quiet-bg-hover: color-mix(in srgb, var(--t-panel, #141828) 80%, rgb(var(--t-veil-rgb, 255 255 255))); --ui-btn-quiet-ink-hover: var(--color-ink); --ui-btn-quiet-line: var(--color-line); --ui-btn-quiet-line-hover: var(--color-brand); /* 이 export 의 `.btn-gold` 는 정말 금색입니다 — `--theme-accent-gold`. */ --ui-btn-gold-bg: var(--color-raise); --ui-btn-gold-ink: var(--t-money, #e8bd55); --ui-btn-gold-bg-hover: color-mix(in srgb, var(--t-panel, #141828) 80%, rgb(var(--t-veil-rgb, 255 255 255))); --ui-btn-gold-line: var(--color-line); --ui-btn-danger-bg: var(--color-danger); --ui-btn-danger-ink: #ffffff; --ui-btn-danger-bg-hover: var(--color-danger-hover); --ui-btn-danger-line: transparent; /* 알림 글자도 위와 같습니다 — 뜻은 색에 두고 밝기만 조합을 따릅니다. */ --ui-alert-ok-bg: rgba(67, 160, 71, 0.12); --ui-alert-ok-ink: color-mix(in srgb, #43a047 46%, var(--t-ink, #eaeaea)); --ui-alert-ok-line: rgba(67, 160, 71, 0.4); --ui-alert-bad-bg: rgba(229, 57, 53, 0.12); --ui-alert-bad-ink: color-mix(in srgb, #e53935 46%, var(--t-ink, #eaeaea)); --ui-alert-bad-line: rgba(229, 57, 53, 0.4); --ui-alert-info-bg: rgb(var(--t-accent-rgb, 31 182 255) / 0.1); --ui-alert-info-ink: var(--color-ink); --ui-alert-info-line: rgb(var(--t-accent-rgb, 31 182 255) / 0.4); --ui-alert-warn-bg: rgba(197, 169, 117, 0.14); --ui-alert-warn-ink: color-mix(in srgb, #a8801f 52%, var(--t-ink, #eaeaea)); --ui-alert-warn-line: rgba(197, 169, 117, 0.45); }