.article-toc {
background: #f8f8f8;
border: 1px solid #e0e0e0;
padding: 0;
margin-bottom: 2rem;
max-width: 640px;
} .article-toc__toggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 1rem 1.25rem;
background: none;
border: none;
cursor: pointer;
font-family: var(--font-primary);
text-align: left;
gap: 0.75rem;
border-bottom: 1px solid #e0e0e0;
transition: background 0.2s;
}
.article-toc__toggle:hover {
background: rgba(0, 0, 0, 0.03);
}
.article-toc__toggle:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: -2px;
}
.article-toc__title {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
color: #222;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.article-toc__arrow {
flex-shrink: 0;
color: #666;
transition: transform 0.3s ease;
} .article-toc--collapsed .article-toc__toggle {
border-bottom-color: transparent;
}
.article-toc--collapsed .article-toc__arrow {
transform: rotate(-90deg);
}
.article-toc--collapsed .article-toc__body {
max-height: 0;
overflow: hidden;
opacity: 0;
padding-top: 0;
padding-bottom: 0;
} .article-toc__body {
max-height: 2000px;
overflow: hidden;
opacity: 1;
padding: 0.5rem 1.25rem 1rem;
transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
} .article-toc__list {
list-style: none;
margin: 0;
padding: 0;
counter-reset: toc-counter;
}
.article-toc__sublist {
list-style: none;
margin: 0;
padding: 0 0 0 1.25rem;
} .article-toc__item {
margin: 0;
padding: 0;
} .article-toc__link {
display: block;
padding: 0.4rem 0.5rem;
color: #444;
text-decoration: none;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-snug);
border-left: 3px solid transparent;
transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.article-toc__link:hover {
color: var(--color-accent);
background: rgba(194, 109, 40, 0.05);
}
.article-toc__link:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: -2px;
} .article-toc__link--sub {
font-size: 0.8125rem;
font-weight: var(--font-weight-regular);
color: #666;
padding: 0.3rem 0.5rem;
} .article-toc__link--active {
color: var(--color-accent);
border-left-color: var(--color-accent);
background: rgba(194, 109, 40, 0.06);
font-weight: var(--font-weight-semibold);
} .article-toc__number {
color: var(--color-accent);
font-weight: var(--font-weight-semibold);
font-size: 0.8125rem;
} @media (max-width: 768px) {
.article-toc {
max-width: 100%;
}
.article-toc__link {
font-size: 0.8125rem;
padding: 0.35rem 0.4rem;
}
.article-toc__link--sub {
font-size: 0.75rem;
}
.article-toc__title {
font-size: 0.75rem;
}
} @media (prefers-reduced-motion: reduce) {
.article-toc__body,
.article-toc__arrow,
.article-toc__link {
transition: none;
}
}