/* 아야나리조트 부대시설 가이드 맵 (sections/ayana_dining.php) — 2026-10-06 */
.ayana-dining {
    background: #f4f1ea;
    color: #173b35;
    box-sizing: border-box;
    overflow-x: hidden;
    padding: 72px 0;
    font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    scroll-margin-top: 60px;
}
.ayana-dining *,
.ayana-dining *::before,
.ayana-dining *::after { box-sizing: border-box; }
.ayana-dining .ayana-dining-inner { width: min(var(--ayana-max, 1240px), calc(100% - 48px)); margin: 0 auto; }
.ayana-dining .ayana-dining-head { max-width: 720px; margin-bottom: 28px; }
.ayana-dining .ayana-dining-eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #b97956; }
.ayana-dining .ayana-dining-head h2 { margin: 0; color: #173b35; font-size: clamp(30px, 4vw, 48px); font-weight: 500; letter-spacing: -.03em; line-height: 1.15; word-break: keep-all; }
.ayana-dining .ayana-dining-lead { margin: 14px 0 0; font-size: 16px; line-height: 1.65; color: #3f6156; word-break: keep-all; }

/* 범례 겸 카테고리 필터 */
.ayana-fmap-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ayana-fmap-filter { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 1px solid rgba(23,59,53,.18); border-radius: 999px; background: #fff; color: #173b35; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.ayana-fmap-filter span { color: #6b8279; font-weight: 600; }
.ayana-fmap-filter.is-on { border-color: #173b35; box-shadow: inset 0 0 0 1px #173b35; }
.ayana-fmap-filter:focus-visible { outline: 2px solid #b97956; outline-offset: 2px; }
.ayana-fmap-dot { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--pin, #173b35); color: #fff; font-style: normal; flex: none; }
.ayana-fmap-dot svg { width: 15px; height: 15px; }

/* 지도 + 핀 */
.ayana-fmap-stage { position: relative; overflow: hidden; border: 10px solid #e4e1d6; border-radius: 18px; background: #a9d4e6; }
.ayana-fmap-stage .ayana-dining-basemap { display: block; width: 100%; height: auto; }
/* 확대/축소: 캔버스(지도+핀)만 transform, 팝업·버튼은 stage 기준 */
.ayana-fmap-canvas { position: relative; transform-origin: 0 0; will-change: transform; }
.ayana-fmap-stage { touch-action: pan-y; }
.ayana-fmap-stage.is-zoomed { cursor: grab; touch-action: none; }
.ayana-fmap-stage.is-zoomed:active { cursor: grabbing; }
.ayana-fmap-zoom { position: absolute; top: 12px; right: 12px; z-index: 6; display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.ayana-fmap-zoom button { width: 36px; height: 36px; padding: 0; border: 0; border-bottom: 1px solid #e4e1d6; background: #fff; color: #173b35; font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; }
.ayana-fmap-zoom button:last-child { border-bottom: 0; font-size: 15px; }
.ayana-fmap-zoom button:hover { background: #f4f1ea; }
.ayana-fmap-zoom button:focus-visible { outline: 2px solid #173b35; outline-offset: -2px; }
.ayana-fmap-zoom-hint { position: absolute; left: 12px; bottom: 10px; z-index: 6; margin: 0; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.85); color: #3f6156; font-size: 12px; pointer-events: none; }
.ayana-fmap-pin { position: absolute; z-index: 2; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; background: var(--pin); color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); cursor: pointer; transition: transform .15s ease, opacity .2s ease; }
.ayana-fmap-pin svg { width: 18px; height: 18px; pointer-events: none; }
.ayana-fmap-pin { transform: scale(var(--pz, 1)); }
.ayana-fmap-pin:hover, .ayana-fmap-pin.is-active { transform: scale(calc(var(--pz, 1) * 1.25)); z-index: 4; }
.ayana-fmap-pin.is-active { box-shadow: 0 0 0 4px rgba(255,255,255,.7), 0 3px 10px rgba(0,0,0,.4); }
.ayana-fmap-pin.is-dim { opacity: .18; pointer-events: none; }
.ayana-fmap-pin:focus-visible { outline: 3px solid #173b35; outline-offset: 2px; }
.ayana-fmap-pop { position: absolute; z-index: 5; width: 230px; padding: 14px 16px; border-radius: 10px; background: #fff; color: #173b35; box-shadow: 0 10px 28px rgba(0,0,0,.22); transform: translate(-50%, calc(-100% - 22px)); }
.ayana-fmap-pop[hidden] { display: none; }
.ayana-fmap-pop.is-below { transform: translate(-50%, 22px); }
.ayana-fmap-pop-cat { margin: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--pin, #3f6156); }
.ayana-fmap-pop-name { margin: 0 0 6px; font-size: 16px; font-weight: 700; line-height: 1.35; word-break: keep-all; }
.ayana-fmap-pop-hours { margin: 0 0 10px; font-size: 13px; color: #3f6156; }
.ayana-fmap-pop-hours:empty { display: none; }
.ayana-fmap-pop-link { font-size: 13px; font-weight: 700; color: #173b35; text-decoration: none; }
.ayana-fmap-pop-link:hover { text-decoration: underline; }

/* 카드 (최대 4개) */
.ayana-fcards { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ayana-fcard { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid rgba(23,59,53,.14); color: #173b35; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.ayana-fcard:hover, .ayana-fcard.is-active { border-color: var(--pin); box-shadow: 0 8px 22px rgba(23,59,53,.12); transform: translateY(-2px); }
.ayana-fcard:focus-visible { outline: 2px solid #b97956; outline-offset: 3px; }
.ayana-fcard-media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #e7dfd0; }
.ayana-fcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ayana-fcard-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.ayana-fcard-cat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--pin); }
.ayana-fcard-cat .ayana-fmap-dot { width: 20px; height: 20px; }
.ayana-fcard-name { font-size: 18px; font-weight: 700; line-height: 1.35; word-break: keep-all; }
.ayana-fcard-summary { font-size: 13px; line-height: 1.6; color: #45655b; word-break: keep-all; }
.ayana-fcard-hours { margin-top: 2px; font-size: 12px; color: #6b8279; }

/* 대표 카드 묶음 머리줄: 왼쪽 묶음 이름, 오른쪽 '더 많은 시설 보기 →' (카드 4개 외 목록으로 가는 링크) */
.ayana-fcards-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 32px 0 0; }
.ayana-fcards-head ~ .ayana-fcards { margin-top: 14px; }
.ayana-fcards[hidden] { display: none; }
.ayana-fcards-title { margin: 0; color: #173b35; font-size: 18px; font-weight: 700; }
.ayana-fmore-link { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 20px; border: 1.5px solid #0b2d28; border-radius: 999px; background: #fff; color: #0b2d28; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.ayana-fmore-link span { transition: transform .15s ease; }
.ayana-fmore-link:hover span { transform: translateX(3px); }
.ayana-fmore-link:hover { background: #0b2d28; color: #fff; }
.ayana-fmore-link:focus-visible { outline: 2px solid #b97956; outline-offset: 3px; }

@media (max-width: 960px) {
    .ayana-fcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .ayana-dining { padding: 52px 0; }
    .ayana-dining .ayana-dining-inner { width: calc(100% - 28px); }
    .ayana-fmap-stage { border-width: 6px; border-radius: 12px; }
    .ayana-fmap-pin { width: 22px; height: 22px; margin: -11px 0 0 -11px; border-width: 1.5px; }
    .ayana-fmap-pin svg { width: 13px; height: 13px; }
    .ayana-fmap-pop { width: 190px; padding: 12px; }
    .ayana-fmap-zoom-hint { display: none; }
    .ayana-fcards-title { font-size: 16px; }
    .ayana-fmore-link { min-height: 38px; padding: 0 14px; font-size: 13px; }
    .ayana-fcards { gap: 10px; }
    .ayana-fcard-body { padding: 12px; }
    .ayana-fcard-name { font-size: 15px; }
    .ayana-fcard-summary { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ayana-fmap-pin, .ayana-fcard { transition: none; }
}