/* ==========================================================================
   內政部老宅延壽補助暨北市整建維護補助資訊網 — 全站樣式
   放這個檔案的位置：wp-content/themes/astra-child/assets/theme.css
   由 functions.php 第 1 區段的 child_enqueue_styles() 載入。

   ★ 想改配色，只要改下面 :root 這一段，全站會一起變 ★

   設計說明：
   - 主視覺是用 CSS 砌出來的「二丁掛磁磚牆」，不需要任何圖檔就能顯示。
   - 字型刻意用系統內建（蘋方／微軟正黑），不載 Google Fonts：
     一來境外連線碰資通安全補充約定第七點（二）的境內原則，
     二來中文字型檔很大，長輩用的舊手機會等很久。
   ========================================================================== */

:root {
  /* ---- 顏色 ---- */
  --ink:        #16262B;   /* 主文字，帶點藍綠的深墨色，比純黑柔和 */
  --ink-soft:   #4A5F64;   /* 次要文字、說明文 */
  --ink-faint:  #7C8E92;   /* 日期、註記 */

  --jade:       #0E7C6B;   /* 主色。老公寓鐵窗與磁磚的那種台灣綠 */
  --jade-dark:  #0A5E51;   /* 深色底、hover */
  --jade-deep:  #073F37;   /* 磁磚牆最暗處 */
  --jade-tint:  #E4F1ED;   /* 淺色面板 */

  --mango:      #F5A524;   /* 行動色。只能當「底」，不能當文字顏色（對比不足） */
  --mango-dark: #D98A0B;
  --mango-tint: #FDF1DA;

  --paper:      #FBFAF7;   /* 全站底色 */
  --surface:    #FFFFFF;   /* 卡片底色 */
  --rule:       #DCE6E3;   /* 分隔線、外框 */

  /* ---- 尺寸 ---- */
  --wrap:       1240px;    /* 內容最大寬度 */
  --pad:        24px;      /* 左右留白 */
  --radius:     14px;
  --radius-sm:  8px;

  /* ---- 字型 ---- */
  --font: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei",
          "Segoe UI", system-ui, -apple-system, sans-serif;

  --shadow:    0 2px 4px rgba(22, 38, 43, 0.04), 0 8px 24px rgba(22, 38, 43, 0.07);
  --shadow-lg: 0 4px 8px rgba(22, 38, 43, 0.06), 0 18px 44px rgba(22, 38, 43, 0.12);
}

/* ==========================================================================
   基礎
   ========================================================================== */

body {
  background: var(--paper) !important;
  color: var(--ink);
  font-family: var(--font);
  /* 17px 是刻意的：主要讀者是長輩，內政部無障礙規範也建議放大 */
  font-size: 17px;
  line-height: 1.85;
  letter-spacing: 0.02em;
}

/* 讓 Footer 貼在畫面最下方，內容不夠長時不會留白，且不產生多餘捲軸 */
body {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}
/* 登入後上方有管理員工具列（32px），要從總高度扣掉，否則會多出捲軸 */
body.admin-bar {
  min-height: calc(100vh - 32px) !important;
}
#primary.content-area,
.my-front-page,
.my-single-post,
.my-page {
  flex: 1 0 auto !important;
  /* Astra 預設的上下 margin 會額外撐高頁面，改用 padding 避免超出視窗 */
  margin: 0 !important;
  box-sizing: border-box !important;
}
#primary.content-area {
  padding: 4em 0 !important;
}

.ac-wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* 小標籤（eyebrow）。中文沒有大小寫可以拉開層次，改用寬字距做出「標籤感」 */
.ac-eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--jade);
  margin: 0 0 14px;
}

/* 區塊標題：左邊一小塊磁磚，呼應主視覺 */
.ac-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 8px;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink);
  line-height: 1.4;
}
.ac-heading::before {
  content: "";
  flex-shrink: 0;
  width: 34px;
  height: 12px;
  border-radius: 2px;
  background: var(--jade);
  box-shadow: 0 14px 0 var(--mango);   /* 下面再一塊黃磚 */
  margin-bottom: 14px;
}
.ac-sub {
  margin: 0 0 34px 48px;
  color: var(--ink-soft);
  font-size: 16px;
}

.ac-section {
  padding: 72px 0;
}
.ac-section + .ac-section {
  padding-top: 0;
}

/* ---- 按鈕 ---- */
.ac-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 999px;
  border: 2px solid transparent;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease,
              border-color 0.16s ease, color 0.16s ease;
}
.ac-btn:hover {
  transform: translateY(-2px);
}
.ac-btn--go {
  /* 芒果黃只當底色，文字用深墨色，對比才夠 */
  background: var(--mango);
  color: var(--ink);
}
.ac-btn--go:hover {
  background: var(--mango-dark);
  color: var(--ink);
}
.ac-btn--line {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.ac-btn--line:hover {
  background: #fff;
  color: var(--jade-dark);
  border-color: #fff;
}
.ac-btn--jade {
  background: var(--jade);
  color: #fff;
}
.ac-btn--jade:hover {
  background: var(--jade-dark);
  color: #fff;
}

/* 鍵盤焦點：無障礙檢測會查，不要拿掉 */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--mango);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==========================================================================
   Header
   ========================================================================== */

.my-custom-header {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 999;
}

/* 桌機把 Header 鎖在畫面最上面（2026-08-28 使用者要求）。
   --------------------------------------------------------------------------
   ⚠️ 只在 901px 以上套用，手機不鎖 —— 900px 以下選單會攤平常駐顯示
      （見下面那段 max-width: 900px 的 media query），整個 Header 大約 150px 高，
      鎖住會吃掉小螢幕五分之一以上的畫面。使用者明確選了「電腦就好」。

   用 sticky 不用 fixed：fixed 會把 Header 抽離版面，底下每一頁都要補一段
   padding 才不會被蓋住；sticky 自己佔位，其他地方一行都不用改。 */
@media (min-width: 901px) {
  .my-custom-header {
    position: sticky;
    top: 0;
  }
  /* 登入時最上面那條後台工具列是固定的，不讓開會被它蓋住。
     這個寬度一定大於 782px，所以工具列高度固定就是 32px，不用再分段。 */
  body.admin-bar .my-custom-header {
    top: 32px;
  }
}
.my-header-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px var(--pad);
}
/* align-items 是 center：站名現在桌機手機都是兩行，磁磚符號垂直置中在兩行中間。 */
.my-logo a {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
/* 站名前面的小磁磚，跟主視覺同一套語言。
   2026-08-31 一度放大到 38px（站名變兩行後想讓它有份量），使用者看了實際畫面
   之後要求改回原本的 25px，所以尺寸維持 11 + 3 + 11。不要再自作主張放大。 */
.my-logo-mark {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(2, 11px);
  gap: 3px;
}
.my-logo-mark i {
  display: block;
  height: 11px;
  border-radius: 2px;
  background: var(--jade);
}
.my-logo-mark i:nth-child(3) {
  background: var(--mango);
}
/* 2026-08-31 站名從「臺北市老宅延壽服務團」(10 字) 換成
   「內政部老宅延壽補助暨北市整建維護補助資訊網」(21 字)，寬度翻了一倍多。
   這裡原本是 white-space: nowrap，長站名在窄視窗會直接把版面撐開
   —— 實測 369px 的視窗被撐到 454px，整站出現橫向捲軸。⚠️ 不要再把 nowrap 加回來。

   max-width 是用來逼桌機也折成兩行的（使用者要求桌機跟手機一樣兩行）。
   不設的話桌機量到 485px，1240px 的版面放得下，就會排成一行。
   300px 這個值只要落在「第二行放得下（254px）」到「整串放不下（485px）」
   之間都可以，取中間值留餘裕。

   text-wrap: balance 是**沒有** .my-logo-text--split 時的退路（站名裡沒有「暨」），
   讓兩行長度平均。有 split 的時候斷點已經由零寬空格決定，balance 不影響結果。 */
.my-logo-text {
  font-size: 21px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.1em;
  line-height: 1.2;
  max-width: 300px;
  text-wrap: balance;
}
/* 站名在「暨」後面被 header.php 插了零寬空格 U+200B。
   keep-all 讓中文不再能從任意字元間斷開，於是那個零寬空格變成唯一的斷點，
   桌機手機都固定折成「內政部老宅延壽補助暨 / 北市整建維護補助資訊網」。
   沒有這一段的話桌機會斷成「…補助暨北 / 市整建…」，把「北市」拆開。
   ⚠️ keep-all 只能配著零寬空格用，這個 class 也只有 header.php 判斷站名
      含「暨」時才會加上。單獨對長中文設 keep-all 會讓它變成一個不可斷的
      長字，直接把版面撐開。 */
.my-logo-text--split {
  word-break: keep-all;
}
.my-menu {
  list-style: none;
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  position: relative;
}
.my-menu li {
  position: relative;
}
.my-menu > li > a {
  display: block;
  padding: 10px 16px;
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.my-menu > li > a:hover,
.my-menu > li:hover > a {
  background: var(--jade-tint);
  color: var(--jade-dark);
}
.my-menu > li.current-menu-item > a,
.my-menu > li.current-page-ancestor > a,
.my-menu > li.current-menu-ancestor > a {   /* 2026-10-12：補助專區的文章是選單子項目，點進去時父項目也要亮 */
  background: var(--jade);
  color: #fff;
}

/* 下拉子選單 */
.my-menu ul.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  min-width: 190px;
  width: max-content;
  padding: 8px;
  list-style: none;
  z-index: 100;
}
.my-menu li:hover > ul.sub-menu {
  display: block;
}
/* 第三層往左展開，避免超出畫面 */
.my-menu .sub-menu .sub-menu {
  top: 6px;
  right: 100%;
  left: auto;
}
.my-menu ul.sub-menu li {
  padding: 0;
}
.my-menu ul.sub-menu a {
  display: block;
  padding: 9px 14px;
  border-radius: 6px;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
  font-size: 15.5px;
}
.my-menu ul.sub-menu a:hover {
  background: var(--jade-tint);
  color: var(--jade-dark);
}

@media (max-width: 900px) {
  .my-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 16px var(--pad);
  }
  /* 磁磚手機不另外縮放，跟桌機一樣 25px（2026-08-31 改回原本尺寸時一併拿掉
     那組 34px 的覆寫）。垂直置中由基礎規則的 align-items: center 處理。 */
  .my-logo-text {
    font-size: 17px;
    letter-spacing: 0.04em;
    line-height: 1.35;
  }
  .my-menu {
    flex-wrap: wrap;
    gap: 4px;
  }
  .my-menu > li > a {
    padding: 8px 12px;
    font-size: 15px;
  }
  /* 手機沒有滑鼠，不能靠 hover 展開子選單，藏起來的話子項目就永遠點不到。
     這裡把子選單直接攤平成一排小標籤，常駐顯示。 */
  .my-menu li {
    position: static;
  }
  .my-menu ul.sub-menu {
    display: flex;
    flex-wrap: wrap;
    position: static;
    width: auto;
    min-width: 0;
    gap: 4px;
    margin: 4px 0 4px 12px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .my-menu ul.sub-menu a {
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--jade-tint);
    color: var(--jade-dark);
    font-size: 14px;
  }
}

/* ==========================================================================
   首頁主視覺：二丁掛磁磚牆
   --------------------------------------------------------------------------
   老公寓外牆貼的就是這種細長磁磚，交丁排列（每一列錯開半塊）。
   載入時有幾塊會從舊磚色翻新成芒果黃 —— 這正是這個計畫在做的事。
   ========================================================================== */

.ac-hero {
  position: relative;
  overflow: hidden;
  background: var(--jade-deep);
  isolation: isolate;
}

.ac-wall {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* 磁磚之間的縫（填縫劑）是深色的，讓底色透出來當縫 */
  background: #05302A;
}
.ac-wall-row {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
  /* 靠右對齊：磁磚從畫面右緣往左鋪，多出來的往左邊溢出被裁掉。
     這樣不管螢幕多寬，右上角那片翻新過的黃磚都會在可視範圍內。 */
  justify-content: flex-end;
}
/* 交丁：偶數列往右推半塊，超出的部分由 .ac-wall 的 overflow 裁掉 */
.ac-wall-row:nth-child(even) {
  margin-right: -52px;
}
.ac-tile {
  position: relative;
  flex: 0 0 100px;
  height: 30px;
  border-radius: 2px;
  background: var(--jade-dark);
  /* 上緣一道亮邊、下緣一道暗邊，做出磁磚的釉面立體感 */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22);
}
/* 同一面牆的磁磚本來就有細微色差，燒製與日曬造成的 */
.ac-tile.t2 { background: #0C6B5C; }
.ac-tile.t3 { background: #0A5449; }
.ac-tile.t4 { background: #12856F; }

/* 「翻新」的磁磚
   ------------------------------------------------------------------
   新磁磚是疊在舊磁磚上面的一層 ::after，翻新／回復只是改這一層的
   透明度。刻意不直接動 background —— 透明度的動畫瀏覽器可以交給顯示卡，
   七十幾塊磁磚一起跑也不會讓頁面卡頓。 */
.ac-tile.is-new::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: var(--mango);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  opacity: 1;   /* 沒有動畫時（見下）就是這個狀態：整片翻新完成 */
}

/* 文字壓在牆上，加一層由左而下的深色罩，確保白字對比足夠 */
.ac-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 左半邊壓得夠暗，白字對比才夠（實測 7:1 以上）；
     右半邊要讓開，翻新的黃磚才不會被蓋成濁濁的土色。 */
  /* 翻新區加大之後，黃磚會延伸到標題文字的後面，所以遮罩改成
     「文字結束前維持夠暗、之後急速讓開」：
       0～38%  白字區，壓到 0.94 以上（白字對比 7:1 以上）
       55%     文字最右緣（1240 版面置中時大約就在這裡），還有 0.62，
               白字壓在黃磚上實測仍有 6.2:1，AA 過關
       之後     快速降到 0.05，右邊的黃磚保持原本的鮮豔度 */
  background:
    linear-gradient(100deg,
      rgba(7, 63, 55, 0.97) 0%,
      rgba(7, 63, 55, 0.94) 38%,
      rgba(7, 63, 55, 0.62) 55%,
      rgba(7, 63, 55, 0.25) 75%,
      rgba(7, 63, 55, 0.05) 100%),
    linear-gradient(to top, rgba(7, 63, 55, 0.5) 0%, rgba(7, 63, 55, 0) 45%);
  pointer-events: none;
}

.ac-hero-body {
  position: relative;
  z-index: 2;
  max-width: var(--wrap);
  margin: 0 auto;
  /* 下面只留 48px：圓點要貼在主視覺最下面（2026-10-21，原本 96px），
     多出來的距離挪去拉開按鈕和圓點，見 .ac-hero-dots */
  padding: 104px var(--pad) 48px;
}
.ac-hero-inner {
  max-width: 660px;
}
/* 2026-10-21：13px 太小，長輩看不清楚，放大到 15px。
   芒果黃壓在深綠遮罩上實測 5.8:1，一般字級 AA（4.5:1）過關。
   字距從 0.3em 收到 0.16em —— 字放大之後原本的字距會把一行拆得太散。 */
.ac-hero .ac-eyebrow {
  color: var(--mango);
  font-size: 15px;
  letter-spacing: 0.16em;
}
/* 主視覺文字輪播
   ------------------------------------------------------------------
   每一則都疊在同一個 grid 格子裡（grid-area: 1 / 1），所以容器高度會
   自動取最高的那一則 —— 切換時版面不會忽高忽低地跳。
   用 visibility 而不是只用 opacity，隱藏的那幾則裡的按鈕才不會被
   Tab 鍵聚焦到（看不見卻能被鍵盤選到是無障礙的常見缺失）。 */
.ac-hero-slides {
  display: grid;
}
/* 前一則先淡出，淡完了下一則才淡進來（不是同時交叉淡入淡出）。
   同時淡的話兩則文字會疊在一起變成鬼影 —— 中文筆畫多，疊起來特別糊。 */
/* 2026-10-21：每一則改成直排的 flex，按鈕用 margin-top: auto 推到最底下。
   原本按鈕直接接在標題後面，標題 2 行和 3 行的兩則切換時，按鈕會上下跳
   60～70px。現在小標、標題、按鈕、圓點的位置都固定，標題長短只影響
   「標題和按鈕之間空多少」。 */
.ac-hero-slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}
.ac-hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  /* 0.3 秒的延遲 = 等前一則淡完 */
  transition: opacity 0.32s ease 0.3s, visibility 0s linear 0s;
}

/* 第一則是 <h1>，其餘是 <p>（一頁只能有一個 h1），外觀要完全一樣
   ------------------------------------------------------------------
   2026-10-21 換行修正（原本會斷成「計／畫」「符／合」）：
     - 字級 clamp(34px, 6.2vw, 62px) → clamp(28px, 4vw, 48px)，字小一點就少斷幾行
       （原本照建議用 52px，但文字欄只有 660px，一行放不下 13 個字，
        第 2 則標語在桌機排成 4 行，整個主視覺被撐高 88px、第 1 則下面空一大塊。
        48px 一行放得下 13 個字，同一則變 3 行）
     - text-wrap: balance 讓每一行差不多長，不會剩一兩個字孤零零掉到下一行
     - .ac-nb 是 front-page.php 把「空格隔開的一小段」包起來的，不從中間拆開
   ⚠️ 最小字級 28px 改了的話，front-page.php 的 $ac_hero_title_html 那段
      「9 個字」要跟著重算（320px 手機一行要放得下）。 */
/* ⚠️ font-family 一定要寫：Astra 的自訂設定把所有 h1～h6 設成
      'Montserrat', sans-serif，Montserrat 沒有中文字，中文會掉到「瀏覽器的
      預設字型」—— 一般 Chrome 是微軟正黑體，第 2 則以後是 <p> 卻吃全站的
      思源黑體，結果第 1 則和第 2 則標題字型不一樣（2026-10-21 才發現）。 */
.ac-hero .ac-hero-title {
  margin: 0 0 16px;
  font-family: var(--font);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.03em;
  color: #fff;
  text-wrap: balance;
}
.ac-hero-title .ac-nb {
  white-space: nowrap;
}
/* 沒有副標、標題下面直接接按鈕時，拉開一點距離：標題本身的 16px + 這裡 12px = 28px。
   ⚠️ 不能用 margin-top —— 按鈕的 margin-top 已經是 auto（見 .ac-hero-actions），
      而且 flex 裡上下的 margin 不會合併，寫 margin 會變成 16 + 28 = 44px。 */
.ac-hero-title + .ac-hero-actions {
  padding-top: 12px;
}

/* 切換用的數字圓點，放在主視覺最下面
   2026-10-21：32px → 40px。長輩用手指點，32px 太容易點歪點到隔壁那顆。
   2026-10-21：原本緊接在按鈕下面 30px，字、按鈕、圓點擠成一團。
               改成和按鈕隔 72px、主視覺下緣只留 48px，圓點自成一排在最底下。 */
.ac-hero-dots {
  display: flex;
  gap: 12px;
  margin-top: 72px;
}
.ac-hero-dot {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.ac-hero-dot:hover {
  border-color: #fff;
  color: #fff;
}
.ac-hero-dot.is-active {
  background: var(--mango);
  border-color: var(--mango);
  color: var(--ink);
}
/* 副標（後台的「說明文字」，沒填就不顯示）。2026-10-21 字放大一點；
   text-wrap: pretty 避免最後一行只剩一個字。 */
.ac-hero-lede {
  margin: 0 0 32px;
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.9);
  text-wrap: pretty;
}
.ac-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  /* 推到這一則的最底下，每一則的按鈕位置才會一樣（見 .ac-hero-slide） */
  margin-top: auto;
}

/* 翻新的節奏由 front-page.php 最下面那段程式控制，不是純 CSS 動畫。
   ------------------------------------------------------------------
   為什麼不用 CSS 的 infinite 迴圈：CSS 的 animation-delay 會把「整條
   時間軸」往後推，所以每塊磁磚連熄滅的時刻也跟著錯開。77 塊磁磚的
   時間差累積到 3.4 秒，比熄滅的空檔還長 —— 結果最早的磚已經重新亮起，
   最後的磚才正要熄滅，永遠不會有乾淨的「全部翻新完成」畫面，看起來
   就是一團一直在蠕動的亂流。

   改成由程式一塊一塊加上 .is-on，就跟第一版載入時的效果一模一樣；
   要重來時「全部一起」拿掉 .is-on，畫面乾淨地整片褪回舊磚，再重播。

   下面這幾行只管長相，不管時間點：
     沒有動畫時（減少動態偏好、或瀏覽器沒跑 JavaScript）→ 停在翻新完成
     有動畫時 → 先全部是舊磚，等程式一塊一塊打開 */
@media (prefers-reduced-motion: no-preference) {
  /* 沒有 .is-on 的狀態 = 舊磚。
     這一條的 0.9s 管的是「褪回去」的方向（整片一起褪，慢一點才不突兀）。 */
  .ac-tile.is-new::after {
    opacity: 0;
    transition: opacity 0.9s ease-out;
  }
  /* 有 .is-on 的狀態 = 翻新完成。
     這一條的 0.2s 管的是「亮起來」的方向。

     ⚠️ 2026-09-03：這個數字一定要小於 front-page.php 裡的 STEP（目前 220ms），
        不然下一塊已經開始亮了、上一塊還沒亮完，同時有好幾塊在淡入，
        畫面就變成一整片一起浮現，看不出是一塊接一塊。
        原本這裡沒有自己的 transition，會沿用上面那條 0.9s，正是這個問題。
        改這個數字時，front-page.php 的 FADE_IN 要一起改。 */
  .ac-tile.is-new.is-on::after {
    opacity: 1;
    transition: opacity 0.2s ease-out;
  }
}

@media (max-width: 700px) {
  .ac-hero-body {
    padding: 68px var(--pad) 32px;
  }
  .ac-hero-dots {
    margin-top: 56px;
  }
  /* 2026-10-21：手機上文字幾乎佔滿整個寬度，上面那條「左暗右亮」的遮罩
     會讓右半邊的字直接壓在黃磚上 —— 黃磚全亮之後實測白字只剩 2.2:1、
     芒果黃小標 1.9:1，都不及格。手機改成整片均勻壓暗，磁磚只留紋理，
     也就是「手機版背景不要干擾文字」。0.9 是芒果黃小標壓在黃磚上
     還能過 4.5:1 的最低值附近，不要再調淡。 */
  .ac-hero::after {
    background: rgba(7, 63, 55, 0.9);
  }
  .ac-hero-actions .ac-btn {
    width: 100%;
    justify-content: center;
  }
}

/* 平板寬度：文字欄最寬 660px，佔了畫面七到九成，上面那條遮罩在 55% 之後
   就開始變淡，長標題的後半段會壓在黃磚上（2026-10-21 實測 768～900px
   白字只剩 2.9:1）。這個寬度把暗的範圍往右延伸到 72%，最右邊也保留 0.55。 */
@media (min-width: 701px) and (max-width: 1100px) {
  .ac-hero::after {
    background:
      linear-gradient(100deg,
        rgba(7, 63, 55, 0.96) 0%,
        rgba(7, 63, 55, 0.92) 72%,
        rgba(7, 63, 55, 0.55) 100%),
      linear-gradient(to top, rgba(7, 63, 55, 0.5) 0%, rgba(7, 63, 55, 0) 45%);
  }
}

/* ==========================================================================
   申請流程（這裡的編號是真的順序，不是裝飾）
   --------------------------------------------------------------------------
   ⚠️ 2026-09-03 起首頁已經沒有這一區了（front-page.php 第 4 區段整塊移除，
      之後要換成互動式的流程選擇）。下面這幾條規則目前沒有東西在用，
      先留著；新流程如果沿用「編號 + 標題 + 說明」的排法就不用重寫。
   ========================================================================== */

.ac-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 8px;
}
.ac-step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 28px 24px 26px;
}
/* 步驟之間的箭頭，指出這是有先後的流程 */
.ac-step::after {
  content: "";
  position: absolute;
  top: 50px;
  right: -14px;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--rule);
  border-right: 2px solid var(--rule);
  transform: rotate(45deg);
  z-index: 1;
}
.ac-step:last-child::after {
  display: none;
}
.ac-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--jade-tint);
  color: var(--jade-dark);
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 16px;
}
.ac-step:first-child .ac-step-no {
  background: var(--mango);
  color: var(--ink);
}
.ac-step h3 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.ac-step p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink-soft);
}

@media (max-width: 980px) {
  .ac-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .ac-step:nth-child(2)::after {
    display: none;
  }
}
@media (max-width: 560px) {
  .ac-steps {
    grid-template-columns: 1fr;
  }
  .ac-step::after {
    display: none;
  }
}

/* ==========================================================================
   申請流程「七步走」（2026-09-08 新增，同日改成直接放一張流程圖）
   --------------------------------------------------------------------------
   本來這一段有一整套手刻卡片的樣式（.ac-flow7-card / .ac-flow7-no /
   .ac-flow7-lab …），2026-09-08 改成直接輸出 assets/img/pagestep-web.jpg
   之後就用不到了，整段拿掉。要改回卡片版的話，完整樣式在
   Local Sites/test/astra-child-backups-20260908/theme.css.bak-20260908-卡片版。

   #F4FAF8 / #E2EFEA 這兩個底色是配合圖上的淺綠，跟全站 :root 的變數無關。
   ========================================================================== */

.ac-section.ac-flow7 {
  background: #F4FAF8;
  padding: 52px 0 60px;      /* 要壓過 .ac-section + .ac-section 的 padding-top: 0 */
}

.ac-flow7-figure {
  margin: 0;
}

/* 圖本身。窄畫面時七個步驟擠在一起字會小到看不清楚，所以在手機上
   讓它保持最小寬度、改成左右滑動看，而不是整張縮到糊掉。 */
.ac-flow7-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
}
.ac-flow7-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 2px 4px rgba(22, 38, 43, 0.05), 0 10px 28px rgba(22, 38, 43, 0.08);
}

/* 「可左右滑動」的提示，只有真的需要滑的時候才出現 */
.ac-flow7-hint {
  display: none;
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--ink-faint);
}

.ac-flow7-note {
  margin: 26px 0 0;
  padding-top: 14px;
  border-top: 1px dashed #C9DCD6;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-faint);
}

@media (max-width: 860px) {
  .ac-flow7-img {
    width: 820px;            /* 低於這個寬度，圖上的字就開始看不清楚了 */
    max-width: none;         /* 蓋掉主題預設的 img { max-width: 100% } */
  }
  .ac-flow7-hint {
    display: block;
  }
}

/* ==========================================================================
   補助項目（圖示化按鈕）
   ========================================================================== */

.ac-grants {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ac-grant {
  display: block;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 30px 26px 28px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
/* 卡片上緣一道磁磚色條，hover 時整條亮起來 */
.ac-grant::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--jade);
  transform: scaleX(0.16);
  transform-origin: left;
  transition: transform 0.28s ease, background 0.28s ease;
}
a.ac-grant:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
a.ac-grant:hover::before {
  transform: scaleX(1);
  background: var(--mango);
}
.ac-grant-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: var(--radius-sm);
  background: var(--jade-tint);
  color: var(--jade-dark);
  margin-bottom: 18px;
}
.ac-grant-icon svg {
  width: 34px;
  height: 34px;
}
a.ac-grant:hover .ac-grant-icon {
  background: var(--mango-tint);
  color: var(--mango-dark);
}
.ac-grant h3 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--ink);
}
.ac-grant p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink-soft);
}
.ac-grant-go {
  display: inline-block;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--jade);
  letter-spacing: 0.05em;
}
a.ac-grant:hover .ac-grant-go {
  color: var(--mango-dark);
}

@media (max-width: 960px) {
  .ac-grants {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .ac-grants {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   最新消息
   --------------------------------------------------------------------------
   2026-09-03：原本是「左消息／右相關連結」兩欄，相關連結那一欄拿掉之後，
   改成單獨一欄滿版。下面 .ac-links 的樣式暫時留著（目前沒有東西在用），
   之後若把相關連結放回首頁就不用重寫。
   ========================================================================== */

.ac-duo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px;
  align-items: start;
}
.ac-panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 30px 30px 26px;
}
.ac-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--jade);
}
.ac-panel-head h2 {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.ac-more {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--jade);
  text-decoration: none;
}
.ac-more:hover {
  color: var(--mango-dark);
  text-decoration: underline;
}

/* 右欄相關連結 */
.ac-links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ac-links li + li {
  border-top: 1px solid var(--rule);
}
.ac-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 4px;
  color: var(--ink);
  text-decoration: none;
  font-size: 16px;
  line-height: 1.65;
  transition: color 0.15s ease, padding 0.15s ease;
}
.ac-links a::after {
  content: "↗";
  flex-shrink: 0;
  color: var(--ink-faint);
  font-size: 14px;
}
.ac-links a:hover {
  color: var(--jade);
  padding-left: 10px;
}
.ac-links a:hover::after {
  color: var(--mango-dark);
}

@media (max-width: 1000px) {
  .ac-duo {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ==========================================================================
   主視覺用「首頁Banner」的圖片當底圖時（.ac-hero--banner）
   --------------------------------------------------------------------------
   把 render_home_banner() 原本那塊「置中、13:4、下面一排圓點」的版面，
   改成撐滿整個主視覺區、裁切填滿。標題與按鈕壓在上面。

   z-index 分層（都在 .ac-hero 這一層比較）：
     Banner 圖片   0（.mfp-banner 刻意不設 z-index，才不會自成一個堆疊環境，
                     讓底下的箭頭與圓點壓不過遮罩）
     深色遮罩      1（.ac-hero::after，pointer-events:none 不擋點擊）
     標題與按鈕    2
     左右箭頭      3（render_home_banner_styles() 原本就給了 3）
     圓點          4
   ========================================================================== */

.ac-hero--banner {
  /* 主視覺是 13:4 的圖，但標題壓在上面，太矮會擠，所以給一個最小高度 */
  min-height: 460px;
  display: flex;
  align-items: center;
}
.ac-hero--banner .mfp-banner {
  position: absolute;
  inset: 0;
  margin: 0;
}
.ac-hero--banner .mfp-stage,
.ac-hero--banner .mfp-slides,
.ac-hero--banner .mfp-slide,
.ac-hero--banner .mfp-slide a {
  height: 100%;
}
.ac-hero--banner .mfp-slides {
  /* 原本鎖 13:4，這裡改成跟著主視覺的高度走，用 cover 裁切填滿 */
  aspect-ratio: auto;
  background: var(--jade-deep);
}
.ac-hero--banner .mfp-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 左右箭頭：原本是貼齊邊緣的白色方塊，在主視覺上太搶眼，改成內縮的圓形半透明 */
.ac-hero--banner .mfp-nav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  transition: background 0.16s ease;
}
.ac-hero--banner .mfp-nav:hover {
  background: #fff;
}
.ac-hero--banner .mfp-prev { left: 20px; }
.ac-hero--banner .mfp-next { right: 20px; }

/* 圓點原本在圖片下方獨立一排，改成疊在圖片右下角 */
.ac-hero--banner .mfp-controls {
  position: absolute;
  right: 24px;
  bottom: 20px;
  z-index: 4;
  padding: 0;
}
.ac-hero--banner .ac-hero-body {
  width: 100%;
  padding-top: 80px;
  padding-bottom: 80px;
}

/* 編輯者才看得到的主視覺說明 */
.ac-hero-editnote {
  position: relative;
  z-index: 5;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad) 16px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65);
}
.ac-hero--banner .ac-hero-editnote {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

@media (max-width: 700px) {
  .ac-hero--banner {
    min-height: 380px;
  }
  .ac-hero--banner .mfp-controls {
    right: 16px;
    bottom: 14px;
  }
}

/* ==========================================================================
   聯絡我們大色塊（Footer 上方）
   --------------------------------------------------------------------------
   ⚠️ 2026-09-03 起首頁已經沒有這一塊了（front-page.php 第 5 區段整塊移除），
      所以下面這幾條規則目前沒有東西在用。樣式先留著，之後想把色塊放回來
      不用重寫；確定不會再用的話可以整段刪掉。
   ========================================================================== */

.ac-cta {
  background: var(--mango);
  border-radius: var(--radius);
  padding: 48px 52px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.ac-cta h2 {
  margin: 0 0 8px;
  font-size: clamp(23px, 3.4vw, 32px);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--ink);
  line-height: 1.4;
}
.ac-cta p {
  margin: 0;
  font-size: 16.5px;
  color: #5A4310;   /* 黃底上的深褐，對比足夠 */
}
.ac-cta-phone {
  display: block;
  margin-top: 4px;
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.ac-cta-phone:hover {
  color: var(--jade-dark);
}
/* 電話還沒填時，給編輯者看的佔位號碼 */
.ac-cta-phone.is-empty {
  color: rgba(22, 38, 43, 0.4);
  border: 2px dashed rgba(22, 38, 43, 0.3);
  border-radius: var(--radius-sm);
  padding: 10px 20px;
}
.ac-cta-phone.is-empty small {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #5A4310;
}

@media (max-width: 720px) {
  .ac-cta {
    padding: 34px 26px;
  }
}

/* ==========================================================================
   Footer
   --------------------------------------------------------------------------
   2026-08-28 改版：純文字兩塊（參考新北市都更處）。
   左邊站名、版權、聯絡地址電話；右邊相關連結。沒有任何圖檔。

   ⚠️ 指導單位、「本網站建議使用 Chrome…」、無障礙標章、更新日期、瀏覽人次、
      footer 的網站導覽，都是使用者要求拿掉的，不是漏掉。不要自己加回去。
   ========================================================================== */

.my-custom-footer {
  flex-shrink: 0;
  background: var(--jade-deep);
  color: rgba(255, 255, 255, 0.82);
  margin-top: 40px;
}

.ac-foot-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 48px var(--pad) 46px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px 64px;
}

/* ---- 左：站名、版權、聯絡資訊 ---- */

.ac-foot-info {
  flex: 1 1 480px;
  max-width: 660px;
}
/* 這裡原本有 .ac-foot-name（footer 左上那行 21px 的大字站名）。
   2026-08-31 使用者要求整行拿掉，改成諮詢資訊圖排在最上面。
   ⚠️ 是指名拿掉的，不是漏掉的 —— 站名 header 已經有，版權那行裡也還有一次。
   規則一併刪除，避免留一條沒人用的 CSS 讓人以為元素還在。 */
.ac-foot-copy {
  margin: 0 0 4px;
  font-size: 15.5px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.72);
}
.ac-foot-line {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.9);
}

/* 電話與傳真同一行時中間的距離。
   用空的 <span> 撐開而不是打全形空白 —— 報讀軟體不會把它唸成一個字。 */
.ac-foot-gap {
  display: inline-block;
  width: 26px;
}
.ac-foot-phone {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ac-foot-info a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(245, 165, 36, 0.5);
}
.ac-foot-info a:hover {
  color: var(--mango);
  border-bottom-color: var(--mango);
}

/* 都更處諮詢資訊（2026-09-03 由圖改成文字）。
   原本這裡是 .ac-foot-img，放 footer-contact.jpg 那張 598 × 238 的文字圖。
   使用者要求拿掉圖改放文字，所以整組規則換成下面這個文字區塊。

   左邊那條芒果色直線是刻意的：這塊是「另一個單位」的電話，跟下面版權、
   服務團自己的聯絡資訊混在一起會分不出來，用一條線把它圈成一組。 */
.ac-foot-org {
  margin: 0 0 20px;
  padding-left: 14px;
  border-left: 3px solid var(--mango);
}
.ac-foot-org-name {
  margin: 0 0 2px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}
.ac-foot-org .ac-foot-line {
  color: rgba(255, 255, 255, 0.86);
}
/* 地址那行字比較長，換行時不要把「【交通指南】↗」拆成兩半 */
.ac-foot-addr a {
  white-space: nowrap;
}

/* 窄螢幕：電話號碼跟分機不要硬擠在同一行。
   把中間那個空 span 改成 display:block（高度 0，不會多撐出一列空白），
   等於一個不用寫 <br> 的斷行。只作用在這一塊，不影響下面電話／傳真那行。 */
@media (max-width: 480px) {
  .ac-foot-org .ac-foot-gap {
    display: block;
    height: 0;
  }
}

/* ---- 右：相關連結 ---- */

.ac-foot-links {
  flex: 0 1 auto;
  min-width: 210px;
}
.ac-foot-h {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--mango);
}
.ac-foot-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ac-foot-links li {
  margin-bottom: 11px;
}
.ac-foot-links li:last-child {
  margin-bottom: 0;
}
.ac-foot-links a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 15.5px;
  line-height: 1.6;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}
.ac-foot-links a:hover {
  color: var(--mango);
}
/* 另開新視窗的小箭頭。純裝飾，報讀軟體唸的是後面 screen-reader-text 那句。 */
.ac-foot-ext {
  font-size: 12px;
  opacity: 0.55;
}

/* 深底上的鍵盤聚焦框。政府網站無障礙檢測會查。 */
.my-custom-footer a:focus-visible {
  outline: 3px solid var(--mango);
  outline-offset: 3px;
  border-radius: 2px;
}

/* 「聯絡資訊還沒填」提示的外框。只有登入的編輯者會看到這一塊，
   訪客那邊 ac_contact_notice() 什麼都不輸出，連這個 div 都不會有。 */
.ac-foot-editor {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad) 40px;
}

/* 編輯者才看得到的設定提示框。
   2026-08-28 從 functions.php 的 news_list_assets() 搬過來 ——
   原本那段 <style> 只有在頁面用到 [news_list] 時才輸出，所以同一個提示框
   在 footer 出現時是沒有樣式的（深綠底上一團看不清楚的字）。搬到這裡才全站一致。 */
.nf-notice {
  padding: 15px 18px;
  background: var(--mango-tint, #FDF1DA);
  border: 1px solid #EBC77F;
  border-radius: var(--radius-sm);
  color: #6B4E00;
  font-size: 15px;
  line-height: 1.75;
}

@media (max-width: 860px) {
  .ac-foot-inner {
    flex-direction: column;
    gap: 30px;
    padding: 38px var(--pad) 34px;
  }
  .ac-foot-info {
    flex-basis: auto;
    max-width: none;
  }
}

/* 窄螢幕上電話與傳真擠不下同一行，讓它們各自成行 */
@media (max-width: 460px) {
  .ac-foot-gap {
    display: block;
    width: auto;
    height: 0;
  }
}

/* ==========================================================================
   內頁（page.php / single.php）
   ========================================================================== */

.ac-page-head {
  background: var(--jade-tint);
  border-bottom: 1px solid var(--rule);
  padding: 52px 0 46px;
  margin-bottom: 56px;
}
.ac-page-head h1 {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
  font-size: clamp(27px, 4.4vw, 40px);
  font-weight: 900;
  letter-spacing: 0.05em;
  color: var(--ink);
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   「政策介紹」頁的內容是舊的、寫死在頁面裡的排版（黑色編號方塊、黑色框線），
   跟新配色搭起來會半新半舊。這裡把那幾個黑色元件換成新色票。
   等內部給了新文案、頁面重寫之後，這一段就可以整段刪掉。
   -------------------------------------------------------------------------- */
.mp-content .pi-num {
  background: var(--jade);
}
.mp-content .pi-list {
  border-left-color: var(--jade);
  background: var(--jade-tint);
}
.mp-content .pi-goals li::before {
  border-color: var(--jade);
  color: var(--jade-dark);
}

/* ==========================================================================
   文章列表 [news_list] 的表格，套用上面的色票
   ========================================================================== */

.news-list-widget .nf-table {
  width: 100%;
  border-collapse: collapse;
}
.news-list-widget .nf-table thead th {
  background: var(--jade-tint);
  color: var(--jade-dark);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: left;
  /* 2026-09-03：整份列表的行距收緊，原本 13px 16px */
  padding: 10px 16px;
  border: none;
}
.news-list-widget .nf-table thead th:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.news-list-widget .nf-table thead th:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.news-list-widget .nf-table td {
  /* 2026-09-03：上下 16px → 9px，左右維持 16px，讓每一則靠近一點 */
  padding: 9px 16px;
  border-bottom: 1px solid var(--rule);
  font-size: 16.5px;
  vertical-align: top;
}
.news-list-widget .nf-table tbody tr:hover td {
  background: var(--paper);
}
.news-list-widget .nf-td-date {
  color: var(--ink-faint);
  font-size: 15px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.news-list-widget .nf-col-date {
  width: 8.5em;
}
.news-list-widget .nf-table td a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.5;   /* 2026-09-03：原本 1.7 */
}
.news-list-widget .nf-table td a:hover {
  color: var(--jade);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.news-list-widget .nf-empty {
  padding: 34px 0;
  text-align: center;
  color: var(--ink-faint);
}

@media (max-width: 600px) {
  .news-list-widget .nf-table thead th,
  .news-list-widget .nf-table td {
    padding: 8px 10px;   /* 2026-09-03：原本 11px 10px */
  }
  .news-list-widget .nf-col-date {
    width: 6.5em;
  }
}

/* ==========================================================================
   內頁內文（page.php 與 page-about.php 共用）
   --------------------------------------------------------------------------
   2026-08-28：原本這一段寫在 page.php 檔案裡的 <style>，但「計畫簡介」多了
   一個 page-about.php 樣板，兩邊要長一樣，所以搬過來這裡共用。
   ========================================================================== */

.my-page {
  padding-bottom: 80px;
}
.my-page .mp-content {
  font-size: 17px;
  line-height: 1.9;
  color: var(--ink);
}
.my-page .mp-content img {
  max-width: 100%;
  height: auto;
}
.my-page .mp-content h2 {
  margin: 44px 0 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--jade);
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.my-page .mp-content h3 {
  margin: 32px 0 14px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.my-page .mp-content a {
  color: var(--jade);
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   內文表格 .ac-table（2026-09-30，第一個用到的是「服務團隊介紹」的委辦案實績）
   表格是寫在後台頁面裡的「自訂 HTML」區塊，這裡只管長相。

   - 有合併儲存格（rowspan），所以每一格都畫框線，只畫底線的話看不出哪幾列
     屬於同一個合併格。
   - 左邊兩欄是 <th>，文字用 <br> 手動斷在語意處（臺北市／都市更新處），
     加上 nowrap 不讓瀏覽器自己亂斷。中文每個字之間都能斷行，不這樣做的話
     表格會把前兩欄擠到一欄一個字。
   - 外層 .ac-table-wrap 在太窄時可以左右捲動，只是保險；正常手機寬度用不到。
     它有 tabindex="0"，鍵盤使用者才捲得動，所以要有聚焦框。
   -------------------------------------------------------------------------- */
.my-page .mp-content .ac-table-wrap {
  overflow-x: auto;
  margin: 22px 0 8px;
}
.my-page .mp-content .ac-table-wrap:focus-visible {
  outline: 3px solid var(--mango-dark);
  outline-offset: 2px;
}
.my-page .mp-content .ac-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.7;
}
.my-page .mp-content .ac-table th,
.my-page .mp-content .ac-table td {
  padding: 10px 14px;
  border: 1px solid var(--rule);
  background: var(--surface);
  text-align: left;
  vertical-align: middle;
}
.my-page .mp-content .ac-table thead th {
  background: var(--jade-dark);
  border-color: var(--jade-dark);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.my-page .mp-content .ac-table tbody th {
  color: var(--jade-dark);
  font-weight: 700;
  white-space: nowrap;
}
.my-page .mp-content .ac-table tbody th[scope="rowgroup"] {
  background: var(--jade-tint);
}

/*
 * 手機改成上下堆疊：單位（深綠條）→ 類型（淺綠條）→ 底下一列列標案。
 * 三欄硬擠在 375px 裡，標案那欄只剩一行 7 個字，長輩很難讀。
 * 合併儲存格在原始碼裡本來就排在它那一組的第一列，所以全部改成 block
 * 之後，自然就變成「標題 → 底下的項目」，不用另外改 HTML。
 * 欄位標題列（單位／類型／標案名稱）在這個排法裡沒有意義，藏起來。
 */
@media (max-width: 600px) {
  .my-page .mp-content .ac-table,
  .my-page .mp-content .ac-table tbody,
  .my-page .mp-content .ac-table tr,
  .my-page .mp-content .ac-table th,
  .my-page .mp-content .ac-table td {
    display: block;
  }
  .my-page .mp-content .ac-table thead {
    display: none;
  }
  .my-page .mp-content .ac-table {
    font-size: 16px;
    line-height: 1.65;
  }
  .my-page .mp-content .ac-table tbody + tbody {
    margin-top: 16px;
  }
  .my-page .mp-content .ac-table th,
  .my-page .mp-content .ac-table td {
    padding: 9px 12px;
    border-top: none;
  }
  /* 手動斷行是給桌機窄欄用的，堆疊後一行放得下，拿掉 */
  .my-page .mp-content .ac-table tbody th br {
    display: none;
  }
  .my-page .mp-content .ac-table tbody th[scope="rowgroup"] {
    background: var(--jade-dark);
    border-color: var(--jade-dark);
    color: #fff;
  }
  .my-page .mp-content .ac-table tbody th[scope="row"] {
    background: var(--jade-tint);
  }
}

/* ==========================================================================
   計畫簡介的頁籤（只有 page-about.php 會用到）
   --------------------------------------------------------------------------
   標題帶變成左右兩欄：標題在左，頁籤靠右上。手機版擠不下就掉到標題下面。

   ⚠️ 藏起來的規則是 .ac-has-js 開頭的，那個 class 由 page-about.php 最上面
      一行 <script> 掛上去。沒有 JavaScript 的瀏覽器不會有這個 class，兩塊
      內容就會一起完整顯示 —— 這是故意的，不要改成預設就 display:none。
   ========================================================================== */

/* 這一頁的標題不吃 .ac-page-head h1 的置中寬度限制，寬度交給外面那層 */
.ac-page-head--tabs h1 {
  max-width: none;
  margin: 0;
  padding: 0;
}
.ac-page-head-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  flex-wrap: wrap;
}

.ac-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  /* 跟 h1 的視覺底線對齊，中文字有下緣空隙所以往下推一點 */
  padding-bottom: 4px;
}

.ac-tab {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid var(--jade);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--jade-dark);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease;
}
.ac-tab:hover {
  background: var(--surface);
}
.ac-tab.is-active {
  background: var(--jade);
  border-color: var(--jade);
  color: #fff;
}
.ac-tab.is-active:hover {
  background: var(--jade-dark);
}
/* 鍵盤聚焦要看得出來。政府網站無障礙檢測會查。 */
.ac-tab:focus-visible {
  outline: 3px solid var(--mango-dark);
  outline-offset: 2px;
}

/* 內容區塊本身不需要外框，聚焦框由瀏覽器捲動定位用，不畫實線 */
.ac-tabpanel:focus {
  outline: none;
}
.ac-tabpanel:focus-visible {
  outline: 3px solid var(--mango-dark);
  outline-offset: 6px;
  border-radius: var(--radius-sm);
}

/* 有 JavaScript 才藏。沒有的話上面兩塊都看得到。 */
.ac-has-js .ac-tabpanel[data-active="0"] {
  display: none;
}

/* 沒有 JavaScript 時兩塊會接在一起，中間補一條分隔線才看得出來是兩段 */
.ac-tabpanel + .ac-tabpanel {
  margin-top: 56px;
  padding-top: 56px;
  border-top: 1px solid var(--rule);
}
.ac-has-js .ac-tabpanel + .ac-tabpanel {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* 編輯者才看得到的「這個頁籤還沒有內容」提示，跟 ac_contact_notice() 同一套長相 */
.ac-tab-empty {
  padding: 16px 20px;
  border: 1px dashed var(--mango-dark);
  border-radius: var(--radius-sm);
  background: var(--mango-tint);
  color: var(--ink-soft);
  font-size: 16px;
}

@media (max-width: 640px) {
  .ac-page-head-inner {
    align-items: flex-start;
    flex-direction: column;
  }
  .ac-tabs {
    padding-bottom: 0;
  }
  .ac-tab {
    padding: 10px 16px;
    font-size: 15px;
  }
}

/* ==========================================================================
   常見問答（只有 page-faq.php 會用到）
   --------------------------------------------------------------------------
   2026-09-30 改版：問答改成在後台用「詳細資料」區塊編輯，所以這裡的選擇器
   對的是 WordPress 輸出的 .wp-block-details，不是自己寫的 class。
   一題輸出的樣子是：
       <details class="wp-block-details">
         <summary>問題</summary>
         <p>答案…</p>  ← 答案的段落、條列直接排在 summary 後面，沒有外層容器
       </details>

   展開收合是 HTML 原生的 <details> / <summary>，沒有 JavaScript。
   這裡只做兩件事：把瀏覽器預設的小三角形換掉，以及把每一題排成卡片。

   ⚠️ summary 刻意維持瀏覽器預設的 display（list-item），加減號用絕對定位。
      不用 flex：編輯的人如果把問題裡幾個字設成粗體，flex 會把粗體那段
      拆成獨立的一欄，整行問題斷成好幾塊。也不要改成 display: block ——
      Safari 舊版在 summary 上用 block 會讓整題點不開。
   ========================================================================== */

.ac-faq .ac-wrap {
  padding-bottom: 24px;
}

/* 分組小標（後台的 H2 標題區塊）。第一個不需要那麼大的上邊距 */
.ac-faq-body > h2:first-child {
  margin-top: 0;
}

/* 一題 = 一張卡片 */
.ac-faq-body .wp-block-details {
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin: 0 0 12px;
  overflow: hidden;   /* 讓子元素的背景不會超出圓角 */
}
.ac-faq-body .wp-block-details[open] {
  border-color: var(--jade);
}
/* 卡片前面接著段落或標題時，拉開一點距離 */
.ac-faq-body > :not(.wp-block-details) + .wp-block-details {
  margin-top: 22px;
}

/* 問題列
   ------------------------------------------------------------------
   list-style: none 與 ::-webkit-details-marker 兩條都要留：
   前者是標準寫法，後者是 Safari 用的，少一條就會多一個小三角形。 */
.ac-faq-body .wp-block-details > summary {
  position: relative;
  padding: 18px 58px 18px 20px;   /* 右邊留給加減號 */
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--ink);
}
.ac-faq-body .wp-block-details > summary::-webkit-details-marker {
  display: none;
}
.ac-faq-body .wp-block-details > summary:hover {
  background: var(--jade-tint);
}
/* 鍵盤操作時的焦點框。滑鼠點的時候不會出現（:focus-visible） */
.ac-faq-body .wp-block-details > summary:focus-visible {
  outline: 3px solid var(--jade);
  outline-offset: -3px;
}
.ac-faq-body .wp-block-details[open] > summary {
  border-bottom: 1px dashed var(--rule);
}

/* 右邊的加減號。用兩條線疊出來，展開時直的那條拿掉，變成減號。 */
.ac-faq-body .wp-block-details > summary::after {
  content: "";
  position: absolute;
  top: 23px;          /* 18px 上邊距 + 5px，對齊第一行文字的中線 */
  right: 20px;
  width: 18px;
  height: 18px;
  background:
    linear-gradient(var(--jade), var(--jade)) center / 18px 3px no-repeat,
    linear-gradient(var(--jade), var(--jade)) center / 3px 18px no-repeat;
  border-radius: 1px;
}
.ac-faq-body .wp-block-details[open] > summary::after {
  background:
    linear-gradient(var(--jade), var(--jade)) center / 18px 3px no-repeat;
}

/* 答案：summary 後面的每一個區塊（段落、條列…）都是答案的一部分 */
.ac-faq-body .wp-block-details > :not(summary) {
  margin-left: 20px;
  margin-right: 20px;
  font-size: 16px;
}
.ac-faq-body .wp-block-details > summary + * {
  margin-top: 16px;
}
.ac-faq-body .wp-block-details > :not(summary):last-child {
  margin-bottom: 22px;
}
.ac-faq-body .wp-block-details > p {
  margin-bottom: 12px;
}
.ac-faq-body .wp-block-details > ul,
.ac-faq-body .wp-block-details > ol {
  margin-bottom: 16px;
  padding-left: 1.4em;
}
.ac-faq-body .wp-block-details li {
  margin-bottom: 6px;
}

/* 用 #錨點 的網址跳進來時（區塊的「進階 → HTML 錨點」有填才有），
   讓那一題閃一下比較好找 */
.ac-faq-body .wp-block-details:target {
  border-color: var(--mango-dark);
  box-shadow: 0 0 0 3px var(--mango-tint);
}

@media (max-width: 640px) {
  .ac-faq-body .wp-block-details > summary {
    padding: 16px 48px 16px 16px;
    font-size: 16px;
  }
  .ac-faq-body .wp-block-details > summary::after {
    top: 21px;
    right: 16px;
  }
  .ac-faq-body .wp-block-details > :not(summary) {
    margin-left: 16px;
    margin-right: 16px;
  }
  .ac-faq-body .wp-block-details > :not(summary):last-child {
    margin-bottom: 18px;
  }
}

/* ==========================================================================
   首頁影片（functions.php 第 11 區段的 ac_render_home_video()）
   --------------------------------------------------------------------------
   2026-09-30 新增。左影片、右介紹，各佔一半；860px 以下改成上下（文字在上）。

   ⚠️ 原始碼裡是「文字在前、影片在後」，左右是用 CSS 的 order 對調的。刻意不改
      原始碼順序：報讀軟體要先唸到標題「影片介紹」，才知道後面那顆播放鈕是什麼，
      手機上也是標題在上面比較好懂。

   影片框固定 16:9。封面圖、CSS 磁磚底、按了播放之後換上的 YouTube 播放器
   都是填滿同一個框，所以切換的時候版面不會跳。
   ========================================================================== */

.ac-video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

/* 介紹文字跟 .ac-sub 一樣往右縮 48px，對齊標題左邊那塊磁磚後面的字 */
.ac-video-desc {
  margin-left: 48px;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.85;
}
.ac-video-desc p {
  margin: 0 0 12px;
}
.ac-video-desc p:last-child {
  margin-bottom: 0;
}
.ac-video-yt {
  margin: 18px 0 0 48px;
  font-size: 16px;
  font-weight: 700;
}
.ac-video-yt a {
  color: var(--jade);
  text-underline-offset: 4px;
}
.ac-video-yt a:hover {
  color: var(--jade-dark);
}
.ac-video-notice {
  margin: 20px 0 0 48px;
}

/* ---- 影片框 ---- */
.ac-video-media {
  order: -1;   /* 桌機排到左邊，見上方說明 */
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--jade-deep);
  box-shadow: var(--shadow-lg);
}
.ac-video-play,
.ac-video-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/*
 * 沒放封面圖時的底：交丁排列的深綠二丁掛，縫是主視覺同一個填縫劑色。
 * 磁磚是一張 68 × 52 的小 SVG 重複鋪（兩列一組，第二列的直縫錯開半塊），
 * 寫在 data: 網址裡，不用另外傳圖檔，CSP 的 img-src 也有放行 data:。
 * 右上角那一抹黃，是呼應主視覺的「翻新區」。
 */
.ac-video-play {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #fff;
  text-decoration: none;
  background-color: var(--jade-dark);
  background-image:
    radial-gradient(ellipse at 85% 10%, rgba(245, 165, 36, 0.28), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='68' height='52'%3E%3Cpath d='M0 0H68M0 26H68M0 0V26M34 26V52' stroke='%2305302A' stroke-width='3' fill='none'/%3E%3C/svg%3E");
}

/* 有封面圖：圖鋪滿，上面疊一層淡淡的深綠，白字與按鈕才看得清楚 */
.ac-video-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.has-cover .ac-video-play::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(rgba(7, 63, 55, 0.1), rgba(7, 63, 55, 0.5));
}

/* 播放鈕：芒果黃圓形 + 深墨色三角形（黃底只能配深色，對比才夠） */
.ac-video-btn {
  position: relative;
  z-index: 2;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--mango);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  transition: transform 0.16s ease, background 0.16s ease;
}
.ac-video-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: 4px;   /* 三角形的視覺重心偏左，往右推一點看起來才置中 */
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 14px 0 14px 24px;
  border-color: transparent transparent transparent var(--ink);
}
.ac-video-label {
  position: relative;
  z-index: 2;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
a.ac-video-play:hover .ac-video-btn {
  transform: scale(1.08);
  background: var(--mango-dark);
}
/* 框有 overflow: hidden，焦點框要往內畫才不會被切掉 */
a.ac-video-play:focus-visible {
  outline: 4px solid var(--mango);
  outline-offset: -4px;
  border-radius: var(--radius);
}

@media (max-width: 860px) {
  .ac-video-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ac-video-media {
    order: 0;   /* 手機回到原始碼順序：標題與介紹在上、影片在下 */
  }
}
@media (max-width: 560px) {
  .ac-video-btn {
    width: 68px;
    height: 68px;
  }
  .ac-video-btn::after {
    margin-left: 3px;
    border-width: 12px 0 12px 20px;
  }
}

/* ==========================================================================
   下載專區（只有 page-building-renewal.php 會用到）
   --------------------------------------------------------------------------
   2026-10-06 改版：版面參照花蓮縣都市更新輔導團的下載專區，
   上面一排「分類篩選＋關鍵字搜尋」，下面每個分類一張表。
   內容在後台用「標題」＋「檔案」區塊編輯，這裡只管長相。

   - 手機（720px 以下）表格改成一個檔案一張卡片。
   ========================================================================== */

/* 篩選時用 hidden 藏列。手機版把 tr 改成 display: block，會蓋掉瀏覽器預設的
   hidden，所以這條要 !important */
.ac-dl [hidden] {
  display: none !important;
}

.ac-dl-intro {
  margin-bottom: 32px;
}
.ac-dl-intro > :first-child {
  margin-top: 0;
}

/* ---- 篩選列 ---- */
.ac-dl-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  padding: 20px 24px;
  margin: 0 0 14px;
  background: var(--jade-tint);
  border-radius: var(--radius-sm);
}
.ac-dl-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 280px;
}
.ac-dl-field--cat {
  flex: 0 1 300px;
}
.ac-dl-field label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--jade-dark);
}
/* 框線用 --ink-faint：表單欄位的外框對白底至少要 3:1（無障礙規範） */
.ac-dl-field select,
.ac-dl-field input {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: 8px 14px;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--ink-faint);
  border-radius: var(--radius-sm);
}

.ac-dl-status {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--ink-soft);
}
.ac-dl-none {
  padding: 34px 0;
  text-align: center;
  color: var(--ink-soft);
}

/* ---- 分類 ---- */
.ac-dl-sec {
  margin-top: 40px;
}
/* 長相跟內頁內文的 h2（.my-page .mp-content h2）一致 */
.ac-dl-cat {
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--jade);
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.ac-dl-extra {
  margin-top: 18px;
}

/* ---- 表格 ---- */
.ac-dl-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  border: none;
}
.ac-dl-table thead th {
  background: var(--jade-tint);
  color: var(--jade-dark);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: left;
  padding: 10px 16px;
  border: none;
  white-space: nowrap;
}
.ac-dl-table thead th:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.ac-dl-table thead th:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.ac-dl-table .ac-dl-col-fmt  { width: 7.5em; }
.ac-dl-table .ac-dl-col-date { width: 8.5em; }
.ac-dl-table .ac-dl-col-get  { width: 8em; }

.ac-dl-table tbody tr {
  background: var(--surface);
}
.ac-dl-table tbody tr:hover {
  background: #F3F8F6;
}
.ac-dl-table tbody th,
.ac-dl-table tbody td {
  padding: 12px 16px;
  border: none;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: middle;
}
.ac-dl-name {
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink);
}
.ac-dl-date {
  font-size: 15px;
  color: var(--ink-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 格式標籤。字色對淺底都在 5:1 以上 */
.ac-dl-fmt {
  display: inline-block;
  min-width: 3.4em;
  padding: 1px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.7;
  text-align: center;
  white-space: nowrap;
  color: var(--jade-dark);
  background: var(--jade-tint);
}
.ac-dl-fmt--pdf {
  color: #B3261E;
  background: #FCEDEC;
}
.ac-dl-fmt--word {
  color: #1F4E9A;
  background: #EAF0FA;
}

/* 下載按鈕。高度 44px，手指點得到（無障礙規範的觸控目標大小） */
.ac-dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--jade);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.16s ease;
}
.ac-dl-btn:hover,
.ac-dl-btn:focus {
  background: var(--jade-dark);
  color: #fff;
}
.ac-dl-btn svg {
  flex: 0 0 auto;
}

/* ---- 手機：一個檔案一張卡片 ---- */
@media (max-width: 720px) {
  .ac-dl-filters {
    padding: 16px;
  }
  .ac-dl-field,
  .ac-dl-field--cat {
    flex: 1 1 100%;
  }

  /* 表頭只對報讀軟體保留 */
  .ac-dl-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .ac-dl-table,
  .ac-dl-table tbody,
  .ac-dl-table tr {
    display: block;
  }
  .ac-dl-table tbody tr {
    margin: 0 0 12px;
    padding: 14px 16px 16px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
  }
  .ac-dl-table tbody th,
  .ac-dl-table tbody td {
    padding: 0;
    border: none;
  }
  .ac-dl-table tbody th {
    display: block;
    margin-bottom: 8px;
    font-size: 17px;
  }
  /* 格式和日期排在同一行 */
  .ac-dl-table tbody td.ac-dl-fmt-cell,
  .ac-dl-table tbody td.ac-dl-date {
    display: inline-block;
    margin-right: 12px;
  }
  .ac-dl-table tbody td.ac-dl-date::before {
    content: attr(data-label) "　";
  }
  .ac-dl-table tbody td.ac-dl-get {
    display: block;
    margin-top: 12px;
  }
  .ac-dl-btn {
    width: 100%;
  }
}