/* Japanese Edition — article table of contents */
.generate-jp-toc {
	--jp-toc-accent: var(--contrast-2, #285c59);
	--jp-toc-ink: var(--contrast, #202b35);
	--jp-toc-muted: var(--contrast-2, #66727d);
	--jp-toc-border: var(--base-3, #e4e8eb);
	margin: clamp(1.5rem, 3vw, 2.35rem) 0;
	color: var(--jp-toc-ink);
	background: linear-gradient(135deg, #fff 0%, #f7f9f8 100%);
	border: 1px solid var(--jp-toc-border);
	border-radius: 18px;
	box-shadow: 0 10px 32px rgba(24, 39, 45, 0.055);
	overflow: clip;
	font-size: 0.98rem;
}

.generate-jp-toc__details {
	margin: 0;
}

.generate-jp-toc__summary {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	min-height: 76px;
	padding: 1rem 1.2rem;
	list-style: none;
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 180ms ease;
}

.generate-jp-toc__summary::-webkit-details-marker {
	display: none;
}

.generate-jp-toc__summary::marker {
	content: "";
}

.generate-jp-toc__summary:hover {
	background: rgba(40, 92, 89, 0.035);
}

.generate-jp-toc__summary:focus-visible {
	outline: 3px solid rgba(40, 92, 89, 0.35);
	outline-offset: -4px;
}

.generate-jp-toc__icon {
	display: inline-grid;
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	place-items: center;
	color: #fff;
	background: var(--jp-toc-accent);
	border-radius: 13px;
	box-shadow: 0 5px 12px rgba(40, 92, 89, 0.16);
}

.generate-jp-toc__icon svg {
	display: block;
	width: 23px;
	height: 23px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
}

.generate-jp-toc__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
	gap: 0.2rem;
}

.generate-jp-toc__title {
	font-size: 1.08rem;
	font-weight: 750;
	line-height: 1.35;
	letter-spacing: 0.025em;
}

.generate-jp-toc__subtitle {
	color: var(--jp-toc-muted);
	font-size: 0.82rem;
	font-weight: 400;
	line-height: 1.45;
}

.generate-jp-toc__count {
	flex: 0 0 auto;
	padding: 0.38rem 0.68rem;
	color: var(--jp-toc-accent);
	background: rgba(40, 92, 89, 0.075);
	border: 1px solid rgba(40, 92, 89, 0.11);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
}

.generate-jp-toc__chevron {
	position: relative;
	flex: 0 0 11px;
	width: 11px;
	height: 11px;
	margin: 0 0.15rem 0 0.2rem;
	border-right: 2px solid var(--jp-toc-muted);
	border-bottom: 2px solid var(--jp-toc-muted);
	transform: translateY(-2px) rotate(45deg);
	transition: transform 200ms ease;
}

.generate-jp-toc__details[open] > .generate-jp-toc__summary {
	border-bottom: 1px solid var(--jp-toc-border);
}

.generate-jp-toc__details[open] > .generate-jp-toc__summary .generate-jp-toc__chevron {
	transform: translateY(3px) rotate(225deg);
}

.generate-jp-toc__panel {
	padding: 0.7rem 1.1rem 1rem;
	animation: generate-jp-toc-reveal 180ms ease-out both;
}

.generate-jp-toc__list {
	display: grid;
	gap: 0.18rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: jp-toc;
}

.generate-jp-toc__item {
	min-width: 0;
	margin: 0;
	padding: 0;
}

.generate-jp-toc__item a {
	display: block;
	position: relative;
	padding: 0.68rem 0.85rem 0.68rem 1rem;
	color: inherit;
	border-radius: 9px;
	border-left: 2px solid transparent;
	font-size: 0.93rem;
	line-height: 1.65;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, padding-left 160ms ease;
}

.generate-jp-toc__item a:hover,
.generate-jp-toc__item a:focus-visible {
	color: var(--jp-toc-accent);
	background: rgba(40, 92, 89, 0.055);
	border-left-color: var(--jp-toc-accent);
	padding-left: 1.12rem;
	outline: none;
}

.generate-jp-toc__item a.is-active {
	color: var(--jp-toc-accent);
	background: rgba(40, 92, 89, 0.07);
	border-left-color: var(--jp-toc-accent);
	font-weight: 650;
}

.generate-jp-toc__item--level-3 {
	padding-left: 1.05rem;
}

.generate-jp-toc__item--level-4 {
	padding-left: 2.1rem;
}

.entry-content h2[id],
.entry-content h3[id],
.entry-content h4[id] {
	scroll-margin-top: 6.5rem;
}

@keyframes generate-jp-toc-reveal {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
	.generate-jp-toc {
		border-radius: 15px;
	}

	.generate-jp-toc__summary {
		gap: 0.7rem;
		min-height: 68px;
		padding: 0.85rem;
	}

	.generate-jp-toc__icon {
		flex-basis: 38px;
		width: 38px;
		height: 38px;
		border-radius: 11px;
	}

	.generate-jp-toc__icon svg {
		width: 21px;
		height: 21px;
	}

	.generate-jp-toc__title {
		font-size: 1rem;
	}

	.generate-jp-toc__subtitle {
		font-size: 0.75rem;
	}

	.generate-jp-toc__count {
		padding: 0.3rem 0.5rem;
		font-size: 0.7rem;
	}

	.generate-jp-toc__panel {
		padding: 0.55rem 0.65rem 0.75rem;
	}

	.generate-jp-toc__item a {
		padding-top: 0.62rem;
		padding-bottom: 0.62rem;
		font-size: 0.9rem;
	}

	.generate-jp-toc__item--level-3 {
		padding-left: 0.65rem;
	}

	.generate-jp-toc__item--level-4 {
		padding-left: 1.2rem;
	}
}

@media (max-width: 380px) {
	.generate-jp-toc__subtitle,
	.generate-jp-toc__count {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.generate-jp-toc *,
	.generate-jp-toc *::before,
	.generate-jp-toc *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}
