/* Component: Table of Contents (Easy TOC 플러그인 #ez-toc-container) -----
   플러그인 설정에서 "핵심 CSS 로드 방지"가 켜져 있어 플러그인 자체 CSS 가
   실리지 않는다 → 충돌이 없으므로 !important 없이 우리 토큰으로 스타일링한다.
   (#ez-toc-container 의 id 셀렉터로 충분한 specificity 확보) */

#ez-toc-container {
  background: var(--color-primary-soft);
  border: 1px solid var(--c-blue-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-3) var(--space-5) var(--space-4);
  margin: var(--space-6) 0;
}

/* 제목 줄 (제목 + 접기 토글) */
#ez-toc-container .ez-toc-title-container {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 1.5em;
  margin-bottom: 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--c-blue-200);
}
#ez-toc-container .ez-toc-title {
  font-family: var(--font-sans);
  font-weight: var(--fw-black);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--color-text);
  letter-spacing: -0.02em;
}
/* 접기/펼치기 토글 아이콘 — 제목과 세로 중앙 정렬 */
#ez-toc-container .ez-toc-title-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}
#ez-toc-container .ez-toc-title-container svg { vertical-align: middle; }
#ez-toc-container a.ez-toc-pull-right,
#ez-toc-container .ez-toc-toggle { color: var(--color-primary); }
#ez-toc-container .ez-toc-toggle svg { fill: var(--color-primary); }

/* 목록 */
#ez-toc-container nav { margin: 0; padding: 0; }
#ez-toc-container nav ul,
#ez-toc-container ul.ez-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ez-toc;
}
#ez-toc-container ul li { margin: 0; }

/* 항목 링크 — 번호 매김 + 패딩 + 호버 */
#ez-toc-container ul li a.ez-toc-link {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: var(--fs-sm);
  line-height: 1.35;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
#ez-toc-container ul > li > a.ez-toc-link::before {
  counter-increment: ez-toc;
  content: counter(ez-toc);
  flex: 0 0 auto;
  min-width: 1.5em;
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
}
#ez-toc-container ul li a.ez-toc-link:hover {
  background: var(--color-surface);
  color: var(--color-primary);
}
/* 현재 보고 있는 섹션(스크롤 스파이) 강조 */
#ez-toc-container ul li a.ez-toc-link.ez-toc-active,
#ez-toc-container ul li.active > a.ez-toc-link {
  background: var(--color-surface);
  color: var(--color-primary);
  font-weight: var(--fw-bold);
}

/* 중첩(h3) 항목은 들여쓰기, 번호 숨김 */
#ez-toc-container ul li ul { padding-left: var(--space-5); }
#ez-toc-container ul li ul > li > a.ez-toc-link::before { content: none; }

@media (max-width: 600px) {
  #ez-toc-container {
    padding: var(--space-3) var(--space-4) var(--space-4);
    margin: var(--space-5) 0;
  }
}