/* ==========================================================================
   Components - 目次（Table of Contents）
   ========================================================================== */

.pb-toc {
  margin: var(--pb-space-8) 0;
  background: var(--pb-bg-secondary);
  border: 1px solid var(--pb-border-color);
  border-radius: var(--pb-radius-lg);
  overflow: hidden;
}

/* ===== ヘッダー ===== */
.pb-toc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pb-space-4) var(--pb-space-6);
  cursor: pointer;
  user-select: none;
  transition: background var(--pb-transition-fast);
}

.pb-toc-header:hover {
  background: var(--pb-bg-tertiary);
}

.pb-toc-title {
  font-size: var(--pb-font-size-base);
  font-weight: var(--pb-font-weight-bold);
  color: var(--pb-text-primary);
  display: flex;
  align-items: center;
  gap: var(--pb-space-2);
}

.pb-toc-title::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background: var(--pb-primary);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M2 3.75A.75.75 0 012.75 3h11.5a.75.75 0 010 1.5H2.75A.75.75 0 012 3.75zM2 7.5a.75.75 0 01.75-.75h6.365a.75.75 0 010 1.5H2.75A.75.75 0 012 7.5zM14 7a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L14 8.852l-2.7 2.908a.75.75 0 11-1.1-1.02l3.25-3.5A.75.75 0 0114 7zM2 11.25a.75.75 0 01.75-.75H7A.75.75 0 017 12H2.75a.75.75 0 01-.75-.75z' clip-rule='evenodd'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M2 3.75A.75.75 0 012.75 3h11.5a.75.75 0 010 1.5H2.75A.75.75 0 012 3.75zM2 7.5a.75.75 0 01.75-.75h6.365a.75.75 0 010 1.5H2.75A.75.75 0 012 7.5zM14 7a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L14 8.852l-2.7 2.908a.75.75 0 11-1.1-1.02l3.25-3.5A.75.75 0 0114 7zM2 11.25a.75.75 0 01.75-.75H7A.75.75 0 017 12H2.75a.75.75 0 01-.75-.75z' clip-rule='evenodd'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
}

.pb-toc-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--pb-radius-full);
  color: var(--pb-text-muted);
  transition: all var(--pb-transition-fast);
}

.pb-toc-toggle-btn:hover {
  background: var(--pb-bg-primary);
  color: var(--pb-primary);
}

.pb-toc-toggle-btn svg {
  transition: transform var(--pb-transition-base);
}

.pb-toc.is-closed .pb-toc-toggle-btn svg {
  transform: rotate(-90deg);
}

/* ===== 目次本体 ===== */
.pb-toc-body {
  padding: 0 var(--pb-space-6) var(--pb-space-5);
  max-height: 500px;
  overflow: hidden;
  transition: max-height var(--pb-transition-slow), padding var(--pb-transition-slow), opacity var(--pb-transition-base);
  opacity: 1;
}

.pb-toc.is-closed .pb-toc-body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

/* ===== リスト ===== */
.pb-toc-list {
  counter-reset: toc-counter;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pb-toc-sublist {
  counter-reset: toc-sub-counter;
  list-style: none;
  padding: 0;
  margin: 0;
  padding-left: var(--pb-space-5);
}

.pb-toc-item {
  position: relative;
}

.pb-toc-item a {
  display: block;
  padding: var(--pb-space-2) var(--pb-space-3);
  font-size: var(--pb-font-size-sm);
  color: var(--pb-text-secondary);
  border-radius: var(--pb-radius-sm);
  transition: all var(--pb-transition-fast);
  text-decoration: none;
  border-left: 2px solid transparent;
}

.pb-toc-item a:hover {
  background: var(--pb-bg-primary);
  color: var(--pb-primary);
  border-left-color: var(--pb-primary);
}

/* h2レベル */
.pb-toc-level-2 > a {
  font-weight: var(--pb-font-weight-medium);
  counter-increment: toc-counter;
}

.pb-toc-level-2 > a::before {
  content: counter(toc-counter) ". ";
  color: var(--pb-primary);
  font-weight: var(--pb-font-weight-bold);
}

/* h3レベル */
.pb-toc-level-3 > a {
  font-size: var(--pb-font-size-xs);
  padding-left: var(--pb-space-5);
}

.post-content h2[id],
.post-content h3[id] {
  scroll-margin-top: calc(var(--pb-header-height) + var(--pb-space-5));
}