/* ══════════════════════════════════════════════
   SOSO — LAYOUT PATCH  v11
   히어로 50/50 대칭, 포스터 3:4 비율 기반
   검은 배경 없음, 잘림 없음
══════════════════════════════════════════════ */

/* 1. mainpage 패딩 */
.mainpage {
  padding-left:  10vw !important;
  padding-right: 10vw !important;
  overflow-x:    clip !important;
  overflow-y:    visible !important;
}

/* 2. section-hero — 포스터 비율로 높이 자동 결정 */
.section-hero {
  margin-left:  0 !important;
  margin-right: 0 !important;
  width:        100% !important;
  height:       auto !important;
  min-height:   unset !important;
  padding:      0 !important;
  overflow:     visible !important;
  box-sizing:   border-box !important;
}

/* 3. .hero — style.css width:100vw 무력화 */
.section-hero .hero {
  display:        flex !important;
  flex-direction: row !important;
  width:          100% !important;
  height:         auto !important;
  min-height:     unset !important;
  align-items:    stretch !important;
}

/* 4. 배너: 3:4 포스터 비율, cover로 검은 배경 없이 꽉 채움 */
.section-hero .hero-banner {
  flex:         0 0 50% !important;
  width:        50% !important;
  height:       auto !important;
  aspect-ratio: 3 / 4 !important;
}

/* 5. 그리드 패널: 배너 높이에 맞춰 늘어남 */
.section-hero .hero-grid-panel {
  flex:       1 1 50% !important;
  width:      50% !important;
  height:     auto !important;
  overflow-y: auto !important;
}

/* 6. .section 통일 */
.mainpage > .section {
  max-width:    100% !important;
  margin-left:  0 !important;
  margin-right: 0 !important;
  padding-top:    clamp(48px, 6vw, 80px) !important;
  padding-bottom: clamp(48px, 6vw, 80px) !important;
  border-top:     1px solid rgba(0,0,0,0.07) !important;
  min-height:     unset !important;
  overflow-x:     visible !important;
}

/* 7. 태블릿 (≤1024px) */
@media (max-width: 1024px) {
  .mainpage {
    padding-left:  5vw !important;
    padding-right: 5vw !important;
  }
}

/* 8. 모바일 (≤768px) — column 레이아웃 */
@media (max-width: 768px) {
  .mainpage {
    padding-left:  16px !important;
    padding-right: 16px !important;
    overflow-x:    hidden !important;
  }
  .section-hero {
    overflow: hidden !important;
  }
  .section-hero .hero {
    flex-direction: column !important;
  }
  /* 모바일 배너: 3:4 비율 유지, cover로 꽉 채움 */
  .section-hero .hero-banner {
    flex:         none !important;
    width:        100% !important;
    aspect-ratio: 3 / 4 !important;
  }
  /* 모바일: hg-thumb 1:1 복원 */
  .section-hero .hg-thumb {
    aspect-ratio: 1 / 1 !important;
  }
  .section-hero .hg-thumb--empty {
    aspect-ratio: 1 / 1 !important;
  }
  .section-hero .hero-grid-panel {
    flex:    none !important;
    width:   100% !important;
    padding: 16px !important;
  }
  .mainpage > .section {
    padding-top:    clamp(32px, 8vw, 48px) !important;
    padding-bottom: clamp(32px, 8vw, 48px) !important;
  }
}

/* 9. 소형 모바일 (≤480px) */
@media (max-width: 480px) {
  .mainpage {
    padding-left:  12px !important;
    padding-right: 12px !important;
  }
  .section-hero .hero-banner-title {
    font-size: 18px !important;
  }
}