/* css/pages/index.css — 홈 전용 보정 (R5: 원본 CSS 는 수정 않고 여기서 보탠다)
 *
 * 원본 mainbanner.css 는 홈 히어로를 .flexslider{position:absolute; top:117px}
 * 로 띄우고 그 아래 상품 캐러셀을 #slideshow{margin-top:350px} 으로 밀어 맞춘
 * 절대배치 조합이다. 마크업·수치를 그대로 두고 슬라이더 동작에 필요한 것만 보탠다.
 */

/* 원본 slider.js 가 인라인으로 넣던 fade 초기 상태를 CSS 로.
 * (JS 가 죽어도 첫 장은 보이도록 opacity 는 JS 가 켠다 — 여기선 겹침만 정의) */
.flexslider .slides > li {
  position: absolute;
  left: 0;
  top: 0;
}

/* pager 활성 표시 — 원본 activeControllerCls:'active' 계약 */
.flex-control-paging li a.active,
.flex-control-paging li.active a {
  opacity: 1;
}

/* 상품 캐러셀 세로 이동(원본 jQuery.slide_v2 slideWay:'' = 상/하) */
#slidesContainer .slide {
  height: 170px;
}

/* ------------------------------------------------------------------
 * 반응형 리플로우 (R3) — 홈 전용 고정폭 2블록
 *
 * 원본 mainbanner.css 는 홈 히어로를 .flexslider{position:absolute;
 * top:117px; height:505px} 로 띄우고, 그 아래 상품 캐러셀을
 * #slideshow{width:1075px; margin-top:350px} 로 밀어 맞춘 절대배치다.
 * 두 수치 모두 1080 데스크톱 전제라 좁은 폭에서 그대로 남으면
 * #slideshow(1075px)·#slidesContainer(1030px)가 뷰포트를 넘고,
 * 공통 overlay 의 html/body{overflow-x:hidden} 에 잘려 사라진다
 * (실측 768px=6타일 중 4개만·390px=2개만 도달, 좌우 이동 버튼은
 * x=1043 으로 화면 밖 = 캐러셀 조작 불가).
 * overflowPx 는 0 으로 읽히지만 잘림으로 감춘 것이라 통과가 아니다.
 *
 * 숨기지 말고 폭 제약을 풀어 줄바꿈으로 리플로우한다.
 * 원본 마크업·클래스·데스크톱 수치는 그대로 둔다.
 * ------------------------------------------------------------------ */
@media screen and (max-width: 1120px) {
  /* 히어로: 505px 고정 높이 → 원본 배너 비율(1905x505 ≈ 3.77:1) 유지.
   * .flexslider 의 position:absolute 와 top:117px 은 원본 그대로 둔다 —
   * 슬라이드 li 가 absolute 라 이게 포함블록이다(static 으로 바꾸면
   * li 가 뷰포트 기준으로 풀려 ul.slides 높이가 0 이 된다). */
  .flexslider,
  .flexslider .slides a img {
    height: auto;
    aspect-ratio: 1905 / 505;
  }

  /* 히어로 배너는 1x1 alpha.png 를 폭 100% 로 늘리고 실제 그림은 요소
   * 인라인 style 의 background 로 까는 원본 기법이다(R2 장식 배경).
   * 그런데 background-size 가 auto 라 1905px 원본이 그대로 깔려
   * 좁은 폭에서는 가운데만 보이고 좌우가 잘린다(실측 390px 에서 약 20%만 노출).
   * 인라인 style 은 그대로 두고 크기 지정만 보탠다 —
   * contain 이라 배너 전체가 잘림 없이 들어온다. */
  .flexslider .slides a img {
    background-size: contain !important;
  }

  /* 절대배치 히어로가 흐름에서 빠져 있어 원본은 margin-top:350px 으로
   * 캐러셀을 밀어 놨다(히어로 505px 전제). 히어로 높이가 폭에 따라
   * 유동이 되었으므로 밀어내는 양도 같이 유동이어야 한다.
   *
   * 캐러셀의 자연 흐름 위치는 헤더+서브배너 높이(실측 약 297px)이고
   * 히어로 바닥은 117px + 100vw*505/1905 다. 좁은 폭에서는 흐름 위치가
   * 이미 아래라 여백이 필요 없지만, 860~1120px 구간에서는 히어로가
   * 더 길어 겹친다(실측 1120px 에서 -68.9px 겹침).
   * max() 로 "겹침 해소에 필요한 양"과 "최소 여백 30px" 중 큰 쪽을 쓴다. */
  #slideshow {
    width: auto;
    max-width: 1075px;
    margin-top: max(30px, calc(117px + 100vw * 505 / 1905 + 30px - 297px));
    overflow: visible;
  }

  /* 캐러셀 트랙: 고정 1030px 해제 + 타일 줄바꿈 */
  #slidesContainer,
  #slidesContainer .slide,
  #slideInner {
    width: auto !important;
    height: auto !important;
    float: none;
  }

  #slidesContainer .slide {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  #slidesContainer .slide ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }

  #slidesContainer .slide li {
    float: none;
  }

  /* 줄바꿈으로 전 타일이 보이므로 상/하 이동 버튼은 역할이 없다.
   * (원본에도 좁은 폭 대응이 없어 위치가 화면 밖으로 나간다) */
  #slideshow .btn {
    display: none;
  }

  /* 세로 이동 트랜스폼이 남아 있으면 줄바꿈 레이아웃이 밀린다 */
  #slideInner {
    margin-top: 0 !important;
  }
}

/* ------------------------------------------------------------------
 * 퀵메뉴(#LAYER_MENU) 가로 넘침 — 1121~1300px 사각지대
 *
 * 퀵메뉴는 1080 컨테이너(#divGSBody, 가운데 정렬) 바깥에
 * left:1082px; width:138px 로 놓인다. 컨테이너 왼쪽 여백이 (100vw-1080)/2
 * 이므로 퀵메뉴 오른쪽 끝은 (100vw-1080)/2 + 1220 이고,
 * 이게 100vw 를 넘지 않으려면 100vw >= 1360px 이어야 한다.
 * 즉 1121~1359px 구간 전체가 넘침이다
 * (실측 1200px=80px·1280px=40px — 이 CSS 이전 기준선에서도 동일한 원본 결함.
 *  공통 overlay 는 max-width:1120px 에서만 숨겨 이 구간을 못 덮는다).
 *
 * 숨기지 않고 컨테이너 안쪽 오른쪽 끝에 붙여 넘침만 없앤다
 * (부모 #divGSBody 가 position:relative 라 right:0 이 컨테이너 기준).
 * ------------------------------------------------------------------ */
@media screen and (min-width: 1121px) and (max-width: 1359px) {
  #LAYER_MENU {
    left: auto !important;
    right: 0;
  }
}