.table-contents {
  max-width: 1180px;
  margin: 48px auto 16px;
  padding: 30px;
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 38px;
  background: #fff;
  border: 1px solid #d8e1dc;
  border-top: 7px solid #8fc43b;
  border-radius: 18px;
  box-shadow: 0 16px 42px rgba(23,58,42,.09);
}

.toc-heading h2 {
  margin: 6px 0 10px;
  color: #1a3d2b;
  font: 700 30px/1.1 Georgia, serif;
}

.toc-heading > p:last-child {
  margin: 0;
  color: #62736c;
  line-height: 1.55;
}

.table-contents ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.table-contents li a {
  min-height: 57px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  color: #1a3d2b;
  text-decoration: none;
  background: #f7faf7;
  border: 1px solid #d8e1dc;
  border-radius: 10px;
}

.table-contents li a:hover,
.table-contents li a:focus-visible {
  background: #e7f2d5;
  border-color: #8fc43b;
  transform: translateY(-1px);
}

.table-contents li span {
  color: #2d7a52;
  font: 700 14px Georgia, serif;
}

.table-contents li b { font-size: 13px; line-height: 1.3; }

.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  color: #fff;
  background: #1a3d2b;
  border: 1px solid #8fc43b;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 9px 24px rgba(15,52,35,.22);
  font-size: 12px;
  font-weight: 800;
}

section[id] { scroll-margin-top: 96px; }

@media (max-width: 850px) {
  .table-contents { grid-template-columns: 1fr; margin: 28px 18px 8px; gap: 20px; }
}

@media (max-width: 600px) {
  .table-contents { padding: 22px; }
  .table-contents ol { grid-template-columns: 1fr; }
  .back-to-top span { display: none; }
  .back-to-top { width: 44px; height: 44px; justify-content: center; padding: 0; }
}