@charset "UTF-8";

/* AEM/CMS 컨테이너 폭 제약 무력화 (CLAUDE.md §11) */
body .bat-wrapper { max-width: unset; }
.aem-Grid-Container--xxl { max-width: unset; margin: 0; }

/* --------------------------------------------------------------------------
   0. 스코프 & 리셋 (전역 태그 금지 — CLAUDE.md §1)
   -------------------------------------------------------------------------- */
.bestrv__wrap {
  --bestrv-unit: 0.0694444vw; /* 1440 기준 1px */
  --font-en: "Mont";
  --font-kr: "Onemobile";
  position: relative;
  width: 100%;
  font-family: var(--font-en), var(--font-kr), sans-serif;
}
.bestrv__wrap, .bestrv__wrap * { box-sizing: border-box; }
.bestrv__wrap img { max-width: 100%; display: block; }
.bestrv__wrap p, .bestrv__wrap dl, .bestrv__wrap dd, .bestrv__wrap ul, .bestrv__wrap h1, .bestrv__wrap h2 { margin: 0; }
.bestrv__wrap ul { padding: 0; list-style: none; }
.bestrv__wrap a { text-decoration: none; }

/* --------------------------------------------------------------------------
   1. KV 섹션 — bg_kv.jpg 원본 1440x2735 [TODO-실측]
      Figma BG(3:19) = 디바이스 스택 사진(상단, y-814~1650 크롭) 위에
      그라데이션(y1185~2735 : rgba(70,178,116,0) → #328053 21.22% → #1E4C32)이
      얹힌 구조다. product_reg 방식대로 이 전체를 한 장으로 export 해서 쓴다.
      배경 이미지가 리사이즈/크롭되면 height 의 2735 도 재계산할 것.
   -------------------------------------------------------------------------- */
.bestrv__kv {
  position: relative;
  width: 100%;
  height: calc(2735 * var(--bestrv-unit));
  background: #1e4c32 url(/content/dam/glo-kr/mcs/images/event/hyperproplus/best_review/bg_kv.jpg) no-repeat center top / 100% 100%;
  margin-bottom: -1px; /* 섹션 사이 흰 줄 방지 (CLAUDE.md §2) */
}

/* 로고 — logo.png 실측 296x209 (product_reg 재사용) / x116.93 y75.26 */
.bestrv__logo {
  position: absolute;
  left: calc(116.93 * var(--bestrv-unit));
  top: calc(75.26 * var(--bestrv-unit));
  width: calc(295 * var(--bestrv-unit));
}

/* 타이틀 "베스트 리뷰 혜택" — 좌측 정렬(가운데 아님!) x122 y417 / 100px / ls-5% */
.bestrv__title {
  position: absolute;
  left: calc(122 * var(--bestrv-unit));
  top: calc(417 * var(--bestrv-unit));
  font-size: calc(100 * var(--bestrv-unit));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.05em;
  color: #fff;
  white-space: nowrap;
}

/* 기간/당첨자 발표 — x122 / y573.02, y620.02 / 30px Bold / ls-2%
   구분자 "|" 만 Onemobile Regular(400) — .bestrv__bar 로 끊는다 */
.bestrv__info-row {
  position: absolute;
  left: calc(122 * var(--bestrv-unit));
  font-size: calc(30 * var(--bestrv-unit));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
}
.bestrv__info-row--period { top: calc(573.02 * var(--bestrv-unit)); }
.bestrv__info-row--winner { top: calc(620.02 * var(--bestrv-unit)); }
.bestrv__bar { font-weight: 400; }

/* --------------------------------------------------------------------------
   2. 리뷰 선정 혜택 / 리뷰 작성 가이드 — 공통 텍스트 패턴
      섹션타이틀 42px Bold ls-4% → 흰 라인(620x3) → 본문 46px Bold ls-4%
      → 각주 32px Regular ls-4%. 전부 x122 좌측 정렬.
   -------------------------------------------------------------------------- */
.bestrv__sec-title {
  position: absolute;
  left: calc(122 * var(--bestrv-unit));
  font-size: calc(42 * var(--bestrv-unit));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: #fff;
  white-space: nowrap;
}
.bestrv__sec-line {
  position: absolute;
  left: calc(122 * var(--bestrv-unit));
  width: calc(620 * var(--bestrv-unit));
  height: calc(3 * var(--bestrv-unit));
  background: #fff;
}
.bestrv__sec-copy {
  position: absolute;
  left: calc(122 * var(--bestrv-unit));
  font-size: calc(46 * var(--bestrv-unit));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: #fff;
  white-space: nowrap;
}
.bestrv__sec-note {
  position: absolute;
  left: calc(122 * var(--bestrv-unit));
  font-size: calc(32 * var(--bestrv-unit));
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: #fff;
  white-space: nowrap;
}
/* 라틴/숫자 : 본문(46px Bold)엔 Mont SemiBold(600), 각주(Regular)엔 Mont Regular(400).
   한글은 폰트 스택상 Onemobile 로 자동 폴백 (CLAUDE.md §3) */
.bestrv__mont { font-weight: 600; }

/* 선정 혜택 : 타이틀 y1349 / 라인 y1414 / 본문 y1447 / 각주 y1522 */
.bestrv__benefit .bestrv__sec-title { top: calc(1349 * var(--bestrv-unit)); }
.bestrv__benefit .bestrv__sec-line  { top: calc(1414 * var(--bestrv-unit)); }
.bestrv__benefit .bestrv__sec-copy  { top: calc(1447 * var(--bestrv-unit)); }
.bestrv__benefit .bestrv__sec-note  { top: calc(1522 * var(--bestrv-unit)); }

/* CU 쿠폰 — coupon_cu.png 실측 390x246 (product_reg 재사용) 을 451 폭으로 확대.
   x854 y1315 / 451x283.79 / drop-shadow 0 4 20 rgba(0,0,0,0.57)
   ※ 15% 업스케일이라 고해상도에서 살짝 소프트할 수 있다. 선명해야 하면
     Figma 쿠폰(3:32)을 451 폭으로 재export 해서 교체할 것. */
.bestrv__coupon {
  position: absolute;
  left: calc(854 * var(--bestrv-unit));
  top: calc(1315 * var(--bestrv-unit));
  width: calc(451 * var(--bestrv-unit));
  filter: drop-shadow(0 calc(4 * var(--bestrv-unit)) calc(20 * var(--bestrv-unit)) rgba(0, 0, 0, 0.57));
}

/* 작성 가이드 : 타이틀 y1726 / 라인 y1791 / 본문 y1824 / 각주 y1899 */
.bestrv__guide .bestrv__sec-title { top: calc(1726 * var(--bestrv-unit)); }
.bestrv__guide .bestrv__sec-line  { top: calc(1791 * var(--bestrv-unit)); }
.bestrv__guide .bestrv__sec-copy  { top: calc(1824 * var(--bestrv-unit)); }
.bestrv__guide .bestrv__sec-note  { top: calc(1899 * var(--bestrv-unit)); }

/* --------------------------------------------------------------------------
   3. 리뷰 예시 원 3개 — y2094 / 지름 326.18 / x 122, 556.91, 991.82
      원·연결선은 벡터라 CSS 로 그린다 (시안 라인 Rectangle 325 와 같은 3px 흰색).
      [확인필요] 시안 SVG 의 정확한 stroke 두께를 못 받았다. 3px 로 넣었으니
      시안과 다르면 --bestrv-circle-stroke 하나만 조정.
   -------------------------------------------------------------------------- */
.bestrv__circles { --bestrv-circle-stroke: calc(3 * var(--bestrv-unit)); }
.bestrv__circle {
  position: absolute;
  top: calc(2094 * var(--bestrv-unit));
  width: calc(326.18 * var(--bestrv-unit));
  height: calc(326.18 * var(--bestrv-unit));
  /*border: var(--bestrv-circle-stroke) solid #fff;*/
  border-radius: 50%;
}
.bestrv__circle--1 { left: calc(122 * var(--bestrv-unit)); }
.bestrv__circle--2 { left: calc(556.91 * var(--bestrv-unit)); }
.bestrv__circle--3 { left: calc(991.82 * var(--bestrv-unit)); }

/* 원 안 텍스트 — 원 상단에서 94.59 아래(2188.59), 34.793px, 1행 Regular / 2~3행 Bold */
.bestrv__circle-txt {
  position: absolute;
  left: 50%;
  top: calc(94.59 * var(--bestrv-unit) - var(--bestrv-circle-stroke));
  transform: translateX(-50%);
  font-size: calc(34.793 * var(--bestrv-unit));
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}
.bestrv__circle-txt strong { font-weight: 700; }

/* 원 사이 연결선 — 세로중심 y2257.09(=원 중심), w65.24, x469.93 / x904.84 */
.bestrv__circle-line {
  position: absolute;
  top: calc(2257.09 * var(--bestrv-unit));
  width: calc(65.24 * var(--bestrv-unit));
  height: calc(3 * var(--bestrv-unit));
  transform: translateY(-50%);
  background: #fff;
}
.bestrv__circle-line--1 { left: calc(469.93 * var(--bestrv-unit)); }
.bestrv__circle-line--2 { left: calc(904.84 * var(--bestrv-unit)); }

/* --------------------------------------------------------------------------
   4. CTA — x559.5(가운데) y2531 / 321x93 이미지 버튼 (product_reg 방식)
      [TODO] cta_write_btn.png("지금 작성하기") 미수급 — Figma 3:50 을 321x93,
             MO 3:103 을 174x51(1x) 로 export. PC/MO 토글은 CLAUDE.md §10 패턴.
   -------------------------------------------------------------------------- */
.bestrv__btn {
  position: absolute;
  left: 50%;
  top: calc(2531 * var(--bestrv-unit));
  transform: translateX(-50%) translateY(var(--bestrv-rv, 0px));
  display: block;
}
.bestrv__btn .bestrv__btn-img {
  display: block;
  width: calc(321 * var(--bestrv-unit)); /* cta_write_btn.png 321x93 [TODO-실측] */
}
.bestrv__wrap img.bestrv__pc-only { display: block; }
.bestrv__wrap img.bestrv__mo-only { display: none; }

@media (max-width: 750px) {
  .bestrv__wrap img.bestrv__pc-only { display: none; }
  .bestrv__wrap img.bestrv__mo-only { display: block; }
}

/* 하단 각주 — x40 y2687 / NotoSans 18px Regular / ls-3% (숫자 19 는 Mont) */
.bestrv__footnote {
  position: absolute;
  left: calc(40 * var(--bestrv-unit));
  top: calc(2687 * var(--bestrv-unit));
  font-family: var(--font-en), "NotoSans", sans-serif;
  font-size: calc(18 * var(--bestrv-unit));
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5. 유의사항 (공통 gp-notice — product_reg 와 동일 규격/구조, CLAUDE.md §6)
      시안(3:123)의 바 높이는 241 이지만 프로젝트 공통 규격(192)을 따른다.
   -------------------------------------------------------------------------- */
.gp-notice {
  position: relative;
  width: 100%;
  font-family: var(--font-en, "Mont"), "NotoSans", sans-serif;
}
.gp-notice__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(192 * var(--bestrv-unit));
  padding: 0 calc(133 * var(--bestrv-unit)) 0 calc(91 * var(--bestrv-unit));
  background: #333;
}
.gp-notice__top-left {
  display: flex;
  align-items: center;
  gap: calc(25 * var(--bestrv-unit));
}
.gp-notice__icon { width: calc(53 * var(--bestrv-unit)); }
.gp-notice__label {
  font-size: calc(46 * var(--bestrv-unit));
  font-weight: 700;
  color: #fff;
}
.gp-notice__arrow {
  width: calc(48 * var(--bestrv-unit));
  height: calc(28 * var(--bestrv-unit));
  padding: 0;
  border: 0;
  cursor: pointer;
  background: url(/content/dam/glo-kr/mcs/images/event/hyperproplus/best_review/notice_arrow.png) no-repeat center / 100% 100%;
  transition: transform 0.3s ease;
}
.gp-notice.is-closed .gp-notice__arrow { transform: rotate(180deg); }

/* 본문 — max-height 는 JS(scrollHeight)로만 제어, padding 은 상태 클래스로 분리 (§6) */
.gp-notice__bottom {
  overflow: hidden;
  background: #262626;
  color: #fff;
  padding: 0 calc(124 * var(--bestrv-unit)) 0 calc(74 * var(--bestrv-unit));
  transition: max-height 0.5s ease, padding 0.5s ease;
}
.gp-notice:not(.is-closed) .gp-notice__bottom {
  padding-top: calc(60 * var(--bestrv-unit));
  padding-bottom: calc(80 * var(--bestrv-unit));
}
/* ★ 반드시 .bestrv__wrap 프리픽스 — 리셋(0,0,1,1)이 클래스 1개(0,0,1,0)를
   이겨 margin/불렛이 무시되는 함정 (product_reg 에서 실제로 겪음, CLAUDE.md §10) */
.bestrv__wrap .gp-notice__title {
  margin: 0 0 calc(48 * var(--bestrv-unit));
  font-size: calc(28 * var(--bestrv-unit));
  font-weight: 700;
  letter-spacing: -0.05em;
}
.bestrv__wrap .gp-notice__title--sub {
  margin-top: calc(48 * var(--bestrv-unit));
  margin-bottom: calc(48 * var(--bestrv-unit));
}
.bestrv__wrap .gp-notice__list {
  margin: 0;
  padding-left: calc(39 * var(--bestrv-unit));
  list-style: disc outside;
}
.gp-notice__list li {
  font-size: calc(26 * var(--bestrv-unit));
  font-weight: 400;
  line-height: calc(48 * var(--bestrv-unit));
  letter-spacing: -0.05em;
  padding-left: calc(4 * var(--bestrv-unit));
}

/* --------------------------------------------------------------------------
   6. 스크롤 리빌 (.reveal — mcs_common.js 가 is-visible 토글, CLAUDE.md §5)
      자체 transform 요소(btn/circle-txt/circle-line)는 범용 규칙에서 :not() 제외
   -------------------------------------------------------------------------- */
.bestrv__wrap .reveal {
  --bestrv-rv: calc(40 * var(--bestrv-unit));
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.bestrv__wrap .reveal:not(.bestrv__btn) {
  transform: translateY(var(--bestrv-rv));
}
.bestrv__wrap .reveal.is-visible {
  --bestrv-rv: 0px;
  opacity: 1;
}

/* 순차 등장 딜레이 (0.05s 단위 재사용 클래스 — §5/§8) */
.bestrv__wrap .fx__tran_05 { transition-delay: 0.05s; }
.bestrv__wrap .fx__tran_10 { transition-delay: 0.1s; }
.bestrv__wrap .fx__tran_15 { transition-delay: 0.15s; }
.bestrv__wrap .fx__tran_20 { transition-delay: 0.2s; }
.bestrv__wrap .fx__tran_25 { transition-delay: 0.25s; }
.bestrv__wrap .fx__tran_30 { transition-delay: 0.3s; }