/* ==========================================================================
   sections/sidebox.css — 사이드 박스 (목록 드롭다운 · 상세 목차 공용)

   ★ 뷰 중립 컴포넌트입니다. 화면 이름으로 분기하는 규칙을 여기에 넣지 마세요.
     "목록은 768 미만에서 숨김"은 list.css 가 자기 문맥에 겁니다 —
     같은 컴포넌트를 쓰는 **상세의 목차는 768 미만에서도 유지**되어야 하기 때문입니다.
   ========================================================================== */

/* height:auto 로 트랜지션이 걸리게 합니다. 이게 없으면 애니메이션이 안 먹습니다. */
:root {
  interpolate-size: allow-keywords;
}

/* --------------------------------------------------------------------------
   박스

   ★★ 그리드 칸(슬롯)과 sticky 박스는 분리돼 있습니다.
      슬롯(.c4-content-grid__side)은 그리드 기본값(stretch)으로 본문 높이만큼 늘어나고,
      sticky 는 **이 박스에만** 겁니다. 그래서 본문 끝(푸터 시작)에서 함께 멈춥니다.
      슬롯에 align-self:flex-start 를 주면 움직일 여지가 0 이 되어 sticky 가
      아무 일도 하지 않습니다(CSS 에러 없음).

   ★ position:fixed 금지(전역 금지).
   -------------------------------------------------------------------------- */

.c4-sidebox {
  position: sticky;
  top: calc(var(--c4-admin-bar-h, 0px) + var(--c4-header-h) + var(--c4-sidebox-sticky-top));
  background: var(--c4-color-white);
  border: var(--c4-border-w) solid var(--c4-color-border);
  border-radius: var(--c4-radius-box);
}

/* --------------------------------------------------------------------------
   토글 바

   ★ 접힘 상태 박스의 **바깥** 높이가 48 입니다. 테두리 1px 을 포함한 치수라
     이 바의 안쪽은 46 이어야 합니다(48 로 잡으면 박스가 50 이 됩니다).
   -------------------------------------------------------------------------- */

.c4-sidebox__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--c4-sidebox-head-h);
  padding: var(--c4-sidebox-head-pad-y) var(--c4-sidebox-head-pad-x);
  cursor: pointer;
  list-style: none;

  /* ★ 접힌 상태에서는 구분선을 없앱니다 —
     박스 바깥 테두리 1px 과 붙어 2px 선처럼 보입니다. 펼친 상태에서만 그립니다. */
  border-bottom: var(--c4-border-w) solid transparent;
}

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

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

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

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

.c4-sidebox__chevron .c4-icon {
  width: 100%;
  height: 100%;
}

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

/* --------------------------------------------------------------------------
   펼침 전환 — JS 없이 CSS 만으로.

   미지원 브라우저는 즉시 열리고 닫힙니다. 그게 정상 폴백이므로 JS 로 보완하지 마세요.
   (움직임 최소화 설정은 base.css 의 prefers-reduced-motion 블록이 처리합니다.)
   -------------------------------------------------------------------------- */

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

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

/* --------------------------------------------------------------------------
   목록
   -------------------------------------------------------------------------- */

.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;
  margin: 0;
  padding: 0;
}

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

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

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

/*
 * 현재 항목 — 색이 아니라 **진하기와 굵기**로 구분합니다.
 * ★ .c4-is-current 와 코어가 붙이는 .current-cat 을 함께 인식합니다
 *   (코어 출력을 고쳐 쓰지 않기 위한 예외).
 */
.c4-sidebox__list .c4-is-current > a,
.c4-sidebox__list .current-cat > a {
  color: var(--c4-color-text);
  font-weight: var(--c4-type-weight-bold);
}

/* --------------------------------------------------------------------------
   1360 미만 — 인라인(본문 위). sticky 를 풉니다.
   -------------------------------------------------------------------------- */

@media (max-width: 1359.98px) {
  .c4-sidebox {
    position: static;
  }

  .c4-content-grid__side {
    margin-bottom: var(--c4-grid-gap);
  }
}