/*
 * 좌측 문서 내비게이션(카테고리 트리) — Retype식 좌측 사이드바.
 * 카테고리 아카이브 + 검색결과에서 노출.
 *
 * 레이아웃 원칙:
 *  - 넓은 화면(≥1500px): 사이드바를 .site-content(GP flex)의 좌측 컬럼으로 흐름에 넣고
 *    position:sticky 로 고정. 흐름에 참여하므로 콘텐츠·푸터가 사이드바 높이를 인식해
 *    푸터가 자연히 아래로 밀린다(예전 position:fixed 는 푸터를 덮는 버그가 있었다).
 *  - 좁은 화면(<1500px): 좌측 드로어(off-canvas) + FAB 토글.
 */

/* ── 트리 패널 기본값(폭/타이포). 표시는 미디어쿼리가 제어. ── */
.cc-docnav {
  width: 230px;
  padding: 1em;
  font-family: var(--cc-font-sans);
  font-size: 0.875rem;
  display: none;
  /* overflow-y:auto(데스크톱 51행·모바일 210행)면 CSS 규칙상 overflow-x가 auto로
     계산돼 긴 카테고리/글 이름에서 가로 스크롤바가 생김 → x는 항상 숨김. */
  overflow-x: hidden;
}
/* 긴 이름(슬러그·영문 토큰)이 컬럼 폭을 넘겨 가로 스크롤/잘림을 만들지 않게 줄바꿈 허용 */
.cc-docnav__grouptoggle > span,
.cc-docnav__cat > a,
.cc-docnav__post > a { min-width: 0; overflow-wrap: anywhere; }
/* 좌측 컬럼 래퍼 — 모바일에선 박스를 만들지 않아 레이아웃에 영향 없음(토글/드로어는 fixed). */
.cc-docnav-col { display: contents; }
.cc-docnav-toggle { display: none; }
.cc-docnav-backdrop { display: none; }

/* 토글 아이콘 — 펼침: square-minus, 접힘(body.cc-docnav-collapsed): square-caret-down */
.cc-docnav-toggle__icon--collapsed { display: none; }
body.cc-docnav-collapsed .cc-docnav-toggle__icon--expanded { display: none; }
body.cc-docnav-collapsed .cc-docnav-toggle__icon--collapsed { display: inline-block; }

/* ============================================================
   넓은 화면(≥1500px): 2단 레이아웃 [사이드바(sticky)] + [콘텐츠]
   ============================================================ */
@media (min-width: 1500px) {
  /* .site-content 는 GP 기본 display:flex. 상단정렬 + 컬럼 간격만 지정. */
  .site-content { align-items: flex-start; gap: 2.5rem; }

  /* 좌측 컬럼: 흐름에 참여하는 sticky 컬럼(토글+트리 포함) */
  .cc-docnav-col {
    display: block;
    order: -1;                 /* #primary 보다 앞(왼쪽)에 배치 */
    flex: 0 0 240px;
    position: sticky;
    top: 100px;
    align-self: flex-start;    /* 컬럼이 세로로 늘어나지 않게 → sticky 정상 동작 */
  }
  .cc-docnav {
    display: block;
    position: static;
    width: 100%;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    padding: 0;
  }

  /* 콘텐츠: 사이드바 옆 남은 폭을 채운다(뷰포트 중앙정렬 해제).
     style.css 가 두 번 로드되며 뒤쪽 style.css 의 body.category .content-area{max-width:920}
     가 소스 순서상 이 파일보다 나중일 수 있어, .site-content 를 한 단계 더 넣어 특정도로 확실히 덮어쓴다. */
  body.category .site-content .content-area,
  body.search  .site-content .content-area {
    flex: 1 1 auto;
    max-width: none;
    margin: 0;
    min-width: 0;
  }

  /* 접기/펼치기 토글 — 사이드바 상단에 인라인 배치 */
  .cc-docnav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    height: 30px;
    padding: 0 0.65rem;
    border: 1px solid var(--coal-border, #e5e7eb);
    border-radius: 8px;
    background: #fff;
    color: var(--coal-text-secondary, #4a4a4a);
    font-family: var(--cc-font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
  }
  .cc-docnav-toggle span { display: inline; }
  .cc-docnav-toggle:hover { border-color: var(--coal-accent, #3f63f4); color: var(--coal-accent, #3f63f4); }

  /* 접힘: 트리만 숨기고 토글은 유지 → 콘텐츠가 전체폭으로 확장 */
  body.cc-docnav-collapsed .cc-docnav { display: none; }
  body.cc-docnav-collapsed .cc-docnav-col { flex-basis: auto; }
}

/* ── 트리 항목 스타일(위치와 무관, 공통) ── */
.cc-docnav__title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--coal-heading, #020222);
  margin-bottom: 0.75rem;
}
.cc-docnav__list,
.cc-docnav__children,
.cc-docnav__posts { list-style: none; margin: 0; padding: 0; }

.cc-docnav__grouptoggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0.4rem 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: var(--coal-heading, #020222);
  text-align: left;
}
.cc-docnav__chev {
  width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  opacity: 0.4;
  transition: transform 0.15s;
  flex-shrink: 0;
  margin-left: 0.5rem;
}
.cc-docnav__group.is-open > .cc-docnav__grouptoggle .cc-docnav__chev { transform: rotate(90deg); }

.cc-docnav__children {
  display: none;
  margin-left: 0.35rem;
  padding-left: 0.15rem;
  border-left: 1px solid var(--coal-border, #e5e7eb);
}
.cc-docnav__group.is-open > .cc-docnav__children { display: block; }

.cc-docnav__cat > a {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0 0.3rem 0.75rem;
  margin-left: -1px;
  color: var(--coal-text-secondary, #4a4a4a);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.cc-docnav__cat > a:hover { color: var(--coal-accent, #3f63f4); }
.cc-docnav__cat.is-current > a {
  color: var(--coal-accent, #3f63f4);
  font-weight: 600;
  border-left-color: var(--coal-accent, #3f63f4);
}
.cc-docnav__count { color: var(--coal-text-light, #a1a1aa); font-size: 0.72rem; }

.cc-docnav__posts { padding-left: 1rem; margin: 0.1rem 0 0.4rem; }
.cc-docnav__post > a {
  display: block;
  padding: 0.2rem 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--coal-text-muted, #71717a);
  text-decoration: none;
  word-break: keep-all;
}
.cc-docnav__post > a:hover { color: var(--coal-accent, #3f63f4); }
.cc-docnav__post.is-current > a { color: var(--coal-accent, #3f63f4); font-weight: 600; }

/* ============================================================
   좁은 화면(<1500px): 좌측 드로어(off-canvas) + FAB 토글
   ============================================================ */
@media (max-width: 1499px) {
  /* 토글 FAB (좌하단 고정) */
  .cc-docnav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 1001;
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 9999px;
    background: var(--coal-accent, #3f63f4);
    color: #fff;
    font-family: var(--cc-font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(63, 99, 244, 0.35);
  }
  .cc-docnav-toggle i { font-size: 0.9rem; }

  /* 드로어 */
  .cc-docnav {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100dvh;
    width: min(85vw, 300px);
    max-height: none;
    background: #fff;
    border-right: 1px solid var(--coal-border, #e5e7eb);
    padding: 4.5rem 1.25rem 2rem;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 1002;
    box-shadow: 2px 0 20px rgba(0, 0, 0, 0.12);
  }
  body.cc-docnav-open .cc-docnav { transform: translateX(0); }

  /* 백드롭 */
  .cc-docnav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s;
    z-index: 1001;
  }
  body.cc-docnav-open .cc-docnav-backdrop { opacity: 1; visibility: visible; }
  body.cc-docnav-open { overflow: hidden; } /* 드로어 열림 시 배경 스크롤 잠금 */
}