/*
 * site.css — 全站樣式(從 includes/header.php 的頁內 <style> 抽出)
 * @version 1.0.0 (2026-09-04)
 *
 * 【為什麼搬出來】
 * 2026-09-04 帥哥松反映「瀏覽器看得到註解」。實測:
 *     首頁    註解 12,108 位元組(佔 2%)
 *     場地頁  註解 15,450 位元組(佔 13%)
 * 其中 CSS 註解 76 段 9,054 位元組,★而且每一頁都會重新送一次★。
 *
 * 搬成外部檔之後:
 *   · 註解不再出現在網頁原始碼裡
 *   · 每頁 HTML 直接少 43 KB(未壓縮)
 *   · .htaccess 已設定 CSS 快取一個月 —— ★只下載一次★
 *
 * ⚠️ ★這一支是純 CSS,不要在裡面寫 PHP★
 *    搬出來的時候確認過原本的 <style> 區塊★一段 PHP 都沒有★,
 *    所以能整塊搬。以後若需要動態值,用 CSS 變數或 data 屬性,
 *    不要把這支改回 .php —— 改回去就失去快取,等於白搬。
 *
 * ⚠️ ★改了這支檔案要記得版本號會不會跟著跳★
 *    header.php 是用 ?v=<APP_VERSION> 當快取破壞子。
 *    只改 site.css 而沒有動 includes/version.php 的 APP_VERSION 的話,
 *    ★客戶的瀏覽器會繼續用舊的快取,最長一個月★ ——
 *    而且不會報錯,你在無痕視窗看是對的,客戶看到的是舊版
 *    (開發規範第二十三章)。
 */

  :root {
    --gap: 16px;
    --color-primary: #000000;
    --color-text: #000;
    --color-muted: #000;
    --header-height: 64px;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    font-family: Georgia, "Heiti TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
    color: var(--color-text);
    background: #fafafa;
    line-height: 1.4;
  }
  .container {
    width: 95%;
    margin: 0 auto;
  }

  /* 固定導覽列:預設透明疊在頂圖上,捲動後變成實色背景 */
  header.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    padding: 16px 0;
    background: transparent;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
  }
  header.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  header.site-header .logo {
    /* ★1.32.0:Anton 排在最前面★ —— Impact 只有 Windows 有,
       手機與 ChromeOS 會退回 Arial Narrow,標題長得完全不一樣。
       Impact 留在後面當 Anton 還沒載入完時的暫時替身。 */
    font-family: 'Anton', Impact, "Arial Narrow", sans-serif;
    font-size: 1.2rem;
    color: #fff;
    text-decoration: none;
    /* ★1.31.0:text-shadow 移到 <a> 上就沒有意義了★ ——
       文字現在在實色色塊上,陰影只會讓字看起來髒。
       transition 也拿掉:兩個色塊在捲動前後長得一樣,沒有東西要過渡。 */
  }

  /* ★1.31.0:標題拆成兩個色塊★(帥哥松指定)
     mySpace = 黑底白字、我的空間 = 紅底白字。

     ⚠️ ★紅色用 #e30000,不是 var(--color-primary)★ ——
        那個變數的值其實是 #000000(黑),名字容易誤導。
        #e30000 是站上真正的主色紅(與 .tag-purpose、.calc-avail-ok 同一支)。
     ⚠️ ★padding 用 em 不用 px★ —— 標題在 900px 以上會從
        1.2rem 放大到 1.8rem,px 的話大字級時左右留白會顯得太窄。
        0.35em 大約就是一個空格的寬度。
     ⚠️ 兩個 span 之間★不能有換行或空白★(HTML 裡是連著寫的)——
        inline-block 之間的空白會被算成一個字元寬,
        黑塊與紅塊中間會裂開一條縫。 */
  /* ★預設(頁首透明疊在頂圖上,也就是場地頁還沒往下拉的時候)★
     ——★不上色塊★,就是 1.30.0 以前的樣子:白字 + 陰影。
     白字疊在照片上一定要有陰影,不然遇到淺色照片會看不見。
     ⚠️ ★這時候不能有 padding★ —— 有的話 mySpace 與 我的空間
        中間會多出一段空隙,就不是「跟以前一樣」了。 */
  header.site-header .logo .logo-en,
  header.site-header .logo .logo-zh {
    display: inline-block;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
    transition: background-color 0.25s ease, text-shadow 0.25s ease;
  }

  /* ★捲動後(頁首變實色背景)才出現兩個色塊★
     首頁/縣市頁/交通站頁沒有頂圖,header 一開始就帶 .scrolled,
     所以它們★一進來就是色塊★。
     場地頁有頂圖,往下拉之後才變成色塊。
     ⚠️ padding 只在這裡加,所以場地頁捲動時標題會微幅變寬 ——
        這是為了讓未捲動狀態與舊版逐字相同,刻意接受的。 */
  header.site-header.scrolled .logo .logo-en,
  header.site-header.scrolled .logo .logo-zh {
    padding: 0.08em 0.35em;
  }
  header.site-header.scrolled .logo .logo-en { background: #000000; }
  header.site-header.scrolled .logo .logo-zh { background: #e30000; }
  @media (min-width: 900px) {
    header.site-header .logo { font-size: 1.8rem; }
  }
  header.site-header nav { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
  header.site-header nav a {
    color: #fff;
    text-decoration: none;
    font-size: 0.85rem;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
    transition: color 0.25s ease, text-shadow 0.25s ease;
    white-space: nowrap;
  }
  .nav-dropdown { position: relative; }
  .nav-dropdown-toggle {
    background: none; border: none; cursor: pointer; padding: 0;
    color: #fff; font-size: 0.85rem; font-family: inherit;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
    transition: color 0.25s ease, text-shadow 0.25s ease;
  }
  header.site-header.scrolled .nav-dropdown-toggle { color: #333; text-shadow: none; }
  .nav-dropdown-menu {
    display: none;
    position: absolute; top: 100%; right: 0; margin-top: 10px;
    background: #fff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    min-width: 160px; padding: 6px 0; z-index: 1001;
  }
  .nav-dropdown-menu.open { display: block; }
  .nav-dropdown-menu a {
    display: block; padding: 8px 18px;
    color: #333 !important; text-shadow: none !important;
    font-size: 0.85rem; white-space: nowrap;
  }
  .nav-dropdown-menu a:hover { background: #f5f5f5; }
  .nav-dropdown-menu .nav-dropdown { width: 100%; }
  .nav-dropdown-menu .nav-dropdown-toggle {
    display: block; width: 100%; text-align: left;
    padding: 8px 18px; color: #333 !important; text-shadow: none !important;
  }
  .nav-dropdown-menu .nav-dropdown-menu {
    position: static; box-shadow: none; margin: 0; padding-left: 12px;
    border-left: 2px solid #eee; display: none;
  }
  .nav-dropdown-menu .nav-dropdown-menu.open { display: block; }
  /* 捲動後(或本來就沒有頂圖的頁面):實色背景 */
  header.site-header.scrolled {
    background: #fafafa;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  /* ★1.31.0:捲動後不能再把 .logo 的字染成 var(--color-primary)★ ——
     那個值是 #000000,套下去會變成「黑底黑字」與「紅底黑字」,
     ★黑底黑字等於整塊消失★,而且不會報錯,只有肉眼看得出來
     (開發規範第二十三章)。兩個色塊在捲動前後維持白字。 */
  header.site-header.scrolled .logo .logo-en,
  header.site-header.scrolled .logo .logo-zh {
    color: #fff;
    text-shadow: none;
  }
  header.site-header.scrolled nav a {
    color: #333;
    text-shadow: none;
  }
  /* 沒有頂圖可疊加的頁面(如列表頁),下面內容要預留導覽列高度避免被蓋住 */
  main.push-down { padding-top: var(--header-height); }

  /* Mobile first: 2欄 */
  .venue-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap);
    padding: var(--gap) 0;
  }
  /* ===== 麵包屑導覽列(S-1)===== */
  .breadcrumb {
    display: flex;
    flex-wrap: wrap;        /* 手機版窄的時候自動換行,不撐破版面 */
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    margin: 14px 0 10px;
    line-height: 1.6;
  }
  /* 連結固定黑色,不要用預設的藍色 */
  .breadcrumb a {
    color: #000;
    text-decoration: none;
  }
  .breadcrumb a:visited { color: #000; }   /* 逛過的也維持黑色 */
  .breadcrumb a:hover   { color: #000; text-decoration: underline; }
  /* 目前所在的那一層(不可點)用灰色,跟可點的區分開 */
  .breadcrumb [aria-current="page"] { color: #777; }
  .breadcrumb .sep { color: #bbb; }

  .venue-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    text-decoration: none;
    color: inherit;
    display: block;
  }
  .venue-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    background: #ddd;
  }
  .venue-card .body { padding: 12px; }
  .venue-card h3 { margin: 0 0 4px; font-size: 0.95rem; line-height: 1.4; }
  /* 1.18.0:★間隔改用 HTML 的一個空格,不用 CSS 控制★(帥哥松指示)
     ⚠️ 拿掉的是 gap:10px 與 a 的 width/height:20px ——
        那個固定寬度會把 emoji 硬塞進 20px 的框裡,
        SVG 圖示(18px)與 emoji 的視覺大小也對不齊。
     ⚠️ ★display:flex 一併拿掉★:flex 容器會★把子元素之間的
        空白節點吃掉★,留著的話 HTML 裡的空格不會顯示出來。
        改回預設的 inline 排版,空格才有作用。
     ⚠️ vertical-align:middle 要留:SVG 與 emoji 的基線不同,
        不對齊的話 YT/日曆圖示會比交通站圖示低一截。 */
  .venue-card .meta { font-size: 1rem; line-height: 1.6; }
  .venue-card .meta a {
    text-decoration: none;
    display: inline-block; vertical-align: middle;
  }
  .venue-card .meta svg { vertical-align: middle; }

  @media (min-width: 900px) {
    .venue-grid { grid-template-columns: repeat(4, 1fr); }
  }

  .filter-purpose-list { margin-top: 10px; font-size: 0.85rem; }
  @media (max-width: 640px) {
    .filter-purpose-list {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px 4px;
    }
    .filter-purpose-list .checkbox-inline {
      display: flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  /* ===== 場地詳細頁 - 頂部大圖(滿版) + 文字疊圖(上下左右置中) ===== */
  .venue-hero {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  @media (max-width: 767px) {
    .venue-hero { height: auto; aspect-ratio: 16 / 9; }
  }
  .venue-hero img {
    position: absolute; inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(3px) brightness(0.8);
  }
  .venue-hero::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.2);
  }
  .venue-hero-text {
    position: relative;
    z-index: 2;
    color: #fff;
    text-align: center;
    padding: 0 16px;
  }
  .venue-hero-text .title {
    font-size: clamp(1.2rem, 7vw, 5rem);
    font-weight: 500;
    line-height: 1.15;
    margin: 0 0 6px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }
  .venue-hero-text .tagline {
    font-size: clamp(0.6rem, 3vw, 0.8rem);
    opacity: 0.9;
  }

  .stars { color: #e30000; letter-spacing: 2px; }

  .section-title {
    font-size: 1.1rem;
    border-left: 4px solid var(--color-primary);
    padding-left: 10px;
    margin: 18px 0 8px;
  }
  .desc-text { line-height: 1.5; font-size: 0.95rem; }
  .page-content { white-space: pre-line; }
  /* 1.15.0:★改成 max-width★(原本是 width: 100%)
     width:100% 是「就是這麼寬」—— 一張 400px 的圖也會被硬撐到
     容器寬度(一般頁面的 .container 是 95% 且沒有 max-width,
     在 27 吋螢幕上等於 1800px),放大後糊掉。
     max-width 是「最多不超過」:原圖多大就多大,
     只有超過容器寬度時才縮 —— 手機上自然不會超出頁寬。 */
  .page-content img { max-width: 100%; height: auto; }
  /* 1.16.0:★一般頁面的影片直接對 iframe 下樣式★
     ────────────────────────────────────────────────────────
     ★為什麼 1.15.0 的 .page-content .video-wrap 沒有作用★

     Quill 有自己的 Video blot(blotName="video"、className="ql-video"、
     tagName="IFRAME")。編輯器插入內容時走的是
     clipboard.dangerouslyPasteHTML(),那支會把 HTML 過一遍 Quill 的
     比對器 —— <iframe> 被認成 Video blot,而外層的
     <div class="video-wrap"> ★不是 Quill 認得的 blot,直接被丟掉★。

     所以資料庫裡存的其實是:
         <iframe class="ql-video" src="...">      ← 沒有外框
     而前台★完全沒有任何 iframe / .ql-video 的樣式★,
     於是瀏覽器套用「替換元素」的預設值 ★300×150px★ —— 影片超小。
     (quill.snow.css 裡的 .ql-video 只有 display:block;max-width:100%,
      那是給後台編輯器用的,前台沒有載入那支 CSS。)

     ⚠️ 所以要對 ★iframe 本身★ 下樣式,不能只寫外框的規則。
     ⚠️ 用 aspect-ratio 維持 16:9 —— 沒有外框可以做 padding-top 那招。
     ⚠️ 這條也涵蓋直接貼進來的 iframe(例如用純文字模式貼原始碼)。 */
  .page-content iframe {
    display: block;
    width: 100%;
    max-width: 720px;
    aspect-ratio: 16 / 9;
    height: auto;
    /* 1.17.0:★靠左對齊,不要置中★(帥哥松指示)
       原本是 margin: 12px auto —— 左右的 auto 會把剩餘空間平均分配,
       也就是置中。改成 0 讓它跟上下文的文字切齊。
       ⚠️ 只改左右,★上下的 12px 要留★,否則影片會黏在前後段文字上。 */
    margin: 12px 0;
    border: 0;
    border-radius: 8px;
  }
  /* 有 .video-wrap 外框的舊內容仍然要正常(那是用純文字模式貼的,
     或是以後改用別的編輯器)。⚠️ 外框自己會撐出 16:9,
     裡面的 iframe 要退回絕對定位滿版,★不能套上面那條 aspect-ratio★。
     ⚠️ 1.17.0:這裡的 margin 也一起改成靠左 ——
        ★兩種寫法要長得一樣★,否則同一個網站上會出現有的置中、
        有的靠左,看起來像壞掉。 */
  .page-content .video-wrap { max-width: 720px; margin-left: 0; margin-right: 0; }
  .page-content .video-wrap iframe {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    max-width: none; aspect-ratio: auto;
    margin: 0; border-radius: 0;
  }
  /* Quill編輯器產生的清單,不論項目符號或數字都是<ol>包起來,
     靠data-list屬性區分,前台需要對應CSS才能正確顯示(不會全部
     變成統一的數字清單) */
  .page-content ol { padding-left: 1.5em; margin: 0; counter-reset: list-0; }
  .page-content li { list-style-type: none; padding-left: 1.5em; position: relative; }
  .page-content li[data-list="bullet"]::before { content: '\2022'; position: absolute; left: 0; }
  .page-content li[data-list="ordered"] { counter-increment: list-0; }
  .page-content li[data-list="ordered"]::before { content: counter(list-0, decimal) '. '; position: absolute; left: 0; }
  .desc-text a { color: #000; }

  /* 適合用途 紅底標籤 */
  .tag-purpose {
    display: inline-block;
    background: #e30000; color: #fff;
    font-size: 0.8rem; padding: 3px 10px;
    border-radius: 4px;
    /* 1.13.0:★拿掉右邊的 6px★,標籤之間改成由 HTML 的一個空格隔開。
       ⚠️ ★上下的 2px 一定要留★:標籤換行時,兩排之間沒有間距會黏在一起。
          空格只解決左右,解決不了上下。
       ⚠️ 這個 class 由場地頁與交通站頁共用,所以兩邊的間隔都會變窄。 */
    margin: 2px 0;
  }
  /* 1.12.0:這個標籤自 v1.26.0(場地頁)與 v1.10.0(交通站頁)起
     會是 <a>,瀏覽器預設會加底線 —— 紅底白字上面再加白色底線很雜。
     ⚠️ 顏色也要一起指定:<a> 的預設色會蓋掉上面那行的 color:#fff,
        只寫 text-decoration:none 的話字會變成連結藍。 */
  a.tag-purpose,
  a.tag-purpose:visited { text-decoration: none; color: #fff; }
  /* 拿掉底線之後就沒有「這是連結」的視覺回饋了,補一個 hover 變深。
     不用 opacity —— 那會連文字一起變淡,在紅底上不好讀。 */
  a.tag-purpose:hover { background: #b30000; }

  .video-wrap { position: relative; width: 100%; padding-top: 56.25%; margin: 12px 0; border-radius: 8px; overflow: hidden; }
  .video-wrap iframe { position: absolute; top:0; left:0; width:100%; height:100%; border:0; }

  .icon-list { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }
  .icon-list li {
    display: flex; gap: 8px; padding: 2px 0;
    line-height: 1.4;
  }
  .icon-list .icon { flex-shrink: 0; width: 22px; text-align: center; }
  .icon-list .label { color: var(--color-muted); flex-shrink: 0; min-width: 88px; }
  .icon-list .value { flex: 1; white-space: pre-line; }
  .icon-list .value a { color: #000; }

  /* 交通站點:目前是 .transit-inline 這種一行式的寫法
     (venue.php 1522 行)。
     ★1.30.0 移除了舊的 .transit-list 那組(清單式,4 條規則)★ ——
     場地頁改版之後 HTML 就沒有再輸出過那個 class。
     ⚠️ 兩個名字只差一個字,搜尋時要看清楚是 -list 還是 -inline。 */
  .transit-inline { margin: 8px 0; line-height: 1.8; }
  .transit-inline .icon { margin-right: 2px; }
  .transit-inline a { color: #000; text-decoration: none; margin-right: 16px; }

  .price-notes { font-size: 0.85rem; color: var(--color-muted); margin-top: 6px; padding-left: 18px; }
  .price-note-star { font-size: 0.85rem; color: var(--color-muted); margin-top: 6px; }
  #rent-calculator { margin-top: 20px; }
  .calc-desc-hint { font-size: 0.85rem; color: var(--color-muted); margin: 6px 0 12px; }
  /* ── 檔期查詢月曆(自繪,取代 Google iframe)────────────────── */
  .cal-box { background:#fff; border:1px solid #e8e8e8; border-radius:8px; padding:14px; }
  .cal-head { display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:12px; }
  .cal-title { font-weight:bold; font-size:1rem; min-width:130px; text-align:center; }
  .cal-nav { width:32px; height:32px; border:1px solid #ddd; background:#fff; border-radius:6px;
             font-size:1.2rem; line-height:1; cursor:pointer; color:#444; }
  .cal-nav:hover:not(:disabled) { background:#f2f2f2; }
  .cal-nav:disabled { opacity:.3; cursor:default; }
  .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
  .cal-wd { text-align:center; font-size:0.78rem; color:#999; padding:4px 0; }
  .cal-cell { min-height:62px; border-radius:6px; padding:4px; font-size:0.8rem;
              display:flex; flex-direction:column; gap:2px; }
  .cal-empty { background:transparent; }
  .cal-free { background:#f4faf5; border:1px solid #e0efe3; }
  .cal-busy { background:#fdf2f2; border:1px solid #f3dede; }
  .cal-past { background:#fafafa; border:1px solid #f0f0f0; color:#c4c4c4; }
  .cal-today .cal-d { background:#2c3e50; color:#fff; border-radius:50%;
                      width:20px; height:20px; display:inline-flex;
                      align-items:center; justify-content:center; }
  .cal-d { font-weight:bold; color:#555; font-size:0.82rem; }
  .cal-past .cal-d { color:#c4c4c4; font-weight:normal; }
  .cal-slots { display:flex; flex-direction:column; gap:1px; }
  .cal-slots em { font-style:normal; font-size:0.68rem; color:#c0392b;
                  background:#fbe9e9; border-radius:3px; padding:0 3px;
                  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cal-legend { display:flex; align-items:center; gap:14px; flex-wrap:wrap;
                margin-top:12px; font-size:0.78rem; color:#777; }
  .cal-legend i { display:inline-block; width:10px; height:10px; border-radius:2px;
                  margin-right:5px; vertical-align:-1px; }
  .cal-dot-busy { background:#f3dede; border:1px solid #e5c9c9; }
  .cal-dot-free { background:#e0efe3; border:1px solid #cfe3d4; }
  .cal-cell[data-day] { cursor:pointer; }
  .cal-cell[data-day]:hover { filter:brightness(0.97); }
  .cal-sel { outline:2px solid #2c3e50; outline-offset:-2px; }
  .cal-dot { display:none; width:7px; height:7px; border-radius:50%; background:#e05252; }
  .cal-detail { margin-top:10px; padding:10px 12px; background:#fbf6f6; border:1px solid #f0e0e0;
                border-radius:6px; font-size:0.85rem; }
  .cal-detail strong { display:block; margin-bottom:6px; color:#555; font-size:0.86rem; }
  .cal-detail-slots { display:flex; flex-wrap:wrap; gap:6px; }
  .cal-detail-slots em { font-style:normal; background:#fff; border:1px solid #eddcdc;
                         color:#c0392b; border-radius:4px; padding:3px 8px; }

  /* ── 手機版 ────────────────────────────────────────────────
     窄螢幕塞不下「09:00-13:00」這種文字,硬塞會撐破格線。
     改成只顯示一顆紅點,點下去在月曆下方展開當天的時段。
     兩種呈現都在DOM裡,用CSS切換,所以轉螢幕方向或縮放都不會出錯。 */
  @media (max-width: 680px) {
    .cal-box { padding:10px 6px; }
    .cal-grid { gap:3px; }
    .cal-cell { min-height:40px; padding:3px 1px; align-items:center; justify-content:center; }
    .cal-wd { font-size:0.72rem; padding:2px 0; }
    .cal-d { font-size:0.85rem; }
    .cal-slots { display:none; }
    .cal-dot { display:block; margin-top:3px; }
    .cal-title { font-size:0.95rem; min-width:110px; }
  }
  @media (max-width: 380px) {
    .cal-cell { min-height:34px; }
    .cal-d { font-size:0.78rem; }
  }

  .calc-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 12px; }
  .calc-form label { display: flex; flex-direction: column; font-size: 0.85rem; gap: 4px; }
  .calc-form input, .calc-form select { padding: 6px 8px; border: 1px solid #ddd; border-radius: 4px; }
  /* 「請選擇適用的分類」與「其他服務」都改成一列:標題在左、內容接在右邊。
     螢幕窄的時候 flex-wrap 會自己折行,不會擠成一團。 */
  #calcCategoryBox {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 6px 10px; margin-bottom: 12px;
  }
  #calcCategoryBox .calc-cat-title { font-size: 0.85rem; margin: 0; white-space: nowrap; }
  #calcCategoryBox select { padding: 6px 8px; border: 1px solid #ddd; border-radius: 4px; }

  #calcExtrasBox {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px 12px; margin-bottom: 12px;
  }
  .calc-extras-title { font-size: 0.85rem; font-weight: bold; margin: 0; white-space: nowrap; }
  /* 勾選項會自己折行,項目多的時候不會把版面撐破 */
  #calcExtrasList { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
                    flex: 1 1 auto; min-width: 0; }
  /* 「其他服務(可調整)」的每個勾選項:
     這個class在後台(venue_form.php)有定義樣式,但前台一直沒有,所以整排
     勾選項的垂直位置完全交給瀏覽器預設值決定——checkbox是inline-block、
     預設vertical-align:baseline,又帶著UA自己的margin,結果整排看起來
     一個比一個低(階梯狀)。這裡把每一項改成自己就是一個flex列、垂直置中,
     並把checkbox的margin歸零,徹底拿掉對baseline的依賴,整排就會切齊。 */
  #calcExtrasList .checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
  }
  #calcExtrasList .checkbox-inline input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
    vertical-align: middle;
  }
  #calcResultBox {
    background: #f7f7f7; border-radius: 8px; padding: 14px 16px;
    font-size: 0.95rem; line-height: 1.7;
  }
  .price-notes li { margin-bottom: 2px; line-height: 1.4; }

  /* 交通地理位置下方的小地圖:高度200px,不含樓層的簡化地址查詢 */
  /* Google 我的地圖標題列高度:頁尾與場地頁★共用同一個值★。
     ⚠️ 要調就改這裡(手機),桌機的在下面 @media 區塊。 */
  :root { --mymaps-header: 60px; }

  .map-wrap-small { position: relative; width: 100%; height: 300px; margin: 8px 0; border-radius: 8px; overflow: hidden; }
  .map-wrap-small iframe { width: 100%; height: 100%; border: 0; }
  /* 場地頁「交通地理位置」那一格改放 Google 我的地圖時,
     用跟頁尾同一招把上面那條標題列裁掉。
     ⚠️ ★只有 .is-mymap 才裁★ —— 沒有座標的場地退回原本的
        地址地圖,那種沒有標題列,裁了會把地圖上緣切掉。
     ⚠️ 高度沿用同一個 --mymaps-header,所以調一次兩邊都會跟著動,
        不會出現「頁尾對了、場地頁沒對」的狀況。 */
  .map-wrap-small.is-mymap iframe {
    height: calc(100% + var(--mymaps-header));
    margin-top: calc(var(--mymaps-header) * -1);
  }

  .gallery-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin: 8px 0;
  }
  .gallery-grid img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; }
  .gallery-grid a { cursor: pointer; }

  /* ===== 照片說明(1.10.0)===== */
  /* 手機優先:直接顯示在照片下方。
     ⚠️ 手機沒有滑鼠,做成 hover 浮現的話使用者永遠看不到。 */
  .gallery-grid a { position: relative; display: block; }
  .gallery-cap {
    display: block;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #555;
    margin-top: 4px;
    /* 說明最長 150 字,限制兩行避免把格線撐得高低不齊 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  @media (min-width: 768px) {
    /* 桌機:改成滑鼠移上去才浮在照片底部,不佔版面也不擋照片 */
    .gallery-cap {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      margin: 0;
      padding: 6px 8px;
      background: rgba(0, 0, 0, 0.72);
      color: #fff;
      border-radius: 0 0 6px 6px;   /* 對齊照片的圓角 */
      opacity: 0;
      transition: opacity .18s;
      pointer-events: none;          /* 不要擋住點擊放大 */
    }
    .gallery-grid a:hover .gallery-cap,
    .gallery-grid a:focus-visible .gallery-cap {
      opacity: 1;                    /* focus 也要顯示,鍵盤操作才看得到 */
    }
  }
  @media (min-width: 768px) {
    .gallery-grid { grid-template-columns: repeat(5, 1fr); }
  }

  .lightbox {
    display: none;
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0,0,0,0.9);
    align-items: center; justify-content: center;
  }
  .lightbox.active { display: flex; }

  /* 燈箱裡的照片說明(1.10.0)*/
  .lightbox-cap {
    display: none;                 /* 沒有說明時由 JS 保持隱藏 */
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: center;
    /* 不要擋住上一張/下一張的點擊區 */
    pointer-events: none;
  }
  @media (max-width: 767px) {
    /* 手機螢幕小,說明字再小一點,並留出安全距離避開系統手勢列 */
    .lightbox-cap { font-size: 0.82rem; padding: 10px 12px 22px; }
  }
  .lightbox-img {
    max-width: 90vw; max-height: 90vh;
    object-fit: contain;
    touch-action: pan-y;
  }
  .lightbox-close {
    position: absolute; top: 16px; right: 20px;
    background: none; border: none; color: #fff;
    font-size: 2.5rem; line-height: 1; cursor: pointer;
    z-index: 2001;
  }
  .lightbox-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(255,255,255,0.15); border: none; color: #fff;
    font-size: 1.5rem; width: 48px; height: 48px; border-radius: 50%;
    cursor: pointer; z-index: 2001;
  }
  .lightbox-prev { left: 16px; }
  .lightbox-next { right: 16px; }
  /* 手機版寬度較窄,箭頭按鈕容易遮到圖片內容且滑動手勢已經能切換,隱藏箭頭只留手機版滑動 */
  @media (max-width: 640px) {
    .lightbox-arrow { display: none; }
  }

  .myspace-no { color: #999; font-size: 0.8rem; margin: 0; }
  /* 場地頁最後那一個編號(場地相片之後、頁尾之前)。
     原本在右側欄底部,margin:0 是為了貼齊卡片內緣;
     搬到頁面最後之後需要自己的上下留白,否則會黏在相片與頁尾上。 */
  .myspace-no-foot { margin: 18px 0 8px; }

  /* 首頁/列表頁 篩選表單 */
  .filter-box {
    background: #fff; border: 1px solid #eee; border-radius: 8px;
    padding: 16px; margin: 16px 0;
  }
  .filter-box legend { font-weight: bold; padding: 0 6px; }
  .filter-inline {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px;
  }
  .filter-inline select {
    padding: 6px 8px; font-size: 0.85rem; border: 1px solid #ddd; border-radius: 4px;
    background: #fafafa; max-width: 100%;
  }
  .btn {
    padding: 10px 20px; background: var(--color-primary); color: #fff;
    border: none; border-radius: 4px; cursor: pointer; font-size: 0.9rem;
  }

  /* ===== 主要版面:單純兩欄,左欄一路排到交通位置,右欄放設備/服務/mySpace =====
     手機(單欄): 兩個區塊上下堆疊,自然形成 星等>適合用途>場地說明>YT影片>租金>交通位置>設備>服務>mySpace 的順序
     桌機: 左右並排,右欄固定寬度,不隨畫面變寬而跟著變寬 */
  .venue-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 16px;
  }
  @media (min-width: 900px) {
    .venue-layout { grid-template-columns: 1fr 480px; align-items: start; }
  }
  .venue-main { display: flex; flex-direction: column; gap: 16px; }
  .venue-aside { display: flex; flex-direction: column; gap: 16px; }

  .venue-stats { font-size: 0.9rem; margin-bottom: 4px; }
  .venue-stats > div { padding: 1px 0; line-height: 1.3; }

  /* 場地標題:顯示在頂圖下方,粗體放大 */
  .venue-headline {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 16px 0 4px;
    line-height: 1.4;
  }

  .aside-block { background: #fff; border-radius: 8px; padding: 12px 16px; }
  .aside-block .section-title { margin-top: 0; }

  /* ════════ 場地頁:租金說明 ｜ 線上租金試算 並排 + 檔期月曆 ════════
     1.24.0 2026-08-20 從 public/venue.php 的頁內 <style> 搬進來。
     ⚠️ 頁內 <style> 每次載入都會重新下載,而且散在各頁日後沒人
        找得到 —— 樣式一律放這裡。 */
  /* ── ① 租金說明 ｜ 線上租金試算 並排 ── */
  /* ⚠️ ★不用視窗斷點★
     @media (min-width:900px) 判斷的是「視窗寬度」,但實際能用的是
     「主欄寬度」—— 中間隔著一個 300~480px 的側欄,兩者不成比例:
       1280 視窗 → 主欄約 720 → 切兩欄各 350 → 費率表塞不進去,
                   「租金說明」標題會被壓成一個字一行的直排
     auto-fit + minmax 依★容器自己的寬度★決定,兩端都對。 */
  .rent-split {
    display: grid;
    gap: 24px;
    /* ⚠️ ★minmax 的最小值一定要包 min(...)★
     寫成 minmax(420px, 1fr) 在手機上會溢出:360px 的螢幕容器只有約
     342px,但軌道最小值是 420px —— auto-fit ★不會因為放不下就縮小
     最小值★,軌道硬撐成 420px,內容往右溢出約 78px,
     費率表的「租金」那一欄會被切在螢幕外。
     min(420px, 100%) 的意思是「想要 420,但容器不夠時就用 100%」。 */
  /* ⚠️ ★用 auto-fit 而不是 auto-fill★
     只有兩個子元素,auto-fit 會把多出來的空軌道收掉,
     兩張卡片各佔一半;auto-fill 會留下空軌道,卡片被擠窄、右邊留白。
     (主欄 2100px 時最多排得下 4 軌,差別就在這裡。) */
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  }
  .rent-split > div { min-width: 0; }   /* 沒有這行,寬表格會把 grid 撐爆 */

  /* ── ② 兩區使用與「設備說明」相同的卡片外觀 ── */
  /* 設備說明用的是 .aside-block:白底 #fff、圓角 8px、內距 12/16。
     頁面底色 #fafafa,白卡片會浮起來。★沿用同一組數值,不另訂一套★。 */
  .rent-split > div {
    background: #fff;
    border-radius: 8px;
    padding: 12px 16px;
  }
  .rent-split > div .section-title { margin-top: 0; }

  /* ★上緣對齊★
     實測兩張卡片差 20px,原因★不是 align-items,也不是 h2 的 margin★ ——
     是 #rent-calculator 這個 div 自己帶了 margin-top:20px。
     前幾版我改了 .section-title 與 :first-child 都沒用,就是找錯地方。 */
  #rent-calculator { margin-top: 0; }

  /* ── ③ 試算結果:取消自己的綠色區塊 ── */
  /* 它是上面那些欄位的輸出,不是另一個區塊,應該在同一張卡片裡。
     改成只用一條分隔線區隔。 */
  #calcResultBox {
    background: transparent;
    border: 0;
    border-top: 1px solid #eee;
    border-radius: 0;
    padding: 12px 0 0;
    margin-top: 12px;
    font-size: 0.88rem;
    line-height: 1.9;
  }

  /* ── ④ 側欄改成有彈性 ── */
  /* ⚠️ ★這一條會影響整個場地頁的版面★
     原本固定 480px:1280 螢幕上佔 39%(太寬)、3440 螢幕上只佔 15%
     (太窄,設備說明變得又窄又長)。改成 300~480 之間浮動。
     ⚠️ 容器寬度★維持原本的 width:95% 滿版★,沒有加 max-width。 */
  @media (min-width: 900px) {
    .venue-layout { grid-template-columns: 1fr minmax(300px, 480px); }
  }

  /* ── ⑤ 檔期月曆 ── */
  /* 寬度不限制,與「交通地理位置」的地圖一致。
     ★列高改由內容決定★:原本 header.php 設 min-height:62px 是「地板」,
     整月每格都至少 62px,空白列也佔滿高度。改成很小的地板,
     其餘交給內容 —— 同一列會自動對齊到該列最高的那格(grid 預設 stretch)。
     ⚠️ ★一定要包在 min-width:681px 裡★ —— 手機版(header.php 的
        max-width:680px)把時段隱藏了、用 min-height:40px 保持可點大小,
        不包斷點會被這裡蓋掉,格子變得又小又難點。 */
  @media (min-width: 681px) {
    .cal-cell { min-height: 28px; }
  }

  /* ── ⑥ 「待確認」旁邊的小按鈕 ── */
  /* 沒有交日曆的場地,檔期只能人工確認。與其在頁面下方另開一個
     「檔期查詢」區塊(1.24.0 曾經這樣做,但那一區對這種場地沒有內容
     可顯示,反而多一個空區塊),不如把下一步直接放在試算結果旁邊 ——
     客戶正好看到「待確認」的那一刻。
     ⚠️ 刻意做小(0.78rem / 內距 3-10):它是行內的輔助動作,
        不是頁面的主要按鈕,做大會搶掉金額的注意力。 */
  /* ★1.28.0:外觀規則抽成共用★
     .calc-line-btn(綠,Line@確認檔期)與 .calc-avail-ok(紅,可租借)
     是同一種東西 —— 試算結果那一行右邊的行內小標。
     ★尺寸/圓角/間距只留一份★,只有底色不同(開發規範第九章)。
     兩邊各寫一份的話,哪天調 padding 會出現一綠一紅高度不一樣。 */
  .calc-line-btn,
  .calc-avail-ok,
  .calc-avail-out {
    display: inline-block; color: #fff;
    text-decoration: none; font-size: 0.78rem; font-weight: bold;
    padding: 3px 10px; border-radius: 5px; margin-left: 6px;
    vertical-align: 1px; white-space: nowrap;
  }
  .calc-line-btn { background: #06C755; }          /* LINE 品牌綠 */
  .calc-line-btn:hover { background: #05b34c; color: #fff; }

  /* ★1.28.0 新增:有交日曆且該時段可租借時的紅底白字標示★
     用站上既有的主色紅 #e30000(與 .tag-purpose、篩選按鈕同一支),
     ★不要另外挑一個紅★,否則同一頁會出現兩種紅。
     ⚠️ 它★不是連結★,是 <span> —— 外觀做成按鈕的樣子是客戶要的,
        但「可租借」本身沒有下一步動作可點,做成 <a> 會讓客戶
        一直點卻沒反應。 */
  .calc-avail-ok { background: #e30000; }

  /* ★1.29.0 新增:該時段已出租★
     ⚠️ 它與 .calc-avail-ok 一樣★是 <span> 不是 <a>★ ——
        已出租沒有下一步可點,做成連結客戶會一直點卻沒反應。
     ⚠️ 用純黑 #000(站上既有色,出現 11 次),★不要用灰★ ——
        灰底白字對比不足,手機在陽光下看不清楚。 */
  .calc-avail-out { background: #000; }

  table.price-table { width: 100%; border-collapse: collapse; margin: 8px 0; table-layout: fixed; }
  table.price-table col { width: 50%; }
  table.price-table th, table.price-table td {
    border: 1px solid #ccc; padding: 7px; font-size: 0.9rem; text-align: center;
  }
  .price-tabs { display: flex; gap: 4px; margin: 8px 0 0; }
  .price-tab {
    padding: 8px 16px; border: 1px solid #eee; border-bottom: none;
    border-radius: 8px 8px 0 0; background: #f5f5f5; color: #888;
    font-size: 0.9rem; cursor: pointer;
  }
  .price-tab.active { background: #fff; color: #222; font-weight: bold; }

  .social-float {
    position: fixed; right: 14px; bottom: 90px; z-index: 999;
    display: flex; flex-direction: column; gap: 10px;
  }
  .social-float a img { width: 48px; height: 48px; display: block; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
  .history-btn {
    position: relative;
    width: 48px; height: 48px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    align-items: center; justify-content: center;
    font-size: 24px;
    text-decoration: none;
    cursor: pointer;
  }
  .history-badge {
    position: absolute;
    top: -4px; right: -4px;
    background: #e30000; color: #fff;
    border-radius: 50%;
    min-width: 20px; height: 20px;
    font-size: 0.7rem; line-height: 20px;
    text-align: center;
    padding: 0 4px;
    box-sizing: border-box;
  }

  footer.site-footer {
    margin-top: 32px; padding: 20px 0 90px;
    font-size: 0.8rem; color: #000; line-height: 1.5;
  }
  footer.site-footer a { color: #000; text-decoration: underline; }
  /* ★頁尾 Google 我的地圖:把上面那條標題列裁掉★
     Google My Maps 的 embed 沒有「隱藏標題列」的參數 ——
     網址上的 &ehbc=2E312F 只是那條列的「背景色」,拿掉它列還在。
     所以做法是:容器固定高度 + overflow:hidden,iframe 加高
     並往上推一個標題列的高度,讓標題列被裁到容器外面。

     ⚠️ ★標題列高度只有一個地方可以調:上面的 :root --mymaps-header★
        (預設 60px,2026-08-17 帥哥松指定手機與桌機都用這個值)
        頁尾這張與場地頁「交通地理位置」那張★共用同一個值★,
        改一次兩邊都會跟著動。
        如果之後發現手機需要不同的值(標題列在窄螢幕折行會變高),
        在下面的 @media 區塊裡加一行 --mymaps-header 就好。

     ⚠️ ★60px 是估值,需要實機確認★ 那是 Google 的 iframe,
        沒辦法在本機把它渲染出來量。上線後如果:
          上面還露出一條深色 → ★調大★
          地圖上緣被切掉      → ★調小★
        要精準量的話,把交付包裡的 public/mymap_ruler.html 暫時
        傳上去,用手機和電腦各開一次讀刻度,★量完請刪掉★。

     ⚠️ 標題列裡的「放大/在較大的地圖中查看」按鈕會一起被裁掉。
        地圖本身的縮放、圖例、圖釘都不受影響(那些在地圖區域裡)。

     ⚠️ 這是靠 Google iframe 目前的版面結構,★他們改版就會失準★。
        看到地圖上緣怪怪的,先來調這個數字。 */
  footer.site-footer .sitewide-map {
    /* --mymaps-header 從 :root 繼承,這裡只定地圖要露出多高 */
    --map-h: 320px;          /* 手機 */
    margin: 14px 0; border-radius: 8px; overflow: hidden; width: 100%;
    height: var(--map-h);
  }
  footer.site-footer .sitewide-map iframe {
    width: 100%; border: 0; display: block;
    height: calc(var(--map-h) + var(--mymaps-header));
    margin-top: calc(var(--mymaps-header) * -1);
  }
  @media (min-width: 640px) {
    footer.site-footer .sitewide-map { --map-h: 480px; }   /* 桌機 */
  }