/* PL2 works detail 08 전용 (공통 구조는 works-detail.css)
   피그마: Works_Detail (node 2345:67312, 콘텐츠 12134) — Smart things 2D Motion Project
   **다크 테마** (Content fill #000000) + GNB Type=T/W. 섹션 리듬 320px, 내부 160 / 120 / 80. */

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

/* 가운데 헤더는 제목↔설명 24 */
.wd-head--center {
  gap: min(1.25vw, 24px);
}

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

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

/* ══ 1558x835 미디어 (가운데) — 2번은 영상, 6번은 이미지 ══ */
.wd8-wide {
  display: block;
  width: 81.146%; /* 1558 / 1920 */
  margin: 0 auto;
  aspect-ratio: 1558 / 835;
  object-fit: cover;
  background: var(--pl2-neutral-5);
}

/* ══ 3. 엇갈린 3장 (좌 / 우 / 좌) ══════════════════════ */
.wd8-connect-01 {
  align-self: flex-start;
  width: 57.865%; /* 1111 / 1920 */
  aspect-ratio: 1111 / 595;
  object-fit: cover;
}

.wd8-connect-02 {
  align-self: flex-end;
  width: 37.292%; /* 716 / 1920 */
  aspect-ratio: 716 / 384;
  object-fit: cover;
}

.wd8-connect-03 {
  align-self: flex-start;
  width: 49.688%; /* 954 / 1920 */
  aspect-ratio: 954 / 513;
  object-fit: cover;
}

/* ══ 4. 모션 에셋 그리드 ═══════════════════════════════ */
.wd8-grid {
  display: block;
  width: 100%;
  aspect-ratio: 1920 / 954;
  object-fit: cover;
}

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

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

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

/* ══ 7. 영상 ═══════════════════════════════════════════ */
.wd8-video {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1080;
  background: var(--pl2-neutral-5);
  overflow: hidden;
}

.wd8-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 피그마: 영상 위에 검정 60%. 재생을 누르면 걷힌다. */
.wd8-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pl2-alpha-60);
  transition: opacity 300ms ease;
  pointer-events: none;
}

.wd8-video[data-playing="true"]::after {
  opacity: 0;
}

/* 재생 버튼. 클릭 영역은 섹션 전체다 — 딤이 덮인 상태에서 어디를 눌러도 재생되고,
   재생 중에 다시 누르면 멈춘다. 삼각형만 ::before 로 그린다. */
.wd8-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;
}

/* 피그마 재생 삼각형 95x82 (흰색 + drop-shadow 0 6.312 31.562 검정 25%) */
.wd8-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;
}

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

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