/* Auto TOC (자동 목차) — 어떤 스킨에서나 쓰도록 클래스는 tc-toc 로 시작합니다.
   색을 바꾸려면 아래 변수만 스킨 CSS 에서 다시 지정하세요. 예) .tc-toc { --toc-accent: #0a7; } */
.tc-toc {
	--toc-bg: #fafafa; --toc-line: #e4e4e7; --toc-text: #27272a; --toc-muted: #8a8a93; --toc-accent: #111111; --toc-hover: #f0f0f2;
	margin: 0 0 2.2em; border: 1px solid var(--toc-line); border-radius: 14px; background: var(--toc-bg);
	font-family: inherit; font-size: 15px; line-height: 1.5; color: var(--toc-text); overflow: hidden;
}
.tc-toc__head {
	display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 16px 20px;
	border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.tc-toc__icon { /* 목록 모양 아이콘 (CSS 로 그림) */
	position: relative; flex: 0 0 18px; width: 18px; height: 14px;
	background: linear-gradient(currentColor, currentColor) 6px 0 / 12px 2px no-repeat,
	            linear-gradient(currentColor, currentColor) 6px 6px / 12px 2px no-repeat,
	            linear-gradient(currentColor, currentColor) 6px 12px / 12px 2px no-repeat,
	            radial-gradient(circle, currentColor 1.6px, transparent 2px) 0 -3px / 4px 8px no-repeat,
	            radial-gradient(circle, currentColor 1.6px, transparent 2px) 0 3px / 4px 8px no-repeat,
	            radial-gradient(circle, currentColor 1.6px, transparent 2px) 0 9px / 4px 8px no-repeat;
}
.tc-toc__title { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.tc-toc__count { padding: 1px 8px; border-radius: 10px; background: #ececef; font-size: 12px; font-weight: 600; color: var(--toc-muted); }
.tc-toc__chev { width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--toc-muted); border-bottom: 2px solid var(--toc-muted); transform: rotate(-135deg) translate(-2px, -2px); transition: transform .25s ease; }
.tc-toc.is-collapsed .tc-toc__chev { transform: rotate(45deg); }
.tc-toc__body { overflow: hidden; transition: height .3s ease; }
.tc-toc.is-collapsed .tc-toc__body { height: 0; }
.tc-toc .tc-toc__list { list-style: none !important; margin: 0 !important; padding: 0 12px 14px !important; }
.tc-toc .tc-toc__list--sub { padding: 0 0 0 22px !important; }
/* 스킨의 본문 목록(li) 꾸밈이 목차에 번지지 않게 초기화 */
.tc-toc .tc-toc__item { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; list-style: none !important; }
.tc-toc__item::before, .tc-toc__item::marker { content: none; }
.tc-toc__link {
	position: relative; display: flex; gap: 10px; align-items: baseline; padding: 7px 10px 7px 12px; border-radius: 8px;
	color: var(--toc-text) !important; text-decoration: none !important; transition: background .15s ease, color .15s ease;
}
.tc-toc__link::before { /* 지금 읽는 위치 표시 막대 */
	content: ""; position: absolute; left: 2px; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: transparent; transition: background .15s ease;
}
.tc-toc__link:hover { background: var(--toc-hover); }
.tc-toc__link.is-active { color: var(--toc-accent) !important; font-weight: 600; background: var(--toc-hover); }
.tc-toc__link.is-active::before { background: var(--toc-accent); }
.tc-toc__num { flex: 0 0 auto; min-width: 1.4em; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--toc-muted); }
.tc-toc__item--d1 > .tc-toc__link { font-weight: 600; }
.tc-toc__item--d1 > .tc-toc__link .tc-toc__num { font-weight: 700; color: var(--toc-accent); }
.tc-toc__item--d2 > .tc-toc__link, .tc-toc__item--d3 > .tc-toc__link, .tc-toc__item--d4 > .tc-toc__link { font-size: 14px; color: #52525b !important; }
.tc-toc__text { word-break: keep-all; }
/* 목차로 이동했을 때 고정 헤더에 가리지 않게 */
.tc-toc-target { scroll-margin-top: 90px; }
@media (max-width: 760px) {
	.tc-toc { font-size: 14px; border-radius: 12px; }
	.tc-toc__head { padding: 14px 16px; }
	.tc-toc .tc-toc__list { padding: 0 8px 12px !important; }
	.tc-toc .tc-toc__list--sub { padding: 0 0 0 14px !important; }
}