/* ==========================================
   CSS Variables — 深黑色系藍橙主調（仿 fdzys.com 饭搭子影视風格）
   數值來源：連線量測 https://fdzys.com/ 首頁／分類頁／篩選頁／播放頁的
   getComputedStyle() 真實色值（非截圖猜測）：
   --bg-base 對應 html 的 rgb(32,36,45)；--accent 對應 .nav.active 的
   rgb(40,98,229)；--bg-card/--bg-elevated 對應頁面實測出現頻率最高的
   兩組深色面板色 rgb(40,48,63) 與 rgba(51,65,85,.8)；--border 對應篩選
   pill 未選中狀態的 rgba(255,255,255,.08)。
   ========================================== */
:root {
  --bg-base:       #20242D;
  --bg-topbar:     #191919;
  --bg-deep:       #0E1422;
  --bg-card:       #28303F;
  --bg-elevated:   #334155;

  --accent:        #2862E5;
  --accent-hover:  #1F4FC7;
  --accent-light:  rgba(78, 161, 255, 0.14);

  --accent-2:      #E8712F;
  --accent-2-alt:  #F59841;

  --text-1:        #F5F6F8;
  --text-2:        rgba(255, 255, 255, 0.68);
  --text-3:        rgba(255, 255, 255, 0.46);

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

  --score-hi:      #E8712F;
  --score-mid:     #2862E5;

  /* 全站 header 固定置頂開關：fixed=開啟（預設，永久固定在視口頂部，不受任何祖先層 overflow 影響）／
     static=關閉（回到一般文件流，隨頁面捲動）。
     參考 template/refer/conch_2（asset/css/hlstyle.css .head_box）與線上站 2.nqxyvqd.xyz 的實際做法：
     吸頂 header 一律用 position:fixed（而非 sticky）+ body padding-top 撐開版面，
     這樣可以徹底避開 sticky 對祖先 overflow/transform 極度敏感、容易悄悄失效的問題（見 §17.26）。 */
  --header-position: fixed;

  --topbar-h:      68px;
  --radius:        8px;
  --radius-sm:     5px;
  --radius-pill:   20px;
  --shadow-panel:  0 6px 20px rgba(0,0,0,0.45);
  --content-max:   1560px;
}

/* ==========================================
  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: "Microsoft YaHei", "PingFang SC", SimSun, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  /* .topbar 用 position:fixed 吸頂，會整個脫離文件流，這裡補一個等同 header 高度的
     padding-top 撐開版面，避免頁面內容一開始就被 header 蓋住。
     若把 --header-position 切回 static，這裡也要跟著改成 padding-top: 0。 */
  padding-top: var(--topbar-h);
}

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; }

iconify-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  /* 預留圖示尺寸，避免載入過程整排文字被往旁邊推（全站 348 個圖示都受惠）。
     iconify-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 — 無 Sidebar，純頂部導覽
   ========================================== */
.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);
}

/* ==========================================
   Topbar — 純色深色 68px（對齊 fdzys.com .myui-header__top 實測 rgb(25,25,25)）
   ========================================== */
.topbar {
  position: var(--header-position);
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 200;
  height: var(--topbar-h);
  /* 對齊 fdzys.com .myui-header__top 實測值：純色 rgb(25,25,25)，非半透明疊圖 */
  background: var(--bg-topbar);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.topbar-inner {
  display: flex;
  align-items: center;
  height: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 20px;
  gap: 16px;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Logo */
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
  text-decoration: none;
}
.brand-logo-img {
  height: 34px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  flex-shrink: 0;
}
.brand-name {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 全部分类：常駐入口，任何斷點都顯示，點擊開啟 mob-nav-drawer 完整分類清單 */
.tb-allcat-btn {
  /* 先隱藏「全部分類」常駐入口，需要時把 display 改回 inline-flex 即可恢復 */
  display: none;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.12);
  border: none;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s;
}
.tb-allcat-btn:hover { background: rgba(255,255,255,0.22); }
.tb-allcat-btn iconify-icon { font-size: 16px; }

/* Horizontal nav */
.topbar-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
}
.topbar-nav::-webkit-scrollbar { display: none; }

.tn-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--radius);
  /* 對齊 fdzys.com 實測 .menu .nav：文字 16px/600、圖示 24px（原本 15px/500 +
     18px 圖示比實測小一號，看起來會偏小） */
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s ease-in-out, color 0.2s;
}
.tn-item iconify-icon { font-size: 24px; }
.tn-item:hover {
  background-color: var(--accent);
  color: #fff;
}
.tn-item.is-active {
  background-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* "更多" dropdown — tablet nav overflow */
.tn-more-wrap {
  position: relative;
  display: none;
  flex-shrink: 0;
  height: 100%;
}
.tn-more-btn { gap: 3px; }
.tn-more-caret {
  font-size: 11px;
  transition: transform 0.2s;
}
.tn-more-btn[aria-expanded="true"] .tn-more-caret { transform: rotate(180deg); }
.tn-more-menu {
  display: none;
  position: fixed;  /* fixed 繞開所有上層 overflow 限制 */
  min-width: 120px;
  background: var(--bg-topbar);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  z-index: 9999;
  padding: 4px 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.tn-more-menu.is-open { display: block; }
.tn-more-menu .tn-item {
  display: flex;
  height: auto;
  padding: 9px 16px;
  width: 100%;
  color: rgba(255,255,255,0.85);
}

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

.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; }

/* 常駐搜尋框 — 對齊 fdzys.com 實測 .search-field：無邊框膠囊、bg rgba(255,255,255,.12)、
   radius 20px、搜尋圖示在右側（.tb-search-icon 在 HTML 裡排在 input 後面），
   完全沒有 focus 邊框變化（實測 :focus 前後樣式一致，故不加 focus-within 高亮）。 */
.tb-search {
  display: flex;
  align-items: center;
  height: 40px;
  width: 260px;
  padding: 0 45px 0 16px;
  margin-right: 6px;
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  position: relative;
}
.tb-search-icon {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: #aaa;
  font-size: 16px;
  flex-shrink: 0;
  pointer-events: none;
}
.tb-search #searchInputTop {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-size: 13px;
}
.tb-search #searchInputTop::placeholder { color: #999; }

/* 圖示按鈕（如「觀看記錄」）— 對齊 fdzys.com 實測 .icons／.iconfont／.iconName：
   預設只顯示圖示（淡灰色），hover 時圖示上移＋變主色藍、下方淡出顯示文字標籤，
   不是平常就圖示+文字並排常駐顯示。
   文字改用「正常文件流＋height 展開」而不是 position:absolute+bottom 硬寫死像素：
   fdzys.com 用 margin-top:-20px（圖示）＋bottom:10px（文字）是兩個各自獨立的絕對定位
   數值，是針對他們自己那個剛好 50px 高的容器算出來的；直接照抄同樣的數字到本主題
   （容器高度用 --topbar-h 決定，不一定剛好 50px），一旦容器實際高度跟 50px 有落差，
   兩個各自獨立的絕對座標就可能互相疊到一起（圖示往上移得比預期多／文字往上頂得比
   預期高）。改成文字用正常文件流（不脫離文件流），配合 `.tb-text-btn` 的
   `justify-content:center` 讓「圖示+文字」整組自動置中——文字出現時的高度變化會讓
   flexbox 自動把圖示往上推，天生不可能疊在一起，不管容器實際高度是多少都一樣可靠。 */
.tb-text-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 100%;
  color: rgba(255,255,255,0.5);
  flex-shrink: 0;
}
.tb-text-btn iconify-icon {
  font-size: 32px;
  transition: color 0.2s;
}
.tb-text-btn span {
  height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: height 0.2s, margin-top 0.2s, opacity 0.2s, color 0.2s;
}
.tb-text-btn:hover iconify-icon { color: var(--accent); }
.tb-text-btn:hover span { height: 16px; margin-top: 4px; opacity: 1; color: var(--accent); }

.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 iconify-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 iconify-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; }

/* ==========================================
   Hero Banner — 完整對齊 fdzys.com 實測 .banner.gap 結構：
   .hero-banner(.banner.gap) > .banner-box > .banner-pic(#heroTrack，滿版無 max-width)
     > .swiper-wrapper（display:flex 橫向排列）> .swiper-slide（各 100% 寬）
   每個 slide 內：背景連結 a.swiper-lazy（data-slide-bg 由 hero.js 讀出設成背景圖）、
   .banner-nav-box（置中內容欄，含隱藏用的 .swiper-pagination-html 供 JS 取片名、
   桌機用的 .slide-btn-box 毛玻璃按鈕）、手機專用的 .m-slide-btn-box。
   .nav-name 是 hero.js 動態產生的右側直向片名清單。
   ========================================== */
.hero-banner {
  position: relative;
  width: 100%;
  /* 對齊 fdzys.com 桌機寬度實測：.banner.gap 的 margin-top 其實是負值（-10px），
     跟 body 的 padding-top（等於 fixed header 高度）疊在一起，讓 Hero 頂端稍微
     鑽到 header 底下（header 是不透明實色背景，蓋得住），做出頭尾無縫銜接的效果；
     不是正值間距。原本寫成 margin:16px 0 0 是誤植，會在 header 跟 Hero 之間
     生出一條可見的縫隙。 */
  margin: -10px 0 0;
  aspect-ratio: 10 / 3;
  max-height: 520px;
  overflow: hidden;
  background: #12141c;
  /* 對齊 fdzys.com 實測：.banner.gap 本身左右全展開到視窗邊緣（無 max-width），
     裡面的文字/控制項仍對齊全站內容欄寬度置中——這個變數算出「視窗邊緣到內容欄
     邊緣」的距離，供 .banner-nav-box 的左右 padding 疊加使用。 */
  --hero-side-pad: max(20px, calc((100% - var(--content-max)) / 2 + 20px));
}
.banner-box,
.banner-pic {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 四邊暈影，讓 Hero 邊緣融入頁面底色（仿 .left_shade/.right_shade/.top_shade） */
.hero-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--bg-base), transparent 8%, transparent 92%, var(--bg-base)),
    linear-gradient(to bottom, rgba(0,0,0,0.25), transparent 12%);
}
/* 底部融色，讓 Hero 與下方內容區無縫銜接（仿 .banner::after） */
.hero-banner::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  height: 30%;
  pointer-events: none;
  background: linear-gradient(to top, var(--bg-base), transparent);
}

.swiper-wrapper {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 1s ease;
  touch-action: pan-y;
  /* 拖曳切頁時避免瀏覽器把滑動當成選取文字 */
  user-select: none;
  -webkit-user-select: none;
}
.swiper-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* 背景圖連結（點擊跳轉詳情頁），data-slide-bg 由 hero.js 讀出寫成 background-image */
.swiper-slide > a.swiper-lazy {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  background-color: var(--bg-elevated);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
/* === 沒有寬幅圖、退回直式海報時的降級處理 ===
   影片若沒設定 vod_pic_slide，模板會退回用 vod_pic（直式海報，比例約 0.7）。
   直接用 cover 塞進 3.33 的寬版位，圖會被放大好幾倍、只露出中間一小條，又糊又變形。
   改成「模糊放大的自身影像鋪滿背景 ＋ 中間完整顯示海報」：海報不裁切，
   兩側空白用它自己的模糊版填滿，視覺上仍是滿版。
   is-portrait 由 hero.js 實測圖片原始比例後掛上，寬幅圖完全不會進到這裡。

   模糊層放在 .swiper-slide（父層）而不是 a.swiper-lazy 裡面，是因為偽元素一定畫在
   元素自身背景「之上」——放在 <a> 裡的話模糊層會蓋住那張清晰的海報，順序救不回來。
   放到父層才能讓清晰海報（<a> 的背景）自然疊在模糊層上面。 */
.swiper-slide.is-portrait {
  /* 模糊會讓邊緣透出底色，所以下面放大 1.15 倍，再用 overflow 裁掉溢出部分 */
  overflow: hidden;
}
.swiper-slide.is-portrait::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--slide-bg);
  background-size: cover;
  background-position: center;
  filter: blur(30px) brightness(0.55);
  transform: scale(1.15);
}
.swiper-slide.is-portrait > a.swiper-lazy {
  /* 海報以原始比例完整顯示、不裁切。
     這裡雖然寫了兩個值，但 hero.js 判定為直式時會把 load.gif 那層拿掉
     （海報既然已載入完成，佔位動畫就沒用途了，而且它 600x600 的原始尺寸比縮小後的
     海報還大，留著會整圈露在海報外面），只剩一層時第二個值會自動被忽略。 */
  background-size: contain, auto;
  /* 讓底下的模糊層透出來，不要被這層的底色蓋掉 */
  background-color: transparent;
}

/* 底部漸層，讓文字/按鈕可讀 */
.swiper-slide > a.swiper-lazy::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
      rgba(10,12,15,0.8) 0%,
      rgba(10,12,15,0.3) 35%,
      transparent 62%);
}

/* 內容欄：對齊全站內容欄寬度置中，承載片名按鈕與桌機片名清單 */
.banner-nav-box {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 0 var(--hero-side-pad);
  pointer-events: none;
}
.banner-nav-box > a.swiper-lazy {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

/* 對齊 fdzys.com 實測 .slide-btn-box：單顆毛玻璃按鈕，按鈕文字直接顯示片名
   （不是「立即播放」/「详情」兩顆文字按鈕），hover 時整塊填滿主色藍。 */
.slide-btn-box {
  position: absolute;
  left: var(--hero-side-pad);
  bottom: 32%;
  z-index: 2;
  pointer-events: auto;
  max-width: min(60%, 480px);
}
.slide-btn-box .play-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  background: rgba(255,255,255,0.24);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.2s;
}
.slide-btn-box .play-btn::before {
  content: '\25B6';
  font-size: 14px;
  flex-shrink: 0;
}
.slide-btn-box .play-btn:hover { background: var(--accent); }

/* ==========================================
   Hero 右側直向片名清單 — 對齊 fdzys.com 實測 .nav-name：
   hero.js 動態產生，Swiper pagination-bullets 客製渲染成右對齊文字清單，
   固定高度＋上下邊緣遮罩淡出（超出用捲動），選中項用左右漸層深色底條。
   ========================================== */
.nav-name {
  position: absolute;
  right: var(--hero-side-pad);
  bottom: 32%;
  z-index: 5;
  width: 220px;
  max-height: 36%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 0;
  scrollbar-width: none;
  mask-image: linear-gradient(to bottom, transparent, #000 12px, #000 calc(100% - 12px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12px, #000 calc(100% - 12px), transparent);
}
.nav-name::-webkit-scrollbar { display: none; }
.nav-name .name {
  display: block;
  padding: 7px 16px;
  font-size: 13px;
  line-height: 1.3;
  color: rgba(255,255,255,0.7);
  text-align: right;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s, background 0.2s;
}
.nav-name .name:hover { color: #fff; }
.nav-name .name.active {
  color: #fff;
  font-weight: 600;
  background: linear-gradient(270deg, transparent, rgba(0,0,0,0.32) 25%, rgba(0,0,0,0.23) 75%, transparent);
}

/* ==========================================
   Hero 底下的分類快速篩選面板 — 對齊 fdzys.com 實測
   .mizhiady-recommend.hidden-md.hidden-xs：疊在 Hero 底部（不是接在 Hero 後面的
   獨立區塊），左右兩欄、各兩排「分類圖示+名稱 ＋ 子分類 chip 列」。不另外加卡片背景，
   跟參考來源一樣單純疊在圖片上，靠 chip 自己的背景色＋ Hero 既有的底部融色漸層
   （.hero-banner::after）維持文字可讀性。
   ========================================== */
.hero-genre-panel {
  position: absolute;
  left: var(--hero-side-pad);
  right: var(--hero-side-pad);
  bottom: 20px;
  /* 要蓋在 .hero-banner::before/::after 的四邊融色暈影（z-index:4）之上，
     不然底部漸層蒙版會疊在分類面板上面、把文字/圖示蓋淡 */
  z-index: 6;
  display: flex;
  justify-content: space-between;
  gap: 40px;
}
.hgp-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 對齊 fdzys.com 實測：兩欄各自貼自己的內容寬度（量測約 440px），
     不是平均撐滿整個容器寬度——中間會留一大段空白，靠 space-between 撐開 */
  flex: 0 1 480px;
  min-width: 0;
}
.hgp-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hgp-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  width: 76px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  transition: color 0.2s;
}
.hgp-head:hover { color: var(--accent); }
.hgp-head iconify-icon { font-size: 17px; color: var(--accent); flex-shrink: 0; }
.hgp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.hgp-tag {
  padding: 5px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-1);
  font-size: 13px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.hgp-tag:hover { background: var(--accent); color: #fff; }

/* 分類頁的單一區塊模式（見 widget/hero_genre_panel.html）：
   面板裡只有「當前分類」一個區塊，但它底下的子分類可能有十幾個，
   所以讓這一欄佔滿整個面板寬度、chip 才有空間往右鋪開換行，
   不像首頁那樣被 flex: 0 1 480px 綁在半邊。
   分類名稱也改成依內容自適應寬度——首頁固定 76px 是為了讓四個區塊的
   chip 列對齊，單一區塊沒有這個需求，長一點的分類名才不會被擠壓。 */
.hero-genre-panel--single .hgp-col { flex: 1 1 auto; }
.hero-genre-panel--single .hgp-head { width: auto; max-width: 180px; }
/* 分類頁的分類名稱本身就是「全部」的入口（連到不帶類型條件的篩選頁），
   而分類頁沒有套用任何類型條件，所以它就是當前狀態，用選中色標示，
   讓使用者一眼看出現在看的是這個分類的全部影片。
   不另外生成「全部」chip——那會讓同一個連結在同一行出現兩次。 */
.hgp-head.is-active { color: var(--accent); }

/* 平板／手機：跟 fdzys.com 一樣只在桌機顯示（hidden-md hidden-xs） */
@media (max-width: 1199px) {
  .hero-genre-panel { display: none; }
}

/* ==========================================
   手機版片名卡（對齊 fdzys.com 實測 .m-slide-btn-box／.m-detail-box）：
   桌機用 .slide-btn-box 毛玻璃按鈕，手機改用這張含片名/分類/簡介的卡片，
   兩者互斥顯示。
   ========================================== */
.m-slide-btn-box { display: none; }
@media (max-width: 767px) {
  .slide-btn-box { display: none; }
  .m-slide-btn-box {
    display: block;
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    /* 必須蓋過 .hero-banner::before/::after 這兩層四邊暈影/底部融色蒙版（z-index:4）。
       底部融色在最底端是「完全不透明的 var(--bg-base)」，而這張手機片名卡剛好貼在
       bottom:16px（正落在那個不透明區域裡），z-index 只有 2 的話會被整片蓋掉，
       畫面上完全看不到片名——跟九追加 .hero-genre-panel 被蒙版壓住是同一種錯誤。 */
    z-index: 6;
    pointer-events: none;
  }
  .m-detail-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .m-detail-box .title {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .m-detail-box .tags {
    display: flex;
    gap: 6px;
    font-size: 11px;
    color: rgba(255,255,255,0.65);
    white-space: nowrap;
    overflow: hidden;
  }
  .m-detail-box .content {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .nav-name { display: none; }
}

/* ==========================================
   Content Block — 內容區塊容器（1200px 定寬）
   ========================================== */
.content-block {
  padding: 20px 0 4px;
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.section-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}

/* 區塊標題：仿 .title h2 素樸樣式 */
.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  font-weight: 400;
  color: var(--text-1);
  line-height: 1.3;
}
.section-title-icon {
  color: var(--accent);
  font-size: 20px;
  display: flex;
}

/* 「更多」連結 */
/* 對齊 fdzys.com 實測 <a><div class="more">更多<span class="iconfont icon-back more-icon"></span></div></a>：
   膠囊背景按鈕（不是純文字連結），圖示是 icon-back 旋轉 180 度變成右箭頭，本主題用
   Iconify 對應的 `ph:caret-right-bold`（實際連字型檔渲染出來比對過形狀，是同一種
   粗體 chevron，不是細線框的 `ph:caret-right`）。 */
.section-more {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 28px;
  padding: 6px 9px 6px 13px;
  border-radius: 50px;
  background: rgba(255,255,255,0.08);
  font-size: 14px;
  font-weight: 400;
  color: rgb(116,130,155);
  transition: background 0.2s, color 0.2s;
}
.section-more iconify-icon { font-size: 14px; }
.section-more:hover { background: var(--accent); color: #fff; }

/* ==========================================
   兩欄版面（仿 .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 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px 18px;
}

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

/* ==========================================
   VOD Card — 對齊 fdzys.com 實測 .myui-vodbox-content：
   靜止時只顯示圖幅 + 片名 + 主演；hover 時卡片本身放大（width:137%，往左上偏移）
   疊到鄰居卡片上方（z-index 提升），底部改顯示展開的簡介/主演/更新時間詳情面板。
   卡片格子本身（.vod-card）尺寸全程不變──會放大的是內層 .vc-box（position:absolute
   疊在格子上面），所以放大不會影響 grid 的欄寬/列高計算，只是視覺上蓋出格子外。
   只在真的支援 hover 的裝置上啟用這個放大效果（觸控裝置維持靜態卡片，不會被誤觸
   展開），對齊參考網站的 `(any-hover:hover)` 判斷。
   ========================================== */
.vod-card {
  position: relative;
}
/* 用 ::before 的 padding-top 建立卡片固定高度（圖幅比例 3:4，實測 fdzys.com 海報
   長寬比約 0.75，換算成 4:3 高寬比＋底部片名/主演固定 54px），讓 .vc-box 可以全程
   用 position:absolute 疊在這個高度上，不管靜止或 hover 放大都不需要另外計算高度。 */
.vod-card::before {
  content: '';
  display: block;
  padding-top: calc(133.333% + 54px);
}
.vc-box {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  color: inherit;
  transition: transform 0.22s, border-radius 0.22s;
}
.vc-poster {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated) url("../img/load.gif") no-repeat center/cover;
}
.vc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s;
}
/* 左上角「更新至XX集」標籤 */
.vc-tags {
  position: absolute;
  top: 10px; left: 10px;
  display: flex;
  z-index: 2;
}
.vc-tag {
  max-width: 100%;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
}
/* 底部漸層疊圖：播放量 + 評分 */
.vc-bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 56px;
  padding: 0 10px 10px;
  background-image: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  z-index: 1;
}
.vc-bottom-info {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.vc-hits {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
}
.vc-hits iconify-icon { font-size: 13px; }
.vc-score {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

/* 圖幅下方靜態文字（片名＋主演），hover 放大時會被詳情面板取代 */
.vc-plain { padding-top: 10px; }
.vc-title {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--text-1);
}
.vc-role {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-3);
}

.vc-hover-mask,
.vc-detail { display: none; }

@media (hover: hover) and (pointer: fine) {
  .vod-card:hover { z-index: 20; }
  /* fdzys.com 實測的放大是 width:137%+left:-18%+top:-14%，但 top/bottom 沒有對稱
     （bottom 維持貼齊原位，只有上緣往上長），視覺上放大的中心點偏向左下，不是卡片
     正中央，看起來會怪怪的。改用 transform:scale() 讓瀏覽器直接以卡片正中心（預設
     transform-origin: 50% 50%）等比放大，橫向/縱向都對稱、感覺更正常。 */
  .vod-card:hover .vc-box {
    transform: scale(1.08);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  }
  .vod-card:hover .vc-img { transform: scale(1.07); }
  .vod-card:hover .vc-plain,
  .vod-card:hover .vc-bottom { display: none; }
  .vod-card:hover .vc-hover-mask {
    display: block;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    /* 高度不能只給百分比。詳情面板的高度是被文字內容撐出來的（實測約 186px，
       欄數變多、卡片變小時這個值幾乎不變），但百分比會跟著卡片一起縮——
       實測在 219px 高的卡片上，61% 只有 134px，比文字區整整矮 52px，
       上半部的片名就直接壓在海報上。
       所以補一個 min-height 兜底：大卡片照百分比走，小卡片至少蓋滿文字區。 */
    height: 61%;
    min-height: 230px;
    /* 底部要跟著 .vc-poster 的圓角走。.vc-poster 有 border-radius: var(--radius-sm)
       且底色是偏亮的 --bg-elevated，遮罩若維持直角，兩者在底部圓角轉折處對不齊，
       就會露出那層底色，看起來像一條白邊。
       再往下多蓋 1px，順便吃掉縮放後可能出現的次像素縫隙
       （hover 時 .vc-box 會 scale(1.08)，邊界容易落在非整數像素上）。 */
    bottom: -1px;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    /* 收尾改成全不透明。原本 0.94 會讓海報透出 6%，遇到底部偏亮的海報，
       最下面那行（熱度／年份）就會看到圖透上來。 */
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.85) 55%, rgba(0,0,0,1));
    z-index: 1;
  }
  .vod-card:hover .vc-detail {
    display: block;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 0 12px 12px;
    font-size: 12px;
    color: rgba(255,255,255,0.85);
    z-index: 2;
  }
}

.vc-detail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.vc-detail-title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.vc-detail-score {
  flex-shrink: 0;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.vc-detail-time,
.vc-detail-roles {
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vc-detail-intro {
  margin-bottom: 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vc-detail-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vc-detail-year { color: rgba(255,255,255,0.7); }

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

/* ==========================================
   History Dropdown — 對齊 fdzys.com 實測 .icons.icon2 > .dropdownBox > .history-box：
   錨定在按鈕正下方置中的下拉框（不是全螢幕遮罩），純文字清單（片名＋分類兩欄，
   沒有縮圖），寬度 358px、圓角 20px、深色卡片背景。手機寬度改回置中全螢幕彈窗
   （見下方 @media），因為 358px 的錨定下拉框在窄螢幕放不下。
   ========================================== */
.tb-hist-wrap { position: relative; }

.hm-overlay {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  /* 對齊 fdzys.com：跟按鈕之間留一段透明間距（該站用來讓 hover 路徑不中斷；
     本主題點擊切換不需要這個理由，但保留同樣的間距數值以貼齊視覺位置） */
  padding-top: 17px;
  width: 358px;
  z-index: 20;
}
.hm-overlay.is-open { display: block; }

.hm-box {
  width: 100%;
  background: var(--bg-base);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 54px;
  padding: 0 18px 0 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.hm-title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: rgba(255,255,255,0.5);
}
.hm-clear {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  transition: color 0.15s;
}
.hm-clear:hover { color: var(--accent); }
.hm-body {
  width: 100%;
  min-height: 200px;
  max-height: 300px;
  overflow-y: auto;
}
.hm-body::-webkit-scrollbar { width: 0; }
.hm-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  padding: 0 18px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.hm-card:hover { background: rgba(255,255,255,0.08); }
.hm-name {
  /* fdzys.com 實測是固定 212px（配 358px 寬的錨定下拉框），但手機版退回置中彈窗時
     可用寬度不同，改用同比例（約 2:1）的 flex 分配，寬度足夠時效果等同 212px，
     窄螢幕也不會把 .hm-type 擠到只剩個位數 px。 */
  flex: 2 1 0%;
  min-width: 0;
  font-size: 16px;
  line-height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  color: #fff;
}
.hm-type {
  flex: 1 1 0%;
  min-width: 32px;
  font-size: 16px;
  line-height: 50px;
  text-align: right;
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 8px;
}
.hm-empty {
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  font-size: 14px;
}

/* ==========================================
   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: 1000;
}
.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 iconify-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; }

/* ==========================================
   Mobile Tabbar
   ========================================== */
.mobile-tabbar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 56px; background: var(--bg-topbar);
  border-top: 1px solid rgba(255,255,255,0.08);
  z-index: 300; flex-direction: row;
}
.mtb-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; height: 100%;
  color: rgba(255,255,255,0.55); font-size: 10px;
  text-decoration: none; position: relative; transition: color 0.2s;
}
.mtb-item iconify-icon { font-size: 22px; }
.mtb-item.is-active { color: #fff; }
.mtb-item.is-active::before {
  content: '';
  position: absolute;
  bottom: 0; left: 20%; right: 20%;
  height: 3px;
  background: var(--accent);
}

/* ==========================================
   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) {
  .mobile-tabbar { display: flex; }
  .main-area { padding-bottom: 56px; }

  /* 手機／平板 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; }

  /* 平板／手機：Hero 底下的分類快速篩選面板隱藏，對齊 fdzys.com 本身也只在桌機顯示這塊 */
  .hero-genre-panel { display: none; }

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

/* ==========================================
   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 iconify-icon { font-size: 20px; flex-shrink: 0; }

@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: 14px 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; }
  .vc-tags { top: 5px; left: 5px; }
  .vc-tag { font-size: 10px; padding: 2px 4px; }
  .vc-bottom { padding: 0 5px 5px; height: 44px; }
  .vc-score { font-size: 14px; }
  .vc-title { font-size: 12px; }
  .vc-role { font-size: 11px; }
  .art-grid       { grid-template-columns: repeat(2, 1fr); }
  .topic-grid     { grid-template-columns: repeat(2, 1fr); }
  .actor-row { grid-template-columns: repeat(4, 1fr); }
  /* 358px 錨定下拉框在窄螢幕放不下，改回置中全螢幕彈窗（跟改版前一致的手機版處理） */
  .hm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    left: 0;
    top: 0;
    transform: none;
    width: auto;
    padding: 16px;
    background: rgba(0,0,0,0.5);
    z-index: 9000;
    align-items: center;
    justify-content: center;
  }
  .hm-overlay.is-open { display: flex; }
  .hm-box { max-width: 420px; max-height: 85vh; }
  .mobile-tabbar { display: flex; }
  .main-area { padding-bottom: 56px; }
  .topbar-inner { padding: 0 14px; gap: 10px; }

  .topbar-nav { display: none; }
  .hamburger-btn { display: flex; }
  .tb-allcat-btn span { display: none; }
  .tb-allcat-btn { padding: 8px; }
  .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;
}