/* ============================================================
   제품 상세 페이지 — 페이지 뼈대와 하단 바
   상세 본문 디자인은 product-detail-uv.css (멤버스몰 원본) 이 담당합니다.
   ============================================================ */

/* 상세 본문 폭 — 사이트 콘텐츠 폭의 70%.
   본문과 하단 바가 같은 값을 쓰므로 좌우 끝이 항상 맞습니다. */
.pd-body { background: #fff; --pd-w: calc(var(--max) * 0.7); }

/* 본문 + 하단 바 묶음.
   하단 바가 sticky 로 따라오다가 이 묶음이 끝나는 곳(푸터 위)에서 멈춥니다. */
.pd-body > .pd-wrap { flex: 1 0 auto; display: flex; flex-direction: column; }

/* 상세 본문이 자체 여백을 가지고 있어 공통 상·하 여백은 덜어냅니다. */
.pd-main { padding-top: 94px; padding-bottom: 0; }
.pd-body .site-footer { margin-top: 0; }

/* 원본 상세(1000px 캔버스)를 위 --pd-w 폭에 맞춥니다.
   바깥 베이지 배경과 캔버스 그림자는 걷어냅니다. */
.pd-main .uv-detail {
  margin-top: 30px;
  background: #fff;
}
.pd-main .uv-detail:not(.uv-detail--native) {
  --w: var(--pd-w);
  --gutter: 32px;
}
.pd-main .uv-detail .page { box-shadow: none; }

/* pdetail 에서 가져온 상세(products/pNNN/, tools/build-product-details.mjs 가 만듦)는
   원본 그대로 보여야 하므로 폭 · 여백을 덮어쓰지 않습니다.
   원본 캔버스가 1000px 이라 하단 바도 같은 폭에 맞춥니다. */
.pd-body--native { --pd-w: 1000px; }

/* 사이트 공통 CSS 에도 .hero / .legal 이 있어 원본 상세의 같은 이름 클래스에
   새어 들어옵니다(메인 풀스크린 히어로의 height:100vh, 푸터 약관 링크의 flex).
   상세 안에서만 무력화합니다. 새 제품 상세를 붙일 때도 이 블록이 필요합니다. */
.uv-detail:not(.uv-detail--native) .hero { height: auto; min-height: 0; overflow: visible; }
.uv-detail:not(.uv-detail--native) .legal { display: block; align-items: normal; flex-wrap: nowrap; }
.uv-detail:not(.uv-detail--native) .legal li { position: static; display: list-item; align-items: normal; }
.uv-detail:not(.uv-detail--native) .legal li:not(:last-child)::after { content: none; }
.uv-detail:not(.uv-detail--native) .legal a { font-size: inherit; color: inherit; }
.uv-detail:not(.uv-detail--native) .legal strong { color: inherit; font-weight: inherit; }

/* ── 이미지형 상세 ─────────────────────────────────────────
   멤버스몰이 HTML 이 아니라 이미지 몇 장으로 올린 제품용.
   원본이 1000px 기준이라 같은 --pd-w 폭에 맞춰 깝니다. */
.uv-detail--imgs { background: #fff; }
.uv-detail--imgs .page {
  width: 100%;
  max-width: var(--pd-w);
  margin-inline: auto;
  background: #fff;
}
.pd-imgs img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}

/* ── 하단 바 ───────────────────────────────────────────── */
.pd-dock {
  position: sticky;
  bottom: 0;
  z-index: 60;
  margin-top: auto;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid #ececec;
}

/* 좌우 끝을 상세 캔버스의 끝과 맞춥니다. */
.pd-dock__inner {
  max-width: var(--pd-w);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-left: 0;
  padding-right: 0;
  padding-top: 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

/* 캔버스가 화면 폭을 꽉 채우는 구간에서는 본문 좌우 여백을 따릅니다. */
@media (max-width: 960px) {
  .pd-dock__inner { padding-left: 32px; padding-right: 32px; }
}

.pd-dock__info { min-width: 0; }

.pd-dock__cat {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ui-muted);
}

.pd-dock__name {
  margin-top: 8px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.05;
  color: #201d1d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-dock__btns { flex: none; display: flex; gap: 10px; }

.pd-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 250px;
  height: 55px;
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: #fa6221;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.pd-cta:hover { background: #e4551a; }
.pd-cta em { font-size: 20px; }

/* ── 본문 끝 구매 영역 ──────────────────────────────────
   하단 바를 숨기는 시안에서, 상세를 다 읽은 사람이
   바로 누를 수 있도록 마지막에 두는 일반 구매 버튼입니다. */
.pd-endcta {
  padding: 72px 32px 88px;
  border-top: 1px solid #ececec;
  background: #fff;
  text-align: center;
}
.pd-endcta__cat {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ui-muted);
}
.pd-endcta__name {
  margin-top: 6px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #201d1d;
}
.pd-endcta .pd-cta { margin-top: 28px; }

/* ── 스크롤에 따라 숨는 하단 바 ────────────────────────
   내려갈 때는 숨고, 다시 올릴 때만 나타납니다.
   동작은 이 한 가지뿐이라 화면이 어지럽지 않습니다. */
.pd-dock--auto {
  transition: transform 0.28s ease, opacity 0.2s ease;
  will-change: transform;
}
.pd-dock--auto.is-hidden {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .pd-dock--auto { transition: none; }
}

/* ── 반응형 ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .pd-main { padding-top: 84px; }
  .pd-main .uv-detail:not(.uv-detail--native) { --gutter: clamp(28px, 4vw, 48px); }
  .pd-dock__inner { gap: 16px; padding-left: clamp(28px, 4vw, 48px); padding-right: clamp(28px, 4vw, 48px); padding-top: 20px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .pd-dock__cat { font-size: 15px; }
  .pd-dock__name { font-size: 21px; }
  .pd-cta { min-width: 0; height: 50px; padding: 0 24px; font-size: 16px; }
  .pd-endcta { padding: 56px 24px 68px; }
  .pd-endcta__name { font-size: 24px; }
}

@media (max-width: 600px) {
  .pd-main { padding-top: 74px; }
  /* 한 줄 유지 — 왼쪽에 제품명, 오른쪽에 버튼.
     세로로 쌓으면 바가 높아져 상세 이미지를 더 가립니다. */
  .pd-dock__inner { gap: 12px; padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .pd-dock__cat { font-size: 13px; }
  .pd-dock__name { font-size: 17px; }
  .pd-cta { min-width: 0; height: 46px; padding: 0 16px; font-size: 14px; gap: 4px; }
  .pd-cta em { font-size: 16px; }
}

@media (max-width: 400px) {
  .pd-main .uv-detail:not(.uv-detail--native) { --gutter: 24px; }
  .pd-dock__inner { padding-left: 24px; padding-right: 24px; }
}