/*
 * 10問テスト（[qlm_quiz]）専用の見た目。すべて .qlm-quiz 配下にscopeしている。
 * 問題選出・採点・回答状態・目的質問・結果表示ロジック（quiz.js）はこのCSSでは一切変更していない
 * （見た目のみ）。トップページ・資格一覧・資格探索・資格比較・資格詳細で確定したデザイントークン
 * （qlm-common.css）を引き継ぐ。
 */

/*
 * ページ上部の余白調整（このページ専用）。資格詳細・資格比較等と同じ調整。
 * main の margin-top とグループの padding-top はテンプレート側のinline styleで
 * 指定されているため、上書きには!importantが必要。このCSSファイルは10問テストページでのみ
 * 読み込まれるため、他ページには影響しない。固定ページタイトルの文字自体は変更しない。
 */
main {
	margin-top: 24px !important;
}

main > .wp-block-group.alignfull {
	padding-top: 32px !important;
}

/* .wp-block-post-title自体は残すが、資格詳細ページ等と揃うようフォントサイズを少し抑える
   （タイトル文字・タイトル文言は変更しない）。このCSSはこのページでのみ読み込まれるため、
   他ページの見出しサイズには影響しない。 */
.wp-block-post-title {
	font-size: 2rem;
}

.qlm-quiz {
	max-width: 1040px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.6;
	color: var( --qlm-color-text );
	box-sizing: border-box;
}

.qlm-quiz * {
	box-sizing: border-box;
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* 問題文・選択肢・資格情報等は、資格詳細ページと同じ考え方で読みやすい行幅に留める
   （外側の .qlm-quiz 自体は他ページと横位置を揃えるため広めに保つ）。 */
.qlm-quiz-message,
.qlm-quiz-intro,
.qlm-quiz-purpose,
.qlm-quiz-question,
.qlm-quiz-result {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.qlm-quiz-message {
	margin-bottom: 1em;
}

.qlm-quiz-message:empty {
	display: none;
}

.qlm-quiz-message.qlm-quiz-error {
	color: var( --qlm-color-error );
	background: rgba( 179, 38, 30, 0.07 );
	border-left: 4px solid var( --qlm-color-error );
	padding: 0.75em 1em;
	border-radius: var( --qlm-radius-button );
}

.qlm-quiz-message.qlm-quiz-notice {
	color: var( --qlm-color-secondary );
	background: var( --qlm-color-bg-section );
	border-left: 4px solid var( --qlm-color-secondary );
	padding: 0.75em 1em;
	border-radius: var( --qlm-radius-button );
}

/* ---------------------------------------------------------------------
 * ボタン共通：プライマリ（既定）／セカンダリ（戻る）。
 * ------------------------------------------------------------------- */

.qlm-quiz button {
	font-size: 1rem;
	font-weight: 700;
	padding: 0.75em 1.25em;
	min-height: 44px;
	min-width: 44px;
	border-radius: var( --qlm-radius-button );
	border: none;
	background: var( --qlm-color-secondary );
	color: var( --qlm-color-on-primary );
	cursor: pointer;
}

.qlm-quiz button:hover,
.qlm-quiz button:focus-visible {
	background: var( --qlm-color-primary );
}

.qlm-quiz button.qlm-quiz-btn-secondary {
	background: var( --qlm-color-bg );
	color: var( --qlm-color-secondary );
	border: 1px solid var( --qlm-color-border );
}

.qlm-quiz button.qlm-quiz-btn-secondary:hover,
.qlm-quiz button.qlm-quiz-btn-secondary:focus-visible {
	background: var( --qlm-color-bg-section );
	color: var( --qlm-color-secondary );
}

.qlm-quiz button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* 「テストを始める」「もう一度挑戦する」：単独で置かれる主要CTA。
   PCでは全幅にせず適度な幅で中央寄せ、スマホでは押しやすい全幅に近いサイズを維持する。 */
.qlm-quiz-purpose-submit-btn,
.qlm-quiz-result > button {
	display: block;
	width: 100%;
	margin: 0.5em auto 0;
}

@media ( min-width: 481px ) {
	.qlm-quiz-purpose-submit-btn,
	.qlm-quiz-result > button {
		width: 100%;
		max-width: 420px;
		min-width: 360px;
	}
}

.qlm-quiz-nav {
	display: flex;
	gap: 0.75em;
	margin-top: 1.5em;
	flex-wrap: wrap;
}

.qlm-quiz-progress {
	font-weight: 700;
	color: var( --qlm-color-primary );
	margin-bottom: 0.75em;
	font-size: 1.05rem;
}

/* ---------------------------------------------------------------------
 * 問題文・選択肢。
 * ------------------------------------------------------------------- */

.qlm-quiz-choices {
	border: none;
	padding: 0;
	margin: 0;
}

.qlm-quiz-choices legend {
	display: block;
	width: 100%;
	background: var( --qlm-color-bg );
	border: 1px solid var( --qlm-color-border );
	border-radius: var( --qlm-radius-card );
	padding: 1em 1.2em;
	margin: 0 0 1.1em;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.6;
	color: var( --qlm-color-text );
	white-space: normal;
}

.qlm-quiz-unanswered-warning {
	color: var( --qlm-color-error );
	background: rgba( 179, 38, 30, 0.07 );
	border-left: 4px solid var( --qlm-color-error );
	padding: 0.6em 0.9em;
	margin: 0 0 1em;
	font-weight: 600;
	border-radius: var( --qlm-radius-button );
}

.qlm-quiz-unanswered-remaining-global {
	color: var( --qlm-color-error );
	font-weight: 600;
	margin: 0 0 1em;
}

.qlm-quiz-choice,
.qlm-quiz-purpose-choice {
	display: block;
	background: var( --qlm-color-bg );
	border: 1px solid var( --qlm-color-border );
	border-radius: var( --qlm-radius-button );
	margin-bottom: 0.6em;
	transition: background 0.12s ease, border-color 0.12s ease;
}

.qlm-quiz-choice:hover,
.qlm-quiz-purpose-choice:hover {
	background: var( --qlm-color-bg-section );
}

.qlm-quiz-choice.is-selected,
.qlm-quiz-purpose-choice:has( :checked ) {
	border-color: var( --qlm-color-secondary );
	background: var( --qlm-color-bg-section );
}

.qlm-quiz-choice label,
.qlm-quiz-purpose-choice label {
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding: 0.85em 1em;
	min-height: 44px;
	color: var( --qlm-color-text );
	cursor: pointer;
}

.qlm-quiz-choice input[type="radio"],
.qlm-quiz-purpose-choice input[type="radio"] {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	accent-color: var( --qlm-color-secondary );
}

/* ---------------------------------------------------------------------
 * 問題番号ナビ（1〜10）：ロジックは変更せず、状態の見分けやすさのみ整える。
 * 未回答＝既定の白／回答済み＝成功色の枠＋薄い背景／現在表示中＝サブカラーの太い枠。
 * ------------------------------------------------------------------- */

.qlm-quiz-numnav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-top: 1.25em;
	padding-top: 1.25em;
	border-top: 1px solid var( --qlm-color-border );
}

/* 生成される<button>要素のため、上の汎用「.qlm-quiz button」より詳細度を上げて上書きする。 */
.qlm-quiz button.qlm-quiz-numnav-btn {
	min-width: 44px;
	min-height: 44px;
	padding: 0.4em;
	border-radius: var( --qlm-radius-button );
	border: 1px solid var( --qlm-color-border );
	background: var( --qlm-color-bg );
	color: var( --qlm-color-text );
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1.1;
	font-size: 0.95rem;
}

.qlm-quiz button.qlm-quiz-numnav-btn:hover,
.qlm-quiz button.qlm-quiz-numnav-btn:focus-visible {
	background: var( --qlm-color-bg-section );
}

.qlm-quiz button.qlm-quiz-numnav-btn.is-answered {
	border-color: var( --qlm-color-success );
	background: rgba( 46, 125, 79, 0.06 );
}

.qlm-quiz button.qlm-quiz-numnav-btn.is-current {
	border-width: 3px;
	border-color: var( --qlm-color-secondary );
	background: var( --qlm-color-bg-section );
	font-weight: 700;
	color: var( --qlm-color-primary );
}

.qlm-quiz-navstate {
	font-size: 0.7em;
	font-weight: 700;
	color: var( --qlm-color-success );
}

/* ---------------------------------------------------------------------
 * 目的アンケート（テスト開始前）。
 * ------------------------------------------------------------------- */

.qlm-quiz-purpose-heading {
	font-size: 1.15rem;
	font-weight: 700;
	color: var( --qlm-color-primary );
	margin: 0 0 0.5em;
}

.qlm-quiz-purpose-description {
	color: var( --qlm-color-text-muted );
	margin: 0 0 1.25em;
}

.qlm-quiz-purpose-choices {
	border: none;
	padding: 0;
	margin: 0 0 1.5em;
}

/* ---------------------------------------------------------------------
 * テスト前の短い資格紹介（この資格を取ると？／主な活躍先／ざっくり取得情報）。
 * 全体を薄いブルー系の概要カードにまとめ、内部の「ざっくり取得情報」だけ白い小カードで
 * ラベル→値の階層を明確にする。
 * ------------------------------------------------------------------- */

.qlm-quiz-intro-section {
	background: var( --qlm-color-bg-section );
	border: 1px solid var( --qlm-color-border );
	border-radius: var( --qlm-radius-card );
	padding: 1.3em 1.4em;
	margin-bottom: 1.6em;
}

.qlm-quiz-intro-block {
	margin-bottom: 1.2em;
}

.qlm-quiz-intro-block:last-child {
	margin-bottom: 0;
}

.qlm-quiz-intro-block-heading {
	font-size: 1rem;
	font-weight: 700;
	color: var( --qlm-color-primary );
	margin: 0 0 0.5em;
}

.qlm-quiz-intro-block-body {
	margin: 0;
	color: var( --qlm-color-text );
	line-height: 1.8;
}

.qlm-quiz-intro-block-list {
	margin: 0;
	padding-left: 1.3em;
	color: var( --qlm-color-text );
}

/* ---------------------------------------------------------------------
 * ラベル→値の小カード群：テスト前「ざっくり取得情報」／結果画面「この資格について」
 * 「求人市場の参考データ」「この資格を取得すると」で共通利用。PC 2〜3列、スマホ1列。
 * ------------------------------------------------------------------- */

.qlm-quiz-intro-facts,
.qlm-quiz-qi-facts,
.qlm-quiz-mi-facts,
.qlm-quiz-posttest-facts {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) );
	gap: 0.7em;
	margin: 0;
}

.qlm-quiz-intro-fact,
.qlm-quiz-qi-fact,
.qlm-quiz-mi-fact,
.qlm-quiz-posttest-fact {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	background: var( --qlm-color-bg );
	border: 1px solid var( --qlm-color-border );
	border-radius: var( --qlm-radius-button );
	padding: 0.7em 0.85em;
}

.qlm-quiz-intro-fact dt,
.qlm-quiz-qi-fact dt,
.qlm-quiz-mi-fact dt,
.qlm-quiz-posttest-fact dt {
	font-weight: 600;
	font-size: 0.8em;
	color: var( --qlm-color-text-muted );
	margin: 0;
}

.qlm-quiz-intro-fact dd,
.qlm-quiz-qi-fact dd,
.qlm-quiz-mi-fact dd,
.qlm-quiz-posttest-fact dd {
	margin: 0;
	text-align: left;
	font-weight: 700;
	font-size: 1.05rem;
	color: var( --qlm-color-primary );
}

.qlm-quiz-qi-editorial-note {
	font-size: 0.85em;
	color: var( --qlm-color-text-muted );
	margin: 0.75em 0 0;
}

@media ( max-width: 480px ) {
	.qlm-quiz-intro-facts,
	.qlm-quiz-qi-facts,
	.qlm-quiz-mi-facts,
	.qlm-quiz-posttest-facts {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
 * 結果画面：点数・正答率。
 * ------------------------------------------------------------------- */

.qlm-quiz-result-summary {
	text-align: center;
	padding: 1.5em 1em;
	margin-bottom: 1.5em;
	border-radius: var( --qlm-radius-card );
	background: var( --qlm-color-bg-section );
	border: 1px solid var( --qlm-color-border );
}

.qlm-quiz-result-score {
	font-size: 2rem;
	font-weight: 700;
	color: var( --qlm-color-primary );
	margin: 0 0 0.25em;
}

.qlm-quiz-result-percentage {
	font-size: 1.1rem;
	color: var( --qlm-color-text );
	margin: 0;
}

.qlm-quiz-advice {
	background: var( --qlm-color-bg-section );
	border-left: 4px solid var( --qlm-color-secondary );
	color: var( --qlm-color-text );
	padding: 0.85em 1em;
	border-radius: var( --qlm-radius-button );
	margin-bottom: 1.5em;
}

/* ---------------------------------------------------------------------
 * 資格について／求人市場の参考データ／この資格を取得すると：結果画面の情報サマリーカード。
 * ------------------------------------------------------------------- */

.qlm-quiz-qi-section,
.qlm-quiz-mi-section,
.qlm-quiz-posttest-section {
	background: var( --qlm-color-bg-section );
	border: 1px solid var( --qlm-color-border );
	border-radius: var( --qlm-radius-card );
	padding: 1.2em 1.3em;
	margin: 0 0 1.5em;
}

.qlm-quiz-qi-heading,
.qlm-quiz-mi-heading,
.qlm-quiz-posttest-heading {
	font-size: 1.05rem;
	font-weight: 700;
	color: var( --qlm-color-primary );
	margin: 0 0 0.85em;
}

.qlm-quiz-mi-comparison-note {
	font-size: 0.85em;
	color: var( --qlm-color-text-muted );
	margin: 0.75em 0 0;
}

.qlm-quiz-mi-disclaimer {
	font-size: 0.8em;
	color: var( --qlm-color-text-muted );
	margin: 0.4em 0 0;
}

.qlm-quiz-posttest-block {
	margin-bottom: 1.1em;
	padding-bottom: 1.1em;
	border-bottom: 1px solid var( --qlm-color-border );
}

.qlm-quiz-posttest-block:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.qlm-quiz-posttest-block-heading {
	font-size: 0.95rem;
	font-weight: 700;
	color: var( --qlm-color-primary );
	margin: 0 0 0.4em;
}

.qlm-quiz-posttest-block-body {
	margin: 0;
	color: var( --qlm-color-text );
}

.qlm-quiz-posttest-block-list {
	margin: 0;
	padding-left: 1.3em;
	color: var( --qlm-color-text );
}

.qlm-quiz-qualification-detail-cta {
	margin: 0 0 1.5em;
	text-align: center;
}

.qlm-quiz-qualification-detail-cta a {
	color: var( --qlm-color-secondary );
	font-weight: 700;
	text-decoration: none;
}

.qlm-quiz-qualification-detail-cta a:hover,
.qlm-quiz-qualification-detail-cta a:focus-visible {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------
 * 各問題の正誤・解説（結果画面）。
 * ------------------------------------------------------------------- */

.qlm-quiz-result-item {
	background: var( --qlm-color-bg );
	border: 1px solid var( --qlm-color-border );
	border-radius: var( --qlm-radius-card );
	padding: 1.1em 1.2em;
	margin-bottom: 1.1em;
}

.qlm-quiz-result-item.is-correct {
	border-left: 4px solid var( --qlm-color-success );
}

.qlm-quiz-result-item.is-incorrect {
	border-left: 4px solid var( --qlm-color-error );
}

.qlm-quiz-result-mark {
	font-weight: 700;
	display: block;
	margin-bottom: 0.5em;
}

.qlm-quiz-result-mark.is-correct {
	color: var( --qlm-color-success );
}

.qlm-quiz-result-mark.is-incorrect {
	color: var( --qlm-color-error );
}

.qlm-quiz-result-row {
	font-weight: 600;
	color: var( --qlm-color-text-muted );
	margin: 0.6em 0 0.1em;
}

.qlm-quiz-result-row + dd {
	margin: 0 0 0.6em;
	color: var( --qlm-color-text );
}

.qlm-quiz-source-link {
	color: var( --qlm-color-secondary );
	word-break: break-all;
}

/* ---------------------------------------------------------------------
 * おすすめ情報（アフィリエイト・提携CTA）：資格詳細ページのCTAと同じ考え方。
 * PRラベルはアクセントカラーで、編集コンテンツと混同されないようにする。
 * ------------------------------------------------------------------- */

.qlm-quiz-recommend-section {
	margin-top: 2em;
	padding-top: 1.5em;
	border-top: 1px solid var( --qlm-color-border );
}

.qlm-quiz-recommend-heading {
	font-size: 1.15rem;
	font-weight: 700;
	color: var( --qlm-color-primary );
	margin: 0 0 1em;
}

.qlm-quiz-recommend-card {
	position: relative;
	background: var( --qlm-color-bg-section );
	border: 1px solid var( --qlm-color-border );
	border-radius: var( --qlm-radius-card );
	padding: 1.1em 1.2em;
	margin-bottom: 1.1em;
}

.qlm-quiz-recommend-pr {
	display: inline-block;
	font-size: 0.72em;
	font-weight: 700;
	color: var( --qlm-color-primary );
	background: rgba( 244, 162, 89, 0.35 );
	border-radius: 4px;
	padding: 0.15em 0.55em;
	margin-bottom: 0.6em;
}

.qlm-quiz-recommend-image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	margin-bottom: 0.75em;
}

.qlm-quiz-recommend-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: var( --qlm-color-primary );
	margin: 0 0 0.5em;
}

.qlm-quiz-recommend-description {
	color: var( --qlm-color-text );
	margin: 0 0 0.85em;
}

.qlm-quiz-recommend-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 1.5em;
	border-radius: var( --qlm-radius-button );
	background: var( --qlm-color-secondary );
	color: var( --qlm-color-on-primary );
	text-decoration: none;
	font-weight: 700;
}

.qlm-quiz-recommend-cta:hover,
.qlm-quiz-recommend-cta:focus-visible {
	background: var( --qlm-color-primary );
}

.qlm-quiz-recommend-newtab {
	display: inline-block;
	margin-left: 0.5em;
	font-size: 0.85em;
	color: var( --qlm-color-text-muted );
}

@media ( max-width: 480px ) {
	.wp-block-post-title {
		font-size: 1.5rem;
	}
}