/* ===== Modern TOC (Article Index) ===== */
.article-index { 
  /* configurable theme */ 
  --toc-bg: #ffffff; 
  --toc-fg: #1f2937; 
  --toc-muted: #6b7280; 
  --toc-accent: #5865f2;      /* main accent */ 
  --toc-accent-2: #8b5cf6;    /* gradient end */ 
  --toc-border: #e5e7eb; 
  --toc-shadow: 0 10px 30px rgba(0,0,0,.06); 

  background: var(--toc-bg); 
  color: var(--toc-fg); 
  border: 1px solid var(--toc-border); 
  border-radius: 16px; 
  padding: 1.25rem 1.25rem 1.1rem; 
  box-shadow: var(--toc-shadow); 
  position: relative; 
  overflow: hidden; 
  max-width: 500px;
  margin: 0 auto;
}


/* heading */
.article-index .mokuji { 
  display:flex; 
  align-items:center; 
  gap:.6rem; 
  font-weight:800; 
  letter-spacing:.02em; 
  margin:-1.25rem -1.25rem 1rem -1.25rem; /* 枠いっぱいに広げる */ 
  padding:0.8rem 1.25rem; 
  background: linear-gradient(90deg, var(--toc-accent), var(--toc-accent-2)); 
  color:#fff; 
  border-top-left-radius: 16px; 
  border-top-right-radius: 16px; 
}
.article-index .mokuji::before { 
  content:"📑"; 
  font-size:1.05rem; 
  line-height:1; 
}

/* reset lists */
.article-index > ol{
  counter-reset: main-section;
  list-style:none;
  margin:0;
  padding:0;
}

/* top-level item */
.article-index > ol > li{
  counter-increment: main-section;
  position:relative;
  padding:.55rem .5rem .55rem 3.2rem;
  border-radius:12px;
  transition: background .25s ease, transform .06s ease;
}

/* number badge */
.article-index > ol > li::before{
  content: counter(main-section);
  position:absolute;
  left:.85rem; top:.64rem;
  width:1.9rem; height:1.9rem;
  display:grid; place-items:center;
  font-weight:800; font-size:.95rem; color:#fff;
  background: linear-gradient(135deg, var(--toc-accent), var(--toc-accent-2));
  border-radius:999px;
  box-shadow: 0 6px 16px rgba(88,101,242,.25);
}

/* item hover */
.article-index > ol > li:hover{
  background: linear-gradient(180deg, rgba(88,101,242,.06), rgba(139,92,246,.06));
}

/* links */
.article-index a{
  color: var(--toc-fg);
  text-decoration:none;
  font-weight:700;
  transition: color .2s ease, transform .2s ease;
}
.article-index a:hover{
  color: var(--toc-accent);
}

/* second level */
.article-index > ol > li > ol{
  counter-reset: sub-section;
  list-style:none;
  margin:.4rem 0 .2rem 0;
  padding-left:3.2rem; /* align with badges */
  border-left: 2px dashed rgba(88,101,242,.25);
  font-size: 13px;
  line-height: 13px;

}

/* second-level items */
.article-index > ol > li > ol > li{
  counter-increment: sub-section;
  position:relative;
  padding:.38rem .5rem .38rem 1.1rem;
  color: var(--toc-muted);
  font-weight:600;
  border-radius:10px;
  transition: background .2s ease, color .2s ease;
}

/* 1-1 label + chevron */
.article-index > ol > li > ol > li::before{
  content: counter(main-section) "-" counter(sub-section) "  ›";
  position:absolute;
  left: -1.75rem; top:.42rem;
  font-variant-numeric: tabular-nums;
  color: var(--toc-accent);
  font-weight:800;
  opacity:.85;
}

/* sub link hover */
.article-index > ol > li > ol > li a:hover{
  color: var(--toc-accent);
  transform: translateX(2px);
}

/* responsive tweaks */
@media (max-width: 768px){
  .article-index{ padding: .9rem .9rem .8rem; border-radius:14px; }
  .article-index > ol > li{ padding-left:2.9rem; }
  .article-index > ol > li::before{ left:.65rem; }
  .article-index > ol > li > ol{ padding-left:2.2rem; }
}