/* 지도 메인 /map/ 전용 스타일 (2026-10-15). 토큰 = Figma Airbnb UI Kit(XCvnWHPCrRErC3Xs9kpLHR) 색·그림자·글자 크기,
   글꼴은 SF Pro 대신 한글용 Pretendard. 공통 css/styles.css 와 섞지 않는다. */
:root{
  --primary-01:#F6475F; --primary-02:#FF385C;
  --gradient-02:radial-gradient(circle at 0% 100%, #D33753 0%, #D13660 52.8%, #C72D65 100%);
  --neutral-01:#F7F7F7; --neutral-02:#EBEBEB; --neutral-03:#DDDDDD; --neutral-04:#D3D3D3;
  --neutral-06:#B0B0B0; --neutral-07:#717171; --neutral-08:#5E5E5E;
  --shade-01:#FFFFFF; --shade-02:#222222;
  --elev-02:0 1px 2.5px rgba(0,0,0,.19);
  --elev-03:0 6px 16px rgba(0,0,0,.12);
  --nav-shadow:0 4px 2px rgba(0,0,0,.04);
  --r-card:12px; --r-btn:8px;
  --panel:560px;
}
*{box-sizing:border-box}
html,body{height:100%;overflow:hidden;overscroll-behavior:none} /* 앱 화면: 페이지 자체는 스크롤하지 않는다 */
body{margin:0;font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--shade-02);background:var(--shade-01);font-size:14px;-webkit-font-smoothing:antialiased}
button,input,a{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
a{text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--shade-02);outline-offset:2px}
img{display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Main Navigation (8:297) */
.nav{height:81px;border-bottom:1px solid var(--neutral-03);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 40px;background:var(--shade-01);position:relative;z-index:30}
.logo{display:flex;align-items:center;gap:8px;color:var(--primary-02);font-weight:800;font-size:21px;letter-spacing:-.6px;justify-self:start}
.logo-mark{width:32px;height:32px;border-radius:10px;background:var(--primary-02);display:grid;place-items:center}
/* Stays Navigation (235:2440) — 검색 알약 */
.search{display:flex;align-items:center;gap:20px;padding:8px 8px 8px 24px;border:1px solid var(--neutral-02);border-radius:500px;background:var(--shade-01);box-shadow:var(--nav-shadow);transition:box-shadow .2s;margin:0}
.search:hover,.search:focus-within{box-shadow:var(--elev-03)}
.search .segs{display:flex;align-items:center;gap:16px;min-width:0}
.search .seg{font-size:13px;font-weight:600;white-space:nowrap}
.search .where:hover{text-decoration:underline}
.search .divider{width:1px;height:24px;background:var(--neutral-03);flex:none}
.search input{border:0;outline:0;background:none;font-size:13px;width:170px;color:var(--shade-02);-webkit-appearance:none}
.search input::placeholder{color:var(--neutral-08)}
.search .go{width:32px;height:32px;flex:none}
.nav-right{justify-self:end;display:flex;align-items:center;gap:8px}
.nav-link{font-size:14px;font-weight:700;padding:11px 16px;border-radius:22px;background:#FFF0F3;color:#A6294F}   /* 10-18: 디자인 규칙 연핑크 */
.nav-link:hover{background:#FFE1E8}

/* Underline Tabs with icon (150:2355) — 시리즈 줄 */
.channels{display:flex;gap:32px;padding:14px 40px 0;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--neutral-02);background:var(--shade-01);position:relative;z-index:20}
.channels::-webkit-scrollbar{display:none}
.tab{display:flex;flex-direction:column;align-items:center;gap:8px;flex:none;padding-bottom:12px;border-bottom:2px solid transparent;color:var(--neutral-07);font-weight:600;font-size:12px;white-space:nowrap}
.tab svg{opacity:.8}
.tab:hover{color:var(--shade-02);border-bottom-color:var(--neutral-03)}
.tab[aria-pressed="true"]{color:var(--shade-02);border-bottom-color:var(--shade-02)}
.tab[aria-pressed="true"] svg{opacity:1}

/* 본문 */
.app{height:100dvh;display:flex;flex-direction:column}
.body{flex:1;min-height:0;display:grid;grid-template-columns:var(--panel) 1fr;overflow:hidden}
.app.collapsed .body{grid-template-columns:0 1fr}
.panel{overflow-y:auto;padding:24px 24px 40px;min-width:0}
.app.collapsed .panel{padding:0;overflow:hidden}

/* Callout — Property Highlight (235:2640) */
.callout{display:flex;gap:8px;align-items:flex-start;padding:20px 24px;border:1px solid var(--neutral-03);border-radius:var(--r-card);margin-bottom:20px}
.callout p{flex:1;margin:0;font-size:15px;line-height:1.45}
.callout b{font-weight:600}
.callout img{width:32px;height:32px;flex:none}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.panel-head h2{margin:0;font-size:18px;font-weight:700;letter-spacing:-.3px}
.panel-head h2 small{font-size:14px;font-weight:400;color:var(--neutral-08);margin-left:6px}

/* Pill Tabs (237:2217) — 정렬 */
.pills{display:inline-flex;padding:4px;background:var(--neutral-02);border-radius:50px;flex:none}
.pills button{padding:8px 14px;border-radius:500px;font-size:13px;font-weight:600;color:var(--shade-02)}
.pills button:hover{background:rgba(255,255,255,.6)}
.pills button[aria-pressed="true"]{background:var(--shade-01);box-shadow:0 6px 8.5px rgba(0,0,0,.08)}

/* Chips (234:2567) — 음식 분류 */
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 18px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;height:40px;padding:0 20px;border:1px solid var(--neutral-03);border-radius:50px;background:var(--shade-01);font-size:14px;white-space:nowrap}
.chip:hover{border-color:var(--shade-02)}
.chip:active{transform:scale(.92)}
.chip[aria-pressed="true"]{background:var(--shade-02);border-color:var(--shade-02);color:var(--shade-01)}

/* Default Card (238:2494) — 목록 카드 */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
.card{display:block;text-align:left;width:100%;border-radius:var(--r-card);cursor:pointer}
.card .img{position:relative;aspect-ratio:16/11;border-radius:var(--r-card);overflow:hidden;background:var(--neutral-02)}
.card .img>img.th{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.card:hover .img>img.th{transform:scale(1.03)}
.noimg{width:100%;height:100%;display:grid;place-items:center;color:var(--neutral-06)}
.heart{position:absolute;top:12px;right:12px;width:24px;height:24px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));cursor:pointer}
.heart img{width:24px;height:24px}
.heart.on .off,.heart:not(.on) .fav{display:none}
.tag{position:absolute;top:12px;left:12px;background:var(--shade-01);border-radius:4px;padding:4px 8px;font-size:12px;font-weight:600;box-shadow:var(--elev-02);display:flex;align-items:center;gap:4px}
.tag .yt{width:14px;height:10px;border-radius:3px;background:var(--primary-02);position:relative}
.tag .yt::after{content:"";position:absolute;left:5px;top:2.5px;border-left:5px solid #fff;border-top:2.5px solid transparent;border-bottom:2.5px solid transparent}
.card .info{display:grid;grid-template-columns:1fr auto;gap:4px 8px;margin-top:12px;font-size:14px;line-height:1.3}
.card .name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .dist{color:var(--shade-02);white-space:nowrap}
.card .sub{color:var(--neutral-08);grid-column:1/-1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .price{grid-column:1/-1;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .price b{font-weight:600}
.card.selected .img{outline:2px solid var(--shade-02);outline-offset:3px}
.empty{grid-column:1/-1;text-align:center;padding:48px 0;color:var(--neutral-08);line-height:1.6}
.more{display:block;margin:28px auto 0;padding:13px 24px;border:1px solid var(--shade-02);border-radius:var(--r-btn);font-size:15px;font-weight:600;background:var(--shade-01)}
.more:hover{background:var(--neutral-01)}
.shortslinks{margin:40px 0 0;padding-top:28px;border-top:1px solid var(--neutral-02)}
.shortslinks h2{margin:0 0 14px;font-size:16px;font-weight:700}
.shortslinks h2 small{font-weight:400;color:var(--neutral-08);margin-left:4px;font-size:13px}
.shortslinks ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.shortslinks a{display:inline-flex;align-items:center;height:34px;padding:0 14px;border:1px solid var(--neutral-03);border-radius:50px;font-size:13px}
.shortslinks a:hover{border-color:var(--shade-02)}
.alllink{margin:28px 0 0;text-align:center;font-size:14px}
.alllink a{color:var(--neutral-08);text-decoration:underline;text-underline-offset:3px}
.alllink a:hover{color:var(--shade-02)}

/* 지도 — 네이버 지도 SDK 가 컨테이너를 position:relative 로 바꾸므로 크기를 직접 준다 */
.mapwrap{position:relative;min-width:0;height:100%}
#map{position:absolute;inset:0;width:100%;height:100%!important;background:var(--neutral-01)}
.map-msg{position:absolute;inset:0;display:none;place-items:center;text-align:center;padding:24px;color:var(--neutral-08);line-height:1.6;background:var(--neutral-01);z-index:5}
.map-msg.show{display:grid}
.ctrls{position:absolute;top:16px;right:16px;display:grid;gap:8px;z-index:6}
.ctrl{width:40px;height:40px;border-radius:50%;background:var(--shade-01);box-shadow:var(--elev-03);display:grid;place-items:center;font-size:20px;font-weight:500}
.ctrl:hover{background:var(--neutral-01)}
.togglelist{position:absolute;top:16px;left:16px;z-index:6;height:40px;padding:0 16px;border-radius:500px;background:var(--shade-01);box-shadow:var(--elev-03);font-size:13px;font-weight:600}
.status{position:absolute;left:16px;bottom:16px;z-index:6;background:var(--shade-01);border-radius:var(--r-card);box-shadow:var(--elev-03);padding:10px 14px;font-size:13px}
.status b{font-weight:600}
.status span{color:var(--neutral-08)}

/* Map Chips (234:2559) — 지도 마커 */
.mk{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:43px;background:var(--shade-01);box-shadow:var(--elev-02),0 2px 6px rgba(0,0,0,.12);font-weight:600;font-size:13px;white-space:nowrap;transform:translate(-50%,-50%);transition:transform .15s;cursor:pointer;line-height:1}
.mk:hover{transform:translate(-50%,-50%) scale(1.08)}
.mk .yt{width:12px;height:9px;border-radius:2px;background:var(--primary-02);position:relative;flex:none}
.mk .yt::after{content:"";position:absolute;left:4.5px;top:2px;border-left:4px solid #fff;border-top:2.5px solid transparent;border-bottom:2.5px solid transparent}
.mk.viewed{background:var(--neutral-02);box-shadow:inset 0 0 0 1px var(--neutral-06)}
.mk.sel{background:var(--shade-02);color:var(--shade-01);transform:translate(-50%,-50%) scale(1.1)}
.mk.dot{padding:0;width:14px;height:14px;border:3px solid var(--shade-01);background:var(--shade-02)}
.mk.dot.v{background:var(--primary-02)}
.cl{min-width:40px;height:40px;padding:0 10px;border-radius:20px;background:var(--shade-02);color:var(--shade-01);font-weight:700;font-size:14px;display:grid;place-items:center;box-shadow:0 0 0 5px rgba(34,34,34,.15),var(--elev-03);transform:translate(-50%,-50%);cursor:pointer}
.cl:hover{transform:translate(-50%,-50%) scale(1.08)}
.me-dot{width:18px;height:18px;border-radius:50%;background:#1f6feb;border:3px solid #fff;box-shadow:0 0 0 6px rgba(31,111,235,.18),var(--elev-02);transform:translate(-50%,-50%)}

/* Map Card (238:2517) — 매장 카드 */
.mapcard{position:relative;width:327px;border-radius:var(--r-card);background:var(--shade-01);box-shadow:var(--elev-03);overflow:hidden;font-size:14px;text-align:left}
/* 카드 = 링크 하나(사진·본문·상세 보기) + 형제 버튼 2개(닫기·하트, 44px 누름 영역) — 2026-10-15 */
.mapcard-link{display:block;color:inherit}
.mapcard-link:hover .cta{filter:brightness(.95)}
.mapcard-link:focus-visible{outline-offset:-3px}
.mapcard .cta{margin-top:14px}
.mapcard .img{position:relative;height:184px;background:var(--neutral-02)}
.mapcard .img>img{width:100%;height:100%;object-fit:cover}
.mapcard .close,.mapcard .heart{position:absolute;top:6px;z-index:2;width:44px;height:44px;display:grid;place-items:center}
.mapcard .close{left:6px}
.mapcard .heart{right:6px}
.mapcard .credit{position:absolute;left:8px;bottom:6px;font-size:10px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.mapcard .bd{display:block;padding:16px}
.mapcard .row1{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mapcard .row1 b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mapcard .row1 span{white-space:nowrap}
.mapcard .row2{margin-top:10px;display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden}
.mapcard .row2 b{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.mapcard .row2 span{color:var(--neutral-08);flex:none}
.mapcard .dot{width:2px;height:2px;border-radius:50%;background:var(--shade-02);flex:none}
.mapcard .meta{margin:8px 0 0;color:var(--neutral-08);font-size:13px;line-height:1.4}
.mapcard .addr{margin:4px 0 0;color:var(--neutral-07);font-size:12px}
.mapcard .btns{display:flex;gap:8px;margin-top:14px}
/* Primary Button (238:2164) · Secondary */
.btn-primary{flex:1;display:flex;align-items:center;justify-content:center;padding:13px 0;border-radius:var(--r-btn);background:var(--gradient-02);color:var(--shade-01);font-size:15px;font-weight:600}
.btn-primary:hover{filter:brightness(.95)}
.btn-secondary{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 0;border-radius:var(--r-btn);border:1px solid var(--shade-02);font-size:15px;font-weight:600}
.btn-secondary:hover{background:var(--neutral-01)}
#popup-mobile{display:none}

/* 매장 상세 패널 #dp (2026-10-16 사용자: "메인에서 벗어나지 않게") — PC: 목록 자리(왼쪽 --panel 폭)를 덮고 지도는 오른쪽에 그대로,
   모바일: 화면 전체 시트. 내용 = /restaurant/<slug>/ 의 [data-sp] (스타일 map/restaurant.css 를 처음 열 때 싣는다).
   목록은 아래에 그대로 남아 있어(display 유지) 닫으면 스크롤·필터·정렬이 그대로다 */
.body{position:relative}
.dp{position:absolute;left:0;top:0;bottom:0;width:var(--panel);z-index:8;background:var(--shade-01);border-right:1px solid var(--neutral-02);overflow-y:auto;overscroll-behavior:contain;outline:0}
.dp[hidden]{display:none}
.app.detail-open .body{grid-template-columns:var(--panel) 1fr}
.app.detail-open .togglelist{display:none}
.dp-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;height:60px;padding:0 24px;background:var(--shade-01);border-bottom:1px solid var(--neutral-02)}
.dp-back{flex:none;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border:1px solid var(--neutral-03);border-radius:500px;font-size:14px;font-weight:600;background:var(--shade-01)}
.dp-back:hover{border-color:var(--shade-02)}
.dp-back-mo{display:none}
.dp-title{margin:0;min-width:0;font-size:16px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-msg{margin:0;padding:48px 24px;text-align:center;color:var(--neutral-08);line-height:1.6}
.dp-msg a{text-decoration:underline;text-underline-offset:3px}
/* 매장 페이지 레이아웃(데스크톱 2단)을 패널 1단으로 */
.dp .sp{max-width:none;padding:16px 24px 48px}
/* 2026-10-18 사용자(참고: 유튜브 플레이스 상세 창): PC = 지도 위 큰 창(가운데, 바깥 어둡게·누르면 닫기), 1024px 이상은 매장 페이지 2단(왼쪽 영상·광고 / 오른쪽 매장 정보) 그대로 */
.dp-scrim{position:absolute;inset:0;z-index:19;background:rgba(17,17,17,.45)}
.dp-scrim[hidden]{display:none}
@media (min-width:761px){
  .dp{left:50%;top:16px;bottom:16px;width:min(1200px,calc(100% - 48px));transform:translateX(-50%);z-index:20;border-right:0;border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.25)}
  .dp-bar{border-radius:16px 16px 0 0}
}
@media (min-width:1024px){
  .dp .sp{padding:20px 32px 40px}
  .dp .sp-layout{grid-template-columns:minmax(0,1fr) 320px}   /* 오른쪽 = 광고 칸(300px) — 10-18 */
}
@media (max-width:1023px){
  .dp .sp-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:none;row-gap:24px}
  .dp .sp-media,.dp .sp-below,.dp .sp-aside{grid-area:auto}
  .dp .sp-aside{position:static}
}
/* 광고 자리 — 목록 6번째 카드 다음 / 상세 창(PC 영상 아래·모바일 메뉴 다음). '광고' 표시를 붙이고 고정·겹침 없이 본문 흐름 안에만 */
.ad-label{display:block;margin:0 0 6px;font-size:11px;line-height:1.4;color:var(--neutral-07)}
.list-ad{margin:28px 0 0}
.list-ad[hidden]{display:none}
#list2:not(:empty){margin-top:28px}
.dp .dp-ad{margin:24px 0;min-height:100px}
.dp .sp-crumb span.sp-crumb-list{color:var(--neutral-07)}
/* 매장 페이지가 공통 styles.css 에서 받던 것 (지도 메인은 styles.css 를 싣지 않는다) */
.dp .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dp .t-caption{font-size:13px;line-height:1.45;color:var(--neutral-07)}
.dp .t-micro{font-size:11px;line-height:1.45;color:var(--neutral-07)}
.dp .t-section{font-size:18px;font-weight:700}
.dp .photo-hero{position:relative;display:block;width:100%;overflow:hidden;background:var(--neutral-02)}
.dp .photo-hero img{display:block;width:100%;height:100%;object-fit:cover}
.dp .photo-hero__track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.dp .photo-hero__track::-webkit-scrollbar{display:none}
.dp .photo-slide{flex:0 0 100%;height:100%;padding:0;border:0;background:transparent;scroll-snap-align:start;cursor:zoom-in}
.dp .photo-nav{position:absolute;top:50%;transform:translateY(-50%);display:none;place-items:center;width:36px;height:36px;border-radius:50%;color:#fff;background:rgba(0,0,0,.38)}
.dp .photo-nav:hover{background:rgba(0,0,0,.55)}
.dp .photo-nav--prev{left:10px}
.dp .photo-nav--next{right:10px}
.dp .photo-hero.is-multi>.photo-nav,.dp .photo-modal.is-multi .photo-nav{display:grid}
.dp .photo-hero__dots{position:absolute;left:0;right:0;bottom:6px;display:none;justify-content:center}
.dp .photo-hero.is-multi .photo-hero__dots{display:flex}
.dp .photo-hero__dot{box-sizing:content-box;width:8px;height:8px;padding:6px;border-radius:50%;background:rgba(255,255,255,.55);background-clip:content-box}
.dp .photo-hero__dot[aria-current]{background-color:#fff}
.dp .photo-count{position:absolute;top:10px;right:10px;display:none;padding:2px 8px;border-radius:500px;font-size:12px;line-height:18px;color:#fff;background:rgba(0,0,0,.45)}
.dp .photo-hero.is-multi .photo-count{display:block}
.dp .photo-credit__link{color:var(--neutral-07)}
.dp .photo-modal{width:min(960px,calc(100vw - 32px));max-width:none;max-height:none;padding:0;border:0;background:transparent}
.dp .photo-modal::backdrop{background:rgba(0,0,0,.82)}
.dp .photo-modal__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:8px}
.dp .photo-modal__source{min-width:0;font-size:13px;color:rgba(255,255,255,.72)}
.dp .photo-modal__count{display:none;margin-left:auto;font-size:13px;color:rgba(255,255,255,.72)}
.dp .photo-modal.is-multi .photo-modal__count{display:inline}
.dp .photo-modal__close{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#fff;background:rgba(255,255,255,.14)}
.dp .photo-modal__stage{position:relative}
.dp .photo-modal__img{display:block;width:100%;max-height:calc(100dvh - 120px);object-fit:contain;border-radius:12px;background:#111}
.dp .menu-table{overflow:hidden}
.dp .menu-row{display:flex;justify-content:space-between;gap:12px}
.dp .menu-row__price{font-weight:600;white-space:nowrap}
.dp .is-unknown{color:var(--neutral-07);font-weight:400}
.dp .qa-card{background:var(--neutral-01);border:1px solid var(--neutral-02);border-radius:16px;padding:20px 16px 16px}
.dp .qa-card__title{margin:0}
.dp .qa-card__sub{margin:4px 0 8px}
.dp .qa-list{margin:0}
.dp .qa-item{padding:12px 0;border-top:1px solid var(--neutral-02)}
.dp .qa-item__q{font-size:15px;line-height:22px;font-weight:600}
.dp .qa-item__a{margin:4px 0 0;font-size:14px;line-height:21px;word-break:keep-all;overflow-wrap:anywhere}
.dp .qa-item__src{display:block;margin-top:4px;font-size:12px;line-height:18px;color:var(--neutral-07)}
.dp .qa-item__src a{color:var(--neutral-07);text-decoration:underline;text-underline-offset:2px}
.dp .qa-meta{margin-top:8px}
.dp .related-item{display:flex;gap:12px;width:100%;padding:10px 0;border-bottom:1px solid var(--neutral-02);text-align:left}
.dp .related-item__text{display:flex;flex-direction:column;gap:4px;justify-content:center;min-width:0}
.dp .related-item__name{font-size:15px;font-weight:700}
.dp .related-thumb{position:relative;flex-shrink:0;width:72px;height:72px}
.dp .related-thumb__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:12px}
.dp .slot{position:relative;display:block;width:72px;height:72px;overflow:hidden;border-radius:12px;background:rgba(127,127,127,.08);flex-shrink:0}
.dp .slot__empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px;font-size:11px;color:var(--neutral-07);text-align:center}
.dp .slot__empty svg{width:20px;height:20px;opacity:.45}

/* 모바일 */
.handle,.sheet-title,.viewtoggle{display:none}
@media (max-width:760px){
  .nav{height:auto;padding:12px 16px 8px;grid-template-columns:1fr;border-bottom:0}
  .logo,.nav-right{display:none}
  .search{width:100%;min-width:0;padding:8px 8px 8px 18px;gap:10px;box-shadow:var(--elev-03)}
  .search .segs{flex:1;min-width:0;gap:10px;overflow:hidden}
  #seg-series,.search .divider.d2{display:none}
  .search input{width:0;flex:1;min-width:0}
  .channels{padding:6px 16px 0;gap:22px}
  .tab{font-size:11px;padding-bottom:10px}
  .body{display:block;position:relative}
  .mapwrap{position:absolute;inset:0;z-index:0}
  .togglelist,.status{display:none}
  .ctrls{top:12px;right:12px}
  /* 모바일: 지도를 화면 전체로 쓰고 목록은 '목록 보기' 버튼으로만 연다 (2026-10-15 사용자: 하단 목록이 지도를 가림) */
  .panel{position:absolute;left:0;right:0;bottom:0;z-index:12;height:calc(100% - 8px);background:var(--shade-01);border-radius:16px 16px 0 0;box-shadow:0 -6px 16px rgba(0,0,0,.12);padding:0 16px 96px;overflow-y:auto;transform:translateY(100%);visibility:hidden;transition:transform .25s ease,visibility .25s}
  .app.sheet-open .panel{transform:none;visibility:visible}
  /* Airbnb 지도/목록 전환 버튼 — 검은 알약 */
  .viewtoggle{display:flex;position:absolute;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:16;align-items:center;gap:8px;height:48px;padding:0 20px;border-radius:24px;background:var(--shade-02);color:var(--shade-01);font-size:14px;font-weight:600;box-shadow:var(--elev-03);white-space:nowrap}
  .viewtoggle:active{transform:translateX(-50%) scale(.96)}
  .app.popup-open .viewtoggle{display:none}
  .handle{display:block;position:sticky;top:0;width:100%;height:28px;background:var(--shade-01);z-index:2}
  .handle::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--neutral-04);margin:10px auto 0}
  .sheet-title{display:block;text-align:center;font-size:14px;font-weight:600;margin:0 0 16px}
  .callout,.panel-head h2{display:none}
  .panel-head{justify-content:center}
  .grid{grid-template-columns:1fr;gap:28px}
  .card .img{aspect-ratio:16/10}
  #popup-mobile{display:block;position:absolute;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:14}
  #popup-mobile[hidden]{display:none}
  #popup-mobile .mapcard{width:100%}
  /* 매장 상세 = 화면 전체 시트 (뒤로 → 지도·카드 그대로) */
  .dp{position:fixed;inset:0;width:auto;z-index:40;border-right:0;padding-bottom:env(safe-area-inset-bottom)}
  .app.detail-open .viewtoggle{display:none}
  .dp-bar{height:56px;padding:0 12px;padding-top:env(safe-area-inset-top);box-sizing:content-box}
  .dp-back-pc{display:none}
  .dp-back-mo{display:inline}
  .dp .sp{padding:14px 16px 40px}
  /* 모바일 상세(2026-10-18 사용자: 참고 사이트처럼) = 지도 위에 뜬 창(가장자리 10px, 바깥 어둡게), 영상 → 매장 정보 → 광고 → 메뉴 */
  .dp{inset:10px;border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.3)}
  .dp-bar{border-radius:16px 16px 0 0;padding-top:0}
  .dp .sp-layout{display:flex;flex-direction:column}
  .dp-scrim{position:fixed;z-index:39}
  .dp .sp-name{font-size:26px}
}
.dp [tabindex="-1"]:focus{outline:none}   /* 상세를 열 때 이름으로 옮긴 포커스(프로그램 이동)는 테두리 없이 — 2026-10-18 */
/* 광고가 채워지지 않으면(unfilled) 빈 칸·'광고' 표시를 숨긴다 — 2026-10-18 */
.list-ad:has(ins[data-ad-status="unfilled"]),.dp .dp-ad:has(ins[data-ad-status="unfilled"]){display:none}
/* 상세 창 모양(2026-10-18 사용자: 참고 사이트처럼) — 빨간 '닫기', 매장 정보는 상자 없이 분류 배지 → 큰 이름 */
.dp-back{background:var(--primary-02);border-color:var(--primary-02);color:#fff;font-weight:700;box-shadow:0 2px 6px rgba(255,56,92,.3)}
.dp-back:hover{background:var(--primary-01);border-color:var(--primary-01)}
.dp .sp-info{display:flex;flex-direction:column;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent}
.dp .sp-info__label{display:none}
.dp .sp-cat{order:-1;align-self:flex-start;margin:0 0 10px;padding:4px 12px;border-radius:500px;background:var(--primary-02);color:#fff;font-size:13px;font-weight:700}
.dp .sp-name{font-size:32px;line-height:1.25}
/* 상단 바 버튼 줄(2026-10-18 사용자: 유튜브에서 보기·공유하기를 위로) — PC: 닫기 · 매장 이름 … 오른쪽 버튼 / 모바일: 닫기 옆 버튼, 이름은 본문에 */
.dp-actions{margin-left:auto;flex:none}
.dp-actions .sp-actions{display:flex;flex-wrap:nowrap;gap:8px;margin:0}
.dp-bar .dp-actions .sp-btn{height:40px;min-height:0;padding:0 16px;font-size:14px;white-space:nowrap}
@media (max-width:760px){
  .dp-title{display:none}
  .dp-actions{margin-left:0}
  .dp-actions .sp-actions{gap:6px}
  .dp-bar .dp-actions .sp-btn{height:40px;min-height:0;padding:0 12px;font-size:13px}
}
/* 상단 검색창 양옆 광고(PC) — 위치는 map.js placeTopAds 가 잡는다. '광고' 표시 위, 광고 아래 */
.top-ad{position:absolute;z-index:1;line-height:0}
.top-ad[hidden]{display:none}
.top-ad .ad-label{margin:0 0 2px;line-height:12px;font-size:10px}
.top-ad:has(ins[data-ad-status="unfilled"]){display:none}
@media (max-width:760px){.top-ad{display:none}}
.dp .dp-ad-top{min-height:0;margin:0 0 16px;text-align:center;line-height:0}
.dp .dp-ad-top-in{display:inline-block;text-align:left}
.dp .dp-ad-top .ad-label{line-height:14px}
/* PC 상세: 영상 제목 줄 오른쪽 '네이버 플레이스·길찾기'(2026-10-18 사용자) */
.dp .dp-vrow{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:18px 0 0}
.dp .dp-vrow-l{min-width:0}
.dp .dp-vrow .sp-vtitle{margin-top:0}
.dp .dp-vrow .sp-info__btns{flex:none;display:flex;gap:8px}
.dp .dp-vrow .sp-info__btns .sp-btn{min-height:0;height:44px;padding:0 20px;font-size:14px;white-space:nowrap}
/* 쿠팡 파트너스 팝업 — 지도 오른쪽 아래(PC) / '목록 보기' 버튼 위(모바일). 목록 시트·상세 창보다 아래 층 */
.cp-pop{position:absolute;right:24px;bottom:24px;z-index:9;width:320px;padding:10px 10px 0;border-radius:14px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.22);overflow:hidden}
.cp-pop[hidden]{display:none}
.cp-pop__slot{display:flex;justify-content:center;min-height:250px}
.cp-pop__note{margin:6px 2px 8px;font-size:10.5px;line-height:1.4;color:var(--neutral-07)}
.cp-pop__bar{display:flex;justify-content:space-between;margin:0 -10px;background:#8c8c8c}
.cp-pop__bar button{padding:12px 14px;border:0;background:transparent;color:#fff;font-size:13px;font-weight:700;cursor:pointer}
.cp-pop__bar button:hover{text-decoration:underline}
@media (max-width:760px){
  .cp-pop{right:50%;transform:translateX(50%);bottom:calc(84px + env(safe-area-inset-bottom));width:min(320px,calc(100% - 32px))}
  .app.sheet-open .cp-pop,.app.popup-open .cp-pop,.app.detail-open .cp-pop{display:none}
}
/* 필터(2026-10-18 3차 사용자: 필터 줄 없앰) — '필터' 버튼 = PC 목록 위 안내 상자 오른쪽 / 모바일 지도 왼쪽 위, 누르면 버튼 바로 아래로 펼침.
   색 = 디자인 규칙(연핑크 #FFF0F3 · 진핑크 글자 #A6294F · 브랜드 #FF385C) */
#series[hidden]{display:none}
.fchip{display:inline-flex;align-items:center;gap:6px;flex:none;height:36px;padding:0 14px;border:0;border-radius:500px;background:#FFF0F3;color:#A6294F;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer}
.fchip:hover{background:#FFE1E8}
.fchip[aria-pressed="true"]{background:var(--primary-02);color:#fff}
.fx{margin-left:2px;font-size:11px;opacity:.8}
.freset{background:#fff;border:1px solid #F5B5C3;color:#A6294F}
.fopen{flex:none;align-self:center;display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 16px;border:1px solid #F5B5C3;border-radius:500px;background:#FFF0F3;color:#A6294F;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 2px 6px rgba(255,56,92,.12)}
.fopen:hover{background:#FFE1E8}
.fopen[aria-expanded="true"]{background:var(--primary-02);border-color:var(--primary-02);color:#fff}
.fopen--map{display:none}
.fbadge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--primary-02);color:#fff;font-size:12px;font-weight:700}
.fopen[aria-expanded="true"] .fbadge{background:#fff;color:var(--primary-02)}
.fbadge[hidden]{display:none}
.callout{align-items:center}
.fsel{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 20px}
.fsel[hidden]{display:none}
.fpanel{position:fixed;z-index:60;display:flex;flex-direction:column;background:#fff;border:1px solid #F5D3DB;border-radius:18px;box-shadow:0 16px 40px rgba(0,0,0,.2);animation:fdrop .18s ease-out}
@keyframes fdrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.fpanel[hidden]{display:none}
.fpanel__head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 8px}
.fpanel__head h2{margin:0;font-size:18px;font-weight:800}
.fpanel__x{border:0;background:transparent;font-size:20px;line-height:1;padding:6px;cursor:pointer;color:var(--neutral-08)}
.fpanel__body{overflow-y:auto;padding:0 20px 8px;overscroll-behavior:contain}
.fpanel__body section{padding:10px 0 6px}
.fpanel__body h3{margin:0 0 10px;font-size:15px;font-weight:800}
.fpanel__chips{display:flex;flex-wrap:wrap;gap:8px}
.fpanel__foot{display:flex;gap:8px;padding:12px 20px 16px;border-top:1px solid var(--neutral-02)}
.fpanel__reset{flex:none;height:48px;padding:0 18px;border:1px solid #F5B5C3;border-radius:12px;background:#fff;color:#A6294F;font-weight:700;cursor:pointer}
.fpanel__apply{flex:1;height:48px;border:0;border-radius:12px;background:var(--primary-02);color:#fff;font-size:15px;font-weight:800;cursor:pointer}
.fpanel__apply:hover{background:var(--primary-01)}
.fscrim{position:fixed;inset:0;z-index:59;background:rgba(0,0,0,.28)}
.fscrim[hidden]{display:none}
@media (max-width:760px){
  .fopen--map{display:inline-flex;position:absolute;left:12px;top:12px;z-index:5;height:40px;font-size:14px;background:#fff;box-shadow:var(--elev-03)}
  .fchip{height:34px;padding:0 12px;font-size:13px}
}
/* PC 상세 창(10-18): 매장 정보는 왼쪽 영상 아래, 오른쪽 칸 = 광고(쿠팡 배너 → 애드센스 300×600), 창을 내려도 따라옴 */
.dp .dp-info-left{margin:20px 0 24px;padding:24px;border:1px solid #F0E3E7;border-radius:18px;background:#fff}
.dp .dp-side{display:flex;flex-direction:column;align-items:center;gap:20px}
@media (min-width:1024px){.dp .dp-side{position:sticky;top:76px}}   /* 상단 바(60px) 아래 */
.dp .dp-side__cp{width:300px}
.dp .dp-side__cp[hidden]{display:none}
.dp .dp-side__slot{display:flex;justify-content:center;min-height:250px}
.dp .dp-side__ad{width:300px;line-height:0}
.dp .dp-side__ad .ad-label{line-height:14px}
.dp .dp-side__ad:has(ins[data-ad-status="unfilled"]){display:none}
/* 매장 정보 상자 윗줄(10-18): 왼쪽 분류·이름 / 오른쪽 영상 제목·채널·조회수 + 네이버 플레이스·길찾기 */
.dp .dp-ihead{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.dp .dp-ihead__l{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.dp .dp-ihead__l .sp-cat{order:0;margin:0 0 10px}
.dp .dp-ihead .dp-vrow{flex:0 1 auto;max-width:58%;flex-direction:column;align-items:flex-end;gap:12px;margin:0;text-align:right}
.dp .dp-ihead .sp-vtitle{margin:0 0 6px;font-size:16px;line-height:1.4}
.dp .dp-ihead .sp-vmeta{justify-content:flex-end}
.dp .dp-ihead .sp-vstats{margin-top:4px}
.dp .dp-ihead .sp-info__btns .sp-btn{height:42px;padding:0 16px;font-size:14px}

/* ===== Food Scanner (2026-10-18) — 한국 맛집스캐너 map.css 그대로 + 아래만 덧붙임 ===== */
/* 글꼴: 일본어·중국어·태국어 글자는 Pretendard 에 없으므로 시스템 글꼴로 이어 받는다 */
body,.sp{font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,'Hiragino Sans','Noto Sans JP','Noto Sans SC','Noto Sans TC','Noto Sans Thai',sans-serif}
/* Leaflet(OpenStreetMap) — 네이버 지도 마커·카드와 같은 모양이 되도록 기본 상자를 걷어낸다 */
.leaflet-container{font:inherit;background:var(--neutral-01)}
.fs-mk{background:none;border:0}
.fs-pop .leaflet-popup-content-wrapper{padding:0;background:transparent;box-shadow:none;border-radius:0}
.fs-pop .leaflet-popup-content{margin:0;width:auto!important;line-height:inherit;font-size:inherit}
.fs-pop .leaflet-popup-tip-container{display:none}
.fs-pop a.leaflet-popup-close-button{display:none}
.leaflet-control-attribution{font-size:10px}
@media (max-width:760px){.leaflet-bottom.leaflet-right{bottom:calc(76px + env(safe-area-inset-bottom))}}
/* 언어 메뉴 — 헤더 오른쪽 '🌐 English ▼'(PC) / 지도 오른쪽 위 🌐(모바일, 헤더 오른쪽이 숨겨짐) */
.lang-btn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.lang-btn[aria-expanded="true"]{background:#FFE1E8}
.ctrl-lang{display:none;font-size:18px}
.lang-menu{position:fixed;z-index:70;min-width:200px;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid #F5D3DB;border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.2)}
.lang-menu[hidden]{display:none}
.lang-menu button{display:block;width:100%;padding:10px 14px;border-radius:9px;text-align:left;font-size:15px}
.lang-menu button:hover,.lang-menu button:focus-visible{background:#FFF0F3}
.lang-menu button[aria-selected="true"]{background:var(--primary-02);color:#fff;font-weight:700}
@media (max-width:760px){.ctrl-lang{display:grid}}
.disclaimer{margin:24px 0 0;font-size:12px;line-height:1.5;color:var(--neutral-07)}
/* 광고 칸이 비어 있으면(해외 사이트 광고 단위 승인 전) 상세 창 오른쪽 칸을 접는다 — 빈 영역이 화면을 차지하지 않게 */
.dp .sp-layout:has(.dp-side:empty){grid-template-columns:minmax(0,1fr)}
.dp .dp-side:empty{display:none}
/* 정적 매장 페이지(/restaurant/<slug>/) — 지도 메인의 상세 창(.dp) 모양을 일반 문서 흐름으로 */
html:has(body.page),body.page{height:auto;overflow:auto}
.page-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;height:auto;min-height:72px;padding:12px 24px}
.page-nav .logo{display:flex}
.page-maplink{margin-left:auto}
.page-lang{position:relative}
.page-lang summary{list-style:none;cursor:pointer}
.page-lang summary::-webkit-details-marker{display:none}
.page-lang ul{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:200px;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid #F5D3DB;border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.2)}
.page-lang a{display:block;padding:9px 14px;border-radius:9px}
.page-lang a:hover{background:#FFF0F3}
.page-lang a[aria-current]{background:var(--primary-02);color:#fff;font-weight:700}
.dp.dp--page{position:static!important;inset:auto!important;transform:none!important;width:auto!important;max-width:1280px;margin:0 auto;border:0;border-radius:0;box-shadow:none;overflow:visible;z-index:auto}
@media (min-width:1024px){.dp.dp--page .sp-layout{grid-template-columns:minmax(0,1fr) 350px}}
@media (max-width:760px){
  .page-nav{padding:10px 12px;gap:8px}
  .page-nav .logo{display:flex;font-size:17px}
  .page-nav .nav-link{padding:9px 12px;font-size:13px}
}
/* Leaflet 판(pane) z-index(400~1000)가 상세 창·필터 창 위로 올라오지 않게 지도 영역을 따로 쌓는다 */
.mapwrap{isolation:isolate}
/* 카드의 '○○ 채널 소개' 줄 */
.card .by{display:flex;align-items:center;gap:5px;margin-top:2px}
.card .by .yt,.mapcard .meta .yt{display:inline-block;width:12px;height:9px;border-radius:2px;background:var(--primary-02);position:relative;flex:none;vertical-align:middle}
.card .by .yt::after,.mapcard .meta .yt::after{content:"";position:absolute;left:4.5px;top:2px;border-left:4px solid #fff;border-top:2.5px solid transparent;border-bottom:2.5px solid transparent}
/* 2026-10-19 상세 버튼 통일 — Google Maps·Official Website·Instagram·Watch on YouTube 같은 크기·모양, 2칸 격자(홀수면 마지막 한 줄 전체), 글자가 길면 줄바꿈(가로 넘침 없음) */
.sp .sp-info__btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sp .sp-info__btns.is-odd>:last-child{grid-column:1/-1}
.sp .sp-btn--link,.sp a.sp-btn--link{min-height:46px;height:auto!important;padding:10px 12px!important;border:1px solid #DDDDDD;border-radius:10px;background:#FFFFFF;color:#222222;font-size:14px!important;font-weight:700;white-space:normal!important;text-align:center;line-height:1.3}
.sp .sp-btn--link:hover{background:#FFF0F3;border-color:#F5B5C3}
.dp .dp-vrow .sp-info__btns,.dp .dp-ihead .sp-info__btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(380px,100%)}
.dp .dp-ihead .dp-vrow{align-items:stretch}
/* 퍼가기 막힌 영상 안내(썸네일 위) */
.sp-player{position:relative}
.sp-noembed{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;background:rgba(17,17,17,.78);color:#fff;text-align:center;font-size:14px;line-height:1.5;border-radius:inherit}
.sp-noembed p{margin:0;max-width:420px}
.sp-noembed .sp-btn--link{min-width:200px}
/* 카드 영어 상호 줄 */
.card .alt{margin-top:-2px}
.mapcard .meta.alt{margin-top:4px;color:var(--neutral-08)}