@charset "UTF-8";

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

/* ==========================================================================
   글로 하이퍼프로+ 멤버 전용 혜택(member_benefit)
   - 코드네임 : benefit  (.benefit__wrap / --benefit-unit)
   - 단위 체계(프로젝트 공통, CLAUDE.md §1 / §10)
       PC  --benefit-unit    : 1920 기준 1px = min(0.0520833vw, 1px)
       MO  --benefit-unit-mo : 시안 375 기준 x2 -> 750 단위 1unit = 0.133333vw
     ※ MO 시안은 375px 기준(사용자 확인 완료). 시안 좌표/폰트는 전부 x2 해서
       750 단위로 환산한 값을 calc() 에 넣는다. 아래 주석의 "(375: N)" 이 원본값.
   - PC 는 1920 고정 px 스테이지를 scale() 로 축소(#main 등 preorder 와 동일 패턴),
     MO 는 750 단위 calc().
   - 이미지 경로 : /content/dam/glo-kr/mcs/images/event/hyperproplus/member_benefit//
   - 섹션 : #main / #event / #benefit / #notice

   ※ [TODO-실측] 표시는 이미지 업로드 후 Pillow 로 .size 를 재보고 확정할 값이다
     (CLAUDE.md §7). 섹션 높이는 아래 0번 블록의 커스텀 프로퍼티 한 곳만 고치면
     aspect-ratio 와 스테이지 height 가 함께 따라간다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 스코프 & 리셋 & 페이지 상수 (전역 태그는 건드리지 않는다 — CLAUDE.md §1)
   -------------------------------------------------------------------------- */
.benefit__wrap {
  --benefit-unit: min(0.0520833vw, 1px);            /* PC 1920 기준 1px */
  /* MO 750 기준 1unit. 이 페이지의 MO 값은 전부 "시안 px x2" 로 넣는다.
     ⚠ 시안 기준폭을 375 로 보고 x2(=750) 체계를 쓰고 있다. 근거는 배경 export 가
       정확히 375x2 / 즉 main_bg_m 750x1200, benefit_bg_m 750x1490 이라는 점.
       만약 시안 기준폭이 350 이 맞다면 좌표를 다시 계산할 필요 없이 아래 한 줄만
       0.142857vw (= 100/700) 로 바꾸면 전체가 일관되게 재기준된다. */
  --benefit-unit-mo: 0.133333vw;
  --benefit-stage-scale: calc(100vw / 1920 / 1px);  /* PC 스테이지 축소 배율 */

  /* ---- PC 섹션 높이 (1920 기준 px) — 2026-08-11 이미지 실측 반영
     main   : main_bg.jpg 1920x1008 원본 그대로
     event  : 흰 배경(배경 이미지 없음) = box2 하단(1996) + 하단여백 190
     benefit: 배경이 늘어나는 그라데이션이라 콘텐츠 기준
              = 각주 하단(2204+28) + 하단여백 28 */
  --bf-main-h: 1008;
  --bf-event-h: 2186;
  --bf-benefit-h: 2260;

  /* PC event 박스 1번의 top. box2 / 섹션높이가 전부 여기서 파생된다.
     ⚠ 시안 원본은 box1:290 / box2:820 이었으나 event_box.png 실측이 1440x760 이라
       두 박스가 230px 겹치고, 인트로 3줄 하단(약 395)도 290 을 덮는다.
       -> box1 = 인트로 하단 + 51 = 446 (MO 간격 23@375 을 PC 배율 2.214 로 환산)
          box2 = 446 + 760 + 30 = 1236 (30px 간격 = benefit 카드와 동일 리듬)
       시안 값 재확인되면 이 숫자 하나만 바꾸면 된다. */
  --bf-evt-box1-top: 446;

  /* ---- MO 섹션 높이 (750 단위 = 375 시안 x2) — 이미지 실측 반영
     main   : main_bg_m.jpg  750x1200 원본 그대로
     event  : 배경 이미지가 없어 아래 --bf-mo-base 에서 역산 (1922 - 600 = 1322@375)
     benefit: benefit_bg_m.webp 750x1490 원본 그대로 */
  --bf-mo-main-h: 1200;      /* (375: 600) */
  --bf-mo-event-h: 2644;     /* (375: 1322) */
  --bf-mo-benefit-h: 1490;   /* (375: 745) */

  /* ---- MO benefit 섹션 Y 오프셋 (375 기준 누적 높이 = main + event)
     사용자가 준 MO benefit 좌표(1972 / 2106 / … / 2643)는 문서 전체 누적 기준이라
     이 값을 빼서 섹션 기준으로 환산한다 (CLAUDE.md §1).
     환산식 : top = calc((Y원본 - var(--bf-mo-base)) * 2 * var(--benefit-unit-mo))
     산출 근거 : benefit_bg_m.webp = 745@375. 각주(2643)+글자높이 12.6 이 이 안에
       들어와야 하므로 base >= 1911. 타이틀 오프셋이 딱 50 이 되는 1922 를 채택했고,
       이때 각주 하단이 745 중 733.6 (여백 11.4) 으로 자연스럽게 맞는다.
     ※ 이 값을 바꾸면 --bf-mo-event-h(= (base - 600) * 2) 도 같이 바꿔야 한다. */
  --bf-mo-base: 1922;

  position: relative;
  width: 100%;
  font-family: var(--font-en, "Mont"), var(--font-kr, "Onemobile"), sans-serif;
}
.benefit__wrap, .benefit__wrap * { box-sizing: border-box; }
.benefit__wrap img { max-width: 100%; display: block; }

/* ⚠ 예전에 있던 `.benefit__wrap p { margin: 0 }` 은 제거했다.
   이 규칙은 (0,1,1) 이라 `.evt__title { margin-top: 50px }` 같은 (0,1,0) 클래스
   규칙을 이겨서, GAP 용 margin-top 이 전부 0 으로 먹혀 인트로 줄간격이 사라졌다.
   대신 아래 각 p 클래스에서 margin 을 직접 선언한다 — 새 <p> 를 추가할 때는
   반드시 그 클래스에 margin 을 명시할 것(안 하면 브라우저 기본 1em 여백이 붙는다).
   같은 이유로 가운데 정렬용 margin 이 필요하면 `.benefit__wrap .클래스` (0,2,0)
   형태로 올려 쓴다. (launching 에서 재발한 함정) */

/* --------------------------------------------------------------------------
   1. 섹션 / 스테이지 공통
   -------------------------------------------------------------------------- */
.benefit__section {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: -1px; /* 리사이즈 중 섹션 사이 1px 틈 방지 — CLAUDE.md §2 */
}
.benefit__section:last-child { margin-bottom: 0; }

/* PC 스테이지 : 1920 고정 px 좌표계. 내부 요소는 리터럴 px 로 배치한다. */
.benefit__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  transform: translate(-50%, -50%) scale(var(--benefit-stage-scale));
  z-index: 1;
}

/* MO 스테이지 : 750 단위 좌표계. 내부 요소는 calc(N * var(--benefit-unit-mo)). */
.benefit_stage_m {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* PC/MO 토글 헬퍼 — img 는 리셋 규칙(0,0,2,0)을 이기도록 태그까지 명시 (CLAUDE.md §10) */
.benefit__wrap .benefit__mo-only,
.benefit__wrap img.benefit__mo-only { display: none; }

/* 가운데 정렬 공통 (X:center) */
.benefit__cx {
  left: 50%;
  transform: translateX(-50%);
}

/* GAP 으로만 이어지는 텍스트 묶음은 절대좌표 대신 flow(margin-top)로 쌓는다.
   -> 줄바꿈 수가 달라져도 아래 요소가 자동으로 밀린다. */
.benefit__flow {
  position: absolute;
  left: 0;
  width: 100%;
}

/* ==========================================================================
   2. #main — 히어로
   PC : main_bg.webp (1920 x --bf-main-h)
   MO : main_bg_m.webp (750 x --bf-mo-main-h)
   ========================================================================== */
#main.benefit__section {
  aspect-ratio: 1920 / var(--bf-main-h);   /* main_bg.jpg 1920x1008 */
  background: #000000 url("/content/dam/glo-kr/mcs/images/event/hyperproplus/member_benefit/main_bg.jpg") no-repeat center center / cover;
}
.main__stage { height: calc(var(--bf-main-h) * 1px); }

.main__stage > * { position: absolute; }

/* glo_logo.png (195x138)  X:236 / Y:49 */
.main__logo { left: 236px; top: 49px; max-width: none; }

/* main_title.png (353x120)  X:236 / Y:438.65 */
.main__title { left: 236px; top: 438.65px; max-width: none; }

/* "멤버 전용 혜택"  X:236 / Y:550.95 / bold 113 / 120% / #FFFFFF */
.main__copy {
  margin: 0;
  left: 236px;
  top: 550.95px;
  font-weight: 700;
  font-size: 113px;
  line-height: 1.2;
  letter-spacing: 0;
  color: #ffffff;
  white-space: nowrap;
}

/* ==========================================================================
   3. #event — 멤버 전용 이벤트 (PC 배경 #FFFFFF)
   ========================================================================== */
#event.benefit__section {
  aspect-ratio: 1920 / var(--bf-event-h);
  background: #ffffff;
}
.evt__stage { height: calc(var(--bf-event-h) * 1px); }

/* ---- 인트로 3줄 : Y:150 에서 시작, 이후 GAP 으로 이어짐 ---- */
.evt__intro {
  top: 150px;
  text-align: center;
}
/* "EASY MISSION" bold 34 / 120% / 0% / #00B56E */
.evt__eyebrow {
  margin: 0;
  font-weight: 700;
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: 0;
  color: #00b56e;
}
/* "지금만 참여 가능한 멤버 전용 이벤트" GAP(50) / bold 62 / 130% / -2% / #000 */
.evt__title {
  margin: 50px 0 0;
  font-weight: 700;
  font-size: 62px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #000000;
}
/* "하이퍼 프로 플러스를 …" GAP(30) / regular 36 / 120% / -3% / #000 */
.evt__desc {
  margin: 30px 0 0;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #000000;
}

/* ---- 이벤트 박스 공통 : event_box.png 가 박스의 크기를 정한다.
   박스 내부 좌표(EVENT 01 X:120 / Y:200 등)는 박스 좌상단 (0,0) 기준. ---- */
.evt__box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1440px;   /* event_box.png 실측 1440x760 */
  height: 760px;
}
.benefit__wrap img.evt__box-bg { max-width: none; }
.evt__box > *:not(.evt__box-bg) { position: absolute; }

/* EVENT 01 / EVENT 02 라벨 : X:120 / Y:200 / heavy 26 / 130% / #FFF */
.evt__label {
  margin: 0;
  left: 120px;
  top: 200px;
  font-weight: 900;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: 0;
  color: #ffffff;
}
/* 라벨 아래 카피 묶음 : 라벨 하단 + GAP(18) 부터 flow 로 쌓는다.
   200 + 26*1.3 = 233.8 -> +18 = 251.8 */
.evt__copy {
  left: 120px;
  top: 251.8px;
  width: max-content;   /* .benefit__flow 의 width:100% 를 되돌린다 */
  text-align: left;
}
/* 큰 카피 bold 52 / 125% / -3% / #FFF (span = semibold) */
.evt__copy-title {
  margin: 0;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: #ffffff;
}
.evt__copy-title span { font-weight: 600; }
/* 작은 카피 GAP(18) / bold 32 / 130% / -3% / #FFF (span = semibold) */
.evt__copy-desc {
  margin: 18px 0 0;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: #ffffff;
}
.evt__copy-desc span { font-weight: 600; }

.evt__copy-sub {
  margin: 18px 0 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: #ffffff;
}

/* 버튼 : X:120 / 작은 카피 하단 + GAP(60)
   ※ 위치는 링크(<a>)가 갖는다. 안쪽 img 를 absolute 로 두면 <a> 가 기준이 되어 어긋난다.
   01) 251.8 + 52*1.25*2줄(130) + 18 + 32*1.3*2줄(83.2) = 483 -> +60 = 543
       event_btn1.png 230x53 -> 하단 596, event_img1 하단 594.44 와 거의 일치(검증 OK)
   02) 251.8 + 130 + 18 + 32*1.3*1줄(41.6) = 441.4 -> +60 = 501.4  [시안 좌표 없음, 01 미러링] */
.evt__btn { left: 120px; display: block; }
.benefit__wrap .evt__btn img { max-width: none; }
.evt__box--1 .evt__btn { top: 563px; }
.evt__box--2 .evt__btn { top: 521.4px; }

/* 비주얼 : 01) event_img1.png 570x522 / 02) event_img2.png 619x630(실측)
   좌표는 박스 내부 기준. (2026-08-11 사용자 지정값으로 교체)
   ⚠ event_img2.png 는 원본이 630 높이라 01(522)보다 21% 커 보였다.
     높이를 01 과 같은 522 로 맞추고 폭은 비율대로 따라가게 했다 (2026-08-12).
     619 x (522/630) = 512.86 -> 우측 끝이 780+512.9=1292.9 (01 은 1350). */
.evt__img { top: 80px; max-width: none; }
.evt__box--1 .evt__img { left: 780px; }
.evt__box--2 .evt__img { left: 780px; height: 522px; width: auto; }

/* ---- 박스 위치 (--bf-evt-box1-top 에서 파생) ---- */
.evt__box--1 { top: calc(var(--bf-evt-box1-top) * 1px); }
.evt__box--2 { top: calc((var(--bf-evt-box1-top) + 790) * 1px); }  /* 760(박스높이) + 30(간격) */

/* ==========================================================================
   4. #benefit — 멤버 전용 상시 혜택
   PC : benefit_bg.webp / MO : benefit_bg_m.webp
   ========================================================================== */
#benefit.benefit__section {
  /* benefit_bg.webp 는 3997x2250 짜리 단색 그린 그라데이션이라 원본 비율을 지킬
     필요가 없다. 100% 100% 로 섹션 크기에 맞춰 늘린다 (CLAUDE.md §2). */
  aspect-ratio: 1920 / var(--bf-benefit-h);
  background: #000000 url("/content/dam/glo-kr/mcs/images/event/hyperproplus/member_benefit/benefit_bg.webp") no-repeat center top / 100% 100%;
}
.bf__stage { height: calc(var(--bf-benefit-h) * 1px); }
.bf__stage > * { position: absolute; }

/* "멤버 전용 상시 혜택" X:center / Y:150 / bold 62 / 130% / -2% / #FFF */
.bf__title {
  margin: 0;
  top: 150px;
  font-weight: 700;
  font-size: 62px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
}
/* 서브카피 X:center / Y:251 / bold 36 / 130% / -2% / #FFF */
.bf__sub {
  margin: 0;
  top: 251px;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
}

/* benefit1~4.png (각 1440x393) : X:center / Y 423 간격 (= 393 + 30px 간격)

   ⚠ 카드 4장에 <a> 링크를 감싼 뒤 레이아웃이 깨졌다 (2026-08-12).
     원인은 위의 `.bf__stage > *  { position: absolute }` 다. 이 규칙은 "직계 자식"만
     잡으므로 <a> 로 감싼 순간 절대좌표를 받는 것은 <a> 이고(top/left 는 없음),
     정작 좌표를 가진 img 는 static 이 되어 top/left 가 통째로 무시된다.
     그 상태에서 .benefit__cx 의 transform: translateX(-50%) 만 살아남아
     카드가 왼쪽으로 반쯤 밀린 채 세로로 쌓였다.
     -> <a> 를 display:contents 로 레이아웃에서 지우고, img 가 직접 절대좌표를 갖게 한다.
        img 자체가 클릭 영역이므로 링크 동작에는 영향이 없고,
        <a> 없이 img 만 있는 경우에도 그대로 동작한다(양쪽 호환).
     ※ 이 페이지에서 `부모 > *` 로 position 을 주는 곳(.bf__stage / .bf_stage_m /
       .main_stage_m / .evt_stage_m)은 전부 같은 함정을 갖는다. 링크를 감쌀 때마다
       해당 요소에 position:absolute 를 직접 선언해 줄 것. */
.bf__stage > a { display: contents; }
.benefit__wrap img.bf__item { position: absolute; max-width: none; }
.bf__item--1 { top: 423px; }
.bf__item--2 { top: 846px; }
.bf__item--3 { top: 1269px; }
.bf__item--4 { top: 1692px; }

/* 각주
   ⚠ 시안 원본은 X:12 / Y:2643 / 9px 인데 MO 각주 스펙과 완전히 동일한 값이라
     PC 값이 아니라고 판단했다(1920 기준 9px 은 사실상 안 보이고, 카드가 2085 에서
     끝나는데 2643 은 558px 아래).
     -> Y: 2085(카드 하단) + 119 = 2204   (MO 의 카드하단→각주 27@375 을 PC 로 환산)
        font-size: 9 * 2.214 = 20         (MO 타이틀 28 : PC 62 배율)
        X: 12 * (1920/375) = 61           (화면 왼쪽 끝에서의 비율 유지)
     시안 확정되면 이 3개만 교체. */
.bf__note {
  margin: 0;
  left: 61px;
  top: 2204px;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.03em;
  color: #ffffff;
}

/* ==========================================================================
   5. #notice — 하단 유의사항 아코디언 (CLAUDE.md §6, preorder 와 동일 구조)
   검정바(#262626) 클릭 시 본문 slideUp/slideDown. 기본 열림.
   ※ 클래스명은 다른 페이지와 동일한 pr-notice 계열을 그대로 유지하고,
     단위만 이 페이지의 --benefit-unit / --benefit-unit-mo 로 바꿔 쓴다.
   ========================================================================== */
#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(--benefit-unit));
  padding: 0 calc(227 * var(--benefit-unit)) 0 calc(238 * var(--benefit-unit));
  border: 0;
  background: #262626;
  cursor: pointer;
}
.pr-notice__bar-left {
  display: flex;
  align-items: center;
  gap: calc(33 * var(--benefit-unit));
}
.pr-notice__icon {
  width: calc(50 * var(--benefit-unit));
  height: calc(50 * var(--benefit-unit));
  max-width: none;
}
.pr-notice__label {
  font-family: var(--font-kr, "Onemobile"), var(--font-en, "Mont"), sans-serif;
  font-weight: 700;
  font-size: calc(28 * var(--benefit-unit));
  line-height: 1;
  letter-spacing: -0.02em;
  color: #ffffff;
  white-space: nowrap;
}
/* 화살표: 열림 = 위(∧), 닫힘 = 180도 회전 */
.pr-notice__arrow {
  width: calc(50 * var(--benefit-unit));
  height: calc(50 * var(--benefit-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); }

/* max-height 트랜지션 컨테이너 — padding 은 내부 inner 가 갖는다 (CLAUDE.md §6) */
.pr-notice__body {
  overflow: hidden;
  transition: max-height 0.4s ease-in-out;
}
.pr-notice__inner {
  padding: calc(60 * var(--benefit-unit)) calc(227 * var(--benefit-unit)) calc(60 * var(--benefit-unit)) calc(227.55 * var(--benefit-unit));
}
.pr-notice__group { margin: 0 0 calc(40 * var(--benefit-unit)); }
.pr-notice__group:last-child { margin-bottom: 0; }
.pr-notice__group-title {
  margin: 0 0 calc(24 * var(--benefit-unit));
  font-family: var(--font-kr, "Onemobile"), var(--font-en, "Mont"), sans-serif;
  font-weight: 700;
  font-size: calc(28 * var(--benefit-unit));
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #ffffff;
}
.pr-notice__list {
  margin: 0;
  padding: 0 0 0 calc(30 * var(--benefit-unit));
  list-style: disc;
}
.pr-notice__list li {
  font-weight: 400;
  font-size: calc(20 * var(--benefit-unit));
  line-height: 1.7;
  letter-spacing: -0.02em;
  color: #ffffff;
}

/* ==========================================================================
   6. MO — 750 단위 (시안 375 x2)
   ========================================================================== */
@media (max-width: 750px) {

  .benefit__wrap .benefit__stage { display: none; }
  .benefit__wrap .benefit_stage_m { display: block; }

  .benefit__wrap .benefit__pc-only,
  .benefit__wrap img.benefit__pc-only { display: none; }
  .benefit__wrap .benefit__mo-only,
  .benefit__wrap img.benefit__mo-only { display: block; }

  /* ---------------------------------------------------------------- #main */
  #main.benefit__section {
    aspect-ratio: 750 / var(--bf-mo-main-h);   /* main_bg_m.jpg 750x1200 */
    background: #000000 url("/content/dam/glo-kr/mcs/images/event/hyperproplus/member_benefit/main_bg_m.jpg") no-repeat center center / cover;
  }
  /* ==========================================================================
     MO 이미지 원본 폭 (2026-08-11 Pillow 실측 — CLAUDE.md §7)
     MO 는 750 단위 좌표계라 이미지도 "원본 px * var(--benefit-unit-mo)" 로
     폭을 지정해야 뷰포트 폭에 맞게 축소된다. 이미지가 교체되면 재실측할 것.
     ========================================================================== */
  .benefit__wrap {
    /* ⚠ glo_logo_m / main_title_m 은 375 기준 1x 로 export 되어 있다(PC 자산보다 작다).
       750 단위계에 맞추려면 원본 px x2 를 써야 한다.
       고해상도 화면에서는 2배 확대라 흐려질 수 있으니 2x 재export 를 권장. */
    --w-logo-m:       calc(128 * var(--benefit-unit-mo)); /* glo_logo_m.png    64x45  -> x2 */
    --w-main-title-m: calc(254 * var(--benefit-unit-mo)); /* main_title_m.png 127x43  -> x2 */
    --w-evt-box-m:    calc(654 * var(--benefit-unit-mo)); /* event_box_m.png  654x1000 */
    /* ⚠ event_img1_m / img2_m 도 1x export 다(파일 249x235 / 212x229 ≒ 시안 표기
       247x234.5 / 209.78x229). 시안 표기값 x2 로 넣는다. box/btn/benefit 카드는 2x
       export 라 원본 px 를 그대로 쓴다 — 이 페이지의 MO 자산은 배율이 섞여 있다. */
    --w-evt-img1-m:   calc(494 * var(--benefit-unit-mo));    /* 시안 247    x2 */
    /* 이벤트 버튼 — 두 이미지 모두 원본 높이가 68 이다(300x68 / 242x68).
       세로를 --h-evt-btn-m 하나로 고정하고 가로는 각자 비율대로 따라가게 한다.
       -> 버튼 크기를 조절할 때 --h-evt-btn-m 만 바꾸면 두 버튼의 높이가 항상 같다.
       ⚠ event_btn2_m.png 는 2026-08-13 에 408x68 -> 242x68 로 교체됐다.
         버튼 이미지를 갈아끼울 때는 아래 비율(300/68, 242/68)도 같이 고칠 것. */
    --h-evt-btn-m:    calc(68 * var(--benefit-unit-mo));
    --w-evt-btn1-m:   calc(68 * (300 / 68) * var(--benefit-unit-mo)); /* event_btn1_m.png 300x68 */
    --w-evt-img2-m:   calc(419.56 * var(--benefit-unit-mo)); /* 시안 209.78 x2 */
    --w-evt-btn2-m:   calc(68 * (242 / 68) * var(--benefit-unit-mo)); /* event_btn2_m.png 242x68 */
    --w-bf-item-m:    calc(654 * var(--benefit-unit-mo)); /* benefit1~4_m.png 654x240 */
  }

  .main_stage_m > * { position: absolute; }

  /* glo_logo.png (375: X:69 / Y:30) */
  .main_stage_m__logo {
    left: calc(138 * var(--benefit-unit-mo));
    top: calc(60 * var(--benefit-unit-mo));
    width: var(--w-logo-m, auto);
    max-width: none;
  }
  /* main_title.png (375: X:center / Y:90) */
  .main_stage_m__title {
    top: calc(180 * var(--benefit-unit-mo));
    width: var(--w-main-title-m, auto);
    max-width: none;
  }
  /* "멤버 전용 혜택" (375: X:center / Y:126.55 / bold 42 / 120% / #FFF) */
  .main_stage_m__copy {
    margin: 0;
    top: calc(253.1 * var(--benefit-unit-mo));
    font-weight: 700;
    font-size: calc(84 * var(--benefit-unit-mo));
    line-height: 1.2;
    letter-spacing: 0;
    color: #ffffff;
    white-space: nowrap;
  }

  /* --------------------------------------------------------------- #event */
  #event.benefit__section {
    aspect-ratio: 750 / var(--bf-mo-event-h);
    background: #ffffff;
  }

  /* 인트로 3줄 (375: Y:50 / GAP20 / GAP20) */
  .evt_stage_m__intro {
    top: calc(100 * var(--benefit-unit-mo));
    text-align: center;
  }
  /* "EASY MISSION" bold 14 / 120% / 0% / #00B56E */
  .evt_stage_m__eyebrow {
    margin: 0;
    font-weight: 700;
    font-size: calc(28 * var(--benefit-unit-mo));
    line-height: 1.2;
    letter-spacing: 0;
    color: #00b56e;
  }
  /* 타이틀 bold 28 / 130% / -2% / #000 */
  .evt_stage_m__title {
    margin: calc(40 * var(--benefit-unit-mo)) 0 0;
    font-weight: 700;
    font-size: calc(56 * var(--benefit-unit-mo));
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #000000;
  }
  /* 서브카피 regular 16 / 120% / -3% / #000 */
  .evt_stage_m__desc {
    margin: calc(40 * var(--benefit-unit-mo)) 0 0;
    font-weight: 400;
    font-size: calc(32 * var(--benefit-unit-mo));
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: #000000;
  }

  /* MO 는 박스 내부 기준이 아니라 섹션 기준 절대좌표다 (시안 값이 박스 Y 보다 큼) */
  .evt_stage_m > .evt_stage_m__box,
  .evt_stage_m > .evt_stage_m__img,
  .evt_stage_m > .evt_stage_m__btn { position: absolute; }

  .benefit__wrap img.evt_stage_m__box,
  .benefit__wrap img.evt_stage_m__img { max-width: none; }

  /* 버튼은 <a> 가 위치/크기를 갖고 안쪽 img 는 그 안을 100% 채운다.
     ⚠ img 에 width:90% 를 주면 안 된다. <a> 가 절대위치 + width:auto 일 때
       퍼센트 폭은 shrink-to-fit 계산에 기여하지 못해 <a> 가 남는 공간(375)까지
       늘어나고, 그 안에서 img 만 왼쪽 정렬로 90% 를 차지한다.
       -> <a> 는 가운데지만 img 는 <a> 폭의 5% 만큼 왼쪽으로 밀린다(=버튼이 좌측 편향).
       크기를 줄이려면 img 가 아니라 --h-evt-btn-m 을 줄일 것. */
  .evt_stage_m__btn {
    display: block;
    height: var(--h-evt-btn-m);
  }
  .benefit__wrap .evt_stage_m__btn img { width: 100%; height: 100%; max-width: none; }

  /* ---- EVENT 01 ----
     ⚠ EVENT 01 은 copy-sub("리뷰 이벤트 기간") 한 줄이 더 있고 비주얼도 EVENT 02 보다
       12 unit 높아, 시안 좌표(txt 562 / img 910 / btn 1450) 그대로면 버튼이 박스 하단을
       36 unit 뚫고 나간다. 실측 총량 1036 vs event_box_m.png 1000.
       박스 이미지를 그대로 쓰기로 해서 여백만 압축했다 (2026-08-12).
         상단여백  80 -> 60   (box 482 + 60 = 542)
         txt->img  21 -> 8    (txt 하단 868.7 + 8)
         img->btn  75 -> 16   (img 하단 1342.2 + 16)
         하단여백  -36 -> 56  (btn 하단 1426 / box 하단 1482)
       ※ 2026-08-12 2차 : 버튼 아래 여백을 40 -> 56 으로 늘렸다. 더 늘리려면 상단여백
         60 을 더 깎는 수밖에 없는데, 이미 EVENT 02(80)보다 20 작아 균형이 무너진다.
       ※ EVENT 02 리듬(상단 80 / gap 34 / gap 21 / 하단 70)과 다르다. 654x1106 박스가
         새로 나오면 아래 4줄을 시안 원값(562/910/1450)으로 되돌리고
         --bf-mo-event-h 와 --bf-mo-base 를 +106 / +53 하면 된다. */
  .evt_stage_m__box--1 { top: calc(482 * var(--benefit-unit-mo)); width: var(--w-evt-box-m, auto); }   /* (375: 241) */
  .evt_stage_m__txt--1 { top: calc(542 * var(--benefit-unit-mo)); }   /* (375: 271) 시안 562 */
  .evt_stage_m__img--1 { top: calc(877 * var(--benefit-unit-mo)); width: var(--w-evt-img1-m, auto); } /* (375: 438.5) 시안 910 */
  .evt_stage_m__btn--1 { top: calc(1358 * var(--benefit-unit-mo)); width: var(--w-evt-btn1-m); }  /* (375: 679) 시안 1450 */

  /* ---- EVENT 02 ---- */
  .evt_stage_m__box--2 { top: calc(1542 * var(--benefit-unit-mo)); width: var(--w-evt-box-m, auto); }  /* (375: 771) */
  .evt_stage_m__txt--2 { top: calc(1622 * var(--benefit-unit-mo)); }  /* (375: 811) */
  .evt_stage_m__img--2 { top: calc(1930 * var(--benefit-unit-mo)); width: var(--w-evt-img2-m, auto); }  /* (375: 965) */
  .evt_stage_m__btn--2 { top: calc(2404 * var(--benefit-unit-mo)); width: var(--w-evt-btn2-m); }  /* (375: 1202) */

  /* 라벨 + 카피 묶음 (GAP 으로 이어지므로 flow) — 전부 가운데 정렬 */
  .evt_stage_m__txt { text-align: center; }
  /* "EVENT 01/02" heavy 12 / 130% / #FFF */
  .evt_stage_m__label {
    margin: 0;
    font-weight: 900;
    font-size: calc(24 * var(--benefit-unit-mo));
    line-height: 1.3;
    letter-spacing: 0;
    color: #ffffff;
  }
  /* 큰 카피 GAP(10) / bold 24 / -3% / #FFF (span = semibold) */
  .evt_stage_m__copy-title {
    margin: calc(20 * var(--benefit-unit-mo)) 0 0;
    font-weight: 700;
    font-size: calc(48 * var(--benefit-unit-mo));
    letter-spacing: -0.03em;
    color: #ffffff;
  }
  .evt_stage_m__copy-title span { font-weight: 600; }
  .evt_stage_m__txt--1 .evt_stage_m__copy-title { line-height: 1.2; }  /* 120% */
  .evt_stage_m__txt--2 .evt_stage_m__copy-title { line-height: 1.25; } /* 125% */

  /* 작은 카피 GAP(15) / bold 14 / -3% / #FFF (span = semibold) */
  .evt_stage_m__copy-desc {
    margin: calc(30 * var(--benefit-unit-mo)) 0 0;
    font-weight: 700;
    font-size: calc(28 * var(--benefit-unit-mo));
    letter-spacing: -0.03em;
    color: #ffffff;
  }

  .evt_stage_m__copy-sub {
    margin: calc(30 * var(--benefit-unit-mo)) 0 0;
    font-weight: 700;
    font-size: calc(22 * var(--benefit-unit-mo));
    letter-spacing: -0.03em;
    color: #ffffff;
  }
  .evt_stage_m__copy-desc span { font-weight: 600; }
  .evt_stage_m__txt--1 .evt_stage_m__copy-desc { line-height: 1.4; }  /* 140% */
  .evt_stage_m__txt--2 .evt_stage_m__copy-desc { line-height: 1.3; }  /* 130% */

  /* ------------------------------------------------------------- #benefit */
  #benefit.benefit__section {
    aspect-ratio: 750 / var(--bf-mo-benefit-h);  /* benefit_bg_m.webp 750x1490 */
    background: #000000 url("/content/dam/glo-kr/mcs/images/event/hyperproplus/member_benefit/benefit_bg_m.webp") no-repeat center top / 100% 100%;
  }
  .bf_stage_m > * { position: absolute; }
  /* PC 와 동일 — <a> 로 감싼 카드가 좌표를 잃지 않도록 (위 .bf__item 주석 참고) */
  .bf_stage_m > a { display: contents; }
  .benefit__wrap img.bf_stage_m__item {
    position: absolute;
    max-width: none;
    width: var(--w-bf-item-m, auto);
  }

  /* 아래 좌표는 전부 "문서 누적 Y - --bf-mo-base(1810)" 를 x2 한 값이다.
     원본(375 누적) 값은 주석의 (375: N). */

  /* "멤버 전용 상시 혜택" (375누적: 1972) bold 28 / 130% / #FFF
     ⚠ [확인필요] 시안에 letter-spacing 이 +2% 로 적혀 있는데 PC 는 -2% 다.
       PC 와 동일한 -2% 로 넣어 두었다. +2% 가 맞으면 0.02em 으로 바꿀 것. */
  .bf_stage_m__title {
    margin: 0;
    top: calc((1972 - var(--bf-mo-base)) * 2 * var(--benefit-unit-mo));
    font-weight: 700;
    font-size: calc(56 * var(--benefit-unit-mo));
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
  }
  /* 서브카피 (375누적: 2022) bold 16 / 140% / -2% / #FFF */
  .bf_stage_m__sub {
    margin: 0;
    top: calc((2022 - var(--bf-mo-base)) * 2 * var(--benefit-unit-mo));
    font-weight: 700;
    font-size: calc(32 * var(--benefit-unit-mo));
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
  }
  /* benefit1~4_m.png (375누적: 2106 / 2236 / 2366 / 2496) */
  .bf_stage_m__item--1 { top: calc((2106 - var(--bf-mo-base)) * 2 * var(--benefit-unit-mo)); }
  .bf_stage_m__item--2 { top: calc((2236 - var(--bf-mo-base)) * 2 * var(--benefit-unit-mo)); }
  .bf_stage_m__item--3 { top: calc((2366 - var(--bf-mo-base)) * 2 * var(--benefit-unit-mo)); }
  .bf_stage_m__item--4 { top: calc((2496 - var(--bf-mo-base)) * 2 * var(--benefit-unit-mo)); }

  /* 각주 (375: X:12 / 375누적 Y:2643) regular 9 / 140% / -3% / #FFF */
  .bf_stage_m__note {
    margin: 0;
    left: calc(24 * var(--benefit-unit-mo));
    top: calc((2643 - var(--bf-mo-base)) * 2 * var(--benefit-unit-mo));
    font-weight: 400;
    font-size: calc(18 * var(--benefit-unit-mo));
    line-height: 1.4;
    letter-spacing: -0.03em;
    color: #ffffff;
  }

  /* -------------------------------------------------------------- #notice */
  .pr-notice__bar {
    height: calc(140 * var(--benefit-unit-mo));
    padding: 0 calc(48 * var(--benefit-unit-mo));
  }
  .pr-notice__bar-left { gap: calc(20 * var(--benefit-unit-mo)); }
  .pr-notice__icon {
    width: calc(64 * var(--benefit-unit-mo));
    height: calc(64 * var(--benefit-unit-mo));
  }
  .pr-notice__label { font-size: calc(36 * var(--benefit-unit-mo)); }
  .pr-notice__arrow {
    width: calc(80 * var(--benefit-unit-mo));
    height: calc(80 * var(--benefit-unit-mo));
  }
  .pr-notice__inner {
    padding: calc(48 * var(--benefit-unit-mo)) calc(36 * var(--benefit-unit-mo));
  }
  .pr-notice__group { margin-bottom: calc(40 * var(--benefit-unit-mo)); }
  .pr-notice__group:last-child { margin-bottom: 0; }
  .pr-notice__group-title {
    margin-bottom: calc(24 * var(--benefit-unit-mo));
    font-size: calc(28 * var(--benefit-unit-mo));
    line-height: 1.3;
  }
  .pr-notice__list { padding-left: calc(10 * var(--benefit-unit-mo)); }
  .pr-notice__list li {
    font-size: calc(22.5 * var(--benefit-unit-mo));
    line-height: 1.6;
  }
}