/**
 * 장애인자립생활센터 인트라넷 - 모바일 반응형 스타일시트
 *
 * 768px 이하에서 사이드바를 숨기고 햄버거 메뉴로 전환한다.
 * 사이드바는 .open 클래스 토글로 오버레이 형태로 표시된다.
 *
 * @요구사항 1.9
 */

@media (max-width: 768px) {
    /* Hide sidebar off-screen by default */
    .sgcil-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    /* Show sidebar when .open class is added via JS */
    .sgcil-sidebar.open {
        transform: translateX(0);
    }

    /* Show dark overlay behind sidebar */
    .sgcil-sidebar-overlay.active {
        display: block;
    }

    /* Content takes full width (no sidebar offset) */
    .sgcil-content {
        margin-left: 0;
    }

    /* Show hamburger menu button */
    .sgcil-hamburger {
        display: block !important;
    }

    /* Hide header logo on mobile to save space */
    .sgcil-logo {
        display: none;
    }

    /* Tighter header padding */
    .sgcil-header {
        padding: 0 12px;
    }

    /* Shrink search bar margins */
    .sgcil-header-center {
        margin: 0 8px;
    }

    /* Hide profile name text on mobile */
    .sgcil-profile-name {
        display: none;
    }

    /* Reduce page content padding */
    .sgcil-page {
        padding: 16px;
    }

    /* Notification dropdown: full-width on mobile */
    .sgcil-noti-dropdown {
        position: fixed;
        top: var(--sgcil-header-height);
        left: 0;
        right: 0;
        width: auto;
        border-radius: 0;
    }

    /* Profile dropdown: align to right edge */
    .sgcil-profile-dropdown {
        right: -8px;
    }

    /* Tables: horizontal scroll on small screens */
    .sgcil-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Cards: reduce padding */
    .sgcil-card {
        padding: 16px;
    }

    /* Page title: smaller on mobile */
    .sgcil-page-title {
        font-size: 18px;
    }
}
