/**
 * 記事埋め込み（ミニクイズ・案件カード）スタイル。
 * 記事本文の横幅に馴染むよう、診断より控えめな枠で。共通トークンは再宣言。
 */

.toeic-embed-quiz,
.toeic-embed-offers {
	--ts-fg: #1f2430;
	--ts-muted: #6b7280;
	--ts-primary: #2563eb;
	--ts-primary-dark: #1d4ed8;
	--ts-cta: #f97316;
	--ts-border: #e5e7eb;

	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
		"Noto Sans JP", "Segoe UI", Meiryo, sans-serif;
	color: var(--ts-fg);
	line-height: 1.6;
}
.toeic-embed-quiz *,
.toeic-embed-offers * { box-sizing: border-box; }

/* ボタン（記事内でも効くよう最低限を補完） */
.toeic-embed-quiz .ts-btn,
.toeic-embed-offers .ts-btn {
	display: block;
	width: 100%;
	min-height: 50px;
	padding: 13px 18px;
	border: none;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}
.toeic-embed-quiz .ts-btn-cta,
.toeic-embed-offers .ts-btn-cta {
	background: var(--ts-cta);
	color: #fff;
	box-shadow: 0 4px 12px rgba(249, 115, 22, .35);
	margin-top: 10px;
}
.toeic-embed-quiz .ts-btn-ghost {
	background: transparent;
	color: var(--ts-muted);
	border: 1px solid var(--ts-border);
	font-weight: 600;
	margin-top: 8px;
}

/* 埋め込みクイズの枠 */
.toeic-embed-quiz {
	border: 1px solid var(--ts-border);
	border-left: 4px solid var(--ts-primary);
	border-radius: 10px;
	padding: 16px;
	margin: 24px 0;
	background: #fbfdff;
}
.te-quiz-badge {
	display: inline-block;
	background: var(--ts-primary);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 999px;
	margin-bottom: 10px;
}
.te-stem {
	font-size: 16px;
	font-weight: 600;
	margin: 4px 0 14px;
}
.toeic-embed-quiz .ts-passage {
	background: #f8fafc;
	border: 1px solid var(--ts-border);
	border-radius: 8px;
	padding: 12px;
	font-size: 14px;
	white-space: pre-line;
	margin-bottom: 12px;
}
.toeic-embed-quiz .ts-choices { display: flex; flex-direction: column; gap: 8px; }
.toeic-embed-quiz .ts-choice {
	width: 100%;
	min-height: 46px;
	padding: 11px 14px;
	background: #fff;
	color: var(--ts-fg);
	border: 1.5px solid var(--ts-border);
	border-radius: 10px;
	font-size: 15px;
	text-align: left;
	cursor: pointer;
}
.toeic-embed-quiz .ts-choice:hover { border-color: var(--ts-primary); background: #f5f8ff; }

.te-verdict { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.te-verdict.is-correct { color: #16a34a; }
.te-verdict.is-wrong { color: #ef4444; }
.te-answer { font-weight: 600; margin: 0 0 8px; }
.te-explanation {
	font-size: 14px;
	background: #f8fafc;
	border-left: 3px solid var(--ts-primary);
	padding: 10px 12px;
	border-radius: 6px;
	margin: 0 0 12px;
}
.te-nudge { font-size: 14px; font-weight: 600; margin: 0 0 10px; }

/* 案件カード（記事末） */
.toeic-embed-offers {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 28px 0;
}
.toeic-embed-offers .ts-offer {
	position: relative;
	border: 1px solid var(--ts-border);
	border-radius: 12px;
	padding: 16px;
	background: #fff;
}
.toeic-embed-offers .ts-offer-badge {
	display: inline-block;
	background: #eef2ff;
	color: var(--ts-primary-dark);
	font-size: 11px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 6px;
}
.toeic-embed-offers .ts-offer-name { font-size: 16px; font-weight: 700; margin: 8px 0 6px; }
.toeic-embed-offers .ts-offer-catch { font-size: 14px; margin: 0 0 8px; }
.toeic-embed-offers .ts-offer-pr {
	position: absolute; top: 10px; right: 12px; font-size: 10px; color: var(--ts-muted);
}

.toeic-embed-quiz .ts-loading { text-align: center; color: var(--ts-muted); padding: 16px 0; }

@media (prefers-color-scheme: dark) {
	.toeic-embed-quiz, .toeic-embed-offers { --ts-fg: #e5e7eb; --ts-muted: #9ca3af; --ts-border: #2a3242; }
	.toeic-embed-quiz { background: #141a28; }
	.toeic-embed-quiz .ts-passage, .te-explanation { background: #1b2233; }
	.toeic-embed-quiz .ts-choice, .toeic-embed-offers .ts-offer { background: #161c2b; }
	.toeic-embed-quiz .ts-choice:hover { background: #20283b; }
}