/* 48차: 모바일 메인배너 풀블리드 + 높이 추가 축소
   - 모바일에서만 상단/양옆 가득 차는 배너
   - 모서리 라운드 제거
   - 높이 한 단계 더 축소 */

@media (max-width: 820px){
  #main > .hero{
    padding-top: 0 !important;
  }
  #main > .hero > .wrap{
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
  #main > .hero .hero-shell{
    min-height: 236px !important;
    border-radius: 0 !important;
    grid-template-columns: minmax(0,60%) minmax(0,40%) !important;
  }
  #main > .hero .hero-copy{
    padding: 15px 6px 13px 20px !important;
  }
  #main > .hero .hero-copy::after{
    right: -56px !important;
    width: 72px !important;
  }
  #main > .hero .hero-image{
    background-position: 79% 43% !important;
    transform: scale(1.03) !important;
  }
  #main > .hero h1{
    font-size: clamp(23px, 6vw, 32px) !important;
    margin-bottom: 6px !important;
  }
  #main > .hero .hero-lead{
    font-size: 10.4px !important;
  }
  #main > .hero .hero-description{
    font-size: 9.2px !important;
  }
  #main > .hero .hero-cta{
    margin-top: 7px !important;
  }
  #main > .hero .btn{
    min-height: 31px !important;
  }
}

@media (max-width: 430px){
  #main > .hero > .wrap{
    width: 100vw !important;
    max-width: 100vw !important;
  }
  #main > .hero .hero-shell{
    min-height: 214px !important;
    border-radius: 0 !important;
    grid-template-columns: minmax(0,59.5%) minmax(0,40.5%) !important;
  }
  #main > .hero .hero-copy{
    padding: 13px 4px 11px 16px !important;
  }
  #main > .hero .hero-copy::after{
    right: -46px !important;
    width: 60px !important;
    background: linear-gradient(90deg,
      #f4f4ef 0%,
      rgba(244,244,239,.985) 18%,
      rgba(244,244,239,.94) 35%,
      rgba(244,244,239,.80) 53%,
      rgba(244,244,239,.48) 74%,
      rgba(244,244,239,0) 100%) !important;
  }
  #main > .hero .hero-image{
    background-position: 81% 42% !important;
    transform: scale(1.035) !important;
  }
  #main > .hero .eyebrow{
    font-size: 6.9px !important;
    margin-bottom: 5px !important;
  }
  #main > .hero h1{
    font-size: clamp(21px, 7.2vw, 28px) !important;
    line-height: 1.05 !important;
    margin-bottom: 5px !important;
  }
  #main > .hero .hero-lead{
    font-size: 9.5px !important;
    line-height: 1.32 !important;
    margin-bottom: 3px !important;
  }
  #main > .hero .hero-description{
    font-size: 8.3px !important;
    line-height: 1.32 !important;
  }
  #main > .hero .hero-cta{
    margin-top: 7px !important;
    gap: 5px !important;
  }
  #main > .hero .btn{
    min-height: 29px !important;
    font-size: 8.4px !important;
    padding: 0 6px !important;
    border-radius: 8px !important;
  }
  #main > .hero .btn span{
    font-size: 8.7px !important;
  }
}

@media (max-width: 360px){
  #main > .hero .hero-shell{
    min-height: 206px !important;
  }
  #main > .hero .hero-copy{
    padding: 12px 4px 10px 14px !important;
  }
  #main > .hero .hero-copy::after{
    right: -41px !important;
    width: 53px !important;
  }
  #main > .hero .hero-image{
    background-position: 82% 42% !important;
  }
  #main > .hero h1{font-size: 19px !important;}
  #main > .hero .hero-lead{font-size: 9px !important;}
  #main > .hero .hero-description{font-size: 7.9px !important;}
  #main > .hero .btn{min-height: 28px !important;font-size: 8.1px !important;}
}