/* ============================================================
   D-rive 서브페이지 공통 — COMPANY / HARDWARE / SERVICE
   Figma(qCZIDww1TqDsOxYWN6ZYQM) 회사소개·하드웨어·서비스 섹션 기준.
   1920 고정폭 프레임을 #subZoom의 zoom으로 뷰포트에 맞춘다
   (index.html의 #flowZoom과 동일한 방식 — 좌표를 Figma 값 그대로 쓸 수 있다).
   프레임끼리는 margin 0으로 맞붙는다(대표 지시: 페이지 사이 여백 없음).
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue: #2b75ff;
  --ink: #020202;
  --paper: #f7f8fa;
  --gray100: #f2f4f6;
}

html { scroll-behavior: auto; }
body {
  background: #000;
  font-family: 'Pretendard Variable', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; }
button { border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
p { margin: 0; }
a { color: inherit; }

/* zoom 래퍼 — JS(js/subpage.js)가 innerWidth/1920을 넣는다 */
.sub-zoom { width: 1920px; }
/* 1920 고정 프레임 */
.sf {
  position: relative;
  width: 1920px;
  overflow: hidden;
}

/* ---------------- 표지 고정 + 다음 섹션이 덮으며 올라오기 ----------------
   메인 홈 표지→S4와 같은 방식. 표지는 sticky로 제자리에 머물고,
   다음 섹션이 음수 margin으로 겹쳐 올라와 화면을 채운다.
   --vhz = 화면 높이를 스테이지 단위로 환산한 값 (js/subpage.js가 설정) */
.sf-cover { position: relative; z-index: 0; height: calc(var(--vhz, 1024px) * 2); }
.sf-pin { position: sticky; top: 0; height: var(--vhz, 1024px); overflow: hidden; }
.sf-pin > .sf { height: 100%; }
.sf-after { margin-top: calc(var(--vhz, 1024px) * -1); }
/* 덮기 전환 없이 "화면에 딱 맞기"만 필요한 표지 — 높이만 화면과 같게 늘어난다 */
/* 페이지별 CSS의 `.co-hero { height: 1024px }` 같은 규칙을 이기려면 특이도를 한 단계 올려야 한다 */
.sf.sf-fit { height: var(--vhz, 1024px); }
.sub-zoom > .sf, .sub-zoom > footer.sf { position: relative; z-index: 1; }

/* ---------------- 헤더 (Figma 1920x90, px 110) ---------------- */
.site-header {
  position: absolute;
  top: 0; left: 0;
  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; }
/* Figma 나비게이션 프레임은 526px 고정폭 — 마지막 항목 뒤 여백까지 포함해야
   우측 유틸(브로슈어·KR/EN)이 Figma 좌표에 맞는다 */
.site-nav { display: flex; gap: 36px; align-items: center; width: 526px; }
.site-nav a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 16px;
  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; 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; }

.site-nav a, .brochure span, .lang-switch span { transition: color .18s ease; }
.lang-switch span { cursor: pointer; }

/* 어두운 표지(COMPANY·SERVICE): 선택 항목만 흰색, 나머지는 #ffffff 30% */
.hd-dark .site-nav a,
.hd-dark .lang-switch span { color: rgba(255, 255, 255, .3); }
.hd-dark .site-nav a.is-active,
.hd-dark .lang-switch .kr,
.hd-dark .brochure span { color: #fff; }
.hd-dark .lang-switch.is-en .kr { color: rgba(255, 255, 255, .3); }
.hd-dark .lang-switch.is-en .en { color: #fff; }
/* 호버 — 어두운 표지에서는 대표 지시대로 흰색으로 밝아진다 */
.hd-dark .site-nav a:hover,
.hd-dark .lang-switch span:hover,
.hd-dark .lang-switch.is-en span:hover,
.hd-dark .brochure:hover span { color: #fff; }

/* 밝은 표지(HARDWARE): 나머지는 #020202 10% */
.hd-light .site-nav a,
.hd-light .lang-switch span { color: rgba(2, 2, 2, .1); }
.hd-light .site-nav a.is-active,
.hd-light .lang-switch .kr,
.hd-light .brochure span { color: var(--ink); }
.hd-light .lang-switch.is-en .kr { color: rgba(2, 2, 2, .1); }
.hd-light .lang-switch.is-en .en { color: var(--ink); }
/* 밝은 표지(HARDWARE)는 대표 지시대로 반대 방향 — 진한 잉크(#020202)로 */
.hd-light .site-nav a:hover,
.hd-light .lang-switch span:hover,
.hd-light .lang-switch.is-en span:hover,
.hd-light .brochure:hover span { color: var(--ink); }
.hd-light .brochure img { filter: none; }
/* 로고·아이콘 원본은 검정 벡터 — 어두운 표지에서는 흰색으로 반전 */
.hd-dark .brochure img,
.hd-dark .logo img { filter: brightness(0) invert(1); }

/* ---------------- 좌우 화살표 (120x120) ---------------- */
.nav-arrow {
  position: absolute;
  width: 120px; height: 120px;
  top: 449px;
  background: var(--gray100);
  border-radius: 1.944px;
  display: flex; align-items: center; justify-content: center;
  z-index: 20;
}
.nav-arrow img { width: 70px; height: 69.785px; }
.nav-arrow.prev { left: 0; }
.nav-arrow.next { right: 0; }
.nav-arrow.next img { transform: scaleX(-1); }
.nav-arrow:disabled { cursor: default; }
.nav-arrow:disabled img { opacity: .25; }

/* ---------------- 푸터 (1920x240, #f7f8fa) ---------------- */
.sub-footer { background: var(--paper); height: 240px; }
.sub-footer .ft-inner {
  position: absolute;
  left: 280px; top: 60px;
  width: 1360px;
  display: flex; align-items: flex-start; justify-content: space-between;
}
.ft-foot { display: flex; flex-direction: column; gap: 22px; flex: 1 0 0; min-width: 0; }
.ft-links { display: flex; align-items: center; gap: 14px; }
.ft-links a {
  font-family: 'Pretendard Variable'; font-weight: 600; font-size: 14px; line-height: 17px;
  color: #000; text-decoration: none;
}
.ft-div { width: 1px; height: 10px; background: rgba(0, 0, 0, .1); }
.ft-legal {
  font-family: 'Pretendard Variable'; font-weight: 400; font-size: 14px; line-height: 20px;
  letter-spacing: -0.14px;
  color: rgba(0, 0, 0, .5);
  white-space: pre-wrap;
}
.ft-ways { display: flex; flex-direction: column; gap: 24px; flex-shrink: 0; }
.ft-ways-h {
  width: 236px;
  font-family: 'Pretendard Variable'; font-weight: 400; font-size: 14px; line-height: 1.3;
  color: rgba(0, 0, 0, .5);
}
.ft-ways-l { display: flex; flex-direction: column; }
.ft-ways-l a {
  font-family: 'Pretendard Variable'; font-weight: 500; font-size: 16px; line-height: 1.4;
  color: #000; text-decoration: none;
}

/* 공통 타이포 */
.sec-title {
  position: absolute;
  font-family: 'Pretendard Variable'; font-weight: 700; font-size: 48px; line-height: normal;
  color: var(--ink);
  white-space: nowrap;
}

/* 모바일 전용 헤더 — 데스크톱에서는 숨김 (css/mobile-nav.css가 ≤900px에서만 켠다) */
.m-nav { display: none; }

/* 줄바꿈 분기 — .m-br은 모바일에서만 (css/subpage-mobile.css가 켠다) */
.m-br { display: none; }