/* 지점찾기 지도 — 구 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; }

/* ── /webmap 외부 임베드 데스크톱 반응형 (세션43b) ──────────────────────────────
   스코프 = .app.webmap (뷰 bodyClass, /webmap 에서만 부여) — /map 등 다른 페이지 무영향.
   모바일(<768px)은 기존 모바일 규칙 그대로, PC 는 전체폭 + 상단바 1줄 + 큰 지도. */
.app.webmap { max-width: none; background: #fff; }

@media (min-width: 768px) {
  /* 상단바: 검색 + 카테고리 탭을 한 줄로(지도 위 영역 절약) */
  .app.webmap #map-root { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-lg); padding: 0 var(--s-xl); }
  .app.webmap .map-search { flex: 1 1 320px; max-width: 480px; padding: var(--s-md) 0; background: transparent; }
  .app.webmap .map-cats { flex: 0 1 auto; padding: 0; background: transparent; }

  /* 지도: 남은 화면 전부(헤더 ~56px + 상단바 ~64px 제외), 모서리 없이 가장자리까지 */
  .app.webmap #map { flex: 1 1 100%; height: calc(100vh - 128px); min-height: 480px; }
  .app.webmap #map-root { padding-bottom: 0; }

  /* 검색 결과: 전폭 오버레이 → 좌측 고정 패널 */
  .app.webmap .map-results { left: var(--s-xl); right: auto; top: 72px; width: 380px; max-height: calc(100vh - 200px); }

  /* 지점 상세: 하단 바텀시트 → 우측 하단 카드 */
  .app.webmap .map-detail {
    left: auto; right: var(--s-2xl); bottom: var(--s-2xl); width: 400px; margin: 0;
    border-radius: var(--r-2xl); max-height: min(70vh, 640px);
  }
}

@media (min-width: 1280px) {
  .app.webmap #map-root { padding: 0 var(--s-2xl); }
  .app.webmap .map-results { left: var(--s-2xl); }
}