@charset "UTF-8";

/* ==========================================================================
   실서버(AEM) 데스크톱 레이아웃 리셋
   - 실제 배포 환경(AEM)에서는 사이트 전체 컨테이너(.bat-wrapper)가 max-width:1440px로
     고정되어 있는데, 이 파일의 모든 스케일 계산(--teaser-unit, --main-stage-scale,
     --hint1/hint2/quiz-stage-scale 등)은 100vw(브라우저 뷰포트 전체 폭)를 기준으로 한다.
     1440px 컨테이너와 실제 뷰포트 폭이 다르면(예: 1920px 디자인 기준 화면에서 뷰포트가
     1440px보다 넓으면) 컨테이너 폭과 100vw 계산값이 어긋나면서 데스크톱 레이아웃 전체가
     밀리거나 겹치는 문제가 발생한다(로컬 스탠드얼론 테스트에서는 페이지가 항상 뷰포트
     전체 폭으로 렌더링되어 이 문제가 드러나지 않았다 — 실서버에 올렸을 때만 재현됨).
   - 같은 사이트의 다른 이벤트 페이지(soeasy 등)에서 이미 검증된 리셋 방식을 그대로
     적용해 .bat-wrapper의 max-width를 해제하고 100vw 기준 계산이 실제 뷰포트 폭과
     맞도록 만든다. 이 리셋은 body 전체에 적용되므로, 이 CSS 파일이 로드되는 페이지에서만
     영향이 있고 다른 페이지에는 영향을 주지 않는다(이 파일이 로드되지 않으면 규칙 자체가
     적용되지 않음).
   ========================================================================== */
body .bat-wrapper { max-width: unset; }
.aem-Grid-Container--xxl { max-width: unset; margin: 0; }

/* 주의: 실서버 상단 고정 global-navigation(.bat-header) 공간 확보를 위해
   body:has(.bat-header) .teaser__wrap { margin-top: 80px; } 규칙을 추가했었으나,
   실제 원인은 이 여백 부족이 아니라 애니메이션 시작 시 스크롤을 상단에 고정하는
   로직(hpp_index_page_scroll.js의 lockNativeScroll)이 .bat-header가 차지하는
   공간을 고려하지 않아 콘텐츠 상단이 가려지는 것으로 파악되어, 이 margin-top 규칙은
   제거했다(아래 lockNativeScroll 관련 수정 참고). */

.teaser__wrap {
  --teaser-unit: min(0.0520833vw, 1px);

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

/* ==========================================================================
   모바일(750px 이하) 전용 반응형 unit
   - 데스크탑 --teaser-unit은 1920px 디자인 시안 기준(1/1920 = 0.0520833vw)이라
     calc(N * var(--teaser-unit))이 1920px 뷰포트에서 정확히 N px이 된다.
   - 모바일 디자인 시안은 750px 기준이므로(1/750 = 0.133333vw), 같은 원리로
     모바일 전용 변수 --teaser-unit-mo를 별도로 두고, 모바일 전용 마크업/클래스
     에서는 calc(N * var(--teaser-unit))이 아니라 calc(N * var(--teaser-unit-mo))
     를 사용해 750px 뷰포트에서 정확히 N px이 되도록 한다.
   - PC용 --teaser-unit과 공존하며 서로 덮어쓰지 않는다(변수명이 다르므로).
   ========================================================================== */
@media (max-width: 750px) {
  .teaser__wrap {
    --teaser-unit-mo: min(0.133333vw, 1px);
    --teaser-unit-mo-num: calc(var(--teaser-unit-mo) / 1px);
  }
}

#main.teaser__section {
  --main-stage-scale: calc(100vw / 1920 / 1px);
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1008;
  overflow: hidden;
  background: #000000;
}

@media (max-width: 750px) {
  /* 모바일은 m_main_background.png(실측 750 x 1200, 세로로 긴 레이아웃) 비율을 그대로 사용 */
  #main.teaser__section {
    aspect-ratio: 750 / 1200;
  }
}

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

/* 모바일 전용 #main 콘텐츠 스테이지. PC용 .main__stage(디바이스/로고 등)는
   모바일에서 숨기고 이 안의 내용만 노출한다. */
.main_stage_m {
  display: none;
}

/* main_stage_after도 main_stage_m과 동일하게 모바일(750px 이하) 전용이므로,
   기본값은 숨김 처리하고 @media (max-width: 750px) 안에서만 display:block으로
   노출한다 (이 기본 규칙이 없어서 PC 폭에서도 계속 보이던 버그 수정). */
.main_stage_after {
  display: none;
}

@media (max-width: 750px) {
  .main_stage_m {
    display: block;
    position: absolute;
    left: calc(48 * var(--teaser-unit-mo));
    top: calc(108 * var(--teaser-unit-mo));
    z-index: 1;
  }
  .main_stage_m__copy {
    margin: 0;
    font-weight: 700;
    font-size: calc(75 * var(--teaser-unit-mo));
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-align: left;
    color: #ffffff;
    opacity: 0;
    animation: teaserRevealUp 1.6s ease-out 0.25s forwards;
  }
  .main_stage_m__preorder {
    margin: calc(28 * var(--teaser-unit-mo)) 0 0;
    font-weight: 700;
    font-size: calc(25 * var(--teaser-unit-mo));
    line-height: 1.3;
    letter-spacing: 0.28em;
    text-align: left;
    color: #3ba965;
    opacity: 0;
    animation: teaserRevealUp 1.6s ease-out 0.35s forwards;
  }
  .main_stage_m__date {
    margin: calc(5 * var(--teaser-unit-mo)) 0 0;
    font-weight: 600;
    font-size: calc(54 * var(--teaser-unit-mo));
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-align: left;
    color: #ffffff;
    opacity: 0;
    animation: teaserRevealUp 1.6s ease-out 0.45s forwards;
  }
  .main_stage_m__soon {
    margin: calc(15 * var(--teaser-unit-mo)) 0 0;
    font-weight: 600;
    font-size: calc(38 * var(--teaser-unit-mo));
    line-height: 1.3;
    letter-spacing: 0.15em;
    text-align: left;
    color: #3ba965;
    opacity: 0;
    animation: teaserRevealUp 1.6s ease-out 0.55s forwards;
  }
  .main_stage_m__hint {
    margin: calc(16 * var(--teaser-unit-mo)) 0 0;
    width: calc(378 * var(--teaser-unit-mo));
    max-width: none;
    display: block;
    opacity: 0;
    animation: teaserRevealUp 1.6s ease-out 0.65s forwards;
  }
  .main_stage_m__badge {
    margin: calc(380 * var(--teaser-unit-mo)) 0 0;
    width: calc(484 * var(--teaser-unit-mo));
    height: calc(65 * var(--teaser-unit-mo));
    max-width: none;
    display: block;
    opacity: 0;
    animation: teaserRevealUp 1.6s ease-out 0.75s forwards;
  }
  .main_stage_m__footnote {
    margin: calc(15 * var(--teaser-unit-mo)) 0 0;
    font-weight: 400;
    font-size: calc(15 * var(--teaser-unit-mo));
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-align: left;
    color: #ffffff;
    opacity: 0;
    animation: teaserRevealUp 1.6s ease-out 0.85s forwards;
  }

  /* main_stage_after: #main 4번 단계(디바이스 우측 이동) 시작과 함께
     hpp_index_page_scroll.js의 revealStageAfterElements()가 자식들을
     opacity:0 -> 1로 fadeIn시킨다(여기서는 CSS reveal 애니메이션을 걸지 않고
     초기 opacity:0만 지정 — JS가 시점을 제어). */
  .main_stage_after {
    display: block;
    position: absolute;
    left: calc(48 * var(--teaser-unit-mo));
    top: calc(100 * var(--teaser-unit-mo));
    z-index: 1;
  }
  .main_stage_after__copy {
    margin: 0;
    font-weight: 700;
    font-size: calc(64 * var(--teaser-unit-mo));
    line-height: 1.3;
    letter-spacing: -0.02em;
    text-align: left;
    color: #ffffff;
    opacity: 0;
  }
  .main_stage_after__copy__plus {
    /* 요청: Mont semibold(600)로 표시 — +는 라틴 글리프라 Mont로 렌더링되고,
       폴백은 부모와 동일하게 Onemobile. */
    font-family: "Mont", "Onemobile", sans-serif;
    font-weight: 600;
    /* 요청: 64 -> 110으로 확대. 인라인 span의 폰트만 키우면 그 줄의 라인 박스가
       110*1.3으로 커져 첫 줄이 밀리고 다음 줄과의 간격이 벌어지는 문제가 있어,
       line-height:0으로 라인 박스 확장을 차단해 문단의 원래 줄 리듬(64*1.3)을
       유지한다(둘째 줄 위치 실측 무변화 확인). */
    font-size: calc(110 * var(--teaser-unit-mo));
    line-height: 0;
    /* 커진 +가 베이스라인 기준으로 위로 솟아 텍스트보다 8px(375px 뷰포트 실측)
       높게 떠 보이므로, 첫 줄 텍스트와 광학적 중앙 정렬되도록 내린다
       (8px / 55px(=110유닛 렌더링 크기) ≈ 0.145em). */
    vertical-align: -0.145em;
    letter-spacing: -0.02em;
    color: #fe5000;
  }
  .main_stage_after__btn {
    margin: calc(25 * var(--teaser-unit-mo)) 0 0;
    display: block;
    width: fit-content;
    opacity: 0;
  }
  .main_stage_after__btn img {
    display: block;
    width: calc(320 * var(--teaser-unit-mo));
    max-width: none;
  }
}

img.main__bg-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  /* 주의(버그 수정): z-index:-1이면 이 이미지는 부모 #main.teaser__section 자신의
     background(#000000)보다도 뒤로 밀려 완전히 안 보이게 된다 — position:relative
     부모의 background는 그 부모의 박스 자체에 속하는 페인트 레이어라, 자식의
     z-index:-1은 "다른 형제 요소보다 뒤"가 아니라 "부모의 배경보다도 뒤"를 의미하기
     때문이다(데스크톱에서 main__bg-img가 안 보이던 원인). 모바일 미디어쿼리에서는
     이미 z-index:0으로 오버라이드되어 있어 문제가 없었다 — 기본값도 동일하게 0으로
     맞춰 데스크톱에서도 정상적으로 #main의 검정 배경 위에, 다른 형제 요소들
     (.main__stage 등, 모두 z-index 미지정=auto) 아래에 정상적으로 그려지도록 한다. */
  z-index: 0;
}

img.main__bg-img--mo {
  display: none;
}

@media (max-width: 750px) {
  img.main__bg-img--pc {
    display: none;
  }
  img.main__bg-img--mo {
    display: block;
  }
  img.main__bg-img {
    z-index: 0;
  }
}

.main__device-group {
  position: absolute;
  left: 387px;
  top: 289.59px;
  width: 447px;
  height: 719px;
  overflow: visible;
}

.main__device-body {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 447px;
  height: 719px;
  max-width: none;
  z-index: 12;
}

.main__device-cap {
  position: absolute;
  left: 150px;
  top: 10.41px;
  width: 181px;
  height: 104px;
  max-width: none;
  z-index: 13;
}

@keyframes teaserRevealUp {
  0%   { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes teaserRevealUpCentered {
  0%   { opacity: 0; transform: translateX(-50%) translateY(28px); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.main__glo-logo {
  position: absolute;
  left: 88px;
  top: 56.38px;
  width: 223px;
  height: 157px;
  max-width: none;
  z-index: 200;
}

.main__right-content-group {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1920px;
  height: 1008px;
}

.main__copy {
  position: absolute;
  left: 1035px;
  top: 313px;
  width: 700px;
  margin: 0;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 72px;
  line-height: 1.2;
  letter-spacing: -1.44px;
  color: #ffffff;
  z-index: 200;
  opacity: 0;
  animation: teaserRevealUp 1.6s ease-out 0.25s forwards;
}

.main__pre-order {
  position: absolute;
  left: 1035px;
  top: 521.95px;
  margin: 0;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: 7.28px;
  color: #3ba965;
  z-index: 200;
  opacity: 0;
  animation: teaserRevealUp 1.6s ease-out 0.5s forwards;
}

.main__product-badge {
  display: block;
  width: 420px;
  height: 57px;
  max-width: none;
  opacity: 0;
  animation: teaserRevealUp 1.6s ease-out 0.4s forwards;
}

.main__coming-soon {
  position: absolute;
  left: 1035px;
  top: 640px;
  margin: 0;
  font-family: "Mont", "Onemobile", sans-serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.3;
  letter-spacing: 10.08px;
  color: #3ba965;
  z-index: 200;
  opacity: 0;
  animation: teaserRevealUp 1.6s ease-out 0.55s forwards;
}

.main__release-date {
  margin: 0;
  font-family: "Mont", "Onemobile", sans-serif;
  /* 요청: font-weight 700 -> 600으로 변경 (desktop 전용 요소, mobile의
     .main_stage_m__date는 별도 요소이므로 영향 없음). */
  font-weight: 600;
  font-size: 52px;
  line-height: 1.3;
  /* 요청: 52px, 130%(line-height, 기존값과 동일), 5%(letter-spacing)로 변경.
     letter-spacing 5% = font-size(52px)의 5% = 2.6px (기존 13px 고정값에서 변경). */
  letter-spacing: 2.6px;
  color: #ffffff;
  opacity: 0;
  animation: teaserRevealUp 1.6s ease-out 0.7s forwards;
}

.main__footnote {
  position: absolute;
  left: 60px;
  top: 969px;
  width: 900px;
  margin: 0;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -0.3px;
  color: #ffffff;
  z-index: 200;
}

.main__cta-text {
  position: absolute;
  left: 1042px;
  top: 751.73px;
  width: max-content;
  margin: 0;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.48px;
  white-space: nowrap;
  z-index: 200;
  opacity: 0;
  animation: teaserRevealUp 1.6s ease-out 0.85s forwards;
}
.main__cta-text__plus {
  font-family: "Mont", "Onemobile", sans-serif;
  font-weight: 600;
  color: #fe5000;
  vertical-align: -16%;
  font-size: 40px;
}
.main__cta-text__label {
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  color: #ffffff;
}

.main__badge-group {
  position: absolute;
  left: 68px;
  top: 869.65px;
  width: 420px;
  height: 57px;
}

.main__last-text {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1920px;
  height: 1008px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
}
.main__last-text__copy {
  position: absolute;
  left: 484px;
  top: 395px;
  width: 700px;
  margin: 0;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 72px;
  line-height: 1.3;
  letter-spacing: -1.44px;
  color: #ffffff;
}
.main__last-text__copy span {
  color: #fe5000;
  vertical-align: middle;
  font-size: 105px;
}
.main__last-text__btn {

  position: absolute;
  left: 484px;
  top: 633px;
  width: 262px;
  height: 55px;
  max-width: none;
  display: block;
  pointer-events: auto;
}
.main__last-text__btn img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

.main__shine-wrap {
  position: relative;
  display: inline-block;
  overflow: hidden;
  z-index: 200;
}
.main__shine-wrap--badge {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 420px;
  height: 57px;
}
.main__shine-wrap--release {
  position: absolute;
  left: 1035px;
  top: 556.95px;
}
.main__shine {
  position: absolute;
  left: 0;
  top: -60%;
  width: 45%;
  height: 220%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-150%) skewX(-20deg);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
  animation: teaserShimmerSweep 3s ease-in-out infinite;
}
.main__shine-wrap--badge .main__shine {
  animation-delay: 0.2s;
}
.main__shine-wrap--release .main__shine {
  animation-delay: 1.4s;
}
@keyframes teaserShimmerSweep {
  0%, 40%   { transform: translateX(-150%) skewX(-20deg); }
  60%       { transform: translateX(250%) skewX(-20deg); }
  100%      { transform: translateX(250%) skewX(-20deg); }
}

.main__scroll-trigger {
  position: absolute;
  left: 50%;
  top: 889px;
  transform: translateX(-50%);
  width: 36px;
  height: 59px;
  z-index: 200;
}

.main__scroll-trigger__icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 59px;
  max-width: none;
  animation: teaserScrollTriggerFloat 2s ease-in-out infinite;
}
@keyframes teaserScrollTriggerFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(30px); }
  100% { transform: translateY(0); }
}

.main__stick {
  position: absolute;
  left: 183.5px;
  top: -289.59px;
  width: 180px;
  height: 295px;
  max-width: none;
  z-index: 150;
  opacity: 0;
  pointer-events: none;
}

.main__device-display-wrap {
  position: absolute;
  left: 286.64px;
  top: 420.41px;
  width: 57px;
  height: 154px;
  z-index: 150;
  opacity: 0;
}

.main__device-display {
  position: absolute;
  left: 0;
  top: 0;
  width: 57px;
  height: 154px;
  max-width: none;
}

.main__device-display--fill {
  clip-path: inset(100% 0 0 0);
}

.main__device-display--empty {
  filter: drop-shadow(0 0 0px rgba(254, 80, 0, 0));
}

#hint1.teaser__section {
  --hint1-stage-scale: calc(100vw / 1920 / 1px);
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1008;
  overflow: hidden;
  background: #000000;
}

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

.hint1__bg {
  position: absolute;
  left: 50%;
  top: 156px;
  width: 952px;
  height: 697px;
  max-width: none;
  transform: translateX(-50%);
  z-index: 1;
}

.hint1__label {
  position: absolute;
  left: 524px;
  top: 196px;
  margin: 0;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.48px;
  color: #fe5000;
  z-index: 2;
}

.hint1__cta {
  position: absolute;
  left: 964px;
  top: 448px;
  width: max-content;
  margin: 0;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 1.3;
  letter-spacing: -0.84px;
  color: #ffffff;
  text-align: center;
  z-index: 12;
  transition: top 0.6s ease-in-out;
}
#hint1.is-playing .hint1__cta {
  top: 564.77px;
  transition-delay: 1.1s;
}
.hint1__cta__plus {
  font-family: "Mont", "Onemobile", sans-serif;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.3;
  letter-spacing: -0.96px;
  color: #fe5000;
}

.hint1__cta__label {
  display: inline-block;
  opacity: 1;
  transition: opacity 0.25s ease-in-out;
}
.hint1__cta__label.is-swapping {
  opacity: 0;
}

.hint1__wave {
  position: absolute;
  left: 651.55px;
  top: 286.64px;
  width: 282px;
  height: 38px;
  z-index: 7;
  opacity: 1;
  transition: opacity 0.4s ease-out;
}

#hint1.is-playing .hint1__wave {
  opacity: 0;
}
img.hint1__wave-img {
  width: 282px;
  height: 38px;
  max-width: none;
  display: none;
}
.hint1__ripple {
  position: absolute;
  left: 0;
  top: 0;
  width: 282px;
  height: 38px;
  overflow: visible;
  z-index: 7;
  pointer-events: none;
}
.hint1__ripple-ring {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  filter: blur(0.6px);
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

.hint1__ripple-ring--1 {
  animation: teaserRippleUniform 2.1s linear infinite;
}
.hint1__ripple-ring--2 {
  animation: teaserRippleUniform 2.1s linear 0.7s infinite;
}
.hint1__ripple-ring--3 {
  animation: teaserRippleUniform 2.1s linear 1.4s infinite;
}

@keyframes teaserRippleUniform {
  0%   { transform: scale(0.82); opacity: 0;    stroke-width: 2px; }
  12%  { opacity: 0.22;                          stroke-width: 1.8px; }
  25%  { opacity: 0.38;                          stroke-width: 1.6px; }
  40%  { opacity: 0.46;                          stroke-width: 1.4px; }
  55%  { opacity: 0.4;                           stroke-width: 1.25px; }
  70%  { opacity: 0.27;                          stroke-width: 1.1px; }
  85%  { opacity: 0.12;                          stroke-width: 1px; }
  100% { transform: scale(1.14); opacity: 0;    stroke-width: 0.9px; }
}

.hint1__device {
  position: absolute;
  left: 719px;
  top: 317px;
  width: 178px;
  height: 402px;
  max-width: none;
  z-index: 8;
}

.hint1__device-mask {
  position: absolute;
  left: 812px;
  top: 465.47px;
  width: 62px;
  height: 76px;
  max-width: none;
  z-index: 9;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}
#hint1.is-playing .hint1__device-mask {
  opacity: 1;
}

.hint1__display-large {

  position: absolute;
  left: 1047.31px;
  top: 329.22px;
  max-width: none;
  z-index: 9;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}
.hint1__display-small {
  position: absolute;
  left: 842.62px;
  top: 445.06px;
  width: 12px;
  height: 90px;
  max-width: none;
  z-index: 9;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}
#hint1.is-playing .hint1__display-large,
#hint1.is-playing .hint1__display-small {
  opacity: 1;
  transition-delay: 1.1s;
}

.hint1__gage-small-wrap,
.hint1__gage-large-wrap {
  position: absolute;
  overflow: hidden;
  z-index: 10;
}

.hint1__gage-small-wrap {
  left: 846.62px;
  top: 449.06px;
  width: 4px;
  height: 68px;
  border-radius: 2px;
}
.hint1__gage-large-wrap {
  left: 1090.5px;
  top: 381px;
  width: 23px;
  height: 108px;

  border-radius: 3px;
}
.hint1__gage-small,
.hint1__gage-large {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  opacity: 1;
  clip-path: inset(99% 0 0 0);
  transition: clip-path 0.8s ease-out;
  transition-delay: 1.7s;
}
#hint1.is-playing .hint1__gage-small,
#hint1.is-playing .hint1__gage-large {
  clip-path: inset(0 0 0 0);
}

.hint1__stick {
  position: absolute;
  left: 758.73px;
  top: 236.56px;
  width: 69px;
  height: 119px;
  max-width: none;
  z-index: 10;
  transform: translateY(0);
  clip-path: inset(0 0 0% 0);
  transition: transform 0.6s ease-in-out, clip-path 0.6s ease-in-out;
}
#hint1.is-playing .hint1__stick {
  transform: translateY(55px);
  clip-path: inset(0 0 46.22% 0);
}

.hint1__btn {
  position: absolute;
  left: 827px;
  top: 251px;
  width: 51px;
  height: 51px;
  max-width: none;
  z-index: 11;
  cursor: pointer;
}

#hint2.teaser__section {
  --hint2-stage-scale: calc(100vw / 1920 / 1px);
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1008;
  overflow: hidden;
  background: #000000;
}

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

img.hint2__bg {
  position: absolute;
  left: 50%;
  top: 156px;
  width: 952px;
  height: 697px;
  max-width: none;
  transform: translateX(-50%);
  z-index: 1;
}

/* 모바일(750px 이하) 전용 배경(m_hint_bg.png). main__bg-img--mo와 동일한 패턴으로,
   기본값은 숨김 처리하고 @media (max-width: 750px) 안에서만 display:block으로
   노출한다(이 기본 규칙이 없으면 PC 폭에서도 계속 보이는 버그가 생긴다 —
   main_stage_after에서 이미 한 번 겪은 실수 패턴). .teaser__wrap img { display:block }
   (타입+클래스, 명시도 0,1,1)과 명시도를 맞추기 위해 여기서도 img.hint2__bg--mo처럼
   타입+클래스 선택자를 사용한다(단일 클래스 선택자 .hint2__bg--mo는 명시도가 낮아
   이긴다는 보장이 없음 — main__bg-img--mo에서 이미 검증된 패턴). */
img.hint2__bg--mo {
  display: none;
}

.hint2__label {
  position: absolute;
  left: 524px;
  top: 196px;
  margin: 0;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.48px;
  color: #fe5000;
  z-index: 2;
}

.hint2__black-dot {
  position: absolute;
  left: 50%;
  top: 248.84px;
  width: 378px;
  height: 379px;
  max-width: none;
  transform: translateX(-50%);
  z-index: 10;
}

.hint2__gray-circle {
  position: absolute;
  left: 50%;
  top: 140.34px;
  width: 595px;
  height: 596px;
  max-width: none;
  transform: translateX(-50%);
  z-index: 11;
}
.hint2__gray-circle.is-hidden {
  visibility: hidden;
}

.hint2__logo {
  position: absolute;
  left: 50%;
  top: 319.52px;
  width: 57px;
  height: 40px;
  max-width: none;
  transform: translateX(-50%);
  z-index: 12;
}
.hint2__logo.is-hidden {
  display: none;
}

.hint2__logo-text {
  position: absolute;
  left: 50%;
  top: 339.52px;
  margin: 0;
  width: max-content;
  font-family: "Mont", "Onemobile", sans-serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1;
  color: #ffffff;
  text-align: center;
  transform: translate(-50%, -50%);
  z-index: 12;
}

.hint2__timer {
  position: absolute;
  left: 50%;
  top: 392.11px;
  margin: 0;
  width: max-content;
  font-family: "Mont", "Onemobile", sans-serif;
  font-weight: 600;
  font-size: 78.16px;
  line-height: 1.3;
  letter-spacing: 0;
  color: #fe5000;
  text-align: center;
  transform: translateX(-50%);
  z-index: 13;
}

.hint2__start-btn,
.hint2__stop-btn,
.hint2__retry-btn {
  position: absolute;
  left: 50%;
  top: 498.84px;
  width: 176px;
  height: 51px;
  max-width: none;
  transform: translateX(-50%);
  z-index: 14;
  cursor: pointer;
}
.hint2__stop-btn {
  opacity: 0;
  pointer-events: none;
}
.hint2__retry-btn {
  opacity: 0;
  pointer-events: none;
}

.hint2__start-btn,
.hint2__stop-btn,
.hint2__retry-btn {
  transform-origin: center;
  transition: transform 0.15s ease-out;
}
.hint2__start-btn.is-pressed,
.hint2__stop-btn.is-pressed,
.hint2__retry-btn.is-pressed {
  transform: translateX(-50%) scale(0.94);
}

.hint2__desc {
  position: absolute;
  left: 50%;
  top: 708px;
  width: max-content;
  margin: 0;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 1.3;
  letter-spacing: -0.84px;
  color: #ffffff;
  text-align: center;
  transform: translateX(-50%);
  z-index: 14;
}
.hint2__desc__highlight {
  font-family: "Mont", "Onemobile", sans-serif;
  font-weight: 600;
  font-size: 42px;
  line-height: 1.3;
  letter-spacing: -0.84px;
  color: #fe5000;
}

.hint2__progress {
  position: absolute;
  left: 50%;
  top: 139px;
  width: 595px;
  height: 596px;
  transform: translateX(-50%);
  z-index: 11;
  pointer-events: none;
  background: conic-gradient(
    from 0deg at 296.5px 297.5px,
    #ff6a1a 0deg,
    #af3601 180deg,
    #ff6a1a 360deg
  );
  mask: url(#hint2ProgressMask);
  -webkit-mask: url(#hint2ProgressMask);
}
.hint2__progress-fill {
  fill: none;
  stroke: #ffffff;
  stroke-width: 23px;
  stroke-linecap: round;

  stroke-dasharray: 1121.5;
  stroke-dashoffset: 1121.5;
}
.hint2__progress.is-hidden {
  visibility: hidden;
}

.hint2__circle-glow {
  position: absolute;
  left: 50%;
  top: 130px;
  width: 613px;
  height: 614px;
  transform: translateX(-50%);
  z-index: 11;
  opacity: 0;
  pointer-events: none;
}
.hint2__circle-glow.is-visible {
  opacity: 1;
}

#quiz.teaser__section {
  --quiz-stage-scale: calc(100vw / 1920 / 1px);
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1818;
  overflow: hidden;
  background: #000000;
}

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

img.quiz__bg-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  /* main__bg-img와 동일한 버그/수정: z-index:-1은 부모 #quiz.teaser__section 자신의
     background(#000000)보다도 뒤로 밀려 완전히 안 보이게 만든다. 모바일은 이 이미지
     자체를 display:none으로 숨기고 별도의 quiz__bg-img--mo(z-index:0)를 쓰므로
     이 버그의 영향을 받지 않았지만, 데스크톱(PC)에서는 이 규칙이 그대로 적용되어
     배경이 보이지 않는 원인이 되었다. z-index:0으로 수정. */
  z-index: 0;
}

/* 모바일(750px 이하) 전용 배경(m_quiz_bg.png). main__bg-img--mo/hint2__bg--mo와
   동일한 패턴으로 기본값은 숨김 처리하고 @media (max-width: 750px) 안에서만
   display:block으로 노출한다. */
img.quiz__bg-img--mo {
  display: none;
}

/* main_stage_m/main_stage_after와 동일한 패턴: 모바일 전용 신규 블록은 기본값을
   숨김 처리하고 @media (max-width: 750px) 안에서만 display:block으로 노출한다. */
.quiz_stage_m {
  display: none;
}

.quiz__top,
.quiz__bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1818px;
  pointer-events: none;
}
.quiz__top > a,
.quiz__bottom > a {
  pointer-events: auto;
}

.quiz__question {
  position: absolute;
  left: 50%;
  top: 281.27px;
  transform: translateX(-50%);
  width: 900px;
  margin: 0;
  text-align: center;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.3;
  color: #ffffff;
}

.quiz__answer {
  position: absolute;
  left: 50%;
  top: 370px;
  transform: translateX(-50%);
  width: 1200px;
  margin: 0;
  text-align: center;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 72px;
  line-height: 1.3;
  letter-spacing: 0;
  color: #ffffff;
}

.quiz__underline {
  position: absolute;
  left: 1046px;
  top: 450px;
  width: 198px;
  height: 4px;
  max-width: none;
}

.quiz__hint {
  position: absolute;
  left: 50%;
  top: 487.47px;
  transform: translateX(-50%);
  width: 900px;
  margin: 0;
  text-align: center;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: 0;
  color: #2ba347;
}

.quiz__btn {
  position: absolute;
  left: 50%;
  top: 579.27px;
  transform: translateX(-50%);
  width: 262px;
  height: 55px;
  display: block;
}
.quiz__btn img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

.quiz__notice {
  position: absolute;
  /* 요청: 고정 left(711px) 대신 가로 중앙 정렬(left:50% + translateX(-50%)). */
  left: 50%;
  transform: translateX(-50%);
  top: 694px;
  margin: 0;
  text-align: center;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: 0;
  color: #ffffff;
}
/* 이벤트 기간 날짜 부분("2026. 08. 03 ~ 2026. 08. 09")만 Mont semibold로 표시
   (요청 스펙). 숫자/기호라 Mont 글리프로 렌더링되고, 만약의 비라틴 문자는
   Onemobile로 폴백. */
.quiz__notice span {
  font-family: "Mont", "Onemobile", sans-serif;
  font-weight: 600;
}

.quiz__bottom-text {
  position: absolute;
  left: 50%;
  top: 1221.24px;
  transform: translateX(-50%);
  width: 304px;
  height: 54px;
  max-width: none;
}

.quiz__bottom-copy {
  position: absolute;
  left: 50%;
  top: 1300px;
  transform: translateX(-50%);
  width: 1200px;
  margin: 0;
  text-align: center;
  font-family: "Onemobile", "Mont", sans-serif;
  font-weight: 700;
  font-size: 72px;
  line-height: 1.3;
  letter-spacing: 0;
  color: #ffffff;
}

.quiz__bottom-badge {
  position: absolute;
  left: 50%;
  top: 1463px;
  transform: translateX(-50%);
  width: 420px;
  height: 57px;
  max-width: none;
}

.quiz__cross {
  position: absolute;
  max-width: none;
  pointer-events: none;
  will-change: transform, opacity;
}
.quiz__cross--1 {
  left: 464px;
  top: 95px;
  width: 70px;
  height: 71px;
  animation: quizCrossBreathe 4.2s ease-in-out infinite;
  animation-delay: 0s;
}
.quiz__cross--2 {
  left: 1536px;
  top: 220px;
  width: 107px;
  height: 108px;
  animation: quizCrossBreathe 5.1s ease-in-out infinite;
  animation-delay: 0.6s;
}
.quiz__cross--3 {
  left: 245px;
  top: 505px;
  width: 94px;
  height: 95px;
  animation: quizCrossBreathe 4.7s ease-in-out infinite;
  animation-delay: 1.1s;
}
.quiz__cross--4 {
  left: 1614px;
  top: 494px;
  width: 59px;
  height: 60px;
  animation: quizCrossBreathe 3.8s ease-in-out infinite;
  animation-delay: 1.7s;
}
@keyframes quizCrossBreathe {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

.main__device-cap--disk-only {
  mask: url(#capDiskOnlyMask);
  -webkit-mask: url(#capDiskOnlyMask);
}

.main__device-cap-crop {
  z-index: 12;
  pointer-events: none;
}
.gp-notice {
  position: relative;
  width: 100%;
  background: #262626;
  /* 주의(수정 이력): 원래 padding: 32 0 (상하 대칭) → 펼침 상태에서 padding-bottom
     틈으로 부모 배경(#262626)이 비치는 버그로 padding-top만 남기고 하단을
     .gp-notice__bottom으로 옮겼다가 → 접힘(slideUp) 상태에서 하단 여백까지 같이
     접혀 섹션이 원래보다 짧아지는 부작용(사용자 보고)이 생겨 다시 상하 대칭으로
     복원. 대신 펼침 상태의 .gp-notice__bottom이 padding-bottom(+32)과
     margin-bottom(-32) 상쇄 쌍으로 이 하단 여백 영역"만" 어두운 배경으로 덮는다
     (아래 .gp-notice__bottom 규칙 참고). 접힘: 밝은 배경의 대칭 여백(원래 디자인),
     펼침: 어두운 배경이 하단 끝까지 — 두 상태 모두 정상. */
  padding-top: calc(32 * var(--teaser-unit));
  padding-bottom: calc(32 * var(--teaser-unit));
  font-family: var(--font-en), "NotoSans", sans-serif;
  color: #ffffff;
}
.gp-notice__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12%;
  cursor: pointer;
  background: #262626;
}
.gp-notice__top-left {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--teaser-unit));
}
.gp-notice__icon {
  width: 15%;
}
.gp-notice__label {
  font-size: calc(28 * var(--teaser-unit));
  font-weight: 700;
  color: #ffffff;
}
.gp-notice__arrow {
  width: calc(24 * var(--teaser-unit));
  height: calc(24 * var(--teaser-unit));
  border: none;
  background: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.3s ease;
  cursor: pointer;
}
.gp-notice.is-closed .gp-notice__arrow {
  transform: rotate(180deg);
}
.gp-notice__bottom {
  overflow: hidden;
  max-height: 0;
  background: #333333;
  /* 주의(버그 수정 이력): (1) 항상 padding-bottom을 줬더니 max-height:0이 padding을
     접지 못해 닫힘 상태에 32px 어두운 띠가 남았고, (2) 열림 상태에만 padding을 줬더니
     부모의 하단 여백이 아예 없어져 slideUp 시 그 여백만큼 섹션이 같이 접히는
     부작용이 생겼다. 현재 방식: 부모(.gp-notice)의 padding-bottom(32)은 항상 유지
     (접힘 상태의 대칭 여백 = 원래 디자인), 열림 상태에서만 이 요소가
     padding-bottom(+32) / margin-bottom(-32) "상쇄 쌍"으로 부모의 하단 여백 영역
     안으로 파고들어 어두운 배경(#333333)으로 덮는다 — 총 높이는 변하지 않으므로
     slideUp/slideDown 거리도 원래와 동일하고, 두 값이 transition 내내 서로
     상쇄되어 애니메이션도 부드럽다. */
  padding-bottom: 0;
  margin-bottom: 0;
  transition: max-height 0.3s ease, margin-top 0.3s ease, padding-bottom 0.3s ease, margin-bottom 0.3s ease;
}
.gp-notice:not(.is-closed) .gp-notice__bottom {
  margin-top: calc(32 * var(--teaser-unit));
  /* 펼침 상태에서만: 하단 여백 영역을 어두운 배경으로 덮는 상쇄 쌍(위 주석 참고). */
  padding-bottom: calc(32 * var(--teaser-unit));
  margin-bottom: calc(-32 * var(--teaser-unit));
}
.gp-notice__title {
  margin: 20px 0 calc(8 * var(--teaser-unit));
  padding: calc(16 * var(--teaser-unit)) 12% 0;
  font-size: calc(28 * var(--teaser-unit));
  font-weight: 700;
  color: #ffffff;
}
.gp-notice__list {
  margin: 0;
  padding: 0 12% calc(32 * var(--teaser-unit)) calc(12% + (16 * var(--teaser-unit)));
  font-size: calc(20 * var(--teaser-unit));
  line-height: 1.6;
  color: #ffffff;
  list-style: disc;
}
.gp-notice__list li {
  font-size: calc(20 * var(--teaser-unit));
  margin-bottom: calc(6 * var(--teaser-unit));
}
.gp-notice__list li:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   모바일(750px 이하) #main: PC용 .main__device-group을 그대로 재사용.
   데스크탑에서 쓰던 디바이스 애니메이션(hpp_index_page_scroll.js, #main 하위
   선택자 기반)을 그대로 재사용하기 위해 마크업은 이동하지 않고 CSS로만
   .main__stage의 스케일/숨김을 무효화하고 위치만 조정한다.
   ========================================================================== */
@media (max-width: 750px) {
  .main__stage {
    /* PC 스케일(scale(var(--main-stage-scale)))을 무효화하고 .main__device-group을
       PC와 동일한 절대 px 크기(447x719px)로 노출한다. */
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
    overflow: visible;
    display: block;
  }
  /* 주의: .main__stage > svg (capDiskOnlyMask 정의용)는 절대 display:none으로
     숨기면 안 된다. 이 svg는 width/height:0으로 이미 화면에 아무 영향을 주지
     않지만, 그 안의 <mask id="capDiskOnlyMask">를 .main__device-cap--disk-only가
     mask:url(#capDiskOnlyMask)로 참조하고 있다. 브라우저(특히 Safari/WebKit)는
     mask가 참조하는 대상이 display:none인 조상 안에 있으면 마스크 자체를
     "깨진 참조"로 취급해 해당 요소를 완전히 안 보이게 만들어버린다 — 캡이
     열리면서 크롭(디스크만 보이게) 레이어로 크로스페이드될 때 디바이스 캡이
     통째로 사라지는 버그의 원인이었다. */
  /* .main__device-group을 제외한 PC 전용 자식 요소는 모바일에서 숨긴다.
     (.teaser__wrap img { display:block } 보다 우선하도록 .main__stage로 스코프하여 명시도를 높임) */
  .main__stage .main__glo-logo,
  .main__stage .main__right-content-group,
  .main__stage .main__badge-group,
  .main__stage .main__last-text,
  .main__stage .main__footnote,
  .main__stage .main__scroll-trigger {
    display: none;
  }
  .main__device-group {
    /* 위치는 뷰포트 폭에 비례해서 이동하도록 vw 기반 unit(--teaser-unit-mo) 사용.
       750px 기준 좌표: 기존(269,498)에서 우측으로 10px 이동한 (279,498)에서
       우측으로 20px 추가 이동한 (299,498)에서 다시 우측으로 10px 추가 이동
       -> (309, 498).

       크기는 기존(447x719px, 고정 px) 대비 90%이면서, 브라우저 폭이 바뀌어도(vw 기준)
       비례적으로 확대/축소되어야 한다. 하지만 .main__device-cap/.main__stick/
       .main__device-display-wrap 등 하위 요소들이 모두 이 그룹 내부 좌표계에서
       고정 px(left/top/width/height)로 배치돼 있고, hpp_index_page_scroll.js가
       GSAP으로 이 하위 요소들의 left/top(px)을 직접 애니메이션하므로, 그룹의
       width/height 자체를 vw 값으로 바꾸면 하위 요소들의 좌표 기준(내부 좌표계 크기)이
       바뀌어 애니메이션 좌표가 전부 어긋난다.

       따라서 그룹의 width/height(447x719px)는 그대로 두고, transform:scale()로 시각적
       크기만 축소하되, scale 값 자체를 --teaser-unit-mo-num(= 현재 뷰포트폭/750, 즉
       vw 비율 그 자체)에 비례하도록 계산해 뷰포트 폭에 따라 함께 커지고 작아지게 만든다.
       (750px 뷰포트에서 --teaser-unit-mo-num=1 이므로 scale=0.9가 되어 정확히 90%.)
       transform-origin:top left이므로 left/top은 축소 전 447x719 박스 기준 좌상단
       좌표를 그대로 사용한다.

       GSAP이 이 요소 자체에도 직접 x/xPercent transform을 적용하는데(스테이지2/4 이동),
       GSAP은 기존 transform의 scale 성분을 보존한 채 translate 성분만 갱신하므로
       이 scale과 충돌하지 않는다 — 단, GSAP의 x(px) 값 자체는 화면 기준 절대 px raw
       이동량이라 scale의 영향을 받지 않으므로, 그 이동량도 같은 비율로 스케일해서
       hpp_index_page_scroll.js에서 별도로 보정한다. */
    left: calc(309 * var(--teaser-unit-mo));
    top: calc(498 * var(--teaser-unit-mo));
    transform: scale(calc(0.9 * var(--teaser-unit-mo-num)));
    transform-origin: top left;
  }
}

/* ==========================================================================
   모바일(750px 이하) #hint2: PC의 hpp_teaser_hint2.js(10초 카운트다운 로직)를
   그대로 재사용하기 위해, JS가 querySelector로 찾는 요소들(.hint2__progress,
   .hint2__progress-fill, .hint2__circle-glow, .hint2__logo, .hint2__logo-text,
   .hint2__timer, .hint2__start-btn/--stop-btn/--retry-btn, .hint2__desc)은
   마크업을 옮기거나 복제하지 않고 그대로 둔 채, .hint2__stage의 PC 스케일/중앙정렬만
   무효화하고 각 요소를 모바일 좌표로 재배치한다(#main .main__device-group과 동일한 전략).

   원형 그래픽(black-dot/gray-circle/progress/circle-glow/logo/버튼)은 모바일 배경
   이미지(m_hint_bg.png, 654px)와 PC hint2__bg(952px) 비율(654/952≈0.687)만큼
   transform:scale()로 축소한다. SVG 마스크(#hint2ProgressMask)의 좌표/반지름과
   JS의 CIRCUMFERENCE(1121.5) 상수는 PC 값 그대로 두고(=JS 미수정 원칙 유지),
   .hint2__progress 자체를 scale()로 시각적으로만 축소해 크기를 맞춘다.
   ========================================================================== */
@media (max-width: 750px) {
  #hint2.teaser__section {
    aspect-ratio: 750 / 1040;
  }

  .hint2__stage {
    /* PC 스케일(scale(var(--hint2-stage-scale)))과 중앙정렬(translate(-50%,-50%))을
       무효화하고, 섹션 전체를 덮는 모바일 전용 좌표계로 전환한다. */
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: none;
  }

  /* PC 전용 배경(hint2__bg)은 숨기고, 모바일 전용 배경(hint2__bg--mo)만 노출.
     hint2__bg--mo는 .hint2__stage 밖(#hint2 직계 자식)에 있으므로 별도 처리.
     .teaser__wrap img { display:block }과 명시도를 맞추기 위해 img.으로 스코프. */
  img.hint2__bg {
    display: none;
  }
  img.hint2__bg--mo {
    display: block;
    position: absolute;
    left: calc(48 * var(--teaser-unit-mo));
    top: calc(120 * var(--teaser-unit-mo));
    width: calc(654 * var(--teaser-unit-mo));
    height: calc(640 * var(--teaser-unit-mo));
    max-width: none;
    z-index: 1;
  }

  /* 사용자가 제공한 참고 스크린샷과 픽셀 비교(카드 상단/폭 대비 링 지름·간격 비율)
     결과 원형 그래픽 스케일을 0.687 -> 0.8447로, 카드 상단부터 링까지의 간격도
     더 벌어지도록 재조정(2026-07-28). 스케일이 바뀌었으므로 모든 top/left를
     같은 "PC 상대 오프셋 앵커" 공식으로 재계산했다(앵커 상수만 120->172.33로 이동). */
  .hint2__label {
    left: 50%;
    top: calc(160 * var(--teaser-unit-mo));
    font-size: calc(28 * var(--teaser-unit-mo));
    transform: translateX(-50%);
  }

  /* black-dot/gray-circle/circle-glow/logo/시작·정지·재시도 버튼은 전부 <img> 태그라
     .teaser__wrap img { max-width:100%; }(타입+클래스, 명시도 0,1,1)이 여기서 지정하는
     고정 width(예: 595px)보다 우선 적용되어, 뷰포트가 좁아 .hint2__stage의 실제 폭이
     595px보다 작아지는 시점(750px 미만)부터 이미지가 찌그러지는 버그가 있었다.
     (main__bg-img--mo 등과 동일하게) img.으로 스코프해 명시도를 맞춰 해결. */
  img.hint2__black-dot {
    left: calc(215.35 * var(--teaser-unit-mo));
    top: calc(250.75 * var(--teaser-unit-mo));
    width: 378px;
    height: 379px;
    max-width: none;
    transform: scale(calc(0.8447 * var(--teaser-unit-mo-num)));
    transform-origin: top left;
  }

  img.hint2__gray-circle {
    left: calc(123.7 * var(--teaser-unit-mo));
    top: calc(159.1 * var(--teaser-unit-mo));
    width: 595px;
    height: 596px;
    max-width: none;
    transform: scale(calc(0.8447 * var(--teaser-unit-mo-num)));
    transform-origin: top left;
  }

  .hint2__progress {
    left: calc(123.7 * var(--teaser-unit-mo));
    top: calc(157.97 * var(--teaser-unit-mo));
    width: 595px;
    height: 596px;
    transform: scale(calc(0.8447 * var(--teaser-unit-mo-num)));
    transform-origin: top left;
  }

  img.hint2__circle-glow {
    left: calc(116.1 * var(--teaser-unit-mo));
    top: calc(150.37 * var(--teaser-unit-mo));
    width: 613px;
    height: 614px;
    max-width: none;
    transform: scale(calc(0.8447 * var(--teaser-unit-mo-num)));
    transform-origin: top left;
  }
  .hint2__circle-glow.is-visible {
    opacity: 1;
  }

  img.hint2__logo {
    left: calc(350.93 * var(--teaser-unit-mo));
    top: calc(310.45 * var(--teaser-unit-mo));
    width: 57px;
    height: 40px;
    max-width: none;
    transform: scale(calc(0.8447 * var(--teaser-unit-mo-num)));
    transform-origin: top left;
  }

  .hint2__logo-text {
    left: 50%;
    top: calc(327.34 * var(--teaser-unit-mo));
    font-size: calc(26 * 0.8447 * var(--teaser-unit-mo));
    transform: translate(-50%, -50%);
  }

  .hint2__timer {
    left: 50%;
    top: calc(371.76 * var(--teaser-unit-mo));
    font-size: calc(78.16 * 0.8447 * var(--teaser-unit-mo));
    transform: translateX(-50%);
  }

  img.hint2__start-btn,
  img.hint2__stop-btn,
  img.hint2__retry-btn {
    left: calc(300.67 * var(--teaser-unit-mo));
    top: calc(461.91 * var(--teaser-unit-mo));
    width: 176px;
    height: 51px;
    max-width: none;
    transform: scale(calc(0.8447 * var(--teaser-unit-mo-num)));
    transform-origin: top left;
  }
  .hint2__start-btn.is-pressed,
  .hint2__stop-btn.is-pressed,
  .hint2__retry-btn.is-pressed {
    transform: scale(calc(0.8447 * var(--teaser-unit-mo-num) * 0.94));
  }

  .hint2__desc {
    left: 50%;
    top: calc(638.58 * var(--teaser-unit-mo));
    width: calc(654 * var(--teaser-unit-mo));
    font-size: calc(36 * var(--teaser-unit-mo));
    letter-spacing: calc(-0.02em);
    transform: translateX(-50%);
  }
  .hint2__desc__highlight {
    font-size: calc(36 * var(--teaser-unit-mo));
  }
}

/* ==========================================================================
   모바일(750px 이하) #quiz: 지금 단계에서는 배경 이미지(m_quiz_bg.png)와
   aspect-ratio만 적용한다. 문구/정답/힌트/참여 버튼 등 텍스트 요소의 모바일
   전용 배치(quiz_stage_m 등)는 다음 단계에서 별도로 진행 예정 — 지금은 PC
   전용 .quiz__stage/.quiz__top/.quiz__bottom을 그대로 두고 손대지 않는다.
   ========================================================================== */
@media (max-width: 750px) {
  /* 섹션 자체 높이는 100px 줄여 750/1432로 표시하되(요청: "quiz section이 height:100px
     정도 줄어야 하는데" → "빈 공간을 축소" 확정), 배경 이미지(m_quiz_bg.png, 750x1532)는
     원본 비율 그대로 유지한 채 top:0에 고정 배치한다. #quiz.teaser__section에 이미
     overflow:hidden이 걸려있어(PC 스코프 규칙, 위 참고) 이미지 하단 약 100px만
     자연스럽게 잘려나가고, 콘텐츠(quiz_stage_m 등)의 위치는 전혀 바뀌지 않는다. */
  #quiz.teaser__section {
    aspect-ratio: 750 / 1432;
  }

  /* PC 전용 배경(quiz__bg-img)은 숨기고, 모바일 전용 배경(quiz__bg-img--mo)만 노출.
     .teaser__wrap img { display:block }과 명시도를 맞추기 위해 img.으로 스코프. */
  img.quiz__bg-img {
    display: none;
  }
  img.quiz__bg-img--mo {
    display: block;
    position: absolute;
    left: 0;
    top: calc(-100 * var(--teaser-unit-mo));
    width: 100%;
    height: calc(100% * 1532 / 1432);
    max-width: none;
    z-index: 0;
  }

  /* m_quiz_bg.png에는 장식용 십자(+) 그래픽이 이미 이미지 안에 그려져 있어서,
     PC 전용 .quiz__cross--1~4(quiz_cross1~4.png, breathe 애니메이션)를 그대로
     두면 서로 다른 위치/스케일로 두 세트의 십자가 겹쳐 보이는 문제가 있다.
     모바일에서는 PC 전용 십자 요소를 숨긴다. .quiz__cross는 <img> 태그라
     .teaser__wrap img { display:block }(명시도 0,1,1)이 단일 클래스 선택자보다
     우선하므로 img.으로 스코프해야 실제로 숨겨진다(이 프로젝트에서 반복적으로
     나온 명시도 함정 — main__bg-img--mo, hint2__bg--mo 등과 동일 패턴). */
  img.quiz__cross {
    display: none;
  }

  /* 모바일 전용 quiz_stage_m 텍스트/버튼 블록을 새로 노출하므로, PC 전용
     .quiz__top(문구/정답/힌트/버튼/공지), .quiz__bottom(하단 카피/배지)은
     중복 표시되지 않도록 숨긴다. quiz_stage_m__bottom이 그 모바일 버전. */
  .quiz__top,
  .quiz__bottom {
    display: none;
  }

  .quiz_stage_m {
    display: block;
    position: relative;
    z-index: 1;
    padding-top: calc(140 * var(--teaser-unit-mo));
    text-align: center;
  }

  .quiz_stage_m__question {
    margin: 0;
    font-weight: 700;
    font-size: calc(40 * var(--teaser-unit-mo));
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #ffffff;
  }

  .quiz_stage_m__answer {
    margin: calc(20 * var(--teaser-unit-mo)) 0 0;
    font-weight: 700;
    font-size: calc(66 * var(--teaser-unit-mo));
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: #ffffff;
  }
  .quiz_stage_m__answer__blank {
    text-decoration: underline;
    text-decoration-thickness: calc(2 * var(--teaser-unit-mo));
    text-underline-offset: calc(16 * var(--teaser-unit-mo));
  }

  .quiz_stage_m__hint {
    margin: calc(20 * var(--teaser-unit-mo)) 0 0;
    font-weight: 700;
    font-size: calc(24 * var(--teaser-unit-mo));
    line-height: 1.3;
    letter-spacing: 0;
    color: #2ba347;
  }

  .quiz_stage_m__btn {
    margin: calc(60 * var(--teaser-unit-mo)) auto 0;
    display: block;
    width: fit-content;
  }
  img.quiz_stage_m__btn-img,
  .quiz_stage_m__btn img {
    display: block;
    width: calc(400 * var(--teaser-unit-mo));
    max-width: none;
  }

  .quiz_stage_m__notice {
    margin: calc(40 * var(--teaser-unit-mo)) 0 0;
    font-weight: 700;
    font-size: calc(25 * var(--teaser-unit-mo));
    line-height: 1.5;
    letter-spacing: 0;
    color: #ffffff;
  }
  .quiz_stage_m__notice__semibold {
    font-weight: 600;
  }

  .quiz_stage_m__bottom {
    margin-top: calc(260 * var(--teaser-unit-mo));
  }
  img.quiz_stage_m__bottom-text {
    display: block;
    margin: 0 auto;
    width: calc(216 * var(--teaser-unit-mo));
    height: calc(36 * var(--teaser-unit-mo));
    max-width: none;
  }
  .quiz_stage_m__bottom-copy {
    margin: calc(15 * var(--teaser-unit-mo)) 0 0;
    font-weight: 700;
    font-size: calc(50 * var(--teaser-unit-mo));
    line-height: 1.3;
    letter-spacing: 0;
    color: #ffffff;
  }
  img.quiz_stage_m__bottom-badge {
    display: block;
    margin: calc(30 * var(--teaser-unit-mo)) auto 0;
    width: calc(284 * var(--teaser-unit-mo));
    height: calc(38 * var(--teaser-unit-mo));
    max-width: none;
  }
}

/* ==========================================================================
   모바일(750px 이하) .gp-notice(유의사항): 기존에는 --teaser-unit(1920px 기준)
   값을 그대로 썼기 때문에 750px 폭에서는 폰트/여백이 지나치게 작게 렌더링되는
   문제가 있었다(요청: "gp-notice 도 첨부 이미지 같은 비율이 되어야 해" +
   375px 기준 참고 스크린샷 첨부). 참고 이미지에서 좌측 여백/아이콘 지름/화살표
   위치 등을 픽셀 비율로 측정(PIL numpy)해 750px 기준으로 환산한 값을 사용해
   --teaser-unit-mo 기반 모바일 전용 레이아웃을 새로 정의한다. */
@media (max-width: 750px) {
  .gp-notice {
    /* 데스크톱과 동일한 상쇄 쌍 방식(기본 .gp-notice 규칙의 주석 참고) —
       상하 대칭 여백 유지 + 열림 상태의 __bottom이 하단 여백을 어두운 배경으로 덮음. */
    padding-top: calc(32 * var(--teaser-unit-mo));
    padding-bottom: calc(32 * var(--teaser-unit-mo));
  }
  .gp-notice__top {
    padding: 0 calc(48 * var(--teaser-unit-mo));
    gap: calc(20 * var(--teaser-unit-mo));
  }
  .gp-notice__top-left {
    gap: calc(16 * var(--teaser-unit-mo));
  }
  img.gp-notice__icon {
    display: block;
    width: calc(48 * var(--teaser-unit-mo));
    height: calc(48 * var(--teaser-unit-mo));
    max-width: none;
  }
  .gp-notice__label {
    font-size: calc(30 * var(--teaser-unit-mo));
  }
  .gp-notice__arrow {
    width: calc(32 * var(--teaser-unit-mo));
    height: calc(32 * var(--teaser-unit-mo));
    flex-shrink: 0;
  }
  .gp-notice:not(.is-closed) .gp-notice__bottom {
    margin-top: calc(32 * var(--teaser-unit-mo));
    padding-bottom: calc(32 * var(--teaser-unit-mo));
    margin-bottom: calc(-32 * var(--teaser-unit-mo));
  }
  .gp-notice__title {
    margin: calc(20 * var(--teaser-unit-mo)) 0 calc(16 * var(--teaser-unit-mo));
    padding: calc(16 * var(--teaser-unit-mo)) calc(48 * var(--teaser-unit-mo)) 0;
    font-size: calc(30 * var(--teaser-unit-mo));
  }
  .gp-notice__list {
    padding: 0 calc(48 * var(--teaser-unit-mo)) calc(32 * var(--teaser-unit-mo)) calc(48 * var(--teaser-unit-mo) + 20 * var(--teaser-unit-mo));
    font-size: calc(24 * var(--teaser-unit-mo));
    line-height: 1.6;
  }
  .gp-notice__list li {
    font-size: calc(24 * var(--teaser-unit-mo));
    margin-bottom: calc(12 * var(--teaser-unit-mo));
  }
}