/* =========================================================
   MOTMOT 리디자인 (2026-11) — 예약 · 결제 · 조회 화면 겉모습
   booking.html · mybooking.html · pay.html 세 장에만 링크한다(redesign.css 다음 줄).
   ★ 겉모습만 바꾼다. id · name · 이벤트 · fetch/결제 호출 · 금액 계산 · 재고 막기 · 개인정보 처리는 그대로다.
   ★ 스크립트가 innerHTML 로 그리는 조각은 스크립트를 고치지 않고 **여기서** 입힌다 —
     스크립트가 쓰는 클래스(.room .day .qline .pp .ok …)와 인라인 style 글자([style*="#CBDAC0"] 등)를 선택자로 쓴다.
     ⚠ 스크립트의 클래스명 · 인라인 색 글자를 바꾸면 여기 선택자도 같이 고칠 것.
   ★ :has() 를 쓰는 규칙(팝업 · 조회 결과 두 칸 · 결제 카드 상태)은 못 읽는 옛 브라우저에서 그 규칙만 빠지고
     원래 모양으로 남는다 — 기능에는 영향이 없다.
   아이콘: Lucide 계열 stroke 2 (마스크로 칠한다 — 글자 · 버튼의 textContent 는 그대로 둔다).
   ========================================================= */
body.rdb{
  --rdb-i-call:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M22.0001 18.4201V19.9201C22.0012 20.1986 21.9441 20.4743 21.8326 20.7294C21.721 20.9846 21.5574 21.2137 21.3521 21.402C21.1469 21.5902 20.9046 21.7336 20.6408 21.8228C20.377 21.912 20.0974 21.9452 19.8201 21.9201C16.7429 21.5857 13.7871 20.5342 11.1901 18.8501C8.77388 17.3148 6.72539 15.2663 5.19006 12.8501C3.50003 10.2413 2.4483 7.27109 2.12006 4.1801C2.09507 3.90356 2.12793 3.62486 2.21656 3.36172C2.30518 3.09859 2.44763 2.85679 2.63482 2.65172C2.82202 2.44665 3.04986 2.28281 3.30385 2.17062C3.55783 2.05843 3.8324 2.00036 4.11006 2.0001H7.11006C7.59536 1.99532 8.06585 2.16718 8.43382 2.48363C8.80179 2.80008 9.04213 3.23954 9.11005 3.7201C9.23668 4.68016 9.47151 5.62282 9.81006 6.5301C9.9446 6.88802 9.97372 7.27701 9.89396 7.65098C9.81421 8.02494 9.62892 8.36821 9.36005 8.6401L8.09006 9.9101C9.51361 12.4136 11.5865 14.4865 14.0901 15.9101L15.3601 14.6401C15.6319 14.3712 15.9752 14.1859 16.3492 14.1062C16.7231 14.0264 17.1121 14.0556 17.4701 14.1901C18.3773 14.5286 19.32 14.7635 20.2801 14.8901C20.7658 14.9586 21.2095 15.2033 21.5266 15.5776C21.8437 15.9519 22.0122 16.4297 22.0001 16.9201V18.4201' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --rdb-i-tickc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 12L11 14L15 10' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --rdb-i-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6L9 17L4 12' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --rdb-i-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 6V12H16.5' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --rdb-i-timealert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 6V12L16 14' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 21.16C14.2026 21.9452 12.214 22.1845 10.2816 21.848C8.34918 21.5116 6.55841 20.6143 5.13212 19.2678C3.70583 17.9213 2.70702 16.1851 2.26 14.2753C1.81297 12.3654 1.93747 10.3663 2.618 8.52669C3.29853 6.68708 4.50505 5.08822 6.08737 3.9291C7.6697 2.76999 9.55797 2.10181 11.5172 2.00773C13.4764 1.91365 15.42 2.39781 17.1061 3.39997C18.7922 4.40213 20.1464 5.87803 21 7.64397' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20 11.5V17.5' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M20 21.5H20.01' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --rdb-i-card:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 5H4C2.89543 5 2 5.89543 2 7V17C2 18.1046 2.89543 19 4 19H20C21.1046 19 22 18.1046 22 17V7C22 5.89543 21.1046 5 20 5Z' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 10H22' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --rdb-i-bank:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6H4C2.89543 6 2 6.89543 2 8V16C2 17.1046 2.89543 18 4 18H20C21.1046 18 22 17.1046 22 16V8C22 6.89543 21.1046 6 20 6Z' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 12H6.01M18 12H18.01' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --rdb-i-danger:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 8V12' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 16H12.01' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --rdb-i-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.01 8L12.01 12' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.01 16L12 16' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --rdb-i-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15 18L9 12L15 6' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --rdb-i-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 18L15 12L9 6' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --rdb-img-tick-w:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 6L9 17L4 12' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 공통 색 */
body.rdb{--rdb-cream:#F4EFE4;--rdb-card:#FCFAF4;--rdb-sand:#EDE6D6;--rdb-line:#E2DACB;--rdb-sage:#5E6C49;
  --rdb-forest:#2F3A26;--rdb-gold:#B0843F;--rdb-gold-t:#86601F;--rdb-ink:#33302A;--rdb-mute:#7D7566;
  --rdb-err:#8E3A2E;--rdb-err-bg:#F7EBE7;--rdb-err-line:#EBCFC6}

/* =========================================================
   v3 글자 · 간격 가이드 (2026-11-03 · Figma 「🧱 Foundations · Components v3」) — 이 파일 전체
   글자: redesign.css :root 변수만 쓴다(--rd-fs-* · --rd-lh-* · 모바일 값은 860px 아래에서 저절로 바뀐다).
     16 미만 없음 · 줄 높이 1.6 이하 · 고딕(Noto Sans KR) 400 본문 / 500 라벨 · 버튼 · 제목 / 700 가격 · 숫자 · 할인만
     명조(Noto Serif KR) 500 = 페이지 제목 하나 · Manrope 는 머리 로고 글자에만.
   모양: 행동 버튼 52 · 보조 버튼 44 · 둥근 알약 / 꼬리표 32(크림 바탕 · 할인은 금색 테두리 + 금색 글자) /
     카드 · 상자 · 사진 모서리 20 / 입력칸 높이 52 · 모서리 12 · 글자 16.
   폼 간격(사장님 2026-11-03): 라벨 → 칸 8 · 라벨 있는 묶음 사이 20 · 라벨 없는 칸끼리 12 ·
     상자 제목 → 한 줄 설명 8 · 설명 → 첫 칸 12 · 마지막 칸 → 버튼 24 · 버튼끼리 12.
   ★ 스크립트가 인라인 style 로 박는 글자 크기(11px · 12.5px · 13.5px …)와 굵기(600 · 800)는
     여기서 선택자 + !important 로 덮는다. 스크립트는 한 글자도 안 고친다.
   ========================================================= */
body.rdb{font-family:var(--rd-ff-sans);font-size:var(--rd-fs-body);line-height:var(--rd-lh-body)}
/* 단추 · 입력칸은 글꼴을 물려받지 않는다(브라우저 기본) — 고딕으로 */
.rdb button,.rdb input,.rdb select,.rdb textarea{font-family:var(--rd-ff-sans)}

/* =========================================================
   ① booking.html — 객실 예약 (시안 07 · 07-2 · r07 · x03 · x04 / 모바일 07 · P2 · P3 · S3)
   ========================================================= */
/* 이 페이지 자체 토큰(인라인 <style> 의 :root)을 시안 색으로 바꾼다 —
   인라인 style 이 var(--green) 등을 쓰는 곳까지 같이 따라온다.
   --sub 는 공통 보조 글 색(--rd-mute · 2026-11-03 한 단계 진하게)을 따른다. */
body.rdb-book{--bg:#F4EFE4;--ink:#33302A;--sub:var(--rd-mute,#665F52);--gold:#B0843F;--green:#5E6C49;
  --line:#E2DACB;--card:#FCFAF4;font-weight:400}
.rdb-book .wrap{max-width:1256px}

/* 머리 — 구조는 그대로(이 페이지 고유 머리). 색 · 높이 · 글자 크기만(공통 머리 메뉴와 같은 16) */
.rdb-book header{background:rgba(244,239,228,.94);border-bottom-color:var(--line)}
.rdb-book header .wrap{height:76px}
.rdb-book .logo b{color:var(--ink)}
.rdb-book .subnav a{font-size:var(--rd-fs-body);font-weight:500;line-height:var(--rd-lh-line);color:var(--ink);display:inline-flex;align-items:center;min-height:var(--rd-btn-s)}
.rdb-book .subnav a:hover{color:var(--green)}
.rdb-book header .back{font-size:var(--rd-fs-body);font-weight:500;line-height:var(--rd-lh-line)}
.rdb-book #telTop{color:var(--green)!important;font-weight:500!important}

/* 페이지 머리 — 키커 → 12 → 제목(명조 500) → 12 → 소개(리드 20/18) */
.rdb-book #main{padding-bottom:var(--rd-sec)}
.rdb-book #main > h1,.rdb-my > .wrap > h1{font:500 var(--rd-fs-title)/var(--rd-lh-title) var(--rd-ff-serif);letter-spacing:-.02em;
  margin:var(--rd-sec-part) 0 var(--rd-head-gap)}
.rdb-book #main > h1::before,.rdb-my > .wrap > h1::before{content:"RESERVATION";content:"RESERVATION" / "";display:block;
  font:500 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans);letter-spacing:var(--rd-ls-kick);color:var(--rdb-sage);margin-bottom:var(--rd-head-gap)}
.rdb-book .lede{font-size:var(--rd-fs-lead);line-height:var(--rd-lh-lead);color:var(--sub);margin:0 0 var(--rd-sec-part)}
.rdb-book .lede b{color:var(--ink)!important;font-weight:600!important}
/* 「단체 · 워크숍 … 전화 상담」 + 번호 — 소개 문장 아래 한 줄(16). 넓은 화면은 오른쪽 끝(시안 07) */
.rdb-book #ledeSale{display:block;margin-bottom:var(--rd-head-gap)}
.rdb-book .lede > span[style*="#74855C"]{color:var(--ink)!important;font-size:var(--rd-fs-body);line-height:var(--rd-lh-line)}
/* 상담 전화 — 녹색 알약 → 그 줄 끝의 굵은 번호(아이콘 + 번호) */
.rdb-book #telBox{background:none!important;color:var(--ink)!important;padding:0 2px!important;margin-left:8px!important;
  font-size:var(--rd-fs-body)!important;line-height:var(--rd-lh-line);gap:6px!important;vertical-align:middle;border-radius:0!important}
.rdb-book #telBox:hover{color:var(--green)!important}
.rdb-book #telBox > span:first-child{display:none}
.rdb-book #telBox::before{content:"";width:18px;height:18px;flex:none;background:currentColor;
  -webkit-mask:var(--rdb-i-call) center/contain no-repeat;mask:var(--rdb-i-call) center/contain no-repeat}
.rdb-book #telNum{font-weight:600!important}
@media (min-width:1100px){
  .rdb-book .lede{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:end}
  .rdb-book #ledeSale{max-width:760px;margin:0;padding-right:48px}
}

/* 준비 중 · 불러오기 실패 · 여는 중 (#prepBox 하나가 셋을 다 맡는다 — 글은 스크립트가 바꾼다) */
.rdb-book #prepBox{background:var(--card);border:1px solid var(--line);border-radius:var(--rd-radius);padding:clamp(24px,3.4vw,40px);max-width:792px;margin:0}
.rdb-book #prepBox h2{display:flex;align-items:center;gap:12px;font:500 var(--rd-fs-sub)/var(--rd-lh-sub) var(--rd-ff-sans);margin:0 0 8px}
.rdb-book #prepBox h2::before{content:"";width:24px;height:24px;flex:none;background:var(--sub);
  -webkit-mask:var(--rdb-i-info) center/contain no-repeat;mask:var(--rdb-i-info) center/contain no-repeat}
.rdb-book #prepMsg{font-size:var(--rd-fs-body);line-height:var(--rd-lh-body);color:var(--sub);margin:0}
.rdb-book #closedTel{margin-top:24px;width:max-content;max-width:100%;min-height:var(--rd-btn-l);padding:6px 28px!important;gap:8px!important;
  border-radius:99px!important;background:var(--green)!important;color:#fff!important;flex-wrap:wrap;font-size:var(--rd-fs-body);line-height:var(--rd-lh-line)}
.rdb-book #closedTel > span:first-child{display:none}
.rdb-book #closedTel::before{content:"";width:20px;height:20px;flex:none;background:currentColor;
  -webkit-mask:var(--rdb-i-call) center/contain no-repeat;mask:var(--rdb-i-call) center/contain no-repeat}
.rdb-book #closedTel > span:nth-child(2) > span{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rdb-book #closedNum{display:inline!important;font:500 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans)!important;margin:0!important}
.rdb-book #closedTel > span:last-child{margin-left:0!important;font-size:var(--rd-fs-body)!important;font-weight:500;opacity:1!important}

/* 예약 화면 틀 — 섹션은 카드가 아니라 선으로 나눈다(시안 .blk) · 파트 위 · 아래 64 / 48 */
.rdb-book #bookUi{counter-reset:rdbstep;gap:0}
.rdb-book #bookUi section{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:var(--rd-sec-part) 0;margin:0}
.rdb-book #bookUi .side section{border-top:0;padding-top:0}
/* 단계 제목(상자 제목 24/20 · 500) → 8 → 한 줄 설명 → 12 → 내용 */
.rdb-book #bookUi h2{display:flex;align-items:center;gap:12px;font:500 var(--rd-fs-sub)/var(--rd-lh-sub) var(--rd-ff-sans);margin:0 0 8px}
.rdb-book #bookUi h2::before{counter-increment:rdbstep;content:counter(rdbstep);flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:var(--rd-tag);height:var(--rd-tag);border-radius:99px;background:var(--green);color:#fff;font:500 var(--rd-fs-body)/1 var(--rd-ff-sans)}
/* 「홈페이지 할인가」 — 할인 꼬리표: 높이 32 · 금색 테두리 + 금색 글자 */
.rdb-book .pill{display:inline-flex;align-items:center;height:var(--rd-tag);margin-left:auto;padding:0 14px;vertical-align:0;
  font:600 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans);letter-spacing:0;color:var(--rdb-gold-t);
  background:var(--card);border:1px solid var(--gold);border-radius:99px;white-space:nowrap}
.rdb-book .hint{font-size:var(--rd-fs-body);line-height:var(--rd-lh-body);color:var(--sub);margin:0 0 12px}
.rdb-book .hint b{color:var(--ink)}

/* 1 · 날짜 — 달력은 카드 안. 날짜 · 가격 모두 16 — 칸이 좁으면 가격이 줄을 바꾸고 칸이 길어진다(글자는 안 줄인다) */
.rdb-book #cal{background:var(--card);border:1px solid var(--line);border-radius:var(--rd-radius);padding:clamp(12px,2vw,24px)}
.rdb-book #cal > .hint{margin:0;padding:24px 0;text-align:center}
.rdb-book .calbar{margin:0 0 12px}
.rdb-book .calbar b{font:500 var(--rd-fs-lead)/var(--rd-lh-line) var(--rd-ff-sans)}
.rdb-book .calbar button{width:var(--rd-btn-s);height:var(--rd-btn-s);border-radius:99px;background:var(--card);border:1px solid var(--line);
  font-size:0;display:inline-flex;align-items:center;justify-content:center;color:var(--ink)}
.rdb-book .calbar button::before{content:"";width:18px;height:18px;background:currentColor;
  -webkit-mask:var(--rdb-i-left) center/contain no-repeat;mask:var(--rdb-i-left) center/contain no-repeat}
.rdb-book .calbar button:last-child::before{-webkit-mask-image:var(--rdb-i-right);mask-image:var(--rdb-i-right)}
.rdb-book .calbar button:hover:not([disabled]){border-color:var(--gold)}
.rdb-book .cal{margin-top:0}
.rdb-book .cal .h{font-size:var(--rd-fs-body);line-height:var(--rd-lh-line);color:var(--sub);padding:4px 0}
.rdb-book .day{min-height:64px;max-height:none;padding:6px 2px;border:0;border-radius:12px;background:transparent;gap:2px;line-height:1.2}
.rdb-book .day .d{font-size:var(--rd-fs-body);font-weight:500;line-height:1.2}
.rdb-book .day .p{max-width:100%;font:600 var(--rd-fs-body)/1.2 var(--rd-ff-sans);color:var(--rdb-gold-t);text-align:center;overflow-wrap:anywhere}
.rdb-book .day:hover:not([disabled]):not(.edge){background:var(--rdb-sand)}
/* 막힌 날 — 글자색은 아래 안내문의 '회색'(#8C8474, 인라인)과 같은 값을 지킨다. 테두리 · 바탕만 걷는다 */
.rdb-book .day[disabled]{background:transparent;border:0;color:#8C8474}
.rdb-book .day[disabled] .d{font-weight:400}
.rdb-book .day.edge{background:var(--green);color:#fff}
.rdb-book .day.edge .p{color:#fff}
.rdb-book .day.mid{background:rgba(94,108,73,.13);border:0}
.rdb-book .caltip{margin-top:12px;padding:12px 16px;border-radius:var(--rd-radius);background:var(--rdb-sand);font-size:var(--rd-fs-body);line-height:var(--rd-lh-body);color:var(--ink)}
/* 입실 · 퇴실 · 인원 · 반려동물 — 네 칸을 2×2 입력칸으로(모서리 12 · 칸끼리 12). 입력칸 자체(id · type · min · max)는 그대로.
   칸이 넉넉하면(줄 폭 620 이상) 이름 왼쪽 · 값 오른쪽 한 줄 = 높이 52, 좁으면 이름 위 · 값 아래 두 줄(글자는 안 줄인다) */
.rdb-book .side .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px!important;margin-top:12px!important;container:rdbside/inline-size}
.rdb-book .side .row label.f{display:block;flex:none;min-width:0;min-height:var(--rd-input-h);padding:8px 16px;
  border:1px solid var(--line);border-radius:var(--rd-input-r);background:var(--card);
  font:500 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans);letter-spacing:0;color:var(--sub)}
.rdb-book .side .row label.f:focus-within{border-color:var(--gold)}
.rdb-book .side .row label.f > input{display:block;width:100%!important;min-width:0;min-height:28px;height:auto;margin:4px 0 0;border:0;border-radius:0;
  background:transparent;padding:0;font:500 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans);color:var(--ink)}
@container rdbside (min-width:620px){
  .rdb-book .side .row label.f{display:flex;flex-direction:row;align-items:center;gap:4px;padding-top:0;padding-bottom:0;white-space:nowrap}
  .rdb-book .side .row label.f > input{flex:1 1 0;width:auto!important;min-height:0;margin:0 0 0 8px;text-align:right}
}

/* 2 · 객실 — 사진 왼쪽 · 글 오른쪽 카드(시안 .rm). 버튼 · data-id · aria-pressed 는 스크립트 것 그대로 */
.rdb-book .rooms{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px}
.rdb-book .room{position:relative;padding:16px;border:1px solid var(--line);border-radius:var(--rd-radius);background:var(--card);line-height:var(--rd-lh-line)}
.rdb-book .room:has(> .th){display:grid;grid-template-columns:clamp(88px,30%,120px) minmax(0,1fr);grid-template-rows:repeat(7,auto) 1fr;
  column-gap:16px;align-content:start}
.rdb-book .room > .th{grid-column:1;grid-row:1/-1;width:100%;aspect-ratio:1;margin:0;border-radius:var(--rd-radius)}
.rdb-book .room:has(> .th) > :not(.th){grid-column:2}
.rdb-book .room::after{content:"";position:absolute;top:16px;right:16px;width:28px;height:28px;border-radius:8px;
  border:1px solid var(--line);background:var(--card) center/16px no-repeat}
.rdb-book .room:hover:not([disabled]){border-color:var(--gold)}
.rdb-book .room[aria-pressed="true"]{border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.rdb-book .room[aria-pressed="true"]::after{background-color:var(--green);border-color:var(--green);background-image:var(--rdb-img-tick-w)}
.rdb-book .room[disabled]{background:var(--card);color:var(--ink);border-style:solid;opacity:.55}
.rdb-book .room[disabled] .th{filter:grayscale(.4)}
/* 카드 제목(객실 이름) — 사이트 어디서나 24/20 · 500 */
.rdb-book .room .nm{font:500 var(--rd-fs-sub)/var(--rd-lh-sub) var(--rd-ff-sans);padding-right:36px;word-break:keep-all}
/* 꼬리표(반려동물 · 시설 · 마감) — 높이 32 · 크림 바탕 · 16. 좁은 카드에서 글이 길면 꼬리표 안에서 줄을 바꾼다(글자는 안 줄인다) */
.rdb-book .room .petok,.rdb-book .room .tg span,.rdb-book .room .no{display:inline-flex;align-items:center;min-height:var(--rd-tag);padding:3px 12px;
  font:500 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans);letter-spacing:0;background:var(--card);border:1px solid var(--line);border-radius:16px;white-space:normal}
.rdb-book .room .petok{display:flex;width:fit-content;max-width:100%;margin:8px 0 0;vertical-align:0;color:var(--green)}
.rdb-book .room[disabled] .petok{color:var(--sub);background:var(--card);border-color:var(--line)}
.rdb-book .room .cap,.rdb-book .room[disabled] .cap{font-size:var(--rd-fs-body);line-height:var(--rd-lh-line);color:var(--sub);margin-top:4px}
.rdb-book .room .sm{font-size:var(--rd-fs-body);line-height:var(--rd-lh-line);color:var(--sub);margin-top:4px}
.rdb-book .room .tg{gap:8px;margin-top:8px}
.rdb-book .room .tg span{color:var(--green)}
/* 가격 — 정가(작은 가격 16 · 취소선) 위 · 판매가(가격 24/20 · 700) · 그 아래 「· 방값 기준」(16, 스크립트 인라인 11px 를 덮는다).
   카드 글 칸이 좁아(PC 두 줄 배치 205px) 한 줄에 두면 「원」 앞에서 잘린다 — 각주처럼 아래 줄로 */
.rdb-book .room .pr{margin-top:12px;font:600 var(--rd-fs-sub)/var(--rd-lh-sub) var(--rd-ff-sans);color:var(--rdb-gold-t)}
.rdb-book .room .pr s{display:block;font:400 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans);color:var(--sub)}
.rdb-book .room .pr span{display:block;font:400 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans)!important;color:var(--sub)!important}
.rdb-book .room .no{justify-self:start;margin-top:12px;color:var(--sub)}
/* 고른 객실마다 인원 · 옵션 (스크립트가 그리는 줄 — 인라인 style 위를 덮는다) */
.rdb-book #optList > .hint{margin:20px 0 0!important}
.rdb-book #optList > .row{position:relative;margin-top:12px;padding:12px 16px 16px!important;gap:12px 20px!important;align-items:flex-end!important;
  background:var(--card);border:1px solid var(--line)!important;border-radius:var(--rd-radius)}
/* 방 이름 한 줄(카드 제목) · 그 아래 인원 · 옵션 칸 · ✕ 는 이름 줄 오른쪽 끝 */
.rdb-book #optList > .row > div{flex:1 1 100%!important;padding:0 48px 0 0!important;font:500 var(--rd-fs-sub)/var(--rd-lh-sub) var(--rd-ff-sans)!important;color:var(--ink)!important;word-break:keep-all}
.rdb-book #optList label.f{gap:8px;font:500 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans);color:var(--sub);letter-spacing:0}
.rdb-book #optList label.f[style]{padding-bottom:0!important;min-height:var(--rd-input-h);gap:8px!important}
.rdb-book #optList label.f[style] > span{font-size:var(--rd-fs-body)!important;line-height:var(--rd-lh-line)}
.rdb-book #optList input[type="number"]{min-height:var(--rd-input-h);width:88px!important;padding:0 12px;border-radius:var(--rd-input-r);background:#fff;
  font:500 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans)}
.rdb-book #optList input[type="checkbox"]{width:20px!important;height:20px!important;accent-color:var(--green)!important}
.rdb-book #optList > .row > button{position:absolute;top:6px;right:8px;min-width:var(--rd-btn-s);min-height:var(--rd-btn-s);padding:0!important;margin:0;border-radius:99px!important;
  color:var(--sub)!important;font-size:var(--rd-fs-lead)!important;line-height:1!important}
.rdb-book #optList > .row > button:hover{background:var(--rdb-sand)!important}

/* 3 · 금액 (넓은 화면에서는 오른쪽 따라오는 「예약 내용」 상자) */
.rdb-book .pick{gap:12px;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--rd-radius);margin-bottom:12px}
.rdb-book .pick img{width:96px;aspect-ratio:1;border-radius:var(--rd-radius)}
.rdb-book .pick .nm{font:500 var(--rd-fs-sub)/var(--rd-lh-sub) var(--rd-ff-sans);word-break:keep-all}
.rdb-book .pick .sm{margin-top:4px;font-size:var(--rd-fs-body);line-height:var(--rd-lh-body);color:var(--sub)}
.rdb-book .pick > div > div[style*="margin-top"]{margin-top:4px!important}
.rdb-book .pick a{display:inline-flex;align-items:center;min-height:var(--rd-btn-s);font:500 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans);color:var(--green)}
.rdb-book #quote .quote{gap:0;padding:8px 20px 20px;background:var(--card);border:1px solid var(--line);border-radius:var(--rd-radius)}
/* 금액 줄 — 이름(보조색) · 값(표 값 500) 글자 밑선 정렬 */
.rdb-book .qline{align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:var(--rd-fs-body);line-height:var(--rd-lh-line)}
.rdb-book .qline:not([style]) > span:first-child{color:var(--sub)}
.rdb-book .qline > span:last-child{margin-left:auto;white-space:nowrap;font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.rdb-book .qline[style*="font-weight:700"]{font-weight:500!important}                 /* 객실이 여럿일 때 방 이름 머리 줄 */
.rdb-book .qline[style*="color:#5E6C49"],.rdb-book .qline[style*="color:#5E6C49"] > span:last-child{font-weight:600!important} /* 객실 할인 */
.rdb-book .qline[style*="#4A4740"]{font-weight:500!important}                        /* 소계 */
.rdb-book .qline[style*="#4A4740"] > span:last-child{font-weight:600}
.rdb-book .qline[style*="#94836B"],.rdb-book .qline span[style*="#94836B"]{color:var(--sub)!important}
.rdb-book .qtot{flex-wrap:wrap;align-items:baseline;gap:4px 12px;border-top:0;padding-top:20px;margin-top:0;font:500 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans)}
.rdb-book .qtot > span:last-child{margin-left:auto;font:600 var(--rd-fs-sub)/var(--rd-lh-sub) var(--rd-ff-sans);color:var(--rdb-gold-t)}

/* 4 · 예약자 정보 — 폼 간격: 제목 → 8 → 설명 → 12 → 성함 · 연락처 → 20 → 요청사항 → 20 → 결제 수단 → 20 →
   범례 → 12 → 동의 → 12 → 규정 안내 → 24 → 「결제하고 예약하기」 → 12 → 이유 */
.rdb-book #formBox .row{gap:20px!important;margin-bottom:20px!important}
.rdb-book #formBox label.f{gap:8px;font:500 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans);letter-spacing:0;color:var(--ink)}
.rdb-book #formBox > label.f{margin-bottom:20px!important}
.rdb-book #formBox input:not([type="checkbox"]):not([type="radio"]),.rdb-book #formBox textarea{min-height:var(--rd-input-h);padding:0 16px;
  border-radius:var(--rd-input-r);background:var(--card);border:1px solid var(--line);font:400 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans);color:var(--ink)}
.rdb-book #formBox textarea{min-height:104px;padding:12px 16px;resize:vertical;line-height:var(--rd-lh-body)}
.rdb-book input:focus,.rdb-book select:focus,.rdb-book textarea:focus{border-color:var(--gold)}
.rdb-book .req{color:var(--rdb-gold-t);font-weight:600}
.rdb-book #payPick{margin-bottom:20px!important}
.rdb-book .pplabel{font:500 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans);margin-bottom:8px}
.rdb-book .pprow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:12px}
.rdb-book .pp{align-items:flex-start;gap:12px;min-height:var(--rd-input-h);padding:16px;border:1px solid var(--line);border-radius:var(--rd-radius);background:var(--card);
  font:500 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans)}
.rdb-book .pp[data-on="1"]{border:2px solid var(--green);padding:15px;background:var(--card);font-weight:500}
.rdb-book .pp input{width:20px;height:20px;margin-top:1px}
.rdb-book .pp small{font:400 var(--rd-fs-body)/var(--rd-lh-body) var(--rd-ff-sans);color:var(--sub);margin-top:4px}
.rdb-book #pgPendingBox{margin-bottom:20px!important;background:var(--rdb-sand)!important;border:0!important;border-radius:var(--rd-radius)!important;padding:16px 20px!important}
.rdb-book #pgPendingBox > div:first-child{color:var(--rdb-gold-t)!important;font-size:var(--rd-fs-body)!important;font-weight:500!important;line-height:var(--rd-lh-line);margin-bottom:8px!important}
.rdb-book #pgPendingBox > div:nth-child(2){color:var(--ink)!important;font-size:var(--rd-fs-body)!important;line-height:var(--rd-lh-body)!important}
.rdb-book #pgPendingTel{font-size:var(--rd-fs-body)!important;font-weight:500!important}
.rdb-book #formBox > p.hint[style*="margin-bottom:10px"]{margin-bottom:12px!important}
.rdb-book .agree{gap:12px;font-size:var(--rd-fs-body);line-height:var(--rd-lh-body);color:var(--sub)}
.rdb-book #formBox > label.agree{margin-bottom:12px!important}
.rdb-book #formBox > label.agree + p.hint{margin:0 0 24px!important}
.rdb-book .agree input[type="checkbox"]{width:22px;height:22px;margin-top:2px}
.rdb-book .agree a,.rdb-book #formBox .hint a{color:var(--ink)!important;font-weight:500!important;text-underline-offset:3px}
.rdb-book button.cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--rd-btn-l);padding:0 28px;border-radius:99px;
  background:var(--green);color:#fff;font:500 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans)}
.rdb-book button.cta[disabled]{opacity:.45}
.rdb-book #submitWhy{color:var(--rdb-gold-t)!important;text-align:center;font-size:var(--rd-fs-body);line-height:var(--rd-lh-line);margin-top:12px!important}

/* 접수 · 결제 결과 상자(.ok · .warn · .err) — 스크립트가 쓰는 클래스 */
.rdb-book .ok{background:var(--card);border:1px solid var(--line);border-radius:var(--rd-radius);padding:20px 24px;font-size:var(--rd-fs-body);line-height:var(--rd-lh-body);color:var(--ink)}
.rdb-book .warn{background:var(--rdb-sand);border:0;border-radius:var(--rd-radius);padding:16px 20px;font-size:var(--rd-fs-body);line-height:var(--rd-lh-body);color:var(--ink)}
.rdb-book .err{background:var(--rdb-err-bg);border:1px solid var(--rdb-err-line);border-radius:var(--rd-radius);padding:16px 20px;font-size:var(--rd-fs-body);line-height:var(--rd-lh-body);color:var(--rdb-err)}
.rdb-book #result .ok > b:first-child{display:flex;align-items:center;gap:12px;font:500 var(--rd-fs-sub)/var(--rd-lh-sub) var(--rd-ff-sans);margin-bottom:8px}
.rdb-book #result .ok > b:first-child::before{content:"";width:24px;height:24px;flex:none;background:var(--green);
  -webkit-mask:var(--rdb-i-tickc) center/contain no-repeat;mask:var(--rdb-i-tickc) center/contain no-repeat}
.rdb-book #result .ok > b:first-child + br{display:none}
.rdb-book #result .ok > div[style*="font-size:13px"]{margin-top:12px!important;font-size:var(--rd-fs-body)!important;line-height:var(--rd-lh-body)!important}
.rdb-book .ok a[style*="var(--green)"]{font-weight:500!important}
.rdb-book .vbank{margin-top:16px;padding:16px 20px;background:var(--rdb-sand);border:0;border-radius:var(--rd-radius)}
.rdb-book .vbank > div{font-size:var(--rd-fs-body)!important;line-height:var(--rd-lh-line)!important}
.rdb-book .vbank .no{font:600 var(--rd-fs-sub)/var(--rd-lh-sub) var(--rd-ff-sans)!important;letter-spacing:0}
.rdb-book .vbank > div[style*="font-size:18px"]{font:600 var(--rd-fs-sub)/var(--rd-lh-sub) var(--rd-ff-sans)!important}
.rdb-book .vbank [style*="#7A828F"]{color:var(--sub)!important}
/* 입금 계좌 상자 — depositBox() 가 인라인 style 로 그린다. 그 글자를 선택자로 잡아 덮는다(줄 이름 · 값 모두 16 · 밑선 정렬은 인라인 그대로) */
.rdb-book div[style*="border:1px solid #CBDAC0"]{background:var(--rdb-sand)!important;border:0!important;border-radius:var(--rd-radius)!important;padding:12px 16px 16px!important;line-height:var(--rd-lh-line)}
.rdb-book div[style*="border:1px solid #CBDAC0"] > div[style*="align-items:baseline"]{gap:12px!important;margin-top:8px!important}
.rdb-book div[style*="border:1px solid #CBDAC0"] [style*="width:58px"]{color:var(--sub)!important;width:72px!important;font-size:var(--rd-fs-body)!important}
.rdb-book div[style*="border:1px solid #CBDAC0"] [style*="#1F2430"]{color:var(--ink)!important;font-size:var(--rd-fs-body)!important}
.rdb-book div[style*="border:1px solid #CBDAC0"] [style*="#8A919C"]{color:var(--sub)!important;font-size:var(--rd-fs-body)!important}
.rdb-book div[style*="border-top:1px solid #EDF1EA"]{border-top-color:rgba(51,48,42,.12)!important;margin-top:12px!important;padding-top:12px!important;
  font-size:var(--rd-fs-body)!important;line-height:var(--rd-lh-body)!important}

/* 결제창에서 돌아온 결과 — handleReturn() 이 #main 맨 위(h1 아래)에 끼우는 section (시안 x04 · 모바일 P3) */
.rdb-book #main > section:not(#prepBox){max-width:588px;margin:0 0 24px;padding:clamp(24px,3vw,36px);background:var(--card);
  border:1px solid var(--line);border-radius:var(--rd-radius)}
.rdb-book #main > section:not(#prepBox) > h2{display:flex;align-items:center;gap:12px;font:500 var(--rd-fs-sub)/var(--rd-lh-sub) var(--rd-ff-sans);margin:0 0 8px}
.rdb-book #main > section:not(#prepBox) > h2::before{content:"";width:24px;height:24px;flex:none;background:var(--gold);
  -webkit-mask:var(--rdb-i-time) center/contain no-repeat;mask:var(--rdb-i-time) center/contain no-repeat}
.rdb-book #main > section:not(#prepBox):has(> .ok) > h2::before{background:var(--green);-webkit-mask-image:var(--rdb-i-tickc);mask-image:var(--rdb-i-tickc)}
.rdb-book #main > section:not(#prepBox):has(> .ok .vbank) > h2::before{background:var(--gold);-webkit-mask-image:var(--rdb-i-bank);mask-image:var(--rdb-i-bank)}
.rdb-book #main > section:not(#prepBox):has(> .warn) > h2::before{background:var(--sub);-webkit-mask-image:var(--rdb-i-info);mask-image:var(--rdb-i-info)}
.rdb-book #main > section:not(#prepBox):has(> .err) > h2::before{background:var(--sub);-webkit-mask-image:var(--rdb-i-danger);mask-image:var(--rdb-i-danger)}
.rdb-book #main > section:not(#prepBox) > .ok{background:none;border:0;padding:0;border-radius:0}
.rdb-book #main > section:not(#prepBox) > .hint{margin:0}
.rdb-book #main > section:not(#prepBox) > .warn,.rdb-book #main > section:not(#prepBox) > .err{background:none;border:0;padding:0;border-radius:0}
.rdb-book #main > section:not(#prepBox) > .warn{color:var(--sub)}
.rdb-book #main > section:not(#prepBox) a[style*="var(--green)"]{display:flex!important;align-items:center;justify-content:center;
  min-height:var(--rd-btn-l);margin-top:24px!important;border-radius:99px;background:var(--green);color:#fff!important;text-decoration:none;line-height:var(--rd-lh-line)}
.rdb-book #result .ok a[style*="var(--green)"]{text-underline-offset:3px}

/* 결제 시스템 등록 중 팝업 — showPgPopup() 이 인라인 style 로만 만든다(클래스 없음).
   유일한 손잡이 #pgPopClose 를 :has() 로 잡는다. :has() 를 못 읽는 브라우저는 원래 모양 그대로다. */
.rdb-book div:has(> div > #pgPopClose){background:rgba(20,18,14,.5)!important}
.rdb-book div:has(> #pgPopClose){width:520px!important;max-width:100%!important;padding:40px 40px 24px!important;background:var(--card)!important;
  border:1px solid var(--line);border-radius:var(--rd-radius)!important;box-shadow:0 24px 60px rgba(20,18,14,.25)!important;color:var(--ink);
  font-size:var(--rd-fs-body);line-height:var(--rd-lh-body)}
/* 맨 위 「결제 시스템 등록 중」 — 상태 꼬리표(높이 32 · 크림 바탕 · 금색 테두리 + 글자) */
.rdb-book div:has(> #pgPopClose) > div:first-child{display:inline-flex!important;align-items:center;height:var(--rd-tag);padding:0 14px;border-radius:99px;
  background:var(--card);border:1px solid var(--gold);color:var(--rdb-gold-t)!important;font-size:var(--rd-fs-body)!important;font-weight:500!important;
  letter-spacing:0!important;line-height:var(--rd-lh-line)}
.rdb-book div:has(> #pgPopClose) > div:nth-child(2){display:flex;align-items:center;gap:12px;margin-top:12px!important;font-size:var(--rd-fs-sub)!important;
  font-weight:500!important;color:var(--ink)!important;line-height:var(--rd-lh-sub)}
.rdb-book div:has(> #pgPopClose) > div:nth-child(2)::before{content:"";width:24px;height:24px;flex:none;background:var(--green);
  -webkit-mask:var(--rdb-i-tickc) center/contain no-repeat;mask:var(--rdb-i-tickc) center/contain no-repeat}
.rdb-book div:has(> #pgPopClose) > div[style*="color:#4A5262"]{margin-top:8px!important;font-size:var(--rd-fs-body)!important;line-height:var(--rd-lh-line)!important}
.rdb-book div:has(> #pgPopClose) > div:nth-child(3){color:var(--sub)!important}
.rdb-book div:has(> #pgPopClose) > div:nth-child(3) b{color:var(--ink)!important}
.rdb-book div:has(> #pgPopClose) > div:nth-child(n+4)[style*="color:#4A5262"]{color:var(--ink)!important}
.rdb-book div:has(> #pgPopClose) > div[style*="justify-content:space-between"]{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  gap:12px!important;margin-top:24px!important;font-size:var(--rd-fs-body)!important;font-weight:500!important}
.rdb-book div:has(> #pgPopClose) > div[style*="justify-content:space-between"] > span:empty{display:none}
.rdb-book div:has(> #pgPopClose) > div[style*="justify-content:space-between"] > a{display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--rd-btn-l);padding:0 16px;border-radius:99px;border:1px solid var(--ink);color:var(--ink)!important;
  font:500 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans);text-align:center}
.rdb-book div:has(> #pgPopClose) > div[style*="justify-content:space-between"] > a[href^="tel:"]{background:var(--green);border-color:var(--green);color:#fff!important}
.rdb-book div:has(> #pgPopClose):has(> a[href^="tel:"]) > div[style*="justify-content:space-between"] > a[href^="tel:"]{background:none;border-color:var(--ink);color:var(--ink)!important}
.rdb-book div:has(> #pgPopClose) a[href^="tel:"]::before{content:"";width:18px;height:18px;flex:none;background:currentColor;
  -webkit-mask:var(--rdb-i-call) center/contain no-repeat;mask:var(--rdb-i-call) center/contain no-repeat}
.rdb-book div:has(> #pgPopClose) > a[href^="tel:"]{gap:8px;min-height:var(--rd-btn-l)!important;margin-top:12px!important;border-radius:99px!important;
  font-size:var(--rd-fs-body)!important;font-weight:500!important;line-height:var(--rd-lh-line)}
.rdb-book #pgPopClose{min-height:var(--rd-btn-s)!important;margin-top:12px!important;border:0!important;border-radius:99px!important;background:none!important;
  color:var(--sub)!important;font-size:var(--rd-fs-body)!important;font-weight:500!important;line-height:var(--rd-lh-line)}
.rdb-book #pgPopClose:hover{color:var(--ink)!important}

/* 바닥 — 구조는 그대로(이 페이지 고유 바닥). 색 · 글자 크기만(16 미만 없음) */
.rdb-book footer{border-top:1px solid var(--line);padding:36px 16px 56px;color:var(--sub);font-size:var(--rd-fs-body);line-height:var(--rd-lh-body)}
.rdb-book .footnav{border-bottom-color:var(--line)}
.rdb-book .footnav a{font-size:var(--rd-fs-body);line-height:var(--rd-lh-line);color:var(--ink)}
.rdb-book .footnav a:hover{color:var(--green)}
.rdb-book #footTel{font-size:var(--rd-fs-body)}
.rdb-book #footTel a{color:var(--green)!important;font-weight:500!important}
.rdb-book .bizinfo{font-size:var(--rd-fs-body);line-height:var(--rd-lh-body)}

/* 넓은 화면 — 왼쪽(달력 → 객실 → 예약자 정보) · 오른쪽 따라오는 「예약 내용」(금액) 상자 (시안 r07) */
@media (min-width:900px){
  .rdb-book #bookUi{grid-template-columns:minmax(0,1fr) clamp(300px,30vw,384px);column-gap:clamp(40px,7vw,126px)}
  .rdb-book #bookUi > div:not(.side){display:contents}
  .rdb-book .layout > .side{position:static;grid-column:1;grid-row:1}
  .rdb-book #roomBox{grid-column:1;grid-row:2}
  .rdb-book #formBox{grid-column:1;grid-row:3}
  .rdb-book #bookUi section#quoteBox{grid-column:2;grid-row:1/span 3;align-self:start;position:sticky;top:100px;max-height:calc(100vh - 124px);
    overflow:auto;overscroll-behavior:contain;padding:28px 28px 0;background:var(--card);border:1px solid var(--line);border-radius:var(--rd-radius)}
  /* 객실을 여럿 고르면 상자가 화면보다 길어진다 — 상자 안에서 굴리고, 합계 줄은 상자 아래에 붙여 둔다 */
  .rdb-book #quoteBox .qtot{position:sticky;bottom:0;background:var(--card);padding-bottom:24px;margin-top:0}
  .rdb-book #quoteBox[style*="none"]{padding-bottom:24px}
  .rdb-book #quoteBox .warn{margin-bottom:24px}
  /* 고르기 전에도 자리를 지킨다 — 제목 · 안내만. 지난 금액(#quote)은 감춘다(스크립트가 감춘 상태 그대로) */
  .rdb-book #quoteBox[style*="none"]{display:block!important}
  .rdb-book #quoteBox[style*="none"] #quote{display:none}
  .rdb-book #quoteBox h2::before{content:none;counter-increment:none}
  .rdb-book #quote .quote{padding:0;background:none;border:0;border-radius:0}
  .rdb-book #quoteBox .pick{padding:12px;gap:12px;background:var(--bg);margin-bottom:8px}
  .rdb-book #quoteBox .pick img{width:64px}
}
/* 폰 */
@media (max-width:560px){
  .rdb-book header .wrap{height:64px}
  .rdb-book .side .row > label.f,.rdb-book .side .row > label.f.half{flex:none}
  .rdb-book .side .row label.f{padding:8px 12px}
  .rdb-book .cal{gap:2px}
  .rdb-book .day{padding:6px 0}
  .rdb-book #cal{padding:12px 8px}
  .rdb-book #optList > .row > label.f:not([style]){flex-direction:row;align-items:center;justify-content:space-between}
  .rdb-book .pick img{width:80px}
}
/* 팝업 — 폰에서는 아래에서 올라오는 시트(모바일 P2) · 버튼끼리 12 */
@media (max-width:599px){
  .rdb-book div:has(> div > #pgPopClose){align-items:flex-end!important;padding:0!important}
  .rdb-book div:has(> #pgPopClose){border-radius:var(--rd-radius) var(--rd-radius) 0 0!important;padding:24px 20px calc(16px + env(safe-area-inset-bottom))!important;max-height:92vh!important}
  /* 접수 팝업은 한 화면에(사장님 2026-09-03 「스크롤 안되게, 한 창에 다 뜨게」) — 글자는 그대로 16, 계좌 줄 사이 · 각주 간격만 좁힌다 */
  .rdb-book div:has(> #pgPopClose) div[style*="border:1px solid #CBDAC0"] > div[style*="align-items:baseline"]{margin-top:4px!important}
  .rdb-book div:has(> #pgPopClose) div[style*="border-top:1px solid #EDF1EA"]{margin-top:8px!important;padding-top:8px!important}
  /* 「예약 조회 →」 는 짧다 — 글 폭만큼, 전화 단추가 나머지. 한 줄에 둘(접수 팝업이 한 화면에 들어오게 · 사장님 2026-09-03) */
  .rdb-book div:has(> #pgPopClose) > div[style*="justify-content:space-between"]{grid-template-columns:auto minmax(0,1fr)}
  .rdb-book div:has(> #pgPopClose) > div[style*="justify-content:space-between"] > a{padding:0 16px}
  .rdb-book div:has(> #pgPopClose) > div[style*="justify-content:space-between"] > a:only-of-type{grid-column:1/-1}
}

/* =========================================================
   ② mybooking.html — 예약 조회 (시안 09 · 09-2 · 09-3 · r09 · x07 / 모바일 09 · S1 · P5b)
   ========================================================= */
body.rdb-my{--green:#5E6C49;--ink:#33302A;--mute:var(--rd-mute,#665F52);--line:#E2DACB;--bg:#F4EFE4}
.rdb-my .wrap{max-width:1232px;padding-left:16px;padding-right:16px}
.rdb-my header{background:rgba(244,239,228,.94);border-bottom-color:var(--line)}
.rdb-my header .wrap{padding-top:10px;padding-bottom:10px}
.rdb-my .logo{font:800 20px/1.1 'Manrope',sans-serif;letter-spacing:-.01em}
.rdb-my .back{font:500 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans);color:var(--green)}
.rdb-my > .wrap{padding-bottom:var(--rd-sec)}
.rdb-my > .wrap > h1::before{content:"MY BOOKING";content:"MY BOOKING" / ""}
.rdb-my .lede{font-size:var(--rd-fs-lead);line-height:var(--rd-lh-lead);color:var(--mute);margin:0 0 var(--rd-head-body)}
.rdb-my .lede b{color:var(--ink);font-weight:500}
.rdb-my .lede a{display:block;width:fit-content;margin-top:var(--rd-head-body);color:var(--ink)!important;font-weight:500!important;
  font-size:var(--rd-fs-body);line-height:var(--rd-lh-line);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
/* 조회 폼 — 라벨 → 8 → 칸 · 묶음 사이 20 · 마지막 칸 → 24 → 「조회하기」 → 12 → 실패 안내 · 전화 */
.rdb-my .card{background:#FCFAF4;border:1px solid var(--line);border-radius:var(--rd-radius);padding:clamp(24px,3vw,40px)}
.rdb-my label{font:500 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans);color:var(--ink);margin-bottom:8px}
.rdb-my input{min-height:var(--rd-input-h);padding:0 16px;border:1px solid var(--line);border-radius:var(--rd-input-r);background:#FCFAF4;
  font:400 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans)}
.rdb-my input:focus{border-color:#B0843F}
.rdb-my .row + .row{margin-top:20px}
.rdb-my button{min-height:var(--rd-btn-l);border-radius:99px;margin-top:24px;font:500 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans)}
/* 조회 실패 · 전화 안내(#err — 스크립트가 글자 + .tel 을 넣는다) */
.rdb-my .err{position:relative;margin-top:12px;padding:16px 20px 16px 52px;border:0;border-radius:var(--rd-radius);background:#EDE6D6;color:var(--ink);
  font-size:var(--rd-fs-body);line-height:var(--rd-lh-body)}
.rdb-my .err::before{content:"";position:absolute;left:20px;top:18px;width:22px;height:22px;background:var(--mute);
  -webkit-mask:var(--rdb-i-danger) center/contain no-repeat;mask:var(--rdb-i-danger) center/contain no-repeat}
.rdb-my .tel{margin:12px 0 0 -32px;min-height:var(--rd-btn-l);border-radius:99px;border-color:var(--ink);color:var(--ink);background:#FCFAF4;
  font:500 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans)}
.rdb-my .tel::before{content:"";width:18px;height:18px;flex:none;background:currentColor;
  -webkit-mask:var(--rdb-i-call) center/contain no-repeat;mask:var(--rdb-i-call) center/contain no-repeat}
/* 조회 결과 카드 — 상태 꼬리표 · 예약번호 한 줄, 아래 항목 줄 */
.rdb-my #out{margin-top:var(--rd-sec-part)}
.rdb-my #out > .card{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
.rdb-my #out > .card > .badge{grid-area:1/1;justify-self:start;align-self:center;height:var(--rd-tag);padding:0 14px;border-radius:99px;
  border:1px solid var(--line);font:500 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans)}
.rdb-my #out > .card > .no{grid-area:1/1;justify-self:end;align-self:center;margin-top:0!important;font:500 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans);
  color:var(--mute);letter-spacing:0;text-align:right}
/* 상태 꼬리표 — 가이드: 크림 바탕 + 글자 16. 상태는 테두리 · 글자색으로 가른다.
   STATE 의 인라인 색 글자로 상태를 가른다(스크립트 글자를 바꾸면 여기도) */
.rdb-my .badge[style]{background:#FCFAF4!important}
.rdb-my .badge[style*="#EAF6F0"]{color:var(--green)!important;border-color:var(--green)!important}
.rdb-my .badge[style*="#FDF6E9"]{color:#86601F!important;border-color:#B0843F!important}
.rdb-my .card:has(> .note) > .badge[style*="#FDF6E9"]{color:var(--ink)!important;border-color:var(--line)!important}
.rdb-my .badge[style*="#F1F3F6"]{color:var(--mute)!important;border-color:var(--line)!important}
.rdb-my .kv{align-items:baseline;padding:12px 0;border-bottom-color:var(--line);font-size:var(--rd-fs-body);line-height:var(--rd-lh-line)}
.rdb-my .kv > span:last-child{font-weight:500}
.rdb-my .note{font-size:var(--rd-fs-body);line-height:var(--rd-lh-body)}
.rdb-my #out .card > .note{color:var(--ink);margin-top:16px}
/* 핵심 숫자(입금 계좌 · 접수번호) — 24/20 · 700 */
.rdb-my .no{font:600 var(--rd-fs-sub)/var(--rd-lh-sub) var(--rd-ff-sans);letter-spacing:0}
/* 입금 계좌 · 환불 처리 중 상자 (인라인 #FBF7EC) → 모래색 상자 */
.rdb-my div[style*="background:#FBF7EC"]{background:#EDE6D6!important;border:0!important;border-radius:var(--rd-radius)!important;padding:16px 20px!important}
.rdb-my div[style*="background:#FBF7EC"] > div:not(.kv):not(.no){font-size:var(--rd-fs-body)!important;line-height:var(--rd-lh-body)!important}
.rdb-my div[style*="background:#FBF7EC"] > div[style*="color:#8A6A22"]{color:var(--ink)!important;font-weight:500!important;line-height:var(--rd-lh-line)!important}
.rdb-my div[style*="background:#FBF7EC"] .kv{border-bottom-color:rgba(51,48,42,.12)}
.rdb-my div[style*="background:#FBF7EC"] [style*="color:#A9403B"]{color:#86601F!important}
/* 취소 · 환불 요청 · 접수 완료 · 안내(#cxbox 안 — drawCancel · cancelDone · askCancel 이 그린다) → 오른쪽 상자(시안 09-2)
   폼 간격: 상자 제목 → 8 → 금액 줄 · 「환불 받으실 계좌」 → 8 → 세 칸(칸끼리 12) → 8 → 안내 · 마지막 → 24 → 단추 → 12 → 결과 글 */
.rdb-my #cxbox > div{margin:0!important;padding:clamp(24px,3vw,32px)!important;border-radius:var(--rd-radius)!important;background:#FCFAF4!important;
  border:1px solid var(--line)!important;font-size:var(--rd-fs-body);line-height:var(--rd-lh-body)}
.rdb-my #cxbox > div > div:not(.kv):not(.no){font-size:var(--rd-fs-body)!important;line-height:var(--rd-lh-body)!important}
.rdb-my #cxbox > div > div:first-child:not(.kv):not(.no){display:flex;align-items:center;gap:12px;font-size:var(--rd-fs-sub)!important;font-weight:500!important;
  color:var(--ink)!important;line-height:var(--rd-lh-sub)!important}
.rdb-my #cxbox > div[style*="#F1F3F6"] > div:first-child::before{content:"";width:24px;height:24px;flex:none;background:var(--green);
  -webkit-mask:var(--rdb-i-tickc) center/contain no-repeat;mask:var(--rdb-i-tickc) center/contain no-repeat}
.rdb-my #cxbox > div[style*="#F1F3F6"] [style*="#5B6472"]{color:var(--mute)!important}
.rdb-my #cxbox > div > div[style*="font-weight:600"]{margin-top:20px!important;font-weight:500!important;line-height:var(--rd-lh-line)!important}
.rdb-my #cxbox > div > div[style*="display:flex;gap:8px"]{gap:12px!important;margin-top:8px!important}
.rdb-my #cxbox > div > div[style*="font-size:12px"]{margin-top:8px!important}
.rdb-my #cxbox > div > div[style*="margin-top:12px;font-size:12.5px"]{margin-top:12px!important}
.rdb-my #cxMsg{margin-top:12px!important}
.rdb-my #cxbox .kv{font-size:var(--rd-fs-body)}
.rdb-my #cxbox .kv:has(b[style*="#A9403A"]){align-items:baseline;flex-wrap:wrap;border-bottom:0;padding-top:20px}
.rdb-my #cxbox .kv:has(b[style*="#A9403A"]) > span:first-child{color:var(--ink);font-weight:500;font-size:var(--rd-fs-body)}
.rdb-my #cxbox b[style*="#A9403A"]{color:#86601F!important;font:600 var(--rd-fs-sub)/var(--rd-lh-sub) var(--rd-ff-sans)}
.rdb-my #cxBank,.rdb-my #cxNum,.rdb-my #cxHolder{min-height:var(--rd-input-h);padding:0 16px;font-size:var(--rd-fs-body);border-color:var(--line);
  border-radius:var(--rd-input-r);background:#fff}
/* 환불 요청 단추는 빨강 — 사장님(2026-11-02) 「환불요청은 빨강이 맞는 거 같다」. 값은 이식 전 인라인(#A9403A) 그대로, 모양(둥근 · 높이)은 리디자인 것 */
.rdb-my #cxGo{background:#A9403A!important;color:#fff!important;border:0!important;margin-top:24px!important}
.rdb-my #cxbox > .note{color:var(--ink)}
/* 취소 상자가 생기면 결과 카드를 둘로 나눈다 — 왼쪽(또는 위) 예약 내용 카드 · 오른쪽(또는 아래) 취소 상자.
   카드 바탕은 ::before 가 깐다(요소는 하나도 안 옮긴다). :has() 를 못 읽으면 한 카드 안에 그대로 쌓인다. */
.rdb-my #out > .card:has(> #cxbox:not(:empty)){--p:clamp(24px,3vw,40px);background:none;border:0;padding:0;border-radius:0;grid-template-rows:auto auto auto 1fr}
.rdb-my #out > .card:has(> #cxbox:not(:empty))::before{content:"";grid-column:1;grid-row:1/span 3;align-self:stretch;background:#FCFAF4;border:1px solid var(--line);border-radius:var(--rd-radius)}
.rdb-my #out > .card:has(> #cxbox:not(:empty)) > :not(#cxbox){grid-column:1;margin-left:var(--p);margin-right:var(--p)}
.rdb-my #out > .card:has(> #cxbox:not(:empty)) > .badge,.rdb-my #out > .card:has(> #cxbox:not(:empty)) > .no{margin-top:var(--p)!important}
/* 바탕(::before)이 1~3줄을 차지하므로 나머지는 줄 번호를 직접 준다(자동 배치는 바탕 칸을 피해 아래로 밀린다) */
.rdb-my #out > .card:has(> #cxbox:not(:empty)) > :nth-child(3){grid-row:2}
.rdb-my #out > .card:has(> #cxbox:not(:empty)) > :nth-child(4){grid-row:3;margin-bottom:var(--p)}
.rdb-my #out > .card:has(> #cxbox:not(:empty)) > #cxbox{grid-column:1;grid-row:4;margin-top:16px}
.rdb-my footer{border-top-color:var(--line);margin-top:0}
.rdb-my footer .wrap{font-size:var(--rd-fs-body);line-height:var(--rd-lh-body)}
.rdb-my footer a{color:var(--ink)}
@media (min-width:960px){
  .rdb-my > .wrap{display:grid;grid-template-columns:minmax(0,510fr) minmax(0,588fr);column-gap:clamp(48px,7vw,102px);align-items:center}
  .rdb-my > .wrap > h1{grid-column:1;grid-row:1;align-self:end}
  .rdb-my > .wrap > .lede{grid-column:1;grid-row:2;align-self:start;margin:0}
  .rdb-my > .wrap > .card{grid-column:2;grid-row:1/span 2;margin-top:var(--rd-sec-part)}
  .rdb-my > .wrap > #out{grid-column:1/-1;grid-row:3}
  .rdb-my #out > .card:not(:has(> #cxbox:not(:empty))){max-width:792px}
  .rdb-my #out > .card:has(> #cxbox:not(:empty)){grid-template-columns:minmax(0,1fr) clamp(320px,30vw,384px);column-gap:clamp(32px,7vw,126px)}
  .rdb-my #out > .card:has(> #cxbox:not(:empty)) > #cxbox{grid-column:2;grid-row:1/span 4;margin-top:0}
}

/* =========================================================
   ③ pay.html — 단체 카드 결제 (시안 08 · 08-2 · r08 · r08s · 모바일 08 · S2) — 가운데 588 한 줄
   ========================================================= */
body.rdb-pay{--desk:#F4EFE4;--paper:#FCFAF4;--tint:#EDE6D6;--ink:#33302A;--ink2:#57534A;--muted:var(--rd-mute,#665F52);--olive:#5E6C49;
  --olive-dark:#2F3A26;--on-olive:#fff;--gold:#B0843F;--border:#E2DACB}
/* 머리 — 키커 → 12 → 제목(명조 500) → 12 → 한 줄 설명 → 24 → 카드 */
.rdb-pay .wrap{max-width:620px;padding:var(--rd-sec-part) 16px var(--rd-sec)}
.rdb-pay .brand{text-align:left;margin:0 0 var(--rd-head-gap);font:500 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans);letter-spacing:var(--rd-ls-kick);color:var(--olive)}
.rdb-pay .brand b{color:var(--olive);font-weight:500;letter-spacing:var(--rd-ls-kick)}
/* #card 는 스크립트가 통째로 다시 그린다. 그 안의 순서를 바꾸지 않고, 격자 줄 번호로 자리만 정한다.
   제목 · 설명은 카드 밖(머리), 카드 바탕은 ::before 가 깐다. */
.rdb-pay #card{--p:20px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(8,auto);
  background:none;border:0;border-radius:0;box-shadow:none;padding:0}
.rdb-pay #card::before{content:"";grid-column:1;grid-row:3/6;background:var(--paper);border:1px solid var(--border);border-radius:var(--rd-radius)}
.rdb-pay #card::after{content:"";grid-column:1;grid-row:5;height:var(--p)}
.rdb-pay #card > *{grid-column:1;margin-left:var(--p)!important;margin-right:var(--p)!important}
.rdb-pay #card > .title{grid-row:1;margin:0 0 var(--rd-head-gap)!important;font:500 var(--rd-fs-title)/var(--rd-lh-title) var(--rd-ff-serif);letter-spacing:-.02em}
.rdb-pay #card > .sub{grid-row:2;margin:0 0 var(--rd-head-body)!important;font-size:var(--rd-fs-body);line-height:var(--rd-lh-line);color:var(--muted)}
.rdb-pay #card > .amt{grid-row:3;margin-top:var(--p);margin-bottom:0;padding:0;background:none;border-radius:0;text-align:left}
.rdb-pay .amt .k{font:500 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans);color:var(--ink)}
.rdb-pay .amt .v{font:600 var(--rd-fs-sub)/var(--rd-lh-sub) var(--rd-ff-sans);color:#86601F;letter-spacing:0}
.rdb-pay #card > .rows{grid-row:4;margin-top:16px;border-top:1px solid var(--border)}
.rdb-pay .rows li{align-items:baseline;padding:12px 0;font-size:var(--rd-fs-body);line-height:var(--rd-lh-line)}
.rdb-pay .rows .v{font-weight:500}
.rdb-pay #card > .btn,.rdb-pay #card > .msg{grid-row:6;margin-left:0!important;margin-right:0!important}
.rdb-pay #card > .btn ~ .msg,.rdb-pay #card > .msg ~ .msg{grid-row:7}
.rdb-pay #card > .note{grid-row:8;margin-left:0!important;margin-right:0!important}
.rdb-pay .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:auto;min-height:var(--rd-btn-l);margin-top:24px;border-radius:99px;
  font:500 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans)}
.rdb-pay .btn::before{content:"";width:18px;height:18px;flex:none;background:currentColor;
  -webkit-mask:var(--rdb-i-card) center/contain no-repeat;mask:var(--rdb-i-card) center/contain no-repeat}
.rdb-pay .note{margin-top:12px;font-size:var(--rd-fs-body);line-height:var(--rd-lh-body)}
/* 상태 · 안내(.msg ok · warn · err) — 아이콘 + 글. 완료 제목은 상자 제목(24/20). 영수증 링크는 테두리 단추 */
.rdb-pay .msg{position:relative;margin-top:16px;padding:20px 20px 20px 56px;border:0;border-radius:var(--rd-radius);background:var(--tint);color:var(--ink);
  font-size:var(--rd-fs-body);line-height:var(--rd-lh-body)}
.rdb-pay .msg::before{content:"";position:absolute;left:20px;top:22px;width:22px;height:22px;background:var(--gold);
  -webkit-mask:var(--rdb-i-info) center/contain no-repeat;mask:var(--rdb-i-info) center/contain no-repeat}
.rdb-pay .msg.ok::before{background:var(--olive);-webkit-mask-image:var(--rdb-i-tickc);mask-image:var(--rdb-i-tickc)}
.rdb-pay .msg.ok:has(> b:first-child)::before{top:26px}
.rdb-pay .msg.err{background:var(--rdb-err-bg);color:var(--rdb-err)}
.rdb-pay .msg.err::before{background:var(--rdb-err);-webkit-mask-image:var(--rdb-i-danger);mask-image:var(--rdb-i-danger)}
.rdb-pay .msg.ok > b:first-child{display:block;margin-bottom:4px;font:500 var(--rd-fs-sub)/var(--rd-lh-sub) var(--rd-ff-sans)}
.rdb-pay .msg a[href]{display:flex;align-items:center;justify-content:center;min-height:var(--rd-btn-l);margin-top:16px;border:1px solid var(--ink);
  border-radius:99px;font:500 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans);text-decoration:none;background:var(--paper)}
.rdb-pay .msg.ok > b:first-child + br,.rdb-pay .msg a[href] + br{display:none}
/* 링크를 못 읽었을 때 · 불러오는 중 — 그 하나가 카드가 된다 */
.rdb-pay #card > .skel:only-child,.rdb-pay #card > .msg:only-child{grid-row:3;margin:0!important}
.rdb-pay #card:has(> .skel:only-child)::before,.rdb-pay #card:has(> .msg:only-child)::before,
.rdb-pay #card:has(> .skel:only-child)::after,.rdb-pay #card:has(> .msg:only-child)::after{display:none}
.rdb-pay #card > .skel:only-child{height:auto;min-height:160px;padding:24px;background:var(--paper);border:1px solid var(--border);border-radius:var(--rd-radius);
  text-align:center;font-size:var(--rd-fs-body);line-height:var(--rd-lh-body)}
.rdb-pay #card > .msg:only-child{padding:24px 24px 24px 60px;background:var(--paper);border:1px solid var(--border);border-radius:var(--rd-radius)}
.rdb-pay #card > .msg:only-child::before{left:24px;top:26px}
.rdb-pay .foot{margin-top:24px;font-size:var(--rd-fs-body);line-height:var(--rd-lh-line)}
.rdb-pay .foot a{color:var(--ink);font-weight:500}
@media (min-width:720px){
  .rdb-pay .brand,.rdb-pay #card > .title,.rdb-pay #card > .sub{text-align:center}
  .rdb-pay #card{--p:36px}
  .rdb-pay #card::before{grid-row:3/8}
  .rdb-pay #card::after{grid-row:7}
  .rdb-pay #card > .rows{grid-row:3;margin-top:calc(var(--p) - 12px);border-top:0}
  .rdb-pay .rows li:last-child{border-bottom:1px solid var(--border)}
  .rdb-pay #card > .amt{grid-row:4;display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:24px}
  .rdb-pay #card > .btn,.rdb-pay #card > .msg{grid-row:5;margin-left:var(--p)!important;margin-right:var(--p)!important;margin-top:24px}
  .rdb-pay #card > .btn ~ .msg,.rdb-pay #card > .msg ~ .msg{grid-row:6;margin-top:12px}
  .rdb-pay #card > .note{text-align:center;margin-top:16px}
  .rdb-pay #card > .skel:only-child,.rdb-pay #card > .msg:only-child{margin:0!important}
}

/* 마우스가 있는 화면에서만 — 폰에서 누른 뒤 색이 눌러붙지 않게 */
@media (hover:hover){
  .rdb-book #closedTel:hover{background:var(--rdb-forest)!important}
  .rdb-book button.cta:hover:not([disabled]){background:var(--rdb-forest)}
  .rdb-my button:hover:not(:disabled){background:#2F3A26}
  .rdb-my #cxGo:hover:not(:disabled){background:#8E352F!important}
  .rdb-pay .btn:hover:not(:disabled){background:var(--olive-dark)}
}

/* ---- 머리 로고: 공통 산 마크 + MOTMOT RESORT (2026-11-02, 총괄) — 로고 글자(Manrope)는 공통 머리와 같게 둔다 ---- */
.rdb header .logo.rd-logo{display:flex;align-items:center;gap:10px;flex-direction:row;text-decoration:none;color:var(--rd-ink,#33302A)}
.rdb header .logo.rd-logo img{height:24px;width:auto;display:block}
.rdb header .logo.rd-logo b{font-family:'Manrope',sans-serif;font-weight:800;font-size:21px;letter-spacing:-.01em}
.rdb header .logo.rd-logo i{font-style:normal;font-family:'Manrope',sans-serif;font-size:11px;font-weight:600;letter-spacing:.26em;color:var(--rd-mute,#7D7566);border-left:1px solid var(--rd-line,#E2DACB);padding-left:10px}
@media (max-width:600px){.rdb header .logo.rd-logo b{font-size:19px}.rdb header .logo.rd-logo i{font-size:10px;letter-spacing:.2em;padding-left:8px}}

/* =========================================================
   ④ 보조 동작 — assets/rd-booking.js 가 붙이는 것 (booking · mybooking)
   ★ 전부 덧붙인 요소다. 페이지 스크립트의 id · 이벤트 · 호출은 그대로다.
   ========================================================= */
body.rdb{
  --rdb-i-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h14' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --rdb-i-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h14M12 5v14' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --rdb-i-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M18 6L6 18M6 6l12 12' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --rdb-red:#A9403A;
}

/* 창 — 5실 초과 안내(시안 x05) · 취소 확인(시안 x06 / 모바일 P5). 「환불 요청」 은 빨강(사장님 2026-11-02) */
.rdb-dlg-bg{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(20,18,14,.5)}
.rdb-dlg{position:relative;width:486px;max-width:100%;max-height:calc(100vh - 40px);overflow:auto;padding:40px;
  background:#FCFAF4;border:1px solid #E2DACB;border-radius:var(--rd-radius,20px);box-shadow:0 24px 60px rgba(20,18,14,.25);color:#33302A;
  font-family:var(--rd-ff-sans);font-size:var(--rd-fs-body);line-height:var(--rd-lh-body);text-align:left}
.rdb .rdb-dlg .rdb-dlg-t{display:flex;align-items:flex-start;gap:12px;margin:0;font:500 var(--rd-fs-sub)/var(--rd-lh-sub) var(--rd-ff-sans);color:#33302A;letter-spacing:0;
  word-break:keep-all;text-wrap:balance}
.rdb .rdb-dlg-danger .rdb-dlg-t{padding-right:36px}
.rdb .rdb-dlg .rdb-dlg-t::before{content:"";flex:none;width:24px;height:24px;margin-top:5px;background:#B0843F;
  -webkit-mask:var(--rdb-i-info) center/contain no-repeat;mask:var(--rdb-i-info) center/contain no-repeat}
.rdb .rdb-dlg-danger .rdb-dlg-t::before{background:#7D7566;-webkit-mask-image:var(--rdb-i-danger);mask-image:var(--rdb-i-danger)}
.rdb .rdb-dlg .rdb-dlg-p{margin:8px 0 0;font-size:var(--rd-fs-body);line-height:var(--rd-lh-body);color:var(--rd-mute,#665F52);word-break:keep-all;text-wrap:pretty}
.rdb .rdb-dlg .rdb-dlg-p b{color:#33302A;font-weight:600}
.rdb-dlg-kvs{margin-top:20px;border-top:1px solid #33302A}
.rdb-dlg-kv{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid #E2DACB;
  font-size:var(--rd-fs-body);line-height:var(--rd-lh-line);text-align:left}
.rdb-dlg-kv > span:first-child{color:var(--rd-mute,#665F52)}
.rdb-dlg-kv > :last-child{text-align:right;white-space:nowrap;font-weight:500;font-variant-numeric:tabular-nums}
.rdb-dlg-kv.is-tot{border-bottom:0;padding-top:16px}
.rdb-dlg-kv.is-tot > span:first-child{color:#33302A;font-weight:500}
.rdb-dlg-kv.is-tot > b{font:600 var(--rd-fs-sub)/var(--rd-lh-sub) var(--rd-ff-sans);color:#86601F}
.rdb-dlg-act{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.rdb-dlg-act.is-one{grid-template-columns:1fr}
/* mybooking 인라인 <style> 의 button{…} · .rdb-my button{…} 을 이긴다(선택자를 더 세게) */
.rdb .rdb-dlg .rdb-dlg-b{display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--rd-btn-l);margin:0;padding:0 16px;border-radius:99px;
  border:1px solid #33302A;background:transparent;color:#33302A;font:500 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans);text-decoration:none;text-align:center;cursor:pointer}
.rdb .rdb-dlg .rdb-dlg-b.pri{background:#5E6C49;border-color:#5E6C49;color:#fff}
.rdb .rdb-dlg .rdb-dlg-b.danger{background:var(--rdb-red);border-color:var(--rdb-red);color:#fff}
.rdb .rdb-dlg .rdb-dlg-b:focus-visible,.rdb .rdb-dlg .rdb-dlg-x:focus-visible{outline:2px solid #B0843F;outline-offset:2px}
.rdb .rdb-dlg .rdb-dlg-x{position:absolute;top:20px;right:20px;display:flex;align-items:center;justify-content:center;width:var(--rd-btn-s);height:var(--rd-btn-s);min-height:0;
  margin:0;padding:0;border:0;border-radius:99px;background:transparent;color:#33302A;cursor:pointer}
.rdb .rdb-dlg .rdb-dlg-x::before{content:"";width:22px;height:22px;background:currentColor;
  -webkit-mask:var(--rdb-i-close) center/contain no-repeat;mask:var(--rdb-i-close) center/contain no-repeat}
@media (max-width:599px){
  .rdb-dlg{padding:32px 20px 20px;text-align:center}
  .rdb .rdb-dlg .rdb-dlg-t{justify-content:center;text-wrap:balance}
  .rdb .rdb-dlg .rdb-dlg-t::before{display:none}
  .rdb .rdb-dlg .rdb-dlg-p{text-wrap:balance}
  .rdb .rdb-dlg .rdb-dlg-p .rdb-s{display:inline-block}
  .rdb .rdb-dlg-danger .rdb-dlg-t{padding:0 36px}
  .rdb .rdb-dlg .rdb-dlg-x{top:8px;right:8px}
}

/* 불러오기 실패 — 「다시 불러오기」 + 전화 (시안 07-2 · r07g · S3). 단추는 실패 글일 때만 보인다(스크립트가 hidden 을 푼다) · 버튼끼리 12 */
.rdb-book #prepBox{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px}
.rdb-book #prepBox > h2,.rdb-book #prepBox > #prepMsg{flex:0 0 100%}
.rdb-book #prepBox.rdb-fail h2::before{-webkit-mask-image:var(--rdb-i-danger);mask-image:var(--rdb-i-danger)}
.rdb-book .rdb-retry{display:inline-flex;align-items:center;justify-content:center;min-height:var(--rd-btn-l);margin-top:24px;padding:0 28px;
  border:1px solid var(--ink);border-radius:99px;background:none;color:var(--ink);font:500 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans);cursor:pointer}
.rdb-book .rdb-retry[hidden]{display:none}
@media (max-width:560px){
  .rdb-book .rdb-retry{flex:1 1 100%}
  .rdb-book .rdb-retry:not([hidden]) + #closedTel{width:100%;margin-top:12px;justify-content:center}
}

/* 인원 · 반려동물 −/+ (시안 07 .stpr) — 입력칸은 그대로, 단추는 감싸는 div 안에 띄운다 */
.rdb-book .rdb-stp{position:relative;min-width:0}
.rdb-book .side .row .rdb-stp > label.f{height:100%;padding-right:104px}
.rdb-book .rdb-stp-bt{position:absolute;top:50%;right:4px;transform:translateY(-50%);display:flex;gap:4px}
.rdb-book .rdb-stp-bt button{display:flex;align-items:center;justify-content:center;width:var(--rd-btn-s);height:var(--rd-btn-s);margin:0;padding:0;
  border:1px solid var(--line);border-radius:99px;background:#fff;color:var(--ink);cursor:pointer}
.rdb-book .rdb-stp-bt button::before{content:"";width:16px;height:16px;background:currentColor;
  -webkit-mask:var(--rdb-i-minus) center/contain no-repeat;mask:var(--rdb-i-minus) center/contain no-repeat}
.rdb-book .rdb-stp-bt .rdb-stp-p::before{-webkit-mask-image:var(--rdb-i-plus);mask-image:var(--rdb-i-plus)}
.rdb-book .rdb-stp-bt button:disabled{opacity:.35;cursor:not-allowed}
.rdb-book .rdb-stp-bt button:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.rdb-book input.rdb-stp-in{-moz-appearance:textfield;appearance:textfield}
.rdb-book input.rdb-stp-in::-webkit-inner-spin-button,.rdb-book input.rdb-stp-in::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* 폰 — 칸이 좁아(173px) 이름 · 값 · 단추가 한 줄에 안 든다. 이름 위 · [− 값 +] 아래 */
@media (max-width:560px){
  .rdb-book .side .row .rdb-stp > label.f{padding:8px 12px}
  .rdb-book .side .row .rdb-stp > label.f > input.rdb-stp-in{min-height:var(--rd-btn-s);margin-top:4px;padding:0 46px;text-align:center}
  .rdb-book .rdb-stp-bt{top:auto;bottom:9px;left:13px;right:13px;transform:none;justify-content:space-between;pointer-events:none}
  .rdb-book .rdb-stp-bt button{pointer-events:auto}
}

/* 결제 대리 단추 — 폰 하단 고정 바(시안 07 .sticky2) · PC 「예약 내용」 상자(시안 r07). 누르면 진짜 #submit.click() */
.rdb-bar,.rdb-px{display:none}
.rdb-book .rdb-px-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:var(--rd-btn-l);margin:0;padding:0 24px;border:0;border-radius:99px;
  background:var(--green);color:#fff;font:500 var(--rd-fs-body)/var(--rd-lh-line) var(--rd-ff-sans);cursor:pointer}
.rdb-book .rdb-px-btn[disabled]{opacity:.45;cursor:not-allowed}
.rdb-book .rdb-px-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rdb-book .rdb-px-why{margin:12px 0 0;font-size:var(--rd-fs-body);line-height:var(--rd-lh-line);color:var(--rdb-gold-t);text-align:center}
.rdb-book .rdb-px-why[hidden]{display:none}
@media (max-width:860px){
  .rdb-book .rdb-bar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:var(--card);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(20,18,14,.08);
    transform:translateY(calc(100% + 12px));visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s}
  .rdb-book .rdb-bar.is-on{transform:none;visibility:visible;transition:transform .22s ease}
  /* 바가 바닥 글 · 마지막 입력칸을 가리지 않게 — 바 높이만큼 아래 여백(스크립트가 높이를 잰다) */
  html.rdb-bar-on body.rdb-book{padding-bottom:var(--rdb-bar-h,0px)}
  html.rdb-bar-on{scroll-padding-bottom:var(--rdb-bar-h,0px)}
  .rdb-bar-sum{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
  .rdb-bar-k{min-width:0;font-size:var(--rd-fs-body);line-height:var(--rd-lh-line);color:var(--sub)}
  .rdb-bar-v{flex:none;font:600 var(--rd-fs-sub)/var(--rd-lh-sub) var(--rd-ff-sans);color:var(--ink);font-variant-numeric:tabular-nums}
  .rdb-book .rdb-bar .rdb-px-why{margin-top:8px}
}
@media (prefers-reduced-motion:reduce){.rdb-book .rdb-bar,.rdb-book .rdb-bar.is-on{transition:none}}
@media (min-width:900px){
  .rdb-book #quoteBox > .rdb-px{display:block;position:sticky;bottom:0;z-index:1;margin:0;padding:16px 0 24px;background:var(--card)}
  .rdb-book #quoteBox > .rdb-px[hidden]{display:none}
  /* 객실을 여럿 골라 상자가 길어지면 합계 줄이 대리 단추 바로 위에 붙는다 */
  .rdb-book #quoteBox.rdb-has-px .qtot{bottom:var(--rdb-px-h,0px);padding-bottom:4px}
}
@media (hover:hover){
  .rdb .rdb-dlg .rdb-dlg-b.out:hover:not(:disabled){background:#EDE6D6}
  .rdb .rdb-dlg .rdb-dlg-b.pri:hover:not(:disabled){background:#2F3A26;border-color:#2F3A26}
  .rdb .rdb-dlg .rdb-dlg-b.danger:hover:not(:disabled){background:#8E352F;border-color:#8E352F}
  .rdb .rdb-dlg .rdb-dlg-x:hover{background:#EDE6D6}
  .rdb-book .rdb-retry:hover{background:var(--rdb-sand)}
  .rdb-book .rdb-stp-bt button:hover:not(:disabled){border-color:var(--gold)}
  .rdb-book .rdb-px-btn:hover:not([disabled]){background:var(--rdb-forest)}
}

/* 360~400px 폰 — 머리줄 「MOTMOT GROUP ↗」 링크가 19px 넘쳤다(이식 전부터 · 2026-11-02 실측 375px 가로폭 379). 작은 폰에서만 숨긴다(링크는 바닥에도 있다) */
@media (max-width:400px){ .rdb header .back[href="index.html"]{display:none!important} }