* {
    box-sizing: border-box;
    font-family: 'Noto Sans TC', 'Aptos', -apple-system, BlinkMacSystemFont, 'Microsoft JhengHei', sans-serif !important;
  }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    padding-top: 75px;
    background: #fff;
    font-family: 'Noto Sans TC', 'Aptos', -apple-system, BlinkMacSystemFont, 'Microsoft JhengHei', sans-serif !important;
    color: var(--color-text);
  }
  a { color: var(--color-primary); text-decoration: none; }
  a:hover { color: #00838F; }

  .official-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 75px !important;
    background: #ffffff !important;
    border-bottom: 1px solid var(--color-border) !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    z-index: 1000;
  }
  .header-content {
    width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px;
    display: flex !important; justify-content: space-between; gap: 0;
    align-items: center; box-sizing: border-box;
  }
  .logo { font-size: 20px; font-weight: 700; color: var(--color-primary) !important; text-decoration: none; white-space: nowrap; display: flex; align-items: center; flex: 0 0 auto; }
  .logo img { height: 38px; width: auto; display: block; }

  .main-nav { display: contents; }
  .main-nav > a, .main-nav > .nav-drop { flex: 0 0 auto; min-width: 0; display: flex; justify-content: center; align-items: center; text-align: center; }
  .main-nav > a { overflow: hidden; }
  .main-nav a, .main-nav .nav-main-link {
    font-size: 14px; font-weight: 500; color: var(--color-text-secondary); text-decoration: none; transition: color 0.2s;
    white-space: nowrap; cursor: pointer; text-align: center; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  .main-nav > .nav-drop > .nav-main-link { width: 100%; display: flex; justify-content: center; align-items: center; }
  .main-nav a.active, .main-nav a:hover, .main-nav .nav-drop:hover .nav-main-link, .main-nav .nav-drop.open .nav-main-link { color: var(--color-primary) !important; font-weight: 700; }

  /* 菜單項撐滿 NavBar 高度，使其底邊與下拉面板頂端相接，
     滑鼠往下移動時不會離開 .nav-drop，面板即不會閃爍 */
  .nav-drop { position: relative; align-self: stretch; height: 75px; }

  .nav-drop .nav-panel {
    position: fixed; top: 75px; left: 0; right: 0; width: 100%; background: #fff; border-radius: 0;
    box-shadow: 0 20px 40px rgba(11,52,110,0.15); padding: 0;
    opacity: 0; visibility: hidden; transform: translateY(-16px); transition: all .3s ease; z-index: 1000;
  }
  .nav-panel-inner {
    max-width: 1280px; margin: 0 auto; padding: 36px 40px;
    display: flex; flex-wrap: wrap; gap: 8px 40px; text-align: left;
  }
  .nav-panel-inner .nav-sub-link { width: auto !important; padding: 4px 0 !important; }
  .nav-panel-group-title {
    flex-basis: 100%; font-size: 0.9rem; font-weight: 700; color: var(--color-primary);
    padding-top: 14px; margin-top: 4px; border-top: 1px solid var(--color-border);
  }
  .nav-panel-inner > .nav-panel-group-title:first-child { border-top: none; padding-top: 0; margin-top: 0; }
  .nav-drop:hover .nav-panel, .nav-drop.open .nav-panel { opacity: 1; visibility: visible; transform: translateY(0); }

  .nav-sub-link {
    display: block !important; width: 100% !important; box-sizing: border-box !important; font-size: 0.9rem; color: #4B6B94;
    padding: 10px 24px !important; margin: 0 !important; text-decoration: none; text-align: left !important;
    transition: color .25s ease-in-out, font-weight .25s ease-in-out; white-space: nowrap;
  }
  .nav-sub-link span { text-align: left !important; }
  /* 標題說明提示（取代瀏覽器原生 title，可自訂圓角與配色） */
  [data-tip] { position: relative; cursor: help; }
  [data-tip]::after,
  [data-tip]::before { opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease; pointer-events: none; }
  [data-tip]::after {
    content: attr(data-tip);
    position: absolute; left: 0; top: calc(100% + 12px); z-index: 60;
    width: max-content; max-width: min(460px, 78vw);
    white-space: normal; text-align: left;
    background: rgba(11, 32, 62, 0.96); color: #fff;
    font-size: 12.5px; font-weight: 400; line-height: 1.7; letter-spacing: 0.01em;
    padding: 12px 16px; border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
    transform: translateY(-4px);
  }
  [data-tip]::before {
    content: ''; position: absolute; left: 22px; top: calc(100% + 4px); z-index: 61;
    border: 8px solid transparent; border-bottom-color: rgba(11, 32, 62, 0.96);
    transform: translateY(-4px);
  }
  [data-tip]:hover::after, [data-tip]:hover::before,
  [data-tip]:focus-visible::after, [data-tip]:focus-visible::before { opacity: 1; visibility: visible; transform: translateY(0); }
  [data-tip]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }
  @media (max-width: 640px) {
    [data-tip]::after { left: auto; right: 0; max-width: 86vw; }
    [data-tip]::before { left: auto; right: 22px; }
  }

  .nav-sub-note { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400 !important; color: var(--color-text-faint) !important; letter-spacing: 0.02em; line-height: 1.4; }
  .nav-sub-link:hover, .nav-sub-link.active {
    border-bottom: none !important; box-shadow: none !important; text-decoration: none !important;
    background: transparent !important; background-color: transparent !important; font-weight: 700 !important; color: var(--color-text) !important;
  }

  .nav-sub-link::after, .nav-sub-link::before {
    display: none !important; content: none !important; border: none !important; height: 0 !important; background: none !important;
  }
  .nav-panel a.nav-sub-link::after, .nav-panel a.nav-sub-link::before {
    display: none !important; content: none !important; border: none !important; height: 0 !important; background: none !important;
  }

  .mega-menu {
    position: fixed; top: 75px; left: 0; right: 0; width: 100%; background: #fff;
    box-shadow: 0 20px 40px rgba(11,52,110,0.15); padding: 0; opacity: 0; visibility: hidden;
    transform: translateY(-16px); transition: all .3s ease; z-index: 1000;
  }
  .mega-menu-inner {
    max-width: 1280px; margin: 0 auto; padding: 36px 40px; display: grid;
    grid-template-columns: repeat(4, 1fr); gap: 36px; text-align: left;
  }
  .mega-menu-inner .nav-sub-link { padding: 8px 0 !important; white-space: normal; line-height: 1.5; }
  .nav-drop:hover .mega-menu, .nav-drop.open .mega-menu { opacity: 1; visibility: visible; transform: translateY(0); }
  .mega-col-title {
    font-size: 1rem; font-weight: 700; color: var(--color-primary); padding-bottom: 10px;
    margin-bottom: 14px; border-bottom: 2px solid #D6EEFF;
  }
  /* ESG 選單英文版：標題可能折兩行，統一高度讓各欄連結對齊 */
  body.lang-en-active #nav-menu-3 .mega-col-title { min-height: calc(3em + 10px); display: flex; align-items: flex-end; }

  .right-actions { display: flex !important; align-items: center; gap: 24px; flex: 0 0 auto; margin-left: 0; visibility: visible !important; opacity: 1 !important; }
  .lang-switch { font-size: 13px; color: var(--color-text-light); display: flex; align-items: center; gap: 4px; }
  .lang-switch a { background: none; border: none; padding: 0; font-size: 13px; font-family: inherit; cursor: pointer; color: var(--color-text-light); text-decoration: none; }
  .lang-switch a:hover { color: var(--color-primary); }
  .lang-switch a#btn-zh { font-weight: 700; color: var(--color-primary); }
  body.lang-en-active .lang-switch a#btn-zh { font-weight: 400; color: var(--color-text-light); }
  body.lang-en-active .lang-switch a#btn-en { font-weight: 700; color: var(--color-primary); }
  /* 聯絡我們按鈕（Nav Bar 與 contact.html 共用，樣式與首頁「前往聯絡我們」一致） */
  .btn-contact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 26px;
    border: 2px solid #0B346E;
    border-radius: 8px;
    background-color: #0B346E;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  .btn-contact:hover {
    background-color: #FFFFFF !important;
    border-color: #0B346E;
    color: #0B346E !important;
  }

  /* 語言切換：display: revert 會還原各元素的預設顯示方式
     （span → inline、div/p/h1 → block、li → list-item、td → table-cell），
     不必逐一列舉標籤，也能蓋過各頁自帶的 .lang-en 隱藏規則。 */
  .lang-en { display: none !important; }
  body.lang-en-active .lang-zh { display: none !important; }
  body.lang-en-active .lang-en { display: revert !important; }
  body.lang-en-active a.lang-en { display: inline-flex !important; }

  .service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .service-card-link { display: block; text-decoration: none; color: inherit; height: 100%; }
  .service-card {
    width: 100%; border-radius: 8px; background-color: rgba(11,52,110,0.05); padding: 12px 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); position: relative; box-sizing: border-box; overflow: hidden;
    cursor: pointer; min-height: 180px; height: 100%; transition: box-shadow .3s ease;
  }
  .service-card:hover { box-shadow: 0 8px 20px rgba(11,52,110,0.2); }
  .service-card-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background-image: linear-gradient(to bottom,var(--color-primary),var(--color-accent)); border-radius: 8px 0 0 8px; transition: width .3s ease; z-index: 2; }
  .service-card:hover .service-card-bar { width: 10px; }
  .service-card-glow { position: absolute; top: -200px; left: -200px; width: 600px; height: 600px; background: var(--color-accent); border-radius: 50%; filter: blur(200px); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
  .service-card:hover .service-card-glow { opacity: .08; }
  .service-inner { display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 1; transition: transform .3s ease; }
  .service-card:hover .service-inner { transform: translateX(8px); }
  .service-top-row { display: flex; flex-direction: row; align-items: center; gap: 20px; }
  .service-content-box { display: flex; flex-direction: row; gap: 20px; }
  .service-content-box > div { flex: 1; min-width: 0; }
  .service-title-box { flex: 1; }
  .service-title-box h3 { font-size: 2.4rem; font-weight: 700; color: var(--color-primary); margin: 0; }
  .service-img-container { flex: 1; height: 72px; background: #f0f4f8; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--color-text-faint); font-size: 12px; }
  .service-img-container img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
  .service-content-box ul { margin: 0; padding-left: 16px; color: var(--color-text); opacity: .85; line-height: 1.6; font-weight: 300; font-size: 13px; }
  .service-content-box ul li { break-inside: avoid; }

  @media (max-width: 640px) {
    .service-grid { grid-template-columns: 1fr; gap: 16px; }
    .service-top-row { flex-direction: column; align-items: stretch; gap: 12px; }
    .service-title-box h3 { font-size: 1.7rem; }
    .service-img-container { width: 100%; height: 80px; }
    .service-content-box { flex-direction: column; gap: 4px; }
    .service-card:hover .service-inner { transform: none; }
  }

  /* 平板與手機（900px 以下）：服務卡片改單欄，規格清單放大、不淡化 */
  @media (max-width: 900px) {
    .service-grid { grid-template-columns: 1fr; gap: 16px; }
    .service-top-row { flex-direction: column; align-items: stretch; gap: 12px; }
    .service-title-box h3 { font-size: 1.9rem; }
    .service-img-container { flex: none; width: 100%; height: 88px; }
    .service-content-box ul { font-size: 15px; font-weight: 400; opacity: 1; line-height: 1.7; }
    .service-card:hover .service-inner { transform: none; }
  }
  @media (max-width: 640px) {
    .service-title-box h3 { font-size: 1.7rem; }
    .service-img-container { height: 80px; }
    .service-content-box { flex-direction: column; gap: 0; }
  }

  /* ---------- 資訊卡片（首頁應用領域、聯絡我們頁） ----------
     卡片本身不可點擊，因此不做上浮與光暈等 hover 效果 */
  .app-card {
    background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: 32px 28px;
    box-shadow: 0 1px 2px rgba(11,52,110,0.04);
    position: relative;
  }
  .app-card-tag { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: #4B6B94; font-weight: 600; margin-bottom: 16px; }

/* ==========================================================
   共用內頁 Hero Banner（供各子頁面 <style> 沿用，
   若個別頁面需要不同樣式可在自己的 <style> 覆寫，後載入會優先套用）
   ========================================================== */
.hero-banner { background-color: var(--color-primary); color: #ffffff; padding: 60px 32px; margin-bottom: 0px; }
.hero-content { max-width: 1280px; margin: 0 auto; }
.hero-tag { font-size: 12px; font-weight: 700; color: var(--color-accent); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; }

/* ==========================================================
   主選單：按鈕化觸發鈕、鍵盤焦點、手機與平板漢堡選單（≤1024px）
   ========================================================== */
.main-nav button.nav-main-link {
  appearance: none; background: none; border: 0; margin: 0; padding: 0;
  height: 100%; line-height: inherit; font-size: 14px;
}
/* 「關於我們」等一般連結：與下拉選單按鈕同高，懸停底線位置一致（貼齊導覽列底部） */
.main-nav > a:not(.nav-mobile-contact) { align-self: stretch; height: auto; padding-bottom: 0; display: flex; align-items: center; }
.main-nav .nav-main-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; border-radius: 4px; }
.main-nav a:focus-visible,
.nav-sub-link:focus-visible,
.nav-toggle:focus-visible,
.btn-contact:focus-visible,
.lang-switch a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nav-toggle, .main-nav > a.nav-mobile-contact { display: none; }

@media (max-width: 1024px) {
  .header-content { padding: 0 16px; }
  .right-actions { gap: 16px; }
  .right-actions .btn-contact { display: none !important; }

  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -10px;
    background: none; border: 0; border-radius: 8px; cursor: pointer;
    color: var(--color-primary);
  }
  .nav-toggle-icon .bar {
    stroke: currentColor; stroke-width: 2; stroke-linecap: round;
    transform-box: fill-box; transform-origin: center;
    transition: transform .3s cubic-bezier(0.25, 1, 0.5, 1), opacity .2s ease;
  }
  .nav-open .nav-toggle-icon .bar-top { transform: translateY(5px) rotate(45deg); }
  .nav-open .nav-toggle-icon .bar-mid { opacity: 0; }
  .nav-open .nav-toggle-icon .bar-bot { transform: translateY(-5px) rotate(-45deg); }

  /* 選單面板：從頁首下方展開，內容可捲動 */
  .main-nav {
    display: flex !important; flex-direction: column; align-items: stretch; gap: 0;
    position: fixed; top: 75px; left: 0; right: 0; bottom: 0;
    background: var(--color-bg); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px 16px 32px; border-top: 1px solid var(--color-border);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s ease, transform .3s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s linear .3s;
    z-index: 999;
  }
  .nav-open .main-nav {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .25s ease, transform .3s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s;
  }
  body.nav-locked { overflow: hidden; }

  .main-nav > a, .main-nav > .nav-drop {
    display: block; flex: 0 0 auto; height: auto; align-self: auto; text-align: left;
    border-bottom: 1px solid var(--color-border);
  }
  .main-nav > a,
  .main-nav > .nav-drop > .nav-main-link {
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; height: auto; min-height: 56px; padding: 0 4px;
    font-size: 16px; font-weight: 600; color: var(--color-text); text-align: left;
    overflow: visible;
  }
  .main-nav > .nav-drop > .nav-main-link::after {
    content: ''; position: static; opacity: 1; background: none;
    width: 8px; height: 8px; margin-right: 6px; flex: 0 0 auto;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px); transition: transform .25s ease;
  }
  .main-nav > .nav-drop.open > .nav-main-link::after { transform: rotate(-135deg) translateY(-2px); }
  .main-nav a:hover, .main-nav .nav-drop:hover .nav-main-link { font-weight: 600; }
  .main-nav > a::after { display: none; }
  .main-nav .nav-drop.open > .nav-main-link { color: var(--color-primary) !important; }

  /* 子選單改為手風琴：原地展開，不再浮動 */
  .nav-drop .nav-panel, .nav-drop .mega-menu {
    position: static; display: none; width: auto;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none; transition: none; background: transparent;
  }
  .nav-drop.open .nav-panel, .nav-drop.open .mega-menu { display: block; }
  .nav-panel-inner, .mega-menu-inner {
    display: block !important; max-width: none; padding: 0 4px 16px !important;
  }
  .mega-menu-inner [style*="grid-template-columns"] { display: block !important; }
  .mega-col-title {
    font-size: 13px; margin: 14px 0 4px; padding-bottom: 6px; border-bottom-width: 1px;
  }
  .main-nav .nav-sub-link {
    display: block !important; width: 100% !important; white-space: normal;
    padding: 10px 0 !important; font-size: 15px; line-height: 1.5;
  }

  .main-nav > a.nav-mobile-contact {
    display: flex; align-items: center; justify-content: center;
    margin-top: 24px; min-height: 48px; border-radius: 8px;
    background: var(--color-primary); color: #fff !important;
    font-size: 16px; font-weight: 700; border-bottom: 0 !important;
  }
}

/* 首頁應用領域卡片（不可點擊，所以不做懸停動態）
   頂端常駐漸層線，與服務卡片左側色條呼應 */
.market-card {
  display: flex; flex-direction: column; overflow: hidden; padding: 32px 28px 28px;
  transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .4s cubic-bezier(0.16, 1, 0.3, 1), border-color .3s ease;
}
.market-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent), var(--color-primary));
  background-size: 200% 100%; background-position: 0 0;
  transition: height .3s ease, background-position .8s cubic-bezier(0.16, 1, 0.3, 1);
}
/* 懸停：卡片微浮、頂端線加粗並流動、標籤轉為深藍實心 */
.market-card:hover {
  transform: translateY(-6px);
  border-color: rgba(11,52,110,0.25);
  box-shadow: 0 20px 36px -18px rgba(11,52,110,0.35);
}
.market-card:hover::before { height: 5px; background-position: 100% 0; }
.market-tag { transition: background-color .3s ease, color .3s ease; }
.market-card:hover .market-tag { background: var(--color-primary); color: #fff; }
@media (hover: none) {
  .market-card:hover { transform: none; box-shadow: 0 1px 2px rgba(11,52,110,0.04); }
}
@media (prefers-reduced-motion: reduce) {
  .market-card, .market-card::before { transition: none; }
  .market-card:hover { transform: none; }
}
.market-tag {
  align-self: flex-start;
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px;
  border-radius: 999px; background: rgba(11,52,110,0.07); color: var(--color-primary);
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 18px;
}
.market-title { font-size: 1.35rem; font-weight: 700; line-height: 1.4; color: var(--color-primary); margin: 0 0 12px; }
.market-desc { font-size: 14.5px; line-height: 1.85; color: var(--color-text-muted); margin: 0; }
/* 首頁應用領域卡片網格 */
.app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) {
  .app-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* 離站提示視窗按鈕：與全站按鈕同色系 */
.exit-btn { min-height: 44px; font-weight: 700 !important; }
.exit-btn-cancel:hover { border-color: #0B346E !important; color: #0B346E !important; }
.exit-btn-continue:hover { background-color: #FFFFFF !important; color: #0B346E !important; }
.exit-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* ==========================================================
   手機與平板（900px 以下）：子頁面「左側選單＋內容」版型改為上下排列
   適用所有使用 .main-container 的頁面（about、bumping、board 等 17 頁）。
   各頁 <style> 在 site.css 之後載入，因此這裡需要 !important 才能覆寫。
   ========================================================== */
@media (max-width: 900px) {
  .main-container {
    display: block !important;
    padding: 24px 16px 64px !important;
  }
  .main-container > * { min-width: 0; max-width: 100% !important; }
  .main-container > aside,
  .main-container > .sidebar,
  .main-container > aside.sidebar {
    width: auto !important; flex: none !important; height: auto !important;
    margin-bottom: 24px;
  }
  .main-container .sidebar-box,
  .main-container .sidebar,
  .main-container .sidebar-box.fixed,
  .main-container .sidebar-box.is-fixed,
  .main-container .sidebar-box.is-stopped {
    position: static !important; top: auto !important;
    width: auto !important; max-height: none !important;
    transform: none !important;
  }
  /* 內容欄的網格與卡片允許縮小，避免被內部長內容撐寬 */
  .main-container .content { grid-template-columns: minmax(0, 1fr) !important; }
  .main-container main, .main-container .content, .main-container .content > *,
  .main-container .section-block, .main-container .card { min-width: 0; max-width: 100%; }
  /* 寬表格只在自己的區塊內左右捲動，不撐寬整頁 */
  div:has(> table), .spec-table-wrap, .table-wrap {
    max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  /* 沒有外框容器、直接放在區塊裡的表格：表格本身可左右捲動 */
  .section-block > table, .card > table, .sub-block > table, .section > table {
    display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  /* 行內寫死的最小寬度（例如 min-width:320px 的圖表框）在小螢幕上取消 */
  .main-container [style*="min-width"] { min-width: 0 !important; }
  .main-container img { max-width: 100%; height: auto; }

  /* assembly.html 使用 .layout（flex）版型 */
  .layout { display: block !important; padding: 24px 16px 64px !important; }
  .layout > aside.sidebar { width: auto !important; max-width: none !important; flex: none !important; margin-bottom: 24px; }
  .layout > * { min-width: 0; max-width: 100%; }
  .layout .sidebar-box, .layout .sidebar-box.fixed { position: static !important; width: auto !important; top: auto !important; }

  /* contact.html 的兩欄／三欄版型 */
  .contact-layout { grid-template-columns: 1fr !important; gap: 32px !important; padding: 48px 16px !important; }
  .contact-grid-2, .contact-grid-3 { grid-template-columns: 1fr !important; }
  .contact-layout > * { min-width: 0; }
}

/* 側邊選單英文副標題：由 10.5px 提高到 11.5px，避免過小 */
.sidebar-link .sidebar-link-subtitle { font-size: 11.5px; }


/* ===== 共用規格表樣式（與 bumping 頁 spec-table-compare 一致）===== */
.wt-spec-wrap { background: #fff !important; border: 1px solid var(--color-border) !important; border-radius: 10px !important; }
.wt-spec { font-size: 14px !important; color: var(--color-text) !important; border-collapse: collapse !important; }
.wt-spec thead tr { background: var(--color-primary) !important; }
.wt-spec th { background: var(--color-primary) !important; color: #fff !important; font-size: 14px !important; font-weight: 700 !important; text-align: center !important; vertical-align: middle !important; padding: 14px 20px !important; border: 0 !important; }
.wt-spec thead tr:first-child th:first-child { text-align: left !important; }
.wt-spec tbody tr { background: #fff !important; }
.wt-spec tbody tr:nth-child(even) { background: var(--color-bg-section) !important; }
.wt-spec td { padding: 14px 20px !important; border-top: 0 !important; border-bottom: 1px solid var(--color-border) !important; text-align: center !important; color: var(--color-primary) !important; font-weight: 600 !important; }
.wt-spec tbody tr:last-child td { border-bottom: 0 !important; }
.wt-spec td:first-child { text-align: left !important; color: var(--color-text) !important; font-weight: 500 !important; }
/* 第一欄也是數值的表格 */
.wt-spec-nolabel thead tr:first-child th:first-child { text-align: center !important; }
.wt-spec-nolabel td:first-child { text-align: center !important; color: var(--color-primary) !important; font-weight: 600 !important; }
/* 內容為長文字的表格：靠左 */
.wt-spec-text th:not(:first-child), .wt-spec-text td:not(:first-child) { text-align: left !important; }
.wt-spec-text td:not(:first-child) { font-weight: 500 !important; }
/* 多層表頭／格線表格 */
.wt-spec-grid th { border: 1px solid rgba(255,255,255,0.18) !important; font-size: 13px !important; padding: 12px 14px !important; }
.wt-spec-grid td { border: 1px solid var(--color-border) !important; padding: 12px 10px !important; font-size: 13px !important; white-space: nowrap; }
.wt-spec-grid th { padding: 12px 10px !important; }
/* 數值不換行（欄位較多的表格） */
.wt-spec-nowrap th:not(:first-child), .wt-spec-nowrap td:not(:first-child) { white-space: nowrap; padding-left: 12px !important; padding-right: 12px !important; }

/* ==========================================================
   手機版浮動章節選單（sdn = section drawer nav）
   有左側章節選單（.sidebar-box .sidebar-link）的頁面，在 900px 以下：
   頁面頂端不顯示原選單，螢幕邊緣保留細邊把手；靠近邊緣觸碰、捲動時浮現，
   點把手或從邊緣往內滑可開啟章節選單。可切換放在左側或右側（記在瀏覽器）。
   ========================================================== */
.sdn-handle, .sdn-backdrop, .sdn-drawer { display: none; }
@media (max-width: 900px) {
  .sdn-handle {
    display: flex; position: fixed; top: 50%; z-index: 1001;
    width: 34px; height: 76px; margin-top: -38px; padding: 0; border: 0;
    flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    background: var(--color-primary); color: #fff; cursor: pointer;
    box-shadow: 0 6px 18px rgba(11,52,110,0.32);
    transition: transform .28s ease, opacity .28s ease, visibility .28s;
    opacity: 0; visibility: hidden; -webkit-tap-highlight-color: transparent;
  }
  .sdn-handle .sdn-bar { display: block; width: 14px; height: 2px; border-radius: 2px; background: currentColor; }
  .sdn-handle .sdn-bar:nth-child(2) { width: 10px; }
  .sdn-handle .sdn-count { font-size: 9.5px; font-weight: 700; letter-spacing: .02em; margin-top: 3px; color: var(--color-accent); line-height: 1; }
  .sdn-left .sdn-handle { left: 0; border-radius: 0 12px 12px 0; transform: translateX(-100%); }
  .sdn-right .sdn-handle { right: 0; border-radius: 12px 0 0 12px; transform: translateX(100%); }
  /* 捲過原選單後：邊緣保留一條細邊作為提示 */
  .sdn-ready .sdn-handle { opacity: 1; visibility: visible; }
  .sdn-left.sdn-ready .sdn-handle { transform: translateX(-28px); }
  .sdn-right.sdn-ready .sdn-handle { transform: translateX(28px); }
  /* 捲動中或觸碰邊緣：完整浮現 */
  .sdn-ready.sdn-peek .sdn-handle { transform: translateX(0); }

  .sdn-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1002; background: rgba(15,23,42,0.42);
    opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
  }
  .sdn-drawer {
    display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; z-index: 1003;
    width: min(320px, 84vw); background: #fff; box-shadow: 0 0 32px rgba(11,52,110,0.25);
    transition: transform .3s cubic-bezier(.2,.8,.2,1); visibility: hidden;
  }
  .sdn-left .sdn-drawer { left: 0; transform: translateX(-102%); border-radius: 0 16px 16px 0; }
  .sdn-right .sdn-drawer { right: 0; transform: translateX(102%); border-radius: 16px 0 0 16px; }
  .sdn-open .sdn-backdrop { opacity: 1; visibility: visible; }
  .sdn-open .sdn-drawer { transform: translateX(0); visibility: visible; }

  .sdn-drawer:focus { outline: none; }
  .sdn-list a:focus:not(:focus-visible) { outline: none; }
  .sdn-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 12px; border-bottom: 1px solid var(--color-border); }
  .sdn-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--color-primary); text-transform: uppercase; }
  .sdn-close { width: 36px; height: 36px; border: 0; background: var(--color-bg-section); border-radius: 50%; color: var(--color-primary); font-size: 20px; line-height: 1; cursor: pointer; }
  .sdn-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 10px 16px; overscroll-behavior: contain; }
  .sdn-list a {
    position: relative; display: block; padding: 11px 14px 11px 16px; margin-bottom: 2px; border-radius: 8px;
    font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--color-text-secondary, #334155); text-decoration: none;
  }
  .sdn-list a.active { background: var(--color-bg-section); color: var(--color-primary); font-weight: 700; }
  .sdn-list a.active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--color-accent); }
  .sdn-list a > span { display: block; }
  .sdn-group { margin: 14px 6px 6px; padding-top: 12px; border-top: 1px solid var(--color-border); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: #4B6B94; }
  .sdn-list .sdn-group:first-child { margin-top: 2px; padding-top: 0; border-top: 0; }
  .sdn-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border); font-size: 12.5px; color: var(--color-text-light, #64748B); }
  .sdn-side { display: inline-flex; border: 1px solid var(--color-border); border-radius: 999px; overflow: hidden; }
  .sdn-side button { border: 0; background: #fff; padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--color-text-light, #64748B); cursor: pointer; }
  .sdn-side button[aria-pressed="true"] { background: var(--color-primary); color: #fff; }
  html.sdn-lock, html.sdn-lock body { overflow: hidden; }
  /* 頁面頂端的原章節選單在手機版隱藏（:has 讓畫面載入時就不閃現；sdn-src 為舊瀏覽器備援） */
  .main-container > aside:has(.sidebar-box .sidebar-link),
  .layout > aside.sidebar:has(.sidebar-box .sidebar-link),
  .main-container > #toc:has(.aside-link),
  .sdn-src { display: none !important; }
  /* 漢堡選單展開時暫時收起把手 */
  body:has(.official-header.nav-open) .sdn-handle { opacity: 0 !important; visibility: hidden !important; }
}
@media (prefers-reduced-motion: reduce) {
  .sdn-handle, .sdn-drawer, .sdn-backdrop { transition: none !important; }
}

/* ==========================================================
   左側章節欄位（全站統一，以 ra-fa.html 為準）
   結構：aside > .sidebar-box > .sidebar-title ＋ .sidebar-scroll > .sidebar-link
   - 標題固定在上方，章節多時只捲動 .sidebar-scroll
   - position: sticky 跟隨畫面，到內容底部自然停住，不會蓋到頁尾
   各頁 <style> 在 site.css 之後載入，因此需提高權重並加 !important。
   ========================================================== */
@media (min-width: 901px) {
  .main-container > aside, .layout > aside {
    align-self: stretch !important; height: auto !important; position: relative;
  }
  aside .sidebar-box {
    position: sticky !important; top: 95px !important;
    width: 280px !important; max-width: 100%;
    max-height: calc(100vh - 120px) !important;
    display: flex !important; flex-direction: column !important;
    overflow: hidden !important; padding: 0 !important; margin: 0 !important;
    background: #ffffff; border-radius: 16px;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    z-index: 90; box-sizing: border-box; transform: none !important;
  }
  aside .sidebar-box > .sidebar-title, aside .sidebar-box > .sidebar-eyebrow {
    flex-shrink: 0; font-size: 12px !important; font-weight: 700 !important;
    color: var(--color-primary) !important; letter-spacing: 0.08em !important;
    padding: 20px 16px 12px !important; margin: 0 !important;
    text-transform: uppercase; border-bottom: 1px solid #EEF2F7;
  }
  aside .sidebar-box > .sidebar-scroll {
    position: relative; overflow-y: auto; min-height: 0;
    padding: 12px 16px 20px !important;
  }
  aside .sidebar-box .sidebar-link {
    position: relative; display: block !important;
    padding: 10px 14px !important; margin: 0 0 4px !important;
    font-size: 14px !important; font-weight: 500 !important; line-height: 1.45;
    color: var(--color-text-secondary) !important; text-decoration: none;
    border-radius: 8px !important; border: 0 !important; background: transparent;
    transition: all 0.2s ease; cursor: pointer;
  }
  aside .sidebar-box .sidebar-link:hover { background: var(--color-bg-section) !important; color: var(--color-primary) !important; }
  aside .sidebar-box .sidebar-link.active, aside .sidebar-box .sidebar-link.toc-active {
    background-color: var(--color-bg-section) !important;
    color: var(--color-primary) !important; font-weight: 700 !important;
  }
  aside .sidebar-box .sidebar-link.active::before, aside .sidebar-box .sidebar-link.toc-active::before {
    content: "" !important; position: absolute !important; left: 0 !important;
    top: 8px !important; bottom: 8px !important; width: 4px !important;
    background-color: var(--color-accent) !important;
    border-radius: 0 4px 4px 0 !important; display: block !important;
  }
  aside .sidebar-box .sidebar-link:focus, aside .sidebar-box .sidebar-link:focus-visible, aside .sidebar-box .sidebar-link:active {
    outline: none !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent !important;
  }
  aside .sidebar-box .sidebar-link-zh { display: block; font-size: 11px; font-weight: 400; color: var(--color-text-faint); margin-top: 2px; letter-spacing: 0.01em; }
  aside .sidebar-box .sidebar-link.active .sidebar-link-zh, aside .sidebar-box .sidebar-link.toc-active .sidebar-link-zh { color: #4B6B94; }
  body.lang-en-active aside .sidebar-box .sidebar-link-zh { display: none; }
  aside .sidebar-box .sidebar-group { margin: 0 0 6px !important; }
  aside .sidebar-box .sidebar-group-title {
    font-size: 13.5px !important; font-weight: 700 !important; color: var(--color-primary) !important;
    padding: 10px 14px 4px !important; letter-spacing: normal !important; text-transform: none !important;
  }
  aside .sidebar-box .sidebar-group-title .sidebar-link-zh { font-size: 11px; font-weight: 400; color: var(--color-text-faint); margin-top: 1px; }
  aside .sidebar-box .sidebar-group .sidebar-link { padding-left: 26px !important; font-size: 13px !important; }
}

/* 章節選單子選項（.sidebar-sublink，例如「規格能力表」） */
.spec-anchor { scroll-margin-top: 110px; }
@media (min-width: 901px) {
  aside .sidebar-box .sidebar-sublink {
    position: relative; display: flex; align-items: center; gap: 8px;
    padding: 6px 14px 6px 30px; margin: -2px 0 6px;
    font-size: 13px; font-weight: 400; line-height: 1.45;
    color: var(--color-text-secondary); text-decoration: none; border-radius: 8px;
    transition: background-color .2s ease, color .2s ease; cursor: pointer;
  }
  aside .sidebar-box .sidebar-sublink::before {
    content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
    border: 1.5px solid var(--color-primary);
  }
  aside .sidebar-box .sidebar-sublink:hover { background: var(--color-bg-section); color: var(--color-primary); }
  aside .sidebar-box .sidebar-sublink.active { color: var(--color-primary); font-weight: 700; }
  aside .sidebar-box .sidebar-sublink.active::before { background: var(--color-accent); border-color: var(--color-accent); }
  aside .sidebar-box .sidebar-sublink:focus:not(:focus-visible) { outline: none; }
}
.sdn-list a.sdn-sub { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 32px; font-size: 13px; font-weight: 400; }
.sdn-list a.sdn-sub::after { content: ""; order: -1; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--color-primary); }
.sdn-list a.sdn-sub.active { background: transparent; color: var(--color-primary); font-weight: 700; }
.sdn-list a.sdn-sub.active::before { display: none; }
.sdn-list a.sdn-sub.active::after { background: var(--color-accent); border-color: var(--color-accent); }

/* 圖片預留高度：build.py 會替站內圖片加上 --img-ar（圖檔寬 / 高），
   圖片載入前先預留正確高度，避免版面被陸續載入的圖片往下推；載入後仍以圖檔比例顯示。
   各頁自行指定 aspect-ratio 的圖片（例如 4/3 裁切）不受影響。 */
img { aspect-ratio: auto var(--img-ar); }