/* hero 總高 − sticky 高 = 影片 scrub 要捲動的距離（目前約 0.2 個螢幕高）。
   底色刻意用下一區的 #fefcf4：sticky 只有 88vh，首屏下緣會露出一截 hero 容器，
   同色才會讀成「下面還有內容」而不是一條黑色信箱邊 */
.autumn-hero {
  position: relative;
  height: 108vh;
  background: #fefcf4;

  /* 釘住的高度。.autumn-hero__sticky 跟 .autumn-hero__rice 都讀這個值，
     兩者必須一致，稻田底邊才會貼齊影片底邊 */
  --hero-h: 88vh;
  --hero-h: 88svh;

  /* 畫面放大倍率。手機是直立比例，cover 以高度為準 → 整個場景的高度全都看得到，
     上面那片空牆佔掉快一半。放大並以底邊為原點，就能把上緣裁掉。
     ⚠ 影片和 overlay 要套同一個值，標題才會跟著場景一起縮放、不會脫鉤 */
  --hero-zoom: 1;
}

/* 刻意不給滿一個螢幕高：下一區塊會露出一截，
   讓使用者一眼知道下面還有東西，不會把主視覺誤認成整頁結尾 */
.autumn-hero__sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: var(--hero-h);
  overflow: hidden;
  isolation: isolate;
  /* 讓 .autumn-hero__overlay 能用 cqw/cqh 直接換算影片畫面矩形 */
  container-type: size;
  background:
    radial-gradient(circle at 58% 42%, rgba(203, 116, 48, 0.25), transparent 34%),
    #28170d;
}

.autumn-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 高度變矮時從上緣裁掉（天花板），把貓與地板的主體構圖留住 */
  object-position: center bottom;
  transform-origin: center bottom;
  transform: scale(var(--hero-zoom));
  display: block;
  will-change: contents;
  background: #28170d;
}

.autumn-hero__fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  color: rgba(248, 240, 227, 0.72);
  font-size: 13px;
  transform: translate(-50%, -50%);
}

.autumn-hero__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(16, 10, 5, 0.26) 0%, transparent 28%, rgba(10, 6, 3, 0.2) 100%),
    linear-gradient(90deg, rgba(10, 6, 3, 0.18), transparent 36%, transparent 72%, rgba(10, 6, 3, 0.12));
}

/* overlay = 影片「實際畫面」的矩形，不是 sticky 的框。
   用 max(框寬, 框高×16/9) 複製 object-fit:cover 的放大邏輯，
   再靠 bottom:0 + 水平置中複製 object-position:center bottom。
   這樣裡面的標題可以直接用設計稿的場景比例定位，不用 max-height 那種補丁。
   ⚠ 不能用 @media (max-aspect-ratio) 判斷 —— 那是視窗比例，
      但 sticky 只有 88vh，框的比例跟視窗差一截，會對不準 */
.autumn-hero__overlay {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%; /* 舊瀏覽器沒有 cq 單位時的退路 */
  width: calc(max(100cqw, 100cqh * 16 / 9) * var(--hero-zoom));
  aspect-ratio: 16 / 9;
  z-index: 10;
  pointer-events: none;
}

/* 標題是「吊在貓的上緣」，不是從上面量下來。兩個約束同時要成立：
   ① 寬度 49.6%（量自設計稿「營銷1科/秋到/工作區域 2.jpg」，
      用正規化互相關比對 autumn-title.png，NCC 0.955）
   ② 底部不能碰到貓 —— 貓耳朵尖端在影片畫面高度的 70.5%（量自第一幀）

   所以用 bottom 定位、把底邊釘在畫面高度 65%，跟貓之間留一段呼吸空間。
   ⚠ bottom 跟 max-height 裡的係數是同一個數，改一個就要改另一個 ——
     max-height 算的是「框頂到標題底邊」的可用高度 = 框高 − 係數×畫面高。
   矮視窗（例：1366×640）這段空間塞不下 49.6% 的標題，max-height 會讓它
   自動縮小，而不是壓到貓或被切掉頂部。再留 2% 當上緣喘息空間。
   object-fit/position 讓 max-height 生效時照原比例縮、且繼續貼齊底邊 */
.autumn-hero__title {
  position: absolute;
  bottom: 35%;
  left: 50%;
  width: min(49.6%, 78vw);
  height: auto;
  max-height: calc(98cqh - 0.35 * max(100cqh, 100cqw * 9 / 16) * var(--hero-zoom));
  object-fit: contain;
  object-position: center bottom;
  transform: translate3d(-50%, var(--title-y, 0px), 0);
  transform-origin: center bottom;
  opacity: var(--title-opacity, 1);
  will-change: transform, opacity;
  /* 進場：淡入 + 往上 18px + 98%→100%，900ms */
  animation: autumn-title-in 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 起始的位移要連同 translate3d 的 -50% 一起寫 —— 只寫 translateY 的話
   會整個覆蓋掉水平置中，標題開場會從畫面左邊飛進來。
   --title-y 是 script.js 每幀寫進來的 scrub 位移（目前恆為 0），
   這裡沿用它，之後若改成會動的值，進場動畫也不會跟它打架 */
@keyframes autumn-title-in {
  from {
    opacity: 0;
    transform: translate3d(-50%, calc(var(--title-y, 0px) + 18px), 0) scale(0.98);
  }
  to {
    opacity: var(--title-opacity, 1);
    transform: translate3d(-50%, var(--title-y, 0px), 0) scale(1);
  }
}

@media (max-width: 1024px) {
  .autumn-hero {
    height: 104vh;
  }
}

@media (max-width: 767px) {
  /* 手機：可視 hero 維持 60%，外層多留 15% 的 scrub 距離讓視差正常播放 */
  .autumn-hero {
    height: 75vh;
    --hero-h: 60vh;
    --hero-h: 60svh;
    /* 從上方裁切約 20%，底部主體保持對齊 */
    --hero-zoom: 1.25;
  }
}

/* =====================================================================
   滾動視差稻田（Figma node 12608:54689）
   ---------------------------------------------------------------------
   座標全部從設計稿的父框換算：父框寬 2168 = 100vw，hero 影片佔 2168×1219。
   （2026-10-08 依更新後的 Figma 重抓，三層都比舊版矮）
     稻田3(遠) left 883  top 981   1285×721   → 40.73% / 59.27vw
     稻田2(中) left 0    top 1010  2168×864   → 100vw
     稻田1(近) left 0    top 1027  2168×1184  → 100vw
   影片下緣在 y=1219，稻田3 從 981 開始 → 往上疊住 hero 238px = 10.98vw。
   每層只給寬度、height:auto，高度就照原圖比例長出設計稿的值。
   ===================================================================== */
/* 跟 .autumn-hero__sticky 一樣釘在視窗頂、一樣高，底邊永遠對齊影片底邊。
   margin-top 把自己疊回影片上，所以不佔額外流高（hero 的 scrub 距離不變）。
   不能加 overflow:hidden —— 稻田要掛在這個框的下方延伸出去 */
.autumn-hero__rice {
  position: sticky;
  top: 0;
  height: var(--hero-h);
  margin-top: calc(-1 * var(--hero-h));
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  pointer-events: none;
}

/* 設計稿的稻田頂在影片底上方 10.98vw。往下收可以讓首屏的帶子變薄，
   但收太多（曾試過 3vw）稜線會來不及合攏，影片下緣就會露出墊底的平塗色。
   8vw 是兩者的折衷。高度同步補回差額，讓區塊「底部」維持原位 ——
   下面接房間照的 39.2vw 接點才不用跟著改。
   ⚠ 三層疊起來要到 15.5vw 才會整排不透明，所以 8vw 仍有一小段靠墊底色撐，
     墊底的顏色因此要跟田地上緣相融（見下方 ::after） */
.rice {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 8vw);
  height: 53.75vw;
}

/* 同色（漸層終點 #ce8424）墊底，補兩種縫：
   ① 近景視差往上掃時，稻田1 的下襬會離開區塊底部
   ② 稻田綁在「釘住框底部」、.autumn-hot 綁在「hero 流排底部」，
      兩者在 scrub 期間差一個 scrub 距離 —— 稻田矮的時候（手機）會來不及接上，
      所以往下多墊 22vh 蓋過這個差值
   top 要避開上緣那段要露出 hero 的範圍 */
.rice::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  /* 8vw = 稻田頂往下剛好是影片底邊。
     再往上就會蓋住要露出 hero 的那一條；再往下，稜線以上的透明區
     會掉到 hero 底部以下、後面沒東西擋，就會露出 body 的深色。
     ⚠ 這個值必須跟上面 .rice 的 top 位移量一致，改一個就要改另一個 */
  top: 8vw;
  bottom: -22vh;
  /* 上緣用 #ef9e56 跟田地上半的亮黃相融，往下收到 #d99a35 ——
     #d99a35 是 rice-1.png 最後一列不透明像素的顏色，兩邊同色，
     圖片結束的地方就不會出現橫線（單一平塗色則會在影片下緣露出色帶）*/
  background: linear-gradient(to bottom, #ef9e56 0, #ef9e56 4vw, #d99a35 16vw);
  z-index: 0;
}

.rice__layer {
  position: absolute;
  display: block;
  height: auto;
  z-index: 1;
  will-change: transform;
}

.rice__layer--far  { left: 40.73%; top: 0;      width: 59.27vw; }
.rice__layer--mid  { left: 0;      top: 1.34vw; width: 100vw; }
.rice__layer--near { left: 0;      top: 2.12vw; width: 100vw; }

/* rice-1.png（最近的一層）底下有一截是透明的：不透明內容只到圖高的 83.49%
   （4336×2368，alpha 到 y=1977 為止），最後一列的顏色是 #d99a35。
   把那截透明區補成同一個 #d99a35（兩個色標停在同一點 = 硬邊，不是漸變；
   上面維持透明，不然會把稜線以上該露出 hero 的地方蓋掉）。
   這樣做有兩個效果：
   ① 圖片結束的地方跟 .rice::after 的收尾色同色，看不出接縫
   ② 近景的實際覆蓋範圍往下延伸到整個框底 —— 手機版捲到底時，中景(rice-2)
      的下緣會掉到近景下面、露出 3px 的亮黃線，補滿之後正好被蓋住
   真正的「稻田到此為止」那一刀切在商品卡下方，見 .autumn-hot::before。 */
.rice__layer--near {
  background: linear-gradient(to bottom, transparent 0, transparent 83%, #d99a35 83%, #d99a35 100%);
}

/* =====================================================================
   下方版面 — 照 Figma node 12579:36606 量出的座標比例還原
   （Figma Dev Mode MCP 素材寫入權限目前卡住，賣家圖示／商品照先用
   佔位圖；拿到設計師 export 或 Figma 權限修好後，依 CLAUDE_HANDOFF.md
   的清單替換）
   ===================================================================== */

.section-head {
  max-width: 1200px;
  margin: 0 auto 32px;
  padding: 0 20px;
}

.section-head h2 {
  margin: 0;
  color: var(--paper-ink);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* 美術字標題（木牌圖）版本。
   寬度 = 商品卡那一排的滿寬：.section-head 跟 .autumn-hot .grid-layout 用的是
   同一組 max-width:1200 + padding:0 20，所以這裡給 100% 就會跟卡片左右切齊。
   height:auto 不可省 —— 不然 height 屬性會把圖鎖死變形 */
.section-head--art {
  text-align: center;
}

.section-head__art {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

/* ---- 熱銷新品（4 格） ----
   照設計稿 node 12608:54689：商品區是「疊在稻田上」的，不是接在後面。 */
.autumn-hot {
  position: relative;
  z-index: 1;
  /* Figma 原本是 6.5vw（商品區在影片底下方 141px），Randall 要求整區上移 → 收成 0。
     能上移多少由 .autumn-hot::before 決定：它的上緣不能蓋到稻田1 的「實際畫面」
     （= 框底再往上 16.51%），否則田的下襬會被平塗色切掉。
     還要再往上就得同步把 ::before 的 top 調大 */
  margin-top: 0;
  padding: 40px 0 56px;
  background: transparent;  /* 上段留透明，讓稻田1 的漸層透出來 */
}

/* 稻田的底色一路鋪到賣家底圖為止，中間不插任何咖啡色區塊。
   #d99a35 跟 .rice::after 的收尾色、跟 rice-1.png 最後一列同色，
   所以稻田圖結束的地方完全看不出來。
   top 只要避開稻田圖本身就好（圖會視差位移，42vw 是量出來的安全值）；
   bottom:0 貼齊本區底部 = 賣家底圖的上緣。
   z-index:-1 讓它留在本區自己的堆疊脈絡裡、壓在商品內容之下，但不會掉到稻田後面 */
.autumn-hot::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  /* 只要「不蓋到稻田1 的實際畫面」就好，往下挪沒有副作用 ——
     上面那段空檔由 .rice::after 接手，而它收尾也是 #d99a35，同色看不出來。
     從 39.2vw 放寬到 42vw 是為了把上移後的餘裕拉回舒服的範圍
     （桌機 22px→62px、手機 9px→20px）。
     ⚠ 上限：本區高度 - 這個值 必須仍 > --hot-pad-b，否則下面那一刀會算到框外 */
  top: 42vw;
  bottom: 0;
  /* 整片都是田地底色，下面不再接咖啡色區塊 —— 稻田直接鋪到賣家底圖為止 */
  background: #d99a35;
  z-index: -1;
}

/* 標題另外給米色面板 —— 設計稿的 Rectangle 1132，
   同時也讓深色標題文字不用落在橘底上（橘底對 11px 小字只有 3.0:1，不過 AA） */
.autumn-hot .section-head {
  background: #fefcf4;
  border-radius: 20px;
  padding: 28px 32px;
  margin-bottom: 24px;
}

/* 換成木牌美術字後不需要米色面板了：面板原本是為了讓深色小字不落在橘底上
   （橘底對 11px 字只有 3.0:1），現在字變成圖、自帶描邊與底板，
   再墊一層米色圓角反而像貼紙、也會把楓葉框起來 */
.autumn-hot .section-head--art {
  background: none;
  border-radius: 0;
  padding: 0 20px;
}

/* 照 Figma node 12630:81687 的版面：主欄內寬 1200、卡 290、欄距 13
   （4×290 + 3×13 = 1199）。max-width 多給 40 是為了左右各留 20 的安全邊，
   扣掉之後內寬剛好 1200。
   ⚠ 木牌標題用同一組數字，兩者才會左右切齊 */
.autumn-hot .section-head--art,
.autumn-hot .grid-layout {
  max-width: 1240px;
  padding: 0 20px;
}

.autumn-hot .section-head--art {
  margin: 0 auto 24px;
}

.autumn-hot .grid-layout {
  margin: 0 auto;
  gap: 13px;
}

/* ---- 房間底圖（賣家區 + 牆面區共用一張） ----
   兩區各掛一張的話，交界處會看到照片重新開始的斷點，所以包成同一個容器。
   滿版出血：跟 .kv-hero 同一招，跑出 1200px 主欄讓照片撐滿螢幕寬，
   內容還是維持置中。
   position/z-index 是必要的：稻田的墊底色塊在 sticky 裡（屬於定位元素），
   沒有這兩行的話它會蓋到這一區上面 */
.autumn-room {
  position: relative;
  z-index: 1;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #fefcf4;  /* 底圖萬一沒載到時的保底色，正常看不到 */
}

/* 捲動時底圖不跟著動：用 sticky 把照片釘在視窗上，內容從它上面滑過去。
   沒用 background-attachment:fixed —— iOS Safari 等於不支援，會默默退回跟著捲，
   而且 cover 的基準會變成視窗、在桌機又另外裁一次。
   margin-bottom:-100vh 把後面的內容拉回原位，照片才不會多佔一個螢幕的高度。
   ⚠ 這招要求容器高度 > 一個螢幕（目前 5 列賣家 + 牆面區遠超過）。 */
.autumn-room::before {
  content: '';
  display: block;
  position: sticky;
  top: 0;
  height: var(--bgh, 100vh);
  margin-bottom: calc(-1 * var(--bgh, 100vh));
  background: url('../../images/figma-room-bg.png') center / cover no-repeat;
}

/* lvh = 網址列收起來時的最大視窗高。用它才不會在手機捲動中途露出一條縫。
   高度與負 margin 必須同一個單位，不然兩者抵銷不掉會多出一段空白 */
@supports (height: 100lvh) {
  .autumn-room::before { --bgh: 100lvh; }
}

/* 稻田跟底圖的交界不要出現一條明顯的分割線：在照片最上面蓋一層
   田地底色 #d99a35 →透明的漸層，讓田地的顏色化進照片裡。
   ::after 是容器的最後一個子項、z-index:auto，所以它畫在釘住的 ::before 之上、
   又在 z-index:1 的內容之下 —— 木牌與賣家列不會被糊到 */
.autumn-room::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(90px, 11vw, 190px);
  background: linear-gradient(to bottom, #d99a35 0, rgba(217, 154, 53, 0.86) 22%, rgba(217, 154, 53, 0) 100%);
  pointer-events: none;
}

/* 內容疊在釘住的照片上面 */
.autumn-room > * {
  position: relative;
  z-index: 1;
}

/* ---- 精選賣家（5 列，每列：賣家卡 + 5 件商品） ---- */
.autumn-sellers {
  /* padding-top 歸零：留著的話，上一區的稻田與房間照之間會多一條
     16px 的米色，木牌正上方就是一道平塗色帶 */
  padding-top: 0;
  background: transparent;  /* 底圖由 .autumn-room 負責 */
}

/* 內容已經由 .autumn-room 做滿版出血，這層只剩單純的結構包裝 */
.autumn-sellers__bg {
  position: relative;
}

/* 木牌在照片上的留白：list 自己已經有 32px padding-top，
   這裡就不要再疊一次 margin-bottom，不然標題跟第一列會差到 64px */
.autumn-sellers__bg .section-head--art {
  padding-top: 32px;
  margin-bottom: 0;
}

.autumn-sellers__list {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 20px 100px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.seller-row {
  display: grid;
  grid-template-columns: minmax(140px, 19%) 1fr;
  gap: 16px;
  /* align-items 不寫 start（= 預設 stretch）：賣家卡要跟右邊商品卡等高。
     配合下面 __bg 的 absolute，row 高度由商品卡決定，賣家卡再撐滿它 */
  align-items: stretch;
}

.seller-row .grid-layout {
  gap: 17px;
}

/* 賣家卡：設計師 export 的整張成品卡（店 logo／店名／立即逛逛按鈕都已經印在圖上），
   HTML 這邊只留一個 <a> 包一張 img。卡片高度跟著圖片本身的比例走，不裁切。
   ⚠ 換店家＝換圖，文字改不了 —— 店名要改請回設計師重出 608×936 的 2x 圖 */
/* =====================================================================
   賣家卡（Figma node 12670:87419 / 87421 / 87434 / 87445 / 87456）
   ---------------------------------------------------------------------
   原本整張是一塊 608×936 的截圖，店名和「立即逛逛」都烤在圖裡 ——
   改成真元件：店鋪圖 + 店名文字 + 按鈕，字可被搜尋、可被螢幕閱讀器讀到。
   Figma 的卡是 152 寬（圖 152×152 圓角 12、內容區 112 = 73.68%），
   實測頁面上渲染到 160～220 寬，等於 1.0～1.22x，所以直接照 Figma 數值寫。

   ⚠ 高度由右邊的商品卡決定（.seller-row 是 stretch），賣家卡要能縮但不能長。
     所以店鋪圖是 flex: 0 1 auto ——
       grow 0：列比內容高時不要把方圖拉成長方形（給 1 會變 0.85:1，實測過）
       shrink 1 + min-height:0：列比內容矮時自己讓位，不會把整列撐高
     多出來的高度留在卡片下方，上緣跟右邊商品卡切齊。
   ===================================================================== */
.seller-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.seller-card__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  flex: 0 1 auto;
  min-height: 0;        /* 不給的話 flex 子元素不會縮到內容以下 */
  object-fit: cover;
  border-radius: 12px;
}

.seller-card__meta {
  flex: 0 0 auto;
  width: 73.68%;        /* Figma 112 / 152 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.seller-card__name {
  margin: 0;
  width: 100%;
  color: #000;
  font-size: 28px;
  line-height: 42px;
  font-weight: 700;
  text-align: center;
  word-break: break-word;
}

.seller-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  padding: 4px 16px;
  box-sizing: border-box;
  border-radius: 28px;
  background: #ff963b;
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  white-space: nowrap;
}

.seller-card__btn img {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}

.seller-card:hover .seller-card__btn { background: #f58420; }

/* 360 以下卡片只剩 136 寬、內容區 100px，28px 的四字店名會被擠成兩行。
   22px 時四字 88px，塞得進去。 */
@media (max-width: 360px) {
  .seller-card__name { font-size: 22px; line-height: 32px; }
  .seller-card__btn { padding: 4px 10px; font-size: 14px; }
}

/* ---- 動手還牆面 一片純白（標題橫幅 + 4 格） ----
   不給自己的底色 —— 直接吃 .autumn-room 那張釘住的房間照，
   跟上面的賣家區連成同一片背景 */
.autumn-wall {
  position: relative;
  z-index: 1;
  padding: 48px 0 64px;
  background: transparent;
}

/* 跟熱銷那區共用同一組主欄尺寸，標題與商品卡才會左右切齊 */
.autumn-wall .section-head--art,
.autumn-wall .grid-layout {
  max-width: 1240px;
  padding: 0 20px;
}

.autumn-wall .section-head--art {
  margin: 0 auto 24px;
}

.autumn-wall .grid-layout {
  margin: 0 auto;
  gap: 13px;
}

/* =====================================================================
   關鍵字區（Figma node 12637:53556「精選分類清單-文」）
   ---------------------------------------------------------------------
   設計 token（get_design_context 回傳值，非目測）：
     Earth Tone/Teak #B17F59   文字
     Grey/White      #FFFFFF   底色與預設外框
     CH Subtitle 16/Semibold   16px / 行高 24 / w600
     內距 12/24、圓角 28、項目間距 24
     hover 態：外框換成 #B17F59 + Shadow Level 1 Down
   ⚠ #B17F59 對白底是 3.49:1，16px 不算大型文字 → 不符 WCAG AA（需 4.5:1）。
     這是 Figma 指定色，先照實作；要修的話最接近的合格色約 #996B48。
   ===================================================================== */
.kw-list {
  max-width: 1240px;
  margin: 0 auto 24px;
  padding: 40px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  list-style: none;
}

.kw-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Figma 的 px-24/py-12 是「內描邊」模型，1px 外框不佔尺寸（176×48）。
     CSS 的 border 會往外加，所以內距各減 1px 才量得到一樣的 176×48 */
  padding: 11px 23px;
  border: 1px solid #fff;
  border-radius: 28px;
  background: #fff;
  color: #33343B;
  font-family: 'PingFang TC', 'Microsoft JhengHei', 'Heiti TC', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.kw-pill:hover,
.kw-pill:focus-visible {
  border-color: #b17f59;
  box-shadow: 0 0 1px rgba(13, 23, 102, 0.05), 0 2px 4px rgba(13, 23, 102, 0.1);
}

/* =====================================================================
   Figma 下方精選區（nodes 12637:53810 / 53752 / 53694 / 53636 / 56994）
   ===================================================================== */
.figma-curated-section {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0;
}

.figma-curated-stack {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: min(1200px, calc(100% - 40px));
  margin: 40px auto 0;
}

.figma-curated-stack > #section_tools-curated { order: 1; }
.figma-curated-stack > #section_lighting-curated { order: 2; }
.figma-curated-stack > #section_storage-curated { order: 3; }
.figma-curated-stack > #section_bedding-curated { order: 4; }

.figma-curated__inner,
.figma-shop-promos__inner {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
}

.figma-curated-stack .figma-curated__inner {
  width: 100%;
}

.figma-curated__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  margin-bottom: 16px;
}

.figma-curated__heading img {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.figma-curated__heading h2 {
  margin: 0;
  color: #fff;
  font-family: 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  font-size: 24px;
  line-height: 36px;
  font-weight: 600;
  white-space: nowrap;
}

.figma-curated__items {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
  overflow-x: auto;
  scrollbar-width: none;
}

.figma-curated__items::-webkit-scrollbar { display: none; }

/* 賣家卡：整張可點進賣場。
   ⚠ 這裡放的是品牌 LOGO 不是頭像 —— 實測 6 間的原圖是 1.5:1～5:1 的橫式
   （最寬的「極力 GIVE POWER」300×60）。圓形框是 1:1，所以：
     cover → 只剩中間一小段字（切太多）
     fill  → 縱向硬拉，5:1 那張會被拉 5 倍，字全爛
   只有 contain 能「完整、不變形」地放進圓裡，代價是上下留白。
   白底是必要的：有些 LOGO 是深色去背或深色底，壓在木地板上會糊掉。 */
.figma-curated__item {
  flex: 0 0 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: #33343b;
  font-family: 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

/* 設計師給的正式品牌 LOGO 24 張裡有 22 張是正方形（去背、四周自帶留白）。
   四邊都留 18px → contain 後是 114×114，在圓框裡夠飽滿。
   ⚠ 不要為了放大而收窄左右內距：正方形撐越大、四角越容易被圓形裁掉
     （114×114 的對角半徑 80.6 > 圓半徑 75，已經削到角，只是白底對白框看不出來）。
     真要完全不裁得收到 22px（邊長 106），但那樣整體又偏小了。 */
.figma-curated__item img {
  display: block;
  box-sizing: border-box;
  width: 150px;
  height: 150px;
  padding: 18px;
  border-radius: 50%;
  background: #fff;
  object-fit: contain;
}

/* 店名做成白底膠囊鈕：原本深灰字直接壓在木地板照片上，亮處幾乎讀不到
   （「BEST貝思特寢飾」「空間特工」那幾張最明顯）。白底給它一個穩定的閱讀底。
   視覺語言沿用頁面既有的 .kw-pill（白底 + 大圓角 + #33343B），不另創一套。
   ⚠ 左右內距只能 10px：item 被 flex:0 0 150px 鎖死，padding 吃掉的都是字的空間，
     再大店名會更早被 ellipsis 截掉 */
.figma-curated__item span {
  display: block;
  width: 150px;
  box-sizing: border-box;
  padding: 7px 10px;
  background: #fff;
  border-radius: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.figma-shop-promos {
  position: relative;
  z-index: 2;
  margin-top: 40px;
  padding: 30px 0;
}

.figma-shop-promos__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 46px;
  align-items: start;
}

.figma-shop-promos .grid-layout {
  margin: 0 auto;
  padding: 0;
  border-radius: 0;
  gap: 46px;
}

.figma-shop-promos .grid-item {
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.figma-shop-promos a {
  display: block;
  overflow: hidden;
  border-radius: 16px;
}

.figma-shop-promos img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .kw-list { gap: 10px; margin-bottom: 18px; }
  .kw-pill { padding: 9px 16px; font-size: 14px; line-height: 20px; }

  .figma-curated__inner,
  .figma-shop-promos__inner { width: calc(100% - 32px); }
  .figma-curated-stack {
    width: calc(100% - 32px);
  }
  .figma-curated__items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 16px;
    overflow: visible;
    padding: 0;
  }
  .figma-curated__item {
    min-width: 0;
    width: auto;
    gap: 12px;
    font-size: 14px;
    line-height: 22px;
  }
  .figma-curated__item img {
    width: 100px;
    height: 100px;
    padding: 12px;
  }
  .figma-curated__item span {
    width: 100%;
    padding: 6px 8px;
    border-radius: 20px;
  }
  .figma-curated__heading h2 { font-size: 20px; line-height: 30px; }
  /* 手機版：直式的兩格並排，玉山拍錢包換成 index_30m.png 的橫幅，獨佔整列。
     橫幅的圓角已經畫在 PNG 裡（量出來約 9px @370 顯示寬），
     再套 .figma-shop-promos a 的 16px 會把四角的實像素削掉，所以這裡歸零。 */
  .figma-shop-promos__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .figma-shop-promos .grid-layout { gap: 16px; }
  .figma-shop-promos .grid-item.is-wide { grid-column: 1 / -1; }
  .figma-shop-promos .grid-item.is-wide a { border-radius: 0; }
}

/* 照片式的標題橫幅（不像木牌是去背的），要自己切圓角 */
.section-head--photo .section-head__art {
  border-radius: 12px;
}

@media (max-width: 1024px) {
  .seller-row {
    grid-template-columns: minmax(120px, 160px) 1fr;
  }
}

@media (max-width: 767px) {
  /* 手機版標題圖滿版：把左右內距拿掉就好 —— 三個區塊的外框本來就已經是
     整個螢幕寬（.autumn-hot 是一般區塊、另外兩個在 .autumn-room 的 100vw 裡），
     所以不需要再做一次出血 */
  /* 選擇器要寫到跟各區塊自己那條一樣深（.autumn-hot .section-head--art 之類），
     不然會被它們的 padding:0 20px 蓋回去 */
  .section-head--art,
  .autumn-hot .section-head--art,
  .autumn-wall .section-head--art,
  .autumn-sellers__bg .section-head--art {
    padding-left: 0;
    padding-right: 0;
  }

  /* 手機第一屏要看得到木牌（實機上網址列還會再吃掉一截），所以整區往上拉：
     負 margin 14vw + 上內距 48→24，木牌約往上 79px。
     往上拉會讓底色更靠近稻田圖，所以 ::before 的 top 要同步加回去，
     不然田的下襬會被平塗色切掉 */
  .autumn-hot {
    margin-top: -14vw;
    padding: 24px 0 40px;
  }

  .autumn-hot::before {
    top: 58vw;   /* = 42 + 14（補回負 margin）+ 2（多留一點餘裕） */
  }

  .autumn-hot .grid-layout,
  .autumn-wall .grid-layout {
    gap: 10px;
  }

  .autumn-wall {
    padding: 32px 0 48px;
  }

  /* 手機版底部留白收掉：原本 .autumn-sellers 的 72 疊上 __list 的 100，
     再加牆面區的 32，最後一列賣家跟下一個標題之間空了 200 多 px。
     ⚠ 上緣一定是 0：留 8px 的話，稻田跟賣家底圖中間會夾出一條米色細線
       （實測手機版就是這 8px 在漏） */
  .autumn-sellers {
    padding: 0 0 16px;
  }

  .autumn-sellers__list {
    gap: 16px;
    padding: 24px 20px 16px;
  }

  /* 手機版：賣家卡不再當左邊的側欄，直接跟 5 張商品卡一起排進同一個 2 欄格線
     → 6 格剛好是 2×2×2，不會留下落單的一格。
     display:contents 讓商品卡那層 wrapper「消失」，它的子元素直接變成
     .seller-row 的格線項目 —— 不用為了手機改 HTML 結構 */
  .seller-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .seller-row .grid-layout {
    display: contents;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* 不做 scrub，高度直接等於釘住高（仍保留下一區露出） */
  .autumn-hero {
    height: var(--hero-h);
  }

  /* 使用者要求減少動態 → 主標直接就定位，不播進場動畫 */
  .autumn-hero__title {
    animation: none;
  }
}

/* =====================================================================
   側邊導覽（PC）
   ---------------------------------------------------------------------
   背景是設計師的木牌美術圖（images/sidemenu-board.png，550×1052，比例 1.9127）。
   標題「秋到就升級」已經畫在圖裡，下面 10 條板子對應 10 個錨點。
   量法：對不透明的米色板面做縱向剖面（排除透明區，不然白底會被誤判）。
   ⚠ 板距不等距（圖有透視，5.28% → 6.32% 由上往下漸寬），十個位置各自寫死。
   板面取十條的交集 32.36%~74.18%（寬 41.82%），中心 53.27%。
   ⚠ 這是 fixed 浮層，1600 視窗下會蓋到主欄右緣約 170px ——
      字級 26px 撐出來的尺寸，是 Randall 指定的取捨。
   ===================================================================== */
/* 導覽讓開的高度。scroll-margin-top、scrollspy 的門檻、以及「什麼時候顯示
   導覽」三者都讀這一個值 —— 之前它們各自寫死 72，換成 tab 列（120）時
   高亮會停在前一個區塊、而且點完選單會自己消失。 */
:root {
  --nav-offset: 72px;

  /* 木牌寬度跟著「主欄兩側的空檔」走，不是寫死 —— 這樣永遠不會蓋到商品卡。
     空檔 = (視窗寬 − 主欄 1240) / 2；再 +20 是因為主欄自己有 20px 內距，
     蓋到那 20px 不會碰到卡片本身。上限 350（26px 字需要的尺寸，見下方字級）。
     1920 → 350（滿版，字 26px）
     1800 → 300（字 22.3px）
     1600 → 200（字 14.9px）
     低於 1576 字會小於 14px，那時整個選單隱藏（見檔尾的 media query）
     ⚠ 放在 :root 是因為 .back-to-top 也要用它來對齊木牌正下方 */
  --board-w: min(350px, calc((100vw - 1240px) / 2 + 20px));
}

.autumn-sidemenu {
  --board-ratio: 1.9127;        /* 1052 / 550 */

  position: fixed;
  top: 50%;
  right: 0;
  z-index: 40;
  width: var(--board-w);
  height: calc(var(--board-w) * var(--board-ratio));
  background: url('../../images/sidemenu-board.png') center / contain no-repeat;

  /* 預設收起來：捲過 hero 之後 script.js 才加 is-visible */
  opacity: 0;
  visibility: hidden;
  transform: translate(12px, -50%);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
}

.autumn-sidemenu.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s;
}

.autumn-sidemenu__list {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 每一項壓在自己那條板子上 */
.autumn-sidemenu__item {
  position: absolute;
  left: 32.36%;
  width: 41.82%;
  transform: translateY(-50%);
}

/* 十條板子的實測中心（%），由上而下 */
.autumn-sidemenu__item:nth-child(1)  { top: 32.272%; }
.autumn-sidemenu__item:nth-child(2)  { top: 37.548%; }
.autumn-sidemenu__item:nth-child(3)  { top: 43.108%; }
.autumn-sidemenu__item:nth-child(4)  { top: 48.812%; }
.autumn-sidemenu__item:nth-child(5)  { top: 54.658%; }
.autumn-sidemenu__item:nth-child(6)  { top: 60.741%; }
.autumn-sidemenu__item:nth-child(7)  { top: 66.635%; }
.autumn-sidemenu__item:nth-child(8)  { top: 72.671%; }
.autumn-sidemenu__item:nth-child(9)  { top: 78.992%; }
.autumn-sidemenu__item:nth-child(10) { top: 85.029%; }

.autumn-sidemenu__link {
  display: block;
  color: #8a4b1e;
  /* 圓體，全部用系統內建、不下載 webfont。
     「圓體-繁」(Yuanti TC) 在 macOS 有真正的 Bold 字面，所以 700 不是合成粗體。
     ⚠ Windows 沒有內建中文圓體，會掉到微軟正黑體（非圓體）—— 這是不下載字型的代價 */
  font-family: 'Yuanti TC', '圓體-繁', '華康粗圓體', 'jf open 粉圓 2.1',
    'Hiragino Maru Gothic ProN', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  /* 字級綁在木牌寬度上（350px 時正好 26px），整組等比縮放，
     板面永遠裝得下最長的「秋到就升級」*/
  font-size: calc(var(--board-w) * 26 / 350);
  /* line-height 壓到 1 —— 再高就會超出板條 */
  line-height: 1;
  font-weight: 700;
  /* 置中是對齊「板面」不是整張圖：板面 32.36%~74.18%，中心 53.27%，
     比圖的正中間偏右（左邊有一整排藤蔓裝飾） */
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, transform 0.2s ease;
}

.autumn-sidemenu__link:hover,
.autumn-sidemenu__link:focus-visible {
  color: #e5531c;
  transform: scale(1.06);
}

/* scrollspy：目前所在的區塊 */
.autumn-sidemenu__link.is-current { color: #e5531c; }

/* 對應區塊還沒做出來的項目：變淡、不可點。
   區塊一加上同名 id，script.js 下次載入就會自動恢復 */
.autumn-sidemenu__link.is-pending {
  color: rgba(138, 75, 30, 0.38);
  pointer-events: none;
  cursor: default;
}

/* 錨點跳轉要讓開 60px 的固定 header。
   ⚠ 用屬性選擇器一次涵蓋所有 section_* ——「每新增一個區塊就補一行 id」
     太容易漏，實測漏掉時區塊會直接貼在視窗頂、被 header 蓋住。
     注意多數錨點是 <a name> 空元素，不是 <section> 本身，所以不能只選 section */
main [id^='section_'] { scroll-margin-top: var(--nav-offset); }

/* ---------------------------------------------------------------------
   低於 1576 時側邊放不下（木牌會縮到 188px 以下、字小於 14px，
   或是回頭去蓋商品卡），改成釘在 header 下方的橫向 tab 列。
   ⚠ 照 ruten-event-page 的慣例：導覽只有一份 HTML，靠 CSS 切換型態，
     不要另外再寫一組手機版的 nav。
   --------------------------------------------------------------------- */
@media (max-width: 1575px) {
  .autumn-sidemenu {
    top: var(--rt-header-h, 60px);
    right: 0;
    left: 0;
    width: auto;
    height: auto;
    background-image: none;      /* 木牌圖是直式的，橫向用不上 */
    background-color: #fefcf4;
    box-shadow: 0 2px 10px rgba(43, 33, 26, 0.18);

    /* ⚠ tab 模式一定要 transform:none。
       有 transform 的祖先會成為 position:fixed 子元素的定位基準 ——
       右下角那顆 ▲TOP▲ 會因此改以 tab 列為基準，跑到列上面去（實測過）。
       進場動畫改用 top 位移，效果一樣但不會建立 containing block。 */
    transform: none;
    top: calc(var(--rt-header-h, 60px) - 10px);
    transition: opacity 0.35s ease, top 0.35s ease, visibility 0s linear 0.35s;
  }

  .autumn-sidemenu.is-visible {
    transform: none;
    top: var(--rt-header-h, 60px);
    transition: opacity 0.35s ease, top 0.35s ease, visibility 0s;
  }

  /* 10 個項目在手機上要 890px，容器只有 320～390 —— 一定得左右滑。
     但捲軸是藏起來的（上面 scrollbar-width:none），不給提示的話使用者
     只看到前 3 個 pill，不會知道後面還有 7 個。
     所以兩側各做一段漸層淡出，暗示「這一邊還有東西」。
     --fade-l / --fade-r 由 script.js 依 scrollLeft 更新：
       捲到最左 → 左邊不淡出；捲到最右 → 右邊不淡出。
     預設值刻意是「左 0、右 28」—— JS 沒跑到時至少右邊還有提示。 */
  .autumn-sidemenu__list {
    position: static;
    display: flex;
    gap: 8px;
    padding: 9px 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    --fade-l: 0px;
    --fade-r: 28px;
    -webkit-mask-image: linear-gradient(to right,
      transparent 0, #000 var(--fade-l),
      #000 calc(100% - var(--fade-r)), transparent 100%);
    mask-image: linear-gradient(to right,
      transparent 0, #000 var(--fade-l),
      #000 calc(100% - var(--fade-r)), transparent 100%);
    transition: -webkit-mask-image 0.2s linear, mask-image 0.2s linear;

    /* proximity 不是 mandatory —— 使用者隨手滑一下不會被硬拉到下一顆，
       但放開手時會靠齊，不會停在把 pill 切一半的位置 */
    scroll-snap-type: x proximity;
    scroll-padding-left: 12px;
    scroll-behavior: smooth;
  }

  .autumn-sidemenu__list::-webkit-scrollbar { display: none; }

  .autumn-sidemenu__item { scroll-snap-align: start; }

  @media (prefers-reduced-motion: reduce) {
    .autumn-sidemenu__list {
      scroll-behavior: auto;
      transition: none;
    }
  }

  /* 直式模式是 absolute 壓在板子上，橫向要改回一般流排 */
  .autumn-sidemenu__item {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    flex: 0 0 auto;
    transform: none;
  }

  .autumn-sidemenu__link {
    padding: 8px 14px;
    border-radius: 999px;
    background: #f3e6cf;
    font-size: 15px;
    line-height: 1.3;
  }

  .autumn-sidemenu__link:hover,
  .autumn-sidemenu__link:focus-visible { transform: none; }

  .autumn-sidemenu__link.is-current {
    background: #e5531c;
    color: #fff;
  }

  .autumn-sidemenu__link.is-pending {
    background: rgba(243, 230, 207, 0.5);
  }

  :root { --nav-offset: 120px; }   /* 60 header + 48 tab + 12 呼吸 */
}

@media (max-width: 767px) {
  .autumn-sidemenu {
    top: calc(var(--rt-header-h-mb, 52px) - 10px);   /* 手機 header 矮 8px */
  }

  .autumn-sidemenu.is-visible { top: var(--rt-header-h-mb, 52px); }

  .autumn-sidemenu__list { padding: 7px 10px; gap: 6px; }
  .autumn-sidemenu__link { padding: 7px 12px; font-size: 14px; }

  :root { --nav-offset: 108px; }   /* 手機 header 52 + tab 44 + 12 */
}

@media (prefers-reduced-motion: reduce) {
  .autumn-sidemenu { transition: none; }
  .autumn-sidemenu__link { transition: none; }
}

/* =====================================================================
   回到頁首（露天共用元件 .back-to-top）
   ---------------------------------------------------------------------
   下面這段是 Randall 提供的原始樣式，照抄沒動。
   ⚠ 原版用 margin-left:1270px 定位 —— 那是「版面固定 1280 寬」年代的寫法，
     在 fixed 元素上等於「距視窗左緣 1270px」。1440 以下會貼在版面正中間、
     手機（390）更是直接飛到畫面外。所以下面補了一段改用 right 定位，
     原規則保留不動，方便日後跟官網共用檔比對。
   ===================================================================== */
.back-to-top {
  position: fixed;
  bottom: 210px;
  z-index: 1;
  margin-left: 1270px;
  padding: 1px 10px 13px;
  background: rgba(0, 0, 0, .3);
  font-family: verdana;
  line-height: 1;
  color: rgba(255, 255, 255, .7);
  text-align: center;
  cursor: pointer;
  border-radius: 3px;
  -webkit-transition: background .3s ease-in-out;
  transition: background .3s ease-in-out;
}

/* ---- 以下是這個頁面的補充，不屬於共用元件 ---- */

/* 改用 right 定位，各種螢幕寬都貼在右側，不再依賴 1270 這個絕對值。
   木牌在的時候（≥1576）要讓開：擺到木牌正下方、水平對齊木牌中心，
   不然 48px 的鈕會壓在板條上（實測 1800 時就會疊到）。 */
.back-to-top {
  margin-left: 0;
  right: calc((var(--board-w) - 48px) / 2);
  bottom: 24px;
  z-index: 41;              /* 要在側邊木牌（40）之上 */
}

.back-to-top-text { margin: 0; }

.back-to-top-text a {
  display: block;
  padding-top: 12px;
  color: inherit;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-decoration: none;
}

/* 原版沒有箭頭，用 ::before 補一個，跟 TOP 字疊成兩層 */
.back-to-top-text a::before {
  content: '▲';
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  line-height: 1;
}

.back-to-top:hover { background: rgba(0, 0, 0, .55); }

/* 捲過 hero 之後才出現，跟側邊導覽同步（script.js 加 class） */
.back-to-top {
  opacity: 0;
  visibility: hidden;
  transition: background .3s ease-in-out, opacity .3s ease, visibility 0s linear .3s;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transition: background .3s ease-in-out, opacity .3s ease, visibility 0s;
}

@media (max-width: 1575px) {
  /* 側邊木牌收起來後，右側空間變多，往內收一點免得貼邊 */
  .back-to-top { right: 14px; bottom: 120px; }
}

@media (max-width: 767px) {
  .back-to-top { right: 10px; bottom: 76px; padding: 1px 8px 10px; }
  .back-to-top-text a { font-size: 12px; padding-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: none; }
}

/* =====================================================================
   賣家列商品卡：關鍵字（.cat-tag）緊貼在商品圖下方
   ---------------------------------------------------------------------
   HTML 順序是 imgbox → cat-tag → pd-content，黑條直接接著圖、商品名在它下面。
   ⚠ 不要再加 margin-top:auto —— 那是上一版「黑條沉到卡片底」時用的，
     現在黑條在中間，加了會把它連同商品名一起推到卡片下緣。
   .pd-content 的上內距收掉，商品名才不會離黑條太遠。
   ===================================================================== */
.seller-row .pd-content {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* =====================================================================
   頁尾
   ---------------------------------------------------------------------
   body 的底色是 #17130f（深色，只是保底用），footer 直接躺在上面會變成
   一條黑帶。底色改成跟 .rt-header 同一個 #dead89，首尾才呼應得起來。
   ⚠ header 用的是白字（圖標為主），但頁尾是要讀的版權文字 ——
     白字對 #dead89 只有 2.01:1，不及格；改用深褐 #3a2a1a，6.79:1 過 AA。
   ===================================================================== */
#footer {
  position: relative;
  z-index: 2;
  padding: 24px 20px;
  background: var(--rt-theme-anchor-menu-background, #dead89);
  color: #3a2a1a;
  font-family: 'PingFang TC', 'Microsoft JhengHei', 'Heiti TC', sans-serif;
  font-size: 13px;
  line-height: 20px;
}

#footer .text-center {
  max-width: 1240px;
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 767px) {
  #footer { padding: 20px 16px; font-size: 12px; line-height: 18px; }
}