/* 라이트 테마 — 회색 스케일 + 퍼플은 Primary 포인트로만 사용 */
:root{
  color-scheme:light;
  /* Grey */
  --grey-50:#F9FAFB;--grey-100:#F2F4F6;--grey-200:#E5E8EB;--grey-300:#D1D6DB;--grey-400:#B0B8C1;
  --grey-500:#8B95A1;--grey-600:#6B7684;--grey-700:#4E5968;--grey-800:#333D4B;--grey-900:#191F28;
  /* Primary purple (메인 이미지 하늘색에서 추출한 블루 바이올렛) */
  --purple-50:#F3F1FE;--purple-100:#E6E2FD;--purple-200:#CCC4FB;--purple-300:#A99CF5;
  --purple-400:#8877EE;--purple-500:#6C5CE7;--purple-600:#5A48D6;--purple-700:#4A39B8;
  --primary:var(--purple-500);--primary-pressed:var(--purple-600);
  --bg:#FFFFFF;--bg-grey:var(--grey-100);--line:var(--grey-200);
  --radius-s:10px;--radius-m:16px;--radius-l:24px;
  --shadow-card:0 2px 8px rgba(0,27,55,.06),0 1px 2px rgba(0,27,55,.04);
  --shadow-float:0 8px 24px rgba(0,27,55,.12),0 2px 6px rgba(0,27,55,.06);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  font-synthesis:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:0}
body{margin:0;background:var(--grey-100);color:var(--grey-900);-webkit-font-smoothing:antialiased;letter-spacing:-.01em}
body.modal-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit;border:0;letter-spacing:inherit}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:3px solid var(--purple-300);outline-offset:3px;border-radius:8px}
img{display:block;max-width:100%}
.site-shell{width:100%;max-width:600px;margin:auto;background:var(--bg);overflow:clip}
.skip{position:fixed;z-index:200;left:12px;top:-80px;background:var(--grey-900);color:#fff;padding:14px 16px;border-radius:12px}.skip:focus{top:12px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--primary);margin:0 0 10px}

/* Top bar */
.topbar{height:64px;padding:0 20px;display:flex;align-items:center;gap:14px;position:relative;background:var(--bg);z-index:3}
.topbar>a{display:flex;align-items:center;min-height:44px}
.topbar>a img{width:80px;height:auto}
.topbar>span{font-size:15px;font-weight:600;color:var(--grey-700);border-left:1px solid var(--grey-200);padding-left:14px;line-height:18px}
.topbar .icon-button{margin-left:auto;margin-right:-13px;background:transparent;width:44px;height:44px;padding:10px;color:var(--grey-600);border-radius:12px;transition:background .15s}
.topbar .icon-button:active{background:var(--grey-100)}
.icon-button svg{width:24px;height:24px;display:block}

/* Hero */
/* 점등 상태 칩: 스포트라이트와 함께 메인 이미지 위에 떠오름 */
.hero-scene{display:block;position:relative;isolation:isolate;overflow:hidden;background:#100c17}
.hero-art{width:100%;height:auto;filter:brightness(.42) saturate(.78);transition:filter .9s ease}
.hero-copy,.hero-bottle{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-copy{mask-image:linear-gradient(#000 0%,#000 26%,transparent 33%,transparent 86%,#000 89%,#000 100%);opacity:.95}
.hero-bottle{mask-image:radial-gradient(ellipse 13% 29% at 53.3% 59%,#000 68%,#000e 79%,transparent 100%);opacity:0;filter:brightness(1.1) saturate(1.06);transition:opacity 1.25s ease .18s}
.spotlight-beam{position:absolute;inset:-1% 0 16%;pointer-events:none;clip-path:polygon(52.5% 0,54% 0,70% 100%,36% 100%);background:linear-gradient(180deg,#fff2d6b0 0%,#ffe5b443 24%,#ffe3b018 70%,transparent 100%);mix-blend-mode:screen;filter:blur(2px);opacity:0;transform:scaleX(.08);transform-origin:53.3% 0;transition:transform 1.05s cubic-bezier(.22,.65,.3,1),opacity .45s ease}
.spotlight-source{position:absolute;top:-1%;left:50%;width:7%;height:4%;border-radius:50%;background:#fff5dd;filter:blur(5px);box-shadow:0 0 30px #ffe4ae;opacity:0;pointer-events:none;transition:opacity .45s ease}
.spotlight-pool{position:absolute;left:40%;top:79%;width:27%;height:5%;border-radius:50%;background:radial-gradient(ellipse,#ffe2a942,transparent 70%);mix-blend-mode:screen;opacity:0;pointer-events:none;transition:opacity 1s ease .3s}
.hero-scene.igniting .spotlight-beam,.hero-scene.lit .spotlight-beam{opacity:1;transform:scaleX(1)}
.hero-scene.igniting .hero-bottle,.hero-scene.lit .hero-bottle,.hero-scene.igniting .spotlight-source,.hero-scene.lit .spotlight-source,.hero-scene.igniting .spotlight-pool,.hero-scene.lit .spotlight-pool{opacity:1}
.hero-scene.revealed .hero-art{filter:brightness(1) saturate(1)}
.hero-scene.revealed .spotlight-beam,.hero-scene.revealed .spotlight-source,.hero-scene.revealed .spotlight-pool,.hero-scene.revealed .hero-bottle,.hero-scene.revealed .hero-copy{opacity:0;transition:opacity .9s ease}
/* KV 안 요소: 참여 수 배지(부제 아래) + 주요 버튼(하단, 서빙 섹션과 같은 위치) */
.hero-scene{container-type:inline-size}
.hero-badge{position:absolute;left:20%;top:69%;transform:translate(-50%,-50%);z-index:2;display:grid;place-items:center;width:25cqw;height:25cqw;border-radius:50%;background:#0F0C14;color:#fff;font-size:3.8cqw;font-weight:600;line-height:1.4;text-align:center;letter-spacing:-.02em;white-space:nowrap;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.hero-badge strong{font-weight:700;color:#D6CEFF}
.hero-button{position:absolute;left:50%;top:89.5%;transform:translate(-50%,-50%);z-index:2;display:flex;align-items:center;justify-content:center;height:48px;padding:0 26px;border-radius:999px;background:var(--primary);color:#fff;font-size:16px;font-weight:600;white-space:nowrap;box-shadow:0 6px 16px rgba(74,57,184,.35);transition:background .15s,transform .15s}
.hero-scene:active .hero-button{background:var(--primary-pressed);transform:translate(-50%,-50%) scale(.98)}

/* Discovery / map */
.discovery{position:relative;background:var(--bg);border-top:12px solid var(--grey-100)}
.map-sticky{position:relative;display:flex;flex-direction:column;padding:32px 20px 10px}
.map-heading{flex:none;position:relative;z-index:2}
.map-heading h1{font-size:clamp(22px,6.4vw,28px);line-height:1.35;letter-spacing:-.035em;font-weight:700;margin:0;color:var(--grey-900);word-break:keep-all}
.map-heading h1 em{font:inherit;font-style:normal;color:var(--primary)}
.map-instruction{font-size:15px;color:var(--grey-600);margin:12px 0 0;line-height:1.55;letter-spacing:-.02em}
.map-instruction strong{display:block;font-weight:600;color:var(--grey-800)}
.map-instruction span{display:block}
.map-panel{position:relative;aspect-ratio:600/815;width:100%;align-self:center;margin:20px 0 12px;border-radius:var(--radius-l);overflow:hidden;isolation:isolate;background:#EEF1F4;box-shadow:inset 0 0 0 1px rgba(0,27,55,.04)}
.map-drawing{position:absolute;width:100%;height:100%;top:0;left:0}
.map-pins,.map-stickers{position:absolute;inset:0}
.map-stickers{pointer-events:none}

/* 3D 스티커 (음식·등불) */
.sticker{position:absolute;width:15%;height:auto;transform:translate(-50%,-50%);will-change:transform}
.sticker-sm{width:12%}
.sticker-float{animation:sticker-float 4.8s ease-in-out infinite;animation-play-state:paused}
.sticker-float.delay-1{animation-delay:-1.6s}.sticker-float.delay-2{animation-delay:-3.1s}.sticker-float.delay-3{animation-delay:-.8s}
.is-in-view .sticker-float{animation-play-state:running}
@keyframes sticker-float{0%,100%{transform:translate(-50%,-50%) rotate(-2deg)}50%{transform:translate(-50%,calc(-50% - 5px)) rotate(2deg)}}

/* 3D 핀 */
.map-pin{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;display:flex;justify-content:center;align-items:center;border-radius:50%;background:none;opacity:0;transform:translateY(12px) scale(.6);pointer-events:none;transition:opacity .45s,transform .5s cubic-bezier(.18,.9,.3,1)}
.map-pin.visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.map-pin .pin-core{position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:var(--grey-800);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:0;
  background:radial-gradient(circle at 34% 26%,#FFFFFF 0 28%,#F4F5F8 58%,#DDE1E7 100%);
  box-shadow:0 4px 8px rgba(0,27,55,.16),0 1px 2px rgba(0,27,55,.14),inset 0 -2px 3px rgba(0,27,55,.08),inset 0 1px 1px #fff;
  transition:background .25s,color .25s,box-shadow .25s,transform .3s cubic-bezier(.2,1.4,.4,1)}
.map-pin .pin-core::before{content:'';position:absolute;left:22%;top:12%;width:40%;height:24%;border-radius:50%;background:linear-gradient(#fff,rgba(255,255,255,0));opacity:.9;pointer-events:none}
.map-pin .pin-core::after{content:'';position:absolute;left:50%;bottom:-6px;width:14px;height:9px;margin-left:-7px;background:#4F3EC4;clip-path:polygon(0 0,100% 0,50% 100%);transform:scaleY(0);transform-origin:top;transition:transform .25s}
.map-pin:hover .pin-core{transform:translateY(-2px)}
.map-pin.active{z-index:3}
.map-pin.active .pin-core{width:36px;height:36px;font-size:13px;color:#fff;transform:translateY(-8px);
  background:radial-gradient(circle at 34% 24%,#B7ABFA 0%,#8877EE 30%,#6C5CE7 62%,#4A39B8 100%);
  box-shadow:0 8px 14px rgba(74,57,184,.35),0 2px 4px rgba(74,57,184,.3),inset 0 -3px 4px rgba(40,20,120,.25),inset 0 1px 1px rgba(255,255,255,.6)}
.map-pin.active .pin-core::after{transform:scaleY(1)}
.map-pin.active::after{content:'';position:absolute;left:50%;top:50%;width:16px;height:6px;margin:10px 0 0 -8px;border-radius:50%;background:rgba(74,57,184,.28);filter:blur(1.5px);pointer-events:none;animation:pin-ground 2.4s ease-in-out infinite}
@keyframes pin-ground{50%{transform:scale(1.35);opacity:.6}}
.map-pin.hinting .pin-core{animation:pin-invitation 1s cubic-bezier(.3,1.5,.5,1)}
@keyframes pin-invitation{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-7px) scale(1.18);color:#fff;background:radial-gradient(circle at 34% 24%,#C9C0FB 0%,#8877EE 40%,#6C5CE7 100%)}}
.map-pin.hinting::before{content:'';position:absolute;inset:4px;border:2px solid var(--purple-300);border-radius:50%;pointer-events:none;animation:pin-ring 1s ease-out}
@keyframes pin-ring{0%{opacity:0;transform:scale(.7)}35%{opacity:.8}100%{opacity:0;transform:scale(1.4)}}

.map-key{position:absolute;right:12px;top:12px;display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--grey-700);background:rgba(255,255,255,.94);padding:8px 12px;border-radius:999px;box-shadow:var(--shadow-card);backdrop-filter:blur(8px);z-index:4}
.key-light{width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 3px var(--purple-100)}
.map-key strong{color:var(--primary);font-weight:700;font-variant-numeric:tabular-nums}

.map-current{position:absolute;left:12px;right:12px;bottom:12px;z-index:4;display:flex;align-items:center;gap:14px;text-align:left;background:var(--bg);padding:12px 14px 12px 12px;border-radius:20px;min-height:80px;box-shadow:var(--shadow-float);transition:transform .15s}
.map-current:active{transform:scale(.98)}
.map-current img{border-radius:14px;object-fit:cover;width:56px;height:56px;background:var(--grey-100)}
.map-current>span:nth-child(2){flex:1;min-width:0}
.map-current small{color:var(--grey-500);font-size:13px;font-weight:500;display:block;margin-bottom:2px}
.map-current strong{font-size:18px;font-weight:700;letter-spacing:-.03em;color:var(--grey-900)}
.current-more{display:flex;align-items:center;gap:2px;color:var(--purple-600);background:var(--purple-50);font-size:13px;font-weight:600;white-space:nowrap;padding:8px 12px;border-radius:var(--radius-s)}
.current-more b{font-size:14px;font-weight:600;margin-left:2px}
.map-bottom{flex:none;padding-top:14px;display:flex;align-items:center;flex-direction:column;gap:10px}
.map-bottom p{font-size:12px;color:var(--grey-500);margin:0;text-align:center;line-height:1.5}
/* 지도 안 카드와 겹쳐 보이지 않게 목록 이동은 텍스트 버튼으로 */
.text-button{display:inline-flex;justify-content:center;align-items:center;gap:6px;font-size:16px;font-weight:600;background:transparent;color:var(--grey-700);min-height:40px;padding:0 16px;border-radius:12px;transition:background .15s}
.text-button:active{background:var(--grey-100)}
.text-button span{padding-left:0;color:var(--grey-500)}

/* Venue list */
.venue-section{padding:36px 20px 44px;background:var(--bg);color:var(--grey-900);border-top:12px solid var(--grey-100)}
.section-heading h2{font-size:26px;letter-spacing:-.035em;line-height:1.38;font-weight:700;margin:0;color:var(--grey-900)}
.section-heading>p:last-child{font-size:15px;line-height:1.6;color:var(--grey-600);margin:12px 0 20px}
.filters-wrap{position:sticky;top:0;z-index:5;margin:0 -20px;background:var(--bg)}
/* iOS Safari에서 필터가 상단에 붙으면 상태바(세이프 에어리어) 뒤로 카드가 비쳐 보임 → 붙어 있을 때만 위쪽 120px을 흰색으로 덮음(app.js의 is-stuck) */
.filters-wrap::before{content:'';position:absolute;left:0;right:0;bottom:100%;height:120px;background:var(--bg);opacity:0;pointer-events:none}
.filters-wrap.is-stuck::before{opacity:1}
.filters{display:flex;gap:8px;overflow-x:auto;padding:8px 20px 12px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filters button{flex-shrink:0;padding:0 14px;border-radius:999px;background:var(--grey-100);color:var(--grey-700);font-size:14px;font-weight:600;min-height:38px;transition:background .15s,color .15s}
.filters button[aria-pressed=true]{background:var(--primary);color:#fff}
.filters button span{font-size:13px;color:var(--grey-500);margin-left:3px}
.filters button[aria-pressed=true] span{color:rgba(255,255,255,.75)}
.list-meta{font-size:13px;font-weight:500;color:var(--grey-500);margin:8px 0 16px}
.venue-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}
.venue-card{text-align:left;padding:0;background:none;min-width:0;position:relative;transition:transform .15s}
.venue-card:active{transform:scale(.98)}
.venue-card .card-image{width:100%;aspect-ratio:4/5;position:relative;overflow:hidden;border-radius:var(--radius-m);background:var(--grey-100)}
.card-image>img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.venue-card:hover img{transform:scale(1.03)}
.card-number{position:absolute;left:10px;top:10px;background:rgba(255,255,255,.92);color:var(--grey-900);padding:4px 8px;border-radius:8px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;backdrop-filter:blur(6px)}
.card-plus{display:none}
.card-region{display:block;font-size:13px;font-weight:500;color:var(--grey-500);margin:12px 0 2px}
.card-name{display:block;color:var(--grey-900);font-size:18px;line-height:1.35;letter-spacing:-.03em;font-weight:700;word-break:keep-all}
.card-description{display:block;font-size:13px;line-height:1.5;color:var(--grey-600);margin:4px 0 0;word-break:keep-all}
.card-note{display:inline-block;font-size:12px;font-weight:600;line-height:1.4;margin-top:8px;color:var(--purple-600);background:var(--purple-50);padding:4px 8px;border-radius:6px}

/* Serving */
.serving{position:relative;background:var(--bg);border-top:12px solid var(--grey-100)}
.serving>img{width:100%;height:auto}
/* 서빙 이미지(하단 문구 제거본): 카피는 마스 아래·버튼 위, 버튼은 경고문 바로 위 */
.serving-copy{position:absolute;left:0;right:0;top:73.2%;margin:0;text-align:center;color:#fff;font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-.02em;text-shadow:0 1px 10px rgba(0,0,0,.4);pointer-events:none}
.serving-cta{position:absolute;left:50%;top:89.5%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;height:48px;padding:0 26px;border-radius:999px;background:var(--primary);color:#fff;font-size:16px;font-weight:600;white-space:nowrap;box-shadow:0 6px 16px rgba(74,57,184,.35);transition:background .15s,transform .15s}
.serving-cta:active{background:var(--primary-pressed);transform:translate(-50%,-50%) scale(.98)}

/* Event */
.event-section{padding:36px 20px 40px;background:var(--bg);border-top:12px solid var(--grey-100)}
.event-section h2{font-size:26px;font-weight:700;letter-spacing:-.035em;line-height:1.38;margin:0 0 16px;color:var(--grey-900)}
.event-section>p:not(.eyebrow){font-size:16px;line-height:1.6;color:var(--grey-700);word-break:keep-all;margin:0 0 10px}
.event-section>p.event-guide{font-size:14px;color:var(--grey-500)}
.instagram-link{display:flex;align-items:center;gap:14px;margin-top:24px;padding:16px 18px 16px 16px;border-radius:20px;background:var(--grey-50);box-shadow:inset 0 0 0 1px var(--grey-100);transition:transform .15s}
.instagram-link:active{transform:scale(.98)}
.instagram-link>svg{width:44px;height:44px;padding:10px;border-radius:14px;color:var(--primary);background:var(--purple-50);flex:none}
.instagram-link>span{flex:1;min-width:0}
.instagram-link small{display:block;color:var(--grey-500);font-size:13px;margin-bottom:2px}
.instagram-link strong{font-size:17px;font-weight:700;color:var(--grey-900);letter-spacing:-.01em}
.instagram-link b{font-size:18px;color:var(--grey-400);font-weight:500}

/* Footer */
footer{padding:32px 20px 96px;background:var(--grey-50);border-top:1px solid var(--grey-100)}
footer>img{margin-bottom:16px;width:64px;height:auto;opacity:.55}
.footer-title{font-size:13px;font-weight:600;line-height:1.6;color:var(--grey-600);margin:0 0 16px}
.warning{color:var(--grey-500);font-size:12px;line-height:1.7;word-break:keep-all;margin:0}
.footer-small{font-size:12px;color:var(--grey-500);margin:12px 0 0}

/* Bottom sheet */
.venue-dialog{position:fixed;inset:auto 0 0;margin:0 auto;padding:0;border:0;border-radius:var(--radius-l) var(--radius-l) 0 0;background:var(--bg);color:var(--grey-900);width:100%;max-width:600px;max-height:93svh;overflow:visible;box-shadow:0 -8px 40px rgba(0,27,55,.18);container-type:inline-size}
.venue-dialog[open]{display:flex;flex-direction:column;animation:sheet-up .35s cubic-bezier(.2,.8,.2,1)}
.venue-dialog::backdrop{background:rgba(0,19,43,.48)}
.venue-dialog.dragging{transition:none}
@keyframes sheet-up{from{transform:translateY(40px);opacity:.5}to{transform:translateY(0);opacity:1}}
/* 바텀시트 순서: 핸들 → 이름·지역·소개 → 사진 → 주소 → 가로 꽉 찬 버튼. 닫기 버튼 없이 핸들·제목을 아래로 끌어 닫음(바깥 탭·Esc도 가능) */
.sheet-handle{position:absolute;top:0;left:0;width:100%;height:24px;touch-action:none;cursor:grab}
.sheet-handle::after{content:'';position:absolute;left:calc(50% - 18px);top:8px;width:36px;height:4px;border-radius:4px;background:var(--grey-300)}
.detail-scroll{display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;border-radius:var(--radius-l) var(--radius-l) 0 0;scrollbar-width:thin;min-height:0;padding-top:24px;outline:none}
.detail-header{display:flex;flex-direction:column;padding:6px 20px 0}
.detail-title-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 10px;touch-action:none}
.detail-header h2{font-size:22px;font-weight:700;letter-spacing:-.035em;line-height:1.35;margin:0;color:var(--grey-900);flex:0 1 auto;min-width:0}
.detail-tags{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;margin:3px 0 0 auto}/* 업장 안내 태그(사계 2호점). 한 사실은 태그 하나로, 마지막 태그만 보라 */
.detail-tags[hidden]{display:none}
.detail-tag{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:7px;background:var(--grey-100);color:var(--grey-700);font-size:12px;font-weight:600;white-space:nowrap}
.detail-tag.accent{background:var(--purple-50);color:var(--primary)}
.detail-header .eyebrow{color:var(--primary);font-size:14px;font-weight:600;letter-spacing:-.01em;margin:2px 0 10px;touch-action:none}
.detail-description{font-size:15px;line-height:1.6;color:var(--grey-700);word-break:keep-all;margin:0 0 16px}
.gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;aspect-ratio:1.3;margin:0 20px;border-radius:16px;background:var(--grey-100)}
.gallery::-webkit-scrollbar{display:none}
.gallery>img{width:100%;height:100%;flex:0 0 100%;object-fit:cover;scroll-snap-align:start}
.detail-body{display:flex;flex-direction:column;padding:0 20px 8px}
.address-row{display:flex;align-items:center;gap:12px;margin:20px 0 0;padding:12px 10px 12px 16px;border-radius:14px;background:var(--grey-50)}
.address-row>div{flex:1;min-width:0}
.detail-label{display:block;font-size:13px;font-weight:500;color:var(--grey-500);margin-bottom:2px}
.detail-label[hidden]{display:none}
.address-row p{font-size:15px;line-height:1.55;color:var(--grey-800);margin:0;word-break:keep-all}
.copy-button{color:var(--primary);background:transparent;border-radius:var(--radius-s);min-height:32px;padding:0 6px;font-size:14px;font-weight:600;flex:none;transition:background .15s}
.copy-button:active{background:var(--purple-50)}
.detail-actions{flex:none;padding:8px 20px max(16px,env(safe-area-inset-bottom));background:var(--bg)}
.detail-actions>a{display:flex;justify-content:center;align-items:center;gap:6px;background:var(--primary);color:#fff;min-height:56px;padding:0 20px;border-radius:var(--radius-m);font-size:17px;font-weight:600;transition:background .15s,transform .15s}
.detail-actions>a:active{background:var(--primary-pressed);transform:scale(.98)}
.detail-actions>a>span{font-size:17px;opacity:.85}

/* Toast */
.toast{position:fixed;bottom:max(28px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%,15px);padding:14px 20px;border-radius:14px;background:rgba(51,61,75,.96);color:#fff;z-index:100;font-size:14px;font-weight:500;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap;box-shadow:var(--shadow-float)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* Music */
.music-control{position:fixed;right:max(16px,calc((100vw - 600px)/2 + 16px));bottom:max(16px,env(safe-area-inset-bottom));z-index:20;display:flex;align-items:flex-end;flex-direction:column;gap:8px;pointer-events:none}
.music-toggle{pointer-events:auto;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 14px;border-radius:999px;background:rgba(255,255,255,.96);color:var(--grey-800);box-shadow:var(--shadow-float);font-size:13px;font-weight:600;backdrop-filter:blur(12px)}
.music-hint{font-size:12px;line-height:1.5;padding:8px 12px;border-radius:12px;background:rgba(51,61,75,.96);color:#fff;max-width:230px}
.music-bars{display:flex;align-items:center;gap:2px;height:16px}
.music-bars i{display:block;width:3px;height:5px;border-radius:2px;background:var(--primary);animation:equalizer 1.3s ease-in-out infinite;animation-play-state:paused}
.music-bars i:nth-child(2){height:12px;animation-delay:-.4s}.music-bars i:nth-child(3){height:8px;animation-delay:-.8s}.music-bars i:nth-child(4){height:14px;animation-delay:-.2s}
.music-toggle.is-playing .music-bars i{animation-play-state:running}
@keyframes equalizer{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}

@media(min-width:601px){
  .site-shell{box-shadow:0 0 0 1px var(--grey-200)}
  .topbar{padding-left:28px;padding-right:28px}
  .map-sticky{padding:36px 28px 12px}
  .map-heading h1{font-size:28px}
  .venue-section,.event-section{padding-left:28px;padding-right:28px}
  .filters-wrap{margin:0 -28px}
  .filters{padding-left:28px;padding-right:28px}
  .venue-grid{gap:32px 16px}
  .card-name{font-size:20px}
  .card-description{font-size:14px}
  footer{padding-left:28px;padding-right:28px}
}
@media(max-height:740px){
  .map-sticky{padding-top:28px}
  .map-instruction{margin-top:8px;font-size:14px}
}
@media(max-width:600px){html{scrollbar-width:none}html::-webkit-scrollbar{display:none}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .map-pin{opacity:1;transform:none;pointer-events:auto}
}