/* ══════════════════════════════════════════════════════════
   페이지별 히어로 이미지
   ──────────────────────────────────────────────────────────
   ■ 이미지 교체 방법
     /img/global/ 안의 해당 파일을 같은 이름으로 덮어쓰기
     → HTML 수정 불필요, 그 페이지만 바뀜

     hero-about.png          ABOUT
     hero-lab.png            GENIUS LAB 브랜드
     hero-lab-products.png   LAB 쇼룸
     hero-lab-gallery.png    LAB 갤러리
     hero-air.png            GENIUS AIR 브랜드
     hero-air-products.png   AIR 쇼룸
     hero-air-gallery.png    AIR 갤러리
     hero-certificate.png    CERTIFICATE
     hero-board.png          BOARD
     hero-contact.png        문의하기

   ■ 위치·크기 조정
     아래 「페이지별 개별 조정」 구역에서 해당 줄만 수정
   ══════════════════════════════════════════════════════════ */

/* ── 공통 기본값 ── */
.hero-sci{
  position:absolute;
  right:-2%;
  top:50%;
  transform:translateY(-50%);
  width:min(52%, 720px);
  max-width:none;
  height:auto;
  z-index:1;
  pointer-events:none;
  opacity:.9;
  animation:heroSciFloat 8s ease-in-out infinite;
}
@keyframes heroSciFloat{
  0%,100%{transform:translateY(-50%);}
  50%{transform:translateY(calc(-50% - 12px));}
}

/* 히어로 컨테이너 필수 속성 */
.brand-hero,
.sr-hero,
.page-hero{position:relative;overflow:hidden;}

/* 텍스트를 이미지 위로 */
.brand-hero-inner,
.sr-hero-inner,
.page-hero > *:not(.hero-sci){position:relative;z-index:2;}


/* ══════════════════════════════════════════════════════════
   페이지별 개별 조정  ← 여기만 수정하면 됩니다
   ══════════════════════════════════════════════════════════ */

/* ABOUT */
.pg-about .hero-sci{ width:min(48%,640px); right:0;    opacity:.82; }

/* GENIUS LAB */
.pg-lab .hero-sci{ width:min(52%,720px); right:-2%; opacity:.92; }
.pg-lab-products .hero-sci{ width:min(46%,620px); right:-1%; opacity:.85; }
.pg-lab-gallery  .hero-sci{ width:min(46%,620px); right:-1%; opacity:.85; }

/* GENIUS AIR */
.pg-air .hero-sci{ width:min(52%,720px); right:-2%; opacity:.92; }
.pg-air-products .hero-sci{ width:min(46%,620px); right:-1%; opacity:.85; }
.pg-air-gallery  .hero-sci{ width:min(46%,620px); right:-1%; opacity:.85; }

/* CERTIFICATE */
.pg-certificate .hero-sci{ width:min(46%,620px); right:0; opacity:.8; }

/* BOARD */
.pg-board .hero-sci{ width:min(44%,580px); right:0; opacity:.78; }

/* 문의하기 */
.pg-contact .hero-sci{ width:min(44%,580px); right:0; opacity:.78; }


/* ══════════════════════════════════════════════════════════
   반응형
   ══════════════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  .hero-sci{animation:none;}
}

/* 태블릿 */
@media(max-width:1100px){
  .hero-sci,
  [class*="pg-"] .hero-sci{
    width:min(46%,500px);right:-6%;opacity:.5;
  }
}

/* 모바일 — 하단 배경으로 전환 */
@media(max-width:768px){
  .hero-sci,
  [class*="pg-"] .hero-sci{
    width:132%;right:-16%;top:auto;bottom:-4%;
    transform:none;opacity:.15;animation:none;
  }
}