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

    /* 字型走 theme.css --font-body/--font-brand（系統字/品牌字），不在此載 web 字（#6 C0-3）。
       和風副調色盤（生成り/墨色/朱紅/和金/侘寂/光影）已併入 theme.css（C1 T3）——
       設計線（Figma→token）單一入口；--radius-std/soft 去重改用 --radius-14/--radius-8。 */

/* R6-1 色彩對映（換名不換值零外觀）：本頁走「和風副調色盤」——朱紅 --shu／和式金 --kin／
   侘寂 --rikyu／臙脂 --enji 等（皆已於 C1 併入 theme.css，本頁直接 var() 消費，非局部遮蔽，
   確認無同名覆寫）＝頁面獨立調性，維持 namespace，非全站宮廟金驅動。此區塊只做兩件事：
   ①品牌接點 --donation-brand → theme 和式金色票（換皮單一入口）；②把本頁仍寫死且重複≥2 次的
   裸字面色收成具名 token（值不變）＝color ratchet 下修。 */
:root {
    /* 品牌接點：本頁招牌金＝和式金 --kin（#C89B3F，霧面，異於宮廟品牌金 --gold #c48945）。
       改 theme --kin → 主護持鈕金色跟著換皮。 */
    --donation-brand: var(--kin);

    /* 重複值收斂（各只剩此定義處寫死，其餘改吃 var()；值一字不變＝零外觀）。 */
    --donation-cream-text: #F0DDC2;               /* 深底奶油字（跑馬燈/捲軸捐款項目文字） */
    --donation-rikyu-a22: rgba(138, 137, 119, 0.22); /* 侘寂 22%（流程區上下分隔線） */
    --donation-rikyu-a30: rgba(138, 137, 119, 0.3);  /* 侘寂 30%（流程軸線漸層/手機軸線） */
    --donation-kin-a0: rgba(200, 155, 63, 0);        /* 和式金 0%（脈動動畫透明端點） */
    --donation-kin-a20: rgba(200, 155, 63, 0.2);     /* 和式金 20%（表單/捲軸捐款人邊框） */
    --donation-kin-a40: rgba(200, 155, 63, 0.4);     /* 和式金 40%（芳名錄/下拉選單邊框） */
    --donation-shu-a10: rgba(200, 55, 45, 0.1);      /* 朱紅 10%（選中卡光暈/匯款圖示底） */
}

    /* === 全域字體 === */
    body, button, input, select, textarea {
        font-family: var(--font-body);
    }
    body {
        background-color: var(--c-bg);
        color: var(--c-text-deep);
        background-image:
            radial-gradient(circle at 20% 20%, rgba(200, 155, 63, 0.04) 0%, transparent 40%),
            radial-gradient(circle at 80% 80%, rgba(200, 55, 45, 0.02) 0%, transparent 40%);
    }

    /* === 通用工具 === */
    .d-none { display: none !important; }
    .text-center { text-align: center; }
    .flex-center { display: flex; justify-content: center; align-items: center; }
    .relative { position: relative; }
    .pointer { cursor: pointer; }

    /* === Toast 通知 === */
    #toast-container {
        position: fixed; top: 24px; left: 50%; transform: translateX(-50%);
        z-index: 10000; display: flex; flex-direction: column; gap: 10px;
        pointer-events: none; width: 92%; max-width: 440px;
    }
    .toast {
        background: rgba(44, 36, 32, 0.94);
        color: var(--c-bg);
        padding: 14px 20px; border-radius: var(--radius-sm);
        font-size: 1rem; font-weight: 500; letter-spacing: 0.5px;
        display: flex; align-items: center; gap: 12px;
        box-shadow: 0 12px 48px var(--c-black-a25), 0 0 0 1px rgba(200, 155, 63, 0.25);
        opacity: 0; transform: translateY(-16px);
        transition: opacity 0.35s ease, transform 0.35s ease;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        pointer-events: auto;
    }
    .toast.show { opacity: 1; transform: translateY(0); }
    .toast-error { border-left: 3px solid var(--shu-light); }
    .toast-success { border-left: 3px solid #90D9A8; }
    .toast-info { border-left: 3px solid var(--kin-bright); }
    .toast-icon {
        font-size: 1.1rem; flex-shrink: 0;
        width: 26px; height: 26px; border-radius: var(--radius-full);
        display: flex; align-items: center; justify-content: center;
    }
    .toast-error .toast-icon { background: rgba(224,99,87,0.15); color: #F4B0B0; }
    .toast-success .toast-icon { background: rgba(144,217,168,0.15); color: #A8E5BE; }
    .toast-info .toast-icon { background: rgba(224,184,92,0.15); color: var(--kin-light); }
    .toast-msg { flex: 1; line-height: 1.5; }

    /* === Inline 欄位錯誤 === */
    .field-error {
        color: var(--c-error); font-size: 0.88rem;
        margin-top: 6px; min-height: 0; overflow: hidden;
        opacity: 0; transform: translateY(-4px);
        transition: opacity 0.25s, transform 0.25s, min-height 0.25s;
    }
    .field-error.show { opacity: 1; transform: translateY(0); min-height: 1.2em; }
    .form-control.is-invalid {
        border-color: var(--c-error) !important;
        background: var(--c-error-bg) !important;
    }
    .form-control.is-invalid:focus {
        box-shadow: 0 0 0 3px rgba(184, 84, 80, 0.12) !important;
    }

    /* ============================================================== */
    /* === Hero === */
    /* ============================================================== */
    .donation-hero {
        /* TODO: 補上 signuppic.jpg 後恢復背景圖。 */
        background: #4c3328;
        height: 60vh; min-height: 400px;
        color: var(--white); position: relative; overflow: hidden;
    }
    .donation-hero::before {
        content: ''; position: absolute; inset: 0; z-index: 1;
        background:
            radial-gradient(ellipse at 50% 40%, var(--c-200-155-63-a22) 0%, transparent 60%),
            linear-gradient(180deg,
                rgba(44, 36, 32, 0.45) 0%,
                rgba(125, 30, 30, 0.35) 55%,
                rgba(44, 36, 32, 0.78) 100%);
    }
    .donation-hero::after {
        content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2;
        background: linear-gradient(90deg,
            transparent 0%, var(--shu) 20%, var(--shu-deep) 50%, var(--shu) 80%, transparent 100%);
        opacity: 0.85;
    }

    .hero-text {
        position: relative; z-index: 2; padding: 20px; text-align: center;
        animation: floatUp 1.4s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .hero-title {
        display: inline-flex; align-items: center; gap: 24px;
        font-size: 3.8rem; font-weight: 700; letter-spacing: 8px;
        margin-bottom: 24px;
        background: linear-gradient(180deg, var(--white) 0%, var(--c-f5e2ba) 100%);
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0 0 35px rgba(232, 213, 168, 0.3));
    }
    .hero-title-divider {
        width: 6px; height: 6px; border-radius: var(--radius-full);
        background: var(--kin-light);
        opacity: 0.7; flex-shrink: 0;
        -webkit-text-fill-color: initial;
    }
    .hero-sub {
        font-size: 1.2rem; font-weight: 400; letter-spacing: 5px;
        color: var(--c-f5e2ba); opacity: 0.88;
    }
    @keyframes floatUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

    /* ============================================================== */
    /* === 主容器 === */
    /* ============================================================== */
    .donation-container {
        max-width: 1100px; margin: -70px auto 60px auto;
        background: var(--c-bg-card);
        border-radius: var(--radius-14);
        box-shadow: var(--shadow-altar);
        position: relative; z-index: 3;
        padding: 64px 50px;
        border: 1px solid var(--c-200-155-63-a15);
        overflow: hidden;
    }
    .donation-container::before {
        content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
        background: linear-gradient(90deg, transparent, var(--shu) 25%, var(--shu-deep) 50%, var(--shu) 75%, transparent);
        z-index: 4;
    }
    .section-ornament {
        display: flex; align-items: center; justify-content: center;
        gap: 14px; margin: 0 auto 24px auto;
    }
    .section-ornament::before, .section-ornament::after {
        content: ''; width: 40px; height: 1px;
        background: linear-gradient(90deg, transparent, var(--kin));
    }
    .section-ornament::after { background: linear-gradient(90deg, var(--kin), transparent); }
    .section-ornament-diamond {
        width: 8px; height: 8px; background: var(--kin); transform: rotate(45deg);
        opacity: 0.75;
    }

    /* === 理念區塊（置中） === */
    .concept-section { margin-bottom: 60px; text-align: center; }
    .concept-section h2 {
        color: var(--c-text-deep); margin-bottom: 32px; font-size: 2.2rem;
        position: relative; display: inline-block; font-weight: 700;
        letter-spacing: 8px;
    }
    .concept-text {
        font-size: 1.08rem; line-height: 2.1; color: var(--c-text-mid);
        max-width: 720px; margin: 0 auto;
        text-align: center;
        letter-spacing: 1px;
    }
    .concept-text p { margin: 0 0 18px; }
    .concept-text strong { color: var(--c-text-deep); font-weight: 500; }
    .concept-highlight {
        color: var(--c-text-deep); font-weight: 400;
        background:
            linear-gradient(135deg, rgba(200, 155, 63, 0.05), rgba(200, 55, 45, 0.03)),
            var(--c-bg-card);
        padding: 28px 32px; border-radius: var(--radius-8);
        border: 1px solid var(--c-200-155-63-a35);
        margin-top: 36px; line-height: 2;
        text-align: center; letter-spacing: 1px;
        box-shadow: var(--glow-kin);
        position: relative;
    }
    .concept-highlight::before, .concept-highlight::after {
        content: ''; position: absolute; width: 10px; height: 10px;
        border: 1px solid var(--kin); opacity: 0.6;
    }
    .concept-highlight::before { top: 10px; left: 10px; border-right: none; border-bottom: none; }
    .concept-highlight::after { bottom: 10px; right: 10px; border-left: none; border-top: none; }

    /* ============================================================== */
    /* === 芳名錄 === */
    /* ============================================================== */
    .honor-roll-section {
        background:
            linear-gradient(135deg, rgba(255,255,255,0.03), var(--c-black-a10)),
            linear-gradient(135deg, #6E1313 0%, var(--enji) 55%, #4A0A0A 100%);
        color: var(--kin-light); padding: 30px; border-radius: var(--radius-14);
        margin-bottom: 60px;
        display: flex; align-items: center; gap: 30px; overflow: hidden;
        border: 1px solid var(--donation-kin-a40);
        box-shadow: 0 18px 55px rgba(74, 10, 10, 0.28), inset 0 0 50px rgba(0,0,0,0.35);
        position: relative;
    }
    .honor-roll-section::before {
        content: ''; position: absolute; inset: 7px;
        border: 1px solid var(--c-200-155-63-a22); border-radius: 9px;
        pointer-events: none;
    }
    .honor-title-col {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 18px; flex-shrink: 0;
        padding-right: 28px; border-right: 1px dashed rgba(200, 155, 63, 0.32);
        position: relative; z-index: 1;
    }
    .honor-title {
        font-size: 1.55rem; font-weight: 700;
        writing-mode: vertical-rl; text-orientation: upright;
        letter-spacing: 8px;
        color: var(--kin-light);
        text-shadow: 0 0 25px rgba(232, 201, 119, 0.3);
    }
    .btn-scroll-trigger {
        background: transparent; border: 1px solid rgba(232, 201, 119, 0.55);
        color: var(--kin-light); padding: 9px 18px; border-radius: 22px;
        font-size: 0.88rem; cursor: pointer; font-family: var(--font-body);
        transition: all 0.3s ease; font-weight: 500; letter-spacing: 1.5px;
    }
    .btn-scroll-trigger:hover {
        background: var(--kin-bright); color: var(--enji);
        border-color: var(--kin-bright);
        box-shadow: 0 0 25px rgba(224, 184, 92, 0.45);
        transform: translateY(-1px);
    }

    .marquee-container {
        flex: 1; height: 180px; overflow: hidden; position: relative;
        mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
        -webkit-mask-image: linear-gradient(to bottom, transparent, black 18%, black 82%, transparent);
        z-index: 1;
    }
    /* 🎯 關鍵修正：CSS 給預設 60s duration，避免 JS 延遲時動畫停滯 */
    .marquee-content {
        position: absolute;
        top: 0; left: 0; width: 100%;
        animation: scrollUp 60s linear infinite;
        will-change: transform;
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
    .marquee-container:hover .marquee-content { animation-play-state: paused; }

    /* 跑馬燈內 donor-item：橫向精簡 */
    .marquee-content .donor-item {
        display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
        padding: 13px 14px;
        border-bottom: 1px dashed var(--c-200-155-63-a18);
        font-size: 1.05rem; color: var(--donation-cream-text);
    }
    .marquee-content .donor-item .donor-name {
        font-weight: 500; color: var(--kin-light); flex-shrink: 0;
    }
    .marquee-content .donor-item .donor-items {
        font-size: 0.92rem; opacity: 0.82; text-align: right;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        min-width: 0;
    }

    @keyframes scrollUp {
        0% { transform: translate3d(0, 0, 0); }
        100% { transform: translate3d(0, -50%, 0); }
    }

    /* ============================================================== */
    /* === CTA 按鈕 === */
    /* ============================================================== */
    .cta-container { margin: 52px 0; text-align: center; }
    .start-donate-btn, .btn-submit {
        background: linear-gradient(135deg, var(--c-f5e2ba) 0%, var(--donation-brand) 45%, var(--kin-deep) 100%);
        color: #2E2218; padding: 18px 56px; font-size: 1.3rem;
        border-radius: 48px; border: none;
        transition: all 0.35s ease; cursor: pointer;
        box-shadow: 0 10px 32px var(--c-138-106-40-a28), var(--glow-kin);
        display: inline-flex; align-items: center; justify-content: center; gap: 10px;
        font-weight: 700; letter-spacing: 4px;
        font-family: var(--font-body);
        position: relative; overflow: hidden; text-decoration: none;
        animation: pulse-soft 3s infinite;
    }
    .start-donate-btn::after, .btn-submit::after {
        content: ''; position: absolute; top: 0; left: -120%; width: 45%; height: 100%;
        background: linear-gradient(90deg, transparent, var(--c-white-a50), transparent);
        transform: skewX(-20deg); animation: sheen 4.5s infinite;
    }
    .start-donate-btn:hover:not(:disabled), .btn-submit:hover:not(:disabled) {
        transform: translateY(-2px);
        background: linear-gradient(135deg, #FFF3D0 0%, var(--kin-bright) 45%, var(--kin-deep) 100%);
        box-shadow: 0 16px 44px rgba(138, 106, 40, 0.4), 0 0 60px rgba(224, 184, 92, 0.3);
    }
    .start-donate-btn:disabled, .btn-submit:disabled { opacity: 0.6; cursor: not-allowed; animation: none; }
    @keyframes pulse-soft {
        0%, 100% { box-shadow: 0 10px 32px var(--c-138-106-40-a28), 0 0 0 0 var(--donation-kin-a0); }
        50% { box-shadow: 0 10px 32px var(--c-138-106-40-a28), 0 0 0 14px var(--donation-kin-a0); }
        70% { box-shadow: 0 10px 32px var(--c-138-106-40-a28), 0 0 0 22px rgba(200, 155, 63, 0.02); }
    }
    @keyframes sheen { 0% { left: -120%; } 25% { left: 200%; } 100% { left: 200%; } }

    /* ============================================================== */
    /* === 流程圖 === */
    /* ============================================================== */
    .process-flow-wrapper {
        margin-bottom: 60px; padding: 40px 0;
        border-top: 1px solid var(--donation-rikyu-a22);
        border-bottom: 1px solid var(--donation-rikyu-a22);
    }
    .process-flow-wrapper h3 {
        color: var(--c-text-deep); margin-bottom: 44px;
        font-size: 1.6rem; font-weight: 700; letter-spacing: 8px;
        text-align: center;
    }
    .process-flow {
        display: flex; justify-content: space-between; align-items: flex-start;
        position: relative; max-width: 920px; margin: 0 auto;
    }
    .process-flow::before {
        content: ''; position: absolute; top: 26px; left: 8%; width: 84%; height: 1px;
        background: linear-gradient(90deg,
            transparent, var(--c-200-155-63-a35), var(--donation-rikyu-a30),
            var(--c-200-155-63-a35), transparent);
        z-index: 0;
    }

    .p-step { position: relative; z-index: 1; text-align: center; flex: 1; padding: 0 10px; }
    .p-icon {
        width: 52px; height: 52px; margin: 0 auto 16px auto;
        display: flex; justify-content: center; align-items: center;
        background: linear-gradient(135deg, var(--c-f5e2ba), var(--kin) 55%, var(--kin-deep));
        color: var(--enji); font-weight: 700; font-size: 1.25rem;
        border: 2.5px solid var(--c-bg-card);
        border-radius: var(--radius-full);
        box-shadow: 0 6px 22px rgba(138, 106, 40, 0.2), inset 0 0 8px var(--c-white-a50);
        font-family: var(--font-body);
    }
    .p-text { font-size: 1.05rem; color: var(--c-text-deep); font-weight: 700; line-height: 1.5; letter-spacing: 2px; }
    .p-desc { font-size: 0.9rem; color: var(--c-text-mid); margin-top: 8px; line-height: 1.75; }
    .p-desc.bank { color: var(--shu); font-weight: 500; margin-top: 8px; }

    #donation-process-area {
        opacity: 0; transition: opacity 0.6s ease;
        position: relative; z-index: 1;
    }
    #donation-process-area.show { opacity: 1; }

    /* ============================================================== */
    /* === 護持項目卡片 === */
    /* ============================================================== */
    .donation-grid {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 24px; margin-bottom: 44px;
    }
    .donation-card {
        border: 1px solid var(--c-200-155-63-a18);
        border-radius: var(--radius-8); overflow: hidden;
        transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
        position: relative; background: var(--c-bg-card);
        display: flex; flex-direction: column;
        box-shadow: var(--shadow-card);
    }
    .donation-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-card-hover);
        border-color: var(--kin);
    }
    .donation-card.active {
        border: 2px solid var(--shu);
        background: linear-gradient(180deg, #FFFDF5 0%, var(--c-bg) 100%);
        box-shadow: 0 0 0 4px var(--donation-shu-a10), 0 12px 36px var(--c-200-155-63-a18);
    }
    .d-img {
        width: 100%; height: 200px; object-fit: cover;
        background: var(--c-bg-soft);
        border-bottom: 1px solid var(--c-200-155-63-a15);
    }
    .d-info {
        padding: 22px 18px; text-align: center; flex: 1;
        display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
    }
    .d-title {
        font-size: 1.18rem; font-weight: 700;
        color: var(--c-text-deep); letter-spacing: 2px;
    }
    .d-price { color: var(--kin-deep); font-size: 1rem; font-weight: 500; letter-spacing: 1px; }
    .d-price-number { color: var(--shu); font-weight: 700; font-size: 1.15rem; }
    .variant-select {
        width: 100%; padding: 8px 12px; font-size: 0.95rem;
        border: 1px solid var(--donation-kin-a40); border-radius: var(--radius-6);
        background: var(--c-fdfaf0); color: var(--c-text-deep);
        cursor: pointer; text-align: center; font-family: var(--font-body);
    }
    .variant-select:focus { outline: none; border-color: var(--kin); }

    .qty-control { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 6px; }
    .qty-btn {
        width: 44px; height: 44px; border-radius: var(--radius-full);
        border: 1.5px solid var(--kin); background: var(--white);
        cursor: pointer; font-size: 1.25rem; color: var(--kin-deep);
        transition: all 0.25s ease;
        display: flex; justify-content: center; align-items: center;
        font-weight: 700; font-family: var(--font-body);
        -webkit-tap-highlight-color: transparent;
    }
    .qty-btn:hover {
        background: var(--kin-bright); color: var(--white);
        border-color: var(--kin-bright);
        box-shadow: 0 4px 16px rgba(224, 184, 92, 0.35);
    }
    .qty-btn:active { transform: scale(0.92); }
    .qty-display {
        font-size: 1.35rem; font-weight: 700; width: 44px; text-align: center;
        color: var(--c-text-deep); transition: color 0.3s;
    }

    /* === 微互動動畫 === */
    @keyframes qty-pop {
        0% { transform: scale(1); color: var(--c-text-deep); }
        40% { transform: scale(1.45); color: var(--shu); }
        100% { transform: scale(1); color: var(--c-text-deep); }
    }
    .qty-display.pop { animation: qty-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }

    @keyframes card-flash {
        0% { box-shadow: var(--shadow-card); }
        35% { box-shadow: 0 0 0 3px rgba(200, 55, 45, 0.4), 0 12px 36px var(--c-200-155-63-a30); }
        100% { box-shadow: var(--shadow-card-hover); }
    }
    .donation-card.flash { animation: card-flash 0.7s ease; }

    /* === 購物車摘要 === */
    .summary-section {
        background: linear-gradient(180deg, var(--c-bg-card) 0%, var(--c-fdfaf0) 100%);
        border: 1px solid var(--kin);
        border-radius: var(--radius-8);
        padding: 28px 30px; margin-bottom: 44px;
        box-shadow: var(--glow-kin);
    }
    .summary-section h4 {
        margin-top: 0; color: var(--c-text-deep);
        font-size: 1.22rem; font-weight: 700; letter-spacing: 3px;
    }
    .summary-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
    .summary-table th {
        text-align: left; padding: 14px 12px;
        border-bottom: 1px solid var(--kin);
        color: var(--kin-deep); font-size: 0.95rem;
        font-weight: 500; letter-spacing: 2px;
    }
    .summary-table td {
        padding: 14px 12px;
        border-bottom: 1px dashed var(--c-200-155-63-a22);
        font-size: 1.02rem; color: var(--c-text-deep);
    }
    .summary-table td:last-child { text-align: right; font-weight: 500; color: var(--shu); }
    .summary-total {
        text-align: right; font-size: 1.3rem; font-weight: 700;
        color: var(--shu); padding-top: 22px; letter-spacing: 2px;
    }
    .summary-total span { font-size: 1.75rem; }

    /* ============================================================== */
    /* === 表單 === */
    /* ============================================================== */
    .step-title {
        border-left: 3px solid var(--shu);
        padding-left: 18px; margin-bottom: 30px;
        color: var(--c-text-deep); font-size: 1.45rem;
        font-weight: 700; letter-spacing: 4px;
    }
    .form-section {
        background: var(--c-bg-card); padding: 40px 38px;
        border-radius: var(--radius-14);
        border: 1px solid var(--donation-kin-a20);
        box-shadow: var(--shadow-card);
    }
    .form-notice-top {
        background: rgba(138, 137, 119, 0.08);
        border-left: 3px solid var(--rikyu);
        color: var(--c-text-mid);
        padding: 14px 18px; border-radius: var(--radius-4);
        font-size: 0.96rem; margin-bottom: 28px;
        line-height: 1.7;
    }
    .form-group { margin-bottom: 22px; }
    .form-group label {
        display: block; font-weight: 500; margin-bottom: 10px;
        color: var(--c-text-deep); font-size: 1rem; letter-spacing: 1.5px;
    }
    .form-control {
        width: 100%; padding: 14px 16px;
        border: 1px solid var(--c-200-155-63-a30); border-radius: var(--radius-6);
        box-sizing: border-box; font-size: 1rem;
        transition: all 0.25s ease;
        background: var(--c-fdfaf0); font-family: var(--font-body);
        color: var(--c-text-deep);
    }
    .form-control:focus {
        border-color: var(--kin);
        background: var(--c-bg-card); outline: none;
        box-shadow: 0 0 0 3px var(--c-200-155-63-a15);
    }
    .form-helper {
        color: var(--rikyu); font-size: 0.82rem; margin-top: 6px;
        line-height: 1.6; letter-spacing: 0.5px;
    }

    /* === 匯款提示 === */
    .payment-notice {
        display: flex; align-items: flex-start; gap: 16px;
        background: linear-gradient(135deg, #FDF4E0 0%, #F5E8C8 100%);
        border: 1px solid rgba(200, 155, 63, 0.45);
        border-left: 4px solid var(--shu);
        padding: 18px 22px; border-radius: var(--radius-8);
        margin: 36px 0 24px;
        color: var(--c-text-deep);
        box-shadow: var(--glow-kin);
    }
    .payment-notice-icon {
        font-size: 1.4rem; flex-shrink: 0;
        width: 38px; height: 38px; border-radius: var(--radius-full);
        background: var(--donation-shu-a10);
        display: flex; align-items: center; justify-content: center;
    }
    .payment-notice-body { flex: 1; line-height: 1.7; }
    .payment-notice-body strong {
        color: var(--shu); font-size: 1.02rem;
        display: block; margin-bottom: 4px; letter-spacing: 2px;
    }
    .payment-notice-body p { margin: 0; font-size: 0.94rem; color: var(--c-text-mid); }
    .payment-notice-body .emph { color: var(--shu); font-weight: 700; }

    /* ============================================================== */
    /* === Scroll Modal === */
    /* ============================================================== */
    .modal-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(30, 20, 12, 0.85);
        backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
        z-index: 9999;
    }
    .scroll-wrapper {
        position: relative; width: 90%; max-width: 600px;
        display: flex; flex-direction: column; align-items: center;
    }
    .scroll-close-btn {
        position: absolute; top: -20px; right: -20px;
        background: var(--enji); color: var(--kin-light);
        border: 2px solid var(--kin); border-radius: var(--radius-full);
        width: 44px; height: 44px;
        font-size: 1.125rem; cursor: pointer; z-index: 10;
        box-shadow: 0 4px 14px var(--c-black-a50);
        transition: transform 0.3s;
        display: flex; justify-content: center; align-items: center;
        font-family: var(--font-body);
    }
    .scroll-close-btn:hover { transform: rotate(90deg) scale(1.08); background: var(--shu-deep); }

    .scroll-top-axis, .scroll-bottom-axis {
        width: 105%; height: 32px; border-radius: var(--radius-14);
        position: relative; z-index: 3;
        background: linear-gradient(to bottom, var(--c-f5e2ba) 0%, var(--kin) 45%, var(--kin-deep) 100%);
        box-shadow: 0 5px 15px var(--c-black-a50), inset 0 0 8px var(--c-black-a30);
    }
    .scroll-top-axis::before, .scroll-top-axis::after,
    .scroll-bottom-axis::before, .scroll-bottom-axis::after {
        content: ''; position: absolute; top: -3px; width: 18px; height: 38px;
        background: radial-gradient(circle, var(--c-5e0000), #1a0505);
        border: 2px solid var(--kin); border-radius: var(--radius-4);
    }
    .scroll-top-axis::before, .scroll-bottom-axis::before { left: -10px; }
    .scroll-top-axis::after, .scroll-bottom-axis::after { right: -10px; }

    .scroll-content {
        width: 100%; background-color: var(--enji); padding: 0 28px;
        overflow-y: auto; opacity: 0; max-height: 0;
        box-shadow: inset 0 0 50px rgba(0,0,0,0.8);
        border-left: 3px solid var(--kin);
        border-right: 3px solid var(--kin);
        transition: max-height 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease, padding 1.2s ease;
    }
    .scroll-wrapper.unrolled .scroll-content { max-height: 65vh; opacity: 1; padding: 32px 28px; }
    .scroll-content::-webkit-scrollbar { width: 6px; }
    .scroll-content::-webkit-scrollbar-track { background: var(--c-black-a30); border-radius: var(--radius-sm); margin: 10px 0; }
    .scroll-content::-webkit-scrollbar-thumb { background: var(--kin); border-radius: var(--radius-sm); }

    /* 🎯 卷軸內 donor-item 改縱向堆疊，解決長字串跑版 */
    .scroll-content .donor-item {
        display: block;
        padding: 16px 4px;
        border-bottom: 1px dashed var(--c-200-155-63-a22);
    }
    .scroll-content .donor-item:last-child { border-bottom: none; }
    .scroll-content .donor-item .donor-name {
        display: block;
        font-size: 1.1rem; font-weight: 500;
        color: var(--kin-light);
        margin-bottom: 6px;
        letter-spacing: 2px;
    }
    .scroll-content .donor-item .donor-items {
        display: block;
        font-size: 0.92rem;
        color: var(--donation-cream-text);
        opacity: 0.85;
        line-height: 1.8;
        word-break: break-word;
        overflow-wrap: break-word;
        padding-left: 12px;
        border-left: 1px solid var(--donation-kin-a20);
    }

    /* === 成功 Modal === */
    .modal-box {
        background: var(--c-bg); padding: 45px 38px;
        border-radius: var(--radius-14); text-align: center;
        max-width: 460px; width: 90%;
        border: 1px solid var(--kin);
        box-shadow: 0 20px 60px var(--c-black-a40), 0 0 0 5px var(--c-200-155-63-a18);
    }
    .modal-box h2 {
        color: var(--c-text-deep); font-size: 1.85rem;
        margin-bottom: 12px; letter-spacing: 5px; font-weight: 700;
    }
    .modal-box p { color: var(--c-text-mid); line-height: 1.8; }
    .bank-info-box {
        background: var(--c-fdfaf0); padding: 24px; border-radius: var(--radius-8);
        margin: 22px 0; text-align: left;
        border: 1px dashed var(--kin);
        box-shadow: inset 0 0 12px rgba(200, 155, 63, 0.08);
    }
    .bank-info-box p { margin: 8px 0; color: var(--c-text-mid); font-size: 1rem; }
    .bank-info-box p strong { color: var(--c-text-deep); font-weight: 500; }
    #bank-account {
        color: var(--shu); font-weight: 700; font-size: 1.5rem;
        letter-spacing: 3px; margin: 6px 0;
    }
    .modal-urgency {
        color: var(--shu); font-size: 0.98rem; font-weight: 500;
        line-height: 1.7; letter-spacing: 1px;
    }

    /* ============================================================== */
    /* === 手機版 RWD === */
    /* ============================================================== */
    @media (max-width: 768px) {
        .donation-hero { height: 46vh; min-height: 320px; }

        /* 🎯 標題改縱向，中間換為金色細線 */
        .hero-title {
            flex-direction: column; gap: 14px;
            font-size: 2.6rem; letter-spacing: 10px;
            margin-bottom: 20px;
        }
        .hero-title-divider {
            width: 40px; height: 1px; border-radius: 0;
            background: linear-gradient(90deg, transparent, var(--kin-light), transparent);
            opacity: 0.9;
        }
        .hero-sub { font-size: 0.98rem; letter-spacing: 3px; }

        .donation-container {
            margin-top: -40px;
            border-radius: var(--radius-14);
            padding: 40px 22px;
        }

        .concept-section { margin-bottom: 44px; }
        .concept-section h2 { font-size: 1.6rem; letter-spacing: 4px; margin-bottom: 24px; }
        .concept-text { font-size: 0.98rem; line-height: 2; letter-spacing: 0.5px; }
        .concept-highlight { padding: 22px 20px; font-size: 0.94rem; margin-top: 28px; }

        .honor-roll-section {
            flex-direction: column; padding: 24px 18px; gap: 16px;
            margin-bottom: 44px;
        }
        .honor-title-col {
            border-right: none;
            border-bottom: 1px dashed var(--c-200-155-63-a30);
            padding-right: 0; padding-bottom: 16px; width: 100%;
            flex-direction: row; justify-content: space-between;
        }
        .honor-title {
            writing-mode: horizontal-tb; font-size: 1.3rem; letter-spacing: 4px;
        }
        .marquee-container { height: 170px; }
        .marquee-content .donor-item { font-size: 0.95rem; padding: 11px 10px; }
        .marquee-content .donor-item .donor-items { font-size: 0.85rem; }

        .cta-container { margin: 40px 0; }
        .start-donate-btn { font-size: 1.1rem; padding: 16px 42px; letter-spacing: 3px; }

        .process-flow-wrapper { padding: 30px 0; margin-bottom: 44px; }
        .process-flow-wrapper h3 { font-size: 1.3rem; letter-spacing: 4px; margin-bottom: 30px; }
        .process-flow {
            flex-direction: column; gap: 24px;
            align-items: flex-start; padding-left: 0;
        }
        .process-flow::before {
            width: 1px; height: calc(100% - 48px);
            top: 24px; left: 23px;
            background: linear-gradient(180deg, rgba(200, 155, 63, 0.5), var(--donation-rikyu-a30));
        }
        .p-step {
            display: flex; align-items: flex-start; gap: 20px;
            text-align: left; width: 100%; padding: 0;
        }
        .p-icon { margin: 0; flex-shrink: 0; width: 48px; height: 48px; font-size: 1.1rem; }
        .p-info-box { flex: 1; padding-top: 4px; }
        .p-text { font-size: 1rem; letter-spacing: 2px; }
        .p-desc { font-size: 0.88rem; }

        .donation-grid { grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 36px; }
        .d-img { height: 130px; }
        .d-info { padding: 16px 12px; gap: 10px; }
        .d-title { font-size: 1rem; letter-spacing: 1px; }
        .d-price { font-size: 0.92rem; }
        .d-price-number { font-size: 1rem; }
        .qty-btn { width: 38px; height: 38px; font-size: 1.125rem; }
        .qty-display { font-size: 1.2rem; width: 38px; }
        .qty-control { gap: 14px; }
        .variant-select { font-size: 0.85rem; padding: 6px 8px; }

        .summary-section { padding: 22px 18px; }
        .summary-table th, .summary-table td { padding: 12px 8px; font-size: 0.92rem; }
        .summary-total { font-size: 1.12rem; }
        .summary-total span { font-size: 1.4rem; }

        .step-title { font-size: 1.22rem; letter-spacing: 3px; }
        .form-section { padding: 28px 20px; }
        .form-notice-top { font-size: 0.9rem; padding: 12px 14px; }
        .payment-notice { padding: 16px 14px; gap: 12px; margin: 30px 0 20px; }
        .payment-notice-icon { width: 34px; height: 34px; font-size: 1.2rem; }
        .payment-notice-body strong { font-size: 0.98rem; }
        .payment-notice-body p { font-size: 0.88rem; }

        .modal-box { padding: 32px 24px; }
        .modal-box h2 { font-size: 1.5rem; letter-spacing: 3px; }
        #bank-account { font-size: 1.3rem; letter-spacing: 2px; }

        #toast-container { top: 16px; }
        .toast { font-size: 0.92rem; padding: 12px 16px; }

        .scroll-content .donor-item { padding: 14px 4px; }
        .scroll-content .donor-item .donor-name { font-size: 1.02rem; }
        .scroll-content .donor-item .donor-items { font-size: 0.88rem; padding-left: 10px; }
    }

    @media (max-width: 420px) {
        .donation-grid { grid-template-columns: 1fr; }
        .d-img { height: 180px; }
        .hero-title { font-size: 2.2rem; letter-spacing: 8px; }
    }
/* === Refined page polish === */
.donation-hero::before {
    background:
        radial-gradient(ellipse at 50% 40%, var(--c-231-201-133-a18) 0%, transparent 58%),
        linear-gradient(180deg, rgba(42, 26, 10, 0.36) 0%, rgba(89, 30, 24, 0.30) 55%, rgba(42, 26, 10, 0.74) 100%);
}

.hero-title,
.concept-section h2,
.process-flow-wrapper h3,
.step-title {
    letter-spacing: 0.14em;
}

.donation-container {
    background: rgba(252, 248, 238, 0.94);
    border-color: rgba(200, 155, 63, 0.14);
    box-shadow: 0 24px 70px rgba(44, 36, 32, 0.09);
}

.concept-highlight,
.summary-section,
.form-section,
.donation-card,
.modal-box,
.bank-info-box {
    border-color: var(--c-200-155-63-a18);
    box-shadow: 0 12px 34px rgba(44, 36, 32, 0.065);
}

.donation-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 48px rgba(44, 36, 32, 0.11);
    border-color: rgba(200, 155, 63, 0.34);
}

.honor-roll-section {
    border-color: rgba(200, 155, 63, 0.28);
    box-shadow: 0 18px 48px rgba(74, 10, 10, 0.22), inset 0 0 36px var(--c-black-a28);
}

.honor-title-col {
    padding-right: 36px;
}

.honor-title {
    line-height: 1.7;
}

.marquee-content {
    animation-duration: 96s;
}

.start-donate-btn,
.btn-submit {
    animation: none;
    background: linear-gradient(135deg, #F2DDA7 0%, var(--donation-brand) 52%, var(--kin-deep) 100%);
}

.start-donate-btn::after,
.btn-submit::after {
    animation: none;
    transition: left 0.65s ease;
}

.start-donate-btn:hover::after,
.btn-submit:hover::after {
    left: 170%;
}

@media (prefers-reduced-motion: reduce) {
    .marquee-content,
    .hero-text,
    .donation-card.flash,
    .qty-display.pop {
        animation: none !important;
    }
}