/* =====================================================================
   華新麗華永續發展基金會官網 · Components v1.4（2026-09-14）
   ▸ 需先載入 tokens.css；所有數值只引用 --wl-* token
   ▸ 類別前綴 .wl-；狀態用 .is-on／aria-*；不使用單邊彩色邊條（品牌規則）
   ▸ 每個元件的 anatomy、使用時機、do／don't 見 index.html「元件」章節
   ===================================================================== */

/* ---------- 0. 基礎 ---------- */
.wl-arrow{width:var(--wl-c-icon-glyph);height:var(--wl-c-icon-glyph);flex:none;overflow:visible;transition:transform var(--wl-dur-medium) var(--wl-ease)}
.wl-overline{margin:0;font:500 var(--wl-fs-overline)/var(--wl-lh-overline) var(--wl-font-en);letter-spacing:0;color:var(--wl-text-secondary)}
.wl-on-dark .wl-overline,.wl-overline--on-dark{color:var(--wl-text-on-dark-subtle)}
.wl-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 1. 版面 ---------- */
.wl-section{padding-block:var(--wl-section);padding-inline:var(--wl-margin);background:var(--wl-surface);color:var(--wl-text)}
.wl-section--compact{padding-block:var(--wl-section-compact)}
.wl-section--alt{background:var(--wl-surface-alt)}
.wl-section--inverse,.wl-on-dark{background:var(--wl-surface-inverse);color:var(--wl-text-on-dark)}
.wl-container{width:100%;max-width:var(--wl-container)}   /* 流動：寬度＝區塊內容寬（左右 margin 由 .wl-section 提供），v1.1 起不設最大寬 */
.wl-container--reading{max-width:var(--wl-container-reading);margin-inline:auto}   /* v1.2 閱讀型內文頁（長文內頁內容區）；首頁與非閱讀型區塊不用 */
.wl-split{display:grid;gap:var(--wl-split-gap-wide);align-items:start}
.wl-split--7-5{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.wl-split--5-7{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.wl-split--6-6{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--wl-split-gap)}
.wl-split--4-8{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.wl-split--3-9{grid-template-columns:minmax(0,3fr) minmax(0,9fr)}
@media (max-width:1100px){
  .wl-split--7-5,.wl-split--5-7,.wl-split--6-6,.wl-split--4-8,.wl-split--3-9{grid-template-columns:minmax(0,1fr)}   /* v1.2 6/6 平板也改單欄 */
}

/* ---------- 2. 標題組 ---------- */
.wl-display{margin:0;font:500 var(--wl-fs-display)/var(--wl-lh-display) var(--wl-font-tc);letter-spacing:var(--wl-ls-display)}
.wl-h2{margin:0;font:500 var(--wl-fs-h2)/var(--wl-lh-h2) var(--wl-font-tc);letter-spacing:var(--wl-ls-h2)}
.wl-h2--compact{font-size:var(--wl-fs-h2-compact)}
.wl-h3{margin:0;font:500 var(--wl-fs-h3)/var(--wl-lh-h3) var(--wl-font-tc);letter-spacing:var(--wl-ls-h3)}
.wl-h4{margin:0;font:500 var(--wl-fs-h4)/var(--wl-lh-h4) var(--wl-font-tc);letter-spacing:var(--wl-ls-h4)}
.wl-h5{margin:0;font:600 var(--wl-fs-h5)/var(--wl-lh-h5) var(--wl-font-tc);letter-spacing:0}
.wl-h6{margin:0;font:500 var(--wl-fs-h6)/var(--wl-lh-h6) var(--wl-font-tc);letter-spacing:0}
.wl-lead{margin:0;font:400 var(--wl-fs-lead)/var(--wl-lh-lead) var(--wl-font-tc);color:var(--wl-text-body)}
.wl-body-l{margin:0;font:400 var(--wl-fs-body-l)/var(--wl-lh-body-l) var(--wl-font-tc);color:var(--wl-text-body)}
.wl-body{margin:0;font:400 var(--wl-fs-body)/var(--wl-lh-body) var(--wl-font-tc);color:var(--wl-text-body)}
.wl-small{margin:0;font:400 var(--wl-fs-small)/var(--wl-lh-small) var(--wl-font-tc);color:var(--wl-text-secondary)}
.wl-caption{margin:0;font:400 var(--wl-fs-caption)/var(--wl-lh-caption) var(--wl-font-tc);color:var(--wl-text-secondary)}
.wl-meta{font:400 var(--wl-fs-meta)/var(--wl-lh-meta) var(--wl-font-en);color:var(--wl-text-secondary);font-variant-numeric:tabular-nums}
.wl-meta--l{font-size:var(--wl-fs-meta-l)}
.wl-on-dark .wl-lead,.wl-on-dark .wl-body,.wl-on-dark .wl-body-l{color:var(--wl-text-on-dark-body)}
.wl-on-dark .wl-small,.wl-on-dark .wl-caption,.wl-on-dark .wl-meta{color:var(--wl-text-on-dark-secondary)}
.wl-on-dark :is(.wl-display,.wl-h2,.wl-h3){color:var(--wl-text-on-dark-strong)}

/* 區塊標題列：左眉標＋H2，右側可放計數與控制鈕 */
.wl-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--wl-space-6);flex-wrap:wrap}
.wl-sec-head__titles{display:flex;flex-direction:column}
.wl-sec-head__aside{display:flex;align-items:center;gap:var(--wl-space-5)}
.wl-counter{display:inline-flex;gap:8px;font:400 12px/32px var(--wl-font-en);color:var(--wl-text-secondary);font-variant-numeric:tabular-nums}
.wl-counter b{font-weight:500;color:var(--wl-text)}

/* ---------- 3. 按鈕 ---------- */
.wl-btn{
  display:inline-flex;align-items:center;gap:var(--wl-space-3-5);min-height:var(--wl-c-button-h);padding:var(--wl-c-button-pad);
  border:1px solid var(--wl-border-strong);border-radius:var(--wl-radius-lg);background:transparent;color:var(--wl-text);
  font:700 var(--wl-fs-button)/var(--wl-lh-button) var(--wl-font-tc);letter-spacing:0;white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background-color var(--wl-dur-fast) var(--wl-ease),border-color var(--wl-dur-fast) var(--wl-ease),color var(--wl-dur-fast) var(--wl-ease),transform var(--wl-dur-fast) var(--wl-ease);
}
.wl-btn__ico{display:grid;place-items:center;flex:0 0 var(--wl-c-icon-inline);width:var(--wl-c-icon-inline);height:var(--wl-c-icon-inline);border-radius:50%;background:var(--wl-accent);color:var(--wl-text-on-accent)}
@media (hover:hover) and (pointer:fine){
  .wl-btn:hover{background:var(--wl-hover-layer);border-color:var(--wl-text)}
  .wl-btn:hover .wl-arrow{transform:translateX(var(--wl-nudge))}
}
.wl-btn:focus-visible{outline:var(--wl-focus-ring);outline-offset:3px}
.wl-btn:focus-visible .wl-arrow{transform:translateX(var(--wl-nudge))}
.wl-btn:active{transform:translateY(1px);transition-duration:var(--wl-dur-press)}
.wl-btn:disabled,.wl-btn[aria-disabled="true"]{color:var(--wl-text-disabled);border-color:var(--wl-border);pointer-events:none}
.wl-btn:disabled .wl-btn__ico,.wl-btn[aria-disabled="true"] .wl-btn__ico{background:var(--wl-surface-sunken);color:var(--wl-text-disabled)}
/* 深底外框 */
.wl-btn--on-dark{color:var(--wl-text-on-dark-strong);border-color:var(--wl-border-on-media)}
@media (hover:hover) and (pointer:fine){.wl-btn--on-dark:hover{background:var(--wl-hover-layer-on-dark);border-color:var(--wl-text-on-dark)}}
.wl-btn--on-dark:focus-visible{outline:var(--wl-focus-ring-on-dark)}
/* 前往文字按鈕（2026-10-12 前往按鈕 E 文字版）：全圓細框、500、icon 為 .ge-ico（> hover 換 →）、hover 填亮綠 */
.wl-btn--go{border-radius:var(--wl-radius-full);font-weight:500;gap:10px;padding:15px 20px 15px 24px}
.wl-btn--go .wl-btn__ico{background:none;width:14px;height:14px;flex-basis:14px;color:currentColor}
@media (hover:hover) and (pointer:fine){
  .wl-btn--go:hover{background:var(--wl-accent);border-color:var(--wl-accent);color:var(--wl-text-on-accent)}
  .wl-btn--go.wl-btn--on-dark:hover{background:var(--wl-accent-on-dark);border-color:var(--wl-accent-on-dark);color:var(--wl-ref-forest-900)}
}
.wl-btn--go:focus-visible{background:var(--wl-accent);border-color:var(--wl-accent);color:var(--wl-text-on-accent)}
.wl-btn--go.wl-btn--on-dark{border-color:rgba(244,239,230,.5)}
/* 膠囊主按鈕 .wl-btn--pill、文字按鈕 .wl-btn--text：2026-10-12 退役，改前往按鈕 E（.wl-btn--go／.ge） */

/* 圓形圖示鈕：outline（輪播控制，網站 .ctrl）／raised（照片上的輪播左右鈕、影片播放）。「前往」用途 2026-10-12 改前往按鈕 .ge／.gc */
.wl-icon-btn{
  position:relative;display:grid;place-items:center;flex:none;width:var(--wl-c-icon-button);height:var(--wl-c-icon-button);
  border:0;border-radius:50%;background:var(--wl-accent);color:var(--wl-text-on-accent);cursor:pointer;
  transition:background-color var(--wl-dur-fast) var(--wl-ease),color var(--wl-dur-fast) var(--wl-ease),border-color var(--wl-dur-fast) var(--wl-ease),opacity var(--wl-dur-fast) var(--wl-ease),transform var(--wl-dur-fast) var(--wl-ease);
}
.wl-icon-btn::before{content:"";position:absolute;inset:calc((var(--wl-c-hit-min) - 100%) / -2);border-radius:50%}
.wl-icon-btn--outline{background:transparent;border:1px solid var(--wl-text);color:var(--wl-text)}
.wl-icon-btn--raised{box-shadow:var(--wl-elevation-1)}
@media (hover:hover) and (pointer:fine){
  .wl-icon-btn:hover{background:var(--wl-accent-hover)}
  .wl-icon-btn--outline:hover{background:var(--wl-text);border-color:var(--wl-text);color:var(--wl-text-on-dark-strong)}
}
.wl-icon-btn:focus-visible{outline:var(--wl-focus-ring);outline-offset:3px}
.wl-icon-btn:active{transform:scale(var(--wl-press-scale));transition-duration:var(--wl-dur-press)}
.wl-icon-btn[aria-disabled="true"],.wl-icon-btn:disabled{opacity:.2;pointer-events:none}

/* 前往按鈕（2026-10-12 客戶選定；與 css/base.css「前往按鈕」同一份規格，網站頁面以 base.css 為準）
   E ＝ .ge：1px 細框膠囊＋文字＋ >；hover／focus 填亮綠、外框消失、> 收起換 → 滑入。--on-dark／--glass／--icon／--prev
   C ＝ .gc：清單列與卡片（白底卡、照片卡，2026-10-13）。--on-dark／--glass。40px 12 圓角細框方塊＋ >；hover 填亮綠、> 前方畫出箭身 */
.ge-ico,.gc-ico{display:block;flex:none;width:14px;height:14px;overflow:visible;transform:none!important}
.ge-ico path,.gc-ico path{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round}
.ge-ico .ge-chev{transform-origin:7.25px 7px;transition:transform var(--wl-dur-medium) var(--wl-ease),opacity var(--wl-dur-fast) var(--wl-ease)}
.ge-ico .ge-arr{opacity:0;transform:translateX(-6px);transition:transform var(--wl-dur-medium) var(--wl-ease),opacity .3s var(--wl-ease)}
:is(a,button):focus-visible .ge-ico .ge-chev{opacity:0;transform:scale(.3)}
:is(a,button):focus-visible .ge-ico .ge-arr{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){
  :is(a,button):hover .ge-ico .ge-chev,.gl-force-hover .ge-ico .ge-chev{opacity:0;transform:scale(.3)}
  :is(a,button):hover .ge-ico .ge-arr,.gl-force-hover .ge-ico .ge-arr{opacity:1;transform:none}
}
.ge{
  --ge-fg:var(--wl-text);--ge-bd:var(--wl-border-strong);--ge-fill:var(--wl-accent);--ge-fill-fg:var(--wl-text-on-accent);
  position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:36px;padding:0 14px 0 18px;border-radius:var(--wl-radius-full);
  background-color:transparent;box-shadow:inset 0 0 0 1px var(--ge-bd);color:var(--ge-fg);
  font:500 14px/1 var(--wl-font-tc);letter-spacing:0;white-space:nowrap;text-decoration:none;
  transition:background-color var(--wl-dur-fast) var(--wl-ease),box-shadow var(--wl-dur-fast) var(--wl-ease),color var(--wl-dur-fast) var(--wl-ease),padding var(--wl-dur-medium) var(--wl-ease);
}
.ge::before{content:"";position:absolute;left:0;right:0;top:calc((var(--wl-c-hit-min) - 100%) / -2);bottom:calc((var(--wl-c-hit-min) - 100%) / -2)}
.ge--on-dark,.wl-on-dark .ge{--ge-fg:var(--wl-text-on-dark);--ge-bd:rgba(244,239,230,.5);--ge-fill:var(--wl-accent-on-dark);--ge-fill-fg:var(--wl-ref-forest-900)}
.ge--glass{background-color:rgba(21,37,26,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ge--icon{width:48px;padding:0}
.ge--prev .ge-ico{scale:-1 1}
:is(a:focus-visible .ge,a.ge:focus-visible){background-color:var(--ge-fill);box-shadow:inset 0 0 0 1px transparent;color:var(--ge-fill-fg)}
@media (hover:hover) and (pointer:fine){
  :is(a:hover .ge,a.ge:hover,button:hover .ge){background-color:var(--ge-fill);box-shadow:inset 0 0 0 1px transparent;color:var(--ge-fill-fg);padding:0 16px 0 20px}
  :is(a:hover .ge--icon,a.ge--icon:hover,button:hover .ge--icon){padding:0}
}
.gl-force-hover .ge{background-color:var(--ge-fill);box-shadow:inset 0 0 0 1px transparent;color:var(--ge-fill-fg);padding:0 16px 0 20px}
.gl-force-hover .ge--icon{padding:0}
.gc{
  --gc-fg:var(--wl-text);--gc-bd:var(--wl-border-strong);--gc-fill:var(--wl-accent);--gc-fill-fg:var(--wl-text);
  position:relative;flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--wl-radius-lg);
  background-color:transparent;box-shadow:inset 0 0 0 1px var(--gc-bd);color:var(--gc-fg);
  transition:background-color var(--wl-dur-fast) var(--wl-ease),box-shadow var(--wl-dur-fast) var(--wl-ease),color var(--wl-dur-fast) var(--wl-ease);
}
.gc--on-dark,.wl-on-dark .gc{--gc-fg:var(--wl-text-on-dark);--gc-bd:rgba(244,239,230,.5);--gc-fill:var(--wl-accent-on-dark);--gc-fill-fg:var(--wl-ref-forest-900)}
.gc--glass{background-color:rgba(21,37,26,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.gc--prev .gc-ico{scale:-1 1}   /* 2026-10-13 輪播左右鈕：上一則朝左 */
button.gc{padding:0;border:0;cursor:pointer;font:inherit}
.gc:focus-visible{outline:var(--wl-focus-ring);outline-offset:3px}
.gc::before{content:"";position:absolute;inset:calc((var(--wl-c-hit-min) - 100%) / -2);border-radius:14px}
.gc-ico .gc-line{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset var(--wl-dur-medium) var(--wl-ease),opacity .2s var(--wl-ease)}
.gc-ico .gc-head{transform:translateX(-2px);transition:transform var(--wl-dur-medium) var(--wl-ease)}
:is(a:focus-visible .gc,.gc:focus-visible),.gl-force-hover .gc{background-color:var(--gc-fill);box-shadow:inset 0 0 0 1px transparent;color:var(--gc-fill-fg)}
:is(a,button):focus-visible .gc-ico .gc-line,.gl-force-hover .gc-ico .gc-line{stroke-dashoffset:0;opacity:1}
:is(a,button):focus-visible .gc-ico .gc-head,.gl-force-hover .gc-ico .gc-head{transform:translateX(1px)}
@media (hover:hover) and (pointer:fine){
  :is(a:hover .gc,:is(a,button).gc:hover){background-color:var(--gc-fill);box-shadow:inset 0 0 0 1px transparent;color:var(--gc-fill-fg)}
  :is(a,button):hover .gc-ico .gc-line{stroke-dashoffset:0;opacity:1}
  :is(a,button):hover .gc-ico .gc-head{transform:translateX(1px)}
}

/* 停用（2026-10-12）：文字與框降到 disabled、不填色不換箭頭；用 aria-disabled 保留焦點（10.5） */
:is(.ge,.gc):is([aria-disabled="true"],:disabled),:is(a,button)[aria-disabled="true"] :is(.ge,.gc),:is(a,button):disabled :is(.ge,.gc){
  --ge-fg:var(--wl-text-disabled);--ge-bd:var(--wl-border);--gc-fg:var(--ge-fg);--gc-bd:var(--ge-bd);
  background-color:transparent!important;box-shadow:inset 0 0 0 1px var(--ge-bd)!important;color:var(--ge-fg)!important;padding-inline:18px 14px!important;scale:1!important;pointer-events:none;cursor:default}
:is(.ge--on-dark,.wl-on-dark .ge,.gc--on-dark,.wl-on-dark .gc):is([aria-disabled="true"],:disabled),.wl-on-dark :is(a,button)[aria-disabled="true"] :is(.ge,.gc),:is(a,button)[aria-disabled="true"] :is(.ge--on-dark,.gc--on-dark){--ge-fg:rgba(244,239,230,.32);--ge-bd:rgba(244,239,230,.18)}
.ge--icon:is([aria-disabled="true"],:disabled),:is(a,button)[aria-disabled="true"] .ge--icon{padding-inline:0!important}
.gc:is([aria-disabled="true"],:disabled),:is(a,button)[aria-disabled="true"] .gc{padding-inline:0!important}
:is(.ge,.gc,a,button):is([aria-disabled="true"],:disabled) :is(.ge-ico .ge-chev){opacity:1!important;transform:none!important}
:is(.ge,.gc,a,button):is([aria-disabled="true"],:disabled) .ge-ico .ge-arr{opacity:0!important}
:is(.gc,a,button):is([aria-disabled="true"],:disabled) .gc-ico .gc-line{opacity:0!important}
:is(.gc,a,button):is([aria-disabled="true"],:disabled) .gc-ico .gc-head{transform:translateX(-2px)!important}

/* ---------- 4. 標籤 ---------- */
.wl-tag-area{display:inline-flex;align-items:center;height:var(--wl-c-tag-h);padding:0 8px;background:var(--wl-tag-c,var(--wl-area-04));color:var(--wl-text);font:500 var(--wl-fs-label)/1 var(--wl-font-tc);letter-spacing:.02em;white-space:nowrap}
.wl-tag-area__sep{margin:0 6px;font-family:var(--wl-font-mono);opacity:.55}
.wl-tag-area__en{font-family:var(--wl-font-en)}
.wl-tag-glass{display:inline-block;padding:4px 8px;border-radius:var(--wl-radius-xs);background:var(--wl-glass-dark-strong);-webkit-backdrop-filter:var(--wl-blur-sm);backdrop-filter:var(--wl-blur-sm);color:var(--wl-text-on-glass);font:400 16px/24px var(--wl-font-en);text-transform:uppercase;white-space:nowrap}
.wl-tag-glass--sm{font:500 14px/14px var(--wl-font-en);letter-spacing:.02em;color:var(--wl-text-on-dark-strong)}
/* 附註標籤（2026-10-04 IRON）：共好行動、點亮台灣的後台欄位 stories.tag（上限 10 個中文字、選填，空白不輸出）。
   同領域標籤的尺寸（高 24、padding 0 8、Label 14／500、字距 .02em），底色固定 accent；照片上與米白底都用同一顆。
   10 字實測寬 159，手機 390 卡片圖寬 334（48%）、320 為 60%，單行不截；保險起見超出容器時以刪節號截斷 */
.wl-tag-note{display:inline-block;max-width:100%;height:var(--wl-c-tag-h);padding:0 8px;border-radius:var(--wl-radius-xs);background:var(--wl-accent);color:var(--wl-text-on-accent);font:500 var(--wl-fs-label)/var(--wl-c-tag-h) var(--wl-font-tc);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:top}
.wl-eyebrow-line{display:flex;align-items:center;gap:10px;margin:0;font:400 12px/16.8px var(--wl-font-en);text-transform:uppercase;color:var(--wl-text-secondary)}
.wl-eyebrow-line i{width:28px;height:1px;background:currentColor;opacity:.6}

/* ---------- 5. 錨點列／分頁籤 ---------- */
.wl-subnav{position:sticky;top:var(--wl-nav-h);z-index:40;background:var(--wl-surface);box-shadow:inset 0 -1px 0 var(--wl-border-subtle)}
.wl-subnav__inner{display:flex;justify-content:center;gap:8px;padding:12px var(--wl-margin);overflow-x:auto;scrollbar-width:none}
.wl-subnav__inner::-webkit-scrollbar{display:none}
.wl-chip{position:relative;flex:none;display:inline-flex;align-items:center;gap:8px;padding:var(--wl-space-3-5);border-radius:var(--wl-radius-lg);color:var(--wl-text);font:500 16px/16px var(--wl-font-tc);white-space:nowrap;text-decoration:none;transition:background-color var(--wl-dur-fast) var(--wl-ease)}
/* 2026-10-01 IRON：錨點分頁籤移除編號與色點（.wl-chip__num／__dot 退役），只留名稱 */
.wl-chip.is-on,.wl-chip[aria-current="true"]{background:var(--wl-chip-tint,var(--wl-hover-layer))}
@media (hover:hover) and (pointer:fine){.wl-chip:not(.is-on):not([aria-current="true"]):hover{background:var(--wl-hover-layer)}}
.wl-chip:focus-visible{outline:var(--wl-focus-ring);outline-offset:-2px}
@media (max-width:1100px){.wl-subnav__inner{justify-content:flex-start;padding:10px var(--wl-margin)}.wl-chip{padding:12px}}
@media (max-width:640px){.wl-chip{font-size:15px;line-height:15px;padding:11px 10px;gap:6px}}

.wl-tabs{display:flex;gap:24px;box-shadow:inset 0 -1px 0 var(--wl-border);overflow-x:auto}
.wl-tab{flex:none;padding:12px 0 14px;border:0;border-bottom:2px solid transparent;background:none;color:var(--wl-text-secondary);font:500 16px/24px var(--wl-font-tc);cursor:pointer;transition:color var(--wl-dur-fast) var(--wl-ease),border-color var(--wl-dur-fast) var(--wl-ease)}
.wl-tab[aria-selected="true"]{color:var(--wl-text);border-bottom-color:var(--wl-text)}
@media (hover:hover) and (pointer:fine){.wl-tab:hover{color:var(--wl-text)}}
.wl-tab:focus-visible{outline:var(--wl-focus-ring);outline-offset:2px}

/* ---------- 6. 麵包屑 ---------- */
.wl-crumb ol{display:flex;flex-wrap:nowrap;gap:8px;min-width:0;margin:0;padding:0;list-style:none;font:400 12px/20px var(--wl-font-mono);color:var(--wl-text-secondary)}
/* v1.4 單行：前面層級不縮，最後一層（目前頁）超出寬度以刪節號截斷；窄版「/」不會掉到下一行開頭 */
.wl-crumb li{flex:none;white-space:nowrap}
.wl-crumb li[aria-current]{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.wl-crumb li + li::before{content:"/";margin-right:8px;opacity:.5}
.wl-crumb a{display:inline-block;padding-block:12px;margin-block:-12px;color:inherit;text-decoration:none}   /* v1.4 R2：點擊區高 44（文字 20＋上下 12），版面不變 */
/* R4 低-5（2026-09-16 S8-FIX）：觸控時麵包屑連結點擊區補到 48×48——「首頁」文字寬只有 24，
   以 ::before 上下各擴 2、左右各擴 12（元素框 24×44 → 48×48），版面與視覺零變動。
   麵包屑內只有第一層是連結（目前頁是純文字），左右外擴不會與其他目標相鄰，§12 的目標間距 ≥8 不受影響。 */
@media (pointer:coarse){
  .wl-crumb a{position:relative}
  .wl-crumb a::before{content:"";position:absolute;inset:calc((var(--wl-c-hit-min) - 100%) / -2)}
}
@media (hover:hover) and (pointer:fine){.wl-crumb a:hover{color:var(--wl-text)}}
.wl-crumb--on-dark ol{color:var(--wl-text-on-dark-secondary)}
@media (hover:hover) and (pointer:fine){.wl-crumb--on-dark a:hover{color:var(--wl-text-on-dark-strong)}}

/* ---------- 7. 卡片 ---------- */
/* 7a. 白底內容卡（活動訊息） */
.wl-card{display:flex;flex-direction:column;padding:10px 10px 20px;border-radius:var(--wl-radius-lg);background:var(--wl-surface-raised);color:var(--wl-text);text-decoration:none}
.wl-card__media{position:relative;aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--wl-radius-lg);background:var(--wl-surface-sunken)}
.wl-card__media img{display:block;width:100%;height:100%;object-fit:cover;transition:scale var(--wl-dur-slow) var(--wl-ease)}   /* v1.4 R4：hover 用獨立 scale 屬性，才能與捲動進場的 transform 疊加 */
.wl-card__body{display:flex;flex:1;flex-direction:column;gap:12px;padding:16px 10px 0}
.wl-card__foot{display:flex;justify-content:flex-end;margin-top:auto}
@media (hover:hover) and (pointer:fine){.wl-card:hover .wl-card__media img{scale:1.03}}
.wl-card:focus-visible{outline:var(--wl-focus-ring);outline-offset:3px}
/* 7b. 照片疊字卡（共好行動） */
.wl-card-photo{position:relative;display:block;aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--wl-radius-lg);background:var(--wl-surface-sunken);color:#FBF9F5;text-decoration:none}
.wl-card-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:scale var(--wl-dur-slow) var(--wl-ease)}
.wl-card-photo::after{content:"";position:absolute;inset:0;background:var(--wl-scrim-photo);pointer-events:none}
.wl-card-photo__body{position:absolute;left:20px;right:72px;bottom:20px;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:8px}   /* v1.4 由 12 更正為 8，與首頁 #actions .act-card 實作一致 */
.wl-card-photo__title{margin:0;font:500 var(--wl-fs-h4)/var(--wl-lh-h4) var(--wl-font-tc);letter-spacing:var(--wl-ls-h4);color:#FBF9F5}
.wl-card-photo .wl-icon-btn,.wl-card-photo > :is(.ge,.gc){position:absolute;right:20px;bottom:20px;z-index:1}
.wl-card-photo:has(> .ge) .wl-card-photo__body{right:148px}   /* 2026-10-12 前往按鈕 E「閱讀更多 >」約 110 寬，標題欄右側預留 */
@media (hover:hover) and (pointer:fine){.wl-card-photo:hover img{scale:1.03}}
.wl-card-photo:focus-visible{outline:var(--wl-focus-ring);outline-offset:3px}
/* 7a／7b 附註標籤：圖左上角（白底卡距圖框 12；主打卡對齊下方文字欄 28、手機 16），疊在遮罩之上 */
.wl-card__media > .wl-tag-note,.wl-card-photo > .wl-tag-note{position:absolute;top:12px;left:12px;z-index:1;max-width:calc(100% - 24px)}
.wl-card-photo--feature > .wl-tag-note{top:28px;left:28px;max-width:calc(100% - 56px)}
@media (max-width:640px){.wl-card-photo--feature > .wl-tag-note{top:16px;left:16px;max-width:calc(100% - 32px)}}
/* 7c. 玻璃數據卡（深色影像上） */
.wl-card-glass{display:flex;flex-direction:column;gap:10px;padding:var(--wl-space-4-5) var(--wl-space-5) var(--wl-space-5);border-radius:var(--wl-radius-lg);background:var(--wl-glass-card);-webkit-backdrop-filter:var(--wl-blur-md);backdrop-filter:var(--wl-blur-md);box-shadow:inset 0 0 0 1px var(--wl-border-on-glass);color:#fff}
.wl-card-glass__no{font:400 12px/16.8px var(--wl-font-en);color:var(--wl-text-on-dark-secondary)}
.wl-card-glass__name{margin:0;font:500 20px/26px var(--wl-font-tc)}

/* ---------- 8. 清單列（重要公告） ---------- */
.wl-list{margin:0;padding:0;list-style:none;box-shadow:inset 0 1px 0 var(--wl-border)}
.wl-row{display:flex;align-items:center;justify-content:space-between;gap:var(--wl-space-4);padding:24px 0;box-shadow:inset 0 -1px 0 var(--wl-border);color:var(--wl-text);text-decoration:none}
.wl-row__text{display:flex;flex-direction:column;gap:4px;min-width:0}
.wl-row__title{margin:0;font:500 22px/30.8px var(--wl-font-tc)}
@media (hover:hover) and (pointer:fine){.wl-row:hover .wl-row__title{text-decoration:underline;text-decoration-color:var(--wl-border-strong);text-underline-offset:4px}}
.wl-row:focus-visible{outline:var(--wl-focus-ring);outline-offset:2px}
@media (max-width:640px){.wl-row{padding:20px 0}.wl-row__title{font-size:19px;line-height:1.45}}

/* ---------- 9. 數據 ---------- */
.wl-stats{display:flex;flex-wrap:wrap;gap:28px 64px;margin:0}
.wl-stat{display:flex;flex-direction:column;gap:8px}
.wl-stat dd{margin:0}
.wl-stat__value{order:1;display:flex;align-items:flex-end;gap:6px}
.wl-stat__label{order:2;font:400 var(--wl-fs-small)/var(--wl-lh-small) var(--wl-font-tc);color:var(--wl-text-secondary)}
.wl-stat__num{font:600 var(--wl-fs-stat-l)/1 var(--wl-font-en);letter-spacing:var(--wl-ls-stat);font-variant-numeric:tabular-nums;color:var(--wl-text)}
.wl-stat__num--m{font-size:var(--wl-fs-stat-m)}
.wl-stat__num--text{font-family:var(--wl-font-tc);font-size:calc(var(--wl-fs-stat-l) - 8px);line-height:1.25;letter-spacing:0}
.wl-stat__unit{padding-bottom:3px;font:500 14px/20px var(--wl-font-tc);color:var(--wl-text-body)}
.wl-on-dark .wl-stat__num{color:#fff}
.wl-on-dark .wl-stat__label{color:var(--wl-text-on-dark-secondary)}
.wl-on-dark .wl-stat__unit{color:var(--wl-text-on-dark-body)}

/* ---------- 10. 手風琴／索引列 ---------- */
.wl-acc{display:flex;flex-direction:column}
.wl-acc__item{display:flex;align-items:center;gap:8px;width:100%;padding:var(--wl-space-3-5) var(--wl-space-3);border:0;border-radius:var(--wl-radius-lg);background:none;color:var(--wl-text);font:500 16px/16px var(--wl-font-tc);text-align:left;cursor:pointer;transition:background-color var(--wl-dur-fast) var(--wl-ease)}
.wl-acc__num{min-width:26px;font:500 12px/12px var(--wl-font-en);color:var(--wl-text-secondary)}
.wl-acc__name{flex:1}
.wl-acc__item.is-on,.wl-acc__item[aria-current="true"]{background:var(--wl-acc-tint,var(--wl-hover-layer))}
@media (hover:hover) and (pointer:fine){.wl-acc__item:not(.is-on):hover{background:var(--wl-hover-layer)}}
.wl-acc__item:focus-visible{outline:var(--wl-focus-ring);outline-offset:-2px}

/* ---------- 11. 圖片 ---------- */
.wl-figure{margin:0}
.wl-figure__frame{position:relative;overflow:hidden;border-radius:var(--wl-radius-lg);background:var(--wl-surface-sunken);aspect-ratio:var(--wl-ratio,4 / 3)}
.wl-figure__frame img{display:block;width:100%;height:100%;object-fit:cover}
.wl-figure figcaption{margin-top:8px;font:400 var(--wl-fs-caption)/var(--wl-lh-caption) var(--wl-font-tc);color:var(--wl-text-secondary)}
.wl-on-dark .wl-figure figcaption{color:var(--wl-text-on-dark-secondary)}

/* ---------- 12. 表單（新頁面延展用） ---------- */
.wl-field{display:flex;flex-direction:column;gap:8px}
.wl-label{font:500 14px/20px var(--wl-font-tc);color:var(--wl-text)}
.wl-label__req{margin-left:4px;color:var(--wl-error)}
.wl-input,.wl-select,.wl-textarea{
  width:100%;min-height:var(--wl-c-input-h);padding:12px 16px;border:1px solid var(--wl-border-strong);border-radius:var(--wl-radius-lg);
  background:var(--wl-surface-raised);color:var(--wl-text);font:400 16px/1.5 var(--wl-font-tc);
  transition:border-color var(--wl-dur-fast) var(--wl-ease),box-shadow var(--wl-dur-fast) var(--wl-ease);
}
.wl-textarea{min-height:144px;resize:vertical}
.wl-input::placeholder,.wl-textarea::placeholder{color:var(--wl-text-secondary)}
@media (hover:hover) and (pointer:fine){.wl-input:hover,.wl-select:hover,.wl-textarea:hover{border-color:var(--wl-text-secondary)}}
/* v1.4 回饋（09-15）：聚焦時不用黑框；框線加深到 text-secondary（與預設 border-strong 有明顯差）＋3px 實色亮綠光暈，鍵盤使用者看得到焦點 */
.wl-input:focus-visible,.wl-select:focus-visible,.wl-textarea:focus-visible{outline:none;border-color:var(--wl-text-secondary);box-shadow:0 0 0 3px var(--wl-accent)}
.wl-input[aria-invalid="true"],.wl-select[aria-invalid="true"],.wl-textarea[aria-invalid="true"]{border-color:var(--wl-error);box-shadow:0 0 0 1px var(--wl-error)}
.wl-input:disabled,.wl-select:disabled,.wl-textarea:disabled{background:var(--wl-surface-alt);color:var(--wl-text-disabled);border-color:var(--wl-border)}
.wl-select{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2315251A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5l3-3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px}
.wl-help{margin:0;font:400 12px/1.5 var(--wl-font-tc);color:var(--wl-text-secondary)}
.wl-help--error{color:var(--wl-error)}
.wl-check{display:inline-flex;align-items:flex-start;gap:10px;font:400 16px/24px var(--wl-font-tc);color:var(--wl-text);cursor:pointer}
.wl-check input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:2px 0 0;border:1px solid var(--wl-border-strong);border-radius:4px;background:var(--wl-surface-raised);display:grid;place-items:center;cursor:pointer;transition:background-color var(--wl-dur-fast) var(--wl-ease),border-color var(--wl-dur-fast) var(--wl-ease)}
.wl-check input[type="radio"]{border-radius:50%}
.wl-check input:checked{background:var(--wl-text);border-color:var(--wl-text)}
.wl-check input[type="checkbox"]:checked::after{content:"";width:10px;height:6px;margin-top:-2px;border:2px solid #FBF9F5;border-top:0;border-right:0;transform:rotate(-45deg)}
.wl-check input[type="radio"]:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:#FBF9F5}
.wl-check input:focus-visible{outline:var(--wl-focus-ring);outline-offset:2px}

/* ---------- 13. 訊息 ---------- */
.wl-alert{display:flex;gap:12px;align-items:flex-start;padding:16px 20px;border-radius:var(--wl-radius-lg);background:var(--wl-surface-alt);color:var(--wl-text)}
.wl-alert__ico{flex:none;width:20px;height:20px;margin-top:2px;color:var(--wl-alert-c,var(--wl-info))}
.wl-alert__title{margin:0;font:600 16px/24px var(--wl-font-tc)}
.wl-alert__text{margin:2px 0 0;font:400 14px/1.6 var(--wl-font-tc);color:var(--wl-text-body)}
.wl-alert--error{--wl-alert-c:var(--wl-error)}
.wl-alert--warning{--wl-alert-c:var(--wl-warning)}
.wl-alert--success{--wl-alert-c:var(--wl-success)}

/* ---------- 14. 分頁 ---------- */
.wl-pager{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.wl-page{display:grid;place-items:center;min-width:40px;height:40px;padding:0 8px;border-radius:var(--wl-radius-lg);color:var(--wl-text);font:500 14px/1 var(--wl-font-en);text-decoration:none;font-variant-numeric:tabular-nums;transition:background-color var(--wl-dur-fast) var(--wl-ease)}
@media (hover:hover) and (pointer:fine){.wl-page:hover{background:var(--wl-hover-layer)}}
.wl-page[aria-current="page"]{background:var(--wl-text);color:#FBF9F5}
.wl-page:focus-visible{outline:var(--wl-focus-ring);outline-offset:2px}

/* ---------- 15. 動態偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  .wl-btn,.wl-icon-btn,.wl-chip,.wl-tab,.wl-arrow,.wl-card__media img,.wl-card-photo img{transition:none}
}

/* =====================================================================
   v1.4（2026-09-14）列表頁與內容頁延展：重要公告、活動訊息、內容頁、年度計畫、主題專頁
   ===================================================================== */

/* 圖示實際線寬 1.5px（與網站 base.css CMP-05 一致；viewBox 14 的 1.3125 在不同顯示尺寸下會變細） */
:is(.wl-arrow,.wl-dl,.wl-plus,.wl-grid-ico) :is(path,line,polyline,rect){vector-effect:non-scaling-stroke;stroke-width:1.5px}

/* ---------- 16. 跳過導覽 ---------- */
.wl-skip{position:fixed;left:16px;top:-80px;z-index:200;padding:10px 14px;border-radius:var(--wl-radius-lg);background:var(--wl-text);color:#FBF9F5;font:400 var(--wl-fs-small)/20px var(--wl-font-tc);text-decoration:none}
.wl-skip:focus{top:12px}

/* ---------- 17. 情境 KV（頁首） ----------
   與關注領域內頁 .kv 同一組數值（cares-page.css）；列表頁用 --compact，第一屏要露出篩選列與第一排卡片 */
.wl-kv{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:flex-end;min-height:clamp(448px,62.4vh,608px);padding:calc(var(--wl-nav-h) + 96px) var(--wl-margin) var(--wl-section-compact);background:var(--wl-surface-inverse);color:var(--wl-text-on-dark-strong)}
.wl-kv--compact{min-height:clamp(360px,48vh,480px);padding-top:calc(var(--wl-nav-h) + 72px);padding-bottom:var(--wl-section-compact)}   /* R3：下緣 56 → 80，與關注領域內頁 KV 同節奏 */
.wl-kv__media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.wl-kv__img{position:absolute;left:0;top:-8%;width:100%;height:116%;max-width:none;object-fit:cover;object-position:var(--wl-kv-pos,50% 50%);will-change:transform}
.wl-kv__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--wl-scrim-hero-left),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%)}
.wl-kv__inner{position:relative;max-width:780px}
.wl-kv__eyebrow{margin:40px 0 0;font:500 var(--wl-fs-overline)/var(--wl-lh-overline) var(--wl-font-en);color:var(--wl-text-on-dark-subtle)}
.wl-kv--compact .wl-kv__eyebrow{margin-top:28px}
.wl-kv__title{margin:0;font:500 var(--wl-fs-display)/var(--wl-lh-display) var(--wl-font-tc);letter-spacing:var(--wl-ls-display);color:var(--wl-text-on-dark-strong)}
.wl-kv__lead{margin:20px 0 0;max-width:34em;font:400 var(--wl-fs-lead)/var(--wl-lh-lead) var(--wl-font-tc);color:var(--wl-text-on-dark-body);text-wrap:pretty}
/* 2026-10-01 IRON：列表頁 KV 右下分類索引 .wl-kv__index 移除（與篩選列重複） */
/* v1.16（2026-10-13 IRON 關於基金會）暖色淺底版：情境圖本身是暖白亮調（Hero 同語彙的百合與植物），遮罩改暖白、文字改深色；nav 不反白（js/inner.js 看 .wl-kv--light） */
.wl-kv--light{background:var(--wl-surface);color:var(--wl-text)}
.wl-kv--light .wl-kv__media::after{background:linear-gradient(90deg,rgba(251,249,245,.78) 0%,rgba(251,249,245,.42) 38%,rgba(251,249,245,0) 62%),linear-gradient(180deg,rgba(251,249,245,.7) 0%,rgba(251,249,245,0) 30%,rgba(251,249,245,0) 72%,rgba(251,249,245,.55) 100%)}
.wl-kv--light .wl-kv__eyebrow{color:var(--wl-text-secondary)}
.wl-kv--light .wl-kv__title{color:var(--wl-text)}
@media (max-width:640px){.wl-kv--light .wl-kv__img{object-position:var(--wl-kv-pos-m,100% 30%)}.wl-kv--light .wl-kv__media::after{background:linear-gradient(90deg,rgba(251,249,245,.86) 0%,rgba(251,249,245,.55) 45%,rgba(251,249,245,.1) 68%,rgba(251,249,245,0) 100%),linear-gradient(180deg,rgba(251,249,245,.7) 0%,rgba(251,249,245,0) 30%)}}
@media (max-width:1100px){.wl-kv{min-height:416px;padding-top:calc(var(--wl-nav-h) + 72px)}.wl-kv--compact{min-height:320px}}
@media (max-width:640px){.wl-kv{min-height:384px}.wl-kv--compact{min-height:280px;padding-top:calc(var(--wl-nav-h) + 56px);padding-bottom:var(--wl-space-10)}.wl-kv--compact .wl-kv__eyebrow{margin-top:20px}}

/* ---------- 18. 篩選列 Filter bar ----------
   黏在 header 下方的白底列（與錨點列同容器規格），放分頁籤（切換分類）或下拉選單（分類多、需收合時） */
.wl-filter{position:sticky;top:var(--wl-nav-h);z-index:40;background:var(--wl-surface);box-shadow:inset 0 -1px 0 var(--wl-border-subtle)}
.wl-filter__inner{display:flex;align-items:center;justify-content:flex-start;gap:var(--wl-space-4);min-height:var(--wl-subnav-h);padding:0 var(--wl-margin);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.wl-filter__inner::-webkit-scrollbar{display:none}
/* v1.4 R1：篩選分頁籤改用錨點列 chip 語彙（與關注領域內頁 .area-nav__chip 同規格）：12 圓角、16／500、選中亮綠 50% 底；
   JS 加 .has-glider 時選中底改由滑塊 .wl-tabs__glider 在分頁籤之間平移 */
.wl-filter .wl-tabs{position:relative;gap:var(--wl-space-2);box-shadow:none;overflow:visible}
.wl-filter .wl-tab{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;padding:var(--wl-space-3-5);border:0;border-radius:var(--wl-radius-lg);background:transparent;color:var(--wl-text);font:500 16px/16px var(--wl-font-tc);white-space:nowrap;transition:background-color var(--wl-dur-fast) var(--wl-ease)}
.wl-filter .wl-tab[aria-selected="true"]{background:var(--wl-accent-tint)}
.wl-filter .wl-tabs.has-glider .wl-tab[aria-selected="true"]{background:transparent}
@media (hover:hover) and (pointer:fine){.wl-filter .wl-tab[aria-selected="false"]:hover{background:var(--wl-hover-layer)}}
.wl-filter .wl-tab:focus-visible{outline:var(--wl-focus-ring);outline-offset:-2px}

/* R4 高-3（2026-09-16 S7-A）：分頁籤與錨點 chip 視覺高 37（§10.2／§10.17 規定），有效點擊區以 ::before 外擴到
   --wl-c-hit-min（滑鼠 44／觸控 48，§12）；只擴上下，左右不動，chip 之間維持 8px 間距。視覺與版面完全不變。 */
.wl-filter .wl-tab::before,.wl-chip::before{
  content:"";position:absolute;left:0;right:0;
  top:calc((var(--wl-c-hit-min) - 100%) / -2);bottom:calc((var(--wl-c-hit-min) - 100%) / -2);
}

.wl-tabs__glider{position:absolute;left:0;top:0;z-index:0;height:100%;border-radius:var(--wl-radius-lg);background:var(--wl-accent-tint);pointer-events:none;transition:transform var(--wl-dur-medium) var(--wl-ease),width var(--wl-dur-medium) var(--wl-ease)}
/* 2026-10-01 IRON：.wl-dropdown（v1.4 下拉選單）與 .wl-filter--start 退役——年度計畫改分頁籤後前台沒有用到，手冊不放沒用到的元件 */
/* v1.4 回饋（09-15）：篩選列全尺寸一律靠左，與內容左緣對齊 */
@media (max-width:1100px){.wl-filter .wl-tab{padding:12px}}
/* R5 橫向超出時的邊緣淡出（list-kit tabs 依捲動位置加 is-clip-start／is-clip-end） */
.wl-filter__inner.is-clip-end{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.wl-filter__inner.is-clip-start{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px);mask-image:linear-gradient(90deg,transparent,#000 56px)}
.wl-filter__inner.is-clip-start.is-clip-end{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
@media (max-width:640px){.wl-filter .wl-tab{padding:11px 12px;font-size:15px;line-height:15px}}

/* ---------- 19. 卡片網格與卡片延伸 ---------- */
.wl-card-grid{display:grid;grid-template-columns:repeat(var(--wl-cols,4),minmax(0,1fr));gap:var(--wl-space-8) var(--wl-gutter);margin:0;padding:0;list-style:none}
.wl-card-grid--3{--wl-cols:3}
.wl-card-grid--2{--wl-cols:2}
.wl-card-grid > li{display:flex;min-width:0}
.wl-card-grid > li > *{flex:1;min-width:0}
@media (max-width:1100px){.wl-card-grid{--wl-cols:2}}
@media (max-width:640px){.wl-card-grid{--wl-cols:1;gap:var(--wl-space-6)}}
/* R3：3 欄網格行欄同距（照片卡縫一致）；影片卡下方有文字，行距另拉開 */
.wl-card-grid--3{gap:var(--wl-gutter)}
.wl-card-grid--3[data-kind="video"]{row-gap:var(--wl-space-12)}
/* 2026-10-01 IRON：照片卡網格第一張跨 2×2 的主角卡（R3）取消——共好行動改成活動訊息同款「2 張主打＋3 欄」，點亮台灣一般 3 欄 */

/* 白底內容卡：標題、簡述、hover（沿用 7a 的圖框與內距） */
.wl-card__title{margin:0;font:600 var(--wl-fs-h5)/var(--wl-lh-h5) var(--wl-font-tc);letter-spacing:0;color:var(--wl-text);text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-decoration:underline 1px transparent;text-underline-offset:4px;transition:text-decoration-color var(--wl-dur-fast) var(--wl-ease)}
.wl-card__desc{margin:0;font:400 var(--wl-fs-small)/1.7 var(--wl-font-tc);color:var(--wl-text-body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (hover:hover) and (pointer:fine){
  .wl-card:hover .wl-card__title{text-decoration-color:var(--wl-border-strong)}
}
.wl-card:focus-visible .wl-arrow{transform:translateX(var(--wl-nudge))}

/* 主打卡（v1.4 R3）：首頁共好行動照片疊字卡的放大版——3:2 滿版照片＋scrim、玻璃活動日期標、H3 30 白字、右下亮綠膠囊「一起參與」；
   整張卡仍是一個連結，膠囊只是視覺提示。與下方白底卡形成「首頁共好行動（主）＋首頁活動訊息（從）」兩級 */
.wl-card-photo--feature{aspect-ratio:16 / 9}   /* 2026-10-01 IRON：3:2 → 16:9 */
.wl-card-photo--feature .wl-card-photo__body{left:28px;right:210px;bottom:28px;gap:12px}
.wl-card-photo--feature .wl-card-photo__title{min-height:0;font:500 var(--wl-fs-h3)/var(--wl-lh-h3) var(--wl-font-tc);letter-spacing:var(--wl-ls-h3)}
/* 2026-10-01 IRON：主打卡不放膠囊、改右下前往鈕（主題專頁共好行動） */
.wl-card-photo--feature:has(> :is(.wl-icon-btn,.gc)) .wl-card-photo__body{right:96px}
.wl-card-photo--feature > :is(.wl-icon-btn,.ge,.gc){right:28px;bottom:28px}
.wl-card-photo--feature:has(> .ge) .wl-card-photo__body{right:156px}
@media (max-width:1100px){.wl-card-grid--feature{--wl-cols:1}}
@media (max-width:640px){
  .wl-card-photo--feature .wl-card-photo__body{left:16px;right:16px;bottom:76px;gap:8px}
  .wl-card-photo--feature .wl-card-photo__title{font:500 var(--wl-fs-h4)/var(--wl-lh-h4) var(--wl-font-tc);letter-spacing:var(--wl-ls-h4)}
  .wl-card-photo--feature > .ge{left:16px;right:auto;bottom:16px}
  .wl-card-photo--feature:has(> .ge) .wl-card-photo__body{right:16px}
  .wl-card-photo--feature:has(> .gc) .wl-card-photo__body{right:72px;bottom:16px}   /* 2026-10-13 照片卡改 C：方塊留在右下，標題回到底部 */
  .wl-card-photo--feature > .gc{right:16px;bottom:16px}
}

/* 照片疊字卡在網格內：標題最多兩行、固定保留兩行高（單行標題時日期標位置不變，與首頁共好行動卡一致） */
.wl-card-photo__title{min-height:2.8em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* v1.16（2026-10-13 IRON 解憂故事集）：卡片只有標題、沒有附標（日期／標籤）時不保留兩行高——標題貼齊底部，超過一行才往上折行 */
.wl-card-photo__body:not(:has(> :not(.wl-card-photo__title))) .wl-card-photo__title{min-height:0}
.wl-card-photo:focus-visible .wl-arrow{transform:translateX(var(--wl-nudge))}
@media (hover:hover) and (pointer:fine){.wl-card-photo:hover .wl-icon-btn{background:var(--wl-accent-hover)}.wl-card-photo:hover .wl-arrow{transform:translateX(var(--wl-nudge))}}
@media (max-width:640px){.wl-card-photo__body{left:16px;right:64px;bottom:16px}.wl-card-photo .wl-icon-btn,.wl-card-photo > :is(.ge,.gc){right:16px;bottom:16px}.wl-card-photo .wl-tag-glass{padding:2px 8px;font-size:14px;line-height:20px}}

/* 影片卡（網格）：16:9 影片代圖＋左下播放鈕，下方標題＋簡述；整張是一顆按鈕，開啟影片燈箱 */
.wl-card-video{display:flex;flex-direction:column;gap:20px;width:100%;margin:0;padding:0;border:0;background:none;color:var(--wl-text);text-align:left;font:inherit;cursor:pointer}
.wl-card-video__media{position:relative;display:block;aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--wl-radius-lg);background:var(--wl-surface-sunken)}
.wl-card-video__media img{display:block;width:100%;height:100%;object-fit:cover;transition:scale var(--wl-dur-slow) var(--wl-ease)}
.wl-card-video__media .wl-icon-btn{position:absolute;left:20px;bottom:20px}
.wl-card-video__body{display:flex;flex-direction:column;gap:8px;min-width:0}
.wl-card-video__title{margin:0;font:500 var(--wl-fs-h4)/var(--wl-lh-h4) var(--wl-font-tc);letter-spacing:var(--wl-ls-h4);color:var(--wl-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wl-card-video__desc{margin:0;font:400 var(--wl-fs-body)/1.7 var(--wl-font-tc);color:var(--wl-text-body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}   /* R5：14 → 16、3 → 2 行，標題 24 與描述差距收斂，三欄時每張卡等高 */
/* R5 標題開頭是全形《「時，去掉標點左側半格空白，標題左緣才會跟描述對齊（Chrome 123+；不支援時維持原樣） */
:is(.wl-card-video__title,.wl-card__title,.wl-card-photo__title,.wl-article__title,.wl-pn__title,.wl-list-head__title){text-spacing-trim:trim-start}
.wl-card-video:focus-visible{outline:var(--wl-focus-ring);outline-offset:4px;border-radius:var(--wl-radius-lg)}
@media (hover:hover) and (pointer:fine){.wl-card-video:hover .wl-card-video__media img{scale:1.03}.wl-card-video:hover .wl-icon-btn{background:var(--wl-accent-hover)}}
@media (max-width:640px){.wl-card-video__media .wl-icon-btn{left:12px;bottom:12px}}

/* 列表區塊標題列（v1.4 R2）：列表頁補回首頁的「中間層級」——英文眉標＋H2（目前分類）＋右側筆數＋下緣 hairline，
   與首頁永續映像 .vid-head 同一組節奏（標題列 → 32 → 分隔線 → 48 → 內容） */
.wl-list-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--wl-space-6);margin-bottom:var(--wl-space-12);padding-bottom:var(--wl-space-8);box-shadow:inset 0 -1px 0 var(--wl-border)}
.wl-list-head__titles{display:flex;flex-direction:column;min-width:0}
.wl-list-head__title{margin:0;font:500 var(--wl-fs-h2)/var(--wl-lh-h2) var(--wl-font-tc);letter-spacing:var(--wl-ls-h2);color:var(--wl-text);text-wrap:balance}
/* 筆數：Lexend Exa 數字＋「則」，14 字級、底部對齊 H2 字身（H2 行框下緣留白約 .15em，這裡補 10px） */
.wl-list-head__count{display:inline-flex;align-items:baseline;gap:6px;margin:0 0 10px;font:400 var(--wl-fs-meta-l)/20px var(--wl-font-tc);color:var(--wl-text-secondary);white-space:nowrap}
.wl-list-head__count b{font:500 var(--wl-fs-meta-l)/20px var(--wl-font-en);color:var(--wl-text);font-variant-numeric:tabular-nums}
/* R4 中-2（2026-09-16 S8-FIX）：手機 List head 由 H2 40 降為 32，讓列表頁字級成為 KV H1 44 → List head 32 → 卡片標題 20 三階
   （原本 44 → 40 只差 10%，實為同一層，§10.23「不要從主標直接跳到卡片標題」在手機沒有達成）。
   刻意不動 --wl-fs-h2-compact 的手機值：該變數同時是 Figma WL/Section Heading Size=Compact 的字級（對應首頁 #news 欄標題 base.css --fs-h2-sm），
   改它會一併把首頁手機區塊標題由 40 降為 32，與 IRON 2026-09-14「手機區塊標題一律 40」衝突。
   2026-09-17：改由 --wl-fs-h2 手機值 32 直接帶出，已移除元件層覆寫；Figma 對應樣式改回 WL/H2（手機 mode 32／42），原 WL/Comp/List Head Title Mobile 已刪除。 */
@media (max-width:640px){
  .wl-list-head{margin-bottom:var(--wl-space-8);padding-bottom:var(--wl-space-6)}
}

/* ---------- 20. 清單列延伸：下載 ---------- */
.wl-dl{width:var(--wl-c-icon-glyph);height:var(--wl-c-icon-glyph);flex:none;overflow:visible;transition:transform var(--wl-dur-medium) var(--wl-ease)}
@media (hover:hover) and (pointer:fine){
  .wl-row:hover .wl-dl{transform:translateY(var(--wl-nudge))}
  .wl-row:hover .wl-arrow{transform:translateX(var(--wl-nudge))}
}
.wl-row:focus-visible .wl-dl{transform:translateY(var(--wl-nudge))}
.wl-container--list{max-width:var(--wl-container-list);margin-inline:auto}
.wl-container--article{max-width:var(--wl-container-article);margin-inline:auto}

/* ---------- 21. 載入更多／空結果 ---------- */
.wl-more{display:flex;justify-content:center;margin-top:var(--wl-space-14)}
.wl-more[hidden]{display:none}
.wl-empty{margin:0;padding:var(--wl-space-20) 0;text-align:center;font:400 var(--wl-fs-body)/var(--wl-lh-body) var(--wl-font-tc);color:var(--wl-text-secondary)}
.wl-empty[hidden]{display:none}
/* 2026-10-01 IRON：空狀態（區塊版）——圖示圓 56 → 標題 H5 → 說明 → 返回鈕；用在清單分類 0 則（重要公告「其他公告」等） */
.wl-empty--block{display:flex;flex-direction:column;align-items:center;gap:var(--wl-space-3);padding:var(--wl-space-16) var(--wl-space-6);border-radius:var(--wl-radius-lg);background:var(--wl-surface-raised)}
.wl-empty--block[hidden]{display:none}
.wl-empty__ico{display:grid;place-items:center;width:56px;height:56px;margin-bottom:var(--wl-space-2);border-radius:50%;background:var(--wl-surface-sunken);color:var(--wl-text-secondary)}
.wl-empty__ico svg{width:24px;height:24px}
.wl-empty__title{margin:0;font:600 var(--wl-fs-h5)/var(--wl-lh-h5) var(--wl-font-tc);color:var(--wl-text)}
.wl-empty__desc{margin:0;max-width:24em;font:400 var(--wl-fs-small)/1.7 var(--wl-font-tc);color:var(--wl-text-secondary);text-wrap:pretty}
.wl-empty--block .wl-btn{margin-top:var(--wl-space-4)}
.wl-empty--block .wl-btn[hidden]{display:none}
@media (max-width:640px){.wl-more{margin-top:var(--wl-space-10)}.wl-more .wl-btn{width:100%;justify-content:space-between}}

/* ---------- 22. 內容頁標頭 Article header ---------- */
.wl-article{padding:calc(var(--wl-nav-h) + var(--wl-space-20)) var(--wl-margin) var(--wl-section);background:var(--wl-surface);color:var(--wl-text)}   /* R2：上留白 56 → 80 */
.wl-article__head{padding-bottom:var(--wl-space-10);box-shadow:inset 0 -1px 0 var(--wl-border)}
.wl-article__eyebrow{margin-top:var(--wl-space-10)}   /* R2：麵包屑 → 40 → 英文眉標 → H1（同情境 KV 的排列） */
.wl-article__eyebrow:empty{display:none}
.wl-article__title{margin:var(--wl-space-6) 0 0;font:500 var(--wl-fs-h2)/var(--wl-lh-h2) var(--wl-font-tc);letter-spacing:var(--wl-ls-h2);color:var(--wl-text);text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}   /* R4：優先在標點斷行，不把「華新／麗華」拆兩行；沒有標點的長標題仍可斷 */
.wl-article__eyebrow:not(:empty) + .wl-article__title{margin-top:0}
.wl-article__tag{display:flex;margin:var(--wl-space-4) 0 0}   /* 2026-10-04 IRON：附註標籤放標題下方（標題 → 16 → 標籤），只有主題專頁且有填才顯示 */
.wl-article__tag[hidden]{display:none}
@media (max-width:640px){.wl-article{padding-top:calc(var(--wl-nav-h) + var(--wl-space-10))}.wl-article__eyebrow{margin-top:var(--wl-space-8)}}
/* R4：前往報名是活動內容頁的主要轉換，加大到高 52；2026-10-12 改前往按鈕 E（.ge：細框膠囊＋ >，hover 填亮綠） */
.wl-article__meta .ge{height:52px;padding:0 22px 0 26px;font-size:var(--wl-fs-button)}
@media (hover:hover) and (pointer:fine){.wl-article__meta a.ge:hover{padding:0 24px 0 28px}}
@media (max-width:640px){.wl-article__title{font-size:32px;line-height:1.35;letter-spacing:-.01em;text-wrap:pretty}   /* 2026-09-17 IRON 定案：手機層級 44 主視覺 → 32 內容頁主標＝區塊標題 → 20 卡片 */}
.wl-article__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:var(--wl-space-8)}
.wl-article__meta[hidden]{display:none}   /* R2：display:flex 會蓋掉 [hidden]，一般版標題下多出 32px */
.wl-article__when{display:flex;align-items:center;gap:10px;margin:0;font:500 var(--wl-fs-body)/1.5 var(--wl-font-tc);color:var(--wl-text)}
.wl-article__when svg{flex:none;width:20px;height:20px;color:var(--wl-text-secondary)}
.wl-article__when-label{font-weight:400;color:var(--wl-text-secondary)}
.wl-article__body{margin-top:var(--wl-space-12)}
@media (max-width:640px){.wl-article__meta :is(.wl-btn,.ge){width:100%;justify-content:space-between}}

/* ---------- 23. 內文 Prose（後台編輯器內容） ---------- */
.wl-prose{font:400 var(--wl-fs-body-l)/var(--wl-lh-body-l) var(--wl-font-tc);color:var(--wl-text-body);overflow-wrap:anywhere}
.wl-prose > *{margin:0}
.wl-prose > * + *{margin-top:1.4em}
.wl-prose h2{font:500 var(--wl-fs-h3)/var(--wl-lh-h3) var(--wl-font-tc);letter-spacing:var(--wl-ls-h3);color:var(--wl-text)}
.wl-prose h3{font:500 var(--wl-fs-h4)/var(--wl-lh-h4) var(--wl-font-tc);letter-spacing:var(--wl-ls-h4);color:var(--wl-text)}
.wl-prose h4{font:600 var(--wl-fs-h5)/var(--wl-lh-h5) var(--wl-font-tc);color:var(--wl-text)}
.wl-prose > :is(h2,h3,h4){margin-top:2em}
.wl-prose > :is(h2,h3,h4) + *{margin-top:.6em}
.wl-prose :is(strong,b){font-weight:600;color:var(--wl-text)}
.wl-prose a{color:var(--wl-text);text-decoration:underline 1px var(--wl-border-strong);text-underline-offset:4px;transition:text-decoration-color var(--wl-dur-fast) var(--wl-ease)}
@media (hover:hover) and (pointer:fine){.wl-prose a:hover{text-decoration-color:var(--wl-text)}}
.wl-prose ul{padding-left:1.4em;list-style:disc}
.wl-prose ol{padding-left:1.4em;list-style:decimal}
.wl-prose li + li{margin-top:.4em}
.wl-prose li::marker{color:var(--wl-text-secondary)}
.wl-prose > figure{margin-top:2.4em}
.wl-prose > figure + figure{margin-top:var(--wl-space-4)}
.wl-prose > figure + :not(figure){margin-top:2.4em}
/* 2026-10-04 IRON：文章內頁的照片與影音都來自 CMS 編輯器、無法控制圓角 → 一律直角（封面、內文 figure／img、iframe／video） */
.wl-prose img{display:block;width:100%;height:auto;border-radius:0;background:var(--wl-surface-sunken)}
.wl-prose figcaption{margin-top:8px;font:400 var(--wl-fs-caption)/var(--wl-lh-caption) var(--wl-font-tc);color:var(--wl-text-secondary)}
.wl-prose blockquote{padding:24px 28px;border-radius:var(--wl-radius-lg);background:var(--wl-surface-alt);color:var(--wl-text)}
.wl-prose hr{height:1px;border:0;background:var(--wl-border)}
.wl-prose :is(iframe,video){display:block;width:100%;height:auto;aspect-ratio:16 / 9;border:0;border-radius:0;background:#000}
.wl-prose table{width:100%;border-collapse:collapse;font-size:var(--wl-fs-small);line-height:1.6}
.wl-prose :is(th,td){padding:12px;text-align:left;vertical-align:top;box-shadow:inset 0 -1px 0 var(--wl-border)}
.wl-prose th{font-weight:600;color:var(--wl-text)}
@media (max-width:640px){.wl-prose blockquote{padding:20px}}
/* v1.4 回饋（09-15）：文字與圖片同寬（960 全欄），不再窄文寬圖；只包圖片的 <p> 視同 figure；文字與圖片之間前後都留 2.4em、連續圖片 16；圖片框裁切，捲動時圖片 1.1 → 1 */
.wl-prose > :not(figure,p:has(> img)) + :is(figure,p:has(> img)),
.wl-prose > p:has(> img) + :not(figure,p:has(> img)){margin-top:2.4em}
.wl-prose > :is(figure,p:has(> img)) + :is(figure,p:has(> img)){margin-top:var(--wl-space-4)}
.wl-prose > :is(figure,p:has(> img)){overflow:hidden;border-radius:0}   /* 2026-10-04：直角（原 radius-lg 12） */
/* 直式照片（detail.js 依 img 寬高加 .is-portrait）：框維持全欄，圖片限高置中，免得一張圖佔掉 1.5 個螢幕 */
.wl-prose > .is-portrait img{width:auto;max-width:100%;max-height:min(80vh,760px);margin-inline:auto}
/* 2026-10-02 IRON：內容頁封面照片示意（文章開頭，16:9 裁切） */
.wl-prose > .wl-article__cover img{aspect-ratio:16 / 9;object-fit:cover}
.wl-prose > .wl-article__cover + *{margin-top:2.4em}

/* ---------- 25. 首圖模組 Gallery（2026-10-04 IRON） ----------
   年度計畫、主題專頁內容頁的獨立首圖欄位 gallery＝{ mode: carousel | grid, images 1–6 張 }，由 js/gallery.js 輸出，放在內文最前面（取代封面示意）。
   照片一律直角（文章內頁規則，v1.9.4）。
   固定版型：一排最多 3 張、每排平分內容寬（6 欄格線，span 6／3／2）；每張照片一律 16:9（2026-10-05 IRON：換到第二排也維持 16:9），
     4–6 張第 4 張起換到第二排，第二排依張數平分寬度，列高由 16:9 自然決定（4 張＝下排全寬 16:9、5 張＝下排 2 張各半寬 16:9）
   Carousel：16:9、左右 40 圓鈕（手機 32）、底部狀態點（目前張為 24 長膠囊）、循環切換 */
.wl-gallery{--wl-gallery-gap:var(--wl-space-4)}
@media (max-width:640px){.wl-gallery{--wl-gallery-gap:var(--wl-space-3)}}
.wl-prose > .wl-gallery + *{margin-top:2.4em}
.wl-gallery--grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--wl-gallery-gap)}
.wl-gallery__tile{position:relative;grid-column:span 2;aspect-ratio:16 / 9;overflow:hidden;background:var(--wl-surface-sunken)}
.wl-gallery--grid[data-count="1"] .wl-gallery__tile{grid-column:span 6}
.wl-gallery--grid[data-count="2"] .wl-gallery__tile{grid-column:span 3}
.wl-gallery--grid[data-count="4"] .wl-gallery__tile:nth-child(4){grid-column:span 6}
.wl-gallery--grid[data-count="5"] .wl-gallery__tile:nth-child(n+4){grid-column:span 3}
.wl-gallery img,.wl-prose .wl-gallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;background:none}
.wl-carousel__viewport{position:relative;aspect-ratio:16 / 9;overflow:hidden;background:var(--wl-surface-sunken);touch-action:pan-y}
.wl-carousel__track{display:flex;height:100%;transition:transform var(--wl-dur-medium) var(--wl-ease)}
.wl-carousel__slide{position:relative;flex:0 0 100%;height:100%}
.gc.wl-carousel__nav{position:absolute;top:50%;z-index:1;translate:0 -50%}   /* .gc 在 base.css 設 relative，這裡加權重 */
.wl-carousel__nav--prev{left:var(--wl-space-4)}
.wl-carousel__nav--next{right:var(--wl-space-4)}
.wl-carousel__dots{display:flex;justify-content:center;gap:var(--wl-space-2);margin-top:var(--wl-space-4)}
.wl-carousel__dot{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:999px;background:var(--wl-border-strong);cursor:pointer;transition:width var(--wl-dur-fast) var(--wl-ease),background-color var(--wl-dur-fast) var(--wl-ease)}
.wl-carousel__dot::before{content:"";position:absolute;inset:-8px -4px}   /* 點擊區 24 高 */
.wl-carousel__dot[aria-current="true"]{width:24px;background:var(--wl-text)}
.wl-carousel__dot:focus-visible{outline:var(--wl-focus-ring);outline-offset:3px}
@media (max-width:640px){
  .gc.wl-carousel__nav{width:var(--wl-c-icon-link);height:var(--wl-c-icon-link);border-radius:10px}   /* 手機 32：C 方塊圓角同比例縮到 10 */
  .wl-carousel__nav--prev{left:var(--wl-space-2)}
  .wl-carousel__nav--next{right:var(--wl-space-2)}
  .wl-carousel__dots{margin-top:var(--wl-space-3)}
}

/* ---------- 24. 上一則／下一則 ---------- */
/* R4：改成首頁重要公告清單列語彙——上下 hairline 夾住的兩格、中間 1px 直線，亮綠實心圖示鈕；缺一邊時放「返回列表」 */
.wl-pn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:var(--wl-space-20);padding-top:0;box-shadow:inset 0 1px 0 var(--wl-border),inset 0 -1px 0 var(--wl-border)}
.wl-pn__item{display:flex;align-items:center;gap:var(--wl-space-5);padding:var(--wl-space-8) var(--wl-space-8) var(--wl-space-8) 0;color:var(--wl-text);text-decoration:none}
.wl-pn__item--next{grid-column:2;flex-direction:row-reverse;text-align:right;padding:var(--wl-space-8) 0 var(--wl-space-8) var(--wl-space-8);box-shadow:inset 1px 0 0 var(--wl-border)}
.wl-pn__text{display:flex;flex:1;flex-direction:column;gap:6px;min-width:0}
.wl-pn__label{font:400 var(--wl-fs-small)/var(--wl-lh-small) var(--wl-font-tc);color:var(--wl-text-secondary)}
.wl-pn .ge .wl-grid-ico{width:14px;height:14px}
.wl-pn__item--back:only-child{grid-column:1 / -1}   /* 同類只有一則：返回列表佔滿整列 */
.wl-pn__title{font:500 22px/30.8px var(--wl-font-tc);color:var(--wl-text);text-wrap:balance;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-decoration:underline 1px transparent;text-underline-offset:4px;transition:text-decoration-color var(--wl-dur-fast) var(--wl-ease)}
/* 上一則箭頭朝左：.ge--prev（base.css） */
.wl-pn__item:focus-visible{outline:var(--wl-focus-ring);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .wl-pn__item:hover .wl-pn__title{text-decoration-color:var(--wl-border-strong)}
  .wl-pn__item:hover .wl-icon-btn{background:var(--wl-accent-hover)}
  .wl-pn__item--next:hover .wl-arrow{transform:translateX(var(--wl-nudge))}
  .wl-pn__item--prev:hover .wl-arrow{transform:scaleX(-1) translateX(var(--wl-nudge))}
}
@media (max-width:640px){.wl-pn{grid-template-columns:minmax(0,1fr);margin-top:var(--wl-space-14)}.wl-pn__item,.wl-pn__item--next{grid-column:auto;padding:var(--wl-space-6) 0}.wl-pn__item--next{flex-direction:row;text-align:left;box-shadow:inset 0 1px 0 var(--wl-border)}.wl-pn__title{font-size:19px;line-height:1.45}}

@media (prefers-reduced-motion:reduce){
  .wl-card__title,.wl-card-video__media img,.wl-dl,.wl-pn__item,.wl-pn__title,.wl-prose a{transition:none}
}


/* ---------- 26. 大標頁首 Page head（v1.16 · 2026-10-13 IRON：解憂雜貨店、聯絡我們不用 KV 圖，照原站「大標題＋英文背景大字」） ----------
   ▸ 內容寬滿版（左右 --wl-margin、不設最大寬，同主題專頁）；淺底（surface），nav 維持 solid；麵包屑 → 英文大字（Lexend Exa 500、accent-tint、只做裝飾 aria-hidden）→ H1 Display 疊在大字下半
   ▸ 大字 1440 約 188px（13vw，上限 188）、左緣對齊內容並往左出血 .05em；手機改兩行（Hope／Corner）
   ▸ 動態（js/pages/info.js）：大字逐字由下升起、H1 去模糊上浮；捲動時大字往左慢移 4%；?static／減少動態不做 */
.wl-page-head{position:relative;overflow:hidden;padding:calc(var(--wl-nav-h) + 40px) var(--wl-margin) var(--wl-space-16);background:var(--wl-surface);color:var(--wl-text)}
.wl-page-head__inner{max-width:none}   /* 2026-10-13 IRON：滿版，同主題專頁寬度規則 */
.wl-page-head__title{--wl-ph-word:clamp(72px,13vw,188px);position:relative;margin-top:var(--wl-space-12)}
.wl-page-head__word{margin:0 0 0 -.05em;overflow:hidden;padding:.04em 0 .06em;font:500 var(--wl-ph-word)/1 var(--wl-font-en);letter-spacing:-.05em;color:var(--wl-accent-tint);white-space:nowrap;user-select:none;pointer-events:none}
.wl-page-head__line{display:inline-block;will-change:transform}
.wl-page-head__char{display:inline-block;will-change:transform}
.wl-page-head__h1{position:relative;margin:calc(var(--wl-ph-word) * -.56) 0 0;font:500 var(--wl-fs-display)/var(--wl-lh-display) var(--wl-font-tc);letter-spacing:var(--wl-ls-display);color:var(--wl-text)}
.wl-page-head + .wl-section{padding-top:0}
@media (max-width:1100px){.wl-page-head{padding-top:calc(var(--wl-nav-h) + 32px);padding-bottom:var(--wl-space-12)}.wl-page-head__title{margin-top:var(--wl-space-8)}}
@media (max-width:640px){
  .wl-page-head{padding-bottom:var(--wl-space-10)}
  .wl-page-head__title{--wl-ph-word:clamp(52px,15vw,96px);margin-top:var(--wl-space-6)}
  .wl-page-head__word{white-space:normal;line-height:.92}
  .wl-page-head__h1{margin-top:calc(var(--wl-ph-word) * -.5)}
}