/* ============================================================
   certtrend.css — 台灣認證力觀測站 客製樣式（覆蓋層）
   ------------------------------------------------------------
   - 基底：style_d main.css（不修改）；本檔載入於 main.css / common.css 之後
   - Design tokens 依據 ~/Project/work/certtrend/DESIGN.md
   - 品牌色以 var() 引用：後台「網站色票」(site_color_settings) 輸出的
     :root 排在本檔之後，後台調色會覆蓋這裡的預設值
   - 規範：正文 17px / 1.65；圓角克制（6/10/14px）；預設不加卡片陰影
   - 字重只能用 400 / 500 / 700：front/common/css.php 只載入 Noto Sans TC 這三個
     字段，寫 600 會被瀏覽器對到 700，等於整站沒有中間層次（2026-08 全面改回 500）
   ============================================================ */

:root {
  /* --- 品牌色 ---
     直接接後台「樣式設定 > 全站配色」的欄位，客戶要換主色只要改那一個地方，
     整站的 ct- 元件（按鈕、標籤、色條、圖表註記…）就一起跟著換。
     以前是寫死色碼，後台改了主色只有頁首／頁尾／按鈕會動，ct- 元件還是紅的。
     四個欄位的現值與這裡的 fallback 完全相同，所以這次接線不改變任何現有畫面：
       觀測紅 ← 主色（--primary-color）
       典藏紅 ← 連結 hover 色（--link-hover-color）：本站拿它當最深色階
       訊號紅 ← 次色（--secondary-color）
       玫瑰洗色 ← 外框按鈕 hover 底色（--outline-button-bg-hover-color）
     後台沒設值時（新站、或該欄位留空）就用 fallback 的設計稿色碼。 */
  --ct-signal-red: var(--secondary-color, #E61514);      /* 訊號紅：焦點、通知、少量標記 */
  --ct-observatory-red: var(--primary-color, #9F111A);   /* 觀測紅：主按鈕、導覽 active、大色塊 */
  --ct-archive-red: var(--link-hover-color, #5B0B12);    /* 典藏紅：深色頁尾、hover、最深色階 */
  --ct-rose-wash: var(--outline-button-bg-hover-color, #F9E7E8); /* 玫瑰洗色：選中 chip 底、focus 外框 */

  /* --- 按鈕 ---
     接後台「樣式設定 > 按鈕樣式／外框按鈕樣式」那兩組欄位，欄位沒設值才退回品牌色。
     不直接用品牌色的理由：客戶在面板改了「按鈕底色」卻發現前台按鈕沒變，會回報成 bug。
     現值與品牌色相同，所以接線本身不改變任何畫面。
     分類色卡片上的按鈕仍以 --ct-card-accent 優先（見 .ct-btn--primary）。 */
  --ct-btn-bg: var(--button-bg-color, var(--ct-observatory-red));
  --ct-btn-fg: var(--button-text-color, var(--ct-surface));
  --ct-btn-bg-hover: var(--button-bg-hover-color, var(--ct-archive-red));
  --ct-btn-fg-hover: var(--button-text-hover-color, var(--ct-surface));
  --ct-btn-outline-border: var(--outline-button-border-color, var(--ct-observatory-red));
  --ct-btn-outline-fg: var(--outline-button-text-color, var(--ct-observatory-red));
  --ct-btn-outline-bg: var(--outline-button-bg-color, var(--ct-surface));
  --ct-btn-outline-border-hover: var(--outline-button-border-hover-color, var(--ct-archive-red));
  --ct-btn-outline-bg-hover: var(--outline-button-bg-hover-color, var(--ct-rose-wash));
  --ct-btn-outline-fg-hover: var(--outline-button-text-hover-color, var(--ct-archive-red));

  /* --- 中性色 --- */
  --ct-canvas: #F7F7F8;          /* 全站背景 */
  --ct-surface: #FFFFFF;         /* 表單、圖表、閱讀面 */
  --ct-ink: #252124;             /* 標題與正文 */
  --ct-muted-ink: #665F62;       /* 輔助說明 */
  --ct-divider: #DED7D9;         /* 規則線、表格、停用邊界 */

  /* --- 圖表系列色票（後台「樣式設定 > 圖表配色」可覆蓋） --- */
  --ct-chart-1: #9F111A;
  --ct-chart-2: #2F5F8F;
  --ct-chart-3: #3E7257;
  --ct-chart-4: #B8860B;
  --ct-chart-5: #665F62;

  /* --- 資料語意色（別名：藍＝全球/跨年度、綠＝排放；跟隨系列色票） --- */
  --ct-data-blue: var(--ct-chart-2);
  --ct-data-green: var(--ct-chart-3);

  /* --- 字級 --- */
  --ct-font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  /* 上限不用 DESIGN.md 的 5rem：套版讓 html 吃後台的 --base-font-size(17px)
     （main.css:19744），rem 因此不是 16px 基準，5rem 會跑到 85px。
     收到 3.75rem(≈64px)——那正是 1280px 視窗下 5vw 的值，也就是目前看順眼的大小，
     再寬的螢幕不再繼續長。 */
  /* 首頁大標＝範例站 csr.cw.com.tw/trips 的 h1 48px（窄螢幕才等比縮小） */
  --ct-fs-display: clamp(32px, 5vw, 48px);
  --ct-fs-headline: clamp(2rem, 3.5vw, 3.25rem);
  /* 對標客戶指定的範例站 csr.cw.com.tw/trips：h1 48px、區塊標題 32px、次級標題 24px。
     一律用 px 不用 rem——套版讓 html 吃後台的 --base-font-size(17px)，
     rem 會被放大約 6%（2rem 實際渲染成 34px），對不上範例站的級距。 */
  --ct-fs-title: 32px;
  --ct-fs-subtitle: 24px;
  /* 文章內的次標（摘要／分析亮點／發布單位）：比範例站的 h3 再低一階 */
  --ct-fs-blocktitle: 20px;
  /* 內頁 H1。DESIGN.md 只定義 headline(clamp 2rem→3.25rem) 與 title(1.5rem)：
     前者在 1440px 會長到約 50px、是首頁主視覺的份量，後者又跟卡片標題同級。
     取 headline 的下限 2rem 定成固定值，不隨視窗放大。 */
  /* 內頁大標（數據檢索／分析報告）退一階到 36px，48px 留給首頁大標 */
  --ct-fs-pagetitle: 36px;
  --ct-fs-body: 17px;
  --ct-fs-label: 0.875rem;

  /* --- 圓角 / 間距 --- */
  --ct-radius-sm: 6px;
  --ct-radius-md: 10px;
  --ct-radius-lg: 14px;
  --ct-space-xs: 4px;
  --ct-space-sm: 8px;
  --ct-space-md: 16px;
  --ct-space-lg: 24px;
  --ct-space-xl: 40px;
  /* 結果卡（表格／圖表）的內距。DESIGN.md 給的區間是 24–32px，
     這種整欄寬的資料卡取上限，內容才不會貼著框線 */
  --ct-space-card: 32px;
  --ct-space-section: clamp(72px, 9vw, 144px);

  /* --- 浮層陰影（僅限選單 / tooltip / dialog） --- */
  --ct-shadow-float: 0 6px 8px rgba(37, 33, 36, 0.12);

  /* 下拉選單的自繪箭頭：一般態與驗證失敗態共用同一張，別讓 bootstrap 的驚嘆號圖蓋掉 */
  --ct-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23665F62' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ============================================================
   main.css / common.css 寫死色碼補丁（2026-07-30，依變數化盤點報告第一批）
   ------------------------------------------------------------
   - 目的：讓後台「樣式設定」色票對這些元件生效；每條都帶原值 fallback，
     後台未調色前畫面不變（唯一例外：gotoID-btn hover 兩版統一，見該條註記）
   - 選擇器與 main.css 原樣相同（同 specificity、本檔較晚載入故勝出）
   ============================================================ */

/* 後台「頁首連結 hover 背景」原被寫死灰漸層蓋掉而無效，壓回變數 */
.naviMain ul > li > a:hover {
  background: var(--header-link-hover-bg-color, #f9f9f9);
}

/* 漢堡選單線條：旁邊的 .mobile-btn a 已用同變數，補齊 */
.hamburger .line {
  background-color: var(--header-mobile-icon-color, rgba(26, 24, 24, 0.9));
}

/* bg 已走 var(--primary-color) 但文字寫死白色的一批，補上按鈕文字變數 */
.course-block .add-cart-btn,
#share-btn,
footer #subscription-footer-btn,
.badge-outline-primary:hover,
.quantity-selector button:hover {
  color: var(--button-text-color, #fff);
}

/* 訂閱方案元件殘留套版金色（= style_d --secondary-color 預設值） */
label.plan-switch,
.plan-features .best-plan h6 {
  background: var(--secondary-color, #d69f35);
}

/* course / event 兩版 CTA 統一走按鈕色票；hover 統一混黑 10%
   （原 course 版 hover 為寫死淺紅、event 版為 primary 混黑，兩版本就不一致，
   此處統一後 course 版 hover 會從淺紅變深紅） */
.course-intro-footer .gotoID .gotoID-btn,
.event-footer .gotoID .gotoID-btn {
  background-color: var(--button-bg-color, #b93f23);
  color: var(--button-text-color, #fff);
}
.course-intro-footer .gotoID .gotoID-btn:hover,
.course-intro-footer .gotoID .gotoID-btn:active,
.event-footer .gotoID .gotoID-btn:hover,
.event-footer .gotoID .gotoID-btn:active {
  background-color: color-mix(in srgb, var(--button-bg-color, #b93f23), #000 10%);
}

/* 回頂鈕 hover 寫死 CSS 關鍵字 orange */
#gotop:hover {
  border-color: var(--secondary-color, orange);
  color: var(--secondary-color, orange);
}
#gotop:hover::after {
  color: var(--secondary-color, orange);
}

/* ============================================================
   全站基礎
   ============================================================ */

body {
  background-color: var(--ct-canvas);
  color: var(--ct-ink);
  font-family: var(--ct-font-family);
  line-height: 1.65;
}

/* ------------------------------------------------------------
   全站捲軸：細、淡（2026-08 客戶回饋——瀏覽器預設太粗太搶）。
   主捲軸與所有內捲容器一體適用；個別元件（如精選報告側欄的 4px）
   自己的更特定規則仍優先。
   ------------------------------------------------------------ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--ct-divider) transparent;
}
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
*::-webkit-scrollbar-track {
  background-color: transparent;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--ct-divider);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--ct-muted-ink);
}

/* ------------------------------------------------------------
   斷行：中文逐字換行，英數詞保持完整
   ------------------------------------------------------------
   兩層壞規則疊在一起，欄寬一窄就把 token 從中間剖開
   （「ISO 42001」→「IS / O 42001」、「ISO 27001」→「ISO 270 / 01」）：
     1. common.css:4 在 :root 下 word-break:break-all——全站共用檔，不動它，
        改在本覆蓋層對 certtrend 版型的容器擋掉繼承
     2. style_d/main.css:19793 對「所有 <a>」也下了 break-all，那是直接命中，
        祖先容器的覆蓋壓不過連結裡的文字（報告卡整張就是一個 <a>），
        所以下面單獨重設 a——同 specificity、本檔較晚載入故勝出
   word-break:normal 讓 CJK 維持逐字換行、英數詞不再被拆；
   真的塞不下的單一長字串（網址、檔名）由 overflow-wrap:anywhere 兜底，
   版面一樣不會被撐破。連字號後仍可換行（「ISO 14064-1」→「ISO 14064- / 1」），
   那是正常的西文排版，要連它都不斷得改用 keep-all，但那會讓中文整句不換行。
   不動 body/:root：套版自有的元件（購物車、課程頁）維持原行為。 */
a {
  word-break: normal;
  overflow-wrap: anywhere;
}

/* 容器層：靠繼承涵蓋內部所有標題與內文（非連結的文字節點） */
.ct-hero,
.ct-carousel,
.ct-features,
.ct-feature-card,
.ct-section,
.ct-crumb,
.ct-page-head,
.ct-member-page,
.ct-member-layout,
.ct-report-page,
.ct-report-detail,
.ct-report-grid,
.ct-report-card,
.ct-report-tabs,
.ct-report-searchnote,
.ct-report-empty,
.ct-report-highlight,
.ct-report-aside,
.ct-pager,
.ct-data-page,
.ct-data-cards,
.ct-query-panel,
.ct-filter,
.ct-picker,
.ct-result,
.ct-chart-card,
.ct-table-wrap,
.ct-panel,
.ct-profile,
.ct-workbench,
.ct-tabs,
.ct-accordion,
.ct-steps,
.ct-modal,
.ct-notes,
.ct-form,
.ct-alert,
.ct-confirm,
.ct-done,
.ct-auth,
.ct-contact,
.ct-userbox,
.ct-footer,
/* 全站搜尋結果頁沿用套版的 search-* 命名，但同屬本站版型（見檔案後段
   .search-type-report），一起納入 */
.search-results,
.search-empty,
.search-summary {
  word-break: normal;
  overflow-wrap: anywhere;
}

/* 套版 style_d/main.css:19200 對「所有 <section>」加了
   padding-top:2rem / padding-bottom:1.5rem。後台 --base-font-size 是 17px，
   換算成 34px / 25.5px，而且是無條件疊在我們自己的間距之上——
   等於 --ct-space-* 從來不是最終結果，滿版區塊（hero／輪播）也因此不滿版。
   本站的 section 一律歸零，垂直間距完全交還給各元件自己的規則。

   這份是「逐一列舉」版，管的是不在 ct 版面外殼底下的元件——
   首頁的 hero／輪播／特色區是由 page block 組出來的，外層 <main> 沒有 ct- class，
   吃不到下面那條通則，只能靠這份清單。
   ct-* 版面（<main class="ct-…">）底下的 section／aside 走本檔的
   「套版裸元素重設」通則，新元件不必再回來這裡補一行。 */
.ct-hero,
.ct-carousel,
.ct-features,
.ct-section,
.ct-query-panel,
.ct-result,
.ct-picker,
.ct-notes,
.ct-contact,
.ct-report-detail,
.ct-report-detail__block {
  padding-top: 0;
  padding-bottom: 0;
}

/* ============================================================
   頁首導覽
   ------------------------------------------------------------
   配色走後台色票（--header-*），此處只做結構：
   整列一行：左邊主選單（2px 底線標示，取代套版膠囊 hover），
   右邊依序放大鏡、註冊／登入、外部站按鈕、logo（客戶 v261005、v261008）
   ============================================================ */

/* style_d 的 .navbar 自身是置中容器（max-width 720/960/1140/1320 + margin auto）。
   本站要滿版白底頁首，故解掉 max-width，改由 nav 的左右內距接手內容欄置中；
   內距斷點與套版 .container 相同，頁首內容才會跟頁面內容對齊。 */
nav.navbar {
  max-width: none;
  width: 100%;
  background-color: var(--header-bg-color, var(--ct-surface));
  border-bottom: 1px solid var(--ct-divider);
  margin-bottom: 0;
}
/* 斷點與寬度階梯必須抄 .container，不是抄套版 .navbar：
   兩者不一樣——.container 是 576/768/992/1200/1400 → 540/720/960/1140/**1550**
   （最後一階本站覆寫成 1550 對齊領導力官網，見「版心寬度」段），
   套版 .navbar 卻在 1501px 才升到 1320（main.css:24065）。抄錯的話，
   1400〜1500px 的視窗裡頁面內容已經是 1320 寬、頁首還停在 1140，
   logo 會比麵包屑往內縮 75px。
   另外 .container 自己還有 15px 左右內距，內容實際起點是
   (100% - 欄寬)/2 + 15px，所以每一階都要補這 15px，頁首內容才真的對齊。
   最後一階在視窗不到 1520px 時算出來是負的（內距不吃負值、會變 0，頁首貼齊視窗邊），
   而 .container 此時是滿版加 15px 內距，所以用 max() 保底 15px。 */
nav.navbar {
  padding-inline: 15px;
}
@media all and (min-width: 576px) {
  nav.navbar { padding-inline: calc((100% - 540px) / 2 + 15px); }
}
@media all and (min-width: 768px) {
  nav.navbar { padding-inline: calc((100% - 720px) / 2 + 15px); }
}
@media all and (min-width: 992px) {
  nav.navbar { padding-inline: calc((100% - 960px) / 2 + 15px); }
}
@media all and (min-width: 1200px) {
  nav.navbar { padding-inline: calc((100% - 1140px) / 2 + 15px); }
}
@media all and (min-width: 1400px) {
  nav.navbar { padding-inline: max(15px, calc((100% - 1550px) / 2 + 15px)); }
}

/* 垂直節奏：頁首高度＝上下 14px + 列高 71.5px（＋1px 底線），不再留空白帶
   ------------------------------------------------------------
   套版 main.css:24044 對 .navbar 下了無條件的 padding-top: 56px，用來空出
   絕對定位的會員頂條（實際只有 45px 高）。本站的註冊／登入已搬進主選單同一列
   （客戶 v261008），不需要這段空白。
   列高 71.5px 是改版前 logo 的高度（220px 寬 × 原圖 1000:325）；logo 縮小後
   由主選單欄的 min-height 撐住，頁首總高沿用原值，首頁 hero 不必跟著改。
   ⚠ 上下內距或列高一改，--ct-header-h 就要重量（見「首頁 hero」段）。 */
nav.navbar {
  padding-block: 14px;
}

/* nav 內層的 .container 不再各自置中（否則與上面的內距重複置中） */
nav.navbar .navi-item > .container {
  max-width: none;
  width: 100%;
  padding-inline: 0;
}

/* 品牌區原為固定 160px，站名中文較長會被壓縮。
   width 必須一起重置：套版 main.css:21243 對所有 .navi-item 下了 width:100%，
   而 flex-basis:auto 會回頭吃 width，品牌區等於宣告成滿版、把主選單擠去換行。 */
nav.navbar > .navi-item:nth-child(2) {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  /* 客戶 v261005：logo 排到頁首最右側（DOM 不動，nth-child 系列規則才不會錯位）。
     套版已給主選單 order:2，這裡要比它大才排得到後面。 */
  order: 3;
  margin-left: var(--ct-space-lg);
  /* 套版鎖死 75px，改由 logo 圖本身決定 */
  height: auto;
}

/* 主選單那一欄撐起整列高度（見上方「垂直節奏」），選單、工具列、logo 都垂直置中。
   套版同樣鎖 height:75px（main.css:24107）。 */
nav.navbar > .navi-item.naviMain {
  height: auto;
  min-height: 71.5px;
  display: flex;
  align-items: center;
}

/* Logo：套版只給 .img-fluid（max-width:100%、無高度約束），原圖 1000x325 會把
   品牌區的 max-content 撐到 1000px；.navbar 是 flex-wrap:wrap，主選單就被擠到
   第二排。這裡明確給寬度，高度依比例自動。 */
nav.navbar .navbar-brand {
  flex: 0 0 auto;
  max-width: none;
  margin-right: 0;
  /* Bootstrap 的 .navbar-brand 有 0.3125rem 上下內距（此處 ≒5.3px），
     圖片模式下那只是把整列多墊 10.6px，列高改由 logo 圖自己決定 */
  padding-block: 0;
}
/* 只需管桌機：≤992px 時套版把整個 .navbar 設成 display:none !important
   （main.css:21447），手機頁首走的是另一個元素 .mobile-menu / .mobile-logo。 */
/* 客戶 v261008 要求調小（原 220px）：與右側工具列同一列，高度約 49px，比按鈕略高 */
nav.navbar .navbar-brand img {
  display: block;
  width: 150px;
  height: auto;
  max-width: 100%;
}

/* 第一個 navi-item 是套版的會員頂條位置，本站會員區已搬進主選單（見 menu_pc.php），只剩空殼 */
nav.navbar > .navi-item:first-child:not(:has(ul)) {
  display: none;
}

/* 套版 main.css:21277 給 .member-item 設了 overflow:hidden（float 清除用），
   會把登入後 .ct-userbox 的下拉選單整個裁掉——看起來像「展開沒內容」。
   本站會員區改過版型不靠它清 float，放行讓下拉能長出容器外。 */
.member-item {
  overflow: visible;
}

/* 會員區巢狀在主選單的 ul 裡（客戶 v261008），套版與本檔給主選單的
   .naviMain ul、.naviMain ul > li > a 會一路套到它和登入後的下拉選單上，以下逐項還原。 */
.naviMain ul.member-item {
  width: auto;
  margin: 0;
  padding: 0;
  gap: 0;
  flex-wrap: nowrap;
}

/* 註冊／登入：工具列字級，高 32px 與旁邊的外部站按鈕、登入後的 .ct-userbox__trigger 相同，
   兩種狀態下整列不會跳動。hover 只變色，不畫主選單的底線。 */
.naviMain .member-item > li > a {
  height: 32px;
  line-height: 32px;
  padding: 0 10px;
  font-size: var(--ct-fs-label);
  font-weight: 400;
  color: var(--ct-muted-ink);
}
.naviMain .member-item > li > a::before {
  display: none;
}
.naviMain .member-item > li > a:hover,
.naviMain .member-item > li > a:focus {
  background: none;
  color: var(--header-link-hover-color, var(--ct-observatory-red));
}

/* 登入後的下拉：.naviMain ul 會把它撐成滿寬、項目置中、上下 1rem 內距 */
.naviMain ul.ct-userbox__menu {
  width: auto;
  margin: 0;
  padding: 4px 0;
  gap: 0;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
}
.naviMain .ct-userbox__menu > li > a {
  height: auto;
  line-height: 1.6;
  text-align: left;
}
.naviMain .ct-userbox__menu > li > a::before {
  display: none;
}
/* 兩個連結之間一道短分隔線（規格投影片 4 的「註冊 / 登入」）。
   li 是 inline-block、內層 a 是 block，行內偽元素會被擠成獨立一行，
   所以走絕對定位。 */
.member-item > li + li {
  position: relative;
}
.member-item > li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 12px;
  transform: translateY(-50%);
  background-color: var(--ct-divider);
}

/* 站名：置左，取代套版的置中大標 */
.web-title {
  flex: 0 0 auto;
  max-width: none;
  margin-bottom: 0;
  text-align: left;
  font-size: 1.35rem;
  font-weight: 700;
}
.web-title > a {
  color: var(--ct-observatory-red);
  font-family: var(--ct-font-family);
  letter-spacing: normal;
}
.web-title > a::after {
  display: none; /* 套版的裝飾底線不用 */
}
.navi-item .container {
  justify-content: flex-start;
}

/* 主選單：靠左緊湊排列，不再 space-between 撐滿整列 */
.naviMain ul {
  justify-content: flex-start;
  gap: var(--ct-space-lg);
  padding: 0;
}
.naviMain ul > li > a {
  margin: 0;
  padding: 0 var(--ct-space-sm);
  border-radius: 0;
  font-size: 1rem;
  font-weight: 500;
}
/* 選單的英數原本會掉到瀏覽器預設的 serif（中文仍是黑體），於是「ISO 管理學院」
   在選單裡是襯線體、跟站上其他地方對不起來。桌機版連結文字包在 <span> 裡、
   套版另有 data-title 偽元素，所以三個位置都要指定，只設在 <a> 上蓋不到。 */
.naviMain ul > li > a,
.naviMain ul > li > a span,
.naviMain ul > li > a::after,
.naviMain .dropdown-item,
.naviMain .dropdown-item span {
  font-family: var(--ct-font-family);
}

/* hover / 作用中：2px 觀測紅底線（取代套版膠囊底色） */
.naviMain ul > li > a::before {
  content: "";
  position: absolute;
  left: var(--ct-space-sm);
  right: var(--ct-space-sm);
  bottom: 0;
  height: 2px;
  background-color: var(--header-link-hover-color, var(--ct-observatory-red));
  transform: scaleX(0);
  transition: transform 0.15s ease-out;
}
.naviMain ul > li > a:hover::before,
.naviMain ul > li.active > a::before {
  transform: scaleX(1);
}

/* 外部站連結（領導力企管 / ISO 管理學院）做成實心觀測紅按鈕
   ——規格投影片 4 就是這個樣子，也讓「離開本站」跟站內選單一眼分得開。
   靠 target="_blank" 辨識——後台把選單設為「另開新視窗」即歸此類。 */
.naviMain ul > li > a[target="_blank"] {
  height: 32px;
  line-height: 32px;
  padding: 0 var(--ct-space-md);
  border-radius: var(--ct-radius-sm);
  background-color: var(--ct-observatory-red);
  color: var(--ct-surface);
  font-size: var(--ct-fs-label);
  font-weight: 500;
  transition: background-color 0.15s ease-out;
}
.naviMain ul > li > a[target="_blank"]:hover,
.naviMain ul > li > a[target="_blank"]:focus {
  background-color: var(--ct-archive-red);
  color: var(--ct-surface);
}
/* 按鈕自己就是作用區，不再疊底線 */
.naviMain ul > li > a[target="_blank"]::before {
  display: none;
}
/* 右側工具列（客戶 v261008）：放大鏡 → 註冊／登入 → 外部站按鈕，logo 接在最後（另一個 navi-item）。
   外部站按鈕來自後台選單、DOM 排在放大鏡之前，用 order 排到後面；
   放大鏡是右側第一項，由它撐開把整組推到最右。
   組內收窄（放大鏡與會員區 4px、會員區與按鈕 16px、兩顆按鈕 8px），比主選單的 24px 緊，
   讀起來才是右側的一個群組，而不是主選單延伸出來的項目。 */
.naviMain ul > li.nav-search-toggle {
  order: 1;
  margin-left: auto;
}
.naviMain ul > li.ct-nav-member {
  order: 2;
  margin-left: calc(var(--ct-space-xs) - var(--ct-space-lg));
}
.naviMain ul > li:has(> a[target="_blank"]) {
  order: 3;
  margin-left: calc(var(--ct-space-md) - var(--ct-space-lg));
}
.naviMain ul > li:has(> a[target="_blank"]) ~ li:has(> a[target="_blank"]) {
  margin-left: calc(var(--ct-space-sm) - var(--ct-space-lg));
}

/* 993～1199px 版心只有 930px，照上面的間距整列約 1010px（登入後顯示姓名更寬），會擠成兩排。
   這段寬度收緊間距與內距、logo 縮成 120px，整列約 860～910px；列高不變。 */
@media (min-width: 993px) and (max-width: 1199.98px) {
  .naviMain ul {
    gap: 12px;
  }
  .naviMain ul > li > a {
    padding: 0 var(--ct-space-xs);
  }
  .naviMain ul > li > a::before {
    left: var(--ct-space-xs);
    right: var(--ct-space-xs);
  }
  .naviMain ul > li > a[target="_blank"] {
    padding: 0 10px;
  }
  .naviMain .member-item > li > a {
    padding: 0 6px;
  }
  .naviMain ul > li.ct-nav-member {
    margin-left: calc(var(--ct-space-xs) - 12px);
  }
  .naviMain ul > li:has(> a[target="_blank"]) {
    margin-left: 0;
  }
  .naviMain ul > li:has(> a[target="_blank"]) ~ li:has(> a[target="_blank"]) {
    margin-left: calc(var(--ct-space-sm) - 12px);
  }
  nav.navbar > .navi-item:nth-child(2) {
    margin-left: 12px;
  }
  nav.navbar .navbar-brand img {
    width: 120px;
  }
}

/* 下拉選單：平面白底，不用陰影堆疊感 */
.naviMain .dropdown-menu {
  border: 1px solid var(--ct-divider);
  border-radius: var(--ct-radius-sm);
  box-shadow: var(--ct-shadow-float);
  padding: var(--ct-space-sm) 0;
}
.naviMain .dropdown-item {
  padding: var(--ct-space-sm) var(--ct-space-md);
  font-size: 0.95rem;
  color: var(--ct-ink);
}
.naviMain .dropdown-item:hover,
.naviMain .dropdown-item:focus {
  background-color: var(--ct-rose-wash);
  color: var(--ct-observatory-red);
}

/* 桌機下拉改為 hover 觸發（規格 §3.1／投影片 4：「鼠標指到…會顯示下拉選單」）。
   套版是 Bootstrap 4 的 data-toggle="dropdown"＝點擊開合，這裡以 CSS 補上 hover，
   點擊行為保留不動；:focus-within 讓鍵盤 Tab 也能展開。
   ≤992px 走漢堡選單，不套用。 */
@media (min-width: 993px) {
  .naviMain .dropdown:hover > .dropdown-menu,
  .naviMain .dropdown:focus-within > .dropdown-menu {
    display: block;
  }
  /* 貼齊觸發項，中間不留空隙，否則鼠標移往選單途中會斷開 */
  .naviMain .dropdown > .dropdown-menu {
    margin-top: 0;
  }
  /* 鼠標移入下拉選單後，主選單標題維持紅字＋底線 */
  .naviMain ul > li.dropdown:hover > a {
    color: var(--header-link-hover-color, var(--ct-observatory-red));
  }
  .naviMain ul > li.dropdown:hover > a::before,
  .naviMain ul > li.dropdown:focus-within > a::before {
    transform: scaleX(1);
  }
}

/* ============================================================
   頁尾
   ------------------------------------------------------------
   內容由後台「自訂頁尾」的 HTML 提供（.ct-footer 結構）；
   底色／文字色走後台色票（--footer-*）
   ============================================================ */

footer {
  background-color: var(--footer-bg-color, var(--ct-archive-red));
  color: var(--footer-text-color, var(--ct-rose-wash));
  padding-top: var(--ct-space-xl);
}

/* 三欄：公司資訊／相關連結／關於我們（投影片 35）。
   欄寬不等分——左欄要放三個據點的地址，右欄是一段簡介，中欄只有六個連結。 */
.ct-footer {
  padding-bottom: var(--ct-space-lg);
}
.ct-footer__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: var(--ct-space-xl);
}
@media all and (max-width: 992px) {
  .ct-footer__cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .ct-footer__col--about {
    grid-column: 1 / -1;
  }
}
@media all and (max-width: 600px) {
  .ct-footer__cols {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ct-space-lg);
  }
}
.ct-footer__title {
  margin: 0 0 var(--ct-space-md);
  font-size: var(--ct-fs-label);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--footer-text-color, var(--ct-rose-wash));
  opacity: 0.75;
}

/* --- 左欄：公司資訊 --- */
.ct-footer__brand {
  margin: 0 0 var(--ct-space-md);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ct-signal-red);
}
.ct-footer__contact,
.ct-footer__offices {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ct-footer__contact li {
  margin-bottom: var(--ct-space-sm);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--footer-text-color, var(--ct-rose-wash));
}
.ct-footer__contact i {
  width: 1.25em;
  margin-right: var(--ct-space-sm);
  opacity: 0.75;
}
.ct-footer__legal {
  margin: var(--ct-space-md) 0 var(--ct-space-lg);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--footer-text-color, var(--ct-rose-wash));
}
.ct-footer__offices li {
  margin-bottom: var(--ct-space-md);
  font-size: 0.9rem;
  line-height: 1.7;
}
.ct-footer__office-name {
  margin-right: var(--ct-space-sm);
  font-weight: 500;
  color: var(--footer-text-color, var(--ct-rose-wash));
}
.ct-footer__office-addr {
  display: block;
}

/* --- 右欄：關於我們 --- */
.ct-footer__about {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.9;
  color: var(--footer-text-color, var(--ct-rose-wash));
  opacity: 0.85;
}

/* --- 中欄：相關連結（改直式，配合三欄版型） --- */
.ct-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--ct-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* hover 不用底線：地址是整行的連結，底線會拉出很長一條、比文字還搶眼。
   頁尾的字與連結都是白色，改變顏色看不出來，所以用透明度做狀態差異：
   平時 0.8、hover 回到 1。 */
.ct-footer__links a,
.ct-footer__contact a,
.ct-footer__offices a {
  color: var(--footer-link-color, var(--ct-rose-wash));
  font-size: inherit;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.15s ease-out;
}
.ct-footer__links a {
  display: inline-block;
  font-size: 0.95rem;
}
.ct-footer__links a:hover,
.ct-footer__links a:focus-visible,
.ct-footer__contact a:hover,
.ct-footer__contact a:focus-visible,
.ct-footer__offices a:hover,
.ct-footer__offices a:focus-visible {
  color: var(--footer-link-hover-color, #fff);
  opacity: 1;
}
/* 全站的焦點外框是觀測紅，壓在 #333333 的頁尾上對比不足；
   拿掉底線之後鍵盤使用者只剩這個提示，頁尾內改用白框。 */
.ct-footer a:focus-visible {
  outline-color: #FFFFFF;
}

/* 版權列：與頁尾主體同一個灰底，只用細線分隔，不另外壓深
   （客戶官網是 #000000 更深一階，本站改為統一灰底） */
footer .copyright {
  background-color: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: var(--ct-space-md) 0;
}

/* 懸浮球：設計只要求「回到頁首」，分享鈕不在需求內
   （側邊社群鍵需後台填 fb/ig/line/youtube 連結才會出現，目前留空） */
.fixed-bottom-contant #share-btn {
  display: none;
}

/* 位置：規格 §3.2／投影片 35 要求「右下角，不隨捲動改變位置」。
   套版桌機是右側垂直置中（main.css `top: calc(50% - 4rem)`），只有 ≤768px 才落到右下，
   這裡把桌機也改成右下角；position: fixed 由套版提供，維持不隨捲動移動。 */
@media all and (min-width: 769px) {
  .fixed-bottom-contant {
    top: auto;
    bottom: var(--ct-space-xl);
    right: var(--ct-space-lg);
  }
}

/* ============================================================
   首頁 hero（ct_hero 區塊）
   ------------------------------------------------------------
   規格：紅底區塊佔滿頁首以下整個視窗，可向下捲動
   頁首高度用 --ct-header-h 估算
   ============================================================ */

:root {
  /* 桌機頁首實測高度 = 上下內距 14px×2 + logo 圖 71.5px（220px 寬 × 原圖
     1000:325）+ 底線 1px。原本 76px 是「純文字站名」時代的值；換成圖片 logo 後
     一度是 132px，那裡面有 56px 是套版留給會員頂條的空白帶，已經拿掉。
     ⚠ 這個值跟 .navbar-brand img 的 width 及 nav.navbar 的 padding-block 綁在
     一起——任一項再調整，都要重新量 nav.navbar 的高度並同步這裡，
     否則 hero 不會剛好滿一個視窗。
     ≤992px 走的是 --ct-mobile-header-h（見檔案後段的 hero 例外規則）。 */
  --ct-header-h: 100.5px;
}

.ct-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--ct-header-h));
  padding: var(--ct-space-section) var(--ct-space-md);
  background-color: var(--ct-observatory-red);
  color: var(--ct-surface);
  text-align: center;
}
.ct-hero__inner {
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
}
.ct-hero__heading {
  /* letter-spacing 會在最後一個字後面也加一格，置中時整行會左偏，
     用等量的負右邊界補回來 */
  margin: 0 -0.08em var(--ct-space-lg) 0;
  /* hero 佔滿一整個視窗高，用內文級距的 48px 大標撐不起來，整面紅底看起來很空
     （客戶 v260901 投影片 1）。這一頁的大標獨立放大到 72px 上限，不動全站的
     --ct-fs-display（其他頁的 h1 在版心裡，跟著它走會過大）。 */
  font-size: clamp(36px, 6.2vw, 72px);
  font-weight: 700;
  line-height: 1.12;
  /* 中文大標要放字距才透氣；原本的 -0.025em 是西文大標的收緊慣例，
     套在中文上只會把字擠成一團 */
  letter-spacing: 0.08em;
  color: var(--ct-surface);
}
.ct-hero__subheading {
  margin: 0 auto var(--ct-space-xl);
  font-size: clamp(1.15rem, 1.6vw, 1.375rem);
  line-height: 1.65;
  color: var(--ct-rose-wash);
}
.ct-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ct-space-lg);
  justify-content: center;
}
/* 兩顆入口鈕是這一頁唯一的動作，比照放大（客戶 v260901 投影片 1）。
   min-width 讓「依公司查詢」「依產業查詢」等寬，兩顆才不會一長一短。 */
.ct-hero__actions .ct-btn {
  height: 60px;
  min-width: 12.5rem;
  padding: 0 var(--ct-space-xl);
  font-size: 1.125rem;
}

/* 紅底上的按鈕：主為白底紅字、次為白框白字 */
.ct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 var(--ct-space-lg);
  border-radius: var(--ct-radius-sm);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.15s ease-out, color 0.15s ease-out;
}
.ct-btn--onred {
  background-color: var(--ct-surface);
  color: var(--ct-observatory-red);
}
.ct-btn--onred:hover,
.ct-btn--onred:focus {
  background-color: var(--ct-rose-wash);
  color: var(--ct-archive-red);
}
.ct-btn--onred-outline {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--ct-surface);
}
.ct-btn--onred-outline:hover,
.ct-btn--onred-outline:focus {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--ct-surface);
  color: var(--ct-surface);
}

@media all and (max-width: 768px) {
  .ct-hero {
    min-height: calc(100svh - var(--ct-header-h));
    padding: var(--ct-space-xl) var(--ct-space-md);
  }
  .ct-hero__actions .ct-btn {
    width: 100%;
    height: 52px;
    min-width: 0;
    font-size: 1.0625rem;
  }
}

/* ============================================================
   首頁功能卡與網頁介紹（ct_feature_cards 區塊）
   ============================================================ */

/* 區塊內距：--ct-space-section 在 1440px 會展開成 129.6px，上下加起來 259px，
   比卡片本身還高。這裡用 --ct-space-xl 起跳的較克制級距。 */
.ct-features {
  padding: clamp(48px, 5vw, 80px) 0;
}
.ct-features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ct-space-xl);
}
@media all and (max-width: 992px) {
  .ct-features__grid {
    grid-template-columns: 1fr;
    gap: var(--ct-space-lg);
  }
}

.ct-feature-card {
  display: block;
  color: inherit;
  text-decoration: none;
}
a.ct-feature-card:hover .ct-feature-card__text,
a.ct-feature-card:focus .ct-feature-card__text {
  color: var(--ct-observatory-red);
}
.ct-feature-card__media {
  aspect-ratio: 16 / 10;
  margin-bottom: var(--ct-space-md);
  background-color: var(--ct-surface);
  border: 1px solid var(--ct-divider);
  border-radius: var(--ct-radius-md);
  overflow: hidden;
}
.ct-feature-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 示意圖來源設成「即時圖表」時，同一個框改裝 canvas。
   截圖是滿版裁切（object-fit: cover），圖表則要留內距，
   不然刻度數字會貼在框線上。 */
.ct-feature-card__media--chart {
  position: relative;
  padding: 10px 12px;
  background-color: var(--ct-surface);
}
.ct-feature-card__chart {
  display: block;
  width: 100%;
  height: 100%;
}
/* 卡片標題（投影片 5：圖＋標題＋說明）。
   不用 --ct-fs-title(1.5rem≒25.5px)——那是「數據檢索」入口卡 .ct-data-card__title
   的級距，那邊標題在卡框內、下面還有兩段文字加 CTA，撐得住；首頁這裡只有
   圖＋標題＋一句話又沒有卡框，同級距會頭重。收到 1.25rem(≒21px)，
   與 17px 的說明文字仍差一階半。 */
.ct-feature-card__title {
  margin: 0 0 var(--ct-space-sm);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ct-ink);
  text-align: center;
}
.ct-feature-card__text {
  margin: 0;
  font-size: var(--ct-fs-body);
  line-height: 1.65;
  color: var(--ct-ink);
}

/* 介紹段落與功能卡同屬一個區塊，不需要再吃一次「區塊級」間距——
   原本 .ct-features 的內距與這裡的上邊距都是 --ct-space-section，疊成兩倍留白。
   分隔線拉滿內容欄寬（與上方三張卡等寬），文字欄則另外收窄置中，
   讓這段從「黏在卡片下面的一團字」變成獨立的收尾段落。 */
.ct-features__intro {
  margin-top: clamp(40px, 4vw, 64px);
  padding-top: clamp(32px, 3vw, 48px);
  border-top: 1px solid var(--ct-divider);
  text-align: center;
}
/* 只有這段收行寬（客戶指名）：這裡是連續三段的長文，版心在 1400px 以上是 1320px，
   17px 內文一行會到 70 幾個中文字，讀起來會掉行。固定收在 960px ≒ 一行 56 字。
   標題一起收，共用同一條界線。
   注意：站上其他內文仍然不設 max-width，別把這裡當通則往外套。 */
.ct-features__intro-title,
.ct-features__intro-text {
  max-width: 960px;
  margin-inline: auto;
}
.ct-features__intro-title {
  margin-block: 0 var(--ct-space-lg);
  /* 區塊標題走 pagetitle(2rem)，不是 headline：headline 在 1280px 會長到
     44.8px，快追上 hero 的 64px，兩個標題互相打架。 */
  font-size: var(--ct-fs-pagetitle);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ct-ink);
}
.ct-features__intro-text {
  font-size: var(--ct-fs-body);
  line-height: 1.75;
  color: var(--ct-muted-ink);
  text-align: left;
}
.ct-features__intro-text p {
  margin: 0 0 var(--ct-space-md);
}
.ct-features__intro-text p:last-child {
  margin-bottom: 0;
}
/* 第一段是總述，當導言處理：三段一律同級距（客戶指名，不要放大），
   只用深一階的字色與大一點的段距把它和後面的細節段落分開。 */
.ct-features__intro-text p:first-child {
  margin-bottom: var(--ct-space-lg);
  color: var(--ct-ink);
}

/* ============================================================
   圖表工作區（數據檢索各查詢頁共用）
   ============================================================ */

.ct-chart-card {
  background-color: var(--ct-surface);
  border: 1px solid var(--ct-divider);
  border-radius: var(--ct-radius-md);
  padding: var(--ct-space-card);
  margin-bottom: var(--ct-space-xl);
}
/* 卡片頭：標題在左、工具（中位數／平均數切換之類）在右。
   不畫底線——那條線離圖表最上面那條格線只有二十幾 px，讀起來像多一條軸線；
   表格那張卡也本來就有自己的表頭線。標題與內容靠 24px 間距分隔就夠。 */
.ct-chart-card__head {
  display: flex;
  /* 不換行：工具讓標題擠、標題自己折行留在左邊。讓工具掉到第二行的話，
     有工具的那張卡標題列就比隔壁高一整行，兩張要拿來對照的圖從此對不齊。 */
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ct-space-md);
  margin-bottom: var(--ct-space-lg);
}
.ct-chart-card__head > h3 {
  flex: 1 1 auto;
  min-width: 0;
}
.ct-chart-card__head > .ct-chart-card__tools {
  flex: 0 0 auto;
}
/* 窄幅結果區本來就疊成單欄，沒有對齊問題，讓工具掉下一行反而好讀 */
@media all and (max-width: 992px) {
  .ct-chart-card__head {
    flex-wrap: wrap;
  }
}
/* 標題已在頁首那一層時，卡片頭只剩工具列，靠右即可 */
.ct-chart-card__head--toolsonly {
  justify-content: flex-end;
  margin-bottom: var(--ct-space-md);
}
.ct-chart-card__head h3 {
  margin: 0;
  /* 圖表標題是「○○業前 5 大標準合規率（2024 年）」這種動態句子，
     跟 .ct-panel__title 同理，用次標級距才不會在半欄裡折行 */
  font-size: var(--ct-fs-blocktitle);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ct-ink);
}

/* 圖表容器：Chart.js 需要固定高度的父層（maintainAspectRatio: false） */
.ct-chart-canvas {
  position: relative;
  height: 380px;
}
/* canvas 的 width 屬性會變成它的 min-content 寬度，窄螢幕下會把外層格線軌道
   一起撐開。Chart.js 是用 inline style 控制實際尺寸，這條只是封住內在寬度。 */
.ct-chart-canvas > canvas {
  max-width: 100%;
}
/* 沒資料時頂在圖表原本的位置，撐一樣的高度——欄寬與版面高度都不變，
   使用者換條件查詢時畫面不會忽高忽低 */
.ct-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 380px;
  margin: 0;
  color: var(--ct-muted-ink);
}
@media all and (max-width: 768px) {
  .ct-chart-empty {
    height: 300px;
  }
}
@media all and (max-width: 768px) {
  .ct-chart-canvas {
    height: 300px;
  }
  /* 375px 下 32px 內距等於左右各吃掉一成版面，圖表本身只剩 249px。
     收到 16px，圖表與註記都多拿到 32px。（.ct-panel 的同款規則不能寫在這裡，
     它的基礎宣告排在本檔更後面，同權重會蓋回來——放在它自己那節之後。） */
  .ct-chart-card {
    padding: var(--ct-space-md);
  }
}

/* 卡片腳：註記在左、「圖表下載」在右（投影片 17、24、25、29、31、32 都把
   下載鈕放在圖表下方靠右）。兩者同列是為了收掉「鈕自己佔一列、註記再佔一列」
   造成的空行，也讓並排兩張卡的底緣落在同一條線上。 */
.ct-chart-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ct-space-md);
  margin-top: var(--ct-space-md);
}
/* 註記欄：吃掉剩餘寬度，窄到放不下就自己換行到鈕上方 */
.ct-chart-card__notes {
  flex: 1 1 260px;
  min-width: 0;
}
.ct-chart-card__notes > .ct-chart-note:first-child {
  margin-top: 0;
}
/* 沒有註記時鈕仍靠右 */
.ct-chart-card__foot > .ct-btn-download {
  flex: 0 0 auto;
  margin-left: auto;
}

/* 手機：註記換行後鈕自己一列，右靠會在左邊留一大條空白（而且註記結尾與鈕
   分處兩端，視線要跳）。改成滿版置中——讀完註記往下就是鈕，點擊區也大得多。 */
@media all and (max-width: 768px) {
  .ct-chart-card__foot > .ct-btn-download {
    flex: 1 1 100%;
    width: 100%;
    margin-left: 0;
  }
}

/* 圖表下載鈕 */
.ct-btn-download {
  height: 40px;
  padding: 0 var(--ct-space-md);
  /* 外框按鈕：走後台「外框按鈕樣式」那組欄位 */
  border: 1px solid var(--ct-btn-outline-border);
  border-radius: var(--ct-radius-sm);
  background-color: var(--ct-btn-outline-bg);
  color: var(--ct-btn-outline-fg);
  font-size: var(--ct-fs-label);
  font-weight: 500;
  cursor: pointer;
}
.ct-btn-download:hover {
  background-color: var(--ct-btn-outline-bg-hover);
  border-color: var(--ct-btn-outline-border-hover);
  color: var(--ct-btn-outline-fg-hover);
}

/* 圖表下方的資料來源／說明註記。同 .ct-notes__list li 的懸掛縮排 */
.ct-chart-note {
  margin: var(--ct-space-sm) 0 0;
  padding-left: 1.6em;
  text-indent: -1.6em;
  font-size: var(--ct-fs-label);
  line-height: 1.6;
  color: var(--ct-muted-ink);
}

/* ============================================================
   分析報告（/report 清單頁、/report/{id} 介紹頁）
   ------------------------------------------------------------
   規格：docs/website_spec.md §4.2、§4.3
   分類三色：指數報告＝紅、產業分析專書＝藍、期刊報告＝綠；
   標籤 hover 底線色與該分類報告卡主題色一致，「全選」＝黑。

   視覺語彙依 DESIGN.md「資料觀測室」：扁平、規則線與留白構成，
   圓角克制、陰影只回應互動；無主視覺時以方格紙底＋分類字標補位，
   不放促銷式色塊。
   ============================================================ */

:root {
  /* 分類主題色（後台色票未涵蓋，故獨立變數＋fallback） */
  --ct-report-red: var(--ct-observatory-red, #9F111A);
  --ct-report-blue: var(--ct-data-blue, #2F5F8F);
  --ct-report-green: var(--ct-data-green, #3E7257);
  /* 分類改成後台可新增（§10.1）後，色票要備得比現行三個分類多。
     色票之外還可以在後台自訂色碼（2026-08-25 客戶要求）：那種分類會多帶一個
     inline 的 --ct-cat-color，走下面的 --custom 規則，class 名塞不進 #RRGGBB。 */
  --ct-report-amber: #8A5A12;
  --ct-report-purple: #5A3A7A;
  --ct-report-teal: #1F6B72;
  --ct-report-all: var(--ct-ink, #252124);
}

.ct-report-page {
  padding: var(--ct-space-xl) 0 var(--ct-space-section);
}

/* 卡片／封面共用的分類主題色錨點，預設紅，由 --red/--blue/--green 覆寫 */
.ct-report-card,
.ct-report-detail,
.ct-report-aside__item {
  --ct-card-accent: var(--ct-report-red);
  --ct-card-accent-hover: var(--ct-archive-red);
}
.ct-report-card--red,
.ct-report-detail--red,
.ct-report-aside__item--red {
  --ct-card-accent: var(--ct-report-red);
  /* 紅系 hover 走 DESIGN.md 指定的典藏紅，不用算色 */
  --ct-card-accent-hover: var(--ct-archive-red);
}
.ct-report-card--blue,
.ct-report-detail--blue,
.ct-report-aside__item--blue {
  --ct-card-accent: var(--ct-report-blue);
  --ct-card-accent-hover: color-mix(in srgb, var(--ct-report-blue), #000 22%);
}
.ct-report-card--green,
.ct-report-detail--green,
.ct-report-aside__item--green {
  --ct-card-accent: var(--ct-report-green);
  --ct-card-accent-hover: color-mix(in srgb, var(--ct-report-green), #000 22%);
}
.ct-report-card--amber,
.ct-report-detail--amber,
.ct-report-aside__item--amber {
  --ct-card-accent: var(--ct-report-amber);
  --ct-card-accent-hover: color-mix(in srgb, var(--ct-report-amber), #000 22%);
}
.ct-report-card--purple,
.ct-report-detail--purple,
.ct-report-aside__item--purple {
  --ct-card-accent: var(--ct-report-purple);
  --ct-card-accent-hover: color-mix(in srgb, var(--ct-report-purple), #000 22%);
}
.ct-report-card--teal,
.ct-report-detail--teal,
.ct-report-aside__item--teal {
  --ct-card-accent: var(--ct-report-teal);
  --ct-card-accent-hover: color-mix(in srgb, var(--ct-report-teal), #000 22%);
}
/* 自訂色：色值由該元素的 inline --ct-cat-color 帶進來（後台填的色碼）。
   萬一沒帶到（舊資料、色碼被清掉）就退回觀測紅，不要變成沒有顏色的元件。 */
.ct-report-card--custom,
.ct-report-detail--custom,
.ct-report-aside__item--custom {
  --ct-card-accent: var(--ct-cat-color, var(--ct-report-red));
  --ct-card-accent-hover: color-mix(in srgb, var(--ct-cat-color, var(--ct-report-red)), #000 22%);
}

/* ============================================================
   套版模組（最新消息／部落格／空白頁）的頁首與清單
   ------------------------------------------------------------
   這幾支頁面走的是套版版型，但頁首已改用 .ct-page-head、麵包屑改用 .ct-crumb，
   清單這裡再收一次字級與分隔線，客戶哪天開了這些模組才不會像另一個站。
   ============================================================ */

.news-list {
  margin: 0;
  padding: 0;
}
.news-list li {
  padding: 0;
  border-bottom: 1px solid var(--ct-divider);
}
.news-list li a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ct-space-md);
  padding: var(--ct-space-md) 0;
  color: var(--ct-ink);
  text-decoration: none;
}
.news-list li a:hover,
.news-list li a:focus-visible {
  color: var(--ct-observatory-red);
}
/* 日期欄固定寬度，多筆並排時右側標題才會對齊 */
.news-list li a > span {
  flex: 0 0 auto;
  padding-right: 0;
  min-width: 6.5em;
  color: var(--ct-muted-ink);
  font-size: var(--ct-fs-label);
}

/* ============================================================
   頁面標題列＋搜尋
   ============================================================ */

.ct-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ct-space-lg);
  padding-bottom: var(--ct-space-lg);
  margin-bottom: 0;
}
.ct-page-head__text {
  flex: 1 1 320px;
  min-width: 0;
}
/* 標題上方的細紅標記線，取代裝飾性色塊 */
.ct-page-head__kicker {
  display: flex;
  align-items: center;
  gap: var(--ct-space-sm);
  margin: 0 0 var(--ct-space-sm);
  font-size: var(--ct-fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  /* 套版模組（部落格／最新消息）的眉標取自後台選單的英文標題，大小寫由客戶自由填，
     這裡統一成大寫，才不會跟客製頁的 DATA／REPORT 混在一起看 */
  text-transform: uppercase;
  color: var(--ct-observatory-red);
}
.ct-page-head__kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  background-color: currentColor;
}
.ct-page-head__title {
  margin: 0;
  font-size: var(--ct-fs-pagetitle);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--ct-ink);
}
.ct-page-head__desc {
  /* 不另外設行寬：跟著版心（有搜尋框時跟著左欄）走，句子才不會在半路斷 */
  margin: var(--ct-space-sm) 0 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ct-muted-ink);
}

.ct-search {
  display: flex;
  align-items: stretch;
  flex: 0 1 360px;
  width: min(360px, 100%);
  background-color: var(--ct-surface);
  border: 1px solid var(--ct-divider);
  border-radius: var(--ct-radius-sm);
  overflow: hidden;
  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.ct-search:hover {
  border-color: var(--ct-muted-ink);
}
.ct-search:focus-within {
  border-color: var(--ct-observatory-red);
  box-shadow: 0 0 0 3px var(--ct-rose-wash);
}
.ct-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 50px;
  padding: 0 var(--ct-space-md);
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ct-ink);
}
.ct-search__input::placeholder {
  color: var(--ct-muted-ink);
  opacity: 0.85;
}
.ct-search__input:focus {
  outline: none;
}
.ct-search__btn {
  flex: 0 0 auto;
  width: 54px;
  border: 0;
  background-color: var(--ct-btn-bg);
  color: var(--ct-btn-fg);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 0.15s ease-out;
}
.ct-search__btn:hover,
.ct-search__btn:focus {
  background-color: var(--ct-btn-bg-hover);
  color: var(--ct-btn-fg-hover);
}

/* ============================================================
   清單頁版面（投影片 9）
   ------------------------------------------------------------
   左直欄＝搜尋框（最上方）＋分類清單方框；右＝三欄報告卡。
   ============================================================ */

.ct-report-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--ct-space-xl);
  align-items: start;
}
.ct-report-side {
  position: sticky;
  top: var(--ct-space-lg);
}
/* 側欄裡的搜尋框吃滿欄寬（頁首版本是 360px 的固定寬度） */
.ct-report-side .ct-search {
  flex: 1 1 auto;
  width: 100%;
  margin-bottom: var(--ct-space-lg);
}
/* 欄寬只有 240px，提示語「請輸入關鍵字以進行查找」要縮字級才不會被截掉 */
.ct-report-side .ct-search__input {
  height: 46px;
  padding: 0 var(--ct-space-sm);
  font-size: 0.875rem;
}
.ct-report-side .ct-search__btn {
  width: 42px;
  font-size: 0.85rem;
}
/* 側欄不套白底卡片殼（與資料頁的 .ct-workbench__side 同一套語彙，2026-08 客戶回饋）：
   分類清單只靠列間分隔線區隔，不再多包一層框 */
.ct-report-nav {
  display: flex;
  flex-direction: column;
}
.ct-report-main {
  min-width: 0;
}

@media all and (max-width: 992px) {
  /* 用 minmax(0,1fr) 而不是 1fr：1fr 等於 minmax(auto,1fr)，軌道的下限是
     內容的 min-content。側欄裡的 .ct-report-nav 在這個斷點是 nowrap 的橫向
     捲動列，min-content ＝所有標籤寬度相加（實測 446px），於是整條軌道被撐成
     446px、整頁在 375px 下橫向溢出。側欄再補 min-width:0 才擋得住。 */
  .ct-report-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .ct-report-side {
    position: static;
    min-width: 0;
  }
  /* 窄螢幕收回橫向標籤列，避免直欄把卡片擠掉 */
  .ct-report-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0 var(--ct-space-lg);
    -webkit-overflow-scrolling: touch;
  }
  .ct-report-nav .ct-report-tab {
    white-space: nowrap;
    border-bottom: 0;
  }
}

/* ============================================================
   分類項（單選）：灰字，hover / 選中出對應色底線
   ============================================================ */

/* 與查詢頁的 .ct-tabs 同一套邏輯（2026-08 客戶回饋）：
   不畫上下滿版規則線，只留 active／hover 的主題色短底線 */
.ct-report-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--ct-space-xl);
  margin-bottom: var(--ct-space-xl);
}
.ct-report-tab {
  position: relative;
  display: inline-block;
  padding: var(--ct-space-md) 0 calc(var(--ct-space-md) - 1px);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ct-muted-ink);
  text-decoration: none;
  transition: color 0.15s ease-out;
}
/* 直欄版：每項自成一列，列間細分隔線（投影片 9 的分類方框）。
   限桌機——窄螢幕的 .ct-report-nav 是橫向捲動列，直欄的內距與分隔線都不該套上去
   （這段原本沒包 media query，排在 max-width:992px 那塊之後，會把該塊關掉的
   border-bottom 又蓋回來，窄螢幕每個標籤下面都多一條線） */
@media all and (min-width: 993px) {
  .ct-report-nav .ct-report-tab {
    display: block;
    padding: var(--ct-space-md) 0;
    border-bottom: 1px solid var(--ct-divider);
  }
  /* 首項去掉上內距：上面的搜尋框已經有 24px 下外距，再疊一次就把「全選」推得
     離搜尋框太遠（同 .ct-member-nav__item／.ct-filter__section 的作法）。
     加了子選單之後 first/last 要限定直系子項，否則子分類區塊裡的第一項也會被去掉上內距。 */
  .ct-report-nav > .ct-report-tab:first-child {
    padding-top: 0;
  }
  .ct-report-nav > .ct-report-tab:last-child,
  .ct-report-nav > .ct-report-subnav:last-child .ct-report-tab:last-child {
    border-bottom: 0;
  }
  /* 子分類：縮排一層、級距降一階，讀起來是「主分類底下的細目」而不是平輩 */
  .ct-report-tab--sub {
    padding-left: var(--ct-space-md);
    font-size: var(--ct-fs-label);
    font-weight: 500;
  }
  /* 底線也要跟著縮排起跑，不然短線會和主分類的線齊頭、看不出從屬 */
  .ct-report-tab--sub::after {
    left: var(--ct-space-md);
  }
}

/* 子分類清單本身不畫任何框線，層級交給縮排與級距表達 */
.ct-report-subnav {
  display: flex;
  flex-direction: column;
}
@media all and (max-width: 992px) {
  /* 窄螢幕的分類列是橫向捲動的一整排，子分類要攤平進同一排接在主分類後面，
     包一層 div 會變成一個 flex item、把子分類疊成直欄卡在列中間 */
  .ct-report-subnav {
    display: contents;
  }
  .ct-report-tab--sub {
    font-size: var(--ct-fs-label);
  }
}
.ct-report-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background-color: var(--ct-report-all);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.18s ease-out;
}
.ct-report-tab:hover::after,
.ct-report-tab:focus-visible::after,
.ct-report-tab.is-active::after {
  transform: scaleX(1);
}
/* 規格：hover 只出底線、文字維持灰；選中後文字轉黑 */
.ct-report-tab.is-active {
  color: var(--ct-ink);
  font-weight: 700;
}
/* 底線顏色＝該分類報告卡主題色 */
.ct-report-tab--all::after { background-color: var(--ct-report-all); }
.ct-report-tab--red::after { background-color: var(--ct-report-red); }
.ct-report-tab--blue::after { background-color: var(--ct-report-blue); }
.ct-report-tab--green::after { background-color: var(--ct-report-green); }
.ct-report-tab--amber::after { background-color: var(--ct-report-amber); }
.ct-report-tab--purple::after { background-color: var(--ct-report-purple); }
.ct-report-tab--teal::after { background-color: var(--ct-report-teal); }
.ct-report-tab--custom::after { background-color: var(--ct-cat-color, var(--ct-report-red)); }

@media all and (max-width: 768px) {
  .ct-report-tabs {
    gap: 0 var(--ct-space-lg);
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .ct-report-tab {
    white-space: nowrap;
  }
}

/* 搜尋結果提示列 */
.ct-report-searchnote {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ct-space-sm);
  margin: calc(var(--ct-space-xl) * -1 + var(--ct-space-md)) 0 var(--ct-space-lg);
  font-size: var(--ct-fs-label);
  font-weight: 400;
  color: var(--ct-muted-ink);
}
.ct-report-searchnote strong {
  color: var(--ct-ink);
}
.ct-report-searchnote a {
  color: var(--ct-observatory-red);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.ct-report-searchnote a:hover {
  color: var(--ct-archive-red);
}

.ct-report-empty {
  margin: var(--ct-space-xl) 0;
  padding: var(--ct-space-xl);
  border: 1px dashed var(--ct-divider);
  border-radius: var(--ct-radius-md);
  text-align: center;
  font-size: var(--ct-fs-body);
  color: var(--ct-muted-ink);
}

/* ============================================================
   報告卡
   ============================================================ */

/* 投影片 9 是三欄 */
.ct-report-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ct-space-xl) var(--ct-space-lg);
}
@media all and (max-width: 992px) {
  .ct-report-grid { grid-template-columns: repeat(2, 1fr); }
}
@media all and (max-width: 768px) {
  .ct-report-grid { grid-template-columns: 1fr; }
}

/* 卡片本身就是方框，左緣一條主題色直條（投影片 9），
   內容順序＝標題 → 發布日期 → 主視覺圖 */
.ct-report-card {
  display: flex;
  flex-direction: column;
  padding: var(--ct-space-lg);
  background-color: var(--ct-surface);
  border: 1px solid var(--ct-divider);
  border-left: 6px solid var(--ct-card-accent);
  border-radius: var(--ct-radius-md);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.18s ease-out, box-shadow 0.18s ease-out, transform 0.18s ease-out;
}
.ct-report-card:hover,
.ct-report-card:focus-visible {
  border-color: var(--ct-divider);
  border-left-color: var(--ct-card-accent-hover);
  box-shadow: var(--ct-shadow-float);
  transform: translateY(-2px);
}

/* --- 封面（有圖用圖，沒圖用方格紙底＋分類字標） --- */

.ct-report-card__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 無封面時的補位比例，比照實際封面（多數是 A4 橫式）；有封面時 :has(img) 會解掉。
     補位不加框線與圓角——真封面是直接貼上去的，補位一加框就變成兩種東西 */
  aspect-ratio: 7 / 5;
  overflow: hidden;
  /* 圖對齊上緣，多出來的空間留在卡底 */
  margin-bottom: auto;
}
.ct-report-card__media img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.ct-report-card__media:has(img) {
  aspect-ratio: auto;
}
.ct-report-card__media:has(img) img {
  height: auto;
}

/* 無主視覺時的補位版面：方格紙底 ＋ 分類字標 ＋ 分類全名 */
.ct-report-card__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ct-space-md);
  padding: var(--ct-space-lg);
  text-align: center;
  background-color: color-mix(in srgb, var(--ct-card-accent) 4%, var(--ct-surface));
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ct-card-accent) 9%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ct-card-accent) 9%, transparent) 1px, transparent 1px);
  background-size: 18px 18px;
  background-position: center center;
}
/* 分類字標（指數／專書／期刊），直式排列，像檔案封面的書背標記 */
.ct-report-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 2px solid var(--ct-card-accent);
  border-radius: var(--ct-radius-sm);
  background-color: var(--ct-surface);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--ct-card-accent);
}
.ct-report-card__phcat {
  font-size: var(--ct-fs-label);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ct-card-accent);
}

/* 外部單位報告標記（清單排序上外部一律置後，卡面同步標示來源） */
.ct-report-flag {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid var(--ct-divider);
  border-radius: 999px;
  background-color: var(--ct-surface);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--ct-muted-ink);
}

/* --- 卡片文字區 --- */

.ct-report-card__body {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--ct-space-lg);
}
.ct-report-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ct-space-xs) var(--ct-space-sm);
  margin-bottom: var(--ct-space-xs);
}
.ct-report-card__cat {
  display: inline-block;
  font-size: var(--ct-fs-label);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ct-card-accent);
}
.ct-report-card__title {
  margin: 0 0 var(--ct-space-sm);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.55;
  color: var(--ct-ink);
  transition: color 0.15s ease-out;
  /* 兩行截斷，讓同一列卡片的日期基線對齊 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ct-report-card__date {
  margin: 0;
  padding-top: var(--ct-space-sm);
  border-top: 1px solid var(--ct-divider);
  font-size: var(--ct-fs-label);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--ct-muted-ink);
}

/* hover：整張卡抬升（見 .ct-report-card:hover），封面同步轉分類色 */
a.ct-report-card:hover .ct-report-card__title,
a.ct-report-card:focus-visible .ct-report-card__title {
  color: var(--ct-card-accent);
}

/* 單欄（≤768px）改橫式卡：直式封面在窄螢幕會佔滿整屏，改成縮圖＋文字並排 */
@media all and (max-width: 768px) {
  .ct-report-grid {
    gap: 0;
    border-top: 1px solid var(--ct-divider);
  }
  .ct-report-card {
    flex-direction: row;
    gap: var(--ct-space-md);
    padding: var(--ct-space-lg) 0;
    border-bottom: 1px solid var(--ct-divider);
  }
  .ct-report-card__media {
    flex: 0 0 84px;
    width: 84px;
    align-self: flex-start;
    margin-bottom: 0;
    border-radius: var(--ct-radius-sm);
  }
  .ct-report-card__body {
    justify-content: center;
  }
  .ct-report-card__title {
    -webkit-line-clamp: 4;
  }
  .ct-report-card__date {
    margin-top: var(--ct-space-xs);
    padding-top: 0;
    border-top: 0;
  }
  /* 84px 寬放不下分類全名，只留字標 */
  .ct-report-card__placeholder {
    gap: 0;
    padding: var(--ct-space-sm);
  }
  .ct-report-card__phcat {
    display: none;
  }
  .ct-report-card__media .ct-report-mark {
    width: 40px;
    height: 40px;
    border-width: 1px;
    font-size: 0.8125rem;
  }
  /* 橫式卡不做抬升，避免與相鄰的分隔線互相干擾 */
  a.ct-report-card:hover .ct-report-card__media,
  a.ct-report-card:focus-visible .ct-report-card__media {
    transform: none;
    box-shadow: none;
  }
}

/* ============================================================
   分頁
   ============================================================ */

.ct-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ct-space-xs);
  margin-top: var(--ct-space-section);
  padding-top: var(--ct-space-xl);
  border-top: 1px solid var(--ct-divider);
}
.ct-pager__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 var(--ct-space-md);
  border: 1px solid var(--ct-divider);
  border-radius: var(--ct-radius-sm);
  background-color: var(--ct-surface);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--ct-ink);
  text-decoration: none;
  transition: border-color 0.15s ease-out, color 0.15s ease-out, background-color 0.15s ease-out;
}
.ct-pager__link:hover,
.ct-pager__link:focus-visible {
  border-color: var(--ct-observatory-red);
  color: var(--ct-observatory-red);
  background-color: var(--ct-rose-wash);
}
.ct-pager__link.is-current {
  background-color: var(--ct-observatory-red);
  border-color: var(--ct-observatory-red);
  color: var(--ct-surface);
  font-weight: 700;
}
.ct-pager__link.is-disabled {
  color: var(--ct-muted-ink);
  opacity: 0.45;
  pointer-events: none;
}
.ct-pager__gap {
  padding: 0 var(--ct-space-xs);
  color: var(--ct-muted-ink);
}

/* ============================================================
   報告介紹頁
   ============================================================ */

.ct-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ct-space-xs);
  margin-bottom: var(--ct-space-lg);
  /* 比 label（0.875rem）再小一階（2026-08 客戶回饋）：
     麵包屑是輔助導覽，不用跟表單標籤同級 */
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ct-muted-ink);
}
.ct-crumb a {
  color: var(--ct-muted-ink);
  text-decoration: none;
  transition: color 0.15s ease-out;
}
.ct-crumb a:hover {
  /* --ct-card-accent 只在報告卡／分類卡的範圍內有定義，麵包屑不在那個範圍裡，
     沒有 fallback 的 var() 會整條宣告失效——hover 因此完全沒反應（客戶 v260901
     投影片 9 回報）。補上觀測紅當預設值。 */
  color: var(--ct-card-accent, var(--ct-observatory-red));
}
.ct-crumb span {
  opacity: 0.6;
}

.ct-report-detail__layout {
  display: grid;
  /* 三欄總寬固定在 1290。側欄從 280 收到 260——那 20px 給封面，
     封面在簡報（投影片 11、13、15）畫得比內文還寬，實作原本卻只有內文的六成。 */
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--ct-space-xl);
  align-items: start;
}
@media all and (max-width: 992px) {
  .ct-report-detail__layout {
    grid-template-columns: 1fr;
    gap: var(--ct-space-xl);
  }
}

/* --- 標題全寬在上，其下 主視覺｜內文 兩欄 --- */

/* 報告名就是這頁的 h1（頁面不再重複「分析報告」），橫跨整個內容寬度。
   上緣留白補回原本 .ct-page-head 提供的那一段，麵包屑不會貼著分類字。 */
.ct-report-detail__head {
  margin-top: var(--ct-space-lg);
  margin-bottom: var(--ct-space-xl);
}
.ct-report-detail__head .ct-report-card__cat {
  display: block;
  margin-bottom: var(--ct-space-xs);
}


.ct-report-detail__main {
  display: grid;
  /* 封面 360 → 420。簡報上封面比內文寬，但這裡不能照抄比例：
     照抄的話內文只剩約 400px，17px 中文一行 24 字，摘要與分析亮點每條都要折三行。
     取封面 420 / 內文 530（一行 31 字）當折衷——封面份量拉起來，內文仍讀得順。 */
  grid-template-columns: 420px minmax(0, 1fr);
  gap: var(--ct-space-xl);
  align-items: start;
}
@media all and (max-width: 768px) {
  .ct-report-detail__main {
    grid-template-columns: 1fr;
    gap: var(--ct-space-lg);
  }
}
.ct-report-detail__body {
  min-width: 0;
}

.ct-report-detail__cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 不鎖比例：框高由圖片自己決定。客戶給 A4 直式就自然變高（300 寬 ≒ 424 高，
     視覺份量比橫式多五成），給橫式 banner 就變矮——兩種都不裁切也不留白。
     沒有主視覺時才退回簡報畫的橫式比例（見 --placeholder），版面不會塌。 */
  aspect-ratio: auto;
  background-color: var(--ct-surface);
  border: 1px solid var(--ct-divider);
  border-top: 4px solid var(--ct-card-accent);
  border-radius: var(--ct-radius-sm);
  overflow: hidden;
}
.ct-report-detail__cover:has(img) {
  border: 0;
  border-radius: 0;
  background-color: transparent;
}
.ct-report-detail__cover img {
  width: 100%;
  height: auto;
  display: block;
}
/* 佔位圖沒有天然高度，給它簡報上的橫式比例撐開 */
.ct-report-detail__cover:has(.ct-report-card__placeholder) {
  aspect-ratio: 4 / 3;
}

.ct-report-detail__title {
  margin: 0;
  /* 報告名就是這頁的 H1（頁首不再放「分析報告」），用內頁大標級距 */
  font-size: var(--ct-fs-pagetitle);
  line-height: 1.25;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--ct-ink);
}
/* 發布日期與「需登入才可下載」都是 ※ 備註，收成一組放在行動按鈕之前 */
.ct-report-detail__notes {
  margin: var(--ct-space-lg) 0 var(--ct-space-md);
}
.ct-report-detail__note {
  margin: 0 0 var(--ct-space-xs);
  font-size: var(--ct-fs-label);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
  color: var(--ct-muted-ink);
}
.ct-report-detail__note:last-child {
  margin-bottom: 0;
}
/* 期刊／外部報告的來源標記，排在發布日期同一層級 */
.ct-report-detail__source {
  display: inline-flex;
  align-items: center;
  margin: var(--ct-space-lg) 0 0;
  padding: 4px 12px;
  border: 1px solid var(--ct-divider);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ct-muted-ink);
}
.ct-report-detail__action {
  margin: 0;
}

/* 介紹頁主按鈕：吃分類主題色 */
.ct-btn--primary {
  display: inline-flex;
  align-items: center;
  gap: var(--ct-space-sm);
  height: 48px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--ct-radius-sm);
  /* 分類色卡片會用 --ct-card-accent 覆寫；其餘走後台按鈕色票 */
  background-color: var(--ct-card-accent, var(--ct-btn-bg));
  color: var(--ct-btn-fg);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s ease-out, transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
.ct-btn--primary:hover,
.ct-btn--primary:focus-visible {
  /* DESIGN.md §5：主按鈕 hover 切典藏紅（實際值來自後台的按鈕 hover 色）；
     分類色卡片以 --ct-card-accent-hover 覆寫 */
  background-color: var(--ct-card-accent-hover, var(--ct-btn-bg-hover));
  color: var(--ct-btn-fg-hover);
  box-shadow: var(--ct-shadow-float);
  transform: translateY(-1px);
}
.ct-btn--primary .fas,
.ct-btn--primary .far {
  font-size: 0.9em;
}

/* --- 下半：摘要／分析亮點（或發布單位） --- */

/* 區塊間不畫滿版分隔線（2026-08 客戶指示）：標題本身已有左側主題色槓，
   再加線會顯得雜；區塊分界只靠間距。 */
.ct-report-detail__block {
  margin-top: var(--ct-space-xl);
}
.ct-report-detail__block--first {
  margin-top: 0;
}
/* 左側紅棒用 ::before 畫、高度只有 1em（字身），不是 border-left。
   border 會填滿整個行框（20px 字 × 1.4 行高 = 28px），比中文字面高出約 4px；
   隔壁欄的標題沒有棒子，眼睛拿棒子的上緣去對那邊的字，就會覺得沒對齊。 */
.ct-report-detail__blocktitle {
  position: relative;
  margin: 0 0 var(--ct-space-md);
  padding-left: var(--ct-space-md);
  /* 內文的次標：低於報告名（32px），也低於範例站 h3，避免在窄欄裡搶戲 */
  font-size: var(--ct-fs-blocktitle);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ct-ink);
}
.ct-report-detail__blocktitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 1em;
  background-color: var(--ct-card-accent);
}
.ct-report-detail__text {
  font-size: var(--ct-fs-body);
  line-height: 1.8;
  color: var(--ct-ink);
}

/* 分析亮點：編號條列（01 / 02 …）。項與項之間不畫線——編號本身已經是分項的
   記號，再加一條線是同一件事做兩次，四五條並排時整塊會變成一張細格子表。
   改用間距分項，並把間距收窄：每項通常只有一到兩行，段距太大會讓四條讀起來
   像四個獨立段落而不是一組亮點。 */
.ct-report-highlight {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ct-hl;
}
.ct-report-highlight li {
  counter-increment: ct-hl;
  position: relative;
  /* 編號寬約 24px，縮排 40px 讓數字與文字之間只剩一個字身的距離；
     52px 時中間那段空白會讓編號讀起來像另一欄，而不是這一條的序號 */
  padding: 0 0 0 40px;
  font-size: var(--ct-fs-body);
  line-height: 1.8;
  color: var(--ct-ink);
}
.ct-report-highlight li + li {
  margin-top: var(--ct-space-md);
}
.ct-report-highlight li::before {
  content: counter(ct-hl, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: var(--ct-card-accent);
}

/* ============================================================
   右側「精選報告」側欄（可上下捲動、桌機吸頂）
   ============================================================ */

/* 卡片自己就要收在視窗內：舊版只對清單設 max-height:58vh，卡片本身仍會長過
   視窗底部，於是邊框看不到收尾、清單又在半途切斷，整塊像「斷掉」。
   改成卡片限高、內部用 flex 讓清單吃掉剩餘高度，捲動範圍就等於卡片可視範圍。 */
.ct-report-aside {
  position: sticky;
  /* 不能扣 --ct-header-h：那個變數是給首頁 hero 算滿版高度用的，
     而桌機版頁首（.mobile-menu 只在 ≤992px 才 position:fixed）捲動時會整個滾掉，
     真的扣了就會在側欄上方留一塊 92px 的空白。這裡只需要一般的視窗邊距。 */
  top: var(--ct-space-lg);
  align-self: start;
  /* 套版 style_d/main.css:21516 有一條 `aside { height: 100% }`，在 grid 裡會拿
     整列高度（＝左欄內文的高度）當基準，align-self:start 擋不掉明確的 height。
     結果卡片被撐到跟內文一樣長，最後一筆下面留一大塊空白＝看起來斷掉。 */
  height: auto;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--ct-space-lg) * 2);
  /* 不套白底卡片殼（與資料頁的 .ct-workbench__side 同一套語彙，2026-08 客戶回饋）。
     除了語彙一致，也是為了對齊：卡片的 24px 內距會把「精選報告」壓得比隔壁的
     「摘要」低一整個內距，三欄的第一行文字讀起來就沒對齊。 */
}
/* 捲到一半的那筆用漸層收邊，讓「還有更多」讀起來是刻意的，而不是被裁掉。
   清單沒滿版時漸層是白對白，看不出來，所以不必偵測是否溢出。 */
.ct-report-aside::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32px;
  pointer-events: none;
  /* 拿掉卡片殼之後底色是畫布色，漸層要跟著改，否則會出現一塊白 */
  background: linear-gradient(to top, var(--ct-canvas), transparent);
}
.ct-report-aside__title {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--ct-space-sm);
  margin: 0 0 var(--ct-space-xs);
  padding-bottom: var(--ct-space-md);
  /* 1px 分隔灰，與全站其他規則線同一支筆。原本是 2px 墨色——那個粗細是
     資料表的表頭線在用的，放在一個只有四個字的側欄標題底下太重。
     這條線的作用是標出下方清單的捲動起點，不需要搶眼。 */
  border-bottom: 1px solid var(--ct-divider);
  /* 與內文欄的 .ct-report-detail__blocktitle 同級距同行高：
     三欄的第一行標題是並排的，字級差一階（18 vs 20）就會看起來一個高一個低，
     盒子對齊也救不回來——對齊的是文字，不是盒子。 */
  font-size: var(--ct-fs-blocktitle);
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ct-ink);
}
.ct-report-aside__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  /* 右側留白讓文字不貼著捲動條；gutter 固定住寬度，捲動條出現時不會位移 */
  padding: 0 var(--ct-space-sm) var(--ct-space-lg) 0;
  scrollbar-gutter: stable;
  list-style: none;
  /* 捲動條低調處理，避免搶走資料頁的注意力 */
  scrollbar-width: thin;
  scrollbar-color: var(--ct-divider) transparent;
}
.ct-report-aside__list::-webkit-scrollbar {
  width: 4px;
}
.ct-report-aside__list::-webkit-scrollbar-track {
  background-color: transparent;
}
.ct-report-aside__list::-webkit-scrollbar-thumb {
  background-color: var(--ct-divider);
  border-radius: 999px;
}
.ct-report-aside__list::-webkit-scrollbar-thumb:hover {
  background-color: var(--ct-muted-ink);
}
.ct-report-aside__list > li + li {
  border-top: 1px solid var(--ct-divider);
}
/* 套版拿 `aside > ul > li > a` 當側欄選單在裝飾：main.css:21550 起一個 :before，
   到 24275 補上 width:1px + rotate(-25deg) + 主色底，hover 時就是一條紅斜線，
   同時還會把連結往右推 10px。我們的精選報告剛好也是 aside>ul>li>a，整組關掉。 */
.ct-report-aside__list > li > a::before,
.ct-report-aside__list > li > a::after {
  content: none;
}
.ct-report-aside__list > li > a:hover {
  padding-left: 0;
}

/* 側欄列表不放縮圖（2026-08 客戶指示），純文字三行：分類／標題／日期，
   分類主題色仍由 __cat 文字色帶出；上下留白收窄（24px→16px，同月回饋） */
.ct-report-aside__item {
  display: block;
  padding: var(--ct-space-md) 0;
  color: inherit;
  text-decoration: none;
}
.ct-report-aside__info {
  display: block;
  min-width: 0;
}
/* 三行只有一種粗細會糊成一團，改用「級數＋顏色」拉層次，粗體留給卡片標題 */
.ct-report-aside__cat {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ct-card-accent);
}
.ct-report-aside__name {
  display: block;
  margin: 5px 0 7px;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.6;
  /* 斷行（不讓「ISO 42001」被剖開）已由檔頭的斷行區塊統一處理，
     此處原本的 word-break/overflow-wrap 覆蓋因此移除 */
  color: var(--ct-ink);
  transition: color 0.15s ease-out;
}
.ct-report-aside__item:hover .ct-report-aside__name,
.ct-report-aside__item:focus-visible .ct-report-aside__name {
  color: var(--ct-card-accent);
}
.ct-report-aside__date {
  display: block;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--ct-muted-ink);
}

@media all and (max-width: 992px) {
  .ct-report-aside {
    position: static;
    display: block;
    max-height: none;
  }
  /* 窄版整份攤開、不內捲，收邊漸層與捲動條留白都沒有意義 */
  .ct-report-aside::after {
    display: none;
  }
  .ct-report-aside__list {
    overflow: visible;
    padding: 0;
    scrollbar-gutter: auto;
  }
}

/* ============================================================
   首頁分析報告輪播（page_block 型別 ct_report_carousel）
   ------------------------------------------------------------
   規格 §4.1：三個輪播頁放最近期三份報告；每頁停 5 秒、進度條逐漸
   填滿、跳轉後清空重來；背景＝該報告主視覺調暗；點擊任一處進介紹頁。
   ============================================================ */

.ct-carousel {
  position: relative;
  background-color: #2A1216; /* 觀測紅與墨色之間的深底，沒有主視覺時就是它 */
}

/* 區塊標題疊在輪播上方，讓整區維持單一視覺帶（不要切成兩條色帶） */
.ct-carousel__head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: var(--ct-space-lg) 0;
  pointer-events: none;
}
.ct-carousel__heading {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.9);
}

/* --- 輪播區 --- */

.ct-carousel__viewport {
  position: relative;
  /* 全部頁疊在同一格，高度固定，切換時不會抖 */
  display: grid;
  /* 高度封頂 600px（對標 csr.cw.com.tw/trips：那站的滿版輪播是固定高 ~605px，
     不鎖比例，所以螢幕愈寬、比例愈扁——1280 時約 2.1:1、1920 時約 3.1:1）。
     純 16:9 在 1920 會長到 1080px，一頁只剩輪播，這就是「太大」的來源。

     只用 min-height，不用 `aspect-ratio + max-height`：那組合會讓瀏覽器反過來
     用比例去推寬度（600×16/9≒1067px），輪播內容就縮成左邊一塊、右邊露出底色。
     56.25vw＝滿版寬的 16:9，所以 1067px 以下仍等於 16:9，再寬就停在 600px；
     下限 420px 是因為 375px 寬時 16:9 只有 211px，放不下分類標籤＋標題＋日期＋按鈕。
     用 min-height（而不是 height）內容超過時還能自己長高，不會裁掉字。 */
  min-height: clamp(420px, 56.25vw, 600px);
}

.ct-carousel__slide {
  /* 全部疊在同一個 grid 格子裡，用 opacity 交叉淡入 */
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  /* 輪播加高對標範例站後，靠下對齊會把多出來的高度全堆在上方變成空洞，
     改置中讓上下留白平均（區塊標題與進度條各自 absolute 定位，不受影響） */
  align-items: center;
  overflow: hidden;
  text-decoration: none;
  color: var(--ct-surface);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease-out, visibility 0.45s;
  /* 主題色錨點：進度條與分類標籤吃這個 */
  --ct-card-accent: var(--ct-report-red);
}
.ct-carousel__slide--red { --ct-card-accent: var(--ct-report-red); }
.ct-carousel__slide--blue { --ct-card-accent: var(--ct-report-blue); }
.ct-carousel__slide--green { --ct-card-accent: var(--ct-report-green); }
.ct-carousel__slide--amber { --ct-card-accent: var(--ct-report-amber); }
.ct-carousel__slide--purple { --ct-card-accent: var(--ct-report-purple); }
.ct-carousel__slide--teal { --ct-card-accent: var(--ct-report-teal); }
.ct-carousel__slide--custom { --ct-card-accent: var(--ct-cat-color, var(--ct-report-red)); }

.ct-carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* 背景：報告主視覺（或公版素材圖）鋪滿 */
.ct-carousel__bg {
  position: absolute;
  inset: 0;
  display: block;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1.04);
  transition: transform 6s linear;
}
.ct-carousel__slide.is-active .ct-carousel__bg {
  transform: scale(1);
}

/* 調暗層：規格要求「主視覺調暗」，同時確保白字對比足夠 */
/* 兩張圖都沒有時的底：與報告卡同語彙的方格紙紋，避免整片死黑 */
.ct-carousel__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}

.ct-carousel__scrim {
  position: absolute;
  inset: 0;
  display: block;
  background:
    linear-gradient(
      to top,
      rgba(37, 33, 36, 0.88) 0%,
      rgba(37, 33, 36, 0.66) 42%,
      rgba(37, 33, 36, 0.42) 100%
    );
}

.ct-carousel__body {
  position: relative;
  display: block;
  width: 100%;
  /* 上緣讓開疊在上面的區塊標題；下緣讓開進度條，且要拉開到「查看報告」的底線
     不會跟進度條的橫線看起來黏在一起（兩條都是細橫線，太近會讀成同一組） */
  padding: calc(var(--ct-space-xl) * 2) 0 calc(var(--ct-space-xl) * 2 + var(--ct-space-md));
}
/* view 內用 <span class="container"> 承接套版的內容欄寬，需自行轉成 block */
.ct-carousel__body .container {
  display: block;
}

.ct-carousel__cat {
  display: inline-block;
  margin-bottom: var(--ct-space-sm);
  padding: 3px 12px;
  border-radius: 999px;
  background-color: var(--ct-card-accent);
  font-size: var(--ct-fs-label);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ct-surface);
}
.ct-carousel__title {
  display: block;
  margin-bottom: var(--ct-space-sm);
  font-size: clamp(1.375rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: normal;
  color: var(--ct-surface);
  /* 標題長度不一，統一截兩行，下面的日期／摘要基線才會固定 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ct-carousel__date {
  display: block;
  margin-bottom: var(--ct-space-md);
  font-size: var(--ct-fs-label);
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.78);
}
.ct-carousel__summary {
  display: block;
  margin-bottom: var(--ct-space-lg);
  /* 摘要是這一區唯一的長句，版心 1550 時一行會到 90 幾個中文字，讀起來會迷路。
     收在 60rem：字級也是 1rem，所以不管根字級多少，一行都固定 60 個中文字
     （本站根字級 17px → 實測 1020px ÷ 17px = 60），
     view 那邊截的 120 字剛好鋪滿兩行——兩個數字是綁在一起的，改一邊要改另一邊。
     其餘元素（分類標籤、標題、日期、查看報告）都短，不受影響、也不用收。 */
  max-width: min(60rem, 100%);
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.86);
}
.ct-carousel__cue {
  display: inline-flex;
  align-items: center;
  gap: var(--ct-space-sm);
  padding-bottom: 3px;
  border-bottom: 2px solid currentColor;
  font-size: var(--ct-fs-label);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ct-surface);
}
.ct-carousel__cue .fas {
  transition: transform 0.15s ease-out;
}
.ct-carousel__slide:hover .ct-carousel__cue .fas,
.ct-carousel__slide:focus-visible .ct-carousel__cue .fas {
  transform: translateX(4px);
}

@media all and (max-width: 768px) {
  .ct-carousel__summary { display: none; } /* 手機以標題為主，摘要留給介紹頁 */
}

/* --- 進度條（＝切換鈕） --- */

/* 進度條置中、離底緣 40px。原本是靠左貼底：靠左時它跟左邊那疊文字同一條左界，
   但中間隔了一大段空白（文字是垂直置中、進度條貼底），看起來像掉在角落的殘留物
   而不是那疊文字的一部分。滿版輪播的分頁指示置中是通例，也不再跟文字爭同一條軸線。 */
.ct-carousel__nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--ct-space-xl);
  z-index: 2;
  display: flex;
  /* 報告很多時寧可換行，也不要讓每條細到點不到（見下方 min-width） */
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ct-space-sm);
}
.ct-carousel__dot {
  flex: 1 1 0;
  /* 下限 32px：flex-basis 0 沒有下限的話，20 則會縮到 57px、40 則剩 25px，
     一路細到點不到也數不清。撐到裝不下就換行，版面不會被推爆。 */
  min-width: 32px;
  max-width: 120px;
  padding: var(--ct-space-sm) 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.ct-carousel__bar {
  display: block;
  height: 3px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.32);
  overflow: hidden;
}
/* 進度條填滿由 JS 控 width 與 transition-duration；跳轉後歸零重跑 */
.ct-carousel__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background-color: var(--ct-surface);
}
.ct-carousel__dot:hover .ct-carousel__bar,
.ct-carousel__dot:focus-visible .ct-carousel__bar {
  background-color: rgba(255, 255, 255, 0.5);
}
/* 目前這頁的軌道加亮：使用者關掉動態效果時進度條不會跑，仍要看得出在第幾頁 */
.ct-carousel__dot.is-active .ct-carousel__bar {
  background-color: rgba(255, 255, 255, 0.62);
}

/* 使用者要求減少動態時，不做淡入與縮放，JS 也不會自動輪播 */
@media (prefers-reduced-motion: reduce) {
  .ct-carousel__slide,
  .ct-carousel__bg,
  .ct-carousel__cue .fas {
    transition: none;
  }
  .ct-carousel__bg,
  .ct-carousel__slide.is-active .ct-carousel__bg {
    transform: none;
  }
}

/* ============================================================
   表單元件基準
   ------------------------------------------------------------
   套版的 input / textarea / select 只有 Bootstrap 4 預設樣式
   （#ced4da 灰框、藍色 focus 光暈、32px 高），與 DESIGN.md 的
   規格不一致。這裡統一換裝：高度 50px、規則線邊框、品牌紅 focus。
   只作用於前台（certtrend.css 僅掛在 views/front/common/css.php）。
   ============================================================ */

.form-control {
  height: 50px;
  padding: 13px 16px;
  border: 1px solid var(--ct-divider);
  border-radius: var(--ct-radius-sm);
  background-color: var(--ct-surface);
  font-family: var(--ct-font-family);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ct-ink);
  box-shadow: none;
  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.form-control::placeholder {
  color: var(--ct-muted-ink);
  opacity: 0.8;
}
.form-control:hover {
  border-color: var(--ct-muted-ink);
}
.form-control:focus {
  outline: none;
  border-color: var(--ct-observatory-red);
  box-shadow: 0 0 0 3px var(--ct-rose-wash);
  background-color: var(--ct-surface);
  color: var(--ct-ink);
}
.form-control:disabled,
.form-control[readonly] {
  background-color: var(--ct-canvas);
  color: var(--ct-muted-ink);
  cursor: not-allowed;
}

textarea.form-control {
  height: auto;
  min-height: 140px;
  padding-top: 12px;
  padding-bottom: 12px;
  line-height: 1.7;
  resize: vertical;
}

/* 下拉選單：關掉系統外觀，換成與規則線一致的自繪箭頭 */
select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 42px;
  background-image: var(--ct-select-arrow);
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px 8px;
  cursor: pointer;
}
select.form-control::-ms-expand {
  display: none;
}

/* 表單標籤與說明文字（限表單區塊內，避免動到導覽列的 label） */
.form-group > label {
  margin-bottom: var(--ct-space-sm);
  font-size: var(--ct-fs-label);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ct-ink);
}
.form-group .help-block,
.form-text {
  margin-top: var(--ct-space-xs);
  font-size: var(--ct-fs-label);
  font-weight: 400;
  color: var(--ct-muted-ink);
}

/* 勾選框／單選鈕吃品牌紅 */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--ct-observatory-red);
}

/* ------------------------------------------------------------
   按鈕尺寸與形狀
   套版 .btn 仍是 Bootstrap 預設（padding .375rem/.75rem、字重 400），
   顏色則已走後台色票（--button-* / --outline-button-*）。
   這裡只改尺寸、字重與圓角對齊 DESIGN.md（高 48px / padding 13-22px），
   顏色一律不碰，後台調色行為不變。
   ------------------------------------------------------------ */

.btn:not(.btn-icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ct-space-sm);
  min-height: 48px;
  padding: 13px 22px;
  border-radius: var(--ct-radius-sm);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.btn:not(.btn-icon).btn-block {
  display: flex;
  width: 100%;
}
/* 小尺寸變體維持較緊湊 */
.btn:not(.btn-icon).btn-sm,
.btn:not(.btn-icon).small,
.btn:not(.btn-icon).btn-small {
  min-height: 38px;
  padding: 8px 16px;
  font-size: 0.875rem;
}
/* 陰影只回應互動（DESIGN.md） */
.btn-full:hover,
.btn-border:hover {
  box-shadow: var(--ct-shadow-float);
}

/* 鍵盤操作的可見焦點（套版原本只靠瀏覽器預設外框） */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ct-observatory-red);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   套版裸元素重設（ct-* 版面）
   ------------------------------------------------------------
   套版 static/css/style_d/main.css 對裸元素下了兩條無條件規則：
     main.css:19200  section { padding-top: 2rem; padding-bottom: 1.5rem }（全斷點）
     main.css:21824  @media(min-width:993px) aside { padding-top: 2rem }
   （--base-font-size 是 17px，2rem/1.5rem 換算成 34px/25.5px）
   本站版面的間距一律由 ct-* 元件自己決定，不該有人偷偷多墊 34px。
   以前是每個元件各自補一次 padding:0（.ct-report-side／.ct-workbench__side／
   .ct-member-side／.ct-member__panel 都補過，還漏掉 /report 那個裸 section，
   害那頁比全站其他頁低 34px），這裡一次收斂。

   注意：這條只管 <main class="ct-…"> 底下的 section／aside。首頁那種
   外層 main 沒有 ct- class 的區塊，仍由檔頭「逐一列舉」那份清單負責。

   specificity 刻意壓成 (0,0,1)：祖先包 :where() 不計分，
   跟套版的裸 `section` / `aside` 同分、靠本檔較晚載入勝出；
   而任何 .ct-* 元件規則 (0,1,0) 都仍然壓得過這條，
   要內距的元件（.ct-query-panel、.ct-contact、.ct-auth__side…）照常生效。

   新增 ct 版面時 <main> 的 class 要以 ct- 開頭，才會落在這條的守備範圍。
   ------------------------------------------------------------ */

:where(main[class^="ct-"]) section,
:where(main[class^="ct-"]) aside {
  padding-top: 0;
  padding-bottom: 0;
}

/* ------------------------------------------------------------
   手機頁首遮蓋補償（全站）
   ------------------------------------------------------------
   套版的斷點對不齊：
     - main.css:21441  @media (max-width: 992px) → .mobile-menu 變 position:fixed
     - main.css:23685  @media (max-width: 768px) → body { padding-top: 67px }
   固定頁首從 992px 就生效，但補償只做到 768px，
   **769–992px 這段沒人補**：#pjax-container 起點是 y=0，
   每頁最上面 67px 被頁首壓住（/contact 的大標、報告介紹頁的麵包屑都看不到）。
   這裡只補這一段，≤768px 交給套版原本的 body padding，避免重複補償。
   ------------------------------------------------------------ */

:root {
  --ct-mobile-header-h: 67px; /* = main.css .mobile-menu 的 height */
}

@media all and (min-width: 769px) and (max-width: 992px) {
  #pjax-container {
    padding-top: var(--ct-mobile-header-h);
  }
}

/* hero 例外：它要精準佔滿「頁首以下整個視窗」（規格 §4.1）。
   桌機扣的是 --ct-header-h(76px)，但 ≤992px 的固定頁首是 67px，
   不換算會短 9px、露出下一區塊的邊。 */
@media all and (max-width: 992px) {
  .ct-hero {
    min-height: calc(100vh - var(--ct-mobile-header-h));
  }
}

/* ============================================================
   數據檢索（/data landing、/data/standard/company 等查詢頁）
   ------------------------------------------------------------
   規格：docs/website_spec.md §4.4、§4.5
   視覺語彙依 DESIGN.md「資料觀測室」：面板以規則線與留白構成、
   圓角克制、陰影只回應互動（autocomplete／彈窗屬浮層，例外）。
   ============================================================ */

.ct-data-page {
  padding: var(--ct-space-xl) 0 var(--ct-space-section);
}

/* --- landing 三條入口橫幅列（投影片 16：左形象圖＋標題，右介紹文字） --- */

.ct-data-cards {
  display: flex;
  flex-direction: column;
  gap: var(--ct-space-lg);
}

.ct-data-card {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  align-items: stretch;
  color: inherit;
  text-decoration: none;
  background-color: var(--ct-surface);
  border: 1px solid var(--ct-divider);
  border-radius: var(--ct-radius-md);
  overflow: hidden;
  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out, transform 0.15s ease-out;
}
@media all and (max-width: 992px) {
  .ct-data-card {
    grid-template-columns: 1fr;
  }
}
.ct-data-card:hover,
.ct-data-card:focus-visible {
  border-color: var(--ct-observatory-red);
  box-shadow: var(--ct-shadow-float);
  transform: translateY(-2px);
  color: inherit;
  text-decoration: none;
}

/* 左半格：形象圖在上、標題在下（投影片 16 的左半） */
.ct-data-card__media {
  display: flex;
  flex-direction: column;
  background-color: var(--ct-canvas);
  border-right: 1px solid var(--ct-divider);
  overflow: hidden;
}
/* 圖片區固定 16:9（欄寬 360 → 202.5 高）。原本是寫死 150px 高又可伸縮，
   三張卡的圖片區會因為右欄文字長短不同而各長各的高。
   flex: 0 0 auto——右欄較高時多出來的空間留給下方標題，不要把圖拉變形。 */
.ct-data-card__media img,
.ct-data-card__media .ct-data-card__placeholder {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
}
.ct-data-card__media img {
  /* 形象圖是寬幅資訊圖，cover 會把中間裁成一片空白，這裡用 contain 完整呈現 */
  object-fit: contain;
  object-position: center;
  padding: var(--ct-space-md);
  display: block;
}
@media all and (max-width: 992px) {
  .ct-data-card__media {
    border-right: 0;
    border-bottom: 1px solid var(--ct-divider);
  }
}
/* 無形象圖時的補位：方格紙底＋卡片名稱，與報告卡同一套語彙 */
.ct-data-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    linear-gradient(var(--ct-divider) 1px, transparent 1px),
    linear-gradient(90deg, var(--ct-divider) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ct-muted-ink);
}

.ct-data-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: var(--ct-space-lg) var(--ct-space-xl);
}
.ct-data-card__title {
  display: block;
  flex: 0 0 auto;
  padding: var(--ct-space-md) var(--ct-space-lg);
  background-color: var(--ct-surface);
  border-top: 1px solid var(--ct-divider);
  /* 卡片標題不是區塊標題，吃 32px 會斷行把整條列撐高，留在次級字級 */
  font-size: var(--ct-fs-subtitle);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ct-ink);
}
.ct-data-card:hover .ct-data-card__title,
.ct-data-card:focus-visible .ct-data-card__title {
  color: var(--ct-observatory-red);
}
.ct-data-card__text {
  display: block;
  margin-bottom: var(--ct-space-sm);
  font-size: var(--ct-fs-body);
  line-height: 1.65;
  color: var(--ct-muted-ink);
}
.ct-data-card__cue {
  display: inline-flex;
  align-items: center;
  gap: var(--ct-space-sm);
  padding-top: var(--ct-space-md);
  font-size: var(--ct-fs-label);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ct-observatory-red);
}
.ct-data-card__cue .fas {
  font-size: 0.85em;
  transition: transform 0.15s ease-out;
}
.ct-data-card:hover .ct-data-card__cue .fas {
  transform: translateX(3px);
}
/* 疊成單欄後，內文的左右 40px 內距比上方標題的 24px 多凸一截，兩塊左緣對不齊；
   375px 下還把行寬壓到 233px，句尾常剩一個字獨佔一行（「…永續報告／書。」）。
   這塊必須排在 .ct-data-card__body 的定義之後——同權重時後者才會贏。 */
@media all and (max-width: 992px) {
  .ct-data-card__body {
    padding: var(--ct-space-lg);
  }
}

/* --- 查詢條件面板 --- */

/* 查詢面板只用「色面」跟頁面底色區隔，不再加 1px 框線——DESIGN.md：
   色面或分隔線擇一；查詢頁的頁籤線／框線／備註線疊在一起會把視線切碎
   （2026-08 客戶回饋）。 */
.ct-query-panel {
  margin-bottom: var(--ct-space-xl);
  padding: var(--ct-space-lg);
  background-color: var(--ct-surface);
  border-radius: var(--ct-radius-md);
}

/* 一列式查詢：輸入查詢｜年度別｜查詢鈕。三格底緣切齊，
   欄位 50px、按鈕也拉到 50px，這一列才是齊平的而不是差 2px。 */
.ct-query {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px auto;
  gap: var(--ct-space-md);
  align-items: end;
}
.ct-query .ct-query__field--action .ct-btn {
  height: 50px;
  /* 旁邊是一條很長的輸入框，鈕只有「查詢」兩個字寬會顯得單薄 */
  min-width: 120px;
  justify-content: center;
}
@media all and (max-width: 768px) {
  .ct-query {
    grid-template-columns: 1fr;
  }
  .ct-query__field--action .ct-btn {
    width: 100%;
  }
}

.ct-query__label {
  display: block;
  margin-bottom: var(--ct-space-sm);
  font-size: var(--ct-fs-label);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ct-ink);
}
/* autocomplete 下拉要貼著輸入框定位 */
.ct-query__control {
  position: relative;
}
.ct-query__hint {
  margin: var(--ct-space-md) 0 0;
  font-size: var(--ct-fs-label);
  color: var(--ct-muted-ink);
}
/* 註記與提示連著出現時收窄行距，兩行讀成一組 */
.ct-query__note + .ct-query__note,
.ct-query__note + .ct-query__hint {
  margin-top: var(--ct-space-xs);
}

/* 停用態：查詢鈕在公司＋年度都選定前不可按（規格 §4.5）
   底色不能直接用 --ct-divider(#DED7D9)：那是為了髮絲線調的帶紅中性色，
   線條細看不出來，整顆按鈕填滿後那點紅就變成一片濁濁的藕色。
   改由 --ct-muted-ink 稀釋出中性灰，紅調被洗掉，看起來才是「暫時不能按」。 */
.ct-btn--primary:disabled,
.ct-btn--primary[disabled] {
  background-color: color-mix(in srgb, var(--ct-muted-ink) 22%, var(--ct-surface));
  color: var(--ct-muted-ink);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.ct-btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* flex 容器會把 <i> 與文字之間的空白節點吃掉，「←回到重點標準清單」因此擠在一起
     （客戶 v260901 投影片 16）。比照 .ct-btn--primary 用 gap 補回來。 */
  gap: var(--ct-space-sm);
  height: 48px;
  padding: 0 22px;
  border: 1px solid var(--ct-divider);
  border-radius: var(--ct-radius-sm);
  background-color: var(--ct-surface);
  color: var(--ct-ink);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.ct-btn--ghost:hover,
.ct-btn--ghost:focus-visible {
  border-color: var(--ct-muted-ink);
  color: var(--ct-ink);
}
/* 表格列內的操作鈕：48px 的標準高度會把列撐得比內容高一倍 */
.ct-btn--sm {
  height: 34px;
  padding: 0 12px;
  font-size: var(--ct-fs-label);
}

/* --- autocomplete 下拉（浮層，故允許陰影） --- */

.ct-ac {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 320px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  background-color: var(--ct-surface);
  border: 1px solid var(--ct-divider);
  border-radius: var(--ct-radius-sm);
  box-shadow: var(--ct-shadow-float);
}
.ct-ac[hidden] {
  display: none;
}
.ct-ac__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--ct-divider);
}
.ct-ac__item:last-child {
  border-bottom: 0;
}
.ct-ac__item:hover,
.ct-ac__item.is-active {
  background-color: var(--ct-rose-wash);
}
.ct-ac__title {
  font-size: 1rem;
  color: var(--ct-ink);
}
.ct-ac__meta {
  font-size: var(--ct-fs-label);
  color: var(--ct-muted-ink);
}
.ct-ac__empty {
  padding: 12px 16px;
  font-size: var(--ct-fs-label);
  color: var(--ct-muted-ink);
}

/* --- 查詢結果 --- */

.ct-result__state {
  margin: 0 0 var(--ct-space-xl);
  padding: var(--ct-space-lg);
  background-color: var(--ct-surface);
  border: 1px solid var(--ct-divider);
  border-radius: var(--ct-radius-md);
  color: var(--ct-muted-ink);
}
/* 圖表工作區的空狀態撐到與圖表卡同高（.ct-chart-canvas--tall 460px＋卡片內距）：
   原本是一張矮卡貼在左上角，右邊的篩選欄有 600px 高，左下方就空掉半個畫面，
   看起來像頁面壞掉而不是「還沒選條件」。撐等高之後選完條件版面也不會跳動。 */
.ct-workbench__main > .ct-result__state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(460px + var(--ct-space-card) * 2);
  text-align: center;
}
@media all and (max-width: 768px) {
  .ct-workbench__main > .ct-result__state {
    min-height: calc(340px + var(--ct-space-card) * 2);
  }
}

.ct-panel {
  margin-bottom: var(--ct-space-xl);
  padding: var(--ct-space-card);
  background-color: var(--ct-surface);
  border: 1px solid var(--ct-divider);
  border-radius: var(--ct-radius-md);
}
/* 同 .ct-chart-card 的理由：窄螢幕下 32px 內距吃掉太多欄寬，表格被迫橫捲。
   這塊必須排在上面的 .ct-panel 之後，同權重才蓋得掉。 */
@media all and (max-width: 768px) {
  .ct-panel {
    padding: var(--ct-space-md);
  }
}
/* 同 .ct-chart-card__head：不畫底線，緊接著的表頭已經有一條 2px 的線，
   兩條疊在一起等於同一個位置畫了兩次 */
.ct-panel__title {
  margin: 0 0 var(--ct-space-lg);
  /* 這裡放的是「○○公司於 2025 年通過的標準（共 N 項）」這種動態句子，
     不是短標題；32px 在 414px 的窄欄裡會折成四行，用次標級距才讀得順 */
  font-size: var(--ct-fs-blocktitle);
  font-weight: 700;
  /* 與 .ct-chart-card__head h3 同行高：並排兩張卡要用同一把尺算兩行的高度 */
  line-height: 1.4;
  color: var(--ct-ink);
}

/* 公司基本資訊：標籤在上、值在下的欄位帶 */
.ct-profile {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ct-space-lg);
  margin: 0;
}
@media all and (max-width: 768px) {
  .ct-profile {
    grid-template-columns: 1fr;
    gap: var(--ct-space-md);
  }
}
/* 欄位本身不畫紅線：三個欄位各帶一條，紅色就從「標記」變成「花紋」，
   而且每條的長度隨值的行數變動，右欄看起來像三段參差的柵欄。
   紅線收斂到區塊標題上（.ct-profile-card__title），整塊只標一次。 */
.ct-profile__item {
  padding-left: 0;
}
.ct-profile__label {
  margin: 0 0 var(--ct-space-xs);
  font-size: var(--ct-fs-label);
  font-weight: 500;
  color: var(--ct-muted-ink);
}
.ct-profile__value {
  margin: 0;
  /* 1.25rem（實際 21.25px）比區塊標題「公司基本資訊」的 20px 還大，
     階層是反的——三個粗體大字疊起來，右欄的份量整個壓過左邊的查詢列。
     退回正文級距：DESIGN.md 的階梯只有 blocktitle 20 → body 17，
     這裡是欄位值不是標題，17px 粗體已經夠醒目。 */
  font-size: var(--ct-fs-body);
  font-weight: 700;
  line-height: 1.5;
  color: var(--ct-ink);
}

/* 標準清單表格：規則線構成，數值欄靠右並用等寬數字 */
.ct-table-wrap {
  overflow-x: auto;
}
.ct-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: var(--ct-fs-body);
}
.ct-table th,
.ct-table td {
  padding: 12px var(--ct-space-md);
  text-align: left;
}
/* 表頭是一塊實色帶（客戶簡報投影片 17 的做法）。三個好處：
   欄名一眼分得出來、色塊本身就是 sticky 需要的不透明底、
   資料列不必再靠每一列的細線分隔（見下面的隔行底色）。 */
.ct-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--ct-observatory-red);
  font-size: var(--ct-fs-label);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ct-surface);
  white-space: nowrap;
}
/* 隔行底色取代每一列的分隔線：DESIGN.md「色面或分隔線擇一」，
   兩個都上等於同一個地方畫兩次。長清單靠色帶掃行也比細線好認。 */
.ct-table tbody tr:nth-child(even) {
  background-color: var(--ct-canvas);
}
.ct-table tbody tr:hover {
  background-color: var(--ct-rose-wash);
}
/* 選擇器要壓過 `.ct-table th, .ct-table td` 的 text-align:left——
   那條是 (0,1,1)，光寫 .ct-table__num 是 (0,1,0)，靠右從來沒生效過，
   數值欄一直是靠左的。 */
.ct-table th.ct-table__num,
.ct-table td.ct-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 窄螢幕的表格：表頭改可折行（像「所屬掛牌類型產業的合規率」這種長欄名
   不折就會把整張表撐寬），資料列的標準代號改成不折（「ISO 14064-1」拆成
   三行會讓每一列變成 108px 高），內距也收一點。
   .ct-hide-sm 給「完整欄名的前綴」用——見 standard_company.php 的表頭。 */
@media all and (max-width: 768px) {
  .ct-table thead th {
    white-space: normal;
  }
  .ct-table th,
  .ct-table td {
    padding: 10px 12px;
  }
  .ct-table tbody td:first-child {
    white-space: nowrap;
  }
  .ct-hide-sm {
    display: none;
  }
}
.ct-table__empty {
  padding: var(--ct-space-xl) var(--ct-space-md);
  text-align: center;
  color: var(--ct-muted-ink);
}
/* 操作鈕靠右並排，窄螢幕不換行（外層 .ct-table-wrap 會橫捲） */
.ct-table__actions {
  text-align: right;
  white-space: nowrap;
}

/* --- 頁面註記與申請連結 --- */

/* 備註區不畫上緣分隔線：※ 前綴＋弱化灰字已足以標示層級（2026-08 客戶回饋） */
/* 註記要讀成「它上面那一塊的腳註」，不是獨立的一條帶狀區，所以上緣留白只有 16px。
   解釋單一張圖的說明不放這裡——那種跟著圖走，放在 .ct-chart-card__foot。
   這裡只留全頁通用的資料說明，一律單欄滿版。 */
.ct-notes {
  padding-top: var(--ct-space-md);
}
.ct-notes__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 懸掛縮排：折行的第二行要對齊文字，不是對齊 ※，
   否則多行註記讀起來像另起一條新的 */
.ct-notes__list li {
  margin-bottom: var(--ct-space-xs);
  padding-left: 1.6em;
  text-indent: -1.6em;
  font-size: var(--ct-fs-label);
  line-height: 1.7;
  color: var(--ct-muted-ink);
}


/* ------------------------------------------------------------
   標準異動申請入口（國際標準依公司／依產業查詢）
   這是這兩頁唯一的對外動作，原本只是註記最後一行的灰字連結。
   獨立成一列：說明在左、次要按鈕在右，白底＋規則線，不加陰影也不用色塊。
   ------------------------------------------------------------ */

.ct-amend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ct-space-md) var(--ct-space-lg);
  margin-top: var(--ct-space-lg);
  padding: var(--ct-space-lg);
  background-color: var(--ct-surface);
  border: 1px solid var(--ct-divider);
  border-radius: var(--ct-radius-md);
}
.ct-amend__text {
  flex: 1 1 320px;
  min-width: 0;
}
.ct-amend__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--ct-ink);
}
.ct-amend__desc {
  margin: var(--ct-space-xs) 0 0;
  font-size: var(--ct-fs-label);
  line-height: 1.6;
  color: var(--ct-muted-ink);
}
.ct-amend .ct-btn {
  flex: 0 0 auto;
}
/* 查詢列下方的註記（投影片 17 的「※ 2020 年僅有上市公司資料。」）。
   原本是貼在年度別下拉右側，那會在同一列裡多出第四種對齊；
   改成整列下方獨立一行，與 .ct-query__hint 同一組。 */
.ct-query__note {
  margin: var(--ct-space-md) 0 0;
  padding-left: 1.6em;
  text-indent: -1.6em;
  font-size: var(--ct-fs-label);
  line-height: 1.6;
  color: var(--ct-muted-ink);
}

/* --- 登入提醒彈窗（規格 §3.3 登入卡控） --- */

.ct-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ct-space-md);
}
.ct-modal[hidden] {
  display: none;
}
.ct-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(37, 33, 36, 0.45);
}
.ct-modal__dialog {
  position: relative;
  width: 100%;
  /* 520 而不是 420：420 時一行放得下 18 個中文字，而登入提醒的文案是 37 字，
     第三行只剩「頁。」兩個字吊在那裡。撐到 520（一行約 23 字）讓它收在兩行，
     且留有餘裕——剛好卡在臨界值的話，文案改一個字就又會掉出一行。 */
  max-width: 520px;
  padding: var(--ct-space-xl);
  background-color: var(--ct-surface);
  border-radius: var(--ct-radius-lg);
  box-shadow: var(--ct-shadow-float);
}
.ct-modal__title {
  margin: 0 0 var(--ct-space-md);
  font-size: var(--ct-fs-subtitle);
  font-weight: 700;
  color: var(--ct-ink);
}
.ct-modal__text {
  margin: 0 0 var(--ct-space-lg);
  font-size: var(--ct-fs-body);
  line-height: 1.65;
  color: var(--ct-muted-ink);
}
.ct-modal__actions {
  display: flex;
  gap: var(--ct-space-md);
}
.ct-modal__actions .ct-btn {
  flex: 1 1 0;
}
/* 手機：兩顆並排時每顆只剩約 130px，「前往登入」四個字會被折成兩行
   （前往登／入），看起來像壞掉。改成上下排列、各自滿寬。
   斷點取 560px 而不是站上慣用的 768：彈窗最寬 520，視窗 768 時它還是 520 寬、
   兩顆並排綽綽有餘，提早堆疊反而浪費空間。 */
@media all and (max-width: 560px) {
  .ct-modal__actions {
    flex-direction: column;
  }
  .ct-modal__actions .ct-btn {
    /* flex 必須重設回 auto。上面那條 flex: 1 1 0 的 basis 作用在「主軸」上，
       改成直排之後主軸是垂直的——basis: 0 會蓋掉 .ct-btn 的 height: 48px，
       按鈕塌成內容高度 30px，比站上其他按鈕矮一截。 */
    flex: 0 0 auto;
    width: 100%;
  }
}
body.ct-modal-open {
  overflow: hidden;
}

/* ============================================================
   麵包屑補充樣式 ＋「依公司／依產業」切換頁籤
   ------------------------------------------------------------
   規格：簡報每頁左上都有「首頁 / 數據檢索 / …」路徑（投影片 9–15、17–32）；
   四個查詢頁的標題下方有「依公司查詢／依產業查詢」頁籤（投影片 17、18、24、25、26）
   ============================================================ */

/* .ct-crumb 本體定義在分析報告區塊，這裡只補共用頁面需要的狀態 */
.ct-crumb__current {
  color: var(--ct-ink);
}
.ct-crumb__sep {
  opacity: 0.6;
}
.ct-crumb__dynamic[hidden] {
  display: none;
}
/* 數據檢索頁沒有分類主題色，讓 hover 回到品牌紅（報告頁仍走 --ct-card-accent） */
.ct-data-page .ct-crumb a:hover {
  color: var(--ct-observatory-red);
}

/* 頁籤列不畫滿版底線，只留 active 項的紅色短底線（::after）當指示
   （2026-08 客戶回饋：與查詢框線、備註線疊在一起太多線） */
.ct-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ct-space-lg);
  margin-bottom: var(--ct-space-lg);
}
.ct-tabs__item {
  position: relative;
  padding: 0 2px var(--ct-space-md);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--ct-muted-ink);
  text-decoration: none;
  transition: color 0.15s ease-out;
}
.ct-tabs__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background-color: transparent;
  transition: background-color 0.15s ease-out;
}
.ct-tabs__item:hover {
  color: var(--ct-observatory-red);
  text-decoration: none;
}
.ct-tabs__item:hover::after {
  background-color: var(--ct-divider);
}
.ct-tabs__item.is-active {
  color: var(--ct-ink);
}
.ct-tabs__item.is-active::after {
  background-color: var(--ct-observatory-red);
}

/* ============================================================
   依產業查詢：Step A 掛牌類型 / Step B 產業格狀清單（§4.7、§4.9）
   ============================================================ */

.ct-picker__step {
  margin-bottom: var(--ct-space-xl);
}
.ct-picker__steplabel {
  margin: 0 0 var(--ct-space-xs);
  font-size: var(--ct-fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ct-observatory-red);
}
.ct-picker__steptitle {
  margin: 0 0 var(--ct-space-md);
  font-size: var(--ct-fs-subtitle);
  font-weight: 700;
  color: var(--ct-ink);
}

/* 與 .ct-picker__grid 用同一套欄位節奏。
   STEP 1／STEP 2 在同一頁、同一組操作，卻一個是內容寬的小按鈕、一個是整格卡片，
   視線會一直被那個落差抓走。對齊格線之後整頁只剩一套節奏。
   代價是「上市」兩個字裝在 368px 的格子裡偏空——但 STEP 1 只有兩顆，
   空一點反而好點；而且欄數是跟著下面那組一起變的，不會有某個斷點只對一半。 */
.ct-picker__types {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ct-space-md);
}
@media all and (max-width: 992px) {
  .ct-picker__types {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* 被點的掛牌類別底色反紅（規格 §4.7 Step B）。
   盒子的量體與下方 .ct-picker__item（產業別）刻意一致——同一頁的 STEP 1／STEP 2
   是同一組操作，高度差 14px 會讓兩區看起來像不同來源的元件。
   寬度也對齊（見 .ct-picker__types 的格線設定）。 */
.ct-picker__type {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: var(--ct-space-sm) var(--ct-space-xl);
  border: 1px solid var(--ct-divider);
  border-radius: var(--ct-radius-sm);
  background-color: var(--ct-surface);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ct-ink);
  cursor: pointer;
  transition: background-color 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out;
}
.ct-picker__type:hover {
  border-color: var(--ct-observatory-red);
  color: var(--ct-observatory-red);
}
.ct-picker__type.is-active {
  background-color: var(--ct-observatory-red);
  border-color: var(--ct-observatory-red);
  color: var(--ct-surface);
}
@media all and (max-width: 768px) {
  .ct-picker__types {
    grid-template-columns: repeat(2, 1fr);
  }
  .ct-picker__type {
    padding: var(--ct-space-sm) var(--ct-space-md);
  }
}

.ct-picker__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ct-space-md);
}
@media all and (max-width: 992px) {
  .ct-picker__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media all and (max-width: 768px) {
  .ct-picker__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.ct-picker__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: var(--ct-space-sm) var(--ct-space-md);
  background-color: var(--ct-surface);
  border: 1px solid var(--ct-divider);
  border-radius: var(--ct-radius-sm);
  font-size: 1rem;
  text-align: center;
  color: var(--ct-ink);
  text-decoration: none;
  transition: border-color 0.15s ease-out, color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.ct-picker__item:hover,
.ct-picker__item:focus-visible {
  border-color: var(--ct-observatory-red);
  color: var(--ct-observatory-red);
  box-shadow: var(--ct-shadow-float);
  text-decoration: none;
}
.ct-picker__empty {
  margin: 0;
  color: var(--ct-muted-ink);
}

/* ============================================================
   圖表工作台：主圖 ＋ 右側篩選欄（§4.7、§4.9、§4.11）
   ============================================================ */

.ct-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--ct-space-xl);
  align-items: start;
  margin-bottom: var(--ct-space-xl);
}
/* 窄幅：篩選欄收到圖表上方（規格 §3.4） */
@media all and (max-width: 992px) {
  /* minmax(0,1fr) 而不是 1fr：1fr ＝ minmax(auto,1fr)，軌道下限是內容的
     min-content。圖表卡裡的 <canvas> 帶著寬度屬性（Chart.js 預設 300px），
     加上卡片內距後 min-content ＝366px，在 375px 視窗下整頁被撐出橫向捲動。
     兩個子項再補 min-width:0，才不會換成子項自己溢出。 */
  .ct-workbench {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ct-space-lg);
  }
  .ct-workbench__main,
  .ct-workbench__side {
    min-width: 0;
  }
  .ct-workbench__side {
    order: -1;
  }
}

/* 側欄不再包白底框卡（2026-08 客戶回饋：資料頁的主圖已是卡片，
   側欄再一張卡會滿版都是框）：直接落在畫布上，
   區段之間只用分隔線（DESIGN.md：色面或分隔線擇一）。
   （套版塞在 aside 上的 padding-top 由檔頭的「套版裸元素重設」統一歸零） */

.ct-filter__section + .ct-filter__section {
  border-top: 1px solid var(--ct-divider);
}
/* 去掉卡片殼之後，首段的把手不再需要頂端內距，側欄頂緣才對得齊主圖卡 */
.ct-filter__section:first-child .ct-filter__head {
  padding-top: 0;
}
/* 收合把手：收合＝箭頭朝下（可展開）、展開＝朝上（可收合），同手風琴慣例。
   （規格 §4.7 原寫收合朝左，2026-08 客戶回饋改成通用方向） */
.ct-filter__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ct-space-sm);
  width: 100%;
  padding: var(--ct-space-md) 0;
  border: 0;
  background: none;
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
  color: var(--ct-ink);
  cursor: pointer;
}
.ct-filter__head small {
  font-size: var(--ct-fs-label);
  font-weight: 400;
  color: var(--ct-muted-ink);
}
.ct-filter__head .fas {
  font-size: 0.8em;
  color: var(--ct-muted-ink);
  transform: rotate(180deg);   /* 底圖是 chevron-down：展開態朝上 */
  transition: transform 0.15s ease-out;
}
.ct-filter__head.is-collapsed .fas {
  transform: rotate(0deg);     /* 收合態朝下＝還有東西可展開 */
}
.ct-filter__panel {
  padding: 0 0 var(--ct-space-lg);
}
.ct-filter__search {
  margin-bottom: var(--ct-space-sm);
  position: relative;
}
.ct-filter__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ct-space-sm);
  margin-bottom: var(--ct-space-sm);
}
.ct-filter__count {
  margin: 0;
  font-size: var(--ct-fs-label);
  color: var(--ct-muted-ink);
}
/* 年度不足兩個時的提示（§10.4）。灰字混在其他說明裡看不見，
   要用得跟一般說明分得開的顏色與字重。 */
.ct-filter__count--warn {
  color: var(--ct-signal-red);
  font-weight: 500;
}
.ct-filter__clear {
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--ct-fs-label);
  color: var(--ct-observatory-red);
  text-decoration: underline;
  cursor: pointer;
}
.ct-filter__options {
  max-height: 340px;
  overflow-y: auto;
}
.ct-filter__options--inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ct-space-sm) var(--ct-space-lg);
  max-height: none;
  overflow: visible;
}
.ct-filter__group + .ct-filter__group {
  margin-top: var(--ct-space-md);
}
.ct-filter__grouptitle {
  margin: 0 0 var(--ct-space-xs);
  font-size: var(--ct-fs-label);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ct-muted-ink);
}
/* 可收合的分類標題（依產業查詢的標準清單）：箭頭方向同 .ct-filter__head */
.ct-filter__grouptoggle {
  display: flex;
  font-family: inherit;
  align-items: center;
  justify-content: space-between;
  gap: var(--ct-space-sm);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.ct-filter__grouptoggle .fas {
  font-size: 0.8em;
  transform: rotate(180deg);
  transition: transform 0.15s ease-out;
}
.ct-filter__grouptoggle.is-collapsed .fas {
  transform: rotate(0deg);
}
.ct-filter__more {
  margin-top: var(--ct-space-sm);
  padding-top: var(--ct-space-sm);
  border-top: 1px solid var(--ct-divider);
}
.ct-filter__more summary {
  font-size: var(--ct-fs-label);
  font-weight: 500;
  color: var(--ct-observatory-red);
  cursor: pointer;
}
.ct-filter__note {
  margin: var(--ct-space-md) 0 0;
  font-size: var(--ct-fs-label);
  color: var(--ct-muted-ink);
}

/* 勾選／單選項目 */
.ct-check {
  display: flex;
  align-items: flex-start;
  gap: var(--ct-space-sm);
  margin: 0;
  padding: 5px 0;
  font-size: 1rem;
  font-weight: 400;
  /* line-height 定死，下面 input 的置中位移才有穩定基準 */
  line-height: 1.6;
  color: var(--ct-ink);
  cursor: pointer;
}
.ct-check input {
  flex: 0 0 auto;
  /* 圓鈕／方框跟著字級走（原生 13px 在 17px 字旁偏小），並以
     「(行盒高 − 鈕高) / 2」對齊第一行文字的視覺中線；
     維持 flex-start，「排放密集度」這類折行選項的鈕才會留在第一行 */
  width: 1em;
  height: 1em;
  margin: calc((1.6em - 1em) / 2) 0 0;
  accent-color: var(--ct-observatory-red);
  cursor: pointer;
}
.ct-check small {
  font-size: var(--ct-fs-label);
  color: var(--ct-muted-ink);
}
.ct-check.is-disabled {
  color: var(--ct-muted-ink);
  cursor: not-allowed;
}
.ct-check.is-disabled input {
  cursor: not-allowed;
}

/* 中位數／平均數切換：不加外框（2026-08 客戶回饋——外框跟旁邊的
   「圖表下載」描邊按鈕撞在一起，兩個框並排誰都不像控制項） */
.ct-switch {
  display: inline-flex;
  gap: var(--ct-space-md);
}
.ct-chart-card__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ct-space-md);
}
.ct-chart-canvas--tall {
  height: 460px;
}
@media all and (max-width: 768px) {
  .ct-chart-canvas--tall {
    height: 340px;
  }
}

/* 標題列右側放「回到產業別查詢」 */
.ct-page-head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--ct-space-md);
}

/* 條件較多的查詢面板改直式堆疊（§4.8） */
.ct-query--stack {
  grid-template-columns: 1fr;
  gap: var(--ct-space-lg);
}
.ct-query--stack .ct-query__field--action .ct-btn {
  min-width: 160px;
}

/* ------------------------------------------------------------
   依公司查詢的兩欄版面（投影片 17、18、25、26）
   上半：左查詢條件 ｜ 右公司基本資訊
   下半：左標準清單（可上下捲動）｜ 右圖表；溫室氣體則是兩張圖並排
   ------------------------------------------------------------ */

.ct-query-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  /* 間距與 .ct-profile-card 的左內距相同，中間那條規則線才會落在正中央 */
  gap: var(--ct-space-lg);
  align-items: start;
}
.ct-query-row__form {
  min-width: 0;
}
/* 還沒查詢時公司基本資訊是隱藏的，右欄會空著一塊；
   讓查詢區跟著收成單欄，查完再自動變回兩欄 */
.ct-query-row:has(.ct-profile-card[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}
/* 公司基本資訊：查詢後才出現，且不再包一層框（外層查詢面板已是白色區塊，框中框太雜）。
   改用一條規則線與左邊的查詢條件分界——同一張白卡裡並排兩件事，
   只靠間距分不出邊界，右邊那塊會像浮在上面的一段粗體字。 */
.ct-query-row > .ct-profile-card {
  /* 撐滿整列：不撐的話線只有卡片自己那麼長，
     左邊表單比較高的那一頁（溫室氣體）會變成一條半截的線 */
  align-self: stretch;
  padding-left: var(--ct-space-lg);
  border-left: 1px solid var(--ct-divider);
}
/* 窄幅收成單欄，直的線要改成橫的，否則會變成貼在左邊的一條孤線 */
@media all and (max-width: 992px) {
  .ct-query-row > .ct-profile-card {
    padding-left: 0;
    padding-top: var(--ct-space-lg);
    border-left: 0;
    border-top: 1px solid var(--ct-divider);
  }
}
.ct-profile-card {
  margin-bottom: 0;
}
.ct-profile-card[hidden] {
  display: none;
}
/* 區塊標題左側一條紅線，同 /report/{id} 的「摘要」（.ct-report-detail__blocktitle）：
   這是整塊唯一的品牌標記，底下的欄位不再重複。 */
.ct-profile-card__title {
  position: relative;
  margin: 0 0 var(--ct-space-lg);
  padding-left: var(--ct-space-md);
  font-size: var(--ct-fs-blocktitle);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ct-ink);
}
/* 同 .ct-report-detail__blocktitle：棒子只有字身高，不填滿整個行框 */
.ct-profile-card__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 1em;
  background-color: var(--ct-observatory-red);
}
/* 並排時基本資訊改直式三列（投影片 17 的右側欄） */
.ct-profile--stack {
  grid-template-columns: 1fr;
  gap: var(--ct-space-md);
}

.ct-result-cols {
  display: grid;
  grid-template-columns: minmax(0, 414fr) minmax(0, 584fr);
  gap: var(--ct-space-xl);
  /* 並排的是拿來互相對照的兩張卡，等高才讀得成一組；註記條數不同時，
     短的那張把差額留在卡內底部，而不是讓兩張卡一高一低。 */
  align-items: stretch;
}
/* 圖表沒資料（該年度無標準）時右欄是空的，收成單欄，左表就不會被壓在窄欄裡 */
.ct-result-cols.is-single {
  grid-template-columns: minmax(0, 1fr);
}

/* 溫室氣體是兩張同尺寸的折線圖並排（投影片 25） */
.ct-result-cols--even {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ct-result-cols > .ct-panel,
.ct-result-cols > .ct-chart-card {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}
/* 卡片被拉高時，多出來的空間留在圖／表與卡腳之間，
   兩張卡的「註記＋圖表下載」因此落在同一條線上 */
.ct-result-cols > .ct-chart-card > .ct-chart-card__foot {
  margin-top: auto;
}
/* Chart.js 要固定高度的父層，別讓 flex 把它壓扁或拉長 */
.ct-result-cols .ct-chart-canvas,
.ct-result-cols .ct-chart-empty {
  flex: 0 0 auto;
}
/* 並排時左右兩張卡的標題列固定兩行高：一邊「○○公司於 2024 年通過的標準（共 10 項）」
   折兩行、另一邊「○○業前 5 大標準合規率」只有一行，繪圖區與表格就會差一整行，
   兩張本來要拿來對照的圖／表因此對不齊。撐成同高再往下排，內容才在同一條基線上。 */
@media all and (min-width: 993px) {
  .ct-result-cols > .ct-panel > .ct-panel__title,
  .ct-result-cols > .ct-chart-card > .ct-chart-card__head {
    /* 兩行標題的高度（20px × 1.4 × 2）。
       只在真的並排時才撐——窄幅兩張卡是上下疊的，沒有要對齊的對象，
       硬撐兩行只會在一行標題底下多留一行空白。 */
    min-height: calc(var(--ct-fs-blocktitle) * 1.4 * 2);
  }
}
/* 投影片 17 的「設計成可上下捲動」。高度對齊圖表區（.ct-chart-canvas 380px），
   左表捲動區與右圖繪圖區才會同時結束，兩欄底緣不再一高一低。 */
.ct-table-wrap--scroll {
  max-height: 380px;
  overflow-y: auto;
}
/* border-collapse: collapse 的表格，sticky 表頭的框線會脫隊、資料列從縫隙透出來。
   改 separate + 0 間距：每格只畫下框線，外觀與 collapse 相同，但表頭蓋得住底下的列。 */
.ct-table-wrap--scroll .ct-table {
  border-collapse: separate;
  border-spacing: 0;
}

@media all and (max-width: 992px) {
  /* minmax(0,1fr) 而不是 1fr：軌道下限否則是內容的 min-content，
     結果卡裡的表格與 <canvas> 都比 375px 的欄寬大，整頁會橫向溢出。 */
  .ct-query-row,
  .ct-result-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .ct-result-cols > .ct-panel,
  .ct-result-cols > .ct-chart-card {
    min-width: 0;
  }
  .ct-table-wrap--scroll {
    max-height: none;
  }
}

/* ============================================================
   台灣與全球合規趨勢（§4.10 手風琴、§4.11 上下兩區）
   ============================================================ */

/* 不限高、不內捲（2026-08 客戶回饋）：重點標準是短清單，整份攤開讓頁面
   自然長高就好，內層捲軸會把展開的內容藏在可視範圍外。 */
.ct-accordion {
  background-color: var(--ct-surface);
  border: 1px solid var(--ct-divider);
  border-radius: var(--ct-radius-md);
  /* 清單自己吃一段固定高度、內部捲動（客戶簡報投影片 30 明確畫了右側捲軸）。
     重點標準會持續新增，不限高的話整頁會被這張清單拉成好幾個畫面高，
     底下的內容等於不存在。62vh 讓收合狀態一次看得到六、七條，
     又不會把頁首與麵包屑一起擠出畫面。 */
  max-height: clamp(480px, 62vh, 760px);
  overflow-y: auto;
  /* 捲到底不要把外層頁面一起帶著跑 */
  overscroll-behavior: contain;
  /* gutter 固定住寬度，篩選後項目變少、捲軸消失時清單不會左右位移 */
  scrollbar-gutter: stable;
  /* 捲動條低調處理，與精選報告側欄同一套 */
  scrollbar-width: thin;
  scrollbar-color: var(--ct-divider) transparent;
}
.ct-accordion::-webkit-scrollbar {
  width: 4px;
}
.ct-accordion::-webkit-scrollbar-track {
  background-color: transparent;
}
.ct-accordion::-webkit-scrollbar-thumb {
  background-color: var(--ct-divider);
  border-radius: 999px;
}
.ct-accordion::-webkit-scrollbar-thumb:hover {
  background-color: var(--ct-muted-ink);
}
/* 手機不做內捲：頁面本身就在捲，再套一個小捲動區只會兩個捲動打架，
   手指從清單上滑過去常常捲錯層 */
@media all and (max-width: 768px) {
  .ct-accordion {
    max-height: none;
    overflow-y: visible;
    scrollbar-gutter: auto;
  }
}
/* 用「前面還有可見項目」當條件，而不是相鄰選擇器——篩選是用 hidden 藏項目，
   相鄰選擇器會讓「前一項被藏起來」的第一個可見項多長一條頂線 */
.ct-accordion__item:not([hidden]) ~ .ct-accordion__item:not([hidden]) {
  border-top: 1px solid var(--ct-divider);
}

/* ------------------------------------------------------------
   篩選列（§10.7）：搜尋框＋類別鍵
   ------------------------------------------------------------ */
.ct-trend-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ct-space-md) var(--ct-space-xl);
  margin-bottom: var(--ct-space-lg);
}
/* 搜尋框不吃滿寬——右邊要留給類別鍵，兩者同一列才看得出是一組條件 */
.ct-trend-search {
  position: relative;
  flex: 0 1 320px;
  min-width: 200px;
}
.ct-trend-search__icon {
  position: absolute;
  top: 50%;
  left: var(--ct-space-md);
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: var(--ct-muted-ink);
  pointer-events: none;
}
.ct-trend-search__input {
  width: 100%;
  height: 46px;
  /* 左內距要讓開圖示：兩倍基準內距 ＋ 圖示寬 */
  padding: 0 var(--ct-space-md) 0 calc(var(--ct-space-md) * 2 + 0.9rem);
  border: 1px solid var(--ct-divider);
  border-radius: var(--ct-radius-sm);
  background-color: var(--ct-surface);
  font-family: inherit;
  font-size: 1rem;
  color: var(--ct-ink);
  transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
.ct-trend-search__input::placeholder {
  color: var(--ct-muted-ink);
  opacity: 0.85;
}
.ct-trend-search__input:hover {
  border-color: var(--ct-muted-ink);
}
.ct-trend-search__input:focus {
  outline: none;
  border-color: var(--ct-observatory-red);
  box-shadow: 0 0 0 3px var(--ct-rose-wash);
}
.ct-trend-filter__cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ct-space-lg);
}
/* 語彙同查詢頁的 .ct-tabs__item：灰字、hover 出淡線、選中黑字＋觀測紅底線 */
.ct-trend-cat {
  position: relative;
  padding: 0 2px var(--ct-space-sm);
  border: 0;
  background: none;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ct-muted-ink);
  cursor: pointer;
  transition: color 0.15s ease-out;
}
.ct-trend-cat::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background-color: transparent;
  transition: background-color 0.15s ease-out;
}
.ct-trend-cat:hover {
  color: var(--ct-observatory-red);
}
.ct-trend-cat:hover::after {
  background-color: var(--ct-divider);
}
.ct-trend-cat.is-active {
  color: var(--ct-ink);
}
.ct-trend-cat.is-active::after {
  background-color: var(--ct-observatory-red);
}
.ct-trend-empty {
  margin-bottom: var(--ct-space-lg);
  color: var(--ct-muted-ink);
}

@media all and (max-width: 768px) {
  .ct-trend-filter {
    flex-direction: column;
    align-items: stretch;
  }
  /* 直排之後外層仍是 flex-wrap:wrap：這種容器的交叉軸尺寸由最寬的項目決定，
     項目可以撐破被限制住的容器寬度。搜尋框的 min-width:200px 與類別鍵那條
     nowrap 捲動列在 320px 下都比容器寬，整頁就橫向溢出。兩者各自封上限。 */
  .ct-trend-search {
    flex: 1 1 auto;
    max-width: 100%;
  }
  /* 類別多起來時橫向捲，不要讓它擠成三四行把清單推到螢幕外 */
  .ct-trend-filter__cats {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
    max-width: 100%;
  }
  .ct-trend-cat {
    white-space: nowrap;
  }
}
/* 整條標題列都是把手：點任一處＝展開／收合 */
.ct-accordion__head {
  display: flex;
  align-items: center;
  gap: var(--ct-space-md);
  width: 100%;
  padding: var(--ct-space-lg);
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.ct-accordion__title {
  flex: 1 1 auto;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--ct-ink);
}
.ct-accordion__item.is-open .ct-accordion__title,
.ct-accordion__head:hover .ct-accordion__title {
  color: var(--ct-observatory-red);
}
/* 分類只是標記，本身不可點（整條把手才是），游標不要暗示它是按鈕 */
.ct-accordion__cat {
  font-size: var(--ct-fs-label);
  color: var(--ct-muted-ink);
  cursor: default;
}
/* 手風琴慣例：收合時箭頭朝下（可展開），展開後朝上（可收合）。底圖是 chevron-down */
.ct-accordion__arrow {
  font-size: 0.85em;
  color: var(--ct-muted-ink);
  transform: rotate(0deg);
  transition: transform 0.15s ease-out;
}
.ct-accordion__item.is-open .ct-accordion__arrow {
  transform: rotate(180deg);
}
/* 手機：標題／類別／箭頭三欄擠在 375px 裡，標題與類別會各自從中間斷字
   （「ISO 9001 品質管理系\A統」＋「品質管\A理」），兩邊都讀不順。
   類別退到下一行整行，標題就能吃滿寬度、少斷一次。 */
@media all and (max-width: 768px) {
  .ct-accordion__head {
    flex-wrap: wrap;
    column-gap: var(--ct-space-md);
    row-gap: var(--ct-space-xs);
    padding: var(--ct-space-md);
  }
  .ct-accordion__title {
    font-size: 1rem;
  }
  /* 來源順序是 標題→類別→箭頭；這裡改成 標題→箭頭→類別（整行） */
  .ct-accordion__arrow {
    order: 2;
    flex: 0 0 auto;
  }
  .ct-accordion__cat {
    order: 3;
    flex: 1 1 100%;
  }
}
.ct-accordion__panel {
  padding: 0 var(--ct-space-lg) var(--ct-space-lg);
}
@media all and (max-width: 768px) {
  .ct-accordion__panel {
    padding: 0 var(--ct-space-md) var(--ct-space-md);
  }
}
.ct-accordion__label {
  margin: 0 0 var(--ct-space-sm);
  font-size: var(--ct-fs-label);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ct-muted-ink);
}
.ct-accordion__text {
  margin: 0 0 var(--ct-space-md);
  font-size: var(--ct-fs-body);
  line-height: 1.7;
  color: var(--ct-ink);
}

/* 上下兩區各自有標題與規則線分隔。
   段距不用 --ct-space-section（1440px 下 130px）：那是給首頁那種大段落的，
   這裡兩區之間已經有一條規則線，區塊標題也退到 24px，
   再加 130px 只會在篩選欄底下再挖出一片空白。40＋40 已經斷得夠清楚。 */
.ct-section + .ct-section {
  margin-top: var(--ct-space-xl);
  padding-top: var(--ct-space-xl);
  border-top: 1px solid var(--ct-divider);
}
.ct-section__title {
  margin: 0 0 var(--ct-space-lg);
  /* 標準名改當頁面 H1 之後，這裡是「台灣／全球」兩個半頁的分段標，不是主標。
     36px 與 H1 同級會兩個標題互相打架，退到次級標題級距（24px），
     分段感交給上方的分隔線與段距，不靠字級硬撐。 */
  font-size: var(--ct-fs-subtitle);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ct-ink);
}

/* ============================================================
   標準異動申請三步驟表單（§4.6）
   ============================================================ */

.ct-steps {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ct-space-lg);
  margin: 0 0 var(--ct-space-xl);
  padding: 0;
  list-style: none;
}
.ct-steps__item {
  display: flex;
  align-items: center;
  gap: var(--ct-space-sm);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ct-muted-ink);
}
.ct-steps__item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--ct-divider);
  border-radius: 50%;
  font-size: var(--ct-fs-label);
  background-color: var(--ct-surface);
}
.ct-steps__item.is-active {
  color: var(--ct-observatory-red);
}
.ct-steps__item.is-active span {
  background-color: var(--ct-observatory-red);
  border-color: var(--ct-observatory-red);
  color: var(--ct-surface);
}
.ct-steps__item.is-done {
  color: var(--ct-ink);
}
.ct-steps__item.is-done span {
  border-color: var(--ct-observatory-red);
  color: var(--ct-observatory-red);
}

.ct-form {
  max-width: 46rem;
  padding: var(--ct-space-xl);
  background-color: var(--ct-surface);
  border: 1px solid var(--ct-divider);
  border-radius: var(--ct-radius-md);
}
.ct-form__row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--ct-space-md);
  align-items: start;
  margin-bottom: var(--ct-space-lg);
}
@media all and (max-width: 768px) {
  .ct-form__row {
    grid-template-columns: 1fr;
    gap: var(--ct-space-sm);
  }
  .ct-form {
    padding: var(--ct-space-lg);
  }
}
.ct-form__label {
  padding-top: 14px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--ct-ink);
}
@media all and (max-width: 768px) {
  .ct-form__label {
    padding-top: 0;
  }
}
/* 必填記號（簡報投影片 19、20 每個欄位標籤都有「*」）。
   DESIGN.md：狀態不可只靠顏色區分——星號本身即為形狀線索，
   欄位另有 required 屬性與後端驗證訊息。 */
.ct-form__label--required::after {
  content: " *";
  color: var(--ct-signal-red);
  font-weight: 700;
}
.ct-form__help {
  margin: var(--ct-space-sm) 0 0;
  font-size: var(--ct-fs-label);
  line-height: 1.6;
  color: var(--ct-muted-ink);
}
/* 欄位級錯誤訊息（DESIGN.md：狀態不可只靠顏色——紅框旁一定要有一句說明錯在哪）。
   PHP（後端驗證退回）與 ct-form.js（前端即時驗證）產生同一組標記。 */
.ct-form__error {
  margin: var(--ct-space-sm) 0 0;
  font-size: var(--ct-fs-label);
  line-height: 1.6;
  color: var(--ct-signal-red);
}
/* 表單級的即時狀態訊息（目前用在 Passkey 註冊）：沿用 help 的字級，只換色。
   成功／失敗都會同時換掉文字內容，不是只靠顏色分辨。 */
.ct-form__help--ok {
  color: var(--ct-data-green);
}
.ct-form__help--error {
  color: var(--ct-signal-red);
}
.ct-form__row.is-invalid .ct-form__label {
  color: var(--ct-observatory-red);
}
/* bootstrap 的 .is-invalid 會在欄位右側塞一張驚嘆號背景圖並撐開右內距，
   圖示會蓋掉 select 的自繪箭頭，這裡一律關掉——錯在哪由下方那行紅字說明。 */
.form-control.is-invalid,
.form-control.is-invalid:hover {
  border-color: var(--ct-signal-red);
  background-image: none;
  padding-right: 16px;
}
.form-control.is-invalid:focus {
  border-color: var(--ct-signal-red);
  box-shadow: 0 0 0 3px var(--ct-rose-wash);
}
select.form-control.is-invalid {
  padding-right: 42px;
  background-image: var(--ct-select-arrow);
}
/* 表單分組的分隔線（投影片 19、20：申請人／公司資料與異動內容分成兩組） */
.ct-form__divider {
  margin: var(--ct-space-lg) 0;
  border: 0;
  border-top: 1px solid var(--ct-divider);
}
.ct-form__note {
  margin: var(--ct-space-lg) 0;
  padding: var(--ct-space-md) var(--ct-space-lg);
  background-color: var(--ct-canvas);
  border-left: 2px solid var(--ct-observatory-red);
}
.ct-form__note p {
  margin: 0;
  font-size: var(--ct-fs-label);
  line-height: 1.7;
  color: var(--ct-muted-ink);
}
/* ============================================================
   會員專區外殼（規格投影片 8）
   ------------------------------------------------------------
   與 /report、/data 同一套頁面骨架：麵包屑 → ct-page-head → 左側欄＋右內容。
   側欄語彙沿用分析報告清單頁的 .ct-report-nav：不套白底卡片殼、只有列間
   分隔線、hover／選中出主題色底線（套版 .sideBar-menu 那個歪斜的「＼」
   裝飾符號連同 .aside-content / .tab-pane 那套一起不用了）。
   ============================================================ */

.ct-member-page {
  padding: var(--ct-space-xl) 0 var(--ct-space-section);
}
.ct-member-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--ct-space-xl);
  align-items: start;
}
.ct-member-side {
  position: sticky;
  top: var(--ct-space-lg);
}
.ct-member-main {
  min-width: 0;
}
.ct-member-nav {
  display: flex;
  flex-direction: column;
}
.ct-member-nav__item {
  position: relative;
  display: block;
  /* 與 .ct-report-nav .ct-report-tab 同值——兩個側欄是同一套語彙，只改一邊會走鐘 */
  padding: var(--ct-space-md) 0;
  border-bottom: 1px solid var(--ct-divider);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ct-muted-ink);
  text-decoration: none;
  transition: color 0.15s ease-out;
}
.ct-member-nav__item:last-child {
  border-bottom: 0;
}
/* 首項去掉上內距，側欄第一行才與右側面板標題對齊（同 .ct-filter__section 的作法） */
.ct-member-nav__item:first-child {
  padding-top: 0;
}
.ct-member-nav__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background-color: var(--ct-observatory-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.18s ease-out;
}
.ct-member-nav__item:hover::after,
.ct-member-nav__item:focus-visible::after,
.ct-member-nav__item.is-active::after {
  transform: scaleX(1);
}
/* 同分析報告側欄：hover 只出底線、文字維持灰；選中才轉黑 */
.ct-member-nav__item.is-active {
  color: var(--ct-ink);
  font-weight: 700;
}

/* 外殼多了一欄 240px 側欄，會員資料頁內層的「左資料／右密碼」在 1200px
   以下就會被擠成兩條窄柱，提早收成單欄（≤992px 那條規則仍在，這條較特定會勝出）。 */
@media all and (max-width: 1200px) {
  .ct-member-main .ct-member__layout {
    grid-template-columns: 1fr;
  }
}

/* 窄螢幕：側欄收成頂部橫向捲動列（取代原本 main.php 裡那段 inline <style>
   把 .tab-pane 硬掰成膠囊的作法）。手機頁首遮蓋由全站的
   #pjax-container padding-top 補償處理，這裡不必再補。 */
@media all and (max-width: 992px) {
  .ct-member-layout {
    grid-template-columns: 1fr;
    gap: var(--ct-space-lg);
  }
  .ct-member-side {
    position: static;
  }
  .ct-member-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0 var(--ct-space-lg);
    border-bottom: 1px solid var(--ct-divider);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ct-member-nav::-webkit-scrollbar {
    display: none;
  }
  .ct-member-nav__item {
    padding: var(--ct-space-md) 0;
    white-space: nowrap;
    border-bottom: 0;
  }
  /* 橫向列沒有「第一行對齊」的問題，把上內距補回來才不會歪一格 */
  .ct-member-nav__item:first-child {
    padding-top: var(--ct-space-md);
  }
}

/* ============================================================
   會員資料頁（規格投影片 8：與 ISO 管理學院的「會員資訊」頁面相同）
   ------------------------------------------------------------
   左欄會員資料、右欄更換密碼，同一頁完成。
   ============================================================ */

.ct-member__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--ct-space-xl);
  align-items: start;
}
/* .ct-form 自己有 max-width: 46rem（單獨成頁的表單不該拉到全寬），但在這裡
   欄寬已經由 grid 決定了，再套 46rem 會讓白卡比它上方那條區塊標題底線短一截，
   看起來像沒對齊。版心從 1320 拉到 1550 之後這個落差變得很明顯。
   同 .ct-auth .ct-form 的處理方式。 */
.ct-member__panel .ct-form {
  max-width: none;
}
@media all and (max-width: 992px) {
  .ct-member__layout {
    grid-template-columns: 1fr;
  }
}
/* Passkey 頁一欄裡疊了兩個面板（新增／已綁定裝置），面板之間要拉開。
   限定直接落在 .ct-member-main 底下的那組——會員資料頁的右欄 <aside> 是
   左欄 <section> 的相鄰兄弟，沒限定的話會被這條多推 40px。 */
.ct-member-main > .ct-member__panel + .ct-member__panel {
  margin-top: var(--ct-space-xl);
}
.ct-member__paneltitle {
  margin: 0 0 var(--ct-space-lg);
  padding-bottom: var(--ct-space-md);
  border-bottom: 1px solid var(--ct-divider);
  font-size: var(--ct-fs-blocktitle);
  font-weight: 700;
  color: var(--ct-ink);
}
/* 右欄較窄，label 與欄位改上下排，不然 180px 的 label 欄會把輸入框擠爛 */
.ct-member__panel--side .ct-form__row {
  grid-template-columns: 1fr;
  gap: var(--ct-space-sm);
}
.ct-member__panel--side .ct-form__label {
  padding-top: 0;
}
/* 唯讀欄位（帳號 email、LINE 綁定狀態）：與輸入框同一條基線 */
/* 頁首下方的次要入口（例：註冊頁的「已經有帳號了？前往登入」）——
   放在表單之前，已有帳號的人不必填完整張表才發現可以直接登入 */
.ct-page-head__aside {
  margin: var(--ct-space-md) 0 0;
  font-size: var(--ct-fs-label);
  color: var(--ct-muted-ink);
}
.ct-page-head__aside a {
  font-weight: 500;
  color: var(--ct-observatory-red);
}
.ct-page-head__aside a:hover {
  color: var(--ct-archive-red);
  text-decoration: underline;
}

.ct-form__static {
  margin: 0;
  padding-top: 14px;
  font-size: var(--ct-fs-body);
  color: var(--ct-ink);
}

.ct-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ct-space-md);
  margin-top: var(--ct-space-lg);
}
.ct-form--confirm {
  margin-top: var(--ct-space-lg);
}
/* 確認頁的兩顆鈕（上一步｜提交）並排在同意條款下方，寬度對齊上方的確認清單 */
.ct-form__actions--confirm {
  max-width: 46rem;
}

/* 檔案選擇：原生 input 隱藏，label 當按鈕，旁邊顯示檔名 */
.ct-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.ct-file-btn {
  cursor: pointer;
}
.ct-file-name {
  display: inline-block;
  margin-left: var(--ct-space-md);
  font-size: var(--ct-fs-label);
  color: var(--ct-muted-ink);
  /* 原本寫 break-all 是為了不讓長檔名撐破版面，但那也會把
     「ISO-42001_v2.pdf」從中間剖開；改用全站同一帖藥（見檔頭斷行區塊）：
     有空白／連字號時在那裡斷，整串沒斷點時才由 anywhere 兜底 */
  word-break: normal;
  overflow-wrap: anywhere;
}

.ct-alert {
  max-width: 46rem;
  margin-bottom: var(--ct-space-lg);
  padding: var(--ct-space-md) var(--ct-space-lg);
  background-color: var(--ct-rose-wash);
  border: 1px solid var(--ct-observatory-red);
  border-radius: var(--ct-radius-sm);
  color: var(--ct-archive-red);
}
.ct-alert__title {
  margin: 0 0 var(--ct-space-xs);
  font-weight: 700;
}
.ct-alert ul {
  margin: 0;
  padding-left: 1.2em;
  font-size: var(--ct-fs-label);
}

/* 確認頁：灰底唯讀 */
.ct-confirm {
  max-width: 46rem;
  margin: 0;
  background-color: var(--ct-canvas);
  border: 1px solid var(--ct-divider);
  border-radius: var(--ct-radius-md);
  overflow: hidden;
}
.ct-confirm__row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--ct-space-md);
  padding: var(--ct-space-md) var(--ct-space-lg);
  border-bottom: 1px solid var(--ct-divider);
}
.ct-confirm__row:last-child {
  border-bottom: 0;
}
/* 申請人／公司資料與異動內容之間的分組線（投影片 20）。
   清單本來每一列就有 1px 底線，這裡改用較深的 2px 當分組記號，
   並吃掉上一列的底線，否則兩條線會疊在一起。 */
.ct-confirm__split {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 2px solid var(--ct-muted-ink);
}
.ct-confirm__row:has(+ .ct-confirm__split) {
  border-bottom: 0;
}
@media all and (max-width: 768px) {
  .ct-confirm__row {
    grid-template-columns: 1fr;
    gap: var(--ct-space-xs);
  }
}
.ct-confirm__label {
  margin: 0;
  font-size: var(--ct-fs-label);
  font-weight: 500;
  color: var(--ct-muted-ink);
}
.ct-confirm__value {
  margin: 0;
  font-size: 1rem;
  color: var(--ct-ink);
  /* 同 .ct-file-name：確認頁的值多是 email／公司名／標準編號，
     break-all 會把它們拆碎，改走 normal + anywhere */
  word-break: normal;
  overflow-wrap: anywhere;
}

/* 個資條款：內容是長篇法律文字，關在可捲動的框裡，
   註冊表單才不會被它撐成好幾個畫面高。字級用 label 級距（14px）——
   這是要看過但不是要細讀的條文，跟表單欄位的正文分開。 */
.ct-privacy {
  max-height: 220px;
  overflow-y: auto;
  padding: var(--ct-space-md);
  background-color: var(--ct-canvas);
  border: 1px solid var(--ct-divider);
  border-radius: var(--ct-radius-sm);
}
.ct-privacy__body {
  font-size: var(--ct-fs-label);
  line-height: 1.8;
  color: var(--ct-muted-ink);
}
.ct-privacy__body > *:first-child { margin-top: 0; }
.ct-privacy__body > *:last-child { margin-bottom: 0; }
.ct-privacy__body p {
  margin: 0 0 var(--ct-space-sm);
}
/* 條款框與底下的「閱讀並同意」之間留一段，勾選框不要黏在框線上。
   註冊頁在 .ct-auth 底下，.ct-form__row 是 display:block（標籤在欄位上方那套），
   grid 的 gap 不生效，同意區這幾項的間距一律靠 margin。 */
.ct-privacy + .ct-check--agree {
  margin-top: var(--ct-space-md);
}
/* 「訂閱電子報」接在「閱讀並同意個資條款」下面：同一組同意事項，
   間距收得比列距小，才讀得出是一組而不是兩件事 */
.ct-check--agree + .ct-check--agree {
  margin-top: var(--ct-space-sm);
}

.ct-check--agree {
  align-items: center;
  font-size: 1rem;
}
.ct-check--agree a {
  color: var(--ct-observatory-red);
  text-decoration: underline;
}

/* 完成頁 */
.ct-done {
  max-width: 46rem;
  padding: var(--ct-space-xl);
  background-color: var(--ct-surface);
  border: 1px solid var(--ct-divider);
  border-radius: var(--ct-radius-md);
}
.ct-done__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 0 var(--ct-space-lg);
  border-radius: 50%;
  background-color: var(--ct-rose-wash);
  color: var(--ct-observatory-red);
  font-size: 1.5rem;
}
.ct-done__title {
  margin: 0 0 var(--ct-space-md);
  font-size: var(--ct-fs-subtitle);
  font-weight: 700;
  color: var(--ct-ink);
}
.ct-done__text {
  margin: 0;
  font-size: var(--ct-fs-body);
  line-height: 1.7;
  color: var(--ct-muted-ink);
}
.ct-done__case {
  margin: var(--ct-space-md) 0 0;
  font-size: var(--ct-fs-label);
  color: var(--ct-muted-ink);
}
/* 失敗版（會員驗證失敗）。不整塊改色——DESIGN.md：狀態不可只靠顏色區分，
   圖示由打勾換成驚嘆號本身就是形狀線索。 */
.ct-done--fail .ct-done__mark {
  color: var(--ct-signal-red);
}

/* 會員驗證結果／重設密碼完成這種只有一段話＋按鈕的終點頁，
   卡片置中即可，不套 .ct-auth（那組會把按鈕變成滿版堆疊）。 */
.ct-done-page .ct-done {
  margin-right: auto;
  margin-left: auto;
}

/* ============================================================
   聯絡我們（規格 §4.12 投影片 33）
   ------------------------------------------------------------
   本站不做表單：一段文案＋一顆連往領導力官網聯絡頁的按鈕。
   ============================================================ */

.ct-contact {
  padding: var(--ct-space-xl) 0 var(--ct-space-section);
}
.ct-contact__text p {
  margin: 0 0 var(--ct-space-sm);
  font-size: var(--ct-fs-body);
  line-height: 1.75;
  color: var(--ct-ink);
}
.ct-contact__text p:last-child {
  margin-bottom: 0;
}
.ct-contact__action {
  margin-top: var(--ct-space-xl);
}
/* 說明文字改成由後台（含區塊編輯器）產生，內容外層會包 bootstrap 的
   .row / .col-*，那層負 margin 會讓這段比頁面其他區塊往左凸 15px。歸零。 */
.ct-contact__text > .row {
  margin-right: 0;
  margin-left: 0;
}
.ct-contact__text > .row > [class*=col-] {
  padding-right: 0;
  padding-left: 0;
}
/* 表單開關打開時才會有。沿用 .ct-form 的卡片與欄位骨架，
   只補跟上方說明文字之間的距離。 */
.ct-contact__form {
  margin-top: var(--ct-space-xl);
}

/* ============================================================
   會員頁（註冊／登入）
   排版骨架參考領導力現行站（isokm）：標籤在欄位上方、左表單右社群、
   中間垂直分隔線、主按鈕滿版、次要連結置中在最下方。
   配色與圓角仍依 DESIGN.md：觀測紅而非亮紅、圓角 6px 不用 pill、
   輸入框填充用霧白畫布，陰影只回應互動狀態。
   ============================================================ */

/* 會員頁（註冊／登入／忘記密碼…）整頁收窄。
   卡片本來就有 max-width（.ct-auth__layout 60rem、單欄版 40rem）且置中，
   但麵包屑與頁面標題吃的是版心，版心拉到 1550 之後就變成
   「標題在最左邊、卡片浮在中間」，兩者對不齊。
   收窄整個 .container，讓標題與卡片切齊同一條左緣，整塊一起置中。
   表單本來就不該拉到 1550 寬——欄位一長排、眼睛要橫掃老遠。 */
.ct-auth .container {
  max-width: 60rem;
}

.ct-auth .page-title {
  display: none;
}

/* 會員頁是單純的表單頁，不需要資料頁那種 headline 級別的大標。
   量測領導力現行站（isokm）的會員頁主標為 34px，這裡取相近值。 */
.ct-auth .ct-page-head__title {
  font-size: 2rem;
  line-height: 1.3;
}
.ct-auth .ct-page-head__desc {
  font-size: 1rem;
}
.ct-auth .ct-page-head {
  margin-bottom: var(--ct-space-lg);
}

/* --- 兩欄：表單 ／ 分隔線 ／ 側欄 --- */
.ct-auth__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px 19rem;
  gap: var(--ct-space-xl);
  align-items: start;
  max-width: 60rem;
  margin: 0 auto var(--ct-space-xl);
  padding: var(--ct-space-xl);
  background-color: var(--ct-surface);
  border: 1px solid var(--ct-divider);
  border-radius: var(--ct-radius-md);
}
@media all and (max-width: 768px) {
  .ct-auth__layout {
    padding: var(--ct-space-lg);
  }
}

/* ============================================================
   版心寬度
   ------------------------------------------------------------
   套版的 .container 最寬到 1320px（Bootstrap 5 的 xxl）。
   領導力官網（isoleader.com.tw）現行是 1550px，本站對齊它——
   同一個客戶的兩個站並排看時，版心寬度不一致最先被看出來。

   1550 對資料頁是好事（表格欄位不用擠、圖表更寬），但**長文會變得難讀**：
   1550px 的行寬換算成中文約 90 幾字一行，眼睛回到行首會找不到位置。
   長文區塊（.ct-article）另外收行寬，見該區塊的註解。
   ============================================================ */

@media (min-width: 1400px) {
  .container {
    max-width: 1550px;
  }
}

/* 隱私權政策這類「一頁長文」的內容區。行寬交給版心，不另設 max-width——
   句子在半路換行看起來像被截斷。 */
.ct-article {
  padding-bottom: var(--ct-space-section);
}
.ct-article h3 {
  margin: var(--ct-space-xl) 0 var(--ct-space-sm);
  font-size: var(--ct-fs-subtitle);
  font-weight: 700;
  color: var(--ct-ink);
}
.ct-article p,
.ct-article li {
  font-size: var(--ct-fs-body);
  line-height: 1.85;
  color: var(--ct-ink);
}
.ct-article ul {
  margin: 0 0 var(--ct-space-md);
  padding-left: 1.4em;
  list-style: disc;
}
/* 區塊編輯器產生的內容外層會包 bootstrap 的 .row/.col-*，負 margin 要歸零 */
.ct-article > .row {
  margin-right: 0;
  margin-left: 0;
}
.ct-article > .row > [class*=col-] {
  padding-right: 0;
  padding-left: 0;
}

/* 單欄版：忘記密碼／重設密碼／重寄驗證信只有一兩個欄位，不需要登入頁那種
   左表單右社群的兩欄，但一樣要是一張置中的卡片。
   卡片必須掛在 .ct-auth__layout 上而不是 .ct-form——.ct-auth .ct-form 會把
   卡片樣式整組拿掉（登入頁的卡是 .ct-auth__layout，.ct-form 只是裡面的欄位組）。
   兩者特異度相同，所以這段必須排在 .ct-auth__layout 之後才蓋得掉它的 grid。 */
.ct-auth__layout--single {
  display: block;
  max-width: 40rem;
}
/* 那條中間分隔線是 ::before 畫的，單欄版沒有右欄可分，要拿掉 */
.ct-auth__layout--single::before {
  display: none;
}
.ct-auth__layout::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  min-height: 100%;
  background-color: var(--ct-divider);
}
/* 明確指定欄位：只靠自動排版時，::before 佔了第 2 欄會把表單擠到第 3 欄 */
.ct-auth__layout > .ct-form {
  grid-column: 1;
  grid-row: 1;
}
.ct-auth__layout > .ct-auth__side {
  grid-column: 3;
  grid-row: 1;
}
@media all and (max-width: 900px) {
  .ct-auth__layout > .ct-form,
  .ct-auth__layout > .ct-auth__side {
    grid-column: 1;
    grid-row: auto;
  }
}
@media all and (max-width: 900px) {
  .ct-auth__layout {
    grid-template-columns: 1fr;
    gap: var(--ct-space-lg);
  }
  .ct-auth__layout::before {
    display: none;
  }
}

/* 表單本體：這裡不再是卡片，邊框交給版面的分隔線處理 */
.ct-auth .ct-form {
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

/* --- 標籤在欄位上方（原站做法） --- */
.ct-auth .ct-form__row {
  display: block;
  margin-bottom: var(--ct-space-lg);
}
.ct-auth .ct-form__label {
  display: block;
  padding-top: 0;
  margin-bottom: var(--ct-space-sm);
  font-size: var(--ct-fs-label);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ct-ink);
}

/* --- 輸入框：淺色填充、細邊框，聚焦才有訊號紅 --- */
.ct-auth .ct-form .form-control {
  height: 44px;
  padding: 10px 14px;
  font-size: 1rem;
  background-color: var(--ct-canvas);
  border: 1px solid transparent;
  border-radius: var(--ct-radius-sm);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ct-auth .ct-form select.form-control {
  height: 44px;
}
.ct-auth .ct-form .form-control:hover {
  background-color: #F1F1F3;
}
.ct-auth .ct-form .form-control:focus {
  background-color: var(--ct-surface);
  border-color: var(--ct-signal-red);
  box-shadow: 0 0 0 3px var(--ct-rose-wash);
  outline: none;
}
.ct-auth .ct-form .form-control::placeholder {
  color: #9A9295;
}

/* 地址列 */
.ct-form__inline {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ct-space-sm);
  margin-bottom: var(--ct-space-sm);
}
@media all and (max-width: 560px) {
  .ct-form__inline {
    grid-template-columns: 1fr;
  }
}

.ct-form .valid-feedback,
.ct-form .invalid-feedback {
  margin-top: var(--ct-space-sm);
  font-size: var(--ct-fs-label);
}

/* --- 主要動作：滿版（原站做法），但用觀測紅與 6px 圓角 --- */
.ct-auth .ct-form__actions {
  display: block;
  margin-top: var(--ct-space-xl);
}
.ct-auth .ct-form__actions .ct-btn--primary {
  display: block;
  width: 100%;
  min-height: 48px;
}

/* --- 次要連結：置中在最下方，中間豎線分隔（原站做法） --- */
.ct-auth__links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--ct-space-md);
  margin-top: var(--ct-space-lg);
}
.ct-auth__links a {
  font-size: var(--ct-fs-label);
  font-weight: 500;
  color: var(--ct-observatory-red);
}
.ct-auth__links a:hover {
  color: var(--ct-archive-red);
  text-decoration: underline;
}
.ct-auth__links span {
  width: 1px;
  height: 1em;
  background-color: var(--ct-divider);
}

/* 表單最上方的引導句（註冊頁的「已經有帳號了？前往登入」）。
   與第一個欄位之間拉開一段，讀起來是表單的前言而不是第一列的標籤。 */
.ct-form__lead-note {
  margin: 0 0 var(--ct-space-lg);
  padding-bottom: var(--ct-space-md);
  border-bottom: 1px solid var(--ct-divider);
  font-size: var(--ct-fs-label);
  line-height: 1.7;
  color: var(--ct-muted-ink);
}
.ct-form__lead-note a {
  color: var(--ct-observatory-red);
  font-weight: 500;
}
.ct-form__lead-note a:hover {
  color: var(--ct-archive-red);
  text-decoration: underline;
}

/* --- 右側欄 --- */
.ct-auth__side {
  padding-top: var(--ct-space-xs);
}
/* 段與段之間的分隔線一律由「後面那一段」負責。
   以前是前一段畫 border-bottom、後一段又畫 border-top，
   中間隔著兩份留白，畫面上就變成莫名其妙的兩條線。 */
.ct-auth__side > * + * {
  margin-top: var(--ct-space-lg);
  padding-top: var(--ct-space-lg);
  border-top: 1px solid var(--ct-divider);
}
/* 表單欄用的 .ct-auth__social 自帶上緣線，進到側欄後由上面那條規則接手 */
.ct-auth__side .ct-auth__social {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
/* 右欄的登入方式鈕一律滿欄寬：Google 鈕本來就是滿版，
   Passkey 鈕若只有內容寬，兩個並列的選項會看起來分了主次 */
.ct-auth__side .ct-auth__social-btns {
  display: block;
}
.ct-auth__side .ct-auth__social-btns > .ct-btn {
  width: 100%;
}
@media all and (max-width: 900px) {
  .ct-auth__side {
    padding-top: var(--ct-space-lg);
    border-top: 1px solid var(--ct-divider);
  }
}

/* --- 密碼顯示切換 --- */
.ct-password {
  position: relative;
}
.ct-password .form-control {
  padding-right: 2.75rem;
}
.ct-password__toggle {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  padding: 4px;
  background: none;
  border: 0;
  color: var(--ct-muted-ink);
  cursor: pointer;
  line-height: 1;
}
.ct-password__toggle:hover,
.ct-password__toggle:focus-visible {
  color: var(--ct-observatory-red);
}

/* --- 第三方登入（目前後台開關未啟用，樣式先備著） --- */
.ct-auth__social {
  margin-top: var(--ct-space-lg);
  padding-top: var(--ct-space-lg);
  border-top: 1px solid var(--ct-divider);
}
.ct-auth__social-title {
  margin: 0 0 var(--ct-space-md);
  font-size: var(--ct-fs-label);
  color: var(--ct-muted-ink);
}
.ct-auth__social-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ct-space-sm);
}
.ct-auth__social-btns .ct-btn i {
  margin-right: 0.4em;
}
.ct-auth__aside {
  margin-top: var(--ct-space-sm);
  font-size: var(--ct-fs-label);
  color: var(--ct-muted-ink);
}
.ct-auth__aside a {
  color: var(--ct-observatory-red);
  font-weight: 500;
}
.ct-auth__error {
  margin: var(--ct-space-sm) 0 0;
  font-size: var(--ct-fs-label);
  color: var(--ct-signal-red);
}

/* ============================================================
   頁首會員區：登入後顯示姓名 + hover 下拉（規格 §3.3／投影片 4）
   hover 時紅底白字；下拉以 hover 與 focus-within 觸發，
   鍵盤操作走 focus-within，不需要 JS。
   ============================================================ */
.ct-userbox {
  position: relative;
}
.ct-userbox__trigger {
  position: relative;   /* 給 hover 底線（::after）定位 */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: none;
  border: 0;
  border-radius: var(--ct-radius-sm);
  font-size: var(--ct-fs-label);
  font-weight: 500;
  color: inherit;
  line-height: 1.6;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ct-userbox__name {
  /* 規格：顯示空間 10 個半形字，超出截斷（截斷已在 PHP 端做，這裡防極端狀況溢出） */
  max-width: 10em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ct-userbox__caret {
  font-size: 0.75em;
  transition: transform .15s ease;
}
/* hover 與主選單同一套語彙：紅字＋滑入展開的紅底線
   （原本是整塊紅底白字，2026-08 客戶回饋改一致） */
.ct-userbox__trigger::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 0;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.15s ease-out;
}
.ct-userbox:hover .ct-userbox__trigger,
.ct-userbox:focus-within .ct-userbox__trigger {
  color: var(--header-link-hover-color, var(--ct-observatory-red));
}
.ct-userbox:hover .ct-userbox__trigger::after,
.ct-userbox:focus-within .ct-userbox__trigger::after {
  transform: scaleX(1);
}
.ct-userbox:hover .ct-userbox__caret,
.ct-userbox:focus-within .ct-userbox__caret {
  transform: rotate(180deg);
}

.ct-userbox__menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1020;
  /* 直向 flex：flex item 會被規範 blockify，套版對 li 下的 inline-block
     （.navi-item ul li）就管不到，項目保證直排 */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 9rem;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background-color: var(--ct-surface);
  border: 1px solid var(--ct-divider);
  border-radius: var(--ct-radius-sm);
  box-shadow: 0 6px 18px rgba(37, 33, 36, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.ct-userbox:hover .ct-userbox__menu,
.ct-userbox:focus-within .ct-userbox__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* 套版 .navi-item ul li 是 inline-block（specificity 0,1,2），
   多疊一層 .ct-userbox 才壓得回直排 */
.ct-userbox .ct-userbox__menu li {
  display: block;
}
/* 前綴 .member-item 是為了壓過套版的 .member-item li a(:hover)：
   它的特異度 (0,2,2) 高於 .ct-userbox__menu a:hover (0,2,1)，
   會把 hover 文字改成品牌紅，紅底紅字整個看不見 */
.member-item .ct-userbox__menu a {
  display: block;
  /* 上下 9px 太擠，拉開到 12px */
  padding: 12px 16px;
  font-size: var(--ct-fs-label);
  font-weight: 500;
  color: var(--ct-ink);
  white-space: nowrap;
}
/* 規格投影片 7：「鼠標指到功能鍵時，功能鍵呈現紅底白字」 */
.member-item .ct-userbox__menu a:hover,
.member-item .ct-userbox__menu a:focus-visible {
  background-color: var(--ct-observatory-red);
  color: var(--ct-surface);
  text-decoration: none;
}

/* --- Google 登入（客戶指定加開；位置與標題參考 isokm 的右欄） --- */
/* 不畫下緣線：側欄的分段線改由 .ct-auth__side > * + * 統一處理，
   這裡再畫一條就會與下一段的上緣線疊成兩條 */
.ct-auth__google {
  margin-bottom: 0;
}
.ct-auth__google-title {
  margin: 0 0 var(--ct-space-md);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ct-ink);
}
/* 依 Google 品牌規範：白底、深色文字、官方彩色 G，不改成品牌紅 */
.ct-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  background-color: var(--ct-surface);
  border: 1px solid var(--ct-divider);
  border-radius: var(--ct-radius-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ct-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ct-google-btn:hover,
.ct-google-btn:focus-visible {
  border-color: var(--ct-muted-ink);
  box-shadow: 0 2px 8px rgba(37, 33, 36, .10);
  color: var(--ct-ink);
  text-decoration: none;
}
.ct-google-btn__mark {
  display: inline-flex;
  flex: 0 0 auto;
}
.ct-auth__google-note {
  margin: var(--ct-space-sm) 0 0;
  font-size: var(--ct-fs-label);
  line-height: 1.6;
  color: var(--ct-muted-ink);
}

/* ============================================================
   全站搜尋結果：分析報告型別
   （common.css 只定義了 article／event／course／product 四種 badge，
     分析報告是 certtrend 專屬型別，樣式一律留在本覆蓋層）
   ============================================================ */
.search-type-report {
  background-color: var(--ct-report-red);
}
/* 無主視覺時沿用報告卡的方格紙補位；placeholder 是 absolute，容器要有定位脈絡 */
.search-item-image--report {
  position: relative;
}
.search-item-image--report .ct-report-card__placeholder {
  gap: 0;
  padding: 0;
}
.search-item-image--report .ct-report-mark {
  width: 40px;
  height: 40px;
  border-width: 1px;
  font-size: 0.8125rem;
}

/* ============================================================
   SweetAlert2 彈窗（站台載的是 v7.32.4，包在 main.min.js 內）
   預設按鈕是 #3085d6 的藍，跟全站深紅完全不搭。

   兩件事讓一般寫法蓋不過去：
     1. swal2 的樣式是執行期由 JS 注入 <head>，排在本檔之後，
        同權重就一定輸 → 選擇器一律加 body 前綴把權重墊高一級。
     2. confirmButtonColor / cancelButtonColor 是寫成 inline style 的，
        權重再高也蓋不掉 → 只有這兩個底色用 !important。
   ============================================================ */
body .swal2-popup {
  border-radius: var(--ct-radius-md);
  font-family: var(--ct-font-family);
}
body .swal2-popup .swal2-title {
  color: var(--ct-ink);
  font-size: var(--ct-fs-subtitle);
  font-weight: 700;
}
body .swal2-popup #swal2-content {
  color: var(--ct-muted-ink);
  font-size: var(--ct-fs-body);
}
body .swal2-popup .swal2-styled {
  height: 44px;
  padding: 0 24px;
  border-radius: var(--ct-radius-sm);
  font-size: var(--ct-fs-body);
  font-weight: 500;
}
body .swal2-popup .swal2-styled.swal2-confirm {
  background-color: var(--ct-observatory-red) !important;
  color: var(--ct-surface);
}
body .swal2-popup .swal2-styled.swal2-confirm:hover {
  background-color: var(--ct-archive-red) !important;
}
body .swal2-popup .swal2-styled.swal2-cancel {
  background-color: var(--ct-surface) !important;
  border: 1px solid var(--ct-divider);
  color: var(--ct-ink);
}
body .swal2-popup .swal2-styled.swal2-cancel:hover {
  border-color: var(--ct-muted-ink);
}
/* v7 的 :focus 是兩層藍色描邊，改成品牌的玫瑰洗色 */
body .swal2-popup .swal2-styled:focus {
  box-shadow: 0 0 0 3px var(--ct-rose-wash);
  outline: none;
}