/* 현재시각 블록(.sidebar-tz)은 2026-08-21 헤더로 이관 → layout.css .header-clock */

/* 사이드바: 서브 있는 부모만 폴더 SVG + chevron, 링크는 텍스트만 */
.sidebar-test-nav {
    list-style: none;
    margin: 0;
    padding: 0 4px 12px;
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    /* 부모 행: padding-left + 아이콘 + gap = 텍스트 시작 — 서브 리프는 동일 위치로 맞춤.
       --sbx-icon-w / --sbx-icon-gap 은 .sidebar 에 있다. */
    --sbx-pl-root: 12px;
    --sbx-pl-sub: 8px;
    --sbx-text-inset-root: calc(var(--sbx-pl-root) + var(--sbx-icon-w) + var(--sbx-icon-gap));
    --sbx-text-inset-sub: calc(var(--sbx-pl-sub) + var(--sbx-icon-w) + var(--sbx-icon-gap));
    /* 서브메뉴 열림: 모든 속성 동일 시간·동일 이징으로 한 박자 */
    --sbx-submenu-dur: 0.32s;
    --sbx-submenu-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* GA 회사전환 Select — 사이드바 맨 위(GA일 때만 렌더). 여백 5px 배수. */
.sidebar-test-nav .sbx-ga-switch {
    margin-bottom: 15px;
}

.sidebar-test-nav .sbx-ga-switch-label {
    display: block;
    font-size: var(--font-small, 10px);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 5px;
}

.sidebar-test-nav .sbx-ga-switch-select {
    width: 100%;
}

/* Redis 상태 — 사이드바 하단 고정(개발 환경에서만 렌더, menu.js renderRedisStatus).
   .sbx-redis-status 는 .sidebar 직속이다(메뉴 ul 안이 아님).

   고정 방식: 사이드바를 세로 flex 로 바꾸고 스크롤을 메뉴 ul 로 옮긴다 — 메뉴가 길면 ul 만 스크롤되고
   이 블록은 늘 바닥에 남는다. .has-sbx-redis 로 게이팅해서, 블록을 안 그리는 환경(운영)의
   사이드바 스크롤 동작은 지금 그대로 둔다. */
.sidebar.has-sbx-redis {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar.has-sbx-redis .sidebar-test-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #aab7cf transparent;
}

.sidebar.has-sbx-redis .sidebar-test-nav::-webkit-scrollbar {
    width: 5px;
    height: 8px;
    background-color: #fff;
}

.sidebar.has-sbx-redis .sidebar-test-nav::-webkit-scrollbar-thumb {
    background-color: #aab7cf;
}

/* 여백 5px 배수. 사이드바 좌우 padding(10px) 안쪽으로 4px 더 들여 메뉴 항목과 좌측선을 맞춘다. */
.sidebar .sbx-redis-status {
    flex: none;
    margin: 0 4px;
    padding: 10px 8px 0;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
}

.sidebar .sbx-redis-status-label {
    font-size: var(--font-small);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 5px;
}

.sidebar .sbx-redis-status-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar .sbx-redis-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    font-size: var(--font-small);
    font-weight: 600;
}

.sidebar .sbx-redis-name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 아이콘 글리프 크기 — 본문 텍스트가 아니라서 --font-* 토큰 대상이 아니다(layout.css 와 같은 기준). */
.sidebar .sbx-redis-icon {
    flex: none;
    font-size: 12px;
    line-height: 1;
    color: var(--bs-secondary-color, #6c757d);
}

/* off(설정상 미사용)는 기본 회색 그대로 둔다 — 장애가 아니라 선택이다. */
.sidebar .sbx-redis-row--ok .sbx-redis-icon {
    color: var(--bs-success, #198754);
}

.sidebar .sbx-redis-row--down .sbx-redis-icon {
    color: var(--bs-danger, #dc3545);
}

.sidebar .sbx-redis-row--fallback .sbx-redis-icon,
.sidebar .sbx-redis-row--unavailable .sbx-redis-icon {
    color: var(--bs-warning, #ffc107);
}

.sidebar-test-nav .sbx-heading {
    margin: 20px 0 8px;
    padding: 0;
    list-style: none;
}

.sidebar-test-nav .sbx-heading:first-child {
    margin-top: 2px;
}

.sidebar-test-nav .sbx-heading-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 12px;
    text-align: left;
}

.sidebar-test-nav .sbx-heading-label {
    font-size: var(--font-small);   /* 11 → 10px */
    font-weight: 700;
    color: #64748b;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: left;
}

.sidebar-test-nav .sbx-toggle,
.sidebar-test-nav .sbx-link {
    width: 100%;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    border-radius: 10px;
    padding: 8px;
    color: var(--bs-dark);
    text-decoration: none;
    font-size: var(--font-normal);   /* 13px → 12px 토큰(개발자 지시). 2뎁스와 동일, 위계는 굵기로 */
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .18s ease;
}

.sidebar-test-nav .sbx-submenu .sbx-toggle,
.sidebar-test-nav .sbx-submenu .sbx-link {
    padding: 8px;
    font-size: var(--font-normal);
    font-weight: 500;
    color: var(--bs-dark);
}

/* 서브 링크(아이콘 없음): 텍스트 시작 = 부모 토글 라벨과 동일 */
.sidebar-test-nav .sbx-link.sbx-link--subleaf {
    gap: 0;
    padding: 9px 8px 9px 28px;
}

.sidebar-test-nav .sbx-link.sbx-link--subleaf::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #94a3b8;
    flex-shrink: 0;
    margin-right: 10px;
    opacity: 0.85;
}

.sidebar-test-nav .sbx-link.sbx-link--subleaf.is-active::before {
    background: #2563eb;
    opacity: 1;
}

/* 루트 링크인데 API 아이콘 없음 */
.sidebar-test-nav .sbx-link.sbx-link--root-text-only {
    gap: 0;
    padding: 11px 14px 11px var(--sbx-text-inset-root);
}

.sidebar-test-nav .sbx-toggle:hover,
.sidebar-test-nav .sbx-link:hover {
    background: var(--bs-bg-primary);
    color: var(--bs-text);
}

/* 펼침(열린 폴더) 상태 — 중립 회색. 현재 페이지 하이라이트(is-active, 파랑)와 색 계열이 갈려서
   "지금 보고 있는 메뉴"와 "그냥 펼쳐 둔 다른 메뉴"가 한눈에 구분된다.
   is-active 는 제외한다 — 파란 활성색이 우선. :not() 으로 특정도를 (0,4,0) 까지 올려 둔 이유도 그것. */
.sidebar-test-nav .sbx-toggle[aria-expanded="true"]:not(.is-active) {
    background: var(--bs-bg-secondary);
    color: var(--bs-muted-dark);
}

.sidebar-test-nav .sbx-toggle[aria-expanded="true"]:not(.is-active) .sbx-folder-svg,
.sidebar-test-nav .sbx-toggle[aria-expanded="true"]:not(.is-active) .sbx-chev {
    color: var(--bs-muted-dark);
}

/* 위 규칙이 특정도상 :hover 를 눌러버린다 — 펼쳐진 행의 hover 를 다시 세운다. */
.sidebar-test-nav .sbx-toggle[aria-expanded="true"]:not(.is-active):hover {
    background: var(--bs-bg-primary);
    color: var(--bs-text);
}

.sidebar-test-nav .sbx-toggle[aria-expanded="true"]:not(.is-active):hover .sbx-folder-svg,
.sidebar-test-nav .sbx-toggle[aria-expanded="true"]:not(.is-active):hover .sbx-chev {
    color: var(--bs-primary);
}

/* 폴더 글리프 — 닫힘/열림 두 개를 같이 싣고(menu.js getSbxSubmenuToggleIconHtml) 여기서 하나만 보인다.
   DB 도메인 아이콘 행에는 .sbx-folder-ico 자체가 없어 이 규칙이 걸리지 않는다. */
.sidebar-test-nav .sbx-folder-ico--open {
    display: none;
}

.sidebar-test-nav .sbx-toggle[aria-expanded="true"] .sbx-folder-ico--closed {
    display: none;
}

.sidebar-test-nav .sbx-toggle[aria-expanded="true"] .sbx-folder-ico--open {
    display: inline-block;
}

/* 활성: 파란 계열 + 왼쪽 액센트 */
.sidebar-test-nav .sbx-link.is-active {
    background: rgba(59, 130, 246, 0.05);
    color: var(--bs-primary);
    font-weight: 600;
}

.sidebar-test-nav .sbx-toggle.is-active {
    background: rgba(59, 130, 246, 0.05);
    color: var(--bs-primary);
    font-weight: 600;
}

.sidebar-test-nav .sbx-toggle.is-active .sbx-folder-svg {
    color: var(--bs-primary);
}

.sidebar-test-nav .sbx-toggle:hover .sbx-folder-svg {
    color: var(--bs-primary);
}

.sidebar-test-nav .sbx-toggle.is-active .sbx-chev {
    color: var(--bs-primary);
}

.sidebar-test-nav .sbx-folder-svg {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sbx-icon-w);
    min-width: var(--sbx-icon-w);
    height: var(--sbx-icon-w);
    color: #475569;
}

.sidebar-test-nav .sbx-folder-svg svg {
    display: block;
}

.sidebar-test-nav .sbx-folder-svg--bi i {
    /* 아이콘 글리프 크기 — 본문 텍스트가 아니라서 --font-* 토큰 대상이 아니다.
       단위만 rem→px 로 통일(1.2rem = 19.2px → 20px). */
    font-size: 20px;
    line-height: 1;
    font-weight: 400;
}

.sidebar-test-nav .sbx-label {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.sidebar-test-nav .sbx-chev {
    margin-left: auto;
    font-size: var(--font-normal);   /* 13 → 12px */
    color: #64748b;
    transition: transform .2s ease, color .15s ease;
}

.sidebar-test-nav .sbx-toggle:hover .sbx-chev {
    color: #475569;
}

.sidebar-test-nav .sbx-toggle[aria-expanded="true"] .sbx-chev {
    transform: rotate(180deg);
    color: #475569;
}

.sidebar-test-nav .sbx-submenu {
    list-style: none;
    margin: 5px 0 0 10px;
    padding: 10 0 0 14px;
    border-left: 1px solid transparent;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition:
        max-height var(--sbx-submenu-dur) var(--sbx-submenu-ease),
        opacity var(--sbx-submenu-dur) var(--sbx-submenu-ease),
        margin var(--sbx-submenu-dur) var(--sbx-submenu-ease),
        padding var(--sbx-submenu-dur) var(--sbx-submenu-ease),
        border-left-color var(--sbx-submenu-dur) var(--sbx-submenu-ease),
        visibility 0s linear var(--sbx-submenu-dur);
}

.sidebar-test-nav .sbx-submenu.is-open {
    max-height: 3200px;
    opacity: 1;
    visibility: visible;
    border-left-color: #c7d2fe;
    transition:
        max-height var(--sbx-submenu-dur) var(--sbx-submenu-ease),
        opacity var(--sbx-submenu-dur) var(--sbx-submenu-ease),
        margin var(--sbx-submenu-dur) var(--sbx-submenu-ease),
        padding var(--sbx-submenu-dur) var(--sbx-submenu-ease),
        border-left-color var(--sbx-submenu-dur) var(--sbx-submenu-ease),
        visibility 0s step-start;
}

.sidebar-test-nav .sbx-submenu .sbx-submenu {
    margin-left: 0;
    padding-left: 14px;
}

.sidebar-test-nav .sbx-submenu .sbx-submenu.is-open {
    border-left-color: #e2e8f0;
}

.sidebar-test-nav .sbx-badge {
    margin-left: 8px;
    flex-shrink: 0;
    padding: 2px 9px;
    border-radius: 999px;
    background: #dbeafe;
    color: var(--bs-primary);
    font-size: var(--font-small);   /* 11 → 10px */
    font-weight: 700;
    line-height: 1.35;
}

.sidebar-test-nav .sbx-toggle:focus-visible,
.sidebar-test-nav .sbx-link:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-test-nav .sbx-toggle,
    .sidebar-test-nav .sbx-link {
        transition: background-color .1s ease, color .1s ease, box-shadow .1s ease;
    }

    .sidebar-test-nav .sbx-toggle:hover,
    .sidebar-test-nav .sbx-link:hover {
        transform: none;
    }

    .sidebar-test-nav .sbx-submenu {
        transition: none !important;
    }

    .sidebar-test-nav .sbx-submenu:not(.is-open) {
        display: none;
        max-height: none;
        overflow: visible;
        opacity: 0;
        visibility: hidden;
        margin: 0;
        padding: 0 0 0 14px;
        border-left-color: transparent;
    }

    .sidebar-test-nav .sbx-submenu.is-open {
        display: block;
        max-height: none;
        overflow: visible;
        opacity: 1;
        visibility: visible;
        margin: 2px 0 4px 10px;
        padding: 4px 0 6px 14px;
        border-left-color: #c7d2fe;
    }

    .sidebar-test-nav .sbx-submenu .sbx-submenu.is-open {
        border-left-color: #e2e8f0;
    }
}

/* =============================================================
 * layout.css 에서 이관 (2026-06-22): .sidebar 본체 / .sidebar-nav
 *  (구 style.css + overwrite.css 레이아웃 사이드바 셀)
 *  #main/#footer 마진 오프셋은 layout.css 유지
 * ============================================================= */

.sidebar {
  /* 아이콘 열 폭/간격 — 사이드바 메뉴(.sidebar-test-nav)가 쓴다.
     좌측 인셋이 어긋나지 않도록 한 곳에서만 정의한다. */
  --sbx-icon-w: 22px;
  --sbx-icon-gap: 12px;
  position: fixed;
  top: 70px;
  left: 0;
  bottom: 0;
  width: 300px;
  z-index: 996;
  transition: all 0.3s;
  padding: 20px 10px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #aab7cf transparent;
  background-color: #ffffff;
  border-right: solid 1px var(--bs-border-secondary);
}

@media (max-width: 1399px) {
  .sidebar {
    left: -300px;
  }
}

.sidebar::-webkit-scrollbar {
  width: 5px;
  height: 8px;
  background-color: #fff;
}

.sidebar::-webkit-scrollbar-thumb {
  background-color: #aab7cf;
}

@media (max-width: 1399px) {
  .toggle-sidebar .sidebar {
    left: 0;
  }
}

@media (min-width: 1400px) {
  .toggle-sidebar .sidebar {
    left: -300px;
  }
}

.sidebar-nav {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar-nav li {
  padding: 0;
  margin: 0;
  list-style: none;
}

/* NiceAdmin 잔재 .sidebar-nav .nav-* 계열(구 342~462줄, 25개 규칙) 제거 — 2026-07-20.
   menu.js 는 sbx-* 만 생성하고 DOM 실측 결과 .nav-link/.nav-content/.nav-heading 0개,
   JS·뷰 전체 참조 0건이라 죽은 코드였다. 살아있는 규칙은 위 .sbx-* 계열. */