/* ==========================================================================
   中葡職業技術學校 ELCTP 新版校網 — 設計系統
   版式規格參照台灣 RWD 校網平台（theme 68）的區塊外殼與配色邏輯，
   以校徽綠為主色重建。純手寫 CSS，無 Bootstrap / jQuery 相依。
   斷點：480 / 767 / 991 / 1200
   ========================================================================== */

/* ---------- 0. 變數 ---------- */
:root{
  /* 主色：取自校徽綠 */
  --g-900:#123a20;
  --g-700:#1d5c33;
  --g-500:#2e7d4f;
  --g-300:#7fbf95;
  --g-100:#e6f2ea;
  --g-050:#f3f8f4;

  /* 區塊主題色（對應參考站「一模組一色」的糖果色系） */
  --m-news:#c0453f;      /* 重要消息 */
  --m-news-soft:#f7e9e8;
  --m-link:#4a8a5c;      /* 校務連結 */
  --m-course:#1c5b8c;    /* 科別課程 */
  --m-album:#c99a2e;     /* 活動相簿 */
  --m-ext:#7a5c9b;       /* 教育相關 */

  --ink:#333333;
  --ink-soft:#666666;
  --ink-title:#1a2731;
  --line:#e2e2e2;
  --line-dash:#cdcdcd;
  --bg:#f5f6f4;
  --white:#fff;
  --hover:#e34d4d;       /* 連結 hover（沿用參考站） */
  --focus:#000;

  --container:1180px;
  --radius:6px;
  --shadow:0 2px 10px rgba(0,0,0,.08);
  --font:"Microsoft JhengHei","PingFang TC","Noto Sans TC","Microsoft YaHei",Tahoma,Arial,"Hiragino Sans GB",sans-serif;
  /* 頁首識別：金色間隔線與標語詞用的楷書體（全站唯一的「毛筆」語彙，首頁識別帶同一支） */
  --gold:#f2c14e;
  --wm:"KaiTi","DFKai-SB","BiauKai","Kaiti TC","STKaiti","Noto Serif TC",serif;
}

/* ---------- 1. Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:62.5%;-webkit-text-size-adjust:100%}
/* 一直預留捲軸槽：串流載入時捲軸若晚一步出現，置中的頁首會往左跳（首頁同一規則） */
html{overflow-y:scroll;scrollbar-gutter:stable}
/* ===== 全站捲軸：品牌綠（12px 圓角滑塊＋淡綠軌道）===== */
html::-webkit-scrollbar{width:12px;height:12px}
html::-webkit-scrollbar-button{display:none;width:0;height:0}
html::-webkit-scrollbar-track{background:#eef3ee;border-radius:99px}
html::-webkit-scrollbar-thumb{background:#0a6b34;border:2px solid #eef3ee;border-radius:99px}
html::-webkit-scrollbar-thumb:hover{background:#085a2b}
html::-webkit-scrollbar-corner{background:#eef3ee}
@supports not selector(::-webkit-scrollbar){
  html{scrollbar-width:thin;scrollbar-color:#0a6b34 #eef3ee}
}
body{
  margin:0;font-family:var(--font);font-size:1.6rem;line-height:1.7;color:var(--ink);
  background:var(--bg);word-wrap:break-word;overflow-wrap:break-word;
}
img{max-width:100%;height:auto;border:0;vertical-align:middle}
a{color:var(--ink-title);text-decoration:none;transition:color .15s,background .15s}
a:hover{color:var(--hover)}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{margin:0;font-weight:500;color:var(--ink-title);line-height:1.35}
h1{font-size:3.6rem}h2{font-size:3rem}h3{font-size:2.4rem}h4{font-size:1.8rem}
p{margin:0 0 1.6rem}
strong{font-weight:700}
:focus{outline:2px solid var(--focus);outline-offset:-2px}
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
button{font-family:inherit;font-size:inherit;cursor:pointer}

.wrap{position:relative;background:var(--white);box-shadow:0 0 24px rgba(0,0,0,.06)}
.minner{max-width:var(--container);margin:0 auto;padding:0 15px}
@media(min-width:992px){.minner{padding:0 20px}}

/* 跳過選單（無障礙） */
a.focusable{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0,0,0,0);border:0;background:#000;color:#fff;font-size:1.6rem;z-index:1000;
}
a.focusable:focus{position:fixed;top:0;left:0;width:auto;height:auto;clip:auto;margin:0;
  padding:1rem 1.6rem;z-index:1200;text-decoration:none}

/* ---------- 2. 工具列 ---------- */
.topbar{background:var(--g-900);color:#fff;font-size:1.4rem}
.topbar .minner{display:flex;align-items:center;justify-content:flex-end;gap:1.2rem;min-height:36px;flex-wrap:wrap}
.topbar a{color:#dfeee4}
.topbar a:hover{color:#fff;text-decoration:underline}
.topbar .tb-sep{opacity:.4}
.topbar .tb-left{margin-right:auto;display:flex;align-items:center;gap:.8rem}
.topbar .tb-clock{opacity:.85}
/* 頁首識帶改成書法圖之後，原本擠在白底列右側的總機與英文名搬到這條工具列（手機上整條 tb-left 收起，頁腳仍列地址與電話） */
.topbar .tb-tel{color:#fff;font-weight:700}
.topbar .tb-en{opacity:.7}
@media(max-width:767px){.topbar .tb-left{display:none}}

.hdsearch{display:flex;align-items:center}
.hdsearch input[type=search]{
  height:26px;border:1px solid rgba(255,255,255,.35);border-radius:14px;background:rgba(255,255,255,.12);
  color:#fff;padding:0 1.2rem;font-size:1.4rem;width:170px}
.hdsearch input::placeholder{color:#cfe0d5}
.hdsearch button{height:26px;border:0;background:transparent;color:#fff;padding:0 .6rem;font-size:1.4rem}

/* ---------- 3. 頁首 ---------- */
/* 識別帶的規則本體在 lib/html.php 的 header_band_css()（由 <!--BAND_CSS--> 注入，與首頁同一份）；
   這裡只放內殼層的差异：內頁內容欄是 1180／左右 20px，首頁是 1160／24px，
   兩個準則由 CSS 變數傳進去，帶的顏色、漸層、字級、金線不另開一份。 */
.hdr{--hdr-w:var(--container);--hdr-px:20px}
.hdr .navbar-toggle{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.14)}
.hdr .navbar-toggle .bars{background:#fff}
/* 退路（後台關掉識別帶）：白底那列，校名走楷書——這所學校的識別本身就是毛筆字（看校徽） */
.header{background:#fff;border-bottom:1px solid var(--line)}
.header .minner{display:flex;align-items:center;gap:1.6rem;min-height:96px;position:relative}
.mlogo{display:flex;align-items:center;gap:1.4rem;min-width:0}
.mlogo img{width:74px;height:74px;object-fit:contain}
.sitename{min-width:0}
.sitename .cn{font-family:var(--wm);font-size:3.1rem;font-weight:400;color:var(--g-700);letter-spacing:.18em;line-height:1.25}
.sitename .pt{font-size:1.3rem;color:var(--ink-soft);letter-spacing:.02em;line-height:1.4}
.header .hv{margin-left:auto;padding-bottom:.5rem;text-align:right;font-size:1.9rem;letter-spacing:.16em;color:var(--g-700);white-space:nowrap}
.header .hv i{font-style:normal;color:var(--gold);margin:0 .55rem;font-size:.6em;vertical-align:.18em}
@media(max-width:991px){.header .minner{min-height:80px}.mlogo img{width:60px;height:60px}.sitename .cn{font-size:2.2rem;letter-spacing:.1em}}
@media(max-width:767px){
  .header .minner{min-height:68px;padding-right:56px}
  .mlogo{gap:1rem}.mlogo img{width:46px;height:46px}.sitename .cn{font-size:1.9rem}.sitename .pt{font-size:1.1rem}
  .header .hv{display:none}
}

/* 漢堡鈕 */
.navbar-toggle{
  display:none;position:absolute;right:15px;top:50%;transform:translateY(-50%);z-index:20;
  width:42px;height:42px;padding:0;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.navbar-toggle .bars{display:block;width:22px;margin:4px auto;height:2px;background:var(--g-700);transition:transform .2s,opacity .2s}
.navbar-toggle[aria-expanded=true] .bars:nth-child(1){transform:translateY(6px) rotate(45deg)}
.navbar-toggle[aria-expanded=true] .bars:nth-child(2){opacity:0}
.navbar-toggle[aria-expanded=true] .bars:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:767px){.navbar-toggle{display:block}}

/* ---------- 4. 主選單 ---------- */
/* 金色上緣：識別帶時由帶下面那條 .hair（漸層）負責，退路那列才用實色 border，免得疊出兩條金線 */
.mainnav{background:var(--g-500);position:relative;z-index:30}
header.header+.mainnav{border-top:3px solid var(--gold)}
@media(min-width:900px){.mainnav{position:sticky;top:0}}
.mainnav.is-stuck{box-shadow:0 3px 12px rgba(0,0,0,.22)}
.mainnav .minner{display:block}
.cgmenu{display:flex;flex-wrap:wrap;align-items:stretch}
.cgmenu>li{position:relative;flex:1 1 auto}
.cgmenu>li>a{
  display:flex;align-items:center;justify-content:center;gap:.6rem;height:100%;min-height:52px;
  padding:0 1.2rem;color:#fff;font-size:1.8rem;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.cgmenu>li>a:hover,.cgmenu>li.open>a{background:rgba(0,0,0,.16);color:#fff}
.cgmenu>li>a .caret{width:0;height:0;border:5px solid transparent;border-top-color:rgba(255,255,255,.85);margin-top:3px}
.cgmenu>li.active>a{background:var(--g-900)}
.dropdown-menu{display:none;background:#fff;border:1px solid var(--g-300);border-top:3px solid var(--g-500);
  box-shadow:var(--shadow);min-width:220px;padding:.6rem 0}
.dropdown-menu li a{display:block;padding:.9rem 1.8rem;font-size:1.6rem;color:var(--ink);border-bottom:1px dotted #eee}
.dropdown-menu li:last-child a{border-bottom:0}
.dropdown-menu a:hover{background:var(--g-050);color:var(--g-700)}
.dropdown-menu .is-ext::after{content:"↗";margin-left:.5rem;color:#9aa9a0;font-size:1.3rem}
@media(min-width:768px){
  .cgmenu>li:hover>.dropdown-menu,.cgmenu>li.open>.dropdown-menu{display:block;position:absolute;left:0;top:100%}
}
/* 九項最上層在 768–899px 可用寬度僅約 738–869px，需縮到 14–15px 才保持單行 */
@media(min-width:768px) and (max-width:899px){
  .cgmenu>li>a{font-size:clamp(14px,1.7vw,15px);padding:0 3px;letter-spacing:0}
}
/* 900–1023px：首頁與內頁同一組（首頁容器較窄，16px 才能單行） */
@media(min-width:900px) and (max-width:1023px){
  .cgmenu>li>a{font-size:16px;padding:0 4px;letter-spacing:.02em}
}
/* 九項最上層在 1024–1191px 會折成兩行（實測需 1079.7px、該區間可用約 970–1151px），縮字距與內距後需 964.9px 保持單行 */
@media(min-width:1024px) and (max-width:1191px){
  .cgmenu>li>a{font-size:1.7rem;padding:0 .8rem}
}
/* 手機：選單收合 */
@media(max-width:767px){
  .mainnav{display:none;max-height:70vh;overflow:auto}
  .mainnav.is-open{display:block}
  .cgmenu{flex-direction:column}
  .cgmenu>li>a{justify-content:flex-start;min-height:48px;font-size:1.7rem;border-bottom:1px solid rgba(255,255,255,.16)}
  .cgmenu>li>a .caret{margin-left:auto;border:5px solid transparent;border-left-color:rgba(255,255,255,.9);border-top-width:0;margin-top:4px}
  .cgmenu>li.open>a .caret{transform:rotate(90deg)}
  .dropdown-menu{display:none;border:0;box-shadow:none;background:var(--g-050);padding:0}
  .cgmenu>li.open>.dropdown-menu{display:block}
  .dropdown-menu li a{padding-left:3.2rem;color:var(--g-900);border-bottom:1px solid #e5eee8}
}

/* ---------- 5. 輪播 ---------- */
.hdads{position:relative;background:var(--g-900)}
.carousel{position:relative;overflow:hidden}
.car-track{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1);will-change:transform}
.carousel.no-anim .car-track{transition:none}
.d-item{flex:0 0 100%;position:relative}
.d-item img{display:block;width:100%;height:520px;object-fit:cover}
@media(max-width:991px){.d-item img{height:400px}}
@media(max-width:767px){.d-item img{height:250px}}
.bn-txt{position:absolute;left:0;right:0;bottom:0;padding:2.4rem 15%;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));color:#fff}
.bn-txt .t{font-size:2.6rem;font-weight:600;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6);letter-spacing:.04em}
.bn-txt .s{font-size:1.6rem;color:#eee;margin-top:.4rem}
@media(max-width:767px){.bn-txt{padding:1.4rem 1.2rem}.bn-txt .t{font-size:1.7rem}.bn-txt .s{display:none}}

.car-nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;border:0;border-radius:50%;
  background:rgba(18,58,32,.55);color:#fff;font-size:0;z-index:5;transition:background .15s}
.car-nav:hover{background:rgba(0,0,0,.5)}
.car-nav::before{content:"";display:block;width:14px;height:14px;margin:0 auto;border:solid #fff;border-width:3px 3px 0 0;
  transform:rotate(-45deg)}
.car-prev{left:10px}.car-prev::before{transform:rotate(-135deg)}
.car-next{right:10px}.car-next::before{transform:rotate(45deg)}
@media(max-width:767px){.car-nav{width:34px;height:34px}.car-nav::before{width:9px;height:9px}}

.owl_click{position:absolute;right:14px;top:14px;z-index:6;width:28px;height:28px;border:0;border-radius:50%;
  background:rgba(0,0,0,.65);color:#fff;font-size:1.2rem;line-height:1;display:flex;align-items:center;justify-content:center}
.owl_click:hover{background:var(--m-news)}
.owl_click .i-pause,.owl_click.is-paused .i-play{display:none}
.owl_click:not(.is-paused) .i-pause{display:inline}
.owl_click .i-play{display:none}
.owl_click.is-paused .i-play{display:inline}
.owl-dots{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:center;gap:10px;
  padding:8px 0;background:rgba(250,250,250,.45)}
.owl-dot{width:15px;height:15px;padding:0;border:0;border-radius:20px;background:var(--g-500);opacity:.55}
.owl-dot.active,.owl-dot:hover{opacity:1}

/* ---------- 6. 區塊外殼 ---------- */
.main{padding:2.4rem 0 3.6rem}
@media(min-width:768px){.main{padding:3.6rem 0 5rem}}
.module{margin-bottom:2.8rem}
.module .mt{display:flex;align-items:center;background:var(--g-500);color:#fff;border-radius:var(--radius) var(--radius) 0 0}
.mt-title{flex:1;color:#fff;font-size:2rem;font-weight:600;line-height:1;padding:1.5rem 1.8rem;letter-spacing:.06em;position:relative}
.mt-title::before{content:"";display:inline-block;width:6px;height:20px;background:rgba(255,255,255,.85);margin-right:1.2rem;vertical-align:-2px;border-radius:2px}
.mt .more-btn{margin-right:.8rem;font-size:1.4rem;color:#fff;background:rgba(0,0,0,.16);padding:.6rem 1.4rem;border-radius:20px}
.mt .more-btn:hover{background:rgba(0,0,0,.34);color:#fff}
.module .mb{background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--radius) var(--radius);padding:2rem}
@media(max-width:767px){.module .mb{padding:1.4rem}.mt-title{font-size:1.8rem;padding:1.2rem 1.4rem}}

/* 一模組一色 */
.mod-news .mt{background:var(--m-news)}
.mod-course .mt{background:var(--m-course)}
.mod-album .mt{background:var(--m-album)}
.mod-ext .mt{background:var(--m-ext)}
.mod-link .mt{background:var(--m-link)}

/* ---------- 7. 重要消息（垂直跑馬） ---------- */
.marquee-wrap{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.marquee{position:relative;flex:1 1 320px;height:40px;overflow:hidden}
.marquee ul{transition:transform .5s ease-out}
.marquee li{height:40px;line-height:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marquee li a{font-size:1.8rem;font-weight:600;color:var(--ink-title)}
.marquee li a:hover{color:var(--m-news)}
.marquee li .tag{display:inline-block;font-size:1.2rem;font-weight:400;color:#fff;background:var(--m-news);
  border-radius:3px;padding:.1rem .8rem;margin-right:1rem;vertical-align:2px}
.marquee li .d{color:#999;font-weight:400;font-size:1.4rem;margin-left:1.2rem}
.marquee-pause{width:24px;height:24px;flex:0 0 24px;border:0;border-radius:50%;background:var(--m-news);color:#fff;font-size:1.1rem;line-height:1}
.marquee-pause.is-paused{background:#9aa9a0}
@media(max-width:767px){.marquee li{white-space:normal;line-height:1.4;display:flex;flex-direction:column;height:40px}
  .marquee li a{font-size:1.6rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
  .marquee li .d{display:none}}

/* ---------- 8. 校務連結圖示磚 ---------- */
.tiles{display:flex;flex-wrap:wrap}
.tiles .d-item{flex:0 0 50%;border-right:2px dashed var(--line-dash);border-bottom:2px dashed var(--line-dash)}
.tiles .d-item:nth-child(2n){border-right:0}
.tiles .mbox{display:flex;align-items:center;gap:1.2rem;padding:1.4rem 1.2rem;min-height:96px}
.tiles .d-img{order:2;flex:0 0 34%;max-width:78px;margin-left:auto}
.tiles .d-img img,.tiles .d-img svg{width:100%;height:auto;border-radius:var(--radius);display:block}
.tiles .d-txt{order:1;flex:1 1 auto;min-width:0}
.tiles .mtitle a{font-size:1.8rem;font-weight:600;line-height:2.2rem;color:#6a6360;display:block}
.tiles .mtitle a:hover{color:var(--hover)}
.tiles .mdetail{font-size:1.3rem;color:#9b9b9b;line-height:1.5;margin-top:.2rem}
@media(min-width:768px){
  .tiles .d-item{flex:0 0 25%;border-right:2px dashed var(--line-dash)}
  .tiles .d-item:nth-child(2n){border-right:2px dashed var(--line-dash)}
  .tiles .d-item:nth-child(4n){border-right:0}
}
@media(max-width:767px){.tiles .d-item:nth-child(2n){border-right:0}.tiles .mbox{min-height:82px;padding:1rem}}
.mod-link .mb{border:2px dashed var(--line-dash);background:#fff}
.mod-link .mt{background:var(--m-link)}
p.more{text-align:right;margin:1.6rem 0 0}
p.more a,.more a{display:inline-block;font-size:1.5rem;color:#fff;background:var(--g-500);padding:.7rem 2rem;border-radius:20px}
p.more a:hover{background:var(--g-900);color:#fff}
.mod-news p.more a{background:var(--m-news)}
.mod-course p.more a{background:var(--m-course)}
.mod-album p.more a{background:var(--m-album)}

/* 圖示磚的 SVG 底色 */
.ico{display:block;width:100%;height:auto;border-radius:var(--radius)}

/* ---------- 9. 最新消息（特產 + 列表） ---------- */
.news-grid{display:grid;grid-template-columns:1fr;gap:2.4rem}
@media(min-width:768px){.news-grid{grid-template-columns:380px 1fr}}
.news-feat .thumb{display:block;border-radius:var(--radius);overflow:hidden;background:#eee}
.news-feat .thumb img{width:100%;height:240px;object-fit:cover;display:block}
.news-feat h3{font-size:2rem;margin:1.2rem 0 .6rem}
.news-feat .date{color:var(--m-news);font-weight:700;font-size:1.4rem}
.news-feat p{font-size:1.5rem;color:var(--ink-soft);line-height:1.7}
.news-list li{display:flex;gap:1.4rem;padding:1.4rem 0;border-bottom:1px dotted var(--line)}
.news-list li:first-child{padding-top:0}
.news-list .th{flex:0 0 96px}
.news-list .th img{width:96px;height:96px;object-fit:cover;border-radius:var(--radius);display:block;background:#eee}
.news-list .bd{min-width:0;flex:1}
.news-list .bd h4{font-size:1.7rem;margin-bottom:.4rem}
.news-list .bd h4 a{color:var(--ink-title)}
.news-list .bd h4 a:hover{color:var(--m-news)}
.news-list .excerpt{font-size:1.4rem;color:#8b8b8b;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.date-chip{display:inline-block;font-size:1.3rem;color:#865350;background:rgba(255,137,1,.15);padding:.1rem 1rem;border-radius:3px;margin-bottom:.4rem}
@media(max-width:767px){.news-list .th{flex:0 0 72px}.news-list .th img{width:72px;height:72px}.news-list .bd h4{font-size:1.6rem}}

/* ---------- 10. 課程卡片 ---------- */
.course-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
@media(min-width:768px){.course-cards{grid-template-columns:repeat(4,1fr)}}
.cc{position:relative;display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.cc img{width:100%;height:150px;object-fit:cover;display:block}
.cc .cap{padding:1.2rem 1.4rem}
.cc .cap .t{font-size:1.7rem;font-weight:600;color:var(--ink-title);display:block}
.cc .cap .s{font-size:1.3rem;color:#8b8b8b;line-height:1.5;margin-top:.3rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3.9em}
.cc::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--m-course);transform:scaleX(0);transition:transform .25s}
.cc:hover::after{transform:scaleX(1)}
.cc:hover .cap .t{color:var(--m-course)}
@media(max-width:767px){.cc img{height:120px}.cc .cap .s{display:none}}

/* ---------- 11. 活動相簿 ---------- */
.album{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:767px){.album{grid-template-columns:repeat(2,1fr)}}
.album a{display:block;position:relative;overflow:hidden;border-radius:var(--radius)}
.album img{width:100%;height:150px;object-fit:cover;display:block;transition:transform .4s}
.album a:hover img{transform:scale(1.06)}
.album .cap{position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1rem .9rem;color:#fff;font-size:1.4rem;
  background:linear-gradient(to top,rgba(0,0,0,.7),transparent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:767px){.album img{height:120px}}

/* ---------- 12. 教育相關連結 ---------- */
.ext-links{display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem 2.4rem}
@media(min-width:768px){.ext-links{grid-template-columns:repeat(3,1fr)}}
.ext-links li a{position:relative;display:flex;align-items:center;gap:.8rem;padding:.9rem 2.2rem .9rem .6rem;border-bottom:1px dotted var(--line);font-size:1.6rem;color:var(--ink)}
.ext-links li a:hover{color:var(--m-ext);background:var(--g-050)}
.ext-links .dot{width:8px;height:8px;border-radius:50%;background:var(--m-ext);opacity:.55;flex:0 0 8px}
.ext-links .out{position:absolute;right:.4rem;top:1.1rem;color:#b0b0b0;font-size:1.3rem}

/* ---------- 13. 首頁兩欄排版 ---------- */
@media(min-width:992px){
  .home-cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:2.8rem;align-items:start}
  .home-cols .mod-ext .ext-links{grid-template-columns:minmax(0,1fr)}
  .home-cols .mod-ext .ext-links li a{font-size:1.5rem}
  .home-cols .module{margin-bottom:0}
}

/* ---------- 14. 內頁 ---------- */
.subhero{position:relative;background:var(--g-900)}
.subhero img{width:100%;height:220px;object-fit:cover;display:block;opacity:.9}
.subhero .st{position:absolute;left:0;right:0;bottom:0;top:0;display:flex;align-items:center;
  background:linear-gradient(90deg,rgba(18,58,32,.78),rgba(18,58,32,.25))}
.subhero .minner{width:100%}
.subhero h1{color:#fff;font-size:3rem;font-weight:700;letter-spacing:.08em;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.subhero .sub{color:#dcece2;font-size:1.5rem;margin-top:.4rem}
@media(max-width:767px){.subhero img{height:150px}.subhero h1{font-size:2.2rem}}

.crumbs{font-size:1.4rem;color:#999;padding:1.4rem 0}
.crumbs a{color:#777}.crumbs a:hover{color:var(--g-700)}
.crumbs .sep{margin:0 .8rem;color:#ccc}

.layout{display:grid;grid-template-columns:1fr;gap:2.8rem;padding-bottom:4rem}
@media(min-width:992px){.layout{grid-template-columns:280px 1fr}}
.sidebar{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;align-self:start}
.sidebar .sh{background:var(--g-700);color:#fff;font-size:1.9rem;font-weight:600;padding:1.5rem 1.8rem;letter-spacing:.06em}
.sidebar li a{display:block;padding:1.2rem 1.8rem;border-bottom:1px solid #f0f0f0;font-size:1.6rem;color:var(--ink)}
.sidebar li a:hover{background:var(--g-050);color:var(--g-700)}
.sidebar li.cur>a{background:var(--g-100);color:var(--g-900);font-weight:600;border-left:4px solid var(--g-500);padding-left:1.4rem}
@media(max-width:991px){.sidebar{display:none}.sidebar.is-open{display:block}}
.content-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2.4rem}
@media(max-width:767px){.content-card{padding:1.6rem}}

/* 文章排版 */
.article h2{font-size:2.4rem;margin-bottom:1rem}
.article .meta{font-size:1.4rem;color:#999;padding-bottom:1.4rem;border-bottom:1px solid var(--line);margin-bottom:2rem;display:flex;gap:1.6rem;flex-wrap:wrap}
.article .lead{font-size:1.7rem;color:var(--ink-soft);background:var(--g-050);border-left:4px solid var(--g-500);padding:1.4rem 1.8rem;margin-bottom:2rem;line-height:1.8}
.article p{font-size:1.7rem;line-height:1.9;text-align:justify}
.article h3{font-size:2rem;margin:2.8rem 0 1.2rem;padding-left:1.2rem;border-left:5px solid var(--g-500);color:var(--g-900)}
.article figure{margin:0 0 2rem;text-align:center}
.article figure figcaption{font-size:1.4rem;color:#999;margin-top:.8rem}
.article img{border-radius:var(--radius)}
.article ul.bul{list-style:disc;padding-left:2.4rem;margin-bottom:1.6rem}
.article ul.bul li{font-size:1.7rem;line-height:1.9;margin-bottom:.6rem}
.article ol.num{list-style:decimal;padding-left:2.4rem;margin-bottom:1.6rem}
.article ol.num li{font-size:1.7rem;line-height:1.9;margin-bottom:.6rem}
.article table{width:100%;border-collapse:collapse;margin-bottom:2rem;font-size:1.6rem}
.article th,.article td{border:1px solid var(--line);padding:1.2rem 1.4rem;text-align:left}
.article th{background:var(--g-050);color:var(--g-900);font-weight:600}
.article .img-row{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(max-width:767px){.article .img-row{grid-template-columns:1fr}.article p{font-size:1.6rem}}

/* 列表頁 */
.chips{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:2rem}
.chip{border:1px solid var(--g-300);background:#fff;color:var(--g-700);font-size:1.5rem;padding:.6rem 1.8rem;border-radius:20px}
.chip.active,.chip:hover{background:var(--g-500);color:#fff;border-color:var(--g-500)}
.nlist li{display:flex;gap:1.6rem;padding:1.8rem 0;border-bottom:1px solid #eee}
.nlist .th{flex:0 0 140px}
.nlist .th img{width:140px;height:104px;object-fit:cover;border-radius:var(--radius);display:block;background:#eee}
.nlist h3{font-size:1.9rem;margin-bottom:.6rem}
.nlist .excerpt{font-size:1.5rem;color:#8b8b8b;line-height:1.7;margin-bottom:.6rem}
.nlist .foot{font-size:1.3rem;color:#aaa;display:flex;gap:1.6rem;flex-wrap:wrap}
.nlist .foot .cat{color:var(--m-news)}
@media(max-width:767px){.nlist .th{flex:0 0 96px}.nlist .th img{width:96px;height:76px}.nlist h3{font-size:1.7rem}}
.pager{display:flex;justify-content:center;gap:.6rem;margin-top:2.4rem}
.pager a,.pager span{min-width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--radius);font-size:1.5rem;color:var(--ink);padding:0 1rem;background:#fff}
.pager .cur{background:var(--g-500);color:#fff;border-color:var(--g-500)}
.pager a:hover{border-color:var(--g-500);color:var(--g-700)}

/* 下載區表格 */
.dl-table{width:100%;border-collapse:collapse;font-size:1.6rem}
.dl-table th,.dl-table td{border-bottom:1px solid var(--line);padding:1.4rem 1.2rem;text-align:left;vertical-align:middle}
.dl-table thead th{background:var(--g-050);border-bottom:2px solid var(--g-300);color:var(--g-900);font-weight:600;white-space:nowrap}
.dl-table tbody tr:hover{background:#fafafa}
.dl-table .f a{color:var(--g-700);font-weight:600}
.dl-table .f a:hover{color:var(--hover)}
.dl-table .badge{display:inline-block;font-size:1.2rem;padding:.1rem .8rem;border-radius:3px;color:#fff;background:#8b8b8b;margin-left:.6rem}
.dl-table .badge.pdf{background:var(--m-news)}.dl-table .badge.doc{background:var(--m-course)}.dl-table .badge.xls{background:var(--m-link)}
.dl-btn{display:inline-block;font-size:1.4rem;padding:.4rem 1.4rem;border:1px solid var(--g-500);border-radius:20px;color:var(--g-700);background:#fff}
.dl-btn:hover{background:var(--g-500);color:#fff}
@media(max-width:767px){.dl-table{font-size:1.4rem}.dl-table .hide-s{display:none}}

/* 網站導覽 */
.sm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2.4rem}
@media(min-width:992px){.sm-grid{grid-template-columns:repeat(3,1fr)}}
.sm-box{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.sm-box h2{font-size:1.8rem;background:var(--g-050);color:var(--g-900);padding:1.2rem 1.6rem;border-bottom:1px solid var(--line)}
.sm-box li a{display:block;padding:.9rem 1.6rem;font-size:1.6rem;border-bottom:1px dotted #eee;color:var(--ink)}
.sm-box li a:hover{color:var(--g-700);background:#fff}
.sm-box li a::before{content:"›";margin-right:.8rem;color:var(--g-300)}

/* ---------- 15. 頁腳 ---------- */
.footer{background:var(--g-900);color:#cfe0d5;font-size:1.4rem;padding:3rem 0 2rem}
.footer a{color:#cfe0d5}
.footer a:hover{color:#fff;text-decoration:underline}
.f-top{display:flex;gap:2.4rem;flex-wrap:wrap;padding-bottom:2.4rem;border-bottom:1px solid rgba(255,255,255,.15)}
.f-brand{display:flex;gap:1.6rem;align-items:center;flex:1 1 320px}
.f-brand img{width:64px;height:64px;object-fit:contain;background:#fff;border-radius:50%;padding:4px}
.f-brand .cn{font-size:2.2rem;font-weight:700;color:#fff;letter-spacing:.06em}
.f-brand .pt{font-size:1.3rem;color:#a8c4b1}
.f-info{flex:1 1 320px;line-height:2}
.f-info .tel{font-size:2rem;color:#fff;font-weight:700;white-space:nowrap}
.f-links{flex:1 1 240px}
.f-links ul li{line-height:2}
.f-bottom{padding-top:1.8rem;text-align:center;color:#93ae9b;font-size:1.3rem;line-height:2}
.conspy{display:flex;justify-content:center;align-items:center;gap:2.5rem;flex-wrap:wrap}
@media(max-width:568px){.conspy{flex-direction:column;gap:.6rem}}
.a11y-note{display:inline-flex;align-items:center;gap:.6rem;border:1px solid rgba(255,255,255,.3);border-radius:20px;padding:.4rem 1.4rem;font-size:1.3rem;color:#dfeee4}
.a11y-note:hover{border-color:#fff;color:#fff;text-decoration:none}

.totop{position:fixed;right:18px;bottom:18px;z-index:60;width:44px;height:44px;border:0;border-radius:50%;
  background:var(--g-500);color:#fff;font-size:1.8rem;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s}
.totop.show{opacity:.92;pointer-events:auto}
.totop:hover{background:var(--g-900);opacity:1}

/* ---------- 16. 工具類 ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.text-center{text-align:center}
.mt-0{margin-top:0}
.nowrap{white-space:nowrap}
.newwin::after{content:"↗";margin-left:.5rem;font-size:1.2rem;color:#9aa9a0}
@media print{.topbar,.mainnav,.hdads,.sidebar,.footer,.totop,.navbar-toggle{display:none!important}.wrap{box-shadow:none}
  /* 識別帶是白墨字＋深綠底，直接印出來會是一片墨、字不見：改成白底、把白墨反成黑墨，金線與豎線省掉 */
  .hdr{position:static;background:#fff;color:#000;box-shadow:none}
  .hair{display:none}
  .hdr .mark{filter:invert(1)}
  .hdr .hv{color:#000;text-shadow:none}
  .hdr .hv i{color:#555}
  .hdr .hv::before{display:none}
}

/* 減少動態偏好 */
@media (prefers-reduced-motion: reduce){
  .car-track{transition:none}
  .marquee ul{transition:none}
  .album img{transition:none}
}

/* ---------- 17. 內頁補充元件 ---------- */
.sidebar-toggle{display:none;width:100%;margin-bottom:1.2rem;padding:1.1rem 1.6rem;background:var(--g-700);color:#fff;border:0;border-radius:var(--radius);font-size:1.6rem;font-weight:600}
.sidebar-toggle::after{content:"▾";margin-left:.8rem}
.sidebar-toggle[aria-expanded=true]::after{content:"▴"}
@media(max-width:991px){.sidebar-toggle{display:block}}

.notice{background:#fff8e6;border:1px solid #f0dfa8;border-left:5px solid var(--m-album);border-radius:var(--radius);padding:1.6rem 1.8rem;font-size:1.55rem;line-height:1.8;color:#6b5518;margin-bottom:2.4rem}
.login-cols{display:grid;grid-template-columns:1fr;gap:2.4rem}
@media(min-width:768px){.login-cols{grid-template-columns:1fr 1fr}}
.login-box{border:1px solid var(--line);border-radius:var(--radius);padding:2rem}
.login-box h2{font-size:2rem;color:var(--g-900);margin-bottom:1.4rem;padding-bottom:1rem;border-bottom:2px solid var(--g-300)}
.entry-list li a{display:flex;flex-direction:column;padding:1.4rem .6rem;border-bottom:1px dotted var(--line);position:relative}
.entry-list .e-t{font-size:1.8rem;font-weight:600;color:var(--g-700)}
.entry-list .e-s{font-size:1.4rem;color:#8b8b8b;font-weight:400}
.entry-list .out{position:absolute;right:.6rem;top:1.6rem;color:#b0b0b0;font-size:1.5rem}
.entry-list li a:hover{background:var(--g-050)}
.entry-list li a:hover .e-t{color:var(--hover)}
code{font-family:Consolas,Monaco,monospace;background:#f2f4f3;padding:.1rem .6rem;border-radius:3px;font-size:.9em}
table caption{text-align:left;font-size:1.4rem;color:#888;padding-bottom:.6rem}
/* 內頁／首頁微調：新聞標題與列表文字截斷保護 */
.news-list .bd h4 a{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nlist h3 a{display:block;overflow:hidden;text-overflow:ellipsis}
.tiles .mtitle a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- 18. 影片嵌入（YouTube／Vimeo facade 與本校影片） ---------- */
.embed{margin:0 0 2.4rem;max-width:900px}
.embed-frame{
  position:relative;display:block;width:100%;height:0;padding-top:56.25%;border:0;overflow:hidden;
  border-radius:10px;background:#0d1512;color:#fff;text-align:left;font:inherit;
  box-shadow:0 8px 26px rgba(0,0,0,.20);transition:box-shadow .25s}
/* 刻意用 padding-top 而不是 aspect-ratio：高度由自己的寬度決定，
   不受父層內容高度影響，真實瀏覽器上最不會出問題 */
button.embed-hit{cursor:pointer}
button.embed-hit:focus{outline:3px solid #1d5c33;outline-offset:2px}
.embed-thumb{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.6,.2,1),filter .3s}
.embed-hit:hover .embed-thumb{transform:scale(1.045);filter:saturate(1.08)}
.embed-shade{position:absolute;left:0;right:0;top:0;bottom:0;
  background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.04) 40%,rgba(0,0,0,.58) 100%)}
.embed-play{position:absolute;left:50%;top:50%;width:76px;height:76px;transform:translate(-50%,-50%);
  opacity:.93;transition:transform .22s ease,opacity .22s}
.embed-play svg{display:block;width:100%;height:100%;filter:drop-shadow(0 4px 12px rgba(0,0,0,.55))}
.embed-hit:hover .embed-play,.embed-hit:focus .embed-play{transform:translate(-50%,-50%) scale(1.13);opacity:1}
.embed-kind{position:absolute;left:12px;top:12px;font-size:1.2rem;font-weight:600;letter-spacing:.08em;
  background:rgba(0,0,0,.62);padding:.35rem 1.1rem;border-radius:20px;line-height:1.5}
.embed-dur{position:absolute;right:12px;bottom:12px;font-size:1.3rem;background:rgba(0,0,0,.74);
  padding:.25rem .9rem;border-radius:4px;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.embed figcaption{font-size:1.45rem;color:#7b8a80;line-height:1.75;margin-top:.9rem;text-align:center}
.embed-native video{position:absolute;left:0;top:0;width:100%;height:100%;display:block;background:#000}
.embed iframe{position:absolute;left:0;top:0;width:100%;height:100%;border:0;display:block}
.embed-loading{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;
  color:#cfe0d5;font-size:1.5rem;background:rgba(13,21,18,.9)}
.embed-hero{max-width:100%;margin-bottom:2.8rem}
.embed-noscript{display:inline-block;margin-top:.8rem;font-size:1.5rem;color:#1d5c33;font-weight:600}
.embed-inline{display:inline-block;font-size:1.5rem;font-weight:600;color:#fff;background:var(--m-news);
  padding:.45rem 1.6rem;border-radius:20px;letter-spacing:.04em}
.embed-inline:hover{background:var(--g-900);color:#fff;text-decoration:none}
.embed-fallback{font-size:1.5rem;background:#fff6e6;border:1px solid #f0dfa8;border-left:4px solid var(--m-album);
  padding:1.2rem 1.6rem;border-radius:var(--radius);color:#6b5518}
.article .embed{margin-left:auto;margin-right:auto}

/* 列表上的影片角標 */
.has-video{position:relative}
.vbadge{position:absolute;right:8px;bottom:8px;width:28px;height:28px;border-radius:50%;
  background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;pointer-events:none}
.vbadge::after{content:"";border:6px solid transparent;border-left:9px solid #fff;border-right:0;margin-left:4px}
.vbadge-sm{display:inline-block;font-size:1.2rem;color:#fff;background:var(--m-course);
  border-radius:3px;padding:.1rem .7rem;margin-left:.8rem;vertical-align:2px;letter-spacing:.04em}

@media(max-width:767px){
  .embed{margin-bottom:2rem}
  .embed-play{width:58px;height:58px}
  .embed figcaption{font-size:1.35rem;text-align:left}
  .embed-kind{font-size:1.1rem;padding:.25rem .8rem}
}
@media print{
  .embed-frame,.embed-noscript{display:none!important}
  .embed figcaption::before{content:"影片（詳見網站版）：";color:#333}
}
@media (prefers-reduced-motion: reduce){
  .embed-thumb,.embed-play{transition:none}
  .embed-hit:hover .embed-thumb{transform:none}
}

/* ---------- 19. 課程與內容頁 ---------- */
.sidebar li.grp{background:var(--g-050);color:var(--g-900);font-size:1.35rem;font-weight:700;
  letter-spacing:.08em;padding:.8rem 1.8rem;border-bottom:1px solid #e5eee8;border-top:1px solid #e5eee8}
.doc-fig{margin:0 0 2.4rem;text-align:center}
.doc-fig img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 4px 16px rgba(0,0,0,.10);display:inline-block}
.doc-fig figcaption{font-size:1.4rem;color:#8b8b8b;margin-top:.8rem}
.src-note{font-size:1.4rem;color:#8b8b8b;background:var(--g-050);border-left:4px solid var(--g-300);
  padding:1rem 1.4rem;border-radius:0 var(--radius) var(--radius) 0;margin-top:2.8rem}
.src-note a{color:var(--g-700);word-break:break-all}
.cc-ph{display:flex;align-items:center;justify-content:center;height:150px;
  background:linear-gradient(135deg,var(--g-700),var(--m-course));color:#fff;font-size:3.4rem;font-weight:700;letter-spacing:.1em}
.course-hero{margin:0 0 2.4rem}
.course-hero img{width:100%;height:300px;object-fit:cover;border-radius:var(--radius);display:block}
@media(max-width:767px){.course-hero img{height:180px}.cc-ph{height:110px;font-size:2.6rem}}

/* ---------- 20. 內容頁的資料表格（組織架構、圖書館守則等） ---------- */
.table-wrap{overflow-x:auto;margin:0 0 2.4rem;-webkit-overflow-scrolling:touch}
.data-table{width:100%;border-collapse:collapse;font-size:1.6rem;min-width:520px}
.data-table th,.data-table td{border:1px solid var(--line);padding:1rem 1.3rem;text-align:left;vertical-align:top;line-height:1.7}
.data-table th{background:var(--g-050);color:var(--g-900);font-weight:600;white-space:nowrap;min-width:7em}
.data-table tbody tr:nth-child(even) td{background:#fbfcfb}
.page-nav li a{display:block;padding:.9rem 1.8rem;border-bottom:1px solid #f0f0f0;font-size:1.6rem;color:var(--ink)}
.page-nav li a:hover{background:var(--g-050);color:var(--g-700)}
.page-nav li.cur>a{background:var(--g-100);color:var(--g-900);font-weight:600;border-left:4px solid var(--g-500);padding-left:1.4rem}

/* ---------- 21. 首屏：品牌式分割版面（不依賴單一大圖） ---------- */
.hero{position:relative;background:linear-gradient(135deg,#0f3220 0%,#1d5c33 55%,#2e7d4f 100%);color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.10),rgba(255,255,255,0) 70%)}
.hero-in{max-width:var(--container);margin:0 auto;padding:44px 20px 48px;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:38px;align-items:center;position:relative}
.hero-kicker{display:inline-flex;align-items:center;gap:.7rem;font-size:1.35rem;letter-spacing:.18em;
  color:#bfe3cd;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  padding:.4rem 1.1rem;border-radius:20px}
.hero h1{margin:1.6rem 0 .4rem;font-size:4.4rem;line-height:1.18;font-weight:700;letter-spacing:.06em;color:#fff}
.hero .pt{font-size:1.5rem;color:#bfe3cd;letter-spacing:.02em;line-height:1.5;margin-bottom:1.4rem}
.hero .slogan{font-size:1.9rem;line-height:1.75;color:#e8f4ec;max-width:34ch;margin-bottom:2rem}
.hero .slogan b{color:#ffd77a;font-weight:700}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:2.4rem}
.hero-cta a{font-size:1.6rem;font-weight:600;padding:.85rem 1.9rem;border-radius:26px;text-decoration:none}
.hero-cta .a1{background:#fff;color:#123a20}
.hero-cta .a1:hover{background:#ffd77a;color:#123a20}
.hero-cta .a2{border:1px solid rgba(255,255,255,.55);color:#fff}
.hero-cta .a2:hover{background:rgba(255,255,255,.14);color:#fff}
.hero-facts{display:flex;gap:26px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.18);padding-top:1.4rem}
.hero-facts div{min-width:88px}
.hero-facts b{display:block;font-size:2.8rem;line-height:1.1;color:#ffd77a;font-weight:700;font-variant-numeric:tabular-nums}
.hero-facts span{font-size:1.35rem;color:#c9e2d3;letter-spacing:.04em}

.hero-mosaic{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;gap:10px}
.hero-mosaic figure{position:relative;margin:0;overflow:hidden;border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.32);background:#0d1512}
.hero-mosaic figure:nth-child(1){grid-column:span 4;aspect-ratio:4/3}
.hero-mosaic figure:nth-child(2){grid-column:span 2;aspect-ratio:2/3}
.hero-mosaic figure:nth-child(3){grid-column:span 3;aspect-ratio:16/10}
.hero-mosaic figure:nth-child(4){grid-column:span 3;aspect-ratio:16/10}
.hero-mosaic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.hero-mosaic figure:hover img{transform:scale(1.06)}
.hero-mosaic figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .9rem .7rem;font-size:1.25rem;
  color:#fff;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));letter-spacing:.04em}
@media(max-width:1080px){
  .hero-in{grid-template-columns:1fr;gap:30px;padding:36px 20px 40px}
  .hero h1{font-size:3.6rem}
  .hero-mosaic{max-width:640px}
}
@media(max-width:640px){
  .hero h1{font-size:2.8rem}
  .hero .slogan{font-size:1.65rem}
  .hero-facts b{font-size:2.3rem}
  .hero-mosaic{grid-template-columns:repeat(4,1fr)}
  .hero-mosaic figure:nth-child(1),.hero-mosaic figure:nth-child(2){grid-column:span 2}
  .hero-mosaic figure:nth-child(2){aspect-ratio:2/2.4}
  .hero-mosaic figure:nth-child(3),.hero-mosaic figure:nth-child(4){grid-column:span 2;aspect-ratio:4/3}
}
@media (prefers-reduced-motion: reduce){.hero-mosaic img{transition:none}}
.hero .slogan{margin-bottom:.6rem}
.hero .slogan b{color:#ffd77a;font-weight:700;font-size:2.15rem;letter-spacing:.06em}
.hero .slogan.sub{margin-bottom:2rem;color:#cfe4d6;font-size:1.65rem;line-height:1.85;max-width:38ch}
/* 手機版修正：資料列改用 auto-fit 網格（flex 在窄屏會撐出視窗）、拼貼行高改為依內容 */
.hero-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:16px 18px}
@media(max-width:640px){
  .hero-mosaic{grid-auto-rows:auto}
  .hero-mosaic figure:nth-child(2){aspect-ratio:2/2.2}
}
.hero-facts > div{min-width:0}
.hero-facts b{font-size:clamp(2.1rem,6.4vw,2.8rem);overflow-wrap:anywhere}
.hero-facts span{display:block;overflow-wrap:anywhere}
@media(max-width:640px){.hero-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px}}