# 회의록 작성 및 공유 개선 서비스 - 스타일 가이드

## 문서 정보
- **작성일**: 2025-10-20
- **작성자**: 이미준 (서비스 기획자)
- **버전**: 1.0
- **설계 철학**: Mobile First 디자인
- **접근성 기준**: WCAG 2.1 Level AA

---

## 목차
1. [브랜드 아이덴티티](#1-브랜드-아이덴티티)
2. [디자인 원칙](#2-디자인-원칙)
3. [컬러 시스템](#3-컬러-시스템)
4. [타이포그래피](#4-타이포그래피)
5. [간격 시스템](#5-간격-시스템)
6. [컴포넌트 스타일](#6-컴포넌트-스타일)
7. [반응형 브레이크포인트](#7-반응형-브레이크포인트)
8. [회의록 특화 컴포넌트](#8-회의록-특화-컴포넌트)
9. [인터랙션 패턴](#9-인터랙션-패턴)
10. [아이콘 시스템](#10-아이콘-시스템)
11. [접근성 가이드](#11-접근성-가이드)
12. [변경 이력](#12-변경-이력)

---

## 1. 브랜드 아이덴티티

### 1.1 디자인 컨셉
**"효율적이고 정확한 회의록, 누구나 쉽게"**

회의록 작성 및 공유 개선 서비스는 업무 지식이 없어도 누락 없이 정확하게 회의록을 작성할 수 있도록 지원하는 전문 서비스입니다. 디자인은 다음 핵심 가치를 반영합니다:

- **전문성**: 신뢰할 수 있는 비즈니스 툴로서의 이미지
- **효율성**: 빠르고 정확한 회의록 작성 프로세스
- **접근성**: 누구나 쉽게 사용할 수 있는 직관적 UI
- **협업성**: 실시간 동기화와 협업 기능 강조
- **지능성**: AI 기반 자동화 기능의 시각적 표현

### 1.2 핵심 가치
1. **Mobile First**: 언제 어디서나 회의록 작성
2. **실시간 협업**: 참석자 간 즉각적 피드백
3. **맥락 기반 지원**: AI와 RAG를 통한 스마트한 도움
4. **명확성**: 간결하고 이해하기 쉬운 인터페이스

### 1.3 브랜드 컬러 의미
- **Primary Color (청록색)**: 생산성, 효율성, 신뢰감
- **Secondary Color (중간 회색)**: 중립성, 전문성, 차분함
- **Semantic Colors**: 직관적 상태 표시 (성공, 경고, 오류)

---

## 2. 디자인 원칙

### 2.1 Mobile First 철학
> "모바일에서 완벽하면, 데스크톱에서도 완벽하다"

1. **우선순위 중심 설계**: 작은 화면에서 가장 중요한 기능에 집중
2. **점진적 향상**: 모바일 기본 경험을 먼저 구축한 후, 화면이 커질수록 기능 추가
3. **성능 최적화**: 모바일 환경의 제약을 먼저 고려하여 모든 기기에서 빠른 성능 제공

### 2.2 일관성 원칙
- **시각적 일관성**: 동일한 컴포넌트는 모든 화면에서 동일한 스타일
- **행동 일관성**: 같은 액션은 같은 방식으로 동작
- **언어 일관성**: 동일한 개념은 동일한 용어로 표현

### 2.3 접근성 우선
- **WCAG 2.1 Level AA** 준수
- **키보드 네비게이션** 완전 지원
- **스크린 리더** 호환성 보장
- **색상 대비** 충족

### 2.4 피드백과 상태
- 모든 사용자 액션에 즉각적 피드백 제공
- 시스템 상태를 명확하게 표시
- 오류 발생 시 명확한 안내와 해결 방법 제시

---

## 3. 컬러 시스템

### 3.1 Primary Colors (주요 색상)

#### Primary - 청록색
```
주 용도: 주요 액션 버튼, 강조, 링크, 진행 표시
```

| 이름 | Hex | RGB | 용도 |
|------|-----|-----|------|
| Primary-50 | #ECFDF5 | rgb(236, 253, 245) | 배경 강조 |
| Primary-100 | #D1FAE5 | rgb(209, 250, 229) | Hover 배경 |
| Primary-200 | #A7F3D0 | rgb(167, 243, 208) | 연한 강조 |
| Primary-500 | #00C896 | rgb(0, 200, 150) | **기본 Primary** |
| Primary-600 | #00B589 | rgb(0, 181, 137) | Hover 상태 |
| Primary-700 | #00A07C | rgb(0, 160, 124) | Active 상태 |
| Primary-900 | #00725C | rgb(0, 114, 92) | 진한 강조 |

**접근성**: Primary-500 텍스트는 반드시 흰색(#FFFFFF) 사용 (대비 4.52:1 ✓)

### 3.2 Secondary Colors (보조 색상)

#### Neutral - 회색 스케일
```
주 용도: 텍스트, 배경, 보더, 비활성 상태
```

| 이름 | Hex | RGB | 용도 |
|------|-----|-----|------|
| Gray-50 | #F9FAFB | rgb(249, 250, 251) | 배경 보조 |
| Gray-100 | #F3F4F6 | rgb(243, 244, 246) | Hover 배경 |
| 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) | **제목, 최우선 텍스트** |

### 3.3 Semantic Colors (의미 색상)

#### Success - 성공/완료
```
주 용도: 검증완료, Todo 완료, 성공 메시지
```

| 이름 | Hex | RGB | 용도 |
|------|-----|-----|------|
| Success-50 | #ECFDF5 | rgb(236, 253, 245) | 배경 |
| Success-100 | #D1FAE5 | rgb(209, 250, 229) | 연한 배경 |
| Success-500 | #10B981 | rgb(16, 185, 129) | **기본 Success** |
| Success-700 | #047857 | rgb(4, 120, 87) | 진한 강조 |

#### Warning - 경고/주의
```
주 용도: 검증 필요, 마감일 임박, 주의 메시지
```

| 이름 | Hex | RGB | 용도 |
|------|-----|-----|------|
| Warning-50 | #FFFBEB | rgb(255, 251, 235) | 배경 |
| Warning-100 | #FEF3C7 | rgb(254, 243, 199) | 연한 배경 |
| Warning-500 | #F59E0B | rgb(245, 158, 11) | **기본 Warning** |
| Warning-700 | #B45309 | rgb(180, 83, 9) | 진한 강조 |

#### Error - 오류/실패
```
주 용도: 오류 메시지, 필수 항목 누락, 실패 상태
```

| 이름 | Hex | RGB | 용도 |
|------|-----|-----|------|
| Error-50 | #FEF2F2 | rgb(254, 242, 242) | 배경 |
| Error-100 | #FEE2E2 | rgb(254, 226, 226) | 연한 배경 |
| Error-500 | #EF4444 | rgb(239, 68, 68) | **기본 Error** |
| Error-700 | #B91C1C | rgb(185, 28, 28) | 진한 강조 |

#### Info - 정보/안내
```
주 용도: 정보 메시지, 안내, 작성중 상태
```

| 이름 | Hex | RGB | 용도 |
|------|-----|-----|------|
| Info-50 | #EFF6FF | rgb(239, 246, 255) | 배경 |
| Info-100 | #DBEAFE | rgb(219, 234, 254) | 연한 배경 |
| Info-500 | #3B82F6 | rgb(59, 130, 246) | **기본 Info** |
| Info-700 | #1D4ED8 | rgb(29, 78, 216) | 진한 강조 |

### 3.4 Background Colors (배경 색상)

| 이름 | Hex | 용도 |
|------|-----|------|
| Background-Primary | #FFFFFF | 주 배경 (카드, 모달) |
| Background-Secondary | #F9FAFB | 보조 배경 (페이지, 섹션 구분) |
| Background-Tertiary | #F3F4F6 | 3차 배경 (비활성 영역) |
| Background-Dark | #111827 | 다크 모드 배경 (선택) |

### 3.5 Text Colors (텍스트 색상)

| 이름 | Hex | 용도 | 대비 (on White) |
|------|-----|------|----------------|
| Text-Primary | #111827 | 제목, 중요 텍스트 | 16.1:1 ✓ |
| Text-Secondary | #6B7280 | 본문, 일반 텍스트 | 5.74:1 ✓ |
| Text-Tertiary | #9CA3AF | 보조 정보, 힌트 | 3.54:1 ✓ |
| Text-Disabled | #D1D5DB | 비활성 텍스트 | 2.01:1 |
| Text-Inverse | #FFFFFF | 어두운 배경 위 텍스트 | - |

---

## 4. 타이포그래피

### 4.1 Font Family

```css
--font-primary: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
--font-mono: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', monospace;
```

**선택 이유**:
- **Pretendard**: 한글 가독성 우수, 다양한 웨이트 지원, 무료 라이선스
- **System Fonts**: 빠른 로딩, 플랫폼 네이티브 느낌
- **Monospace**: 코드, 타임스탬프 등 고정폭 필요 시

### 4.2 Font Sizes (Mobile First)

| 이름 | Mobile | Tablet | Desktop | 용도 |
|------|--------|--------|---------|------|
| Display | - | 40px | 48px | 특별 제목 (Desktop만) |
| H1 | 24px | 28px | 32px | 페이지 제목 |
| H2 | 20px | 22px | 24px | 섹션 제목 |
| H3 | 18px | 20px | 20px | 카드 제목 |
| H4 | 16px | 18px | 18px | 소제목 |
| Body | 14px | 16px | 16px | 본문 텍스트 |
| Caption | 12px | 14px | 14px | 보조 정보 |
| Small | 11px | 12px | 12px | 최소 텍스트 |

**CSS 예제**:
```css
/* Mobile (기본) */
h1 { font-size: 24px; }

/* Tablet */
@media (min-width: 768px) {
  h1 { font-size: 28px; }
}

/* Desktop */
@media (min-width: 1024px) {
  h1 { font-size: 32px; }
}
```

### 4.3 Font Weights

| 이름 | Weight | 용도 |
|------|--------|------|
| Regular | 400 | 본문, 일반 텍스트 |
| Medium | 500 | 강조 텍스트 |
| SemiBold | 600 | 제목, 중요 정보 |
| Bold | 700 | 매우 중요한 제목, 강조 |

### 4.4 Line Heights

| 이름 | 값 | 용도 |
|------|-----|------|
| Tight | 1.25 | 제목 (H1-H4) |
| Normal | 1.5 | 본문 (Body, Caption) |
| Relaxed | 1.75 | 긴 텍스트 (회의록 내용) |

### 4.5 Letter Spacing

| 이름 | 값 | 용도 |
|------|-----|------|
| Tight | -0.01em | 큰 제목 (Display, H1) |
| Normal | 0em | 일반 텍스트 |
| Wide | 0.02em | 작은 텍스트 (Caption, Small) |

### 4.6 타이포그래피 스타일 예제

```css
/* 페이지 제목 */
.title-page {
  font-family: var(--font-primary);
  font-size: 24px; /* Mobile */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

/* 본문 텍스트 */
.text-body {
  font-family: var(--font-primary);
  font-size: 14px; /* Mobile */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0em;
  color: var(--text-secondary);
}

/* 보조 텍스트 */
.text-caption {
  font-family: var(--font-primary);
  font-size: 12px; /* Mobile */
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
}
```

---

## 5. 간격 시스템

### 5.1 Space Scale (8px 기반 그리드)

```css
--space-0: 0px;
--space-1: 4px;   /* 최소 간격 */
--space-2: 8px;   /* 기본 간격 */
--space-3: 12px;  /* 밀집 간격 */
--space-4: 16px;  /* 표준 간격 */
--space-5: 20px;
--space-6: 24px;  /* 섹션 간격 */
--space-8: 32px;  /* 큰 섹션 간격 */
--space-10: 40px;
--space-12: 48px; /* 페이지 상단/하단 */
--space-16: 64px; /* 매우 큰 간격 */
```

### 5.2 Padding

#### Container Padding (페이지 좌우 여백)
```css
/* Mobile */
padding: 0 16px;

/* Tablet */
@media (min-width: 768px) {
  padding: 0 24px;
}

/* Desktop */
@media (min-width: 1024px) {
  padding: 0 32px;
}
```

#### Card Padding
```css
/* Mobile */
padding: 16px;

/* Tablet/Desktop */
@media (min-width: 768px) {
  padding: 20px;
}
```

#### Button Padding
| 크기 | Padding | 용도 |
|------|---------|------|
| Small | 8px 12px | 보조 버튼 |
| Medium | 12px 16px | 기본 버튼 |
| Large | 16px 24px | 주요 버튼 (CTA) |

### 5.3 Margin

#### Stack (Vertical)
```css
--stack-small: 8px;   /* 밀집 배치 */
--stack-medium: 16px; /* 일반 배치 */
--stack-large: 24px;  /* 여유 배치 */
```

#### Inline (Horizontal)
```css
--inline-small: 8px;   /* 밀집 배치 */
--inline-medium: 12px; /* 일반 배치 */
--inline-large: 16px;  /* 여유 배치 */
```

### 5.4 Border Radius

```css
--radius-none: 0px;
--radius-small: 4px;    /* 버튼, 입력 필드 */
--radius-medium: 8px;   /* 카드, 모달 */
--radius-large: 12px;   /* 큰 카드 */
--radius-xlarge: 16px;  /* 강조 요소 */
--radius-full: 9999px;  /* 원형, 태그 */
```

**적용 예제**:
- 버튼: `border-radius: 4px;`
- 입력 필드: `border-radius: 4px;`
- 카드: `border-radius: 8px;`
- 모달: `border-radius: 12px;`
- 아바타: `border-radius: 9999px;`

### 5.5 Border Width

```css
--border-thin: 1px;   /* 기본 보더 */
--border-medium: 2px; /* 강조 보더 */
--border-thick: 4px;  /* 매우 강조 (좌측 강조 보더) */
```

---

## 6. 컴포넌트 스타일

### 6.1 Button (버튼)

#### 6.1.1 Primary Button
```css
.button-primary {
  background-color: #00C896;
  color: #FFFFFF;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 100ms ease-in-out;
}

.button-primary:hover {
  background-color: #00B589;
}

.button-primary:active {
  background-color: #00A07C;
}

.button-primary:disabled {
  background-color: #D1D5DB;
  color: #9CA3AF;
  cursor: not-allowed;
}
```

#### 6.1.2 Secondary Button
```css
.button-secondary {
  background-color: #F9FAFB;
  color: #6B7280;
  border: 1px solid #E5E7EB;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 100ms ease-in-out;
}

.button-secondary:hover {
  background-color: #F3F4F6;
  border-color: #D1D5DB;
}
```

#### 6.1.3 Outline Button
```css
.button-outline {
  background-color: transparent;
  color: #00C896;
  border: 1px solid #00C896;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 100ms ease-in-out;
}

.button-outline:hover {
  background-color: #ECFDF5;
}
```

#### 6.1.4 Ghost Button
```css
.button-ghost {
  background-color: transparent;
  color: #6B7280;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 100ms ease-in-out;
}

.button-ghost:hover {
  background-color: #F9FAFB;
}
```

#### 6.1.5 Button Sizes
| 크기 | 높이 | Padding | Font Size | 용도 |
|------|------|---------|-----------|------|
| Small | 32px | 8px 12px | 12px | 보조 액션 |
| Medium | 40px | 12px 16px | 14px | 기본 액션 |
| Large | 48px | 16px 24px | 16px | 주요 CTA |

### 6.2 Input Field (입력 필드)

```css
.input-field {
  background-color: #FFFFFF;
  color: #111827;
  border: 1px solid #E5E7EB;
  border-radius: 4px;
  font-size: 14px;
  height: 40px;
  padding: 0 16px;
  transition: border-color 150ms ease-in-out;
}

.input-field:focus {
  outline: none;
  border-color: #00C896;
  box-shadow: 0 0 0 3px rgba(0, 200, 150, 0.1);
}

.input-field:disabled {
  background-color: #F9FAFB;
  color: #9CA3AF;
  cursor: not-allowed;
}

.input-field.error {
  border-color: #EF4444;
}

.input-field::placeholder {
  color: #9CA3AF;
}
```

**Label**:
```css
.input-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
}
```

**Error Message**:
```css
.input-error-message {
  font-size: 12px;
  color: #EF4444;
  margin-top: 4px;
}
```

### 6.3 Card (카드)

```css
.card {
  background-color: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 16px; /* Mobile */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 150ms ease-in-out;
}

@media (min-width: 768px) {
  .card {
    padding: 20px; /* Tablet/Desktop */
  }
}

.card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-color: #00C896;
}

.card-clickable {
  cursor: pointer;
}
```

### 6.4 Modal (모달)

```css
/* 모달 오버레이 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

/* 모달 컨테이너 */
.modal {
  background-color: #FFFFFF;
  border-radius: 12px;
  padding: 24px;
  width: 90%; /* Mobile */
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15);
}

@media (min-width: 768px) {
  .modal {
    width: auto;
    max-width: 600px;
  }
}

@media (min-width: 1024px) {
  .modal {
    max-width: 800px;
  }
}

/* 모달 헤더 */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.modal-title {
  font-size: 20px;
  font-weight: 600;
  color: #111827;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #9CA3AF;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
}
```

---

## 7. 반응형 브레이크포인트

### 7.1 Breakpoints

```css
/* Mobile First (기본) */
@media (min-width: 320px) {
  /* Mobile Small */
}

@media (min-width: 768px) {
  /* Tablet */
}

@media (min-width: 1024px) {
  /* Desktop */
}

@media (min-width: 1440px) {
  /* Large Desktop */
}
```

### 7.2 레이아웃 전략

#### Mobile (320px ~ 767px)
- **레이아웃**: 단일 컬럼
- **네비게이션**: 하단 네비게이션 바
- **모달**: 풀 스크린 또는 바텀 시트
- **간격**: 16px 컨테이너 패딩
- **카드**: 전체 너비, 스택 배치

#### Tablet (768px ~ 1023px)
- **레이아웃**: 2단 컬럼 (메인 + 사이드)
- **네비게이션**: 좌측 사이드 바 (고정 또는 접기)
- **모달**: 플로팅 모달 (중앙)
- **간격**: 24px 컨테이너 패딩
- **카드**: 그리드 2열

#### Desktop (1024px 이상)
- **레이아웃**: 3단 컬럼 (네비게이션 + 메인 + 사이드)
- **네비게이션**: 좌측 사이드 바 (고정)
- **모달**: 인라인 모달
- **간격**: 32px 컨테이너 패딩
- **카드**: 그리드 3-4열

---

## 8. 회의록 특화 컴포넌트

### 8.1 음성 녹음 UI

```css
.voice-recording {
  background-color: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 16px;
  height: 80px; /* Mobile */
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (min-width: 1024px) {
  .voice-recording {
    height: 100px; /* Desktop */
  }
}

/* 녹음 상태 표시 */
.recording-indicator {
  width: 12px;
  height: 12px;
  background-color: #EF4444;
  border-radius: 50%;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* 타이머 */
.recording-timer {
  font-size: 18px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: #111827;
}

/* 파형 애니메이션 */
.waveform {
  flex: 1;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 2px;
}

.waveform-bar {
  width: 3px;
  background-color: #00C896;
  border-radius: 2px;
  animation: wave 1s ease-in-out infinite;
}
```

### 8.2 실시간 텍스트 표시

```css
.realtime-text {
  background-color: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
}

/* 화자 표시 */
.speaker-name {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #00C896;
  background-color: #ECFDF5;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 4px;
}

/* 타임스탬프 */
.timestamp {
  font-size: 12px;
  font-family: var(--font-mono);
  color: #9CA3AF;
  margin-left: 8px;
}

/* 텍스트 내용 */
.text-content {
  font-size: 14px;
  line-height: 1.75;
  color: #374151;
}

/* 타이핑 애니메이션 */
.typing-indicator {
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #00C896;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
```

### 8.3 용어 설명 툴팁

```css
/* 용어 하이라이트 */
.term-highlight {
  color: #00C896;
  border-bottom: 1px dashed #00C896;
  cursor: help;
}

/* 툴팁 */
.tooltip {
  position: absolute;
  background-color: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  padding: 16px;
  width: 320px; /* Mobile */
  max-width: 90vw;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

@media (min-width: 1024px) {
  .tooltip {
    width: 400px; /* Desktop */
  }
}

/* 툴팁 화살표 */
.tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 20px;
  border: 8px solid transparent;
  border-bottom-color: #E5E7EB;
}

.tooltip::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 21px;
  border: 7px solid transparent;
  border-bottom-color: #FFFFFF;
}

/* 툴팁 섹션 */
.tooltip-section {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E5E7EB;
}

.tooltip-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.tooltip-title {
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
  margin-bottom: 4px;
}

.tooltip-content {
  font-size: 14px;
  line-height: 1.5;
  color: #374151;
}
```

### 8.4 Todo 카드

```css
.todo-card {
  background-color: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-left: 4px solid #6B7280; /* 기본 */
  border-radius: 8px;
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: all 150ms ease-in-out;
}

.todo-card:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 우선순위별 좌측 보더 */
.todo-card.priority-high {
  border-left-color: #EF4444;
}

.todo-card.priority-medium {
  border-left-color: #F59E0B;
}

.todo-card.priority-low {
  border-left-color: #10B981;
}

/* 체크박스 */
.todo-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid #D1D5DB;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

.todo-checkbox.checked {
  background-color: #10B981;
  border-color: #10B981;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
}

/* Todo 내용 */
.todo-content {
  flex: 1;
}

.todo-title {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  margin-bottom: 4px;
}

.todo-title.completed {
  text-decoration: line-through;
  color: #9CA3AF;
}

/* 담당자 */
.todo-assignee {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #6B7280;
}

/* 마감일 */
.todo-duedate {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #6B7280;
  margin-left: 8px;
}

.todo-duedate.urgent {
  color: #EF4444;
  font-weight: 600;
}

/* 회의록 링크 */
.todo-meeting-link {
  font-size: 12px;
  color: #00C896;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
}

.todo-meeting-link:hover {
  text-decoration: underline;
}
```

### 8.5 검증 상태 배지

```css
/* 기본 배지 */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 12px;
}

/* 검증완료 */
.badge-verified {
  background-color: #ECFDF5;
  color: #10B981;
}

/* 검증 필요 */
.badge-pending {
  background-color: #FEF3C7;
  color: #F59E0B;
}

/* 작성중 */
.badge-in-progress {
  background-color: #DBEAFE;
  color: #3B82F6;
}

/* 확정완료 */
.badge-confirmed {
  background-color: #ECFDF5;
  color: #10B981;
  border: 1px solid #10B981;
}
```

---

## 9. 인터랙션 패턴

### 9.1 실시간 동기화 표시

```css
/* 수정 중인 사용자 하이라이트 */
.editing-highlight {
  background-color: #FEF3C7;
  animation: highlight-fade 3s ease-out forwards;
}

@keyframes highlight-fade {
  0% { background-color: #FEF3C7; }
  100% { background-color: transparent; }
}

/* 수정 중인 사용자 표시 */
.editing-user {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #F59E0B;
  background-color: #FEF3C7;
  padding: 2px 8px;
  border-radius: 4px;
}
```

### 9.2 로딩 상태

```css
/* 스피너 */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #E5E7EB;
  border-top-color: #00C896;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 스켈레톤 */
.skeleton {
  background: linear-gradient(
    90deg,
    #F9FAFB 25%,
    #F3F4F6 50%,
    #F9FAFB 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 프로그레스 바 */
.progress-bar {
  width: 100%;
  height: 4px;
  background-color: #E5E7EB;
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: #00C896;
  transition: width 300ms ease-out;
}
```

### 9.3 피드백 (토스트)

```css
/* 토스트 컨테이너 */
.toast {
  position: fixed;
  bottom: 20px; /* Mobile */
  left: 50%;
  transform: translateX(-50%);
  background-color: #111827;
  color: #FFFFFF;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  animation: toast-in 150ms ease-out;
}

@media (min-width: 1024px) {
  .toast {
    bottom: auto;
    top: 20px;
    right: 20px;
    left: auto;
    transform: none;
  }
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* 토스트 유형별 */
.toast-success {
  background-color: #10B981;
}

.toast-error {
  background-color: #EF4444;
}

.toast-info {
  background-color: #3B82F6;
}

.toast-warning {
  background-color: #F59E0B;
}
```

### 9.4 호버/포커스 상태

```css
/* 포커스 아웃라인 */
*:focus-visible {
  outline: 2px solid #00C896;
  outline-offset: 2px;
}

/* 버튼 호버 */
.button:hover {
  filter: brightness(0.9);
}

/* 카드 호버 */
.card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-color: #00C896;
}

/* 링크 호버 */
a:hover {
  text-decoration: underline;
}
```

### 9.5 애니메이션 지속 시간

```css
--duration-instant: 100ms;   /* 호버, 클릭 */
--duration-fast: 150ms;      /* 토스트, 간단한 전환 */
--duration-normal: 200ms;    /* 모달, 드롭다운 */
--duration-slow: 300ms;      /* 페이지 전환 */
--duration-slower: 500ms;    /* 복잡한 애니메이션 */
```

---

## 10. 아이콘 시스템

### 10.1 아이콘 스타일

- **스타일**: 라인(Outline) 기본
- **선 굵기**: 1.5px (Small), 2px (Medium/Large)
- **라이브러리 추천**: Heroicons, Feather Icons, Lucide

### 10.2 아이콘 크기

```css
--icon-small: 16px;   /* 인라인 아이콘 */
--icon-medium: 20px;  /* 버튼 아이콘 */
--icon-large: 24px;   /* 헤더 아이콘 */
--icon-xlarge: 32px;  /* 강조 아이콘 */
```

### 10.3 주요 아이콘

| 카테고리 | 아이콘 | 의미 |
|----------|--------|------|
| **회의** | 🎤 | 음성 녹음 |
| | 📝 | 회의록 |
| | 👥 | 참석자 |
| | ⏱️ | 타이머 |
| **상태** | ✅ | 완료 |
| | ⚠️ | 경고 |
| | ❌ | 오류 |
| | 🔄 | 진행중 |
| **액션** | ➕ | 추가 |
| | ✏️ | 수정 |
| | 🗑️ | 삭제 |
| | 📤 | 공유 |
| | 💾 | 저장 |
| **Todo** | ☐ | 미완료 |
| | ☑️ | 완료 |
| | ⭐ | 우선순위 |
| **시간** | 📅 | 날짜 |
| | ⏰ | 시간 |
| **AI** | 💡 | 용어 설명 |
| | 🤖 | AI 처리 |

### 10.4 아이콘 컬러

```css
/* 기본 */
.icon {
  color: #6B7280;
}

/* 활성 */
.icon-active {
  color: #00C896;
}

/* 비활성 */
.icon-disabled {
  color: #D1D5DB;
}

/* 강조 (Semantic) */
.icon-success { color: #10B981; }
.icon-warning { color: #F59E0B; }
.icon-error { color: #EF4444; }
.icon-info { color: #3B82F6; }
```

---

## 11. 접근성 가이드

### 11.1 WCAG 2.1 Level AA 준수

#### 11.1.1 색상 대비

모든 텍스트와 UI 컴포넌트는 WCAG 2.1 Level AA 색상 대비 기준을 충족합니다.

| 요소 | 전경색 | 배경색 | 대비 | 기준 | 통과 |
|------|--------|--------|------|------|------|
| 제목 텍스트 | #111827 | #FFFFFF | 16.1:1 | 4.5:1 | ✅ |
| 본문 텍스트 | #6B7280 | #FFFFFF | 5.74:1 | 4.5:1 | ✅ |
| 보조 텍스트 | #9CA3AF | #FFFFFF | 3.54:1 | 3:1 | ✅ |
| Primary 버튼 | #FFFFFF | #00C896 | 4.52:1 | 4.5:1 | ✅ |
| 보더 | #E5E7EB | #FFFFFF | 1.34:1 | 3:1 | ⚠️ 비텍스트 |

**주의사항**:
- 색상만으로 정보를 전달하지 않습니다 (아이콘, 텍스트 병행)
- 링크는 밑줄 또는 다른 시각적 표시와 함께 사용

#### 11.1.2 터치 타겟

모든 인터랙티브 요소는 최소 44x44px 터치 타겟 크기를 보장합니다.

```css
/* 버튼 최소 크기 */
.button {
  min-height: 44px;
  min-width: 44px;
}

/* 아이콘 버튼 */
.icon-button {
  width: 44px;
  height: 44px;
  padding: 12px;
}

/* 체크박스/라디오 */
.checkbox,
.radio {
  width: 20px;
  height: 20px;
  /* 44x44px 클릭 영역 확보 */
  padding: 12px;
}
```

**간격**: 인접한 터치 타겟 사이 최소 8px 간격 유지

#### 11.1.3 포커스 표시

```css
/* 포커스 아웃라인 */
*:focus-visible {
  outline: 2px solid #00C896;
  outline-offset: 2px;
}

/* 키보드 네비게이션 순서 */
button, a, input, textarea, select {
  /* 논리적 탭 순서 보장 */
}
```

#### 11.1.4 ARIA 레이블

```html
<!-- 아이콘 버튼 -->
<button aria-label="회의 시작">
  <svg>...</svg>
</button>

<!-- 폼 필드 -->
<label for="meeting-title">회의 제목</label>
<input id="meeting-title" type="text" />

<!-- Live Region (실시간 업데이트) -->
<div aria-live="polite" aria-atomic="true">
  회의록이 업데이트되었습니다
</div>

<!-- 상태 표시 -->
<div role="status" aria-label="진행률 60%">
  <div class="progress-bar">...</div>
</div>
```

### 11.2 키보드 네비게이션

모든 기능은 키보드로 조작 가능해야 합니다.

| 키 | 기능 |
|-----|------|
| Tab | 다음 요소로 포커스 이동 |
| Shift + Tab | 이전 요소로 포커스 이동 |
| Enter / Space | 버튼 실행, 링크 이동 |
| Esc | 모달 닫기 |
| Arrow Keys | 드롭다운, 라디오 버튼 네비게이션 |

### 11.3 스크린 리더 지원

```html
<!-- 의미론적 HTML -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<article>...</article>
<section>...</section>
<footer>...</footer>

<!-- 제목 계층 -->
<h1>페이지 제목</h1>
  <h2>섹션 제목</h2>
    <h3>소제목</h3>

<!-- 목록 -->
<ul>
  <li>항목 1</li>
  <li>항목 2</li>
</ul>
```

### 11.4 반응형 텍스트

텍스트는 200%까지 확대 시에도 콘텐츠 손실이 없어야 합니다.

```css
/* rem 단위 사용 */
html {
  font-size: 16px;
}

body {
  font-size: 0.875rem; /* 14px */
}

h1 {
  font-size: 1.5rem; /* 24px */
}
```

---

## 12. 변경 이력

| 버전 | 날짜 | 작성자 | 변경 내용 |
|------|------|--------|-----------|
| 1.0 | 2025-10-20 | 이미준 | 초안 작성 - 브랜드 아이덴티티, 컬러 시스템, 타이포그래피, 간격 시스템, 컴포넌트 스타일, 회의록 특화 컴포넌트, 인터랙션 패턴, 아이콘 시스템, 접근성 가이드 포함 |

---

## 부록 A. CSS 변수 전체 목록

```css
:root {
  /* 컬러 - Primary */
  --primary-50: #ECFDF5;
  --primary-100: #D1FAE5;
  --primary-200: #A7F3D0;
  --primary-500: #00C896;
  --primary-600: #00B589;
  --primary-700: #00A07C;
  --primary-900: #00725C;

  /* 컬러 - Gray */
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* 컬러 - Semantic */
  --success-50: #ECFDF5;
  --success-100: #D1FAE5;
  --success-500: #10B981;
  --success-700: #047857;

  --warning-50: #FFFBEB;
  --warning-100: #FEF3C7;
  --warning-500: #F59E0B;
  --warning-700: #B45309;

  --error-50: #FEF2F2;
  --error-100: #FEE2E2;
  --error-500: #EF4444;
  --error-700: #B91C1C;

  --info-50: #EFF6FF;
  --info-100: #DBEAFE;
  --info-500: #3B82F6;
  --info-700: #1D4ED8;

  /* 폰트 */
  --font-primary: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', monospace;

  /* 간격 */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-large: 12px;
  --radius-xlarge: 16px;
  --radius-full: 9999px;

  /* 애니메이션 */
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;

  /* 아이콘 */
  --icon-small: 16px;
  --icon-medium: 20px;
  --icon-large: 24px;
  --icon-xlarge: 32px;
}
```

---

## 부록 B. 참고 자료

- **Pretendard 폰트**: https://github.com/orioncactus/pretendard
- **Heroicons**: https://heroicons.com/
- **WCAG 2.1 Guidelines**: https://www.w3.org/WAI/WCAG21/quickref/
- **WebAIM Contrast Checker**: https://webaim.org/resources/contrastchecker/
- **Mobile First Design**: https://www.uxpin.com/studio/blog/mobile-first-design/

---

**문서 끝**