/* 손짓 사이드바 배너 — 프론트 스타일
   테마(Handlove) 토큰에 맞춰 색과 간격을 잡았습니다.
   --line #ECE7DF / --brand-ink #4E837B / --paper-2 #F6F2EC */

.hlb-banners {
	margin: 0 0 32px;
}

.hlb-banners__title {
	font-size: 15.5px;
	font-weight: 800;
	color: #4E837B;
	margin: 0 0 12px;
	padding: 0 0 9px;
	border-bottom: 1px solid #ECE7DF;
	letter-spacing: -.01em;
	line-height: 1.4;
}

.hlb-banners__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* 테마의 .widget li 규칙(밑줄·패딩)이 배너 항목에 묻지 않도록 되돌립니다. */
.hlb-banners .hlb-banners__item {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: inherit;
	list-style: none;
}

.hlb-banners__link {
	display: block;
	line-height: 0;
	border: 1px solid #ECE7DF;
	border-radius: 10px;
	overflow: hidden;
	background: #F6F2EC;
	text-decoration: none;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.hlb-banners a.hlb-banners__link:hover,
.hlb-banners a.hlb-banners__link:focus-visible {
	border-color: #D9D2C7;
	box-shadow: 0 6px 18px rgba(58, 55, 51, .13);
	transform: translateY(-1px);
}

.hlb-banners__img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border: 0;
	border-radius: 0;
}

/* 테마 style.css에 아래 규칙이 있어 900px 이하에서 사이드바 위젯이 모두 숨겨집니다.
   @media (max-width:900px){ .sidebar .widget:not(.cat-widget){display:none;} }
   같은 명시도이므로 배너만 확실히 되살리기 위해 !important 를 씁니다.
   테마 파일은 수정하지 않습니다.

   900px 이하에서는 사이드바가 화면 전체 폭이 됩니다. 배너를 가로로 늘어놓으면
   비율이 다른 이미지끼리 아랫선이 어긋나고, 이를 맞추려면 이미지를 잘라내야 합니다.
   잘림을 만들지 않기 위해 세로 1열을 유지하고 폭만 제한합니다. */
@media (max-width: 900px) {
	.sidebar .widget.hlb-banners {
		display: block !important;
	}

	.hlb-banners__list {
		max-width: 420px;
	}
}