/* Frontend [box-list] – full-width rows, unified padding */

.bn-boxes {
	--bn-pad: 16px;
	--bn-pad-block: 14px;
	--bn-gap: 12px;
	display: flex;
	flex-direction: column;
	gap: var(--bn-gap);
	margin: 1.5rem 0 2rem;
}

.bn-box-card {
	display: grid;
	grid-template-columns: minmax(160px, 220px) 1fr;
	gap: 0;
	align-items: stretch;
	background: #fff;
	border: 1px solid #e8ecf1;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 47, 108, 0.06);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bn-box-card:hover {
	border-color: #c5d0de;
	box-shadow: 0 2px 12px rgba(0, 47, 108, 0.1);
}

.bn-box-side {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--bn-gap);
	padding: var(--bn-pad);
	text-align: center;
	border-right: 1px solid #eef2f7;
	background: #fafbfc;
}

.bn-box-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 56px;
	padding: 0;
	text-decoration: none;
	background-color: transparent;
	box-sizing: border-box;
}

.bn-box-logo img {
	max-width: 100%;
	max-height: 30px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.bn-box-logo-text {
	color: #1a1a1a;
	font-weight: 700;
	font-size: 0.9rem;
}

.bn-box-name {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	color: #002f6c;
}

.bn-box-name a {
	color: inherit;
	text-decoration: none;
}

.bn-box-name a:hover {
	color: #004a9f;
}

.bn-box-body {
	display: grid;
	grid-template-columns: minmax(120px, 0.7fr) 1fr 1fr;
	gap: var(--bn-gap);
	padding: var(--bn-pad);
	align-items: stretch;
}

.bn-box-best,
.bn-box-block {
	margin: 0;
	padding: var(--bn-pad-block);
	border: 0;
	border-radius: 8px;
	box-sizing: border-box;
}

.bn-box-best {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	background: #fff4d6;
}

.bn-box-best-label,
.bn-box-label {
	display: block;
	margin: 0;
	font-size: 0.72rem;
	font-weight: 600;
	color: #1a1a1a;
	line-height: 1.3;
}

.bn-box-label {
	font-weight: 700;
	margin-bottom: 6px;
}

.bn-box-best-value {
	display: block;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
	color: #1a1a1a;
}

.bn-box-block p {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.45;
	color: #1a1a1a;
}

.bn-box-block--pro {
	background: #eaf8ef;
}

.bn-box-block--pro .bn-box-label {
	color: #166534;
}

.bn-box-block--pro .bn-box-label::before {
	content: "+";
	display: inline-block;
	width: 1.1em;
	margin-right: 4px;
	font-weight: 800;
}

.bn-box-block--con {
	background: #fff1e8;
}

.bn-box-block--con .bn-box-label {
	color: #9a3412;
}

.bn-box-block--con .bn-box-label::before {
	content: "–";
	display: inline-block;
	width: 1.1em;
	margin-right: 4px;
	font-weight: 800;
}

@media (max-width: 900px) {
	.bn-box-body {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.bn-box-card {
		grid-template-columns: 1fr;
	}

	.bn-box-side {
		border-right: 0;
		border-bottom: 1px solid #eef2f7;
	}
}