/* =========================
   Custom TOC Card
   ========================= */

.custom-toc {
  width: 100%;
  max-width: 900px;
  margin: 40px auto 48px !important;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  box-sizing: border-box;
  font-family: "Pretendard", "Noto Sans KR", sans-serif;
}

.custom-toc-header {
  width: 100%;
  height: 62px;
  padding: 0 24px;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff6f1;
  color: #222;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  box-sizing: border-box;
  font-family: inherit;
}

.custom-toc-header .toc-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.custom-toc-header .toc-icon {
  font-size: 20px;
  line-height: 1;
  color: #222;
}

.custom-toc-header .toc-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.custom-toc-header .toc-arrow {
  font-size: 26px;
  line-height: 1;
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

.custom-toc.open .toc-arrow {
  transform: rotate(0deg);
}

.custom-toc-body {
  display: none;
  background: #fff;
}

.custom-toc.open .custom-toc-body {
  display: block;
}

.custom-toc-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 22px !important;
  counter-reset: none !important;
}

.custom-toc .toc-item {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.custom-toc .toc-item:last-child {
  border-bottom: none;
}

.custom-toc .toc-item a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 0;
  text-decoration: none !important;
  color: #222 !important;
  line-height: 1.55;
  font-size: 15px;
  letter-spacing: -0.02em;
  transition: color 0.2s ease, transform 0.2s ease;
}

.custom-toc .toc-item a:hover {
  color: #ff7a45 !important;
  transform: translateX(3px);
}

.custom-toc .toc-number {
  min-width: 22px;
  color: #222;
  font-weight: 500;
  text-align: right;
}

.custom-toc .toc-text {
  flex: 1;
  font-weight: 500;
}

/* h3, h4 들여쓰기 */
.custom-toc .toc-h3 a {
  padding-left: 24px;
  font-size: 14.5px;
}

.custom-toc .toc-h4 a {
  padding-left: 48px;
  font-size: 14px;
  color: #555 !important;
}

/* 모바일 */
@media screen and (max-width: 768px) {
  .custom-toc {
    margin: 32px auto 40px !important;
    border-radius: 8px;
  }

  .custom-toc-header {
    height: 56px;
    padding: 0 18px;
  }

  .custom-toc-list {
    padding: 0 18px !important;
  }

  .custom-toc .toc-item a {
    font-size: 14px;
    padding: 15px 0;
  }

  .custom-toc .toc-h3 a {
    padding-left: 16px;
  }

  .custom-toc .toc-h4 a {
    padding-left: 32px;
  }
}