/* ============================================================
   關東活動 GO —— 視覺語言：瀑布流．輕盈質感
   受眾是會特地去看展、逛市集的人，所以整體抽到接近無彩，
   讓活動照片成為畫面上唯一的顏色來源。
   三個原則：
     1. 卡片高度由照片實際比例決定，不裁切（見 wireImage）
     2. 照片上不放任何角標，資訊全在照片下方
     3. 沒有卡片容器（無底色、無外框），輕盈來自「少一層」
   ============================================================ */

/* ---------- 淺色：美術館白牆（暖白，不用純白） ---------- */
:root{
  --paper:#FBFAF7;
  --surface:#FFFFFF;
  --ink:#1A1917;
  --ink-2:#6E6A63;      /* 所有次要文字與圖示一律用這層（紙底上 5.15，過 AA） */
  /* --ink-3 只准用在純裝飾（hover 邊框、圖例小點）。
     它在紙底上只有 2.85，任何文字或可點控制項用了都不合格；
     而這個紙白底下「明顯更淡又達 4.5」的灰其實不存在（4.32 就已經與 --ink-2 難以區分），
     所以第三層刻意不當文字色用，不要再把它套到文字上。 */
  --ink-3:#9A958C;
  --line:#E5E1D8;
  --hot:#9A3B24;           /* 倒數、提醒 */
  --geo:#3D5A6C;           /* 地點、地圖相關 */
  --ttl-w:500;             /* 明體字重（深色模式會降一級） */
  --radius:4px;            /* 一點點圓角 */
  /* 明度改由 data-theme 決定後，捲軸與原生控制項（側欄的 <select>）不會自己跟著變，
     要靠 color-scheme 明講。若少了這行，深色模式下的下拉選單會是白底。 */
  color-scheme:light;

  /* 六個分類色（低彩度）。**JS 直接讀這些變數**，不再另存一份，
     所以改色只需要動這裡一處。深色模式的值在下方 media query。
     注意：變數名是資料裡的中文值，不可改名。 */
  --c-展覽:#856726;        /* 用 #856726 而非更亮的土黃：亮一階在白底上小字只有 3.39，不到 AA 4.5 */
  --c-祭典:#A85A3C;
  --c-煙火:#4A5570;
  --c-市集:#4F6B52;
  --c-動漫:#8E4A63;
  --c-寶可夢:#6A5A83;

  /* 地圖圖釘專用色（只有淺色模式需要，見下方 dark 區塊）。
     **為什麼不直接把上面六色調亮**：那六色同時是卡片分類標籤與收藏星的**文字**色，
     調亮會讓白底上的小字掉到 AA 4.5 以下——`--c-展覽` 的註解記的就是這個實測。
     但淺色模式的 OSM 圖磚是滿版彩色（綠山、藍海、粉紅高速公路），
     低彩度圖釘壓上去會直接融進底圖：市集綠消失在綠地、煙火藍灰消失在海面。
     故拆成兩組職責：**`--c-*` 管文字（要對比度），`--pin-*` 管地圖（要辨識度）**。
     圖釘不當文字用，門檻是 UI 元件的 3:1 而非 4.5。 */
  --pin-展覽:#B8860B;
  --pin-祭典:#D2542F;
  --pin-煙火:#3E63C8;
  --pin-市集:#2E8B57;
  --pin-動漫:#C2436F;
  --pin-寶可夢:#7B5EC7;

  /* 三套行程專用色。與分類色分工：分類色標活動類型，行程色標同一條路線。 */
  --route-1:#1257C4;
  --route-2:#AD5300;
  --route-3:#A8228A;

  --f-ttl:'Noto Serif TC','Shippori Mincho',serif;
  --f-body:'Noto Sans TC','Shippori Mincho',system-ui,sans-serif;
  --f-num:'Archivo',ui-sans-serif,system-ui,sans-serif;

  --gap:10px;
}
/* 日文模式標題改明朝優先（日文的明朝體字面比中文明體更適合日文） */
:root:lang(ja){--f-ttl:'Shippori Mincho','Noto Serif TC',serif;}

/* ---------- 深色：夜間展場（暖黑，不用純黑） ----------
   **深色值只定義在這一處。** data-theme 由 <head> 那段 script 在繪製前寫入
   （沒有手動偏好時就用系統偏好），所以這裡不需要再寫一次 media query 版本。 */
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#141311;
  --surface:#1D1B18;
  --ink:#EFEBE3;
  --ink-2:#A09A8F;
  --ink-3:#7A7469;
  --line:#2E2B26;
  --hot:#C97A5E;
  --geo:#8FB0C4;
  --ttl-w:500;
  /* 深底不能沿用淺色值（暗色壓在暗底上會糊掉），要用更亮的同色系 */
  --c-展覽:#C9A961;
  --c-祭典:#C77B5C;
  --c-煙火:#7A87A8;
  --c-市集:#7A9A7E;
  --c-動漫:#B5798F;
  --c-寶可夢:#9689AD;
  /* 深色的圖磚已被濾鏡壓暗（見 .leaflet-tile-pane），上面那組亮色壓上去本來就跳，
     不需要第二套。**但一定要在這裡明講指回 --c-***：CSS 變數會繼承，
     少了這六行，淺色的 --pin-* 會一路帶進深色模式。這裡只是轉指，不另存色票。 */
  --pin-展覽:var(--c-展覽);
  --pin-祭典:var(--c-祭典);
  --pin-煙火:var(--c-煙火);
  --pin-市集:var(--c-市集);
  --pin-動漫:var(--c-動漫);
  --pin-寶可夢:var(--c-寶可夢);
  /* 行程色的深色值是另一組已驗證色票，不可轉指淺色值。 */
  --route-1:#5B9BF5;
  --route-2:#E8944A;
  --route-3:#EE9BD8;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(84px + env(safe-area-inset-bottom));
}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
img{display:block;max-width:100%;}
.wrap{max-width:900px;margin:0 auto;padding:8px 14px 0;}

/* ===== 頂部：左對齊，不置中 =====
   按鈕改用 flex 排而非絕對定位。第四顆（晝夜）加進來之後，絕對定位需要
   padding-right 一路加到 159px，副標在 412px 螢幕上就沒空間了。
   flex + 副標可省略號，之後再加按鈕也不會撞到。 */
.top{padding:14px 0 10px;padding-top:calc(14px + env(safe-area-inset-top));}
.topbar{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.top .region{
  flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--f-num);font-size:9.5px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);
}
.tools{display:flex;gap:5px;flex:none;}
.top h1{
  font-family:var(--f-ttl);font-weight:var(--ttl-w);
  font-size:clamp(24px,5.2vw,34px);line-height:1.12;letter-spacing:.01em;
}
.corner-btn{
  width:34px;height:34px;flex:none;border-radius:var(--radius);
  border:1px solid var(--line);background:transparent;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:border-color .18s ease;
}
.corner-btn:hover{border-color:var(--ink-3);}
.corner-btn svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.lang-btn{font-family:var(--f-ttl);font-size:14px;font-weight:var(--ttl-w);color:var(--ink);}
/* 晝夜鈕跟語言鈕同一套慣例：顯示「點了會變成什麼」。
   淺色時顯示月亮（點了轉深），深色時顯示太陽。 */
.theme-btn .sun{display:none;}
:root[data-theme="dark"] .theme-btn .sun{display:block;}
:root[data-theme="dark"] .theme-btn .moon{display:none;}

/* ===== 收合側欄 ===== */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:264px;z-index:1200;
  background:var(--paper);border-right:1px solid var(--line);
  padding:calc(24px + env(safe-area-inset-top)) 20px 24px;
  transform:translateX(-100%);transition:transform .25s;overflow-y:auto;
}
.sidebar.open{transform:translateX(0);}
/* 側欄收合鈕：只在桌面版（側欄常駐時）出現；手機版本來就是抽屜，有遮罩可關 */
.sb-toggle{
  display:none;position:absolute;top:calc(20px + env(safe-area-inset-top));right:14px;
  width:28px;height:28px;border:1px solid var(--line);border-radius:var(--radius);
  align-items:center;justify-content:center;padding:0;
  transition:border-color .18s ease;
}
.sb-toggle:hover{border-color:var(--ink-3);}
.sb-toggle svg{width:15px;height:15px;stroke:var(--ink-2);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.34);z-index:1199;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.overlay.show{opacity:1;pointer-events:auto;}
.sidebar h3{
  font-family:var(--f-num);font-size:9.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);
  margin:26px 0 10px;
}
.sidebar h3:first-child{margin-top:0;}
.sidebar .info{font-size:12.5px;font-weight:300;line-height:1.85;color:var(--ink-2);}
/* 側欄篩選：純文字 + 選中加底線，不用膠囊按鈕 */
.side-chips{display:flex;flex-wrap:wrap;gap:0 4px;}
.side-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px 5px 0;font-size:14px;color:var(--ink-2);
  border-bottom:1.5px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.side-chip .sq{width:6px;height:6px;flex:none;}
.side-chip:hover{color:var(--ink);}
.side-chip.on{color:var(--ink);border-bottom-color:var(--ink);}
.sidebar select{
  width:100%;padding:9px 2px;font-size:14px;font-family:inherit;
  border:0;border-bottom:1px solid var(--line);border-radius:0;
  background:transparent;color:var(--ink);outline:none;
  appearance:none;-webkit-appearance:none;cursor:pointer;
}
.sidebar select:focus{border-bottom-color:var(--ink);}

/* ===== 搜尋列：底線輸入框，不用膠囊 ===== */
.searchbar{
  margin-top:6px;display:flex;align-items:center;gap:9px;
  border-bottom:1px solid var(--line);padding:8px 0;
  transition:border-color .18s ease;
}
.searchbar:focus-within{border-bottom-color:var(--ink);}
.searchbar svg{width:15px;height:15px;stroke:var(--ink-2);fill:none;stroke-width:1.8;stroke-linecap:round;flex:none;}
.searchbar input{
  flex:1;border:none;outline:none;font-size:15px;font-family:inherit;
  background:none;color:var(--ink);min-width:0;
}
.searchbar input::placeholder{color:var(--ink-2);}
.searchbar .total{
  font-family:var(--f-num);font-variant-numeric:tabular-nums;
  font-size:11px;font-weight:500;letter-spacing:.08em;
  color:var(--ink-2);white-space:nowrap;
}
.activefilter{
  margin:10px 0 0;font-size:12px;color:var(--ink-2);
  display:flex;gap:7px;flex-wrap:wrap;align-items:center;
}
.activefilter .tagf{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:2px 9px;color:var(--ink-2);
}
.activefilter .clear{
  text-decoration:underline;text-underline-offset:2px;
  color:var(--ink-2);font-size:12px;
}

/* ===== 分類篩選：頂部橫排純文字（取代原本的首頁分類卡入口） ===== */
.typebar{
  display:flex;flex-wrap:wrap;gap:0;
  margin:12px 0 14px;padding-top:11px;border-top:1px solid var(--line);
}
.typebar .side-chip{font-size:14px;padding:5px 13px 5px 0;margin-right:5px;}
.typebar .cnt{
  font-family:var(--f-num);font-variant-numeric:tabular-nums;
  font-size:10.5px;font-weight:500;color:var(--ink-2);
}
.typebar .side-chip.on .cnt{color:var(--ink);}

/* ===== 瀑布流：等寬欄，卡高由照片比例決定 ===== */
.cards{display:flex;gap:var(--gap);align-items:flex-start;}
.col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--gap);}

/* 卡片：沒有底色、沒有外框 */
.card{display:block;background:transparent;position:relative;}
.card:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.card .ph img{transition:opacity .28s ease;}
.card:hover .ph img{opacity:.86;}

/* 圖框：aspect-ratio 由 wireImage() 依照片實際比例寫入。
   預留值 1.39 是刻意的——等於 AR_MIN 的倒數（最扁那一端）。
   來源多半是橫幅照，落點就在這裡，所以多數卡片載入後高度不會變動。
   設 4/3 反而讓大部分卡片都要動一次。 */
.ph{
  position:relative;overflow:hidden;
  aspect-ratio:1.39;background:var(--line);
  border-radius:var(--radius);
}
.ph img{width:100%;height:100%;object-fit:cover;}
/* 無圖／來源刪圖／抓到的其實是網站 logo → 安靜的替代面板。
   刻意**不用分類色大面積填滿**：深色模式下一片亮土黃比周圍的照片還搶眼，
   等於讓「沒有照片的活動」最吸引目光，邏輯是反的。
   改成中性面板 + 分類色只上在文字，六色在 --surface 上都過 AA
   （若用 --line 當底，祭典 3.84、煙火 3.93 會不合格）。 */
.ph .block{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
  font-family:var(--f-ttl);font-weight:var(--ttl-w);
  font-size:clamp(15px,2.6vw,24px);letter-spacing:.14em;
}

/* ===== 卡片文字：分類＋日期 → 標題 → 地點 ===== */
.body{position:relative;padding:8px 0 2px;display:flex;flex-direction:column;gap:3px;}
.meta{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:3px 9px;
  padding-right:26px;font-size:11px;line-height:1.5;
}
.meta .cat{display:inline-flex;align-items:center;gap:5px;letter-spacing:.1em;}
.meta .cat .sq{width:6px;height:6px;flex:none;}
.meta .when{
  font-family:var(--f-num);font-variant-numeric:tabular-nums;
  font-weight:500;letter-spacing:.03em;color:var(--ink-2);
}
.meta .when .arw{color:var(--ink-2);}
.meta .live{font-family:var(--f-body);}
.meta .soon{color:var(--hot);font-weight:500;}
.meta .soon.last{font-weight:700;}
.body h2{
  font-family:var(--f-ttl);font-weight:var(--ttl-w);
  font-size:14.5px;line-height:1.42;letter-spacing:.01em;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* 收藏：釘在文字區右上，不壓在照片上 */
.fav{
  position:absolute;top:5px;right:-2px;z-index:2;
  width:26px;height:26px;padding:0;
  font-size:15px;line-height:26px;text-align:center;
  color:var(--ink-2);transition:color .18s ease;
}
.fav:hover{color:var(--ink-2);}
.fav.on{color:var(--c-展覽);}
/* 地點：一律用地點藍，整塊可點開 Google 地圖 */
.place{
  display:flex;align-items:flex-start;gap:4px;padding:1px 0 0;
  color:var(--geo);font-size:11.5px;line-height:1.45;text-align:left;
}
.place svg{
  flex:none;width:11px;height:11px;margin-top:3px;pointer-events:none;
  stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.place .v{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
button.place:hover .v{text-decoration:underline;text-underline-offset:2px;}
/* 地區用 --ink-2 而非更淡的 --ink-3：後者在紙底上只有 2.85，小字不合格 */
.place .ar{flex:none;color:var(--ink-2);font-family:var(--f-num);font-size:10px;letter-spacing:.06em;}
.place.approx{color:var(--ink-2);}

.empty{
  margin-top:64px;text-align:center;color:var(--ink-2);
  font-family:var(--f-ttl);font-weight:var(--ttl-w);font-size:15px;
}

/* ===== 底部導覽 ===== */
.tabbar{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom));z-index:800;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  display:flex;padding:4px;
}
.tab{
  width:58px;height:40px;border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s ease;
}
.tab svg{width:19px;height:19px;stroke:var(--ink-2);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.tab.on{background:var(--ink);}
.tab.on svg{stroke:var(--paper);}

/* ===== 地圖頁 ===== */
.mapview{position:fixed;inset:0;z-index:1000;background:var(--paper);display:none;flex-direction:column;}
.mapview.show{display:flex;}
.maptop{
  position:relative;padding:13px 54px;
  padding-top:calc(13px + env(safe-area-inset-top));
  border-bottom:1px solid var(--line);
}
.maptop h2{font-family:var(--f-ttl);font-weight:var(--ttl-w);font-size:16px;}
.maptop .sub{
  font-family:var(--f-num);font-size:10.5px;font-weight:500;
  letter-spacing:.1em;color:var(--ink-2);margin-top:3px;
}
.map-close{
  position:absolute;left:14px;bottom:11px;
  width:32px;height:32px;border-radius:var(--radius);border:1px solid var(--line);
  background:transparent;display:flex;align-items:center;justify-content:center;padding:0;
}
.map-close svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
#map{flex:1;width:100%;background:var(--line);}
.map-legend{
  position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));left:14px;z-index:1001;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:9px 12px;font-size:11px;line-height:1.95;color:var(--ink-2);
}
.map-legend .dot{display:inline-block;width:8px;height:8px;margin-right:6px;vertical-align:middle;}
.pin{
  width:20px;height:20px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  border:1.5px solid var(--paper);box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.pin.approx{opacity:.5;}
/* 淺色的圖磚是滿版彩色，圖釘要更厚的白邊與更重的陰影才切得開；
   深色的圖磚已被下面那條濾鏡壓暗，1.5px 就夠——故**刻意只加在晝模式**。 */
:root[data-theme="light"] .pin{border-width:2px;box-shadow:0 1px 4px rgba(0,0,0,.45);}
/* 深色模式：OSM 只有亮底圖磚，用濾鏡轉深。
   **只套在圖磚層**——套在整張地圖會把圖釘與彈窗的顏色一起反掉。 */
:root[data-theme="dark"] .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.88) contrast(.92) saturate(.75);}
:root[data-theme="dark"] .leaflet-control-attribution{background:rgba(20,19,17,.8)!important;color:var(--ink-2)!important;}
:root[data-theme="dark"] .leaflet-control-attribution a{color:var(--ink-2)!important;}
:root[data-theme="dark"] .leaflet-popup-content-wrapper,
:root[data-theme="dark"] .leaflet-popup-tip{background:var(--surface);color:var(--ink);}
:root[data-theme="dark"] .leaflet-bar a{background:var(--surface);color:var(--ink);border-color:var(--line);}
:root[data-theme="dark"] .leaflet-bar a:hover{background:var(--paper);}
.leaflet-popup-content-wrapper{border-radius:var(--radius);}
.leaflet-popup-content{margin:11px 13px;font-family:var(--f-body);}
.pop h3{font-family:var(--f-ttl);font-weight:var(--ttl-w);font-size:14px;margin-bottom:4px;line-height:1.4;}
.pop .m{font-size:11.5px;color:var(--ink-2);line-height:1.7;}
.pop a{display:inline-block;margin-top:7px;font-size:11.5px;color:var(--geo);font-weight:500;}
.pop .approxnote{color:var(--hot);font-size:10.5px;}

/* ============================================================
   桌面版（≥1024px）：側欄常駐、瀑布流加欄
   ============================================================ */
/* ===== 行程頁 =====
   結構刻意比照 .mapview（全螢幕覆蓋層），沿用同一套「頂欄 + 內容」骨架。
   一樣不做卡片容器：分隔靠 hairline，層次靠字級與灰階。 */
.planview{position:fixed;inset:0;z-index:1000;background:var(--paper);display:none;flex-direction:column;}
.planview.show{display:flex;}
.plantop{
  position:relative;padding:13px 54px;
  padding-top:calc(13px + env(safe-area-inset-top));
  border-bottom:1px solid var(--line);
}
.plantop h2{font-family:var(--f-ttl);font-weight:var(--ttl-w);font-size:16px;}
.plantop .sub{
  font-family:var(--f-num);font-size:10.5px;font-weight:500;
  letter-spacing:.1em;color:var(--ink-2);margin-top:3px;
}
.plan-close{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
}
.plan-close svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.planbody{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 0 40px;}
.plan-sec{padding:16px 18px;border-bottom:1px solid var(--line);}
.plan-sec:last-child{border-bottom:0;}
.plan-h{
  font-family:var(--f-num);font-size:10.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:10px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}

/* ---- 快捷日期 ---- */
.plan-quick{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:14px;}
.plan-quick button{
  font-size:13px;color:var(--ink-2);padding:2px 0;
  border-bottom:1.5px solid transparent;transition:color .15s ease;
}
.plan-quick button.on{color:var(--ink);border-bottom-color:var(--ink);}

/* ---- 月曆 ---- */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.cal-head .mon{font-family:var(--f-num);font-size:13px;font-weight:500;letter-spacing:.04em;}
.cal-nav{width:30px;height:30px;display:flex;align-items:center;justify-content:center;}
.cal-nav svg{width:15px;height:15px;stroke:var(--ink-2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.cal-nav[disabled]{opacity:.28;}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.cal .dow{
  font-family:var(--f-num);font-size:9.5px;font-weight:500;letter-spacing:.06em;
  color:var(--ink-2);text-align:center;padding-bottom:5px;
}
/* 格子刻意壓扁（1.45 而非正方形）：正方形時整個月曆會吃掉手機畫面一半以上，
   把「我的行程」擠到摺線下方——月曆是選日子的工具，不該比行程本身還顯眼。 */
.cal .day{
  position:relative;aspect-ratio:1.45;border-radius:2px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-family:var(--f-num);font-size:12px;color:var(--ink);
  transition:background .15s ease;
}
.cal .day.pad{visibility:hidden;}
/* 已過去的日子是 disabled 控制項，依 WCAG 1.4.3 不受 AA 4.5 限制，
   是 --ink-3 唯一合理的文字用途（地雷 #7c 說的是「可讀的文字」）。 */
.cal .day.past{color:var(--ink-3);}
.cal .day.on{background:var(--ink);color:var(--paper);}
/* 活動密度：點越多代表當天可排的活動越多。純裝飾故可用 --ink-3（地雷 #7c） */
.cal .dots{display:flex;gap:1.5px;height:3px;}
.cal .dots i{width:3px;height:3px;border-radius:50%;background:var(--ink-3);}
.cal .day.on .dots i{background:var(--paper);opacity:.75;}

/* ---- 推薦與行程列 ---- */
.plan-row{
  display:flex;gap:11px;align-items:flex-start;
  padding:11px 0;border-bottom:1px solid var(--line);
}
.plan-row:last-child{border-bottom:0;}
.plan-row .idx{
  flex:none;font-family:var(--f-num);font-size:9.5px;font-weight:500;
  letter-spacing:.08em;color:var(--ink-2);width:46px;padding-top:3px;
}
.plan-row .info{flex:1;min-width:0;}
.plan-row .nm{
  font-family:var(--f-ttl);font-weight:var(--ttl-w);font-size:14px;
  line-height:1.45;margin-bottom:4px;
}
.plan-row .sub{
  font-family:var(--f-num);font-size:10.5px;letter-spacing:.04em;
  color:var(--ink-2);display:flex;gap:9px;flex-wrap:wrap;align-items:center;
}
.plan-row .sub .cat{font-weight:500;}
/* 位置不確定：不顯示公里數，改講實話。用 --geo 與地點資訊同色系 */
.plan-row .sub .vague{color:var(--geo);opacity:.85;}
/* 查看詳情：與地圖彈窗的 .pop a 同一套視覺（--geo + 箭頭），字級配合行程列的密度縮到 10.5px。
   行程列本身不是連結，故這裡可以直接用 <a>（卡片那邊因為外層已是 <a> 才被迫改用 <button>）。 */
.plan-row .detail{
  display:inline-block;margin-top:5px;
  font-family:var(--f-num);font-size:10.5px;letter-spacing:.04em;
  font-weight:500;color:var(--geo);
}
.plan-row .detail:hover{text-decoration:underline;}
.plan-row .act{
  flex:none;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:2px;color:var(--ink-2);font-size:15px;
  transition:border-color .15s ease,color .15s ease;
}
.plan-row .act:hover{border-color:var(--ink-2);color:var(--ink);}
.plan-row .act.on{border-color:var(--ink);color:var(--ink);}   /* 已在行程裡 */
.plan-empty{font-size:12.5px;color:var(--ink-2);padding:6px 0 2px;line-height:1.7;}

/* ---- 底部動作 ---- */
.plan-acts{display:flex;gap:10px;padding:16px 18px 0;}
.plan-acts button{
  flex:1;height:40px;border-radius:var(--radius);font-size:13px;
  border:1px solid var(--line);color:var(--ink);
  transition:background .15s ease,border-color .15s ease;
}
.plan-acts button:hover{border-color:var(--ink-2);}
.plan-acts button.primary{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.plan-acts button[disabled]{opacity:.4;pointer-events:none;}

/* 註：卡片上曾有一顆「＋排行程」鈕，2026-08-02 移除——每張卡多一顆按鈕讓瀑布流變吵，
   與「照片上不放角標、卡片不放容器」的視覺原則衝突。加入行程改由行程頁自己完成。 */

/* 分享連結進來的唯讀模式：藏掉所有編輯控制項 */
.planview.ro .plan-editonly{display:none;}
.plan-cta{padding:16px 18px 0;}
.plan-cta button{
  width:100%;height:40px;border-radius:var(--radius);font-size:13px;
  background:var(--ink);color:var(--paper);
}
/* ---- 可收合區塊（月曆、地圖、自己組共用）---- */
.fold-h{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:13px 18px;border-bottom:1px solid var(--line);
  font-size:13px;color:var(--ink);text-align:left;
}
.fold-h .cur{font-family:var(--f-num);font-size:11px;color:var(--ink-2);letter-spacing:.04em;}
.fold-h .caret{
  flex:none;width:14px;height:14px;transition:transform .2s ease;
}
.fold-h .caret svg{width:14px;height:14px;stroke:var(--ink-2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.fold-h[aria-expanded="true"] .caret{transform:rotate(90deg);}
.fold-b{display:none;}
.fold-b.open{display:block;}

/* ---- 三套行程的方案卡 ---- */
.pcards{padding:4px 18px 0;}
.pcard{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 14px 12px;margin-bottom:10px;
  transition:border-color .18s ease;
}
.pcard.sel{border-color:var(--ink);}
.pcard-h{
  display:flex;align-items:baseline;gap:8px;margin-bottom:11px;
  font-family:var(--f-num);font-size:10.5px;font-weight:500;letter-spacing:.1em;
  color:var(--ink-2);text-transform:uppercase;
}
.pcard-h .no{color:var(--ink);}
/* 這一顆代表「哪一套行程」，各站 rail 上的 .dot 代表「活動分類」——兩種語義不同的顏色
   會同時出現在一張卡上，故刻意分成方塊與圓點。**圓角不可用 var(--radius)**：
   那是 4px，套在 8px 方塊上就成了正圓，與各站的分類色點長得一模一樣。 */
.pcard-h .route-key{
  width:8px;height:8px;border-radius:2px;background:var(--rc);
  flex:none;align-self:center;
}
.pcard-h .star{color:var(--c-展覽);letter-spacing:0;font-size:11px;}
/* 路線：左側一條細線串起各站，站與站之間標距離 */
.stop{display:flex;gap:11px;align-items:flex-start;}
.stop .rail{
  flex:none;width:16px;display:flex;flex-direction:column;align-items:center;align-self:stretch;
}
.stop .dot{
  width:7px;height:7px;border-radius:50%;margin-top:5px;flex:none;
}
.stop .bar{flex:1;width:1px;background:var(--line);margin:3px 0;}
.stop:last-child .bar{display:none;}
.stop .txt{flex:1;min-width:0;padding-bottom:2px;}
.stop .nm{
  font-family:var(--f-ttl);font-weight:var(--ttl-w);font-size:13.5px;line-height:1.45;
}
.stop .vn{
  font-family:var(--f-num);font-size:10.5px;color:var(--ink-2);
  letter-spacing:.03em;margin-top:2px;
}
.hop{
  display:flex;gap:11px;align-items:center;
  font-family:var(--f-num);font-size:10px;color:var(--ink-2);letter-spacing:.05em;
  padding:1px 0 3px;
}
.hop .rail{flex:none;width:16px;display:flex;justify-content:center;}
.hop .rail i{width:1px;height:15px;background:var(--line);display:block;}
.pcard-f{display:flex;justify-content:flex-end;margin-top:9px;}
.pcard-f button{
  height:31px;padding:0 15px;border-radius:2px;font-size:12.5px;
  border:1px solid var(--line);color:var(--ink);
}
.pcard.sel .pcard-f button{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.plan-more{
  display:block;width:100%;text-align:left;padding:2px 18px 16px;
  font-size:12.5px;color:var(--ink-2);
}
.plan-more:hover{color:var(--ink);}
.plan-more.on{color:var(--ink);}

/* ---- 共用地圖（三套一起比較）---- */
#planMap{height:260px;background:var(--line);}
.planview .leaflet-container{background:var(--line);}
/* 三套靠色相分辨；選中與否另以實心／空心分辨，兩個維度互不干擾。 */
.rpin{
  width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-num);font-size:10.5px;font-weight:500;
  background:var(--rc);color:var(--paper);
  border:1.5px solid var(--paper);box-shadow:0 1px 3px rgba(0,0,0,.3);
}
/* 未選中的用「空心」而不是半透明。低彩度 + 透明度壓在滿版彩色的 OSM 圖磚上會直接
   消失（地雷 #7 記載過同一件事），實心／空心的對比則不受底圖影響。 */
.rpin.dim{background:var(--paper);color:var(--rc);border-color:var(--rc);
          box-shadow:0 1px 2px rgba(0,0,0,.22);}

/* ---- 自己組：地區與據點 ---- */
.pick-row{display:flex;flex-wrap:wrap;gap:9px 15px;margin-bottom:12px;}
.pick-row button{
  font-size:12.5px;color:var(--ink-2);padding:2px 0;
  border-bottom:1.5px solid transparent;
}
.pick-row button.on{color:var(--ink);border-bottom-color:var(--ink);}
.pick-row button .n{
  font-family:var(--f-num);font-size:10px;color:var(--ink-3);margin-left:4px;
}
.pick-row button.on .n{color:var(--ink-2);}
.pick-sub{padding-left:11px;border-left:1px solid var(--line);margin-bottom:12px;}
.fav-note{
  font-size:12px;color:var(--ink-2);line-height:1.7;
  padding:9px 0 3px;border-top:1px solid var(--line);
}
.fav-note b{color:var(--c-展覽);font-weight:500;}

.plan-toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(78px + env(safe-area-inset-bottom));z-index:1200;
  background:var(--ink);color:var(--paper);font-size:12.5px;
  padding:9px 16px;border-radius:var(--radius);
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.plan-toast.show{opacity:1;}

@media (min-width:1024px){
  :root{--gap:16px;}
  body{padding-bottom:40px;}
  .sidebar{transform:none;width:264px;z-index:10;padding-bottom:96px;}
  .overlay{display:none;}
  .menu-btn{display:none;}
  .sb-toggle{display:flex;}
  .wrap{max-width:1400px;margin-left:264px;margin-right:auto;padding:14px 32px 0;
        transition:margin-left .25s ease;}
  .top{padding:20px 0 12px;}
  .searchbar input{font-size:15px;}
  .body h2{font-size:15.5px;}
  /* 底部導覽移到側欄底部 */
  .tabbar{left:20px;bottom:20px;transform:none;transition:left .25s ease;}
  .tab{width:72px;}   /* 三顆共 224px，仍容得下 264px 寬的側欄 */
  /* ---- 行程頁桌面版：左邊文字、右邊地圖釘住（手機完全不受影響）----
     原本是單欄收窄置中，兩側整片留白；桌面改成兩欄，右欄地圖常駐並黏在視窗上，
     捲到下面挑活動時仍看得到路線。左欄仍維持 620px 的閱讀寬度，一行文字才不會太長。 */
  /* **`width:100%` 不可省。** .planview 是 flex column，.planbody 一旦有了
     `margin:0 auto`，在交叉軸上就從「撐滿」變成「縮到內容大小」，grid 容器寬度
     只剩 620+380+gap，右欄的 1fr 永遠拿不到剩餘空間（實測地圖卡在最小值 380px，
     看起來像 1fr 壞掉，其實是容器根本沒那麼寬）。 */
  .planbody{
    display:grid;
    grid-template-columns:minmax(0,620px) minmax(380px,1fr);
    column-gap:32px;align-items:start;
    width:100%;max-width:1400px;margin:0 auto;padding:0 32px;
  }
  .planbody>*{grid-column:1;max-width:none;margin-left:0;margin-right:0;}
  /* 底部留白刻意用「左欄的一個空白格」而不是 .planbody 的 padding-bottom。
     padding-bottom 只會加長捲動距離、不會加長 sticky 的可黏範圍
     （可黏範圍 = 左欄內容高 − 地圖高，捲動距離 = 左欄內容高 + padding − 視窗高），
     兩者一減就是 `視窗高 − 地圖高 − padding`；padding 一大於那個差值，
     捲到底時地圖就會被往上推出去（實測正好被推 30px）。改成空白格後兩邊同步成長，
     條件簡化成「地圖高 ≤ 可視高」，恆成立。 */
  .planbody::after{content:'';grid-column:1;height:40px;}
  /* 地圖獨佔右欄、跨滿所有列。兩個都不可省：
     ①`align-self:start` —— grid item 預設會被拉伸成整列高度，那樣 sticky 就沒有
       可黏的行程，等於失效（看起來像沒寫，很難查）。
     ②`span 99` 而不是 `1/-1` —— 沒有明確定義 grid-template-rows 時，`-1` 指的是
       明確網格的最後一條線，也就是第 1 條，`1/-1` 會塌成「只佔一列」。 */
  #mapFoldWrap{
    grid-column:2;grid-row:1/span 99;align-self:start;
    position:sticky;top:0;
  }
  #mapFold{display:none;}          /* 桌面常駐展開，折疊鈕沒有用途 */
  /* 蓋掉 .fold-b 的 display:none。**但這只管「看得見」**——renderPlanMap() 是看
     #mapBody 有沒有 .open 才決定畫不畫的，所以 JS 那邊還要 syncPlanMapFold()
     把狀態同步過去，否則右欄會是一塊空的灰底。 */
  #mapBody{display:block;}
  #planMap{height:calc(100vh - 82px);min-height:420px;}

  /* ---- 側欄收合（僅桌面）---- */
  body.sb-off .sidebar{transform:translateX(-100%);}
  body.sb-off .wrap{margin-left:0;max-width:1600px;}
  /* 收合後要有路回來：漢堡鈕重新出現 */
  body.sb-off .menu-btn{display:flex;}
  /* 底部導覽跟著回到畫面中央下方，否則會孤零零貼在左緣 */
  body.sb-off .tabbar{left:50%;transform:translateX(-50%);}
}
@media (min-width:1440px){
  .wrap{padding:16px 44px 0;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}
