/* 하이브리드 2단 사이드바 — Rail(48px, 항상 표시) + Panel(256px, 슬라이드).
   ToolKit /management 사이드바 스펙 이식 (Docs 260819_01).

   왜 폭 애니메이션이 아니라 translateX인가:
     width 전이는 매 프레임 레이아웃을 다시 계산해서, 차트·표가 있는 화면에서 눈에 띄게 끊긴다.
     transform은 합성 단계에서만 처리되므로 reflow가 없고 텍스트 줄바꿈도 튀지 않는다.
   접혀도 Rail이 남기 때문에 "메뉴가 사라졌다"는 느낌 없이 아이콘으로 계속 접근된다. */

:root {
  --rail-w: 48px;
  --panel-w: 256px;
  --panel-w-mobile: 288px;
  --sb-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --sb-dur: 600ms;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* ── Rail ── */
.rail {
  /* 접혔을 때만 보인다. 펼침 상태에서 패널과 같이 뜨면 좌측이 두 겹으로 읽힌다.
     본문을 미는 건 .sb-gap 스페이서가 전담하므로 Rail은 흐름에서 빼도 된다. */
  position: fixed; inset-block: 0; left: 0; z-index: 8;
  width: var(--rail-w);
  opacity: 0; pointer-events: none;
  transition: opacity calc(var(--sb-dur) * 0.45) ease var(--sb-dur-delay, 0ms);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: max(8px, var(--safe-top)) 0 max(8px, var(--safe-bottom));
  padding-left: var(--safe-left);
  background: var(--panel); border-right: 1px solid var(--line);
}
/* 접힘 — 패널이 빠져나간 뒤 Rail이 떠오른다(교차 전환이라 빈 순간이 없다) */
body[data-sidebar="collapsed"] .rail,
html[data-sidebar="collapsed"] .rail {
  opacity: 1; pointer-events: auto; --sb-dur-delay: 180ms;
}
.rail-logo { width: 28px; height: auto; margin-bottom: 6px; }
.rail-btn {
  position: relative; width: 32px; height: 32px; flex: none;
  display: grid; place-items: center; border: 0; border-radius: 8px;
  background: none; color: color-mix(in srgb, var(--ink) 70%, transparent);
  cursor: pointer; font-size: 15px; line-height: 1;
  transition: background-color .15s, color .15s;
}
.rail-btn:hover { background: var(--panel-soft); color: var(--ink); }
.nav-icon { flex: none; display: block; }
.rail-btn.on { background: var(--brand-tint); color: var(--brand-strong); }
.rail-spacer { margin-top: auto; }

/* 아이콘만 남는 상태라 라벨이 없으면 사용이 불가능하다 → hover/focus 시 우측 툴팁 */
.rail-btn[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%);
  background: #1c2620; color: #fff; font-size: 12px; font-weight: 500;
  padding: 5px 9px; border-radius: 6px; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .12s; z-index: 30;
}
.rail-btn:hover::after, .rail-btn:focus-visible::after { opacity: 1; }
.rail-dot {
  position: absolute; top: 4px; right: 4px; width: 6px; height: 6px;
  border-radius: 50%; background: #ef4444;
}
.rail-dot.hidden { display: none; }

/* ── Panel ──
   펼침 상태에서는 패널만 보이고(좌측 0, 256px), 접으면 왼쪽으로 미끄러지며 사라진다.
   그 자리에 Rail이 교차로 떠올라 "빈 구간" 없이 전환된다. */
.panel-nav {
  position: fixed; inset-block: 0; left: 0; z-index: 10;
  width: var(--panel-w);
  display: flex; flex-direction: column;
  background: var(--panel); border-right: 1px solid var(--line);
  transform: translateZ(0); isolation: isolate; will-change: transform, opacity;
  transition: transform var(--sb-dur) var(--sb-ease), opacity calc(var(--sb-dur) * 0.5) ease;
}
/* body가 만들어지기 전에는 html에 상태가 찍혀 있다(FOUC 방지) — 둘 다 본다 */
body[data-sidebar="collapsed"] .panel-nav,
html[data-sidebar="collapsed"] .panel-nav { transform: translateX(-100%); opacity: 0; }

.panel-head {
  display: flex; align-items: center; gap: 9px;
  padding: max(16px, var(--safe-top)) 12px 10px 14px;
}
.panel-head .logo { height: 26px; width: auto; flex: none; }
.panel-head .panel-title { line-height: 1; }
.panel-title { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.panel-head .rail-btn { margin-left: auto; }
.panel-sub { padding: 0 16px 10px; font-size: 11px; color: var(--muted); line-height: 1.5; }
.panel-body { flex: 1; overflow-y: auto; padding-bottom: 8px; }
.panel-foot { padding: 8px; border-top: 1px solid var(--line); }

/* 콘텐츠를 미는 건 이 스페이서 하나가 전담한다(Rail·패널 모두 fixed라 흐름에 없다).
   펼침 = 패널 폭(256), 접힘 = Rail 폭(48). */
.sb-gap {
  width: var(--panel-w);
  flex: none; will-change: width;
  transition: width var(--sb-dur) var(--sb-ease);
}
body[data-sidebar="collapsed"] .sb-gap,
html[data-sidebar="collapsed"] .sb-gap { width: var(--rail-w); }

/* ── 메뉴 항목 ──
   개별 항목에는 transform transition을 걸지 않는다. 패널 전체가 움직이는 동안
   자식들이 각자 전이하면 미세한 지터가 생긴다. 색만 전이한다. */
.nav-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  height: 32px; padding: 8px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); font: inherit; font-size: 14px;
  text-align: left; cursor: pointer; overflow: hidden; white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.nav-item:hover { background: var(--panel-soft); }
.nav-item.on { background: var(--brand-tint); color: var(--brand-strong); font-weight: 600; }
.nav-item .nav-icon { color: color-mix(in srgb, var(--ink) 55%, transparent); }
.nav-item.on .nav-icon { color: var(--brand-strong); }
.nav-item .count {
  margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted);
  background: #eef1ef; border-radius: 999px; padding: 1px 7px;
}
.nav-item.on .count { background: #fff; color: var(--brand-strong); }

/* ── 그룹 접힘 ──
   max-height 대신 grid-rows를 쓴다 — 내용 높이를 몰라도 되고 값이 바뀌어도 깨지지 않는다. */
.nav-group { padding: 8px; }
.group-label {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  width: 100%; height: 32px; padding: 0 8px; border: 0; border-radius: 8px;
  background: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600;
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  transition: background-color .15s, color .15s;
}
.group-label:hover { background: var(--panel-soft); color: var(--ink); }
.chev { transition: transform .2s; font-size: 10px; }
.nav-group[data-open="false"] .chev { transform: rotate(-90deg); }
.group-content { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .2s ease; }
.group-content > div { overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
.nav-group[data-open="false"] .group-content { grid-template-rows: 0fr; }

/* ── 현재 계정 ──
   로그아웃은 전체폭 버튼이 아니라 프로필 우측의 작은 아이콘으로 둔다.
   자주 쓰지 않는 파괴적 동작이라 메뉴만큼 크게 보일 이유가 없다. */
.panel-me { display: flex; align-items: center; gap: 8px; padding: 6px 8px; }
.panel-me .avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--brand); color: #fff; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; text-transform: uppercase;
}
.panel-me .who { min-width: 0; }
.panel-me b { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.panel-me span { display: block; font-size: 11px; color: var(--muted); }
.panel-me .logout {
  margin-left: auto; flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px;
  display: grid; place-items: center; background: none; cursor: pointer;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
  transition: background-color .15s, color .15s;
}
.panel-me .logout:hover { background: #fdecec; color: #b3261e; }

/* ── 본문 ── */
/* 사이드바 전환 중 콘텐츠 내부 레이아웃 재계산을 격리한다(차트·표가 있는 화면에서 체감이 크다) */
.workspace { contain: layout style; }

/* ── 모바일 ── */
.scrim { display: none; }
@media (max-width: 767px) {
  .rail, .sb-gap { display: none; }
  .panel-nav { left: 0; width: var(--panel-w-mobile); transform: translateX(-100%); opacity: 1; z-index: 10; }
  body[data-mobile-open="true"] .panel-nav { transform: none; opacity: 1; }
  body[data-sidebar="collapsed"] .panel-nav,
  html[data-sidebar="collapsed"] .panel-nav { transform: translateX(-100%); opacity: 1; }
  body[data-mobile-open="true"] .scrim {
    display: block; position: fixed; inset: 0; z-index: 9; background: rgb(0 0 0 / .5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel-nav, .sb-gap, .group-content, .chev { transition: none; }
}

/* 언어 전환 — 패널 하단. 프로필 영역과 붙지 않게 아래 여백을 둔다. */
.panel-lang { padding: 16px 12px 14px; }
.panel-lang .ui-field { gap: 6px; }
.panel-lang .ui-label { font-size: 11px; color: var(--muted); }
.panel-lang .ui-select-trigger { padding: 7px 10px; font-size: 12.5px; }