/* wen8604-friendly v1.1｜樣式。色票依 wen8604 設計規範 v1.0；各站可覆寫 --wf-* 變數配合站色。
 * v1.1：放大倍率變數 --wf-zoom、位置固定的放大區不放大容器本身、keep 不放大、浮動按鈕避開底部選單（--wf-float-offset）、
 *       切換時暫停轉場（.wf-switching）、高對比規則降權重（:where）並保留色點與 <i>、keep 區恢復網站字色、連結按鈕重設底色。 */
:root {
  --wf-ink: #0B4A6B; --wf-card: #FFFEFA; --wf-line: #C9D4DA; --wf-muted: #5D6870; --wf-chip: #EEF4F7; --wf-focus: #C2410C;
  --wf-font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  /* 深色主題（規範第 2 節） */
  --wf-d-bg: #0E1522; --wf-d-card: #17202F; --wf-d-ink: #EEF2F8; --wf-d-muted: #B8C2D0; --wf-d-link: #8FBCF2; --wf-d-line: #33415A; --wf-d-accent: #F2B544;
  /* 高對比（規範第 5 節） */
  --wf-hc-bg: #10212C; --wf-hc-ink: #E8F1F5; --wf-hc-link: #F2B544; --wf-hc-line: #8AA3B0;
  /* 文字放大倍率（網站可用 calc(… / var(--wf-zoom)) 自行修正） */
  --wf-zoom: 1;
}
html[data-rd-size="1"] { --wf-zoom: 1.12; }
html[data-rd-size="2"] { --wf-zoom: 1.25; }
@media (max-width: 600px) {
  html[data-rd-size="1"] { --wf-zoom: 1.08; }
  html[data-rd-size="2"] { --wf-zoom: 1.18; }
}
html[data-wf-theme=dark] { color-scheme: dark; --wf-ink: #EEF2F8; --wf-card: #17202F; --wf-line: #4A5A70; --wf-muted: #B8C2D0; --wf-chip: #22304A; --wf-focus: #F2B544; }
html[data-wf-theme=light] { color-scheme: light; }

/* ---------- 切換高對比／明暗的瞬間暫停轉場（下一個 frame 移除） ---------- */
html.wf-switching, html.wf-switching *, html.wf-switching *::before, html.wf-switching *::after { transition: none !important; }

/* ---------- 按鈕與面板 ---------- */
.wf-toggle { min-width: 48px; min-height: 48px; padding: 0 18px; border: 2px solid var(--wf-ink); border-radius: 24px; background: var(--wf-card); color: var(--wf-ink); font: 700 15px/1 var(--wf-font); letter-spacing: .04em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; box-shadow: 0 6px 18px -8px rgba(0,0,0,.45); }
.wf-toggle:hover { background: var(--wf-chip); }
.wf-toggle.is-active, .wf-toggle[aria-expanded="true"] { background: var(--wf-ink); color: var(--wf-card); }
.wf-toggle.wf-inline { box-shadow: none; font-size: 14px; }
.wf-short { display: none; }
.wf-float { position: fixed; right: 16px; bottom: calc(16px + max(var(--wf-float-offset, 0px), env(safe-area-inset-bottom, 0px))); z-index: 2147483000; zoom: 1; }
.wf-panel { position: fixed; right: 16px; bottom: calc(76px + max(var(--wf-float-offset, 0px), env(safe-area-inset-bottom, 0px))); z-index: 2147483001; width: 420px; max-width: calc(100vw - 24px); box-sizing: border-box; padding: 18px; border: 2px solid var(--wf-ink); border-radius: 16px; background: var(--wf-card); color: var(--wf-ink); box-shadow: 0 18px 40px -18px rgba(0,0,0,.5); display: grid; gap: 14px; max-height: calc(100vh - 110px - var(--wf-float-offset, 0px)); max-height: calc(100dvh - 110px - var(--wf-float-offset, 0px)); overflow: auto; font-family: var(--wf-font); text-align: left; zoom: 1 !important; letter-spacing: normal; line-height: 1.5; }
.wf-panel[hidden] { display: none; }
.wf-panel.wf-panel-top { top: 72px; bottom: auto; max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); }
.wf-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wf-head h2 { margin: 0; font: 700 20px/1.4 var(--wf-font); color: var(--wf-ink); }
.wf-close { flex-shrink: 0; width: 48px; height: 48px; border: 1px solid var(--wf-line); border-radius: 50%; background: var(--wf-card); color: var(--wf-ink); font-size: 18px; line-height: 1; cursor: pointer; }
.wf-note { margin: 0; font-size: 14px; line-height: 1.7; color: var(--wf-muted); }
.wf-row { display: grid; gap: 8px; }
.wf-label { font-weight: 700; font-size: 16px; line-height: 1.4; }
.wf-opts, .wf-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wf-panel button:not(.wf-close) { min-height: 48px; min-width: 48px; padding: 0 16px; border: 2px solid var(--wf-line); border-radius: 12px; background: var(--wf-card); color: var(--wf-ink); font: 600 16px/1 var(--wf-font); cursor: pointer; }
.wf-panel button:not(.wf-close):hover { border-color: var(--wf-ink); }
.wf-panel button[aria-pressed="true"] { border-color: var(--wf-ink); background: var(--wf-ink); color: var(--wf-card); }
.wf-more { border-top: 1px solid var(--wf-line); padding-top: 12px; display: grid; gap: 12px; }
.wf-more > summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 700; font-size: 16px; }
.wf-more[open] > summary { margin-bottom: 4px; }
.wf-actions { padding-top: 14px; border-top: 1px solid var(--wf-line); }
.wf-root button:focus-visible, .wf-toggle:focus-visible, .wf-more > summary:focus-visible { outline: 3px solid var(--wf-focus); outline-offset: 3px; }
@media (max-width: 600px) {
  .wf-toggle.wf-float { padding: 0 14px; font-size: 14px; letter-spacing: 0; }
  .wf-float .wf-long { display: none; } .wf-float .wf-short { display: inline; }
  .wf-panel { left: 12px; right: 12px; width: auto; max-width: none; max-height: calc(100vh - 100px - var(--wf-float-offset, 0px)); max-height: calc(100dvh - 100px - var(--wf-float-offset, 0px)); }
}
@media print { .wf-root, .wf-toggle { display: none !important; } }

/* ---------- 頁尾最後更新（規範第 5 節） ---------- */
.wf-updated { margin: 0 0 8px; padding-top: 10px; border-top: 1px solid var(--c-border, #DCE5DD); font-size: 14px; line-height: 1.6; color: var(--c-muted, #5D6870); }
html[data-wf-theme=dark] .wf-updated { border-top-color: var(--wf-d-line); color: var(--wf-d-muted); }
.wf-updated time { font-variant-numeric: tabular-nums; }

/* ---------- 文字大小（三段）----------
 * 放大：main、footer、data-wf-zoom（keep 不放大）。頁首不放大＝頁首在 main 外面時才成立。
 * 位置固定的放大區（data-wf-fixed，由 wf.js 標記）：容器本身不放大，放大它的子元素，vh／dvh 高度才不會被放大。
 * 沒有 main 也沒有 zoom 區塊時（wf-nomain）才退回放大 body 底下除了 header 與 keep 以外的元素。 */
html[data-rd-size] :is(main, footer, [data-wf-zoom]):not([data-wf-keep], [data-wf-fixed], .wf-root *),
html[data-rd-size] [data-wf-fixed]:not([data-wf-keep]) > *,
html[data-rd-size].wf-nomain body > :not(.wf-root, header, [data-wf-keep], script, style) { zoom: var(--wf-zoom); }
/* 巢狀不重複放大（固定放大區的直接子元素除外） */
:is(main, footer, [data-wf-zoom]):not([data-wf-fixed]) :is(main, footer, [data-wf-zoom]),
[data-wf-fixed] > * :is(main, footer, [data-wf-zoom]),
:is(main, footer, [data-wf-zoom]):not([data-wf-fixed]) [data-wf-fixed] > * { zoom: 1 !important; }
/* 放大區裡面要維持原尺寸的元素（noZoom，例如內嵌地圖） */
html[data-rd-size] :is(main, footer, [data-wf-zoom]) [data-wf-nozoom] { zoom: calc(1 / var(--wf-zoom)) !important; }

/* ---------- 行距、字距 ---------- */
[data-rd-spacing] :is(main, footer, [data-wf-zoom], .wf-nomain body) :is(p, li, dd, dt, td, th, summary, blockquote, figcaption, label):not(.wf-root *) { line-height: 2.1 !important; }
[data-rd-tracking] :is(main, footer, [data-wf-zoom], .wf-nomain body) :is(p, li, dd, dt, td, th, summary, blockquote, figcaption, label, h1, h2, h3, h4, a, span):not(.wf-root *) { letter-spacing: .08em !important; }

/* ---------- 高對比：#10212C 底、#E8F1F5 字、連結 #F2B544（對比 14.4／8.6） ----------
 * v1.1：規則以 :where() 包住，權重只有 (0,1,1)，網站寫 html[data-rd-contrast] .x { …!important } 就蓋得過。
 * 不重設：<i>、<svg>、空的 span／div（色點、色塊）、class 含 dot／swatch 的元素、data-wf-keep 與 data-wf-keep-color 區。 */
html[data-rd-contrast] { color-scheme: dark; }
html[data-rd-contrast] body { background: var(--wf-hc-bg) !important; color: var(--wf-hc-ink) !important; }
html[data-rd-contrast] :where(body :is(main, header, footer, nav, aside, section, article, div, form, fieldset, dialog, details, table, thead, tbody, tfoot, tr, td, th, ul, ol, li, dl, dd, dt, p, span, label, h1, h2, h3, h4, h5, h6, small, strong, em, b, figcaption, blockquote, summary, legend, time, output, input, select, textarea, button, mark, code):not(:is(span, div, b, em, small, mark):empty, [class*=dot], [class*=swatch], [data-wf-keep], [data-wf-keep] *, [data-wf-keep-color], [data-wf-keep-color] *, .wf-root, .wf-root *, .wf-toggle, .wf-toggle *)) {
  background-color: var(--wf-hc-bg) !important; background-image: none !important; color: var(--wf-hc-ink) !important; border-color: var(--wf-hc-line) !important; text-shadow: none !important; box-shadow: none !important;
}
/* 連結：字色改黃；按鈕形式的連結（有底色）也重設底色與邊框 */
html[data-rd-contrast] :where(body a:not([data-wf-keep] *, [data-wf-keep-color], [data-wf-keep-color] *, .wf-root *)) { background-color: var(--wf-hc-bg) !important; background-image: none !important; border-color: var(--wf-hc-link) !important; text-shadow: none !important; box-shadow: none !important; }
html[data-rd-contrast] :where(body a:not([data-wf-keep] *, [data-wf-keep-color], [data-wf-keep-color] *, .wf-root *), body a:not([data-wf-keep] *, [data-wf-keep-color] *, .wf-root *) :not(svg, svg *, [data-wf-keep-color], [data-wf-keep-color] *)) { color: var(--wf-hc-link) !important; }
html[data-rd-contrast] :where(body :is(button, input:not([type=hidden], [type=checkbox], [type=radio], [type=range], [type=color]), select, textarea):not([data-wf-keep] *, [data-wf-keep-color], .wf-root *, .wf-toggle)) { border: 2px solid var(--wf-hc-ink) !important; }
/* keep 區（地圖、圖表）自己有底色時（wf.js 標 data-wf-keep-ink）：不繼承高對比的淺色字，改用網站原本的字色（wf.js 量出來的 --wf-site-ink）；透明的 keep（圖示、色點）照舊跟著高對比字色 */
:where(html[data-rd-contrast] [data-wf-keep][data-wf-keep-ink]) { color: var(--wf-site-ink); }
html[data-rd-contrast] body ::placeholder { color: #B9C8D0 !important; }
html[data-rd-contrast] :focus-visible { outline: 4px solid var(--wf-hc-link) !important; outline-offset: 3px !important; }
html[data-rd-contrast] { --wf-ink: #E8F1F5; --wf-card: #10212C; --wf-line: #8AA3B0; --wf-muted: #D2DEE4; --wf-chip: #1A3140; --wf-focus: #F2B544; }
html[data-rd-contrast] .wf-panel a { color: var(--wf-hc-link); }

/* ---------- 減少動態：開關或系統偏好（選「保留」才不跟隨系統） ---------- */
[data-rd-motion="1"] *, [data-rd-motion="1"] *::before, [data-rd-motion="1"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-rd-motion="2"]) *, html:not([data-rd-motion="2"]) *::before, html:not([data-rd-motion="2"]) *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- 細部設定 ---------- */
[data-rd-underline] :is(main, footer, [data-wf-zoom], .wf-nomain body) a:not(.wf-root *) { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 2px; }
[data-rd-bold] :is(main, footer, [data-wf-zoom], .wf-nomain body) :is(p, li, dd, td, span, a, label):not(.wf-root *) { font-weight: 600 !important; }
[data-rd-focus] :focus-visible { outline: 4px solid var(--wf-focus) !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px rgba(242,181,68,.45) !important; }
[data-rd-target] :is(button, [role=button], select, input[type=checkbox], input[type=radio], summary):not(.wf-root *) { min-height: 44px; min-width: 44px; }
[data-rd-target] :is(main, footer, nav, [data-wf-zoom]) a:not(.wf-root *) { display: inline-block; min-height: 32px; padding-block: 6px; }
[data-rd-font] body, [data-rd-font] body :is(p, li, h1, h2, h3, h4, a, span, button, input, select, label, td, th):not(code):not(.wf-root *) { font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif !important; }

/* ---------- 通用深色（只在網站設定 darkCss:"generic" 時啟用；網站自己有深色樣式就不套） ----------
 * v1.1：同高對比，以 :where() 降權重，不清 <i>、空的色塊與 dot／swatch 類。 */
html.wf-dark-generic[data-wf-theme=dark]:not([data-rd-contrast]) body { background: var(--wf-d-bg) !important; color: var(--wf-d-ink) !important; }
html.wf-dark-generic[data-wf-theme=dark]:not([data-rd-contrast]) :where(body :is(main, header, footer, nav, aside, section, article, div, form, fieldset, details, table, thead, tbody, tr, td, th, ul, ol, li, dl, dd, dt, p, span, label, h1, h2, h3, h4, h5, h6, small, strong, em, b, figcaption, blockquote, summary, legend, time, input, select, textarea, button):not(:is(span, div, b, em, small):empty, [class*=dot], [class*=swatch], [data-wf-keep], [data-wf-keep] *, [data-wf-keep-color], [data-wf-keep-color] *, .wf-root, .wf-root *, .wf-toggle, .wf-toggle *)) {
  background-color: transparent !important; background-image: none !important; color: var(--wf-d-ink) !important; border-color: var(--wf-d-line) !important;
}
html.wf-dark-generic[data-wf-theme=dark]:not([data-rd-contrast]) :where(body :is(header, footer, [class*=card], dialog, details, input, select, textarea, button, table, aside):not([data-wf-keep], [data-wf-keep] *, [data-wf-keep-color], [data-wf-keep-color] *, .wf-root *, .wf-toggle)) { background-color: var(--wf-d-card) !important; }
html.wf-dark-generic[data-wf-theme=dark]:not([data-rd-contrast]) :where(body a:not([data-wf-keep] *, [data-wf-keep-color], [data-wf-keep-color] *, .wf-root *)) { color: var(--wf-d-link) !important; }