/* =====================================================================
   關注領域內頁 · css/cares-page.css
   ▸ Wireframe 10775:27720 的資訊架構，套首頁 DNA：米白底＋墨綠字、Lexend Exa 英文眉標、Noto Sans TC 標題（字距 em）、
     領域五色（color guideline）、12px 卡片圓角、#CFE6A6 實心圓箭頭按鈕（配圖一律不加「情境示意」標籤）
   ▸ 只寫內頁專用 class（.kv／.area-nav／.area）；nav、按鈕 token、footer 沿用 base.css／footer.css
   ▸ RWD：≤1100 單欄（圖在上）、≤640 手機字級；reduced motion 關位移
   ===================================================================== */

body.page-cares,html[data-hero="dark"] body.page-cares{background:var(--white)}

.skip-link{position:fixed;left:16px;top:-80px;z-index:200;padding:10px 14px;border-radius:12px;background:var(--ink);color:var(--white);font-family:var(--font-tc);font-size:14px;line-height:20px}
.skip-link:focus{top:12px}

/* ---------- 1. 情境 Banner ---------- */
.kv{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(448px,62.4vh,608px);display:flex;align-items:flex-end;   /* 2026-09-14 IRON：高度減 20%（原 clamp(560,78vh,760)），第一屏露出下方內容 */
  padding:calc(var(--nav-h) + 96px) var(--margin) var(--section-compact);
  background:var(--forest);color:#fff;
}
.kv__media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.kv__img{position:absolute;left:0;top:-8%;width:100%;height:116%;max-width:none;object-fit:cover;object-position:50% 80%;will-change:transform}
/* 遮罩：左側壓深給文字、上緣接 nav、下緣收進深綠（與首頁關於基金會同一組光線語言） */
.kv__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(15,31,16,.9) 0%,rgba(15,31,16,.58) 45%,rgba(15,31,16,.14) 100%),
    linear-gradient(180deg,rgba(15,31,16,.82) 0%,rgba(15,31,16,0) 32%,rgba(15,31,16,0) 68%,rgba(15,31,16,.62) 100%);
}
.kv__inner{position:relative;max-width:780px}
.kv__crumb ol{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--font-en);font-size:12px;line-height:20px;color:var(--on-dark-2)}
.kv__crumb li + li::before{content:"/";margin-right:8px;opacity:.5}
.kv__crumb a{transition:color var(--dur-1) var(--ease-out)}
.kv__crumb a:focus-visible{color:#fff;outline:var(--focus-ring-on-dark)}
@media (hover:hover) and (pointer:fine){.kv__crumb a:hover{color:#fff}}
.kv__eyebrow{margin-top:40px;font-family:var(--font-en);font-size:14px;line-height:32px;font-weight:500;color:var(--on-dark-3)}
.kv__title{font-family:var(--font-tc);font-size:var(--fs-h1);line-height:var(--lh-h1);font-weight:500;letter-spacing:var(--ls-h1);color:var(--on-dark-strong)}
.kv__lead{margin-top:20px;max-width:34em;font-family:var(--font-tc);font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--on-dark-body);text-wrap:pretty}
.kv__index{position:absolute;right:var(--margin);bottom:var(--section-compact);display:grid;gap:2px;font-family:var(--font-tc);font-size:14px;line-height:30px;font-weight:500;color:var(--on-dark-body)}
.kv__index li{display:flex;align-items:center;gap:10px}
.kv__index b{min-width:22px;font-family:var(--font-en);font-size:12px;font-weight:500;color:var(--on-dark-3)}
.kv__index i{width:8px;height:8px;border-radius:50%;background:var(--c)}

/* ---------- 2. 領域錨點列（黏在 nav 下方；白底硬邊，與 solid nav 接成一塊） ---------- */
.area-nav{position:sticky;top:var(--nav-h);z-index:40;background:var(--white);box-shadow:inset 0 -1px 0 var(--line-subtle)}
.area-nav__inner{display:flex;justify-content:center;gap:8px;padding:12px var(--margin);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.area-nav__inner::-webkit-scrollbar{display:none}
.area-nav__chip{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:14px 14px;border-radius:12px;
  font-family:var(--font-tc);font-size:16px;line-height:16px;font-weight:500;color:var(--ink);white-space:nowrap;
  transition:background-color var(--dur-1) var(--ease-out);
}
.area-nav__num{min-width:18px;font-family:var(--font-en);font-size:12px;line-height:12px;font-weight:500;color:var(--ink-2)}
.area-nav__chip i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.area-nav__chip.is-on{background:var(--c50)}
@media (hover:hover) and (pointer:fine){.area-nav__chip:not(.is-on):hover{background:var(--hover-layer)}}
.area-nav__chip:focus-visible{outline:var(--focus-ring);outline-offset:-2px}
.area-nav__bar{position:absolute;left:0;right:0;bottom:0;height:2px;overflow:hidden;pointer-events:none}
.area-nav__bar i{display:block;height:100%;background:var(--ink);transform:scaleX(0);transform-origin:left center}

/* ---------- 3. 領域區塊（Wireframe 文圖左右交錯；首頁關注領域面板的元件） ---------- */
.area{position:relative;padding:var(--section) var(--margin);background:var(--white);scroll-margin-top:calc(var(--nav-h) + 68px)}   /* 09-15：錨點列實測 68（原 66 會蓋住 2px） */
.area:nth-child(even){background:var(--paper)}
/* 閱讀型內文頁：內容上限 1360 置中（業主 2026-09-14 指示，長文眼球移動距離短、較不疲勞；首頁區塊仍為流動容器） */
.area__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--split-gap-wide);max-width:var(--container-reading);margin:0 auto;align-items:start}
.area--flip .area__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.area--flip .area__media{order:-1}

/* 標籤組：pill（領域色）＋計數；編號線英文名（與首頁 cares 面板相同規格） */
.area__top{display:flex;align-items:center;gap:16px}
.area__pill{display:inline-flex;align-items:center;height:24px;padding:0 8px;background:var(--c);font-family:var(--font-tc);font-size:14px;line-height:14px;font-weight:500;letter-spacing:.02em;color:var(--ink);white-space:nowrap}
.area__pill i{margin:0 6px;font-style:normal;font-family:var(--mono);opacity:.55}
.area__pill span{font-family:var(--font-en)}
.area__count{font-family:var(--font-en);font-size:12px;line-height:var(--lh-meta);color:var(--ink-2)}
.area__count b{font-weight:500;color:var(--ink)}
.area__eyebrow{margin-top:32px;display:flex;align-items:center;gap:10px;font-family:var(--font-en);font-size:12px;line-height:20px;text-transform:uppercase;color:var(--ink-2)}
.area__eyebrow i{width:28px;height:1px;background:currentColor;opacity:.6}

.area__headrow{margin-top:20px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px 32px;flex-wrap:wrap}
.area__title{font-family:var(--font-tc);font-size:var(--fs-h2);line-height:var(--lh-h2);font-weight:500;letter-spacing:var(--ls-h2);color:var(--ink)}
.area__sub{margin-top:4px;font-family:var(--font-tc);font-size:var(--fs-h4);line-height:var(--lh-h4);font-weight:500;letter-spacing:var(--ls-h4);color:var(--ink-body)}

/* 觀看年度計畫：12 圓角細框＋24px #CFE6A6 實心圓箭頭（與首頁 Hero CTA、關於基金會「瞭解更多」同一元件，淺底版） */
.area__plan{
  display:inline-flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line-strong);border-radius:12px;
  font-family:var(--font-tc);font-size:15px;line-height:18px;font-weight:700;color:var(--ink);white-space:nowrap;
  transition:background-color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out);
}
.area__plan-ico{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--ink)}
.area__plan-ico svg{width:14px;height:14px;overflow:visible;transition:transform var(--dur-2) var(--ease-out)}
.area__plan:focus-visible .area__plan-ico svg{transform:translateX(var(--nudge))}
@media (hover:hover) and (pointer:fine){
  .area__plan:hover{background:var(--hover-layer);border-color:var(--ink)}
  .area__plan:hover .area__plan-ico svg{transform:translateX(var(--nudge))}
}
.area__plan:active{transform:translateY(1px);transition-duration:.08s}

.area__lead{margin-top:40px;max-width:40em;display:grid;gap:calc(var(--lh-body-l) * 1em);font-family:var(--font-tc);font-size:var(--fs-body-l);line-height:var(--lh-body-l);color:var(--ink-body)}

/* 延伸內容：細線分段、左側編號 */
.area__details{margin-top:56px;box-shadow:inset 0 1px 0 var(--line)}
.area__detail{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:16px;padding:32px 0;box-shadow:inset 0 -1px 0 var(--line)}
.area__detail-no{grid-row:1;font-family:var(--font-en);font-size:12px;line-height:28px;font-weight:500;color:var(--ink-2)}
.area__detail h3{grid-column:2;font-family:var(--font-tc);font-size:var(--fs-h5);line-height:var(--lh-h5);font-weight:600;letter-spacing:0;color:var(--ink)}
.area__detail p:not(.area__detail-no){grid-column:2;margin-top:12px;font-family:var(--font-tc);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-body)}

/* 數據：Lexend Exa 600（首頁 cares 的 28 放大到 40，內頁作段落收尾的重點） */
.area__stats{margin-top:48px;display:flex;flex-wrap:wrap;gap:28px 64px}
.area__stat{display:flex;flex-direction:column;gap:8px}
.area__stat dd{margin:0}
.area__stat-v{order:1;display:flex;align-items:flex-end;gap:6px}
.area__stat-l{order:2;font-family:var(--font-tc);font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink-2)}
.area__num{font-family:var(--font-en);font-size:var(--fs-stat-l);line-height:1;font-weight:600;letter-spacing:var(--ls-stat);font-variant-numeric:tabular-nums;color:var(--ink)}
.area__num--text{font-family:var(--font-tc);font-size:calc(var(--fs-stat-l) - 8px);line-height:var(--fs-stat-l);letter-spacing:0}   /* 文字型數據＝數字級 −8 */
.area__unit{padding-bottom:4px;font-family:var(--font-tc);font-size:14px;line-height:20px;font-weight:500;color:var(--ink-body)}

/* 圖片欄：情境圖（4:3）＋兩張真實活動照（1:1）；桌機黏住，長文捲動時圖片留在畫面 */
.area__media{position:sticky;top:calc(var(--nav-h) + 66px + 32px)}
.area__fig{position:relative;margin:0}
.area__frame{position:relative;overflow:hidden;border-radius:12px;background:var(--paper-2)}
.area__frame img{display:block;width:100%;height:100%;object-fit:cover;will-change:transform}
.area__fig--scene .area__frame{aspect-ratio:4 / 3}
.area__photos{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.area__photos .area__frame{aspect-ratio:1 / 1}
.area__photos figcaption{margin-top:8px;font-family:var(--font-tc);font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--ink-2)}

/* 視窗太矮時圖片欄放不下，不黏 */
@media (max-height:860px){.area__media{position:relative;top:auto}}

/* ---------- 4. RWD ---------- */
@media (max-width:1100px){
  .kv{min-height:416px;padding-top:calc(var(--nav-h) + 72px)}
  .kv__index{display:none}
  .area-nav__inner{justify-content:flex-start;padding-block:10px}
  .area-nav__chip{padding:12px 12px}
  .area{scroll-margin-top:calc(var(--nav-h) + 58px)}
  .area__grid,.area--flip .area__grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .area__media,.area--flip .area__media{position:relative;top:auto;order:-1}
  .area__lead{max-width:none}
}
@media (max-width:640px){
  .kv{min-height:384px}
  .kv__eyebrow{margin-top:28px}
  .area-nav__chip{font-size:15px;line-height:15px;padding:11px 10px;gap:6px}
  .area__eyebrow{margin-top:24px}
  .area__plan{padding:14px 16px}
  .area__lead{margin-top:28px}
  .area__details{margin-top:40px}
  .area__detail{grid-template-columns:minmax(0,1fr);padding:24px 0}
  .area__detail-no{display:none}
  .area__detail h3,.area__detail p:not(.area__detail-no){grid-column:1}
  .area__stats{margin-top:36px;gap:24px 40px}
  .area__photos{gap:12px}
}
@media (prefers-reduced-motion:reduce){
  .area__plan,.area__plan-ico svg,.area-nav__chip{transition:none}
  .area__plan:active{transform:none}
}