/* =============================================================
   Jet Stream Pro — YES/NO チャート
   CSS カスタムプロパティは variables.css で定義済み
   ============================================================= */

/* ── テーマ非依存リセット ── */
.js-yesno,
.js-yesno * {
	box-sizing: border-box;
}

/* ── ラッパー ── */
.js-yesno {
	--_yesno-max-w: 640px;

	position: relative;
	width: 100%;
	max-width: var( --_yesno-max-w );
	margin-inline: auto;
	padding: var( --js-space-md, 1.5rem ) var( --js-space-sm, 1rem );
	font-family: var( --js-font-base, sans-serif );
}

/* ── プログレスバー ── */
.js-yesno__progress {
	height: 6px;
	background: var( --js-color-border, #e2e8f0 );
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: var( --js-space-md, 1.5rem );
}

.js-yesno__progress-bar {
	height: 100%;
	background: linear-gradient(
		90deg,
		var( --js-color-primary, #1e3a8a ) 0%,
		var( --js-color-accent,  #f59e0b ) 100%
	);
	border-radius: 999px;
	transition: width var( --js-transition, 0.3s ease );
}

/* ── チャートタイトル ── */
.js-yesno__title {
	text-align: center;
	font-size: 1.15rem;
	font-weight: 700;
	color: var( --js-color-dark, #0f172a );
	margin: 0 0 var( --js-space-md, 1.5rem );
	line-height: 1.5;
}

/* ── カード共通 ── */
.js-yesno__card {
	background: var( --js-color-white, #ffffff );
	border: 1px solid var( --js-color-border, #e2e8f0 );
	border-radius: var( --js-radius-lg, 16px );
	box-shadow: var( --js-shadow-md, 0 4px 16px rgba(0,0,0,.08) );
	padding: var( --js-space-lg, 2rem ) var( --js-space-md, 1.5rem );

	/* フェードイン用 */
	opacity: 0;
	transform: translateY( 12px );
	transition:
		opacity   var( --js-transition, 0.3s ease ),
		transform var( --js-transition, 0.3s ease );
}

.js-yesno__card.js-yesno--visible {
	opacity: 1;
	transform: translateY( 0 );
}

/* ── ステップ表示 ── */
.js-yesno__step {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var( --js-color-white, #ffffff );
	background: var( --js-color-primary, #1e3a8a );
	border-radius: 999px;
	padding: 2px 12px;
	margin: 0 0 var( --js-space-sm, 0.75rem );
}

.js-yesno__step-total {
	opacity: 0.65;
	font-weight: 400;
}

/* ── 質問テキスト ── */
.js-yesno__question-text {
	font-size: 1.15rem;
	font-weight: 700;
	color: var( --js-color-dark, #0f172a );
	line-height: 1.7;
	margin: 0 0 var( --js-space-md, 1.5rem );
	text-align: center;
}

/* ── YES/NO ボタン群 ── */
.js-yesno__buttons {
	display: flex;
	gap: var( --js-space-sm, 0.75rem );
	justify-content: center;
}

.js-yesno__btn {
	flex: 1;
	max-width: 220px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 24px;
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	border: none;
	border-radius: var( --js-radius-lg, 16px );
	cursor: pointer;
	transition:
		background  var( --js-transition, 0.3s ease ),
		transform   var( --js-transition, 0.3s ease ),
		box-shadow  var( --js-transition, 0.3s ease );
}

.js-yesno__btn:hover,
.js-yesno__btn:focus-visible {
	transform: translateY( -2px );
	box-shadow: var( --js-shadow-lg, 0 8px 24px rgba(0,0,0,.14) );
	outline: none;
}

.js-yesno__btn:active {
	transform: translateY( 0 );
}

/* YES ボタン — プライマリカラー塗りつぶし */
.js-yesno__btn--yes {
	background: var( --js-color-primary, #1e3a8a );
	color: var( --js-color-white, #ffffff );
}

.js-yesno__btn--yes:hover,
.js-yesno__btn--yes:focus-visible {
	background: var( --js-color-primary-dark, #152a63 );
}

/* NO ボタン — ライトグレー背景 */
.js-yesno__btn--no {
	background: var( --js-color-light, #f8fafc );
	color: var( --js-color-dark, #0f172a );
	border: 2px solid var( --js-color-border, #e2e8f0 );
}

.js-yesno__btn--no:hover,
.js-yesno__btn--no:focus-visible {
	background: var( --js-color-border, #e2e8f0 );
}

.js-yesno__btn-icon {
	font-size: 1rem;
	line-height: 1;
}

/* ── 結果カード（アクセントカラーの上ボーダー） ── */
.js-yesno__result {
	border-top: 4px solid var( --js-color-accent, #f59e0b );
}

.js-yesno__result-label {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --js-color-accent, #f59e0b );
	border: 2px solid var( --js-color-accent, #f59e0b );
	border-radius: 999px;
	padding: 2px 14px;
	margin: 0 0 var( --js-space-sm, 0.75rem );
}

.js-yesno__result-image {
	display: block;
	width: 100%;
	max-height: 200px;
	object-fit: cover;
	border-radius: var( --js-radius, 6px );
	margin: 0 0 var( --js-space-sm, 0.75rem );
}

.js-yesno__result-text {
	font-size: 1rem;
	line-height: 1.8;
	color: var( --js-color-dark, #0f172a );
	margin: 0 0 0.5rem;
	text-align: center;
	white-space: pre-wrap;
}

.js-yesno__result-sub {
	font-size: 0.875rem;
	line-height: 1.8;
	color: var( --js-color-gray, #64748b );
	margin: 0 0 var( --js-space-md, 1.5rem );
	text-align: center;
	white-space: pre-wrap;
}

/* ── CTA ボタン ── */
.js-yesno__cta {
	display: block;
	width: 100%;
	padding: 14px 24px;
	text-align: center;
	font-size: 1.05rem;
	font-weight: 700;
	color: var( --js-color-white, #ffffff );
	background: var( --js-color-accent, #f59e0b );
	border-radius: var( --js-radius-lg, 16px );
	text-decoration: none;
	transition:
		background  var( --js-transition, 0.3s ease ),
		transform   var( --js-transition, 0.3s ease ),
		box-shadow  var( --js-transition, 0.3s ease );
	margin-bottom: var( --js-space-sm, 0.75rem );
}

.js-yesno__cta--secondary {
	background: transparent;
	color: var( --js-color-primary, #0057D9 );
	border: 2px solid var( --js-color-primary, #0057D9 );
}

.js-yesno__cta:hover,
.js-yesno__cta:focus-visible {
	background: var( --js-color-accent-dark, #d97706 );
	transform: translateY( -2px );
	box-shadow: var( --js-shadow-lg, 0 8px 24px rgba(0,0,0,.14) );
	outline: none;
	color: var( --js-color-white, #ffffff );
}

.js-yesno__cta--secondary:hover,
.js-yesno__cta--secondary:focus-visible {
	background: var( --js-color-primary, #0057D9 );
	color: var( --js-color-white, #ffffff );
}

/* ── リスタートボタン ── */
.js-yesno__restart {
	display: block;
	width: 100%;
	padding: 10px;
	font-size: 0.875rem;
	color: var( --js-color-gray, #64748b );
	background: none;
	border: 1px solid var( --js-color-border, #e2e8f0 );
	border-radius: var( --js-radius-lg, 16px );
	cursor: pointer;
	transition:
		background var( --js-transition, 0.3s ease ),
		color      var( --js-transition, 0.3s ease );
}

.js-yesno__restart:hover,
.js-yesno__restart:focus-visible {
	background: var( --js-color-light, #f8fafc );
	color: var( --js-color-dark, #0f172a );
	outline: none;
}

/* ── レスポンシブ（〜 480px） ── */
@media ( max-width: 480px ) {
	.js-yesno__buttons {
		flex-direction: column;
		align-items: stretch;
	}

	.js-yesno__btn {
		max-width: 100%;
	}

	.js-yesno__question-text {
		font-size: 1rem;
	}
}