/* =========================================================
   에듀인잡 AI 커리어센터
   메인 운영 배너 v1.0
   - 기존 ECAS 영역을 유지하면서 관리자 배너를 롤링 표시
   ========================================================= */

.home-ecas-promo{
  position:relative;
  overflow:hidden;
}

.home-main-banner-slider{
  position:relative;
  width:100%;
  height:100%;
  min-height:260px;
  overflow:hidden;
  border-radius:inherit;
}

.home-main-banner-slides{
  position:relative;
  width:100%;
  height:100%;
  min-height:260px;
}

.home-main-banner-slide{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(160px,.7fr);
  gap:24px;
  align-items:center;
  width:100%;
  height:100%;
  min-height:260px;
  padding:30px 34px;
  box-sizing:border-box;
  color:inherit;
  text-decoration:none;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(16px);
  transition:opacity .35s ease, transform .35s ease, visibility .35s ease;
}

.home-main-banner-slide.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(0);
}

.home-main-banner-copy{
  min-width:0;
}

.home-main-banner-copy .mini-label{
  display:inline-block;
  margin-bottom:9px;
}

.home-main-banner-copy h3{
  margin:0 0 12px;
  font-size:28px;
  line-height:1.35;
  letter-spacing:-.03em;
  word-break:keep-all;
}

.home-main-banner-copy p{
  margin:0 0 16px;
  max-width:520px;
  font-size:15px;
  line-height:1.7;
  word-break:keep-all;
}

.home-main-banner-copy strong{
  display:inline-block;
  font-size:14px;
  font-weight:800;
}

.home-main-banner-image{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}

.home-main-banner-image img{
  display:block;
  width:100%;
  max-width:230px;
  max-height:180px;
  object-fit:cover;
  border-radius:14px;
}

.home-main-banner-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  width:190px;
  height:130px;
  border-radius:18px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  font-size:20px;
  font-weight:900;
  letter-spacing:.08em;
}

.home-main-banner-arrow{
  position:absolute;
  top:50%;
  z-index:5;
  width:38px;
  height:38px;
  margin-top:-19px;
  border:0;
  border-radius:50%;
  background:rgba(17,24,39,.42);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  transition:background .2s ease;
}

.home-main-banner-arrow:hover,
.home-main-banner-arrow:focus-visible{
  background:rgba(17,24,39,.72);
}

.home-main-banner-arrow.prev{
  left:10px;
}

.home-main-banner-arrow.next{
  right:10px;
}

.home-main-banner-dots{
  position:absolute;
  left:50%;
  bottom:14px;
  z-index:6;
  display:flex;
  gap:7px;
  transform:translateX(-50%);
}

.home-main-banner-dots button{
  width:8px;
  height:8px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.48);
  cursor:pointer;
}

.home-main-banner-dots button.active{
  width:22px;
  border-radius:999px;
  background:#fff;
}

@media (max-width:900px){
  .home-main-banner-slide{
    grid-template-columns:1fr minmax(130px,.48fr);
    padding:26px 28px;
  }

  .home-main-banner-copy h3{
    font-size:24px;
  }

  .home-main-banner-image img{
    max-width:180px;
    max-height:150px;
  }
}

@media (max-width:640px){
  .home-main-banner-slider,
  .home-main-banner-slides,
  .home-main-banner-slide{
    min-height:340px;
  }

  .home-main-banner-slide{
    grid-template-columns:1fr;
    grid-template-rows:auto 130px;
    gap:14px;
    padding:24px 22px 42px;
    align-content:center;
  }

  .home-main-banner-copy h3{
    font-size:22px;
  }

  .home-main-banner-copy p{
    font-size:14px;
    line-height:1.6;
  }

  .home-main-banner-image img{
    width:auto;
    max-width:100%;
    max-height:125px;
  }

  .home-main-banner-arrow{
    width:34px;
    height:34px;
    margin-top:-17px;
    font-size:24px;
  }

  .home-main-banner-arrow.prev{
    left:6px;
  }

  .home-main-banner-arrow.next{
    right:6px;
  }
}

@media (prefers-reduced-motion:reduce){
  .home-main-banner-slide{
    transition:none;
  }
}

/* =========================================================
   메인 운영 배너 PC 레이아웃 보정 2026-09-03
   - 기능/JS/DB 변경 없음
   - 텍스트와 이미지 균형 개선
   ========================================================= */

@media (min-width:901px){
  .home-main-banner-slide{
    grid-template-columns:minmax(0,1.05fr) minmax(240px,.95fr);
    gap:34px;
    padding:28px 42px;
  }

  .home-main-banner-copy{
    max-width:520px;
  }

  .home-main-banner-copy h3{
    margin:0 0 12px;
    font-size:24px;
    line-height:1.28;
    letter-spacing:-.035em;
    word-break:keep-all;
    overflow-wrap:break-word;
  }

  .home-main-banner-copy p{
    margin:0 0 15px;
    max-width:480px;
    font-size:14px;
    line-height:1.65;
    word-break:keep-all;
  }

  .home-main-banner-image{
    justify-content:center;
  }

  .home-main-banner-image img{
    width:100%;
    max-width:280px;
    max-height:185px;
    object-fit:contain;
    border-radius:14px;
  }
}

/* =========================================================
   메인 롤배너 HOST 충돌 보정 2026-09-03
   기존 .home-ecas-promo 2열 grid를 신규 host에서는 해제
   ========================================================= */

.home-ecas-promo.home-main-banner-host{
  display:block;
  grid-template-columns:none;
  gap:0;
  padding:0;
  min-width:0;
  min-height:300px;
}

.home-main-banner-host .home-main-banner-slider,
.home-main-banner-host .home-main-banner-slides{
  width:100%;
  height:100%;
  min-height:300px;
}

.home-main-banner-host .home-main-banner-slide{
  width:100%;
  min-height:300px;
}

/* =========================================================
   완성형 이미지 배너 모드 V3
   - 관리자 대표이미지를 전체 비율 그대로 노출
   - 제목/요약 별도 표시 없음
   ========================================================= */

.home-main-banner-host .home-main-banner-slider,
.home-main-banner-host .home-main-banner-slides{
  min-height:300px;
}

.home-main-banner-host .home-main-banner-slide{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  min-height:300px;
  background:#fff;
}

.home-main-banner-full-image{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:300px;
  object-fit:contain;
  object-position:center;
}

@media (max-width:640px){
  .home-main-banner-host .home-main-banner-slider,
  .home-main-banner-host .home-main-banner-slides,
  .home-main-banner-host .home-main-banner-slide{
    min-height:240px;
  }

  .home-main-banner-full-image{
    max-height:240px;
  }
}

/* =========================================================
   완성형 대표이미지 꽉채움 보정 2026-09-03
   - 이미지 비율 유지
   - 박스 내부 여백 최소화
   - 이미지 자체는 잘리지 않도록 contain 유지
   ========================================================= */

.home-main-banner-host{
  background:#fff;
}

.home-main-banner-host .home-main-banner-slider,
.home-main-banner-host .home-main-banner-slides,
.home-main-banner-host .home-main-banner-slide{
  width:100%;
  height:100%;
  min-height:300px;
}

.home-main-banner-host .home-main-banner-slide{
  padding:0;
  margin:0;
  overflow:hidden;
}

.home-main-banner-full-image{
  display:block;
  width:100%;
  height:300px;
  max-width:none;
  max-height:none;
  object-fit:contain;
  object-position:center;
}

@media (max-width:640px){
  .home-main-banner-host .home-main-banner-slider,
  .home-main-banner-host .home-main-banner-slides,
  .home-main-banner-host .home-main-banner-slide{
    min-height:220px;
  }

  .home-main-banner-full-image{
    height:220px;
  }
}

/* 메인 완성형 배너 - 박스 전체 채우기 최종 보정 */
.home-main-banner-host .home-main-banner-full-image{
  width:100%;
  height:100%;
  min-height:300px;
  max-width:none;
  max-height:none;
  object-fit:cover;
  object-position:center;
}

@media (max-width:640px){
  .home-main-banner-host .home-main-banner-full-image{
    min-height:220px;
  }
}

/* =========================================================
   모바일 롤배너 안정화 2026-09-03
   - absolute slide 구조 유지
   - 이미지 전체 표시
   - 모바일에서만 적용
   ========================================================= */

@media (max-width:640px){

  .home-ecas-promo.home-main-banner-host{
    width:100%;
    min-height:0;
    padding:0;
  }

  .home-main-banner-host .home-main-banner-slider{
    position:relative;
    width:100%;
    height:auto;
    aspect-ratio:16 / 10;
    min-height:0;
  }

  .home-main-banner-host .home-main-banner-slides{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    min-height:0;
  }

  .home-main-banner-host .home-main-banner-slide{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    min-height:0;
    padding:0;
    margin:0;
    overflow:hidden;
  }

  .home-main-banner-host .home-main-banner-full-image{
    display:block;
    width:100%;
    height:100%;
    min-height:0;
    max-width:100%;
    max-height:none;
    object-fit:contain;
    object-position:center;
  }
}

/* =========================================================
   모바일 롤배너 안정화 2026-09-03
   - absolute slide 구조 유지
   - 이미지 전체 표시
   - 모바일에서만 적용
   ========================================================= */

@media (max-width:640px){

  .home-ecas-promo.home-main-banner-host{
    width:100%;
    min-height:0;
    padding:0;
  }

  .home-main-banner-host .home-main-banner-slider{
    position:relative;
    width:100%;
    height:auto;
    aspect-ratio:16 / 10;
    min-height:0;
  }

  .home-main-banner-host .home-main-banner-slides{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    min-height:0;
  }

  .home-main-banner-host .home-main-banner-slide{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    min-height:0;
    padding:0;
    margin:0;
    overflow:hidden;
  }

  .home-main-banner-host .home-main-banner-full-image{
    display:block;
    width:100%;
    height:100%;
    min-height:0;
    max-width:100%;
    max-height:none;
    object-fit:contain;
    object-position:center;
  }
}