/* ==================== */
/* 神性回憶錄- temple.css */
/* ==================== */
.lunar-day {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 1.3em;
    color: #D4AF37;
}

/* 1. 基礎神聖氛圍 */
.temple-sacred-entrance {
    background:
        /* 宣紙底色 - 加強陳舊感 */
        radial-gradient(ellipse at 20% 20%, #fef9f3cc 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, #f5ecdfcc 0%, transparent 50%),
        /* 古籍陳舊感 - 增加邊緣暗化 */
        linear-gradient(135deg, #fef9f3 0%, #f5ecdf 30%, #e8dcc8 70%, #d8c8a8 100%);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

.temple-sacred-entrance::after {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150vw;
    height: 150vh;
    background:
        radial-gradient(circle at 30% 40%, #ffebb31a 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, #9c2c2c0d 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, #a0522d08 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
    animation: temple-aura-pulse 20s infinite alternate ease-in-out;
}

/* 宣紙紋理與墨跡 - 加強紋理 */
.temple-sacred-entrance::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        /* 宣紙纖維 - 加強紋理密度 */
        url("data:image/svg+xml,%3Csvg width='400' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='rice-paper' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Cpath d='M20,0 L20,40 M0,20 L40,20' stroke='%23d7ccc8' stroke-width='0.3' opacity='0.2'/%3E%3Cpath d='M10,10 L30,30 M30,10 L10,30' stroke='%23d7ccc8' stroke-width='0.1' opacity='0.1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23rice-paper)'/%3E%3C/svg%3E"),
        /* 水漬墨痕 - 增加層次 */
        radial-gradient(circle at 15% 25%, #5d40370c 0%, transparent 30%),
        radial-gradient(circle at 85% 75%, #a0522d0a 0%, transparent 35%),
        radial-gradient(circle at 50% 50%, #9c2c2c08 0%, transparent 50%),
        radial-gradient(circle at 10% 80%, #2a7a7a05 0%, transparent 40%),
        radial-gradient(circle at 90% 20%, #2c387e05 0%, transparent 40%);
    pointer-events: none;
    z-index: 1;
}

/* 2. 神聖雲霧背景 */
.temple-sacred-clouds-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.temple-sacred-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.temple-sacred-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #ffebb399;
    border-radius: 50%;
    animation: temple-particle-float 15s infinite linear;
    filter: blur(1px);
}

.temple-cloud-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.03;
    background:
        radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.8) 0%, transparent 30%),
        radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.6) 0%, transparent 40%);
    animation: temple-cloudFloat 60s infinite linear;
}

.temple-layer-1 {
    animation-delay: 0s;
    animation-duration: 40s;
}

.temple-layer-2 {
    animation-delay: 20s;
    animation-duration: 50s;
}

.temple-layer-3 {
    animation-delay: 40s;
    animation-duration: 60s;
}

@keyframes temple-cloudFloat {
    0% {
        transform: translateX(0) translateY(0);
    }

    50% {
        transform: translateX(50px) translateY(30px);
    }

    100% {
        transform: translateX(0) translateY(0);
    }
}

/* 天光效果 */
.temple-light-ray {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(255, 235, 179, 0.1) 20%,
            transparent 100%);
    animation: temple-lightSweep 8s infinite ease-in-out;
}

.temple-ray-1 {
    left: 20%;
    animation-delay: 0s;
}

.temple-ray-2 {
    left: 50%;
    animation-delay: 2s;
}

.temple-ray-3 {
    left: 80%;
    animation-delay: 4s;
}

@keyframes temple-lightSweep {

    0%,
    100% {
        opacity: 0.1;
    }

    50% {
        opacity: 0.3;
    }
}

/* 3. 神聖入口區域 */
.temple-sacred-header {
    text-align: center;
    padding: 6rem 2rem 4rem;
    position: relative;
    z-index: 20;
}

/* 天界靈光 */
.temple-celestial-light {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    pointer-events: none;
}

.temple-light-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle,
            rgba(255, 235, 179, 0.1) 0%,
            rgba(255, 235, 179, 0.05) 30%,
            transparent 70%);
    animation: temple-lightPulse 6s infinite ease-in-out;
}

.temple-light-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%;
    height: 200%;
    border: 1px solid rgba(255, 235, 179, 0.1);
    border-radius: 50%;
    animation: temple-ringExpand 12s infinite linear;
}

@keyframes temple-lightPulse {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

@keyframes temple-ringExpand {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

/* 4. 神聖玉璽強化 - 修改顏色 */
.temple-sacred-seal-large {
    width: 240px;
    height: 240px;
    margin: 0 auto 4rem;
    position: relative;
}

.temple-seal-aura {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background: radial-gradient(circle,
            rgba(156, 44, 44, 0.1) 0%,
            rgba(184, 115, 51, 0.05) 50%,
            transparent 70%);
    border-radius: 50%;
    animation: temple-sealAura 8s infinite ease-in-out;
}

.temple-seal-outer-circle {
    width: 100%;
    height: 100%;
    position: relative;
    background: linear-gradient(135deg,
            rgba(255, 248, 225, 0.95) 0%,
            rgba(255, 240, 200, 0.95) 100%);
    border-radius: 50%;
    box-shadow:
        0 15px 50px rgba(184, 115, 51, 0.4),
        inset 0 0 40px rgba(255, 255, 255, 0.9),
        0 0 0 12px #b87333;
    /* 改為古銅色 */
}

.temple-seal-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    overflow: hidden;
}

.temple-pattern-border {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border: 2px solid rgba(212, 63, 58, 0.3);
    /* 改為朱砂色 */
    border-radius: 50%;
}

.temple-pattern-symbol {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
    color: rgba(212, 63, 58, 0.1);
    /* 改為朱砂色 */
    font-family: 'Noto Serif TC', serif;
}

.temple-seal-middle-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180px;
    height: 180px;
    border: 4px solid #d43f3a;
    /* 改為朱砂色 */
    border-radius: 50%;
    box-shadow:
        inset 0 0 20px rgba(212, 63, 58, 0.3),
        0 0 20px rgba(212, 63, 58, 0.2);
}

.temple-seal-inner-square {
    width: 140px;
    height: 140px;
    background: linear-gradient(135deg,
            #d43f3a 0%,
            /* 改為朱砂色 */
            #b87333 100%);
    /* 改為古銅色 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(212, 63, 58, 0.4);
    /* 改為朱砂色 */
}

.temple-seal-text-vertical {
    transform: rotate(-45deg);
    text-align: center;
    position: relative;
    z-index: 2;
}

.temple-seal-text-vertical span {
    display: block;
    color: #fff8e1;
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1.2;
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 235, 179, 0.5);
    letter-spacing: 2px;
}

.temple-seal-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 160px;
    background: radial-gradient(circle,
            rgba(255, 235, 179, 0.3) 0%,
            transparent 70%);
    animation: temple-innerGlow 4s infinite alternate ease-in-out;
}

/* 玉璽雲紋裝飾 */
.temple-seal-ornaments {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.temple-ornament-cloud {
    position: absolute;
    width: 120px;
    height: 60px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M10,30 Q30,10 50,30 Q70,50 90,30 Q110,10 110,30' fill='rgba(184,115,51,0.1)'/%3E%3C/svg%3E");
    /* 改為古銅色 */
    animation: temple-cloudMove 20s infinite linear;
}

.temple-c1 {
    top: -30px;
    left: 20%;
    animation-delay: 0s;
}

.temple-c2 {
    top: 80%;
    right: -40px;
    animation-delay: 5s;
    animation-direction: reverse;
}

.temple-c3 {
    bottom: -30px;
    left: 30%;
    animation-delay: 10s;
}

.temple-c4 {
    top: 20%;
    left: -40px;
    animation-delay: 15s;
    animation-direction: reverse;
}

/* 5. 毛筆書法標題強化 */
.temple-sacred-title-container {
    position: relative;
    margin: 3rem auto;
    display: inline-block;
}

.temple-title-bg-ink {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle,
            rgba(0, 0, 0, 0.1) 0%,
            transparent 70%);
    filter: blur(20px);
    opacity: 0.3;
    z-index: 1;
}

.temple-sacred-title {
    font-family: 'LXGW WenKai Mono TC', monospace;
    font-size: 5rem;
    color: transparent;
    margin: 0;
    position: relative;
    z-index: 2;
    letter-spacing: 4px;
}

.temple-stroke-wrap {
    display: inline-block;
    position: relative;
    margin: 0 0.8rem;
}

.temple-sacred-title span:not(.temple-stroke-shadow) {
    background: linear-gradient(to bottom,
            #1a1a1a 0%,
            #3a3a3a 30%,
            #5a5a5a 70%,
            #3a3a3a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    position: relative;
    z-index: 2;
}

.temple-stroke-shadow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: 110%;
    background: linear-gradient(135deg,
            #5d4037 0%,
            /* 深褐色 */
            #9c2c2c 50%,
            /* 朱砂色 */
            #d43f3a 100%);
    /* 亮朱砂色 */
    -webkit-background-clip: text;
    background-clip: text;
    opacity: 0.3;
    filter: blur(5px);
    z-index: 1;
}

/* 毛筆筆劃動畫 */
@keyframes temple-brushReveal {
    0% {
        background-position: 0 100%;
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        background-position: 0 0;
        opacity: 1;
        transform: translateY(0);
    }
}

.temple-stroke-1,
.temple-stroke-2,
.temple-stroke-3,
.temple-stroke-4,
.temple-stroke-5 {
    animation: temple-brushReveal 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    background-size: 100% 200%;
}

.temple-stroke-1 {
    animation-delay: 0.3s;
}

.temple-stroke-2 {
    animation-delay: 0.6s;
}

.temple-stroke-3 {
    animation-delay: 0.9s;
}

.temple-stroke-4 {
    animation-delay: 1.2s;
}

.temple-stroke-5 {
    animation-delay: 1.5s;
}

.temple-title-ornament-left,
.temple-title-ornament-right {
    position: absolute;
    top: 50%;
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg,
            transparent 0%,
            #b87333 50%,
            /* 改為古銅色 */
            transparent 100%);
    transform: translateY(-50%);
}

.temple-title-ornament-left {
    left: -120px;
}

.temple-title-ornament-right {
    right: -120px;
}

/* 6. 經文副標題 */
.temple-sacred-subtitle {
    margin: 2rem auto;
    max-width: 800px;
    position: relative;
}

.temple-subtitle-line {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.5rem 0;
}

.temple-text-content {
    font-family: 'LXGW WenKai Mono TC', monospace;
    font-size: 1.6rem;
    color: #5d4037;
    font-style: italic;
    letter-spacing: 3px;
    padding: 0 2rem;
    position: relative;
}

.temple-text-content::before,
.temple-text-content::after {
    content: '❖';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #d43f3a;
    /* 改為朱砂色 */
    opacity: 0.5;
    font-size: 1rem;
}

.temple-text-content::before {
    left: 0;
}

.temple-text-content::after {
    right: 0;
}

.temple-text-seal {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(184, 115, 51, 0.3) 50%,
            /* 改為古銅色 */
            transparent 100%);
}

.temple-left {
    margin-right: 2rem;
}

.temple-right {
    margin-left: 2rem;
}

/* 7. 天界分隔線 */
.temple-sacred-divider {
    margin: 4rem auto;
    max-width: 600px;
}

.temple-divider-line {
    height: 3px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(156, 44, 44, 0.8) 20%,
            /* 改為朱砂色 */
            rgba(212, 63, 58, 0.8) 50%,
            /* 改為朱砂色 */
            rgba(156, 44, 44, 0.8) 80%,
            /* 改為朱砂色 */
            transparent 100%);
    position: relative;
    overflow: hidden;
}

.temple-divider-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.8),
            transparent);
    animation: temple-shine 3s infinite;
}

.temple-divider-ornament {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin: 1rem 0;
}

.temple-divider-symbol {
    color: #d43f3a;
    /* 改為朱砂色 */
    opacity: 0.6;
    font-size: 1.4rem;
    animation: temple-symbolGlow 4s infinite alternate;
}

.temple-top .temple-divider-symbol:nth-child(1) {
    animation-delay: 0s;
}

.temple-top .temple-divider-symbol:nth-child(2) {
    animation-delay: 0.5s;
}

.temple-top .temple-divider-symbol:nth-child(3) {
    animation-delay: 1s;
}

.temple-bottom .temple-divider-symbol:nth-child(1) {
    animation-delay: 1.5s;
}

.temple-bottom .temple-divider-symbol:nth-child(2) {
    animation-delay: 2s;
}

.temple-bottom .temple-divider-symbol:nth-child(3) {
    animation-delay: 2.5s;
}

@keyframes temple-shine {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

@keyframes temple-symbolGlow {

    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* ==================== */
/* 8. 四大文房雅器 - 筆墨紙硯 */
/* ==================== */

/* 1. 容器間距優化 - 保持不變 */
.temple-sacred-quarters {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5rem 3rem;
    padding: 4rem 3rem;
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    z-index: 20;
}



/* 容器基本樣式 - 調整為文房雅器 */
.temple-sacred-quarter {
    position: relative;
    perspective: 1200px;
}

/* 背景裝飾改為文房紋理 */
.temple-quarter-bg-decor {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    opacity: 0.05;
    pointer-events: none;
    z-index: 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 光暈效果調整 */
.temple-quarter-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: 110%;
    background: radial-gradient(circle,
            var(--temple-quarter-glow) 0%,
            transparent 70%);
    opacity: 0.08;
    filter: blur(25px);
    pointer-events: none;
    z-index: 2;
}

/* 容器主體 - 調整為文房材質 */
.temple-quarter-container {
    background: var(--temple-quarter-bg);
    border-radius: 12px;
    padding: 3.5rem 2.5rem;
    height: 100%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.3),
        0 0 0 1px var(--temple-quarter-border),
        var(--temple-quarter-shadow);
    z-index: 3;
    backdrop-filter: blur(10px);
    border: 1px solid var(--temple-quarter-border-light);
}

.temple-quarter-container:hover {
    transform:
        translateY(-8px) scale(1.02);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.4),
        0 0 0 2px var(--temple-quarter-color),
        var(--temple-quarter-shadow-hover);
}

/* 容器邊框 - 調整為細緻邊框 */
.temple-container-border {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    pointer-events: none;
    border: 1px solid var(--temple-quarter-border);
    border-radius: 6px;
    opacity: 0.3;
    transition: all 0.5s ease;
}

.temple-quarter-container:hover .temple-container-border {
    opacity: 0.6;
    border-width: 1.5px;
}

/* 容器圖標 - 調整為文房用具抽象圖形 */
.temple-container-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto 2.5rem;
    position: relative;
}

.temple-icon-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130%;
    height: 130%;
    background: var(--temple-icon-aura);
    filter: blur(20px);
    opacity: 0.4;
    animation: temple-iconAura 4s infinite alternate ease-in-out;
}

/* ========================= */
/* 1. 硯台 - 東方觀星 */
/* ========================= */
.temple-quarter-east {
    --temple-quarter-color: #2a5d5d;
    --temple-quarter-dark: #1a4545;
    --temple-quarter-light: #3a7575;
    --temple-quarter-border: #3a7575;
    --temple-quarter-border-light: rgba(58, 117, 117, 0.2);
    --temple-quarter-shadow: 0 4px 20px rgba(42, 93, 93, 0.15);
    --temple-quarter-shadow-hover: 0 8px 30px rgba(42, 93, 93, 0.25);
    --temple-quarter-glow: rgba(42, 93, 93, 0.3);
    --temple-quarter-rgb: 42, 93, 93;
    --temple-quarter-bg: linear-gradient(135deg,
            rgba(245, 248, 247, 0.95) 0%,
            rgba(230, 238, 237, 0.95) 100%);
    --temple-icon-aura: radial-gradient(circle,
            rgba(42, 93, 93, 0.2) 0%,
            transparent 70%);
}

.temple-quarter-east .temple-quarter-bg-decor {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M30,30 Q50,20 70,30 L65,70 Q50,80 35,70 Z' fill='%232a5d5d' opacity='0.05'/%3E%3Ccircle cx='50' cy='40' r='15' fill='%232a5d5d' opacity='0.03'/%3E%3C/svg%3E");
}

.temple-celestial-icon .temple-bronze-circle {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            #3a7575 0%,
            #2a5d5d 30%,
            #1a4545 70%,
            #2a5d5d 100%);
    border-radius: 8px 8px 20px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 4px 20px rgba(0, 0, 0, 0.3),
        0 8px 25px rgba(0, 0, 0, 0.2),
        0 0 0 3px #1a4545;
}

.temple-bronze-texture {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 30% 30%,
            rgba(255, 255, 255, 0.1) 1px,
            transparent 2px),
        radial-gradient(circle at 70% 70%,
            rgba(0, 0, 0, 0.2) 1px,
            transparent 2px);
    background-size: 15px 15px;
    opacity: 0.4;
}

/* 硯池效果 */
.temple-celestial-symbol {
    position: relative;
    width: 70px;
    height: 70px;
    background: radial-gradient(circle at 30% 30%,
            rgba(26, 69, 69, 0.9) 0%,
            rgba(10, 30, 30, 0.95) 100%);
    border-radius: 50%;
    z-index: 2;
    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, 0.6),
        0 0 0 2px rgba(255, 255, 255, 0.1);
}

.temple-celestial-symbol::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background:
        radial-gradient(circle at 40% 40%,
            rgba(255, 255, 255, 0.05) 0%,
            transparent 60%);
    border-radius: 50%;
}

.temple-icon-shine {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    background: radial-gradient(circle at 30% 30%,
            rgba(255, 255, 255, 0.1) 0%,
            transparent 60%);
    animation: temple-inkShine 8s infinite linear;
}

.temple-icon-rings {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.temple-icon-rings .temple-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(58, 117, 117, 0.3);
    border-radius: 50%;
}

.temple-ring.temple-r1 {
    width: 90%;
    height: 90%;
    animation: temple-ringRotate 25s infinite linear;
}

.temple-ring.temple-r2 {
    width: 70%;
    height: 70%;
    animation: temple-ringRotate 20s infinite linear reverse;
}

.temple-ring.temple-r3 {
    width: 50%;
    height: 50%;
    animation: temple-ringRotate 15s infinite linear;
}

/* ========================= */
/* 2. 筆 - 南方靜心 */
/* ========================= */
.temple-quarter-south {
    --temple-quarter-color: #b03a3a;
    --temple-quarter-dark: #8b2b2b;
    --temple-quarter-light: #d45c5c;
    --temple-quarter-border: #b03a3a;
    --temple-quarter-border-light: rgba(176, 58, 58, 0.2);
    --temple-quarter-shadow: 0 4px 20px rgba(176, 58, 58, 0.15);
    --temple-quarter-shadow-hover: 0 8px 30px rgba(176, 58, 58, 0.25);
    --temple-quarter-glow: rgba(176, 58, 58, 0.3);
    --temple-quarter-rgb: 176, 58, 58;
    --temple-quarter-bg: linear-gradient(135deg,
            rgba(255, 248, 248, 0.95) 0%,
            rgba(255, 240, 240, 0.95) 100%);
    --temple-icon-aura: radial-gradient(circle,
            rgba(176, 58, 58, 0.2) 0%,
            transparent 70%);
}

.temple-quarter-south .temple-quarter-bg-decor {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M40,20 L60,20 L70,80 Q50,90 30,80 Z' fill='%23b03a3a' opacity='0.05'/%3E%3Cpath d='M45,25 L55,25 L52,75 Q50,78 48,75 Z' fill='%23b03a3a' opacity='0.03'/%3E%3C/svg%3E");
}

.temple-meditation-icon .temple-red-sandalwood {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            #8b2b2b 0%,
            #b03a3a 30%,
            #d45c5c 60%,
            #b03a3a 90%,
            #8b2b2b 100%);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transform: rotate(-5deg);
    box-shadow:
        inset 0 4px 20px rgba(0, 0, 0, 0.4),
        0 8px 25px rgba(0, 0, 0, 0.2),
        0 0 0 3px #8b2b2b;
}

.temple-wood-grain {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        repeating-linear-gradient(90deg,
            transparent 0px,
            transparent 8px,
            rgba(0, 0, 0, 0.15) 8px,
            rgba(0, 0, 0, 0.15) 10px),
        repeating-linear-gradient(0deg,
            transparent 0px,
            transparent 8px,
            rgba(255, 255, 255, 0.08) 8px,
            rgba(255, 255, 255, 0.08) 10px);
    transform: rotate(5deg);
}

/* 筆尖效果 */
.temple-meditation-symbol {
    position: relative;
    width: 60px;
    height: 40px;
    background: linear-gradient(to bottom,
            #2a1a1a 0%,
            #1a0a0a 100%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    z-index: 2;
    margin-top: 20px;
    box-shadow:
        inset 0 -4px 10px rgba(0, 0, 0, 0.5),
        0 2px 8px rgba(0, 0, 0, 0.3);
}

.temple-meditation-symbol::before {
    content: '';
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 15px;
    background: linear-gradient(to bottom,
            #d45c5c 0%,
            #b03a3a 100%);
    border-radius: 4px 4px 0 0;
}

.temple-icon-flame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(ellipse,
            rgba(212, 92, 92, 0.2) 0%,
            rgba(176, 58, 58, 0.1) 40%,
            transparent 70%);
    animation: temple-inkFlow 3s infinite alternate ease-in-out;
}

/* ========================= */
/* 3. 紙 - 西方藏經 */
/* ========================= */
.temple-quarter-west {
    --temple-quarter-color: #8b6b3d;
    --temple-quarter-dark: #6b4b2d;
    --temple-quarter-light: #ab8b5d;
    --temple-quarter-border: #8b6b3d;
    --temple-quarter-border-light: rgba(139, 107, 61, 0.2);
    --temple-quarter-shadow: 0 4px 20px rgba(139, 107, 61, 0.15);
    --temple-quarter-shadow-hover: 0 8px 30px rgba(139, 107, 61, 0.25);
    --temple-quarter-glow: rgba(139, 107, 61, 0.3);
    --temple-quarter-rgb: 139, 107, 61;
    --temple-quarter-bg: linear-gradient(135deg,
            rgba(255, 252, 245, 0.98) 0%,
            rgba(250, 245, 235, 0.98) 100%);
    --temple-icon-aura: radial-gradient(circle,
            rgba(139, 107, 61, 0.15) 0%,
            transparent 70%);
}

.temple-quarter-west .temple-quarter-bg-decor {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='20' y='20' width='60' height='60' rx='4' fill='%238b6b3d' opacity='0.05'/%3E%3Cpath d='M25,25 L75,25 L80,30 L80,80 L30,80 L25,75 Z' fill='none' stroke='%238b6b3d' stroke-width='0.5' opacity='0.03'/%3E%3C/svg%3E");
}

.temple-pantheon-icon .temple-ancient-book {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            #f5f1e6 0%,
            #e8e0d0 50%,
            #d8ccb8 100%);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 0 30px rgba(139, 107, 61, 0.2),
        0 8px 25px rgba(0, 0, 0, 0.15),
        0 0 0 2px #8b6b3d,
        0 0 0 4px #f5f1e6;
}

.temple-book-cover {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background:
        repeating-linear-gradient(90deg,
            transparent 0px,
            transparent 19px,
            rgba(139, 107, 61, 0.05) 19px,
            rgba(139, 107, 61, 0.05) 20px),
        repeating-linear-gradient(0deg,
            transparent 0px,
            transparent 19px,
            rgba(139, 107, 61, 0.05) 19px,
            rgba(139, 107, 61, 0.05) 20px);
    border: 1px solid rgba(139, 107, 61, 0.1);
}

.temple-cover-gold {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg,
            rgba(171, 139, 93, 0.8) 0%,
            rgba(139, 107, 61, 0.6) 100%);
    border-radius: 50%;
    box-shadow:
        inset 0 0 10px rgba(255, 255, 255, 0.3),
        0 0 15px rgba(139, 107, 61, 0.4);
}

/* 文字圖案 */
.temple-pantheon-symbol {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background:
        linear-gradient(90deg, transparent 45%, rgba(139, 107, 61, 0.6) 50%, transparent 55%),
        linear-gradient(0deg, transparent 45%, rgba(139, 107, 61, 0.6) 50%, transparent 55%);
    border-radius: 50%;
    z-index: 2;
}

.temple-pantheon-symbol::before,
.temple-pantheon-symbol::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background:
        linear-gradient(45deg, transparent 45%, rgba(139, 107, 61, 0.4) 50%, transparent 55%),
        linear-gradient(-45deg, transparent 45%, rgba(139, 107, 61, 0.4) 50%, transparent 55%);
    border-radius: 50%;
}

.temple-book-pages {
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
}

.temple-page {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.temple-page.temple-p1 {
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    transform: rotate(0.5deg);
}

.temple-page.temple-p2 {
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    transform: rotate(-0.3deg);
    background: rgba(255, 255, 255, 0.98);
}

.temple-book-light {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.3) 0%,
            transparent 100%);
}

/* ========================= */
/* 4. 墨 - 北方聽雨 */
/* ========================= */
.temple-quarter-north {
    --temple-quarter-color: #2c2c4d;
    --temple-quarter-dark: #1c1c3d;
    --temple-quarter-light: #3c3c5d;
    --temple-quarter-border: #2c2c4d;
    --temple-quarter-border-light: rgba(44, 44, 77, 0.2);
    --temple-quarter-shadow: 0 4px 20px rgba(44, 44, 77, 0.15);
    --temple-quarter-shadow-hover: 0 8px 30px rgba(44, 44, 77, 0.25);
    --temple-quarter-glow: rgba(44, 44, 77, 0.3);
    --temple-quarter-rgb: 44, 44, 77;
    --temple-quarter-bg: linear-gradient(135deg,
            rgba(248, 248, 252, 0.95) 0%,
            rgba(240, 240, 248, 0.95) 100%);
    --temple-icon-aura: radial-gradient(circle,
            rgba(44, 44, 77, 0.2) 0%,
            transparent 70%);
}

.temple-quarter-north .temple-quarter-bg-decor {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='30' y='20' width='40' height='60' rx='8' fill='%232c2c4d' opacity='0.05'/%3E%3Crect x='35' y='25' width='30' height='50' rx='6' fill='%232c2c4d' opacity='0.03'/%3E%3C/svg%3E");
}

.temple-listening-icon .temple-jade-stone {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            #1c1c3d 0%,
            #2c2c4d 30%,
            #3c3c5d 60%,
            #2c2c4d 90%,
            #1c1c3d 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 4px 30px rgba(0, 0, 0, 0.5),
        0 8px 25px rgba(0, 0, 0, 0.2),
        0 0 0 3px #1c1c3d;
}

.temple-stone-veins {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 30% 30%,
            rgba(60, 60, 93, 0.4) 0%,
            transparent 60%),
        radial-gradient(circle at 70% 70%,
            rgba(28, 28, 61, 0.4) 0%,
            transparent 60%);
    opacity: 0.5;
}

/* 墨錠圖案 */
.temple-listening-symbol {
    position: relative;
    width: 70px;
    height: 50px;
    background: linear-gradient(135deg,
            #0c0c1d 0%,
            #1c1c3d 50%,
            #0c0c1d 100%);
    border-radius: 6px;
    z-index: 2;
    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, 0.6),
        0 0 0 2px rgba(60, 60, 93, 0.3);
    transform: rotate(5deg);
}

.temple-listening-symbol::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background:
        linear-gradient(90deg,
            transparent 30%,
            rgba(60, 60, 93, 0.4) 50%,
            transparent 70%),
        linear-gradient(0deg,
            transparent 30%,
            rgba(60, 60, 93, 0.4) 50%,
            transparent 70%);
    border-radius: 2px;
}

.temple-stone-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 90%;
    background: radial-gradient(ellipse,
            rgba(60, 60, 93, 0.2) 0%,
            rgba(28, 28, 61, 0.1) 40%,
            transparent 70%);
    animation: temple-inkGlow 4s infinite alternate ease-in-out;
}

.temple-icon-ripples {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.temple-icon-ripples .temple-ripple-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(60, 60, 93, 0.3);
    border-radius: 50%;
    animation: temple-ripple 3s infinite linear;
}

.temple-ripple-ring.temple-r1 {
    width: 90%;
    height: 90%;
    animation-delay: 0s;
}

.temple-ripple-ring.temple-r2 {
    width: 110%;
    height: 110%;
    animation-delay: 1s;
}

.temple-ripple-ring.temple-r3 {
    width: 130%;
    height: 130%;
    animation-delay: 2s;
}

/* 容器內容區 - 保持原有結構，只調整顏色 */
.temple-content-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.temple-header-ornament {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--temple-quarter-color) 50%,
            transparent 100%);
    opacity: 0.4;
}

.temple-header-ornament.temple-reverse {
    transform: rotate(180deg);
}

.temple-quarter-title {
    font-family: 'LXGW WenKai Mono TC', monospace;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    color: var(--temple-quarter-dark);
    margin: 0;
    letter-spacing: clamp(0px, 0.2vw, 1px);
}

.temple-title-prefix,
.temple-title-suffix {
    font-family: 'Ma Shan Zheng', cursive;
    color: var(--temple-quarter-color);
    opacity: 0.6;
}

.temple-title-number {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 2.5rem;
    margin: 0 0.8rem;
    color: var(--temple-quarter-color);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.temple-title-text {
    color: var(--temple-quarter-dark);
    font-weight: bold;
    letter-spacing: 2px;
}

.temple-quarter-desc {
    font-family: 'Noto Serif TC', serif;
    font-size: 1.3rem;
    color: #5d4037;
    margin: 1rem 0 2rem;
    font-style: italic;
    letter-spacing: 1px;
    line-height: 1.6;
    text-align: center;
}

/* 精華印記 - 調整為雅緻樣式 */
.temple-quarter-essence {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    padding: 2rem;
    margin: 2rem 0;
    border: 1px solid rgba(var(--temple-quarter-rgb), 0.1);
    backdrop-filter: blur(5px);
}

.temple-quarter-essence::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            var(--temple-quarter-color) 50%,
            transparent 100%);
}

.temple-essence-seal {
    width: 90px;
    height: 35px;
    margin: 0 auto 1.2rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.temple-seal-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid var(--temple-quarter-color);
    border-radius: 4px;
    opacity: 0.4;
}

.temple-seal-text {
    font-family: 'Iansui', cursive;
    font-size: 1rem;
    color: var(--temple-quarter-color);
    font-weight: bold;
    letter-spacing: 1px;
}

.temple-essence-desc {
    font-family: 'Noto Serif TC', serif;
    font-size: 1rem;
    color: #4a4138;
    line-height: 1.7;
    margin: 0;
    text-align: center;
}

/* 按鈕調整 */
.temple-sacred-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1rem 2.2rem;
    border: none;
    border-radius: 4px;
    font-family: 'Noto Serif TC', serif;
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    text-decoration: none;
    letter-spacing: 1px;
    z-index: 2;
    background: var(--temple-btn-bg);
    color: var(--temple-btn-text);
    box-shadow:
        0 2px 8px #0000001a,
        0 1px 3px #00000014,
        inset 0 1px 0 #ffffff33,
        inset 0 -1px 0 #0000001a;
    border: 1px solid var(--temple-btn-border);
}

.temple-sacred-btn:hover {
    transform: translateY(-2px);
    letter-spacing: 1.2px;
    box-shadow:
        0 4px 16px #00000026,
        0 2px 6px #0000001a,
        inset 0 1px 0 #ffffff4d,
        inset 0 -1px 0 #00000026;
    background: var(--temple-btn-bg-hover);
    border-color: var(--temple-btn-border-hover);
}

.temple-sacred-btn:active {
    transform: translateY(0);
    transition-duration: 0.1s;
    box-shadow:
        0 1px 4px #0000001a,
        inset 0 1px 0 #ffffff1a,
        inset 0 -1px 0 #00000033;
}


.temple-btn-text {
    position: relative;
    z-index: 3;
    transition: all 0.3s ease;
}

/* 按鈕圖標 */
.temple-btn-icon {
    position: relative;
    font-size: 1rem;
    transition: all 0.3s ease;
    z-index: 3;
    opacity: 0.8;
}

.temple-sacred-btn:hover .temple-btn-icon {
    transform: translateX(4px);
    opacity: 1;
}

.temple-btn-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #ffffff26, transparent);
    transition: left 0.7s ease;
    z-index: 1;
}

.temple-sacred-btn:hover .temple-btn-glow {
    left: 100%;
}

/* 按鈕材質紋理覆蓋 */
.temple-sacred-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--temple-btn-texture);
    opacity: 0.1;
    z-index: 1;
    pointer-events: none;
}

.temple-sacred-btn::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--temple-btn-corner);
    opacity: 0.5;
    top: 4px;
    left: 4px;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    transition: all 0.3s ease;
}

.temple-sacred-btn .corner-tr,
.temple-sacred-btn .corner-bl,
.temple-sacred-btn .corner-br {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--temple-btn-corner);
    opacity: 0.5;
    transition: all 0.3s ease;
    z-index: 2;
}

/* 裝飾元素調整 */
.temple-quarter-decoration {
    position: absolute;
    pointer-events: none;
    z-index: 4;
}

/* 硯台 - 墨點裝飾 */
.temple-quarter-east .temple-star-field {
    position: absolute;
    top: 20px;
    right: 20px;
}

.temple-quarter-east .temple-star {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--temple-quarter-color);
    border-radius: 50%;
    opacity: 0.4;
    animation: temple-inkDot 3s infinite alternate ease-in-out;
}

.temple-quarter-east .temple-s1 {
    top: 0;
    right: 0;
    animation-delay: 0s;
}

.temple-quarter-east .temple-s2 {
    top: 15px;
    right: 25px;
    animation-delay: 0.5s;
}

.temple-quarter-east .temple-s3 {
    top: 30px;
    right: 10px;
    animation-delay: 1s;
}

.temple-quarter-east .temple-constellation {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 40px;
    height: 30px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cpath d='M10,15 L20,10 L30,20 L25,22 L15,17 Z' fill='none' stroke='rgba(42,93,93,0.2)' stroke-width='0.5'/%3E%3C/svg%3E");
}

/* 筆 - 墨跡裝飾 */
.temple-quarter-south .temple-lotus-petal {
    position: absolute;
    width: 30px;
    height: 10px;
    background: var(--temple-quarter-color);
    border-radius: 50%;
    opacity: 0.1;
    transform: rotate(45deg);
}

.temple-quarter-south .temple-p1 {
    top: 30px;
    left: 30px;
    animation: temple-inkSpread 4s infinite alternate ease-in-out;
}

.temple-quarter-south .temple-p2 {
    bottom: 40px;
    right: 30px;
    animation: temple-inkSpread 4s infinite alternate-reverse ease-in-out;
}

.temple-quarter-south .temple-incense-smoke {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 20px;
    background: radial-gradient(ellipse,
            rgba(var(--temple-quarter-rgb), 0.1) 0%,
            transparent 70%);
    animation: temple-inkFlow 3s infinite ease-in-out;
}

/* 紙 - 文字裝飾 */
.temple-quarter-west .temple-scripture-scroll {
    position: absolute;
    width: 20px;
    height: 30px;
    background: rgba(var(--temple-quarter-rgb), 0.05);
    border: 1px solid rgba(var(--temple-quarter-rgb), 0.1);
    border-radius: 2px;
}

.temple-quarter-west .temple-s1 {
    top: 25px;
    right: 25px;
    transform: rotate(10deg);
}

.temple-quarter-west .temple-s2 {
    bottom: 30px;
    left: 25px;
    transform: rotate(-5deg);
}

.temple-quarter-west .temple-wisdom-light {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    background: radial-gradient(circle,
            rgba(255, 255, 255, 0.1) 0%,
            transparent 70%);
}

/* 墨 - 水波裝飾 */
.temple-quarter-north .temple-rain-curtain {
    position: absolute;
    top: 0;
    right: 20px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom,
            transparent 0%,
            var(--temple-quarter-color) 10%,
            transparent 100%);
    opacity: 0.3;
}

.temple-quarter-north .temple-rain-drop {
    position: absolute;
    width: 2px;
    height: 8px;
    background: var(--temple-quarter-color);
    border-radius: 1px;
    opacity: 0;
    animation: temple-inkDrop 2s infinite linear;
}

.temple-quarter-north .temple-rd1 {
    right: 20px;
    top: 0;
    animation-delay: 0s;
}

.temple-quarter-north .temple-rd2 {
    right: 20px;
    top: 30px;
    animation-delay: 0.7s;
}

.temple-quarter-north .temple-rd3 {
    right: 20px;
    top: 60px;
    animation-delay: 1.4s;
}

.temple-quarter-north .temple-water-ripple {
    position: absolute;
    bottom: 30px;
    left: 30px;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(var(--temple-quarter-rgb), 0.2);
    border-radius: 50%;
    animation: temple-ripple 3s infinite ease-out;
}

/* 新增動畫 */
@keyframes temple-inkShine {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes temple-inkFlow {

    0%,
    100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(0.95);
    }

    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

@keyframes temple-inkGlow {

    0%,
    100% {
        opacity: 0.2;
    }

    50% {
        opacity: 0.4;
    }
}

@keyframes temple-ripple {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.5;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

@keyframes temple-inkDot {

    0%,
    100% {
        opacity: 0.2;
        transform: scale(0.8);
    }

    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

@keyframes temple-inkSpread {

    0%,
    100% {
        transform: rotate(45deg) scale(0.8);
        opacity: 0.05;
    }

    50% {
        transform: rotate(45deg) scale(1.2);
        opacity: 0.15;
    }
}

@keyframes temple-inkDrop {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    10% {
        opacity: 0.5;
    }

    90% {
        opacity: 0.5;
    }

    100% {
        transform: translateY(80px);
        opacity: 0;
    }
}

@keyframes temple-ringRotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes temple-iconAura {

    0%,
    100% {
        opacity: 0.2;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* ==================== */
/* 9. 文房雅器按鈕設計 */
/* ==================== */

/* 基礎按鈕樣式 */
.temple-sacred-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1rem 2.2rem;
    border: none;
    border-radius: 4px;
    font-family: 'Noto Serif TC', serif;
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    text-decoration: none;
    letter-spacing: 1px;
    z-index: 2;
    background: var(--temple-btn-bg);
    color: var(--temple-btn-text);
    box-shadow:
        0 2px 8px #0000001a,
        0 1px 3px #00000014,
        inset 0 1px 0 #ffffff33,
        inset 0 -1px 0 #0000001a;
    border: 1px solid var(--temple-btn-border);
}

.temple-sacred-btn:hover {
    transform: translateY(-2px);
    letter-spacing: 1.2px;
    box-shadow:
        0 4px 16px #00000026,
        0 2px 6px #0000001a,
        inset 0 1px 0 #ffffff4d,
        inset 0 -1px 0 #00000026;
    background: var(--temple-btn-bg-hover);
    border-color: var(--temple-btn-border-hover);
}

.temple-sacred-btn:active {
    transform: translateY(0);
    transition-duration: 0.1s;
    box-shadow:
        0 1px 4px #0000001a,
        inset 0 1px 0 #ffffff1a,
        inset 0 -1px 0 #00000033;
}

/* 按鈕文字 */
.temple-btn-text {
    position: relative;
    z-index: 3;
    transition: all 0.3s ease;
}

/* 按鈕圖標 */
.temple-btn-icon {
    position: relative;
    font-size: 1rem;
    transition: all 0.3s ease;
    z-index: 3;
    opacity: 0.8;
}

.temple-sacred-btn:hover .temple-btn-icon {
    transform: translateX(4px);
    opacity: 1;
}

/* 按鈕光暈效果 */
.temple-btn-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #ffffff26, transparent);
    transition: left 0.7s ease;
    z-index: 1;
}

.temple-sacred-btn:hover .temple-btn-glow {
    left: 100%;
}

/* 按鈕材質紋理覆蓋 */
.temple-sacred-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--temple-btn-texture);
    opacity: 0.1;
    z-index: 1;
    pointer-events: none;
}

/* 按鈕角落裝飾 */
.temple-sacred-btn::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--temple-btn-corner);
    opacity: 0.5;
    top: 4px;
    left: 4px;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    transition: all 0.3s ease;
}

.temple-sacred-btn:hover::after {
    opacity: 0.8;
    transform: scale(1.2);
}

/* 四個按鈕的專屬變數 */

/* 1. 硯台按鈕 - 東方觀星 */
.temple-quarter-east .temple-sacred-btn {
    --temple-btn-bg: linear-gradient(135deg,
            rgba(42, 93, 93, 0.9) 0%,
            rgba(26, 69, 69, 0.95) 100%);
    --temple-btn-bg-hover: linear-gradient(135deg,
            rgba(58, 117, 117, 0.9) 0%,
            rgba(42, 93, 93, 0.95) 100%);
    --temple-btn-text: #f0f7f7;
    --temple-btn-border: rgba(58, 117, 117, 0.4);
    --temple-btn-border-hover: rgba(90, 150, 150, 0.6);
    --temple-btn-corner: #3a7575;
    --temple-btn-texture: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5,5 L15,15 M15,5 L5,15' stroke='%23ffffff' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
}

/* 硯台按鈕的星點裝飾 */
.temple-quarter-east .temple-sacred-btn::before {
    background-image:
        url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5,5 L15,15 M15,5 L5,15' stroke='%23ffffff' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E"),
        radial-gradient(circle at 30% 30%,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 2px),
        radial-gradient(circle at 70% 70%,
            rgba(255, 255, 255, 0.05) 1px,
            transparent 2px);
    background-size: 20px 20px, 10px 10px, 15px 15px;
}

/* 2. 筆按鈕 - 南方靜心 */
.temple-quarter-south .temple-sacred-btn {
    --temple-btn-bg: linear-gradient(135deg,
            rgba(176, 58, 58, 0.9) 0%,
            rgba(139, 43, 43, 0.95) 100%);
    --temple-btn-bg-hover: linear-gradient(135deg,
            rgba(212, 92, 92, 0.9) 0%,
            rgba(176, 58, 58, 0.95) 100%);
    --temple-btn-text: #fff0f0;
    --temple-btn-border: rgba(212, 92, 92, 0.4);
    --temple-btn-border-hover: rgba(230, 120, 120, 0.6);
    --temple-btn-corner: #d45c5c;
    --temple-btn-texture: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='5' y1='10' x2='15' y2='10' stroke='%23ffffff' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
}

/* 筆按鈕的筆觸紋理 */
.temple-quarter-south .temple-sacred-btn::before {
    background-image:
        url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='5' y1='10' x2='15' y2='10' stroke='%23ffffff' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E"),
        linear-gradient(45deg,
            transparent 45%,
            rgba(255, 255, 255, 0.05) 50%,
            transparent 55%);
    background-size: 20px 20px, auto;
}

/* 3. 紙按鈕 - 西方藏經 */
.temple-quarter-west .temple-sacred-btn {
    --temple-btn-bg: linear-gradient(135deg,
            rgba(139, 107, 61, 0.9) 0%,
            rgba(107, 75, 45, 0.95) 100%);
    --temple-btn-bg-hover: linear-gradient(135deg,
            rgba(171, 139, 93, 0.9) 0%,
            rgba(139, 107, 61, 0.95) 100%);
    --temple-btn-text: #fffcf5;
    --temple-btn-border: rgba(171, 139, 93, 0.4);
    --temple-btn-border-hover: rgba(200, 170, 130, 0.6);
    --temple-btn-corner: #ab8b5d;
    --temple-btn-texture: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='5' width='10' height='10' stroke='%23ffffff' stroke-width='0.5' fill='none' opacity='0.1'/%3E%3C/svg%3E");
}

/* 紙按鈕的紙張紋理 */
.temple-quarter-west .temple-sacred-btn::before {
    background-image:
        url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='5' width='10' height='10' stroke='%23ffffff' stroke-width='0.5' fill='none' opacity='0.1'/%3E%3C/svg%3E"),
        repeating-linear-gradient(0deg,
            transparent,
            transparent 1px,
            rgba(255, 255, 255, 0.05) 1px,
            rgba(255, 255, 255, 0.05) 2px);
    background-size: 20px 20px, auto;
}

/* 4. 墨按鈕 - 北方聽雨 */
.temple-quarter-north .temple-sacred-btn {
    --temple-btn-bg: linear-gradient(135deg,
            rgba(44, 44, 77, 0.9) 0%,
            rgba(28, 28, 61, 0.95) 100%);
    --temple-btn-bg-hover: linear-gradient(135deg,
            rgba(60, 60, 93, 0.9) 0%,
            rgba(44, 44, 77, 0.95) 100%);
    --temple-btn-text: #f0f0f8;
    --temple-btn-border: rgba(60, 60, 93, 0.4);
    --temple-btn-border-hover: rgba(90, 90, 130, 0.6);
    --temple-btn-corner: #3c3c5d;
    --temple-btn-texture: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='3' stroke='%23ffffff' stroke-width='0.5' fill='none' opacity='0.1'/%3E%3C/svg%3E");
}

/* 墨按鈕的水波紋理 */
.temple-quarter-north .temple-sacred-btn::before {
    background-image:
        url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='3' stroke='%23ffffff' stroke-width='0.5' fill='none' opacity='0.1'/%3E%3C/svg%3E"),
        radial-gradient(circle at 50% 50%,
            rgba(255, 255, 255, 0.05) 0%,
            transparent 70%);
    background-size: 20px 20px, auto;
}

/* 按鈕四角裝飾元素 */
.temple-btn-corner-tl,
.temple-btn-corner-tr,
.temple-btn-corner-bl,
.temple-btn-corner-br {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--temple-btn-corner);
    opacity: 0.5;
    transition: all 0.3s ease;
    z-index: 2;
}

.temple-btn-corner-tl {
    top: 4px;
    left: 4px;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.temple-btn-corner-tr {
    top: 4px;
    right: 4px;
    clip-path: polygon(100% 0, 100% 100%, 0 0);
}

.temple-btn-corner-bl {
    bottom: 4px;
    left: 4px;
    clip-path: polygon(0 100%, 100% 100%, 0 0);
}

.temple-btn-corner-br {
    bottom: 4px;
    right: 4px;
    clip-path: polygon(100% 100%, 100% 0, 0 100%);
}

.temple-sacred-btn:hover .temple-btn-corner-tl,
.temple-sacred-btn:hover .temple-btn-corner-tr,
.temple-sacred-btn:hover .temple-btn-corner-bl,
.temple-sacred-btn:hover .temple-btn-corner-br {
    opacity: 0.8;
    transform: scale(1.2);
}

/* 按鈕動畫效果 */
@keyframes temple-btnPulse {

    0%,
    100% {
        box-shadow:
            0 2px 8px #0000001a,
            0 1px 3px #00000014,
            inset 0 1px 0 #ffffff33,
            inset 0 -1px 0 #0000001a,
            0 0 0 0 var(--temple-quarter-color);
    }

    50% {
        box-shadow:
            0 2px 8px #0000001a,
            0 1px 3px #00000014,
            inset 0 1px 0 #ffffff33,
            inset 0 -1px 0 #0000001a,
            0 0 10px 2px var(--temple-quarter-glow);
    }
}

/* 按鈕的微互動動畫 */
.temple-sacred-btn {
    animation: temple-btnPulse 4s infinite ease-in-out;
}

.temple-quarter-east .temple-sacred-btn {
    animation-delay: 0s;
}

.temple-quarter-south .temple-sacred-btn {
    animation-delay: 0.5s;
}

.temple-quarter-west .temple-sacred-btn {
    animation-delay: 1s;
}

.temple-quarter-north .temple-sacred-btn {
    animation-delay: 1.5s;
}

.temple-sacred-btn:hover {
    animation: none;
}

/* 按鈕點擊漣漪效果 */
.temple-btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: temple-rippleEffect 0.6s linear;
    pointer-events: none;
    z-index: 1;
}

@keyframes temple-rippleEffect {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* 古籍書籤設計 - 修正版 & 顏色優化 */
.temple-ancient-bookmark {
    position: relative;
    width: 100%;
    max-width: 380px;
    /* 稍微加寬 */
    height: 180px;
    /* 稍微降低高度 */
    margin: 4rem auto;
    perspective: 1200px;
    cursor: pointer;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.15));
}

.temple-bookmark-body {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transform: rotateY(-5deg) rotateX(2deg);
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.temple-ancient-bookmark:hover .temple-bookmark-body {
    transform: rotateY(0deg) rotateX(0deg) translateY(-8px);
}

/* 書脊設計 - 簡化 & 顏色優化 */
.temple-bookmark-spine {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(135deg,
            #a0522d 0%, #b87333 30%, #a0522d 70%, #8b4513 100%);
    /* 優化漸層 */
    border-radius: 4px 0 0 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow:
        inset 0 0 50px #00000066,
        2px 0 10px #00000033;
}

.temple-spine-stitch {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 120px;
    background:
        repeating-linear-gradient(180deg,
            transparent,
            transparent 8px,
            #ffffff1a 8px,
            #ffffff1a 10px);
}

/* 書頁設計 - 修正結構 & 顏色優化 */
.temple-bookmark-page {
    position: absolute;
    left: 40px;
    top: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            #fef9f3 0%,
            /* 改為稍暖的象牙色 */
            #f5ecdf 50%,
            /* 改為稍暖的象牙色 */
            #f0e6d6 100%);
    /* 增加陳舊感 */
    border-radius: 0 8px 8px 0;
    overflow: hidden;
    box-shadow:
        inset 0 0 40px #ffffffcc,
        0 0 0 1px #b8733333,
        /* 改為古銅色 */
        0 5px 20px #0000001a;
}

.temple-page-curl {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: linear-gradient(225deg,
            transparent 50%,
            #b873331a 50%);
    /* 改為古銅色 */
    border-radius: 0 0 0 8px;
}

/* 靠近書脊的印章 - 重新定位 & 顏色優化 */
.temple-near-spine-seal {
    position: absolute;
    left: 15px;
    /* 更靠近書脊 */
    top: 20%;
    transform: translateY(-50%);
    z-index: 3;
}

.temple-spine-seal-circle {
    width: 50px;
    height: 50px;
    border: 2px solid #d43f3a;
    /* 改為朱砂色 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 248, 225, 0.95) 100%);
    box-shadow:
        inset 0 0 15px rgba(212, 63, 58, 0.3),
        /* 改為朱砂色 */
        0 3px 12px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.5);
    position: relative;
}

.temple-spine-seal-text {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 1.8rem;
    color: #9c2c2c;
    /* 改為朱砂色 */
    font-weight: bold;
    position: relative;
    z-index: 2;
}

.temple-spine-seal-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle,
            #d43f3a26 0%,
            /* 改為朱砂色 */
            rgba(212, 63, 58, 0.05) 50%,
            /* 改為朱砂色 */
            transparent 70%);
    border-radius: 50%;
    animation: temple-seal-aura-pulse 3s infinite alternate ease-in-out;
}

/* 主標題區（與印章水平對齊） */
.temple-content-title {
    position: absolute;
    left: 90px;
    /* 印章右邊 */
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    z-index: 2;
}

.temple-title-main {
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 2.4rem;
    color: #3d2b1f;
    margin: 0 0 0.5rem 0;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
    animation: temple-char-float 4s infinite ease-in-out;
}

/* 仿古印記 */
.temple-content-impression {
    position: absolute;
    bottom: 5px;
    right: 5px;
    text-align: right;
    z-index: 2;
}

.temple-impression-text {
    font-family: 'Iansui', cursive;
    font-size: 0.9rem;
    color: #9c2c2c;
    /* 改為朱砂色 */
    letter-spacing: 2px;
    margin-bottom: 0.2rem;
}

.temple-impression-date {
    font-size: 0.7rem;
    color: #b87333;
    /* 改為古銅色 */
    opacity: 0.7;
}

/* 流蘇書籤繩 */
.temple-bookmark-tassel {
    position: absolute;
    top: 0;
    right: 15px;
    z-index: 2;
}

.temple-tassel-cord {
    width: 2px;
    height: 25px;
    background: linear-gradient(to bottom,
            #a0522d 0%,
            /* 改為沙金色 */
            #b87333 100%);
    /* 改為古銅色 */
    margin: 0 auto;
}

.temple-tassel-head {
    position: relative;
    width: 24px;
    height: 32px;
    background: linear-gradient(to bottom,
            #d43f3a 0%,
            /* 改為朱砂色 */
            #9c2c2c 100%);
    /* 改為朱砂色 */
    border-radius: 12px 12px 8px 8px;
    margin: 0 auto;
    box-shadow:
        inset 0 0 10px rgba(0, 0, 0, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.2);
}

.temple-tassel-bead {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: #ffebee;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(255, 235, 238, 0.6);
}

.temple-tassel-threads {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
}

.temple-thread {
    width: 1.5px;
    height: 40px;
    background: linear-gradient(to bottom,
            #d43f3a 0%,
            /* 改為朱砂色 */
            #9c2c2c 30%,
            /* 改為朱砂色 */
            #8b4513 100%);
    animation: temple-tassel-sway 3s infinite ease-in-out;
    transform-origin: top center;
}

.temple-thread:nth-child(1) {
    animation-delay: 0s;
}

.temple-thread:nth-child(2) {
    animation-delay: 0.1s;
}

.temple-thread:nth-child(3) {
    animation-delay: 0.2s;
}

.temple-thread:nth-child(4) {
    animation-delay: 0.3s;
}

/* 陰影 */
.temple-bookmark-base-shadow {
    position: absolute;
    bottom: -15px;
    left: 15px;
    right: 15px;
    height: 20px;
    background: radial-gradient(ellipse,
            #00000026 0%,
            transparent 70%);
    filter: blur(8px);
    z-index: -1;
    opacity: 0.5;
    transform: rotate(-1deg);
}

/* 新增動畫 */
@keyframes temple-seal-aura-pulse {
    0% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

@keyframes temple-char-float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    33% {
        transform: translateY(-2px) rotate(-0.5deg);
        text-shadow:
            1px 1px 2px rgba(255, 255, 255, 0.8),
            -1px -1px 2px rgba(0, 0, 0, 0.05),
            0 0 6px rgba(212, 63, 58, 0.1);
        /* 改為朱砂色 */
    }

    66% {
        transform: translateY(1px) rotate(0.5deg);
    }
}

@keyframes temple-tassel-sway {

    0%,
    100% {
        transform: rotate(-2deg);
    }

    50% {
        transform: rotate(2deg);
    }
}

/* 書頁翻閱動畫（懸停時） */
.temple-ancient-bookmark:hover .temple-page-curl {
    animation: temple-page-curl 1s ease-in-out;
}

@keyframes temple-page-curl {

    0%,
    100% {
        transform: translateX(0) translateY(0);
        opacity: 0.1;
    }

    50% {
        transform: translateX(-5px) translateY(5px);
        opacity: 0.3;
    }
}

/* 修正流蘇位置問題 */
.temple-ancient-bookmark {
    position: relative;
    z-index: 20;
}

.temple-bookmark-tassel {
    z-index: 25;
    /* 確保在最上層 */
}

/* ==================== */
/* Footer 顯示修正 */
/* ==================== */

/* 降低所有背景元素的 z-index */
.temple-cloud-layer,
.temple-light-ray,
.temple-celestial-light {
    z-index: 0 !important;
}

/* 確保 temple 內容在最上層 */
.temple-sacred-header,
.temple-sacred-quarters,
.temple-ancient-bookmark {
    position: relative;
    z-index: 10 !important;
}

/* 修復偽元素的 z-index */
.temple-sacred-entrance::before,
.temple-sacred-entrance::after {
    z-index: 0 !important;
}

/* 確保 temple 頁面的 footer 在最頂層 */
body.page-temple .footer {
    position: relative;
    z-index: 1000 !important;
    background: rgba(0, 0, 0, 0.9) !important;
    color: white !important;
    margin-top: 3rem;
}

/* ==================== */
/* 共跡尋真簃 - 視覺優化修正版 */
/* ==================== */

/* 容器外層 */
.temple-sacred-quarter-horizontal {
    max-width: 900px;
    width: 90%;
    margin: 4rem auto 0;
    position: relative;
    z-index: 20;
}

.temple-research-compact .temple-research-quarter {
    height: 260px;
    /* 增加高度 */
    position: relative;
}

/* 容器主體 */
.temple-research-body {
    background:
        /* 古籍宣紙底色 */
        linear-gradient(145deg,
            rgba(252, 245, 230, 0.98) 0%,
            rgba(245, 235, 215, 0.98) 100%),
        /* 宣紙紋理 */
        url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='rice' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0,0 L20,20 M20,0 L0,20' stroke='rgba(139,69,19,0.04)' stroke-width='0.3'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23rice)'/%3E%3C/svg%3E");
    border-radius: 8px;
    padding: 2.2rem 2.8rem;
    display: flex;
    align-items: stretch;
    /* 垂直撐滿 */
    height: 100%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow:
        inset 0 0 0 1px rgba(255, 248, 225, 0.9),
        inset 0 0 40px rgba(255, 248, 225, 0.8),
        0 10px 40px rgba(139, 69, 19, 0.1),
        0 0 0 1px rgba(160, 120, 80, 0.15);
    border: 1px solid rgba(210, 180, 140, 0.2);
}

.temple-research-body:hover {
    transform: translateY(-3px);
    box-shadow:
        inset 0 0 0 1px rgba(255, 248, 225, 0.95),
        inset 0 0 50px rgba(255, 248, 225, 0.9),
        0 15px 50px rgba(139, 69, 19, 0.15),
        0 0 0 1px rgba(160, 120, 80, 0.25),
        0 0 30px rgba(212, 175, 55, 0.1);
}

/* 左側印章區 */
.temple-research-left {
    flex-shrink: 0;
    margin-right: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.temple-research-seal {
    text-align: center;
}

.temple-research-seal-outer {
    width: 85px;
    height: 85px;
    padding: 7px;
    background: linear-gradient(135deg,
            #8b4513 0%, #a0522d 50%, #8b4513 100%);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow:
        inset 0 0 12px rgba(0, 0, 0, 0.4),
        0 8px 20px rgba(0, 0, 0, 0.25);
    transition: all 0.4s ease;
}

.temple-research-body:hover .temple-research-seal-outer {
    transform: rotate(2deg) scale(1.05);
    box-shadow:
        inset 0 0 15px rgba(0, 0, 0, 0.5),
        0 10px 25px rgba(0, 0, 0, 0.35);
}

.temple-research-seal-inner {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            #f5e6d3 0%, #e8d8c0 100%);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.temple-research-seal-char {
    font-family: 'LXGW WenKai Mono TC';
    font-size: 2.8rem;
    color: #8b4513;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 2;
}

.temple-research-seal-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130%;
    height: 130%;
    background: radial-gradient(circle,
            rgba(212, 175, 55, 0.1) 0%,
            rgba(139, 69, 19, 0.05) 50%,
            transparent 70%);
    animation: temple-research-seal-glow 4s infinite alternate ease-in-out;
}

.temple-research-seal-label {
    margin-top: 1rem;
    font-family: 'Iansui', cursive;
    font-size: 0.95rem;
    color: #5d4037;
    letter-spacing: 2px;
    opacity: 0.9;
}

/* 線裝感分隔線（加長版） */
.temple-research-divider {
    width: 2px;
    height: 200px;
    /* 加長 */
    margin: 0 2.8rem;
    position: relative;
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(139, 69, 19, 0.2) 10%,
            rgba(139, 69, 19, 0.4) 50%,
            rgba(139, 69, 19, 0.2) 90%,
            transparent 100%);
    align-self: center;
}

.temple-research-stitch {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 3px;
    background: #8b4513;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.temple-research-stitch:nth-child(1) {
    top: 15%;
}

.temple-research-stitch:nth-child(2) {
    top: 35%;
}

.temple-research-stitch:nth-child(3) {
    top: 50%;
}

.temple-research-stitch:nth-child(4) {
    top: 65%;
}

.temple-research-stitch:nth-child(5) {
    top: 85%;
}

.temple-research-body:hover .temple-research-stitch {
    opacity: 0.7;
    background: #a0522d;
}

/* 右側內容區 */
.temple-research-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.temple-research-header {
    margin-bottom: 1.2rem;
}

.temple-research-title {
    font-family: 'LXGW WenKai Mono TC';
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    color: #3d2b1f;
    margin: 0 0 0.3rem 0;
    text-shadow: 1px 1px 3px rgba(255, 248, 225, 0.8);
    letter-spacing: clamp(0.5px, 0.3vw, 2px);
}

.temple-research-subtitle {
    font-family: 'Iansui', cursive;
    font-size: 1rem;
    color: #795548;
    letter-spacing: 1.5px;
    opacity: 0.9;
}




/* 右下角按鈕 */
.temple-research-action {
    position: absolute;
    bottom: 1.8rem;
    right: 2.8rem;
    z-index: 5;
}

.temple-research-btn {
    --temple-btn-bg: linear-gradient(135deg,
            rgba(160, 120, 80, 0.9) 0%,
            rgba(139, 69, 19, 0.95) 100%);
    --temple-btn-bg-hover: linear-gradient(135deg,
            rgba(180, 140, 100, 0.9) 0%,
            rgba(160, 120, 80, 0.95) 100%);
    --temple-btn-text: #fff8e1;
    --temple-btn-border: rgba(210, 180, 140, 0.4);
    --temple-btn-border-hover: rgba(230, 200, 160, 0.6);
    --temple-btn-corner: #d2b48c;
    padding: 0.7rem 2rem;
    font-size: 1.05rem;
    box-shadow:
        0 4px 12px rgba(139, 69, 19, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.temple-research-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 6px 18px rgba(139, 69, 19, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* 古風裝飾 */
.temple-research-decor {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.temple-research-ink {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(0, 0, 0, 0.08) 0%,
            transparent 70%);
    filter: blur(1px);
    animation: temple-research-ink-float 8s infinite ease-in-out;
}

.temple-research-ink1 {
    width: 25px;
    height: 25px;
    top: 20px;
    right: 30px;
    animation-delay: 0s;
}

.temple-research-ink2 {
    width: 20px;
    height: 20px;
    bottom: 25px;
    left: 35px;
    animation-delay: 2s;
}

.temple-research-paper-texture {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        repeating-linear-gradient(0deg,
            transparent,
            transparent 1px,
            rgba(139, 69, 19, 0.02) 1px,
            rgba(139, 69, 19, 0.02) 2px);
    opacity: 0.3;
}

/* 線裝感底邊 */
.temple-research-binding {
    position: absolute;
    bottom: -12px;
    left: 30px;
    right: 30px;
    height: 12px;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    z-index: 2;
}

.temple-research-binding-line {
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom,
            #8b4513 0%,
            #a0522d 50%,
            #8b4513 100%);
    border-radius: 1px 1px 0 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.temple-research-binding-line:nth-child(2) {
    height: 80%;
}

.temple-research-binding-line:nth-child(3) {
    height: 60%;
}

/* 動畫 */
@keyframes temple-research-seal-glow {
    0% {
        opacity: 0.1;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

@keyframes temple-research-ink-float {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.06;
    }

    50% {
        transform: translate(3px, -3px) scale(1.1);
        opacity: 0.12;
    }
}