.article-toc {
  padding: 32px 36px;
  border-radius: var(--radius-card);
  background: #eef4f4;
}

.article-toc h2 { margin-bottom: 18px; font-size: 26px; }

.article-toc ol {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.article-toc li { counter-increment: toc; }

.article-toc a {
  display: grid;
  width: fit-content;
  color: var(--color-text);
  font-weight: 700;
  grid-template-columns: 28px 1fr;
  transition: color var(--transition);
}

.article-toc a::before { color: var(--color-accent); content: counter(toc, decimal-leading-zero); }
.article-toc a:hover { color: var(--color-accent); }

@media (max-width: 767px) {
  .article-toc { padding: 26px 22px; }
  .article-toc h2 { font-size: 24px; }
  .article-toc a { font-size: 14px; }
}