/* PL2 works detail 01 전용 (공통 구조는 works-detail.css)
   피그마: Works_Detail (node 2345:59621) — Samsung Generative AI Image Sample Project */

/* PL2 works detail 01 (works-detail-01.html)
   피그마: PL2 Production (전달) > Works_Detail (node 2345:59621)
   - 프레임은 11040 이지만 실제 콘텐츠는 14181 (피그마 프레임이 잘려 있음) → 콘텐츠 기준
   - 페이지 전체가 검정(#000, Content fill) 다크 테마
   - 섹션 사이 320px 리듬, 섹션 내부는 160/80/40
   - 접두사 wd- : Works_Detail 공용 의도 (상세 2번부터 공통 부분 분리 예정)
   1920 기준 가로 오프셋은 %로 환산, 이미지 박스는 aspect-ratio 로 비율 유지 */

/* ══ 2. 스타일 전환 (이미지 + 프롬프트 카드) ═══════════ */
.wd-style {
  display: flex;
  flex-direction: column;
  gap: min(4.1667vw, 80px);
}

/* 스타일 전환 영상 1920x928 (2026-10-13, 이미지 + 프롬프트 카드를 대체) */
.wd-style-video {
  display: block;
  width: 100%;
  aspect-ratio: 1920 / 928;
  object-fit: cover;
}

.wd-style-body {
  display: flex;
  flex-direction: column;
  gap: min(2.0833vw, 40px);
  align-items: center;
}

.wd-style-img {
  width: 30.208%; /* 580 / 1920 */
  aspect-ratio: 580 / 640;
  object-fit: cover;
}

/* 프롬프트 카드 (피그마 2345:59638) */
.wd-prompt {
  display: flex;
  flex-direction: column;
  gap: min(0.625vw, 12px);
  width: 55.208%; /* 1060 / 1920 */
  padding: min(1.5625vw, 30px) min(1.875vw, 36px) min(1.25vw, 24px);
  border-radius: min(0.7884vw, 15.138px);
  background: var(--pl2-neutral-20);
}

.wd-prompt-label {
  color: var(--pl2-neutral-80);
  font-family: var(--pl2-font-mono);
  font-size: min(1.0417vw, 20px) /* 20 */;
  font-weight: 500;
  line-height: min(1.6667vw, 32px) /* 32 */;
  letter-spacing: -0.02em;
}

.wd-prompt-text {
  color: var(--pl2-white);
  font-family: var(--pl2-font-mono);
  font-size: min(0.8333vw, 16px) /* 16 */;
  font-weight: 400;
  line-height: min(1.5625vw, 30px) /* 30 */;
  letter-spacing: -0.02em;
}

.wd-prompt-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wd-prompt-plus {
  width: min(1.5625vw, 30px);
  height: min(1.5625vw, 30px);
}

.wd-prompt-send {
  width: min(2.5vw, 48px);
  height: min(2.5vw, 48px);
}

/* ══ 1. 히어로 영상 확대 ═══════════════════════════════
   영상 파일 위아래에 검정 레터박스가 구워져 있어서 그대로 깔면 영상이 메뉴바 아래부터
   시작하는 것처럼 보인다 (PC 피드백_0930). 피그마도 VIDEO fill 을 CROP 0.8378 배율로
   가운데 확대해 띠를 잘라낸다 → 1 / 0.8378 = 1.1936 배. poster 도 같은 프레임이라 같이 확대.
   .wd-hero 가 overflow: hidden 이라 넘치는 부분은 잘린다. */
.wd-hero-media {
  transform: scale(1.1936);
}

/* ══ 3. 필름스트립 (무한 회전 캐러셀) ═════════════════════
   피그마 Frame 2116929324: 2638x740 트랙에 작은 칸 200x300 (아래 정렬, 간격 12) 10개와
   가운데 큰 칸 518x740 하나. 큰 칸이 화면 정중앙에 오도록 트랙을 중앙 정렬한다.
   wd1-strip.js 가 주기적으로 모든 이미지의 data-slot 을 하나씩 줄여(왼쪽으로 한 칸)
   가운데 칸에 들어온 이미지는 커지고 나간 이미지는 작아진다. -5 칸에서 밀려난 이미지는
   화면 밖에서 +5 칸으로 순간 이동해 끝없이 이어진다.
   --u = 피그마 1px (1920 에서 1px, 좁아지면 같은 비율로 줄어든다). */
.wd-strip-section {
  display: flex;
  flex-direction: column;
  gap: min(1.6667vw, 32px);
}

.wd-strip {
  --u: min(0.052083vw, 1px);
  position: relative;
  height: calc(var(--u) * 740);
  overflow: hidden;
}

.wd-strip-track {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--u) * 2638);
  height: calc(var(--u) * 740);
  transform: translateX(-50%);
}

.wd-strip-track img {
  position: absolute;
  top: calc(var(--u) * 440);
  width: calc(var(--u) * 200);
  height: calc(var(--u) * 300);
  object-fit: cover;
  /* 2026-10-13 조금 빠르게 1s → 0.8s (wd1-strip.js INTERVAL 과 짝) */
  transition: left 0.8s cubic-bezier(0.65, 0, 0.35, 1),
    top 0.8s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.8s cubic-bezier(0.65, 0, 0.35, 1),
    height 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

/* 화면 밖에서 반대편 끝으로 옮길 때는 움직임 없이 */
.wd-strip-track img.is-wrapping {
  transition: none;
}

/* 칸 위치 (트랙 기준 x). 작은 칸은 212 간격, 가운데 큰 칸 양옆은 12 간격 */
.wd-strip-track img[data-slot="-5"] { left: 0; }
.wd-strip-track img[data-slot="-4"] { left: calc(var(--u) * 212); }
.wd-strip-track img[data-slot="-3"] { left: calc(var(--u) * 424); }
.wd-strip-track img[data-slot="-2"] { left: calc(var(--u) * 636); }
.wd-strip-track img[data-slot="-1"] { left: calc(var(--u) * 848); }
.wd-strip-track img[data-slot="0"] {
  top: 0;
  left: calc(var(--u) * 1060);
  width: calc(var(--u) * 518);
  height: calc(var(--u) * 740);
}
.wd-strip-track img[data-slot="1"] { left: calc(var(--u) * 1590); }
.wd-strip-track img[data-slot="2"] { left: calc(var(--u) * 1802); }
.wd-strip-track img[data-slot="3"] { left: calc(var(--u) * 2014); }
.wd-strip-track img[data-slot="4"] { left: calc(var(--u) * 2226); }
.wd-strip-track img[data-slot="5"] { left: calc(var(--u) * 2438); }

/* 양끝 검정 그라디언트 (피그마 245x360 @ x=-2 / x=1675, y=381) */
.wd-strip::before,
.wd-strip::after {
  content: "";
  position: absolute;
  top: min(19.8438vw, 381px);
  z-index: 1;
  width: min(12.7604vw, 245px);
  height: min(18.75vw, 360px);
  pointer-events: none;
}

.wd-strip::before {
  left: min(-0.1042vw, -2px);
  background: linear-gradient(to right, #000 0%, rgba(0, 0, 0, 0) 100%);
}

.wd-strip::after {
  right: 0;
  background: linear-gradient(to left, #000 0%, rgba(0, 0, 0, 0) 100%);
}

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

/* ══ 4. 레이어 분리 (밴드 + 일러스트) ══════════════════ */
.wd-layer {
  display: flex;
  flex-direction: column;
  gap: min(4.1667vw, 80px);
}

/* 레이어 분리 영상 1920x960 (2026-10-13, 띠 배경 + 이미지를 대체) */
.wd-band-video {
  display: block;
  width: 100%;
  aspect-ratio: 1920 / 960;
  object-fit: cover;
}

.wd-band {
  display: flex;
  justify-content: center;
  width: 100%;
  height: min(50vw, 960px);
  padding: min(5.2083vw, 100px) 0;
  background: #1e2123; /* 피그마 Frame 2116929241 */
}

.wd-band img {
  width: min(20.8333vw, 400px);
  height: min(39.5833vw, 760px);
  object-fit: cover;
}

/* ══ 5. 일러스트 4장 (엇갈린 배치) ═════════════════════ */
.wd-illust {
  display: flex;
  gap: 3.125%; /* 60 / 1920 */
  height: min(50vw, 960px);
}

.wd-illust-half {
  position: relative;
  flex: 1 1 0;
}

.wd-illust-half img {
  position: absolute;
  object-fit: cover;
}

/* 왼쪽: 405x607 @ (0,0), 513x810 @ (417,0) — 930 기준 % */
.wd-illust-1 {
  top: 0;
  left: 0;
  width: 43.548%;
  aspect-ratio: 405 / 607;
}

.wd-illust-2 {
  top: 0;
  left: 44.839%;
  width: 55.161%;
  aspect-ratio: 513 / 810;
}

/* 오른쪽: 358x576 @ (0,120), 560x840 @ (370,120) — 930 기준 % */
.wd-illust-3 {
  top: min(6.25vw, 120px);
  left: 0;
  width: 38.495%;
  aspect-ratio: 358 / 576;
}

.wd-illust-4 {
  top: min(6.25vw, 120px);
  left: 39.785%;
  width: 60.215%;
  aspect-ratio: 560 / 840;
}

/* ══ 6. 스티커 5행 ═════════════════════════════════════ */
.wd-stickers {
  display: flex;
  flex-direction: column;
  gap: min(4.1667vw, 80px);
}

.wd-sticker-rows {
  display: flex;
  flex-direction: column;
  /* 피그마 행 간격이 80/81 로 번갈아 나오는데 실제 값은 80.5 (반올림 차이) */
  gap: min(4.1927vw, 80.5px);
}

.wd-sticker-row {
  display: flex;
  align-items: flex-end;
  gap: 1.25%; /* 24 / 1920 (행마다 8~14px 차이는 반올림) */
  height: min(39.7396vw, 763px);
}

.wd-sticker-row--reverse {
  flex-direction: row-reverse;
}

.wd-sticker-grid {
  flex: none;
  width: 49.792%; /* 956 / 1920 */
  aspect-ratio: 956 / 763;
  object-fit: contain;
}

.wd-sticker-caption {
  flex: 1 1 0;
  padding: min(1.25vw, 24px) 0;
}

.wd-sticker-caption h3 {
  color: var(--pl2-neutral-60);
  font-size: min(0.7292vw, 14px) /* 14 */;
  font-weight: 500;
  line-height: min(0.8854vw, 17px) /* 17 */;
  letter-spacing: -0.02em;
}

.wd-sticker-caption p {
  margin-top: min(0.4167vw, 8px);
  color: var(--pl2-neutral-50);
  font-size: min(0.7292vw, 14px) /* 14 */;
  font-weight: 400;
  line-height: min(0.9375vw, 18px) /* 18 */;
  letter-spacing: -0.02em;
}

.wd-final {
  width: 100%;
  aspect-ratio: 1920 / 960;
  object-fit: cover;
}