/* 모바일 메뉴 스타일 */
@media (max-width: 1100px) {
    .desktop-menu {
        display: none;
    }

    .mobile-menu {
        display: block;
        width: 100%;  /* 전체 너비 사용 */
        height: 50px;
    }
    #mobileAccordion {
        width: 100%;
    }

    .navbar-toggler {
        display: block !important;
        padding: .25rem .75rem;
        border: 1px solid rgba(0,0,0,.1);
        background-color: #f8f9fa;
        margin-left: auto;
        height: 80%;
        margin-right: 10px;
        margin-top: 4px;
    }

    .collapse:not(.show) {
        display: none !important;
        flex-basis: auto !important;
    }

    .navbar-toggler-icon {
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    #mobileNav {
        background: aliceblue;
        max-height: 70vh; /* 고정 높이 대신 최대 높이 사용 */
        position: fixed;
        top: 46px;
        left: 0;
        right: 0;
        padding: 1rem;
        
        z-index: 1000;
        -webkit-overflow-scrolling: touch; /* iOS에서 부드러운 스크롤 */
    }

    #mobileNav.show {
        overflow-y: auto; /* scroll 대신 auto 사용 */
    } 
    
    
    #mobileNav .accordion-button {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
    
    #mobileNav .accordion-body {
        padding: 0.5rem 1rem;
    }
    
    #mobileNav .accordion-body a {
        color: #212529;
        text-decoration: none;
        padding: 0.5rem 0;
        display: block;
    }
    
    #mobileNav .accordion-body a:hover {
        color: #0d6efd;
    }

    .sidebar {
        display: none;
    }
    
    .card {
        z-index: 1;
    }

    .main-container {
        position: static;
        width: 100%; 
        padding-right: 20px;
        margin-top: 62px !important;
    }
    .nav-container {
        display:none !important;
    }

    .navigation-bar {
        background-color: #f8f9fa;
        border-bottom: 1px solid #dee2e6;
    }

    .mobile-menu {
        margin-left: 0 !important;
        width: 100%;
    }

    .content-grid {
        grid-template-columns: 1fr;
    }
    
    .status-progress {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .status-arrow {
        margin: 0 0.5rem;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }
}

/* 데스크톱 main-container 스타일 */
@media (min-width: 1100px) {
    .main-container {
        position: absolute;
        top: 80px !important;
        left: 0px !important;
        right: 0;
        margin: 28px;
    }

    .desktop-menu {
        display: block;
    }

    .mobile-menu {
        display: none;
    }
}

/*피드 슬라이드 판넬*/
@media (max-width: 1100px) {
    .feed-mansion {
        width: 100%;
    }

    #post-form {
        width: 100%;
    }

    .mention-list {
        width: 100%;
    }

    .feed-tabs-section {
        overflow: visible;
        width: 100%;
    }

    .feed-item {
        width: 100%;
    }

    .feed-content-body {
        height: 140px !important;
    }
    .comment-feed-content {
        width: 68vw;
    }

    .comment-feed-content button {
        width: 15%;
        height: 33px;  
        white-space: nowrap;
        font-size: 0.7rem;
        margin-left: 5px;
    }

    .comment-item {
        width: 69vw !important;
    }
}

@media (max-width: 800px){
    .main-container {
        position:static;
        width:100%;
        top:120px;
        left:250px;
        right:0;
        padding-right:20px;
    }
    .nav-container {
        display:none;
    }
    .line-break {
        display: block;
    }
}