/* 메인 (21판) — 섹션 4개가 오른쪽 가운데를 축으로 돌고, 그 뒤는 푸터뿐
   네 섹션 모두 같은 틀: 왼쪽 글 칸 / 오른쪽 사진 칸. 섹션마다 바뀌는 건 문장과 사진뿐
   글자 5단계: 제목 64 · 숫자/모델 32 · 설명 18 · 본문 16 · 꼬리표 12 (태블릿 제목 48, 폰 제목 32·숫자 24·설명 16) */
:root { --t-title: var(--fs-64); --t-num: var(--fs-32); --t-lead: var(--fs-18); }
@media (max-width: 1023px) { :root { --t-title: var(--fs-48); } }
@media (max-width: 1023px) { :root { --t-title: var(--fs-32); --t-num: var(--fs-24); --t-lead: var(--fs-16); } }
@media (max-width: 380px) { :root { --t-title: var(--fs-28); } }

.rotor { position: relative; }   /* z-index 를 주면 쌓임 맥락이 생겨 무대의 multiply 가 배경까지 안 닿는다 */
/* 섹션 멈춤: 터치 기기만 CSS scroll-snap — 마우스 휠은 rotary.js 가 한 번에 한 섹션씩 */
@media (pointer: coarse) { html { scroll-snap-type: y mandatory; } }
.snaps { position: absolute; inset: 0; pointer-events: none; }
.snaps i { display: block; height: 100svh; scroll-snap-align: start; scroll-snap-stop: always; }
.foot { scroll-snap-align: end; position: relative; z-index: 2; }
/* 무대째 multiply — 상품 사진의 흰 바탕이 메탈 배경에 녹는다 */
.rot-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; mix-blend-mode: multiply; }
html:not(.rot-ready) .rp:not(:first-child) { visibility: hidden; }

/* ── 섹션 틀 ── */
.rp { position: absolute; inset: 0; will-change: opacity; }
.rp .spin {
  position: absolute; inset: 0; transform-origin: 100% 50%; will-change: transform;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-64); align-items: center;
  /* 오른쪽 160px 는 섹션 표시(점·이름) 자리 — 사진이 안 덮게 비워 둔다(실측: 1024~1440 폭에서 겹침) */
  /* 오른쪽은 눈금 원(반지름 46vh) 전체를 비운다 — 사진이 원 안에 걸치지 않게(22판 PSPD 코멘트) */
  padding: calc(var(--head) + var(--sp-32)) calc(46vh + var(--sp-24)) var(--sp-48) var(--gut);
}
/* 안쪽 요소는 바늘처럼 조금씩 늦게 따라온다 (--k 가 클수록 늦음) */
.rp .lag { transform: translateY(calc(var(--d, 0) * var(--k, 0) * -24px)); }

.rp .txt { max-width: calc(600 * var(--u)); }
.rp .no { display: flex; gap: var(--sp-12); align-items: center; font-family: var(--f-disp); font-size: var(--fs-12); color: var(--fg-2); margin: 0; }
.rp .no b { font-weight: 400; color: var(--fg); }
.rp .no::after { content: ""; width: var(--sp-40); height: 1px; background: currentColor; order: 1; }
.rp .no span { order: 2; }
.rp h1, .rp h2 { font-size: var(--t-title); line-height: 1.15; font-weight: 400; letter-spacing: -0.03em; margin: var(--sp-16) 0 var(--sp-20); }   /* 32판: T-18 굵기 600→400 · L-24 꼬리표→제목 24→16(제목→설명 20 보다 좁게) */
.rp .lead { font-size: var(--t-lead); line-height: 1.5; color: var(--fg-2); margin: 0; max-width: 30em; }   /* 32판: L-18 행간 1.65 는 29.7px 소수점이 반올림돼 설명→버튼이 41/40 으로 갈림 → 150%(27·24px 정수) */
.rp .acts { display: flex; gap: var(--sp-12); flex-wrap: wrap; margin-top: var(--sp-40); }
.rp .note { font-size: var(--fs-12); color: var(--muted); margin: var(--sp-40) 0 0; }
.rp .note + .acts { margin-top: var(--sp-12); }

/* 사진 칸 — 흐름 안에 두어 글과 겹칠 수 없다. 가장자리는 둥글게 흐려 네모가 안 보이게 */
.rp .shot {
  margin: 0; justify-self: start; width: min(100%, 62svh); mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 72%, transparent 100%);
          mask-image: radial-gradient(ellipse closest-side, #000 72%, transparent 100%);
}
.rp .shot.wide { width: min(100%, 76svh); }
.rp .shot .cr { position: relative; overflow: hidden; display: block; width: 100%; }
.rp .shot .cr img { position: absolute; max-width: none; display: block; }

/* 02 숫자 3개 */
.rp .facts { display: grid; grid-template-columns: repeat(3, max-content); gap: var(--sp-48); margin: var(--sp-40) 0 0; padding: var(--sp-24) 0 0; border-top: 1px solid var(--line-2); }
.rp .facts div { display: grid; gap: var(--sp-8); }
.rp .facts dt { font-size: var(--fs-12); color: var(--muted); order: 2; }
.rp .facts dd { margin: 0; font-size: var(--t-num); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.rp .facts dd.en { font-family: var(--f-disp); font-weight: 400; letter-spacing: 0; }

/* 03 대표 모델 */
.rp .pick { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--sp-4) var(--sp-24); margin-top: var(--sp-40); padding: var(--sp-24) 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line); }
.rp .pick .model { font-family: var(--f-disp); font-size: var(--t-num); line-height: 1; grid-column: 1; }
.rp .pick .name { font-size: var(--fs-16); color: var(--fg-2); grid-column: 1; }
.rp .pick .price { font-size: var(--fs-18); font-weight: 600; grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.rp .pick a { grid-column: 1 / -1; justify-self: start; margin-top: var(--sp-12); }

/* ── 오른쪽 섹션 표시: 점 4개 + 이름 ── */
.dial { position: absolute; right: 0; top: 50%; width: 0; height: 0; z-index: 3; pointer-events: none; }
.dial .face {
  position: absolute; width: calc(var(--ring) * 2); height: calc(var(--ring) * 2); left: calc(var(--ring) * -1); top: calc(var(--ring) * -1); border-radius: 50%;
  background: repeating-conic-gradient(from -0.25deg, var(--line-2) 0 0.5deg, transparent 0.5deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent calc(var(--ring) - calc(12 * var(--u))), #000 calc(var(--ring) - calc(12 * var(--u))));
          mask: radial-gradient(circle, transparent calc(var(--ring) - calc(12 * var(--u))), #000 calc(var(--ring) - calc(12 * var(--u))));
  opacity: .7;
}
.dial ol { list-style: none; margin: 0; padding: 0; pointer-events: auto; }
.dial ol li { position: absolute; right: 0; top: 0; transform: rotate(var(--a)) translateX(-72px); }   /* 26판: 점 대신 바늘처럼 축을 향한 직선 */
.dial ol a { display: grid; place-items: center; width: calc(24 * var(--u)); height: calc(24 * var(--u)); margin: -12px -12px 0 0; }
.dial ol a::before { content: ""; width: calc(14 * var(--u)); height: 1.5px; background: var(--line-2); transform-origin: 100% 50%; transition: background-color .3s, transform .3s; }
.dial ol a:hover::before { background: var(--fg-2); }
.dial ol a[aria-current]::before { background: var(--fg); transform: scaleX(2); }
.dial ol a:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; border-radius: 50%; }
.dial .name { position: absolute; right: calc(104 * var(--u)); top: 0; translate: 0 -50%; white-space: nowrap; font-size: var(--fs-12); font-weight: 600; }
.dial .count { position: absolute; right: calc(104 * var(--u)); top: var(--sp-16); white-space: nowrap; font-family: var(--f-disp); font-size: var(--fs-12); color: var(--muted); }

/* ── 태블릿 ── */
@media (max-width: 1023px) {
  .rp .spin { gap: var(--sp-32); padding-right: calc(var(--sp-64) + var(--sp-32)); }   /* 이름을 숨기고 점만 — 점 자리 96px */
  .rp .facts { gap: var(--sp-32); }
  .dial .name, .dial .count, .dial .face { display: none; }   /* 좁은 화면에선 눈금 원을 빼고 점만 */
}
/* ── 폰: 사진 위, 글 아래 ── */
@media (max-width: 1023px) {
  .rp .spin {
    display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: var(--sp-24);
    padding: calc(var(--head) + var(--sp-16)) calc(var(--gut) + var(--sp-16)) var(--sp-32) var(--gut);
  }
  /* 사진이 먼저(위), 글은 아래로 밀어 붙임 — HTML 순서는 글이 먼저라 order 로 바꿈(실측: 글이 위로 올라가 있었음) */
  .rp .shot, .rp .shot.wide { order: -1; width: min(72vw, 34svh); margin: 0 auto auto; flex: 0 1 auto; min-height: 0; }
  .rp .shot.wide { width: min(86vw, 38svh); }
  .rp h1, .rp h2 { margin: var(--sp-12) 0 var(--sp-12); }   /* 32판: L-24 꼬리표→제목 16→12 */
  .rp .acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(150 * var(--u)), 1fr)); gap: var(--sp-8); margin-top: var(--sp-24); }
  .rp .acts .btn { padding: 0 var(--sp-12); height: calc(52 * var(--u)); font-size: var(--fs-14); }
  .rp .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-16); margin-top: var(--sp-24); padding-top: var(--sp-16); }
  .rp .pick { margin-top: var(--sp-24); padding: var(--sp-16) 0; }
  .rp .note { margin-top: var(--sp-24); }
  .dial .face { display: none; }
  .dial ol li { transform: translate(-4px, calc((var(--i) - 1.5) * calc(24 * var(--u)))); }
}
@media (prefers-reduced-motion: reduce) {
  .rp .lag { transform: none; }
}

/* 네비: 회전 구간에서는 배경 없이(22판 PSPD 코멘트), 푸터에 닿으면 site.css 그대로 */
html.in-rotor .head, html.in-rotor .head.scrolled { background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* 푸터 영문 로고: 절반 크기, 왼쪽 맞춤(22판 PSPD 코멘트). 21판 실측 — 글자 폭 1395px(화면 1538px), 왼쪽이 본문보다 15px 안쪽 */
/* 9.6vw 로 올려 재니 폭 1160px — 원래 폭 1395px 의 절반(약 700px)이 되게 5.8vw */
/* → pages.css 로 옮김(26판: 하위 3쪽 푸터가 예전 크기로 나오던 것) */

/* 사진: 작게 나타나 제 크기가 됐다가 작아지며 사라진다(23판 PSPD). --ad 는 rotary.js 가 섹션마다 넣는 |d|(0=제자리, 1=한 칸 떨어짐) */
.rp .shot.lag {
  /* 24판(PSPD): 사진만 3D — 자기 가운데 세로축으로 기울어 들어와(25°, 폰 18°) 펴지고, 반대로 기울며 나간다 */
  transform: translateY(calc(var(--d, 0) * var(--k, 0) * -24px)) perspective(calc(1200 * var(--u))) rotateY(calc(var(--d, 0) * var(--tilt, 25deg))) scale(calc(1 - var(--ad, 0) * 0.42));
  transform-origin: 50% 50%;
}
@media (prefers-reduced-motion: reduce) { .rp .shot.lag { transform: none; } }
@media (max-width: 1023px) { .rp .shot.lag { --tilt: 18deg; } }

/* ══ 26판 짜임 (PSPD 코멘트 2026-10-27) ══
   - 다이얼 눈금 원 80% (반지름 46vh → 36.8vh)
   - PC(1440 이상): 사진은 화면 한가운데, 글 묶음+버튼은 좌하단. 글 폭은 사진 왼쪽 빈자리까지만(겹치지 않게)
   - 1439 이하: 사진 위(가운데) · 글 아래(좌하단) — 1280 폭에서 가운데 사진 옆 글 칸이 284px 로 좁아져(실측) 세로 짜임
   - 01 은 장인 흑백 사진을 화면 가득, 글·네비·다이얼 흰색. 02 부터는 메탈 배경 그대로 */
:root { --ring: 36.8vh; }
.rp { --w: min(52svh, var(--aw, 40vw)); }
.rp#manufacture { --w: min(56svh, var(--aw, 40vw)); }
.rp#products { --w: var(--aw, 40vw); }
@media (min-width: 1024px) {
  .rp .spin { display: block; padding: 0; }
  /* 28판(PSPD): 사진은 「글 오른쪽 끝 ~ 다이얼 원 왼쪽」 빈 영역의 가운데. 섹션마다 글 폭이 달라 fx.js 가 --cx(가운데)·--aw(빈 폭)를 잰다 */
  .rp .shot, .rp .shot.wide { position: absolute; top: 0; bottom: 0; left: calc(var(--cx, 50vw) - var(--w) / 2); margin: auto 0; height: fit-content; width: var(--w); }
  .rp .txt { position: absolute; left: var(--gut); bottom: var(--sp-64); max-width: calc(600 * var(--u)); }
}
@media (max-width: 1023px) {
  .rp .spin {
    display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: var(--sp-24);
    padding: calc(var(--head) + var(--sp-16)) calc(var(--gut) + var(--sp-16)) var(--sp-32) var(--gut);
  }
  .rp .shot, .rp .shot.wide { order: -1; width: min(72vw, 34svh); margin: 0 auto auto; flex: 0 1 auto; min-height: 0; }
  .rp .shot.wide { width: min(86vw, 40svh); }
}

/* 01 히어로 */
.rp.hero .hero-bg { position: absolute; inset: 0; overflow: hidden; background: #111; }
.rp.hero .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%;   /* 26판: 장인 손이 오른쪽 — 폰 세로 화면에서도 손이 남게 */ filter: grayscale(1) contrast(1.05) brightness(.78); }
.rp.hero .hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(20deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .2) 55%, rgba(0, 0, 0, .1) 100%); }
.rp.hero .txt { color: var(--on-ink); --fg: var(--on-ink); --fg-2: rgba(237, 237, 237, .86); --line-2: rgba(237, 237, 237, .5); --muted: rgba(237, 237, 237, .7); }
.rp.hero .no b { color: var(--on-ink); }
/* 흰 버튼 — site.css 의 .ink 버튼 색과 같게(.ink 는 검정 바탕까지 깔아서 쓰지 않음, 실측) */
.rp.hero .btn { background: var(--on-ink); color: var(--ink); border-color: var(--on-ink); }
.rp.hero .btn:hover { background: transparent; color: var(--on-ink); }
.rp.hero .btn.line { background: transparent; color: var(--on-ink); }
.rp.hero .btn.line:hover { background: var(--on-ink); color: var(--ink); }
.rp.hero :focus-visible { outline-color: var(--on-ink); }
/* 좁은 글 칸(PC: 사진 왼쪽 빈자리)에서 제목이 한 단어만 넘어가지 않게 */
.rp h1, .rp h2 { text-wrap: balance; }
.rp .nw { white-space: nowrap; }
/* 히어로 동안 네비·다이얼 흰색 (rotary.js 가 html.hero-on) */
html.hero-on .head { color: var(--on-ink); }   /* 01·03 처럼 검은 사진 섹션(.rp.hero) — rotary.js */
html.hero-on .dial { color: var(--on-ink); --fg: var(--on-ink); --line-2: rgba(237, 237, 237, .55); --muted: rgba(237, 237, 237, .7); }
.dial .name, .dial .count, .dial ol a::before, .dial .face { transition: color .4s, background-color .4s; }

/* ── 28판: 04 PRODUCTS — 15종 사진이 끊김 없이 흐른다(목록 두 벌을 이어 붙여 -50% 이동) ── */
.rp .shot.flow { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); overflow: hidden; }
.shot.flow .track { display: flex; gap: var(--sp-24); width: max-content; animation: flow 70s linear infinite; }
.shot.flow:hover .track { animation-play-state: paused; }
.shot.flow .it { margin: 0; flex: 0 0 auto; width: 30svh; }
.shot.flow .it .fr { position: relative; display: block; aspect-ratio: 1/1; }
.shot.flow .it .fr .ph.crop { inset: 0; width: 100%; height: 100%; }
.shot.flow .it .fr img.ph { inset: 0; width: 100%; height: 100%; }
.shot.flow .it figcaption { margin-top: var(--sp-8); text-align: center; font-family: var(--f-disp); font-size: var(--fs-12); color: var(--muted); }
@keyframes flow { to { transform: translateX(-50%); } }
@media (max-width: 1023px) { .rp .shot.flow, .rp .shot.flow.wide { width: 100%; } .shot.flow .it { width: min(26svh, 44vw); } }
@media (prefers-reduced-motion: reduce) { .shot.flow .track { animation: none; } .rp .shot.flow { overflow-x: auto; } }
/* 961~1439(세로 짜임인데 다이얼 원은 보임): 흐르는 띠가 원 안으로 들어가지 않게 원 왼쪽까지만 (1280 실측: 띠 1064px 이 원을 덮음) */
/* 31판: 히어로·맞춤 제작(사진 칸 없음)은 글 칸을 넓혀 제목 「케이스를 깎던 손으로,」가 한 줄에 — 600 이면 「손으로,」만 떨어짐(실측) */
@media (min-width: 1024px) { .rp.hero .txt { max-width: min(calc(760 * var(--u)), calc(100vw - var(--ring) - var(--gut) - var(--sp-64))); } .rp.hero .lead { max-width: 34em; } }

/* 32판: K-10·K-11 폰 섹션 표시 칸 24×24 → 누르는 칸 40×40 (선은 그대로), 칸끼리 겹치지 않게 간격 40 */
@media (max-width: 1023px) {
  .dial ol a { width: calc(40 * var(--u)); height: calc(40 * var(--u)); margin: -20px -20px 0 0; }
  .dial ol li { transform: translate(-4px, calc((var(--i) - 1.5) * calc(40 * var(--u)))); }
}

/* ══ 33판 (PSPD 코멘트 2026-10-28) ══ */
/* 12: 네 섹션 모두 글 묶음(꼬리표·제목·설명·버튼)을 화면 세로 가운데로 */
@media (min-width: 1024px) {
  .rp .txt { top: 0; bottom: 0; margin: auto 0; height: fit-content; z-index: 2; }
  /* 3: 02 제조 사진·문구를 화면 한가운데에 크게 — 배경처럼 글 뒤에 깔린다 */
  html .rp#manufacture { --w: min(88svh, 58vw); }
  html .rp#manufacture .shot { left: calc(50vw - var(--w) / 2); z-index: 0; }
  .rp#manufacture .shot .cap { font-size: var(--fs-18); gap: var(--sp-16); margin-top: var(--sp-16); }
  /* 13: 04 제품 묶음을 화면 가운데 쪽으로, 크게 (오른쪽 끝이 눈금 원에 걸치는 것은 PSPD 허용) */
  /* 36판(PSPD 코멘트): 제목 오른쪽 끝 ~ 눈금 원 왼쪽 사이 한가운데 — fx.js 가 섹션마다 재는 --cx */
  html .rp#products .shot.p4b { --w: min(52svh, 32vw, calc(var(--aw, 40vw) + 32 * var(--u))); left: calc(var(--cx, 64vw) - var(--w) / 2); }   /* 빈 폭(--aw, 좌우 32 뺀 값)보다 32 까지만 넓게 — 제목·원에 닿지 않게 */
}
@media (max-width: 1023px) {
  /* 12: 폰·태블릿 — 사진+글 묶음 전체를 세로 가운데로 */
  .rp .spin { justify-content: center; }
  .rp .shot, .rp .shot.wide { margin: 0 auto; }
  .rp#manufacture .shot.wide { width: min(92vw, 46svh); }
  html .rp#products .shot.p4b { width: min(80vw, 36svh); }
}
@media (max-width: 1023px) {
  .br-pc { display: none; }
  /* 폰·태블릿: 글이 세로 가운데로 와서 사진 위에 놓인다 — 사진을 고르게 어둡게 깔아 글이 읽히게(390 실측: 밝은 금속 위 흰 글) */
  .rp.hero .hero-bg::after { background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .62) 45%, rgba(0, 0, 0, .7) 100%); }
}
/* 태블릿(768~1023): 폰 짜임 그대로 쓰되 글자·여백·사진을 화면에 맞게 키운다(820 실측: 폰 크기 그대로라 화면 대부분이 빔) */
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --t-title: var(--fs-48); --t-num: var(--fs-32); --t-lead: var(--fs-18); --gut: calc(40 * var(--u)); --head: calc(64 * var(--u)); }
  .rp .spin { padding-left: var(--gut); padding-right: calc(var(--gut) + var(--sp-48)); gap: var(--sp-40); }
  .rp h1, .rp h2 { margin: var(--sp-16) 0 var(--sp-20); }
  .rp .acts { display: flex; gap: var(--sp-12); margin-top: var(--sp-40); }
  .rp .acts .btn { height: 56px; padding: 0 var(--sp-32); font-size: var(--fs-16); }
  .rp .shot { width: min(60vw, 36svh); }
  .rp#manufacture .shot.wide { width: min(80vw, 46svh); }
  html .rp#products .shot.p4b { width: min(56vw, 34svh); }
  .dial ol li { transform: translate(-8px, calc((var(--i) - 1.5) * 40px)); }
}
@media (max-width: 767px) {
  /* 폰: 버튼 두 개는 늘 한 줄 반반(360 실측: 두 줄로 쌓여 04 에서 사진 묶음과 글이 겹침) */
  .rp .acts { grid-template-columns: 1fr 1fr; }
  .rp .acts .btn { gap: var(--sp-4); white-space: nowrap; }
  /* 04 제품 묶음(사진+정보+썸네일)이 짧은 화면에서 글과 겹치지 않게 높이 기준으로 */
  html .rp#products .shot.p4b { width: min(80vw, 30svh); }
}
/* 짧은 폰(375×667 실측: 04 사진 묶음이 제목을 덮음) — 사진을 줄이고 한 줄 설명을 뺀다 */
@media (max-width: 767px) and (max-height: 760px) {
  html .rp#products .shot.p4b { width: min(80vw, 24svh); gap: var(--sp-8); }
  .p4b .meta .sm { display: none; }
}
/* 7: 03 각인 사진(33판 새 사진) — 가공 지점(사진 1162,464 / 1536×1024 = 75.7%, 45.3%)이 PSPD 가 짚은 자리(화면 약 60%·50%) 가까이 오게 키워서 옮긴다.
   오른쪽 끝까지 덮으려면 가로 60% 는 1.65배라 흐려져서, 1.5배·가로 64% 로 맞춤 */
@media (min-width: 1024px) {
  .rp#custom .hero-bg img { position: absolute; width: max(150vw, 150svh); height: auto; max-width: none; object-fit: fill; left: calc(64vw - 0.757 * max(150vw, 150svh)); top: calc(50svh - 0.453 * max(100vw, 100svh)); }
}
@media (max-width: 1023px) { .rp#custom .hero-bg img { object-position: 66% 50%; } }
/* 03: 사진이 커져 글 뒤로 케이스가 들어오므로 왼쪽만 조금 더 어둡게(가공 지점 쪽은 그대로) */
@media (min-width: 1024px) { .rp#custom .hero-bg::after { background: linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .5) 30%, rgba(0, 0, 0, .12) 52%, rgba(0, 0, 0, .05) 100%); } }
/* 가로로 눕힌 태블릿(1023×768 실측: 04 썸네일이 제목에 닿음) */
@media (min-width: 768px) and (max-width: 1023px) and (max-height: 900px) {
  html .rp#products .shot.p4b { width: min(56vw, 26svh); gap: var(--sp-8); }
  .p4b .meta .sm { display: none; }
  .rp .spin { gap: var(--sp-24); }
}
/* 33판 추가(PSPD 아이폰 실측: 가격 「140, / 000원」 줄바꿈) — 폰에선 사진만 높이 기준으로 작게, 정보·썸네일 줄은 넓게 */
@media (max-width: 767px) {
  html .rp#products .shot.p4b { width: min(100%, 360px); }
  .rp#products .p4b .stk { width: min(100%, 30svh); justify-self: center; }
  .p4b .meta .price { white-space: nowrap; }
  .p4b .thumbs { width: min(100%, 280px); }
}
@media (max-width: 767px) and (max-height: 760px) {
  html .rp#products .shot.p4b { width: min(100%, 360px); }
  .rp#products .p4b .stk { width: min(100%, 22svh); }
  .p4b .thumbs { width: min(100%, 240px); }
}

/* ══ 33판: 모바일(1023 이하) = 회전 없는 세로 상세페이지 (PSPD 2026-10-28) ══
   html.flat 은 각 쪽 머리 스크립트·rotary.js 가 붙인다. 01 만 한 화면, 02~04 는 사진 → 꼬리표·제목·설명·버튼, 높이는 내용만큼
   움직임은 화면에 들어올 때 살짝 떠오르기만(.fu → .in). 단어 흐림·사진 3D·반사광·눈금 다이얼·선화 그리기·인트로 줌은 뺀다 */
html.flat { scroll-snap-type: none; }
html.flat .rotor { height: auto !important; }
html.flat .snaps, html.flat .dial { display: none; }
html.flat .rot-stage { position: static; height: auto; overflow: visible; mix-blend-mode: normal; }
html.flat .rp, html.flat:not(.rot-ready) .rp:not(:first-child) { position: relative; inset: auto; opacity: 1 !important; visibility: visible; pointer-events: auto !important; will-change: auto; }
html.flat .rp .spin {
  position: relative; z-index: 1; transform: none !important; will-change: auto;   /* 사진(.hero-bg, 절대 위치) 위로 */
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--sp-32);
  padding: var(--sp-64) var(--gut); min-height: 0;
}
html.flat .rp .lag, html.flat .rp .shot.lag { transform: none; }
html.flat .rp .txt { max-width: 640px; }
html.flat .rp h1, html.flat .rp h2 { margin: var(--sp-12) 0 var(--sp-16); }
html.flat .rp .acts { margin-top: var(--sp-32); }
/* 단어 효과 끔 — 글자는 처음부터 보인다 */
html.flat .rp .w { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
html.flat .rp .lead .w { color: inherit !important; }
html.flat .lamp { display: none; }
/* 떠다니는 메탈 구름은 멈춘다(스크롤 중 다시 그리기 줄임) */
html.flat .metal i { animation: none; }

/* 01 히어로: 한 화면, 사진 가득 + 글 세로 가운데 */
html.flat .rp#brand { min-height: 100svh; display: flex; }
html.flat .rp#brand .spin { flex: 1; justify-content: center; padding-top: calc(var(--head) + var(--sp-32)); padding-bottom: var(--sp-48); }

/* 02 제조: 사진 가로 꽉(가장자리만 흐림) → 글 */
html.flat .rp .shot, html.flat .rp .shot.wide { order: -1; width: 100%; max-width: 560px; margin: 0 auto; flex: none; }
html.flat .rp#manufacture .shot .cap { font-size: var(--fs-14); margin-top: var(--sp-8); }
/* 36판(PSPD): 선화→실사 전환은 모바일에서도 켠다(가볍게 바꾼 css/fx.css) — 화면에 30% 들어오면 한 번 */

/* 03 맞춤 제작: 검은 바탕, 각인 사진 위(가로 꽉) → 글 아래. 사진이 글에 가리지 않게 */
html.flat .rp#custom { background: var(--ink); }
html.flat .rp#custom .hero-bg { position: relative; inset: auto; aspect-ratio: 4 / 3; }
html.flat .rp#custom .hero-bg img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: 66% 46%; }
html.flat .rp#custom .hero-bg::after { background: linear-gradient(180deg, rgba(14, 14, 14, 0) 55%, rgba(14, 14, 14, 1) 100%); }
html.flat .rp#custom .spin { padding-top: var(--sp-24); }

/* 04 제품: 대표 모델 묶음 → 글. 사진은 높이 기준으로 작게, 정보·썸네일 줄은 넓게(아이폰 실측: 가격이 두 줄로 끊김) */
html.flat .rp#products .shot.p4b { width: 100%; max-width: 420px; margin: 0 auto; }
html.flat .rp#products .p4b .stk { width: min(100%, 300px); justify-self: center; }
html.flat .p4b .meta .price { white-space: nowrap; }
html.flat .p4b .meta .sm { display: block; }
html.flat .p4b .thumbs { width: 100%; }
html.flat .rp#products .spin { padding-bottom: var(--sp-64); }

/* 떠오르기 */
html.flat .fu { opacity: 0; transform: translateY(24px) !important; transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.flat .fu.in { opacity: 1; transform: none !important; }
@media (prefers-reduced-motion: reduce) { html.flat .fu { opacity: 1; transform: none !important; } }
/* 태블릿 폭: 사진·글을 조금 더 넓게 */
@media (min-width: 768px) { html.flat .rp .spin { padding: var(--sp-64) var(--gut); gap: var(--sp-40); } html.flat .rp#manufacture .shot { max-width: 640px; } }
/* 태블릿: 사진과 글이 같은 세로줄(폭 640)을 쓰게 — 820 실측: 사진은 가운데, 글은 왼쪽 끝이라 줄이 안 맞음 */
@media (min-width: 768px) {
  html.flat .rp .spin { width: min(100%, calc(640px + var(--gut) * 2)); margin-inline: auto; }
  html.flat .rp .shot, html.flat .rp .shot.wide, html.flat .rp#manufacture .shot, html.flat .rp#products .shot.p4b { max-width: none; }
  html.flat .rp#products .p4b .stk { width: min(100%, 360px); }
  html.flat .rp .acts { display: flex; }
  html.flat .rp .acts .btn { flex: 0 0 auto; }
}
@media (min-width: 768px) { html.flat .rp#brand .spin { flex: none; } }
/* 03: site.css 의 .hero(한 화면 높이)를 풀어 내용만큼. 사진→글 간격도 다른 섹션과 같은 32(태블릿 40) */
html.flat .rp#custom { height: auto; min-height: 0; }
html.flat .rp#custom .spin { padding-top: var(--sp-32); }
@media (min-width: 768px) { html.flat .rp#custom .spin { padding-top: var(--sp-40); } }

/* ══ 34판 손질 (PSPD 아이폰 실측 2026-10-28) ══ */
/* 04 대표 모델 사진의 흰 네모 테두리가 보이던 것: .spin 의 z-index 가 쌓임 맥락을 만들어 사진의 곱하기(multiply)가 배경까지 안 닿았다 → z-index 는 01(사진 위 글)에만 */
html.flat .rp .spin { z-index: auto; }
html.flat .rp#brand .spin { z-index: 1; }
/* 01: 글·버튼 묶음을 아래 여백(64)에 맞춰 붙인다 — 02~04 는 내용만큼 높이라 이미 아래 여백 64 */
html.flat .rp#brand .spin { justify-content: flex-end; padding-bottom: var(--sp-64); }

/* ══ 36판(PSPD 정정): PC 섹션 표시 — 눈금 모양·크기는 예전 그대로, 눈금 하나하나를 금속 양각으로 ══
   바깥 눈금: 예전과 같은 칸(0.5° 폭 · 띠 12)에 은빛 금속 결(원뿔 그라데이션 — 눈금마다 반사가 다름)을 채우고, 위·왼쪽 밝은 턱 + 아래·오른쪽 그늘로 도드라지게
   (그늘은 마스크에 잘리지 않게 부모 .face 에 filter, 눈금 모양 마스크는 ::before 에)
   안쪽 바늘: 길이 14 그대로, 굵기 1.5 → 2(질감이 보이게), 금속 결 + 같은 방향 턱·그늘. 지금 섹션 바늘은 짙은 강철로 2배 길이(예전과 같음) */
@media (min-width: 1024px) {
  .dial .face { opacity: 1; background: none; -webkit-mask: none; mask: none;
    filter: drop-shadow(-0.6px -0.6px 0 rgba(255, 255, 255, .95)) drop-shadow(0.8px 1px 0.8px rgba(0, 0, 0, .45)); }
  /* 37b: 눈금을 SVG 벡터 막대 60개로(예전엔 repeating-conic-gradient 마스크 — 그라데이션 경계가 안티앨리어싱 없이 계단처럼 깨져 자글자글했다) */
  .dial .face::before {
    content: ""; position: absolute; inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200'%3E%3Cdefs%3E%3ClinearGradient id='m' gradientUnits='userSpaceOnUse' x1='-100' y1='-100' x2='100' y2='100'%3E%3Cstop offset='0' stop-color='%23ececec'/%3E%3Cstop offset='.12' stop-color='%237e7e7e'/%3E%3Cstop offset='.24' stop-color='%23dadada'/%3E%3Cstop offset='.36' stop-color='%238a8a8a'/%3E%3Cstop offset='.5' stop-color='%23f4f4f4'/%3E%3Cstop offset='.62' stop-color='%236e6e6e'/%3E%3Cstop offset='.76' stop-color='%23d2d2d2'/%3E%3Cstop offset='.88' stop-color='%23858585'/%3E%3Cstop offset='1' stop-color='%23e6e6e6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23m)'%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(0)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(6)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(12)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(18)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(24)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(30)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(36)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(42)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(48)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(54)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(60)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(66)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(72)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(78)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(84)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(90)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(96)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(102)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(108)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(114)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(120)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(126)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(132)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(138)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(144)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(150)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(156)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(162)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(168)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(174)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(180)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(186)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(192)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(198)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(204)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(210)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(216)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(222)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(228)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(234)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(240)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(246)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(252)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(258)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(264)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(270)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(276)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(282)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(288)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(294)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(300)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(306)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(312)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(318)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(324)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(330)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(336)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(342)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(348)'/%3E%3Crect x='-0.44' y='-99.7' width='0.88' height='3.6' rx='0.3' transform='rotate(354)'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }
  html.hero-on .dial .face { filter: drop-shadow(-0.6px -0.6px 0 rgba(255, 255, 255, .6)) drop-shadow(0.8px 1px 1px rgba(0, 0, 0, .8)); }
  .dial ol a::before {
    height: 2px; border-radius: 1px;
    background: linear-gradient(180deg, #ffffff 0%, #bdbdbd 45%, #6f6f6f 60%, #a9a9a9 100%);
    box-shadow: -0.5px -0.5px 0 rgba(255, 255, 255, .9), 0.8px 1px 1px rgba(0, 0, 0, .45);
  }
  .dial ol a:hover::before { background: linear-gradient(180deg, #e9e9e9 0%, #8e8e8e 45%, #3e3e3e 60%, #7c7c7c 100%); }
  .dial ol a[aria-current]::before { background: linear-gradient(180deg, #8f8f8f 0%, #3a3a3a 45%, #0a0a0a 60%, #4e4e4e 100%); }
  html.hero-on .dial ol a::before { box-shadow: -0.5px -0.5px 0 rgba(255, 255, 255, .5), 0.8px 1px 1px rgba(0, 0, 0, .8); }
  html.hero-on .dial ol a[aria-current]::before { background: linear-gradient(180deg, #ffffff 0%, #e0e0e0 45%, #8a8a8a 60%, #f0f0f0 100%); }
}

/* ══ 37판(PSPD): 로딩 화면 — 메인, 처음 들어올 때만. 눈금 60개(휠과 같은 양각 금속)가 실제 로딩만큼 시계방향으로 차오름
   39b(PSPD): 검은 바탕, 숫자 빼고, 로고를 가운데 더 크게 ══ */
html.loading, html.loading body { overflow: hidden; }
.loader { position: fixed; inset: 0; z-index: var(--z-loader); display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, #222 0%, #0e0e0e 55%, #050505 100%); transition: opacity .8s var(--ease), visibility .8s; }
.loader.done { opacity: 0; visibility: hidden; }
.loader .lt { grid-area: 1 / 1; width: min(72vmin, 480px); height: min(72vmin, 480px);
  filter: drop-shadow(-0.6px -0.6px 0 rgba(255, 255, 255, .35)) drop-shadow(0.8px 1px 1px rgba(0, 0, 0, .9)); }
.loader .tk rect { fill: rgba(255, 255, 255, .08); transition: fill .3s; }   /* 아직: 옅은 홈 / 찬 것: 밝은 은 */
.loader .tk rect.on { fill: url(#ltm); }
.loader .lc { grid-area: 1 / 1; display: grid; justify-items: center; gap: 12px; color: var(--on-ink); }
.loader .logo { font-family: var(--f-disp); font-size: clamp(18px, 5.6vmin, 40px);   /* 링 안쪽 폭에 맞춤(390 실측: 7vmin 이면 눈금에 닿음) */ display: flex; align-items: center; gap: .4em; line-height: 1; }
.loader .logo svg { width: 1.05em; height: 1.05em; }
.loader .since { font-family: var(--f-disp); font-size: clamp(11px, 2vmin, 14px); letter-spacing: .3em; color: rgba(237, 237, 237, .6); }
@media (prefers-reduced-motion: reduce) { .loader, .loader .tk rect { transition: none; } }