/*
 * sidebox.css — 사이드 박스 (목록의 카테고리 드롭다운 · 상세의 목차 공용)
 *
 * ★ 뷰 중립이다. 화면별 노출 규칙(목록은 <768 숨김, 상세는 유지)은 각 화면 CSS 가 슬롯에 건다.
 * 기하·색·전환은 확정값 §9 그대로다.
 */

/*
 * ★★ 그리드 칸(슬롯)과 sticky 박스를 분리한다.
 *   슬롯(.c4-layout__side)은 그리드 기본값(stretch)으로 두어 본문 높이만큼 늘어나게 하고,
 *   sticky 는 그 **안쪽 박스**에만 건다.
 *
 * ★ 슬롯에 align-self: flex-start 를 주지 말 것 — 슬롯이 콘텐츠 높이로 줄어들어
 *   움직일 여지가 0 이 되고 sticky 가 아무 일도 하지 않는다. CSS 에러는 나지 않는다.
 *   sticky 가 기대는 높이는 슬롯의 높이이고, 그 높이는 본문(형제 칸)에서 온다.
 *
 * position: fixed 금지(전역 금지 항목).
 */
.c4-sidebox {
	background: var(--c4-color-white);
	border: var(--c4-border-w) solid var(--c4-color-border);
	border-radius: var(--c4-radius-box);
}

@media (min-width: 1360px) {
	.c4-sidebox {
		position: sticky;
		top: calc(var(--c4-admin-bar-h, 0px) + var(--c4-header-h) + var(--c4-sidebox-sticky-gap));
	}
}

/* ── 헤더(토글 바) ──────────────────────────────────────── */

/*
 * ★ 바의 안쪽 높이는 46 이다(48 이 아니다).
 *   시안 State=Closed 242×48 은 박스 테두리 1px 위아래를 포함한 바깥 치수다.
 *   바를 48 로 잡으면 박스가 50 이 되어 시안보다 2px 커진다.
 *
 * ★ 높이를 내용에 맡기면 안 된다(3단계 실측으로 확인).
 *   패딩 12×2 + 줄높이 22.5(15×1.5) + 접힘 때도 자리를 잡는 투명 하단선 1px = 47.5 가 되어
 *   접힌 박스가 49.5 로 나왔다. border-box 로 46 을 고정하고 세로 가운데 정렬한다.
 */
.c4-sidebox__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--c4-sidebox-item-gap);
	height: var(--c4-sidebox-head-h);
	padding: 0 var(--c4-sidebox-head-pad-x);
	border-bottom: var(--c4-border-w) solid transparent;
	border-radius: var(--c4-radius-box) var(--c4-radius-box) 0 0;
	cursor: pointer;
	list-style: none;
}

/* 기본 삼각형 마커를 없앤다. */
.c4-sidebox__head::-webkit-details-marker {
	display: none;
}

/*
 * ★ 접힌 상태에서는 헤더의 아래 구분선을 없앤다 —
 *   박스 바깥 테두리 1px 과 헤더 구분선 1px 이 붙어 2px 선처럼 보인다.
 *   자리는 transparent 로 남겨 두어 펼칠 때 높이가 튀지 않게 한다.
 */
.c4-sidebox__details[open] > .c4-sidebox__head {
	border-bottom-color: var(--c4-color-border);
}

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

.c4-sidebox__chevron {
	flex-shrink: 0;
	width: var(--c4-sidebox-chevron-w);
	height: auto;
	color: var(--c4-color-text);
	transform: rotate(180deg);
	transition: transform var(--c4-transition);
}

.c4-sidebox__details:not([open]) > .c4-sidebox__head .c4-sidebox__chevron {
	transform: rotate(0deg);
}

/* ── 본문 ───────────────────────────────────────────────── */

.c4-sidebox__body {
	padding: var(--c4-sidebox-body-pad-y) var(--c4-sidebox-body-pad-x);
}

.c4-sidebox__list,
.c4-sidebox__list ul {
	display: flex;
	flex-direction: column;
	gap: var(--c4-sidebox-item-gap);
	list-style: none;
}

/* 2차 들여쓰기. 중첩 <ul> 이 규격이다. */
.c4-sidebox__list ul {
	margin-top: var(--c4-sidebox-item-gap);
	padding-inline-start: var(--c4-sidebox-indent);
}

.c4-sidebox__list a {
	font-size: var(--c4-fz-body3);
	line-height: var(--c4-lh-body);
	font-weight: var(--c4-fw-regular);
	color: var(--c4-color-text-sub);
	text-decoration: none;
}

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

/*
 * '박스 안 목록' 색 규칙 — 현재 항목은 색이 아니라 진하기와 굵기로 구분한다.
 * ★ 클래스 이름은 .c4-is-current 하나가 규격이지만,
 *   목록 드롭다운은 wp_list_categories() 가 코어 클래스 .current-cat 을 붙이므로
 *   코어 출력을 고쳐 쓰지 않기 위해 둘 다 현재 항목으로 인식한다.
 */
.c4-sidebox__list .c4-is-current > a,
.c4-sidebox__list li.current-cat > a {
	color: var(--c4-color-text);
	font-weight: var(--c4-fw-bold);
}

/* ── 펼침/접힘 전환 (JS 없이 CSS 만) ────────────────────── */

/*
 * interpolate-size 가 있어야 height: auto 로 트랜지션이 걸린다. 없으면 애니메이션이 안 먹는다.
 * 미지원 브라우저는 즉시 열리고 닫힌다 — 그게 정상 폴백이므로 JS 로 보완하지 않는다.
 */
:root {
	interpolate-size: allow-keywords;
}

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

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

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