feat: 로그인 화면

docs/skills/color_system.md

@@ -1,20 +1,21 @@
 # VibeRoom Color System (3-Color Palette)
 
-본 문서는 VibeRoom 웹앱의 UI/UX 일관성을 유지하기 위해 엄격하게 제한된 3가지 핵심 색상 시스템을 정의합니다. AI(Cursor, Cline 등) 코딩 시 **이 3가지 색상과 기본 무채색(white, slate-50) 범위를 벗어난 임의의 색상 사용을 엄격히 금지**합니다.
+본 문서는 VibeRoom 웹앱의 UI/UX 일관성을 유지하기 위해 엄격하게 제한된 3가지 핵심 색상 시스템을 정의합니다. 
+AI(Cursor, Cline 등) 코딩 시 **이 3가지 색상 변수(`brand-*`)와 기본 무채색(white, slate-50) 범위를 벗어난 임의의 헥스(HEX) 코드나 Tailwind 색상 사용을 엄격히 금지**합니다.
 
-## 1. 색상 정의 및 용도
-빌드 캐시 에러를 원천 차단하기 위해 Tailwind의 JIT 헥스(HEX) 주입 방식(예: `bg-[#63adf2]`)을 기본으로 사용합니다.
+## 1. 색상 정의 및 용도 (JS/TS 환경용)
+JS 환경(Canvas, 인라인 스타일 등)에서 헥스 코드가 필요하다면 `src/shared/lib/colors.ts`에 정의된 `colors` 객체를 `import` 하여 사용합니다.
 
-| 색상 코드 | Tailwind 적용 예시 | 역할 (Role) | 주요 사용처 |
+| 색상 변수명 | 헥스 코드 | 역할 (Role) | 주요 사용처 |
 | :--- | :--- | :--- | :--- |
-| `#304d6d` | `text-[#304d6d]`, `bg-[#304d6d]` | **딥 네이비 (메인 텍스트 & 다크 배경)** | 묵직하고 차분한 색상. 본문 글씨, 제목, 선(border), 푸터(Footer), 강조 요금제 카드 등에 사용되어 화면의 무게중심을 잡아줍니다. |
-| `#63adf2` | `bg-[#63adf2]`, `text-[#63adf2]` | **소프트 코발트 (포인트 액션)** | 청명하고 기분 좋은 파란색. '무료로 시작하기', 추천 뱃지 등 유저가 액션을 취해야 하는 핵심 영역에만 포인트로 강조합니다. |
-| `#a7cced` | `bg-[#a7cced]`, `border-[#a7cced]` | **파스텔 스카이 (소프트 서페이스)** | 아주 연하고 부드러운 파란색. 기능 소개 카드의 은은한 배경이나 체크마크(`✓`), 호버 상태 등 편안한 포인트 요소에 사용됩니다. |
+| `brand-dark` | `#304d6d` | **딥 네이비 (메인 텍스트 & 다크 배경)** | 묵직하고 차분한 색상. 본문 글씨, 제목, 선(border), 푸터(Footer), 강조 요금제 카드 등에 사용되어 화면의 무게중심을 잡아줍니다. |
+| `brand-primary` | `#63adf2` | **소프트 코발트 (포인트 액션)** | 청명하고 기분 좋은 파란색. '무료로 시작하기', 추천 뱃지 등 유저가 액션을 취해야 하는 핵심 영역에만 포인트로 강조합니다. |
+| `brand-soft` | `#a7cced` | **파스텔 스카이 (소프트 서페이스)** | 아주 연하고 부드러운 파란색. 기능 소개 카드의 은은한 배경이나 체크마크(`✓`), 호버 상태 등 편안한 포인트 요소에 사용됩니다. |
 
-## 2. AI 바이브 코딩 시 주의사항 (스타일 가이드)
+## 2. AI 바이브 코딩 시 주의사항 (Tailwind 클래스 적용)
+- 모든 스타일링은 `globals.css`의 `@theme`에 주입된 변수를 사용하여 `bg-brand-primary`, `text-brand-dark` 형태로 작성해야 합니다. 절대 헥스 코드를 직접 입력하지 마세요 (예: `bg-[#63adf2]` ❌).
 - **기본 배경:** 서비스의 기본 배경은 너무 파래서 답답하지 않도록 깨끗한 `slate-50`(`bg-slate-50`) 또는 `white`(`bg-white`)를 사용합니다.
 - **투명도(Opacity) 활용:** 이 3가지 색상만으로 디자인을 구성하되, 농도를 조절해야 할 때는 Tailwind의 투명도 문법을 활용하세요. 
-  - *예시 (텍스트 흐리게):* `text-[#304d6d]/70`
-  - *예시 (배경 옅게):* `bg-[#a7cced]/10`
-  - *예시 (테두리 연하게):* `border-[#304d6d]/20`
-- **테두리(Border):** 부드러운 느낌을 위해 각진 모서리는 피하고(`rounded-2xl`, `rounded-full` 권장), 선의 굵기보다 색상의 농도 조절로 구분감을 줍니다.
+  - *예시 (텍스트 흐리게):* `text-brand-dark/70`
+  - *예시 (배경 옅게):* `bg-brand-soft/10`
+  - *예시 (테두리 연하게):* `border-brand-dark/20`