/**
 * Review Summary Box Tool - Frontend CSS
 *
 * 口コミ総評ボックスのスタイル
 *
 * 構成:
 *   1. CSS変数(エルプラスのデザインシステムに準拠)
 *   2. ボックス全体
 *   3. ヘッダー(ロゴ | タイトル | スコア)
 *   4. セクション(良い・気になる・おすすめ)
 *   5. フッター(出典)
 *   6. レスポンシブ(モバイル対応)
 */

/* ============================================================
 * 1. CSS変数
 * ============================================================ */

.rsbt-box {
	--rsbt-primary: #0A9298;
	--rsbt-primary-dark: #077a80;
	--rsbt-primary-50: #F2FAFA;
	--rsbt-coral: #E07B5A;
	--rsbt-coral-dark: #C4613F;
	--rsbt-coral-50: #FBF2EF;
	--rsbt-star: #f0ad4e;
	--rsbt-text: #1C1917;
	--rsbt-text-2: #57534E;
	--rsbt-text-3: #A8A29E;
	--rsbt-border: #EBEFEF;
	--rsbt-border-soft: #F4F4F2;
	--rsbt-bg-soft: #FCFCFB;
}

/* ============================================================
 * 2. ボックス全体
 * ============================================================ */

.rsbt-box {
	font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
	color: var(--rsbt-text);
	line-height: 1.7;
	background: #fff;
	border-radius: 16px;
	border: 1px solid var(--rsbt-border);
	box-shadow: 0 1px 2px rgba(0,0,0,.02), 0 8px 24px rgba(10,146,152,0.04);
	overflow: hidden;
	margin: 1.5em 0;
	box-sizing: border-box;
}

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

/* ============================================================
 * 3. ヘッダー(ロゴ | タイトル | スコア)
 * ============================================================ */

.rsbt-head {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 22px 26px;
	border-bottom: 1px solid var(--rsbt-border-soft);
	background: linear-gradient(to bottom, #FAFCFC, #fff);
}

/* ロゴ */
.rsbt-logo {
	width: 64px;
	height: 64px;
	border-radius: 14px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.rsbt-logo--text {
	background: linear-gradient(145deg, #0A9298, #077a80);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.5px;
	line-height: 1.15;
	text-align: center;
	padding: 4px;
}

.rsbt-logo--image {
	background: #fff;
	border: 1px solid var(--rsbt-border);
	padding: 4px;
}

.rsbt-logo--image img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
}

/* タイトル */
.rsbt-title-wrap {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.rsbt-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--rsbt-text);
	letter-spacing: 0.02em;
	line-height: 1.4;
	margin: 0;
}

/* スコア */
.rsbt-score {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	padding-left: 18px;
	border-left: 1px solid var(--rsbt-border);
}

.rsbt-score-num {
	font-size: 28px;
	font-weight: 700;
	color: var(--rsbt-primary-dark);
	line-height: 1;
	font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
	letter-spacing: -1px;
}

.rsbt-stars {
	display: inline-flex;
	gap: 1px;
	align-items: center;
}

.rsbt-stars svg {
	display: block;
	flex-shrink: 0;
}

.rsbt-score-count {
	font-size: 10px;
	color: var(--rsbt-text-3);
	letter-spacing: 0.5px;
	margin-top: 2px;
}

/* ============================================================
 * 4. セクション(良い・気になる・おすすめ)
 * ============================================================ */

.rsbt-section {
	padding: 20px 26px;
	border-bottom: 1px solid var(--rsbt-border-soft);
}

.rsbt-section:last-of-type {
	border-bottom: none;
}

/* セクションラベル */
.rsbt-section-label {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.rsbt-section-label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(to right, var(--rsbt-border), transparent);
}

/* タイプ別の色 */
.rsbt-section--good .rsbt-section-label {
	color: var(--rsbt-primary);
}
.rsbt-section--good .rsbt-section-label::after {
	background: linear-gradient(to right, var(--rsbt-primary-50), transparent);
}

.rsbt-section--bad .rsbt-section-label {
	color: var(--rsbt-coral-dark);
}
.rsbt-section--bad .rsbt-section-label::after {
	background: linear-gradient(to right, var(--rsbt-coral-50), transparent);
}

.rsbt-section--recommend .rsbt-section-label {
	color: var(--rsbt-primary-dark);
}
.rsbt-section--recommend .rsbt-section-label::after {
	background: linear-gradient(to right, var(--rsbt-primary-50), transparent);
}

/* リスト */
.rsbt-list {
	list-style: none;
	padding: 0;
	margin: 0;
	text-align: left;
}

.rsbt-list li {
	font-size: 14px;
	padding: 4px 0 4px 14px;
	color: var(--rsbt-text);
	line-height: 1.7;
	position: relative;
	margin: 0;
}

.rsbt-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14px;
	width: 6px;
	height: 1px;
	background: var(--rsbt-text-3);
}

/* ============================================================
 * 5. フッター(出典)
 * ============================================================ */

.rsbt-footer {
	font-size: 11px;
	color: var(--rsbt-text-3);
	padding: 12px 26px;
	border-top: 1px solid var(--rsbt-border-soft);
	text-align: center;
	background: var(--rsbt-bg-soft);
	letter-spacing: 0.05em;
}

/* ============================================================
 * 6. レスポンシブ
 * ============================================================ */

/* タブレット以下 */
@media (max-width: 768px) {
	.rsbt-head {
		gap: 12px;
		padding: 16px 18px;
	}

	.rsbt-logo {
		width: 56px;
		height: 56px;
	}

	.rsbt-logo--text {
		font-size: 12px;
	}

	.rsbt-title {
		font-size: 13px;
	}

	.rsbt-score {
		padding-left: 12px;
	}

	.rsbt-score-num {
		font-size: 22px;
	}

	.rsbt-stars svg {
		width: 9px !important;
		height: 9px !important;
	}

	.rsbt-section {
		padding: 16px 20px;
	}

	.rsbt-section-label {
		font-size: 12px;
	}

	.rsbt-list li {
		font-size: 13px;
	}

	.rsbt-footer {
		padding: 10px 20px;
		font-size: 10px;
	}
}

/* スマホ:横並びを維持しつつ更にコンパクト化 */
@media (max-width: 480px) {
	.rsbt-head {
		gap: 10px;
		padding: 14px 14px;
	}

	.rsbt-logo {
		width: 48px;
		height: 48px;
		border-radius: 12px;
	}

	.rsbt-logo--text {
		font-size: 11px;
		letter-spacing: -0.5px;
	}

	.rsbt-title {
		font-size: 12px;
		line-height: 1.35;
	}

	.rsbt-score {
		padding-left: 10px;
		gap: 2px;
	}

	.rsbt-score-num {
		font-size: 20px;
	}

	.rsbt-score-count {
		font-size: 9px;
	}

	.rsbt-stars svg {
		width: 8px !important;
		height: 8px !important;
	}
}

/* ============================================================
 * 7. アクセシビリティ
 * ============================================================ */

.rsbt-box:focus-within {
	outline: 2px solid var(--rsbt-primary-50);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.rsbt-box {
		transition: none !important;
	}
}