/* S/N比視覚化ウィジェット（旧WP子テーマ [myp_sn_ratio] ショートコードから移植 2026-08-06）
   元: swell_child/inc/myp-shortcodes.php myp_sn_ratio_shortcode()
   変更点: ウィジェット内の h1/h2/h3 を div 化したのに伴いセレクタを class 指定に変更 */
.sn-ratio-container {
	max-width: 100%;
	margin: 2em 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
}

.sn-ratio-title {
	font-size: 1.8em;
	font-weight: bold;
	margin-bottom: 0.5em;
	text-align: center;
}

.sn-ratio-subtitle {
	text-align: center;
	margin-bottom: 1.5em;
	opacity: 0.7;
	font-size: 0.9em;
}

.sn-ratio-scenario {
	background: rgba(102, 126, 234, 0.1);
	padding: 1.2em;
	border-radius: 8px;
	margin-bottom: 1.5em;
}

.sn-ratio-scenario-title {
	color: #ffffff;
	font-weight: bold;
	font-size: 1.1em;
	margin-bottom: 0.8em;
	margin-top: 0;
}

.sn-ratio-main {
	display: flex;
	gap: 20px;
	margin-bottom: 1.5em;
	align-items: stretch;
}

.sn-ratio-controls {
	display: flex;
	flex-direction: column;
	gap: 15px;
	min-width: 80px;
	justify-content: center;
}

.sn-ratio-slider-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sn-ratio-slider-label {
	font-size: 0.85em;
	font-weight: bold;
	margin-bottom: 0.5em;
	writing-mode: vertical-rl;
	text-orientation: mixed;
	white-space: nowrap;
}

.sn-ratio-slider-value {
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 0.8em;
	color: #667eea;
}

.sn-ratio-vertical-slider {
	-webkit-appearance: slider-vertical;
	appearance: slider-vertical;
	writing-mode: bt-lr;
	width: 8px;
	height: 350px;
	background: #ddd;
	border-radius: 4px;
	outline: none;
	margin: 0 auto;
}

.sn-ratio-vertical-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #667eea;
	cursor: pointer;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.sn-ratio-vertical-slider::-moz-range-thumb {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #667eea;
	cursor: pointer;
	border: none;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.sn-ratio-graph-wrapper {
	flex: 1;
	min-width: 0;
}

.sn-ratio-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1em;
	margin-bottom: 0;
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	z-index: 10;
}

.sn-ratio-stat-item {
	background: rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(2px);
	padding: 1em;
	border-radius: 8px;
	text-align: center;
	border: 1px solid rgba(255, 255, 255, 0.2);
	opacity: 0.95;
}

.sn-ratio-stat-label {
	font-size: 0.85em;
	opacity: 0.9;
	margin-bottom: 0.3em;
	color: #e0e0e0;
}

.sn-ratio-stat-value {
	font-size: 1.5em;
	font-weight: bold;
	color: #fff;
}

.sn-ratio-graph-container {
	background: #1a1a1a;
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 1em;
	position: relative;
}

.sn-ratio-canvas {
	width: 100%;
	height: 350px;
	display: block;
}

.sn-ratio-legend {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 1em;
	flex-wrap: wrap;
	font-size: 0.85em;
}

.sn-ratio-legend-item {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #e0e0e0;
}

.sn-ratio-legend-line {
	width: 30px;
	height: 3px;
	border-radius: 2px;
}

.sn-ratio-explanation {
	background: rgba(76, 175, 80, 0.1);
	padding: 1.2em;
	border-radius: 8px;
	border-left: 4px solid #4CAF50;
	line-height: 1.7;
}

.sn-ratio-explanation-title {
	color: #2e7d32;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0.8em;
	font-size: 1.1em;
}

.sn-ratio-quality {
	display: inline-block;
	padding: 0.3em 1em;
	border-radius: 20px;
	font-weight: bold;
	font-size: 0.9em;
}

.sn-ratio-quality-low {
	background: #ffcdd2;
	color: #c62828;
}

.sn-ratio-quality-medium {
	background: #fff9c4;
	color: #f57f17;
}

.sn-ratio-quality-high {
	background: #c8e6c9;
	color: #2e7d32;
}

@media (max-width: 768px) {
	.sn-ratio-main {
		flex-direction: column;
	}

	.sn-ratio-controls {
		flex-direction: column;
		align-items: center;
		min-width: 0;
		gap: 10px;
		margin-top: 1em;
	}

	.sn-ratio-slider-wrapper {
		flex-direction: column;
		width: 100%;
	}

	.sn-ratio-slider-label {
		writing-mode: horizontal-tb;
		text-orientation: mixed;
		order: 2;
		margin-top: 0.5em;
		margin-bottom: 0;
	}

	.sn-ratio-slider-value {
		order: -1;
		margin-bottom: 0.5em;
	}

	.sn-ratio-vertical-slider {
		-webkit-appearance: none;
		appearance: none;
		writing-mode: horizontal-tb;
		height: 8px;
		width: 100%;
		max-width: 300px;
		order: 1;
	}

	.sn-ratio-vertical-slider::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		width: 24px;
		height: 24px;
	}

	.sn-ratio-vertical-slider::-moz-range-thumb {
		width: 24px;
		height: 24px;
	}

	/* スマホ時に統計情報をグラフ内上部に3列グリッドで埋め込む */
	.sn-ratio-stats {
		position: absolute;
		top: 10px;
		left: 10px;
		right: 10px;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 0.4em;
		margin-bottom: 0;
		z-index: 10;
	}

	.sn-ratio-stat-item {
		background: rgba(0, 0, 0, 0.3);
		backdrop-filter: blur(2px);
		padding: 0.4em 0.5em;
		border-radius: 4px;
		text-align: center;
		border: 1px solid rgba(255, 255, 255, 0.2);
		opacity: 0.95;
	}

	.sn-ratio-stat-label {
		font-size: 0.65em;
		opacity: 0.9;
		margin-bottom: 0.2em;
		color: #e0e0e0;
	}

	.sn-ratio-stat-value {
		font-size: 1em;
		font-weight: bold;
		color: #fff;
	}

	.sn-ratio-quality {
		font-size: 0.7em;
		padding: 0.2em 0.5em;
	}
}