/* 맛집천재 — 동네 미니맵 (색은 맛집 → 색상 설정 값이 인라인으로 덮어씀) */
.mzam{--mzam-acc:#c8f04a;--mzam-on:#0e0e0e;
  --mzam-chip:#262626;--mzam-chipink:#cfcfcf;
  --mzam-surf:#1c1c1c;--mzam-ink:#ffffff;
  --mzam-mute:#8a8a8a;--mzam-line:#2a2a2a;
  --mzam-h:560px;--mzam-r:22px;--mzam-mapw:52%;--mzam-gap:40px;--mzam-fs:30px;--mzam-fs-on:44px;--mzam-tfs:20px;
  display:grid;grid-template-columns:var(--mzam-mapw) minmax(0,1fr);column-gap:var(--mzam-gap);
  grid-template-areas:"map head" "map chips" "map list" "map hint";grid-template-rows:auto auto auto 1fr;
  color:var(--mzam-ink);font-family:inherit;line-height:1.5;text-align:left}
.mzam.mzam-R{grid-template-columns:minmax(0,1fr) var(--mzam-mapw);grid-template-areas:"head map" "chips map" "list map" "hint map"}
.mzam *,.mzam *::before,.mzam *::after,.mzam-box,.mzam-box *{box-sizing:border-box}
.mzam a{text-decoration:none;box-shadow:none}
.mzam .mzam-map{grid-area:map;min-width:0;align-self:start;position:sticky;top:24px}
.mzam .mzam-head{grid-area:head;min-width:0}
.mzam .mzam-t{margin:0 0 6px;padding:0;font-size:var(--mzam-tfs);font-weight:800;line-height:1.3;letter-spacing:-.02em;color:var(--mzam-ink);text-transform:none}
.mzam .mzam-s{margin:0;font-size:14px;color:var(--mzam-mute)}

/* 구 칩 */
.mzam .mzam-chips{grid-area:chips;position:relative;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 14px;min-width:0}
.mzam .mzam-chip{-webkit-appearance:none;appearance:none;margin:0;border:0;border-radius:999px;padding:0 17px;min-height:44px;
  background:var(--mzam-chip);color:var(--mzam-chipink);font:inherit;font-size:14px;font-weight:700;line-height:1;
  letter-spacing:-.01em;text-transform:none;box-shadow:none;cursor:pointer;white-space:nowrap;transition:background-color .18s,color .18s}
.mzam .mzam-chip:hover{background:var(--mzam-chip);color:var(--mzam-ink)}
.mzam .mzam-chip[aria-pressed="true"],.mzam .mzam-chip[aria-pressed="true"]:hover{background:var(--mzam-acc);color:var(--mzam-on)}
.mzam .mzam-chip:focus-visible,.mzam .mzam-go:focus-visible,.mzam .mzam-ar:focus-visible,.mzam .mzam-more:focus-visible,
.mzam-box button:focus-visible,.mzam-box a:focus-visible{outline:2px solid var(--mzam-acc);outline-offset:3px}

/* 동네 목록 */
.mzam .mzam-list{grid-area:list;min-width:0}
.mzam .mzam-ul{list-style:none;margin:0;padding:0}
.mzam .mzam-ul[hidden]{display:none}
.mzam .mzam-row{display:flex;align-items:center;gap:12px;margin:0;padding:16px 0;border-bottom:1px solid var(--mzam-line);list-style:none}
.mzam .mzam-row::before,.mzam .mzam-row::marker{content:none}
.mzam .mzam-go{-webkit-appearance:none;appearance:none;flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;
  margin:0;padding:4px 0;border:0;background:none;box-shadow:none;color:var(--mzam-ink);font:inherit;text-align:left;
  font-size:var(--mzam-fs);font-weight:800;line-height:1.15;letter-spacing:-.035em;text-transform:none;cursor:pointer;
  transition:font-size .28s cubic-bezier(.2,.8,.2,1),color .2s}
.mzam .mzam-go:hover,.mzam .mzam-go:focus{background:none;color:var(--mzam-ink)}
.mzam .mzam-row.on .mzam-go{font-size:var(--mzam-fs-on)}
.mzam .mzam-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mzam .mzam-cnt{flex:none;font-style:normal;font-size:14px;font-weight:600;letter-spacing:0;color:var(--mzam-mute)}
.mzam .mzam-ar{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--mzam-acc);transition:transform .2s,background-color .2s}
.mzam .mzam-ar:hover{color:var(--mzam-acc);background:var(--mzam-chip);transform:translate(2px,-2px)}
.mzam .mzam-ar svg{width:22px;height:22px;display:block}
.mzam .mzam-hint{grid-area:hint;margin:22px 0 0;font-size:13px;color:var(--mzam-mute)}

/* 지도 */
.mzam-box{position:relative;height:var(--mzam-h);scroll-margin:72px 0 16px;border-radius:var(--mzam-r);overflow:hidden;background:var(--mzam-chip);isolation:isolate}
.mzam-box .mzam-canvas{position:absolute;inset:0;width:100%;height:100%}
.mzam-box .mzam-canvas img{max-width:none!important;max-height:none!important}
.mzam-box .mzam-badge{position:absolute;top:14px;left:14px;z-index:5;padding:8px 12px;border-radius:999px;background:rgba(18,18,18,.88);
  color:#fff;font-size:12px;font-weight:700;line-height:1.2;pointer-events:none}
.mzam-box .mzam-fab{position:absolute;right:14px;bottom:44px;z-index:5;display:flex;flex-direction:column;gap:8px}
.mzam-box .mzam-fab button{-webkit-appearance:none;appearance:none;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;
  border:0;border-radius:12px;background:rgba(22,22,22,.92);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.25);cursor:pointer}
.mzam-box .mzam-fab button:hover{background:#000;color:var(--mzam-acc)}
.mzam-box .mzam-fab svg{width:20px;height:20px;display:block}
.mzam-box .mzam-fab .mzam-full .i-out{display:none}
.mzam-box.is-full .mzam-fab .mzam-full .i-in{display:none}
.mzam-box.is-full .mzam-fab .mzam-full .i-out{display:block}
.mzam-box .mzam-card{position:absolute;left:12px;bottom:12px;z-index:6;max-width:calc(100% - 84px);display:flex;align-items:center;gap:10px;
  padding:10px 10px 10px 14px;border-radius:14px;background:var(--mzam-surf);color:var(--mzam-ink);box-shadow:0 6px 24px rgba(0,0,0,.35)}
.mzam-box .mzam-card[hidden]{display:none}
.mzam-box .mzam-card b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:800}
.mzam-box .mzam-card a{flex:none;padding:8px 12px;border-radius:999px;background:var(--mzam-acc);color:var(--mzam-on);font-size:13px;font-weight:800;text-decoration:none}
.mzam-box .mzam-card button{-webkit-appearance:none;appearance:none;flex:none;width:32px;height:32px;margin:0;padding:0;border:0;border-radius:50%;
  background:transparent;color:var(--mzam-mute);font-size:18px;line-height:1;cursor:pointer}
.mzam-box .mzam-msg{position:absolute;left:50%;top:58px;z-index:7;transform:translate(-50%,-6px);max-width:86%;padding:9px 14px;border-radius:999px;
  background:rgba(18,18,18,.92);color:#fff;font-size:13px;font-weight:600;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.mzam-box .mzam-msg.on{opacity:1;transform:translate(-50%,0)}
.mzam-box .mzam-fail{position:absolute;inset:0;display:none;place-items:center;padding:24px;text-align:center;color:var(--mzam-mute);font-size:14px}
.mzam-box.no-map .mzam-fail{display:grid}
.mzam-box.no-map .mzam-fab,.mzam-box.no-map .mzam-canvas{display:none}
.mzam .mzam-more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:var(--mzam-chipink);font-size:13px;font-weight:700}
.mzam .mzam-more:hover{color:var(--mzam-acc)}
.mzam .mzam-more svg{width:12px;height:12px}

/* 핀 — 물방울 모양 (기존 맛집 지도와 같은 형태) */
.mzam-pw{position:relative;width:var(--s);height:var(--s);cursor:pointer;transform-origin:50% 121%;transition:transform .18s,opacity .18s,filter .18s}
.mzam-p2{position:absolute;inset:0;border-radius:50% 50% 50% 3px;transform:rotate(-45deg);background:var(--mzam-acc,#c8f04a);padding:3px;
  box-shadow:0 5px 14px rgba(0,0,0,.38)}
.mzam-p2 i{display:block;width:100%;height:100%;border-radius:50%;background:#1c1c1c center/cover no-repeat;transform:rotate(45deg)}
.mzam-p2 i.e{position:relative;background:var(--mzam-on,#0e0e0e)}
.mzam-p2 i.e::after{content:"";position:absolute;left:50%;top:50%;width:34%;height:34%;transform:translate(-50%,-50%);border-radius:50%;background:var(--mzam-acc,#c8f04a)}
.mzam-pw.off{opacity:.6;transform:scale(.72);filter:grayscale(.75)}
.mzam-pw.off .mzam-p2{background:#9a9a9a}
.mzam-pw.act{transform:scale(1.18)}
.mzam-pw.act .mzam-p2{background:#111}
.mzam-pw b{position:absolute;left:50%;top:calc(var(--s) * 1.21 + 4px);transform:translateX(-50%);max-width:150px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;padding:3px 8px;border-radius:6px;background:rgba(14,14,14,.92);color:#fff;font-size:11.5px;font-weight:700;line-height:1.3;pointer-events:none}
.mzam-dot{display:block;position:relative;width:calc(var(--d) + 12px);height:calc(var(--d) + 12px);cursor:pointer}
.mzam-dot::after{content:"";position:absolute;left:50%;top:50%;width:var(--d);height:var(--d);transform:translate(-50%,-50%);border-radius:50%;
  background:var(--mzam-acc,#c8f04a);border:2px solid #0e0e0e;box-shadow:0 2px 6px rgba(0,0,0,.35);box-sizing:border-box;transition:transform .18s}
.mzam-dot.off::after{background:#8a8a8a;border-color:#fff;transform:translate(-50%,-50%) scale(.7)}
.mzam-dot.act::after{background:#111;border-color:var(--mzam-acc,#c8f04a);transform:translate(-50%,-50%) scale(1.25)}
.mzam-box .mzam-ci{flex:none;width:40px;height:40px;margin-left:-4px;border-radius:10px;background:#262626 center/cover no-repeat}
.mzam-me{display:block;width:18px;height:18px;border-radius:50%;background:#2f6bff;border:3px solid #fff;box-shadow:0 0 0 6px rgba(47,107,255,.22)}

/* 전체 화면 */
.mzam-box.is-full{position:fixed;inset:0;z-index:999999;height:100vh;height:100dvh;border-radius:0}
.mzam-box.is-full .mzam-fab{bottom:calc(44px + env(safe-area-inset-bottom,0px))}
html.mzam-lock,html.mzam-lock body{overflow:hidden}

@media (max-width:767px){
  .mzam{--mzam-h:320px;--mzam-fs:24px;--mzam-fs-on:32px;--mzam-gap:0px;
    grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"head" "chips" "map" "list" "hint"}
  .mzam.mzam-R{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "chips" "map" "list" "hint"}
  .mzam .mzam-map{position:static;margin-bottom:8px}
  .mzam.mzam-Mtop{grid-template-areas:"map" "head" "chips" "list" "hint"}
  .mzam.mzam-Mtop .mzam-map{margin:0 0 22px}
  .mzam.mzam-Mbot{grid-template-areas:"head" "chips" "list" "hint" "map"}
  .mzam.mzam-Mbot .mzam-map{margin:22px 0 0}
  .mzam-box{height:var(--mzam-mh,var(--mzam-h))}
  .mzam .mzam-chips{flex-wrap:nowrap;overflow-x:auto;margin:18px 0 16px;padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .mzam .mzam-chips::-webkit-scrollbar{display:none}
  .mzam .mzam-chip{flex:none}
  .mzam .mzam-row{padding:12px 0}
}
@media (prefers-reduced-motion:reduce){
  .mzam *,.mzam-box *{transition:none!important}
}