/* =========================================================
   main.css  (메인 페이지 전용)
   - 레이아웃/헤더/공통 컴포넌트 CSS와 중복 제거
   - 모바일 가로 스크롤 유발 요소 배제
   ========================================================= */


/* =========================================================
   1. 메인 비주얼 반응형 이미지 제어
   ---------------------------------------------------------
   RW  : PC
   RTB : Tablet
   RMB : Mobile
   (display만 제어, width/position 관여 안 함)
   ========================================================= */

.RW,
.RTB,
.RMB {
  display: none;
}

/* PC */
@media (min-width: 1200px) {
  .RW { display: block; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1199px) {
  .RTB { display: block; }
}

/* Mobile */
@media (max-width: 767px) {
  .RMB { display: block; }
}


/* =========================================================
   2. 메인 비주얼(Swiper) 기본 안전 처리
   ---------------------------------------------------------
   - Swiper 내부 요소가 화면 밖으로 튀는 것 방지
   ========================================================= */

.mainVisual { width:100%; }
.mainVisual .swiper { width:100%; overflow:hidden; }  /* ✅ 여기만 hidden */
.mainVisual .swiper-wrapper { width:100%; }           /* ❌ overflow 금지 */
.mainVisual .swiper-slide { width:100%; }             /* 필요시만 */

.mainVisual img {
  width: 100%;
  height: auto;
  display: block;
}


/* =========================================================
   3. 메인 언론보도 썸네일 (16:9 고정 크롭)
   ========================================================= */

.main-news-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #eee;
}

.main-news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* =========================================================
   4. 메인 언론보도 그리드
   ---------------------------------------------------------
   PC / Tablet : 2열
   Mobile      : 1열
   ========================================================= */

#main-news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

@media (max-width: 767px) {
  #main-news-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}


/* =========================================================
   5. 섹션 하단 버튼 중앙 정렬
   ========================================================= */

.section-actions--center {
  display: flex;
  justify-content: center;
}

.section-actions--center .btn {
  margin: 0;
}


/* =========================================================
   6. 메인 브랜드 메시지 영역
   ---------------------------------------------------------
   (레이아웃만 담당, 폰트/색상은 components.css 가정)
   ========================================================= */

.section-brand {
  text-align: center;
}

.section-brand-inner {
  max-width: 720px;
  margin: 0 auto;
}

.brand-quote {
  font-size: 28px;
  line-height: 1.4;
  margin-bottom: 20px;
}

.brand-text {
  font-size: 15px;
  line-height: 1.7;
  color: #555;
}


/* =========================================================
   7. 시술 전 / 후 이미지 그리드
   ========================================================= */

.headline-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.headline-item img {
  width: 100%;
  display: block;
}

@media (max-width: 767px) {
  .headline-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}


/* =========================================================
   8. 장비 소개 배너
   ---------------------------------------------------------
   이미지 + CTA 버튼 오버레이
   ========================================================= */

.section-equipment {
  padding: 0;
}

.equipment-banner {
  position: relative;
  overflow: hidden;
}

.equipment-banner img {
  width: 100%;
  display: block;
}

.equipment-cta {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
}


/* =========================================================
   9. 모바일 가로 스크롤 최종 안전장치
   ---------------------------------------------------------
   (원인은 header에서 제거했지만, 메인에서도 방어)
   ========================================================= */

@media (max-width: 767px) {
  body {
    overflow-x: hidden;
  }
}