/* CLS(레이아웃 시프트) 예약 레이어 — style.css 원본 무수정, 뒤에 additive 로드.
 * 목적: 이미지/캐러셀이 로드·초기화되며 뒤 콘텐츠(footer 등)를 밀어내는 시프트 제거.
 * 원칙: 폭은 유동(반응형) 유지, 비율만 미리 잡아 로드 전부터 높이를 확정. 픽셀 무변. */

/* ── 히어로 클립 캐러셀 ────────────────────────────────────────────────
 * Swiper 초기화 전 여러 클립 슬라이드가 세로로 쌓여 히어로가 커졌다가, 초기화되며
 * 1슬라이드(16:9)로 붕괴 → footer 가 위로 밀리던 CLS(모바일 0.55/데스크톱 0.24).
 * 히어로는 데스크톱 800x450·모바일 390x219 로 항상 16:9 → 컨테이너에 16:9 예약 + 초과분 clip.
 * 클립 썸네일이 16:9 라 object-fit:cover 로 채워도 크롭 없음(현재 표시와 동일). */
.wrap_page.main .hero_swiper { aspect-ratio: 16 / 9; overflow: hidden; }
.wrap_page.main .hero_swiper > .swiper-wrapper { height: 100%; }
.wrap_page.main .hero_swiper .swiper-slide,
.wrap_page.main .hero_swiper .swiper-slide .link_cont { height: 100%; }
.wrap_page.main .hero_swiper .swiper-slide .link_cont img { width: 100%; height: 100%; object-fit: cover; }

/* ── 히어로 사이드 배너 캐러셀(데스크톱 전용, 모바일은 미표시) ──────────────
 * 원본 히어로 레이아웃은 @media (min-width:1080px) 에서만 적용 → 동일 브레이크포인트로 예약.
 * 데스크톱 실측 280x450(세로) 비율로 예약, 배너 로드/초기화 붕괴 방지. */
@media (min-width: 1080px) {
  .wrap_page.main .hero_side { aspect-ratio: 280 / 450; overflow: hidden; }
  .wrap_page.main .hero_side > .swiper-wrapper { height: 100%; }
  .wrap_page.main .hero_side .swiper-slide,
  .wrap_page.main .hero_side .swiper-slide .link_cont { height: 100%; }
  .wrap_page.main .hero_side .swiper-slide .link_cont img { width: 100%; height: 100%; object-fit: cover; }
}