/**
 * 条件分岐診断プラグイン - フロント表示スタイル
 *
 * 診断本体は .cbd-diagnosis 配下、設置UIは cbd- プレフィックスに限定し、
 * テーマ全体へ影響しないようにしている。
 *
 * v0.3.0: デザイン設定を CSS変数（--cbd-*）とバリアントクラスで反映する。
 *   CSS変数はショートコード出力時にラッパーの style 属性へ出力される。
 *   変数が無い場合のフォールバック値も指定しているため、単体でも崩れない。
 *
 * ▼ アニメーションを無効化したい場合
 *   下部の「ANIMATION」ブロックをコメントアウトするか、
 *   診断要素に cbd-no-anim クラスを付与してください。
 */

/* ===== ラッパー ===== */
.cbd-diagnosis {
	box-sizing: border-box;
	max-width: var(--cbd-max-width, 720px);
	margin: 1.5em auto;
	padding: var(--cbd-outer-padding, 24px);
	border: 1px solid var(--cbd-border-color, #e5e7eb);
	border-radius: var(--cbd-card-radius, 16px);
	background: var(--cbd-background-color, #ffffff);
	color: var(--cbd-text-color, #222222);
	line-height: 1.7;
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
}

.cbd-diagnosis *,
.cbd-diagnosis *::before,
.cbd-diagnosis *::after {
	box-sizing: border-box;
}

.cbd-diagnosis .cbd-title {
	margin: 0 0 0.5em;
	font-size: 1.4em;
	line-height: 1.4;
	color: var(--cbd-text-color, #222222);
}

.cbd-diagnosis .cbd-description {
	margin: 0 0 1.25em;
	color: var(--cbd-muted-text-color, #666666);
}

.cbd-diagnosis .cbd-progress {
	margin: 0 0 0.75em;
	font-size: 0.85em;
	font-weight: 700;
	color: var(--cbd-muted-text-color, #888888);
	letter-spacing: 0.05em;
}

.cbd-diagnosis .cbd-question-text {
	margin: 0 0 1em;
	font-size: 1.2em;
	line-height: 1.5;
	color: var(--cbd-text-color, #222222);
}

/* ===== ボタン共通 ===== */
.cbd-diagnosis .cbd-choices {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
}

.cbd-diagnosis .cbd-button {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.9em 1.1em;
	border: 1px solid var(--cbd-border-color, #d0d0d0);
	border-radius: var(--cbd-button-radius, 12px);
	background: var(--cbd-card-background-color, #f7f7f7);
	color: var(--cbd-text-color, #222222);
	font-size: 1em;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
	-webkit-appearance: none;
	appearance: none;
}

.cbd-diagnosis .cbd-button:hover,
.cbd-diagnosis .cbd-button:focus {
	border-color: var(--cbd-accent-color, #b9c6ff);
	outline: none;
}

.cbd-diagnosis .cbd-choice {
	font-weight: 600;
}

.cbd-diagnosis .cbd-choice:active {
	transform: scale(0.99);
}

/* プライマリ（開始・CTA） */
.cbd-diagnosis .cbd-button--primary {
	background: var(--cbd-accent-color, #5b7cfa);
	border-color: var(--cbd-accent-color, #5b7cfa);
	color: var(--cbd-button-text-color, #ffffff);
	font-weight: 700;
}

.cbd-diagnosis .cbd-button--primary:hover,
.cbd-diagnosis .cbd-button--primary:focus {
	filter: brightness(0.94);
	color: var(--cbd-button-text-color, #ffffff);
}

/* ゴースト（戻る・もう一度） */
.cbd-diagnosis .cbd-button--ghost {
	background: transparent;
	border-color: transparent;
	color: var(--cbd-muted-text-color, #666666);
	font-size: 0.9em;
	margin-top: 0.5em;
	padding: 0.6em;
}

.cbd-diagnosis .cbd-button--ghost:hover,
.cbd-diagnosis .cbd-button--ghost:focus {
	background: rgba(0, 0, 0, 0.04);
	color: var(--cbd-text-color, #333333);
}

.cbd-diagnosis .cbd-start-button,
.cbd-diagnosis .cbd-cta-button {
	margin-top: 1em;
}

/* ===== ボタンスタイル（button_style） ===== */
.cbd-button-style-outline .cbd-button--primary {
	background: transparent;
	color: var(--cbd-accent-color, #5b7cfa);
	border-color: var(--cbd-accent-color, #5b7cfa);
	border-width: 2px;
}
.cbd-button-style-outline .cbd-button--primary:hover,
.cbd-button-style-outline .cbd-button--primary:focus {
	background: rgba(91, 124, 250, 0.08);
	filter: none;
}

.cbd-button-style-soft .cbd-button--primary {
	background: #eef2ff; /* フォールバック */
	background: color-mix(in srgb, var(--cbd-accent-color, #5b7cfa) 14%, #ffffff);
	color: var(--cbd-accent-color, #5b7cfa);
	border-color: transparent;
}

.cbd-button-style-gradient .cbd-button--primary {
	background: var(--cbd-accent-color, #5b7cfa); /* フォールバック */
	background: linear-gradient(135deg, var(--cbd-accent-color, #5b7cfa), color-mix(in srgb, var(--cbd-accent-color, #5b7cfa) 55%, #7a5cff));
	border-color: transparent;
	color: var(--cbd-button-text-color, #ffffff);
}

/* ===== 選択肢スタイル（choice_style） ===== */
/* card: 大きめ・タップしやすい */
.cbd-choice-style-card .cbd-choice {
	padding: 1.1em 1.2em;
	border-radius: var(--cbd-card-radius, 16px);
	background: var(--cbd-card-background-color, #ffffff);
	border: 1px solid var(--cbd-border-color, #e5e7eb);
	text-align: left;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.cbd-choice-style-card .cbd-choice:hover,
.cbd-choice-style-card .cbd-choice:focus {
	border-color: var(--cbd-accent-color, #5b7cfa);
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
}

/* list: シンプルなリスト型 */
.cbd-choice-style-list .cbd-choices {
	gap: 0;
}
.cbd-choice-style-list .cbd-choice {
	border-radius: 0;
	border: none;
	border-bottom: 1px solid var(--cbd-border-color, #e5e7eb);
	background: transparent;
	text-align: left;
	padding: 0.95em 0.4em;
	font-weight: 500;
}
.cbd-choice-style-list .cbd-choice:hover,
.cbd-choice-style-list .cbd-choice:focus {
	background: rgba(0, 0, 0, 0.03);
}

/* ===== 結果 ===== */
.cbd-diagnosis .cbd-result-title {
	margin: 0 0 0.75em;
	font-size: 1.3em;
	color: var(--cbd-text-color, #222222);
}

.cbd-diagnosis .cbd-result-body {
	margin: 0 0 1em;
	line-height: 1.85;
}

.cbd-diagnosis .cbd-result-body :first-child {
	margin-top: 0;
}

.cbd-diagnosis .cbd-result-body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--cbd-image-radius, 8px);
}

/* ===== 結果強化（v0.5.0） ===== */
/* PR表記 */
.cbd-diagnosis .cbd-result-pr-label {
	display: inline-block;
	margin: 0 0 0.6em;
	padding: 0.15em 0.6em;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--cbd-muted-text-color, #666);
	background: rgba(0, 0, 0, 0.06);
	border-radius: 4px;
}

/* バッジ */
.cbd-diagnosis .cbd-result-badge {
	display: inline-block;
	margin: 0 0 0.5em;
	padding: 0.25em 0.8em;
	font-size: 0.8em;
	font-weight: 700;
	color: var(--cbd-button-text-color, #fff);
	background: var(--cbd-accent-color, #5b7cfa);
	border-radius: 999px;
}

/* 結果画像 */
.cbd-diagnosis .cbd-result-image {
	margin: 0 0 1em;
}
.cbd-diagnosis .cbd-result-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--cbd-image-radius, 12px);
}

/* リード文 */
.cbd-diagnosis .cbd-result-lead {
	margin: 0 0 1em;
	font-size: 1.05em;
	font-weight: 600;
	line-height: 1.7;
	color: var(--cbd-text-color, #222);
}

/* 回答サマリー */
.cbd-diagnosis .cbd-result-summary {
	margin: 0 0 1.2em;
	padding: 0.9em 1em;
	background: rgba(0, 0, 0, 0.03);
	border: 1px solid var(--cbd-border-color, #e5e7eb);
	border-radius: 10px;
}
.cbd-diagnosis .cbd-result-summary-title {
	margin: 0 0 0.6em;
	font-size: 0.95em;
}
.cbd-diagnosis .cbd-result-summary-item {
	margin: 0 0 0.6em;
}
.cbd-diagnosis .cbd-result-summary-item:last-child {
	margin-bottom: 0;
}
.cbd-diagnosis .cbd-result-summary-q {
	margin: 0;
	font-size: 0.85em;
	color: var(--cbd-muted-text-color, #666);
}
.cbd-diagnosis .cbd-result-summary-a {
	margin: 0.1em 0 0;
	font-weight: 600;
}

/* おすすめ理由 */
.cbd-diagnosis .cbd-result-reasons {
	margin: 0 0 1.2em;
}
.cbd-diagnosis .cbd-result-reasons-title {
	margin: 0 0 0.5em;
	font-size: 1em;
}
.cbd-diagnosis .cbd-result-reasons-list {
	margin: 0;
	padding-left: 1.3em;
	list-style: none;
}
.cbd-diagnosis .cbd-result-reasons-list li {
	position: relative;
	margin: 0 0 0.4em;
	padding-left: 1.3em;
	line-height: 1.7;
}
.cbd-diagnosis .cbd-result-reasons-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--cbd-accent-color, #5b7cfa);
	font-weight: 700;
}

/* CTAボタン群 */
.cbd-diagnosis .cbd-result-ctas {
	display: flex;
	flex-direction: column;
	gap: 0.7em;
	margin: 1.2em 0 0.6em;
}
.cbd-diagnosis .cbd-result-ctas--inline {
	flex-direction: row;
	flex-wrap: wrap;
}
.cbd-diagnosis .cbd-result-ctas--inline .cbd-result-cta-group,
.cbd-diagnosis .cbd-result-ctas--inline .cbd-result-cta {
	flex: 1 1 200px;
}
.cbd-diagnosis .cbd-result-cta-group {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
}
.cbd-diagnosis .cbd-result-cta {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.95em 1.1em;
	border: 1px solid var(--cbd-accent-color, #5b7cfa);
	border-radius: var(--cbd-button-radius, 12px);
	text-align: center;
	text-decoration: none;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.15s ease, background-color 0.15s ease;
}
.cbd-diagnosis .cbd-result-cta--primary {
	background: var(--cbd-accent-color, #5b7cfa);
	color: var(--cbd-button-text-color, #fff);
}
.cbd-diagnosis .cbd-result-cta--secondary {
	background: #4b5563;
	border-color: #4b5563;
	color: #fff;
}
.cbd-diagnosis .cbd-result-cta--outline {
	background: transparent;
	color: var(--cbd-accent-color, #5b7cfa);
	border-width: 2px;
}
.cbd-diagnosis .cbd-result-cta--soft {
	background: #eef2ff;
	background: color-mix(in srgb, var(--cbd-accent-color, #5b7cfa) 14%, #ffffff);
	color: var(--cbd-accent-color, #5b7cfa);
	border-color: transparent;
}
.cbd-diagnosis .cbd-result-cta--text {
	background: transparent;
	border-color: transparent;
	color: var(--cbd-accent-color, #5b7cfa);
	text-decoration: underline;
	font-weight: 600;
}
.cbd-diagnosis .cbd-result-cta:hover,
.cbd-diagnosis .cbd-result-cta:focus {
	filter: brightness(0.96);
	outline: none;
}
.cbd-diagnosis .cbd-result-cta--emphasis {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}
.cbd-diagnosis .cbd-result-cta-note {
	margin: 0;
	font-size: 0.8em;
	color: var(--cbd-muted-text-color, #666);
	text-align: center;
}

/* 関連リンク */
.cbd-diagnosis .cbd-related-links {
	margin: 1.2em 0 0.6em;
	padding-top: 0.8em;
	border-top: 1px solid var(--cbd-border-color, #e5e7eb);
}
.cbd-diagnosis .cbd-related-links-title {
	margin: 0 0 0.5em;
	font-size: 0.95em;
}
.cbd-diagnosis .cbd-related-links ul {
	margin: 0;
	padding-left: 1.2em;
}
.cbd-diagnosis .cbd-related-link {
	color: var(--cbd-accent-color, #5b7cfa);
}

/* 注意書き */
.cbd-diagnosis .cbd-result-notice {
	margin: 1em 0 0.6em;
	padding: 0.7em 0.9em;
	font-size: 0.8em;
	line-height: 1.6;
	color: var(--cbd-muted-text-color, #666);
	background: rgba(0, 0, 0, 0.03);
	border-radius: 8px;
}

/* レイアウト：card */
.cbd-diagnosis.cbd-result-layout-card .cbd-result {
	padding: 0.2em 0 0;
}

/* レイアウト：lp（リード・画像・CTAを強める） */
.cbd-diagnosis.cbd-result-layout-lp .cbd-result-lead {
	font-size: 1.2em;
}
.cbd-diagnosis.cbd-result-layout-lp .cbd-result-title {
	font-size: 1.5em;
}
.cbd-diagnosis.cbd-result-layout-lp .cbd-result-cta {
	padding: 1.15em 1.2em;
	font-size: 1.08em;
}
.cbd-diagnosis.cbd-result-layout-lp .cbd-result-image {
	margin-bottom: 1.2em;
}

/* スマホでは inline CTA も縦積みにする */
@media (max-width: 480px) {
	.cbd-diagnosis .cbd-result-ctas--inline {
		flex-direction: column;
	}
}

/* ===== エラー ===== */
.cbd-diagnosis .cbd-error-message {
	margin: 0;
	padding: 1em;
	border-radius: 8px;
	background: #fff6f6;
	color: #a33;
	text-align: center;
}

.cbd-diagnosis--error {
	border-color: #f0c0c0;
	background: #fff6f6;
	color: #a33;
}

/* ===== 設置・表示設定（v0.9.0） ===== */
.cbd-placement {
	box-sizing: border-box;
	margin: 1.5em auto;
}

.cbd-placement[hidden],
.cbd-placement-body[hidden],
.cbd-modal[hidden] {
	display: none !important;
}

.cbd-placement--full-width,
.cbd-diagnosis.cbd-placement-full-width {
	max-width: none;
	width: 100%;
}

.cbd-diagnosis.cbd-placement-compact {
	--cbd-outer-padding: min(var(--cbd-outer-padding, 24px), 16px);
	--cbd-inner-padding: min(var(--cbd-inner-padding, 24px), 16px);
	font-size: 0.95em;
}

.cbd-diagnosis.cbd-placement-lp {
	border-width: 0;
	box-shadow: none;
}

.cbd-diagnosis.cbd-placement-hide-title .cbd-title {
	display: none;
}

.cbd-launch-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25em;
	width: min(100%, 420px);
	margin: 0 auto;
	padding: 1em 1.2em;
	border: 1px solid #d6dcf0;
	border-radius: 12px;
	background: #1f2937;
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 8px 22px rgba(31, 41, 55, 0.16);
}

.cbd-launch-button:hover,
.cbd-launch-button:focus {
	filter: brightness(0.96);
	outline: 2px solid rgba(91, 124, 250, 0.28);
	outline-offset: 3px;
}

.cbd-launch-button-subtext {
	font-size: 0.82em;
	font-weight: 400;
	opacity: 0.82;
}

.cbd-placement--button .cbd-placement-body {
	margin-top: 1em;
}

.cbd-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.cbd-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.62);
}

.cbd-modal-dialog {
	position: relative;
	z-index: 1;
	width: min(100%, var(--cbd-modal-width, 720px));
	max-height: calc(100vh - 40px);
	overflow: auto;
}

.cbd-modal-dialog .cbd-diagnosis {
	margin-top: 0;
	margin-bottom: 0;
}

.cbd-modal-close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 999px;
	background: rgba(17, 24, 39, 0.78);
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

body.cbd-modal-open {
	overflow: hidden;
}

.cbd-fixed-cta {
	position: fixed;
	z-index: 99998;
	bottom: 18px;
	min-width: 132px;
	max-width: calc(100vw - 32px);
	padding: 0.85em 1.1em;
	border: 0;
	border-radius: 999px;
	background: #1f2937;
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 10px 28px rgba(31, 41, 55, 0.24);
}

.cbd-fixed-cta--bottom_right { right: 18px; }
.cbd-fixed-cta--bottom_left { left: 18px; }
.cbd-fixed-cta--bottom_center {
	left: 50%;
	transform: translateX(-50%);
}

.cbd-fixed-cta:hover,
.cbd-fixed-cta:focus {
	filter: brightness(0.96);
	outline: 2px solid rgba(91, 124, 250, 0.3);
	outline-offset: 3px;
}

@media (min-width: 783px) {
	.cbd-device-mobile,
	.cbd-fixed-cta--mobile-only {
		display: none !important;
	}
}

@media (max-width: 782px) {
	.cbd-device-pc {
		display: none !important;
	}
	.cbd-modal {
		padding: 12px;
	}
	.cbd-modal-dialog {
		max-height: calc(100vh - 24px);
	}
	.cbd-fixed-cta {
		bottom: 14px;
	}
}

/* ===== 影（card_shadow：ラッパー全体に適用） ===== */
.cbd-card-shadow-none { box-shadow: none; }
.cbd-card-shadow-soft { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }
.cbd-card-shadow-medium { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.1); }
.cbd-card-shadow-strong { box-shadow: 0 14px 38px rgba(0, 0, 0, 0.16); }

/* ===== スマホ ===== */
@media (max-width: 480px) {
	.cbd-diagnosis {
		margin: 1em auto;
	}
	.cbd-diagnosis .cbd-button {
		padding: 0.95em 1em;
	}
}

/* =============================================================
 * SWIPE MODE（スワイプ診断）
 * すべて .cbd-diagnosis 配下に限定している。
 * ============================================================= */
.cbd-diagnosis--swipe {
	padding: 0;
	overflow: hidden;
}

.cbd-diagnosis .cbd-swipe {
	position: relative;
}

.cbd-diagnosis .cbd-swipe-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.cbd-diagnosis .cbd-swipe-track::-webkit-scrollbar {
	display: none;
}

.cbd-diagnosis .cbd-slide {
	flex: 0 0 100%;
	width: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

.cbd-diagnosis .cbd-slide-inner {
	padding: var(--cbd-inner-padding, 24px);
}

/* 診断・結果スライドはカード風に */
.cbd-diagnosis .cbd-slide--diagnosis .cbd-slide-inner,
.cbd-diagnosis .cbd-slide--result .cbd-slide-inner {
	min-height: 240px;
	background: var(--cbd-card-background-color, #ffffff);
	border-radius: var(--cbd-card-radius, 16px);
	margin: 12px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* 画像エリア */
.cbd-diagnosis .cbd-slide-image {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: var(--cbd-image-radius, 12px);
	background: #f0f0f0;
}

.cbd-diagnosis .cbd-slide-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cbd-diagnosis .cbd-ratio-1-1 { aspect-ratio: 1 / 1; }
.cbd-diagnosis .cbd-ratio-4-5 { aspect-ratio: 4 / 5; }
.cbd-diagnosis .cbd-ratio-9-16 { aspect-ratio: 9 / 16; }
.cbd-diagnosis .cbd-ratio-16-9 { aspect-ratio: 16 / 9; }

.cbd-diagnosis .cbd-slide-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
	font-size: 0.9em;
	background: #f0f0f0;
}

.cbd-diagnosis .cbd-slide-title {
	margin: 0.9em 0 0.4em;
	font-size: 1.25em;
	line-height: 1.5;
	font-weight: 700;
	color: var(--cbd-text-color, #222222);
}

.cbd-diagnosis .cbd-slide-body {
	margin: 0;
	color: var(--cbd-muted-text-color, #555555);
	line-height: 1.9;
}

/* スライド内テキスト位置（画像スライドのみ） */
.cbd-text-align-left .cbd-slide--image .cbd-slide-inner { text-align: left; }
.cbd-text-align-center .cbd-slide--image .cbd-slide-inner { text-align: center; }
.cbd-text-align-right .cbd-slide--image .cbd-slide-inner { text-align: right; }

/* 画像影（image_shadow） */
.cbd-image-shadow-none .cbd-slide-image { box-shadow: none; }
.cbd-image-shadow-soft .cbd-slide-image { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); }
.cbd-image-shadow-medium .cbd-slide-image { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12); }
.cbd-image-shadow-strong .cbd-slide-image { box-shadow: 0 14px 38px rgba(0, 0, 0, 0.18); }

/* ドット */
.cbd-diagnosis .cbd-swipe-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 12px 0 14px;
}

.cbd-diagnosis .cbd-swipe-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #cfcfcf;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease, width 0.15s ease;
}

.cbd-diagnosis .cbd-swipe-dot--active {
	background: var(--cbd-accent-color, #5b7cfa);
	transform: scale(1.2);
	width: 20px;
	border-radius: 4px;
}

/* 前後ボタン（控えめに、邪魔にならない位置） */
.cbd-diagnosis .cbd-swipe-arrow {
	position: absolute;
	top: 38%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	opacity: 0.8;
}

.cbd-diagnosis .cbd-swipe-arrow--prev { left: 10px; }
.cbd-diagnosis .cbd-swipe-arrow--next { right: 10px; }

.cbd-diagnosis .cbd-swipe-arrow:hover,
.cbd-diagnosis .cbd-swipe-arrow:focus {
	background: rgba(0, 0, 0, 0.62);
	opacity: 1;
	outline: none;
}

.cbd-diagnosis .cbd-swipe-arrow:disabled {
	opacity: 0.25;
	cursor: default;
	pointer-events: none;
}

/* 結果ロック・読み込み */
.cbd-diagnosis .cbd-result-locked,
.cbd-diagnosis .cbd-result-loading {
	text-align: center;
	padding: 1.5em 0.5em;
}

.cbd-diagnosis .cbd-result-locked .cbd-result-title {
	color: var(--cbd-accent-color, #5b7cfa);
}

.cbd-diagnosis .cbd-result-locked::before {
	content: "🔒";
	display: block;
	font-size: 1.8em;
	margin-bottom: 0.4em;
	opacity: 0.7;
}

.cbd-diagnosis .cbd-loading-text {
	margin: 0.9em 0 0;
	color: var(--cbd-muted-text-color, #666666);
	font-weight: 600;
}

.cbd-diagnosis .cbd-spinner {
	width: 34px;
	height: 34px;
	margin: 0 auto;
	border: 3px solid rgba(0, 0, 0, 0.1);
	border-top-color: var(--cbd-accent-color, #5b7cfa);
	border-radius: 50%;
	animation: cbd-spin 0.8s linear infinite;
}

@keyframes cbd-spin {
	to { transform: rotate(360deg); }
}

/* loading の控えめな装飾：点滅ドット＋ローディングバー（CSSのみ） */
.cbd-diagnosis .cbd-loading-dots {
	display: inline-flex;
	gap: 5px;
	margin-top: 0.6em;
}
.cbd-diagnosis .cbd-loading-dots span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cbd-accent-color, #5b7cfa);
	opacity: 0.4;
	animation: cbd-blink 1s infinite ease-in-out;
}
.cbd-diagnosis .cbd-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.cbd-diagnosis .cbd-loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes cbd-blink {
	0%, 100% { opacity: 0.3; transform: translateY(0); }
	50% { opacity: 1; transform: translateY(-2px); }
}

.cbd-diagnosis .cbd-loading-bar {
	width: 160px;
	max-width: 70%;
	height: 4px;
	margin: 0.9em auto 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.08);
	overflow: hidden;
}
.cbd-diagnosis .cbd-loading-bar::after {
	content: "";
	display: block;
	width: 40%;
	height: 100%;
	border-radius: 999px;
	background: var(--cbd-accent-color, #5b7cfa);
	animation: cbd-loading-slide 1.1s infinite ease-in-out;
}

@keyframes cbd-loading-slide {
	0% { transform: translateX(-110%); }
	100% { transform: translateX(310%); }
}

/* =============================================================
 * TEMPLATES（テンプレートごとの雰囲気差分）
 *
 * 重要：管理画面で設定した CSS変数（背景色・色・角丸・余白など）を最優先する。
 * テンプレートでは background / color / border-radius / padding を強く上書きせず、
 * 文字組み・文字間・見出しフォント・薄い影・罫線など装飾的な差分のみを与える。
 * ============================================================= */

/* card: カードの分離感を強める（背景色は管理画面設定を尊重） */
.cbd-template-card .cbd-question-text,
.cbd-template-card .cbd-result-title { letter-spacing: 0.01em; }
.cbd-template-card .cbd-choice-style-card .cbd-choice { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }

/* lp: 行動喚起を強める。プライマリボタンを大きく */
.cbd-template-lp .cbd-button--primary {
	padding: 1.05em 1.2em;
	font-size: 1.05em;
	letter-spacing: 0.02em;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.cbd-template-lp .cbd-result-title { font-size: 1.4em; }

/* story: 画像前面・装飾控えめ */
.cbd-template-story .cbd-slide-title { font-size: 1.35em; }
.cbd-template-story .cbd-slide-body { font-size: 1.02em; }

/* fortune: 柔らかく幻想的（背景色は管理画面設定を尊重し、装飾のみ） */
.cbd-template-fortune .cbd-title,
.cbd-template-fortune .cbd-result-title {
	font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
	letter-spacing: 0.02em;
}
.cbd-template-fortune .cbd-button,
.cbd-template-fortune .cbd-choice-style-card .cbd-choice {
	box-shadow: 0 3px 14px rgba(140, 100, 220, 0.12);
}

/* beauty: 清潔感・余白広め・細い罫線 */
.cbd-template-beauty .cbd-slide-body,
.cbd-template-beauty .cbd-description { letter-spacing: 0.02em; }
.cbd-template-beauty .cbd-button { font-weight: 600; }
.cbd-template-beauty .cbd-question-text { font-weight: 600; }

/* education: 読みやすさ重視 */
.cbd-template-education.cbd-diagnosis { line-height: 1.85; }
.cbd-template-education .cbd-question-text { font-size: 1.25em; }
.cbd-template-education .cbd-result-body { font-size: 1.02em; }

/* premium: 落ち着いた高級感（背景色は管理画面設定を尊重し、字組み・罫線のみ） */
.cbd-template-premium .cbd-title,
.cbd-template-premium .cbd-result-title {
	font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
	letter-spacing: 0.04em;
}
.cbd-template-premium .cbd-button--primary { letter-spacing: 0.06em; }
.cbd-template-premium .cbd-choice-style-card .cbd-choice { border-width: 1px; box-shadow: none; }

/* =============================================================
 * ANIMATION（v0.4.0：入場アニメ・選択モーション・loading演出）
 * すべて .cbd-diagnosis 配下に限定している。
 * 速度は CSS変数 --cbd-anim-duration（ラッパー inline）で制御。
 * 無効化：ラッパーに cbd-anim-disabled / cbd-no-anim を付与、または
 *         prefers-reduced-motion（cbd-respect-reduced-motion 時）。
 * ============================================================= */

/* 入場アニメーション（描画時に cbd-anim + cbd-enter-* を付与、次フレームで cbd-anim-in） */
.cbd-diagnosis .cbd-anim {
	transition: opacity var(--cbd-anim-duration, 280ms) ease, transform var(--cbd-anim-duration, 280ms) ease;
	will-change: opacity, transform;
}

.cbd-diagnosis .cbd-enter-none { opacity: 1; transform: none; transition: none; }

.cbd-diagnosis .cbd-enter-fade { opacity: 0; }
.cbd-diagnosis .cbd-enter-fade.cbd-anim-in { opacity: 1; }

.cbd-diagnosis .cbd-enter-slide { opacity: 0; transform: translateY(14px); }
.cbd-diagnosis .cbd-enter-slide.cbd-anim-in { opacity: 1; transform: none; }

.cbd-diagnosis .cbd-enter-pop { opacity: 0; transform: scale(0.95); }
.cbd-diagnosis .cbd-enter-pop.cbd-anim-in { opacity: 1; transform: none; }

.cbd-diagnosis .cbd-enter-fade-up { opacity: 0; transform: translateY(18px); }
.cbd-diagnosis .cbd-enter-fade-up.cbd-anim-in { opacity: 1; transform: none; }

.cbd-diagnosis .cbd-enter-zoom { opacity: 0; transform: scale(0.9); }
.cbd-diagnosis .cbd-enter-zoom.cbd-anim-in { opacity: 1; transform: none; }

/* 選択肢モーション */
.cbd-diagnosis .cbd-choice {
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.18s ease, transform 0.12s ease;
}
.cbd-diagnosis .cbd-choice--selected {
	border-color: var(--cbd-accent-color, #5b7cfa);
}
.cbd-diagnosis .cbd-choice--motion-press.cbd-choice--selected {
	transform: scale(0.97);
}
.cbd-diagnosis .cbd-choice--motion-glow.cbd-choice--selected {
	box-shadow: 0 0 0 3px rgba(91, 124, 250, 0.18), 0 4px 16px rgba(91, 124, 250, 0.25);
	animation: cbd-choice-glow 0.6s ease;
}
@keyframes cbd-choice-glow {
	0% { box-shadow: 0 0 0 0 rgba(91, 124, 250, 0.0); }
	60% { box-shadow: 0 0 0 4px rgba(91, 124, 250, 0.22), 0 6px 20px rgba(91, 124, 250, 0.28); }
	100% { box-shadow: 0 0 0 3px rgba(91, 124, 250, 0.18), 0 4px 16px rgba(91, 124, 250, 0.25); }
}
.cbd-diagnosis .cbd-choice--motion-check.cbd-choice--selected {
	position: relative;
	border-color: var(--cbd-accent-color, #5b7cfa);
}
.cbd-diagnosis .cbd-choice--motion-check.cbd-choice--selected::after {
	content: "✓";
	position: absolute;
	top: 50%;
	right: 0.8em;
	transform: translateY(-50%);
	color: var(--cbd-accent-color, #5b7cfa);
	font-weight: 700;
}

/* loading 演出：pulse（dots / bar は SWIPE セクションで定義済み） */
.cbd-diagnosis .cbd-loading-pulse {
	width: 90px;
	height: 90px;
	margin: 0.4em auto 0;
	border-radius: 16px;
	background: var(--cbd-accent-color, #5b7cfa);
	opacity: 0.85;
	animation: cbd-pulse 1.1s ease-in-out infinite;
}
@keyframes cbd-pulse {
	0%, 100% { transform: scale(0.9); opacity: 0.5; }
	50% { transform: scale(1.05); opacity: 0.9; }
}

/* 無効化（cbd-anim-disabled / cbd-no-anim） */
.cbd-diagnosis.cbd-anim-disabled .cbd-anim,
.cbd-diagnosis.cbd-no-anim .cbd-anim {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}
.cbd-diagnosis.cbd-anim-disabled .cbd-loading-dots span,
.cbd-diagnosis.cbd-anim-disabled .cbd-loading-bar::after,
.cbd-diagnosis.cbd-anim-disabled .cbd-loading-pulse,
.cbd-diagnosis.cbd-anim-disabled .cbd-spinner {
	animation: none !important;
}

/* prefers-reduced-motion 尊重（respect_reduced_motion 有効時） */
@media (prefers-reduced-motion: reduce) {
	.cbd-diagnosis.cbd-respect-reduced-motion *,
	.cbd-diagnosis.cbd-respect-reduced-motion *::before,
	.cbd-diagnosis.cbd-respect-reduced-motion *::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
	.cbd-diagnosis.cbd-respect-reduced-motion .cbd-anim {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* v0.7.0: 診断ロジック拡張（自由入力・ランキング・概要） */
.cbd-diagnosis .cbd-question-help {
	margin: 0 0 14px;
	color: var(--cbd-muted-text-color);
	font-size: 0.95em;
}

.cbd-diagnosis .cbd-free-text {
	display: grid;
	gap: 10px;
	margin: 16px 0;
}

.cbd-diagnosis .cbd-free-text-input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--cbd-border-color);
	border-radius: min(var(--cbd-button-radius), 14px);
	background: #fff;
	color: var(--cbd-text-color);
	font-size: 16px;
}

.cbd-diagnosis .cbd-free-text-input:focus {
	outline: 2px solid rgba(91, 124, 250, 0.22);
	border-color: var(--cbd-accent-color);
}

.cbd-diagnosis .cbd-input-error {
	margin: 0;
	color: #b42318;
	font-size: 0.92em;
}

.cbd-diagnosis .cbd-result-ranking {
	display: grid;
	gap: 16px;
}

.cbd-diagnosis .cbd-ranking-top,
.cbd-diagnosis .cbd-ranking-list {
	display: grid;
	gap: 12px;
}

.cbd-diagnosis .cbd-ranking-rank {
	margin: 0;
	color: var(--cbd-accent-color);
	font-weight: 700;
}

.cbd-diagnosis .cbd-ranking-score {
	margin: 0;
	color: var(--cbd-muted-text-color);
	font-weight: 700;
}

.cbd-diagnosis .cbd-ranking-card {
	padding: 14px;
	border: 1px solid var(--cbd-border-color);
	border-radius: min(var(--cbd-card-radius), 12px);
	background: var(--cbd-card-background-color);
}

.cbd-diagnosis .cbd-ranking-title {
	margin: 4px 0 6px;
	color: var(--cbd-text-color);
	font-size: 1.05em;
}

.cbd-diagnosis .cbd-ranking-lead {
	margin: 8px 0;
	color: var(--cbd-muted-text-color);
}

/* v1.2.0: アンケート連携 */
.cbd-diagnosis .cbd-poll-integration {
	margin: 1.25em 0;
	padding: 1em;
	border: 1px solid var(--cbd-border-color);
	border-radius: min(var(--cbd-card-radius), 12px);
	background: var(--cbd-card-background-color);
	background: color-mix(in srgb, var(--cbd-card-background-color) 94%, var(--cbd-accent-color) 6%);
}

.cbd-diagnosis .cbd-poll-integration-title {
	margin: 0 0 0.75em;
	font-size: 1.05em;
	color: var(--cbd-text-color);
}

.cbd-diagnosis .cbd-poll-gate {
	display: flex;
	flex-direction: column;
	gap: 0.9em;
}

.cbd-diagnosis .cbd-slide--poll .cbd-slide-inner {
	justify-content: center;
	gap: 0.9em;
}

.cbd-diagnosis .cbd-slide--poll .cbd-poll-integration {
	width: 100%;
	margin: 0;
	text-align: left;
}

.cbd-diagnosis .cbd-swipe-poll-continue {
	align-self: center;
	margin-top: 0.25em;
}

.cbd-diagnosis .cbd-poll--embedded {
	margin: 0;
}

.cbd-diagnosis .cbd-logic-summary {
	margin: 16px 0;
	padding: 12px 14px;
	border: 1px solid var(--cbd-border-color);
	border-radius: min(var(--cbd-card-radius), 12px);
	background: var(--cbd-card-background-color);
}

.cbd-diagnosis .cbd-score-summary,
.cbd-diagnosis .cbd-tag-summary {
	margin: 0;
	padding-left: 1.2em;
	color: var(--cbd-muted-text-color);
}