/*
   서중한합회 행정 시스템 — 메뉴 디자인 시안 D (Glass, macOS 시스템 설정 계열)
   2026-10-18
   사이드바의 「모양」만 바꾼다. HTML 구조·권한(menu-access.js)·이동(navTo)·
   펼치기(toggleSbGroup)·접기(toggleSidebar)·배지 갱신 코드는 그대로 쓴다.
   main.css 보다 뒤에 불러오며, 우선순위를 확실히 하려고 모든 규칙을 #sidebar 아래에 둔다.
   되돌리기: index.html 에서 이 파일의 <link> 한 줄을 빼면 기존 디자인으로 돌아간다.
*/

/* 2026-10-18 수정: 떠 있는 카드(여백·둥근 모서리·그림자)가 본문과 분리돼 보여서,
   화면 왼쪽에 붙이고 상단바와 같은 흰 배경·같은 경계선으로 이어지게 했다. 폭은 260 → 236px. */
#sidebar {
  --gl-line: var(--border, #dde5ef);       /* 상단바(#topbar)와 같은 경계선 색 */
  --gl-ink: #1d1d1f;
  --gl-sub: #6e6e73;
  --gl-faint: #8e8e93;
  --gl-hover: rgba(0, 0, 0, .045);
  --gl-fill: rgba(118, 118, 128, .12);
  --gl-select: #1e3a5f;                    /* 선택 행 — 브랜드 네이비(main.css --primary) */
  --gl-ease: cubic-bezier(.2, .8, .2, 1);
  background: #fff;
  border-right: 1px solid var(--gl-line);
  box-shadow: none;
  transition: width .32s var(--gl-ease), min-width .32s var(--gl-ease);
}
#sidebar:not(.collapsed) { width: 236px; min-width: 236px; }

/* ── 머리(로고): 상단바와 같은 높이(60px)·같은 아래 경계선으로 가로줄이 이어지게 ── */
#sidebar .sb-header { display: flex; align-items: center; height: 60px; padding: 0 44px 0 14px; background: none; border-bottom: 1px solid var(--gl-line); }
#sidebar .sb-logo { gap: 10px; }
#sidebar .sb-logo-badge { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(160deg, #2d5485, #142844); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25); }
#sidebar .sb-logo-badge .sda-logo-img { width: 24px; }
#sidebar .sb-logo-text { white-space: nowrap; overflow: hidden; }
#sidebar .sb-logo-text h1 { color: var(--gl-ink); font-size: 14px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
#sidebar .sb-logo-text span { color: var(--gl-sub); font-size: 11px; }

/* 접기 버튼: 패널 밖 금색 원 → 머리 안 오른쪽의 조용한 아이콘 버튼 */
#sidebar .sb-toggle { right: 10px; top: 16px; width: 28px; height: 28px; border-radius: 7px; background: none; box-shadow: none; }
#sidebar .sb-toggle:hover { background: var(--gl-hover); }
#sidebar .sb-toggle i { color: var(--gl-sub); font-size: 12px; }

/* ── 사용자 카드 ── */
#sidebar .sb-user-card { margin: 8px 8px 4px; padding: 8px; border-radius: 10px; background: none; border-bottom: 0; }
#sidebar .sb-avatar { width: 34px; height: 34px; color: #fff; font-size: 14px; font-weight: 700; background: linear-gradient(160deg, #f5c842, #c88a10); }
#sidebar .sb-user-name { color: var(--gl-ink); font-size: 13.5px; font-weight: 600; }
#sidebar .sb-user-dept { color: var(--gl-sub); font-size: 11.5px; }

/* ── 메뉴 목록 ── */
#sidebar .sb-nav { padding: 2px 8px 12px; scrollbar-width: thin; scrollbar-color: transparent transparent; }
#sidebar .sb-nav:hover { scrollbar-color: rgba(0, 0, 0, .18) transparent; }
#sidebar .sb-nav::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .15); }
#sidebar .sb-group { margin: 0; }

/* 구분 제목(업무·자료·계정) — 아래 메뉴가 모두 숨겨지면 sidebar-search.js 가 sb-title-empty 를 붙인다 */
#sidebar .sb-section-title { padding: 14px 10px 4px; font-size: 11px; font-weight: 600; color: var(--gl-faint); letter-spacing: .02em; user-select: none; }
#sidebar .sb-section-title.sb-title-empty { display: none; }

/* 메뉴 검색창 */
#sidebar .sb-search { position: relative; flex-shrink: 0; margin: 0 8px 6px; }
#sidebar .sb-search i { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--gl-faint); pointer-events: none; }
#sidebar .sb-search input { width: 100%; height: 30px; padding: 0 30px 0 28px; border: 0; border-radius: 8px; background: var(--gl-fill); font: inherit; font-size: 13px; color: var(--gl-ink); outline: none; }
#sidebar .sb-search input::placeholder { color: var(--gl-faint); }
#sidebar .sb-search input:focus { background: #fff; box-shadow: 0 0 0 2px rgba(30, 58, 95, .35); }
#sidebar .sb-search kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 2px 5px; border: 1px solid var(--gl-line); border-radius: 4px; font: 600 10px/1 inherit; color: var(--gl-faint); pointer-events: none; }
#sidebar .sb-search input:focus ~ kbd,
#sidebar .sb-search input:not(:placeholder-shown) ~ kbd { display: none; }
/* 검색에 안 맞는 메뉴(권한 숨김은 style.display 로 따로 처리되므로 이 클래스와 무관) */
#sidebar .sb-search-hide { display: none !important; }

/* 한 줄(대메뉴 머리·단독 메뉴·하위 메뉴 공통) */
#sidebar .sb-item,
#sidebar .sb-group-header {
  gap: 10px; min-height: 32px; margin: 0; padding: 0 8px;
  border: 0; border-radius: 8px; background: none;
  transition: background-color .15s ease;
}
#sidebar .sb-item:hover,
#sidebar .sb-group-header:hover,
#sidebar .sb-group.open .sb-group-header { background: none; }
#sidebar .sb-item:hover,
#sidebar .sb-group-header:hover { background: var(--gl-hover); }
#sidebar .sb-label,
#sidebar .sb-group-header .sb-label,
#sidebar .sb-group.open .sb-group-header .sb-label { color: var(--gl-ink); font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; }

/* 색 타일: 대메뉴 머리·단독 메뉴의 첫 아이콘을 둥근 사각형 + 흰 글리프로 */
#sidebar .sb-group-header i:first-child,
#sidebar .sb-solo .sb-item i,
#sidebar > .sb-nav > .sb-item i,
#sidebar .sb-bottom .sb-item i {
  display: grid; place-items: center; width: 22px; height: 22px; flex: none;
  border-radius: 6px; color: #fff; font-size: 11px;
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .08);
}
#sidebar .sb-solo .sb-item[data-view="office"] i     { background: linear-gradient(180deg, #7b7aee, #4b49c9); }
#sidebar .sb-solo .sb-item[data-view="exec-dash"] i  { background: linear-gradient(180deg, #f5c842, #d39a12); }
#sidebar > .sb-nav > .sb-item i                     { background: linear-gradient(180deg, #3d6aa3, #1e3a5f); }
/* 대메뉴 색은 예전 메뉴(main.css 「그룹별 색상」)의 색을 그대로 이어 쓴다(2026-10-18) — 사용자가 익힌 「색 = 메뉴」 유지 */
#sidebar #sbg-docs .sb-group-header i:first-child    { background: linear-gradient(180deg, #60a5fa, #2563eb); color: #fff; }
#sidebar #sbg-leave .sb-group-header i:first-child   { background: linear-gradient(180deg, #34d399, #059669); color: #fff; }
#sidebar #sbg-cash .sb-group-header i:first-child    { background: linear-gradient(180deg, #84cc16, #4d7c0f); color: #fff; }
#sidebar #sbg-event .sb-group-header i:first-child   { background: linear-gradient(180deg, #fbbf24, #d97706); color: #fff; }
#sidebar #sbg-minutes .sb-group-header i:first-child { background: linear-gradient(180deg, #2dd4bf, #0d9488); color: #fff; }
#sidebar #sbg-rules .sb-group-header i:first-child   { background: linear-gradient(180deg, #38bdf8, #0284c7); color: #fff; }
#sidebar #sb-trip-section .sb-group-header i:first-child { background: linear-gradient(180deg, #fb923c, #ea580c); color: #fff; }
#sidebar #sbg-population .sb-group-header i:first-child { background: linear-gradient(180deg, #f472b6, #db2777); color: #fff; }
#sidebar #sbg-basic .sb-group-header i:first-child   { background: linear-gradient(180deg, #a78bfa, #7c3aed); color: #fff; }
#sidebar #sbg-account .sb-group-header i:first-child { background: linear-gradient(180deg, #a5b4c4, #64748b); color: #fff; }
#sidebar #sb-admin-section .sb-group-header i:first-child { background: linear-gradient(180deg, #f87171, #dc2626); color: #fff; }
#sidebar .sb-bottom .sb-item i                      { background: linear-gradient(180deg, #a5a5ab, #77777d); }

/* 펼침 화살표: 오른쪽(›) → 펼치면 아래로 (main.css 의 !important 를 덮는다) */
#sidebar .sb-chevron { color: var(--gl-faint) !important; font-size: 10px !important; transform: rotate(-90deg); transition: transform .25s var(--gl-ease) !important; }
#sidebar .sb-group.open .sb-chevron { transform: rotate(0deg); color: var(--gl-faint) !important; }

/* 하위 메뉴: 타일 없이 작은 회색 글리프, 이름 줄을 대메뉴 이름과 맞춘다 */
#sidebar .sb-group-body { transition: max-height .3s var(--gl-ease); }
#sidebar .sb-group-body .sb-item { min-height: 30px; padding-left: 40px; }
#sidebar .sb-group-body .sb-item:first-child { margin-top: 2px; }
#sidebar .sb-group-body .sb-item:last-child { margin-bottom: 4px; }
#sidebar .sb-group-body .sb-item i { width: 14px; font-size: 12px; color: var(--gl-sub); opacity: .85; }
#sidebar .sb-group-body .sb-label { color: var(--gl-sub); font-weight: 400; }
#sidebar .sb-group-body .sb-item:hover .sb-label,
#sidebar .sb-group-body .sb-item:hover i { color: var(--gl-ink); }

/* 현재 위치: 네이비로 채우고 글자·아이콘은 흰색(이 한 곳만 강조) */
#sidebar .sb-item.active { background: var(--gl-select); }
#sidebar .sb-item.active .sb-label { color: #fff; font-weight: 500; }
#sidebar .sb-item.active i { color: #fff; }   /* 글리프에 font-weight 를 주면 Font Awesome 아이콘이 빈 네모로 깨진다 */
#sidebar .sb-item.active:hover { background: var(--gl-select); }
/* 네이비 행 위의 네이비 타일(대시보드)이 묻히지 않게 흰 테두리 */
#sidebar .sb-solo .sb-item.active i,
#sidebar > .sb-nav > .sb-item.active i { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }

/* 건수 배지: 회색 캡슐, 처리할 일(결재 승인함·사무실 새 메시지)은 빨강 */
#sidebar .sb-badge { min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; font-size: 11px; font-weight: 600; line-height: 18px; color: var(--gl-sub); background: var(--gl-fill); }
#sidebar #sb-badge-approval,
#sidebar #sb-badge-office { color: #fff; background: #ff3b30; }
#sidebar .sb-item.active .sb-badge { color: var(--gl-select); background: #fff; }

/* ── 아래(로그아웃) ── */
#sidebar .sb-bottom { padding: 8px; border-top: 1px solid var(--gl-line); }
#sidebar .sb-bottom .sb-label { color: var(--gl-sub); }

/* ── 접힌 상태(아이콘만) ── */
#sidebar.collapsed .sb-header { justify-content: center; padding: 0; }
#sidebar.collapsed .sb-logo { justify-content: center; }
/* 접힌 상태의 펴기 버튼: 머리 높이를 지키려고 오른쪽 경계선 위의 작은 원으로 */
#sidebar.collapsed .sb-toggle { right: -12px; top: 18px; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 1px solid var(--gl-line); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
#sidebar.collapsed .sb-user-card { justify-content: center; margin: 8px 6px 6px; }
#sidebar.collapsed .sb-nav { padding: 2px 6px 12px; }
#sidebar.collapsed .sb-search { display: none; }
/* 접히면 구분 제목은 글자 대신 가는 구분선으로 */
#sidebar.collapsed .sb-section-title { height: 0; margin: 6px 6px; padding: 0; overflow: hidden; border-top: 1px solid var(--gl-line); }
#sidebar.collapsed .sb-item,
#sidebar.collapsed .sb-group-header { justify-content: center; min-height: 36px; padding: 0; }
#sidebar.collapsed .sb-item i { margin: 0; }
#sidebar.collapsed .sb-bottom { padding: 8px 6px; }
/* 접히면 하위 메뉴가 안 보이므로, 선택된 하위 메뉴가 든 묶음 머리를 옅게 표시 */
#sidebar.collapsed .sb-group:has(.sb-group-body .sb-item.active) .sb-group-header { background: var(--gl-fill); }

/* ── 휴대폰(600px 이하): 화면 왼쪽에서 나오는 기존 방식 유지, 열렸을 때만 그림자로 본문과 구분 ── */
@media (max-width: 600px) {
  .sb-open #sidebar { box-shadow: 8px 0 24px rgba(0, 0, 0, .12); }
}
@media (prefers-reduced-motion: reduce) {
  #sidebar, #sidebar .sb-group-body, #sidebar .sb-chevron, #sidebar .sb-item, #sidebar .sb-group-header { transition: none !important; }
}