/**
 * 파일명: cat-tree.css
 * 경로: /assets/css/cat-tree.css
 * 목적: 전역 카테고리 트리 컴포넌트 스타일
 *       모든 포털(뉴스/나눔/홍보/사업/쇼핑/…) 공통 사용
 * 버전: v2.0 (2026-04-25) — 전면 개선
 * 규칙:
 *   - 타이포그래피: --fs-sm(14px) 이상 준수
 *   - 색상 커스텀: --ct-accent 변수로 포털별 강조색 주입
 *   - 접기/펼치기: max-height transition (높이 기반 슬라이드)
 *   - 반응형: 900px 이하 → 수평 스크롤 서브네비로 전환
 */

/* ══════════════════════════════════════════
   CSS 변수 (포털별 오버라이드 가능)
══════════════════════════════════════════ */
:root {
  --ct-accent       : #2563eb;
  --ct-accent-bg    : #eff6ff;
  --ct-accent-light : color-mix(in srgb, var(--ct-accent) 12%, transparent);
  --ct-bg           : #ffffff;
  --ct-border       : #e2e8f0;
  --ct-text         : #1e293b;
  --ct-sub          : #64748b;
  --ct-hover-bg     : #f8fafc;
  --ct-indent       : 14px;
  --ct-radius       : 6px;
  --ct-anim         : 0.22s ease;
  --ct-slide-anim   : 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ══════════════════════════════════════════
   트리 컨테이너
══════════════════════════════════════════ */
.ct-tree {
  background    : var(--ct-bg);
  border        : 1px solid var(--ct-border);
  border-radius : 12px;
  overflow      : hidden;
  font-family   : inherit;
}

/* 제목 */
.ct-tree-title {
  display       : flex;
  align-items   : center;
  gap           : 8px;
  font-size     : var(--fs-md, 17px);
  font-weight   : 800;
  color         : var(--ct-text);
  padding       : 14px 16px 12px;
  border-bottom : 1px solid var(--ct-border);
  background    : #f8fafc;
  letter-spacing: -.01em;
}
.ct-tree-title::before {
  content       : '';
  display       : inline-block;
  width         : 3px;
  height        : 16px;
  background    : var(--ct-accent);
  border-radius : 2px;
  flex-shrink   : 0;
}

/* ══════════════════════════════════════════
   목록 (ul)
══════════════════════════════════════════ */
.ct-list {
  list-style    : none;
  margin        : 0;
  padding       : 0;
}
.ct-list--root {
  padding       : 6px 0 4px;
}

/* 하위 목록 — 들여쓰기 + 왼쪽 안내선 */
.ct-list--sub {
  padding-left  : var(--ct-indent);
  margin-left   : 20px;
  margin-bottom : 2px;
  border-left   : 2px solid var(--ct-border);
  /* ▼ max-height 슬라이드 방식 (hidden 제거) */
  max-height    : 2000px;
  overflow      : hidden;
  transition    : max-height var(--ct-slide-anim), opacity var(--ct-anim);
  opacity       : 1;
}
.ct-list--sub .ct-list--sub {
  margin-left   : 12px;
  border-left-color: color-mix(in srgb, var(--ct-border) 60%, transparent);
}

/* 접힌 상태 — hidden 속성 OR .ct-collapsed 클래스 */
.ct-list--sub[hidden],
.ct-list--sub.ct-collapsed {
  max-height    : 0 !important;
  opacity       : 0;
  /* display:none 제거 — transition이 동작하도록 */
  display       : block !important;
  pointer-events: none;
}

/* ══════════════════════════════════════════
   아이템 (li)
══════════════════════════════════════════ */
.ct-item {
  position      : relative;
}

/* ── 행 ── */
.ct-row {
  display       : flex;
  align-items   : center;
  padding       : 1px 6px 1px 6px;
  gap           : 0;
}

/* ── 링크 공통 ── */
.ct-link {
  flex          : 1;
  display       : flex;
  align-items   : center;
  gap           : 6px;
  padding       : 7px 6px;
  border-radius : var(--ct-radius);
  font-size     : var(--fs-sm, 14px);
  font-weight   : 500;
  color         : var(--ct-sub);
  text-decoration: none;
  transition    : background var(--ct-anim), color var(--ct-anim);
  min-height    : 34px;
  line-height   : 1.35;
  word-break    : keep-all;
  cursor        : pointer;
  user-select   : none;
}
.ct-link:hover {
  background    : var(--ct-hover-bg);
  color         : var(--ct-text);
}

/*
 * 부모 항목 (자식 있음) — 클릭하면 접기/펼치기만
 * 말단 항목(ct-link--leaf)과 시각적으로 구분 없이 동일하게 보이되
 * UX 힌트: 화살표 버튼이 옆에 있으므로 별도 커서 필요 없음
 */
.ct-link--parent {
  /* 기본과 동일 — 특별 처리 없음 */
}

/* 말단 항목 — 실제 링크로 이동 */
.ct-link--leaf {
  /* 기본과 동일 */
}

.ct-link-icon {
  font-size     : 12px;
  width         : 15px;
  text-align    : center;
  flex-shrink   : 0;
  color         : var(--ct-sub);
  transition    : color var(--ct-anim);
}
.ct-link-name {
  flex          : 1;
  min-width     : 0;
}

/* ── depth별 스타일 ── */
.ct-item--d1 > .ct-row > .ct-link {
  font-size     : 15px;
  font-weight   : 700;
  color         : var(--ct-text);
  padding-left  : 8px;
}
.ct-item--d1 > .ct-row > .ct-link .ct-link-icon {
  font-size     : 13px;
  color         : var(--ct-accent);
}
.ct-item--d2 > .ct-row > .ct-link {
  font-size     : var(--fs-sm, 14px);
  font-weight   : 500;
  color         : #475569;
}
.ct-item--d3 > .ct-row > .ct-link {
  font-size     : 13px;
  font-weight   : 400;
  color         : var(--ct-sub);
  padding-left  : 4px;
}

/* ── 전체(All) 항목 ── */
.ct-item--all > .ct-row > .ct-link {
  font-size     : var(--fs-sm, 14px);
  font-weight   : 600;
  color         : var(--ct-text);
  border-bottom : 1px solid var(--ct-border);
  border-radius : 0;
  margin-bottom : 2px;
  padding-bottom: 10px;
  padding-left  : 8px;
}
.ct-item--all > .ct-row > .ct-link:hover {
  background    : transparent;
  color         : var(--ct-accent);
}

/* ── 활성 상태 ── */
.ct-item--active > .ct-row > .ct-link {
  background    : var(--ct-accent-bg);
  color         : var(--ct-accent) !important;
  font-weight   : 700;
}
.ct-item--active > .ct-row > .ct-link .ct-link-icon {
  color         : var(--ct-accent) !important;
}
.ct-item--all.ct-item--active > .ct-row > .ct-link {
  background    : transparent;
  border-bottom-color: var(--ct-accent);
}

/* ── 1차 항목 열림 상태 — 왼쪽 강조선 ── */
.ct-item--d1.ct-item--open > .ct-row > .ct-link {
  color         : var(--ct-accent);
  position      : relative;
}
.ct-item--d1.ct-item--open > .ct-row > .ct-link::before {
  content       : '';
  position      : absolute;
  left          : 0;
  top           : 5px;
  bottom        : 5px;
  width         : 3px;
  background    : var(--ct-accent);
  border-radius : 2px;
}
.ct-item--d1.ct-item--open > .ct-row > .ct-link .ct-link-icon {
  color         : var(--ct-accent);
}

/* ── 토글 버튼 ── */
.ct-toggle {
  flex-shrink   : 0;
  width         : 24px;
  height        : 24px;
  display       : flex;
  align-items   : center;
  justify-content: center;
  border        : none;
  background    : transparent;
  cursor        : pointer;
  border-radius : 5px;
  color         : var(--ct-sub);
  font-size     : 10px;
  padding       : 0;
  transition    : background var(--ct-anim), color var(--ct-anim);
  margin-left   : 2px;
}
.ct-toggle:hover {
  background    : var(--ct-hover-bg);
  color         : var(--ct-accent);
}
/* 아이콘 회전 애니메이션 */
.ct-toggle i {
  transition    : transform var(--ct-anim);
  display       : inline-block;
}
.ct-item--open > .ct-row > .ct-toggle {
  color         : var(--ct-accent);
}
.ct-item--open > .ct-row > .ct-toggle i {
  transform     : rotate(90deg);
}

/* ══════════════════════════════════════════
   글쓰기 버튼
══════════════════════════════════════════ */
.ct-write-btn {
  display       : flex;
  align-items   : center;
  justify-content: center;
  gap           : 6px;
  margin        : 8px 10px 12px;
  padding       : 9px 16px;
  border-radius : 8px;
  font-size     : var(--fs-sm, 14px);
  font-weight   : 700;
  color         : var(--ct-accent);
  background    : var(--ct-accent-bg);
  border        : 1.5px solid color-mix(in srgb, var(--ct-accent) 25%, transparent);
  text-decoration: none;
  transition    : all var(--ct-anim);
  cursor        : pointer;
}
.ct-write-btn:hover {
  background    : var(--ct-accent);
  color         : #fff;
  border-color  : var(--ct-accent);
}

/* ══════════════════════════════════════════
   사이드바 래퍼
══════════════════════════════════════════ */
.ct-sidebar {
  width         : 210px;
  flex-shrink   : 0;
  position      : sticky;
  top           : 72px;
  align-self    : flex-start;
  /* max-height / overflow 제거 → 스크롤 없이 트리 전체 노출 */
  overflow      : visible;
}

/* 2단 래퍼 */
.ct-layout {
  display       : flex;
  gap           : 20px;
  align-items   : flex-start;
  max-width     : 1200px;
  margin        : 0 auto;
  padding       : 0 16px;
}
.ct-main {
  flex          : 1;
  min-width     : 0;
}

/* ══════════════════════════════════════════
   수평 서브네비 (모바일 전용 / 단독 사용)
══════════════════════════════════════════ */
.ct-subnav {
  background    : #fff;
  border-bottom : 2px solid var(--ct-border);
  margin-bottom : 0;
  box-shadow    : 0 1px 4px rgba(0,0,0,.06);
}
.ct-subnav-inner {
  max-width     : 1200px;
  margin        : 0 auto;
  display       : flex;
  gap           : 2px;
  overflow-x    : auto;
  padding       : 8px 12px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ct-subnav-inner::-webkit-scrollbar { display: none; }

.ct-snav-item {
  display       : inline-flex;
  align-items   : center;
  gap           : 5px;
  padding       : 7px 13px;
  border-radius : 20px;
  font-size     : var(--fs-sm, 14px);
  font-weight   : 600;
  color         : var(--ct-sub);
  text-decoration: none;
  white-space   : nowrap;
  transition    : all var(--ct-anim);
  border        : 1.5px solid transparent;
  flex-shrink   : 0;
}
.ct-snav-item:hover {
  background    : var(--ct-hover-bg);
  color         : var(--ct-text);
  border-color  : var(--ct-border);
}
.ct-snav-item.active {
  background    : var(--ct-accent-bg);
  color         : var(--ct-accent);
  border-color  : color-mix(in srgb, var(--ct-accent) 30%, transparent);
  font-weight   : 700;
}
.ct-snav-item i {
  font-size     : 12px;
}

/* ══════════════════════════════════════════
   반응형 — 900px 이하
══════════════════════════════════════════ */
@media (max-width: 900px) {
  .ct-sidebar {
    display     : none;
  }
  .ct-layout {
    display     : block;
    padding     : 0 10px;
  }
  .ct-subnav-mobile {
    display     : block !important;
  }
}
.ct-subnav-mobile {
  display       : none;
}

/* ══════════════════════════════════════════
   다크 테마 대응
══════════════════════════════════════════ */
.ct-tree--dark {
  --ct-bg       : #1e293b;
  --ct-border   : #334155;
  --ct-text     : #f1f5f9;
  --ct-sub      : #94a3b8;
  --ct-hover-bg : #293548;
  --ct-accent-bg: rgba(59,130,246,.15);
}
.ct-tree--dark .ct-tree-title {
  background    : #162032;
}

/* ══════════════════════════════════════════
   관리자 트리 뷰
══════════════════════════════════════════ */
.ct-tree--admin {
  --ct-bg       : #f8fafc;
  border-radius : 8px;
}
.ct-tree--admin .ct-item--d1 > .ct-row > .ct-link {
  font-size     : var(--fs-sm, 14px);
  font-weight   : 700;
}

/* 노드 조작 버튼 (admin 전용) */
.ct-node-actions {
  display       : none;
  gap           : 3px;
  flex-shrink   : 0;
}
.ct-item:hover > .ct-row .ct-node-actions {
  display       : flex;
}
.ct-node-btn {
  display       : inline-flex;
  align-items   : center;
  justify-content: center;
  width         : 22px;
  height        : 22px;
  border-radius : 4px;
  border        : none;
  cursor        : pointer;
  font-size     : 10px;
  transition    : all 0.15s;
  text-decoration: none;
  flex-shrink   : 0;
}
.ct-node-btn--edit { background: #eff6ff; color: #2563eb; }
.ct-node-btn--add  { background: #f0fdf4; color: #16a34a; }
.ct-node-btn--del  { background: #fef2f2; color: #dc2626; }
.ct-node-btn:hover { filter: brightness(0.9); transform: scale(1.08); }

/* 드래그 앤 드롭 */
.ct-item--dragging { opacity: .4; }
.ct-item--dragover > .ct-row {
  background    : var(--ct-accent-bg);
  outline       : 2px dashed var(--ct-accent);
  border-radius : var(--ct-radius);
}

/* ══════════════════════════════════════════
   배지
══════════════════════════════════════════ */
.ct-badge {
  display       : inline-flex;
  align-items   : center;
  justify-content: center;
  min-width     : 18px;
  height        : 16px;
  padding       : 0 4px;
  border-radius : 8px;
  font-size     : 10px;
  font-weight   : 700;
  background    : var(--ct-accent-bg);
  color         : var(--ct-accent);
  margin-left   : auto;
  flex-shrink   : 0;
}
.ct-badge--new {
  background    : #fef2f2;
  color         : #dc2626;
}

/* ══════════════════════════════════════════
   2단 레이아웃 – ct-with-tree 계열
   (ct-layout / ct-sidebar / ct-main 의 별칭)
══════════════════════════════════════════ */
.ct-with-tree {
  display       : flex;
  gap           : 20px;
  align-items   : flex-start;
  max-width     : 1200px;
  margin        : 0 auto;
  padding       : 0 16px;
}
.ct-tree-col {
  width         : 210px;
  flex-shrink   : 0;
  position      : sticky;
  top           : 72px;
  align-self    : flex-start;
  overflow      : visible;
}
.ct-body-col {
  flex          : 1;
  min-width     : 0;
}

@media (max-width: 900px) {
  .ct-with-tree {
    display     : block;
    padding     : 0 10px;
  }
  .ct-tree-col {
    display     : none;
  }
}