/* 사용자 사이트 배너 슬롯 기본 스타일 (컨텐츠 다양화 2026-06-14)
   대상: _banner.html slot fragment 의 .front-banner-* 컴포넌트
   변경: 시스템 최소 기본값 제공 — 이미지 미등록 시에도 슬롯 영역이 확보되도록(납작해짐 방지)
   이유: front-banner.js 는 슬라이더 동작만 하고 스타일이 없어, 이미지 없는 placeholder 가 텍스트 1줄(27px)로 눌렸음
   ※ 전환효과/높이/여백 등 디자인은 디자이너가 app.css 또는 이 파일에서 자유롭게 override */

.front-banner-slot {
	width: 100%;
	height: 70px;
	background: #fff;
}

.front-banner-item {
	display: block;
	text-decoration: none;
}

/* 이미지 등록 시 — 슬롯 폭에 맞춰 표시 (비율 유지) */
.front-banner-item img {
	display: block;
	width: 100%;
	height: auto;
}

/* 흐르는 로고 마퀴 (CSS 애니메이션, 디자이너 요청 2026-06-26)
   - 트랙을 2배로 깔고 translateX(-50%) 무한 반복 → 끊김 없는 흐름
   - hover 시 animation-play-state:paused 로 즉시 멈춤, 벗어나면 자동 재개
   - 흐름속도는 JS 가 트랙 animation-duration 인라인 지정(로고 수 비례) */
.front-banner-slot.is-marquee{ overflow: hidden; position: relative; }
.front-banner-slot .front-banner-track{ display: flex; width: max-content; will-change: transform; animation: bannerMarquee linear infinite; }
/* hover · 정지버튼(.is-paused) 시 멈춤 */
.front-banner-slot.is-marquee:hover .front-banner-track,
.front-banner-slot.is-marquee.is-paused .front-banner-track{ animation-play-state: paused; }
/* 접근성: OS 모션 최소화 설정 시 흐름 정지 (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce){
	.front-banner-slot .front-banner-track{ animation: none !important; }
}
/* 자동 흐름 정지/재생 버튼 (WCAG 2.2.2) */
.front-banner-pause{ position: absolute; top: 50%; right: .5rem; transform: translateY(-50%); z-index: 3; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; cursor: pointer; }
.front-banner-pause:hover{ background: rgba(0,0,0,.72); }
.front-banner-pause:focus-visible{ outline: 2px solid #5b7cff; outline-offset: 2px; }
.front-banner-pause .material-symbols-outlined{ font-size: 1.15rem; }
.front-banner-slot .front-banner-track .front-banner-item{ flex: 0 0 auto; margin-right: var(--gap, 40px); display: flex; align-items: center; justify-content: center; }
.front-banner-slot .front-banner-track img{ width: auto; max-width: none; height: 30px; object-fit: contain; }
@keyframes bannerMarquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* 로고 그리드(BDSP003)인데 1장만 등록된 경우 — 흐름 없이 작게 가운데 정렬(마퀴와 톤 통일) */
.front-banner-slot.is-logo-single{ display: flex; justify-content: center; align-items: center; }
.front-banner-slot.is-logo-single .front-banner-item img{ width: auto; max-width: 100%; height: 30px; object-fit: contain; }

/* 이미지 미등록 배너 placeholder — 영역 확보. 이미지를 올리면 위 img 가 대신 표시됨 */
.front-banner-noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 140px;
	background: #f1f3f5;
	color: #868e96;
	font-size: .95rem;
	letter-spacing: .02em;
	border: 1px dashed #ced4da;
}