@charset "UTF-8";
/*
* Copyright 마케터비
* 예약/상담 폼 공용 컴포넌트 (.reserve-*) + 방문예약 모달 셸
* --------------------------------------------------------------------------------------------------
* [이 파일을 함께 쓰는 곳 — 3곳]
*   1) include/page_contact/content_main.html  메인 접수폼   (#js-contact-form)
*   2) include/page_contact/content.html       서브 상담폼   (#js-contact-form)
*   3) include/reserve-modal.html              방문예약 모달 (#js-reserve-form)
*   → .reserve-* 클래스를 고칠 때는 반드시 3곳을 함께 확인할 것. 모달 셸(.reserve-modal__*)만 3)번 전용이다.
*
* [디자인 방향] 벤치마크: prugio-riverfront.com
*   그림자로 띄우지 않는다. 헤어라인(1px)과 여백으로 구분한다.
*   과한 라운딩 지양(--radius-xs), 얇은 글꼴 + 넓은 자간, 전환은 0.3s 내외.
*
* ====================================================================================================
* ★ 특이도 — 2026-08-21 정리 완료. 더 이상 곡예를 하지 않는다.
* ----------------------------------------------------------------------------------------------------
* 세 폼 모두 <form> 에 .xet-form 이 함께 붙어 css/common/form.css 와 같은 속성을 다툰다.
* 예전에는 form.css 의 기본 입력칸 규칙이 (0,6,1) 이라 여기서 :not() 사슬을 똑같이 복제해
* (0,7,0) 으로 이기고, 그래도 모자란 곳은 !important 를 붙여야 했다.
*
* form.css 를 재작성하면서 그 사슬을 :where() 안으로 옮겨 특이도를 아래처럼 낮췄다.
*
*   ┌ form.css ─────────────────────────────────┬ 특이도 ─┬ 이 파일 ───────────────────────────┬ 특이도 ─┐
*   │ .xet-form input:where(:not(...))          │ (0,1,1) │ .reserve-form .reserve-field__input│ (0,2,0) │ ✔
*   │ .xet-form select                          │ (0,1,1) │ .reserve-form select.…__select     │ (0,2,1) │ ✔
*   │ .xet-form input:where(...):focus          │ (0,2,1) │ .reserve-form .…__input:focus      │ (0,3,0) │ ✔
*   │ .xet-form input[readonly]                 │ (0,2,1) │ .reserve-form .…__input[readonly]  │ (0,3,0) │ ✔
*   │ .xet-form input.error                     │ (0,2,1) │ .reserve-form .…__input.error      │ (0,3,0) │ ✔
*   │ .xet-form input[type=checkbox]            │ (0,2,1) │ .reserve-form .reserve-agree >     │ (0,3,1) │ ✔
*   │ .xet-form label input[type=checkbox]      │ (0,2,2) │   input[type=checkbox]            │         │
*   │ .xet-form input[type=checkbox]+label::be… │ (0,2,3) │ .reserve-form .reserve-agree >     │ (0,3,3) │ ✔
*   │                                           │         │   input[…]+label::before          │         │
*   └───────────────────────────────────────────┴─────────┴───────────────────────────────────┴─────────┘
*   ※ 특이도는 (id, 클래스·속성·의사클래스, 요소) 순으로 앞자리부터 비교한다.
*      (0,2,0) vs (0,1,1) → 둘째 자리 2>1 이므로 (0,2,0) 승. 셋째 자리는 보지 않는다.
*
*   → 결과: 이 파일에서 :not() 복제 8곳과 !important 21개(23→2)를 제거했다.
*      form.css 를 다시 손댈 일이 생기면 "1단계 (0,1,1) / 2단계 (0,2,1)" 계약만 지키면 된다.
*
* [남은 !important 2건] .reserve-modal__title 의 font-size (모바일 규칙 + 768px 규칙).
*   제목이 <h2> 라서 css/common/base.css 의 `h1~h6 { font-size: … !important }` 와 붙는다.
*   base.css 의 !important 는 Rhymix 게시판 스킨 전반에 걸려 있어 이 작업 범위에서 걷어낼 수 없다.
* ==================================================================================================== */

/* ====================================================================================================
   1. 공용 폼 컴포넌트 (.reserve-*) — 메인폼 / 서브폼 / 모달 공통
   ==================================================================================================== */

/* ---------- 필드 묶음 ---------- */
.reserve-field {
  margin-bottom: 18px;
}

/* 라벨: 작고 넓은 자간 + 약한 색. 값(16px 진한색)과의 위계를 명확히 한다. */
.reserve-field__label {
  display: block;
  margin-bottom: 9px;
  font-size: 12px;
  font-weight: var(--fw-medium, 500);
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--text-weak-color, #8a9099);
}

/* 입력창 공통.
   ★ font-size 는 반드시 16px 이상 — iOS Safari 가 15px 이하 입력창에 포커스되면 화면을 확대한다.
     (2026-08-21부터 루트 폰트가 전 화면 16px 로 통일됐지만, 이 값은 확대 방지가 목적이라
      상속에 맡기지 않고 px 로 못박아 둔다.)
   ★ height 54px 은 터치 타겟 최소 44px 을 여유 있게 넘긴 값. 모든 브레이크포인트에서 동일하게 유지한다.
     (아래 .reserve-date-icon 의 top 값이 이 높이의 절반에 묶여 있다) */
.reserve-form .reserve-field__input {
  display: block;
  width: 100%;
  height: 54px;
  margin: 0;
  padding: 0 16px;
  font-family: inherit;
  font-size: 16px;
  font-weight: var(--fw-normal, 400);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-strong-color, #191b1f);
  background-color: var(--content-bg-color, #fff);
  border: 1px solid var(--input-border-color, rgba(0, 0, 0, 0.16));
  border-radius: var(--radius-xs, 4px);
  outline: 0;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}

.reserve-form .reserve-field__input::placeholder {
  color: var(--text-weak-color, #a9aeb5);
  font-weight: var(--fw-normal, 400);
}

.reserve-form .reserve-field__input:hover {
  border-color: rgba(0, 0, 0, 0.32);
}

/* 포커스: 3px 글로우 대신 번짐 없는 1px 인셋 링.
   (테두리가 2px 처럼 또렷해져 대비는 오히려 커지고, 그림자로 떠 보이지는 않는다) */
.reserve-form .reserve-field__input:focus {
  color: var(--text-strong-color, #191b1f);
  background-color: var(--content-bg-color, #fff);
  border-color: var(--theme-color, #d51515);
  box-shadow: inset 0 0 0 1px var(--theme-color, #d51515);
  /* form.css 가 `.xet-form input:focus-visible` (0,2,1) 로 회색 outline 을 준다.
     이 컴포넌트는 테마색 테두리 + 인셋 링 자체가 포커스 표시라 이중 링이 되지 않게 끈다.
     (0,3,0) 이므로 form.css 를 이긴다. 포커스 가시성은 위 border/box-shadow 로 충분하다.) */
  outline: 0;
}

/* 검증 실패 (jquery.validate 가 input 에 .error 를 붙인다) */
.reserve-form .reserve-field__input.error {
  border-color: var(--red-color, #c02626);
}

/* ---------- select (방문 시간) ---------- */
/* form.css 의 .xet-form select (0,1,1) 이 자체 화살표를 깔아두므로 (0,2,1) 로 덮어쓴다.
   같은 요소가 .reserve-field__input(위 0,2,0) 도 갖고 있어 padding 단축속성과도 다투는데,
   요소 칸이 하나 더 많은 이 규칙이 이겨 padding-right 가 살아남는다. */
.reserve-form select.reserve-field__select {
  cursor: pointer;
  padding-right: 44px;
  background-color: var(--content-bg-color, #fff);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%238a9099' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 13px 13px;
}

/* ---------- 날짜 선택 (Flatpickr) ---------- */
.reserve-date-wrap {
  position: relative;
}
/* (0,3,0) — 위 기본 규칙(0,2,0)의 padding 단축속성을 이긴다 */
.reserve-form .reserve-date-wrap .reserve-field__input {
  padding-right: 76px; /* 달력 아이콘 + 삭제 버튼 자리 */
  cursor: pointer;
}

/* ★ readonly 되돌리기 — 날짜칸이 "비활성"으로 보이던 버그의 수정 지점
   Flatpickr 를 allowInput:false 로 띄우면 input 에 readonly 속성이 붙는다(직접 타이핑 차단용).
   form.css 의 `.xet-form input[readonly]` (0,2,1) 이 이 칸을 회색 비활성으로 칠해 버린다.
   readonly 는 시각적 비활성이 아니라 "달력으로만 고른다"는 뜻이므로 (0,3,0) 으로 되돌린다.
   ※ 특정 폼에 매지 않고 .reserve-form 기준으로만 잡는다 → 메인폼·서브폼·모달이 항상 같이 움직인다. */
.reserve-form .reserve-field__input[readonly] {
  cursor: pointer;
  color: var(--text-strong-color, #191b1f);
  background-color: var(--content-bg-color, #fff);
  border-color: var(--input-border-color, rgba(0, 0, 0, 0.16));
}
/* hover / focus / error 도 일반 입력칸과 동일하게. 위 [readonly] (0,3,0) 보다 한 칸 높은 (0,4,0). */
.reserve-form .reserve-field__input[readonly]:hover {
  border-color: rgba(0, 0, 0, 0.32);
}
.reserve-form .reserve-field__input[readonly]:focus {
  border-color: var(--theme-color, #d51515);
  box-shadow: inset 0 0 0 1px var(--theme-color, #d51515);
}
.reserve-form .reserve-field__input[readonly].error {
  border-color: var(--red-color, #c02626);
}

/* 아이콘/삭제버튼 위치를 top:50% 가 아니라 27px(입력창 높이 54px 의 절반)에 고정한다.
   jquery.validate 가 오류문구 <em>을 입력창 바로 뒤에 끼워 넣어 wrap 이 세로로 길어져도
   아이콘이 아래로 밀려나지 않게 하기 위함. 같은 이유로 형제 선택자는 '+' 가 아니라 '~' 를 쓴다. */
.reserve-date-icon {
  position: absolute;
  right: 16px;
  top: 27px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  stroke: var(--text-weak-color, #9aa0a6);
  fill: none;
  stroke-width: 1.6;
  pointer-events: none;
  transition: stroke 0.3s ease;
}
.reserve-field__input.has-value ~ .reserve-date-icon {
  stroke: var(--theme-color, #d51515);
}

.reserve-date-clear {
  position: absolute;
  right: 44px;
  top: 27px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--input-border-color, rgba(0, 0, 0, 0.16));
  border-radius: 50%;
  background: transparent;
  color: var(--text-weak-color, #8a9099);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}
.reserve-field__input.has-value ~ .reserve-date-clear {
  opacity: 1;
  pointer-events: auto;
}
.reserve-date-clear:hover,
.reserve-date-clear:focus-visible {
  border-color: var(--theme-color, #d51515);
  background: var(--theme-color, #d51515);
  color: #fff;
}

/* ---------- 개인정보 동의 ---------- */
/* 위쪽 헤어라인 하나로 입력 영역과 분리한다(카드/그림자 쓰지 않음). */
.reserve-agree {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 14px;
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
}

/* 모달만 <label class="reserve-agree__check"> 로 체크박스를 감싸고,
   메인/서브폼은 <input> + <label for> 형제 구조다. (jquery.validate 의 errorPlacement 가
   이 구조에 묶여 있어 마크업을 통일할 수 없다) → 두 구조를 CSS 로 같은 모양으로 맞춘다. */
.reserve-form .reserve-agree__check {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 0;
  cursor: pointer;
}

/* 네이티브 체크박스는 두 구조 모두 숨기고, 라벨의 가상요소로 그린다.
   (0,3,1) — form.css 의 `.xet-form label input[type=checkbox]` (0,2,2) 을 이긴다. */
.reserve-form .reserve-agree > input[type="checkbox"],
.reserve-form .reserve-agree__check > input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
}

/* 체크박스 라벨 = 실제 터치 타겟. min-height 44px 로 손가락 기준을 만족시킨다.
   form.css 의 white-space:nowrap 은 반드시 풀어야 한다 — 긴 동의 문구가 모바일에서 가로로 넘친다. */
.reserve-form .reserve-agree > input[type="checkbox"] + label,
.reserve-form .reserve-agree__check > input[type="checkbox"] + span {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 0; /* flex 아이템이 min-content 아래로 못 줄어들어 넘치는 것 방지 */
  margin: 0;
  padding-left: 30px;
  font-size: 14px;
  font-weight: var(--fw-normal, 400);
  line-height: 1.5;
  letter-spacing: -0.01em;
  white-space: normal;
  word-break: keep-all;
  color: var(--text-base-color, #5b6068);
  cursor: pointer;
}

/* 체크 박스 */
.reserve-form .reserve-agree > input[type="checkbox"] + label::before,
.reserve-form .reserve-agree__check > input[type="checkbox"] + span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background: var(--content-bg-color, #fff);
  border: 1px solid var(--input-border-color, rgba(0, 0, 0, 0.28));
  border-radius: 2px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* 체크 표시 — form.css 가 check.png 를 깔아두므로 background 를 비운다. (0,3,3) > (0,2,3) */
.reserve-form .reserve-agree > input[type="checkbox"] + label::after,
.reserve-form .reserve-agree__check > input[type="checkbox"] + span::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  width: 5px;
  height: 9px;
  background: none;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  transform: translate(0, -60%) rotate(45deg) scale(0);
  transition: transform 0.18s ease;
}
.reserve-form .reserve-agree > input[type="checkbox"]:checked + label::before,
.reserve-form .reserve-agree__check > input[type="checkbox"]:checked + span::before {
  background: var(--theme-color, #d51515);
  border-color: var(--theme-color, #d51515);
}
.reserve-form .reserve-agree > input[type="checkbox"]:checked + label::after,
.reserve-form .reserve-agree__check > input[type="checkbox"]:checked + span::after {
  transform: translate(0, -60%) rotate(45deg) scale(1);
}

/* 키보드 포커스 표시 (마우스 클릭 때는 나오지 않음) */
.reserve-form .reserve-agree > input[type="checkbox"]:focus-visible + label::before,
.reserve-form .reserve-agree__check > input[type="checkbox"]:focus-visible + span::before {
  border-color: var(--theme-color, #d51515);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

/* [내용보기] 토글 — 링크가 아닌 보조 동작. 밑줄 대신 약한 색 + 밑선 1px 로 절제한다.
   높이 44px 는 터치 타겟 확보용(글자 크기는 13px 그대로). */
.reserve-form .reserve-agree__toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--text-weak-color, #8a9099);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  cursor: pointer;
  transition: color 0.3s ease;
  flex-shrink: 0;
}
.reserve-form .reserve-agree__toggle:hover,
.reserve-form .reserve-agree__toggle:focus-visible {
  color: var(--theme-color, #d51515);
}

/* ---------- 개인정보 수집 안내문 ---------- */
/* 메인/서브폼은 contact.js 가 jQuery .toggle() 로 인라인 display 를 조작하고,
   모달은 reserve-modal.js 가 .is-open 클래스를 토글한다. 두 방식 모두 지원해야 한다. */
.reserve-privacy {
  display: none;
  width: 100%;
  margin-top: 14px;
}
.reserve-privacy.is-open {
  display: block;
}
.reserve-privacy__text {
  max-height: 190px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 18px;
  font-size: 13px;
  line-height: var(--lh-loose, 1.8);
  letter-spacing: -0.01em;
  color: var(--text-base-color, #6b7078);
  /* --input-bg-color 는 #fff 라 흰 배경 위에서 구분이 안 된다.
     안내문은 입력 영역이 아니므로 아주 옅은 중성 톤을 직접 지정한다. */
  background: #fafafb;
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
  border-radius: var(--radius-xs, 4px);
}

/* ---------- 검증 오류 문구 ---------- */
.reserve-form em.error {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--red-color, #c02626);
}

/* ---------- 제출 버튼 ---------- */
/* 전환의 최종 관문. 크게(58px) + 넓은 자간으로 명확하게 하되 컬러 글로우 그림자는 쓰지 않는다.
   scroll-margin-bottom: 모바일에서 키보드가 올라온 상태로 버튼이 포커스될 때
   화면 하단에 딱 붙지 않도록 여유를 준다. */
.reserve-submit {
  margin-top: 26px;
  scroll-margin-bottom: 24px;
}
.reserve-form .reserve-submit__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 58px;
  padding: 0 20px;
  border: 1px solid var(--theme-color, #d51515);
  border-radius: var(--radius-xs, 4px);
  background: var(--theme-color, #d51515);
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: var(--fw-medium, 500);
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
  -webkit-appearance: none;
  appearance: none;
}
.reserve-form .reserve-submit__btn:hover {
  opacity: 0.86;
}
.reserve-form .reserve-submit__btn:active {
  opacity: 0.78;
}
.reserve-form .reserve-submit__btn:focus-visible {
  outline: 2px solid var(--theme-color, #d51515);
  outline-offset: 2px;
}

/* ====================================================================================================
   2. 모달 셸 — include/reserve-modal.html 전용
   모바일: 하단 바텀시트 / 데스크탑: 중앙 카드
   ==================================================================================================== */
.reserve-modal {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
}
.reserve-modal.is-open {
  visibility: visible;
  pointer-events: auto;
}

.reserve-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 18, 25, 0.5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.reserve-modal.is-open .reserve-modal__overlay {
  opacity: 1;
}

/* max-height 를 vh 로만 잡으면 모바일에서 키보드가 올라왔을 때
   시트 높이가 그대로라 제출 버튼이 화면 밖으로 밀린다. dvh(동적 뷰포트)로 보정하고,
   미지원 브라우저는 위의 vh 값을 그대로 쓴다. */
.reserve-modal__panel {
  position: relative;
  width: 100%;
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: 24px;
  background: var(--content-bg-color, #fff);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.16);
  padding: 28px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.reserve-modal.is-open .reserve-modal__panel {
  transform: translateY(0);
}

/* 바텀시트 손잡이 */
.reserve-modal__panel::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.14);
}

.reserve-modal__close {
  position: absolute;
  top: 14px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs, 4px);
  background: none;
  color: var(--text-base-color, #5b6068);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s ease, background-color 0.3s ease;
}
.reserve-modal__close:hover,
.reserve-modal__close:focus-visible {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-strong-color, #191b1f);
}

/* ---------- 헤더 (모달 + 메인/서브 폼이 함께 사용) ---------- */
.reserve-modal__header {
  margin: 6px 0 26px;
  text-align: center;
}
.reserve-modal__title {
  margin: 0;
  /* 이 파일에 남은 !important 2건 중 하나(다른 하나는 768px 블록의 같은 속성).
     제목이 <h2> 라서 base.css 의 `h2 { font-size: 1.5rem !important }` 와 붙는데,
     base.css 의 !important 는 게시판 스킨 전반에 걸려 있어 이 작업 범위에서 걷어낼 수 없다. */
  font-size: var(--fs-lg, 1.25rem) !important;
  font-weight: var(--fw-medium, 500);
  line-height: var(--lh-tight, 1.3);
  letter-spacing: 0.02em;
  color: var(--text-strong-color, #191b1f);
}
.reserve-modal__subtitle {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: var(--fw-normal, 400);
  line-height: 1.7;
  letter-spacing: -0.01em;
  color: var(--text-weak-color, #8a9099);
}
.reserve-modal__subtitle strong {
  font-weight: var(--fw-medium, 500);
  color: var(--text-base-color, #5b6068);
}

/* 시트가 열린 동안 뒤쪽 본문 스크롤 잠금 */
body.reserve-open {
  overflow: hidden;
}

/* ====================================================================================================
   3. 데스크탑 (768px~) — 모달은 중앙 카드로, 폼 여백은 조금 더 넉넉하게
   ※ 입력창 높이(54px)와 font-size(16px)는 여기서도 바꾸지 않는다.
      iPad 가로(1024px)에서 15px 이하가 되면 iOS 가 화면을 확대해 버린다.
   ==================================================================================================== */
@media (min-width: 768px) {
  .reserve-field {
    margin-bottom: 20px;
  }

  .reserve-modal {
    align-items: center;
    padding: 24px;
  }
  .reserve-modal__panel {
    width: 100%;
    max-width: 460px;
    max-height: 88vh;
    max-height: 88dvh;
    border-radius: var(--radius-xs, 4px);
    padding: 40px 38px 34px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  }
  .reserve-modal.is-open .reserve-modal__panel {
    transform: translateY(0);
    opacity: 1;
  }
  .reserve-modal__panel::before {
    display: none;
  }
  .reserve-modal__header {
    margin: 0 0 30px;
  }
  .reserve-modal__title {
    font-size: var(--fs-xl, 1.5rem) !important; /* 위와 같은 이유 */
  }
}

/* ====================================================================================================
   4. 모션 최소화 선호
   ==================================================================================================== */
@media (prefers-reduced-motion: reduce) {
  .reserve-modal__panel,
  .reserve-modal__overlay,
  .reserve-form .reserve-field__input,
  .reserve-form .reserve-submit__btn,
  .reserve-date-icon,
  .reserve-date-clear {
    transition: none;
  }
}