/* ============================================================
   D-rive 랜딩페이지 — 베이스 / 스테이지 시스템
   Figma 1920x1024 프레임을 뷰포트 너비에 맞춰 스케일.
   각 풀스크린 섹션: .pin-wrap(스크롤 길이) > .pin(sticky) > .stage(1920x1024)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-hero: #f3f1f4;
  --blue: #2b75ff;
  --black: #000000;
  --ink: #020202;
  --white: #ffffff;
}

html { scroll-behavior: auto; }
body {
  background: #000;
  font-family: 'Pretendard Variable', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; }
/* 에셋 미지정 이미지: 브로큰 아이콘/테두리 숨김 (에셋 채우면 자동 표시) */
img[data-asset]:not([src]) { visibility: hidden; }
button { border: 0; background: none; cursor: pointer; font: inherit; }
p { margin: 0; }

/* ---- 핀(스크롤 구간) 시스템 ---- */
.pin-wrap { position: relative; }
.pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
/* 1920x1024 디자인 스테이지 — JS가 --stage-scale 설정 */
.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1024px;
  transform: translate(-50%, -50%) scale(var(--stage-scale, 1));
}
/* 히어로는 헤더 보존을 위해 상단 기준 스케일 */
.hero-pin .stage {
  top: 0;
  transform: translateX(-50%) scale(var(--stage-scale, 1));
  transform-origin: top center;
}