/* DEEP SQUARE 예약 (Phase 3) — 퍼블리싱에 없는 상태·요소만 덧붙인다. 기존 클래스 값은 바꾸지 않는다 (설계 §7.5).
   글꼴은 전역 Pretendard, 색은 사이트 값(#00499F 파랑 · #C60505/#FF0909 빨강 · #747474 회색)만 쓴다. 모바일 분기 1024px. */

/* 공통 레이어 호스트: .mypage_sub_con 범위 CSS 를 그대로 받되 자신은 박스를 만들지 않는다 */
.ds-rsv-layer-host { display: contents; }
.ds-rsv-layer-host .reserv_popup_con { max-width: calc(100% - 32px); max-height: calc(100vh - 40px); overflow: auto; }
.ds-rsv-layer-host .reserv_popup_con > .contents_con > .txt_con > .date_con:empty { display: none; }
.ds-rsv-layer-host .reserv_popup_con > .contents_con > .scroll_con > .info_con > ul { flex-direction: column; align-items: stretch; gap: 0; }
.ds-rsv-layer-host .reserv_popup_con > .contents_con > .scroll_con > .info_con > ul > li > .list_div { justify-content: space-between; }
.ds-rsv-layer-host .reserv_popup_con > .contents_con > .scroll_con > .info_con > ul > li > .list_div > .text02_con { text-align: right; }
.ds-rsv-layer-host .reserv_popup_con > .contents_con > .scroll_con > .info_con > ul > li > .list_div > .text02_con small { display: block; font-size: 12px; color: #7D7D7D; font-weight: 400; }
.ds-rsv-layer-host .reserv_popup_con > .contents_con > .scroll_con > .btn_con > ul > li > a.a_btn03 { background: #FFF; color: #555; border: 1px solid #CFCFCF; }
.ds-rsv-layer-host .reserv_popup_con > .contents_con > .scroll_con > .btn_con > ul > li > a.is-disabled { background: #C9C9C9; pointer-events: none; }
.ds-rsv-layer-host .ds-rsv-l-extra .count_con { display: flex; flex-direction: column; gap: 8px; }
.ds-rsv-layer-host .ds-rsv-l-extra .count_con .list_div { display: flex; justify-content: space-between; align-items: center; }
.ds-rsv-layer-host .ds-rsv-l-extra .count_con .input_con { display: flex; align-items: center; gap: 6px; }
.ds-rsv-layer-host .ds-rsv-l-extra .count_con .input_con button { width: 30px; height: 30px; border: 1px solid #CFCFCF; background: #FFF; border-radius: 6px; cursor: pointer; }
.ds-rsv-layer-host .ds-rsv-l-extra .count_con .input_con button img { width: 10px; }
.ds-rsv-layer-host .ds-rsv-l-extra .count_con .input_con input { width: 44px; text-align: center; border: none; font-size: 18px; font-weight: 700; }
.ds-rsv-layer-host .ds-rsv-l-extra .ds-rsv-quote { margin-top: 12px; font-size: 14px; color: #222; line-height: 150%; }
.ds-rsv-layer-host .ds-rsv-l-extra .ds-rsv-quote b { color: #00499F; }
.ds-rsv-layer-host .ds-rsv-l-extra .ds-rsv-quote .red { color: #C60505; }
.ds-rsv-layer-host .ds-rsv-l-extra .alert_text { margin-top: 8px; }
.ds-rsv-layer-host .ds-rsv-l-extra .alert_text > span { font-size: 13px; color: #C62828; font-weight: 500; }

/* 상태 알약 (마이페이지 reserv_state 와 같은 모양) — 대기 "안내됨" */
.reserv_state > span.notice, .ds-rsv-pill.notice { background: #FFE2E2; color: #E53935; }

/* 안내 박스 (step01: 이용제한·오픈 범위) — select_info 상자와 같은 값 */
.ds-rsv-notice { width: 100%; background: #FFF; padding: min(24px, 1.25vw) min(30px, 1.56vw); border-radius: min(20px, 1.04vw); margin: 0 0 min(30px, 1.56vw); }
.ds-rsv-notice > span { display: block; font-size: min(18px, 0.94vw); color: #7D7D7D; font-weight: 400; line-height: 150%; }
.ds-rsv-notice.is-blocked > span { color: #C60505; font-weight: 500; }
.ds-rsv-notice.is-single { margin: min(20px, 1.04vw) 0 0; background: #F7F8FA; }

/* 오류 문구 자리 (하단 버튼 위) — 기존 .alert_text.ds-dyn 과 같은 서체/색 */
.ds-rsv-alert { text-align: center; min-height: 0; }
.ds-rsv-alert > span { display: inline-block; font-size: min(14px, 0.73vw); color: #C62828; font-weight: 500; line-height: normal; margin-bottom: min(10px, 0.52vw); }
.ds-rsv-alert:empty { display: none; }

/* step02 달력: 선택 불가 날짜 (지난·오픈 전·휴관) */
.reserv_step02_con .cal_content .day table td.ds-rsv-off { cursor: default; }
.reserv_step02_con .cal_content .day table td.ds-rsv-off > span { color: #C9C9C9 !important; }
.reserv_step02_con .cal_content .day table td.ds-rsv-off > span > span { color: #C9C9C9 !important; }

/* step03 시간 목록: 이용권 선택 전 비활성 */
.reserv_step03_con .time_radio_list.ds-rsv-disabled { opacity: 0.45; pointer-events: none; }
.reserv_step03_con .time_radio_list .radio_label.ds-rsv-blocked { cursor: default; }
.reserv_step03_con .time_radio_list .radio_label.ds-rsv-blocked > .txt_con { border: 1px solid #E0E0E0; background: #F3F3F3; }
.reserv_step03_con .time_radio_list .radio_label.ds-rsv-blocked > .txt_con > .time_con > span,
.reserv_step03_con .time_radio_list .radio_label.ds-rsv-blocked > .txt_con > .state_con > span { color: #B5B5B5; }
/* 마감 슬롯 안 "대기신청" 알약 — step04 부이의 wait 모양(연한 주황) */
.reserv_step03_con .time_radio_list .radio_label .state_con .ds-rsv-wait { display: inline-flex; justify-content: center; align-items: center; height: min(26px, 1.35vw); margin-left: min(6px, 0.31vw); padding: 0 min(10px, 0.52vw); background: #FFF3E0; font-size: min(14px, 0.73vw); color: #B0763F; font-weight: 600; border-radius: min(20px, 1.04vw); cursor: pointer; pointer-events: auto; vertical-align: middle; }
.reserv_step03_con .time_radio_list .radio_label .state_con .ds-rsv-wait:hover { background: #FFE7C2; }
.reserv_step03_con .pass_radio_list .radio_label.ds-rsv-blocked { cursor: default; opacity: 0.5; }
.reserv_step03_con .pass_radio_list .radio_label .ds-rsv-sub { display: block; font-size: min(13px, 0.68vw); color: #C60505; font-weight: 400; margin-top: 2px; }

/* step04 부이: 마감 수심 (wait 클래스 대신 비활성 + "마감") */
.reserv_step04_con .radio_list .radio_label.ds-rsv-blocked { cursor: default; }
.reserv_step04_con .radio_list .radio_label.ds-rsv-blocked > .txt_con { opacity: 0.6; }
.reserv_step04_con .input_list.ds-rsv-disabled { opacity: 0.45; pointer-events: none; }

/* step05 금액 행 산식 */
.reserv_step05_con .step_end_con .ds-rsv-amount .text_con > span { font-weight: 700; color: #00499F; }
.reserv_step05_con .step_end_con .ds-rsv-amount .text_con small { display: block; font-size: min(14px, 0.73vw); color: #7D7D7D; font-weight: 400; text-align: right; margin-top: 2px; }
/* 결제수단 선택칸 아래 안내(가상계좌·휴대폰) — select 와 간격 (2026-11-04) */
.reserv_step05_con .step_end_con .ds-rsv-amount .ds-rsv-paymethod-note { margin-top: min(10px, 0.52vw); line-height: 1.5; }

/* 완료 화면 */
.reserv_complete_con .ds-rsv-done { text-align: center; margin: 0 0 min(30px, 1.56vw); }
.reserv_complete_con .ds-rsv-done > strong { display: block; font-size: min(30px, 1.56vw); color: #101010; font-weight: 700; line-height: 140%; }
.reserv_complete_con .ds-rsv-done > span { display: block; font-size: min(18px, 0.94vw); color: #7D7D7D; margin-top: min(8px, 0.42vw); }
.reserv_complete_con .ds-rsv-done > span b { color: #00499F; font-weight: 700; }
.reserv_complete_con .ds-rsv-guide { background: #F7F8FA; border-radius: min(10px, 0.52vw); padding: min(20px, 1.04vw) min(24px, 1.25vw); margin: min(20px, 1.04vw) 0 0; }
.reserv_complete_con .ds-rsv-guide li { font-size: min(15px, 0.78vw); color: #555; line-height: 170%; list-style: none; }
.reserv_complete_con .ds-rsv-guide li::before { content: '· '; color: #00499F; }
.reserv_complete_con .btn_con.ds-rsv-two { display: flex; justify-content: center; gap: min(10px, 0.52vw); }
.reserv_complete_con .btn_con.ds-rsv-two > a.ds-rsv-ghost { background: #FFF; color: #00499F; border: 1px solid #00499F; }
/* 완료 화면 금액 칸: 아래 안내(small)가 값보다 길면 값이 왼쪽으로 밀리던 것 — 값도 오른쪽 끝에 (2026-11-04) */
.reserv_complete_con .ds-rsv-amount .text_con { text-align: right; }

@media (max-width: 1024px) {
  .ds-rsv-notice { padding: 4.44vw; border-radius: 3.33vw; margin-bottom: 5.56vw; }
  .ds-rsv-notice > span { font-size: 3.89vw; }
  .ds-rsv-alert > span { font-size: 3.6vw; margin-bottom: 2.5vw; }
  .reserv_step03_con .time_radio_list .radio_label .state_con .ds-rsv-wait { height: 6.1vw; padding: 0 2.5vw; font-size: 3.3vw; border-radius: 5vw; margin-left: 1.2vw; }
  .reserv_step03_con .pass_radio_list .radio_label .ds-rsv-sub { font-size: 3.1vw; }
  .reserv_step05_con .step_end_con .ds-rsv-amount .text_con small { font-size: 3.3vw; }
  .reserv_complete_con .ds-rsv-done > strong { font-size: 6.1vw; }
  .reserv_complete_con .ds-rsv-done > span { font-size: 3.9vw; }
  .reserv_complete_con .ds-rsv-guide { padding: 4.4vw; border-radius: 2.2vw; }
  .reserv_complete_con .ds-rsv-guide li { font-size: 3.6vw; }
  .reserv_complete_con .btn_con.ds-rsv-two { flex-direction: column; align-items: stretch; }
  .ds-rsv-layer-host .reserv_popup_con { width: calc(100% - 32px); }
  .ds-rsv-layer-host .reserv_popup_con > .contents_con > .txt_con > .title_con > span { font-size: 6vw; }
  .ds-rsv-layer-host .reserv_popup_con > .contents_con > .txt_con > .date_con > span { font-size: 4vw; }
  .ds-rsv-layer-host .reserv_popup_con > .contents_con > .scroll_con > .info_con > ul > li > .list_div > .text01_con > span,
  .ds-rsv-layer-host .reserv_popup_con > .contents_con > .scroll_con > .info_con > ul > li > .list_div > .text02_con > span { font-size: 3.6vw; }
  .ds-rsv-layer-host .reserv_popup_con > .contents_con > .scroll_con > .btn_con > ul { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.22vw; }   /* 2026-11-04 모바일도 버튼을 가로로 가운데 (퍼블리싱 기본은 세로) */
  .ds-rsv-layer-host .reserv_popup_con > .contents_con > .scroll_con > .btn_con > ul > li > a { width: 32vw; height: 11vw; font-size: 4vw; }
  .ds-rsv-layer-host .reserv_popup_con > .contents_con > .scroll_con > .box_con > .title_con > span { font-size: 4vw; }
  .ds-rsv-layer-host .reserv_popup_con > .contents_con > .scroll_con > .box_con > .list_con > ul > li > span { font-size: 3.4vw; }
}
/* 금액 행 제목은 줄바꿈 없이 (모바일에서 "결제 금액"이 두 줄로 꺾이지 않게) */
.reserv_step05_con .step_end_con .ds-rsv-amount .title_con > span { white-space: nowrap; }
/* 마이페이지 예약내역: 행 끝 "상세" 작은 버튼 (목록 btn_con 작은 버튼 모양) */
.reservation_sub01_con .ds-rsv-detail { display: inline-flex; align-items: center; justify-content: center; margin-left: min(8px, 0.42vw); padding: 0 min(10px, 0.52vw); height: min(26px, 1.35vw); border: 1px solid #00499F; border-radius: min(6px, 0.31vw); background: #FFF; font-size: min(13px, 0.68vw); color: #00499F; font-weight: 700; line-height: 1; white-space: nowrap; vertical-align: middle; }
.reservation_sub01_con .ds-rsv-detail:hover { background: #00499F; color: #FFF; }
@media (max-width: 1024px) {
  .reservation_sub01_con .ds-rsv-detail { height: 7.5vw; padding: 0 3vw; font-size: 3.4vw; border-radius: 1.5vw; margin-left: 2vw; }
}

/* ---------------------------------------------------------------- Phase 5: step05 쿠폰·마일리지 할인 행
   행 마크업은 기존 list_div(title_con | text_con) 그대로 — 좌우 끝선은 기존 행과 같다. 입력 모양은 마이페이지 select(알약·#EFEFEF) 값 복제 */
.reserv_step05_con .step_end_con .ds-rsv-amount .ds-rsv-discount-plain .text_con > span,
.reserv_step05_con .step_end_con .ds-rsv-amount .ds-rsv-discount-none { font-weight: 400; color: #7D7D7D; }
.reserv_step05_con .step_end_con .ds-rsv-amount .ds-rsv-discount-row .text_con { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.reserv_step05_con .step_end_con .ds-rsv-amount .ds-rsv-discount-off .text_con > span { color: #C60505; }
.reserv_step05_con .step_end_con .ds-rsv-amount .ds-rsv-discount-select {
  width: min(340px, 17.71vw); max-width: 100%; height: min(49px, 2.55vw); border: 1px solid #EFEFEF; background-color: #FFF;
  background-image: url("/img/sub/select_arrow_color.svg"); background-repeat: no-repeat; background-position: right min(20px, 1.04vw) center; background-size: min(18px, 0.94vw);
  padding: 0 min(44px, 2.29vw) 0 min(20px, 1.04vw); border-radius: min(100px, 5.21vw); font-size: min(16px, 0.83vw); color: #222; font-weight: 500;
  -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis;
}
.reserv_step05_con .step_end_con .ds-rsv-amount .ds-rsv-discount-mileage { display: flex; align-items: center; justify-content: flex-end; gap: min(8px, 0.42vw); }
.reserv_step05_con .step_end_con .ds-rsv-amount .ds-rsv-discount-input {
  width: min(160px, 8.33vw); height: min(49px, 2.55vw); border: 1px solid #EFEFEF; background: #FFF; border-radius: min(100px, 5.21vw);
  padding: 0 min(20px, 1.04vw); text-align: right; font-size: min(16px, 0.83vw); color: #222; font-weight: 500;
}
.reserv_step05_con .step_end_con .ds-rsv-amount .ds-rsv-discount-input:disabled { background: #F5F6F8; color: #AAA; }
.reserv_step05_con .step_end_con .ds-rsv-amount .ds-rsv-discount-mileage > em { font-style: normal; font-size: min(16px, 0.83vw); color: #7D7D7D; }
.reserv_step05_con .step_end_con .ds-rsv-amount .ds-rsv-discount-all {
  display: inline-flex; align-items: center; height: min(49px, 2.55vw); padding: 0 min(18px, 0.94vw); border-radius: min(100px, 5.21vw);
  background: #00499F; color: #FFF; font-size: min(15px, 0.78vw); font-weight: 700; white-space: nowrap;
}
.reserv_step05_con .step_end_con .ds-rsv-amount .ds-rsv-discount-all.is-disabled { background: #EDEFF2; color: #9A9A9A; pointer-events: none; }
.reserv_step05_con .step_end_con .ds-rsv-amount .ds-rsv-discount-earn b { font-weight: 700; color: #00499F; }
@media (max-width: 1024px) {
  .reserv_step05_con .step_end_con .ds-rsv-amount .ds-rsv-discount-row > .list_div { flex-direction: column; align-items: stretch; gap: 2.22vw; }
  .reserv_step05_con .step_end_con .ds-rsv-amount .ds-rsv-discount-row .text_con { align-items: stretch; }
  .reserv_step05_con .step_end_con .ds-rsv-amount .ds-rsv-discount-row .text_con small { text-align: left; }
  .reserv_step05_con .step_end_con .ds-rsv-amount .ds-rsv-paymethod-note { margin-top: 2.22vw; }
  .reserv_step05_con .step_end_con .ds-rsv-amount .ds-rsv-discount-select { width: 100%; height: 11.11vw; padding: 0 10vw 0 4.44vw; font-size: 3.89vw; background-position: right 4.44vw center; background-size: 3.89vw; border-radius: 11.11vw; }
  .reserv_step05_con .step_end_con .ds-rsv-amount .ds-rsv-discount-mileage { justify-content: flex-start; gap: 2.22vw; }
  .reserv_step05_con .step_end_con .ds-rsv-amount .ds-rsv-discount-input { flex: 1; width: auto; min-width: 0; height: 11.11vw; padding: 0 4.44vw; font-size: 3.89vw; border-radius: 11.11vw; }
  .reserv_step05_con .step_end_con .ds-rsv-amount .ds-rsv-discount-mileage > em { font-size: 3.89vw; }
  .reserv_step05_con .step_end_con .ds-rsv-amount .ds-rsv-discount-all { height: 11.11vw; padding: 0 4.44vw; font-size: 3.61vw; border-radius: 11.11vw; }
}
/* Phase 5: 취소 레이어 면제 쿠폰 체크 */
.ds-rsv-layer-host .ds-rsv-waiver { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ds-rsv-layer-host .ds-rsv-waiver input { width: 18px; height: 18px; accent-color: #00499F; margin: 0; }
/* Phase 5: style.css 의 깊은 선택자(…> .text_con > span)보다 우선하도록 같은 깊이로 지정 — 최종 금액 파랑 굵게, 할인 빨강 */
.reserv_step05_con > .contents_con > .step_end_con > .box_con > .list_con.ds-rsv-amount > ul > li:last-child > .list_div > .text_con > span { font-weight: 700; color: #00499F; }
.reserv_step05_con > .contents_con > .step_end_con > .box_con > .list_con.ds-rsv-amount > ul > li.ds-rsv-discount-off > .list_div > .text_con > span { color: #C60505; }
@media (max-width: 1024px) {
  /* Phase 5: 쿠폰·마일리지 행은 제목 아래로 입력 (좌우 끝선은 다른 행과 같게) */
  .reserv_step05_con > .contents_con > .step_end_con > .box_con > .list_con.ds-rsv-amount > ul > li.ds-rsv-discount-row > .list_div { flex-direction: column; align-items: stretch; gap: 2.22vw; }
  .reserv_step05_con > .contents_con > .step_end_con > .box_con > .list_con.ds-rsv-amount > ul > li.ds-rsv-discount-row > .list_div > .text_con { width: 100%; }
}

/* 항목별 오류 자리 (섹션 제목 아래) — 하단 .ds-rsv-alert 와 같은 서체/색, 왼쪽 정렬. 비어 있으면 자리 차지 안 함 */
.reservation_center_con .ds-rsv-ferr:empty { display: none; }
.reservation_center_con .ds-rsv-ferr { margin-top: calc(-1 * min(10px, 0.52vw)); text-align: left; }
.reservation_center_con .ds-rsv-ferr > span { display: inline-block; font-size: min(16px, 0.83vw); color: #C62828; font-weight: 500; line-height: normal; }
.reserv_step01_con .check_list .ds-rsv-ferr { margin-top: calc(-1 * min(13px, 0.68vw)); padding: 0 min(20px, 1.04vw); }
@media (max-width: 1024px) {
  .reservation_center_con .ds-rsv-ferr { margin-top: -1.5vw; }
  .reservation_center_con .ds-rsv-ferr > span { font-size: 3.6vw; }
  .reserv_step01_con .check_list .ds-rsv-ferr { margin-top: -4vw; padding: 0 2.78vw; }
}

/* [2026-11-04] 회원권·마일리지 구매 레이어 (ds-purchase.js) — 예약 확인 레이어 안 선택칸 */
.ds-rsv-layer-host .ds-buy-form { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 6px; text-align: left; }
.ds-rsv-layer-host .ds-buy-form label { font-size: 14px; font-weight: 700; color: #101010; margin-top: 6px; }
.ds-rsv-layer-host .ds-buy-select { width: 100%; height: 44px; padding: 0 40px 0 16px; border: 1px solid #D9D9D9; border-radius: 999px; background: #FFF url('/img/sub/select_arrow_color.svg') no-repeat right 16px center / 14px; font-size: 15px; color: #101010; -webkit-appearance: none; appearance: none; }
.ds-rsv-layer-host .ds-buy-note { font-size: 13px; color: #00499F; min-height: 1em; }
@media all and (max-width: 1024px) {
  .ds-rsv-layer-host .ds-buy-form label { font-size: 3.6vw; }
  .ds-rsv-layer-host .ds-buy-select { height: 11.11vw; font-size: 3.89vw; border-radius: 11.11vw; }
  .ds-rsv-layer-host .ds-buy-note { font-size: 3.3vw; }
}