/* 사이드바 최적화를 위한 CSS */

/* 사이드바 하드웨어 가속 활성화 */
.sidebar {
    will-change: transform, width;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 사이드바 배경 요소 최적화 */
.sidebar-backdrop {
    will-change: opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 메인 콘텐츠 영역 최적화 */
.main {
    will-change: margin-left;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 사이드바 내부 요소 최적화 */
.sidebar-body {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 사이드바 헤더 최적화 */
.sidebar-header {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

/* 사이드바 트랜지션 최적화 */
@media (min-width: 992px) {
    body .sidebar {
        transition: width 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    body .main {
        transition: margin-left 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
}

@media (max-width: 991.98px) {
    body .sidebar {
        transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    
    .sidebar-backdrop {
        transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
}

/* 사이드바 펼치기/접기 상태 최적화 */
body.sidebar-collapse .sidebar {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
}

body.sidebar-collapse .main {
    margin-left: 60px !important;
}

body.sidebar-expand .sidebar {
    transform: translateX(0);
}

/* 사이드바 초기 로드 시 깜박임 방지 */
.sidebar-loading {
    visibility: hidden;
    opacity: 0;
}

.sidebar-loaded {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.1s ease-out;
}

/* 메뉴 아이템 최적화 */
.nav-item {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* 메뉴 아이콘 최적화 */
.nav-icon {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}