/* 담당: store — 매장 찾기·매장 상세 화면. 클래스 접두어 .store- 만. 색·간격은 var(--토큰) 만(hex 금지).
   약도는 lib/ui.php map_svg()·map_legend() + site.css .dmap* 를 그대로 쓰고, 필터·목록 연동 등은 이 파일과 public/assets/js/store.js 에. */

.store-page { padding-bottom: var(--sp-7); }
.store-page .cta-band { margin-top: var(--sp-7); }
.store-gap { margin-top: var(--sp-4); }
.store-gap-b { margin-bottom: var(--sp-4); }
.store-center { text-align: center; }

/* ── 매장 찾기: 필터 ───────────────────────── */
.store-app { position: relative; }
.store-app[aria-busy="true"] .store-split { opacity: .6; transition: opacity var(--t-short) var(--ease); }
.store-filter { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.store-filter-region { display: flex; align-items: flex-start; gap: var(--sp-3); flex-wrap: wrap; }
.store-filter-region .field { flex: 0 1 14rem; min-width: 10rem; }
.store-filter-region .field > label { font-size: var(--fs-sm); }
.store-filter-apply { margin-top: calc(var(--fs-sm) * 1.5 + var(--sp-2)); }
.js-store .store-filter-apply { display: none; }
.store-kinds { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.store-kinds .chip { min-height: 2.588rem; font-size: var(--fs-sm); }
.store-kinds .lg { width: .94rem; height: .94rem; margin-top: 0; }
.store-kinds .lg-area { border-width: 1.5px; }
.store-chip-n { min-width: 1.4rem; padding: 0 .35rem; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-xs); text-align: center; }
.chip[aria-current="page"] .store-chip-n { background: var(--night-2); color: var(--on-night); }
.chip[aria-current="page"] .lg-soon { background: var(--night); box-shadow: inset 0 0 0 3px var(--on-night); }

.store-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-5) 0 var(--sp-3); }
.store-total { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; color: var(--ink-2); }
.store-total strong { font-size: var(--fs-h4); font-weight: 850; color: var(--accent-ink); }
.store-total-cond { display: inline-flex; align-items: center; min-height: 1.647rem; padding: 0 .6rem; border-radius: var(--r-pill); background: var(--surface-2); font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.store-reset { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); font-size: var(--fs-sm); }

/* ── 매장 찾기: 약도 + 목록 ─────────────────── */
.store-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.store-map-col { position: sticky; top: calc(var(--header-h) + var(--sp-3)); display: flex; flex-direction: column; gap: var(--sp-4); }
.store-skip { position: absolute; left: -9999px; top: 0; z-index: 3; padding: .5rem .8rem; border-radius: var(--r-sm); background: var(--ink); color: var(--on-night); font-weight: 700; }
.store-skip:focus { left: var(--sp-3); top: var(--sp-3); }
.store-map { position: relative; box-shadow: var(--shadow); border: 1px solid var(--line); }
.store-dmap .pin.is-hot { transform: scale(1.3); }
.store-dmap .pin.is-hot .pin-open, .store-dmap .pin.is-hot .pin-soon, .store-dmap .pin.is-hot .pin-area { stroke: var(--ink); stroke-width: 4; }
.store-map-msg { position: absolute; inset: var(--sp-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-5); text-align: center; border-radius: var(--r); }
.store-map-msg p { color: var(--ink-3); }
.store-map-msg b { display: block; color: var(--ink); font-size: var(--fs-lg); margin-bottom: 4px; }
.store-map-empty { background: var(--scrim); }
.store-map-empty p, .store-map-empty b { color: var(--on-night); }
.store-map-empty .ico-box { background: var(--surface); }
.store-map > .store-map-msg[role="alert"] { position: static; min-height: 18rem; background: var(--surface-3); border: 1.5px dashed var(--line-strong); }

/* 지도 팝업(핀을 누르면) */
.store-pop { position: absolute; left: 50%; bottom: var(--sp-4); transform: translateX(-50%); width: min(21rem, calc(100% - var(--sp-5))); padding: var(--sp-4); padding-right: calc(var(--tap) + var(--sp-2)); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow-lg); z-index: 2; }
.store-pop:focus { outline: none; box-shadow: var(--shadow-lg), var(--focus); }
.store-pop-x { position: absolute; top: 4px; right: 4px; }
.store-pop-t { font-size: var(--fs-lg); font-weight: 800; margin: var(--sp-2) 0 4px; }
.store-pop-addr { color: var(--ink-3); font-size: var(--fs-sm); margin-bottom: var(--sp-3); }
@media (prefers-reduced-motion: no-preference) { .store-pop:not([hidden]) { animation: store-pop-in var(--t-mid) var(--ease); } }
@keyframes store-pop-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

.store-legend { padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.store-legend .dmap-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.store-legend .dmap-legend small { color: var(--ink-3); opacity: 1; }
.store-legend-note { display: flex; gap: 6px; align-items: flex-start; margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-3); }
.store-legend-note .ic { margin-top: 2px; }

.store-list-col { min-width: 0; }
.store-list-col:focus { outline: none; }
.store-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.store-list-t { font-size: var(--fs-h4); font-weight: 800; }
.store-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.store-item { position: relative; display: flex; align-items: stretch; border-bottom: 1px solid var(--line); transition: background var(--t-short) var(--ease); }
.store-item:last-child { border-bottom: 0; }
.store-item.is-hot, .store-item:hover { background: var(--surface-3); }
.store-item.is-hot { box-shadow: inset 0 0 0 2px var(--accent); }
.store-item-link { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: .9rem 1.059rem; min-height: 4.2rem; }
.store-item-link:focus-visible { outline: none; box-shadow: inset var(--focus); }
.store-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.store-item-name { font-weight: 750; color: var(--ink); }
.store-item-addr { font-size: var(--fs-sm); color: var(--ink-3); overflow-wrap: anywhere; }
.store-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }
.store-item-go { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-sm); font-weight: 700; color: var(--accent-ink); }
.store-item-pin { align-self: center; margin-right: var(--sp-2); color: var(--ink-3); }
.store-item-pin:hover { color: var(--accent-ink); }
.store-item-link:hover .store-item-name { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 980px) {
  .store-split { grid-template-columns: 1fr; }
  .store-map-col { position: static; }
}
@media (max-width: 640px) {
  .store-filter { padding: var(--sp-4); }
  .store-filter-region .field { flex: 1 1 100%; }
  .store-filter-apply { margin-top: 0; width: 100%; }
  .store-legend .dmap-legend { grid-template-columns: 1fr; }
  .store-item-link { flex-wrap: wrap; }
  .store-item-side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
}

/* ── 매장 상세 ─────────────────────────────── */
.store-head h1 { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -0.03em; margin-top: var(--sp-2); }
.store-head-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: var(--sp-2); }
.store-head-addr { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; color: var(--ink-3); font-size: var(--fs-lg); }
.store-head-addr .ic { margin-top: 5px; }
.store-detail { margin-top: var(--sp-3); }
.store-detail-main { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.store-photo { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); }
.store-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; }
.store-photo figcaption { padding: .5rem var(--sp-4); font-size: var(--fs-xs); color: var(--ink-3); background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.store-card { display: flex; flex-direction: column; gap: var(--sp-4); }
.store-card-t { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-h4); font-weight: 800; }
.store-card-t .ic { color: var(--accent-ink); }
.store-kv dd { overflow-wrap: anywhere; }
.store-intro { padding-top: var(--sp-3); border-top: 1px solid var(--line); color: var(--ink-2); line-height: 1.75; }
.store-area-note { display: flex; gap: 6px; align-items: flex-start; padding: .8rem 1rem; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent-ink); font-size: var(--fs-sm); }
.store-area-note .ic { margin-top: 3px; }
.store-map-one { box-shadow: none; padding: 0; overflow: hidden; }
.store-dmap-one .pin:not(.is-selected) { opacity: .45; }
.store-dmap-one .pin.is-selected .pin-open, .store-dmap-one .pin.is-selected .pin-soon, .store-dmap-one .pin.is-selected .pin-area { stroke: var(--ink); stroke-width: 4; }
.store-legend-row { padding: 0; border: 0; }
.store-loc { padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.store-route { display: flex; flex-direction: column; gap: var(--sp-3); }
.store-route-t { display: flex; align-items: center; gap: 6px; font-weight: 750; flex-wrap: wrap; }
.store-near-t { font-size: var(--fs-h4); font-weight: 800; margin-bottom: var(--sp-3); }
.store-near-note { margin-top: var(--sp-2); }

.store-aside { display: flex; flex-direction: column; gap: var(--sp-4); }
.store-cta { display: flex; flex-direction: column; gap: var(--sp-3); }
.store-cta .eyebrow { margin-bottom: 0; }
.store-cta-t { font-size: var(--fs-h4); font-weight: 800; letter-spacing: -0.02em; }
.store-cta .btn { width: 100%; }
.store-near-area { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); }
.store-near-area > span:nth-child(2) { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.store-next { display: flex; flex-direction: column; padding: var(--sp-2); }
.store-next a { display: flex; align-items: center; gap: var(--sp-3); padding: .7rem var(--sp-3); border-radius: var(--r-sm); min-height: var(--tap); }
.store-next a:hover { background: var(--surface-3); }
.store-next a > .ic:first-child { color: var(--accent-ink); }
.store-next a > span { flex: 1 1 auto; display: flex; flex-direction: column; }
.store-next small { font-size: var(--fs-xs); color: var(--ink-3); }
@media (max-width: 640px) {
  .store-head h1 { font-size: var(--fs-h3); }
  .store-head-addr { font-size: var(--fs-md); }
  .store-photo img { aspect-ratio: 3 / 2; }
  .store-route .btn-row .btn { flex: 1 1 auto; }
}
.store-only-m { display: none; }
@media (max-width: 980px) { .store-only-m { display: block; } }

/* 카카오맵(public/assets/js/kakao-store-map.js) — 불러오면 약도([data-map-fallback]) 대신 보인다. 마커는 범례(.lg)와 같은 모양 */
.kmap { position: relative; z-index: 0; isolation: isolate; width: 100%; aspect-ratio: 5 / 4; border-radius: var(--r); overflow: hidden; background: var(--map-sea); }
.store-kmap-one { aspect-ratio: 16 / 10; }
@media (max-width: 640px) { .store-kmap-one { aspect-ratio: 4 / 3; } }
.kpin { display: grid; place-items: center; width: var(--tap); height: var(--tap); border-radius: 50%; cursor: pointer; transition: transform var(--t-short) var(--ease); }
.kpin .lg { display: grid; place-items: center; margin: 0; width: 1.3rem; height: 1.3rem; box-shadow: 0 0 0 2px var(--surface), 0 1px 4px var(--scrim); }
.kpin-soon .lg { box-shadow: inset 0 0 0 3px var(--ink), 0 0 0 2px var(--surface), 0 1px 4px var(--scrim); }
.kpin-area .lg { width: 2.4rem; height: 2.4rem; box-shadow: none; opacity: .85; }
.kpin-area .lg::after, .kpin-open.is-direct .lg::after { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--accent-ink); }
.kpin-open.is-direct .lg::after { background: var(--surface); }
.kpin:hover, .kpin:focus-visible, .kpin.is-hot, .kpin.is-selected { transform: scale(1.3); }
.kpin:focus-visible { outline: none; box-shadow: var(--focus); }
.kpin.is-hot .lg, .kpin.is-selected .lg { box-shadow: 0 0 0 3px var(--ink); }
.store-kmap-one .kpin:not(.is-selected) { opacity: .6; }