/* 04 PRODUCTS — 31판(2026-10-28) PSPD 가 B 를 고름. 메인 index.html 에서 읽는다. A·C 규칙은 비교 때 것(쓰지 않음)
   A 용도별 3칸 / B 대표작 하나 크게 + 고르기 / C 검은 쇼케이스. 가격·개수는 data.js 실제 값 */

/* 공통: 사진 겹쳐 두고 .on 만 보이기 */
.p4 .stk { position: relative; display: block; aspect-ratio: 1/1; }
.p4 .stk > span { position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--ease); }
.p4 .stk > span.on { opacity: 1; }
.p4 .stk .ph, .p4 .stk .ph.crop { inset: 4%; width: 92%; height: 92%; }
.p4 .price { font-weight: 600; }
.p4 .mdl { font-family: var(--f-disp); letter-spacing: .02em; }

/* ── A. 용도별 3칸 ── */
.rp .shot.p4a { -webkit-mask-image: none; mask-image: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-24); }
.p4a .cat { display: grid; gap: var(--sp-12); color: inherit; text-decoration: none; }
.p4a .cat .stk { width: min(100%, 30svh); justify-self: center; }
.p4a .cat .nm { font-size: var(--fs-18); font-weight: 600; border-top: 1px solid var(--line-2); padding-top: var(--sp-12); display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-8); }
.p4a .cat .nm small { font-size: var(--fs-14); font-weight: 400; color: var(--muted); }
.p4a .cat .ds { font-size: var(--fs-14); color: var(--fg-2); }
.p4a .cat .pr { font-size: var(--fs-14); }
.p4a .cat:hover .nm { border-top-color: var(--fg); }
@media (min-width: 1024px) {
  /* 사진 칸 대신 글 위쪽 가로 띠 — 왼쪽 여백 ~ 다이얼 원 왼쪽 */
  .rp .shot.p4a { left: var(--gut); right: calc(var(--ring) + var(--sp-32)); top: calc(var(--head) + var(--sp-32)); bottom: auto; width: auto; margin: 0; justify-self: stretch; }   /* 기본 사진 칸의 justify-self:start 가 절대 위치에도 걸려 폭이 줄었다(실측 634px) */
}
@media (max-width: 1023px) { .rp .shot.p4a, .rp .shot.p4a.wide { width: 100%; } }
@media (max-width: 1023px) {
  .rp .shot.p4a { gap: var(--sp-12); }
  .p4a .cat .nm { font-size: var(--fs-14); flex-direction: column; gap: 0; }
  .p4a .cat .ds { display: none; }
  .p4a .cat .pr { font-size: var(--fs-12); }
}

/* ── B. 대표작 하나 크게 + 고르기 ── */
.rp .shot.p4b { -webkit-mask-image: none; mask-image: none; display: grid; gap: var(--sp-16); }
.p4b .stk { perspective: calc(900 * var(--u)); -webkit-mask-image: radial-gradient(ellipse closest-side, #000 74%, transparent 100%); mask-image: radial-gradient(ellipse closest-side, #000 74%, transparent 100%); }
.p4b .stk > span { transition: opacity .5s var(--ease), transform .7s var(--ease); transform: rotateY(-40deg) scale(.92); }
.p4b .stk > span.on { transform: none; }
.p4b .meta { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--sp-4) var(--sp-16); border-top: 1px solid var(--line-2); padding-top: var(--sp-12); }
.p4b .meta .mdl { font-size: var(--fs-18); }   /* 32판: T-27 가격이 1순위 — 모델 24→18, 가격 18→24 */
.p4b .meta .price { font-size: var(--fs-24); font-weight: 600; }
.p4b .meta .sm { grid-column: 1 / -1; font-size: var(--fs-14); color: var(--fg-2); }
.p4b .meta a { grid-column: 1 / -1; justify-self: start; font-size: var(--fs-14); }
.p4b .thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-8); }
.p4b .thumbs button { position: relative; aspect-ratio: 1/1; border: 1px solid transparent; background: none; padding: 0; cursor: pointer; transition: border-color .3s; }
.p4b .thumbs button[aria-pressed="true"] { border-color: var(--fg); }
.p4b .thumbs button:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }
.p4b .thumbs .ph, .p4b .thumbs .ph.crop { inset: 6%; width: 88%; height: 88%; }
/* 사진+정보+썸네일 합친 높이가 화면을 넘지 않게(1552×860 실측 772px) */
.rp#products .shot.p4b { --w: min(var(--aw, 40vw), 40svh); }
@media (max-width: 1023px) { .rp .shot.p4b { width: min(72vw, 30svh); } .p4b .meta .mdl { font-size: var(--fs-16); } .p4b .meta .price { font-size: var(--fs-20); } }

/* ── C. 검은 쇼케이스 ── 섹션 바탕은 .hero-bg(사진 없음), 제품은 둥근 빛 위에 multiply 로 녹인다
   (검은 바탕에 바로 multiply 하면 사진이 사라져서, 빛 원을 사진 칸 안에 깔고 칸은 isolate) */
.rp.hero .hero-bg.solid { background: radial-gradient(120% 90% at 65% 40%, #2a2a2a 0%, #0d0d0d 60%, #070707 100%); }
.rp .shot.p4c { -webkit-mask-image: none; mask-image: none; mix-blend-mode: normal; isolation: isolate; display: grid; gap: var(--sp-16); }
.p4c .stage { position: relative; display: block; aspect-ratio: 1/1; }
.p4c .stage::before { content: ""; position: absolute; inset: -6%; border-radius: 50%; background: radial-gradient(closest-side, #f2f2f2 0%, #d9d9d9 46%, rgba(120, 120, 120, .55) 64%, rgba(20, 20, 20, 0) 100%); }
.p4c .stk { position: absolute; inset: 0; aspect-ratio: auto; -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 96%); mask-image: radial-gradient(closest-side, #000 62%, transparent 96%); }   /* 상품컷의 연회색 네모 가장자리가 빛 원 위에 보여서(실측) 둥글게 흐림 */
.p4c .stk > span { mix-blend-mode: multiply; transition: opacity .9s var(--ease), transform 1.2s var(--ease); transform: scale(.94); }
.p4c .stk > span.on { transform: none; }
/* 지나가는 빛줄 */
.p4c .stage::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .5) 50%, transparent 65%); background-size: 260% 100%; background-position: 140% 0; mix-blend-mode: soft-light; pointer-events: none; }
.p4c.sweep .stage::after { animation: sweep 1.4s var(--ease); }
@keyframes sweep { from { background-position: 140% 0; } to { background-position: -40% 0; } }
.p4c .meta { color: var(--on-ink); display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: var(--sp-16); border-top: 1px solid rgba(237, 237, 237, .3); padding-top: var(--sp-12); }
.p4c .meta .no2 { font-family: var(--f-disp); font-size: var(--fs-12); color: rgba(237, 237, 237, .6); }
.p4c .meta .mdl { font-size: var(--fs-18); }
.p4c .meta .price { font-size: var(--fs-16); }
.rp#products .shot.p4c { --w: min(var(--aw, 40vw), 56svh); }
@media (max-width: 1023px) { .rp .shot.p4c { width: min(72vw, 32svh); } }

@media (prefers-reduced-motion: reduce) {
  .p4 .stk > span, .p4b .stk > span, .p4c .stk > span { transition: none; transform: none; }
  .p4c.sweep .stage::after { animation: none; }
}