@charset "utf-8";
/* 모바일 메인 히어로 — 사진이 주인공이 되도록 덮어쓴다.
   기존 css 는 건드리지 않는다. 이 파일은 좁은 화면에서만 적용된다. */

@media (max-width: 1023px) {

  /* ── 히어로 상자 ───────────────────────────────────────────────
     상위 래퍼가 넓은 고정폭이라 히어로만 화면 폭에 맞춘다. */
  #wrap #section01 {
    width: 100vw;
    max-width: 100vw;
    height: 72vh;
    overflow: hidden;
    position: relative;
  }
  @supports (height: 72svh) {
    #wrap #section01 { height: 72svh; }
  }

  #wrap #section01 .swiper,
  #wrap #section01 .swiper-wrapper,
  #wrap #section01 .swiper-slide {
    width: 100%;
    max-width: 100vw;
    height: 100%;
  }

  /* 슬라이드는 사진이 꽉 차고 글자는 아래로 몰린다 */
  #wrap #section01 .swiper-slide {
    display: block;
    position: relative;
    font-size: inherit;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }

  /* ── 첫 슬라이드 ───────────────────────────────────────────────
     좁은 화면에서는 영상 대신 사진을 쓴다. 가로로 긴 영상은 세로 화면을
     채우려면 좌우를 크게 잘라야 해서 피사체가 남지 않는다.
     사진은 같은 장면의 가로 컷이고, 잘리는 좌우를 피사체 쪽으로 밀어 둔다.
     넓은 화면은 손대지 않는다 — 영상 그대로다. */
  #wrap #section01 .swiper-slide:nth-of-type(1) {
    background-image: url(../img/mainSlide01-m.webp);
    background-color: #2a2d33;
    background-size: cover;
    /* 원본 3840x1568 을 375x585 에 채우면 가로의 26% 만 남는다.
       가운데로 두면 피사체 오른쪽이 잘려 58% 지점을 화면 가운데에 놓는다. */
    background-position: 58% center;
    background-repeat: no-repeat;
  }
  /* 영상 상자를 접는다. 배경 사진이 그 자리를 그대로 채운다. */
  #wrap #section01 .swiper-slide:nth-of-type(1) > div {
    display: none !important;
  }

  /* ── 나머지 사진의 잘리는 자리 ─────────────────────────────────
     같은 가로 원본이라 좁은 화면에서는 가로의 26% 만 남는다.
     지면에 박힌 가운데 지정을 눌러 피사체가 온전히 들어오는 지점으로 민다. */

  /* 두 번째 사진부터는 첫 사진이 뜬 뒤에 받는다 — 사진 주소는 index.html 머리에 있다 */
  #wrap #section01 .swiper-slide:nth-of-type(n+2) {
    background-color: #2a2d33;
  }

  /* 두 사람이 다 들어올 폭이 아니라 앞쪽 사람을 온전히 담는다 */
  #wrap #section01 .swiper-slide:nth-of-type(2) {
    background-position: 38% center !important;
  }
  /* 3번은 가운데에 피사체가 온전히 들어와 그대로 둔다 */

  /* 가운데로 두면 앞 장비의 왼쪽이 잘려 조금 왼쪽으로 민다 */
  #wrap #section01 .swiper-slide:nth-of-type(4) {
    background-position: 45% center !important;
  }

  /* ── 글자 ──────────────────────────────────────────────────────
     작게, 그리고 아래로. 가운데는 사진에 비워 둔다. */
  #wrap #section01 .swiper-slide > div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding: 0 20px 68px !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 38%;
    box-sizing: border-box;
    z-index: 2;
  }

  /* 글자 줄에만 좁은 띠를 깔아 읽히게 한다 — 사진 전체를 덮지 않는다 */
  #wrap #section01 .swiper-slide > div::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.42) 46%, rgba(0, 0, 0, 0) 100%);
    z-index: -1;
    pointer-events: none;
  }

  #wrap #section01 .swiper-slide > div h4 {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 8px;
    letter-spacing: -0.03em;
    opacity: 0.92;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  }
  #wrap #section01 .swiper-slide > div h1 {
    font-size: 24px;
    line-height: 1.34;
    margin-bottom: 0;
    letter-spacing: -0.03em;
    font-weight: 400;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  }
  #wrap #section01 .swiper-slide > div h1 span {
    font-weight: 600;
  }

  /* ── 좌우·정지 버튼은 없앤다. 넘기는 것은 손가락이 한다 ───────── */
  #wrap #section01 .custom-prev,
  #wrap #section01 .custom-next {
    display: none !important;
  }

  /* 몇 번째인지 알려 주는 표시는 남긴다 — 작고 얇게 */
  #wrap #section01 .custom-pagination-wrapper {
    bottom: 18px;
    width: auto;
    left: 20px;
    right: 20px;
    transform: none;
    gap: 10px;
    opacity: 0.85;
    height: auto;
  }
  #wrap #section01 .progress-bar-container {
    width: auto;
    flex: 1 1 auto;
    height: 3px;
  }
  #wrap #section01 .custom-fraction {
    font-size: 12px;
    min-width: 30px;
  }
  #wrap #section01 .custom-pagination-wrapper .fractal {
    gap: 0;
  }
}