/* ==========================================================================
   sections/toc.css — 목차
   --------------------------------------------------------------------------
   ★ 상자(테두리·헤더·chevron·펼침 전환)는 **sections/sidebox.css 소관**이다.
     목차는 그 컴포넌트를 그대로 재사용하며, 여기에는 목차에만 필요한 것만 둔다.
     상자를 여기서 다시 그리면 카테고리 드롭다운과 갈려 화면마다 다른 박스가 보인다.

   ★★ 전환 기준선은 **1360** 이다. 768 이 아니다.
      768 을 쓰면 768–1359 구간에서 목차가 본문 **안**에 있는데도 sticky 가 살아 있어
      화면 상단에 계속 붙어 다닌다(그 구간에서는 컨테이닝 블록이 본문 전체라 이동 범위가 크다).
      sticky 선언 자체는 sidebox.css 의 `@media (min-width: 1360px)` 이 갖고 있으므로
      이 파일은 그 값을 **다시 적지 않는다.**

   ★★ JS(assets/js/single.js)도 같은 기준선을 쓴다. 다만 JS 는 숫자를 갖지 않고
      `--c4-bp-side` 를 `getComputedStyle` 로 읽는다 — 그래서 두 곳이 갈릴 수가 없다.
   ========================================================================== */

/* ---------- 항목 ----------
   색 규칙은 §4-10 '박스 안 목록' 한 벌 — 카테고리 드롭다운·관련글과 같다.
   일반 = 보조 텍스트 / 현재 = 기본 텍스트 + 700 / 호버 = 포인트 컬러(글자색).
   기본·호버는 sidebox.css 가 이미 준다. 여기서는 **현재 항목**만 추가한다. */

/*
 * ★ 현재 항목은 **색이 아니라 굵기와 진하기**로 구분한다.
 *   포인트 컬러가 되는 건 호버일 때뿐이다 — 둘을 같은 색으로 만들지 말 것.
 *   (그래서 포인트 컬러를 바꿔도 현재 항목은 바뀌지 않는 것이 정상이다.)
 */
.c4-toc__list .c4-is-current > a {
	font-weight: var(--c4-fw-bold);
	color: var(--c4-color-text);
}

/* h3 항목의 2차 들여쓰기는 sidebox.css 의 `.c4-sidebox__body li ul` 이 처리한다. */

/* ---------- 넘칠 때 내부 스크롤 ----------
   ★ 고정 height 금지 — 항목이 적으면 상자도 짧아야 한다(§4-7).
     max-height 로만 상한을 두고 그때만 스크롤한다. */

.c4-layout__side--toc .c4-sidebox__body {
	max-height: var(--c4-toc-max-h);
	overflow-y: auto;

	/* 스크롤바가 생겼을 때 항목 글자와 겹치지 않게. 위·오른쪽 동일. */
	scrollbar-width: thin;
	scrollbar-color: var(--c4-color-text-faint) transparent;
}

/* ★ ::-webkit-scrollbar 계열은 Firefox 에서 동작하지 않는다.
   위의 scrollbar-width / scrollbar-color 와 **함께** 선언해 두 계열을 모두 덮는다.
   폭이 정확히 4 가 되지 않는 브라우저가 있는 것은 정상이다. */
.c4-layout__side--toc .c4-sidebox__body::-webkit-scrollbar {
	width: var(--c4-scrollbar-w);
}

.c4-layout__side--toc .c4-sidebox__body::-webkit-scrollbar-thumb {
	background: var(--c4-color-text-faint);
	border-radius: var(--c4-radius-pill);
}

.c4-layout__side--toc .c4-sidebox__body::-webkit-scrollbar-track {
	background: transparent;
}

/* ==========================================================================
   1360 미만 — 본문 안 인라인
   ★ sticky 는 sidebox.css 가 1360 이상에서만 켜므로 여기서 끌 것이 없다.
   ========================================================================== */

@media (max-width: 1359.98px) {
	/* 목차 → 본문 간격. 카테고리 드롭다운(--c4-gap-block)과 값이 달라 토큰을 분리한다. */
	.c4-layout__side--toc {
		margin-bottom: var(--c4-toc-inline-gap);
	}

	/* 인라인일 때는 화면을 넘칠 일이 없다 — 상한을 풀어 전체를 편다. */
	.c4-layout__side--toc .c4-sidebox__body {
		max-height: none;
		overflow-y: visible;
	}
}

/* ==========================================================================
   768 미만 — 접이식 토글 바
   ★ 카테고리 드롭다운은 이 구간에서 **숨김**이지만 목차는 **유지**된다.
     `.c4-layout__side--category { display:none }` 이 category 변형에만 걸려 있는 이유다.
   ★ 초기 상태(접힘)는 CSS 로 만들 수 없다 — <details open> 속성을 JS 가 토글한다.
   ========================================================================== */

@media (max-width: 767.98px) {
	/* 접힌 상태의 토글 바 높이 48 은 sidebox.css 의 `--c4-side-header-h` 가 이미 준다.
	   펼치면 auto — details 기본 동작이라 따로 선언하지 않는다. */
}