@charset "utf-8";

/* =========================================================
   메인 상단 배너 높이 + 채움 (2026-06-29)
   ---------------------------------------------------------
   ● main.css / main_app.css 를 "덮어쓰지" 않고 이 파일에서만 조정.
   ● 모바일 배너(m_only: main_m_slide), PC 배너(pc_only: main_slide) 둘 다.
   ● 높이 200px 고정 + 슬라이드 폭 강제 100% + 사진 영역 꽉 채움.
   ● 슬라이더(swiper) 초기화 여부와 무관하게, 슬라이드 한 칸이 사진 원래
     크기로 쪼그라들어 작게 뜨던 문제를 폭 강제(100%)로 해결.
   ● <img> 라서 height 를 %가 아니라 200px 로 직접 고정.
     object-fit:cover 라 비율 유지(넘침만 크롭, 안 찌그러짐).
   ● 되돌리기: index.php 의 이 파일 <link> 한 줄만 지우면 원상복구.
   ========================================================= */

/* 박스 높이 200px 고정 (슬라이더 컨테이너/래퍼/슬라이드) */
.app-mode .slider_container.m_only .topswiper,
.app-mode .slider_container.pc_only .topswiper,
.app-mode .slider_container.m_only .swiper-wrapper,
.app-mode .slider_container.pc_only .swiper-wrapper,
.app-mode .slider_container.m_only .swiper-slide,
.app-mode .slider_container.pc_only .swiper-slide {
  height: 200px !important;
}

/* 슬라이드 한 칸을 컨테이너 폭만큼 강제로 채움
   (슬라이더 미초기화 시 사진 원래 크기로 작아지던 것을 방지) */
.app-mode .slider_container.m_only .swiper-slide,
.app-mode .slider_container.pc_only .swiper-slide {
  width: 100% !important;
}

/* 슬라이드가 좌우로 새지 않게 클립 */
.app-mode .slider_container.m_only,
.app-mode .slider_container.pc_only,
.app-mode .slider_container.m_only .topswiper,
.app-mode .slider_container.pc_only .topswiper {
  overflow: hidden;
}

/* 사진이 영역을 가로·세로 꽉 채우게 */
.app-mode .slider_container.m_only .swiper-slide img,
.app-mode .slider_container.pc_only .swiper-slide img {
  display: block !important;
  width: 100% !important;
  height: 200px !important;            /* %가 아닌 고정값 → 확실히 채움 */
  object-fit: cover !important;        /* 비율 유지·넘침만 크롭(찌그러짐 없음) */
  object-position: center center !important;
}