/* =========================================================
   GALLERY.CSS
   중앙 정렬 캐러셀 / 버튼 / 스와이프 / 확대 모달
========================================================= */


/* =========================================================
   1. Gallery Section
========================================================= */

.gallery {
  width: 100%;

  text-align: center;
}


/* =========================================================
   2. Gallery Heading
========================================================= */

.gallery .section-heading {
  width: 100%;

  max-width: 380px;

  margin-left: auto;
  margin-right: auto;

  text-align: center;
}


.gallery .eyebrow,
.gallery .section-title,
.gallery .section-lead {
  width: 100%;

  margin-left: auto;
  margin-right: auto;

  text-align: center;
}


/* =========================================================
   3. Gallery Stage
========================================================= */

.gallery-stage {
  /*
    사진 사이 간격
  */
  --gallery-gap: 14px;

  /*
    좌우에 다음/이전 사진이
    살짝 보이는 크기

    숫자가 커질수록
    가운데 사진은 작아지고
    옆 사진이 더 많이 보임
  */
  --gallery-peek: 34px;

  width: 100%;

  margin-top:
    clamp(34px, 9vw, 44px);
}


/* =========================================================
   4. Viewport
========================================================= */

.gallery-viewport {
  position: relative;

  width: 100%;

  overflow: hidden;

  /*
    세로 페이지 스크롤은 허용하면서
    좌우 스와이프는 JS가 처리
  */
  touch-action: pan-y;

  -webkit-user-select: none;
  user-select: none;
}


/* =========================================================
   5. Gallery Track
========================================================= */

.gallery-grid {
  display: flex;

  align-items: center;

  /*
    중요:
    max-content 사용하지 않음.

    이 width:100%를 기준으로
    사진 카드 % 크기를 계산해야
    사진이 작아지지 않음.
  */
  width: 100%;

  gap:
    var(--gallery-gap);

  /*
    첫 번째 / 마지막 사진도
    정확히 가운데 위치할 수 있게
    좌우 여백 확보
  */
  padding-left:
    var(--gallery-peek);

  padding-right:
    var(--gallery-peek);

  transition:
    transform
    480ms
    var(--ease-soft);

  will-change:
    transform;
}


/* =========================================================
   6. Gallery Item
========================================================= */

.gallery-item {
  position: relative;

  /*
    가운데 사진 한 장 크게.

    viewport 폭에서
    좌우 peek 공간을 제외한 크기
  */
  flex:
    0 0
    calc(
      100%
      - (var(--gallery-peek) * 2)
    );

  width:
    calc(
      100%
      - (var(--gallery-peek) * 2)
    );

  /*
    웨딩 세로사진 비율
  */
  aspect-ratio:
    0.78;

  overflow: hidden;

  padding: 0;

  border: 0;

  border-radius:
    18px;

  background:
    linear-gradient(
      145deg,
      #ece8e2,
      #ddd5c9
    );

  box-shadow:
    0 10px 26px
    rgba(0, 0, 0, 0.06);

  cursor: zoom-in;

  opacity: 0.58;

  transform:
    scale(0.94);

  -webkit-tap-highlight-color:
    transparent;

  transition:
    opacity
    420ms
    var(--ease-soft),

    transform
    480ms
    var(--ease-soft);
}


/* =========================================================
   7. Active Image
========================================================= */

.gallery-item.is-active {
  opacity: 1;

  transform:
    scale(1);
}


/* =========================================================
   8. Gallery Image
========================================================= */

.gallery-item.has-image {
  background-position:
    center center;

  background-size:
    cover;

  background-repeat:
    no-repeat;
}


/* =========================================================
   9. Overlay
========================================================= */

.gallery-item::after {
  position: absolute;

  z-index: 1;

  inset: 0;

  content: "";

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      transparent 72%,
      rgba(0, 0, 0, 0.07)
    );
}


/* =========================================================
   10. Placeholder
========================================================= */

.gallery-item__placeholder {
  position: absolute;

  z-index: 2;

  inset: 0;

  display: grid;

  place-items: center;

  padding: 20px;

  color:
    rgba(255, 255, 255, 0.70);

  font-family:
    "SUIT-Light",
    sans-serif;

  font-size: 10px;

  font-weight: 300;

  line-height: 1.6;

  letter-spacing:
    0.10em;

  text-align: center;
}


.gallery-item.has-image
.gallery-item__placeholder {
  display: none;
}


/* =========================================================
   11. Controls
========================================================= */

.gallery-controls {
  display: grid;

  grid-template-columns:
    52px
    1fr
    52px;

  align-items: center;

  width: 100%;

  margin-top:
    22px;
}


/* =========================================================
   12. Counter
========================================================= */

.gallery-counter {
  margin: 0;

  color:
    var(--color-ink);

  font-family:
    "SUIT-Light",
    sans-serif;

  font-size:
    clamp(15px, 4vw, 17px);

  font-weight: 300;

  line-height: 1;

  font-variant-numeric:
    tabular-nums;

  text-align: center;
}


/* =========================================================
   13. Previous / Next
========================================================= */

.gallery-nav {
  display: flex;

  width: 48px;
  height: 48px;

  align-items: center;
  justify-content: center;

  margin: auto;

  padding: 0;

  border: 0;

  background:
    transparent;

  color:
    rgba(48, 53, 68, 0.52);

  font-family:
    Arial,
    sans-serif;

  font-size:
    44px;

  font-weight: 300;

  line-height: 1;

  cursor: pointer;

  -webkit-tap-highlight-color:
    transparent;

  transition:
    color
    var(--motion-fast)
    var(--ease-standard),

    transform
    var(--motion-fast)
    var(--ease-standard);
}


.gallery-nav:active {
  transform:
    scale(0.90);
}


/* =========================================================
   14. Gallery Modal
========================================================= */

.gallery-modal {
  position: fixed;

  inset: 0;

  z-index: 1300;

  display: flex;

  align-items: center;
  justify-content: center;

  padding:
    24px
    50px
    56px;

  background:
    rgba(35, 40, 51, 0.88);

  -webkit-backdrop-filter:
    blur(6px);

  backdrop-filter:
    blur(6px);

  overscroll-behavior:
    none;
}


.gallery-modal[hidden] {
  display: none;
}


/* =========================================================
   15. Modal Image Area
========================================================= */

.gallery-modal__image-wrap {
  display: flex;

  width: 100%;
  height: 100%;

  max-width:
    760px;

  align-items: center;
  justify-content: center;

  touch-action:
    pan-y;

  user-select: none;
  -webkit-user-select: none;

  -webkit-touch-callout:
    none;
}


/* =========================================================
   16. Modal Image
========================================================= */

.gallery-modal__image {
  display: block;

  /*
    width:100%를 사용하지 않음.

    작은 사진을 억지로 화면 가득
    확대하지 않도록 함.
  */
  width: auto;
  height: auto;

  max-width:
    min(86vw, 720px);

  max-height:
    76vh;

  object-fit:
    contain;

  border-radius:
    12px;

  box-shadow:
    0 18px 45px
    rgba(0, 0, 0, 0.22);

  user-select: none;
  -webkit-user-select: none;

  -webkit-user-drag:
    none;

  -webkit-touch-callout:
    none;
}


/* =========================================================
   17. Modal Close
========================================================= */

.gallery-modal__close {
  position: absolute;

  top:
    max(16px, env(safe-area-inset-top));

  right:
    16px;

  z-index: 5;

  display: flex;

  width: 40px;
  height: 40px;

  align-items: center;
  justify-content: center;

  padding: 0;

  border:
    1px solid
    rgba(255, 255, 255, 0.22);

  border-radius:
    50%;

  background:
    rgba(31, 36, 47, 0.32);

  color:
    #ffffff;

  font-family:
    "SUIT-Light",
    sans-serif;

  font-size:
    25px;

  font-weight: 300;

  line-height: 1;

  cursor: pointer;

  -webkit-backdrop-filter:
    blur(7px);

  backdrop-filter:
    blur(7px);
}


/* =========================================================
   18. Modal Previous / Next
========================================================= */

.gallery-modal__nav {
  position: absolute;

  top: 50%;

  z-index: 5;

  display: flex;

  width: 44px;
  height: 60px;

  align-items: center;
  justify-content: center;

  padding: 0;

  border: 0;

  background:
    transparent;

  color:
    rgba(255, 255, 255, 0.78);

  font-family:
    Arial,
    sans-serif;

  font-size:
    50px;

  font-weight: 300;

  line-height: 1;

  cursor: pointer;

  transform:
    translateY(-50%);

  -webkit-tap-highlight-color:
    transparent;
}


.gallery-modal__nav--prev {
  left:
    4px;
}


.gallery-modal__nav--next {
  right:
    4px;
}


.gallery-modal__nav:active {
  opacity:
    0.60;
}


/* =========================================================
   19. Modal Counter
========================================================= */

.gallery-modal__counter {
  position: absolute;

  right: 0;

  bottom:
    max(
      22px,
      env(safe-area-inset-bottom)
    );

  left: 0;

  margin: 0;

  color:
    rgba(255, 255, 255, 0.88);

  font-family:
    "SUIT-Light",
    sans-serif;

  font-size:
    13px;

  font-weight: 300;

  line-height: 1;

  font-variant-numeric:
    tabular-nums;

  text-align: center;
}


/* =========================================================
   20. Body Lock
========================================================= */

body.modal-open {
  overflow: hidden;
}


/* =========================================================
   21. Desktop Hover
========================================================= */

@media (hover: hover) {

  .gallery-nav:hover {
    color:
      var(--color-ink);
  }


  .gallery-modal__nav:hover {
    color:
      #ffffff;
  }

}


/* =========================================================
   22. Small Mobile
========================================================= */

@media (max-width: 360px) {

  .gallery-stage {
    --gallery-gap:
      10px;

    --gallery-peek:
      28px;
  }


  .gallery-controls {
    grid-template-columns:
      44px
      1fr
      44px;

    margin-top:
      18px;
  }


  .gallery-nav {
    width:
      44px;

    height:
      44px;

    font-size:
      40px;
  }


  .gallery-modal {
    padding:
      18px
      36px
      50px;
  }


  .gallery-modal__image {
    max-width:
      88vw;

    max-height:
      72vh;
  }


  .gallery-modal__nav {
    width:
      36px;

    font-size:
      42px;
  }

}


/* =========================================================
   23. Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .gallery-grid,
  .gallery-item,
  .gallery-nav {
    transition:
      none;
  }

}