/* ==========================================================
   A. 調整參數
   ----------------------------------------------------------
   ★ 這一區是設計來讓你自己改的。
     下面每一行都是「名稱: 值;」，只要改冒號後面的值就好，
     不要動名稱、不要漏掉結尾的分號。
     改完存檔，整個網站對應的地方會一起變。

     顏色用色碼（例如 #0b405f），可以在 Google 搜尋
     「色碼表」挑選；尺寸用 px（像素）。
   ========================================================== */
:root {

  /* --- 顏色 --------------------------------------------- */
  /* 議會主色：取自標誌，選單、按鈕與頁尾都用這個。
     ★ 架構 v2 起頁尾不再另存一份 #000024；改這裡，頁尾會一起跟著變。
     若頁尾未跟著變，表示 src/css/features/footer.css 沒有被組進部署檔，
     或頁尾樣式被其他規則蓋掉；不會有 JavaScript 錯誤訊息。 */
  --sc-navy:        #000024;
  --sc-navy-dark:   #000018;   /* 主色的深版：漸層與滑鼠移過去時用 */
  --sc-navy-light:  #1c1c4a;   /* 主色的淺版：漸層另一端 */

  /* 強調色有兩個，用在不同底色上，不要互換：
     --sc-accent       標誌紅，放在「白底」上（委員會卡片的金線、小標）
     --sc-accent-light 亮一階的紅，放在「深色底」上（選單的 [ ] 符號）
     標誌紅直接放深藍黑上對比不足，小字會看不清楚，所以才拆成兩個。 */
  --sc-accent:       #e60012;
  --sc-accent-light: #ff4d5a;

  --sc-page-bg:     #f5f5f7;   /* 內容區底色 */
  --sc-text:        #12122b;   /* 主要文字顏色 */
  --sc-text-muted:  #5a5a70;   /* 次要文字（說明、副標） */
  --sc-line:        #dcdce2;   /* 分隔線顏色 */

  /* --- 尺寸 --------------------------------------------- */
  /* 內容區最大寬度。
     ⚠️ **目前沒有生效**，改這個數字畫面不會有任何變化。
        2026-08-17 起全站客製頁一律滿版（見 D 區 .dashboard-container），
        因為底部的「返回首頁」是滿版的選單模組，內容一設寬度就會左右差一截。
     ★ 留著是因為 D 區寫著「哪天想改回窄版，把 max-width 改成 var(--sc-width)」，
        它是那個開關的預備值，不是壞掉的設定。 */
  --sc-width:       1000px;
  --sc-radius:      12px;      /* 圓角大小：0 就是直角 */
  --sc-gap:         30px;      /* 區塊之間的上下間距 */

  /* --- 字級 --------------------------------------------- */
  --sc-title-size:  18px;      /* 頁面標題大小 */
  --sc-footer-title: 24px;     /* 頁尾中文大標；架構 v2 起已生效 */

}
/* ==========================================================
   B. 學校系統預設（修正版）
   ========================================================== */

/* --- 系統選單（桌機）--- */
.fs-sysbar.navbar-inverse {
  background-color: #fff;
  border: none;
}

.fs-sysbar.navbar-inverse .navbar-brand,
.fs-sysbar.navbar-inverse .navbar-brand:hover,
.fs-sysbar.navbar-inverse .navbar-brand:focus {
  color: var(--sc-text);
}

/* --- 手機／平板選單列：改成白底，與桌機一致 ---
   原本這裡是深藍底 + 白字，深色標誌貼上去看不見，
   才會需要在圖片裡塞白方塊。改白底後就不用了。 */
.fs-mobile-navbar .navbar-inverse {
  background-color: #fff;
  border-bottom: 1px solid var(--sc-line);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

/* 底色翻白，字和圖示就要一起翻深，否則整條變全白看不到東西 */
.fs-mobile-navbar .navbar-inverse .navbar-brand,
.fs-mobile-navbar .navbar-inverse .navbar-brand:hover,
.fs-mobile-navbar .navbar-inverse .navbar-brand:focus,
.fs-mobile-navbar .navbar-inverse .navbar-nav > li > a,
.fs-mobile-navbar .navbar-inverse .navbar-toggle,
.fs-mobile-navbar .navbar-inverse .navbar-toggle .icon-dot,
.fs-mobile-navbar .navbar-inverse a,
.fs-mobile-navbar .navbar-inverse i {
  color: var(--sc-navy);
}

/* 漢堡選單的三條線有些版型是用背景色畫的，不是文字色，兩種都補 */
.fs-mobile-navbar .navbar-inverse .navbar-toggle .icon-bar {
  background-color: var(--sc-navy);
}

/* 點開後展開的選單面板也要跟著翻白 */
.fs-mobile-navbar .navbar-inverse .navbar-collapse {
  background-color: #fff;
  border-top: 1px solid var(--sc-line);
}
.fs-mobile-navbar .navbar-inverse .navbar-nav > li + li > a {
  border-top: 1px solid var(--sc-line);
}

.fs-sysbar.navbar-inverse .navbar-nav > li > a {
  color: #777;
}

.fs-sysbar.navbar-inverse .navbar-nav > li > a:hover,
.fs-sysbar.navbar-inverse .navbar-nav > li > a:focus {
  color: #111;
  background-color: white;
}

.fs-sysbar.navbar-inverse .navbar-nav > .open > a,
.fs-sysbar.navbar-inverse .navbar-nav > .open > a:hover,
.fs-sysbar.navbar-inverse .navbar-nav > .open > a:focus {
  color: black;
  background-color: #fafafa;
}

.fs-sysbar.navbar-inverse .fs-logo {
  margin-top: -5px;
}

.fs-course-sysbar {
  background-color: var(--sc-navy);
  border-color: var(--sc-navy);
}

/* --- Banner --- */
/* 修正 2：原路徑 layout.css//5cab... 多一個斜線，已移除 */
.fs-banner {
  background-color: white;
  background-image: url("/sysdata/attach/layout.css/5cabd478fd592532a0148d9c823ef047.jpg");
  padding: 10px;
  border-bottom: 1px solid var(--sc-line);
}

.fs-banner-title {
  text-shadow: 2px 4px 3px rgba(0, 0, 0, 0.3);
}

/* --- 網站選單 --- */
.fs-navbar-title a,
.fs-navbar-btns a {
  color: white;
}

.fs-sitebar {
  background: linear-gradient(-45deg, var(--sc-navy-light), var(--sc-navy), var(--sc-navy-dark));
}

.fs-sitebar .nav > li > a {
  color: white;
  border-bottom-color: transparent;
  position: relative;
}

.fs-sitebar .nav > li > a::after,
.fs-sitebar .nav > li > a::before {
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

.fs-sitebar .nav > li > a::before {
  color: var(--sc-accent-light);
  content: '[';
  display: block;
  font-size: 1.5em;
  left: 10px;
  top: 3px;
  opacity: 0;
  position: absolute;
}

.fs-sitebar .nav > li > a::after {
  color: var(--sc-accent-light);
  content: ']';
  display: block;
  font-size: 1.5em;
  opacity: 0;
  position: absolute;
  right: 10px;
  top: 3px;
}

/* 只在真的有滑鼠的裝置啟用，避免手機點一下卡住不還原 */
@media (hover: hover) and (pointer: fine) {
  .fs-sitebar .nav > li > a:hover::before {
    left: 5px;
    opacity: 1;
  }
  .fs-sitebar .nav > li > a:hover::after {
    right: 5px;
    opacity: 1;
  }
}

/* 修正 3：原本有一條 background: trasnparent（拼字錯誤）而失效，
   已併入下方正確的規則。 */
.fs-sitebar .nav > li > a:hover,
.fs-sitebar .nav > li > a:focus {
  background-color: transparent;
  border-color: transparent;
}

.fs-sitebar .nav .open > a,
.fs-sitebar .nav .open > a:hover,
.fs-sitebar .nav .open > a:focus {
  background-color: transparent;
  border-bottom-color: transparent;
}

.navbar-inverse .navbar-toggle,
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
  border-color: transparent;
  background-color: transparent;
}

.fs-sitebar .fs-nav > ul > li.active > a,
.fs-sitebar .fs-nav > ul > li.active > a:focus,
.fs-sitebar .fs-nav > ul > li.active:hover > a {
  color: #fff;
  border-color: transparent;
  background-color: transparent;
}

/* --- 側欄 --- */
.nav > li > a:hover,
.nav > li > a:focus,
.fs-thumblist .curr {
  background-color: #f5f5f5;
}

/* --- 表格 --- */
/* 修正 4：原本逗號後為裸的 tbody，會讓全站每一個表格都被加上
   3px 上框線。已限定在 .fs-table 內。 */
.fs-table .table.custom,
.fs-table tbody {
  border-top-color: var(--sc-navy);
  border-top-width: 3px;
  border-bottom-color: var(--sc-line);
}

.fs-th {
  background-color: #eee;
}

/* --- report / filterEX --- */
.report {
  border-left-color: var(--sc-navy);
}

.filter {
  border-color: transparent;
}

/* --- 自訂頁面標題 --- */
.cpage-box .box-title {
  background-color: transparent;
  color: var(--sc-text);
  border-width: 0 0 3px 0;
  border-style: solid;
  border-color: var(--sc-navy);
  font-size: var(--sc-title-size);
  font-weight: bold;
  padding: 3px 0;
}

/* --- 下拉式選單 --- */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: #f5f5f5;
}

/* ==========================================================
   C. CMS 模組樣式
   ---------------------------------------------------------
   這些模組會出現在多個頁面，所以放全站，改一次到處生效。
   ========================================================== */

/* --- 側邊選單模組 --- */
.mod_menu2:not(.sc-navbtns) .fs-menu li {
  background-image: linear-gradient(88deg, var(--sc-navy) 0%, var(--sc-navy-light) 100%);
  border-bottom: 1px solid #fff;
  transition: filter .2s ease;
}

.mod_menu2:not(.sc-navbtns) .fs-menu li:last-child {
  border-bottom: none;
}

/* padding 放在 a 上，整塊都能點；放在 li 上會有點不到的邊緣 */
.mod_menu2:not(.sc-navbtns) .fs-menu .nav li a {
  display: block;
  padding: 8px 15px;
  color: #fff;
  font-weight: bold;
}

@media (hover: hover) and (pointer: fine) {
  .mod_menu2:not(.sc-navbtns) .fs-menu li:hover {
    filter: brightness(1.15);
  }
}

/* 抵銷上面「側欄」那條的灰底。兩段都要帶 .mod_menu2，
   否則會把全站選單的 focus 底色一起清掉。 */
.mod_menu2:not(.sc-navbtns) .nav > li > a:hover,
.mod_menu2:not(.sc-navbtns) .nav > li > a:focus {
  background: transparent;
}

/* 鍵盤操作時看得到目前位置 */
.mod_menu2:not(.sc-navbtns) .nav > li > a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

/* --- 公告 tab --- */
.fs-nav > ul > li.active > a,
.fs-nav > ul > li.active > a:focus {
  border-color: lightgray;
  border-radius: 5px 5px 0 0;
  background-color: #e3e3e3;
}

.fs-tab .tab-content {
  padding: 0 0 10px 0;
  border-top: 0;
}

/* --- 行事曆 --- */
.calendar {
  background-color: #fff;
}

/* --- 媒體瀏覽模組 --- */
.body-page-p .mod_mediaBrowse .fs-caption .fs-label a {
  color: #333;
}

.body-page-p .mod_mediaBrowse .fs-label a:hover {
  color: var(--sc-navy);
}

.body-page-p .mod_mediaBrowse .fs-caption .fs-label {
  line-height: 1.2;
  font-size: 1rem;
}

.body-page-p .mod_mediaBrowse .fs-imageEx div,
.body-page-p .mod_mediaBrowse .thumbnail {
  overflow: hidden;
}

.body-page-p .mod_mediaBrowse .fs-imageEx .img-container {
  transition: transform 0.5s ease;
}

@media (hover: hover) and (pointer: fine) {
  .body-page-p .mod_mediaBrowse .fs-imageEx:hover .img-container {
    transform: scale(1.15);
  }
}

.body-page-p .mod_mediaBrowse .fs-imageEx .fs-caption {
  margin-top: 0;
}

.body-page-p .mod_mediaBrowse .thumbnail {
  margin-bottom: 8px;
}

/* ==========================================================
   C. 全站導航按鈕皮膚（#sc-navbtns / #sc-navbtns-dark）
   ----------------------------------------------------------
   【怎麼用】
   1. 版面設計 → 拖一個「選單模組」進內容區
   2. 區塊設成一欄（欄寬 12）
   3. 模組設定 → 標題填 #sc-navbtns 或 #sc-navbtns-dark
                 標題選「顯示」、框線選「無」
   4. 模組設定 → 選單方向選「垂直」
   5. 選單項目名稱填「歷史沿革|History」，中間用半形直線
 
   【想微調時只改這裡】
   下面第 1 段有兩個數字：
     --sc-btn-gap        按鈕與按鈕之間的間距
     --sc-btn-icon-right icon 距離右邊框多遠
   改這兩個就好，其他地方會自己跟著算，不用動。
   ========================================================== */
 
 
/* --- 1. 可調參數 --- */
.module[class*="sc-navbtns"] {
  --sc-btn-gap: 16px;         /* 按鈕之間的間距 */
  --sc-btn-icon-right: 24px;  /* icon 距離右邊框的距離 */
}
 
 
/* --- 2. 清掉 CMS 的預設外框與內距 ---
   包裹層依序是 .module > .cpage-box > .box-body > .fs-menu > ul.nav
   任何一層有內距，這排按鈕就會比別排窄，導致上下排對不齊。 */
.module[class*="sc-navbtns"],
.module[class*="sc-navbtns"] .cpage-box,
.module[class*="sc-navbtns"] .box-body,
.module[class*="sc-navbtns"] .fs-menu {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
}
 
/* ul.nav 原本帶有 Bootstrap 的 clearfix 偽元素。
   我們把 ul 改成 flex 之後，這兩個偽元素會變成「隱形的按鈕」，
   在頭尾各多吃掉一份 gap，上排就會比下排內縮。直接關掉。 */
.module[class*="sc-navbtns"] .box-body ul::before,
.module[class*="sc-navbtns"] .box-body ul::after {
  display: none !important;
  content: none !important;
}
 
 
/* --- 3. 共用排版結構 --- */
.module[class*="sc-navbtns"] .box-body ul {
  display: flex !important;
  flex-wrap: wrap !important;
  align-content: flex-start !important;  /* 換行時不要把行距撐開 */
  gap: var(--sc-btn-gap) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 100% !important;
}
 
.module[class*="sc-navbtns"] .box-body ul > li {
  background: none !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
 
.module[class*="sc-navbtns"] .box-body a {
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  /* 右邊留出 icon 的位置：icon 距邊距離 + icon 寬度 + 呼吸空間 */
  padding-right: calc(var(--sc-btn-icon-right) + 31px) !important;
  border-radius: var(--sc-radius, 16px) !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}
 
.module[class*="sc-navbtns"] .sc-btn-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
 
.module[class*="sc-navbtns"] .sc-btn-title {
  display: block !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
}
 
.module[class*="sc-navbtns"] .sc-btn-sub {
  display: block !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  margin-top: 3px !important;
}
 
/* icon 一律靠右、垂直置中 */
.module[class*="sc-navbtns"] .sc-btn-arrow,
.module[class*="sc-navbtns"] .sc-btn-arrow *,
.module[class*="sc-navbtns"] i,
.module[class*="sc-navbtns"] svg {
  position: absolute !important;
  top: 50% !important;
  right: var(--sc-btn-icon-right) !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
}
 
 
/* --- 4. 上排：#sc-navbtns（白底藍框、文字靠左、可多顆並排） --- */
.module.sc-navbtns .box-body ul > li {
  flex: 1 1 200px !important;
}
 
.module.sc-navbtns .box-body a {
  justify-content: flex-start !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  padding-left: 24px !important;
  background: #ffffff !important;
  color: var(--sc-navy, #0b405f) !important;
  border: 2px solid var(--sc-navy, #0b405f) !important;
  box-shadow: 0 4px 15px rgba(11, 64, 95, 0.08) !important;
}
 
.module.sc-navbtns .sc-btn-text  { align-items: flex-start !important; text-align: left !important; }
.module.sc-navbtns .sc-btn-title { font-size: 16px !important; letter-spacing: 1px !important; color: var(--sc-navy, #0b405f) !important; }
.module.sc-navbtns .sc-btn-sub   { font-size: 11px !important; color: var(--sc-text-muted, #546a7b) !important; }
 
.module.sc-navbtns .sc-btn-arrow,
.module.sc-navbtns .sc-btn-arrow *,
.module.sc-navbtns i,
.module.sc-navbtns svg {
  font-size: 18px !important;
  color: var(--sc-navy, #0b405f) !important;
  fill: var(--sc-navy, #0b405f) !important;
}
 
/* 上排 Hover：整顆翻成深藍 */
@media (hover: hover) and (pointer: fine) {
  .module.sc-navbtns .box-body a:hover {
    transform: translateY(-4px) !important;
    background: var(--sc-navy, #0b405f) !important;
    border-color: var(--sc-navy, #0b405f) !important;
    box-shadow: 0 8px 25px rgba(11, 64, 95, 0.25) !important;
  }
  .module.sc-navbtns .box-body a:hover .sc-btn-title,
  .module.sc-navbtns .box-body a:hover .sc-btn-sub { color: #ffffff !important; }
  .module.sc-navbtns .box-body a:hover .sc-btn-arrow,
  .module.sc-navbtns .box-body a:hover .sc-btn-arrow *,
  .module.sc-navbtns .box-body a:hover i,
  .module.sc-navbtns .box-body a:hover svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
    transform: translate(4px, -50%) !important;
  }
}
 
 
/* --- 5. 下排：#sc-navbtns-dark（深藍滿版、文字置中、一行一顆） --- */
.module.sc-navbtns-dark .box-body ul > li {
  flex: 1 1 100% !important;
}
 
.module.sc-navbtns-dark .box-body a {
  justify-content: center !important;
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  padding-left: 24px !important;
  background: var(--sc-navy, #0b405f) !important;
  color: #ffffff !important;
  border: 2px solid var(--sc-navy, #0b405f) !important;
  box-shadow: 0 6px 20px rgba(11, 64, 95, 0.2) !important;
}
 
.module.sc-navbtns-dark .sc-btn-text  { align-items: center !important; text-align: center !important; margin: 0 auto !important; }
.module.sc-navbtns-dark .sc-btn-title { font-size: 18px !important; letter-spacing: 1.5px !important; color: #ffffff !important; }
.module.sc-navbtns-dark .sc-btn-sub   { font-size: 11.5px !important; color: rgba(255, 255, 255, 0.85) !important; }
 
.module.sc-navbtns-dark .sc-btn-arrow,
.module.sc-navbtns-dark .sc-btn-arrow *,
.module.sc-navbtns-dark i,
.module.sc-navbtns-dark svg {
  font-size: 20px !important;
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}
 
/* 下排 Hover：翻成亮藍 */
@media (hover: hover) and (pointer: fine) {
  .module.sc-navbtns-dark .box-body a:hover {
    transform: translateY(-3px) !important;
    background: var(--sc-navy-light, #14567d) !important;
    border-color: var(--sc-navy-light, #14567d) !important;
    box-shadow: 0 10px 25px rgba(20, 86, 125, 0.4) !important;
  }
  .module.sc-navbtns-dark .box-body a:hover .sc-btn-arrow,
  .module.sc-navbtns-dark .box-body a:hover .sc-btn-arrow *,
  .module.sc-navbtns-dark .box-body a:hover i,
  .module.sc-navbtns-dark .box-body a:hover svg {
    transform: translate(5px, -50%) !important;
  }
}
/* ==========================================================
   #sc-cmte — 委員會卡片皮膚 v2
   ----------------------------------------------------------
   貼到「全站樣式」C 區，接在 #sc-navbtns 那段後面。
   （v2 改了兩處：標題列圓角、表格改用容器查詢，見下方註解）

   【怎麼用】
   1. 版面設計 → 每個委員會拖一個「文字方塊模組」
      想兩個並排就把區塊設成兩欄（各欄寬 6）
   2. 模組設定 → 標題填 #sc-cmte|紀律委員會
                 標題選「顯示」、框線選「無」
      （直線左邊是皮膚名，右邊是會顯示出來的標題，
        需要頁尾 JS 已更新到支援 | 的版本）
   3. 內容區（純 HTML 文字框）依序放：
        <h3>▮ 一句話定位</h3>
        <p>說明段落</p>
        <table> 兩欄，左欄標籤、右欄名單
   4.（選用）卡片最後面可以放一顆連結按鈕（見下面第 8 段）：
        <a class="sc-cmte-link" href="/p/speaker">議長介紹<span class="sc-cmte-link-arrow">→</span></a>
      ⚠️ 兩個 class 都要寫對。少了 sc-cmte-link 會變成一行帶底線的文字連結。
      ⚠️ 網址一律用 /p/ 開頭的站內路徑，不要貼含 https:// 的完整網址。
  
   【想微調時只改這裡】
   下面第 1 段的三個參數。
   ========================================================== */


/* --- 1. 可調參數 --- */
.module.sc-cmte {
  --cmte-radius:   24px;                      /* 卡片圓角 */
  --cmte-border:   2px;                       /* 卡片邊框粗細 */
  --cmte-pad:      clamp(20px, 3.5vw, 40px);  /* 內容區左右內距 */
  --cmte-accent:   var(--sc-accent);          /* 標題列下方的線：標誌紅 */
}


/* --- 2. 卡片外框 --- */
.module.sc-cmte {
  margin-bottom: 24px !important;
}

.module.sc-cmte .cpage-box {
  background: #ffffff;
  border: var(--cmte-border) solid var(--sc-navy, #0b405f);
  border-radius: var(--cmte-radius);
  overflow: hidden;   /* 讓標題列的直角被圓角切掉 */
  box-shadow: 0 10px 40px rgba(11, 64, 95, 0.05);

  /* 讓這張卡片成為「容器查詢」的量測基準。
     第 6 段的表格排版是依卡片寬度決定的，不是螢幕寬度，
     所以不論一排一張還是兩張並排都會自己調整。刪掉這行會失效。 */
  container-type: inline-size;
}


/* --- 3. 標題列（委員會名稱） --- */
.module.sc-cmte .box-title {
  background: var(--sc-navy, #0b405f);
  border-bottom: 5px solid var(--cmte-accent);
  padding: clamp(14px, 2vw, 20px) var(--cmte-pad);
  margin: 0;

  /* 外框有邊框時，overflow:hidden 是裁在「內距框」，
     半徑比外框少了一個邊框寬度，上緣兩角會露出白邊。
     這裡補回對應的圓角把縫補起來。 */
  border-radius: calc(var(--cmte-radius) - var(--cmte-border))
                 calc(var(--cmte-radius) - var(--cmte-border)) 0 0;
}

.module.sc-cmte .box-title .text,
.module.sc-cmte .box-title {
  color: #ffffff;
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1.3;
}


/* --- 4. 內容區 --- */
.module.sc-cmte .box-body {
  padding: clamp(24px, 3.5vw, 36px) var(--cmte-pad);
}

/* ▮ 一句話定位 */
.module.sc-cmte .box-body h3 {
  font-size: clamp(15px, 1.8vw, 17px);
  font-weight: 800;
  color: var(--cmte-accent);
  letter-spacing: 1px;
  margin: 0 0 18px 0;
}

/* 說明段落 */
.module.sc-cmte .box-body p {
  font-size: clamp(14.5px, 1.6vw, 16px);
  line-height: 1.85;
  color: #4a5568;
  margin: 0 0 14px 0;
  text-align: justify;
}
.module.sc-cmte .box-body p:last-of-type {
  margin-bottom: 0;
}


/* --- 5. 名單表格 --- */
.module.sc-cmte .box-body table {
  width: 100% !important;
  max-width: 100% !important;   /* 蓋掉編輯器可能寫進 style= 的固定寬度 */
  margin-top: 26px;
  border-collapse: collapse;
}

.module.sc-cmte .box-body td,
.module.sc-cmte .box-body th {
  border: 0;
  border-bottom: 1px solid var(--sc-line, #dddddd);
  padding: 14px 12px;
  vertical-align: top;
  text-align: left;
  font-size: clamp(14px, 1.6vw, 15.5px);
  line-height: 1.75;
}

.module.sc-cmte .box-body tr:last-child td,
.module.sc-cmte .box-body tr:last-child th {
  border-bottom: 0;
}

/* 第一欄＝標籤（召集委員／委員 N 席） */
.module.sc-cmte .box-body td:first-child,
.module.sc-cmte .box-body th:first-child {
  width: 1%;
  white-space: nowrap;
  font-weight: 800;
  color: var(--sc-navy, #0b405f);
  padding-right: 24px;
}

/* 第二欄＝名單 */
.module.sc-cmte .box-body td:last-child {
  color: #333333;
  font-weight: 600;
}


/* --- 6. 卡片變窄時：表格改成上下堆疊 ---
   注意這裡是 @container 不是 @media：
   判斷依據是「這張卡片有多寬」，不是「螢幕有多寬」。
   因為兩個委員會並排時，螢幕 1200px 但卡片只有約 550px，
   用 @media 的話規則不會觸發，表格會被擠成細長條。 */
@container (max-width: 600px) {
  .module.sc-cmte .box-body table,
  .module.sc-cmte .box-body tbody,
  .module.sc-cmte .box-body tr,
  .module.sc-cmte .box-body td,
  .module.sc-cmte .box-body th {
    display: block;
    width: 100% !important;
  }

  .module.sc-cmte .box-body tr {
    border-bottom: 1px solid var(--sc-line, #dddddd);
    padding: 12px 0;
  }
  .module.sc-cmte .box-body tr:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }

  .module.sc-cmte .box-body td,
  .module.sc-cmte .box-body th {
    border-bottom: 0;
    padding: 0;
  }

  .module.sc-cmte .box-body td:first-child,
  .module.sc-cmte .box-body th:first-child {
    white-space: normal;
    margin-bottom: 4px;
    padding-right: 0;
  }
}
/* --- 7. 瀑布流排版 ---
   五個委員會模組放在同一個區塊裡，由 CSS 切成兩欄。
   卡片高度不一時會自動填補空隙，不會像分欄那樣被撐成等高。
   螢幕不夠寬時自己變回一欄，不需要另外寫斷點。 */
.clearfix:has(> .module.sc-cmte) {
  columns: 2 420px;   /* 最多兩欄，每欄至少 420px */
  column-gap: 24px;
}

/* Bootstrap 的 clearfix 偽元素在多欄裡會佔位，關掉 */
.clearfix:has(> .module.sc-cmte)::before,
.clearfix:has(> .module.sc-cmte)::after {
  display: none;
}

/* 卡片不能被切成兩半 */
.module.sc-cmte {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* --- 8. 卡片內按鈕（.sc-cmte-link）---
   放在卡片「裡面」的深藍圓角按鈕，指向該主題的完整頁面。
   議會組織頁（/p/organization）的議長／學生議員／各委員會三張卡片在用。

   ⚠️ 選擇器一定要寫到 .box-body a.sc-cmte-link（41 分）。
      C 區有規則在管卡片內的段落與連結，分數不夠會被蓋掉一半，
      看起來半調子而且不報錯——跟第 5 段的表格、.sc-cmte-msg 同樣的理由。

   ⚠️ 這一段刻意留在 C 區、跟 #sc-cmte 放在一起，不搬到檔案最後面。
      理由：它的每一條選擇器都以 .module.sc-cmte 開頭，它是這個皮膚的
      一部分，不是獨立的子系統（那才是議員名單 v9、委員會名單 v1 被
      放到最後面的理由）。拆開放會變成同一個皮膚散在兩處。 */

.module.sc-cmte .box-body a.sc-cmte-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;                 /* 文字與箭頭的距離 */
  margin-top: 26px;          /* 與上一段的距離，跟表格、提示框一致 */
  padding: 12px 22px;        /* 按鈕的胖瘦 */
  background: var(--sc-navy, #000024);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1.3;
  border-radius: 999px;      /* 999px = 兩端全圓；想改方角就填 8px */
  text-decoration: none;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.module.sc-cmte .box-body a.sc-cmte-link .sc-cmte-link-arrow {
  font-size: 16px;
  line-height: 1;
  transition: transform .25s ease;
}

/* 只在真的有滑鼠的裝置啟用，避免手機點一下卡住不還原 */
@media (hover: hover) and (pointer: fine) {
  .module.sc-cmte .box-body a.sc-cmte-link:hover {
    background: var(--sc-navy-light, #1c1c4a);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 36, .25);
  }
  .module.sc-cmte .box-body a.sc-cmte-link:hover .sc-cmte-link-arrow {
    transform: translateX(4px);
  }
}

/* 鍵盤操作時看得到目前位置 */
.module.sc-cmte .box-body a.sc-cmte-link:focus-visible {
  outline: 3px solid var(--sc-accent, #e60012);
  outline-offset: 3px;
}

/* 系統設定「減少動態效果」的使用者，關掉位移與漸變 */
@media (prefers-reduced-motion: reduce) {
  .module.sc-cmte .box-body a.sc-cmte-link,
  .module.sc-cmte .box-body a.sc-cmte-link .sc-cmte-link-arrow { transition: none; }
}    
/* ==========================================================
   #sc-pagetitle — 客製頁的頁面標題（中文大標 + 英文副標）
   ----------------------------------------------------------
   ★ 新增，貼到「全站樣式」C 區最後面（接在 #sc-cmte 那段之後、
     D 區「議會共用元件」之前）。

   【為什麼放全站，不放頁面樣式】
   歷史沿革、本會介紹原本各自在自己的頁面樣式裡寫了一份
   .main-header / .main-title / .sub-title，已經漂成兩套：
     副標顏色  #666666 ↔ #546a7b
     副標間距  無      ↔ margin-bottom: 25px
     副標字重  無      ↔ font-weight: 500
     動畫名稱  abou-fadeInUp ↔ hist-fadeInUp（同一段 keyframes 寫了兩次）
   議長介紹頁又是第三種做法。抽到這裡之後改一次全部跟著變，
   新增客製頁也不用再抄一份。

   【怎麼用】
   1. 版面設計 → 在頁面最上面拉一個「文字方塊模組」
      （不能用 HTML 模組，見維護手冊第五節）
   2. 模組設定 → 標題選「不顯示」、框線選「無」
   3. 內容就貼這兩行，中英文換成該頁的：

        <div class="sc-page sc-pagetitle">
          <h1>本會介紹</h1>
          <p>Introduction</p>
        </div>

      不要副標的話，把 <p> 那一整行刪掉就好，排版會自己收合。

   【想微調時只改這裡】
   下面第 1 段的三個參數。想單獨調某一頁，在那一頁的頁面樣式
   覆蓋同名參數即可，例如：
     #sc-history .sc-pagetitle { --pt-gap: 20px; }
   ========================================================== */


/* --- 1. 可調參數 --- */
.sc-pagetitle {
  --pt-size:  32px;   /* 中文大標字級 */
  --pt-sub:   16px;   /* 英文副標字級 */
  --pt-gap:   30px;   /* 標題區與下一個區塊的距離 */
}


/* --- 2. 版面 ---
   選擇器寫成 .sc-page.sc-pagetitle（兩個 class、20 分）是必要的：
   D 區的 .sc-page 會給底色，只寫 .sc-pagetitle（10 分）且位置在
   D 區之前，會被反蓋回去，標題後面就出現一條淡灰帶。 */
.sc-page.sc-pagetitle {
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 16px 0 16px;
  margin-bottom: var(--pt-gap);

  opacity: 0;
  animation: sc-fadeInUp 0.8s forwards ease-out;
  /* ↑ sc-fadeInUp 在 D 區已經定義過，這裡直接用，
     不要再各頁自己寫一份 abou-/hist- 開頭的同款動畫 */
}

/* h1、p 這兩條要帶標籤名（11 分），才蓋得過 D 區
   .sc-page *（10 分）把 margin 歸零的那條 */
.sc-pagetitle h1 {
  font-size: var(--pt-size);
  font-weight: 800;
  color: var(--sc-navy);
  letter-spacing: 1.5px;
  line-height: 1.3;
  margin: 0 0 6px 0;
}

.sc-pagetitle p {
  font-size: var(--pt-sub);
  font-weight: 500;
  color: var(--sc-text-muted);
  letter-spacing: 0.5px;
  margin: 0;
}


/* --- 3. 手機版 --- */
@media (max-width: 850px) {
  .sc-pagetitle {
    --pt-size: 26px;
    --pt-sub:  14px;
    --pt-gap:  20px;
  }
}  
/* ==========================================================
   D. 議會共用元件
   ---------------------------------------------------------
   只在有 class="sc-page" 的區塊內生效，碰不到 CMS 其他部分。
   （頁尾已移至頁尾 JS 設定區；底部導航按鈕已改用選單模組 + C 區皮膚）
   每一頁的 HTML 最外層要寫成：
       <div class="sc-page" id="sc-頁名"> ... </div>

   各頁若要調整這裡的數值，在該頁的「頁面樣式」用 id 覆蓋，
   例如：#sc-speaker .dashboard-container { max-width: 1100px; }
   （id 100 分 > class 10 分，一定蓋得過。）
   ========================================================== */
  
/* --- 讓 .sc-page 的 HTML 模組跟導航按鈕模組一樣，清掉包裹層內距 --- */
.module:has(.sc-page),
.module:has(.sc-page) .cpage-box,
.module:has(.sc-page) .box-body {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
.sc-page,
.sc-page *,
.sc-page *::before,
.sc-page *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.sc-page {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "PingFang TC", "Microsoft JhengHei", sans-serif;
  background: var(--sc-page-bg);
  color: var(--sc-text);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

/* --- 內容容器 ---
   max-width 拿掉、左右內距歸零 → 寬度跟導航按鈕模組一致（滿版）
   若哪天想改回窄版，把 max-width 改成 var(--sc-width) 就好 */
.sc-page .dashboard-container {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 40px 0 20px 0;
  display: flex;
  flex-direction: column;
  gap: var(--sc-gap);
  flex-grow: 1;
}


/* 手機版把左右內距補回來，不然文字會貼齊螢幕邊緣 */
@media (max-width: 850px) {
  .sc-page .dashboard-container {
    padding: 24px 16px 40px 16px;
  }
}

/* --- 共用動畫（名稱加 sc- 前綴，避免與 CMS 撞名）--- */
@keyframes sc-fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sc-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- 6. 手機版：全部改成直排 ---
   注意：這裡每一條都必須加 !important，
   否則會被上面第 3、4 段的 !important 蓋掉，
   li 的 200px 會變成「高度」，按鈕之間就會出現大空隙。 */
@media (max-width: 850px) {
  .module[class*="sc-navbtns"] .box-body ul {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }
  .module[class*="sc-navbtns"] .box-body ul > li {
    flex: 0 0 auto !important;
    width: 100% !important;
  }
}


/* ==========================================================
   全站頁尾（footer.site-footer）
   ----------------------------------------------------------
   架構 v2：從頁尾 JS 第 2 段移回 CSS。

   為什麼：
   - JS 只負責產生 footer HTML；外觀由【全站樣式】統一管理。
   - 主色直接讀 --sc-navy，不再另外保存一份 #000024。
   - 頁尾中文大標直接讀 --sc-footer-title。

   安靜失效時的症狀：
   - 這份沒被組進部署檔 → 頁尾仍會出現，但會變成瀏覽器預設的直排文字。
   - --sc-navy 不存在 → background 失效，頁尾可能變透明。
   ========================================================== */
footer.site-footer {
  --f-text:  #ffffff;   /* 主要文字 */
  --f-sub:   #e0e0e0;   /* 地址文字 */
  --f-fine:  #a0a0a0;   /* 版權文字 */
  --f-logo:  100px;     /* logo 高度 */

  background: var(--sc-navy);
  color: var(--f-text);
  padding: 60px 20px 30px;
  margin-top: 20px;
  width: 100%;
  box-sizing: border-box;
  font-family: "Noto Sans TC", sans-serif;
}

footer.site-footer .footer-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

footer.site-footer .footer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

footer.site-footer .footer-logo img {
  height: var(--f-logo) !important;
  width: auto !important;
  max-width: 120px !important;
  object-fit: contain;
  display: block;
}

footer.site-footer .footer-info {
  text-align: left;
  padding-left: 15px;
}

footer.site-footer .footer-title {
  font-size: var(--sc-footer-title);
  font-weight: bold;
  letter-spacing: 2px;
  margin: 0 0 5px;
  color: var(--f-text);
}

footer.site-footer .footer-subtitle {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
  margin: 0;
  color: var(--f-text);
}

footer.site-footer .footer-address {
  font-size: 15px;
  color: var(--f-sub);
  margin: 15px 0 0;
}

footer.site-footer .footer-divider {
  width: 100%;
  max-width: 800px;
  height: 1px;
  background: rgba(255,255,255,.2);
  margin: 20px auto;
}

footer.site-footer .footer-copyright {
  font-size: 13px;
  color: var(--f-fine);
  text-align: center;
}

@media (max-width: 700px) {
  footer.site-footer .footer-content {
    flex-direction: column;
  }

  footer.site-footer .footer-info {
    text-align: center;
    padding-left: 0;
  }
}
/* ==========================================================
   議員名單頁　共用樣式　v9
   ----------------------------------------------------------

     ⚠️ 為什麼是「檔案最後面」而不是「C 區皮膚那一區」（那才是它照分類
        該待的地方）：CSS 的括號如果少了一個（例如貼的時候被截斷），
        瀏覽器會把後面的內容一路吃掉，直到遇見下一個 }。
        放在中間的話，被吃掉的就是 D 區——**全站每一個客製頁的版面
        會一起壞**。放在最後面，同樣的意外只會讓這一段自己失效，
        其他頁完全不受影響。
     ★ 這是刻意違反分區慣例，換取「壞掉的範圍最小」。


   ⚠️ 每一個議員名單頁的 HTML 最外層都是
        <div class="sc-page" id="sc-members">
      **同一個 id 會出現在好幾頁上，這是刻意的**——它們不會同時存在於
      同一頁，共用同一個 id 才能共用同一份樣式。

   ========================================================== */


/* ========== 第 1 段　設定區　★ 要調整只改這一段 ==========
   下面每一行都是 var(全站變數, 備用色) 的形式：
   平常用的是全站樣式 A 區定義的那個顏色，逗號後面的備用色
   只有在變數沒載入時才會生效。
   ★ 這樣寫的用意：以後有人在全站樣式 A 區換了議會主色，這一頁會自己跟上。
     寫死色碼的話會變成平行的兩套，改全站色的人不會知道要來改這裡。
     （議長頁 v1 就是寫死的，v2 才改成這樣。） */
#sc-members {

  /* --- 這一頁的底色 ---
     ⚠️ 這一行不能刪。全站樣式 D 區的 .sc-page 有一層淺灰底
        （--sc-page-bg，#f5f5f7），不蓋掉的話整個模組會是一塊淺灰，
        而 CMS 頁面本身是白的——看起來就像名單被裝在一個灰盒子裡，
        而且白色的小卡會失去對比。
        議長頁、進站畫面也都各自寫了同樣一行，做法一致。 */
  background: transparent;

  /* 主色 */
  --m-red:   var(--sc-accent, #e60012);       /* 標誌紅，用在白底上（4.80:1） */
  /* 深一階的紅，用在淺灰底上的小字。
     ⚠️ 標誌紅放在 --m-band（#f5f5f7）上只有 4.41:1，差一點點不到 AA 的
        4.5:1。差別肉眼幾乎看不出來，但小字就是會比較吃力。
        這個值在淺灰上是 5.19:1、白底上 5.65:1，兩邊都過。
     ★ 只用在「淺灰底上的小字」。大標題、實心標籤仍然用正牌標誌紅。 */
  --m-red-ink: #d1000f;
  --m-navy:  var(--sc-navy,   #000024);       /* 議會主色 */

  /* 文字 */
  --m-text:  var(--sc-text,       #12122b);
  --m-sub:   var(--sc-text-muted, #5a5a70);   /* 系級那一行 */

  /* 底色與線 */
  --m-card:  #ffffff;                         /* 小卡底色，固定白 */
  --m-line:  var(--sc-line, #dcdce2);
  /* 學院標題那一條的底色，也是「載入中／讀不到名單」提示框的底色。
     用全站的內容區底色，所以是「白底上的淺灰」。
     ⚠️ 如果哪天這一頁的底色不再是白的，這一條就會消失在背景裡
        （不會報錯，只是學院標題列看起來變成只剩一條紅線，
        錯誤提示框也浮不出來）。要一起檢查。 */
  --m-band:  var(--sc-page-bg, #f5f5f7);

  /* 一張小卡最窄多少（px）。
     ⚠️ 調小於 120 的話，「數位內容碩二」那種長系級會被擠成兩行，
        每一列的高度就會不一樣，看起來像沒對齊。 */
  --m-card-min: 150px;

  /* 卡與卡的間距 */
  --m-gap: 10px;
}


/* =========================================================
   議員名單頁　樣式更新　配合頁尾 JS 第 6 段 v6.2
   建立日期：2026-08-31
   ---------------------------------------------------------
   ⚠️ 貼到哪裡：【全站樣式】（site_rwd.css），
      找到 `#sc-members` 那一整塊裡的

          第 2 段　標題列與說明
          第 2-2 段　各會期連結

      **這兩段整段取代**成下面的內容。

      ・往上到「第 1 段　設定區」為止，不要動。
      ・往下從「第 3 段」開始，不要動。
      ・#sc-members 的第 4、5、6、7 段（小卡、學院、異動區、手機版）
        一個字都不用改。
      ・sc-member.css（/p/members 職位介紹頁）與其他頁面完全無關。

   ⚠️ 這份 CSS 與頁尾 JS 第 6 段 v6.2 是**一組**，要一起換。
      只換 CSS 不換程式 → 會期又變回一長排（因為程式沒輸出 is-w1 那些 class）。
      只換程式不換 CSS → 箭頭完全看不見（它是 CSS 畫的）、三層標題擠在一起。
   ---------------------------------------------------------
   ★ 用到的變數都在 #sc-members 第 1 段設定區，這裡沒有新增任何變數：
       --m-text  --m-navy  --m-sub  --m-red  --m-red-ink  --m-band
   ========================================================= */


/* ========== 第 2 段　標題列與說明 ==========
   ⚠️ 這一段刻意「沒有」寬度設定。
      寬度、左右內距、手機版內距全部由全站樣式 D 區的
      .sc-page .dashboard-container 負責，全站客製頁共用同一套。
      在這裡自己加 max-width 的話，這一頁會比底部的「返回首頁」
      按鈕窄一截，左右對不齊——不會報錯，只是看起來歪的。

   ★★ v6.2 改了什麼

     舊版標題列是一長串：
       第 27 屆　第 1 會期　115 學年度 (上)　2026-08-01 ～ 2027-01-31　現職 48 位
     手機上擠成三行，而且全形空格撐出很大的縫。

     現在分三層，分隔符號改成「·」：
       .sc-mem-term   主標　第 27 屆　第 1 會期
       .sc-mem-meta   副標　115 學年度 (上) · 現職 48 位
       .sc-mem-span   日期　2026-08-01 ～ 2027-01-31

     ⚠️ 舊的 .sc-mem-caption .sc-mem-dim 已經沒有人用了，程式不再輸出，
        所以下面沒有它。看到別處還留著可以一起刪。

   ★ .sc-mem-note（資料來源那一句）現在排在名單**後面**——
     那是程式的骨架順序決定的，不是這裡的 order。
     這裡只把上下間距從「標題底下」改成「名單之後」。 */

#sc-members .sc-mem {
  color: var(--m-text);
  line-height: 1.7;
}

/* --- 標題列三層 --- */
#sc-members .sc-mem-caption {
  margin: 0 0 16px;
}

/* 主標。clamp 讓它在手機不會太大、在桌機不會太小。 */
#sc-members .sc-mem-term {
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .01em;
  color: var(--m-navy);
}

/* 副標：學年度 · 人數 */
#sc-members .sc-mem-meta {
  margin-top: 2px;
  font-size: 13.5px;
  color: var(--m-sub);
}

/* 日期。tabular-nums 讓數字等寬，兩個日期的位數才對得齊。 */
#sc-members .sc-mem-span {
  margin-top: 3px;
  font-size: 12px;
  color: var(--m-sub);
  opacity: .9;
  font-variant-numeric: tabular-nums;
}

/* --- 說明小字（資料來源）---
   ⚠️ 它現在在名單的最下面，所以是 margin-top 大、margin-bottom 0。
      改回上面的話這兩個值要對調。 */
#sc-members .sc-mem-note {
  margin: 28px 0 0;
  font-size: 13px;
  color: var(--m-sub);
}
#sc-members .sc-mem-note a { color: var(--m-red); }


/* ========== 第 2-2 段　各會期切換 ==========
   程式自動列出「資料頁裡真的有議員名單」的會期。
   ⚠️ 這一排的存在有第二個用途：忘了幫新會期建頁面時，
      連結會出現但點下去 404——看得見的壞，比「沒有連結、沒人發現」好。

   ★★ v6.2：省略號式翻頁

     桌機（≥ 760px）　全部平鋪、置中，沒有箭頭也沒有省略號
     手機（< 760px）　只留一排：最新 ⋯ 目前前後幾個 ⋯ 最舊，兩端各一個箭頭

   ⚠️⚠️ **「露幾個會期」是這裡決定的，不是程式。**
      程式只把每個會期標上一個 class：

        is-edge   最新或最舊（永遠看得見）
        is-w0     就是目前這一個
        is-w1     跟目前差一個
        is-w2     跟目前差兩個
        （差三個以上沒有 class）

      下面的斷點再決定每一階要顯示到 w 幾。覺得手機上露太少，
      **改下面的數字就好，不用動頁尾 JS。**

   ★ 被藏起來的會期仍然是真的 <a>，只是 display:none。

   ⚠️ 舊的 .sc-mem-navnow（「現任」那顆小紅籤）已經拿掉了，
      現任改成只用顏色標示（.is-now）。程式不再輸出那個元素。
   ========================================================= */

#sc-members .sc-mem-nav {
  margin: 0 0 22px;
}
#sc-members .sc-mem-nav:empty { display: none; }   /* 只有一屆時整排收起來 */

/* 「各會期名單」五個字獨立一行、置中，不跟會期擠在同一排 */
#sc-members .sc-mem-navtitle {
  display: block;
  text-align: center;
  margin-bottom: 8px;
  font-size: 12.5px;
  color: var(--m-sub);
  letter-spacing: .04em;
}

#sc-members .sc-mem-navlist {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
}

/* --- 會期本身 --- */
#sc-members .sc-mem-navlink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;                 /* ★ 觸控區，不要調小 */
  padding: 0 11px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--m-navy);
  background: var(--m-band);
  border: 1px solid transparent;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#sc-members a.sc-mem-navlink:hover,
#sc-members a.sc-mem-navlink:focus-visible {
  border-color: var(--m-navy);
}

/* 現任會期：白底紅框紅字。★ 不加「現任」兩個字，只用顏色。 */
#sc-members .sc-mem-navlink.is-now {
  background: #fff;
  border-color: var(--m-red);
  color: var(--m-red-ink);
  font-weight: 700;
}

/* 正在看的這一頁：深藍實心 */
#sc-members .sc-mem-navlink.is-here {
  background: var(--m-navy);
  border-color: var(--m-navy);
  color: #fff;
  font-weight: 700;
}

/* 兩者都是（站在現任那一頁）：深藍底再加一條紅底線。
   ⚠️ 不要改成紅字——紅字在深藍底上看不清楚。 */
#sc-members .sc-mem-navlink.is-here.is-now {
  box-shadow: inset 0 -3px 0 var(--m-red);
}

/* --- 兩端的箭頭 ---
   ★★ 形狀是用「上邊框＋右邊框」畫一個角再旋轉出來的，**不是文字符號**。
      這樣粗細、顏色、大小都由 CSS 說了算，不會因為使用者裝了什麼字型而變樣。
   ⚠️ 要調粗細改下面那兩個 3px（兩行都要改，只改一行會變成不對稱的勾）。
   ⚠️ 寬度 24px 是刻意壓到最小的：每多 1px，手機那一排就少一點放會期的空間。
      高度 40px 維持觸控區，所以實際還是好按。 */
#sc-members .sc-mem-step {
  position: relative;
  flex: none;
  display: none;                    /* 桌機不放箭頭，手機才打開 */
  width: 24px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  text-decoration: none;
}
#sc-members .sc-mem-step::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  border-top: 3px solid var(--m-navy);
  border-right: 3px solid var(--m-navy);
  border-radius: 1.5px;
}
#sc-members .sc-mem-step.is-prev::before { transform: translate(-40%, -50%) rotate(-135deg); }
#sc-members .sc-mem-step.is-next::before { transform: translate(-60%, -50%) rotate(45deg); }

#sc-members a.sc-mem-step:hover::before,
#sc-members a.sc-mem-step:focus-visible::before { border-color: var(--m-red); }

/* 已經是最新／最舊時：還是畫出來，只是變淡且不能點，
   這樣那一排的寬度不會忽大忽小。 */
#sc-members .sc-mem-step.is-off { pointer-events: none; }
#sc-members .sc-mem-step.is-off::before { opacity: .28; }

/* --- 省略號 ---
   ⚠️ 沒有外框，只靠顏色與字級暗示可以按。 */
#sc-members .sc-mem-more {
  flex: none;
  display: none;                    /* 桌機全部攤開，沒有省略號 */
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 5px;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--m-sub);
}
#sc-members .sc-mem-more:hover { color: var(--m-red); }
#sc-members .sc-mem-more:focus-visible {
  outline: 2px solid var(--m-red);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --- 收合鈕（只有展開後才看得到）--- */
#sc-members .sc-mem-collapse {
  display: none;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  color: var(--m-sub);
  padding: 8px 14px;
}
#sc-members .sc-mem-collapse:hover { color: var(--m-red); }


/* ---------------------------------------------------------
   手機／窄視窗：只留一排
   ---------------------------------------------------------
   ⚠️ 這幾個斷點跟 #sc-members 第 7 段的 850px **刻意不一樣**。
      850px 管的是「小卡要幾欄」，這裡管的是「一排塞得下幾個會期」，
      是兩件事。硬要對齊的話，760～850 之間會出現一排放不下而被切掉。

   ★ 三個數字是實測出來的（4 字會期、14px、一排模式的緊間距，
      左右各 16px 內距）：
        400px  起　放得下 5 個會期（目前 ±1 ＋ 最新 ＋ 最舊）
        520px  起　放得下 7 個會期（目前 ±2 ＋ 最新 ＋ 最舊）
        760px  起　29 個全部攤開也只有三行，就不必省略了
      每一階都還留了餘裕，所以字型換掉、或會期變成 5 個字也不會馬上爆掉；
      真的爆掉時是變成可以左右滑（見上面的 overflow-x），不是被切掉。
   --------------------------------------------------------- */
@media (max-width: 759px) {
  /* 不換行。萬一某台裝置比預期窄，是變成可以左右滑，不是被切掉。 */
  #sc-members .sc-mem-navlist {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  #sc-members .sc-mem-navlist::-webkit-scrollbar { display: none; }

  #sc-members .sc-mem-step { display: inline-block; }

  /* 沒有 class 的會期（跟目前差三個以上）藏起來 */
  #sc-members .sc-mem-navlink { display: none; }
  #sc-members .sc-mem-navlink.is-edge,
  #sc-members .sc-mem-navlink.is-w0,
  #sc-members .sc-mem-navlink.is-w1,
  #sc-members .sc-mem-navlink.is-w2 { display: inline-flex; }

  #sc-members .sc-mem-more.is-upto-2 { display: inline-flex; }

  /* 一排模式一律用比較緊的間距，桌機那一排不受影響 */
  #sc-members .sc-mem-navlist { gap: 4px; }
  #sc-members .sc-mem-navlink { padding: 0 9px; }
  #sc-members .sc-mem-step { width: 22px; }
  #sc-members .sc-mem-more { padding: 0 3px; }
}

/* 再窄一階：前後各留 1 個 */
@media (max-width: 519px) {
  #sc-members .sc-mem-navlink.is-w2 { display: none; }
  #sc-members .sc-mem-more.is-upto-1 { display: inline-flex; }
}

/* 真的很窄（iPhone SE 第一代那種）：只剩最新 ⋯ 目前 ⋯ 最舊 */
@media (max-width: 399px) {
  #sc-members .sc-mem-navlink { padding: 0 8px; }
  #sc-members .sc-mem-navlink.is-w1 { display: none; }
  #sc-members .sc-mem-more.is-upto-0 { display: inline-flex; }
}


/* ---------------------------------------------------------
   展開（按了「⋯」之後）
   ---------------------------------------------------------
   ⚠️ 這一整塊要放在上面那幾個斷點**後面**。
      它靠選擇器權重壓過前面的 display:none，順序反了會失效。
   --------------------------------------------------------- */
@media (max-width: 759px) {
  #sc-members .sc-mem-nav.is-open .sc-mem-navlist {
    flex-wrap: wrap;
    overflow: visible;
  }
  /* 展開時全部顯示，包含原本被藏起來的 */
  #sc-members .sc-mem-nav.is-open .sc-mem-navlink { display: inline-flex; }

  /* 全部都看得到了，箭頭與省略號就沒有作用 */
  #sc-members .sc-mem-nav.is-open .sc-mem-step,
  #sc-members .sc-mem-nav.is-open .sc-mem-more { display: none; }

  /* 收合鈕自己佔滿一行、置中 */
  #sc-members .sc-mem-nav.is-open .sc-mem-collapse {
    display: block;
    flex: 0 0 100%;
    text-align: center;
  }
}

/* ========== 第 3 段　學院區塊 ========== */
#sc-members .sc-mem-college { margin: 0 0 26px; }

#sc-members .sc-mem-college > h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
  padding: 7px 12px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--m-navy);
  background: var(--m-band);
  /* 左邊那條紅線是這一頁跟全站其他區塊呼應的地方，不要拿掉 */
  border-left: 4px solid var(--m-red);
}
#sc-members .sc-mem-college > h2 .sc-mem-count {
  font-size: 13px;
  font-weight: 400;
  color: var(--m-sub);
  letter-spacing: 0;
}


/* ========== 第 4 段　議員小卡 ========== */
#sc-members .sc-mem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--m-card-min), 1fr));
  gap: var(--m-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

#sc-members .sc-mem-card {
  padding: 10px 12px;
  background: var(--m-card);
  /* ⚠️ 四邊都是同一條 1px 框線，不要單獨改 border-left。
     v3 以前左邊寫成 border-left: 3px solid transparent（想留位置給職務的
     重點條），結果是「沒有職務的卡片左邊完全沒有框線」——因為透明的邊框
     蓋掉了這一條。手機版排兩欄時特別明顯。不會報錯，只是缺一條線。
     現在重點條改用第 5 段的內縮陰影畫在框線內側，不動邊框。 */
  border: 1px solid var(--m-line);
  border-radius: 6px;
}

#sc-members .sc-mem-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--m-navy);
}
#sc-members .sc-mem-dept {
  font-size: 13px;
  color: var(--m-sub);
}

/* --- 個人頁面連結 ---
   名字本身變成連結。刻意不用藍色底線那種預設連結樣式：
   一整頁 40 幾個名字，只有幾個有連結，畫面會很花。
   改成「平常跟其他名字長得一樣，滑過去才變色加底線」。
   ⚠️ 只靠顏色是不夠的——所以站外連結永遠帶一個 ↗ 記號，
      不需要滑鼠移過去也看得出來哪些名字點得下去。 */
#sc-members .sc-mem-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
#sc-members .sc-mem-link:hover,
#sc-members .sc-mem-link:focus-visible {
  color: var(--m-red);
  border-bottom-color: currentColor;
}
#sc-members .sc-mem-ext {
  margin-left: 3px;
  font-size: 11px;
  font-weight: 400;
  color: var(--m-sub);
  vertical-align: 1px;
}
#sc-members .sc-mem-link:hover .sc-mem-ext { color: inherit; }


/* ========== 第 5 段　標籤 ========== */
#sc-members .sc-mem-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
#sc-members .sc-mem-tag {
  display: inline-block;
  padding: 1px 7px;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .5px;
  border-radius: 3px;
  border: 1px solid currentColor;
  /* ⚠️ 這裡不能寫 white-space: nowrap。
     標籤的字是從資料頁原樣拿來的，長度不受控——
     「停職 2026-08-01（轉任副會長）」這種就會直接衝出卡片右邊，
     而且不會報錯、只有那一張卡看得出來。
     讓它自己換行，最多變成兩行，不會破版。 */
  max-width: 100%;
}

/* --- 卡片左側的重點條 ---
   用「內縮陰影」畫在 1px 框線的內側，不是用邊框。
   ⚠️ 這樣寫的原因是：改邊框會蓋掉那一邊的框線（v3 以前就是這樣缺線的），
      而且改寬度會讓有職務／沒職務的卡片內容差幾 px，一排看起來沒對齊。
      內縮陰影不佔空間，兩種卡片的幾何完全一樣。

   ⚠️⚠️ 下面三條的**先後順序有意義**，不要調換：三條的權重相同，
      同時符合時是「寫在後面的贏」。
        校務會議學生代表 → 議長  ：議長同時也是校務代表（例：游博安），
                                   要顯示紅色，所以議長寫在後面。
        議長 → 停職            ：停職的整張卡是暗的，重點條也跟著轉灰，
                                   所以停職寫在最後面。
      順序寫反不會報錯，只是議長的卡片會變成深藍條，很難發現。 */

/* 校務會議學生代表：深藍 */
#sc-members .sc-mem-tag.is-rep { color: var(--m-navy); }
#sc-members .sc-mem-card.has-rep { box-shadow: inset 3px 0 0 var(--m-navy); }

/* 議長／副議長／秘書長：實心紅標籤，重點條也是紅的，最顯眼 */
#sc-members .sc-mem-tag.is-role {
  color: #fff;
  background: var(--m-red);
  border-color: var(--m-red);
}
#sc-members .sc-mem-card.has-role { box-shadow: inset 3px 0 0 var(--m-red); }

/* 異動（停職／解任／辭職）：灰色標籤，整張卡壓暗。
   ⚠️ 這一條要寫在議長那一條「後面」。異動的人身上可能同時有職務或
      校務代表標籤，重點條要以異動為準（灰的），不然一區灰卡裡混著
      一條紅線，看起來像沒改到。 */
/* 異動標籤的灰。⚠️ 不要再調淡：#8a8a90 在 #fafafa 上只有 3.29:1，
   這個值是 5.06:1。標籤字級只有 11px，更需要對比。 */
#sc-members .sc-mem-tag.is-off,
#sc-members .sc-mem-tag.is-out { color: #6b6b73; }

#sc-members .sc-mem-card.is-moved {
  background: #fafafa;
  box-shadow: inset 3px 0 0 #c9c9cf;
}
/* ⚠️⚠️ 這裡刻意「不」把姓名與系所調淡。
   v7 以前是 color: #9a9aa0，量出來對比只有 2.68:1（AA 需要 4.5:1），
   而那一區放的正是停職、解任、辭職的人——把他們的名字調到很難讀，
   既是無障礙問題，對當事人也不妥。
   ★ 而且那個「淡」本來就沒有在傳達資訊：狀態是「停職」「解任」這幾個
     文字標籤在講的，色弱的使用者本來就看不出淡不淡。
     所以拿掉它不損失任何東西，只是變得讀得到。
   區隔改由：卡片底色（#fafafa）＋左邊那條灰色重點條負責。 */


/* ========== 第 5-2 段　「本會期異動」區 ==========
   停職、解任、辭職的人集中放這一區，在所有學院之後。
   ⚠️ 標題左邊那條刻意用深藍、不用紅。紅色在這一頁代表「現任的重點」
      （學院標題、議長標籤），異動區用同一個紅會讓人以為是重要公告。 */
#sc-members .sc-mem-moved > h2 {
  border-left-color: var(--m-navy);
  color: var(--m-sub);
}
/* 跟上面最後一個學院拉開一點距離，讓它看起來是獨立的一段 */
#sc-members .sc-mem-moved { margin-top: 34px; }

/* 標題底下那一行制度說明（設定區的 MOVED_NOTE） */
#sc-members .sc-mem-subnote {
  margin: -4px 0 12px;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--m-sub);
}


/* ========== 第 6 段　載入中與後備提示 ========== */
/* 名單是訪客的瀏覽器去資料頁抓回來的，抓之前這一行會先出現。 */
#sc-members .sc-mem-fallback {
  margin: 0;
  padding: 16px 18px;
  background: var(--m-band);
  border-left: 4px solid var(--m-line);
  color: var(--m-sub);
  font-size: 14px;
}
#sc-members .sc-mem-fallback.is-error {
  border-left-color: var(--m-red);
  color: var(--m-text);
}
#sc-members .sc-mem-fallback a { color: var(--m-red); }


/* ========== 第 7 段　手機版 ==========
   ⚠️ 斷點用 850px，跟全站樣式 D 區、導航按鈕那幾段一致。
      這裡改成別的數字不會報錯，但會出現「按鈕已經變直排、
      名單還是桌機版」那種只在某個寬度區間才看得到的錯位。 */
@media (max-width: 850px) {
  #sc-members {
    /* 手機上一排兩張，再窄就會變成一排一張、頁面拉得很長 */
    --m-card-min: 132px;
    --m-gap: 8px;
  }
  #sc-members .sc-mem-college > h2 { font-size: 16px; }
  #sc-members .sc-mem-name { font-size: 15px; }
}


/* ========== 第 8 段　（保留位置）==========
   這一頁沒有任何動畫或轉場，所以不需要為「系統設定關掉動態效果」的
   使用者另外處理。v4 拿掉 hover 陰影之後，原本這裡的 transition: none
   也就沒有對象了。
   ⚠️ 以後如果加了動畫，記得回來補 @media (prefers-reduced-motion: reduce)。 */
  
  /* ==========================================================
   委員會名單　v1（給頁尾 JS 第 7 段產生的內容用）
   ----------------------------------------------------------
   ★ 貼到【全站樣式】的**整份檔案最後面**，接在「議員名單頁 共用樣式 v9」
     之後。**新增，不是取代**——不要動全站樣式現有的任何一段。

     ⚠️ 為什麼放最後面而不是 C 區皮膚那一區（那才是它照分類該待的地方）：
        CSS 的括號如果少了一個（例如貼的時候被截斷），瀏覽器會把後面的
        內容一路吃掉，直到遇見下一個 }。放在中間的話被吃掉的是後面幾區，
        放在最後面，同樣的意外只會讓這一段自己失效。
        跟議員名單 v9 同樣的取捨。

   【為什麼這一段這麼短】
   委員會名單的**表格樣式完全不用新寫**。第 7 段產生的 HTML 刻意就是
   原本手打的那個 <table><tbody><tr><td> 結構，所以 C 區 #sc-cmte 皮膚
   第 5、6 段（表格排版、卡片變窄時改成上下堆疊）原封不動就繼續生效。

   ⚠️ 也就是說：**改委員會表格的長相，還是去改 C 區 #sc-cmte 那一段**，
      不要在這裡再寫一份，不然會變成兩套平行的規則。

   這一段只負責一件 C 區沒有的東西：名單還沒載入完、或讀不到資料時的
   那一行提示。
   ========================================================== */


/* 「名單載入中……」與各種錯誤提示。

   ⚠️ 選擇器一定要寫到 `.box-body p.sc-cmte-msg`（41 分），不能只寫
      `.module.sc-cmte .sc-cmte-msg`（30 分）。C 區有一條
      `.module.sc-cmte .box-body p`（31 分）在管段落的顏色、行高與
      左右對齊——分數不夠的話，這個提示框會被那一條蓋掉：
      底色和左邊那條線出得來，但文字顏色、間距是段落的，看起來半調子。
      不會報錯，只會覺得「怪怪的」。 */
.module.sc-cmte .box-body p.sc-cmte-msg {
  margin: 26px 0 0;
  padding: 14px 16px;
  background: var(--sc-page-bg, #f5f5f7);
  border-left: 4px solid var(--sc-line, #dcdce2);
  color: var(--sc-text-muted, #5a5a70);
  font-size: 14px;
  line-height: 1.7;
  /* C 區的段落是左右對齊（justify）的，短短一句提示被拉開會很醜 */
  text-align: left;
}

/* 錯誤（讀不到資料頁、找不到這個委員會）用紅線，跟一般的「載入中」分開。
   ⚠️ 這裡刻意不把整段變紅字：紅字在白卡片上很像警告視窗，
      而這多半是維護者要看的訊息，不是給訪客的警報。 */
.module.sc-cmte .box-body p.sc-cmte-msg.is-error {
  border-left-color: var(--sc-accent, #e60012);
  color: var(--sc-text, #12122b);
}

.module.sc-cmte .box-body p.sc-cmte-msg a {
  color: var(--sc-accent, #e60012);
}

/* 錯誤訊息裡會出現 data-cmte、sc-cmte 這種要照抄的字，用等寬框起來，
   免得有人把中文說明的一部分當成要輸入的內容。 */
.module.sc-cmte .box-body p.sc-cmte-msg code {
  padding: 1px 5px;
  background: #ffffff;
  border: 1px solid var(--sc-line, #dcdce2);
  border-radius: 3px;
  font-size: 13px;
  white-space: nowrap;
}
/* ==========================================================
   現任學生議員摘要　樣式 v1（.sc-now）
   ----------------------------------------------------------
   ★ 這是【全站樣式】的**新增段落**，貼在整份檔案的**最後面**
     （目前最後一段是「委員會名單樣式 v1」，接在它後面）。
     上面任何一段都不要動。

   ★ 為什麼放全站樣式、不放頁面樣式：
     它跟議員名單 v9、委員會名單 v1 一樣，是**跨頁的子系統**——
     程式在【頁尾 JS 設定區】第 8 段、資料在歷屆名冊資料頁、
     頁面上只放一個空框。首頁以後也要放，放在某一頁的頁面樣式裡
     就只有那一頁看得到。

   【怎麼用】在任何一頁放這個摘要
     文字方塊模組（標題「不顯示」、框線「無」）貼這一行：
       <div class="sc-now"></div>
     首頁那種精簡版：
       <div class="sc-now" data-mode="compact"></div>

   ⚠️⚠️ 下面第 1 段那兩條是一組（預設隱藏 ＋ 有 .is-ready 才顯示），
      **不要只留一條，也不要「順手」把它們清掉。**
      刪掉的症狀：資料抓不到時，會露出一個近乎空白的盒子——
      規格書 v5 第三節要求的是「整個模組不顯示且高度為零」。
   ========================================================== */


/* --- 1. 可調參數 ＋ 基礎排版 ＋ 降級開關 ---
   ⚠️⚠️ 下面那三行字級／行高／文字顏色**不要刪**。

   v4 以前這一塊是長在議員頁的 `#sc-member` 裡面，字級與行高是那個
   容器給的。抽成全站共用模組之後它變成獨立的一塊，
   沒有自己設就會吃 CMS 的預設值——**整塊會比原本大一號、鬆一截**，
   而且不會報錯，只是「看起來跟以前不一樣」。
   （2026-08-30 上測試頁時就是先漏了這三行。） */
.sc-now {
  font-size: clamp(15px, 1.05vw, 16.5px);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;

  --scn-red:   var(--sc-accent, #e60012);
  --scn-ink:   var(--sc-text, #12122b);
  --scn-ink-2: var(--sc-text-muted, #5a5a70);
  --scn-line:  var(--sc-line, #dcdce2);
  --scn-bg:    var(--sc-page-bg, #f5f5f7);
  --scn-navy:  var(--sc-navy, #000024);
  --scn-radius: 14px;
}

.sc-now,
.sc-now *,
.sc-now *::before,
.sc-now *::after { box-sizing: border-box; }

.sc-now { color: var(--scn-ink); }

/* ⚠️⚠️ 這兩條是一組，見檔頭警告 */
.sc-now { display: none; }
.sc-now.is-ready { display: block; }


/* --- 2. 標題（標準版才有） --- */
/* ★ margin-bottom 用 .2em，跟 v4 以前的 .mb-h2 一致；
   改大會讓標題跟框之間多出一截空白。 */
.sc-now .sc-now-h {
  margin: 0 0 .2em;
  font-size: clamp(1.2em, 2.6vw, 1.5em);
  font-weight: 800;
  color: var(--scn-navy);
}


/* --- 3. 外框（標準版才有；精簡版沒有框） --- */
.sc-now .sc-now-box {
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--scn-line);
  border-radius: var(--scn-radius);
  background: linear-gradient(180deg, #fff, var(--scn-bg));
}


/* --- 4. 屆會期與學年度 --- */
.sc-now .sc-now-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  color: var(--scn-ink-2);
  font-size: .9em;
}
.sc-now .sc-now-term { font-weight: 800; color: var(--scn-ink); }


/* --- 5. 總人數 --- */
.sc-now .sc-now-total {
  margin: .15em 0 .8em;
  font-size: 1.05em;
  color: var(--scn-ink);
}
.sc-now .sc-now-total b {
  font-size: 1.9em;
  font-weight: 800;
  color: var(--scn-red);
  margin-right: .15em;
}


/* --- 6. 各學院席次標籤 ---
   ⚠️ 這裡永遠只會出現學院名稱與數字，不會有人名。 */
.sc-now .sc-now-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0 0 1em;
  padding: 0;
}
.sc-now .sc-now-chips li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  border: 1px solid var(--scn-line);
  border-radius: 999px;
  background: #fff;
  font-size: .85em;
  color: var(--scn-ink-2);
}
.sc-now .sc-now-n {
  min-width: 1.8em;
  padding: 0 .4em;
  border-radius: 999px;
  background: var(--scn-navy);
  color: #fff;
  font-weight: 800;
  font-size: .95em;
  text-align: center;
}


/* --- 7. 連結 ---
   ⚠️ 網址是程式算出來的（第 8 段的 PAGE_BASE ＋ 當期屆次），
      頁面上不寫死，換屆不用改。
   ★ 標準版的連結在**框裡面**（接在學院標籤後面），跟 v4 以前一致。
     精簡版沒有框，它就直接接在人數後面。 */
.sc-now .sc-now-go {
  display: inline-block;
  font-weight: 700;
  font-size: .95em;
  color: var(--scn-red);
  text-decoration: none;
}
.sc-now .sc-now-go:hover { text-decoration: underline; }
.sc-now .sc-now-go:focus-visible {
  outline: 2px solid var(--scn-red);
  outline-offset: 3px;
}


/* --- 8. 精簡版（data-mode="compact"，首頁用） ---
   沒有標題、沒有外框、沒有學院標籤，只有一行數字加連結。 */
.sc-now[data-mode="compact"] .sc-now-total { margin-bottom: .3em; }
.sc-now[data-mode="compact"] .sc-now-total b { font-size: 1.5em; }


/* ==========================================================
   附件全部下載　v1（給頁尾 JS 第 9 段產生的控制區用）
   建立日期：2026-09-01
   ----------------------------------------------------------
   ★ 貼到【全站樣式】的**整份檔案最後面**，接在「現任學生議員摘要
     樣式 v1」之後。**新增，不是取代**——上面任何一段都不要動。

     ⚠️ 為什麼放最後面而不是 C 區皮膚那一區（那才是它照分類該待的
        地方）：CSS 的括號如果少了一個（例如貼的時候被截斷），
        瀏覽器會把後面的內容一路吃掉，直到遇見下一個 }。放在中間的話
        被吃掉的是後面幾區；放在最後面，同樣的意外只會讓這一段自己
        失效，其他頁完全不受影響。
        跟議員名單、委員會名單、現任議員摘要同樣的取捨。

   ----------------------------------------------------------
   ⚠️⚠️ 這一段的每一條 selector 都以 .sc-dlall 開頭（規格 11.1）。

     **不要**改成 .btn、.caption、.fs-list、ul、li 這種裸 selector。
     那些 class 是 xms+ 全站共用的，一改就會讓知識庫、名冊、公告等
     所有清單一起變形，**而且不會報錯**——症狀是「某一頁的版面怪怪的」，
     幾乎沒有人查得到是這裡造成的。

   ⚠️ 這一段也**沒有**去改原附件清單（.fs-list.fs-filelist ul）的任何
      樣式。控制區是插在「附件:」標題與 ul 之間的獨立區塊，
      原本 17 個逐一下載連結的長相、排序、間距一律照舊。
   ----------------------------------------------------------
   ★ 這一段沒出現在畫面上時要查什麼
     ・會議資料頁沒看到按鈕 → 是頁尾 JS 第 9 段的事，不是這裡
     ・按鈕出現但沒有樣式（一顆系統預設的灰按鈕）→ 這一段沒貼到，
       或上面某一段少了一個 }
   ========================================================== */


/* --- 1. 可調參數　★ 要微調只改這一段 ---
   每一行都是 var(全站變數, 備用色)：平常用的是 A 區定義的議會配色，
   逗號後面只有在變數沒載入時才會生效。
   ★ 這樣寫的用意跟議員名單、委員會一致——以後有人在 A 區換了議會主色，
     這顆按鈕會自己跟上，不會變成一套平行的顏色。 */
.sc-dlall {
  --dl-navy:  var(--sc-navy, #000024);         /* 按鈕底色 */
  --dl-navy-2: var(--sc-navy-light, #1c1c4a);  /* 滑鼠移過去 */
  --dl-red:   var(--sc-accent, #e60012);       /* 焦點框與錯誤 */
  --dl-sub:   var(--sc-text-muted, #5a5a70);   /* 說明小字 */
  --dl-ink:   var(--sc-text, #12122b);
  --dl-line:  var(--sc-line, #dcdce2);
  --dl-band:  var(--sc-page-bg, #f5f5f7);      /* 狀態列底色 */

  /* 按鈕高度。⚠️ 不要低於 44px：那是手指觸控區的通用下限，
     再小在手機上就會變得不好按（規格第十節）。 */
  --dl-hit: 44px;
}


/* --- 2. 控制區外框 ---
   ⚠️ margin 的上下不對稱是刻意的：上面貼近「附件:」標題，
      下面跟第一個附件拉開一點，看起來才像是「這一排的工具列」，
      而不是清單的第一項。 */
.sc-dlall {
  margin: 10px 0 14px;
  padding: 0;
  /* 手機不得橫向溢出（規格第十節）。這一行是最後一道保險：
     萬一裡面有超長不斷行的字，是它自己收起來，不是把整頁撐寬。 */
  max-width: 100%;
}

.sc-dlall .sc-dlall-row {
  display: flex;
  flex-wrap: wrap;              /* 放不下就換行，不要壓縮按鈕 */
  align-items: center;
  gap: 10px 14px;
}


/* --- 3. 按鈕 ---
   ⚠️ 這是原生 <button>，不是用 <div> 假裝的（規格第十節）。
      所以要自己把瀏覽器的預設外觀清掉，字型也要 inherit，
      不然在 Safari 上會變成系統字。 */
.sc-dlall .sc-dlall-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--dl-hit);
  padding: 0 22px;
  border: 0;
  border-radius: 999px;         /* 跟委員會卡片按鈕 .sc-cmte-link 同一個語彙 */
  background: var(--dl-navy);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1.3;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* 只在真的有滑鼠的裝置啟用，避免手機點一下卡住不還原
   （跟 C 區各段同一個做法）。 */
@media (hover: hover) and (pointer: fine) {
  .sc-dlall .sc-dlall-btn:hover:not(:disabled) {
    background: var(--dl-navy-2);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 36, .25);
  }
}

/* ⚠️ 焦點樣式不能拿掉（規格第十節）。用鍵盤 Tab 的人全靠它知道
   自己在哪裡；拿掉之後鍵盤操作等於瞎走，而且測試時完全看不出來。 */
.sc-dlall .sc-dlall-btn:focus-visible {
  outline: 3px solid var(--dl-red);
  outline-offset: 3px;
}

/* 執行中／超過上限：停用。
   ⚠️ 不只變淡——cursor 也要換，而且旁邊的狀態列一定會有文字說明
      發生什麼事。只靠顏色變淡的話，色弱的使用者會以為按鈕壞了。 */
.sc-dlall .sc-dlall-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}


/* --- 4. 進度與錯誤 ---
   ⚠️ 這一塊平常是空的。:empty 讓它在沒有訊息時完全不佔高度，
      否則沒按按鈕的頁面會多出一條莫名其妙的空白（規格 C 案驗收）。 */
.sc-dlall .sc-dlall-status {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-left: 4px solid var(--dl-line);
  background: var(--dl-band);
  color: var(--dl-ink);
  font-size: 13.5px;
  line-height: 1.7;
  text-align: left;

  /* ⚠️ 這兩行是給長檔名用的（規格第十節）。會議附件的檔名常常是
     「01. 擬請學生議會同意任命秘書處秘書長，請審議案。.pdf」這種長度，
     不讓它斷行的話會在手機上把整頁撐寬。 */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.sc-dlall .sc-dlall-status:empty {
  display: none;
}

/* ⚠️⚠️ 執行中／完成／失敗**不只用顏色區分**（規格第十節）。
   下面三條各自在文字前面加一個符號，色弱或黑白列印一樣分得出來。
   ★ aria-hidden 不需要——::before 產生的內容多數螢幕閱讀器不會唸，
     而狀態文字本身（「正在整理 5／17：…」）已經把意思講完了。 */
.sc-dlall .sc-dlall-status.is-run::before  { content: '‧ '; font-weight: 800; }
.sc-dlall .sc-dlall-status.is-done::before { content: '✓ '; font-weight: 800; }
.sc-dlall .sc-dlall-status.is-error::before { content: '✕ '; font-weight: 800; }

.sc-dlall .sc-dlall-status.is-run {
  border-left-color: var(--dl-navy);
  color: var(--dl-sub);
}
.sc-dlall .sc-dlall-status.is-done {
  border-left-color: var(--dl-navy);
  color: var(--dl-ink);
}
.sc-dlall .sc-dlall-status.is-error {
  border-left-color: var(--dl-red);
  color: var(--dl-ink);
}


/* --- 5. 手機版 ---
   ⚠️ 斷點用 480px 而不是全站的 850px，是刻意的：這裡管的只有
      「按鈕要不要撐滿一整行」，跟版面欄數無關。用 850px 的話，
      平板上會出現一顆莫名其妙撐滿整個寬度的巨大按鈕。 */
@media (max-width: 480px) {
  .sc-dlall .sc-dlall-row {
    gap: 8px;
  }
  .sc-dlall .sc-dlall-btn {
    width: 100%;              /* 一行一顆，好按 */
  }
}


/* --- 6. 系統設定「減少動態效果」 ---
   規格第十節：遵守 prefers-reduced-motion，不加入必要性低的動畫。 */
@media (prefers-reduced-motion: reduce) {
  .sc-dlall .sc-dlall-btn {
    transition: none;
  }
  .sc-dlall .sc-dlall-btn:hover:not(:disabled) {
    transform: none;
  }
}
body.body-layout-kmdoc .app-media-xbox_doc .fs-block-body,
body.body-layout-kmdoc .app-media-xbox_doc .fs-block-body * {
  font-family: "Helvetica Neue", Arial,
               "fixed Microsoft JhengHei", "Microsoft JhengHei",
               sans-serif !important;
}