/*
 * 판매점 지도 /lotto/map · /pension/map · /speetto/map — 페이지 전용 배치 (디자인 시스템 §5.3, D4). 새 화면(v2)에서만 부른다
 * 모바일(<1024): 지도가 TopBar와 하단 탭바 사이를 채우고, 목록은 그 위 하단 시트(접힘 · 반쯤 · 크게 — data-state)
 * 데스크톱(≥1024): 왼쪽 420px 목록 + 오른쪽 지도. 지도 위 글자색은 지도 타일(밝은 바탕) 위라 다크 모드에서도 표면 토큰으로 대비를 지킨다
 */

/* ── 화면 틀: TopBar(높이 + 아래 선 1px) 아래 ~ 하단 탭바 위를 고정으로 채운다 (문서는 스크롤하지 않는다) ── */
.p-map {
  position: fixed; left: 0; right: 0;
  top: calc(var(--ft-topbar-h) + 1px);
  bottom: calc(var(--ft-bottomnav-h) + env(safe-area-inset-bottom));
  overflow: hidden; background: var(--ft-bg);
}
.p-map__map { position: absolute; inset: 0; }
.p-map__canvas { position: absolute; inset: 0; background: var(--ft-surface-2); }
.p-map__naver { width: 100%; height: 100%; } /* 네이버 지도 SDK가 이 상자에 position:relative·overflow:hidden을 박는다 */
/* base.css의 img·svg { display:block; max-width:100% }가 지도 타일·컨트롤을 줄이지 않게 */
.p-map__canvas img, .p-map__canvas svg { display: inline; max-width: none; }

.p-map__status {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 1;
  padding: var(--ft-space-2) var(--ft-space-3); border-radius: var(--ft-radius-md);
  background: var(--ft-surface); color: var(--ft-text-2); box-shadow: var(--ft-shadow-2);
  font-size: var(--ft-text-sm); line-height: var(--ft-lh-sm); text-align: center; max-width: calc(100% - 32px);
}

/* 지도 위 단추: [이 지역 다시 찾기](위 가운데) · [내 위치](오른쪽 위) · 범례(왼쪽 위) */
.p-map__research {
  position: absolute; left: 50%; top: var(--ft-space-3); transform: translateX(-50%); z-index: 2;
  border-radius: var(--ft-radius-full); box-shadow: var(--ft-shadow-2); background: var(--ft-surface);
}
.p-map__locate {
  position: absolute; right: var(--ft-space-3); top: var(--ft-space-3); z-index: 2;
  background: var(--ft-surface); color: var(--ft-text); box-shadow: var(--ft-shadow-2);
}
.p-map__locate:hover { background: var(--ft-surface-2); color: var(--ft-text); }
.p-map__locate[data-on="true"] { color: var(--ft-accent); }
.p-map__type { /* 일반 ↔ 위성 */
  position: absolute; right: var(--ft-space-3); top: calc(var(--ft-space-3) + var(--ft-touch) + var(--ft-space-2)); z-index: 2;
  min-width: var(--ft-touch); height: var(--ft-touch); padding: 0 var(--ft-space-2); border: 0; border-radius: var(--ft-radius-full);
  background: var(--ft-surface); color: var(--ft-text); box-shadow: var(--ft-shadow-2);
  font-size: var(--ft-text-xs); line-height: 1; font-weight: var(--ft-weight-bold);
}
.p-map__type[aria-pressed="true"] { background: var(--ft-text); color: var(--ft-surface); }
.p-map__zoom { /* 데스크톱 확대·축소 — 모바일(<1024)은 숨김(두 손가락) */
  position: absolute; right: var(--ft-space-3); top: calc(var(--ft-space-3) + (var(--ft-touch) + var(--ft-space-2)) * 2); z-index: 2;
  display: none; flex-direction: column; border-radius: var(--ft-radius-md); background: var(--ft-surface); box-shadow: var(--ft-shadow-2); overflow: hidden;
}
.p-map__zoom button {
  width: var(--ft-touch); height: var(--ft-touch); padding: 0; border: 0; background: none; color: var(--ft-text);
  font-size: var(--ft-text-lg); line-height: 1; font-weight: var(--ft-weight-semibold);
}
.p-map__zoom button + button { border-top: 1px solid var(--ft-border); }
.p-map__zoom button:hover { background: var(--ft-surface-2); }
.p-map__zoom button:focus-visible { outline: 2px solid var(--ft-focus); outline-offset: -2px; }
@media (min-width: 1024px) { .p-map__zoom:not([hidden]) { display: flex; } }
.p-map__type:focus-visible { outline: 2px solid var(--ft-focus); outline-offset: 2px; }
.p-map__locate:focus-visible, .p-map__research:focus-visible { outline: 2px solid var(--ft-focus); outline-offset: 2px; }
.p-map__legend {
  position: absolute; left: var(--ft-space-3); top: var(--ft-space-3); z-index: 2;
  display: flex; gap: var(--ft-space-2); padding: 4px var(--ft-space-2); border-radius: var(--ft-radius-full);
  background: var(--ft-surface); box-shadow: var(--ft-shadow-1);
  font-size: var(--ft-text-xs); line-height: var(--ft-lh-xs); font-weight: var(--ft-weight-semibold); color: var(--ft-text-2);
}
.p-map__legend li { display: inline-flex; align-items: center; gap: 4px; }
.p-map__key { width: 10px; height: 10px; border-radius: 50%; background: var(--ft-text-3); box-shadow: 0 0 0 1px var(--ft-surface); }
.p-map__key--1 { background: var(--ft-ball-1); box-shadow: inset 0 0 0 1px var(--ft-ball-edge); }
.p-map__key--2 { background: var(--ft-surface); box-shadow: inset 0 0 0 1.5px var(--ft-text-2); }
/* 모바일·태블릿: 범례는 시트 바로 위 왼쪽 (위쪽은 [이 지역 다시 찾기]·네이버 로고 자리). 시트 상태는 map.js가 .p-map[data-sheet]에 옮긴다 */
@media (max-width: 1023.98px) {
  .p-map__legend { top: auto; bottom: calc(44% + var(--ft-space-3)); }
  .p-map[data-sheet="peek"] .p-map__legend { bottom: calc(96px + var(--ft-space-3)); }
  .p-map[data-sheet="full"] .p-map__legend { display: none; }
}

/* ── 마커 (네이버 지도 HtmlIcon 내용 — map.js가 만든다). 크기 0 상자 + 안쪽 절대 위치 → 기준점 = 핀 끝 ── */
.p-map__mk { position: relative; width: 0; height: 0; }
.p-map__pin {
  position: absolute; left: 0; bottom: 6px; transform: translateX(-50%);
  display: inline-flex; align-items: center; height: 26px; padding: 0 8px; border-radius: 13px; white-space: nowrap; cursor: pointer;
  font-family: var(--ft-font); font-size: var(--ft-text-xs); line-height: 1; font-weight: var(--ft-weight-bold); font-variant-numeric: tabular-nums;
  background: var(--ft-surface); color: var(--ft-text); box-shadow: 0 1px 4px rgb(16 24 40 / 35%), inset 0 0 0 1px var(--ft-border-strong);
}
.p-map__pin::after { /* 꼬리 */
  content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%);
  border: 5px solid transparent; border-bottom: 0; border-top-color: var(--ft-surface);
}
.p-map__pin--1 { background: var(--ft-ball-1); color: var(--ft-ball-text); box-shadow: 0 1px 4px rgb(16 24 40 / 35%), inset 0 0 0 1px var(--ft-ball-edge); }
.p-map__pin--1::after { border-top-color: var(--ft-ball-1); }
.p-map__dot {
  position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; cursor: pointer;
  background: var(--ft-text-3); box-shadow: 0 0 0 2px var(--ft-surface), 0 1px 3px rgb(16 24 40 / 30%);
}
.p-map__dot::after { content: ""; position: absolute; inset: -8px; } /* 누르는 범위 28px */
.p-map__mk.is-selected .p-map__pin { box-shadow: 0 0 0 3px var(--ft-accent), 0 2px 8px rgb(16 24 40 / 40%); transform: translateX(-50%) scale(1.12); transform-origin: 50% 100%; }
.p-map__mk.is-selected .p-map__dot { background: var(--ft-accent); width: 18px; height: 18px; left: -9px; top: -9px; box-shadow: 0 0 0 3px var(--ft-surface), 0 0 0 5px var(--ft-accent); }
.p-map__group {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
  display: grid; place-items: center; min-width: 52px; padding: 6px 10px; border: 2px solid var(--ft-surface); border-radius: var(--ft-radius-full);
  background: var(--ft-accent); color: var(--ft-on-accent); box-shadow: var(--ft-shadow-2); cursor: pointer;
  font-family: var(--ft-font); line-height: 1.15; white-space: nowrap; text-align: center;
}
.p-map__group b { font-size: var(--ft-text-sm); font-weight: var(--ft-weight-bold); font-variant-numeric: tabular-nums; }
.p-map__group span { font-size: var(--ft-text-xs); font-weight: var(--ft-weight-semibold); }
.p-map__group:focus-visible { outline: 2px solid var(--ft-text); outline-offset: 2px; }
.p-map__me {
  position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--ft-accent); pointer-events: none;
  box-shadow: 0 0 0 3px var(--ft-surface), 0 0 0 8px var(--ft-accent-weak);
  box-shadow: 0 0 0 3px var(--ft-surface), 0 0 0 10px color-mix(in srgb, var(--ft-accent) 22%, transparent); /* 지원 안 되면 위 줄 */
}

.p-map__me--basis { background: var(--ft-surface); box-shadow: inset 0 0 0 4px var(--ft-text-2), 0 1px 4px rgb(16 24 40 / 35%); } /* 내 위치를 모를 때의 기준 위치 */

/* ── 목록 시트 ── */
.p-map__sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  height: 44%; min-height: 200px; max-height: 100%;
  transition: height var(--ft-dur) var(--ft-ease);
}
.p-map__sheet[data-state="peek"] { height: 96px; min-height: 0; }
.p-map__sheet[data-state="full"] { height: calc(100% - var(--ft-space-3)); }
.p-map__sheet[data-dragging] { transition: none; }
.p-map__sheet .ft-sheet__grip { height: 28px; position: relative; touch-action: none; }
.p-map__sheet .ft-sheet__grip::after { content: ""; position: absolute; inset: -16px 0 0; } /* 누르는 범위 44px — 위(시트 바깥)로만 넓힌다: 아래 찾기 단추를 가리지 않게 */
.p-map__sheet .ft-sheet__grip:focus-visible { outline: 2px solid var(--ft-focus); outline-offset: -4px; border-radius: var(--ft-radius-md); }
.p-map__sheet .ft-sheet__head { gap: var(--ft-space-2); padding-bottom: var(--ft-space-2); }
.p-map__sheet[data-state="peek"] .ft-sheet__head > :not(.p-map__sum) { display: none; }
.p-map__sheet .ft-sheet__body { overscroll-behavior: contain; }
.p-map__sheet .ft-sheet__body:focus { outline: none; }

.p-map__sum { display: flex; align-items: center; gap: var(--ft-space-2); min-height: var(--ft-touch); }
.p-map__title { flex: 1; min-width: 0; font-size: var(--ft-text-sm); line-height: var(--ft-lh-sm); color: var(--ft-text-2); font-weight: var(--ft-weight-regular); }
.p-map__title [data-ft-area] { color: var(--ft-text); font-size: var(--ft-text-md); font-weight: var(--ft-weight-bold); }
.p-map__title b { color: var(--ft-text); font-size: var(--ft-text-md); }
.p-map__sum .ft-iconbtn { margin-right: calc(var(--ft-space-2) * -1); flex: none; }
.p-map__sum .ft-iconbtn[aria-expanded="true"] { color: var(--ft-accent); background: var(--ft-accent-weak); }

/* 칩 묶음 여럿을 한 줄로 (가로 스크롤) — 묶음마다 하나만 고르기는 ft.js(.ft-chips 단위) */
.p-map__chips { display: flex; align-items: center; gap: var(--ft-space-2); overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--ft-card-pad) * -1); padding: 5px var(--ft-card-pad); } /* 위아래 5px = 칩 터치 영역(::after) */
.p-map__chips::-webkit-scrollbar { display: none; }
.p-map__chips .ft-chips { flex: none; overflow: visible; padding: 0; }
.p-map__sep { flex: none; width: 1px; height: 24px; background: var(--ft-border); }

.p-map__notice { align-items: center; min-height: 44px; padding-top: 4px; padding-bottom: 4px; }
.p-map__notice > span { flex: 1; min-width: 0; }
.p-map__notice > .ft-icon { margin-top: 0; }
.p-map__notice-btn {
  flex: none; min-height: 36px; padding: 0 var(--ft-space-2); border: 0; border-radius: var(--ft-radius-sm); background: none;
  color: var(--ft-accent); font-size: var(--ft-text-sm); font-weight: var(--ft-weight-semibold); text-decoration: underline; position: relative;
}
.p-map__notice-btn::after { content: ""; position: absolute; inset: -4px 0; }
.p-map__notice-btn:focus-visible { outline: 2px solid var(--ft-focus); outline-offset: 0; }
.p-map__notice--warning { background: var(--ft-warning-weak); color: var(--ft-warning); }

/* 지역·이름 찾기 */
.p-map__search { display: grid; gap: var(--ft-space-2); padding: var(--ft-space-1) 0; }
.p-map__search-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ft-space-2); }
.p-map__search .ft-btn--ghost { justify-self: start; }
.p-map__search .ft-input::-webkit-search-cancel-button { display: none; }

/* 목록 행 */
.p-map__list > li { position: relative; }
.p-map__loading { padding: var(--ft-space-6) var(--ft-card-pad); text-align: center; color: var(--ft-text-2); font-size: var(--ft-text-sm); }
.p-map__list[aria-busy="true"] > .ft-store { opacity: .55; } /* 다시 불러오는 동안 — 글자는 그대로 읽힌다 (투명도로 의미를 전하지 않음: aria-busy) */
.ft-store[aria-current="true"] { background: var(--ft-accent-weak); box-shadow: inset 3px 0 0 var(--ft-accent); }
.ft-store__wins:empty { display: none; }
.ft-store__name { margin: 0; font-size: var(--ft-text-md); line-height: var(--ft-lh-md); }
.ft-store__goto {
  display: inline; padding: 0; margin: 0; border: 0; background: none; text-align: left; cursor: pointer;
  font: inherit; font-weight: var(--ft-weight-bold); color: var(--ft-text); position: static;
}
.ft-store__goto::after { content: ""; position: absolute; inset: 0; } /* 행 어디를 눌러도 지도에서 보기 (길찾기·전화 단추는 위에 — z-index) */
.ft-store__goto:hover { color: var(--ft-accent); }
.ft-store__goto:focus-visible { outline: 2px solid var(--ft-focus); outline-offset: 2px; border-radius: var(--ft-radius-sm); }
.ft-store__dist { position: relative; z-index: 1; pointer-events: none; }
.ft-store__acts { position: relative; z-index: 1; flex-wrap: wrap; align-items: flex-start; pointer-events: none; } /* 단추 사이 빈 곳은 행(지도에서 보기)으로 */
.ft-store__acts > * { pointer-events: auto; }
.ft-store__route { position: static; }
.ft-store__route > summary { list-style: none; }
.ft-store__route > summary::-webkit-details-marker { display: none; }
.ft-store__route[open] > summary { background: var(--ft-surface-2); }
.ft-store__routes { display: flex; flex-wrap: wrap; gap: 0 var(--ft-space-1); margin-top: var(--ft-space-1); }
.ft-store__routes a {
  display: inline-flex; align-items: center; min-height: var(--ft-touch); padding: 0 var(--ft-space-2);
  font-size: var(--ft-text-sm); font-weight: var(--ft-weight-semibold); color: var(--ft-accent); text-decoration: underline;
}
.ft-store__routes a:focus-visible { outline: 2px solid var(--ft-focus); outline-offset: -2px; border-radius: var(--ft-radius-sm); }
.ft-store__acts .ft-btn--ghost:focus-visible, .ft-store__route > summary:focus-visible { outline: 2px solid var(--ft-focus); outline-offset: 2px; }

/* 쪽 단추 (화면 안에서 바뀌는 목록 — 링크 대신 단추, 모양은 ft-pager 그대로) */
.p-map__pager button {
  display: inline-flex; align-items: center; justify-content: center; min-width: var(--ft-touch); height: var(--ft-touch); padding: 0;
  border: 0; border-radius: var(--ft-radius-md); background: none; color: var(--ft-text-2);
  font-size: var(--ft-text-sm); font-weight: var(--ft-weight-semibold); font-variant-numeric: tabular-nums;
}
.p-map__pager button:hover:not([disabled]) { background: var(--ft-surface-2); color: var(--ft-text); }
.p-map__pager button[aria-current="page"] { background: var(--ft-text); color: var(--ft-surface); }
.p-map__pager button[disabled] { color: var(--ft-text-3); cursor: default; }
.p-map__pager button:focus-visible { outline: 2px solid var(--ft-focus); outline-offset: 2px; }
.p-map__pager .ft-pager__num { display: none; }
@media (min-width: 768px) { .p-map__pager .ft-pager__num { display: inline-flex; } }

.p-map__basis { padding: var(--ft-space-3) var(--ft-card-pad) var(--ft-space-6); font-size: var(--ft-text-xs); line-height: var(--ft-lh-xs); color: var(--ft-text-3); text-align: center; }

/* ── 데스크톱: 왼쪽 목록 420px + 오른쪽 지도 ── */
@media (min-width: 1024px) {
  .p-map { bottom: 0; display: grid; grid-template-columns: 420px minmax(0, 1fr); }
  .p-map__map { position: relative; inset: auto; grid-column: 2; grid-row: 1; }
  .p-map__sheet, .p-map__sheet[data-state] {
    position: relative; grid-column: 1; grid-row: 1; height: auto; min-height: 0;
    border-radius: 0; box-shadow: none; border-right: 1px solid var(--ft-border); transition: none;
  }
  .p-map__sheet .ft-sheet__grip { display: none; }
  .p-map__sheet .ft-sheet__head { padding-top: var(--ft-space-3); }
  .p-map__sheet[data-state="peek"] .ft-sheet__head > :not(.p-map__sum) { display: grid; }
  .p-map__sheet[data-state="peek"] .ft-sheet__head > .p-map__chips { display: flex; }
  .p-map__sheet[data-state="peek"] .ft-sheet__head > [hidden] { display: none; }
  .p-map__legend, .p-map[data-sheet] .p-map__legend { display: flex; top: auto; bottom: var(--ft-space-6); }
  .p-map__chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; row-gap: 10px; } /* 줄 사이 10px — 칩 터치 영역(위아래 5px)이 겹치지 않게 */
}