/**
 * sjcF0101_chapter_texture.css — §19 챕터 목록 CSS 텍스처 배경
 *
 * 기획 근거: step5_MVP_개발계획_v2.md §5.2 슬롯 인벤토리 라운드 1 G
 * chapter-list-bg 슬롯(카툰 일러)은 삭제하고 CSS 텍스처로 대체.
 * 한지/필사 느낌의 미묘한 배경 패턴으로 클래식 사주 리포트 분위기 연출.
 */

/* ── §19 챕터 섹션 기본 배경 ────────────────────────────────────────── */
.sjc-section--chapter {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-warm, #FDF8F0);
}

/* ── 한지 텍스처 — CSS noise + 선 패턴 중첩 ────────────────────────── */
.sjc-section--chapter::before {
  content: '';
  position: absolute;
  inset: 0;
  /* 미세 대각선 격자 — 고서 방안지 느낌 */
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 39px,
      rgba(180, 140, 80, 0.10) 39px,
      rgba(180, 140, 80, 0.10) 40px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 39px,
      rgba(180, 140, 80, 0.07) 39px,
      rgba(180, 140, 80, 0.07) 40px
    );
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* ── 상/하단 붓질 경계 장식 ─────────────────────────────────────────── */
.sjc-section--chapter::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(180, 140, 80, 0.35) 20%,
    rgba(180, 140, 80, 0.55) 50%,
    rgba(180, 140, 80, 0.35) 80%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ── 섹션 내부 콘텐츠는 z-index:2로 텍스처 위에 표시 ───────────────── */
.sjc-section--chapter .sjc-section__inner {
  position: relative;
  z-index: 2;
}

/* ── 챕터 목록 스타일 ───────────────────────────────────────────────── */
.sjc-chapter-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  counter-reset: chapter-counter;
}

.sjc-chapter-list li {
  counter-increment: chapter-counter;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.9375rem;
  color: var(--color-text-ink, #1a1a1a);
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--color-amber, #D4A24C);
  background: rgba(255, 255, 255, 0.65);
  border-radius: 0 4px 4px 0;
  line-height: 1.4;
  transition: background 0.15s ease;
}

.sjc-chapter-list li::before {
  content: counter(chapter-counter, cjk-ideographic);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-amber, #D4A24C);
  min-width: 1.25rem;
  font-family: 'Noto Serif KR', 'Nanum Myeongjo', serif;
}

.sjc-chapter-list li:hover {
  background: rgba(255, 255, 255, 0.9);
}

/* ── §19 섹션 제목 스타일 (한자 서체 분위기) ───────────────────────── */
.sjc-section--chapter .sjc-section__title {
  font-family: 'Noto Serif KR', 'Nanum Myeongjo', serif;
  letter-spacing: 0.08em;
  color: var(--color-text-ink, #1a1a1a);
}

/* ── 구버전 chapter-list-bg cartoon-slot 숨기기 (JSP에 아직 남아있는 경우 대비) ── */
.cartoon-slot[data-slot-id="chapter-list-bg"] {
  display: none !important;
}