/* 排版 */
html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #111111; 
    overflow-x: hidden;
}

body {
    color: #ffffff;
    font-family: "Noto Serif TC", "Microsoft JhengHei", serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    box-sizing: border-box;
    padding: 100px 20px 40px 20px; 
}

*, *:before, *:after {
    box-sizing: inherit;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

/* 核心区 */
.frame-container {
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    margin-bottom: 25px;
}
.frame-container:hover {
    transform: scale(1.015);
}

.wood-frame {
    display: inline-block;
    line-height: 0;
    box-sizing: border-box;
    border-radius: 4px;
    position: relative;
    
    /* 🌟 修正 1：適中的畫框寬度，避免過寬顯得笨重 */
    padding: 20px; 
    
    /* 🌟 修正 2：徹底消滅巧克力感！底色改為沉穩高貴的博物館級古董暗紅木色，
       將原本突兀的木紋對比度降低 90%，使其化為極其細膩、若隱若現的實木內斂肌理 */
    background: 
        repeating-linear-gradient(90deg, 
            rgba(40, 18, 9, 0.06) 0px, 
            rgba(40, 18, 9, 0.06) 3px, 
            rgba(70, 35, 18, 0.04) 3px, 
            rgba(70, 35, 18, 0.04) 6px
        ),
        linear-gradient(135deg, #2d140a 0%, #3f1f11 50%, #200e05 100%);
    background-blend-mode: multiply;

    /* 🌟 修正 3：相框最外圈的硬朗黑檀木實木收邊，確立相框邊界 */
    border: 4px solid #1a0a03;

    /* 🌟 修正 4：黑洞級內凹阶梯矩阵！移除生硬斜線，改用階梯式光影層次創造「物理下沉感」 */
    box-shadow: 
        /* 【外圍大陰影】讓整個相框穩穩懸浮在 #111 背景前方 */
        0 20px 45px rgba(0, 0, 0, 0.9),
        
        /* 【畫框外階梯】在外圈砍出一道內陷的立體層次 */
        inset 0 0 0 2px #4d2615,
        inset 0 0 0 3px #150802,
        
        /* 【溫和的內凹光影】大幅放寬並削弱左上角陰影，告別死黑！
           左上微暗、右下微亮，形成平緩內縮的斗方坡面，視覺瞬間向內凹陷 */
        inset 12px 12px 25px rgba(0, 0, 0, 0.65),
        inset -8px -8px 25px rgba(255, 255, 255, 0.04),
        
        /* 【內部邊緣收緊】在緊貼照片的外側形成一道內收的黑影 */
        inset 0 0 15px rgba(0, 0, 0, 0.85);
}

/* 🌟 🌟 🌟 核心關鍵：為內部照片加上「雙層內襯圈（Liner）」，這是消除“釘在木頭上”感覺的靈魂！ */
.wood-frame img {
    box-sizing: border-box;
    display: block; /* 🌟 核心基础：消除图片作为行内元素的基线和侧边微小间隙 */
    
    /* 🌟 核心修正 1：利用 padding + background 绘制金箔线！
       金箔色作为背景色会完美从 padding 处透出来，100% 显现，且在任何缩放体制下都绝不漏缝 */
    padding: 1px;                 /* 金箔线宽度精确定位 1px */
    background-color: #9c7210;    /* 典雅的古董金箔色 */
    
    /* 🌟 核心修正 2：外层黑檀木固定压条，稳稳包裹在金箔线外面 */
    border: 2px solid #150802;    /* 2px 宽的深色实木内框 */
    
    /* 照片组件整体向下的物理沉降外阴影（不再使用 inset） */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.85); 
    border-radius: 1px;
}

.portrait-img {
    width: 320px; 
    height: 440px;
    object-fit: cover;
    border: 4px solid #140a05; 
    box-shadow: 0 0 15px rgba(0,0,0,0.6);
}

.attendance-box {
    margin: 0 auto 25px auto;
    font-family: "標楷體", "KaiTi", serif;
    background: rgba(35, 16, 7, 0.4);
    padding: 5px 18px;
    border-radius: 20px;
    border: 1px solid rgba(138, 100, 15, 0.25);
    text-align: center;
}
.attendance-label { color: #aaaaaa; font-size: 0.95rem; }
.attendance-count { color: #f1c40f; font-size: 1.25rem; font-weight: bold; margin: 0 3px; }
.attendance-unit { color: #aaaaaa; font-size: 0.95rem; }

.testament-box {
    margin-top: 15px;
    width: 100%;
    position: relative; 
}
.testament-text {
    writing-mode: vertical-rl;
    text-orient: mixed;
    font-family: "標楷體", "BiauKai", "KaiTi", "DFKai-SB", serif;
    height: 440px; 
    text-align: justify;
    color: #dcdee0;
    font-size: 1.25rem;
    line-height: 1.7; 
    letter-spacing: 5px;
    padding: 0 20px; 
    border-left: 1px rgba(255, 255, 255, 0.12) dashed;
    border-right: 1px rgba(255, 255, 255, 0.12) dashed;
    position: relative;
    width: max-content; 
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.3s ease;
}

/* 桌面端优化 */
@media (min-width: 1025px) {
    .testament-text {
        height: 460px !important;       
        line-height: 2.1 !important;     
        letter-spacing: 6px !important;  
        padding: 0 40px !important;      
    }
}

/* 通知横幅 */
.memorial-banner, .status-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #231007; 
    color: #f1c40f;           
    border-bottom: 2px solid #8a640f; 
    padding: 14px 0;
    text-align: center;
    font-family: "標楷體", "BiauKai", serif;
    font-size: 1.05rem;
    font-weight: bold;
    letter-spacing: 5px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
}

.memorial-banner {
    z-index: 10000;
    transform: translateY(0);
    opacity: 1;
}
.memorial-banner.hidden {
    transform: translateY(-100%);
    opacity: 0;
}

.status-banner {
    z-index: 10005; 
    pointer-events: none; 
    transform: translateY(-100%);
    opacity: 0;
}
.status-banner.show {
    transform: translateY(0);
    opacity: 1;
}

/* 导航栏 */
.top-hover-trigger {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 15px;
    z-index: 20000; 
}

.dropdown-nav-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to bottom, #1c0e07, #110804);
    border-bottom: 2px solid #b8860b;
    padding: 12px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    box-shadow: 0 5px 25px rgba(0,0,0,0.9);
    transform: translateY(-100%);
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (min-width: 1025px) {
    body:not(.banner-active) .top-hover-trigger:hover .dropdown-nav-bar,
    body:not(.banner-active) .dropdown-nav-bar:hover {
        transform: translateY(0);
    }
}

body.banner-active .dropdown-nav-bar {
    transform: translateY(-100%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.dropdown-nav-bar.force-show {
    transform: translateY(0) !important;
}

.nav-link {
    color: #f1c40f;
    text-decoration: none;
    font-family: "標楷體", serif;
    font-size: 1.02rem;
    letter-spacing: 1px;
    transition: color 0.2s;
}
.nav-link:hover {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255,255,255,0.6);
}
#minguo-date-display {
    color: #cddee0;
    font-family: "標楷體", serif;
    font-size: 1.02rem;
}

/* 移动端适配 */
.mobile-arrow-hint {
    display: none !important; 
}

.memorial-banner:not(.hidden) ~ .top-hover-trigger .mobile-arrow-hint,
.status-banner.show ~ .top-hover-trigger .mobile-arrow-hint {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.dropdown-nav-bar.force-show + .mobile-arrow-hint {
    opacity: 0 !important;
    pointer-events: none !important;
}

@keyframes arrowBounce {
    /* 讓它在 translateX(-50%) 的基礎上，純粹做微小的 Y 軸上下微動 */
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(3px); }
}

/* 移动端适配 */
@media (max-width: 1024px) {
    body { padding-top: 90px; }
    .wood-frame { 
        padding: 14px; 
        border: 3px solid #1a0a03;
        box-shadow: 
            0 15px 30px rgba(0, 0, 0, 0.9),
            inset 0 0 0 2px #4d2615,
            inset 8px 8px 15px rgba(0, 0, 0, 0.65),
            inset -5px -5px 15px rgba(255, 255, 255, 0.04);
    }
    .wood-frame img {
        padding: 1px;             /* 手机端保持 1px 精细金边 */
        border: 2px solid #150802; /* 保持稳定的黑木压条 */
    }
    .portrait-img {
        width: 58vw; 
        height: calc(58vw * 1.375); 
        max-width: 210px; 
        max-height: 290px;
    }
    .testament-text {
        font-size: 1.12rem; 
        line-height: 1.6;  
        letter-spacing: 4px; 
        height: 310px; 
        padding: 0 15px;
    }
    
    .dropdown-nav-bar { 
        padding: 10px 10px; 
    }
    
    .nav-link, #minguo-date-display { 
        font-size: clamp(11px, 2.8vw, 13px) !important; 
        white-space: nowrap !important;
        letter-spacing: 0px !important;
    }
    /* 🌟 新版：下拉箭頭核心優化狀態（當橫幅隱藏、導覽列收回時的「預設優雅登場狀態」） */
    /* 🌟 完美懸浮圓角矩形版：當橫幅隱藏、導覽列收回時的「預設懸浮狀態」 */
    .mobile-arrow-hint {
        display: block !important;
        position: absolute !important;
        
        /* 🌟 修正 1：與頂端拉開距離！從 19px 移到 25px，讓它優雅地懸浮在網頁靠下方一點的位置 */
        top: 25px !important; 
        
        left: 50% !important;
        transform: translateX(-50%) translateY(0);
        width: 26px !important;     /* 稍微加寬 2px，配合全圓角矩形視覺更和諧 */
        height: 18px !important;    /* 稍微加高，讓內部的箭頭居中更完美 */
        background: rgba(24, 12, 6, 0.85) !important; 
        
        /* 🌟 修正 2：徹底告別「碗」狀！補齊 4 邊的精緻邊框，並加上全方位圓角 */
        border: 1px solid rgba(200, 200, 200, 0.18) !important; /* 均勻的外圈淡淡白線 */
        border-radius: 6px !important; /* 四個角全部變成圓角，形成標準的精緻圓角矩形 */
        
        color: rgba(160, 160, 160, 0.6) !important; 
        cursor: pointer !important;
        z-index: 19000 !important;
        box-shadow: 0 3px 6px rgba(0,0,0,0.4) !important;
        overflow: hidden !important; 
        
        /* 基礎狀態：完全可見、平滑淡入 */
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        /* 動效時序：等橫幅收回後（0.35s），箭頭才花 0.4s 優雅淡入滑下 */
        transition: 
            opacity 0.4s cubic-bezier(0.215, 0.610, 0.355, 1),
            transform 0.4s cubic-bezier(0.215, 0.610, 0.355, 1),
            visibility 0.4s !important;
        transition-delay: 0.35s !important; 

        animation: arrowBounce 2s infinite;
    }

    /* 🌟 修正 3：退場狀態！當橫幅出現或導覽列 force-show 時，箭頭秒隐形並往上縮回 */
    /* 🌟 再次優化：讓箭頭在橫幅出現時「瞬間蒸發」 */
    .memorial-banner:not(.hidden) ~ .top-hover-trigger .mobile-arrow-hint,
    .status-banner.show ~ .top-hover-trigger .mobile-arrow-hint,
    .dropdown-nav-bar.force-show + .mobile-arrow-hint {
        display: block !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        
        /* 🌟 修正 1：加大往上縮回的距離，從 -20px 改為 -40px，確保它完全藏在上方看不見的地方 */
        transform: translateX(-50%) translateY(-40px) !important;
        
        /* 🌟 修正 2：徹底消滅過渡時間（全部改為 0s），
           只要條件觸發，箭頭不進行任何淡出，0 秒直接在畫面上消失！ */
        transition: 
            opacity 0s,
            transform 0s,
            visibility 0s !important;
        transition-delay: 0s !important; 
    }

    /* 🌟 修正 4：讓 SVG 箭頭在圓角矩形內部絕對完美居中 */
    .mobile-arrow-hint svg {
        width: 11px !important;
        height: 11px !important;
        display: block !important;
        margin: 3px auto 0 auto !important; /* 調整為 3px，讓箭頭上下視覺居中 */
    }        
}

/* mini适配 */
@media (max-width: 375px) {
    body { padding-top: 80px; padding-left: 8px; padding-right: 8px; }
    .portrait-img { max-width: 150px; max-height: 206px; }
    .testament-text { font-size: 0.9rem; line-height: 1.4; letter-spacing: 2px; height: 240px; }
    .attendance-box { margin-bottom: 15px; padding: 3px 12px; }
    .nav-link, #minguo-date-display { font-size: 11px !important; }
}