/* 왼쪽 메뉴 (HRUserAccess.md 21절, 2026-09-17 개편)
   1단계(업무) › 2단계(하위 메뉴)를 세로로 두고 한 번에 하나만 펼친다. 3단계는 본문 위 가로 탭(.page-submenu).
   넓은 화면: ‹ 로 접으면 1단계 글자 아이콘만 남는 좁은 줄이 된다(html.sidebar-collapsed, 브라우저가 기억). 좁은 화면(760px 이하): 서랍(body.drawer-open). */
:root { --sidebar-width: 210px; }

.topbar, .legacy-sidebar { display: none !important; }

.sidebar {
    background: #F0F2F6;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--sidebar-width);
    color: #1B1D29;
    z-index: 30;
    padding: 18px 12px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 3px 2px 16px 8px; }
.sidebar .brand { font-size: 24px; font-weight: 750; color: #1B1D29; text-decoration: none; display: flex; align-items: center; gap: 9px; }
.brand-mark { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 7px; background: #3182ce; font-size: 15px; }

.sidebar-collapse, .sidebar-expand, .drawer-close, .menu-toggle {
    border: 0; background: transparent; color: #4a6076; font: inherit; cursor: pointer; border-radius: 6px;
}
.sidebar-collapse, .sidebar-expand { font-size: 26px; line-height: 1; padding: 0 8px 4px; }
.sidebar-expand { display: none; }
.sidebar-collapse:hover, .sidebar-expand:hover, .drawer-close:hover, .menu-toggle:hover { background: #DBE6F7; }
.drawer-close { display: none; font-size: 24px; line-height: 1; padding: 0 8px 3px; }

/* 1단계 */
.category-menu { display: grid; gap: 4px; align-content: start; }
.menu-group { border-radius: 6px; }
.category-link {
    width: 100%;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #1B1D29;
    text-decoration: none;
    padding: 11px 9px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    min-height: 49px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.category-link:hover { background: #E3EAF4; }
.menu-group.is-active > .category-link { background: #DBE6F7; }
.menu-icon {
    display: flex; flex: 0 0 24px; width: 24px; height: 24px; align-items: center; justify-content: center;
    border-radius: 5px; background: #365b7b; color: #fff; font-size: 11px; font-weight: 800;
}
.menu-label { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; }
.chevron { margin-left: auto; font-size: 12px; color: #8eabc2; transition: transform .15s; }
.menu-group.is-open .chevron { transform: rotate(180deg); }

/* 2단계: 15px 글씨, 위아래 여백 8px (2026-09-17 수정 요청 — 5px 는 너무 붙어 보여 되돌림) */
.menu-items { display: grid; gap: 2px; padding: 2px 0 8px 22px; }
.menu-items[hidden] { display: none; }
.menu-item {
    display: flex; align-items: center; gap: 6px;
    font-size: 15px; font-weight: 600; color: #31485d; text-decoration: none;
    padding: 8px 10px 8px 14px; border-radius: 5px;
}
.menu-item:hover { background: #E3EAF4; color: #1B1D29; }
.menu-item.is-active { background: #fff; color: var(--blue-dark); font-weight: 700; }

.sidebar-bottom { margin-top: auto; border-top: 1px solid #cdd7e2; padding: 13px 8px 2px; display: grid; gap: 12px; }
.sidebar-bottom > a { color: #1B1D29; text-decoration: none; }
.side-user { display: flex; justify-content: space-between; align-items: center; color: #1B1D29; font-size: 14px; }
/* 아래 묶음(마스터 설정·비밀번호 변경·이름·로그아웃) 글씨는 화면 크기와 상관없이 14px (2026-09-10 수정 요청) */
.sidebar-bottom, .sidebar-bottom > a, .sidebar-bottom .link-button, .side-user { font-size: 14px; font-family: inherit; }
.link-button { border: 0; padding: 0; background: transparent; color: #1B1D29; cursor: pointer; }

.container.with-sidebar { margin-left: var(--sidebar-width); max-width: calc(1180px + 228px); }

/* 넓은 화면에서 메뉴 접기 (html.sidebar-collapsed): 1단계 글자 아이콘(인·상·나)만 남는 60px 줄.
   아이콘을 누르면 다시 펴지면서 그 묶음이 열린다 (sidebar_menu.js). 본문은 --sidebar-width 를 따라 같이 넓어진다 */
.mobile-bar { display: none; }
@media (min-width: 761px) {
    html.sidebar-collapsed { --sidebar-width: 60px; }
    html.sidebar-collapsed .sidebar { padding: 14px 8px; overflow-x: hidden; }
    html.sidebar-collapsed .sidebar-head { flex-direction: column; gap: 8px; padding: 0 0 12px; }
    html.sidebar-collapsed .brand > span:last-child, html.sidebar-collapsed .sidebar-collapse, html.sidebar-collapsed .menu-label,
    html.sidebar-collapsed .chevron, html.sidebar-collapsed .menu-items, html.sidebar-collapsed .sidebar-bottom { display: none; }
    html.sidebar-collapsed .sidebar-expand { display: inline-block; }
    html.sidebar-collapsed .category-menu { gap: 6px; }
    html.sidebar-collapsed .category-link { justify-content: center; padding: 11px 0; gap: 0; }
}

/* 좁은 화면: 윗줄 ☰ 과 서랍 */
@media (max-width: 760px) {
    .mobile-bar {
        display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 22;
        height: 48px; padding: 0 10px; background: #F0F2F6; border-bottom: 1px solid #cdd7e2;
    }
    .mobile-bar__brand { font-weight: 750; color: #1B1D29; text-decoration: none; font-size: 18px; }
    .menu-toggle { font-size: 22px; line-height: 1; padding: 4px 9px; }
    .sidebar { width: min(280px, 86vw); transform: translateX(-100%); transition: transform .18s ease; z-index: 40; }
    body.drawer-open .sidebar { transform: none; box-shadow: 0 10px 30px #102b4466; }
    .drawer-backdrop { display: none; position: fixed; inset: 0; background: #0b1a2a66; z-index: 35; }
    body.drawer-open .drawer-backdrop { display: block; }
    .drawer-close { display: inline-block; }
    .sidebar-collapse, .sidebar-expand { display: none; }
    .container.with-sidebar { margin-left: 0; max-width: 1180px; }
}

/* 현재 위치: 인사 › 채용 › 결원 확인 */
.page-path { display: flex; flex-wrap: wrap; gap: 6px; margin: -8px 0 10px; font-size: 13px; color: #6b7c8e; }
.page-path__sep { color: #b5c2cf; }
.page-path span:last-child { color: #31485d; font-weight: 650; }

/* 3단계 가로 탭 (계약의 근로계약·연봉계약, 채용의 채용현황… ) */
.page-submenu {
    margin: 0 0 22px;
    padding: 0 0 12px;
    border-bottom: 1px solid #dfe6ed;
}

.page-submenu__items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
}

.page-submenu__items a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 7px 13px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #526273;
    font-size: 15px;
    font-weight: 650;
    text-decoration: none;
}

.page-submenu__items a:hover {
    color: var(--blue-dark);
    background: #edf5fb;
}

.page-submenu__items a.is-active {
    border-color: #c6d9ec;
    color: var(--blue-dark);
    background: #dbeaf8;
}

/* 좁은 화면: 3단계 탭은 한 줄에서 가로로 넘긴다 — 지금 있는 탭이 화면 밖에 숨지 않도록 js/submenu_scroll.js 가 그 자리로 밀어 둔다 */
@media (max-width: 760px) {
    .page-path { margin-top: 0; }
    .page-submenu { margin: 0 0 16px; padding: 0 0 8px; }
    .page-submenu__items {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .page-submenu__items::-webkit-scrollbar { display: none; }
    .page-submenu__items a { flex: 0 0 auto; white-space: nowrap; }
}