/* =====================================================
   quiz_detail.css — クイズ問題ページ専用
   quiz_detail.html にのみ読み込まれる
   既存ページ（index.html / quiz_list.html）には影響しない
   全スタイルを .qd- プレフィックスでスコープ管理
   ===================================================== */

/* ── クイズ回答用ピンクカラー（--clr-pink はラベンダー紫のためここで上書き） ── */
:root {
  --clr-qd-pink:       #E85C8A;
  --clr-qd-pink-light: #FCE8F0;
}

/* ── タイトルQの文字色（汎用 lower-hero を使う場合の保険） ── */
.lower-title-en .h1st { color: var(--clr-quiz); }

/* ── パンくず単独表示帯（lower-hero を使わない記事/クイズ詳細用）
   フローティングピル分を内側で確保して、ピルとパンくずの「白い帯のズレ」を解消する。 */
.qd-crumbs {
  border-bottom: 1px solid var(--border-color-light);
  background: transparent;
  padding-top: calc(var(--header-h) + 16px);
}
@media (max-width: 767px) {
  .qd-crumbs { padding-top: 0; }
}
.qd-crumbs .breadcrumb {
  border-bottom: 0;
}

/* ── クイズ詳細ページ：問題タイトル（.qd-title）のサイズ
   外側の器をコラム詳細寄りにしたので、タイトルも読み物的なサイズに上げる。
   ただし主役は問題文（.qd-q-text 20px + Qバッジ + 背景の callout）なので、
   そちらより小ぶりに収め、視覚的なヒエラルキーは「問題＞タイトル」を維持する。 */
.qd-card .qd-title,
h1.qd-title {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--clr-text);
  margin: 0 0 var(--sp-sm);
}

@media (max-width: 767px) {
  .qd-card .qd-title,
  h1.qd-title {
    font-size: 1.25rem;
    line-height: 1.55;
    font-weight: 800;
  }
}

/* ── クイズ問題カード ── 記事カードと同じ控えめなトーンに統一 */
.qd-card {
  background: var(--clr-white);
  border-radius: var(--r-md);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-md) var(--sp-md) 0;
  position: relative;
  margin-bottom: var(--sp-md);
}

/* 記事ヘッダー：アイキャッチ（カード上端に密着、cd-eyecatch と同パターン）
 * クイズはコラムと違い「読む」ではなく「参加する」体験。
 * アイキャッチは存在感を保ちつつ、選択肢への到達を早めるため 21:9 のシネマティック比に。
 * （コラム詳細は 16:9 のまま：そちらは記事の読み入口として画像が大きいほうが映える） */
.qd-card .qd-eyecatch {
  position: relative;
  margin: calc(var(--sp-md) * -1) calc(var(--sp-md) * -1) var(--sp-sm);
  overflow: hidden;
  border-top-left-radius: var(--r-lg);
  border-top-right-radius: var(--r-lg);
  aspect-ratio: 21 / 9;
  background: var(--clr-quiz-light, #eaf0ff);
}
.qd-card .qd-eyecatch img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.qd-card .qd-eyecatch-badge {
  display: contents;
}
/* eyecatch 内のカテゴリバッジは左上に配置 */
.qd-card .qd-eyecatch .card-cat-badge {
  top: 12px;
  left: 12px;
  bottom: auto;
}

/* メタ行（日付。将来 所要時間/出題者 等を追加できるよう row 構造で保持） */
.qd-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.qd-meta-row .qd-date {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--clr-text-muted);
  font-family: var(--font-en);
  letter-spacing: 0.04em;
}

/* タイトル・タグ・リードの margin を全体的に詰めて、選択肢への到達距離を縮める */
.qd-card .qd-title,
h1.qd-title {
  margin-bottom: 10px;
}
.qd-card .qd-tags {
  margin-bottom: 10px;
}
.qd-card .qd-lead {
  margin-bottom: var(--sp-sm);
}
.qd-card .qd-question {
  margin-top: 12px;
  margin-bottom: var(--sp-sm);
}

/* qd-divider は撤去方針（PHP側から要素を消す）。class が残っていても見えないよう保険で 0 表示。 */
.qd-card .qd-divider {
  display: none;
}

@media (max-width: 767px) {
  .qd-card .qd-eyecatch {
    margin: calc(var(--sp-sm) * -1) calc(var(--sp-sm) * -1) var(--sp-sm);
  }
}

/* ── タグ群 ── */
.qd-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: var(--sp-sm);
}
.qd-tags .tag i { line-height: 1; display: flex; align-items: center; }

/* ── リード文 ── */
.qd-lead {
  font-size: var(--fs-base);
  color: var(--clr-text-muted);
  line-height: 1.8;
  margin-bottom: var(--sp-sm);
}

/* ── 問題文エリア（grid化＋カード化で視覚的にまとめる） ── */
.qd-question {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
  margin-top: 12px;
  margin-bottom: var(--sp-md);
  padding: 22px;
  border-radius: var(--r-md);
  background: rgba(88, 96, 168, 0.05);   /* --color-accent-blue (#5860A8) 0.05 */
  border: 1px solid rgba(88, 96, 168, 0.16);
}

.qd-q-icon {
  font-family: var(--font-en);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 24px;
  font-weight: 800;
  font-style: normal;
  color: var(--clr-white);
  background: var(--clr-quiz);
  line-height: 1;
  flex-shrink: 0;
}

.qd-q-text {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.65;
  color: var(--clr-text);
  margin: 0;
  padding-top: 3px;
}

/* ── 選択肢 ── */
.qd-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--sp-md);
}

.qd-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--clr-white);
  color: var(--clr-text);
  border: 1px solid var(--clr-border);
  border-radius: var(--r-full);
  padding: 13px 20px;
  font-size: var(--fs-base);
  font-weight: 500;
  font-family: var(--font-jp);
  text-align: left;
  cursor: pointer;
  transition: background var(--tr), border-color var(--tr),
              color var(--tr), transform var(--tr), box-shadow var(--tr);
}

/* 英字バッジ（A / B / C） */
.qd-choice::before {
  content: '';
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(224, 224, 232, 0.4);
  color: var(--clr-text-muted);
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 700;
  transition: background var(--tr), color var(--tr);
}
.qd-choice:nth-child(1)::before { content: 'A'; }
.qd-choice:nth-child(2)::before { content: 'B'; }
.qd-choice:nth-child(3)::before { content: 'C'; }
.qd-choice:nth-child(4)::before { content: 'D'; }

.qd-choice:hover {
  border-color: var(--clr-quiz);
  background: var(--clr-quiz-light);
  transform: none;
}
.qd-choice:hover::before {
  background: var(--clr-quiz);
  color: var(--clr-white);
}

/* 選択中（border は default 1px → 2px に強める） */
.qd-choice.is-selected {
  border-width: 2px;
  border-color: var(--clr-quiz);
  background: var(--clr-quiz-light);
  color: var(--clr-text);
  box-shadow: none;
}
.qd-choice.is-selected::before {
  background: var(--clr-quiz);
  color: var(--clr-white);
}

/* 正解（ピンク、border は default 1px → 2px に強める） */
.qd-choice.is-correct {
  border-width: 2px;
  background: var(--clr-qd-pink-light);
  border-color: var(--clr-qd-pink);
  color: var(--clr-text);
}
.qd-choice.is-correct::before {
  background: var(--clr-qd-pink);
  color: var(--clr-white);
}

/* 回答後：クリック不可・hover 無効 */
.qd-choices.is-answered .qd-choice {
  cursor: default;
  pointer-events: none;
  transform: none;
}

/* ── 正解/不正解ラベル（回答後に表示） ── */
.qd-result {
  display: none;
  font-size: var(--fs-lg);
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}

.qd-result.is-visible {
  display: block;
}

.qd-result.is-correct-result {
  color: var(--clr-qd-pink);
}

.qd-result.is-wrong-result {
  color: var(--clr-text-muted);
}

/* ── 正解表示エリア（回答後に表示）── Q. と同レイアウト */
.qd-answer {
  display: none;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--sp-sm);
}

.qd-answer.is-visible {
  display: flex;
}

.qd-answer-label {
  font-family: var(--font-en);
  font-size: 2.2rem;
  font-weight: 700;
  font-style: italic;
  color: var(--clr-qd-pink);
  line-height: 1;
  flex-shrink: 0;
}

.qd-answer-body {
  display: flex;
  align-items: center;
  gap: 10px;
}

.qd-answer-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--clr-qd-pink);
  color: var(--clr-white);
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.qd-answer-text {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.7;
  color: var(--clr-text);
}

/* ── 解説エリア（回答後に表示） ── */
.qd-explanation {
  display: none;
  padding: 0 0 var(--sp-sm);
  margin-bottom: var(--sp-md);
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--clr-text);
}

.qd-explanation.is-visible {
  display: block;
}

.qd-explanation-label {
  font-weight: 700;
  color: var(--clr-quiz);
  margin-bottom: 4px;
  font-size: var(--fs-sm);
  letter-spacing: 0.05em;
}

/* ── コラム誘導リンク（回答後に表示） ── */
.qd-column-link {
  display: none;
  margin-bottom: var(--sp-sm);
}
.qd-column-link.is-visible { display: block; }

.qd-column-link-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--clr-column);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.qd-column-link-card {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  background: rgba(63, 143, 134, 0.06);   /* --color-teal (#3F8F86) 0.06 */
  border: 1.5px solid rgba(63, 143, 134, 0.28);
  border-radius: var(--r-md);
  padding: var(--sp-sm);
  transition: background var(--tr), border-color var(--tr), transform 0.15s ease;
}
.qd-column-link-card:hover {
  background: rgba(63, 143, 134, 0.12);
  border-color: var(--clr-column);
  transform: translateX(3px);
  opacity: 1;
}

.qd-column-link-body { flex: 1; min-width: 0; }

.qd-column-link-lead {
  font-size: var(--fs-xs);
  color: var(--clr-text-muted);
  line-height: 1.65;
  margin-bottom: 5px;
}

.qd-column-link-title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.5;
}

.qd-column-link-arrow {
  font-size: var(--fs-md);
  color: var(--clr-column);
  flex-shrink: 0;
}

/* ── シェアエリア（回答後に表示） ── */
/* show/hide のみ管理（スタイルは style.css の .detail-share が担当） */
.qd-share {
  display: none;
}
.qd-share.is-visible {
  display: block;
}

/* ── おすすめクイズ（回答後に表示） ── */
.qd-recommend {
  display: none;
  flex-direction: column;
  gap: var(--sp-md);
  padding: var(--sp-md) 0 var(--sp-sm);
  margin-bottom: var(--sp-sm);
}

.qd-recommend.is-visible { display: flex; }

.qd-recommend-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.qd-recommend-label .en {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--clr-quiz);
  font-style: normal;
}
.qd-recommend-label span:not(.en) {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--clr-text);
}

.qd-recommend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.qd-recommend-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--clr-white);
  border: none;
  border-radius: var(--r-md);
  padding: 0;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: transform var(--tr), box-shadow var(--tr);
}
.qd-recommend-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  opacity: 1;
}

.qd-recommend-card-img {
  position: relative;
  width: calc(100% - 16px);
  margin: 8px auto 0;
  aspect-ratio: 5 / 2;
  overflow: hidden;
  border-radius: calc(var(--r-md) - 4px);
  flex-shrink: 0;
}
.qd-recommend-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.qd-recommend-card:hover .qd-recommend-card-img img {
  transform: scale(1.06);
}

.qd-recommend-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 12px;
  flex: 1;
}

.qd-recommend-card-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--clr-text);
  line-height: 1.55;
  flex: 1;
}

.qd-recommend-card .tag-group { gap: 3px; flex-wrap: wrap; }
.qd-recommend-card .tag { font-size: var(--fs-2xs); }

.qd-recommend-card-arrow {
  display: flex;
  justify-content: flex-end;
  color: var(--clr-quiz);
  font-size: var(--fs-sm);
  margin-top: 2px;
}

/* ── 正解/不正解ラベル + マスコットのラッパー ── */
.qd-result-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}

/* ── マスコット（回答前は非表示） ── */
.qd-mascot {
  width: 56px;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
  display: none;
  animation: mascot-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.qd-mascot.is-visible {
  display: block;
}
@keyframes mascot-pop {
  from { opacity: 0; transform: scale(0.6) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── フッター（戻るボタン） ── */
.qd-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-sm) 0 var(--sp-md);
}

.qd-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 28px;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--r-full);
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--clr-text-muted);
  text-decoration: none;
  transition: border-color var(--tr), color var(--tr), background var(--tr);
  background: var(--clr-white);
}

.qd-back:hover {
  border-color: var(--clr-quiz);
  color: var(--clr-quiz);
  background: var(--clr-quiz-light);
  opacity: 1;
}

.qd-back i {
  font-size: 0.9em;
  line-height: 1;
  display: flex;
  align-items: center;
}

/* ── 広告エリア：margin-bottom をリセット ── */
.qd-ads {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: var(--sp-sm);
  margin-bottom: 24px;
}

.qd-ads .ad-banner {
  margin-bottom: 0;
}

/* ── SP レスポンシブ ── */
@media (max-width: 767px) {
  .qd-card {
    padding: var(--sp-sm) var(--sp-sm) 0;
  }

  /* 問題エリアは grid のサイズを SP 用に縮小 */
  .qd-question {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 12px;
    padding: 16px;
  }
  .qd-q-icon {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }
  .qd-q-text {
    font-size: 17px;
  }

  /* 回答ラベルは従来の大きな英字スタイル維持（問題エリアと別意匠） */
  .qd-answer-label {
    font-size: 1.7rem;
    line-height: 1;
  }
  .qd-answer-text {
    font-size: var(--fs-base);
  }

  .qd-answer-badge {
    width: 24px;
    height: 24px;
    font-size: var(--fs-2xs);
  }

  .qd-choice {
    padding: 11px 16px;
    font-size: var(--fs-base);
    gap: 10px;
  }
  .qd-choice::before {
    width: 24px;
    height: 24px;
    font-size: var(--fs-2xs);
  }

  .qd-recommend-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .qd-recommend-card-title {
    font-size: var(--fs-sm);
  }

  .qd-footer {
    padding-bottom: var(--sp-md);
  }

  .qd-mascot {
    width: 48px;
  }
}