.pc-set-toc, .pc-set-toc * { box-sizing: border-box; }
.pc-set-toc {
  --card-w: clamp(220px, 31vw, 400px);
  --toc-w: clamp(280px, 31vw, 375px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: min(100%, 1080px);
  min-height: clamp(420px, 56vw, 680px);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 48px) clamp(16px, 4vw, 48px);
}
.pc-set-toc__cards { position: absolute; inset: 0; pointer-events: none; }
.pc-set-toc__card {
  position: absolute;
  display: block;
  width: var(--card-w);
  height: auto;
  border-radius: 14px;
  box-shadow: 0 18px 30px rgba(0, 0, 0, .22);
  user-select: none;
}
.pc-set-toc__card--back { left: clamp(-20px, -1vw, 0px); top: clamp(40px, 6vw, 80px); transform: rotate(-8deg); }
.pc-set-toc__card--front { left: clamp(20px, 4vw, 60px); top: clamp(14px, 3vw, 34px); }
.pc-set-toc__index {
  position: relative;
  z-index: 1;
  width: var(--toc-w);
  flex: 0 0 var(--toc-w);
  margin-top: -36px;
  padding: 1.5rem;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  text-align: left;
}
.pc-set-toc__label { margin-bottom: 1.1rem; color: #163d2b; font-size: 13px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.pc-set-toc__list { border-top: 1px solid #e8e8e8; }
.pc-set-toc__item {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 47px;
  margin: 0 -6px;
  padding: 10px 6px;
  border-bottom: 1px solid #e8e8e8;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  transition: background .15s ease;
}
.pc-set-toc__item:hover, .pc-set-toc__item:focus-visible { background: #f5f2ee; }
.pc-set-toc__number { width: 34px; flex: 0 0 34px; color: #999; font: 500 11px monospace; }
.pc-set-toc__title { flex: 0 1 auto; min-width: 0; color: #111; font-size: 14px; font-weight: 600; line-height: 1.35; transition: transform .15s ease; }
.pc-set-toc__item:hover .pc-set-toc__title { transform: translateX(4px); }
.pc-set-toc__badge { flex: 0 0 auto; padding: 2px 7px; border-radius: 20px; font-size: 10px; font-weight: 500; line-height: 1.6; white-space: nowrap; }
.pc-set-toc__badge.badge-pop { background: #eeedfe; color: #3c3489; }
.pc-set-toc__badge.badge-free { background: #e1f5ee; color: #085041; }
@media (max-width: 640px) {
  .pc-set-toc { display: block; min-height: 0; padding: 18px 12px 24px; }
  .pc-set-toc__cards { position: relative; height: 220px; }
  .pc-set-toc__card { width: min(46vw, 185px); }
  .pc-set-toc__card--back { left: calc(50% - 128px); top: 16px; }
  .pc-set-toc__card--front { left: calc(50% - 35px); top: 2px; }
  .pc-set-toc__index { width: 100%; margin: 0; padding: 1.25rem; }
}