/* 모바일 메뉴 토글 및 접이식 메뉴 스타일 */

.btn-group {
    gap: 3px !important;
}

#mobileMenuToggle {
    padding: 0.375rem 0.75rem;
    font-size: 18px;
    transition: all 0.3s ease;
}

#mobileMenuToggle.active {
    background-color: #0056b3;
}

.mobile-collapsible {
    transition: all 0.3s ease;
}

.toolbar-btn-with-label {
    padding-top: 20px;
}

.col-md-2.toolbar-btn-with-label {
    width: 110px !important;
}

/* 모바일 화면에서 적용할 스타일 */
@media (max-width: 767.98px) {
    /* 기본적으로 메뉴/필터 영역 숨김 */
    .mobile-collapsible.collapsed {
        display: none !important;
    }
    
    /* 작은 화면에서 버튼 그룹 최적화 */
    .btn-toolbar .btn-group {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .btn-toolbar .btn {
        flex: 1;
        text-align: center;
        white-space: nowrap;
    }
    
    .input-filter .d-md-block {
        flex: 1;
        text-align: center;
        white-space: nowrap;
    }
    
    /* 필터 카드 간소화 */
    .filter-card {
        border: none;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        margin-bottom: 0.5rem;
    }
    
    .filter-card .card-body {
        padding: 0.75rem;
    }
    
    
    /* 펼치기/접기 애니메이션 */
    .mobile-collapsible.slide-down {
        animation: menuSlideDown 0.3s ease forwards;
    }
    
    .mobile-collapsible.slide-up {
        animation: menuSlideUp 0.3s ease forwards;
    }

    .mobile-date {
        width: 100px !important;
    }
}

/* 애니메이션 키프레임 */
@keyframes menuSlideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes menuSlideUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}