@charset "utf-8";

/*
* NB2024-12725 2026 9월 메가위크 사전 안내(Noti) 전용 CSS - MO (400px 기준)
* base/reset/button/icon 은 common.css(.bf) 참조. 이 파일은 .mw 스코프 시안 스타일.
* vw 단위: 80px => calc(80 * var(--vw-400));
*/
#container{padding-bottom: 0;}
.mw { background: #fff; }
.bf .ico--nk {    width: calc(47 * var(--vw-400))!important;
  height: calc(24 * var(--vw-400))!important;}
/* ===== 공통 헤드 ===== */
.mw__head { text-align: center; padding: 0 calc(16 * var(--vw-400)); }
.mw__subtitle {
  font-family: "ProximaNova", sans-serif;
  font-size: calc(18 * var(--vw-400));
  font-weight: 700;
  line-height: calc(26 * var(--vw-400));
  color: #FA149E;
}
.mw__title {
  margin-top: calc(6 * var(--vw-400));
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(26 * var(--vw-400));
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: -0.05em;
  color: #151415;
}
.mw__desc {
  margin-top: calc(6 * var(--vw-400));
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(16 * var(--vw-400));
  font-weight: 400;
  line-height: calc(26 * var(--vw-400));
  letter-spacing: -0.05em;
  color: #151415;
}
.mw__desc--sm { margin-top: calc(8 * var(--vw-400)); }
.mw .font--en { font-family: "ProximaNova", sans-serif; letter-spacing: 0; }

/* ===== 00. 마퀴(무한 롤링) - 직전 메가위크 재활용 ===== */
.imc__roll { overflow: hidden; }
.imc__roll .swiper-wrapper { align-items: center; transition-timing-function: linear; }
.imc__roll .swiper-wrapper .swiper-slide { width: auto; }
.imc__roll .swiper-wrapper .swiper-slide img { width: auto; height: calc(40 * var(--vw-400)); display: block; }

/* ===== 01. Key Visual ===== */
.mw__kv {
  height: calc(450 * var(--vw-400));
  overflow: hidden;
  background: linear-gradient(120deg, #EDEDED 0%, #3AFBCC 100%);
}
.mw__kv img { width: 100%; height: 100%; object-fit: cover; }

/* ===== 02. COMING SOON + 카운트다운 ===== */
.mw__coming {
  padding: calc(40 * var(--vw-400)) calc(16 * var(--vw-400)) calc(70 * var(--vw-400));
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f5f5f5;
}
.mw__coming-lead {
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(18 * var(--vw-400));
  font-weight: 700;
  line-height: calc(28 * var(--vw-400));
  letter-spacing: -0.05em;
  color: #151415;
  text-align: center;
}
.mw__coming-lead .font--en { font-size: calc(20 * var(--vw-400)); font-weight: 700; }
.mw__coming-title {
  margin-top: calc(40 * var(--vw-400));
  font-family: "ProximaNova", sans-serif;
  font-size: calc(32 * var(--vw-400));
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #151415;
}
.mw__coming-period {
  margin-top: calc(12 * var(--vw-400));
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(18 * var(--vw-400));
  line-height: calc(28 * var(--vw-400));
  letter-spacing: -0.05em;
  color: #151415;
}
.mw__coming-period .font--en { font-size: calc(20 * var(--vw-400)); }
/* 타이머 */
.mw__timer {
  margin-top: calc(30 * var(--vw-400));
  display: flex;
  align-items: flex-start;
  gap: calc(16 * var(--vw-400));
}
.mw__timer-unit {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(10 * var(--vw-400));
}
.mw__timer-unit .num {
  font-family: "ProximaNova", sans-serif;
  font-size: calc(54 * var(--vw-400));
  font-weight: 700;
  line-height: 1;
  color: #FA149E;
}
.mw__timer-unit .label {
  font-family: "ITCGaramondStd", "ProximaNova", sans-serif;
  font-size: calc(12 * var(--vw-400));
  color: #FA149E;
  letter-spacing: -0.01em;
}
.mw__timer-colon {
  font-family: "ProximaNova", sans-serif;
  font-size: calc(54 * var(--vw-400));
  font-weight: 700;
  line-height: 1;
  color: #FA149E;
}
/* 오픈 알림 신청 버튼 (세로 2개) */
.mw__coming-btns {
  margin-top: calc(40 * var(--vw-400));
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--vw-400));
}
.mw__coming-btns .btn,
.mw__cal-foot .btn {
  width: calc(310 * var(--vw-400)) !important;
  height: calc(48 * var(--vw-400));
  border-radius: calc(5 * var(--vw-400));
  background: #151415;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--vw-400));
  border: 0;
  cursor: pointer;
}
.mw__coming-btns .btn span,
.mw__cal-foot .btn span {
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(15 * var(--vw-400));
  color: #fff;
  letter-spacing: -0.05em;
  line-height: 1;
}
.mw__coming-btns .btn b,
.mw__cal-foot .btn b { font-weight: 700; }
.mw__coming-btns .btn [class^="ico--"],
.mw__cal-foot .btn [class^="ico--"] {
  width: calc(32 * var(--vw-400));
  height: calc(16 * var(--vw-400));
}

/* ===== 03. 세일 ===== */
.mw__sale {
  padding-top: calc(60 * var(--vw-400));
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
}
.mw__sale-img {
  margin-top: calc(40 * var(--vw-400));
  width: 100%;
  height: calc(208 * var(--vw-400));
  overflow: hidden;
  background: linear-gradient(237deg, #3AFBCC 0%, #EEEEEE 76%);
}
.mw__sale-img img { width: 100%; height: 100%; object-fit: cover; }

/* ===== 04. 프로모션 (스와이퍼) ===== */
.mw__promo {
  padding: calc(60 * var(--vw-400)) 0;
}
.mw__promo-swiper {
  margin-top: calc(40 * var(--vw-400));
  overflow: hidden;
}
.mw__promo-item { width: calc(240 * var(--vw-400)); }
.mw__promo-thumb {
  width: calc(240 * var(--vw-400));
  height: calc(240 * var(--vw-400));
  overflow: hidden;
}
.mw__promo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mw__promo-text { margin-top: calc(16 * var(--vw-400)); }
.mw__promo-tit {
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(18 * var(--vw-400));
  font-weight: 700;
  letter-spacing: -0.05em;
  color: #151415;
}
.mw__promo-dsc {
  margin-top: calc(8 * var(--vw-400));
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(14 * var(--vw-400));
  font-weight: 400;
  line-height: calc(22 * var(--vw-400));
  letter-spacing: -0.05em;
  color: #151415;
}
.mw__promo-dsc .font--en { font-size: calc(15 * var(--vw-400)); }
.mw__promo-dsc b { font-weight: 700; color: #FA149E; }
/* 인디케이터(스크롤바) */
.mw__promo-bar {
  position: relative;
  width: calc(368 * var(--vw-400));
  height: calc(2 * var(--vw-400));
  margin: calc(20 * var(--vw-400)) auto 0;
  background: #E3E5E6;
}
.mw__promo-bar .swiper-scrollbar-drag { background: #151415; height: 100%; border-radius: 0; }

/* ===== 공통 탭 (성인/키즈) - MO 풀너비 ===== */
.mw__tab {
  margin-top: calc(30 * var(--vw-400));
  display: flex;
}
.mw__tab--full .mw__tabBtn { flex: 1; }
.mw__tabBtn {
  height: calc(44 * var(--vw-400));
  border: 0;
  background: #C7CACD;
  color: #8F959B;
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(15 * var(--vw-400));
  font-weight: 700;
  letter-spacing: -0.05em;
  cursor: pointer;
}
.mw__tabBtn.on { background: #151415; color: #3AFBCC; }
.mw__panel { display: none; }
.mw__panel.on { display: block; }

/* ===== 05. 발매 캘린더 (세로 리스트) ===== */
.mw__cal { padding: calc(60 * var(--vw-400)) 0 0; background: #E8E8E8; }
.mw__cal .mw__tab { margin-top: calc(30 * var(--vw-400)); }
.mw__cal-list { margin-top: calc(24 * var(--vw-400)); }
.mw__cal-group { margin-top: calc(40 * var(--vw-400)); }
.mw__cal-date {
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(16 * var(--vw-400));
  font-weight: 700;
  line-height: calc(26 * var(--vw-400));
  letter-spacing: -0.05em;
  color: #151415;
  margin: 0 0 calc(10 * var(--vw-400)) calc(16 * var(--vw-400));
}
.mw__cal-date .font--en { font-size: calc(18 * var(--vw-400)); font-weight: 700; }
.mw__cal-row {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--vw-400));
  padding: calc(16 * var(--vw-400)) 0;
  border-top: 1px solid #E3E5E6;
  background: #fff;
  padding: calc(16 * var(--vw-400));
}
.mw__cal-group .mw__cal-row:last-child { border-bottom: 1px solid #E3E5E6; }
.mw__cal-img {
  flex: 0 0 auto;
  width: calc(82 * var(--vw-400));
  height: calc(82 * var(--vw-400));
  overflow: hidden;
  background: #A1A1A1;
}
.mw__cal-img img { width: 100%; height: 100%; object-fit: cover; }
.mw__cal-info { flex: 1; min-width: 0; }
.mw__cal-name {
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(15 * var(--vw-400));
  font-weight: 700;
  line-height: calc(22 * var(--vw-400));
  letter-spacing: -0.05em;
  color: #151415;
}
.mw__cal-name--en { font-family: "ProximaNova", sans-serif; letter-spacing: 0; }
.mw__cal-sub {
  margin-top: calc(2 * var(--vw-400));
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(13 * var(--vw-400));
  font-weight: 400;
  line-height: calc(20 * var(--vw-400));
  letter-spacing: -0.05em;
  color: #151415;
}
.mw__cal-sub:empty { display: none; }
/* 알림 받기 토글 */
.mw__cal-alarm:before {
  position: absolute;
  left: 0;
  top: calc(-16 * var(--vw-400));;
  height: calc(82 * var(--vw-400));
  content: "";
  display: block;
  height: calc(82 * var(--vw-400));
  width: calc(1 * var(--vw-400));
  background: #E3E5E6;
}
.mw__cal-alarm {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8 * var(--vw-400));
  border: 0;
  background: none;
  padding: 0 0 0 calc(16 * var(--vw-400));
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(12 * var(--vw-400));
  letter-spacing: -0.05em;
  color: #151415;
  white-space: nowrap;
}
.mw__cal-alarm .toggle {
  position: relative;
  width: calc(37 * var(--vw-400));
  height: calc(20 * var(--vw-400));
  border-radius: calc(31 * var(--vw-400));
  background: #A1A1A1;
  transition: background .2s;
}
.mw__cal-alarm .toggle::after {
  content: "";
  position: absolute;
  top: calc(2 * var(--vw-400));
  left: calc(2 * var(--vw-400));
  width: calc(16 * var(--vw-400));
  height: calc(16 * var(--vw-400));
  border-radius: 50%;
  background: #fff;
  transition: left .2s;
}
.mw__cal-alarm.on .toggle { background: #151415; }
.mw__cal-alarm.on .toggle::after { left: calc(19 * var(--vw-400)); }
/* 신청완료 텍스트 전환 (시안 6054: 알림 받기 → 알림 신청 완료) */
.mw__cal-alarm::after { content: "알림 받기"; }
.mw__cal-alarm.on::after { content: "알림 신청 완료"; }
/* 더 알아보기 (시안 6581: 설명 아래 회색 텍스트 + 화살표, mw__cal-info 내부) */
.mw__cal-more {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--vw-400));
  margin-top: calc(6 * var(--vw-400));
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(11 * var(--vw-400));
  line-height: 1;
  letter-spacing: -0.05em;
  color: #8A8A8A;
  text-decoration: none;
  white-space: nowrap;
}
.mw__cal-more::after {
  content: "";
  flex: 0 0 auto;
  width: calc(4 * var(--vw-400));
  height: calc(4 * var(--vw-400));
  border-top: calc(1 * var(--vw-400)) solid #8A8A8A;
  border-right: calc(1 * var(--vw-400)) solid #8A8A8A;
  transform: rotate(45deg);
}
.mw__cal-foot {
  margin-top: calc(30 * var(--vw-400));
  padding: 0 calc(16 * var(--vw-400)) calc(60 * var(--vw-400));
  display: flex;
  justify-content: center;
}
.mw__cal-foot .btn { width: 100%; }

/* ===== 06. 사전 이벤트 ===== */
.mw__event { padding: calc(60 * var(--vw-400)) 0; background: #fff; }
.mw__event .mw__panel.on { margin-top: calc(24 * var(--vw-400)); }
.mw__evt-list { display: flex; flex-direction: column; gap: calc(50 * var(--vw-400)); }
.mw__evt-card {
  padding: calc(30 * var(--vw-400)) calc(20 * var(--vw-400));
  border-radius: calc(16 * var(--vw-400));
  background: #F5F5F5;
  text-align: center;
}
/* 성인 마케팅 카드: 시안은 흰색 배경 + 메타만 회색 밴드 */
.mw__evt-card--marketing {
  padding: calc(30 * var(--vw-400)) calc(16 * var(--vw-400));  0;
  border-radius: 0;
  background: transparent;
}
.mw__evt-card--marketing + .mw__evt-card--marketing {
  border-top: 1px solid #E8E8E8;
}
/* 메타 전용 풀블리드 회색 밴드 (패널 좌우 패딩 16 상쇄) */
.mw__evt-metaband {
  margin: calc(30 * var(--vw-400)) calc(-16 * var(--vw-400)) 0;
  padding: calc(20 * var(--vw-400)) calc(16 * var(--vw-400));
  background: #F5F5F5;
  text-align: center;
}
.mw__evt-metalist {
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(15 * var(--vw-400));
  line-height: calc(22 * var(--vw-400));
  letter-spacing: -0.05em;
  color: #737273;
}
.mw__evt-metalist dt { font-weight: 700; }
.mw__evt-metalist dd + dt { margin-top: calc(22 * var(--vw-400)); }
.mw__evt-metalist .font--en { font-size: calc(16 * var(--vw-400)); }
.mw__evt-tag {
  font-family: "ProximaNova", sans-serif;
  font-size: calc(18 * var(--vw-400));
  font-weight: 700;
  line-height: calc(26 * var(--vw-400));
  color: #FA149E;
}
.mw__evt-tit {
  margin-top: calc(6 * var(--vw-400));
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(22 * var(--vw-400));
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: -0.05em;
  color: #151415;
}
.mw__evt-dsc {
  width: max-content;
  margin: calc(20 * var(--vw-400)) auto 0;
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(16 * var(--vw-400));
  font-weight: 400;
  line-height: calc(26 * var(--vw-400));
  letter-spacing: -0.05em;
  color: #151415;
}
.mw__evt-dsc b { font-weight: 700; }
.mw__evt-dsc .font--en { font-size: calc(18 * var(--vw-400)); }
.mw__evt-meta {
  margin-top: calc(16 * var(--vw-400));
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--vw-400));
  text-align: left;
}
.mw__evt-meta li {
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(13 * var(--vw-400));
  font-weight: 400;
  line-height: calc(20 * var(--vw-400));
  letter-spacing: -0.05em;
  color: #737273;
}
.mw__evt-meta li b { font-weight: 700; }
.mw__evt-meta .sep { font-family: "ProximaNova", sans-serif; margin: 0 calc(4 * var(--vw-400)); }
.mw__evt-img {
  margin-top: calc(20 * var(--vw-400));
  width: 100%;
  height: calc(260 * var(--vw-400));
  border-radius: calc(8 * var(--vw-400));
  overflow: hidden;
  background: linear-gradient(245deg, #3AFBCC 0%, #EEEEEE 95%);
}
.mw__evt-img img { width: 100%; height: 100%; object-fit: contain; }
.mw__evt-notice {
  display: inline-block;
  margin-top: calc(30 * var(--vw-400));
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(13 * var(--vw-400));
  color: #737273;
  text-decoration: underline;
  letter-spacing: -0.05em;
}
.mw__evt-more.btn {
  width: 100%;
  height: calc(48 * var(--vw-400));
  margin-top: calc(20 * var(--vw-400));
  border-radius: calc(5 * var(--vw-400));
  background: #151415;
  color: #fff;
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(15 * var(--vw-400));
  letter-spacing: -0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* 사전이벤트(성인) 수신동의 버튼 */
.mw__evt-agreeBtns {
  margin-top: calc(30 * var(--vw-400));
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--vw-400));
}
.mw__agreeBtn {
  width: 100%;
  height: calc(48 * var(--vw-400));
  border: 1px solid #151415;
  border-radius: calc(5 * var(--vw-400));
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--vw-400));
  cursor: pointer;
  text-decoration: none;
}
.mw__agreeBtn span {
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(14 * var(--vw-400));
  color: #151415;
  letter-spacing: -0.05em;
  line-height: 1;
}
.mw__agreeBtn b { font-weight: 700; }
.mw__agreeBtn .font--en { font-size: calc(15 * var(--vw-400)); }
.mw__agreeBtn-logo { width: auto!important;}
.mw__agreeBtn-ico { width: auto!important; height: calc(16 * var(--vw-400)); flex-shrink: 0; }
.mw__evt-agreeNote {
  margin-top: calc(20 * var(--vw-400));
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(13 * var(--vw-400));
  color: #737273;
  letter-spacing: -0.05em;
}
.mw__evt-detail {
  margin-top: calc(30 * var(--vw-400));
  text-align: center;
}
.mw__evt-detailBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(120 * var(--vw-400));
  height: calc(40 * var(--vw-400));
  padding: 0 calc(20 * var(--vw-400));
  border-radius: calc(5 * var(--vw-400));
  background: #151415;
  color: #fff;
  font-family: "Noto Sans KR", sans-serif;
  font-size: calc(14 * var(--vw-400));
  letter-spacing: -0.05em;
  text-decoration: none;
}

/* 쿠폰 (CSS 구현) */
.mw__coupon {
  position: relative;
  width: 100%;
  height: calc(168 * var(--vw-400));
  margin-top: calc(20 * var(--vw-400));
  border-radius: calc(7 * var(--vw-400));
  overflow: hidden;
  background: linear-gradient(245.78deg, #3AFBCC 0%, #EEEEEE 95%);
}
.mw__coupon::before,
.mw__coupon::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: calc(18 * var(--vw-400));
  height: calc(18 * var(--vw-400));
  border-radius: 50%;
  background: #F5F5F5;
}
.mw__coupon::before { left: calc(-9 * var(--vw-400)); }
.mw__coupon::after { right: calc(-9 * var(--vw-400)); }
.mw__coupon-logo {
  position: absolute;
  top: calc(18 * var(--vw-400));
  left: calc(25 * var(--vw-400));
  width: calc(116 * var(--vw-400));
  z-index: 1;
}
.mw__coupon-logo img { width: 100%; display: block; }
.mw__coupon-percent {
  position: absolute;
  right: calc(20 * var(--vw-400));
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  font-family: "ProximaNova", sans-serif;
  font-weight: 700;
  color: #000;
  line-height: 1;
  font-size: calc(99 * var(--vw-400));
}
.mw__coupon-percent .pct { font-size: calc(60 * var(--vw-400)); }
.mw__coupon-label {
  position: absolute;
  left: calc(25 * var(--vw-400));
  bottom: calc(20 * var(--vw-400));
  z-index: 1;
  font-family: "ITC Avant Garde Gothic Std", "ProximaNova", sans-serif;
  font-weight: 600;
  font-size: calc(12 * var(--vw-400));
  color: #000;
}
/* 마일리지 쿠폰 (키즈) */
.mw__coupon--mileage .mw__coupon-unit {
  position: absolute;
  left: calc(25 * var(--vw-400));
  bottom: calc(28 * var(--vw-400));
  z-index: 1;
  font-family: "ProximaNova", sans-serif;
  font-size: calc(12 * var(--vw-400));
  font-weight: 600;
  color: #000;
}
.mw__coupon-point {
  position: absolute;
  right: calc(20 * var(--vw-400));
  bottom: calc(20 * var(--vw-400));
  z-index: 1;
  font-family: "ProximaNova", sans-serif;
  font-weight: 700;
  color: #000;
  line-height: 1;
  font-size: calc(58 * var(--vw-400));
}

/* ===== Footer ===== */
.mw__footer {
  background: linear-gradient(180deg, #fff 0%, #3AFBCC 100%);
  padding: calc(50 * var(--vw-400)) 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mw__footer img { width: calc(300 * var(--vw-400)); }

/* 알림 팝업 닫기 버튼: .popup-w90 img{width:100%}에 걸려 커지는 것 방지(닫기 아이콘 고정).
   팝업은 .bf(--vw-400) 스코프 밖이라 고정 px 사용 */
#bfAlarmPopup .close img,
#bfLaunchAlarmPopup .close img { width: 20px; }

/* 발매/오픈 알림 팝업: 옵션이 '정각' 1개뿐이라 space-between 대신 중앙정렬 통일 */
#bfAlarmPopup .launching_alarm .alarm_input,
#bfLaunchAlarmPopup .launching_alarm .alarm_input { justify-content: center; }