/* 소마앤바디 가게 — 후기 사진(M024 · 설계서 docs/superpowers/specs/2026-11-06-review-photos-design.md §2)
   사진 모음(시안 3 .rv-photos — 6칸 · 휴대폰 4칸 · 마지막 칸 +N) · 후기마다 섬네일 줄 · 보기 창(dialog — review-photos.js) · 새 후기 폼의 사진 칸.
   값은 shop.css 의 토큰(종이 · 무대 · 잉크 · 알약 모서리 · 스프링)만 쓴다 — 새 색 · 새 모양 없음. 모든 규칙은 .sbs-page 로 시작(테마를 이긴다 · shop.css 와 같은 약속).
   보기 창은 사진을 보는 곳이라 어두운 바탕(사진이 주인공) — 아래 설명 칸만 종이. */

/* ── 사진 모음 · 섬네일 ── */
.sbs-page .sbs-rv-photos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.sbs-page :is(.sbs-rv-photos, .sbs-rv-ph) > li { margin: 0; padding: 0; list-style: none; }
.sbs-page .sbs-pv-open {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--sbs-r-pill); corner-shape: squircle; background: var(--sbs-stage); box-shadow: var(--sbs-sh-paper);
  transition: transform .1s ease-out;
}
.sbs-page .sbs-pv-open img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform var(--spring-t, .3s) var(--spring, ease-out); }
@media (hover: hover) { .sbs-page .sbs-pv-open:hover img { transform: scale(1.03); } }
.sbs-page .sbs-pv-open:active { transform: scale(.97); }
.sbs-page .sbs-pv-open:focus-visible { outline: 2px solid var(--sbs-ink); outline-offset: 3px; }
.sbs-page .sbs-rv-more { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15px; font-weight: 700; color: #fff; background: rgba(40, 46, 36, .62); font-variant-numeric: tabular-nums; }
.sbs-page .sbs-rv-more.is-m { display: none; }
.sbs-page .sbs-pv-play { position: absolute; inset: 0; display: grid; place-items: center; }
.sbs-page .sbs-pv-play::before {   /* 재생 표시 — 잉크 삼각형(영상은 섬네일이 없다 · 무대 바탕 위) */
  content: ''; width: 0; height: 0; margin-left: 4px;
  border-left: 15px solid var(--sbs-ink); border-top: 10px solid transparent; border-bottom: 10px solid transparent;
}
.sbs-page .sbs-rv-ph { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.sbs-page .sbs-rv-ph .sbs-pv-open { width: 64px; height: 64px; border-radius: 10px; }
.sbs-page .sbs-rv-held { margin: 0 0 14px; padding: 14px 18px; font-size: 14.5px; font-weight: 600; line-height: 1.6; color: var(--sbs-ink); scroll-margin-top: calc(var(--sbs-hd) + 76px); }

/* ── 새 후기 폼의 사진 칸 ── */
.sbs-page .sbs-rv-form .comment-form > .comment-form-photos { grid-column: 1 / -1; }
.sbs-page .sbs-rv-up { position: relative; }
.sbs-page .sbs-rv-up-hint { margin-left: 6px; font-weight: 500; color: var(--sbs-soft); }
.sbs-page .sbs-rv-up input[type="file"] { display: block; max-width: 100%; font: inherit; font-size: 14px; color: var(--sbs-ink); }   /* JS 가 없을 때 — 브라우저 기본 고르기 */
.sbs-page .sbs-rv-up.is-js input[type="file"] { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.sbs-page .sbs-rv-up-btn { min-height: 44px; padding: 0 18px; font-size: 14.5px; }
.sbs-page .sbs-rv-up-btn:disabled { opacity: .5; cursor: default; }
.sbs-page .sbs-rv-up-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.sbs-page .sbs-rv-up-list > li { position: relative; width: 76px; height: 76px; margin: 0; padding: 0; list-style: none; }
.sbs-page .sbs-rv-up-img { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: var(--sbs-r-pill); corner-shape: squircle; background: var(--sbs-stage); box-shadow: var(--sbs-sh-paper); }
.sbs-page .sbs-rv-up-img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sbs-page .sbs-rv-up-x {   /* 빼기 — 보이는 원은 24px · 누르는 곳은 44px(오른쪽 위 모서리에 걸침) */
  position: absolute; top: -14px; right: -14px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0;
  background: transparent; color: #FFF9F0; cursor: pointer;
}
.sbs-page .sbs-rv-up-x::before { content: ''; position: absolute; width: 24px; height: 24px; border-radius: 50%; background: var(--sbs-ink); box-shadow: 0 0 0 2px var(--sbs-paper); }
.sbs-page .sbs-rv-up-x svg { position: relative; width: 12px; height: 12px; }
.sbs-page .sbs-rv-up-x:focus-visible { outline: 2px solid var(--sbs-ink); outline-offset: -8px; }
.sbs-page .sbs-rv-up-msg { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--sbs-soft); }
.sbs-page .sbs-rv-up-msg.is-err { color: var(--sbs-off); font-weight: 600; }

/* ── 보기 창 ── */
html.sbs-pv-lock { overflow: hidden; }
.sbs-page :is(.sbs-pv, .sbs-pv *, .sbs-rv-up, .sbs-rv-up *) { box-sizing: border-box; }   /* 보기 창은 .sbs-main 밖(body 끝)이라 shop.css 의 상자 규칙이 닿지 않는다 */
.sbs-page .sbs-pv {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(22, 26, 20, .96); color: #FFF9F0; overflow: hidden;
}
.sbs-page .sbs-pv[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.sbs-page .sbs-pv::backdrop { background: rgba(22, 26, 20, .6); }
.sbs-page .sbs-pv-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: max(10px, env(safe-area-inset-top)) 12px 6px 20px; }
.sbs-page .sbs-pv-n { font-family: var(--sbs-mono); font-size: 13px; font-weight: 500; color: #E3E6DC; font-variant-numeric: tabular-nums; }
.sbs-page :is(.sbs-pv-x, .sbs-pv-prev, .sbs-pv-next) {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 249, 240, .14); color: #FFF9F0; cursor: pointer; transition: transform .1s ease-out, background-color .15s ease-out, opacity .15s ease-out;
}
.sbs-page :is(.sbs-pv-x, .sbs-pv-prev, .sbs-pv-next):hover { background: rgba(255, 249, 240, .24); }
.sbs-page :is(.sbs-pv-x, .sbs-pv-prev, .sbs-pv-next):active { transform: scale(.94); }
.sbs-page :is(.sbs-pv-x, .sbs-pv-prev, .sbs-pv-next):focus-visible { outline: 2px solid #FFF9F0; outline-offset: 2px; }
.sbs-page :is(.sbs-pv-prev, .sbs-pv-next):disabled { opacity: .28; cursor: default; transform: none; }
.sbs-page :is(.sbs-pv-x, .sbs-pv-prev, .sbs-pv-next) svg { width: 20px; height: 20px; }
.sbs-page .sbs-pv-stage { position: relative; min-height: 0; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.sbs-page .sbs-pv-slide {
  position: absolute; inset: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: 6px 68px;   /* 칸 높이가 정해져야 사진의 max-height 100% 가 선다 */
  transition: transform var(--spring-t, .3s) var(--spring, ease-out), opacity .22s ease-out;
}
.sbs-page .sbs-pv-slide.is-drag { transition: none; }
.sbs-page .sbs-pv-slide :is(img, video) { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; -webkit-user-drag: none; }
.sbs-page .sbs-pv-slide video { width: 100%; background: #000; }
.sbs-page .sbs-pv-prev, .sbs-page .sbs-pv-next { position: absolute; top: 50%; z-index: 1; margin-top: -22px; }
.sbs-page .sbs-pv-prev { left: 14px; }
.sbs-page .sbs-pv-next { right: 14px; }
.sbs-page .sbs-pv-cap {
  width: min(720px, calc(100% - 24px)); margin: 8px auto max(14px, env(safe-area-inset-bottom)); padding: 12px 16px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; color: var(--sbs-ink);
  --sbs-soft: var(--sbs-soft-paper); --sbs-sage: var(--sbs-sage-paper);
}
.sbs-page .sbs-pv-cap .sbs-rv-h { grid-column: 1; }
.sbs-page .sbs-pv-t { grid-column: 1; margin: 0; font-size: 14px; line-height: 1.55; color: var(--sbs-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.sbs-page .sbs-pv-go { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--sbs-ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

@media (max-width: 899.98px) {
  .sbs-page .sbs-rv-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .sbs-page .sbs-rv-photos > li:nth-child(n+5) { display: none; }
  .sbs-page .sbs-rv-more { display: none; }
  .sbs-page .sbs-rv-more.is-m { display: grid; }
  .sbs-page .sbs-pv-slide { padding: 4px 0; }
  .sbs-page .sbs-pv-slide :is(img, video) { border-radius: 0; }
  .sbs-page .sbs-pv-prev { left: 8px; }
  .sbs-page .sbs-pv-next { right: 8px; }
  .sbs-page :is(.sbs-pv-prev, .sbs-pv-next) { background: rgba(22, 26, 20, .5); }
  .sbs-page .sbs-pv-cap { grid-template-columns: minmax(0, 1fr); }
  .sbs-page .sbs-pv-go { grid-column: 1; grid-row: auto; min-height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .sbs-page .sbs-pv-slide { transition: opacity .2s ease; transform: none !important; }
  .sbs-page .sbs-pv-open, .sbs-page .sbs-pv-open img { transition: none; }
  .sbs-page .sbs-pv-open:active, .sbs-page :is(.sbs-pv-x, .sbs-pv-prev, .sbs-pv-next):active { transform: none; }
  @media (hover: hover) { .sbs-page .sbs-pv-open:hover img { transform: none; } }
}
@media (prefers-contrast: more) {
  .sbs-page.sbs-page :is(.sbs-pv-open, .sbs-rv-up-img) { box-shadow: inset 0 0 0 1.5px var(--sbs-ink); }
  .sbs-page.sbs-page .sbs-pv { background: #111; }
}