/* PL2 works detail 02 전용 (공통 구조는 works-detail.css)
   피그마: Works_Detail (node 2345:60350) — Last Delivery / AI Film Project
   섹션 리듬 320px. 3~6번 섹션은 "왼쪽 이미지 + 오른쪽 4단계 스테퍼"가 반복되고,
   섹션마다 활성 단계(01~04)와 설명이 하나씩 열려 있다. */

/* 이 페이지 헤더는 SemiBold(600) — 상세 01 은 Bold(700) */
.wd-head-title {
  font-weight: 600;
}

/* 섹션 2 헤더: 제목↔설명 간격 24 (상세 01 은 40) */
.wd-head--center {
  gap: min(1.25vw, 24px);
}

/* 이 페이지 헤더 설명은 전부 행간 32 (상세 01 의 왼쪽 헤더는 34) */
.wd-head-desc {
  line-height: min(1.6667vw, 32px) /* 32 */;
}

/* ══ 2. 가운데 질문 섹션 (646 높이에 헤더가 세로 중앙) ══ */
.wd2-question {
  padding: min(12.5vw, 240px) 0;
}

/* ══ 3~6. 이미지 + 스테퍼 ══════════════════════════════ */
.wd2-step-section {
  display: flex;
  align-items: center;
  height: min(50vw, 960px);
}

.wd2-step-section--tall {
  height: min(53.6979vw, 1031px);
}

/* 왼쪽 이미지(콜라주) — 피그마 960x960 을 통째로 export */
.wd2-collage {
  flex: none;
  width: 50%; /* 960 / 1920 */
  aspect-ratio: 960 / 960;
  object-fit: contain;
}

/* 파이프라인 다이어그램 자리 (피그마 710x960, 내용은 오른쪽에 붙는다) */
.wd2-pipeline-wrap {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  width: 36.979%; /* 710 / 1920 */
  height: min(50vw, 960px);
}

/* 스테퍼 (피그마 x=1240, w=680 / 내부 620) */
.wd2-steps {
  flex: none;
  width: 35.417%; /* 680 / 1920 */
  margin-left: 14.583%; /* 1240 - 960 = 280 → 280/1920 */
}

.wd2-steps--after-pipeline {
  margin-left: 27.604%; /* 1240 - 710 = 530 → 530/1920 */
}

.wd2-step-list {
  display: flex;
  flex-direction: column;
  gap: min(2.0833vw, 40px);
  width: 91.176%; /* 620 / 680 */
}

.wd2-step {
  display: flex;
  flex-direction: column;
}

.wd2-step-head {
  display: flex;
  gap: min(0.8333vw, 16px);
  color: var(--pl2-neutral-30); /* 비활성 #555555 */
  font-family: var(--pl2-font-display);
  font-size: min(2.7083vw, 52px) /* 52 */;
  font-weight: 400;
  line-height: min(3.2292vw, 62px) /* 62 */; /* 120% */
}

.wd2-step[data-active="true"] .wd2-step-head {
  color: var(--pl2-neutral-90); /* 활성 #F5F5F5 */
}

.wd2-step-desc {
  margin-top: min(1.25vw, 24px);
  color: var(--pl2-neutral-60);
  font-size: min(0.9375vw, 18px) /* 18 */;
  font-weight: 300;
  line-height: min(1.7708vw, 34px) /* 34 */;
}

/* ══ 파이프라인 다이어그램 ═════════════════════════════
   점 6개(12px)를 100px 간격으로 세로 배치, 사이 60px 선.
   레이블은 좌우 교대 (피그마 374x524). */
.wd2-pipe {
  display: grid;
  grid-template-columns: min(6.25vw, 120px) min(1.25vw, 24px) min(7.8125vw, 150px);
  column-gap: min(2.0833vw, 40px);
  row-gap: min(3.9583vw, 76px);
  grid-auto-rows: min(1.25vw, 24px);
}

.wd2-pipe-label {
  align-self: center;
  color: var(--pl2-neutral-50);
  font-size: min(1.0417vw, 20px) /* 20 */;
  font-weight: 500;
  line-height: min(1.5104vw, 29px) /* 29 */;
  white-space: nowrap;
}

.wd2-pipe-label--left {
  grid-column: 1;
  text-align: right;
}

.wd2-pipe-label--right {
  grid-column: 3;
  text-align: left;
}

.wd2-pipe-dot {
  position: relative;
  grid-column: 2;
  width: min(1.25vw, 24px);
  height: min(1.25vw, 24px);
}

.wd2-pipe-dot::before {
  content: "";
  position: absolute;
  top: min(0.3125vw, 6px);
  left: min(0.3125vw, 6px);
  width: min(0.625vw, 12px);
  height: min(0.625vw, 12px);
  border-radius: 50%;
  background: var(--pl2-neutral-70);
}

/* 마지막 점 빼고 아래로 연결선 */
.wd2-pipe-dot:not(:last-of-type)::after {
  content: "";
  position: absolute;
  top: min(1.6667vw, 32px);
  left: min(0.5729vw, 11px);
  width: min(0.1042vw, 2px);
  height: min(3.125vw, 60px);
  background: var(--pl2-neutral-70);
}

/* ══ 3~6. 단계 스크롤 (wd2-story.js 가 .is-ready 와 data-step 을 붙인다) ══
   스테이지는 가장 큰 단계(1031) 높이로 화면 세로 가운데에 고정되고,
   바깥 .wd2-story 높이(스테이지 + 단계 수 x 화면 높이)만큼 스크롤하는 동안 단계가 바뀐다.
   단계마다 화면 한 높이씩 스크롤하면 다음으로 넘어간다. */
.wd2-story.is-ready {
  --stage-h: min(53.6979vw, 1031px);
  position: relative;
  height: calc(var(--stage-h) + 3 * 100vh);
}

/* 고정 위치: 왼쪽 이미지가 GNB(위 12 + 높이 60 = 72) 아래 보이는 영역의 세로 정중앙에 오도록.
   이미지는 스테이지 세로 가운데에 있으므로 스테이지 중심을 (72 + 화면 높이) / 2 에 맞춘다.
   화면이 스테이지보다 낮아도 0 으로 막지 않는다 — 막으면 이미지가 중앙보다 아래로 쏠렸다. */
.wd2-story.is-ready .wd2-story-stage {
  position: sticky;
  top: calc((100vh - var(--stage-h)) / 2 + 36px);
  height: var(--stage-h);
}

.wd2-story.is-ready .wd2-step-section {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.wd2-story.is-ready .wd2-step-section.is-current {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0s;
}

/* 새 단계의 왼쪽 비주얼은 아래에서 살짝 올라오며 들어온다 */
.wd2-story.is-ready .wd2-collage,
.wd2-story.is-ready .wd2-pipeline-wrap {
  translate: 0 min(2.0833vw, 40px);
  transition: translate 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.wd2-story.is-ready .is-current .wd2-collage,
.wd2-story.is-ready .is-current .wd2-pipeline-wrap {
  translate: 0 0;
}

/* 단계별 목록은 숨기고 공용 목록(wd2-story.js 가 만든다)을 스테이지 오른쪽에 둔다.
   피그마 x=1240, 폭 620, 세로 가운데. 활성 항목 설명은 높이가 0 → 자기 높이로 펼쳐진다. */
.wd2-story.is-ready .wd2-step-section .wd2-steps {
  visibility: hidden;
}

.wd2-story-list {
  position: absolute;
  top: 50%;
  left: 64.583%; /* 1240 / 1920 */
  z-index: 1;
  width: 32.292%; /* 620 / 1920 */
  translate: 0 -50%;
}

.wd2-story-list .wd2-step-head {
  transition: color 0.5s ease;
}

.wd2-story-desc {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease;
}

/* 설명 위 간격(24)도 접히는 영역 안에 넣어야 비활성 항목 사이가 피그마대로 40 이 된다 */
.wd2-story-desc > .wd2-step-desc {
  overflow: hidden;
  min-height: 0;
  margin-top: 0;
}

/* 패딩·마진은 높이 0 으로 안 접히므로 안쪽 빈 블록으로 간격을 만든다 */
.wd2-story-desc > .wd2-step-desc::before {
  content: "";
  display: block;
  height: min(1.25vw, 24px);
}

.wd2-story-list .wd2-step[data-active="true"] .wd2-story-desc {
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.5s ease 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  .wd2-story-desc,
  .wd2-story-list .wd2-step-head,
  .wd2-story.is-ready .wd2-step-section,
  .wd2-story.is-ready .wd2-collage,
  .wd2-story.is-ready .wd2-pipeline-wrap {
    transition: none;
  }
}

/* ══ 7. 시퀀스 그리드 (3x2) ════════════════════════════ */
.wd2-sequence {
  display: flex;
  flex-direction: column;
  gap: min(4.1667vw, 80px);
}

.wd2-seq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: min(0.4167vw, 8px) min(0.3906vw, 7.5px); /* 피그마 열 간격 8/7, 행 간격 8 */
  padding: min(4.1667vw, 80px) 0;
  background: var(--pl2-neutral-5); /* #111111 */
}

.wd2-seq-grid img {
  width: 100%;
  aspect-ratio: 635 / 357;
  object-fit: cover;
}

/* ══ 8. 영상 섹션 ══════════════════════════════════════ */
.wd2-video {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1080;
  overflow: hidden;
}

.wd2-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

/* 재생 버튼. 클릭 영역은 섹션 전체, 삼각형은 ::before (상세 08 과 같은 방식) */
.wd2-video-play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.wd2-video-play::before {
  content: "";
  /* PlayBTN (PC 피드백_0930, 피그마 2930:35707): 흰 삼각형 30x54, 모서리 1.5,
     그림자 0 0 50 #000@30%. 상세 02·05·06·08·10 공통 아이콘 */
  width: min(1.5625vw, 30px);
  height: min(2.8125vw, 54px);
  background: url("icon-play.svg") center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 min(1.3021vw, 25px) rgba(0, 0, 0, 0.3));
  transition: opacity 300ms ease;
}

.wd2-video[data-playing="true"] .wd2-video-play::before {
  opacity: 0;
}

.wd2-video-play:focus-visible {
  outline: min(0.1042vw, 2px) solid var(--pl2-white);
  outline-offset: min(-0.2083vw, -4px);
}