/*
 * 진료 예약 신청 위젯 스타일 (reservation.js)
 * 날짜 → 시간 → 진료 → 정보 4단계, 아래에 고른 내용과 버튼이 고정되는 방식입니다.
 * 모든 클래스는 .rsv- 접두어를 사용해 사이트 기존 CSS와 충돌하지 않습니다.
 * 색상·글꼴은 아래 변수만 바꾸면 사이트 디자인에 맞출 수 있습니다.
 * 단계 번호(01~04)는 Jost 글꼴 (Google Fonts, README 참고)
 */
.rsv {
  --rsv-ink: #1b1a17;            /* 글자 */
  --rsv-dark: #26271f;           /* 선택한 시간·진료, 다음 버튼 (딥 올리브) */
  --rsv-dark-text: #f2ece2;
  --rsv-accent: #a85a2a;         /* 예약 신청 버튼 (테라코타) */
  --rsv-gold: #b89b72;           /* 영문 라벨, 선택한 날짜 테두리 (샴페인) */
  --rsv-bg: #f5f0e8;             /* 배경 (아래 고정 줄에도 사용) */
  --rsv-soft: #ece5da;
  --rsv-line: #ddd4c6;
  --rsv-muted: #8c8579;
  --rsv-off: #c9c0b2;            /* 예약 불가 */
  --rsv-error: #b33a2b;
  --rsv-font: inherit;
  --rsv-label: "Jost", "Futura", "Helvetica Neue", sans-serif;

  display: flex; flex-direction: column;
  max-width: 560px; margin: 0 auto;
  font-family: var(--rsv-font); color: var(--rsv-ink);
  line-height: 1.5; word-break: keep-all;
  box-sizing: border-box;
}
.rsv *, .rsv *::before, .rsv *::after { box-sizing: inherit; }
.rsv [hidden] { display: none !important; }
.rsv button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rsv button:disabled { cursor: default; }
.rsv button:focus-visible, .rsv input:focus-visible { outline: 1px solid var(--rsv-ink); outline-offset: 3px; }

.rsv-form { flex: 1 0 auto; display: flex; flex-direction: column; }

/* 단계 표시 */
.rsv-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 26px; }
.rsv-tab {
  padding: 10px 0 0; border: 0; border-top: 1px solid var(--rsv-line); background: none;
  text-align: left; font-size: 12px; letter-spacing: .04em; color: #b6ad9f; white-space: nowrap;
  transition: border-color .3s, color .3s;
}
.rsv-tab span { margin-right: 6px; font-family: var(--rsv-label); font-size: 10px; letter-spacing: .14em; }
.rsv-tab.is-done { border-top-color: var(--rsv-gold); color: var(--rsv-gold); }
.rsv-tab[aria-current="step"] { border-top-color: var(--rsv-ink); color: var(--rsv-ink); font-weight: 500; }

.rsv-step { padding-bottom: 28px; animation: rsv-in .4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rsv-in { from { opacity: 0; transform: translateY(10px); } }
.rsv-ask { margin: 0 0 18px; font-size: 15px; outline: none; }
.rsv-error { margin: 10px 0 0; color: var(--rsv-error); font-size: 13px; }
.rsv-error:empty { display: none; }
.rsv-hint { margin: 0; padding: 20px 0; text-align: center; color: var(--rsv-muted); font-size: 14px; border-top: 1px solid var(--rsv-line); border-bottom: 1px solid var(--rsv-line); }

.rsv-caps { font-family: var(--rsv-label); font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }

/* 1. 날짜 */
.rsv-cal-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 14px; }
.rsv-cal-title { font-size: 19px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.rsv-cal-navs { display: flex; gap: 4px; }
.rsv-cal-nav { position: relative; width: 36px; height: 36px; padding: 0; border: 0; background: none; }
.rsv-cal-nav::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
  border-left: 1px solid var(--rsv-ink); border-bottom: 1px solid var(--rsv-ink);
  transform: translate(-25%, -50%) rotate(45deg);
}
.rsv-cal-nav[data-nav="1"]::before { transform: translate(-75%, -50%) rotate(-135deg); }
.rsv-cal-nav:disabled { opacity: .22; }
.rsv-cal-week, .rsv-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
.rsv-cal-week span { padding-bottom: 8px; font-size: 12px; color: var(--rsv-muted); }
.rsv-day {
  position: relative; height: 46px; padding: 0; border: 0; background: none;
  font-size: 15px; font-weight: 300; font-variant-numeric: tabular-nums;
}
.rsv-day::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border: 1px solid transparent; border-radius: 50%; transition: border-color .25s;
}
.rsv-day.is-selected { font-weight: 500; }
.rsv-day.is-selected::before { border-color: var(--rsv-gold); }
.rsv-day:disabled { color: var(--rsv-off); }
/* 진료시간: 요일별 시간 | 점심시간·휴진 (좁으면 아래로) */
.rsv-hours {
  display: flex; flex-wrap: wrap; gap: 3px 24px; margin: 18px 2px 0; padding-top: 14px;
  border-top: 1px solid var(--rsv-line); font-size: 12.5px; color: var(--rsv-muted);
}
.rsv-hours dl { display: grid; grid-template-columns: auto auto; align-content: start; gap: 3px 12px; margin: 0; }
.rsv-hours dd { margin: 0; font-variant-numeric: tabular-nums; }

/* 2. 시간 */
.rsv-tg + .rsv-tg { margin-top: 22px; }
.rsv-tg-label { display: block; margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--rsv-line); font-size: 13px; font-weight: 600; color: var(--rsv-muted); }
.rsv-time-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rsv-time {
  height: 46px; padding: 0; border: 0; border-bottom: 1px solid var(--rsv-soft); background: none;
  font-size: 15px; font-weight: 300; font-variant-numeric: tabular-nums; transition: background-color .2s, color .2s;
}
.rsv-time.is-selected { background: var(--rsv-dark); color: var(--rsv-dark-text); font-weight: 400; }
.rsv-time:disabled { color: var(--rsv-off); text-decoration: line-through; text-decoration-thickness: 1px; }

/* 3. 진료 */
.rsv-opts { display: grid; border-top: 1px solid var(--rsv-line); }
.rsv-opt {
  display: flex; align-items: center; justify-content: space-between; width: 100%; height: 54px; padding: 0 4px;
  border: 0; border-bottom: 1px solid var(--rsv-line); background: none; text-align: left;
  font-size: 15px; font-weight: 300; transition: background-color .2s;
}
.rsv-opt::after {
  content: ""; flex: 0 0 auto; width: 16px; height: 16px; border: 1px solid var(--rsv-off); border-radius: 50%;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.rsv-opt[aria-pressed="true"] { font-weight: 500; }
.rsv-opt[aria-pressed="true"]::after { border-color: var(--rsv-dark); background: var(--rsv-dark); box-shadow: inset 0 0 0 3px var(--rsv-bg); }

/* 4. 정보 */
.rsv-fields { display: grid; gap: 18px; }
.rsv-field { display: block; }
.rsv-label { display: block; margin-bottom: 2px; font-size: 15px; font-weight: 700; color: var(--rsv-ink); }
.rsv-field input {
  width: 100%; height: 46px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--rsv-line); border-radius: 0;
  background: none; font: inherit; font-size: 16px; font-weight: 300; color: var(--rsv-ink);
}
.rsv-field input::placeholder { color: var(--rsv-off); }
.rsv-field input:focus { outline: none; border-bottom-color: var(--rsv-ink); }
.rsv-field input[aria-invalid="true"] { border-bottom-color: var(--rsv-error); }
.rsv-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* 연락처 입력 중에만 보이는 '확인' (숫자 키패드에 완료 키가 없어서) */
.rsv-input-wrap { position: relative; }
.rsv-input-wrap input { padding-right: 70px; }
.rsv-ok {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  height: 36px; padding: 0 16px; border: 0; border-radius: 2px;
  background: var(--rsv-dark); color: var(--rsv-dark-text) !important; font-size: 14px; font-weight: 600;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.rsv-input-wrap:focus-within .rsv-ok { opacity: 1; pointer-events: auto; }

/* 개인정보 동의: 연락처 바로 아래, 내용은 '내용 보기'로 펼침 */
.rsv-consent { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding: 14px 0; border-top: 1px solid var(--rsv-line); border-bottom: 1px solid var(--rsv-line); }
.rsv-more { flex: none; padding: 4px 0; border: 0; background: none; font-size: 13px; color: var(--rsv-muted) !important; text-decoration: underline; text-underline-offset: 3px; }
.rsv-privacy { margin: 12px 0 0; padding: 16px 18px; background: var(--rsv-soft); font-size: 12.5px; color: var(--rsv-muted); }
.rsv-privacy-title { margin: 0 0 8px; font-size: 13px; font-weight: 500; color: var(--rsv-ink); }
.rsv-privacy table { width: 100%; border-collapse: collapse; }
.rsv-privacy th, .rsv-privacy td { padding: 5px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rsv-line); }
.rsv-privacy th { width: 104px; padding-right: 12px; font-weight: 500; color: var(--rsv-ink); white-space: nowrap; }
.rsv-privacy p { margin: 10px 0 0; }
.rsv-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; font-weight: 500; cursor: pointer; }
.rsv-check input {
  -webkit-appearance: none; appearance: none; flex: 0 0 auto; display: grid; place-items: center;
  width: 20px; height: 20px; margin: 0; border: 1px solid var(--rsv-dark); border-radius: 0; background: #fff; cursor: pointer;
}
.rsv-check input::after { content: ""; width: 10px; height: 10px; background: var(--rsv-dark); transform: scale(0); transition: transform .15s; }
.rsv-check input:checked::after { transform: none; }
.rsv-check input[aria-invalid="true"] { border-color: var(--rsv-error); }
.rsv-check em { font-style: normal; color: var(--rsv-muted); }

/* 아래 고정 줄: 고른 내용 + 이전/다음(신청) */
.rsv-bar {
  position: sticky; bottom: 0; z-index: 2; margin-top: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0 10px;
  padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--rsv-bg); border-top: 1px solid var(--rsv-line);
}
.rsv-error-global { grid-column: 1 / -1; margin: 0 0 10px; }
.rsv-sum { min-width: 0; }
.rsv-sum-label { display: block; margin-bottom: 2px; font-size: 12px; color: var(--rsv-muted); }
.rsv-sum-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 400; }
.rsv-sum-text.is-empty { color: var(--rsv-muted); font-weight: 300; }
.rsv-back { position: relative; width: 46px; height: 52px; padding: 0; border: 1px solid var(--rsv-line); background: none; }
.rsv-back::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
  border-left: 1px solid var(--rsv-ink); border-bottom: 1px solid var(--rsv-ink); transform: translate(-25%, -50%) rotate(45deg);
}
.rsv-btn {
  min-width: 108px; height: 52px; padding: 0 24px; border: 0; border-radius: 2px;
  background: var(--rsv-dark); color: var(--rsv-dark-text) !important;
  font-size: 14px; font-weight: 500; letter-spacing: .16em; white-space: nowrap; transition: opacity .2s, background-color .2s;
}
.rsv-btn.is-final { background: var(--rsv-accent); color: #fff !important; }
.rsv-btn.is-waiting { opacity: .4; }
.rsv-btn:disabled { opacity: .6; }

/* 완료 */
.rsv-done { padding: 36px 0 24px; text-align: center; outline: none; animation: rsv-in .5s cubic-bezier(.2, .8, .2, 1) both; }
.rsv-done-check { position: relative; width: 62px; height: 62px; margin: 0 auto 26px; border: 1px solid var(--rsv-gold); border-radius: 50%; }
.rsv-done-check::after {
  content: ""; position: absolute; left: 21px; top: 18px; width: 18px; height: 10px;
  border-left: 1px solid var(--rsv-gold); border-bottom: 1px solid var(--rsv-gold); transform: rotate(-45deg);
}
.rsv-done-msg { margin: 0 0 8px; font-size: 18px; font-weight: 500; }
.rsv-done-sub { margin: 0 0 30px; font-size: 14px; color: var(--rsv-muted); }
.rsv-ticket { margin: 0; text-align: left; border-top: 1px solid var(--rsv-ink); }
.rsv-ticket div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 2px; border-bottom: 1px solid var(--rsv-line); }
.rsv-ticket dt { flex: 0 0 auto; font-size: 13px; color: var(--rsv-muted); }
.rsv-ticket dd { margin: 0; font-size: 14px; text-align: right; }

/* 마우스가 있는 화면에서만 올렸을 때 표시 (휴대폰은 누른 뒤 회색이 남지 않게) */
@media (hover: hover) {
  .rsv-day:not(:disabled):not(.is-selected):hover::before { border-color: var(--rsv-line); }
  .rsv-time:not(:disabled):not(.is-selected):hover { background: var(--rsv-soft); }
  .rsv-opt:hover { background: rgba(255, 255, 255, .45); }
}
@media (max-width: 380px) {
  .rsv-steps { gap: 8px; }
  .rsv-tab span { display: block; margin: 0 0 2px; }
  .rsv-btn { min-width: 92px; padding: 0 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .rsv-step, .rsv-done { animation: none; }
}