/*
 * Page-specific layout: voice (VOICE) — thai-massage
 * Spec: 参照 ref_pc_voice_full 準拠 (v3.0・新設ページ)
 *   pageHeader(VOICE) → 中央キャッチ(introLead/introBody) → 1 カラム声リスト(voice-list)
 *
 * - voice-card 本体（1 カラム行型・区切り線・丸アバター）は
 *   components/voice-card.css が担う。
 * - 当ファイルはセクション余白・背景・中央キャッチのタイポのみを定義する。
 * - 色は var(--color-*) のみ。HEX 直書き・!important・inline style 不使用。
 */

.page-voice__main {
  display: block;
}

/* ──────────────────────────────────────────────
 * 中央キャッチ + 本文（page-header 直下・参照準拠）
 *   introLead = --font-display 風の中央キャッチ見出し
 *   introBody = 本文（読みやすい行幅に制限し中央寄せ）
 *   いずれも config 任意項目 → 空（:empty）なら各行を非表示。
 *   両方空ならセクションごと非表示（:has）。
 * ────────────────────────────────────────────── */
.voice-intro {
  padding: var(--section-padding-y) var(--container-padding-x) 0;
  text-align: center;
  background: var(--color-bg-main);
}

.voice-intro__lead {
  max-width: 40rem;
  margin: 0 auto;
  font-family: var(--font-serif-jp);
  font-size: var(--fs-heading-xl);
  font-weight: 500;
  line-height: var(--lh-heading);
  color: var(--color-text);
  /* 編集者の改行を反映（#4/Therapist と同方針）。 */
  white-space: pre-line;
}

.voice-intro__body {
  max-width: 40rem;
  margin: var(--gap-md) auto 0;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--color-text-secondary);
  white-space: pre-line;
}

.voice-intro__lead:empty,
.voice-intro__body:empty {
  display: none;
}

.voice-intro:has(.voice-intro__lead:empty):has(.voice-intro__body:empty) {
  display: none;
}

/* 声リストセクション。 */
.voice-section {
  padding: var(--section-padding-y) var(--container-padding-x);
  background: var(--color-bg-main);
}

@media (max-width: 768px) {
  .voice-intro {
    padding: var(--section-padding-y-mobile) var(--container-padding-x-mobile) 0;
  }
  .voice-section {
    padding: var(--section-padding-y-mobile) var(--container-padding-x-mobile);
  }
}