/* ============================================================
   S1~S3. 히어로 — Figma D135(111:263)/D138/D139/D140/D137(111:819)
   ============================================================ */
.hero-wrap { height: 100vh; background: var(--bg-hero); }
.hero-pin { background: var(--bg-hero); }

/* ---- 공통 헤더 (프레임: h90, px110, 로고 244x30) ---- */
.site-header {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 1920px;
  height: 90px;
  padding: 0 110px;
  display: flex;
  align-items: center;
  gap: 360px;
  z-index: 30;
}
.site-header .logo { position: relative; width: 244px; height: 30px; overflow: hidden; flex-shrink: 0; }
.site-header .logo img.logo-main { position: absolute; inset: 0 3.57% 0 0; width: 96.43%; height: 100%; }
.site-header .logo img.logo-dot { position: absolute; left: 97.39%; top: 62.85%; width: 2.61%; height: 21.23%; }
.header-right { display: flex; align-items: center; gap: 200px; }
.site-nav { display: flex; gap: 36px; align-items: center; }
.site-nav a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}
.header-utils { display: flex; align-items: center; gap: 80px; }
.brochure { display: flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; }
.brochure span { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 16px; color: #000; white-space: nowrap; }
.brochure img { width: 20px; height: 20px; }
.lang-switch { display: flex; gap: 20px; align-items: center; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 16px; }
.lang-switch .kr { color: #000; }
.lang-switch .en { color: rgba(0, 0, 0, 0.1); }

/* ---- 헤드라인 (Pretendard ExtraBold 180/178, -3.6px) ---- */
.hero-headline {
  margin: 0;
  font-size: 180px;
  position: absolute;
  left: 50%;
  top: calc(50% - 228px);
  transform: translateX(-50%);
  font-family: 'Pretendard Variable';
  font-weight: 800;
  font-size: 180px;
  line-height: 178px;
  letter-spacing: -3.6px;
  text-align: center;
  color: #000;
  white-space: nowrap;
  z-index: 5;
}


/* ---- 좌측 카피 ---- */
.hero-copy { position: absolute; z-index: 6; }
.hero-copy .kicker {
  position: absolute; left: 110px; top: 210px;
  font-family: 'Pretendard Variable'; font-weight: 800;
  font-size: 15px; line-height: 22px; color: var(--ink); white-space: nowrap;
}
.hero-copy .kicker-en {
  position: absolute; left: 165px; top: 233px;
  font-family: 'Montserrat', sans-serif; font-weight: 600;
  font-size: 15px; line-height: 22px; color: var(--ink); white-space: nowrap;
}
.hero-copy .desc {
  position: absolute; left: 110px; top: 280px;
  font-family: 'SUIT Variable'; font-weight: 400;
  font-size: 15px; line-height: 22px; color: var(--ink); white-space: nowrap;
}

/* ---- 차량 캐러셀 스트립 (5699x568 @ top345) ---- */
.hero-strip {
  position: absolute;
  left: 0; top: 345px;
  width: 5699px; height: 568px;
  transform: translateX(var(--strip-x, 198px));
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: 10;
}
.hero-strip .vehicle, .blue-strip .vehicle { position: absolute; }
.hero-strip .shadow, .blue-strip .shadow { position: absolute; }
/* 주황 스포츠카 */
.v-sportscar { left: 67px; top: 144.46px; width: 1353.001px; height: 394.068px; overflow: hidden; }
.v-sportscar img {
  position: absolute;
  width: 125.93%; height: 324.28%;
  left: -13.99%; top: -119.58%;
  max-width: none;
}
.s-sportscar { left: 67.25px; top: 499.54px; width: 1361.493px; height: 65.125px; }
.s-sportscar img { position: absolute; inset: -31.94% -1.22% -25.49% -1.22%; width: 102.44%; height: 157.43%; max-width: none; }
/* 스포츠카 바닥 라인 */
.floor-line-1 { position: absolute; left: 779.99px; top: 487.02px; width: 148.197px; height: 2.639px; }
.floor-line-1 img { position: absolute; inset: -56.85% -1.01%; width: 102.02%; height: 213.7%; max-width: none; }
.floor-bar-a { position: absolute; left: 804.72px; top: 486.52px; width: 69.34px; height: 8.668px; display: flex; align-items: center; justify-content: center; }
.floor-bar-a::before { content: ''; width: 69.162px; height: 6.173px; background: #fff; transform: rotate(-2.07deg); }
.floor-bar-b { position: absolute; left: 870.57px; top: 486.52px; width: 69.34px; height: 8.668px; display: flex; align-items: center; justify-content: center; }
.floor-bar-b::before { content: ''; width: 69.162px; height: 6.173px; background: #fff; transform: rotate(-177.93deg) scaleY(-1); }
.floor-line-2 { position: absolute; left: 976.16px; top: 487.09px; width: 47.366px; height: 1.26px; }
.floor-line-2 img { position: absolute; inset: -119.01% -3.17% -119% -3.17%; width: 106.34%; height: 338%; max-width: none; }
/* SUV */
.v-suv { left: 1595px; top: 26px; width: 1436px; height: 546px; overflow: hidden; }
.v-suv img { position: absolute; width: 100%; height: 197.25%; left: 0; top: -46.43%; max-width: none; }
.s-suv { left: 1646px; top: 504px; width: 1385.003px; height: 90.127px; }
.s-suv img { position: absolute; inset: -23.08% -1.2% -18.42% -1.2%; width: 102.4%; height: 141.5%; max-width: none; }
/* 오토바이 (scaleY(-1)+rotate(180) = 수평 플립) */
.v-moto { left: 3218.47px; top: 111px; width: 779.385px; height: 463.766px; overflow: hidden; transform: scaleX(-1); }
.v-moto img { position: absolute; width: 106.61%; height: 145.05%; left: -3.31%; top: -6.25%; max-width: none; }
.s-moto { left: 3193.96px; top: 528.78px; width: 827.09px; height: 53.819px; }
.s-moto img { position: absolute; inset: -38.65% -2.01% -30.84% -2.01%; width: 104.02%; height: 169.49%; max-width: none; }
/* 자전거 (수평 플립) */
.v-bike { left: 4292px; top: 73px; width: 795px; height: 530px; transform: scaleX(-1); }
.v-bike img { width: 100%; height: 100%; object-fit: cover; }
.s-bike { left: 4292px; top: 544px; width: 784.999px; height: 39.08px; }
.s-bike img { position: absolute; inset: -53.22% -2.11% -42.48% -2.11%; width: 104.22%; height: 195.7%; max-width: none; }
/* 이전 슬라이드 파란 와이어프레임 (image 122) */
.v-wire-left { left: -1513px; top: -323px; width: 1474px; height: 1105px; }
.v-wire-left img { width: 100%; height: 100%; object-fit: cover; }

/* ---- 좌우 화살표 (120x120) ---- */
.hero-arrow {
  position: absolute;
  top: calc(50% - 3px);
  transform: translateY(-50%);
  width: 120px; height: 120px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 1.944px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15.556px;
  z-index: 20;
  transition: opacity 0.4s;
}
.hero-arrow img { width: 70.002px; height: 69.785px; }
.hero-arrow.prev { left: 0; }
.hero-arrow.next { right: 0; }
.hero-arrow.next img { transform: scaleX(-1); }
.hero-arrow[disabled] { opacity: 0; pointer-events: none; }

/* ============================================================
   파란 커버 레이어 (D137) — 원형 clip-path 로 리빌
   ============================================================ */
.hero-blue {
  position: absolute;
  inset: 0;
  background: var(--blue);
  z-index: 15;
  clip-path: circle(var(--circle-r, 15px) at var(--circle-x, 1007px) var(--circle-y, 195px));
}
.hero-blue .site-header .site-nav a,
.hero-blue .site-header .brochure span { color: #fff; }
.hero-blue .hero-headline {
  margin: 0;
  font-size: 180px; color: #fff; opacity: 1; }
/* 와이어프레임 스포츠카 라인아트 */
.blue-strip {
  position: absolute;
  left: 0; top: 345px;
  width: 5699px; height: 568px;
  transform: translateX(var(--strip-x, 198px));
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
.blue-strip .wire-car { position: absolute; left: 130px; top: 170px; width: 1362px; height: 385px; } /* 실측 정렬: 라이트 레이어 차량과 휠 중심 일치 */
/* plus-lighter는 clip-path+transform 조합에서 합성 아티팩트 발생 → 일반 렌더 + 밝기 보정 (라인아트가 알파 소스라 시각 결과 동일) */
.blue-strip .wire-car img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(1.6); }
.blue-strip .wire-shadow { position: absolute; left: 70px; top: 494px; width: 1361.493px; height: 65.125px; }
.blue-strip .wire-shadow img { position: absolute; inset: -31.94% -1.22% -25.49% -1.22%; width: 102.44%; height: 157.43%; max-width: none; }
/* X-ray 정합: 블루 스트립 차량 좌표는 라이트 스트립과 완전 동일 (렌즈 오버레이 일치) */

/* HUD 카드 — 블루 레이어 상시 포함 (X-ray 렌즈로 투시됨) */
.hud-card {
  position: absolute;
  border: 1px solid #fff;
}
.hud-card .hud-bg {
  position: absolute;
  left: -1px; top: -1px;
  width: 100%; height: 100%;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}
.hud-card .hud-text { position: absolute; left: 27px; display: flex; flex-direction: column; gap: 6px; }
.hud-card .hud-title {
  font-family: 'Pretendard Variable'; font-weight: 600;
  font-size: 22px; line-height: normal; color: #fff; white-space: nowrap;
}
.hud-card .hud-sub {
  font-family: 'Pretendard Variable'; font-weight: 400;
  font-size: 18px; line-height: 28px; color: rgba(255, 255, 255, 0.7); white-space: nowrap;
}
/* RPM 카드는 스트립 내부(1296,195)에 위치 — 캐러셀과 함께 이동 */
.hud-rpm { left: 1296px; top: 195px; width: 198px; height: 121px; }
.hud-rpm .hud-text { top: 29px; }
.hud-gps { left: calc(50% + 324px); top: 173px; width: 260px; height: 153px; }
.hud-gps .hud-text { top: 45px; }
.hud-ecu { left: 232px; top: 374px; width: 275px; height: 121px; }
.hud-ecu .hud-text { top: 29px; }