/* =============================================
   承天中承府 — 濟世服務（R13「金漆濃」重排）
   對齊首頁 R8-R12 定調：首屏答題（hero＋辦理資訊帶）、一屏一事留白、
   儀式標題階、prose 34em、真實質感優先（去玻璃擬態/金屬漸層字/鍍金卡海）。
   顏色全走 theme.css token（色彩棘輪）；字級全 rem（放大鈕棘輪）。
   ============================================= */

:root {
    /* 舊皮別名（services.js 注入的空/錯誤態仍引用 --text-muted）——一律指向 theme token。 */
    --text-muted: var(--ink-gray);
}

body {
    background: var(--cream-site);
    font-family: var(--font-body);
    color: var(--ink);
}

/* 錨點跳轉不被 sticky 頂欄吃掉 */
#gongtan,
#clothes-process,
#service-finder {
    scroll-margin-top: 84px;
}

/* =============================================
   工具類別：滾動浮現（R8 慣例：掛 html.js 閘——JS 掛掉內容必須直接可見）
   ============================================= */
html.js .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
html.js .reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
    html.js .reveal { transition: none; opacity: 1; transform: none; }
    .marquee-track { animation: none !important; }
    .hero-content { animation: none !important; }
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* =============================================
   元寶標題（金漆規則：字用墨、金留給飾角——去金屬漸層字）
   ============================================= */
.yuanbao-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(12px, 2vw, 20px);
    margin-bottom: 10px;
    text-align: center;
}
.yuanbao-header h2 {
    font-family: var(--font-brand);
    font-size: clamp(1.7rem, 6vw, 2rem);
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.14em;
    /* A++/200% reflow：去 nowrap，讓六字標題可換行不切邊（CJK 逐字可斷） */
    white-space: normal;
    text-wrap: balance;
    line-height: 1.3;
    color: var(--ink);
}
/* 儀式標題階只升桌機（≤768 維持降階，六字標題才不會在小屏爆行） */
@media (min-width: 769px) {
    .yuanbao-header h2 {
        font-size: clamp(2.5rem, 4vw, 3.25rem);
    }
}
.yuanbao-icon {
    width: clamp(28px, 4vw, 40px);
    height: auto;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px var(--c-196-137-69-a20));
}
.header-subtitle {
    display: block;
    text-align: center;
    color: var(--ink-gray);
    font-size: 1rem;
    letter-spacing: 0.08em;
    margin-bottom: 40px;
}

/* =============================================
   Section 分隔線（金線 + 中心小元寶）
   ============================================= */
.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    max-width: 520px;
    margin: 0 auto;
    padding: 0 20px;
    opacity: 0.75;
}
.section-divider .line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.section-divider .orb {
    position: relative;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.section-divider .orb img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 2px 3px var(--c-196-137-69-a30));
}
.section-divider .orb::before,
.section-divider .orb::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 8px;
    height: 1px;
    background: var(--gold);
    opacity: 0.5;
}
.section-divider .orb::before { right: calc(100% + 4px); }
.section-divider .orb::after { left: calc(100% + 4px); }

/* =============================================
   1. HERO（真實影片質感；首屏收窄讓資訊帶露出＝先答題再給氣氛）
   ============================================= */
.service-hero {
    position: relative;
    width: 100%;
    /* A++/200% reflow：min-height 取代固定 height，容器隨 .hero-content 放大而長高，
       不再被 overflow:hidden 裁切（overflow 仍需保留以裁 100vw/100vh 影片底）。
       正常字級下內容 < 62vh，視覺高度與原本一致。 */
    min-height: min(62vh, 640px);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--c-000);
}
.service-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, var(--c-42-26-10-a12) 0%, var(--c-black-a50) 100%),
        linear-gradient(to bottom, transparent 55%, var(--cream-site) 100%);
    z-index: 2;
    pointer-events: none;
}
.video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0.66;
    z-index: 1;
}
.video-background iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: var(--cta-cream);
    padding: 20px;
    max-width: 900px;
    animation: heroFadeIn 1.2s var(--ease-out) both;
}
@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
.hero-title {
    font-family: var(--font-brand);
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    margin: 0 0 18px;
    letter-spacing: 0.18em;
    text-shadow: 0 2px 8px var(--c-black-a55), 0 0 26px var(--gold-glow);
    color: var(--gold-bright);
    font-weight: 900;
    text-wrap: balance;
}
.hero-subtitle p {
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    margin: 0 0 32px;
    line-height: 1.9;
    letter-spacing: 0.08em;
    text-shadow: 0 1px 4px var(--c-black-a60);
    color: var(--c-255-253-248-a92);
}
.hero-nav {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}
/* 深底描邊膠囊（去 backdrop-blur 玻璃擬態——反參考條款） */
.nav-anchor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 30px;
    background: var(--cta-scrim);
    border: 1px solid var(--c-196-137-69-a45);
    color: var(--cta-cream);
    text-decoration: none;
    border-radius: var(--radius-999);
    transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 1rem;
}
.nav-anchor:hover,
.nav-anchor:focus-visible {
    background: var(--gold);
    border-color: var(--gold-bright);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px var(--gold-glow);
    color: var(--white-warm);
}
.nav-anchor--accent {
    background: var(--gold);
    border-color: var(--gold-bright);
    color: var(--white-warm);
    box-shadow: var(--shadow-gold);
}
.nav-anchor--accent:hover,
.nav-anchor--accent:focus-visible {
    background: var(--gold-rich);
}

/* =============================================
   1.5 辦理資訊帶（R13 P0，仿首頁 home-info）：時間／地址／收費／LINE
   不掛 reveal——搜尋者要的答案必須即刻可見。
   ============================================= */
.svc-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 28px;
    max-width: min(980px, calc(100% - 32px));
    margin: 18px auto 0;
    padding: 14px 22px;
    background: var(--cream-panel);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.svc-info__fact {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    font-size: 1.05rem;
    color: var(--ink);
    text-decoration: none;
}
.svc-info__k {
    flex: none;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--gold-rich);
}
.svc-info__map { padding: 8px 0; }   /* 觸控高度補到 ≥44px（含行高） */
.svc-info__map:hover,
.svc-info__map:focus-visible { color: var(--gold-rich); text-decoration: underline; }
.svc-info__mapmark { color: var(--gold-rich); }
/* LINE 主鈕版位（T5 綠金規則）：外觀＝components.css .btn-line 單一真相（綠底白字）。
   ⚠️ 本 class 只准放版位——頁面 CSS 在 components.css 之後載入，同權重會蓋掉綠底。
   flex:none＝資訊帶 flex 子項不被壓縮，必留。 */
.svc-info__line {
    flex: none;
}

/* =============================================
   1.6 需求導引（契約元件：#service-finder＋4 卡 5 濾鏡）——視覺收斂：
   暖白面板、金線、低陰影；不再是發光卡片海。
   ============================================= */
.service-finder {
    max-width: 1120px;
    margin: clamp(56px, 7vw, 88px) auto 0;
    padding: 0 20px;
}
.service-finder__header {
    text-align: center;
    margin-bottom: 22px;
}
.service-finder__eyebrow {
    display: inline-block;
    color: var(--gold-rich);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}
.service-finder__header h2 {
    margin: 0;
    color: var(--ink);
    font-family: var(--font-brand);
    font-size: clamp(1.45rem, 3vw, 2rem);
    letter-spacing: 0.14em;
}
.service-finder__filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}
.service-finder__filter {
    min-height: 44px;
    border: 1px solid var(--gold-line);
    background: var(--cream-panel);
    color: var(--ink-soft);
    border-radius: var(--radius-999);
    padding: 9px 18px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.24s var(--ease-out), border-color 0.24s var(--ease-out), color 0.24s var(--ease-out), box-shadow 0.24s var(--ease-out);
}
.service-finder__filter:hover,
.service-finder__filter:focus-visible,
.service-finder__filter.active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--white-warm);
    box-shadow: var(--shadow-gold);
}
.service-finder__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.service-finder-card {
    background: var(--cream-panel);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    padding: 20px 18px;
    box-shadow: var(--shadow-card);
    transition: transform 0.24s var(--ease-out), box-shadow 0.24s var(--ease-out), border-color 0.24s var(--ease-out);
}
.service-finder-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--c-196-137-69-a34);
}
.service-finder-card.is-hidden {
    display: none;
}
.service-finder-card__tag {
    color: var(--gold-rich);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}
.service-finder-card h3 {
    margin: 0 0 8px;
    color: var(--ink);
    font-size: 1.08rem;
    line-height: 1.4;
}
.service-finder-card p {
    margin: 0 0 10px;
    color: var(--ink-soft);
    font-size: 0.95rem;
    line-height: 1.7;
}
.service-finder-card a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--gold-rich);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid var(--c-196-137-69-a35);
}
.service-finder-card a:hover,
.service-finder-card a:focus-visible {
    color: var(--gold-deep);
    border-bottom-color: var(--gold);
}

/* =============================================
   2. 公壇問事（一屏一事：留白拉開；真照片輪播為主角）
   ============================================= */
.gongtan-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(96px, 11vw, 150px) 20px;
    display: flex;
    align-items: stretch;
    gap: clamp(30px, 5vw, 60px);
}
.gongtan-img-box {
    flex: 1;
    position: relative;
    border-radius: var(--radius-14);
    overflow: hidden;
    min-height: 420px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--c-196-137-69-a18);
    transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.gongtan-img-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}
.carousel-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    z-index: 1;
}
.carousel-img.active { opacity: 1; z-index: 2; }

.gongtan-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.gongtan-content .yuanbao-header { justify-content: flex-start; }
.gongtan-content .header-subtitle { text-align: left; margin-bottom: 30px; }

.process-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.step-item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: var(--cream-panel);
    padding: 20px 22px;
    border-radius: var(--radius-14);
    border: 1px solid var(--gold-border);
    box-shadow: var(--shadow-card);
    transition: border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), transform 0.35s var(--ease-out);
    position: relative;
}
.step-item:hover {
    border-color: var(--c-196-137-69-a34);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-3px);
}
.step-num {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-full);
    background: var(--gold);
    color: var(--white-warm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1rem;
    box-shadow: 0 3px 8px var(--c-196-137-69-a30);
    font-family: var(--font-body);
}
.step-body { flex: 1; min-width: 0; }
.step-title {
    font-weight: 700;
    color: var(--gold-deep);
    font-size: 1.08rem;
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.step-desc {
    font-size: 0.95rem;
    color: var(--ink-soft);
    line-height: 1.8;
}
.step-desc small { color: var(--cta-red); }
/* .line-btn 已移除（T5 綠金規則）：報名公告的 LINE 群組鈕改用 _line_btn macro
   ＝components.css .btn-line 單一真相；此處最後一處 LINE 綠硬編一併清掉。 */

/* 問事 FAQ 精選 3 題（B 大刀案 2026-07-15：自 /consult 併入，本頁＝問事唯一權威） */
.gongtan-faq {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px dashed var(--c-196-137-69-a45);
}
.gongtan-faq h3 {
    margin: 0 0 14px;
    color: var(--gold-deep);
    font-size: 1.08rem;
    font-weight: 700;
}
.gongtan-faq__list { margin: 0; }
.gongtan-faq__list dt {
    font-weight: 700;
    color: var(--gold-deep);
    font-size: 0.95rem;
    margin-top: 12px;
}
.gongtan-faq__list dd {
    margin: 4px 0 0;
    font-size: 0.95rem;
    color: var(--ink-soft);
    line-height: 1.8;
}
.gongtan-faq__more {
    margin-top: 14px;
}
.gongtan-faq__more a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--gold-rich);
    text-decoration: underline;
}

/* =============================================
   3. 衣物收驚（prose 講故事：1.125rem／行高 1.95／34em 置中）
   ============================================= */
.clothes-process-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(96px, 11vw, 150px) 20px;
}
.clothes-process-summary {
    max-width: 34em;
    margin: 0 auto;
    text-align: center;
}
.clothes-process-summary p {
    color: var(--ink-soft);
    font-size: 1.125rem;
    line-height: 1.95;
    margin-bottom: 18px;
    text-align: left;
}
.clothes-process-summary .btn-action {
    margin-top: 14px;
}
.process-card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
    margin-top: 40px;
}

/* 收驚規則常駐區（Wave 1-B 2026-07-16）：旗關時 /services 是信眾看得到的收驚說明，
   規則不能只躲在 modal 裡。沿用 .process-card 的面板語彙（cream-panel/gold-border），
   全部走既有 token——不改 theme.css/components.css。 */
.clothes-rules {
    max-width: 44em;
    margin: 44px auto 0;
    padding: 30px 32px;
    background: var(--cream-panel);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    text-align: left;
}
.clothes-rules__title {
    font-family: var(--font-brand);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--gold-deep);
    letter-spacing: 0.1em;
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gold);
    text-align: center;
}
.clothes-rules__list {
    margin: 0;
    padding-left: 1.4em;
    color: var(--ink-soft);
    font-size: 1.0625rem;
    line-height: 1.9;
}
.clothes-rules__list li {
    margin-bottom: 10px;
}
.clothes-rules__list li::marker {
    color: var(--gold);
}
.clothes-rules__list li:last-child {
    margin-bottom: 0;
}
.process-card {
    background: var(--cream-panel);
    border-radius: var(--radius-md);
    padding: 28px 26px;
    box-shadow: var(--shadow-card);
    text-align: center;
    border: 1px solid var(--gold-border);
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.process-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--c-196-137-69-a34);
}
.card-title {
    font-family: var(--font-brand);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--gold-deep);
    margin-bottom: 12px;
    letter-spacing: 0.08em;
}
.card-desc {
    font-size: 0.95rem;
    color: var(--ink-soft);
    line-height: 1.8;
    min-height: 60px;
    margin-bottom: 18px;
}
.card-desc p { margin: 0; }
.card-image-box {
    margin-bottom: 22px;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--cream-warm);
    border-radius: var(--radius-12);
    overflow: hidden;
    border: 1px solid var(--gold-border);
}
.card-image-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.6s;
}
.process-card:hover .card-image-box img {
    transform: scale(1.05);
}
.card-btn {
    width: 100%;
    min-height: 48px;
    padding: 12px;
    border-radius: var(--radius-999);
    background: var(--gold);
    color: var(--white-warm);
    border: none;
    cursor: pointer;
    margin-top: auto;
    transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    box-shadow: var(--shadow-gold);
    font-family: var(--font-body);
}
.card-btn:hover,
.card-btn:focus-visible {
    background: var(--gold-rich);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px var(--gold-glow);
}

/* =============================================
   4. 信徒回饋（暖米帶＋跑馬燈——見證緊跟辦理動線之後）
   ============================================= */
.feedback-section {
    background: var(--cream-warm);
    padding: clamp(96px, 11vw, 150px) 0;
    border-top: 1px solid var(--gold-line);
    border-bottom: 1px solid var(--gold-line);
    overflow: hidden;
    position: relative;
}
.feedback-section::before,
.feedback-section::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 3;
    pointer-events: none;
}
.feedback-section::before {
    left: 0;
    background: linear-gradient(to right, var(--cream-warm), transparent);
}
.feedback-section::after {
    right: 0;
    background: linear-gradient(to left, var(--cream-warm), transparent);
}
.marquee-wrapper {
    display: flex;
    width: 100%;
    position: relative;
    margin-top: 30px;
}
.marquee-track {
    display: flex;
    gap: 24px;
    animation: scrollLeft 140s linear infinite;
    width: max-content;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.marquee-loading {
    padding: 20px;
    color: var(--ink-gray);
}
.feedback-card {
    width: 320px;
    background: var(--cream-panel);
    padding: 26px 24px;
    border-radius: var(--radius-14);
    border: 1px solid var(--gold-border);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-card);
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.feedback-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--c-196-137-69-a34);
}
.fb-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--gold-border);
}
.fb-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: var(--white-warm);
    background: var(--gold);
    flex-shrink: 0;
    font-size: 1.1rem;
    box-shadow: 0 3px 8px var(--c-196-137-69-a30);
}
.fb-name { font-weight: 700; color: var(--ink); font-size: 1rem; }
.fb-cat { color: var(--ink-gray); font-size: 0.85rem; }
.fb-content {
    font-size: 0.95rem;
    color: var(--ink-soft);
    line-height: 1.8;
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.fb-link {
    text-align: center;
    margin-top: 30px;
}
.fb-link a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--gold-rich);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid var(--gold);
    transition: color 0.3s, border-color 0.3s;
}
.fb-link a:hover,
.fb-link a:focus-visible {
    color: var(--gold-deep);
    border-color: var(--gold-deep);
}

/* =============================================
   5. 捐香 CTA（收尾護持帶：雙金線＋深一階暖底，不再放煙火漸層）
   ============================================= */
.donation-promo-section {
    background: linear-gradient(to bottom, var(--c-fffcf5), var(--cream-deep));
    border-top: 4px double var(--gold);
    padding: clamp(96px, 11vw, 150px) 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.donation-promo-content { max-width: 800px; margin: 0 auto; position: relative; z-index: 1; }
/* height: auto 是必要的，不是裝飾。responsive_image macro 一律吐 intrinsic
   width/height 屬性（CLS 用）；屬性＝presentational hint，會被作者 CSS 的 width
   蓋掉，但沒人寫 height → height 屬性 2627 生效 → 實測 90x2627（object-fit
   預設 fill）＝ owner 說的「垂直拉成狹長長條」。凡 macro 圖只鎖單邊尺寸，
   另一邊必須 auto（或給 aspect-ratio / object-fit）。
   守門：tests/test_image_dimension_attrs.py */
.donation-icon {
    width: 90px;
    height: auto;
    margin-bottom: 24px;
    filter: drop-shadow(0 6px 10px var(--c-196-137-69-a30));
}
.donation-promo-desc {
    max-width: 34em;
    color: var(--ink-soft);
    font-size: 1.125rem;
    line-height: 1.95;
    margin: 24px auto 40px;
    letter-spacing: 0.02em;
}

/* 主行動鈕：實心廟金（去鍍金三段漸層＋去自動掃光——金光只在 hover 回應） */
.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 46px;
    font-size: 1.25rem;
    font-weight: 700;
    background: var(--gold);
    color: var(--white-warm);
    text-decoration: none;
    border-radius: var(--radius-999);
    box-shadow: var(--shadow-gold);
    transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    letter-spacing: 0.08em;
}
.btn-action:hover,
.btn-action:focus-visible {
    background: var(--gold-rich);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px var(--gold-glow-strong);
}
.btn-action--compact {
    font-size: 1.05rem;
    padding: 12px 32px;
}

/* =============================================
   Modal（本頁遺留元件；shoujing_page flag 開啟後整組退場）
   ============================================= */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--c-black-a60);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s;
    padding: 20px;
}
.modal-overlay.show { display: flex; opacity: 1; }
.modal-box {
    background: var(--cream-panel);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: var(--radius-md);
    padding: 32px;
    position: relative;
    box-shadow: var(--shadow-md);
    transform: scale(0.95);
    transition: transform 0.3s var(--ease-out);
    border: 1px solid var(--gold-border);
}
.modal-overlay.show .modal-box { transform: scale(1); }
.modal-close {
    position: absolute;
    top: 14px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--cream-warm);
    font-size: 1.375rem;
    cursor: pointer;
    color: var(--ink-soft);
    transition: background 0.3s, color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}
.modal-close:hover,
.modal-close:focus-visible {
    background: var(--gold);
    color: var(--white-warm);
}
.modal-title {
    font-family: var(--font-brand);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gold-deep);
    margin: 0 0 24px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--gold);
    letter-spacing: 0.14em;
}
.modal-body {
    font-size: 1rem;
    color: var(--ink-soft);
    line-height: 1.9;
}
.modal-body h3, .modal-body h4 {
    color: var(--gold-deep);
    font-family: var(--font-brand);
    margin: 20px 0 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.modal-body ul, .modal-body ol { padding-left: 24px; margin-bottom: 15px; }
.modal-body li { margin-bottom: 8px; }

/* 收件資訊卡（原模板 inline style 收斂進 CSS） */
.modal-callout {
    background: var(--cream-warm);
    padding: 18px;
    border-radius: var(--radius-12);
    border: 1px solid var(--gold-border);
}
.modal-callout + .modal-callout { margin-top: 20px; }
.modal-callout h4 { margin-top: 0; }
.modal-callout ul { margin-bottom: 0; }

.modal-alert {
    background: var(--gold-pale);
    color: var(--cta-red);
    padding: 12px 16px;
    border-radius: var(--radius-8);
    font-weight: bold;
}

.modal-cta {
    text-align: center;
    margin-top: 30px;
    border-top: 1px dashed var(--c-196-137-69-a45);
    padding-top: 22px;
}
.modal-cta__ask {
    font-weight: bold;
    color: var(--ink);
}

.red-paper-visual {
    background: var(--cta-red);
    color: var(--c-000);
    width: 240px;
    height: 320px;
    margin: 36px auto;
    padding: 28px;
    box-sizing: border-box;
    box-shadow: 5px 5px 15px var(--c-196-137-69-a20);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: var(--font-body);
    font-size: 1.05rem;
    text-align: center;
    position: relative;
    border-radius: var(--radius-2);
}
.red-paper-date { position: absolute; top: 10px; left: 10px; font-size: 0.85rem; writing-mode: vertical-rl; }
.red-paper-content { display: flex; flex-direction: column; gap: 8px; justify-content: center; height: 100%; }
.red-paper-row { border-bottom: 1px dashed var(--c-black-a30); padding-bottom: 3px; }

/* =============================================
   RWD
   ============================================= */
@media (max-width: 768px) {
    .service-hero { min-height: 60vh; }
    .hero-title { font-size: 2rem; letter-spacing: 0.1em; }
    .hero-nav {
        flex-direction: column;
        width: 82%;
        margin: 0 auto;
        gap: 12px;
    }
    .nav-anchor { width: 100%; }

    .svc-info {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 6px;
        margin: 14px 16px 0;
        max-width: none;
        padding: 16px;
    }
    .svc-info__fact { justify-content: center; }
    .svc-info__line { margin-top: 6px; }

    .service-finder__grid { grid-template-columns: 1fr; }
    .service-finder__filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .service-finder__filter { flex: 0 0 auto; }

    .gongtan-section {
        flex-direction: column;
        gap: 40px;
    }
    .gongtan-content .yuanbao-header { justify-content: center; }
    .gongtan-content .header-subtitle { text-align: center; }
    .gongtan-img-box { min-height: 320px; }
    .feedback-card { width: 280px; }
    /* 手機三張流程卡＝分頁式輪播（owner 2026-07-15 P1 驗收）。
       原本 `min-width: 85%` 只給寬度「下限」、不給寬度：flex-basis 仍是 auto，
       加上 flex-shrink:0 → 卡片寬度改由內容（圖片自然寬 864px）決定。390px 實測
       三張卡各寬 920/823/576px，而捲動容器只有 350px：文字被推出可視範圍，
       且卡片比容器還寬時 scroll-snap 對齊點形同虛設＝owner 說的「停在兩張之間」。
       改 flex: 0 0 85% + min-width: 0 → 寬度由容器決定，本來就在的 snap 才真的會對齊整張。 */
    .process-card-container {
        display: flex;
        overflow-x: auto;
        /* SCR1 第二條縱向捲軸真兇（2026-07-18 實機 DOM 定位）：overflow-x:auto 依 CSS 規範把
           overflow-y 的 visible 升級成 auto，而橫向捲軸厚度吃掉容器高度 → 內容比 clientHeight
           高出剛好一條捲軸厚（實測 516 vs 506px）＝卡片區自己長出垂直捲軸。
           明定 hidden：容器高度是 auto（隨最高卡片長高，A++ 不裁內容），只擋捲軸假溢出。 */
        overflow-y: hidden;
        /* 200% 實測：橫捲軸厚度(10px)會從容器高度偷走、裁到卡片底邊。觸控輪播不需要
           可見捲軸（下一張卡露出 15%＝滑動線索），隱藏之＝任何字級零裁切。 */
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        padding-bottom: 20px;
        gap: 16px;
        grid-template-columns: none;
        /* 橫向捲動吃掉手勢，避免撥到底時觸發瀏覽器上一頁 */
        overscroll-behavior-x: contain;
    }

    .process-card-container::-webkit-scrollbar {
        /* 同上：WebKit 系（iPhone Safari）隱藏橫捲軸，高度不被偷 */
        display: none;
    }
    .process-card {
        flex: 0 0 85%;
        min-width: 0;
        scroll-snap-align: center;
        /* owner：「左右撥動一次就跳到完整的上一張／下一張」＝不准一次飛過多張 */
        scroll-snap-stop: always;
    }
    /* 圖片比例（owner：可裁切但不可拉伸變形）。卡片寬度失控時 img 盒被撐成
       864x178＝比例 4.85（自然比例 0.91）。給定寬高把盒釘死＝容器大小，像素比例
       交給 object-fit，Safari/Chrome 都不會再自己推算而拉伸。
       維持 contain 而非 cover：card1 是去背 PNG（衣服剪影浮在 --cream-warm 底上），
       cover 會裁掉領子與下襬；contain 已滿足「不可拉伸變形」的硬條件。 */
    .card-image-box img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    /* 規則卡：390px 下留白收窄，條列文字不被擠成一字一行 */
    .clothes-rules {
        margin-top: 32px;
        padding: 22px 18px;
    }
    .clothes-rules__list { padding-left: 1.2em; font-size: 1rem; }
    .btn-action { padding: 12px 34px; font-size: 1.1rem; }
    .modal-box { padding: 24px 20px; }
}