refactor: 챗봇 보라색 배경 제거, 마크다운 가독성 및 개행 간격 확대, 입력창 min-height 확장 적용

app.py

@@ -566,6 +566,74 @@ button.variant-secondary:hover,
     color: white !important;
     border-color: rgba(129, 140, 248, 0.4) !important;
 }
+
+/* 챗봇 보라색 배경 제거 및 고급스러운 다크 슬레이트 / 화이트 글래스 버블 구현 */
+.bubble, .message {
+    border-radius: 12px !important;
+}
+.user, .message.user, [data-testid="user"] {
+    background-color: #334155 !important; /* 보라색을 배제한 차분하고 고급스러운 다크 슬레이트 */
+    color: white !important;
+    border: 1px solid rgba(51, 65, 85, 0.2) !important;
+}
+.bot, .message.bot, [data-testid="bot"] {
+    background-color: rgba(255, 255, 255, 0.75) !important; /* 반투명 깨끗한 화이트 글래스 */
+    color: #1e293b !important;
+    border: 1px solid rgba(196, 195, 236, 0.45) !important;
+}
+.dark .user, .dark .message.user {
+    background-color: #475569 !important;
+}
+.dark .bot, .dark .message.bot {
+    background-color: rgba(30, 41, 59, 0.75) !important;
+    color: #f1f5f9 !important;
+    border-color: rgba(129, 140, 248, 0.2) !important;
+}
+
+/* 챗봇 메인 컨테이너 투명화 및 테두리 깔끔화 */
+.chatbot, [class*="chatbot"] {
+    background: rgba(255, 255, 255, 0.3) !important;
+    border: 1px solid rgba(196, 195, 236, 0.35) !important;
+    border-radius: 12px !important;
+}
+.dark .chatbot {
+    background: rgba(15, 23, 42, 0.3) !important;
+    border-color: rgba(129, 140, 248, 0.15) !important;
+}
+
+/* 입력창(텍스트에어리어) 세로 높이 및 패딩 확장 */
+textarea, 
+[class*="input-container"] textarea,
+[data-testid="textbox"] textarea {
+    min-height: 58px !important; /* 기존보다 훨씬 쾌적하고 시원한 세로 크기 */
+    font-size: 13px !important;
+    padding: 12px 16px !important;
+    line-height: 1.5 !important;
+    border-radius: 8px !important;
+    border: 1px solid rgba(196, 195, 236, 0.5) !important;
+    background: rgba(255, 255, 255, 0.8) !important;
+}
+textarea:focus {
+    border-color: #5b5b7f !important;
+    background: #ffffff !important;
+}
+.dark textarea {
+    background: rgba(30, 41, 59, 0.8) !important;
+    border-color: rgba(129, 140, 248, 0.25) !important;
+    color: white !important;
+}
+
+/* 챗봇 답변 마크다운 가독성 및 자간/줄간격 최적화 (개행이 시각적으로 시원하게 보이도록 마진 확보) */
+.message p, .message li, [class*="message"] p, [class*="message"] li {
+    line-height: 1.68 !important;
+    margin-bottom: 14px !important;
+    letter-spacing: -0.01em !important;
+}
+.message h3, [class*="message"] h3 {
+    margin-top: 24px !important;
+    margin-bottom: 12px !important;
+    font-weight: 800 !important;
+}
 """
 
 interface_kwargs = {

src/retrieval/finRetrieval.py

@@ -175,22 +175,36 @@ _prompt_template = CustomRagTemplate(
 
 답변은 대중이나 취업 준비생이 실질적으로 트렌드를 깊이 있게 파악하고 자소서/면접 등에 즉각 활용할 수 있도록, 아래의 [프리미엄 4단계 레이아웃] 구조를 엄격히 준수하여 매우 체계적이고 깔끔한 마크다운 양식으로 정성스럽게 브리핑해 주세요.
 
+★ [중요 - 가독성 극대화 규칙]: 
+결과가 빽빽하게 붙어 보이지 않도록, 각 대주제(###) 사이에는 무조건 빈 줄을 2줄 이상 추가하고, 개별 글머리 기호(- 및 **) 항목 사이사이에도 반드시 1줄 이상의 빈 줄(개행)을 두어 텍스트가 시각적으로 시원시원하고 쾌적하게 읽히도록 정리해서 작성해 주세요.
+
 ---
 
 ### 📊 [핵심 요약 및 트렌드 인사이트]
+
 - **한 줄 요약**: 해당 트렌드의 핵심 요점을 단 한 줄로 명료하게 요약합니다.
+
 - **주요 인사이트**: 이 이슈가 현재 IT/AI 및 금융 핀테크 업계 전체에 던지는 핵심 화두가 무엇인지 명시합니다.
 
+
 ### 🔍 [상세 이슈 및 핵심 팩트 분석]
+
 컨텍스트를 근거로 구체적인 사실 관계를 일목요연한 글머리기호(bullet points)로 상세히 정리합니다.
+
 - 예: 이슈의 전개 과정, 관련 기업들의 구체적인 움직임, 발생하고 있는 현상(예: 전력난, 반발, 기술적 한계 등).
 
+
 ### 💡 [시사점 및 지원동기/자소서 활용 가이드]
+
 이 뉴스가 갖는 거시적 의미와 핀테크/금융 대기업 채용 준비생이 서류/면접에 활용할 수 있는 차별화된 전략 포인트를 도출합니다.
+
 - **업계 시사점**: 기술 발전과 사회적 수용성(ESG, 인프라, 전력망 확보 등) 간의 균형적 관점 제시.
+
 - **실전 활용 Tip**: 지원동기나 면접 답변 구성 시 해당 트렌드를 어떻게 본인의 역량(예: 지속 가능한 기술 기획, 신뢰받는 AI 설계 등)과 연계하여 풀어낼 수 있을지에 대한 맞춤형 가이드라인 제공.
 
+
 ### 📰 [출처 및 근거 자료]
+
 - 컨텍스트에 포함된 기사의 실물 제목과 링크를 마크다운 링크 형식으로 투명하고 정밀하게 표기합니다.
   - 예: * [기사 제목](기사 URL) - 보도일자/언론사