/* ==========================================================================
   匯智數科 官網 · 內頁與表單元件
   載入順序：style.css → components.css（後者為主，可覆蓋前者）
   方向同 style.css：「藍圖／Blueprint」—— 尖角、髮絲線、等寬標籤、單一強調色
   ========================================================================== */

/* ==========================================================================
   1. 內頁頁首（Page Hero）
   ========================================================================== */

.page-hero {
  position: relative;
  padding: calc(var(--header-h) + 60px) 0 56px;
  background:
    radial-gradient(720px 400px at 88% 4%, rgba(0, 180, 192, .18) 0%, transparent 62%),
    linear-gradient(158deg, var(--brand-900) 0%, var(--brand-700) 50%, #0B3C72 100%);
  color: rgba(255, 255, 255, .82);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 90% 84% at 30% 16%, #000 20%, transparent 74%);
  -webkit-mask-image: radial-gradient(ellipse 90% 84% at 30% 16%, #000 20%, transparent 74%);
  pointer-events: none;
}
/* 左緣青綠短尺：與首頁面板同一個語彙 */
.page-hero::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent-500) 0%, rgba(0, 180, 192, .12) 72%, transparent 100%);
}

.page-hero__inner { position: relative; z-index: 2; max-width: 840px; }

.page-hero h1 {
  color: var(--white);
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.18;
  margin-bottom: var(--sp-4);
  letter-spacing: -.03em;
}
.page-hero__lead {
  font-size: clamp(15px, 1.25vw, 16.5px);
  line-height: 1.88;
  color: rgba(255, 255, 255, .76);
  max-width: 700px;
}
.page-hero .eyebrow { color: var(--accent-300); }
.page-hero .eyebrow::before { background: var(--accent-400); }

/* 官方英文名：掛在 h1 底下，比 lead 更輕一階 */
.page-hero__en {
  font-family: var(--font-mono);
  /* ★ 2026-11-02（官網工單 V-21）：原 12.5px 小於全站可見文字下限（13.5px），
     且只出現在 teen-lab／engineer／ambassador 三頁 ⇒ 看起來像「別家的頁」。
     提到 13.5px 與 eyebrow 對齊。 */
  font-size: 13.5px;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .56);
  margin: calc(-1 * var(--sp-3)) 0 var(--sp-4);
}

.page-hero__actions { margin-top: var(--sp-6); display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ---- 麵包屑 ---- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .52);
  margin-bottom: var(--sp-3);
}
/* 麵包屑的字很小，但「可點區」不能跟著小 —— 用 padding 把觸控區撐到 44px */
.breadcrumb a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  /* 「首頁」只有兩個字，寬度約 25px —— 高度滿了、寬度不夠，手指一樣點不到 */
  min-width: 44px;
  padding: 0 var(--sp-2);
  transition: var(--transition);
}
.breadcrumb a:hover { color: var(--accent-300); }
.breadcrumb__sep { opacity: .45; }
.breadcrumb [aria-current] { color: var(--accent-300); font-weight: 600; }

/* ==========================================================================
   2. 內文排版（Prose）
   ========================================================================== */

.prose > * + * { margin-top: var(--sp-5); }
.prose h2 {
  font-size: clamp(22px, 2.3vw, 30px);
  margin-top: var(--sp-8);
  padding-top: var(--sp-2);
  letter-spacing: -.025em;
}
.prose h3 { font-size: clamp(18px, 1.7vw, 21px); margin-top: var(--sp-7); }
.prose h4 { font-size: 16.5px; margin-top: var(--sp-6); color: var(--ink-900); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }

.prose p { color: var(--ink-500); line-height: 1.9; font-size: 15.5px; }
.prose strong { color: var(--ink-900); }

.prose ul, .prose ol { display: flex; flex-direction: column; gap: var(--sp-3); }
.prose ul > li {
  position: relative;
  padding-left: var(--sp-6);
  color: var(--ink-500);
  line-height: 1.85;
  font-size: 15px;
}
.prose ul > li::before {
  content: "";
  position: absolute;
  left: 4px; top: 10px;
  width: 8px; height: 2px;
  background: var(--accent-500);
}
/* 有序清單同樣不用阿拉伯數字（全站靜態版面零數字規則）；
   改用青綠短尺標記，視覺語彙與 ul 一致 */
.prose ol { counter-reset: none; }
.prose ol > li {
  position: relative;
  padding-left: var(--sp-6);
  color: var(--ink-500);
  line-height: 1.85;
  font-size: 15px;
}
.prose ol > li::before {
  content: "";
  position: absolute;
  left: 4px; top: 10px;
  width: 8px; height: 2px;
  background: var(--brand-700);
}

.prose blockquote {
  margin: 0;
  padding: var(--sp-5) var(--sp-6);
  border-left: 3px solid var(--accent-500);
  background: var(--ink-050);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--ink-700);
  font-size: 15.5px;
  line-height: 1.85;
}

.prose--center { max-width: 800px; margin: 0 auto; }

/* ---- 兩欄圖文 ---- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--sp-8);
  align-items: start;
}
.split--reverse > :first-child { order: 2; }
.split--mid { align-items: center; }

.split__aside {
  background: var(--ink-050);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

/* ==========================================================================
   3. 提示框（Callout）：左側 3px 色條，比整塊填色更克制
   ========================================================================== */

.callout {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-sm);
  border: 1px solid var(--ink-200);
  border-left-width: 3px;
  background: var(--ink-050);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ink-700);
}
.callout__icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 3px;
  color: var(--ink-500);
}
.callout__icon svg { width: 100%; height: 100%; }
.callout__body > * + * { margin-top: var(--sp-2); }
.callout strong { color: var(--ink-900); display: block; }

.callout--info { background: var(--info-bg); border-color: var(--info-line); border-left-color: var(--info); }
.callout--info .callout__icon { color: var(--info); }
.callout--warn { background: var(--warn-bg); border-color: var(--warn-line); border-left-color: var(--warn); }
.callout--warn .callout__icon { color: var(--warn); }
.callout--ok { background: var(--ok-bg); border-color: var(--ok-line); border-left-color: var(--ok); }
.callout--ok .callout__icon { color: var(--ok); }
.callout--pending { background: var(--pending-bg); border-color: var(--pending-line); border-left-color: var(--pending); }
.callout--pending .callout__icon { color: var(--pending); }
.callout--pending code { background: rgba(91, 59, 184, .1); }

.callout code {
  font-family: var(--font-mono);
  font-size: .88em;
  background: rgba(10, 21, 36, .07);
  padding: 1px 6px;
  border-radius: var(--r-sm);
}

/* ==========================================================================
   4. 卡片變體
   ========================================================================== */

.card--flat { background: var(--ink-050); border-color: var(--ink-200); }
.card--flat::before { display: none; }
.card--flat:hover { transform: none; box-shadow: none; border-color: var(--ink-300); }

.card--link { display: block; }
.card--link .card__more {
  margin-top: var(--sp-5);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent-700);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.card--link .card__more::after { content: "→"; transition: var(--transition); }
.card--link:hover .card__more::after { transform: translateX(4px); }

/* 可點擊卡片（用 <a> 當容器時，避免連結色與底線外露） */
a.card--link { color: inherit; text-decoration: none; }
a.card--link h3 { color: var(--ink-900); }
a.card--link:hover h3 { color: var(--brand-700); }
a.card--link:focus-visible { outline: 2px solid var(--accent-700); outline-offset: 3px; }

/* ★ 2026-11-02（官網工單 V-18，業主選擇「整張卡可點、移除卡片按鈕」）：
   原本 14 張產品卡各帶一顆「報名與諮詢」，全部指向同一頁 contact.html
   ⇒ 同一頁 14 個一模一樣的入口，使用者分不出差別，也讓「同頁同名主 CTA」爆量。
   ⇒ 卡片**整張可點**：在卡片內放一個空連結鋪滿整張卡（stretched link）。
   ★ 為什麼不把 `<article>` 直接改成 `<a>`：那會丟掉 article 的語意（卡片是一則獨立內容），
     而且 `<a>` 內含 `<h3>`／多個 `<p>` 時，讀屏會把整段唸成一個連結名稱。
   ★ 為什麼保留 `<article>` 又用空連結：空連結的可訪問名稱由 aria-label 提供
     （「報名與諮詢：產品名」），讀屏聽到的是「報名與諮詢：少年科創實驗班」而不是整段文案。
   ★ `.card` 本身已有 `position: relative`（style.css:966），所以這裡只鋪 inset，不動版面。 */
.card__hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  /* 讓 hover 效果仍由外層 .card:hover 觸發（hover 會向上傳遞給祖先） */
}
/* outline-offset 用負值：`.card` 是 overflow:hidden，正值會被裁掉看不到焦點框 */
.card__hit:focus-visible {
  outline: 2px solid var(--accent-700);
  outline-offset: -4px;
  border-radius: inherit;
}

.card__tag {
  display: inline-block;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  background: var(--accent-100);
  color: var(--accent-700);
  border: 1px solid #BFE9EE;
  margin-bottom: var(--sp-4);
}
.card__tag--ink { background: var(--ink-100); color: var(--ink-500); border-color: var(--ink-200); }

/* ---- 三大主體 ---- */
.entity {
  position: relative;
  padding: var(--sp-7) var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--ink-200);
  transition: border-color var(--transition), box-shadow var(--transition),
              transform var(--transition);
  overflow: hidden;
}
.entity::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--brand-rule);
}
.entity:hover { box-shadow: var(--sh-lg); transform: translateY(-3px); border-color: var(--ink-300); }
.entity__role {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-700);
  margin-bottom: var(--sp-3);
}
.entity h3 { font-size: 19.5px; margin-bottom: var(--sp-3); color: var(--ink-900); }
.entity p { font-size: 14.5px; color: var(--ink-500); line-height: 1.82; }

/* ---- 流程步驟 ---- */
.steps { display: flex; flex-direction: column; gap: 0; }
.step {
  position: relative;
  display: flex;
  gap: var(--sp-5);
  padding-bottom: var(--sp-7);
}
.step:last-child { padding-bottom: 0; }
.step::before {
  content: "";
  position: absolute;
  left: 21px; top: 46px; bottom: 0;
  width: 2px;
  background: var(--ink-200);
}
.step:last-child::before { display: none; }
.step__num {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  background: var(--brand-700);
  color: var(--white);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
  position: relative;
  z-index: 2;
}
/* 圓形標記內改放圖示（全站零阿拉伯數字） */
.step__num--ico { font-size: 0; }
.step__num--ico svg { width: 20px; height: 20px; }

.step__body { padding-top: 5px; }
.step__body h3 { font-size: 17.5px; margin-bottom: var(--sp-2); color: var(--ink-900); }
.step__body p { font-size: 14.5px; color: var(--ink-500); line-height: 1.82; }

/* ---- 時間軸 ---- */
.timeline {
  border-left: 1px solid var(--ink-200);
  padding-left: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.timeline__item { position: relative; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--sp-6) - 5px);
  top: 6px;
  width: 9px; height: 9px;
  border-radius: var(--r-sm);
  background: var(--accent-500);
  box-shadow: 0 0 0 3px var(--white), 0 0 0 4px var(--ink-200);
}
.timeline__when {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-700);
}
.timeline__what { font-size: 16px; font-weight: 700; color: var(--ink-900); margin: 3px 0 var(--sp-2); }
.timeline__desc { font-size: 14px; color: var(--ink-500); line-height: 1.82; }

/* ==========================================================================
   5. 表格（規格表 / 對照表）
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ink-200);
  border-radius: var(--r-sm);
  background: var(--white);
  -webkit-overflow-scrolling: touch;
}
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.tbl th, .tbl td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ink-200); }
.tbl thead th {
  background: var(--ink-050);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-700);
  white-space: nowrap;
  border-bottom: 1px solid var(--ink-200);
}
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: var(--ink-050); }
.tbl td code, .tbl th code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--ink-100);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  color: var(--ink-700);
}
.tbl--compact th, .tbl--compact td { padding: 9px 13px; font-size: 13.5px; }

/* ---- 標籤 ---- */
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--r-sm);
  background: var(--ink-100);
  color: var(--ink-700);
  line-height: 1.45;
}
.tag--brand { background: var(--accent-100); color: var(--accent-700); border: 1px solid #BFE9EE; }
.tag--ok { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-line); }
.tag--warn { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-line); }
.tag--pending { background: var(--pending-bg); color: var(--pending); border: 1px solid var(--pending-line); }

/* ---- 資料列（鍵值）---- */
.kv { display: flex; flex-direction: column; gap: 0; }
.kv__row {
  display: flex;
  gap: var(--sp-4);
  padding: 12px 0;
  border-bottom: 1px solid var(--ink-200);
  font-size: 14.5px;
}
.kv__row:last-child { border-bottom: none; }
.kv__k { flex: 0 0 132px; color: var(--ink-500); font-size: 13.5px; font-weight: 600; }
.kv__v { flex: 1; color: var(--ink-700); }
.kv__v strong { color: var(--ink-900); }

/* ==========================================================================
   6. FAQ（原生 details，免 JS）
   ========================================================================== */

.faq { display: flex; flex-direction: column; gap: var(--sp-2); }
.faq__item {
  border: 1px solid var(--ink-200);
  border-radius: var(--r-sm);
  background: var(--white);
  overflow: hidden;
  transition: var(--transition);
}
.faq__item[open] { border-color: var(--accent-500); box-shadow: var(--sh-sm); }
.faq__q {
  cursor: pointer;
  padding: var(--sp-5);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink-900);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 400;
  color: var(--accent-700);
  line-height: 1.2;
  transition: transform var(--transition);
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__a { padding: 0 var(--sp-5) var(--sp-5); font-size: 14.5px; color: var(--ink-500); line-height: 1.9; }

/* ==========================================================================
   7. 留白佔位（素材未到位處）
   ========================================================================== */

.ph {
  border: 1px dashed var(--ink-300);
  border-radius: var(--r-lg);
  padding: var(--sp-7) var(--sp-6);
  text-align: center;
  background: var(--ink-050);
}
.ph__title { font-size: 14.5px; font-weight: 700; color: var(--ink-700); margin-bottom: var(--sp-2); }
.ph__note { font-size: 13.5px; color: var(--ink-500); line-height: 1.8; max-width: 620px; margin: 0 auto; }
.ph__tag {
  display: inline-block;
  margin-bottom: var(--sp-4);
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  background: var(--warn-bg);
  color: var(--warn);
  border: 1px solid var(--warn-line);
}

/* ==========================================================================
   8. 表單元件
   ========================================================================== */

.form-shell { display: grid; grid-template-columns: minmax(0, 1fr) 306px; gap: var(--sp-7); align-items: start; }
.form-main { min-width: 0; }

.form-aside {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  background: var(--ink-050);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.form-aside h3 {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-700);
  margin-bottom: var(--sp-4);
}
.form-aside .kv__k { flex: 0 0 84px; }

/* ---- 進度條（多步驟）---- */
.progress { margin-bottom: var(--sp-6); }
.progress__track {
  height: 4px;
  border-radius: var(--r-sm);
  background: var(--ink-200);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  width: 0;
  border-radius: var(--r-sm);
  background: var(--brand-rule);
  transition: width .35s var(--ease);
}
.progress__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--ink-500);
}
.progress__step-name { font-weight: 600; color: var(--ink-900); }

/* ---- 分步頁籤 ---- */
.stepper { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }
.stepper__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--r-sm);
  background: var(--ink-100);
  color: var(--ink-500);
  border: 1px solid var(--ink-200);
}
.stepper__item.is-done { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.stepper__item.is-current { background: var(--brand-700); color: var(--white); border-color: var(--brand-700); }
.stepper__n {
  width: 18px; height: 18px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .26);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
}
.stepper__item.is-done .stepper__n { background: rgba(14, 122, 62, .16); }
.stepper__item:not(.is-current):not(.is-done) .stepper__n { background: rgba(10, 21, 36, .07); }

/* ---- 欄位 ---- */
.fieldset { border: none; padding: 0; margin: 0 0 var(--sp-6); }
.fieldset__legend {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-900);
  padding: 0 0 var(--sp-3);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--ink-200);
  width: 100%;
}

.field { margin-bottom: var(--sp-5); }
.field__label {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: var(--sp-2);
  line-height: 1.6;
}
.field__req { color: var(--danger); font-size: 13px; }
.field__opt { color: var(--ink-500); font-size: 12.5px; font-weight: 400; }
.field__hint { font-size: 12.5px; color: var(--ink-500); margin-top: 6px; line-height: 1.7; }
.field__label-lang {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink-500);
  margin-top: 1px;
}

.input, .select, .textarea {
  width: 100%;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink-700);
  background: var(--white);
  border: 1.5px solid var(--ink-300);
  border-radius: var(--r-sm);
  transition: var(--transition);
  line-height: 1.6;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent-500);
  box-shadow: 0 0 0 3px rgba(0, 180, 192, .18);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-500); opacity: .75; }
.textarea { min-height: 112px; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2355657A' stroke-width='1.8' stroke-linecap='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.field.is-error .input,
.field.is-error .select,
.field.is-error .textarea { border-color: var(--danger); background: var(--danger-bg); }
.field__error {
  display: none;
  margin-top: 6px;
  font-size: 13px;
  color: var(--danger);
  font-weight: 600;
}
.field.is-error .field__error { display: block; }

/* ---- 選擇群（radio / multi）---- */
.choices { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.choice {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 9px 14px;
  border: 1.5px solid var(--ink-300);
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--ink-700);
  cursor: pointer;
  transition: var(--transition);
  background: var(--white);
  user-select: none;
}
.choice:hover { border-color: var(--accent-500); background: var(--ink-050); }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice__box {
  width: 17px; height: 17px;
  border: 1.5px solid var(--ink-300);
  background: var(--white);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: var(--transition);
}
.choice__box--radio { border-radius: 50%; }
.choice__box--check { border-radius: var(--r-sm); }
.choice__box svg { width: 11px; height: 11px; opacity: 0; color: var(--white); transition: var(--transition); }
.choice input:checked ~ .choice__box { background: var(--brand-700); border-color: var(--brand-700); }
.choice input:checked ~ .choice__box svg { opacity: 1; }
.choice:has(input:checked) {
  border-color: var(--brand-700);
  background: var(--accent-100);
  color: var(--brand-700);
  font-weight: 600;
}
.choice input:focus-visible ~ .choice__box { outline: 2px solid var(--accent-700); outline-offset: 2px; }

/* ---- 同意欄 ---- */
.consent {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-5);
  border: 1.5px solid var(--ink-300);
  border-radius: var(--r-sm);
  background: var(--white);
  cursor: pointer;
  transition: var(--transition);
}
.consent:has(input:checked) { border-color: var(--brand-700); background: var(--accent-100); }
.consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--brand-700); flex-shrink: 0; }
.consent__text { font-size: 14px; color: var(--ink-700); line-height: 1.8; }
.consent__text a { color: var(--accent-700); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.field.is-error .consent { border-color: var(--danger); background: var(--danger-bg); }

/* ---- 金額區間 ---- */
.range { display: flex; align-items: center; gap: var(--sp-3); }
.range .input { flex: 1; min-width: 0; }
.range__sep { color: var(--ink-500); flex-shrink: 0; }

/* ---- 重複區塊 ---- */
.repeat { display: flex; flex-direction: column; gap: var(--sp-3); }
.repeat__row {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--ink-200);
  border-left: 3px solid var(--accent-500);
  border-radius: var(--r-sm);
  background: var(--ink-050);
}
.repeat__row .input, .repeat__row .select { background: var(--white); }
.repeat__del {
  flex-shrink: 0;
  /* 外觀是 32px 的方框，但手指的目標要 44px（WCAG 2.5.8 也要求 ≥24）。
     這裡直接把方框撐到 44，✕ 靠 place-items 維持置中。 */
  width: 44px; height: 44px;
  min-width: 44px; min-height: 44px;
  border-radius: var(--r-sm);
  color: var(--ink-500);
  display: grid;
  place-items: center;
  transition: var(--transition);
}
.repeat__del:hover { background: var(--danger-bg); color: var(--danger); }
.repeat__add {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  /* 外框維持原本的高度，但手指的目標要滿 44px —— 表單裡這種「＋ 新增一項」
     是會被連點的按鈕，點歪一次就多一組欄位。 */
  min-height: 44px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent-700);
  border: 1px dashed #7FCFD8;
  border-radius: var(--r-sm);
  transition: var(--transition);
}
.repeat__add:hover { background: var(--accent-100); border-style: solid; }

/* ---- 停用（第一期不開放）---- */
.field--disabled { opacity: .62; position: relative; }
.field--disabled .input,
.field--disabled .select,
.field--disabled .textarea,
.field--disabled .consent { background: var(--ink-100); cursor: not-allowed; }
.field__blocked {
  margin-top: var(--sp-2);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--r-sm);
  background: var(--warn-bg);
  color: var(--warn);
  border: 1px solid var(--warn-line);
}

/* ---- 表單動作列 ---- */
.form-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--ink-200);
  margin-top: var(--sp-7);
}
.form-actions__spacer { margin-left: auto; }

/* ---- 結果面板 ---- */
.result {
  border-radius: var(--r-lg);
  border: 1px solid var(--ink-200);
  padding: var(--sp-8) var(--sp-7);
  text-align: center;
  background: var(--white);
}
.result__icon {
  width: 64px; height: 64px;
  margin: 0 auto var(--sp-5);
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--ok-bg);
  color: var(--ok);
}
.result__icon svg { width: 32px; height: 32px; }
.result h2 { font-size: 23px; margin-bottom: var(--sp-3); color: var(--ink-900); }
.result p { color: var(--ink-500); line-height: 1.85; font-size: 15px; max-width: 540px; margin: 0 auto; }
.result__actions { margin-top: var(--sp-7); display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

.result--error .result__icon { background: var(--danger-bg); color: var(--danger); }
.result--warn .result__icon { background: var(--warn-bg); color: var(--warn); }

/* ---- 骨架／載入 ---- */
.skeleton { display: flex; flex-direction: column; gap: var(--sp-5); }
.sk-line {
  height: 14px;
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--ink-100) 25%, var(--ink-200) 37%, var(--ink-100) 63%);
  background-size: 400% 100%;
  animation: sk 1.4s ease infinite;
}
.sk-line--title { height: 26px; width: 42%; }
.sk-line--short { width: 66%; }
.sk-box { height: 46px; border-radius: var(--r-sm); background: var(--ink-100); }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .sk-line { animation: none; } }

/* ---- 模式提示條 ---- */
.modebar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-5);
  border-radius: var(--r-sm);
  border: 1px solid var(--ink-200);
  border-left-width: 3px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .02em;
  margin-bottom: var(--sp-6);
  background: var(--ink-050);
  color: var(--ink-700);
}
.modebar__dot { width: 8px; height: 8px; border-radius: var(--r-sm); background: var(--ink-400); flex-shrink: 0; }
.modebar--live { background: var(--ok-bg); border-color: var(--ok-line); border-left-color: var(--ok); color: #0A5C2F; }
.modebar--live .modebar__dot { background: var(--ok); }
.modebar--demo { background: var(--warn-bg); border-color: var(--warn-line); border-left-color: var(--warn); color: #744004; }
.modebar--demo .modebar__dot { background: var(--warn); }
.modebar__detail { margin-left: auto; font-size: 12px; opacity: .85; }

/* ---- 表單中心的卡片格（深底區塊裡放白卡）---- */
.forms-grid > .modebar { grid-column: 1 / -1; margin-bottom: 0; }
.forms-grid__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--sp-4);
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--ink-500);
}
.section--brand .card h3 { color: var(--ink-900); }
.section--brand .card p { color: var(--ink-500); }
.section--brand .card__more { color: var(--accent-700); }

/* ==========================================================================
   9. 響應式補充
   ========================================================================== */

@media (max-width: 1080px) {
  .form-shell { grid-template-columns: 1fr; }
  .form-aside { position: static; }
  .split { grid-template-columns: 1fr; gap: var(--sp-6); }
  .split--reverse > :first-child { order: 0; }
  .split__aside { position: static; }
}

@media (max-width: 860px) {
  .page-hero { padding: calc(var(--header-h) + 40px) 0 48px; }
  .step::before { left: 19px; }
  .step__num { width: 40px; height: 40px; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn { width: 100%; }
  .form-actions__spacer { margin-left: 0; }
  .kv__row { flex-direction: column; gap: 2px; }
  .kv__k { flex: none; }
  .result { padding: var(--sp-7) var(--sp-5); }
}

@media (max-width: 560px) {
  .choices { flex-direction: column; }
  .choice { width: 100%; }
  .range { flex-direction: column; align-items: stretch; }
  .range__sep { display: none; }
  .stepper { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--sp-2); }
  .stepper__item { flex-shrink: 0; }
  .timeline { padding-left: var(--sp-5); }
  .timeline__item::before { left: calc(-1 * var(--sp-5) - 5px); }
}

/* ==========================================================================
   10. 內容欄位（site/assets/js/site-content.js 動態填入）
   ========================================================================== */

/* hidden 屬性一律生效 —— 槽位填了要能真的收起佔位塊 */
[hidden] { display: none !important; }

.card__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ink-500);
  line-height: 1.8;
}
.kv__v a { color: var(--brand-700); text-decoration: underline; text-underline-offset: 3px; }
.kv__v a:hover { color: var(--accent-700); }

.prose-stack { display: flex; flex-direction: column; gap: var(--sp-6); }
.legal-eff {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--ink-500);
}
.legal-sec h3 { font-size: 17px; color: var(--ink-900); margin-bottom: var(--sp-3); }
.legal-sec p { font-size: 15px; color: var(--ink-500); line-height: 1.9; }
.legal-sec p + p { margin-top: var(--sp-4); }

/* ==========================================================================
   12. HIID 三主體（★ 2026-11-05 業主：DTTA → HIID → DTT，城大為學術支撐）
   ========================================================================== */
.entity { display: flex; flex-direction: column; }
.entity__go { margin-top: auto; padding-top: var(--sp-4); font-size: 14px; font-weight: 600; color: var(--accent-700); }
.entity__go a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.entity__go a:hover { color: var(--brand-700); }
.entity--link { text-decoration: none; transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); }
.entity--link:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); border-color: var(--accent-500); }
.entity--link .entity__go { color: var(--brand-700); }
.entity--link:focus-visible, .entity__go a:focus-visible { outline: 2px solid var(--accent-500); outline-offset: 3px; }
/* ★ 學術支撐是「橫條」不是第四張卡：淺底＋左側細線，視覺層級明顯低於卡片 */
.entity-support {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin-top: var(--sp-5); padding: 14px 20px;
  background: var(--ink-050); border: 1px solid var(--ink-200);
  border-left: 3px solid var(--accent-500); border-radius: var(--r-sm);
}
.entity-support__k { font: 600 12px/1.4 var(--font-mono); letter-spacing: .1em; color: var(--accent-700); white-space: nowrap; }
.entity-support__v { font-size: 14.5px; color: var(--ink-600); line-height: 1.75; }
@media (max-width: 600px) { .entity-support { gap: 8px; } }

/* ==========================================================================
   11. 公告區 / 熱點新聞 / 微信二維碼（內容槽位擴充）
   ========================================================================== */

/* --- 公告區（首頁・預設區） --- */
/* ★ 2026-11-02（V-12 配套）：上內距 64 → 40。公告區上方緊接前一屏，
   64px 在 2 欄後變成明顯的空檔；收一級不影響閱讀節奏。 */
.notices { padding: var(--sp-6) 0 var(--sp-6); }
.placeholder-block--inline { padding: var(--sp-6); }

/* ★ 2026-11-02（官網工單 V-12，業主選擇「改 2 欄」）：
   原本 `.notice-list` 是單欄 flex，6 張公告卡全寬堆疊 ⇒ 實測 `.notices` 高 **1,817px**
   （1440×900 下等於 2.2 個螢幕），與業主「一個版面看清楚一件事」直接衝突。
   ⇒ 桌機（≥861px）改 2 欄：6 張變 3 列，高度約 950px，一屏能看到 4 則。
   ★ 用 grid 而非 flex-wrap：兩欄等寬、卡片不會因為標題長短而寬窄不一。
   ★ 手機維持單欄（窄螢幕 2 欄會讓標題擠成 3 行，反而更難讀）。
   ★ 沒有用 `max-height`＋`overflow` 截斷——工單明文禁止，內容一條都不能少。 */
.notice-list { display: flex; flex-direction: column; gap: var(--sp-3); }
@media (min-width: 861px) {
  .notice-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* ★ 2026-11-05（HIID 工單 Step 1）：拿掉 align-items:start。
       同列兩張卡原本各自收縮 ⇒ 高度參差、「了解更多」浮在中間。
       grid 預設 stretch 讓同列等高；CTA 再由下方 margin-top:auto 沉底。 */
  }
}

.notice {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-left: 3px solid var(--ink-300);
  border-radius: var(--r-sm);
  /* ★ 2026-11-02（V-12 配套）：內距由 24/32 收到 16/24。
     2 欄後每張卡寬度剩 590px，原本的 32px 左右內距在窄卡上比例過重；
     收一級後每張省 16px 高、並多出 16px 文字寬度（少換一次行）。
     ★ 只動內距，不動字級、不截斷內容。 */
  padding: var(--sp-4) var(--sp-5);
}
.notice--important { border-left-color: var(--brand-700); }
.notice--link { transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition); }
.notice--link:hover {
  box-shadow: var(--sh-lg);
  transform: translateY(-2px);
  border-color: var(--ink-300);
  border-left-color: var(--accent-500);
}

.notice__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.notice__date { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-500); }
.notice__flag {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--white);
  background: var(--brand-700);
  border-radius: var(--r-sm);
  padding: 2px 9px;
}
.notice__title { font-size: 16.5px; color: var(--ink-900); margin-bottom: var(--sp-2); }
.notice__body { font-size: 14.5px; line-height: 1.85; color: var(--ink-500); }
.notice .card__more { display: inline-block; margin-top: auto; padding-top: var(--sp-3); color: var(--accent-700); font-size: 13.5px; font-weight: 600; }

/* --- 微信公眾號二維碼 --- */
.qr {
  margin: var(--sp-6) 0 0;
  padding: var(--sp-5);
  background: var(--ink-050);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-lg);
  text-align: center;
}
.qr img {
  display: block;
  width: 176px;
  height: 176px;
  margin: 0 auto var(--sp-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--ink-200);
  background: var(--white);
  padding: 6px;
}
.qr__cap { font-size: 13px; line-height: 1.7; color: var(--ink-500); }

/* --- 公告看板（首頁）：單列可點，點進 notice.html?id= 看摘要 --- */
.notice--board {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
}
.notice--board .notice__date { flex: 0 0 auto; width: 82px; }
.notice__cat {
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--accent-700);
  border: 1px solid var(--accent-500);
  border-radius: var(--r-sm);
  padding: 1px 8px;
  white-space: nowrap;
}
.notice--board .notice__title {
  flex: 1 1 auto;
  margin-bottom: 0;
  font-size: 15.5px;
  line-height: 1.55;
}
.notice__go {
  flex: 0 0 auto;
  color: var(--accent-700);
  font-weight: 600;
  font-size: 14px;
  transition: transform var(--transition);
}
.notice--link:hover .notice__go { transform: translateX(4px); }

/* --- 公告詳情頁（notice.html） --- */
.nt__meta { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.nt__summary { max-width: 74ch; }
.nt__summary p { font-size: 16px; line-height: 1.95; color: var(--ink-600); }
.nt__summary p + p { margin-top: var(--sp-4); }
.nt__photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}
.nt__photos figure { margin: 0; }
.nt__photos img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--ink-100);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-sm);
}
.nt__photos figcaption { font-size: 12.5px; line-height: 1.6; color: var(--ink-500); margin-top: var(--sp-2); }
.nt__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-8);
  /* 「回公告看板」是這頁唯一的出口，別讓它只有一行字的高度 */
  min-height: 44px;
  padding: 0 var(--sp-2);
  margin-left: calc(var(--sp-2) * -1);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-700);
}
.nt__more { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--ink-200); }
.nt__more-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); }
.nt__more-list a {
  display: flex; align-items: center; min-height: 44px;
  font-size: 14.5px; color: var(--ink-600);
}
.nt__more-list a:hover { color: var(--accent-700); }

@media (max-width: 760px) {
  .nt__photos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .notice { padding: var(--sp-4) var(--sp-5); }
  .notice__head { flex-wrap: wrap; }
  .notice--board { flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
  .notice--board .notice__date { width: auto; }
  .notice--board .notice__title { flex: 1 1 100%; }
  .nt__photos { grid-template-columns: 1fr; }
}

/* ==========================================================================
   12. 字型層歸屬（最後一層，決定誰用等寬字）
   --------------------------------------------------------------------------
   規則很簡單，但很容易做錯：
     ★ 等寬字層（--font-mono）只給「確定是拉丁字元」的內容用。
       中文強制走等寬字會 fallback 回系統中文字型，留下的只有「被拉開的字距」
       ＋「被縮小的字級」—— 中文標籤會因此變得又小又散。
   所以下列類別在繁中／簡中語系下裝的是中文，一律拉回中文字型層：
     .hero__badge 研究 × 智庫 × 落地    .footer h3 服務／關於／聯絡
     .biz__tag   業務總綱                .fcard__who 個人客戶
     .card__tag  政策動態／行業觀察      .ph__tag    場次待上線
     .notice__flag 重要                  .breadcrumb 首頁 › 關於匯智
     .entity__role／.timeline__when／.progress__meta／.modebar／
     .forms-grid__meta／.legal-eff／.form-aside h3
   維持等寬字的（內容本質是拉丁／數字）：
     .eyebrow(Notice) .dtt__en(Deliver) .card__en .fcard__meta(consultation)
     .card__meta／.notice__date／.legal-eff 以外的日期 .field__label-lang
     .stepper__n(步驟數字) .lang__btn .hero__cap(Deliver / Trust / Tech)
   ========================================================================== */

.hero__badge,
.footer h3,
.biz__tag,
.fcard__who,
.card__tag,
.ph__tag,
.notice__flag {
  font-family: var(--font-sans);
  letter-spacing: .03em;
  text-transform: none;
}

.hero__badge { font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.footer h3 { font-size: 13.5px; font-weight: 700; letter-spacing: .04em; text-transform: none; }
.biz__tag { font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.fcard__who { font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.card__tag { font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.ph__tag { font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.notice__flag { font-size: 12px; font-weight: 700; letter-spacing: .03em; }

.breadcrumb { font-family: var(--font-sans); font-size: 12.5px; letter-spacing: .01em; }
.entity__role { font-family: var(--font-sans); font-size: 13px; letter-spacing: .05em; }
.timeline__when { font-family: var(--font-sans); font-size: 12.5px; letter-spacing: .03em; }
.progress__meta { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; }
.modebar { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; }
.modebar__detail { font-family: var(--font-sans); font-size: 12.5px; }
.forms-grid__meta { font-family: var(--font-sans); font-size: 12.5px; letter-spacing: 0; }
.legal-eff { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; }
.form-aside h3 {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

/* ==========================================================================
   14. 合作單位 logo 牆（.logo-wall / .plogo）
   來源＝合作單位官方 logo 原檔（2026-09-18 業主定：logo 直接放，授權皆已取得）。
   規則：
     - 只放機構 logo，不放個人肖像。
     - 對外表述一律中性：「過往合作與支持機構」——不聲稱單一合作性質
       （同一批機構可能是主辦／支持／贊助／參與，性質不一）。
     - 機構性質未經確認者不寫副標（不編造）。
     - 預設灰階統一視覺，hover 恢復原色（12 個不同色系的 logo 直接並排會很雜）。
   ========================================================================== */

.logo-wall {
  display: flex;
  flex-wrap: wrap;
  background: var(--white);
  /* 格線由每格自畫右／下 1px 線 → 最後一行排不滿時，空位仍是白的（不會露出灰格） */
  border: 1px solid var(--ink-200);
  border-right: 0;
  border-bottom: 0;
}

.plogo {
  flex: 1 1 196px;
  min-width: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  min-height: 158px;
  padding: var(--sp-6) var(--sp-4);
  background: var(--white);     /* 純白：白底 logo（政府／商協會原檔）才能無縫 */
  border-right: 1px solid var(--ink-200);
  border-bottom: 1px solid var(--ink-200);
  text-align: center;
  text-decoration: none;
}

.plogo__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 60px;
}

.plogo__frame img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(.72);
  transition: filter .28s var(--ease), transform .28s var(--ease);
}

/* 滑過整面牆就全體上色（避免只有單格彩色、其餘灰的突兀感） */
.logo-wall:hover .plogo__frame img { filter: grayscale(0) opacity(1); }
.plogo:hover .plogo__frame img { transform: scale(1.06); }

.plogo__name {
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .01em;
  color: var(--ink-700);
}

@media (max-width: 560px) {
  .plogo {
    flex: 1 1 140px;
    min-width: 116px;
    min-height: 126px;
    padding: var(--sp-5) var(--sp-3);
    gap: var(--sp-3);
  }
  .plogo__frame { height: 44px; }
  .plogo__name { font-size: 12px; }
}

/* 深底區塊用：白卡改為品牌深底，logo 需自帶淺色版本才適用 */
.section--ink .logo-wall {
  background: var(--brand-800);
  border-color: rgba(255, 255, 255, .16);
  border-right: 0;
  border-bottom: 0;
}
.section--ink .plogo { background: var(--brand-800); border-color: rgba(255, 255, 255, .16); }
.section--ink .plogo__name { color: var(--ink-100); }

/* ==========================================================================
   15. 清單展開／收起鈕（首頁限量清單用）
   ========================================================================== */
.list-more {
  display: block;
  margin: var(--sp-6) auto 0;
  min-height: 44px;
  padding: 11px 30px;
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-700);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.list-more:hover {
  border-color: var(--accent-500);
  color: var(--brand-800);
  background: var(--ink-050);
}
.list-more:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}
.list-more::after { content: ""; }
.list-more:not(.is-open)::after { content: " ↓"; }   /* 展開：向下 */
.list-more.is-open::after { content: " ↑"; }         /* 收起：向上 */

/* ==========================================================================
   13. 窄螢幕減重：清單型元件在手機上改成「兩行式」
   --------------------------------------------------------------------------
   同一則公告，桌機上是一行（日期｜分類｜標題），手機寬度只剩 342px，
   硬排成一行會讓標題被擠成三行、每則高達 135px。改成「日期＋分類」一行、
   標題獨佔一行，資訊沒少，六則的高度少掉兩成。
   ========================================================================== */

@media (max-width: 640px) {
  .notice--board {
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
  }
  .notice--board .notice__date { width: auto; }
  .notice--board .notice__cat { order: 2; }
  .notice--board .notice__title { flex: 1 1 100%; order: 3; }
  .notice--board .notice__go { order: 4; margin-left: auto; }

  /* 新聞條列：整列就是連結，手機上不需要再掛一個「了解更多」。
     ★ 改成固定柵格：第一行「來源｜日期（靠右）」，第二行標題。
     原本是 flex-wrap + flex-basis:260px —— 標題短時日期被擠上第一行、
     標題長時又掉到第二行，同一份清單裡日期位置忽上忽下，看起來就是「列歪掉」。 */
  .news-rows .card:not(:first-child) {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: var(--sp-1) var(--sp-2);
    padding: var(--sp-3) 0;
  }
  .news-rows .card:not(:first-child) .card__tag { grid-column: 1; grid-row: 1; }
  .news-rows .card:not(:first-child) .card__meta {
    grid-column: 2; grid-row: 1; text-align: right; font-size: 12px;
  }
  .news-rows .card:not(:first-child) h3 { grid-column: 1 / -1; grid-row: 2; }
  .news-rows .card:not(:first-child) .card__more { display: none; }
}

/* ==========================================================================
   14. 全站公告跑馬燈（頁首下方）
   --------------------------------------------------------------------------
   內容複製兩份、整條往左推一份的寬度（translateX -50%），第一份捲出去時
   第二份正好接上，看起來就是無限循環。速度由 JS 依內容寬度算（每秒 60px），
   所以字多不會變飛快。
   ========================================================================== */

.marquee {
  background: var(--brand-700);
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  overflow: hidden;
}
.marquee__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 44px;
}
.marquee__tag {
  flex-shrink: 0;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--brand-700);
  background: var(--accent-500);
  border-radius: var(--r-sm);
}
.marquee__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll var(--mq-dur, 24s) linear infinite;
}
.marquee__group { display: flex; align-items: center; }
/*★★★ 2026-10-05 修「兩份 group 交界處文字疊在一起」
   ★ 背景：site-content-render.js 的 renderMarquee 把同一組 item **複製兩份**
     （第二份 aria-hidden、★ 純視覺、★ 做出無縫循環），兩份是 flex 的兄弟節點。
   ★ 症狀（★ 截圖實測）：★ 捲動中交界處文字互相疊字（★ 28 item、相鄰 27 對中 1 對重疊）。

   ★★★ 為什麼用 padding-right 而不是 margin-left（★ 這裡有個數學陷阱）：
     動畫是 translateX(-50%)，★ 「無縫」的前提是 ★ **兩份 group 等寬**
     （移動半個 track ＝ 剛好一個 group 的寬度、★ 第二份正好接上第一份的位置）。
     ⇒ 若只給第二份加 margin-left：★ 兩份不等寬 ⇒ ★ 位移量對不上、★ 循環會跳動。
     ⇒ ★ 所以間距必須 ★ 兩份都加、★ 且加在「不影响內容寬度計算」的位置。

   ★ 修法：★ 每份 group 都加 padding-right（★ 內容寬度不變、★ 但兩份 box 等寬）
     ⇒ 位移量正確、★ 接縫處有 26px 間距、★ ★ 不再疊字。*/
.marquee__group {
  padding-right: var(--sp-5);
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 14px;
  color: rgba(255, 255, 255, .92);
  text-decoration: none;
  white-space: nowrap;
}
.marquee__item::after {
  content: "\00B7";
  margin: 0 var(--sp-5);
  color: rgba(255, 255, 255, .45);
}
a.marquee__item:hover { color: var(--accent-300); text-decoration: underline; }

/* 滑鼠移入、鍵盤停留、或按下暫停鈕 —— 三種情況都停（WCAG 2.2.2） */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track,
.marquee.is-paused .marquee__track { animation-play-state: paused; }

.marquee__pause {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  padding: 0;
  color: rgba(255, 255, 255, .82);
  background: none;
  border: 0;
  cursor: pointer;
}
.marquee__pause:hover { color: var(--accent-300); }
.marquee__icon { width: 18px; height: 18px; }
.marquee__icon--play { display: none; }
.marquee__pause[aria-pressed="true"] .marquee__icon--pause { display: none; }
.marquee__pause[aria-pressed="true"] .marquee__icon--play { display: block; }

/*★★★ 2026-10-05 標籤統一：兩條跑馬燈的標籤**等寬**（業主裁定）
   ★ 業主原話：「把這兩個功能改為同一個格式，尤其是這個標題（公告、行業動態 AI今日要聞）要相等長度」
   ★ 原本：公告條是青色藥丸（約 48px）、AI 條是純青字（約 150px）⇒ ★ 差 3 倍
     ⇒ ★ 兩條的新聞**起始位置對不齊**，看起來像兩個沒關係的東西。
   ★ 用 min-width 而不是把文字改等長：★ 換語言（繁／簡／EN）時標籤寬度才不會又跑掉。 */
.marquee__tag {
  min-width: 104px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/*★★★ 2026-10-05 面板版（首頁「AI 要聞」）：貼在 hero 深藍面板的底部
   ★ 為什麼貼底部：業主裁定「把今日要聞移到面板底部」。★ 實測面板底部本來就有 163px 空白帶
     （白色 logo 承板只佔中段）⇒ ★ 這條等於不佔任何新空間。
   ★ 為什麼用絕對定位、而不是改 .hero__panel 的排版模式：
     ★ 面板是 `display:grid; place-items:center`（白卡置中靠它）⇒ ★ 改 flex 會連置中一起動。
     ★ 絕對定位只**加一條**、不動既有版面 ⇒ ★ 對既有 hero 是零風險。 */
.marquee--panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  border-top: 1px solid rgba(255, 255, 255, .18);
  border-bottom: 0;
  background: rgba(6, 26, 52, .82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.marquee--panel .marquee__inner { min-height: 46px; }
/* 面板只有 650px 寬 ⇒ 遮罩收斂一點，否則頭尾字被吃掉太多 */
.marquee--panel .marquee__viewport {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
}
@media (max-width: 860px) {
  /* 手機：hero 變單欄、面板變矮 ⇒ 讓白卡多留底部空間，不壓到那條跑馬燈 */
  .hero__panel:has(.marquee--panel) { padding-bottom: 84px; }
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  /* 系統說不要動 → 不捲，改成可以自己橫向滑 */
  .marquee__track { animation: none; }
  .marquee__viewport { overflow-x: auto; }
}

@media (max-width: 640px) {
  .marquee__inner { gap: var(--sp-3); }
  .marquee__item { font-size: 13px; }
}

/* ==========================================================================
   15. 合作單位 banner（三格，尺寸一致）
   ========================================================================== */

.banner-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-5);
}
.banner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 96px;
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: var(--transition);
}
a.banner:hover { border-color: var(--brand-700); transform: translateY(-2px); }
.banner__img {
  flex-shrink: 0;
  width: 120px; height: 60px;
  object-fit: contain;
  background: var(--ink-050);
}
.banner__body { min-width: 0; }
.banner__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.5;
}
.banner__note {
  margin-top: 2px;
  font-size: 13px;
  color: var(--ink-500);
}

/* 預留那一列跟真 banner 用同一個網格，才看得出日後會佔多大 */
.banner-row--ghost .banner { box-shadow: none; }

/* 還沒素材時的預留格：虛線框，讓業主一眼看到「這裡要放什麼」 */
.banner--empty {
  justify-content: center;
  min-height: 96px;
  border-style: dashed;
  border-color: var(--ink-300);
  background: var(--ink-050);
  font-size: 13px;
  color: var(--ink-400);
}

@media (max-width: 860px) {
  .banner-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   16. 線上客服（右下角浮標）
   ========================================================================== */

.chatbot {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-3);
}
.chatbot[hidden] { display: none; }

.chatbot__fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  padding: 0;
  color: var(--white);
  background: var(--brand-700);
  border: 1px solid var(--brand-600);
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(0, 20, 45, .22);
  cursor: pointer;
}
.chatbot__fab svg { width: 26px; height: 26px; }
.chatbot__fab:hover { background: var(--brand-600); }

.chatbot__panel {
  display: flex;
  flex-direction: column;
  width: min(360px, calc(100vw - 32px));
  max-height: min(520px, calc(100vh - 120px));
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  box-shadow: 0 12px 40px rgba(0, 20, 45, .18);
  overflow: hidden;
}
.chatbot__panel[hidden] { display: none; }

.chatbot__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--brand-700);
  color: var(--white);
}
.chatbot__title { font-size: 15px; font-weight: 600; }
.chatbot__status {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .78);
}
.chatbot__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin: -10px -14px -10px 0;
  padding: 0;
  color: rgba(255, 255, 255, .85);
  background: none;
  border: 0;
  cursor: pointer;
}
.chatbot__close svg { width: 20px; height: 20px; }
.chatbot__close:hover { color: var(--accent-300); }

.chatbot__log {
  flex: 1 1 auto;
  padding: var(--sp-4) var(--sp-5);
  overflow-y: auto;
  background: var(--ink-050);
}
.chatbot__msg {
  max-width: 88%;
  margin-bottom: var(--sp-3);
  padding: 9px 13px;
  font-size: 14px;
  line-height: 1.7;
  border-radius: var(--r-md);
}
.chatbot__msg--bot {
  margin-right: auto;
  background: var(--white);
  border: 1px solid var(--ink-200);
  color: var(--ink-700);
}
.chatbot__msg--me {
  margin-left: auto;
  background: var(--brand-700);
  color: var(--white);
}
.chatbot__msg--sys {
  margin-right: auto;
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  color: var(--warn);
  font-size: 13px;
}

.chatbot__form {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--ink-200);
  background: var(--white);
}
.chatbot__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--sp-4);
  font-family: inherit;
  font-size: 15px;
  color: var(--ink-900);
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-sm);
}
.chatbot__input:focus { outline: 2px solid var(--accent-500); outline-offset: 1px; }
.chatbot__send {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 var(--sp-5);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  background: var(--brand-700);
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.chatbot__send:hover { background: var(--brand-600); }


/* ==========================================================================
   切換式版面（Tabs）—— 每頁以標籤切換取代長下拉
   設計：尖角、1px 髮絲線、等寬標籤、單一強調色 #00B4C0
   a11y：tablist / tab / tabpanel role ＋ 鍵盤方向鍵 ＋ roving tabindex
   ========================================================================== */

/* tab 外層容器：about.html 用手寫 .tabs，產生器輸出 .tabset，二者同義 */
.tabset, .tabs { margin-top: var(--sp-5); }

/* ★ 2026-11-01（官網工單 V-03，第三版——前兩版都錯，記在這裡免得再走一次）
   ── 第一版：把 `.tabset` 掛上 `container` ⇒ ①`.tabpanel` 內層又有 `.container`，
      正文被推到 x=124（差一格）②面板內的 `.section--ink` 從滿版變成 1192 寬的灰帶。
   ── 第二版：補 `.tabpanel > .section > .container` 與 `.section--ink` 的 50vw breakout
      ⇒ 前者結構是三層、寫錯層級命中 0 個；後者用 `50vw` 會多吃滾動條寬，反而溢出 8px。
   ── 第三版（現行）：**不改結構**。`.tabset` 維持滿版（面板內原本就有正確的 `.container`），
      只讓「分頁列」用 padding 對齊內容軸 —— 一條規則同時解決對齊、嵌套、滿版色帶三件事。
   ⇒ 內容軸＝`--container`（style.css:91，1240px）置中；窄螢幕時退回一般內距，不會擠成 0。 */
.tablist {
  padding-inline: max(var(--sp-5), calc((100% - var(--container)) / 2 + var(--sp-5)));
}

.tablist {
  display: flex;
  gap: 0;
  margin: 0 0 var(--sp-6);
  /* ★ padding 只留左右（上面那條 `.tablist` 規則給的內容軸對齊）；★ 不可寫 `padding: 0`
     ——同特異度、後者勝，會把對齊整個蓋掉（本輪實測：首顆標籤 x=0，就是被這行吃掉的）。 */
  padding-top: 0;
  padding-bottom: 0;
  /* ★ 2026-11-01（V-03 回修，第二版）：**取消**容器上的單一底線。
     原因：換行後那條線畫在整個區塊的最下方（第二列之下），而作用中的標籤在第一列，
     它的 2px 青線就浮在半空中（實測落差 52px；英文 3 列時 104px）——就是「兩條線」。
     ⇒ 改成「底線由每顆標籤自己畫」，這樣線永遠貼在自己的那一列。 */
  border-bottom: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* ★ 2026-11-01：放不下就換行（原本靠 overflow-x + 隱藏滾動條把標籤藏到右邊，
     使用者不知道還有；V-03 對齊進容器後可用寬度更窄，藏得更多）。 */
  flex-wrap: wrap;
}
.tablist::-webkit-scrollbar { display: none; }

.tab {
  appearance: none;
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  background: none;
  border: 0;
  /* ★ 2026-11-01：底線由標籤自己畫（原為容器 1px + 標籤 2px 透明，換行後會浮空）。
     非作用中＝淺灰（維持原本「有一條線」的觀感），作用中＝青色。 */
  border-bottom: 2px solid var(--ink-200);
  font: 500 15px/1 var(--font-mono);
  letter-spacing: .02em;
  color: var(--ink-700);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.tab:hover { color: var(--ink-900); border-bottom-color: var(--ink-300); }
.tab.is-active {
  color: var(--accent-700);
  border-bottom-color: var(--accent-500);
}
.tab:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: -2px;
}

.tabpanel { animation: tabIn .25s var(--ease); }
.tabpanel[hidden] { display: none; }
@keyframes tabIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tabpanel { animation: none; }
}

.tabs__lead {
  max-width: 46em;
  margin: 0 0 var(--sp-6);
  color: var(--ink-700);
  font-size: 15.5px;
  line-height: 1.85;
}

/* --------------------------------------------------------------------------
   手機（≤640px）：標籤改成「可換行的卡片」，不再橫向滑動。
   原因：一頁常有 5–8 個標籤，橫向滑動等於把其中 5–6 個藏起來 ——
   而 .tablist 的滾動條本來就被隱藏，手機使用者根本不知道右邊還有東西。
   改成卡片換行後全部可見；順便把高度撐到 44px 的觸控門檻。
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .tablist {
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 6px;
    border-bottom: 0;
    margin-bottom: var(--sp-5);
  }
  .tab {
    /* 原本 flex:1 1 auto → 每個標籤寬度隨字數長短不一，換行後參差不齊，
       加上長標籤被 nowrap 截斷，整個標籤列看起來就是歪的。
       改成「固定兩欄、等寬」：短標籤不會虛胖，長標籤有自己的整行，
       落單的那一個（奇數個時）自動撐滿整列。 */
    flex: 1 1 calc(50% - 3px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    padding: 10px 12px;
    background: var(--white);
    border: 1px solid var(--ink-200);
    border-radius: var(--r-sm);
    font-size: 13.5px;
    line-height: 1.3;
    white-space: normal;
    text-align: center;
  }
  .tab.is-active {
    background: var(--accent-100);
    border: 1px solid var(--accent-500);
  }
}

/* ================================================== §18 接口預留 banner（.apibanner）
   業主 2026-09-18：未接 API 的功能區先掛 banner 標出「以後接入哪裡」。
   品牌語言：直角、1px 虛線、mono 標籤、單一強調色。 */
.apibanners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-3);
}
.apibanner {
  border: 1px dashed var(--ink-300);
  border-radius: var(--r);
  background: var(--ink-100);
  padding: 20px 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.apibanner__tag {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--accent-700);
  border: 1px solid var(--accent-500);
  border-radius: var(--r);
  padding: 2px 8px;
}
.apibanner__title {
  margin: 4px 0 0;
  font-size: 17px;
  font-weight: 600;
}
.apibanner__desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-500);
  flex: 1 1 auto;
}
.apibanner__ep {
  margin: 6px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--ink-300);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--ink-500);
  word-break: break-all;
}

/* ================================================== 19A 證書查驗卡整卡可點（.apibanner__hit）
   ★ 2026-11-03 業主授權：證書系統接入官網 #apib 第一卡。沿用 V-18 / .card__hit 模式（§3 同款：absolute 鋪滿＋負 offset 焦點框）。
   URL 唯一來源：index.html #apib 註釋；與 site-admin/ui-v2/pages.js 的 cert 頁同源，勿各自改。 */
.apibanner {
  position: relative; /* ★ 新增：讓 .apibanner__hit 能 absolute 鋪滿整卡 */
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.apibanner:hover {
  border-color: var(--accent-500);
  box-shadow: var(--sh-lg);
  transform: translateY(-3px);
}
.apibanner__hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}
.apibanner__hit:focus-visible {
  outline: 2px solid var(--accent-700);
  outline-offset: -4px;
  border-radius: inherit;
}