/* 전역 사이드바 (spec 2026-09-13 §3.1-3.3).
   폭·레일(64px, 769-1100px)·모바일 드로어 규칙은 index.html 의 인라인 크리티컬
   CSS 에 이미 있고(.admin-sidebar / .admin-sidebar-item / .rail-expand-btn —
   레일 249-269, html.rail-closed 271-283, >=1101px 284-287, <=768px 드로어
   288-347), 이 파일은 아코디언·소그룹·아이콘만 더한다. --navbar-h 는 소비만 한다. */

/* 레일(64px)에서 넘치는 자식이 하나라도 있으면 .admin-sidebar 의 overflow-y:auto
   때문에 overflow-x 가 auto 로 계산되어 가로 스크롤바가 생긴다. 아래에서 폭이
   변하는 요소는 모두 숨기지만, 보험으로 가로 넘침 자체를 막는다. */
.global-sidebar { overflow-x: hidden; }
.global-sidebar .gnav { display: block; }
.global-sidebar .gnav-group { margin-bottom: 2px; }

/* 그룹 헤더: 항목과 같은 좌우 여백·아이콘 열에 맞춘다.
   border-left 3px 는 .admin-sidebar-item (index.html:212) 과 같은 값이다 —
   이게 없으면 64px 레일에서 헤더 아이콘만 1.5px 왼쪽으로 어긋난다 (§3.7.1). */
.global-sidebar .gnav-head {
    display: flex; align-items: center; gap: var(--space-3);
    width: 100%; padding: var(--space-2) var(--space-5);
    border: 0; border-left: 3px solid transparent;
    background: none; cursor: pointer; text-align: left;
    font: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold);
    color: var(--color-text-secondary);
}
.global-sidebar .gnav-head:hover { background: var(--color-surface-hover); color: var(--color-text); }
.global-sidebar .gnav-head:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.global-sidebar .gnav-ico { flex: 0 0 auto; }
.global-sidebar .gnav-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-sidebar .gnav-caret { flex: 0 0 auto; transition: transform var(--transition-fast); opacity: .6; }
.global-sidebar .gnav-group[data-open] > .gnav-head { color: var(--color-text); }
.global-sidebar .gnav-group[data-open] > .gnav-head .gnav-caret { transform: rotate(180deg); }

/* 항목 목록: 접힘은 CSS 만으로 (JS 없이도 서버가 연 그룹이 열려 있다) */
.global-sidebar .gnav-list { list-style: none; margin: 0; padding: 0; }
.global-sidebar .gnav-group:not([data-open]) > .gnav-list { display: none; }
.global-sidebar .gnav-group > .gnav-list > li > .admin-sidebar-item { padding-left: calc(var(--space-5) + 26px); }
.admin-sidebar .gnav-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 관리자 사이드바의 "← 업무로" 는 목록과 구분되게 아래 경계선을 갖는다 (§3.7.3) */
.admin-sidebar .admin-back-item { border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-2); }

/* 소그룹 (관리 3개 · 인사 설정 · 결재/근태의 구역) */
.global-sidebar .gnav-sub { margin-top: var(--space-1); }
.global-sidebar .gnav-sublabel { padding-left: calc(var(--space-5) + 26px); }
.global-sidebar .gnav-sub .admin-sidebar-item { padding-left: calc(var(--space-5) + 26px); }

/* 미결 배지는 빨간색 (approval-sidebar 의 인라인 스타일을 클래스로) */
.global-sidebar .item-count-hot { background: var(--error-100); color: var(--error-700); }

/* 단독 항목 그룹(캘린더·앱)은 헤더가 없으니 들여쓰기도 없다 */
.global-sidebar .gnav-solo > .admin-sidebar-item { padding-left: var(--space-5); }

/* 769-1100px 아이콘 레일과, 폭과 무관하게 사용자가 접어 둔 레일(html.rail-closed).
   레일에서는 **그룹 헤더 아이콘과 단독 항목 아이콘만** 같은 가운데 정렬로 보이고,
   열린 그룹의 항목 목록까지 숨긴다 (§3.7.1 — 그러지 않으면 열린 그룹의 항목
   아이콘이 헤더 아이콘과 섞여 두 열로 보인다). 아이콘 클릭은
   modules/global-sidebar.js 가 레일을 펼치면서 그 그룹을 연다. */
@media (max-width: 1100px) and (min-width: 769px) and (pointer: fine), (max-width: 1100px) and (min-width: 769px) and (pointer: none), (max-width: 1100px) and (min-width: 769px) and (min-height: 501px), (max-width: 1100px) and (min-width: 1001px) {
    .admin-layout:not(.apps-shell) .global-sidebar:not(.rail-open) .gnav-name,
    .admin-layout:not(.apps-shell) .global-sidebar:not(.rail-open) .gnav-caret,
    .admin-layout:not(.apps-shell) .global-sidebar:not(.rail-open) .gnav-head .nav-preview,
    .admin-layout:not(.apps-shell) .global-sidebar:not(.rail-open) .gnav-group > .gnav-list,
    .admin-layout:not(.apps-shell) .global-sidebar:not(.rail-open) .gnav-solo > .admin-sidebar-item .gnav-label,
    html.rail-closed .admin-layout:not(.apps-shell) .global-sidebar .gnav-name,
    html.rail-closed .admin-layout:not(.apps-shell) .global-sidebar .gnav-caret,
    html.rail-closed .admin-layout:not(.apps-shell) .global-sidebar .gnav-head .nav-preview,
    html.rail-closed .admin-layout:not(.apps-shell) .global-sidebar .gnav-group > .gnav-list,
    html.rail-closed .admin-layout:not(.apps-shell) .global-sidebar .gnav-solo > .admin-sidebar-item .gnav-label { display: none; }
    .admin-layout:not(.apps-shell) .global-sidebar:not(.rail-open) .gnav-head,
    html.rail-closed .admin-layout:not(.apps-shell) .global-sidebar .gnav-head { justify-content: center; padding: var(--space-3) 0; gap: 0; }
    .admin-layout:not(.apps-shell) .global-sidebar:not(.rail-open) .gnav-solo > .admin-sidebar-item,
    html.rail-closed .admin-layout:not(.apps-shell) .global-sidebar .gnav-solo > .admin-sidebar-item { padding-left: 0; }
}
@media (min-width: 1101px) {
    html.rail-closed .admin-layout:not(.apps-shell) .global-sidebar .gnav-name,
    html.rail-closed .admin-layout:not(.apps-shell) .global-sidebar .gnav-caret,
    html.rail-closed .admin-layout:not(.apps-shell) .global-sidebar .gnav-head .nav-preview,
    html.rail-closed .admin-layout:not(.apps-shell) .global-sidebar .gnav-group > .gnav-list,
    html.rail-closed .admin-layout:not(.apps-shell) .global-sidebar .gnav-solo > .admin-sidebar-item .gnav-label { display: none; }
    html.rail-closed .admin-layout:not(.apps-shell) .global-sidebar .gnav-head { justify-content: center; padding: var(--space-3) 0; gap: 0; }
    html.rail-closed .admin-layout:not(.apps-shell) .global-sidebar .gnav-solo > .admin-sidebar-item { padding-left: 0; }
}

/* 맨 아래 접기 토글: 펼침 상태는 아이콘 + 라벨, 레일에서는 아이콘만(툴팁은
   rail-tooltip.js 가 title 에서 만든다). 모바일 드로어에는 없다 —
   index.html:244 의 `.rail-expand-btn{display:none}` 기본값이 ≤768px 에서
   그대로 남는다(769px 이상에서만 display:flex 로 켜진다). */
.admin-layout:not(.apps-shell) .admin-sidebar .rail-expand-btn .rail-toggle-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
/* 꺾쇠는 펼침 상태에서 ‹(접기), 레일에서 ›(펼치기) 를 가리킨다. 토글 규칙은
   전부 index.html 의 레일 규칙과 같은 `.admin-layout:not(.apps-shell)` 스코프다
   (K4 — /apps 셸은 자기 토글을 쓴다). 아래 두 덮어쓰기는 base(0,4,1)보다
   특이도가 높아야 이긴다: (0,5,2) · (0,5,1). */
.admin-layout:not(.apps-shell) .admin-sidebar .rail-expand-btn svg { flex: 0 0 auto; transform: rotate(90deg); }
html.rail-closed .admin-layout:not(.apps-shell) .admin-sidebar .rail-expand-btn svg,
.admin-layout:not(.apps-shell) .admin-sidebar:not(.rail-open) .rail-expand-btn svg { transform: rotate(-90deg); }
@media (max-width: 1100px) and (min-width: 769px) and (pointer: fine), (max-width: 1100px) and (min-width: 769px) and (pointer: none), (max-width: 1100px) and (min-width: 769px) and (min-height: 501px), (max-width: 1100px) and (min-width: 1001px) {
    .admin-layout:not(.apps-shell) .admin-sidebar:not(.rail-open) .rail-expand-btn { justify-content: center; padding: var(--space-3) 0; gap: 0; }
    .admin-layout:not(.apps-shell) .admin-sidebar:not(.rail-open) .rail-toggle-label { display: none; }
}
@media (min-width: 769px) and (pointer: fine), (min-width: 769px) and (pointer: none), (min-width: 769px) and (min-height: 501px), (min-width: 1001px) {
    html.rail-closed .admin-layout:not(.apps-shell) .admin-sidebar .rail-expand-btn { justify-content: center; padding: var(--space-3) 0; gap: 0; }
    html.rail-closed .admin-layout:not(.apps-shell) .admin-sidebar .rail-toggle-label { display: none; }
}

/* 대시보드·프로필·내 애플리케이션·캘린더 3종·보관함 2종은 예전 .dashboard-main
   여백을 쓰던 화면이다. admin-layout 으로 옮기면서도 **예전 폭 그대로** 둔다
   (2026-09-14 피드백): main.css:371 의 max-width 1400px · margin 0 auto ·
   padding var(--space-8) 를 그대로 되살리고, 넓은 화면에서는 남은 폭(사이드바
   옆) 안에서 가운데로 놓인다 — .admin-main 은 flex 자식이라 `flex:1` 로 자라도
   max-width 가 잘라 주고 자동 좌우 여백이 남는 자리를 나눈다.
   — 중요 — .admin-main 의 overflow-y:auto / max-height 는 여기서 되돌려
   **문서 스크롤을 유지한다**. 그러지 않으면 이 화면들만 안쪽 스크롤 패널이 되어
   calendar-spa.js:143 의 window.scrollTo({top:0}) 가 무력해진다. */
main.admin-main.dashboard-main { width: 100%; max-width: 1400px; margin-inline: auto; padding: var(--space-8); max-height: none; overflow: visible; }
@media (max-width: 768px), (pointer: coarse) and (max-height: 500px) and (max-width: 1000px) { main.admin-main.dashboard-main { padding: var(--space-4); } }

@media (prefers-reduced-motion: reduce) {
    .global-sidebar .gnav-caret { transition: none; }
}

/* ── 관리 진입: 구분선 + ↗ 아이콘 (N-1c 3) ────────────────────────────────
   여기서 사이드바 종류가 통째로 바뀌는 유일한 링크라, 목록의 다른 항목과
   눈으로 구분되어야 한다. 툴팁 문구는 서버가 title 에 넣는다. */
.admin-sidebar .gnav-sep { border-top: 1px solid var(--color-border); margin-top: var(--space-2); padding-top: var(--space-2); }
.admin-sidebar .gnav-ext { flex: 0 0 auto; opacity: .5; margin-left: 2px; }
.navbar .gnav-ext { opacity: .7; }

/* ── 헤더 메뉴 모드 (N-1c) ────────────────────────────────────────────────
   <html data-nav="header"> 는 서버가 찍는다(nav.mode). 사이드바 마크업은 그대로
   남는다 — ≤768px 드로어와 calendar-history.js 의 syncSidebar 가 그것을 쓴다 —
   아래 규칙은 전부 데스크톱(≥769px)에서만 모양을 바꾼다. */
/* 탭 줄은 **넘치지 않는다** (N-1c 픽스 1): 예전의 overflow-x:auto + 숨긴
   스크롤바는 1440px 에서 마지막 탭(관리 ↗)을 조용히 잘라 닿을 수 없게 만들었고,
   관리 화면에서는 활성 탭이 안 보였다. 줄 바꿈도 스크롤도 없이 맞춘다 — 넘치면
   뒤쪽 탭부터 「더보기 ▾」 목록으로 옮긴다(아래 블록, 인사 화면 일관성 §6). */
/* 탭은 **오른쪽**, 벨·아바타 바로 앞이다 (예전 헤더 그대로 — 2026-09-14 피드백).
   `margin-left:auto` 가 브랜드 뒤의 빈 공간을 없애고, `flex: 0 1 auto` 는 자리가
   모자랄 때만 줄어들게 한다(그때 global-nav.html 의 인라인 스크립트가 넘침을 재어
   뒤쪽 탭을 숨긴다). */
.navbar-tabs { flex: 0 1 auto; min-width: 0; margin-left: auto; margin-right: var(--space-3); gap: 2px; flex-wrap: nowrap; overflow: visible; }
.navbar-tab { white-space: nowrap; padding: var(--space-2); gap: var(--space-1); flex: 0 0 auto; }
.navbar-tab .navbar-tab-label { font-size: 13px; }
.navbar-tab.active { color: #fff; background: rgba(255, 255, 255, .16); font-weight: var(--font-medium); }
.navbar-tab svg { flex: 0 0 auto; }
/* 벨·아바타는 어떤 폭에서도 줄어들거나 밀려나지 않는다 */
.navbar-nav.admin-header-actions { flex: 0 0 auto; }
/* 「더보기 ▾」 (2026-09-29 인사 화면 일관성 §6, priority+): 탭은 언제나 글자를 단다
   (넘치면 활성 탭 말고 전부 아이콘만 남기던 옛 라벨 접기는 없어졌다 — 관리 화면처럼 선택된 탭이 없으면 전부
   아이콘이 되었다). 줄이 실제로 넘칠 때만(재는 것이지 폭 임계가 아니다 — N-1c 픽스 2)
   global-nav.html 의 인라인 스크립트가 뒤쪽 탭부터(선택된 탭은 건너뛴다) hidden 으로
   숨기고 이 단추를 보인다. 목록에는 숨긴 탭의 사본만 보인다. 열기·닫기·키보드는
   modules/nav-more.js. JS 가 없으면 단추는 hidden 그대로, 모든 탭이 보인다. */
.navbar-more-wrap { position: relative; display: flex; flex: 0 0 auto; }
.navbar-more { border: none; background: none; font: inherit; cursor: pointer; }
.navbar-more[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, .16); }
.navbar-tab.navbar-more svg.navbar-more-caret { width: 14px; height: 14px; opacity: .8; transition: transform var(--transition-fast); }
.navbar-more[aria-expanded="true"] .navbar-more-caret { transform: rotate(180deg); }
.navbar-more:focus-visible { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: 1px; }
.navbar-more-list {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: var(--z-dropdown);
    min-width: 200px; max-width: 280px; max-height: calc(100vh - var(--navbar-h, 64px) - 24px); overflow-y: auto;
    margin: 0; padding: var(--space-2); list-style: none;
    background: #fff; border-radius: var(--radius-xl);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 20px 40px -10px rgba(0, 0, 0, .2);
}
.navbar-more-item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg);
    color: var(--gray-700); text-decoration: none; white-space: nowrap;
    font-size: var(--text-sm); font-weight: var(--font-medium);
}
.navbar-more-item svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--gray-500); }
.navbar-more-item:hover, .navbar-more-item:focus-visible { background: var(--gray-100); color: var(--gray-900); outline: none; }
.navbar-more-item:focus-visible { box-shadow: inset 0 0 0 2px var(--primary-500); }
.navbar-more-item .gnav-ext { width: 12px; height: 12px; opacity: .6; }
/* <1200px: 브랜드 글자까지 접어 자리를 낸다 (로고는 남는다). */
@media (min-width: 769px) and (pointer: fine) and (max-width: 1199px), (min-width: 769px) and (pointer: none) and (max-width: 1199px), (min-width: 769px) and (min-height: 501px) and (max-width: 1199px), (min-width: 1001px) and (max-width: 1199px) {
    html[data-nav="header"] .navbar-title { display: none; }
}

@media (min-width: 769px) and (pointer: fine), (min-width: 769px) and (pointer: none), (min-width: 769px) and (min-height: 501px), (min-width: 1001px) {
    /* 그룹 없는 화면(대시보드·캘린더·앱·프로필…)에는 왼쪽 열이 없다 */
    html[data-nav="header"] .global-sidebar[data-nav-empty] { display: none; }
    /* 현재 그룹의 항목만 남는다: 단독 항목(홈·캘린더·앱·관리)은 탭이 되었고,
       다른 그룹은 탭에서 간다. */
    html[data-nav="header"] .global-sidebar .gnav-solo,
    html[data-nav="header"] .global-sidebar .gnav-group:not([data-current]) { display: none; }
    /* 현재 그룹은 아코디언 상태와 무관하게 펼쳐져 있다 */
    html[data-nav="header"] .global-sidebar .gnav-group[data-current] > .gnav-list { display: block; }
    /* 그룹 헤더는 섹션 제목이 된다 — 누를 수 없고 꺾쇠도 없다 */
    html[data-nav="header"] .global-sidebar .gnav-group[data-current] > .gnav-head {
        pointer-events: none; color: var(--color-text-muted);
        font-size: var(--text-xs); letter-spacing: .05em; text-transform: uppercase;
    }
    html[data-nav="header"] .global-sidebar .gnav-caret { display: none; }
    /* 접기 레일이 없으므로 토글도 없다 */
    html[data-nav="header"] .admin-layout .global-sidebar .rail-expand-btn { display: none; }
    /* 형제 그룹이 없으니 아이콘 열에 맞춘 들여쓰기도 필요 없다 */
    html[data-nav="header"] .global-sidebar .gnav-group[data-current] > .gnav-list > li > .admin-sidebar-item,
    html[data-nav="header"] .global-sidebar .gnav-sub .admin-sidebar-item,
    html[data-nav="header"] .global-sidebar .gnav-sublabel { padding-left: var(--space-5); }
}
/* 769-1100px 의 아이콘 레일은 헤더 모드에 없다 (펼칠 토글이 없으니 들어가면
   나올 수 없다) — 그 구간에서도 평범한 260px 열이다. */
@media (max-width: 1100px) and (min-width: 769px) and (pointer: fine), (max-width: 1100px) and (min-width: 769px) and (pointer: none), (max-width: 1100px) and (min-width: 769px) and (min-height: 501px), (max-width: 1100px) and (min-width: 1001px) {
    html[data-nav="header"] .admin-layout:not(.apps-shell) .global-sidebar { width: 260px; }
    html[data-nav="header"] .admin-layout:not(.apps-shell) .global-sidebar .admin-sidebar-item {
        font-size: var(--text-sm); justify-content: flex-start; padding: var(--space-2) var(--space-5); gap: var(--space-3);
    }
    html[data-nav="header"] .admin-layout:not(.apps-shell) .global-sidebar .admin-sidebar-label { display: block; }
    html[data-nav="header"] .admin-layout:not(.apps-shell) .global-sidebar .admin-sidebar-item .item-count,
    html[data-nav="header"] .admin-layout:not(.apps-shell) .global-sidebar .admin-sidebar-item .nav-preview { display: inline-flex; }
    html[data-nav="header"] .admin-layout:not(.apps-shell) .global-sidebar .gnav-name { display: block; }
    html[data-nav="header"] .admin-layout:not(.apps-shell) .global-sidebar .gnav-group[data-current] > .gnav-head {
        justify-content: flex-start; padding: var(--space-2) var(--space-5); gap: var(--space-3);
    }
}

/* 온보딩 마스터 아래의 하위 스위치(투어). 마스터가 꺼지면 JS 가 disabled 를
   걸고, 그 상태를 흐리게 보여 준다. */
.nav-onboarding-sub { margin-left: var(--space-5); }
.nav-onboarding-sub:has(input:disabled), .nav-onboarding-sub[data-disabled="1"] { opacity: .5; }

/* /admin/config 내비게이션 카드의 그룹 목록 (spec §3.7.2). 사이드바 CSS 와 같은
   파일에 두는 이유: 이 목록이 그리는 것이 곧 사이드바의 순서·표시다. */
.nav-layout-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.nav-layout-group + .nav-layout-group { border-top: 1px solid var(--color-border); }
.nav-layout-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); }
.nav-layout-show { flex: 1 1 auto; min-width: 0; margin: 0; }
.nav-layout-group.gated .nav-layout-show span { color: var(--color-text-muted); }
.nav-layout-items { list-style: none; margin: 0; padding: 0 var(--space-3) var(--space-3) var(--space-6);
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-1); }
.nav-layout-items label { font-size: var(--text-sm); }