/* ================================
   MIDBANNER (1200 x 250)
   /static/rightme/css/components/midbanner.css
   ================================ */

/* 공통 레이아웃 */

.midbanner {
  padding: 32px 0;
}

.midbanner__inner {
  width: 100%;
  display: flex;
  justify-content: center;
}

/* 배너 이미지 래퍼 : 1200px 고정 폭, 가운데 정렬 */

.midbanner__image-wrap {
  position: relative;
  width: 100%;
  max-width: 1200px;
}

/* 기본 이미지 스타일 */

.midbanner__image-wrap img,
.midbanner__inner > img {
  display: block;
  width: 100%;
  height: auto;
}

/* ================================
   뷰티 / 커뮤니티 50:50 클릭영역
   (midbanner--split 사용)
   ================================ */

.midbanner--split .midbanner__image-wrap {
  position: relative;
}

.midbanner__hit {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  cursor: pointer;
}

.midbanner__hit--left {
  left: 0;
}

.midbanner__hit--right {
  right: 0;
}

/* ================================
   타입별 여유 여백 (필요시만 사용)
   ================================ */

.midbanner--beauty-community {
  /* 뷰티/커뮤니티 영역 전용 여백 등 필요하면 여기서 */
}

.midbanner--recommended {
  /* 추천 병원 배너 여백 등 필요하면 여기서 */
  padding: 24px 0 0 !important;
}

/* 반응형 살짝 여유 (모바일에서 위아래 간격만 조금 줄이기) */

@media (max-width: 768px) {
  .midbanner {
    padding: 24px 0;
  }

}