/* ログアウト導線のよくある質問アコーディオン(Figma: accordion-faq)
 * タイポグラフィは htdocs/lite/css/guest/typography.css のトークンを参照する
 * 質問/回答 SP: 14px / PC: 16px
 *
 * 注意: 質問/回答の font-weight は Figmaの名前付きスタイル(guest/text/*)では Regular(400) だが、
 *       ノード側は Bold のフォントフェイスで描画されている(スタイルへのローカル上書き)。
 *       実際の見た目に合わせて bold にしている。デザイナー確認待ち。
 *
 * 注釈は guest/note.inc を使うので、このコンポーネントを使う画面では note.css も読み込むこと。
 *
 * SPをベースに、1080px以上でPCへ切り替える。 */
.guest-accordion-faq {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  border: 2px solid var(--guest-color-border-white);
  border-radius: 8px;
  /* gradation/pale-orange。角度はvariantごとに163〜174度の差があるため丸めている */
  background: linear-gradient(170deg, var(--color-neutral-0) 7.1429%, var(--color-orange-25) 92.857%);
  /* Figmaのeffect style "card": offset(0,0) / radius 16 / #F8964133 */
  box-shadow: 0 0 16px rgba(248, 150, 65, 0.2);
  color: var(--guest-color-text-default);
  font-family: var(--guest-font-family);
}

/* 質問(開閉トリガー)。button の既定スタイルは打ち消す */
.guest-accordion-faq__q {
  display: flex;
  position: relative;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 12px 32px 12px 44px;
  border: none;
  background: none;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}

.guest-accordion-faq__question {
  flex: 1 0 0;
  min-width: 1px;
  font-size: var(--guest-font-size-sm);
  font-weight: var(--guest-font-weight-bold);
  line-height: var(--guest-line-height-body);
  text-align: left;
  word-break: break-word;
}

/* 「Q」「A」の飾り文字。文字自体をグラデーションで塗る */
.guest-accordion-faq__mark {
  position: absolute;
  left: 8px;
  top: 4px;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: var(--guest-font-size-4xl);
  font-weight: var(--guest-font-weight-bold);
  line-height: var(--guest-line-height-none);
  white-space: nowrap;
}

/* gradation/light-orange */
.guest-accordion-faq__mark--q {
  background-image: linear-gradient(135deg, var(--color-orange-50) 7.1429%, var(--color-orange-100) 92.857%);
}

/* gradation/deep-orange */
.guest-accordion-faq__mark--a {
  background-image: linear-gradient(132deg, var(--color-orange-500) 7.1429%, var(--color-orange-300) 92.857%);
}

/* 開閉を示すシェブロン。素材は右向きなので、閉時は90度回して下向きにする
 * (Figmaも同じ素材を回転させている)。枠は24px角なので回転してもレイアウトに影響しない。
 *
 * 回転方向: Figmaのモーション定義は close variant が 0rad→3.142rad(＋方向)、
 * open variant が -3.142rad→-6.283rad(－方向)。つまり「開く時は－方向、閉じる時は＋方向」。
 * transitionで往復させるため、開時を -90deg(＝90degから－方向へ180度)としている。
 * -90deg と 270deg は静止状態の見た目は同じだが、回る向きが逆になるので注意。 */
.guest-accordion-faq__chevron {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translateY(-50%) rotate(90deg);
  /* 質問文は固定。開閉時はシェブロンの回転だけ変化させる */
  transition: transform 0.3s ease-out;
  will-change: transform;
  background: url(/img/guest/icon_chevron_right_brown.svg) no-repeat center;
  background-size: 7px 14px;
}

.guest-accordion-faq.is-open .guest-accordion-faq__chevron {
  transform: translateY(-50%) rotate(-90deg);
}

/* 回答の開閉。grid-template-rows を 0fr → 1fr に遷移させることで、
 * 中身の高さを実測しなくても高さのアニメーションができる。
 * 0fr で潰すために、中の要素側に overflow: hidden が必要。 */
.guest-accordion-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out;
}

.guest-accordion-faq.is-open .guest-accordion-faq__panel {
  grid-template-rows: 1fr;
}

/* 回答 */
.guest-accordion-faq__a {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  /* 閉じる時に回答本文が上へ移動しないよう、表示位置を上端に固定 */
  justify-content: flex-start;
  gap: 4px;
  min-height: 0;
  padding: 0 12px 0 44px;
  overflow: hidden;
  /* Figma: opacity 0 → 1 / 0.3s / ease-out */
  opacity: 0;
  transition: opacity 0.3s ease-out, padding 0.3s ease-out;
}

.guest-accordion-faq.is-open .guest-accordion-faq__a {
  padding-top: 12px;
  padding-bottom: 12px;
  opacity: 1;
}

.guest-accordion-faq__answer {
  margin: 0;
  width: 100%;
  font-size: var(--guest-font-size-sm);
  font-weight: var(--guest-font-weight-bold);
  line-height: var(--guest-line-height-body);
  word-break: break-word;
}

/* OSで「視差効果を減らす」設定をしている場合はアニメーションを無効にする */
@media (prefers-reduced-motion: reduce) {
  .guest-accordion-faq__chevron,
  .guest-accordion-faq__panel,
  .guest-accordion-faq__a {
    transition: none;
  }
}

@media (min-width: 1080px) {
  .guest-accordion-faq__q {
    padding: 16px 32px 16px 52px;
  }

  .guest-accordion-faq__question {
    font-size: var(--guest-font-size-base);
  }

  .guest-accordion-faq__mark {
    left: 12px;
    top: 8px;
  }

  .guest-accordion-faq__a {
    padding-right: 16px;
    padding-left: 52px;
  }

  .guest-accordion-faq.is-open .guest-accordion-faq__a {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .guest-accordion-faq__answer {
    font-size: var(--guest-font-size-base);
  }
}