/* ============================================================
   GOODMORNING 전체 히어로 통일 패치
   - 대상: index.html 포함 전체 10개 페이지 히어로
     (index, phones, plan, contract, delivery, internet-tv,
      security, family-combi, visit, story, review-submit)
   - 통일 값
     PC   : 높이 420px / 제목 58px / 본문 17px
     모바일(760px 이하) : 높이 280px / 제목 30px / 본문 13px
   - 이 파일은 각 페이지의 기존 <style> 블록보다 "뒤에" 로드되어야
     기존 !important 규칙을 정상적으로 덮어씁니다.
   - 참고: index.html(.banner-slide + .banner-content)과
     security.html(.hero-slider + .hero-slide)은 "바깥 박스 / 안쪽
     슬라이드"가 분리된 2단 구조라서, 다른 페이지(섹션 자체가 박스+
     텍스트를 겸함)와 선택자를 구분해서 처리합니다.
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   1) 히어로 바깥 박스 (좌우 여백 + 라운드 + 높이) - 전 페이지 공통
   ──────────────────────────────────────────────────────────── */
.hero:not(.hero-slider-section),
.contract-hero-blend,
.delivery-hero,
.story-hero,
.hero-slider,
.banner-slider{
  box-sizing:border-box !important;
  width:min(1120px, calc(100% - 36px)) !important;
  max-width:1120px !important;
  margin:20px auto 0 !important;
  border-radius:30px !important;
  overflow:hidden !important;
  border:1px solid var(--line, #e2e8f0) !important;
  box-shadow:var(--shadow, 0 20px 50px rgba(26,47,94,.10)) !important;
  background-position:center center !important;
}

/* security.html : 히어로를 감싸는 바깥 껍데기는 배경/여백 제거 */
.hero-slider-section{
  padding:0 !important;
  background:transparent !important;
}

/* 실제 높이 통일 (PC 420px) - 단일 구조 페이지는 섹션 자체, index/security는 안쪽 슬라이드 */
.hero:not(.hero-slider-section),
.contract-hero-blend,
.delivery-hero,
.story-hero,
.hero-slider,
.banner-slide{
  height:420px !important;
  min-height:420px !important;
  max-height:420px !important;
}

/* 단일 구조 페이지(hero, contract, delivery, story)만 텍스트 가운데 정렬 + 좌우 여백 */
.hero:not(.hero-slider-section),
.contract-hero-blend,
.delivery-hero,
.story-hero{
  padding:0 52px !important;
  display:flex !important;
  align-items:center !important;
}

/* security.html : 슬라이드 자체에 좌우 여백 (이미 display:flex;align-items:center 보유) */
.hero-slide{
  padding:0 52px !important;
}

/* ────────────────────────────────────────────────────────────
   2) 히어로 텍스트 통일 - PC 제목 58px / 본문 17px
   ──────────────────────────────────────────────────────────── */
.hero:not(.hero-slider-section) h1,
.contract-hero-blend h1,
.delivery-hero h1,
.story-hero h1,
.hero-copy h1,
.banner-slide h2{
  font-size:58px !important;
  line-height:1.1 !important;
  letter-spacing:-.05em !important;
}

.hero:not(.hero-slider-section) p,
.contract-hero-blend p,
.delivery-hero p,
.story-hero p,
.hero-copy p,
.banner-slide p{
  margin-top:14px !important;
  max-width:460px !important;
  font-size:17px !important;
  line-height:1.65 !important;
}

.hero:not(.hero-slider-section) .eyebrow,
.contract-hero-blend .contract-kicker,
.delivery-hero .delivery-kicker,
.story-hero .eyebrow,
.hero-copy .eyebrow,
.banner-kicker{
  font-size:12px !important;
  padding:7px 13px !important;
  margin-bottom:14px !important;
}

.hero-benefits{
  margin-top:16px !important;
}
.hero-benefits span{
  font-size:12.5px !important;
  min-height:32px !important;
  padding:7px 12px !important;
}

.hero-actions,
.contract-hero-actions,
.delivery-hero-actions,
.story-actions,
.banner-actions{
  margin-top:20px !important;
}
.hero-actions .btn,
.contract-hero-actions .btn,
.delivery-hero-actions .btn,
.story-actions .btn,
.banner-actions .bbtn{
  min-height:44px !important;
  padding:0 18px !important;
  font-size:14px !important;
}

/* ────────────────────────────────────────────────────────────
   2-1) 히어로 바로 아래 "퀵바"류 겹침 해제
   - phones(.pick-nav), internet-tv/security(.pick-panel),
     delivery(.delivery-quickbar), story(.story-tabs)는 원래
     음수 margin-top으로 히어로 하단에 겹쳐지도록 되어 있었음.
     히어로가 짧아지면서 CTA 버튼을 가리므로 겹침을 해제하고
     히어로 아래에 자연스럽게 배치되도록 변경.
   ──────────────────────────────────────────────────────────── */
.pick-nav,
.pick-panel,
.delivery-quickbar,
.story-tabs{
  margin-top:20px !important;
}

@media(max-width:760px){
  .pick-nav,
  .pick-panel,
  .delivery-quickbar,
  .story-tabs{
    margin-top:14px !important;
  }
}

/* ────────────────────────────────────────────────────────────
   3) 모바일 (760px 이하) - 높이 280px / 제목 30px / 본문 13px
   ──────────────────────────────────────────────────────────── */
@media(max-width:760px){
  /* 바깥 박스 폭/라운드 축소 (전 페이지 공통) */
  .hero:not(.hero-slider-section),
  .contract-hero-blend,
  .delivery-hero,
  .story-hero,
  .hero-slider,
  .banner-slider{
    width:calc(100% - 28px) !important;
    margin:14px auto 0 !important;
    border-radius:24px !important;
  }

  /* 높이 280px 기준, 내용이 많으면 자동으로 늘어나도록 (텍스트 잘림 방지) */
  .hero:not(.hero-slider-section),
  .contract-hero-blend,
  .delivery-hero,
  .story-hero,
  .banner-slide{
    height:auto !important;
    min-height:280px !important;
    max-height:none !important;
  }

  /* security.html : 슬라이드 3장이 겹쳐지는(position:absolute) 구조라
     내용 기준 자동 높이 조절이 불가능 → 내용이 잘리지 않도록
     별도로 더 넉넉한 고정 높이 사용 */
  .hero-slider{
    height:380px !important;
    min-height:380px !important;
    max-height:380px !important;
  }

  /* 단일 구조 페이지 좌우 여백 축소 */
  .hero:not(.hero-slider-section),
  .contract-hero-blend,
  .delivery-hero,
  .story-hero{
    padding:0 22px !important;
  }
  .hero-slide{
    padding:0 22px !important;
  }

  /* index.html : banner-content는 자체 padding 로직을 쓰므로
     높이만 280px에 맞춰 채우도록 최소치만 제거 */
  .banner-content{
    min-height:0 !important;
    height:auto !important;
    padding:18px 22px !important;
    justify-content:center !important;
  }

  .hero:not(.hero-slider-section) h1,
  .contract-hero-blend h1,
  .delivery-hero h1,
  .story-hero h1,
  .hero-copy h1,
  .banner-slide h2{
    font-size:30px !important;
    line-height:1.16 !important;
    letter-spacing:-.04em !important;
  }
  .hero:not(.hero-slider-section) p,
  .contract-hero-blend p,
  .delivery-hero p,
  .story-hero p,
  .hero-copy p,
  .banner-slide p{
    font-size:13px !important;
    line-height:1.55 !important;
    max-width:100% !important;
    margin-top:9px !important;
  }
  .hero:not(.hero-slider-section) .eyebrow,
  .contract-hero-blend .contract-kicker,
  .delivery-hero .delivery-kicker,
  .story-hero .eyebrow,
  .hero-copy .eyebrow,
  .banner-kicker{
    font-size:10px !important;
    padding:5px 10px !important;
    margin-bottom:9px !important;
    white-space:normal !important;
  }
  .hero-benefits{
    display:none !important;
  }
  .hero-actions,
  .contract-hero-actions,
  .delivery-hero-actions,
  .story-actions,
  .banner-actions{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:7px !important;
    margin-top:13px !important;
  }
  .hero-actions .btn,
  .contract-hero-actions .btn,
  .delivery-hero-actions .btn,
  .story-actions .btn,
  .banner-actions .bbtn{
    width:100% !important;
    justify-content:center !important;
    min-height:39px !important;
    padding:0 14px !important;
    font-size:12px !important;
    border-radius:13px !important;
  }
}