UX improvements: mobile bottom sheet, cuisine taxonomy, search enhancements

- Add BottomSheet component for Google Maps-style restaurant detail on mobile
  (3-snap drag: 40%/55%/92%, velocity-based close, backdrop overlay)
- Mobile map mode now full-screen with bottom sheet overlay for details
- Collapsible filter panel on mobile with active filter badge count
- Standardized cuisine taxonomy (46 categories: 한식|국밥, 일식|스시 etc.)
  with LLM remap endpoint and admin UI button
- Enhanced search: keyword search now includes foods_mentioned + video title
- Search results include channels array for frontend filtering
- Channel filter moved to frontend filteredRestaurants (not API-level)
- LLM extraction prompt updated for pipe-delimited region + cuisine taxonomy
- Vector rebuild endpoint with rich JSON chunks per restaurant
- Geolocation-based auto region selection on page load
- Desktop filters split into two clean rows

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/MapView.tsx

@@ -9,6 +9,7 @@ import {
   useMap,
 } from "@vis.gl/react-google-maps";
 import type { Restaurant } from "@/lib/api";
+import { getCuisineIcon } from "@/lib/cuisine-icons";
 
 const SEOUL_CENTER = { lat: 37.5665, lng: 126.978 };
 const API_KEY = process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || "";
@@ -37,16 +38,52 @@ function getChannelColorMap(restaurants: Restaurant[]) {
   return map;
 }
 
+export interface MapBounds {
+  north: number;
+  south: number;
+  east: number;
+  west: number;
+}
+
+export interface FlyTo {
+  lat: number;
+  lng: number;
+  zoom?: number;
+}
+
 interface MapViewProps {
   restaurants: Restaurant[];
   selected?: Restaurant | null;
   onSelectRestaurant?: (r: Restaurant) => void;
+  onBoundsChanged?: (bounds: MapBounds) => void;
+  flyTo?: FlyTo | null;
 }
 
-function MapContent({ restaurants, selected, onSelectRestaurant }: MapViewProps) {
+function MapContent({ restaurants, selected, onSelectRestaurant, onBoundsChanged, flyTo }: MapViewProps) {
   const map = useMap();
   const [infoTarget, setInfoTarget] = useState<Restaurant | null>(null);
   const channelColors = useMemo(() => getChannelColorMap(restaurants), [restaurants]);
+  const boundsTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Report bounds on idle (debounced)
+  useEffect(() => {
+    if (!map) return;
+    const listener = map.addListener("idle", () => {
+      if (boundsTimerRef.current) clearTimeout(boundsTimerRef.current);
+      boundsTimerRef.current = setTimeout(() => {
+        const b = map.getBounds();
+        if (b && onBoundsChanged) {
+          const ne = b.getNorthEast();
+          const sw = b.getSouthWest();
+          onBoundsChanged({ north: ne.lat(), south: sw.lat(), east: ne.lng(), west: sw.lng() });
+        }
+      }, 300);
+    });
+    return () => {
+      google.maps.event.removeListener(listener);
+      if (boundsTimerRef.current) clearTimeout(boundsTimerRef.current);
+    };
+  }, [map, onBoundsChanged]);
 
   const handleMarkerClick = useCallback(
     (r: Restaurant) => {
@@ -56,6 +93,13 @@ function MapContent({ restaurants, selected, onSelectRestaurant }: MapViewProps)
     [onSelectRestaurant]
   );
 
+  // Fly to a specific location (region filter)
+  useEffect(() => {
+    if (!map || !flyTo) return;
+    map.panTo({ lat: flyTo.lat, lng: flyTo.lng });
+    if (flyTo.zoom) map.setZoom(flyTo.zoom);
+  }, [map, flyTo]);
+
   // Pan and zoom to selected restaurant
   useEffect(() => {
     if (!map || !selected) return;
@@ -98,6 +142,7 @@ function MapContent({ restaurants, selected, onSelectRestaurant }: MapViewProps)
                   textDecoration: isClosed ? "line-through" : "none",
                 }}
               >
+                <span style={{ marginRight: 3 }}>{getCuisineIcon(r.cuisine_type)}</span>
                 {r.name}
               </div>
               <div
@@ -122,7 +167,7 @@ function MapContent({ restaurants, selected, onSelectRestaurant }: MapViewProps)
         >
           <div style={{ backgroundColor: "#ffffff", color: "#171717", colorScheme: "light" }} className="max-w-xs p-1">
             <div className="flex items-center gap-2">
-              <h3 className="font-bold text-base" style={{ color: "#171717" }}>{infoTarget.name}</h3>
+              <h3 className="font-bold text-base" style={{ color: "#171717" }}>{getCuisineIcon(infoTarget.cuisine_type)} {infoTarget.name}</h3>
               {infoTarget.business_status === "CLOSED_PERMANENTLY" && (
                 <span className="px-1.5 py-0.5 bg-red-100 text-red-700 rounded text-[10px] font-semibold">폐업</span>
               )}
@@ -163,7 +208,7 @@ function MapContent({ restaurants, selected, onSelectRestaurant }: MapViewProps)
   );
 }
 
-export default function MapView({ restaurants, selected, onSelectRestaurant }: MapViewProps) {
+export default function MapView({ restaurants, selected, onSelectRestaurant, onBoundsChanged, flyTo }: MapViewProps) {
   const channelColors = useMemo(() => getChannelColorMap(restaurants), [restaurants]);
   const channelNames = useMemo(() => Object.keys(channelColors), [channelColors]);
 
@@ -180,6 +225,8 @@ export default function MapView({ restaurants, selected, onSelectRestaurant }: M
           restaurants={restaurants}
           selected={selected}
           onSelectRestaurant={onSelectRestaurant}
+          onBoundsChanged={onBoundsChanged}
+          flyTo={flyTo}
         />
       </Map>
       {channelNames.length > 1 && (