/* ============================================================
   style-aa.css — SEDB 首頁 AA 改版設計（視覺參考自範本，本專案為 SEDB）
   載入順序：bootstrap.css → style.css → style-aa.css（本檔最後，覆寫優先）
   範圍策略：
     - 設計 tokens / chrome(header/nav/footer/a11y) → 全域（class 與既有零碰撞）
     - 首頁內容元件（.btn/.card/.carousel… 會撞 Bootstrap）→ 命名空間於 .aa-home
     - 不覆寫全域 body 字體，內頁文字維持原樣
   字體：以 @import 於本檔最上方載入（CSS 檔非 Razor，@import/@數字 皆合法）
   ============================================================ */

/* Google Fonts（必須在所有規則之前） */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700;900&family=Noto+Serif+TC:wght@700&family=IBM+Plex+Mono:wght@400;600;700&display=swap');

/* ===== tokens：colors ===== */
:root{
  --teal:#026461; --teal-strong:#014e4c; --teal-ink:#013b3a; --teal-soft:#e3efee; --teal-line:#b3d2d0; --teal-soft-2:#d3e7e5;
  --paper:#f7f9f9;
  --ink:#1c2023; --ink-soft:#334155; --ink-faint:#57534e;
  --hair:#e6eaea; --hair-2:#d6dbdb; --slate:#41464b; --amber:#92400e; --terra:#990000;
  --focus:#f5b500; --focus-ring:#7a2e16;
  --warm:#c2683a; --warm-soft:#fbeee3; --warm-line:#eed3bd;
  --field-focus-ring:0 0 0 3px var(--teal-soft); --input-placeholder:#57534e;
}
html.hc{
  --ink:#000; --ink-soft:#1c1c1c; --ink-faint:#333; --hair:#000; --hair-2:#000; --paper:#fff;
  --teal:#024442; --teal-strong:#013331; --teal-ink:#012423; --teal-soft:#cfe3e2; --teal-line:#024442; --terra:#7a0000; --amber:#7a3508; --teal-soft-2:#bcd9d7;
  --focus:#ffdd00; --focus-ring:#000;
  --warm:#7a3508; --warm-soft:#fff; --warm-line:#7a3508;
  --input-placeholder:#1c1c1c;
}
/* ===== tokens：typography / spacing / radius ===== */
:root{
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --sans:"Noto Sans TC","微軟正黑體",system-ui,sans-serif;
  --serif:"Noto Serif TC",Georgia,serif;
  --text-sm:0.875rem; --text-base:1rem; --text-lg:1.25rem; --text-xl:1.5rem; --text-2xl:2rem;
  --fs:1.2; --maxw:1280px;
  --space-2:0.125rem; --space-4:0.25rem; --space-6:0.375rem; --space-8:0.5rem; --space-10:0.625rem;
  --space-12:0.75rem; --space-14:0.875rem; --space-16:1rem; --space-18:1.125rem; --space-20:1.25rem;
  --space-22:1.375rem; --space-24:1.5rem; --space-26:1.625rem; --space-28:1.75rem; --space-32:2rem;
  --space-36:2.25rem; --space-40:2.5rem; --space-48:3rem; --space-56:3.5rem; --space-64:4rem;
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:28px; --r-full:999px;
  --bw-1:1.5px; --bw-2:1.8px;
}

/* ===== 全域 a11y helpers（最小必要，不動既有版面） ===== */
.aa-home, .aa-chrome :focus-visible, .aa-home :focus-visible{}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ext{display:inline-block;vertical-align:-1px;margin-left:var(--space-4);opacity:.7}
@media (prefers-reduced-motion: reduce){
  .aa-chrome *,.aa-chrome *::before,.aa-chrome *::after,
  .aa-home *,.aa-home *::before,.aa-home *::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ============================================================
   CHROME（全域）：header / nav / footer / 回頂
   ============================================================ */
.aa-chrome{font-family:var(--sans);line-height:1.6}
.aa-chrome :focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm);
  box-shadow:0 0 0 2px #fff,0 0 0 6px var(--focus),0 0 0 8px var(--focus-ring)}
/* 滑鼠點擊 button/a 時 :focus 會觸發但 :focus-visible 不會（瀏覽器內建行為），
   若不特別歸零，會露出未墊高/未特別設計的瀏覽器原生 outline，被緊鄰元素蓋到一角。
   點擊時完全不顯示框（符合現代慣例），只有鍵盤 Tab 才顯示上面那圈設計過的框。*/
.aa-chrome :focus:not(:focus-visible){outline:none;box-shadow:none}

/* skip links */
.skiplinks a{position:absolute;top:0;left:16px;z-index:60;background:var(--teal);color:#fff;font-weight:700;font-size:var(--text-base);padding:var(--space-10) var(--space-18);border-radius:0 0 var(--r-sm) var(--r-sm);transition:transform .15s;letter-spacing:.04em;white-space:nowrap;transform:translateY(-110%)}
.skiplinks a:nth-child(2){left:230px}
.skiplinks a:nth-child(3){left:444px}
.skiplinks a:focus{transform:translateY(0)}

/* brand / logo */
.brand{display:inline-flex;align-items:center;gap:var(--space-12);text-decoration:none}
.brand-logo{height:42px;width:auto;display:block}
@media (max-width:920px){.brand-logo{height:34px}}

/* a11y tools：字級 + 高對比 */
.a11y-tools{display:flex;align-items:center;gap:var(--space-12)}
.a11y-tools .tb-fz{display:flex;align-items:center;gap:var(--space-10)}
.fz-seg{display:inline-flex;border:var(--bw-1) solid var(--hair-2);border-radius:var(--r-md);background:#fff;min-height:2.5rem}
.fz-seg button{border:none;background:#fff;min-width:2.625rem;min-height:2.5rem;cursor:pointer;color:var(--ink-soft);font-weight:700;font-size:var(--text-base);font-family:var(--sans);border-left:var(--bw-1) solid var(--hair-2);transition:.14s;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.fz-seg button:first-child{border-left:none;border-radius:calc(var(--r-md) - 1px) 0 0 calc(var(--r-md) - 1px)}
.fz-seg button:last-child{border-radius:0 calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0}
.fz-seg button:hover{background:var(--teal-soft);color:var(--teal-ink)}
.fz-seg button[aria-pressed="true"]{background:var(--teal);color:#fff}
.fz-seg button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--focus-ring),inset 0 0 0 4px var(--focus);z-index:2;position:relative;border-left-color:var(--focus-ring)}
.fz-seg button:focus-visible + button{border-left-color:var(--focus-ring)}
.hc-btn{display:inline-flex;align-items:center;gap:var(--space-6);border:var(--bw-1) solid var(--hair-2);background:#fff;border-radius:var(--r-md);min-height:2.5rem;padding:var(--space-6) var(--space-14);cursor:pointer;font-family:var(--sans);font-size:var(--text-base);font-weight:700;color:var(--ink-soft);transition:.14s;white-space:nowrap}
.hc-btn:hover{border-color:var(--teal);color:var(--teal-ink)}
.hc-btn[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}

/* portal header：白底通透 */
.p-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--hair)}
html.hc .p-header{background:#fff;backdrop-filter:none}
.p-bar{max-width:var(--maxw);margin:0 auto;padding:var(--space-16) var(--space-40);display:flex;align-items:center;gap:var(--space-18)}
.p-bar .spacer{flex:1}
/* 搜尋 */
.p-search{display:flex;align-items:center;height:44px;border:var(--bw-1) solid var(--hair-2);border-radius:var(--r-full);background:#fff;padding:0 var(--space-6) 0 var(--space-16);transition:.14s}
.p-search:focus-within{border-color:var(--teal);box-shadow:0 0 0 2px #fff,0 0 0 5px var(--focus),0 0 0 7px var(--focus-ring)}
.p-search input{border:none;outline:none;background:none;font-family:var(--sans);font-size:var(--text-base);color:var(--ink);width:140px}
.p-search input:focus-visible{outline:none;box-shadow:none}
.p-search input::placeholder{color:var(--input-placeholder)}
.p-search button{width:34px;height:34px;border:none;border-radius:50%;background:var(--teal);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:.14s}
.p-search button:hover{background:var(--teal-strong)}
/* 語言切換 */
.p-lang{display:inline-flex;border:var(--bw-1) solid var(--hair-2);border-radius:var(--r-md);background:#fff;min-height:2.5rem}
.p-lang a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:600;font-size:var(--text-base);color:var(--ink-soft);border-left:var(--bw-1) solid var(--hair-2);text-decoration:none}
.p-lang a:first-child{border-left:none;border-radius:calc(var(--r-md) - 1px) 0 0 calc(var(--r-md) - 1px)}
.p-lang a:last-child{border-radius:0 calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0}
.p-lang a.on{background:var(--teal);color:#fff}
.p-lang a.on:hover,.p-lang a.on:visited,.p-lang a.on:visited:hover{background:var(--teal);color:#fff}
.p-lang a:hover:not(.on){background:var(--teal-soft);color:var(--teal-ink)}
.p-lang a:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--focus-ring),inset 0 0 0 4px var(--focus);z-index:2;position:relative;border-left-color:var(--focus-ring)}
.p-lang a:focus-visible + a{border-left-color:var(--focus-ring)}

/* 主選單：白底 + teal 點綴 */
.p-nav{border-top:1px solid var(--hair)}
.p-nav > ul{max-width:var(--maxw);margin:0 auto;padding:0 var(--space-40);list-style:none;display:flex;flex-wrap:wrap;align-items:stretch}
.p-nav a{display:inline-flex;align-items:center;min-height:54px;padding:0 var(--space-18);color:var(--ink);font-weight:700;font-size:var(--text-base);letter-spacing:.02em;border-bottom:3px solid transparent;transition:.14s;text-decoration:none}
.p-nav a:hover{color:var(--teal-ink);background:var(--teal-soft)}
.p-nav a.on{color:var(--teal-ink);border-bottom-color:var(--teal)}
.p-nav a .ext{opacity:.8}
.p-ops{display:flex;align-items:center;gap:var(--space-14)}
.p-burger{display:none;width:46px;height:46px;flex:0 0 auto;align-items:center;justify-content:center;border:var(--bw-1) solid var(--hair-2);border-radius:var(--r-md);background:#fff;color:var(--ink-soft);cursor:pointer;transition:.14s}
.p-burger:hover{border-color:var(--teal);color:var(--teal-ink)}
.p-burger .ic-close{display:none}
.p-header.nav-open .p-burger .ic-open{display:none}
.p-header.nav-open .p-burger .ic-close{display:block}

/* 多層下拉子選單 */
.p-nav li{position:relative}
.p-nav .has-sub > a{gap:var(--space-6)}
.p-nav .has-sub > a::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);opacity:.6;flex:0 0 auto}
.p-nav .submenu{list-style:none;margin:0;padding:var(--space-6);background:#fff}
.p-nav .submenu a{display:flex;align-items:center;justify-content:space-between;gap:var(--space-10);min-height:44px;width:100%;padding:var(--space-8) var(--space-12);border:none;border-radius:var(--r-md);color:var(--ink);font-weight:500}
.p-nav .submenu a:hover{background:var(--teal-soft);color:var(--teal-ink)}
@media (min-width:921px){
  .p-nav .submenu{position:absolute;top:100%;left:0;min-width:210px;white-space:nowrap;display:none;border:1px solid var(--hair-2);border-radius:var(--r-lg);box-shadow:0 12px 34px rgba(20,40,38,.14);z-index:60}
  .p-nav li:hover > .submenu,.p-nav li:focus-within > .submenu{display:block}
  .p-nav .submenu .submenu{top:calc(-1 * var(--space-6));left:100%}
  .p-nav .submenu .has-sub > a::after{transform:rotate(-45deg)}
}
@media (max-width:920px){
  .p-bar{flex-wrap:wrap}
  .p-burger{display:inline-flex}
  .p-ops{display:none;flex-basis:100%;justify-content:flex-end;flex-wrap:wrap;padding-top:var(--space-14);margin-top:var(--space-14);border-top:1px solid var(--hair)}
  .p-header.nav-open .p-ops{display:flex}
  .p-nav{display:none}
  .p-header.nav-open .p-nav{display:block}
  .p-nav > ul{flex-direction:column;padding:var(--space-6) var(--space-22) var(--space-14)}
  .p-nav a{width:100%;min-height:50px;padding:0 var(--space-12);border-bottom:none;border-left:3px solid transparent;border-radius:var(--r-sm)}
  .p-nav a.on{border-left-color:var(--teal);background:var(--teal-soft)}
  .p-nav .submenu{display:none;padding:0 0 0 var(--space-20)}
  .p-nav .has-sub.open > .submenu{display:block}
  .p-nav .submenu a{color:var(--ink-soft)}
  .p-nav .has-sub > a::after{margin-left:auto;transition:transform .14s}
  .p-nav .has-sub.open > a::after{transform:rotate(-135deg)}
}

/* footer 6 欄 */
.aa-footer{background:var(--paper);border-top:1px solid var(--hair);font-family:var(--sans)}
.aa-footer .f-top{display:flex;gap:var(--space-32) var(--space-40);padding-top:var(--space-48);padding-bottom:var(--space-32);flex-wrap:wrap;align-items:flex-start;max-width:var(--maxw);margin:0 auto;padding-left:var(--space-40);padding-right:var(--space-40)}
.aa-footer .f-brand{flex:1 1 220px;display:flex;flex-direction:column;align-items:flex-start}
.aa-footer .f-brand .brand-logo{height:38px}
.aa-footer .f-brand .mono{font-family:var(--mono);font-size:var(--text-base);color:var(--ink-soft);line-height:1.8;margin-top:var(--space-14);letter-spacing:.02em}
.aa-footer .f-col{flex:1 1 140px}
.aa-footer h2.f-h{font-family:var(--mono);font-size:var(--text-base);letter-spacing:.16em;color:var(--ink-faint);font-weight:600;margin:0 0 var(--space-14)}
.aa-footer .f-col a{display:block;font-size:var(--text-base);color:var(--ink-soft);padding:var(--space-4) 0;transition:.14s;text-decoration:none}
.aa-footer .f-col a:hover{color:var(--teal-ink)}
.aa-footer .f-base{display:flex;align-items:center;gap:var(--space-14) var(--space-22);flex-wrap:wrap;padding:var(--space-20) var(--space-40);border-top:1px solid var(--hair);max-width:var(--maxw);margin:0 auto}
.aa-footer .gov-badge-slot{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:var(--space-6) var(--space-14);border:var(--bw-1) dashed var(--hair-2);border-radius:var(--r-sm);color:var(--ink-faint);font-size:var(--text-sm);font-family:var(--mono);letter-spacing:.06em;background:var(--paper)}
.aa-footer .copy{font-family:var(--mono);font-size:var(--text-sm);letter-spacing:.06em;color:var(--ink-faint);margin-left:auto}

/* 回頂 FAB */
/* 常駐左下角浮動按鈕組：回首頁 + 回頂，恆常顯示（不再依捲動位置顯示/隱藏）*/
.fab-stack{position:fixed;right:var(--space-22);bottom:var(--space-22);z-index:70;display:flex;flex-direction:column;gap:var(--space-10)}
.fab-btn{width:46px;height:46px;border-radius:var(--r-lg);border:var(--bw-1) solid var(--hair-2);background:#fff;color:var(--teal-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 26px rgba(20,40,38,.16);text-decoration:none;transition:.2s}
.fab-btn:hover{border-color:var(--teal);color:#fff;background:var(--teal)}

/* ============================================================
   首頁內容（命名空間 .aa-home）— 避免與 Bootstrap .btn/.card/.carousel 撞
   ============================================================ */
.aa-home{position:relative;overflow-x:clip;font-family:var(--sans);line-height:1.6;color:var(--ink)}
.aa-home :focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm);
  box-shadow:0 0 0 2px #fff,0 0 0 6px var(--focus),0 0 0 8px var(--focus-ring)}
.aa-home :focus:not(:focus-visible){outline:none;box-shadow:none}

/* bg-deco 襯底 */
.aa-home .bg-deco{position:absolute;top:0;left:0;width:1280px;height:1040px;z-index:0;pointer-events:none;
  background:
    radial-gradient(55% 55% at 22% 12%, #c9e7e2 0%, transparent 60%),
    radial-gradient(45% 45% at 6% 28%, #f3cdaf 0%, transparent 58%),
    radial-gradient(50% 50% at 38% 4%, #dcc9e6 0%, transparent 56%),
    radial-gradient(70% 70% at 8% 2%, var(--teal-soft) 0%, transparent 64%);
  opacity:.5;-webkit-mask:radial-gradient(80% 80% at 12% 8%, #000 0%, transparent 72%);mask:radial-gradient(80% 80% at 12% 8%, #000 0%, transparent 72%)}
html.hc .aa-home .bg-deco{display:none}
@media (prefers-contrast: more){.aa-home .bg-deco{display:none}}

/* 按鈕（pill） */
.aa-home .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);font-family:var(--sans);font-weight:700;font-size:var(--text-base);padding:var(--space-10) var(--space-18);border-radius:var(--r-full);border:var(--bw-1) solid transparent;cursor:pointer;letter-spacing:.02em;transition:.15s;background:none;min-height:44px;text-decoration:none}
.aa-home .btn-primary{background:var(--teal);color:#fff}
.aa-home .btn-primary:hover{background:var(--teal-strong)}
.aa-home .btn-primary:active{background:var(--teal-ink)}
.aa-home .btn-ghost{border-color:var(--hair-2);color:var(--ink)}
.aa-home .btn-ghost:hover{border-color:var(--ink);background:var(--paper)}
.aa-home .btn-ghost:active{background:var(--teal-soft);border-color:var(--teal)}
.aa-home .btn:active{transform:translateY(1px)}
.aa-home .btn-lg{padding:var(--space-14) var(--space-22)}

/* 區塊 scaffold */
.aa-home .p-main{max-width:var(--maxw);margin:0 auto;padding:0 var(--space-40);position:relative;z-index:1}
.aa-home .sect{padding:var(--space-48) 0}
.aa-home .sect-head{display:flex;align-items:flex-end;gap:var(--space-20);margin-bottom:var(--space-28)}
.aa-home .sect-eyebrow{display:inline-flex;align-items:center;gap:var(--space-10);font-family:var(--sans);font-size:var(--text-base);letter-spacing:.04em;color:var(--accent,var(--warm));font-weight:700;margin-bottom:var(--space-10)}
.aa-home .sect-eyebrow::before{content:"";display:inline-block;width:24px;height:3px;border-radius:var(--r-full);flex:0 0 auto;background:var(--accent,var(--warm))}
.aa-home .sect-title{font-family:var(--serif);font-size:var(--text-2xl);font-weight:700;letter-spacing:.01em;line-height:1.2;margin:0}
.aa-home .sect-title::after{content:"";display:block;width:52px;height:4px;border-radius:var(--r-full);background:var(--accent,var(--teal));margin-top:var(--space-12)}
.aa-home .sect-head .more{margin-left:auto;align-self:center;white-space:nowrap}
.aa-home .sect-head .more:hover{border-color:var(--accent,var(--teal));color:var(--accent,var(--teal-ink));background:var(--accent-soft,var(--paper))}

/* 分區主題色 */
.aa-home .theme-teal {--accent:#026462;--accent-soft:#e3efee;--accent-line:#b3d2d0}
.aa-home .theme-blue {--accent:#15659f;--accent-soft:#e3f0fa;--accent-line:#b7dbf1}
.aa-home .theme-gold {--accent:#946400;--accent-soft:#fbf1d6;--accent-line:#ecd6a0}
.aa-home .theme-coral{--accent:#b9501f;--accent-soft:#fbe8de;--accent-line:#f0ccb6}
.aa-home .theme-green{--accent:#0f6b34;--accent-soft:#e4f3e9;--accent-line:#bfe1cc}
html.hc .aa-home [class*="theme-"]{--accent-soft:#fff;--accent-line:var(--accent)}
.aa-home [class*="theme-"] .card:hover{border-color:var(--accent-line)}
.aa-home .sdg:hover{transform:translateY(-3px) scale(1.03)}

/* 輪播 */
.aa-home .carousel{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--hair);margin-top:var(--space-40);background:#fff;box-shadow:0 18px 50px rgba(20,60,55,.10)}
.aa-home .car-track{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.aa-home .car-track > .is-clone{user-select:none}
.aa-home .slide{flex:0 0 100%;min-height:460px;display:grid;grid-template-columns:1.08fr .92fr;align-items:stretch}
.aa-home .slide-1{--accent:#026462;background:radial-gradient(70% 80% at 78% 12%,#d3e7e5 0%,transparent 58%),radial-gradient(60% 70% at 8% 86%,#e7f0ef 0%,transparent 55%),linear-gradient(150deg,#f0f7f6 0%,#fff 70%)}
.aa-home .slide-2{--accent:#946400;background:radial-gradient(72% 80% at 80% 16%,#f7e9c8 0%,transparent 56%),radial-gradient(60% 70% at 8% 88%,#f3f1e6 0%,transparent 55%),linear-gradient(150deg,#fbf6ea 0%,#fff 70%)}
.aa-home .slide-3{--accent:#0f6b34;background:radial-gradient(72% 80% at 80% 16%,#d6ecdc 0%,transparent 56%),radial-gradient(60% 70% at 8% 88%,#e9f1ec 0%,transparent 55%),linear-gradient(150deg,#eef7f1 0%,#fff 70%)}
html.hc .aa-home .slide{background:#fff}
.aa-home .slide-body{align-self:center;padding:var(--space-40) clamp(var(--space-40),5vw,var(--space-64)) 5rem;max-width:600px}
.aa-home .slide-eyebrow{display:inline-flex;align-items:center;gap:var(--space-10);font-family:var(--sans);font-size:var(--text-base);letter-spacing:.04em;color:var(--accent,var(--warm));font-weight:700;margin:0 0 var(--space-16)}
.aa-home .slide-eyebrow::before{content:"";width:26px;height:3px;border-radius:var(--r-full);background:var(--accent,var(--warm));flex:0 0 auto}
.aa-home .slide-title{font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.22;margin:0;color:var(--ink);max-width:18ch}
.aa-home .slide-text{font-size:var(--text-lg);color:var(--ink-soft);line-height:1.7;margin:var(--space-18) 0 var(--space-28);max-width:40ch}
.aa-home .slide-cta{display:flex;gap:var(--space-14);flex-wrap:wrap}
.aa-home .slide-cta .btn-primary{background:var(--accent);border-color:var(--accent)}
.aa-home .slide-cta .btn-primary:hover{filter:brightness(.9)}
.aa-home .slide-visual{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.aa-home .slide-visual::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,var(--accent) 0%,transparent 70%);opacity:.10}
.aa-home .slide-visual::after{content:"";position:absolute;width:250px;height:250px;border-radius:50%;border:1.5px dashed var(--accent);opacity:.25}
.aa-home .slide-visual svg{position:relative;width:min(56%,260px);height:auto;color:var(--accent)}
html.hc .aa-home .slide-visual::before,html.hc .aa-home .slide-visual::after{display:none}
@media (max-width:760px){
  .aa-home .slide{grid-template-columns:1fr}
  .aa-home .slide-visual{display:none}
  .aa-home .slide-body{padding:var(--space-40) var(--space-28)}
}
.aa-home .car-ctrl{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:var(--bw-1) solid var(--hair-2);background:rgba(255,255,255,.92);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(20,40,38,.16);z-index:3;transition:.16s}
.aa-home .car-ctrl:hover{background:var(--teal);color:#fff;border-color:var(--teal);transform:translateY(-50%) scale(1.06)}
.aa-home .car-prev{left:var(--space-18)}
.aa-home .car-next{right:var(--space-18)}
.aa-home .car-foot{position:absolute;left:var(--space-22);bottom:var(--space-18);display:flex;align-items:center;gap:var(--space-12);z-index:3}
.aa-home .car-play{width:40px;height:40px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border:var(--bw-1) solid var(--hair-2);border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);cursor:pointer;transition:.16s}
.aa-home .car-play:hover{background:var(--teal);color:#fff;border-color:var(--teal);transform:scale(1.06)}
.aa-home .car-play .ic-play{display:none}
.aa-home .car-play.paused .ic-pause{display:none}
.aa-home .car-play.paused .ic-play{display:block}
.aa-home .car-indicators{position:absolute;left:50%;transform:translateX(-50%);bottom:var(--space-16);display:flex;gap:var(--space-2);z-index:3}
.aa-home .car-indicators button{width:40px;height:40px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.aa-home .car-indicators button::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--hair-2);transition:.16s}
.aa-home .car-indicators button[aria-current="true"]::before{background:var(--teal);width:26px;border-radius:var(--r-full)}
.aa-home .car-indicators button:hover::before{background:var(--teal-ink)}
.aa-home .car-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--hair);z-index:3}
.aa-home .car-bar i{display:block;height:100%;width:0;background:var(--teal)}
.aa-home .car-bar i.run{animation:aaCarfill 5s linear forwards}
.aa-home .carousel:hover .car-bar i.run{animation-play-state:paused}
@keyframes aaCarfill{from{width:0}to{width:100%}}
@media (prefers-reduced-motion:reduce){.aa-home .car-bar i.run{animation:none;width:100%}}

/* 多元培力 快捷鈕 */
.aa-home .quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-20)}
.aa-home .quick{display:flex;align-items:center;gap:var(--space-14);padding:var(--space-20) var(--space-22);border:var(--bw-1) solid var(--teal-line);border-radius:var(--r-xl);background:#fff;color:var(--teal-ink);font-weight:700;font-size:var(--text-lg);transition:.18s;min-height:44px;text-decoration:none}
.aa-home .quick:hover{background:var(--teal-soft);border-color:var(--teal);transform:translateY(-3px);box-shadow:0 12px 28px rgba(2,100,98,.12)}
.aa-home .quick .qi{flex:0 0 auto;width:46px;height:46px;border-radius:var(--r-md);background:var(--teal-soft);border:1px solid var(--teal-line);color:var(--teal);display:flex;align-items:center;justify-content:center}
/* 多元培力四張卡片的 icon 改用正式環境的 go_logo.png（比照 se.wda.gov.tw 首頁按鈕）。
   原生 32x35，置於 46x46 容器中留適度邊距。 */
.aa-home .quick .qi img{width:auto;height:28px;max-width:32px;object-fit:contain}
.aa-home .quick .qx{margin-left:auto;color:var(--teal)}

/* SDGs grid（官方圖） */
.aa-home .sdg-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:var(--space-10)}
.aa-home .sdg{position:relative;aspect-ratio:1;border:none;border-radius:var(--r-md);overflow:hidden;cursor:pointer;padding:0;background:none;transition:.16s;display:block;line-height:0}
.aa-home .sdg img{width:100%;height:100%;object-fit:cover;display:block}
.aa-home .sdg:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 10px 22px rgba(20,40,38,.20)}

/* 圖文卡片 */
.aa-home .card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-28)}
.aa-home .card{position:relative;display:flex;flex-direction:column;border:1px solid var(--hair);border-radius:var(--r-xl);overflow:hidden;background:#fff;transition:transform .2s,box-shadow .2s,border-color .2s}
.aa-home .card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:2;background:var(--accent,var(--teal));transform:scaleX(0);transform-origin:left;transition:transform .28s}
.aa-home .card:hover{border-color:var(--accent-line,var(--warm-line));box-shadow:0 16px 40px rgba(20,60,55,.14);transform:translateY(-4px)}
.aa-home .card:hover::before{transform:scaleX(1)}
.aa-home .card .thumb{aspect-ratio:16/10;position:relative;overflow:hidden;background:linear-gradient(135deg,var(--accent-soft,var(--warm-soft)) 0%,var(--teal-soft) 130%);display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-family:var(--sans);font-size:0}
.aa-home .card .thumb img{width:100%;height:100%;object-fit:cover}
.aa-home .card .thumb::before{content:"";width:46px;height:46px;background:var(--accent,var(--warm));opacity:.42;transition:transform .3s;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Ccircle cx='8.5' cy='10' r='1.7'/%3E%3Cpath d='M21 15l-5-5L6 19'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Ccircle cx='8.5' cy='10' r='1.7'/%3E%3Cpath d='M21 15l-5-5L6 19'/%3E%3C/svg%3E") center/contain no-repeat}
.aa-home .card .thumb:has(img)::before{display:none}
/* 影音標示徽章（首頁卡片＋內頁列表卡共用；原本只有 class 沒有樣式，一併補上）*/
.video-badge{position:absolute;top:var(--space-10);left:var(--space-10);z-index:2;display:inline-flex;align-items:center;gap:4px;background:rgba(2,100,98,.88);color:#fff;font-family:var(--sans);font-size:var(--text-sm);font-weight:700;padding:var(--space-2) var(--space-10);border-radius:var(--r-full)}
.aa-home .card .body{padding:var(--space-20) var(--space-20) var(--space-18);display:flex;flex-direction:column;gap:var(--space-12);flex:1}
.aa-home .card .tags{display:flex;gap:var(--space-6);flex-wrap:wrap}
.aa-home .sdg-tag{width:28px;height:28px;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;overflow:hidden}
.aa-home .sdg-tag img{width:100%;height:100%;object-fit:cover}
.aa-home .card h3{font-family:var(--sans);font-size:var(--text-lg);font-weight:700;line-height:1.45;margin:0;color:var(--ink);transition:color .15s;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.aa-home .card:hover h3{color:var(--accent,var(--teal-ink))}
.aa-home .card h3 a{color:inherit;text-decoration:none}
.aa-home .card h3 a::after{content:"";position:absolute;inset:0;z-index:3}
.aa-home .card h3 a:focus,.aa-home .card h3 a:focus-visible{outline:none;box-shadow:none}
.aa-home .card:has(h3 a:focus-visible){outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 2px #fff,0 0 0 6px var(--focus),0 0 0 8px var(--focus-ring)}
.aa-home .card p{font-size:var(--text-base);color:var(--ink-soft);line-height:1.65;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.aa-home .card .date{position:relative;margin-top:auto;padding-top:var(--space-14);padding-right:84px;border-top:1px solid var(--hair);display:flex;align-items:center;gap:var(--space-8);width:100%;font-family:var(--mono);font-size:var(--text-sm);letter-spacing:.04em;color:var(--ink-faint)}
.aa-home .card .date::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent,var(--teal));flex:0 0 auto}
.aa-home .card .read-more{position:absolute;right:0;top:var(--space-14);font-family:var(--sans);font-weight:700;letter-spacing:0;color:var(--accent,var(--teal-ink));transition:transform .18s}
.aa-home .card:hover .read-more{transform:translateX(3px)}

/* 近期活動 橫向 scroller */
.aa-home .scroller-wrap{position:relative}
.aa-home .scroller{display:flex;gap:var(--space-24);overflow-x:auto;padding:var(--space-12) 0;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
.aa-home .scroller::-webkit-scrollbar{width:0;height:0;display:none}
.aa-home .scroller .card{flex:0 0 300px;scroll-snap-align:start}
.aa-home .scroller .period{font-family:var(--mono);font-size:var(--text-base);font-weight:600;color:var(--teal-ink);background:var(--teal-soft);border:1px solid var(--teal-line);border-radius:var(--r-full);padding:var(--space-2) var(--space-12);align-self:flex-start}
.aa-home .scroll-btn{position:absolute;top:38%;width:46px;height:46px;border-radius:50%;border:var(--bw-1) solid var(--hair-2);background:#fff;color:var(--accent,var(--teal-ink));cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(20,40,38,.16);z-index:5;transition:.14s}
.aa-home .scroll-btn:hover{border-color:var(--accent,var(--teal));background:var(--accent,var(--teal));color:#fff}
.aa-home .scroll-prev{left:-8px}
.aa-home .scroll-next{right:-8px}
/* 近期活動 分頁定位點（比照 banner .car-indicators）*/
.aa-home .scroller-dots{display:flex;justify-content:center;gap:var(--space-2);margin-top:var(--space-16)}
.aa-home .scroller-dots button{width:40px;height:40px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.aa-home .scroller-dots button::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--hair-2);transition:.16s}
.aa-home .scroller-dots button[aria-current="true"]::before{background:var(--accent,var(--teal));width:26px;border-radius:var(--r-full)}
.aa-home .scroller-dots button:hover::before{background:var(--teal-ink)}

/* 區塊底色帶 */
.aa-home .band{background:var(--accent-soft,var(--warm-soft));border-top:1px solid var(--accent-line,var(--warm-line));border-bottom:1px solid var(--hair)}
html.hc .aa-home .band{background:#fff}

/* 響應式 */
@media (max-width:1000px){
  .aa-home .sdg-grid{grid-template-columns:repeat(6,1fr)}
  .aa-home .quick-grid{grid-template-columns:repeat(2,1fr)}
  .aa-home .card-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .p-bar,.p-nav > ul,.aa-footer .f-top,.aa-footer .f-base{padding-left:var(--space-22);padding-right:var(--space-22)}
  .aa-home .p-main{padding-left:var(--space-22);padding-right:var(--space-22)}
  .aa-home .sdg-grid{grid-template-columns:repeat(4,1fr)}
  .aa-home .card-grid{grid-template-columns:1fr}
  .aa-home .sect-head{flex-wrap:wrap}
}

/* 字級控制：--fs 預設 1（=browser 16px），按中/大才放大；舊頁多為 px 不受影響 */
html{font-size:calc(16px * var(--fs))}

/* 圖片型輪播（首頁 AD banner）：slide 為整張圖，覆寫文字版 grid 排版 */
.aa-home .carousel.is-image .slide{display:block;min-height:0}
.aa-home .carousel.is-image .slide-link{display:block;line-height:0;width:100%}
.aa-home .carousel.is-image .slide-link img{width:100%;height:auto;display:block}
/* slide-link 滿版圖：外擴 focus 環會被 carousel overflow:hidden 裁掉，改用內凹環（白/金/棕三層） */
.aa-home .carousel.is-image .slide-link:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 5px var(--focus),inset 0 0 0 7px var(--focus-ring)}

/* ============================================================
   內頁（命名空間 .aa-page）— 計畫說明等內容頁，比照首頁設計系統
   保留既有 JS hook class（.aboutTopMenu/[role=tab]/.a_topBox/#contentarea/.cell）
   ============================================================ */
.mainBox{overflow-x:clip}
.aa-page{max-width:var(--maxw);margin:0 auto;padding:var(--space-32) var(--space-40) var(--space-64);font-family:var(--sans);line-height:1.7;color:var(--ink)}
.aa-page :focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm);box-shadow:0 0 0 2px #fff,0 0 0 6px var(--focus),0 0 0 8px var(--focus-ring)}
.aa-page :focus:not(:focus-visible){outline:none;box-shadow:none}

/* 頁首 hero：麵包屑 → 明體標題 → banner 圖 */
.aa-page .pg-crumb{font-family:var(--mono);font-size:var(--text-sm);letter-spacing:.04em;color:var(--ink-faint);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8)}
.aa-page .pg-crumb a{color:var(--teal-ink);text-decoration:none}
.aa-page .pg-crumb a:hover{text-decoration:underline}
.aa-page .pg-crumb span[aria-hidden]{opacity:.45}
.aa-page .pg-title{font-family:var(--serif);font-weight:700;font-size:2rem;color:var(--teal-ink);margin:var(--space-12) 0 0;line-height:1.25}
.aa-page .pg-lead{font-size:var(--text-lg);color:var(--ink-soft);margin:var(--space-12) 0 0;max-width:60ch}
.aa-page .pg-banner{margin-top:var(--space-24);overflow:hidden;width:100vw;position:relative;left:50%;transform:translateX(-50%);border-radius:0;border:none;box-shadow:none}
.aa-page .pg-banner img{width:100%;height:auto;display:block;max-height:460px;object-fit:cover}

/* 章節 tab 列（沿用 .aboutTopMenu/[role=tab]，JS 不動）*/
.aa-page .aboutTopMenu{list-style:none;margin:var(--space-32) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-8);border-bottom:1px solid var(--hair)}
.aa-page .aboutTopMenu li{margin:0}
.aa-page .aboutTopMenu button{-webkit-appearance:none;appearance:none;border:none;background:none;font-family:var(--sans);font-size:var(--text-base);font-weight:700;color:var(--ink-soft);cursor:pointer;min-height:48px;padding:0 var(--space-18);border-bottom:3px solid transparent;transition:.14s;margin-bottom:-1px}
.aa-page .aboutTopMenu button:hover{color:var(--teal-ink);background:var(--teal-soft)}
.aa-page .aboutTopMenu button[aria-selected="true"],.aa-page .aboutTopMenu button.btn_in{color:var(--teal-ink);border-bottom-color:var(--teal)}

/* 內容面板 + 內文排版（含後台 HTML 與 introduce）*/
/* CKEditor 內文容器基準字級 1.125rem：讓「沒有行內 font-size」的純文字(如頁尾創用CC授權段落)
   也對齊導覽內文(21.6px＠--fs:1.2)，不會只有帶行內字級的段落被下面的 !important 覆寫規則拉大、純文字段落卻停在 1rem。
   #contentarea 本身也設 1.125rem，涵蓋「內容直接掛在 #contentarea、沒有 .a_infoBox/.bigBox 外層」的文章 Detail 頁。
   .proj-intro(導覽) 維持原 var(--text-base)：它的 p 另有 style.css `.proj-intro p{1.125rem}` 直接規則，容器動了反而多餘且擴大影響面。 */
.aa-page #contentarea{margin-top:var(--space-28);font-size:1.125rem}
.aa-page .a_infoBox,.aa-page .bigBox_a01{font-size:1.125rem;line-height:1.85;color:var(--ink)}
.aa-page .proj-intro{font-size:var(--text-base);line-height:1.85;color:var(--ink)}
.aa-page #contentarea h1,.aa-page #contentarea h2,.aa-page .proj-intro h2{font-family:var(--serif);color:var(--teal-ink);line-height:1.3;font-size:1.5rem;margin:var(--space-28) 0 var(--space-12)}
.aa-page #contentarea h3{font-family:var(--sans);font-size:var(--text-lg);margin:var(--space-20) 0 var(--space-8);color:var(--ink)}
/* CKEditor 內文 <h1~h3> 裡的巢狀 span 常自帶行內 font-size/color/font-family(Word貼上殘留，如英文版 MEPP/EEP
   標題是 <h2><span style="font-size:20px"><strong><span style="color:rgb(0,158,179)">…</span></strong></span></h2>)，
   會蓋掉上面 heading 規則設定的 1.5rem/teal/serif，導致標題渲染成 20px+異色、跟「Social Innovation」(用 <p> 手刻、
   已被 p:first-child 規則強制歸一)的標題樣式不一致。用 inherit 讓每一層 span 都吃回所屬 heading 的字級/色/字型
   (h2→1.5rem/teal，h3→1.25rem/ink)，font-weight 維持不動(<strong> 照舊粗體)。
   ⚠ 必須同時列出 `h2 [style*="font-size"]` 變體：上方 body 正規化規則 `#contentarea [style*="font-size"]{1.125rem!important}`
   特異度(1,2,0) 高於 `h2 *`(1,1,1)，會把標題裡帶行內 font-size 的那層 span 壓回 1.125rem、子層再 inherit 下去全變小。
   加 `[style*="font-size"]` 讓標題規則變成(1,2,1) 特異度、確實蓋過 body 規則。已用同源實測確認三層 span 都吃回 1.5rem。 */
.aa-page #contentarea h1 *,.aa-page #contentarea h2 *,.aa-page #contentarea h3 *,
.aa-page #contentarea h1 [style*="font-size"],.aa-page #contentarea h2 [style*="font-size"],.aa-page #contentarea h3 [style*="font-size"]{font-size:inherit!important;color:inherit!important;font-family:inherit!important}
/* 內容區塊第一個 heading 就是文章標題(如 MEPP/EEP)，把上緣 margin 歸零，跟「Social Innovation」的 <p> 標題
   (margin-top:0)對齊上緣位置；Word 貼上常在標題前塞 <meta>/<title> 非渲染節點，故用 :first-of-type 而非 :first-child。 */
.aa-page #contentarea .bigBox_a01>h1:first-of-type,.aa-page #contentarea .bigBox_a01>h2:first-of-type{margin-top:0}
/* CKEditor 內文「假標題」比照導覽「社會創新」的 h2 樣式：這批文章沒有語意化 <h1>~<h3>，
   標題一律是內文第一段用 <b>/<strong>+大字級+顏色手刻出來的(如「社會創新組織學習－社會創新案例製作訓練」)。
   用 :first-child 鎖定「CKEditor 內容區塊的第一段」比照真標題視覺。
   ⚠ :not(:has(img)) 排除「SDGs介紹」這種第一段是純圖片的分頁：一開始沒排除，text-align:left!important
   把圖片原本靠 <p style="text-align:center"> 置中的排版強制打成靠左，跟正式站的置中畫面不一致(使用者截圖回報)。
   ⚠ :not(.aa-ck-notitle) 排除「一、計畫說明」這種中文數字條列的段落標題：HTML 結構跟真標題一模一樣(第一段+
   粗體+大字級+顏色)，CSS 選擇器分不出「這是文章標題」還是「這是段落編號」，只能靠文字內容判斷——已改用
   script-aa.js 的 markSectionHeader() 偵測「開頭是中文數字+頓號」的第一段，動態加上 aa-ck-notitle class 排除，
   讓它維持字級正規化(1.125rem)的原樣，不套用大標題視覺(使用者用截圖回報「多元就業開發方案/培力就業計畫」
   這兩個分頁不該套用，只有真正的文章標題「社會創新」等 4 個才要)。 */
/* ⚠⚠ 只鎖 .bigBox_a01>p:first-child，不可加「.aa-page #contentarea>p:first-child」的裸選擇器：
   .bigBox_a01 只有「計畫說明/Projects」分頁的 Detail partial 才有(那裡的第一段確實是手刻假標題)；
   一般文章 Detail(案例故事/社創推廣/達人專欄/國際發展/社創地球村) 的內容是「直接掛在 #contentarea」、
   第一個 <p> 就是正文開頭(常整段用 <br> 連在一起)，若套 p:first-child 標題樣式會把整段正文變成粗體明體大字。
   (2026-07-09 使用者截圖回報「社創地球村文章內文字型變得跟標題一樣」，就是裸選擇器誤傷；已移除。) */
.aa-page #contentarea .bigBox_a01>p:first-child:not(:has(img)):not(.aa-ck-notitle){font-family:var(--serif);color:var(--teal-ink);line-height:1.3;margin:0 0 var(--space-20) !important;text-align:left !important}
/* ⚠ 用萬用選擇器 * 而非 [style*="font-size"]：CKEditor 常把 font-size/color/font-family 分散在不同層的巢狀 span
   (如 <span style="font-size:36px"><span style="color:#339999">文字</span></span>)，只鎖 font-size 那層會漏掉更內層自帶
   color 的 span(它自己的行內 color 贏過父層繼承，父層蓋不到它)。已用同源實測確認：改用 * 才能讓每一層都被強制歸一。 */
.aa-page #contentarea .bigBox_a01>p:first-child:not(:has(img)):not(.aa-ck-notitle) *{font-size:1.5rem!important;color:var(--teal-ink)!important;font-family:var(--serif)!important}
/* 明確設定內文 <p> 字級 1.125rem：舊 style.css 有全域 `p{font-size:0.875rem}`(直接規則)會蓋掉容器繼承的 1.125rem，
   帶行內 font-size 的段落靠上面 !important 規則沒事，但「純 <p>」(如頁尾創用CC授權段落)會漏接、掉回 0.875rem(16.8px)、比導覽小。
   `.aa-page #contentarea p` 特異度(0,1,1,1) 穩勝全域 `p`(0,0,0,1)。已用同源實測：純CC段落套用後 21.6px＝導覽同級。
   字型維持不動(導覽本身也是 Bitter，字型非問題所在，僅字級)。 */
.aa-page #contentarea p{margin:0 0 var(--space-16);font-size:1.125rem}
.aa-page #contentarea ul,.aa-page #contentarea ol{margin:0 0 var(--space-16) var(--space-20);padding:0}
.aa-page #contentarea li{margin:0 0 var(--space-6)}
.aa-page #contentarea a{color:var(--teal-ink);text-decoration:underline;text-underline-offset:2px}
.aa-page #contentarea img{max-width:100%;height:auto;border-radius:var(--r-md)}
/* Word 貼上殘留的絕對定位圖片(常見於 CKEditor 內容)：inline style 常帶 position:absolute + 天文數字 z-index
   (如 251659264／-251658240，Word OOXML 圖層排序的匯出殘值，非刻意設計)，且沒有 top/left 只有巨大的
   margin-left/margin-top(pt為單位)。因為沒有定位祖先，會相對 viewport 定位、z-index 又遠高於 header 的 50，
   捲動時整張圖會浮出頁面、蓋掉 sticky header(小/中/大字級鈕等)。強制打回 static 正常流排版，徹底根除此類問題，
   不論該筆內容原本的 z-index/margin 數值多離譜都無法再逃出 #contentarea。
   ⚠ display 用 inline-block 而非 block：這批圖常是「兩張同 margin-top、不同 margin-left」成對出現，
   代表 Word 原始排版是左右並排(margin-left 較大的那張=右側)，用 block 會強制各自換行變成上下堆疊，
   破壞原意。inline-block 讓它們維持並排、寬度不夠(手機)時比照文字自動換行到下一列，兩全其美。
   已用同源實測：桌機寬度(1400px)並排成功、窄視窗(644px)自動換行不重疊，且兩者都無法脫離 #contentarea。 */
.aa-page #contentarea img[style*="absolute"]{position:static!important;z-index:auto!important;left:auto!important;top:auto!important;margin:0 var(--space-12) var(--space-16) 0 !important;display:inline-block!important;vertical-align:top}
/* Word 貼上殘留的 float 圖片(常見於 CKEditor 內容)：inline style 帶 float:left/right，讓後面的文字繞著圖片旁邊排(左右同一排)。
   使用者要求「圖文不要左右並排、改上下堆疊(比照舊版)」。強制 float:none + display:block 讓圖片自成一列、文字接在下方。
   margin-inline:auto 水平置中(使用者選「保留原尺寸置中」而非放大到滿欄，避免原生 px 圖被上採樣而模糊)。
   只鎖 [style*="float"]，不影響上方 absolute 成對圖(維持 inline-block 並排)、也不影響一般置中/滿版圖。 */
.aa-page #contentarea img[style*="float"]{float:none!important;display:block;margin:var(--space-8) auto var(--space-16)}
/* 頁尾「創用 CC」授權徽章(固定 88x31)：原生 px 圖，只會跟瀏覽器縮放、不會跟網站字級控制(小/中/大)連動，
   字放大時徽章顯得偏小、比例失衡。用 rem 寬度改成跟 html 字級(--fs 驅動)一起縮放：4.6rem＠--fs:1.2≈88px(原生大小)、
   --fs:1.4≈103px、--fs:1≈74px。只鎖定 <a rel="license"> 內的徽章，不影響內文照片/大型計畫架構圖(維持容器相對寬度)。 */
.aa-page #contentarea a[rel="license"] img{width:4.6rem;height:auto;border-radius:0}
.aa-page #contentarea table{border-collapse:collapse;width:100%;margin:0 0 var(--space-16)}
.aa-page #contentarea th,.aa-page #contentarea td{border:1px solid var(--hair-2);padding:var(--space-8) var(--space-12);text-align:left}
.aa-page #contentarea th{background:var(--teal-soft);color:var(--teal-ink)}
/* Word 貼上的表格幾乎都自帶固定寬(全站 177 個表格：76 個 width:1100px、其餘 500~900px 或 577.5pt 等)，
   且 914 個 td/th 也有固定寬。這些 inline 寬度優先序高於上面的 width:100%，等於把版面釘死在原始像素上；
   字級放大(--fs)後文字撐不開就會溢出容器、逼出橫向捲軸，違反 1.4.10 重排與 1.4.4 文字調整大小。
   用 max-width 收斂而非強制拉寬：窄表格維持原樣，過寬的被容器夾住；同時解除儲存格固定寬讓內容自然折行。
   不改後台內容、不用 display:block(那會破壞表格語意，螢幕報讀就唸不出列欄關係)。 */
.aa-page #contentarea table{max-width:100%!important;table-layout:auto}
.aa-page #contentarea th,.aa-page #contentarea td{width:auto!important;height:auto!important;overflow-wrap:break-word;word-break:break-word}
.aa-page #contentarea table img{max-width:100%;height:auto}
/* CKEditor 後台內容行內 font-size（多半是 Word 貼上殘留的 12~23px）一律改成內文級距 1.125rem，
   對齊「導覽」段落（style.css `.proj-intro p{font-size:1.125rem}`＝21.6px＠--fs:1.2）。
   ⚠ 這裡用固定值 1.125rem 而非 unset：unset 會讓行內字級退回容器的 var(--text-base)=1rem(19.2px)，
   但導覽段落被 style.css 直接指定成 1.125rem(21.6px)，兩者會差一級、視覺上「其他頁籤比導覽小」。已用瀏覽器實測兩者現在同為 21.6px。
   標題(如「一、計畫說明」)原本就靠 <b>+teal 色 span 區隔、不靠字級，被拉平到同尺寸不影響其辨識。 */
.aa-page #contentarea [style*="font-size"]{font-size:1.125rem!important}

/* introduce「導覽」：小標 / SDG bar / 參與卡片 / 外部連結 */
.aa-page .secTitle{font-family:var(--serif);font-size:1.5rem;color:var(--teal-ink);margin:var(--space-36) 0 var(--space-16);padding-left:var(--space-14);border-left:5px solid var(--teal);line-height:1.3}
.aa-page .proj-intro-sdgsbar{display:flex;flex-wrap:wrap;gap:var(--space-16);align-items:center;background:var(--teal-soft);border:1px solid var(--teal-line);border-radius:var(--r-lg);padding:var(--space-16) var(--space-20);margin:var(--space-20) 0}
.aa-page .proj-intro-sdgsbar .hint{display:flex;align-items:center;gap:var(--space-12);font-weight:700;color:var(--teal-ink)}
.aa-page .proj-intro-sdgsbar .cus-row.sdgsbar{display:flex;flex-wrap:wrap;gap:var(--space-10);align-items:center}
.aa-page .SgdsBox{width:58px;height:58px;border-radius:var(--r-md);overflow:hidden;display:inline-flex;align-items:center;justify-content:center;transition:.16s;text-decoration:none}
/* 計畫說明「導覽」頁的 SDGs 圖示加大 10%(58→64px)：只鎖定 .proj-intro-sdgsbar 範圍內，
   不影響 Activity RecentList/RecordList、Article Search/List、SdgsBar.cshtml 等其他頁面共用的 .SgdsBox 預設 58px。 */
.aa-page .proj-intro-sdgsbar .SgdsBox{width:64px;height:64px}
.aa-page .SgdsBox img{width:100%;height:100%;object-fit:cover;display:block}
.aa-page .SgdsBox:hover{transform:translateY(-2px)}
.aa-page .SgdsBox.other{background:var(--teal);color:#fff;font-weight:700;font-size:var(--text-sm);text-align:center;padding:var(--space-6);line-height:1.3}
.aa-page .sortSec{display:flex;flex-wrap:wrap;gap:var(--space-24);margin-top:var(--space-12)}
.aa-page .sortBox{flex:1 1 320px;display:flex;flex-direction:column;gap:var(--space-14)}
.aa-page .sortTitle{font-family:var(--sans);font-weight:900;font-size:var(--text-lg);color:#fff;background:var(--teal);border-radius:var(--r-full);padding:var(--space-8) var(--space-20);align-self:flex-start}
.aa-page .cell{display:flex;gap:var(--space-14);align-items:flex-start;background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);padding:var(--space-16);transition:.18s}
.aa-page .cell:hover{border-color:var(--teal);box-shadow:0 10px 26px rgba(20,60,55,.10);transform:translateY(-2px)}
.aa-page .cell > img{flex:0 0 auto;width:56px;height:56px;object-fit:contain}
.aa-page .cell h3{font-family:var(--sans);font-weight:700;font-size:var(--text-lg);color:var(--teal-ink);margin:0 0 var(--space-6)}
.aa-page .cell ul{margin:0;padding-left:var(--space-18);color:var(--ink-soft);font-size:var(--text-base);line-height:1.65}
.aa-page .moreBox{display:flex;flex-wrap:wrap;gap:var(--space-16);align-items:center;margin-top:var(--space-12)}
.aa-page .moreBox a{display:inline-flex;align-items:center;gap:var(--space-8);min-height:48px;padding:var(--space-10) var(--space-20);border:var(--bw-1) solid var(--hair-2);border-radius:var(--r-full);color:var(--teal-ink);font-weight:700;text-decoration:none;transition:.14s}
.aa-page .moreBox a:hover{border-color:var(--teal);background:var(--teal-soft)}
.aa-page .moreBox a img{height:34px;width:auto}

/* 回首頁 */
.aa-page .goHome{margin-top:var(--space-40)}
.aa-page .goHome a{display:inline-flex;align-items:center;min-height:48px;padding:var(--space-10) var(--space-24);border-radius:var(--r-full);background:var(--teal);color:#fff;font-weight:700;text-decoration:none;transition:.14s}
.aa-page .goHome a:hover{background:var(--teal-strong)}

@media (max-width:920px){
  .aa-page{padding:var(--space-20) var(--space-20) var(--space-48)}
  .aa-page .aboutTopMenu{gap:0;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .aa-page .aboutTopMenu button{white-space:nowrap}
}

/* ---- 列表頁家族（多元商品/電子書/培力單位）：篩選列 / 卡片格 / 分頁 ---- */
.aa-page .searchBox{list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-12);margin:var(--space-24) 0 0;padding:0;align-items:center}
.aa-page .searchBox > li{margin:0}
/* 搜尋膠囊：與 header .p-search 同一套視覺，供 .searchBox（多元商品）與 .SdgsBar（多元培力單位/文章/活動共用）套用 */
.aa-page .searchBox .search,.aa-page .SdgsBar .search{display:flex;align-items:center;height:48px;border:var(--bw-1) solid var(--hair-2);border-radius:var(--r-full);background:#fff;padding:0 var(--space-6) 0 var(--space-16);transition:.14s}
.aa-page .searchBox .search:focus-within,.aa-page .SdgsBar .search:focus-within{border-color:var(--teal);box-shadow:var(--field-focus-ring)}
/* 搜尋框 input min-width 統一 230px：原本通用規則是 210px、但 SdgsBar 頁另有 input#Search{230px} 覆寫，
   造成「商品總覽/近期活動(210)」與「多元培力單位/案例故事/國際發展/社創推廣/達人專欄(230)」兩種寬度並存、視覺不一致。
   使用者決定以 230px 為全站標準，這裡直接統一，下方原本的 .SdgsBar input#Search 專屬覆寫已移除(變多餘)。
   ⚠ max-width:none 必要：舊 style.css 有 `.SdgsBar input{max-width:150px}`(特異度 0,1,1)沒被本規則的 min-width 蓋掉
   (不同屬性)，min(230)>max(150) 讓 SdgsBar 的 input 被卡死在 230px、無法像 searchBox 一樣長到自然寬(265px)，
   造成 placeholder「請輸入關鍵字按ENTER搜尋」最後一字被搜尋 icon 蓋住(使用者回報)。加 max-width:none 解除這個舊上限、
   讓 SdgsBar 與 searchBox 的 input 寬度一致、placeholder 完整顯示不被蓋。已同源實測兩者皆 265px、gap 一致。 */
.aa-page .searchBox .search input,.aa-page .SdgsBar .search input{border:none;outline:none;background:none;font-size:var(--text-base);color:var(--ink);min-width:230px;max-width:none;font-family:var(--sans)}
.aa-page .searchBox .search button,.aa-page .SdgsBar .search button{width:36px;height:36px;border:none;border-radius:50%;background:var(--teal);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;order:2}
.aa-page .searchBox .search button svg,.aa-page .SdgsBar .search button svg{width:16px;height:16px}
/* 覆寫舊 .styled-select 外層 div（原本 height:35px;overflow:hidden;箭頭背景;置中）*/
.aa-page .styled-select{width:auto;min-width:0;height:auto;border:none;overflow:visible;background:none;text-align:left;margin:0}
.aa-page .styled-select select{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:auto;height:48px;min-width:170px;border:var(--bw-1) solid var(--hair-2);border-radius:var(--r-md);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%23026462' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 14px center;background-size:12px;padding:0 38px 0 var(--space-14);font-size:var(--text-base);line-height:1.2;color:var(--ink);font-family:var(--sans);text-align:left;cursor:pointer}
.aa-page .styled-select select:hover{border-color:var(--teal)}
.aa-page .styled-select select:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-color:var(--teal);box-shadow:0 0 0 2px #fff,0 0 0 6px var(--focus),0 0 0 8px var(--focus-ring)}
.aa-page .styled-select select option{text-align:left;color:var(--ink)}

.aa-page .prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-28);margin-top:var(--space-28)}
.aa-page .prod-grid.grid-2col{grid-template-columns:repeat(2,1fr)}
.aa-page .prod-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--hair);border-radius:var(--r-xl);overflow:hidden;background:#fff;transition:transform .2s,box-shadow .2s,border-color .2s}
.aa-page .prod-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(20,60,55,.12);border-color:var(--teal-line)}
.aa-page .prod-thumb{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--teal-soft);line-height:0}
.aa-page .prod-thumb.is-book{aspect-ratio:3/4}
.aa-page .prod-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* 單位標章／Logo 型圖片（非商品攝影）：白底 + 完整顯示，避免滿版裁切造成的錯覺 */
.aa-page .prod-thumb.is-logo{aspect-ratio:16/9;background:#fff;padding:var(--space-16);box-sizing:border-box;border-bottom:1px solid var(--hair)}
.aa-page .prod-thumb.is-logo img{object-fit:contain}
.aa-page .prod-body{padding:var(--space-16) var(--space-18) var(--space-18);display:flex;flex-direction:column;gap:var(--space-8);flex:1}
.aa-page .prod-unit{font-family:var(--mono);font-size:var(--text-sm);color:var(--ink-faint);letter-spacing:.04em}
.aa-page .prod-name{font-family:var(--sans);font-weight:700;font-size:var(--text-lg);line-height:1.4;margin:0;color:var(--ink)}
.aa-page .prod-name a{color:inherit;text-decoration:none}
.aa-page .prod-card:hover .prod-name a{color:var(--teal-ink)}
.aa-page .prod-name a::after{content:"";position:absolute;inset:0;z-index:1}
.aa-page .prod-name a:focus,.aa-page .prod-name a:focus-visible{outline:none;box-shadow:none}
.aa-page .prod-card:has(.prod-name a:focus-visible){outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 2px #fff,0 0 0 6px var(--focus),0 0 0 8px var(--focus-ring)}
.aa-page .prod-meta{display:flex;flex-wrap:wrap;gap:var(--space-8);align-items:center}
.aa-page .prod-meta .pill{font-family:var(--mono);font-size:var(--text-sm);background:var(--teal-soft);color:var(--teal-ink);border:1px solid var(--teal-line);border-radius:var(--r-full);padding:var(--space-2) var(--space-10)}
/* 標籤查詢頁的可點擊標籤 pill：卡片本身有 stretched-link(prod-name a::after,z-index:1)覆蓋全卡，
   這裡的 pill 是卡片內第二層可點擊連結，需要更高 z-index 才不會被全卡連結攔截點擊 */
.aa-page .prod-meta a.pill{position:relative;z-index:2;text-decoration:none;transition:.14s}
.aa-page .prod-meta a.pill:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.aa-page .prod-desc{font-size:var(--text-base);color:var(--ink-soft);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.aa-page .prod-sdgs{display:flex;flex-wrap:wrap;gap:var(--space-6);margin-top:auto}
.aa-page .prod-sdgs .SgdsBox_s{width:30px;height:30px;border-radius:var(--r-sm);overflow:hidden}
.aa-page .prod-sdgs .SgdsBox_s img{width:100%;height:100%;object-fit:cover;display:block}
.aa-page .prod-price{margin-top:auto;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-8);font-family:var(--mono);color:var(--ink-soft);font-size:var(--text-sm)}
.aa-page .prod-price .now{font-size:1.15rem;font-weight:700;color:var(--teal-ink)}
.aa-page .prod-price .was{text-decoration:line-through;color:var(--ink-faint)}
.aa-page .pg-empty{text-align:center;color:var(--ink-faint);padding:var(--space-48) 0;font-size:var(--text-lg)}

/* 分頁 PagedList */
.aa-page .pg-pager{margin-top:var(--space-40)}
.aa-page .pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-6);list-style:none;padding:0;margin:0}
.aa-page .pagination > li > a,.aa-page .pagination > li > span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 var(--space-12);border:var(--bw-1) solid var(--hair-2);border-radius:var(--r-md);color:var(--ink-soft);text-decoration:none;font-family:var(--mono);font-size:var(--text-base);transition:.14s}
.aa-page .pagination > li > a:hover{border-color:var(--teal);color:var(--teal-ink);background:var(--teal-soft)}
.aa-page .pagination .active span,.aa-page .pagination .active a,.aa-page .pagination span.active,.aa-page .pagination a.active{background:var(--teal)!important;border-color:var(--teal)!important;color:#fff!important;font-weight:700}
.aa-page .pagination > .disabled > span,.aa-page .pagination > .disabled > a{opacity:.4;pointer-events:none}

@media (max-width:1024px){.aa-page .prod-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.aa-page .prod-grid{grid-template-columns:1fr}}

/* 多元培力單位：共用 SdgsBar 篩選（僅 .aa-page 內生效，不影響其他頁的 SdgsBar）*/
.aa-page .sdgsSearchBar{margin:var(--space-24) 0 0}
.aa-page .sdgsSearchBar .col-1{display:none}
.aa-page .sdgsSearchBar .col-10{max-width:100%;flex:1 1 100%;display:grid;grid-template-columns:repeat(10,103px);gap:var(--space-8);justify-content:start}
.aa-page .sdgsSearchBar .SgdsBox{position:relative;width:103px;height:103px;border-radius:var(--r-md);overflow:hidden;cursor:pointer;transition:.14s;margin:0}
.aa-page .sdgsSearchBar .SgdsBox img{width:100%;height:100%;object-fit:cover;display:block}
.aa-page .sdgsSearchBar .SgdsBox:hover{transform:translateY(-2px)}
.aa-page .sdgsSearchBar .SgdsBox .mask{position:absolute;inset:0;background:rgba(2,100,98,.55);display:flex;align-items:center;justify-content:center}
.aa-page .sdgsSearchBar .SgdsBox .mask img{width:42%;height:auto}
@media (max-width:920px){
  .aa-page .sdgsSearchBar .col-10{grid-template-columns:repeat(5,103px)}
}
@media (max-width:560px){
  .aa-page .sdgsSearchBar .col-10{grid-template-columns:repeat(4,1fr)}
  .aa-page .sdgsSearchBar .SgdsBox{width:100%;height:auto;aspect-ratio:1}
}
.aa-page .SdgsBar{display:flex;flex-wrap:wrap;gap:var(--space-10);align-items:center;margin-top:var(--space-16)}

/* ---- 詳細頁（多元商品/電子書/培力單位/文章/活動 Detail）共用 ---- */
/* 分享列改成「只有社群 Logo 圖」的精簡版，移進資訊欄標題下方(使用者要求；原本在頁面最上方帶「分享至/Facebook/Line」文字)。
   已無 .itemTitle 文字，改小上緣 margin 貼合標題；logo hover 放大當作可點擊提示。role=group+aria-label 保留無障礙語境。 */
.aa-page .dt-share{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-12);margin:var(--space-6) 0 var(--space-12)}
.aa-page .dt-share .ShareItem{display:flex;align-items:center}
.aa-page .dt-share .ShareItem a{display:inline-flex;line-height:0;border-radius:50%;transition:transform .14s}
.aa-page .dt-share .ShareItem a:hover{transform:scale(1.08)}
.aa-page .dt-share .ShareItem .itemImg{width:32px;height:32px;border-radius:50%;display:block}
/* 主圖 + 資訊欄（沿用 Bootstrap .row/.col-sm-6 兩欄）*/
.aa-page .row{margin-left:0;margin-right:0}
/* 詳細頁 banner 與下方主圖/標題列的間距：原本 banner 與內容之間有「分享至」那一列撐開，
   分享列移進資訊欄後 banner 直接貼著標題(使用者回報太緊鄰)。只補「緊接 banner 的第一個 .row」上緣間距，
   不影響列表頁(banner 後面是搜尋列不是 .row)，也不影響內文下方的相關單位/相關商品 .row(它們在 hr/#contentarea 之後)。 */
.aa-page .pg-banner + .row{margin-top:var(--space-28)}
.aa-page .row > .col-sm-6 > img,.aa-page #articleImg{width:100%;border-radius:var(--r-lg);border:1px solid var(--hair);display:block}
.aa-page .article_title{font-family:var(--serif);font-size:1.5rem;color:var(--teal-ink);line-height:1.3;margin:0 0 var(--space-12)}
.aa-page .article_title a{color:inherit;text-decoration:none}
.aa-page .article_title a:hover{text-decoration:underline}
.aa-page .addr{display:flex;flex-wrap:wrap;gap:var(--space-10);align-items:baseline;margin:var(--space-8) 0}
.aa-page .addrCity{font-family:var(--mono);font-size:var(--text-sm);color:var(--teal-ink);background:var(--teal-soft);border:1px solid var(--teal-line);border-radius:var(--r-full);padding:var(--space-2) var(--space-12)}
.aa-page .addrArea{font-size:var(--text-base);color:var(--ink)}
.aa-page .addrArea a,.aa-page .addr a{color:var(--teal-ink)}
.aa-page .info{font-size:var(--text-base);color:var(--ink-soft);margin:var(--space-4) 0;line-height:1.7}
.aa-page .social{display:flex;flex-wrap:wrap;gap:var(--space-10);margin:var(--space-12) 0}
.aa-page .social a{display:inline-flex;align-items:center;min-height:42px;padding:var(--space-6) var(--space-16);border:var(--bw-1) solid var(--hair-2);border-radius:var(--r-full);color:var(--teal-ink);font-weight:700;text-decoration:none;font-size:var(--text-sm);transition:.14s}
.aa-page .social a:hover{border-color:var(--teal);background:var(--teal-soft)}
.aa-page .short-divider hr{border:none;border-top:1px solid var(--hair);margin:var(--space-14) 0}
/* 區段 */
.aa-page hr.section{border:none;border-top:1px solid var(--hair);margin:var(--space-40) 0 var(--space-20)}
.aa-page .sectionTitle{font-family:var(--serif);font-size:1.5rem;color:var(--teal-ink);margin:0 0 var(--space-16);padding-left:var(--space-14);border-left:5px solid var(--teal);line-height:1.3}
.aa-page .sectionTitle a{color:var(--teal-ink)!important;text-decoration:none}
/* 縮圖 slider / 相關項目卡 */
.aa-page .preview-imglist{margin-top:var(--space-12)}
.aa-page .preview-imglist .item{cursor:pointer;border-radius:var(--r-md);border:1px solid var(--hair)}
.aa-page .slider img{border-radius:var(--r-md)}
.aa-page .slider .article_title{font-family:var(--sans);font-size:var(--text-lg);font-weight:700;color:var(--ink);margin:0 0 var(--space-6)}
.aa-page .slider .info{font-size:var(--text-sm);color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.aa-page .slider .topOrig{display:flex;gap:var(--space-8);align-items:center;font-size:var(--text-sm);margin-bottom:var(--space-6)}
.aa-page .slider .topOrig .lbl{font-family:var(--mono);color:var(--ink-faint)}
.aa-page .slider .topOrig .name{font-weight:700;color:var(--ink)}
.aa-page .slider .price{font-family:var(--mono);font-weight:700;color:var(--teal-ink)}
.aa-page .slider .des h3{font-family:var(--sans);font-size:var(--text-lg);font-weight:700;color:var(--ink);margin:var(--space-8) 0 var(--space-6)}
@media (max-width:768px){.aa-page .row > .col-sm-6{width:100%;max-width:100%;flex:0 0 100%}}

/* ---- 聯絡我們表單（比照 SEPOA Design System「會員資料 Hi-fi」的 sec 卡片 + drow 定義列語彙）---- */
.aa-page .sec{border:1px solid var(--hair);border-radius:var(--r-lg);background:#fff;margin-top:var(--space-28);overflow:hidden}
.aa-page .sec-head{display:flex;align-items:center;gap:var(--space-14);padding:var(--space-18) var(--space-24);border-bottom:1px solid var(--hair);background:var(--teal-soft)}
.aa-page .sec-title{font-family:var(--serif);font-size:var(--text-xl);font-weight:700;margin:0;color:var(--teal-ink)}
.aa-page .sec-note{font-size:var(--text-base);color:var(--ink-soft);margin-left:auto}
.aa-page .sec-body{padding:var(--space-20) var(--space-24) var(--space-24)}
.aa-page .drow{display:grid;grid-template-columns:148px 1fr;gap:var(--space-10) var(--space-32);align-items:center;padding:var(--space-16) 0;border-bottom:1px solid var(--hair)}
.aa-page .drow:first-child{padding-top:var(--space-4)}
.aa-page .drow:last-child{border-bottom:none;padding-bottom:var(--space-4)}
.aa-page .drow.top{align-items:start}
.aa-page .drow.top .dlabel{padding-top:var(--space-12)}
.aa-page .dlabel{font-size:var(--text-base);font-weight:700;color:var(--ink);line-height:1.5}
.aa-page .dval{min-width:0}
.aa-page .req{font-size:var(--text-sm);font-weight:700;color:var(--terra);letter-spacing:.02em;white-space:nowrap;margin-left:var(--space-4)}
.aa-page .opt{font-size:var(--text-sm);font-weight:600;color:var(--ink-faint);letter-spacing:.02em;white-space:nowrap;margin-left:var(--space-4)}
.aa-page .control{display:flex;align-items:center;gap:var(--space-10);min-height:46px;border:var(--bw-1) solid var(--hair-2);border-radius:var(--r-md);padding:var(--space-10) var(--space-14);background:#fff;transition:.15s}
.aa-page .control:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
.aa-page .control input,.aa-page .control select,.aa-page .control textarea{border:none;outline:none;flex:1;font-family:var(--sans);font-size:var(--text-base);color:var(--ink);background:none;width:100%}
.aa-page .control.textarea{align-items:flex-start;min-height:140px}
.aa-page .control textarea{resize:vertical;min-height:110px;line-height:1.6;padding:var(--space-4) 0}
.aa-page .control.mono input{font-family:var(--mono);letter-spacing:.02em}
.aa-page .control.sel{position:relative}
.aa-page .control.sel select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:var(--space-22)}
.aa-page .control.sel::after{content:"";position:absolute;right:var(--space-14);top:50%;width:9px;height:9px;border-right:2px solid var(--ink-faint);border-bottom:2px solid var(--ink-faint);transform:translateY(-65%) rotate(45deg);pointer-events:none}
.aa-page .field-help{font-size:var(--text-base);color:var(--ink-soft);margin-top:var(--space-8);line-height:1.5}
.aa-page .form-actions{display:flex;align-items:center;justify-content:center;gap:var(--space-16);padding:var(--space-24) 0 var(--space-8);flex-wrap:wrap}
.aa-page .form-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);font-family:var(--sans);font-weight:700;font-size:var(--text-base);padding:var(--space-14) var(--space-22);border-radius:var(--r-md);border:var(--bw-1) solid transparent;cursor:pointer;min-height:44px;text-decoration:none;transition:.15s}
.aa-page .form-actions .btn-primary{background:var(--teal);color:#fff}
.aa-page .form-actions .btn-primary:hover{background:var(--teal-strong)}
.aa-page .form-actions .btn-primary:active{transform:translateY(1px)}
.aa-page .err-banner{display:flex;align-items:center;gap:var(--space-10);border:1.6px solid var(--terra);background:#fdf4f1;color:var(--terra);border-radius:var(--r-md);padding:var(--space-14) var(--space-20);margin-top:var(--space-24);font-weight:600}
.aa-page .err-banner .err-ico{flex:0 0 auto;width:19px;height:19px;border-radius:50%;background:var(--terra);color:#fff;font-weight:800;display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-base)}
@media (max-width:720px){
  .aa-page .drow{grid-template-columns:1fr;gap:var(--space-8);align-items:start}
  .aa-page .drow.top .dlabel{padding-top:0}
  .aa-page .sec-note{display:none}
}

/* 驗證碼元件（第三方套件輸出，內部結構不固定；JS 會把 img/a/input 重新組成 .cap-row1(圖+重整鈕)／.cap-row2(輸入框) 兩行，不依賴原始 DOM 順序）*/
.aa-page .cap-widget{display:flex;flex-direction:column;gap:var(--space-10)}
.aa-page .cap-widget br{display:none}
.aa-page .cap-row1{display:flex;align-items:center;gap:var(--space-10)}
.aa-page .cap-widget img{display:block;height:44px;width:auto;border:1px solid var(--hair-2);border-radius:var(--r-md);background:#fff}
.aa-page .cap-widget a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 auto;border:var(--bw-1) solid var(--hair-2);border-radius:var(--r-md);color:var(--teal-ink);background:#fff;text-decoration:none;transition:.14s}
.aa-page .cap-widget a:hover{background:var(--teal-soft);border-color:var(--teal)}
.aa-page .cap-widget input{width:220px;max-width:100%;min-height:46px;border:var(--bw-1) solid var(--hair-2);border-radius:var(--r-md);padding:0 var(--space-14);font-family:var(--sans);font-size:var(--text-base);color:var(--ink);background:#fff;transition:.15s}