/* =========================================
   1) 배경 이미지
   ========================================= */
.banner-dday {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  overflow: hidden;
}

.banner-dday__bg {
  position: relative;
  width: 100%;
}

.banner-dday__bg img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* =========================================
   2) 타이머 박스 (공통)
   ========================================= */
.banner-dday__timer {
  position: absolute;
  left: 46%;
  bottom: 30.5%;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  gap: 4%;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}
.global_jp .banner-dday__timer {
  left: 48%;
  bottom: 29.5%;
}

/* D-Day 플립 */
.dday-flip {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

/* =========================================
   3) 플립 카드 공통 스타일
   ========================================= */
.flip-clock__piece {
  display: inline-block;
  margin: 0;
}

.card {
  display: block;
  position: relative;
  padding-bottom: 0.8em;
  font-size: 30px;
  line-height: 0.9;
  text-align: center;
}

.card__top,
.card__bottom,
.card__back::before,
.card__back::after {
  display: block;
  height: 0.8em;
  width: 1.3em;
  padding: 0.25em;
  color: #ccc;
  background: #222;
  border-radius: 0.15em 0.15em 0 0;
  transform: translateZ(0);
  transform-style: preserve-3d;
  text-align: center;
}

.card__bottom {
  position: absolute;
  top: 50%;
  left: 0;
  color: #fff;
  background: #393939;
  border-top: 1px solid #000;
  border-radius: 0 0 0.15em 0.15em;
  overflow: hidden;
  pointer-events: none;
  text-align: center;
}

.card__bottom::after {
  display: block;
  margin-top: -0.76em;
  transform: translateX(-0.01em);
}

.card__back {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  pointer-events: none;
}

.card__back::before,
.card__bottom::after {
  content: attr(data-value);
}

/* =========================================
   4) 플립 애니메이션
   ========================================= */
.flip .card__back::before {
  animation: flipTop 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35) both;
  transform-origin: center bottom;
}

.flip .card__back .card__bottom {
  animation: flipBottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1) both;
  transform-origin: center top;
}

@keyframes flipTop {
  0%   { transform: rotateX(0);   z-index: 2; opacity: .99; }
  100% { transform: rotateX(-90deg);         opacity: 0; }
}

@keyframes flipBottom {
  0%,50% { z-index: -1; transform: rotateX(90deg); opacity: 0; }
  51%    { opacity: .99; }
  100%   { z-index: 5;  transform: rotateX(0);     opacity: .99; }
}

/* =========================================
   5) D-일: 한 자리일 때 십의 자리 숨김
   ========================================= */
.dday-flip.is-single [data-flip="day-tens"] {
  display: none;
}

/* =========================================
   6) HH : MM : SS 시간 
   ========================================= */
.hms {
  display: inline-flex;
  align-items: flex-start;
}

.hms__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hms__num {
  display: inline-block;
  width: 2ch;                 /* 두 자리 폭 고정 → 흔들림 방지 */
  text-align: center;
  font-size: 60px;
  line-height: 1;
  font-family: 'DS-Digital', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.hms__colon {
  display: inline-block;
  width: 1ch;                 /* 콜론 폭 고정 */
  text-align: center;
  font-size: 44px;
  line-height: 1.25;
  opacity: 0.85;
  font-family: 'DS-Digital', sans-serif;
}

.hms__label {
  margin-top: 2px;
  font-size: 9px;
  opacity: 0.8;
}

/* =========================================
   7) 시간 그림자
   ========================================= */
.hms__num,
.hms__colon {
  text-shadow:
    0 2px 2px rgba(0, 0, 0, 0.4),
    3px 5px 2px rgba(0, 0, 0, 0.3);
}

/* =========================================
   8) 모바일 모드(.mo)
   ========================================= */
.mo .banner-dday__timer {
  left: 45%;
  bottom: 30%;
  gap: 3%;
}
.global_jp.mo .banner-dday__timer {
    left: 48%;
    bottom: 29%;
}

.mo .dday-flip { gap: 2px; }

.mo .card { font-size: 13px; }

.mo .hms__num {
  font-size: 26px;
  width: 2ch;
}

.mo .hms__colon {
  font-size: 20px;
  width: 1ch;
  line-height: 1.25;
}

.mo .hms__label {
  font-size: 7px;
  letter-spacing: 0.3px;
  margin-top: 0;
}

.mo .hms__num,
.mo .hms__colon {
  text-shadow:
    0 2px 2px rgba(0, 0, 0, 0.3),
    2px 2px 1px rgba(0, 0, 0, 0.2);
}

/* =========================================
   9) 반응형 
   ========================================= */
@media (max-width: 600px) {
  .mo .banner-dday__timer {
    left: 47%;
    bottom: 30.5%;
    gap: 2%;
  }
  .mo .card         { font-size: 10px; }
  .mo .hms__num     { font-size: 18px; }
  .mo .hms__colon   { font-size: 8px; }
  .mo .hms__label   { font-size: 5px; }
}

@media (max-width: 500px) {
  .mo .banner-dday__timer {
    left: 47%;
    bottom: 31%;
    gap: 5%;
  }
  .mo .dday-flip    { gap: 1px; }
  .mo .card         { font-size: 6px; }
  .mo .hms          { gap: 2%; }

  .card__bottom     { border-top: 0; }

  .mo .hms__num     { font-size: 12px; width: 1.8ch;}
  .mo .hms__colon   { width: 0.5ch }
  .mo .hms__label   { font-size: 3px;  }

  .mo .hms__num,
  .mo .hms__colon {
    text-shadow:
      0 1px 1px rgba(0, 0, 0, 0.3),
      1px 1px 1px rgba(0, 0, 0, 0.1);
  }
}