모바일 필터 UI pill 스타일로 개선

- select를 둥근 칩(pill) 형태로 변경 (아이콘 + 드롭다운 화살표)
- 선택 시 브랜드 컬러 배경 + 링 하이라이트
- 장르/가격/지역 필터 모두 동일 스타일 적용

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

frontend/src/app/page.tsx

@@ -957,37 +957,49 @@ export default function Home() {
           <div className="space-y-1.5">
             {/* Line 1: 음식 장르 + 가격 + 결과수 */}
             <div className="flex items-center gap-1.5 text-xs">
+              <div className={`relative inline-flex items-center rounded-full px-3 py-1.5 ${
+                cuisineFilter ? "bg-brand-50 dark:bg-brand-900/30 ring-1 ring-brand-300 dark:ring-brand-700" : "bg-gray-100 dark:bg-gray-800"
+              }`}>
+                <Icon name="restaurant" size={14} className={`mr-1 ${cuisineFilter ? "text-brand-500" : "text-gray-400"}`} />
                 <select
                   value={cuisineFilter}
                   onChange={(e) => { setCuisineFilter(e.target.value); if (e.target.value) setBoundsFilterOn(false); }}
-                className={`border dark:border-gray-700 rounded-lg px-2 py-1 bg-white dark:bg-gray-800 ${
+                  className={`bg-transparent border-none outline-none appearance-none pr-4 cursor-pointer ${
-                  cuisineFilter ? "text-brand-600 dark:text-brand-400 border-brand-300 dark:border-brand-700" : "text-gray-500 dark:text-gray-400"
+                    cuisineFilter ? "text-brand-600 dark:text-brand-400 font-medium" : "text-gray-500 dark:text-gray-400"
                   }`}
                 >
-                <option value="">🍽 장르</option>
+                  <option value="">장르</option>
                   {CUISINE_TAXONOMY.map((g) => (
                     <optgroup key={g.category} label={`── ${g.category} ──`}>
                       <option value={g.category}>{g.category} 전체</option>
                       {g.items.map((item) => (
                         <option key={`${g.category}|${item}`} value={`${g.category}|${item}`}>
-                        &nbsp;&nbsp;{item}
+                          {item}
                         </option>
                       ))}
                     </optgroup>
                   ))}
                 </select>
+                <Icon name="expand_more" size={14} className="absolute right-2 text-gray-400 pointer-events-none" />
+              </div>
+              <div className={`relative inline-flex items-center rounded-full px-3 py-1.5 ${
+                priceFilter ? "bg-brand-50 dark:bg-brand-900/30 ring-1 ring-brand-300 dark:ring-brand-700" : "bg-gray-100 dark:bg-gray-800"
+              }`}>
+                <Icon name="payments" size={14} className={`mr-1 ${priceFilter ? "text-brand-500" : "text-gray-400"}`} />
                 <select
                   value={priceFilter}
                   onChange={(e) => { setPriceFilter(e.target.value); if (e.target.value) setBoundsFilterOn(false); }}
-                className={`border dark:border-gray-700 rounded-lg px-2 py-1 bg-white dark:bg-gray-800 ${
+                  className={`bg-transparent border-none outline-none appearance-none pr-4 cursor-pointer ${
-                  priceFilter ? "text-brand-600 dark:text-brand-400 border-brand-300 dark:border-brand-700" : "text-gray-500 dark:text-gray-400"
+                    priceFilter ? "text-brand-600 dark:text-brand-400 font-medium" : "text-gray-500 dark:text-gray-400"
                   }`}
                 >
-                <option value="">💰 가격</option>
+                  <option value="">가격</option>
                   {PRICE_GROUPS.map((g) => (
                     <option key={g.label} value={g.label}>{g.label}</option>
                   ))}
                 </select>
+                <Icon name="expand_more" size={14} className="absolute right-2 text-gray-400 pointer-events-none" />
+              </div>
               {(cuisineFilter || priceFilter) && (
                 <button onClick={() => { setCuisineFilter(""); setPriceFilter(""); }} className="text-gray-400 hover:text-brand-500">
                   <Icon name="close" size={14} />
@@ -997,24 +1009,33 @@ export default function Home() {
             </div>
             {/* Line 2: 나라 + 시 + 구 + 내위치 */}
             <div className="flex items-center gap-1.5 text-xs">
+              <div className={`relative inline-flex items-center rounded-full px-3 py-1.5 ${
+                countryFilter ? "bg-brand-50 dark:bg-brand-900/30 ring-1 ring-brand-300 dark:ring-brand-700" : "bg-gray-100 dark:bg-gray-800"
+              }`}>
+                <Icon name="public" size={14} className={`mr-1 ${countryFilter ? "text-brand-500" : "text-gray-400"}`} />
                 <select
                   value={countryFilter}
                   onChange={(e) => handleCountryChange(e.target.value)}
-                className={`border dark:border-gray-700 rounded-lg px-2 py-1 bg-white dark:bg-gray-800 ${
+                  className={`bg-transparent border-none outline-none appearance-none pr-4 cursor-pointer ${
-                  countryFilter ? "text-brand-600 dark:text-brand-400 border-brand-300 dark:border-brand-700" : "text-gray-500 dark:text-gray-400"
+                    countryFilter ? "text-brand-600 dark:text-brand-400 font-medium" : "text-gray-500 dark:text-gray-400"
                   }`}
                 >
-                <option value="">🌍 나라</option>
+                  <option value="">나라</option>
                   {countries.map((c) => (
                     <option key={c} value={c}>{c}</option>
                   ))}
                 </select>
+                <Icon name="expand_more" size={14} className="absolute right-2 text-gray-400 pointer-events-none" />
+              </div>
               {countryFilter && cities.length > 0 && (
+                <div className={`relative inline-flex items-center rounded-full px-3 py-1.5 ${
+                  cityFilter ? "bg-brand-50 dark:bg-brand-900/30 ring-1 ring-brand-300 dark:ring-brand-700" : "bg-gray-100 dark:bg-gray-800"
+                }`}>
                   <select
                     value={cityFilter}
                     onChange={(e) => handleCityChange(e.target.value)}
-                  className={`border dark:border-gray-700 rounded-lg px-2 py-1 bg-white dark:bg-gray-800 ${
+                    className={`bg-transparent border-none outline-none appearance-none pr-4 cursor-pointer ${
-                    cityFilter ? "text-brand-600 dark:text-brand-400 border-brand-300 dark:border-brand-700" : "text-gray-500 dark:text-gray-400"
+                      cityFilter ? "text-brand-600 dark:text-brand-400 font-medium" : "text-gray-500 dark:text-gray-400"
                     }`}
                   >
                     <option value="">시/도</option>
@@ -1022,13 +1043,18 @@ export default function Home() {
                       <option key={c} value={c}>{c}</option>
                     ))}
                   </select>
+                  <Icon name="expand_more" size={14} className="absolute right-2 text-gray-400 pointer-events-none" />
+                </div>
               )}
               {cityFilter && districts.length > 0 && (
+                <div className={`relative inline-flex items-center rounded-full px-3 py-1.5 ${
+                  districtFilter ? "bg-brand-50 dark:bg-brand-900/30 ring-1 ring-brand-300 dark:ring-brand-700" : "bg-gray-100 dark:bg-gray-800"
+                }`}>
                   <select
                     value={districtFilter}
                     onChange={(e) => handleDistrictChange(e.target.value)}
-                  className={`border dark:border-gray-700 rounded-lg px-2 py-1 bg-white dark:bg-gray-800 ${
+                    className={`bg-transparent border-none outline-none appearance-none pr-4 cursor-pointer ${
-                    districtFilter ? "text-brand-600 dark:text-brand-400 border-brand-300 dark:border-brand-700" : "text-gray-500 dark:text-gray-400"
+                      districtFilter ? "text-brand-600 dark:text-brand-400 font-medium" : "text-gray-500 dark:text-gray-400"
                     }`}
                   >
                     <option value="">구/군</option>
@@ -1036,6 +1062,8 @@ export default function Home() {
                       <option key={d} value={d}>{d}</option>
                     ))}
                   </select>
+                  <Icon name="expand_more" size={14} className="absolute right-2 text-gray-400 pointer-events-none" />
+                </div>
               )}
               {countryFilter && (
                 <button onClick={() => { setCountryFilter(""); setCityFilter(""); setDistrictFilter(""); setRegionFlyTo(null); }} className="text-gray-400 hover:text-brand-500">