@charset "UTF-8";
/* 隱藏捲軸但保留捲動功能 */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
/* 加入 3D 透視空間，賦予翻書真實立體感 */
#zoom-container {
    --zoom: 1;
    transform: scale(var(--zoom));
    transition: transform 0.2s ease-out, opacity 0.2s ease-in-out;
    transform-origin: top center;
    perspective: 3000px; /* 創造 3D 景深 */
}
/* --- 3D 翻書動畫 CSS --- */
.page-flip-right-out {
    animation: flipRightOut 0.4s cubic-bezier(0.4, 0.0, 1, 1) forwards;
    transform-origin: left center;
    z-index: 20;
}
.page-flip-left-in {
    animation: flipLeftIn 0.4s cubic-bezier(0.0, 0.0, 0.2, 1) forwards;
    transform-origin: right center;
    z-index: 20;
}
.page-flip-left-out {
    animation: flipLeftOut 0.4s cubic-bezier(0.4, 0.0, 1, 1) forwards;
    transform-origin: right center;
    z-index: 20;
}
.page-flip-right-in {
    animation: flipRightIn 0.4s cubic-bezier(0.0, 0.0, 0.2, 1) forwards;
    transform-origin: left center;
    z-index: 20;
}
@keyframes flipRightOut {
    0% {
        transform: rotateY(0deg);
        filter: brightness(1) drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    }
    100% {
        transform: rotateY(-90deg) scale(1.02) skewY(2deg);
        filter: brightness(0.6) drop-shadow(-15px 15px 20px rgba(0, 0, 0, 0.4));
    }
}
@keyframes flipLeftIn {
    0% {
        transform: rotateY(90deg) scale(1.02) skewY(-2deg);
        filter: brightness(0.6) drop-shadow(15px 15px 20px rgba(0, 0, 0, 0.4));
    }
    100% {
        transform: rotateY(0deg);
        filter: brightness(1) drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    }
}
@keyframes flipLeftOut {
    0% {
        transform: rotateY(0deg);
        filter: brightness(1) drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    }
    100% {
        transform: rotateY(90deg) scale(1.02) skewY(-2deg);
        filter: brightness(0.6) drop-shadow(15px 15px 20px rgba(0, 0, 0, 0.4));
    }
}
@keyframes flipRightIn {
    0% {
        transform: rotateY(-90deg) scale(1.02) skewY(2deg);
        filter: brightness(0.6) drop-shadow(-15px 15px 20px rgba(0, 0, 0, 0.4));
    }
    100% {
        transform: rotateY(0deg);
        filter: brightness(1) drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    }
}
/* --- 左側目錄自訂美化滾軸 (標準版) --- */
/* 1. 當項目超出 aside 設定的 h-[calc(100vh-3.5rem)] 時，主動產生垂直滾軸，並嚴格隱藏橫向滾軸 */
.custom-scrollbar {
    overflow-y: scroll !important; /* 強制生成縱向軌道，確保初次載入不玩躲貓貓 */
    overflow-x: hidden !important; /* 嚴格禁止左右晃動溢出 */
}
/* 2. 設定滾軸整體的寬度 */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px !important; /* 縱向滾軸寬度鎖定為超細的 6px */
}
/* 3. 滾軸軌道 (底座) 設定 */
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent !important; /* 保持完全透明，完美融合網頁背景 */
}
/* 4. 滾軸滑塊本體 (滑動膠囊) */
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.3) !important; /* 低調的半透明微亮灰 */
    border-radius: 9999px !important; /* 兩端修完美大圓角 */
}
/* 5. 滑鼠游標移上去 (Hover) 時的互動加深 */
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.6) !important;
}
/* 6. 深色模式 (Dark Mode) 專屬高質感微調 */
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.2) !important;
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(14, 165, 233, 0.5) !important; /* 深色模式下移上去散發精緻藍光 */
}

/* --- 專門解決桌機大螢幕雙頁放大時，左邊溢出無法拖曳的防護 CSS --- */
@media (min-width: 768px) {
    /* 當桌機版因為放大而開啟滾動條時 */
    #reader-container[style*="overflow: auto"] {
        display: flex !important;
        align-items: center !important; /* 確保垂直絕對置中不跑位 */
    }
    
    #reader-container[style*="overflow: auto"] #zoom-container {
        /* 在放大狀態下，為左右兩側強行鋪設各 25% 的實體寬度擴展軌道 */
        margin-left: 25% !important;
        margin-right: 25% !important;
    }
}