/* ════════════════════════════════════════════════════════════════
   VR Tour Lineup — Stylesheet

   구조:
     1. Tokens (:root)
     2. Fonts (@font-face)
     3. Reset / Base
     4. Layout (Canvas, UI Layer, Loading)
     5. States (body.app-state-*)
     6. Components
        6.1 Type1 Stage + Explore Hint
        6.2 Touch Zone + Cursor Arrow
        6.3 Hamburger (모바일 전용)
        6.4 Zone Bar + Zone Pills
        6.5 Category Members (PM 2026-05-15)
        6.6 Vehicle Info + CTA + Bottom Label
        6.7 Lineup Indicator
        6.8 Intro Overlay (video / progress / skip)
     7. Animations (@keyframes)
     8. Responsive (@media + prefers-reduced-motion)

   토큰 동기: shared/design-tokens.ts 와 1:1 — 추후 cssVars 자동화 예정.
   값 변경 시 양쪽 모두 갱신.
   ════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   1. Tokens
   ════════════════════════════════════════════════════════════════ */
:root {
  /* ── Base ── */
  --bg: #000;
  --text: #fff;
  --text-muted: rgba(255, 255, 255, 0.5);
  --font: "KiaSignature", sans-serif;

  /* ── Motion ── (shared/design-tokens.ts → motion.*) */
  --motion-fast: 150ms;
  --motion-normal: 250ms;
  --motion-slow: 350ms;
  --motion-slower: 500ms;
  --motion-cinematic: 800ms;
  --motion-spring: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Spacing ── (shared/design-tokens.ts → space.*) */
  --space-2: 8px;
  --space-3: 12px;
  --space-5: 24px;
  --space-8: 48px;

  /* ── Typography ── */
  --text-lg: 1.4rem;
  --font-weight-regular: 400;
  --letter-spacing-wider: 0.05rem;

  /* ── Radius ── */
  --radius-xl: 2.2rem;

  /* ── Layout ── */
  --touch-target: 4.4rem;

  /* PM 2026-07-16: 차량(canvas)이 그려지는 배율 — app.js render() 의 cover 수학과 동일한
     max(w/1920, h/1080). 1px = 1배. UI 를 이 값에 묶으면 차량과 항상 같은 비율로 함께 줄어든다.
     (차량 = cover 배율 + 화면중앙 앵커, UI = 10px 고정 + 뷰포트우측 앵커 였던 좌표계 불일치가
      좁은 창에서 차종명·Configurator 가 차량을 덮던 원인. 이미지·크롭은 건드리지 않는다.) */
  --cover-s: max(calc(100vw / 1920), calc(100vh / 1080));

  /* ── Color (다크 베이스) ── */
  --color-on-dark: #ffffff;
  --color-on-dark-muted: rgba(255, 255, 255, 0.6);
  --color-accent-progress: #ecad00; /* legacy 보존 */
  --color-zone-active: #05141f; /* PM 가이드 §7 */
  --color-progress-start: #edbd00;
  --color-progress-end: #d8a500;
  --color-skip-text: #151e28;
  --overlay-glass-light: rgba(255, 255, 255, 0.1);
  --overlay-border-glass: rgba(255, 255, 255, 0.12);

  /* ── Category Members ── (PM 2026-05-15) */
  --vrt-cm-gap: 1.6rem; /* PM 정정 사양 (이전 28px) */
  --vrt-cm-arrow-size: 2rem; /* PM 직접 사양 2026-05-19: 20×20 */
  /* PM 2026-07-16: 화면에서 가장 작은 텍스트(14px@1920) — 루트가 줄어들 때 제일 먼저 판독 불가가 됨
     ("category-members만 작아 보인다"의 실제 원인). 12px 하한으로 고정. 바가 넘치면 기존 화살표/가로스크롤이 처리. */
  --vrt-cm-fs: max(1.4rem, 12px);
  --vrt-cm-color: rgba(255, 255, 255, 0.8); /* PM 사양 2026-05-17 (이전 0.45) */
  --vrt-cm-color-active: #ffffff;
  --vrt-cm-divider: rgba(255, 255, 255, 0.2);
  --vrt-cm-arrow-color: rgba(255, 255, 255, 0.7);
  --vrt-cm-zone-bar-gap: 1.6rem; /* zone-pills ↔ category-members vertical gap */

  /* ── G-Button 공통 gradient (PM 직접 지시 2026-05-17) ── */
  --g-button-bg: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.9) 50.48%,
    rgba(255, 255, 255, 0.2) 100%
  );
  /* ── G-Button border 그라데이션 토큰 (PM 직접 지시 2026-05-18, outline 적용) ── */
  --G-Button: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0.9) 50.48%,
    rgba(255, 255, 255, 0.2) 100%
  );

  --G-Button-Zone-Pill: linear-gradient(
    90deg,
    rgba(177, 177, 177, 0.2) 0%,
    rgba(177, 177, 177, 0.9) 50.48%,
    rgba(177, 177, 177, 0.2) 100%
  );

  /* ── Figma 컬러시스템 (2494:19578) — Grey 13단계 + Primary Midnight Black (PM 2026-05-30) ── */
  --grey-0: #ffffff;
  --grey-1: #fafafb;
  --grey-2: #f2f4f6;
  --grey-5: #edf0f2;
  --grey-10: #e7e9ec;
  --grey-20: #ccd0d3;
  --grey-30: #b2b8bd;
  --grey-40: #9ba2a9;
  --grey-50: #828a90;
  --grey-60: #636b74;
  --grey-70: #49555f;
  --grey-80: #303c47;
  --grey-90: #172430;
  --grey-100: #05141f;
  --primary-midnight-black: #05141f;
}

/* ════════════════════════════════════════════════════════════════
   2. Fonts
   ════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: "KiaSignature";
  src:
    url("fonts/KiaSignatureRegular.woff2") format("woff2"),
    url("fonts/KiaSignatureRegular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "KiaSignature";
  src:
    url("fonts/KiaSignatureBold.woff2") format("woff2"),
    url("fonts/KiaSignatureBold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

/* ════════════════════════════════════════════════════════════════
   3. Reset / Base
   ════════════════════════════════════════════════════════════════ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-tap-highlight-color: transparent;
  /* PM 2026-07-16: 좁은 가로(예 950×800)서 차종명·Configurator 가 차량을 덮던 문제 해결.
     원인은 UI 가 "큰 것"이 아니라 차량과 좌표계가 달랐던 것 — 차량은 cover 배율로 그려지는데
     root 는 10px 고정이라 창이 좁아질수록 둘의 비율이 어긋났다.
     → root 를 차량 배율(--cover-s)에 묶어 UI 가 차량과 늘 같은 비율을 유지하게 한다.
       min(10px, …) 상한 = 1920 이상은 10px 고정 → 기존(Electron 키오스크 1920×1080 포함)과 수학적으로 동일.
       축소 시 작아지는 텍스트는 개별 floor(--vrt-cm-fs 등)로 판독성 확보. */
  font-size: min(10px, calc(10 * var(--cover-s)));
}

body {
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* 모바일 Safari/Chrome 주소창 대응 — 동적 뷰포트(미지원 브라우저·Electron은 위 100vh 폴백). 2026-07-12 */
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-font-smoothing: antialiased;
  touch-action: none;
}

/* 1. type2 화면에서만 브라우저 기본 마우스 포인터를 숨깁니다 (커스텀 화살표 사용) */
body.app-state-type2 {
  cursor: none !important; /* cursor는 상속 속성 → type2 하위 전체로 전파 */
}

/* PM 2026-06-04: cursor-arrow type1(차종 좌우 탐색)에서도 표시 — intro/transitioning만 숨김.
 * 옛 commit 65b3913 `body:not(.app-state-type2)` 폐기 — type1에서도 < > 화살표 노출 정합. */
body.app-state-intro #cursor-arrow,
body.app-state-transitioning #cursor-arrow {
  display: none !important;
}

/* 2. 단, hover 시 클릭 가능한 요소들만 브라우저 기본 포인터(손가락)를 허용합니다 */
.category-members__item,
.zone-pill,
.btn-configurator,
a,
button {
  cursor: pointer !important;
}

/* ════════════════════════════════════════════════════════════════
   4. Layout (Canvas / UI Layer / Loading)
   ════════════════════════════════════════════════════════════════ */
#player-container {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* type1->type2 cross-fade (사양서 §4) */
  transition: opacity var(--motion-slower) ease-in-out;
}
#frame-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.ui-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  /* startApp 후 fade-in */
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.ui-layer.ready {
  opacity: 1;
}
.ui-layer.ready * {
  pointer-events: auto;
}

#loading-screen {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 40px;
}
#loading-screen.hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* ── Loading bar (Configurator 동일 사양) ─────────────────────────── */
.loading-progress-bar {
  position: relative;
  width: 20.8%;
  height: 0.46vh;
  background: linear-gradient(180deg, #545454 -175%, #bababa 100%);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 10px;
}
.loading-progress-fill {
  height: 100%;
  width: 0%;
  background: #ecad00;
  border-radius: 5px;
  transition: width 0.3s ease;
}

/* ── Loading percent text ─────────────────────────────────────────── */
.loading-percent-text {
  font-family: "KiaSignature", sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

/* ════════════════════════════════════════════════════════════════
   5. States (body.app-state-*)
   intro / type1 / transitioning / type2
   ════════════════════════════════════════════════════════════════ */

/* 기본: type1-stage 숨김 → 활성 상태에서만 표시 */
#type1-stage {
  display: none;
}

/* type1: type1.png 배경 + type1-stage. ui-layer 숨김. */
/* PM 2026-06-17: 불투명 배경(#000)으로 뒤의 캔버스(차량 프레임=type2처럼 보임) 차단.
   type1.png 로드 전 캔버스가 비쳐 "type1에 type2 깜빡"하던 문제 fix. 이미지 로드되면 덮음. */
body.app-state-type1 #type1-stage {
  display: block;
  background: #000;
}
body.app-state-type1 #type1-stage #type1-image {
  display: none;
}
body.app-state-type1 #player-container {
  opacity: 1;
}
body.app-state-type1 .ui-layer {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* transitioning: explore-hint fade-out, canvas 유지 */
body.app-state-transitioning #type1-stage {
  display: block;
  opacity: 0;
  background: transparent;
}
body.app-state-transitioning .ui-layer {
  opacity: 1;
  pointer-events: none !important;
}
body.app-state-transitioning,
body.app-state-transitioning * {
  pointer-events: none !important;
}

/* type2(차량 선택/zone 탐색/configurator 진입) 화면에서만 클릭 가능 요소 hover 시
 * 커스텀 화살표 숨김 → 기본 cursor:pointer 노출.
 * body.app-state-type2 스코프 → intro/type1/transitioning(차량 선택 이전 시퀀스)에는 영향 없음
 * (옛 무스코프 65b3913 규칙이 그쪽 커서를 가리던 회귀 방지).
 * display:none 대신 opacity만 토글 → .cursor-arrow 의 transition:opacity 로 fade in/out. */
body.app-state-type2:has(
    .category-members__item:hover,
    .zone-pill:hover,
    .btn-configurator:hover
  )
  #cursor-arrow {
  opacity: 0;
  pointer-events: none;
}

/* PM 2026-06-04: explore-hint pulse 표시 중 cursor-arrow 숨김 + 기본 마우스 노출 */
body:has(.explore-hint.pulse) #cursor-arrow {
  display: none !important;
}
body:has(.explore-hint.pulse) {
  cursor: auto !important;
}
body:has(.explore-hint.pulse) * {
  cursor: auto !important;
}

/* type2: 기존 동작 (ui-layer.ready) */

/* ════════════════════════════════════════════════════════════════
   6. Components
   ════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   6.1 Type1 Stage + Explore Hint (사양서 §3.2)
   ────────────────────────────────────────────── */
#type1-stage {
  position: absolute;
  inset: 0;
  z-index: 150; /* intro(200) 아래, ui-layer(10) 위 */
  background: var(--bg);
  pointer-events: auto; /* 전체 화면 클릭 가능 (§6) */
  cursor: pointer;
  opacity: 1;
  transition: opacity var(--motion-slower) var(--motion-spring);
}
#type1-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* §3.1 */
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.explore-hint {
  position: absolute;
  left: 50%;
  bottom: var(--space-8);
  transform: translateX(-50%);
  /* 300×158 @1920 기준 → 15.625vw 비율 반응형 (clamp 안전 범위) */
  width: clamp(200px, 15.625vw, 300px);
  aspect-ratio: 300 / 158;
  pointer-events: none;
  /* 등장 애니메이션 (§3.2 표) */
  opacity: 0;
  animation: explore-hint-enter var(--motion-slower) ease-out 0.15s forwards;
}
.explore-hint svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* 알약 안 문구 — 원래 SVG path 아웃라인이라 번역이 불가했음.
   path 제거 후 실 텍스트를 알약 위에 오버레이. 알약 기하는 viewBox 300×158 기준
   rect(y=116.851, h=40.3) → 하단 25.5% 영역. 비율로 잡아 반응형 유지. */
.explore-hint-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.34%; /* (158 - 157.151) / 158 */
  height: 25.5%; /* 40.3 / 158 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4%;
  color: #fff;
  font-family: var(--font);
  font-weight: 600;
  /* 컨테이너(.explore-hint)가 clamp(200px, 15.625vw, 300px) 이므로 폰트도 동일 비율로 추종.
     300px 박스 = 16px → 16/1920 = 0.833vw. 하한 200px 박스 = 10.67px.
     번역문이 영문보다 길면 2줄로 감김 — 2줄 x 1.15 = 36.8px < 알약 40.3px 이라 안 넘침. */
  font-size: clamp(10.67px, 0.833vw, 16px);
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
  white-space: normal;
  overflow: hidden;
}
/* 펄스 (3초 idle 후 JS 가 .pulse 클래스 부여) */
.explore-hint.pulse {
  animation:
    explore-hint-enter var(--motion-slower) ease-out forwards,
    explore-hint-pulse 1.6s ease-in-out 0.5s infinite;
}

/* ──────────────────────────────────────────────
   6.2 Touch Zone + Cursor Arrow
   ────────────────────────────────────────────── */
.touch-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 5;
  cursor: none;
}
.touch-zone--left {
  left: 0;
}
.touch-zone--right {
  right: 0;
}

.cursor-arrow {
  position: fixed;
  display: flex;
  width: 80px;
  height: 80px;
  padding: 20px;
  align-items: flex-start;
  gap: 25px;
  aspect-ratio: 1 / 1;
  border-radius: 40px;
  background: rgba(5, 20, 31, 0.6);
  pointer-events: none;
  z-index: 15;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.15s ease;
  box-sizing: border-box;
}
.cursor-arrow.visible {
  opacity: 1;
}

/* PM 2026-06-02: 터치 모드 시 cursor-arrow 강제 hidden (mousemove 재발생 전까지) */
body.touch-mode .cursor-arrow {
  opacity: 0 !important;
  pointer-events: none;
}
.cursor-arrow svg {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
}

/* ──────────────────────────────────────────────
   6.3 Hamburger (모바일 전용)
   ────────────────────────────────────────────── */
.hamburger {
  display: none;
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 50;
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  transition: background 0.3s;
}
.hamburger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: #fff;
  border-radius: 1px;
  transition:
    transform 0.3s,
    opacity 0.3s;
}
.hamburger.open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ──────────────────────────────────────────────
   6.4 Zone Bar + Zone Pills (Group 탭)
   PM 2026-05-15: 197px/60px, radius 99px, #05141f active
   ────────────────────────────────────────────── */
.zone-bar {
  position: absolute;
  top: 4.8rem; /* 48px@1920 → rem (형제인 category-members 와 같은 스케일 기준으로 통일) */
  left: 0px; /* PM 사양 2026-05-20 */
  right: 0px; /* PM 사양 2026-05-20 */
  z-index: 40;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--vrt-cm-zone-bar-gap);
  box-sizing: border-box;
}
.zone-pills {
  display: flex;
  justify-content: center;
  gap: 1.6rem; /* 16px@1920 → rem */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.zone-pills::-webkit-scrollbar {
  display: none;
}
.zone-pill {
  position: relative; /* [필수] 가상 요소인 ::before의 기준점이 됩니다 */
  flex-shrink: 0;
  /* PM 2026-07-16: 197/60/20/40/10px@1920 → rem. 1920 에서는 root 10px 이라 환산값이 완전히 동일(회귀 0).
     같은 zone-bar 안의 category-members 는 이미 rem 이었는데 여기만 px 이라, 창이 좁아지면
     pills 만 안 줄어들어 두 줄의 비율이 어긋났다(“디자인 방식이 섞여있다”의 실체). */
  min-width: 19.7rem;
  height: 6rem;
  padding: 2rem 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  border-radius: 9999px; /* pill 형태 — 스케일 대상 아님 */

  /* 1. 실제 border는 투명하게 공간만 확보합니다 (0.5px 두께 반영) */
  border: 0.5px solid transparent;

  /* 2. 패딩을 포함한 안쪽 영역은 정확히 단색 rgba 0.1만 채웁니다 */
  background: rgba(255, 255, 255, 0.1);
  background-clip: padding-box; /* 배경이 패딩 영역까지만 채워지도록 제한 */

  /* 3. 블러 효과 및 기타 스타일 */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  color: #fff;
  text-align: center;
  font-family: var(--font);
  font-size: var(--vrt-cm-fs); /* 14px@1920. category-members 와 같은 토큰 = 같은 12px 판독 하한 */
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.5px;
  white-space: nowrap;
  cursor: pointer;

  /* background-size나 복잡한 그라데이션이 아니므로 transition을 원래대로 단순화 */
  transition: all 0.25s ease;
  z-index: 1; /* 글자가 테두리 레이어에 가려지지 않도록 설정 */
}

/* 4. 테두리만 전담 마크하는 가상 레이어 생성 */
.zone-pill::before {
  content: "";
  position: absolute;
  inset: 0; /* 부모 border-box에 정확히 일치 */
  border-radius: 9999px;
  padding: 0.5px; /* ← 보더 두께. 여기 값으로 굵기 조절 */

  background: var(
    --G-Button-Zone-Pill
  ); /* PM 직접 지시 2026-05-18: G-Button 그라데이션 사용 */

  /* 바깥(border-box) − 안쪽(content-box) = padding 두께만큼의 링 */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; /* webkit 계열 */
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude; /* 표준 */

  pointer-events: none;
  z-index: -1;
}
.zone-pill:hover {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.8);
}
/* Figma 정합 2026-05-31: active 칩 navy solid (Figma 1636:6378 → 1636:6417 SUV active). 토큰 --color-zone-active = #05141f */
.zone-pill.active {
  border: 0.5px solid transparent; /* PM 직접 지시 2026-05-18: 5px solid transparent (이전 1px) */
  background:
    linear-gradient(#05141f, #05141f) padding-box,
    var(--G-Button) border-box;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  font-weight: 600;
  color: var(--color-on-dark);
}
/* .zone-pill.active:hover {
  background: var(--color-zone-active);
} */

/* ──────────────────────────────────────────────
   6.5 Category Members Row (PM 2026-05-15)
   사양서: docs/design/component-specs/vrtour-category-group-bar.md
   활성 zone 의 멤버 차종 텍스트 + 좌우 화살표 페이징
   ────────────────────────────────────────────── */
.category-members {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #05141f80; /* PM 2026-05-28 */

  backdrop-filter: blur(.7rem); /* PM 2026-05-28 */
  -webkit-backdrop-filter: blur(.7rem);
  gap: 2.5rem; /* PM 사양 2026-05-18: 화살표 ↔ list 각각 25px gap */
  padding: 1.2rem 0;
  pointer-events: auto;
}
.category-members__list {
  display: flex;
  height: 1.7rem;
  padding: 0; /* PM 2026-05-28: underbar 바 바닥 정렬 위해 세로 패딩 제거 (item이 바 높이 채움) */
  flex-direction: row;
  align-items: center; /* PM 사양 2026-05-18: 글자 세로 가운데 정렬 */
  gap: 0; /* PM 사양 2026-05-18: item 사이 gap 제거 */
  align-self: stretch;
}
.category-members__list::-webkit-scrollbar {
  display: none;
}

.category-members__item {
  position: relative;
  /* PM 2026-05-28: 바 높이 채워 active underbar 가 바 바닥에 붙도록 */
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: var(--font);
  font-size: var(--vrt-cm-fs);
  font-weight: 400;
  letter-spacing: 0.03rem; /* PM 2026-06-17: 0.3px → rem (1920 기준 1rem=10px) */
  color: var(--vrt-cm-color);
  text-align: center; /* PM 사양 2026-05-17 */
  min-width: 8.7rem; /* PM 사양 2026-05-17 (가로 균일 영역 유지). 87px → rem */
  background: none;
  border: none;
  cursor: pointer;
  /* padding: 4px 2px; */
  white-space: nowrap;
  flex: 0 0 auto;
  padding: 0 1.6rem; /* 0px 16px → rem */
  transition:
    color var(--motion-fast) ease,
    font-weight var(--motion-fast) ease;
}
.category-members__item:hover {
  color: rgba(255, 255, 255, 0.75);
}
.category-members__item.active {
  color: var(--vrt-cm-color-active);
  font-weight: 600; /* PM 사양 2026-05-17 SemiBold (이전 700) */
}
/* PM 사양 2026-05-28: 활성 차종 하단바 117×2 radius20 white (모바일 88px item → max-width 캡) */
/* v0.1.5 2026-06-03: 활성 차종 하단바 제거 */
/* .category-members__item.active::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 117px;
  max-width: 100%;
  height: 2px;
  border-radius: 20px;
  background: #fff;
  pointer-events: none;
} */
/* PM 직접 사양 2026-05-17: category-members item 사이 divider 1×12.75 white */
/* ::after absolute + top:50%/translateY(-50%) — flex 환경 세로 정중앙 보장 */
.category-members__item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.1rem; /* 1px → rem */
  height: 1.275rem; /* 12.75px → rem */
  background: #fff;
  pointer-events: none;
}

.category-members__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--vrt-cm-arrow-size);
  height: var(--vrt-cm-arrow-size);
  background: none;
  border: none;
  color: var(--vrt-cm-arrow-color);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition:
    opacity var(--motion-fast) ease,
    color var(--motion-fast) ease;
}
.category-members__arrow svg {
  width: 2rem; /* 20px → rem */
  height: 2rem; /* 20px → rem */
  aspect-ratio: 1 / 1; /* PM 직접 사양 2026-05-19 */
  fill: #fff;
  display: block;
}
.category-members__arrow:hover {
  color: #ffffff;
}
.category-members__arrow[disabled] {
  opacity: 0.25;
  cursor: default;
  pointer-events: none;
}
/* PM 직접 사양 2026-05-19: 차종 4개 이하 → 화살표 숨김 (data-arrow-hidden), 5개↑ → 표시 */
.category-members[data-arrow-hidden="true"] .category-members__arrow {
  display: none;
}

/* ──────────────────────────────────────────────
   6.6 Vehicle Info + CTA + Bottom Label
   데스크톱: 우측, 모바일: 중앙 (Responsive 섹션에서 분기)
   ────────────────────────────────────────────── */
.vehicle-info {
  position: absolute;
  z-index: 20;
  /* PM 2026-06-15: btn-configurator(218px) 기준 right 8% 고정. 차종명 길이 무관하게 버튼 위치 유지,
     vehicle-title은 absolute로 버튼 중심을 따라 가운데 표시(따라다님). */
  /* PM 2026-06-16: btn-configurator right = 192px@1920 → 19.2rem (비례 스케일) */
  /* PM 2026-07-16: 차량 이미지 좌표계 기준 앵커. 차량은 화면중앙 + cover 배율이라 창이 16:9 보다
     좁아지면 좌우가 크롭되어 시안의 "차량 오른쪽 빈 자리"(UI 자리)가 화면 밖으로 밀린다.
       50vw - 768*s = 화면폭 - (크롭보정 dx + 이미지 x1728 지점)  ← 시안의 UI 우측 끝
     상한 19.2rem → 1920 이상은 기존 192px 과 동일(회귀 0).
     하한 → 화면 밖으로 밀리면 우측에 고정. --vrt-title-over(app.js showInfo 계산)는 차종명이
     버튼보다 넓을 때 그 초과분의 절반 — 긴 이름이 화면 밖으로 잘리는 것을 막는다. */
  right: clamp(
    calc(1.6rem + var(--vrt-title-over, 0px)),
    calc(50vw - 768 * var(--cover-s)),
    19.2rem
  );
  /* PM 2026-06-16: 1920×1080(기준)은 30%(=324px) 유지, 낮은 높이에선 320px floor로 내려
     vehicle-title(버튼 위)이 zone-bar/category-members와 겹치지 않게. (floor는 겹침가드라 px) */
  top: max(30%, 320px);
  transform: translateY(-50%);
  width: 21.8rem; /* 버튼폭 218px@1920 */
  text-align: center;
  pointer-events: none;
  transition: opacity 0.5s ease-out;
}
.vehicle-info.fade-out {
  opacity: 0;
}
#vehicle-title {
  /* 버튼 위 가운데 (버튼 중심 따라감). nowrap으로 긴 차종명도 안 줄바꿈, 좌우 대칭 오버플로 */
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #fff;
  text-align: center;
  font-family: "KiaSignature";
  font-size: 5.5rem; /* 55px@1920 → 비례 */
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.cta-wrap {
  margin-top: 2rem; /* 20px@1920 */
  pointer-events: auto;
  text-align: right;
}
/* 2026-10-17 Cinematic Driving (한승호 PM 시안 10/16): PC 는 Configurator 아래 같은 너비로 세로.
   간격 = Figma "261015 요청사항" Line Up(1920×1080) 12px (2026-10-18 확인). */
.cta-wrap.has-cinematic {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.2rem; /* 12px@1920 */
}
.btn-configurator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21.8rem; /* 218px@1920 */
  height: 6.5rem; /* 65px@1920 */
  padding: 0;
  border-radius: 999px;
  /* G-Button gradient outline: background border-box 패턴 (PM 직접 지시 2026-05-18) */
  border: 0.5px solid rgba(177, 177, 177, 0.2);
  background:
    linear-gradient(#05141f, #05141f) padding-box,
    var(--G-Button) border-box;
  color: #fff;
  font-size: max(1.6rem, 12px); /* 16px@1920. 축소 시 12px 판독 하한 (박스 21.8rem 안에서 안 넘침) */
  font-weight: 600;
  font-family: var(--font);
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
  transition:
    background 0.25s ease,
    color 0.25s ease;
}
/* PM 2026-07-16: 비활성(:disabled)엔 hover(노란색) 절대 적용 안 되게 :not(:disabled) 스코프 */
.btn-configurator:not(:disabled):hover {
  /* G-Button gradient outline 유지, 내부 bg만 변경 */
  border: 1px solid transparent;
  background:
    linear-gradient(#f3c300, #f3c300) padding-box,
    var(--G-Button) border-box;
  color: #000;
}
/* PM 2026-07-14: carcd 없는 차량(Configurator 링크 보류) — 숨김 대신 비활성(회색+클릭불가) */
/* PM 2026-07-16 디자인 시안(Frame 1739336110): 비활성 = 회색(#71787D) 배경 + 자물쇠 아이콘(텍스트 좌측).
   ★ 크기(21.8rem×6.5rem)·위치·보더 그라데이션(--G-Button)은 기존 그대로 — 안쪽 배경색만 교체.
   (시안의 stroke 그라데이션 white 0.2→0.9@50.48%→0.2 = 기존 --G-Button과 동일 확인) */
.btn-configurator:disabled {
  background:
    linear-gradient(#71787d, #71787d) padding-box,
    var(--G-Button) border-box;
  gap: 1.2rem; /* 아이콘~텍스트 간격 12px@1920 (시안 실측: 아이콘 51~67, 텍스트 78.77 시작) */
  cursor: default;
  /* !important — 모바일 블록의 `.ui-layer.ready #btn-configurator{pointer-events:auto}`(ID 특이도)가
     이 규칙을 덮어써서 비활성인데도 tap/hover 이벤트가 먹던 버그 방지. 비활성 = 이벤트 완전 차단. */
  pointer-events: none !important;
}
.btn-configurator:disabled::before {
  content: "";
  flex: none;
  width: 1.6rem; /* 16px@1920 */
  height: 2rem; /* 20px@1920 */
  background: url(images/icon-lock.svg) center/contain no-repeat;
}

/* 차량 하단 라벨 (번호판 위치). HTML 주석 처리 상태 — JS 참조 보존을 위해 코드 유지 */
.vehicle-license-label {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);

  color: #fff;
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  width: 100%;

  pointer-events: none;
  transition: opacity 0.5s ease-out;
}
/* .vehicle-license-label.fade-out {
  opacity: 0;
} */

/* ──────────────────────────────────────────────
   6.7 Lineup Indicator (웹 좌측 세로)
   ────────────────────────────────────────────── */
/* PM 2026-05-28 제거 — 웹 좌측 세로 라인업 인디케이터 비활성
.lineup-indicator {
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 25px;
  pointer-events: auto;
}
*/
/* PM 사양 2026-05-19: 32×32 컨테이너, padding 8px, radius 16, border 0.381px G-Button, bg rgba(5,20,31,0.60) */
.lineup-arrow {
  display: flex;
  width: 32px;
  height: 32px;
  padding: 8px;
  align-items: flex-start;
  gap: 10px;
  border-radius: 16px;
  border: 0.381px solid var(--G-Button, rgba(255, 255, 255, 0.2));
  background: rgba(5, 20, 31, 0.6);
  cursor: pointer;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: opacity 0.3s;
}
.lineup-arrow:hover {
  opacity: 0.8;
}
.lineup-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* PM 사양 2026-05-19: flex-start 강제 */
  flex: 1;
  overflow: hidden;
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(5, 20, 31, 0) 0%,
    rgba(5, 20, 31, 0.4) 50%,
    rgba(5, 20, 31, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 15%,
    black 85%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 15%,
    black 85%,
    transparent 100%
  );
}
.lineup-list-inner {
  display: flex;
  padding: 0 27px 0 22px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  align-self: stretch;
  flex: 1;
  will-change: transform;
  color: #fff;
  font-family: "KiaSignature";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.lineup-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  white-space: nowrap;
  padding: 0;
  flex: 1;
  transition: opacity 0.35s ease;
  position: relative;
}
/* PM 사양 2026-05-19: lineup-item 사이 별도 DOM element divider (pseudo-element X) */
.lineup-divider {
  width: 1px;
  height: 14px;
  background: #fff;
  align-self: flex-start;
  flex-shrink: 0;
}
.lineup-name {
  font-size: 18px; /* PM 사양 2026-05-19: 글자 크기 통일 */
  font-weight: 400; /* PM 사양 2026-05-19: Regular 400 통일 */
  font-family: var(--font);
  color: rgba(255, 255, 255, 0.6);
  line-height: normal; /* PM 사양 2026-05-19: line-height normal */
  transition: color 0.35s ease; /* font-size transition 제거 (크기 차별 없어짐) */
}
/* 가운데 기준 거리별 opacity/color/dash-width 단계 (data-dist) */
.lineup-item[data-dist="0"] {
  opacity: 1;
}

.lineup-item[data-dist="0"] .lineup-name {
  font-weight: 400; /* PM 사양 2026-05-19: Regular 400 통일 (이전 700 Bold) */
  font-size: 18px;
  color: #fff; /* 색상 기존 유지 (PM "현재 유지" 지시) */
}
.lineup-item[data-dist="1"] {
  opacity: 0.45;
}

.lineup-item[data-dist="1"] .lineup-name {
  color: rgba(255, 255, 255, 0.6);
}
.lineup-item[data-dist="2"] {
  opacity: 0.25;
}

.lineup-item[data-dist="2"] .lineup-name {
  color: rgba(255, 255, 255, 0.4);
}

/* ──────────────────────────────────────────────
   6.8 Intro Overlay (video / progress / skip)
   PM 가이드 §7: skip right:112px / bottom:100px,
   text #151E28 underline
   ────────────────────────────────────────────── */
#intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  transition: opacity 0.6s ease-out;
}
#intro-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}
#intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.intro-progress-wrap {
  position: absolute;
  bottom: 113px;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  max-width: 800px;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(180deg, #545454 -175%, #bababa 100%);
  box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.25) inset;
  overflow: hidden;
  z-index: 1;
  transition: opacity 0.4s ease;
}
.intro-progress-wrap.done {
  opacity: 0;
}
.intro-progress-bar {
  width: 0%;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(
    180deg,
    var(--color-progress-start) 0%,
    var(--color-progress-end) 100%
  );
  box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.25);
  transition: width 0.3s ease;
  margin-bottom: 26px;
}

.intro-progress-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 76px;
  color: #fff;
  leading-trim: both;
  text-edge: cap;
  font-family: var(--font);
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  transition: opacity 0.4s ease;
}
.intro-progress-text.done {
  opacity: 0;
}

.intro-skip {
  position: absolute;
  right: 112px;
  bottom: 96px;
  z-index: 1;
  width: 157px;
  height: 50px;
  aspect-ratio: 157/50;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background: transparent url(images/skip-btn.svg) center/contain no-repeat;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-out;
}
.intro-skip.visible {
  opacity: 1;
  pointer-events: auto;
}
/* PM 2026-06-16: 인트로 이후(type1/type2)엔 intro-skip 완전 숨김 — 안 그러면 z:200 오버레이 안의
   intro-skip이 하단 버튼(특히 모바일 중앙)을 덮어 터치 차단. (.visible 미제거 안전망) */
body.app-state-type1 .intro-skip,
body.app-state-type2 .intro-skip,
body.app-state-transitioning .intro-skip {
  display: none;
}
.intro-skip:hover {
  opacity: 0.8;
}
.intro-skip p {
  display: block;
  color: var(--color-skip-text);
  text-align: center;
  font-family: var(--font);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

/* ════════════════════════════════════════════════════════════════
   7. Animations
   ════════════════════════════════════════════════════════════════ */
@keyframes explore-hint-enter {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes explore-hint-pulse {
  0%,
  100% {
    transform: translate(-50%, 0) scale(1);
  }
  50% {
    transform: translate(-50%, 0) scale(1.04);
  }
}

/* ════════════════════════════════════════════════════════════════
   8. Responsive (@media + prefers-reduced-motion)
   ════════════════════════════════════════════════════════════════ */

/* ── 모션 감소 (사양서 §6) ── */
@media (prefers-reduced-motion: reduce) {
  .explore-hint,
  .explore-hint.pulse {
    animation-duration: var(--motion-fast);
    animation-iteration-count: 1;
  }
  #type1-stage {
    transition-duration: var(--motion-fast);
  }
  .category-members__item {
    transition: none;
  }
}

/* ── 모바일 (portrait) — 모바일/태블릿 width만 (PM 2026-05-30: 데스크탑 세로창 누수 fix) ── */
@media (orientation: portrait) and (max-width: 1024px) {
  /* PM 2026-06-16: 모바일 전용 rem 베이스 = 402px 디자인 기준 (1rem=10px@402, 모바일 폭 비례).
     웹(calc(100vw/192), 1920 기준)과 완전 독립. 모바일 배치/사이즈는 이 미디어쿼리에서 따로 정의. */
  html {
    font-size: calc(100vw / 40.2);
  }

  /* 햄버거 숨김 — Zone bar 항상 표시 */
  .hamburger {
    display: none !important;
  }

  /* Zone bar: PM 직접 사양 2026-05-19 — top 24px, flex column, gap 16px (zone-pills ↔ category-members) */
  .zone-bar {
    top: 2.4rem;
    left: 0px;
    right: 0px;
    transform: none;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    opacity: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.6rem; /* PM 직접 사양 2026-05-19: zone-pills ↔ category-members__list 16px */
    overflow-x: hidden;
    overflow-y: visible;
  }
  .zone-bar.open {
    opacity: 1;
    transform: none;
  }

  /* Zone pills 컨테이너 — 모바일 가로 스크롤 row */
  .zone-pills {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px 1.6rem;
    gap: .7rem;
    align-self: stretch;
    /* 안 넘치면 center, 가로로 넘치면 flex-start (시작 잘림/스크롤 불가 방지) — PM 2026-06-15 */
    justify-content: safe center;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex-shrink: 0;
  }
  .zone-pills::-webkit-scrollbar {
    display: none;
  }

  /* Zone pill 모바일 — PC 197px/60px 와 분리된 컴팩트 값 */
  .zone-pill {
    min-width: 8rem;
    height: 4.5rem;
    font-size: 1.28rem;
    padding: 1.4rem 1.6rem;
    flex-shrink: 0;
    border: 0.5px solid rgba(177, 177, 177, 0.2);
    font-size: 1.4rem;
  }

  /* Category members — 모바일 표시 (PM 직접 사양 2026-05-19: zone-pills 아래 16px 간격) */
  .category-members {
    display: flex;
  }

  /* 라인업 indicator 제거됨 (PM 2026-05-28) / 커서 화살표 모바일 숨김 */
  .cursor-arrow {
    display: none;
  }
  .touch-zone {
    cursor: pointer;
  }

  .vehicle-info {
    position: absolute; /* 혹은 fixed (top, bottom 활성화용) */
    top: calc(24px + 45px + 16px + 41px); /* = 126px */
    left: 0;
    right: 0;
    bottom: 0;
    /* PM 2026-06-16: 모바일은 PC 버튼패널 폭(width:21.8rem) 끊고 full-width 중앙 배치 (웹과 독립) */
    width: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    /* 💡 타이틀 상단 정중앙 배치를 위해 기존 패딩의 top(24px)을 0으로 비웁니다. */
    padding: 0 16px calc(32px + env(safe-area-inset-bottom, 0px));
  }

  #vehicle-title {
    /* 모바일 배치 따로: base의 absolute(버튼 위 플로팅) 끊고 flex 흐름에 넣음
       → 타이틀 상단 / 버튼 하단 (Figma 3499:346 컬럼). */
    position: static;
    transform: none;
    /* 모바일 사이즈 따로 (Figma 3499:347 = 48px@402 → 4.8rem) */
    font-size: 4.8rem;
    text-align: center;
    /* 💡 원래 패딩이 하던 최소 여백(24px)은 유지하되, 위쪽 남은 공간의 중앙으로 가도록 세팅 */
    margin-top: 9.4vh;
    margin-bottom: auto;
  }

  /* CTA — 기존 주석대로 버튼 그룹을 화면 맨 하단으로 밀어붙임 */
  .cta-wrap {
    /* 이미 상단에서 margin-bottom: auto로 밀어주고 있으므로, 
     기존 margin-top: auto와 시너지를 내어 완벽히 바닥에 안착합니다. */
    /* PM 2026-06-16: 버튼 ~20px 더 아래로 — 하단 마진 캡 6rem(60px@402) → 4rem(40px@402) */
    margin-bottom: clamp(
      0px,
      calc(0.001 * tan(atan2(100vh, 1px)) * 10vh),
      4rem
    );
    text-align: center;
  }
  /* full-height vehicle-info 가 좌/우 touch-zone 내비를 막지 않도록 — 버튼만 클릭 가능
     (.ui-layer.ready * 의 pointer-events:auto 를 id 특이도로 덮어씀) */
  .ui-layer.ready #vehicle-info,
  .ui-layer.ready #vehicle-title {
    pointer-events: none;
  }
  .ui-layer.ready #cta-wrap,
  .ui-layer.ready #btn-configurator,
  .ui-layer.ready #btn-cinematic {
    pointer-events: auto;
  }
  /* 2026-10-17 Cinematic Driving (시안 10/16): 모바일은 Configurator 너비를 줄이고 오른쪽에 같은 크기로.
     Figma Line Up 104(403×874): 180.83×64.96 두 개 + 간격 6px → 좌우 약 17.6px (2026-10-18 확인). */
  .cta-wrap.has-cinematic {
    flex-direction: row;
    justify-content: center;
    gap: 0.6rem;
  }
  .cta-wrap.has-cinematic .btn-configurator {
    width: 18.1rem;
  }
  /* 모바일 버튼 사이즈/배치 따로 (Figma 3499:348 = 218×65@402 → 21.8rem×6.5rem).
     디자인(그라데이션 보더/배경/radius)은 base .btn-configurator 공통. */
  .btn-configurator {
    display: flex;
    width: 21.8rem;
    height: 6.5rem;
    padding: 0;
    justify-content: center;
    align-items: center;
    gap: 0;
  }

  /* 차량 하단 라이센스 라벨 */
  .vehicle-license-label {
    bottom: 1.4rem;
    color: #fff;
    text-align: center;
    font-size: 8px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  /* Intro Skip 가운데 하단 — 모바일 portrait 는 작은 사이즈(109×35, p 12px) */
  .intro-skip {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    bottom: 87px;
    width: 109px;
    height: 35px;
    aspect-ratio: 109/35;
  }
  .intro-skip p {
    font-size: 12px;
  }

  /* PM 직접 사양 2026-05-19: 모바일 category-members item 88px */
  .category-members__item {
    min-width: 50px;
    padding : 0px 16px;
  }
}

/* ── 태블릿 세로 전용 (560~1024px portrait) — 2026-07-12 ──
   문제: 모바일 rem 베이스(100vw/40.2, 402px 폰 기준)라 태블릿에선 1rem이 2배(20.4px@820)로
         커져 zone-pill 4개 합계가 뷰포트 폭을 초과 → HEV/EV 잘림(측정: 820px에서 96px overflow).
   해결: 폰(<560px)은 그대로 두고, 태블릿 밴드에서만 pill 사이즈 성장을 min()으로 cap →
         4개가 한 줄에 잘림 없이 들어오게. 하한 560px = px 상한이 rem 곡선과 만나는 지점 →
         폰↔태블릿 경계 연속(크기 snap 방지). 폰(최대 ~500px 세로)은 미포함. */
@media (orientation: portrait) and (min-width: 560px) and (max-width: 1024px) {
  .zone-pills {
    gap: min(0.7rem, 10px);
    padding: 0 min(1.6rem, 22px);
  }
  .zone-pill {
    min-width: min(8rem, 110px);
    height: min(4.5rem, 64px);
    font-size: min(1.4rem, 19px);
    padding: min(1.4rem, 19px) min(1.6rem, 22px);
  }

  /* Configurator 버튼: rem 스케일로 태블릿서 부푸는 것 cap(폰 218×65 수준 유지) +
     하단으로 더 내려 차량 본체 겹침 최소화. 이미지 무변경, 버튼만 조정. 폰(<560)/PC 무영향. 2026-07-13 */
  /* 타이틀: 태블릿서 상단 스트립에 붙는 것 방지 — 아래로 여백 추가 */
  #vehicle-title {
    margin-top: calc(9.4vh + 50px);
  }
  .btn-configurator {
    width: min(21.8rem, 340px);
    height: min(6.5rem, 72px);
    font-size: min(1.6rem, 19px);
  }
  .cta-wrap {
    margin-bottom: min(4rem, 48px); /* 버튼을 disclaimer 위 + 살짝 위로(차량엔 안 닿게) */
  }
  /* 2026-10-17 Cinematic Driving: 태블릿도 모바일처럼 가로 나란히, 폭은 rem 성장 cap.
     Figma iPad Pro 12.9"(1024×1366): 300×72 두 개, left 203·521 → 간격 18px (2026-10-18 확인). */
  .cta-wrap.has-cinematic {
    gap: min(1.8rem, 18px);
  }
  .cta-wrap.has-cinematic .btn-configurator {
    width: min(18.1rem, 300px);
  }
  .vehicle-info {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  /* disclaimer 라벨을 하단 끝으로 내려 버튼과 간격 확보(겹침 방지) */
  .vehicle-license-label {
    bottom: calc(0.4rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ── 대형 데스크톱 (1440+) ── */