/* ============================================================
   프로그램 사전예약 (2026 리뉴얼)
   Figma: 2026 진주남강유등축제 / node 155-235 ~ 155-239
   - 본인인증(정보입력/인증확인) · 좌석선택 · 예약확인 · 예약완료
   layouts.css 의 서브헤더 규칙은 .sub_container.inner 를 요구하는데
   예약 화면은 헤더 우측에 버튼이 붙는 변형이 있어 여기서 자립적으로 그린다.
   ============================================================ */

.rsv {
  --rsv-card: #1d1436;
  --rsv-card-2: rgba(255, 255, 255, 0.05);
  --rsv-line: rgba(255, 255, 255, 0.12);
  --rsv-line-soft: rgba(255, 255, 255, 0.08);
  --rsv-sub: rgba(255, 255, 255, 0.66);
  --rsv-dim: rgba(255, 255, 255, 0.42);
  --rsv-accent: #e93ed8;
  --rsv-cta: linear-gradient(90deg, #ff7a29 0%, #f0409a 52%, #a537f0 100%);
  --rsv-radius: 16px;

  position: relative;
  padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px));
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

/* 페이지 하단의 마젠타 글로우 (시안의 보라 → 자홍 번짐) */
.rsv::before {
  content: "";
  position: fixed;
  left: 50%;
  bottom: -30vh;
  width: 140vw;
  height: 70vh;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(233, 62, 216, 0.22) 0%, rgba(233, 62, 216, 0) 70%);
  pointer-events: none;
  z-index: -1;
}

/* ------------------------------------------------------------
   헤더
   ------------------------------------------------------------ */
.rsv_hd {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--safe-top) 16px 0;
  min-height: 67px;
  background: var(--hd-grad);
}
.rsv_hd .rsv_back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: -6px;
  color: #fff;
  flex: none;
}
.rsv_hd h2 {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 헤더 우측 알약 버튼 (축제 바로가기) */
.rsv_hd .rsv_hd_link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.rsv_hd .rsv_hd_link svg {
  flex: none;
}

/* 고정 헤더만큼 본문을 내린다 */
.rsv_body {
  padding-top: calc(67px + var(--safe-top) + 16px);
}

/* ------------------------------------------------------------
   단계 표시 (공연선택 > 좌석선택 > 예약확인)
   ------------------------------------------------------------ */
.rsv_steps {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border: 1px solid var(--rsv-line-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}
.rsv_steps li {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 5px 2px;
  border-radius: 999px;
  color: var(--rsv-dim);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.rsv_steps li .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.7);
  font-size: 9px;
  font-weight: 700;
  flex: none;
}
.rsv_steps li.on {
  color: #fff;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.1);
}
.rsv_steps li.on .num {
  background: var(--rsv-accent);
  color: #fff;
}
.rsv_steps .arw {
  flex: none;
  color: rgba(255, 255, 255, 0.28);
  padding: 0 2px;
}

/* ------------------------------------------------------------
   공통 타이포 / 카드
   ------------------------------------------------------------ */
.rsv_tit {
  margin-top: 22px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
}
.rsv_tit + .rsv_desc {
  margin-top: 8px;
}
.rsv_desc {
  font-size: 13px;
  color: var(--rsv-sub);
  line-height: 1.55;
}

.rsv_meta {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rsv_meta li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.86);
}
.rsv_meta li svg {
  flex: none;
  color: var(--rsv-dim);
}

.rsv_card {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--rsv-line-soft);
  border-radius: var(--rsv-radius);
  background: var(--rsv-card);
}
.rsv_card_tit {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.rsv_card_tit svg {
  flex: none;
  color: rgba(255, 255, 255, 0.72);
}
.rsv_card_tit + .rsv_card_bd {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rsv-line-soft);
}

.rsv_dl dt {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.rsv_dl dd {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}
.rsv_dl dd svg {
  flex: none;
  color: var(--rsv-dim);
}

.rsv_bullet li {
  position: relative;
  padding-left: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}
.rsv_bullet li + li {
  margin-top: 6px;
}
.rsv_bullet li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}

/* 안내 박스 (ⓘ) */
.rsv_notice {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 12px;
  line-height: 1.6;
  color: var(--rsv-sub);
}
.rsv_notice svg {
  flex: none;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.5);
}

/* ------------------------------------------------------------
   버튼
   ------------------------------------------------------------ */
.rsv_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  margin-top: 16px;
  border-radius: 999px;
  background: var(--rsv-cta);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(214, 56, 168, 0.32);
}
.rsv_btn:active {
  transform: translateY(1px);
}
.rsv_btn[disabled],
.rsv_btn.is_off {
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.42);
  box-shadow: none;
}
.rsv_btn_text {
  display: block;
  width: 100%;
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--rsv-sub);
}
.rsv_btn_line {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}

/* 체크박스 */
.rsv_check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
}
.rsv_check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.rsv_check .rsv_box {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: transparent;
}
.rsv_check input:checked + .rsv_box {
  border-color: transparent;
  background: var(--rsv-accent);
  color: #fff;
}

/* ------------------------------------------------------------
   본인인증 (auth)
   ------------------------------------------------------------ */
.rsv_hero {
  margin-top: 26px;
  text-align: center;
}
.rsv_hero .rsv_ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: conic-gradient(from 210deg, #ff7a29, #f0409a, #a537f0, #ff7a29);
  color: #fff;
}
.rsv_hero .rsv_ico > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #1a1030;
}
.rsv_hero h3 {
  margin-top: 18px;
  font-size: 20px;
  font-weight: 700;
}
.rsv_hero p {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--rsv-sub);
}

/* 01 정보입력 - 02 인증확인 */
.rsv_stepper {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  margin-top: 22px;
}
.rsv_stepper li {
  width: 76px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--rsv-dim);
}
.rsv_stepper li .dot {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 700;
}
.rsv_stepper li.on {
  color: #fff;
}
.rsv_stepper li.on .dot {
  background: var(--rsv-cta);
  color: #fff;
}
.rsv_stepper li.done .dot {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.rsv_stepper .bar {
  flex: none;
  width: 42px;
  height: 1px;
  margin-top: 17px;
  background: rgba(255, 255, 255, 0.24);
}

.rsv_field + .rsv_field {
  margin-top: 8px;
}
.rsv_label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.rsv_input {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--rsv-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}
.rsv_input svg {
  flex: none;
  color: var(--rsv-dim);
}
.rsv_input input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 14px;
  outline: none;
}
.rsv_input input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}
.rsv_input:focus-within {
  border-color: rgba(233, 62, 216, 0.7);
}

/* 전송 완료 알림 */
.rsv_alert {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(233, 62, 216, 0.45);
  border-radius: 12px;
  background: rgba(233, 62, 216, 0.12);
}
.rsv_alert svg {
  flex: none;
  margin-top: 2px;
  color: var(--rsv-accent);
}
.rsv_alert b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.rsv_alert em {
  font-style: normal;
  font-weight: 700;
  color: #fff;
}
.rsv_alert p {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

.rsv_otp_hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 18px;
}
.rsv_otp_hd .lb {
  font-size: 14px;
  font-weight: 700;
}
.rsv_otp_hd .time {
  font-size: 12px;
  color: var(--rsv-sub);
}
.rsv_otp_hd .time b {
  color: var(--rsv-accent);
  font-weight: 700;
}
.rsv_otp {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
  margin-top: 10px;
}
.rsv_otp input {
  width: 100%;
  height: 48px;
  border: 1px solid var(--rsv-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
}
.rsv_otp input::-webkit-outer-spin-button,
.rsv_otp input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.rsv_otp input:focus {
  border-color: rgba(233, 62, 216, 0.7);
}
.rsv_resend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--rsv-sub);
}
.rsv_relink {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--rsv-sub);
}
.rsv_relink a {
  display: block;
  margin-top: 6px;
  color: var(--rsv-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 하단 안내 (안전한 본인인증) */
.rsv_foot {
  margin-top: 44px;
  padding-bottom: 8px;
  text-align: center;
}
.rsv_foot .ico {
  color: rgba(255, 255, 255, 0.75);
}
.rsv_foot b {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 700;
}
.rsv_foot p {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--rsv-sub);
}
.rsv_foot small {
  display: block;
  margin-top: 26px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.28);
}

/* 본인인증 화면은 좌우 패딩 없이 화면 폭을 그대로 쓴다 */
.rsv.rsv_auth {
  padding-left: 0;
  padding-right: 0;
}

/* 탭바가 없는 화면 (본인인증) */
#wrap.no_tabbar {
  padding-bottom: 0;
}
#wrap.no_tabbar .tabbar {
  display: none;
}

/* ------------------------------------------------------------
   좌석 선택
   ------------------------------------------------------------ */
.rsv_stage {
  position: relative;
  margin-top: 16px;
  height: 112px;
  border-radius: 14px;
  overflow: hidden;
  background: #120c26 center 62%/cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.rsv_stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 6, 24, 0.15) 0%, rgba(10, 6, 24, 0.6) 100%);
}
.rsv_stage .plate,
.rsv_stage .dir {
  position: relative;
  z-index: 1;
}
.rsv_stage .plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 148px;
  height: 30px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  background: rgba(122, 74, 255, 0.4);
  box-shadow: 0 0 18px rgba(160, 110, 255, 0.55);
  font-size: 13px;
  font-weight: 700;
}
.rsv_stage .dir {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.82);
}

.rsv_filter {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  padding: 5px;
  border: 1px solid var(--rsv-line-soft);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}
.rsv_filter li {
  flex: 1;
}
.rsv_filter .chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 30px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 500;
}
.rsv_filter .chip .bul {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.rsv_filter .chip.vip .bul { background: #f5c451; }
.rsv_filter .chip.r .bul { background: #ff8a3d; }
.rsv_filter .chip.s .bul { background: #7f8ff5; }
.rsv_filter .chip.on {
  color: #fff;
  font-weight: 700;
  background: linear-gradient(90deg, #ff7a29 0%, #c02de0 100%);
}
/* '전체'는 시안에서 활성 여부와 무관하게 아웃라인 알약 */
.rsv_filter .chip.all {
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: #fff;
}
.rsv_filter .chip.all.on {
  background: transparent;
  font-weight: 700;
}

.rsv_toggle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
}
.rsv_toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.rsv_toggle .track {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  transition: background 0.15s;
}
.rsv_toggle .track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
}
.rsv_toggle input:checked + .track {
  background: var(--rsv-accent);
}
.rsv_toggle input:checked + .track::after {
  transform: translateX(16px);
}

.rsv_map {
  margin-top: 12px;
  padding: 16px 12px 14px;
  border: 1px solid var(--rsv-line-soft);
  border-radius: var(--rsv-radius);
  background: var(--rsv-card);
}
.rsv_map .zone {
  display: flex;
  justify-content: center;
}
.rsv_map .zone span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff7a29 0%, #c02de0 100%);
  font-size: 13px;
  font-weight: 700;
}
.rsv_map .zone span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

.rsv_rows {
  margin-top: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rsv_row {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 300px;
}
.rsv_row + .rsv_row {
  margin-top: 6px;
}
.rsv_row .rno {
  flex: none;
  width: 26px;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}
.rsv_seat {
  flex: 1;
  height: 20px;
  border-radius: 5px;
  background: #f1eff6;
  color: #4a4458;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 무대(위쪽)를 향한 부채꼴 배열 — 가운데가 위로 솟는다 */
.rsv_seat:nth-child(2), .rsv_seat:nth-child(11) { transform: translateY(4px); }
.rsv_seat:nth-child(3), .rsv_seat:nth-child(10) { transform: translateY(2px); }
.rsv_seat:nth-child(4), .rsv_seat:nth-child(9) { transform: translateY(0.5px); }
.rsv_seat:nth-child(5), .rsv_seat:nth-child(8) { transform: translateY(-1px); }
.rsv_seat:nth-child(6), .rsv_seat:nth-child(7) { transform: translateY(-2px); }

.rsv_seat.on {
  background: #d621c4;
  color: #fff;
}
.rsv_seat.off {
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.42);
}
.rsv_seat.wc {
  color: #2f6fed;
}
.rsv_seat.wc svg {
  width: 11px;
  height: 11px;
}

.rsv_mini {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.rsv_mini .view {
  flex: 1;
  height: 62px;
  border: 1px solid var(--rsv-line-soft);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}
.rsv_mini .view svg {
  width: 100%;
  height: 100%;
}
.rsv_mini .zoom {
  flex: none;
  width: 46px;
  height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--rsv-line-soft);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  font-size: 10px;
}

.rsv_legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.72);
}
.rsv_legend li {
  display: flex;
  align-items: center;
  gap: 5px;
}
.rsv_legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #f1eff6;
}
.rsv_legend .on i { background: #d621c4; }
.rsv_legend .off i { background: rgba(255, 255, 255, 0.22); }
.rsv_legend .wc i {
  background: #f1eff6;
  color: #2f6fed;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rsv_legend .wc i svg {
  width: 8px;
  height: 8px;
}

/* 선택 요약 + CTA */
.rsv_sel {
  margin-top: 16px;
  padding: 14px 16px 16px;
  border: 1px solid var(--rsv-line-soft);
  border-radius: var(--rsv-radius);
  background: var(--rsv-card);
}
.rsv_sel .line {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rsv_sel .line b {
  font-size: 14px;
  font-weight: 700;
}
.rsv_sel .cnt {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 6px;
  background: linear-gradient(90deg, #ff7a29 0%, #f0409a 100%);
  font-size: 11px;
  font-weight: 700;
}
.rsv_sel .cancel {
  margin-left: auto;
  font-size: 12px;
  color: var(--rsv-sub);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rsv_sel .max {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--rsv-dim);
}
.rsv_sel .rsv_btn {
  margin-top: 14px;
}

/* ------------------------------------------------------------
   예약 확인 / 완료
   ------------------------------------------------------------ */
.rsv_photo {
  margin-top: 16px;
  height: 132px;
  border-radius: 14px;
  background: #120c26 center 62%/cover no-repeat;
}

.rsv_seats_pick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.rsv_seats_pick li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  background: #d621c4;
  font-size: 14px;
  font-weight: 700;
}

.rsv_ok {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}
.rsv_ok svg {
  flex: none;
  color: #46d6a4;
}
.rsv_ok + .rsv_ok_sub {
  margin-top: 4px;
  padding-left: 26px;
  font-size: 13px;
  color: var(--rsv-sub);
}

/* 완료 */
.rsv_done {
  margin-top: 30px;
  text-align: center;
}
.rsv_done .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--rsv-cta);
  color: #fff;
}
.rsv_done h3 {
  margin-top: 16px;
  font-size: 21px;
  font-weight: 700;
}
.rsv_done p {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--rsv-sub);
}

.rsv_qr {
  position: relative;
  margin-top: 22px;
  padding: 18px 16px 16px;
  border-radius: var(--rsv-radius);
  background:
    linear-gradient(var(--rsv-card), var(--rsv-card)) padding-box,
    var(--rsv-cta) border-box;
  border: 1px solid transparent;
  text-align: center;
}
.rsv_qr b {
  display: block;
  font-size: 15px;
  font-weight: 700;
}
.rsv_qr .code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  padding: 10px;
  border-radius: 12px;
  background: #fff;
}
.rsv_qr .code img,
.rsv_qr .code svg {
  display: block;
  width: 108px;
  height: 108px;
}
.rsv_qr p {
  margin-top: 12px;
  font-size: 12px;
  color: var(--rsv-sub);
}

.rsv_no {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.rsv_hr {
  height: 1px;
  margin: 14px 0;
  background: var(--rsv-line-soft);
}

/* 작은 화면 보정 */
@media (max-width: 360px) {
  .rsv_steps li { font-size: 10px; }
  .rsv_row { min-width: 286px; }
  .rsv_tit { font-size: 20px; }
}


/* ------------------------------------------------------------
   좌석 없는 체험 — 일자 / 인원 선택
   ------------------------------------------------------------ */
.rsv_dates {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.rsv_dates button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 54px;
  border: 1px solid var(--rsv-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.rsv_dates button .wk {
  font-size: 10px;
  font-weight: 500;
  color: var(--rsv-dim);
}
.rsv_dates button.on {
  border-color: transparent;
  background: var(--rsv-cta);
  box-shadow: 0 6px 16px rgba(214, 56, 168, 0.3);
}
.rsv_dates button.on .wk {
  color: rgba(255, 255, 255, 0.85);
}
.rsv_dates button[disabled] {
  color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.02);
}

.rsv_num {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rsv_num .lb {
  font-size: 14px;
  font-weight: 600;
}
.rsv_num .ctrl {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rsv_num button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--rsv-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}
.rsv_num button[disabled] {
  color: rgba(255, 255, 255, 0.25);
}
.rsv_num .val {
  min-width: 54px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}

/* ------------------------------------------------------------
   약관 동의 (본인인증) :: 전체 동의 + 들여쓴 하위 항목 + 자세히 + 안내 문구
   ------------------------------------------------------------ */
.rsv_terms {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rsv-line-soft);
}
.rsv_terms_tit {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.rsv_terms .rsv_check {
  margin-top: 0;
  min-height: 24px;
  align-items: flex-start;
}
.rsv_terms .rsv_check .rsv_box {
  margin-top: 1px;
}
.rsv_terms .rsv_check .txt {
  flex: 1;
  min-width: 0;
  line-height: 1.55;
  word-break: keep-all;
}
.rsv_terms .rsv_check em {
  font-style: normal;
  color: var(--rsv-dim);
}
.rsv_terms_all {
  margin-top: 14px !important;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.rsv_terms_all em {
  font-weight: 400;
}
.rsv_terms_list {
  margin: 6px 0 0;
  padding: 0 0 0 28px;
  list-style: none;
}
.rsv_terms_list > li {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0 10px;
  padding: 9px 0;
}
.rsv_terms_list .rsv_check {
  flex: 1;
  min-width: 0;
}
.rsv_terms_more {
  flex: none;
  padding: 2px 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--rsv-sub);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
}
.rsv_terms_more[aria-expanded="true"] {
  color: #fff;
}
.rsv_terms_detail {
  flex-basis: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 12px;
  line-height: 1.6;
  color: var(--rsv-sub);
  word-break: keep-all;
}
.rsv_terms_detail dl {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 2px 8px;
  margin: 0;
}
.rsv_terms_detail dt {
  color: var(--rsv-dim);
}
.rsv_terms_detail dd {
  margin: 0;
}
.rsv_terms_detail dl + p {
  margin-top: 6px;
}
.rsv_terms_notes {
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--rsv-line-soft);
  list-style: none;
}
.rsv_terms_notes li {
  position: relative;
  padding-left: 10px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--rsv-sub);
  word-break: keep-all;
}
.rsv_terms_notes li + li {
  margin-top: 6px;
}
.rsv_terms_notes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--rsv-dim);
}
.rsv_terms_notes a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 성별 선택 :: 라디오를 두 칸짜리 세그먼트 버튼으로 */
.rsv_seg {
  display: flex;
  gap: 8px;
}
.rsv_seg_item {
  flex: 1;
  position: relative;
  cursor: pointer;
}
.rsv_seg_item input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.rsv_seg_item span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border: 1px solid var(--rsv-line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  font-weight: 500;
  transition: border-color .15s, background .15s, color .15s;
}
.rsv_seg_item input:checked + span {
  border-color: rgba(233, 62, 216, 0.8);
  background: rgba(233, 62, 216, 0.16);
  color: #fff;
  font-weight: 700;
}
.rsv_seg_item input:focus-visible + span {
  box-shadow: 0 0 0 2px rgba(233, 62, 216, 0.35);
}