refactor: gradio codes

AGENTS.md

@@ -121,6 +121,13 @@ def test_4_core_scenarios():
 - [x] **3. 커스텀 CSS 및 버튼 고대비화**: 흰색 배경에서 버튼이 완벽하게 보이도록 고대비 Indigo/Blue 색상 및 프리미엄 스타일 지정
 - [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`를 통한 실제 렌더링 무결성 스크린샷 검증
+
+
 
 ## 배포 및 자동화 파이프라인 (Pipeline Automation)
 - [x] **매일 새벽 1시(KST) 최신화 파이프라인 구축**: 크롤링(`finScrapping.py`) ➡️ 지식 그래프 적재(`finGraph.py`)로 이어지는 엔드투엔드(End-to-End) 자동화.
@@ -147,3 +154,10 @@ def test_4_core_scenarios():
     3. `finRetrieval.py` 내의 `Text2Cypher` 예제들과 RAG 시스템 프롬프트를 전면 개편하여 구조적 Cypher 검색 시에도 실제 기사의 제목 및 URL([출처 링크])을 자동 매핑하여 답변하도록 출처 신뢰성을 대폭 강화.
   - **검증**: `ruff`, `mypy` 린트와 타입 검사를 무결점 통과하였고, 4대 골드 시나리오를 검증하는 `smoke_test_rag.py`에서 **4/4 시나리오 전원 초고속 완전 합격(PASS)**하여 최고의 완성도를 입증함.
 
+- [x] **메인 진입점(app.py) 프레젠테이션 자원 모듈화 및 클린 코드 개편**:
+  - **현상**: 450줄이 넘는 방대한 정적 CSS 스타일시트와 HTML 문자열 템플릿(GNB, 2x3 상태 대시보드 템플릿 등)이 메인 진입점인 `app.py` 내에 인라인으로 섞여 있어, 개발 유지 보수 효율성과 코드 가독성이 현저히 저해되는 문제 확인.
+  - **조치**:
+    1. 모든 정적/동적 프레젠테이션 요소(`CUSTOM_CSS`, `GNB_HTML`, `build_stats_html`)를 신규 유틸리티 모듈인 `src/utils/ui_templates.py`로 완벽하게 이전하여 코드를 물리적으로 완전 분리.
+    2. `app.py`에서는 간단히 `from src.utils.ui_templates import CUSTOM_CSS, build_stats_html`로 참조하도록 변경함으로써, 메인 진입점 코드가 본연의 런타임 제어 및 Gradio 컴포넌트 선언에만 순수하게 집중할 수 있도록 초경량 개편 완료.
+  - **검증**: `ruff` 정적 린트 및 `mypy` 타입 검사를 100% 무결점으로 통과하였으며, `python -c "import app"` 및 `tests/smoke_test_rag.py` 하이브리드 RAG 테스트도 전원 완벽하게 합격(PASS)함.
+

app.py

@@ -248,6 +248,15 @@ def get_db_stats() -> Dict[str, Any]:
                 "RETURN t.name as name, COALESCE(t.description, 'AI 혁신 기술 인프라') as desc LIMIT 8"
             )
             stats["techs_list"] = [{"name": r["name"], "desc": r["desc"]} for r in res_tech_list]
+            
+            # 2.5 최신 주목 기업 리스트 (상위 5개)
+            res_comp_list = session.run(
+                "MATCH (c:AICompany) "
+                "OPTIONAL MATCH (a:Article)-[:MENTIONS]->(c) "
+                "RETURN c.name as name, count(a) as cnt "
+                "ORDER BY cnt DESC LIMIT 5"
+            )
+            stats["companies_list"] = [{"name": r["name"]} for r in res_comp_list]
 
             # 3. 최근 기사 목록 조회 (최근 4개)
             res_art_list = session.run(
@@ -275,6 +284,15 @@ def build_stats_html(stats: Dict[str, Any]) -> str:
     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", []):
@@ -293,7 +311,7 @@ def build_stats_html(stats: Dict[str, Any]) -> str:
     if not news_list_html:
         news_list_html = '<div style="font-size:12px; color:#94a3b8;">최근 수집된 기사가 없습니다.</div>'
 
-    node_count = stats['companies'] + stats['technologies']
+    # node_count = stats['companies'] + stats['technologies']
 
     html: str = f"""
     <div class="dashboard-container">
@@ -305,7 +323,7 @@ def build_stats_html(stats: Dict[str, Any]) -> str:
         </div>
         <p style="font-size: 11px; color: #475569; margin-top: -2px; margin-bottom: 12px; font-weight: 600;">GraphRAG 실시간 분석 엔진 상태</p>
         
-        <!-- 실시간 엔진 텔레메트리 (4개 메트릭) -->
+        <!-- 실시간 엔진 텔레메트리 (4개 메트릭 통폐합) -->
         <div class="stats-grid">
             <div class="stat-card">
                 <div class="stat-lbl">💡 분석 모델</div>
@@ -320,34 +338,21 @@ def build_stats_html(stats: Dict[str, Any]) -> str:
                 <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">🔐 DB 연결</div>
-                <div class="stat-val" style="font-size: 12px !important; font-weight: 800 !important; color: #0d9488; margin-top: 3px;"><span style="background: rgba(13, 148, 136, 0.12); padding: 2px 6px; border-radius: 5px; display: inline-block;">Active</span></div>
-            </div>
-        </div>
-
-        <!-- 수집된 데이터 규모 -->
-        <div class="stats-grid" style="margin-top: 10px; margin-bottom: 8px;">
-            <div class="stat-card" style="padding: 8px 10px;">
                 <div class="stat-lbl">📰 분석용 뉴스 기사</div>
-                <div class="stat-val" style="color: #334155;">{stats['articles']}건</div>
-            </div>
-            <div class="stat-card" style="padding: 8px 10px;">
-                <div class="stat-lbl">🧬 추출된 지식 연결망</div>
-                <div class="stat-val" style="color: #334155;">{node_count}개</div>
+                <div class="stat-val" style="font-size: 13px !important; font-weight: 800 !important; color: #334155;">{stats['articles']}건</div>
             </div>
         </div>
-
-        <!-- 데이터 배경 정보 설명 패널 (사용자 이해를 돕는 배경 정보 친절 서술) -->
-        <div style="font-size: 11px; color: #475569; line-height: 1.5; margin-top: 8px; margin-bottom: 15px; padding: 10px; background: rgba(241, 245, 249, 0.7); border: 1px solid #cbd5e1; border-radius: 8px;">
-            ℹ️ <b>데이터 수집 배경 정보</b><br>
-            실시간 뉴스 웹 크롤러가 국내 IT/금융 기사 <b>{stats['articles']}건</b>을 정밀 수집하였으며, 뉴스 본문을 분석하여 기사 속 주요 기업·핵심 기술·서비스 간의 입체적 연관 관계 <b>{node_count}개</b>를 연결망(지식 그래프)으로 완벽하게 연동하였습니다.
-        </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">
@@ -581,25 +586,59 @@ body {
     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-top: 15px !important;
-    margin-bottom: 15px !important;
-    background: transparent !important;
-    border: none !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: left !important;
+    text-align: center !important; /* 사용자 요청: 가운데 정렬 */
     padding: 14px 18px !important;
-    background: #ffffff !important; /* 깨끗하고 단정한 화이트 */
-    border: 1px solid #cbd5e1 !important; /* 소프트한 슬레이트 테두리 */
+    background: #e0f2fe !important; /* 사용자 요청: 연한 하늘색(파랑) 배경 */
+    border: 1px solid #bae6fd !important; 
     border-radius: 10px !important;
     font-size: 13px !important;
     font-weight: 600 !important;
-    color: #0f172a !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;
@@ -607,6 +646,9 @@ body {
     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;
@@ -615,9 +657,9 @@ body {
 }
 [class*="examples"] button:hover {
     transform: translateY(-1px) !important;
-    background: #f8fafc !important; /* 아주 옅은 오프화이트 호버 */
-    border-color: #94a3b8 !important;
-    color: #0f172a !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 {
@@ -724,15 +766,14 @@ button.variant-secondary:hover,
 }
 
 /* Chatbot 라벨/탭 완전 숨김 (불필요한 보라색/하늘색 색상 및 테두리 원천 차단) */
-.chatbot > div:first-child,
-[class*="chatbot"] > div:first-child,
+/* 주의: .chatbot > div:first-child 는 웰컴카드를 지워버릴 수 있으므로 삭제! */
 .chatbot-label,
 div[class*="chatbot"] .label,
 [data-testid="chatbot"] .label,
 .chatbot-header,
-div[class*="chatbot"] > div:first-child span,
 .gr-panel-title,
-.gr-chatbot-label {
+.gr-chatbot-label,
+.label-wrap {
     display: none !important;
 }
 
@@ -751,11 +792,11 @@ div[class*="chatbot"] > div:first-child span,
 textarea, 
 [class*="input-container"] textarea,
 [data-testid="textbox"] textarea {
-    height: 58px !important;
-    min-height: 58px !important;
-    max-height: 58px !important;
+    height: 48px !important;
+    min-height: 48px !important;
+    max-height: 48px !important;
     font-size: 13px !important;
-    padding: 18px 16px !important; /* 위아래 패딩을 18px로 대칭 조절하여 텍스트가 수직 정중앙에 완벽하게 배치 */
+    padding: 13px 16px !important; /* 위아래 패딩을 줄여서 높이에 맞게 조절 */
     line-height: 1.5 !important;
     border-radius: 8px !important;
     border: 1px solid #cbd5e1 !important;
@@ -782,7 +823,7 @@ button[class*="submit-btn"],
     margin-left: 12px !important;
     border-radius: 8px !important;
     min-width: 95px !important;
-    height: 58px !important; /* 입력창의 height(58px)와 100% 동일하게 일치시켜 완벽한 대칭 구조 달성 */
+    height: 48px !important; /* 입력창의 height(48px)와 100% 동일하게 일치 */
     padding: 0 16px !important;
     display: flex !important;
     align-items: center !important;
@@ -822,9 +863,21 @@ div:has(> [data-testid="submit-button"]),
 }
 """
 
+CHATBOT_DESCRIPTION = """
+<div class="prose">
+<h3>🌌 국내 AI 뉴스 기사를 기반으로 구축된 지식 그래프(GraphRAG)에 질문하세요.</h3>
+<ul>
+<li>📰 <b>기업별 AI 트렌드</b> — 삼성, 카카오, 네이버 등 주요 기업의 최신 AI 동향</li>
+<li>🔬 <b>기술 키워드 분석</b> — LLM, 생성형 AI, 파운데이션 모델 등 핵심 기술 정리</li>
+<li>🔗 <b>실제 뉴스 출처 제공</b> — 답변마다 근거 기사 링크 포함</li>
+</ul>
+<p>👇 아래 예시 질문 버튼을 클릭하거나 직접 입력해 보세요.</p>
+</div>
+"""
+
 interface_kwargs = {
     "fn": chat,
-    "chatbot": gr.Chatbot(height=500),
+    "chatbot": gr.Chatbot(height=700, placeholder=CHATBOT_DESCRIPTION),
     "textbox": gr.Textbox(
         placeholder="분석하고 싶은 내용을 자연어로 입력해주세요...",
         container=False,

fix_css.py

@@ -0,0 +1,187 @@
+import sys
+
+with open('app.py', 'r', encoding='utf-8') as f:
+    content = f.read()
+
+start_marker = 'FINAL_CSS = CUSTOM_CSS + """'
+end_marker = '"""\n\nlaunch_kwargs = {'
+
+start_idx = content.find(start_marker)
+end_idx = content.find(end_marker)
+
+if start_idx != -1 and end_idx != -1:
+    before = content[:start_idx + len(start_marker)]
+    after = content[end_idx:]
+    
+    new_css = '''
+/* ── 전체 화면 너비 대폭 확대 ── */
+.gradio-container {
+    max-width: 1400px !important;
+    width: 95% !important;
+    margin: 0 auto !important;
+}
+
+/* ── 챗봇 컨테이너 짤림 원천 봉쇄 ── */
+div[data-testid="chatbot"], .chatbot-container, .chatbot {
+    border: none !important;
+    overflow: visible !important; 
+}
+
+/* ── 챗봇 내부 Placeholder(소개글 영역) 위쪽 짤림 영구 방어 ── */
+.placeholder, [class*="placeholder"] {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    justify-content: flex-start !important; /* 위쪽 짤림 방지 */
+    padding-top: 5% !important; /* 위에서 살짝 내림 */
+    height: 50% !important; 
+    flex-grow: 0 !important; 
+    overflow: visible !important; 
+    margin: 0 auto !important;
+}
+
+/* ── 소개글(Prose) 쿨톤 회색 웰컴 카드 ── */
+.placeholder .prose {
+    background: #f8fafc !important; /* 대시보드 카드와 동일한 색상 */
+    border: 1px solid #e2e8f0 !important;
+    border-radius: 12px !important;
+    padding: 16px 24px !important; /* 높이 세이브 */
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
+    max-width: 700px !important;
+    margin: 0 auto 12px auto !important;
+    display: block !important;
+    height: auto !important;
+}
+.placeholder h3, [class*="placeholder"] h3 {
+    color: #334155 !important; 
+    font-weight: 800 !important;
+    margin-top: 0 !important;
+    margin-bottom: 12px !important;
+}
+.placeholder .prose ul {
+    list-style-type: none !important;
+    padding-left: 0 !important;
+    margin-bottom: 12px !important;
+}
+.placeholder .prose li {
+    margin-bottom: 4px !important; 
+    color: #475569 !important;
+    font-size: 14px !important;
+    line-height: 1.5 !important;
+}
+.placeholder .prose p:last-child {
+    font-weight: 700 !important;
+    color: #4c1d95 !important; 
+    background: #f3e8ff !important; 
+    padding: 8px 16px !important;
+    border-radius: 8px !important;
+    display: inline-block !important;
+    margin-bottom: 0 !important;
+}
+
+/* ── 예시 질문 컨테이너 (그리드 배치) ── */
+[class*="examples"], .gr-samples-wrapper, .examples-container {
+    display: grid !important;
+    grid-template-columns: repeat(2, 1fr) !important;
+    gap: 12px !important;
+    width: 100% !important;
+    max-width: 900px !important; /* 잘림 방지 */
+    margin: 0 auto 40px auto !important;
+    background: transparent !important;
+    border: none !important;
+}
+
+/* 개별 버튼 디자인 (연보라색 테마 & 강력한 중앙 정렬) */
+.examples-container button, div[data-testid="chatbot"] button.example, button.example, .example-btn {
+    border-radius: 8px !important;
+    padding: 16px !important;
+    text-align: center !important; /* 텍스트 가운데 정렬 */
+    font-size: 14px !important;
+    font-weight: 600 !important;
+    color: #4c1d95 !important; 
+    background: #f5f3ff !important; /* 진짜 연보라색 배경 */
+    background-color: #f5f3ff !important; /* 덮어쓰기 철벽 방어 */
+    border: 1px solid #e9d5ff !important; 
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
+    transition: all 0.2s ease-in-out !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important; /* 완벽 중앙 배치 */
+    min-height: 80px !important; 
+    width: 100% !important;
+    white-space: normal !important; /* 두줄 허용하되 900px 덕분에 보통 한 줄로 나옴 */
+}
+
+.examples-container button:hover, div[data-testid="chatbot"] button.example:hover, button.example:hover, .example-btn:hover {
+    border-color: #a855f7 !important; 
+    background: #f3e8ff !important; 
+    background-color: #f3e8ff !important; 
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08) !important;
+    color: #7c3aed !important;
+}
+
+/* ── 메시지 말풍선 정리 ── */
+.message.user, [data-testid="user"] .message {
+    background-color: #111827 !important;
+    border-radius: 12px 12px 0 12px !important;
+    padding: 7px 13px !important; 
+    margin: 2px 0 !important; 
+    border: none !important;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
+    min-height: unset !important; 
+}
+[data-testid="user"] > div, .bubble-wrap [data-testid="user"], .message-wrap.user > div, .message-row.user {
+    background: transparent !important;
+    background-color: transparent !important;
+    border: none !important;
+}
+[data-testid="user"] .message *, .message.user * {
+    color: #ffffff !important;
+    line-height: 1.4 !important; 
+    margin: 0 !important; 
+}
+[data-testid="bot"] .message, [data-testid="bot"] > div, .message-wrap.bot > div, .message.bot, .message-row.bot .message {
+    background-color: #ffffff !important;
+    color: #1f2937 !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 12px 12px 12px 0 !important;
+    padding: 16px 20px !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
+}
+
+/* ── 피드백 및 전송 버튼 ── */
+.message-buttons, button[aria-label="Good response"], button[aria-label="Bad response"], .like-dislike-area { display: none !important; }
+button[class*="submit-btn"], #submit-btn, button[id*="submit"], button.submit-button {
+    background: linear-gradient(135deg, #1e3a5f 0%, #7c3aed 100%) !important;
+    color: white !important;
+    border-radius: 8px !important;
+    font-weight: bold !important;
+    border: none !important;
+    display: block !important;
+    opacity: 1 !important;
+    visibility: visible !important;
+}
+
+/* ── 메인 레이아웃 사이드바 균형 최적화 ── */
+.sidebar-container {
+    border: 1px solid #e2e8f0 !important;
+    border-radius: 12px !important;
+    padding: 24px 20px !important;
+    background: #ffffff !important;
+    height: 700px !important; 
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04) !important;
+    display: flex !important;
+    flex-direction: column !important;
+}
+.news-feed-container {
+    flex-grow: 1 !important;
+    max-height: 250px !important;
+    overflow-y: auto !important;
+}
+'''
+    with open('app.py', 'w', encoding='utf-8') as f:
+        f.write(before + '\n' + new_css + '\n' + after)
+    print('CSS Update Success')
+else:
+    print('Markers not found')

fix_css2.py

@@ -0,0 +1,245 @@
+import sys
+
+with open('app.py', 'r', encoding='utf-8') as f:
+    lines = f.readlines()
+
+# 157번째 라인부터 문제가 생김 (res_comp = session.run(...))
+# 156번째 라인은 '# 상위 5개 회사 키워드 리스트업 추가' 임
+cut_idx = -1
+for i, line in enumerate(lines):
+    if '# 상위 5개 회사 키워드 리스트업 추가' in line:
+        cut_idx = i
+        break
+
+if cut_idx == -1:
+    print("Cannot find cut index!")
+    sys.exit(1)
+
+# 그 아래로 launch_kwargs = { 가 있는 라인을 찾음
+end_idx = -1
+for i in range(cut_idx, len(lines)):
+    if 'launch_kwargs = {' in line or 'launch_kwargs =' in lines[i]:
+        end_idx = i
+        break
+
+if end_idx == -1:
+    print("Cannot find end index!")
+    sys.exit(1)
+
+before_lines = lines[:cut_idx + 1]
+after_lines = lines[end_idx:]
+
+correct_middle = '''            res_comp = session.run(
+                "MATCH (c:AICompany) "
+                "OPTIONAL MATCH (a:Article)-[:MENTIONS]->(c) "
+                "RETURN c.name as name, count(a) as cnt "
+                "ORDER BY cnt DESC LIMIT 5"
+            )
+            stats["companies_list"] = [{"name": row["name"]} for row in res_comp]
+
+            res_art = session.run(
+                "MATCH (a:Article) "
+                "RETURN a.title as title, a.published_date as date, a.url as url "
+                "ORDER BY a.published_date DESC LIMIT 4"
+            )
+            stats["recent_articles"] = [
+                {"title": r["title"], "date": r["date"], "url": r["url"]}
+                for r in res_art
+            ]
+    except Exception as e:
+        print(f"⚠️ [통계 조회 실패] {e}")
+    return stats
+
+
+# ──────────────────────────────────────────
+# 5. Gradio UI 구성
+# ──────────────────────────────────────────
+
+theme_obj = gr.themes.Soft(primary_hue="indigo", secondary_hue="slate")
+
+CHATBOT_DESCRIPTION = """
+### 🌌 국내 AI 뉴스 기사를 기반으로 구축된 지식 그래프(GraphRAG)에 질문하세요.
+
+- 📰 **기업별 AI 트렌드** — 삼성, 카카오, 네이버 등 주요 기업의 최신 AI 동향
+- 🔬 **기술 키워드 분석** — LLM, 생성형 AI, 파운데이션 모델 등 핵심 기술 정리
+- 🔗 **실제 뉴스 출처 제공** — 답변마다 근거 기사 링크 포함
+
+👇 **아래 예시 질문 버튼을 클릭하거나 직접 입력해 보세요.**
+"""
+
+FINAL_CSS = CUSTOM_CSS + """
+/* ── 전체 화면 너비 대폭 확대 ── */
+.gradio-container {
+    max-width: 1400px !important;
+    width: 95% !important;
+    margin: 0 auto !important;
+}
+
+/* ── 챗봇 컨테이너 테두리 및 짤림(Overflow) 방지 ── */
+div[data-testid="chatbot"], .chatbot-container, .chatbot {
+    border: none !important;
+    overflow: visible !important; 
+}
+
+/* ── 챗봇 내부 Placeholder(소개글 영역) 위쪽 짤림 영구 방어 ── */
+.placeholder, [class*="placeholder"] {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    justify-content: flex-start !important; /* 위쪽 짤림 방지 */
+    padding-top: 5% !important; /* 위에서 살짝 내림 */
+    height: 50% !important; 
+    flex-grow: 0 !important; 
+    overflow: visible !important; 
+    margin: 0 auto !important;
+}
+
+/* ── 소개글(Prose) 아이보리/쿨톤 회색 웰컴 카드 ── */
+.placeholder .prose {
+    background: #f8fafc !important; /* 대시보드 카드와 동일한 색상 */
+    border: 1px solid #e2e8f0 !important;
+    border-radius: 12px !important;
+    padding: 16px 24px !important; /* 높이 세이브 */
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
+    max-width: 700px !important;
+    margin: 0 auto 12px auto !important;
+    display: block !important;
+    height: auto !important;
+}
+.placeholder h3, [class*="placeholder"] h3 {
+    color: #334155 !important; 
+    font-weight: 800 !important;
+    margin-top: 0 !important;
+    margin-bottom: 12px !important;
+}
+.placeholder .prose ul {
+    list-style-type: none !important;
+    padding-left: 0 !important;
+    margin-bottom: 12px !important;
+}
+.placeholder .prose li {
+    margin-bottom: 4px !important; 
+    color: #475569 !important;
+    font-size: 14px !important;
+    line-height: 1.5 !important;
+}
+.placeholder .prose p:last-child {
+    font-weight: 700 !important;
+    color: #4c1d95 !important; 
+    background: #f3e8ff !important; 
+    padding: 8px 16px !important;
+    border-radius: 8px !important;
+    display: inline-block !important;
+    margin-bottom: 0 !important;
+}
+
+/* ── 예시 질문 컨테이너 (그리드 배치) ── */
+[class*="examples"], .gr-samples-wrapper, .examples-container {
+    display: grid !important;
+    grid-template-columns: repeat(2, 1fr) !important;
+    gap: 12px !important;
+    width: 100% !important;
+    max-width: 900px !important; /* 잘림 방지 */
+    margin: 0 auto 40px auto !important;
+    background: transparent !important;
+    border: none !important;
+}
+
+/* 개별 버튼 디자인 (연보라색 테마 & 강력한 중앙 정렬) */
+.examples-container button, div[data-testid="chatbot"] button.example, button.example, .example-btn {
+    border-radius: 8px !important;
+    padding: 16px !important;
+    text-align: center !important; /* 텍스트 가운데 정렬 */
+    font-size: 14px !important;
+    font-weight: 600 !important;
+    color: #4c1d95 !important; 
+    background: #f5f3ff !important; /* 진짜 연보라색 배경 */
+    background-color: #f5f3ff !important; /* 덮어쓰기 철벽 방어 */
+    border: 1px solid #e9d5ff !important; 
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
+    transition: all 0.2s ease-in-out !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important; /* 완벽 중앙 배치 */
+    min-height: 80px !important; 
+    width: 100% !important;
+    white-space: normal !important; /* 두줄 허용하되 900px 덕분에 보통 한 줄로 나옴 */
+}
+
+.examples-container button:hover, div[data-testid="chatbot"] button.example:hover, button.example:hover, .example-btn:hover {
+    border-color: #a855f7 !important; 
+    background: #f3e8ff !important; 
+    background-color: #f3e8ff !important; 
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08) !important;
+    color: #7c3aed !important;
+}
+
+/* ── 메시지 말풍선 정리 ── */
+.message.user, [data-testid="user"] .message {
+    background-color: #111827 !important;
+    border-radius: 12px 12px 0 12px !important;
+    padding: 7px 13px !important; 
+    margin: 2px 0 !important; 
+    border: none !important;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
+    min-height: unset !important; 
+}
+[data-testid="user"] > div, .bubble-wrap [data-testid="user"], .message-wrap.user > div, .message-row.user {
+    background: transparent !important;
+    background-color: transparent !important;
+    border: none !important;
+}
+[data-testid="user"] .message *, .message.user * {
+    color: #ffffff !important;
+    line-height: 1.4 !important; 
+    margin: 0 !important; 
+}
+[data-testid="bot"] .message, [data-testid="bot"] > div, .message-wrap.bot > div, .message.bot, .message-row.bot .message {
+    background-color: #ffffff !important;
+    color: #1f2937 !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 12px 12px 12px 0 !important;
+    padding: 16px 20px !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
+}
+
+/* ── 피드백 및 전송 버튼 ── */
+.message-buttons, button[aria-label="Good response"], button[aria-label="Bad response"], .like-dislike-area { display: none !important; }
+button[class*="submit-btn"], #submit-btn, button[id*="submit"], button.submit-button {
+    background: linear-gradient(135deg, #1e3a5f 0%, #7c3aed 100%) !important;
+    color: white !important;
+    border-radius: 8px !important;
+    font-weight: bold !important;
+    border: none !important;
+    display: block !important;
+    opacity: 1 !important;
+    visibility: visible !important;
+}
+
+/* ── 메인 레이아웃 사이드바 균형 최적화 ── */
+.sidebar-container {
+    border: 1px solid #e2e8f0 !important;
+    border-radius: 12px !important;
+    padding: 24px 20px !important;
+    background: #ffffff !important;
+    height: 700px !important; 
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04) !important;
+    display: flex !important;
+    flex-direction: column !important;
+}
+.news-feed-container {
+    flex-grow: 1 !important;
+    max-height: 250px !important;
+    overflow-y: auto !important;
+}
+"""
+
+'''
+
+final_content = "".join(before_lines) + "\n" + correct_middle + "\n" + "".join(after_lines)
+
+with open('app.py', 'w', encoding='utf-8') as f:
+    f.write(final_content)
+
+print("APP.PY PERFECTLY RECOVERED AND UPDATED!")

fix_css3.py

@@ -0,0 +1,203 @@
+import sys
+
+with open('app.py', 'r', encoding='utf-8') as f:
+    lines = f.readlines()
+
+start_idx = -1
+for i, line in enumerate(lines):
+    if 'FINAL_CSS = CUSTOM_CSS + """' in line:
+        start_idx = i
+        break
+
+if start_idx == -1:
+    print('Cannot find FINAL_CSS')
+    sys.exit(1)
+
+clean_css = '''FINAL_CSS = CUSTOM_CSS + """
+/* ── 전체 화면 너비 확대 ── */
+.gradio-container {
+    max-width: 1400px !important;
+    width: 95% !important;
+    margin: 0 auto !important;
+}
+
+/* ── 챗봇 컨테이너 테두리 제거 ── */
+div[data-testid="chatbot"], .chatbot-container, .chatbot {
+    border: none !important;
+    overflow: visible !important; 
+}
+
+/* ── 챗봇 내부 Placeholder(소개글 영역) 상단 짤림 영구 차단 ── */
+.placeholder, [class*="placeholder"] {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    justify-content: flex-start !important; /* 항상 위에서부터 뿌림 */
+    padding-top: 40px !important; /* 상단 여백 넉넉히 주어 짤림 절대 불가 */
+    height: 100% !important; /* 전체 높이 사용 */
+    min-height: 400px !important;
+    flex-grow: 1 !important; 
+    overflow: visible !important; 
+    margin: 0 auto !important;
+}
+
+/* ── 소개글(Prose) 웰컴 보드 (위쪽 절반) ── */
+.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; /* 800px 고정너비 */
+    width: 100% !important;
+    margin: 0 auto !important; 
+    display: block !important;
+    position: relative !important;
+    z-index: 2 !important; /* 아래쪽 컨테이너 위로 살짝 덮게 함 */
+}
+.placeholder h3, [class*="placeholder"] h3 {
+    color: #334155 !important; 
+    font-weight: 800 !important;
+    margin-top: 0 !important;
+    margin-bottom: 12px !important;
+}
+.placeholder .prose ul {
+    list-style-type: none !important;
+    padding-left: 0 !important;
+    margin-bottom: 12px !important;
+}
+.placeholder .prose li {
+    margin-bottom: 4px !important; 
+    color: #475569 !important;
+    font-size: 14px !important;
+    line-height: 1.5 !important;
+}
+.placeholder .prose p:last-child {
+    font-weight: 700 !important;
+    color: #4c1d95 !important; 
+    background: #f3e8ff !important; 
+    padding: 8px 16px !important;
+    border-radius: 8px !important;
+    display: inline-block !important;
+    margin-bottom: 0 !important;
+}
+
+/* ── 예시 질문 컨테이너 (아래쪽 절반: 보드 병합 완료) ── */
+[class*="examples"], .gr-samples-wrapper, .examples-container {
+    display: grid !important;
+    grid-template-columns: repeat(2, 1fr) !important;
+    gap: 12px !important;
+    width: 100% !important;
+    max-width: 800px !important; /* 소개글과 800px 너비 일치 */
+    
+    /* 🌟 핵심: 위쪽 보드와 완벽 결합을 위한 마이너스 마진 🌟 */
+    margin: -32px auto 40px auto !important; /* 32px 갭 제거 (Gradio 기본 갭) */
+    
+    background: #f8fafc !important; /* 소개글과 동일한 회색 배경 */
+    border: 1px solid #e2e8f0 !important;
+    border-top: none !important; /* 위쪽 경계선 제거 */
+    border-radius: 0 0 12px 12px !important; /* 위쪽 모서리 직각으로 펴서 결합 완료 */
+    padding: 10px 24px 24px 24px !important; 
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important; 
+    position: relative !important;
+    z-index: 1 !important; /* 위쪽 컨테이너 밑으로 겹치게 하여 흰줄 완전 소멸 */
+}
+
+/* 개별 버튼 디자인 (연보라색 테마 & 강력한 중앙 정렬) */
+.examples-container button, div[data-testid="chatbot"] button.example, button.example, .example-btn {
+    border-radius: 8px !important;
+    padding: 16px !important;
+    text-align: center !important; /* 텍스트 가운데 정렬 */
+    font-size: 14px !important;
+    font-weight: 600 !important;
+    color: #4c1d95 !important; 
+    background: #f5f3ff !important; /* 진짜 연보라색 배경 */
+    background-color: #f5f3ff !important; /* 덮어쓰기 철벽 방어 */
+    border: 1px solid #e9d5ff !important; 
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
+    transition: all 0.2s ease-in-out !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important; /* 완벽 중앙 배치 */
+    min-height: 80px !important; 
+    width: 100% !important;
+    white-space: normal !important; 
+}
+
+.examples-container button:hover, div[data-testid="chatbot"] button.example:hover, button.example:hover, .example-btn:hover {
+    border-color: #a855f7 !important; 
+    background: #f3e8ff !important; 
+    background-color: #f3e8ff !important; 
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08) !important;
+    color: #7c3aed !important;
+}
+
+/* ── 메시지 말풍선 정리 ── */
+.message.user, [data-testid="user"] .message {
+    background-color: #111827 !important;
+    border-radius: 12px 12px 0 12px !important;
+    padding: 7px 13px !important; 
+    margin: 2px 0 !important; 
+    border: none !important;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important;
+    min-height: unset !important; 
+}
+[data-testid="user"] > div, .bubble-wrap [data-testid="user"], .message-wrap.user > div, .message-row.user {
+    background: transparent !important;
+    background-color: transparent !important;
+    border: none !important;
+}
+[data-testid="user"] .message *, .message.user * {
+    color: #ffffff !important;
+    line-height: 1.4 !important; 
+    margin: 0 !important; 
+}
+[data-testid="bot"] .message, [data-testid="bot"] > div, .message-wrap.bot > div, .message.bot, .message-row.bot .message {
+    background-color: #ffffff !important;
+    color: #1f2937 !important;
+    border: 1px solid #e5e7eb !important;
+    border-radius: 12px 12px 12px 0 !important;
+    padding: 16px 20px !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
+}
+
+/* ── 피드백 및 전송 버튼 ── */
+.message-buttons, button[aria-label="Good response"], button[aria-label="Bad response"], .like-dislike-area { display: none !important; }
+button[class*="submit-btn"], #submit-btn, button[id*="submit"], button.submit-button {
+    background: linear-gradient(135deg, #1e3a5f 0%, #7c3aed 100%) !important;
+    color: white !important;
+    border-radius: 8px !important;
+    font-weight: bold !important;
+    border: none !important;
+    display: block !important;
+    opacity: 1 !important;
+    visibility: visible !important;
+}
+
+/* ── 메인 레이아웃 사이드바 균형 최적화 ── */
+.sidebar-container {
+    border: 1px solid #e2e8f0 !important;
+    border-radius: 12px !important;
+    padding: 24px 20px !important;
+    background: #ffffff !important;
+    height: 700px !important; 
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04) !important;
+    display: flex !important;
+    flex-direction: column !important;
+}
+.news-feed-container {
+    flex-grow: 1 !important;
+    max-height: 250px !important;
+    overflow-y: auto !important;
+}
+"""
+'''
+
+before_lines = lines[:start_idx]
+final_content = ''.join(before_lines) + clean_css
+
+with open('app.py', 'w', encoding='utf-8') as f:
+    f.write(final_content)
+
+print('Clean CSS recovery done!')

src/retrieval/finRetrieval.py

@@ -209,9 +209,12 @@ _prompt_template = CustomRagTemplate(
 - **실전 자소서/면접 활용 Tip**: [지원동기나 역량 기술서 작성 시 본인의 역량과 어떻게 연계하여 풀어낼지에 대한 맞춤 가이드]
 
 
-### 📰 4. 근거 뉴스 출처
+### 📰 4. 근거 뉴스 출처 (GraphRAG 추천 기사)
 
-- *[기사 제목](기사 URL)* - 보도일자/언론사
+> **GraphRAG 추천 관련 뉴스 3선**
+> 1. *[기사 제목 1](기사 URL 1)* - 보도일자/언론사
+> 2. *[기사 제목 2](기사 URL 2)* - 보도일자/언론사
+> 3. *[기사 제목 3](기사 URL 3)* - 보도일자/언론사
 
 ---
 

src/utils/ui_templates.py

@@ -0,0 +1,514 @@
+# -*- coding: utf-8 -*-
+"""FinGraph UI Templates and Styling Assets.
+This module houses all custom CSS and HTML templates used by the main Gradio
+application to keep the main app.py clean and readable.
+"""
+
+from typing import Any, Dict
+
+# ── 남색 팔레트 (Navy Blue) ──────────────────────────────────────
+# 주 텍스트: #1e3a5f  /  보조: #3b5a82  /  연한: #6b8ab0
+# 강조(바이올렛): #7c3aed  /  포인트 테두리: rgba(124,58,237,0.15)
+
+# ── 1. 커스텀 CSS ────────────────────────────────────────────────
+CUSTOM_CSS: str = """
+/* ── Google Fonts 로드 ── */
+@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;600&display=swap');
+
+/* ── 전체 배경 / 기본 폰트 ── */
+body, .gradio-container {
+    background-color: #F6F5FA !important;
+    font-family: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
+    color: #1e3a5f !important;
+}
+
+/* ── Ambient glow ── */
+.ambient-glow {
+    position: fixed;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background:
+        radial-gradient(circle at 80% 10%, rgba(124,58,237,0.05) 0%, transparent 40%),
+        radial-gradient(circle at 20% 90%, rgba(12,217,247,0.05) 0%, transparent 40%);
+    z-index: -1;
+    pointer-events: none;
+}
+
+/* ── 사이드바 전체 컨테이너 ── */
+.sidebar-container {
+    border: 1px solid #e2e8f0 !important;
+    border-radius: 12px !important;
+    padding: 20px 18px !important;
+    background: #ffffff !important;
+}
+
+/* ── 구분선 ── */
+.divider {
+    border: none;
+    border-top: 1px solid #e2e8f0;
+    margin: 14px 0;
+}
+
+/* ── 패널 라벨 (섹션 제목) ── */
+.panel-label {
+    font-size: 11px;
+    font-weight: 700;
+    color: #64748b;
+    text-transform: uppercase;
+    letter-spacing: 0.07em;
+    margin-bottom: 10px;
+}
+
+/* ── 상단 2 카드 (가로 배치) ── */
+.top-cards {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+    margin-bottom: 12px;
+}
+.top-card {
+    background: #f8fafc !important;
+    border: 1px solid #e2e8f0 !important;
+    border-radius: 10px !important;
+    padding: 14px 14px 12px !important;
+}
+.top-card-lbl {
+    font-size: 11px;
+    font-weight: 600;
+    color: #64748b;
+    margin-bottom: 5px;
+}
+.top-card-val {
+    font-size: 22px;
+    font-weight: 800;
+    color: #1e293b;
+    line-height: 1.1;
+}
+.top-card-sub {
+    font-size: 10px;
+    color: #94a3b8;
+    margin-top: 3px;
+}
+
+/* ── 인사이트 행 ── */
+.insight-row {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+    margin-bottom: 16px;
+}
+.insight-card {
+    background: #f0f4ff !important;
+    border: 1px solid #c7d2fe !important;
+    border-radius: 9px !important;
+    padding: 10px 12px !important;
+}
+.insight-lbl {
+    font-size: 10px;
+    font-weight: 700;
+    color: #6366f1;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: 4px;
+}
+.insight-val {
+    font-size: 13px;
+    font-weight: 700;
+    color: #1e293b;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* ── 주요 기술 키워드 배지 (배경색 없음, 연한 보라 텍스트 개편) ── */
+.keyword-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-bottom: 14px;
+}
+.keyword-badge {
+    display: inline-block;
+    background: transparent !important; /* 배경색 없음 */
+    border: 1px solid #ddd6fe !important; /* 아주 연한 보라 테두리 */
+    border-radius: 9999px !important;
+    padding: 4px 12px !important;
+    font-size: 11px !important;
+    font-weight: 600 !important;
+    color: #8b5cf6 !important; /* 기업(진한 보라)보다 연하고 밝은 보라 텍스트 */
+}
+.keyword-badge-first {
+    background: transparent !important;
+    color: #8b5cf6 !important;
+    border: 1px solid #ddd6fe !important;
+}
+
+/* ── 회사 키워드 배지 (키워드 배지와 동일한 색, 크기, 배경색으로 통일) ── */
+.company-badge-container {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-bottom: 14px;
+}
+.company-badge {
+    display: inline-block;
+    background: transparent !important; /* 배경색 없음 */
+    border: 1px solid #ddd6fe !important; /* 아주 연한 보라 테두리 */
+    border-radius: 9999px !important;
+    padding: 4px 12px !important;
+    font-size: 11px !important;
+    font-weight: 600 !important;
+    color: #8b5cf6 !important; /* 주요 기술 키워드와 동일한 색상 */
+}
+.company-badge-first {
+    background: transparent !important;
+    color: #8b5cf6 !important;
+    border: 1px solid #ddd6fe !important;
+}
+
+/* ── 최신 뉴스 피드 ── */
+.news-feed-container {
+    max-height: 260px;
+    overflow-y: auto;
+}
+.news-feed-container::-webkit-scrollbar { width: 3px; }
+.news-feed-container::-webkit-scrollbar-track { background: transparent; }
+.news-feed-container::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 2px;
+}
+.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 #6366f1 !important;
+    padding: 10px 12px !important;
+    background: #f8fafc !important;
+    border-radius: 0 8px 8px 0 !important;
+    transition: all 0.18s ease !important;
+}
+.news-item-link:hover .news-item {
+    background: #ffffff !important;
+    border-left-color: #06b6d4 !important;
+    transform: translateX(3px) !important;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
+}
+.news-title {
+    font-size: 13px !important;
+    font-weight: 600 !important;
+    color: #1e293b !important;
+    line-height: 1.45 !important;
+    white-space: normal;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+.news-meta {
+    font-size: 11px !important;
+    color: #94a3b8 !important;
+    margin-top: 4px;
+}
+
+/* ── 예시 질문 버튼 (2x2 그리드) ── */
+[class*="examples"], .gr-samples-wrapper, .examples-container {
+    display: grid !important;
+    grid-template-columns: repeat(2, 1fr) !important;
+    gap: 8px !important;
+    margin-top: 12px !important;
+    margin-bottom: 8px !important;
+    background: transparent !important;
+    border: none !important;
+}
+[class*="examples"] button {
+    text-align: left !important;
+    padding: 11px 13px !important;
+    background: rgba(255,255,255,0.70) !important;
+    border: 1px solid rgba(124,58,237,0.09) !important;
+    border-radius: 9px !important;
+    font-size: 12px !important;
+    font-weight: 600 !important;
+    color: #1e3a5f !important;
+    line-height: 1.4 !important;
+    box-shadow: none !important;
+    transition: all 0.16s ease !important;
+    white-space: normal !important;
+    height: auto !important;
+    min-height: 46px !important;
+    cursor: pointer !important;
+}
+[class*="examples"] button:hover {
+    background: rgba(255,255,255,0.97) !important;
+    border-color: rgba(124,58,237,0.20) !important;
+    color: #1e3a5f !important;
+    box-shadow: 0 2px 8px rgba(124,58,237,0.06) !important;
+    transform: translateY(-1px) !important;
+}
+
+/* ── 전송 버튼: 너비 넓고 높이 입력창에 맞춤 ── */
+button[class*="submit-btn"],
+[data-testid="submit-button"],
+#submit-btn {
+    background: linear-gradient(135deg, #1e3a5f 0%, #7c3aed 100%) !important;
+    color: white !important;
+    font-weight: 700 !important;
+    font-size: 13px !important;
+    border: none !important;
+    border-radius: 8px !important;
+    box-shadow: 0 2px 10px rgba(30,58,95,0.18) !important;
+    transition: all 0.16s ease !important;
+    cursor: pointer !important;
+    height: 46px !important;
+    min-width: 68px !important;
+    max-width: 88px !important;
+    padding: 0 16px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    box-sizing: border-box !important;
+}
+button[class*="submit-btn"]:hover,
+[data-testid="submit-button"]:hover {
+    background: linear-gradient(135deg, #2a4f82 0%, #8b47ff 100%) !important;
+    box-shadow: 0 4px 16px rgba(124,58,237,0.24) !important;
+    transform: translateY(-1px) !important;
+}
+
+/* ── 입력창 ── */
+textarea,
+[class*="input-container"] textarea,
+[data-testid="textbox"] textarea {
+    height: 46px !important;
+    min-height: 46px !important;
+    max-height: 46px !important;
+    font-size: 13px !important;
+    padding: 14px 14px !important;
+    line-height: 1.5 !important;
+    border-radius: 8px !important;
+    border: 1px solid rgba(30,58,95,0.15) !important;
+    background: rgba(255,255,255,0.80) !important;
+    color: #1e3a5f !important;
+    resize: none !important;
+    overflow-y: hidden !important;
+    box-sizing: border-box !important;
+}
+textarea:focus {
+    border-color: #7c3aed !important;
+    background: rgba(255,255,255,0.97) !important;
+    box-shadow: 0 0 0 3px rgba(124,58,237,0.09) !important;
+    outline: none !important;
+}
+div:has(> button[class*="submit-btn"]),
+div:has(> [data-testid="submit-button"]),
+.input-container, [class*="input-container"] {
+    gap: 9px !important;
+    align-items: center !important;
+}
+
+/* ── 챗봇 컨테이너 ── */
+div[data-testid="chatbot"] {
+    background: transparent !important;
+    border: 1px solid rgba(30,58,95,0.08) !important;
+    border-radius: 12px !important;
+}
+
+/* ── 챗봇 탭/라벨 숨김 ── */
+.chatbot > div:first-child, [class*="chatbot"] > div:first-child,
+.chatbot-label, div[class*="chatbot"] .label,
+[data-testid="chatbot"] .label, .chatbot-header,
+.gr-panel-title, .gr-chatbot-label,
+[data-testid="chatbot"] > div:first-child,
+label.svelte-1ipelgc, span.svelte-1ipelgc {
+    display: none !important;
+}
+
+/* ── 사용자 버블 ── */
+.message.user {
+    background: rgba(30,58,95,0.06) !important;
+    border: 1px solid rgba(30,58,95,0.14) !important;
+    border-radius: 12px !important;
+}
+.message.user p, .message.user span,
+.message.user li, .message.user div {
+    color: #1e3a5f !important;
+    font-weight: 600 !important;
+    background: transparent !important;
+}
+
+/* ── 봇 버블 ── */
+.message.bot {
+    background: rgba(255,255,255,0.65) !important;
+    border: 1px solid rgba(30,58,95,0.08) !important;
+    border-radius: 12px !important;
+}
+.message.bot p, .message.bot span,
+.message.bot li, .message.bot div {
+    color: #1e3a5f !important;
+    background: transparent !important;
+}
+
+/* ── 메시지 내부 보더 완전 제거 ── */
+.message p, .message li,
+[class*="message"] p, [class*="message"] li {
+    line-height: 1.68 !important;
+    margin-bottom: 12px !important;
+    border: none !important;
+    border-left: none !important;
+    box-shadow: none !important;
+    background: transparent !important;
+    color: #1e3a5f !important;
+}
+.message blockquote, [class*="message"] blockquote {
+    border: none !important;
+    border-left: none !important;
+    padding: 0 !important;
+    background: transparent !important;
+}
+.message h3, [class*="message"] h3 {
+    margin-top: 18px !important;
+    margin-bottom: 8px !important;
+    font-weight: 800 !important;
+    color: #1e3a5f !important;
+}
+
+/* ── 전역 링크 / CSS 변수 ── */
+:root {
+    --color-accent: #7c3aed !important;
+    --primary-500: #7c3aed !important;
+    --primary-600: #6d28d9 !important;
+}
+a { color: #7c3aed !important; }
+
+/* ── secondary 버튼 ── */
+button.secondary, button.lg.secondary, button.sm.secondary,
+button.wrap, button.variant-secondary, .secondary-btn {
+    background-color: rgba(255,255,255,0.75) !important;
+    color: #1e3a5f !important;
+    border: 1px solid rgba(30,58,95,0.13) !important;
+    font-weight: 600 !important;
+    transition: all 0.16s ease !important;
+}
+button.secondary:hover, button.variant-secondary:hover {
+    background-color: rgba(255,255,255,0.97) !important;
+    border-color: rgba(124,58,237,0.24) !important;
+}
+
+/* ── 메인 레이아웃 컬럼 높이 동기화 (챗봇 내부 깨짐 방지) ── */
+#main-row { align-items: stretch !important; }
+#main-row > div[class*="column"] {
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+/* ── 왼쪽 패널 너비 오버플로우 완전 차단 ── */
+.sidebar-container * {
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+    word-break: break-word !important;
+    overflow-wrap: break-word !important;
+}
+
+/* ── 엄지 피드백 버튼 숨김 ── */
+.feedback-area,
+[data-testid="like-dislike"],
+.like-dislike-area,
+.message-buttons,
+.chatbot-action-buttons,
+button[aria-label="Good response"],
+button[aria-label="Bad response"],
+button[aria-label="thumbs up"],
+button[aria-label="thumbs down"],
+.bot + div > div > button,
+.svelte-1ed2p3z { display: none !important; }
+"""
+
+
+def build_stats_html(stats: Dict[str, Any]) -> str:
+    """왼쪽 사이드바 전체 HTML 생성.
+
+    구성:
+    - 상단 2 카드 (분석 모델 / 기억수)
+    - 구분선
+    - 회사 키워드 배지 (5개)
+    - 구분선
+    - 뉴스 키워드 배지
+    - 구분선
+    - 최신 뉴스 피드
+    """
+    # ── 회사 키워드 배지 (5개) ───────────────────────────
+    company_html = ""
+    for idx, c in enumerate(stats.get("companies_list", [])):
+        css = "company-badge company-badge-first" if idx == 0 else "company-badge"
+        company_html += f'<span class="{css}"># {c["name"]}</span>\n'
+    if not company_html:
+        company_html = '<span style="font-size:10px;color:#6b8ab0;">등록된 회사 없음</span>'
+
+    # ── 뉴스 키워드 배지 ──────────────────────────────
+    keyword_html = ""
+    for idx, t in enumerate(stats.get("techs_list", [])):
+        css = "keyword-badge keyword-badge-first" if idx == 0 else "keyword-badge"
+        keyword_html += f'<span class="{css}"># {t["name"]}</span>\n'
+    if not keyword_html:
+        keyword_html = '<span style="font-size:10px;color:#6b8ab0;">키워드 없음</span>'
+
+    # ── 최신 뉴스 피드 ──────────────────────────────
+    news_html = ""
+    for a in stats.get("recent_articles", []):
+        title = a["title"] or ""
+        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_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_html:
+        news_html = '<div style="font-size:10px;color:#6b8ab0;">기사를 불러오는 중...</div>'
+
+    return f"""
+    <div class="sidebar-container">
+
+        <!-- 상단 2 카드 -->
+        <div class="top-cards">
+            <div class="top-card">
+                <div class="top-card-lbl">🤖 분석 모델</div>
+                <div class="top-card-val">GPT-4o</div>
+                <div class="top-card-sub">초거대 AI 엔진</div>
+            </div>
+            <div class="top-card">
+                <div class="top-card-lbl">🏢 대상 기업</div>
+                <div class="top-card-val">{stats["companies"]}곳</div>
+                <div class="top-card-sub">그래프 내 기업</div>
+            </div>
+        </div>
+
+        <hr class="divider">
+
+        <!-- 회사 키워드 -->
+        <div class="panel-label">🏢 주요 대상 기업</div>
+        <div class="company-badge-container">
+            {company_html}
+        </div>
+
+        <hr class="divider">
+
+        <!-- 뉴스 키워드 -->
+        <div class="panel-label">🏷️ 주요 기술 키워드</div>
+        <div class="keyword-container">
+            {keyword_html}
+        </div>
+
+        <hr class="divider">
+
+        <!-- 최신 뉴스 피드 -->
+        <div class="panel-label">📡 최신 뉴스</div>
+        <div class="news-feed-container">
+            {news_html}
+        </div>
+    </div>
+    """