@charset "utf-8";

/* (기존 유지) 네비 버튼 - 실제 사용 안해도 호환 위해 남김 */
.basic-banner .owl-nav {
	position:absolute;
	right:0;
	top:-3.75rem;
	z-index:1;
}
.basic-banner .owl-nav button {
	width:2.5rem;
	padding:0 !important;
	margin:0 !important;
	border:1px solid #ddd !important;
	background:#fff !important;
	color:#ccc !important;
}
.basic-banner .owl-nav button.owl-prev {
	border-right:0 !important;
}

/* ====== 고정형 배너 레이아웃 ====== */
.basic-banner{
	/* CSS Grid: 반응형 컬럼/간격은 위젯에서 CSS 변수로 주입 */
	display:grid;
	grid-template-columns: repeat(var(--cols-xl,4), minmax(0,1fr));
	column-gap: var(--gap-x,12px);
	row-gap: var(--gap-y,15px);
	padding-left: var(--pad-x,0);
	padding-right: var(--pad-x,0);
	list-style:none;
	margin:0;
}
@media (max-width:1199px){
	.basic-banner{ grid-template-columns: repeat(var(--cols-lg,4), minmax(0,1fr)); }
}
@media (max-width:991px){
	.basic-banner{ grid-template-columns: repeat(var(--cols-md,4), minmax(0,1fr)); }
}
@media (max-width:767px){
	.basic-banner{ grid-template-columns: repeat(var(--cols-sm,3), minmax(0,1fr)); }
}
@media (max-width:575px){
	.basic-banner{ grid-template-columns: repeat(var(--cols-xs,2), minmax(0,1fr)); }
}

.basic-banner .item{ width:100%; }
.basic-banner .img-wrap{ position:relative; width:100%; }
.basic-banner .img-item{
	position:absolute; inset:0;
	display:flex; align-items:center; justify-content:center;
}
.basic-banner .img-item img{
	width:100%; height:100%; object-fit:cover; display:block;
	border-radius:6px;
}

/* 외곽 그림자 강도 */
.basic-banner .item.shadow-sm .img-item img{ box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.basic-banner .item.shadow-md .img-item img{ box-shadow: 0 6px 20px rgba(0,0,0,.22); }
.basic-banner .item.shadow-lg .img-item img{ box-shadow: 0 10px 30px rgba(0,0,0,.28); }

/* 내부 그림자(오버레이) */
.basic-banner .item.has-inshadow .img-item .in-shadow{
	position:absolute; inset:0; pointer-events:none;
	box-shadow: inset 0 0 40px rgba(0,0,0,.25);
	border-radius:6px;
}

/* 캡션 */
.basic-banner .caption{
	position:absolute; left:0; right:0; bottom:0;
	padding:8px 10px;
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
	color:#fff; font-size:13px; line-height:1.45;
	border-bottom-left-radius:6px; border-bottom-right-radius:6px;
}
.basic-banner .caption .cap-inner.text-center{ text-align:center; }

.basic-banner.is-hover .caption{
	transform: translateY(100%);
	opacity: 0;
	transition: transform .35s ease, opacity .2s ease;
}
.basic-banner.is-hover .item:hover .caption{
	transform: translateY(0);
	opacity: 1;
}

/* 접근성: 숨김 */
.basic-banner .sr-only{
	position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;
}