docs: add D4 Gemini-style UI renewal roadmap based on design mockup

Analyzed design mockup (Gemini-style) vs current UI and documented:
- D4-1: left sidebar layout replacing top tabs
- D4-2: welcome view with personalized greeting + glow gradient
- D4-3: pill-shaped input with center/bottom position transition
- D4-4: example question chip cards (gr.HTML replacing gr.Examples)
- D4-5: control panel iconification with popup panel
- D4-6: conversation history in sidebar via localStorage

Includes comparison table, implementation difficulty ratings, and checklist.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

ROADMAP.md

@@ -354,6 +354,126 @@ youlbot-webui/
 
 ---
 
+### D4 — 시안 기반 UI 리뉴얼 (Gemini 스타일)
+
+> 참고 시안: Google Gemini 스타일 — 좌측 사이드바 + 중앙 웰컴 화면 + 글로우 그라디언트
+
+#### 시안 vs 현재 비교
+
+| 항목 | 현재 율봇 | 시안 (Gemini 스타일) |
+|------|----------|---------------------|
+| 네비게이션 | 상단 수평 탭 3개 | 좌측 접이식 사이드바 |
+| 빈 화면 | 빈 흰 공간 + 예시 질문 하단 | 중앙 개인화 인사 + 글로우 배경 |
+| 입력창 위치 | 항상 하단 고정 | 빈 상태: 중앙 / 대화 중: 하단 |
+| 입력창 모양 | 직사각형 | Pill 형태(완전 둥근 테두리) |
+| 예시 질문 | 레이블 있는 리스트 | 레이블 없는 수평 chip 카드 |
+| 컨트롤 위치 | 항상 노출(체크박스·버튼 3개) | 아이콘 버튼으로 숨김 처리 |
+| 사용자 표시 | 드롭다운(헤더 우측) | 사이드바 하단 프로필 영역 |
+| 대화 이력 | 없음 | 사이드바에 최근 대화 목록 |
+
+#### D4-1 — 좌측 사이드바 레이아웃
+
+> 현재 탭 구조를 사이드바로 전환하는 핵심 레이아웃 변경
+
+- **구조**: `gr.Blocks` 내에 `gr.Column(scale=1)` 사이드바 + `gr.Column(scale=5)` 메인 영역
+- **사이드바 구성**:
+  - 상단: 율봇 로고 + 사이드바 접기 버튼(☰)
+  - 중간: 네비게이션 (`💬 대화`, `📄 문서 등록`, `🗂 문서 관리`)
+  - 하단: 사용자 프로필(아이콘 + 이름)
+- **사이드바 접기**: JS로 `sidebar-collapsed` CSS 클래스 토글 → `max-width: 0` 전환
+- **현재 탭** → `gr.Tab` 제거, 메인 영역을 `gr.Column(visible=...)` 3개로 교체
+- **CSS**: `.sidebar { width: 260px; transition: width .25s; }` + `.sidebar-collapsed { width: 64px; }`
+
+#### D4-2 — 빈 화면 웰컴 뷰 (중앙 인사 + 글로우)
+
+> 대화가 없을 때 Gemini 스타일 중앙 화면 표시
+
+- **개인화 인사**: `"{user_name}님, 시작해 볼까요?"` — 사용자 선택값 반영
+- **글로우 그라디언트**: 화면 중앙에 파란/하늘색 방사형 그라디언트 광원 효과
+  ```css
+  .welcome-glow {
+      background: radial-gradient(ellipse 60% 50% at 50% 40%,
+          rgba(99,179,237,.25) 0%, rgba(147,197,253,.12) 40%, transparent 70%);
+  }
+  ```
+- **전환 조건**: `chatbot` 히스토리가 비어있으면 웰컴 뷰 표시, 첫 메시지 전송 시 채팅 뷰로 전환
+- **구현**: `gr.HTML(elem_id="welcome-view")` + JS로 `chatbot` 내 메시지 수 감지 → visibility 토글
+
+#### D4-3 — Pill 형태 입력창 + 위치 전환
+
+> 입력창을 완전 둥근 pill 스타일로 변경하고 빈 상태에서는 화면 중앙에 배치
+
+- **Pill CSS**:
+  ```css
+  .pill-input textarea { border-radius: 999px !important; padding: 14px 24px !important; }
+  .pill-input { border-radius: 999px !important; }
+  ```
+- **중앙 배치 (빈 상태)**: 웰컴 뷰 안에 별도 입력 컨테이너 배치
+  - `position: relative; max-width: 680px; margin: 0 auto;`
+- **아이콘 통합**: 입력창 좌측에 `+` (첨부), 우측에 전송 화살표 아이콘
+- **전환**: 첫 전송 후 하단 고정 입력창으로 자연스럽게 전환 (CSS transition)
+
+#### D4-4 — 예시 질문 Chip 카드 스타일
+
+> 현재 리스트형 예시 질문을 시안의 수평 카드 chip으로 교체
+
+- **현재**: `gr.Examples` 컴포넌트 (세로 리스트, 레이블 있음)
+- **변경**: `gr.HTML`로 직접 렌더링한 수평 chip 카드
+  ```html
+  <div class="example-chips">
+    <button class="chip" onclick="fillInput('육아휴직 급여 신청 방법을 알려주세요')">
+      육아휴직 급여 신청 방법
+    </button>
+    ...
+  </div>
+  ```
+- **CSS**: `border-radius: 20px; border: 1px solid #e2e8f0; padding: 10px 18px; hover: background #f1f5f9`
+- **JS**: `fillInput(text)` → Gradio `gr_interface_input_0` textarea에 값 설정 후 포커스
+
+#### D4-5 — 컨트롤 패널 아이콘화
+
+> 항상 노출된 체크박스·버튼들을 아이콘 버튼으로 숨기고 필요 시 팝업
+
+- **현재 노출 컨트롤**: 사고 과정 표시, TTS, 내보내기, 대화 초기화
+- **변경**: 입력창 우측에 `⚙` 아이콘 → 클릭 시 컨트롤 패널 팝업(드롭업)
+  ```css
+  .control-panel { position: absolute; bottom: 60px; right: 0;
+      background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
+  ```
+- **항상 보이는 것**: 전송 버튼, 첨부 아이콘, 음성 아이콘
+- **숨기는 것**: 사고 과정 토글, TTS 토글, 내보내기, 초기화
+
+#### D4-6 — 대화 이력 사이드바
+
+> 사이드바에 최근 대화 목록 표시 (시안의 좌측 채팅 이력 섹션)
+
+- **구현**: `localStorage`에 대화 세션 저장 (최대 20개)
+- **표시**: 사이드바 중간 영역에 최근 대화 제목(첫 질문 앞 20자) 리스트
+- **클릭**: 해당 세션 복원 (현재는 메모리 기반이라 제목 표시만으로 시작)
+- **세션 저장**: `respond` 함수 완료 시 `localStorage` 업데이트 (JS)
+
+#### D4 구현 난이도 및 순서
+
+| 우선순위 | 항목 | 난이도 | 비고 |
+|---------|------|--------|------|
+| 1순위 | D4-2 웰컴 뷰 + 글로우 | ★★☆ | CSS + JS만으로 가능 |
+| 2순위 | D4-3 Pill 입력창 | ★★☆ | CSS 위주, 중앙 배치는 JS |
+| 3순위 | D4-4 Chip 예시 질문 | ★★☆ | `gr.Examples` → `gr.HTML` 교체 |
+| 4순위 | D4-5 컨트롤 아이콘화 | ★★★ | CSS + JS 팝업 구현 |
+| 5순위 | D4-1 사이드바 레이아웃 | ★★★★ | Gradio 레이아웃 대규모 변경 |
+| 6순위 | D4-6 대화 이력 | ★★★★ | 세션 관리 + localStorage |
+
+#### D4 체크리스트
+
+- [ ] D4-2: 웰컴 뷰 — 개인화 인사 + 글로우 그라디언트 배경
+- [ ] D4-3: Pill 입력창 CSS + 중앙/하단 위치 전환
+- [ ] D4-4: 예시 질문 → `gr.HTML` chip 카드 스타일
+- [ ] D4-5: 컨트롤 아이콘화 + ⚙ 팝업 패널
+- [ ] D4-1: 좌측 사이드바 레이아웃 (탭 제거)
+- [ ] D4-6: 대화 이력 localStorage 저장 + 사이드바 표시
+
+---
+
 ## 진행 체크리스트
 
 ### P0