@charset "UTF-8";

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

/* ==========================================================================
   글로 하이퍼프로+ 할인쿠폰 모아보기 (coupon)
   - 피그마 : PUBLISH-K / membership
       PC 306:8344 (1920 x 3176) / MO 306:8091 (375 x 3080)
   - 코드네임 : coupon  (.coupon__wrap / --coupon-unit)
   - 단위 체계(CLAUDE.md §1 / §10)
       PC  --coupon-unit    : 1920 기준 1px = min(0.0520833vw, 1px)
       MO  --coupon-unit-mo : 시안 375 기준 x2 -> 750 단위 1unit = 0.133333vw
         ※ 시안 좌표/폰트는 전부 x2 해서 넣는다. 주석의 "(375: N)" 이 원본값.
   - PC 는 1920 고정 px 스테이지를 scale() 로 축소, MO 는 750 단위 calc().
   - 이미지 경로 : ../images/hyperproplus/coupon/
   - 섹션 : #main / #benefit / #usage
       #benefit + #usage 는 하나의 어두운 배경(.cp__dark) 위에 얹힌다.
         PC 1920 x 2168 (y 1008~3176) / MO (375) 375 x 2480 (y 600~3080)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 스코프 & 리셋 & 페이지 상수
   -------------------------------------------------------------------------- */
.coupon__wrap {
  --coupon-unit: min(0.0520833vw, 1px);              /* PC 1920 기준 1px */
  --coupon-unit-mo: 0.133333vw;                      /* MO 750 기준 1unit */
  --coupon-stage-scale: calc(100vw / 1920 / 1px);    /* PC 스테이지 축소 배율 */

  --cp-orange: #fe5000;
  --cp-orange-lt: #ff9869;
  --cp-ink: #2b2b2b;
  --cp-lime: #acf92e;

  /* ---- PC 섹션 높이 (1920 기준 px, 피그마 실측) */
  --cp-main-h: 1008;
  --cp-benefit-h: 1368;
  --cp-usage-h: 800;

  /* ---- MO 섹션 높이 (750 단위 = 375 시안 x2)
     main    375: 0~600
     benefit 375: 600~1955   (다크영역 시작 ~ usage 타이틀 66px 위)
     usage   375: 1955~3080 */
  --cp-mo-main-h: 1200;
  --cp-mo-benefit-h: 2710;
  --cp-mo-usage-h: 2250;

  position: relative;
  width: 100%;
  font-family: "Mont", "Onemobile", sans-serif;
}
.coupon__wrap, .coupon__wrap * { box-sizing: border-box; }
.coupon__wrap img { max-width: 100%; display: block; }
.coupon__wrap a { color: inherit; text-decoration: none; }

/* ⚠ `.coupon__wrap p { margin: 0 }` 같은 (0,1,1) 규칙은 두지 않는다.
   클래스 규칙(0,1,0)의 margin 을 이겨서 GAP 이 죽는다(member_benefit 사례).
   각 p 클래스에서 margin 을 직접 선언할 것. */

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

/* PC 스테이지 : 1920 고정 px 좌표계 */
.coupon__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  transform: translate(-50%, -50%) scale(var(--coupon-stage-scale));
  z-index: 1;
}
.coupon__stage > * { position: absolute; }
.coupon__wrap .coupon__stage img { max-width: none; }

/* MO 스테이지 : 750 단위 좌표계 */
.coupon_stage_m {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.coupon_stage_m > * { position: absolute; }

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

/* #benefit + #usage 공통 어두운 배경.
   content_bg 는 완만한 그라데이션이라 원본 비율 무시하고 늘려 쓴다(CLAUDE.md §2). */
.cp__dark {
  position: relative;
  width: 100%;
  background: #1f1f1f url("./content/dam/glo-kr/mcs/images/event/hyperproplus/coupon/content_bg.png") no-repeat center top / 100% 100%;
}

/* ==========================================================================
   2. #main — 히어로 (PC 1920x1008 / MO 375x600)
   ========================================================================== */
#main.coupon__section {
  aspect-ratio: 1920 / var(--cp-main-h);
  background: #101010 url("/content/dam/glo-kr/mcs/images/event/hyperproplus/coupon/main_bg.jpg") no-repeat center center / cover;
}
.main__stage { height: calc(var(--cp-main-h) * 1px); }

/* glo_logo.png (195x137)  X:243.5 / Y:49.3 */
.main__logo { left: 243.5px; top: 49.3px; }

/* badge_wise.png "현명한 선택" (337x74)  right:73.95 / Y:78 */
.main__badge { left: 1509px; top: 78px; }

/* "할인 쿠폰"  X:240 / Y:334.5 / Onemobile Bold 69.927 / 120% / #FFF */
.main__eyebrow {
  margin: 0;
  left: 240px;
  top: 334.5px;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 69.927px;
  line-height: 1.2;
  color: #ffffff;
  white-space: nowrap;
}
/* "멤버 전용 쿠폰으로 / 더 쉽게"  X:240 / Y:433.5 / Onemobile Bold 100 / 120% */
.main__title {
  margin: 0;
  left: 240px;
  top: 433.5px;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 100px;
  line-height: 1.2;
  color: #ffffff;
  white-space: nowrap;
}
/* 성인 고지  X:60 / bottom:20 / NotoSans Regular 15 / 130% / -0.3px */
.main__legal {
  margin: 0;
  left: 60px;
  bottom: 20px;
  top: auto;
  font-family: "NotoSans", "Onemobile", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: #ffffff;
  white-space: nowrap;
}
.main__legal .cp__num { font-family: "Mont", sans-serif; font-weight: 400; }

/* ==========================================================================
   3. #benefit — 쿠폰 카드 4종 (PC 1920x1368 / MO)
   ========================================================================== */
#benefit.coupon__section {
  aspect-ratio: 1920 / var(--cp-benefit-h);
  background: transparent;   /* .cp__dark 가 배경을 담당 */
}
.bf__stage { height: calc(var(--cp-benefit-h) * 1px); }

/* 헤더 "멤버 전용 쿠폰 혜택을 만나보세요"  center / Y:150 / Onemobile Bold 62 / 130% / -2% */
.bf__title {
  margin: 0;
  top: 150px;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 62px;
  line-height: 1.3;
  letter-spacing: -1.24px;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
}

/* ---- 쿠폰 카드 : 이미지(586.428x302.495) + GAP 49 + 버튼(H53) ----
   2x2 그리드. X 349 / 986 (간격 50.57), Y 315 / 787.248 (간격 67.75) */
.bf__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 49px;
  width: 586.428px;
}
.bf__card--1 { left: 349px; top: 315px; }
.bf__card--2 { left: 986px; top: 315px; }
.bf__card--3 { left: 349px; top: 787.248px; }
.bf__card--4 { left: 986px; top: 787.248px; }

.coupon__wrap img.bf__card-img { width: 586.428px; height: auto; max-width: none; }

/* 버튼 : #FE5000 / H53 / radius 60 / 좌우 58 / Onemobile Bold 20 / 130% / -0.4px */
.bf__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 53px;
  padding: 0 58px;
  border-radius: 60px;
  background: var(--cp-orange);
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.4px;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
}

/* 하단 유의사항  X:60 / Y:1272 / Onemobile Regular 15 / 130% / -0.45px */
.bf__note {
  margin: 0;
  left: 60px;
  top: 1272px;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -0.45px;
  color: #ffffff;
  white-space: nowrap;
}
.bf__note .cp__num { font-family: "Mont", sans-serif; font-weight: 400; }

/* ==========================================================================
   4. #usage — 온라인 쿠폰 사용 방법 (PC 1920x800)
   콘텐츠 폭 1196.434, 좌우 중앙(X:361.783)
   ========================================================================== */
#usage.coupon__section {
  aspect-ratio: 1920 / var(--cp-usage-h);
  background: transparent;
}
.us__stage { height: calc(var(--cp-usage-h) * 1px); }

/* 타이틀  center / Y:135 / Onemobile Bold 62 / 130% / -2% */
.us__title {
  margin: 0;
  top: 135px;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 62px;
  line-height: 1.3;
  letter-spacing: -1.24px;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
}

/* STEP 이미지 (379.61 x 222.964, radius 22.868)  Y:276 / X 0·408.2·816.39 (+361.783) */
.coupon__wrap img.us__img {
  width: 379.61px;
  height: auto;
  max-width: none;
  border-radius: 22.868px;
  top: 276px;
}
.us__img--1 { left: 361.783px; }
.us__img--2 { left: 769.983px; }   /* 361.783 + 408.2 */
.us__img--3 { left: 1178.173px; }  /* 361.783 + 816.39 */

/* 연결선 + 점  Y:569.14 / X:361.783 / W:1196.434 */
.us__line {
  left: 361.783px;
  top: 569.14px;
  width: 1196.434px;
  height: 11.434px;
}
.us__line::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  margin-top: -0.75px;
  background: #ffffff;
}
.us__line i {
  position: absolute;
  top: 0;
  width: 11.434px;
  height: 11.434px;
  border-radius: 50%;
  background: #ffffff;
}
.us__line i:nth-child(1) { left: 0; }
.us__line i:nth-child(2) { left: 393.9px; transform: translateX(-50%); }   /* 카드1·2 사이 */
.us__line i:nth-child(3) { left: 802.1px; transform: translateX(-50%); }   /* 카드2·3 사이 */
.us__line i:nth-child(4) { left: auto; right: 0; }

/* STEP 라벨  Y:533.27 / Mont SemiBold 26 / 130% / -2% / #ACF92E */
.us__label {
  margin: 0;
  top: 533.27px;
  transform: translateX(-50%);
  font-family: "Mont", sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: -0.52px;
  color: var(--cp-lime);
  text-align: center;
  white-space: nowrap;
}
/* 설명  세로중심 Y:630.86 -> top 597.06 / Onemobile Regular 26 / 130% / -2% */
.us__desc {
  margin: 0;
  top: 597.06px;
  transform: translateX(-50%);
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: -0.52px;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
}
.us__label--1, .us__desc--1 { left: 551.583px; }   /* 361.783 + 189.8 */
.us__label--2, .us__desc--2 { left: 959.783px; }   /* 361.783 + 598.0 */
.us__label--3, .us__desc--3 { left: 1367.983px; }  /* 361.783 + 1006.2 */

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

  .coupon__wrap .coupon__stage { display: none; }
  .coupon__wrap .coupon_stage_m { display: block; }

  .cp__dark {
    background-image: url("/content/dam/glo-kr/mcs/images/event/hyperproplus/coupon/content_bg_m.png");
  }

  /* ------------------------------------------------------------- #main */
  #main.coupon__section {
    aspect-ratio: 750 / var(--cp-mo-main-h);   /* (375: 375x600) */
    background: #101010 url("/content/dam/glo-kr/mcs/images/event/hyperproplus/coupon/main_bg_m.jpg") no-repeat center center / cover;
  }

  /* glo_logo_m.png (375: 64x45 @ 26,16.38) */
  .main_stage_m__logo {
    left: calc(52 * var(--coupon-unit-mo));
    top: calc(32.76 * var(--coupon-unit-mo));
    width: calc(128 * var(--coupon-unit-mo));
    max-width: none;
  }
  /* badge_wise_m.png (375: 114x25 @ 236,25) */
  .main_stage_m__badge {
    left: calc(472 * var(--coupon-unit-mo));
    top: calc(50 * var(--coupon-unit-mo));
    width: calc(228 * var(--coupon-unit-mo));
    max-width: none;
  }
  /* "할인 쿠폰" (375: center / Y:92 / Onemobile Bold 28 / 120%) */
  .main_stage_m__eyebrow {
    margin: 0;
    top: calc(184 * var(--coupon-unit-mo));
    font-family: "Onemobile", "Mont", sans-serif;
    font-weight: 700;
    font-size: calc(56 * var(--coupon-unit-mo));
    line-height: 1.2;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
  }
  /* "멤버 전용 쿠폰으로 / 더 쉽게" (375: center / Y:131 / Onemobile Bold 40 / 120%) */
  .main_stage_m__title {
    margin: 0;
    top: calc(262 * var(--coupon-unit-mo));
    font-family: "Onemobile", "Mont", sans-serif;
    font-weight: 700;
    font-size: calc(80 * var(--coupon-unit-mo));
    line-height: 1.2;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
  }
  /* 성인 고지 (375: X:15 / Y:578 / 10px) */
  .main_stage_m__legal {
    margin: 0;
    left: calc(30 * var(--coupon-unit-mo));
    top: calc(1156 * var(--coupon-unit-mo));
    font-family: "NotoSans", "Onemobile", sans-serif;
    font-weight: 400;
    font-size: calc(20 * var(--coupon-unit-mo));
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #ffffff;
    white-space: nowrap;
  }
  .main_stage_m__legal .cp__num { font-family: "Mont", sans-serif; }

  /* ---------------------------------------------------------- #benefit */
  #benefit.coupon__section {
    aspect-ratio: 750 / var(--cp-mo-benefit-h);   /* (375: 375x1355) */
  }

  /* 헤더 (375: center / Y:680 -> 섹션기준 80 / Onemobile Bold 28 / 130% / -2%) */
  .bf_stage_m__title {
    margin: 0;
    top: calc(160 * var(--coupon-unit-mo));
    font-family: "Onemobile", "Mont", sans-serif;
    font-weight: 700;
    font-size: calc(56 * var(--coupon-unit-mo));
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
  }

  /* 카드 컨테이너 (375: X:42 / Y:777 -> 섹션기준 177 / W:291) */
  .bf_stage_m__card {
    left: calc(84 * var(--coupon-unit-mo));
    width: calc(582 * var(--coupon-unit-mo));
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* 카드 간격 (375: 0 / 281 / 562 / 843) */
  .bf_stage_m__card--1 { top: calc(354 * var(--coupon-unit-mo)); }
  .bf_stage_m__card--2 { top: calc(916 * var(--coupon-unit-mo)); }
  .bf_stage_m__card--3 { top: calc(1478 * var(--coupon-unit-mo)); }
  .bf_stage_m__card--4 { top: calc(2040 * var(--coupon-unit-mo)); }

  /* 카드 이미지 (375: 291x150) */
  .coupon__wrap img.bf_stage_m__card-img {
    width: 100%;
    height: auto;
    max-width: none;
  }
  /* 버튼 (375: Y:175 / H:46 / radius 50.865 / 좌우 49 / Onemobile Bold 17 / -0.34px) */
  .bf_stage_m__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(92 * var(--coupon-unit-mo));
    margin-top: calc(50 * var(--coupon-unit-mo));   /* 150 -> 175 = 25 (x2) */
    padding: 0 calc(98 * var(--coupon-unit-mo));
    border-radius: calc(102 * var(--coupon-unit-mo));
    background: var(--cp-orange);
    font-family: "Onemobile", "Mont", sans-serif;
    font-weight: 700;
    font-size: calc(34 * var(--coupon-unit-mo));
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #ffffff;
    white-space: nowrap;
  }

  /* ------------------------------------------------------------ #usage */
  #usage.coupon__section {
    aspect-ratio: 750 / var(--cp-mo-usage-h);   /* (375: 375x1125) */
  }

  /* 타이틀 (375: center / Y:2021 -> 섹션기준 66 / Onemobile Bold 28 / 130% / -2%) */
  .us_stage_m__title {
    margin: 0;
    top: calc(132 * var(--coupon-unit-mo));
    font-family: "Onemobile", "Mont", sans-serif;
    font-weight: 700;
    font-size: calc(56 * var(--coupon-unit-mo));
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
  }

  /* STEP 이미지 (375: X:46 / W:283 / H:166) — Y 2087 / 2394 / 2713 (섹션기준 132 / 439 / 758) */
  .coupon__wrap img.us_stage_m__img {
    left: calc(92 * var(--coupon-unit-mo));
    width: calc(566 * var(--coupon-unit-mo));
    height: auto;
    max-width: none;
    border-radius: calc(36 * var(--coupon-unit-mo));
  }
  .us_stage_m__img--1 { top: calc(264 * var(--coupon-unit-mo)); }
  .us_stage_m__img--2 { top: calc(878 * var(--coupon-unit-mo)); }
  .us_stage_m__img--3 { top: calc(1516 * var(--coupon-unit-mo)); }

  /* STEP 라벨 (375: center / Y 2268 / 2575 / 2894 -> 313 / 620 / 939) */
  .us_stage_m__label {
    margin: 0;
    font-family: "Mont", sans-serif;
    font-weight: 600;
    font-size: calc(40 * var(--coupon-unit-mo));
    line-height: 1.3;
    color: var(--cp-lime);
    text-align: center;
    white-space: nowrap;
  }
  .us_stage_m__label--1 { top: calc(626 * var(--coupon-unit-mo)); }
  .us_stage_m__label--2 { top: calc(1240 * var(--coupon-unit-mo)); }
  .us_stage_m__label--3 { top: calc(1878 * var(--coupon-unit-mo)); }

  /* 구분선 + 점 (375: 선 X:48.5 W:280.5 / 점 X:46 10x10) — Y 2297 / 2604 / 2923 */
  .us_stage_m__line {
    left: calc(92 * var(--coupon-unit-mo));
    width: calc(566 * var(--coupon-unit-mo));
    height: calc(20 * var(--coupon-unit-mo));
  }
  .us_stage_m__line::before {
    content: "";
    position: absolute;
    left: calc(5 * var(--coupon-unit-mo));
    right: 0;
    top: 50%;
    height: calc(2 * var(--coupon-unit-mo));
    margin-top: calc(-1 * var(--coupon-unit-mo));
    background: #ffffff;
  }
  .us_stage_m__line::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: calc(20 * var(--coupon-unit-mo));
    height: calc(20 * var(--coupon-unit-mo));
    border-radius: 50%;
    background: #ffffff;
  }
  .us_stage_m__line--1 { top: calc(674 * var(--coupon-unit-mo)); }
  .us_stage_m__line--2 { top: calc(1288 * var(--coupon-unit-mo)); }
  .us_stage_m__line--3 { top: calc(1926 * var(--coupon-unit-mo)); }

  /* 설명 (375: center / Y 2308 / 2615 / 2934 -> 353 / 660 / 979)
     Onemobile Regular 20 / 140% / -0.4px */
  .us_stage_m__desc {
    margin: 0;
    font-family: "Onemobile", "Mont", sans-serif;
    font-weight: 400;
    font-size: calc(40 * var(--coupon-unit-mo));
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-align: center;
    white-space: nowrap;
  }
  .us_stage_m__desc--1 { top: calc(706 * var(--coupon-unit-mo)); }
  .us_stage_m__desc--2 { top: calc(1320 * var(--coupon-unit-mo)); }
  .us_stage_m__desc--3 { top: calc(1958 * var(--coupon-unit-mo)); }
}