:root {
    --primary-green: #24A535;
    --secondary-green: #599641;
    --light-green: #F1F8F2;
}
body { font-family: 'Noto Sans TC', sans-serif; background-color: #FFFFFF; color: #333333; padding-top: 70px; }
h1, h2, h3, .font-serif { font-family: 'Noto Serif TC', serif; }

/* --- [2] 網頁版 Header (完全維持妳原本的漂亮設定) --- */
header { width: 100%; height: 70px; position: fixed; top: 0; left: 0; z-index: 100; background: #fff; border-bottom: 1px solid #f3f4f6; }
.header_block { width: 100%; max-width: 1060px; height: 70px; padding: 0 20px; margin: 0 auto; display: flex; align-items: center; }
.header-logo { display: block; width: 146px; height: 31px; margin-right: 20px; background-image: url("../image/logo_g.png") !important; background-size: contain; background-repeat: no-repeat; }
.header-btn01 { margin: 0 10px; }
.header-btn01 a { font-size: 15px; padding: 6px 15px; border-radius: 15px; color: #0a4623; box-shadow: inset 0px 0px 0px 1px #0a4623; text-decoration: none; transition: all 0.3s; }
.header-btn01 a:hover { color: #ffffff; background-color: #5db307; box-shadow: none; }
.header-share { margin-left: auto; }

/* --- [3] 頁面組件 (妳原本的 Swiper, Card 效果) --- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.book-card { transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); transform-origin: center bottom; }
.book-card:hover { transform: scale(1.05) translateY(-8px); z-index: 20; }

/* --- [4] 網頁版 Footer --- */
footer { width: 100%; max-width: 1060px; padding: 40px 10px; margin: 0 auto; border-top: 1px solid #eee; }
.footer-nav { margin-bottom: 15px; text-align: center; }
.footer-nav li { display: inline; }
.footer-nav li:after { content: "|"; margin: 0 10px; color: #ccc; }
.footer-nav li:last-child:after { display: none; }
.footer-nav li a { color: #333; text-decoration: none; font-size: 14px; }
.footer-copyright { color: #999; text-align: center; font-size: 12px; }


@media (max-width: 1060px) {
    
    body { padding-top: 65px !important; }

    
    header, .header_block {
        height: 65px !important;
        min-height: 65px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    header {
        overflow: hidden !important; 
        position: fixed !important;
    }
    .header_block {
        padding: 0 10px !important; 
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important; /
        align-items: center !important;
        gap: 6px !important;          
        overflow: hidden !important; 
    }

    
    .header-logo {
        width: 135px !important;      
        height: 29px !important;
        flex: 0 0 135px !important;          
        margin: 0 !important;                
        float: none !important;
        display: flex !important;
    }

    
    .header-btn01 {
        display: inline-block !important; 
        margin: 0 !important;                
        float: none !important;
        flex-shrink: 1 !important;    
    }
    .header-btn01 a {
        font-size: 14px !important;          
        padding: 5px 10px !important;  
        white-space: nowrap !important;      
        border-radius: 20px !important;
    }
    
   
    .header-share { display: none !important; }
    footer { padding: 25px 15px !important; }
    .footer-nav li a { font-size: 12px !important; }
    .footer-copyright { font-size: 10px !important; line-height: 1.6 !important; }
}
    
    nav.sticky div.max-w-7xl { 
        justify-content: center !important; 
        gap: 12px !important; 
        padding: 12px 10px !important; 
    }
    
    nav.sticky button { 
        font-size: 13px !important; 
        white-space: nowrap !important; 
    }
    nav.sticky {
        display: none !important;
    }


@media (max-width: 768px) {
    
    html { font-size: 18.5px !important; }
    
    #hero-section .max-w-7xl {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    #hero-section img[alt="點藏好書"] {
        height: 110px !important; 
        margin-bottom: 20px !important;
    }

    
    #hero-section .group .bg-gradient-to-b {
        width: 100% !important;
        max-width: 380px !important;
        height: max-content !important; 
        aspect-ratio: auto !important;  
        margin: 0 auto !important;
        
        
        padding: 18px !important; 
        
       
        overflow: visible !important;  
        
        border-radius: 35px !important; 
    }
    
    #hero-section .group .bg-gradient-to-b img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important; 
        display: block !important;
        margin: 0 auto !important;
        border-radius: 12px !important; 
    }
} 
#hero-section .group .bg-gradient-to-b > div.absolute:empty,
    #hero-section .group > div.absolute:empty {
        display: none !important;
    }