/* 지점찾기 지도 — 구 Webview css/map.css 반응형 이식 + 디자인토큰. */
#map-root { position: relative; }

/* 검색바 */
.map-search { display: flex; gap: var(--s-sm); padding: var(--s-md) var(--s-lg); background: #fff; }
.map-search input { flex: 1; padding: var(--s-md); border: 1px solid var(--c-border); border-radius: var(--r-md); font-size: var(--fs-body); outline: none; }
.map-search button { padding: 0 var(--s-lg); border: none; border-radius: var(--r-md); background: var(--c-primary); color: #fff; font-weight: 700; cursor: pointer; }

/* 카테고리 탭 — 가로 스크롤 */
.map-cats { display: flex; gap: var(--s-sm); overflow-x: auto; padding: 0 var(--s-lg) var(--s-md); background: #fff; -webkit-overflow-scrolling: touch; }
.map-cat { flex: 0 0 auto; padding: 6px 14px; border: 1px solid var(--c-border); border-radius: var(--r-pill); background: #fff; color: var(--c-muted); font-size: var(--fs-sm); white-space: nowrap; cursor: pointer; }
.map-cat.active { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* 지도 — 뷰포트에 맞춰 높이(데스크탑/모바일 분기) */
#map { width: 100%; height: 60vh; min-height: 360px; background: #e9e9e9; }
@media (min-width: 768px) { #map { height: 520px; } }
.map-fallback { padding: var(--s-2xl); text-align: center; color: var(--c-muted); }

/* 검색 결과 목록 — 지도 위 오버레이 */
.map-results { position: absolute; left: var(--s-lg); right: var(--s-lg); top: 116px; z-index: 20; margin: 0; padding: 0; list-style: none; max-height: 50vh; overflow-y: auto; background: #fff; border-radius: var(--r-lg); box-shadow: 0 4px 20px rgba(0,0,0,.18); }
.map-result { display: flex; flex-direction: column; gap: 2px; padding: var(--s-md) var(--s-lg); border-bottom: 1px solid var(--c-light); cursor: pointer; }
.map-result:last-child { border-bottom: none; }
.map-result strong { font-size: var(--fs-body); }
.map-result-area { font-size: var(--fs-sm); color: var(--c-muted); }
.map-result-empty { padding: var(--s-lg); text-align: center; color: var(--c-muted); }

/* 상세 패널 — 하단 바텀시트 */
.map-detail { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; max-width: 480px; margin: 0 auto; background: #fff; border-radius: var(--r-2xl) var(--r-2xl) 0 0; padding: var(--s-xl); box-shadow: 0 -4px 24px rgba(0,0,0,.2); max-height: 70vh; overflow-y: auto; }
.map-detail-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: none; border-radius: var(--r-round); background: var(--c-light); color: var(--c-text); font-size: 16px; cursor: pointer; }
.map-detail-img { width: 100%; height: auto; border-radius: var(--r-lg); margin-bottom: var(--s-md); }
.map-detail-head { display: flex; align-items: center; gap: var(--s-sm); margin-bottom: var(--s-sm); }
.map-detail-name { font-size: 17px; font-weight: 700; }
.map-detail-badge { font-size: var(--fs-xs); background: #fdecea; color: #c0392b; padding: 2px 8px; border-radius: var(--r-pill); }
.map-detail-row { font-size: var(--fs-sm); color: var(--c-text); margin: 4px 0; }
.map-detail-prices { margin-top: var(--s-md); border-top: 1px solid var(--c-light); padding-top: var(--s-md); }
.map-price { display: flex; justify-content: space-between; font-size: var(--fs-sm); padding: 3px 0; }
.map-price-label { color: var(--c-muted); }
.map-price-val { font-weight: 600; }