/* ===== 寫實扁平風格 Flat Design 基礎設定 ===== */
            :root {
                --sky-light: #edf5f1; /* 淡底色 */
                --sky: #386758; /* AA-safe brand green */
                --sky-dark: #2c5046; /* AA-safe dark brand green */
                --sun: #f5a623; /* 飽和金橘 */
                --sun-orange: #c2410c; /* AA-safe accent orange */
                --lively-bg: #ffffff; /* 純白底色 */
                --lively-text: #1a2e28; /* 深綠文字 */
                --lively-muted: #5a7269; /* 灰綠次要文字 */
                --border-color: #d1e8de; /* 邊框色 */
                --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
                --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
                --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
            }

            html {
                font-size: 120%;
                scroll-behavior: smooth;
                scroll-padding-top: var(--fixed-header-offset, 76px);
            }

            body {
                font-family: "Inter", "Noto Sans TC", system-ui, sans-serif;
                color: var(--lively-text);
                letter-spacing: 0.01em;
                line-height: 1.6;
                overflow-x: hidden;
            }

            *,
            *::before,
            *::after {
                box-sizing: border-box;
            }

            img,
            svg,
            video,
            canvas {
                max-width: 100%;
            }

            main > section,
            [id] {
                scroll-margin-top: var(--fixed-header-offset, 76px);
            }

            .skip-link {
                position: fixed;
                left: 1rem;
                top: 1rem;
                z-index: 100;
                transform: translateY(-150%);
                border-radius: 0.5rem;
                background: var(--lively-text);
                color: #fff;
                padding: 0.75rem 1rem;
                font-weight: 700;
                box-shadow: var(--shadow-md);
                transition: transform 0.15s ease-out;
            }

            .skip-link:focus-visible {
                transform: translateY(0);
                outline: 3px solid var(--sun);
                outline-offset: 3px;
            }

            #main-content:focus {
                outline: none;
            }

            /* 扁平標題字體 - 現代無襯線 */
            .font-display {
                font-family: "Plus Jakarta Sans", "DM Sans", sans-serif;
                font-weight: 700;
                letter-spacing: 0.01em;
            }

            .font-body {
                font-family: "Inter", "Noto Sans TC", system-ui, sans-serif;
            }

            /* 扁平白底面板 */
            /* 導航標籤顯示控制 - Lively 風格 */
            .nav-btn:hover .nav-label,
            .nav-btn .nav-label.show {
                opacity: 1;
                visibility: visible;
                transform: translateX(0);
            }

            .nav-btn.active .nav-dot,
            .nav-btn:hover .nav-dot {
                background-color: var(--sky);
                transform: scale(1.25);
                box-shadow: 0 0 15px rgba(117, 168, 148, 0.5);
            }

            .nav-btn:focus-visible,
            .role-tab-btn:focus-visible,
            .policy-indicator:focus-visible,
            #policy-prev:focus-visible,
            #policy-next:focus-visible,
            #links a.group:focus-visible {
                outline: 3px solid var(--sun);
                outline-offset: 4px;
            }

            /* 動畫 Keyframes - 彈跳活潑動畫 */
            @keyframes fadeInDown {
                from {
                    opacity: 0;
                    transform: translateY(-20px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            .animate-fade-in-down {
                animation: fadeInDown 0.2s ease-out;
            }

            /* 動畫已簡化 - 扁平風格使用俐落動畫 */

            .hero-title {
                line-height: 1.18;
                overflow-wrap: anywhere;
            }

            .hero-title-line {
                display: block;
                padding-block: 0.06em;
                overflow: hidden;
            }

            .hero-title-text {
                display: block;
                perspective: 700px;
                white-space: pre-wrap;
                will-change: transform, opacity;
            }

            .hero-title-char {
                display: inline-block;
                white-space: pre;
                will-change: transform, opacity, filter;
            }

            .hero-bg-image {
                transform-origin: center;
                will-change: transform, opacity;
            }

            @media (prefers-reduced-motion: reduce) {
                html {
                    scroll-behavior: auto;
                }

                *,
                *::before,
                *::after {
                    animation-duration: 0.01ms !important;
                    animation-iteration-count: 1 !important;
                    transition-duration: 0.01ms !important;
                }

                .hero-title-text,
                .hero-title-char,
                .hero-bg-image {
                    transform: none !important;
                    opacity: 1 !important;
                    clip-path: none !important;
                    will-change: auto;
                    filter: none !important;
                }

                .active-card-border.active-card-border,
                .active-card-border::before {
                    animation: none !important;
                }
            }

            html.motion-paused {
                scroll-behavior: auto;
            }

            html.motion-paused *,
            html.motion-paused *::before,
            html.motion-paused *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }

            html.motion-paused .hero-title-text,
            html.motion-paused .hero-title-char,
            html.motion-paused .hero-bg-image {
                transform: none !important;
                opacity: 1 !important;
                clip-path: none !important;
                will-change: auto;
                filter: none !important;
            }

            html.motion-paused .active-card-border.active-card-border,
            html.motion-paused .active-card-border::before {
                animation: none !important;
            }

            @keyframes fadeIn {
                from {
                    opacity: 0;
                }
                to {
                    opacity: 1;
                }
            }
            .animate-fade-in {
                animation: fadeIn 0.3s ease-out;
            }

            @keyframes slideUp {
                from {
                    opacity: 0;
                    transform: translateY(16px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            .animate-slide-up {
                animation: slideUp 0.25s ease-out 0.05s backwards;
            }

            /* ===== 扁平風格裝飾效果 ===== */

            /* 區塊標題 - 現代字體 */
            .section-title {
                font-family: "Plus Jakarta Sans", "DM Sans", sans-serif;
                font-weight: 700;
                position: relative;
                display: inline-block;
            }

            /* 標題兩側裝飾條 - 改為細矩形 */
            .section-title span[class^="block-"],
            .section-title span[class*=" block-"] {
                border-radius: 2px;
                width: 3px;
                height: 1.5rem;
                opacity: 0.7;
            }

            /* 卡片 */
            .paper-card {
                background: var(--lively-bg);
                border-radius: 10px;
                box-shadow: var(--shadow-sm);
                border: 1px solid var(--border-color);
            }

            /* 中性陰影 */
            .natural-shadow {
                box-shadow: var(--shadow-sm);
                border-radius: 10px;
            }

            /* ===== 選中卡片 - 旋轉光暈外框特效 ===== */
            .role-tab-btn {
                position: relative;
                will-change: transform, box-shadow;
            }

            .role-tab-btn[aria-selected="true"]::after {
                content: "";
                position: absolute;
                top: 0.9rem;
                bottom: 0.9rem;
                left: 0.6rem;
                width: 0.3rem;
                border-radius: 999px;
                background: rgba(56, 103, 88, 0.38);
                box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.562);
                pointer-events: none;
                z-index: 2;
            }

            .role-tab-btn[aria-selected="true"] h3 {
                color: #386758;
            }

            .role-tab-btn:focus-visible {
                box-shadow:
                    0 0 0 4px rgba(245, 166, 35, 0.28),
                    var(--shadow-md);
            }

            .role-tab-btn img,
            .role-tab-btn h3 {
                will-change: transform;
            }

            .role-tab-btn > div:last-child {
                flex-basis: 0;
            }

            .role-content h3,
            .role-content h4,
            .role-content a.group {
                will-change: transform, opacity;
            }

            #role-diversion-section > .relative {
                will-change: height;
            }

            @property --border-angle {
                syntax: "<angle>";
                initial-value: 0deg;
                inherits: false;
            }

            @keyframes rotate-border {
                to {
                    --border-angle: 360deg;
                }
            }

            @keyframes spin-slow {
                from {
                    transform: translate(-50%, -50%) rotate(0deg);
                }
                to {
                    transform: translate(-50%, -50%) rotate(360deg);
                }
            }

            @keyframes glow-pulse {
                0%,
                100% {
                    box-shadow: 0 0 12px var(--card-glow);
                }
                50% {
                    box-shadow:
                        0 0 20px var(--card-glow),
                        0 0 40px var(--card-glow-soft);
                }
            }

            .active-card-border.active-card-border {
                position: relative;
                border-color: transparent;
                animation: glow-pulse 2s ease-in-out infinite;
            }

            .active-card-border::before {
                content: "";
                position: absolute;
                inset: -3px;
                border-radius: 1.1rem;
                padding: 3px;
                background: conic-gradient(
                    from var(--border-angle),
                    var(--card-color) 0%,
                    transparent 12%,
                    transparent 38%,
                    var(--card-color) 50%,
                    transparent 62%,
                    transparent 88%,
                    var(--card-color) 100%
                );
                -webkit-mask:
                    linear-gradient(#fff 0 0) content-box,
                    linear-gradient(#fff 0 0);
                mask:
                    linear-gradient(#fff 0 0) content-box,
                    linear-gradient(#fff 0 0);
                -webkit-mask-composite: xor;
                mask-composite: exclude;
                animation: rotate-border 3s linear infinite;
                pointer-events: none;
                z-index: 1;
            }

            /* ===== 右側錨點導覽列 - gutter 自動定位 ===== */
            .page-nav-right {
                right: max(1rem, calc((100vw - 96rem) / 2 + 0.5rem));
            }

            #policy-carousel {
                cursor: grab;
                touch-action: pan-y;
                user-select: none;
            }

            #policy-carousel.is-dragging {
                cursor: grabbing;
            }

            #policy-carousel img,
            #policy-carousel a {
                -webkit-user-drag: none;
            }

            #links a.group {
                border-style: solid;
            }

            /* ===== Mobile RWD safety layer ===== */
            @media (max-width: 767px) {
                :root {
                    --fixed-header-offset: 64px;
                }

                html {
                    font-size: 112.5%;
                }

                body {
                    width: 100%;
                    max-width: 100vw;
                }

                #hero {
                    min-height: 390px;
                    height: clamp(390px, 54svh, 460px);
                }

                #hero img {
                    object-position: 68% center;
                }

                #hero .absolute.inset-0.z-20 {
                    padding: 4.25rem 1.25rem 1.5rem;
                }

                #hero h2 {
                    font-size: clamp(1.75rem, 10vw, 2.55rem);
                    -webkit-text-stroke-width: 3px;
                }

                #role-diversion > .container {
                    padding-top: 1.5rem;
                }

                .section-title {
                    max-width: 100%;
                    align-items: center;
                    text-align: center;
                    line-height: 1.25;
                    overflow-wrap: anywhere;
                }

                #role-diversion-section {
                    margin-bottom: 2rem;
                }

                #role-diversion-section > .grid {
                    gap: 0.75rem;
                    margin-bottom: 1.25rem;
                }

                #role-diversion-section .role-tab-btn {
                    min-height: 5.25rem;
                    gap: 0.625rem;
                    padding: 0.55rem 0.625rem 0.55rem 0.875rem;
                    border-radius: 0.875rem;
                }

                #role-diversion-section .role-tab-btn[aria-selected="true"]::after {
                    top: 0.65rem;
                    bottom: 0.65rem;
                    left: 0.45rem;
                    width: 0.22rem;
                }

                #role-diversion-section .role-tab-btn > div:first-child {
                    width: 4.75rem;
                    height: 3.5rem;
                    border-radius: 0.75rem;
                }

                #role-diversion-section .role-tab-btn h3 {
                    font-size: 1.05rem;
                    line-height: 1.2;
                    margin-bottom: 0.125rem;
                }

                #role-diversion-section .role-tab-btn p {
                    display: -webkit-box;
                    overflow: hidden;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    font-size: 0.8125rem;
                    line-height: 1.35;
                }

                .role-content > div {
                    padding: 1rem;
                }

                .role-content h3,
                #biz-title {
                    overflow-wrap: anywhere;
                }

                .role-content .grid-cols-2 {
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                    gap: 0.625rem;
                }

                .role-content .grid-cols-2 > a.group {
                    min-height: 5.75rem;
                    justify-content: center;
                    gap: 0.45rem;
                    padding: 0.625rem 0.5rem;
                    border: 1px solid rgba(148, 163, 184, 0.22);
                    border-radius: 0.75rem;
                    background: rgba(255, 255, 255, 0.72);
                }

                .role-content .grid-cols-2 > a.group:last-child:nth-child(odd) {
                    grid-column: 1 / -1;
                }

                .role-content .grid-cols-2 > a.group > div:first-child {
                    width: 2.625rem;
                    height: 2.625rem;
                    border-radius: 0.75rem;
                }

                .role-content .grid-cols-2 > a.group svg,
                .role-content .grid-cols-2 > a.group i {
                    width: 1.15rem;
                    height: 1.15rem;
                }

                .role-content .grid-cols-2 > a.group span {
                    font-size: 0.8125rem;
                    line-height: 1.25;
                    overflow-wrap: anywhere;
                }

                #news-list > .group {
                    align-items: flex-start;
                    gap: 0.625rem;
                    padding: 0.75rem;
                }

                #news-list h3 {
                    white-space: normal;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }

                #policy-prev,
                #policy-next {
                    bottom: 0.25rem;
                    transform: none;
                }

                #policy-prev {
                    left: 0.5rem;
                }

                #policy-next {
                    right: 0.5rem;
                }

                #business-tabs {
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                    gap: 0.625rem;
                }

                #business-tabs button {
                    min-height: 4rem;
                    height: auto;
                    justify-content: center;
                    padding: 0.625rem 0.5rem;
                    font-size: 0.8125rem;
                    line-height: 1.2;
                    text-align: center;
                }

                #business-tabs button span:last-child {
                    white-space: normal;
                    overflow-wrap: anywhere;
                    word-break: keep-all;
                }

                #business-tabs button:last-child:nth-child(odd) {
                    grid-column: 1 / -1;
                }

                #core-business .relative.h-\[350px\] {
                    height: 420px;
                }

                #biz-desc {
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }

                #detailed-recycling-list .container {
                    padding-left: 1rem;
                    padding-right: 1rem;
                }

                #detailed-list-container {
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                    grid-auto-rows: 150px;
                    gap: 0.75rem;
                }

                #detailed-list-container > div {
                    border-radius: 0.75rem;
                }

                #detailed-list-container > div:last-child:nth-child(odd) {
                    grid-column: 1 / -1;
                }

                #detailed-list-container h3 {
                    font-size: 0.95rem;
                    line-height: 1.25;
                }

                #links a.group {
                    min-height: 9.5rem;
                    height: auto;
                }

                #links a.group > .relative.z-10.flex-grow {
                    padding: 1rem 4.25rem 1rem 1rem;
                }

                #links a.group > .absolute {
                    width: 5.5rem;
                    opacity: 0.34;
                }

                #links a.group h4 {
                    font-size: 1rem;
                    line-height: 1.35;
                    overflow-wrap: anywhere;
                }
            }

            @media (min-width: 768px) and (max-width: 1023px) {
                :root {
                    --fixed-header-offset: 72px;
                }

                #role-diversion-section > .grid {
                    grid-template-columns: minmax(0, 1fr);
                    max-width: 42rem;
                    margin-left: auto;
                    margin-right: auto;
                }

                #role-diversion-section {
                    margin-bottom: 3rem;
                }

                #role-diversion-section .role-tab-btn {
                    min-height: 9rem;
                    align-items: center;
                    padding: 1rem;
                }

                #role-diversion-section .role-tab-btn > div:first-child {
                    width: 11rem;
                    height: 6.5rem;
                }

                #role-diversion-section .role-tab-btn h3 {
                    font-size: 1.5rem;
                    line-height: 1.25;
                    writing-mode: horizontal-tb;
                    overflow-wrap: anywhere;
                }

                #role-diversion-section .role-tab-btn p {
                    white-space: normal;
                }

                .role-content .grid-cols-1.md\:grid-cols-3 {
                    grid-template-columns: minmax(0, 1fr);
                }

                #business-tabs {
                    grid-template-columns: repeat(3, minmax(0, 1fr));
                }
            }

/* ===== 首頁 hero 輪播 ===== */
.hero-slides {
    margin-top: var(--hero-header-h, 64px);
    height: auto !important;
    aspect-ratio: 1920 / 625;
    transition: transform 0.5s ease;
    will-change: transform, margin-top, height;
}
.hero-slide {
    width: 100%;
}
@media (prefers-reduced-motion: reduce) {
    .hero-slides { transition: none; }
}
/* 控制鈕定位：不依賴可能被 purge 的 Tailwind utility(relative/top-4/left-4/bottom-4/right-4/z-30)，明確寫死 */
#hero {
    position: relative; /* 確保控制鈕的 absolute 以 #hero 為基準(Tailwind relative 可能被 purge) */
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
    height: auto !important;
}
@media (max-width: 767px) {
    .hero-slides {
        aspect-ratio: 1 / 1;
    }
}
/* 輪播圖(第1張以後,非首頁 Banner_B)。桌機畫布 1920×625，手機畫布 625×625。
   手機:object-cover 填滿(避免寬扁圖變小條)。 */
.hero-db-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background-color: #ffffff;
}
/* 桌機/平板:定位到「頁首下方」(top = JS 寫入的實際頁首高度,預設 135px)，以原生比例完整顯示、
   不被固定頁首蓋住上緣、下方也不留大白邊(--hero-header-h 由 placeDbImages 設定)。 */
@media (min-width: 768px) {
    .hero-db-img {
        inset: 0;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        /* box = 頁首下方 ~ hero 底 的完整高度；object-contain 保證整張裝得下、永不裁切(矮視窗也不會裁到底部) */
        height: 100%;
        object-fit: contain;
        object-position: center;
    }
}

.hero-pause {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 40; /* 高於漸層/內容 */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 9999px; /* 橢圓/膠囊框 */
    background: rgba(255, 255, 255, 0.92); /* 白底，和 banner 明顯區別 */
    border: 1.5px solid #218c44; /* 品牌綠橢圓框 */
    color: #1f2937; /* 文字深色 */
    font-size: 14px;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.hero-pause:hover {
    background: #ffffff;
}
.hero-pause:focus-visible {
    outline: 2px solid #218c44;
    outline-offset: 2px;
}
.hero-pause-svg {
    width: 16px;
    height: 16px;
    color: #218c44; /* 暫停/播放圖示綠色(svg fill=currentColor) */
}
.hero-pause-text {
    font-weight: 700;
}
/* 控制列：移到 banner「下方、卡片上方」的流內位置(不疊在 banner 圖上)，水平置中。
   ◀ 圓點 ▶，參考 greenlifestyle */
.hero-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: fit-content;
    margin: 8px auto 0; /* banner 下方、卡片上方置中；縮小上下間距 */
    padding: 2px 10px;
    border-radius: 9999px;
    background: transparent; /* 在白底頁面區，綠框元件本身就清楚，不需白底 */
    position: relative;
    z-index: 20;
}
/* 民眾服務卡片整排上移：縮小卡片區的上內距(原 Tailwind pt-10=40px 太多，且 purge 後不可靠) */
#role-diversion > .container {
    padding-top: 12px;
}
/* ◀ ▶ 箭頭：綠框圓形按鈕 */
.hero-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 9999px;
    background: #ffffff;
    border: 1.5px solid #218c44;
    color: #218c44;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.hero-arrow:hover {
    background: #218c44;
    color: #ffffff;
}
.hero-arrow svg {
    width: 16px;
    height: 16px;
}
.hero-arrow:focus-visible {
    outline: 2px solid #218c44;
    outline-offset: 2px;
}
.hero-dots {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
/* 綠框空心圓點(不放數字)；目前張=綠色實心長條 */
.hero-dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border-radius: 9999px;
    background: transparent;
    border: 1.5px solid #218c44;
    cursor: pointer;
    transition: width 0.25s ease, background-color 0.25s ease;
}
.hero-dot:hover {
    background: rgba(33, 140, 68, 0.25);
}
.hero-dot[aria-current="true"] {
    width: 26px;
    background: #218c44;
    border-color: #218c44;
}
.hero-dot:focus-visible {
    outline: 2px solid #218c44;
    outline-offset: 2px;
}