/**
 * Coupang Partners Banner Styles
 * 쿠팡 파트너스 배너 반응형 스타일
 * 
 * 목적: CLS(Cumulative Layout Shift) 방지 및 반응형 레이아웃 구현
 * 요구사항: 2.1-2.5, 3.1-3.5, 4.1-4.5, 5.4, 6.4-6.6
 */

/* ========================================
   공통 배너 스타일
   ======================================== */

.cp-banner-slot {
  /* 레이아웃 */
  width: 100%;
  max-width: 680px;
  min-height: 140px; /* CLS 방지: 로딩 전 공간 예약 */
  height: 140px; /* 고정 높이 */

  /* 여백 및 정렬 */
  margin: 12px auto; /* 기본 여백 + 중앙 정렬 */

  /* Flexbox 중앙 정렬 */
  display: flex;
  align-items: center;
  justify-content: center;

  /* 오버플로우 제어 */
  overflow: hidden; /* 배너가 컨테이너를 벗어나지 않도록 */
}

/* 쿠팡 배너 iframe 기본 스타일 - 데스크톱/태블릿은 고정 너비 유지 */
.cp-banner-slot iframe {
  height: 140px !important;
}

/* ========================================
   위치별 특화 스타일
   ======================================== */

/* B 위치 (상단) 배너 */
.cp-banner-slot--top {
  margin-top: 8px;
  margin-bottom: 16px;
}

/* D 위치 (하단) 배너 */
.cp-banner-slot--bottom {
  margin-top: 16px;
  margin-bottom: 8px;
}

/* ========================================
   반응형 미디어 쿼리
   ======================================== */

/* 데스크톱 (1024px 이상) */
@media (min-width: 1024px) {
  .cp-banner-slot {
    width: 680px; /* 고정 너비 */
  }

  .cp-banner-slot iframe {
    width: 680px !important;
    max-width: 680px !important;
  }
}

/* 태블릿 (768px ~ 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .cp-banner-slot {
    width: 100%; /* 메인 컬럼 너비에 맞춤 */
    max-width: 680px;
  }

  .cp-banner-slot iframe {
    width: 680px !important;
    max-width: 680px !important;
  }
}

/* 모바일 (768px 미만) */
@media (max-width: 767px) {
  .cp-banner-slot {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0 8px; /* 좌우 여백 추가 */
  }

  .cp-banner-slot iframe {
    max-width: calc(100% - 16px) !important;
    width: calc(100% - 16px) !important;
  }
}

/* 작은 모바일 (480px 미만) - 여백 축소 */
@media (max-width: 480px) {
  .cp-banner-slot {
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 0 4px; /* 더 작은 여백 */
  }

  .cp-banner-slot iframe {
    max-width: calc(100% - 8px) !important;
    width: calc(100% - 8px) !important;
  }

  .cp-banner-slot--top {
    margin-top: 6px;
    margin-bottom: 12px;
  }

  .cp-banner-slot--bottom {
    margin-top: 12px;
    margin-bottom: 6px;
  }
}