/* ===========================================================================
   GMBA 版面調整層 — layout.css
   ---------------------------------------------------------------------------
   2026-08-25　依 handoff-web-layout 的設計稿（2A 窄軌＋倒數／2C 三段規則）
   改寫成對得上這個 repo 真實 class 的版本。

   掛法：每一頁 </head> 之前兩行
        <link rel="stylesheet" href="layout.css">
        <script src="layout.js" defer></script>

   ⚠ 為什麼有些規則帶 !important、有些不帶（這一點交接包沒說對）：
      這個站的 <style> 有一部分在 </head> 後面（首頁 </head> 在第 1197 行，
      最後一段樣式到第 2873 行），而且頁尾有三處寬度是直接寫在標籤的
      style="" 上。所以：
        · 內容欄那幾條在 <head> 裡 → 順序在後就蓋得過，不用 !important
        · 頁尾那幾條在 <body> 裡或寫在標籤上 → 一定要 !important
      分不清楚的後果是「頁尾就是沒變寬」，而且不會有任何錯誤訊息。

   要整批退掉：把每頁那兩行刪掉即可，其他一個字都沒動過。
   ======================================================================== */

:root{
  /* ⭐ 內容欄維持 1240px（2026-08-25 主任定案）。
     實測：把它拉到 1400，全站**沒有任何一個網格多排一欄**（欄數完全一樣），
     換到的只有更長的行 —— 首頁英文最長行從 124 字元變 148、中文從 62 字變 74。
     加寬要划算，前提是同時重排卡片網格（三欄變四欄那種），那是另一輪的事。
     這裡是一個數字，哪天真的要加寬改這一行就好。 */
  --gmba-content: 1240px;
  --gmba-pad: 1.5rem;
  --gmba-rail: 104px;       /* 右側給窄軌的保留區：155 → 104（窄軌 56 + 右邊距 22 + 空隙 26）
                               ⭐ 這是這一批真正的收穫：舊的 155px 是留給 146px 寬的舊側欄的，
                                  窄軌只要 48px，省下來的 59px 直接還給內容。
                                  1240–1500 的螢幕本來左邊距 24px、右邊距 55px（歪的），
                                  現在兩邊都是 24px。 */

  /* 窄軌自己的色票。深紅刻意用網站原本的 --maroon，不用設計稿的 #8E1B23 ——
     浮在導覽列旁邊的東西用另一個紅會很明顯。其餘沿用設計稿。 */
  /* 窄軌 2026-08-25 從 48px 加寬到 56px（主任：字太小看不清楚）。
     小字原本 7.5px —— 那是設計稿給英文 DAYS 的尺寸，中文在那個大小讀不了。 */
  --rail-w: 56px;
  --rail-right: 22px;
  --rail-card: 160px;
  --rail-ink: #1A1815;      /* 非申請期間的中性色（設計稿指定） */
  --rail-paper: #FCFBF8;
  --rail-line: #DDD8CE;
  --rail-mute: #6E6A62;
}

/* ── 1. 內容欄加寬 ─────────────────────────────────────────────────────
   這幾個 class 是實地查出來的，原本全部都是 1240px：
     .container            全站（student-voices 沒有，它是 .sv-container）
     .stats-in             首頁／課程／招生／FAQ 的數字帶
     .hero-in              課程／招生／FAQ 的 hero
     .cl-in                首頁校園生活帶
     .press-scope .press-inner  首頁國際媒體引文區
     .faq-tabs-inner       FAQ 分頁列
   ⚠ 這些規則都在 <head> 裡，所以不需要 !important。 */

.container,
.stats-in,
.hero-in,
.cl-in,
.press-scope .press-inner,
.faq-tabs-inner{
  max-width: var(--gmba-content);
}
/* 🔴 給窄軌讓出右邊那條車道 —— **只在有窄軌的寬度才做**（1024px 以上）。
   2026-08-27 主任回報 contact.html 手機版一行一個字。原因就在這裡：
   這條 padding 原本沒有寬度守門，手機上算出來是
     max(1.5rem, 104px - (390px - 1240px) × .5) = max(24px, 529px) = 529px
   —— 一個 390px 寬的容器右邊留 529px，內容可用寬變成 0。
   其他頁看起來沒事，是因為它們自己的 <style> 有手機 media query 把 padding 蓋掉了；
   contact.html 沒有，就原形畢露。**別頁沒壞不代表規則是對的**，
   而窄軌在 1023px 以下本來就 display:none，這條保留區在那裡純粹是錯的。 */
@media (min-width: 1024px){
  .container,
  .stats-in,
  .hero-in,
  .cl-in,
  .press-scope .press-inner,
  .faq-tabs-inner{
    padding-right: max(var(--gmba-pad),
                       calc(var(--gmba-rail) - (100vw - var(--gmba-content)) * .5));
  }
}

/* ⚠ student-voices 的 .sv-container 是 860px，那是「長文閱讀寬度」，
   刻意不加寬 —— 把見證故事拉到 1400px 會更難讀。 */

/* ── 2. 頁尾對齊 ───────────────────────────────────────────────────────
   原本 1300px，比內容欄窄 60px；加寬之後落差會變成 100px。
   ⚠ 這一段全部要 !important：規則在 <body> 裡，而且有三處寫在標籤的 style 上。 */

.site-footer .footer-secondary,
.footer-main,
.footer-bottom-inner,
.footer-copy-line,
.footer-official-band > div,
.site-footer [style*="max-width:1300px"],
footer [style*="max-width:1300px"]{
  max-width: var(--gmba-content) !important;
}

/* ===========================================================================
   3. 浮動窄軌（設計稿 2A）＋ 三段行為（設計稿 2C）
   ---------------------------------------------------------------------------
   常態 48px 直排軌道，最上面一格是倒數天數。倒數是唯一值得一直露出來的資訊。
   ⭐ 8 個頁面的 HTML 一個字都沒改 —— 內容由 layout.js 就地重build，
      資料讀網頁上本來就有的招生結構化資料（Sheet「本輪招生」→ ①② 寫進去的那份）。
      layout.js 沒跑或讀不到資料時，原本的側欄照樣能用。

   三段行為（設計稿 2C，門檻依實際版面重算過）：
     留白夠（≈1700px 以上）  窄軌 ＋ 滑過往左展開 160px 小卡
                  （設計稿寫 ≥1440，但那假設內容欄靠左；這個站是置中的。
                    ⚠ 門檻不寫死，由 layout.js 量「視窗寬 − 內文右緣」決定）
     1024px～留白不夠  只留窄軌，不展開；滑過倒數格有 title 顯示管道名與日期
     <1024px      右緣取消，改底部固定條；向下捲隱藏、向上捲出現
   ======================================================================== */

.gmba-rail{
  position: fixed;
  right: var(--rail-right);
  top: 50%;
  transform: translateY(-50%);
  z-index: 800;
  display: flex;
  align-items: stretch;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
  font-family: inherit;
}
.gmba-rail.is-on{ opacity: 1; pointer-events: auto; }

.gmba-rail__track{
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: none;
}

/* 最上面那一格：倒數天數（開放中＝深紅；非申請期間＝中性深色） */
.gmba-rail__count{
  background: var(--maroon, #9B1A2C);
  color: var(--rail-paper);
  padding: 10px 2px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  line-height: 1;
  text-align: center;
}
.gmba-rail__num{ font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
/* ⚠ 小字要看得懂，不是裝飾。10px 是這個寬度下還讀得了的下限；
   英文的 INTAKE OPENS 會自己折成兩行，所以不能設 nowrap。 */
.gmba-rail__unit{ font-size: 10px; letter-spacing: .02em; text-transform: uppercase;
  line-height: 1.25; opacity: 1; }
.gmba-rail[data-state="next"] .gmba-rail__count{ background: var(--rail-ink); }
.gmba-rail[data-state="next"] .gmba-rail__unit{ opacity: .8; }
/* 大字放的是文字（OCT／今天）而不是數字時，字級要收小才塞得進 48px */
.gmba-rail__count.is-word .gmba-rail__num{ font-size: 16px; line-height: 1.1; letter-spacing: -.01em; }

/* 直排的兩顆按鈕 */
.gmba-rail__btn{
  writing-mode: vertical-rl;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 22px 0;
  display: flex;
  justify-content: center;
  text-decoration: none;
  transition: background .15s;
}
.gmba-rail__btn--primary{ background: var(--maroon, #9B1A2C); color: var(--rail-paper); }
.gmba-rail__btn--primary:hover{ background: var(--maroon-hover, #B22234); color: var(--rail-paper); }
.gmba-rail[data-state="next"] .gmba-rail__btn--primary{ background: var(--rail-ink); }
.gmba-rail[data-state="next"] .gmba-rail__btn--primary:hover{ background: #332E29; }
.gmba-rail__btn--ghost{
  background: var(--rail-paper);
  color: var(--rail-ink);
  border: 1px solid var(--rail-line);
}
.gmba-rail__btn--ghost:hover{ background: #F0EBE1; color: var(--rail-ink); }

/* 滑過往左展開的小卡。
   ⚠ 一律絕對定位 —— 這樣窄軌自己永遠只有 48px 寬，展開時不會把整條往左推、
     right:22px 的錨點也就不會跳。 */
.gmba-rail__card{
  display: none;
  position: absolute;
  right: calc(var(--rail-w) + 2px);
  top: 0; bottom: 0;
  box-sizing: border-box;
  background: var(--rail-paper);
  border: 1px solid var(--rail-line);
  box-shadow: -10px 0 26px rgba(26,24,21,.14);   /* 會蓋在內文上 → 要讀得出是一層 */
  padding: 14px 16px;
  width: var(--rail-card);
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}
.gmba-rail__kicker{ font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--maroon, #9B1A2C); }
.gmba-rail[data-state="next"] .gmba-rail__kicker{ color: var(--rail-ink); }
.gmba-rail__route{ font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--rail-ink); }
.gmba-rail__when{ font-size: 11px; color: var(--rail-mute); line-height: 1.5; }

/* 多個管道同時開放時，小卡改成一個管道一行、各自連自己的報名系統。
   ⚠ 窄軌那一顆主按鈕帶不了兩個入口（它會連到 admissions 頁那張表），
     真正的分流在這裡。 */
.gmba-rail__row{ display: flex; flex-direction: column; gap: 2px; text-decoration: none;
  border-top: 1px solid var(--rail-line); padding-top: 6px; }
.gmba-rail__row + .gmba-rail__row{ margin-top: 0; }
.gmba-rail__row:first-of-type{ border-top: none; padding-top: 0; }
.gmba-rail__row:hover .gmba-rail__route{ color: var(--maroon, #9B1A2C); }

/* 展開不再看視窗寬度（Amy 2026-08-26）。
   `.is-open` 是 layout.js 加的：滑鼠停留 350ms、而且不在捲動中，才會加上。
   ⚠ **不要把這條改回 :hover** —— 那樣手伸去抓捲軸就彈出來，一天下來很煩。 */
.gmba-rail.is-open .gmba-rail__card{ display: flex; }
/* 鍵盤聚焦在任何桌機寬度都要展開 ——
   不然只有用滑鼠的人知道這裡有細節，用鍵盤的人只看得到兩個直排的字。 */
@media (min-width: 1024px){
  .gmba-rail:focus-within .gmba-rail__card{ display: flex; }
}

/* 原本那條側欄交給 layout.js 收掉；JS 沒跑時它照樣是原本的樣子 */
.gmba-rail-on .float-sidebar{ display: none !important; }

/* ── 4. <1024px：底部固定條 ────────────────────────────────────────────
   原本 960px 以下整條側欄 display:none —— 手機使用者滑完整頁沒有任何申請入口。 */

.gmba-bar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 800;
  display: none;
  align-items: stretch;
  background: var(--rail-paper);
  border-top: 1px solid var(--rail-line);
  transform: translateY(100%);
  transition: transform .28s ease;
  font-family: inherit;
}
.gmba-bar.is-on{ transform: translateY(0); }
.gmba-bar__meta{
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 2px; justify-content: center;
  flex: 1; min-width: 0;
}
.gmba-bar__kicker{ font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--maroon, #9B1A2C); }
.gmba-bar[data-state="next"] .gmba-bar__kicker{ color: var(--rail-ink); }
.gmba-bar__route{ font-size: 11.5px; color: var(--rail-mute); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gmba-bar__btn{
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  display: flex; align-items: center; flex: none; text-decoration: none;
}
.gmba-bar__btn--primary{ background: var(--maroon, #9B1A2C); color: var(--rail-paper); padding: 0 20px; }
.gmba-bar[data-state="next"] .gmba-bar__btn--primary{ background: var(--rail-ink); }
.gmba-bar__btn--ghost{ color: var(--rail-ink); padding: 0 16px; border-left: 1px solid var(--rail-line); }

@media (max-width: 1023px){
  .gmba-rail{ display: none !important; }
  .gmba-bar{ display: flex; }
  /* 底部條高 56px，內容區加同高的 padding-bottom，就不會壓到頁尾 */
  body.gmba-bar-on{ padding-bottom: 56px; }
}

/* 2026-10-02：手機上底部條長到 180px 高（主任截圖）——左邊那欄太窄，
   「OPEN NOW · 29 DAYS LEFT ＋ 管道名」一個字一行往下疊，整條被撐高。
   改成：手機只留「29 DAYS LEFT」（最多兩行）、管道名收掉、整條固定 52px。
   管道名與截止日在頁面的招生區塊本來就有，這裡只負責「還剩幾天＋按鈕」。 */
@media (max-width: 600px){
  .gmba-bar{ height: 52px; }
  .gmba-bar__meta{ padding: 0 12px; }
  .gmba-bar__kicker{ font-size: 10px; line-height: 1.25; letter-spacing: .1em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .gmba-bar[data-state="open"] .gmba-bar__state{ display: none; }
  .gmba-bar__route{ display: none; }
  .gmba-bar__btn{ letter-spacing: .06em; }
  .gmba-bar__btn--primary{ padding: 0 14px; }
  .gmba-bar__btn--ghost{ padding: 0 12px; }
  body.gmba-bar-on{ padding-bottom: 52px; }
}

/* ── 5. 中文標題斷行 ───────────────────────────────────────────────────
   ⚠ 中文行距不用改：這個站的中文頁早就是 --lh-zh: 1.85。 */

html[lang^="zh"] h1,
html[lang^="zh"] h2,
html[lang^="zh"] h3{
  word-break: keep-all;    /* GMBA、AI、2026 這種拉丁字母＋數字不被切開 */
  line-break: strict;      /* 問號、句號不落行首 */
  text-wrap: balance;      /* 兩行長度接近 */
}
html:not([lang^="zh"]) h1,
html:not([lang^="zh"]) h2,
html:not([lang^="zh"]) h3,
html:not([lang^="zh"]) h4{
  text-wrap: balance;
  hyphens: manual;         /* 不自動連字，只尊重作者寫的 &shy; */
}
/* ⭐⭐ 中文專名斷行：量完之後的結論是「這一批不要做」

   量法：1758 個標題元素逐字取行號（Range API），再跟交接包的詞表比對。
   結果：桌機 1440／1280／1024 **一個專名都沒有被切開**。
   ⚠ 交接包那一整批 .nb 是為了「內容欄加寬到 1400」寫的；
     內容欄維持 1240 之後前提就不成立了。

   只有 390px 的四個中文摺疊標題會斷（居留證／獎學金／新加坡／香港），
   兩條修法都試過，兩條都不能用：

   ① `word-break: keep-all` —— 它禁止中文字之間換行，
      academics-zh 在 360px 會撐破 2px，補 overflow-wrap 也沒救回來。

   ② 🔴 在 <summary> 裡包 <span class="nb"> ——
      **這個站的 summary 是 `display:flex; gap:16px`**，
      而 flex 容器的**元素子節點一律變成獨立的 flex item**。
      所以每包一個 span，那個詞就變成獨立的一格，還多吃一個 16px 的 gap：
      首頁 FAQ 欄的 min-content 從 110px 暴增到 390px，
      整欄被撐成 405px，**整頁橫向溢出 31px**（390px 視窗實測）。
      而且包了一個詞會把斷點推到下一個詞
      （新加坡 → 香港 → 日本 → 台灣），是打地鼠。

   結論：中文在任兩字之間換行本來就是正常排版。
   真正該修的只有**作者自己寫死的 `<br>`** —— 首頁英文 h2 的
   `What makes Tunghai<br>GMBA different?` 已改成
   `<span class="nb">Tunghai GMBA</span>`（h2 不是 flex，安全）。

   ⭐ 以後若要在別的地方包 .nb：**先確認那個容器不是 display:flex**。 */

/* 專名不可拆，中英通用：<span class="nb">東海 GMBA</span>、<span class="nb">134 hectares</span> */
.nb{ white-space: nowrap; }

/* ── 6. 段落行寬 ──────────────────────────────────────────────────────
   為什麼要收：Playwright 量過全部 12 頁，英文最長的一段是 **138 個字元一行**
   （admissions 的費用說明），舒適區是 65–75。中文最長 75 字一行，舒適區 25–40。

   ⚠ 交接包原本要「所有段落」都套上限。**這個站不能那樣做** ——
     九成段落沒有 class，全域 `p{max-width}` 會把置中的段落推到左邊。
     所以下面列的是**實測真的太長**的那幾種：門檻是英文 >85 字元/行、
     中文 >40 字/行，量完才寫進來的。每一個都確認過 text-align 是 start、
     左右 margin 是 0，加上限不會讓版面歪掉。

   ⚠ 用 ch／em 不用 px：這幾個地方字級從 12.5px 到 18px 都有，
     用 px 會讓小字那幾段行數過多。ch／em 跟著各自的字級走，
     「一行幾個字」才會一致。

   ⭐ 導言（*-lead）另外收更窄並用 text-wrap:balance ——
     它們只有 1–3 行，孤字（最後一行只剩兩個字）在短段落最明顯。 */

:root{
  --lw-en: 68ch;        /* 英文正文 */
  --lw-en-lead: 58ch;   /* 英文導言、卡片小字 */
  --lw-zh: 32em;        /* 中文正文，約 32 個字一行 */
  --lw-zh-lead: 26em;   /* 中文導言，約 26 個字一行 */
}

/* --- 英文：正文 --- */
html:not([lang^="zh"]) .container > p,
html:not([lang^="zh"]) .sec-in > p,
html:not([lang^="zh"]) .schol-box > p,
html:not([lang^="zh"]) .cd-visa > p,
html:not([lang^="zh"]) .ai-callout > p,
html:not([lang^="zh"]) .sv-body > p,
html:not([lang^="zh"]) .faq-a > p,
html:not([lang^="zh"]) .faq-a,
html:not([lang^="zh"]) blockquote{
  max-width: var(--lw-en);
  text-wrap: pretty;
}

/* --- 英文：導言與卡片小字 --- */
html:not([lang^="zh"]) .sec-lead,
html:not([lang^="zh"]) .wt-lead,
html:not([lang^="zh"]) .ab-lead,
html:not([lang^="zh"]) .wp-lead,
html:not([lang^="zh"]) .hf-lead,
html:not([lang^="zh"]) .fn-lead,
html:not([lang^="zh"]) .cta-lead,
html:not([lang^="zh"]) .cl-lead,
html:not([lang^="zh"]) .cd-lead,
html:not([lang^="zh"]) .wt-foot > p,
html:not([lang^="zh"]) .wt-note,
html:not([lang^="zh"]) .form-card-header > p{
  max-width: var(--lw-en-lead);
  text-wrap: balance;
}

/* --- 中文：正文 --- */
html[lang^="zh"] .container > p,
html[lang^="zh"] .sec-in > p,
html[lang^="zh"] .schol-box > p,
html[lang^="zh"] .cd-visa > p,
html[lang^="zh"] .ai-callout > p,
html[lang^="zh"] .sv-body > p,
html[lang^="zh"] .faq-a > p,
html[lang^="zh"] .faq-a,
html[lang^="zh"] blockquote{
  max-width: var(--lw-zh);
  text-wrap: pretty;
}

/* --- 中文：導言與卡片小字 --- */
html[lang^="zh"] .sec-lead,
html[lang^="zh"] .wt-lead,
html[lang^="zh"] .ab-lead,
html[lang^="zh"] .wp-lead,
html[lang^="zh"] .hf-lead,
html[lang^="zh"] .fn-lead,
html[lang^="zh"] .cta-lead,
html[lang^="zh"] .cl-lead,
html[lang^="zh"] .cd-lead,
html[lang^="zh"] .wt-foot > p,
html[lang^="zh"] .wt-note{
  max-width: var(--lw-zh-lead);
  text-wrap: balance;
}

/* ⚠ 這兩處頁面自己用 id 選擇器寫了 max-width（`#career-directions .cd-visa p`
   是 56em、`#admissions-band .ab-status-d` 是 44em），特異性比上面那幾條高。
   em 在 18px 字級下等於 1008px＝一行 105 個字元，還是太長。
   選擇器補上 id 才蓋得過去 —— 這裡刻意不用 !important，
   因為之後要再蓋它只會更難。 */
html:not([lang^="zh"]) #career-directions .cd-visa > p{ max-width: var(--lw-en); }
html[lang^="zh"] #career-directions .cd-visa > p{ max-width: var(--lw-zh); }
html:not([lang^="zh"]) #admissions-band .ab-status-d{ max-width: var(--lw-en-lead); }
html[lang^="zh"] #admissions-band .ab-status-d{ max-width: var(--lw-zh-lead); }

/* ⚠ 手機不要再收窄 —— 螢幕本來就只有 390px，
   再套 32em（≈512px）不會有效果，但 26em 會讓導言變成一行三個字。 */
@media (max-width: 760px){
  .container > p, .sec-in > p, .schol-box > p, .cd-visa > p, .ai-callout > p,
  .sv-body > p, .faq-a > p, .faq-a, blockquote,
  .sec-lead, .wt-lead, .ab-lead, .wp-lead, .hf-lead, .fn-lead,
  .cta-lead, .cl-lead, .cd-lead, .wt-foot > p, .wt-note, .form-card-header > p{
    max-width: none;
  }
}

/* ── 7. 第二層章節導覽（首頁） ─────────────────────────────────────────
   長相直接沿用 `.acad-index`／`.adm-index`（課程頁、招生頁那條），
   全站三條長得一樣，使用者不用重新學。

   🔴 **出現時機跟浮動窄軌完全一樣**：捲到「為什麼選擇東海 GMBA？」
     那一塊（`#why-pillars`）才滑下來。

     ⚠ 第一版用 `position: sticky` 放在 `<section id="why-gmba">` 之前，
       結果**壓在路思義教堂那張大圖上面**（Amy 2026-08-26 回報）——
       因為 `#why-gmba` 是整個 section，從教堂那張滿版圖就開始了。
     ⚠ 也不能把 markup 移到 `#why-pillars` 前面就好：
       sticky 只在**父層範圍內**有效，塞進 section 裡的話，
       捲出 `#why-gmba` 之後整條就消失了。
     所以改成 `fixed` ＋由 layout.js 加 `.is-on`。
     fixed 不佔版面高度，所以照樣沒有版面跳動。 */

.gmba-index{
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  z-index: 500;
  background: var(--white);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .28s ease, opacity .28s ease;
}
.gmba-index.is-on{ transform: none; opacity: 1; pointer-events: auto; }

/* 🔴 這一塊是修 bug，不是重複寫。Amy 2026-08-26 回報「首頁第二層導覽整個跟內文疊在一起」。
   原因：首頁的頁面 <style> 裡有一條

       body.has-hero nav { background: transparent; box-shadow: none;
                           border-bottom: 1px solid rgba(255,255,255,.18);
                           margin-bottom: -64px;
                           transition: background .3s, box-shadow .3s, border-color .3s; }

   它是為了首頁 hero 上的透明導覽列寫的，但選擇器只寫 `nav` —— 章節導覽也是一個 <nav>，
   一起被吃到。而它的專一性 (0,1,2) 高過上面的 `.gmba-index` (0,1,0)，
   所以 layout.css 就算載入順序在後也蓋不過，被蓋掉三件事：
     ① background 變透明 → 內文直接從導覽條底下透出來（Amy 看到的畫面）
     ② border-bottom 變成白色半透明 → 下緣那條線看不見
     ③ transition 被換成 background/box-shadow → **滑入淡出的動畫整個失效**
   （margin-bottom:-64px 對 position:fixed 沒有視覺影響，但一併歸零比較乾淨。）

   ⚠ 修法是把選擇器補到同一個專一性 (0,1,2)，不是灑 !important ——
     同專一性時 layout.css 載入順序在後就蓋得過，跟第 6 節導覽列用的是同一招。
   ⚠ 不可以只寫 `.gmba-index`，那是 (0,1,0)，蓋不過去。
   ⚠ 只有首頁有 has-hero，所以 academics 的 .acad-index、admissions 的 .adm-index 沒這個問題。 */
body nav.gmba-index{
  background: var(--white, #FFF);
  border-top: 1px solid var(--rule, #DDD8D0);
  border-bottom: 1px solid var(--rule, #DDD8D0);
  box-shadow: none;
  margin-bottom: 0;
  transition: transform .28s ease, opacity .28s ease;
}
@media (max-width: 960px){
  /* 手機上頁面那條會把 nav 塗成 maroon（body.has-hero nav{background:var(--maroon)}），
     章節導覽不可以跟著變紅，它的字是灰的。 */
  body nav.gmba-index{ background: var(--white, #FFF); }
}
@media (prefers-reduced-motion: reduce){ body nav.gmba-index{ transition: none; } }
.gmba-index-row{ display: flex; flex-wrap: wrap; gap: 1.9rem; padding: .85rem 0; }
.gmba-index a{
  white-space: nowrap; font-size: 13.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #8A8378; text-decoration: none;
  border-bottom: 2px solid transparent; padding-bottom: 3px;
  transition: color .2s, border-color .2s;
}
.gmba-index a:hover{ color: var(--ink); }
.gmba-index a.is-active{ color: var(--maroon); border-bottom-color: var(--maroon); }

@media (max-width: 900px){
  .gmba-index > .container{ overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .gmba-index-row{ gap: 1.2rem; flex-wrap: nowrap; width: max-content; }
}
@media (max-width: 640px){ .gmba-index a{ font-size: 13px; } }

/* ⭐ 有第二層導覽的頁面（首頁／課程／招生），錨點跳過去要多讓一條的高度，
   不然按了以後那一段的標題正好被橫條蓋住。
   ⚠ 只在 641px 以上套 —— 手機那幾條 scroll-margin 是頁面自己寫的，
     蓋掉會讓手機跳錯位置。 */
@media (min-width: 641px){
  html:has(.gmba-index) [id],
  html:has(.acad-index) [id],
  html:has(.adm-index)  [id]{ scroll-margin-top: 122px; }   /* 導覽列 56 ＋ 索引列 64 ＋ 2 餘裕，實測出來的 */
}

@media (prefers-reduced-motion: reduce){
  .gmba-rail, .gmba-bar, .gmba-rail__btn{ transition: none; }
}


/* ===========================================================================
   6. 導覽列：深度 ＋ 髮絲金線 ＋ hover／當前頁指示（設計提案 1g）
   ---------------------------------------------------------------------------
   為什麼寫在這裡，而不是各頁的 <style>：
   導覽列的 CSS 在 12 個頁面裡各有一份 copy，改一次要改 12 次，而且會漂移。
   layout.css 在每頁 </head> 之前才載入 → 順序在後，同專一性就蓋得過，
   所以下面一條 !important 都不需要。

   ⚠ 選擇器不可以只寫 nav —— 首頁的章節導覽 .gmba-index 也是一個 <nav>，
     會被一起改掉。所以一律綁 aria-label。
     （contact.html / save-my-seat.html 的是 <nav class="site-nav">，
       但 aria-label 相同，所以一樣吃得到，不用另外處理。）

   ⚠ 2026-09-07：本節原本只綁 nav[aria-label="Main navigation"]，
     而中文 6 頁的 <nav> 是 aria-label="主選單" —— 整節 14 條規則對中文版
     全部是啞的：沒有漸層、沒有下緣金線、沒有 hover 金底線、沒有當前頁指示、
     Apply 鈕也沒有金色漸層。中文版只剩一塊平塗的酒紅。
     改法：每一條都包成 :is(英文, 中文)。
     為什麼用 :is() 而不是逗號分隔成兩條、也不是改綁 body > nav[role]：
       :is() 取「引數中最高的專一性」，兩個引數都是 (0,1,1)，
       所以整條規則的專一性跟改之前一模一樣 —— 英文 8 頁的層疊行為
       完全不動，只是把中文 6 頁納進來。改綁 role 會多一級元素選擇器，
       專一性就變了，頁內 <style> 的覆寫關係要重算，風險大得多。
     以後再加語言版本：在每個 :is() 裡多加一個 aria-label 就好。
   ======================================================================== */

:is(nav[aria-label="Main navigation"],nav[aria-label="主選單"]){
  /* 平面的一塊紅 → 有厚度的一條。上緣 1px 內建高光是關鍵，
     沒有它只會看起來像「紅色換了一階」。 */
  background: linear-gradient(180deg, #A81E31 0%, var(--maroon, #9B1A2C) 52%, #8C1626 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 18px rgba(43,10,17,.28);
}

/* 底部髮絲金線，兩端淡出。nav 是 position:sticky ＝ 已定位元素，::after 直接貼底。
   這是全站唯一一處金色細節的呼應，也是整條的收邊。 */
:is(nav[aria-label="Main navigation"],nav[aria-label="主選單"])::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; pointer-events:none;
  background: linear-gradient(90deg,
    rgba(232,197,90,0) 0%, rgba(232,197,90,.75) 22%,
    rgba(232,197,90,.75) 78%, rgba(232,197,90,0) 100%);
  transition: opacity .3s ease;
}

/* 首頁 hero 上的透明態要維持原樣：漸層與金線都收掉，捲動後 .nav-solid 才回來。
   ⚠ 專一性要壓過上面兩條：body.has-hero nav[...] = 0,2,1 > nav[...] = 0,1,1。 */
body.has-hero :is(nav[aria-label="Main navigation"],nav[aria-label="主選單"]){ background: transparent; box-shadow: none; }
body.has-hero :is(nav[aria-label="Main navigation"],nav[aria-label="主選單"]):not(.nav-solid)::after{ opacity: 0; }
body.has-hero :is(nav[aria-label="Main navigation"],nav[aria-label="主選單"]).nav-solid{
  background: linear-gradient(180deg, #A81E31 0%, var(--maroon, #9B1A2C) 52%, #8C1626 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 18px rgba(43,10,17,.28);
}

/* hover / focus：2px 金色底線。
   ⚠ 用 inset box-shadow 而不是 border-bottom 或底線元素 ——
     box-shadow 不進 layout，不會 reflow，也不會把文字往上推 1px。 */
:is(nav[aria-label="Main navigation"],nav[aria-label="主選單"]) .nav-item > a{
  color: rgba(255,255,255,.86);
  transition: color .18s ease, box-shadow .22s ease;
}
:is(nav[aria-label="Main navigation"],nav[aria-label="主選單"]) .nav-item > a:hover,
:is(nav[aria-label="Main navigation"],nav[aria-label="主選單"]) .nav-item > a:focus-visible,
:is(nav[aria-label="Main navigation"],nav[aria-label="主選單"]) .nav-item:hover > a{
  color: #fff;
  box-shadow: inset 0 -2px 0 rgba(232,197,90,.85);
}

/* 當前頁：常駐白字 ＋ 金線。class 由 layout.js 加，見 layout.js 檔尾。
   為什麼要：四個項目本來長得一模一樣，使用者看不出自己在哪一頁。 */
:is(nav[aria-label="Main navigation"],nav[aria-label="主選單"]) .nav-item.is-current > a{
  color: #fff;
  /* 3px 純金：下方那條 1px 髮絲收邊也是金的，兩者疊在同一條邊上，
     厚度差不到一倍就會讀成「髮絲線忽然變胖」而不是「你在這一頁」。
     顏色寫死不走 --gold-lt：那個 token 各頁不一樣（多數頁 #D4AC52、
     contact/save-my-seat #D4A83A、student-voices 兩頁根本沒定義），
     指示要在 14 頁長得一樣，就不能跟著頁面的 token 跑。
     hover 維持 2px/.85 —— 滑過是暫時的，當前頁才是最強的那一個。 */
  box-shadow: inset 0 -3px 0 #E8C55A;
}

/* Apply 鈕：金色微漸層 ＋ 上緣高光，hover 抬 1px。 */
:is(nav[aria-label="Main navigation"],nav[aria-label="主選單"]) .nav-apply-desk{
  background: linear-gradient(180deg, #EFD076 0%, var(--gold-lt, #E8C55A) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 10px rgba(43,10,17,.3);
  transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
}
:is(nav[aria-label="Main navigation"],nav[aria-label="主選單"]) .nav-apply-desk:hover{
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 6px 16px rgba(43,10,17,.4);
}

/* 語言鈕：hover 邊框轉金，跟金線同一套語彙 */
:is(nav[aria-label="Main navigation"],nav[aria-label="主選單"]) .lang-btn{ transition: background .18s ease, border-color .18s ease; }
:is(nav[aria-label="Main navigation"],nav[aria-label="主選單"]) .lang-btn:hover{ border-color: rgba(232,197,90,.7); }

/* 手機：金線與陰影留著；hover 底線在觸控裝置沒有意義，抬升也不要 */
@media (max-width: 960px){
  :is(nav[aria-label="Main navigation"],nav[aria-label="主選單"]) .nav-apply-desk:hover{ transform: none; }
}
@media (prefers-reduced-motion: reduce){
  :is(nav[aria-label="Main navigation"],nav[aria-label="主選單"]) .nav-item > a,
  :is(nav[aria-label="Main navigation"],nav[aria-label="主選單"]) .nav-apply-desk{ transition: none; }
}

/* ===========================================================================
   7. 公告條 → 通知列（設計提案 1a）
   ⚠ 第一條是必要的，不是防禦性寫法：.announce 是 display:flex，
     flex 會蓋掉 hidden 屬性的 display:none，光加 hidden 不會消失。
   ======================================================================== */
.announce[hidden]{ display: none !important; }

/* .ann-item ＝ 公告條裡的那一則。公告條永遠只有一則（主任 2026-08-26 定案），
   包一層的理由是 data-until 要有地方掛，而且跟公告帶的通知卡走同一套機制
   （layout.js 的 收掉過期的_ 一段程式管兩個地方）。
   ⚠ 長相跟包之前完全一樣：唯一的子項目佔滿寬度，內部照樣置中。
   ⚠ [hidden] 那一條是必要的 —— .ann-item 是 display:flex，會蓋掉 hidden 屬性的 display:none。 */
.announce .ann-item{
  flex: 1 1 100%;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .9rem;
}
.announce .ann-item[hidden]{ display: none !important; }

/* 檔案連結做成外框標籤，跟純文字的公告內容分開，一眼看得出「這是可以下載的」 */
.announce .ann-file{
  color: var(--gold-lt, #E8C55A);
  font-size: 12.5px; font-weight: 800; text-decoration: none; white-space: nowrap;
  border: 1px solid rgba(232,197,90,.5); padding: .18rem .5rem;
  transition: background .16s ease, color .16s ease;
}
.announce .ann-file:hover{ background: var(--gold-lt, #E8C55A); color: #3E0710; }

@media (max-width: 640px){
  .announce{ font-size: 13px; gap: .6rem; }
  .announce .ann-file{ font-size: 12px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   內嵌「申請開放時通知我」表單（主任 2026-08-27）
   兩種長相共用同一份 DOM：
     data-mode="inline"  → 首頁招生時程卡片下方，原地長出來
     data-mode="overlay" → 其他地方，浮層在原頁展開
   ⚠ 色票一律用站上既有的變數；讀不到時的退色跟窄軌那一段同一套。
   ═══════════════════════════════════════════════════════════════════════ */
.gmba-notify__panel{
  box-sizing: border-box;
  background: var(--white, #fff);
  border: 1px solid var(--rule, #E4DFD5);
  padding: 1.6rem 1.8rem 1.5rem;
}
.gmba-notify[data-mode="inline"]{ margin-top: 1.4rem; }
.gmba-notify[data-mode="overlay"]{
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(26,24,21,.42);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
.gmba-notify[data-mode="overlay"] .gmba-notify__panel{
  width: 100%; max-width: 620px;
  box-shadow: 0 18px 50px rgba(26,24,21,.28);
}
/* 🔴 這一條一定要排在 [data-mode="overlay"] 後面，而且要 !important。
   2026-08-27 主任：「關閉鈕無效，點了畫面關不起來」。
   原因：程式是設 hidden，靠 [hidden] 的 display:none 收掉。可是
   `.gmba-notify[hidden]` 與 `.gmba-notify[data-mode="overlay"]` **權重一樣**
   （都是一個 class ＋ 一個屬性），後寫的贏 —— overlay 的 display:flex 蓋掉了它，
   於是 hidden 設了、畫面還在。
   ⚠ 這正是 !important 該用的場合：`[hidden]` 是「不要顯示」的最終宣告，
     任何 display 都不該贏過它。以後再加 .gmba-notify 的 display 規則也不會再壞。 */
.gmba-notify[hidden]{ display: none !important; }
/* 浮層打開時鎖住背景捲動 —— 不鎖的話手機上背景會跟著滑 */
.gmba-notify-open, .gmba-notify-open body{ overflow: hidden; }
/* 浮層開著時窄軌不吃滑鼠 —— 鎖背景捲動會讓捲軸消失、版面變寬，
   固定在右邊的窄軌跟著位移，mouseenter/mouseleave 就會連環觸發（小卡一直閃）。
   JS 那邊也擋了一次；這一條是保險，兩邊都失手才會再看到閃動。 */
.gmba-notify-open .gmba-rail{ pointer-events: none; }

.gmba-notify__head{
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--rule, #E4DFD5);
}
.gmba-notify__kicker{
  font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3, #6B655C);
}
.gmba-notify__close{
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3, #6B655C);
}
.gmba-notify__close:hover{ color: var(--maroon, #9B1A2C); }

.gmba-notify__grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.6rem; margin-top: 1.2rem;
}
.gmba-notify__field{ display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.gmba-notify__label{
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3, #6B655C);
}
.gmba-notify__field input,
.gmba-notify__field select{
  box-sizing: border-box; width: 100%;
  font: inherit; font-size: 15px; line-height: 1.4;
  padding: .6rem .7rem;
  border: 1px solid var(--rule, #E4DFD5);
  background: var(--white, #fff); color: var(--ink, #1A1815);
  border-radius: 0;
}
.gmba-notify__field input:focus,
.gmba-notify__field select:focus{
  outline: 2px solid var(--maroon, #9B1A2C); outline-offset: -1px;
}
.gmba-notify__err{
  margin: .9rem 0 0; font-size: 13px; font-weight: 700; line-height: 1.5;
  color: var(--maroon, #9B1A2C);
}
.gmba-notify__err[hidden]{ display: none; }
/* 管道選擇器（原本的「哪一個管道適合我？」對照表）。
   🔴 主任 2026-08-28：對照表已經可以點選，上面的下拉就拿掉了 ——
     這張表從「參考資料」變成「必填欄位」，所以：
   ⚠ 不再用 <details>：可收合的必填欄位是陷阱，收起來就等於不存在。
   ⚠ 每一列左邊那顆圓點是「可以點」的唯一線索，不要拿掉。 */
.gmba-notify__routes{ margin: 1.2rem 0 0; }
.gmba-notify__routes-h{
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  margin-bottom: .4rem;
}
.gmba-notify__routes-hint{ font-size: 11px; color: var(--ink-3, #6B655C); }
.gmba-notify__req{ color: var(--maroon, #9B1A2C); }
.gmba-notify__routes-box{
  border: 1px solid var(--rule, #E4DFD5); background: var(--paper, #FAF8F4);
}
/* 季節標籤：春季給金色（五個管道裡只有一個是春季，讓它跳出來），秋季給中性色。
   ⚠ 顏色只是輔助 —— 標籤上一定要有字，色盲、螢幕閱讀器、黑白列印都讀不到顏色。 */
.gmba-notify__season{
  display: inline-block; margin-left: .5rem; vertical-align: 1px;
  padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  background: #EDE9E1; color: #6B655C; border: 1px solid #E0DACE;
}
.gmba-notify__season.is-spring{
  background: var(--gold, #E8C55A); color: #4A3B10; border-color: #D9B448;
}
.gmba-notify__guide-list{ border-top: 1px solid var(--rule, #E4DFD5); }
.gmba-notify__guide-row{
  display: block; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--rule, #E4DFD5);
  padding: .55rem .9rem; cursor: pointer; font: inherit;
  border-left: 3px solid transparent;
}
.gmba-notify__guide-row:last-child{ border-bottom: 0; }
.gmba-notify__guide-row:hover{ background: #F0EBE1; }
.gmba-notify__guide-row.is-picked{
  border-left-color: var(--maroon, #9B1A2C); background: #F0EBE1;
}
.gmba-notify__guide-name{
  display: block; font-size: 12.5px; font-weight: 700; color: var(--ink, #1A1815);
}
.gmba-notify__guide-row.is-picked .gmba-notify__guide-name{ color: var(--maroon, #9B1A2C); }
.gmba-notify__guide-text{
  display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.6;
  color: var(--ink-3, #6B655C);
}
/* 圓點：一眼看得出這一列是可以選的。
   ⚠ 顏色只是輔助 —— 選到的那一列同時有圓點填滿、左邊粗線、底色、標題變紅，
     四種訊號疊在一起，任何一種讀不到都還看得出來。 */
.gmba-notify__guide-row.is-radio{
  display: grid; grid-template-columns: 18px 1fr; gap: .7rem; align-items: start;
  padding: .62rem .9rem;
}
.gmba-notify__dot{
  width: 15px; height: 15px; margin-top: 2px; border-radius: 50%;
  border: 1.5px solid #BDB6A8; background: #fff; position: relative;
}
.gmba-notify__guide-row.is-picked .gmba-notify__dot{ border-color: var(--maroon, #9B1A2C); }
.gmba-notify__guide-row.is-picked .gmba-notify__dot::after{
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--maroon, #9B1A2C);
}
.gmba-notify__guide-row:focus-visible{
  outline: 2px solid var(--maroon, #9B1A2C); outline-offset: -2px;
}
/* 學期：次要欄位，跟在管道後面，半欄就夠 */
.gmba-notify__after{ margin-top: 1.1rem; max-width: 270px; }

.gmba-notify__foot{
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.6rem;
  margin-top: 1.2rem;
}
.gmba-notify__note{
  margin: 0; font-size: 12px; line-height: 1.6; color: var(--ink-3, #6B655C); max-width: 42em;
}
.gmba-notify__submit{
  flex: none; cursor: pointer;
  background: var(--maroon, #9B1A2C); color: #fff; border: 0;
  padding: .85rem 1.6rem;
  font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.gmba-notify__submit:hover{ background: var(--maroon-hover, #7d1522); }
.gmba-notify__submit[disabled]{ opacity: .55; cursor: default; }

.gmba-notify__done{ display: flex; gap: 1.1rem; align-items: flex-start; margin-top: 1.3rem; }
.gmba-notify__done[hidden]{ display: none; }
.gmba-notify__tick{
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--maroon, #9B1A2C); color: var(--maroon, #9B1A2C);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.gmba-notify__donetext h4{
  margin: 0; font-size: 19px; font-weight: 800; line-height: 1.3; color: var(--ink, #1A1815);
}
.gmba-notify__doneline{ margin: .5rem 0 0; font-size: 15px; line-height: 1.65; color: var(--ink-2, #3B3730); }
.gmba-notify__from{ margin: .5rem 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-2, #3B3730); overflow-wrap: anywhere; }
.gmba-notify__fine{ margin: .7rem 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-3, #6B655C); }
.gmba-notify__again{ color: var(--maroon, #9B1A2C); font-weight: 700; }

@media (max-width: 760px){
  .gmba-notify__panel{ padding: 1.2rem 1.1rem 1.2rem; }
  .gmba-notify__grid{ grid-template-columns: 1fr; gap: .9rem; }
  .gmba-notify__after{ max-width: none; }
  /* 說明擠在按鈕旁邊會變成一條很窄的字柱 → 手機改上下 */
  .gmba-notify__foot{ flex-direction: column; align-items: stretch; gap: 1rem; }
  .gmba-notify__submit{ width: 100%; }
}

/* ── 內嵌表單浮層（Contact us／我要參加說明會）────────────────────
   表單本體是 contact.html / save-my-seat.html，用 iframe 放進來。
   行為在 layout.js 檔尾那一段。 */
.gmba-embed{
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(20,8,12,.62);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 5.5vh 1rem 4vh; overflow-y: auto;
}
.gmba-embed[hidden]{ display: none; }
.gmba-embed__panel{
  position: relative; width: 100%; max-width: 780px;
  background: #fff; box-shadow: 0 18px 60px rgba(20,8,12,.45);
}
/* 關閉鈕放在面板上緣外側，壓在深色背景上 —— 表單自己的紅色標題列不被遮到。 */
.gmba-embed__close{
  position: absolute; top: -2.3rem; right: 0;
  background: none; border: 0; color: #fff; cursor: pointer;
  font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  padding: .35rem .15rem;
}
.gmba-embed__close:hover{ color: var(--gold-lt, #E8C55A); }
.gmba-embed__frame{ display: block; width: 100%; height: 70vh; border: 0; }
/* 浮層開著時鎖住背景捲動 */
html.gmba-embed-open, html.gmba-embed-open body{ overflow: hidden; }
/* 浮層開著時把窄軌與底部條收掉 —— 它們的 z-index 雖然比較低，
   但半透明背景蓋不掉「還可以按」這件事，模態視窗底下不該有可點的東西。 */
html.gmba-embed-open .gmba-rail,
html.gmba-embed-open .gmba-bar{ display: none !important; }

@media (max-width: 640px){
  .gmba-embed{ padding: 0; }
  .gmba-embed__panel{ max-width: none; min-height: 100%; }
  /* 手機是整頁浮層：不要照回報的高度長，直接吃滿一個螢幕，讓表單自己捲，
     不然螢幕下方會留一條白的。inline style 有優先權，所以這裡要 !important。 */
  .gmba-embed__frame{ height: 100vh !important; height: 100dvh !important; }
  /* 手機沒有面板外的空間，關閉鈕改壓在表單自己的紅色標題列上（一樣是白字） */
  .gmba-embed__close{ top: .55rem; right: .7rem; }
}
@media (prefers-reduced-motion: reduce){
  .gmba-embed{ scroll-behavior: auto; }
}