/* ==================== */
/* 神性回憶錄- 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;
}

.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;
}

@media (max-width: 1200px) {
    .temple-sacred-quarters {
        grid-template-columns: 1fr;
        max-width: 800px;
    }
}

/* 容器基本樣式 - 調整為文房雅器 */
.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: 2.2rem;
    color: var(--temple-quarter-dark);
    margin: 0;
    letter-spacing: 1px;
    white-space: nowrap;
}

.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;
    }
}

/* 響應式調整 */
@media (max-width: 768px) {
    .temple-sacred-btn {
        padding: 0.9rem 1.8rem;
        font-size: 1rem;
        gap: 0.6rem;
    }
    
    .temple-btn-icon {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .temple-sacred-btn {
        padding: 0.8rem 1.5rem;
        font-size: 0.95rem;
        gap: 0.5rem;
    }
    
    .temple-btn-icon {
        font-size: 0.85rem;
    }
}

/* 古籍書籤設計 - 修正版 & 顏色優化 */
.temple-ancient-bookmark {
    position: relative;
    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;
    }
}

/* 響應式 */
@media (max-width: 768px) {
    .temple-ancient-bookmark {
        width: 320px;
        height: 160px;
    }
    
    .temple-title-main {
        font-size: 2rem;
    }
    
    .temple-spine-seal-circle {
        width: 40px;
        height: 40px;
    }
    
    .temple-spine-seal-text {
        font-size: 1.4rem;
    }
    
    .temple-content-title {
        left: 70px;
    }
}

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

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

/* ==================== */
/* 10. 響應式設計 */
/* ==================== */

@media (max-width: 768px) {
    .temple-sacred-header {
        padding: 4rem 1rem 2rem;
    }
    
    .temple-sacred-seal-large {
        width: 180px;
        height: 180px;
        margin-bottom: 3rem;
    }
    
    .temple-seal-inner-square {
        width: 110px;
        height: 110px;
    }
    
    .temple-seal-text-vertical span {
        font-size: 1.6rem;
    }
    
    .temple-sacred-title {
        font-size: 3.5rem;
    }
    
    .temple-text-content {
        font-size: 1.3rem;
    }
    
    .temple-sacred-quarters {
        padding: 1rem;
        gap: 3rem;
    }
    
    .temple-quarter-container {
        padding: 2rem;
    }
    
    .temple-container-icon {
        width: 120px;
        height: 120px;
    }
    
    .temple-quarter-title {
        font-size: 2rem;
    }
    
    .temple-sacred-btn {
        padding: 1rem 2.5rem;
        font-size: 1.1rem;
    }
    
    .temple-center-yin-yang {
        width: 120px;
        height: 120px;
    }
    
    .temple-inscription-main {
        font-size: 2rem;
    }
}

/* 超小螢幕適配 */
@media (max-width: 480px) {
    .temple-sacred-title {
        font-size: 2.8rem;
        letter-spacing: 2px;
    }
    
    .temple-title-number {
        font-size: 2rem;
    }
    
    .temple-quarter-desc {
        font-size: 1.2rem;
    }
    
    .temple-sacred-btn {
        padding: 0.8rem 2rem;
        font-size: 1rem;
    }
}

/* ==================== */
/* 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: 2.4rem;
  color: #3d2b1f;
  margin: 0 0 0.3rem 0;
  text-shadow: 1px 1px 3px rgba(255, 248, 225, 0.8);
  letter-spacing: 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; }
}

/* 響應式 */
@media (max-width: 768px) {
  .temple-research-compact .temple-research-quarter {
    height: auto;
  }
  
  .temple-research-body {
    flex-direction: column;
    padding: 2rem 1.8rem;
    height: auto;
    gap: 2rem;
  }
  
  .temple-research-left {
    margin-right: 0;
    align-items: center;
  }
  
  .temple-research-divider {
    width: 80%;
    height: 2px;
    margin: 0 auto;
    flex-direction: row;
    justify-content: space-around;
  }
  
  .temple-research-stitch {
    position: static;
    transform: none;
    width: 3px;
    height: 12px;
  }
  
  .temple-research-stitch:nth-child(1) { top: auto; }
  .temple-research-stitch:nth-child(2) { top: auto; }
  .temple-research-stitch:nth-child(3) { top: auto; }
  .temple-research-stitch:nth-child(4) { top: auto; }
  .temple-research-stitch:nth-child(5) { top: auto; }
  
  .temple-research-action {
    position: static;
    margin-top: 1.5rem;
    text-align: center;
  }
  
  .temple-research-title {
    font-size: 2rem;
    text-align: center;
  }
  
  .temple-research-subtitle {
    text-align: center;
  }
}