Update app.py

app.py

@@ -1,13 +1,13 @@
 import streamlit as st
 import streamlit.components.v1 as components
+import json
 
 # 1. 시크릿 토큰 확인
 try:
     token = st.secrets["HF_TOKEN"]
 except:
     token = ""
-    # 토큰 없을 때 경고창
-    st.error("🚨 HF_TOKEN이 설정되지 않았습니다! Space Settings에서 토큰을 추가해주세요.")
+    st.error("Settings에서 'HF_TOKEN'을 먼저 설정해주세요!")
 
 # 2. 페이지 설정
 st.set_page_config(page_title="Drunken Plane", page_icon="✈️", layout="wide")
@@ -20,7 +20,75 @@ st.markdown("""
     </style>
 """, unsafe_allow_html=True)
 
-# 3. HTML/JS 전체 코드
+# ---------------------------------------------------------
+# 💾 GLOBAL ALCOHOL HERITAGE DATABASE (전 세계 명소)
+# ---------------------------------------------------------
+PLACE_DB = {
+    "Malaysia 🇲🇾": [
+        {"name": "The Old Tuak House", "type": "Traditional Rice Wine", "lat": 3.147, "lon": 101.708, "desc": "보르네오 원주민의 영혼이 담긴 전통주 '투악' 전문점"},
+        {"name": "Heineken Malaysia Berhad", "type": "Brewery Tour", "lat": 3.085, "lon": 101.609, "desc": "타이거 맥주와 기네스가 생산되는 거대한 양조 현장"},
+        {"name": "Bar Trigona", "type": "World's 50 Best Bars", "lat": 3.155, "lon": 101.714, "desc": "말레이시아 토종 꿀을 사용하는 럭셔리 칵테일 바"},
+        {"name": "JungleBird", "type": "Rum Bar", "lat": 3.153, "lon": 101.621, "desc": "아시아 최고의 럼(Rum) 성지, 트로피컬 분위기"},
+        {"name": "Pahit", "type": "Gin Bar", "lat": 3.146, "lon": 101.708, "desc": "오래된 샵하우스를 개조한 감성적인 진(Gin) 전문 바"}
+    ],
+    "South Korea 🇰🇷": [
+        {"name": "Hwayo Distillery (Yeoju)", "type": "Soju Distillery", "lat": 37.294, "lon": 127.632, "desc": "한국 프리미엄 증류식 소주의 표준, 화요 양조장"},
+        {"name": "Sansawon (Kooksoondang)", "type": "Liquor Museum", "lat": 37.899, "lon": 127.279, "desc": "전통주 갤러리와 정원이 어우러진 산사원"},
+        {"name": "Jeju Beer Company", "type": "Craft Brewery", "lat": 33.364, "lon": 126.242, "desc": "제주의 맑은 물로 만드는 현대적인 수제 맥주 투어"},
+        {"name": "Boksoondoga", "type": "Makgeolli Brewery", "lat": 35.539, "lon": 129.106, "desc": "샴페인 같은 탄산 막걸리, 복순도가의 고향"}
+    ],
+    "Japan 🇯🇵": [
+        {"name": "Suntory Yamazaki Distillery", "type": "Whisky Distillery", "lat": 34.892, "lon": 135.674, "desc": "일본 위스키의 발상지이자 전설적인 야마자키 증류소"},
+        {"name": "Sapporo Beer Museum", "type": "Beer Museum", "lat": 43.071, "lon": 141.369, "desc": "훗카이도 붉은 벽돌 건물에서 즐기는 삿포로 맥주"},
+        {"name": "Sake Brewery District (Fushimi)", "type": "Sake District", "lat": 34.929, "lon": 135.761, "desc": "교토의 맑은 물과 쌀로 빚는 사케 양조장 거리"},
+        {"name": "Nikka Yoichi Distillery", "type": "Whisky Distillery", "lat": 43.186, "lon": 140.798, "desc": "스코틀랜드를 꿈꿨던 타케츠루의 혼이 담긴 요이치"}
+    ],
+    "Scotland 🏴󠁧󠁢󠁳󠁣󠁴󠁿": [
+        {"name": "The Macallan Distillery", "type": "Whisky Distillery", "lat": 57.484, "lon": -3.206, "desc": "위스키의 롤스로이스, 예술 작품 같은 증류소"},
+        {"name": "Laphroaig Distillery", "type": "Islay Whisky", "lat": 55.629, "lon": -6.153, "desc": "아일라 섬의 거친 바다와 피트 향을 품은 곳"},
+        {"name": "Glenfiddich Distillery", "type": "Speyside Whisky", "lat": 57.454, "lon": -3.128, "desc": "세계에서 가장 많이 팔리는 싱글몰트의 고향"},
+        {"name": "The Scotch Whisky Experience", "type": "Museum", "lat": 55.948, "lon": -3.195, "desc": "에든버러 성 옆에서 즐기는 위스키 인터랙티브 투어"}
+    ],
+    "Ireland 🇮🇪": [
+        {"name": "Guinness Storehouse", "type": "Stout Experience", "lat": 53.341, "lon": -6.286, "desc": "더블린 여행의 필수 코스, 기네스의 모든 것"},
+        {"name": "Jameson Distillery Bow St.", "type": "Irish Whiskey", "lat": 53.348, "lon": -6.277, "desc": "아이리쉬 위스키의 역사와 시음을 한 번에"},
+        {"name": "The Temple Bar", "type": "Historic Pub", "lat": 53.345, "lon": -6.264, "desc": "더블린에서 가장 상징적이고 활기찬 펍"}
+    ],
+    "France 🇫🇷": [
+        {"name": "Moët & Chandon", "type": "Champagne House", "lat": 49.043, "lon": 3.957, "desc": "샹파뉴 지역 지하 동굴에서 즐기는 돔 페리뇽"},
+        {"name": "Hennessy Maison", "type": "Cognac House", "lat": 45.694, "lon": -0.327, "desc": "세계 최고의 코냑, 헤네시의 심장부"},
+        {"name": "Cité du Vin", "type": "Wine Museum", "lat": 44.862, "lon": -0.550, "desc": "보르도에 위치한 압도적 규모의 와인 테마파크"}
+    ],
+    "Germany 🇩🇪": [
+        {"name": "Hofbräuhaus München", "type": "Historic Beer Hall", "lat": 48.137, "lon": 11.580, "desc": "뮌헨 옥토버페스트의 정신이 일년 내내 흐르는 곳"},
+        {"name": "Weihenstephan Brewery", "type": "Oldest Brewery", "lat": 48.395, "lon": 11.729, "desc": "서기 1040년에 시작된 세계에서 가장 오래된 양조장"}
+    ],
+    "Czech Republic 🇨🇿": [
+        {"name": "Pilsner Urquell Brewery", "type": "Pilsner Origin", "lat": 49.747, "lon": 13.388, "desc": "전 세계 라거 맥주의 원조, 필스너 우르켈 양조장"},
+        {"name": "U Fleků", "type": "Dark Beer Brewery", "lat": 50.078, "lon": 14.417, "desc": "프라하에서 500년 넘게 흑맥주를 만들어온 펍"}
+    ],
+    "USA 🇺🇸": [
+        {"name": "Jack Daniel's Distillery", "type": "Tennessee Whiskey", "lat": 35.284, "lon": -86.368, "desc": "미국 위스키의 자존심, 테네시 린치버그 투어"},
+        {"name": "Buffalo Trace Distillery", "type": "Bourbon Distillery", "lat": 38.217, "lon": -84.870, "desc": "버번 위스키의 살아있는 역사와 전설"},
+        {"name": "Robert Mondavi Winery", "type": "Napa Valley Wine", "lat": 38.427, "lon": -122.404, "desc": "캘리포니아 나파밸리 와인의 선구자"}
+    ],
+    "Mexico 🇲🇽": [
+        {"name": "Mundo Cuervo (Jose Cuervo)", "type": "Tequila Distillery", "lat": 20.878, "lon": -103.836, "desc": "데킬라 마을에서 경험하는 호세 쿠엘보의 모든 것"},
+        {"name": "La Capilla", "type": "Historic Bar", "lat": 20.876, "lon": -103.837, "desc": "세계 50대 바, 칵테일 '바탕가'의 발상지"}
+    ],
+    "Singapore 🇸🇬": [
+        {"name": "Long Bar (Raffles Hotel)", "type": "Historic Bar", "lat": 1.294, "lon": 103.854, "desc": "전설적인 칵테일 '싱가포르 슬링'이 탄생한 곳"},
+        {"name": "Atlas Bar", "type": "Gin Bar", "lat": 1.300, "lon": 103.858, "desc": "세계 최대 규모의 진 컬렉션을 보유한 화려한 바"}
+    ],
+    "Taiwan 🇹🇼": [
+        {"name": "Kavalan Distillery", "type": "Whisky Distillery", "lat": 24.711, "lon": 121.691, "desc": "세계 위스키 시장을 놀라게 한 대만의 자존심, 카발란"},
+        {"name": "Draft Land", "type": "Cocktail Tap Bar", "lat": 25.042, "lon": 121.548, "desc": "맥주처럼 탭에서 뽑아 마시는 혁신적인 칵테일 바"}
+    ]
+}
+
+db_json = json.dumps(PLACE_DB)
+
+# 4. HTML/JS 전체 코드
 html_code = f"""
 <!DOCTYPE html>
 <html>
@@ -36,101 +104,99 @@ html_code = f"""
         :root {{ --gold: #d4af37; --dark: #0a0a0a; --card-bg: #1c1c1c; --text: #e0e0e0; --accent: #c5a059; }}
         body {{ margin: 0; padding: 0; background: var(--dark); color: var(--text); font-family: 'Segoe UI', serif; overflow: hidden; }}
 
-        /* 🏠 1. 메인 화면 */
+        /* 🏠 메인 화면 */
         #main-page {{
             position: absolute; top: 0; left: 0; width: 100%; height: 100vh;
-            background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.9)), url('https://images.unsplash.com/photo-1516981879613-9f5da904015f?q=80&w=2560&auto=format&fit=crop');
+            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.95)), url('https://images.unsplash.com/photo-1516981879613-9f5da904015f?q=80&w=2560&auto=format&fit=crop');
             background-size: cover; background-position: center;
-            z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: center;
+            z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
+            padding-top: 50px; box-sizing: border-box;
             transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
         }}
         
-        .brand-logo {{ fill: var(--gold); width: 80px; height: 80px; margin-bottom: 10px; filter: drop-shadow(0 0 10px rgba(212,175,55,0.3)); }}
-        .brand-title {{ font-size: 32px; font-weight: 900; color: var(--gold); letter-spacing: 4px; margin: 0; text-transform: uppercase; text-shadow: 0 4px 20px rgba(0,0,0,0.8); }}
-        .brand-subtitle {{ font-size: 14px; color: #ccc; letter-spacing: 2px; margin-top: 5px; margin-bottom: 30px; font-weight: 300; }}
-
-        /* 국가 검색창 */
-        .search-container {{ width: 80%; max-width: 500px; position: relative; margin-bottom: 20px; }}
-        .country-input {{
-            width: 100%; padding: 15px 20px; background: rgba(0,0,0,0.6); 
-            border: 1px solid var(--gold); border-radius: 30px; color: white;
-            font-size: 16px; text-align: center; backdrop-filter: blur(5px);
-            transition: all 0.3s;
-        }}
-        .country-input:focus {{ outline: none; background: rgba(0,0,0,0.8); box-shadow: 0 0 15px rgba(212, 175, 55, 0.3); }}
-
-        /* 위치 감지 뱃지 */
-        .location-detect {{
-            background: rgba(255,255,255,0.1); backdrop-filter: blur(10px);
-            padding: 8px 20px; border-radius: 30px; border: 1px solid rgba(255,255,255,0.2);
-            color: #aaa; font-size: 13px; display: flex; align-items: center; gap: 8px; cursor: pointer;
-            margin-bottom: 40px; transition: 0.3s;
-        }}
-        .location-detect:hover {{ background: rgba(255,255,255,0.2); color: white; }}
+        .brand-header {{ text-align: center; margin-bottom: 20px; animation: fadeInDown 1s; }}
+        .brand-title {{ font-size: 28px; font-weight: 900; color: var(--gold); letter-spacing: 3px; margin: 0; text-transform: uppercase; text-shadow: 0 4px 20px rgba(0,0,0,0.8); }}
+        .brand-subtitle {{ font-size: 12px; color: #ccc; letter-spacing: 2px; margin-top: 5px; font-weight: 300; }}
+
+        @keyframes fadeInDown {{ from {{ opacity: 0; transform: translateY(-20px); }} to {{ opacity: 1; transform: translateY(0); }} }}
 
-        /* 🃏 큐레이션 카드 */
-        .curation-container {{ width: 100%; padding: 0 20px; box-sizing: border-box; }}
-        .curation-title {{ font-size: 18px; color: var(--gold); margin-bottom: 15px; font-weight: bold; border-left: 3px solid var(--gold); padding-left: 10px; }}
+        /* 국가 선택기 (가로 스크롤) */
+        .country-selector-wrapper {{ width: 100%; overflow: hidden; padding: 10px 0; background: rgba(0,0,0,0.3); backdrop-filter: blur(5px); }}
+        .country-selector {{
+            display: flex; gap: 10px; overflow-x: auto; padding: 0 20px; scrollbar-width: none;
+        }}
+        .country-selector::-webkit-scrollbar {{ display: none; }}
         
-        .card-scroll {{
-            display: flex; gap: 20px; overflow-x: auto; padding-bottom: 30px; scrollbar-width: none;
+        .country-btn {{
+            background: rgba(50,50,50,0.6); border: 1px solid #444; color: #aaa;
+            padding: 8px 16px; border-radius: 20px; cursor: pointer; white-space: nowrap; font-size: 14px;
+            transition: 0.3s;
         }}
-        .card-scroll::-webkit-scrollbar {{ display: none; }}
+        .country-btn.active {{ background: var(--gold); color: black; border-color: var(--gold); font-weight: 800; transform: scale(1.05); box-shadow: 0 0 15px rgba(212, 175, 55, 0.4); }}
 
-        .alcohol-card {{
-            min-width: 280px; background: var(--card-bg); border: 1px solid #333;
-            border-radius: 12px; padding: 25px; cursor: pointer; position: relative;
-            transition: transform 0.3s, border-color 0.3s; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+        /* 장소 리스트 (카드형) */
+        .place-list-container {{
+            width: 100%; max-width: 600px; flex: 1; overflow-y: auto; padding: 20px; box-sizing: border-box;
+        }}
+        .place-card {{
+            background: rgba(30,30,30,0.6); backdrop-filter: blur(10px);
+            border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 20px;
+            margin-bottom: 15px; cursor: pointer; transition: all 0.3s;
+            display: flex; flex-direction: column; position: relative; overflow: hidden;
         }}
-        .alcohol-card:hover {{ transform: translateY(-5px); border-color: var(--gold); }}
-        .card-korean {{ font-size: 22px; font-weight: bold; color: white; margin-bottom: 5px; }}
-        .card-english {{ font-size: 14px; color: var(--gold); font-style: italic; margin-bottom: 15px; display: block; }}
-        .card-desc {{ font-size: 13px; color: #aaa; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }}
-        .card-btn {{ margin-top: 20px; font-size: 12px; color: var(--gold); font-weight: bold; text-transform: uppercase; letter-spacing: 1px; text-align: right; }}
-
-        /* 🗺️ 2. 지도 및 컨텐츠 페이지 */
-        #map-view {{
+        .place-card::before {{ content:''; position: absolute; left: 0; top: 0; height: 100%; width: 4px; background: var(--gold); opacity: 0; transition: 0.3s; }}
+        .place-card:hover {{ transform: translateX(5px); background: rgba(40,40,40,0.8); border-color: var(--gold); }}
+        .place-card:hover::before {{ opacity: 1; }}
+        
+        .pc-header {{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }}
+        .pc-name {{ font-size: 18px; font-weight: bold; color: white; }}
+        .pc-type {{ font-size: 11px; background: var(--gold); color: black; padding: 2px 6px; border-radius: 4px; font-weight: bold; text-transform: uppercase; }}
+        .pc-desc {{ font-size: 13px; color: #ccc; line-height: 1.4; }}
+        .pc-cta {{ margin-top: 15px; font-size: 12px; color: var(--gold); text-align: right; font-weight: bold; letter-spacing: 1px; }}
+
+        /* 🗺️ 상세 화면 */
+        #detail-page {{
             position: absolute; top: 0; left: 0; width: 100%; height: 100vh;
-            transform: translateX(100%); transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-            z-index: 1000; display: flex; flex-direction: column;
+            transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
+            z-index: 6000; display: flex; flex-direction: column; background: #111;
         }}
         
         .nav-bar {{
-            height: 60px; background: #000; border-bottom: 1px solid #333;
-            display: flex; align-items: center; padding: 0 20px; justify-content: space-between; z-index: 2000;
+            height: 50px; background: rgba(0,0,0,0.9); border-bottom: 1px solid #333;
+            display: flex; align-items: center; padding: 0 15px; justify-content: space-between;
         }}
-        .back-btn {{ background: none; border: none; color: white; font-size: 24px; cursor: pointer; }}
-        .nav-title {{ color: var(--gold); font-weight: bold; font-size: 16px; text-transform: uppercase; }}
+        .back-btn {{ background: none; border: none; color: var(--gold); font-size: 24px; cursor: pointer; padding: 0; }}
+        .nav-title {{ color: white; font-weight: bold; font-size: 16px; }}
 
-        #map {{ width: 100%; height: 40%; border-bottom: 1px solid var(--gold); }}
+        #map {{ width: 100%; height: 35%; border-bottom: 2px solid var(--gold); }}
 
-        .blog-container {{
-            flex: 1; background: #111; overflow-y: auto; padding: 20px;
-            box-sizing: border-box; position: relative;
+        .report-container {{
+            flex: 1; overflow-y: auto; padding: 25px 20px 80px 20px; box-sizing: border-box;
         }}
         
-        .place-article {{
-            margin-bottom: 40px; border-bottom: 1px solid #333; padding-bottom: 30px;
-            animation: fadeIn 0.8s ease-out;
-        }}
-        @keyframes fadeIn {{ from {{ opacity: 0; transform: translateY(20px); }} to {{ opacity: 1; transform: translateY(0); }} }}
-
-        .place-title {{ font-size: 24px; color: var(--gold); font-weight: bold; margin-bottom: 5px; }}
-        .place-type {{ font-size: 12px; background: #333; color: #ccc; padding: 3px 8px; border-radius: 4px; display: inline-block; margin-bottom: 15px; }}
-        .place-content {{ font-size: 15px; color: #ddd; line-height: 1.8; white-space: pre-wrap; }}
-        .gmap-link {{
-            display: inline-block; margin-top: 15px; padding: 10px 20px;
-            background: var(--gold); color: black; text-decoration: none; font-weight: bold;
-            border-radius: 25px; font-size: 14px;
+        .report-title {{ font-size: 26px; color: var(--gold); font-weight: bold; margin-bottom: 5px; font-family: serif; }}
+        .report-meta {{ font-size: 13px; color: #666; margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 15px; }}
+        
+        .ai-content {{ font-size: 15px; color: #ddd; line-height: 1.8; white-space: pre-wrap; text-align: justify; }}
+        
+        .gmap-btn {{
+            display: block; width: 90%; margin: 0 auto; padding: 15px 0; 
+            background: var(--gold); color: black; text-align: center; 
+            font-weight: bold; text-decoration: none; border-radius: 30px;
+            position: fixed; bottom: 20px; left: 5%; z-index: 7000;
+            box-shadow: 0 5px 20px rgba(212, 175, 55, 0.4);
+            transition: transform 0.2s;
         }}
+        .gmap-btn:active {{ transform: scale(0.95); }}
 
-        /* 로딩 오버레이 */
+        /* 로딩 */
         .loading-screen {{
-            position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000;
-            z-index: 6000; display: none; flex-direction: column; justify-content: center; align-items: center;
+            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+            background: rgba(0,0,0,0.9); backdrop-filter: blur(5px);
+            z-index: 8000; display: none; flex-direction: column; justify-content: center; align-items: center;
         }}
-        .typewriter {{ font-family: monospace; color: var(--gold); font-size: 16px; margin-top: 20px; }}
-        .loader-ring {{ width: 50px; height: 50px; border: 2px solid #333; border-top: 2px solid var(--gold); border-radius: 50%; animation: spin 1s linear infinite; }}
+        .loader-ring {{ width: 50px; height: 50px; border: 3px solid #333; border-top: 3px solid var(--gold); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 20px; }}
+        .loader-text {{ color: var(--gold); font-family: monospace; font-size: 14px; text-align: center; line-height: 1.5; }}
         @keyframes spin {{ 0% {{ transform: rotate(0deg); }} 100% {{ transform: rotate(360deg); }} }}
 
     </style>
@@ -138,308 +204,187 @@ html_code = f"""
 <body>
 
     <div id="main-page">
-        <svg class="brand-logo" viewBox="0 0 24 24"><path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>
-        <h1 class="brand-title">DRUNKEN PLANE</h1>
-        <div class="brand-subtitle">THE ALCOHOL HERITAGE TOUR</div>
-
-        <div class="search-container">
-            <input type="text" id="country-search" class="country-input" placeholder="어느 나라로 떠날까요? (예: Malaysia)" onkeypress="if(event.key==='Enter') searchCountry()">
+        <div class="brand-header">
+            <h1 class="brand-title">DRUNKEN PLANE</h1>
+            <div class="brand-subtitle">GLOBAL ALCOHOL HERITAGE TOUR</div>
         </div>
 
-        <div id="location-box" class="location-detect" onclick="detectLocation()">
-            <span id="loc-spinner" class="loader-ring" style="width:15px; height:15px; border-width:1px; display:none;"></span>
-            <span id="loc-text">📍 내 위치(GPS) 기준으로 찾기</span>
+        <div class="country-selector-wrapper">
+            <div class="country-selector" id="country-tabs"></div>
         </div>
 
-        <div class="curation-container">
-            <div id="curation-header" class="curation-title">LOCAL HERITAGE</div>
-            <div id="card-list" class="card-scroll">
-                <div style="color:#666; padding:20px; font-size:0.9em;">
-                    국가를 검색하거나 내 위치를 눌러주세요.<br>
-                    Qwen AI가 해당 국가의 대표 명주와 투어 코스를 설계해드립니다.
-                </div>
-            </div>
-        </div>
+        <div class="place-list-container" id="place-list"></div>
     </div>
 
-    <div id="map-view">
+    <div id="detail-page">
         <div class="nav-bar">
-            <button class="back-btn" onclick="goBack()">←</button>
-            <div id="tour-title" class="nav-title">TOUR GUIDE</div>
-            <div style="width:24px;"></div>
+            <button class="back-btn" onclick="goBack()">← BACK</button>
+            <div class="nav-title">TOUR GUIDE</div>
+            <div style="width:40px;"></div>
         </div>
+        
         <div id="map"></div>
-        <div id="blog-feed" class="blog-container"></div>
+        
+        <div class="report-container">
+            <div id="repo-title" class="report-title"></div>
+            <div id="repo-meta" class="report-meta"></div>
+            <div id="repo-content" class="ai-content"></div>
+        </div>
+        
+        <a id="gmap-link" href="#" target="_blank" class="gmap-btn">🗺️ Google Maps에서 위치 확인</a>
     </div>
 
-    <div id="global-loader" class="loading-screen">
+    <div id="loader" class="loading-screen">
         <div class="loader-ring"></div>
-        <div id="loader-msg" class="typewriter">데이터 분석 중...</div>
+        <div id="loader-msg" class="loader-text">AI 여행작가가<br>현지 리포트를 작성 중입니다...</div>
     </div>
 
     <script>
         const HF_TOKEN = "{token}";
-        // 🔥 [중요 수정] 72B -> 32B 모델로 변경 (안정성 확보)
         const MODEL_ID = "Qwen/Qwen2.5-32B-Instruct";
         
+        // 파이썬에서 생성한 거대 DB 주입
+        const PLACE_DB = {db_json};
+        
         let map = null;
-        let currentLat = 0;
-        let currentLng = 0;
-        let targetCountry = "";
-        let targetCity = ""; 
-
-        // 1. 내 위치(GPS) 찾기
-        function detectLocation() {{
-            document.getElementById('loc-spinner').style.display = 'inline-block';
-            document.getElementById('loc-text').innerText = "위치 확인 중...";
-            
-            if (navigator.geolocation) {{
-                navigator.geolocation.getCurrentPosition(successGPS, failGPS);
-            }} else {{
-                failGPS();
-            }}
-        }}
-
-        function successGPS(pos) {{
-            currentLat = pos.coords.latitude;
-            currentLng = pos.coords.longitude;
-            
-            fetch(`https://nominatim.openstreetmap.org/reverse?format=json&lat=${{currentLat}}&lon=${{currentLng}}`)
-                .then(res => res.json())
-                .then(data => {{
-                    targetCity = data.address.city || data.address.town || "";
-                    targetCountry = data.address.country || "Unknown";
-                    
-                    document.getElementById('loc-spinner').style.display = 'none';
-                    document.getElementById('loc-text').innerText = `📍 ${{targetCity}}, ${{targetCountry}}`;
-                    document.getElementById('curation-header').innerText = `HERITAGE OF ${{targetCountry.toUpperCase()}}`;
-                    
-                    getRecommendationCards(targetCity, targetCountry);
-                }});
-        }}
-
-        function failGPS() {{
-            document.getElementById('loc-spinner').style.display = 'none';
-            document.getElementById('loc-text').innerText = "위치 확인 불가";
-            alert("위치 권한을 확인해주세요.");
-        }}
-
-        // 2. 국가 검색
-        async function searchCountry() {{
-            const query = document.getElementById('country-search').value;
-            if(!query) return;
-            
-            document.getElementById('loc-text').innerText = "📍 내 위치(GPS) 기준으로 찾기"; 
-            
-            const res = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${{query}}&limit=1`);
-            const data = await res.json();
-            
-            if(data.length > 0) {{
-                targetCountry = query; 
-                targetCity = ""; 
-                document.getElementById('curation-header').innerText = `HERITAGE OF ${{targetCountry.toUpperCase()}}`;
-                getRecommendationCards("", targetCountry);
-            }} else {{
-                alert("국가를 찾을 수 없습니다.");
-            }}
+        let currentMarker = null;
+
+        window.onload = function() {{
+            renderCountryTabs();
+            // GPS로 가까운 국가 찾기 기능 대신, 일단 첫번째 국가 자동 선택 (말레이시아)
+            const firstCountry = Object.keys(PLACE_DB)[0];
+            selectCountry(firstCountry);
+        }};
+
+        function renderCountryTabs() {{
+            const tabs = document.getElementById('country-tabs');
+            tabs.innerHTML = "";
+            Object.keys(PLACE_DB).forEach(country => {{
+                const btn = document.createElement('div');
+                btn.className = 'country-btn';
+                btn.innerText = country;
+                btn.id = `tab-${{country.replace(/ /g, "_")}}`; // ID 공백 제거
+                btn.onclick = () => selectCountry(country);
+                tabs.appendChild(btn);
+            }});
         }}
 
-        // 3. Qwen: 주류 카드 생성 (JSON 파싱 강화 & 에러 상세 출력)
-        async function getRecommendationCards(city, country) {{
-            const container = document.getElementById('card-list');
-            container.innerHTML = "<div style='color:#888; padding:20px;'>AI가 국가 데이터를 분석 중입니다...</div>";
+        function selectCountry(country) {{
+            // 탭 스타일
+            document.querySelectorAll('.country-btn').forEach(b => b.classList.remove('active'));
+            document.getElementById(`tab-${{country.replace(/ /g, "_")}}`).classList.add('active');
 
-            const context = city ? `City: ${{city}}, Country: ${{country}}` : `Country: ${{country}} (Nationwide Scope)`;
-            
-            const prompt = `
-            You are a luxury travel curator.
-            Context: ${{context}}.
-            Recommend 5 famous alcoholic beverages representing this region/country.
-            Focus on Tradition, Craft, and Heritage.
+            // 리스트 렌더링
+            const list = document.getElementById('place-list');
+            list.innerHTML = "";
             
-            Output strictly valid JSON only. No markdown.
-            [
-                {{
-                    "name_kr": "Name in Korean",
-                    "name_en": "Name in English",
-                    "desc": "Short description (2 sentences)",
-                    "search_query": "Keyword to find production sites"
-                }}
-            ]
-            `;
-            
-            try {{
-                const data = await callQwen(prompt);
-                renderCards(data);
-            }} catch(e) {{
-                console.error("AI Card Error:", e);
-                // 에러 메시지를 화면에 보여줌 (디버깅용)
-                container.innerHTML = `<div style='color:#ff5555; padding:20px;'>AI 연결 오류: ${{e.message}}<br>잠시 후 다시 시도해주세요.</div>`;
-            }}
-        }}
-
-        function renderCards(data) {{
-            const container = document.getElementById('card-list');
-            container.innerHTML = "";
-            
-            data.forEach(item => {{
+            PLACE_DB[country].forEach(place => {{
                 const card = document.createElement('div');
-                card.className = 'alcohol-card';
-                card.onclick = () => startTour(item);
+                card.className = 'place-card';
+                card.onclick = () => openDetail(place, country);
                 
                 card.innerHTML = `
-                    <div class="card-korean">${{item.name_kr}}</div>
-                    <span class="card-english">${{item.name_en}}</span>
-                    <div class="card-desc">${{item.desc}}</div>
-                    <div class="card-btn">EXPLORE TOUR →</div>
+                    <div class="pc-header">
+                        <span class="pc-name">${{place.name}}</span>
+                        <span class="pc-type">${{place.type}}</span>
+                    </div>
+                    <div class="pc-desc">${{place.desc}}</div>
+                    <div class="pc-cta">READ AI REPORT →</div>
                 `;
-                container.appendChild(card);
+                list.appendChild(card);
             }});
         }}
 
-        // 4. 투어 시작 (안정성 강화)
-        async function startTour(item) {{
-            document.getElementById('global-loader').style.display = 'flex';
-            document.getElementById('loader-msg').innerText = `'${{item.name_en}}' 명소 탐색 중...`;
-            document.getElementById('tour-title').innerText = item.name_en.toUpperCase();
+        async function openDetail(place, country) {{
+            // 화면 전환
+            document.getElementById('main-page').style.transform = 'translateX(-30%)';
+            document.getElementById('detail-page').style.transform = 'translateX(0%)';
+            document.getElementById('loader').style.display = 'flex';
+
+            // 기본 데이터 바인딩
+            document.getElementById('repo-title').innerText = place.name;
+            document.getElementById('repo-meta').innerText = `${{place.type}} • ${{country}}`;
+            document.getElementById('gmap-link').href = `https://www.google.com/maps/search/?api=1&query=${{place.lat}},${{place.lon}}`;
+            document.getElementById('repo-content').innerHTML = "";
 
-            const scope = targetCity ? `in/near ${{targetCity}}` : `in the entire country of ${{targetCountry}}`;
+            // 지도 설정 (100% 보장된 좌표 사용)
+            if (!map) {{
+                map = L.map('map');
+                L.tileLayer('https://{{s}}.tile.openstreetmap.org/{{z}}/{{x}}/{{y}}.png', {{ attribution: '© OpenStreetMap' }}).addTo(map);
+            }}
+            // 지도 리사이즈 필수 (화면 전환 후 깨짐 방지)
+            setTimeout(() => {{
+                map.invalidateSize();
+                map.setView([place.lat, place.lon], 15);
+                if (currentMarker) map.removeLayer(currentMarker);
+                currentMarker = L.marker([place.lat, place.lon]).addTo(map).bindPopup(place.name).openPopup();
+            }}, 300);
+
+            // AI 리포트 생성
+            await generateAIReport(place, country);
+        }}
+
+        async function generateAIReport(place, country) {{
+            const prompt = `
+            Act as a professional travel writer for 'Lonely Planet'.
+            Write a fascinating, detailed article about "${{place.name}}" in ${{country}}.
             
-            const listPrompt = `
-            Act as a travel guide ${{scope}}.
-            Find 3-5 SPECIFIC, REAL physical locations related to "${{item.search_query}}".
-            Prioritize: Distilleries, Breweries, Wineries, Museums.
-            Strictly NO generic bars.
+            Structure:
+            1. **History & Story**: Why is this place legendary? (Origin story)
+            2. **The Experience**: What exactly can a visitor drink, see, or smell here?
+            3. **Sommelier's Tip**: Best menu/drink to order or buy.
             
-            Output strictly valid JSON only. No markdown.
-            [
-                {{ "name": "Exact Name of Place", "type": "Distillery/Museum" }}
-            ]
+            Tone: Sophisticated, immersive, and informative.
+            Language: Korean (한국어).
+            Format: Clean text with paragraphs. No markdown bolding needed.
             `;
 
             try {{
-                const places = await callQwen(listPrompt);
-                
-                const verifiedPlaces = [];
-                for (const place of places) {{
-                    document.getElementById('loader-msg').innerText = `${{place.name}} 위치 확인 중...`;
-                    const searchQuery = `${{place.name}}, ${{targetCountry}}`;
-                    const coords = await getCoords(searchQuery);
-                    if (coords) verifiedPlaces.push({{ ...place, ...coords }});
-                }}
-
-                if (verifiedPlaces.length === 0) {{
-                    alert("정확한 위치를 찾을 수 없습니다.");
-                    document.getElementById('global-loader').style.display = 'none';
-                    return;
-                }}
-
-                const blogPrompt = `
-                Write a travel blog post (Korean) for these places:
-                ${{JSON.stringify(verifiedPlaces.map(p => p.name))}}
-                
-                For each, write: Meaning, Experience, Tips.
+                const res = await fetch(`https://api-inference.huggingface.co/models/${{MODEL_ID}}`, {{
+                    method: "POST",
+                    headers: {{ "Authorization": `Bearer ${{HF_TOKEN}}`, "Content-Type": "application/json" }},
+                    body: JSON.stringify({{ inputs: prompt, parameters: {{ max_new_tokens: 1500, return_full_text: false }} }})
+                }});
+                const json = await res.json();
                 
-                Output strictly valid JSON only. No markdown.
-                [
-                    {{ "name": "Place Name", "content": "Long text content..." }}
-                ]
-                `;
+                if(json.error) throw new Error(json.error);
+                const text = json[0].generated_text;
                 
-                document.getElementById('loader-msg').innerText = "가이드북 작성 중...";
-                const blogContent = await callQwen(blogPrompt, 1500);
-
-                const finalData = verifiedPlaces.map(place => {{
-                    const blog = blogContent.find(b => b.name === place.name);
-                    return {{ ...place, content: blog ? blog.content : "정보 없음" }};
-                }});
-
-                showMapView(finalData);
+                document.getElementById('loader').style.display = 'none';
+                typeWriter(text);
 
             }} catch(e) {{
-                console.error("Tour Error:", e);
-                alert("AI 연결 중 오류가 발생했습니다: " + e.message);
-                document.getElementById('global-loader').style.display = 'none';
+                console.error(e);
+                document.getElementById('loader').style.display = 'none';
+                document.getElementById('repo-content').innerHTML = `
+                    <div style="color:#aaa; padding:20px;">
+                        AI 리포터 연결이 지연되고 있습니다.<br>
+                        하지만 이곳은 <b>${{place.desc}}</b>로 유명한 명소입니다.<br>
+                        아래 구글맵 버튼을 눌러 직접 확인해보세요!
+                    </div>
+                `;
             }}
         }}
 
-        function showMapView(places) {{
-            document.getElementById('global-loader').style.display = 'none';
-            document.getElementById('main-page').style.transform = 'translateX(-100%)';
-            document.getElementById('map-view').style.transform = 'translateX(0%)';
-
-            if (!map) {{
-                map = L.map('map');
-                L.tileLayer('https://{{s}}.tile.openstreetmap.org/{{z}}/{{x}}/{{y}}.png', {{ attribution: '© OpenStreetMap' }}).addTo(map);
-            }}
+        function typeWriter(text) {{
+            const el = document.getElementById('repo-content');
+            let i = 0;
+            el.innerHTML = "";
+            const speed = 5; 
             
-            const bounds = [];
-            map.eachLayer(layer => {{ if (layer instanceof L.Marker) map.removeLayer(layer); }});
-
-            const blogContainer = document.getElementById('blog-feed');
-            blogContainer.innerHTML = "";
-
-            places.forEach((p, idx) => {{
-                const latlng = [p.lat, p.lon];
-                L.marker(latlng).addTo(map).bindPopup(`<b>${{p.name}}</b><br>${{p.type}}`).openPopup();
-                bounds.push(latlng);
-
-                const gmapUrl = `https://www.google.com/maps/search/?api=1&query=${{encodeURIComponent(p.name)}}`;
-                const article = document.createElement('div');
-                article.className = 'place-article';
-                article.innerHTML = `
-                    <div class="place-title">${{idx+1}}. ${{p.name}}</div>
-                    <div class="place-type">${{p.type}}</div>
-                    <div class="place-content">${{p.content}}</div>
-                    <a href="${{gmapUrl}}" target="_blank" class="gmap-link">Google Maps에서 길찾기</a>
-                `;
-                blogContainer.appendChild(article);
-            }});
-
-            if (bounds.length > 0) map.fitBounds(bounds, {{ padding: [50, 50] }});
+            function type() {{
+                if (i < text.length) {{
+                    el.innerHTML += text.charAt(i);
+                    i++;
+                    setTimeout(type, speed);
+                }}
+            }}
+            type();
         }}
 
         function goBack() {{
+            document.getElementById('detail-page').style.transform = 'translateX(100%)';
             document.getElementById('main-page').style.transform = 'translateX(0%)';
-            document.getElementById('map-view').style.transform = 'translateX(100%)';
-        }}
-
-        // 🔥 [JSON 파싱 로직 강화]
-        async function callQwen(prompt, maxTokens = 1000) {{
-            const res = await fetch(`https://api-inference.huggingface.co/models/${{MODEL_ID}}`, {{
-                method: "POST",
-                headers: {{ "Authorization": `Bearer ${{HF_TOKEN}}`, "Content-Type": "application/json" }},
-                body: JSON.stringify({{ inputs: prompt, parameters: {{ max_new_tokens: maxTokens, return_full_text: false }} }})
-            }});
-            
-            // 응답 코드 체크
-            if (!res.ok) {{
-                throw new Error(`HTTP Error ${{res.status}}: ${{res.statusText}}`);
-            }}
-
-            const json = await res.json();
-            
-            if (json.error) throw new Error(json.error);
-            let text = json[0].generated_text;
-            
-            // 마크다운 제거
-            text = text.replace(/```json/g, '').replace(/```/g, '').trim();
-            
-            const start = text.indexOf('[');
-            const end = text.lastIndexOf(']') + 1;
-            
-            if (start === -1) throw new Error("No Valid JSON found in AI response");
-            
-            return JSON.parse(text.substring(start, end));
-        }}
-
-        async function getCoords(query) {{
-            try {{
-                const res = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${{query}}&limit=1`);
-                const data = await res.json();
-                if (data.length > 0) return {{ lat: data[0].lat, lon: data[0].lon }};
-            }} catch(e) {{ return null; }}
-            return null;
         }}
 
     </script>