/* === ベース === */
.step .list {
	width: 100% !important;
	display: block !important;
}
:root {
	--brand: #ea0000;
	--brand-dark: #c70000;
	--ink: #222;
	--muted: #666;
	--card: #fff;
	--line: #eee;
	--ring: rgba(234, 0, 0, .18);
}
.bn-sec {
	margin: 1.5rem 0 2.5rem
}
.bn-ttl {
	margin: 0 0 .75rem;
	padding: .6rem 1rem;
	color: #fff;
	font-weight: 700;
	border-radius: 12px;
	background: linear-gradient(180deg, #fb5b5b, var(--brand));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.bn-notes {
	margin: .25rem 0 1rem;
	padding-left: 1.2rem;
	display: grid;
	gap: .35rem
}
.bn-notes li {
	list-style: '▼ ';
	color: var(--muted)
}
.bn-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}
.bn-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 1rem;
	box-shadow: 0 8px 18px rgba(0, 0, 0, .05);
}
.bn-head {
	display: flex;
	justify-content: flex-start;
	margin-bottom: .6rem
}
.bn-size {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	padding: 0 .75rem;
	border-radius: 999px;
	background: linear-gradient(180deg, #ffd0d0, #ffb3b3);
	border: 1px solid #ff8c8c;
	color: #8a0000;
	font-weight: 800;
	font-size: .85rem
}
.bn-thumb {
	display: block;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid #f0f0f0;
	background: #fafafa
}
.bn-thumb img {
	display: block;
	height: auto
}
.bn-actions {
	display: flex;
	gap: .5rem;
	align-items: center;
	justify-content: flex-start;
	margin-top: .6rem
}
.bn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 38px;
	padding: 0 1rem;
	border-radius: 10px;
	border: 1px solid transparent;
	font-weight: 700;
	cursor: pointer;
	transition: .2s ease;
	text-decoration: none
}
.bn-btn--dl {
	background: linear-gradient(180deg, var(--brand), var(--brand-dark));
	color: #fff;
	border-color: var(--brand-dark);
	box-shadow: 0 6px 16px var(--ring), inset 0 1px 0 rgba(255, 255, 255, .25)
}
.bn-btn--dl:hover {
	transform: translateY(1px)
}
.bn-btn--copy {
	background: #fff;
	color: var(--brand);
	border-color: #ffd3d3
}
.bn-btn--copy:hover {
	background: #fff5f5
}
.bn-url {
	width: 100%;
	margin-top: .5rem;
	padding: .55rem .7rem;
	border: 1px solid #e8e8e8;
	border-radius: 8px;
	font-size: .9rem;
	color: #555;
	background: #fcfcfc
}
@media (max-width:800px) {
	.bn-grid {
		grid-template-columns: 1fr
	}
}