feat: implement conversational hybrid RAG fallback routing and optimize presentation layout

AGENTS.md

@@ -122,10 +122,10 @@ def test_4_core_scenarios():
 - [x] **4. 정적/동적 방어 테스트**: Ruff/Mypy 통과, `python -c "import app"` 정상 빌드, `smoke_test_rag.py` 성공 검증
 
 ## 개발 체크리스트 (Gradio UI/UX 디테일 개선 단계)
-- [ ] **1. 화면 너비 대폭 확대**: `.gradio-container` 및 블록 레이아웃의 max-width를 대폭 확장하여 대화면 지원
-- [ ] **2. 예시 질문 최상단(챗봇 위) 이동**: CSS Flexbox order 또는 Blocks 구조 개편을 통해 예시 질문을 화면 맨 위로 고정
-- [ ] **3. 버튼 테두리 얇게 개선**: 예시 질문 버튼의 포인트 보더 두께를 축소하고 얇고 깔끔하게 미니멀리즘 디자인 적용
-- [ ] **4. 정적/동적 검증**: Ruff/Mypy 통과 및 `browser_subagent`를 통한 실제 렌더링 무결성 스크린샷 검증
+- [x] **1. 화면 너비 대폭 확대**: `.gradio-container` 및 블록 레이아웃의 max-width를 대폭 확장하여 대화면 지원
+- [x] **2. 예시 질문 최상단(챗봇 위) 이동**: CSS Flexbox order 또는 Blocks 구조 개편을 통해 예시 질문을 화면 맨 위로 고정
+- [x] **3. 버튼 테두리 얇게 개선**: 예시 질문 버튼의 포인트 보더 두께를 축소하고 얇고 깔끔하게 미니멀리즘 디자인 적용
+- [x] **4. 정적/동적 검증**: Ruff/Mypy 통과 및 `browser_subagent`를 통한 실제 렌더링 무결성 스크린샷 검증
 
 
 

README.md

@@ -73,6 +73,13 @@ pinned: false
   - `Vector Retriever`: 본문 청크 의미 유사도 검색
   - `VectorCypher Retriever`: 벡터 검색 후 해당 기사의 연관 그래프(기업·기술·서비스) 반환 (트렌드 분석에 최적화)
   - `Text2Cypher Retriever`: 자연어 → Cypher 쿼리 자동 변환 및 데이터 집계
+- **대화 맥락 반영 하이브리드 RAG & 지능형 Fallback 라우팅**:
+  - Neo4j에서 검색된 지식 그래프 정보와 사용자의 질문, 그리고 **최근 대화 히스토리(최근 3개 메시지)**를 종합 분석하여 GPT-4o 기반 자가 판정 가드레일(`_is_context_sufficient`)을 실시간 구동.
+  - 검색 결과가 질문에 답변하기 충분한 경우 `GraphRAG` 모드로 구동하여 구체적인 기사 출처 링크(URL, 제목 등)를 포함한 팩트 기반 답변 제공.
+  - 관련 정보가 부족하거나 금융/IT 뉴스를 벗어난 일반 질문(예: 수학 공식, 일상 대화 등), 혹은 이전 대화 맥락에 의존하는 질문에 대해서도 히스토리를 종합 분석하여 일반 지식 답변(`general` 모드)으로 유연하게 스위칭하여 환각(Hallucination) 방지 및 안정성 극대화.
+- **사용자 경험(UX) 및 프리미엄 UI 최적화**:
+  - **슬림 챗 버블**: Gradio 마크다운 렌더러가 내부 `<p>`, `<li>` 태그 등에 부여하는 비정상적으로 큰 상하 여백과 마진을 축소(`.message` 패딩 `10px 14px` 조정 및 내부 마진 최적화)하여 가독성 높고 슬림한 프리미엄 말풍선 UI 구현.
+  - **실시간 탐색 진행상황 시각화**: LangGraph 대화 스트림(Stream) 연동을 통해 `"🔍 검색 진행 중..."`, `"💡 답변 생성 중..."` 과정을 실시간으로 노출하여 다단계 RAG의 지연 시간 동안의 사용자 체감 대기 성능 혁신.
 
 ---
 

app.py

@@ -14,7 +14,8 @@ import dotenv
 import gradio as gr
 from langgraph.graph import END, StateGraph
 
-from src.retrieval.finRetrieval import graphrag
+from src.retrieval.finRetrieval import HybridResult, graphrag
+from src.utils.ui_templates import CUSTOM_CSS, build_stats_html
 
 dotenv.load_dotenv()
 
@@ -44,8 +45,9 @@ except Exception as e:
 class ChatState(TypedDict):
     question: str  # 사용자 질문
     history: List[dict]  # 대화 히스토리 [{"role": "user"/"assistant", "content": "..."}]
-    context: str  # GraphRAG 검색 결과
-    answer: str  # 최종 답변
+    context: str  # GraphRAG 검색 결과 또는 일반 지식 답변
+    answer: str   # 최종 답변
+    mode: str     # "graph": 그래프 기반 | "general": 일반 지식 기반
 
 
 # ──────────────────────────────────────────
@@ -54,16 +56,33 @@ class ChatState(TypedDict):
 
 
 def retrieve_node(state: ChatState) -> ChatState:
-    """Node 1: GraphRAG로 관련 컨텍스트 검색"""
+    """Node 1: search_with_fallback으로 그래프 검색 또는 일반 지식 응답 라우팅"""
     try:
-        result = graphrag.search(query_text=state["question"])
-        context = result.answer  # GraphRAG가 이미 답변을 완성하므로 바로 사용
-        
-        # 실제 GraphRAG 검색 시 사용된 상위 3개 뉴스 피드 동적 추출 및 포맷팅
+        hybrid: HybridResult = graphrag.search_with_fallback(
+            query_text=state["question"],
+            history=state["history"],
+        )
+
+        if hybrid.mode == "general":
+            # 일반 지식 모드: 배너 + GPT-4o 답변 반환
+            disclaimer = (
+                "> ⚠️ **지식 그래프에서 관련 뉴스를 찾지 못했습니다.**\n"
+                "> GPT-4o의 일반 학습 데이터를 기반으로 답변합니다.\n"
+                "> 최신 국내 뉴스 기반 정보가 필요하다면 질문을 더 구체적으로 입력해 보세요.\n\n"
+                "---\n\n"
+            )
+            context = disclaimer + hybrid.answer
+            return {**state, "context": context, "mode": "general"}
+
+        # 그래프 기반 모드: 기존 출처 추출 + 뉴스 피드 로직
+        context = hybrid.answer
         sources = []
-        seen_urls = set()
-        if hasattr(result, "retriever_result") and result.retriever_result and hasattr(result.retriever_result, "items"):
-            for item in result.retriever_result.items:
+        seen_urls: set = set()
+
+        # retriever_result에서 상위 3개 뉴스 출처 추출
+        retriever_result = hybrid.retriever_result
+        if retriever_result and hasattr(retriever_result, "items"):
+            for item in retriever_result.items:
                 meta = getattr(item, "metadata", {})
                 title = meta.get("article_title")
                 url = meta.get("article_url")
@@ -142,17 +161,15 @@ def retrieve_node(state: ChatState) -> ChatState:
                 
     except Exception as e:
         context = f"[검색 오류: {e}]"
-    return {**state, "context": context}
+    return {**state, "context": context, "mode": state.get("mode", "graph")}
 
 
 def generate_node(state: ChatState) -> ChatState:
     """Node 2: 대화 히스토리를 고려하여 최종 답변 생성
 
-    GraphRAG가 이미 검색 + 생성을 처리하므로,
-    여기서는 히스토리 기반 후처리나 추가 포맷팅만 수행합니다.
+    GraphRAG(graph 모드) 또는 일반 지식(general 모드) 응답 모두
+    retrieve_node에서 context에 최종 텍스트를 담아주므로 그대로 사용합니다.
     """
-    # GraphRAG 결과를 바로 답변으로 사용
-    # (히스토리 기반 후속 질문 처리가 필요하면 이 노드를 확장하세요)
     answer = state["context"] if state["context"] else "관련 정보를 찾을 수 없습니다."
     return {**state, "answer": answer}
 
@@ -197,6 +214,7 @@ def chat(message: str, history: list):
         "history": history,
         "context": "",
         "answer": "",
+        "mode": "",
     }
 
     yield "🔍 실시간 지식 그래프에서 관련 뉴스를 검색하는 중입니다..."
@@ -205,7 +223,11 @@ def chat(message: str, history: list):
         # LangGraph의 stream을 사용하여 각 노드 실행 시점마다 이벤트를 받음
         for event in chat_graph.stream(state):
             if "retrieve" in event:
-                yield "💡 검색 완료! 분석 결과를 바탕으로 최종 답변을 생성하는 중입니다..."
+                retrieved_mode = event["retrieve"].get("mode", "graph")
+                if retrieved_mode == "general":
+                    yield "🌐 관련 뉴스 없음 — GPT-4o 일반 지식으로 답변을 생성하는 중입니다..."
+                else:
+                    yield "💡 검색 완료! 분석 결과를 바탕으로 최종 답변을 생성하는 중입니다..."
             elif "generate" in event:
                 yield event["generate"]["answer"]
     except Exception as e:
@@ -273,97 +295,6 @@ def get_db_stats() -> Dict[str, Any]:
     return stats
 
 
-def build_stats_html(stats: Dict[str, Any]) -> str:
-    """조회된 지식 그래프 통계 정보들을 바탕으로 미려하고 컴팩트한 대시보드용 HTML을 생성합니다."""
-    # 1. 최신 뉴스 키워드 배지 HTML 생성 (둥근 네모 형태)
-    keyword_html: str = ""
-    for t in stats.get("techs_list", []):
-        keyword_html += f"""
-        <span class="keyword-badge"># {t['name']}</span>
-        """
-    if not keyword_html:
-        keyword_html = '<div style="font-size:12px; color:#94a3b8;">등록된 키워드가 없습니다.</div>'
-
-    # 1.5. 최신 주목 기업 배지 HTML 생성 (키워드 배지와 동일 스타일로 통일)
-    company_html: str = ""
-    for c in stats.get("companies_list", []):
-        company_html += f"""
-        <span class="keyword-badge">🏢 {c['name']}</span>
-        """
-    if not company_html:
-        company_html = '<div style="font-size:12px; color:#94a3b8;">등록된 기업이 없습니다.</div>'
-
-    # 2. 최근 기사 리스트 HTML 생성 (최대 4개) - 전체 영역 클릭 시 이동하도록 a 태그로 래핑
-    news_list_html: str = ""
-    for a in stats.get("recent_articles", []):
-        title = a["title"]
-        url = a["url"] if a["url"] and str(a["url"]).lower() != "nan" else "#"
-        target = 'target="_blank"' if url != "#" else ""
-        date_str = str(a['date'])[:10] if a['date'] else ""
-        news_list_html += f"""
-        <a class="news-item-link" href="{url}" {target}>
-            <div class="news-item">
-                <div class="news-title">{title}</div>
-                <div class="news-meta">🗓️ {date_str}</div>
-            </div>
-        </a>
-        """
-    if not news_list_html:
-        news_list_html = '<div style="font-size:12px; color:#94a3b8;">최근 수집된 기사가 없습니다.</div>'
-
-    # node_count = stats['companies'] + stats['technologies']
-
-    html: str = f"""
-    <div class="dashboard-container">
-        <!-- Ambient background elements for beautiful glass effects -->
-        <div class="ambient-glow"></div>
-        
-        <div style="font-size: 16px; font-weight: 850; color: #334155; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; letter-spacing: -0.02em;">
-            📊 <span>FinGraph AI Terminal</span>
-        </div>
-        <p style="font-size: 11px; color: #475569; margin-top: -2px; margin-bottom: 12px; font-weight: 600;">GraphRAG 실시간 분석 엔진 상태</p>
-        
-        <!-- 실시간 엔진 텔레메트리 (4개 메트릭 통폐합) -->
-        <div class="stats-grid">
-            <div class="stat-card">
-                <div class="stat-lbl">💡 분석 모델</div>
-                <div class="stat-val" style="font-size: 13px !important; font-weight: 800 !important; color: #334155;">GPT-4o</div>
-            </div>
-            <div class="stat-card">
-                <div class="stat-lbl">🏢 대상 회사</div>
-                <div class="stat-val" style="font-size: 13px !important; font-weight: 800 !important; color: #334155;">{stats['companies']}개</div>
-            </div>
-            <div class="stat-card">
-                <div class="stat-lbl">🔑 뉴스 키워드</div>
-                <div class="stat-val" style="font-size: 13px !important; font-weight: 800 !important; color: #334155;">{stats['technologies']}개</div>
-            </div>
-            <div class="stat-card">
-                <div class="stat-lbl">📰 분석용 뉴스 기사</div>
-                <div class="stat-val" style="font-size: 13px !important; font-weight: 800 !important; color: #334155;">{stats['articles']}건</div>
-            </div>
-        </div>
-        
-        <div class="section-subtitle" style="color: #334155;">💡 최신 뉴스 키워드</div>
-        <div class="keyword-container">
-            {keyword_html}
-        </div>
-        
-        <div class="section-subtitle" style="color: #334155;">🏢 최신 주목 기업</div>
-        <div class="keyword-container">
-            {company_html}
-        </div>
-        
-        <div class="section-subtitle" style="color: #334155;">📰 최신 뉴스 피드</div>
-        <div class="news-feed-container">
-            <div class="news-feed">
-                {news_list_html}
-            </div>
-        </div>
-    </div>
-    """
-    return html
-
-
 # ──────────────────────────────────────────
 # 5. Gradio UI 구성
 # ──────────────────────────────────────────
@@ -380,488 +311,6 @@ theme_obj = gr.themes.Soft(
     secondary_hue="slate",
 )
 
-custom_css: str = """
-body {
-    background-color: #fbf9f6;
-    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
-    color: #0f172a !important; /* 기본 검정��� */
-}
-
-/* Ambient glow point backgrounds (보라색 원천 배제, 은은한 스카이블루와 테일그린 톤) */
-.ambient-glow {
-    position: fixed;
-    top: 0; left: 0; right: 0; bottom: 0;
-    background: radial-gradient(circle at 85% 15%, rgba(14, 165, 233, 0.06) 0%, transparent 45%), 
-                radial-gradient(circle at 15% 85%, rgba(20, 184, 166, 0.06) 0%, transparent 45%);
-    z-index: -1;
-    pointer-events: none;
-}
-
-/* 대시보드 투명 글래스모피즘 컨테이너 */
-.dashboard-container {
-    background: rgba(255, 255, 255, 0.8) !important;
-    backdrop-filter: blur(24px) !important;
-    -webkit-backdrop-filter: blur(24px) !important;
-    border: 1px solid #cbd5e1 !important; /* 깔끔한 뉴트럴 슬레이트 테두리 */
-    border-radius: 12px;
-    padding: 16px;
-    box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.03) !important;
-    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
-}
-.dark .dashboard-container {
-    background: rgba(15, 23, 42, 0.55) !important;
-    border-color: rgba(14, 165, 233, 0.25) !important;
-    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.3) !important;
-}
-
-/* 통계 그리드 및 글래스 카드 */
-.stats-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 10px;
-    margin-bottom: 15px;
-}
-.stat-card {
-    background: rgba(255, 255, 255, 0.95);
-    border: 1px solid #cbd5e1;
-    border-radius: 8px;
-    padding: 10px;
-    text-align: center;
-    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.01);
-    transition: all 0.25s ease-in-out;
-}
-.stat-card:hover {
-    transform: translateY(-2px);
-    background: rgba(255, 255, 255, 1);
-    border-color: #0ea5e9; /* 호버 시 스카이 블루 */
-    box-shadow: 0 4px 12px -2px rgba(14, 165, 233, 0.1);
-}
-.dark .stat-card {
-    background: rgba(30, 41, 59, 0.7);
-    border-color: rgba(14, 165, 233, 0.2);
-    color: #f1f5f9;
-}
-.dark .stat-card:hover {
-    border-color: #38bdf8;
-}
-.stat-val {
-    font-size: 16px !important;
-    font-weight: 850 !important;
-    color: #0f172a !important; /* 확실한 고대비 검정색 글씨 */
-    margin-top: 2px;
-}
-.dark .stat-val {
-    color: #f8fafc !important;
-}
-.stat-lbl {
-    font-size: 11px !important;
-    color: #334155;
-    font-weight: 600;
-}
-.dark .stat-lbl {
-    color: #94a3b8;
-}
-
-/* 최신 뉴스 키워드 컨테이너 및 둥근 배지 스타일 (보라색 배제, 슬레이트 및 검정색 글씨) */
-.keyword-container {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    margin-bottom: 12px;
-}
-.keyword-badge {
-    display: inline-block;
-    background: #f1f5f9 !important; /* 연한 뉴트럴 슬레이트 */
-    border: 1px solid #cbd5e1 !important; /* 슬레이트 테두리 */
-    border-radius: 8px !important;
-    padding: 6px 12px;
-    font-size: 11px !important;
-    font-weight: 700;
-    color: #0f172a !important; /* 확실한 검정색 */
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
-    transition: all 0.2s ease-in-out;
-}
-.keyword-badge:hover {
-    background: #e2e8f0 !important;
-    transform: scale(1.03);
-}
-.dark .keyword-badge {
-    background: rgba(15, 23, 42, 0.4) !important;
-    border-color: rgba(14, 165, 233, 0.25) !important;
-    color: #cbd5e1 !important;
-}
-
-/* 최근 뉴스 피드 클릭 가능한 카드 레이아웃 */
-.news-feed-container {
-    max-height: 350px;
-    overflow-y: auto;
-    border: 1px solid #cbd5e1;
-    border-radius: 6px;
-    padding: 8px;
-    background: rgba(255, 255, 255, 0.7);
-}
-.dark .news-feed-container {
-    background: rgba(30, 41, 59, 0.5);
-    border-color: rgba(14, 165, 233, 0.15);
-}
-/* 스크롤바 커스텀 */
-.news-feed-container::-webkit-scrollbar {
-    width: 4px;
-}
-.news-feed-container::-webkit-scrollbar-track {
-    background: transparent;
-}
-.news-feed-container::-webkit-scrollbar-thumb {
-    background: rgba(148, 163, 184, 0.4);
-    border-radius: 2px;
-}
-.dark .news-feed-container::-webkit-scrollbar-thumb {
-    background: rgba(148, 163, 184, 0.2);
-}
-
-.news-item-link {
-    text-decoration: none;
-    display: block;
-    margin-bottom: 8px;
-}
-.news-item-link:last-child {
-    margin-bottom: 0;
-}
-.news-item {
-    border-left: 3px solid #0ea5e9; /* 파란색 오션 블루 포인트 */
-    padding: 8px 10px;
-    background: rgba(255, 255, 255, 0.8);
-    border-radius: 0 6px 6px 0;
-    transition: all 0.2s ease-in-out;
-    cursor: pointer;
-}
-.news-item-link:hover .news-item {
-    background: rgba(255, 255, 255, 1);
-    border-left-color: #0284c7;
-    transform: translateX(3px);
-    box-shadow: 0 2px 6px rgba(14, 165, 233, 0.08);
-}
-.dark .news-item {
-    background: rgba(30, 41, 59, 0.3);
-}
-.dark .news-item-link:hover .news-item {
-    background: rgba(30, 41, 59, 0.65);
-    border-left-color: #38bdf8;
-}
-.news-title {
-    font-size: 12px !important;
-    font-weight: 600;
-    color: #1b1c1a;
-    line-height: 1.4;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-.dark .news-title {
-    color: #cbd5e1;
-}
-.news-meta {
-    font-size: 10px !important;
-    color: #94a3b8;
-    margin-top: 2px;
-}
-
-/* 서브타이틀 헤더 스타일 (연한 에메랄드/테일 배경 + 딥 테일 글씨) */
-.section-subtitle {
-    font-size: 13px !important;
-    font-weight: 800;
-    color: #0f766e !important; /* 딥 테일 글씨 */
-    background: rgba(20, 184, 166, 0.1) !important; /* 연한 테일 글래스 배경 */
-    margin: 18px 0 8px 0;
-    padding: 6px 10px !important;
-    border-radius: 6px !important;
-    border-left: 3px solid #14b8a6 !important; /* 선명한 테일 세로선 */
-    display: flex;
-    align-items: center;
-    gap: 6px;
-}
-.dark .section-subtitle {
-    color: #99f6e4 !important;
-    background: rgba(20, 184, 166, 0.2) !important;
-    border-left-color: #2dd4bf !important;
-}
-
-/* ── 웰컴 보드(소개글 카드) 상단 짤림 방어 및 결합 준비 ── */
-.placeholder, [class*="placeholder"] {
-    justify-content: flex-start !important; 
-    padding-top: 15px !important; /* 상단 짤림 완전 방지 */
-    margin-bottom: 0 !important; /* 아래쪽 간격 완전 제거 */
-    padding-bottom: 0 !important;
-    height: auto !important; /* 껍데기 높이 고정 해제 */
-    min-height: unset !important;
-}
-.placeholder .prose {
-    background: #f8fafc !important; /* 쿨톤 회색 */
-    border: 1px solid #e2e8f0 !important;
-    border-bottom: none !important; /* 아래쪽 둥근 선 제거로 결합 준비 */
-    border-radius: 12px 12px 0 0 !important; /* 아래 모서리 직각 */
-    padding: 24px 24px 10px 24px !important; 
-    max-width: 800px !important; 
-    width: 100% !important;
-    margin: 0 auto !important; 
-    position: relative !important;
-    z-index: 2 !important; 
-    display: block !important; /* 은신 마법 방어 */
-    visibility: visible !important;
-    color: #334155 !important;
-}
-
-/* 2x2 grid layout for chatbot example buttons (Stitch Action Grid style) */
-[class*="examples"], .gr-samples-wrapper, .examples-container {
-    display: grid !important;
-    grid-template-columns: repeat(2, 1fr) !important;
-    gap: 10px !important;
-    
-    /* 🌟 핵심: 웰컴 보드와 한 몸이 되기 위한 완벽 밀착 및 껍데기 🌟 */
-    margin: -1px auto 40px auto !important; /* 웰컴 보드 바로 밑에 찰싹 붙음 */
-    background: #f8fafc !important; /* 웰컴 보드와 동일한 회색 배경 */
-    border: 1px solid #e2e8f0 !important;
-    border-top: none !important; /* 윗선 제거로 한 몸 결합 */
-    border-radius: 0 0 12px 12px !important; /* 윗 모서리 직각 */
-    padding: 5px 24px 24px 24px !important; 
-    max-width: 800px !important; /* 웰컴 보드 너비 일치 */
-    width: 100% !important;
-    position: relative !important;
-    z-index: 1 !important; /* 겹칠 때 흰 선 안보이게 밑으로 */
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important; 
-}
-[class*="examples"] button {
-    text-align: center !important; /* 사용자 요청: 가운데 정렬 */
-    padding: 14px 18px !important;
-    background: #e0f2fe !important; /* 사용자 요청: 연한 하늘색(파랑) 배경 */
-    border: 1px solid #bae6fd !important; 
-    border-radius: 10px !important;
-    font-size: 13px !important;
-    font-weight: 600 !important;
-    color: #000000 !important; /* 사용자 요청: 검은색 텍스트 */
-    line-height: 1.4 !important;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
-    transition: all 0.2s ease-in-out !important;
-    white-space: normal !important;
-    height: auto !important;
-    min-height: 54px !important;
-    cursor: pointer !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-}
-.dark [class*="examples"] button {
-    background: rgba(30, 41, 59, 0.5) !important;
-    border-color: rgba(148, 163, 184, 0.2) !important;
-    color: #e2e8f0 !important;
-}
-[class*="examples"] button:hover {
-    transform: translateY(-1px) !important;
-    background: #bae6fd !important; /* 약간 짙은 하늘색 호버 */
-    border-color: #7dd3fc !important;
-    color: #1e3a8a !important; /* 사용자 요청: 진한 파랑색 텍스트 */
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06) !important;
-}
-.dark [class*="examples"] button:hover {
-    background: rgba(30, 41, 59, 0.85) !important;
-    border-color: rgba(148, 163, 184, 0.4) !important;
-    color: #ffffff !important;
-}
-
-/* 챗봇 전송 버튼 프리미엄 다크 슬레이트 스타일 (이상한 그라데이션 제거, 단정하고 일관성 있는 색감) */
-button.primary, 
-.primary-btn, 
-button.lg.primary, 
-button.sm.primary,
-button.variant-primary,
-button[class*="submit-btn"],
-[data-testid="submit-button"] {
-    background: #1e293b !important; /* 프리미엄 다크 슬레이트 차콜 */
-    color: white !important;
-    font-weight: 700 !important;
-    border: 1px solid #0f172a !important;
-    border-radius: 8px !important;
-    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.08) !important;
-    transition: all 0.2s ease-in-out !important;
-    cursor: pointer !important;
-}
-button.primary:hover, 
-.primary-btn:hover, 
-button.variant-primary:hover,
-button[class*="submit-btn"]:hover,
-[data-testid="submit-button"]:hover {
-    background: #0f172a !important; /* 호버 시 딥 블랙 */
-    box-shadow: 0 4px 8px rgba(15, 23, 42, 0.15) !important;
-    transform: translateY(-1px) !important;
-}
-
-/* secondary 및 기타 유틸리티 버튼 스타일 */
-/* secondary 및 기타 유틸리티 버튼 스타일 (보라색 제거) */
-button.secondary, 
-button.lg.secondary, 
-button.sm.secondary, 
-button.wrap,
-button.variant-secondary,
-.secondary-btn {
-    background-color: rgba(255, 255, 255, 0.6) !important;
-    color: #0f172a !important; /* 기본 검정색 */
-    border: 1px solid #cbd5e1 !important;
-    font-weight: 700 !important;
-    transition: all 0.2s ease-in-out !important;
-    backdrop-filter: blur(8px);
-}
-.dark button.secondary, 
-.dark button.variant-secondary, 
-.dark .secondary-btn {
-    background-color: rgba(30, 41, 59, 0.6) !important;
-    color: #f1f5f9 !important;
-    border-color: rgba(14, 165, 233, 0.2) !important;
-}
-button.secondary:hover, 
-button.variant-secondary:hover,
-.secondary-btn:hover {
-    background-color: rgba(255, 255, 255, 0.95) !important;
-    color: #0f172a !important;
-    border-color: #94a3b8 !important;
-}
-.dark button.secondary:hover, 
-.dark button.variant-secondary:hover {
-    background-color: rgba(30, 41, 59, 0.95) !important;
-    color: white !important;
-    border-color: #38bdf8 !important;
-}
-
-/* 챗봇 보라색 배경 완전 제거 및 고대비 슬레이트/화이트 버블 구현 */
-.bubble, .message {
-    border-radius: 12px !important;
-}
-
-/* 사용자 버블 가독성 완전 개선 (글씨색을 강제로 깨끗한 흰색으로 고정하여 500% 선명하게 표시) */
-.message.user {
-    background-color: #334155 !important; /* 차분하고 고급스러운 다크 슬레이트 */
-    border: 1px solid rgba(51, 65, 85, 0.2) !important;
-}
-.message.user p, .message.user span, .message.user li, .message.user div {
-    color: #ffffff !important; /* 완전 흰색 글씨 */
-    font-weight: 600 !important;
-}
-
-/* 봇 버블 가독성 완전 개선 (글씨색 확실한 검정색, 보라색 테두리 제거) */
-.message.bot {
-    background-color: rgba(255, 255, 255, 0.95) !important; /* 반투명 깨끗한 화이트 글래스 */
-    border: 1px solid #cbd5e1 !important;
-}
-.message.bot p, .message.bot span, .message.bot li, .message.bot div {
-    color: #0f172a !important; /* 확실한 고대비 검정색 글씨 */
-}
-.dark .message.user {
-    background-color: #475569 !important;
-}
-.dark .message.bot {
-    background-color: rgba(30, 41, 59, 0.85) !important;
-    border-color: rgba(14, 165, 233, 0.2) !important;
-}
-.dark .message.bot p, .dark .message.bot span, .dark .message.bot li {
-    color: #f1f5f9 !important;
-}
-
-/* Chatbot 라벨/탭 완전 숨김 (불필요한 보라색/하늘색 색상 및 테두리 원천 차단) */
-/* 주의: .chatbot > div:first-child 는 웰컴카드를 지워버릴 수 있으므로 삭제! */
-.chatbot-label,
-div[class*="chatbot"] .label,
-[data-testid="chatbot"] .label,
-.chatbot-header,
-.gr-panel-title,
-.gr-chatbot-label,
-.label-wrap {
-    display: none !important;
-}
-
-/* 챗봇 메인 컨테이너 투명화 및 테두리 깔끔화 */
-.chatbot, [class*="chatbot"] {
-    background: rgba(255, 255, 255, 0.3) !important;
-    border: 1px solid #cbd5e1 !important;
-    border-radius: 12px !important;
-}
-.dark .chatbot {
-    background: rgba(15, 23, 42, 0.3) !important;
-    border-color: rgba(14, 165, 233, 0.15) !important;
-}
-
-/* 입력창(텍스트에어리어) 세로 높이 및 단일 행 수직 중앙 정렬 최적화 */
-textarea, 
-[class*="input-container"] textarea,
-[data-testid="textbox"] textarea {
-    height: 48px !important;
-    min-height: 48px !important;
-    max-height: 48px !important;
-    font-size: 13px !important;
-    padding: 13px 16px !important; /* 위아래 패딩을 줄여서 높이에 맞게 조절 */
-    line-height: 1.5 !important;
-    border-radius: 8px !important;
-    border: 1px solid #cbd5e1 !important;
-    background: rgba(255, 255, 255, 0.8) !important;
-    color: #0f172a !important; /* 입력 텍스트 검정색 */
-    resize: none !important; /* 세로 크기 조절 방지 */
-    overflow-y: hidden !important; /* 스크롤바 감춤 */
-    box-sizing: border-box !important;
-}
-textarea:focus {
-    border-color: #0ea5e9 !important; /* 포커스 시 스카이 블루 */
-    background: #ffffff !important;
-}
-.dark textarea {
-    background: rgba(30, 41, 59, 0.8) !important;
-    border-color: rgba(14, 165, 233, 0.25) !important;
-    color: white !important;
-}
-
-/* 챗봇 입력창과 전송 버튼 세로 높이 완벽 동기화 및 여백 분리 */
-button[class*="submit-btn"],
-[data-testid="submit-button"],
-#submit-btn {
-    margin-left: 12px !important;
-    border-radius: 8px !important;
-    min-width: 95px !important;
-    height: 48px !important; /* 입력창의 height(48px)와 100% 동일하게 일치 */
-    padding: 0 16px !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    box-sizing: border-box !important;
-}
-div:has(> button[class*="submit-btn"]),
-div:has(> [data-testid="submit-button"]),
-.input-container,
-[class*="input-container"] {
-    gap: 12px !important;
-    align-items: center !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;
-    border: none !important;
-    border-left: none !important;
-    border-right: none !important;
-    box-shadow: none !important;
-}
-.message blockquote, [class*="message"] blockquote {
-    border: none !important;
-    border-left: none !important;
-    border-right: none !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    box-shadow: none !important;
-}
-.message h3, [class*="message"] h3 {
-    margin-top: 24px !important;
-    margin-bottom: 12px !important;
-    font-weight: 800 !important;
-}
-"""
 
 CHATBOT_DESCRIPTION = """
 <div class="prose">
@@ -904,14 +353,14 @@ blocks_kwargs = {}
 if gradio_major < 5:
     interface_kwargs["theme"] = theme_obj
     blocks_kwargs["theme"] = theme_obj
-    blocks_kwargs["css"] = custom_css
+    blocks_kwargs["css"] = CUSTOM_CSS
 elif gradio_major < 6:
     launch_kwargs["theme"] = theme_obj
     blocks_kwargs["theme"] = theme_obj
-    blocks_kwargs["css"] = custom_css
+    blocks_kwargs["css"] = CUSTOM_CSS
 else:
     launch_kwargs["theme"] = theme_obj
-    launch_kwargs["css"] = custom_css
+    launch_kwargs["css"] = CUSTOM_CSS
 
 # Blocks를 활용한 2컬럼 레이아웃 대시보드 개편
 with gr.Blocks(**blocks_kwargs) as demo:

src/retrieval/finRetrieval.py

@@ -12,6 +12,8 @@ app.py에서 import하여 Gradio 챗봇과 연동합니다.
 
 import logging
 import os
+from dataclasses import dataclass
+from typing import Any
 
 # Neo4j DBMS server warning (Deprecated vector queryNodes 등) 로깅 차단
 logging.getLogger("neo4j").setLevel(logging.ERROR)
@@ -31,6 +33,15 @@ from neo4j_graphrag.retrievers import (
 dotenv.load_dotenv()
 
 
+@dataclass
+class HybridResult:
+    """GraphRAG 또는 일반 지식 기반 통합 응답 결과"""
+
+    answer: str            # 최종 답변 문자열
+    mode: str              # "graph": 그래프 검색 기반 | "general": GPT-4o 일반 지식 기반
+    retriever_result: Any = None  # RetrieverResult (mode="graph"일 때만 유효)
+
+
 def get_neo4j_driver() -> neo4j.Driver:
     uri = os.getenv("NEO4J_URI", "neo4j://localhost:7687")
     client_id = os.getenv("NEO4J_CLIENT_ID")
@@ -136,7 +147,6 @@ CYPHER QUERY:
 # 3. ToolsRetriever + GraphRAG 조립
 # ──────────────────────────────────────────
 
-from typing import Any
 
 from neo4j_graphrag.retrievers.base import Retriever
 from neo4j_graphrag.types import RawSearchResult, RetrieverResult
@@ -230,17 +240,20 @@ _prompt_template = CustomRagTemplate(
 
 class LazyGraphRAG:
     """임포트 시점에 DB 연결을 방지하고 실제 호출될 때 GraphRAG 인스턴스를 초기화하는 지연 평가 프록시"""
+
     def __init__(self) -> None:
         self._graphrag: Any = None
+        self._hybrid_retriever: Any = None  # 품질 평가용 직접 접근 가능한 리트리버
+        self._rag_llm: Any = None           # 일반 지식 답변 생성용 LLM
 
     def _init_once(self) -> None:
         if self._graphrag is not None:
             return
             
         # OpenAI 클라이언트 및 임베더 지연 초기화 (CI 크래시 방지)
-        rag_llm = OpenAILLM(model_name="gpt-4o", model_params={"temperature": 0})
+        self._rag_llm = OpenAILLM(model_name="gpt-4o", model_params={"temperature": 0})
         embedder = OpenAIEmbeddings(model="text-embedding-3-small")
-            
+
         driver = get_neo4j_driver()
         
         vector_cypher_retriever = VectorCypherRetriever(
@@ -252,14 +265,14 @@ class LazyGraphRAG:
         
         text2cypher_retriever = Text2CypherRetriever(
             driver=driver,
-            llm=rag_llm,
+            llm=self._rag_llm,
             neo4j_schema=_get_schema(driver),
             examples=_examples,
         )
         
         tools_retriever = ToolsRetriever(
             driver=driver,
-            llm=rag_llm,
+            llm=self._rag_llm,
             tools=[
                 vector_cypher_retriever.convert_to_tool(
                     name="vector_retriever",
@@ -271,18 +284,134 @@ class LazyGraphRAG:
                 ),
             ],
         )
-        
-        hybrid_retriever = HybridFallbackRetriever(
+
+        self._hybrid_retriever = HybridFallbackRetriever(
             tools_retriever=tools_retriever,
             fallback_retriever=vector_cypher_retriever,
         )
-        
+
         self._graphrag = GraphRAG(
-            llm=rag_llm,
-            retriever=hybrid_retriever,
+            llm=self._rag_llm,
+            retriever=self._hybrid_retriever,
             prompt_template=_prompt_template,
         )
 
+    def _is_context_sufficient(self, query_text: str, history: list, retriever_result: Any) -> bool:
+        """검색된 컨텍스트가 질문 및 이전 대화 흐름에 실질적으로 도움이 되는 금융/기술 뉴스 데이터인지 GPT-4o로 판단"""
+        if retriever_result is None:
+            return False
+        if not hasattr(retriever_result, "items") or not retriever_result.items:
+            return False
+        total_content = " ".join(
+            getattr(item, "content", "") for item in retriever_result.items
+        ).strip()
+        if len(total_content) < 100:
+            return False
+
+        # GPT-4o 기반 지능적 자가 진단 (이전 대화 히스토리 및 질문의 맥락 결합 판정)
+        try:
+            assert self._rag_llm is not None
+            context_snippet = total_content[:800]
+
+            # 이전 대화 히스토리의 맥락 요약 추출 (최근 3개 메시지)
+            normalized_history = self._normalize_history(history)
+            history_summary = "없음"
+            if normalized_history:
+                history_summary = "\n".join(
+                    f"- {msg['role']}: {msg['content'][:150]}" 
+                    for msg in normalized_history[-3:]
+                )
+
+            routing_prompt = (
+                "당신은 금융/기술 트렌드 RAG 시스템의 지능형 라우터입니다.\n"
+                "사용자의 [현재 질문] 및 [최근 대화 히스토리]가 아래 제공된 [검색된 뉴스 데이터]와 의미적으로 밀접하게 연관되어 있고, "
+                "해당 데이터를 기반으로 질문에 실제 구체적이고 신뢰할 수 있는 답변을 제공할 수 있는지 평가하세요.\n\n"
+                "특히, 현재 질문이 '그거에 대해 좀 더 설명해줘'나 '자소서 팁을 더 다듬어줘'와 같은 후속 대화형 질문일 경우, "
+                "[최근 대화 히스토리]에 명시된 주요 금융/기술 트렌드 주제(예: 삼성전자 AI, 카카오 AI 등)가 "
+                "아래 뉴스 데이터의 핵심 내용과 일치하는지 종합적으로 고려해야 합니다.\n\n"
+                "만약 질문 및 대화 맥락이 아래 뉴스 데이터와 전혀 무관한 일반 상식, 일상적인 대화, 수학, 예술 등 "
+                "지식 그래프(뉴스 데이터베이스)에 없는 주제의 질문이라면 반드시 'NO'라고 답해야 합니다.\n"
+                "뉴스 팩트 데이터를 결합하여 올바른 답변을 작성할 수 있는 맥락이라면 'YES', 그렇지 않다면 'NO'라고만 답하세요.\n\n"
+                f"[최근 대화 히스토리]\n{history_summary}\n\n"
+                f"[현재 질문]\n{query_text}\n\n"
+                f"[검색된 뉴스 데이터]\n{context_snippet}\n\n"
+                "판정 (YES 또는 NO로만 답변):"
+            )
+            # 아주 빠르고 저렴한 단일 토큰 YES/NO 응답 생성
+            response = self._rag_llm.invoke(
+                input=routing_prompt,
+                model_params={"temperature": 0, "max_tokens": 5}
+            )
+            decision = str(response.content).strip().upper()
+            return "YES" in decision
+        except Exception:
+            # 예외 발생 시 안전을 위해 기존의 기본 길이 기반 판정으로 폴백
+            return len(total_content) >= 100
+
+    def _normalize_history(self, history: list) -> list:
+        """Gradio 히스토리(dict 또는 tuple 형식)를 LLM message_history 형식으로 정규화"""
+        normalized: list = []
+        for msg in history:
+            if isinstance(msg, dict) and "role" in msg and "content" in msg:
+                normalized.append({"role": msg["role"], "content": str(msg["content"])})
+            elif isinstance(msg, (list, tuple)) and len(msg) == 2:
+                if msg[0]:
+                    normalized.append({"role": "user", "content": str(msg[0])})
+                if msg[1]:
+                    normalized.append({"role": "assistant", "content": str(msg[1])})
+        return normalized
+
+    def _generate_general_answer(self, query_text: str, history: list) -> str:
+        """그래프 검색 결과 없이 GPT-4o 일반 지식으로 답변 생성 (대화 히스토리 반영)"""
+        assert self._rag_llm is not None
+        system_prompt = (
+            "당신은 AI 및 핀테크 기술 트렌드 전문가이자, 취업 준비생의 역량 분석을 돕는 전략 컨설턴트입니다.\n"
+            "현재 FinGraph 지식 그래프(Neo4j GraphRAG)에서 관련 뉴스 기사를 찾지 못했습니다.\n"
+            "이전 대화 맥락을 충분히 반영하고, GPT-4o의 일반 학습 데이터에 기반하여 최선을 다해 전문적으로 답변해 주세요.\n\n"
+            "[중요 지침]\n"
+            "- 실제 존재하지 않는 뉴스 링크, 날짜, 가짜 URL을 절대 생성하지 마세요.\n"
+            "- 가능하다면 취업 준비생이 면접/자소서에 활용할 수 있는 실질적인 인사이트를 포함해 주세요.\n"
+            "- 답변이 일반 AI 학습 데이터 기반임을 숨기지 말고 자연스럽게 언급하며 시작하세요."
+        )
+        normalized_history = self._normalize_history(history)
+        response = self._rag_llm.invoke(
+            input=query_text,
+            message_history=normalized_history,
+            system_instruction=system_prompt,
+        )
+        return str(response.content)
+
+    def search_with_fallback(self, query_text: str, history: list) -> HybridResult:
+        """GraphRAG 검색 -> 컨텍스트 품질 평가 -> 일반 지식 Fallback 통합 메서드.
+
+        Args:
+            query_text: 사용자 질문 텍스트
+            history:    이전 대화 히스토리 (Gradio 형식)
+
+        Returns:
+            HybridResult: 답변, 모드("graph"|"general"), RetrieverResult
+        """
+        self._init_once()
+        assert self._hybrid_retriever is not None
+        assert self._graphrag is not None
+
+        # 1단계: LLM 호출 없이 DB 쿼리만으로 검색 실행
+        retriever_result = self._hybrid_retriever.search(query_text=query_text)
+
+        # 2단계: 컨텍스트 품질 평가 후 라우팅
+        if self._is_context_sufficient(query_text, history, retriever_result):
+            # 3a. 그래프 기반 -> GraphRAG 브리핑 답변 생성
+            rag_result = self._graphrag.search(query_text=query_text)
+            return HybridResult(
+                answer=rag_result.answer,
+                mode="graph",
+                retriever_result=rag_result.retriever_result,
+            )
+        else:
+            # 3b. 일반 지식 기반 -> 히���토리 포함 GPT-4o 직접 호출
+            answer = self._generate_general_answer(query_text, history)
+            return HybridResult(answer=answer, mode="general", retriever_result=None)
+
     def search(self, *args: Any, **kwargs: Any) -> Any:
         self._init_once()
         assert self._graphrag is not None

src/utils/ui_templates.py

@@ -324,6 +324,12 @@ label.svelte-1ipelgc, span.svelte-1ipelgc {
     display: none !important;
 }
 
+/* ── 메시지 버블 기본 크기 축소 (사용자/봇 공통 세로 높이 최적화) ── */
+.message {
+    padding: 10px 14px !important;
+    min-height: auto !important;
+}
+
 /* ── 사용자 버블 ── */
 .message.user {
     background: rgba(30,58,95,0.06) !important;
@@ -349,26 +355,32 @@ label.svelte-1ipelgc, span.svelte-1ipelgc {
     background: transparent !important;
 }
 
-/* ── 메시지 내부 보더 완전 제거 ── */
+/* ── 메시지 내부 여백 완전 제어 ── */
 .message p, .message li,
 [class*="message"] p, [class*="message"] li {
-    line-height: 1.68 !important;
-    margin-bottom: 12px !important;
+    line-height: 1.55 !important;
+    margin: 0 !important;
+    margin-bottom: 6px !important;
+    padding: 0 !important;
     border: none !important;
     border-left: none !important;
     box-shadow: none !important;
     background: transparent !important;
     color: #1e3a5f !important;
 }
+.message p:last-child, .message li:last-child {
+    margin-bottom: 0 !important;
+}
 .message blockquote, [class*="message"] blockquote {
     border: none !important;
     border-left: none !important;
     padding: 0 !important;
+    margin: 0 !important;
     background: transparent !important;
 }
 .message h3, [class*="message"] h3 {
-    margin-top: 18px !important;
-    margin-bottom: 8px !important;
+    margin-top: 14px !important;
+    margin-bottom: 6px !important;
     font-weight: 800 !important;
     color: #1e3a5f !important;
 }

tests/test_retrieval.py

@@ -41,3 +41,30 @@ def test_portfolio_showcase_aggregation_query():
     assert any(indicator in answer for indicator in ["1.", "첫째", "TOP", "기사", "출처"])
     
     print(f"\n✨ [포트폴리오 쇼케이스 RAG 결과]\n{answer}")
+
+
+@pytest.mark.skipif(
+    not has_credentials, 
+    reason="OpenAI API Key 또는 Neo4j 연결 환경변수가 없으므로 통합 테스트를 건너뜁니다."
+)
+def test_hybrid_fallback_general_query():
+    """
+    [하이브리드 RAG Fallback 시나리오]
+    지식 그래프(뉴스 데이터)에 전혀 수집되지 않은 일반 과학/역사 질문에 대해 
+    검색 결과가 임계치 미만임을 감지하고 자동으로 GPT-4o 일반 지식 모드(general)로 라우팅하는지 검증합니다.
+    """
+    general_query = "피타고라스 정리와 그 실생활 활용 예시를 간단히 설명해줘."
+    
+    # search_with_fallback을 통한 라우팅 검색 수행
+    result = graphrag.search_with_fallback(query_text=general_query, history=[])
+    
+    # 1. 반환 타입 및 모드 검증
+    assert result is not None
+    assert result.mode == "general"
+    
+    # 2. GPT-4o 일반 지식 답변 유효성 검증
+    assert len(result.answer.strip()) > 0
+    assert "피타고라스" in result.answer
+    
+    print(f"\n✨ [일반 지식 Fallback 라우팅 결과]\n{result.answer}")
+