/* PL2 works detail 03 전용 (공통 구조는 works-detail.css)
   피그마: Works_Detail (node 2345:60592) — Haruharu Product Production
   라이트 테마(`.wd-body--light`) + GNB Type=T/B.
   섹션 리듬 320px, 섹션 내부는 160 / 120 / 80 / 32. */

/* 헤더 설명 행간: 섹션 3·5·6 은 34, 섹션 2(가운데)는 32 */
.wd-head-desc {
  line-height: min(1.7708vw, 34px) /* 34 */;
}

.wd-head--center .wd-head-desc {
  line-height: min(1.6667vw, 32px) /* 32 */;
}

/* ══ 2. 브랜드 필름 ════════════════════════════════════ */
.wd3-film {
  display: flex;
  flex-direction: column;
  gap: min(4.1667vw, 80px);
}

/* 피그마: 1244x700 연회색 판 위에 892x596 이미지를 176/52 인셋으로 얹음 */
.wd3-film-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64.792%; /* 1244 / 1920 */
  margin: 0 auto;
  aspect-ratio: 1244 / 700;
  background: #f5f6f7;
}

.wd3-film-plate img {
  width: 71.704%; /* 892 / 1244 */
  aspect-ratio: 892 / 596;
  object-fit: cover;
}

/* 판 ↔ 캡션 32 (헤더 ↔ 판은 부모의 80) */
.wd3-film-media {
  display: flex;
  flex-direction: column;
  gap: min(1.6667vw, 32px);
}

.wd3-film-caption {
  color: var(--pl2-neutral-40);
  font-size: min(1.0417vw, 20px) /* 20 */;
  font-weight: 500;
  line-height: min(1.6667vw, 32px) /* 32 */;
  text-align: center;
}

/* ══ 3·5. 큰 이미지 2장 (좌 → 우 엇갈림) ═══════════════ */
.wd3-pair {
  display: flex;
  flex-direction: column;
  gap: min(6.25vw, 120px);
}

.wd3-pair-a {
  width: 53.802%; /* 1033 / 1920 */
  aspect-ratio: 1033 / 554;
  object-fit: cover;
}

.wd3-pair-b {
  align-self: flex-end;
  width: 61.927%; /* 1189 / 1920 */
  aspect-ratio: 1189 / 639;
  object-fit: cover;
}

/* 섹션 3·5 는 헤더와 이미지 사이 80 */
.wd3-section {
  display: flex;
  flex-direction: column;
  gap: min(4.1667vw, 80px);
}

/* 섹션 4 는 헤더와 이미지 사이 120 */
.wd3-section--gap120 {
  gap: min(6.25vw, 120px);
}

/* ══ 4. 제품 컷 ════════════════════════════════════════ */
.wd3-products {
  width: 100%;
  aspect-ratio: 1920 / 1080;
  object-fit: cover;
}

/* 954 두 장 (12px 간격), 한쪽은 아래/한쪽은 위로 120 엇갈림
   ⚠ 2026-09-05: 아래 셀렉터들이 `img` 만 잡고 있어서 GIF→영상으로 바꾼 슬롯
   (.wd3-duo--left-low 안의 <video> 2개)이 규칙을 하나도 못 받고 있었다.
   1151x700 / object-fit: contain / align-self: auto 로 그려져 컨테이너를 넘쳤다.
   NOTES "마크업" 절의 `.wd10-row img` 와 같은 종류의 누락이다. */
.wd3-duo {
  display: flex;
  gap: 0.625%; /* 12 / 1920 */
  height: min(36.4583vw, 700px);
}

.wd3-duo > img,
.wd3-duo > video,
.wd3-duo > .wd3-crop {
  width: 49.688%; /* 954 / 1920 */
  aspect-ratio: 954 / 580;
  object-fit: cover;
}

.wd3-duo--left-low > :first-child {
  align-self: flex-end;
}

.wd3-duo--right-low > :last-child {
  align-self: flex-end;
}

.wd3-duo--left-low > :last-child,
.wd3-duo--right-low > :first-child {
  align-self: flex-start;
}

/* 피그마 CROP 채우기 재현 (PC 피드백_1007, Rectangle 4238 GIF 2개).
   --sx/--sy = 보이는 영역의 원본 대비 비율, --tx/--ty = 그 영역의 왼쪽/위 시작점.
   영상을 1/sx · 1/sy 배로 키우고 시작점만큼 당겨 틀 밖은 잘라낸다. */
.wd3-crop {
  position: relative;
  overflow: hidden;
}

.wd3-crop video {
  position: absolute;
  left: calc(-100% * var(--tx) / var(--sx));
  top: calc(-100% * var(--ty) / var(--sy));
  width: calc(100% / var(--sx));
  height: calc(100% / var(--sy));
  max-width: none;
  object-fit: fill;
}

/* ══ 6. 모델 컷 ════════════════════════════════════════ */
.wd3-model-last {
  width: 50%; /* 960 / 1920 */
  aspect-ratio: 960 / 1141;
  object-fit: cover;
}

/* 섹션 6: 헤더 ↔ 본문 80, 본문 안(듀오 ↔ 마지막 컷) 120 */
.wd3-stack120 {
  display: flex;
  flex-direction: column;
  gap: min(6.25vw, 120px);
}