/* ══════════════════════════════════════════════════
   컬렉션 상세(/collection/{slug}) 전용 — 18면이 함께 쓴다.
   global.css 에 넣지 않은 이유: 상세면만 쓰는 규칙이라 여기 두면
   다른 페이지의 ?v= 캐시 버스트를 건드리지 않아도 된다.
   면 구성은 라이트 본문 기준(--bg-primary) — 사이트 표준과 같다.
   ══════════════════════════════════════════════════ */

/* 배경은 흰색 고정(2026-09-10 요청). 사이트 표준 --bg-primary(#f8f7f7)보다
   반 톤 밝다 — 컬러칩·연출컷이 크림 바탕 위에서 누렇게 보이던 걸 걷어낸다. */
.pd { background:var(--surface-white); padding-top:var(--sp-96) }

.pd__wrap { width:min(1100px, 100% - var(--px) * 2); margin-inline:auto }

/* 현재 위치 — 화면에서도 크롤러에서도 계층을 보여주는 자리 */
/* 브레드크럼은 2026-09-09 제거 — 상세는 컬렉션에서만 들어오는 한 단계 깊이라
   경로 표시가 정보를 더하지 않았다. JSON-LD BreadcrumbList 는 유지(검색결과 경로용). */

.pd__head { max-width:44rem; margin-bottom:var(--sp-48) }
.pd__series {
  font-size:var(--fs-label-xs); font-weight:var(--fw-medium);
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color:var(--text-subtle); margin:0 0 var(--sp-12);
}
.pd__title {
  font-family:var(--type-display);
  font-size:var(--fs-display-section); font-weight:var(--fw-light);
  color:var(--text-bolder); margin:0 0 var(--sp-20); line-height:1.15;
  letter-spacing:var(--tracking-tight);
}
.pd__desc {
  font-size:var(--fs-body-sm); color:var(--text-basic);
  line-height:1.8; margin:0;
}

/* 이미지 — 연출컷이 있으면 둘, 없으면 질감 하나 */
.pd__media { display:grid; gap:var(--sp-16); margin:0 0 var(--sp-80) }
.pd__media.has-scene { grid-template-columns:2fr 1fr }
.pd__media figure { margin:0 }
.pd__media img {
  width:100%; height:100%; object-fit:cover; display:block;
  background:var(--surface-white);
}
.pd__media .pd__shot { aspect-ratio:4/3 }
.pd__media .pd__swatch { aspect-ratio:1/1 }
.pd__media figcaption {
  font-size:var(--fs-label-2xs); color:var(--text-subtle);
  padding-top:var(--sp-8);
}

.pd__sec { margin-bottom:var(--sp-80) }
.pd__sec h2 {
  font-size:var(--fs-heading-xs); font-weight:var(--fw-bold);
  color:var(--text-bolder); margin:0 0 var(--sp-8);
}

/* 같은 시리즈의 다른 색 — 상세면끼리 서로 잇는 내부 링크 */
.pd__siblings { list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--sp-16) }
.pd__siblings a { display:block; text-decoration:none; color:inherit }
.pd__siblings img {
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  background:var(--surface-white);
}
.pd__siblings span {
  display:block; padding-top:var(--sp-8);
  font-size:var(--fs-body-xs); color:var(--text-basic);
}
.pd__siblings a:hover span { color:var(--text-bolder) }

/* 대리점 안내 띠 — 대리점 페이지 히어로와 같은 사진을 쓴다(2026-09-16).
   ⚠️ url() 은 이 CSS 파일 위치(static/css/) 기준이라 ../images/ 다.
      stores.html 은 HTML 안 인라인 스타일이라 static/images/ 로 적혀 있다 — 표기가 다른 게 맞다. */
.pd__cta {
  position:relative; overflow:hidden;
  padding:var(--sp-48); margin-bottom:var(--sp-96);
}
/* 배경을 ::before 로 뺀 이유 — 좌우를 뒤집기 위해서다.
   원본은 인물이 왼쪽 끝에 있어서 '밀어서' 오른쪽으로 보낼 수가 없다(밀면 왼쪽이 빈다).
   뒤집으면 인물이 오른쪽으로 가고 글자가 놓이는 왼쪽이 깨끗한 벽이 된다.
   ⚠️ transform 을 .pd__cta 에 걸면 글자까지 뒤집힌다 — 배경 레이어에만 건다. */
.pd__cta::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("../images/stores-hero-v3.jpg") no-repeat;
  /* 띠가 5.3:1 로 아주 납작하다. 확대(200% auto)로 인물을 밀어내 봤더니
     사진의 얇은 조각만 남아 "잘린" 것처럼 보였다 — 확대하지 않고 cover 로 둔다.
     세로 위치 35% 에서 다리·슬리퍼·걸레받이가 들어오고 왼쪽 글자 자리는 벽으로 비어 있다.
     실측 대비(검정 글자) 6.61:1 — 1440·1920 동일(띠는 --max 로 1100px 고정).
     ⚠️ 아래 scaleX(-1) 때문에 가로 위치 값은 좌우 반대로 읽힌다. */
  background-size:cover; background-position:50% 35%;
  transform:scaleX(-1);
}
/* 가림막 없음 — 사진 위에 바로 검은 글씨 (2026-09-16, 사용자 확인용).
   ⚠️ 실측: 문구가 인물의 갈색 바지 위를 지나는 구간에서 1.03:1 까지 떨어진다(AA 기준 4.5:1).
      그 구간 글자가 안 읽힌다. 되살리려면 아래 한 줄을 ::before 로 넣으면 된다 —
      background:linear-gradient(to right, var(--white-85) 0%, var(--white-75) 42%, var(--white-0) 72%); */
.pd__cta > * { position:relative; z-index:1 }
.pd__cta p {
  font-size:var(--fs-body-xs); color:var(--text-bolder);
  line-height:1.8; margin:0 0 var(--sp-20);
  /* 38rem 이면 문구 끝이 인물(바지) 위로 넘어가 그 구간만 안 읽힌다.
     사진의 깨끗한 왼쪽 안에서 끝나도록 줄인다. */
  max-width:27rem;
}

@media(max-width:900px){
  .pd__media.has-scene { grid-template-columns:1fr }
  .pd__siblings { grid-template-columns:repeat(3, 1fr) }
}
@media(max-width:600px){
  .pd { padding-top:var(--sp-72) }
  .pd__siblings { grid-template-columns:repeat(2, 1fr) }
  .pd__cta { padding:var(--sp-32) }
}

/* ══════════════════════════════════════════════════════════════════
   상세 페이지 개편 (2026-09-09)
   히어로 → 스펙+텍스처 특징 → 적용 사례 → 유사 컬러 → 추천 컬러
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. 히어로 — 좌 카피 / 우 이미지 ─────────────────────────── */
/* ── 1. 히어로 — 좌 카피 / 우 이미지 2단 ──────────────────────────
   2026-09-10 에 풀블리드 + 오버레이로 바꿨다가 되돌렸다.
   이유: 히어로에 쓰는 원본이 18면 중 13면이 세로 사진이라,
   가로 풀블리드에 cover 로 채우면 1.3~1.42배 확대돼 화질이 뭉개진다.
   가로 연출컷이 갖춰지기 전에는 이 2단이 원본 비율에 맞는다. */
.pd__hero{padding-top:var(--sp-56);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);
  gap:var(--sp-48);align-items:center;margin-bottom:var(--sp-96)}
.pd__hero-copy{min-width:0}
.pd__hero-img{margin:0;overflow:hidden;background:var(--surface-white);aspect-ratio:4/3}
.pd__hero-img img{width:100%;height:100%;object-fit:cover;display:block}
/* 세로 원본을 4:3 으로 자르면 기본(가운데)에서 피사체가 모서리에 걸릴 때가 있다.
   products.json 의 focus 값으로 보이는 구간을 위·아래로 옮긴다.
   ⚠️ 세로로만 움직인다 — 가로는 가운데가 항상 맞았다. */
.pd__hero-img--top img{object-position:50% 0%}
.pd__hero-img--low img{object-position:50% 90%}

/* ── 2. 스펙 + 텍스처 특징 — 2단 ────────────────────────────── */
/* 제품 정보 표 — 라인 형태. 히어로 좌측 카피 바로 아래에 붙는다(2026-09-16).
   별도 2행으로 두었을 때는 카피 아래가 비고 표만 덩그러니 놓였다.
   global.css 의 .data-table 은 면(배경·지브라·호버)으로 행을 나누는 공용 컴포넌트다.
   여기서는 선 하나로만 나눈다. 공용 정의는 건드리지 않고 이 표에만 덮는다. */
.pd__spec{margin-top:var(--sp-40);background:none;border-radius:0;overflow:visible}
.pd__spec tbody tr,
.pd__spec tbody tr:nth-child(even),
.pd__spec tbody tr:hover{background:none}
.pd__spec tbody td{
  padding:var(--sp-14) 0;
  font-size:var(--fs-body-sm);
  border-bottom:1px solid var(--border-primary-light);
}
.pd__spec tbody tr:last-child td{border-bottom:none}
/* 첫 칸 = 항목명. 좌측 칸이 좁아 7.5em 이면 값이 밀린다 — 조금 줄인다. */
.pd__spec tbody td:first-child{
  width:5.5em;color:var(--text-subtle);
}

/* ── 3. 적용 사례 — 원본 비율 + 자유 배치 (2026-09-16) ──────────
   메인 페이지 갤러리(film.html 의 .coll__gallery)와 같은 방식이다.
   12칸 격자에 항목마다 열 범위와 위 오프셋(--mt)을 마크업에서 직접 준다.
   예전에는 16:9 + 4:3 으로 잘라 넣어 19면이 전부 같은 배치로 보였다.
   이제 자르지 않고 배치도 제품마다 달라진다. 빈 자리 표시 칸은 없앴다. */
/* 이 섹션만 위아래를 넉넉히 띄운다 — 사진이 엇갈려 떠 있어서
   앞뒤 섹션과 간격이 같으면 스펙표·유사컬러에 딸려 붙어 보인다. */
.pd__sec--scenes{margin-top:var(--sp-120);margin-bottom:var(--sp-160)}
.pd__scenes{display:grid;grid-template-columns:repeat(12,1fr);align-items:start;
  column-gap:var(--sp-20);row-gap:var(--sp-96)}
/* 세로 오프셋 — 안 주면 같은 행 항목들의 윗변이 맞아 '한 줄'로 읽힌다 */
.pd__scene{margin:0;margin-top:var(--mt,0);overflow:hidden;background:var(--surface-white)}
/* 자르지 않으므로 높이는 이미지가 정한다 */
.pd__scene img{width:100%;height:auto;display:block}

/* ── 4·5. 유사 / 추천 컬러 ──────────────────────────────────── */
/* h2 아래 마진이 8px 로 줄어(2026-09-10) 음수 마진을 걷어냈다.
   그대로 두면 h2 와 간격이 0 이 된다. */
.pd__sec-note{margin:0 0 var(--sp-24);
  font-size:var(--fs-body-sm);color:var(--text-subtle)}
.pd__swatches{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-16)}
.pd__swatches a{display:block;text-decoration:none;color:inherit}
.pd__swatches img{width:100%;aspect-ratio:1;object-fit:cover;display:block;
  background:var(--surface-white);transition:opacity .25s var(--ease-out)}
.pd__sw-name{display:block;margin-top:var(--sp-10);font-size:var(--fs-body-sm);color:var(--text-bolder)}
.pd__sw-series{display:block;margin-top:2px;font-size:var(--fs-label-xs);color:var(--text-subtle)}
@media (hover:hover){ .pd__swatches a:hover img{opacity:.82} }

@media(max-width:900px){
  .pd__hero{grid-template-columns:1fr;gap:var(--sp-32);margin-bottom:var(--sp-64)}
  .pd__swatches{grid-template-columns:repeat(4,1fr);gap:var(--sp-12)}
}
@media(max-width:600px){
  /* 스와치가 4열이면 한 칸이 70px 아래로 떨어져 색을 알아볼 수 없다 → 2열 */
  .pd__swatches{grid-template-columns:repeat(2,1fr)}
  /* 좁은 화면에서 12칸 불규칙 배치는 조각이 너무 작아진다 → 한 줄에 하나씩.
     메인 갤러리도 같은 이유로 768px 아래에서 균일 배치로 접는다. */
  .pd__sec--scenes{margin-top:var(--sp-64);margin-bottom:var(--sp-80)}
  .pd__scenes{grid-template-columns:minmax(0,1fr);row-gap:var(--sp-20)}
  .pd__scene{grid-column:auto!important;margin-top:0!important}
}

/* ══════════════════════════════════════════════════════════════════
   라이트박스 — 히어로 이미지를 눌러 크게 보기 (2026-09-16)
   동작은 static/js/lightbox.js. 여는 버튼은 .js-zoom.
   ⚠️ 지금은 상세 페이지만 쓴다. 다른 페이지로 번지면 global.css 로 옮긴다
      (그때는 전 페이지 ?v= 를 함께 올려야 한다).
   ══════════════════════════════════════════════════════════════════ */
.js-zoom{
  display:block; width:100%; height:100%; padding:0; border:0;
  background:none; cursor:zoom-in;
}
.js-zoom:focus-visible{outline:2px solid var(--border-primary-darker); outline-offset:2px}

html.lbx-open{overflow:hidden}          /* 뒤 배경 스크롤 잠금 */

.lbx{
  position:fixed; inset:0; z-index:1300;   /* 내비(1100)·토스트(1200) 위 */
  display:flex; align-items:center; justify-content:center;
  padding:var(--sp-48);
  background:var(--black-82);
  opacity:0; transition:opacity .2s var(--ease-out);
}
.lbx.is-in{opacity:1}
.lbx__fig{margin:0; display:flex; flex-direction:column; align-items:center; gap:var(--sp-16)}
/* 자르지 않는다 — 원본 비율 그대로, 화면 안에 들어오게만 */
.lbx__fig img{
  display:block; max-width:min(92vw, 1200px); max-height:82vh;
  width:auto; height:auto; object-fit:contain;
  background:var(--surface-white);
}
.lbx__cap{
  font-size:var(--fs-body-xs); color:var(--text-inverse-static);
  letter-spacing:var(--tracking-wide);
}
.lbx__close{
  position:absolute; top:var(--sp-20); right:var(--sp-20);
  width:44px; height:44px; padding:0; border:0; background:none;
  color:var(--text-inverse-static); cursor:pointer;
  display:grid; place-items:center;
}
.lbx__close svg{width:22px; height:22px}
.lbx__close:hover{opacity:.7}
.lbx__close:focus-visible{outline:2px solid var(--white-75); outline-offset:2px}

@media(max-width:768px){
  .lbx{padding:var(--sp-20)}
  .lbx__fig img{max-width:94vw; max-height:78vh}
}
@media(prefers-reduced-motion:reduce){
  .lbx{transition:opacity .01s}
}