# TriplePick — Look & Feel / Design System (SSOT)

최종 갱신: 2026-06-09 KST
출처: 구현된 `app/globals.css` + 컴포넌트 + 사용자 디렉션(02/03 목업 + 첨부 레퍼런스 반복 확정)
원칙: **이 문서가 룩앤필의 단일 기준(SSOT).** 새 컴포넌트·페이지는 여기 토큰·패턴을 그대로 따른다.

> 디자인 진화 기록(Before/After): `/before`(v1 다크토큰) vs `/`(현재). 임의 변경 금지 — 토큰을 바꾸면 여기부터 갱신.

---

## 1. 브랜드 에센스
- 이름: **TriplePick / Triple Pick 2026** · 핸들 `@triplepick_ai` · 운영 AIO2O
- 컨셉: "AI 셋(GPT·Claude·Gemini) vs 너" — 대결·스코어보드·e스포츠 픽밴 에너지
- 톤: 다크 차콜 베이스 + **민트/틸그린 액센트**, 프리미엄 스포츠 브로드캐스트
- ⚠️ 금지: **"월드컵" 명칭(법적)** → "글로벌 축구" 프레이밍 / **골드 촌스러운 톤 금지**(쿨 민트·틸) / **단색 초록 일변도 금지**

---

## 2. 컬러 토큰 (globals.css `:root` — 정확값)

| 역할 | 변수 | HEX | 용도 |
|---|---|---|---|
| 베이스 | `--bg` | `#14171C` | 차콜 다크 배경 |
| 베이스2 | `--bg2` | `#1B1F26` | 카드/입력 배경 |
| 카드 | `--card` | `#20262F` | 다크 카드 |
| **CTA 민트** | `--mint` | `#85FCA8` | 메인 버튼(밝은 민트그린) |
| 민트 텍스트 | `--mint-ink` | `#0A2417` | 민트 버튼 위 글자 |
| 액센트/글로우 | `--green` | `#3EE08A` | VS 글로우·보더·언더라인 |
| **레이어 시트** | `--sheet` | `#F2F3EF` | 화이트 레이어드 시트(AI예측·픽) |
| 시트 카드 | `--sheet-card` | `#FFFFFF` | 시트 위 카드 |
| 잉크 | `--ink` | `#14171C` | 화이트 위 텍스트 |
| 잉크 뮤트 | `--ink-muted` | `#79808C` | 보조 텍스트 |
| 다크 라인 | `--line-d` | `#2B313C` | 다크 보더 |
| 라이트 라인 | `--line-l` | `#E3E5DF` | 시트 보더 |

**모델 컬러(고정):** GPT `--gpt #15A99B`(틸그린) · Claude `--claude #E8814A`(오렌지) · Gemini `--gemini #5B8CFF`(블루)
**상금 카드(쿨톤, 골드 폐기):** 보더 `--gold-border #5EF0B4` · 배경 `--gold-bg #0E1F1B`(딥틸) · 버튼 그라데 `#85FCA8 → #15A99B`(`.gold-btn`)

> 배경: `radial-gradient(120% 50% at 50% -5%, #20302A, var(--bg))` — 상단 미세 그린 글로우.

---

## 3. 타이포그래피
- **타이틀 = Impact** (`.font-impact`: Impact, Haettenschweiler, "Arial Narrow Bold"). 예: `TRIPLE PICK 2026` 44px, 섹션 헤딩 32–40px
- 본문 = Pretendard / 시스템 산세리프 (한글). (Pretendard 웹폰트 로드는 TODO)
- 스케일: **사용자 지시로 2× 상향**. AI 스코어 28px · 모델명 20px · 매치 타이틀 22px · 헤딩 22px · 세그먼트 16px · 스테퍼 32px · CTA 20px
- 후킹 헤드라인: **한 줄 강제**(`whitespace-nowrap`, 19px) + 양옆 `⫽` 그린

---

## 4. 레이아웃
- **모바일 우선**, `.shell` max-width **460px**, 좌우 패딩 16
- 구조 = **다크 히어로(상) + 레이어드 화이트 시트(하)** 하이브리드
  - 다크: Hero · MatchupHUD(대결)
  - 화이트 시트(`.sheet`, radius 22, 그림자): AI 예측 + 당신의 선택
  - 다크: 상금(쿨톤) · Crowd · Footer
- 카드 radius 12–22, 터치 타깃 ≥ 44px

---

## 5. 컴포넌트 카탈로그 (현재 구현 = 기준)

- **Hero** (`Hero.tsx`): `TRIPLE PICK 2026`(Impact, 2026 그린) → `AI Prediction Arena`(그린) → 서브카피 **알약**(반투명, 가시성↑) → 후킹 한 줄(⫽ 그린)
- **MatchupHUD** (`MatchupHUD.tsx`): `Match 01 → Final` 진행 바 → **녹색 글로우 보더 카드**(box-shadow green) → **프로필 로고 아이콘**(`/icons/profile.png`) + 팀명 + 일시(그린 볼드) + 경기장 → 국기(실제 KOR png + CZE 인라인 SVG) + **라이트닝 그린 VS**(Impact, textShadow glow)
- **AI 예측 카드** (`Arena.tsx`, 화이트 시트 내): 실제 모델 아이콘(`/icons/gpt.png·claude.jpg·gemini.jpeg`) + 모델명 + 스코어(28px) + 확률% + **모델색 confidence 바** + 근거 한 줄
- **세그먼트(당신의 선택)**: 3분할, 선택 시 `--mint` 배경 + 잉크 텍스트
- **스코어 스테퍼**: −/+ 버튼 + 큰 숫자(32px)
- **CTA(`.btn-mint`)**: `#85FCA8` + 글로우 그림자
- **상금 카드(`.gold-card`/`.gold-btn`)**: 딥틸 배경 + 민트 보더 + 민트→틸 그라데 버튼 (쿨톤)
- **Crowd Pick**: 가로 세그먼트 단일 바(국기 + %)
- **Footer**: fine print + 법무 4고지 + `© 2026 TriplePick · 운영 AIO2O · @triplepick_ai`

---

## 6. 아이콘·이미지 자산 (`public/icons/`)
- `ball.png` — **클래식 흑백 축구공(투명 PNG)**. ⚠️ 흰 배경/체커보드 구워넣기 금지(마젠타 키잉으로 투명 처리한 자산)
- `profile.png` — TriplePick 브랜드 로고(매치카드 아이콘)
- `gpt.png` / `claude.jpg` / `gemini.jpeg` — 실제 브랜드 아이콘(레터박스 금지)
- `kor.png` — 한국 국기. 체코는 인라인 SVG(백·적 + 청 삼각)
- 글로우는 `drop-shadow(... rgba(62,224,138,.))` 그린으로만

---

## 7. Do / Don't
- ✅ 실제 모델 아이콘 · 클래식 축구공(투명) · 라이트닝 그린 VS · 화이트 시트 + 다크 하이브리드 · 민트 CTA
- ✅ 3색(틸그린/오렌지/블루)으로 모델 구분, 글로우는 그린
- ❌ "월드컵" 표현 / 골드 톤 / 단색 초록 일변도 / 레터박스 가짜 아이콘 / 이모지 축구공 / 임의 다크 단색(=v1 회귀)
- ❌ 한글을 이미지로 굽기(가독성↓) — 텍스트 레이어로

---

## 8. 06.09 회의 반영 (DONE 2026-06-09)
> 상세: `../../Worldcup 2026/000. Plan/Task — 랜딩·디자인·프론트엔드 업데이트 (06.09 회의).md`
- [x] 확률 라벨 `Confidence` → **"OO 승리 확률 XX%"**(이긴 팀 기준) + 승리팀 국기 (`format.winProb` + `TeamFlag`)
- [x] confidence 바 **h-1로 축소**, **근거(메인 리즌) 15px 볼드 인용("…")으로 강조**
- [x] **닉네임 필드 제거 → 이메일만** + 동의 체크박스(다음 경기/100만원)
- [x] 서브타이틀 `… Matchday Prediction` **삭제(중복)** — Hero는 브랜드 헤더로 단일화
- [x] **"투표 종료까지" 카운트다운** 상세에 복원 (`Countdown.tsx`, 마감=lockAt=킥오프)
- [x] 멀티 경기: **대시보드(`/`) + 경기 상세(`/match/[matchId]`) + 리더보드 stub(`/leaderboard`)** — 동일 토큰
- [x] 예측하기 → (경기 후) **결과 보기** + 최종 스코어 (`match.result` 분기, MatchupHUD/Arena)
- [x] **"월드컵" 표현 제거**(D9) — Hero·schedule hookText·meta → "글로벌 축구"
- [x] **경기별 공유**(D8) — `matchUrl()` 딥링크, `navigator.share` invoke
- [x] Crowd Pick에 **"AI 승리 확률과 다릅니다"** 구분 라벨

## 9. 멀티 경기 구조 (06.09 신규)
- **라우팅**: `/`=대시보드(전체 일정) · `/match/[matchId]`=경기 상세(6경기 SSG) · `/leaderboard`=차기 stub
- **컴포넌트 파라미터화**: `MatchupHUD({match})` · `Arena({match, predictions, crowd, shareUrl})` — 싱글톤 의존 제거
- **국기 일반화**: `TeamFlag({team})` — KOR png / CZE 인라인 SVG / 그 외 이모지 박스
- **데이터**: `mockData.getPredictions(match)`/`getCrowd(match)` — 체코전 큐레이션, 그 외 `matchId` 해시 결정론 생성(Math.random 미사용)
- **대시보드 카드**(`ScheduleBoard.tsx`): 날짜 그룹 → 시간·라운드·상태칩·팀 국기·AI 픽 갈림·참여수 → 상세 딥링크. 네이버 e스포츠 승부예측 톤, 다크 토큰 유지