/* =========================================================
   RSVP
========================================================= */


.rsvp-open-area {
  padding: 55px 28px;

  background: var(--page-bg);

  text-align: center;
}


.rsvp-guide {
  margin: 0 0 20px;

  color: var(--sub-text-color);

  font-size: 12px;

  line-height: 1.9;
}


.rsvp-open-btn {
  padding: 12px 30px;

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

  background: transparent;

  color: var(--text-color);

  font-size: 13px;
}



/* =========================================================
   팝업 배경
========================================================= */

.rsvp-modal {
  position: fixed;

  inset: 0;

  z-index: 5000;


  display: flex;

  justify-content: center;

  align-items: center;


  padding: 20px;


  background:
    rgba(30, 28, 25, .55);


  opacity: 0;

  visibility: hidden;

  transition:
    opacity .35s ease,
    visibility .35s ease;
}


.rsvp-modal.open {
  opacity: 1;

  visibility: visible;
}



/* =========================================================
   팝업 박스
========================================================= */

.rsvp-box {
  position: relative;

  width: min(
    100%,
    360px
  );


  max-height: 88vh;

  overflow-y: auto;


  padding:
    38px 25px 28px;


  background:
    #f8f5ef;


  box-shadow:
    0 15px 45px
    rgba(0,0,0,.18);


  transform:
    translateY(25px);


  transition:
    transform .4s ease;
}


.rsvp-modal.open
.rsvp-box {

  transform:
    translateY(0);

}



/* 닫기 */

.rsvp-close {
  position: absolute;

  top: 12px;

  right: 15px;

  border: 0;

  background: transparent;

  color:
    var(--sub-text-color);

  font-size: 24px;
}



/* 제목 */

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

  color:
    var(--sub-text-color);

  font-family:
    var(--font-en);

  font-size: 13px;

  letter-spacing: .18em;

  text-align: center;
}


.rsvp-title {
  margin: 0;

  font-size: 19px;

  font-weight: 500;

  text-align: center;
}


.rsvp-description {
  margin:
    12px 0 30px;

  color:
    var(--sub-text-color);

  font-size: 11px;

  line-height: 1.8;

  text-align: center;
}



/* =========================================================
   입력
========================================================= */

.rsvp-field {
  margin-bottom: 24px;
}


.rsvp-label {
  display: block;

  margin: 0 0 9px;

  font-size: 12px;

  font-weight: 400;
}



/* 선택 버튼 */

.rsvp-choice {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 8px;
}


.rsvp-choice label {
  position: relative;
}


.rsvp-choice input {
  position: absolute;

  opacity: 0;
}


.rsvp-choice span {
  min-height: 44px;

  display: flex;

  justify-content: center;

  align-items: center;


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


  background:
    rgba(255,255,255,.45);


  color:
    var(--sub-text-color);


  font-size: 12px;


  transition:
    .2s ease;
}


.rsvp-choice
input:checked + span {

  border-color:
    var(--point-color);

  background:
    var(--point-color);

  color:
    #fff;

}



/* 이름 */

.rsvp-input,
.rsvp-select {

  width: 100%;

  height: 46px;


  padding:
    0 13px;


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


  border-radius: 0;


  outline: none;


  background:
    rgba(255,255,255,.55);


  color:
    var(--text-color);


  font-family:
    var(--font-ko);

  font-size: 12px;
}


.rsvp-input:focus,
.rsvp-select:focus {

  border-color:
    var(--point-color);

}


.rsvp-select:disabled {
  opacity: .45;
}



/* 전달 버튼 */

.rsvp-submit {
  width: 100%;

  min-height: 48px;


  margin-top: 7px;


  border: 0;


  background:
    var(--point-color);


  color: #fff;


  font-size: 13px;
}


.rsvp-submit:disabled {
  opacity: .55;
}