/* =================================================================
 * c-faq — FAQ（Q&A）カード（Figma スタイルガイド 5494:295875 / 項目26）
 *   <div class="c-faq">
 *     <div class="c-faq__q">
 *       <span class="c-faq__badge c-faq__badge--q">Q</span>
 *       <p class="c-faq__q-text">タイトルが入ります</p>
 *     </div>
 *     <div class="c-faq__a">
 *       <span class="c-faq__badge c-faq__badge--a">A</span>
 *       <div class="c-faq__a-text">回答…<a href="#" class="c-faq__link">こちら</a></div>
 *     </div>
 *   </div>
 *   ※ 白背景ページでは <div class="c-faq c-faq--on-light"> で地色を反転。
 *
 * Q/A の英字は Figma 指定の "Reddit Sans"（app.blade の Google Fonts で
 * 読込済み。未読時のみ Roboto/Arial へフォールバック）。
 * 既存の jewelry-faq 等とは別 namespace（.c-faq）なので衝突しない。
 * 既存ページの共通化（移行）は別タスク。
 * =================================================================*/

.c-faq {
  width: 100%;                         /* Figma: size-full（リスト内で全幅） */
  background-color: var(--color-white);
  border-radius: var(--radius-lg);     /* 16px */
  padding: var(--space-2) var(--space-6);  /* 8px 32px */
}

/* 白背景ページ用の地色反転（薄グレー） */
.c-faq--on-light {
  background-color: var(--color-bg-02);
}

.c-faq__q,
.c-faq__a {
  display: flex;
  gap: var(--space-4);                 /* 16px */
  padding-block: var(--space-4);       /* 16px */
  width: 100%;
}

.c-faq__q {
  align-items: center;
  border-bottom: 2rem dashed color-mix(in srgb, var(--color-neutral-04) 88%, transparent);
}

.c-faq__a {
  align-items: flex-start;
}

.c-faq__badge {
  flex-shrink: 0;
  width: 48rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Reddit Sans", var(--font-en);
  font-weight: var(--fw-semibold);     /* 600 */
  font-size: 32rem;                     /* Figma: 32px（見出しスケール外） */
  line-height: 1;
  letter-spacing: var(--letter-spacing-heading);  /* 0.04em (=1.28px/32) */
}

.c-faq__badge--q { color: var(--color-secondary); }
.c-faq__badge--a { color: var(--color-key); }

.c-faq__q-text {
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: var(--fs-label);          /* 18px */
  line-height: var(--lh-loose);        /* 1.8 */
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text-default);
}

.c-faq__a-text {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-body-sm);        /* 14px */
  line-height: var(--lh-loose);        /* 1.8 */
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text-default);
}

.c-faq__link {
  color: var(--color-key);
  text-decoration: underline;
  text-underline-position: from-font;
}

@media (max-width: 1023.98px) {
  .c-faq { padding: var(--space-2) 20rem; }           /* Figma SP: 8px 20px */
  .c-faq__badge { width: 27rem; }                     /* Figma SP: バッジ幅 27px（PC=48px） */
  .c-faq__q-text { font-size: var(--fs-body); }       /* 16px */
}