/* 46차: 모바일 메인배너 마감 보정
   - 텍스트/이미지 경계를 확실하게 부드럽게 연결
   - 수채화 이미지 구도 개선
   - 배너 높이 추가 축소 */

@media (max-width: 820px){
  #main > .hero .hero-shell{
    grid-template-columns: minmax(0,59%) minmax(0,41%) !important;
    min-height: 258px !important;
    border-radius: 18px !important;
  }
  #main > .hero .hero-copy{
    background: #f4f4ef !important;
    padding: 18px 6px 16px 18px !important;
    position: relative !important;
    overflow: visible !important;
    z-index: 3 !important;
  }
  #main > .hero .hero-copy::after{
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    right: -58px !important;
    width: 72px !important;
    height: 100% !important;
    background: linear-gradient(90deg,
      #f4f4ef 0%,
      rgba(244,244,239,.98) 18%,
      rgba(244,244,239,.90) 40%,
      rgba(244,244,239,.68) 62%,
      rgba(244,244,239,.30) 82%,
      rgba(244,244,239,0) 100%) !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }
  #main > .hero .hero-image{
    z-index: 1 !important;
    background-position: 74% 46% !important;
    background-size: cover !important;
    transform: scale(1.02) !important;
  }
  #main > .hero .eyebrow{margin-bottom:8px !important;}
  #main > .hero h1{
    font-size: clamp(25px, 6.5vw, 35px) !important;
    line-height: 1.1 !important;
    margin-bottom: 8px !important;
  }
  #main > .hero .hero-lead{
    font-size: 11px !important;
    line-height: 1.38 !important;
    margin-bottom: 5px !important;
  }
  #main > .hero .hero-description{
    font-size: 9.7px !important;
    line-height: 1.42 !important;
  }
  #main > .hero .hero-cta{
    margin-top: 10px !important;
    gap: 6px !important;
  }
  #main > .hero .btn{
    min-height: 34px !important;
    font-size: 9.5px !important;
    padding: 0 7px !important;
  }
}

@media (max-width: 430px){
  #main > .hero > .wrap{
    width: calc(100% - 18px) !important;
  }
  #main > .hero .hero-shell{
    grid-template-columns: minmax(0,60%) minmax(0,40%) !important;
    min-height: 238px !important;
    border-radius: 17px !important;
  }
  #main > .hero .hero-copy{
    padding: 16px 5px 14px 16px !important;
  }
  #main > .hero .hero-copy::after{
    right: -48px !important;
    width: 62px !important;
  }
  #main > .hero .hero-image{
    background-position: 76% 44% !important;
    transform: scale(1.03) !important;
  }
  #main > .hero .eyebrow{
    font-size: 7.2px !important;
    margin-bottom: 7px !important;
  }
  #main > .hero h1{
    font-size: clamp(23px, 8vw, 31px) !important;
    line-height: 1.09 !important;
    margin-bottom: 7px !important;
  }
  #main > .hero .hero-lead{
    font-size: 10.2px !important;
    margin-bottom: 4px !important;
  }
  #main > .hero .hero-description{
    font-size: 8.9px !important;
    line-height: 1.38 !important;
  }
  #main > .hero .hero-cta{
    margin-top: 9px !important;
    gap: 5px !important;
  }
  #main > .hero .btn{
    min-height: 32px !important;
    font-size: 9px !important;
    border-radius: 8px !important;
    gap: 5px !important;
  }
  #main > .hero .btn span{
    font-size: 9.5px !important;
  }
}

@media (max-width: 360px){
  #main > .hero .hero-shell{
    min-height: 228px !important;
    grid-template-columns: minmax(0,61%) minmax(0,39%) !important;
  }
  #main > .hero .hero-copy{
    padding: 14px 4px 12px 14px !important;
  }
  #main > .hero .hero-copy::after{
    right: -42px !important;
    width: 54px !important;
  }
  #main > .hero .hero-image{
    background-position: 77% 44% !important;
  }
  #main > .hero h1{font-size: 21px !important;}
  #main > .hero .hero-lead{font-size: 9.7px !important;}
  #main > .hero .hero-description{font-size: 8.4px !important;}
  #main > .hero .btn{min-height: 30px !important;font-size: 8.5px !important;}
}