# 디자인 테마

이 프로젝트의 **기본 룩과 그걸 바꾸는 법**을 적어 둔 문서. 색·모양의 실제 값은 `src/app/index.css`(theme 토큰)에 있고, 이 문서는 그 요약과 취향 결정 기록이다.

> 디자인은 **앱 레이어(`src/app/index.css` + 화면)에만** 산다. 코드 품질 게이트·룰(oxlint·code-smell·slop 등)에는 디자인 취향을 넣지 않는다 — 그것들은 다른 레포에도 이식되기 때문.

## 기본 룩 (리멤버 모노크롬)

Remember Design System(v2.0) 토큰 기반 — 화려함이 아니라 **신뢰**. 컬러가 아니라 구조와 간격으로 위계를 만든다.

- **느낌**: 연회색(#fafafa) 앱 배경 위 흰 카드, radius 8px(큰 카드 12px), 넉넉한 여백. 헤더는 배경 위에 투명하게(제목 볼드), 카드가 콘텐츠를 감싼다.
- **컬러**: 블랙/화이트가 기본. **리멤버 오렌지(#ff6a0d)는 장식이 아니라 이정표** — 포커스 링·활성 상태(사이드바 현재 메뉴)에만 쓴다. 주요 버튼(primary)은 블랙. 콘텐츠 영역 배경에 유채색 금지.
- **텍스트 위계**: 컬러(#000 → #424242 → #808080) **또는** 크기 중 하나로만 구분 — 둘을 동시에 바꾸지 않는다.
- **숫자(KPI)**: 라벨은 작고 무드 있게(muted), 값은 **크고 볼드**(text-3xl bold). uppercase eyebrow는 slop 게이트가 막는다 — 쓰지 않는다.
- **차트색**: role 컬러 5색(오렌지·블루·그린·옐로·AI 퍼플) — 데이터 구분 용도로만. 막대는 라운드 탑.
- **폰트**: Pretendard Variable (index.css에서 CDN 로드).
- **레이아웃**: **풀폭 셸** — 왼쪽 흰 사이드바 + 화면을 꽉 채우는 콘텐츠. 표는 검색·건수와 함께 **하나의 카드 셸 안에**. (골든샘플: `pages/sample-table`)

## 화면은 넓게 (풀폭 기본)

새 화면·페이지는 **가능하면 전체 폭을 꽉 채운다.** 좁은 `max-w-*` 중앙 정렬 한 칸은 옹졸해 보인다 — 대시보드·목록·표는 사이드바 셸 + 풀폭 콘텐츠로. 폭이 넓으면 카드·표·차트가 숨 쉴 공간을 갖는다. (예외: 로그인·짧은 폼처럼 정말 좁아야 자연스러운 화면.)

## 테마 바꾸기

디자인은 만드는 사람 것. 이렇게 말하면 그대로 바뀐다:

- **참고 서비스로**: 평소 좋아하는 서비스 이름을 말하면("○○앱처럼 깔끔하게") 그 서비스의 색·간격·모서리를 theme 토큰으로 번역.
- **UX와 UI를 나눠서**: "흐름은 정보 밀도 높은 업무 도구처럼, 겉모습은 밝고 둥글게" — 흐름과 겉모습을 따로 말해도 된다.
- **전역 조정**: "전체적으로 더 밝게 / 더 둥글게 / 여백 넓게" → 개별 화면이 아니라 `src/app/index.css` 토큰 한 곳을 바꿔 모든 화면에 반영.
- **디자인 시안 먼저**: 감이 안 잡히면 Claude에게 아티팩트로 시안을 먼저 만들어 달라고 한 뒤, 마음에 드는 걸 골라 구현으로 넘길 수 있다.

바꾼 내용은 이 문서에 한 줄로 남긴다(무엇을 왜 바꿨는지).

## 변경 로그

- [초기] Insight 대시보드 룩(퍼플 primary + 티일 차트 + 풀폭 셸)을 기본값으로.
- 라벤더빛 배경·radius 1rem·볼드 KPI·틴트 필 배지로 톤 강화 — 레퍼런스 시안에 맞춰 "떠 있는 카드" 무드로.
- 기본 테마를 리멤버 디자인 시스템 토큰(remember-md v2.0)으로 교체 — 실사용 피드백("리멤버 느낌이 나도록") + 사내 디자인시스템 md 수령. 모노크롬 + 오렌지 활성 전용, Pretendard, radius 8px. 레이아웃(풀폭 셸·카드 구성)은 유지.