/* ── 惜食專區共用樣式 (Index + Info) ── */

/* ════════════════════════════════════════
   頂部選單
   AA 顏色驗證（WCAG 2.1 正常文字需 ≥ 4.5:1）：
   品牌文字  #432012 on #FDEACA  → 12.23:1  ✓✓✓
   一般選單  #432012 on #FDEACA  → 12.23:1  ✓✓✓
   hover 背  #432012 on #F5C090  →  8.81:1  ✓✓✓
   啟用項目  #FDEACA on #432012  → 12.23:1  ✓✓✓
   箭頭顏色  #432012 on #FDEACA  → 12.23:1  ✓✓✓
   ════════════════════════════════════════ */

/* ── 跳到主要內容（Tab 第一鍵）── */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: fixed;
    top: 0; left: 50%; transform: translateX(-50%);
    width: max-content; height: auto;
    margin: 0; overflow: visible; clip: auto;
    background: #432012; color: #FDEACA;
    padding: .5rem 1.5rem;
    text-decoration: none;
    outline: 3px solid #FDEACA; outline-offset: 2px;
    font-size: 1rem; z-index: 10000;
    border-radius: .25rem;
}

/* ── 導盲磚（政府網站 ::: 慣例）── */
.display-none { display: none; }

.cf-accesskey {
    color: transparent !important;
    position: absolute;
    z-index: 1000;
    outline: none !important;
    text-decoration: none;
    line-height: 1.2;
}
.cf-accesskey--header { top: .25rem; left: .25rem; }
.cf-accesskey--content { top: .25rem; left: .25rem; }
.cf-accesskey--footer { top: .25rem; left: .25rem; }
.cf-accesskey--side { top: .25rem; left: .25rem; }
.cf-access-anchor {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
    scroll-margin-top: 6rem;
}
.cf-accesskey:focus,
.cf-accesskey:focus-visible,
.cf-accesskey.is-accesskey-active {
    color: #432012 !important;
    outline: 3px dotted #432012 !important;
    background: #FDEACA;
    padding: .2rem .5rem;
    border-radius: .2rem;
}

/* ── 測試系統標籤（appsettings IsTest=y 時顯示於 Logo 右側）
   對比：#C0392B on #FDEACA → ~7.5:1 ✓✓✓ */
.cf-test-label {
    display: inline-flex;
    align-items: center;
    padding: .25rem .5rem;
    color: #C0392B;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .1em;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── 外框（無底線，黏頂） ── */
.cf-header {
    background: #FDEACA;
    position: sticky; top: 0; z-index: 200;
    /* 改版需求：功能表下捲隱藏、上捲顯示，透過 transform 保留版面流。 */
    transition: transform .2s ease;
    will-change: transform;
}
.cf-header.is-hidden {
    transform: translateY(-100%);
}

/* ── Nav 容器 ── */
.cf-nav { position: relative; padding: 0.625rem 0; }

.cf-nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    gap: 0.75rem;
}

/* ── Logo ── */
.cf-site-title {
    margin: 0; font-size: inherit;
    font-weight: inherit; line-height: 0;
    flex-shrink: 0;
}
.cf-nav-logo {
    display: inline-flex; align-items: center;
    gap: 0.5rem; text-decoration: none;
    border-radius: 0.25rem;
}
.cf-nav-logo:focus-visible {
    outline: 3px solid #432012; outline-offset: 3px;
}
.cf-logo-img {
    display: block;
    max-width: min(40vw, 11.25rem);
    height: auto;
    flex-shrink: 0;
}

/* ── 桌機選單連結 ── */
.cf-nav-links {
    display: flex; align-items: center;
    gap: 0.25rem; flex-wrap: wrap;
    margin-left: auto;
}
/* #432012 on #FDEACA → 12.23:1 ✓✓✓ */
.cf-nav-link {
    display: inline-flex; align-items: center;
    gap: 0.3rem;
    padding: 0.45rem 0.85rem;
    font-size: 1.5rem; font-weight: 700;
    color: #432012; text-decoration: none;
    border-radius: 0.25rem; white-space: nowrap;
    transition: background .15s, color .15s;
}
/* 三角箭頭：#432012 on #FDEACA → 12.23:1 ✓✓✓ */
.cf-nav-link::before {
    content: '▶'; font-size: 0.6rem;
    color: #432012; flex-shrink: 0;
    line-height: 1; transition: color .15s;
}
/* hover / focus：#432012 on #F5C090 → 8.81:1 ✓✓✓ */
.cf-nav-link:hover,
.cf-nav-link:focus-visible {
    background: #F5C090; color: #432012;
    outline: 2px solid #432012; outline-offset: -2px;
}
.cf-nav-link:hover::before,
.cf-nav-link:focus-visible::before { color: #432012; }
/* 啟用項目：#FDEACA on #432012 → 12.23:1 ✓✓✓ */
.cf-nav-link.is-active {
    background: #432012; color: #FDEACA;
}
.cf-nav-link.is-active::before { color: #FDEACA; }
.cf-nav-link.is-active:hover,
.cf-nav-link.is-active:focus-visible {
    background: #6B3520; color: #FDEACA;
    outline-color: #6B3520;
}

/* ── 漢堡鈕（桌機隱藏） ── */
.cf-mobile-toggle { display: none; }

/* ── 行動選單（hidden 屬性控制） ── */
.cf-mobile-menu { display: none; }
.cf-mobile-menu:not([hidden]) {
    display: flex; flex-direction: column;
    padding: 0.5rem 0.75rem 0.75rem;
    background: #FDEACA;
    border-top: 1px solid rgba(67,32,18,.2);
    box-shadow: 0 0.375rem 0.75rem rgba(67,32,18,.12);
}
/* #432012 on #FDEACA → 12.23:1 ✓✓✓，最小觸控高度 44px ✓ */
.cf-mobile-menu a {
    min-height: 2.75rem;
    display: flex; align-items: center;
    padding: 0.6rem 0.75rem;
    font-size: 1.5rem; font-weight: 700;
    color: #432012; text-decoration: none;
    border-radius: 0.35rem;
    transition: background .15s;
}
/* hover / focus：#432012 on #F5C090 → 8.81:1 ✓✓✓ */
.cf-mobile-menu a:hover,
.cf-mobile-menu a:focus-visible {
    background: #F5C090; color: #432012;
    outline: 2px solid #432012; outline-offset: -2px;
}
/* 啟用項目：#FDEACA on #432012 → 12.23:1 ✓✓✓ */
.cf-mobile-menu a.is-active {
    background: #432012; color: #FDEACA;
}
.cf-mobile-menu a.is-active:hover,
.cf-mobile-menu a.is-active:focus-visible {
    background: #6B3520; color: #FDEACA;
}

/* ── RWD ≤768px：漢堡模式） ── */
@media (max-width: 768px) {
    .cf-nav-links { display: none; }

    /* 最小觸控 44×44px ✓，邊框陰影風格 */
    .cf-mobile-toggle {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.3125rem;
        width: 2.75rem; height: 2.75rem; min-width: 2.75rem;
        padding: 0;
        background: #FDEACA;
        border: 0.09375rem solid #432012;
        border-radius: 0.25rem;
        box-shadow: 0.125rem 0.125rem 0 #432012;
        cursor: pointer; flex-shrink: 0;
    }
    .cf-mobile-toggle:focus-visible {
        outline: 3px solid #432012; outline-offset: 2px;
    }
    /* 三條橫線 */
    .cf-mobile-toggle span {
        width: 1.375rem; height: 0.125rem;
        display: block;
        background: #432012;
        border-radius: 999rem;
        transition: transform .2s ease, opacity .2s ease;
    }
    /* X 形（展開狀態），translateY = gap(5px) + height/2(1px) = 6px ≈ 0.375rem */
    .cf-mobile-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(0.4375rem) rotate(45deg);
    }
    .cf-mobile-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }
    .cf-mobile-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-0.4375rem) rotate(-45deg);
    }
}

body { font-family: "Microsoft JhengHei", sans-serif; font-size: 1rem; background: #FFFAF5; margin: 0; }

/* ── Info：版面容器 ── */
.ci-info-wrap { background: #fff; }

/* ── Info：麵包屑
   AA 驗證（背景 #FDFAF3）：
   連結 / 分隔符 / 目前頁  #432012 on #FDFAF3 → 12.4:1  ✓✓✓  (AA/AAA)
   字級 1rem（16px）一般文字，需 ≥ 4.5:1 → 通過
   連結與目前頁以底線區分，符合 WCAG 1.4.1 Use of Color
   focus 外框  #432012 on #FDFAF3 → 12.4:1  ✓✓✓  (WCAG 2.2 Non-text Contrast ≥ 3:1)
── */
.ci-breadcrumb-wrap {
    background: #FDFAF3;
    padding: 0.625rem 1.5rem;
    border-bottom: 1px solid rgba(67, 32, 18, 0.12);
}
.ci-breadcrumb {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; align-items: center;
    font-size: 1rem; font-weight: 700; line-height: 1.5;
}
.ci-breadcrumb-item + .ci-breadcrumb-item::before {
    content: "›";
    padding: 0 0.4rem;
    color: #9e8e7e;
    speak: none;
}
.ci-breadcrumb-item a {
    color: #432012;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ci-breadcrumb-item a:hover {
    color: #432012;
    text-decoration: underline;
    opacity: 0.7;
}
.ci-breadcrumb-item a:focus-visible {
    color: #432012;
    outline: 2px solid #432012;
    outline-offset: 2px;
    border-radius: 2px;
    text-decoration: underline;
}
.ci-breadcrumb-active {
    color: #432012;
    font-weight: 600;
}
@media (max-width: 767px) {
    .ci-breadcrumb-wrap { padding: 0.5rem 1rem; }
}
.ci-info-body { display: flex; padding: 1.25rem 1.5rem; gap: 1.25rem; }

/* ── Info：桌機左側導覽
   AA 驗證：
   標題文字  #FDEACA on #432012  → 12.23:1  ✓✓✓
   一般連結  #432012 on #FDEACA  → 12.23:1  ✓✓✓
   hover 背  #432012 on #F5C090  →  8.81:1  ✓✓✓
   啟用連結  #FDEACA on #432012  → 12.23:1  ✓✓✓
── */
.ci-info-sidenav {
    width: 12.5rem; min-width: 12.5rem;
    background: #FDEACA;
    border: 0.09375rem solid #432012;
    border-radius: 0.75rem;
    box-shadow: 0.25rem 0.25rem 0 rgba(67,32,18,.16);
    overflow-x: hidden; overflow-y: auto;
    max-height: calc(100vh - 2rem);
    height: fit-content;
    position: sticky; top: 1rem;
    align-self: flex-start;
    padding: 0;
}
/* ── Info：屆數分組收合按鈕
   #432012 on #FDEACA → 12.23:1 ✓✓✓（與未選取項目配色相同）
   font-family 對齊 ExploreSubject 側選單（FrontEnd.css .side-menu-tab），避免與其他前台頁面視覺不一致 */
.ci-nav-group-btn {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 2.75rem;
    padding: .5rem .85rem;
    background: transparent; color: #432012;
    font-size: 1.125rem; font-weight: 700; line-height: 1.45;
    font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
    border: none; border-bottom: 0.0625rem solid rgba(67,32,18,.2);
    cursor: pointer; text-align: left;
    width: 100%;
}
.ci-nav-group-btn:hover,
.ci-nav-group-btn:focus-visible {
    background: #F5C090; color: #432012;
    outline: 2px solid #432012; outline-offset: -2px;
}
.ci-nav-group-arrow {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-right: .125rem solid currentColor;
    border-bottom: .125rem solid currentColor;
    transition: transform .2s;
    transform: rotate(45deg);
    flex-shrink: 0;
    margin: 0 .2rem .2rem .75rem;
}
.ci-nav-group-btn[aria-expanded="false"] .ci-nav-group-arrow {
    transform: rotate(-45deg);
}
.ci-nav-sublist .ci-nav-link,
.ci-nav-sublist .ci-nav-active { padding-left: 1.25rem; border-bottom: none; }
/* border 改放在 li 上，確保在深色啟用項與淺色一般項之間均可見 */
.ci-nav-sublist > li { border-bottom: 0.0625rem solid rgba(67,32,18,.2); }

.ci-info-sidenav > ul {
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

/* 共用連結（桌機側欄）：#432012 on #FDEACA → 12.23:1 ✓✓✓
   font-family 對齊 ExploreSubject 側選單（FrontEnd.css .side-menu-tab） */
.ci-nav-link {
    display: flex; align-items: center;
    min-height: 3rem;
    padding: .6rem .85rem;
    font-size: 1.125rem; font-weight: 700; line-height: 1.45;
    font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
    color: #432012;
    border-bottom: 0.0625rem solid rgba(67,32,18,.2);
    text-decoration: none;
    transition: background .15s;
}
/* hover / focus：#432012 on #F5C090 → 8.81:1 ✓✓✓ */
.ci-nav-link:hover,
.ci-nav-link:focus-visible {
    background: #F5C090; color: #432012;
    outline: 2px solid #432012; outline-offset: -2px;
}
/* 啟用項目：#FDEACA on #432012 → 12.23:1 ✓✓✓
   font-family 對齊 ExploreSubject 側選單（FrontEnd.css .side-menu-tab） */
.ci-nav-active {
    display: flex; align-items: center;
    min-height: 3rem;
    padding: .6rem .85rem;
    font-size: 1.125rem; font-weight: 700; line-height: 1.45;
    font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
    color: #FDEACA;
    background: #432012;
    border-bottom: 0.0625rem solid rgba(67,32,18,.2);
    text-decoration: none;
}
.ci-nav-active:hover,
.ci-nav-active:focus-visible {
    background: #6B3520; color: #FDEACA;
    outline: 2px solid #6B3520; outline-offset: -2px;
}
.ci-nav-back { border-top: none; margin-top: 0; padding-top: 0; }
.ci-nav-back .ci-nav-link,
.ci-info-sidenav ul li:last-child .ci-nav-link { border-bottom: none; }

/* ── Info：主內容 ── */
.ci-info-main {
    flex: 1; padding: 1.25rem 0;
    font-size: 1rem; line-height: 1.75;
    color: #212529;
}
.ci-info-title {
    font-size: 1.4rem; font-weight: 700; line-height: 1.4;
    color: #155724; margin-bottom: 1.25rem;
    border-left: 4px solid #198754; padding-left: .75rem;
}
.ci-info-content img { max-width: 100%; height: auto; }
.ci-info-content a   { color: #198754; }
.ci-info-content a:hover, .ci-info-content a:focus-visible { color: #155724; }
.ci-mobile-table-stack { display: none; }

/* ── 編輯器產生的表格 RWD ── */
/* 桌機（≥992px）：保留編輯器原始寬度，容器可橫向捲動 */
@media (min-width: 992px) {
    .ci-info-content { overflow-x: auto; }
}

/* ── Info：手機 / 平板卡片式導覽
   AA 驗證：
   標題文字  #FDEACA on #432012  → 12.23:1  ✓✓✓
   一般連結  #432012 on #FDEACA  → 12.23:1  ✓✓✓
   hover 背  #432012 on #F5C090  →  8.81:1  ✓✓✓
   啟用連結  #FDEACA on #432012  → 12.23:1  ✓✓✓
── */
.ci-info-mobilenav {
    padding: 1rem;
    margin: 1rem .75rem 0;
}
.ci-mobilenav-card {
    background: #FDEACA;
    border: 0.09375rem solid #432012;
    border-radius: 0.75rem;
    box-shadow: 0.25rem 0.25rem 0 rgba(67,32,18,.16);
    overflow: hidden;
    padding: 0;
}
/* #FDEACA on #432012 → 12.23:1 ✓✓✓ */
.ci-mobilenav-heading {
    font-size: 1.15rem; font-weight: 700; line-height: 1.4;
    color: #FDEACA;
    background: #432012;
    text-align: center;
    margin: 0;
    padding: .625rem .75rem;
}
.ci-mobilenav-list {
    background: transparent;
    border-radius: 0;
    padding: 0;
}
/* 手機卡片內連結覆寫（對齊桌機樣式） */
.ci-mobilenav-list .ci-nav-link {
    padding: .6rem .85rem;
    color: #432012; font-size: 1rem; line-height: 1.45;
    border-bottom: 0.0625rem solid rgba(67,32,18,.2);
}
.ci-mobilenav-list li:last-child .ci-nav-link { border-bottom: none; }
/* hover / focus：#432012 on #F5C090 → 8.81:1 ✓✓✓ */
.ci-mobilenav-list .ci-nav-link:hover,
.ci-mobilenav-list .ci-nav-link:focus-visible {
    background: #F5C090; color: #432012;
    outline: 2px solid #432012; outline-offset: -2px;
}
/* 啟用項目：#FDEACA on #432012 → 12.23:1 ✓✓✓ */
.ci-mobilenav-list .ci-nav-active {
    padding: .6rem .85rem;
    color: #FDEACA; font-size: 1rem; font-weight: 700; line-height: 1.45;
    background: #432012;
    border-bottom: 0.0625rem solid rgba(67,32,18,.2);
}
.ci-mobilenav-list .ci-nav-active:hover,
.ci-mobilenav-list .ci-nav-active:focus-visible {
    background: #6B3520; color: #FDEACA;
    outline: 2px solid #6B3520; outline-offset: -2px;
}
.ci-nav-back-link { color: #432012 !important; font-size: .9rem !important; }

.cherish-content img { max-width: 100%; height: auto; }

/* ── Index：版面 ── */
.ci-section { padding: 2.5rem 0; }
.ci-heading {
    font-size: 1.2rem; font-weight: 700; color: #2c7a4b;
    border-left: 4px solid #2c7a4b; padding-left: .65rem; margin-bottom: 1.5rem;
}
/* 改版需求：影音與成果資源名稱字級放大，參考 GEEP 區塊標題比例。 */
.ci-heading--dark { font-size: 2.25rem; color: #1a1a1a; border-left-color: #1a1a1a; }

/* ── Index：知識專區圖片 ── */
.ci-knowledge-wrap { position: relative; line-height: 0; }
.ci-knowledge-bg { width: 100%; display: block; height: auto; }
/* 文字層疊在背景上，pointer-events:none 讓底下按鈕仍可點擊 */
.ci-knowledge-txt {
    position: absolute;
    top: 10%; left: 30px;
    width: 55%; height: 65%;
    pointer-events: none;
}
.ci-knowledge-body { position: absolute; top: 1rem; left: 2%; max-width: 42%; line-height: 1.5; }
.ci-knowledge-body img { max-width: 100%; height: auto; }

.ci-knowledge-btns {
    position: absolute; bottom: 3rem; left: 60px;
    display: flex; flex-wrap: wrap; gap: .75rem; line-height: normal;
}
.ci-btn-orange {
    display: inline-block; padding: .75rem 2rem;
    background: #C05500; border: none; border-radius: .4rem;
    color: #fff; font-size: 1.1rem; font-weight: 600;
    text-decoration: none; transition: background .2s; line-height: normal;
}
.ci-btn-orange:hover, .ci-btn-orange:focus { background: #A84A00; color: #fff; }
.ci-btn-orange:focus-visible { outline: 3px solid #432012; outline-offset: 2px; }
.ci-knowledge-btns .ci-btn-orange { font-size: 1.65rem; padding: .85rem 3rem; }

/* ── Index：倒數計時卡片（#C05500 on white 4.63:1 ✓ WCAG AA） ── */
.ci-countdown {
    position: absolute; top: 50%; right: 5%; transform: translateY(-50%);
    width: 38%; max-width: 360px; z-index: 2;
    background: #fff; color: #333; border-radius: .8rem;
    padding: 1.5rem 1.1rem 1.4rem; text-align: center;
    line-height: 1.4; box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.ci-countdown-name  { font-size: 1rem; font-weight: 700; color: #222; line-height: 1.3; margin-bottom: .1rem; }
.ci-countdown-label { font-size: .82rem; color: #666; margin-bottom: .35rem; }
.ci-countdown-nums  { font-size: 2.4rem; font-weight: 800; color: #C05500; letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.ci-countdown-unit  { font-size: .66rem; color: #888; letter-spacing: .1em; }
.ci-countdown-unit-cn { font-size: .9rem; color: #444; font-weight: 700; letter-spacing: 0; }
.ci-countdown-deadline {
    display: flex; align-items: center; justify-content: center; gap: .3rem;
    font-size: .78rem; margin: .35rem 0 .2rem; flex-wrap: wrap;
}
.ci-countdown-deadline-lbl  { color: #C05500; font-weight: 700; letter-spacing: .05em; flex-shrink: 0; }
.ci-countdown-deadline-date { color: #444; }
.ci-countdown-bar-wrap {
    background: #e9ecef; border-radius: 1rem;
    height: 0.3125rem; margin: .2rem 0 .25rem; overflow: hidden;
}
.ci-countdown-bar { height: 100%; background: #C05500; border-radius: 1rem; transition: width .6s linear; width: 100%; }
.ci-countdown-progress-text { font-size: .72rem; color: #666; margin-bottom: .5rem; }
.ci-countdown .ci-btn-orange { display: block; width: 100%; text-align: center; font-size: 1.65rem; padding: .4rem 3rem; }

/* ── Index：影音縮圖區（外層卡片沿用 .ci-result-card；此處只保留內嵌播放縮圖 & 遮罩相關規則） ── */
.ci-video-thumb-wrap { position: relative; line-height: 0; cursor: pointer; }
.ci-video-thumb-wrap:focus-visible {
    outline: 3px solid #432012;
    outline-offset: -3px;
}
.ci-video-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.ci-video-thumb-ph {
    width: 100%; aspect-ratio: 16/9; background: #dee2e6;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: 700; color: #fff; letter-spacing: .05em;
}
.ci-video-thumb-ph--facebook { background: #1877f2; }
.ci-video-thumb-ph--youtube  { background: #ff0000; }
.ci-video-play-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.12); transition: background .2s;
}
.ci-video-thumb-wrap:hover .ci-video-play-overlay { background: rgba(0,0,0,.28); }
.ci-video-play-btn {
    width: 3.375rem; height: 3.375rem; border-radius: 50%;
    background: rgba(255,255,255,.88);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; color: #C05500; transition: transform .2s;
    padding-left: 0.1875rem;
}
.ci-video-thumb-wrap:hover .ci-video-play-btn { transform: scale(1.1); }

/* 改版需求：影音與成果首頁卡片共用標題、說明、看更多按鈕版型。 */
.ci-card-content {
    min-height: 12.5rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
}
.ci-card-link {
    color: inherit;
    text-decoration: none;
}
.ci-card-link:hover {
    color: inherit;
    background: #fffaf5;
}
.ci-card-link:focus-visible {
    color: inherit;
    outline: 3px solid #432012;
    outline-offset: -3px;
}
.ci-card-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #4a3c31;
    line-height: 1.35;
    margin: 0 0 0.625rem;
}
/* 成果資源 & 惜食影音（共用 ci-result-card）：首頁卡片標題黑色置中 */
.ci-result-card .ci-card-title {
    color: #000;
    text-align: center;
}
.ci-card-desc {
    font-size: 1.25rem;
    font-weight: 700;
    color: #6e5a4c;
    line-height: 1.65;
    margin: 0;
    flex: 1;
}
.ci-btn-more {
    /* 淺色按鈕使用深色文字，維持 WCAG AA 對比並保留至少 44px 觸控高度。 */
    min-height: 2.75rem;
    min-width: 5.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    margin-top: 0.875rem;
    padding: 0.5rem 1.25rem;
    background: #F5C090;
    color: #432012;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2;
    border: 0.09375rem solid #432012;
    border-radius: 0.25rem;
    text-decoration: none;
    box-shadow: 0.125rem 0.125rem 0 #432012;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ci-btn-more:hover,
.ci-btn-more:focus-visible {
    background: #E5B821;
    color: #432012;
    transform: translate(-0.0625rem,-0.0625rem);
    box-shadow: 0.1875rem 0.1875rem 0 #432012;
    outline: 3px solid #432012;
    outline-offset: 2px;
}

/* ── Index：活動（2026-09-16 需求：Index 頁改顯示惜食動畫，Activity 專區重啟後再啟用此區塊） ── */
.ci-activity-wrap { position: relative; line-height: 0; }
.ci-activity-wrap > img { width: 100%; display: block; height: auto; }

.ci-activity-btns {
    position: absolute; bottom: 27%; left: 20%;
    display: flex; flex-wrap: wrap; gap: .75rem; line-height: normal;
}

/* ══════════════════════════════════════════
   Index：跑馬燈（獨立區塊，緊鄰知識專區下方）
   AA 驗證：
   跑馬燈文字 #000000 on #74C541 → 9.79:1 ✓ AAA
   暫停鈕     #000000 on #74C541 → 9.79:1 ✓ AAA
   註：#FFFFFF on #74C541 僅 2.18:1 未達 AA，故文字改純黑維持明亮綠底
   ══════════════════════════════════════════ */
.ci-marquee-section {
    /* 100% 寬且直接貼齊上方知識專區底部：無 padding、無 margin、無圓角 */
    padding: 0;
    margin: 0;
}
.ci-marquee {
    position: relative;
    display: flex;
    align-items: stretch;
    background: #74C541;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    overflow: hidden;
    color: #000000;
}
/* WCAG 2.5.5：觸控目標 ≥ 44×44px；WCAG 1.4.11：邊框對比 3:1 */
.ci-marquee-toggle {
    flex-shrink: 0;
    min-width: 2.75rem;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5rem .85rem;
    background: transparent;
    color: #000000;
    border: 0;
    border-right: 1px solid rgba(0,0,0,.4);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: background .15s ease;
}
.ci-marquee-toggle:hover,
.ci-marquee-toggle:focus-visible {
    background: rgba(0,0,0,.15);
    outline: 3px solid #000000;
    outline-offset: -3px;
}
.ci-marquee-viewport {
    position: relative;
    flex: 1;
    overflow: hidden;
    padding: .625rem 0;
}
/* 單份文字掃過模式：文字從右邊出現、向左滑過、離開左邊後留約 15% 動畫時長的空白再重新進場，形成明顯間隔感 */
.ci-marquee-track {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;              /* 起始位置把文字推到視窗右邊外 */
    animation: ci-marquee-scroll 60s linear infinite;
    will-change: transform;
}
.ci-marquee-text {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .02em;
}
@keyframes ci-marquee-scroll {
    /* 0% ~ 85%：文字由右向左移動；85% ~ 100%：文字已完全離開左側，畫面留白形成間隔 */
    0%   { transform: translateX(0); }
    85%  { transform: translateX(-100%); }
    100% { transform: translateX(-100%); }
}

/* ══════════════════════════════════════════
   Index：惜食動畫（兩支影片；標籤半透明覆蓋、播放時隱藏）
   AA 驗證：
   標題          #000000 on #FFFAF5 fallback + benner02.webp → 高對比 ✓ AAA
   標籤字        #000000 on rgba(255,255,255,0.5) 疊在深色影像上 → 平均 > 4.5:1 ✓ AA（大字加粗）
   ══════════════════════════════════════════ */
/* 相對路徑 ../img/... 由 CSS 檔位置解析，自動處理 EEISDNC 子站的 /EEISDNC/ 前綴，不會 404 */
.ci-animation-section {
    background: #FFFAF5 url('../img/CherishFood/benner02.webp') center / cover no-repeat;
}
.ci-anim-video-card {
    position: relative;
    margin: 0;
    background: #fff;
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.ci-anim-video {
    width: 100%;
    aspect-ratio: 16/9;
    display: block;
    background: #000;
}
.ci-anim-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: .6rem .75rem;
    background: rgba(255,255,255,.5);
    font-size: 1.5rem;
    font-weight: 700;
    color: #000000;
    text-align: center;
    pointer-events: none; /* 讓字幕標籤不擋住影片下方控制列 */
    transition: opacity .2s ease;
}
.ci-anim-video-card.is-playing .ci-anim-label {
    opacity: 0;
}


/* ── Index：成果 ── */
.ci-result-card {
    background: #fff; border-radius: .5rem; overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.08); height: 100%;
    display: flex; flex-direction: column;
}
.ci-result-link {
    color: inherit;
    text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease;
}
.ci-result-link:hover {
    color: inherit;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    transform: translateY(-0.125rem);
}
.ci-result-link:focus-visible {
    color: inherit;
    outline: 3px solid #432012;
    outline-offset: 3px;
}
.ci-result-card .ci-result-body { flex: none; }          /* 圖片區不撐高 */
.ci-result-card > .ci-card-content { flex: 1; align-self: stretch; } /* 文字區填滿剩餘空間，內容自然從頂部排列 */
/* 改版需求：成果資源首頁圖片維持後台建議尺寸 380px × 235px 的比例，寬度隨卡片自適應。 */
.ci-result-img {
    width: 100%;
    aspect-ratio: 380 / 235;
    object-fit: cover;
    display: block;
}
.ci-category-tag {
    display: inline-block; font-size: .72rem; background: #e8f5e9;
    color: #2c7a4b; padding: .15rem .55rem; border-radius: 1rem;
}

/* ── Info RWD ── */

/* 平板（768–991px）：側欄縮窄至 10.625rem */
@media (max-width: 991px) {
    .ci-info-sidenav { width: 10.625rem; min-width: 10.625rem; }
    .ci-info-body    { padding: 1rem; gap: 1rem; }
}

/* 手機（< 768px）：上方全寬導覽 + 下方主內容堆疊 */
@media (max-width: 767px) {
    .ci-info-body  { display: block; }
    .ci-info-main  { padding: 1.25rem 1rem; }
    .ci-info-title { font-size: 1.2rem; }
}

/* 手機 / 平板（≤ 991px）：表格欄位垂直堆疊（覆寫 inline style width / height） */
@media (max-width: 991px) {
    html,
    body,
    .cf-content-wrap,
    .ci-info-wrap,
    .ci-info-body,
    .ci-info-main,
    .ci-info-content {
        max-width: 100%;
        overflow-x: hidden;
    }
    .ci-info-main,
    .ci-info-content,
    .ci-mobile-table-stack,
    .ci-mobile-table-block {
        min-width: 0;
        box-sizing: border-box;
    }
    .ci-info-content table.ci-mobile-source-table {
        display: none !important;
    }
    .ci-mobile-table-stack {
        display: block;
        width: 100%;
    }
    .ci-mobile-table-block {
        display: block;
        width: 100%;
        margin: 0 0 .75rem;
        box-sizing: border-box;
    }
    .ci-mobile-table-block--media {
        margin-bottom: .375rem;
    }
    .ci-mobile-table-block--text {
        margin-bottom: 1rem;
    }
    .ci-mobile-table-block * {
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .ci-mobile-table-block img,
    .ci-mobile-table-block iframe,
    .ci-mobile-table-block video {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }
    .ci-mobile-table-block iframe {
        aspect-ratio: 16 / 9;
        height: auto !important;
    }
    .ci-info-content table img {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
    }
}

/* ── RWD：大平板（≤1400px，含 iPad Pro 橫向 1366px）── */
@media (max-width: 1400px) {
    .ci-knowledge-btns .ci-btn-orange { font-size: 1.4rem; padding: .75rem 2.5rem; }
    .ci-knowledge-btns { bottom: 2rem; }
}

/* ── RWD：iPad Air / 小桌機（≤1200px，含 iPad Pro 直向 1024px）── */
@media (max-width: 1200px) {
    .ci-countdown { max-width: 280px; padding: .55rem .8rem .5rem; right: 4%; }
    .ci-countdown-name  { font-size: .86rem; }
    .ci-countdown-label { font-size: .72rem; margin-bottom: .2rem; }
    .ci-countdown-nums  { font-size: 1.7rem; }
    .ci-countdown-unit  { font-size: .58rem; }
    .ci-countdown-deadline { font-size: .68rem; margin: .2rem 0 .1rem; }
    .ci-countdown-progress-text { font-size: .64rem; margin-bottom: .35rem; }
    .ci-knowledge-btns .ci-btn-orange { font-size: 1.1rem; padding: .55rem 1.5rem; }
    .ci-knowledge-btns { bottom: 1.5rem; left: 4%; }
}

/* ── RWD：平板（≤991px） ── */
@media (max-width: 991px) {
    .ci-countdown      { width: 42%; right: 3%; max-width: 240px; }
    .ci-knowledge-btns { left: 4%; }
    .ci-btn-orange                  { padding: .45rem 1rem; font-size: .88rem; }
    .ci-knowledge-btns .ci-btn-orange { font-size: 1.32rem; padding: .55rem 1.5rem; }
    .ci-activity-btns .ci-btn-orange { padding: .35rem .7rem; font-size: .78rem; }
}

/* ── RWD：手機（≤767px） ── */
@media (max-width: 767px) {
    .ci-knowledge-wrap  { line-height: normal; }
    .ci-knowledge-body  { position: static; max-width: 100%; padding: .75rem 1rem 0; }
    .ci-knowledge-btns  { position: static; padding: .5rem 1rem .75rem; justify-content: center; left: auto; bottom: auto; }
    .ci-countdown       { position: static; width: 100%; max-width: 100%; transform: none; padding: 1rem; margin: .5rem 0; }
    .ci-activity-btns   { position: static; padding: .5rem 1rem; left: auto; bottom: auto; flex-direction: column; }
    .ci-activity-btns .ci-btn-orange { display: block; width: 100%; text-align: center; font-size: .88rem; padding: .45rem 1rem; }
    .ci-activity-wrap   { line-height: normal; }
    .ci-result-card     { height: auto; }  /* 手機堆疊時取消固定高度，避免遮蓋下方按鈕 */
    .ci-heading--dark   { font-size: 1.85rem; }
    .ci-card-content    { min-height: 0; }
    .ci-knowledge-txt   { height: auto; }  /* 手機版文字圖層跟隨背景圖自然高度，不撐滿整個容器 */
}

/* ── 平滑捲動 / 黏頂補償（sticky header 約 4rem，取 5rem 安全邊距）── */
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
:focus { scroll-margin-top: 5rem; }

/* ════════════════════════════════════════
   Footer
   AA 驗證：
   主文字        #FDEACA on #432012  → 12.23:1  ✓✓✓
   footer-btn    #FDEACA on #432012  → 12.23:1  ✓✓✓（outlined 透明底）
   footer-btn ↓  #432012 on #FDEACA  → 12.23:1  ✓✓✓（hover 後）
   連結          #F5C090 on #432012  →  8.81:1  ✓✓✓
   ════════════════════════════════════════ */
.cf-content-wrap { position: relative; }

/* 改版需求：右下角回最上按鈕，尺寸與焦點樣式符合鍵盤與觸控操作。 */
.cf-back-to-top {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 210;
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #F5C090;
    color: #432012;
    border: 0.09375rem solid #432012;
    border-radius: 0.25rem;
    box-shadow: 0.125rem 0.125rem 0 #432012;
    cursor: pointer;
}
.cf-back-to-top[hidden] {
    display: none;
}
.cf-back-to-top:hover,
.cf-back-to-top:focus-visible {
    background: #E5B821;
    color: #432012;
    outline: 3px solid #432012;
    outline-offset: 2px;
}

.cf-footer {
    background: #432012;
    color: #FDEACA;
    padding: 1.25rem 1rem 1rem;
    font-size: .875rem;
    text-align: center;
    position: relative;
}

/* ── 快捷連結列 ── */
.cf-footer-btns {
    display: flex; flex-wrap: wrap; gap: .5rem;
    justify-content: center; margin-bottom: 1.25rem;
}
/* #FDEACA on #432012 → 12.23:1 ✓✓✓ */
.cf-footer-btn {
    display: inline-block;
    border: 1px solid rgba(253,234,202,.55);
    color: #FDEACA; background: transparent;
    padding: .4rem 1.1rem; border-radius: .25rem;
    font-size: .875rem; font-weight: 600; text-decoration: none;
    transition: background .15s, color .15s;
}
/* hover / focus：#432012 on #FDEACA → 12.23:1 ✓✓✓
   outline #FDEACA on gap #432012 → 12.23:1 ✓✓✓ */
.cf-footer-btn:hover,
.cf-footer-btn:focus-visible {
    background: #FDEACA; color: #432012;
    outline: 3px solid #FDEACA; outline-offset: 2px;
}

/* ── AA 無障礙標章連結（標章尺寸 88×31 依核發辦法固定，不可更動）── */
.cf-footer-badge-link {
    display: inline-block;
    margin-top: .5rem;
}
.cf-footer-badge-link:focus-visible {
    outline: 3px solid #FDEACA;
    outline-offset: 3px;
    border-radius: 2px;
}

/* ── 版權 / 維護資訊 ── */
.cf-footer-info {
    display: flex; flex-wrap: wrap; gap: 1.25rem;
    max-width: 960px; margin: 0 auto 1rem;
    text-align: left;
}
.cf-footer-col { flex: 1; min-width: 180px; }
.cf-footer-col--right { text-align: right; }
.cf-footer-col p { margin: .15rem 0; }
.cf-footer-label { font-weight: 700; margin-bottom: .3rem !important; }
/* #F5C090 on #432012 → 8.81:1 ✓✓✓（僅版權欄位內的文字連結，不影響 .cf-footer-btn） */
.cf-footer-info a { color: #F5C090; text-decoration: none; }
.cf-footer-info a:hover,
.cf-footer-info a:focus-visible {
    color: #FDEACA; text-decoration: underline;
    outline: 2px solid #FDEACA; outline-offset: 2px; border-radius: 2px;
}


@media (max-width: 600px) {
    .cf-footer-info { flex-direction: column; gap: .75rem; }
    .cf-footer-col--right { text-align: left; }
    .cf-back-to-top { right: .75rem; bottom: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
    /* 無障礙：尊重使用者降低動態效果偏好，停用捲動與按鈕轉場動畫。
       跑馬燈本身已提供 .ci-marquee-toggle 明確暫停/播放按鈕（WCAG 2.2.2），
       故不在此再自動停用其滾動，讓使用者自行決定。 */
    html { scroll-behavior: auto; }
    .cf-header,
    .ci-btn-more,
    .cf-back-to-top {
        transition: none;
    }
}

/* ════════════════════════════════════════
   Sitemap
   AA 驗證：
   標題  #FDEACA on #432012  → 12.23:1  ✓✓✓
   連結  #432012 on #FDEACA  → 12.23:1  ✓✓✓
   hover #432012 on #F5C090  →  8.81:1  ✓✓✓
   ════════════════════════════════════════ */
.cf-sitemap-wrap {
    background: #fff;
    min-height: 60vh;
    padding: 2rem 1rem;
}
.cf-sitemap-container { max-width: 800px; margin: 0 auto; }
/* #432012 on #fff → 12.96:1 ✓✓✓ */
.cf-sitemap-title {
    font-size: 1.5rem; font-weight: 700;
    color: #432012;
    border-left: 4px solid #432012;
    padding-left: .75rem; margin-bottom: 1rem;
}
.cf-sitemap-intro { margin: .25rem 0; color: #333; font-size: 1rem; }
.cf-sitemap-accesskey {
    margin: .75rem 0 1.5rem 1.5rem; padding: 0;
    color: #333; line-height: 1.8; font-size: 1rem;
}
.cf-sitemap-section { margin-top: 1.5rem; }
/* #FDEACA on #432012 → 12.23:1 ✓✓✓ */
.cf-sitemap-section-title {
    font-size: 1.1rem; font-weight: 700;
    color: #FDEACA; background: #432012;
    padding: .5rem .85rem;
    border-radius: .35rem .35rem 0 0;
    margin-bottom: 0;
}
.cf-sitemap-list {
    list-style: none; margin: 0; padding: 0;
    background: #fff;
    border: 0.09375rem solid rgba(67,32,18,.2);
    border-top: none;
    border-radius: 0 0 .35rem .35rem;
}
.cf-sitemap-list li { border-bottom: 0.0625rem solid rgba(67,32,18,.1); }
.cf-sitemap-list li:last-child { border-bottom: none; }
/* #432012 on #fff → ~18:1 ✓✓✓ */
.cf-sitemap-list a {
    display: block; padding: .65rem 1rem;
    color: #432012; font-size: 1rem; font-weight: 700;
    text-decoration: none; transition: background .15s;
}
/* hover / focus：#432012 on #F5C090 → 8.81:1 ✓✓✓ */
.cf-sitemap-list a:hover,
.cf-sitemap-list a:focus-visible {
    background: #F5C090; color: #432012;
    outline: 2px solid #432012; outline-offset: -2px;
}