/* ==========================================
   CSS Variables — 深黑色系（仿 zhuiying8.cc 追影風格）
   數值來源：連線量測 https://zhuiying8.cc/ 首頁／分類頁／影片詳情頁的
   getComputedStyle() 與 getBoundingClientRect() 真實值（非截圖猜測），
   互動行為（卡片 hover 浮層、Hero 交叉淡入）另以 Playwright 真實滑鼠操作驗證。
   對照表：
   --bg-base    ← body 的 rgb(21,22,24)
   --bg-deep    ← Hero 四層漸層的基準色 rgb(20,21,23)（比 body 略深）
   --bg-card    ← .card-cover 底色 rgb(26,27,29)
   --bg-elevated← 卡片 hover 浮層 .hover-popout 底色 rgb(31,33,35)
   --accent     ← .yk-tag / .hero-tags 主標籤文字色 rgb(0,128,255)
   --text-2     ← .card-title 的 rgba(255,255,255,.6)
   --border     ← 搜尋框等未選中元件的 rgba(255,255,255,.08)
   ========================================== */
:root {
  --bg-base:       #151618;
  --bg-deep:       #141517;
  --bg-topbar:     #141517;
  --bg-card:       #1A1B1D;
  --bg-elevated:   #1F2123;

  --accent:        #0080FF;
  --accent-hover:  #0068D6;
  --accent-light:  rgba(0, 128, 255, 0.15);
  --accent-soft:   rgba(0, 128, 255, 0.20);

  --accent-2:      #FF8A3D;
  --accent-2-alt:  #FFA463;

  --text-1:        #FFFFFF;
  --text-2:        rgba(255, 255, 255, 0.60);
  --text-3:        rgba(255, 255, 255, 0.50);
  --text-muted:    #999999;
  --text-title:    #EAEAEA;

  --fill-1:        rgba(255, 255, 255, 0.10);
  --fill-2:        rgba(255, 255, 255, 0.16);

  --border:        rgba(255, 255, 255, 0.08);
  --border-2:      rgba(255, 255, 255, 0.14);

  --score-hi:      #FF8A3D;
  --score-mid:     #0080FF;

  /* 全站 header 固定置頂開關：fixed=開啟（預設，永久固定在視口頂部，不受任何祖先層 overflow 影響）／
     static=關閉（回到一般文件流，隨頁面捲動）。
     參考來源 zhuiying8.cc 的 header 實測就是 position:fixed（見 §17.27 的建議做法）。 */
  --header-position: fixed;

  /* 版面骨架 — 全部取自 zhuiying8.cc 實測值：
     側欄 aside.sidebar 寬 144px（position:fixed，透明底直接壓在 body 深色上）；
     header.header 高 76px、padding 0 64px、內容 justify-content:flex-end（靠右）；
     main.main-content margin-left:144px，內部區塊左右 padding 64px。
     ⚠️ 參考站的 header 在頁面頂端是全透明的（rgba(20,21,23,0)），所以 body 沒有 padding-top ——
     每一頁的第一個區塊都是滿版 hero 型區塊，自己用 --hero-clear 的上內距讓開 header
     （實測詳情頁 .detail-hero 是 padding-top:100px）。
     這跟一般「header 吸頂 + body padding-top」的做法相反，改版時不要憑直覺補回 padding-top。
     捲動超過 --header-solid-at 之後，JS 會補上 .is-scrolled，header 才轉為實心
     （實測參考站門檻 window.scrollY > 1200，過場 0.35s）。 */
  --topbar-h:      76px;
  --sidebar-w:     144px;
  --gutter:        64px;
  --hero-h:        640px;
  --hero-clear:    100px;

  --header-solid-at: 1200px;

  --gap:           12px;
  --radius:        8px;
  --radius-sm:     4px;
  --radius-lg:     10px;
  --radius-pill:   100px;
  --shadow-panel:  0 10px 70px 0 #000;
  /* 參考站的內容區其實完全流動（沒有 max-width，只有 64px 左右留白）。
     這裡保留一個很大的上限值，讓超寬螢幕仍會置中，一般螢幕下等同完全流動。 */
  --content-max:   1920px;
}

/* ==========================================
  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-x: hidden;
  /* 只設定 overflow-x 而不設 overflow-y 時，CSS 規範會強制把 overflow-y 的計算值從
     visible 升級成 auto（因為兩軸不能一個 visible、一個非 visible），導致 html／body
     各自變成獨立的捲動容器，直接讓 header 的 position:sticky 失效（吸附不住）。
     明確補回 overflow-y: visible 抵銷這個自動升級，恢復成單一層級的正常文件捲動。 */
  overflow-y: visible;
}

body {
  font-family: "PingFang SC", "Microsoft YaHei", 微软雅黑, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  /* ⚠️ 刻意不設 padding-top（對齊參考來源 zhuiying8.cc 實測 body padding-top: 0）。
     本主題的 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;
  /* 預留圖示尺寸，避免載入過程整排文字被往旁邊推（全站 348 個圖示都受惠）。
     .mac-icon 是 CDN 載入的 web component：在腳本升級它之前，瀏覽器只當它是
     未知元素（寬高皆為 0），升級後才變成 1em × 1em。少了這兩行，每個圖示都會經歷
     「0 寬 → 24px」的變化，連同 flex gap 一起把後面的文字擠開，就是換頁時看到的
     那種「排版跳動」。這裡先寫死 1em × 1em（等同升級後的實際尺寸，本主題一律使用
     ph: 系列，圖示都是正方形，不會變形），讓版面從第一次繪製就固定下來。
     注意：這只解決「位置跳動」，圖示本身仍要等 CDN 取得資料才會畫出來——差別是
     它會安靜地出現在已經保留好的位置，而不是把旁邊的東西推開。 */
  width: 1em;
  height: 1em;
}

/* 通用單行／兩行截斷 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 — 固定左側欄 + 靠右頂欄（對齊 zhuiying8.cc 實測骨架）
   aside.sidebar：position:fixed，寬 144px，透明底直接壓在 body 深色上；
   main.main-content：margin-left:144px，內部區塊左右 padding 64px。
   ========================================== */
.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 — 固定左側導覽（144px）
   實測值：padding 20px 0；logo 112x24、margin 4px 0 16px 32px；
   nav-item 高 46px、font-size 16px、padding 12px 10px 12px 32px、margin-bottom 2px；
   圖示 22x22 + margin-right 5px；未選用＝線框圖示、選用中＝實心圖示（見 widget/type_icon）。
   ========================================== */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  /* z-index 必須高於 .topbar（2000）。
     topbar 是橫跨整個畫面寬度的（left:0; right:0），包含側欄佔的那 144px；
     捲動超過門檻後它的底色轉為 rgba(20,21,23,0.95)，就整片蓋在側欄頂端的 logo 上，
     使用者看到的現象是「header 一變黑底，logo 就不見了」。

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

     為什麼是抬整個側欄、而不是只抬 .sb-brand：
     .sidebar 是 position:fixed，本身就會建立堆疊脈絡，子元素的 z-index 只在它內部
     比大小，無論給 .sb-brand 多大的值都跳不出去，只能抬 .sidebar 這一層。

     副作用已確認可接受：夾在 1006 與 2000 之間的只有 .scroll-btn（輪播箭頭，1500）。
     左側箭頭的框是 x 120~184，與側欄（0~144）有 24px 重疊，抬升後該處改由側欄的
     導覽項目蓋在箭頭上。實測截圖箭頭仍完整可見（側欄本身沒有底色，只有文字與圖示
     是不透明的），沒有影響操作。 */
  z-index: 2001;
  width: var(--sidebar-w);
  height: 100%;
  padding: 20px 0;
  /* 參考站側欄沒有自己的底色／邊框／陰影，直接壓在 body 上 */
  background: transparent;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }

.sb-brand {
  display: block;
  width: 112px;
  height: 24px;
  margin: 4px 0 16px 32px;
}
/* logo 來源可能是後台上傳的動態欄位（長寬比不固定），固定高度 + contain 才不會被裁切 */
.brand-logo-img {
  height: 24px;
  width: auto;
  max-width: 112px;
  object-fit: contain;
}

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

.sn-item {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 12px 10px 12px 32px;
  margin-bottom: 2px;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-2);
  white-space: nowrap;
  transition: color 0.2s ease-in-out;
}
.sn-item .mac-icon {
  width: 22px;
  height: 22px;
  font-size: 22px;
  margin-right: 5px;
  flex-shrink: 0;
}
.sn-item:hover { color: var(--text-1); }
.sn-item.is-active { color: var(--text-1); }

/* ==========================================
   Topbar — 透明起始、靠右對齊、捲動後轉實心
   實測 zhuiying8.cc header.header：position:fixed、高 76px、padding 0 64px、
   justify-content:flex-end、gap 24px、頂端 background-color rgba(20,21,23,0)；
   捲動超過 800px 由 JS 補上 scrolled class → rgba(20,21,23,0.95)，過場 0.35s。
   ⚠️ 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-end;
  padding: 0 var(--gutter);
  gap: 24px;
  background-color: rgba(20, 21, 23, 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(20, 21, 23, 0.95);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

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

/* Right actions */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
  height: 100%;
}

/* 頂欄圓形圖示鈕（歷史記錄／登入／搜尋切換）——對齊參考站右側那排操作鈕 */
.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: 40px;
  height: 40px;
  border-radius: 50%;
  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; }

/* 常駐搜尋框 — 對齊 zhuiying8.cc 實測 .search_search_input_box：
   315x35、border-radius 100px、底 rgba(255,255,255,.08)、
   border 1px solid rgba(255,255,255,.02)、padding 0 12px，
   右側是「｜ 搜索」（分隔線 + 純文字送出鈕），不是放大鏡圖示。 */
.tb-search {
  display: flex;
  align-items: center;
  height: 35px;
  width: 315px;
  padding: 0 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.02);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.tb-search #searchInputTop {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--text-1);
  font-size: 14px;
}
.tb-search #searchInputTop::placeholder { color: var(--text-3); }
.tb-search-sep {
  color: rgba(255,255,255,0.25);
  font-size: 14px;
  padding: 0 8px 0 4px;
  flex-shrink: 0;
  user-select: none;
}
.tb-search-submit {
  flex-shrink: 0;
  color: var(--text-1);
  font-size: 14px;
  white-space: nowrap;
  transition: color 0.2s;
}
.tb-search-submit:hover { color: var(--accent); }

/* 圖示按鈕（「观看记录」）— 對齊 zhuiying8.cc 實測 .action-item
   常態：色 rgb(170,170,170)、圖示 24x24、文字 12px/400、line-height 20px、
         圖示與文字之間沒有間距（24 + 20 = 按鈕高 44px），文字「常駐顯示」。
   hover：只換 color → #fff，其餘一律不動（不變色調、不位移、不改高度）。

   ⚠️ 這裡刻意推翻先前的做法。舊版是照另一個參考站（fdzys.com）做的
   「平常只露圖示、hover 才把文字展開並轉成主色藍」，實測本主題 hover 時按鈕會從
   32px 長到 52px——那是會把整條頂欄撐開的版面變化，跟參考站「只是亮起來」差很多。
   文字改成常駐之後，就不再有「圖示位移 + 文字出現」這組需要互相避讓的動畫，
   §17.38 那個「兩個各自獨立的絕對座標可能疊在一起」的風險也一併消失了。

   width 用 auto + min-width 而不是寫死 24px：現在只有歷史這一顆用這個 class，
   但下方還有 .user-dd-wrap .tb-text-btn .user-dd-label 這條規則，代表這個 class
   預期也會用在標籤較長的按鈕上，寫死寬度會讓那種情況被裁掉。
   auto 在 row 方向的父容器裡會收縮到內容寬度，歷史這顆算出來仍然是 24px。 */
.tb-text-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 24px;
  height: 44px;
  color: rgb(170, 170, 170);
  flex-shrink: 0;
  /* 參考站的 transition 只寫了 opacity/transform，沒有涵蓋 color，所以它的變白是瞬間的。
     這裡補上 color 0.2s 讓它是漸亮而不是硬切——唯一一處刻意與量測值不同的地方。 */
  transition: color 0.2s;
}
.tb-text-btn .mac-icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
}
.tb-text-btn span {
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  white-space: nowrap;
}
.tb-text-btn:hover { color: #fff; }

.tb-login-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  height: 40px;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 700;
  transition: background 0.2s;
  flex-shrink: 0;
}
.tb-login-btn .mac-icon { font-size: 16px; }
.tb-login-btn:hover { background: var(--accent-hover); }

/* ==========================================
   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 — 對齊 zhuiying8.cc 實測 .hero-container 結構
   骨架：.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; }

/* 三層漸層蒙版 — 基準色是 --bg-deep（實測 rgb(20,21,23)，比 body 略深） */
.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(20, 21, 23, 0));
}
.hero-layer-left {
  top: 0; bottom: 0; left: -3px;
  width: 468px;
  z-index: 2;
  background: linear-gradient(270deg, rgba(20, 21, 23, 0), var(--bg-deep));
}
.hero-layer-bottom {
  left: 0; right: 0; bottom: -1px;
  height: 223px;
  z-index: 1;
  background: linear-gradient(rgba(20, 21, 23, 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 縮圖列與首頁各分類區塊共用
   ⚠️ 這裡有一個關鍵技巧：捲動容器同時是「卡片 hover 詳情浮層」的父層，
   而 overflow-x:auto 會連垂直方向一起裁切，512x514 的浮層會被切掉。
   解法是「上下各加 150px 內距、再用等量負外距把版面拉回來」——
   裁切框因此往上下各擴張 150px（浮層有地方溢出），但實際佔位完全不變。
   水平方向仍然會裁，所以浮層另外需要 .pop-left / .pop-right 兩種對齊變體
   把自己壓回容器內（見 VOD Card 區塊）。兩者是配套的，只做一個會露餡。
   ========================================== */
.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: 150px var(--gutter);
  margin-top: -150px;
  margin-bottom: -150px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.video-track::-webkit-scrollbar { display: none; }

/* 左右捲動箭頭：不是實心方塊，而是往內淡出的漸層帶 */
.scroll-btn {
  position: absolute;
  top: 120px;
  width: var(--gutter);
  height: calc(100% - 240px);
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #ccc;
  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 由 JS 切換） */
.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(21,22,24,1) 40%, rgba(21,22,24,0.7) 70%, transparent 100%);
}
.scroll-btn-right {
  right: calc(var(--gutter) * -1);
  background: linear-gradient(to left, rgba(21,22,24,1) 40%, rgba(21,22,24,0.7) 70%, transparent 100%);
}
/* Hero 縮圖列沒有那 150px 的撐開區，箭頭改成幾乎滿高 */
.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: 150px 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 — 首頁／分類頁的橫向捲動內容區塊（對齊 zhuiying8.cc .section）
   標題列的「查看更多」平常只露一個箭頭，hover 整個標題列時文字才向右展開。
   ========================================== */
.section {
  position: relative;
  padding: 0 var(--gutter) 30px;
}

.section-header {
  display: flex;
  align-items: center;
  width: max-content;
  margin-bottom: 16px;
  position: relative;
  z-index: 10;
  cursor: pointer;
}
/* ⚠️ .section-title 全站只能有這一份定義。
   先前這裡與下方「Content Block」區塊各有一份同名規則，後者會整個覆蓋前者，
   造成首頁標題實際吃到的是舊主題的字重（400）而不是這裡寫的 500——
   同名 class 重複定義是那種「兩邊各自看起來都對、合起來卻不是你以為的那個」的坑。
   這份定義同時服務兩種結構：tp14 的 .section-header（純文字標題）
   與 tp11 沿用下來的 .section-hd（標題前面多一個圖示），所以保留 flex + gap。 */
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  color: #f1f1f1;
  white-space: nowrap;
}
.title-more {
  display: flex;
  align-items: center;
  height: 22px;
  margin-left: 10px;
  padding-right: 6px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  transition: color 0.3s;
}
.more-label {
  max-width: 0;
  opacity: 0;
  transform: translateX(-15px);
  white-space: nowrap;
  line-height: 22px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.more-arrow {
  font-size: 16px;
  line-height: 22px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.section-header:hover .title-more { color: rgba(255, 255, 255, 0.6); }
.section-header:hover .more-label {
  max-width: 100px;
  opacity: 1;
  transform: translateX(0);
  margin-right: 6px;
}
.section-header:hover .more-arrow { transform: translateX(4px); }

@media (max-width: 1199px) {
  .section { padding: 0 16px 24px; }
  .section-header { margin-bottom: 10px; }
  .section-title { font-size: 18px; }
}

/* ==========================================
   Content Block — 內容區塊容器（1200px 定寬）
   ========================================== */
.content-block {
  /* 左右一定要有 gutter：這是定寬置中容器（max-width + margin auto），
     只有「視窗寬度 > --content-max」時才會自然置中留白；一般螢幕寬度都小於它，
     容器會直接撐滿並貼齊螢幕邊緣。實測 1440px 下最右一欄卡片右緣正好落在 1440，
     完全沒有留白——桌機與手機各自有斷點覆寫時很容易漏掉中間這段寬度。
     數值對齊 .section 的 --gutter，讓兩種區塊容器的內容對齊在同一條線上。 */
  padding: 0px var(--gutter) 4px;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

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

/* 標題前的圖示（只有沿用 tp11 結構的子頁會有，首頁的 .section-header 是純文字標題） */
.section-title-icon {
  color: var(--accent);
  font-size: 20px;
  display: flex;
}

/* 「更多」連結
   子頁沿用 tp11 的 .section-hd / .section-more 結構（資料塊擺放不動），
   但外觀改成跟首頁 .title-more 一致的樸素文字＋箭頭：
   tp14 的參考來源沒有「膠囊底色按鈕」這種更多連結，整站統一成同一種比較不突兀。 */
.section-more {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.2s;
}
.section-more .mac-icon {
  font-size: 14px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.section-more:hover {
  background: none;
  color: rgba(255, 255, 255, 0.6);
}
.section-more:hover .mac-icon { transform: translateX(4px); }

/* ==========================================
   兩欄版面（仿 .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
   ========================================== */
/* .vod-grid／.play-vod-grid／.detail-vod-grid／.td-vod-grid 是其他頁面
   （vod/show、vod/down、module/type_has_sub、module/type_no_sub、vod/play 的
   「关联系列/相关推荐」、vod/detail 的「关联视频/猜你喜欢/相关推荐」、
   topic/detail 的專題影片列表）用來包 {maccms:vod}+widget/vod_card 迴圈的容器
   class 名稱，跟 .vod-row 是同一種用途（純粹是不同頁面各自沿用了不同名稱），
   先前完全沒有對應的 CSS 規則（純看 HTML 看不出來，這幾頁的卡片列表因此一直沒有
   grid 排版，只是照 normal flow 一個個往下疊）。這幾頁都是全寬版面（沒有側欄），
   跟首頁/篩選頁一樣可以直接套用同一套 6/4/3 欄設定。全部共用同一套規則，之後任何
   一個要調整欄數，其他也會一起變動，不用各自維護一份。 */
.vod-row,
.vod-grid,
.play-vod-grid,
.detail-vod-grid,
.td-vod-grid,
.plot-related-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px 18px;
}

/* 卡片本體（widget/vod_card）預設是給橫向捲動列用的，帶了
   `flex: 0 0 calc(...)` 這種依「一排幾張」算出來的固定寬度。
   放進 grid 容器時欄寬改由 grid-template-columns 決定，這裡把 flex 歸零，
   避免兩套寬度來源打架（grid 本來就會忽略 flex，但寫明確一點，
   之後若有人把容器改回 flex 排版也不會突然變成 9 張一排）。 */
.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%;
}

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

/* ==========================================
   VOD Card — 對齊 zhuiying8.cc 實測 .card 結構
   靜止時只有：封面（左上角豆瓣評分、右下角畫質/集數）+ 單行片名。
   hover 時從卡片中心／左緣／右緣放大彈出一張 512px 寬的詳情浮層。

   ⚠️ 卡片本身尺寸全程不變，放大的是另外疊上去的 .hover-popout，
   所以不會影響 grid 欄寬／捲動列的排列計算。
   ========================================== */
.card {
  /* 桌機一列顯示 8 張（原本 6 張）。
     公式：(100% - gap × (欄數-1)) ÷ 欄數——欄數改幾就要同步改兩個數字，
     只改除數會讓總寬多算一個 gap、最右邊那張被切掉。 */
  flex: 0 0 calc((100% - (var(--gap) * 7)) / 8);
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
/* hover 時把整張卡拉到鄰居之上，浮層才不會被下一張卡片蓋住
   （浮層自己是 1005，這裡的 1002 是給卡片本體用的） */
.card:hover { z-index: 1002; }

.card-link {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.card-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4.5;
  margin-bottom: 8px;
  border-radius: 6px;
  overflow: hidden;
  /* 圖片載入完成前顯示 loading 動畫，不允許純色空白塊（CLAUDE.md §11.1 做法 A） */
  background: var(--bg-card) url("../img/load.gif") no-repeat center/cover;
}
.card-cover img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* 圖片是淡入的，不是硬跳出來 */
  animation: imgFadeIn 0.5s ease-in-out forwards;
}
@keyframes imgFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 左上角豆瓣評分（兩行：來源 + 分數） */
.score-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.score-badge .score-source {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
}
.score-badge .score-num {
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-2);
}

/* 右下角畫質／集數 */
.card-status {
  position: absolute;
  bottom: 6px;
  right: 6px;
  z-index: 5;
  padding: 0 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 2px #000;
}

.card-title {
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card:hover .card-title { color: var(--text-1); }

/* ===== 每排結尾的「查看更多」卡 =====
   ⚠️ 這張卡在模板裡是輸出在「影片迴圈內部、只在第一圈」的位置，
   也就是 DOM 順序上它排在第一張影片卡的後面，不是最後。
   靠這個 order 把它推到整列最後（其他卡片都是預設的 order:0）。

   為什麼要這樣繞：如果把它寫在迴圈外面，就得靠「迴圈內累加計數器、迴圈結束後判斷
   有沒有資料」來決定要不要輸出，那要依賴累加值在迴圈結束後仍在同一個作用域——
   本專案沒有這樣用過的先例，而且萬一不成立，失敗方向是「卡片永遠不顯示」且不會報錯。
   放進迴圈內就完全不需要那個假設：某個分類一部影片都沒有時迴圈一次都不會跑，
   卡片自然不存在，不會留一張孤零零的卡掛在空區塊裡。

   ⚠️ 因此這張卡只能用在 flex 排版的橫向捲動列（.video-track）裡。
   若日後把它放進 grid 容器，order 在 grid 同樣有效，但要確認該容器沒有
   grid-auto-flow: dense 之類會改變排列的設定。 */
.card-more { order: 1; }

.card-more-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4.5;
  margin-bottom: 8px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background-color: rgba(255, 255, 255, 0.05);
  color: #888;
  font-size: 14px;
  transition: background-color 0.3s, color 0.3s;
}
.card-more-cover .mac-icon {
  font-size: 36px;
  transition: transform 0.3s;
}
.card-more:hover .card-more-cover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--accent);
}
.card-more:hover .card-more-cover .mac-icon { transform: translateX(5px); }

/* ==========================================
   卡片 hover 詳情浮層（.hover-popout）
   實測規格：512px 寬、底色 #1F2123、圓角 10px、陰影 0 10px 70px #000，
   進場 scale(0.6667) → 1，0.25s cubic-bezier(.25,1,.5,1)，**delay 0.15s**
   （hover 意圖延遲，滑鼠只是滑過去不會亂彈）。

   三種對齊變體，由 vod_card.js 依卡片在容器內的位置決定：
     預設（中間）：top/left 50% + translate(-50%,-50%)，從中心放大
     .pop-left   ：left:0，從左緣放大（最左側卡片，避免往左溢出被裁）
     .pop-right  ：right:0，從右緣放大（最右側卡片，避免往右溢出被裁）
   垂直方向的裁切問題由捲動列的「150px 內距 + 等量負外距」解決（見 .video-track）。
   ========================================== */
.hover-popout {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1005;
  width: 512px;
  height: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
  transform: translate(-50%, -50%) scale(0.6667);
  transform-origin: center center;
  -webkit-font-smoothing: antialiased;
}
.hover-popout.pop-left {
  left: 0;
  transform: translate(0, -50%) scale(0.6667);
  transform-origin: left center;
}
.hover-popout.pop-right {
  left: auto;
  right: 0;
  transform: translate(0, -50%) scale(0.6667);
  transform-origin: right center;
}

.card:hover .hover-popout {
  display: block;
  visibility: visible;
  pointer-events: auto;
  animation: popoutIn 0.25s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 0.15s;
}
.card:hover .hover-popout.pop-left  { animation-name: popoutInLeft; }
.card:hover .hover-popout.pop-right { animation-name: popoutInRight; }

@keyframes popoutIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.6667); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes popoutInLeft {
  from { opacity: 0; transform: translate(0, -50%) scale(0.6667); }
  to   { opacity: 1; transform: translate(0, -50%) scale(1); }
}
@keyframes popoutInRight {
  from { opacity: 0; transform: translate(0, -50%) scale(0.6667); }
  to   { opacity: 1; transform: translate(0, -50%) scale(1); }
}

.popout-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-elevated);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

/* 橫式劇照（512x289 ≈ 16:9） */
.popout-cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 512 / 289;
  overflow: hidden;
  background: var(--bg-card) url("../img/load.gif") no-repeat center/cover;
}
.popout-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 底部融色漸層：收尾必須「完全不透明」，留透明度遇到底部偏亮的劇照會透出來（§17.47）。
   bottom:-1px 是為了吃掉縮放造成的次像素縫隙。 */
.popout-cover-shadow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 115px;
  background: linear-gradient(rgba(31, 33, 35, 0), var(--bg-elevated));
}

/* 片名壓在劇照下緣上 */
.popout-title-wrap {
  position: relative;
  padding: 0 24px;
  margin-top: -50px;
}
.popout-title {
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  color: var(--text-title);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popout-mix { padding: 18px 24px 0; }

.popout-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow: hidden;
}
.popout-tag {
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 22px;
  white-space: nowrap;
}
.popout-tag--main  { color: var(--accent); background: var(--accent-soft); }
.popout-tag--grey  { color: rgba(255,255,255,0.9); background: var(--fill-1); }
.popout-tag--plain {
  color: rgba(255,255,255,0.5);
  background: none;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 演員 + 劇情摘要，固定兩行
   ⚠️ 模板端輸出完整內容、不疊字元數截斷，裁切點與省略號一律交給 CSS 決定（§17.34） */
.popout-info {
  margin-top: 13px;
  font-size: 14px;
  line-height: 22px;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.popout-score {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 14px 24px 0;
  font-size: 12px;
  color: var(--text-1);
}
.popout-score .mac-icon { font-size: 14px; color: var(--accent-2); }
.popout-score .score-num {
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-2);
}

/* 底部操作列：圓形按鈕 42x42、間距 12 */
.popout-bottom {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 86px;
  padding: 0 24px;
}
.popout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--fill-1);
  color: var(--text-1);
  font-size: 20px;
  transition: background 0.2s, color 0.2s;
}
.popout-btn:hover { background: var(--accent); color: #fff; }
/* 第一顆（播放）用主色實心，跟其餘操作鈕區分 */
.popout-btn:first-child { background: var(--accent); }
.popout-btn:first-child:hover { background: var(--accent-hover); }

/* ===== 卡片／浮層 響應式 =====
   對齊參考站：窄螢幕先把浮層整體縮小（zoom），手機直接不顯示浮層
   ——手機沒有 hover，浮層沒有觸發途徑，留著只會佔資源。
   卡片本身仍然是連結，點擊照樣進詳情頁，功能沒有消失（§17.36）。
   
   桌面版 + 平板版（預設）6 個卡片一次可見；768px 以下 3 個 */
@media (max-width: 768px) {
  /* 顯示 3 個卡片 + 間隔 */
  .card { flex: 0 0 calc((100% - (var(--gap) * 2)) / 3); }
  .card-title { font-size: 13px; line-height: 18px; }
  .card-status { font-size: 10px; }
  .score-badge .score-num { font-size: 12px; }
}

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

   兩道條件並行，兩者都必要：

   (1) 寬度 ≤1199px —— 本主題「平板＋手機」的既有門檻（同一個斷點側欄收起、
       底部 tabbar 出現、topbar 轉實心），語意一致。這道也涵蓋「桌機把視窗縮窄」
       的情況，使用者用瀏覽器裝置模擬檢視時一定看得到效果。

   (2) hover:none / pointer:coarse —— 依裝置實際能力判斷，不看寬度。
       橫向大平板可能寬過 1199px，光靠寬度會漏掉；這道補上。

   浮層原本只在 ≤768px 關閉，769~1199px 的平板仍會觸發，這次一併涵蓋。
   卡片本身仍是連結，點擊照樣進詳情頁，功能沒有消失（§17.36）。 */
@media (max-width: 1199px) {
  .hover-popout { display: none !important; }
}
@media (hover: none), (pointer: coarse) {
  .hover-popout { display: none !important; }
}

/* ==========================================
   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;
}

/* ==========================================
   漂浮功能按鈕 — 對齊 fdzys.com .side-top 實測值：
   40px 圓形、純色中性灰 rgb(62,62,62)、白色圖示、無陰影，垂直堆疊固定在右下角
   ========================================== */
/* 對齊 fdzys.com 實測 .side-top／.svg-box：60x60 圓形按鈕、圖示 35px、
   彼此間距 20px、純色背景 #3E3E3E，hover 只變背景色+文字色，沒有位移動畫。 */
.fab-group {
  position: fixed;
  bottom: 60px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
  z-index: 900;
}
.fab-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #3E3E3E;
  border: none;
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 35px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.fab-btn:hover {
  background: var(--accent);
  color: #fff;
}
/* 回到頂部圖示本身在參考網站是「箭頭+TOP 字」合成的單一字型字符（從真實字型檔
   萃取出向量外框做成靜態 SVG，見 footer.html），跟其他兩顆按鈕一樣用 35x35 的
   視覺區塊（SVG 原始比例是窄長形，寬度會依 SVG 預設的等比縮放自動置中，不會被拉伸）。 */
.fab-btn--top {
  opacity: 0;
  pointer-events: none;
}
.fab-btn-top-icon { width: 35px; height: 35px; color: inherit; }
.fab-btn--top.is-visible { opacity: 1; pointer-events: auto; }

/* QR 碼彈窗 */
.fab-qr-popup {
  position: fixed;
  bottom: 160px;
  right: 20px;
  background: #fff;
  /* 這個彈窗刻意用白底（QR code 需要白底才好掃），所以裡面的文字與邊框
     不能沿用主題那組色票——`--text-3` 是 rgba(255,255,255,0.46)、
     `--border` 是 rgba(255,255,255,0.08)，都是為深色底設計的淺色，
     套在白底上等於隱形（實測文字與背景都是白的，整行看不見）。
     這裡改用固定的深色值，跟著白底走。 */
  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(20, 21, 23, 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;
  }

  /* 對齊 fdzys.com 實測 @media(max-width:768px) 的縮小規則：按鈕縮到 40x40、
     圖示縮到 20px（本主題斷點跟參考來源不完全同一個數字，但縮小比例套用同一組值） */
  .fab-group { bottom: 76px; right: 14px; gap: 12px; }
  .fab-btn { width: 40px; height: 40px; font-size: 20px; }
  .fab-btn-top-icon { width: 20px; height: 20px; }
  .fab-btn--qr { display: none; }
  .fab-qr-popup { bottom: 146px; right: 14px; }

  /* 平板：定寬容器加回左右留白，避免貼邊（Hero 本身維持滿版全展開，對齊
     fdzys.com 在任何斷點都是左右到邊的實測行為，不跟著這裡縮） */
  .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; }

  /* 對齊 fdzys.com 實測 @media(max-width:1024px) 的欄數：6 欄降到 4 欄
     （寬度公式 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;}