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; } """