/* PL2 works detail 09 전용 (공통 구조는 works-detail.css)
   피그마: Works_Detail (node 2345:67464, 콘텐츠 18500) — Matièr Product & Brand Film
   다크 테마 + GNB Type=T/W. 섹션 리듬 320px, 내부 240 / 120 / 80. */

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

/* 섹션 5·6·7 헤더 설명만 행간 34 */
.wd-head--lh34 .wd-head-desc {
  line-height: min(1.7708vw, 34px) /* 34 */;
}

.wd-head--center {
  gap: min(1.25vw, 24px);
}

.wd9-section {
  display: flex;
  flex-direction: column;
  gap: min(4.1667vw, 80px);
}

.wd9-stack120 {
  display: flex;
  flex-direction: column;
  gap: min(6.25vw, 120px);
}

/* ══ 2. 질문 (세로 여백 240) ═══════════════════════════ */
.wd9-question {
  padding: min(12.5vw, 240px) 0;
}

/* ══ 3·6. 스토리보드 스트립 (218x183 × 8열 × 4행을 한 장으로) ══ */
.wd9-strip {
  width: 100%;
  aspect-ratio: 1920 / 756;
  object-fit: cover;
}

/* ══ 4. 제품 라인 캐러셀 (PC 피드백_0930, 피그마 Frame 2116929521) ══
   1920x860 틀 안에 Back 1558x860 (x 181) 고정 + 박스 창 301x295 (x 1189, y 225, r 4)
   + 점 3개 (8x8, 간격 8, 아래에서 16). 좌표는 모두 틀 기준 % 라 화면 폭에 비례한다. */
.wd9-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 860;
}

/* 슬라이드 창 = 이미지 영역 전체 (피그마 Back 1558x860, x=181) */
.wd9-carousel-window {
  position: absolute;
  top: 0;
  left: 9.427%; /* 181 / 1920 */
  width: 81.146%; /* 1558 / 1920 */
  height: 100%;
  overflow: hidden;
}

.wd9-carousel-track {
  display: flex;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.wd9-carousel-track.is-wrapping {
  transition: none;
}

.wd9-carousel-track img {
  flex: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wd9-carousel-dots {
  position: absolute;
  top: 97.209%; /* 836 / 860 */
  left: 50%;
  display: flex;
  gap: min(0.4167vw, 8px); /* 8 */
  transform: translateX(-50%);
}

.wd9-carousel-dot {
  width: min(0.4167vw, 8px); /* 8 */
  height: min(0.4167vw, 8px);
  border-radius: 50%;
  background: #a6a6a6;
  transition: background-color 0.4s ease;
}

.wd9-carousel-dot.is-active {
  background: #eeeeee;
}

/* ══ 5. 브랜드 무드 블록들 ═════════════════════════════ */
.wd9-wide-1200 {
  display: block;
  width: 62.5%; /* 1200 / 1920 */
  margin: 0 auto;
  aspect-ratio: 1200 / 662;
  object-fit: cover;
}

.wd9-wide-1558 {
  display: block;
  width: 81.146%; /* 1558 / 1920 */
  margin: 0 auto;
  aspect-ratio: 1558 / 860;
  object-fit: cover;
}

.wd9-square {
  display: block;
  width: 64.792%; /* 1244 / 1920 */
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* 954x1200 듀오 (오른쪽 120 아래) */
.wd9-duo-tall {
  display: flex;
  align-items: flex-start;
  gap: 0.625%; /* 12 / 1920 */
}

.wd9-duo-tall img {
  width: 49.688%; /* 954 / 1920 */
  aspect-ratio: 954 / 1200;
  object-fit: cover;
}

.wd9-duo-tall img:last-child {
  margin-top: min(6.25vw, 120px);
}

/* 954x513 한 장 (좌 / 우 교대) */
.wd9-half {
  width: 49.688%; /* 954 / 1920 */
  aspect-ratio: 954 / 513;
  object-fit: cover;
}

.wd9-half--right {
  align-self: flex-end;
}

/* ══ 7. 모델 컷 ════════════════════════════════════════ */
.wd9-duo-580 {
  display: flex;
  align-items: flex-start;
  gap: 0.625%;
}

.wd9-duo-580 img {
  width: 49.688%;
  aspect-ratio: 954 / 580;
  object-fit: cover;
}

.wd9-duo-580 img:last-child {
  margin-top: min(6.25vw, 120px);
}

.wd9-model-last {
  width: 50%; /* 960 / 1920 */
  aspect-ratio: 960 / 1141;
  object-fit: cover;
}