@charset "UTF-8";

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

/* ==========================================================================
   글로데이 이벤트 페이지 — 코드네임 gloday
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 스코프 & 리셋 (전역 태그 금지 — CLAUDE.md §1)
   -------------------------------------------------------------------------- */
.gloday__wrap {
  --gloday-unit: 0.0520833vw; /* 1920 기준 1px */
  --font-en: "Mont";
  --font-kr: "Onemobile";
  --gloday-orange: #fe5000;
  position: relative;
  width: 100%;
  font-family: var(--font-en), var(--font-kr), sans-serif;
  color: #000;
  word-break: keep-all;
}
.gloday__wrap, .gloday__wrap * { box-sizing: border-box; }
.gloday__wrap img { max-width: 100%; display: block; }
.gloday__wrap p, .gloday__wrap ul, .gloday__wrap h1, .gloday__wrap h2, .gloday__wrap h3 { margin: 0; }
.gloday__wrap ul { padding: 0; list-style: none; }
.gloday__wrap a { text-decoration: none; color: inherit; }
.gloday__wrap em { font-style: normal; color: var(--gloday-orange); }
.gloday__wrap strong { font-weight: 700; }
.gloday__wrap .gloday__num { font-family: var(--font-en), sans-serif; }

/* 섹션 공통: 배경 이미지를 원본 비율로 늘림 (§2). 서브픽셀 틈 방지용 margin-bottom -1px */
.gloday__sec {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: -1px;
}
.gloday__bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; }
.gloday__wrap img.gloday__bg { max-width: none; }
.gloday__wrap .gloday__pc-only { display: block; }
.gloday__wrap .gloday__mo-only { display: none; }
.gloday__wrap img.gloday__pc-only { display: block; }
.gloday__wrap img.gloday__mo-only { display: none; }
.gloday__wrap .gloday__btn {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(15 * var(--gloday-unit)) calc(30 * var(--gloday-unit));
  background: var(--gloday-orange);
  font-weight: 700;
  font-size: calc(20 * var(--gloday-unit));
  line-height: 1.3;
  color: #fff;
  white-space: nowrap;
}
.gloday__wrap .gloday__btn--black { background: #000; color: #fff; }
.gloday__wrap .gloday__btn--white { background: #fff; color: var(--gloday-orange); }

.gloday__footnote {
  position: absolute;
  left: calc(60 * var(--gloday-unit));
  bottom: calc(40 * var(--gloday-unit));
  z-index: 2;
  font-family: var(--font-en), "NotoSans", sans-serif;
  font-weight: 400;
  font-size: calc(14 * var(--gloday-unit));
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: #000;
  white-space: nowrap;
}

.gloday__txt { position: absolute; z-index: 2; white-space: nowrap; }
.gloday__txt--center { left: 0; width: 100%; text-align: center; }
.gloday__btn--center { left: 0; right: 0; margin-left: auto; margin-right: auto; width: max-content; }

/* --------------------------------------------------------------------------
   1. KV
   -------------------------------------------------------------------------- */
.gloday__kv { height: calc(1008 * var(--gloday-unit)); background: #fff6ee; }
.gloday__kv-title {
  left: calc(362 * var(--gloday-unit));
  top: calc(286 * var(--gloday-unit));
  font-size: calc(72 * var(--gloday-unit));
  line-height: 1.25;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.gloday__kv-title .gloday__num { font-weight: 600; }
/* ★ 서버(AEM) brand.css 에 `[data-language="ko"][data-country="kr"] h1` (특정도 0,0,2,1) 규칙이 있어
   클래스 1개짜리 .gloday__kv-title(0,0,1,0)의 font-family / font-size / line-height 를 덮어씀
   (Apple SD Gothic Neo · 4rem · 5.0625rem 으로 렌더). 로컬에는 brand.css 가 없어 재현되지 않음.
   → 더 높은 특정도(0,0,3,1)로 재선언. MO 미디어쿼리에도 같은 셀렉터로 font-size 재선언 필요 */
.gloday__wrap .gloday__kv h1.gloday__kv-title {
  font-family: var(--font-en), var(--font-kr), sans-serif;
  font-size: calc(72 * var(--gloday-unit));
  line-height: 1.25;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0;
}
.gloday__kv-copy {
  left: calc(362 * var(--gloday-unit));
  top: calc(495.9 * var(--gloday-unit));
  font-size: calc(42 * var(--gloday-unit));
  line-height: 1.3;
  letter-spacing: -0.03em;
}
.gloday__kv-btn { left: calc(362 * var(--gloday-unit)); top: calc(685.5 * var(--gloday-unit)); }
.gloday__kv .gloday__footnote { line-height: 1.4; letter-spacing: -0.04em; }

/* --------------------------------------------------------------------------
   2. 영상 
   -------------------------------------------------------------------------- */
.gloday__video { height: calc(1080 * var(--gloday-unit)); background: #000; }
.gloday__video-el {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* --------------------------------------------------------------------------
   3. 오렌지 block
   -------------------------------------------------------------------------- */
.gloday__day { height: calc(679 * var(--gloday-unit)); background: var(--gloday-orange); color: #fff; }
.gloday__day-calendar {
  position: absolute; z-index: 1;
  left: calc(869.38 * var(--gloday-unit));
  top: calc(100 * var(--gloday-unit));
  width: calc(181.24 * var(--gloday-unit));
}
.gloday__day-title {
  top: calc(330.5 * var(--gloday-unit));
  font-size: calc(62 * var(--gloday-unit));
  line-height: 1.25;
  letter-spacing: -0.03em;
  font-weight: 700;
  text-align: center;
}
.gloday__day-title em { color: #000; }
.gloday__day-copy {
  top: calc(428 * var(--gloday-unit));
  font-size: calc(32 * var(--gloday-unit));
  line-height: 1.3;
  letter-spacing: -0.03em;
  text-align: center;
}
.gloday__day-btn { bottom: calc(103 * var(--gloday-unit)); }
.gloday__day .gloday__footnote { color: #fff; bottom: calc(30 * var(--gloday-unit)); }

/* --------------------------------------------------------------------------
   4. 오늘 글로를 만나는~~~
   -------------------------------------------------------------------------- */
.gloday__buy { height: calc(1008 * var(--gloday-unit)); background: #ffe0d2; }
.gloday__buy-title {
  left: calc(362 * var(--gloday-unit));
  top: calc(285.5 * var(--gloday-unit));
  font-size: calc(72 * var(--gloday-unit));
  line-height: 1.25;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.gloday__buy-copy {
  left: calc(362 * var(--gloday-unit));
  top: calc(495.9 * var(--gloday-unit));
  font-size: calc(42 * var(--gloday-unit));
  line-height: 1.3;
  letter-spacing: -0.03em;
}
.gloday__buy-btn { left: calc(362 * var(--gloday-unit)); top: calc(685.5 * var(--gloday-unit)); }

/* --------------------------------------------------------------------------
   5. 글로 데이 단 하루 혜택
   -------------------------------------------------------------------------- */
.gloday__benefit { height: calc(1008 * var(--gloday-unit)); background: #fff6ee; }
.gloday__benefit-sub {
  top: calc(100.25 * var(--gloday-unit));
  font-size: calc(42 * var(--gloday-unit));
  line-height: 1.25;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: #0a0a0a;
  text-align: center;
}
.gloday__benefit-title {
  top: calc(163.25 * var(--gloday-unit));
  font-size: calc(62 * var(--gloday-unit));
  line-height: 1.25;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: #0a0a0a;
  text-align: center;
}
.gloday__card-txt {
  position: absolute; z-index: 2;
  top: calc(339 * var(--gloday-unit));
  width: calc(415 * var(--gloday-unit));
  display: flex; flex-direction: column; align-items: center;
  gap: calc(19 * var(--gloday-unit));
  text-align: center; white-space: nowrap;
  color: #0a0a0a;
}
.gloday__card-txt--1 { left: calc(447.5 * var(--gloday-unit)); }
.gloday__card-txt--2 { left: calc(1057.5 * var(--gloday-unit)); }
.gloday__card-label {
  font-family: var(--font-en), sans-serif;
  font-weight: 600;
  font-size: calc(22 * var(--gloday-unit));
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: var(--gloday-orange);
}
.gloday__card-body { display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--gloday-unit)); }
.gloday__card-title {
  font-weight: 700;
  font-size: calc(34 * var(--gloday-unit));
  line-height: 1.25;
  letter-spacing: -0.03em;
}
.gloday__card-desc {
  font-weight: 700;
  font-size: calc(24 * var(--gloday-unit));
  line-height: 1.4;
  letter-spacing: -0.03em;
}
.gloday__card-desc .gloday__num { font-weight: 600; }
.gloday__card-note {
  position: absolute; z-index: 2;
  bottom: calc(109 * var(--gloday-unit));
  font-family: var(--font-en), "NotoSans", sans-serif;
  font-weight: 400;
  font-size: calc(14 * var(--gloday-unit));
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: #525252;
  white-space: nowrap;
}
.gloday__card-note--1 { left: calc(382 * var(--gloday-unit)); }
.gloday__card-note--2 { left: calc(992 * var(--gloday-unit)); }
.gloday__card-btn { bottom: calc(149 * var(--gloday-unit)); margin-left: auto; margin-right: auto; width: max-content; }
.gloday__card-btn--1 { left: calc(362 * var(--gloday-unit)); right: calc(972 * var(--gloday-unit)); }
.gloday__card-btn--2 { left: calc(972 * var(--gloday-unit)); right: calc(362 * var(--gloday-unit)); }

/* --------------------------------------------------------------------------
   6. 하이퍼 프로 플러스 리뷰
   -------------------------------------------------------------------------- */
.gloday__review { height: calc(1008 * var(--gloday-unit)); background: #fff6ee; }
.gloday__review-head {
  position: absolute; z-index: 2;
  left: calc(385 * var(--gloday-unit));
  top: calc(100 * var(--gloday-unit));
  width: calc(1150 * var(--gloday-unit));
  display: flex; flex-direction: column; align-items: center;
  gap: calc(15 * var(--gloday-unit));
  text-align: center; white-space: nowrap;
}
.gloday__review-title { font-weight: 700; font-size: calc(62 * var(--gloday-unit)); line-height: 1.25; letter-spacing: -0.03em; }
.gloday__review-sub { font-weight: 400; font-size: calc(42 * var(--gloday-unit)); line-height: 1.25; letter-spacing: -0.03em; }
.gloday__quote {
  font-size: calc(25 * var(--gloday-unit));
  line-height: 1.3;
  color: #534d46;
}
.gloday__quote--1 { left: calc(463.74 * var(--gloday-unit)); top: calc(418.8 * var(--gloday-unit)); }
.gloday__quote--2 { left: calc(1096.37 * var(--gloday-unit)); top: calc(565.5 * var(--gloday-unit)); }
.gloday__quote-by {
  font-size: calc(21 * var(--gloday-unit));
  line-height: 1.4;
  color: #534d46;
  text-align: right;
}
.gloday__quote-by--1 { right: calc(1109.74 * var(--gloday-unit)); top: calc(524.9 * var(--gloday-unit)); }
.gloday__quote-by--2 { right: calc(477.11 * var(--gloday-unit)); top: calc(671.6 * var(--gloday-unit)); }
.gloday__wrap .gloday__review-btn {
  bottom: calc(100 * var(--gloday-unit));
  padding-left: calc(50 * var(--gloday-unit));
  padding-right: calc(50 * var(--gloday-unit));
}

/* --------------------------------------------------------------------------
   7. 유의사항
   -------------------------------------------------------------------------- */
.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(120 * var(--gloday-unit));
  padding: 0 calc(227 * var(--gloday-unit)) 0 calc(238 * var(--gloday-unit));
  background: #262626;
}
.gp-notice__top-left { display: flex; align-items: center; gap: calc(33 * var(--gloday-unit)); }
.gp-notice__icon { width: calc(50 * var(--gloday-unit)); }
.gp-notice__label {
  font-size: calc(28 * var(--gloday-unit));
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
.gp-notice__arrow {
  width: calc(48 * var(--gloday-unit));
  height: calc(28 * var(--gloday-unit));
  padding: 0;
  border: 0;
  cursor: pointer;
  background: url(/content/dam/glo-kr/mcs/images/event/gloday/notice_arrow.png) no-repeat center / 100% 100%; 
  transition: transform 0.3s ease;
}
.gp-notice.is-closed .gp-notice__arrow { transform: rotate(180deg); }
.gp-notice__bottom {
  overflow: hidden;
  background: #333;
  color: #fff;
  padding: 0 calc(227 * var(--gloday-unit)) 0 calc(227.55 * var(--gloday-unit));
  transition: max-height 0.5s ease, padding 0.5s ease;
}
.gp-notice:not(.is-closed) .gp-notice__bottom {
  padding-top: calc(60 * var(--gloday-unit));
  padding-bottom: calc(80 * var(--gloday-unit));
}
.gloday__wrap .gp-notice__title {
  margin: 0 0 calc(24 * var(--gloday-unit));
  font-size: calc(28 * var(--gloday-unit));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.gloday__wrap .gp-notice__title--sub { margin-top: calc(40 * var(--gloday-unit)); }
.gloday__wrap .gp-notice__list {
  margin: 0;
  padding-left: calc(30 * var(--gloday-unit));
  list-style: disc outside;
}
.gp-notice__list li {
  font-size: calc(20 * var(--gloday-unit));
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   8. 스크롤 리빌 
   -------------------------------------------------------------------------- */
.gloday__wrap .reveal {
  --gloday-rv: calc(40 * var(--gloday-unit));
  opacity: 0;
  transform: translateY(var(--gloday-rv));
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.gloday__wrap .reveal.is-visible { --gloday-rv: 0px; opacity: 1; }
.gloday__wrap .fx__tran_05 { transition-delay: 0.05s; }
.gloday__wrap .fx__tran_10 { transition-delay: 0.1s; }
.gloday__wrap .fx__tran_15 { transition-delay: 0.15s; }
.gloday__wrap .fx__tran_20 { transition-delay: 0.2s; }
.gloday__wrap .fx__tran_25 { transition-delay: 0.25s; }
.gloday__wrap .fx__tran_30 { transition-delay: 0.3s; }

/* ==========================================================================
   MO (max-width 750px)
   ========================================================================== */
@media (max-width: 750px) {
  .gloday__wrap { --gloday-unit: 0.266667vw; }
  .gloday__wrap .gloday__pc-only { display: none; }
  .gloday__wrap .gloday__mo-only { display: block; }
  .gloday__wrap img.gloday__pc-only { display: none; }
  .gloday__wrap img.gloday__mo-only { display: block; }

  .gloday__wrap .gloday__btn {
    padding: 0 calc(33.1 * var(--gloday-unit));
    height: calc(35.69 * var(--gloday-unit));
    font-size: calc(13.242 * var(--gloday-unit));
  }
  .gloday__footnote {
    left: calc(15 * var(--gloday-unit));
    bottom: calc(16 * var(--gloday-unit));
    font-size: calc(7 * var(--gloday-unit));
    line-height: 1.25;
  }

  /* 1. KV  */
  .gloday__kv { height: calc(600 * var(--gloday-unit)); }
  .gloday__kv-title { left: calc(26 * var(--gloday-unit)); top: calc(36.6 * var(--gloday-unit)); font-size: calc(32.343 * var(--gloday-unit)); }
  .gloday__wrap .gloday__kv h1.gloday__kv-title { font-size: calc(32.343 * var(--gloday-unit)); } /* 서버 h1 규칙 대응 (위 주석 참고) */
  .gloday__kv-copy { left: calc(26 * var(--gloday-unit)); top: calc(127 * var(--gloday-unit)); font-size: calc(20 * var(--gloday-unit)); }
  .gloday__kv-btn { left: calc(26 * var(--gloday-unit)); top: calc(204 * var(--gloday-unit)); width: calc(170 * var(--gloday-unit)); }
  .gloday__kv .gloday__footnote { left: calc(26 * var(--gloday-unit)); font-size: calc(8 * var(--gloday-unit)); }

  /* 2. 영상  */
  .gloday__video { height: calc(900 * var(--gloday-unit)); }

  /* 3. 오렌지 */
  .gloday__day { height: calc(600 * var(--gloday-unit)); }
  .gloday__day-calendar { left: calc(97 * var(--gloday-unit)); top: calc(74 * var(--gloday-unit)); }
  .gloday__day-title { top: calc(307 * var(--gloday-unit)); font-size: calc(36 * var(--gloday-unit)); }
  .gloday__day-copy { top: calc(407 * var(--gloday-unit)); font-size: calc(22 * var(--gloday-unit)); }
  .gloday__day-btn { top: calc(495 * var(--gloday-unit)); bottom: auto; width: calc(170 * var(--gloday-unit)); }
  .gloday__day .gloday__footnote { bottom: calc(20 * var(--gloday-unit)); }

  /* 4. mo4 */
  .gloday__buy { height: calc(600 * var(--gloday-unit)); }
  .gloday__buy-title { left: 0; width: 100%; text-align: center; top: calc(41 * var(--gloday-unit)); font-size: calc(36 * var(--gloday-unit)); }
  .gloday__buy-copy { left: 0; width: 100%; text-align: center; top: calc(141 * var(--gloday-unit)); font-size: calc(22 * var(--gloday-unit)); }
  .gloday__buy-btn { left: 0; right: 0; margin-left: auto; margin-right: auto; width: max-content; top: auto; bottom: calc(59.31 * var(--gloday-unit)); }
  .gloday__buy .gloday__footnote { bottom: calc(10 * var(--gloday-unit)); }

  /* 5. mo5 */
  .gloday__benefit { height: calc(1018 * var(--gloday-unit)); }
  .gloday__benefit-sub { top: calc(41 * var(--gloday-unit)); font-size: calc(22 * var(--gloday-unit)); }
  .gloday__benefit-title { top: calc(73.5 * var(--gloday-unit)); font-size: calc(32 * var(--gloday-unit)); }
  .gloday__card-txt { left: calc(50.4 * var(--gloday-unit)); width: calc(274.2 * var(--gloday-unit)); gap: calc(12.55 * var(--gloday-unit)); } 
  .gloday__card-txt--1 { top: calc(184 * var(--gloday-unit)); }
  .gloday__card-txt--2 { top: calc(600 * var(--gloday-unit)); }
  .gloday__card-label { font-size: calc(15 * var(--gloday-unit)); }
  .gloday__card-body { gap: calc(4 * var(--gloday-unit)); }
  .gloday__card-title { font-size: calc(23 * var(--gloday-unit)); }
  .gloday__card-desc { font-size: calc(16 * var(--gloday-unit)); }
  .gloday__card-note { left: calc(39 * var(--gloday-unit)); bottom: auto; font-size: calc(7 * var(--gloday-unit)); }
  .gloday__card-note--1 { top: calc(532 * var(--gloday-unit)); }
  .gloday__card-note--2 { top: calc(948 * var(--gloday-unit)); }
  .gloday__card-btn--1, .gloday__card-btn--2 { left: calc(24 * var(--gloday-unit)); right: calc(24 * var(--gloday-unit)); } /* 카드 x24~351 */
  .gloday__card-btn--1 { bottom: calc(498.31 * var(--gloday-unit)); }
  .gloday__card-btn--2 { bottom: calc(82.31 * var(--gloday-unit)); }

  /* 6. mo6 */
  .gloday__review { height: calc(1034 * var(--gloday-unit)); }
  .gloday__review-head { left: calc(30.5 * var(--gloday-unit)); width: calc(314 * var(--gloday-unit)); top: calc(41 * var(--gloday-unit)); gap: calc(10 * var(--gloday-unit)); } /* (375-314)/2 */
  .gloday__review-title { font-size: calc(32 * var(--gloday-unit)); }
  .gloday__review-sub { font-size: calc(22 * var(--gloday-unit)); }
  .gloday__quote { font-size: calc(18.049 * var(--gloday-unit)); }
  .gloday__quote--1 { left: calc(62.58 * var(--gloday-unit)); top: calc(254.5 * var(--gloday-unit)); }
  .gloday__quote--2 { left: calc(62.58 * var(--gloday-unit)); top: calc(429.1 * var(--gloday-unit)); }
  .gloday__quote-by { font-size: calc(15.161 * var(--gloday-unit)); }
  .gloday__quote-by--1 { right: calc(61.78 * var(--gloday-unit)); top: calc(331.3 * var(--gloday-unit)); }
  .gloday__quote-by--2 { right: calc(61.78 * var(--gloday-unit)); top: calc(505.9 * var(--gloday-unit)); }
  .gloday__wrap .gloday__review-btn { top: calc(942 * var(--gloday-unit)); bottom: auto; width: calc(170 * var(--gloday-unit)); padding-left: 0; padding-right: 0; }

  /* 7. 유의사항 */
  .gp-notice__top { height: calc(70 * var(--gloday-unit)); padding: 0 calc(20 * var(--gloday-unit)) 0 calc(24 * var(--gloday-unit)); }
  .gp-notice__top-left { gap: calc(10 * var(--gloday-unit)); }
  .gp-notice__icon { width: calc(32 * var(--gloday-unit)); }
  .gp-notice__label { font-size: calc(20 * var(--gloday-unit)); }
  .gp-notice__arrow { width: calc(28 * var(--gloday-unit)); height: calc(16 * var(--gloday-unit)); }
  .gp-notice__bottom { padding: 0 calc(18 * var(--gloday-unit)); }
  .gp-notice:not(.is-closed) .gp-notice__bottom { padding-top: calc(24 * var(--gloday-unit)); padding-bottom: calc(40 * var(--gloday-unit)); }
  .gloday__wrap .gp-notice__title { margin-bottom: calc(13 * var(--gloday-unit)); font-size: calc(16 * var(--gloday-unit)); }
  .gloday__wrap .gp-notice__title--sub { margin-top: calc(20 * var(--gloday-unit)); }
  .gloday__wrap .gp-notice__list { padding-left: calc(16.5 * var(--gloday-unit)); }
  .gp-notice__list li { font-size: calc(11 * var(--gloday-unit)); letter-spacing: -0.04em; }
}