@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html {
        scroll-behavior: smooth;
    }
    body {
        @apply font-song text-ink bg-paper min-h-screen flex flex-col;
    }
    main {
        @apply flex-grow;
    }
    h1, h2, h3, h4, h5, h6 {
        @apply font-kai;
    }
}

@layer components {
    .content-auto {
        content-visibility: auto;
    }
    .text-shadow {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }
    .transition-custom {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

@layer utilities {
    /* 应用于所有元素的滚动条隐藏规则 */
    .scrollbar-hide,
    .scrollbar-hide * {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    /* WebKit浏览器滚动条隐藏 */
    .scrollbar-hide::-webkit-scrollbar,
    .scrollbar-hide *::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        -webkit-appearance: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    /* 确保滚动容器正常工作 */
    .scrollbar-hide {
        overflow: auto !important;
    }
    
    .bg-texture {
        background-color: #f8f8f8;
    }
}

/* 直接为html和body元素添加滚动条隐藏样式，确保最顶层滚动条也被隐藏 */
@layer base {
    html,
    body {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        -webkit-appearance: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
}