/* product.css — 제품 상세(product_*) 공통 스타일. 7개 제품 페이지가 공유. */

/* =========================================================
   히어로: 수중 배경 + 메인 제품 + 원형 썸네일
   z: bg(0) < watermark(1) < wave(2) < 콘텐츠(3)
   ========================================================= */
.product-hero {
  position: relative;
  background: #265294;
  padding-top: var(--space-2xl);
  aspect-ratio: 1920 / 792;
  max-height: 792px;
}

.product-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* 워터마크: 무한 마퀴 (좌로 흐르는 큰 텍스트) */
.product-hero__watermark {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.product-hero__marquee {
  display: inline-flex;
  flex-wrap: nowrap;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
  animation: product-marquee 32s linear infinite;
}

.product-hero__marquee span {
  display: block;
  padding-right: 0.35em;
  /* 반복 사이 간격 (두 span 동일 → -50% 이음매 없음) */
  font-size: 150px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--whitebg-10);
}

@keyframes product-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* 하단 물결: 무한 루프 SVG (수중 → 흰 본문 전환) */
.product-hero__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 90px;
  z-index: 2;
  line-height: 0;
  pointer-events: none;
}

.product-hero__wave-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.product-hero__wave-layers>use {
  animation: product-wave 25s cubic-bezier(.55, .5, .45, .5) infinite;
}

.product-hero__wave-layers>use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}

.product-hero__wave-layers>use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}

.product-hero__wave-layers>use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}

.product-hero__wave-layers>use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}

@keyframes product-wave {
  0% {
    transform: translate3d(-90px, 0, 0);
  }

  100% {
    transform: translate3d(85px, 0, 0);
  }
}

/* 모션 최소화 선호 시 정지 */
@media (prefers-reduced-motion: reduce) {

  .product-hero__marquee,
  .product-hero__wave-layers>use {
    animation: none;
  }
}

.product-hero__inner {
  position: relative;
  z-index: 3;
  max-width: var(--container-3xl);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lm);
}

.product-hero__main {
  flex: 1 1 auto;
  min-width: 0;
}

.product-hero__main img {
  display: block;
  width: 100%;
  /* 종횡비 유지(width:100%/height:auto)하다가 최대너비·최대높이를 넘으면
     object-fit:contain 으로 왜곡 없이 가운데 정렬(레터박스).
     모바일에서는 아래 미디어쿼리가 max-width/max-height 를 해제해 폭에 맞춘다. */
  max-width: 1320px;
  height: auto;
  max-height: 720px;
  object-fit: contain;
  margin: 0 auto;
}

.product-hero__thumbs {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding-bottom: var(--space-ml);
}

.product-hero__thumbs li {
  width: 180px;
  height: 180px;
}

.product-hero__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-full);
}

/* =========================================================
   본문: 설명 + CTA / 디테일 이미지
   ========================================================= */
.product-detail {
  max-width: var(--container-3xl);
  margin: 0 auto;
  padding: var(--space-l) var(--gutter) var(--space-5xl);
  /* top 48 · bottom 120 */
  display: flex;
  align-items: center;
  gap: var(--space-3xl);
  /* 80 */
}

.product-detail__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-ml);
  /* 32 — 디테일 이미지 있으면 잔여폭(~920), 없으면 전체폭 */
}

.product-detail__title {
  margin: 0;
  font-size: 64px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: var(--tracking);
  color: var(--gray-900);
}

.product-detail__desc {
  font-size: var(--fs-body-3);
  /* 16 */
  line-height: 1.5;
  letter-spacing: var(--tracking);
  color: var(--gray-700);
}

/* 일반 문단은 타이트(시안: mb-0, line-height 1.5로만 구분) */
.product-detail__desc p {
  margin: 0;
}

/* 강조(medium) 문단 — 시안의 리드/마무리 문장. 인접 일반 문단과 약간 띄움 */
.product-detail__desc p.is-em {
  font-weight: 500;
}

.product-detail__desc p.is-em:not(:first-child) {
  margin-top: var(--space-xs);
}

.product-detail__desc p.is-em:not(:last-child) {
  margin-bottom: var(--space-xs);
}

.product-detail__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-s) var(--space-m);
  /* 16 · 24 */
  background: var(--primary-700);
  color: var(--white);
  font-size: var(--fs-body-3);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--tracking);
  text-decoration: none;
  transition: background .15s;
}

.product-detail__cta:hover {
  background: var(--primary-800);
}

.product-detail__cta svg {
  flex-shrink: 0;
}

.product-detail__image {
  flex: 0 0 auto;
  width: 600px;
  max-width: 45%;
  margin: 0;
}

.product-detail__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================================
   반응형: 모바일 시안 (≤1024px)
   [보울 → 썸네일(가로) → 디테일 → 제목/설명/버튼] 중앙 스택
   ========================================================= */
@media (max-width: 1024px) {

  /* 히어로: 보울 + 가로 썸네일만 (수중 배경) */
  .product-hero {
    padding-top: var(--space-ml);
    padding-left: 20px;
    padding-right: 20px;
  }

  .product-hero__watermark {
    bottom: 5%;
  }

  .product-hero__marquee span {
    font-size: 40px;
  }

  .product-hero__wave {
    height: 48px;
  }

  .product-hero__inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-s);
    padding: 0;
  }

  .product-hero__main img {
    width: 100%;
    max-width: none;
    max-height: none;
  }

  /* 썸네일 가로 배치 · 72px */
  .product-hero__thumbs {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-xs);
    padding-bottom: 0;
  }

  .product-hero__thumbs li {
    width: 72px;
    height: 72px;
  }

  /* 본문: 세로 스택 · 가운데 정렬 · 디테일 이미지 먼저 */
  .product-detail {
    flex-direction: column;
    align-items: center;
    /* text-align: center; */
    gap: var(--space-s);
    padding: var(--space-ml) 20px var(--space-3xl);
    /* 32 · 80 */
  }

  .product-detail__image {
    order: -1;
    width: 260px;
    max-width: 100%;
  }

  .product-detail__text {
    max-width: none;
    align-items: center;
    gap: var(--space-s);
  }

  .product-detail__title {
    font-size: 32px;
  }

  .product-detail__desc {
    font-size: 15px;
  }

  .product-detail__cta {
    align-self: center;
    padding: var(--space-xs) var(--space-s);
    /* 8 · 16 */
    font-size: 15px;
  }

  /* 모바일 버튼은 화살표 없음 (시안) */
  .product-detail__cta svg {
    display: none;
  }
}