/**
 * Diagnostic Tool CSS
 * アニメーションをカスタマイズ可能なスタイル定義
 */

/* ダイアログの基本スタイル */
.diag-dialog {
	/*	 padding: 2rem; */
	box-sizing: border-box;
	border: none;
	border-radius: 8px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	max-width: 600px;
	width: calc(100vw - 40px);
	/* ビューポート幅から余白を引いた幅 */
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* タブレット以上の画面サイズ */
@media (min-width: 768px) {
	.diag-dialog {
		width: 90vw;
		max-width: 600px;
	}
}

/* デスクトップサイズ */
@media (min-width: 1024px) {
	.diag-dialog {
		width: 600px;
	}
}

/* ダイアログが閉じている状態 */
.diag-dialog.diag-closed {
	opacity: 0;
	transform: scale(0.9);
}

/* ダイアログが開いている状態 */
.diag-dialog.diag-opened {
	opacity: 1;
	transform: scale(1);
}

/* 背景のぼかし効果 */
.diag-dialog::backdrop {
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
}

/* コンテンツラッパー */
.diag-content-wrapper {
	position: relative;
	min-height: 200px;
	transition: min-height 0.3s ease;
}

/* ヘッダー */
.diag-header {
	/*	 margin-bottom: 20px;
		padding-bottom: 15px;
		border-bottom: 1px solid #e0e0e0; */
}

/* フッター */
.diag-footer {
	/*	 margin-top: 20px;
		padding-top: 15px;
		border-top: 1px solid #e0e0e0;
		text-align: center; */
}

/* 設問と結果の共通スタイル */
.diag-question,
.diag-result {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 非表示状態 */
.diag-question.diag-hidden,
.diag-result.diag-hidden {
	display: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
}

/* 測定中（高さ計算用の一時表示） */
.diag-question.diag-measuring,
.diag-result.diag-measuring {
	display: block;
	position: relative;
	opacity: 0;
	visibility: hidden;
}

/* 表示状態（アニメーション前） */
.diag-question.diag-visible,
.diag-result.diag-visible {
	display: block;
	visibility: visible;
	position: absolute;
	opacity: 0;
	transform: translateY(20px);
}

/* 表示アニメーション */
.diag-question.diag-visible.diag-enter,
.diag-result.diag-visible.diag-enter {
	opacity: 1;
	transform: translateY(0);
}

/* 非表示アニメーション */
.diag-question.diag-exit,
.diag-result.diag-exit {
	opacity: 0;
	transform: translateY(-20px);
}

/**
	 * カスタマイズ可能なアニメーション設定
	 * 以下の変数を上書きすることでアニメーションをカスタマイズできます
	 */

/* アニメーション速度のカスタマイズ例 */
/*
	.diag-dialog {
		transition: opacity 0.5s ease, transform 0.5s ease;
	}

	.diag-question,
	.diag-result {
		transition: opacity 0.5s ease, transform 0.5s ease;
	}

	.diag-content-wrapper {
		transition: min-height 0.5s ease;
	}
	*/

/* アニメーション方向のカスタマイズ例（横からスライド） */
/*
	.diag-question,
	.diag-result {
		transform: translateX(-30px);
	}

	.diag-question.diag-enter,
	.diag-result.diag-enter {
		transform: translateX(0);
	}

	.diag-question.diag-exit,
	.diag-result.diag-exit {
		transform: translateX(30px);
	}
	*/

/* フェードのみのシンプルなアニメーション例 */
/*
	.diag-question,
	.diag-result {
		transform: none;
	}

	.diag-question.diag-exit,
	.diag-result.diag-exit {
		transform: none;
	}
	*/

/* バウンス効果の追加例 */
/*
	.diag-question.diag-enter,
	.diag-result.diag-enter {
		animation: diagBounceIn 0.5s ease;
	}

	@keyframes diagBounceIn {
		0% {
		opacity: 0;
		transform: translateY(20px);
		}
		50% {
		transform: translateY(-5px);
		}
		100% {
		opacity: 1;
		transform: translateY(0);
		}
	}
	*/

/* ズームイン効果の例 */
/*
	.diag-question,
	.diag-result {
		transform: scale(0.8);
	}

	.diag-question.diag-enter,
	.diag-result.diag-enter {
		transform: scale(1);
	}

	.diag-question.diag-exit,
	.diag-result.diag-exit {
		transform: scale(0.8);
	}
	*/