/* wen8604-friendly v1｜樣式。色票依 wen8604 設計規範 v1.0；各站可覆寫 --wf-* 變數配合站色。 */
: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;
}
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; }

/* ---------- 按鈕與面板 ---------- */
.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 + env(safe-area-inset-bottom, 0px)); z-index: 2147483000; }
.wf-panel { position: fixed; right: 16px; bottom: calc(76px + 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); 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); }
.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); }
}
@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 的區塊；頁首不放大） ---------- */
[data-rd-size="1"] :is(main, footer, [data-wf-zoom]):not(.wf-root *), [data-rd-size="1"].wf-nomain body > :not(.wf-root):not(header):not([data-wf-keep]) { zoom: 1.12; }
[data-rd-size="2"] :is(main, footer, [data-wf-zoom]):not(.wf-root *), [data-rd-size="2"].wf-nomain body > :not(.wf-root):not(header):not([data-wf-keep]) { zoom: 1.25; }
@media (max-width: 600px) {
  [data-rd-size="1"] :is(main, footer, [data-wf-zoom]):not(.wf-root *), [data-rd-size="1"].wf-nomain body > :not(.wf-root):not(header):not([data-wf-keep]) { zoom: 1.08; }
  [data-rd-size="2"] :is(main, footer, [data-wf-zoom]):not(.wf-root *), [data-rd-size="2"].wf-nomain body > :not(.wf-root):not(header):not([data-wf-keep]) { zoom: 1.18; }
}
:is(main, footer, [data-wf-zoom]) :is(main, footer, [data-wf-zoom]) { zoom: 1 !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） ---------- */
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] 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, i, figcaption, blockquote, summary, legend, time, output, input, select, textarea, button, mark, code):not([data-wf-keep]):not([data-wf-keep] *):not(.wf-root):not(.wf-root *):not(.wf-toggle):not(.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] body a:not([data-wf-keep] *):not(.wf-root *), html[data-rd-contrast] body a:not([data-wf-keep] *) * { color: var(--wf-hc-link) !important; }
html[data-rd-contrast] body :is(button, input, select, textarea, [role=button]):not([data-wf-keep] *):not(.wf-root *):not(.wf-toggle) { border: 2px solid var(--wf-hc-ink) !important; }
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" 時啟用；網站自己有深色樣式就不套） ---------- */
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]) 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([data-wf-keep]):not([data-wf-keep] *):not(.wf-root):not(.wf-root *):not(.wf-toggle):not(.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]) body :is(header, footer, [class*=card], dialog, details, input, select, textarea, button, table, aside):not([data-wf-keep]):not([data-wf-keep] *):not(.wf-root *):not(.wf-toggle) { background-color: var(--wf-d-card) !important; }
html.wf-dark-generic[data-wf-theme=dark]:not([data-rd-contrast]) body a:not([data-wf-keep] *):not(.wf-root *) { color: var(--wf-d-link) !important; }