/* ==========================================================================
   sections/sidebox.css — 사이드 박스 (뷰 중립 공용 컴포넌트)
   --------------------------------------------------------------------------
   목록의 카테고리 드롭다운과 **상세의 목차가 같은 것을 재사용**한다.
   화면 이름으로 분기하지 말 것 — 호출부가 인자만 다르게 넘긴다.
   ========================================================================== */

/* height:auto 로 트랜지션을 걸기 위해 필요하다. 이게 없으면 애니메이션이 안 먹는다. */
:root { interpolate-size: allow-keywords; }

.c4-sidebox {
	width: var(--c4-side-w);
	background: var(--c4-color-page-bg);   /* 사이트 바탕과 같은 색(2026-10-14 사용자 지시 '배경색 화이트 말고 전체 배경색으로 통일' — 목차 · 카테고리 상자 · 그 전 흰색) */
	border: var(--c4-border-w) solid var(--c4-color-border);
	border-radius: var(--c4-radius-box);
	/* ★ 박스 높이는 항목 수만큼. 고정 height 금지. */
}

.c4-sidebox__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/*
	 * ★★ `--c4-side-header-h`(48)은 **박스 바깥 높이**다. 시안 `State=Closed` 242×48 이
	 *    `h-[48px] + border 1px` 조합이라 테두리를 포함한 치수이기 때문이다.
	 *    그래서 토글 바 자신은 위아래 테두리 두께만큼 **작아야** 한다 — 안쪽 46.
	 *    여기에 48 을 그대로 주면 접힘 상태 바깥 높이가 **50** 이 되어 시안보다 2px 크다.
	 *    (겉보기로는 거의 티가 안 나고 CSS 에러도 없다. 실측해야 나온다.)
	 *  ★ 48 을 46 으로 고쳐 적지 말 것 — 시안 숫자 48 을 남기고 여기서 빼는 편이
	 *    어디서 온 값인지 드러난다.
	 */
	height: calc(var(--c4-side-header-h) - var(--c4-border-w) * 2);
	padding: var(--c4-side-header-pad);
	border-radius: var(--c4-radius-box) var(--c4-radius-box) 0 0;
	cursor: pointer;
	list-style: none;
	/* ★ 접힌 상태에서는 헤더 아래 구분선을 그리지 않는다 —
	   박스 바깥 테두리 1px 과 붙어 2px 선처럼 보인다. */
	border-bottom: var(--c4-border-w) solid transparent;
	transition: border-color var(--c4-transition-side);
}

.c4-sidebox__head::-webkit-details-marker { display: none; }

.c4-sidebox[open] > .c4-sidebox__head {
	border-bottom-color: var(--c4-color-border);
}

.c4-sidebox__label {
	font-size: var(--c4-fs-body3);
	font-weight: var(--c4-fw-regular);
	line-height: var(--c4-lh-body);
	color: var(--c4-color-text-sub);
}

.c4-sidebox__chevron {
	width: var(--c4-side-chevron-w);
	height: var(--c4-side-chevron-h);
	flex-shrink: 0;
	color: var(--c4-color-text-sub);
	transition: transform var(--c4-transition-side);
}

.c4-sidebox[open] > .c4-sidebox__head .c4-sidebox__chevron { transform: rotate(180deg); }

.c4-sidebox__body {
	padding: var(--c4-side-body-pad);
	border-radius: 0 0 var(--c4-radius-box) var(--c4-radius-box);
}

/* ---------- 항목 ---------- */

/* 규격: <ul> → <li> → <a>, 2차는 중첩 <ul>. 목록과 목차가 같은 규격을 쓴다. */
.c4-sidebox__body ul {
	display: flex;
	flex-direction: column;
	gap: var(--c4-side-item-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.c4-sidebox__body li ul {
	margin-top: var(--c4-side-item-gap);
	padding-left: var(--c4-side-indent);   /* 2차 들여쓰기 */
}

.c4-sidebox__body a {
	display: block;
	font-size: var(--c4-fs-body3);
	font-weight: var(--c4-fw-regular);
	line-height: var(--c4-lh-body);
	color: var(--c4-color-text-sub);
	transition: color .15s ease;
}

.c4-sidebox__body a:hover { color: var(--c4-color-accent); }

/*
 * 현재 항목 — 색이 아니라 **진하기와 굵기로** 구분한다.
 * ★ 목록 드롭다운은 코어가 `.current-cat` 을 붙이므로 두 선택자를 함께 선언한다
 *   (코어 출력을 고쳐 쓰지 않기 위한 예외). 상세 목차·관련글은 `.c4-is-current` 를 쓴다.
 */
.c4-sidebox__body .c4-is-current > a,
.c4-sidebox__body li.current-cat > a {
	font-weight: var(--c4-fw-bold);
	color: var(--c4-color-text);
}

/* ---------- 전환 (JS 없이 CSS 만) ---------- */

.c4-sidebox::details-content {
	height: 0;
	overflow: clip;
	transition: height var(--c4-transition-side), content-visibility var(--c4-transition-side) allow-discrete;
}

.c4-sidebox[open]::details-content { height: auto; }

/* 목차 링크로 접을 때만 바로(single.js 4) — 리빌 중인 도착 블록 때문에 스크롤 앵커링이 꺼져 도착 지점이 밀리던 것(2026-10-12 리뷰). */
.c4-sidebox.c4-sidebox--instant::details-content { transition: none; }

/* 미지원 브라우저는 즉시 열리고 닫힌다 — **정상 폴백이므로 JS 로 보완하지 말 것.** */

@media (prefers-reduced-motion: reduce) {
	.c4-sidebox::details-content,
	.c4-sidebox__chevron,
	.c4-sidebox__head { transition-duration: 0s; }
}

/* ---------- 배치 ---------- */

/*
 * 데스크톱 sticky.
 * ★★ 그리드 칸(슬롯)과 sticky 박스를 분리한다 — 슬롯(.c4-layout__side)은
 *    그리드 기본값(stretch)으로 본문 높이만큼 늘어나고, sticky 는 **안쪽 박스**에 건다.
 *    슬롯에 align-self 를 주면 콘텐츠 높이로 줄어들어 움직일 여지가 0 이 되고
 *    sticky 가 아무 일도 하지 않는다(CSS 에러도 없다).
 * ★ position:fixed 금지. 세로 시작선은 첫 카드 상단과 같은 행(그리드 형제)이며
 *   top 좌표를 하드코딩하지 않는다.
 */
@media (min-width: 1360px) {
	.c4-layout__side .c4-sidebox {
		position: sticky;
		top: calc(var(--c4-admin-bar-h, 0px) + var(--c4-header-h) + var(--c4-side-sticky-offset));
	}
}

/* 1360 미만 — 인라인(본문 위). DOM 순서가 이미 사이드 → 본문이라 order 가 필요 없다. */
@media (max-width: 1359.98px) {
	.c4-layout__side { margin-bottom: var(--c4-gap-block); }

	.c4-sidebox { width: 100%; }
}

/* 768 미만 — **카테고리 드롭다운만** 숨긴다(모바일 목록에 필터를 두지 않는다, 시안 그대로).
   상세의 목차는 768 미만에서도 유지되므로 이 규칙은 category 변형에만 건다. */
@media (max-width: 767.98px) {
	.c4-layout__side--category { display: none; }
}