/*
 * 商品詳細ページ用スタイル。
 *
 * デザイン方針（価格.comのような情報量型ではなく、
 * クラベル独自の「判断支援ページ」にする）を反映し、
 * 重要度：スペック一覧 ＜ AI評価 ＜ 比較判断 の順で
 * 視覚的な優先度（サイズ・余白・配色の強弱）をつける。
 */

.kuraberu-page {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 16px;
	font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
	color: #222;
	line-height: 1.7;
}

.kuraberu-site-header {
	padding: 16px 0;
	border-bottom: 1px solid #eee;
}

.kuraberu-site-title {
	font-weight: bold;
	font-size: 1.25rem;
	color: #1a1a1a;
	text-decoration: none;
}

/* ---- 商品基本情報 ---- */

.kuraberu-product-basic {
	display: flex;
	gap: 24px;
	margin: 24px 0;
}

.kuraberu-product-basic__image {
	flex: 0 0 240px;
}

.kuraberu-product-basic__image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.kuraberu-product-basic__meta h1 {
	font-size: 1.5rem;
	margin: 0 0 8px;
}

.kuraberu-product-basic__meta dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 12px;
	font-size: 0.9rem;
	color: #555;
}

/* ---- AI評価エリア（最優先：最も目立たせる） ---- */

.kuraberu-evaluation {
	background: #f4f8ff;
	border: 1px solid #d3e3fd;
	border-radius: 12px;
	padding: 24px;
	margin: 32px 0;
}

.kuraberu-evaluation__feature {
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: 16px;
}

.kuraberu-evaluation__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.kuraberu-evaluation__block h3 {
	font-size: 0.95rem;
	margin: 0 0 6px;
	color: #1a56db;
}

/* ---- 比較導線（次に優先：明確なCTA） ---- */

.kuraberu-compare-cta {
	text-align: center;
	margin: 32px 0;
}

.kuraberu-compare-cta a {
	display: inline-block;
	padding: 12px 28px;
	background: #1a56db;
	color: #fff;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
}

/* ---- スペック表（優先度は低め：控えめなデザイン） ---- */

.kuraberu-spec-table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0 32px;
	font-size: 0.9rem;
}

.kuraberu-spec-table th,
.kuraberu-spec-table td {
	padding: 8px 12px;
	border-bottom: 1px solid #eee;
	text-align: left;
}

.kuraberu-spec-table th {
	background: #fafafa;
	color: #666;
	font-weight: 500;
}

/* ---- スコア表示 ---- */

.kuraberu-score {
	margin: 24px 0;
}

.kuraberu-score__empty {
	color: #888;
	font-size: 0.9rem;
}

/* ---- 関連商品 ---- */

.kuraberu-related {
	margin: 32px 0;
}

.kuraberu-related__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 16px;
}

.kuraberu-product-card {
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 12px;
}

.kuraberu-product-card img {
	width: 100%;
	height: auto;
	border-radius: 6px;
	margin-bottom: 8px;
}

.kuraberu-product-card__name {
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0 0 4px;
}

.kuraberu-product-card__maker {
	font-size: 0.8rem;
	color: #777;
}

/* ---- 比較ページ ---- */

.kuraberu-compare__error {
	text-align: center;
	padding: 48px 0;
}

.kuraberu-compare__header h1 {
	text-align: center;
	font-size: 1.4rem;
}

.kuraberu-compare__products {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin: 24px 0;
}

.kuraberu-compare__product {
	flex: 1;
	text-align: center;
}

.kuraberu-compare__product img {
	max-width: 100%;
	border-radius: 8px;
}

.kuraberu-compare__vs {
	font-weight: bold;
	font-size: 1.2rem;
	color: #1a56db;
}

.kuraberu-compare-table {
	width: 100%;
	border-collapse: collapse;
	margin: 16px 0 32px;
	font-size: 0.9rem;
}

.kuraberu-compare-table th,
.kuraberu-compare-table td {
	padding: 8px 12px;
	border-bottom: 1px solid #eee;
	text-align: center;
}

.kuraberu-compare-table th:first-child,
.kuraberu-compare-table td:first-child {
	text-align: left;
	color: #666;
	width: 30%;
}

/* AI判断比較（最優先セクション） */

.kuraberu-compare-ai {
	background: #f4f8ff;
	border: 1px solid #d3e3fd;
	border-radius: 12px;
	padding: 24px;
	margin: 24px 0 32px;
}

.kuraberu-compare-ai__choose {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}

.kuraberu-compare-ai__choose--muted {
	opacity: 0.85;
}

.kuraberu-compare-ai__choose-column h3 {
	font-size: 1rem;
	margin: 0 0 6px;
	color: #1a56db;
}

.kuraberu-compare-ai__detail {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #d3e3fd;
}

.kuraberu-compare-ai__detail-column h4 {
	font-size: 0.85rem;
	margin: 8px 0 2px;
	color: #555;
}