/* =========================================================
   RSVP.CSS

   1. RSVP 요약 카드
   2. 참석 의사 입력 모달
   3. 전송 성공 / 실패 팝업
========================================================= */


/* =========================================================
   1. RSVP Section
========================================================= */

.rsvp {
  width: 100%;

  text-align: center;
}


/* =========================================================
   2. Summary Card
========================================================= */

.rsvp-summary {
  width: 100%;

  margin-top:
    clamp(30px, 8vw, 38px);

  padding:
    clamp(24px, 7vw, 30px)
    clamp(20px, 6vw, 26px);

  border:
    1px solid
    rgba(209, 148, 156, 0.12);

  border-radius: 12px;

  background:
    rgba(209, 148, 156, 0.13);

  text-align: center;
}


/* =========================================================
   3. Couple
========================================================= */

.rsvp-summary__couple {
  display: flex;

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

  gap:
    clamp(10px, 3vw, 14px);

  color:
    var(--color-ink);

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

  font-size:
    clamp(16px, 3.5vw, 18px);

  font-weight: 400;

  line-height: 1.5;

  letter-spacing:
    -0.02em;
}


.rsvp-summary__heart {
  color:
    var(--color-accent);

  font-size:
    1.5em;
}


/* =========================================================
   4. Divider
========================================================= */

.rsvp-summary__divider {
  width: 100%;

  height: 1px;

  margin:
    clamp(20px, 5vw, 24px)
    0;

  background:
    rgba(209, 148, 156, 0.16);
}


/* =========================================================
   5. Wedding Info
========================================================= */

.rsvp-summary__info {
  display: grid;

  gap:
    9px;

  width: 100%;
}


.rsvp-summary__info p {
  margin: 0;

  color:
    #765d58;

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

  font-size:
    clamp(16px, 3.3vw, 18px);

  font-weight: 300;

  line-height: 1.6;

  letter-spacing:
    -0.015em;
}


.rsvp-summary__venue {
  margin-top:
    8px !important;
}


/* =========================================================
   6. Summary Button
========================================================= */

.rsvp-summary__button {
  width: 100%;

  min-height: 48px;

  margin-top:
    clamp(22px, 6vw, 28px);

  border: 0;

  border-radius: 8px;

  background:
    var(--color-accent);

  color:
    #ffffff;

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

  font-size:
    clamp(15px, 3.3vw, 18px);

  font-weight: 400;

  letter-spacing:
    -0.01em;

  cursor: pointer;

  box-shadow:
    none;

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

    transform
    var(--motion-fast)
    var(--ease-standard);
}


/* =========================================================
   7. RSVP Modal
========================================================= */

.rsvp-modal {
  position: fixed;

  inset: 0;

  z-index: 1300;

  display: flex;

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

  padding:
    20px;
}


.rsvp-modal[hidden] {
  display: none;
}


/* =========================================================
   8. Modal Backdrop
========================================================= */

.rsvp-modal__backdrop {
  position: absolute;

  inset: 0;

  background:
    rgba(43, 37, 36, 0.38);

  backdrop-filter:
    blur(3px);

  -webkit-backdrop-filter:
    blur(3px);
}


/* =========================================================
   9. Modal Panel
========================================================= */

.rsvp-modal__panel {
  position: relative;

  z-index: 1;

  width:
    min(100%, 390px);

  max-height:
    min(88vh, 700px);

  overflow-y: auto;

  padding:
    clamp(28px, 7vw, 34px)
    clamp(20px, 6vw, 26px)
    clamp(24px, 6vw, 30px);

  border-radius:
    18px;

  background:
    var(--color-paper);

  box-shadow:
    0 20px 55px
    rgba(43, 37, 36, 0.18);

  overscroll-behavior:
    contain;

  animation:
    rsvp-modal-in
    var(--motion-normal)
    var(--ease-soft)
    both;
}


/* =========================================================
   10. Modal Close
========================================================= */

.rsvp-modal__close {
  position: absolute;

  top: 12px;
  right: 14px;

  display: flex;

  width: 34px;
  height: 34px;

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

  padding: 0;

  border: 0;

  background:
    transparent;

  color:
    var(--color-muted);

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

  font-size:
    23px;

  font-weight: 300;

  line-height: 1;

  cursor: pointer;
}


/* =========================================================
   11. Modal Header
========================================================= */

.rsvp-modal__head {
  padding:
    4px 28px
    22px;

  text-align: center;
}


.rsvp-modal__title {
  margin: 0;

  color:
    var(--color-ink);

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

  font-size:
    clamp(18px, 5vw, 21px);

  font-weight: 300;

  line-height: 1.5;

  letter-spacing:
    -0.025em;
}


.rsvp-modal__lead {
  margin:
    7px 0 0;

  color:
    var(--color-muted);

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

  font-size:
    clamp(11px, 3vw, 12px);

  font-weight: 300;

  line-height: 1.5;
}


/* =========================================================
   12. RSVP Form
========================================================= */

.rsvp-form {
  display: grid;

  width: 100%;

  gap:
    clamp(18px, 5vw, 22px);

  margin-top:
    4px;

  text-align: left;
}


/* =========================================================
   13. RSVP Field
========================================================= */

.rsvp-field {
  display: grid;

  width: 100%;

  min-width: 0;

  gap:
    7px;

  margin: 0;
  padding: 0;

  border: 0;
}


/* =========================================================
   14. Label
========================================================= */

.rsvp-field__label {
  display: block;

  margin: 0;

  color:
    var(--color-ink);

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

  font-size:
    clamp(11px, 3.1vw, 12px);

  font-weight: 400;

  line-height: 1.5;

  letter-spacing:
    -0.015em;
}


/* =========================================================
   15. Choice Group
========================================================= */

.rsvp-choice-group {
  display: grid;

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

  gap:
    8px;

  width: 100%;
}


/* =========================================================
   16. Choice
========================================================= */

.rsvp-choice {
  position: relative;

  display: block;

  min-width: 0;

  cursor: pointer;
}


.rsvp-choice input {
  position: absolute;

  width: 1px;
  height: 1px;

  margin: -1px;
  padding: 0;

  overflow: hidden;

  clip:
    rect(0 0 0 0);

  clip-path:
    inset(50%);

  white-space:
    nowrap;

  border: 0;
}


.rsvp-choice span {
  display: flex;

  width: 100%;

  min-height: 44px;

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

  padding:
    8px 10px;

  border:
    1px solid
    var(--color-line);

  border-radius:
    11px;

  background:
    rgba(255, 255, 255, 0.42);

  color:
    var(--color-muted);

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

  font-size:
    clamp(11px, 3.1vw, 12px);

  font-weight: 300;

  line-height: 1.4;

  transition:
    border-color
    var(--motion-fast)
    var(--ease-standard),

    background-color
    var(--motion-fast)
    var(--ease-standard),

    color
    var(--motion-fast)
    var(--ease-standard);
}


/* =========================================================
   17. Selected Choice
========================================================= */

.rsvp-choice input:checked + span {
  border-color:
    rgba(209, 148, 156, 0.72);

  background:
    rgba(209, 148, 156, 0.13);

  color:
    var(--color-ink);
}


.rsvp-choice input:focus-visible + span {
  outline:
    2px solid
    rgba(209, 148, 156, 0.4);

  outline-offset:
    2px;
}


/* =========================================================
   18. Input
========================================================= */

.rsvp-input {
  display: block;

  width: 100%;

  height: 46px;

  padding:
    0 14px;

  border:
    1px solid
    var(--color-line);

  border-radius:
    11px;

  outline: none;

  background:
    rgba(255, 255, 255, 0.52);

  color:
    var(--color-ink);

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

  /*
    iOS 자동 확대 방지
  */
  font-size: 16px;

  font-weight: 300;

  line-height: 1;

  letter-spacing:
    -0.015em;

  appearance:
    none;

  transition:
    border-color
    var(--motion-fast)
    var(--ease-standard),

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


.rsvp-input::placeholder {
  color:
    var(--color-muted);

  opacity:
    0.65;
}


.rsvp-input:focus {
  border-color:
    rgba(209, 148, 156, 0.7);

  box-shadow:
    0 0 0 3px
    rgba(209, 148, 156, 0.08);
}


/* =========================================================
   19. Phone
========================================================= */

.rsvp-input--phone {
  font-family:
    "SUIT-Regular",
    sans-serif;

  font-weight: 400;

  letter-spacing:
    0.12em;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   20. Counter
========================================================= */

.rsvp-counter {
  display: grid;

  grid-template-columns:
    46px minmax(60px, 1fr) 46px;

  width: 100%;

  min-height:
    46px;

  align-items:
    stretch;

  overflow:
    hidden;

  border:
    1px solid
    var(--color-line);

  border-radius:
    11px;

  background:
    rgba(255, 255, 255, 0.52);
}


/* =========================================================
   21. Counter Button
========================================================= */

.rsvp-counter__button {
  display: flex;

  align-items:
    center;

  justify-content:
    center;

  padding: 0;

  border: 0;

  background:
    transparent;

  color:
    var(--color-accent);

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

  font-size:
    20px;

  font-weight: 200;

  cursor: pointer;

  transition:
    background-color
    var(--motion-fast)
    var(--ease-standard),

    opacity
    var(--motion-fast)
    var(--ease-standard);
}


.rsvp-counter__button:first-child {
  border-right:
    1px solid
    var(--color-line);
}


.rsvp-counter__button:last-child {
  border-left:
    1px solid
    var(--color-line);
}


.rsvp-counter__button:disabled {
  color:
    var(--color-muted);

  opacity:
    0.28;

  cursor:
    default;
}


/* =========================================================
   22. Counter Value
========================================================= */

.rsvp-counter__value {
  display: flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    var(--color-ink);

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

  font-size:
    15px;

  font-weight: 400;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   23. Hidden Count
========================================================= */

.rsvp-field[hidden] {
  display: none;
}


/* =========================================================
   24. Guide
========================================================= */

.rsvp-field__guide {
  margin:
    1px 0 0;

  color:
    var(--color-muted);

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

  font-size:
    clamp(9px, 2.6vw, 10px);

  font-weight: 300;

  line-height:
    1.5;

  letter-spacing:
    -0.01em;
}


/* =========================================================
   25. Validation
========================================================= */

.rsvp-form__message {
  margin:
    -5px 0 0;

  padding:
    9px 11px;

  border-radius:
    9px;

  background:
    rgba(209, 148, 156, 0.09);

  color:
    #a66f77;

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

  font-size:
    11px;

  font-weight: 300;

  line-height:
    1.5;
}


.rsvp-form__message[hidden] {
  display: none;
}


/* =========================================================
   26. Submit
========================================================= */

.rsvp-submit {
  width: 100%;

  min-height:
    48px;

  margin-top:
    2px;

  border: 0;

  border-radius:
    999px;

  background:
    var(--color-accent);

  color:
    #ffffff;

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

  font-size:
    12px;

  font-weight: 400;

  cursor: pointer;

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

    transform
    var(--motion-fast)
    var(--ease-standard);
}


.rsvp-submit:disabled {
  opacity:
    0.58;

  cursor:
    wait;
}


/* =========================================================
   27. Result Popup
========================================================= */

.rsvp-result {
  position: fixed;

  inset: 0;

  z-index: 1400;

  display: flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    24px;
}


.rsvp-result[hidden] {
  display: none;
}


/* =========================================================
   28. Result Backdrop
========================================================= */

.rsvp-result__backdrop {
  position: absolute;

  inset: 0;

  background:
    rgba(43, 37, 36, 0.38);

  backdrop-filter:
    blur(3px);

  -webkit-backdrop-filter:
    blur(3px);
}


/* =========================================================
   29. Result Panel
========================================================= */

.rsvp-result__panel {
  position: relative;

  z-index: 1;

  width:
    min(100%, 320px);

  padding:
    32px 24px
    24px;

  border-radius:
    18px;

  background:
    var(--color-paper);

  text-align:
    center;

  box-shadow:
    0 18px 45px
    rgba(43, 37, 36, 0.15);

  animation:
    rsvp-result-in
    var(--motion-normal)
    var(--ease-soft)
    both;
}


/* =========================================================
   30. Result Icon
========================================================= */

.rsvp-result__icon {
  display: flex;

  width: 44px;
  height: 44px;

  align-items:
    center;

  justify-content:
    center;

  margin:
    0 auto
    18px;

  border-radius:
    50%;

  background:
    rgba(209, 148, 156, 0.13);

  color:
    var(--color-accent);

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

  font-size:
    20px;
}


/* 실패 */

.rsvp-result.is-error
.rsvp-result__icon {
  color:
    #a66f77;

  background:
    rgba(166, 111, 119, 0.10);
}


/* =========================================================
   31. Result Title
========================================================= */

.rsvp-result__title {
  margin: 0;

  color:
    var(--color-ink);

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

  font-size:
    clamp(15px, 4vw, 17px);

  font-weight: 400;

  line-height:
    1.5;
}


/* =========================================================
   32. Result Message
========================================================= */

.rsvp-result__message {
  margin:
    11px 0 0;

  color:
    var(--color-muted);

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

  font-size:
    12px;

  font-weight: 300;

  line-height:
    1.8;

  word-break:
    keep-all;
}


/* =========================================================
   33. Result Button
========================================================= */

.rsvp-result__button {
  width: 100%;

  min-height:
    46px;

  margin-top:
    24px;

  border-radius:
    999px;
}


/* =========================================================
   34. Modal Animation
========================================================= */

@keyframes rsvp-modal-in {

  from {
    opacity: 0;

    transform:
      translateY(16px)
      scale(0.98);
  }


  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

}


/* =========================================================
   35. Result Animation
========================================================= */

@keyframes rsvp-result-in {

  from {
    opacity: 0;

    transform:
      translateY(12px)
      scale(0.97);
  }


  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

}


/* =========================================================
   36. Body Lock
========================================================= */

body.is-rsvp-modal-open,
body.is-rsvp-result-open {
  overflow: hidden;
}


/* =========================================================
   37. Hover
========================================================= */

@media (hover: hover) {

  .rsvp-summary__button:hover,
  .rsvp-submit:not(:disabled):hover {
    opacity:
      0.9;
  }


  .rsvp-choice:hover span {
    border-color:
      rgba(209, 148, 156, 0.42);
  }


  .rsvp-counter__button:not(:disabled):hover {
    background:
      rgba(209, 148, 156, 0.08);
  }

}


/* =========================================================
   38. Active
========================================================= */

.rsvp-summary__button:active,
.rsvp-submit:not(:disabled):active {
  transform:
    scale(0.99);
}


.rsvp-counter__button:not(:disabled):active {
  background:
    rgba(209, 148, 156, 0.12);
}


/* =========================================================
   39. Small Mobile
========================================================= */

@media (max-width: 360px) {

  .rsvp-summary {
    padding:
      22px 16px;
  }


  .rsvp-modal {
    padding:
      12px;
  }


  .rsvp-modal__panel {
    max-height:
      92vh;

    padding:
      26px 18px
      22px;
  }


  .rsvp-form {
    gap:
      16px;
  }


  .rsvp-choice span {
    min-height:
      42px;
  }


  .rsvp-counter {
    grid-template-columns:
      44px
      minmax(54px, 1fr)
      44px;
  }

}


/* =========================================================
   40. Reduced Motion
========================================================= */

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

  .rsvp-modal__panel,
  .rsvp-result__panel {
    animation: none;
  }


  .rsvp-summary__button,
  .rsvp-choice span,
  .rsvp-input,
  .rsvp-counter__button,
  .rsvp-submit {
    transition: none;
  }

}