/* 다이나믹 프라이싱(DP) 프로모션 배너·팝업 스타일 — 레거시 sub.css 에서 .promotion_* 규칙 추출 이식 (2026-07-09)
   원본: /resources/front/css/sub.css (규칙 수정 금지 — 레거시와 동일 캠페인 UI 유지) */
/* 250217 추가 · 260609 다이나믹 프라이싱 팝업 애니메이션 */
.promotion_popup {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  background:rgba(0,0,0,0.7);
  z-index:999;
  opacity:0;
  transition:opacity 0.38s ease, background 0.5s ease;
}

.promotion_popup.is-visible {
  opacity:1;
}

.promotion_popup.is-visible .popup {
  animation:dpPopupEnter 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.promotion_popup.is-minimizing {
  background:rgba(0,0,0,0) !important;
  pointer-events:none;
  transition:background 0.42s ease, opacity 0.42s ease;
}

.promotion_popup.is-handoff .popup {
  visibility:hidden;
}

.promotion_popup.is-minimizing .popup .timer,
.promotion_popup.is-minimizing .popup a,
.promotion_popup.is-minimizing .popup button {
  opacity:0;
  transition:opacity 0.12s ease;
}

.promotion_popup .popup {
  position:relative;
  transform-origin:center center;
}

/* navermap 팝업은 언어별 2x 에셋(1080×1320) — 표시 크기 540×660 고정 */
.promotion_popup[data-dp-channel="navermap"] .popup {
  width:540px;
}

.promotion_popup__flyer {
  position:fixed;
  z-index:1001;
  pointer-events:none;
  overflow:hidden;
  border-radius:0;
  transform-origin:0 0;
  will-change:transform, opacity;
  box-shadow:0 12px 40px rgba(0,0,0,0.18);
  transition:none;
}

.promotion_popup__flyer img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
}

.promotion_popup__flyer.is-flying {
  transition:
    transform 0.88s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 0.88s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.88s ease;
  transform:translate(0, 0) scale(1, 1) !important;
  border-radius:10px;
  box-shadow:0 4px 16px rgba(0,0,0,0.12);
}

.promotion_popup__flyer.is-fading {
  transition:opacity 0.26s ease;
  opacity:0;
}

.promotion_popup .popup div img {
  width:100%;
}

.promotion_popup .popup div.mobile {
  display:none;
}

.promotion_popup .popup .timer {
  display:flex;
  align-items:center;
  justify-content: center;
  width:370px;
  height:70px;
  position:absolute;
  bottom:140px;
  left:50%;
  border-radius: 10px;
  background:rgba(0, 0, 0, 0.8);
  color:#fff;
  transform:translateX(-50%);
  font-size: 32px;
  font-weight: 700;
}

.promotion_popup .popup .timer div {
  display:flex;
}

.promotion_popup .popup .timer strong {
  display:block;
  margin-right:25px;
  font-size: 20px;
  font-weight: 500;
  line-height:1;
}

.promotion_popup .popup .timer span {
  display:inline-block;
  margin:0 20px;
  font-size: 30px;
  font-weight: 600;
  opacity:0.6;
}

.promotion_popup .popup a {
  display:flex;
  align-items:center;
  justify-content:center;
  width:260px;
  height:60px;
  position:absolute;
  bottom:40px;
  left:50%;
  border-radius: 30px;
  background: #ED484A;
  color:#fff;
  font-size:22px;
  font-weight: 500;
  transform:translateX(-50%);
}

.promotion_popup .popup button {
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  padding:0;
  position:absolute;
  top:12px;
  right:12px;
  border:none;
  border-radius:50%;
  background:rgba(17,17,17,0.72);
  box-shadow:0 2px 8px rgba(0,0,0,0.28);
  z-index:4;
  cursor:pointer;
}

.promotion_popup .popup button svg {
  width:14px;
  height:14px;
}

.promotion_banner {
  overflow:hidden;
  position:fixed;
  top:476px;
  left:140px;
  border-radius:10px;
  z-index:8;
}

.promotion_banner:not(.promotion_banner--dynamic) > div {
  display:flex;
  flex-direction: column;
  width:220px;
  height:220px;
  padding-top:25px;
  position:relative;
  background:url("/resources/front/images/bg_banner_20.png") center no-repeat;
  background-size:100%;
}

.promotion_banner--dynamic {
  width:220px;
  overflow:visible;
}

.promotion_banner--dynamic .promotion_banner__body {
  display:block;
  width:220px;
  height:260px;
  padding:0;
  position:relative;
  background:none;
}

.promotion_banner--dynamic .promotion_banner__img {
  display:block;
  width:100%;
  height:100%;
  border-radius:10px;
  object-fit:cover;
}

.promotion_banner--dynamic .promotion_banner__timer {
  display:flex;
  align-items:center;
  justify-content:center;
  width:59%;
  height:12.5%;
  min-height:28px;
  position:absolute;
  bottom:19.7%;
  left:50%;
  border-radius:6px;
  background:rgba(0,0,0,0.8);
  color:#fff;
  font-size:clamp(12px, 9%, 18px);
  font-weight:700;
  transform:translateX(-50%);
  pointer-events:none;
}

.promotion_banner--dynamic .promotion_banner__timer span {
  display:inline-block;
  margin:0 4px;
  font-size:inherit;
  font-weight:600;
  opacity:0.6;
}

.promotion_banner strong {
  display:block;
  color: #ED484A;
  font-size: 28px;
  font-weight: 800;
  text-align:center;
  line-height:1;
  font-family: Pretendard;
}

.promotion_banner .timer {
  display:flex;
  align-items:center;
  justify-content:center;
  width:130px;
  height:32px;
  position:absolute;
  bottom:55px;
  left:50%;
  border-radius: 6px;
  background:rgba(0,0,0,0.8);
  color:#fff;
  font-size: 20px;
  font-weight: 700;
  transform:translateX(-50%);
}

.promotion_banner .banner_text {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  margin-top:auto;
  padding:15px 0;
  background:#ED484A;
  color:#fff;
  font-weight: 500;
  letter-spacing:-1px;
}

.promotion_banner .timer span {
  display:inline-block;
  margin:0 6px;
  font-size: 20px;
  font-weight: 600;
  opacity:0.6;
}

.promotion_banner button {
  display:flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  position:absolute;
  top:8px;
  right:8px;
  border-radius:50%;
  background:rgba(0,0,0,0.2);
}

.promotion_banner--dynamic button {
  top:-8px;
  right:-8px;
  width:22px;
  height:22px;
  border:2px solid #fff;
  background:rgba(17,17,17,0.72);
  box-shadow:0 1px 6px rgba(0,0,0,0.28);
  z-index:3;
  cursor:pointer;
}

.promotion_banner--dynamic button svg {
  width:8px;
  height:8px;
}

/* navermap 배너: 배경 이미지(2x, 인라인 dpBannerBg) + HTML 텍스트(i18n 15534/15535) */
.promotion_banner--navermap {
  border-radius:16px;
}

/* 특이도 상향: 이후 로드되는 language_cns/cnt.css의 .promotion_banner strong{letter-spacing:-4px}(구 배너용)를 무효화 */
.promotion_banner.promotion_banner--navermap strong {
  color:#fff;
  font-size:21px;
  line-height:1.25; /* CJK 두 줄 겹침 방지 */
  letter-spacing:0;
  font-family:inherit; /* 레거시 룰의 Pretendard 단독 지정 대신 로케일 폰트 스택 상속 */
}

.promotion_banner--navermap .timer {
  width:160px;
}

.promotion_banner--navermap .banner_text {
  padding:10px 8px;
  font-size:13px;
  text-align:center;
  line-height:1.25;
  word-break:normal; /* 전역 keep-all 상속 시 ja 문장이 줄바꿈 안 되고 잘림 → CJK 줄바꿈 허용 */
}

.promotion_banner--navermap button {
  top:10px;
  right:10px;
  background:rgba(0,0,0,0.35);
}

.promotion_coupon_info {
  flex-direction:row !important;
  margin-top:20px;
}

.promotion_coupon_info dl {
  display:flex;
  align-items:center;
}

.promotion_coupon_info dt {
  display:flex;
  align-items:center;
  margin-right:4px;
  color: #666;
  font-size: 16px;
  font-weight: 500;
}

.promotion_coupon_info dt::before {
  content:'';
  display:block;
  width:1px;
  height:14px;
  margin:0 8px;
  background: #E2E2E2;
}

.promotion_coupon_info dd {
  color:#888;
  font-size: 16px;
  font-weight:400;
}

@media only screen and (max-width: 767px) {
.promotion_popup .popup {
    width:93.8vw;
  }
.promotion_popup[data-dp-channel="navermap"] .popup {
    width:93.8vw;
  }
.promotion_popup .popup div.pc {
    display:none;
  }
.promotion_popup .popup div.mobile {
    display:block;
  }
.promotion_popup .popup .timer {
    width:65.6vw;
    height:12.5vw;
    bottom:26.6vw;
  }
.promotion_popup .popup .timer strong {
    margin-right:4.1vw;
    font-size:4.1vw;
  }
.promotion_popup .popup .timer div {
    align-items:center;
    font-size:6.3vw;
  }
.promotion_popup .popup .timer span {
    margin:0 2.5vw;
    font-size:5.6vw;
  }
.promotion_popup .popup a {
    width:43.8vw;
    height:10.9vw;
    bottom:9.4vw;
    font-size:4.1vw;
  }
.promotion_popup .popup button {
    width:9.4vw;
    height:9.4vw;
    top:3.1vw;
    right:3.1vw;
    background:rgba(17,17,17,0.72);
    box-shadow:0 0.6vw 2.5vw rgba(0,0,0,0.28);
  }
.promotion_popup .popup button svg {
    width:3.8vw;
    height:3.8vw;
  }
.promotion_banner {
    top:78.4vw;
    left:6.3vw;
  }
.promotion_banner:not(.promotion_banner--dynamic) > div {
    width:48.4vw;
    height:48.4vw;
    padding-top:4.7vw;
  }
.promotion_banner--dynamic {
    width:48.4vw;
  }
.promotion_banner--dynamic .promotion_banner__body {
    width:48.4vw;
    height:57.3vw;
  }
.promotion_banner--dynamic .promotion_banner__timer {
    width:59%;
    min-height:0;
    bottom:19.7%;
    font-size:3.4vw;
  }
.promotion_banner--dynamic .promotion_banner__timer span {
    margin:0 1.2vw;
  }
.promotion_banner strong {
    font-size:5.6vw;
  }
.promotion_banner .timer {
    width:35.9vw;
    height:7.8vw;
    bottom:10.5vw;
    font-size:4.1vw;
  }
.promotion_banner .timer span {
    margin:0 1.6vw;
    font-size:4.1vw;
  }
.promotion_banner .banner_text {
    height:9.4vw;
    font-size:3.4vw;
  }
.promotion_banner button {
    width:5vw;
    height:5vw;
    top:2.3vw;
    right:2.3vw;
  }
.promotion_banner--dynamic button {
    top:-1.6vw;
    right:-1.6vw;
    width:6.3vw;
    height:6.3vw;
    border-width:0.5vw;
  }
.promotion_banner button svg {
    width:2.2vw;
    height:2.2vw;
  }
.promotion_banner--dynamic button svg {
    width:2.5vw;
    height:2.5vw;
  }
.promotion_banner--navermap {
    border-radius:3.5vw;
  }
.promotion_banner--navermap strong {
    font-size:4.7vw;
    line-height:1.25;
  }
.promotion_banner--navermap .banner_text {
    height:auto;
    min-height:9.4vw;
    padding:2.5vw 2vw;
    font-size:3.2vw;
  }
.promotion_banner--navermap button {
    top:2.3vw;
    right:2.3vw;
    background:rgba(0,0,0,0.35);
  }
.promotion_coupon_popup .popup {
    width:93.8vw;
  }
.promotion_coupon_popup .popup .head {
    height:11.9vw;
    padding:0 4.7vw;
    font-size:5vw;
  }
.promotion_coupon_popup .popup .head button {
    width:3.8vw;
    height:3.8vw;
  }
.promotion_coupon_popup .coupon_popup_cont {
    padding:4.7vw;
  }
.promotion_coupon_list label strong,
  .promotion_coupon_list label strong span {
    font-size:5vw;
  }
.promotion_coupon_list label strong {
    padding-left:7vw;
  }
.promotion_coupon_list label span {
    margin-top:3.1vw;
    font-size:3.8vw;
  }
.promotion_coupon_list label .text_red {
    margin-top:4.7vw;
    font-size:4.1vw;
  }
.promotion_coupon_info {
    height:10.9vw;
    padding:0 4.7vw;
  }
.promotion_coupon_info span,
  .promotion_coupon_info dd {
    font-size:3.4vw !important;
  }
.promotion_coupon_info dt {
    font-size:3.4vw;
  }
.promotion_coupon_info dt::before {
    height:3.1vw;
    margin:0 2.5vw;
  }
.coupon_choice .chkWrap div:not(.promotion_coupon_info) {
    width:100%;
  }
.promotion_coupon_info {
    height:auto;
    margin-top:3.9vw;
    padding-left:9vw !important;
  }
.coupon_choice .coupon_item label .promotion_coupon_info span {
    font-weight:400;
    color:#666;
  }
}