/* 全域地图页（/map）——对应 src/pages/map-page.js */
.map-screen { padding-bottom: 96px; background: #fffaf2; }
.map-header { padding: 8px 16px 7px; display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; }
.map-header h1 { color: var(--orange-dark); font: 800 25px/1 var(--font-serif); }
.map-search { height: 35px; padding: 0 12px; border-radius: 18px; background: white; box-shadow: var(--shadow-soft); color: var(--muted); text-align: left; font-size: 10px; }
.map-filters { padding: 4px 15px 9px; display: flex; gap: 8px; }
.map-filters button { padding: 7px 14px; border-radius: 17px; background: white; box-shadow: var(--shadow-soft); font-size: 11px; }
.map-filters button.is-active { background: var(--orange); color: white; }
.map-board { position: relative; height: 565px; overflow: hidden; border-radius: 24px 24px 0 0; }
.map-base { width: 100%; height: 100%; object-fit: cover; }
.facility-marker { position: absolute; transform: translate(-50%, -50%); transition: transform var(--dur-fast) var(--ease-out); }
.facility-marker.is-selected { transform: translate(-50%, -50%) scale(1.25); }
.facility-marker img { width: 24px; height: 24px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.2)); }
.map-selected-card { position: absolute; left: 12px; right: 12px; bottom: 13px; min-height: 95px; padding: 10px; display: grid; grid-template-columns: 88px 1fr auto; gap: 9px; align-items: center; border-radius: 18px; background: rgba(255,253,249,.96); box-shadow: var(--shadow); }
.map-selected-card img { width: 88px; height: 73px; border-radius: 13px; object-fit: cover; }
.map-selected-card strong, .map-selected-card span { display: block; }
.map-selected-card strong { font-size: 13px; }
.map-selected-card span { margin-top: 5px; color: var(--muted); font-size: 9px; }
.map-selected-card button { padding: 8px 10px; border-radius: 15px; background: var(--orange); color: white; font-size: 10px; }
.facility-dock { padding: 10px 8px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; border-radius: 0 0 20px 20px; background: white; }
.facility-dock button { padding: 6px 2px; display: grid; justify-items: center; gap: 3px; border-radius: 12px; color: var(--muted); font-size: 8px; }
.facility-dock button.is-active { background: var(--orange-soft); color: var(--orange-dark); }
.facility-dock img { width: 25px; height: 25px; object-fit: contain; }

.map-title { font-size: 25px; }
.map-marker { position: absolute; z-index: 4; transform: translate(-50%, -50%); }
.map-marker > span { width: 29px; height: 29px; display: grid; place-items: center; border: 3px solid white; border-radius: 50%; background: var(--jade); color: white; box-shadow: 0 4px 12px rgba(30,80,50,.26); font-size: 9px; }
.map-marker.tone-orange > span { background: var(--orange); }
.map-marker.tone-blue > span { background: var(--blue); }
.map-marker.tone-purple > span { background: #a77bd6; }
.map-marker.is-selected > span { width: 38px; height: 38px; background: var(--orange); }
.map-marker-label { position: absolute; left: 50%; top: 31px; max-width: 110px; padding: 4px 7px; overflow: hidden; border-radius: 9px; background: rgba(255,255,255,.96); box-shadow: var(--shadow-soft); color: var(--ink); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; transform: translateX(-50%); }
.map-controls { position: absolute; z-index: 8; right: 12px; bottom: 12px; display: grid; gap: 8px; }
.map-locate, .map-zoom { border-radius: 13px; background: white; box-shadow: var(--shadow); }
.map-locate { width: 42px; min-height: 50px; display: grid; place-items: center; }
.map-locate span { font-size: 20px; }
.map-locate small { font-size: 8px; }
.map-zoom { display: grid; overflow: hidden; }
.map-zoom button { width: 42px; height: 37px; font-size: 20px; }
.map-zoom button + button { border-top: 1px solid var(--line); }
.map-base { transform: scale(var(--map-scale, 1)); transition: transform 180ms ease; }
.map-screen .map-board { height: 500px; border-radius: 20px; }
.map-screen .facility-dock { margin: 0 12px; position: relative; z-index: 5; transform: translateY(-8px); border-radius: 17px; box-shadow: var(--shadow-soft); }
.map-screen .map-selected-card { position: relative; left: auto; right: auto; bottom: auto; min-height: 112px; margin: 2px 12px 12px; padding: 11px; grid-template-columns: 104px 1fr auto; }
.map-selected-copy h2 { font-size: 15px; }
.map-selected-heading { display: flex; justify-content: space-between; gap: 5px; }
.map-selected-tags { margin-top: 5px; display: flex; gap: 4px; flex-wrap: wrap; }
.map-selected-tags span { margin: 0; padding: 3px 6px; border-radius: 8px; background: var(--orange-soft); color: var(--orange-dark); font-size: 8px; }
.map-selected-meta { margin-top: 5px; color: var(--muted); font-size: 8px; }
.map-card-favorite { color: var(--muted); font-size: 18px; }
.map-card-favorite.is-active { color: var(--orange); }

@media (max-width: 380px) {
  .map-screen .map-board { height: 475px; }
}

/* marker 选中态过渡 */
.map-marker > span { transition: width var(--dur-med) var(--ease-out), height var(--dur-med) var(--ease-out), background-color var(--dur-fast) ease; }

/* marker 选中态过渡 */
.map-marker > span { transition: width var(--dur-med) var(--ease-out), height var(--dur-med) var(--ease-out), background-color var(--dur-fast) ease; }