/* 42판 (2026-11-11) — 계약 후 요청 반영: 01 선물 섹션 · 회전 5칸 · 소식 페이지 · 각인 시뮬레이션 · 상품 상세
   값은 site.css 토큰(--sp-* · --fs-* · --ink 계열)만 쓴다. 섹션별 규칙은 home.css 의 #brand·#custom 처럼 id 로 건다 */

/* ── 공통: 케이스 뒷면 각인 그림 (js/engrave.js) ── */
.bn-back { display: block; width: 100%; height: auto; }
.bn-back .ring { font: 600 28px "Helvetica Neue", Arial, sans-serif; fill: #6f7378; letter-spacing: 0.02em; }
.bn-back .ln { stroke: #8a8e93; stroke-width: 2; }
.bn-back .emb { stroke: #6f7378; }
.bn-back .l1, .bn-back .l2 { font-family: var(--f-ko); font-weight: 600; text-anchor: middle; fill: #5d6166; paint-order: stroke; stroke: rgba(255, 255, 255, 0.75); stroke-width: 1px; }
.bn-back .c { opacity: 0; animation: bk-in .5s var(--ease) forwards; }
@keyframes bk-in { from { opacity: 0; fill: #ffffff; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bn-back .c { opacity: 1; animation: none; } }

/* ── 공통: 사진이 막힌 미리보기 환경의 「사진 자리」 판 (js/preview-local.js) ── */
.plate { display: grid; place-items: center; background: var(--bg-2); color: var(--muted); font-size: var(--fs-12); text-align: center; }
.plate.fill { position: absolute; inset: 0; }
img.plate, span.plate:not(.ph):not(.fill) { width: 100%; aspect-ratio: 1 / 1; }

/* ══ 메인 01 GIFT ══ */
.rp#gift { --w: min(46svh, var(--aw, 40vw)); }
.rp .shot.gf { -webkit-mask-image: none; mask-image: none; display: grid; gap: var(--sp-16); }
.gf-card { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; aspect-ratio: 1 / 1; perspective: calc(1200 * var(--u)); }
.gf-card:focus-visible { outline: 2px solid var(--fg); outline-offset: var(--sp-4); }
.gf-flip { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1.1s var(--ease); }
.gf-flip.b { transform: rotateY(180deg); }
.gf-f { position: absolute; inset: 0; display: grid; place-items: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.gf-front img { width: 100%; height: 100%; object-fit: contain; }
.gf-back { transform: rotateY(180deg); padding: 9%; }
.gf-back .bn-back { filter: drop-shadow(0 calc(16 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.2)); }
.gf-rev { border-top: 1px solid var(--line-2); padding-top: var(--sp-12); min-height: calc(92 * var(--u)); }
.gf-rev > * { transition: opacity .35s var(--ease); }
.gf-rev.sw > * { opacity: 0; }
.gf-rev .q { margin: 0; font-size: max(14px, var(--fs-16)); line-height: 1.5; color: var(--fg); word-break: keep-all; }
.gf-rev .who { margin: var(--sp-8) 0 0; display: flex; align-items: center; gap: var(--sp-12); font-size: max(12px, var(--fs-14)); color: var(--muted); }
.gf-rev .stars { letter-spacing: 0.1em; color: var(--fg); font-size: max(12px, var(--fs-12)); }
.gf-rev .mdl { margin-left: auto; font-family: var(--f-disp); font-size: max(12px, var(--fs-12)); color: var(--fg-2); text-decoration: underline; text-underline-offset: var(--sp-4); }
.gf-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-8); }
.gf-tabs button { height: calc(40 * var(--u)); min-height: 40px; padding: 0 var(--sp-4); border: 1px solid var(--line-2); background: none; color: var(--fg-2); font-size: max(12px, var(--fs-14)); cursor: pointer; white-space: nowrap; transition: background-color .3s, color .3s, border-color .3s; }
.gf-tabs button:hover { border-color: var(--fg); color: var(--fg); }
.gf-tabs button[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg-3); }
.gf-tabs button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
@media (min-width: 1024px) {
  /* 사진 묶음(시계+후기+장면)이 화면 높이를 넘지 않게: 시계 46svh + 후기·장면 약 170 */
  html .rp#gift .shot.gf { --w: min(46svh, calc(var(--aw, 40vw) - 16 * var(--u))); }
}
@media (prefers-reduced-motion: reduce) { .gf-flip { transition: none; } }

/* 01 모바일(html.flat): 첫 화면은 글이 먼저, 그 아래 시계 */
html.flat .rp#gift .spin { padding-top: calc(var(--head) + var(--sp-32)); }
html.flat .rp#gift .shot.gf { order: 1; max-width: 420px; }
html.flat .rp#gift .gf-card { width: min(100%, 320px); justify-self: center; }
html.flat .rp#gift .gf-rev { min-height: 112px; }
html.flat .gf-tabs button { font-size: var(--fs-12); padding: 0 2px; }
/* 02 브랜드(예전 01): 모바일에서 한 화면을 다 쓰던 것을 내용 높이 + 넉넉한 여백으로 — 첫 화면이 아니게 됐다 */
html.flat .rp#brand { min-height: 72svh; }
html.flat .rp#brand .spin { padding-top: var(--sp-64); }

/* ══ 소식 페이지 (sns.html) ══ */
.sns-follow { display: flex; gap: var(--sp-20); flex: none; font-size: var(--fs-14); }
.sns-follow a { text-decoration: underline; text-underline-offset: var(--sp-4); white-space: nowrap; }
.sns-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-48) var(--sp-20); padding: var(--sp-40) 0 var(--sp-64); }
.sns-card { display: grid; gap: var(--sp-16); align-content: start; color: inherit; }
.sns-card .im { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--bg-2); }
.sns-card .im img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.sns-card:hover .im img { transform: scale(1.04); }
.sns-card .kind { position: absolute; left: var(--sp-12); top: var(--sp-12); padding: var(--sp-4) var(--sp-8); background: var(--ink); color: var(--on-ink); font-size: var(--fs-12); line-height: 1.4; }
.sns-card .tx { display: grid; gap: var(--sp-8); }
.sns-card .dt { font-family: var(--f-disp); font-size: var(--fs-12); color: var(--muted); }
.sns-card .tt { font-size: var(--fs-18); font-weight: 600; line-height: 1.4; letter-spacing: -0.015em; word-break: keep-all; }
.sns-card .ds { font-size: var(--fs-14); line-height: 1.6; color: var(--fg-2); word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sns-card .go { font-size: var(--fs-14); color: var(--fg); text-decoration: underline; text-underline-offset: var(--sp-4); }
.sns-card .go .arr { display: inline-block; transition: transform .3s var(--ease); }
.sns-card:hover .go .arr { transform: translate(2px, -2px); }
.sns-card:focus-visible { outline: 2px solid var(--fg); outline-offset: var(--sp-4); }
/* 맨 앞 글(가장 최근)은 두 칸을 써서 크게: 왼쪽 사진, 오른쪽 글 */
@media (min-width: 1024px) {
  .sns-card.lead { grid-column: span 2; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-20); }
  .sns-card.lead .tx { align-content: end; padding-bottom: var(--sp-4); }
  .sns-card.lead .tt { font-size: var(--fs-28); line-height: 1.3; }
  .sns-card.lead .ds { font-size: var(--fs-16); -webkit-line-clamp: 3; }
}
@media (min-width: 768px) and (max-width: 1023px) { .sns-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-40) var(--sp-16); } }
@media (max-width: 767px) {
  .sns-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-32) var(--sp-12); }
  .sns-card.lead { grid-column: 1 / -1; }
  .sns-card.lead .im { aspect-ratio: 4 / 3; }
  .sns-card .tt { font-size: var(--fs-16); }
  .sns-card.lead .tt { font-size: var(--fs-20); }
  .sns-card .ds { display: none; }
  .sns-card.lead .ds { display: -webkit-box; }
  .sns-follow { display: none; }
}

/* ══ 맞춤제작: 각인 시뮬레이션 (custom.html) ══ */
.c-copy .c-mode { margin-bottom: var(--sp-32); }
.c-mode button { min-width: calc(112 * var(--u)); }
.c-view[hidden] { display: none; }
.c-acts { display: flex; gap: var(--sp-12); flex-wrap: wrap; }
.c-facts { list-style: none; margin: var(--sp-32) 0 0; padding: var(--sp-20) 0 0; border-top: 1px solid var(--line-2); display: grid; gap: var(--sp-8); font-size: var(--fs-14); color: var(--fg-2); max-width: 28em; }
.c-facts li { padding-left: var(--sp-16); position: relative; word-break: keep-all; }
.c-facts li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: var(--sp-8); height: 1px; background: var(--fg-2); }
.c-facts a { text-decoration: underline; text-underline-offset: var(--sp-4); }
.sim { background: var(--bg-2); padding: var(--sp-24); display: grid; gap: var(--sp-20); align-content: start; }
.sim-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }
.sim-pick button { display: grid; grid-template-columns: calc(56 * var(--u)) 1fr; grid-template-rows: auto auto; align-items: center; column-gap: var(--sp-12); padding: var(--sp-8); border: 1px solid var(--line); background: var(--bg-3); cursor: pointer; text-align: left; transition: border-color .3s; }
.sim-pick button:hover { border-color: var(--line-2); }
.sim-pick button[aria-pressed="true"] { border-color: var(--fg); }
.sim-pick button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.sim-pick .th { position: relative; grid-row: 1 / span 2; aspect-ratio: 1 / 1; }
.sim-pick .th .ph { inset: 0; width: 100%; height: 100%; }
.sim-pick .md { font-family: var(--f-disp); font-size: var(--fs-12); align-self: end; overflow-wrap: anywhere; }
.sim-pick .pr { font-size: var(--fs-12); color: var(--muted); align-self: start; }
.sim-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-16); align-items: center; }
.sim-view figure { margin: 0; display: grid; gap: var(--sp-8); }
.sim-view .fr { position: relative; display: block; aspect-ratio: 1 / 1; }
.sim-front .fr .ph { inset: 2%; width: 96%; height: 96%; }
.sim-back .fr { padding: 9%; }
.sim-back .bn-back { filter: drop-shadow(0 calc(16 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.18)); }
.sim-view figcaption { text-align: center; font-size: var(--fs-12); color: var(--muted); }
.sim-ctl { display: grid; gap: var(--sp-12); }
.sim-ctl .ins { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); }
.sim-ctl label { display: flex; justify-content: space-between; font-size: var(--fs-14); color: var(--muted); margin-bottom: var(--sp-8); }
.sim-ctl label .n { font-family: var(--f-disp); font-size: var(--fs-12); }
.sim-ctl input { width: 100%; height: calc(48 * var(--u)); min-height: 44px; border: 1px solid var(--line-2); background: var(--bg-3); padding: 0 var(--sp-16); font-size: var(--fs-16); }
.sim-ctl input:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.sim-pre { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }
.sim-pre .lb { font-size: var(--fs-12); color: var(--muted); margin-right: var(--sp-4); }
.sim-pre > span:last-child { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.sim-pre button { height: calc(32 * var(--u)); min-height: 32px; padding: 0 var(--sp-12); border: 1px solid var(--line-2); background: none; font-size: var(--fs-12); cursor: pointer; transition: background-color .2s, color .2s; }
.sim-pre button:hover { background: var(--fg); color: var(--bg-3); border-color: var(--fg); }
.sim-pre button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.sim-note { margin: 0; display: flex; justify-content: space-between; gap: var(--sp-16); font-size: var(--fs-14); color: var(--fg-2); border-top: 1px solid var(--line); padding-top: var(--sp-12); }
.sim-note a { text-decoration: underline; text-underline-offset: var(--sp-4); white-space: nowrap; }
@media (max-width: 1023px) {
  .sim { padding: var(--sp-16); }
  .sim-pick button { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: var(--sp-4); }
  .sim-pick .th { grid-row: auto; width: 56px; }
  .sim-pick .md, .sim-pick .pr { align-self: auto; }
  /* 폰: 뒷면 글자가 읽히게 뒷면을 더 크게 */
  .sim-view { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-8); }
  .sim-ctl .ins { grid-template-columns: 1fr; }
  .sim-pre button { min-height: 40px; }
  .c-acts .btn { flex: 1 1 auto; }
}
/* 시뮬레이션 아래 실행 버튼 — 폰에서는 글 묶음의 버튼 대신 이쪽을 쓴다(문구를 적어 본 다음에 누르게) */
.sim-acts { display: none; gap: var(--sp-8); flex-wrap: wrap; }
.sim-acts .btn { flex: 1 1 auto; height: calc(52 * var(--u)); padding: 0 var(--sp-16); font-size: var(--fs-14); }
body[data-mode="gift"] .sim-acts [data-for="org"], body[data-mode="org"] .sim-acts [data-for="gift"] { display: none; }
@media (max-width: 1023px) {
  .sim-acts { display: flex; }
  .c-view .c-acts { display: none; }
  .c-facts { margin-top: var(--sp-24); }
  .sim-view { align-items: end; }
  .sim-pick .md, .sim-pick .pr { display: none; }
  .sim-pick button { padding: var(--sp-8); }
  .sim-pick .th { width: 64px; }
}

/* ══ 상품 상세 (product.html) ══ */
.buy.one, .buy2.one, .mbar.one { grid-template-columns: 1fr; }
.rows .tl { margin-left: var(--sp-8); text-decoration: underline; text-underline-offset: var(--sp-4); }
.info .buy { margin-top: var(--sp-32); }
.pdx .sec-head { margin-bottom: var(--sp-32); }
/* ① 뒷면 각인 띠 — 검은 바탕에 뒷면 그림과 한마디 */
.pdx-eng { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-48); align-items: center; background: var(--ink); color: var(--on-ink); padding: var(--sp-48) var(--sp-64); margin-bottom: var(--sp-48); }
.pdx-eng .bk { width: min(100%, calc(360 * var(--u))); justify-self: center; }
.pdx-eng h3 { font-size: var(--fs-32); font-weight: 400; letter-spacing: -0.02em; line-height: 1.3; word-break: keep-all; }
.pdx-eng p { color: var(--on-ink-2); margin: var(--sp-16) 0 var(--sp-32); max-width: 28em; word-break: keep-all; }
.pdx-eng .btn { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.pdx-eng .btn:hover { background: transparent; color: var(--on-ink); }
.pdx-eng :focus-visible { outline-color: var(--on-ink); }
/* ② 상세 이미지 — 길어서 접어 두고 펼쳐 본다 */
.pdx-long { display: grid; justify-items: center; gap: var(--sp-24); }
.pdx-long .clip { position: relative; width: min(100%, calc(860 * var(--u))); max-height: calc(880 * var(--u)); overflow: hidden; background: var(--bg-3); }
.pdx-long .clip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(160 * var(--u)); background: linear-gradient(180deg, rgba(235, 235, 235, 0), var(--bg)); pointer-events: none; }
.pdx-long.open .clip { max-height: none; }
.pdx-long.open .clip::after { display: none; }
.pdx-long .clip img { display: block; width: 100%; height: auto; }
.pdx-long .plate.tall { width: 100%; aspect-ratio: auto; min-height: calc(880 * var(--u)); line-height: 1.6; font-size: var(--fs-14); }
.pdx-long .btn { min-width: calc(240 * var(--u)); }
@media (max-width: 1023px) {
  .pdx-eng { grid-template-columns: 1fr; gap: var(--sp-24); padding: var(--sp-32) var(--sp-20); margin-inline: calc(var(--gut) * -1); text-align: center; }
  .pdx-eng .bk { width: min(72%, 280px); }
  .pdx-eng h3 { font-size: var(--fs-24); }
  .pdx-eng p { margin-inline: auto; }
  .pdx-eng .btn { width: 100%; }
  .pdx-long .clip, .pdx-long .plate.tall { max-height: 560px; min-height: 0; }
  .pdx-long .plate.tall { height: 560px; }
  .pdx-long .btn { width: 100%; }
  .mbar .btn { font-size: var(--fs-14); white-space: nowrap; }
}

/* ══ 42c 손질 (2026-11-11 PSPD 폰 실측 + 전체 점검) ══ */
/* 목록·소식 쪽의 붙는 탭 줄(.bar): 폰에서 스크롤할 때 떨린다(PSPD 실측, 아이폰). 크롬에서는 재현되지 않음(붙은 동안 위치 56px 고정, 138프레임 실측) →
   아이폰에서 붙는 요소 + 뒤 흐림(backdrop-filter)이 바로 위 고정 머리의 흐림과 겹칠 때 생기는 다시 그리기로 보고, 폰·태블릿에서는 흐림을 빼고 불투명 바탕으로 */
@media (max-width: 1023px) {
  .bar { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }
}
/* 폰에서 누르는 칸 40 이상(실측: 01 후기의 모델 링크 19, 시뮬레이션 「자세히 보기」 22, 상품 「미리 보기」 16) */
@media (max-width: 1023px) {
  .gf-rev .mdl, .sim-note a, .rows .tl, .c-facts a { display: inline-flex; align-items: center; min-height: 40px; }
  .gf-rev .who { margin-top: 0; }
}

/* ══ 42d: 점검에서 나온 것 반영 (2026-11-11) ══ */
/* 머리 오른쪽: 쓰지 않는 검색·로그인·장바구니 대신 「견적 문의」 — 어느 화면에서든 한 번에 */
.util .hq { display: inline-flex; align-items: center; justify-content: center; height: calc(36 * var(--u)); min-height: 36px; padding: 0 var(--sp-16); border: 1px solid currentColor; font-size: max(12px, var(--fs-14)); white-space: nowrap; transition: background-color .3s, color .3s; }
.util .hq:hover { background: var(--fg); color: var(--bg-3); border-color: var(--fg); }
.head.on-ink .util .hq:hover, html.hero-on .util .hq:hover { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.util .hq:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (max-width: 1023px) { .util .hq { min-height: 40px; padding: 0 var(--sp-12); } .head .logo { min-height: 40px; } }

/* 01: 주인공은 문구 — 뒷면을 확대해 안쪽 원이 크게 보이게(전체를 보여 주느라 글자가 작았다) */
.gf-back { padding: 5%; }
.gf-back .bn-back { transform: scale(1.24); }
.gf-back::before { content: ""; position: absolute; inset: 5%; border-radius: 50%; box-shadow: inset 0 0 0 calc(3 * var(--u)) rgba(141, 145, 150, .9), inset 0 0 0 calc(5 * var(--u)) rgba(243, 244, 245, .9); z-index: 1; pointer-events: none; }
.gf-back { -webkit-clip-path: circle(45% at 50% 50%); clip-path: circle(45% at 50% 50%); }
/* 01 장면 탭: 목록·소식의 밑줄 탭과 같은 모양으로 (탭 모양이 세 가지이던 것) */
.gf-tabs { gap: 0; border-bottom: 1px solid var(--line); }
.gf-tabs button { position: relative; border: 0; color: var(--muted); }
.gf-tabs button:hover { color: var(--fg); }
.gf-tabs button[aria-pressed="true"] { background: none; color: var(--fg); font-weight: 600; }
.gf-tabs button[aria-pressed="true"]::after { content: ""; position: absolute; left: var(--sp-12); right: var(--sp-12); bottom: -1px; height: 2px; background: var(--fg); }
.rp#gift .note { margin-top: var(--sp-20); }
.rp#gift .note + .acts { margin-top: var(--sp-20); }
/* 폰: 푸터 링크·로고 누르는 칸 40 이상(실측 22·29) */
@media (max-width: 1023px) { .foot .links a { display: inline-flex; align-items: center; min-height: 40px; } .foot .links { gap: 0; } }
/* 43판: 맞춤제작 납품 사례 — 소식 카드(.sns-card)를 그대로 쓴다 */
.works .works-lead { max-width: 28em; margin: 0; color: var(--fg-2); font-size: max(14px, var(--fs-16)); line-height: 1.6; word-break: keep-all; }
.works .sns-card .tt { font-size: max(16px, var(--fs-18)); }
@media (max-width: 767px) { .works .sec-head { flex-direction: column; align-items: start; } }

/* ── 43d(PSPD 11-11): 소식 머리 오른쪽 「바로가기」 — 밑줄 두 개가 띠 끝에 붙어 지저분 → 작은 테두리 버튼 두 개, 띠 안쪽 여백 */
.sns-follow { gap: var(--sp-8); padding-right: var(--sp-12); align-items: center; }
.sns-follow a { display: inline-flex; align-items: center; gap: var(--sp-4); height: calc(32 * var(--u)); min-height: 32px; padding: 0 var(--sp-12); border: 1px solid var(--line-2); text-decoration: none; font-size: var(--fs-12); color: var(--fg-2); transition: background-color .2s, color .2s, border-color .2s; }
.sns-follow a::after { content: "↗"; font-size: var(--fs-12); }
.sns-follow a:hover { background: var(--fg); color: var(--bg-3); border-color: var(--fg); }

/* ── 43d(PSPD 11-11): 맞춤제작 첫 화면 정리 — 실사 앞·뒷면을 같은 크기 정사각형 두 칸으로, 모델 고르기는 한 줄, 값은 아래 한 줄에만 */
.c-hero { padding-top: calc(var(--head) + var(--sp-40)); padding-bottom: var(--sp-64); }
.sim { background: var(--bg-3); border: 1px solid var(--line); padding: var(--sp-24); gap: var(--sp-20); }
.sim-pick { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sim-pick button { grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: center; row-gap: var(--sp-4); padding: var(--sp-8) var(--sp-4); border-color: var(--line); }
.sim-pick .th { grid-row: auto; width: min(100%, calc(56 * var(--u))); }
.sim-pick .md { align-self: auto; font-size: var(--fs-12); }
.sim-view { gap: var(--sp-12); align-items: start; }
.sim-view .fr { overflow: hidden; background: #fff; border: 1px solid var(--line); }
.sim-view .fr > img, .pb > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sim-back .fr { padding: 0; }
.sim-back .bn-back:not(.pbs) { width: 82%; margin: 9%; }
.pb { position: relative; display: block; width: 100%; height: 100%; }
.pb .pbs { position: absolute; inset: 0; width: 100%; height: 100%; filter: none; }
.sim-back .pb .bn-back { filter: none; }
/* 새긴 글자 — 사진의 「BRANNEW Since 1988」 인쇄와 같은 회색, 아래쪽에 얇은 밝은 테로 파인 느낌 */
.pbs .l1, .pbs .l2 { fill: #8b8f94; stroke: none; paint-order: normal; font-weight: 600; letter-spacing: 0.01em; filter: drop-shadow(0 0.7px 0 rgba(255, 255, 255, 0.9)); }
.c-hero .sim-note { padding-top: var(--sp-16); max-width: none; margin: 0; }
.sim { align-self: center; }
.c-facts { border-top: 0; padding-top: 0; margin-top: var(--sp-32); }
.pdx-eng .bk .pb { border-radius: 50%; overflow: hidden; }
.pdx-eng .bk:has(.pb) { width: min(100%, calc(400 * var(--u))); }
.pdx-eng .bk .pb { border-radius: 0; background: #fff; }
@media (max-width: 1023px) {
  .c-hero { padding-bottom: var(--sp-40); }
  .sim { padding: var(--sp-16); }
  .sim-view { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); }
  .sim-pick { gap: var(--sp-4); }
  .sim-pick button { padding: var(--sp-4); }
  /* 폰: 칸이 좁아 모델명이 두 줄로 쪼개짐 → 이름은 화면 읽기 프로그램에만, 고른 모델명은 아래 줄에 나온다 */
  .sim-pick .md { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sim-pick button { position: relative; }
}

/* ===== 44판: 각인 미리 보기 — 전 제품 넘겨 보기(탭 + 좌우 버튼 + 썸네일 줄) ===== */
.sim-pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-12); }
.sp-tabs { display: flex; gap: var(--sp-16); border-bottom: 1px solid var(--line); }
.sp-tabs button { position: relative; height: calc(40 * var(--u)); min-height: 40px; padding: 0; border: 0; background: none; font-size: var(--fs-14); color: var(--muted); cursor: pointer; }
.sp-tabs button span { font-family: var(--f-disp); font-size: var(--fs-12); margin-left: var(--sp-4); }
.sp-tabs button[aria-selected="true"] { color: var(--fg); }
.sp-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--fg); }
.sp-tabs button:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.sp-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-8); }
.sp-arr { width: calc(44 * var(--u)); min-width: 40px; aspect-ratio: 1 / 1; display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--bg-3); color: var(--fg); cursor: pointer; transition: background-color .2s, color .2s; }
.sp-arr svg { width: 45%; height: 45%; }
.sp-arr:hover { background: var(--fg); color: var(--bg-3); border-color: var(--fg); }
.sp-arr:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.sp-rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * var(--sp-8)) / 5); gap: var(--sp-8); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.sp-rail::-webkit-scrollbar { display: none; }
.sp-rail button { position: relative; scroll-snap-align: center; padding: var(--sp-4); border: 1px solid var(--line); background: #fff; cursor: pointer; }
.sp-rail button[aria-pressed="true"] { border-color: var(--fg); }
.sp-rail button:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; }
.sp-rail .th { position: relative; display: block; aspect-ratio: 1 / 1; }
.sp-rail .th .ph { inset: 0; width: 100%; height: 100%; }
.sp-now { margin: 0; display: flex; justify-content: space-between; align-items: baseline; font-family: var(--f-disp); font-size: var(--fs-12); }
.sp-now .ix { color: var(--muted); }
.dsk .l1, .dsk .l2 { dominant-baseline: central; text-anchor: middle; stroke: none; filter: drop-shadow(0 0.8px 0 rgba(255, 255, 255, 0.35)); }
@media (max-width: 767px) {
  .sp-rail { grid-auto-columns: calc((100% - 3 * var(--sp-8)) / 4); }
}
.sp-tabs button { display: inline-flex; align-items: center; white-space: nowrap; width: auto; }
.sim-pick .sp-now .md { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: inline; }
.c-hero .sim .sp-now, .sim .sp-now { margin: 0; max-width: none; }