/* ============================================================
 * magazine-readability.css — 5/13 R-3c 매거진 가독성 7축 partial
 *
 * 출처: pages/spouse-premium.html inline (line 358-770) R-3b/R-3c 패턴
 * 이전: 사토시 5/13 "프리미엄 리포트마냥 줄바꿈 좀 잘 하라니까? 코드 알잖아"
 * 적용 대상: result.html (Chapter 01-05 narrative + lock teaser hook/deep + Cover/TL;DR + Grand Finale)
 *           추후 다른 premium 페이지 transfer 가능
 *
 * 7축:
 *   1. 호흡 줄바꿈 (\n\n 단락 + \n → <br>) → JS setRichText
 *   2. drop-cap (sp-dropcap::first-letter 3.2em gold)
 *   3. 사주 키워드 highlight (.sp-keyword gold underline subtle)
 *   4. 명리학자 italic (.sp-master gold italic)
 *   5. pullquote 자동 변환 (.sp-pullquote)
 *   6. 챕터 한자 ornament (.sp-chapter-mark)
 *   7. fade-in stagger (.page-slide--active .sp-card__lead animation)
 *
 * Plus: sub-section markers (.sp-subhead / .sp-callout / .sp-aside / .sp-divider-ornament / .sp-numbered)
 *       chapter intro (.sp-chapter-intro)
 *       now-reading floating pill (.sp-now-reading)
 * ============================================================ */

/* 단락 자동 들여쓰기 + 단락 간 호흡 */
.sp-card__lead + p.sp-card__lead {
  margin-top: 18px;
}
.sp-card__lead {
  word-break: keep-all;
  overflow-wrap: break-word;
  hanging-punctuation: first last;
  font-family: 'Noto Serif KR', serif;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-heading, #2C2420);
  letter-spacing: -0.005em;
  max-width: 62ch;
}

/* Drop-cap — 첫 단락 첫 글자 (잡지 시그니처) */
.sp-dropcap::first-letter {
  font-family: 'Noto Serif KR', serif;
  font-size: 3.2em;
  font-weight: 700;
  float: left;
  line-height: 0.95;
  padding: 4px 12px 0 0;
  color: var(--gold, #B8860B);
  letter-spacing: -0.03em;
}
.sp-dropcap {
  text-indent: 0;
}

/* Pullquote — 사주 인용 강조 박스 */
.sp-pullquote {
  position: relative;
  margin: 28px 0;
  padding: 22px 28px 22px 36px;
  font-family: 'Noto Serif KR', serif;
  font-size: 19px;
  line-height: 1.75;
  color: var(--text-heading, #2C2420);
  font-weight: 500;
  letter-spacing: -0.014em;
  border-left: 3px solid var(--gold, #B8860B);
  background: linear-gradient(180deg, rgba(184, 134, 11, 0.04) 0%, rgba(184, 134, 11, 0.01) 100%);
  border-radius: 0 8px 8px 0;
}
.sp-pullquote::before {
  content: '"';
  position: absolute;
  top: -8px;
  left: 14px;
  font-family: 'Noto Serif KR', serif;
  font-size: 56px;
  color: var(--gold, #B8860B);
  opacity: 0.18;
  line-height: 1;
}

/* 사주 키워드 highlight — gold underline subtle */
.sp-keyword {
  color: var(--text-heading, #2C2420);
  font-weight: 600;
  background: linear-gradient(180deg, transparent 65%, rgba(184, 134, 11, 0.22) 65%, rgba(184, 134, 11, 0.22) 92%, transparent 92%);
  padding: 0 2px;
  border-radius: 1px;
}

/* 명리학자 5인 이름 — italic gold */
.sp-master {
  font-family: 'Noto Serif KR', serif;
  font-style: italic;
  color: var(--gold, #B8860B);
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Chapter ornament divider — 한자 + 절기 마크 */
.sp-chapter-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 0 24px;
  font-family: 'Noto Serif KR', serif;
  color: var(--gold, #B8860B);
  opacity: 0.85;
}
.sp-chapter-mark::before,
.sp-chapter-mark::after {
  content: '';
  flex: 0 0 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold, #B8860B) 50%, transparent 100%);
  opacity: 0.5;
}
.sp-chapter-mark__hanja {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.32em;
  padding: 0 4px;
}
.sp-chapter-mark__num {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--gold, #B8860B);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.28em;
  opacity: 0.9;
}

/* 단락 fade-in stagger — 슬라이드 active 시 */
.page-slide--active .sp-card__lead,
.page-slide--active .sp-pullquote {
  animation: spFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.page-slide--active .sp-card__lead:nth-of-type(2) { animation-delay: 0.05s; }
.page-slide--active .sp-card__lead:nth-of-type(3) { animation-delay: 0.1s; }
.page-slide--active .sp-card__lead:nth-of-type(4) { animation-delay: 0.15s; }
.page-slide--active .sp-card__lead:nth-of-type(5) { animation-delay: 0.2s; }
.page-slide--active .sp-card__lead:nth-of-type(6) { animation-delay: 0.25s; }
.page-slide--active .sp-card__lead:nth-of-type(n+7) { animation-delay: 0.3s; }
@keyframes spFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .page-slide--active .sp-card__lead,
  .page-slide--active .sp-pullquote {
    animation: none;
  }
}

/* Sub-section ornament divider — 단락 묶음 사이 ✦ */
.sp-divider-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 30px auto 26px;
  color: var(--gold, #B8860B);
  opacity: 0.55;
  font-family: 'Noto Serif KR', serif;
  font-size: 13px;
  letter-spacing: 0.6em;
  user-select: none;
}
.sp-divider-ornament::before,
.sp-divider-ornament::after {
  content: '';
  flex: 0 0 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--gold, #B8860B) 50%, transparent 100%);
  opacity: 0.6;
}

/* Sub-section mini head — 카드 안 부속 제목 (▶ 마커) */
.sp-subhead {
  margin: 28px 0 14px;
  padding-left: 18px;
  position: relative;
  font-family: 'Noto Serif KR', serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold, #B8860B);
  word-break: keep-all;
}
.sp-subhead::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold, #B8860B);
  opacity: 0.65;
}

/* Inset callout — 단락 안 강조 박스 (■ 마커) */
.sp-callout {
  margin: 22px 0;
  padding: 18px 22px;
  background: linear-gradient(180deg, #FFFCF5 0%, #FFF8E8 100%);
  border: 1px solid rgba(184, 134, 11, 0.18);
  border-radius: 12px;
  word-break: keep-all;
}
.sp-callout__label {
  display: inline-block;
  font-family: 'Noto Serif KR', serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold, #B8860B);
  margin-bottom: 8px;
}
.sp-callout__title {
  font-family: 'Noto Serif KR', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-heading, #2C2420);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
  line-height: 1.5;
}
.sp-callout__body {
  font-family: 'Noto Serif KR', serif;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--text-secondary, #4A4038);
  margin: 0;
}
.sp-callout--key {
  background: linear-gradient(135deg, rgba(184,134,11,0.06) 0%, rgba(184,134,11,0.02) 100%);
  border-left: 3px solid var(--gold, #B8860B);
}

/* Aside note — ※ 사이드 노트 */
.sp-aside {
  margin: 22px 0;
  padding: 13px 18px;
  background: #FFFCF5;
  border-left: 2px solid rgba(184,134,11,0.55);
  border-radius: 0 8px 8px 0;
  font-family: 'Noto Serif KR', serif;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-muted, #6B5F57);
}

/* Chapter intro abstract — 챕터 h2 아래 이탤릭 thesis */
.sp-chapter-intro {
  margin: -4px 0 18px;
  padding: 12px 18px;
  background: linear-gradient(180deg, rgba(184,134,11,0.05), rgba(184,134,11,0.01));
  border-radius: 10px;
  font-family: 'Noto Serif KR', serif;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-secondary, #4A4038);
  font-style: italic;
  letter-spacing: -0.005em;
  word-break: keep-all;
}
.sp-chapter-intro::before {
  content: '—';
  color: var(--gold, #B8860B);
  margin-right: 8px;
  font-style: normal;
  opacity: 0.7;
}