/*--------------------------------------------------------- 아테나 — the palette. ── 물려받은 값이 없습니다 ──────────────────────────── 앞의 넷은 전부 레거시 export 의 `:root` 에서 값을 떠 왔습니다. 아테나에는 떠 올 export 가 없으므로 여기 있는 수는 **고른 것**입니다. 고른 기준은 「기존 넷과 겹치지 않을 것」이고, 겹치지 않아야 하는 이유는 요청이 그것이었기 때문입니다 — 「같은 디자인으로 보여서는 안 돼」. 이미 차 있는 자리: 제우스 검정 바탕 + 주황 모서리 3px 헤라 짙은 남색 + 시안 모서리 8px, 시안 글로우 그림자 포세이돈 짙은 남색 + 파랑 모서리 6px 아폴로 밝은 바탕 + 샴페인골드 모서리 8px, 좌측 기둥 ── 그래서 아테나가 고른 것 ─────────────────────────── **밝은 바탕이 기본**이되 아폴로와 갈리도록 따뜻한 쪽입니다 — 기본 조합이 「모래」(웜샌드 + 브론즈)입니다. 아폴로의 샴페인골드는 남색 위에 얹힌 금색이고 이쪽은 모래빛 위에 얹힌 청동이라, 같은 밝기여도 결이 다릅니다. **모서리를 뒤집었습니다.** 넷 다 「둥근 카드 + 적당히 둥근 단추」인데 아테나는 **면이 각지고 조작이 완전히 둥급니다**. 아래 `--ui-btn-radius: 999px` 한 줄이 그 선언이고, 면 쪽은 시트가 맡습니다. ── 카드가 없다는 것이 여기서도 보입니다 ────────────── `--color-panel` 이 `--color-base` 에서 3%밖에 안 떨어져 있습니다. 헤라는 `#1a1d2a` 카드가 `#11141d` 바탕 위에 뚜렷한 계단을 만들지만, 아테나는 화면 전체가 한 면이라 계단이 있으면 안 됩니다. 영역을 나누는 것은 면이 아니라 **선**이고, 그래서 선 토큰이 넷 다 뜻이 다릅니다: --color-line 머리카락. 줄과 줄 사이. --color-line-soft 그보다 더 옅은 것. 한 덩어리 안의 칸막이. --color-line-head **제일 진한 것.** 구획 제목 아래. --color-line-tile 타일 테두리. 카드가 없는 화면에서 위계를 만드는 것이 `--color-line-head` 입니다. 상자가 할 일을 선 굵기가 대신합니다. ── 조합 다섯을 다 따릅니다 ─────────────────────────── `--t-*` 를 읽으므로 `skins.ts` 에서 `themed: true` 이고, 슬레이트·에메랄드 ·화이트·자정·모래가 그대로 붙습니다. 대비되는 값(`#fallback`)은 「모래」의 값입니다 — 조합이 안 실린 자리에서도 이 스킨이 자기 얼굴로 뜹니다. 면은 `color-mix` 로 조합의 바탕에서 옮기고 선은 알파로 둡니다. 검정을 섞으면 어느 조합에서나 「더 눌린」 이고, 겹(`--t-veil-rgb`)을 섞으면 어느 조합에서나 「더 뜬」 입니다. 밝은 조합에서 겹은 검정이므로 방향이 저절로 뒤집힙니다. ── 위의 첫 문단이 뒤집혔습니다 (2026-09-13) ─────────── **지우지 않고 둡니다.** 위에 적힌 「기존 넷과 겹치지 않을 것」은 그때 사실이었고, 무엇이 왜 바뀌었는지 없이 그 문단만 지우면 다음 사람이 「왜 아테나 스포츠가 포세이돈처럼 생겼지」에서 멈춥니다. 반대로 그 문단만 남겨 두면 다음 사람이 그것을 읽고 **되돌립니다.** 그래서 둘 다 남깁니다. 무엇이 「같은 디자인으로 보여서는 안 돼」가 **「스포츠 디자인 그냥 우리 제우스나 다른 포세이돈 이런 거랑 같은 레이아웃 쓰는 게 나을 듯」** 으로 바뀌었습니다. 「짜임만인가 색까지인가」를 되물었고 **「통째로 — 색까지」** 로 답이 왔습니다. 언제 2026-09-13. 스포츠 판만 세 회차를 다듬은 **뒤**입니다. 왜 운영자가 같은 불평을 **세 번** 했습니다 — 「모든 배팅 보기가 안 보여」 → 고침 → 「아직도 안 보여, 제우스나 포세이돈 좀 참고해」 → 고침 → 「그냥 같은 레이아웃 써」. 두 번째에서 넷을 찍어 견주었고, 아테나가 못 보이는 까닭이 **대비가 몇 점 모자란 것이 아니라 축이 없는 것**이라는 답이 나왔습니다: 포세이돈은 구역을 색으로 묶는데 아테나는 회색 줄 셋이라, 잉크를 올려도 여전히 회색 셋입니다. 그 측정이 이 결정을 불렀습니다. 어디까지 **스포츠뿐입니다.** 머리띠와 회원 화면 열셋은 이 파일이 정한 그대로입니다 — 위의 「모서리를 뒤집었습니다」도, 「카드가 없다」 도, 선 토큰 넷도 전부 그대로 살아 있고 이 아래 수는 한 줄도 안 바뀌었습니다. 바뀐 것은 `screens-sports.css` 한 장이고, 그 장은 이 파일의 토큰이 아니라 **제 안에 적은 `--p-*`** 로 그립니다. 그 시트 머리말에 그 까닭이 있습니다. 남는 것 판은 포세이돈처럼 생겼고 그 위 머리띠는 아테나입니다. 그 이음매가 무엇으로 보이는지는 그 시트 머리말의 마지막 문단에 재서 적어 두었습니다. ---------------------------------------------------------*/ :root { --color-base: var(--t-base, #faf7f2); /* 쪽보다 한 단 눌린 띠 — 어느 조합에서나 검정 쪽으로. */ --color-deep: color-mix(in srgb, var(--t-base, #faf7f2) 94%, #000); /* 면이 바탕에서 3%밖에 안 떨어집니다. 이것이 「카드가 없다」의 값입니다. 더 벌리면 카드가 되고, 붙이면 구획이 안 보입니다. */ --color-panel: color-mix(in srgb, var(--t-base, #faf7f2) 97%, rgb(var(--t-veil-rgb, 0 0 0))); --color-field: var(--t-sunk, #f2ece3); /* 면 위에 한 단 뜬 칩 — 밝으면 어둡게, 어두우면 밝게. */ --color-raise: color-mix(in srgb, var(--t-base, #faf7f2) 93%, rgb(var(--t-veil-rgb, 0 0 0))); --color-alt: color-mix(in srgb, var(--t-base, #faf7f2) 94%, #000); --color-card: color-mix(in srgb, var(--t-base, #faf7f2) 97%, rgb(var(--t-veil-rgb, 0 0 0))); --color-sunk: var(--t-sunk, #f2ece3); /* 선이 이 스킨의 뼈대입니다. 값이 아니라 **대비**로 적어야 조합이 바뀌어도 같은 세기로 남습니다. */ --color-line: rgb(var(--t-veil-rgb, 0 0 0) / 0.16); --color-line-soft: rgb(var(--t-veil-rgb, 0 0 0) / 0.09); --color-line-tile: rgb(var(--t-veil-rgb, 0 0 0) / 0.16); /* 구획 제목 아래. 넷 중 **제일 진합니다** — 카드 머리가 하던 일입니다. */ --color-line-head: rgb(var(--t-veil-rgb, 0 0 0) / 0.30); --color-brand: var(--t-accent, #9a7b1f); --color-brand-glow: var(--t-accent-soft, #f0e3bd); /* 이름은 「금색」이지만 뜻은 **「돈」**입니다 — 금액을 무슨 색으로 찍는가. 조합이 답을 들고 있으므로 여기서 다시 정하지 않습니다. */ --color-gold: var(--t-money, #7a5c14); --color-gold-alt: var(--t-money-soft, #a88a3c); /* 뜻이 있는 색은 조합에 안 딸립니다 — 빨강은 어느 조합에서나 막힘이고 초록은 당첨입니다. 칠하는 **면**은 그대로 두고 **글자만** 조합의 밝기 쪽으로 당깁니다. 안 그러면 밝은 조합에서 연둣빛이 안 보이고 어두운 조합에서 진초록이 안 보입니다. */ --color-danger: #d23b30; --color-danger-hover: #b12f26; --color-danger-text: color-mix(in srgb, #d23b30 64%, var(--t-ink, #2b241c)); --color-up: #2f8f45; --color-up-text: color-mix(in srgb, #2f8f45 58%, var(--t-ink, #2b241c)); --color-down: #d23b30; --color-down-text: color-mix(in srgb, #d23b30 58%, var(--t-ink, #2b241c)); --color-win: #6d4bb8; --color-ink: var(--t-ink, #2b241c); /* 본문보다 한 단 더 또렷하게 — 밝으면 검은 쪽, 어두우면 흰 쪽. */ --color-ink-strong: color-mix(in srgb, var(--t-ink, #2b241c) 84%, rgb(var(--t-veil-rgb, 0 0 0))); --color-ink-soft: color-mix(in srgb, var(--t-ink, #2b241c) 80%, var(--t-ink-muted, #6f6155)); --color-ink-nav: var(--t-ink-muted, #6f6155); --color-ink-label: var(--t-ink-muted, #6f6155); --color-ink-muted: color-mix(in srgb, var(--t-ink-muted, #6f6155) 80%, var(--t-ink, #2b241c)); --color-ink-team: var(--t-ink-muted, #6f6155); /* 얼굴은 Pretendard 하나입니다. 헤라가 본문 Pretendard 에 제목 Poppins 를 섞는데, 아테나에서 그 짝을 다시 쓰면 「밝게 칠한 헤라」로 읽힙니다. 대신 **자간과 굵기**로 벌립니다 — 구획 제목이 작고 넓게 벌어진 대문자입니다 (`screens.css` 의 `.ath-head`). 얼굴을 바꾸는 것보다 조판을 바꾸는 편이 이 시트의 결과 맞고, 새 글꼴 파일도 안 늡니다. */ --font-sans: "Pretendard", "Noto Sans KR", sans-serif; --font-numeric: "Rajdhani", "Pretendard", sans-serif; --font-display: "Pretendard", "Noto Sans KR", sans-serif; } /*--------------------------------------------------------- 공용 컨트롤을 이 스킨의 모양으로. ── 조작만 완전히 둥급니다 ──────────────────────────── `999px` 는 이 스킨에서 제일 눈에 띄는 한 줄입니다. 면이 각진 화면 위에 알약 단추가 놓이면, 색을 무엇으로 바꾸든 다른 넷과 안 헷갈립니다. 제우스 3px · 포세이돈 6px · 헤라 8px · 아폴로 8px 옆에서 이것만 다릅니다. 높이는 36/46/56 입니다. 큰 것이 넷 중 어느 것(최대 52)보다 큽니다 — 카드가 없어 화면이 허전한 만큼 조작이 무게를 져야 합니다. `page-shell.tsx` 는 구조만 들고 있고 숫자는 어느 스킨의 것도 아닙니다. ---------------------------------------------------------*/ :root { --ui-btn-radius: 999px; --ui-btn-h-sm: 36px; --ui-btn-h-md: 46px; --ui-btn-h-lg: 56px; /* 강조색 **위의** 글자는 조합이 들고 있습니다 (`accentInk`). 박아 두면 밝은 강조색에 흰 글자가 얹히는 조합이 생깁니다 — 조합마다 재 보고 고른 값이라 여기서 다시 정하면 안 됩니다. */ --ui-btn-primary-bg: var(--color-brand); --ui-btn-primary-ink: var(--t-accent-ink, #ffffff); --ui-btn-primary-bg-hover: color-mix(in srgb, var(--t-accent, #9a7b1f) 88%, #000); --ui-btn-primary-line: transparent; --ui-btn-accent-bg: var(--color-brand); --ui-btn-accent-ink: var(--t-accent-ink, #ffffff); --ui-btn-accent-bg-hover: color-mix(in srgb, var(--t-accent, #9a7b1f) 88%, #000); --ui-btn-accent-line: transparent; /* 테두리만 있는 단추가 이 스킨에서는 **기본 어휘**입니다. 채운 단추는 화면당 하나(제출)이고 나머지는 전부 이쪽입니다 — 선으로 그리는 시트라 조작도 선으로 그려야 결이 맞습니다. */ --ui-btn-outline-bg: transparent; --ui-btn-outline-ink: var(--color-ink); --ui-btn-outline-bg-hover: transparent; --ui-btn-outline-ink-hover: var(--color-brand); --ui-btn-outline-line: var(--color-line); --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-base, #faf7f2) 88%, rgb(var(--t-veil-rgb, 0 0 0))); --ui-btn-quiet-ink-hover: var(--color-ink); --ui-btn-quiet-line: transparent; --ui-btn-quiet-line-hover: var(--color-line); /* 돈에 관한 단추 — 글자만 돈 색이고 면은 조용합니다. */ --ui-btn-gold-bg: transparent; --ui-btn-gold-ink: var(--t-money, #7a5c14); --ui-btn-gold-bg-hover: color-mix(in srgb, var(--t-base, #faf7f2) 93%, rgb(var(--t-veil-rgb, 0 0 0))); --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; /* 알림도 상자가 아니라 **왼쪽 굵은 선**입니다 — 면은 거의 안 칠하고 (6%) 뜻은 세로 선이 집니다. 시트가 알림만 상자로 그리면 「카드가 없다」가 거기서 깨집니다. */ --ui-alert-ok-bg: rgba(47, 143, 69, 0.08); --ui-alert-ok-ink: color-mix(in srgb, #2f8f45 60%, var(--t-ink, #2b241c)); --ui-alert-ok-line: rgba(47, 143, 69, 0.55); --ui-alert-bad-bg: rgba(210, 59, 48, 0.08); --ui-alert-bad-ink: color-mix(in srgb, #d23b30 60%, var(--t-ink, #2b241c)); --ui-alert-bad-line: rgba(210, 59, 48, 0.55); --ui-alert-info-bg: rgb(var(--t-accent-rgb, 154 123 31) / 0.08); --ui-alert-info-ink: var(--color-ink); --ui-alert-info-line: rgb(var(--t-accent-rgb, 154 123 31) / 0.55); --ui-alert-warn-bg: rgba(180, 130, 30, 0.10); --ui-alert-warn-ink: color-mix(in srgb, #a8801f 58%, var(--t-ink, #2b241c)); --ui-alert-warn-line: rgba(180, 130, 30, 0.55); }