/* index 頁面樣式 — 自 templates/index.html 逐字抽離（P10）。 */

/* === Page Shell === */
.temple-index {
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
    line-height: 1.8;
    overflow: hidden;
}

/* .visually-hidden 已移至 components.css（base.html 全站載入）＝全站可用的單一真相。
   留在這裡只有 index 能用，別頁寫了不會生效。見 components.css 的說明。 */

/* === Scroll Reveal === */
/* R8 critique P1：掛 html.js 閘（同 hero 動畫慣例）——JS 沒載入時內容必須直接可見，
   否則 index.js 失效＝hero 以下整頁永久 opacity:0。 */
html.js .reveal {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}
html.js .reveal.active { opacity: 1; transform: translateY(0); }

/* === Section Headings === */
.section-heading {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    margin-bottom: 40px;
    position: relative;
}
.section-heading h2,
.section-heading h3 {
    font-family: var(--font-brand);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: 0.14em;
    line-height: 1.3;
}
.section-heading .yuanbao-icon { width: 42px; height: auto; }
.section-heading::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    border-radius: var(--radius-2);
}

/* === Gold Divider === */
.gold-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 auto;
    max-width: 300px;
    padding: 8px 0;
    color: var(--gold);
    opacity: 0.5;
}
.gold-divider::before,
.gold-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.gold-divider span { font-size: 0.9rem; letter-spacing: 6px; }

/* =============================================
   HERO（R7 h2）— 圖右移＋左側漸層遮罩＋左側直式導覽
   ============================================= */
.hero-section {
    position: relative;
    width: 100%;
    max-width: none;
    aspect-ratio: 1942 / 809;
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    border-radius: 0;
    background: var(--cream-warm);
}
.hero-media {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.hero-media picture {
    display: block;
    width: 100%;
    height: 100%;
}
/* R10 拆字版：hero_scene 本身左散景右神尊（字已拆成 HTML 層），
   不再需要 R7 的 112% 位移＋crown-safe translateX hack——整套退役。 */
.hero-section .hero-media img.responsive-banner {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
/* 左側漸層遮罩：深色→透明（非不透明大黑塊）。窄一點（原 560 → 480）＝金字所在的
   中段更快轉亮、「煙」不被壓黑；最左最暗處仍夠深、承載導覽文字對比。 */
.hero-mask {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(36vw, 480px);
    background: linear-gradient(90deg, var(--hero-mask-dark) 0%, transparent 100%);
    pointer-events: none;
}
/* 左側直式導覽：深色半透明近無底、金細分隔線、米白字；hover＝金線展開＋右移 4-6px（不整格變亮黃） */
.hero-side-nav {
    position: absolute;
    /* 更靠左（貼進左漸層遮罩最暗處）＋更窄：把導覽收進最左暗帶，讓出「煙」字空間。
       原 left 24-68／width 220-280 → left 10-22／width 158-192。 */
    left: clamp(10px, 1.2vw, 22px);
    top: 50%;
    transform: translateY(-50%);
    width: clamp(158px, 12vw, 192px);
    font-size: clamp(16px, 1.15vw, 17px);   /* hero-section font-size:0 → 此處重設 */
    line-height: 1.4;
    text-align: left;
    z-index: 2;
    max-height: 88%;
    overflow-y: auto;
    scrollbar-width: none;           /* 項目超出 hero 高（多旗標環境）時可捲、不破版 */
}
.hero-side-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.hero-side-nav li {
    border-bottom: 1px solid var(--c-231-201-133-a18);   /* 金色細分隔線 */
}
.hero-side-nav li a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: clamp(46px, 3.6vw, 52px);
    padding: 0 6px;
    color: var(--cta-cream);
    text-decoration: none;
    letter-spacing: 0.08em;
    transition: transform .25s var(--ease-out), color .25s var(--ease-out);
}
.hero-side-nav li a::before {
    content: '◆';
    flex: none;
    font-size: 0.55em;
    color: var(--cta-gold);
    opacity: 0.85;
}
/* hover：底部金線由左向右展開 */
.hero-side-nav li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 1px;
    background: var(--cta-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .3s var(--ease-out);
}
.hero-side-nav li a:hover,
.hero-side-nav li a:focus-visible {
    transform: translateX(5px);
    color: var(--cta-gold);
}
.hero-side-nav li a:hover::after,
.hero-side-nav li a:focus-visible::after { transform: scaleX(1); }

/* =============================================
   R10 — Hero 金字文字層（拆字版）
   原本烙在圖裡的「桃城承天中承府／煙島中壇元帥／tagline」拆成 HTML：
   Google 讀得到、可入場動畫、換廟改 site config 免重繪主圖。
   ============================================= */
.hero-title {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* 桌機（≥1280 有側導覽）：讓出側導覽後落在散景帶上 */
    left: clamp(235px, 20vw, 320px);
    max-width: min(46%, 560px);
    z-index: 2;
    font-size: 1rem;            /* hero-section font-size:0 → 重設基準（rem＝長輩放大鈕可縮放金字） */
    line-height: 1.35;
    text-align: left;
    pointer-events: none;       /* 純展示，不擋 hero 點擊/側導覽 */
}
.hero-title__kicker {
    margin: 0 0 0.6em;
    font-size: clamp(0.85rem, 1.3vw, 1.05rem);
    font-weight: 700;
    letter-spacing: 0.42em;
    color: var(--cta-gold);
}
.hero-title__main {
    margin: 0;
    font-family: var(--font-brand);
    font-size: clamp(2.2rem, 5.5vw, 4.6rem);
    font-weight: 900;
    letter-spacing: 0.14em;
    line-height: 1.15;
    color: var(--gold-bright);
    text-shadow: 0 2px 6px var(--c-black-a55), 0 0 28px var(--gold-glow-strong);
    text-wrap: balance;
}
.hero-title__tagline {
    margin: 0.9em 0 0;
    font-size: clamp(0.8rem, 1.2vw, 0.98rem);
    letter-spacing: 0.2em;
    color: var(--cta-cream);
    opacity: 0.92;
    text-shadow: 0 1px 4px var(--c-black-a60);
}
@media (max-width: 1279.98px) {
    /* 側導覽收起後靠左；全景圖左半＝散景帶，字直接壓上 */
    .hero-title { left: clamp(20px, 6vw, 56px); max-width: 60%; }
}

/* 金字入場（接在既有 hero 編排之後：mask 0.15s→nav 0.6s→金字 0.45-1.1s） */
html.js.home-nav .hero-title__kicker { animation: heroTextIn 0.55s var(--ease-out) 0.45s both; }
html.js.home-nav .hero-title__main   { animation: heroTitleIn 0.8s var(--ease-out) 0.6s both; }
html.js.home-nav .hero-title__tagline { animation: heroTextIn 0.55s var(--ease-out) 1.05s both; }
@keyframes heroTextIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroTitleIn {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =============================================
   R7 h4 — Hero 進場動畫（純 CSS keyframes）
   由 nav-init.js 於首繪前掛 html.js（＋首頁 html.home-nav）觸發；
   JS 掛掉＝無 .js＝下列初始隱藏／動畫不生效、SSR 最終態直接可見（無障礙備援）。
   只動 transform/opacity/clip-path，總長約 1.5s，無粒子/掃光/彈跳。
   ============================================= */
html.js.home-nav .hero-media {
    animation: heroReveal 1.3s var(--ease-out) both;
}
@keyframes heroReveal {
    from { opacity: 0.82; transform: scale(1.04); }
    to   { opacity: 1;    transform: scale(1); }
}
/* 左暗幕：左→右揭開（scaleX 0→1，origin 左） */
html.js.home-nav .hero-mask {
    transform-origin: left center;
    animation: maskWipe 0.65s var(--ease-out) 0.15s both;
}
@keyframes maskWipe {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
/* 導覽整列（等同「導覽標題」）：x:-24→0（動內層 ul，避免與換導覽時容器淡出相衝） */
html.js.home-nav .hero-side-nav ul {
    animation: navTitleIn 0.5s var(--ease-out) 0.45s both;
}
@keyframes navTitleIn {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}
/* 選單項 stagger 0.06s、無彈跳（x:-14→0 + 淡入） */
html.js.home-nav .hero-side-nav li {
    animation: navItemIn 0.45s var(--ease-out) both;
}
@keyframes navItemIn {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: translateX(0); }
}
html.js.home-nav .hero-side-nav li:nth-child(1) { animation-delay: 0.60s; }
html.js.home-nav .hero-side-nav li:nth-child(2) { animation-delay: 0.66s; }
html.js.home-nav .hero-side-nav li:nth-child(3) { animation-delay: 0.72s; }
html.js.home-nav .hero-side-nav li:nth-child(4) { animation-delay: 0.78s; }
html.js.home-nav .hero-side-nav li:nth-child(5) { animation-delay: 0.84s; }
html.js.home-nav .hero-side-nav li:nth-child(6) { animation-delay: 0.90s; }
html.js.home-nav .hero-side-nav li:nth-child(7) { animation-delay: 0.96s; }
html.js.home-nav .hero-side-nav li:nth-child(8) { animation-delay: 1.02s; }
html.js.home-nav .hero-side-nav li:nth-child(9) { animation-delay: 1.08s; }
html.js.home-nav .hero-side-nav li:nth-child(n+10) { animation-delay: 1.14s; }
/* 消息卡：y:22→0（進場尾聲） */
html.js.home-nav .hero-news {
    animation: newsIn 0.6s var(--ease-out) 0.9s both;
}
@keyframes newsIn {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =============================================
   R7 h4 — 捲動換導覽（桌機 ≥1024）
   停在 Hero＝左側直式；捲過 Hero 約一半（.hero-passed）＝左側淡出、頂部 Header 淡入下滑。
   兩者不同時顯示（解決 h1-h3 兩導覽並存）。html.home-nav 早掛＝首繪即 fixed、無版位跳動。
   採淡入淡出+下滑備案（不用 GSAP Flip）。<1280 不套用：側導覽已收起（見下方 <1280 區塊），
   Header 維持既有 sticky（≥1024＝橫式、<1024＝漢堡）——故此處下限 1280，與側導覽收起點對齊，
   避免「Header 藏起＋側導覽又不在」的無導覽死角。
   ============================================= */
@media (min-width: 1280px) {
    /* 頂部 Header：改 fixed（脫離文件流→Hero 直達頂端），停在 Hero 時收於視窗上方隱藏 */
    html.js.home-nav .main-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        transform: translateY(-100%);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.5s var(--ease-out), opacity 0.4s var(--ease-out);
        will-change: transform;
    }
    /* 捲過 Hero 一半：頂部 Header 下滑＋淡入 */
    html.js.home-nav.hero-passed .main-header {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
    /* 左側直式導覽：停在 Hero 可見；捲過後淡出（不與頂部 Header 並存） */
    html.js.home-nav .hero-side-nav {
        transition: opacity 0.4s var(--ease-out), visibility 0.4s;
    }
    html.js.home-nav.hero-passed .hero-side-nav {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/* <1280（R7 殘留修）：原「≤1024 降位移＋導覽維持可見」在窄桌機/平板必蓋「煙」字冠飾——
   冠飾起筆在圖左緣 3.4% 處，左側不露白的前提下右移極限僅 ~0.034×圖寬（<1280 時 ≤48px），
   而側導覽含文字寬 ≥158px，任何位移/縮放都無解。→ 側導覽與遮罩收起點由 ≤768 提前到
   <1280，banner 不位移完整呈現；導覽由頂部 sticky header 承擔（≥1024＝橫式選單、
   <1024＝Logo＋漢堡）。1280 整點起維持 owner 已驗收的桌機側導覽版型不動。 */
@media (max-width: 1279.98px) {
    .hero-section .hero-media img.responsive-banner {
        position: static;
        width: 100%;
        transform: none;
        object-position: center center;   /* 平板/手機不沿用桌機位移 */
    }
    .hero-mask,
    .hero-side-nav { display: none; }
}

/* =============================================
   ABOUT
   ============================================= */
.about-section {
    padding: 96px 20px 90px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(231, 201, 133, 0.16), transparent 42%),
        var(--cream);
}

/* owner 2026-07-17 回饋 F1.4：關於帥府「影片點選」移除 → .video-wrap / .video-poster /
   .video-play-icon（含 gallery-rise 前的整組影片樣式）已無 caller，一併移除。 */

/* owner 2026-07-17 回饋 F1.5：文字與照片併排兩列（.about-cols；手機直疊），照片改逐張輪播
   （.about-gallery，fade）。原 .gallery-grid 3x3 照片牆（及 R11 橫捲改版）已無 caller，移除。 */
.about-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    max-width: var(--content-width);
    margin: 0 auto;
}
/* 照片輪播框：固定比例窗，堆疊 fade（沿用 /services 公壇 .carousel-img 套路）。 */
.about-gallery {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--gold-border);
    box-shadow: var(--shadow-md);
    background: var(--cream-warm);
}
.about-gallery__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.9s var(--ease-out);
}
/* 首張由 SSR 掛 .is-active＝JS 掛掉也看得到第一張（無 JS 備援）。 */
.about-gallery__slide.is-active { opacity: 1; }
.about-gallery__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: sepia(0.07) saturate(0.94) contrast(1.02) brightness(1.02);
}
/* 兩列版：故事文字靠左對齊（單欄長卷才置中）。 */
.about-cols .temple-prose {
    max-width: none;
    margin: 0;
    text-align: left;
}
/* F1.4 由來金鈕與敘事段落間距。 */
.about-origin-more { margin-top: 26px; }

/* Temple Description */
.temple-prose {
    max-width: 760px;
    margin: 0 auto 45px;
    text-align: center;
}
.temple-prose p {
    font-size: 1.08rem;
    line-height: 2.18;
    color: var(--ink-soft);
    margin-bottom: 10px;
}
.temple-prose .deity-label {
    margin-top: 22px;
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--gold);
    letter-spacing: 2px;
    display: inline-block;
}
.temple-prose .deity-label::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-pale), transparent);
    margin-top: 4px;
}

/* =============================================
   DEITY CAROUSEL — 放大照片
   ============================================= */
.deity-carousel-wrap {
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
}

.deity-grid-track {
    --deity-gap: 24px;
    display: flex;
    gap: 0;
    width: max-content;
    padding: 10px 0 24px;
    animation: deity-marquee 58s linear infinite;
    will-change: transform;
}
/* 手機點卡＝觸發 hover 態→暫停輪播（既有行為保留）；鍵盤 focus 亦暫停（可讀可選）。 */
.deity-grid-track:hover,
.deity-grid-track:focus-within { animation-play-state: paused; }

.deity-carousel-set {
    display: flex;
    flex: 0 0 auto;
    gap: var(--deity-gap);
    padding-right: var(--deity-gap);
}

@keyframes deity-marquee {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

.deity-card {
    flex-shrink: 0;
    width: 185px;
    text-align: center;
    transition: transform 0.3s ease;
}
.deity-card:hover { transform: translateY(-5px); }
/* owner 2026-07-17 F2.6：點卡片彈神明介紹（index.js）→ 卡片可點；role=button 的卡有鍵盤焦點框。 */
.deity-card[role="button"] { cursor: pointer; }
.deity-card[role="button"]:focus-visible {
    outline: 2px solid var(--gold-deep);
    outline-offset: 4px;
    border-radius: var(--radius-12);
}
/* R5-3：神尊頁開啟且該尊有 slug 時，卡片內容包連結（flag deity_pages 關＝不輸出此 <a>）。 */
.deity-card-link { display: block; text-decoration: none; color: inherit; }

.deity-card img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: var(--radius-full);
    border: 3px solid var(--cream-deep);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.deity-card:hover img {
    border-color: var(--gold);
    box-shadow: 0 4px 18px var(--gold-glow);
}

.deity-info { margin-top: 12px; }
.deity-info .temple-name {
    font-family: var(--font-body);
    font-size: 0.82rem;
    color: var(--ink-gray);
    margin: 0;
}
.deity-info .deity-name {
    font-family: var(--font-brand);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
    margin: 3px 0 0;
}

/* =============================================
   SERVICES
   ============================================= */
/* H5a／H5b（owner 2026-07-15 回饋總表 1.9／1.8）：「帥府商城」與「參與帥府」兩區已自
   首頁刪除，本區原有的 .services-section / .services-grid / .service-item / .service-bg /
   .service-overlay / .service-buttons 全部隨之無 caller（index.css 只有 index.html 載入）
   → 一併移除，不留死樣式。
   ⚠️ style.css 亦有同名的 .services-section / .services-grid / .service-item / .service-image
   規則，同樣已無 caller，但那是全站樣式表、且早在本次之前就被 index.css 蓋掉＝獨立清理。 */
.btn-grid-2x2 {
    display: flex; flex-direction: column;
    gap: 8px; max-width: 260px; width: 100%;
}

@keyframes gold-breathe {
    0%, 100% { box-shadow: 0 2px 10px rgba(196,137,69,0.1); }
    50% { box-shadow: 0 2px 20px var(--c-196-137-69-a35); }
}

/* owner 2026-07-17 回饋 F1.3／F1.4：首頁金鈕統一為 .btn-action（金色實心 pill，
   與 /services 同一顆金色家族）。原白色 .glow-btn（信徒回饋「看更多」鈕）已無 caller，移除。
   ⚠️ .btn-action 是頁級元件（services/fund/committee 各自定義）＝非全站 token 元件；
   首頁在此比照 services.css 逐項用 token 重述同一顆（外觀一致、零硬編色）。 */
.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);
}

/* =============================================
   DECLARATION
   ============================================= */
.declaration-section {
    padding: 92px 20px 104px;
    background: var(--cream);
}

.declaration-card {
    display: flex;
    align-items: center;
    gap: 28px;
    max-width: 820px;
    margin: 0 auto;
    background: rgba(255, 253, 248, 0.82);
    border-radius: var(--radius-lg);
    padding: 42px 44px;
    border: 1px solid var(--gold-border);
    box-shadow: 0 18px 50px rgba(42, 26, 10, 0.075);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* 金色角落裝飾 */
.declaration-card::before,
.declaration-card::after {
    content: '';
    position: absolute;
    width: 50px; height: 50px;
    border: 1px solid var(--gold-pale);
    opacity: 0.42;
}
.declaration-card::before {
    top: 12px; left: 12px;
    border-right: none; border-bottom: none;
    border-radius: var(--radius-4) 0 0 0;
}
.declaration-card::after {
    bottom: 12px; right: 12px;
    border-left: none; border-top: none;
    border-radius: 0 0 var(--radius-4) 0;
}

.declaration-text { flex: 1; }
.declaration-text ol {
    list-style: none; padding: 0; margin: 0; counter-reset: decl;
}
.declaration-text ol li {
    counter-increment: decl;
    position: relative;
    padding-left: 40px;
    margin-bottom: 20px;
    font-size: 1.02rem;
    line-height: 2.08;
    color: var(--ink-soft);
}
.declaration-text ol li:last-child { margin-bottom: 0; }
.declaration-text ol li::before {
    content: counter(decl);
    position: absolute; left: 0; top: 3px;
    width: 26px; height: 26px;
    background: var(--gold); color: var(--white);
    border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-body); font-size: 0.8rem; font-weight: 700;
}

/* （H6：.declaration-avatar 已退役——聲明區靜態 avatar 改為右下角 .pet-widget 電子寵物，
    無任何模板再吐這個 class；樣式見本檔末「H6 電子寵物」段。） */

/* =============================================
   RWD
   ============================================= */
@media (prefers-reduced-motion: reduce) {
    .hero-section .responsive-banner,
    .deity-grid-track {
        animation: none;
    }
    /* R8 critique P1：reveal 對減動作使用者直接顯示最終態（無位移、無過場）。 */
    html.js .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .deity-grid-track { transform: translate3d(0, 0, 0); }
    /* F1.5：減動作＝關於相簿不淡入淡出過場（JS 亦不自動換片，首張恆亮）。 */
    .about-gallery__slide { transition: none; }
    /* R7 h4：進場動畫（heroReveal/maskWipe/navTitleIn/navItemIn/newsIn）一律關閉，
       直接顯示最終態；捲動換導覽仍切換（class 切換），但不做過場動畫（transition 立即）。 */
    html.js.home-nav .hero-media,
    html.js.home-nav .hero-mask,
    html.js.home-nav .hero-side-nav ul,
    html.js.home-nav .hero-side-nav li,
    html.js.home-nav .hero-news,
    html.js.home-nav .hero-title__kicker,
    html.js.home-nav .hero-title__main,
    html.js.home-nav .hero-title__tagline {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
    html.js.home-nav .hero-mask { transform-origin: left center; }
    html.js.home-nav .main-header,
    html.js.home-nav .hero-side-nav {
        transition: none !important;
    }
}


@media (max-width: 768px) {
    .section-heading h2,
    .section-heading h3 { font-size: 2rem; }
    .section-heading .yuanbao-icon { width: 32px; }

    /* F1.5：手機關於區兩列改直疊（相簿在上、故事文字在下，依 DOM 順序）。 */
    .about-cols { grid-template-columns: 1fr; gap: 28px; }

    /* R8 critique P2＋R10 拆字版：手機 hero 4:3 直裁。hero_scene 神尊在右（約 63-96%），
       object-position 72% 讓神尊完整入鏡、左側保留散景帶給金字。 */
    .hero-section { aspect-ratio: 4 / 3; }
    /* 選擇器須壓過 <1280 區塊的 .hero-section .hero-media img.responsive-banner（0,3,1） */
    .hero-section .hero-media img.responsive-banner { object-fit: cover; object-position: 72% center; }
    /* 手機遮罩回歸（<1280 收掉的是 R7 桌機遮罩）：左緣柔和壓暗，保金字對比 */
    .hero-mask {
        display: block;
        width: min(66vw, 300px);
        background: linear-gradient(90deg, var(--c-13-7-3-a72) 0%, transparent 100%);
    }
    .hero-title { max-width: 72%; }
    .deity-grid-track { --deity-gap: 18px; animation-duration: 46s; }
    .deity-card { width: 150px; }
    .deity-card img { width: 130px; height: 130px; }

    .declaration-card {
        flex-direction: column; text-align: center;
        padding: 30px 24px; gap: 20px;
    }
    .declaration-text ol li { text-align: left; font-size: 0.95rem; }
}

@media (max-width: 480px) {
    .section-heading h2,
    .section-heading h3 { font-size: 1.7rem; letter-spacing: 1px; }
    .deity-grid-track { --deity-gap: 14px; }
    .deity-card { width: 130px; }
    .deity-card img { width: 115px; height: 115px; }
}

/* === Hero 底部單則主打消息卡（R7 h3）=== */
/* 桌機高 76-88px、標題 ≥17px bold；輕微上疊 Hero 底緣（不遮神像／金字＝居中窄卡）。 */
.hero-news {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: min(920px, calc(100% - 32px));
    min-height: 80px;
    margin: -44px auto 0;
    padding: 14px 22px;
    position: relative;
    z-index: 3;
    background: var(--hero-mask-dark);
    color: var(--cta-cream);
    border: 1px solid var(--c-231-201-133-a18);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}
.hero-news__label {
    flex: none;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--cta-gold);
    border: 1px solid var(--c-231-201-133-a18);
    border-radius: var(--radius-999);
    padding: 4px 12px;
    white-space: nowrap;
}
.hero-news__items {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
}
.hero-news__item {
    grid-area: 1 / 1;
    display: flex;
    align-items: baseline;
    gap: 14px;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .55s var(--ease-out), visibility .55s;
}
.hero-news__item.is-active { opacity: 1; visibility: visible; }
.hero-news__date {
    flex: none;
    font-size: 0.85rem;
    opacity: 0.75;
    white-space: nowrap;
}
.hero-news__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.08rem;              /* ≥17px bold */
    font-weight: 700;
    color: var(--cta-cream);
    text-decoration: none;
}
.hero-news__title:hover,
.hero-news__title:focus-visible { color: var(--cta-gold); }
.hero-news__cta {
    flex: none;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--cta-gold);
    text-decoration: none;
    white-space: nowrap;
}
.hero-news__cta:hover,
.hero-news__cta:focus-visible { text-decoration: underline; }
.hero-news__controls { flex: none; display: flex; gap: 6px; }
.hero-news__btn {
    width: 44px;    /* R8 critique P1：觸控目標 ≥44px（受眾=老花手指） */
    height: 44px;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--cta-cream);
    background: transparent;
    border: 1px solid var(--c-231-201-133-a18);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.hero-news__btn:hover,
.hero-news__btn:focus-visible { color: var(--cta-gold); border-color: var(--cta-gold); }
.hero-news__all {
    flex: none;
    font-size: 0.82rem;
    color: var(--cta-cream);
    opacity: 0.8;
    text-decoration: none;
    white-space: nowrap;
}
.hero-news__all:hover,
.hero-news__all:focus-visible { opacity: 1; text-decoration: underline; }

@media (max-width: 768px) {
    .hero-news {
        flex-wrap: wrap;
        gap: 8px 12px;
        min-height: 0;
        margin: 12px 16px 0;         /* 手機不上疊（hero 矮，避免蓋圖） */
        max-width: none;
        padding: 12px 16px;
    }
    .hero-news__item { flex-wrap: wrap; gap: 4px 12px; }
    .hero-news__title { white-space: normal; font-size: 1.02rem; }
    .hero-news__cta { display: none; }   /* 手機以標題連結承擔（點擊區仍 ≥44px 卡面） */
}

/* === 問事資訊帶（R8 critique P0）=== */
/* GSC 三大意圖（時間/地址/LINE）首屏作答；LINE 鈕=金主鈕（金是行動色），觸控 ≥48px。 */
.home-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 28px;
    max-width: min(920px, calc(100% - 32px));
    margin: 14px auto 0;
    padding: 14px 22px;
    background: var(--cream-panel, #fffdf8);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.home-info__fact {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    font-size: 1.05rem;
    color: var(--ink);
    text-decoration: none;
}
.home-info__k {
    flex: none;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--gold-rich);
}
.home-info__map { padding: 8px 0; }   /* 觸控高度補到 ≥44px（含行高） */
.home-info__map:hover,
.home-info__map:focus-visible { color: var(--gold-rich); text-decoration: underline; }
.home-info__mapmark { color: var(--gold-rich); }
/* LINE 主鈕版位（T5 綠金規則）：外觀＝components.css .btn-line 單一真相（綠底白字）。
   ⚠️ 本 class 只准放版位——頁面 CSS 在 components.css 之後載入，同權重會蓋掉綠底。
   flex:none＝資訊帶 flex 子項不被壓縮，必留。 */
.home-info__line {
    flex: none;
}
@media (max-width: 768px) {
    .home-info {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 6px;
        margin: 12px 16px 0;
        max-width: none;
        padding: 16px;
    }
    .home-info__fact { justify-content: center; }
    .home-info__line { margin-top: 6px; }
}

/* === 三大常用入口 CTA（R7）=== */
/* 桌機三張並排、高 150-190px、一卡一目標一按鈕；紅／暗紅／金／米白＋暗遮罩保字。 */
.home-cta {
    max-width: var(--content-width);
    margin: 28px auto 0;
    padding: 0 16px;
}
/* 標題改用共用 .section-heading（3.1 補元寶、3.2 砍商城連結）→ 原本本區專屬的
   .home-cta__head／.home-cta__title／.home-cta__shoplink 全部無 caller，已移除。
   .section-heading h2 的字級/字重/字色/字距與舊 .home-cta__title 逐字相同＝字體零變更。 */
.home-cta__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.home-cta__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-height: 170px;
    padding: 22px 24px;
    text-decoration: none;
    color: var(--cta-cream);
    border-radius: var(--radius-md);
    border: 1px solid var(--gold-line);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    isolation: isolate;
    transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
/* 卡底＝品牌漸層（紅／暗紅／金）＋暗遮罩保字：文字永遠壓在暗底上 → 對比足夠。 */
.home-cta__card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
}
.home-cta__card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    /* R10：底層改真實照片後右緣不再全透——亮照片上字也要穩過 AA */
    background: linear-gradient(120deg, var(--cta-scrim-strong) 0%, var(--cta-scrim) 62%, var(--c-black-a28) 100%);
}
.home-cta__card--consult::before {
    background: linear-gradient(135deg, var(--cta-red) 0%, var(--cta-red-deep) 100%);
}
.home-cta__card--calendar::before {
    background: linear-gradient(135deg, var(--cta-red-deep) 0%, var(--ink) 100%);
}
.home-cta__card--fund::before {
    background: linear-gradient(135deg, var(--cta-gold) 0%, var(--gold-deep) 100%);
}
.home-cta__card:hover,
.home-cta__card:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
/* R10 去色塊：卡底真實照片層（z 序：::before 漸層備援(-2，先畫) < img(-2，後畫) < ::after 暗遮罩(-1) < 文字） */
.home-cta__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform 0.5s var(--ease-out);
}
.home-cta__card:hover .home-cta__img,
.home-cta__card:focus-visible .home-cta__img { transform: scale(1.05); }
/* H2（owner 2026-07-15 回饋總表 3.3）：前兩張卡底圖換紅底卡通。卡通是直式 0.625（5:8）、
   卡片版位是橫式（桌機 ≈339×170＝1.99、手機 ≈358×128＝2.80）→ object-fit: cover 之下
   只看得到約 31%（桌機）／22%（手機）的圖高，預設 center 會把頭切掉。
   下列 Y 值＝實際模擬 cover 裁切後逐格挑出「頭完整入鏡」的落點（owner：「記得把卡通的
   頭列出來」）。兩張圖的頭高度不同所以值不同，不是隨手填的。
   ⚠️ 同名換檔換成頭部位置不同的圖，這兩個值要重調（沒有測試能替你看圖）。 */
.home-cta__card--consult .home-cta__img { object-position: center 35%; }   /* service_icon_1：戴冠童子，冠頂→肩 */
.home-cta__card--calendar .home-cta__img { object-position: center 45%; }  /* service_icon_2：旗袍持香人物，髮頂→下巴 */
.home-cta__card-title {
    font-family: var(--font-brand);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-shadow: 0 2px 10px var(--c-black-a40);
}
.home-cta__card-desc {
    font-size: 0.92rem;
    line-height: 1.6;
    opacity: 0.92;
    text-shadow: 0 1px 6px var(--c-black-a40);
}
.home-cta__card-btn {
    margin-top: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--cta-cream);
    transition: transform .25s var(--ease-out);
}
.home-cta__card:hover .home-cta__card-btn { transform: translateX(4px); }

@media (max-width: 768px) {
    .home-cta__grid { grid-template-columns: 1fr; gap: 12px; }
    .home-cta__card { min-height: 128px; padding: 18px 20px; }
    .home-cta__card-title { font-size: 1.25rem; }
}

/* === 府內供奉神明（R7 神明輪播獨立區塊）=== */
.deities-section {
    padding: 72px 20px 78px;
    background: var(--cream);
}

/* === 信徒回饋精選（R5-2；owner 2026-07-17 回饋 F1.3 改跑馬燈）=== */
.home-fb {
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px 16px 12px;
}
.home-fb__more { text-align: center; margin-top: 24px; }

/* 跑馬燈＝與 /services 同款元件（.marquee-wrapper/.marquee-track/.feedback-card）。
   ⚠️ services.css 的權威定義只在 /services 頁載入；首頁不載 services.css，故在此比照逐項
   用 token 重述同一組（外觀一致、零硬編色），並全部 scope 在 .home-fb 下避免污染。
   內容由 index.js 抓 /api/feedback/approved 後複製兩份 → translateX(-50%) 無縫輪播。 */
.home-fb .marquee-wrapper {
    display: flex;
    width: 100%;
    position: relative;
    margin-top: 30px;
    overflow: hidden;
}
.home-fb .marquee-track {
    display: flex;
    gap: 24px;
    animation: home-fb-marquee 140s linear infinite;
    width: max-content;
}
.home-fb .marquee-track:hover { animation-play-state: paused; }
@keyframes home-fb-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.home-fb .marquee-loading {
    padding: 20px;
    color: var(--ink-gray);
}
.home-fb .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);
}
.home-fb .feedback-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--c-196-137-69-a34);
}
.home-fb .fb-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--gold-border);
}
.home-fb .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);
}
.home-fb .fb-name { font-weight: 700; color: var(--ink); font-size: 1rem; }
.home-fb .fb-cat { color: var(--ink-gray); font-size: 0.85rem; }
.home-fb .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;
}
@media (prefers-reduced-motion: reduce) {
    .home-fb .marquee-track { animation: none !important; }
}

/* =============================================
   R9 「香火＋點燈」氛圍層（bolder/delight/animate/overdrive 合一）
   分工：香火只住第一屏（hero 餘燼+LINE 呼吸）；點燈只管第一屏以下
   （捲動時各區標題金線/元寶依序點亮）。全部尊重 reduced-motion。
   ============================================= */

/* — 香火：hero 餘燼 canvas（JS 驅動；此處只管定位與失效安全） — */
.hero-embers {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;               /* 圖與遮罩之上、消息卡(z:3)與側導覽之下 */
}

/* — 香火：LINE 主鈕呼吸光（延後 1.2s 起跑，先讓入場動畫說完話） —
   T5 綠金規則：鈕已改 LINE 官方綠，光暈同步由金改綠（綠底配金暈＝髒色）。
   :active 位移由 .btn-line 統一提供，此處不再重複宣告。 */
html.js .home-info__line {
    animation: r9-line-breathe 3.6s ease-in-out 1.2s infinite;
}
@keyframes r9-line-breathe {
    0%, 100% { box-shadow: 0 4px 14px var(--line-green-glow); }
    50%      { box-shadow: 0 4px 18px var(--line-green-glow-strong), 0 0 32px var(--line-green-glow-strong); }
}

/* — 動效編排：資訊帶入場（hero 之後 0.35s 升起） — */
html.js .home-info {
    animation: r9-band-rise 0.7s var(--ease-out) 0.35s both;
}
@keyframes r9-band-rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

/* — 動效編排：三大 CTA 卡錯落入場（--i 由模板餵，最長 3×80ms） — */
html.js .home-cta.reveal .home-cta__card {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 80ms);
}
html.js .home-cta.reveal.active .home-cta__card {
    opacity: 1;
    transform: none;
}

/* — 點燈：捲動驅動（新式 scroll-driven CSS；不支援的瀏覽器＝恆亮，零風險退回）。
     金線自中央展開、元寶由暗轉亮——「往內走，一盞一盞點起來」。 — */
@supports (animation-timeline: view()) {
    html.js .section-heading::after {
        animation: r9-underline-light linear both;
        animation-timeline: view();
        animation-range: entry 20% entry 85%;
    }
    html.js .section-heading .yuanbao-icon {
        animation: r9-yuanbao-light linear both;
        animation-timeline: view();
        animation-range: entry 20% entry 85%;
    }
}
@keyframes r9-underline-light {
    from { transform: translateX(-50%) scaleX(0); opacity: 0; }
    to   { transform: translateX(-50%) scaleX(1); opacity: 1; }
}
@keyframes r9-yuanbao-light {
    from { opacity: 0.25; filter: grayscale(0.7); }
    to   { opacity: 1; filter: none; }
}

/* — 記憶點：標題 hover 元寶微亮（桌機小驚喜，不搶戲） — */
.section-heading .yuanbao-icon {
    transition: filter 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.section-heading:hover .yuanbao-icon {
    filter: drop-shadow(0 0 6px var(--gold-bright));
    transform: translateY(-2px);
}

/* — reduced-motion：R9 全層直接顯示最終態（餘燼由 JS 端不啟動+此處雙保險） — */
@media (prefers-reduced-motion: reduce) {
    .hero-embers { display: none; }
    html.js .home-info,
    html.js .home-info__line,
    html.js .section-heading::after,
    html.js .section-heading .yuanbao-icon {
        animation: none;
    }
    html.js .home-cta.reveal .home-cta__card {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .section-heading .yuanbao-icon { transition: none; }
    .section-heading:hover .yuanbao-icon { transform: none; }
}

/* =============================================
   R11 「金漆濃」— 藝術總監重排（owner 拍板丙案）
   底色不換；版面改「一屏一事」長卷敘事：答題(hero+帶)→行動(CTA)→
   信任(滿版神明廳+見證)→故事(about)→結緣→參與→神明→聲明。
   ============================================= */

/* — 信任帶：滿版神明廳照＋一句話直球回答「可信嗎、要錢嗎」 — */
.home-trust {
    position: relative;
    overflow: hidden;
    min-height: clamp(320px, 42vw, 540px);
    display: flex;
    align-items: flex-end;
}
.home-trust picture,
.home-trust__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}
/* H3（owner 2026-07-15 回饋總表 1.1 ＋增量 4）：本區改「影片為底、字壓在上面」。
   比照 services.css 的 .video-background：iframe 撐到 100vw/100vh 再置中，靠 .home-trust
   的 overflow: hidden 裁掉溢出＝影片永遠鋪滿本區、不出黑邊（YouTube iframe 沒有
   object-fit，只能用「放大再裁」這招）。pointer-events: none＝影片不吃點擊，
   底下的字與 CTA 照常可點。
   黑底＝影片版專用（.home-trust--video）：opacity .66 是「壓暗影片」用的，它需要一層
   不透明黑在後面才會變暗——services.css 是靠 .service-hero 的 background: var(--c-000)。
   本區原本沒有底色（照片鋪滿所以不需要），照片版若也上黑底會在 lazy 載入前閃黑，故只給影片版。 */
.home-trust--video { background: var(--c-000); }
.home-trust__video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0.66;
    z-index: 0;
}
.home-trust__video iframe {
    width: 100%;
    height: 100%;
    border: 0;
}
.home-trust::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, var(--cta-scrim) 68%, var(--cta-scrim-strong) 100%);
}
.home-trust__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: clamp(120px, 18vw, 220px) 20px clamp(40px, 6vw, 68px);
    text-align: center;
    color: var(--cta-cream);
}
.home-trust__title {
    margin: 0 0 0.4em;
    font-family: var(--font-brand);
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    font-weight: 900;
    letter-spacing: 0.18em;
    color: var(--gold-bright);
    text-shadow: 0 2px 8px var(--c-black-a55);
    text-wrap: balance;
}
.home-trust__text {
    margin: 0 auto;
    max-width: 34em;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.9;
    text-shadow: 0 1px 4px var(--c-black-a60);
}
.home-trust__cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 0.9em;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cta-gold);
    text-decoration: none;
    border-bottom: 1px solid var(--cta-gold);
    transition: color .25s var(--ease-out), border-color .25s var(--ease-out);
}
.home-trust__cta:hover,
.home-trust__cta:focus-visible { color: var(--gold-bright); border-color: var(--gold-bright); }

/* — 一屏一事節奏：主要區塊上下留白拉開（H5a／H5b 後商城／參與區已不存在） — */
.home-fb,
.about-section,
.deities-section,
.declaration-section {
    padding-top: clamp(96px, 11vw, 150px);
    padding-bottom: clamp(96px, 11vw, 150px);
}

/* — 標題階升級：儀式大標更有份量（只升桌機；≤768 維持既有 2rem/1.7rem 降階，
     否則六字標題在 320-375px 會撐爆一行） — */
@media (min-width: 769px) {
    .section-heading h2,
    .section-heading h3 {
        font-size: clamp(2.5rem, 4vw, 3.25rem);
    }
}

/* — 講故事的字：prose 放大、行距鬆（F1.5 兩列版靠左，不再置中收窄——版位交由 .about-cols） — */
.about-section .temple-prose {
    font-size: 1.125rem;
    line-height: 1.95;
}
/* （F1.5：R11 的 .gallery-grid 橫捲大圖畫廊已無 caller，隨相簿改輪播移除。） */

/* =============================================
   R12 — 書法字圖層（owner 抽字 PNG；HTML 金字為備援）
   ============================================= */
.hero-title__kicker--img {
    display: block;
    width: clamp(180px, 20vw, 340px);
    height: auto;
    margin: 0 0 10px;
    filter: drop-shadow(0 2px 6px var(--c-black-a55));
}
.hero-title__main--img {
    display: block;
    width: clamp(300px, 36vw, 620px);
    height: auto;
    filter: drop-shadow(0 4px 12px var(--c-black-a55)) drop-shadow(0 0 26px var(--gold-glow));
}
@media (max-width: 768px) {
    .hero-title__kicker--img { width: clamp(150px, 40vw, 220px); }
    .hero-title__main--img { width: clamp(240px, 62vw, 340px); }
}


/* =============================================
   H6 電子寵物（pet）——owner 2026-07-17 F2.7 重設計
   舊拍板（in-flow 走動 lane＋不定位泡泡）已被 owner 新回饋推翻：改為右下角固定小掛件，
   站在 TOP 鈕（.back-to-top-btn，style.css）上方；點寵物→浮出對話氣泡輪播話語；
   氣泡往上開，不蓋 TOP 鈕、不吃其點擊。z-index 90 < 導覽（.main-header 100 / mobile-nav 9999）
   與 TOP 鈕（1000）→ 導覽與 TOP 恆在寵物之上。全 token、零硬編色（C1 ratchet）。
   ============================================= */
.pet-widget {
    position: fixed;
    right: 30px;
    bottom: 88px;              /* TOP 鈕佔 bottom 30〜78px → 疊在其上方留 10px 間距 */
    z-index: 90;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: max-content;        /* 只佔寵物本身寬度 → 右下角空白區不吃點擊 */
}

/* cookie 同意橫幅顯示期間，寵物比照 TOP 鈕上移避開底部橫幅（body 類由 main.js 掛/卸）。 */
body.cookie-banner-open .pet-widget { bottom: 228px; }

.pet-sprite {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
    border-radius: var(--radius-12);
    transition: transform 0.25s var(--ease-out);
}
.pet-sprite:hover { transform: translateY(-3px); }

.pet-sprite img {
    /* 立姿長圖（108×271）→ 以 max-height 控尺寸（寬度自適應），桌機約 152px。 */
    width: auto;
    height: auto;
    max-height: 152px;
    filter: drop-shadow(0 4px 12px var(--c-black-a08));
    pointer-events: none;
    /* 常駐輕微待機晃動（單張圖無 sprite sheet）；減動作關閉（見檔末 media query）。 */
    animation: pet-bob 3.2s ease-in-out infinite;
}

@keyframes pet-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

.pet-sprite:focus-visible {
    outline: 2px solid var(--gold-deep);
    outline-offset: 3px;
}

/* ── A) 小閒聊泡泡（owner 2026-07-18）：掛件上方浮出的「小」泡泡，只顯示一則句、不擋畫面、無問答。 ── */
.pet-chatter {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    width: max-content;
    max-width: 210px;
    background: var(--white-warm);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-lg);
    padding: 10px 14px;
    box-shadow: var(--shadow-md);
}
/* 防守：日後若有人給 .pet-chatter 加 display，hidden 語意仍不被蓋掉。 */
.pet-chatter[hidden] { display: none; }
/* 小尾巴指向寵物（右下）。 */
.pet-chatter::after {
    content: '';
    position: absolute;
    right: 24px;
    top: 100%;
    border: 7px solid transparent;
    border-top-color: var(--white-warm);
}
/* 一次只顯示一則（is-active）。 */
.pet-chatter__line {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--ink-soft);
    display: none;
}
.pet-chatter__line.is-active { display: block; }

/* ── B) 全螢幕問答（owner 2026-07-18）：點寵物才開，fixed inset:0 佔滿整個畫面、z-index 高於導覽。 ── */
.pet-qa {
    position: fixed;
    inset: 0;
    z-index: 1200;                    /* 高於導覽/TOP → 真正的全螢幕接管 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--c-black-a55);   /* 半透明遮罩 */
}
.pet-qa[hidden] { display: none; }
.pet-qa__panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;                 /* 內容多時面板內捲（合法捲動區，見 scroll guard ALLOWLIST） */
    background: var(--white-warm);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-lg);
    padding: 30px 24px 24px;
    box-shadow: var(--shadow-md);
}
.pet-qa__close {
    position: absolute;
    top: 8px;
    right: 12px;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink-soft);
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-full);
}
.pet-qa__close:hover { color: var(--gold-deep); }
.pet-qa__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-right: 28px;              /* 讓開右上角關閉鈕 */
}
.pet-qa__avatar { width: auto; height: auto; max-height: 64px; flex-shrink: 0; }
.pet-qa__title {
    margin: 0;
    font-family: var(--font-brand);
    font-size: 1.15rem;
    color: var(--ink);
}
/* 直接提問框（faq_bot 開才渲染）。 */
.pet-qa__ask {
    display: flex;
    gap: 8px;
}
.pet-qa__input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid var(--gold-border);
    border-radius: var(--radius-99);
    background: var(--white);
    color: var(--ink);
    /* owner 2026-07-18：點開問答整頁被 zoom in、關閉後首頁殘留放大裁切——根因＝iOS Safari
       對 <16px 輸入框聚焦時自動縮放整頁。鎖 ≥16px 即根絕（A++ 時 rem 放大照常生效）。 */
    font-size: max(16px, 0.95rem);
    font-family: var(--font-body);
}
.pet-qa__input:focus-visible {
    outline: 2px solid var(--gold-deep);
    outline-offset: 1px;
}
.pet-qa__submit {
    flex: 0 0 auto;
    padding: 10px 18px;
    border: 0;
    border-radius: var(--radius-99);
    background: var(--gold-deep);      /* 對比 5.38 過 AA（白字） */
    color: var(--white);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
}
.pet-qa__submit:hover { background: var(--gold-rich); }
.pet-qa__answer {
    margin-top: 14px;
    font-size: 0.95rem;
    line-height: 1.85;
    color: var(--ink-soft);
}
.pet-qa__answer[hidden] { display: none; }
.pet-qa__answer .pet-qa__q {
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px;
}
.pet-qa__answer .pet-qa__a { margin: 0 0 10px; }
.pet-qa__link {
    display: inline-block;
    margin-top: 18px;
    padding: 12px 22px;
    border-radius: var(--radius-99);
    background: var(--gold-deep);      /* 對比 5.38 過 AA（白字）；不用淺金 --gold（3.0 不合格） */
    color: var(--white);
    text-decoration: none;
    font-size: 0.95rem;
}
.pet-qa__link:hover { background: var(--gold-rich); }

/* 全螢幕問答開啟時鎖背景捲動（避免背景一起滑）。 */
body.pet-qa-open { overflow: hidden; }

/* 手機縮小：img max-height 約 68px；站在手機 TOP 鈕（bottom 16+safe、高 38）上方。 */
@media (max-width: 768px) {
    .pet-widget {
        right: 16px;
        bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    }
    body.cookie-banner-open .pet-widget {
        /* 手機橫幅期間 TOP 鈕上移到 bottom:170（top 邊約 208）→ 寵物上移到 220 留 12px 間距。 */
        bottom: calc(220px + env(safe-area-inset-bottom, 0px));
    }
    /* owner 2026-07-17 F2.7：手機縮小到 max-height ~76px（立圖高度優先，不用寬度換算）。 */
    .pet-sprite img { max-height: 76px; }
    /* owner 2026-07-18：小閒聊泡泡手機更小、佔比低；全螢幕問答手機真正佔滿整個畫面。 */
    .pet-chatter { max-width: 62vw; padding: 8px 12px; }
    .pet-chatter__line { font-size: 0.85rem; line-height: 1.55; }
    .pet-qa { padding: 0; }
    .pet-qa__panel {
        max-width: none;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border: 0;
        border-radius: 0;
        padding: 56px 20px 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* 減動作：寵物不待機晃動（點擊看話語/提問功能不受影響）。 */
    .pet-sprite { transition: none; }
    .pet-sprite img { animation: none; }
}