/* =========================================================
   首頁 v4 改版 home-v4.css（2026.10）
   搭配 assets/js/home-v4.js；載入順序在 home.css、home-fx.css 之後。
   分工：學生／招生區塊 → 活潑色彩（.is-pop）；榮譽區塊（紅點、消息）→ 保留黑金。
   ========================================================= */
.home {
	--pop: #FF5A36; --sun: #FFD23F; --sky: #2F6BFF; --mint: #12A876; --grape: #B45CFF;
	--c-brand: #2F6BFF; --c-pack: #FF6B2C; --c-pub: #12A876; --c-illu: #B45CFF;
	--m-plan: #12A876; --m-digi: #2F6BFF; --m-craft: #E9A100;
}

/* ---------- 活潑區塊共用：標題強調字＝螢光筆 ---------- */
.home .is-pop .h-head .h-mono { color: var(--pop); }
.home .h-head h2 em { isolation: isolate; }
.home .is-pop .h-head h2 em { color: var(--ink); }
.home .is-pop .h-head h2 em::after { background: var(--sun); height: .42em; bottom: .02em; opacity: .85; }
.home .is-pop .h-more { border-bottom-color: var(--pop); }
.home .is-pop .h-more i { color: var(--pop); }
.home .is-pop .h-chip { border-color: var(--ink); }
.home .is-pop .h-chip:hover { background: var(--pop); border-color: var(--pop); }

/* =========================================================
   A. 主視覺（2026-10-07 改為金銀雅致版）
   作品牆維持原彩度與亮度，輪播字改金／銀漸層，底線改細金線
   ========================================================= */
.h-hero .h-wall { filter: brightness(.9) saturate(1.04); transform: rotate(-4deg) translate3d(var(--wx, 0px), var(--wy, 0px), 0) scale(1.06); transition: transform 1.6s cubic-bezier(.2, .8, .2, 1); }
.h-hero .h-row img { border-radius: 2px; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8); }
/* 遮罩：左側文字區壓深，右側作品若隱若現 */
.h-hero .h-shade { background:
	linear-gradient(90deg, rgba(18, 19, 21, .94) 0%, rgba(18, 19, 21, .88) 40%, rgba(18, 19, 21, .45) 64%, rgba(18, 19, 21, .14) 86%, rgba(18, 19, 21, .08) 100%),
	linear-gradient(0deg, rgba(18, 19, 21, .82), transparent 25%); }
/* 輪播字：香檳金漸層，奇偶字流光方向相反 */
.home { --au1: #F7EBCD; --au2: #DCBC7E; --au3: #A98447; --ag1: #FFFFFF; --ag2: #EEF3F8; --ag3: #B9C4D0; }
.h-title .h-rot { color: var(--gold-l) !important; cursor: pointer; position: relative; }
.h-title .h-rot b { background-image: linear-gradient(105deg, var(--g2) 0%, var(--g1) 22%, var(--g2) 42%, var(--g3) 62%, var(--g2) 80%, var(--g1) 100%); filter: drop-shadow(0 0 14px var(--glow)) drop-shadow(0 1px 0 rgba(0, 0, 0, .3)); background-size: 220% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-bottom: .06em; }
.h-title .h-rot b.on { animation: auShine 6s ease-in-out infinite; }
@keyframes auShine { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.h-title .h-rot b:nth-child(odd) { --g1: var(--au1); --g2: var(--au2); --g3: var(--au3); --glow: rgba(220, 188, 126, .16); }   /* 由右往左流光 */
.h-title .h-rot b:nth-child(even) { --g1: var(--au1); --g2: var(--au2); --g3: var(--au3); --glow: rgba(220, 188, 126, .16); background-image: linear-gradient(75deg, var(--g2) 0%, var(--g1) 22%, var(--g2) 42%, var(--g3) 62%, var(--g2) 80%, var(--g1) 100%); background-position: 0 0; }
.h-title .h-rot b:nth-child(even).on { animation-name: auShineR; }
@keyframes auShineR { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } }  /* 偶數字：由左往右流光 */
.h-title .h-rot::after { content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: 1.5px; background: linear-gradient(90deg, transparent, var(--au2) 20%, var(--au1) 50%, var(--au2) 80%, transparent); opacity: .65; transition: opacity .4s; }
.h-title .h-rot:hover::after { opacity: 1; }
/* 主按鈕：香檳金 */
.h-hero .h-btn.pri { background: linear-gradient(105deg, #EFDFB8, #D2B176 60%, #B8945A); color: #1c170e !important; font-weight: 700; }
.h-hero .h-btn.pri:hover { background: #fff; }
.h-hero .h-btn.gho:hover { border-color: var(--au2); color: var(--au1) !important; }

/* =========================================================
   B. 學生作品：可左右滑的作品帶＋分類篩選
   ========================================================= */
.h-works { background: #fff; padding-bottom: 96px; }
.h-wk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -12px 0 28px; }
.h-wk-bar > button { appearance: none; border: 1.5px solid var(--line); background: #fff; color: var(--ink-2); border-radius: 99px; height: 42px; padding: 0 18px; font: 500 14.5px/1 var(--sans); letter-spacing: .04em; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background .3s, color .3s, border-color .3s, transform .2s; }
.h-wk-bar > button small { font: 600 11px/1 ui-monospace, Menlo, monospace; opacity: .6; }
.h-wk-bar > button:hover { border-color: var(--ink); color: var(--ink); }
.h-wk-bar > button[aria-pressed="true"] { background: var(--bc, var(--ink)); border-color: var(--bc, var(--ink)); color: #fff; }
.h-wk-bar > button[data-c="brand"] { --bc: var(--c-brand); } .h-wk-bar > button[data-c="pack"] { --bc: var(--c-pack); }
.h-wk-bar > button[data-c="pub"] { --bc: var(--c-pub); } .h-wk-bar > button[data-c="illu"] { --bc: var(--c-illu); }
.h-wk-bar > button:active { transform: scale(.95); }
.h-wk-bar .nav { margin-left: auto; display: flex; gap: 8px; }
.h-wk-bar .nav button { appearance: none; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; display: grid; place-items: center; font-size: 14px; transition: background .3s, color .3s, opacity .3s; }
.h-wk-bar .nav button:hover { background: var(--ink); color: #fff; }
.h-wk-bar .nav button:disabled { opacity: .25; pointer-events: none; }

.h-wk-track, .h-al-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: max(24px, calc((100vw - 1152px) / 2)); padding: 12px max(24px, calc((100vw - 1152px) / 2)) 28px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.h-wk-track::-webkit-scrollbar, .h-al-track::-webkit-scrollbar { display: none; }
.h-wk-track.drag, .h-al-track.drag { scroll-snap-type: none; cursor: grabbing; }
.h-wk-track.drag a, .h-al-track.drag a { pointer-events: none; }
.h-wk { --c: var(--c-brand); flex: 0 0 clamp(250px, 26vw, 340px); scroll-snap-align: start; color: var(--ink) !important; display: flex; flex-direction: column; opacity: 0; transform: translateY(40px) rotate(1.5deg); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.h-wk[data-c="pack"] { --c: var(--c-pack); } .h-wk[data-c="pub"] { --c: var(--c-pub); } .h-wk[data-c="illu"] { --c: var(--c-illu); }
.h-works.in .h-wk { opacity: 1; transform: none; }
.h-wk.off { display: none; }
.h-wk .ph { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--bg-2); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s; }
.h-wk .ph::after { content: ""; position: absolute; inset: 0; border: 4px solid var(--c); border-radius: inherit; opacity: 0; transition: opacity .3s; pointer-events: none; }
.h-wk .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.2, .8, .2, 1); }
.h-wk:hover .ph, .h-wk.act .ph { box-shadow: 0 26px 40px -24px color-mix(in srgb, var(--c) 70%, #000); }
.h-wk:hover .ph::after, .h-wk.act .ph::after { opacity: 1; }
.h-wk:hover .ph img, .h-wk.act .ph img { transform: scale(1.07); }
.h-wk .aw { position: absolute; left: 10px; top: 10px; font: 600 11.5px/1 var(--sans); letter-spacing: .04em; font-style: normal; background: rgba(255, 255, 255, .94); color: var(--ink); padding: 7px 10px; border-radius: 99px; display: inline-flex; align-items: center; gap: 6px; }
.h-wk .aw::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.h-wk .aw.top { background: var(--red); color: #fff; }
.h-wk .aw.top::before { background: var(--sun); box-shadow: 0 0 0 3px rgba(255, 210, 63, .35); }
.h-wk .tx { display: block; padding: 14px 4px 0; }
.h-wk small { display: block; font: 600 11.5px/1 var(--sans); letter-spacing: .08em; color: var(--c); }
.h-wk b { display: block; margin-top: 8px; font-family: var(--serif); font-size: 22px; font-weight: 900; line-height: 1.35; }
.h-wk i { display: block; font-style: normal; margin-top: 4px; font-size: 13px; color: var(--ink-3); letter-spacing: .02em; }
.h-wk-prog { height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
.h-wk-prog i { display: block; height: 100%; width: var(--w, 20%); background: var(--pop); border-radius: 3px; transform: translateX(var(--x, 0%)); transition: width .3s; }

/* =========================================================
   C. 四件事：每張卡用自己的顏色
   ========================================================= */
.home .h-q .n { color: var(--c); }
.home .h-q .n::after { color: #fff !important; }
.home .h-q::before, .home .h-q:nth-child(even)::before { background: var(--c); }
.home .h-q:hover, .home .h-q.act { color: #fff !important; }
.home .h-q:hover p, .home .h-q.act p { color: rgba(255, 255, 255, .9) !important; }
.home .h-q:hover .n, .home .h-q.act .n { color: #fff !important; }
.home .h-q .ic { color: #fff !important; }
.home .h-q .go { color: var(--c); transition: color .45s; }
.home .h-q:hover .go, .home .h-q.act .go { color: #fff; }
.home .h-q::after, .home .h-q:nth-child(even)::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .28), transparent 60%); }
.home .h-q:hover { box-shadow: 0 34px 50px -30px var(--c); }
/* 頂端色條：捲到就畫出 */
.h-q > .bar { position: absolute; left: 0; right: 0; top: -1px; height: 4px; background: var(--c); transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s cubic-bezier(.7, 0, .2, 1) .3s; }
.h-q.in > .bar { transform: scaleX(1); }
.h-q.act::before { transform: scaleY(1); }
.h-q.act .ic { opacity: 1; transform: none; }

/* =========================================================
   D. 四年怎麼學：隨捲動點亮的時間軸
   ========================================================= */
.home .h-years::after { transform: scaleX(var(--p, 0)) !important; transition: none !important; background: linear-gradient(90deg, var(--m-plan), var(--m-digi), var(--pop)) !important; height: 3px; margin-top: -1.5px; }
.home .h-yr::before { transition: transform .4s, background .4s, box-shadow .4s; }
.home .h-yr.lit::before { background: var(--yc, var(--pop)); transform: scale(1.6); box-shadow: 0 0 0 5px color-mix(in srgb, var(--yc, var(--pop)) 22%, transparent); }
.home .h-yr { --yc: var(--m-plan); }
.home .h-yr:nth-child(2) { --yc: var(--m-digi); } .home .h-yr:nth-child(3) { --yc: var(--pop); } .home .h-yr:nth-child(4) { --yc: var(--m-craft); }
.home .h-yr small, .home .h-yr h3, .home .h-yr p { transition: color .5s, opacity .5s, transform .5s cubic-bezier(.2, .8, .2, 1); }
.home .h-years.js .h-yr:not(.lit) h3, .home .h-years.js .h-yr:not(.lit) p { opacity: .38; }
.home .h-yr.lit small { color: var(--yc); font-weight: 700; }
.home .h-yr.lit h3 { color: var(--ink); }
.home .h-yr.hi::before { animation: none; }
.home .h-yr.hi.lit::before { animation: hxPulse 2.4s ease-out infinite; }
/* 三大模組：更明亮的色彩 */
.home .h-mod { background: color-mix(in srgb, var(--c) 7%, #fff); }
.home .h-mod:hover, .home .h-mod.act { background: color-mix(in srgb, var(--c) 12%, #fff); }
.home .h-mod .big { opacity: .35; }
.home .h-mod li { background: #fff; border-radius: 99px; padding: 5px 12px; font-size: 13px; }
.home .h-mod li::before { display: none; }
.home .h-mod ul { gap: 6px; }
.home .h-mod.act { transform: translateY(-6px); box-shadow: 0 26px 44px -30px rgba(18, 19, 22, .45); }
.home .h-mod.act::before { transform: scaleX(1); }

/* =========================================================
   E-1. 傑出系友
   ========================================================= */
.h-alumni { background: var(--bg); }
.h-al-stat { display: flex; gap: 0; }
.h-al-stat div { padding: 0 24px; border-left: 1px solid var(--line); }
.h-al-stat div:first-child { border-left: 0; padding-left: 0; }
.h-al-stat b { display: block; font-family: var(--serif); font-size: 44px; font-weight: 900; line-height: 1; color: var(--ink); }
.h-al-stat span { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.h-al { flex: 0 0 clamp(220px, 21vw, 260px); scroll-snap-align: start; background: #fff; border-radius: 14px; padding: 14px 14px 20px; color: var(--ink) !important; display: flex; flex-direction: column; position: relative; transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s; opacity: 0; transform: translateY(30px); transition-delay: calc(var(--i, 0) * 60ms); }
.h-alumni.in .h-al { opacity: 1; transform: none; }
.h-alumni.in .h-al:hover, .h-alumni.in .h-al.act { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 28px 40px -28px color-mix(in srgb, var(--c) 80%, #000); transition-delay: 0s; }
.h-al .ph { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--c) 18%, #fff); position: relative; }
.h-al .ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); transition: filter .6s, transform 1s cubic-bezier(.2, .8, .2, 1); }
.h-al .ph::after { content: ""; position: absolute; inset: 0; background: var(--c); mix-blend-mode: multiply; opacity: .25; transition: opacity .6s; }
.h-al:hover .ph img, .h-al.act .ph img { filter: none; transform: scale(1.05); }
.h-al:hover .ph::after, .h-al.act .ph::after { opacity: 0; }
.h-al .fd { align-self: flex-start; margin-top: 14px; font: 600 11.5px/1 var(--sans); letter-spacing: .06em; color: #fff; background: var(--c); padding: 6px 10px; border-radius: 99px; }
.h-al b { margin-top: 12px; font-family: var(--serif); font-size: 22px; font-weight: 900; line-height: 1.3; }
.h-al b small { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink-3); margin-left: 8px; }
.h-al .jb { margin-top: 8px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); flex: 1; }
.h-al .yr { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); font: 600 11.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .08em; color: var(--ink-3); }
.h-al-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.h-al-foot .nav { margin-left: auto; display: flex; gap: 8px; }
.h-al-foot .nav button { appearance: none; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; font-size: 14px; transition: background .3s, color .3s, opacity .3s; }
.h-al-foot .nav button:hover { background: var(--ink); color: #fff; }
.h-al-foot .nav button:disabled { opacity: .25; pointer-events: none; }

/* =========================================================
   E-2. 在這裡學：實驗室＋實習 bento
   ========================================================= */
.h-where { background: #fff; }
.home .h-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(310px, auto); }
.home .h-bento .t-int::after { background: linear-gradient(180deg, rgba(12, 12, 14, .1) 0%, rgba(12, 12, 14, .55) 40%, rgba(12, 12, 14, .92) 100%); }
.home .h-bento .h-tile { aspect-ratio: auto; border-radius: 14px; }
.home .h-bento .t-lab { grid-column: span 2; grid-row: span 2; min-height: 640px; }
.home .h-bento .t-int { grid-column: span 2; }
.home .h-bento .t-lab h3 { font-size: 34px; }
.home .h-bento .t-lab p { max-width: 30em; font-size: 14.5px; }
.home .h-bento .h-tile .h-mono { color: var(--sun); }
.home .h-bento .h-tile:hover .arr { background: var(--sun); border-color: var(--sun); }
.home .h-tile.rv::before { background: #fff; }
.home .hx-lab-name i { background: var(--sun); }
.home .hx-dots b::after { background: var(--sun); }
.t-int .int-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: 2px 0 12px !important; }
.t-int .int-n b { font-family: var(--serif); font-size: 32px; font-weight: 900; color: var(--sun); line-height: 1; margin-left: 10px; }
.t-int .int-n b:first-child { margin-left: 0; }
.int-co { display: flex; flex-wrap: wrap; gap: 6px; }
.int-co span { font-size: 12px; padding: 5px 10px; border-radius: 99px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 80ms + .4s); }
.t-int.in .int-co span { opacity: 1; transform: none; }
.home .h-tile.act img, .home .h-tile.act .hx-slides img.on { transform: scale(1.08); }

/* 實驗室卡：上方 4:3 完整顯示圖片（不疊字、不裁切），文字放在下方深色區 */
.home .h-bento .t-lab { container-type: inline-size; display: flex; flex-direction: column; justify-content: flex-end; background: #16171a; min-height: 0; }
.home .h-bento .t-lab::after { display: none; }
.home .h-bento .t-lab .arr { background: rgba(22, 23, 26, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.home .h-bento .t-lab .hx-slides { inset: 0 0 auto 0; height: auto; aspect-ratio: 4 / 3; background: #222; overflow: hidden; }
.home .h-bento .t-lab .hx-slides img, .home .h-bento .t-lab:hover .hx-slides img.on, .home .h-bento .t-lab.act .hx-slides img.on { object-fit: cover; transform: none !important; }
.home .h-bento .t-lab .t { position: relative; left: auto; right: auto; bottom: auto; margin-top: calc(75cqw + 52px); padding: 0 28px 28px; }
.home .h-bento .t-lab:hover .t { transform: none; }
.home .h-bento .t-lab .hx-lab-name { top: calc(75cqw + 18px); left: 28px; }
.home .h-bento .t-lab .hx-dots { top: calc(75cqw + 40px); left: 28px; right: 28px; }

/* =========================================================
   F. 最新消息：1 大＋4 小
   ========================================================= */
.home .h-news-grid { gap: 32px 24px; }
.home .h-card.big:not(.off) { grid-row: span 2; }
.home .h-card.big .th { aspect-ratio: auto; flex: 1; min-height: 300px; }
.home .h-card.big .bd { flex: none; }

/* =========================================================
   加入我們：黑底＋亮黃（與主視覺「我想就讀」按鈕同色）；按鈕與文字放在圓環上層
   ========================================================= */
.home .h-join .h-wrap { position: relative; z-index: 1; }
.home .h-join .h-mono { color: var(--sun); }
.home .h-join h2 em { color: var(--sun); }
.home .h-join .h-btn.dark { background: var(--sun); color: var(--ink) !important; }
.home .h-join .h-btn.dark:hover { background: #fff; }
.home .h-join .h-btn.line:hover { border-color: var(--sun); color: var(--sun) !important; }
.home .h-join .ring { border-color: rgba(255, 210, 63, .5); box-shadow: 0 0 0 46px rgba(255, 210, 63, .05), 0 0 0 47px rgba(255, 210, 63, .2); }

/* =========================================================
   RWD
   ========================================================= */
@media (max-width: 1100px) {
	.home .h-years::after { display: block !important; }
	.home .h-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.home .h-bento .t-lab { grid-row: span 1; }
	.home .h-card.big:not(.off) { grid-row: auto; }
	.home .h-card.big .th { aspect-ratio: 3 / 2; min-height: 0; }
}
@media (max-width: 860px) {
	.h-al-stat { width: 100%; }
	/* 時間軸改直式 */
	.home .h-years { grid-template-columns: 1fr; row-gap: 0; padding-left: 30px; }
	.home .h-years::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
	.home .h-years::after { left: 6px; top: 8px; bottom: 8px; width: 3px; height: auto; margin: 0 0 0 -.5px; transform: scaleY(var(--p, 0)) !important; transform-origin: 50% 0; background: linear-gradient(180deg, var(--m-plan), var(--m-digi), var(--pop)) !important; }
	.home .h-yr { border-top: 0; padding: 0 0 26px; }
	.home .h-yr::before { left: -28px; top: 6px; }
}
@media (max-width: 560px) {
	.h-hero .h-shade { background: linear-gradient(180deg, rgba(18, 19, 21, .35), rgba(18, 19, 21, .78) 40%, rgba(18, 19, 21, .92)); }
	.h-wk-bar { flex-wrap: nowrap; overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 0 16px; scrollbar-width: none; }
	.h-wk-bar::-webkit-scrollbar { display: none; }
	.h-wk-bar > button { flex: none; }
	.h-wk-bar .nav, .h-al-foot .nav { display: none; }
	.h-wk-track, .h-al-track { gap: 14px; scroll-padding-left: 16px; padding-left: 16px; padding-right: 16px; }
	.h-wk { flex-basis: 76vw; }
	.h-al { flex-basis: 64vw; }
	.h-al-stat div { padding: 0 14px; }
	.h-al-stat b { font-size: 34px; }
	.home .h-bento { grid-template-columns: 1fr; grid-auto-rows: minmax(240px, auto); }
	.home .h-bento .t-lab { grid-column: auto; }
	.home .h-bento .t-int { grid-column: auto; min-height: 380px; }
	.home .h-bento .t-lab .t { padding: 0 20px 22px; }
	.home .h-bento .t-lab .hx-lab-name, .home .h-bento .t-lab .hx-dots { left: 20px; }
	.home .h-bento .t-lab .hx-dots { right: 20px; }
	.home .h-bento .t-lab h3 { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
	.h-wk, .h-al, .int-co span { opacity: 1 !important; transform: none !important; transition: none !important; }
	.h-title .h-rot b.on { animation: none; }
	.h-hero .h-wall { transition: none; }
}

/* =========================================================
   影音（2026.10.09）：與「最新消息」同一套版型
   分類籤＝.h-filter、4 欄格線＋第一支大封面、更多按鈕＝.h-news-more
   封面：統一壓暗漸層、編號、DVCD 標記、金色播放鈕
   ========================================================= */
.home .h-video { background: var(--paper); }
.h-vgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
.h-vgrid .h-vid { margin: 0; display: flex; flex-direction: column; }
.h-vgrid .h-vid.off, .h-vgrid .h-vid.hide { display: none; }
.h-vgrid .h-vid.lead { grid-column: span 2; grid-row: span 2; }
.h-vgrid .h-vid:not(.hide):not(.off) { animation: vidIn .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes vidIn { from { opacity: 0; transform: translateY(24px); } }
.h-vgrid .ply { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #0e0f11; border: 0; padding: 0; cursor: pointer; }
.h-vgrid .h-vid.lead .ply { aspect-ratio: auto; flex: 1; min-height: 300px; }
.h-vgrid .ply img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; filter: saturate(.9) contrast(1.04); transition: transform 1.1s var(--ease), filter .6s; }
.h-vgrid .ply:hover img { transform: scale(1.06); filter: none; }
.h-vgrid iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; background: #000; }
.h-vgrid .h-vid.lead iframe { aspect-ratio: auto; flex: 1; min-height: 300px; }
/* 封面設計 */
.vc { position: absolute; inset: 0; z-index: 1; display: block; color: #fff; text-align: left; pointer-events: none;
	background: linear-gradient(180deg, rgba(14, 15, 17, .55) 0%, rgba(14, 15, 17, 0) 28%, rgba(14, 15, 17, 0) 50%, rgba(14, 15, 17, .78) 100%); }
.vc::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255, 255, 255, .22); transition: inset .5s var(--ease), border-color .4s; }
.ply:hover .vc::before { inset: 8px; border-color: rgba(205, 176, 122, .7); }
.vc-no { position: absolute; left: 22px; top: 20px; font: 600 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .22em; color: var(--gold-l); }
.vc-mk { position: absolute; right: 22px; top: 18px; font-family: var(--serif); font-weight: 900; font-size: 12px; letter-spacing: .18em; color: rgba(255, 255, 255, .78); }
.vc-t { position: absolute; left: 24px; right: 120px; bottom: 24px; font-family: var(--serif); font-weight: 900; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.35; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.vc-play { position: absolute; right: 18px; bottom: 16px; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(14, 15, 17, .35); border: 1px solid rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .35s, border-color .35s, transform .5s var(--ease), width .45s var(--ease); overflow: hidden; }
.vc-play i { font-size: 15px; padding-left: 3px; transition: transform .4s var(--ease); }
.vc-play em { position: absolute; right: 16px; font-style: normal; font: 600 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing: .2em; opacity: 0; transition: opacity .3s; }
.vc-play::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(205, 176, 122, .9); animation: hxRing 2.4s ease-out infinite; }
.ply:hover .vc-play { width: 108px; border-radius: 27px; background: linear-gradient(105deg, #F7EBCD, #DCBC7E 60%, #A98447); border-color: transparent; color: #1c170e; }
.ply:hover .vc-play i { transform: translateX(-24px); }
.ply:hover .vc-play em { opacity: 1; }
.ply:hover .vc-play::after { animation: none; opacity: 0; }
.h-vid.lead .vc-play { width: 68px; height: 68px; right: 24px; bottom: 22px; }
.h-vid.lead .ply:hover .vc-play { width: 128px; border-radius: 34px; }
.h-vid.lead .vc-no { font-size: 11.5px; }
.h-vid:not(.lead) .vc-t { display: none; }
/* 說明文字：與 .h-card 相同 */
.h-vgrid figcaption { padding: 16px 0 0; display: flex; flex-direction: column; gap: 10px; }
.h-vgrid figcaption time { display: flex; align-items: center; gap: 10px; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; letter-spacing: .12em; color: var(--ink-3); }
.h-vgrid figcaption time::after { content: attr(data-cat); font-family: var(--sans); letter-spacing: .06em; color: var(--gold); }
.h-vgrid figcaption h3 { margin: 0; font-size: 16px; line-height: 1.7; font-weight: 500; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease), color .3s; }
.h-vid:hover figcaption h3 { background-size: 100% 1px; color: var(--gold); }
.h-vgrid .h-vid.lead figcaption { display: none; }
.h-vids-more { margin-top: 48px; }
.h-vids-more button i { transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.h-vids-more button[aria-expanded="true"] i { transform: rotate(180deg); }
.h-vids-more[hidden] { display: none; }
@media (max-width: 1199px) { .h-vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px) { .h-vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .h-vgrid .h-vid.lead { grid-row: auto; } .h-vgrid .h-vid.lead .ply, .h-vgrid .h-vid.lead iframe { aspect-ratio: 16 / 9; flex: none; min-height: 0; } }
@media (max-width: 575px) { .h-vgrid { grid-template-columns: 1fr; } .h-vgrid .h-vid.lead { grid-column: auto; } .vc-t { right: 90px; font-size: 18px; } .h-vid.lead .vc-play { width: 54px; height: 54px; } }
@media (prefers-reduced-motion: reduce) { .h-vgrid .h-vid:not(.hide):not(.off) { animation: none; } .vc-play::after { animation: none; } }
/* 取消舊版 .h-vid .ply i 的大圓按鈕樣式 */
.h-vgrid .ply .vc-play i { position: static; width: auto; height: auto; margin: 0; border: 0; border-radius: 0; background: none; color: inherit; display: inline-block; padding-left: 3px; }
.h-vgrid .ply .vc-play i::after { content: none; }
.h-vgrid .ply:hover .vc-play i { background: none; color: inherit; transform: translateX(-24px); }
.h-vid.lead .ply:hover .vc-play i { transform: translateX(-30px); }
.h-vid.lead .vc { background: linear-gradient(180deg, rgba(14, 15, 17, .55) 0%, rgba(14, 15, 17, 0) 26%, rgba(14, 15, 17, 0) 42%, rgba(14, 15, 17, .82) 74%, rgba(14, 15, 17, .95) 100%); }
.h-vgrid, .h-vfilter { overflow-anchor: none; }
/* 本機影片（歷屆得獎精選）：與 iframe 同尺寸 */
.h-vgrid video { width: 100%; aspect-ratio: 16 / 9; display: block; background: #000; }
.h-vgrid .h-vid.lead video { aspect-ratio: auto; flex: 1; min-height: 300px; object-fit: contain; }