feat: 다크모드 토큰 및 테마 설정 추가

[hyejj19]

작업 내용

• 라이트·다크 시맨틱 색상 팔레트와 Tailwind 토큰을 정리했습니다.
• 시스템 설정을 기본으로 따르는 테마 Provider와 초기 적용 스크립트를 추가했습니다.
• 설정 화면에서 시스템·라이트·다크 모드를 선택하고 저장할 수 있도록 했습니다.
• 주요 프로덕트 화면과 공용 컴포넌트를 시맨틱 색상 토큰으로 전환했습니다.
• 라이트 모드에서 기존 화면의 코랄·별점·표면·구분선 색이 유지되도록 보정했습니다.

디자인 토큰 구조

색상은 팔레트 → 시맨틱 역할 토큰 → Tailwind 클래스 순서로 적용됩니다. 컴포넌트는 원색 대신 text-fg-*, bg-bg-*, border-stroke-* 역할 클래스를 사용합니다.

팔레트

• Neutral: 라이트 화면의 흰색·회색 계열
• Oak: 다크 화면의 갈색 계열
• Coral: 브랜드 강조 색
• Amber: 다크 모드 별점 색
• Static: 테마에 영향을 받지 않는 흰색·검정

라이트 모드

• 일반 브랜드: #E58257
• 밝은 브랜드(primary): #EF9A6E
• 브랜드 위 글자·선: 흰색
• 기본 표면: 흰색, 보조 표면: #F7F7F7, 앱 바탕: #E6E6DD
• 구분선: #E6E6DD, 일반 테두리: #BFBFBF

기존의 메인 코랄과 서브 코랄을 하나로 합치지 않고 brand와 brand-primary 역할로 분리해 기존 라이트 화면을 보존했습니다.

다크 모드

동일한 역할 이름은 유지하고 .dark 클래스에서 CSS 변수 값만 덮어씁니다. 다크에서는 두 코랄 역할 모두 #E99670으로 통일하고, 표면·텍스트·테두리는 Oak 팔레트로 전환합니다. 따라서 컴포넌트 코드를 조건 분기하지 않아도 테마가 바뀝니다.

검증

• 라이트 토큰 회귀 테스트 추가
• 위스키 상세 상단을 개발 환경과 비교해 코랄 배경, 흰색 구분선, 병 이미지 표면을 확인
• npm test -- --runInBand — 64개 스위트, 297개 테스트 통과
• npm run lint 통과 (기존 경고만 존재)

참고

• 라이트·다크·시스템 설정은 로컬 저장소에 보관하며, 기본값은 시스템 설정입니다.
• 이번 보정은 기존 다크 모드 역할 체계를 유지하면서 라이트 화면의 색상 회귀를 해결합니다.

Refs bottle-note/workspace#307