@charset "utf-8";

/* ============================================================
   제품 › 상세 (모든 카테고리 공통 템플릿)
   시안: Figma 3gC6DdCllqkGj4ATOQ8mMI  제품_02 2048:4069

   /products/product-detail.html?id=<제품 id> 하나로 모든 제품을 보여 준다.
   내용은 /data/products.json 에서 오고 /js/product-detail.js 가 그린다.

   구성
     pd-crumb    제품 › 메탈로센 › Cp derivative › PC-1032  (시안에 없다 — 요청으로 넣었다)
     pd-hero     왼쪽 구조식 그림 600 × 700 · 오른쪽 정보 (하위 카테고리 · 제품명 · 규격 표)
     pd-spec     규격 표 — /js/tab-table.js 의 머리글 없는 표. 왼쪽 항목 칸 220 이 회색 판
     pd-actions  다음 제품 · 목록으로 (시안) + 문의하기 (요청)
     pd-related  같은 묶음의 다른 제품 — 목록 페이지 카드(.pl-card) 그대로
     pd-empty    자료가 없는 id 로 들어왔을 때

   히어로 · 페이지 틀(.infra-wrap) · 카드(.pl-card) 는 다른 페이지 부품을 그대로 쓴다.

   불러오는 차례
     <link rel="stylesheet" href="../css/page-hero.css">
     <link rel="stylesheet" href="../css/page-infra.css">
     <link rel="stylesheet" href="../css/tab-table.css">
     <link rel="stylesheet" href="../css/lightbox.css">
     <link rel="stylesheet" href="../css/product-list.css">
     <link rel="stylesheet" href="../css/product-detail.css">
   ============================================================ */

.pd-page {
  --pd-point:  #135a9c;
  --pd-ink:    #222;
  --pd-border: #d8d8d8;
  --pd-label:  #f4f4f4;      /* 규격 표 항목 칸 */
  --pd-rule:   #e5e5e5;      /* 규격 표 줄 사이 (시안 Line 52) */
}

/* ==================== 경로 ==================== */
.pd-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(10 * var(--u));
  margin: calc(60 * var(--u)) 0 0;
  padding: 0;
  list-style: none;
  font-size: max(calc(16 * var(--u)), 12px);
  letter-spacing: -.02em;
  color: var(--gray);
}
.pd-crumb li { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.pd-crumb li + li::before {
  content: "";
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: .6;
}
.pd-crumb a {
  color: inherit;
  text-decoration: none;
  transition: color .25s ease;
}
.pd-crumb a:hover { color: var(--pd-point); }
.pd-crumb [aria-current="page"] { color: var(--pd-ink); font-weight: 500; }

/* ==================== 상단 — 그림 + 정보 ====================
   시안 2048:4219 — 그림 상자 600 × 700 (260~860), 정보 940~1660 */
.pd-hero {
  display: grid;
  grid-template-columns: calc(600 * var(--u)) minmax(0, 1fr);
  gap: calc(80 * var(--u));
  align-items: start;
  margin-top: calc(40 * var(--u));    /* 경로 아래. 경로가 없으면 시안 히어로 아래 150 */
}
.pd-crumb + .pd-hero { margin-top: calc(40 * var(--u)); }

/* ---- 그림 상자 ---- */
.pd-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(700 * var(--u));
  padding: calc(40 * var(--u));
  border: 1px solid var(--pd-border);
  border-radius: calc(15 * var(--u));
  background: var(--color-white);
  cursor: zoom-in;
  transition: border-color .4s ease, box-shadow .4s ease;
}
.pd-media:hover,
.pd-media:focus-visible {
  border-color: var(--pd-point);
  box-shadow: 0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(19, 90, 156, .10);
}
.pd-media:focus-visible { outline: none; }
.pd-media img {
  max-width: calc(515 * var(--u));    /* 시안 그림 자리 515 × 492 */
  max-height: calc(492 * var(--u));
  mix-blend-mode: darken;
  transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}
.pd-media:hover img { transform: scale(1.03); }
/* 그림이 없을 때 — 바탕만 남고 짚어도 아무 일이 없다 */
.pd-media.is-empty { cursor: default; background: #f7f8fa; }
.pd-media.is-empty img { display: none; }
.pd-media.is-empty:hover { border-color: var(--pd-border); box-shadow: none; }
.pd-media__zoom {
  position: absolute;
  right: calc(20 * var(--u));
  bottom: calc(20 * var(--u));
  width: calc(38 * var(--u));
  height: calc(38 * var(--u));
  border-radius: 50%;
  background: rgba(34, 34, 34, .55);
  opacity: 0;
  transition: opacity .3s ease;
}
.pd-media:hover .pd-media__zoom,
.pd-media:focus-visible .pd-media__zoom { opacity: 1; }
.pd-media.is-empty .pd-media__zoom { display: none; }
.pd-media__zoom::before {
  content: "";
  position: absolute;
  left: calc(10 * var(--u));
  top: calc(10 * var(--u));
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  border: calc(2 * var(--u)) solid #fff;
  border-radius: 50%;
}
.pd-media__zoom::after {
  content: "";
  position: absolute;
  right: calc(9 * var(--u));
  bottom: calc(9 * var(--u));
  width: calc(8 * var(--u));
  height: calc(2 * var(--u));
  background: #fff;
  transform: rotate(45deg);
  transform-origin: right center;
}

/* ---- 정보 ---- */
.pd-info { padding-top: calc(10 * var(--u)); }   /* 시안 그림 1041 → 소제목 1051 */
.pd-info__eyebrow {
  position: relative;
  margin: 0;
  padding-left: calc(17 * var(--u));  /* 시안 점(940) → 글자(957) */
  font-weight: 700;
  font-size: max(calc(20 * var(--u)), 13px);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--pd-point);
}
.pd-info__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(12 * var(--u));
  width: calc(5 * var(--u));
  height: calc(5 * var(--u));
  border-radius: 50%;
  background: var(--pd-point);
}
.pd-info__name {
  margin: calc(4 * var(--u)) 0 0 calc(-4 * var(--u));   /* 시안 1051 → 1081, 글자 시작 936 */
  font-weight: 600;
  font-size: calc(45 * var(--u));
  line-height: calc(65 * var(--u));
  letter-spacing: -.05em;
  color: #000;
}

/* ==================== 규격 표 ====================
   시안 2048:4226 — 항목 칸 220 (회색 판 #f4f4f4 라운드 15) + 값 칸.
   /js/tab-table.js (headless) 가 그린 표에 이 페이지식 옷을 입힌다 */
.pd-spec {
  margin-top: calc(56 * var(--u));    /* 시안 제품명 아래(1146) → 표(1202) */
}
.pd-spec .tab-table__table { table-layout: fixed; }
.pd-spec .tab-table__table tbody th,
.pd-spec .tab-table__table tbody td {
  height: auto;
  min-height: 0;
  padding: calc(34 * var(--u)) calc(40 * var(--u)) calc(33 * var(--u));   /* 시안 줄 간격 ~100 */
  vertical-align: middle;
  text-align: left;
  font-size: max(calc(20 * var(--u)), 13px);
  line-height: 1.25;
  letter-spacing: 0;
}
/* 항목 칸 — 회색 판. 줄 사이 선은 값 칸에만 */
.pd-spec .tab-table__table tbody th {
  width: calc(220 * var(--u));
  padding-left: calc(40 * var(--u));
  padding-right: calc(20 * var(--u));
  border-bottom: 0;
  background: var(--pd-label);
  font-weight: 400;
  color: #878787;
}
.pd-spec .tab-table__table tbody tr:first-child th { border-top-left-radius: calc(15 * var(--u)); border-top-right-radius: calc(15 * var(--u)); }
.pd-spec .tab-table__table tbody tr:last-child th { border-bottom-left-radius: calc(15 * var(--u)); border-bottom-right-radius: calc(15 * var(--u)); }
/* 첫 항목 'CODE' 는 코발트 굵게 (시안) */
.pd-spec .tab-table__table tbody tr:first-child th {
  font-weight: 700;
  font-size: max(calc(23 * var(--u)), 14px);
  color: var(--pd-point);
}
/* 값 칸 — 시안 줄 선 440 폭, 마지막 줄은 선 없음 */
.pd-spec .tab-table__table tbody td {
  padding-left: calc(40 * var(--u));
  border-bottom: 1px solid var(--pd-rule);
  font-weight: 400;
  color: #878787;
  word-break: break-word;
}
.pd-spec .tab-table__table tbody tr:last-child td { border-bottom: 0; }
.pd-spec .tab-table__table tbody td.pd-spec__code { font-weight: 600; color: var(--pd-ink); }
.pd-spec .tab-table__table tbody td.pd-spec__name { font-size: max(calc(15 * var(--u)), 12px); line-height: 1.45; }
.pd-spec .tab-table__table tbody td.pd-spec__avail { font-weight: 600; color: var(--pd-point); }
.pd-spec .tab-table__table tbody td.pd-spec__avail.is-no { color: var(--gray); }
/* 항목 칸이 회색 판이라 줄을 짚어도 그 칸 바탕은 그대로 */
.pd-spec .tab-table__table tbody tr:hover { background: none; }
.pd-spec .tab-table__table tbody tr:hover td { background: #fafbfd; }
.pd-spec .tab-table__table tbody tr:hover th { color: var(--pd-ink); }
.pd-spec .tab-table__table tbody tr:first-child:hover th { color: var(--pd-point); }
.pd-spec .tab-table__table tbody th.is-hot { background: var(--pd-label); font-weight: inherit; color: inherit; }

/* ==================== 내려받기 ====================
   시안에 없다. e-브로셔 페이지의 버튼 어법 (흰 바탕 · 얇은 테두리 → 짚으면 코발트) */

/* ==================== 다음 제품 · 목록으로 · 문의하기 ====================
   시안 2048:4220 — 300 × 85 알약. 그림 상자 아래 109, 가운데 */
.pd-actions {
  display: flex;
  justify-content: center;
  gap: calc(30 * var(--u));
  margin-top: calc(100 * var(--u));    /* 시안 그림 아래(1741) → 버튼(1841) */
}
.pd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(25 * var(--u));
  min-width: calc(300 * var(--u));
  height: calc(85 * var(--u));
  padding: 0 calc(40 * var(--u));
  border: 1px solid var(--pd-border);
  border-radius: 999px;
  background: var(--color-white);
  font-family: "Open Sans", var(--font-base);
  font-weight: 600;
  font-size: max(calc(25 * var(--u)), 15px);
  letter-spacing: -.02em;
  color: var(--pd-ink);
  text-decoration: none;
  transition: background-color .3s ease, border-color .3s ease, color .3s ease;
}
.pd-btn__arrow {
  position: relative;
  width: calc(41 * var(--u));
  height: calc(12 * var(--u));
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.pd-btn__arrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: currentColor;
}
.pd-btn__arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.pd-btn--prev .pd-btn__arrow { transform: scaleX(-1); }
.pd-btn:hover,
.pd-btn:focus-visible {
  border-color: var(--pd-point);
  color: var(--pd-point);
}
.pd-btn:hover .pd-btn__arrow { transform: translateX(calc(6 * var(--u))); }
.pd-btn--prev:hover .pd-btn__arrow { transform: scaleX(-1) translateX(calc(6 * var(--u))); }
.pd-btn--fill {
  border-color: var(--pd-point);
  background: var(--pd-point);
  color: var(--color-white);
}
.pd-btn--fill:hover,
.pd-btn--fill:focus-visible {
  background: #0e4b84;
  border-color: #0e4b84;
  color: var(--color-white);
}
.pd-btn:focus-visible { outline: 2px solid var(--pd-point); outline-offset: 3px; }
.pd-btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* ==================== 같은 묶음의 다른 제품 ====================
   시안 2048:4092 — 1400 선(2127) → 소제목 35px(2198) → 카드(2295) */
.pd-related {
  margin-top: calc(200 * var(--u));    /* 시안 버튼 아래(1926) → 선(2127) */
  padding-top: calc(70 * var(--u));
  border-top: 1px solid var(--gray);
}
.pd-related__title {
  margin: 0;
  font-weight: 600;
  font-size: calc(35 * var(--u));
  line-height: 1;
  letter-spacing: -.03em;
  color: #000;
}
.pd-related .pl-grid { margin-top: calc(62 * var(--u)); }   /* 시안 소제목(2233) → 카드(2295) */
/* 지금 보는 제품 — 시안: 2px 코발트 테두리 + 아래쪽 옅은 코발트 바탕 */
.pd-related .pl-card.is-current,
.js .pd-related .pl-card.is-current[data-reveal].is-in {
  border-color: var(--pd-point);
  box-shadow: inset 0 0 0 1px var(--pd-point);
}
.pd-related .pl-card.is-current .pl-card__body { background: rgba(19, 90, 156, .05); }
.pd-related .pl-card.is-current .pl-card__name { color: var(--pd-point); }

/* ==================== 자료가 없는 id ==================== */
.pd-empty {
  margin-top: calc(120 * var(--u));
  padding: calc(100 * var(--u)) calc(40 * var(--u));
  border: 1px dashed var(--pd-border);
  border-radius: calc(20 * var(--u));
  text-align: center;
}
.pd-empty__title {
  margin: 0;
  font-weight: 600;
  font-size: calc(30 * var(--u));
  letter-spacing: -.03em;
  color: var(--pd-ink);
}
.pd-empty__desc {
  margin: calc(14 * var(--u)) 0 0;
  font-weight: 300;
  font-size: max(calc(19 * var(--u)), 14px);
  line-height: 1.6;
  color: var(--gray);
  word-break: keep-all;
}
.pd-empty .pd-actions { margin-top: calc(40 * var(--u)); }

/* ==================== 등장 ====================
   특화기술 패턴 — 그림은 왼쪽에서, 글은 오른쪽에서 미끄러져 들어온다 */
.js .pd-media[data-reveal] { transform: translateX(-40px); }
.js .pd-info[data-reveal] { transform: translateX(40px); transition-delay: .12s; }
.js .pd-media[data-reveal].is-in,
.js .pd-info[data-reveal].is-in { transform: none; }
.js .pd-related .pl-card[data-reveal] { transition-delay: calc(var(--d, 0) * .06s); }

/* ==================== 비공개 제품 — 잠금 표시 ====================
   시안 2048:3697 (PC-9001)
     그림 상자 자리: 600 × 650 회색 판(#f4f4f4, 라운드 15, 테두리 없음)
       자물쇠 155 × 205 (판 위에서 191) · '구조식 비공개' 30px #878787 (판 위에서 436)
     표: CAS · Specification 은 '비공개 · 문의 시 안내' (앞말만 진하게), 공급 여부 'Lab · Pilot scale'
     표 아래 각주 '*' 한 줄 (15px #bebebe)
   자료(JSON)에는 이름·태그·안내 문장·공급 단계만 있다. 나머지는 가리는 것이 아니라 없다.
   판은 시안 그대로 두고(자물쇠 + 글 한 줄), 판을 짚으면 톤이 살짝 바뀌며 아래 '문의하기' 버튼이 켜진다 */
/* 비공개 제품은 판을 오른쪽 열(제목 · 표 · 각주) 높이에 맞춘다 — 아래가 어긋나지 않게.
   시안의 650 은 최소 높이로 두고, 안의 자물쇠·글은 시안처럼 세로 가운데 (191 + 268 = 459 → 판 한가운데 325) */
.is-private .pd-hero { align-items: stretch; }
.pd-media.is-locked {
  flex-direction: column;
  justify-content: center;
  height: auto;
  min-height: calc(650 * var(--u));
  padding: calc(40 * var(--u));
  border-color: transparent;
  background: var(--pd-label);
  cursor: default;
  transition: background-color .4s ease;
}
.pd-media.is-locked:hover,
.pd-media.is-locked:focus-within {
  border-color: transparent;
  box-shadow: none;
  background: #eef2f7;                /* 미세한 톤 변화 */
}
.pd-lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}
.pd-lock__icon {
  display: block;
  width: calc(155 * var(--u));
  height: calc(205 * var(--u));
  max-width: none;
  max-height: none;
  mix-blend-mode: normal;
  transform-origin: 50% 20%;          /* 고리 쪽을 축으로 흔든다 */
}
.pd-media.is-locked:hover .pd-lock__icon { transform: none; }
.pd-lock__title {
  margin: calc(40 * var(--u)) 0 0;    /* 시안 자물쇠 아래(1467) → 글자(1507) */
  font-size: max(calc(30 * var(--u)), 16px);
  line-height: 1.2;
  letter-spacing: -.03em;
  color: #878787;
}
/* 판을 짚으면 아래 버튼 줄의 '문의하기' 가 함께 켜진다 — 문의로 이어 주는 자리는 그쪽이다 */
.pd-page.is-private-hover .pd-btn[data-pd-ask] {
  border-color: var(--pd-point);
  color: var(--pd-point);
}

/* 화면에 들어오면 자물쇠가 한 번 흔들리고 멈춘다 (0.5s) */
@keyframes pd-lock-shake {
  0%   { transform: rotate(0); }
  20%  { transform: rotate(-8deg); }
  40%  { transform: rotate(6deg); }
  60%  { transform: rotate(-4deg); }
  80%  { transform: rotate(2deg); }
  100% { transform: rotate(0); }
}
.js .pd-media.is-locked[data-reveal].is-in .pd-lock__icon {
  animation: pd-lock-shake .5s ease-in-out .5s 1 both;
}

/* 표의 비공개 칸 · 안내 문장 칸 */
.pd-spec .tab-table__table tbody td .pd-spec__hidden { font-weight: 600; color: #878787; }
.pd-spec .tab-table__table tbody td.pd-spec__name--plain { font-size: max(calc(20 * var(--u)), 13px); line-height: 1.25; }

/* 표 아래 각주 (시안 15px #bebebe, '*' 앞) */
.pd-note {
  position: relative;
  margin: calc(20 * var(--u)) 0 0;    /* 시안 표 아래(1703) → 각주(1728) */
  padding-left: calc(18 * var(--u));
  font-size: max(calc(15 * var(--u)), 12px);
  line-height: 1.6;
  letter-spacing: -.03em;
  color: #bebebe;
  word-break: keep-all;
}
.pd-note::before {
  content: "*";
  position: absolute;
  left: 0;
  top: 0;
  font-size: max(calc(17 * var(--u)), 13px);
}

/* ==================== 좁은 화면 (≤768) ==================== */
@media (max-width: 768px) {
  .pd-crumb { margin-top: var(--sp-block); gap: calc(6 * var(--u)); font-size: max(calc(12 * var(--u)), 11px); }   /* 히어로 → 경로 */
  .pd-crumb li { gap: calc(6 * var(--u)); }
  .pd-crumb li + li::before { width: calc(4 * var(--u)); height: calc(4 * var(--u)); }

  /* 그림 위 → 글 아래 */
  .pd-hero,
  .pd-crumb + .pd-hero {
    grid-template-columns: 1fr;
    gap: calc(20 * var(--u));
    margin-top: var(--sp-head);         /* 경로 → 그림 */
  }
  /* 높이를 aspect-ratio 로만 잡으면 iOS 사파리에서 img 의 max-height:80% 가 풀려 구조식이 원본 크기(세로 1,000px 이상)로 길게 늘어난다
     → 높이를 직접 준다 (2026-09-20) */
  .pd-media {
    height: calc(280 * var(--u));
    padding: calc(20 * var(--u));
    border-radius: calc(12 * var(--u));
  }
  .pd-media img { max-width: 80%; max-height: 80%; width: auto; height: auto; }
  .pd-media:hover { border-color: var(--pd-border); box-shadow: none; }
  .pd-media:hover img { transform: none; }
  .pd-media__zoom { opacity: 1; width: calc(28 * var(--u)); height: calc(28 * var(--u)); right: calc(10 * var(--u)); bottom: calc(10 * var(--u)); }
  .pd-media__zoom::before { left: calc(7 * var(--u)); top: calc(7 * var(--u)); width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-width: calc(1.5 * var(--u)); }
  .pd-media__zoom::after { right: calc(6 * var(--u)); bottom: calc(6 * var(--u)); width: calc(6 * var(--u)); height: calc(1.5 * var(--u)); }

  .pd-info { padding-top: 0; }
  .pd-info__eyebrow { padding-left: calc(12 * var(--u)); font-size: max(calc(12 * var(--u)), 12px); }
  .pd-info__eyebrow::before { top: calc(7 * var(--u)); width: calc(4 * var(--u)); height: calc(4 * var(--u)); }
  .pd-info__name { margin: calc(4 * var(--u)) 0 0; font-size: calc(26 * var(--u)); line-height: 1.3; }

  /* 표는 가로로 민다 — tab-table 의 --tt-min 이 최소 폭을 잡는다 */
  .pd-spec { margin-top: var(--sp-head); }   /* 제품명 → 표 */
  .pd-spec .tab-table__table tbody th,
  .pd-spec .tab-table__table tbody td {
    padding: calc(14 * var(--u)) calc(14 * var(--u));
    font-size: max(calc(13 * var(--u)), 13px);
  }
  .pd-spec .tab-table__table tbody th { width: calc(120 * var(--u)); padding-left: calc(14 * var(--u)); }
  .pd-spec .tab-table__table tbody tr:first-child th { font-size: max(calc(14 * var(--u)), 14px); }
  .pd-spec .tab-table__table tbody td.pd-spec__name { font-size: max(calc(12 * var(--u)), 12px); }
  /* 손가락에는 마우스오버가 없다 — 내려받기 버튼은 처음부터 켜 둔다 (e-브로셔와 같다) */

  .pd-actions { flex-wrap: wrap; gap: calc(10 * var(--u)); margin-top: var(--sp-section); }   /* 그림·표 → 버튼 */
  .pd-btn {
    flex: 1 1 calc(45% - 5 * var(--u));
    min-width: 0;
    height: calc(48 * var(--u));
    padding: 0 calc(16 * var(--u));
    gap: calc(12 * var(--u));
    font-size: max(calc(14 * var(--u)), 14px);
  }
  .pd-btn__arrow { width: calc(22 * var(--u)); height: calc(8 * var(--u)); }
  .pd-btn__arrow::after { width: calc(6 * var(--u)); height: calc(6 * var(--u)); }
  .pd-btn:hover .pd-btn__arrow { transform: none; }
  .pd-btn--prev:hover .pd-btn__arrow { transform: scaleX(-1); }

  .pd-related { margin-top: var(--sp-section); padding-top: var(--sp-block); }   /* 버튼 → 선 → 소제목 */
  .pd-related__title { font-size: calc(20 * var(--u)); }
  .pd-related .pl-grid { margin-top: var(--sp-head); }   /* 소제목 → 카드 */

  .pd-empty { margin-top: var(--sp-block); padding: calc(40 * var(--u)) calc(16 * var(--u)); }
  .pd-empty__title { font-size: calc(18 * var(--u)); }
  .pd-empty__desc { font-size: max(calc(13 * var(--u)), 13px); }

  .js .pd-media[data-reveal],
  .js .pd-info[data-reveal] { transform: translateY(20px); }
  .js .pd-info[data-reveal] { transition-delay: .08s; }

  /* 잠금 표시 — 풀폭. 시안 비율(600 : 650)을 줄여 자물쇠와 글 한 줄만 */
  .is-private .pd-hero { align-items: start; }   /* 한 칸이라 맞출 옆 열이 없다 */
  .pd-media.is-locked {
    height: auto;
    min-height: 0;
    aspect-ratio: 600 / 480;
    padding: calc(24 * var(--u)) calc(20 * var(--u));
  }
  .pd-media.is-locked:hover { background: var(--pd-label); }
  .pd-lock__icon { width: calc(78 * var(--u)); height: calc(103 * var(--u)); }
  .pd-lock__title { margin-top: calc(20 * var(--u)); font-size: max(calc(18 * var(--u)), 16px); }
  .pd-note { margin-top: calc(12 * var(--u)); padding-left: calc(12 * var(--u)); font-size: max(calc(12 * var(--u)), 12px); }
}

/* ==================== 모션 최소화 ==================== */
@media (prefers-reduced-motion: reduce) {
  .pd-media, .pd-media img, .pd-media__zoom,
  .pd-crumb a, .pd-btn, .pd-btn__arrow { transition: none; }
  .pd-media:hover img { transform: none; }
  .pd-btn:hover .pd-btn__arrow { transform: none; }
  .pd-btn--prev:hover .pd-btn__arrow { transform: scaleX(-1); }
  .js .pd-media[data-reveal],
  .js .pd-info[data-reveal] { transform: none; transition-delay: 0s; }
  .js .pd-related .pl-card[data-reveal] { transition-delay: 0s; }
  /* 잠금 표시 — 흔들림 없이, 색만 바뀐다 */
  .js .pd-media.is-locked[data-reveal].is-in .pd-lock__icon { animation: none; }
  .pd-media.is-locked { transition: none; }
}