/* ============================================================
   GOODMORNING HERO INSET CARD STYLE
   - 목적: index.html 메인 배너(.banner-slider)처럼, 다른 서비스 페이지의
     히어로 이미지 영역도 화면 좌우에 여백을 두고 둥근 모서리 카드
     형태로 통일한다.
   - 기존 문제: 히어로 배경 이미지가 화면 끝까지(엣지 투 엣지) 꽉 차게
     표시되어 index.html의 여백 있는 배너와 스타일이 달랐음.
   - 처리 방식: 히어로 섹션 자체의 폭을 본문 컨테이너(.wrap)와 동일한
     폭(최대 1120px, 좌우 합계 36px 여백)으로 제한하고, 모서리를
     둥글게 처리. 배경 이미지는 이미 section 자체에 걸려 있으므로
     별도 HTML 수정 없이 폭 제한만으로 카드형으로 보이게 됨.
   - 적용 대상 페이지: contract, delivery, family-combi, internet-tv,
     phones, plan, review-submit, security, story, visit
   - 반드시 hero-mobile-fix.css 보다 나중에(또는 함께) 로드해도 무방하며,
     기존 <style> 블록보다는 뒤에 위치해야 함(css/protect.css 다음 권장)
   ============================================================ */

.hero,
.phone-hero,
.phones-hero,
.page-hero,
.contract-hero-blend,
.delivery-hero,
.story-hero,
.hero-slider{
  width:min(1120px, calc(100% - 36px)) !important;
  margin:20px auto 0 !important;
  border-radius:30px !important;
  overflow:hidden !important;
  box-shadow:var(--shadow, 0 20px 50px rgba(26,47,94,.10)) !important;
}

/* 태블릿 이하: 여백/라운드 비율을 살짝 줄여서 좁은 화면에서도 자연스럽게 */
@media(max-width:900px){
  .hero,
  .phone-hero,
  .phones-hero,
  .page-hero,
  .contract-hero-blend,
  .delivery-hero,
  .story-hero,
  .hero-slider{
    margin:16px auto 0 !important;
    border-radius:24px !important;
  }
}

/* 작은 모바일: index.html 배너와 동일하게 좌우 여백을 좁혀서 카드 형태 유지 */
@media(max-width:520px){
  .hero,
  .phone-hero,
  .phones-hero,
  .page-hero,
  .contract-hero-blend,
  .delivery-hero,
  .story-hero,
  .hero-slider{
    width:calc(100% - 24px) !important;
    margin:14px auto 0 !important;
    border-radius:20px !important;
  }
}

/* security.html 전용 예외 처리
   security.html은 <section class="hero hero-slider-section"> 안에
   <div class="hero-slider">가 다시 들어있는 이중 구조라서, 위 규칙을
   그대로 두면 카드 안에 카드가 한 번 더 생기는 이중 여백이 생긴다.
   바깥 section(.hero.hero-slider-section)은 원래 폭 그대로 두고,
   안쪽 .hero-slider에만 카드 스타일을 적용해서 카드가 한 번만 보이게 한다. */
.hero.hero-slider-section{
  width:100% !important;
  margin:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  min-height:auto !important;
}

/* security.html: 슬라이드가 카드 안쪽에 꽉 차게 유지되도록 보정
   (.hero-slide는 position:absolute; inset:0 이라 부모 폭 변경만으로 자동 반영됨) */
.hero-slider .hero-arrow{
  z-index:6;
}