/* 大觀 2026 補充樣式：原站頁面裡的「用戶自訂 CSS」（維度後台首頁編輯器內嵌的 <style>）搬到這裡。
   只放外觀。顏色集中在下面兩個變數，要換色改這裡（NOTES.md 有記）。 */
:root { --dg-news-title: #000000; --dg-accent: #0488bc; }
@media (min-width: 1280px) { #nav-wrap .nav-ul li { margin: 0 0 .5rem 0; } }
#dv-news .slide-item .item-content .item-inner h3 a { color: var(--dg-news-title); }
#dv-news .slide-item .item-content .item-inner h3 a:hover,
#dv-news .slide-item:hover .item-content .item-inner h3 a { color: var(--dg-accent); }
.html5-video { max-width: 100%; width: 100%; height: auto; }

/* 手機／平板選單打開後，漢堡鈕變成 ✕。style_3155 把 ✕ 設成跟選單底色一樣的 #00a6d3，藍底上看不到；改白色。 */
#bar-nav.change .bar1, #bar-nav.change .bar2 { background: #fff; background-color: #fff; }

/* 節目頁人物照輪播（一排 3 張、自動輪播、箭頭＋圓點）。標記是原站的 .post-swiper，啟動由 dg-gallery.js。
   圖是直式（約 3:4），統一裁成 3:4、對齊上緣，臉不會被切掉；原站 CSS 已處理圓點位置與間距。 */
.post-content .post-swiper .slide-item img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; }
.post-content .post-swiper { --swiper-theme-color: #00a6d3; --swiper-navigation-size: 18px; }
.post-content .post-swiper .swiper-pagination-bullet { background: #9aa6ad; opacity: .7; }
.post-content .post-swiper .swiper-pagination-bullet-active { background: #00a6d3; opacity: 1; }

/* 節目頁左側資訊欄（演出單位／時間／地點）：原本標籤的灰底（#efeff0）在白色頁面上變成一塊灰，字又貼著灰塊邊緣、
   跟下面的內容只隔 10px。灰底改成跟頁面一樣的白（只是用來蓋住穿過標籤的那條線），標籤與內容、各項之間多留一點空間。 */
#program-post h4 span { background: #fff; padding-right: 1.25rem; line-height: 1.6; }
#program-post .post-info .li h4 { margin-bottom: 1rem; }
#program-post .post-info .li { margin-bottom: 2.25rem; }
#program-post .post-info .li p { line-height: 1.85; }

/* 節目頁「上一則／下一則」：跟內容欄（右側 70%）對齊，不要貼著左邊資訊欄、也不要置中。
   系統預設是置中、最大寬 860px；節目頁左邊有 30% 的資訊欄（≥1280px 才浮動），所以只在那個寬度以上靠右對齊內容。 */
@media (min-width: 1280px) {
  /* 上一則／下一則本來就在右側內容欄（.post-content）裡面，不能再往右推 30%，否則比內文多縮進一截（老大 10/27 圈出） */
  #program-post .cms-post-nav { max-width: none; width: auto; margin: 2.5rem 0 0; padding: 1.5rem 0 0; box-sizing: border-box; }
}

/* 回到頂端鈕：style_3155 對所有 button 設了膠囊外框樣式，系統的圓形置頂鈕被撐成 104×46 的空心膠囊（老大：不好看）。
   還原成圓形，並跟上面的社群圓球對齊：同樣 40px、同樣離右邊 19px（圓心同一條垂直線）、跟最下面那顆社群球隔 10px（社群球之間也是 10px）。
   顏色：白底藍線（老大：「蓋成白底藍線」）——1px 藍框＋藍色細箭頭，滑過變藍底白箭頭。 */
button.cms-backtop.cms-backtop--circle { width: 40px; height: 40px; min-width: 0; padding: 0; right: 19px; bottom: 30px; border: 1px solid #00a6d3; border-radius: 50%; background: #fff; color: #00a6d3; box-shadow: 0 2px 8px rgba(0, 166, 211, .18); }
button.cms-backtop.cms-backtop--circle:hover { background: #00a6d3; color: #fff; }
button.cms-backtop.cms-backtop--circle svg { width: 20px; height: 20px; }
button.cms-backtop.cms-backtop--circle svg path, button.cms-backtop.cms-backtop--circle svg polyline, button.cms-backtop.cms-backtop--circle svg line { stroke-width: 1.6; }

/* 節目頁輪播下方的圓點：原本每顆都有一圈藍色外框，老大要「不要有線條」→ 拿掉外框，只留實心圓（灰＝其他張、藍＝目前這張）。 */
.post-content .post-swiper .swiper-pagination-bullet,
.post-content .post-swiper .swiper-pagination-bullet-active { box-sizing: border-box; width: 12px; height: 12px; margin: 3px; border: 0; outline: 0; box-shadow: none; -webkit-transform: none; transform: none; }
/* 外框拿掉後，目前這一顆跟其他顆一樣大（都是 12px 實心圓），只靠顏色分辨（灰＝其他張、藍＝目前這張）。 */

/* 節目頁輪播的左右箭頭：先前是白色粗箭頭＋深灰半透明圓，太粗太重（老大：「太粗糙」「線條太粗太重」）。
   改成：白色圓（92% 不透明、很淡的陰影）＋極細線條箭頭（1px，用 CSS mask 畫，不靠字型），滑過變藍底白箭頭。 */
.post-content .post-swiper { --dg-arrow-r: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M6 2.5l5.5 5.5L6 13.5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); --dg-arrow-l: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M10 2.5L4.5 8 10 13.5%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); }
/* 箭頭不要圓圈（老大：「換個樣式，不要圈圈」）：只留細線條的箭頭，白色加一圈很淡的陰影，放在照片上看得清楚；滑過放大一點、變藍。 */
.post-content .post-swiper .swiper-button-prev, .post-content .post-swiper .swiper-button-next { width: 36px; height: 36px; margin-top: -18px; border-radius: 0; background: transparent; box-shadow: none; color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55)); transition: transform .2s, color .2s; }
.post-content .post-swiper .swiper-button-prev:after, .post-content .post-swiper .swiper-button-next:after { content: ''; font-family: inherit; display: block; width: 24px; height: 24px; background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.post-content .post-swiper .swiper-button-next:after { -webkit-mask-image: var(--dg-arrow-r); mask-image: var(--dg-arrow-r); }
.post-content .post-swiper .swiper-button-prev:after { -webkit-mask-image: var(--dg-arrow-l); mask-image: var(--dg-arrow-l); }
.post-content .post-swiper .swiper-button-prev:hover, .post-content .post-swiper .swiper-button-next:hover { background: transparent; color: #00a6d3; transform: scale(1.15); }

/* 節目頁內容裡的分隔線（輪播下方、節目介紹與製作團隊之間）原本是深灰粗線（原站內容的 <hr>），太重；改成 1px 淡灰細線。 */
#program-post .post-content hr { border: 0; height: 1px; background: #dcdddd; margin: 2rem 0; }

/* 輪播（圓點）與下面的分隔線、節目介紹之間的間距加大（老大：「與下面間距大一點」）。 */
.post-content .post-swiper .swiper-container { margin-bottom: 4.5rem; }
#program-post .post-content hr { margin: 2.5rem 0; }

/* 節目頁「製作團隊」名單：原站是一行貼一行的純文字，擠、看不出層次（老大：「排版不好看」）。
   匯入時重組成：職稱（灰、固定欄寬）／姓名（深色）兩欄，行距加大，段落之間留空，小標題加粗；手機改上下兩行。 */
.dg-credits { margin: 0 0 2rem; }
.dg-credits h2 { margin: 0 0 1.25rem; }
.dg-credit { display: grid; grid-template-columns: minmax(8em, 12em) 1fr; gap: 0 1.5rem; padding: .5rem 0; line-height: 1.8; }
.dg-credit .dg-r { color: #727171; }
.dg-credit .dg-n { color: #1a1a1a; font-weight: 500; overflow-wrap: anywhere; }
.dg-credit-h { margin: 2rem 0 .5rem; font-weight: 700; color: #1a1a1a; }
.dg-credit-gap { height: .75rem; }
@media (max-width: 767px) {
  .dg-credit { grid-template-columns: 1fr; padding: .4rem 0; }
  .dg-credit .dg-r { font-size: .875rem; }
}

/* 內頁橫幅標題往上一點（老大：「上去一點」）。 */
.dg-banner .sp-slide .sp-font { margin-top: -.875rem; }

/* 文章／節目標題下面那條細線往上移，離下面的內容遠一點（老大：「線條上移」「線條與下面距離大一點」）。
   做法：底線離標題的距離縮成 .75rem，縮掉的距離加到線的下方（總高度不變，下面的內容位置不動、線跟內容的距離變大）。
   原值：<768px 1.25＋1.5rem、≥768px 1.875＋.5rem、≥1280px 2.5＋.75rem。 */
.info-wrap .info-h1 { padding-bottom: .75rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .info-wrap .info-h1 { padding-bottom: .75rem; margin-bottom: 1.625rem; } }
@media (min-width: 1280px) { .info-wrap .info-h1 { padding-bottom: .75rem; margin-bottom: 2.5rem; } }

/* 文章／節目頁底部的「分享」：原本是品牌色的圓形按鈕（臉書藍、LINE 綠、複製連結深灰），改成單色灰黑的小圖示、不要圓圈（老大）。
   滑過變藍。 */
.cms-share .cms-share__btn { width: auto; height: auto; padding: 6px; border-radius: 0; background: transparent !important; box-shadow: none !important; color: #4a4a4a; }
.cms-share .cms-share__btn:hover { transform: none; filter: none; color: #00a6d3; }
.cms-share .cms-share__btn .cms-si { background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0; width: auto; height: auto; color: inherit !important; }
.cms-share .cms-share__btn svg { width: 18px; height: 18px; }
.cms-share .cms-share__list { gap: 4px; }

/* 上一則／下一則：style_3155 的 reset 把所有 nav 設成 display:block，系統預設的兩欄 grid（用 :where() 寫，權重 0）被蓋掉，
   上一則、下一則變成上下堆疊、下一則掉到下面（老大：「上下則又壞掉」）。用 nav.cms-post-nav（權重比 nav 高）把兩欄排版寫回來。 */
nav.cms-post-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
nav.cms-post-nav a { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
nav.cms-post-nav .cms-post-nav__next { grid-column: 2; text-align: right; }
nav.cms-post-nav .cms-post-nav__prev { grid-column: 1; }
@media (max-width: 600px) {
  nav.cms-post-nav { grid-template-columns: 1fr; }
  nav.cms-post-nav .cms-post-nav__next { grid-column: 1; text-align: left; }
}

/* 首頁預告片：YouTube 的 iframe 內容裡寫死 width=352 height=626 並且是 inline，比 Swiper 的一格（288px）還寬，
   影片互相疊在一起、沒有間距、最右邊那支被切掉（老大：「首頁的影片排版壞掉」）。原站是 9:16、寬度跟著那一格。 */
.videoSwiper iframe { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border: 0; }

/* 頁首右上「首頁」：照示範稿 home_D_brush（style_3155）做成 40px 圓形房子圖示——原站用 a[href="index.php"] 加 Font Awesome 房子字元，
   CUBE 的連結是「/」，那組規則吃不到，所以字是直接顯示（老大：「讓他跟版一樣」）。
   頁首上：透明底＋白色細框＋白色房子，滑過變白底藍房子；打開的選單（藍底）裡：白底藍房子。圖示用 SVG mask，不靠字型。 */
#nav-tt a.dg-home { font-size: 0; position: relative; color: #fff; }
#nav-tt a.dg-home:before { content: ''; display: block; box-sizing: border-box; width: 40px; height: 40px; border-radius: 30px; background: transparent; border: 1px solid rgba(255, 255, 255, .7); }
#nav-tt a.dg-home:after { content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M3 11.2L12 3.8l9 7.4M5.5 9.6V20h13V9.6M9.8 20v-5.6h4.4V20%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.3%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M3 11.2L12 3.8l9 7.4M5.5 9.6V20h13V9.6M9.8 20v-5.6h4.4V20%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.3%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") center / contain no-repeat; }
header #nav-tt a.dg-home:hover { color: #00a6d3; }
header #nav-tt a.dg-home:hover:before { background: #fff; }
#nav-wrap #nav-tt a.dg-home { color: #00a6d3; }
#nav-wrap #nav-tt a.dg-home:before { background: #fff; border-color: #fff; }
#nav-wrap #nav-tt a.dg-home:hover { color: #0088ad; }

/* 節目頁標題兩層字級（客戶文件要求：主標大、副標小一點、英文名更小；副標題欄用「｜」分段，見 _dg_sub.php）。
   字級只在節目頁的 h1.has-sub 內生效，其他頁的標題不受影響。 */
.info-wrap .info-h1.has-sub .dg-main { display: block; font-size: 1.75rem; line-height: 1.3; }
.info-wrap .info-h1.has-sub .dg-sub { display: block; font-size: 1.125rem; line-height: 1.5; margin-top: .375rem; }
.info-wrap .info-h1.has-sub .dg-sub-up { margin: 0 0 .375rem; }
.info-wrap .info-h1.has-sub .dg-sub.dg-en { font-size: 1rem; line-height: 1.4; opacity: .85; }
@media (min-width: 1280px) {
  .info-wrap .info-h1.has-sub .dg-main { font-size: 2.5rem; }
  .info-wrap .info-h1.has-sub .dg-sub { font-size: 1.375rem; }
  .info-wrap .info-h1.has-sub .dg-sub.dg-en { font-size: 1.125rem; }
}
/* 節目卡片（首頁輪播、節目總表）的副標：沿用卡片原本的小字，副標與英文名各一行 */
.item-title .dg-card-sub .dg-sub { display: block; }
.item-title .dg-card-sub .dg-sub.dg-en { font-size: .9375rem; opacity: .85; }
/* 演出單位：中文較大、英文較小，置中堆疊，兩單位之間夾一個 X */
#program-post .post-info .dg-units { text-align: center; }
#program-post .post-info .dg-unit b { display: block; font-weight: normal; font-size: 1.125rem; line-height: 1.6; }
#program-post .post-info .dg-unit i { display: block; font-style: normal; font-size: .9375rem; line-height: 1.5; opacity: .85; }
#program-post .post-info .dg-unit-x { margin: .5rem 0; line-height: 1.2; }

/* 頁尾單位 logo：沿用前幾年的排法——每一組「標籤＋logo」是一塊，依寬度橫向排、放不下才換行（桌機一列放 2～3 組，右邊不會空一大片）。
   第一版我改成每組一列，桌機右半邊整片空白（老大 10/27），所以退回流動排版，只加大組與組的間距。 */
section.foot-logo { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 1.75rem 2.5rem; }
section.foot-logo .info-logo { flex: 0 1 auto; min-width: 0; max-width: 100%; }
section.foot-logo .info-logo > div { line-height: 1.8; }
/* 一組的 logo 總寬可能超過視窗（平板、手機），所以各寬度都要能縮、logo 在組內換行，否則整頁出現橫向捲軸 */
section.foot-logo .info-logo > p { max-width: 100%; }
section.foot-logo .info-logo img { max-width: 100%; height: auto !important; }
@media (max-width: 767px) {
  section.foot-logo { gap: 1.25rem 1.5rem; align-items: flex-start; }
  section.foot-logo .info-logo { display: block; }
}

/* 內頁內容到頁尾之間的空白過大（原樣式內容區下方 3rem＋外層 6.25rem 疊加，約 150px）→ 收成約 40px（老大 10/27 圈出「拿掉這個空白處」）。 */
#wrap-c { margin-bottom: 1rem; }
#wrap-c #main { margin-bottom: 1rem; }

/* 頁首縮放時瞬間閃一下白底：頁首底圖（筆刷 svg，已轉白色、套 filter）原本用「頁首高度的 420%」當尺寸，
   頁首高度 88px→64px 動畫的每一格都得重畫整張濾鏡後的 svg，瀏覽器重畫那一格會露出白色。
   改成固定尺寸（等於原本未縮小時的大小，各斷點的頁首高度 ×4.2）＋獨立圖層，縮放只動高度、不再重畫底圖。 */
header:before { background-size: auto 12.6rem; transition: opacity .42s ease; will-change: opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); }
@media (min-width: 768px) { header:before { background-size: auto 15.75rem; } }
@media (min-width: 1280px) { header:before { background-size: auto 23.1rem; } }
header { -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* 最新消息內頁的上一則／下一則：系統預設是置中、最大寬 860px，跟左右滿版的內文與分享列對不齊（老大 10/27 圈出）→ 跟內文同寬，下一則靠右緣。 */
.info-cc .cms-post-nav { max-width: none; width: auto; margin: 2.5rem 0 0; padding: 1.5rem 0 0; box-sizing: border-box; }

/* 首頁節目海報輪播：手機左右不內縮，海報區貼齊螢幕邊（老大 10/27）。原樣式用 !important 內縮 1rem，所以這裡也要 !important；只作用在本站 */
@media (max-width: 767px) {
  #dv-programs, #dv-video { padding-left: 0 !important; padding-right: 0 !important; }
  #dv-programs .programs-swiper-button-prev { margin-right: 4.5rem; }
  /* 預告影片：右側貼齊螢幕（原樣式影片框左右各內縮 30px，右邊第二支影片切在離螢幕邊 30px 處） */
  #dv-video .video-frame { padding-right: 0 !important; }
}

/* 首頁預告影片：平板寬度（768～1279）原樣式把影片框鎖 560px 置中，左邊對不到標題、右邊空一大塊（老大 10/27）→ 框左緣對齊標題、右側延伸到螢幕邊（第三支影片切在螢幕邊，不是切在框內） */
@media (min-width: 768px) and (max-width: 1279px) {
  #dv-video { padding-right: 0 !important; }
  #dv-video .video-frame { max-width: none; margin-left: 0; margin-right: 0; padding-right: 0 !important; }
}

/* 首頁節目總覽（張與張間距：768px 以下 12px、769px 以上 24px；只有 768px 以下左右貼齊螢幕，769px 以上照原樣式留左右內縮——老大 10/27「只有平板直立貼齊、桌機間距大一點」）：中間一張放大、兩側縮小並被邊切掉（欄數與間距在 dg_programs/script.js），海報貼齊螢幕（老大 10/27 畫圖指示）。
   原樣式兩側 scale(.9) 以自己的中心縮，縮完中間多出 5% 寬的空隙（約 15～20px）；改成往中間那張靠攏縮，張與張之間才會維持 6px。 */
#dv-programs .swiper-slide-prev { transform-origin: right center; }
#dv-programs .swiper-slide-next { transform-origin: left center; }
/* 再外一張（桌機會露出一部分）一樣往中間靠，位移補回上一張縮掉的 10% 寬 */
#dv-programs .swiper-slide:has(~ .swiper-slide-prev) { transform-origin: right center; transform: translateX(10%) scale(.9) !important; }
#dv-programs .swiper-slide-next ~ .swiper-slide { transform-origin: left center; transform: translateX(-10%) scale(.9) !important; }
#dv-programs .slide-item { margin: 0 !important; width: 100%; }
#dv-programs .item-img img { width: 100% !important; height: auto !important; }
@media (max-width: 768px) {
  #dv-programs { padding-left: 0 !important; padding-right: 0 !important; }
}
/* 手機（567px 以下）三張一樣大，不放大中間（老大 10/27「手機改成一樣大看看，間距至少 12px」） */
@media (max-width: 567px) {
  #dv-programs .swiper-slide,
  #dv-programs .swiper-slide:has(~ .swiper-slide-prev),
  #dv-programs .swiper-slide-next ~ .swiper-slide { transform: none !important; }
}

/* 首頁最新消息：卡片間距各斷點統一 12px（欄距在 dg_news/script.js，原樣式每張卡左右各 6px 內距，會讓不同斷點實際間距忽大忽小，所以拿掉）；
   手機兩欄左右對稱內縮 1rem（與標題左緣對齊）；文字框與日期的內縮縮小（老大 10/27）。 */
html body #dv-news #news-swiper .swiper-slide .slide-item { padding-left: 0 !important; padding-right: 0 !important; }
#dv-news .item-date { padding-left: 22px; padding-right: 22px; }
@media (max-width: 1279px) {
  #dv-news .item-inner { padding: 12px !important; }
  #dv-news .item-date { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 567px) {
  #dv-news { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* 首頁最新消息標題最多三行，超過以 … 收尾，卡片高度才不會參差（老大 10/27「最多三行」） */
#dv-news .slide-item .item-content .item-inner h3 a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; line-height: 1.5; }
/* 標題框固定三行高（老大 10/27「高度都是三行高」）：兩行標題的卡片也跟三行的一樣高 */
#dv-news .slide-item .item-content .item-inner h3 { min-height: 4.5em; line-height: 1.5; }

/* 輪播左右箭頭：三個輪播（節目總覽／最新消息／預告影片）手機的箭頭間距統一，原樣式最新消息只隔 30px、預告影片兩個箭頭幾乎黏在一起（老大 10/27「箭頭黏在一起」） */
@media (max-width: 767px) {
  #dv-news .news-swiper-button-prev { margin-right: 4.5rem; }
  #dv-video .video-prev, #dv-video .video-next { margin: 0; left: 0 !important; right: 0 !important; }   /* 原標記有行內 left/right:-30px */
  #dv-video .video-prev { order: -1; margin-right: 4.5rem; }   /* 原標記 next 在 prev 前面，手機並排時箭頭左右會顛倒 */
}

/* 頁尾最下面空白過大：最後一組 logo 到版權列之間疊了 logo 區下外距 32＋內距 16＋頁尾外框 40，約 100px → 收成約 40px（老大 10/27） */
@media (max-width: 767px) {
  section.foot-logo { margin-bottom: 0; padding-bottom: 0; }
  #footer-wrap { padding-bottom: 1rem; }
}


/* 預告片橫式 16:9（後台「影片比例」選橫式才有 .dg-wide）：影片佔滿欄寬、依比例縮放；只有一支時不顯示箭頭與圓點（客戶 10/29：這次只有一支預告片） */
#dv-video.dg-wide .videoSwiper .swiper-slide iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
#dv-video.dg-single .swiper-navigation, #dv-video.dg-single .video-pagination { display: none; }


/* 節目頁照片點圖放大（dg-gallery.js 建立 .dg-lb）：黑底全螢幕、圖依視窗縮放；只作用在本站節目頁相簿 */
.programswiper img { cursor: zoom-in; }
html.dg-lb-lock { overflow: hidden; }
/* 開關與切換都有過場（老大 11/09：原本直接跳出來「很生硬」）：背景 .25s 淡入；圖片從 96% 淡入放大到 100%，切換時先淡出再換圖 */
.dg-lb { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .88); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
.dg-lb.is-on { opacity: 1; visibility: visible; transition: opacity .25s ease; }
.dg-lb-img { display: block; max-width: 92vw; max-height: 92vh; width: auto; height: auto; object-fit: contain; border-radius: 6px; cursor: default; opacity: 0; transform: scale(.96); transition: opacity .22s ease, transform .3s cubic-bezier(.2, .7, .2, 1); }
.dg-lb-img.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .dg-lb, .dg-lb.is-on, .dg-lb-img { transition: none; } }
.dg-lb button { position: absolute; border: 0; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; line-height: 1; font-family: inherit; }
.dg-lb button:hover { background: rgba(255, 255, 255, .28); }
.dg-lb-x { top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; font-size: 1.75rem; }
.dg-lb-prev, .dg-lb-next { top: 50%; width: 48px; height: 64px; margin-top: -32px; border-radius: 6px; font-size: 2.5rem; display: none; }
.dg-lb.has-nav .dg-lb-prev, .dg-lb.has-nav .dg-lb-next { display: block; }
.dg-lb-prev { left: 12px; }
.dg-lb-next { right: 12px; }
@media (max-width: 767px) { .dg-lb-img { max-width: 100vw; max-height: 86vh; border-radius: 0; } .dg-lb-prev, .dg-lb-next { width: 40px; height: 56px; margin-top: -28px; } }

/* 同中求異這類橫式劇照相簿（標記 .dg-land）：照原比例 16:9 顯示，不套人物照的 3:4 直式裁切（客戶 11/06 給的 11 張演後劇照是橫式） */
.post-content .post-swiper.dg-land .slide-item img { aspect-ratio: 16 / 9; object-position: center; }