/* ==========================================================================
   V3 升級覆蓋層（2026-09-19）
   --------------------------------------------------------------------------
   定位：不改動 style.css / components.css 任何一行，全部以「新增組件
   ＋ 針對性覆蓋」完成。原版設計系統（海軍藍 #002454 ＋ 青綠 #00B4C0、
   尖角 2–6px、單一強調色）原樣保留。

   圖示哲學：「資訊圖」，不是「線框流程圖」——
   實底色塊、圖標、三層文字（標題／說明／標籤）、連接是色帶不是髮絲線。

   動效哲學：漸進增強。CSS 預設「靜態完整可見」；JS 才加 .v3-armed
   武裝 class，武裝後先隱再依序浮現。無 JS／jsdom／減少動態時，
   圖形保持完整靜態 —— 內容永遠不會因為動效沒跑而消失。
   ========================================================================== */


/* --------------------------------------------------------------------------
   修正一：Hero 信任錨文字太淺（原版在白底上用了近白的灰）
   -------------------------------------------------------------------------- */
.hero .trust > li > span { color: var(--ink-500); }
.hero .trust > li > b { color: var(--ink-900); }


/* --------------------------------------------------------------------------
   修正二：整屏模式下「內容少的區段」垂直居中
   業主 2026-09-18 指定整屏翻頁保留；但內容只有半屏時底部會留一大塊
   空白（#strengths 約 400px、#forms 約 600px）。讓內容在區段裡
   垂直居中，空白平均分攤到上下，觀感立即改善。
   -------------------------------------------------------------------------- */
@media (min-width: 861px) {
  body.snap main > section.section > .container {
    min-height: calc(100vh - 192px);   /* 扣掉區段上下 padding 96px×2 */
    min-height: calc(100svh - 192px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* 內容本身就超過一屏的區段（dtt／notices／news／business），
     維持從頂部開始排，不被強行撐高 */
  body.snap main > section#dtt > .container,
  body.snap main > section#notices > .container,
  body.snap main > section#news > .container,
  body.snap main > section#business > .container {
    min-height: 0;
    display: block;
  }
}


/* ==========================================================================
   組件一：全齡段貫通路徑圖（#strengths 區段，白底）
   一條由左至右的路徑帶，四個學段節點；每個節點是實底色塊：
   羅馬數字徽章 ＋ 學段名 ＋ 對接標準 ＋ 項目入口。
   ========================================================================== */
.pathway {
  margin-top: var(--sp-7);
  padding: var(--sp-6);
  background: linear-gradient(135deg, #F6FBFC 0%, #EFF6FB 100%);
  border: 1px solid #DDE9F2;
  border-radius: 6px;
}
.pathway__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5);
}
.pathway__title {
  font-size: 20px; font-weight: 700; color: var(--ink-900); letter-spacing: .01em;
}
.pathway__desc { font-size: 13.5px; color: var(--ink-500); max-width: 46em; }
.pathway__rail {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4);
  list-style: none; margin: 0; padding: 0; position: relative;
}
.pathway__stage {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #D8E6EE;
  border-top: 3px solid var(--accent-500);
  border-radius: 6px;
  padding: 18px 16px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
/* 節點之間的箭頭（最後一個不出現） */
.pathway__stage:not(:last-child)::after {
  content: "";
  position: absolute; top: 50%; right: calc(var(--sp-4) * -1 - 1px);
  width: var(--sp-4); height: 2px;
  background: var(--accent-500);
  transform: translateY(-50%);
}
.pathway__stage:not(:last-child)::before {
  content: "";
  position: absolute; top: 50%; right: calc(var(--sp-4) * -1 - 5px);
  border: 5px solid transparent;
  border-left-color: var(--accent-500);
  transform: translateY(-50%);
  z-index: 1;
}
.pathway__num {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; color: var(--accent-500);
}
.pathway__stage b { font-size: 17px; color: var(--ink-900); }
.pathway__stage .pathway__sub { font-size: 13px; color: var(--ink-500); }
.pathway__std {
  margin-top: 6px; padding-top: 10px;
  border-top: 1px dashed #D8E6EE;
  font-size: 12.5px; color: var(--ink-700); font-weight: 600;
}
.pathway__std::before {
  content: "認證對接"; display: block;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; color: var(--ink-500); margin-bottom: 3px;
}
.pathway__prog {
  font-size: 12.5px; color: var(--accent-700); font-weight: 600;
}
.pathway__prog::before {
  content: "項目入口"; display: block;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; color: var(--ink-500); margin-bottom: 3px;
}
@media (max-width: 900px) {
  .pathway__rail { grid-template-columns: 1fr 1fr; }
  .pathway__stage::before, .pathway__stage::after { display: none; }
}
@media (max-width: 560px) {
  .pathway__rail { grid-template-columns: 1fr; }
  .pathway { padding: var(--sp-4); }
}


/* ==========================================================================
   組件二：流程條（#forms 三步／join 四步／assessment 四步／contact 三步）
   大圓形徽章（羅馬數字）＋ 標題 ＋ 說明，節點之間是色帶。
   深底（.section--brand／.section--ink）與淺底通用，用 .flowsteps--onDark 切換。
   ========================================================================== */
.flowsteps {
  margin-top: var(--sp-7);
  display: grid; gap: var(--sp-5);
  list-style: none; padding: 0;
}
.flowsteps--3 { grid-template-columns: repeat(3, 1fr); }
.flowsteps--4 { grid-template-columns: repeat(4, 1fr); }
.flowsteps__item {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 22px 20px;
  background: #FFFFFF;
  border: 1px solid #DDE9F2;
  border-radius: 6px;
}
.flowsteps__item:not(:last-child)::after {
  content: "→";
  position: absolute; top: 34px; right: calc(var(--sp-5) * -1 + 2px);
  font-size: 18px; color: var(--accent-500); font-weight: 700; z-index: 1;
}
.flowsteps__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: var(--accent-500);
  color: #FFFFFF;
  font-family: var(--font-mono); font-size: 15px; font-weight: 700;
  letter-spacing: .04em;
  border-radius: 6px;
}
.flowsteps__item b { font-size: 16.5px; color: var(--ink-900); }
.flowsteps__item p { font-size: 13.5px; color: var(--ink-500); margin: 0; line-height: 1.65; }
/* 深底版本：卡片改半透明深藍、文字轉白 */
.flowsteps--onDark .flowsteps__item {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .18);
}
.flowsteps--onDark .flowsteps__item b { color: #FFFFFF; }
.flowsteps--onDark .flowsteps__item p { color: rgba(255, 255, 255, .72); }
.flowsteps--onDark .flowsteps__item:not(:last-child)::after { color: var(--accent-500); }
@media (max-width: 900px) {
  .flowsteps--3, .flowsteps--4 { grid-template-columns: 1fr 1fr; }
  .flowsteps__item::after { display: none; }
}
@media (max-width: 560px) {
  .flowsteps--3, .flowsteps--4 { grid-template-columns: 1fr; }
}


/* ==========================================================================
   組件三：AICA 五級能力階梯（standards 頁）
   五級台階由低到高，每級是實底色塊，高度遞增 —— 「越往上越高」
   不需要讀文字就看得出來。第一級最淺、第五級海軍藍實底。
   ========================================================================== */
.ladder {
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: var(--sp-3);
  list-style: none; padding: 0;
}
.ladder__step {
  border-radius: 6px 6px 0 0;
  padding: 16px 14px 14px;
  display: flex; flex-direction: column; gap: 6px;
  color: var(--ink-900);
}
.ladder__step:nth-child(1) { background: #E9F6F7; min-height: 120px; }
.ladder__step:nth-child(2) { background: #CDEDEF; min-height: 160px; }
.ladder__step:nth-child(3) { background: #9CDDE2; min-height: 200px; }
.ladder__step:nth-child(4) { background: #4FC3CC; min-height: 240px; }
.ladder__step:nth-child(5) { background: var(--accent-500); min-height: 280px; color: #FFFFFF; }
.ladder__step:nth-child(5) .ladder__lv { color: rgba(255, 255, 255, .75); }
.ladder__step:nth-child(5) p { color: rgba(255, 255, 255, .85); }
.ladder__lv {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; color: var(--accent-700);
}
.ladder__step b { font-size: 15.5px; line-height: 1.35; }
.ladder__step p { font-size: 12.5px; line-height: 1.6; color: var(--ink-700); margin: 0; }
@media (max-width: 900px) {
  .ladder { grid-template-columns: 1fr; align-items: stretch; }
  .ladder__step { min-height: 0 !important; border-radius: 6px; }
}


/* ==========================================================================
   組件四：三主體協同圖（about 頁，淺底）
   上排兩張「資源方」卡 ＋ 中間匯聚到 DTT（海軍藍實底大卡）＋
   下排三類受益者。圖講關係、卡講全名（機構全名只出現在下方機構卡，
   不在圖內 —— 守住「全站一次」紅線）。
   ========================================================================== */
.coop { margin-top: var(--sp-6); }
.coop__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
}
.coop__src {
  background: #F2F8FB;
  border: 1px solid #DDE9F2;
  border-left: 3px solid var(--accent-500);
  border-radius: 6px;
  padding: 16px 18px;
}
.coop__src .coop__role {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; color: var(--accent-700); margin-bottom: 5px;
}
.coop__src b { font-size: 15.5px; color: var(--ink-900); display: block; }
/* 匯集帶：兩條色帶往下接到 DTT */
.coop__join {
  display: flex; justify-content: center; gap: 18%;
  padding: 6px 0;
}
.coop__join i {
  width: 2px; height: 26px; background: var(--accent-500); display: block;
}
.coop__join i:first-child { transform: rotate(14deg); transform-origin: top; }
.coop__join i:last-child { transform: rotate(-14deg); transform-origin: top; }
.coop__hub {
  background: var(--ink-900);
  border-radius: 6px;
  padding: 22px 24px;
  text-align: center;
  color: #FFFFFF;
}
.coop__hub .coop__role {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; color: var(--accent-500); margin-bottom: 6px;
}
.coop__hub b { font-size: 20px; letter-spacing: .02em; }
.coop__hub p { font-size: 13px; color: rgba(255, 255, 255, .72); margin: 8px auto 0; max-width: 40em; }
.coop__out {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4);
}
.coop__out span {
  text-align: center;
  padding: 12px 10px;
  background: #FFFFFF;
  border: 1px solid #DDE9F2;
  border-radius: 6px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-700);
}
@media (max-width: 720px) {
  .coop__row, .coop__out { grid-template-columns: 1fr; }
  .coop__join { display: none; }
}


/* ==========================================================================
   組件五：成果流向圖（projects 頁）
   培養 → 測評 → 認證 → 發表與轉化：四個實底節點 ＋ 箭頭色帶，
   末段「發表與轉化」用海軍藍實底收束 —— 終點感。
   ========================================================================== */
.flowline {
  margin-top: var(--sp-6);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4);
  list-style: none; padding: 0;
}
.flowline__node {
  position: relative;
  background: #F2F8FB;
  border: 1px solid #DDE9F2;
  border-radius: 6px;
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.flowline__node:not(:last-child)::after {
  content: "";
  position: absolute; top: 50%; right: calc(var(--sp-4) * -1 - 1px);
  width: var(--sp-4); height: 2px; background: var(--accent-500);
  transform: translateY(-50%);
}
.flowline__node:not(:last-child)::before {
  content: "";
  position: absolute; top: 50%; right: calc(var(--sp-4) * -1 - 5px);
  border: 5px solid transparent; border-left-color: var(--accent-500);
  transform: translateY(-50%); z-index: 1;
}
.flowline__node--end {
  background: var(--ink-900); border-color: var(--ink-900); color: #FFFFFF;
}
.flowline__num {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .08em; color: var(--accent-500);
}
.flowline__node b { font-size: 16.5px; color: var(--ink-900); }
.flowline__node p { font-size: 13px; color: var(--ink-500); margin: 0; line-height: 1.6; }
.flowline__node--end b { color: #FFFFFF; }
.flowline__node--end p { color: rgba(255, 255, 255, .75); }
@media (max-width: 900px) {
  .flowline { grid-template-columns: 1fr 1fr; }
  .flowline__node::before, .flowline__node::after { display: none; }
}
@media (max-width: 560px) {
  .flowline { grid-template-columns: 1fr; }
}


/* ==========================================================================
   動效（漸進增強）：JS 加 .v3-armed 後，子項依序浮現。
   沒有 .v3-armed 時一切靜態完整可見 —— 這條規矩不能反過來寫。
   ========================================================================== */
.pathway.v3-armed .pathway__stage,
.flowsteps.v3-armed .flowsteps__item,
.ladder.v3-armed .ladder__step,
.coop.v3-armed .coop__src,
.coop.v3-armed .coop__hub,
.coop.v3-armed .coop__out span,
.flowline.v3-armed .flowline__node {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}
.pathway.v3-armed.is-in .pathway__stage,
.flowsteps.v3-armed.is-in .flowsteps__item,
.ladder.v3-armed.is-in .ladder__step,
.coop.v3-armed.is-in .coop__src,
.coop.v3-armed.is-in .coop__hub,
.coop.v3-armed.is-in .coop__out span,
.flowline.v3-armed.is-in .flowline__node {
  opacity: 1;
  transform: none;
}
.pathway.v3-armed .pathway__stage:nth-child(2),
.flowsteps.v3-armed .flowsteps__item:nth-child(2),
.ladder.v3-armed .ladder__step:nth-child(2),
.flowline.v3-armed .flowline__node:nth-child(2) { transition-delay: .08s; }
.pathway.v3-armed .pathway__stage:nth-child(3),
.flowsteps.v3-armed .flowsteps__item:nth-child(3),
.ladder.v3-armed .ladder__step:nth-child(3),
.flowline.v3-armed .flowline__node:nth-child(3) { transition-delay: .16s; }
.pathway.v3-armed .pathway__stage:nth-child(4),
.flowsteps.v3-armed .flowsteps__item:nth-child(4),
.ladder.v3-armed .ladder__step:nth-child(4),
.flowline.v3-armed .flowline__node:nth-child(4) { transition-delay: .24s; }
.ladder.v3-armed .ladder__step:nth-child(5) { transition-delay: .32s; }
.coop.v3-armed .coop__hub { transition-delay: .18s; }
.coop.v3-armed .coop__out span:nth-child(2) { transition-delay: .3s; }
.coop.v3-armed .coop__out span:nth-child(3) { transition-delay: .38s; }
@media (prefers-reduced-motion: reduce) {
  .pathway.v3-armed .pathway__stage,
  .flowsteps.v3-armed .flowsteps__item,
  .ladder.v3-armed .ladder__step,
  .coop.v3-armed .coop__src,
  .coop.v3-armed .coop__hub,
  .coop.v3-armed .coop__out span,
  .flowline.v3-armed .flowline__node {
    opacity: 1; transform: none; transition: none;
  }
}

/* ============================================================== 行業動態跑馬燈
   開源引擎：AcmeTicker（acmeticker.min.js，MIT，零依賴）。
   本段只做 Blueprint 視覺層；動畫機制由庫以 inline style 處理。
   規範：WCAG 2.2.2（pause on hover/focus）、prefers-reduced-motion 降為靜態清單。 */
.ai-ticker{
  display: flex;
  align-items: stretch;
  background: var(--brand-700);
  color: #fff;
  border-top: 1px solid var(--accent-500);
  /* 固定頂條：緊貼 nav 下方，永遠在視線內（解決 footer 埋住看不到的問題） */
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  z-index: 999;
  /* 用 --font-sans（CJK 字體排最前）：拉丁與中文同用雅黑渲染，標籤與條目字級真正一致。
     若用 --font-mono，拉丁走等寬、中文落回雅黑，兩套字高不同 → 一大一小（業主 2026-09-20 回報） */
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
}
/* 字級防禦性統一：標籤與條目一律 13px，不依賴繼承（業主 2026-09-20 回報跑版） */
.ai-ticker__label,
.ai-ticker__list,
.ai-ticker__item,
.ai-ticker__item a{
  font-size: 13px;
}
.ai-ticker__label{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 0 16px;
  color: var(--accent-500);
  /* 字重/字距與條目一致，僅用青色區分——粗體＋全中文 vs 常體＋英數會渲染出 20% 高度差 */
  font-weight: 400;
  letter-spacing: normal;
  white-space: nowrap;
  border-right: 1px solid rgba(255, 255, 255, .22);
}
.ai-ticker__viewport{
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;            /* marquee 容器必須裁剪，否則無邊界 */
  height: 42px;
}
.ai-ticker__list{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
  height: 42px;
  white-space: nowrap;
}
.ai-ticker__item{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 30px;
  position: relative;
}
.ai-ticker__item + .ai-ticker__item::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 14px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .25);
}
.ai-ticker__item a{
  color: #fff;
  text-decoration: none;
}
.ai-ticker__item a:hover,
.ai-ticker__item a:focus-visible{
  color: var(--accent-500);
  text-decoration: underline;
}
/* prefers-reduced-motion：不滾動，改為可換行靜態清單（WCAG 2.2.2） */
.ai-ticker__viewport.ai-ticker--static{
  height: auto;
  overflow: visible;
}
.ai-ticker__viewport.ai-ticker--static .ai-ticker__list{
  flex-wrap: wrap;
  height: auto;
  padding: 8px 0;
}
.ai-ticker__viewport.ai-ticker--static .ai-ticker__item{
  height: auto;
  padding: 4px 18px;
}
.ai-ticker__viewport.ai-ticker--static .ai-ticker__item::before{
  display: none;
}
/* 小螢幕：標籤縮短、帶高自適應 */
@media (max-width: 640px){
  .ai-ticker__label{ padding: 0 12px; font-size: 12px; }
  .ai-ticker__viewport{ height: 40px; }
  .ai-ticker__list,
  .ai-ticker__item{ height: 40px; }
}

/* ===== FONTS: self-hosted Noto Sans SC/TC (auto-generated) ===== */

/* ==========================================================================
   自託管思源黑體（Noto Sans SC / TC）· SIL OFL 1.1，明確允許商業使用
   --------------------------------------------------------------------------
   兩級子集 + unicode-range：
     core = 本站靜態內容用字（保證 UI／正文 100% 命中）
     ext  = GB2312 常用字（覆蓋現代中文 99.7%，只在頁面真的用到時才下載）
   授權：https://scripts.sil.org/OFL
   ========================================================================== */