/* ══════════════════════════════════════
   메인 히어로 배너 슬라이드 — 텍스트가 이미지 안에 이미 디자인된 "통이미지" 배너를
   .main-hero__inner(1180px) 폭 안에서 여백 없이 꽉 채워 노출(2026-07-23).
   관리자가 "히어로 슬라이드 관리"에서 슬라이드를 활성화했을 때만 로드됨.
   슬라이드별 텍스트+이미지 분할 방식은 components/home/sections-hero-legacy.php에 보관.
══════════════════════════════════════ */

.main-hero__slider-wrap {
	position: relative;
}

.main-hero__slider.swiper {
	overflow: hidden;
}

.main-hero__slider .swiper-wrapper {
	align-items: flex-start;
}

.main-hero__slider .swiper-slide {
	height: auto;
}

/* 점(dot) 대신 진행률 바 방식 — 슬라이드 아래(크림색 배경)에 가늘고 긴 트랙 +
   진한 색 채움으로 표시(2026-07-23).
   Swiper 기본 CSS의 `.swiper-horizontal > .swiper-pagination-progressbar`
   (specificity 0,0,2,0)가 position:absolute; top:0; left:0; height:4px 를
   강제해서, 단일 클래스(.main-hero__slider-pagination, 0,0,1,0)로는 이겨낼 수
   없어 슬라이드 위에 겹쳐 뜨는 이상한 모습이 됐었다 — 같은 specificity(2클래스)로
   맞춰서 뒤에 로드되는 이 파일이 우선하도록 수정. fill 자식은 absolute라
   부모가 position:relative여야 이 트랙 안에서만 채워진다(static이면 상위
   .main-hero__slider-wrap 기준으로 커져서 또 이상해짐). */
.main-hero__slider-pagination.swiper-pagination-progressbar {
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	height: 8px;
	background: rgba(141, 100, 80, 0.15);
	overflow: hidden;
}

.main-hero__slider-pagination.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	background: var(--hyoo-accent-dark, #8d6450);
}

/* 배너 이미지가 컨테이너 폭을 여백 없이 꽉 채우므로(2026-07-23), 이전/다음 버튼은
   이미지 좌우 가장자리 위에 떠 있는 형태로 배치. 처음엔 흰 원형 배경+그림자였다가
   반투명 배경으로 바꿨었는데(2026-07-24), 이후 요청으로 원형 테두리/배경을 완전히
   없애고 화살표만 크게 보이는 형태로 다시 변경(2026-07-24) — 배경이 없어져서 다양한
   사진 위에서도 잘 보이도록 화살표를 흰색+그림자로 처리. 버튼 자체 크기(44px)는
   시각적으로는 안 보이지만 터치 히트 영역으로 유지(접근성). */
.main-hero__slider-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	border: none;
	background: none;
	cursor: pointer;
}

.main-hero__slider-nav:focus-visible { outline: 2px solid var(--hyoo-accent-dark); outline-offset: 2px; }

.main-hero__slider-nav::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	border-top: 4px solid #fff;
	border-right: 4px solid #fff;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
	transition: transform 0.15s;
}

.main-hero__slider-prev { left: 16px; }
.main-hero__slider-prev::before { transform: translate(-25%, -50%) rotate(-135deg); }
.main-hero__slider-prev:hover::before { transform: translate(-40%, -50%) rotate(-135deg); }

.main-hero__slider-next { right: 16px; }
.main-hero__slider-next::before { transform: translate(-75%, -50%) rotate(45deg); }
.main-hero__slider-next:hover::before { transform: translate(-60%, -50%) rotate(45deg); }

.main-hero__slider-nav.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

@media (max-width: 768px) {
	.main-hero__slider-nav { width: 28px; height: 28px; }
}