diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..6f7a6bd
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.playwright-mcp/
diff --git a/design/uiux/style-guide.md b/design/uiux/style-guide.md
new file mode 100644
index 0000000..4bb958f
--- /dev/null
+++ b/design/uiux/style-guide.md
@@ -0,0 +1,1184 @@
+# 회의록 작성 및 공유 개선 서비스 - 스타일 가이드
+
+**버전**: 1.0
+**작성일**: 2025-10-15
+**작성자**: 유진 (Frontend Developer)
+**레퍼런스**: 클로바노트 (Naver)
+
+---
+
+## 목차
+
+1. [브랜드 아이덴티티](#1-브랜드-아이덴티티)
+2. [디자인 원칙](#2-디자인-원칙)
+3. [컬러 시스템](#3-컬러-시스템)
+4. [타이포그래피](#4-타이포그래피)
+5. [간격 시스템](#5-간격-시스템)
+6. [컴포넌트 스타일](#6-컴포넌트-스타일)
+7. [반응형 브레이크포인트](#7-반응형-브레이크포인트)
+8. [회의록 서비스 특화 컴포넌트](#8-회의록-서비스-특화-컴포넌트)
+9. [인터랙션 패턴](#9-인터랙션-패턴)
+10. [변경 이력](#10-변경-이력)
+
+---
+
+## 1. 브랜드 아이덴티티
+
+### 1.1 디자인 컨셉
+
+**"Smart Collaboration"** - 스마트한 협업 도구
+
+회의록 작성 및 공유 서비스는 AI 기반의 자동화와 실시간 협업을 통해 업무 효율을 극대화하는 스마트한 협업 플랫폼입니다.
+
+### 1.2 핵심 가치
+
+| 가치 | 설명 | 디자인 반영 |
+|------|------|------------|
+| **정확성** | 누락 없이 정확하게 기록 | 명확한 시각적 위계, 검증 상태 표시 |
+| **효율성** | AI 자동화로 작성 부담 감소 | AI 제안 영역, 자동 완성 패턴 |
+| **협업** | 실시간 동기화 및 공유 | 협업 인디케이터, 커서 표시 |
+| **접근성** | 업무 지식 없이도 사용 가능 | 전문용어 설명, 친근한 일러스트레이션 |
+
+### 1.3 브랜드 성격
+
+- **전문적이면서도 친근한**: 업무용 도구이지만 사용하기 쉬운
+- **신뢰감 + 혁신성**: AI 기능의 정확성과 미래지향적 이미지
+- **협업 중심**: 개인이 아닌 팀의 성공을 지원
+
+### 1.4 비주얼 무드
+
+- **색상**: 밝고 활기찬 청록색 (혁신, 성장, 활력)
+- **형태**: 둥근 모서리, 부드러운 곡선 (친근함, 접근성)
+- **일러스트레이션**: 캐릭터 기반, 간결하고 현대적 (클로바노트 스타일 참조)
+
+---
+
+## 2. 디자인 원칙
+
+### 2.1 명확성 (Clarity)
+
+**사용자가 무엇을 해야 하는지 즉시 이해 가능해야 합니다.**
+
+- 명확한 시각적 위계 유지
+- 혼란스러운 요소 최소화
+- 액션 버튼의 목적을 분명히 표현
+- 에러 메시지는 문제와 해결 방법을 함께 제시
+
+**예시**:
+- ✅ "회의록을 저장하지 못했습니다. 네트워크 연결을 확인하고 다시 시도해주세요."
+- ❌ "오류가 발생했습니다."
+
+### 2.2 효율성 (Efficiency)
+
+**최소한의 클릭으로 목표를 달성할 수 있어야 합니다.**
+
+- 자주 사용하는 기능은 빠른 접근 제공 (FAB, 단축키)
+- 불필요한 단계 제거
+- 자동 완성 및 제안 기능 활용
+- 키보드 단축키 지원
+
+**예시**:
+- Ctrl+N: 새 회의 예약
+- Ctrl+S: 회의록 저장
+- Ctrl+F: 검색
+
+### 2.3 일관성 (Consistency)
+
+**동일한 패턴과 예측 가능한 동작을 유지해야 합니다.**
+
+- 동일한 기능은 동일한 아이콘과 레이블 사용
+- 색상, 타이포그래피, 간격의 일관된 적용
+- 네비게이션 구조 일관성 유지
+- 브랜드 아이덴티티 유지
+
+### 2.4 피드백 (Feedback)
+
+**모든 액션에 즉각적이고 명확한 피드백을 제공해야 합니다.**
+
+- 버튼 클릭 시 시각적 피드백 (호버, 액티브 상태)
+- 로딩 상태 명확히 표시 (스켈레톤 UI, 스피너)
+- 성공/실패 토스트 알림
+- 실시간 저장 상태 표시 ("저장됨", "저장 중...")
+
+### 2.5 접근성 (Accessibility)
+
+**모든 사용자가 서비스를 쉽게 이용할 수 있어야 합니다.**
+
+- WCAG 2.1 Level AA 준수
+- 키보드 네비게이션 지원
+- 스크린 리더 호환
+- 충분한 색상 대비 (4.5:1 이상)
+- 터치 영역 최소 44x44px
+
+### 2.6 협업 중심 (Collaboration-First)
+
+**실시간 협업이 핵심 경험이 되어야 합니다.**
+
+- 다른 사용자의 활동을 명확히 표시 (커서, 아바타)
+- 실시간 변경 사항 즉시 반영
+- 충돌 방지 및 해결 메커니즘
+- 버전 관리 및 변경 이력 추적
+
+---
+
+## 3. 컬러 시스템
+
+### 3.1 Primary Color (주요 액션, 브랜드)
+
+**Teal/Emerald** - 혁신, 성장, 활력을 상징
+
+| 이름 | HEX | RGB | 사용처 |
+|------|-----|-----|--------|
+| Primary-Light | `#4DFFDB` | rgb(77, 255, 219) | 호버, 비활성화 상태 |
+| **Primary-Main** | **`#00D9B1`** | **rgb(0, 217, 177)** | **주요 버튼, 링크, 강조** |
+| Primary-Dark | `#00A88A` | rgb(0, 168, 138) | 눌림 상태, 강조 |
+
+**사용 예시**:
+- Primary 버튼 배경
+- 링크 텍스트
+- 체크박스, 라디오 버튼 선택 상태
+- 진행률 바
+- FAB (Floating Action Button)
+
+### 3.2 Secondary Color (보조, 협업 강조)
+
+**Indigo** - 협업, 신뢰, 전문성을 상징
+
+| 이름 | HEX | RGB | 사용처 |
+|------|-----|-----|--------|
+| Secondary-Light | `#A5B4FC` | rgb(165, 180, 252) | 배경, 비활성화 |
+| **Secondary-Main** | **`#6366F1`** | **rgb(99, 102, 241)** | **보조 버튼, 협업 요소** |
+| Secondary-Dark | `#4F46E5` | rgb(79, 70, 229) | 강조 |
+
+**사용 예시**:
+- 협업 인디케이터 (다른 사용자 커서)
+- 보조 버튼
+- 배지 (검증 중 상태)
+- 알림 아이콘
+
+### 3.3 Semantic Colors (상태 표현)
+
+#### Success (성공, 완료)
+
+| 이름 | HEX | RGB | 사용처 |
+|------|-----|-----|--------|
+| Success-Light | `#6EE7B7` | rgb(110, 231, 183) | 배경 |
+| **Success-Main** | **`#10B981`** | **rgb(16, 185, 129)** | **완료, 검증 완료** |
+| Success-Dark | `#059669` | rgb(5, 150, 105) | 강조 |
+
+#### Warning (경고, 주의)
+
+| 이름 | HEX | RGB | 사용처 |
+|------|-----|-----|--------|
+| Warning-Light | `#FCD34D` | rgb(252, 211, 77) | 배경 |
+| **Warning-Main** | **`#F59E0B`** | **rgb(245, 158, 11)** | **경고, 작성 중** |
+| Warning-Dark | `#D97706` | rgb(217, 119, 6) | 강조 |
+
+#### Error (오류, 실패)
+
+| 이름 | HEX | RGB | 사용처 |
+|------|-----|-----|--------|
+| Error-Light | `#FCA5A5` | rgb(252, 165, 165) | 배경 |
+| **Error-Main** | **`#EF4444`** | **rgb(239, 68, 68)** | **오류, 긴급** |
+| Error-Dark | `#DC2626` | rgb(220, 38, 38) | 강조 |
+
+#### Info (정보, 알림)
+
+| 이름 | HEX | RGB | 사용처 |
+|------|-----|-----|--------|
+| Info-Light | `#93C5FD` | rgb(147, 197, 253) | 배경 |
+| **Info-Main** | **`#3B82F6`** | **rgb(59, 130, 246)** | **정보, 알림** |
+| Info-Dark | `#2563EB` | rgb(37, 99, 235) | 강조 |
+
+### 3.4 Neutral Colors (배경, 텍스트, 테두리)
+
+| 이름 | HEX | RGB | 사용처 |
+|------|-----|-----|--------|
+| Gray-50 | `#F9FAFB` | rgb(249, 250, 251) | 페이지 배경 |
+| Gray-100 | `#F3F4F6` | rgb(243, 244, 246) | 카드 배경, 호버 |
+| Gray-200 | `#E5E7EB` | rgb(229, 231, 235) | 테두리 |
+| Gray-300 | `#D1D5DB` | rgb(209, 213, 219) | 비활성화 테두리 |
+| Gray-400 | `#9CA3AF` | rgb(156, 163, 175) | 플레이스홀더 |
+| Gray-500 | `#6B7280` | rgb(107, 114, 128) | 보조 텍스트 |
+| Gray-600 | `#4B5563` | rgb(75, 85, 99) | 본문 텍스트 |
+| Gray-700 | `#374151` | rgb(55, 65, 81) | 제목 |
+| Gray-800 | `#1F2937` | rgb(31, 41, 55) | 강조 제목 |
+| Gray-900 | `#111827` | rgb(17, 24, 39) | 최고 강조 |
+| White | `#FFFFFF` | rgb(255, 255, 255) | 카드, 모달 배경 |
+| Black | `#000000` | rgb(0, 0, 0) | 절대 검정 (거의 사용 안 함) |
+
+### 3.5 다크모드 (선택적)
+
+다크모드를 지원하는 경우 다음 색상을 사용합니다.
+
+| 요소 | 라이트모드 | 다크모드 |
+|------|-----------|---------|
+| 페이지 배경 | Gray-50 | Gray-900 |
+| 카드 배경 | White | Gray-800 |
+| 본문 텍스트 | Gray-600 | Gray-100 |
+| 제목 | Gray-900 | Gray-50 |
+| 테두리 | Gray-200 | Gray-700 |
+| Primary | #00D9B1 | #22D3B0 (밝기 조정) |
+
+### 3.6 색상 사용 가이드
+
+#### 텍스트 색상
+
+- **제목**: Gray-900 (라이트), Gray-50 (다크)
+- **본문**: Gray-600 (라이트), Gray-100 (다크)
+- **보조 텍스트**: Gray-500
+- **플레이스홀더**: Gray-400
+- **링크**: Primary-Main (호버 시 Primary-Dark)
+- **에러 텍스트**: Error-Main
+
+#### 배경 색상
+
+- **페이지**: Gray-50 (라이트), Gray-900 (다크)
+- **카드**: White (라이트), Gray-800 (다크)
+- **호버**: Gray-100
+- **선택**: Primary-Light (투명도 20%)
+
+#### 테두리 색상
+
+- **기본**: Gray-200
+- **호버**: Gray-300
+- **포커스**: Primary-Main (2px)
+- **에러**: Error-Main
+
+---
+
+## 4. 타이포그래피
+
+### 4.1 폰트 패밀리
+
+#### Primary Font (본문 및 UI)
+
+**한글**: Pretendard
+- 깔끔한 고딕 계열
+- 뛰어난 가독성
+- 다양한 굵기 지원 (100~900)
+- 시스템 폰트와 유사한 렌더링
+
+**영문/숫자**: Inter
+- 웹 환경 최적화
+- 명확한 문자 구분 (l, I, 1 등)
+- Pretendard와 조화로운 조합
+
+**폰트 스택**:
+```css
+font-family: 'Pretendard', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', sans-serif;
+```
+
+#### Monospace Font (코드, 데이터)
+
+**Fira Code, Consolas**
+- 코드 스니펫
+- API 응답
+- 로그, 에러 메시지
+
+**폰트 스택**:
+```css
+font-family: 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;
+```
+
+### 4.2 폰트 크기 스케일
+
+**1.25 배율 기반**
+
+| 레벨 | 이름 | 크기 (px / rem) | 사용처 |
+|------|------|----------------|--------|
+| 1 | Display | 48px / 3rem | 랜딩 페이지 메인 제목 |
+| 2 | H1 | 36px / 2.25rem | 페이지 제목 |
+| 3 | H2 | 30px / 1.875rem | 주요 섹션 제목 |
+| 4 | H3 | 24px / 1.5rem | 서브 섹션 제목 |
+| 5 | H4 | 20px / 1.25rem | 카드 제목, 작은 섹션 |
+| 6 | Body-Large | 18px / 1.125rem | 강조 본문, 리드 텍스트 |
+| 7 | **Body** | **16px / 1rem** | **기본 본문 (기준점)** |
+| 8 | Body-Small | 14px / 0.875rem | 보조 정보, 캡션 |
+| 9 | Caption | 12px / 0.75rem | 작은 라벨, 타임스탬프 |
+
+### 4.3 폰트 굵기 (Font Weight)
+
+| 레벨 | 값 | 사용처 |
+|------|---|--------|
+| Light | 300 | 보조 정보, 긴 본문 (선택적) |
+| **Regular** | **400** | **기본 본문** |
+| Medium | 500 | 강조 본문, 버튼 텍스트 |
+| SemiBold | 600 | 제목 (H3, H4), 중요 정보 |
+| Bold | 700 | 큰 제목 (H1, H2), 최고 강조 |
+
+### 4.4 행간 (Line Height)
+
+| 이름 | 값 | 사용처 |
+|------|---|--------|
+| Tight | 1.25 | 큰 제목 (Display, H1, H2) |
+| **Normal** | **1.5** | **본문 텍스트 (기본)** |
+| Relaxed | 1.75 | 긴 본문, 읽기 편안함 필요 시 |
+
+### 4.5 자간 (Letter Spacing)
+
+| 이름 | 값 | 사용처 |
+|------|---|--------|
+| Tight | -0.02em | 큰 제목 (Display, H1) |
+| **Normal** | **0** | **본문 (기본)** |
+| Wide | 0.02em | 작은 캡션, 레이블 (대문자) |
+
+### 4.6 텍스트 스타일 예시
+
+#### Display
+```css
+font-size: 48px;
+font-weight: 700;
+line-height: 1.25;
+letter-spacing: -0.02em;
+```
+
+#### H1
+```css
+font-size: 36px;
+font-weight: 700;
+line-height: 1.25;
+letter-spacing: -0.02em;
+```
+
+#### H2
+```css
+font-size: 30px;
+font-weight: 600;
+line-height: 1.25;
+letter-spacing: 0;
+```
+
+#### H3
+```css
+font-size: 24px;
+font-weight: 600;
+line-height: 1.5;
+letter-spacing: 0;
+```
+
+#### Body (기본)
+```css
+font-size: 16px;
+font-weight: 400;
+line-height: 1.5;
+letter-spacing: 0;
+```
+
+#### Caption
+```css
+font-size: 12px;
+font-weight: 400;
+line-height: 1.5;
+letter-spacing: 0.02em;
+```
+
+---
+
+## 5. 간격 시스템
+
+### 5.1 기본 단위
+
+**8px 기반 시스템**
+
+모든 간격은 8의 배수를 사용하여 일관성과 시각적 리듬을 유지합니다.
+
+### 5.2 스케일
+
+| 레벨 | 값 (px / rem) | 사용처 |
+|------|--------------|--------|
+| 0 | 0px / 0 | 간격 없음 |
+| 1 | 4px / 0.25rem | 최소 간격 (아이콘-텍스트) |
+| 2 | 8px / 0.5rem | 작은 간격 (인라인 요소) |
+| 3 | 12px / 0.75rem | 밀접한 요소 (버튼 내부) |
+| **4** | **16px / 1rem** | **기본 간격** |
+| 5 | 20px / 1.25rem | 적당한 간격 |
+| 6 | 24px / 1.5rem | 컴포넌트 간 |
+| 8 | 32px / 2rem | 섹션 내부 |
+| 10 | 40px / 2.5rem | 섹션 간 |
+| 12 | 48px / 3rem | 큰 섹션 간 |
+| 16 | 64px / 4rem | 페이지 여백 |
+| 20 | 80px / 5rem | 대형 섹션 |
+
+### 5.3 컴포넌트별 간격
+
+#### 버튼
+- **패딩**: 12px (상하) × 24px (좌우) - 중형
+- **패딩 (소형)**: 8px (상하) × 16px (좌우)
+- **패딩 (대형)**: 16px (상하) × 32px (좌우)
+- **아이콘-텍스트 간격**: 8px
+
+#### 입력 필드
+- **패딩**: 12px (상하) × 16px (좌우)
+- **레이블-필드 간격**: 8px
+
+#### 카드
+- **패딩**: 24px
+- **카드 간 간격**: 16px (그리드), 24px (리스트)
+
+#### 모달
+- **패딩**: 32px
+- **헤더-본문 간격**: 24px
+- **본문-푸터 간격**: 32px
+
+#### 페이지 여백
+- **데스크탑**: 64px (좌우)
+- **태블릿**: 32px (좌우)
+- **모바일**: 24px (좌우)
+
+### 5.4 컨테이너 최대 너비
+
+| 크기 | 최대 너비 | 사용처 |
+|------|---------|--------|
+| Small | 640px | 폼, 로그인 화면 |
+| Medium | 768px | 템플릿 선택 |
+| Large | 1024px | 회의 예약 |
+| XLarge | 1280px | 대시보드 |
+| 2XLarge | 1536px | 회의 진행 (에디터) |
+| Full | 100% | 풀 레이아웃 |
+
+---
+
+## 6. 컴포넌트 스타일
+
+### 6.1 버튼 (Button)
+
+#### Primary Button (주요 액션)
+
+**스타일**:
+- 배경: Primary-Main (#00D9B1)
+- 텍스트: White
+- 패딩: 12px (상하) × 24px (좌우)
+- 테두리 반경: 8px
+- 폰트: Medium (500), 16px
+- 그림자: 없음 (기본), 0 2px 4px rgba(0, 0, 0, 0.1) (호버)
+
+**상태**:
+- **Hover**: 배경 Primary-Light + transform: translateY(-1px) + 그림자 증가
+- **Active**: 배경 Primary-Dark + transform: scale(0.98)
+- **Disabled**: 배경 Gray-300 + 텍스트 Gray-500 + 커서 not-allowed
+
+**코드 예시**:
+```css
+.btn-primary {
+  background-color: #00D9B1;
+  color: white;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: 500;
+  font-size: 16px;
+  transition: all 150ms ease-out;
+}
+
+.btn-primary:hover {
+  background-color: #4DFFDB;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.btn-primary:active {
+  background-color: #00A88A;
+  transform: scale(0.98);
+}
+
+.btn-primary:disabled {
+  background-color: #D1D5DB;
+  color: #6B7280;
+  cursor: not-allowed;
+}
+```
+
+#### Secondary Button (보조 액션)
+
+**스타일**:
+- 배경: Transparent
+- 텍스트: Primary-Main
+- 테두리: 1px solid Primary-Main
+- 패딩: 12px × 24px
+- 테두리 반경: 8px
+
+**상태**:
+- **Hover**: 배경 Primary-Main (투명도 10%)
+- **Active**: 배경 Primary-Main (투명도 20%)
+- **Disabled**: 테두리 Gray-300 + 텍스트 Gray-400
+
+#### Text Button (덜 중요한 액션)
+
+**스타일**:
+- 배경: Transparent
+- 텍스트: Gray-700
+- 패딩: 8px × 16px
+- 테두리 반경: 8px
+
+**상태**:
+- **Hover**: 배경 Gray-100
+- **Active**: 배경 Gray-200
+
+#### Icon Button
+
+**스타일**:
+- 크기: 40×40px (중형), 32×32px (소형), 48×48px (대형)
+- 테두리 반경: 50% (원형) 또는 8px (사각형)
+- 아이콘 크기: 20px (중형), 16px (소형), 24px (대형)
+- 배경: Transparent
+
+**상태**:
+- **Hover**: 배경 Gray-100
+- **Active**: 배경 Gray-200
+
+#### Floating Action Button (FAB)
+
+**스타일**:
+- 크기: 56×56px
+- 테두리 반경: 50% (완전 원형)
+- 배경: Primary-Main
+- 아이콘: White, 24px
+- 그림자: 0 4px 12px rgba(0, 0, 0, 0.15)
+- 위치: 우측 하단 고정 (16px 여백)
+
+**상태**:
+- **Hover**: 그림자 0 6px 16px rgba(0, 0, 0, 0.2) + transform: translateY(-2px)
+- **Active**: transform: scale(0.95)
+
+### 6.2 입력 필드 (Input Field)
+
+#### Text Input
+
+**스타일**:
+- 높이: 48px
+- 패딩: 12px (상하) × 16px (좌우)
+- 테두리: 1px solid Gray-300
+- 테두리 반경: 8px
+- 배경: White
+- 폰트: Regular, 16px
+- 플레이스홀더: Gray-400
+
+**상태**:
+- **Focus**: 테두리 Primary-Main 2px + outline 4px Primary-Main (투명도 20%)
+- **Error**: 테두리 Error-Main + 하단 에러 메시지 (Error-Main, 14px)
+- **Disabled**: 배경 Gray-100 + 텍스트 Gray-400 + 커서 not-allowed
+- **Success**: 테두리 Success-Main (선택적)
+
+**코드 예시**:
+```css
+.input {
+  height: 48px;
+  padding: 12px 16px;
+  border: 1px solid #D1D5DB;
+  border-radius: 8px;
+  font-size: 16px;
+  transition: all 150ms ease-out;
+}
+
+.input:focus {
+  border-color: #00D9B1;
+  border-width: 2px;
+  outline: 4px solid rgba(0, 217, 177, 0.2);
+}
+
+.input.error {
+  border-color: #EF4444;
+}
+
+.input:disabled {
+  background-color: #F3F4F6;
+  color: #9CA3AF;
+  cursor: not-allowed;
+}
+```
+
+#### Textarea
+
+**스타일**:
+- 최소 높이: 120px
+- 패딩: 12px × 16px
+- 나머지는 Text Input과 동일
+- resize: vertical (세로 크기 조절 가능)
+
+#### Select / Dropdown
+
+**스타일**:
+- Input과 동일
+- 우측 아이콘: Chevron Down, 16px, Gray-500
+
+### 6.3 카드 (Card)
+
+**스타일**:
+- 배경: White
+- 테두리: 1px solid Gray-200 (선택적, 없을 수도 있음)
+- 테두리 반경: 12px
+- 패딩: 24px
+- 그림자: 0 1px 3px rgba(0, 0, 0, 0.1) (기본)
+
+**상태 (인터랙티브 카드)**:
+- **Hover**: 그림자 0 4px 12px rgba(0, 0, 0, 0.15) + transform: translateY(-2px)
+- **Active**: 그림자 0 1px 2px rgba(0, 0, 0, 0.1) + transform: scale(0.99)
+
+**코드 예시**:
+```css
+.card {
+  background-color: white;
+  border: 1px solid #E5E7EB;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: all 200ms ease-out;
+}
+
+.card.interactive:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transform: translateY(-2px);
+}
+```
+
+### 6.4 모달 (Modal)
+
+**스타일**:
+- 배경: White
+- 테두리 반경: 16px
+- 패딩: 32px
+- 최대 너비: 600px (중형), 800px (대형), 480px (소형)
+- 그림자: 0 20px 25px rgba(0, 0, 0, 0.15)
+
+**백드롭 (Backdrop)**:
+- 배경: rgba(0, 0, 0, 0.5)
+- 클릭 시 모달 닫기 (선택적)
+
+**애니메이션**:
+- 등장: Fade In (200ms) + Scale (0.95 → 1.0)
+- 사라짐: Fade Out (150ms) + Scale (1.0 → 0.95)
+
+### 6.5 토스트 알림 (Toast)
+
+**스타일**:
+- 배경: White
+- 테두리 반경: 8px
+- 패딩: 16px × 20px
+- 최대 너비: 400px
+- 그림자: 0 4px 12px rgba(0, 0, 0, 0.15)
+- 위치: 우측 상단 (16px 여백)
+
+**타입별 색상**:
+- **Success**: 좌측 테두리 4px Success-Main + Success 아이콘
+- **Error**: 좌측 테두리 4px Error-Main + Error 아이콘
+- **Warning**: 좌측 테두리 4px Warning-Main + Warning 아이콘
+- **Info**: 좌측 테두리 4px Info-Main + Info 아이콘
+
+**동작**:
+- 자동 사라짐: 4초 후
+- 닫기 버튼: 우측 상단 X 아이콘
+- 애니메이션: 우측에서 슬라이드 인
+
+### 6.6 배지 (Badge)
+
+**스타일**:
+- 패딩: 4px (상하) × 12px (좌우)
+- 테두리 반경: 12px (완전 둥근 형태)
+- 폰트: Medium, 12px
+
+**타입별 색상**:
+- **Primary**: 배경 Primary-Light, 텍스트 Primary-Dark
+- **Success**: 배경 Success-Light, 텍스트 Success-Dark
+- **Warning**: 배경 Warning-Light, 텍스트 Warning-Dark
+- **Error**: 배경 Error-Light, 텍스트 Error-Dark
+- **Neutral**: 배경 Gray-200, 텍스트 Gray-700
+
+**사용 예시**:
+- 상태 표시: "작성 중", "검증 중", "확정됨"
+- 카운트: "3개의 알림", "5명 참석"
+
+---
+
+## 7. 반응형 브레이크포인트
+
+### 7.1 브레이크포인트 정의
+
+| 디바이스 | 범위 | 레이아웃 | 주요 조정 |
+|---------|------|---------|----------|
+| **Mobile** | 320px ~ 767px | 단일 컬럼 | 햄버거 메뉴, 하단 탭, 스택 레이아웃 |
+| **Tablet** | 768px ~ 1023px | 2단 레이아웃 | 토글 사이드바, 터치 최적화 |
+| **Desktop** | 1024px ~ 1439px | 3단 레이아웃 | 고정 사이드바, 키보드 단축키 |
+| **Large Desktop** | 1440px 이상 | 확장 레이아웃 | 더 넓은 중앙 패널, 4단 가능 |
+
+### 7.2 디바이스별 UI 조정
+
+#### Mobile (320px ~ 767px)
+
+**네비게이션**:
+- 햄버거 메뉴로 사이드바 숨김
+- 하단 탭 네비게이션 (대시보드, 회의, Todo, 더보기)
+- 상단 헤더 고정
+
+**레이아웃**:
+- 1단 스택 레이아웃
+- 카드/위젯을 세로로 배치
+- 패딩 감소 (24px → 16px)
+
+**인터랙션**:
+- 최소 터치 영역: 44×44px
+- 버튼 크기 증가
+- 스와이프 제스처 지원
+
+**05-회의진행 화면**:
+- 탭으로 패널 전환 (회의록 / 참석자 / AI 제안 / 용어 설명)
+- 툴바를 하단 고정 (터치 용이성)
+
+**09-Todo관리 화면**:
+- 칸반 보드 대신 리스트 뷰 권장
+- 상태 변경은 드롭다운으로
+
+#### Tablet (768px ~ 1023px)
+
+**네비게이션**:
+- 사이드바 토글 가능 (기본 숨김)
+- 상단 헤더에 메뉴 아이콘
+
+**레이아웃**:
+- 2단 그리드 레이아웃 (2×2 또는 2×3)
+- 적절한 여백 유지
+
+**05-회의진행 화면**:
+- 2단 레이아웃 (에디터 + AI 제안 패널)
+- 참석자 목록은 드로어로 표시
+
+**터치 최적화**:
+- 버튼 크기: 최소 44×44px
+- 간격: 최소 8px
+
+#### Desktop (1024px 이상)
+
+**네비게이션**:
+- 전체 사이드바 항상 표시
+- 호버 효과 및 툴팁
+
+**레이아웃**:
+- 3단 그리드 레이아웃 (3×2)
+- 더 많은 위젯 동시 표시
+
+**05-회의진행 화면**:
+- 3단 레이아웃 (참석자 + 에디터 + AI 제안)
+- 모든 패널 동시 표시
+
+**키보드 단축키**:
+- Ctrl+N: 새 회의
+- Ctrl+S: 저장
+- Ctrl+F: 검색
+- Ctrl+/: 단축키 가이드
+
+### 7.3 미디어 쿼리 예시
+
+```css
+/* Mobile First 접근 */
+.container {
+  padding: 16px;
+}
+
+/* Tablet */
+@media (min-width: 768px) {
+  .container {
+    padding: 32px;
+  }
+}
+
+/* Desktop */
+@media (min-width: 1024px) {
+  .container {
+    padding: 64px;
+  }
+}
+
+/* Large Desktop */
+@media (min-width: 1440px) {
+  .container {
+    max-width: 1536px;
+    margin: 0 auto;
+  }
+}
+```
+
+---
+
+## 8. 회의록 서비스 특화 컴포넌트
+
+### 8.1 실시간 협업 인디케이터
+
+#### 사용자 커서
+
+**스타일**:
+- 사용자별 색상 코드:
+  - User 1: Primary-Main (#00D9B1)
+  - User 2: Secondary-Main (#6366F1)
+  - User 3: Warning-Main (#F59E0B)
+  - User 4: Info-Main (#3B82F6)
+  - User 5: Error-Main (#EF4444)
+- 커서 크기: 2px (너비) × 20px (높이)
+- 커서 상단에 아바타 + 이름 레이블
+- 레이블 배경: 사용자 색상, 텍스트: White
+- 레이블 패딩: 4px × 8px, 테두리 반경: 4px
+
+#### 편집 중 하이라이트
+
+**스타일**:
+- 배경: 사용자 색상 (투명도 20%)
+- 지속 시간: 사용자가 편집하는 동안 유지
+- 애니메이션: 부드러운 페이드인
+
+#### 변경 하이라이트
+
+**스타일**:
+- 배경: Warning-Light (노란색)
+- 지속 시간: 3초
+- 애니메이션: 3초 동안 페이드아웃
+
+### 8.2 상태 배지
+
+#### 작성 중
+
+**스타일**:
+- 배경: Warning-Light (#FCD34D)
+- 텍스트: Warning-Dark (#D97706)
+- 아이콘: Edit 아이콘 (선택적)
+
+#### 검증 중
+
+**스타일**:
+- 배경: Info-Light (#93C5FD)
+- 텍스트: Info-Dark (#2563EB)
+- 아이콘: Clock 아이콘 (선택적)
+
+#### 확정됨
+
+**스타일**:
+- 배경: Success-Light (#6EE7B7)
+- 텍스트: Success-Dark (#059669)
+- 아이콘: Check 아이콘 (선택적)
+
+### 8.3 전문용어 하이라이트
+
+**스타일**:
+- 밑줄: 2px dotted Primary-Main
+- 커서: pointer
+
+**호버 상태**:
+- 툴팁 표시
+  - 배경: Gray-800
+  - 텍스트: White
+  - 패딩: 8px × 12px
+  - 테두리 반경: 6px
+  - 최대 너비: 300px
+  - 화살표 표시
+
+**클릭 상태**:
+- 우측 패널의 "용어 설명" 탭으로 전환
+- 해당 용어 상세 설명 표시
+
+### 8.4 AI 제안 영역
+
+**스타일**:
+- 배경: Gray-50
+- 테두리: 1px dashed Primary-Main
+- 테두리 반경: 8px
+- 패딩: 16px
+- 아이콘: AI Sparkle 아이콘 (Primary-Main)
+
+**액션 버튼**:
+- 적용: Primary 버튼 (소형, 패딩 8px × 16px)
+- 무시: Text 버튼
+
+**애니메이션**:
+- 등장: 페이드인 + 약간의 상승 (translateY)
+- 업데이트: 부드러운 전환 (200ms)
+
+### 8.5 Todo 카드
+
+**레이아웃**:
+- 카드 형태
+- 패딩: 16px
+- 테두리 반경: 8px
+- 그림자: 0 1px 3px rgba(0, 0, 0, 0.1)
+
+**우선순위 표시**:
+- 높음: 좌측 테두리 4px Error-Main + Error 점 (8px 원)
+- 보통: 테두리 없음, Gray 점
+- 낮음: 표시 없음
+
+**진행률 바**:
+- 높이: 4px
+- 배경: Gray-200
+- 채워진 부분: Primary-Main
+- 테두리 반경: 2px
+- 위치: 하단
+
+**마감일 표시**:
+- D-day 형식: "D-3", "오늘", "D+2 (지남)"
+- 색상:
+  - 지남: Error-Main
+  - 오늘: Warning-Main
+  - 여유: Gray-500
+
+**드래그 핸들**:
+- 아이콘: 점 6개 (2×3)
+- 색상: Gray-400
+- 위치: 좌측 상단
+
+**호버 상태**:
+- 그림자 증가
+- 드래그 핸들 색상 변경 (Gray-600)
+
+### 8.6 타임라인
+
+**스타일**:
+- 세로 라인: 2px solid Gray-300
+- 위치: 좌측 고정
+
+**이벤트 점**:
+- 크기: 12px 원
+- 배경: Primary-Main
+- 테두리: 2px solid White
+- 위치: 라인 중앙
+
+**타임스탬프**:
+- 폰트: Caption (12px), Gray-500
+- 위치: 이벤트 점 우측
+
+**이벤트 내용**:
+- 폰트: Body-Small (14px), Gray-700
+- 위치: 타임스탬프 하단
+
+---
+
+## 9. 인터랙션 패턴
+
+### 9.1 버튼 인터랙션
+
+**Hover**:
+```css
+transition: all 150ms ease-out;
+transform: translateY(-1px);
+box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+```
+
+**Active (클릭)**:
+```css
+transform: scale(0.98);
+```
+
+**Disabled**:
+```css
+cursor: not-allowed;
+opacity: 0.6;
+```
+
+### 9.2 카드 인터랙션 (인터랙티브 카드)
+
+**Hover**:
+```css
+transition: all 200ms ease-out;
+transform: translateY(-2px);
+box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+```
+
+**클릭**:
+```css
+transform: scale(0.99);
+```
+
+### 9.3 모달 애니메이션
+
+**등장**:
+```css
+/* Backdrop */
+opacity: 0 → 1;
+transition: opacity 200ms ease-out;
+
+/* Modal */
+opacity: 0 → 1;
+transform: scale(0.95) → scale(1.0);
+transition: all 200ms ease-out;
+```
+
+**사라짐**:
+```css
+opacity: 1 → 0;
+transform: scale(1.0) → scale(0.95);
+transition: all 150ms ease-in;
+```
+
+### 9.4 토스트 알림 애니메이션
+
+**등장**:
+```css
+transform: translateX(400px) → translateX(0);
+opacity: 0 → 1;
+transition: all 200ms ease-out;
+```
+
+**사라짐**:
+```css
+transform: translateX(0) → translateX(400px);
+opacity: 1 → 0;
+transition: all 150ms ease-in;
+```
+
+**자동 사라짐**: 4초 후
+
+### 9.5 로딩 상태
+
+#### 스켈레톤 UI
+
+**스타일**:
+- 배경: Gray-200
+- 테두리 반경: 4px
+- 애니메이션: 펄스 (밝기 변화)
+
+```css
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.skeleton {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+```
+
+#### 스피너
+
+**스타일**:
+- 색상: Primary-Main
+- 크기: 24px (소형), 40px (중형), 56px (대형)
+- 애니메이션: 회전
+
+```css
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.spinner {
+  animation: spin 1s linear infinite;
+}
+```
+
+### 9.6 드래그 앤 드롭
+
+**드래그 시작**:
+```css
+opacity: 0.5;
+cursor: grabbing;
+```
+
+**드롭 영역 (유효)**:
+```css
+border: 2px dashed #00D9B1;
+background-color: rgba(0, 217, 177, 0.05);
+```
+
+**드롭 영역 (무효)**:
+```css
+border: 2px dashed #EF4444;
+background-color: rgba(239, 68, 68, 0.05);
+```
+
+**드롭 완료**:
+```css
+transition: all 300ms ease-out;
+transform: translate(newX, newY);
+```
+
+### 9.7 포커스 스타일
+
+**인풋/버튼 포커스**:
+```css
+outline: 4px solid rgba(0, 217, 177, 0.2);
+outline-offset: 0;
+border-color: #00D9B1;
+```
+
+**키보드 네비게이션 포커스**:
+```css
+/* 마우스 클릭 시에는 outline 숨김 */
+.js-focus-visible :focus:not(.focus-visible) {
+  outline: none;
+}
+
+/* 키보드 탐색 시에만 outline 표시 */
+.focus-visible {
+  outline: 2px solid #00D9B1;
+  outline-offset: 2px;
+}
+```
+
+### 9.8 페이지 전환 애니메이션
+
+**페이드 전환**:
+```css
+/* 나가는 페이지 */
+opacity: 1 → 0;
+transition: opacity 150ms ease-out;
+
+/* 들어오는 페이지 */
+opacity: 0 → 1;
+transition: opacity 200ms ease-in;
+```
+
+---
+
+## 10. 변경 이력
+
+| 버전 | 날짜 | 작성자 | 변경 내용 |
+|------|------|--------|----------|
+| 1.0 | 2025-10-15 | 유진 | 초안 작성 - 레퍼런스 클로바노트 기반 스타일 가이드 설계 완료 |
+
+---
+
+## 부록
+
+### A. 색상 접근성 체크리스트
+
+- [ ] Primary-Main (#00D9B1) + White: 대비율 3.5:1 (AA Large) ✅
+- [ ] Gray-600 (#4B5563) + White: 대비율 8.6:1 (AAA) ✅
+- [ ] Primary-Main + Gray-900: 대비율 4.8:1 (AA) ✅
+- [ ] 모든 상태 색상 (Success, Warning, Error, Info) + White: AA 이상 ✅
+
+### B. 디자인 도구 및 에셋
+
+**권장 디자인 도구**:
+- Figma (프로토타입 및 디자인 시스템)
+- Adobe XD (대안)
+
+**아이콘 라이브러리**:
+- Heroicons (추천)
+- Feather Icons
+- Lucide Icons
+
+**일러스트레이션**:
+- unDraw (무료, 색상 커스터마이징 가능)
+- Storyset (Freepik)
+- 자체 제작 (브랜드 일관성)
+
+### C. 프론트엔드 구현 권장사항
+
+**CSS 프레임워크**:
+- Tailwind CSS (유틸리티 우선, 빠른 개발)
+- Emotion / styled-components (CSS-in-JS)
+
+**컴포넌트 라이브러리**:
+- Headless UI (접근성 우수)
+- Radix UI (무스타일 프리미티브)
+- 자체 제작 (완전한 커스터마이징)
+
+**애니메이션**:
+- Framer Motion (React)
+- GSAP (고급 애니메이션)
+- CSS Transitions (단순 애니메이션)
+
+### D. 참고 자료
+
+- **WCAG 2.1 가이드라인**: https://www.w3.org/WAI/WCAG21/quickref/
+- **클로바노트**: https://clovanote.naver.com/
+- **Pretendard 폰트**: https://cactus.tistory.com/306
+- **Tailwind CSS 컬러 팔레트**: https://tailwindcss.com/docs/customizing-colors
+
+---
+
+**문서 끝**