/* ============================================================ */
/* 좌측 사이드바(Sidebar) 스타일                                 */
/* 파일명 : css/sidebar.css                                      */
/* ============================================================ */:root{
    --sidebar-width:calc(var(--spacing-gap-40) * 5 + var(--spacing-gap-20));   /* ★ 사이드바 펼쳤을 때 너비 */;
}
 
/* ============================================================ */
/* 하단 전체 틀 (사이드바 + 우측(콘텐츠+검색창))                 */
/* flex 사용 : 남은 공간을 항상 100% 채움 (grid auto-row 쪼그라듦 방지) */
/* ============================================================ */
.app-lower{
    flex:1;
    min-height:0;
    position:relative;
    display:flex;              /* grid → flex 로 변경 */;
}

/* 사이드바가 펼쳐졌을 때만 표시하는 배경 음영 */
.sidebar-backdrop{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:999;
    background:var(--color-container-overlay);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .25s ease, visibility 0s linear .25s;
}
.app-frame:not(.is-collapsed) .sidebar-backdrop{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:opacity .25s ease;
}
 
/* ============================================================ */
/* 1) 좌측 사이드바 (전체 높이 자동으로 꽉 채움 : flex 기본 stretch) */
/* ============================================================ */
.sidebar{
    position:absolute;
    top:0;
    left:0;
    z-index:1000;
    height:100%;
    width:var(--sidebar-width);
    flex-shrink:0;
    overflow:hidden;
    white-space:nowrap;
    background:var(--color-container-base-primary);
    border-right:var(--border-width-default) solid var(--color-border-base-low);
    transition:transform .25s ease;
}
 
/* 접힘 : 사이드바 폭 0 → 우측 영역이 자동으로 그만큼 넓어짐 */
.app-frame.is-collapsed .sidebar{
    transform:translateX(-100%);
}
 
.sidebar-menu{
    display:flex;
    flex-direction:column;

    padding:var(--spacing-component-y-16) 0;
    width:var(--sidebar-width);   /* 부모가 줄어들어도 내부 폭 유지 → 글자 안 찌그러짐 */;
}
 
/* ============================================================ */
/* 2) 메뉴 버튼 (전부 button 태그)                               */
/* ============================================================ */
.menu-item{
    display:flex;
    align-items:center;

    width:100%;
    padding:var(--spacing-component-y-12) var(--spacing-component-x-20);
    border:none;
    background:transparent;
    cursor:pointer;
    font-size:var(--font-size-16);
    font-weight:var(--font-weight-bold);
    line-height:var(--line-height-body);
    color:var(--color-text-base-primary);
    text-align:left;
}
.menu-item:hover{
    background:var(--color-state-light-hover);
}
.menu-item.is-active{
    background:var(--color-container-brand-secondary);
    color:var(--color-text-brand-primary);
}
.menu-item img{
    width:var(--spacing-gap-24);
    height:var(--spacing-gap-24);
    flex-shrink:0;
}
 
/* ============================================================ */
/* 3) 사이드바 펼치기/줄이기 토글 버튼                            */
/* ============================================================ */
.sidebar-toggle{
    position:absolute;
    top:var(--spacing-gap-16);
    left:var(--sidebar-width);
    transform:translateX(-5%);
    width:var(--spacing-gap-32);
    height:calc(var(--spacing-gap-40) + var(--spacing-gap-8));
    border-top:var(--border-width-default) solid var(--color-border-base-low);
    border-right:var(--border-width-default) solid var(--color-border-base-low);
    border-bottom:var(--border-width-default) solid var(--color-border-base-low);
    border-left:none;
    border-radius:0 var(--radius-small) var(--radius-small) 0;
    background:var(--color-container-base-primary);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    z-index:1001;
    transition:left .25s ease;
}
.sidebar-toggle:hover{
    background:var(--color-state-light-hover);
}
.sidebar-toggle.is-collapsed{
    left:0;
    transform:translateX(-5%);
}
.sidebar-toggle img{
    width:var(--spacing-gap-20);
    height:var(--spacing-gap-20);
    transition:transform .25s ease;
}
.sidebar-toggle.is-collapsed img{
    transform:rotate(180deg);
}
 
/* ============================================================ */
/* 4) 우측 영역 (중앙 콘텐츠 + 검색창, 세로 배치)                 */
/* flex:1 → 사이드바 뺀 나머지 폭 전부 채움                       */
/* ============================================================ */
.app-right{
    flex:1;
    width:100%;
    min-width:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}
 
/* 중앙 콘텐츠 : 페이지별로 이 영역 안쪽만 교체, 남은 높이 전부 채움 */
.main-content{
    flex:1;
    min-height:0;
    overflow:auto;
}
 
/* sidebar.css 맨 아래에 추가 */
@media (max-width: 1279px){
    /* topbar : fixed 아님, app-frame의 flex 자식 그대로 (자연스럽게 맨 위 고정) */
    .topbar{
        flex-shrink:0;
    }
    /* app-lower : padding 필요없음 (topbar가 fixed가 아니므로 이미 자리 차지함) */
    .app-lower{
        padding-top:0;
    }
    /* 사이드바 : fixed 유지하되 top 계산은 0부터 (topbar가 fixed 아니므로 app-lower 기준 0) */
    .sidebar{
        position:absolute;
        top:0;
        left:0;
        height:100%;
        z-index:1000;
    }
    .sidebar-toggle{
        position:absolute;
        top:var(--spacing-gap-16);
    }
}
.sidebar-menu > * + *{margin-top:var(--spacing-gap-20);
}
.menu-item > * + *{margin-left:var(--spacing-gap-12);
}
.menu-item{border-radius:var(--radius-small);
}
.menu-item:active,.sidebar-toggle:active{background:var(--color-state-light-pressed);
}
.menu-item:focus-visible{outline:var(--border-width-focus) solid var(--color-border-brand-primary);outline-offset:calc(-1 * var(--border-width-focus));
}
.sidebar-toggle:focus-visible{outline:var(--border-width-focus) solid var(--color-border-brand-primary);outline-offset:var(--spacing-gap-2);
}