@charset "utf-8";

/* =========================================================
   data-slider (정적 나열 버전)
   - PC: 2열  / Mobile: 1열
   - 행 간격(세로/가로 gap) 최소화
   - 남아있는 Owl CSS 영향 무력화
   ========================================================= */

/* 컨테이너 (여러 이름 대비) */
.static-grid-banner,
.static-banner,
ul.basic-banner.static-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;    /* 모바일: 1열 */
  gap: 6px;                      /* 모바일 간격 (필요 시 4px~8px로 조절) */
}

/* 태블릿/PC: 2열 유지 + 간격 조금 넉넉히 */
@media (min-width: 768px) {
  .static-grid-banner,
  .static-banner,
  ul.basic-banner.static-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;                   /* PC 간격 (필요 시 8px~12px로 조절) */
  }
}

/* 아이템 기본 여백 제거 */
.static-grid-banner .item,
.static-banner .item,
ul.basic-banner.static-grid .item {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

/* 이미지 래퍼 공백/줄간격 제거 */
.static-grid-banner .img-wrap,
.static-banner .img-wrap,
ul.basic-banner.static-grid .img-wrap {
  width: 100%;
  height: auto;
  line-height: 0;                /* 이미지 아래 공백 제거 */
  overflow: hidden;
}

/* 이미지 꽉 차게 + 비율 유지 */
.static-grid-banner .img-item img,
.static-banner .img-item img,
ul.basic-banner.static-grid .img-item img {
  display: block;
  width: 100% !important;
  height: auto !important;
  object-fit: contain;
  margin: 0 !important;
  border-radius: 6px;            /* 필요 없으면 삭제 */
}

/* ----------------------------------------------------------------
   Owl Carousel 관련 스타일 무력화 (스크립트 안 써도 css가 남아있는 경우 대비)
   ---------------------------------------------------------------- */
.static-grid-banner.owl-carousel,
.static-banner.owl-carousel,
ul.basic-banner.static-grid.owl-carousel {
  display: grid !important;            /* owl이 display 바꾸는 것 방지 */
}

/* owl 내부 래퍼들 해체 효과 (컨텐츠만 보이게) */
.static-grid-banner .owl-stage-outer,
.static-grid-banner .owl-stage,
.static-grid-banner .owl-item,
.static-banner .owl-stage-outer,
.static-banner .owl-stage,
.static-banner .owl-item,
ul.basic-banner.static-grid .owl-stage-outer,
ul.basic-banner.static-grid .owl-stage,
ul.basic-banner.static-grid .owl-item {
  display: contents !important;        /* 자식만 남기고 자신의 박스는 제거 */
  width: auto !important;
  height: auto !important;
  transform: none !important;
}

/* 네비/도트 숨김 */
.static-grid-banner .owl-nav,
.static-grid-banner .owl-dots,
.static-banner .owl-nav,
.static-banner .owl-dots,
ul.basic-banner.static-grid .owl-nav,
ul.basic-banner.static-grid .owl-dots {
  display: none !important;
}

/* 혹시 남아있는 기존 .basic-banner 여백 제거 (안전빵) */
.basic-banner .item { 
  margin: 0 !important; 
  padding: 0 !important; 
}

/* ============================
   data-slider 배너, 정적 나열 공통 여백/레이아웃 교정
   ============================ */

/* 배너 UL의 기본 여백 제거 */
.basic-banner,
.static-grid-banner { margin:0 !important; padding:0 !important; }

/* 각 배너 아이템의 아래 여백 최소화 */
.basic-banner .item,
.static-grid-banner .item { margin:0 !important; }

/* 오울용 비율고정(absolute) 제거 → 이미지 자연 높이로 */
.basic-banner .img-wrap,
.static-grid-banner .img-wrap {
  position: static !important;
  padding: 0 !important;      /* inline padding-bottom 비율값 무시 */
  height: auto !important;
  overflow: visible !important;
}
.basic-banner .img-wrap .img-item,
.static-grid-banner .img-wrap .img-item {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
}
.basic-banner .img-wrap img,
.static-grid-banner .img-wrap img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* 그리드 간격(세로/가로)만 딱 원하는 만큼만 */
.static-grid-banner { 
  display: grid !important;
  grid-template-columns: 1fr;     /* 모바일: 1열 */
  row-gap: 8px;
  column-gap: 0;
}
@media (min-width: 992px) {
  .static-grid-banner {
    grid-template-columns: 1fr 1fr;  /* PC: 2열 */
    column-gap: 12px;
    row-gap: 8px;
  }
}