/* ===========================================================================
   가로 스크롤 갤러리 — Apple의 "일단 핵심부터"

   카드가 옆으로 늘어서고 스크롤이 카드 단위로 붙는다(scroll-snap). 오른쪽
   아래에 동그란 화살표 두 개.

   JS가 없어도 손가락과 트랙패드로 그대로 넘어간다 — 화살표는 마우스 사용자를
   위한 보조 장치일 뿐이다. 그래서 버튼은 스크립트가 켤 때만 나타난다.
   =========================================================================== */

.gallery {
  position: relative;
}

.gallery__track {
  display: flex;
  gap: var(--nx-sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* 트랙은 화면 끝까지 흐르되 첫 카드는 본문 왼쪽 선에 맞춘다. 넓은 컨테이너의
     폭은 안쪽 여백을 품고 있으므로 그 여백만큼 더 들여야 선이 맞는다. 기준은
     100vw가 아니라 부모 폭(100%)이다. 100vw는 세로 스크롤바까지 세어 선이 어긋난다. */
  padding-inline: max(var(--nx-sp-6),
      calc((100% - var(--nx-container-wide)) / 2 + var(--nx-sp-6)));
  padding-block: var(--nx-sp-2) var(--nx-sp-6);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gallery__track::-webkit-scrollbar {
  display: none;
}

.gallery__card {
  position: relative;
  flex: 0 0 360px;
  height: 520px;
  scroll-snap-align: center;
  border-radius: var(--nx-r-2xl);
  overflow: hidden;
  background: var(--nx-bg-sunken);
  color: var(--nx-text);
  display: flex;
  flex-direction: column;
  padding: var(--nx-sp-10) var(--nx-sp-8);
  isolation: isolate;
}

.gallery__card--dark {
  background: var(--nx-s-dark);
  color: var(--nx-text-invert);
}

.gallery__card--accent {
  background: linear-gradient(150deg, #0071e3 0%, #003f8a 100%);
  color: #ffffff;
}

/* 사진 카드: 사진을 아래쪽에 깔고 위를 어둡게 눌러 글자를 띄운다. */
.gallery__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.gallery__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__card--photo {
  color: var(--nx-text-invert);
}

.gallery__card--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.22) 62%,
      rgba(0, 0, 0, 0.5) 100%);
}

.gallery__eyebrow {
  font-size: var(--nx-fs-sm);
  font-weight: 600;
  color: currentColor;
  opacity: 0.7;
  margin-bottom: var(--nx-sp-4);
}

.gallery__claim {
  font-size: var(--nx-fs-xl);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: var(--nx-tracking-tight);
}

.gallery__value {
  font-size: 60px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--nx-tracking-tight);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--nx-sp-3);
  white-space: nowrap;
}

.gallery__value small {
  font-size: 0.34em;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-left: 2px;
}

.gallery__body {
  margin-top: auto;
  font-size: var(--nx-fs-base);
  line-height: 1.5;
  color: currentColor;
  opacity: 0.72;
}

/* 파란 면 위에서 흰 글자를 흐리면 3.05:1로 떨어진다. 여기서만 온전히 칠한다. */
.gallery__card--accent .gallery__eyebrow,
.gallery__card--accent .gallery__body {
  opacity: 1;
}

/* ── 화살표 패들 ─────────────────────────────────────────── */

.gallery__pads {
  display: none;
  gap: var(--nx-sp-2);
  justify-content: flex-end;
  max-width: var(--nx-container-wide);
  margin-inline: auto;
  padding-inline: var(--nx-sp-6);
}

.js .gallery__pads {
  display: flex;
}

/* 손가락으로 누르는 버튼이다. 44px 아래로 내리지 않는다. */
.gallery__pad {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: var(--nx-text-2);
  cursor: pointer;
  transition: background var(--nx-t-fast), opacity var(--nx-t-fast);
}

.gallery__pad:hover {
  background: rgba(0, 0, 0, 0.12);
  color: var(--nx-text);
}

.gallery__pad[disabled] {
  opacity: 0.32;
  cursor: default;
}

.section--dark .gallery__pad {
  background: rgba(255, 255, 255, 0.14);
  color: var(--nx-text-invert-2);
}

.section--dark .gallery__pad:hover {
  background: rgba(255, 255, 255, 0.24);
  color: var(--nx-text-invert);
}

@media (max-width: 720px) {
  .gallery__card {
    flex: 0 0 78vw;
    height: 440px;
    padding: var(--nx-sp-8) var(--nx-sp-6);
  }
  .gallery__track {
    gap: var(--nx-sp-4);
    padding-inline: var(--nx-sp-5);
  }
  .gallery__value {
    font-size: 46px;
  }
}

/* 화살표로 넘길 때의 부드러운 이동도 움직임이다. 줄이라고 하면 바로 옮긴다. */
@media (prefers-reduced-motion: reduce) {
  .gallery__track {
    scroll-behavior: auto;
  }
}