/* 홈 첫 두 화면 (2026-10-17 보스 지시)
   첫 화면 = 영상, 휠을 한 번 내리면 둘째 화면 = 숫자에 멈춘다. 다음 휠부터는 업무분야 이후 일반 스크롤.
   영상은 첫 화면을 채우고, 실적은 내용 높이만 차지한다. 휠 정지 때문에 실적 구간을 늘리지 않는다.
   휠 이동은 home-panels.js 가 맡고, 이 파일은 화면 크기만 정한다. site.css 는 건드리지 않고 뒤에서 덮는다.
   모바일(760px 이하)은 site.css 원래 규칙을 그대로 쓴다. 이 파일은 넓은 화면에서만 작동한다.
   JS 가 내용이 한 화면에 안 들어간다고 판단하면 <html> 에 hp-off 를 붙여 높이를 내용에 맡긴다(숫자·제목이 잘리지 않는다). */
@media (min-width:761px){
  /* 영상 화면 밖으로 아무것도 새지 않는다 — 둘째 화면 글자가 첫 화면 아래에 비쳐 보이면 안 된다(2026-10-17 지적).
     높이는 100vh 추정이 아니라 JS 가 넣는 실제 보이는 높이(--hp-vh, 확대·축소 반영 CSS px)를 쓰고, JS 전에는 100vh. */
  html body .hero{height:auto;min-height:0;overflow:hidden}
  html body .hero-stage{position:relative;top:auto;height:var(--hp-vh,100vh);min-height:0}
  /* 스크롤에 감기는 프레임 캔버스 대신 영상을 자율재생한다. */
  html body .hero-canvas{display:none !important}
  html body .hero-video{display:block !important}
  /* SCROLL 글자·세로선(46px) 전체가 첫 화면 안에 들어오도록 아래 여유를 화면 높이에 맞춰 둔다. */
  html body .scroll-ind{bottom:clamp(14px,3.6vh,34px)}
  html body .hero-inner{padding-top:clamp(96px,14vh,140px);padding-bottom:clamp(72px,12vh,150px)}

  html body .numsec{height:auto}
  /* 실적은 고정·최소 화면 높이를 풀고, 머리글 아래 여유와 짧은 하단 여백만 둔다. */
  html body .num-stage{position:relative;top:auto;height:auto;min-height:0;padding:96px 0 64px;display:flex;align-items:center}

  /* 내용이 한 화면보다 크면 자르지 말고 내용만큼 늘린다. */
  html.hp-off body .hero-stage{height:auto;min-height:var(--hp-vh,100vh)}
  html.hp-off body .numsec{height:auto}
  html.hp-off body .num-stage{height:auto;min-height:0}
}