/* 소마앤바디 가게 — 상품·상점·분류 쪽 틀(templates/product.php · shop.php) · 가게 프론트엔드 계획 Task 4(바탕) · Task 5(브랜드 쪽)
   모양의 단일 출처 = 설계서 docs/superpowers/specs/2026-11-02-shop-frontend-design.md §9 · 시안 3(docs/superpowers/handoff/2026-11-02-shop-mock3/
   mock2.css + mock2-new.css + apple.css)의 브랜드 쪽 선택자를 sbs- 접두로 옮긴 것(.slab → .sbs-slab · .cfg → .sbs-cfg · .stage → .sbs-stage …).
   스쿼클 도우미(.sq · .sq-sheet · .sq-tile · .sq-ctl · .sq-pill)는 이름 그대로 — squircle.js 가 .sq 와 --sq 를 본다. 토큰은 :root 가 아니라 body.sbs-page 에(격리).
   body 위 여백(헤더 높이)은 가족 헤더 로더가 body 에 건다 — 여기서 주지 않는다. 테마(시험 사이트 블록 테마 · 실제 가게 Astra)의 규칙을 이기려고
   모든 규칙을 .sbs-page 로 시작한다(0,2,0 — 테마의 button:hover 0,1,1 보다 높다). 스프링 곡선(--spring …)은 springs.css(:root).
   차례: 토큰 · 바탕 · 되돌림 · 공통(종이 · 판 · 단추 · 칩) · 빵부스러기 · 구성기 · 구역 막대 · 구역 · 구매 막대 · 옵션 판 · 휴대폰 · 움직임·접근성 */

/* ── 토큰(§9-1) ── */
body.sbs-page {
  --sbs-paper: #FAF9F7;
  --sbs-stage: #F1F0EB;
  --sbs-ink: #3F4437;
  --sbs-soft-paper: #5C6654;    /* 옅은 글(종이 위) — 종이 위 5.73:1 · 무대 위 5.28:1 */
  --sbs-sage-paper: #55654A;    /* 세이지 짙은(종이 위) — 종이 위 5.96:1 */
  --sbs-soft-glass: #485040;    /* 유리 위 옅은 글(Task 10 대비 측정 · Ruling 27) — 판 .72 이 뒤 바다에 따라 어두워져도 5:1 안팎 */
  --sbs-sage-glass: #43553A;    /* 유리 위 세이지 */
  --sbs-soft: var(--sbs-soft-paper);   /* 규칙이 쓰는 이름 — 유리 판 안에서는 -glass · 그 안의 종이 칸에서는 다시 -paper(아래 「유리 위 글」) */
  --sbs-sage: var(--sbs-sage-paper);
  --sbs-sage-l: #A8B594;
  --sbs-wash: #EBEFE3;
  --sbs-off: #B5530F;           /* 할인율 · 한정판 — 종이 위 4.74:1(흐린 칸 위에는 쓰지 않는다) */
  --sbs-line: rgba(63, 68, 55, .16);
  --sbs-line-s: #DFE4D6;
  --sbs-edge: rgba(63, 68, 55, .08);   /* 종이 칸의 1px 테 */
  --sbs-dim: #F3F3EE;           /* 입고 예정 칸 — 옅은 글 5.42:1 */
  --sbs-font: 'IBM Plex Sans KR', system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --sbs-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* 모서리(스쿼클) — 판 36 · 칸 22 · 조작 14 · 알약 12(휴대폰 판 26 · 칸 18) */
  --sbs-r-sheet: 36px;
  --sbs-r-tile: 22px;
  --sbs-r-ctl: 14px;
  --sbs-r-pill: 12px;
  /* 판(slab) 유리 · 종이 칸의 놓임 */
  --sbs-slab: rgba(250, 249, 247, .72);
  --sbs-sh-slab: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 0 0 1px rgba(255, 255, 255, .34) inset, 0 30px 70px -36px rgba(8, 26, 38, .6), 0 2px 6px -2px rgba(8, 26, 38, .18);
  --sbs-sh-paper: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 0 0 1px var(--sbs-edge);
  --sbs-hd: var(--sbhd-h, 108px);   /* 가족 헤더 높이(엔진 변수) */
  margin: 0;
  background: #DCE7EE;   /* 바다 영상 뒤 바탕(영상이 오기 전 · 영상이 없을 때) */
  color: var(--sbs-ink);
  font-family: var(--sbs-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media (max-width: 899.98px) {
  body.sbs-page { --sbs-r-sheet: 26px; --sbs-r-tile: 18px; --sbs-hd: var(--sbhd-hm, 100px); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.sbs-page { --sbs-slab: rgba(250, 249, 247, .94); }
}

/* ── 바탕: 해변 영상(고정 배경 — templates/parts/sea-video.php 의 클래스) · 본문 폭 ── */
body.sbs-page .sbh-sea-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}
body.sbs-page .sbs-main {
  box-sizing: border-box;
  max-width: 1304px;   /* 판 1240 + 좌우 32 */
  margin: 0 auto;
  padding: 0 32px 64px;
}
/* 헤더 아래 그늘 16px(§9-2 — 1px 선 대신 · 헤더 ↔ 판이 겹칠 때) */
body.sbs-page #sbHd::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 16px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(10, 22, 30, .1), rgba(10, 22, 30, 0));
}

/* ── 되돌림(테마 규칙을 지운다 — :where 로 0,1,0 · 아래 구성 규칙이 이긴다) ── */
.sbs-page :where(.sbs-main, .sbs-bbar, .sbs-sheet) :where(*, *::before, *::after) { box-sizing: border-box; }
.sbs-page :where(.sbs-main, .sbs-bbar, .sbs-sheet) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure):where(:not(.sbs-prose *)) { margin: 0; padding: 0; }
.sbs-page :where(.sbs-main, .sbs-bbar, .sbs-sheet) :where(ul, ol):where(:not(.sbs-prose *)) { list-style: none; }
.sbs-page :where(.sbs-main, .sbs-bbar, .sbs-sheet) :where(button) {
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit;
  font: inherit; letter-spacing: inherit; line-height: inherit; text-transform: none; text-decoration: none; cursor: pointer;
  -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
}
.sbs-page :where(.sbs-main, .sbs-bbar, .sbs-sheet) :where(button):is(:hover, :focus, :active) { background: none; color: inherit; border: 0; box-shadow: none; }
.sbs-page :where(.sbs-main, .sbs-bbar, .sbs-sheet) :where(a) { color: inherit; text-decoration: none; }
.sbs-page :where(.sbs-main, .sbs-bbar, .sbs-sheet) :where(b, strong) { font-weight: 700; }
.sbs-page :where(.sbs-main, .sbs-bbar, .sbs-sheet) :where(img) { display: block; max-width: 100%; height: auto; }
.sbs-page :where(.sbs-main, .sbs-bbar, .sbs-sheet) [hidden] { display: none !important; }
.sbs-page .sbs-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* 포커스 고리 — 2px 잉크(§3) */
.sbs-page :where(.sbs-main, .sbs-bbar, .sbs-sheet) :is(a, button, input, summary):focus-visible { outline: 2px solid var(--sbs-ink); outline-offset: 3px; }
.sbs-page :where(.sbs-main, .sbs-bbar, .sbs-sheet) :is(a, button, input, summary):focus:not(:focus-visible) { outline: none; }

/* ── 스쿼클(§9-2): corner-shape 를 아는 브라우저는 CSS 로 · 모르면 squircle.js 가 .sq 에 clip-path(--sq) ── */
.sbs-page .sq { corner-shape: squircle; }
.sbs-page .sq-sheet { --sq: var(--sbs-r-sheet); border-radius: var(--sbs-r-sheet); }
.sbs-page .sq-tile { --sq: var(--sbs-r-tile); border-radius: var(--sbs-r-tile); }
.sbs-page .sq-ctl { --sq: var(--sbs-r-ctl); border-radius: var(--sbs-r-ctl); }
.sbs-page .sq-pill { --sq: var(--sbs-r-pill); border-radius: var(--sbs-r-pill); }

/* ── 공통: 판(유리 — 구역마다 하나) · 종이 칸 · 단추 · 칩 ── */
.sbs-page .sbs-slab,
.sbs-page .sbs-sec {
  position: relative;
  background: var(--sbs-slab);
  -webkit-backdrop-filter: blur(30px) saturate(1.25);
  backdrop-filter: blur(30px) saturate(1.25);
  box-shadow: var(--sbs-sh-slab);
}
.sbs-page .sbs-slab::before,
.sbs-page .sbs-sec::before {   /* 위쪽 빛(.42 → 0) */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  corner-shape: inherit;
  pointer-events: none;
  background: linear-gradient(170deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, .08) 26%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, .12) 100%);
}
.sbs-page .sbs-slab > *,
.sbs-page .sbs-sec > * { position: relative; }
.sbs-page .sbs-paper { background: var(--sbs-paper); box-shadow: var(--sbs-sh-paper); }
/* 유리 위 옅은 글 · 세이지 글은 한 단계 진하게(Task 10 — 판 .72 은 뒤 바다에 따라 어두워져 #5C6654 가 3.7:1 까지 내려갔다 · 진한 값은 그 바닥에서 5:1 안팎).
   판 안의 종이 칸(불투명)은 종이 위 값(5.73 · 5.96)으로 되돌린다 — 빠진 종이 칸이 있어도 진한 값이 4.5 를 넘으니 안전한 쪽 */
.sbs-page :is(.sbs-slab, .sbs-sec, .sbs-tabs-in, .sbs-bbar) { --sbs-soft: var(--sbs-soft-glass); --sbs-sage: var(--sbs-sage-glass); }
.sbs-page :is(.sbs-slab, .sbs-sec) :is(.sbs-paper, .sbs-opt, .sbs-wt, .sbs-summary, .sbs-soon, .sbs-stage, .sbs-bcard, .sbs-ptable, .sbs-spec-dl, .sbs-rv, .sbs-rv-score, .sbs-online, .sbs-guide, .sbs-wk, .sbs-prose) { --sbs-soft: var(--sbs-soft-paper); --sbs-sage: var(--sbs-sage-paper); }
.sbs-page .sbs-kick { font-size: 13.5px; font-weight: 600; color: var(--sbs-sage); letter-spacing: .01em; }
.sbs-page .sbs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px;
  font-size: 16px; font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none;
  transition: transform .1s ease-out, box-shadow var(--spring-t, .3s) var(--spring, ease-out), background-color .15s ease-out;
}
.sbs-page .sbs-btn-1 { background: var(--sbs-ink); color: #FFF9F0; }   /* 잉크 위 흰 글 9.58:1 */
.sbs-page .sbs-btn-1:hover { background: #2F3329; color: #FFF9F0; }
.sbs-page .sbs-btn-2 { background: var(--sbs-paper); color: var(--sbs-ink); box-shadow: inset 0 0 0 1.5px var(--sbs-ink); }
.sbs-page .sbs-btn-2:hover { background: #fff; color: var(--sbs-ink); box-shadow: inset 0 0 0 1.5px var(--sbs-ink); }
.sbs-page .sbs-btn-s { min-height: 44px; padding: 0 16px; font-size: 14.5px; }
.sbs-page .sbs-btn .sbs-ic { width: 18px; height: 18px; }
.sbs-page .sbs-status {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; min-height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--sbs-sage); background: var(--sbs-wash); white-space: nowrap; letter-spacing: .01em;
}
.sbs-page .sbs-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sbs-sage-l); }
.sbs-page .sbs-sw { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--c, #999); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); flex: none; }
/* 자리표시(사진이 없는 브랜드 — 종이 칸에 연한 세이지 + 브랜드 이름) */
.sbs-page .sbs-ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; background: var(--sbs-wash); color: var(--sbs-sage); }
.sbs-page .sbs-ph span { font-size: 18px; font-weight: 600; letter-spacing: -.006em; line-height: 1.35; }

/* ── 빵부스러기(§7-1 1 — 바다 위 흰 글) ── */
.sbs-page .sbs-notices:empty { display: none; }
.sbs-page .sbs-notices { padding-top: 16px; }
.sbs-page .sbs-notices > * { margin: 0 0 8px; border-radius: var(--sbs-r-pill); box-shadow: var(--sbs-sh-paper); }   /* 우커머스 알림 상자 — 바다 위에 놓이게 둥글게 */
/* 알림 상자 — 브랜드 색으로(한얼 2026-11-08 · 장바구니 · 주문서 · 내 계정과 같은 모양): Astra 의 파란 위 테두리 · 둥근 아이콘(::before)을 걷고 종이 바탕 + 잉크 글자(바다 위라 종이) · 오류는 붉은 옅은 바탕. 파랑 없음 */
body.sbs-page .sbs-notices :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) { padding: 12px 16px !important; list-style: none; font-family: var(--sbs-font); font-size: 14.5px; line-height: 1.55; text-align: left;
  color: var(--sbs-ink) !important; background: var(--sbs-paper) !important; border: 0 !important; corner-shape: squircle; }
body.sbs-page .sbs-notices .woocommerce-error { color: #B4412E !important; background: #FBF1EE !important; }
body.sbs-page .sbs-notices :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before { display: none !important; content: none !important; }
body.sbs-page .sbs-notices :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) li { margin: 0; padding: 0; list-style: none; }
body.sbs-page :is(.sbs-notices, .woocommerce-notices-wrapper, .sbs-notices .woocommerce-message, .sbs-notices .woocommerce-info, .sbs-notices .woocommerce-error, .sbs-notices [role="alert"]):focus { outline: none !important; }   /* 우커머스가 알림으로 옮긴 포커스(누르는 곳 아님 · tabindex -1) — 브라우저 기본 파란 고리를 그리지 않는다(2026-11-08) */
/* 알림 안의 단추(「장바구니 보기」 등 — M073) — 상자는 그대로 · 단추만 우리 잉크 단추(작은 것). Astra 의 .woocommerce .woocommerce-message a.button(파랑)에 지지 않게 !important */
body.sbs-page .sbs-notices .button { display: inline-flex; align-items: center; justify-content: center; float: none; min-width: 44px; min-height: 44px; margin: 0 0 0 10px; padding: 0 16px;
  font-family: var(--sbs-font); font-size: 14.5px; font-weight: 600; line-height: 1.2; text-transform: none; text-decoration: none; white-space: nowrap;
  color: #FFF9F0 !important; background: var(--sbs-ink) !important; border: 0 !important; border-radius: var(--sbs-r-ctl) !important; corner-shape: squircle; box-shadow: none !important; }
@media (hover: hover) { body.sbs-page .sbs-notices .button:hover { color: #FFF9F0 !important; background: #2F3329 !important; } }
body.sbs-page .sbs-notices .button:active { transform: scale(.97); }
.sbs-page .sbs-crumb { padding: 18px 0 4px; }
.sbs-page .sbs-crumb ol {   /* 바다 위 흰 글 — 어두운 알약(흐림 없음 · 뒤 흐림 겹을 늘리지 않는다)으로 4.5:1 을 지킨다(밝은 하늘 위 맨 글은 3.3:1 이었다) */
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0; padding: 1px 12px; list-style: none;
  border-radius: 999px; background: rgba(14, 26, 38, .66);   /* .5 → .66(Task 10 — 휴대폰 세로 영상의 밝은 하늘 위에서 3.8:1 까지 내려갔다) */
}
.sbs-page .sbs-crumb li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: #FFF9F0; letter-spacing: .01em; }
.sbs-page .sbs-crumb li + li::before { content: '›'; opacity: .75; }
.sbs-page .sbs-crumb a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; margin: -6px -10px; color: inherit; text-decoration: none; }   /* 누르는 곳 44 × 44 이상 — 안쪽 여백만큼 바깥 여백을 빼서 자리 · 알약 높이(34)는 그대로(2026-11-08 · 전에는 32 높이 · 「제품」 24 폭) */
.sbs-page .sbs-crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sbs-page .sbs-crumb [aria-current] { font-weight: 600; color: #fff; }
.sbs-page .sbs-crumb a:focus-visible { outline-color: #fff; }

/* ── 구성기 판(§7-1 2 — 왼쪽 무대 · 오른쪽 단계) ── */
.sbs-page .sbs-cfg {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: start;
  margin: 16px 0 26px; padding: 36px 44px 44px;
}
.sbs-page .sbs-cfg-stage { position: sticky; top: calc(var(--sbs-hd) + 24px); }
.sbs-page .sbs-stage {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--sbs-stage);
  box-shadow: var(--sbs-sh-paper);
}
/* 재질화(§9-4) — 사진은 흐림 12 · 크기 1.03 · 투명에서 함께 풀리며 도착(.is-in) · 두 번째 겹은 shop.js 가 만든다 */
.sbs-page .sbs-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; mix-blend-mode: multiply;
  opacity: 0; filter: blur(12px); transform: scale(1.03);
  transition: opacity var(--spring-t, .3s) var(--spring, ease-out), filter var(--spring-t, .3s) var(--spring, ease-out), transform var(--spring-t, .3s) var(--spring, ease-out);
}
.sbs-page .sbs-stage img.is-in { opacity: 1; filter: none; transform: none; }
.sbs-page .sbs-stage-chips { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.sbs-page .sbs-stage-chips span {   /* 얇은 유리 .8 + 흐림 10(§9-2) */
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--sbs-ink);
  background: rgba(250, 249, 247, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(63, 68, 55, .1);
  opacity: 0; transform: translateY(6px); filter: blur(4px);
  transition: opacity .35s var(--spring, ease-out), transform var(--spring-t, .3s) var(--spring, ease-out), filter .35s var(--spring, ease-out);
}
.sbs-page .sbs-stage-chips.is-in span { opacity: 1; transform: none; filter: none; }
.sbs-page .sbs-stage-chips.is-in span:nth-child(2) { transition-delay: .03s; }
.sbs-page .sbs-stage-chips.is-in span:nth-child(3) { transition-delay: .06s; }
.sbs-page .sbs-stage-chips.is-in span:nth-child(4) { transition-delay: .09s; }
.sbs-page .sbs-stage-chips.is-in span:nth-child(5) { transition-delay: .12s; }
.sbs-page .sbs-stage-chips i { width: 10px; height: 10px; border-radius: 50%; background: var(--c, #999); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.sbs-page .sbs-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.sbs-page .sbs-thumbs button { position: relative; aspect-ratio: 1 / 1; min-height: 44px; overflow: hidden; background: var(--sbs-stage); box-shadow: inset 0 0 0 1px var(--sbs-line); }
.sbs-page .sbs-thumbs button.is-on { box-shadow: inset 0 0 0 2px var(--sbs-ink); }
.sbs-page .sbs-thumbs img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }

.sbs-page .sbs-cfg-steps h1 { margin-top: 6px; font-size: 34px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--sbs-ink); }
.sbs-page .sbs-lede { margin-top: 10px; font-size: 16px; font-weight: 500; color: var(--sbs-soft); }
.sbs-page .sbs-rate { display: inline-flex; align-items: center; gap: 6px; min-width: 44px; min-height: 44px; margin-top: 4px; font-size: 14px; font-weight: 500; color: var(--sbs-soft); }
.sbs-page .sbs-rate b { color: var(--sbs-ink); font-variant-numeric: tabular-nums; }
.sbs-page .sbs-rate:hover { text-decoration: underline; text-underline-offset: 3px; }
.sbs-page .sbs-step { margin-top: 30px; }
.sbs-page .sbs-step-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sbs-page .sbs-step-h :is(h2, h3) { font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.006em; color: var(--sbs-ink); }
.sbs-page .sbs-step-h span { font-size: 14px; font-weight: 500; color: var(--sbs-soft); text-align: right; }
/* 옵션 카드(앞 단계) — 종이 */
.sbs-page .sbs-opts { display: grid; gap: 8px; }
.sbs-page .sbs-opts.is-many { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sbs-page .sbs-opt {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: center; width: 100%; min-height: 56px; padding: 16px 18px;
  text-align: left; background: var(--sbs-paper); color: var(--sbs-ink); box-shadow: inset 0 0 0 1px var(--sbs-line-s);
  transition: transform .1s ease-out, box-shadow var(--spring-t, .3s) var(--spring, ease-out);
}
.sbs-page .sbs-opt b { display: inline-flex; align-items: center; gap: 8px; font-size: 16.5px; font-weight: 700; letter-spacing: -.006em; }
.sbs-page .sbs-opt span { grid-column: 1; font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--sbs-soft); }
.sbs-page .sbs-opt em { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sbs-soft); white-space: nowrap; }
.sbs-page .sbs-opt .sbs-st { grid-column: 1 / -1; font-size: 12px; font-weight: 600; color: var(--sbs-sage); }
.sbs-page .sbs-opt[data-state="incoming"] { background: var(--sbs-dim); box-shadow: inset 0 0 0 1px var(--sbs-line-s); }
.sbs-page .sbs-opt.is-on,
.sbs-page .sbs-opt.is-on:hover { box-shadow: inset 0 0 0 2px var(--sbs-ink); }
.sbs-page .sbs-opt:hover { box-shadow: inset 0 0 0 1px var(--sbs-sage-l); }
.sbs-page .sbs-opts.is-many .sbs-opt { grid-template-columns: 1fr; }
.sbs-page .sbs-opts.is-many .sbs-opt em { grid-column: 1; grid-row: auto; }
/* 칸 그리드(마지막 단계 — 칸 하나 = 자식 하나) — 4열 */
.sbs-page .sbs-wgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sbs-page .sbs-wt {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 74px; padding: 12px 12px 10px;
  text-align: left; background: var(--sbs-paper); color: var(--sbs-ink); box-shadow: inset 0 0 0 1px var(--sbs-line-s);
  transition: transform .1s ease-out, box-shadow var(--spring-t, .3s) var(--spring, ease-out);
}
.sbs-page .sbs-wt .sbs-sw { position: absolute; right: 10px; top: 10px; }
.sbs-page .sbs-wt b { font-family: var(--sbs-mono); font-size: 19px; font-weight: 500; line-height: 1.1; padding-right: 14px; white-space: nowrap; overflow-wrap: normal; }
.sbs-page .sbs-wt b small { margin-left: 1px; font-size: 12px; }
.sbs-page .sbs-wt b.is-text { font-family: var(--sbs-font); font-size: 16px; font-weight: 700; line-height: 1.25; white-space: normal; }
.sbs-page .sbs-wt .sbs-pr { font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--sbs-soft); letter-spacing: .01em; white-space: nowrap; }
.sbs-page .sbs-wt .sbs-st { margin-top: 4px; font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--sbs-sage); letter-spacing: .01em; }
.sbs-page .sbs-wt[data-state="incoming"] { background: var(--sbs-dim); box-shadow: inset 0 0 0 1px var(--sbs-line-s); }
.sbs-page .sbs-wt[data-state="incoming"] b { color: var(--sbs-soft); }
.sbs-page .sbs-wt:is([data-state="limited"], [data-state="last"]) .sbs-st { color: var(--sbs-off); }
.sbs-page .sbs-wt:hover { box-shadow: inset 0 0 0 1px var(--sbs-sage-l); }
.sbs-page .sbs-wt.is-on,
.sbs-page .sbs-wt.is-on:hover { box-shadow: inset 0 0 0 2px var(--sbs-ink); }
.sbs-page .sbs-help { margin-top: 10px; font-size: 13.5px; font-weight: 500; line-height: 1.6; color: var(--sbs-soft); }
.sbs-page .sbs-help a { font-weight: 600; color: var(--sbs-ink); text-decoration: underline; text-underline-offset: 3px; }
/* 출시 예정 줄(단계 밖 · §4-6) */
.sbs-page .sbs-soon { margin-top: 18px; background: var(--sbs-paper); box-shadow: var(--sbs-sh-paper); }
.sbs-page .sbs-soon summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 18px; cursor: pointer; list-style: none; font-size: 15px; }
.sbs-page .sbs-soon summary::-webkit-details-marker { display: none; }
.sbs-page .sbs-soon summary span { font-family: var(--sbs-mono); font-size: 12.5px; color: var(--sbs-soft); }
.sbs-page .sbs-soon summary::after { content: ''; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--sbs-soft); border-bottom: 2px solid var(--sbs-soft); transform: rotate(45deg) translateY(-2px); }
.sbs-page .sbs-soon[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.sbs-page .sbs-soon ul { padding: 0 18px 12px; }
.sbs-page .sbs-soon li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--sbs-line-s); font-size: 14px; color: var(--sbs-ink); }
.sbs-page .sbs-soon .sbs-btn { flex: none; background: var(--sbs-paper); color: var(--sbs-ink); box-shadow: inset 0 0 0 1px var(--sbs-ink); font-size: 13.5px; }
/* 요약(종이 — 이름 · 규격 · 가격 · 상태 · 수량 · 합계 · 단추) */
.sbs-page .sbs-summary { margin-top: 26px; padding: 20px 22px; background: var(--sbs-paper); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 0 0 1px rgba(63, 68, 55, .1); }
.sbs-page .sbs-sum-name b { display: block; font-size: 17px; font-weight: 700; line-height: 1.35; letter-spacing: -.006em; }
.sbs-page .sbs-sum-name span { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 500; color: var(--sbs-soft); }
.sbs-page .sbs-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 12px; font-variant-numeric: tabular-nums; }
.sbs-page .sbs-price .sbs-off { display: inline-flex; align-items: center; min-height: 26px; padding: 0 8px; border-radius: 8px; font-size: 15px; font-weight: 700; color: var(--sbs-off); background: #FDF5EE; box-shadow: inset 0 0 0 1px rgba(181, 83, 15, .18); }   /* 할인율 칩 4.63:1 */
.sbs-page .sbs-price .sbs-now { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.sbs-page .sbs-price s { font-size: 15px; color: var(--sbs-soft); }
.sbs-page .sbs-sum-state { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--sbs-sage); }
.sbs-page .sbs-sum-state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sbs-page .sbs-sum-state.is-incoming,
.sbs-page .sbs-sum-state.is-soon { color: var(--sbs-soft); }
.sbs-page .sbs-sum-state:is(.is-limited, .is-last) { color: var(--sbs-off); }
.sbs-page .sbs-qrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sbs-line-s); }
.sbs-page .sbs-qrow-t { width: 100%; font-size: 14.5px; font-weight: 700; }
.sbs-page .sbs-step-q { display: inline-grid; grid-template-columns: 44px 48px 44px; align-items: center; height: 44px; background: #fff; box-shadow: inset 0 0 0 1px var(--sbs-line-s); }
.sbs-page .sbs-step-q button { height: 44px; font-size: 20px; color: var(--sbs-ink); transition: transform .1s ease-out; }
.sbs-page .sbs-step-q .sbs-q {
  width: 48px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline-offset: -2px;
  font-family: var(--sbs-mono); font-size: 15px; font-weight: 500; text-align: center; color: var(--sbs-ink); -webkit-appearance: none; appearance: none;
}
.sbs-page .sbs-pair { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: 13.5px; font-weight: 600; color: var(--sbs-sage); background: var(--sbs-wash); }
.sbs-page .sbs-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sbs-line-s); font-size: 15px; font-weight: 600; }
.sbs-page .sbs-total b { font-size: 22px; font-variant-numeric: tabular-nums; }
.sbs-page .sbs-btns { display: grid; grid-template-columns: 1fr 1.35fr; gap: 8px; margin-top: 12px; }
.sbs-page .sbs-notify-main { width: 100%; margin-top: 14px; }
.sbs-page .sbs-npay:empty { display: none; }
.sbs-page .sbs-npay { margin-top: 8px; }
.sbs-page .sbs-shipl { display: grid; gap: 9px; margin-top: 16px; padding: 14px 16px 12px; border-radius: var(--sbs-r-pill); background: var(--sbs-stage); }
.sbs-page .sbs-shipl li { display: grid; grid-template-columns: 20px 74px 1fr; gap: 8px; align-items: start; font-size: 13.5px; line-height: 1.55; letter-spacing: .01em; }
.sbs-page .sbs-shipl .sbs-ic { width: 18px; height: 18px; margin-top: 1px; color: var(--sbs-sage); }
.sbs-page .sbs-shipl span { color: var(--sbs-soft); }
.sbs-page .sbs-shipl a { display: inline-block; padding: 12px 10px; margin: -12px -10px; font-weight: 600; color: var(--sbs-ink); text-decoration: underline; text-underline-offset: 3px; }   /* 글 속 링크(「자세히」 · 「조건」) — 누르는 곳만 44 높이로(줄 높이 · 자리는 그대로 · 2026-11-08) */
/* 「배송 · 교환 · 환불 안내 보기 →」(2026-11-10 토스 심사 보완 — 결제 전에 보이는 환불 규정) — 구매 칸 밑 · 배송 구역 끝. 누르는 곳 44 높이 */
.sbs-page .sbs-shipdoc { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; }
.sbs-page .sbs-shipdoc a { display: inline-block; padding: 12px 0; font-weight: 600; color: var(--sbs-ink); text-decoration: underline; text-underline-offset: 3px; }
.sbs-page .sbs-sec > .sbs-shipdoc { margin-top: 14px; font-size: 14px; }

/* ── 구역 막대(§7-1 3 — 따라옴 · 두꺼운 재질 .9 + 흐림 14 + 깊은 그림자) ── */
.sbs-page .sbs-tabs { position: sticky; top: calc(var(--sbs-hd) + 8px); z-index: 30; margin: 0 0 18px; }
.sbs-page .sbs-tabs-in {
  display: flex; align-items: center; gap: 2px; padding: 6px 8px; overflow-x: auto; scrollbar-width: none;
  background: rgba(250, 249, 247, .9); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 0 0 1px rgba(255, 255, 255, .5) inset, 0 14px 34px -18px rgba(8, 26, 38, .5);
}
.sbs-page .sbs-tabs-in::-webkit-scrollbar { display: none; }
.sbs-page .sbs-tabs-in > a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 10px; white-space: nowrap;
  font-size: 14.5px; font-weight: 600; color: var(--sbs-soft); transition: transform .1s ease-out, background-color .15s ease-out;
}
.sbs-page .sbs-tabs-in > a span { font-family: var(--sbs-mono); font-size: 12px; font-weight: 500; }
.sbs-page .sbs-tabs-in > a:hover { color: var(--sbs-ink); }
.sbs-page .sbs-tabs-in > a.is-on { color: var(--sbs-ink); background: rgba(255, 255, 255, .85); box-shadow: 0 1px 2px rgba(38, 42, 34, .1); }
.sbs-page .sbs-mini { display: flex; align-items: center; gap: 12px; margin-left: auto; padding-left: 12px; white-space: nowrap; }
.sbs-page .sbs-mini-sel { font-size: 12.5px; font-weight: 500; color: var(--sbs-soft); }
.sbs-page .sbs-mini b { font-size: 16px; font-variant-numeric: tabular-nums; }

/* ── 구역(§7-1 4~10 — 판 하나씩) ── */
.sbs-page .sbs-sec { margin: 0 0 18px; padding: 44px 48px 48px; scroll-margin-top: calc(var(--sbs-hd) + 76px); }
.sbs-page .sbs-sec > h2 { margin-top: 6px; font-size: 25px; font-weight: 700; line-height: 1.25; letter-spacing: -.012em; color: var(--sbs-ink); }
.sbs-page .sbs-sec > h2 .sbs-n { font-family: var(--sbs-mono); font-size: 18px; font-weight: 500; color: var(--sbs-soft); }
.sbs-page .sbs-sec-body { margin-top: 24px; }
.sbs-page #sbsCfg { scroll-margin-top: calc(var(--sbs-hd) + 16px); }
/* 후기(§7-1 4 — Task 8 · 종이 칸: 평점 · 목록 · 폼) */
.sbs-page .sbs-rv-top { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 18px 24px; align-items: start; }
.sbs-page .sbs-rv-score { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 12px; padding: 18px 20px; }
.sbs-page .sbs-rv-avg { font-size: 36px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--sbs-ink); }
.sbs-page .sbs-rv-cnt { grid-column: 1 / -1; font-size: 13.5px; font-weight: 500; color: var(--sbs-soft); }
.sbs-page .sbs-stars { display: inline-flex; gap: 1px; color: var(--sbs-ink); }
.sbs-page .sbs-star { width: 16px; height: 16px; fill: var(--sbs-line-s); stroke: none; }
.sbs-page .sbs-star.is-on { fill: var(--sbs-ink); }
.sbs-page .sbs-rv-dist { grid-column: 1 / -1; display: grid; gap: 4px; margin-top: 8px; }
.sbs-page .sbs-rv-dist li { display: grid; grid-template-columns: 30px minmax(0, 1fr) 28px; align-items: center; gap: 8px; font-size: 12.5px; color: var(--sbs-soft); font-variant-numeric: tabular-nums; }
.sbs-page .sbs-rv-dist li > span:last-child { text-align: right; }
.sbs-page .sbs-rv-dist li > i { display: block; height: 6px; border-radius: 3px; background: var(--sbs-stage); overflow: hidden; }
.sbs-page .sbs-rv-dist li > i > i { display: block; height: 100%; border-radius: inherit; background: var(--sbs-sage); }
.sbs-page .sbs-rv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sbs-page .sbs-rv-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; font-size: 14px; font-weight: 600;
  color: var(--sbs-ink); background: var(--sbs-paper); box-shadow: inset 0 0 0 1px var(--sbs-line-s); transition: transform .1s ease-out, background-color .15s ease-out;
}
.sbs-page .sbs-rv-chip span { font-family: var(--sbs-mono); font-size: 12px; font-weight: 500; color: var(--sbs-soft); }
.sbs-page .sbs-rv-chip[aria-pressed="true"] { background: var(--sbs-ink); color: #FFF9F0; box-shadow: none; }
.sbs-page .sbs-rv-chip[aria-pressed="true"] span { color: #E3E6DC; }
.sbs-page .sbs-rv-list { display: grid; gap: 12px; margin-top: 18px; }
.sbs-page .sbs-rv { padding: 18px 20px; scroll-margin-top: calc(var(--sbs-hd) + 76px); }
.sbs-page .sbs-rv-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--sbs-soft); }
.sbs-page .sbs-rv-h .sbs-star { width: 14px; height: 14px; }
.sbs-page .sbs-rv-tag { display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--sbs-ink); background: var(--sbs-stage); }
.sbs-page .sbs-rv-h time { font-family: var(--sbs-mono); font-size: 12px; }
.sbs-page .sbs-rv-text { margin-top: 10px; font-size: 15px; line-height: 1.7; color: var(--sbs-ink); overflow-wrap: anywhere; }
.sbs-page .sbs-rv-reply { margin: 14px 0 0; padding: 12px 16px; border-left: 3px solid var(--sbs-sage-l); border-radius: 0 var(--sbs-r-pill) var(--sbs-r-pill) 0; background: var(--sbs-wash); font-size: 14px; line-height: 1.65; color: var(--sbs-ink); }
.sbs-page .sbs-rv-reply-h { margin-bottom: 4px; font-size: 13px; color: var(--sbs-soft); }
.sbs-page .sbs-rv-reply-h b { color: var(--sbs-sage); }
.sbs-page .sbs-rv-empty { padding: 22px 24px; font-size: 15px; font-weight: 500; color: var(--sbs-soft); }
.sbs-page .sbs-rv-form { margin-top: 18px; padding: 22px 24px 24px; }
.sbs-page .sbs-rv-form .comment-reply-title { display: block; font-size: 17px; font-weight: 700; color: var(--sbs-ink); }
.sbs-page .sbs-rv-form .comment-reply-title small { margin-left: 8px; font-size: 13px; font-weight: 500; }
.sbs-page .sbs-rv-form :is(.sbs-rv-note, .must-log-in, .logged-in-as) { margin-top: 6px; font-size: 13.5px; color: var(--sbs-soft); }
.sbs-page .sbs-rv-form .comment-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; margin-top: 14px; }
.sbs-page .sbs-rv-form .comment-form > :is(.sbs-rv-note, .comment-form-rating, .comment-form-comment, .comment-form-cookies-consent, .form-submit) { grid-column: 1 / -1; }
.sbs-page .sbs-rv-form label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; color: var(--sbs-ink); }
.sbs-page .sbs-rv-form .comment-form-cookies-consent { display: flex; align-items: center; gap: 10px; }
.sbs-page .sbs-rv-form .comment-form-cookies-consent input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--sbs-ink); }
.sbs-page .sbs-rv-form .comment-form-cookies-consent label { display: inline-flex; align-items: center; min-height: 44px; margin: 0; font-weight: 500; cursor: pointer; }   /* 이름표가 누르는 곳 — 44(Task 10) */
.sbs-page .sbs-rv-form .required { color: var(--sbs-off); }
.sbs-page .sbs-rv-form p.stars { margin: -4px 0 0 -10px; }   /* 우커머스 별점 고르기(single-product.js 가 select#rating 앞에 그린다) — 별 하나가 누르는 곳 44 × 44(전에는 19 × 19 · 2026-11-08) · 첫 별은 이름표 왼쪽 끝에 맞춘다 */
.sbs-page .sbs-rv-form p.stars a { top: 0 !important; width: 44px !important; height: 44px !important; font-size: 24px; color: var(--sbs-ink); }   /* !important — Astra 가 `.woocommerce-js #reviews .comment-form-rating .stars a`(아이디 선택자 · 1.2em · top 8px)로 덮는다 */
.sbs-page .sbs-rv-form p.stars a::before { top: 10px; left: 10px; width: 1em !important; height: 1em !important; font-size: 1em !important; }
.sbs-page .sbs-rv-form :is(input[type="text"], input[type="email"], select, textarea),
.sbs-page .sbs-nf-email {
  width: 100%; min-height: 46px; margin: 0; padding: 10px 14px; border: 0; border-radius: var(--sbs-r-pill);
  font: inherit; font-size: 16px; color: var(--sbs-ink); background: #fff; box-shadow: inset 0 0 0 1px var(--sbs-line);
}
.sbs-page .sbs-rv-form select { width: auto; min-width: 160px; }
.sbs-page .sbs-rv-form textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.sbs-page :is(.sbs-rv-form :is(input, select, textarea), .sbs-nf-email):focus-visible { outline: 2px solid var(--sbs-ink); outline-offset: 2px; }
.sbs-page .sbs-rv-form .form-submit { margin-top: 4px; }
/* 알림 받기 폼(Task 8 — 단추 바로 아래에 열린다 · 종이 칸) */
.sbs-page .sbs-nf { flex: 1 0 100%; width: 100%; margin-top: 10px; padding: 16px 16px 18px; text-align: left; white-space: normal; }
.sbs-page .sbs-notify-form { display: grid; gap: 12px; }
.sbs-page .sbs-nf-l > span { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; color: var(--sbs-ink); }
.sbs-page .sbs-nf-c { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.55; color: var(--sbs-ink); cursor: pointer; }
.sbs-page .sbs-nf-c input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--sbs-ink); }
.sbs-page .sbs-nf-msg { font-size: 13.5px; font-weight: 600; color: var(--sbs-off); }
.sbs-page .sbs-nf-send { justify-self: start; }
.sbs-page .sbs-nf-done { font-size: 15px; font-weight: 600; color: var(--sbs-sage); outline: none; }
.sbs-page .sbs-notify:disabled { cursor: default; opacity: .62; }
/* 허니팟 칸(Notify::HP_FIELD — 검토 1 중요-1): 화면 · 낭독 · Tab 에서 숨긴다(aria-hidden · tabindex -1 은 마크업) — 사람은 보지 못해 비워 둔다 */
.sbs-page .sbs-hp { display: none !important; }
.sbs-page .sbs-soon li { flex-wrap: wrap; }
/* 정보 — 옛 조각을 종이 위에(조각 모양은 sb-shop.css) */
.sbs-page .sbs-prose { padding: 28px 32px 32px; font-size: 15.5px; line-height: 1.75; }
.sbs-page .sbs-prose .sbs-frag + .sbs-frag { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--sbs-line-s); }
.sbs-page .sbs-prose p { margin: 0 0 1em; }
.sbs-page .sbs-prose :is(ul, ol) { margin: 0 0 1em; padding-left: 1.4em; }
.sbs-page .sbs-prose .sbs-frag h2 { font-size: 21px; font-weight: 700; letter-spacing: -.012em; }
.sbs-page .sbs-prose .sbs-frag :is(h3, h4) { font-size: 17px; font-weight: 700; letter-spacing: -.006em; }
.sbs-page .sbs-prose a { color: var(--sbs-ink); text-decoration: underline; text-underline-offset: 3px; }
.sbs-page .sbs-prose img { border-radius: var(--sbs-r-pill); }
/* 무게 · 규격 */
.sbs-page .sbs-specs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sbs-page .sbs-spec-dl { padding: 6px 20px; }
.sbs-page .sbs-spec-dl div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--sbs-line-s); font-size: 14.5px; line-height: 1.6; }
.sbs-page .sbs-spec-dl div:last-child { border-bottom: 0; }
.sbs-page .sbs-spec-dl dt { font-weight: 700; }
.sbs-page .sbs-spec-dl dd { margin: 0; color: var(--sbs-soft); }
.sbs-page .sbs-ptable { padding: 14px 18px 10px; }
.sbs-page .sbs-ptable-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.sbs-page .sbs-ptable-h b { font-size: 15px; }
.sbs-page .sbs-ptable-h span { font-size: 12.5px; font-weight: 500; color: var(--sbs-soft); }
.sbs-page .sbs-ptable ol { display: grid; grid-template-columns: minmax(0, 1fr); }
.sbs-page .sbs-ptable li {
  display: grid; grid-template-columns: minmax(56px, auto) minmax(0, 1fr) auto auto; gap: 4px 10px; align-items: baseline; padding: 7px 6px; border-bottom: 1px solid var(--sbs-line-s);
  font-family: var(--sbs-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--sbs-soft);
}
.sbs-page .sbs-ptable li:last-child { border-bottom: 0; }
.sbs-page .sbs-ptable li b { grid-area: 1 / 1; font-weight: 500; color: var(--sbs-ink); }
.sbs-page .sbs-ptable li i { grid-area: 1 / 2; font-family: var(--sbs-font); font-style: normal; font-size: 12px; font-weight: 600; color: var(--sbs-sage); }
.sbs-page .sbs-ptable li s { grid-area: 1 / 3; text-align: right; }
.sbs-page .sbs-ptable li em { grid-area: 1 / 4; font-style: normal; font-weight: 500; color: var(--sbs-ink); text-align: right; }
.sbs-page .sbs-ptable li.is-on { color: var(--sbs-ink); background: linear-gradient(to right, rgba(235, 239, 227, .7), rgba(235, 239, 227, 0)); }
.sbs-page .sbs-ptable li.is-on :is(b, em) { font-weight: 700; }
/* 배우기 */
.sbs-page .sbs-learn { background: rgba(246, 248, 242, .78); }
.sbs-page .sbs-guide { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 20px 22px; }
.sbs-page .sbs-bk { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; color: var(--sbs-sage); background: var(--sbs-wash); }
.sbs-page .sbs-bk .sbs-ic { width: 26px; height: 26px; }
.sbs-page .sbs-guide b { display: block; font-size: 17px; }
.sbs-page .sbs-guide span { font-size: 14px; font-weight: 500; color: var(--sbs-soft); }
.sbs-page .sbs-wks-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 26px 0 12px; }
.sbs-page .sbs-wks-h b { font-size: 17px; }
.sbs-page .sbs-wks-h span { font-size: 13.5px; font-weight: 500; color: var(--sbs-soft); }
.sbs-page .sbs-wks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sbs-page .sbs-wk { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 18px 18px 16px; }
.sbs-page .sbs-wk h3 { font-size: 16.5px; font-weight: 700; line-height: 1.45; letter-spacing: -.006em; }
.sbs-page .sbs-wk-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 6px; }
.sbs-page .sbs-wk .sbs-btn { background: var(--sbs-paper); color: var(--sbs-ink); box-shadow: inset 0 0 0 1px var(--sbs-ink); }
.sbs-page .sbs-online { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 16px; border-radius: var(--sbs-r-pill); font-size: 14px; font-weight: 500; color: var(--sbs-soft); background: var(--sbs-paper); box-shadow: var(--sbs-sh-paper); }
.sbs-page .sbs-online b { color: var(--sbs-ink); }
/* 배송 · 교환 — 카드 넷 */
.sbs-page .sbs-ships { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sbs-page .sbs-ships .sbs-paper { padding: 18px 20px 20px; }
.sbs-page .sbs-ships :is(h3, h4) { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--sbs-ink); }
.sbs-page .sbs-ships h4 { margin-top: 14px; }
.sbs-page .sbs-ships :is(p, li) { font-size: 14px; line-height: 1.7; color: var(--sbs-soft); }
.sbs-page .sbs-ships ol { display: grid; gap: 4px; }
/* 같이 보는 것 — 브랜드 카드(종이) */
.sbs-page .sbs-xsell { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sbs-page .sbs-bcard {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--sbs-paper); color: var(--sbs-ink); box-shadow: var(--sbs-sh-paper);
  transition: transform .1s ease-out;
}
.sbs-page .sbs-bcard-img { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--sbs-stage); }
.sbs-page .sbs-bcard-img img { width: 100%; height: 100%; max-width: none; object-fit: cover; mix-blend-mode: multiply; transition: transform var(--spring-t, .3s) var(--spring, ease-out); }
@media (hover: hover) { .sbs-page .sbs-bcard:hover .sbs-bcard-img img { transform: scale(1.03); } }
.sbs-page .sbs-bcard-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.sbs-page .sbs-bcard :is(h2, h3) { font-size: 16.5px; font-weight: 700; line-height: 1.35; letter-spacing: -.006em; color: var(--sbs-ink); }
.sbs-page .sbs-pick { font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--sbs-soft); letter-spacing: .01em; }
.sbs-page .sbs-from { margin-top: 6px; font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sbs-page .sbs-bcard .sbs-status { margin-top: 6px; }
.sbs-page .sbs-bcard.is-soon .sbs-bcard-img { background: var(--sbs-wash); }

/* ── 가게 입구 /shop/ · 분류 쪽(§6 — 시안 3 #shop: .slab · .group · .bgrid) ── */
.sbs-page .sbs-shop { margin: 16px 0 18px; padding: 48px 52px 56px; }
.sbs-page .sbs-slab-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 28px; }
.sbs-page .sbs-slab-head .sbs-h1 { font-size: 30px; font-weight: 700; line-height: 1.25; letter-spacing: -.012em; color: var(--sbs-ink); }
.sbs-page .sbs-slab-head p { max-width: 34em; font-size: 16px; font-weight: 500; color: var(--sbs-soft); }
.sbs-page .sbs-group { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding: 26px 0; border-top: 1px solid var(--sbs-line); }
.sbs-page .sbs-group.is-one { grid-template-columns: minmax(0, 1fr); }
.sbs-page .sbs-group:last-child { padding-bottom: 0; }
.sbs-page .sbs-group > h2 { padding-top: 6px; font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--sbs-ink); }
.sbs-page .sbs-group > h2 small { display: block; margin-top: 6px; font-size: 13.5px; font-weight: 500; line-height: 1.55; color: var(--sbs-soft); letter-spacing: .01em; }
.sbs-page .sbs-bgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.sbs-page .sbs-empty { padding: 26px 0 0; border-top: 1px solid var(--sbs-line); font-weight: 500; color: var(--sbs-soft); }

/* ── 개별 상품 쪽의 판매 종료 띠(§7-3 — 빵부스러기 아래 · 종이 알약) ── */
.sbs-page .sbs-band {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 10px 0 0; padding: 12px 18px;
  font-size: 15px; font-weight: 600; color: var(--sbs-ink); background: var(--sbs-paper); box-shadow: var(--sbs-sh-paper);
}
.sbs-page .sbs-band a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; color: var(--sbs-sage); }

/* ── 누르는 순간 반응(§9-4 — 놓으면 확정 · iOS 의 :active 는 shop.js 의 touchstart) ── */
.sbs-page :is(.sbs-btn, .sbs-opt, .sbs-wt, .sbs-pair, .sbs-tabs-in > a, .sbs-thumbs button, .sbs-step-q button, .sbs-sum, .sbs-go, .sbs-rv-chip):active { transform: scale(.97); }
.sbs-page .sbs-bcard:active { transform: scale(.985); }

/* ── 구매 막대 · 옵션 판(휴대폰만 — PC 에서는 없다) ── */
.sbs-page .sbs-bbar,
.sbs-page .sbs-sheet,
.sbs-page .sbs-sheet-bg { display: none; }

/* ── 넓은 휴대폰 · 태블릿 ── */
@media (max-width: 1099.98px) {
  .sbs-page .sbs-cfg { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px 20px 26px; }
  .sbs-page .sbs-cfg-stage { position: relative; top: auto; }
}

/* ── 휴대폰(<900px — §7-2) ── */
@media (max-width: 899.98px) {
  .sbs-page .sbs-main { padding: 0 12px 120px; }
  .sbs-page .sbs-crumb { padding: 12px 4px 2px; }
  .sbs-page .sbs-crumb li { font-size: 12.5px; }
  .sbs-page .sbs-cfg { margin: 12px 0 14px; padding: 18px 16px 22px; }
  .sbs-page .sbs-cfg-steps h1 { font-size: 26px; }
  .sbs-page .sbs-thumbs { display: none; }
  .sbs-page .sbs-opts.is-many { grid-template-columns: minmax(0, 1fr); }
  .sbs-page .sbs-wgrid { gap: 6px; }
  .sbs-page .sbs-wt { min-height: 66px; padding: 10px 8px 8px; overflow: hidden; }
  .sbs-page .sbs-wt b { font-size: 16px; padding-right: 10px; }
  .sbs-page .sbs-wt b.is-text { font-size: 14.5px; }
  .sbs-page .sbs-wt .sbs-pr { font-size: 12px; letter-spacing: -.01em; }   /* 12px 아래 글 없음(Task 10 — 그전 9.5~11) */
  .sbs-page .sbs-wt .sbs-st { font-size: 12px; letter-spacing: 0; }
  .sbs-page .sbs-wt .sbs-sw { right: 8px; top: 8px; width: 10px; height: 10px; }
  .sbs-page .sbs-summary { padding: 16px 16px; }
  /* 요약의 수량 · 단추는 구매 막대 → 옵션 판으로 — 구성기 JS 가 켜졌을 때만 숨긴다(JS 없이는 여기서 산다) */
  .sbs-page.sbs-js .sbs-summary :is(.sbs-buy, .sbs-npay, .sbs-notify-main, .sbs-shipl) { display: none; }
  .sbs-page .sbs-tabs { top: calc(var(--sbs-hd) + 4px); margin: 0 -12px 14px; }
  .sbs-page .sbs-tabs-in { padding: 4px 10px; border-radius: 0; }
  .sbs-page .sbs-tabs-in > a { padding: 0 12px; font-size: 14px; }
  .sbs-page .sbs-mini { display: none; }
  .sbs-page .sbs-sec { padding: 26px 16px 28px; }
  .sbs-page .sbs-sec > h2 { font-size: 21px; }
  .sbs-page .sbs-prose { padding: 20px 18px 22px; font-size: 15px; }
  .sbs-page :is(.sbs-specs, .sbs-wks, .sbs-ships) { grid-template-columns: minmax(0, 1fr); }
  .sbs-page .sbs-rv-top, .sbs-page .sbs-rv-form .comment-form { grid-template-columns: minmax(0, 1fr); }
  .sbs-page .sbs-rv, .sbs-page .sbs-rv-form { padding: 16px 16px 18px; }
  .sbs-page .sbs-spec-dl div { grid-template-columns: 84px 1fr; }
  .sbs-page .sbs-guide { grid-template-columns: auto 1fr; }
  .sbs-page .sbs-guide > .sbs-btn { grid-column: 1 / -1; }
  .sbs-page .sbs-xsell { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sbs-page .sbs-xsell .sbs-bcard:nth-child(3) { display: none; }
  .sbs-page .sbs-bcard-body { padding: 11px 12px 13px; }
  .sbs-page .sbs-bcard :is(h2, h3) { font-size: 14.5px; }
  .sbs-page .sbs-shop { margin: 12px 0 14px; padding: 26px 18px 28px; }
  .sbs-page .sbs-slab-head .sbs-h1 { font-size: 24px; }
  .sbs-page .sbs-group { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .sbs-page .sbs-bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sbs-page .sbs-bgrid .sbs-pick { font-size: 12px; }
  .sbs-page .sbs-ph span { font-size: 15px; }

  /* 구매 막대는 구성기 JS 가 뜬 때만(Ruling 19 — JS 없이는 요약의 폼이 그대로 사는 길 · 판을 열 손이 없다) */
  .sbs-page:not(.sbs-js) .sbs-bbar { display: none; }
  /* 구매 막대 — 유리 rgba(246,246,242,.74) + 흐림 22 · 고른 사양 + 가격(판 열기) · 구매하기 */
  .sbs-page .sbs-bbar {
    position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 1020;
    display: flex; align-items: center; gap: 8px; height: 66px; padding: 8px;
    background: rgba(246, 246, 242, .74); -webkit-backdrop-filter: blur(22px) saturate(1.25); backdrop-filter: blur(22px) saturate(1.25);
    box-shadow: 0 12px 32px -14px rgba(10, 30, 42, .55), inset 0 0 0 1px rgba(255, 255, 255, .6);
  }
  .sbs-page .sbs-sum { display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0; height: 50px; padding: 0 12px; text-align: left; background: rgba(255, 255, 255, .72); transition: transform .1s ease-out; }
  .sbs-page .sbs-sum small { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12px; font-weight: 500; color: var(--sbs-soft); letter-spacing: .01em; }
  .sbs-page .sbs-sum small span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sbs-page .sbs-sum .sbs-ic { width: 12px; height: 12px; stroke-width: 2; }
  .sbs-page .sbs-sum b { font-size: 16px; line-height: 1.3; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sbs-page .sbs-go { min-height: 50px; padding: 0 20px; }

  /* 옵션 판 — 종이(불투명 · 뒤 글자가 비치지 않게) · 아래에서 오른다 · 손이 민 것이라 살짝 튐(--bounce) */
  .sbs-page .sbs-sheet-bg { display: block; position: fixed; inset: 0; z-index: 1040; background: rgba(16, 22, 18, .42); opacity: 0; pointer-events: none; transition: opacity .25s ease-out; }
  .sbs-page .sbs-sheet {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1041; max-height: 88vh; overflow: auto; overscroll-behavior: contain;
    padding: 8px 18px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0; background: var(--sbs-paper); color: var(--sbs-ink); box-shadow: 0 -10px 40px -16px rgba(0, 0, 0, .35);
    touch-action: pan-y; will-change: transform;
    transition: transform var(--bounce-t, .3s) var(--bounce, ease-out), visibility 0s linear 0s;
  }
  .sbs-page:not(.sbs-sheet-open) .sbs-sheet { transform: translateY(100%); visibility: hidden; transition: transform var(--bounce-t, .3s) var(--bounce, ease-out), visibility 0s linear var(--bounce-t, .3s); }
  .sbs-page.sbs-sheet-open .sbs-sheet-bg { opacity: 1; pointer-events: auto; }
  .sbs-page .sbs-sheet.is-drag { transition: none; }
  .sbs-page .sbs-grab { width: 44px; height: 5px; margin: 2px auto 10px; border-radius: 3px; background: #D6D9CF; touch-action: none; cursor: grab; }
  .sbs-page .sbs-sheet-h { display: flex; align-items: center; justify-content: space-between; touch-action: none; cursor: grab; }
  .sbs-page .sbs-sheet-h b { font-size: 17px; }
  .sbs-page .sbs-sheet-h button { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; color: var(--sbs-soft); }
  .sbs-page .sbs-sheet .sbs-step { margin-top: 16px; }
  .sbs-page .sbs-sheet .sbs-step-h { margin-bottom: 8px; }
  .sbs-page .sbs-sheet .sbs-step-h h3 { font-size: 17px; }
  .sbs-page .sbs-sheet-sum { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sbs-line-s); }
  .sbs-page .sbs-sheet-sum b { font-size: 15.5px; font-weight: 700; line-height: 1.35; }
  .sbs-page .sbs-sheet-sum span { font-size: 13px; font-weight: 600; color: var(--sbs-sage); }
  .sbs-page .sbs-sheet .sbs-qrow { margin-top: 10px; }
  /* 뒤 화면이 살짝 밀려 들어간다(.985 — iOS 모달) */
  .sbs-page .sbs-main { transform-origin: 50% 0; transition: transform var(--spring-t, .3s) var(--spring, ease-out); }
  .sbs-page.sbs-sheet-open .sbs-main { transform: scale(.985) translateY(6px); }
}

/* ── 움직임 · 투명도 · 대비 줄이기(§9-4 · 시안 apple.css) ── */
@media (prefers-reduced-motion: reduce) {
  .sbs-page .sbs-sheet { transition: opacity .2s ease, visibility 0s linear 0s; transform: none !important; }
  .sbs-page:not(.sbs-sheet-open) .sbs-sheet { opacity: 0; transition: opacity .2s ease, visibility 0s linear .2s; }
  .sbs-page .sbs-main, .sbs-page.sbs-sheet-open .sbs-main { transition: none; transform: none; }
  .sbs-page .sbs-stage img { transition: opacity .2s ease; filter: none !important; transform: none !important; }
  .sbs-page .sbs-stage-chips span { transition: opacity .2s ease; transform: none; filter: none; }
  .sbs-page :is(.sbs-btn, .sbs-opt, .sbs-wt, .sbs-pair, .sbs-bcard, .sbs-bcard-img img, .sbs-tabs-in > a, .sbs-step-q button, .sbs-sum, .sbs-rv-chip) { transition: none; }
  .sbs-page :is(.sbs-btn, .sbs-opt, .sbs-wt, .sbs-pair, .sbs-tabs-in > a, .sbs-thumbs button, .sbs-step-q button, .sbs-sum, .sbs-go, .sbs-bcard, .sbs-rv-chip):active { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .sbs-page :is(.sbs-slab, .sbs-sec, .sbs-tabs-in, .sbs-bbar, .sbs-stage-chips span) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--sbs-paper); }
}
@media (prefers-contrast: more) {   /* 종이 + 잉크 1.5px 테(§9-4) — .sbs-page 를 두 번 써서 상태별 칸(입고 예정 · 마우스 올림 0,3,0)보다 이긴다(Task 10) */
  .sbs-page.sbs-page :is(.sbs-slab, .sbs-sec, .sbs-tabs-in, .sbs-bbar, .sbs-stage-chips span) { background: var(--sbs-paper); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 1.5px var(--sbs-ink) inset; }
  .sbs-page.sbs-page :is(.sbs-opt, .sbs-wt, .sbs-bcard, .sbs-summary, .sbs-paper, .sbs-sheet) { box-shadow: inset 0 0 0 1.5px var(--sbs-ink); }
  .sbs-page.sbs-page :is(.sbs-opt, .sbs-wt).is-on { box-shadow: inset 0 0 0 3px var(--sbs-ink); }
}