/*!
 * 馬爾地夫互動地圖 —— 博海旅行社（交觀甲字第 7179 號）www.mle.com.tw
 * Copyright (c) 2026 博海旅行社. All rights reserved.
 * 未經書面授權不得重製或散布。Unauthorised copying is prohibited.
 */

/* =========================================================================
   度假村地圖 /maldives-map/ —— [mle_resort_map]
   只在有 shortcode 的頁面載入（見 inc/resort-map.php 的條件式 enqueue）。

   LOD 全部吃 .ml-rmap[data-zoom]（0=全國 1=環礁 2=近 3=最近），
   JS 只負責寫那個屬性，逐節點的顯示規則都在這裡——拖曳時才不會有 JS 工作。

   一個坑（goeurope 的 README 也記過）：**不要對 .ml-rmap-pin / .ml-rmap-atoll
   這種 <g> 直接下 opacity**，因為 group 裡包著 <text>，整組變淡會把標籤一起弄糊。
   要淡就淡直接子元素（> path、> circle）。
   ========================================================================= */

/* 色票定義在最外層的區塊上，裡面的 .ml-rmap 與浮動元件才吃得到。 */
.ml-rmap-section {
  /* 配色與形狀都來自 scripts/data/maldives-map.svg（自家稿子）：
     深海（地圖底色）→ 外圈淺海 → 內圈淺海 → 潟湖 → 島嶼。
     四層在同一份稿裡對齊好，所以不會有「環礁跟島嶼對不上」的問題。 */
  --rmap-sea: #3B82BD;
  --rmap-sea-outer: #5CA3D8;
  --rmap-sea-inner: #96CFF0;
  --rmap-lagoon: #DAF0FC;
  --rmap-island: #6FCB97;
  --rmap-reef-on: #1180B8;
  --rmap-lagoon-on: #C4E4F4;
  --rmap-pin: #0C5C84;
  --rmap-pin-sel: #E03B2F;
  --rmap-pin-on: #C9A24B;
  --rmap-label: #45606E;
  /* 經緯格線用深藍：白色會跟索引欄的白虛線混在一起，分不出哪條是引線；
     深色壓在海面上是另一個方向的分離——格線退到底層，白虛線浮在上面。 */
  --rmap-grid: 12, 60, 92;
  --rmap-air-int: #B4472F;
  --rmap-air-dom: #7C8FA0;

  /* 左右滿版。這個主題的 main 是 default layout（沒有 constrained 容器），
     區塊本來就橫跨整個視窗，所以 width:100% 就是滿版——不要改用
     `width:100vw; margin-inline: calc(50% - 50vw)`，100vw 不扣捲軸寬，
     在有捲軸的桌機上會多推出一條水平捲軸。 */
  width: 100%;
  margin-block: 0;
  overflow-x: clip;
  background: var(--rmap-sea);
}

.ml-rmap__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- 版面：左地圖、右度假村清單 ----------
   高度用視窗高而不是固定比例：欄寬由視窗決定，用 aspect-ratio 會在寬螢幕上
   變成一張超高的直圖。SVG 是 preserveAspectRatio="meet"，馬爾地夫這條南北長帶
   會置中等比縮放；左欄偏直立的比例正好貼合，留白也比滿版時少很多。 */

.ml-rmap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  height: min(88vh, 940px);
  min-height: 520px;
  border-block: 1px solid var(--c-gray-300);
}

/* 左欄是所有浮動元件的定位基準。 */
.ml-rmap__mapcol {
  position: relative;
  min-width: 0;
  background: var(--rmap-sea);
  border-inline-end: 1px solid var(--c-gray-300);
}

.ml-rmap__map { position: absolute; inset: 0; overflow: hidden; }

.ml-rmap__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  user-select: none;
  /* 拖曳需要 none；鎖住時退回 pan-y，手指才能把頁面捲過去（見 JS 的手勢閘門）。 */
  touch-action: none;
}

.ml-rmap__viewport.is-locked { touch-action: pan-y; cursor: default; }
.ml-rmap__viewport.is-dragging { cursor: grabbing; }
.ml-rmap__svg { display: block; width: 100%; height: 100%; }

/* 手勢閘門擺正中央：左下角已經被縮放鈕與說明佔住了。 */
.ml-rmap__gate {
  position: absolute;
  inset: 0;
  z-index: 4;
  margin: auto;
  width: max-content;
  height: max-content;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 999px;
  background: rgba(19, 42, 56, 0.82);
  color: #fff;
  font: inherit;
  font-size: var(--fs-xs);
  cursor: pointer;
}

/* 縮放鈕固定在右下、圖例在左下，兩邊不會互相疊到。 */
/* 全螢幕：地圖與右欄清單佔滿視窗，其餘頁面內容留在原地被蓋住。
   用 position: fixed 而不是 Fullscreen API —— iOS Safari 不支援對非 video 元素
   requestFullscreen，那條路在手機上直接不能用，而手機正是最需要這個功能的地方。 */
.ml-rmap.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9990;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  min-height: 0;
  margin: 0;
  border-radius: 0;
}

/* 背景頁面不要跟著捲——全螢幕時捲動應該只作用在右欄清單上。 */
body.ml-rmap-fullscreen { overflow: hidden; }

/* 浮動聯絡鈕（floating-contact-pro 外掛的 #fcp-root）在全螢幕時收起來：它固定在
   右下角，正好壓在縮放與全螢幕那組按鈕上。這是綁在外掛的 id 上的，外掛換版或
   換掉就會失效——屆時到頁面上找那顆鈕的 id 改這裡。 */
body.ml-rmap-fullscreen #fcp-root { display: none !important; }

.ml-rmap__controls {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--c-gray-300);
  box-shadow: 0 8px 24px rgba(19, 42, 56, 0.14);
}

.ml-rmap__controls button {
  min-width: 38px;
  padding: 0.45rem 0.5rem;
  border: 0;
  background: #fff;
  color: var(--c-text);
  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1.2;
  cursor: pointer;
}

.ml-rmap__controls button svg {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0 auto;
  fill: currentColor;
}

/* 展開／收合兩個圖示疊在同一顆按鈕裡，靠 aria-pressed 決定顯示哪一個——狀態只
   存在一個地方，JS 不必再去換 innerHTML。 */
.ml-rmap__controls button .ml-rmap__icon--compress,
.ml-rmap__controls button[aria-pressed="true"] .ml-rmap__icon--expand { display: none; }
.ml-rmap__controls button[aria-pressed="true"] .ml-rmap__icon--compress { display: block; }

.ml-rmap__controls button:hover { background: var(--c-accent-100); color: var(--c-accent-700); }

/* 圖例與說明在左下；右邊要留出縮放鈕的寬度。 */
.ml-rmap__footnote {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 4.6rem;
  z-index: 3;
  max-width: none;
  pointer-events: none;
}

.ml-rmap__legend {
  display: flex;
  flex-wrap: nowrap;
  gap: 0 0.7rem;
  margin: 0 0 0.4rem;
  white-space: nowrap;
  padding: 0.35rem 0.6rem;
  list-style: none;
  width: max-content;
  max-width: 100%;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--c-text);
  font-size: var(--fs-xs);
  backdrop-filter: blur(6px);
}

.ml-rmap__legend li {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.ml-rmap__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
}

.ml-rmap__key svg { width: 10px; height: 10px; }
.ml-rmap__key--int { border: 1.5px solid var(--rmap-air-int); }
.ml-rmap__key--int svg { fill: var(--rmap-air-int); }
.ml-rmap__key--dom { width: 13px; height: 13px; border: 1.2px solid var(--rmap-air-dom); }
.ml-rmap__key--dom svg { width: 8px; height: 8px; fill: var(--rmap-air-dom); }

/* 圖例裡的圖層開關。關掉時整個項目變淡並打叉，不是只有字變灰——圖例本身就是
   狀態顯示。 */
/* 合併的那顆帶兩個圖例方塊（方形＝居民島、菱形＝潛點），間距收窄一點。 */
.ml-rmap__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
}

.ml-rmap__toggle[aria-pressed="false"] { opacity: 0.45; text-decoration: line-through; }
.ml-rmap__toggle:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.ml-rmap__key--island {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: #F6DCA8;
  box-shadow: 0 0 0 1px rgba(12, 60, 92, 0.6);
}

.ml-rmap__key--spot {
  width: 11px;
  height: 11px;
  background: #BDEFFF;
  box-shadow: 0 0 0 1px rgba(12, 60, 92, 0.6);
  transform: rotate(45deg);
}

/* 三個補充圖層的開關關掉時，**只收起文字，圖示一律留著**：方塊、菱形、飛機徽章
   都還在，看得出「這裡有東西」；要知道是什麼再打開名字。全國視圖太吵的原因是
   字，不是那些小圖示。

   衝浪點跟居民島同一層（會去衝浪的人本來就住在那些島上），潛水點跟船宿航線同
   一層。航線是線不是圖示，跟著文字一起收。 */
.ml-rmap.is-off-islands .ml-rmap-islands .ml-rmap-island__label,
.ml-rmap.is-off-islands .ml-rmap-islands .ml-rmap-spot__leader,
.ml-rmap.is-off-islands .ml-rmap-mark--surf .ml-rmap-spot__label,
.ml-rmap.is-off-islands .ml-rmap-mark--surf .ml-rmap-spot__leader,
.ml-rmap.is-off-dive .ml-rmap-mark--dive .ml-rmap-spot__label,
.ml-rmap.is-off-dive .ml-rmap-mark--dive .ml-rmap-spot__leader,
.ml-rmap.is-off-dive .ml-rmap-routes { display: none; }

.ml-rmap__key--resort {
  width: 11px;
  height: 11px;
  background: var(--rmap-pin);
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px var(--c-gray-300);
}


/* ---------- 環礁 ---------- */

.ml-rmap-atoll { cursor: pointer; }
.ml-rmap-atoll.is-empty { cursor: default; pointer-events: none; }

/* 外圍淺灘：把環礁本體的路徑用粗描邊再畫一次當光暈。
   購買素材原本是用內嵌 PNG 做這層，那佔了檔案 41%，改用描邊便宜太多。
   這一層是所有環礁共用的獨立圖層（見 inc/resort-map.php 的 .ml-rmap-water），
   不參與點擊也不隨選取變淡——海水本來就不屬於任何一個環礁。 */
.ml-rmap-water { pointer-events: none; }

/* 整度經緯格線。潛水客會拿座標找點，所以留一層淡的方位參照；只畫整度，
   半度以下在這個尺度只是雜訊。赤道稍微亮一階——馬爾地夫本來就跨在上面。 */
.ml-rmap-watermark {
  pointer-events: none;
  user-select: none;
}

.ml-rmap-watermark text {
  fill: rgba(255, 255, 255, 0.045);
  font-family: var(--f-body);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.ml-rmap-grid { pointer-events: none; }

.ml-rmap-grid__line {
  stroke: rgba(var(--rmap-grid), 0.34);
  stroke-width: 1;
  fill: none;
}

/* 十分格：每度切六格的細線，比整度線淡很多。它是給人估距離用的刻度背景
   （一格約 18 公里），不是要被讀出來的線；一旦看得清楚就會蓋過島鏈。

   放大三倍以上才淡入（class 由 JS 依倍率切換）。全國視野下這 135 條線只是噪音，
   那個倍率也還讀不出一格代表多遠。opacity 下在整組的 <g> 上，一個節點動就好；
   減少動態偏好由檔尾的 prefers-reduced-motion 統一關掉。 */
.ml-rmap-grid__line--minor { stroke: rgba(var(--rmap-grid), 0.16); }

.ml-rmap-grid__minor {
  opacity: 0;
  transition: opacity 0.28s ease;
}

.ml-rmap.is-fine-grid .ml-rmap-grid__minor { opacity: 1; }

.ml-rmap-grid__line.is-equator { stroke: rgba(var(--rmap-grid), 0.66); stroke-dasharray: 6 4; }

/* 分區說明：小字、半透明、兩行，釘在視野右上角。它是註記不是內容，不該搶戲；
   行距用 em 讓它跟著字級走。 */
.ml-rmap-note { pointer-events: none; }

.ml-rmap-note text {
  fill: rgba(255, 255, 255, 0.38);
  font-family: var(--f-body);
  font-size: 11px;
  text-anchor: end;
  dominant-baseline: hanging;
}

/* 海域名稱：跟經緯度同一組顏色。兩者都是底圖上的地理註記，共用一個色票才不會
   在畫面上多出第三種視覺語言；大海域用寬字距，那是紙本海圖的慣例，一眼就讀得出
   「這是一片水域」而不是「這是一個地點」。 */
.ml-rmap-seas { pointer-events: none; }

.ml-rmap-sea-label text {
  fill: rgba(var(--rmap-grid), 0.66);
  font-family: var(--f-body);
  text-anchor: middle;
  dominant-baseline: middle;
  /* 底色的外框，讓字從格線裡浮出來——經緯度加深之後，同色系的字壓在細線網格上
     會被切得斷斷續續。paint-order 讓外框先畫、字身後畫，框只會往外長不吃到筆畫。
     外框寬度直接寫像素：整組是反向縮放的，這裡的 1 單位就是螢幕上的 1px。

     框用地圖底色而不是淺海色：淺海色只出現在環礁周圍的內圈，海名多半落在外海，
     框跟底色一致才像從網格上挖掉一塊，不會自己浮成一團淺色。 */
  paint-order: stroke fill;
  stroke: var(--rmap-sea);
  stroke-linejoin: round;
  stroke-width: 4;
}

/* 中英同色（與赤道線同一階），大小與字重拉開層次就夠了；再壓暗會在海水色的
   外框裡糊掉。 */
.ml-rmap-sea-label__zh { font-weight: 700; }
.ml-rmap-sea-label__en { font-weight: 500; stroke-width: 3; }

/* 字距是往右加的，整串會偏右；每一行都往左推半個字距補回來才真的置中。
   單位用 em，字級改了不必回來改補償值。 */
.ml-rmap-sea-label--sea .ml-rmap-sea-label__zh {
  font-size: 30px;
  letter-spacing: 0.42em;
  transform: translateX(-0.21em);
}

.ml-rmap-sea-label--sea .ml-rmap-sea-label__en {
  font-size: 14px;
  letter-spacing: 0.2em;
  transform: translateX(-0.1em);
}

.ml-rmap-sea-label--channel .ml-rmap-sea-label__zh {
  font-size: 22px;
  letter-spacing: 0.12em;
  stroke-width: 3.5;
  transform: translateX(-0.06em);
}

.ml-rmap-sea-label--channel .ml-rmap-sea-label__en {
  font-size: 11px;
  letter-spacing: 0.08em;
  stroke-width: 2.5;
  transform: translateX(-0.04em);
}

.ml-rmap-glabel text {
  fill: rgba(var(--rmap-grid), 0.78);
  font-family: var(--f-body);
  font-size: 10px;
  letter-spacing: 0.02em;
}

/* 度數釘在視野最左緣，字往右讀。 */
.ml-rmap-glabel--lat text { text-anchor: start; }

/* 海水是稿子裡畫好的形狀（兩層填色），不是描邊生成的。
   深海是地圖底色，外圈與內圈各一條路徑，共用、不可點、不隨選取變淡。 */
/* 邊界柔化。SVG 的 filter 吃使用者座標、會跟著 viewBox 放大，
   所以模糊值由 JS 依倍率寫入 --rmap-blur，螢幕上的柔邊才固定。 */
.ml-rmap-sea {
  stroke: none;
  filter: blur(var(--rmap-blur, 3px));
}
/* 最外圈糊得更開：它是深海到近海的過渡，邊界越不明確越像水；內圈貼著環礁，
   太糊反而看不出淺灘的形狀。兩個值都由 JS 依倍率寫入。 */
.ml-rmap-sea--outer {
  fill: var(--rmap-sea-outer);
  filter: blur(var(--rmap-blur-outer, 9px));
  opacity: 0.8;
}

.ml-rmap-sea--inner {
  fill: var(--rmap-sea-inner);
  opacity: 0.8;
}

/* 環礁本體（潟湖）與島嶼。島嶼是底圖的細節主體，共約 960 條路徑。 */
/* 不描邊：這條路徑同時是環礁的點擊區，填色本身就接得到事件，
   多一條綠線只是把海與潟湖的漸層切斷。hover 與選取改用填色變化表示。 */
.ml-rmap-atoll__lagoon {
  fill: var(--rmap-lagoon);
  stroke: none;
  transition: fill 0.18s ease;
}

.ml-rmap-atoll__island { fill: var(--rmap-island); stroke: none; }

.ml-rmap-atoll.is-empty > path { opacity: 0.6; }

/* 選取的表現只做在島嶼上，不動潟湖。潟湖原本改填 #E2F5F2（近白），但 21 個環礁
   裡有 7 個（哈阿利夫、諾魯、馬列南、南阿里、米姆、卡夫達魯、哈阿達魯）底圖根本
   沒有潟湖路徑，結果就是選了有潟湖的會泛白、沒潟湖的毫無變化。島嶼每個環礁都有，
   一致才看得出選中的是哪一個。
   未選是淺綠、選取才變深綠：深色在淺潟湖上比較搶眼，選中的環礁要往前站。 */
.ml-rmap-atoll.is-on > .ml-rmap-atoll__island { fill: #0B5C2E; }
.ml-rmap-atoll:hover > .ml-rmap-atoll__island { fill: #2E8C55; }

/* 選了某個環礁時，其餘退到背景。同樣只淡直接子元素（group 裡沒有 <text> 才能這樣寫）。 */
.ml-rmap.has-atoll .ml-rmap-atoll:not(.is-on) > path,
.ml-rmap.has-atoll .ml-rmap-atoll:not(.is-on) > circle { opacity: 0.34; }

/* 潟湖是跨環礁共用的：它掛在其中一個環礁的群組裡，但可能同時屬於旁邊那個。
   選到的若是「旁邊那個」，這條潟湖雖然在別人的群組裡也要保持全亮。 */
.ml-rmap.has-atoll .ml-rmap-atoll:not(.is-on) > .ml-rmap-atoll__lagoon.is-on { opacity: 1; }



/* ---------- 環礁名稱（排在左右海溝，用引線連回本體）---------- */

/* 虛線畫在反向縮放的卡片群組裡，所以長度、線寬、虛線間距在任何倍率下都一樣，
   不需要 non-scaling-stroke。 */
.ml-rmap-leader {
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 1.2;
  stroke-dasharray: 3 3;
}

/* 環礁名稱排在開闊海面上，深藍底要用亮字＋深色描邊才讀得到。 */
.ml-rmap-alabel text {
  fill: #FFFFFF;
  font-family: var(--f-body);
  paint-order: stroke fill;
  stroke: rgba(12, 60, 92, 0.55);
  stroke-width: 2px;
}

.ml-rmap-alabel__name { font-size: 20px; font-weight: 700; }
.ml-rmap-alabel__count { font-size: 15px; font-weight: 400; fill: #CFE7F7; }
/* 標示貼在視窗左右緣，字一律朝畫面內排；朝外排會被裁掉一大半。 */
.ml-rmap-alabel--left text { text-anchor: start; }
.ml-rmap-alabel--right text { text-anchor: end; }

/* SVG 文字只有字面本身可點，筆劃之間的空隙會漏掉。命中區補一塊透明矩形，
   讓整個標示是一個穩定的目標。 */
.ml-rmap-alabel__hit { cursor: pointer; }

/* 沒有度假村的環礁：一樣要標，少了它們這條島鏈讀起來就不是馬爾地夫，
   但它不是可選的目標，所以淡一級也不接事件。 */
/* 環礁標示就是選環礁的按鈕：環礁形狀在 1 倍下很小、又拿掉了外圈的點選線，
   標示是這個尺度唯一好按的目標。 */
.ml-rmap-alabel { cursor: pointer; }
.ml-rmap-alabel:hover .ml-rmap-alabel__name { fill: var(--rmap-pin-on); }

.ml-rmap-alabel.is-empty { opacity: 0.62; pointer-events: none; cursor: default; }
/* 沒有度假村的環礁小一級：它是地理脈絡，不是可以點進去看的目標。 */
.ml-rmap-alabel.is-empty .ml-rmap-alabel__name { font-size: 15px; font-weight: 400; }

/* 選了某個環礁時其餘淡掉。地圖上只標環礁、不列 91 個飯店名——兩側排滿名字
   怎麼調都是字牆，而右欄清單本來就是真正的閱讀介面；地圖負責回答的是
   「在哪個環礁」，單一家的名稱滑到點上就會出現。 */
.ml-rmap.has-atoll .ml-rmap-alabel:not(.is-on) { opacity: 0.4; }

/* ---------- 地標（機場／馬列）----------
   進島方式是選島最先要看的事，所以機場要一眼認得出來：白底圓徽章 + 飛機圖示，
   襯在環礁的藍綠色上很清楚。國際／國內用大小與顏色分層——國際機場是行程的起點，
   給深色與兩行標籤；國內機場只是轉機點，小一號、淡一點、只給代碼。
   全部 pointer-events:none：它們是方位參考，不是可點的目標。 */

.ml-rmap-mark { pointer-events: none; }

.ml-rmap-mark__badge {
  fill: #fff;
  stroke: var(--rmap-air-dom);
  stroke-width: 1.6;
  filter: drop-shadow(0 1px 1.5px rgba(19, 42, 56, 0.28));
}

.ml-rmap-mark__icon { fill: var(--rmap-air-dom); }

.ml-rmap-mark--int .ml-rmap-mark__badge {
  stroke: var(--rmap-air-int);
  stroke-width: 2.2;
}

.ml-rmap-mark--int .ml-rmap-mark__icon { fill: var(--rmap-air-int); }

/* 機場標籤跟著 --rmap-label-size 一起長大（和度假村名稱同一個變數，
   所以兩種標籤在任何倍率下的比例關係都固定）。變數由 JS 隨縮放寫入，
   從 MLE_MAP_LABEL_MIN 長到 MAX。 */
.ml-rmap-mark__code,
.ml-rmap-mark__name,
.ml-rmap-mark__mins {
  font-family: var(--f-body);
  dominant-baseline: central;
  paint-order: stroke fill;
  stroke: rgba(12, 60, 92, 0.6);
  stroke-width: 2px;
}

.ml-rmap-mark__code {
  fill: #FFFFFF;
  font-size: calc(var(--rmap-label-size, 12px) * 0.92);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ml-rmap-mark__name {
  fill: #F0F8FD;
  font-size: calc(var(--rmap-label-size, 12px) * 0.79);
}

.ml-rmap-mark--int .ml-rmap-mark__code {
  fill: #FFFFFF;
  font-size: calc(var(--rmap-label-size, 12px) * 1.08);
}

/* 機場標籤是兩行或三行（代號、中文名，有航程時再加一行），行距得跟著字級走——
   用固定的 y 會在字放大後疊在一起。所以 y=0 交給 dominant-baseline 置中，上下
   位移改用 CSS transform 吃同一個變數。 */
.ml-rmap-mark__code {
  transform: translateY(calc(var(--rmap-label-size, 12px) * -0.5));
}

.ml-rmap-mark__name {
  transform: translateY(calc(var(--rmap-label-size, 12px) * 0.68));
}

/* 三行的整組往上挪半行，標籤才會維持以徽章為中心。 */
.ml-rmap-mark--3line .ml-rmap-mark__code {
  transform: translateY(calc(var(--rmap-label-size, 12px) * -1.05));
}

.ml-rmap-mark--3line .ml-rmap-mark__name {
  transform: translateY(calc(var(--rmap-label-size, 12px) * 0.12));
}

.ml-rmap-mark__mins {
  fill: #FFD9C4;
  font-size: calc(var(--rmap-label-size, 12px) * 0.72);
  transform: translateY(calc(var(--rmap-label-size, 12px) * 1.18));
}


/* 國內機場的名字預設收起來（圖例的「國內」那顆開關），徽章一直都在——看得出
   「這一區有機場」就夠了，11 個代碼加中文名在全國視圖太吵。要對照哪個機場飛
   哪裡時再打開。 */
.ml-rmap.is-off-domname .ml-rmap-mark--dom .ml-rmap-mark__code,
.ml-rmap.is-off-domname .ml-rmap-mark--dom .ml-rmap-mark__name,
.ml-rmap.is-off-domname .ml-rmap-mark__mins,
.ml-rmap.is-off-domname .ml-rmap-domlinks,
.ml-rmap.is-off-domname .ml-rmap__legendnote { display: none; }

/* 自成一行，不放進圖例那個 nowrap 的 ul——手機寬度不夠會把整列撐破。 */
.ml-rmap__legendnote {
  margin: 0 0 0.35rem;
  padding: 0;
  width: max-content;
  max-width: 100%;
  /* 直接壓在海面上，所以是白字加深色描邊，不用底板——底板會變成圖例上方多一塊
     不必要的白色方塊。 */
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(12, 60, 92, 0.85);
  font-size: calc(var(--fs-xs) * 0.9);
  line-height: 1.5;
}

/* 國內線航網：從馬列 Velana 拉到每個國內機場。畫的是輻射式的連線關係，不是
   航跡——實際航路不會是直線，班次也隨季節與航空公司調整。 */
.ml-rmap-domlinks { pointer-events: none; }

.ml-rmap-domlink {
  /* 紅：跟機場的國際徽章同一個色系，一眼看得出這幾條線是飛機在飛的。 */
  stroke: rgba(224, 59, 47, 0.75);
  stroke-width: 1.3;
  stroke-dasharray: 6 4;
  stroke-linecap: round;
  fill: none;
}

/* 首都馬列：五角星＋貼在左邊的標籤。機場的兩行標籤朝右，兩邊各佔一側就不會疊。 */
.ml-rmap-capital__star {
  fill: #FFF3D0;
  stroke: rgba(12, 60, 92, 0.75);
  stroke-width: 1.1;
}

.ml-rmap-capital__label {
  fill: #FFFFFF;
  font-family: var(--f-body);
  font-size: calc(var(--rmap-label-size, 12px) * 0.92);
  font-weight: 700;
  text-anchor: end;
  dominant-baseline: central;
  paint-order: stroke fill;
  stroke: rgba(12, 60, 92, 0.6);
  stroke-width: 2px;
}

/* 居民島／潛點島：圓角方塊＋一行標籤。方塊跟度假村的圓點、機場的飛機徽章、
   首都的五角星都分得開，不用靠顏色就知道是不同種東西。 */
.ml-rmap-island__mark {
  fill: #F6DCA8;
  stroke: rgba(12, 60, 92, 0.75);
  stroke-width: 1.1;
}

.ml-rmap-island__label {
  fill: #FFFFFF;
  font-family: var(--f-body);
  font-size: calc(var(--rmap-label-size, 12px) * 0.88);
  font-weight: 700;
  dominant-baseline: central;
  paint-order: stroke fill;
  stroke: rgba(12, 60, 92, 0.6);
  stroke-width: 2px;
}

.ml-rmap-island__tag { font-size: calc(var(--rmap-label-size, 12px) * 0.72); font-weight: 400; fill: #F6DCA8; }
.ml-rmap-mark--left .ml-rmap-island__label { text-anchor: end; }

/* 船宿航線。畫的是航線涵蓋的環礁範圍，不是某一趟的航跡——四方線本身就有順時針、
   逆時針與跳島三種走法。 */
.ml-rmap-routes { pointer-events: none; }

.ml-rmap-route {
  fill: none;
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.85;
}

.ml-rmap-route--square { stroke: #FFC24D; stroke-dasharray: 9 5; }
.ml-rmap-route--mid-south { stroke: #C9A6FF; stroke-dasharray: 9 5; }
.ml-rmap-route--deep-south { stroke: #5FE0D0; stroke-dasharray: 9 5; }

/* 名稱壓在線上，所以要有底色感——深色描邊加粗一點，字才不會被虛線切開。 */
.ml-rmap-route__tag text {
  font-family: var(--f-body);
  dominant-baseline: central;
  font-size: calc(var(--rmap-label-size, 12px) * 0.86);
  font-weight: 700;
  text-anchor: middle;
  paint-order: stroke fill;
  stroke: rgba(12, 60, 92, 0.85);
  stroke-width: 3.4px;
}

.ml-rmap-route__tag--square text { fill: #FFC24D; }
.ml-rmap-route__tag--mid-south text { fill: #C9A6FF; }
.ml-rmap-route__tag--deep-south text { fill: #5FE0D0; }

/* 潛水重點：菱形。座標是近似值（見 resort-map-geo.php 的說明），所以圖例刻意
   不做成精確的定位標，用一個象徵性的形狀。 */
/* 標記與標籤之間的引線。這一帶（馬列、南阿里、阿杜）標記彼此很近，標籤貼著
   標記畫一定會互相蓋住，拉開再用線指回來才讀得到。

   深藍實線：環礁索引欄用的是白色虛線，兩種線的顏色與線型都不同，才不會分不出
   哪條是拉到海溝的環礁引線、哪條是指向某個島或潛點的。 */
.ml-rmap-spot__leader {
  stroke: rgba(12, 60, 92, 0.85);
  stroke-width: 1;
}


.ml-rmap-spot__mark {
  fill: #BDEFFF;
  stroke: rgba(12, 60, 92, 0.75);
  stroke-width: 1.1;
}

.ml-rmap-spot__label {
  fill: #FFFFFF;
  font-family: var(--f-body);
  font-size: calc(var(--rmap-label-size, 12px) * 0.86);
  font-weight: 700;
  dominant-baseline: central;
  paint-order: stroke fill;
  stroke: rgba(12, 60, 92, 0.6);
  stroke-width: 2px;
}

.ml-rmap-spot__tag { font-size: calc(var(--rmap-label-size, 12px) * 0.72); font-weight: 400; fill: #BDEFFF; }
.ml-rmap-mark--left .ml-rmap-spot__label { text-anchor: end; }

/* 搜尋沒中的點淡掉但留著：看得出剩下的幾家分佈在哪，也不會讓地圖突然空一塊。 */
.ml-rmap-pin.is-nomatch .ml-rmap-pin__dot { opacity: 0.16; }
.ml-rmap-pin.is-nomatch .ml-rmap-pin__label { display: none; }

/* ---------- 度假村點 ---------- */

.ml-rmap-pin { cursor: pointer; }
.ml-rmap-pin__hit { fill: transparent; }
/* 光圈用 transform 放大，不改 r：SVG2 的 geometry-as-CSS（r 當 CSS 屬性）在舊
   Safari 不保險。圓心就在 pin 的原點上，scale() 直接繞中心放大，不需要
   transform-origin。放大量在 pin 的座標系裡，而 pin 整組反向縮放，所以螢幕上
   的大小固定。 */
.ml-rmap-pin__halo {
  fill: rgba(17, 128, 184, 0.16);
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.ml-rmap-pin__dot { fill: var(--rmap-pin); stroke: #fff; stroke-width: 1.6; }

/* 字級由 JS 隨縮放寫進 --rmap-label-size（MLE_MAP_LABEL_MIN → MAX）。
   單位是 SVG 使用者座標不是螢幕像素。這裡的 12px 只是還沒跑 JS 時的預設值。
   dominant-baseline 讓文字不管多大都對齊圓點中心，就不必隨字級去改 y。 */
.ml-rmap-pin__label {
  display: none;
  fill: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--rmap-label-size, 12px);
  font-weight: 600;
  dominant-baseline: central;
  paint-order: stroke fill;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 2.4px;
  /* 名字會壓在深綠島嶼上，只靠白描邊還是糊。外圈補一層白光暈，字才從底圖上
     浮起來。濾鏡的長度單位吃的是 pin 自己的座標系，而 pin 整組是 scale(1/s)
     反向縮放的，所以放大時光暈在螢幕上的大小不變。 */
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.75))
    drop-shadow(0 1px 2px rgba(12, 60, 92, 0.45));
}

.ml-rmap-pin--left .ml-rmap-pin__label { text-anchor: end; }

/* 度假村的點只在最大倍率出現。低倍率下 91 個點彼此重疊，點下去多半選到隔壁那家；
   要挑單一度假村就是先選環礁（點環礁或用下拉，兩者都會直接放到最大）。 */
.ml-rmap:not([data-zoom="3"]) .ml-rmap-pin { display: none; }

/* 名字改集中在兩側海溝的索引裡，地圖上不再常駐顯示——91 個名字散在圖上
   一定會互相蓋住，而且擠掉環礁形狀。只在滑過或選中時就地顯示。
   （data-label-scale 仍然算著，之後若要恢復常駐標籤直接把規則加回來就好。） */
.ml-rmap-pin.is-hover .ml-rmap-pin__label,
.ml-rmap-pin.is-active .ml-rmap-pin__label { display: block; }
.ml-rmap-pin.is-hover .ml-rmap-pin__halo { opacity: 1; transform: scale(1.8); }

/* 選中的那一顆再放大：圓心在 pin 原點上，scale() 直接繞中心放大，
   不用改 r（SVG2 的 geometry-as-CSS 在舊 Safari 不保險）。 */
.ml-rmap-pin.is-active .ml-rmap-pin__dot {
  fill: var(--rmap-pin-on);
  stroke-width: 1.1;
  transform: scale(1.5);
}
.ml-rmap-pin.is-active .ml-rmap-pin__halo {
  fill: rgba(201, 162, 75, 0.3);
  stroke: rgba(201, 162, 75, 0.8);
  stroke-width: 1;
  opacity: 1;
  transform: scale(2.4);
}
/* 選了環礁之後，該環礁的點改紅：其餘環礁的點會淡到 0.25，但同樣是藍的，
   顏色一致時只靠透明度分辨很吃力。排除 is-active——選中的那一家仍然是金色。 */
.ml-rmap.has-atoll .ml-rmap-pin:not(.is-dim):not(.is-active) .ml-rmap-pin__dot {
  fill: var(--rmap-pin-sel);
}

.ml-rmap.has-atoll .ml-rmap-pin:not(.is-dim) .ml-rmap-pin__halo {
  fill: rgba(224, 59, 47, 0.18);
}

.ml-rmap-pin.is-dim .ml-rmap-pin__dot { opacity: 0.25; }
.ml-rmap-pin.is-dim .ml-rmap-pin__label { display: none; }

/* ---------- 浮在地圖上方的標題與環礁標籤 ----------
   整個面板 pointer-events: none，只有標籤自己收事件。這樣在面板的留白處按下去
   一樣可以拖曳地圖，不會在地圖上方形成一整條拖不動的死區。 */

.ml-rmap__float {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  z-index: 3;
  pointer-events: none;
}

.ml-rmap__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: #FFFFFF;
  text-shadow: 0 1px 4px rgba(12, 60, 92, 0.7);
}

.ml-rmap__hint {
  margin: 0.2rem 0 0.6rem;
  max-width: 46ch;
  color: #E4F2FB;
  font-size: var(--fs-xs);
  line-height: 1.65;
  text-shadow: 0 1px 4px rgba(12, 60, 92, 0.7);
}

.ml-rmap__filter {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin-top: 0.85rem;
  pointer-events: auto;
}

/* 「環礁」這兩個字與白底外框都拿掉了，選單自己就說得夠清楚。label 留著但只給
   輔助技術讀——select 沒有可見標題時，還是要有東西告訴螢幕閱讀器這是選什麼的。 */
.ml-rmap__filterlabel {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 原生 select 各家外觀差很多，所以把箭頭畫在外框上，select 自己拿掉外觀。 */
.ml-rmap__selectwrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.ml-rmap__selectwrap::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0.7rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--c-gray);
  border-bottom: 2px solid var(--c-gray);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.ml-rmap__select {
  width: 100%;
  min-width: 13rem;
  padding: 0.4rem 2rem 0.4rem 0.7rem;
  border: 1px solid var(--c-gray-300);
  border-radius: 8px;
  background: #fff;
  /* 沒有白底面板襯著了，選單直接落在海面上，補一點陰影才浮得起來。 */
  box-shadow: 0 4px 16px rgba(19, 42, 56, 0.18);
  color: var(--c-text);
  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1.4;
  cursor: pointer;
  appearance: none;
}

.ml-rmap__select:hover { border-color: var(--c-accent); }

.ml-rmap__select:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 1px;
}

/* ---------- 浮在地圖上的度假村清單 ---------- */

.ml-rmap__side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  overflow: hidden;
}

/* 側欄搜尋框：版型沿用 /resort/ 的 .ml-filter-search，只調間距與字級。 */
.ml-rmap__search {
  padding: 0.7rem 0.95rem 0;
}

/* 沒有送出鈕，輸入框自己佔滿一整列。 */
.ml-rmap__search input[type="search"] {
  width: 100%;
  padding: 0.55rem 0.9rem;
  font-size: var(--fs-xs);
}

/* 主題快篩：三顆膠囊。按下去是就地過濾右欄與地圖，不是連到別頁，所以用 button
   而不是 a——外觀像標籤，行為要像開關。 */
.ml-rmap__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.ml-rmap__chip {
  padding: 0.22rem 0.6rem;
  border: 1px solid var(--c-gray-300);
  border-radius: 999px;
  background: #fff;
  color: var(--c-gray);
  font: inherit;
  font-size: calc(var(--fs-xs) * 0.95);
  line-height: 1.6;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ml-rmap__chip:hover { border-color: var(--c-accent); color: var(--c-accent-700); }

.ml-rmap__chip[aria-pressed="true"] {
  border-color: var(--c-accent-700);
  background: var(--c-accent-700);
  color: #fff;
}

.ml-rmap__chip:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.ml-rmap__sidehead {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.8rem 0.95rem;
  border-bottom: 1px solid var(--c-gray-300);
  font-size: var(--fs-xs);
  color: var(--c-gray);
}

.ml-rmap__sidecount strong { color: var(--c-text); font-size: var(--fs-sm); }
.ml-rmap__sidelink { color: var(--c-accent-700); font-weight: 600; text-decoration: none; }
.ml-rmap__sidelink:hover { text-decoration: underline; }

.ml-rmap__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-inline: 0.55rem;
}

/* 分組標題是黏著的，所以底色一定要不透明——半透明的話捲到它底下的卡片
   （尤其縮圖）會透出來，看起來就像兩層疊在一起。 */
/* 搜尋沒中的環礁整組收起來，不然會留下一排「N 座」的空標題。 */
.ml-rmap__group[data-empty="1"] { display: none; }

/* 目前生效的條件。三個條件可以疊加，不寫出來使用者就看不出清單為什麼是這樣——
   這一列是把互斥改成可疊加的代價與解法。 */
.ml-rmap__active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--c-gray-300);
  background: var(--c-accent-100, #eef4f8);
}

.ml-rmap__active[hidden] { display: none; }

.ml-rmap__activelabel {
  color: var(--c-gray);
  font-size: calc(var(--fs-xs) * 0.9);
}

.ml-rmap__activechip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.5rem;
  border: 1px solid var(--c-accent-700);
  border-radius: 999px;
  background: var(--c-accent-700);
  color: #fff;
  font: inherit;
  font-size: calc(var(--fs-xs) * 0.92);
  cursor: pointer;
}

.ml-rmap__activechip span { opacity: 0.8; }
.ml-rmap__activechip:hover span { opacity: 1; }
.ml-rmap__activechip:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.ml-rmap__activecount {
  margin-left: auto;
  color: var(--c-gray);
  font-size: calc(var(--fs-xs) * 0.9);
}

.ml-rmap__noresult {
  margin: 0;
  padding: 0.9rem 1rem;
  color: var(--c-gray);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.ml-rmap__noresult a { color: var(--c-accent-700); }

.ml-rmap__grouphead {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0;
  padding: 0.6rem 0.2rem 0.45rem;
  background: #fff;
  border-bottom: 1px solid var(--c-gray-300);
  box-shadow: 0 4px 8px -6px rgba(19, 42, 56, 0.4);
  color: var(--c-accent-700);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.ml-rmap__grouphead span { color: var(--c-gray); font-weight: 400; }

/* [hidden] 必須自己寫一條：瀏覽器預設的 [hidden] { display: none } 是元素選擇器，
   權重輸給下面的 .ml-rmap__row { display: flex }，搜尋時列會藏不起來（計數對、
   清單照樣全開）。 */
.ml-rmap__row[hidden] { display: none; }

.ml-rmap__row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  border-bottom: 1px solid var(--c-gray-300);
  border-radius: 8px;
  transition: background 0.15s ease;
}

.ml-rmap__row:hover { background: var(--c-gray-100); }
.ml-rmap__row.is-active { background: var(--c-accent-100); box-shadow: inset 3px 0 0 var(--c-secondary); }

.ml-rmap__rowlink {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.55rem 0.2rem;
  color: inherit;
  text-decoration: none;
}

.ml-rmap__thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--c-gray-300);
}

.ml-rmap__rowtext { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }

.ml-rmap__rowtitle {
  font-size: var(--fs-sm);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ml-rmap__rowen {
  color: var(--c-gray);
  /* 10px：英文名是輔助資訊，字小才會像貼在中文名底下的註記，不跟中文名搶。
     行高收緊並往上靠一點，與中文名之間不留 .ml-rmap__rowtext 的整段 gap。 */
  font-size: 0.625rem;
  font-style: italic;
  line-height: 1.25;
  margin-top: -0.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ml-rmap__rowmeta {
  color: var(--c-gray);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ml-rmap__locate {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--c-gray);
  cursor: pointer;
}

.ml-rmap__locate svg { width: 18px; height: 18px; margin: 0 auto; fill: currentColor; }
.ml-rmap__locate:hover { background: var(--c-accent-100); color: var(--c-accent-700); }
.ml-rmap__row.is-active .ml-rmap__locate { color: var(--c-secondary-700); }

/* ---------- RWD ---------- */

/* 窄螢幕：左右並排放不下，改成地圖在上、清單在下的一般流。
   .ml-rmap 的固定高度要放掉，否則兩塊擠在一個視窗高裡誰都不夠用。 */
@media (max-width: 1024px) {
  .ml-rmap { display: block; height: auto; min-height: 0; }

  .ml-rmap__mapcol {
    height: min(66vh, 560px);
    border-inline-end: 0;
    border-block-end: 1px solid var(--c-gray-300);
  }

  .ml-rmap__search { padding-inline: var(--sp-40); }
  /* 主題快篩：三顆膠囊。按下去是就地過濾右欄與地圖，不是連到別頁，所以用 button
   而不是 a——外觀像標籤，行為要像開關。 */
.ml-rmap__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.ml-rmap__chip {
  padding: 0.22rem 0.6rem;
  border: 1px solid var(--c-gray-300);
  border-radius: 999px;
  background: #fff;
  color: var(--c-gray);
  font: inherit;
  font-size: calc(var(--fs-xs) * 0.95);
  line-height: 1.6;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ml-rmap__chip:hover { border-color: var(--c-accent); color: var(--c-accent-700); }

.ml-rmap__chip[aria-pressed="true"] {
  border-color: var(--c-accent-700);
  background: var(--c-accent-700);
  color: #fff;
}

.ml-rmap__chip:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.ml-rmap__sidehead { padding-inline: var(--sp-40); }
  .ml-rmap__list { overflow: visible; padding-inline: var(--sp-40); }

  /* 手機版不要黏著的分組標題。
     .ml-rmap__side 有一條桌機用的 overflow:hidden（圓角面板裁切用），
     有 overflow 的祖先會改變 sticky 的參考容器，結果第一個標題的行為和
     後面幾個不一樣——只有第一個會疊到卡片上。手機上清單是頁面的一般流、
     整段一路捲到底，黏著的小標本來就沒什麼作用，直接取消最乾淨。 */
  .ml-rmap__grouphead {
    position: static;
    margin-bottom: 10px;
    box-shadow: none;
  }

  .ml-rmap__row { scroll-margin-top: calc(var(--header-h) + 1rem); }

  .ml-rmap__filter { display: flex; width: 100%; }
  .ml-rmap__select { min-width: 0; }
  .ml-rmap__hint { display: none; }
  .ml-rmap__float { top: 0.6rem; left: 0.6rem; right: 0.6rem; }

  /* 縮放鈕右下、圖例左下——手機上兩者都在底部，不分開會疊在一起。 */
  .ml-rmap__controls { bottom: 0.6rem; right: 0.6rem; }
  .ml-rmap__footnote { left: 0.6rem; right: 3.8rem; bottom: 0.6rem; max-width: none; }
}

@media (max-width: 640px) {
  .ml-rmap__search,
  .ml-rmap__sidehead,
  .ml-rmap__list { padding-inline: var(--sp-30); }
  .ml-rmap__thumb { width: 48px; height: 48px; }
  .ml-rmap__title { font-size: var(--fs-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .ml-rmap * { transition: none !important; }
}

/* ---------- 清單的度假村 lightbox ----------
   在地圖上一家一家比的時候，開新分頁會讓人失去地圖的位置感；就地開一個視窗，
   關掉就回到原本的清單與視野。iframe 載入的是同一頁但帶 ?embed=1，那個模式下
   度假村頁的 header／footer 會收起來（見 theme.css）。 */
.ml-rmap__box {
  position: fixed;
  inset: 0;
  z-index: 9995;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.5rem, 3vw, 2.5rem);
  background: rgba(6, 40, 60, 0.72);
  backdrop-filter: blur(4px);
}

.ml-rmap__box[hidden] { display: none; }

.ml-rmap__boxpanel {
  display: flex;
  flex-direction: column;
  width: min(1080px, 100%);
  height: min(90vh, 100%);
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(6, 40, 60, 0.4);
}

.ml-rmap__boxbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem 0.6rem 1rem;
  border-bottom: 1px solid var(--c-gray-300);
}

.ml-rmap__boxtitle {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--c-text);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ml-rmap__boxopen {
  flex: 0 0 auto;
  color: var(--c-accent-700);
  font-size: var(--fs-xs);
  text-decoration: none;
}

.ml-rmap__boxopen:hover { text-decoration: underline; }

.ml-rmap__boxclose {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--c-gray);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.ml-rmap__boxclose:hover { background: var(--c-accent-100); color: var(--c-accent-700); }

.ml-rmap__boxframe {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
}