/* ==========================================
   CSS Variables — 深藍黑色系（仿 iyf.tv 爱壹帆風格）
   數值來源：連線量測 https://www.iyf.tv/ 的首頁／分類頁（/list/drama）／
   播放頁（/play/...）的 getComputedStyle() 與 getBoundingClientRect() 真實值，
   非截圖猜測。完整對照見 template/log/tp22_dark_black__量測對照表.md。

   ⚠️ 這些數值**不是**從 tp11／tp14 沿用的（那兩個主題的參考站是 fdzys.com／
   zhuiying8.cc，色票與尺寸都不同，見 CLAUDE.md §1.1「只能拿做法、不能拿數值」）。

   對照表（左邊是本主題的 token，右邊是 iyf.tv 上量到的元素）：
   --bg-base    ← body 的 rgb(9,11,33)
   --bg-card    ← .tag / .filters / .banner-cover 的 rgb(28,29,47)
   --accent     ← .nav-item.active 文字、.filter-button.active 底色 rgb(0,192,255)
   --accent-dot ← 側欄選中指示條 .nav-dot 的 rgb(70,184,255)
   --accent-ico ← 側欄選中態圖示 .nav-icon 的 rgb(126,220,255)
   --text-nav   ← 側欄待用項 .nav-item 的 rgb(189,200,220)
   --text-2     ← .tag / .action / .filter-button 的 rgba(255,255,255,.7)
   --text-3     ← 卡片 .tag-text.text-light 的 rgba(255,255,255,.4)
   --score-hi   ← .rate .value 的 rgb(238,157,3)
   --hot        ← .iconrenqi 的 #fe6f71
   ========================================== */
:root {
  --bg-base:       #090B21;
  --bg-deep:       #090B21;
  --bg-topbar:     #090B21;
  --bg-card:       #1C1D2F;
  --bg-elevated:   #1C1D2F;

  --accent:        #00C0FF;
  --accent-hover:  #33CFFF;
  --accent-dot:    #46B8FF;
  --accent-ico:    #7EDCFF;
  --accent-light:  rgba(0, 192, 255, 0.15);
  --accent-soft:   rgba(0, 192, 255, 0.20);

  /* 次要強調色沿用參考站自己的兩個功能色，不另外發明：
     評分用 #EE9D03（.rate .value）、熱度用 #FE6F71（人氣圖示）。 */
  --accent-2:      #EE9D03;
  --accent-2-alt:  #FE6F71;
  --hot:           #FE6F71;

  --text-1:        #FFFFFF;
  --text-2:        rgba(255, 255, 255, 0.70);
  --text-3:        rgba(255, 255, 255, 0.40);
  --text-nav:      #BDC8DC;
  --text-muted:    rgba(255, 255, 255, 0.40);
  --text-title:    #FFFFFF;

  --fill-1:        rgba(255, 255, 255, 0.08);
  --fill-2:        rgba(255, 255, 255, 0.14);

  --border:        rgba(255, 255, 255, 0.10);
  --border-2:      rgba(255, 255, 255, 0.20);

  --score-hi:      #EE9D03;
  --score-mid:     #00C0FF;

  /* 全站 header 固定置頂開關：fixed=開啟（預設）／static=關閉。
     參考站 .top-nav 實測就是 position:fixed（也是 §17.27 建議的做法）。 */
  --header-position: fixed;

  /* 版面骨架 — 全部取自 iyf.tv 實測值（視窗 1600×900）：
     側欄 .vertical-ctn 寬 200px（position:fixed，**透明底**直接壓在 body 上）；
     頂欄 .top-nav 高 62px、起始全透明（rgba(0,0,0,0)）、z-index 9998，
     捲動後由 JS 補 class 轉為實心；
     內容容器 .container 寬 1275px 置中，內容左緣 223px（＝側欄 200 + 23）。

     ⚠️ 跟 tp14 最大的骨架差異：tp14 的內容區是完全流動（只有 64px 左右留白），
     iyf.tv 是**固定 1275px 置中**。改版時不要憑直覺改回流動版面。

     ⚠️ 參考站的 header 在頁面頂端全透明，所以 body 沒有 padding-top ——
     每頁第一個區塊自己用 --hero-clear 讓開 header（滿版 hero 則直接壓在下面）。 */
  --topbar-h:      62px;
  --sidebar-w:     200px;
  --gutter:        23px;
  --hero-h:        615px;
  --hero-clear:    62px;

  --header-solid-at: 600px;

  --gap:           24px;

  /* 圓角規模 —— iyf.tv 非常克制，這是它跟 tp11／tp14（大量膠囊圓角）
     最明顯的視覺差異之一：
       圖片（海報、Hero 縮圖）  6px
       卡片 hover 覆蓋層        4px
       頂欄次導覽鈕             2px
       側欄導覽項／篩選鈕／標籤  0（方角）
     --radius-pill 保留是因為少數共用元件（登入 modal 的頭像等）仍需要圓形，
     但**不要**拿它去做膠囊按鈕——參考站沒有那種東西。 */
  --radius:        6px;
  --radius-sm:     4px;
  --radius-btn:    2px;
  --radius-lg:     6px;
  --radius-pill:   100px;
  --shadow-panel:  0 10px 40px 0 rgba(0, 0, 0, 0.6);

  --content-max:   1275px;

  /* 影片卡片 —— 海報比例實測 0.699（原圖 238×340），即 7:10，
     不是常見的 2:3。文字區高度 62px 固定（標題 16px + 標籤 14px）。 */
  --poster-ratio:  7 / 10;
  --card-meta-h:   62px;
}

/* ==========================================
  Base Reset
   ========================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background-color: var(--bg-base);
  color: var(--text-2);
  scroll-behavior: smooth;
  /* .mob-nav-drawer 用 translateX(100%) 推到畫面外藏起來，但 fixed+240px 寬度
     仍會被算進頁面可捲動範圍，窄螢幕下右側會多出一塊空白可捲動區域；鎖死橫向捲動避免此問題。

     ⚠️ 這裡刻意「不」補 overflow-y: visible。CLAUDE.md §17.26 原本記載那樣可以抵銷
     瀏覽器的自動升級，但已經實測證實無效：只要有一軸被鎖成非 visible，另一軸的
     **計算值**就一定是 auto，明確宣告 visible 一樣會被覆寫。寫了只會讓人以為
     問題已經處理掉。真正讓吸頂 header 不受影響的做法是 --header-position: fixed
     （fixed 相對 viewport 定位，完全不受祖先層捲動容器影響，見 §17.27），本主題用的就是它。 */
  overflow-x: hidden;
}

body {
  font-family: "PingFang SC", "Microsoft YaHei", 微软雅黑, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  /* ⚠️ 刻意不設 padding-top（對齊參考來源 iyf.tv：Hero 滿版 1585×615、top:0，
     頂欄與側欄都是透明浮在它上面，body 沒有讓開 header 的內距）。
     本主題的 header 在頁面頂端是全透明的、直接疊在內容上方，每一頁的第一個區塊
     自己用 padding-top: var(--hero-clear) 讓開它（見 .page-hero / .hero-container）。
     若這裡補上 padding-top，滿版 hero 的頂部就會被推出一條與 body 底色不同的空白帶。 */
  padding-top: 0;
}

a { text-decoration: none; color: inherit; }
img { display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }
ul { list-style: none; }

.mac-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  /* width/height 用 1em，是為了讓 font-size 能直接控制圖示大小（父層設多大、圖示就多大）。

     ⚠️ 不是為了「防止載入時跳動」——那是舊的 CDN web component 圖示方案才有的問題
     （CDN web component 升級前寬高是 0，見 CLAUDE.md §17.41）。本主題的圖示是
     html/public/icons.html 內嵌的 SVG sprite，<svg> 是瀏覽器原生元素、
     第一次繪製就有正確尺寸，不存在那個升級過程。 */
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex-shrink: 0;
}

/* 通用單行／兩行截斷 utility class：專案內多處 widget（hero_banner 手機卡片、
   vod_card 詳情面板等）都有引用這兩個 class 名稱，但先前一直沒有實際定義，
   截斷效果一直沒有生效——這裡補上正式定義，一次修正所有引用處。 */
.text-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.text-overflow-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================
   Page Layout — 固定左側欄 + 頂欄（對齊 iyf.tv 實測骨架）
   aside.sidebar：position:fixed，寬 200px，**透明底**直接壓在 body 上；
   main-area：margin-left:200px；內容再用 .content-block 收成 1275px 置中。

   ⚠️ 與 tp14 的骨架差異：tp14 內容區是流動的（只有左右 64px 留白），
   iyf.tv 是固定 1275px 置中容器（實測 .container）。
   ========================================== */
.page-shell {
  min-height: 100vh;
  background-color: var(--bg-base);
}

.main-area {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-base);
  /* 側欄是 fixed（脫離文件流、不佔位），主內容自己讓開它的寬度 */
  margin-left: var(--sidebar-w);
}

/* ==========================================
   Sidebar — 固定左側導覽（200px，對齊 iyf.tv .vertical-ctn）
   實測值：容器 200×100%、透明底；導覽項 190×49、font-size 16px、
   padding 12px 16px 12px 4px、**radius 0**；
   選中態 = 左側 4×10px 指示條（#46B8FF）+ 文字轉 #00C0FF + 圖示轉 #7EDCFF。

   ⚠️ 選中態**不換成實心圖示**。實測 iyf.tv 的 .nav-item.active .nav-icon
   class 仍然是 iconshouye（跟未選中同一個字符），只有 color 改變。
   這跟 tp14 的 line→fill 切換是不同做法，不要「修回去」；
   附帶好處是完全避開 CLAUDE.md §22.2 那個「-fill 變體漏進 sprite」的坑。
   ========================================== */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  /* z-index 必須高於 .topbar。topbar 橫跨整個畫面寬度（含側欄佔的 200px），
     捲動後轉實心底會整片蓋在側欄頂端的 logo 上，現象是「header 一變底色 logo 就不見」。

     ⚠️ 這個問題用 elementFromPoint 驗不出來：topbar 設了 pointer-events:none
     （必要，否則這條透明列會擋住底下 hero 的點擊），命中測試會穿透過去打到 logo、
     回報「沒有被遮住」——但「點得到」不等於「看得到」，繪製順序是另一回事。
     這類問題只能靠截圖或取色判定（§17.55）。

     為什麼抬整個 .sidebar 而不是只抬 .sb-brand：.sidebar 是 position:fixed，
     本身就建立堆疊脈絡，子元素的 z-index 只在它內部比大小，跳不出去。 */
  z-index: 2001;
  width: var(--sidebar-w);
  height: 100%;
  padding: 62px 0 20px;
  /* 參考站側欄沒有自己的底色／邊框／陰影，直接壓在 body 上 */
  background: transparent;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }

/* 品牌區：iyf.tv 的 logo 實際放在**頂欄**最左側（.top-nav-logo，200px 寬，
   剛好與側欄同寬對齊），側欄本身從導覽項開始。這裡沿用同樣的分工——
   .sb-brand 在桌機隱藏、由 .tb-brand 承擔，窄螢幕側欄收起時再由頂欄的行動版品牌區接手。
   依 CLAUDE.md §1 品牌區只放 <img>，不輸出站名文字。 */
.sb-brand {
  display: none;
}
/* logo 來源可能是後台上傳的動態欄位（長寬比不固定），
   固定高度 + contain + width:auto 才不會被裁切（§17.19） */
.brand-logo-img {
  height: 35px;
  width: auto;
  max-width: 168px;
  object-fit: contain;
}

.sb-nav {
  display: flex;
  flex-direction: column;
}

.sn-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 49px;
  /* 實測 padding 12px 16px 12px 4px；左側 4px 之外再留 5px 的容器內縮，
     讓 190px 的項目在 200px 的側欄裡靠左但不貼邊 */
  padding: 12px 16px 12px 4px;
  margin-left: 5px;
  width: 190px;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--text-nav);
  white-space: nowrap;
  /* 參考站的導覽項是方角、沒有底色塊 */
  border-radius: 0;
  background: transparent;
  transition: color 0.2s ease-in-out;
}

/* 選中指示條：實測 4×10px、#46B8FF，貼在項目最左緣。
   用 ::before 而不是額外的 <span>，模板端就不必為了裝飾多輸出一個元素。 */
.sn-item::before {
  content: "";
  width: 4px;
  height: 10px;
  margin-right: 8px;
  border-radius: 0;
  background: transparent;
  flex-shrink: 0;
  transition: background-color 0.2s ease-in-out;
}
.sn-item.is-active::before { background: var(--accent-dot); }

.sn-item .mac-icon {
  width: 25px;
  height: 25px;
  font-size: 25px;
  margin-right: 10px;
  flex-shrink: 0;
}

.sn-item:hover { color: var(--text-1); }
.sn-item.is-active { color: var(--accent); }
.sn-item.is-active .mac-icon { color: var(--accent-ico); }

/* ==========================================
   Topbar — 透明起始、捲動後轉實心（對齊 iyf.tv .top-nav）
   實測：position:fixed、高 62px、z-index 9998、頂端 background-color rgba(0,0,0,0)；
   最左是 200px 寬的 logo 區（.top-nav-logo，img 200×35），與側欄同寬對齊；
   搜尋框 315×40、底 rgba(152,152,152,0.2)、**方角無邊框**、輸入文字 13px。

   ⚠️ 捲動後的實心底色是**推導值不是量測值**：iyf.tv 捲動時會在 .top-nav 補上
   navbg class，但該 class 的規則在 computed style 上讀不到（背景仍是 rgba(0,0,0,0)），
   無法確認它真正的色值。這裡取全站底色 --bg-base 加高不透明度，是為了跟站上其他
   區塊一致的合理選擇——不要把它當成量到的數字寫進對照表。

   ⚠️ header 本體必須 pointer-events:none、只有內容區 auto——
   否則這條橫跨整個畫面的透明列會擋住底下 hero 的點擊（hero 整塊是可點的連結）。
   ========================================== */
.topbar {
  position: var(--header-position);
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 2000;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 var(--gutter);
  background-color: rgba(9, 11, 33, 0);
  pointer-events: none;
  transition: background-color 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.topbar.is-scrolled {
  background-color: rgba(9, 11, 33, 0.95);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* 內容區才恢復可點擊 */
.topbar-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
  width: 100%;
  pointer-events: auto;
}

/* 品牌區 —— iyf.tv 把 logo 放在頂欄最左的 200px 區塊（與側欄同寬對齊），
   側欄本身從導覽項開始。本主題沿用同一種分工：桌機與手機都由這一份負責，
   側欄的 .sb-brand 則永遠隱藏（見上方 Sidebar 區塊）。
   依 CLAUDE.md §1 品牌區只放 <img>，不輸出站名文字。 */
.tb-brand {
  display: flex;
  align-items: center;
  width: var(--sidebar-w);
  height: 100%;
  flex-shrink: 0;
}

/* Right actions —— 用 margin-left:auto 推到最右，
   中間的彈性空間交給 .mob-nav-row（窄螢幕）或留白（桌機） */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  height: 100%;
  margin-left: auto;
}

.tb-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-1);
  font-size: 14px;
  white-space: nowrap;
  transition: color 0.2s;
}
.tb-action .mac-icon { font-size: 20px; }
.tb-action:hover { color: var(--accent); }

.tb-icon-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-btn);
  color: rgba(255,255,255,0.9);
  font-size: 19px;
  transition: color 0.2s, background 0.2s;
  flex-shrink: 0;
}
.tb-icon-btn:hover { color: var(--accent); background: none; }

/* 常駐搜尋框 — 對齊 iyf.tv 實測 .search-box：315×40、方角、
   底 rgba(152,152,152,0.2)、無邊框、輸入文字 13px / rgba(255,255,255,.7)。
   右側是「｜ 搜索」（分隔線 + 純文字送出鈕），沿用來源模板的功能鉤子結構。 */
.tb-search {
  display: flex;
  align-items: center;
  height: 40px;
  width: 315px;
  padding: 0 12px;
  background: rgba(152, 152, 152, 0.2);
  border: none;
  border-radius: 0;
  flex-shrink: 0;
}
.tb-search #searchInputTop {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--text-2);
  font-size: 13px;
}
.tb-search #searchInputTop::placeholder { color: var(--text-3); }
.tb-search-sep {
  color: rgba(255,255,255,0.25);
  font-size: 13px;
  padding: 0 8px 0 4px;
  flex-shrink: 0;
  user-select: none;
}
.tb-search-submit {
  flex-shrink: 0;
  color: var(--text-2);
  font-size: 13px;
  white-space: nowrap;
  transition: color 0.2s;
}
.tb-search-submit:hover { color: var(--accent); }

/* 圖示 + 文字按鈕（「历史」）—— iyf.tv 頂欄右側那排是「圖示在上、無文字」的
   純圖示鈕，但本主題保留文字標籤：歷史記錄是功能鉤子，只有圖示時可辨識度太低，
   而參考站那排鈕本身就有 tooltip 補足語意。這是刻意的取捨，記在這裡免得被當成漏做。 */
.tb-text-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 24px;
  height: 44px;
  color: var(--text-2);
  flex-shrink: 0;
  transition: color 0.2s;
}
.tb-text-btn .mac-icon {
  font-size: 22px;
  width: 22px;
  height: 22px;
}
.tb-text-btn span {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  white-space: nowrap;
}
.tb-text-btn:hover { color: var(--text-1); }

/* 登入鈕：iyf.tv 右上角是「頭像 + 登录」的樸素文字型入口，沒有實心膠囊按鈕。
   對齊它改成方角、低調底色。

   ⚠️ 更正一個先前的過度推論：參考站**不是**全站都沒有膠囊。
   後來從它的樣式表撈到 .header-btn（Hero 的「立即播放」）實際是
   width:150px; height:52px; border-radius:26px —— 一顆道地的膠囊，hover 轉 #00C0FF。
   正確的說法是：**主要行動鈕（Hero 播放）是膠囊，其餘導覽／篩選／標籤類控制項是方角。**
   不要因為這裡寫方角就把 Hero 那顆也改掉。 */
.tb-login-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  height: 32px;
  background: rgba(152, 152, 152, 0.2);
  color: var(--text-1);
  border-radius: var(--radius-btn);
  font-size: 13px;
  font-weight: 400;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}
.tb-login-btn .mac-icon { font-size: 16px; }
.tb-login-btn:hover { background: var(--accent); color: #fff; }

/* ==========================================
   User Dropdown — 已登入用戶選單
   ========================================== */
.user-dd-wrap {
  position: relative;
}
.user-dd-wrap .tb-text-btn .user-dd-label {
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-dd {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
  z-index: 800;
  overflow: hidden;
}
.user-dd.is-open { display: block; }
.user-dd-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
}
.ud-avatar-icon { font-size: 22px; color: var(--accent); flex-shrink: 0; }
.ud-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ud-divider { height: 1px; background: var(--border); margin: 0; }
.ud-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.ud-item:hover { background: var(--bg-card); color: var(--text-1); }
.ud-item--danger { color: #e05555; }
.ud-item--danger:hover { background: rgba(224,85,85,.08); color: #f07070; }
.ud-item .mac-icon { font-size: 16px; flex-shrink: 0; }


.search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(17, 22, 31, 0.92);
  backdrop-filter: blur(6px);
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}
.search-overlay.is-open { display: flex; }

.search-overlay-inner {
  width: 100%;
  max-width: 680px;
  padding: 0 20px;
}

.search-bar {
  display: flex;
  align-items: center;
  background: rgba(17,22,31,0.6);
  border: 1px solid #4e4e4e;
  border-radius: var(--radius-pill);
  padding: 4px 4px 4px 18px;
  gap: 8px;
  transition: border-color 0.2s;
}
.search-bar:focus-within { border-color: var(--accent); }

.search-bar-icon {
  color: #999;
  font-size: 20px;
  flex-shrink: 0;
}

#searchInput {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-size: 16px;
  padding: 10px 0;
  min-width: 0;
}
#searchInput::placeholder { color: #888; }

.search-submit-btn {
  padding: 9px 22px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
  transition: background 0.2s;
}
.search-submit-btn:hover { background: var(--accent-hover); }

.search-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #999;
  font-size: 18px;
  flex-shrink: 0;
  transition: color 0.2s, background 0.2s;
}
.search-close-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }

.search-hot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 20px 4px 0;
}
.sh-label {
  font-size: 13px;
  color: #888;
  flex-shrink: 0;
  margin-right: 4px;
}
.sh-tag {
  display: inline-block;
  padding: 5px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid #4e4e4e;
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: #ccc;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.sh-tag:hover { color: #fff; background: var(--accent); border-color: var(--accent); }

/* ==========================================
   Page Content
   ========================================== */
.page-content {
  flex: 1;
  /* topbar 是 fixed(76px)，所有 page-content 页面都需要向下留出空间。 */
  padding-top: var(--topbar-h);
}
/* 例外：第一個區塊是滿版 Hero 的頁面（首頁／分類頁），
   用負 margin-top 抵消 padding-top，讓 Hero 拉回 y=0 覆蓋整個 topbar。 */
.page-content > .hero-container:first-child {
  margin-top: calc(var(--topbar-h) * -1);
}

.hero-container {
  position: relative;
  width: 100%;
  height: 620px;
  overflow: hidden;
  background: var(--bg-deep);
  /* 左右滑動換頁需要的兩個屬性（邏輯在 hero.js）：
     user-select:none —— 拖曳時不要選到文字（片名/簡介會被反白）。
       這也是「原生選取行為」的正解，不要靠 pointerdown 的 preventDefault() 去擋，
       那會讓整個 Hero 的連結再也點不動（見 hero.js 內的說明）。
     touch-action:pan-y —— 把垂直方向交還瀏覽器（頁面照樣能上下捲），
       水平方向留給我們自己處理。少了這行，觸控裝置上會變成
       「要嘛垂直捲不動、要嘛水平手勢收不到」。 */
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

@media (max-width: 1199px) {
  .hero-container { height: 460px; }
}

@media (max-width: 767px) {
  .hero-container { height: 340px; }
}

/* ==========================================
   Hero Banner — 骨架沿用來源模板，視覺數值改對齊 iyf.tv 實測
   （Hero 滿版 1585×615、比例 2.577；縮圖 .banner-box 90×126 radius 6px；
    底部漸層基準色 #090B21；播放鈕 150×52 radius 26px hover #00C0FF。
    細節見 template/log/tp22_dark_black__量測對照表.md 第 7.5 節）
   原始骨架註解：
   骨架：.hero-container > 兩層 .hero-layer（交叉淡入的背景圖）
        + 三層漸層蒙版（top / left / bottom）
        + 整塊可點的 .hero-link
        + .hero-info（左側文案：片名／標籤／簡介／播放鈕）
        + .hero-bottom（壓在 hero 底部的縮圖輪播，就是切換控制項）
   ========================================== */
.hero {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 兩層背景圖：預設都透明，帶 is-active 的那層顯示 */
.hero-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-position: 50% 20%;
  background-size: cover;
  /* 載入佔位圖：真實圖片由 JS 設成第一層背景、load.gif 永遠墊在第二層，
     圖還沒下載完時 gif 會透出來（見 CLAUDE.md §11.1 做法 B）。
     no-repeat 一定要有，否則 gif 會被平鋪成整片。 */
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}
.hero-layer.is-active { opacity: 1; }

/* 三層漸層蒙版 — 基準色改用 iyf.tv 的 --bg-deep（#090B21，與 body 同色）。
   參考站的 Hero 底部漸層原始規則（直接從它的樣式表撈到，非 computed style 推算）是：
     linear-gradient(0deg, #090B21 7.5%, rgba(9,11,33,.984) 13%, rgba(9,11,33,.95) 17.3%,
                     rgba(9,11,33,.5) 51%, rgba(9,11,33,.1) 79%…)
   ⚠️ 這裡的 rgba 一定要跟 --bg-base 同色（9,11,33）。tp14 用的是 rgb(20,21,23)，
   直接沿用會在 Hero 邊緣留下一條跟頁面底色對不上的接縫——
   而且是那種「說不出哪裡怪」的接縫，很難反推回這幾行。 */
.hero-layer-top,
.hero-layer-left,
.hero-layer-bottom {
  position: absolute;
  pointer-events: none;
}
.hero-layer-top {
  top: -1px; left: 0; right: 0;
  height: 126px;
  z-index: 2;
  background: linear-gradient(var(--bg-deep), rgba(9, 11, 33, 0));
}
.hero-layer-left {
  top: 0; bottom: 0; left: -3px;
  width: 468px;
  z-index: 2;
  background: linear-gradient(270deg, rgba(9, 11, 33, 0), var(--bg-deep));
}
.hero-layer-bottom {
  left: 0; right: 0; bottom: -1px;
  height: 223px;
  z-index: 1;
  background: linear-gradient(rgba(9, 11, 33, 0), var(--bg-deep) 80%);
}

/* 整塊可點：hero 任何位置點下去都進詳情頁（縮圖列與文案按鈕靠 z-index 疊在上面） */
.hero-link {
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* 左側文案區 */
.hero-info {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 4;
  width: 730px;
  max-width: calc(100% - var(--gutter) * 2);
  padding-top: 118px;
  pointer-events: none;
}
/* 文案區本身不吃點擊（讓底下的 .hero-link 生效），只有按鈕恢復可點 */
.hero-info .hero-play { pointer-events: auto; }

.hero-title {
  font-size: 43px;
  font-weight: 900;
  line-height: 50px;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-tags {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.hero-tags span {
  height: 28px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 20px;
  color: var(--text-2);
  background: var(--fill-1);
  white-space: nowrap;
}
/* 第一顆（分類）用主色，對齊參考站 .tag-blue */
.hero-tags span:first-child {
  color: var(--accent);
  background: var(--accent-light);
}

.hero-desc {
  margin: 20px 0 29px;
  font-size: 14px;
  line-height: 23px;
  color: #ddd;
  /* 只用 CSS 行數裁切決定省略號，模板端不要再疊字元數截斷（見 §17.34） */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 41px;
  padding: 0 20px;
  border-radius: var(--radius);
  background: var(--fill-1);
  color: var(--text-1);
  font-size: 16px;
  font-weight: 500;
  transition: background 0.2s;
}
.hero-play:hover { background: var(--fill-2); }
.hero-play .mac-icon { font-size: 22px; }

/* ===== Hero 底部縮圖列（切換控制項） ===== */
.hero-bottom {
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  z-index: 4;
  padding: 0 var(--gutter);
}

.hero-thumbs-wrapper {
  /* 出血到容器邊緣，內距再把卡片推回 gutter 對齊線上 */
  margin: 0 calc(var(--gutter) * -1);
  overflow: visible;
}
.hero-thumbs {
  display: flex;
  gap: var(--gap);
  padding: 15px var(--gutter) 5px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hero-thumbs::-webkit-scrollbar { display: none; }

/* 桌機一排 11 張（實測值），中斷點依序降為 10 / 7 */
.hero-thumb {
  flex: 0 0 calc((100% - (var(--gap) * 10)) / 11);
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: bottom center;
}
/* 選用中／hover：整張上浮 5px，封面加白色 1px 描邊 + 投影
   （上浮量與描邊都是實測值；描邊在 .card-cover 上，不是在 .hero-thumb 上） */
.hero-thumb.is-active,
.hero-thumb:hover { transform: translateY(-5px); }

.hero-thumb .card-cover {
  width: 100%;
  aspect-ratio: 3 / 4.5;
  margin-bottom: 0;
  /* hero 縮圖的圓角是 8px，一般卡片是 6px——參考站確實不同，不要統一 */
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.3s;
}
.hero-thumb.is-active .card-cover,
.hero-thumb:hover .card-cover {
  box-shadow: 0 0 0 1px #ffffff, 0 10px 25px rgba(0, 0, 0, 0.8);
}

/* ==========================================
   橫向捲動列（.video-track）與左右箭頭 —— **現在只剩 Hero 縮圖列在用**

   ⚠️ tp14 的首頁分類區塊也是橫向捲動列，本主題已全部改成 5 欄格線
   （對齊 iyf.tv 實測：該站整頁 0 個橫向捲動容器）。留下這一套是因為
   Hero 底部那排 11 張縮圖在參考站確實是可以左右滑的。

   ⚠️ tp14 在 .video-track 上下各加 150px 內距、再用等量負外距拉回版面，
   目的是讓「卡片 hover 彈出的 512px 詳情浮層」有地方溢出而不被 overflow-x:auto
   連帶裁掉。本主題的 hover 效果是蓋在卡片自己身上的覆蓋層（不會溢出容器），
   那組內距／負外距已無作用，一併移除——留著只會讓人以為捲動列有特殊的垂直空間需求。
   ========================================== */
.carousel-container { position: relative; }

.carousel-wrapper {
  margin: 0 calc(var(--gutter) * -1);
  overflow: visible;
}

.video-track {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 0 var(--gutter);
  /* 隱藏捲軸：不要改用「padding 把捲軸推出可視區」那種手法，
     那段 padding 會同時把內容頂偏、破壞垂直置中。 */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.video-track::-webkit-scrollbar { display: none; }

/* 左右捲動箭頭：不是實心方塊，而是往內淡出的漸層帶。
   漸層色必須跟 --bg-base 一致（#090B21 → rgba(9,11,33,…)），
   否則兩側會出現一條跟頁面底色對不上的接縫。 */
.scroll-btn {
  position: absolute;
  top: 0;
  width: var(--gutter);
  height: 100%;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-2);
  font-size: 28px;
  cursor: pointer;
  opacity: 0.8;
  visibility: visible;
  transition: opacity 0.3s, visibility 0.3s, color 0.3s;
}
.scroll-btn:hover { color: #fff; opacity: 1; }
.scroll-btn span {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.scroll-btn:hover span { transform: scale(1.3); }
/* 捲到底時該側箭頭隱藏（class 由 carousel.js 依 scrollLeft 切換，留 1px 容差） */
.scroll-btn.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.scroll-btn-left {
  left: calc(var(--gutter) * -1);
  background: linear-gradient(to right, rgba(9,11,33,1) 40%, rgba(9,11,33,0.7) 70%, transparent 100%);
}
.scroll-btn-right {
  right: calc(var(--gutter) * -1);
  background: linear-gradient(to left, rgba(9,11,33,1) 40%, rgba(9,11,33,0.7) 70%, transparent 100%);
}
.hero-scroll-btn {
  top: 15px;
  height: calc(100% - 20px);
}

/* ===== Hero／捲動列 響應式 ===== */
@media (max-width: 1400px) {
  .hero-thumb { flex: 0 0 calc((100% - (var(--gap) * 9)) / 10); }
}
@media (max-width: 1200px) {
  .hero-thumb { flex: 0 0 calc((100% - (var(--gap) * 6)) / 7); }
}
@media (max-width: 1199px) {
  .hero-info {
    left: 16px;
    width: auto;
    max-width: calc(100% - 32px);
    padding-top: 60px;
  }
  .hero-title { font-size: 30px; line-height: 38px; }
  .hero-desc { margin: 14px 0 20px; }
  .hero-bottom { padding: 0 16px; }
  .hero-thumbs-wrapper { margin: 0 -16px; }
  .hero-thumbs { padding: 15px 16px 5px; }
  .carousel-wrapper { margin: 0 -16px; }
  .video-track { padding: 0 16px; }
  .scroll-btn { display: none; }
}
@media (max-width: 767px) {
  /* 對齊參考站手機版：縮圖列、標籤、播放鈕都收起來，只留背景圖＋片名＋簡介。
     ⚠️ 播放鈕收起後，這張 hero 仍然要能點進詳情頁——.hero-link 蓋滿整塊、
     且不受這裡的隱藏影響，所以功能入口沒有消失（見 §17.36）。 */
  .hero-bottom { display: none; }
  .hero-tags { display: none; }
  .hero-play { display: none; }
  .hero-info { padding-top: 90px; }
  .hero-title { font-size: 22px; line-height: 30px; }
  .hero-desc { font-size: 12px; line-height: 19px; margin: 10px 0 0; }
  .hero-layer-left { width: 100%; }
}

/* ==========================================
   Hero 底下的分類快速篩選面板（widget/hero_genre_panel）

   ⚠️ 目前「未啟用」——依使用者指示先拿掉，index/index.html 與 vod/type.html
   都沒有 include 這個 widget，所以本區塊的規則目前不會套用到任何元素。
   樣式刻意保留不刪，是因為之前重寫 Hero 時把它連 CSS 一起弄丟過一次；
   留著的話日後要恢復只需在那兩頁各加一行 include，不必重寫樣式。

   位置與 tp11 不同，原因記在這裡免得下次有人「修回去」：
   tp11 把這塊用 position:absolute 壓在 Hero 圖片底部（bottom:20px）。
   tp14 的 Hero 底部已經是參考來源的縮圖輪播（那排縮圖就是 Hero 的切換控制項），
   兩者會直接疊在一起，所以這裡改成 Hero 下方的獨立區塊——
   資料塊本身與欄位完全沿用 tp11（分類 + 其子分類／類型 chips），只換擺放位置與視覺。

   視覺對齊本主題的篩選頁 pill：未選中透明底淺灰字，hover 才轉白。
   ========================================== */
.hero-genre-panel {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding: 20px var(--gutter) 4px;
}
.hgp-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.hgp-col--right { align-items: flex-start; }
/* 分類頁只有一個區塊，讓它自然靠左展開、不要被 space-between 推到兩端 */
.hero-genre-panel--single { justify-content: flex-start; }

.hgp-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.hgp-head {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-1);
  white-space: nowrap;
  transition: color 0.2s;
}
.hgp-head:hover { color: var(--accent); }
.hgp-head.is-active { color: var(--accent); }

.hgp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.hgp-tag {
  height: 28px;
  line-height: 28px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 13px;
  color: #ccc;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.hgp-tag:hover {
  color: var(--text-title);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
}

/* ==========================================
   Section — 首頁／分類頁的內容區塊（對齊 iyf.tv 實測 .header + .v-place）

   ⚠️ 這裡跟 tp14 有兩個結構性差異，都是實測結果，不要「修回去」：

   1. **不是橫向捲動列，是格狀排版。** 實測 iyf.tv 首頁**整頁 0 個橫向捲動容器**
      （遍歷所有元素比對 scrollWidth > clientWidth，結果是空陣列），每個分類區塊
      就是一列 5 張卡的 grid（gridTemplateColumns 實測 5×235.8px、column-gap 24px）。
      tp14 的 .carousel-container + 左右箭頭是它自己參考站的做法。

   2. **標題列包含子分類快捷連結。** 實測 .header 是一整條：
      [24×24 小圖示] [分類名 22px/500] [子分類連結 ×N] [更多]
      全部同一行、align-items:center，padding 15px 0 33px（總高 74px）。
      子分類連結 .sub-category 是 12px / rgba(255,255,255,.7) / margin-right 14px、
      無底色無圓角。「更多」也是同一種樣式，排在子分類之後。
   ========================================== */
.section {
  position: relative;
  padding: 0 var(--gutter) 30px;
  /* ⚠️ 內容區**靠左貼著側欄**，不是在剩餘空間裡置中。
     實測 iyf.tv（視窗 1600）：側欄 0–200，內容格線 x=223（＝200+23）、寬 1275、
     右側留 102px 空白；而頂欄的 .container 反而是置中的（x=155）。
     兩者對齊方式不同，很容易誤以為整站都置中而把內容也置中——那會讓內容右移、
     欄寬跟著縮水（實測誤置中後卡片從 236px 掉到 217px）。
     所以這裡用 margin-right:auto 靠左，不用 margin:0 auto。 */
  max-width: calc(var(--content-max) + var(--gutter) * 2);
  margin-right: auto;
}

/* 標題列 —— 實測 padding 15px 0 33px。
   ⚠️ 不能再是 <a>：裡面現在有子分類與「更多」各自的連結，巢狀 <a> 是無效 HTML。
   模板端已改成 <div>，標題自己是 <a>（見 index/index.html）。 */
.section-header {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 15px 0 33px;
  margin-bottom: 0;
  position: relative;
  z-index: 10;
}

/* ⚠️ .section-title 全站只能有這一份定義。
   先前 tp14 在這裡與「Content Block」區塊各有一份同名規則，後者會整個覆蓋前者，
   造成首頁標題實際吃到的字重不是這裡寫的那個——同名 class 重複定義是那種
   「兩邊各自看起來都對、合起來卻不是你以為的那個」的坑。
   這份定義同時服務 .section-header（首頁）與 .section-hd（子頁沿用的結構）。 */
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-1);
  white-space: nowrap;
  transition: color 0.2s;
}
.section-title:hover { color: var(--accent); }

/* 標題前的小圖示（實測 24×24、margin-right 15.6px） */
.section-icon {
  width: 24px;
  height: 24px;
  font-size: 24px;
  margin-right: 16px;
  flex-shrink: 0;
  color: var(--accent);
}

/* 子分類快捷連結列（實測外層 margin-left 21px） */
.section-subcats {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
  margin-left: 21px;
  min-width: 0;
}
.section-subcat {
  font-size: 12px;
  line-height: 25px;
  color: var(--text-2);
  margin-right: 14px;
  white-space: nowrap;
  transition: color 0.2s;
}
.section-subcat:hover { color: var(--accent); }

/* 「更多」——與子分類同一種樣式，推到最右
   ⚠️ 用 margin-left:auto 而不是把 .section-header 設 justify-content:space-between：
   標題與子分類是一組彼此依附的元素，space-between 會把它們也拆開（§17.29）。 */
.title-more {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-left: 14px;
  flex-shrink: 0;
  color: var(--text-2);
  font-size: 12px;
  line-height: 25px;
  transition: color 0.2s;
}
.title-more:hover { color: var(--accent); }
.more-label { white-space: nowrap; }
.more-arrow {
  font-size: 12px;
  margin-left: 4px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.title-more:hover .more-arrow { transform: translateX(3px); }

@media (max-width: 1199px) {
  .section { padding: 0 16px 24px; }
  .section-header { padding: 12px 0 20px; }
  .section-title { font-size: 18px; }
  /* 窄螢幕優先保住標題與「更多」，子分類列直接收起
     （每個分類的完整子分類在分類頁本來就有，這裡不是唯一入口，
       不違反 §17.36 的「功能鉤子不能無替代路徑地消失」） */
  .section-subcats { display: none; }
}

/* ==========================================
   Content Block — 內容區塊容器（1275px 定寬，對齊 iyf.tv 實測 .container）
   ========================================== */
.content-block {
  /* 左右一定要有 gutter：這是定寬置中容器（max-width + margin auto），
     只有「視窗寬度 > --content-max」時才會自然置中留白；一般螢幕寬度都小於它，
     容器會直接撐滿並貼齊螢幕邊緣——桌機與手機各自有斷點覆寫時很容易漏掉
     中間那段平板寬度（這是「平板貼邊」最常見的成因）。
     數值對齊 .section 的 --gutter，讓兩種區塊容器的內容對齊在同一條線上。 */
  padding: 0px var(--gutter) 4px;
  /* max-width 要把左右 gutter 算進來，內容本身才剛好是 --content-max（1275）。
     靠左對齊（margin-right:auto），理由同 .section：實測參考站的內容區是
     貼著側欄起算的，不是在剩餘空間裡置中。 */
  max-width: calc(var(--content-max) + var(--gutter) * 2);
  margin-left: 0;
  margin-right: auto;
  width: 100%;
}

/* 子頁沿用的舊標題列結構。iyf.tv 的標題列底下沒有分隔線，
   這裡拿掉 border-bottom 與對應的 padding-bottom，讓子頁跟首頁是同一套設計語言。
   ⚠️ 這條線是「上下兩個元素各自的邊框」那類問題的常見來源：拿掉這裡之後若畫面上
   還看得到線，要去檢查它下面那個元素有沒有自己的 border-top，不是回頭懷疑這裡沒生效。 */
.section-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

/* 標題前的圖示（沿用舊結構的子頁會有） */
.section-title-icon {
  color: var(--accent);
  font-size: 20px;
  display: flex;
}

/* 「更多」連結（子頁沿用的 .section-hd / .section-more 結構，資料塊擺放不動，
   外觀統一成跟首頁 .title-more 一致的樸素文字＋箭頭：
   參考站沒有「膠囊底色按鈕」這種更多連結。 */
.section-more {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 25px;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-2);
  transition: color 0.2s;
}
.section-more .mac-icon {
  font-size: 12px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.section-more:hover {
  background: none;
  color: var(--accent);
}
.section-more:hover .mac-icon { transform: translateX(3px); }

/* ==========================================
   兩欄版面（仿 .w920 fn-left + .w260 fn-right）
   ========================================== */
.two-col { display: flex; gap: 20px; align-items: stretch; }
.col-main { flex: 1; min-width: 0; }
.col-side { flex: 0 0 260px; display: flex; }
.col-side .rank-col {
  flex: 1;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.col-side .rank-col-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 12px 10px;
  font-size: 17px;
  line-height: 1.2;
}
.col-side .rch-badge { margin-left: 0; }
.col-side .rank-top1 {
  padding: 14px 12px 12px;
}
.col-side .rank-top1 a {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.col-side .rt1-thumb { width: 84px; height: 112px; }
.col-side .rt1-name {
  font-size: 16px;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
}
.col-side .rt1-meta,
.col-side .rt1-status {
  font-size: 14px;
  line-height: 1.45;
}
.col-side .rank-list {
  display: block;
  padding: 4px 0 10px;
}
.col-side .rank-li {
  display: block;
  margin-top: 8px;
}
.col-side .rank-li:first-child { margin-top: 0; }
.col-side .rank-li-inner {
  height: auto;
  min-height: 40px;
  padding: 6px 12px;
  align-items: center;
  font-size: 15px;
}
.col-side .rl-name {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
}
.col-side .rl-hits { font-size: 14px; }

/* ==========================================
   VOD Grid — 5 欄格狀（對齊 iyf.tv 實測 .v-place）
   ==========================================
   實測 iyf.tv 首頁每個分類區塊：display:grid、
   grid-template-columns 5×235.797px、column-gap 24px、容器寬 1275px。
   **整頁 0 個橫向捲動容器**（遍歷全部元素比對 scrollWidth > clientWidth 得到空陣列），
   所以本主題不用 tp14 那套 .carousel-container + 左右箭頭。

   .vod-grid／.play-vod-grid／.detail-vod-grid／.td-vod-grid／.plot-related-grid
   是各頁面用來包 {maccms:vod}+widget/vod_card 迴圈的容器 class（純粹是不同頁面
   各自沿用了不同名稱，用途相同）。全部共用同一套規則，之後要調欄數改一處就好。

   ⚠️ 用 grid 而不是 flex+wrap：flex+wrap 在最後一排數量不滿時會把剩下的項目
   拉伸成等分寬度，同一份清單裡卡片會時寬時窄；grid 的固定欄位只會留白。 */
.vod-row,
.vod-grid,
.play-vod-grid,
.detail-vod-grid,
.td-vod-grid,
.plot-related-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px 24px;
}

/* grid 子項目預設 min-width:auto（不是 0），內容太寬時會撐開整條軌道、
   讓區塊溢出容器。卡片標題是可能很長的動態資料，這裡明確歸零。 */
.vod-row > .card,
.vod-grid > .card,
.play-vod-grid > .card,
.detail-vod-grid > .card,
.td-vod-grid > .card,
.plot-related-grid > .card {
  flex: none;
  width: 100%;
  min-width: 0;
}

/* ==========================================
   Actor Row (首頁明星推薦)
   ========================================== */
.actor-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 16px;
}

/* ==========================================
   VOD Card — 對齊 iyf.tv 實測 .video-teaser 結構

   實測（視窗 1600、5 欄）：
     卡片總高 399px ＝ 海報 337 + 文字區 62
     海報 236×337、**比例 0.699 ≈ 7:10**（原圖 238×340）、radius 6px、object-fit:cover
     右上角標 .top-right-icon：absolute top:8 right:8
     海報底漸層 .bar：高 42px，transparent → rgba(0,0,0,.5) 38% → rgba(0,0,0,.9)
     文字區 .title-box：236×62、底色同 body、padding 8px 6px
       標題 16px #fff ／ 標籤 14px rgba(255,255,255,.4)
     hover .teaser-detail-cover：蓋住**整張卡** 236×399、radius 4px、
       transparent → rgba(0,0,0,.8) 48% → rgba(0,0,0,.9)，
       中央播放字符 75px、rgba(255,255,255,.7)

   ⚠️ 實測 hover 時 transform:none、box-shadow:none —— 卡片**不放大也沒有陰影**，
   只是浮上一層漸層遮罩加一個大播放鈕。tp14 那種「彈出 512px 詳情面板」是它自己
   參考站的做法，本主題沒有，對應的 .hover-popout / vod_card.js 已整批移除。
   ========================================== */
.card {
  position: relative;
  min-width: 0;
}

.card-link {
  display: block;
  color: inherit;
}

.card-cover {
  position: relative;
  width: 100%;
  /* 7:10 是實測比例，不是常見的 2:3——用 aspect-ratio 讓欄寬變動時比例固定 */
  aspect-ratio: var(--poster-ratio);
  border-radius: var(--radius);
  overflow: hidden;
  /* §11.1：圖片載入完成前顯示 load.gif，不留純色空白塊。
     載入完成後由 img_loading.js 補 .img-loaded 撤掉 gif（只留底色）。 */
  background: var(--bg-card) url("../img/load.gif") no-repeat center/cover;
}
.card-cover.img-loaded { background-image: none; }

.card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 右上角標（畫質／更新狀態）—— 實測位置 top:8 right:8 */
.card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  padding: 1px 6px;
  border-radius: var(--radius-btn);
  background: rgba(0, 0, 0, 0.55);
  color: var(--text-1);
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 海報底部漸層條 —— 實測高 42px 的純漸層。
   參考站上它是純裝飾；本主題把來源模板原有的評分放進來（資料不減、視覺照參考站）。 */
.card-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42px;
  display: flex;
  align-items: flex-end;
  padding: 0 8px 6px;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 38%, rgba(0, 0, 0, 0.9));
  pointer-events: none;
}
.card-score {
  color: var(--score-hi);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

/* 文字區 —— 實測 62px 固定高、padding 8px 6px、底色與 body 相同。
   高度用 min-height 而不是 height：字級或行高日後調整時不會被裁掉（§17.52）。 */
.card-meta {
  min-height: var(--card-meta-h);
  padding: 8px 6px;
  background: var(--bg-base);
}
.card-title {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s;
}
.card-tags {
  font-size: 14px;
  line-height: 21px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card:hover .card-title { color: var(--accent); }

/* hover 覆蓋層 —— 蓋住整張卡（含文字區），實測 radius 4px。
   ⚠️ 用 inset:0 沒問題（這一層不需要依比例改變高度）；
   §17.20 警告的是「要動態改 width 的疊層不能用 inset:0」，不是同一種情況。 */
.card-hover {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8) 48%, rgba(0, 0, 0, 0.9));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.card:hover .card-hover {
  opacity: 1;
  visibility: visible;
}
.card-hover-play {
  width: 75px;
  height: 75px;
  font-size: 75px;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s, transform 0.2s;
}
.card-hover:hover .card-hover-play {
  color: #fff;
  transform: scale(1.06);
}

/* ===== 觸控裝置不觸發卡片 hover 覆蓋層 =====
   覆蓋層是滑鼠專屬的互動：游標停留在卡片上才展開。觸控裝置沒有「停留」這個狀態，
   瀏覽器會在點擊時合成一次 :hover 並讓它黏著，結果是使用者想點進詳情頁，
   卻先蓋上一層遮罩、要再點一次別處才能消掉。

   兩道條件並行，兩者都必要：
   (1) 寬度 ≤1199px —— 本主題「平板＋手機」的既有門檻，語意一致，
       也涵蓋「桌機把視窗縮窄」的檢視情況。
   (2) hover:none / pointer:coarse —— 依裝置實際能力判斷，不看寬度；
       橫向大平板可能寬過 1199px，光靠寬度會漏掉。

   卡片本身仍是連結，點擊照樣進詳情頁，功能沒有消失（§17.36）。
   ⚠️ 這兩條要比基底規則多帶一層選擇器，否則同特異性下會輸給寫在檔案更後面的
   基底規則（§17.50）——這裡用 !important 之外再加父層 class 保險。 */
@media (max-width: 1199px) {
  .card .card-hover { display: none; }
}
@media (hover: none), (pointer: coarse) {
  .card .card-hover { display: none; }
}

@media (max-width: 768px) {
  .card-title { font-size: 14px; line-height: 20px; }
  .card-tags { font-size: 12px; line-height: 18px; }
  .card-badge { font-size: 10px; }
  .card-score { font-size: 12px; }
}

/* ==========================================
   Login Modal — 淺色卡片
   ========================================== */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 600;
  align-items: center;
  justify-content: center;
}
.modal-overlay.is-open { display: flex; }

.modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px 28px;
  width: 340px;
  max-width: calc(100vw - 32px);
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
}
.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  color: var(--text-3);
  font-size: 16px;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.2s;
}
.modal-close:hover { color: var(--text-1); }
.modal-title { font-size: 18px; font-weight: 700; margin-bottom: 24px; color: var(--text-1); }
.modal-field { margin-bottom: 16px; }
.modal-label { display: block; font-size: 12px; color: var(--text-3); margin-bottom: 6px; }
.modal-input {
  width: 100%;
  padding: 10px 13px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.modal-input:focus { border-color: var(--accent); }
.modal-submit {
  width: 100%;
  padding: 13px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  transition: background 0.2s;
  margin-top: 6px;
}
.modal-submit:hover { background: var(--accent-hover); }

/* Verify captcha row */
.verify-row { display: flex; align-items: center; gap: 8px; }
.modal-input--verify { flex: 1; }
.verify-img { height: 36px; width: auto; border-radius: var(--radius-sm); border: 1px solid var(--border-2); cursor: pointer; flex-shrink: 0; }
.sms-btn { height: 38px; padding: 0 12px; background: var(--bg-elevated); border: 1px solid var(--border-2); border-radius: var(--radius-sm); color: var(--accent); font-size: 12px; white-space: nowrap; cursor: pointer; transition: background .15s; }
.sms-btn:hover { background: var(--bg-card); }
.sms-btn:disabled { opacity: .55; cursor: not-allowed; }

/* mac-toast — 全站浮动通知 */
.mac-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  background: var(--bg-elevated);
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 22px;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 6px 24px rgba(0,0,0,.45);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  white-space: pre-line;
  max-width: calc(100vw - 48px);
  text-align: center;
}
.mac-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.mac-toast--error   { border-color: #e05555; color: #f07070; }
.mac-toast--success { border-color: var(--accent); color: var(--accent); }
.mac-toast--info    { border-color: var(--border-2); color: var(--text-2); }

.modal-footer {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-3);
}
.modal-link { color: var(--text-2); transition: color 0.2s; }
.modal-link:hover { color: var(--accent); }
.modal-link--accent { color: var(--accent); }

.modal-box--confirm { width: 300px; text-align: center; }
.modal-box--confirm .modal-title { margin-bottom: 22px; }
.modal-confirm-actions { display: flex; flex-direction: column; gap: 10px; }
.modal-submit--danger { display: block; background: var(--accent-2); }
.modal-submit--danger:hover { background: var(--accent-2-alt); }
.modal-cancel {
  width: 100%;
  padding: 13px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-2);
  font-size: 14px;
  font-weight: 700;
  transition: background 0.2s, color 0.2s;
}
.modal-cancel:hover { color: var(--text-1); border-color: var(--accent); }


/* ==========================================
   Footer — 仿 .mcid-list / .footer-nav
   ========================================== */
.mcid-list {
  /* 先隱藏底部分類連結區塊，需要時把 display 改回 flex 即可恢復 */
  display: none;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 20px 20px 4px;
  flex-wrap: wrap;
  gap: 16px 0;
}
.mcid-type { width: 25%; padding-right: 12px; }
.mcid-type h2 { margin-bottom: 8px; }
.mcid-type h2 a { font-size: 15px; color: var(--text-3); font-weight: 700; }
.mcid-type h2 a:hover { color: var(--accent); }
.mcid-type ul { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.mcid-type ul li a { font-size: 12px; color: var(--text-3); }
.mcid-type ul li a:hover { color: var(--accent); }
.site-footer {
  padding: 0 0 0;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.8;
  background: var(--bg-base);
  margin-top: 24px;
  text-align: center;
}
.footer-links {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 16px 20px 4px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
}
.footer-links a { color: var(--text-3); transition: color 0.2s; }
.footer-links a:hover { color: var(--accent); }
.site-footer > p {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 6px 20px 0;
}
.footer-bottom-bar {
  margin-top: 14px;
  padding: 12px 20px;
  background: var(--bg-topbar);
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.3px;
}

/* ==========================================
   漂浮功能按鈕 — 對齊 iyf.tv 實測 #sticky-block

   ⚠️ tp14 這一塊寫的是「60×60 圓形、純色 #3E3E3E、彼此間距 20px」，
   那是從 tp11 移植過來、量測自 **fdzys.com** 的數值，跟本次參考站無關——
   正是 CLAUDE.md §1.1 點名的「只能拿做法、不能拿數值」案例。本主題重新量過。

   iyf.tv 的原始規則（直接從它的樣式表撈到）：
     #sticky-block      position:fixed; right:25px; bottom:30px; width:40px;
                        z-index:999; opacity:.95; user-select:none
     .inner             background-color:rgba(28,29,47,.88); border-radius:20px;
                        backdrop-filter:blur(30px)        ← 量到的 computed 值
     .stick-block-button cursor:pointer; line-height:35px; height:35px; width:40px;
                        display:flex; align-items:center; justify-content:center;
                        font-size:20px; position:relative; color:rgba(255,255,255,.7)
     .stick-block-button i.iconfont  font-size:22px
     .hint              position:absolute; right:39.2px; height:35px;
                        background:rgb(56,67,134); color:#fff; font-size:14px;
                        border-radius:20px 0 0 20px; white-space:nowrap
     .mainColorBg       background-color:#00C0FF !important; color:#fff !important

   也就是：**一個膠囊容器裝著多顆方形按鈕**，不是多顆獨立圓鈕。
   ========================================== */
.fab-group {
  position: fixed;
  right: 25px;
  bottom: 30px;
  width: 40px;
  z-index: 900;
  opacity: 0.95;
  user-select: none;
}
.fab-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40px;
  border-radius: 20px;
  background: rgba(28, 29, 47, 0.88);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  overflow: hidden;
}
.fab-btn {
  position: relative;
  width: 40px;
  height: 35px;
  line-height: 35px;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.fab-btn:hover {
  background: var(--accent);
  color: #fff;
}

/* 左側滑出的文字提示（對齊參考站 .hint）
   ⚠️ 提示與按鈕都留在同一個 flex 行內脈絡、用 transform 平移而不是各自算絕對座標，
   兩者不可能疊在一起（§17.38）。 */
.fab-hint {
  position: absolute;
  right: 40px;
  top: 0;
  height: 35px;
  line-height: 35px;
  padding: 0 12px;
  border-radius: 20px 0 0 20px;
  background: rgb(56, 67, 134);
  color: #fff;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
}
.fab-btn:hover .fab-hint {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* 回到頂部：捲動超過 400px 才出現（class 由 footer.js 切換）。
   ⚠️ 用 display:none 而不是 opacity:0——膠囊容器的高度由內容撐出來，
   按鈕若只是透明但仍佔位，未捲動時容器會多出一段空白的圓角尾巴。 */
.fab-btn--top { display: none; }
.fab-btn--top.is-visible { display: flex; }

/* QR 碼彈窗 */
.fab-qr-popup {
  position: fixed;
  bottom: 80px;
  right: 25px;
  background: #fff;
  /* 這個彈窗刻意用白底（QR code 需要白底才好掃），所以裡面的文字與邊框
     不能沿用主題那組色票——本主題的 --text-3 是 rgba(255,255,255,0.4)、
     --border 是 rgba(255,255,255,0.10)，都是為深色底設計的淺色，
     套在白底上等於白字白底、隱形邊框（§17.48）。
     邊框那層特別容易漏掉：白色方塊在深色頁面上本來就看得出輪廓。 */
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 12px;
  display: none;
  z-index: 999;
  width: 150px;
  text-align: center;
}
.fab-qr-popup.is-open { display: block; }
.fab-qr-popup p { font-size: 12px; color: #666; margin-bottom: 10px; }
.fab-qr-popup img { width: 130px; height: 130px; border-radius: 4px; background: #fff; display: block; }

/* ==========================================
   Comments（共用 mini 留言元件，仿 .mac_comment 素樸方框）
   ========================================== */
.comment-section { margin-bottom: 32px; }
.gbook-count { font-size: 13px; font-weight: 400; color: var(--text-3); margin-left: 6px; }
.gbook-list { margin-bottom: 20px; }
.gbook-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.gbook-avatar {
  flex-shrink: 0; width: 36px; height: 36px;
  border-radius: 50%; background: var(--bg-elevated);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: 22px;
}
.gbook-body { flex: 1; min-width: 0; }
.gbook-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.gbook-name { font-size: 13px; font-weight: 600; color: var(--text-1); }
.gbook-time { font-size: 11px; color: var(--text-3); }
.gbook-content { font-size: 13px; color: var(--text-2); line-height: 1.7; word-break: break-all; }
.gbook-reply {
  margin-top: 8px; padding: 8px 12px;
  background: var(--bg-elevated); border-radius: var(--radius-sm);
  font-size: 12px; color: var(--text-2); display: flex; gap: 6px; align-items: flex-start;
}
.gbook-reply .mac-icon { flex-shrink: 0; color: var(--accent-2); margin-top: 1px; }
.gbook-form { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.gbook-form-title { font-size: 14px; font-weight: 600; color: var(--text-1); margin-bottom: 12px; }
.gbook-textarea {
  width: 100%; padding: 10px 12px;
  background: var(--bg-elevated); border: 1px solid var(--border-2);
  border-radius: var(--radius-sm); color: var(--text-1); font-size: 13px;
  font-family: inherit; resize: vertical; outline: none; line-height: 1.6;
  transition: border-color 0.2s; display: block; margin-bottom: 10px;
}
.gbook-textarea:focus { border-color: var(--accent); }
.gbook-textarea::placeholder { color: var(--text-3); }
.gbook-form-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gbook-chars { font-size: 12px; color: var(--text-3); flex-shrink: 0; }
.gbook-chars em { font-style: normal; color: var(--accent); }
.gbook-verify-wrap { display: flex; align-items: center; gap: 8px; flex: 1; justify-content: flex-end; flex-wrap: wrap; }
.gbook-captcha-img { height: 36px; border-radius: 4px; cursor: pointer; vertical-align: middle; }
.gbook-input {
  padding: 8px 12px; background: var(--bg-elevated); border: 1px solid var(--border-2);
  border-radius: var(--radius-sm); color: var(--text-1); font-size: 13px; outline: none; transition: border-color 0.2s;
}
.gbook-input:focus { border-color: var(--accent); }
.gbook-input::placeholder { color: var(--text-3); }
.gbook-input--verify { width: 88px; }
.gbook-submit-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 24px; background: var(--accent-2); color: #fff;
  border: none; border-radius: var(--radius-pill); font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: background 0.2s;
}
.gbook-submit-btn:hover { background: var(--accent-2-alt); }

/* ==========================================
   Rank Widgets — 仿 .hot-list（首名大圖 + 其餘文字行）
   ========================================== */
.rank-col {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.rank-col-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 2px solid var(--bg-base);
}
.rank-col-title { padding: 10px 12px 0; font-size: 15px; font-weight: 700; color: var(--text-1); }
.rch-badge { font-size: 10px; padding: 2px 6px; border-radius: var(--radius-sm); background: var(--accent-light); color: var(--accent); margin-left: 6px; }
.rank-col-more { font-size: 12px; color: var(--text-3); }
.rank-col-more:hover { color: var(--accent); }
.rank-top1 { padding: 10px; }
.rank-top1 a { display: flex; gap: 10px; }
.rt1-thumb {
  position: relative; flex-shrink: 0;
  width: 72px; height: 96px;
  overflow: hidden; background: var(--bg-elevated) url("../img/load.gif") no-repeat center/cover;
}
.rt1-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rt1-crown {
  position: absolute; bottom: 0; left: 0;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 13px;
}
.rt1-info { flex: 1; min-width: 0; }
.rt1-name { font-size: 14px; font-weight: 600; color: var(--text-1); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-top1 a:hover .rt1-name { color: var(--accent); }
.rt1-meta { font-size: 12px; color: var(--text-3); margin-bottom: 3px; }
.rt1-status { font-size: 12px; color: var(--text-3); margin-bottom: 5px; }
.rt1-hits { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--accent-2); }
.rank-list { list-style: none; padding: 2px 0 8px; }
.rank-li { border-bottom: none; }
.rank-li-inner {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; font-size: 13px; color: var(--text-2); transition: background 0.15s;
}
.rank-li-inner:hover { background: var(--bg-elevated); color: var(--text-1); }
.rl-num {
  flex-shrink: 0; width: 22px; height: 22px;
  border-radius: var(--radius-sm); background: var(--bg-elevated);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--text-3);
}
.rl-num--gold,
.rl-num--silver,
.rl-num--bronze { background: var(--accent); color: #fff; }
.rl-name { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rl-hits { flex-shrink: 0; font-size: 12px; color: var(--accent); }

.rank-col--topic { margin-top: 16px; }
.rct-list { list-style: none; padding: 6px 12px 10px; display: flex; flex-direction: column; gap: 10px; }
.rct-link { display: flex; align-items: center; gap: 10px; }
.rct-thumb {
  flex-shrink: 0; width: 56px; height: 36px;
  border-radius: var(--radius-sm); overflow: hidden;
  background: var(--bg-elevated) url("../img/load.gif") no-repeat center/cover;
}
.rct-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rct-name { flex: 1; min-width: 0; font-size: 13px; color: var(--text-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rct-link:hover .rct-name { color: var(--accent); }

/* ==========================================
   Art Card (文章)
   ========================================== */
.art-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.art-card {
  display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 0;
  overflow: hidden; transition: box-shadow 0.2s; color: var(--text-1);
}
.art-card:hover { box-shadow: var(--shadow-panel); }
.art-card-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-elevated) url("../img/load.gif") no-repeat center/cover; }
.art-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.art-card:hover .art-card-thumb img { transform: scale(1.04); }
.art-card-nopic { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 36px; color: var(--text-3); }
.art-card-cat { position: absolute; top: 8px; left: 8px; padding: 2px 8px; background: var(--accent); color: #fff; font-size: 11px; }
.art-card-body { padding: 10px 12px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.art-card-title {
  font-size: 14px; font-weight: 400; color: var(--text-1); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; transition: color 0.2s;
}
.art-card:hover .art-card-title { color: var(--accent); }

/* ==========================================
   排行榜首頁
   ========================================== */

/* ==========================================
   Topic Card
   ========================================== */
.topic-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.topic-card {
  display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 0;
  overflow: hidden; transition: box-shadow 0.2s; color: var(--text-1);
}
.topic-card:hover { box-shadow: var(--shadow-panel); }
.topic-card-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-elevated) url("../img/load.gif") no-repeat center/cover; }
.topic-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.topic-card:hover .topic-card-thumb img { transform: scale(1.04); }
.topic-card-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; color: rgba(255,255,255,0.9);
  opacity: 0; transition: opacity 0.2s;
}
.topic-card:hover .topic-card-overlay { opacity: 1; }
.topic-card-count { position: absolute; bottom: 8px; right: 8px; padding: 2px 8px; background: rgba(0,0,0,0.6); color: #fff; font-size: 11px; }
.topic-card-body { padding: 10px 12px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.topic-card-title { font-size: 14px; font-weight: 600; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.2s; }
.topic-card:hover .topic-card-title { color: var(--accent); }
.topic-card-blurb { font-size: 12px; color: var(--text-3); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ==========================================
   Pagination — 仿 .pagination 方形頁碼
   ========================================== */
.pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; padding: 25px 0 10px; }
.pg-btn, .pg-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 12px;
  border-radius: 0;
  border: 1px solid var(--border);
  margin-left: -1px;
  background: var(--bg-card); color: var(--accent); font-size: 13px; transition: all 0.2s;
}
.pg-btn:hover, .pg-num:hover { color: #fff; border-color: var(--accent); background: var(--accent); }
.pg-num.is-active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.pg-info { font-size: 12px; color: var(--text-3); margin-left: 12px; }

/* ==========================================
   Desc Expand widget
   ========================================== */
.desc-collapsed { max-height: 80px; overflow: hidden; -webkit-mask-image: linear-gradient(black 40%, transparent); mask-image: linear-gradient(black 40%, transparent); }
.desc-expanded { max-height: none; mask-image: none; -webkit-mask-image: none; }
.desc-expand-btn { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--accent); padding: 6px 0; cursor: pointer; background: none; border: none; }
.desc-expand-btn:hover { text-decoration: underline; }

/* ==========================================
   Ad Slots
   ========================================== */
.vod-ad-slot { margin: 0 0 20px; }
.player-adbar { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-card); border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-3); min-height: 36px; }
.player-adbar:empty { display: none; }
.adbar-close { margin-left: auto; flex-shrink: 0; background: none; border: none; color: #999; font-size: 14px; cursor: pointer; padding: 2px 6px; border-radius: 3px; transition: color 0.2s, background 0.2s; }
.adbar-close:hover { color: #fff; background: rgba(255,255,255,0.1); }
.site-ad { border: 1px solid var(--border); background: var(--bg-card); overflow: hidden; position: relative; }
.site-ad::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--accent-2); }
.site-ad--banner { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 18px; font-size: 12px; color: var(--text-2); flex: 1; }
.site-ad-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.site-ad-icon { font-size: 18px; flex-shrink: 0; color: var(--accent-2); }
.site-ad-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.site-ad-text strong { font-size: 13px; color: var(--text-1); }
.site-ad-text span { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-ad--sidebar { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; text-align: left; }
.site-ad--sidebar .site-ad-body { flex: 1; min-width: 0; }
.site-ad-label { display: inline-block; font-size: 9px; color: var(--accent-2); margin-bottom: 3px; letter-spacing: 1px; text-transform: uppercase; }
.site-ad-title { font-size: 13px; font-weight: 700; color: var(--text-1); margin-bottom: 2px; }
.site-ad-desc { font-size: 11px; color: var(--text-3); line-height: 1.5; }
.site-ad-btn { display: inline-flex; align-items: center; flex-shrink: 0; padding: 6px 14px; background: var(--accent-2); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; transition: opacity 0.2s; }
.site-ad-btn:hover { opacity: 0.85; }

/* ==========================================
   MAC.Pop 彈出層覆寫（淺色）
   ========================================== */
.mac_pop_bg { background: rgba(0,0,0,0.5) !important; }
.mac_pop { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important; padding: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; }
.mac_pop .pop_top { display: flex !important; align-items: center !important; justify-content: space-between !important; height: auto !important; padding: 14px 16px !important; background: var(--bg-elevated) !important; border-bottom: 1px solid var(--border) !important; flex-shrink: 0 !important; }
.mac_pop .pop_top h2 { font-size: 15px !important; font-weight: 600 !important; color: var(--text-1) !important; margin: 0 !important; line-height: 1 !important; float: none !important; }
.mac_pop span.pop_close { float: none !important; width: 28px !important; height: 28px !important; font-size: 16px !important; text-indent: 0 !important; background: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; color: var(--text-3) !important; cursor: pointer !important; transition: color 0.2s, background 0.2s !important; line-height: 1 !important; }
.mac_pop span.pop_close:hover { color: var(--text-1) !important; background: var(--bg-base) !important; }
.mac_pop .pop_content { flex: 1 !important; overflow-y: auto !important; }
.mac_pop_msg_bg { background: rgba(0,0,0,0.2) !important; }
.mac_pop_msg { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.25) !important; padding: 10px 20px !important; }
.mac_pop_msg .pop-msg { color: var(--text-1) !important; font-size: 13px !important; }

/* ==========================================
   Responsive
   ========================================== */
@media (max-width: 1199px) {
  /* ===== 手機與平板：側欄收起，導覽併入頂欄 =====
     側欄整條隱藏，改由頂欄裡「品牌 → 導覽 → 右側操作區」這一行接手；
     導覽項目與側欄完全一致，空間不夠時在自己的區域內橫向捲動。

     ⚠️ 側欄一旦隱藏，.main-area 的 margin-left 必須同時歸零，否則整頁會憑空左偏
     一個側欄寬。這兩行是綁在一起的，改其中一個就要改另一個。 */
  .sidebar   { display: none; }
  .main-area { margin-left: 0; }

  /* 頂欄縮排：桌機 64px 的左右留白在平板會太寬 */
  .topbar { padding: 0 16px; gap: 12px; }
  .topbar-right { gap: 12px; }

  /* 搜尋框縮到桌機寬度的 2/3（315px → 210px）：
     平板的頂欄要同時容納品牌、可滑動的導覽列與右側操作區，搜尋框維持 315px 會把
     導覽的可視區壓得太窄。這條寫在 1199px 斷點、基底那條在檔案更前面，
     順序上 media query 會贏，不需要額外提高特異性。 */
  .tb-search { width: 210px; }

  /* 頂欄內容改為佔滿整行：桌機時 .topbar 是 justify-content:flex-end、
     .topbar-inner 收縮貼右；併入導覽之後需要整行的空間來分配
     （品牌固定寬、導覽吃掉剩餘空間、右側操作區固定寬）。 */
  .topbar-inner { width: 100%; justify-content: flex-start; }
  /* 品牌之外的東西一律靠右。
     平板時中間的 .mob-nav-row 是 flex:1、本來就會把右側操作區推到底；
     但手機把導覽收起來（display:none）之後就沒有東西撐開，右側操作區會直接
     黏在品牌後面。用 margin-left:auto 讓它自己吃掉剩餘空間，兩個斷點都成立，
     也不必依賴容器的 justify-content。 */
  .topbar-right { margin-left: auto; }
  /* ⚠️ 這兩條刻意寫成兩層選擇器（0,2,0）而不是單一 class（0,1,0）：
     .tb-brand-mob / .mob-nav-row 的基底 display:none 定義在檔案「更後面」的區塊，
     media query 不會增加特異性，同特異性時後寫的贏——用單一 class 寫在這裡，
     會被後面的 none 整個蓋掉，實測平板與手機下兩者都算出 display:none、
     導覽完全不出現。提高一級特異性就不受檔案順序影響。 */
  /* 頂欄高度：桌機 76px → 平板與手機 56px（共用同一個值）。
     這個寬度側欄已收起、導覽併進頂欄，版面比桌機緊湊，頂欄不需要那麼高。

     ⚠️ 56px 是「不縮小按鈕」前提下的實際下限，不要再往下調：
     頂欄裡最高的元素是歷史按鈕 44px（搜尋框 35、圖示鈕與漢堡鈕各 40、logo 24），
     56 − 44 = 上下各 6px，剛好撐得住按鈕的 hover 背景與圖示視覺重心。
     再矮就得把按鈕一起縮——但 44px 是觸控目標的業界下限
     （Apple HIG 44pt／Material 48dp），而這個斷點針對的正是平板與手機，
     為了幾 px 的頂欄高度犧牲點擊面積並不划算。
     （曾評估過 2/3 的 51px：上下只剩 3.5px，按鈕會像被夾住。）

     改的是 --topbar-h 變數而不是 .topbar 的 height：全站有多處用它換算位置
     （內容區讓開的距離、次級 sticky 元素的 top、歷史下拉的定位…），
     只改 .topbar 自己會讓那些地方全部對不上。

     與下面「隱藏歷史文字」同一個斷點，兩者是同一組「窄螢幕頂欄瘦身」的調整，
     放在一起才不會日後改了一個忘了另一個。 */
  :root { --topbar-h: 56px; }

  /* 歷史按鈕只留圖示、不顯示「历史」文字。平板起就套用：這個寬度側欄已收起、
     導覽併進頂欄，同一行要放品牌、可滑動導覽、搜尋框與歷史鈕，文字省下的寬度
     留給導覽的可視區。
     按鈕本身是 flex column + justify-content:center，文字拿掉後圖示自動置中，
     不需要另外調整對齊。 */
  .tb-text-btn span { display: none; }

  .topbar-inner .tb-brand-mob { display: flex; }
  /* 平板（768~1199px）：導覽併入頂欄、放不下時橫向滑動。
     手機在下面的 767px 斷點會把它收起來、改回漢堡抽屜——
     窄到手機寬度時，這條導覽的可視區只剩一百多 px，一次看不到兩項，
     滑動反而比抽屜難用（tp11_sample 的分界也是 767px）。 */
  .topbar-inner .mob-nav-row  { display: flex; }

  /* 頂欄不再是透明疊圖，而是永遠實心 + 毛玻璃：窄螢幕沒有滿版 hero 撐在底下，
     透明會讓導覽文字直接壓在內容上看不清楚。 */
  .topbar,
  .topbar.is-scrolled {
    background-color: rgba(9, 11, 33, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: none;
  }

  /* 手機／平板 Hero 圖片顯示方式：實測後台上傳的橫幅圖是 1903×666（比例約 2.86），
     比桌機版位（10/3 ≈ 3.33）窄、但比手機版位（原本約 1.44）寬得多。原本沿用桌機的
     `background-size: cover`，在窄螢幕會為了填滿高度而把圖放大到兩倍寬，結果左右
     各裁掉一半以上，只看得到中間一小塊（使用者回報的「只看到一角」）。

     正確做法：讓「版位比例 = 圖片比例」，也就是容器高度跟著圖片原始比例縮放
     （寬度 ÷ 2.86），圖片就會剛好完整填滿、既不裁切也不留黑邊——縮的是容器高度，
     不是把圖裁掉。搭配 `contain` 當保險：萬一某部影片還沒上傳橫幅圖、退回直式海報
     （比例差很多）時，寧可縮小留邊也不要裁切，維持「圖片永遠完整顯示」這個原則。

     `background-size` 的兩個值分別對應兩層背景（真實圖片, load.gif 佔位圖）——
     只有第一層要 contain，佔位圖維持 auto 原始大小，否則載入中的 loading 動畫
     會被拉成整個版位寬。 */
  .hero-banner { aspect-ratio: 1903 / 666; }
  .swiper-slide > a.swiper-lazy {
    background-size: contain, auto;
    background-color: #12141c;
  }

  /* 窄螢幕的浮動按鈕：往內收、圖示略縮。
     ⚠️ 這組數值是**推導值，不是量測值**——參考站的 #sticky-block 只在桌機寬度
     量過（40px 寬容器、40×35 按鈕）。原本這裡寫的是 fdzys.com 的縮小規則，
     那是 tp11／tp14 的參考站，跟 iyf.tv 無關，已移除。
     .fab-btn-top-icon 也一併刪掉：回到頂部的圖示已改用 sprite 的 .mac-icon，
     那個 class 在 HTML 裡不存在了，留著只是一條永遠匹配不到元素的死規則。 */
  .fab-group { bottom: 20px; right: 14px; }
  .fab-btn { width: 36px; height: 32px; font-size: 19px; }
  .fab-inner { width: 36px; }
  /* 手機沒有「掃碼到手機看」的需求（本來就在手機上），這顆收起來。
     回到頂部仍然保留，功能沒有消失（§17.36）。 */
  .fab-btn--qr { display: none; }
  /* 觸控裝置沒有 hover，滑出提示沒有觸發途徑，收起來免得被合成 hover 卡住 */
  .fab-hint { display: none; }
  .fab-qr-popup { bottom: 62px; right: 14px; }

  /* 平板：定寬容器加回左右留白，避免貼邊（Hero 本身維持滿版全展開，對齊
     iyf.tv 的 Hero 在任何斷點都是左右到邊，不跟著這裡縮） */
  .content-block { padding-left: 16px; padding-right: 16px; }

  /* 平板／手機：排行榜側欄隱藏，主欄自然填滿整行 */
  .col-side { display: none; }

  /* 分類快速篩選面板：平板仍然顯示，只縮排。
     tp11 在這個斷點就整個隱藏，理由是「對齊 fdzys.com 只在桌機顯示」——
     但那是因為它在 tp11 是絕對定位壓在 Hero 圖上（窄螢幕會蓋住片名）；
     tp14 已經改成 Hero 下方的正常區塊，平板寬度顯示不會擋到任何東西，
     沒有必要跟著隱藏。手機才收起來（見 767px 斷點）。 */
  .hero-genre-panel { padding: 16px 16px 0; gap: 20px; }

  /* 平板欄數：桌機 5 欄降到 4 欄
     ⚠️ 這是推導值。iyf.tv 只在桌機寬度量過（5 欄、column-gap 24px），
     窄螢幕的欄數未實測；原本這裡寫的是 fdzys.com 的 6→4，那是 tp11／tp14 的
     參考站，跟本主題無關，已改成從本主題的 5 欄往下收
     （寬度公式 calc(25% - 20px)，本主題改用純 grid repeat(4,1fr) 達到同樣欄數） */
  .vod-row,
  .vod-grid,
  .play-vod-grid,
  .detail-vod-grid,
  .td-vod-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1023px) {
  .art-grid       { grid-template-columns: repeat(4, 1fr); }
  .topic-grid     { grid-template-columns: repeat(4, 1fr); }
  .site-ad--banner .site-ad-text span { display: none; }
}

@media (max-width: 767px) {
  /* 手機沿用上面 1199px 斷點設定的「版位比例 = 圖片比例」，這裡不再另外覆寫
     aspect-ratio；只要把桌機的固定 height 解除（改回 auto），版位高度才會交給
     aspect-ratio 依螢幕寬度自動換算。 */
  .hero-banner { height: auto; margin-top: 0; }
  .brand-name { display: none; }
  .content-block { padding: 0px 12px 4px; }
  /* 手機固定 3 欄（使用者明確要求，非 fdzys.com 本身的手機欄數——該站手機版實測是
     2 欄 `grid-template-columns:repeat(2,minmax(0,1fr))`，本主題依需求改成 3 欄，
     卡片文字/標籤尺寸仍對齊該站手機斷點的縮小比例） */
  .vod-row,
  .vod-grid,
  .play-vod-grid,
  .detail-vod-grid,
  .td-vod-grid { grid-template-columns: repeat(3, 1fr); gap: 10px 8px; }
  .art-grid       { grid-template-columns: repeat(2, 1fr); }
  .topic-grid     { grid-template-columns: repeat(2, 1fr); }
  .actor-row { grid-template-columns: repeat(4, 1fr); }
  /* 手機：頂欄留白與間距再縮一級（側欄隱藏在 1199px 斷點處理） */
  .topbar { padding: 0 14px; gap: 10px; }
  .topbar-inner { gap: 10px; }
  .topbar-right { gap: 10px; }

  /* 手機不用併入頂欄的滑動導覽，改回漢堡抽屜（分工同 tp11_sample）：
     手機寬度下導覽的可視區只剩一百多 px、一次看不到兩項，滑動比抽屜難用。
     品牌保留在頂欄——側欄在這個寬度是隱藏的，logo 只剩這一份。 */
  .topbar-inner .mob-nav-row { display: none; }
  /* 同樣要兩層選擇器（理由見 1199px 斷點內的說明）：.hamburger-btn 的基底
     display:none 定義在檔案更後面，單一 class 寫在這裡會被它整個蓋掉，
     實測手機下漢堡鈕算出來仍是 none、等於完全沒有導覽入口。 */
  .topbar-right .hamburger-btn { display: flex; }

  /* 手機：分類快速篩選面板收起來（chips 太多會換行成很高一塊、把內容推很遠）。
     ⚠️ 這裡隱藏的是「功能鉤子」（分類與類型的入口），但同一個功能在這個斷點
     仍有路徑可以到：頂欄第二行的 .mob-nav-row 就是完整的分類清單
     （見 §17.36 的判斷原則）。 */
  .hero-genre-panel { display: none; }

  /* 手機：常駐搜尋框收成一顆放大鏡（點擊開 search overlay） */
  .tb-search { display: none; }
  .tb-icon-btn { display: flex; }
}

/* ==========================================
   Section Lazy Reveal (Intersection Observer)
   ========================================== */
.content-block.will-observe {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.content-block.is-visible {
  opacity: 1;
  transform: none;
}

/* ===== 圖片載入完成後撤掉 load.gif 佔位背景 =====
   由 asset/js/img_loading.js 在圖片 load 事件後加上這個 class（換 src 需要重新
   載入時會拿掉，gif 恢復顯示）。詳細原因見該檔開頭註解：簡言之，background-clip
   預設是 border-box，背景會延伸到邊框底下，而 <img> 只填滿內容區，所以有邊框的
   縮圖容器會永遠露出一圈 gif 的淺灰底，在深色主題上就是一條亮邊。

   !important 是必要的：載入 gif 的規則寫在各自的容器選擇器上（例如
   .detail-hero-wrap .detail-poster，特異性 0,2,0），單靠這個 class（0,1,0）
   蓋不過去。這裡只關掉背景圖、不動底色，所以撤掉之後露出的是容器原本的底色。 */
.img-loaded { background-image: none !important; }

/* ==========================================
   觀看記錄下拉選單（對齊 zhuiying8.cc 的 .yk-history-dropdown）
   ------------------------------------------
   以下數值皆為連線量測參考站所得（hover 展開後讀 getComputedStyle）：
     容器 330px 寬、padding 16px 0、圓角 12px、底色 rgba(37,37,40,0.85)、
     邊框 1px rgba(255,255,255,0.14)、陰影 0 10px 40px rgba(0,0,0,0.6)、
     過場 opacity/transform 0.25s cubic-bezier(0.4,0,0.2,1)、收起時 translateY(-10px)
     標題列 padding 0 16px、高 20px、標題 14px/500
     項目 高 80px、padding 8px 16px、gap 12px、過場 background-color 0.2s
     縮圖 114x64、圓角 4px、底色 #222、object-fit: cover
     片名 13px/18px rgb(234,234,234)、副標 12px rgba(255,255,255,0.4)
     底部連結 margin 12px 16px 0、高 36px、14px、#ccc、置中

   與參考站的兩點差異（都是刻意的）：
   1. 定位基準：參考站的 .action-item-wrap 是 position:static，下拉其實是相對更外層
      的容器定位（量到的 left/right 換算不回 wrap 本身）。本主題的歷史按鈕貼在畫面
      右緣，改成相對 .tb-hist-wrap 定位並靠右對齊，才不會溢出視窗。
   2. 清單高度取 320px = 單項 80px × 4，剛好露出 4 筆完整項目、第 5 筆卡在邊界外
      （規範 §17.31：這個公式不要為了容器自己的 padding 加減）。參考站量到 340px，
      會露出半筆，本主題不沿用。 */
.tb-hist-wrap {
  position: relative;
}

.hist-dropdown {
  position: absolute;
  top: calc(100% - 4px);          /* 與按鈕略為重疊，游標從按鈕移到選單不會斷開 hover */
  right: -12px;
  width: 330px;
  padding: 16px 0;
  background-color: rgba(37, 37, 40, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 展開條件有兩個：滑鼠停留在整個 wrap 上（桌機），或 JS 補上 .is-open（點擊觸發，
   讓觸控裝置也用得到——觸控沒有 hover，只靠 :hover 會讓這個功能在手機上完全消失）。
   :hover 這條要加 (hover: hover) 保護，否則觸控瀏覽器合成的黏著 :hover 會讓選單
   點一下就卡住不收（同 §17.36 的思路）。 */
@media (hover: hover) {
  .tb-hist-wrap:hover .hist-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
.hist-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.hist-dropdown .history-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 20px;
  padding: 0 16px;
}
.hist-dropdown .history-title {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}
.hist-dropdown .history-list {
  max-height: 320px;              /* 單項 80px × 4 筆，見上方說明 */
  margin-top: 12px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.hist-dropdown .history-list::-webkit-scrollbar { width: 4px; }
.hist-dropdown .history-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
}

.hist-dropdown .history-item {
  display: flex;
  gap: 12px;
  height: 80px;
  padding: 8px 16px;
  transition: background-color 0.2s;
}
.hist-dropdown .history-item:hover { background-color: rgba(255, 255, 255, 0.06); }

.hist-dropdown .history-cover {
  flex-shrink: 0;
  width: 114px;
  height: 64px;
  overflow: hidden;
  border-radius: 4px;
  /* 佔位動畫依規範 §11.1；圖片載入後由 img_loading.js 撤掉背景圖 */
  background: #222 url("../img/load.gif") no-repeat center/cover;
}
.hist-dropdown .history-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hist-dropdown .history-info {
  min-width: 0;                   /* 沒有這行，底下的單行截斷不會生效 */
  overflow: hidden;
}
.hist-dropdown .item-title {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: rgb(234, 234, 234);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hist-dropdown .item-meta {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

.hist-dropdown .history-empty {
  padding: 24px 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
}

.hist-dropdown .history-more {
  display: block;
  height: 36px;
  margin: 12px 16px 0;
  font-size: 14px;
  line-height: 36px;
  color: #ccc;
  text-align: center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  transition: background-color 0.2s, color 0.2s;
}
.hist-dropdown .history-more:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* 窄螢幕：改成相對「視窗」定位，不再相對按鈕。
   原因：手機版的歷史按鈕不是頂欄最右邊那顆（漢堡才是），靠 right 對齊到按鈕會讓
   330px 寬的選單往左伸出畫面——實測 390px 視窗下左緣跑到 -47px，前面兩筆記錄的
   縮圖直接被切在畫面外。改用 position:fixed 搭配左右各 12px，寬度由視窗決定，
   不管按鈕排在哪個位置都不會溢出。
   .topbar 本身就是 position:fixed，所以子層用 fixed 定位不會有額外的疊層問題。 */
@media (max-width: 520px) {
  .hist-dropdown {
    position: fixed;
    top: var(--topbar-h);
    left: 12px;
    right: 12px;
    width: auto;
  }
  .hist-dropdown .history-cover { width: 96px; height: 54px; }
  .hist-dropdown .history-item { height: 70px; }
  .hist-dropdown .history-list { max-height: 280px; }   /* 單項 70px × 4 */
}

  /* ==========================================
   Hamburger Button (hidden on desktop)
   ========================================== */
.hamburger-btn {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: transparent; border: none;
  color: rgba(255,255,255,0.9); font-size: 22px;
  cursor: pointer; transition: color 0.2s, background 0.2s;
}
.hamburger-btn:hover { color: #fff; background: rgba(0,0,0,0.3); }

/* ==========================================
   Mobile Nav Drawer
   ========================================== */
.mob-nav-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 499;
}
.mob-nav-overlay.is-open { display: block; }

.mob-nav-drawer {
  position: fixed; top: 0; right: 0;
  width: 240px; height: 100dvh;
  background: var(--bg-topbar);
  z-index: 500;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(.4,0,.2,1);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
}
.mob-nav-drawer.is-open { transform: translateX(0); }
.mob-nav-drawer::-webkit-scrollbar { display: none; }

.mnd-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.mnd-title { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.8); }
.mnd-close {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: none;
  color: rgba(255,255,255,0.8); font-size: 18px; cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.mnd-close:hover { color: #fff; background: rgba(0,0,0,0.3); }

.mnd-nav { display: flex; flex-direction: column; padding: 8px 0; flex: 1; overflow-y: auto; min-height: 0; }

.mnd-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 20px;
  color: rgba(255,255,255,0.75); font-size: 15px;
  text-decoration: none; transition: color 0.2s, background 0.2s;
}
.mnd-item:hover { color: #fff; background: rgba(0,0,0,0.25); }
.mnd-item.is-active { color: var(--accent); }
.mnd-item .mac-icon { font-size: 20px; flex-shrink: 0; }


/* ==========================================
   手機／平板：併入頂欄的導覽列 + 頂欄品牌區
   ------------------------------------------
   ≤1199px 時側欄整條隱藏，頂欄變成「品牌 → 導覽 → 搜尋/歷史」一整行，
   導覽佔據中間的剩餘空間、放不下時在自己的區域內橫向捲動（捲軸隱藏）。

   項目樣式取自 zhuiying8.cc 手機版導覽實測：
     未選中 rgba(255,255,255,0.6) / 16px / 400
     選中   #fff / 19px / 700 ——沒有底線指示器，純粹放大加粗
   （該站是把導覽放在頂欄第二行、本主題依需求改為同一行併排，
     所以容器的排版方式不同，項目本身的字級與顏色沿用。）
   預設全部隱藏，只在 1199px 斷點打開（見上方 media query）。
   ========================================== */
.tb-brand-mob {
  display: none;
  align-items: center;
  flex-shrink: 0;
}

.mob-nav-row {
  display: none;
  /* 吃掉品牌與右側操作區之間的剩餘空間。min-width:0 是必要的：
     沒有它，flex 項目的最小尺寸是內容寬度，導覽會把右側的搜尋／歷史推出畫面，
     而不是自己內部捲動。 */
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  height: 100%;
  /* .topbar 是 pointer-events:none（讓底下的 hero 可以點），
     所以這一層要自己把可點性補回來，否則導覽整條點不到。 */
  pointer-events: auto;
}
.mob-nav-scroll {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  /* 隱藏捲軸就用這兩條（tp11_sample 的 .topbar-nav 也是這樣做）。
     ⚠️ 先前改用「padding-bottom 把原生捲軸推到可視區外、外層 overflow:hidden 裁掉」
     那套手法：捲軸確實看不見了，但那段 padding 同時把內容整個往上頂，
     導覽文字就不再對齊頂欄的垂直中線。純靠 scrollbar-width/::-webkit-scrollbar
     隱藏，容器高度維持 100%，align-items:center 才會真的置中。 */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mob-nav-scroll::-webkit-scrollbar { display: none; }

/* ---------- 「還可以往這邊滑」的視覺提示 ---------- */
/* 捲軸被隱藏之後，項目只是被容器邊界切掉，畫面上沒有任何線索說明還有更多內容，
   使用者不會知道這一列可以滑。這裡用邊緣漸隱來提示。

   用 mask-image 而不是疊一層漸層色塊：頂欄有 backdrop-filter 毛玻璃，用色塊去蓋
   必須跟頂欄底色完全一致才不會露出接縫，之後只要改動底色就會破功；mask 是直接讓
   內容自己淡出，不管底下是什麼背景都成立。

   左右兩側各自獨立：class 由 header.js 依實際捲動位置切換，滑到最右時右側的漸隱
   會消失——「漸隱不見了」本身就是在說「這個方向到底了」，比一直掛著更有資訊量。 */
.mob-nav-row.can-scroll-right .mob-nav-scroll {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent 100%);
}
.mob-nav-row.can-scroll-left .mob-nav-scroll {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 36px);
          mask-image: linear-gradient(to right, transparent 0, #000 36px);
}
.mob-nav-row.can-scroll-left.can-scroll-right .mob-nav-scroll {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
}

.mnr-item {
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  transition: color 0.2s;
}
.mnr-item.is-active {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
}

/* ---------- Hero 沒有資料時不要留一顆空的播放鈕 ---------- */
/* hero 的查詢帶了 level="1"（後台的「推薦等級」），該分類底下沒有影片被設為推薦時
   一部都撈不到，縮圖列是空的。此時 .hero-info 裡的標題／標籤／簡介都是空元素、
   不佔版面，但「播放」按鈕的文字與樣式寫死在模板裡，會留下一顆點了沒反應的按鈕
   （href 是空字串）。

   兩道規則並行，各自解決一半：

   (1) :has() —— CSS 直接判斷「這個 hero 裡有沒有縮圖」，在第一次繪製就生效，
       不會閃一下才消失。現代瀏覽器都支援（Chrome 105+／Safari 15.4+／Firefox 121+）。
   (2) .is-empty —— 由 hero.js 在確認沒有縮圖後補上，涵蓋不支援 :has() 的舊瀏覽器。
       這道會晚一步（要等 JS 執行），所以只當備援，不是主要手段。 */
.hero:not(:has(.hero-thumb)) .hero-play,
.hero.is-empty .hero-play {
  display: none;
}

/* ---------- 首頁排行區塊：一列四欄 ---------- */
/* 排行榜頁的 .rank-grid 是 3 欄（label_rank.css），首頁要一列放滿指定的四個分類，
   所以另掛一個修飾類，不去改共用的 .rank-grid——動它會連排行榜頁一起變。

   ⚠️ 選擇器刻意用兩層（.section .rank-grid--home，特異性 0,2,0）。
   首頁的載入順序是 main.css → label_rank.css，label_rank.css 裡的
   `.rank-grid { grid-template-columns: repeat(3, 1fr) }` 是單一 class（0,1,0）、
   而且在後面，單靠 `.rank-grid--home`（同為 0,1,0）會被它蓋掉（規範 §17.50）。

   響應式也要自己寫一份：既然靠特異性取勝，label_rank.css 那兩個斷點
   （900px 降 2 欄、700px 降 1 欄）同樣會輸給這裡，不補的話窄螢幕會卡在 4 欄。 */
.section .rank-grid--home {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) {
  .section .rank-grid--home { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .section .rank-grid--home { grid-template-columns: 1fr; gap: 12px; }
}

/* mac-icon sprite base */
.mac-icon{width:1em;height:1em;fill:currentColor;flex-shrink:0;}