/* =========================================================
   WEDDING-DAY.CSS
   예식 날짜 / 달력 / D-DAY 카운트다운
========================================================= */

/* =========================================================
   Wedding Date Hero
========================================================= */

.wedding-date-hero {
  position: relative;

  width: calc(
    100% + (var(--page-padding) * 2)
  );

  min-height:
    clamp(470px, 135vw, 700px);

  margin:
    calc(var(--section-padding-y) * -1)
    calc(var(--page-padding) * -1)
    clamp(72px, 18vw, 92px);

  overflow: hidden;

  background:
    #f3e5a8;
}


/* =========================================================
   Date Inner
========================================================= */

.wedding-date-hero__inner {
  position: relative;

  width: 100%;
  min-height: inherit;

  overflow: hidden;
}


/* =========================================================
   Common Date Typography
========================================================= */

.wedding-date-hero__sat,
.wedding-date-hero__day,
.wedding-date-hero__month,
.wedding-date-hero__year {
  position: absolute;

  margin: 0;

  color:
    rgba(255, 250, 247, 0.97);

  /*
    가늘고 세로로 긴 느낌을 위해
    이 영역만 Cormorant 300 사용
  */
  font-family:
    "Cormorant Garamond",
    "Sometimestimes",
    Georgia,
    serif;

  font-weight: 300;

  line-height: 0.82;

  white-space: nowrap;

  /*
    처음에는 완전히 안 보임
  */
  opacity: 0;

  transform:
    translateY(150%)
    scaleY(1.14);

  transform-origin:
    center;

  transition:
    opacity 1800ms var(--ease-soft),
    transform 2400ms var(--ease-soft);
}


/* =========================================================
   SAT
   왼쪽 위
========================================================= */

.wedding-date-hero__sat {
  top: 9%;
  left: 5%;

  font-size:
    clamp(78px, 24vw, 112px);

  letter-spacing:
    -0.035em;

  transition-delay:
    0ms;
}


/* =========================================================
   21
   오른쪽 위
========================================================= */

.wedding-date-hero__day {
  top: 21%;
  right: 7%;

  font-size:
    clamp(86px, 26vw, 122px);

  letter-spacing:
    -0.025em;

  transition-delay:
    250ms;
}


/* =========================================================
   NOV
   왼쪽 중간
========================================================= */

.wedding-date-hero__month {
  top: 50%;
  left: 6%;

  font-size:
    clamp(78px, 24vw, 114px);

  letter-spacing:
    -0.035em;

  transition-delay:
    500ms;
}


/* =========================================================
   2026
   오른쪽 아래
========================================================= */

.wedding-date-hero__year {
  right: 5%;
  bottom: 11%;

  font-size:
    clamp(82px, 24vw, 116px);

  letter-spacing:
    0.015em;

  transition-delay:
    750ms;
}


/* =========================================================
   Visible

   화면에 들어왔을 때
   아래에서 위로 올라옴
========================================================= */

.wedding-date-hero.is-date-visible
.wedding-date-hero__sat,

.wedding-date-hero.is-date-visible
.wedding-date-hero__day,

.wedding-date-hero.is-date-visible
.wedding-date-hero__month,

.wedding-date-hero.is-date-visible
.wedding-date-hero__year {
  opacity: 1;

  transform:
    translateY(0)
    scaleY(1.14);
}


/* =========================================================
   1. Wedding Day Section
========================================================= */

.wedding-day {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
}


/* =========================================================
   2. Heading
========================================================= */

.wedding-day .section-heading {
  margin-bottom: 0;

  text-align: center;
}


/* WEDDING DAY */
.wedding-day .eyebrow {
  margin: 0 0 20px;

  font-family: "Sometimestimes", serif;
  font-weight: 600;

  line-height: 1;

  letter-spacing: 0.08em;
}


/* 한글 날짜 / 시간 */
.wedding-day .section-title {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: clamp(7px, 2vw, 10px);

  margin: 0;

  line-height: 1.65;
}

.section-title__divider {
  color: var(--color-muted);

  font-weight: 200;

  opacity: 0.65;
}


/* 영문 날짜 */
.wedding-day .section-lead {
  margin: 9px 0 0;

  line-height: 1.5;

  letter-spacing: -0.01em;
}


/* =========================================================
   3. Calendar
========================================================= */

.calendar {
  position: relative;

  display: grid;

  grid-template-columns:
    repeat(7, minmax(0, 1fr));

  width: 100%;

  /*
    영문 날짜
       ↓
    여백
       ↓
    ─────────
       ↓
    달력
  */
  margin-top: 34px;
  padding-top: 27px;

  /*
    달력 각 날짜 행 사이 간격
  */
  row-gap: clamp(17px, 4.5vw, 21px);
  column-gap: 0;

  color: var(--color-ink);

  font-family: "SUIT-Light", sans-serif;

  /*
    날짜 숫자
    너무 작지도 크지도 않은 중간 크기
  */
  font-size: clamp(15px, 3.5vw, 18px);
  font-weight: 300;

  line-height: 1;

  letter-spacing: -0.15px;

  text-align: center;
}


/* 달력 위 구분선 */
.calendar::before {
  content: "";

  position: absolute;

  top: 0;
  left: 8px;
  right: 8px;

  height: 1px;

  background:
    rgba(180, 160, 156, 0.32);
}


/* =========================================================
   4. Weekday
   일 월 화 수 목 금 토
========================================================= */

.calendar__weekday {
  margin-bottom: 4px;

  color: var(--color-muted);

  font-family: "SUIT-Light", sans-serif;

  font-size: clamp(15px, 3.2vw, 18px);
  font-weight: 300;

  line-height: 1;

  letter-spacing: -0.15px;
}


/* 일요일 */
.calendar__weekday.is-sunday {
  color: #ef8b8b;
}


/* =========================================================
   5. Calendar Day
========================================================= */

.calendar__day {
  position: relative;

  display: grid;

  min-width: 0;
  min-height: 28px;

  place-items: center;
}


/* 날짜 숫자 */
.calendar__day span {
  position: relative;

  z-index: 1;

  display: grid;

  width: 28px;
  height: 28px;

  place-items: center;

  line-height: 1;
}


/* =========================================================
   6. Sunday
========================================================= */

.calendar__day.is-sunday {
  color: #ef8b8b;
}


/* =========================================================
   7. Wedding Day
========================================================= */

/* 예식일 원형 */
.calendar__day.is-wedding::before {
  content: "";

  position: absolute;

  z-index: 0;

  width: 33px;
  height: 33px;

  border-radius: 50%;

  background: var(--color-accent);
}


/*
  예식일 숫자는 항상 흰색

  예식일이 일요일이어도
  Sunday의 핑크보다 이 스타일이 우선
*/
.calendar__day.is-wedding,
.calendar__day.is-wedding span {
  color: #ffffff;
}


/* =========================================================
   8. Countdown Layout
========================================================= */

.countdown {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  width: 100%;

  margin-top:
    clamp(28px, 7vw, 34px);

  gap:
    clamp(6px, 2vw, 10px);
}


/* =========================================================
   9. Countdown Card
========================================================= */

.countdown > div {
  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  min-width: 0;

  padding:
    clamp(16px, 4.5vw, 24px)
    clamp(3px, 1.5vw, 10px)
    clamp(14px, 4vw, 20px);

  overflow: hidden;

  background: #fffdfb;

  border:
    1px solid
    rgba(188, 153, 143, 0.22);

  border-radius:
    clamp(12px, 3.5vw, 16px);

  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.06),
    0 3px 8px rgba(105, 77, 68, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);

  transition:
    transform
    var(--motion-fast)
    var(--ease-standard),

    box-shadow
    var(--motion-fast)
    var(--ease-standard);
}


/* PC hover */
@media (hover: hover) {

  .countdown > div:hover {
    transform:
      translateY(-2px);

    box-shadow:
      0 14px 24px rgba(0, 0, 0, 0.07),
      0 4px 9px rgba(105, 77, 68, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 1);
  }

}


/* 모바일 클릭 */
.countdown > div:active {
  transform:
    scale(0.99);
}


/* =========================================================
   10. Countdown Number
========================================================= */

.countdown strong {
  display: block;

  margin-bottom:
    clamp(8px, 2vw, 15px);

  font-family:
    "SUIT-Light",
    sans-serif;

  font-size:
    clamp(19px, 6vw, 24px);

  font-weight: 300;

  line-height: 1;

  color: #805b52;

  white-space: nowrap;
}


/* =========================================================
   11. Countdown Label
   DAYS / HOURS / MINUTES / SECONDS
========================================================= */

.countdown span {
  display: block;

  max-width: 100%;

  font-family:
    "SUIT-Light",
    sans-serif;

  font-size:
    clamp(8px, 2.4vw, 12px);

  font-weight: 600;

  line-height: 1;

  letter-spacing:
    clamp(
      0.03em,
      0.25vw,
      0.12em
    );

  color: #b08b82;

  white-space: nowrap;
}


/* =========================================================
   Countdown Caption
========================================================= */

.countdown-caption {
  margin:
    clamp(18px, 5vw, 32px)
    0
    0;

    
  text-align: center;

  color: var(--color-ink);

  font-family: "SUIT-Light", sans-serif;
  font-size: clamp(18px, 3.4vw, 20px);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: -0.01em;
}

.countdown-caption strong {
  color: var(--color-accent);
  font-family: "SUIT-Regular", sans-serif;
  font-size: inherit;
  font-weight: 400;
}

.countdown-caption__heart {
  display: inline-block;

  margin: 0 3px;

  color: var(--color-ink);

  font-size: 0.95em;
}

/* =========================================================
   Small Mobile
========================================================= */

@media (max-width: 360px) {

  .wedding-date-hero {
    min-height:
      480px;
  }


  .wedding-date-hero__sat {
    left: 5%;

    font-size:
      clamp(70px, 23vw, 88px);
  }


  .wedding-date-hero__day {
    right: 6%;

    font-size:
      clamp(64px, 21vw, 82px);
  }


  .wedding-date-hero__month {
    left: 6%;

    font-size:
      clamp(70px, 23vw, 90px);
  }


  .wedding-date-hero__year {
    right: 5%;

    font-size:
      clamp(66px, 21vw, 84px);
  }

}


/* =========================================================
   Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .wedding-date-hero__sat,
  .wedding-date-hero__day,
  .wedding-date-hero__month,
  .wedding-date-hero__year {
    opacity: 1;

    transform:
      scaleY(1.14);

    transition: none;
  }

}


/* =========================================================
   12. Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .countdown > div {
    transition: none;
  }

  .countdown > div:hover,
  .countdown > div:active {
    transform: none;
  }

}