@charset "utf-8";
/* ===== 文章正文目录（h2/h3）V1.0 ===== */
.article-toc-layout { display: flex; gap: 30px; align-items: flex-start; }
.article-toc-layout--left { flex-direction: row-reverse; }
.article-toc-layout--side > .article-toc-content { flex: 1; min-width: 0; overflow: hidden; }

.article-toc {
  display: none;
  box-sizing: border-box;
  width: 260px;
  flex: 0 0 260px;
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fafafa;
  position: -webkit-sticky;
  position: sticky;
  top: 150px;                          /* .header 高 136px，留 14px 间隙 */
  max-height: calc(100vh - 200px);
  overflow: auto;
  animation: tocFadeIn .3s ease both;
}
.article-toc.is-ready { display: block; }
@keyframes tocFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.article-toc__hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.article-toc__title { font-size: 16px; font-weight: bold; color: #333; }
.article-toc__toggle { font-size: 14px; color: #005bac; cursor: pointer; -webkit-user-select: none; user-select: none; }
.article-toc__toggle:hover { text-decoration: underline; }

.article-toc__list { margin: 0; padding: 0; list-style: none; }
.article-toc__item { margin: 6px 0; line-height: 1.6; font-size: 14px; }
.article-toc__item--h3 { padding-left: 16px; }
.article-toc__item a {
  color: #333;
  text-decoration: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-transition: color .2s;
  transition: color .2s;
}
.article-toc__item--h3 a { color: #666; }
.article-toc__item a:hover,
.article-toc__item a.active { color: #005bac; font-weight: bold; }

/* 正文下方折叠模式 */
.article-toc--bottom {
  width: 100%;
  flex: none;
  position: static;
  max-height: none;
  margin-top: 30px;
  background: #f7f9fc;
}
.article-toc--bottom .article-toc__list { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.article-toc--bottom .article-toc__item { width: 50%; padding: 0 10px; box-sizing: border-box; }

/* 响应式：小屏统一变上下堆叠 */
@media (max-width: 1199px) {
  .article-toc { top: 110px; }         /* .header 高 90px */
}
@media (max-width: 991px) {
  .article-toc-layout { flex-direction: column; gap: 20px; }
  .article-toc { position: static; width: 100%; flex: none; max-height: none; }
  .article-toc__item { font-size: 13px; }
  .article-toc--bottom .article-toc__item { width: 100%; }
}