Update app.py

app.py

@@ -1,5 +1,5 @@
 """
-AI 기반 상권 분석 시스템 - 스트리밍 강화 버전 + Brave 웹검색
+AI 기반 상권 분석 시스템 - Comic Classic Theme 버전
 Dataset: https://huggingface.co/datasets/ginipick/market
 """
 import gradio as gr
@@ -168,34 +168,15 @@ class MarketAnalyzer:
         """포괄적인 인사이트 생성"""
         insights = []
         
-        # 1. 업종별 점포 수 (상권업종중분류)
         insights.append(self._create_top_categories_chart())
-        
-        # 2. 대분류별 분포 (파이 차트)
         insights.append(self._create_major_category_pie())
-        
-        # 3. 층별 분포 상세 분석
         insights.append(self._create_floor_analysis())
-        
-        # 4. 지역별 업종 다양성 지수
         insights.append(self._create_diversity_index())
-        
-        # 5. 프랜차이즈 vs 개인사업자 분석
         insights.append(self._create_franchise_analysis())
-        
-        # 6. 업종별 층 선호도
         insights.append(self._create_floor_preference())
-        
-        # 7. 시군구별 상권 밀집도 TOP 20
         insights.append(self._create_district_density())
-        
-        # 8. 업종 상관관계 (같은 지역에 자주 나타나는 업종)
         insights.append(self._create_category_correlation())
-        
-        # 9. 소분류 트렌드 (상위 20개)
         insights.append(self._create_subcategory_trends())
-        
-        # 10. 지역별 특화 업종
         insights.append(self._create_regional_specialization())
         
         return insights
@@ -244,7 +225,6 @@ class MarketAnalyzer:
         floor_data = self.df['층정보_숫자'].dropna()
         floor_counts = floor_data.value_counts().sort_index()
         
-        # 지하, 1층, 2층 이상으로 그룹화
         underground = floor_counts[floor_counts.index < 0].sum()
         first_floor = floor_counts.get(1, 0)
         upper_floors = floor_counts[floor_counts.index > 1].sum()
@@ -273,9 +253,8 @@ class MarketAnalyzer:
         if '시군구명' not in self.df.columns or '상권업종중분류명' not in self.df.columns:
             return None
         
-        # 각 시군구별 업종 다양성 계산 (업종 수 / 전체 점포 수)
         diversity_data = []
-        for district in self.df['시군구명'].unique()[:20]:  # 상위 20개
+        for district in self.df['시군구명'].unique()[:20]:
             district_df = self.df[self.df['시군구명'] == district]
             num_categories = district_df['상권업종중분류명'].nunique()
             total_stores = len(district_df)
@@ -307,7 +286,6 @@ class MarketAnalyzer:
         if '브랜드명' not in self.df.columns:
             return None
         
-        # 브랜드명이 있으면 프랜차이즈로 간주
         franchise_count = self.df['브랜드명'].notna().sum()
         individual_count = self.df['브랜드명'].isna().sum()
         
@@ -333,7 +311,6 @@ class MarketAnalyzer:
         if '층정보_숫자' not in self.df.columns or '상권업종중분류명' not in self.df.columns:
             return None
         
-        # 상위 10개 업종 선택
         top_categories = self.df['상권업종중분류명'].value_counts().head(10).index
         floor_pref_data = []
         
@@ -390,21 +367,17 @@ class MarketAnalyzer:
         return {'type': 'plot', 'data': fig, 'title': '지역 밀집도 분석'}
     
     def _create_category_correlation(self) -> Dict:
-        """업종 상관관계 (같은 지역에 자주 나타나는 업종)"""
+        """업종 상관관계"""
         if '시군구명' not in self.df.columns or '상권업종중분류명' not in self.df.columns:
             return None
         
-        # 상위 10개 업종만 선택
         top_categories = self.df['상권업종중분류명'].value_counts().head(10).index.tolist()
-        
-        # 각 시군구별로 업종 존재 여부 매트릭스 생성
         districts = self.df['시군구명'].unique()
         correlation_matrix = np.zeros((len(top_categories), len(top_categories)))
         
         for i, cat1 in enumerate(top_categories):
             for j, cat2 in enumerate(top_categories):
                 if i != j:
-                    # 두 업종이 같은 시군구에 존재하는 횟수
                     coexist_count = 0
                     for district in districts:
                         district_df = self.df[self.df['시군구명'] == district]
@@ -456,7 +429,6 @@ class MarketAnalyzer:
         if '시도명' not in self.df.columns or '상권업종중분류명' not in self.df.columns:
             return None
         
-        # 각 시도별 상위 3개 업종
         specialization_data = []
         for region in self.df['시도명'].unique():
             region_df = self.df[self.df['시도명'] == region]
@@ -490,7 +462,6 @@ class MarketAnalyzer:
         
         m = folium.Map(location=[center_lat, center_lon], zoom_start=11, tiles='OpenStreetMap')
         
-        # 히트맵
         heat_data = [[row['위��'], row['경도']] for _, row in df_sample.iterrows()]
         HeatMap(heat_data, radius=15, blur=25, max_zoom=13).add_to(m)
         
@@ -522,7 +493,6 @@ class LLMQueryProcessor:
     """Fireworks AI 기반 자연어 처리 (스트리밍 지원 + 웹검색)"""
     
     def __init__(self, api_key: str = None):
-        # 환경변수에서 API 키 가져오기
         self.api_key = api_key or os.getenv("FIREWORKS_API_KEY")
         self.base_url = "https://api.fireworks.ai/inference/v1/chat/completions"
         
@@ -532,7 +502,6 @@ class LLMQueryProcessor:
     def process_query_stream(self, query: str, data_context: Dict, chat_history: List = None, web_search_results: str = None):
         """자연어 쿼리 처리 (스트리밍 모드) - 웹검색 결과 포함"""
         
-        # 웹검색 결과가 있으면 컨텍스트에 추가
         web_context = ""
         if web_search_results and "⚠️" not in web_search_results:
             web_context = f"""
@@ -551,7 +520,8 @@ class LLMQueryProcessor:
 
 구체적인 숫자와 비율로 정량적 분석을 제공하세요.
 창업, 투자, 경쟁 분석 관점에서 실용적 인사이트를 제공하세요.
-웹 검색 결과가 제공된 경우 최신 트렌드와 함께 분석하세요."""
+웹 검색 결과가 제공된 경우 최신 트렌드와 함께 분석하세요.
+반드시 한국어로 답변하세요."""
 
         messages = [{"role": "system", "content": system_prompt}]
         if chat_history:
@@ -563,7 +533,7 @@ class LLMQueryProcessor:
             "max_tokens": 4800,
             "temperature": 0.7,
             "messages": messages,
-            "stream": True  # 🔥 스트리밍 활성화!
+            "stream": True
         }
         
         headers = {
@@ -577,16 +547,15 @@ class LLMQueryProcessor:
                 headers=headers, 
                 json=payload, 
                 timeout=60,
-                stream=True  # 스트리밍 모드
+                stream=True
             )
             
             if response.status_code == 200:
-                # 스트리밍 응답 처리
                 for line in response.iter_lines():
                     if line:
                         line_text = line.decode('utf-8')
                         if line_text.startswith('data: '):
-                            data_str = line_text[6:]  # 'data: ' 제거
+                            data_str = line_text[6:]
                             if data_str.strip() == '[DONE]':
                                 break
                             try:
@@ -639,15 +608,16 @@ def load_data(regions):
         
         app_state.analyzer = MarketAnalyzer(df)
         
-        # 기본 통계
         stats = f"""
 ✅ **데이터 로드 완료!**
-
-📊 **통계**
-- 총 점포: {len(df):,}개
-- 분석 지역: {', '.join(regions)}
-- 업종 수: {df['상권업종중분류명'].nunique()}개
-- 대분류: {df['상권업종대분류명'].nunique()}개
+{'=' * 40}
+📊 **분석 통계**
+   • 총 점포: {len(df):,}개
+   • 분석 지역: {', '.join(regions)}
+   • 업종 수: {df['상권업종중분류명'].nunique()}개
+   • 대분류: {df['상권업종대분류명'].nunique()}개
+{'=' * 40}
+💡 이제 인사이트를 확인하거나 AI에게 질문하세요!
 """
         
         return stats, gr.update(visible=True), gr.update(visible=True), gr.update(visible=True)
@@ -670,7 +640,6 @@ def generate_insights():
         else:
             result.append(None)
     
-    # 부족한 차트는 None으로 채우기
     while len(result) < 11:
         result.append(None)
     
@@ -678,7 +647,7 @@ def generate_insights():
 
 
 def chat_respond(message, history):
-    """챗봇 응답 (스트리밍 모드 + 웹검색) - Generator 함수"""
+    """챗봇 응답 (스트리밍 모드 + 웹검색)"""
     if app_state.analyzer is None:
         yield history + [[message, "❌ 먼저 데이터를 로드해주세요!"]]
         return
@@ -686,39 +655,31 @@ def chat_respond(message, history):
     data_context = app_state.analyzer.analyze_for_llm()
     
     try:
-        # LLM 프로세서 초기화
         if app_state.llm_processor is None:
             app_state.llm_processor = LLMQueryProcessor()
         
-        # Brave Search 클라이언트 초기화
         if app_state.brave_client is None:
             try:
                 app_state.brave_client = BraveSearchClient()
             except:
                 app_state.brave_client = None
         
-        # 🔍 자동 웹검색 수행
         web_results = None
         if app_state.brave_client and app_state.brave_client.api_key:
-            # 검색 쿼리 생성 (사용자 질문에서 핵심 키워드 추출)
             search_query = f"한국 상권 창업 트렌드 {message}"
             web_results = app_state.brave_client.search(search_query, count=3)
         
-        # 대화 히스토리 구성
         chat_hist = []
         for user_msg, bot_msg in history:
             chat_hist.append({"role": "user", "content": user_msg})
             chat_hist.append({"role": "assistant", "content": bot_msg})
         
-        # 새 메시지 추가
         history = history + [[message, ""]]
         
-        # 웹검색 상태 표시
         if web_results and "⚠️" not in web_results:
             history[-1][1] = "🔍 웹 검색 중...\n\n"
             yield history
         
-        # 스트리밍 응답 (웹검색 결과 포함)
         full_response = ""
         for chunk in app_state.llm_processor.process_query_stream(message, data_context, chat_hist, web_results):
             full_response += chunk
@@ -726,7 +687,6 @@ def chat_respond(message, history):
             yield history
         
     except ValueError as e:
-        # API 키가 없는 경우 기본 통계 제공
         response = f"""📊 **기본 데이터 분석 결과**
 
 **전체 현황**
@@ -738,119 +698,520 @@ def chat_respond(message, history):
 환경변수를 설정하세요:
 ```bash
 export FIREWORKS_API_KEY="your_api_key_here"
-export BRAVE_API_KEY="your_brave_api_key_here"  # 웹검색용 (선택)
-```
-
-또는 Hugging Face Space에서는 Settings > Variables 에서 설정하세요."""
+export BRAVE_API_KEY="your_brave_api_key_here"
+```"""
         
         history = history + [[message, response]]
         yield history
 
 
 # ============================================================================
-# Gradio UI
+# 🎨 Comic Classic Theme CSS
 # ============================================================================
 
-with gr.Blocks(title="AI 상권 분석 시스템 Pro", theme=gr.themes.Soft()) as demo:
-    gr.Markdown("""
-    # 🏪 AI 상권 분석 시스템 Pro (스트리밍 + 웹검색 🔍)
-    *전국 상가(상권) 데이터 기반 실시간 분석 | Powered by Fireworks AI + Brave Search*
+css = """
+/* ===== 🎨 Google Fonts Import ===== */
+@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@400;700&family=Noto+Sans+KR:wght@400;700&display=swap');
+
+/* ===== 🎨 Comic Classic 배경 - 빈티지 페이퍼 + 도트 패턴 ===== */
+.gradio-container {
+    background-color: #FEF9C3 !important;
+    background-image: 
+        radial-gradient(#1F2937 1px, transparent 1px) !important;
+    background-size: 20px 20px !important;
+    min-height: 100vh !important;
+    font-family: 'Noto Sans KR', 'Comic Neue', cursive, sans-serif !important;
+}
+
+/* ===== 허깅페이스 상단 요소 숨김 ===== */
+.huggingface-space-header,
+#space-header,
+.space-header,
+[class*="space-header"],
+.svelte-1ed2p3z,
+.space-header-badge,
+.header-badge,
+[data-testid="space-header"],
+.svelte-kqij2n,
+.svelte-1ax1toq,
+.embed-container > div:first-child {
+    display: none !important;
+    visibility: hidden !important;
+    height: 0 !important;
+    width: 0 !important;
+    overflow: hidden !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+}
+
+/* ===== Footer 완전 숨김 ===== */
+footer,
+.footer,
+.gradio-container footer,
+.built-with,
+[class*="footer"],
+.gradio-footer,
+.main-footer,
+div[class*="footer"],
+.show-api,
+.built-with-gradio,
+a[href*="gradio.app"],
+a[href*="huggingface.co/spaces"] {
+    display: none !important;
+    visibility: hidden !important;
+    height: 0 !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+/* ===== 메인 컨테이너 ===== */
+#col-container { 
+    max-width: 1400px; 
+    margin: 0 auto; 
+}
+
+/* ===== 🎨 헤더 타이틀 - 코믹 스타일 ===== */
+.header-text h1 {
+    font-family: 'Bangers', cursive !important;
+    color: #1F2937 !important;
+    font-size: 3.2rem !important;
+    font-weight: 400 !important;
+    text-align: center !important;
+    margin-bottom: 0.5rem !important;
+    text-shadow: 
+        4px 4px 0px #FACC15,
+        6px 6px 0px #1F2937 !important;
+    letter-spacing: 3px !important;
+    -webkit-text-stroke: 2px #1F2937 !important;
+}
+
+/* ===== 🎨 서브타이틀 ===== */
+.subtitle {
+    text-align: center !important;
+    font-family: 'Noto Sans KR', 'Comic Neue', cursive !important;
+    font-size: 1.1rem !important;
+    color: #1F2937 !important;
+    margin-bottom: 1.5rem !important;
+    font-weight: 700 !important;
+}
+
+/* ===== 🎨 카드/패널 - 만화 프레임 스타일 ===== */
+.gr-panel,
+.gr-box,
+.gr-form,
+.block,
+.gr-group {
+    background: #FFFFFF !important;
+    border: 3px solid #1F2937 !important;
+    border-radius: 8px !important;
+    box-shadow: 6px 6px 0px #1F2937 !important;
+    transition: all 0.2s ease !important;
+}
+
+.gr-panel:hover,
+.block:hover {
+    transform: translate(-2px, -2px) !important;
+    box-shadow: 8px 8px 0px #1F2937 !important;
+}
+
+/* ===== 🎨 입력 필드 (Textbox) ===== */
+textarea, 
+input[type="text"], 
+input[type="number"] {
+    background: #FFFFFF !important;
+    border: 3px solid #1F2937 !important;
+    border-radius: 8px !important;
+    color: #1F2937 !important;
+    font-family: 'Noto Sans KR', 'Comic Neue', cursive !important;
+    font-size: 1rem !important;
+    font-weight: 700 !important;
+    transition: all 0.2s ease !important;
+}
+
+textarea:focus, 
+input[type="text"]:focus, 
+input[type="number"]:focus {
+    border-color: #3B82F6 !important;
+    box-shadow: 4px 4px 0px #3B82F6 !important;
+    outline: none !important;
+}
+
+textarea::placeholder {
+    color: #9CA3AF !important;
+    font-weight: 400 !important;
+}
+
+/* ===== 🎨 Primary 버튼 - 코믹 블루 ===== */
+.gr-button-primary,
+button.primary,
+.gr-button.primary {
+    background: #3B82F6 !important;
+    border: 3px solid #1F2937 !important;
+    border-radius: 8px !important;
+    color: #FFFFFF !important;
+    font-family: 'Noto Sans KR', 'Bangers', cursive !important;
+    font-weight: 700 !important;
+    font-size: 1.2rem !important;
+    letter-spacing: 1px !important;
+    padding: 14px 28px !important;
+    box-shadow: 5px 5px 0px #1F2937 !important;
+    transition: all 0.1s ease !important;
+    text-shadow: 1px 1px 0px #1F2937 !important;
+}
+
+.gr-button-primary:hover,
+button.primary:hover,
+.gr-button.primary:hover {
+    background: #2563EB !important;
+    transform: translate(-2px, -2px) !important;
+    box-shadow: 7px 7px 0px #1F2937 !important;
+}
+
+.gr-button-primary:active,
+button.primary:active,
+.gr-button.primary:active {
+    transform: translate(3px, 3px) !important;
+    box-shadow: 2px 2px 0px #1F2937 !important;
+}
+
+/* ===== 🎨 Secondary 버튼 - 코믹 레드 ===== */
+.gr-button-secondary,
+button.secondary {
+    background: #EF4444 !important;
+    border: 3px solid #1F2937 !important;
+    border-radius: 8px !important;
+    color: #FFFFFF !important;
+    font-family: 'Noto Sans KR', 'Bangers', cursive !important;
+    font-weight: 700 !important;
+    font-size: 1rem !important;
+    letter-spacing: 1px !important;
+    box-shadow: 4px 4px 0px #1F2937 !important;
+    transition: all 0.1s ease !important;
+    text-shadow: 1px 1px 0px #1F2937 !important;
+}
+
+.gr-button-secondary:hover,
+button.secondary:hover {
+    background: #DC2626 !important;
+    transform: translate(-2px, -2px) !important;
+    box-shadow: 6px 6px 0px #1F2937 !important;
+}
+
+/* ===== 🎨 Small 버튼 ===== */
+button.sm,
+.gr-button-sm {
+    background: #10B981 !important;
+    border: 2px solid #1F2937 !important;
+    border-radius: 6px !important;
+    color: #FFFFFF !important;
+    font-family: 'Noto Sans KR', cursive !important;
+    font-weight: 700 !important;
+    font-size: 0.9rem !important;
+    padding: 8px 16px !important;
+    box-shadow: 3px 3px 0px #1F2937 !important;
+    transition: all 0.1s ease !important;
+}
+
+button.sm:hover,
+.gr-button-sm:hover {
+    background: #059669 !important;
+    transform: translate(-1px, -1px) !important;
+    box-shadow: 4px 4px 0px #1F2937 !important;
+}
+
+/* ===== 🎨 로그 출력 영역 ===== */
+.info-log textarea {
+    background: #1F2937 !important;
+    color: #10B981 !important;
+    font-family: 'Courier New', monospace !important;
+    font-size: 0.9rem !important;
+    font-weight: 400 !important;
+    border: 3px solid #10B981 !important;
+    border-radius: 8px !important;
+    box-shadow: 4px 4px 0px #10B981 !important;
+}
+
+/* ===== 🎨 아코디언 - 말풍선 스타일 ===== */
+.gr-accordion {
+    background: #FACC15 !important;
+    border: 3px solid #1F2937 !important;
+    border-radius: 8px !important;
+    box-shadow: 4px 4px 0px #1F2937 !important;
+}
+
+.gr-accordion-header {
+    color: #1F2937 !important;
+    font-family: 'Noto Sans KR', 'Comic Neue', cursive !important;
+    font-weight: 700 !important;
+    font-size: 1.1rem !important;
+}
+
+/* ===== 🎨 체크박스 그룹 ===== */
+.gr-checkbox-group {
+    background: #FFFFFF !important;
+    border: 3px solid #1F2937 !important;
+    border-radius: 8px !important;
+    padding: 10px !important;
+}
+
+input[type="checkbox"] {
+    accent-color: #3B82F6 !important;
+    width: 18px !important;
+    height: 18px !important;
+}
+
+/* ===== 🎨 탭 스타일 ===== */
+.gr-tab-nav {
+    background: #FACC15 !important;
+    border: 3px solid #1F2937 !important;
+    border-radius: 8px 8px 0 0 !important;
+    box-shadow: 4px 4px 0px #1F2937 !important;
+}
+
+.gr-tab-nav button {
+    font-family: 'Noto Sans KR', 'Comic Neue', cursive !important;
+    font-weight: 700 !important;
+    color: #1F2937 !important;
+    border: none !important;
+    padding: 12px 20px !important;
+}
+
+.gr-tab-nav button.selected {
+    background: #3B82F6 !important;
+    color: #FFFFFF !important;
+    border-radius: 6px 6px 0 0 !important;
+}
+
+/* ===== 🎨 챗봇 스타일 ===== */
+.gr-chatbot {
+    background: #FFFFFF !important;
+    border: 3px solid #1F2937 !important;
+    border-radius: 8px !important;
+    box-shadow: 6px 6px 0px #1F2937 !important;
+}
+
+.gr-chatbot .message {
+    font-family: 'Noto Sans KR', sans-serif !important;
+}
+
+/* ===== 🎨 라벨 스타일 ===== */
+label,
+.gr-input-label,
+.gr-block-label {
+    color: #1F2937 !important;
+    font-family: 'Noto Sans KR', 'Comic Neue', cursive !important;
+    font-weight: 700 !important;
+    font-size: 1rem !important;
+}
+
+/* ===== 🎨 Markdown 스타일 ===== */
+.gr-markdown {
+    font-family: 'Noto Sans KR', 'Comic Neue', cursive !important;
+    color: #1F2937 !important;
+}
+
+.gr-markdown h1,
+.gr-markdown h2,
+.gr-markdown h3 {
+    font-family: 'Bangers', 'Noto Sans KR', cursive !important;
+    color: #1F2937 !important;
+    text-shadow: 2px 2px 0px #FACC15 !important;
+}
+
+/* ===== 🎨 Plot 영역 ===== */
+.gr-plot {
+    border: 3px solid #1F2937 !important;
+    border-radius: 8px !important;
+    box-shadow: 4px 4px 0px #1F2937 !important;
+    background: #FFFFFF !important;
+}
+
+/* ===== 🎨 HTML 영역 (지도) ===== */
+.gr-html {
+    border: 4px solid #1F2937 !important;
+    border-radius: 8px !important;
+    box-shadow: 6px 6px 0px #FACC15 !important;
+    overflow: hidden !important;
+}
+
+/* ===== 🎨 스크롤바 - 코믹 스타일 ===== */
+::-webkit-scrollbar {
+    width: 12px;
+    height: 12px;
+}
+
+::-webkit-scrollbar-track {
+    background: #FEF9C3;
+    border: 2px solid #1F2937;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #3B82F6;
+    border: 2px solid #1F2937;
+    border-radius: 0px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #EF4444;
+}
+
+/* ===== 🎨 선택 하이라이트 ===== */
+::selection {
+    background: #FACC15;
+    color: #1F2937;
+}
+
+/* ===== 🎨 링크 스타일 ===== */
+a {
+    color: #3B82F6 !important;
+    text-decoration: none !important;
+    font-weight: 700 !important;
+}
+
+a:hover {
+    color: #EF4444 !important;
+}
+
+/* ===== 🎨 Row/Column 간격 ===== */
+.gr-row {
+    gap: 1.5rem !important;
+}
+
+.gr-column {
+    gap: 1rem !important;
+}
+
+/* ===== 🎨 Badge 스타일 ===== */
+.badge-container {
+    display: flex;
+    justify-content: center;
+    gap: 15px;
+    flex-wrap: wrap;
+    margin: 20px 0;
+}
+
+.comic-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 24px;
+    border: 3px solid #1F2937;
+    border-radius: 8px;
+    text-decoration: none;
+    font-weight: 700;
+    font-size: 1em;
+    transition: all 0.2s ease;
+    box-shadow: 4px 4px 0px #1F2937;
+    font-family: 'Noto Sans KR', sans-serif;
+}
+
+.comic-badge:hover {
+    transform: translate(-2px, -2px);
+    box-shadow: 6px 6px 0px #1F2937;
+}
+
+.comic-badge-yellow {
+    background: #FACC15;
+    color: #1F2937;
+}
+
+.comic-badge-blue {
+    background: #3B82F6;
+    color: #FFFFFF;
+}
+
+.comic-badge-green {
+    background: #10B981;
+    color: #FFFFFF;
+}
+
+/* ===== 반응형 조정 ===== */
+@media (max-width: 768px) {
+    .header-text h1 {
+        font-size: 2rem !important;
+        text-shadow: 
+            3px 3px 0px #FACC15,
+            4px 4px 0px #1F2937 !important;
+    }
     
-    **✨ 10가지 심층 분석 제공**: 업종 트렌드, 경쟁 강도, 입지 분석, 프랜차이즈 비율, 지역 특화, 층별 선호도 등
-    """)
+    .gr-button-primary,
+    button.primary {
+        padding: 12px 20px !important;
+        font-size: 1rem !important;
+    }
+    
+    .gr-panel,
+    .block {
+        box-shadow: 4px 4px 0px #1F2937 !important;
+    }
+}
+
+/* ===== 🎨 다크모드 비활성화 ===== */
+@media (prefers-color-scheme: dark) {
+    .gradio-container {
+        background-color: #FEF9C3 !important;
+    }
+}
+"""
 
-    # 웹 배지 추가
+
+# ============================================================================
+# Gradio UI
+# ============================================================================
+
+with gr.Blocks(title="AI 상권 분석 시스템", css=css) as demo:
+    
+    # HOME Badge
     gr.HTML("""
-    <style>
-        .badges-container {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            gap: 15px;
-            flex-wrap: wrap;
-            margin: 20px 0;
-        }
-        
-        .badge {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            padding: 10px 20px;
-            border-radius: 25px;
-            text-decoration: none;
-            font-weight: 600;
-            font-size: 0.95em;
-            transition: all 0.3s ease;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
-            position: relative;
-            overflow: hidden;
-        }
-        
-        .badge::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
-            transition: left 0.5s;
-        }
-        
-        .badge:hover::before {
-            left: 100%;
-        }
-        
-        .badge:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 6px 25px rgba(0,0,0,0.3);
-        }
-        
-        .badge-kakao {
-            background: linear-gradient(135deg, #FEE500 0%, #FFEB3B 100%);
-            color: #3C1E1E;
-        }
-        
-        .badge-kakao:hover {
-            background: linear-gradient(135deg, #FFD700 0%, #FFC107 100%);
-        }
-        
-        .badge-ginigen {
-            background: linear-gradient(135deg, #00D9FF 0%, #0099FF 100%);
-            color: white;
-        }
-        
-        .badge-ginigen:hover {
-            background: linear-gradient(135deg, #00C4E6 0%, #0080E6 100%);
-        }
-        
-        .badge-icon {
-            font-size: 1.2em;
-        }
-    </style>
+        <div style="text-align: center; margin: 20px 0 10px 0;">
+            <a href="https://www.humangen.ai" target="_blank" style="text-decoration: none;">
+                <img src="https://img.shields.io/static/v1?label=🏠 HOME&message=HUMANGEN.AI&color=0000ff&labelColor=ffcc00&style=for-the-badge" alt="HOME">
+            </a>
+        </div>
+    """)
+    
+    # Header Title
+    gr.Markdown(
+        """
+        # 🏪 AI 상권 분석 시스템 PRO 📊
+        """,
+        elem_classes="header-text"
+    )
     
-    <div class="badges-container">
-        <a href="https://open.kakao.com/o/peIe8KWh" target="_blank" class="badge badge-kakao">
-            <span class="badge-icon">💬</span>
+    gr.Markdown(
+        """
+        <p class="subtitle">⚡ 전국 상가(상권) 데이터 실시간 분석 | 스트리밍 + 웹검색 🔍 | 10가지 심층 인사이트 🚀</p>
+        """,
+    )
+    
+    # 배지
+    gr.HTML("""
+    <div class="badge-container">
+        <a href="https://open.kakao.com/o/peIe8KWh" target="_blank" class="comic-badge comic-badge-yellow">
+            <span>💬</span>
             <span>오픈채팅 바로가기</span>
         </a>
-        <a href="https://ginigen.ai" target="_blank" class="badge badge-ginigen">
-            <span class="badge-icon">🍌</span>
+        <a href="https://ginigen.ai" target="_blank" class="comic-badge comic-badge-blue">
+            <span>🍌</span>
             <span>나노 바나나 애드온 무료 서비스</span>
         </a>
     </div>
     """)
-
     
-    with gr.Row():
-        with gr.Column(scale=1):
-            gr.Markdown("### ⚙️ 설정")
+    # API 상태
+    api_status = "✅ 설정됨" if os.getenv("FIREWORKS_API_KEY") else "⚠️ 미설정"
+    brave_status = "✅ 활성화" if os.getenv("BRAVE_API_KEY") else "⚠️ 비활성화"
+    
+    with gr.Row(equal_height=False):
+        # 왼쪽 컬럼 - 설정
+        with gr.Column(scale=1, min_width=300):
+            gr.Markdown("### ⚙️ 분석 설정")
             
-            # 환경변수 상태 표시
-            api_status = "✅ API 키 설정됨" if os.getenv("FIREWORKS_API_KEY") else "⚠️ API 키 미설정 (기본 통계만 제공)"
-            brave_status = "✅ 웹검색 활성화" if os.getenv("BRAVE_API_KEY") else "⚠️ 웹검색 비활성화"
-            gr.Markdown(f"**🔑 Fireworks AI**: {api_status}")
-            gr.Markdown(f"**🔍 Brave Search**: {brave_status}")
+            gr.Markdown(f"""
+**🔑 API 상태**
+- Fireworks AI: {api_status}
+- Brave Search: {brave_status}
+            """)
             
             region_select = gr.CheckboxGroup(
                 choices=list(MarketDataLoader.REGIONS.keys()),
@@ -858,12 +1219,22 @@ with gr.Blocks(title="AI 상권 분석 시스템 Pro", theme=gr.themes.Soft()) a
                 label="📍 분석 지역 선택 (최대 5개 권장)"
             )
             
-            load_btn = gr.Button("📊 데이터 로드", variant="primary", size="lg")
+            load_btn = gr.Button(
+                "📊 데이터 로드하기!",
+                variant="primary",
+                size="lg"
+            )
             
-            status_box = gr.Markdown("👈 지역을 선택하고 데이터를 로드하세요!")
-        
-        with gr.Column(scale=3):
+            with gr.Accordion("📜 로드 상태", open=True):
+                status_box = gr.Markdown(
+                    "👈 지역을 선택하고 데이터를 로드하세요!",
+                    elem_classes="info-log"
+                )
+        
+        # 오른쪽 컬럼 - 메인 콘텐츠
+        with gr.Column(scale=3, min_width=600):
             with gr.Tabs() as tabs:
+                # 탭 1: 인사이트 대시보드
                 with gr.Tab("📊 인사이트 대시보드", id=0) as tab1:
                     insights_content = gr.Column(visible=False)
                     
@@ -875,38 +1246,42 @@ with gr.Blocks(title="AI 상권 분석 시스템 Pro", theme=gr.themes.Soft()) a
                         gr.Markdown("### 📈 10가지 심층 상권 인사이트")
                         
                         with gr.Row():
-                            chart1 = gr.Plot(label="업종별 점포 수")
-                            chart2 = gr.Plot(label="대분류 분포")
+                            chart1 = gr.Plot(label="🏆 업종별 점포 수")
+                            chart2 = gr.Plot(label="📊 대분류 분포")
                         
                         with gr.Row():
-                            chart3 = gr.Plot(label="층별 분포")
-                            chart4 = gr.Plot(label="업종 다양성")
+                            chart3 = gr.Plot(label="🏢 층별 분포")
+                            chart4 = gr.Plot(label="🎨 업종 다양성")
                         
                         with gr.Row():
-                            chart5 = gr.Plot(label="프랜차이즈 분석")
-                            chart6 = gr.Plot(label="층 선호도")
+                            chart5 = gr.Plot(label="🏪 프랜차이즈 분석")
+                            chart6 = gr.Plot(label="📍 층 선호도")
                         
                         with gr.Row():
-                            chart7 = gr.Plot(label="지역 밀집도")
-                            chart8 = gr.Plot(label="업종 상관관계")
+                            chart7 = gr.Plot(label="🔥 지역 밀집도")
+                            chart8 = gr.Plot(label="🔗 업종 상관관계")
                         
                         with gr.Row():
-                            chart9 = gr.Plot(label="소분류 트렌드")
-                            chart10 = gr.Plot(label="지역 특화")
+                            chart9 = gr.Plot(label="🔍 소분류 트렌드")
+                            chart10 = gr.Plot(label="🎯 지역 특화")
                 
-                with gr.Tab("🤖 AI 분석 챗봇 (실시간 스트리밍 + 웹검색 ⚡🔍)", id=1) as tab2:
+                # 탭 2: AI 챗봇
+                with gr.Tab("🤖 AI 분석 챗봇 ⚡🔍", id=1) as tab2:
                     chat_content = gr.Column(visible=False)
                     
                     with chat_content:
                         gr.Markdown("""
-                        ### 💡 샘플 질문
-                        강남에서 카페 창업? | 치킨집 포화 지역? | 1층이 유리한 업종? | 프랜차이즈 점유율?
-                        
-                        ⚡ **스트리밍 모드**: AI 응답이 실시간으로 표시됩니다!
-                        🔍 **웹검색 자동**: 최신 상권 트렌드를 자동으로 검색하여 반영합니다!
+### 💡 예시 질문
+강남에서 카페 창업? | 치킨집 포화 지역? | 1층이 유리한 업종? | 프랜차이즈 점유율?
+
+⚡ **스트리밍**: AI 응답이 실시간으로 표시됩니다!
+🔍 **웹검색**: 최신 상권 트렌드를 자동 반영합니다!
                         """)
                         
-                        chatbot = gr.Chatbot(height=400, label="AI 상권 분석 어시스턴트")
+                        chatbot = gr.Chatbot(
+                            height=450, 
+                            label="AI 상권 분석 어시스턴트"
+                        )
                         
                         with gr.Row():
                             msg_input = gr.Textbox(
@@ -914,15 +1289,37 @@ with gr.Blocks(title="AI 상권 분석 시스템 Pro", theme=gr.themes.Soft()) a
                                 show_label=False,
                                 scale=4
                             )
-                            submit_btn = gr.Button("전송", variant="primary", scale=1)
+                            submit_btn = gr.Button("🚀 전송", variant="primary", scale=1)
                         
-                        # 샘플 버튼들
                         with gr.Row():
-                            sample_btn1 = gr.Button("강남에서 카페 창업?", size="sm")
-                            sample_btn2 = gr.Button("치킨집 포화 지역?", size="sm")
-                            sample_btn3 = gr.Button("1층이 유리한 업종?", size="sm")
-                            sample_btn4 = gr.Button("프랜차이즈 점유율?", size="sm")
+                            sample_btn1 = gr.Button("☕ 강남 카페 창업?", size="sm")
+                            sample_btn2 = gr.Button("🍗 치킨집 포화 지역?", size="sm")
+                            sample_btn3 = gr.Button("🏢 1층 유리한 업종?", size="sm")
+                            sample_btn4 = gr.Button("🏪 프랜차이즈 점유율?", size="sm")
     
+    # 사용 가이드
+    gr.Markdown("""
+---
+### 📖 사용 가이드
+1️⃣ 지역 선택 → 2️⃣ 데이터 로드 → 3️⃣ 10가지 인사이트 확인 또는 AI에게 질문!
+
+### 📊 제공되는 10가지 분석
+| 분석 항목 | 설명 |
+|----------|------|
+| 🏆 업종별 점포 수 | 가장 많은 업종 TOP 15 |
+| 📊 대분류 분포 | 소매/음식/서비스 등 비율 |
+| 🏢 층별 분포 | 지하/1층/상층 입지 분석 |
+| 🎨 업종 다양성 | 지역별 업종 다양성 지수 |
+| 🏪 프랜차이즈 분석 | 개인 vs 프랜차이즈 비율 |
+| 📍 층 선호도 | 업종별 선호 층수 |
+| 🔥 지역 밀집도 | 점포 수 상위 지역 |
+| 🔗 업종 상관관계 | 같이 나타나는 업종 패턴 |
+| 🔍 소분류 트렌드 | 세부 업종 분포 |
+| 🎯 지역 특화 | 각 지역의 특화 업종 |
+
+💡 **Tip**: API 키 없이도 10가지 시각화 분석과 기본 ���계를 확인할 수 있습니다!
+    """)
+
     # 이벤트 핸들러
     load_btn.click(
         fn=load_data,
@@ -933,7 +1330,7 @@ with gr.Blocks(title="AI 상권 분석 시스템 Pro", theme=gr.themes.Soft()) a
         outputs=[map_output, chart1, chart2, chart3, chart4, chart5, chart6, chart7, chart8, chart9, chart10]
     )
     
-    # 챗봇 이벤트 (스트리밍 모드)
+    # 챗봇 이벤트
     submit_btn.click(
         fn=chat_respond,
         inputs=[msg_input, chatbot],
@@ -959,49 +1356,11 @@ with gr.Blocks(title="AI 상권 분석 시스템 Pro", theme=gr.themes.Soft()) a
                 yield result
         return handler
     
-    sample_btn1.click(fn=create_sample_click("강남에서 카페 창업?"), inputs=[chatbot], outputs=[chatbot])
-    sample_btn2.click(fn=create_sample_click("치킨집 포화 지역?"), inputs=[chatbot], outputs=[chatbot])
-    sample_btn3.click(fn=create_sample_click("1층이 유리한 업종?"), inputs=[chatbot], outputs=[chatbot])
-    sample_btn4.click(fn=create_sample_click("프랜차이즈 점유율?"), inputs=[chatbot], outputs=[chatbot])
-    
-    gr.Markdown("""
-    ---
-    ### 📖 사용 가이드
-    1. 지역 선택 → 2. 데이터 로드 → 3. 10가지 인사이트 확인 또는 AI에게 질문
-    
-    ### 🔑 AI 챗봇 + 웹검색 활성화 방법
-    환경변수 설정:
-    ```bash
-    export FIREWORKS_API_KEY="your_api_key_here"
-    export BRAVE_API_KEY="your_brave_api_key_here"  # 웹검색 기능용 (선택)
-    ```
-    
-    Hugging Face Space에서는:
-    1. Settings 메뉴 클릭
-    2. Variables 탭 선택
-    3. New variable 추가: 
-       - `FIREWORKS_API_KEY` (필수 - AI 분석용)
-       - `BRAVE_API_KEY` (선택 - 웹검색 활성화용)
-    
-    🌐 **웹검색 기능**: BRAVE_API_KEY 설정 시 자동으로 최신 상권 트렌드를 검색하여 답변에 반영합니다!
-    
-    ### 📊 제공되는 10가지 분석
-    1. **업종별 점포 수**: 가장 많은 업종 TOP 15
-    2. **대분류 분포**: 소매/음식/서비스 등 대분류 비율
-    3. **층별 분포**: 지하/1층/상층 입지 분석
-    4. **업종 다양성**: 지역별 업종 다양성 지수
-    5. **프랜차이즈 분석**: 개인 vs 프랜차이즈 비율
-    6. **층 선호도**: 업종별 선호 층수
-    7. **지역 밀집도**: 점포 수 상위 지역
-    8. **업종 상관관계**: 같이 나타나는 업종 패턴
-    9. **소분류 트렌드**: 세부 업종 분포
-    10. **지역 특화**: 각 지역의 특화 업종
-    
-    💡 **Tip**: API 키 없이도 10가지 시각화 분석과 기본 통계를 확인할 수 있습니다!
-    
-    ⚡ **NEW!** 챗봇이 이제 실시간 스트리밍으로 응답합니다!
-    🔍 **NEW!** Brave Search 웹검색으로 최신 상권 트렌드를 자동 반영합니다!
-    """)
+    sample_btn1.click(fn=create_sample_click("강남에서 카페 창업하려면 어떻게 해야 하나요?"), inputs=[chatbot], outputs=[chatbot])
+    sample_btn2.click(fn=create_sample_click("치킨집이 가장 포화된 지역은 어디인가요?"), inputs=[chatbot], outputs=[chatbot])
+    sample_btn3.click(fn=create_sample_click("1층이 유리한 업종은 무엇인가요?"), inputs=[chatbot], outputs=[chatbot])
+    sample_btn4.click(fn=create_sample_click("프랜차이즈 점유율이 높은 업종은?"), inputs=[chatbot], outputs=[chatbot])
+
 
 # 실행
 if __name__ == "__main__":