@charset "UTF-8";

/* AEM reset */
body .bat-wrapper { max-width: unset; }
.aem-Grid-Container--xxl { max-width: unset; margin: 0; }

/* ==========================================================================
   글로벌 헤더(.bat-header) 슬라이드 — #device 스크롤락 연동
   - AEM 이 주입하는 전역 헤더라 로컬 마크업에는 존재하지 않는다(로컬에선 무시됨).
   - 구조: .bat-header (바깥, 슬라이드 대상) > ... > .bat-header-wrapper (실제 고정 바)
   - hpp_preorder_device.js 가 스크롤락 진입 시 .is-hpp-header-hidden 을 붙이고,
     락 해제(씬3 종료) 시 뗀다. -> slideUp / slideDown.
   - 이동량은 JS 가 실측해 --hpp-header-slide 로 넘긴다. .bat-header 자체 높이가
     0 일 수 있어(안쪽 바가 fixed) translateY(-100%) 가 무효가 되기 때문.
   - .is-hpp-header-pinned: .bat-header 가 흐름에 있고 안쪽 바만 fixed 인 구조일 때
     JS 가 함께 붙인다. transform 이 걸리면 안쪽 fixed 자식의 기준이 뷰포트에서
     .bat-header 로 바뀌므로, 미리 .bat-header 를 뷰포트 상단에 고정시켜
     기준을 일치시킨다. (이게 없으면 헤더가 문서 최상단으로 순간이동한다)
   - transform 은 스택 컨텍스트를 만들어 안쪽 바의 z-index 가 갇히므로,
     슬라이드 동안 헤더가 본문 뒤로 숨지 않도록 z-index 를 올려 준다.
   - height/display 가 아니라 transform 이라 레이아웃/스크롤 높이에 영향이 없다
     = 숨기고 되돌릴 때 스크롤 점프가 생기지 않는다.
   - AEM 쪽 셀렉터가 더 구체적일 수 있어(.bat-wrapper .bat-header ... 식 중첩)
     이 규칙만 !important 로 확실히 이긴다. 이 CSS 는 preorder 페이지에서만
     로드되므로 다른 페이지 헤더에는 영향이 없다.
   ========================================================================== */
.bat-header,
.bat-header-wrapper {
  transition: transform 0.4s ease !important;
}
.bat-header.is-hpp-header-pinned,
.bat-header-wrapper.is-hpp-header-pinned {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}
.bat-header.is-hpp-header-hidden,
.bat-header-wrapper.is-hpp-header-hidden {
  transform: translateY(var(--hpp-header-slide, -100%)) !important;
  z-index: 9999 !important;        /* 슬라이드 중 본문 뒤로 숨지 않도록 */
  pointer-events: none !important; /* 화면 밖 헤더가 클릭을 가로채지 않도록 */
}

.preorder__wrap {
  --preorder-unit: min(0.0520833vw, 1px);

  --preorder-unit-num: calc(var(--preorder-unit) / 1px);
  position: relative;
  width: 100%;
  font-family: var(--font-en, "Mont"), var(--font-kr, "Onemobile"), sans-serif;
}
.preorder__wrap, .preorder__wrap * { box-sizing: border-box; }
.preorder__wrap img { max-width: 100%; display: block; }

/* ==========================================================================
   #main — 피그마 236:3951(PC 1920x1008) / 236:4228(MO 375x650, x2 -> 750x1300 단위)
   - 배경: 영상 PC/MO 분리 — main_pc.mp4(1920x1080 가로) / main_mo.mp4(1080x1920 세로).
     src 는 hyperproplus_preorder.js 가 matchMedia(750px)로 하나만 주입한다(둘 다 15MB급).
     poster 는 각 영상 첫 프레임(main_poster_pc.jpg / main_poster_mo.jpg).
   - 콘텐츠: 로고/락업/타이틀 그래픽(이미지, PC-MO 동일 비율이라 파일 공유) +
     서브타이틀/기간/CTA(텍스트).
   - 텍스트 스펙(피그마): 서브타이틀 ONE Mobile Bold 60px(1.25, -0.02em) —
     "OPEN"/"3"은 Mont SemiBold, "+"는 Mont SemiBold #FE5000.
     기간 라벨 27.19px + 구분바(1.88x21.56, 흰색 60%) + 날짜 Mont SemiBold 30.94px.
     CTA: #FE5000, radius 61, h64, 좌우 pad 59.26, ONE Mobile Bold 23.7px.
   ========================================================================== */
#main.preorder__section {
  --main-stage-scale: calc(100vw / 1920 / 1px);
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1008;
  overflow: hidden;
  /* 영상/포스터 로드 직전 한 프레임 동안만 보이는 색.
     검정이면 그 순간 화면이 번쩍이므로 영상 첫 프레임 평균색(#69CF8E)으로 맞춘다. */
  background: #69cf8e;
}

.main__bg-video {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
}

.main__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1008px;
  transform: translate(-50%, -50%) scale(var(--main-stage-scale));
  z-index: 1;
}

/* PC 좌표 2차 조정(사용자 지정):
   (1) 좌측 정렬 기준을 로고 88 / 나머지 362 에서 전부 X:240 으로 통일.
   (2) 브랜드 가이드 크기 반영 — 락업을 326.55 -> **576 x 77**(= main_lockup.png
       원본 577 x 77 의 1:1 크기)로 확대. 높이가 43.65 -> 77 로 +33.35 커지므로
       락업 하단이 333.65 -> 367 이 되고, 그 아래 블록 전체를 같은 +33.35 만큼 내려
       기존 간격 체계를 그대로 유지한다:
         타이틀     353.65 -> 387    (락업 하단 367 +20)
         서브타이틀 481.84 -> 516    (타이틀 하단 486 +30)
         기간       655.84 -> 690    (서브타이틀 하단 666 +24)
         CTA        725.84 -> 760    (기간 하단 720 +40, 버튼 하단 824 / 스테이지 1008)
   ※ 로고는 브랜드 가이드상 폭 240 이지만, main_logo.png 원본이 223 x 157(1.42:1)이라
     240 x 56 으로는 3배 가까이 찌그러진다. 현재 값 222.26(원본 223 대비 1:1에 가까움)이
     사실상 원본 크기이므로 그대로 둔다 — 폭 240 을 꼭 써야 하면 높이는 168.97 이어야 한다. */
/* 글로 신규로고 222.26 x 156.28, X:240 Y:56.38 */
.main__logo {
  position: absolute;
  left: 240px;
  top: 56.38px;
  width: 222.26px;
  max-width: none;
}
/* "현명한 선택" 배지: #promo 의 .promo__wise 와 완전히 동일한 에셋/좌표/크기
   (foot_wise.png, X:1498 Y:78 W:346.16 -> 높이 75.81). 우측 상단 정렬이라
   좌측 X:240 통일 대상이 아니다. */
.main__wise {
  position: absolute;
  left: 1498px;
  top: 78px;
  width: 346.16px;
  max-width: none;
}
/* NEW HYPERpro+ 락업 브랜드 가이드 576 x 77(원본 577x77 1:1), X:240 Y:290 (하단 367) */
.main__lockup {
  position: absolute;
  left: 240px;
  top: 290px;
  width: 576px;
  max-width: none;
}
/* "+로 더 쉽게" 타이틀 그래픽 562 x 99, X:240, 락업 하단(367) +20 = Y:387 */
.main__title-img {
  position: absolute;
  left: 240px;
  top: 387px;
  width: 562px;
  max-width: none;
}
/* 서브타이틀: X:240, 타이틀 그래픽 하단(387+99=486) +30 = Y:516 */
.main__subtitle {
  position: absolute;
  left: 240px;
  top: 516px;
  margin: 0;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 60px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #ffffff;
  white-space: nowrap;
}
.main__subtitle__en {
  font-family: "Mont", "Onemobile", sans-serif;
  font-weight: 600;
}
.main__subtitle__plus {
  font-family: "Mont", "Onemobile", sans-serif;
  font-weight: 600;
  color: #fe5000;
}
/* 기간 라인: 서브타이틀(2줄=150px) 하단 666 +24 = Y:690, X:240 */
.main__date {
  position: absolute;
  left: 240px;
  top: 690px;
  height: 30px;
}
.main__date__label {
  position: absolute;
  left: 0;
  top: 0;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 27.19px;
  line-height: 30px;
  letter-spacing: -0.02em;
  color: #ffffff;
  white-space: nowrap;
}
.main__date__divider {
  position: absolute;
  left: 67.5px;
  top: 4.22px;
  width: 1.88px;
  height: 21.56px;
  background: #ffffff;
  opacity: 0.6;
}
.main__date__value {
  position: absolute;
  left: 86.25px;
  top: 0;
  font-family: "Mont", "Onemobile", sans-serif;
  font-weight: 600;
  font-size: 30.94px;
  line-height: 30px;
  letter-spacing: -0.02em;
  color: #ffffff;
  white-space: nowrap;
}
/* --------------------------------------------------------------------------
   플로팅 CTA (.main__btn-float) — PC / MO 공통
   - #main 이 완전히 스크롤되어 지나가면 화면 하단 중앙(bottom:50px)에 fadeIn 되어
     고정되고, 마지막 #promo 섹션이 뷰포트에 들어오면 다시 fadeOut 된다.
     노출/해제 판정은 preorder.html 하단 인라인 스크립트 [2] 가 담당한다.
   - 스테이지 안의 .main__btn 을 그대로 fixed 로 바꾸지 않고 별도 요소를 둔 이유:
     .main__stage 에 transform(scale)이 걸려 있어 **transform 이 걸린 조상은
     position:fixed 의 컨테이닝 블록이 된다** — 그 안에서 fixed 를 쓰면 뷰포트가
     아니라 스테이지 기준으로 고정되어 의도대로 동작하지 않는다.
   - 크기는 스테이지 스케일을 타지 않는 고정 px(1920 디자인 기준값과 동일). 뷰포트에
     붙는 UI 라 화면 폭에 따라 커지지 않는 편이 자연스럽다.
   - z-index 500: 본문 최대치(5)보다 위, 전역 헤더(9999)보다 아래.
   - visibility 를 함께 토글해 숨김 상태에서 키보드 포커스/스크린리더에 잡히지 않게 한다
     (transition 의 visibility delay 로 fadeOut 이 끝난 뒤에 사라지도록).
   -------------------------------------------------------------------------- */
.main__btn-float {
  position: fixed;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%);
  z-index: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 크기는 #main 스테이지 CTA(h64 / pad 59.26 / radius 61.06 / 23.7px)가 아니라
     #promo 의 CTA(.promo__btn) 규격을 따른다 — 스테이지 CTA 대비 정확히 0.85배로,
     디자인 안에 이미 존재하는 축소 규격이다. 플로팅은 본문 위에 상시 떠 있으므로
     한 단계 작은 쪽이 덜 부담스럽다. */
  height: 54px;
  padding: 0 50px;
  border-radius: 51.52px;
  background: #fe5000;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.main__btn-float.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.4s ease, visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  .main__btn-float { transition: none; }
}
@media (max-width: 750px) {
  .main__btn-float {
    /* 이 요소는 섹션 바깥(.preorder__wrap 직계)이라 #main / #promo 에만 선언된
       --preorder-unit-mo 를 상속받지 못한다 — 여기서 직접 선언해 쓴다. */
    --preorder-unit-mo: 0.133333vw;
    /* 크기는 페이지의 모바일 CTA 규격(.main_stage_m__btn / 모바일 .promo__btn)과 동일:
       h60 / pad 0 40 / radius 1000 / 28px (750 기준 → 375 화면에서 30px 높이). */
    height: calc(60 * var(--preorder-unit-mo));
    padding: 0 calc(40 * var(--preorder-unit-mo));
    border-radius: calc(1000 * var(--preorder-unit-mo));
    font-size: calc(28 * var(--preorder-unit-mo));
    /* 하단 여백은 모바일 좌우 기본 여백과 같은 48(750 기준 = 375 화면에서 24px).
       iOS 홈 인디케이터에 가리지 않도록 safe-area 만큼 더 띄운다. */
    bottom: calc(48 * var(--preorder-unit-mo) + env(safe-area-inset-bottom, 0px));
  }
}

/* CTA 버튼: 기간 하단 720 +40 = Y:760, h64(하단 824 / 스테이지 1008), X:240 */
.main__btn {
  position: absolute;
  left: 240px;
  top: 760px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 0 59.26px;
  border-radius: 61.06px;
  background: #fe5000;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 23.7px;
  line-height: 1.3;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
}
/* ※ 성인 고지 라인(.main__legal / .main_stage_m__legal)은 preorder.html 에 inline style 로 작성됨 */

/* 모바일 스테이지는 기본(데스크톱)에서 숨김 */
.main_stage_m {
  display: none;
}

@media (max-width: 750px) {
  /* 모바일: 피그마 375 기준 x2 = 750 단위. 섹션 비율 750:1300 (MO 375x650) */
  #main.preorder__section {
    --preorder-unit-mo: 0.133333vw;
    aspect-ratio: 750 / 1300;
  }
  .main__stage {
    display: none;
  }
  .main_stage_m {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .main_stage_m__logo {
    position: absolute;
    left: calc(51.8 * var(--preorder-unit-mo));
    top: calc(32.76 * var(--preorder-unit-mo));
    width: calc(128 * var(--preorder-unit-mo));
    max-width: none;
  }
  /* "현명한 선택" 배지(MO): #promo 의 모바일 .promo__wise 와 동일 좌표/크기
     (750 기준 X:542.35 Y:38 W:172 -> 높이 37.67, 우측 여백 35.65). 좌측 상단
     로고(X:51.8 Y:32.76 W:128, 하단 122.9)와 가로로 겹치지 않는다. */
  .main_stage_m__wise {
    position: absolute;
    left: calc(542.35 * var(--preorder-unit-mo));
    top: calc(38 * var(--preorder-unit-mo));
    width: calc(172 * var(--preorder-unit-mo));
    max-width: none;
  }
  /* 락업 285.5(=142.77x2) x 38.16, X:48 Y:162.77 */
  .main_stage_m__lockup {
    position: absolute;
    left: calc(48 * var(--preorder-unit-mo));
    top: calc(162.77 * var(--preorder-unit-mo));
    width: calc(285.5 * var(--preorder-unit-mo));
    max-width: none;
  }
  /* 타이틀 그래픽 491.4 x 85.86, 락업 하단 +17.49 = Y:218.41 */
  .main_stage_m__title-img {
    position: absolute;
    left: calc(48 * var(--preorder-unit-mo));
    top: calc(218.41 * var(--preorder-unit-mo));
    width: calc(491.4 * var(--preorder-unit-mo));
    max-width: none;
  }
  /* 서브타이틀 52.46px(=26.232x2), Y:330.5 */
  .main_stage_m__subtitle {
    position: absolute;
    left: calc(48 * var(--preorder-unit-mo));
    top: calc(330.5 * var(--preorder-unit-mo));
    margin: 0;
    font-family: "Onemobile", "Mont", sans-serif;
    font-weight: 700;
    font-size: calc(52.46 * var(--preorder-unit-mo));
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #ffffff;
    white-space: nowrap;
  }
  .main_stage_m__subtitle__en {
    font-family: "Mont", "Onemobile", sans-serif;
    font-weight: 600;
  }
  .main_stage_m__subtitle__plus {
    font-family: "Mont", "Onemobile", sans-serif;
    font-weight: 600;
    color: #fe5000;
  }
  /* 기간 라인 Y:483.5 (라벨 23.77 / 구분바 1.64x18.85 @59 / 날짜 27.05 @75.4) */
  .main_stage_m__date {
    position: absolute;
    left: calc(48 * var(--preorder-unit-mo));
    top: calc(483.5 * var(--preorder-unit-mo));
    height: calc(26 * var(--preorder-unit-mo));
  }
  .main_stage_m__date__label {
    position: absolute;
    left: 0;
    top: 0;
    font-family: "Onemobile", "Mont", sans-serif;
    font-weight: 700;
    font-size: calc(23.77 * var(--preorder-unit-mo));
    line-height: calc(26 * var(--preorder-unit-mo));
    letter-spacing: -0.02em;
    color: #ffffff;
    white-space: nowrap;
  }
  .main_stage_m__date__divider {
    position: absolute;
    left: calc(59 * var(--preorder-unit-mo));
    top: calc(3.7 * var(--preorder-unit-mo));
    width: calc(1.64 * var(--preorder-unit-mo));
    height: calc(18.85 * var(--preorder-unit-mo));
    background: #ffffff;
    opacity: 0.6;
  }
  .main_stage_m__date__value {
    position: absolute;
    left: calc(75.4 * var(--preorder-unit-mo));
    top: 0;
    font-family: "Mont", "Onemobile", sans-serif;
    font-weight: 600;
    font-size: calc(27.05 * var(--preorder-unit-mo));
    line-height: calc(26 * var(--preorder-unit-mo));
    letter-spacing: -0.02em;
    color: #ffffff;
    white-space: nowrap;
  }
  /* CTA: X:48 Y:549.5, h60, 좌우 pad 40, 폰트 28 */
  .main_stage_m__btn {
    position: absolute;
    left: calc(48 * var(--preorder-unit-mo));
    top: calc(549.5 * var(--preorder-unit-mo));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(60 * var(--preorder-unit-mo));
    padding: 0 calc(40 * var(--preorder-unit-mo));
    border-radius: calc(1000 * var(--preorder-unit-mo));
    background: #fe5000;
    font-family: "Onemobile", "Mont", sans-serif;
    font-weight: 700;
    font-size: calc(28 * var(--preorder-unit-mo));
    line-height: 1.3;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
  }
}

/* ==========================================================================
   #benefit — optB 리뉴얼. 피그마 benefitB 246:889(PC 1920x2159) / 246:1403(MO 375x1660, x2 -> 750x3320)
   그린(#3BA965) 테마: 카드 보더 2px/필/가격/포인트. "혜택 N" 라벨은 오렌지(#FE5000)+라인.
   카드 배경: 시안 conic-gradient의 다크그린 근사(CSS).
   필요 이미지(export 대기):
     benefit1_visual.png   교체 — PC 카드1 우측(단상+디바이스+쿠폰+파동) 카드 내부 x587~1200 영역, 613x485 @1x
     benefit1_visual_m.png 신규 — MO 카드1 상단(파동+디바이스+쿠폰) 327x250 @1x (보더 제외)
     benefit2_visual.png   교체 — PC 카드2 좌측(원+폰 목업+슬리브 박스+플러그) 카드 내부 x0~600 영역, 600x485 @1x
     benefit2_visual_m.png 교체 — MO 카드2 상단 327x225 @1x (보더 제외)
     benefit2_ico1~3.png   교체 — 새 아이콘 3종 55x55(ico3는 55x56.1) @1x
     benefit3_item1~3.png  재사용(변경 없음)
   ========================================================================== */
#benefit.preorder__section {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 2159;
  overflow: hidden;
  background: #000000;
}

.benefit__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 2159px;
  transform: translate(-50%, -50%) scale(calc(100vw / 1920 / 1px));
}
.benefit__stage p,
.benefit_stage_m p { margin: 0; }

/* 공용 */
.benefit__en {
  font-family: "Mont", "Onemobile", sans-serif;
  font-weight: 600;
}
.benefit__point { color: #3ba965; }
.benefit__title-point { color: #3ba965; }

/* --- 섹션 헤드 --- */
.benefit__period {
  position: absolute;
  left: 50%;
  top: 170.5px;
  /* reveal(GSAP)이 transform 을 통째로 덮어써서 중앙정렬이 깨짐 -> 별도 속성 translate 로 분리 */
  translate: -50% -50%;
  font-family: "Mont", "Onemobile", sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #3ba965;
  white-space: nowrap;
}
p.benefit__title {
  /* 중앙정렬 transform 비의존(reveal 충돌 방지): 중심 Y:269.5 - 123.2/2 = 207.9 */
  position: absolute;
  left: 0;
  right: 0;
  width: max-content;
  margin: 0 auto;
  top: 207.9px;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 44px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
}
.benefit__ship-note {
  position: absolute;
  left: 50%;
  top: 364.5px;
  /* reveal(GSAP)이 transform 을 통째로 덮어써서 중앙정렬이 깨짐 -> 별도 속성 translate 로 분리 */
  translate: -50% -50%;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #ffffff;
  white-space: nowrap;
}

/* --- 카드 공통 (1200x485, X:360, 그린 보더 + 다크그린 그라디언트) --- */
.benefit__card {
  position: absolute;
  left: 360px;
  width: 1200px;
  height: 485px;
  border: 2px solid #3ba965;
  border-radius: 20px;
  background: #0d0d0d linear-gradient(115deg, #0d0d0d 0%, #081c15 48%, #0d0d0d 78%);
  overflow: hidden;
}
.benefit__card--1 { top: 474px; }
.benefit__card--2 { top: 999px; }
.benefit__card--3 { top: 1524px; }

/* "혜택 N" 라벨(오렌지) + 라인 */
.benefit__label {
  position: absolute;
  top: 38px;
  display: flex;
  align-items: center;
  gap: 7px;
  width: 302px;
}
.benefit__label--left { left: 87px; }
.benefit__label--right { left: 618px; }
.benefit__label-txt {
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #fe5000;
  white-space: nowrap;
}
/* 텍스트 쪽(#FE5000) -> 바깥쪽으로 투명해지는 그라디언트 라인 */
.benefit__label-line {
  flex: 1;
  height: 1.3px;
  background: linear-gradient(90deg, #fe5000 0%, rgba(254, 80, 0, 0) 100%);
}

.benefit__pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 43.72px;
  padding: 0 30px 0 29px;
  border: 2px solid #3ba965;
  border-radius: 32.15px;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: #3ba965;
  white-space: nowrap;
}

.benefit__copy-s { font-size: 32px; line-height: 1.3; }
.benefit__copy-l { font-size: 46px; line-height: 1.3; }

/* --- 혜택 1 --- */
/* 내보낸 원본 573x448 (Figma 카드 기준 x:589 / y:37.42, 하단은 카드에서 잘림) */
.benefit__card1-visual {
  position: absolute;
  left: 587px;
  top: 35.4px;
  width: 573px;
  max-width: none;
}
.benefit__card1-pill { left: 91px; top: 133px; }
.benefit__card1-copy {
  position: absolute;
  left: 91px;
  top: 249.22px;
  transform: translateY(-50%);
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  white-space: nowrap;
}
.benefit__card1-old-num,
.benefit__card1-old-won,
.benefit__card1-new-num,
.benefit__card1-new-won {
  position: absolute;
  transform: translateY(-50%);
  line-height: 1.4;
  white-space: nowrap;
}
.benefit__card1-old-num {
  left: 99.03px;
  top: 370.46px;
  font-size: 52.44px;
  letter-spacing: -0.04em;
  color: #ffffff;
  opacity: 0.4;
}
.benefit__card1-old-won {
  left: 254.89px;
  top: 371.87px;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 31.17px;
  letter-spacing: -0.02em;
  color: #ffffff;
  opacity: 0.4;
}
.benefit__card1-strike {
  position: absolute;
  left: 91px;
  top: 369.1px;
  width: 200px;
  height: 2px;
  background: #ffffff;
  opacity: 0.4;
}
.benefit__card1-new-num {
  left: 294.46px;
  top: 360.23px;
  font-size: 86.05px;
  letter-spacing: -0.04em;
  /* 사용자 지정: 할인가 숫자만 #FE5000. 뒤의 "원"(.benefit__card1-new-won)은
     기존 #3BA965 유지 — 숫자만 바꿔달라는 요청 그대로다. */
  color: #fe5000;
}
.benefit__card1-new-won {
  left: 548.52px;
  top: 368.7px;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 37.41px;
  letter-spacing: -0.02em;
  color: #3ba965;
}

/* --- 혜택 2 --- */
/* 내보낸 원본 519x440 (Figma 카드 기준 x:38 / y:45, 하단은 카드에서 잘림) */
.benefit__card2-visual {
  position: absolute;
  left: 36px;
  top: 43px;
  width: 519px;
  max-width: none;
}
.benefit__card2-pill { left: 620px; top: 131px; }
.benefit__card2-copy {
  position: absolute;
  left: 620px;
  top: 193.72px;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  white-space: nowrap;
}
/* 아이콘 행: |선| 아이콘+라벨 |선| ... (라인 4개, 아이콘 55px) */
.benefit__card2-feats {
  position: absolute;
  left: 620px;
  top: 305.3px;
  display: flex;
  align-items: center;
  gap: 27px;
  height: 130px;
}
.benefit__card2-divider {
  width: 1.3px;
  height: 130px;
  background: rgba(255, 255, 255, 0.3);
}
.benefit__card2-feat {
  display: flex;
  align-items: center;
  gap: 5px;
}
/* 아이콘 슬롯은 55x55 고정, 이미지는 비율 유지하며 슬롯 안에 중앙 배치 */
.benefit__card2-ico {
  width: 55px;
  height: 55px;
  object-fit: contain;
  max-width: none;
}
.benefit__card2-feat p {
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: #ffffff;
  white-space: nowrap;
}
/* "루틴은 / 자동으로" 만 두 줄 길이 차가 커서 가운데 정렬 */
.benefit__card2-feat--center p { text-align: center; }
.benefit__card2-off {
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2;
}

/* --- 혜택 3 --- */
.benefit__card3-pill { left: 91px; top: 134px; }
.benefit__card3-copy {
  position: absolute;
  left: 91px;
  top: 201.72px;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  white-space: nowrap;
}
.benefit__card3-copy .benefit__copy-l { letter-spacing: -0.05em; }
.benefit__card3-item {
  position: absolute;
  top: 105px;
  width: 200px;
  height: 320px;
  border-radius: 12px;
  background: linear-gradient(to bottom, #ffffff 0%, #dbdbdb 100%);
  box-shadow: -9.82px 0 12.28px 0 rgba(0, 0, 0, 0.25);
}
.benefit__card3-item--1 { left: 529px; top: 105.46px; }
.benefit__card3-item--2 { left: 739px; }
.benefit__card3-item--3 { left: 949px; }
.benefit__card3-item-img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  max-width: none;
}
.benefit__card3-item--1 .benefit__card3-item-img { top: 57.69px; width: 170.88px; }
.benefit__card3-item--2 .benefit__card3-item-img { top: 36.83px; width: 146.11px; }
.benefit__card3-item--3 .benefit__card3-item-img { top: 70.99px; width: 155.3px; }
.benefit__card3-item-txt {
  position: absolute;
  left: 50%;
  top: 210px;
  transform: translateX(-50%);
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: -0.05em;
  color: #1b1b1b;
  text-align: center;
  white-space: nowrap;
}
.benefit__card3-item-count {
  display: block;
  margin-top: 6.67px;
  letter-spacing: -0.03em;
}
.benefit__card3-badge {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66.7px;
  height: 66.7px;
  border-radius: 50%;
  background: #fe5000;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 14.68px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-align: center;
}
.benefit__card3-badge--1 { left: 652.3px; top: 125.46px; }
.benefit__card3-badge--2 { left: 862.3px; top: 125px; }
.benefit__card3-badge--3 { left: 1072.3px; top: 125px; }

/* --- 하단 각주 --- */
.benefit__footnote {
  position: absolute;
  left: 59px;
  bottom: 40px;
  font-size: 14px;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: #ffffff;
  white-space: nowrap;
}

/* 모바일 스테이지는 기본(데스크톱)에서 숨김 */
.benefit_stage_m { display: none; }

@media (max-width: 750px) {
  /* MO: 피그마 375x1660 -> x2 = 750x3320 단위 */
  #benefit.preorder__section {
    --preorder-unit-mo: 0.133333vw;
    aspect-ratio: 750 / 3320;
  }
  .benefit__stage { display: none; }
  .benefit_stage_m {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  /* --- 섹션 헤드 --- */
  .benefit_m__period {
    position: absolute;
    left: 50%;
    top: calc(123 * var(--preorder-unit-mo));
  /* reveal(GSAP)이 transform 을 통째로 덮어써서 중앙정렬이 깨짐 -> 별도 속성 translate 로 분리 */
    translate: -50% -50%;
    font-family: "Mont", "Onemobile", sans-serif;
    font-weight: 600;
    font-size: calc(36 * var(--preorder-unit-mo));
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #3ba965;
    white-space: nowrap;
  }
  p.benefit_m__title {
    position: absolute;
    left: 0;
    right: 0;
    width: max-content;
    margin: 0 auto;
    top: calc(169.2 * var(--preorder-unit-mo)); /* 중심 242 - 145.6/2 */
    font-family: "Onemobile", "Mont", sans-serif;
    font-weight: 700;
    font-size: calc(52 * var(--preorder-unit-mo));
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
  }
  /* 중앙정렬은 translate 대신 left/right 0 + margin auto (reveal 과 무관하게 안정적)
     중심 355 - (24*1.2)/2 = top 340.6
     ※ `.benefit_stage_m p { margin:0 }` 을 이기려면 선택자에 p 가 필요하다. */
  p.benefit_m__ship-note {
    position: absolute;
    left: 0;
    right: 0;
    width: max-content;
    margin: 0 auto;
    top: calc(340.6 * var(--preorder-unit-mo));
    font-size: calc(24 * var(--preorder-unit-mo));
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #ffffff;
    white-space: nowrap;
  }

  /* --- 카드 공통 (w654 h840, X:47) --- */
  .benefit_m__card {
    position: absolute;
    left: calc(47 * var(--preorder-unit-mo));
    width: calc(654 * var(--preorder-unit-mo));
    height: calc(840 * var(--preorder-unit-mo));
    border: calc(2 * var(--preorder-unit-mo)) solid #3ba965;
    border-radius: calc(20 * var(--preorder-unit-mo));
    background: #0d0d0d linear-gradient(160deg, #0d0d0d 0%, #081c15 48%, #0d0d0d 80%);
    overflow: hidden;
  }
  .benefit_m__card--1 { top: calc(475 * var(--preorder-unit-mo)); }
  .benefit_m__card--2 { top: calc(1355 * var(--preorder-unit-mo)); }
  .benefit_m__card--3 { top: calc(2235 * var(--preorder-unit-mo)); }

  /* "─ 혜택 N ─" 라벨: 상단 중앙 */
  .benefit_m__label {
    position: absolute;
    left: 50%;
    top: calc(41 * var(--preorder-unit-mo));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: calc(10 * var(--preorder-unit-mo));
  }
  .benefit_m__label-txt {
    font-family: "Onemobile", "Mont", sans-serif;
    font-weight: 700;
    font-size: calc(24 * var(--preorder-unit-mo));
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #fe5000;
    white-space: nowrap;
  }
  /* 가운데 텍스트 쪽(#FE5000) -> 바깥쪽으로 투명해지는 그라디언트 라인 */
  .benefit_m__label-line {
    width: calc(26 * var(--preorder-unit-mo));
    height: calc(2 * var(--preorder-unit-mo));
    background: linear-gradient(90deg, rgba(254, 80, 0, 0) 0%, #fe5000 100%);
  }
  .benefit_m__label-line:last-child {
    background: linear-gradient(90deg, #fe5000 0%, rgba(254, 80, 0, 0) 100%);
  }

  .benefit_m__pill {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(187.2 * var(--preorder-unit-mo));
    height: calc(48 * var(--preorder-unit-mo));
    border: calc(2 * var(--preorder-unit-mo)) solid #3ba965;
    border-radius: calc(80 * var(--preorder-unit-mo));
    font-family: "Onemobile", "Mont", sans-serif;
    font-weight: 700;
    font-size: calc(24 * var(--preorder-unit-mo));
    letter-spacing: -0.02em;
    color: #3ba965;
    white-space: nowrap;
  }

  .benefit_m__copy-s { font-size: calc(28 * var(--preorder-unit-mo)); line-height: 1.3; }
  .benefit_m__copy-l { font-size: calc(40 * var(--preorder-unit-mo)); line-height: 1.3; }

  /* --- 혜택 1 --- */
  /* 내보낸 원본 155x186 (Figma 카드 기준 x:86.7 / y:55.5) */
  .benefit_m__card1-visual {
    position: absolute;
    left: calc(171.4 * var(--preorder-unit-mo));
    top: calc(109 * var(--preorder-unit-mo));
    width: calc(310 * var(--preorder-unit-mo));
    max-width: none;
  }
  .benefit_m__card1-pill {
    left: 50%;
    transform: translateX(-50%);
    top: calc(528.25 * var(--preorder-unit-mo));
  }
  .benefit_m__card1-copy {
    position: absolute;
    left: calc(327 * var(--preorder-unit-mo));
    top: calc(652 * var(--preorder-unit-mo));
    transform: translate(-50%, -50%);
    font-family: "Onemobile", "Mont", sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
  }
  .benefit_m__card1-old-num,
  .benefit_m__card1-old-won,
  .benefit_m__card1-new-num,
  .benefit_m__card1-new-won {
    position: absolute;
    transform: translate(-50%, -50%);
    line-height: 1.4;
    white-space: nowrap;
  }
  .benefit_m__card1-old-num {
    left: calc(188.5 * var(--preorder-unit-mo));
    top: calc(752 * var(--preorder-unit-mo));
    font-size: calc(43 * var(--preorder-unit-mo));
    letter-spacing: -0.04em;
    color: #ffffff;
    opacity: 0.4;
  }
  .benefit_m__card1-old-won {
    left: calc(264.1 * var(--preorder-unit-mo));
    top: calc(753.1 * var(--preorder-unit-mo));
    font-family: "Onemobile", "Mont", sans-serif;
    font-weight: 700;
    font-size: calc(25.5 * var(--preorder-unit-mo));
    letter-spacing: -0.02em;
    color: #ffffff;
    opacity: 0.4;
  }
  .benefit_m__card1-strike {
    position: absolute;
    left: calc(113 * var(--preorder-unit-mo));
    top: calc(750.4 * var(--preorder-unit-mo));
    width: calc(174.9 * var(--preorder-unit-mo));
    height: calc(2 * var(--preorder-unit-mo));
    background: #ffffff;
    opacity: 0.4;
  }
  .benefit_m__card1-new-num {
    left: calc(406.2 * var(--preorder-unit-mo));
    top: calc(751 * var(--preorder-unit-mo));
    font-size: calc(70.5 * var(--preorder-unit-mo));
    letter-spacing: -0.04em;
    /* PC(.benefit__card1-new-num)와 동일하게 숫자만 #FE5000 */
    color: #fe5000;
  }
  .benefit_m__card1-new-won {
    left: calc(524.3 * var(--preorder-unit-mo));
    top: calc(757.8 * var(--preorder-unit-mo));
    font-family: "Onemobile", "Mont", sans-serif;
    font-weight: 700;
    font-size: calc(30.6 * var(--preorder-unit-mo));
    letter-spacing: -0.02em;
    color: #3ba965;
  }

  /* --- 혜택 2 --- */
  /* 내보낸 원본 213x195 (Figma 카드 기준 x:53.9 / y:52.5) */
  .benefit_m__card2-visual {
    position: absolute;
    left: calc(105.9 * var(--preorder-unit-mo));
    top: calc(103 * var(--preorder-unit-mo));
    width: calc(426 * var(--preorder-unit-mo));
    max-width: none;
  }
  .benefit_m__card2-pill {
    left: 50%;
    transform: translateX(-50%);
    top: calc(460 * var(--preorder-unit-mo));
  }
  .benefit_m__card2-copy {
    position: absolute;
    left: calc(328 * var(--preorder-unit-mo));
    top: calc(583 * var(--preorder-unit-mo));
    transform: translate(-50%, -50%);
    font-family: "Onemobile", "Mont", sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
  }
  .benefit_m__card2-divider {
    position: absolute;
    top: calc(649 * var(--preorder-unit-mo));
    width: calc(1.5 * var(--preorder-unit-mo));
    height: calc(150 * var(--preorder-unit-mo));
    background: rgba(255, 255, 255, 0.3);
  }
  .benefit_m__card2-divider--1 { left: calc(65 * var(--preorder-unit-mo)); }
  .benefit_m__card2-divider--2 { left: calc(240.2 * var(--preorder-unit-mo)); }
  .benefit_m__card2-divider--3 { left: calc(415.4 * var(--preorder-unit-mo)); }
  .benefit_m__card2-divider--4 { left: calc(590.7 * var(--preorder-unit-mo)); }
  .benefit_m__card2-ico { position: absolute; max-width: none; }
  .benefit_m__card2-ico--1 { left: calc(135.7 * var(--preorder-unit-mo)); top: calc(669.9 * var(--preorder-unit-mo)); width: calc(34.3 * var(--preorder-unit-mo)); }
  .benefit_m__card2-ico--2 { left: calc(307 * var(--preorder-unit-mo)); top: calc(666.8 * var(--preorder-unit-mo)); width: calc(41.6 * var(--preorder-unit-mo)); }
  .benefit_m__card2-ico--3 { left: calc(488.7 * var(--preorder-unit-mo)); top: calc(666.6 * var(--preorder-unit-mo)); width: calc(27.3 * var(--preorder-unit-mo)); }
  .benefit_m__card2-feat {
    position: absolute;
    transform: translateX(-50%);
    font-family: "Onemobile", "Mont", sans-serif;
    font-weight: 400;
    font-size: calc(24 * var(--preorder-unit-mo));
    line-height: 1.25;
    letter-spacing: -0.03em;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
  }
  .benefit_m__card2-feat--1 { left: calc(153.2 * var(--preorder-unit-mo)); top: calc(725.2 * var(--preorder-unit-mo)); }
  .benefit_m__card2-feat--2 { left: calc(328.4 * var(--preorder-unit-mo)); top: calc(724.3 * var(--preorder-unit-mo)); }
  .benefit_m__card2-feat--3 { left: calc(503.4 * var(--preorder-unit-mo)); top: calc(724 * var(--preorder-unit-mo)); line-height: 1.2; }
  .benefit_m__card2-off {
    font-weight: 400;
    font-size: calc(27 * var(--preorder-unit-mo));
  }

  /* --- 혜택 3 --- */
  .benefit_m__card3-item {
    position: absolute;
    top: calc(144.8 * var(--preorder-unit-mo));
    width: calc(184.6 * var(--preorder-unit-mo));
    height: calc(307.6 * var(--preorder-unit-mo));
    border-radius: calc(10.4 * var(--preorder-unit-mo));
    background: linear-gradient(to bottom, #ffffff 0%, #dbdbdb 100%);
    box-shadow: calc(-8.5 * var(--preorder-unit-mo)) 0 calc(10.6 * var(--preorder-unit-mo)) 0 rgba(0, 0, 0, 0.25);
  }
  .benefit_m__card3-item--1 { left: calc(40.4 * var(--preorder-unit-mo)); top: calc(145.2 * var(--preorder-unit-mo)); }
  .benefit_m__card3-item--2 { left: calc(235.7 * var(--preorder-unit-mo)); }
  .benefit_m__card3-item--3 { left: calc(430.9 * var(--preorder-unit-mo)); }
  .benefit_m__card3-item-img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: none;
  }
  .benefit_m__card3-item--1 .benefit_m__card3-item-img { top: calc(61.3 * var(--preorder-unit-mo)); width: calc(161.9 * var(--preorder-unit-mo)); }
  .benefit_m__card3-item--2 .benefit_m__card3-item-img { top: calc(37.1 * var(--preorder-unit-mo)); width: calc(139 * var(--preorder-unit-mo)); }
  .benefit_m__card3-item--3 .benefit_m__card3-item-img { top: calc(64.7 * var(--preorder-unit-mo)); width: calc(153.5 * var(--preorder-unit-mo)); }
  .benefit_m__card3-item-txt {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Onemobile", "Mont", sans-serif;
    font-weight: 700;
    font-size: calc(19.5 * var(--preorder-unit-mo));
    line-height: 1.25;
    letter-spacing: -0.05em;
    color: #1b1b1b;
    text-align: center;
    white-space: nowrap;
  }
  .benefit_m__card3-item--1 .benefit_m__card3-item-txt { top: calc(191.7 * var(--preorder-unit-mo)); }
  .benefit_m__card3-item--2 .benefit_m__card3-item-txt { top: calc(201.9 * var(--preorder-unit-mo)); }
  .benefit_m__card3-item--3 .benefit_m__card3-item-txt { top: calc(201.9 * var(--preorder-unit-mo)); }
  .benefit_m__card3-item-count {
    display: block;
    margin-top: calc(5.8 * var(--preorder-unit-mo));
    letter-spacing: -0.03em;
  }
  .benefit_m__card3-badge {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(57.6 * var(--preorder-unit-mo));
    height: calc(57.6 * var(--preorder-unit-mo));
    border-radius: 50%;
    background: #fe5000;
    font-family: "Onemobile", "Mont", sans-serif;
    font-weight: 700;
    font-size: calc(13.3 * var(--preorder-unit-mo));
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-align: center;
  }
  .benefit_m__card3-badge--1 { left: calc(152.8 * var(--preorder-unit-mo)); top: calc(172.7 * var(--preorder-unit-mo)); }
  .benefit_m__card3-badge--2 { left: calc(348 * var(--preorder-unit-mo)); top: calc(172.3 * var(--preorder-unit-mo)); }
  .benefit_m__card3-badge--3 { left: calc(543.3 * var(--preorder-unit-mo)); top: calc(172.3 * var(--preorder-unit-mo)); }
  .benefit_m__card3-pill {
    left: 50%;
    transform: translateX(-50%);
    top: calc(513 * var(--preorder-unit-mo));
  }
  .benefit_m__card3-copy {
    position: absolute;
    left: 50%;
    top: calc(686 * var(--preorder-unit-mo));
    transform: translate(-50%, -50%);
    font-family: "Onemobile", "Mont", sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
  }
  .benefit_m__card3-copy .benefit_m__copy-s { display: inline-block; margin-bottom: calc(10 * var(--preorder-unit-mo)); }

  /* --- 하단 각주 --- */
  .benefit_m__footnote {
    position: absolute;
    left: calc(47.5 * var(--preorder-unit-mo));
    bottom: calc(60 * var(--preorder-unit-mo));
    font-size: calc(20 * var(--preorder-unit-mo));
    line-height: 1.25;
    letter-spacing: -0.03em;
    color: #ffffff;
    white-space: nowrap;
  }
}

/* ==========================================================================
   #device — 스크롤락 + 씬 단계 재생 (hpp_preorder_device.js)
   진입: 스크롤이 섹션 top 도달 시 스냅 + 잠금
   씬1(자동): 파동 유지 / 스틱 fadeIn(Y:180) -> 하강(Y:280) -> 정지
   씬2(스크롤 다운): is-clear(파동+스틱 fadeOut) -> is-shot-2(2배 디바이스
       Y:494->102 슬라이드업) -> is-display-ready(게이지 clip-path 0->100)
       + is-copy-2(카피 교체) -> 정지
   씬3(스크롤 다운): is-shot-full(디바이스 2배 -> 원본 156x844 축소, 게이지 동반
       축소 + fadeOut) + is-copy-3(카피3 + 텍스트 블록 상향)
       -> is-final-1(display_boost 점등)
       -> is-cards(디바이스 왼쪽에 EasyView 카드 2장 페이드인 = 첨부 시안 배치)
       -> is-card-1(STANDARD 카드가 오른쪽 디스플레이 위로 올라탐, 아웃라인 카드는
          앞자리로 전진) + is-final-2(display_standard 교체)
       -> is-card-2(아웃라인 카드가 같은 자리로 올라탐) + is-final-3(display_clean 교체)
       -> 스크롤 해제
   ※ 카드는 "디바이스 위로" 올라타야 하므로 z-index 3(= shot-mask 보다 앞).
   ========================================================================== */
#device.preorder__section {
  --device-stage-scale: calc(100vw / 1920 / 1px);
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1008;
  overflow: hidden;
  background: #000000 url("/content/dam/glo-kr/mcs/images/event/hyperproplus/preorder/device_bg.jpg") no-repeat center center / cover;
}

.device__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1008px;
  transform: translate(-50%, -50%) scale(var(--device-stage-scale));
}

.device__wave {
  position: absolute;
  left: 105px;
  top: 112px;
  width: 857px;
  height: 857px;
  /* 씬2 시작(is-clear) 시 스틱과 함께 fadeOut */
  transition: opacity 0.6s ease-in-out;
}
#device.is-clear .device__wave {
  opacity: 0;
}
.device__wave-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  animation: deviceWaveRipple 3.2s ease-out infinite;
}
.device__wave-ring--1 {
  width: 305px;
  height: 305px;
  animation-delay: 0s;
}
.device__wave-ring--2 {
  width: 437px;
  height: 437px;
  animation-delay: 0.8s;
}
.device__wave-ring--3 {
  width: 611px;
  height: 611px;
  animation-delay: 1.6s;
}
.device__wave-ring--4 {
  width: 857px;
  height: 857px;
  animation-delay: 2.4s;
}
@keyframes deviceWaveRipple {
  0% {
    transform: translate(-50%, -50%) scale(0.3);
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  70% {
    opacity: 0.25;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}

/* 스틱: 씬1에서 Y:180에 fadeIn -> Y:280으로 하강 후 정지, 씬2(is-clear)에서 fadeOut */
.device__stick {
  position: absolute;
  left: 451px;
  top: 180px;
  width: 180px;
  height: 324px;
  max-width: none;
  opacity: 0;
  z-index: 4;
  transition: opacity 0.6s ease-in-out;
}
#device.is-stick .device__stick {
  opacity: 1;
}
#device.is-stick-move .device__stick {
  top: 280px;
  transition: opacity 0.6s ease-in-out, top 1s ease-in-out;
}
#device.is-clear .device__stick {
  opacity: 0;
}

.device__shot-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.device__shot-full {
  position: absolute;
  left: 380px;
  top: 494px;
  width: 312px;
  height: 1688px;
  max-width: none;
  transition: top 1.2s ease-in-out, left 1.2s ease-in-out, width 1.2s ease-in-out, height 1.2s ease-in-out;
}
#device.is-shot-2 .device__shot-full {
  top: 102px;
}
#device.is-shot-full .device__shot-full {
  left: 458px;
  top: 105px;
  width: 156px;
  height: 844px;
}

/* 예열 게이지: display_border(고정 틀) + display_done(clip-path로 0->100 차오름) */
.device__display-border,
.device__display-done {
  position: absolute;
  left: 520px;
  top: 590px;
  width: 36px;
  height: 260px;
  max-width: none;
  opacity: 0;
  z-index: 3;
  transition: opacity 0.5s ease-in-out,
              left 1.2s ease-in-out, top 1.2s ease-in-out,
              width 1.2s ease-in-out, height 1.2s ease-in-out;
}
.device__display-done {
  clip-path: inset(100% 0 0 0);
  transition: opacity 0.5s ease-in-out, clip-path 1.2s ease-in-out,
              left 1.2s ease-in-out, top 1.2s ease-in-out,
              width 1.2s ease-in-out, height 1.2s ease-in-out;
}
#device.is-display-ready .device__display-border { opacity: 1; }
#device.is-display-ready .device__display-done {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}
/* 씬3 진입: 디바이스가 원본 크기로 줄어들 때 게이지도 같은 비율로 따라 줄면서 사라진다.
   (디바이스만 줄고 게이지가 그대로면 화면 밖에 떠 있는 것처럼 보인다)
   ※ is-display-ready 규칙과 명시도가 같으므로 반드시 그 아래에 와야 한다. */
#device.is-shot-full .device__display-border,
#device.is-shot-full .device__display-done {
  left: 528px;
  top: 349px;
  width: 18px;
  height: 130px;
  opacity: 0;
}
#device.is-final-1 .device__display-border,
#device.is-final-1 .device__display-done { opacity: 0; }

/* 씬3 디스플레이 시퀀스: boost -> standard -> clean
   디바이스가 원본 크기(156x844, X:458 Y:105)로 줄어든 뒤의 디스플레이 창
   (X:494~578, Y:327~507) 중심 X:536 Y:417 에 가운데(middle) 정렬,
   0.8s 크로스페이드 + 미세 스케일(0.9->1)로 자연스럽게 교체 */
.device__display-fseq {
  position: absolute;
  left: 536px;
  top: 417px;
  transform: translate(-50%, -50%) scale(0.9);
  max-width: none;
  opacity: 0;
  z-index: 3;
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}
.device__display-boost { width: 15px; }
.device__display-standard { width: 9px; }
.device__display-clean { width: 21px; }
#device.is-final-1 .device__display-boost,
#device.is-final-2 .device__display-standard,
#device.is-final-3 .device__display-clean {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
#device.is-final-2 .device__display-boost,
#device.is-final-3 .device__display-standard {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
}

/* --- 우측 텍스트 락업 (피그마 motion-1~3 공통) ---
   락업/타이틀 그래픽은 main_lockup.png(w278)/main_title.png(w407) 재활용.
   서브카피(62px)는 씬별 3종을 같은 자리에 겹쳐두고 --1만 표시.
   이후 모션 연결 시 JS에서 opacity 토글로 교체(전환 transition 준비됨). */
.device__title {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}
.device__title-lockup {
  position: absolute;
  left: 912px;
  top: 387px;
  width: 278px;
  max-width: none;
}
.device__title-img {
  position: absolute;
  left: 913px;
  top: 455.31px;
  width: 407px;
  max-width: none;
}
.device__copy {
  position: absolute;
  left: 913px;
  top: 540px;
  margin: 0;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 62px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #ffffff;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.device__copy--1 { opacity: 1; }
.device__copy-en {
  font-family: "Mont", "Onemobile", sans-serif;
  font-weight: 600;
}

/* --- EasyView 카드 (display_box2/3, 피그마 motion-3) ---
   배치(is-cards): 디바이스(원본 크기 X:458~614) 왼쪽에 두 장이 나란히 —
     아웃라인 카드(box3) X:255.17, STANDARD 카드(box2) X:354.01, Y:327(디스플레이 창 상단과 동일선).
   이동: 디바이스에 가까운 STANDARD 카드부터 하나씩 오른쪽으로 이동해 디스플레이
     창(X:501.5 = 494 + (84-68.88)/2) 위로 올라타고, 도착 직전에 빠르게 페이드아웃되며
     그 자리에 display_standard / display_clean 이 켜진다.
     앞 카드가 떠나면 뒤 카드가 앞자리(X:354.01)로 전진한다.
   ※ 착지 좌표(501.5, 327)의 중심은 (535.9, 419.5) = 디스플레이 창 중심(536, 417).
   ※ "디바이스 위로" 올라타야 하므로 z-index:3 (shot-mask 보다 앞). */
.device__card {
  position: absolute;
  top: 327.27px;
  width: 68.88px;
  height: 185px;
  max-width: none;
  opacity: 0;
  z-index: 3;
  transition: left 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
              top 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.45s ease-in-out;
}
.device__card--std { left: 354.01px; }
.device__card--outline { left: 255.17px; top: 326.51px; }

/* 등장: 정위치에서 페이드인(첨부 시안 배치) — 아웃라인 카드는 0.18s 뒤따라 */
#device.is-cards .device__card { opacity: 1; }
#device.is-cards .device__card--outline { transition-delay: 0s, 0s, 0.18s; }

/* 1단계: STANDARD 카드가 디스플레이 위로 올라타고, 아웃라인 카드는 앞자리로 전진 */
#device.is-card-1 .device__card--std {
  left: 501.5px;
  top: 327px;
  opacity: 0;
  /* 이동은 감속(ease-out), 소멸은 도착 직전에 짧고 빠르게(ease-in)
     페이드아웃 0.22s@0.68s -> 0.14s@0.76s 로 더 짧게 (끝나는 시점 0.9s 는 그대로) */
  transition: left 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
              top 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.14s ease-in 0.76s;
}
#device.is-card-1 .device__card--outline {
  left: 354.01px;
  top: 327.27px;
  transition-delay: 0s, 0s, 0s;
}

/* 2단계: 아웃라인 카드가 같은 자리에서 같은 방식으로 올라탄다 */
#device.is-card-2 .device__card--outline {
  left: 501.5px;
  top: 327px;
  opacity: 0;
  transition: left 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
              top 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 0.14s ease-in 0.76s;
}

/* --- 씬별 카피 교체 ---
   is-copy-2(예열 게이지 등장 시): 카피1 -> 카피2
   is-copy-3(씬3 시작 시): 카피2 -> 카피3 + 텍스트 블록 상향
   (씬3은 2줄 카피라 락업 Y387->347, 타이틀 Y455.31->415.36, 카피3 Y510 고정) */
#device.is-copy-2 .device__copy--1 { opacity: 0; }
#device.is-copy-2 .device__copy--2 { opacity: 1; }
#device.is-copy-3 .device__copy--2 { opacity: 0; }
#device.is-copy-3 .device__copy--3 { opacity: 1; }
.device__copy--3 { top: 510px; }
.device__title-lockup,
.device__title-img {
  transition: top 0.5s ease-in-out;
}
#device.is-copy-3 .device__title-lockup { top: 347px; }
#device.is-copy-3 .device__title-img { top: 415.36px; }

/* 성인 고지(.device__legal)의 실제 스타일은 preorder.html 에 inline 으로 작성돼 있다.
   inline style 이 일반 CSS 규칙을 이기므로, 여기서는 값이 아니라 변수만 넘긴다.
   씬3 진입 시 카피3와 함께 페이드인. */
#device.is-copy-3 .device__legal { --dlegal-o: 1; }

/* 카피3 PC/MO 문구 분리 (MO: "EasyView™ 스크린으로 간편한 컨트롤") */
.device__copy-mo { display: none; }

@media (max-width: 750px) {
  /* MO: 피그마 mo3-1~3(375x600) x2 = 750x1200 단위.
     동일 DOM/클래스에 좌표만 MO 기준으로 재배치 — 타이틀은 좌상단(X:80 Y:100~),
     디바이스는 중앙 하단에서 시작해 동일 시퀀스로 재생. */
  #device.preorder__section {
    --preorder-unit-mo: 0.133333vw;
    aspect-ratio: 750 / 1200;
  }
  .device__stage {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }

  /* 파동 (mo3-1: 그룹 391.24 -> 782.5, X:-16 Y:380) */
  .device__wave {
    left: calc(-16 * var(--preorder-unit-mo));
    top: calc(380 * var(--preorder-unit-mo));
    width: calc(782.5 * var(--preorder-unit-mo));
    height: calc(782.5 * var(--preorder-unit-mo));
  }
  .device__wave-ring--1 { width: calc(277.3 * var(--preorder-unit-mo)); height: calc(277.3 * var(--preorder-unit-mo)); }
  .device__wave-ring--2 { width: calc(398.1 * var(--preorder-unit-mo)); height: calc(398.1 * var(--preorder-unit-mo)); }
  .device__wave-ring--3 { width: calc(557.3 * var(--preorder-unit-mo)); height: calc(557.3 * var(--preorder-unit-mo)); }
  .device__wave-ring--4 { width: calc(782.5 * var(--preorder-unit-mo)); height: calc(782.5 * var(--preorder-unit-mo)); }

  /* 스틱 (mo3-1: 164.7x296.1, X:301.3 — Y:333.8 fadeIn -> Y:533.8 하강) */
  .device__stick {
    left: calc(301.3 * var(--preorder-unit-mo));
    top: calc(333.8 * var(--preorder-unit-mo));
    width: calc(164.7 * var(--preorder-unit-mo));
    height: calc(296.1 * var(--preorder-unit-mo));
  }
  #device.is-stick-move .device__stick { top: calc(533.8 * var(--preorder-unit-mo)); }

  /* 디바이스 (mo3-1 시작: 284.7x1536.5 X:236 Y:732.5 ->
     mo3-2 상승: Y:396.8 -> mo3-3 최종: 231.8x1250.7 X:402.3 Y:420.6) */
  .device__shot-full {
    left: calc(236 * var(--preorder-unit-mo));
    top: calc(732.5 * var(--preorder-unit-mo));
    width: calc(284.7 * var(--preorder-unit-mo));
    height: calc(1536.5 * var(--preorder-unit-mo));
  }
  #device.is-shot-2 .device__shot-full { top: calc(396.8 * var(--preorder-unit-mo)); }
  #device.is-shot-full .device__shot-full {
    left: calc(402.3 * var(--preorder-unit-mo));
    top: calc(420.6 * var(--preorder-unit-mo));
    width: calc(231.8 * var(--preorder-unit-mo));
    height: calc(1250.7 * var(--preorder-unit-mo));
  }

  /* 예열 게이지 (mo3-2: 32.2x236.4 X:363 Y:838.9 — PC 대비 0.894배) */
  .device__display-border,
  .device__display-done {
    left: calc(363 * var(--preorder-unit-mo));
    top: calc(838.9 * var(--preorder-unit-mo));
    width: calc(32.2 * var(--preorder-unit-mo));
    height: calc(236.4 * var(--preorder-unit-mo));
  }
  /* 씬3 진입: 디바이스가 줄어들 때 게이지도 같은 비율(0.8144)로 따라 줄면서 사라진다.
     ※ is-display-ready 규칙과 명시도가 같으므로 반드시 그 아래에 와야 한다. */
  #device.is-shot-full .device__display-border,
  #device.is-shot-full .device__display-done {
    left: calc(505.7 * var(--preorder-unit-mo));
    top: calc(780.6 * var(--preorder-unit-mo));
    width: calc(26.2 * var(--preorder-unit-mo));
    height: calc(192.5 * var(--preorder-unit-mo));
    opacity: 0;
  }

  /* 씬3 디스플레이 시퀀스: 축소된 디바이스(231.8x1250.7 X:402.3 Y:420.6)의
     디스플레이 창 중심(X:518.2 Y:883) 기준 가운데 정렬 */
  .device__display-fseq {
    left: calc(518.2 * var(--preorder-unit-mo));
    top: calc(883 * var(--preorder-unit-mo));
  }
  .device__display-boost { width: calc(21.9 * var(--preorder-unit-mo)); }
  .device__display-standard { width: calc(13.1 * var(--preorder-unit-mo)); }
  .device__display-clean { width: calc(30.5 * var(--preorder-unit-mo)); }

  /* EasyView 카드 (mo3-3: 102.2x274.5) — 디바이스 왼쪽 정위치에서 페이드인 후
     하나씩 오른쪽 디스플레이 창(X:467.1) 위로 올라탄다 */
  .device__card {
    top: calc(750.4 * var(--preorder-unit-mo));
    width: calc(102.2 * var(--preorder-unit-mo));
    height: calc(274.5 * var(--preorder-unit-mo));
  }
  .device__card--std { left: calc(247.9 * var(--preorder-unit-mo)); }
  .device__card--outline {
    left: calc(101.3 * var(--preorder-unit-mo));
    top: calc(749.2 * var(--preorder-unit-mo));
  }
  /* 1단계: STANDARD 카드가 디스플레이 위로, 아웃라인 카드는 앞자리로 전진 */
  #device.is-card-1 .device__card--std {
    left: calc(467.1 * var(--preorder-unit-mo));
    top: calc(750.4 * var(--preorder-unit-mo));
  }
  #device.is-card-1 .device__card--outline {
    left: calc(247.9 * var(--preorder-unit-mo));
    top: calc(750.4 * var(--preorder-unit-mo));
  }
  /* 2단계: 아웃라인 카드가 같은 자리로 올라탄다 */
  #device.is-card-2 .device__card--outline {
    left: calc(467.1 * var(--preorder-unit-mo));
    top: calc(750.4 * var(--preorder-unit-mo));
  }

  /* 타이틀: 좌상단 고정 (mo3-x 공통 X:80 Y:100/159.8/235.9, 씬3 상향 이동 없음) */
  .device__title-lockup {
    left: calc(80 * var(--preorder-unit-mo));
    top: calc(100 * var(--preorder-unit-mo));
    width: calc(243.2 * var(--preorder-unit-mo));
  }
  .device__title-img {
    left: calc(80.9 * var(--preorder-unit-mo));
    top: calc(159.8 * var(--preorder-unit-mo));
    width: calc(356.1 * var(--preorder-unit-mo));
  }
  .device__copy {
    left: calc(80.9 * var(--preorder-unit-mo));
    top: calc(235.9 * var(--preorder-unit-mo));
    font-size: calc(54 * var(--preorder-unit-mo));
  }
  .device__copy--3 { top: calc(235.9 * var(--preorder-unit-mo)); }
  #device.is-copy-3 .device__title-lockup { top: calc(100 * var(--preorder-unit-mo)); }
  #device.is-copy-3 .device__title-img { top: calc(159.8 * var(--preorder-unit-mo)); }

  /* 성인 고지 MO 좌표 — main_stage_m__legal(X:48, Y:1222) 과 같은 자리.
     ※ #main MO 스테이지는 750x1300, #device MO 스테이지는 750x1200 이라
       Y 를 1222 로 그대로 쓰면 섹션 밖(=잘림)이 된다. 화면상 같은 위치가 되도록
       하단 여백을 맞춘다: 1300-1222=78 -> 1200-78=1122.
     inline style 을 덮지 않도록 값이 아니라 변수만 넘긴다. */
  .device__legal {
    --dlegal-x: calc(48 * var(--preorder-unit-mo));
    --dlegal-y: calc(1122 * var(--preorder-unit-mo));
    --dlegal-fs: calc(24 * var(--preorder-unit-mo));
    --dlegal-fw: 500;
  }

  .device__copy-pc { display: none; }
  .device__copy-mo { display: inline; }
}

/* ==========================================================================
   #review — 피그마 236:4165(PC 1920x1008) / 236:4529(MO 375x600, x2 -> 750x1200)
   (기존 #event 리뉴얼)
   필요 이미지(export 대기):
     review_bg.jpg     PC 배경: 그린 그라디언트+파동+코인(폰 제외) 1920x1008
     review_bg_m.jpg   MO 배경: 동일 구성 375x600 (@2x 750x1200)
     review_phone.png  PC 폰 그룹(236:4179, 폰+겹치는 코인 포함) 1681.4x589 @1x
     review_phone_m.png MO 폰만(ta0165a9215 크롭 뷰) 325.3x180 @1x
   텍스트/뱃지(선착순 100명 원형)는 HTML+CSS.
   ========================================================================== */
#review.preorder__section {
  --review-stage-scale: calc(100vw / 1920 / 1px);
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1008;
  overflow: hidden;
  background: #000000 url("/content/dam/glo-kr/mcs/images/event/hyperproplus/preorder/review_bg.jpg") no-repeat center center / cover;
}

.review__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1008px;
  transform: translate(-50%, -50%) scale(var(--review-stage-scale));
}
.review__stage p { margin: 0; }

/* 폰 목업: PC는 코인 포함 그룹(우측 40px는 섹션 밖으로 클리핑됨) */
.review__stage img.review__phone--pc {
  position: absolute;
  left: 279.14px;
  top: 345.94px;
  width: 1681.43px;
  max-width: none;
}
.review__stage img.review__phone--mo { display: none; }

p.review__eyebrow {
  position: absolute;
  /* 중앙정렬은 translate 대신 left/right 0 + margin auto (reveal 과 무관하게 안정적)
     ※ `.review__stage p { margin:0 }` 을 이기려면 선택자에 p 가 필요하다. */
  left: 0;
  right: 0;
  width: max-content;
  margin: 0 auto;
  top: 150px;
  font-family: "Mont", "Onemobile", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: 0.28em;
  color: #fe5000;
  white-space: nowrap;
}
p.review__title {
  /* 중앙정렬을 transform에 의존하지 않도록 처리 (reveal의 인라인 transform과 충돌 방지)
     중심 Y:287 - (62px*1.3*2줄)/2 = top 206.4 */
  position: absolute;
  left: 0;
  right: 0;
  width: max-content;
  margin: 0 auto;
  top: 206.4px;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 62px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
}
/* 중앙정렬을 transform / translate 에 의존하지 않는다.
   reveal(GSAP)은 개별 속성 translate 까지 transform 으로 흡수하는데, 폰트 로드 전
   폭이 0으로 잡히면 -50% 보정이 0px 으로 굳어 왼쪽으로 밀린다.
   -> left/right 0 + margin auto 로 물리적 중앙정렬 (p.review__title 과 동일 패턴)
   중심 Y:424.62 - (26px*1.3)/2 = top 407.72
   ※ 선택자에 p 를 붙이는 이유: `.review__stage p { margin:0 }` 이 명시도 (0,1,1) 이라
     margin:0 auto 가 먹으려면 같은 명시도 + 뒤 순서여야 한다. */
p.review__period {
  position: absolute;
  left: 0;
  right: 0;
  width: max-content;
  margin: 0 auto;
  top: 407.72px;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #ffffff;
  white-space: nowrap;
}
.review__period-num {
  font-family: "Mont", "Onemobile", sans-serif;
  font-weight: 400;
}

.review__desc {
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.review__desc--pc {
  position: absolute;
  left: 445px;
  top: 676.5px;
  /* reveal(GSAP)이 transform 을 통째로 덮어써서 중앙정렬이 깨짐 -> 별도 속성 translate 로 분리 */
  translate: 0 -50%;
  text-align: left;
  white-space: nowrap;
}
.review__desc--mo { display: none; }
.review__desc-em { line-height: 2; }
.review__en-r {
  font-family: "Mont", "Onemobile", sans-serif;
  font-weight: 400;
}
.review__en-sb {
  font-family: "Mont", "Onemobile", sans-serif;
  font-weight: 600;
}
.review__orange {
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  color: #fe5000;
}

/* 선착순 100명 원형 뱃지 */
.review__badge {
  position: absolute;
  left: 1537.58px;
  top: 535.45px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 106.19px;
  height: 106.19px;
  border-radius: 50%;
  background: #fe5000;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 26.38px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-align: center;
}

@media (max-width: 750px) {
  /* MO: 피그마 375x600 -> x2 = 750x1200 단위 */
  /* 시안은 750x1200 이지만 콘텐츠가 하단에 바짝 붙어 보여서 섹션에만 50px 여백을 더한다.
     스테이지(=콘텐츠 좌표계)는 1200unit 을 그대로 유지하므로 요소 위치는 변하지 않고,
     늘어난 50px 만큼 배경만 아래로 더 깔린다. */
  #review.preorder__section {
    --preorder-unit-mo: 0.133333vw;
    aspect-ratio: auto;
    height: calc(1200 * var(--preorder-unit-mo) + 50px);
    background-image: url("/content/dam/glo-kr/mcs/images/event/hyperproplus/preorder/review_bg_m.jpg");
  }
  .review__stage {
    left: 0;
    top: 0;
    width: 100%;
    height: calc(1200 * var(--preorder-unit-mo));
    transform: none;
  }
  .review__stage img.review__phone--pc { display: none; }
  .review__stage img.review__phone--mo {
    display: block;
    position: absolute;
    left: calc(59 * var(--preorder-unit-mo));
    top: calc(464.7 * var(--preorder-unit-mo));
    width: calc(650.6 * var(--preorder-unit-mo));
    max-width: none;
  }
  /* ※ PC 규칙이 p.review__eyebrow(0,1,1) 이므로 MO 도 같은 명시도로 맞춘다. */
  p.review__eyebrow {
    top: calc(104 * var(--preorder-unit-mo));
    font-size: calc(24 * var(--preorder-unit-mo));
  }
  p.review__title {
    /* 중심 232.7 - (60*1.3*2줄)/2 = top 154.7 */
    top: calc(154.7 * var(--preorder-unit-mo));
    font-size: calc(60 * var(--preorder-unit-mo));
  }
  /* ※ PC 규칙이 p.review__period(0,1,1) 이므로 MO 도 같은 명시도로 맞춘다. */
  p.review__period {
    /* 중심 361 - (32*1.3)/2 = top 340.2 */
    top: calc(340.2 * var(--preorder-unit-mo));
    font-size: calc(32 * var(--preorder-unit-mo));
  }
  .review__desc--pc { display: none; }
  .review__desc--mo {
    display: block;
    position: absolute;
    left: 50%;
    top: calc(991 * var(--preorder-unit-mo));
  /* reveal(GSAP)이 transform 을 통째로 덮어써서 중앙정렬이 깨짐 -> 별도 속성 translate 로 분리 */
    translate: -50% -50%;
    font-size: calc(28 * var(--preorder-unit-mo));
    line-height: 1.4;
    letter-spacing: -0.04em;
    text-align: center;
    white-space: nowrap;
  }
  .review__badge {
    left: calc(484.65 * var(--preorder-unit-mo));
    top: calc(518.24 * var(--preorder-unit-mo));
    width: calc(111.35 * var(--preorder-unit-mo));
    height: calc(111.35 * var(--preorder-unit-mo));
    font-size: calc(27.66 * var(--preorder-unit-mo));
  }
}

/* ==========================================================================
   #notice — 피그마 236:4196(PC 1920 기준) / 236:4605(MO 375, x2 -> 750 단위)
   검정바(#262626, H:120) + #3C3C3C 본문에 유의사항 6그룹.
   바 전체가 토글 버튼, 본문은 max-height 트랜지션으로 slideUp/Down (기본 열림).
   ========================================================================== */
#notice.pr-notice {
  position: relative;
  width: 100%;
  background: #333333;
  overflow: hidden;
}

.pr-notice__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: calc(120 * var(--preorder-unit));
  padding: 0 calc(227 * var(--preorder-unit)) 0 calc(238 * var(--preorder-unit));
  border: 0;
  background: #262626;
  cursor: pointer;
}
.pr-notice__bar-left {
  display: flex;
  align-items: center;
  gap: calc(33 * var(--preorder-unit));
}
.pr-notice__icon {
  width: calc(50 * var(--preorder-unit));
  height: calc(50 * var(--preorder-unit));
  max-width: none;
}
.pr-notice__label {
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: calc(28 * var(--preorder-unit));
  line-height: 1;
  letter-spacing: -0.02em;
  color: #ffffff;
  white-space: nowrap;
}
/* 화살표: 열림 = 위(∧) 접힘 상태 대비 회전 트랜지션 */
.pr-notice__arrow {
  width: calc(50 * var(--preorder-unit));
  height: calc(50 * var(--preorder-unit));
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M13 30.5 25 18.5 37 30.5' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: transform 0.3s ease-in-out;
}
.pr-notice.is-closed .pr-notice__arrow {
  transform: rotate(180deg);
}

.pr-notice__body {
  overflow: hidden;
  transition: max-height 0.4s ease-in-out;
}
.pr-notice__inner {
  padding: calc(60 * var(--preorder-unit)) calc(227 * var(--preorder-unit)) calc(60 * var(--preorder-unit)) calc(227.55 * var(--preorder-unit));
}
.pr-notice__group {
  margin: 0 0 calc(40 * var(--preorder-unit));
}
.pr-notice__group:last-child { margin-bottom: 0; }
.pr-notice__group-title {
  margin: 0 0 calc(24 * var(--preorder-unit));
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: calc(28 * var(--preorder-unit));
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.pr-notice__list {
  margin: 0;
  padding: 0 0 0 calc(30 * var(--preorder-unit));
  list-style: disc;
}
.pr-notice__list li {
  font-weight: 400;
  font-size: calc(20 * var(--preorder-unit));
  line-height: 1.7;
  letter-spacing: -0.02em;
  color: #ffffff;
}

@media (max-width: 750px) {
  /* MO: 바 H:140(70x2), 아이콘 64, 라벨 36, 본문 패딩 36/48 */
  #notice.pr-notice {
    --preorder-unit-mo: 0.133333vw;
  }
  .pr-notice__bar {
    height: calc(140 * var(--preorder-unit-mo));
    padding: 0 calc(48 * var(--preorder-unit-mo));
  }
  .pr-notice__bar-left { gap: calc(20 * var(--preorder-unit-mo)); }
  .pr-notice__icon {
    width: calc(64 * var(--preorder-unit-mo));
    height: calc(64 * var(--preorder-unit-mo));
  }
  .pr-notice__label { font-size: calc(36 * var(--preorder-unit-mo)); }
  .pr-notice__arrow {
    width: calc(80 * var(--preorder-unit-mo));
    height: calc(80 * var(--preorder-unit-mo));
  }
  .pr-notice__inner {
    padding: calc(48 * var(--preorder-unit-mo)) calc(36 * var(--preorder-unit-mo));
  }
  .pr-notice__group { margin-bottom: calc(40 * var(--preorder-unit-mo)); }
  .pr-notice__group:last-child { margin-bottom: 0; }
  .pr-notice__group-title {
    margin-bottom: calc(24 * var(--preorder-unit-mo));
    font-size: calc(28 * var(--preorder-unit-mo));
    line-height: 1.3;
  }
  .pr-notice__list { padding-left: calc(40 * var(--preorder-unit-mo)); }
  .pr-notice__list li {
    font-size: calc(24 * var(--preorder-unit-mo));
    line-height: 1.6;
  }
}

/* ==========================================================================
   #promo — 피그마 236:4195(PC 1920x1008) / 236:4558(MO 375x626, x2 -> 750x1252)
   배경: foot_bg.png(1920x1008, 클린 KV) 재활용. 로고/락업/타이틀 그래픽은
   main 섹션 이미지(main_logo/main_lockup/main_title), 배지는 foot_wise 재활용.
   날짜 박스(#037236)/공식 출시/기간 라인/버튼/법적 문구는 HTML+CSS 텍스트.
   ========================================================================== */
#promo.preorder__section {
  --promo-stage-scale: calc(100vw / 1920 / 1px);
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1008;
  overflow: hidden;
  background: #000000 url("/content/dam/glo-kr/mcs/images/event/hyperproplus/preorder/foot_bg.png") no-repeat center center / cover;
}

.promo__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1008px;
  transform: translate(-50%, -50%) scale(var(--promo-stage-scale));
}
.promo__stage p { margin: 0; }

/* #promo PC 도 #main 과 동일 기준으로 통일:
   좌측 정렬 X:240(로고 88 / 락업 239.42 / 타이틀 236.93 / 날짜박스·기간 237 -> 전부 240),
   락업은 브랜드 가이드 576 x 77 로 확대(43.65 -> 77, +33.35).
   락업 하단이 356.65 -> 390 이 되므로 그 아래 블록 전체를 같은 +33.35 만큼 내려
   기존 간격(락업 하단 +21.35 -> 타이틀 …)을 유지한다:
     타이틀 378 -> 411.35 / 날짜박스 504.81 -> 538.16 / 날짜라벨 503.45 -> 536.8
     기간 597.07 -> 630.42 / CTA 651 -> 684.35(하단 738.35 / 스테이지 1008)
   날짜 라벨의 left 는 날짜박스와의 상대 간격(271.98)을 유지하도록 508.98 -> 511.98.
   우측 배지(.promo__wise)와 하단 법적문구(.promo__legal)는 좌측 정렬 대상이 아니라 무변경.
   모바일(@media max-width:750px)은 left/top/width 를 전부 재정의하고 있어 영향 없음. */
.promo__logo {
  position: absolute;
  left: 240px;
  top: 56.38px;
  width: 222.26px;
  max-width: none;
}
.promo__wise {
  position: absolute;
  left: 1498px;
  top: 78px;
  width: 346.16px;
  max-width: none;
}
.promo__lockup {
  position: absolute;
  left: 240px;
  top: 313px;
  width: 576px;
  max-width: none;
}
.promo__title-img {
  position: absolute;
  left: 240px;
  top: 411.35px;
  width: 562px;
  max-width: none;
}
/* 공식 출시일: #037236 박스(260x48) + Mont SemiBold 46 */
.promo__date-box {
  position: absolute;
  left: 240px;
  top: 538.16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 260px;
  height: 48px;
  background: #037236;
}
.promo__date-num {
  font-family: "Mont", "Onemobile", sans-serif;
  font-weight: 600;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #ffffff;
  white-space: nowrap;
}
.promo__date-label {
  position: absolute;
  left: 511.98px;
  top: 536.8px;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 47px;
  line-height: 48px;
  letter-spacing: -0.02em;
  color: #ffffff;
  white-space: nowrap;
}
.promo__period {
  position: absolute;
  left: 240px;
  top: 630.42px;
  /* reveal(GSAP)이 transform 을 통째로 덮어써서 중앙정렬이 깨짐 -> 별도 속성 translate 로 분리 */
  translate: 0 -50%;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  /* 데스크톱만 20 -> 30. 모바일은 아래 @media 에서 calc(24 * unit) 로 재정의되어 무영향.
     translate:-50% 세로 중앙정렬이라 top(630.42) 앵커는 그대로고 박스만 26 -> 39 로 커진다
     (610.92~649.92). 아래 CTA(684.35)와 34.43px 여유. */
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: #ffffff;
  white-space: nowrap;
}
.promo__period-num {
  font-family: "Mont", "Onemobile", sans-serif;
  font-weight: 700;
  letter-spacing: -0.016em;
}
.promo__btn {
  position: absolute;
  left: 240px;
  top: 684.35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 50px;
  border-radius: 51.52px;
  background: #fe5000;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
}
.promo__legal {
  position: absolute;
  left: 59px;
  bottom: 40px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #ffffff;
  white-space: nowrap;
}

@media (max-width: 750px) {
  /* MO: 피그마 375x626 -> x2 = 750x1252 단위. 로고는 MO 시안에 없음. */
  #promo.preorder__section {
    --preorder-unit-mo: 0.133333vw;
    aspect-ratio: 750 / 1252;
    background-image: url("/content/dam/glo-kr/mcs/images/event/hyperproplus/preorder/foot_bg_m.png");
  }
  .promo__stage {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }
  /* 로고(MO): 원래 "MO 시안에 없음"으로 숨기고 있었으나, #main 과 동일하게 노출한다.
     좌표/크기도 .main_stage_m__logo 와 완전히 동일(X:51.8 Y:32.76 W:128 -> 높이 90.13,
     하단 122.89). 다른 콘텐츠 정렬선(48)보다 3.8 안쪽인 것까지 #main 과 같다.
     숨김 규칙(.promo__stage img.promo__logo{display:none})은 제거했다 —
     .preorder__wrap img 의 display:block 이 그대로 적용된다. */
  .promo__logo {
    left: calc(51.8 * var(--preorder-unit-mo));
    top: calc(32.76 * var(--preorder-unit-mo));
    width: calc(128 * var(--preorder-unit-mo));
  }
  .promo__wise {
    left: calc(542.35 * var(--preorder-unit-mo));
    top: calc(38 * var(--preorder-unit-mo));
    width: calc(172 * var(--preorder-unit-mo));
  }
  /* 로고가 들어오면서 락업 시작점(120)이 로고 하단(122.89)에 2.89 침범당하므로,
     락업 이하 콘텐츠를 통째로 **+23** 내렸다. 로고~락업 간격은 20.11 로,
     #main 의 39.89 보다 좁게 잡아 promo 하단(배경 디바이스 비주얼)까지의 이동을
     최소화한 절충값이다(사용자 확정: "아래로 조금 이동하고 간격을 줄여줘").
       락업     120    -> 143      (하단 181.19)
       타이틀   176.97 -> 199.97   (하단 286.72)
       날짜박스 288.11 -> 311.11   / 날짜라벨 286.91 -> 309.91
       기간     383.57 -> 406.57
       CTA      443.57 -> 466.57   (하단 526.57 / 스테이지 1252)
     상단의 로고·배지와 하단 법적문구(1192)는 이동 대상이 아니다. */
  .promo__lockup {
    left: calc(50.15 * var(--preorder-unit-mo));
    top: calc(143 * var(--preorder-unit-mo));
    width: calc(286.2 * var(--preorder-unit-mo));
  }
  .promo__title-img {
    left: calc(48 * var(--preorder-unit-mo));
    top: calc(199.97 * var(--preorder-unit-mo));
    width: calc(492.5 * var(--preorder-unit-mo));
  }
  .promo__date-box {
    left: calc(48 * var(--preorder-unit-mo));
    top: calc(311.11 * var(--preorder-unit-mo));
    width: calc(227.87 * var(--preorder-unit-mo));
    height: calc(42.07 * var(--preorder-unit-mo));
  }
  .promo__date-num { font-size: calc(40 * var(--preorder-unit-mo)); }
  .promo__date-label {
    left: calc(286.37 * var(--preorder-unit-mo));
    top: calc(309.91 * var(--preorder-unit-mo));
    font-size: calc(46 * var(--preorder-unit-mo));
    line-height: calc(42.07 * var(--preorder-unit-mo));
  }
  .promo__period {
    left: calc(48 * var(--preorder-unit-mo));
    top: calc(406.57 * var(--preorder-unit-mo));
    font-size: calc(24 * var(--preorder-unit-mo));
  }
  .promo__btn {
    left: calc(48 * var(--preorder-unit-mo));
    top: calc(466.57 * var(--preorder-unit-mo));
    height: calc(60 * var(--preorder-unit-mo));
    padding: 0;
    width: calc(244 * var(--preorder-unit-mo));
    border-radius: calc(1000 * var(--preorder-unit-mo));
    font-size: calc(28 * var(--preorder-unit-mo));
  }
  .promo__legal {
    left: calc(48 * var(--preorder-unit-mo));
    bottom: auto;
    top: calc(1192 * var(--preorder-unit-mo));
    font-size: calc(20 * var(--preorder-unit-mo));
  }
}