From 2d8e83581cc9344227396236c344577d04bfe5c3 Mon Sep 17 00:00:00 2001
From: shinalok <shinalok357@gmail.com>
Date: Tue, 2 Jun 2026 17:46:24 +0900
Subject: [PATCH] design: upgrade example chips to card style with emoji,
 shadow, hover animation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add category emojis to question text (👶/🏫/💰)
- Card design: border-radius 14px, soft drop shadow, min-height 60px
- Equal-width flex cards (flex:1) with full-height stretch
- ::after arrow indicator (→), transitions on hover
- Hover: indigo gradient bg, purple border, translateY(-2px) lift
- Dark mode: matching dark card + purple glow on hover

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app.py | 61 +++++++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 43 insertions(+), 18 deletions(-)

diff --git a/app.py b/app.py
index b78e540..143e204 100644
--- a/app.py
+++ b/app.py
@@ -312,9 +312,9 @@ def _welcome_html(user_name: str) -> str:
 
 
 _EXAMPLE_QUESTIONS = [
-    "육아휴직 급여 신청 방법을 알려주세요",
-    "어린이집 입소 대기 기간은 얼마나 걸리나요?",
-    "아이 의료비 세금 공제는 어떻게 하나요?",
+    "👶  육아휴직 급여 신청 방법을 알려주세요",
+    "🏫  어린이집 입소 대기 기간은 얼마나 걸리나요?",
+    "💰  아이 의료비 세금 공제는 어떻게 하나요?",
 ]
 
 
@@ -565,24 +565,49 @@ footer { display: none !important; }
 /* ── 입력 Row 세로 중앙 정렬 ── */
 .input-row { align-items: center !important; gap: 8px !important; }
 
-/* ── 예시 질문 Chip (D4-4) ── */
-.example-chips-row { padding: 6px 0 4px !important; flex-wrap: wrap !important; gap: 8px !important; }
+/* ── 예시 질문 Chip 카드 (D4-4) ── */
+.example-chips-row {
+    padding: 10px 0 6px !important;
+    flex-wrap: nowrap !important;
+    gap: 10px !important;
+    align-items: stretch !important;
+}
+.example-chip-btn {
+    flex: 1 !important;
+    min-width: 0 !important;
+}
 .example-chip-btn button {
-    border-radius: 20px !important;
-    border: 1.5px solid #e2e8f0 !important;
-    background: #fff !important;
-    color: #374151 !important;
-    padding: 8px 18px !important;
+    border-radius: 14px !important;
+    border: 1.5px solid #e8edf4 !important;
+    background: #ffffff !important;
+    color: #1e293b !important;
+    padding: 14px 18px !important;
     font-size: .875rem !important;
-    box-shadow: none !important;
-    white-space: nowrap !important;
-    transition: all .15s !important;
     font-weight: 400 !important;
+    line-height: 1.5 !important;
+    box-shadow: 0 1px 6px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.02) !important;
+    white-space: normal !important;
+    text-align: left !important;
+    width: 100% !important;
+    height: 100% !important;
+    min-height: 60px !important;
+    justify-content: flex-start !important;
+    transition: all .2s ease !important;
+}
+.example-chip-btn button::after {
+    content: ' →';
+    color: #94a3b8;
+    font-size: .8rem;
+    margin-left: 4px;
+    transition: color .2s, transform .2s;
+    display: inline-block;
 }
 .example-chip-btn button:hover {
-    background: #eff6ff !important;
-    border-color: #93c5fd !important;
-    color: #1d4ed8 !important;
+    background: linear-gradient(135deg, #f0f7ff 0%, #f5f3ff 100%) !important;
+    border-color: #a5b4fc !important;
+    color: #1e40af !important;
+    box-shadow: 0 6px 20px rgba(99,102,241,.15) !important;
+    transform: translateY(-2px) !important;
 }
 
 /* ── 컨트롤 패널 (D4-5) ── */
@@ -647,8 +672,8 @@ footer { display: none !important; }
 .dark .message-wrap .bot  { background: #1e293b !important; border-color: #334155 !important; }
 .dark .nav-btn button:hover { background: #1e293b !important; }
 .dark .nav-btn button.nav-active { background: #1e3a5f !important; color: #93c5fd !important; }
-.dark .example-chip-btn button { background: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; }
-.dark .example-chip-btn button:hover { background: #1e3a5f !important; border-color: #3b82f6 !important; }
+.dark .example-chip-btn button { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; box-shadow: 0 1px 6px rgba(0,0,0,.3) !important; }
+.dark .example-chip-btn button:hover { background: linear-gradient(135deg, #1e3a5f, #1e1b4b) !important; border-color: #818cf8 !important; color: #c7d2fe !important; }
 .dark #control-panel { background: #1e293b !important; border-color: #334155 !important; }
 """