/* VOD Detail Page — 仿 maccmsbox_119 白底藍調佈局 */

/* ===== Top Section: Poster + Info ===== */
.detail-top {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.detail-poster {
  flex-shrink: 0;
  width: 250px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-panel);
  background: url("../img/load.gif") no-repeat center/cover;
}
.detail-poster img {
  width: 100%;
  display: block;
  aspect-ratio: 5/7;
  object-fit: cover;
}
.poster-tag {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
}
.detail-info {
  flex: 1;
  min-width: 0;
  padding-top: 4px;
}
.detail-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-1);
  margin: 0;
  line-height: 1.3;
}
.detail-title-en {
  font-size: 13px;
  color: var(--text-3);
  margin: 0 0 12px;
}
.detail-score-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.score-num {
  font-size: 24px;
  font-weight: 700;
  color: var(--score-hi);
  line-height: 1;
}
.detail-stars {
  position: relative;
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 2px;
}
.detail-stars-bg { color: rgba(255,255,255,0.15); white-space: nowrap; }
.detail-stars-fg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: var(--text-1);
  white-space: nowrap;
}
/* 下载页顶部模块的按钮列，紧接在 dm-line 之后，不需要再多一条上边框 */
.down-hero-info .detail-actions {
  border-top: none;
  padding-top: 0;
  margin-top: 12px;
}
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.detail-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: opacity 0.2s;
}
.detail-btn:hover { opacity: 0.85; }
.detail-btn--play {
  background: var(--accent);
  color: #fff;
}
.detail-btn--dl {
  background: var(--accent-light);
  border: 1px solid var(--accent);
  color: var(--accent-hover);
}
.detail-btn--share {
  background: var(--bg-elevated);
  border: 1px solid var(--border-2);
  color: var(--text-2);
}
/* ===== Tabs Section ===== */
.detail-tabs {
  display: flex;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-bottom: none;
  margin-bottom: 0;
}
.dtab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 13px 20px;
  font-size: 14px;
  color: var(--text-2);
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s;
}
.dtab:hover { color: var(--text-1); }
.dtab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
#tab-intro, #tab-cast, #tab-rate {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 16px 20px;
}
/* ===== Cast List ===== */
.detail-cast-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 8px;
}
.cast-item {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 72px;
}
.cast-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-elevated) url("../img/load.gif") no-repeat center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--text-3);
  border: 1px solid var(--border);
}
.cast-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cast-name {
  font-size: 12px;
  color: var(--text-1);
  display: block;
  text-align: center;
  line-height: 1.3;
  word-break: break-all;
}
.cast-role {
  font-size: 11px;
  color: var(--text-3);
  display: block;
  text-align: center;
}
.rate-stars {
  display: flex;
  gap: 8px;
  font-size: 30px;
  color: rgba(255,255,255,0.25);
}
.rs {
  cursor: pointer;
  transition: color 0.15s;
}
.rs:hover,
.rs.rs-on { color: var(--score-hi); }
/* ===== Bottom Layout: Main + Sidebar ===== */
/* ===== Hero Wrapper：滿版，不與側欄並排 ===== */
/* ⚠️ 左右一定要有 gutter，理由同 main.css 的 .content-block：
   這是定寬置中容器（max-width + margin auto），只有「視窗寬度 > --content-max」時
   才會自然置中留白；一般螢幕寬度都小於它，容器會直接撐滿——左邊貼著側欄、
   右邊貼著螢幕邊緣。桌機與窄螢幕各自有斷點覆寫時最容易漏掉桌機這一段。
   數值用 --gutter，跟首頁的 .section 對齊在同一條線上。 */
.detail-hero-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
/* 左右 gutter 的理由同上方 .detail-hero-wrap */
.detail-bottom-layout {
  display: flex;
  gap: 20px;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter) 40px;
  align-items: flex-start;
}
.detail-bottom-main {
  flex: 1;
  min-width: 0;
}
.detail-sidebar {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--topbar-h) + 12px);
}
/* ===== Plot List（分集劇情：單行、超出省略號，詳情連結接在行尾） ===== */
.plot-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.plot-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
}
.plot-item-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plot-ep {
  font-weight: 600;
  color: var(--text-1);
  margin-right: 4px;
}
.plot-link {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-3);
  text-decoration: none;
  transition: color 0.2s;
  margin-left: 6px;
}
.plot-link:hover { color: var(--accent); }
.spi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: var(--text-2);
  font-size: 12px;
  cursor: pointer;
}
.spi-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--text-1);
  border: 1px solid var(--border);
}
/* ===== Responsive ===== */
@media (max-width: 900px) {
  .detail-sidebar { display: none; }
  .detail-hero-wrap,
  .detail-bottom-layout { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 640px) {
  .detail-top { flex-direction: column; align-items: center; }
  .detail-poster { width: 230px; }
  .detail-info { width: 100%; }
  /* 側欄在 ≤900px 已 display:none，這裡改用 display:block（而非 flex-direction:column）
     避免巢狀 flex 容器在深層 nowrap 文字（分集劇情）撐開時，百分比寬度/stretch 計算失準、
     子層寬度超出容器導致橫向溢出（分集劇情條被推出可視範圍） */
  .detail-bottom-layout { display: block; padding: 0 12px 32px; }
  .detail-hero-wrap { padding: 12px 12px 0; }
  .detail-top { margin: 0 -0px; }
  .detail-tabs { overflow-x: auto; }
  /* 側邊廣告在手機版容易因按鈕文字不換行而撐開超出螢幕寬度，改為可換行排列 */
  .site-ad--sidebar { flex-wrap: wrap; }
  .site-ad--sidebar .site-ad-btn { width: 100%; justify-content: center; margin-top: 2px; }
}
/* ==========================================================================
   詳情頁對齊參考站（zhuiying8.cc/video/*）的版面與按鈕
   --------------------------------------------------------------------------
   只搬「幾何」——尺寸、間距、圓角、字級層級；配色一律沿用本主題既有 token。
   採附加覆寫而非改寫上面的既有規則：本機沒有 PHP 無法渲染驗證，附加的方式
   不可能誤刪原有屬性，要回退也只要刪掉這一段。
   資料欄位與 JS 鉤子完全不動，畫面上該顯示的資料一項都沒有減少。
   ========================================================================== */

/* ---------- detail-top：對齊參考站的 .detail-hero + .detail-layout ---------- */
.detail-top {
    min-height: 520px;
    padding: 100px 40px 40px;
    display: flex;
    align-items: center;
    gap: 40px;
}
/* 海報：固定比例 3/4.5、隨視窗縮放但有上下限 */
.detail-poster {
    width: clamp(260px, 24vw, 320px);
    aspect-ratio: 3 / 4.5;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    flex-shrink: 0;
}
.detail-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster-tag { top: 12px; right: 12px; font-size: 13px; padding: 4px 10px; border-radius: 6px; }
.detail-info { display: flex; flex-direction: column; justify-content: center; max-width: 800px; }
/* 大標題是參考站最明顯的視覺特徵：字重 900、隨視窗縮放 */
.detail-title { font-size: clamp(38px, 4vw, 54px); line-height: 1.1; font-weight: 900; }
.detail-title-en { font-size: 16px; }
/* ---------- 按鈕：膠囊形，對齊 .btn-play ---------- */
.detail-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.detail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 35px;
    border-radius: 23px;
    font-size: 16px;
    font-weight: 700;
    border: none;
}
@media (max-width: 1199px) {
  .detail-top { min-height: 0; padding: 24px 16px; gap: 20px; }
  .detail-poster { width: clamp(140px, 34vw, 200px); }
  .detail-title { font-size: clamp(22px, 5vw, 32px); }
  .detail-btn { height: 40px; padding: 0 22px; font-size: 14px; border-radius: 20px; }
}
/* ---------- 頂部背景大圖 + 暈影 ---------- */
.detail-hero-wrap { position: relative; overflow: hidden; }
.detail-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 海報是直式的，焦點壓在偏上方（人物通常在那），避免只看到中段 */
    object-position: center 20%;
    z-index: 1;
    filter: brightness(0.85);
    /* 稍微放大，避免模糊/縮放時邊緣露出底色 */
    transform: scale(1.02);
}
.detail-hero-vignette {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    /* 兩層漸層：橫向讓左側資訊區壓在純底色上（文字才讀得清楚），
       縱向讓底部與下方內容銜接 */
    background:
        linear-gradient(90deg, var(--bg-base) 0%, var(--bg-base) 30%, rgba(20,21,23,0.8) 55%, transparent 85%),
        linear-gradient(0deg, var(--bg-base) 0%, transparent 60%);
}
/* 內容要壓在背景與暈影之上 */
.detail-hero-wrap .detail-top { position: relative; z-index: 3; }
@media (max-width: 1199px) {
  .detail-hero-bg { object-position: center 15%; }
  .detail-hero-vignette {
        /* 窄螢幕沒有左側資訊欄的空間，改成由下往上壓深，文字才讀得清楚 */
        background: linear-gradient(0deg, var(--bg-base) 12%, rgba(20,21,23,0.75) 55%, transparent 100%);
  }
}
/* ---------- 海報與資訊欄的上緣切齊 ---------- */
/* 參考站是 .detail-hero(center) 包一層 .detail-flex-left(flex-start)：外層負責把整組
   內容在 hero 裡垂直置中，內層才決定海報與資訊欄彼此的對齊。tp14 沒有那層中介，
   .detail-top 同時扮演兩個角色，所以這裡要用 flex-start——用 center 的話資訊欄會依
   自身高度上下浮動，片名上緣就對不到海報上緣。 */
.detail-hero-wrap .detail-top { align-items: flex-start; }
/* 資訊欄原本靠 padding-top:4px 微調，改成切齊之後這 4px 會讓片名比海報低一截 */
.detail-hero-wrap .detail-info { padding-top: 0; }
/* ---------- 上緣貼齊 header（對齊首頁 hero 的作法） ---------- */
/* .page-content 有 padding-top: var(--topbar-h) 讓開 fixed header，首頁的
   .hero-container 再用同值的負 margin 把自己拉回去，所以 hero 是從 y=0 開始、
   延伸到透明 header 底下（實測首頁 hero 上緣就是 0）。
   詳情頁要同樣效果，就套同一招；padding-top 補回同值，讓內容不會被 header 蓋住。 */
.detail-hero-wrap {
    margin-top: calc(var(--topbar-h) * -1);
}
.detail-hero-wrap .detail-top {
    padding-top: calc(100px + var(--topbar-h));
}
@media (max-width: 1199px) {
  .detail-hero-wrap .detail-top {
        padding-top: calc(24px + var(--topbar-h));
  }
}
/* ---------- 修正：背景圖靠右、不是滿版 ---------- */
/* 實測參考站的背景圖只佔 hero 寬度約 71%、靠右對齊（right:0），
   左側刻意留白給資訊區壓在純底色上，文字才讀得清楚。
   先前寫成 inset:0 鋪滿是錯的——那樣左側資訊會壓在圖上，暈影得做很重才蓋得住。 */
.detail-hero-bg {
    inset: auto 0 auto auto;
    top: 0;
    right: 0;
    left: auto;
    width: 70%;
    height: 100%;
    object-position: 50% 20%;
}
/* 背景既然只在右側，暈影就只需要處理左右銜接，不用整片壓黑 */
.detail-hero-vignette {
    background:
        linear-gradient(90deg, var(--bg-base) 0%, var(--bg-base) 26%, rgba(20,21,23,0.75) 48%, transparent 80%),
        linear-gradient(0deg, var(--bg-base) 0%, transparent 55%);
}
/* ---------- 左右不留內距，滿版到邊 ---------- */
.detail-hero-wrap { padding-left: 0; padding-right: 0; }
/* ---------- 右側方形播放鈕 ---------- */
/* .detail-top 要用 space-between 才會把它推到最右緣（參考站是 .detail-layout 負責） */
.detail-hero-wrap .detail-top { justify-content: space-between; }
.detail-play-right {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* 資訊欄是 flex-start 對齊，這顆鈕要垂直置中於整個 hero，所以自己抵銷掉對齊 */
    align-self: center;
}
.square-play-btn {
    width: 66px;
    height: 66px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}
.square-play-btn:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.square-play-btn .mac-icon { width: 32px; height: 32px; }
@media (max-width: 1199px) {
  /* 窄螢幕沒有橫向空間擺這顆鈕，左側的「立即播放」已經夠用 */
  .detail-play-right { display: none; }
  .detail-hero-bg { width: 100%; }
  .detail-hero-vignette {
        background: linear-gradient(0deg, var(--bg-base) 12%, rgba(20,21,23,0.75) 55%, transparent 100%);
  }
}
/* ---------- 修正：hero 上緣就是 0，padding 已含讓開 header 的空間 ---------- */
/* 實測參考站：hero 上緣 y=0、header 高 76px、hero 自身 padding-top 100px——
   也就是那 100px 本身就是「讓開 header 再多留一點呼吸」，不需要再加一次 header 高度。
   先前寫成 calc(100px + var(--topbar-h)) 是重複計算，會多推 76px 下去。 */
.detail-hero-wrap .detail-top { padding-top: 100px; }
/* ---------- 按鈕：主要鈕實心白、次要鈕半透明膠囊 ---------- */
/* 主要動作（立即播放）：白底黑字，是整個 hero 上對比最強的元素 */
.detail-btn--play {
    background: #fff;
    color: #000;
    border: none;
    font-size: 16px;
    font-weight: 700;
    padding: 0 35px;
}
.detail-btn--play:hover { background: rgba(255, 255, 255, 0.88); color: #000; }
/* 次要動作（下載／分享）：半透明底＋極淡邊框，字級與字重都比主要鈕輕 */
.detail-btn--dl,
.detail-btn--share {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    padding: 0 25px;
}
.detail-btn--dl:hover,
.detail-btn--share:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}
@media (max-width: 1199px) {
  .detail-hero-wrap .detail-top { padding-top: calc(var(--topbar-h) + 16px); }
  .detail-btn--play { padding: 0 22px; font-size: 14px; }
  .detail-btn--dl,
    .detail-btn--share { padding: 0 16px; font-size: 13px; }
}
/* ---------- 詳情頁 hero 一律從 0 起算，不為 header 讓位 ---------- */
/* header 在這頁是透明疊在 hero 上的（滑過 hero 下緣才轉實心），所以 hero 的內容
   直接從最頂端開始排，不再用 padding-top 把它推下去。 */
.detail-hero-wrap .detail-top { padding-top: 0; }
@media (max-width: 1199px) {
  .detail-hero-wrap .detail-top { padding-top: 0; }
}
/* ==========================================================================
   hero 外框的 padding 改由 .detail-hero-wrap 負責（對齊參考站 .detail-hero）
   --------------------------------------------------------------------------
   參考站實測值：
     基礎        padding: 100px 40px 40px;  min-height: 520px
     ≤1200px    .detail-layout gap 縮 30px、海報寬縮 220px
     ≤768px     padding: 0 0 20px;  改直排;  min-height: auto
   本主題沒有 .detail-layout 這層，海報與資訊欄直接掛在 .detail-top 上，
   所以斷點的調整改套在 .detail-top / .detail-poster 上，效果等價。
   padding 集中在 wrap 這一層，內層 .detail-top 一律歸零，避免兩層各自留白疊加。
   ========================================================================== */
.detail-hero-wrap {
    padding: 100px 40px 40px;
    min-height: 520px;
    box-sizing: border-box;
}
.detail-hero-wrap .detail-top {
    padding: 0;
    min-height: 0;
}
@media (max-width: 1200px) {
  .detail-hero-wrap .detail-top { gap: 30px; }
  .detail-hero-wrap .detail-poster { width: 220px; }
}
@media (max-width: 768px) {
  /* 手機：上方不留白（背景圖直接貼齊頂端），改直排 */
  .detail-hero-wrap {
        padding: 0 0 20px;
        min-height: auto;
  }
  .detail-hero-wrap .detail-top {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        /* 直排時內容需要自己的左右留白，否則會貼到螢幕邊 */
        padding: 0 16px;
  }
  .detail-hero-wrap .detail-poster { width: clamp(140px, 40vw, 200px); }
  .detail-hero-wrap .detail-info { align-items: center; text-align: center; }
  .detail-hero-wrap .detail-actions { justify-content: center; }
}
/* ---------- 背景圖改回滿版：由左延伸到右鋪滿 ---------- */
/* 先前照參考站量到的「靠右 70%」做，但實際看下來左側會出現明顯的分界線。
   改回整片鋪滿，左側可讀性交給暈影負責（漸層把左邊壓到接近純底色）。 */
.detail-hero-bg {
    inset: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
/* ---------- 下方區塊的左右邊界對齊 hero ---------- */
/* hero 用的是 40px，下方區塊原本吃 var(--gutter)（64px），兩者對不齊，
   捲動時左邊界會有一段位移。統一成同一組值。 */
.detail-bottom-layout {
    padding-left: 40px;
    padding-right: 40px;
}
@media (max-width: 1200px) {
  .detail-bottom-layout { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 768px) {
  /* 手機的 hero 內容用 0 16px，下方跟著一致 */
  .detail-bottom-layout { padding-left: 16px; padding-right: 16px; }
}
/* ---------- hero 內容區改為透明、海報與資訊欄不留間距 ---------- */
/* .detail-top 原本是一張獨立卡片（有底色與邊框），那是還沒有背景大圖時的設計。
   現在底下鋪了背景圖＋暈影，這層卡片會整片蓋住它，所以底色與邊框都要拿掉。 */
.detail-hero-wrap .detail-top {
    background: transparent;
    border: none;
    box-shadow: none;
    gap: 0;
}
@media (max-width: 768px) {
  /* 直排時海報在上、資訊在下，完全貼齊會太擠，保留最小的垂直間距 */
  .detail-hero-wrap .detail-top { gap: 12px; }
}
/* ---------- 滿版推薦列表容器 ---------- */
/* 左右內距與 hero、下方區塊一致（40px），但沒有側欄限制，
   橫向捲動列靠 .carousel-wrapper 的負 margin 出血，就能一路延伸到畫面右緣。 */
.detail-full-lists {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 40px 40px;
}
@media (max-width: 768px) {
  .detail-full-lists { padding: 0 16px 32px; }
}
/* ==========================================================================
   hero 內部改為兩層結構，對齊參考站
   --------------------------------------------------------------------------
   參考站：.detail-layout > [.detail-flex-left > 海報 + 資訊] + .detail-play-right
   本主題：.detail-top    > [.detail-flex-left > 海報 + 資訊] + .detail-play-right

   .detail-top 扮演 .detail-layout 的角色——負責把「左半部」與「右側播放鈕」
   分置兩端；.detail-flex-left 才決定海報與資訊欄彼此怎麼排。
   分成兩層的好處：兩組對齊方式互不干擾（外層垂直置中、內層上緣對齊），
   先前擠在同一層時只能二選一，才會出現片名對不到海報上緣的問題。
   ========================================================================== */
.detail-hero-wrap .detail-top {
    display: flex;
    align-items: center;      /* 左半部與播放鈕在 hero 裡垂直置中 */
    justify-content: space-between;
    gap: 40px;                /* 左半部與播放鈕的間距（實測參考站為 40px） */
}
.detail-flex-left {
    display: flex;
    align-items: flex-start;  /* 海報與資訊欄上緣切齊 */
    gap: 0;                   /* 兩者之間不留間距 */
    flex: 1;
    min-width: 0;             /* 讓資訊欄能正常收縮，長片名才不會撐破版面 */
}
@media (max-width: 1200px) {
  .detail-hero-wrap .detail-top { gap: 30px; }
}
@media (max-width: 768px) {
  /* 直排：左半部本身也轉成上下排列，播放鈕在這個斷點已隱藏 */
  .detail-hero-wrap .detail-top { flex-direction: column; align-items: center; gap: 16px; }
  .detail-flex-left { flex-direction: column; align-items: center; gap: 12px; width: 100%; }
}
/* ---------- 海報與資訊欄的間距改回參考站的 40px ---------- */
/* 實測參考站 .detail-flex-left { gap: 40px }，海報右緣 504、資訊左緣 544，
   實際間距就是 40px；與「左半部 ↔ 播放鈕」同值，整個 hero 用同一個節奏。 */
.detail-flex-left { gap: 40px; }
@media (max-width: 1200px) {
  .detail-flex-left { gap: 30px; }
}
@media (max-width: 768px) {
  .detail-flex-left { gap: 12px; }
}
/* ---------- flex 參數精確對齊參考站 ---------- */
/* 實測參考站：
     .detail-flex-left   flex: 1 1 0%   min-width: 0
     .detail-play-right  flex: 0 0 auto （固定 66px，永不收縮）
     .detail-info-center flex: 1 1 0%   min-width: 0   max-width: 800px
   min-width:0 是關鍵——flex 子項預設 min-width:auto，長片名或長簡介會把版面撐開，
   把右側播放鈕擠出畫面；設 0 才允許它收縮。 */
.detail-flex-left {
    flex: 1 1 0%;
    min-width: 0;
}
.detail-hero-wrap .detail-info {
    flex: 1 1 0%;
    min-width: 0;
    max-width: 800px;
}
.detail-play-right {
    flex: 0 0 auto;
}
.detail-hero-wrap .detail-title-en { margin: 0; }
.detail-hero-wrap .detail-actions { margin: 0; }
/* ---------- 手機版：hero 內容要讓開 header，否則上緣被蓋住 ---------- */
/* .detail-hero-wrap 用負 margin 把自己拉到 y=0（背景圖才能延伸到 header 底下），
   桌機版有 100px 的 padding-top 順帶讓開了 header；但手機斷點把 padding 歸零，
   海報與片名就整個壓在 fixed header 底下看不到。
   這裡補回「header 高度 + 一點呼吸」，背景圖仍然從 0 開始鋪，只有內容往下讓。 */
@media (max-width: 768px) {
  .detail-hero-wrap {
        padding-top: calc(var(--topbar-h) + 16px);
  }
}
/* ---------- 播放鈕往左靠 ---------- */
/* .detail-top 是 space-between、.detail-flex-left 是 flex:1，所以按鈕預設被推到
   最右緣。這裡用右外距把它往左拉——數字越大越靠左，是唯一要調的旋鈕。
   不用改 justify-content 或 flex-left 的 flex 值：那兩者會連帶影響海報與資訊欄的
   寬度分配，動了反而要重新對齊左半部。 */
.detail-play-right {
    margin-right: 60px;
}
@media (max-width: 1200px) {
  .detail-play-right { margin-right: 30px; }
}
/* ---------- 海報卡片：對齊參考站的尺寸與投影 ---------- */
/* 實測參考站 .detail-poster-wrap：320x480、aspect-ratio 3/4.5、圓角 12px、
   1px 極淡邊框、overflow hidden，外加兩層投影——
   第一層短距離貼著卡片下緣壓出接觸陰影，第二層長距離散開做浮起感。
   兩層都用負的擴散值（-10px）把陰影往內收，才不會糊成一片。
   高度不用自己算：aspect-ratio 3/4.5 會依寬度自動換算（320 → 480）。 */
.detail-hero-wrap .detail-poster {
    aspect-ratio: 3 / 4.5;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    flex-shrink: 0;
    box-shadow:
        0 8px 10px -10px rgba(0, 0, 0, 0.7),
        0 20px 30px -10px rgba(0, 0, 0, 0.5);
}
.detail-hero-wrap .detail-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    display: block;
}
/* 角標：對齊參考站的 .poster-badge */
.detail-hero-wrap .poster-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(0, 128, 255, 0.85);
    color: #fff;
}
/* ---------- 角標：取消 left，才會收成右上角的小膠囊 ---------- */
/* 原有規則帶了 left: 0，absolute 元素同時有 left 與 right 時，瀏覽器會用這兩個值
   反推寬度，角標因此被橫向拉成一整條貼在左上角（而不是右上角的小膠囊）。
   只加 right 不會覆蓋掉 left，必須明確設成 auto 才解得掉——這跟規範 §17.20
   記載的 inset:0 覆蓋 width 是同一個機制。 */
.detail-hero-wrap .poster-tag {
    left: auto;
    right: 12px;
    width: auto;
    display: inline-block;
    line-height: 1.4;
    white-space: nowrap;
}
/* ---------- 海報下緣對齊按鈕列下緣 ---------- */
/* 做法：寬度固定、只讓高度拉伸到與資訊欄同高（align-items: stretch）。
   海報高度因此永遠等於資訊欄高度，下緣自然切齊按鈕列，而且會隨內容長短自動跟隨，
   不需要寫死任何高度數字。

   ⚠️ 為什麼不保留 aspect-ratio：試過「拉伸 + aspect-ratio 反推寬度」，
   會產生循環依賴——海報變寬 → 資訊欄變窄 → 文字換行變多而變高 → 海報又拉高變寬…
   實測會一路撞到寬度上限、仍差 35px 對不齊。寬度固定就沒有這個迴圈。
   代價是顯示比例不再是 3/4.5（實測約 0.571），但圖片用 object-fit: cover，
   只是多裁掉一點上下，不會變形。 */
.detail-flex-left { align-items: stretch; }
.detail-flex-left .detail-poster {
    align-self: stretch;
    width: clamp(260px, 24vw, 320px);
    height: auto;
    aspect-ratio: auto;
    flex: 0 0 auto;
}
.detail-flex-left .detail-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 768px) {
  /* 直排時沒有「與資訊欄同高」的概念，回到固定比例 */
  .detail-flex-left { align-items: center; }
  .detail-flex-left .detail-poster {
        align-self: auto;
        aspect-ratio: 3 / 4.5;
        height: auto;
  }
}
/* ---------- 海報改回等比縮放 ---------- */
/* 取消先前為了「下緣對齊按鈕」而做的垂直拉伸：拉伸會讓顯示比例變成 0.571，
   海報看起來偏瘦長。改回固定 3/4.5，高度由寬度等比換算，
   寬度本身用 clamp 隨視窗縮放，所以整張圖是等比例放大縮小、不會變形。
   代價是下緣不再與按鈕列切齊（兩者無法同時成立，見前面循環依賴的說明）。 */
.detail-flex-left { align-items: flex-start; }
.detail-flex-left .detail-poster {
    align-self: flex-start;
    width: clamp(260px, 24vw, 320px);
    aspect-ratio: 3 / 4.5;
    height: auto;
    flex: 0 0 auto;
}
.detail-flex-left .detail-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* ---------- 詳情頁內的區塊不留內距 ---------- */
/* 這兩個 class 疊在同一個元素上（class="section detail-section"）：
   .section 是首頁分類區塊的樣式、帶有自己的內距；.detail-section 是詳情頁的。
   在詳情頁裡外層容器已經負責左右留白了，這裡再留一層會讓區塊比隔壁的評論、
   播放列表往內縮，看起來對不齊。 */
.detail-bottom-main .section.detail-section {
    padding: 0;
}
/* ---------- 消除海報四周的白邊 ---------- */
/* 實測白邊來自兩處，兩者在淺色海報上看不出來，暗色海報就浮出來：
     1. border: 1px solid rgba(255,255,255,0.05) —— 白色系細框
     2. 容器底圖是 load.gif（淺灰），圖片載入前後都可能從邊緣透出
   圖片本身其實已經填滿內容區（實測 380x571 填進 382x573，四邊各差的 1px 就是邊框）。

   邊框改成深色：暗色海報不再出現亮線，淺色海報反而多了一點輪廓，兩種都合用。
   底色補上深色：load.gif 仍保留（專案規範要求載入前要有佔位動畫），
   但把它下面的底色從透明改成深色，邊緣即使透出也是暗的。 */
.detail-hero-wrap .detail-poster {
    border-color: rgba(0, 0, 0, 0.35);
    background-color: #0f1012;
}
/* ---------- 詳情頁的輪播列對齊所屬欄位寬度 ---------- */
/* 出血 pattern（.section 給左右內距 → .carousel-wrapper 用負 margin 抵銷 →
   .video-track 再補回同樣的內距）是為首頁設計的：首頁沒有側欄，區塊本身就佔滿畫面，
   出血能讓橫向捲動列一路延伸到螢幕邊緣，捲動時卡片不會憑空被切在內距線上。

   詳情頁的輪播卻是放在 .detail-bottom-main 這個「有側欄的欄位」裡，左右留白由外層的
   .detail-bottom-layout 統一負責，區塊本身不該再有內距。此時出血的三層互相抵銷後，
   淨結果是卡片比同欄的 tab 區、播放列表、評論整整內縮一個 gutter（實測 64px），
   右側則反過來溢出到側欄底下。

   所以這裡把三層一起歸零，讓 wrapper / track / 卡片的邊界都等於欄位本身。
   .video-track 上下的 150px 內距要保留——那是留給卡片 hover 放大用的空間，
   配合等量的負 margin 不佔版面高度，跟左右對齊無關。 */
.detail-bottom-main .section.detail-section .carousel-wrapper {
    margin-left: 0;
    margin-right: 0;
}
.detail-bottom-main .section.detail-section .video-track {
    padding-left: 0;
    padding-right: 0;
}
/* ---------- 詳情頁的推薦區塊標題不是連結 ---------- */
/* 共用的 .section-header 是為首頁／分類頁設計的：整條標題列是一個 <a>，
   帶 cursor:pointer 與 hover 展開「查看更多」。詳情頁的「猜你喜欢」「相关推荐」
   只是推薦列，標題點下去沒有合理的落地頁，HTML 已改成 <div>，這裡把游標一併
   改回一般箭頭，避免滑上去看起來還像可點。 */
.detail-bottom-main .section.detail-section .section-header {
    cursor: default;
}
/* ---------- 手機版海報水平置中 ---------- */
/* 手機是直排（.detail-flex-left 的 flex-direction: column），此時 flex 的跨軸是水平
   方向，所以海報要不要置中由 align-self 決定。

   ⚠️ 這段必須放在檔案最後：前面已經有兩處 768px 斷點把 align-items 設成 center
   （分別在 hero 直排、與「海報改回等比縮放」那兩輪改動裡），但更後面又有一條
   無條件的 .detail-flex-left { align-items: flex-start } 與 .detail-poster
   { align-self: flex-start }——media query 不會增加特異性，同特異性下後寫的贏，
   於是那兩條 center 全被蓋掉，實測手機版海報是靠左的（左邊距 0、右邊距 83px）。

   這裡用 align-self 只作用在海報自己身上，不改容器的 align-items，
   資訊欄維持原本的滿寬與左對齊，不受影響。 */
@media (max-width: 768px) {
  .detail-flex-left .detail-poster { align-self: center; }
}
/* ---------- 手機：.detail-info 整欄文字左對齊 ---------- */
/* 手機版原本是 .detail-hero-wrap .detail-info { text-align: center }，整欄
   （片名／英文名／評分／年份地區／主演導演／簡介）全部置中。敘述性文字置中之後
   每行起點都不一樣，很難掃讀，改成整欄左對齊。

   ⚠️ 只設 text-align 不夠。片名列與按鈕列是 flex 容器、另外帶了
   justify-content: center——flex 子項目的水平位置由 justify-content 決定，
   text-align 對它們無效，只改 text-align 的話那兩列還是會停在正中間。
   所以要一併把 justify-content 改成 flex-start。

   評分列（.detail-score-row）的 justify-content 本來就是預設值，不用處理。 */
@media (max-width: 768px) {
  /* text-align 管內部的文字節點；align-items 管 flex 子項目本身的位置。
       .detail-info 是 flex column、原本帶 align-items: center，寬度收縮的子項目
       （例如評分列）會被它置中，只改 text-align 對那些項目完全沒有效果。 */
  .detail-hero-wrap .detail-info { text-align: left; align-items: flex-start; }
}

/* ===== Tab 面板（评分已并入 Hero，只剩剧情/角色） ===== */
#tab-intro, #tab-cast {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 16px 20px;
  margin-bottom: 24px;
}
.detail-cast-list { list-style: none; padding: 0; }

/* ===== 面包屑容器（.breadcrumb 本体在 main.css）：Hero 之下、正文之上 ===== */
.detail-crumb-wrap { max-width: var(--content-max); margin: 0 auto; padding: 16px var(--gutter) 0; }

/* ===== 评分行：豆瓣分 + 星级 + 站内「我要评分」同一行 ===== */
.detail-score-row { flex-wrap: wrap; }
.score-src { font-size: 12px; color: var(--text-3); }
.rate-inline { display: inline-flex; align-items: center; gap: 6px; margin-left: 18px; }
.rate-label { font-size: 12px; color: var(--text-3); }
.rate-stars { display: inline-flex; gap: 2px; font-size: 20px; color: rgba(255,255,255,0.25); }
.rs { padding: 0 1px; line-height: 1; background: none; border: 0; color: inherit; cursor: pointer; transition: color .15s; }
.rs:hover, .rs.rs-on { color: var(--score-hi); }

/* ===== 基础信息 dl：dt 偏灰、dd 正文（基线「dt/dd 颜色区分」）；hero 深色背景上用白系 ===== */
.detail-meta { margin: 15px 0; font-size: 14px; color: rgba(255,255,255,0.85); }
.detail-meta .dm-row { display: flex; align-items: flex-start; gap: 4px; padding: 3px 0; line-height: 25px; }
.detail-meta dt { flex-shrink: 0; color: rgba(255,255,255,0.5); }
.detail-meta dt::after { content: "："; }
.detail-meta dd { margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.detail-meta dd a { color: rgba(255,255,255,0.85); }
.detail-meta dd a:hover { color: var(--accent); }
.detail-meta .dm-sep { color: rgba(255,255,255,0.4); margin: 0 2px; }
.dm-row--group { gap: 0 22px; flex-wrap: wrap; }
.dm-pair { display: flex; align-items: center; gap: 4px; }
.dm-actors { max-height: 50px; overflow: hidden; }
.status-badge { display: inline-block; padding: 1px 8px; font-size: 12px; border-radius: 4px; color: #fff; background: var(--accent); }
.status-badge.is-end { background: rgba(255,255,255,0.25); }
.status-remark { color: rgba(255,255,255,0.7); }
.detail-tags .dtag { display: inline-block; padding: 1px 9px; font-size: 12px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.8); }
.detail-tags .dtag:hover { color: var(--accent); border-color: var(--accent); }
.detail-hero-wrap .detail-actions { margin: 0; }
@media (max-width: 768px) {
  .detail-meta { font-size: 13px; }
  .detail-meta .dm-row { line-height: 22px; }
  .rate-inline { margin-left: 0; }
}