/* ===== Map ===== */
.map-wrap{max-width:1280px; margin:0 auto; padding:56px 32px 80px}
.map-head .page-sub{margin-bottom:0}
.map-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin-bottom:24px;
}
.map-stat{display:flex; align-items:baseline; gap:8px}
.map-stat-num{font-family:var(--serif); font-size:34px; font-weight:600; color:var(--navy)}
.map-stat-lbl{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute)}

.map-layout{display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:start}

.map-canvas{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  background:radial-gradient(120% 100% at 50% 0%, #2A3B4D 0%, #1E2B38 55%, #16202B 100%);
  border-radius:10px; border:1px solid var(--navy3);
  box-shadow:inset 0 0 80px rgba(0,0,0,.45), 0 18px 40px rgba(26,37,48,.18);
}
.map-world{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  fill:#33475C; stroke:#465D75; stroke-width:1; stroke-linejoin:round;
}
.map-grid{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(197,160,89,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(197,160,89,.07) 1px, transparent 1px);
  background-size:8.333% 12.5%;
}
.map-legend{
  position:absolute; left:16px; bottom:14px; display:flex; align-items:center; gap:8px;
  font-size:10.5px; letter-spacing:.06em; color:rgba(249,248,244,.55); pointer-events:none;
}
.map-legend-dot{width:8px; height:8px; border-radius:50%; background:var(--gold); flex:none}

/* --- Pins --- */
.map-pin{
  position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px; z-index:4;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  border-radius:50%; outline-offset:3px;
}
.map-pin-dot{
  width:13px; height:13px; border-radius:50%; background:var(--gold);
  border:2px solid rgba(255,255,255,.9); box-shadow:0 2px 8px rgba(0,0,0,.5);
  transition:transform .18s ease, background .18s ease;
}
.map-pin-pulse{
  position:absolute; width:13px; height:13px; border-radius:50%;
  box-shadow:0 0 0 0 rgba(197,160,89,.55); animation:pinPulse 2.6s ease-out infinite;
}
@keyframes pinPulse{
  0%{box-shadow:0 0 0 0 rgba(197,160,89,.5)}
  70%{box-shadow:0 0 0 15px rgba(197,160,89,0)}
  100%{box-shadow:0 0 0 0 rgba(197,160,89,0)}
}
.map-pin:hover, .map-pin:focus-visible, .map-pin.is-active{z-index:6}
.map-pin:hover .map-pin-dot,
.map-pin:focus-visible .map-pin-dot,
.map-pin.is-active .map-pin-dot{transform:scale(1.5); background:#fff}
.map-pin:hover .map-pin-pulse,
.map-pin.is-active .map-pin-pulse{animation:none}

/* --- Hover label --- */
.map-label{
  position:absolute; transform:translate(-50%, calc(-100% - 22px));
  background:var(--navy); color:#fff; padding:8px 12px; border-radius:6px;
  white-space:nowrap; pointer-events:none; z-index:5;
  border:1px solid var(--navy3); box-shadow:0 10px 24px rgba(0,0,0,.4);
  display:flex; flex-direction:column; gap:2px;
  opacity:0; transition:opacity .15s ease, transform .15s ease;
}
.map-label::after{
  content:""; position:absolute; left:50%; bottom:-5px; width:9px; height:9px;
  margin-left:-4.5px; background:var(--navy); border-right:1px solid var(--navy3);
  border-bottom:1px solid var(--navy3); transform:rotate(45deg);
}
.map-label.is-visible{opacity:1; transform:translate(-50%, calc(-100% - 16px))}
.map-label-name{font-size:12.5px; font-weight:600}
.map-label-meta{font-size:10.5px; color:var(--gold-light); letter-spacing:.04em}

/* --- Side list --- */
.map-list{
  background:var(--white); border:1px solid var(--line); border-radius:10px;
  overflow:hidden; max-height:calc(100vw * 0.44); overflow-y:auto;
}
.map-list-head{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute);
  font-weight:700; padding:14px 16px; border-bottom:1px solid var(--line); background:var(--cream);
  position:sticky; top:0;
}
.map-list-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 16px; border-bottom:1px solid #F0EDE6; cursor:pointer;
  transition:background .15s ease, box-shadow .15s ease;
}
.map-list-item:last-child{border-bottom:0}
.map-list-item:hover, .map-list-item:focus-visible, .map-list-item.is-active{
  background:var(--cream); box-shadow:inset 3px 0 0 var(--gold);
}
.map-list-main{display:flex; flex-direction:column; gap:3px; min-width:0}
.map-list-name{font-size:13px; font-weight:600; color:var(--ink)}
.map-list-loc{font-size:11px; color:var(--mute)}
.map-list-rating{font-size:12px; font-weight:600; color:var(--gold-dark); flex:none}

@media (max-width:900px){
  .map-layout{grid-template-columns:1fr}
  .map-list{max-height:340px}
  .map-wrap{padding:40px 20px}
}

@media (prefers-reduced-motion:reduce){
  .map-pin-pulse{animation:none}
  .map-label{transition:none}
}