/* ================================================================
   목차 (TOC)
   ================================================================ */

.yc-toc {
	margin-block: 2.5rem;
	padding: 1.75rem 1.875rem;
	background-color: var(--yc-paper);
	border: 1px solid var(--yc-line);
	border-radius: 4px;
}

.yc-toc__title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 1.125rem !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: 1.25rem !important;
	font-weight: 700;
	color: var(--yc-ink);
	letter-spacing: -0.01em;
}

.yc-toc__icon {
	font-size: 1.125rem;
	color: var(--yc-gold);
}

.yc-toc__list {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	counter-reset: none;
}

.yc-toc__item {
	margin: 0 !important;
}

.yc-toc__link {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	/* 시니어 터치 영역 확보 */
	min-height: 52px;
	padding: 0.5rem 0;
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.55;
	color: var(--yc-ink-soft);
	text-decoration: none !important;
	word-break: keep-all;
	transition: color 0.18s ease;
}

.yc-toc__link:hover,
.yc-toc__link:focus-visible {
	color: var(--yc-brand);
}

.yc-toc__link:hover .yc-toc__text,
.yc-toc__link:focus-visible .yc-toc__text {
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 2px;
}

/* 번호 */
.yc-toc__num {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.75rem;
	height: 1.75rem;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--yc-white);
	background-color: var(--yc-brand);
	border-radius: 4px;
}

/* 소제목(h3)은 들여쓰기 */
.yc-toc__item--h3 .yc-toc__link {
	padding-inline-start: 2.5rem;
	font-size: 1.0625rem;
	color: var(--yc-ink-mute);
	min-height: 46px;
}

.yc-toc__item--h3 .yc-toc__link::before {
	content: "—";
	margin-inline-end: 0.5rem;
	color: var(--yc-line);
}

/* ---------- 목차로 이동했을 때 ---------- */

/* 고정 헤더에 제목이 가리지 않도록 여유를 둔다 */
.yc-article__body h2,
.yc-article__body h3 {
	scroll-margin-block-start: 2rem;
}

/* 방금 이동한 제목을 잠깐 강조 — 어디로 왔는지 알기 쉽게 */
.yc-article__body h2:target,
.yc-article__body h3:target {
	animation: yc-target-flash 2.4s ease-out;
}

@keyframes yc-target-flash {
	0%, 25% {
		background-color: var(--yc-gold-tint);
		box-shadow: -0.5rem 0 0 var(--yc-gold-tint), 0.5rem 0 0 var(--yc-gold-tint);
	}
	100% {
		background-color: transparent;
		box-shadow: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.yc-article__body h2:target,
	.yc-article__body h3:target {
		animation: none;
		background-color: var(--yc-gold-tint);
	}
}

/* ---------- 모바일 ---------- */

@media (max-width: 640px) {
	.yc-toc {
		padding: 1.375rem 1.25rem;
	}

	.yc-toc__item--h3 .yc-toc__link {
		padding-inline-start: 1.75rem;
	}
}

@media print {
	.yc-toc {
		display: none;
	}
}