/* ============================================================
   JOSEPH TELECOM — product.css
   PRODUCT EXPERIENCE (product.html) — style.css 의 토큰을 그대로 쓴다.

   LEFT 60%  STAGE  화면에 머무는 제품 (3D 또는 사진 카메라)
   RIGHT 40% STORY  인트로 → 01~04 → 상담
   모바일: 스테이지가 위쪽 56% 에 머물고, 이야기가 그 아래로 지나간다.
   ============================================================ */

/* 상세 페이지는 첫 화면부터 밝은 스테이지 위에 헤더가 얹히므로
   top 상태에서도 condensed 와 같은 반투명 네이비를 깐다(글자 대비 유지). */
.pd-page .site-header,
.pd-page .site-header[data-state="top"] {
  background: rgba(11, 27, 46, 0.64);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border-bottom: 1px solid rgba(42, 74, 107, 0.36);
}
.pd-page .site-header__inner { height: var(--header-h-sm); }

/* ---------- 테마 ---------- */
.pd {
  --pd-stage-bg: #E4DFD8;
  --pd-bg: var(--ivory-warm);
  --pd-text: var(--navy-900);
  --pd-muted: var(--text-muted);
  --pd-line: var(--line);
  --pd-accent: var(--accent-text);
  --pd-hud: rgba(11, 27, 46, 0.56);

  position: relative;
  background: var(--pd-bg);
  color: var(--pd-text);
}
.pd[data-theme="dark"] {
  --pd-bg: #120F0C;
  --pd-text: #F4EFE6;
  --pd-muted: rgba(237, 231, 220, 0.64);
  --pd-line: rgba(237, 231, 220, 0.18);
  --pd-accent: var(--orange-500);
  --pd-hud: rgba(237, 231, 220, 0.5);
}

/* ---------- STAGE ---------- */
.pd-stage {
  position: sticky; top: 0; z-index: 2;
  height: calc(var(--vh, 1vh) * 56); height: 56svh;
  background: var(--pd-stage-bg);
  overflow: hidden;
}
.pd-stage__view { position: absolute; inset: 0; overflow: hidden; }

/* 카메라는 transform 하나로만 움직인다 (origin 0 0 기준 — product.js 가 계산).
   크기도 product.js 가 '스테이지를 덮는 크기'로 px 지정한다. 아래는 그 전의 기본값. */
.pd-stage__photo {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;   /* JS 가 크기를 잡으면 비율이 같아져 잘림 없이 그대로 그려진다 */
  transform-origin: 0 0;
  will-change: transform;
  transition: opacity 1200ms var(--ease-out);
}
.pd-stage__model {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background: transparent;
  --poster-color: transparent;
  opacity: 0;
  transition: opacity 1200ms var(--ease-out);
}
.pd-stage.has-model .pd-stage__model { opacity: 1; }
.pd-stage.has-model .pd-stage__photo { opacity: 0; }

/* HUD — 지금 카메라가 보고 있는 곳 · 진행 레일 */
.pd-stage__hud {
  position: absolute; inset: auto var(--gutter) 18px var(--gutter);
  display: flex; align-items: flex-end; justify-content: space-between;
  pointer-events: none;
}
.pd-stage__shot {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.26em;
  color: var(--pd-hud);
  transition: color var(--m-ui) var(--ease-out);
}
.pd-stage__rail {
  position: relative;
  width: 1px; height: 48px;
  background: rgba(127, 127, 127, 0.22);
  overflow: hidden;
}
.pd-stage__rail span {
  position: absolute; inset: 0;
  background: var(--orange-500);
  transform: scaleY(0); transform-origin: top;
}

/* ---------- STORY ---------- */
.pd-story {
  position: relative; z-index: 1;
  padding: 0 var(--gutter);
}
.pd-step {
  display: flex; flex-direction: column; justify-content: flex-start;
  min-height: calc(var(--vh, 1vh) * 64);
  padding: clamp(36px, calc(var(--vh, 1vh) * 6), 64px) 0;
}
.pd-step + .pd-step { border-top: 1px solid var(--pd-line); }

/* 지금 읽는 블록만 또렷하게 — 나머지는 한 발 물러난다 */
.pd-step > * {
  opacity: 0.28;
  transform: translateY(10px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.pd-step.is-active > * { opacity: 1; transform: none; }
.pd-step.is-active > *:nth-child(2) { transition-delay: 60ms; }
.pd-step.is-active > *:nth-child(3) { transition-delay: 120ms; }
.pd-step.is-active > *:nth-child(4) { transition-delay: 180ms; }

/* intro */
.pd-back {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.22em;
  color: var(--pd-muted);
  transition: color var(--m-micro) var(--ease-out);
}
.pd-back::before { content: "\2190"; transition: transform var(--m-micro) var(--ease-out); }
.pd-back:hover { color: var(--pd-text); }
.pd-back:hover::before { transform: translateX(-4px); }

.pd-brand {
  margin-top: clamp(28px, calc(var(--vh, 1vh) * 5), 56px);
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.32em;
  color: var(--pd-muted);
}
.pd-name {
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 3.6vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--pd-text);
}
.pd-name__sub { display: block; margin-top: 0.3em; font-size: 0.42em; letter-spacing: 0.04em; opacity: 0.55; }
.pd-tagline {
  margin-top: clamp(22px, calc(var(--vh, 1vh) * 3.4), 36px);
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.4;
  letter-spacing: -0.035em;
  font-weight: 600;
}
.pd-hint {
  display: flex; align-items: center; gap: 12px;
  margin-top: clamp(40px, calc(var(--vh, 1vh) * 7), 72px);
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.3em;
  color: var(--pd-muted);
}
.pd-hint::after { content: ""; width: 40px; height: 1px; background: var(--orange-500); }

/* features */
.pd-feature__key {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.22em;
  color: var(--pd-text);
}
.pd-feature__key b { font-weight: 500; color: var(--pd-accent); }
.pd-feature__title {
  margin-top: clamp(18px, calc(var(--vh, 1vh) * 3), 28px);
  font-size: clamp(26px, 2.6vw, 44px);
  line-height: 1.26;
  letter-spacing: -0.04em;
  font-weight: 600;
  text-wrap: normal;
}
.pd-feature__desc {
  margin-top: clamp(18px, calc(var(--vh, 1vh) * 3), 28px);
  max-width: 34ch;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.85;
  color: var(--pd-muted);
}

/* end */
.pd-end__lead {
  font-size: clamp(24px, 2.4vw, 38px);
  line-height: 1.34;
  letter-spacing: -0.04em;
  font-weight: 600;
}
.pd-end__desc {
  margin-top: 16px;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.8;
  color: var(--pd-muted);
}
.pd .cta-line { color: var(--pd-text); }
.pd .cta-line:hover { color: var(--pd-accent); }
.pd-end__cta { margin-top: clamp(28px, calc(var(--vh, 1vh) * 5), 48px); }
.pd-end__others {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin-top: clamp(40px, calc(var(--vh, 1vh) * 7), 72px);
  /* "다른 모델" 은 한글이다 — 모노 서체 · 넓은 자간을 쓰지 않고 13px 로 (모바일 최적화) */
  font-family: var(--font-kr);
  font-size: 13px; letter-spacing: 0;
}
.pd-end__others > span:first-child { color: var(--pd-muted); margin-right: 6px; }
.pd-end__others > span[aria-hidden] { width: 1px; height: 11px; background: var(--pd-line); }
.pd-end__others a {
  min-height: 44px; display: inline-flex; align-items: center;
  color: var(--pd-text);
  border-bottom: 1px solid transparent;
  transition: border-color var(--m-micro) var(--ease-out);
}
.pd-end__others a:hover { border-color: var(--orange-500); }
.pd-end__note {
  margin-top: 20px;
  font-size: 13px; line-height: 1.7;
  color: var(--pd-muted);
}

/* ---------- 데스크톱: LEFT 60% STAGE / RIGHT 40% STORY ---------- */
@media (min-width: 900px) {
  .pd {
    display: grid;
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
    align-items: start;
  }
  .pd-stage {
    grid-column: 1; grid-row: 1;
    height: calc(var(--vh, 1vh) * 100); height: 100svh;
  }
  .pd-stage__hud { inset: auto clamp(24px, 3vw, 48px) clamp(24px, calc(var(--vh, 1vh) * 4), 40px) var(--gutter); }
  .pd-story {
    grid-column: 2; grid-row: 1;
    padding: 0 var(--gutter) 0 clamp(40px, 4.5vw, 88px);
  }
  .pd-step {
    min-height: calc(var(--vh, 1vh) * 100);
    justify-content: center;
    padding: calc(var(--header-h-sm) + 40px) 0 64px;
  }
  .pd-step + .pd-step { border-top: 0; }
  .pd-intro { padding-top: calc(var(--header-h-sm) + 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .pd-step > * { opacity: 1; transform: none; transition: none; }
  .pd-stage__photo, .pd-stage__model { transition: none; }
}

/* 터치 기기 — 스테이지 높이도 main.js 가 잠근 화면 높이(--vh)를 쓴다.
   svh 는 브라우저마다 주소창에 따라 달라져 이야기 길이가 바뀌고 스크롤이 튀었다. */
@media (hover: none), (pointer: coarse) {
  .pd-stage { height: calc(var(--vh, 1vh) * 56); }
}
@media (hover: none) and (min-width: 900px), (pointer: coarse) and (min-width: 900px) {
  .pd-stage { height: calc(var(--vh, 1vh) * 100); }
}