/* ──────────────────────────────────────────────────────────────
   사이드바 트리 메뉴 — 모던 SaaS 톤
   기존 클래스 구조 100% 유지, 시각 디자인만 조정
   ────────────────────────────────────────────────────────────── */

.tree-root, .tree-children {
  list-style: none;
}

.tree-root {
  padding: 8px 8px;
}

.tree-children {
  /* 자식 메뉴 컨테이너 — 그룹 아래 들여쓰기 */
  padding: 0 0 4px;
}

/* ─── 그룹 구분선 ─── */
/* 그룹 헤더 위에 자동 구분선 추가 (첫 번째 그룹 제외) */
.tree-item:has(> .tree-group-header) {
  border-top: 1px solid var(--gray-100, #eef0f4);
  margin-top: 5px;
  padding-top: 5px;
}
.tree-root > .tree-item:first-child {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* ─── 메뉴 행 (공통) ─── */
.tree-row {
  position: relative;            /* 좌측 액센트 바 기준 */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  margin: 0;
  border-radius: var(--radius, 6px);
  cursor: pointer;
  user-select: none;
  color: var(--gray-700, #323843);
  transition:
    background var(--t-fast, 120ms ease),
    color var(--t-fast, 120ms ease);
}

/* 좌측 액센트 바 — 기본 숨김 */
.tree-row::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px; height: 60%;
  background: var(--brand-cyan, #0090d3);
  border-radius: 0 3px 3px 0;
  transition: transform var(--t-fast, 120ms ease);
}

/* 호버 */
.tree-row:hover {
  background: var(--gray-50, #f7f8fa);
  color: var(--gray-900, #11141a);
}

/* 액티브 (현재 페이지) */
.tree-row.active {
  background: var(--primary-soft, #e6eff8);
  color: var(--brand-navy, #04367b);
  font-weight: 600;
}
.tree-row.active::before {
  transform: translateY(-50%) scaleY(1);
}
.tree-row.active .tree-label {
  color: var(--brand-navy, #04367b);
}

/* ─── 펼침/접힘 토글 화살표 ─── */
.tree-toggle {
  font-size: .7rem;
  color: var(--gray-400, #9aa3b2);
  width: 12px;
  flex-shrink: 0;
  text-align: center;
  line-height: 1;
  transition: color var(--t-fast, 120ms ease);
}
.tree-row:hover .tree-toggle { color: var(--gray-600, #4a5160); }
.tree-row.active .tree-toggle { color: var(--brand-cyan, #0090d3); }

/* ─── 라벨 ─── */
.tree-label {
  font-size: .82rem;
  letter-spacing: -0.1px;
  line-height: 1.4;
  white-space: nowrap;     /* 줄바꿈 없이 — 사이드바가 폭을 맞춤 */
  flex: 1;
}

/* ─── 그룹 헤더 (전자결재 스타일: 굵은 진한 글씨 + 폴더 아이콘) ─── */
.tree-group-header {
  padding: 7px 14px;
  cursor: pointer;
}
.tree-group-header:hover {
  background: var(--gray-50, #f7f8fa);
}
/* 그룹 행(자식 보유) — 깊이 무관하게 굵은 진한 글씨 (아이콘은 .tree-icon 요소) */
.tree-item:has(> ul.tree-children) > .tree-row .tree-label {
  font-weight: 700;
  font-size: .85rem;
  color: var(--gray-800, #2b3036);
  letter-spacing: -0.2px;
  text-transform: none;
}
.tree-group-header .tree-toggle {
  font-size: .62rem;
  color: var(--gray-400, #9aa3b2);
}

/* ─── 메뉴 아이콘 (인라인 SVG) ─── */
.tree-icon {
  flex-shrink: 0;
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-cyan, #0090d3);
}
.tree-icon svg { width: 16px; height: 16px; display: block; }
.tree-icon[data-icon="folder"]    { color: #e0a23b; }
.tree-icon[data-icon="home"]      { color: #2b8aef; }
.tree-icon[data-icon="admin"]     { color: #5b6472; }
.tree-icon[data-icon="truck"]     { color: #16a34a; }
.tree-icon[data-icon="bag"]       { color: #2b8aef; }
.tree-icon[data-icon="cart"]      { color: #2b8aef; }
.tree-icon[data-icon="user"]      { color: #6b7280; }
.tree-icon[data-icon="notice"]    { color: #e0533d; }
.tree-icon[data-icon="box"]       { color: #d97706; }
.tree-icon[data-icon="clipboard"] { color: #ca8a04; }
.tree-icon[data-icon="doc"]       { color: #0891b2; }
.tree-icon[data-icon="contract"]  { color: #0891b2; }
.tree-icon[data-icon="support"]   { color: #db2777; }
.tree-icon[data-icon="settings"]  { color: #4b5563; }
.tree-icon[data-icon="lab"]       { color: #0d9488; }
.tree-icon[data-icon="report"]    { color: #7c3aed; }

/* 그룹 헤더는 액센트 바 사용하지 않음 */
.tree-group-header::before { display: none; }
.tree-group-header.active {
  background: transparent;
  color: inherit;
}
.tree-group-header.active .tree-label {
  color: var(--brand-navy, #04367b);
}

/* ─── 트리 깊이별 차등 세로 간격 (깊을수록 촘촘하게) ─── */
/* depth 0 = .tree-row 기본(6px) · depth 1 = 4px · depth 2+ = 2px */
.tree-children .tree-row { padding-top: 4px; padding-bottom: 4px; }
.tree-children .tree-children .tree-row { padding-top: 2px; padding-bottom: 2px; }

/* ─── 리프 노드 (실제 페이지 링크) — 들여쓰기된 옅은 글씨 ─── */
.tree-leaf .tree-label {
  padding-left: 27px;          /* 그룹 폴더 텍스트 아래로 정렬되게 들여쓰기 */
  font-weight: 400;
  font-size: .8rem;
  color: var(--gray-600, #5a626e);
}
/* 아이콘 있는 단말(예: 홈) — 들여쓰기 제거 + 진한 강조 */
.tree-row.tree-leaf:has(> .tree-icon) .tree-label {
  padding-left: 0;
  font-weight: 600;
  font-size: .82rem;
  color: var(--gray-800, #2b3036);
}

/* 액티브 리프는 강조 */
.tree-row.tree-leaf.active .tree-label {
  font-weight: 600;
  color: var(--brand-navy, #04367b);
}

/* ─── 빈/비활성 항목 ─── */
.tree-empty {
  cursor: default;
  opacity: 0.5;
}
.tree-empty:hover {
  background: transparent;
  color: var(--gray-400, #9aa3b2);
}
.tree-empty .tree-label {
  color: var(--gray-400, #9aa3b2);
  font-weight: 400;
}
.tree-empty::before { display: none; }

/* ─── 카테고리 헤더 (같은 깊이 메뉴 시각적 구분 — 클릭 불가, 즐겨찾기 없음) ─── */
.tree-section-header {
  cursor: default;
  padding-top: 10px;
  padding-bottom: 4px;
  margin-top: 4px;
  border-top: 1px solid var(--gray-100, #eef0f4);
  pointer-events: none;        /* 호버/클릭 차단 */
}
.tree-section-header .tree-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--gray-500, #6b7280);
  padding-left: 6px;            /* 일반 leaf 들여쓰기(27px) 무시 — 좌측 정렬 */
}
.tree-section-header:hover { background: transparent; }
.tree-section-header::before { display: none; }
/* 첫 카테고리 헤더는 상단 구분선 제거 (회원 관리 바로 아래 첫 헤더만 살짝 띄움) */
.tree-section-header + .tree-section-header { border-top: 1px solid var(--gray-100, #eef0f4); }

/* ──────────────────────────────────────────────────────────────
   사이드바 접힌 상태 (.sidebar.collapsed)에서의 트리 처리
   ────────────────────────────────────────────────────────────── */
/* common.css에서 .sidebar.collapsed .tree-root { display: none } 처리되어 있으므로
   별도 collapsed 스타일은 불필요. 펼쳐졌을 때 자연스럽게 복원됨. */

/* ──────────────────────────────────────────────────────────────
   메뉴 즐겨찾기 — 보기 토글 툴바 + 별 버튼
   ────────────────────────────────────────────────────────────── */
.menu-view-toolbar {
  display: flex;
  gap: 6px;
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--gray-100, #eceef1);
  margin-bottom: 4px;
}
.menu-view-btn {
  flex: 1;
  padding: 5px 8px;
  font-size: .76rem;
  font-weight: 600;
  color: var(--gray-600, #4a5160);
  background: var(--gray-50, #f7f8fa);
  border: 1px solid var(--gray-200, #e0e3e8);
  border-radius: var(--radius, 6px);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--t-fast, 120ms ease);
}
.menu-view-btn:hover { background: var(--gray-100, #eceef1); }
.menu-view-btn.active {
  color: #fff;
  background: var(--brand-cyan, #0090d3);
  border-color: var(--brand-cyan, #0090d3);
}
.sidebar.collapsed .menu-view-toolbar { display: none; }

/* ──────────────────────────────────────────────────────────────
   메뉴 찾기 — 사이드바 검색 필터
   ────────────────────────────────────────────────────────────── */
.menu-search-wrap {
  position: relative;
  padding: 4px 12px 8px;
  border-bottom: 1px solid var(--gray-100, #eceef1);
  margin-bottom: 4px;
}
.menu-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 28px 6px 10px;
  font-size: .78rem;
  border: 1px solid var(--gray-200, #d7dbe0);
  border-radius: 14px;
  outline: none;
  transition: border-color var(--t-fast, 120ms ease);
}
.menu-search-input:focus { border-color: var(--brand-cyan, #0090d3); }
.menu-search-clear {
  position: absolute;
  top: 11px; right: 19px;
  width: 18px; height: 18px;
  border: none; background: var(--gray-200, #c5cbd2);
  color: #fff; border-radius: 50%;
  font-size: .82rem; line-height: 18px; text-align: center;
  cursor: pointer; padding: 0;
  display: none;
}
.menu-search-clear:hover { background: var(--brand-cyan, #0090d3); }
.sidebar.collapsed .menu-search-wrap { display: none; }
mark.menu-hl { background: #ffe08a; color: inherit; padding: 0 1px; border-radius: 2px; }

/* ──────────────────────────────────────────────────────────────
   상단 강조 액션 버튼 (역할별 핵심 액션)
   ────────────────────────────────────────────────────────────── */
.menu-action-wrap { padding: 12px 12px 6px; }
.menu-action-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 14px;
  border: none; border-radius: 8px; cursor: pointer;
  background: var(--brand-cyan, #0090d3); color: #fff;
  font-size: .88rem; font-weight: 700; letter-spacing: -0.2px;
  box-shadow: 0 2px 6px rgba(0,144,211,.35);
  transition: background var(--t-fast, 120ms ease), box-shadow var(--t-fast, 120ms ease), transform .05s ease;
}
.menu-action-btn:hover { background: #0079b3; box-shadow: 0 4px 10px rgba(0,144,211,.45); }
.menu-action-btn:active { transform: translateY(1px); }
.menu-action-ico { display: inline-flex; width: 18px; height: 18px; }
.menu-action-ico svg { width: 18px; height: 18px; display: block; }
.sidebar.collapsed .menu-action-wrap { display: none; }

/* 별 버튼 — 단말 메뉴 우측 */
.fav-star {
  flex-shrink: 0;
  font-size: .9rem;
  line-height: 1;
  color: var(--gray-300, #cbd0d8);
  opacity: .45;
  cursor: pointer;
  padding: 0 2px;
  transition: color var(--t-fast, 120ms ease), opacity var(--t-fast, 120ms ease), transform var(--t-fast, 120ms ease);
}
.tree-row:hover .fav-star { opacity: .85; }
.fav-star:hover { transform: scale(1.25); color: #f5b301; }
.fav-star.on {
  color: #ffc107;
  opacity: 1;
  text-shadow: 0 0 1px rgba(245,179,1,.5);
}