/* 기본 스크롤바 스타일 */
* {
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(35, 129, 255) transparent;
}

/* Webkit 기반 브라우저 (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(35, 129, 255);
    border-radius: 3px;
    opacity: 1;
    transition: all 1s ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(35, 129, 255);
}

/* Safari 특별 처리 */
@media not all and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) {
        ::-webkit-scrollbar {
            width: 6px;
            background-color: transparent;
        }
        
        ::-webkit-scrollbar-thumb {
            background-color: rgba(35, 129, 255);
            border-radius: 3px;
            transition: all 1s ease-in-out;
        }
        
        .hide-scrollbar::-webkit-scrollbar-thumb {
            background-color: transparent;
        }
    }
}

/* 스크롤바 페이드아웃 효과 */
.hide-scrollbar::-webkit-scrollbar-thumb {
    opacity: 0;
}

/* Firefox 페이드아웃 효과 */
.hide-scrollbar {
    scrollbar-color: transparent transparent;
}

/* iOS/iPadOS Safari 대응 */
@supports (-webkit-touch-callout: none) {
    ::-webkit-scrollbar {
        width: 6px;
    }
    
    ::-webkit-scrollbar-thumb {
        background-color: rgba(35, 129, 255);
        opacity: 1;
        transition: opacity 1s ease-in-out;
    }
    
    body {
        -webkit-overflow-scrolling: touch;
    }
}

/* 다크모드 대응 */
@media (prefers-color-scheme: dark) {
    * {
        scrollbar-color: rgba(35, 129, 255) transparent;
    }
    
    ::-webkit-scrollbar-thumb {
        background-color: rgba(35, 129, 255);
    }
    
    ::-webkit-scrollbar-thumb:hover {
        background-color: rgba(35, 129, 255);
    }
}

/* 태블릿 대응 */
@media (max-width: 1024px) {
    ::-webkit-scrollbar {
        width: 5px;
    }
}

/* 모바일 대응 */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 4px;
    }
}