:root {
  --sb-bg: #0E172A;
  --pad-x: 20px;
  --logo-ptb: 18px;
}
/* 사이드바 폭 단일소스 = tokens.css --sidebar-w(255). (2026-06-15 · tanwoo · 15번 스펙: --sb-width 235/255 충돌 제거) */

/* 사이드바 — 255px 고정, 플로팅 */
.sidebar {
  position: fixed;
  left: var(--edge-gap);
  top: 18px;
  bottom: 21px;
  width: var(--sidebar-w);
  background: var(--sb-bg);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  box-sizing: border-box;
  z-index: 1010;
  border-radius: 8px;
  font-family: Pretendard, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sidebar::-webkit-scrollbar {
  display: none;
}

/* 로고 */
.sidebar-logo {
  align-self: stretch;
  padding: 16px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  background: rgba(37, 99, 235, 0.06);
  border-radius: 8px;
  cursor: pointer;
  transition: opacity .15s ease;
}
.sidebar-logo:hover {
  opacity: 0.85;
}

.sidebar-logo .logo-mark {
  display: block;
  width: 74px;
  height: 24px;
}

.sidebar-logo .logo-mark-x {
  display: flex;
  width: 16px;
  height: 16px;
  justify-content: center;
  align-items: center;
}

/* 다크모드: 흰색 로고 표시, 컬러 로고 숨김 */
.sidebar-logo .logo-mark--light {
  display: none;
}
.sidebar-logo .logo-mark--dark {
  display: block;
}

/* 메뉴 묶음 */
.sidebar .sidebar-menu {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  align-items: stretch !important;
  padding: 0 14px 32px 6px !important;
}

/* Lv1 버튼 — 항상 펼침 */
.menu-btn {
  align-self: stretch;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 18px;
  border: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  outline: none;
  box-shadow: none;
}

/* 아이콘: 14×14, 기본 #7E8C95, 활성=흰색 */
.menu-icon {
  width: 14px;
  height: 14px;
  padding: 0;
  box-sizing: content-box;
  flex: 0 0 auto;
  filter: brightness(0) saturate(100%) invert(57%) sepia(7%) saturate(344%) hue-rotate(153deg) brightness(88%) contrast(88%); /* ≈ #7E8C95 */
}

.menu-btn.active .menu-icon {
  filter: brightness(0) invert(1);
}

/* 라벨 — 항상 표시 */
.menu-label {
  display: inline-flex;
  margin-left: 12px;
  font-size: 17px;
  font-weight: 500;
  line-height: 17px;
  color: #B8B8C0;
  white-space: nowrap;
}

/* 체브론 — 항상 표시 */
.chev {
  display: inline-flex;
  margin-left: auto;
  width: 12px;
  height: 12px;
  align-items: center;
  justify-content: center;
}

.chev::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  border-right: 1.2px solid #7E8C95;
  border-bottom: 1.2px solid #7E8C95;
  transform: rotate(-45deg);
  transition: transform .15s ease;
}

.menu-btn.opened .chev::before {
  transform: rotate(45deg);
}

.menu-btn.active {
  background: rgba(37, 99, 235, 0.10);
  border-radius: 6px;
}

.menu-btn.active .menu-label {
  color: #FFFFFF;
  font-weight: 600;
}

.menu-btn.active .chev::before {
  border-color: #FFFFFF;
}

/* Lv2 서브메뉴 */
.submenu {
  align-self: stretch !important;
  padding: 4px 0 0 0 !important;
  margin: 0 !important;
  gap: 4px !important;
}

.submenu.collapsing,
.submenu.show {
  display: flex !important;
  flex-direction: column !important;
}

.submenu .sub-link {
  align-self: stretch !important;
  display: flex !important;
  width: 100% !important;
  padding: 8px 8px 8px 44px !important;
  margin: 0 !important;
  align-items: center !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  font-size: 14px !important;
  line-height: 1.4em !important;
  font-weight: 500 !important;
  color: #B8B8C0 !important;
  min-width: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.submenu .sub-link span {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden !important;
  word-break: break-word;
}

.submenu .sub-link.current {
  color: #FFFFFF !important;
  font-weight: 600 !important;
  background: rgba(37, 99, 235, 0.10) !important;
  border-radius: 6px;
  position: relative;
}

/* 비활성화: 화면 미구현 메뉴 — 연한 회색 */
.submenu .sub-link.disabled {
  color: #8A8B92 !important;
  cursor: not-allowed !important;
  pointer-events: none;
  opacity: 0.7;
}
body.body--light .submenu .sub-link.disabled {
  color: #CBD5E0 !important;
  opacity: 1;
}

.submenu .sub-link.current::before {
  content: "";
  position: absolute;
  left: 36px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 14px;
  background: #2563EB;
  border-radius: 1px;
}

/* Lv2 서브그룹 (중메뉴) */
.sub-group-btn {
  align-self: stretch !important;
  display: flex !important;
  width: 100% !important;
  padding: 8px 8px 8px 44px !important;
  margin: 0 !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer !important;
  font-size: 14px !important;
  line-height: 1.4em !important;
  font-weight: 500 !important;
  color: #B8B8C0 !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.sub-group-btn span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.sub-group-btn .chev {
  width: 10px;
  height: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

.sub-group-btn .chev::before {
  width: 6px;
  height: 6px;
}

.sub-group-btn.opened .chev::before {
  transform: rotate(45deg);
}

.sub-group-btn.current {
  background: rgba(37, 99, 235, 0.10) !important;
  border-radius: 6px;
  position: relative;
}

.sub-group-btn.current span {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

.sub-group-btn.current .chev::before {
  border-color: #FFFFFF;
}

.sub-group-btn.current::before {
  content: "";
  position: absolute;
  left: 36px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 14px;
  background: #2563EB;
  border-radius: 1px;
}

.sub-group-items {
  padding: 4px 0 0 0 !important;
  margin: 0 !important;
}

.sub-group-items.collapsing,
.sub-group-items.show {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.sub-group-items .sub-link {
  padding-left: 58px !important;
}

.sub-group-items .sub-link.current::before {
  left: 50px;
}

/* 구분선 */
.sidebar-divider {
  align-self: stretch;
  height: 1px;
  background-color: #171738;
  margin: 8px 20px;
  flex-shrink: 0;
}

/* 그룹 인디케이터 전용 구분선 */
.sidebar .group-divider-second,
.sidebar .group-divider-third {
  margin-top: 12px !important;
}

/* 그룹 인디케이터 — 항상 표시 */
.group-indicator {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 4px 0 4px 28px;
}

.group-dot {
  width: 4px;
  height: 4px;
  background-color: #586169;
  border-radius: 50%;
  flex-shrink: 0;
}

/* 그룹 라벨 — 항상 표시 */
.group-label {
  display: inline;
  font-family: Pretendard, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 15px;
  color: #A7A5AF;
  white-space: nowrap;
}

/* 포커스 링 제거 */
.menu-btn:focus, .sub-link:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* ===== 라이트모드 ===== */
body.body--light .sidebar {
  background: #FFFFFF;
  box-shadow: none;
}
body.body--light .sidebar-logo {
  background: rgba(37, 99, 235, 0.06);
}
body.body--light .sidebar-logo .logo-mark--dark {
  display: none;
}
body.body--light .sidebar-logo .logo-mark--light {
  display: block;
}
body.body--light .menu-icon {
  filter: brightness(0) saturate(100%) invert(40%) sepia(10%) saturate(400%) hue-rotate(180deg) brightness(90%) contrast(90%);
}
body.body--light .menu-btn.active .menu-icon {
  filter: brightness(0) saturate(100%) invert(15%) sepia(20%) saturate(500%) hue-rotate(190deg) brightness(30%);
}
body.body--light .menu-label { color: #64748B; }
body.body--light .menu-btn.active { background: rgba(37, 99, 235, 0.06); }
body.body--light .menu-btn.active .menu-label { color: #1A202C; font-weight: 500; }
body.body--light .chev::before { border-color: #9CA3AF; }
body.body--light .menu-btn.active .chev::before { border-color: #1A202C; }
body.body--light .submenu .sub-link { color: #64748B !important; }
body.body--light .submenu .sub-link.current { color: #1A202C !important; background: rgba(37, 99, 235, 0.06) !important; }
body.body--light .submenu .sub-link.current::before { background: #2563EB; }
body.body--light .sub-group-btn { color: #64748B !important; }
body.body--light .sub-group-btn.current { background: rgba(37, 99, 235, 0.06) !important; }
body.body--light .sub-group-btn.current span { color: #1A202C !important; }
body.body--light .sub-group-btn.current .chev::before { border-color: #1A202C; }
body.body--light .sub-group-btn.current::before { background: #2563EB; }
body.body--light .sidebar-divider { background-color: #E2E8F0; }
body.body--light .group-dot { background-color: #9CA3AF; }
body.body--light .group-label { color: #A7A5AF; font-weight: 500; }

/* ===== 반응형: 1024~1279 off-canvas(서랍) ===== */
/* (2026-06-15 · tanwoo · 15번 스펙 SO-3: transform .2s ease, body.sidebar-open 으로 토글) */
@media (max-width: 1279px) {
  .sidebar {
    transform: translateX(-110%);   /* 폭+좌측을 화면 밖으로 완전 숨김 */
    transition: transform .2s ease;
  }
  body.sidebar-open .sidebar {
    transform: translateX(0);        /* 슬라이드 인 */
  }
}