/* 목차(TOC)와 관련 아티클 추천 카드 — 모든 수유가이드 아티클 페이지가 공유하는 스타일.
   각 페이지 :root에 정의된 --mint / --tan / --line 등 CSS 변수를 그대로 사용합니다. */

.toc{
  display:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:14px 16px; margin:4px 0 22px;
}
.toc.has-items{ display:block; }
.toc .toc-title{
  font-size:12.5px; font-weight:800; color:var(--mint-strong); margin:0 0 8px;
  display:flex; align-items:center; gap:6px;
}
.toc ol{ list-style:none; margin:0; padding:0; counter-reset:toc; }
.toc ol > li{ counter-increment:toc; margin:0 0 6px; }
.toc ol > li:last-child{ margin-bottom:0; }
.toc ol > li > a{
  font-size:13.5px; font-weight:700; text-decoration:none; color:var(--text);
  display:flex; gap:6px;
}
.toc ol > li > a::before{
  content:counter(toc); flex:0 0 auto; color:var(--mint-strong); font-weight:800;
}
.toc ol > li > a:hover{ color:var(--mint-strong); }
.toc ul.toc-sub{
  list-style:none; margin:6px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:5px;
}
.toc ul.toc-sub li a{
  font-size:12.5px; font-weight:600; text-decoration:none; color:var(--text-soft);
}
.toc ul.toc-sub li a:hover{ color:var(--mint-strong); }

.related-posts{ margin:30px 0 6px; }
.related-posts .related-title{ font-size:15px; font-weight:800; margin:0 0 12px; }
.related-posts .related-list{ display:flex; flex-direction:column; gap:10px; }
.related-posts .related-card{
  display:block; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:14px 16px; box-shadow:var(--shadow);
}
.related-posts .related-card .tag{
  display:inline-block; font-size:10.5px; font-weight:700; color:var(--tan-strong);
  background:var(--tan-tint); padding:2px 8px; border-radius:999px; margin-bottom:6px;
}
.related-posts .related-card h3{ font-size:14.5px; font-weight:800; margin:0 0 4px; }
.related-posts .related-card p{ font-size:12.5px; color:var(--text-soft); line-height:1.6; margin:0; }