/* ==========================================================================
   pages.css — 版面元件（Hero / 內頁頁首 / 列表 / 師資 / 時程 / 手風琴 …）
   ========================================================================== */

/* ---------- 導覽箭頭（行動版展開指示） ---------- */
.nav__chev{display:none; width:18px; height:18px; transition:transform .3s var(--ease)}
.nav__chev svg{width:100%;height:100%}
@media (max-width:1024px){
  .nav__chev{display:block}
  .nav__item.is-expanded .nav__chev{transform:rotate(180deg)}
}

/* ---------- 站內搜尋 ---------- */
.searchbox{
  position:fixed; inset:0; z-index:200; background:rgba(8,39,68,.55);
  backdrop-filter:blur(3px); display:flex; align-items:flex-start; justify-content:center;
  padding:12vh 20px 20px; opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.searchbox.is-open{opacity:1; visibility:visible}
.searchbox__panel{
  position:relative; width:100%; max-width:620px; background:#fff; border-radius:var(--radius);
  box-shadow:var(--shadow-3); padding:34px 32px 24px; transform:translateY(-14px); transition:transform .35s var(--ease);
}
.searchbox.is-open .searchbox__panel{transform:none}
.searchbox__close{position:absolute; top:12px; right:16px; font-size:26px; line-height:1; color:var(--ink-3); padding:6px}
.searchbox__close:hover{color:var(--ink)}
.searchbox__label{display:block; font-size:13px; font-weight:700; letter-spacing:.2em; color:var(--brand-mid); margin-bottom:12px}
.searchbox input{
  width:100%; padding:14px 16px; font-size:17px; font-family:inherit;
  border:1px solid var(--line-2); border-radius:2px; background:var(--bg-alt);
}
.searchbox input:focus{outline:none; border-color:var(--brand); background:#fff}
.searchbox__results{margin-top:14px; max-height:46vh; overflow-y:auto}
.searchbox__results a{display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:11px 14px; border-radius:2px; transition:background .2s}
.searchbox__results a:hover{background:var(--brand-soft)}
.searchbox__results small{color:var(--ink-3); font-size:12.5px; flex:none}
.searchbox__empty{padding:14px; color:var(--ink-3); font-size:14.5px}
.searchbox__empty a{color:var(--brand-mid); text-decoration:underline}

/* ==========================================================================
   首頁 Hero — 對標 FCU：滿版影像 + 弧形品牌切角 + 左下控制
   ========================================================================== */
.hero{position:relative; height:min(690px,82vh); min-height:480px; overflow:hidden; background:var(--brand-deep)}
.hero__slides{position:absolute; inset:0}
.hero__slide{
  position:absolute; inset:0; opacity:0; transition:opacity 1.1s var(--ease);
  display:flex; align-items:center;
}
.hero__slide.is-active{opacity:1}
.hero__bg{position:absolute; inset:0}
/* 主視覺佔位：置於右下角且降低存在感，正式照片就位後可整段移除 */
.hero__bg .ph{
  width:100%; height:100%; font-size:13px; letter-spacing:.2em;
  align-items:flex-end; justify-content:flex-end; padding:26px 30px; color:rgba(255,255,255,.28);
}
.hero__bg img{width:100%; height:100%; object-fit:cover}
.hero__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(8,39,68,.90) 0%, rgba(8,39,68,.72) 38%, rgba(8,39,68,.28) 68%, rgba(8,39,68,.15) 100%);
}
.hero__inner{position:relative; z-index:2; width:100%}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:10px; color:#fff; font-size:13px; font-weight:700;
  letter-spacing:.22em; margin-bottom:20px; opacity:.9;
}
.hero__eyebrow::before{content:""; width:34px; height:2px; background:var(--accent)}
.hero h1,.hero .h-display{color:#fff; max-width:16ch; text-shadow:0 2px 24px rgba(0,0,0,.28)}
.hero__sub{color:rgba(255,255,255,.86); font-size:17px; line-height:1.9; max-width:46ch; margin-top:22px}
.hero__cta{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap}
/* 深色主視覺上的按鈕必須高對比：實心白為主、描邊白為輔 */
.hero__cta .btn{padding:15px 32px; font-size:15.5px; box-shadow:0 6px 20px rgba(0,0,0,.22)}
.hero__cta .btn--primary{background:#fff; color:var(--brand); border-color:#fff}
.hero__cta .btn--primary:hover{background:var(--accent); color:#fff; border-color:var(--accent)}
.hero__cta .btn--light{
  background:rgba(8,39,68,.42); border-color:rgba(255,255,255,.85); color:#fff;
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.hero__cta .btn--light:hover{background:#fff; color:var(--brand); border-color:#fff}

/* 弧形品牌切角（FCU 特徵） */
.hero__arc{
  position:absolute; left:-8%; bottom:-42%; width:62%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(26,95,168,.42), rgba(14,58,107,.62));
  border:1px solid rgba(255,255,255,.14); pointer-events:none; z-index:1;
}
.hero__arc--2{left:auto; right:-14%; bottom:auto; top:-30%; width:44%; background:radial-gradient(circle at 60% 60%, rgba(168,128,31,.20), transparent 70%); border-color:rgba(255,255,255,.07)}

/* Hero 控制 */
.hero__ctrl{
  position:absolute; left:0; right:0; bottom:34px; z-index:4;
}
.hero__ctrl .wrap{display:flex; align-items:center; gap:22px}
.hero__arrows{display:flex; align-items:center; gap:14px}
.hero__arrows button{
  width:44px; height:44px; border:1px solid rgba(255,255,255,.42); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff; transition:all .3s var(--ease);
}
.hero__arrows button:hover{background:#fff; color:var(--brand); border-color:#fff}
.hero__arrows svg{width:17px;height:17px}
.hero__dots{display:flex; gap:9px; margin-left:auto}
.hero__dots button{width:30px; height:3px; background:rgba(255,255,255,.35); transition:background .3s}
.hero__dots button.is-active{background:#fff}

/* ---------- 首頁：重點公告 ticker ---------- */
.ticker{background:var(--brand); color:#fff}
.ticker .wrap{display:flex; align-items:center; gap:24px; min-height:60px; padding-block:10px}
.ticker__label{
  display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:700;
  letter-spacing:.18em; flex:none; padding-right:24px; border-right:1px solid rgba(255,255,255,.25);
}
.ticker__label::before{content:""; width:7px;height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 rgba(168,128,31,.7); animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(168,128,31,0)}100%{box-shadow:0 0 0 0 rgba(168,128,31,0)}}
.ticker__items{flex:1; min-width:0; position:relative; height:26px}
.ticker__item{
  position:absolute; inset:0; display:flex; align-items:center; gap:14px; font-size:15px;
  opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease); pointer-events:none;
}
.ticker__item.is-active{opacity:1; transform:none; pointer-events:auto}
.ticker__item a{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-bottom:1px solid transparent}
.ticker__item a:hover{border-color:rgba(255,255,255,.7)}
.ticker__item time{opacity:.7; font-size:13.5px; flex:none; font-variant-numeric:tabular-nums}
.ticker__more{flex:none; font-size:13.5px; opacity:.85; display:inline-flex; align-items:center; gap:7px}
.ticker__more:hover{opacity:1}
.ticker__more svg{width:13px;height:13px}

/* ---------- 首頁：快捷入口 ---------- */
.quick{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line)}
.quick a{
  background:#fff; padding:38px 28px 34px; display:flex; flex-direction:column; gap:14px;
  position:relative; transition:background .35s var(--ease); overflow:hidden;
}
.quick a::before{content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:var(--brand); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease)}
.quick a:hover{background:var(--brand-soft)}
.quick a:hover::before{transform:scaleX(1)}
.quick__num{font-family:var(--font-head); font-size:13px; color:var(--accent); letter-spacing:.2em; font-weight:600}
.quick__t{font-family:var(--font-head); font-size:20px; font-weight:700; color:var(--ink)}
.quick__d{font-size:14px; color:var(--ink-2); line-height:1.8}
.quick__go{margin-top:auto; padding-top:14px; display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--brand-mid)}
.quick__go svg{width:14px;height:14px; transition:transform .3s var(--ease)}
.quick a:hover .quick__go svg{transform:translateX(5px)}
@media (max-width:900px){.quick{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.quick{grid-template-columns:1fr}}

/* ---------- 首頁：特色三欄（大圖 + 文字） ---------- */
.feature{display:grid; grid-template-columns:repeat(3,1fr); gap:28px}
.feature__item{position:relative; overflow:hidden; border-radius:var(--radius); min-height:420px; display:flex; align-items:flex-end; color:#fff}
.feature__bg{position:absolute; inset:0}
.feature__bg .ph,.feature__bg img{width:100%;height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.feature__item:hover .ph,.feature__item:hover img{transform:scale(1.07)}
.feature__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,39,68,.94) 6%, rgba(8,39,68,.55) 46%, rgba(8,39,68,.12) 100%)}
.feature__body{position:relative; z-index:2; padding:34px 30px 32px}
.feature__body h3{font-family:var(--font-head); font-size:23px; margin-bottom:12px}
.feature__body p{font-size:14.5px; color:rgba(255,255,255,.84); line-height:1.85; margin-bottom:18px}
.feature__body .link-more{color:#fff}
.feature__body .link-more:hover{border-color:#fff}
@media (max-width:900px){.feature{grid-template-columns:1fr}.feature__item{min-height:320px}}

/* ---------- 消息列表 ---------- */
.newslist{border-top:1px solid var(--line)}
.newslist li{border-bottom:1px solid var(--line)}
.newslist a{display:flex; align-items:baseline; gap:22px; padding:22px 4px; transition:background .25s, padding .3s var(--ease)}
.newslist a:hover{background:#fff; padding-left:16px; padding-right:16px}
.newslist time{flex:none; font-size:13.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; letter-spacing:.05em; width:96px}
.newslist .tag{flex:none}
.newslist .t{flex:1; font-size:16px; line-height:1.7; transition:color .25s}
.newslist a:hover .t{color:var(--brand-mid)}
@media (max-width:700px){
  .newslist a{flex-wrap:wrap; gap:8px 14px; padding:18px 4px}
  .newslist .t{flex:1 1 100%; order:3; font-size:15.5px}
}

/* 篩選列 */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px}
.filters button{
  padding:8px 20px; font-size:14px; font-weight:500; border:1px solid var(--line-2);
  border-radius:2px; background:#fff; color:var(--ink-2); transition:all .25s;
}
.filters button:hover{border-color:var(--brand); color:var(--brand)}
.filters button.is-active{background:var(--brand); border-color:var(--brand); color:#fff}

/* ---------- 數據統計 ---------- */
.stats{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:rgba(255,255,255,.16)}
.stats div{background:var(--brand-deep); padding:34px 20px; text-align:center}
.stats b{display:block; font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:clamp(32px,3.6vw,46px); font-weight:700; color:#fff; line-height:1.1}
.stats b small{font-size:.45em; font-weight:600; margin-left:3px; opacity:.8}
.stats span{display:block; margin-top:11px; font-size:13.5px; color:rgba(255,255,255,.66); letter-spacing:.08em}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}.stats div:last-child{grid-column:1/-1}}

/* ---------- 人物輪播 / 引言 ---------- */
.voice{display:grid; grid-template-columns:1fr 1.35fr; gap:0; background:#fff; border:1px solid var(--line)}
.voice__media{position:relative; min-height:400px}
.voice__media .ph,.voice__media img{position:absolute; inset:0; width:100%;height:100%; object-fit:cover}
.voice__body{padding:52px 52px 46px; display:flex; flex-direction:column; justify-content:center}
.voice__quote{font-family:var(--font-head); font-size:clamp(19px,2vw,25px); line-height:1.75; color:var(--ink); margin-bottom:26px; position:relative}
.voice__quote::before{content:"\201C"; font-size:76px; color:var(--brand-soft); position:absolute; left:-14px; top:-32px; z-index:-1; font-family:Georgia,serif}
.voice__who{display:flex; align-items:center; gap:14px; padding-top:22px; border-top:1px solid var(--line)}
.voice__who b{font-size:16px; font-weight:600}
.voice__who span{font-size:14px; color:var(--ink-3)}
.voice__nav{display:flex; gap:10px; margin-top:26px}
.voice__nav button{width:40px;height:40px; border:1px solid var(--line-2); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ink-2); transition:all .3s}
.voice__nav button:hover{background:var(--brand); color:#fff; border-color:var(--brand)}
.voice__nav svg{width:16px;height:16px}
@media (max-width:900px){.voice{grid-template-columns:1fr}.voice__media{min-height:260px}.voice__body{padding:36px 28px}}

/* ==========================================================================
   內頁
   ========================================================================== */
.page-hero{position:relative; background:var(--brand-deep); color:#fff; overflow:hidden; padding:66px 0 58px}
.page-hero::before{
  content:""; position:absolute; right:-8%; top:-60%; width:46%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 40% 60%, rgba(26,95,168,.5), transparent 68%);
}
.page-hero::after{
  content:""; position:absolute; left:-12%; bottom:-70%; width:40%; aspect-ratio:1; border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
}
.page-hero .wrap{position:relative; z-index:2}
.page-hero h1{font-family:var(--font-display); font-size:clamp(29px,3.6vw,42px); font-weight:700; margin-bottom:14px}
.page-hero p{color:rgba(255,255,255,.76); font-size:16.5px; max-width:62ch; line-height:1.9}
.crumb{display:flex; align-items:center; gap:9px; font-size:13.5px; color:rgba(255,255,255,.6); margin-bottom:20px; flex-wrap:wrap}
.crumb a:hover{color:#fff; text-decoration:underline}
.crumb span[aria-hidden]{opacity:.5}
.crumb b{font-weight:500; color:#fff}

/* 內頁左右欄 */
.page-body{padding:66px 0 90px}
.page-body .wrap{display:grid; grid-template-columns:236px 1fr; gap:56px; align-items:start}
.page-body .wrap.no-side{grid-template-columns:1fr}
.sidenav{position:sticky; top:calc(var(--head-h) + 24px)}
.sidenav h2{font-size:13px; letter-spacing:.2em; color:var(--brand-mid); margin-bottom:16px; font-weight:700}
.sidenav li{border-bottom:1px solid var(--line)}
.sidenav li:first-child{border-top:1px solid var(--line)}
.sidenav a{display:block; padding:13px 14px 13px 2px; font-size:15px; color:var(--ink-2); border-left:2px solid transparent; transition:all .25s}
.sidenav a:hover{color:var(--brand); padding-left:12px; border-left-color:var(--line-2)}
.sidenav a[aria-current="page"]{color:var(--brand); font-weight:600; border-left-color:var(--brand); padding-left:12px; background:var(--brand-soft)}
@media (max-width:900px){
  .page-body .wrap{grid-template-columns:1fr; gap:34px}
  .sidenav{position:static}
  .sidenav ul{display:flex; gap:8px; overflow-x:auto; padding-bottom:6px}
  .sidenav li{border:0}
  .sidenav li:first-child{border:0}
  .sidenav a{white-space:nowrap; padding:9px 16px; border:1px solid var(--line-2); border-radius:2px}
  .sidenav a[aria-current="page"]{background:var(--brand); color:#fff; border-color:var(--brand); padding-left:16px}
}

/* 文章排版
   限寬的是「文字」而不是整個欄位——圖表、表格、卡片格線可以用滿版面。 */
.prose{max-width:none}
/* 中文的舒適行長約 35–40 字；用 em 計算才會跟著字級縮放，
   在手機與桌機上都維持差不多的每行字數。 */
.prose > p,
.prose > ul.bullet,
.prose > ol.num,
.prose > .callout,
.prose > h2,
.prose > h3{max-width:var(--measure)}
.prose h2{font-family:var(--font-display); font-size:26px; margin:52px 0 18px; padding-bottom:14px; border-bottom:1px solid var(--line)}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--font-head); font-size:19.5px; margin:34px 0 12px; color:var(--brand)}
.prose p{color:var(--ink-2); line-height:1.95; margin-bottom:1.15em}
.prose strong{color:var(--ink); font-weight:600}
.prose ul.bullet{margin:0 0 1.3em; padding-left:2px}
.prose ul.bullet li{position:relative; padding-left:22px; margin-bottom:11px; color:var(--ink-2); line-height:1.9}
.prose ul.bullet li::before{content:""; position:absolute; left:2px; top:13px; width:7px; height:7px; background:var(--accent); border-radius:50%}
.prose ol.num{counter-reset:n; margin:0 0 1.3em}
.prose ol.num li{counter-increment:n; position:relative; padding-left:36px; margin-bottom:13px; color:var(--ink-2); line-height:1.9}
.prose ol.num li::before{
  content:counter(n,decimal-leading-zero); position:absolute; left:0; top:1px;
  font-family:var(--font-head); font-size:14px; font-weight:700; color:var(--brand-mid);
}
.prose a:not(.btn):not(.link-more){color:var(--brand-mid); border-bottom:1px solid var(--brand-soft); transition:border-color .2s}
.prose a:not(.btn):not(.link-more):hover{border-color:var(--brand-mid)}

/* 引述框 */
.callout{
  background:var(--brand-soft); border-left:3px solid var(--brand); padding:24px 28px;
  margin:30px 0; border-radius:0 var(--radius) var(--radius) 0;
}
.callout p{color:var(--ink-2); font-size:15px; margin-bottom:.7em}
.callout strong{color:var(--brand)}
.callout--gold{background:var(--accent-soft); border-left-color:var(--accent)}
.callout--gold strong{color:#7A5C12}

/* 表格 */
.table-wrap{overflow-x:auto; margin:26px 0; border:1px solid var(--line); border-radius:var(--radius)}
table.tbl{width:100%; border-collapse:collapse; font-size:14.5px; min-width:560px}
table.tbl th,table.tbl td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top}
table.tbl thead th{background:var(--brand); color:#fff; font-weight:600; letter-spacing:.06em; font-size:14px; white-space:nowrap}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl tbody tr:nth-child(even){background:var(--bg-alt)}
table.tbl tbody tr:hover{background:var(--brand-soft)}
table.tbl td strong{color:var(--ink)}

/* 手風琴 FAQ */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__q{
  width:100%; display:flex; align-items:flex-start; gap:18px; padding:24px 4px; text-align:left;
  font-family:var(--font-head); font-size:17.5px; font-weight:600; line-height:1.6; transition:color .25s;
}
.acc__q:hover{color:var(--brand)}
.acc__q .n{font-size:13px; color:var(--accent); flex:none; padding-top:5px; letter-spacing:.1em}
.acc__q .ic{margin-left:auto; flex:none; width:22px; height:22px; position:relative; margin-top:5px}
.acc__q .ic::before,.acc__q .ic::after{content:""; position:absolute; inset:0; margin:auto; background:var(--brand); transition:transform .35s var(--ease)}
.acc__q .ic::before{width:14px; height:2px}
.acc__q .ic::after{width:2px; height:14px}
.acc__item.is-open .acc__q .ic::after{transform:rotate(90deg) scaleX(0)}
.acc__a{max-height:0; overflow:hidden; transition:max-height .45s var(--ease)}
.acc__a > div{padding:0 4px 26px 44px; color:var(--ink-2); line-height:1.95; font-size:15.5px}
@media (max-width:600px){.acc__a > div{padding-left:4px}}

/* 時程 / 流程 */
.timeline{position:relative; padding-left:34px}
.timeline::before{content:""; position:absolute; left:7px; top:8px; bottom:8px; width:2px; background:var(--line)}
.timeline li{position:relative; padding-bottom:34px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:""; position:absolute; left:-34px; top:6px; width:16px; height:16px; border-radius:50%;
  background:#fff; border:3px solid var(--brand);
}
.timeline li.is-done::before{background:var(--brand)}
.timeline h4{font-family:var(--font-head); font-size:18px; margin-bottom:7px}
.timeline time{display:block; font-size:13px; color:var(--accent); font-weight:700; letter-spacing:.1em; margin-bottom:8px}
.timeline p{font-size:14.5px; color:var(--ink-2); line-height:1.85}

/* 數字重點列 */
.keynums{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin:34px 0}
.keynums div{border-left:2px solid var(--brand); padding-left:20px}
.keynums b{display:block; font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:36px; font-weight:700; color:var(--brand); line-height:1.1}
.keynums span{display:block; margin-top:7px; font-size:14px; color:var(--ink-2)}
@media (max-width:760px){.keynums{grid-template-columns:repeat(2,1fr); gap:22px}}

/* Logo 牆（合作企業） */
.logowall{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.logowall div{
  background:#fff; min-height:112px; display:flex; align-items:center; justify-content:center;
  padding:22px 18px; text-align:center; font-family:var(--font-head); font-size:16px;
  color:var(--ink-2); transition:all .3s var(--ease);
}
.logowall div:hover{background:var(--brand); color:#fff}
@media (max-width:700px){.logowall{grid-template-columns:repeat(2,1fr)}}

/* CTA 帶 */
.cta-band{background:var(--brand); color:#fff; padding:64px 0; position:relative; overflow:hidden}
.cta-band::before{content:""; position:absolute; right:-6%; top:-90%; width:38%; aspect-ratio:1; border-radius:50%; border:1px solid rgba(255,255,255,.16)}
.cta-band .wrap{position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:36px; flex-wrap:wrap}
.cta-band h2{font-family:var(--font-display); font-size:clamp(23px,2.6vw,31px); margin-bottom:10px}
.cta-band p{color:rgba(255,255,255,.78); font-size:15.5px; max-width:52ch}

/* ---------- 專用教室卡 ---------- */
.room-code{
  font-style:normal; font-family:var(--font-body); font-size:12.5px; font-weight:700; letter-spacing:.1em;
  color:var(--brand-mid); background:var(--brand-soft); padding:3px 9px; border-radius:2px; margin-right:9px;
  vertical-align:2px;
}
.card__spec{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
  font-size:13px; color:var(--ink-3); line-height:1.8;
}
.card__spec b{color:var(--brand); font-weight:600}

/* ---------- YouTube 影片（點擊才載入） ---------- */
.ytbox{
  position:relative; display:block; width:100%; aspect-ratio:16/9; padding:0;
  border:0; border-radius:var(--radius); overflow:hidden; background:var(--bg-alt-2); cursor:pointer;
}
.ytbox img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), filter .35s}
.ytbox:hover img{transform:scale(1.05); filter:brightness(.85)}
.ytbox__play{
  position:absolute; inset:0; margin:auto; width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center;
  transition:background .3s var(--ease), transform .3s var(--ease); box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.ytbox__play svg{width:22px; height:22px; margin-left:4px; color:var(--brand)}
.ytbox:hover .ytbox__play{background:#fff; transform:scale(1.08)}
/* 取不到縮圖時的備援：品牌漸層底 + 影片標題 */
.ytbox__label{
  position:absolute; left:0; right:0; bottom:0; padding:14px 16px; z-index:2;
  font-size:13px; line-height:1.5; color:#fff; text-align:left; opacity:0;
  background:linear-gradient(transparent, rgba(8,39,68,.85));
}
.ytbox--noimg{
  background:linear-gradient(135deg, var(--brand) 0%, var(--brand-mid) 100%);
}
.ytbox--noimg .ytbox__label{opacity:1}
.ytbox--live{cursor:default; background:#000}
.ytbox--live iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ---------- 畢業專題 ---------- */
.projgroup{margin-bottom:52px}
.projgroup:last-child{margin-bottom:0}
.projgroup__t{
  font-family:var(--font-head); font-size:21px; font-weight:700; margin-bottom:22px;
  padding-bottom:13px; border-bottom:2px solid var(--brand); display:inline-block;
}
.projcard{
  background:#fff; border:1px solid var(--line); border-left:3px solid var(--brand);
  border-radius:0 var(--radius) var(--radius) 0; overflow:hidden;
  transition:box-shadow .35s var(--ease), transform .35s var(--ease), border-left-color .35s;
}
.projcard__body{padding:22px 24px 22px}
.projcard:hover{box-shadow:var(--shadow-2); transform:translateY(-3px); border-left-color:var(--accent)}
.projcard h4{font-family:var(--font-head); font-size:18.5px; font-weight:700; line-height:1.5; margin-bottom:14px}
.projcard dl{display:grid; grid-template-columns:auto 1fr; gap:6px 14px; margin:0; font-size:13.5px}
.projcard dt{color:var(--ink-3); white-space:nowrap}
.projcard dd{margin:0; color:var(--ink-2)}

/* ---------- 架構圖 / 流程圖 ---------- */
.diagram{
  margin:34px 0 40px; padding:32px 28px 24px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius);
}
.diagram--alt{background:var(--bg-alt)}
.diagram > svg{display:block; width:100%; height:auto; overflow:visible}
.diagram figcaption{
  margin-top:22px; padding-top:16px; border-top:1px solid var(--line);
  font-size:13.5px; color:var(--ink-3); line-height:1.8;
}
/* SVG 內共用字級（中文字距略放，小尺寸才不糊） */
.dg-t{font-family:var(--font-head); font-weight:600; fill:var(--ink)}
.dg-t--on{fill:#fff}
.dg-en{font-family:var(--font-body); font-weight:600; fill:var(--ink-3); letter-spacing:.08em}
.dg-en--on{fill:rgba(255,255,255,.72)}
.dg-lbl{font-family:var(--font-body); font-weight:600; fill:var(--brand-mid); letter-spacing:.14em}
.dg-sm{font-family:var(--font-body); fill:var(--ink-2)}
.dg-fill{fill:var(--brand)}
.dg-fill-2{fill:var(--brand-mid)}
.dg-fill-soft{fill:var(--brand-soft)}
.dg-fill-gold{fill:var(--accent)}
.dg-stroke{stroke:var(--brand); fill:none}
.dg-line{stroke:var(--line-2); fill:none}
@media (max-width:600px){
  .diagram{padding:20px 14px 16px; margin:26px 0 30px}
  /* 窄螢幕讓寬圖可以橫向捲動，而不是縮到看不清楚 */
  .diagram--scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .diagram--scroll > svg{min-width:640px}
}

/* ---------- 內頁首圖 ---------- */
.photo-lead{margin:0 0 44px; border-radius:var(--radius); overflow:hidden; background:var(--bg-alt-2)}
.photo-lead img{width:100%; height:auto; display:block; aspect-ratio:16/8; object-fit:cover}
.photo-lead figcaption{
  padding:13px 18px; font-size:13px; color:var(--ink-3);
  background:var(--bg-alt); border-top:1px solid var(--line);
}

/* ---------- 圖說式橫幅 ---------- */
.bannerfig{margin:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff}
.bannerfig img{width:100%; height:auto; display:block}
.bannerfig figcaption{padding:14px 18px; font-size:13.5px; color:var(--ink-2); border-top:1px solid var(--line)}

/* ---------- 系友代表卡 ---------- */
.alumcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  transition:all .35s var(--ease); position:relative; overflow:hidden;
}
.alumcard__body{padding:24px 22px 26px}
.alumcard::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--brand);
  transform:scaleY(0); transform-origin:top; transition:transform .4s var(--ease);
}
.alumcard:hover{box-shadow:var(--shadow-2); transform:translateY(-4px)}
.alumcard:hover::before{transform:scaleY(1)}
.alumcard h3{font-family:var(--font-head); font-size:17.5px; font-weight:700; margin-bottom:10px; line-height:1.5}
.alumcard p{font-size:14px; color:var(--ink-2); line-height:1.75; margin:0}
/* 附影片的系友卡：影片在上、資訊在下 */
.alumcard--v{padding:0}
.alumcard--v .alumcard__body{padding:22px 22px 24px}
.alumcard--v .ytbox{border-radius:0}

/* ---------- 表格標題與篩選計數 ---------- */
.tbl__cap{
  caption-side:top; text-align:left; padding:16px 18px; background:var(--bg-alt);
  font-size:13.5px; color:var(--ink-3); border-bottom:1px solid var(--line);
}
.filters small{opacity:.65; font-size:12px; margin-left:2px}
table.tbl td[data-year]{font-variant-numeric:tabular-nums; font-weight:600; color:var(--brand)}

/* 網站導覽 */
.sitemap{display:grid; grid-template-columns:repeat(3,1fr); gap:38px 32px}
.sitemap section h2{font-family:var(--font-head); font-size:19px; padding-bottom:12px; margin-bottom:14px; border-bottom:2px solid var(--brand)}
.sitemap li{margin-bottom:9px}
.sitemap a{font-size:15px; color:var(--ink-2); transition:color .2s; display:inline-flex; align-items:center; gap:8px}
.sitemap a::before{content:""; width:5px;height:5px; background:var(--line-2); border-radius:50%; flex:none; transition:background .2s}
.sitemap a:hover{color:var(--brand)}
.sitemap a:hover::before{background:var(--accent)}
@media (max-width:860px){.sitemap{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.sitemap{grid-template-columns:1fr}}