Update app.py

app.py

@@ -8,14 +8,13 @@ except:
     token = ""
     st.error("Settings에서 'HF_TOKEN'을 먼저 설정해주세요!")
 
-# 2. 페이지 설정 및 여백 제거
+# 2. 페이지 설정 (여백 제거)
 st.set_page_config(page_title="Drunken Plane", page_icon="🥃", layout="wide")
 
 st.markdown("""
     <style>
         .block-container { padding: 0 !important; margin: 0 !important; max-width: 100% !important; }
-        header { visibility: hidden; }
-        footer { visibility: hidden; }
+        header, footer { display: none !important; }
         iframe { height: 100vh !important; display: block; }
     </style>
 """, unsafe_allow_html=True)
@@ -33,126 +32,170 @@ html_code = f"""
     <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
 
     <style>
-        :root {{ --copper: #c5a059; --dark: #121212; --panel: #1e1e1e; --text: #e0e0e0; --bg: #000; }}
-        body {{ margin: 0; padding: 0; font-family: -apple-system, sans-serif; background-color: var(--bg); color: var(--text); overflow: hidden; }}
+        /* 기본 테마 */
+        :root {{ --copper: #c5a059; --dark: #121212; --bg: #000; --text: #e0e0e0; }}
+        body {{ margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: -apple-system, sans-serif; overflow: hidden; }}
+
+        /* 🏠 1. 랜딩 페이지 */
+        #landing-page {{
+            position: absolute; top: 0; left: 0; width: 100%; height: 100vh;
+            background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);
+            z-index: 3000; display: flex; flex-direction: column; align-items: center; justify-content: center;
+            transition: transform 0.4s ease-in-out;
+        }}
+        .logo-area {{ text-align: center; margin-bottom: 30px; }}
+        .app-title {{ font-size: 28px; font-weight: 900; color: var(--copper); letter-spacing: 2px; margin: 0; }}
         
-        #map {{ width: 100%; height: 100vh; position: absolute; top: 0; left: 0; z-index: 1; }}
+        .landing-search-box {{ width: 80%; max-width: 400px; margin-bottom: 30px; }}
+        .landing-input {{
+            width: 100%; padding: 15px; border-radius: 30px; border: 1px solid #333;
+            background: rgba(255,255,255,0.1); color: white; font-size: 16px; text-align: center;
+        }}
+        .landing-input:focus {{ outline: 2px solid var(--copper); background: rgba(255,255,255,0.15); }}
+
+        .landing-btn-group {{ display: flex; gap: 20px; }}
+        .landing-btn {{
+            background: transparent; border: 1px solid #333; color: var(--copper);
+            width: 100px; height: 100px; border-radius: 15px; cursor: pointer;
+            display: flex; flex-direction: column; align-items: center; justify-content: center;
+            transition: all 0.2s;
+        }}
+        .landing-btn:active {{ background: #222; transform: scale(0.95); }}
 
-        /* 상단 검색바 */
-        .top-bar {{
-            position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
-            width: 90%; max-width: 500px; z-index: 1000;
-            display: flex; gap: 10px;
+        /* 🗺️ 2. 지도 페이지 */
+        #map-page {{
+            position: absolute; top: 0; left: 0; width: 100%; height: 100vh;
+            transform: translateX(100%); transition: transform 0.4s ease-in-out;
+            z-index: 1000;
         }}
-        .search-input {{
-            flex: 1; padding: 12px 20px; border-radius: 30px; border: none;
-            background: rgba(20, 20, 20, 0.95); color: white; 
-            box-shadow: 0 4px 15px rgba(0,0,0,0.5); font-size: 16px;
-            backdrop-filter: blur(5px); border: 1px solid #333;
+        #map {{ width: 100%; height: 100%; }}
+
+        /* 상단 컨트롤 */
+        .map-top-bar {{
+            position: absolute; top: 20px; left: 0; width: 100%;
+            display: flex; justify-content: space-between; padding: 0 15px;
+            z-index: 2000; pointer-events: none;
+        }}
+        .back-btn {{
+            background: rgba(0,0,0,0.8); color: var(--copper); border: 1px solid var(--copper);
+            padding: 8px 15px; border-radius: 20px; font-weight: bold; cursor: pointer; pointer-events: auto;
         }}
-        .search-btn {{
-            width: 48px; height: 48px; border-radius: 50%; border: none;
-            background: var(--copper); color: #000; font-weight: bold; cursor: pointer;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; font-size: 20px;
+        .map-search-input {{
+            flex: 1; margin: 0 10px; background: rgba(0,0,0,0.8); border: 1px solid #444;
+            color: white; border-radius: 20px; padding: 0 15px; pointer-events: auto;
         }}
 
         /* 하단 컨트롤 */
-        .bottom-controls {{
-            position: absolute; bottom: 40px; left: 0; width: 100%; z-index: 1000;
-            padding: 0 15px; box-sizing: border-box;
-            display: flex; align-items: flex-end; justify-content: space-between; pointer-events: none;
+        .map-bottom-bar {{
+            position: absolute; bottom: 40px; left: 0; width: 100%;
+            display: flex; align-items: flex-end; justify-content: space-between;
+            padding: 0 15px; z-index: 2000; pointer-events: none;
         }}
-
-        .filter-scroller {{
-            display: flex; gap: 8px; overflow-x: auto; padding-bottom: 5px; 
-            pointer-events: auto; max-width: 80%; scrollbar-width: none;
+        
+        /* 필터 칩 */
+        .filter-scroll {{
+            display: flex; gap: 8px; overflow-x: auto; max-width: 75%;
+            pointer-events: auto; padding-bottom: 5px; scrollbar-width: none;
         }}
         .filter-chip {{
-            background: rgba(30, 30, 30, 0.95); color: #ccc; border: 1px solid #444;
-            padding: 10px 18px; border-radius: 25px; white-space: nowrap; cursor: pointer;
-            font-size: 0.9rem; font-weight: 600; transition: all 0.2s;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.4);
-        }}
-        .filter-chip.active {{
-            background: var(--copper); color: #000; border-color: var(--copper);
+            background: rgba(20,20,20,0.95); color: #bbb; border: 1px solid #444;
+            padding: 8px 16px; border-radius: 20px; font-size: 14px; white-space: nowrap; cursor: pointer;
         }}
+        .filter-chip.active {{ background: var(--copper); color: #000; border-color: var(--copper); font-weight: bold; }}
 
+        /* GPS 버튼 */
         .gps-btn {{
-            width: 56px; height: 56px; border-radius: 50%;
-            background: white; color: black; pointer-events: auto;
-            display: flex; justify-content: center; align-items: center;
-            font-size: 28px; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.5);
-            margin-left: 10px;
+            width: 50px; height: 50px; background: white; border-radius: 50%;
+            display: flex; justify-content: center; align-items: center; font-size: 24px;
+            cursor: pointer; pointer-events: auto; box-shadow: 0 4px 10px rgba(0,0,0,0.5);
         }}
 
         /* 리스트 패널 */
         .list-panel {{
-            position: absolute; bottom: 0; left: 0; width: 100%; max-height: 50vh;
-            background: rgba(20, 20, 20, 0.98); z-index: 1001;
-            border-top-left-radius: 25px; border-top-right-radius: 25px;
-            overflow-y: auto; padding: 25px; box-sizing: border-box;
-            transform: translateY(110%); transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
-            box-shadow: 0 -10px 30px rgba(0,0,0,0.7);
+            position: absolute; bottom: 0; left: 0; width: 100%; max-height: 45vh;
+            background: rgba(18,18,18,0.98); z-index: 2001;
+            border-top-left-radius: 20px; border-top-right-radius: 20px;
+            transform: translateY(110%); transition: transform 0.3s;
+            display: flex; flex-direction: column;
         }}
-        .panel-drag-handle {{ width: 40px; height: 5px; background: #444; margin: 0 auto 20px auto; border-radius: 10px; }}
+        .panel-header {{ padding: 15px; text-align: center; border-bottom: 1px solid #333; }}
+        .panel-content {{ overflow-y: auto; padding: 0 15px 30px 15px; }}
         
-        .place-item {{ padding: 15px 0; border-bottom: 1px solid #333; cursor: pointer; display: flex; align-items: flex-start; }}
-        .place-idx {{ font-size: 1.2rem; font-weight: 800; color: var(--copper); margin-right: 15px; min-width: 25px; }}
+        .place-item {{ padding: 15px 0; border-bottom: 1px solid #333; display: flex; cursor: pointer; }}
+        .place-idx {{ font-size: 1.2rem; font-weight: bold; color: var(--copper); margin-right: 15px; }}
         .place-info {{ flex: 1; }}
-        .place-name {{ font-size: 1.05rem; font-weight: bold; color: #fff; }}
-        .place-type {{ font-size: 0.75rem; color: #000; background: var(--copper); padding: 2px 8px; border-radius: 4px; font-weight: bold; margin-left: 8px; vertical-align: middle; }}
-        .place-reason {{ font-size: 0.9rem; color: #aaa; margin-top: 6px; line-height: 1.4; }}
-
-        /* 재검색 버튼 */
-        .rescan-pill {{
-            position: absolute; top: 90px; left: 50%; transform: translateX(-50%);
-            z-index: 999; background: white; color: black; border: none;
-            padding: 10px 20px; border-radius: 30px; font-weight: bold; font-size: 0.9rem;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.3); cursor: pointer; display: none;
-        }}
+        .place-name {{ color: white; font-weight: bold; }}
+        .place-sub {{ color: #888; font-size: 0.8rem; margin-top: 4px; }}
+        .place-reason {{ color: #ccc; font-size: 0.9rem; margin-top: 6px; line-height: 1.4; }}
 
         /* 로딩 */
         .loader {{
-            position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8);
-            z-index: 2000; display: none; flex-direction: column; justify-content: center; align-items: center; color: var(--copper);
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9);
+            z-index: 4000; display: none; justify-content: center; align-items: center; flex-direction: column; color: var(--copper);
         }}
-        .spinner {{ width: 40px; height: 40px; border: 4px solid #333; border-top: 4px solid var(--copper); border-radius: 50%; animation: spin 1s linear infinite; }}
+        .spinner {{ border: 3px solid #333; border-top: 3px solid var(--copper); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; }}
         @keyframes spin {{ 0% {{ transform: rotate(0deg); }} 100% {{ transform: rotate(360deg); }} }}
 
-        .gmap-btn {{ display: block; margin-top: 8px; text-decoration: none; color: #4285F4; font-size: 0.9rem; font-weight: bold; }}
+        .gmap-btn {{ display: block; margin-top: 8px; color: #4285F4; text-decoration: none; font-size: 0.9rem; font-weight: bold; }}
     </style>
 </head>
 <body>
 
-    <div id="map"></div>
+    <div id="landing-page">
+        <div class="logo-area">
+            <svg style="width:80px; height:80px; fill:#c5a059;" viewBox="0 0 24 24"><path d="M12,2A2,2 0 0,0 10,4V7H14V4A2,2 0 0,0 12,2M7,12V15C7,17.5 9,19.57 11.5,19.91V21H9V23H15V21H12.5V19.91C15,19.57 17,17.5 17,15V12H7M7,10H17V8H7V10Z"/></svg>
+            <h1 class="app-title">DRUNKEN PLANE</h1>
+            <p style="color:#666;">Global Alcohol Map</p>
+        </div>
 
-    <div class="top-bar">
-        <input type="text" id="search-input" class="search-input" placeholder="지역 검색 (예: 강남, Shinjuku)" onkeypress="if(event.key==='Enter') searchLocation()">
-        <button class="search-btn" onclick="searchLocation()">🔍</button>
+        <div class="landing-search-box">
+            <input type="text" id="landing-input" class="landing-input" placeholder="어디로 갈까요? (예: London, Tokyo)" onkeypress="if(event.key==='Enter') searchFromLanding()">
+        </div>
+
+        <div class="landing-btn-group">
+            <button class="landing-btn" onclick="findMe()">
+                <div style="font-size:30px;">🧭</div>
+                <div style="font-size:12px; font-weight:bold;">내 주변</div>
+            </button>
+            <button class="landing-btn" onclick="searchFromLanding()">
+                <div style="font-size:30px;">🔍</div>
+                <div style="font-size:12px; font-weight:bold;">검색</div>
+            </button>
+        </div>
     </div>
 
-    <button id="rescan-btn" class="rescan-pill" onclick="scanCurrentView()">🔄 이 지역에서 다시 찾기</button>
+    <div id="map-page">
+        <div id="map"></div>
 
-    <div class="bottom-controls">
-        <div class="filter-scroller">
-            <div class="filter-chip active" onclick="setFilter('All', this)">All</div>
-            <div class="filter-chip" onclick="setFilter('Whiskey', this)">Whiskey</div>
-            <div class="filter-chip" onclick="setFilter('Beer', this)">Beer</div>
-            <div class="filter-chip" onclick="setFilter('Wine', this)">Wine</div>
-            <div class="filter-chip" onclick="setFilter('Cocktail', this)">Cocktail</div>
+        <div class="map-top-bar">
+            <button class="back-btn" onclick="goHome()">🏠 HOME</button>
+            <input type="text" id="map-input" class="map-search-input" placeholder="다른 지역 검색..." onkeypress="if(event.key==='Enter') searchFromMap()">
+        </div>
+
+        <div class="map-bottom-bar">
+            <div class="filter-scroll">
+                <div class="filter-chip active" onclick="setFilter('All', this)">All</div>
+                <div class="filter-chip" onclick="setFilter('Whiskey', this)">Whiskey</div>
+                <div class="filter-chip" onclick="setFilter('Beer', this)">Beer</div>
+                <div class="filter-chip" onclick="setFilter('Wine', this)">Wine</div>
+                <div class="filter-chip" onclick="setFilter('Traditional', this)">Traditional</div>
+                <div class="filter-chip" onclick="setFilter('Cocktail', this)">Cocktail</div>
+            </div>
+            <div class="gps-btn" onclick="findMe()">🧭</div>
         </div>
-        <div class="gps-btn" onclick="findMe()">🧭</div>
-    </div>
 
-    <div id="list-panel" class="list-panel">
-        <div class="panel-drag-handle" onclick="closePanel()"></div>
-        <div style="font-size:1.1rem; font-weight:bold; color:var(--copper); margin-bottom:15px;">🏆 Top Recommendations</div>
-        <div id="place-list"></div>
+        <div id="list-panel" class="list-panel">
+            <div class="panel-header" onclick="closePanel()">
+                <div style="width:40px; height:4px; background:#444; margin:0 auto; border-radius:2px;"></div>
+                <div style="margin-top:10px; font-weight:bold; color:var(--copper)">🏆 AI 추천 리스트</div>
+            </div>
+            <div id="place-list" class="panel-content"></div>
+        </div>
     </div>
 
     <div id="loading" class="loader">
         <div class="spinner"></div>
-        <div id="loading-text" style="margin-top:20px; font-weight:bold;">SEARCHING...</div>
+        <div id="loading-text" style="margin-top:20px; font-weight:bold;">LOCATING...</div>
     </div>
 
     <script>
@@ -166,85 +209,121 @@ html_code = f"""
         let myLocMarker = null;
         let currentCategory = 'All';
 
-        map.on('moveend', () => {{
-            document.getElementById('rescan-btn').style.display = 'block';
-        }});
+        // 🏠 화면 전환
+        function goMap() {{
+            document.getElementById('landing-page').style.transform = 'translateX(-100%)';
+            document.getElementById('map-page').style.transform = 'translateX(0%)';
+            // 🔥 핵심: 화면 전환 후 지도 리사이즈를 해야 이동이 먹힘
+            setTimeout(() => {{ map.invalidateSize(); }}, 300);
+        }}
 
-        function setFilter(cat, el) {{
-            currentCategory = cat;
-            document.querySelectorAll('.filter-chip').forEach(c => c.classList.remove('active'));
-            el.classList.add('active');
-            scanCurrentView(); 
+        function goHome() {{
+            document.getElementById('landing-page').style.transform = 'translateX(0%)';
+            document.getElementById('map-page').style.transform = 'translateX(100%)';
+            closePanel();
         }}
 
+        // 🧭 GPS 내 위치 찾기 (지도 이동 보장)
         function findMe() {{
-            if (!navigator.geolocation) return alert("GPS 미지원 브라우저입니다.");
-            showLoading("내 위치 찾는 중...");
+            if (!navigator.geolocation) return alert("GPS 미지원");
+            showLoading("내 위치 확인 중...");
             
             navigator.geolocation.getCurrentPosition(
                 (pos) => {{
+                    goMap(); // 지도 화면으로 먼저 전환
                     const lat = pos.coords.latitude;
                     const lng = pos.coords.longitude;
-                    map.setView([lat, lng], 15);
-                    if (myLocMarker) map.removeLayer(myLocMarker);
-                    myLocMarker = L.circleMarker([lat, lng], {{ radius: 8, color: '#fff', fillColor: '#4285F4', fillOpacity: 1 }}).addTo(map).bindPopup("ME").openPopup();
-                    setTimeout(scanCurrentView, 500);
+                    
+                    // 🔥 지도 리사이즈 후 이동 (확실하게)
+                    setTimeout(() => {{
+                        map.invalidateSize();
+                        map.setView([lat, lng], 15);
+                        
+                        if(myLocMarker) map.removeLayer(myLocMarker);
+                        myLocMarker = L.circleMarker([lat, lng], {{ radius: 8, color: '#fff', fillColor: '#4285F4', fillOpacity: 1 }}).addTo(map).bindPopup("ME").openPopup();
+                        
+                        setTimeout(scanCurrentView, 500); // 이동 후 스캔
+                    }}, 400);
                 }},
-                () => {{ hideLoading(); alert("위치 권한이 필요합니다."); }}
+                () => {{ hideLoading(); alert("위치 권한을 켜주세요."); }}
             );
         }}
 
-        async function searchLocation() {{
-            const q = document.getElementById('search-input').value;
-            if(!q) return;
+        // 🔍 주소 검색 (지도 이동 보장)
+        async function runSearch(query) {{
             showLoading("지역 이동 중...");
-            document.getElementById('rescan-btn').style.display = 'none';
-            closePanel();
-
             try {{
-                const res = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${{q}}&limit=1`);
+                const res = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${{query}}&limit=1`);
                 const data = await res.json();
                 if(data.length > 0) {{
+                    goMap(); // 지도 화면 전환
                     const b = data[0].boundingbox;
-                    map.fitBounds([[b[0], b[2]], [b[1], b[3]]]);
-                    setTimeout(scanCurrentView, 1000);
-                }} else {{ alert("장소를 찾을 수 없습니다."); hideLoading(); }}
+                    
+                    // 🔥 지도 리사이즈 후 이동
+                    setTimeout(() => {{
+                        map.invalidateSize();
+                        // Nominatim bbox: [minLat, maxLat, minLon, maxLon]
+                        // Leaflet fitBounds: [[minLat, minLon], [maxLat, maxLon]]
+                        map.fitBounds([[b[0], b[2]], [b[1], b[3]]]);
+                        setTimeout(scanCurrentView, 800);
+                    }}, 400);
+                }} else {{ alert("장소 없음"); hideLoading(); }}
             }} catch(e) {{ alert("검색 오류"); hideLoading(); }}
         }}
 
+        function searchFromLanding() {{
+            const q = document.getElementById('landing-input').value;
+            if(q) runSearch(q);
+        }}
+        function searchFromMap() {{
+            const q = document.getElementById('map-input').value;
+            if(q) runSearch(q);
+        }}
+
+        // 🎛️ 필터
+        function setFilter(cat, el) {{
+            currentCategory = cat;
+            document.querySelectorAll('.filter-chip').forEach(c => c.classList.remove('active'));
+            el.classList.add('active');
+            scanCurrentView();
+        }}
+
+        // 📡 데이터 스캔
         async function scanCurrentView() {{
             showLoading(`'${{currentCategory}}' 장소 찾는 중...`);
-            document.getElementById('rescan-btn').style.display = 'none';
-            
+            closePanel();
+
             const b = map.getBounds();
             const bbox = `${{b.getSouth()}},${{b.getWest()}},${{b.getNorth()}},${{b.getEast()}}`;
 
             let query = "";
             if (currentCategory === 'Whiskey') {{
-                query = `node["amenity"~"bar|pub|lounge"](${{bbox}}); node["craft"="distillery"](${{bbox}}); node["shop"="alcohol"](${{bbox}});`;
+                query = `node["amenity"="bar"](${{bbox}}); node["craft"="distillery"](${{bbox}}); node["shop"="alcohol"](${{bbox}});`;
             }} else if (currentCategory === 'Beer') {{
                 query = `node["amenity"~"pub|biergarten"](${{bbox}}); node["craft"="brewery"](${{bbox}});`;
             }} else if (currentCategory === 'Wine') {{
                 query = `node["amenity"="wine_bar"](${{bbox}}); node["craft"="winery"](${{bbox}}); node["shop"="wine"](${{bbox}});`;
-            }} else if (currentCategory === 'Cocktail') {{
-                query = `node["amenity"~"bar|lounge"](${{bbox}});`;
+            }} else if (currentCategory === 'Traditional') {{
+                query = `node["shop"="alcohol"](${{bbox}}); node["craft"~"distillery|brewery"](${{bbox}});`;
             }} else {{
+                // All: 범위 넓게
                 query = `
                     node["craft"~"distillery|brewery|winery"](${{bbox}});
-                    node["amenity"~"bar|pub|biergarten|wine_bar"](${{bbox}});
+                    node["amenity"~"bar|pub|biergarten|wine_bar|lounge"](${{bbox}});
                     node["shop"~"alcohol|wine"](${{bbox}}); 
                 `;
             }}
-            
+
+            // 40개 제한
             const finalQuery = `[out:json][timeout:25]; ( ${{query}} ); out center 40;`; 
 
             try {{
                 const res = await fetch('https://overpass-api.de/api/interpreter?data=' + encodeURIComponent(finalQuery));
                 const data = await res.json();
                 
-                const banned = ['sauna', 'massage', 'spa', 'mart', 'convenience', '7-eleven', 'cu', 'gs25', 'supermarket', 'gym', 'bath'];
+                const banned = ['sauna', 'massage', 'spa', 'mart', 'convenience', '7-eleven', 'cu', 'gs25', 'supermarket', 'gym', 'bath', 'starbucks', 'coffee', 'cafe'];
                 
-                const places = data.elements.map(el => ({{
+                let places = data.elements.map(el => ({{
                     id: el.id, name: el.tags.name || "Unknown",
                     type: el.tags.amenity || el.tags.craft || el.tags.shop || "Venue",
                     lat: el.lat || el.center.lat, lng: el.lon || el.center.lon
@@ -253,28 +332,31 @@ html_code = f"""
                 .filter(p => !banned.some(b => p.name.toLowerCase().includes(b)));
 
                 if(places.length === 0) {{ 
-                    alert("이 화면 안에 관련된 장소가 없습니다. 지도를 움직여보세요."); 
+                    alert("이 화면 안에 관련된 술집이 없습니다."); 
                     hideLoading(); return; 
                 }}
                 
                 await rankWithAI(places);
 
-            }} catch(e) {{ alert("Scan Error"); hideLoading(); }}
+            }} catch(e) {{ 
+                console.error(e);
+                alert("데이터 로딩 실패"); hideLoading(); 
+            }}
         }}
 
+        // 🧠 AI 랭킹 (안전장치 포함)
         async function rankWithAI(places) {{
-            // 🔥 [수정 완료] 자바스크립트 변수 ${{places.length}} 로 표기
-            showLoading(`AI가 ${{places.length}}곳 중 Top 10 엄선 중...`);
+            showLoading(`AI가 ${{places.length}}곳 중 Best 10 선별 중...`);
 
             const listStr = places.map((p, i) => `${{i}}. ${{p.name}} (${{p.type}})`).join('\\n');
             const prompt = `
-            User wants: [${{currentCategory}}].
+            Context: User wants [${{currentCategory}}].
             Candidates:
             ${{listStr}}
 
             Task:
-            1. Select Top 10 places matching the category.
-            2. Strict filtering: Remove generic restaurants unless they are famous for alcohol.
+            1. Select Top 10 best places.
+            2. REJECT NON-ALCOHOL places (like Sauna, Massage, Cafe) strictly.
             3. Reason in Korean.
 
             JSON ONLY: [ {{ "index": 0, "reason": "Reason" }} ]
@@ -289,7 +371,8 @@ html_code = f"""
                 
                 const text = json[0].generated_text;
                 const start = text.indexOf('['); const end = text.lastIndexOf(']') + 1;
-                if(start === -1) throw new Error("AI JSON Fail");
+                
+                if(start === -1) throw new Error("JSON Parse Fail");
                 
                 const selection = JSON.parse(text.substring(start, end));
                 const finalPlaces = selection.map(s => ({{ ...places[s.index], reason: s.reason }})).slice(0, 10);
@@ -297,9 +380,9 @@ html_code = f"""
                 renderResults(finalPlaces);
 
             }} catch(e) {{
-                console.log("AI Fallback");
-                const fallbackPlaces = places.slice(0, 10).map(p => ({{...p, reason: "AI 연결 지연: 기본 추천"}}));
-                renderResults(fallbackPlaces);
+                // AI 실패시 안전장치: 거리순 10개 표시
+                const fallback = places.slice(0, 10).map(p => ({{...p, reason: "AI 연결 지연: 기본 데이터 표시"}}));
+                renderResults(fallback);
             }}
             hideLoading();
         }}
@@ -317,18 +400,19 @@ html_code = f"""
                     iconSize: [30, 30], iconAnchor: [15, 15]
                 }});
                 const gmap = `https://www.google.com/maps/search/?api=1&query=$${{encodeURIComponent(p.name)}}&query_place_id=${{p.lat}},${{p.lng}}`;
-                const popup = `<b>${{idx+1}}. ${{p.name}}</b><br><small>${{p.type}}</small><br>${{p.reason}}<br><a href="${{gmap}}" target="_blank" style="color:#4285F4; font-weight:bold;">🔗 구글맵</a>`;
+                const popup = `<b>${{idx+1}}. ${{p.name}}</b><br><small>${{p.type}}</small><br>${{p.reason}}<br><a href="${{gmap}}" target="_blank" class="gmap-btn">🔗 구글맵</a>`;
                 
                 const m = L.marker([p.lat, p.lng], {{icon: icon}}).addTo(map).bindPopup(popup);
                 markers.push(m);
 
                 const item = document.createElement('div');
                 item.className = 'place-item';
-                item.onclick = () => {{ map.setView([p.lat, p.lng], 16); m.openPopup(); closePanel(false); }};
+                item.onclick = () => {{ map.setView([p.lat, p.lng], 16); m.openPopup(); }};
                 item.innerHTML = `
                     <div class="place-idx">${{idx+1}}</div>
                     <div class="place-info">
-                        <div><span class="place-name">${{p.name}}</span> <span class="place-type">${{p.type}}</span></div>
+                        <div class="place-name">${{p.name}}</div>
+                        <div class="place-sub">${{p.type}}</div>
                         <div class="place-reason">${{p.reason}}</div>
                     </div>
                 `;
@@ -338,16 +422,18 @@ html_code = f"""
             document.getElementById('list-panel').style.transform = 'translateY(0%)';
         }}
 
-        function closePanel(fullClose = true) {{
-            const val = fullClose ? '110%' : '60%';
-            document.getElementById('list-panel').style.transform = `translateY(${{val}})`;
+        function closePanel() {{
+            document.getElementById('list-panel').style.transform = 'translateY(110%)';
         }}
 
         function showLoading(msg) {{ document.getElementById('loading').style.display = 'flex'; document.getElementById('loading-text').innerText = msg; }}
         function hideLoading() {{ document.getElementById('loading').style.display = 'none'; }}
         
         const style = document.createElement('style');
-        style.innerHTML = `@keyframes spin {{ 0% {{ transform: rotate(0deg); }} 100% {{ transform: rotate(360deg); }} }} .leaflet-popup-content-wrapper {{ background: #222; color: #eee; border: 1px solid var(--copper); }}`;
+        style.innerHTML = `
+            .leaflet-popup-content-wrapper {{ background: #222; color: #eee; border: 1px solid var(--copper); }}
+            .leaflet-popup-tip {{ background: var(--copper); }}
+        `;
         document.head.appendChild(style);
     </script>
 </body>