/*!
 * Neutrope Quiz Engine - Frontend CSS  (Phase 1: practice MVP)
 *
 * 設計指針:
 * - 既存トップページの ql- デザインと違和感が出ないよう、白カード + 薄ボーダー
 * - .skl-quiz スコープ内で完結（既存テーマ・他ページに影響しない）
 * - 選択肢ボタンはタップしやすい高さ（最低 48px）
 * - 正解は緑系、選択した不正解は赤系で警告
 * - スマホでは1列表示、横スクロールが起きない
 * - 画像/音声フィールドが追加されても既存レイアウトを崩さない
 */

/* ローカル CSS 変数（既存トップページの ql- トークンに準拠） */
.skl-quiz {
    --skl-q-navy: #10213f;
    --skl-q-blue: #1f6feb;
    --skl-q-blue-deeper: #1858c2;
    --skl-q-blue-soft: #eaf3ff;
    --skl-q-cyan: #1fb6ff;
    --skl-q-bg: #f6f8fc;
    --skl-q-surface: #ffffff;
    --skl-q-text: #1f2937;
    --skl-q-text-soft: #4b5565;
    --skl-q-muted: #6b7280;
    --skl-q-border: #dbe3ef;
    --skl-q-success: #16a34a;
    --skl-q-success-soft: #e8f5ee;
    --skl-q-success-border: #b6e2c4;
    --skl-q-danger: #c81e1e;
    --skl-q-danger-soft: #fdecec;
    --skl-q-danger-border: #f4c0c0;
    /* Phase 2.3: 未回答のステータス色（オレンジ/アンバー系。danger と区別する） */
    --skl-q-warn: #b45309;
    --skl-q-warn-soft: #fef3c7;
    --skl-q-warn-border: #fcd34d;

    --skl-q-radius-sm: 8px;
    --skl-q-radius: 14px;
    --skl-q-radius-lg: 20px;
    --skl-q-shadow-sm: 0 1px 2px rgba(16, 33, 63, .04), 0 2px 6px rgba(16, 33, 63, .04);
    --skl-q-shadow: 0 4px 14px rgba(16, 33, 63, .06), 0 2px 6px rgba(16, 33, 63, .04);
    --skl-q-ease: cubic-bezier(.2, .7, .2, 1);

    box-sizing: border-box;
    /* Phase 3.8.1: 記事カラム幅に追随。760px → 100%/上限860px に拡張。
       親（.entry-content 等）の幅にぴったり収まり、上限を超えない。
       スマホは @media (max-width: 600px) の既存 padding 調整で対応。 */
    width: 100%;
    max-width: 860px;
    margin: 24px auto;
    padding: 28px 30px;
    background: var(--skl-q-surface);
    border: 1px solid var(--skl-q-border);
    border-radius: var(--skl-q-radius);
    box-shadow: var(--skl-q-shadow-sm);
    color: var(--skl-q-text);
    font-size: 15px;
    line-height: 1.7;
}
.skl-quiz *,
.skl-quiz *::before,
.skl-quiz *::after {
    box-sizing: border-box;
}

/* notice / error 用 */
.skl-quiz--notice {
    background: var(--skl-q-bg);
    border-style: dashed;
}
.skl-quiz__notice {
    margin: 0;
    color: var(--skl-q-text-soft);
    font-size: 14px;
    line-height: 1.7;
}

/* =====================================================================
   ヘッダー（クイズカードの導入部）
   ---------------------------------------------------------------------
   「単なる見出し」ではなく、白〜淡ブルーグラデの導入カードとして見せる。
   上端 3px のシアン→青グラデアクセントラインで試験UIらしい信頼感を
   演出。下の問題エリアと自然につながる余白とリズム。
   ===================================================================== */
.skl-quiz__header {
    position: relative;
    margin: 0 0 24px;
    padding: 24px 26px 22px;
    background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
    border: 1px solid var(--skl-q-border);
    border-radius: var(--skl-q-radius);
    overflow: hidden;
}
/* 上端アクセントライン（border-radius に正確に追従） */
.skl-quiz__header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--skl-q-blue), var(--skl-q-cyan));
    pointer-events: none;
}

/* eyebrow / phase-badge — 小さなピル型ラベル */
.skl-quiz__phase-badge,
.skl-quiz__eyebrow {
    display: inline-flex;
    align-items: center;
    margin: 0 0 14px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--skl-q-blue-soft);
    border: 1px solid rgba(31, 111, 235, .18);
    color: var(--skl-q-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1.5;
    text-transform: uppercase;
}

/* タイトル — Cocoon h3 装飾を完全リセットして「文字組がデザイン」 */
.skl-quiz__title {
    margin: 0 0 14px;
    padding: 0;
    background: transparent;
    background-image: none;
    background-color: transparent;
    border: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    box-shadow: none;
    font-size: clamp(1.4rem, 2.2vw, 1.65rem);
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .005em;
    color: var(--skl-q-navy);
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.skl-quiz__title::before,
.skl-quiz__title::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* meta — 試験設定サマリーとして淡い背景＋薄ボーダーのチップ風ボックス */
.skl-quiz__meta {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    padding: 9px 14px;
    background: var(--skl-q-bg);
    border: 1px solid var(--skl-q-border);
    border-radius: var(--skl-q-radius-sm);
    color: var(--skl-q-text-soft);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: .02em;
    word-spacing: .14em;
    /* 折り返し時に区切り「/」が単独行頭に来ないよう、自然に折り返す */
    overflow-wrap: anywhere;
    word-break: keep-all;
}

/* 問題ステージ */
.skl-quiz__question {
    margin: 0;
}
.skl-quiz__question-header {
    margin: 0 0 12px;
}
.skl-quiz__question-num {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--skl-q-blue);
}
.skl-quiz__question-total {
    margin-left: 4px;
    color: var(--skl-q-muted);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0;
}
.skl-quiz__question-body {
    margin: 0 0 20px;
    font-size: 1rem;
    line-height: 1.85;
    color: var(--skl-q-text);
}
.skl-quiz__question-body p {
    margin: 0 0 10px;
}
.skl-quiz__question-body p:last-child {
    margin-bottom: 0;
}

/* 問題画像（Phase 4 予約） */
.skl-quiz__question-image {
    margin: 0 0 18px;
}
.skl-quiz__question-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--skl-q-radius-sm);
    display: block;
}

/* 選択肢リスト */
.skl-quiz__choices {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.skl-quiz__choice-item {
    margin: 0;
    padding: 0;
}
.skl-quiz__choice {
    width: 100%;
    min-height: 56px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--skl-q-surface);
    border: 1.5px solid var(--skl-q-border);
    border-radius: var(--skl-q-radius);
    color: var(--skl-q-text);
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
    cursor: pointer;
    transition:
        background .15s var(--skl-q-ease),
        border-color .15s var(--skl-q-ease),
        transform .15s var(--skl-q-ease),
        box-shadow .15s var(--skl-q-ease),
        color .15s var(--skl-q-ease);
}
.skl-quiz__choice:hover:not(:disabled) {
    background: var(--skl-q-blue-soft);
    border-color: #c9d8ee;
    color: var(--skl-q-navy);
}
.skl-quiz__choice:focus-visible {
    outline: 3px solid rgba(31, 111, 235, .35);
    outline-offset: 2px;
}
.skl-quiz__choice:active:not(:disabled) {
    transform: translateY(1px);
}

/* 選択肢ラベル（A / ア / 1 / カスタム など） */
.skl-quiz__choice-label {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--skl-q-blue-soft);
    color: var(--skl-q-blue);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}
.skl-quiz__choice-text {
    flex: 1 1 auto;
    min-width: 0;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/* ロック / 結果状態 */
.skl-quiz__choice--locked {
    cursor: not-allowed;
}
.skl-quiz__choice--correct {
    background: var(--skl-q-success-soft);
    border-color: var(--skl-q-success-border);
    color: #14532d;
}
.skl-quiz__choice--correct .skl-quiz__choice-label {
    background: var(--skl-q-success);
    color: #fff;
}
.skl-quiz__choice--wrong {
    background: var(--skl-q-danger-soft);
    border-color: var(--skl-q-danger-border);
    color: #5c1010;
}
.skl-quiz__choice--wrong .skl-quiz__choice-label {
    background: var(--skl-q-danger);
    color: #fff;
}
.skl-quiz__choice--selected {
    box-shadow: 0 0 0 1px rgba(16, 33, 63, .08);
}

/* Phase 2.3: mockモードで「正誤を見せずに選択だけ反映」する一時状態。
   選択肢クリック → 短いディレイ（350ms）→ 自動的に次問へ進む間だけ表示する。 */
.skl-quiz__choice--mock-selected {
    background: var(--skl-q-blue-soft);
    border-color: var(--skl-q-blue);
    color: var(--skl-q-navy);
    box-shadow: 0 0 0 2px rgba(31, 111, 235, .25);
}
.skl-quiz__choice--mock-selected .skl-quiz__choice-label {
    background: var(--skl-q-blue);
    color: #fff;
}

/* フィードバック（正解/不正解） */
.skl-quiz__feedback {
    margin: 18px 0 0;
    padding: 12px 16px;
    border-radius: var(--skl-q-radius-sm);
    font-weight: 700;
    line-height: 1.6;
}
.skl-quiz__feedback--correct {
    background: var(--skl-q-success-soft);
    color: #14532d;
    border: 1px solid var(--skl-q-success-border);
}
.skl-quiz__feedback--wrong {
    background: var(--skl-q-danger-soft);
    color: #5c1010;
    border: 1px solid var(--skl-q-danger-border);
}

/* 解説ボックス */
.skl-quiz__explanation {
    margin: 14px 0 0;
    padding: 16px 18px;
    background: var(--skl-q-bg);
    border: 1px solid #e3e8ef;
    border-left: 4px solid var(--skl-q-blue);
    border-radius: var(--skl-q-radius-sm);
}
.skl-quiz__explanation-label {
    margin: 0 0 6px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--skl-q-blue);
}
.skl-quiz__explanation-body {
    color: var(--skl-q-text-soft);
    font-size: 14px;
    line-height: 1.85;
}
.skl-quiz__explanation-body p {
    margin: 0 0 8px;
}
.skl-quiz__explanation-body p:last-child {
    margin-bottom: 0;
}

/* アクション（次へ / 結果を見る） */
.skl-quiz__actions {
    margin: 22px 0 0;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.skl-quiz__btn {
    --skl-btn-bg: var(--skl-q-blue);
    --skl-btn-fg: #fff;
    --skl-btn-bd: var(--skl-q-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 26px;
    border-radius: 999px;
    border: 1.5px solid var(--skl-btn-bd);
    background: var(--skl-btn-bg);
    color: var(--skl-btn-fg);
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .02em;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s var(--skl-q-ease), box-shadow .15s var(--skl-q-ease), background .15s var(--skl-q-ease);
    box-shadow: 0 4px 12px rgba(31, 111, 235, .20);
}
.skl-quiz__btn:hover {
    --skl-btn-bg: var(--skl-q-blue-deeper);
    --skl-btn-bd: var(--skl-q-blue-deeper);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(31, 111, 235, .28);
}
.skl-quiz__btn:focus-visible {
    outline: 3px solid rgba(31, 111, 235, .35);
    outline-offset: 2px;
}

/* 結果画面 */
.skl-quiz__result-card {
    margin: 0;
    padding: 0;
}
.skl-quiz__result-title {
    margin: 0 0 16px;
    padding: 0;
    font-size: 1.18rem;
    font-weight: 800;
    color: var(--skl-q-navy);
}
.skl-quiz__result-title::before,
.skl-quiz__result-title::after {
    content: none;
    display: none;
}
.skl-quiz__score {
    margin: 0 0 18px;
    padding: 18px 20px;
    background: var(--skl-q-bg);
    border: 1px solid var(--skl-q-border);
    border-radius: var(--skl-q-radius);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.skl-quiz__score-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    align-items: baseline;
}
.skl-quiz__score-row dt {
    margin: 0;
    color: var(--skl-q-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
}
.skl-quiz__score-row dd {
    margin: 0;
    color: var(--skl-q-navy);
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* 合否 */
.skl-quiz__verdict {
    margin: 0 0 18px;
    padding: 12px 18px;
    border-radius: 999px;
    text-align: center;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: .08em;
}
.skl-quiz__verdict--pass {
    background: var(--skl-q-success-soft);
    color: var(--skl-q-success);
    border: 1px solid var(--skl-q-success-border);
}
.skl-quiz__verdict--fail {
    background: var(--skl-q-danger-soft);
    color: var(--skl-q-danger);
    border: 1px solid var(--skl-q-danger-border);
}

/* 解説まとめ（show_explanation=end） */
.skl-quiz__summary {
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.skl-quiz__summary-title {
    margin: 0 0 6px;
    padding: 0;
    font-size: .98rem;
    font-weight: 800;
    color: var(--skl-q-navy);
}
.skl-quiz__summary-item {
    padding: 14px 16px;
    background: var(--skl-q-surface);
    border: 1px solid var(--skl-q-border);
    border-radius: var(--skl-q-radius-sm);
}
.skl-quiz__summary-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
}
.skl-quiz__summary-num {
    font-size: 13px;
    font-weight: 800;
    color: var(--skl-q-blue);
}
.skl-quiz__summary-result {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
}
.skl-quiz__summary-result--correct {
    background: var(--skl-q-success-soft);
    color: var(--skl-q-success);
    border: 1px solid var(--skl-q-success-border);
}
.skl-quiz__summary-result--wrong {
    background: var(--skl-q-danger-soft);
    color: var(--skl-q-danger);
    border: 1px solid var(--skl-q-danger-border);
}
.skl-quiz__summary-body {
    color: var(--skl-q-text-soft);
    font-size: 14px;
    line-height: 1.85;
}

/* CTA */
.skl-quiz__cta {
    margin: 18px 0 0;
    display: flex;
    justify-content: center;
}
.skl-quiz__cta-link {
    text-decoration: none;
}

/* スマホ */
@media screen and (max-width: 600px) {
    .skl-quiz {
        margin: 16px auto;
        padding: 22px 20px;
        border-radius: var(--skl-q-radius);
    }
    .skl-quiz__choice {
        min-height: 52px;
        padding: 10px 14px;
        font-size: 14.5px;
    }
    .skl-quiz__choice-label {
        min-width: 28px;
        height: 28px;
        font-size: 12.5px;
    }
    .skl-quiz__actions {
        justify-content: stretch;
    }
    .skl-quiz__actions .skl-quiz__btn {
        width: 100%;
    }
    .skl-quiz__score-row {
        grid-template-columns: 96px 1fr;
        gap: 8px;
    }
    /* ヘッダー（クイズカード導入部）のスマホ調整 */
    .skl-quiz__header {
        margin: 0 0 18px;
        padding: 20px 18px 18px;
    }
    .skl-quiz__phase-badge,
    .skl-quiz__eyebrow {
        margin: 0 0 10px;
        padding: 3px 10px;
        font-size: 10.5px;
        letter-spacing: .14em;
    }
    .skl-quiz__title {
        margin: 0 0 12px;
        font-size: 1.3rem;
        line-height: 1.45;
    }
    .skl-quiz__meta {
        display: block;
        padding: 9px 12px;
        font-size: 12px;
    }
}


/* =====================================================================
   Cocoon見出し装飾の打ち消し（.skl-quiz スコープ限定）
   ---------------------------------------------------------------------
   Cocoon親テーマが「.article h2」「.article h3」等の親セレクタで
   見出し装飾（左縦線・背景・border・padding 等）を当てているケースで、
   `.skl-quiz__title` 単体定義（詳細度 0,1,0）では負けて装飾が残ること
   があるため、より詳細度の高い `.article .skl-quiz h1〜h6` で網羅的に
   リセットする（!important 付与）。

   範囲は `.skl-quiz` 配下に閉じているため、既存の記事本文・他ページの
   見出しには一切影響しない。

   その後 `.skl-quiz__title` / `.skl-quiz__result-title` 専用デザインを
   再適用して、Cocoon リセットの上に意図したスタイルを乗せる。
   ::before / ::after は確実に無効化。
   ===================================================================== */

/* (1) .skl-quiz 内の h1〜h6 を Cocoon 装飾からリセット */
.article .skl-quiz h1,
.article .skl-quiz h2,
.article .skl-quiz h3,
.article .skl-quiz h4,
.article .skl-quiz h5,
.article .skl-quiz h6,
body .skl-quiz h1,
body .skl-quiz h2,
body .skl-quiz h3,
body .skl-quiz h4,
body .skl-quiz h5,
body .skl-quiz h6 {
    background: none !important;
    background-image: none !important;
    border: none !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: initial !important;
    box-shadow: none !important;
    font-weight: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

/* (2) Cocoon が付与しがちな ::before / ::after も全て無効化 */
.article .skl-quiz h1::before,
.article .skl-quiz h1::after,
.article .skl-quiz h2::before,
.article .skl-quiz h2::after,
.article .skl-quiz h3::before,
.article .skl-quiz h3::after,
.article .skl-quiz h4::before,
.article .skl-quiz h4::after,
.article .skl-quiz h5::before,
.article .skl-quiz h5::after,
.article .skl-quiz h6::before,
.article .skl-quiz h6::after,
body .skl-quiz h1::before,
body .skl-quiz h1::after,
body .skl-quiz h2::before,
body .skl-quiz h2::after,
body .skl-quiz h3::before,
body .skl-quiz h3::after,
body .skl-quiz h4::before,
body .skl-quiz h4::after,
body .skl-quiz h5::before,
body .skl-quiz h5::after,
body .skl-quiz h6::before,
body .skl-quiz h6::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* (3) .skl-quiz__title 専用デザインの再適用（リセット後に上書き） */
.article .skl-quiz .skl-quiz__title,
body .skl-quiz .skl-quiz__title {
    margin: 0 0 14px !important;
    padding: 0 !important;
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--skl-q-navy) !important;
    font-size: clamp(1.45rem, 2.2vw, 1.7rem) !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    letter-spacing: .01em;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.article .skl-quiz .skl-quiz__title::before,
.article .skl-quiz .skl-quiz__title::after,
body .skl-quiz .skl-quiz__title::before,
body .skl-quiz .skl-quiz__title::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* (4) 結果画面の h3「結果」など他の見出しも、Cocoonリセット後に
       専用デザインを再適用 */
.article .skl-quiz .skl-quiz__result-title,
body .skl-quiz .skl-quiz__result-title {
    margin: 0 0 16px !important;
    padding: 0 !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--skl-q-navy) !important;
    font-size: 1.18rem !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
}
.article .skl-quiz .skl-quiz__result-title::before,
.article .skl-quiz .skl-quiz__result-title::after,
body .skl-quiz .skl-quiz__result-title::before,
body .skl-quiz .skl-quiz__result-title::after {
    content: none !important;
    display: none !important;
}

/* (5) 解説まとめのh4も同様に */
.article .skl-quiz .skl-quiz__summary-title,
body .skl-quiz .skl-quiz__summary-title {
    margin: 0 0 6px !important;
    padding: 0 !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--skl-q-navy) !important;
    font-size: .98rem !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
}
.article .skl-quiz .skl-quiz__summary-title::before,
.article .skl-quiz .skl-quiz__summary-title::after,
body .skl-quiz .skl-quiz__summary-title::before,
body .skl-quiz .skl-quiz__summary-title::after {
    content: none !important;
    display: none !important;
}

/* (6) スマホでもタイトルサイズの上書きを !important 付きで確実に効かせる */
@media screen and (max-width: 600px) {
    .article .skl-quiz .skl-quiz__title,
    body .skl-quiz .skl-quiz__title {
        font-size: 1.3rem !important;
        line-height: 1.45 !important;
    }
}


/* =====================================================================
   Phase 2.1 — 開始画面 (.skl-quiz__intro)
   ---------------------------------------------------------------------
   クイズを始める前にテストの内容（出題数・制限時間・合格ライン・解説表示）
   を確認できる導入カード。「開始する」ボタンで playing 状態に遷移する。
   既存の .skl-quiz / 問題UI / 結果UI のデザインと統一感を持たせる。
   ===================================================================== */

.skl-quiz__intro {
    margin: 0;
}
.skl-quiz__intro-card {
    padding: 28px 30px;
    background: var(--skl-q-surface);
    border: 1px solid var(--skl-q-border);
    border-radius: var(--skl-q-radius);
    box-shadow: var(--skl-q-shadow-sm);
}
/* モードラベル（ピル） */
.skl-quiz__intro-mode {
    display: inline-flex;
    align-items: center;
    margin: 0 0 12px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--skl-q-blue-soft);
    border: 1px solid rgba(31, 111, 235, .18);
    color: var(--skl-q-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    line-height: 1.5;
}
/* タイトル（h4 — Cocoon装飾は前述の .skl-quiz h1〜h6 リセットでカバー） */
.skl-quiz__intro-title {
    margin: 0 0 18px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--skl-q-navy);
    font-size: clamp(1.1rem, 1.6vw, 1.25rem);
    font-weight: 700;
    line-height: 1.55;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
/* テスト設定サマリー */
.skl-quiz__intro-meta {
    margin: 0 0 18px;
    padding: 16px 18px;
    background: var(--skl-q-bg);
    border: 1px solid var(--skl-q-border);
    border-radius: var(--skl-q-radius-sm);
    display: grid;
    gap: 8px;
}
.skl-quiz__intro-meta-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    align-items: baseline;
    gap: 12px;
    margin: 0;
}
.skl-quiz__intro-meta-row dt {
    margin: 0;
    color: var(--skl-q-muted);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
}
.skl-quiz__intro-meta-row dd {
    margin: 0;
    color: var(--skl-q-navy);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* 注意文 */
.skl-quiz__intro-note {
    margin: 0 0 22px;
    padding: 12px 14px;
    background: var(--skl-q-blue-soft);
    border: 1px solid rgba(31, 111, 235, .18);
    border-radius: var(--skl-q-radius-sm);
    color: var(--skl-q-text-soft);
    font-size: 13px;
    line-height: 1.7;
}
/* Phase 3.8.1: 注意文の警告系派生（practice + 解説なしの注記用）
   Phase 2.3 で導入した --skl-q-warn* （アンバー/オレンジ系）を流用。 */
.skl-quiz__intro-note--warn {
    margin: 0 0 14px;
    background: var(--skl-q-warn-soft);
    border-color: var(--skl-q-warn-border);
    color: var(--skl-q-warn);
}
/* 「開始する」ボタンの行 */
.skl-quiz__intro-actions {
    margin: 0;
    display: flex;
    justify-content: flex-end;
}
.skl-quiz__btn--start {
    min-height: 52px;
    padding: 13px 36px;
    font-size: 1rem;
}

/* =====================================================================
   Phase 2.1 — 結果画面のアクション群（restart + CTA を統合）
   ===================================================================== */
.skl-quiz__result-actions {
    margin: 18px 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* セカンダリボタン（白背景・ネイビー文字） */
.skl-quiz__btn--secondary {
    --skl-btn-bg: #ffffff;
    --skl-btn-fg: var(--skl-q-navy);
    --skl-btn-bd: var(--skl-q-border);
    background: var(--skl-btn-bg);
    color: var(--skl-btn-fg);
    border-color: var(--skl-btn-bd);
    box-shadow: var(--skl-q-shadow-sm);
}
.skl-quiz__btn--secondary:hover {
    background: var(--skl-q-blue-soft);
    color: var(--skl-q-navy);
    border-color: #c9d8ee;
    transform: translateY(-1px);
}

/* スマホ向け調整 */
@media screen and (max-width: 600px) {
    .skl-quiz__intro-card {
        padding: 22px 20px;
    }
    .skl-quiz__intro-title {
        font-size: 1.08rem;
    }
    .skl-quiz__intro-meta-row {
        grid-template-columns: 96px 1fr;
        gap: 8px;
    }
    .skl-quiz__intro-actions {
        justify-content: stretch;
    }
    .skl-quiz__btn--start {
        width: 100%;
    }
    .skl-quiz__result-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .skl-quiz__result-actions .skl-quiz__btn {
        width: 100%;
    }
}


/* =====================================================================
   Phase 2.2 — タイマーバー (.skl-quiz__timer-bar)
   ---------------------------------------------------------------------
   playing 状態かつ time_limit_min > 0 のときのみ JS が表示する。
   ヘッダーと問題ステージの間に出る帯状UI。残り時間を mm:ss で表示し、
   残り60秒以下では赤系の警告色に切り替える。
   sticky で問題スクロール中も常に視認できるようにする。
   ===================================================================== */

.skl-quiz__timer-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0 0 18px;
    padding: 10px 16px;
    background: var(--skl-q-navy);
    border: 1px solid var(--skl-q-navy);
    border-radius: var(--skl-q-radius-sm);
    color: #fff;
    box-shadow: 0 4px 12px rgba(16, 33, 63, .14);
    transition:
        background .25s var(--skl-q-ease),
        border-color .25s var(--skl-q-ease),
        box-shadow .25s var(--skl-q-ease);
}
.skl-quiz__timer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.skl-quiz__timer-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .85;
}
.skl-quiz__timer-value {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    color: #fff;
}

/* 警告状態（残り <= 60秒） */
.skl-quiz__timer-bar--warning {
    background: var(--skl-q-danger);
    border-color: var(--skl-q-danger);
    box-shadow: 0 6px 18px rgba(200, 30, 30, .28);
    animation: skl-quiz-timer-pulse 1.2s ease-in-out infinite;
}
.skl-quiz__timer-bar--warning .skl-quiz__timer-label {
    opacity: 1;
}

@keyframes skl-quiz-timer-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .82; }
}

/* タイムアウト通知（結果画面の上部） */
.skl-quiz__timeout-notice {
    margin: 0 0 14px;
    padding: 10px 14px;
    background: var(--skl-q-danger-soft);
    border: 1px solid var(--skl-q-danger-border);
    border-radius: var(--skl-q-radius-sm);
    color: var(--skl-q-danger);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .02em;
}

/* スマホ調整 */
@media screen and (max-width: 600px) {
    .skl-quiz__timer-bar {
        margin: 0 0 14px;
        padding: 9px 14px;
    }
    .skl-quiz__timer-label {
        font-size: 11px;
        letter-spacing: .12em;
    }
    .skl-quiz__timer-value {
        font-size: 1.2rem;
    }
}

/* 動きに敏感な利用者向け: pulse を止める */
@media (prefers-reduced-motion: reduce) {
    .skl-quiz__timer-bar--warning {
        animation: none;
    }
}


/* =====================================================================
   Phase 2.3 — 結果画面強化: 解説まとめ / 間違えた問題一覧
   ---------------------------------------------------------------------
   - .skl-quiz__review        : 全問題の解説まとめ（mock or practice && show_explanation=end）
   - .skl-quiz__wrong-list    : 間違えた問題のサマリー（mock or タイムアウト時）
   - 未回答（unanswered）はオレンジ/アンバー系で「未回答」と明示
   - スマホで横スクロールが起きないよう、長いテキストは折り返しを許可
   - 既存の .skl-quiz トーン（白カード + 薄ボーダー + ネイビー）と統一
   ===================================================================== */

/* ---- 間違えた問題一覧 ---- */
.skl-quiz__wrong-list {
    margin: 0 0 18px;
    padding: 16px 18px;
    background: var(--skl-q-bg);
    border: 1px solid var(--skl-q-border);
    border-radius: var(--skl-q-radius);
}
.skl-quiz__wrong-list-title {
    margin: 0 0 10px;
    padding: 0;
    font-size: .98rem;
    font-weight: 800;
    color: var(--skl-q-navy);
    letter-spacing: .02em;
}
.skl-quiz__wrong-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.skl-quiz__wrong-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 6px 12px;
    background: var(--skl-q-surface);
    border: 1px solid var(--skl-q-border);
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.4;
}
.skl-quiz__wrong-item--wrong {
    border-color: var(--skl-q-danger-border);
    background: var(--skl-q-danger-soft);
    color: var(--skl-q-danger);
}
.skl-quiz__wrong-item--unanswered {
    border-color: var(--skl-q-warn-border);
    background: var(--skl-q-warn-soft);
    color: var(--skl-q-warn);
}
.skl-quiz__wrong-num {
    font-weight: 800;
    letter-spacing: .04em;
}
.skl-quiz__wrong-status {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
}
.skl-quiz__wrong-status--wrong {
    color: var(--skl-q-danger);
}
.skl-quiz__wrong-status--unanswered {
    color: var(--skl-q-warn);
}

/* ---- 解説まとめ（全問題） ---- */
.skl-quiz__review {
    margin: 0 0 18px;
    padding: 0;
}
.skl-quiz__review-title {
    margin: 0 0 12px;
    padding: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--skl-q-navy);
    letter-spacing: .02em;
}
.skl-quiz__review-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.skl-quiz__review-item {
    padding: 16px 18px;
    background: var(--skl-q-surface);
    border: 1px solid var(--skl-q-border);
    border-left: 4px solid var(--skl-q-border);
    border-radius: var(--skl-q-radius-sm);
    overflow-wrap: anywhere;
    word-break: keep-all;
}
.skl-quiz__review-item--correct {
    border-left-color: var(--skl-q-success);
}
.skl-quiz__review-item--wrong {
    border-left-color: var(--skl-q-danger);
}
.skl-quiz__review-item--unanswered {
    border-left-color: var(--skl-q-warn);
}
.skl-quiz__review-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
}
.skl-quiz__review-num {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--skl-q-blue);
}
.skl-quiz__review-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
}
.skl-quiz__review-status--correct {
    background: var(--skl-q-success-soft);
    color: var(--skl-q-success);
    border: 1px solid var(--skl-q-success-border);
}
.skl-quiz__review-status--wrong {
    background: var(--skl-q-danger-soft);
    color: var(--skl-q-danger);
    border: 1px solid var(--skl-q-danger-border);
}
.skl-quiz__review-status--unanswered {
    background: var(--skl-q-warn-soft);
    color: var(--skl-q-warn);
    border: 1px solid var(--skl-q-warn-border);
}
.skl-quiz__review-question {
    margin: 0 0 12px;
    color: var(--skl-q-text);
    font-size: 14.5px;
    line-height: 1.8;
}
.skl-quiz__review-question p {
    margin: 0 0 8px;
}
.skl-quiz__review-question p:last-child {
    margin-bottom: 0;
}
.skl-quiz__review-answers {
    margin: 0 0 12px;
    padding: 12px 14px;
    background: var(--skl-q-bg);
    border: 1px solid var(--skl-q-border);
    border-radius: var(--skl-q-radius-sm);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.skl-quiz__review-answer-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px;
    align-items: baseline;
    margin: 0;
}
.skl-quiz__review-answer-row dt {
    margin: 0;
    color: var(--skl-q-muted);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
}
.skl-quiz__review-answer-row dd {
    margin: 0;
    color: var(--skl-q-navy);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    overflow-wrap: anywhere;
    word-break: keep-all;
}
.skl-quiz__review-answer,
.skl-quiz__review-correct {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}
.skl-quiz__review-answer-label,
.skl-quiz__review-correct-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--skl-q-blue-soft);
    color: var(--skl-q-blue);
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
}
.skl-quiz__review-correct-label {
    background: var(--skl-q-success-soft);
    color: var(--skl-q-success);
}
.skl-quiz__review-answer-empty {
    color: var(--skl-q-warn);
    font-size: 13px;
    font-weight: 700;
}
.skl-quiz__review-explanation {
    margin: 0;
    padding: 12px 14px;
    background: var(--skl-q-blue-soft);
    border: 1px solid rgba(31, 111, 235, .18);
    border-radius: var(--skl-q-radius-sm);
}
.skl-quiz__review-explanation-label {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--skl-q-blue);
}
.skl-quiz__review-explanation-body {
    color: var(--skl-q-text-soft);
    font-size: 13.5px;
    line-height: 1.85;
    overflow-wrap: anywhere;
    word-break: keep-all;
}
.skl-quiz__review-explanation-body p {
    margin: 0 0 6px;
}
.skl-quiz__review-explanation-body p:last-child {
    margin-bottom: 0;
}

/* ---- スマホ調整 ---- */
@media screen and (max-width: 600px) {
    .skl-quiz__wrong-list {
        padding: 14px 14px;
    }
    .skl-quiz__wrong-item {
        font-size: 12.5px;
        padding: 5px 10px;
    }
    .skl-quiz__review-item {
        padding: 14px 14px;
    }
    .skl-quiz__review-answer-row {
        grid-template-columns: 96px 1fr;
        gap: 8px;
    }
    .skl-quiz__review-answer-row dd {
        font-size: 13.5px;
    }
    .skl-quiz__review-question {
        font-size: 14px;
    }
}

/* ---- Cocoon h4 装飾打ち消しの追加（Phase 2.3 新見出し用） ---- */
.article .skl-quiz .skl-quiz__review-title,
body .skl-quiz .skl-quiz__review-title,
.article .skl-quiz .skl-quiz__wrong-list-title,
body .skl-quiz .skl-quiz__wrong-list-title {
    margin: 0 0 12px !important;
    padding: 0 !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--skl-q-navy) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
}
.article .skl-quiz .skl-quiz__review-title::before,
.article .skl-quiz .skl-quiz__review-title::after,
body .skl-quiz .skl-quiz__review-title::before,
body .skl-quiz .skl-quiz__review-title::after,
.article .skl-quiz .skl-quiz__wrong-list-title::before,
.article .skl-quiz .skl-quiz__wrong-list-title::after,
body .skl-quiz .skl-quiz__wrong-list-title::before,
body .skl-quiz .skl-quiz__wrong-list-title::after {
    content: none !important;
    display: none !important;
}


/* =====================================================================
   Phase 2.4 — 分野別正答率 (.skl-quiz__field-breakdown)
   ---------------------------------------------------------------------
   結果画面の中で、合否のすぐ下に置く軽量サマリー。
   各分野の「正答数 / 問題数 / 正答率% / 良好 or 要復習 / 横棒」を表示。

   デザイン方針:
   - 既存の .skl-quiz トーン（白カード + 薄ボーダー + ネイビー）に統一
   - 横棒は CSS のみで実装（外部ライブラリ不使用）
   - 良好（>=70%）= 青系、要復習（<70%）= アンバー系
   - 赤は強い警告以外で使わない（不正解バッジ等は既存色を流用）
   - スマホで横スクロールが起きないよう、name はラップ可能に
   ===================================================================== */

.skl-quiz__field-breakdown {
    margin: 0 0 18px;
    padding: 16px 18px;
    background: var(--skl-q-surface);
    border: 1px solid var(--skl-q-border);
    border-radius: var(--skl-q-radius);
    box-shadow: var(--skl-q-shadow-sm);
}
.skl-quiz__field-breakdown-title {
    margin: 0 0 12px;
    padding: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--skl-q-navy);
    letter-spacing: .02em;
}

.skl-quiz__field-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.skl-quiz__field-item {
    margin: 0;
    padding: 12px 14px;
    background: var(--skl-q-bg);
    border: 1px solid var(--skl-q-border);
    border-radius: var(--skl-q-radius-sm);
}

.skl-quiz__field-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 8px;
}
.skl-quiz__field-name {
    flex: 1 1 50%;
    min-width: 0;
    color: var(--skl-q-navy);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: keep-all;
}
.skl-quiz__field-score {
    color: var(--skl-q-text-soft);
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.skl-quiz__field-rate {
    margin-left: auto;
    color: var(--skl-q-navy);
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}

/* 良好 / 要復習 の小さなラベル（ピル） */
.skl-quiz__field-note {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    line-height: 1.5;
}
.skl-quiz__field-note--good {
    background: var(--skl-q-blue-soft);
    color: var(--skl-q-blue);
    border: 1px solid rgba(31, 111, 235, .18);
}
.skl-quiz__field-note--review {
    background: var(--skl-q-warn-soft);
    color: var(--skl-q-warn);
    border: 1px solid var(--skl-q-warn-border);
}

/* 横棒（プログレスバー） */
.skl-quiz__field-bar {
    position: relative;
    height: 8px;
    background: rgba(16, 33, 63, .08);
    border-radius: 999px;
    overflow: hidden;
}
.skl-quiz__field-bar-fill {
    height: 100%;
    width: 0;
    background: var(--skl-q-blue);
    border-radius: 999px;
    transition: width .35s var(--skl-q-ease);
}
.skl-quiz__field-item--good .skl-quiz__field-bar-fill {
    background: linear-gradient(90deg, var(--skl-q-blue), var(--skl-q-cyan));
}
.skl-quiz__field-item--review .skl-quiz__field-bar-fill {
    background: var(--skl-q-warn);
}

/* スマホ調整 */
@media screen and (max-width: 600px) {
    .skl-quiz__field-breakdown {
        padding: 14px 14px;
    }
    .skl-quiz__field-item {
        padding: 11px 12px;
    }
    .skl-quiz__field-name {
        flex: 1 1 100%;
        font-size: 13.5px;
    }
    .skl-quiz__field-score {
        font-size: 12px;
    }
    .skl-quiz__field-rate {
        font-size: .95rem;
    }
}

/* アニメーションを抑制したい利用者向け */
@media (prefers-reduced-motion: reduce) {
    .skl-quiz__field-bar-fill {
        transition: none;
    }
}

/* Cocoon h4 装飾を打ち消し（Phase 2.4 新見出し用） */
.article .skl-quiz .skl-quiz__field-breakdown-title,
body .skl-quiz .skl-quiz__field-breakdown-title {
    margin: 0 0 12px !important;
    padding: 0 !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--skl-q-navy) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
}
.article .skl-quiz .skl-quiz__field-breakdown-title::before,
.article .skl-quiz .skl-quiz__field-breakdown-title::after,
body .skl-quiz .skl-quiz__field-breakdown-title::before,
body .skl-quiz .skl-quiz__field-breakdown-title::after {
    content: none !important;
    display: none !important;
}


/* =====================================================================
   Phase 3.9 — 表示形式 (step/list) と 前へ/次へナビゲーション
   ---------------------------------------------------------------------
   - step モード: actions 内に「前へ / 次へ」を並べる .skl-quiz__nav
   - list モード: 全問を縦に並べた .skl-quiz__list と各 item .skl-quiz__list-item
   - 既存の .skl-quiz__choice / __feedback / __explanation スタイルを流用するため、
     ここでは「list の縦リズム」「nav の2列レイアウト」だけを最小追加する。
   ===================================================================== */

/* (A) ナビゲーション（前へ / 次へ） — step モード専用 */
.skl-quiz .skl-quiz__nav {
    margin: 22px 0 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
}

/* 前へボタンはセカンダリ寄せ + 視覚的に "戻る" を伝える */
.skl-quiz .skl-quiz__btn--prev {
    background: #fff;
    color: var(--skl-q-text-soft);
    border-color: var(--skl-q-border);
    box-shadow: none;
}
.skl-quiz .skl-quiz__btn--prev:hover:not(:disabled) {
    background: var(--skl-q-bg);
    color: var(--skl-q-navy);
    border-color: var(--skl-q-blue-soft);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(16, 33, 63, .05);
}
.skl-quiz .skl-quiz__btn--prev:disabled,
.skl-quiz .skl-quiz__btn--prev[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* 次へボタンは既存の primary 配色を維持（.skl-quiz__btn 既定で OK） */

/* スマホ — nav は1列にしない（前は左、次は右のままが操作しやすい）が、
   横幅が狭いと窮屈になるので gap と padding を縮める */
@media screen and (max-width: 600px) {
    .skl-quiz .skl-quiz__nav {
        gap: 8px;
    }
    .skl-quiz .skl-quiz__nav .skl-quiz__btn {
        flex: 1 1 0;
        padding: 10px 16px;
        font-size: .94rem;
        min-height: 44px;
    }
}

/* (B) list モード - コンテナ */
.skl-quiz .skl-quiz__list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* (C) list モード - 各問アイテム
   .skl-quiz__list-item は1問のカード。境界線で「問題ごと」を視覚分離。 */
.skl-quiz .skl-quiz__list-item {
    margin: 0;
    padding: 22px 22px;
    background: var(--skl-q-bg);
    border: 1px solid var(--skl-q-border);
    border-radius: var(--skl-q-radius);
}

/* list 内の question-header は前後余白を整える */
.skl-quiz .skl-quiz__list-item .skl-quiz__question-header {
    margin: 0 0 12px;
}

/* list 内の question-body */
.skl-quiz .skl-quiz__list-item .skl-quiz__question-body {
    margin: 0 0 16px;
}

/* list 内の選択肢グループ */
.skl-quiz .skl-quiz__list-item .skl-quiz__choices {
    margin: 0;
}

/* list 内の feedback / explanation は既存スタイルを流用、上マージンだけ整える */
.skl-quiz .skl-quiz__list-item .skl-quiz__feedback,
.skl-quiz .skl-quiz__list-item .skl-quiz__explanation {
    margin-top: 14px;
}

/* (D) list モード - 結果を見るボタン */
.skl-quiz .skl-quiz__list-actions {
    margin: 8px 0 0;
    display: flex;
    justify-content: center;
}

/* スマホ — list アイテムの padding を詰める */
@media screen and (max-width: 600px) {
    .skl-quiz .skl-quiz__list {
        gap: 14px;
    }
    .skl-quiz .skl-quiz__list-item {
        padding: 18px 16px;
    }
    .skl-quiz .skl-quiz__list-actions .skl-quiz__btn {
        width: 100%;
    }
}

/* =====================================================================
   Phase FE-1 — 擬似言語・コード風表示 (.skl-quiz__code)
   ---------------------------------------------------------------------
   背景:
     基本情報技術者試験 科目B の擬似言語プログラム問題で使用する。
     旧ページの .fe-pseudo 系を新エンジン側で受けるためのスタイル。
     question_body / explanation の HTML 内に
       <pre class="skl-quiz__code">...</pre>
     形式で含まれる前提。
   スコープ:
     .skl-quiz 配下の .skl-quiz__code のみ。他テンプレートへ影響なし。
   ===================================================================== */
.skl-quiz .skl-quiz__code {
    display: block;
    margin: 12px 0;
    padding: 12px 14px;
    overflow-x: auto;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92em;
    line-height: 1.7;
    white-space: pre;
    color: #1f2937;
    -webkit-tab-size: 2;
    tab-size: 2;
}
@media screen and (max-width: 600px) {
    .skl-quiz .skl-quiz__code {
        padding: 10px 12px;
        font-size: 0.88em;
    }
}