/* PL2 works detail 06 전용 (공통 구조는 works-detail.css)
   피그마: Works_Detail (node 2345:61612) — Evercell Product Photography Campaign
   프레임은 14555 지만 실제 콘텐츠는 17438 (프레임이 잘려 있음) → 콘텐츠 기준.
   라이트 테마 + GNB Type=T/B, 히어로만 어둡다(`.wd-hero--dark`).
   섹션 리듬 320px, 섹션 내부 160 / 120 / 80. */

.wd-head-desc {
  line-height: min(1.6667vw, 32px) /* 32 */; /* 이 페이지 헤더 설명은 전부 32 */
}

/* 히어로 딤 (2026-09-05)
   피그마 Dim 레이어의 선언값은 검정 20% → 투명인데, 피그마가 실제로 래스터화한
   결과의 실효 알파는 왼쪽 끝에서 약 0.178 이다 (렌더 픽셀에서 역산).
   공통 .wd-hero-dim(선언값 0.2)을 그대로 쓰면 화면 왼쪽 절반이 피그마 렌더보다
   최대 5.5/255 어둡다 — 베이스 이미지(0.05 이내 일치)와 CSS 알파(이론값과 0.0006 이내)를
   각각 검증했으므로 남은 원인은 그라디언트 래스터화 차이뿐이다.
   이 페이지만 피그마 "렌더" 기준으로 맞춘다. 나머지 상세 9개는 공통 0.2 그대로다.
   works-detail-06.css 는 works-detail.css 뒤에 로드되므로 같은 특이도로 덮인다. */
.wd-hero-dim {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* 가운데 헤더도 제목↔설명 간격 24 (공통 기본값은 40) */
.wd-head--center {
  gap: min(1.25vw, 24px);
}

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

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

/* ══ 2. 컬렉션 컷 (1558x835 가운데) ════════════════════ */
.wd6-collection {
  display: block;
  width: 81.146%; /* 1558 / 1920 */
  margin: 0 auto;
  aspect-ratio: 1558 / 835;
  object-fit: cover;
}

/* ══ 공통 이미지 크기들 ════════════════════════════════ */
.wd6-half {
  width: 50%; /* 960 / 1920 */
  aspect-ratio: 960 / 1141;
  object-fit: cover;
}

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

.wd6-wide {
  display: block;
  width: 64.792%; /* 1244 / 1920 */
  margin: 0 auto;
  aspect-ratio: 1244 / 686;
  object-fit: cover;
}

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

.wd6-tall {
  width: 57.865%; /* 1111 / 1920 */
  aspect-ratio: 1111 / 720;
  object-fit: cover;
}

.wd6-small {
  align-self: flex-end;
  width: 37.292%; /* 716 / 1920 */
  aspect-ratio: 716 / 520;
  object-fit: cover;
}

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

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

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

/* ══ 8. 캠페인 포트레이트 2x2 (오른쪽 열이 151 아래) ═══ */
.wd6-quad {
  display: flex;
  align-items: flex-start;
  gap: 0.521%; /* 10 / 1920 */
}

.wd6-quad-col {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: min(0.4948vw, 9.5px); /* 피그마 9 / 10 이 섞여 나온다 */
  width: 49.792%; /* 956 / 1920 */
}

.wd6-quad-col:last-child {
  margin-top: min(7.8646vw, 151px);
}

.wd6-quad-col img {
  width: 100%;
  aspect-ratio: 956 / 514;
  object-fit: cover;
}

/* ══ 9. 영상 ═══════════════════════════════════════════ */
.wd6-video {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1080;
  overflow: hidden;
}

.wd6-video img,
.wd6-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 이 페이지 재생 삼각형은 76x66 (상세 02·05 는 95x82) */
.wd6-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;
}

.wd6-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;
}

/* poster jpg 에 딤(검정 60%)이 이미 구워져 있어서 재생 중에는
   video 프레임이 그대로 밝아진다 — CSS 딤은 상세 08 에만 있다. */
.wd6-video[data-playing="true"] .wd6-video-play::before {
  opacity: 0;
}

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