# Phase 2.6 사주 랜딩·입력 라이트 재스킨 설계

- 날짜: 2026-07-03
- 선행: Phase 2.5(사주 결과 화면 라이트 재스킨) main 머지 완료(5ace251)
- 배경: 2.5가 결과 화면만 라이트로 전환 → 공개 진입점(`/work/saju` 랜딩·입력)이 아직 다크로 남아 톤 불일치. 남은 3파일을 동일 방식으로 전환해 사주 서비스 전 화면 라이트 완결.

## 결정 사항 (CEO 확정, 2026-07-03)

| 결정 | 내용 |
|------|------|
| 방식 | **Phase 2.5와 완전 동일** — --jsm 라이트 순수 시각 재스킨, 색상 매핑 표 재사용 |
| 범위 | 랜딩 `page.tsx` + 입력 `input/page.tsx` + `components/SajuForm.tsx` (3파일) |
| 이모지 | **대상 3파일에 이모지 없음(grep 0)** — 아이콘 교체 불필요, 순수 색 재스킨 |

## 대상 (위반 분포, gradient/violet/purple/blur)

- `app/work/saju/page.tsx` — 랜딩(333줄, **9건**): 히어로 `bg-[#04102b]`+`repeating-linear-gradient` 텍스처, `bg-gradient-to-r from-[#1a56db] to-[#7c3aed]` CTA 버튼, `violet-300/600/500` 텍스트·뱃지·테두리, AI PREMIUM 카드, MY RECORDS 섹션
- `app/work/saju/input/page.tsx` — 입력(41줄, **3건**)
- `app/work/saju/components/SajuForm.tsx` — 폼(220줄, **1건**)

## 원칙 (2.5 스펙 그대로)

- **순수 시각 변경**: 로직·데이터·props·라우팅 무변경. className/style만
- 신규 색 토큰 금지 — 기존 11개 `--jsm-*`(bg/surface/surface-alt/ink/ink-soft/ink-faint/line/navy/accent/accent-soft/accent-hover)만
- gradient / blur / 보라(violet/purple) / 이모지 **0건**(대상 3파일)
- navy 밴드 = 무테두리 flat + 흰 CTA(2.5·`app/page.tsx`에서 확립된 사이트 관용구)
- 의미색(있다면 상태 신호색)은 2.5 선례대로 보존

## 색상 매핑 (2.5와 동일 — 이 표대로 치환)

| 현재(제거) | 교체(→) |
|------|------|
| `#04102b` 다크 배경 + `repeating-linear-gradient` 텍스처 | `bg-[var(--jsm-navy)]` 플랫(히어로 밴드) / `bg-[var(--jsm-bg)]`(페이지) — 텍스처 제거 |
| `bg-gradient-to-r from-[#1a56db] to-[#7c3aed]` CTA | `bg-[var(--jsm-accent)]` 단색 + `hover:bg-[var(--jsm-accent-hover)]`, 흰 텍스트 |
| `violet-300/500/600`·`#7c3aed`·`shadow-violet-*` | `var(--jsm-accent)` / navy 밴드 위 텍스트는 `var(--jsm-accent-soft)`(대비) |
| amber 강조 | `var(--jsm-accent)` 또는 `var(--jsm-ink-soft)` |
| 흰색/`blue-xx` 본문 텍스트 | `text-[var(--jsm-ink)]` / `ink-soft` / `ink-faint` |
| 다크 카드/테두리 `#dbe8ff` 등 | `bg-[var(--jsm-surface)]` + `border-[var(--jsm-line)]` |

참고 관용구: `app/work/saju/result/page.tsx`(2.5 재스킨 완료본), `app/showcase/page.tsx`, `app/page.tsx`(navy CTA 밴드).

## 워크스트림 3개 (순차)

### WS1. 랜딩 page.tsx 재스킨 (9건)
- 히어로 다크 밴드+repeating-linear-gradient 텍스처 → `bg-[var(--jsm-navy)]` 플랫, 페이지 배경 라이트
- CTA 버튼 gradient → 플랫 accent
- `violet-*` 텍스트/뱃지/테두리(부제·MY RECORDS 라벨·레코드 카드 hover·AI PREMIUM 카드) → --jsm 토큰
- 서버/클라 로직·데이터 조회·JSX 구조 미변경

### WS2. input/page.tsx + SajuForm.tsx 재스킨 (4건)
- 입력 화면·폼의 다크/gradient/violet → --jsm 토큰. 폼 필드·버튼 스타일 라이트
- `useSajuForm` 등 로직·상태·핸들러 미변경

### WS3. 최종 검증 + CLAUDE.md
- **사주 전체 게이트**: `grep -rnE "gradient|violet|purple|blur" app/work/saju/**/*.tsx`(result 포함) → 0건, 이모지 0건
- `npm run build` 성공, `npm test`(30) 유지
- CLAUDE.md 사주 시스템 섹션: "결과 화면"→"전 화면(랜딩·입력·결과) --jsm 라이트 재스킨 완료(2026-07-03)"로 갱신

## 범위 밖

- 로직·계산·프롬프트·데이터 무변경(순수 시각)
- 이로써 사주 서비스 전 화면 라이트 완결 — 추가 재스킨 후속 없음

## 리스크·주의

- 랜딩 `page.tsx`가 클라이언트에서 saju 기록(MY RECORDS)을 조회하는 로직이 있으면 그 fetch/상태는 미변경 — className만
- navy 밴드 위 accent 텍스트는 대비상 `accent-soft` 사용(2.5 선례)
- 시각 회귀 자동 테스트 불가 → 빌드+게이트 grep + 수동 확인