/* =================================================================
 * c-accordion — 開閉式トグル（FAQ Q&A）
 * Figma: パーツ集「25 トグルリスト / 19 FAQ」5371:85342（open）/ 5371:85331（close）
 *   <details class="c-accordion">
 *     <summary class="c-accordion__q">
 *       <span class="c-accordion__badge c-accordion__badge--q">Q</span>
 *       <p class="c-accordion__q-text">トグルが閉じている場合</p>
 *       <span class="c-accordion__icon"></span>   ← 閉=＋ / 開=−
 *     </summary>
 *     <div class="c-accordion__a">
 *       <span class="c-accordion__badge c-accordion__badge--a">A</span>
 *       <div class="c-accordion__a-text">回答…<a class="c-accordion__link">こちら</a></div>
 *     </div>
 *   </details>
 *   ※ 白背景ページでは c-accordion--on-light で地色を反転。
 *   視覚トークンは静的版 c-faq と揃える（同じ Figma「19 FAQ」由来）。
 * =================================================================*/

.c-accordion {
  width: 100%;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);          /* 16px */
  padding: var(--space-2) var(--space-6);    /* 8px 32px */
}

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

/* Q 行（summary = クリック領域） */
.c-accordion__q {
  display: flex;
  align-items: center;
  gap: var(--space-4);                       /* 16px */
  padding-block: var(--space-4);             /* 16px */
  padding-right: 9rem;                        /* Figma: pr-9px（アイコン右余白） */
  list-style: none;
  cursor: pointer;
}
.c-accordion__q::-webkit-details-marker { display: none; }

/* 開いている時のみ Q/A 間に点線セパレータ */
.c-accordion[open] .c-accordion__q {
  border-bottom: 2rem dashed color-mix(in srgb, var(--color-neutral-04) 88%, transparent);
}

/* A 行（本文） */
.c-accordion__a {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);                       /* 16px */
  padding-block: var(--space-4);             /* 16px */
}

/* Q / A バッジ */
.c-accordion__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-accordion__badge--q { color: var(--color-secondary); }
.c-accordion__badge--a { color: var(--color-key); }

.c-accordion__q-text {
  flex: 1;
  min-width: 0;
  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-accordion__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-accordion__link {
  color: var(--color-key);
  text-decoration: underline;
  text-underline-position: from-font;
}

/* 外部リンク（a target="_blank"）: c-link と同じ新規タブアイコンをインラインで付与。
   inline-flex の flex item にすることで本文の下線がアイコンに掛からない（Figma 5494:296581 外部リンクスタイル準拠）。*/
.c-accordion__link--external {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2); /* 8px = Figma txt_link gap */
  vertical-align: baseline; /* 本文中インラインで地の文と揃える（c-link--inline と同様）*/
}
.c-accordion__link-icon {
  flex-shrink: 0;
  width: 13rem;
  height: 13rem;
  background-color: currentColor; /* リンク文字色（Key Color）に追従 */
  -webkit-mask: url("/img/common/icons/link-external.svg") no-repeat center / contain;
          mask: url("/img/common/icons/link-external.svg") no-repeat center / contain;
}

/* 開閉アイコン（c-button と同じ plus/minus を流用。-45°回転で ＋ / − になる）*/
.c-accordion__icon {
  flex-shrink: 0;
  width: 18rem;
  height: 18rem;
  background-color: var(--color-text-default);
  transform: rotate(-45deg);
  -webkit-mask-image: url("/img/common/icons/plus.svg");
          mask-image: url("/img/common/icons/plus.svg");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.c-accordion[open] .c-accordion__icon {
  -webkit-mask-image: url("/img/common/icons/minus.svg");
          mask-image: url("/img/common/icons/minus.svg");
}

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

/* =================================================================
 * --general: 汎用フォーマット（Figma 5824:99307 / 25 トグルリスト パターンA/B）
 *   Q/Aバッジを使わず、サマリー左に小さなオレンジドット装飾。
 *   開いた中身（本文）は利用側で自由に組める（タイトル+サブタイトル+本文 or 本文のみ）。
 * =================================================================*/
.c-accordion--general .c-accordion__q { gap: var(--space-3); }       /* 12px */
.c-accordion--general .c-accordion__a { gap: var(--space-3); }
.c-accordion--general .c-accordion__badge { display: none; }
.c-accordion--general .c-accordion__q::before {
  content: "";
  flex-shrink: 0;
  width: 8rem;
  height: 8rem;
  border-radius: 2rem;
  background: linear-gradient(180deg, var(--color-orange-01) 0%, var(--color-key) 100%);
}
/* 開いた本文の構造（任意）: タイトル / サブタイトル / 本文 */
.c-accordion__title {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: var(--fs-label);                  /* 18px */
  line-height: var(--lh-snug);
  color: var(--color-text-default);
}
.c-accordion__subtitle {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);                   /* 16px */
  line-height: var(--lh-snug);
  color: var(--color-text-default);
}
.c-accordion__body {
  margin: 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);
}