﻿@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700;900&display=swap');

/* ================================================================
   環境教育活動通（EEduTong）獨立前台樣式
   規範：WCAG 2.1 AA
     - 全站 class 以 eedutong- 開頭 scope
     - 內文對白底最低對比 4.5:1（大字 3:1）
     - :focus-visible 提供清晰輪廓
   ================================================================ */

/* Reset / Base（限縮於 .eedutong- 類別內，避免污染 Layout 外元素） */
.eedutong-container, .eedutong-container *,
.eedutong-top-nav, .eedutong-top-nav *,
.eedutong-intro, .eedutong-intro *,
.eedutong-section, .eedutong-section *,
.eedutong-site-footer, .eedutong-site-footer *,
.eedutong-redirect-modal-overlay, .eedutong-redirect-modal-overlay *,
.eedutong-sitemap-page, .eedutong-sitemap-page * {
    box-sizing: border-box;
}

body {
    font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Arial, sans-serif;
    background: linear-gradient(180deg, var(--eedutong-mint-1) 0%, var(--eedutong-mint-2) 42%, #ffffff 70%);
    color: var(--eedutong-ink);
    line-height: 1.6;
    margin: 0;
}

img { max-width: 100%; display: block; }

.eedutong-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;
}

/* :::（accesskey）導盲磚 — 參考主站 `.accesskey-link` pattern：
   1. position: absolute 定位在對應區塊（top-nav / main / footer）左上角
   2. 預設用 1px 微縮 + overflow:hidden 徹底藏起來（避免頁面初載時被看見）
   3. :focus / .is-accesskey-active 時解除微縮 + translateY 滑入
   如此 Alt+U 導盲磚在頁首、Alt+C 在內容區頂端、Alt+B 在頁尾。
   skip-link 亦採相同 pattern（透過 Tab 觸發 :focus）。 */
.eedutong-skip-link,
.eedutong-accesskey-link {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 5000;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    color: var(--eedutong-green-dark);
    background: #ffffff;
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    transform: translateY(-200%);
    transition: transform 0.2s ease;
}
.eedutong-skip-link:focus,
.eedutong-skip-link:focus-visible,
.eedutong-accesskey-link:focus,
.eedutong-accesskey-link:focus-visible,
.eedutong-accesskey-link.is-accesskey-active {
    width: auto;
    height: auto;
    padding: 0.5rem 1rem;
    border: 2px solid var(--eedutong-green-dark);
    border-radius: 0.5rem;
    overflow: visible;
    box-shadow: 0 4px 12px rgba(23, 61, 39, 0.25);
    transform: translateY(0);
    outline: none;
}
@media (prefers-reduced-motion: reduce) {
    .eedutong-skip-link,
    .eedutong-accesskey-link { transition: none; }
}

/* 每個區塊必須是 positioned ancestor，讓內部 accesskey-link 的 absolute 定位相對於自己
   （.eedutong-top-nav 已為 position: sticky 天生 containing block；main 與 footer 需明確補 relative） */
main#main-content,
.eedutong-site-footer { position: relative; }

/* Focus 統一 outline（WCAG 2.4.7 / 2.4.11） */
.eedutong-container :focus-visible,
.eedutong-top-nav :focus-visible,
.eedutong-intro :focus-visible,
.eedutong-section :focus-visible,
.eedutong-site-footer :focus-visible,
.eedutong-redirect-modal-box :focus-visible,
.eedutong-sitemap-page :focus-visible {
    outline: 3px solid var(--eedutong-green-dark);
    outline-offset: 3px;
}

/* CSS Variables — 色票已計算對比度以符合 WCAG 2.1 AA */
:root {
    --eedutong-mint-1: #e8f5ea;
    --eedutong-mint-2: #f4faf4;
    --eedutong-green: #2e7d52;        /* icon 裝飾用；文字改用 green-dark */
    --eedutong-green-dark: #1f5c3a;   /* 白底對比 6.9:1 ✓ */
    --eedutong-green-light: #7fa586;  /* 大字/按鈕背景 */
    --eedutong-accent: #d99515;       /* 3:1 大字 hover 用 */
    --eedutong-ink: #173d27;          /* 白底對比 12:1+ ✓ */
    --eedutong-muted: #556357;        /* 白底對比 5.6:1 ✓ */
    --eedutong-card: #ffffff;
    --eedutong-border: #e6f0e8;
    --eedutong-error: #c0392b;
    --eedutong-radius: 1.4rem;
    --eedutong-shadow-soft: 0 0.8125rem 2.375rem rgba(23,61,39,0.08);
    --eedutong-shadow-card: 0 0.5rem 1.4375rem rgba(23,61,39,0.07);
    --eedutong-shadow-hover: 0 1.125rem 2.375rem rgba(23,61,39,0.14);
    --eedutong-footer-teal: #0b6b5e;  /* 白字對比 5.72:1 ✓ */
    --eedutong-container-max: 1440px;
    --eedutong-page-gutter: clamp(1.25rem, 3vw, 2rem);
}

/* Layout */
.eedutong-container {
    width: min(100%, var(--eedutong-container-max));
    margin: 0 auto;
    padding: 0 var(--eedutong-page-gutter);
}

/* ===== 頁首 ===== */
.eedutong-top-nav {
    position: sticky; top: 0; z-index: 300;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--eedutong-border);
}

/* Accesskey (Alt+U/C/B) 跳轉時，避開 sticky top-nav 遮擋 */
#main-content, #eedutong-footer, #eedutong-top-nav { scroll-margin-top: 5rem; }
@media (max-width: 768px) {
    #main-content, #eedutong-footer, #eedutong-top-nav { scroll-margin-top: 4.5rem; }
}
.eedutong-top-nav .eedutong-container {
    display: flex; align-items: center; justify-content: space-between;
    height: 5rem; gap: 1.5rem;
}
.eedutong-site-title { line-height: 0; margin: 0; display: inline-flex; align-items: center; gap: 0.75rem; }
.eedutong-brand { display: inline-flex; align-items: center; }
.eedutong-brand-logo { width: auto; height: 3.75rem; max-width: 100%; object-fit: contain; }
.eedutong-test-badge {
    display: inline-flex; align-items: center; padding: 0.25rem 0.625rem;
    background: #fdecea; color: #a02318; border: 1px solid #c0392b;
    border-radius: 0.375rem; font-size: 0.875rem; font-weight: 800; line-height: 1;
}
.eedutong-nav-right { display: flex; align-items: center; gap: 1.5rem; }
.eedutong-nav-link {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 1.125rem; font-weight: 700; color: var(--eedutong-ink);
    text-decoration: none; padding: 0.375rem 0.5rem; border-radius: 0.5rem;
    min-height: 2.75rem;
}
.eedutong-nav-link:hover, .eedutong-nav-link:focus-visible { color: var(--eedutong-green-dark); background: #eef7f0; }

/* ===== 首頁 Intro ===== */
.eedutong-intro { padding: 3rem 0 0; }
.eedutong-intro h2 { font-size: 2.5rem; font-weight: 900; color: var(--eedutong-ink); margin: 0 0 0.75rem; }
.eedutong-intro p { font-size: 1.125rem; color: var(--eedutong-muted); margin: 0 0 0.375rem; }
.eedutong-intro-leaf { color: var(--eedutong-green-dark); margin-right: 0.25rem; }

/* ===== Filter Bar ===== */
.eedutong-filter-bar {
    background: linear-gradient(135deg,#dbeee1,#eef7f0);
    border: 1px solid #cfe6d6;
    border-radius: 1.875rem;
    padding: 0.625rem 0.9375rem;
    /* 日期欄改用 auto 讓寬度由內容（起 + 完整 yyyy/mm/dd 兩個 date input + ~ + 訖 + 圖示）決定，避免被截斷 */
    display: grid; grid-template-columns: minmax(9rem, 0.8fr) auto minmax(14rem, 2fr) auto;
    align-items: stretch; gap: 0;
    box-shadow: var(--eedutong-shadow-soft);
    margin: 2.1875rem 0 3.125rem;
    position: relative;
}
.eedutong-filter-seg {
    display: flex; flex-direction: column; justify-content: center; gap: 0.25rem;
    padding: 0.75rem 1.25rem; min-width: 0;
    border-right: 1.5px solid rgba(23,61,39,0.14);
}
.eedutong-filter-seg > label,
.eedutong-filter-seg .eedutong-filter-label {
    font-size: 1.125rem; font-weight: 800; color: var(--eedutong-muted);
    letter-spacing: 0.3px;
}
.eedutong-filter-seg .eedutong-date-row { display: flex; align-items: center; gap: 0.5rem; }
.eedutong-filter-seg .eedutong-date-row input[type=date] {
    /* 寬度需容納 yyyy/mm/dd 完整 10 字元 + 行事曆圖示 + 內距；用 min-width + flex-shrink:0 確保 flex 容器無法把它壓縮 */
    width: 11.5rem; min-width: 11.5rem; flex-shrink: 0;
    border: 1px solid transparent; background: transparent;
    font-size: 1.25rem; font-weight: 700; color: var(--eedutong-ink); cursor: pointer;
    padding: 0.375rem 0.5rem; border-radius: 0.5rem; min-height: 2rem;
}
.eedutong-filter-seg .eedutong-date-row input[type=date]:focus-visible {
    border-color: var(--eedutong-green-dark); background: #fff;
}
.eedutong-filter-seg .eedutong-date-row i { color: var(--eedutong-green); font-size: 0.9375rem; }
.eedutong-filter-seg .eedutong-date-row .eedutong-date-sep { color: var(--eedutong-muted); font-size: 1.25rem; }
.eedutong-filter-seg .eedutong-date-row .eedutong-date-tag { color: var(--eedutong-green-dark); font-size: 1.25rem; font-weight: 800; white-space: nowrap; }
.eedutong-filter-seg.eedutong-keyword-seg { min-width: 0; border-right: none; justify-content: center; }
.eedutong-filter-seg.eedutong-keyword-seg .eedutong-kw-row {
    display: flex; align-items: center; gap: 0.625rem; min-width: 0;
    background: #fff; border: 1.5px solid var(--eedutong-border); border-radius: 0.875rem;
    padding: 0 1rem;
}
.eedutong-filter-seg.eedutong-keyword-seg .eedutong-kw-row:focus-within {
    border-color: var(--eedutong-green-dark);
}
.eedutong-filter-seg.eedutong-keyword-seg .eedutong-kw-row i { color: var(--eedutong-green-dark); }
.eedutong-filter-seg.eedutong-keyword-seg input[type=text] {
    flex: 1; min-width: 0; border: none; background: transparent;
    font-size: 1.125rem; height: 2.9375rem; color: var(--eedutong-ink);
}
.eedutong-filter-seg.eedutong-keyword-seg input[type=text]:focus { outline: none; }

.eedutong-filter-actions-seg {
    display: flex; flex-direction: column; justify-content: center; gap: 0.25rem;
    padding: 0.75rem 0.5rem 0.75rem 1.25rem; min-width: 0;
}
/* 隱藏 spacer 沿用 .eedutong-filter-label 的 font-size/line-height，使高度與其他 seg 的 label 一致 */
.eedutong-filter-label--spacer { visibility: hidden; }
.eedutong-actions-row {
    display: flex; align-items: center; gap: 0.75rem;
}
.eedutong-btn-query {
    background: var(--eedutong-green-dark); color: #fff; border: none; border-radius: 0.875rem;
    padding: 0.875rem 1.875rem; font-weight: 800; font-size: 1.125rem;
    cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem;
    min-height: 2.75rem; white-space: nowrap; text-decoration: none;
    transition: background .2s, color .2s;
}
.eedutong-btn-query:hover, .eedutong-btn-query:focus-visible { background: #143f27; }
.eedutong-btn-reset {
    background: #fff; color: var(--eedutong-ink); border: 1.5px solid var(--eedutong-border);
    border-radius: 0.875rem; padding: 0.875rem 1.625rem;
    font-weight: 800; font-size: 1.125rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.5rem;
    min-height: 2.75rem; white-space: nowrap; text-decoration: none;
    transition: all .2s;
}
.eedutong-btn-reset:hover, .eedutong-btn-reset:focus-visible {
    background: #f3f8f4; border-color: var(--eedutong-green-dark); color: var(--eedutong-green-dark);
}

/* ===== 縣市複選下拉 ===== */
.eedutong-location-multiselect { position: relative; }
.eedutong-multiselect-trigger {
    display: inline-flex; align-items: center; gap: 0.625rem;
    border: 1px solid transparent; background: transparent; cursor: pointer;
    font-size: 1.125rem; font-weight: 800; color: var(--eedutong-ink);
    padding: 0.375rem 0.5rem; border-radius: 0.5rem;
    min-height: 2rem;
}
.eedutong-multiselect-trigger:focus-visible { border-color: var(--eedutong-green-dark); }
.eedutong-multiselect-trigger i { font-size: 0.8125rem; color: var(--eedutong-green-dark); transition: transform .2s; }
.eedutong-multiselect-trigger.is-open i { transform: rotate(180deg); }
.eedutong-multiselect-panel {
    display: none; position: absolute; top: 100%; left: 0; margin-top: 0.75rem;
    background: #fff; border: 1px solid var(--eedutong-border); border-radius: 1.125rem;
    box-shadow: var(--eedutong-shadow-hover);
    padding: 1.125rem; width: 42.5rem; max-width: 90vw; z-index: 400;
}
.eedutong-multiselect-panel.is-open { display: block; }
.eedutong-multiselect-panel-actions {
    display: flex; gap: 0.625rem; margin-bottom: 0.875rem;
    padding-bottom: 0.875rem; border-bottom: 1px solid var(--eedutong-border);
}
.eedutong-multiselect-panel-actions button {
    background: #eef7f0; border: 1px solid transparent; border-radius: 0.5625rem;
    padding: 0.5rem 1rem; font-size: 1rem; font-weight: 700;
    color: var(--eedutong-green-dark); cursor: pointer; min-height: 2rem; transition: all .2s;
}
.eedutong-multiselect-panel-actions button:hover,
.eedutong-multiselect-panel-actions button:focus-visible {
    background: var(--eedutong-green-dark); color: #fff;
}
.eedutong-multiselect-options {
    display: grid; grid-template-columns: repeat(4,1fr); gap: 0.625rem 1rem;
}
.eedutong-ms-option {
    display: flex; align-items: center; gap: 0.5625rem;
    font-size: 1rem; color: var(--eedutong-ink); cursor: pointer;
    padding: 0.375rem 0.25rem; min-height: 1.75rem;
}
.eedutong-ms-option input {
    accent-color: var(--eedutong-green-dark);
    width: 1.125rem; height: 1.125rem; flex-shrink: 0;
    margin: 0;
}

/* ===== Section 通用 ===== */
.eedutong-section { padding: 0.625rem 0 3.625rem; }
.eedutong-section-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.5625rem; flex-wrap: wrap; gap: 0.9375rem;
}
.eedutong-section-head h2 { font-size: 1.625rem; font-weight: 900; color: var(--eedutong-ink); margin: 0; }
.eedutong-result-meta { font-size: 1.0625rem; color: var(--eedutong-muted); margin-bottom: 1.25rem; }
.eedutong-result-meta strong { color: var(--eedutong-green-dark); }

/* ===== 活動卡片 ===== */
.eedutong-activity-grid { display: grid; gap: 1.625rem; align-items: start; }
.eedutong-grid-3 { grid-template-columns: repeat(3,1fr); }
.eedutong-activity-card {
    display: block; min-width: 0;
    background: var(--eedutong-card); border-radius: var(--eedutong-radius); overflow: hidden;
    border: 1px solid var(--eedutong-border);
    box-shadow: var(--eedutong-shadow-card);
    transition: box-shadow .2s, transform .2s;
}
.eedutong-activity-card:hover,
.eedutong-activity-card:focus-within {
    box-shadow: var(--eedutong-shadow-hover); transform: translateY(-4px);
}
.eedutong-act-thumb {
    height: 10rem; position: relative;
    display: flex; align-items: flex-start; padding: 0.875rem; overflow: hidden;
    background: var(--eedutong-green-light);
}
.eedutong-act-thumb::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10,30,18,0) 45%, rgba(10,30,18,0.45) 100%);
    pointer-events: none; z-index: 1;
}
.eedutong-act-thumb-image {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}
.eedutong-act-tag {
    position: relative; z-index: 2;
    background: var(--eedutong-green-dark); color: #fff;
    font-size: 1.0625rem; font-weight: 900; padding: 0.5rem 1rem;
    border-radius: 0.625rem; line-height: 1.4;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.92), 0 6px 16px rgba(0,0,0,0.4);
    letter-spacing: 0.3px;
}
.eedutong-act-tag--local {
    background: #fff; color: var(--eedutong-green-dark);
    border: 2px solid var(--eedutong-green-dark);
    box-shadow: 0 6px 16px rgba(23,61,39,0.22);
}
.eedutong-act-body { padding: 1.125rem 1.25rem 1.25rem; }
.eedutong-act-title {
    font-size: 1.5rem; font-weight: 800; color: var(--eedutong-ink);
    margin: 0 0 0.625rem; line-height: 1.45;
    overflow-wrap: anywhere; min-height: 3rem;
}
.eedutong-act-meta {
    font-size: 1.25rem; color: var(--eedutong-muted);
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 0.375rem; margin-bottom: 0.75rem;
}
.eedutong-act-meta span { display: flex; align-items: center; gap: 0.4375rem; }
.eedutong-act-foot { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.eedutong-act-link {
    border: 1px solid transparent; background: transparent; padding: 0.375rem 0.5rem;
    cursor: pointer; border-radius: 0.5rem;
    font-size: 1.25rem; font-weight: 700; color: var(--eedutong-green-dark);
    display: inline-flex; align-items: center; gap: 0.375rem;
    min-height: 2rem;
}
.eedutong-act-link:hover { background: #eef7f0; }
.eedutong-expand-ic { transition: transform .25s ease; font-size: 0.8125rem; }
.eedutong-activity-card.is-expanded .eedutong-expand-ic { transform: rotate(180deg); }

.eedutong-card-detail {
    max-height: 0; opacity: 0; visibility: hidden; overflow: hidden;
    border-top: 1px dashed transparent;
    transition: max-height .35s ease, opacity .3s ease, padding .35s ease, border-color .3s ease, visibility 0s linear .35s;
    padding: 0 1.25rem;
}
.eedutong-activity-card.is-expanded .eedutong-card-detail {
    max-height: 187.5rem; opacity: 1; visibility: visible;
    padding: 1rem 1.25rem 1.25rem;
    border-top-color: var(--eedutong-border);
    transition: max-height .35s ease, opacity .3s ease, padding .35s ease, border-color .3s ease, visibility 0s;
}
.eedutong-card-detail-desc {
    font-size: 1.25rem; color: var(--eedutong-ink); line-height: 1.8; margin: 0 0 0.875rem;
}
.eedutong-register-hint {
    display: inline-flex; align-items: center; gap: 0.625rem;
    background: var(--eedutong-green-dark); color: #fff; border: none; cursor: pointer;
    padding: 0.8125rem 1.625rem; border-radius: 0.75rem;
    font-weight: 800; font-size: 1.0625rem; min-height: 2.75rem;
    box-shadow: 0 6px 16px rgba(46,125,82,0.25);
    transition: background .2s;
}
.eedutong-register-hint:hover, .eedutong-register-hint:focus-visible { background: #143f27; }
.eedutong-no-results {
    color: var(--eedutong-ink); font-size: 1.125rem; padding: 2.375rem 0; grid-column: 1/-1; text-align: center;
}

/* ===== 分頁 ===== */
.eedutong-pagination-bar {
    display: flex; align-items: center; justify-content: center; gap: 0.625rem; flex-wrap: wrap;
    padding: 2.1875rem 0 3.125rem;
}
.eedutong-pg-btn {
    min-width: 5.9375rem; height: 2.8125rem; padding: 0 1.125rem;
    border: 1px solid var(--eedutong-border); border-radius: 0.625rem;
    background: #fff; color: var(--eedutong-ink);
    font-size: 1.0625rem; font-weight: 700; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none; transition: all .2s;
}
.eedutong-pg-btn:hover:not(.is-disabled), .eedutong-pg-btn:focus-visible:not(.is-disabled) {
    background: #eef7f0; border-color: var(--eedutong-green-dark); color: var(--eedutong-green-dark);
}
.eedutong-pg-btn.is-disabled { opacity: 0.5; pointer-events: none; }
.eedutong-pg-info {
    font-size: 1.0625rem; color: var(--eedutong-muted); padding: 0 0.625rem;
    display: inline-flex; align-items: center; gap: 0.25rem;
}
.eedutong-pg-jump-input {
    width: 3.75rem; height: 2.6875rem; text-align: center;
    border: 1px solid var(--eedutong-border); border-radius: 0.625rem; font-size: 1.0625rem;
    color: var(--eedutong-ink);
}
.eedutong-pg-jump-input:focus-visible { border-color: var(--eedutong-green-dark); }
.eedutong-pg-jump-btn {
    padding: 0 1.25rem; height: 2.6875rem; min-height: 2.75rem;
    background: #fff; border: 1px solid var(--eedutong-green-dark); border-radius: 0.625rem;
    font-size: 1.0625rem; font-weight: 800; color: var(--eedutong-green-dark); cursor: pointer;
}
.eedutong-pg-jump-btn:hover, .eedutong-pg-jump-btn:focus-visible {
    background: var(--eedutong-green-dark); color: #fff;
}
.eedutong-pg-error { flex-basis: 100%; text-align: center; font-size: 1rem; color: var(--eedutong-error); font-weight: 700; }

/* ===== 政府網站檢核 Footer ===== */
.eedutong-gov-footer { background: var(--eedutong-footer-teal); color: #ffffff; padding: 3.4375rem 0 2.8125rem; }
.eedutong-gov-footer-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2.8125rem; }
.eedutong-gov-footer-col { min-width: 0; overflow-wrap: anywhere; }
.eedutong-gov-footer-col h2 { font-size: 1.5rem; font-weight: 900; color: #ffffff; margin: 0 0 1.25rem; }
.eedutong-gov-footer-col p { font-size: 1rem; color: #ffffff; margin: 0 0 0.75rem; line-height: 1.6; }
.eedutong-gov-footer-col a {
    display: block; font-size: 1rem; color: #ffffff; margin-bottom: 0.75rem;
    text-decoration: underline; text-underline-offset: 3px;
    transition: color .2s;
}
.eedutong-gov-footer-col a:hover, .eedutong-gov-footer-col a:focus-visible { color: #fff824; }
.eedutong-gov-footer-col .eedutong-inline-link { display: inline; color: #fff824; font-weight: 800; }

.eedutong-copyright-bar {
    background: var(--eedutong-green-dark);
    color: #ffffff;
    padding: 1.25rem 0; font-size: 0.9375rem; text-align: center;
}

/* ===== 引導提示視窗 ===== */
.eedutong-redirect-modal-overlay {
    display: none; position: fixed; inset: 0; z-index: 1000;
    background: rgba(23,61,39,0.55);
    align-items: center; justify-content: center;
    backdrop-filter: blur(3px);
    padding: 1.25rem;
}
.eedutong-redirect-modal-overlay.is-open { display: flex; }
body.eedutong-modal-open { overflow: hidden; }
.eedutong-redirect-modal-box {
    background: #fff; border-radius: var(--eedutong-radius);
    padding: 2.25rem 2.875rem 2rem; max-width: 36.25rem; width: 100%;
    max-height: 90vh; overflow-y: auto;
    display: flex; flex-direction: column; justify-content: center;
    text-align: center; box-shadow: var(--eedutong-shadow-hover);
    animation: eeduRedirectModalPop .22s ease;
}
@keyframes eeduRedirectModalPop {
    from { transform: scale(.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
.eedutong-redirect-modal-title {
    font-size: 1.625rem; font-weight: 900; color: var(--eedutong-green-dark);
    margin: 0 0 1rem;
}
.eedutong-redirect-modal-text {
    font-size: 1.0625rem; color: var(--eedutong-ink); line-height: 1.75;
    margin: 0 0 1.75rem;
}
.eedutong-redirect-modal-actions { display: flex; gap: 0.875rem; justify-content: center; flex-wrap: wrap; }
.eedutong-redirect-modal-actions button {
    border: none; border-radius: 0.875rem; padding: 0.8125rem 1.75rem;
    font-size: 1.0625rem; font-weight: 800; cursor: pointer; min-height: 2.75rem;
    transition: all .2s;
}
.eedutong-redirect-btn-primary { background: var(--eedutong-green-dark); color: #fff; }
.eedutong-redirect-btn-primary:hover, .eedutong-redirect-btn-primary:focus-visible { background: #143f27; }
.eedutong-redirect-btn-secondary {
    background: #f3f8f4; color: var(--eedutong-ink);
    border: 1.5px solid var(--eedutong-border);
}
.eedutong-redirect-btn-secondary:hover, .eedutong-redirect-btn-secondary:focus-visible {
    background: #e8f5ea; border-color: var(--eedutong-green-dark);
}

/* ===== 網站導覽（獨立頁面） ===== */
.eedutong-sitemap-page { padding: 3.125rem 0 4.375rem; min-height: 60vh; }
.eedutong-sitemap-breadcrumb {
    font-size: 0.9375rem; color: var(--eedutong-muted);
    margin-bottom: 1.375rem; display: flex; align-items: center; gap: 0.625rem;
}
.eedutong-sitemap-breadcrumb a { color: var(--eedutong-green-dark); font-weight: 700; text-decoration: underline; }
.eedutong-sitemap-breadcrumb a:hover { text-decoration: none; }
.eedutong-sitemap-breadcrumb i { font-size: 0.75rem; color: var(--eedutong-muted); }
.eedutong-sitemap-breadcrumb span { color: var(--eedutong-ink); font-weight: 700; }
.eedutong-sitemap-page-title {
    font-size: 2rem; font-weight: 900; color: var(--eedutong-ink);
    margin: 0 0 0.75rem; display: flex; align-items: center; gap: 0.875rem;
}
.eedutong-sitemap-page-title i { color: var(--eedutong-green-dark); }
.eedutong-sitemap-cols {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2.125rem;
    background: #fff; border: 1px solid var(--eedutong-border);
    border-radius: var(--eedutong-radius); box-shadow: var(--eedutong-shadow-card);
    padding: 2.25rem 2.5rem;
}
/* 單欄版（拿掉「網站資訊」後，只剩「網站首頁」一欄） */
.eedutong-sitemap-cols--single { grid-template-columns: minmax(0, 1fr); }

/* 無障礙快速鍵說明（Accesskey 說明區） */
.eedutong-sitemap-a11y-desc {
    background: #fff; border: 1px solid var(--eedutong-border);
    border-radius: var(--eedutong-radius); box-shadow: var(--eedutong-shadow-card);
    padding: 1.875rem 2.25rem;
    margin: 0 0 2rem;
    font-size: 1.0625rem; color: var(--eedutong-ink); line-height: 1.85;
}
.eedutong-sitemap-a11y-desc p { margin: 0 0 0.75rem; }
.eedutong-sitemap-a11y-desc ol,
.eedutong-sitemap-a11y-desc ul {
    margin: 0 0 1rem 1.75rem; padding: 0;
}
.eedutong-sitemap-a11y-desc li { margin-bottom: 0.375rem; }
.eedutong-sitemap-a11y-desc kbd {
    display: inline-block;
    font-family: "Consolas", "Menlo", monospace;
    font-size: 0.9375rem; font-weight: 700; line-height: 1;
    color: var(--eedutong-green-dark); background: #eef7f0;
    border: 1px solid var(--eedutong-green-dark);
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
    margin: 0 0.125rem;
    min-width: 1.5rem; text-align: center;
}
.eedutong-sitemap-col h3 {
    font-size: 1.125rem; font-weight: 800; color: var(--eedutong-ink);
    margin: 0 0 0.875rem; padding-bottom: 0.75rem; border-bottom: 1.5px solid var(--eedutong-border);
}
.eedutong-sitemap-col ul { list-style: none; padding: 0; margin: 0; }
.eedutong-sitemap-col li { margin-bottom: 0.125rem; }
.eedutong-sitemap-col a {
    display: flex; align-items: center; gap: 0.625rem;
    width: 100%; text-align: left; background: none; border: 1px solid transparent;
    font-size: 1rem; color: var(--eedutong-ink);
    padding: 0.6875rem 0.625rem; border-radius: 0.5625rem;
    text-decoration: none; line-height: 1.5; min-height: 2.75rem;
    transition: all .2s;
}
.eedutong-sitemap-col a:hover, .eedutong-sitemap-col a:focus-visible {
    background: #eef7f0; color: var(--eedutong-green-dark);
}
.eedutong-sitemap-col i { color: var(--eedutong-green-dark); width: 1rem; flex-shrink: 0; }

/* ===== Responsive ===== */
@media (min-width: 1536px) {
    .eedutong-activity-grid { gap: 1.75rem; }
    .eedutong-act-thumb { height: 11rem; }
}

@media (max-width: 1200px) {
    :root { --eedutong-page-gutter: 1.75rem; }
    .eedutong-intro { padding-top: 2.75rem; }
    .eedutong-intro h2 { font-size: 2.25rem; }

    .eedutong-filter-bar { grid-template-columns: repeat(6, minmax(0,1fr)); padding: 0.75rem; }
    .eedutong-filter-seg { padding: 0.75rem 1.125rem; border-right: 1px solid rgba(23,61,39,0.12); border-bottom: 1px solid rgba(23,61,39,0.12); }
    .eedutong-filter-seg:nth-child(2) { grid-column: span 2; }
    .eedutong-filter-seg:nth-child(3) { grid-column: span 3; border-right: none; }
    .eedutong-filter-actions-seg { grid-column: span 6; padding: 0.875rem 1.125rem; }
    .eedutong-filter-actions-seg .eedutong-actions-row { justify-content: flex-end; }
    .eedutong-filter-actions-seg > .eedutong-filter-label--spacer { display: none; }
    .eedutong-activity-grid { gap: 1.25rem; }
    .eedutong-act-thumb { height: 9.375rem; }
    .eedutong-gov-footer-grid { gap: 1.875rem; }
}

@media (max-width: 992px) {
    :root { --eedutong-page-gutter: 1.5rem; }
    .eedutong-intro h2 { font-size: 1.875rem; }
    .eedutong-intro p { font-size: 1rem; }
    .eedutong-filter-bar { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .eedutong-filter-seg:nth-child(2) { grid-column: span 2; }
    .eedutong-filter-seg:nth-child(3) { grid-column: 1/-1; }
    .eedutong-filter-actions-seg { grid-column: 1/-1; }
    .eedutong-filter-actions-seg .eedutong-actions-row { justify-content: flex-end; }
    .eedutong-grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .eedutong-gov-footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .eedutong-sitemap-cols { gap: 1.5rem; padding: 1.875rem; }
}

@media (max-width: 768px) {
    :root { --eedutong-page-gutter: 1.25rem; }
    .eedutong-top-nav .eedutong-container { height: 4.5rem; gap: 1.125rem; }
    .eedutong-brand-logo { height: 3rem; }
    .eedutong-nav-link { font-size: 1rem; gap: 0.375rem; }

    .eedutong-intro { padding-top: 2rem; }
    .eedutong-intro h2 { font-size: 1.5rem; line-height: 1.3; margin-bottom: 0.625rem; }
    .eedutong-intro p { font-size: 1rem; }

    .eedutong-filter-bar {
        grid-template-columns: minmax(0,1fr);
        border-radius: 1.25rem; margin: 1.75rem 0 2.25rem; padding: 0.625rem;
    }
    .eedutong-filter-seg {
        grid-column: auto; width: 100%; padding: 0.875rem 1rem;
        border-right: none; border-bottom: 1px solid rgba(23,61,39,0.12);
    }
    .eedutong-filter-seg .eedutong-date-row {
        display: grid; grid-template-columns: auto minmax(0,1fr); gap: 0.5rem 0.625rem;
    }
    .eedutong-filter-seg .eedutong-date-row i,
    .eedutong-filter-seg .eedutong-date-row .eedutong-date-sep { display: none; }
    .eedutong-filter-seg .eedutong-date-row input[type=date] {
        width: 100%; height: 2.75rem; padding: 0 0.625rem;
        background: #fff; border: 1.5px solid var(--eedutong-border); border-radius: 0.625rem;
    }
    .eedutong-filter-seg.eedutong-keyword-seg .eedutong-kw-row { padding: 0 0.75rem; }
    .eedutong-filter-actions-seg {
        grid-column: auto; padding: 0.875rem 0.5rem 0.25rem;
    }
    .eedutong-filter-actions-seg > .eedutong-filter-label--spacer { display: none; }
    .eedutong-filter-actions-seg .eedutong-actions-row {
        display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.625rem;
    }
    .eedutong-btn-query, .eedutong-btn-reset {
        justify-content: center; min-height: 3rem; padding: 0.75rem 1.125rem;
    }
    .eedutong-multiselect-panel { width: 100%; left: 0; right: 0; }

    .eedutong-section { padding-bottom: 2.5rem; }
    .eedutong-section-head { margin-bottom: 1.125rem; }
    .eedutong-grid-3 { grid-template-columns: minmax(0,1fr); }
    .eedutong-activity-grid { gap: 1.125rem; }
    .eedutong-act-thumb { height: 9.375rem; }
    .eedutong-act-title { min-height: 0; }

    .eedutong-pagination-bar {
        display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 0.625rem; padding: 1.75rem 0 2.375rem;
    }
    .eedutong-pg-btn { width: 100%; min-width: 0; padding: 0 0.75rem; }
    .eedutong-pg-info { grid-column: 1/-1; text-align: center; padding: 0.25rem 0; justify-content: center; flex-wrap: wrap; }
    .eedutong-pg-jump-btn { grid-column: 1/-1; width: 100%; min-height: 2.8125rem; }
    .eedutong-pg-error { grid-column: 1/-1; }

    .eedutong-gov-footer { padding: 2.625rem 0 2.125rem; }
    .eedutong-gov-footer-grid { grid-template-columns: minmax(0,1fr); gap: 1.75rem; }
    .eedutong-gov-footer-col h2 { margin-bottom: 0.875rem; }

    .eedutong-sitemap-page { padding: 2.25rem 0 3.125rem; }
    .eedutong-sitemap-cols { grid-template-columns: minmax(0,1fr); padding: 1.625rem 1.375rem; }
    .eedutong-sitemap-a11y-desc { padding: 1.375rem 1.375rem; font-size: 1rem; }
    .eedutong-sitemap-a11y-desc ol,
    .eedutong-sitemap-a11y-desc ul { margin-left: 1.375rem; }
}

@media (max-width: 414px) {
    :root { --eedutong-page-gutter: 1rem; }
    .eedutong-top-nav .eedutong-container { gap: 0.75rem; }
    .eedutong-brand-logo { height: 2.625rem; }
    .eedutong-nav-link { font-size: 0.9375rem; }
    .eedutong-intro { padding-top: 1.625rem; }
    .eedutong-intro h2 { font-size: 1.375rem; }
    .eedutong-intro p { font-size: 0.9375rem; line-height: 1.75; }

    .eedutong-filter-bar { margin-top: 1.375rem; padding: 0.5rem; border-radius: 1.125rem; }
    .eedutong-filter-seg { padding: 0.8125rem 0.75rem; }
    .eedutong-multiselect-options { grid-template-columns: minmax(0,1fr); }
    .eedutong-multiselect-panel { padding: 0.875rem; }

    .eedutong-activity-card { border-radius: 1.125rem; }
    .eedutong-act-thumb { height: 8.75rem; padding: 0.75rem; }
    .eedutong-act-tag { font-size: 1rem; padding: 0.4375rem 0.75rem; }
    .eedutong-act-body { padding: 1rem; }
    .eedutong-act-title { font-size: 1.5rem; }
    .eedutong-act-meta { font-size: 1.25rem; gap: 0.625rem; }
    .eedutong-act-link { font-size: 1.25rem; }
    .eedutong-card-detail-desc { font-size: 1.25rem; }

    .eedutong-redirect-modal-overlay { padding: 0.875rem; }
    .eedutong-redirect-modal-box { padding: 1.875rem 1.25rem 1.5rem; }
    .eedutong-redirect-modal-actions { display: grid; grid-template-columns: minmax(0,1fr); }
    .eedutong-redirect-modal-actions button { width: 100%; min-height: 3rem; }

    .eedutong-sitemap-page-title { font-size: 1.6875rem; }
    .eedutong-sitemap-cols { padding: 1.375rem 1rem; }
    .eedutong-copyright-bar { padding: 1.125rem 1rem; font-size: 0.875rem; }
}

@media (prefers-reduced-motion: reduce) {
    .eedutong-activity-card, .eedutong-expand-ic, .eedutong-card-detail,
    .eedutong-multiselect-trigger i, .eedutong-redirect-modal-box {
        transition: none !important;
        animation-duration: 0.01ms !important;
    }
}
