:root{
  --pt:#2B6CFF; --pt-d:#1D57DB; --pt-l:#EEF3FF;
  --ink:#1A1E27; --ink-2:#5A6270; --ink-3:#9AA1AC;
  --line:#EBEDF0; --bg:#F5F6F8; --coral:#FF5A5F; --r:12px;
}
*{margin:0;padding:0;box-sizing:border-box}
.vw-body{font-family:"Pretendard Variable",Pretendard,-apple-system,sans-serif;color:var(--ink);background:var(--page,#fff);-webkit-font-smoothing:antialiased}
.vw{max-width:1180px;margin:0 auto;padding:18px;width:100%;min-width:0}
/* 기본설정 > 예약 화면 폭 = 모바일형 — j05(new_login_wrapper 700px)처럼 좁은 가운데 칼럼.
   index.jsp·widget.jsp·manage.jsp 가 body 에 vw-slim 을 붙인다.
   예약조회 본문(.vw-narrow, 기본 600px)도 이때는 760px 로 — 헤더·푸터와 좌우가 맞는다. */
body.vw-slim .vw{max-width:760px}
button{font-family:inherit;cursor:pointer}

/* 단계 표시기 */
.vw-steps{display:flex;gap:8px;margin-bottom:20px}
.vw-step{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;font-size:20px;font-weight:800;color:var(--ink-3);padding:13px 6px;border-bottom:2px solid var(--line)}
.vw-step i{width:25px;height:25px;border-radius:50%;background:var(--line);color:#fff;display:grid;place-items:center;font-size:13.5px;font-style:normal}
.vw-step.on{color:var(--pt);border-bottom-color:var(--pt)}
.vw-step.on i{background:var(--pt)}
.vw-step.done i{background:var(--pt)}

/* 인원 */
.vw-guests{border:1px solid var(--line);border-radius:var(--r);padding:6px 16px;margin-bottom:16px}
.vw-guest-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.vw-guest-row+.vw-guest-row{border-top:1px solid var(--line)}
.vw-guest-row b{font-size:18px;font-weight:700}
.vw-guest-row small{display:block;font-size:14px;color:var(--ink-3);margin-top:2px}
.vw-guest-row small.cap{color:var(--pt);font-weight:700}
/* 성인·아동 둘 다에 해당하는 합산 정원 — 특정 줄 안이 아니라 팝업 맨 위 공통 안내로 둔다 */
.vw-gpop-cap{margin:2px 0 6px;padding:0;font-size:13px;font-weight:700;color:var(--pt)}
.vw-gpop-cap:empty{display:none}
.vw-stepper{display:flex;align-items:center;gap:14px}
.vw-stepper button{width:44px;height:44px;border:1.5px solid var(--line);border-radius:10px;background:var(--card,#fff);font-size:20px;color:var(--ink-2)}
.vw-stepper button:disabled{opacity:.35;cursor:default}
.vw-stepper span{font-size:18px;font-weight:700;min-width:20px;text-align:center}
/* 숫자칸 직접 입력 — 겉모습은 예전 span 과 같되 눌러서 바로 타이핑할 수 있다 */
.vw-stnum{width:34px;font-size:18px;font-weight:700;text-align:center;color:var(--ink);
  border:0;background:none;padding:0;font-family:inherit;-moz-appearance:textfield}
.vw-stnum:focus{outline:none;border-radius:6px;box-shadow:0 0 0 2px rgba(43,108,255,.25)}

/* 적용 버튼 */
.vw-apply{width:100%;background:var(--pt);color:#fff;border:0;border-radius:12px;padding:16px;font-size:18px;font-weight:800}
.vw-apply:disabled{background:var(--line);color:var(--ink-3)}
.vw-apply:not(:disabled):hover{background:var(--pt-d)}

.vw-placeholder{padding:60px 0;text-align:center;color:var(--ink-3);font-size:16px}

/* 뒤로 가기 링크형 버튼 (예약조회의 [‹ 다시 조회], [다른 예약 조회]) */
.vw-back{display:inline-flex;align-items:center;gap:4px;background:none;border:0;padding:8px 2px;
  color:var(--ink-2);font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;border-radius:8px}
.vw-back:hover{color:var(--pt)}
.vw-back[hidden]{display:none}   /* display:inline-flex 가 hidden 을 덮어쓰지 않도록 */

/* ── 3단계: PC 2단(좌 입력 / 우 결제요약), 모바일 1단 ── */
.vw-bk{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
/* 모바일형(좁은 칼럼)에서는 PC 도 모바일처럼 한 단으로 쌓는다 — 2단은 넓은 배치(PC형) 전용 */
body.vw-slim .vw-bk{grid-template-columns:1fr;gap:14px}
.vw-bk-main,.vw-bk-side{min-width:0}
.vw-card{border:1px solid var(--line);border-radius:var(--r);background:var(--card,#fff);padding:18px;margin-bottom:14px}
.vw-card:last-child{margin-bottom:0}
/* 객실·날짜 선택 쪽 제목(.vw-sech h2 — 20px/800)과 크기를 맞춘다 */
.vw-card-t{font-size:20px;font-weight:800;letter-spacing:-.4px;color:var(--ink);margin:0 0 14px}
/* 예약 정보 — 객실명은 위 '예약 정보' 제목(20px)에 묻히지 않도록 더 크게, 색도 다른
   화면들의 객실명과 같이 파랗게(강조) 준다 */
/* 위 '예약 정보' 제목(20px)보다는 작아야 위계가 맞다 — 파란색 강조만으로도 충분히 눈에 띈다 */
.vw-bk-room{font-size:18px;font-weight:800;letter-spacing:-.4px;color:var(--pt);margin-bottom:12px}
.vw-bk-stay{display:flex;align-items:center;gap:10px;background:var(--pt-l);border-radius:12px;padding:14px 16px}
.vw-bk-stay .d{flex:1;min-width:0;text-align:center}   /* 체크인·체크아웃 둘 다 각자 칸 가운데 — 1박 배지와도 안 붙는다 */
.vw-bk-stay .d span{display:block;font-size:12px;font-weight:700;color:var(--pt);margin-bottom:3px}
.vw-bk-stay .d b{font-size:18px;font-weight:800;color:var(--ink);white-space:nowrap}
.vw-bk-stay .n{flex:0 0 auto;font-size:14px;font-weight:700;color:var(--ink-2);background:var(--card,#fff);border-radius:999px;padding:4px 11px}
/* 인원 — 오른쪽 사이드바(결제 금액)에 따로 두면 모바일에서 결제수단 뒤로 밀려나
   예약 정보와 동떨어져 보였다. 체크인·체크아웃 박스 바로 아래, 같은 카드 안에
   같은 스타일(연한 파란 박스)로 이어 붙인다. '인원' 이라는 라벨 없이도 값 자체가
   '성인 N명' 으로 시작해 무슨 정보인지 바로 읽히므로 라벨 없이 가운데에 둔다. */
.vw-bk-guest{display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--pt-l);border-radius:12px;padding:12px 16px;margin-top:10px}
.vw-bk-people{margin:0;font-size:15px;font-weight:800;color:var(--ink);text-align:center}
/* 결제 금액 */
.vw-price{margin:0 0 12px;padding:0 0 12px;border-bottom:1px solid var(--line)}
.vw-price>div{display:flex;justify-content:space-between;gap:12px;padding:5px 0}
.vw-price>div[hidden]{display:none}   /* display:flex 가 hidden 을 덮어써 빈 줄이 남던 문제 */
.vw-price dt{font-size:14px;color:var(--ink-2);font-weight:600;margin:0}
.vw-price dt small,.vw-bk-people small{font-weight:500;color:var(--ink-3);font-size:12px;margin-left:3px}
.vw-price dd{font-size:16px;color:var(--ink);font-weight:700;margin:0;white-space:nowrap}
.vw-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:4px}
.vw-total span{font-size:16px;font-weight:800;color:var(--ink)}
.vw-total b{font-size:22px;font-weight:800;color:var(--pt);white-space:nowrap}
/* 우측 카드 안에서는 규정 박스의 테두리를 없애 이중 박스가 되지 않게 한다 */
.vw-paybox .vw-refund{border:0;border-top:1px solid var(--line);border-radius:0;padding:14px 0 0;margin:14px 0 0}
.vw-paybox .vw-actions{margin-top:14px}
/* 우측 결제요약(340px) 안에서는 '180,000원 예약하기' 가 기본 18px 로는 접힌다 */
.vw-paybox .vw-actions .vw-btn-prev{flex:0 0 26%;font-size:15px;padding:15px 6px}
.vw-paybox .vw-actions .vw-apply{font-size:16px;padding:16px 8px;white-space:nowrap}
@media(max-width:900px){
  .vw-bk{grid-template-columns:1fr;gap:0}
  .vw-bk-side{margin-top:14px}
}

/* 3단계 폼 */
.vw-form{display:flex;flex-direction:column;gap:12px}
.vw-frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.vw-frow{grid-template-columns:1fr}}
.vw-form label{font-size:14px;font-weight:700;color:var(--ink-2);display:flex;flex-direction:column;gap:6px}
.vw-form label .lb{display:block}
/* '필수' 배지 — 별표(*)보다 무엇이 필수인지 분명하다 */
.vw-form label i,.vw-agree i{font-style:normal;font-size:12px;font-weight:700;color:var(--pt);background:var(--pt-l);border-radius:4px;padding:1px 5px;margin-left:4px;vertical-align:1px}
.vw-form input,.vw-form textarea{border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;font-size:16px;font-family:inherit;color:var(--ink)}
/* textarea 기본은 가로로도 늘릴 수 있어(resize:both) 늘리면 옆 결제정보 영역까지 침범한다 —
   세로로만 늘어나게 막는다 */
.vw-form textarea{resize:vertical;max-width:100%}
.vw-form input:focus,.vw-form textarea:focus{outline:none;border-color:var(--pt)}
.vw-form input.err{border-color:var(--coral)}

.vw-pay{border:1px solid var(--line);border-radius:var(--r);padding:6px 16px;margin-bottom:16px}
.vw-pay-title{font-size:14px;font-weight:800;padding:12px 0 6px;border-bottom:1px solid var(--line)}
.vw-radio{display:flex;align-items:center;gap:10px;padding:14px 0;font-size:16px;font-weight:700}
.vw-radio small{font-weight:500;color:var(--ink-3);font-size:14px}
.vw-radio.disabled{color:var(--ink-3)}
.vw-radio input{width:18px;height:18px;accent-color:var(--pt)}

.vw-refund{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:16px}
.vw-refund-toggle{background:none;border:0;width:100%;text-align:left;font-size:16px;font-weight:700;color:var(--ink);display:flex;justify-content:space-between}
.vw-refund-toggle span{color:var(--pt);font-weight:600}
.vw-refund-body{margin-top:10px}
/* 표 제목줄 + [자세히 보기] */
.vw-refund-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vw-refund-head b{font-size:14.5px;font-weight:800}
/* 표 아래 전체 폭 버튼 — 안내문 전체를 모달로 연다 */
.vw-refund-more{display:block;width:100%;margin-top:10px;border:1.5px solid var(--line);background:var(--card,#fff);
  color:var(--pt);border-radius:9px;padding:10px 12px;font-size:13px;font-weight:700;
  cursor:pointer;font-family:inherit;line-height:1;text-align:center}
.vw-refund-more:hover{border-color:var(--pt);background:var(--pt-l)}
.vw-refund-more[hidden]{display:none}
.vw-refund-body table{width:100%;border-collapse:collapse;font-size:14px}
.vw-refund-body td{padding:6px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.vw-refund-body td:last-child{text-align:right;font-weight:700;color:var(--ink)}
.vw-refund-body p{margin-top:10px;font-size:12px;color:var(--ink-3)}
.vw-agree{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;font-weight:600;color:var(--ink-2)}
.vw-agree input{width:18px;height:18px;flex-shrink:0;accent-color:var(--pt)}
.vw-agree span{display:inline-flex;align-items:center;flex-wrap:wrap;gap:0}

.vw-err{background:var(--err-bg,#FFF0F0);color:var(--coral);border-radius:10px;padding:12px 14px;font-size:14px;font-weight:600;margin-bottom:12px}

/* 예약 조회·취소 (manage, Task#6) */
/* 예약조회 — 입력이 몇 칸뿐이라 넓게 늘리지 않고 가운데 한 장으로 모은다 */
.vw-narrow{max-width:480px;padding:48px 20px 64px}
.vm-title{font-size:22px;font-weight:800;margin-bottom:6px;text-align:center}
.vm-lead{font-size:14px;color:var(--ink-2);margin-bottom:22px;text-align:center}
.vw-narrow .vw-card{padding:26px 24px}
/* 넓은 화면에서는 한 단계 키운다 — PC 에서 너무 작아 보였다 */
@media(min-width:901px){
  .vw-narrow{max-width:600px;padding:64px 20px 80px}
  .vm-title{font-size:30px;margin-bottom:10px}
  .vm-lead{font-size:16px;margin-bottom:28px}
  .vw-narrow .vw-card{padding:34px 32px}
  .vw-narrow .vw-form{gap:18px}
  .vw-narrow .vw-form label{font-size:16px}
  .vw-narrow .vw-form input{padding:15px 16px;font-size:18px;border-radius:12px}
  .vw-narrow .vw-apply{padding:19px;font-size:18px}
}
.vw-card .vw-apply{margin-top:18px}
@media(max-width:520px){.vw-narrow{padding:28px 14px 44px}.vw-narrow .vw-card{padding:20px 16px}}
.vm-detail{border:1.5px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:16px}
.vm-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--pt-l)}
.vm-head b{font-size:18px;font-weight:800}
.vm-badge{font-size:12px;font-weight:700;padding:4px 10px;border-radius:6px;background:rgba(26,30,39,.08);color:var(--ink-2)}
.vm-badge.paid{background:var(--pt-l);color:var(--pt-d)}
.vm-badge.cancel{background:rgba(255,90,95,.12);color:var(--coral)}
.vm-tbl{width:100%;border-collapse:collapse;font-size:16px}
.vm-tbl td{padding:11px 16px;border-top:1px solid var(--line);color:var(--ink)}
.vm-tbl td:first-child{width:96px;color:var(--ink-2);font-weight:600}
.vm-refund-now{font-size:16px;font-weight:800;margin-bottom:10px}
.vw-refund-body-tbl{width:100%;border-collapse:collapse;font-size:14px}
.vw-refund-body-tbl td{padding:7px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.vw-refund-body-tbl td:last-child{text-align:right;font-weight:700;color:var(--ink)}
.vw-refund-body-tbl tr.vm-hl td{color:var(--ink);font-weight:700}
.vw-refund-body-tbl td.vm-pen{color:var(--coral)}
.vm-refund-note{margin-top:10px;font-size:12px;color:var(--ink-3);line-height:1.6}
.vm-tiers{margin-top:14px}
.vm-tiers-t{font-size:14px;font-weight:700;color:var(--ink-2);margin-bottom:4px}
.vm-cancel-btn{background:var(--coral)}
.vm-cancel-btn:not(:disabled):hover{background:#E64449}
.vm-info-box{background:var(--bg);border-radius:12px;padding:18px;font-size:14px;color:var(--ink-2);line-height:1.7;text-align:center}

.vw-acct{background:var(--pt-l);border-radius:10px;padding:11px 14px;margin:8px 0;font-size:16px;color:var(--ink);line-height:1.7}
/* 완료화면 안에서는 계좌박스 자체가 이미 연파랑이라 배경을 흰색으로 뒤집는다 */
.vw-done .acctbox .vw-acct{background:var(--card,#fff);margin:0;font-size:16px;font-weight:700}

/* 완료 */
.vw-done{text-align:center;padding:18px 0;max-width:520px;margin:0 auto}
.vw-done .ic{width:64px;height:64px;border-radius:50%;background:var(--pt-l);color:var(--pt);display:grid;place-items:center;font-size:34px;margin:0 auto 18px}
.vw-done h3{font-size:20px;font-weight:800;margin-bottom:6px}
.vw-done .lead{font-size:16px;color:var(--ink-2);margin-bottom:18px}
/* 예약번호 — 이 화면에서 가장 중요한 정보 */
.vw-done .nobox{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;background:var(--pt);color:#fff;border-radius:12px;padding:14px 18px;margin-bottom:16px}
.vw-done .nobox span{font-size:14px;font-weight:700;opacity:.85}
.vw-done .nobox b{font-size:22px;font-weight:800;letter-spacing:1px}
.vw-done .nobox .st{font-size:12px;font-weight:800;border-radius:999px;padding:3px 10px;opacity:1}
.vw-done .nobox .st.ok{background:var(--card,#fff);color:var(--pt)}
.vw-done .nobox .st.wait{background:rgba(255,255,255,.22);color:#fff}
/* 예약 상세 — 좌 항목 / 우 값 */
.vw-done .dtl{border:1px solid var(--line);border-radius:12px;padding:6px 16px;text-align:left;margin-bottom:14px}
.vw-done .dtl>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:16px}
.vw-done .dtl>div:last-child{border-bottom:0}
.vw-done .dtl span{color:var(--ink-2);font-weight:600;flex:0 0 auto}
.vw-done .dtl b{color:var(--ink);font-weight:700;text-align:right}
.vw-done .dtl small{font-weight:500;color:var(--ink-3);font-size:12px}
.vw-done .dtl b.amt{font-size:20px;color:var(--pt);font-weight:800}
/* 입금 계좌 */
.vw-done .acctbox{border:1px solid var(--pt);border-radius:12px;padding:16px;text-align:left;margin-bottom:14px;background:var(--pt-l)}
.vw-done .acctbox h4{font-size:14px;font-weight:800;color:var(--pt);margin:0 0 8px}
.vw-done .acctbox p{margin-top:10px;font-size:12px;line-height:1.7;color:var(--ink-2)}
.vw-done .note{font-size:14px;color:var(--ink-2);line-height:1.7;margin-bottom:16px}
.vw-done .note b{color:var(--ink)}
.vw-actions.done{justify-content:center}
.vw-actions.done .vw-apply{display:flex;align-items:center;justify-content:center;text-decoration:none}


/* 하단 액션 바 — 왼쪽 이전 / 오른쪽 예약하기 */
.vw-actions{display:flex;gap:10px;align-items:stretch;margin-top:4px}
.vw-actions .vw-btn-prev{flex:0 0 34%;max-width:180px;display:flex;align-items:center;justify-content:center;gap:2px;
  background:var(--card,#fff);border:1.5px solid var(--line,#d5dbe4);color:var(--ink-2,#334155);font-size:16px;font-weight:700;border-radius:12px;
  padding:15px 10px;cursor:pointer;font-family:inherit;white-space:nowrap}
.vw-actions .vw-btn-prev:hover{background:var(--bg-2,#f1f5f9);border-color:var(--line-2,#b8c2cf)}
.vw-actions .vw-apply{flex:1;margin-top:0}
@media(max-width:520px){
  .vw-actions .vw-btn-prev{flex:0 0 30%;font-size:15px;padding:15px 6px}
  .vw-agree{font-size:13px;gap:7px}
  .vw-agree i{font-size:11px;padding:1px 4px;margin-left:3px}
}
/* 아주 좁은 화면(320px 급) — 동의 문구와 버튼 글자가 두 줄로 깨지지 않게 한 단계 더 줄인다 */
@media(max-width:360px){
  .vw-agree{font-size:11.5px;gap:6px}
  .vw-agree input{width:16px;height:16px}
  .vw-agree i{font-size:10px;padding:1px 3px;margin-left:3px}
  .vw-actions{gap:7px}
  .vw-actions .vw-btn-prev{flex:0 0 26%;font-size:14px;padding:15px 4px}
  .vw-actions .vw-apply{font-size:15px;padding:15px 6px;white-space:nowrap}
}

/* ===== 객실 상세 모달 ===== */
.vw-rmodal{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;padding:20px}
.vw-rmodal[hidden]{display:none}
.vw-rmodal-bg{position:absolute;inset:0;background:var(--overlay,rgba(15,23,42,.55))}
.vw-rmodal-box{position:relative;background:var(--card,#fff);border-radius:16px;max-width:640px;width:100%;max-height:84vh;
  display:flex;flex-direction:column;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.vw-rmodal-hd{display:flex;align-items:center;gap:12px;padding:18px 20px 12px;border-bottom:1px solid var(--line)}
.vw-rmodal-hd h3{flex:1;margin:0;font-size:20px;font-weight:800;color:var(--ink)}
.vw-rmodal-hd .x{border:0;background:none;font-size:26px;line-height:1;color:var(--ink-3,#94a3b8);cursor:pointer;padding:0 2px}
.vw-rmodal-body{padding:0;overflow-y:auto;flex:1}
/* 갤러리 — 대표사진 1장(16:10 고정) + 썸네일. 세로로 쌓지 않아 스크롤이 짧다 */
.vw-rmodal-body .gal[hidden]{display:none}
.vw-rmodal-body .hero{position:relative;width:100%;aspect-ratio:16/10;background:var(--bg-2,#eef1f5);overflow:hidden}
.vw-rmodal-body .hero img{width:100%;height:100%;object-fit:cover;display:block}
.vw-rmodal-body .hero .nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;
  border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink,#0f172a);font-size:22px;line-height:1;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.18);font-family:inherit}
.vw-rmodal-body .hero .nav[hidden]{display:none}
.vw-rmodal-body .hero .prev{left:12px}
.vw-rmodal-body .hero .next{right:12px}
.vw-rmodal-body .hero .count{position:absolute;right:12px;bottom:12px;background:rgba(15,23,42,.66);color:#fff;
  font-size:12px;font-weight:700;border-radius:999px;padding:4px 10px}
.vw-rmodal-body .hero .count[hidden]{display:none}
.vw-rmodal-body .thumbs{display:flex;gap:8px;overflow-x:auto;padding:10px 20px 0;scrollbar-width:none}
.vw-rmodal-body .thumbs::-webkit-scrollbar{display:none}
.vw-rmodal-body .thumbs .t{flex:0 0 auto;width:72px;height:54px;border:2px solid transparent;border-radius:8px;
  overflow:hidden;padding:0;background:none;cursor:pointer}
.vw-rmodal-body .thumbs .t.on{border-color:var(--pt)}
.vw-rmodal-body .thumbs .t img{width:100%;height:100%;object-fit:cover;display:block}
/* 스펙 칩 */
.vw-rmodal-body .spec{display:flex;flex-wrap:wrap;gap:6px;padding:16px 20px 0}
.vw-rmodal-body .spec i{font-style:normal;font-size:14px;font-weight:700;color:var(--ink-2);
  background:var(--bg);border-radius:999px;padding:6px 12px}
/* 설명 — 에디터가 표/이미지를 넣어도 밖으로 넘치지 않게 */
.vw-rmodal-body .desc{padding:16px 20px 20px;font-size:16px;line-height:1.85;color:var(--ink-2);word-break:break-word;overflow-x:auto}
.vw-rmodal-body .desc img{max-width:100%;height:auto}
.vw-rmodal-body .desc table{max-width:100%}
.vw-rmodal-body .desc .none{color:var(--ink-3)}
.vw-rmodal-ft{display:flex;gap:10px;padding:12px 20px 18px;border-top:1px solid var(--line)}
.vw-rmodal-ft .ghost{flex:0 0 auto;background:var(--card,#fff);border:1px solid var(--line,#d5dbe4);color:var(--ink-2,#334155);border-radius:10px;
  font-weight:700;font-size:16px;padding:13px 20px;cursor:pointer;font-family:inherit}
.vw-rmodal-ft .ok{flex:1;background:var(--pt);color:#fff;border:0;border-radius:10px;font-weight:800;font-size:16px;padding:13px 20px;cursor:pointer;font-family:inherit}
.vw-rmodal-ft .ok:hover{background:var(--pt-d)}
@media(max-width:520px){
  .vw-rmodal{padding:12px}
  .vw-rmodal-box{max-height:88vh}
}


/* =====================================================================
   1단계 — 검색바 + 달력 드롭다운 + 객실 목록 (2026-08-18 개편)
   야놀자·여기어때·네이버·떠나요 공통 구조를 따른다.
   달력은 본문에 펼쳐 두지 않고 검색바 '바로 아래'에서 열어,
   날짜 표시와 고르는 자리가 떨어지지 않게 한다.
   ===================================================================== */

/* ── 날짜·인원 폼 카드 ── */
/* 구사이트(finepension)의 표 형태 — 라벨 행(날짜/인원)으로 감싼다 */
.vw-sbwrap{margin-bottom:20px}
.vw-form1{border:1.5px solid var(--line);border-radius:14px;background:var(--card,#fff)}
.vw-frow{display:grid;grid-template-columns:130px 1fr;align-items:center;min-height:66px;border-top:1px solid var(--line)}
.vw-frow:first-child{border-top:0}
.vw-frow>.lb{align-self:stretch;display:flex;align-items:center;padding:0 22px;background:var(--bg-2,#FBFCFE);
  font-size:14.5px;font-weight:700;color:var(--ink-2);border-right:1px solid var(--line);border-radius:13px 0 0 0;
  word-break:keep-all}   /* 좁은 폭에서 "총 예약기간"이 "총 예약기/간"으로 쪼개지지 않게 */
/* 라벨 양끝 정렬 — 가장 긴 "숙박일수"(4글자) 폭에 맞춰 "날 짜"·"인 원"도 벌린다 */
.vw-frow>.lb span{display:inline-block;min-width:4em;text-align:justify;text-align-last:justify}
.vw-frow:last-child>.lb{border-radius:0 0 0 13px}
/* position:relative — 달력 드롭다운(.vw-caldrop)이 이 칸 기준으로 뜬다 */
.vw-frow>.ct{position:relative;padding:11px 18px;min-width:0}
/* 숙박일수 행 — 1·2·3박 버튼과 −/+ 스테퍼를 나란히(좁으면 아랫줄로 흐른다) */
.vw-frow>.ct.nts{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.vw-nightstep{gap:10px}
.vw-nightstep b{font-size:15px;font-weight:800;min-width:42px;text-align:center;font-variant-numeric:tabular-nums}
/* 달력 하단([적용하기] 옆)의 1·2·3박 + 스테퍼 묶음 */
.vw-nightgrp{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.vw-nightgrp .vw-nightstep button{width:30px;height:30px;font-size:16px}
.vw-nightgrp .vw-nightstep b{font-size:14px;min-width:36px}
.vw-sbtn{display:flex;align-items:center;gap:10px;width:100%;max-width:560px;height:58px;padding:0 18px;background:var(--card,#fff);
  border:1.5px solid var(--line);border-radius:11px;cursor:pointer;text-align:left;transition:.15s}
.vw-sbtn:hover{border-color:var(--line-2,#CBD5E1)}
.vw-sbtn.on{border-color:var(--pt);box-shadow:0 0 0 3px rgba(43,108,255,.12)}
.vw-sbtn .ic{display:flex;line-height:0;flex:0 0 auto}
.vw-sbtn .v{flex:1;min-width:0}
/* 12px·--ink-3 은 대비 2.6:1 이라 잘 안 읽혔다 (2026-09-10) */
.vw-sbtn .v i{display:block;font-style:normal;font-size:13.5px;font-weight:700;color:var(--ink-2);letter-spacing:.2px}
.vw-sbtn .v b{display:block;font-size:17px;font-weight:700;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 박수는 입실·퇴실 을 고른 결과라 그 뒤에 둔다(예전에는 두 날짜 사이에 끼어 있었다) */
.vw-sb-date{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:0;padding:0}
.vw-sb-date .seg{display:flex;align-items:center;gap:10px;padding:0 16px;height:100%;min-width:0}
.vw-sb-date .seg+.seg{border-left:1px solid var(--line)}
.vw-sb-date .nt{flex:0 0 auto;margin-right:14px;font-size:13px;font-weight:800;color:var(--pt);background:var(--pt-l);
  border-radius:999px;padding:5px 12px;white-space:nowrap}
/* 인원 버튼 — "성인 2명"을 보여주고, 누르면 아래 팝오버가 열린다(객실별 달력형 하단 바와 같은 방식).
   폭은 내용에 맞춘다("성인 1명"처럼 짧을 때 빈 채로 넓으면 어색하다) */
.vw-sb-guest{width:auto;height:50px;gap:10px;padding:0 18px}
.vw-sb-guest b{font-size:15.5px;font-weight:700;letter-spacing:-.2px;white-space:nowrap}
/* 눌러서 바꿀 수 있다는 걸 알려주는 화살표 — 열리면 뒤집혀 '펼쳐졌다'는 상태도 알려준다 */
.vw-sb-guest .car{display:flex;flex:0 0 auto;line-height:0;transition:transform .15s}
.vw-sb-guest.on .car{transform:rotate(180deg)}
/* 인원 팝오버 — 인원 행(.ct) 기준으로 버튼 아래에 뜬다(달력 드롭다운과 같은 방식).
   달력과 서로 열릴 때 상대를 닫으므로 둘이 겹칠 일은 없다. */
.vw-gpop{display:none;position:absolute;left:18px;top:calc(100% - 4px);width:340px;background:var(--card,#fff);border:1.5px solid var(--line);
  border-radius:var(--r);box-shadow:0 1px 2px rgba(16,24,40,.04),0 24px 48px -18px rgba(16,24,40,.32);padding:8px 18px;z-index:45}
.vw-gpop.open{display:block}

/* ── 달력 드롭다운 ──
   호텔스닷컴·야놀자처럼 검색바 아래 '떠서' 열린다 — 문서 흐름을 안 밀어내므로
   객실 목록이 아래로 밀려나지 않는다(position:absolute). 넓은 화면에서 검색바
   폭(최대 1180px)까지 늘어나면 칸이 커져 무거워 보이던 것도 폭을 고정해 줄인다. */
/* 날짜 행(.ct) 기준으로 필드 바로 아래에 뜬다 — 좌우 18px 은 .ct 안쪽 여백과 맞춘 값 */
.vw-caldrop{display:none;position:absolute;top:calc(100% - 4px);left:18px;z-index:45;
  width:min(620px,calc(100% - 36px));max-height:min(520px,calc(100vh - 200px));overflow-y:auto;
  border:1.5px solid var(--line);border-radius:var(--r);padding:16px 18px 14px;background:var(--card,#fff);
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 24px 48px -18px rgba(16,24,40,.32)}
.vw-caldrop.open{display:block}
/* 검색바형 ⇄ 달력형을 이 자리에서 바로 바꾼다(widget.js setCalPinned) —
   켜면 접지 않고 계속 펼쳐 두고 클릭마다 바로 반영, 끄면 [적용하기]로 확정하는 팝오버로 돌아간다. */
.vw-calpin{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:13px;font-weight:700;color:var(--ink-2);margin:0 0 12px;user-select:none}
.vw-calpin input{width:16px;height:16px;accent-color:var(--pt);cursor:pointer;margin:0}
.vw-calgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
/* 월 이동 바 — 화살표를 한 곳에 모으고, 먼 달은 목록에서 바로 고른다 */
.vw-calnav{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 12px}
.vw-mv{width:36px;height:36px;border:1.5px solid var(--line);background:var(--card,#fff);border-radius:10px;cursor:pointer;
  color:var(--ink);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;
  font-family:inherit;transition:.14s}
.vw-mv:not(:disabled):hover{border-color:var(--pt);background:var(--pt-l);color:var(--pt)}
.vw-mv:disabled{opacity:.3;cursor:default}
.vw-ymsel{height:36px;min-width:132px;padding:0 30px 0 12px;border:1.5px solid var(--line);border-radius:10px;
  background:var(--card,#fff) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A6270' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;
  font-family:inherit;font-size:14px;font-weight:800;color:var(--ink);cursor:pointer;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:center}
.vw-ymsel:hover{border-color:var(--pt)}
.vw-ymsel:focus{outline:none;border-color:var(--pt);box-shadow:0 0 0 3px rgba(43,108,255,.12)}
/* 각 달 제목 (이동 버튼 없음) */
.vw-calbox .mh{display:flex;align-items:center;justify-content:center;margin-bottom:8px;height:22px}
.vw-calbox .mh b{font-size:14px;font-weight:800;color:var(--ink-2)}
table.vw-mc{width:100%;border-collapse:collapse;table-layout:fixed}
table.vw-mc th{font-size:12px;font-weight:700;color:var(--ink-3);padding:0 0 6px}
table.vw-mc th.s0{color:var(--coral)} table.vw-mc th.s6{color:var(--sat,#2E90FA)}
table.vw-mc td{padding:1px;text-align:center;vertical-align:top}
.vw-cd{width:100%;min-height:42px;border:0;background:none;border-radius:9px;cursor:pointer;padding:5px 0 4px;line-height:1.1}
.vw-cd .n{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.vw-cd .p{display:block;font-size:10.5px;font-weight:700;color:var(--ink-3);margin-top:1px;white-space:nowrap}
.vw-cd.s0 .n{color:var(--coral)} .vw-cd.s6 .n{color:var(--sat,#2E90FA)}
.vw-cd.hol .n{color:var(--coral)}          /* 공휴일 — 일요일과 같은 색 (2026-09-18) */
/* 최소 숙박일수 — 그 날 입실하려면 2박 이상인 날에 붙는다 (2026-09-10).
   요금 줄(.p) 과 같은 크기라 칸 높이가 한 줄만큼만 늘어난다. */
/* 최소 숙박일수 — 칸이 33px 라 글씨만으로는 뭉개진다. 색을 채운 작은 칩으로 눈에 띄게 한다 */
.vw-cd .vw-mn{display:block;width:24px;margin:2px auto 0;padding:1px 0;
	font-size:9.5px;font-weight:800;line-height:1.4;letter-spacing:-.03em;
	color:#fff;background:var(--pt);border-radius:20px;white-space:nowrap;text-align:center}
/* 고른 날짜는 칸 배경이 이미 포인트색이라 칩을 반전시킨다 */
/* 고른 날짜는 칸 배경이 이미 포인트색이라 칩을 반전시킨다.
   (예전엔 .vw-cd.pick .p 와 함께 흰 글씨로 묶여 있어 흰 배경에 흰 글씨가 됐다) */
.vw-cd.pick .vw-mn{background:var(--card,#fff);color:var(--pt)}
.vw-cd.rng .vw-mn,.vw-cd.pick-hv .vw-mn{background:var(--pt);color:#fff}
.vw-cd.sold .vw-mn,.vw-cd.nofare .vw-mn{background:var(--mute,#C7CDD6);color:#fff}
/* 결제 금액의 할인 줄 — 빼는 금액이라는 걸 색으로 알린다 */
.vw-minus{color:var(--pt)}
/* 최소 숙박일수로 퇴실일을 늘렸을 때의 안내 한 줄 */
.vw-staynote{margin:8px 0 0;padding:9px 12px;border:1px solid var(--pt);border-radius:9px;
	background:var(--pt-l,#EEF4FF);color:var(--pt);font-size:13px;font-weight:600;line-height:1.45}

.vw-cd:hover{background:var(--bg)}
.vw-cd.off{cursor:default;pointer-events:none}
.vw-cd.off .n{color:var(--mute,#C7CDD6)}
.vw-cd.sold{cursor:default;pointer-events:none}
.vw-cd.sold .n{color:var(--mute,#C7CDD6);text-decoration:line-through}
.vw-cd.sold .p{color:var(--mute,#C7CDD6)}
/* 요금 미설정일 뿐 '마감'은 아니므로 취소선을 긋지 않는다 */
.vw-cd.nofare{cursor:default;pointer-events:none}
.vw-cd.nofare .n{color:var(--mute,#B6BDC7)}
.vw-cd.nofare .p{color:var(--mute,#B6BDC7);font-weight:600}
/* 전화예약 날짜 — 누를 수 있다. 요금 표시가 꺼져 있으면 칸에 글자가 없으므로 숫자 자체를 주황으로 해 구분한다 (2026-09-21 전화예약받기) */
.vw-cd.phone .n{color:var(--tel,#D9750A);font-weight:800}
.vw-cd.phone .p{color:var(--tel,#D9750A);font-weight:800}
.vw-cd.phone.pick .n{color:#fff} .vw-cd.phone.rng .n{color:var(--pt-d)}   /* 고른 칸은 원래 선택색 유지 */
.vw-cd.pick{background:var(--pt)}
.vw-cd.pick .n,.vw-cd.pick .p{color:#fff}   /* .vw-mn 은 칩이라 위에서 따로 정한다 */
/* 화살표 결은 결국 어색해서 걷어내고(최소화 모드와 같은 결론) 처음 방식(모서리 한쪽만
   둥글게)으로 되돌린다 — 기본 칸 둥글기(9px)보다 조금 더 둥글게 줘서 캡슐 느낌을 낸다. */
.vw-cd.pick-ci{border-radius:14px 0 0 14px}
.vw-cd.pick-co{border-radius:0 14px 14px 0}
.vw-cd.rng{background:var(--pt-l);border-radius:0}
.vw-cd.rng .n{color:var(--pt-d)} .vw-cd.rng .p{color:var(--pt)}
/* 마우스만 올려 둔 체크아웃 후보 — 아직 누른 게 아니니 확정된 칸보다 옅게 보여 준다 */
.vw-cd.pick-hv{background:var(--pt-l)}
.vw-cd.pick-hv .n{color:var(--pt-d)} .vw-cd.pick-hv .p{color:var(--pt)}
/* 체크인만 골라 둔 상태 — 짝이 없는데 한쪽만 둥글면 잘려 보여 캡슐로 둔다 */
.vw-cd.pick-ci.solo{border-radius:14px}
/* 커서를 따라다니는 날짜 말풍선 — 지금 고르는 게 체크인인지 체크아웃인지 알려 준다 */
.vw-caltip{position:fixed;z-index:60;pointer-events:none;background:rgba(23,30,42,.92);color:#fff;
  font-size:12px;font-weight:700;line-height:1;white-space:nowrap;padding:7px 10px;border-radius:8px;
  box-shadow:0 6px 18px rgba(20,30,45,.28)}
.vw-calnote{margin:10px 0 0;font-size:12px;color:var(--ink-3);line-height:1.5}
.vw-calnote b{color:var(--ink-2)}
.vw-telnote .vw-telnum{color:var(--tel,#D9750A)} .vw-telnote a{color:var(--tel,#D9750A);font-weight:700;text-decoration:none}   /* 전화예약 안내 (2026-09-21) */
/* 달력 안이 max-height 로 스크롤될 수 있어, [적용하기]는 스크롤 밑으로 묻히지 않게
   팝오버 하단에 붙여 둔다(overflow-y:auto 인 .vw-caldrop 기준 sticky). */
.vw-calft{position:sticky;bottom:-14px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:10px -18px -14px;padding:10px 18px 14px;background:var(--card,#fff);border-top:1px solid var(--line)}
/* 1박/2박/3박 빠른 선택 — 입실일을 고른 뒤 퇴실일 칸을 또 찾지 않아도 바로 박수로 정한다 */
.vw-nightqp{display:flex;gap:6px}
/* 손가락 조작 권장 최소 44px — 36px 는 어르신이 자꾸 빗나간다 (2026-09-10) */
.vw-nightqp button{height:46px;padding:0 18px;border:1.5px solid var(--line);border-radius:999px;background:var(--card,#fff);white-space:nowrap;
  color:var(--ink-2);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:.14s}
/* :hover:not(:disabled) 가 가상클래스 2개라 .on(클래스 2개짜리)보다 우선순위가 높아서,
   고른 버튼(.on, 흰 글자) 위에 마우스를 올리면 글자색이 다시 파란색으로 튀어 파란 배경에
   파란 글자가 되어 안 보였다 — .on 은 호버 규칙에서 빼서 늘 흰 글자를 유지한다. */
.vw-nightqp button:hover:not(:disabled):not(.on){border-color:var(--pt);color:var(--pt)}
.vw-nightqp button.on{background:var(--pt);border-color:var(--pt);color:#fff}
.vw-nightqp button:disabled{opacity:.4;cursor:default}
.vw-calapply{flex:0 0 auto;height:42px;padding:0 26px;border:0;border-radius:10px;background:var(--pt);color:#fff;font-size:15px;font-weight:800;cursor:pointer}
.vw-calapply:disabled{background:var(--line);color:var(--ink-3);cursor:default}

/* ── 객실 목록 ── */
.vw-sech{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.vw-sech h2{font-size:20px;font-weight:800;letter-spacing:-.4px}
.vw-sech .cnt{font-size:14px;color:var(--ink-2);text-align:right}
.vw-sech .cnt b{color:var(--pt)}
.vw-rooms{display:flex;flex-direction:column;gap:12px}
.vw-room{display:grid;grid-template-columns:168px 1fr auto;gap:18px;align-items:center;
  border:1.5px solid var(--line);border-radius:var(--r);padding:14px;background:var(--card,#fff);transition:.15s}
.vw-room{cursor:pointer}   /* 카드 아무 데나 눌러도 선택된다 */
.vw-room.off{cursor:default}
.vw-room:hover{border-color:var(--line-2,#CBD5E1);box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px -12px rgba(16,24,40,.16)}
.vw-room.sel{border-color:var(--pt);background:var(--bg-2,#FBFCFF);box-shadow:0 0 0 3px rgba(43,108,255,.1)}
.vw-room.off{opacity:.55}
.vw-room.off.tel{opacity:1}                 /* 전화예약 객실은 흐리게 하지 않는다 — 못 받는 방이 아니다 (2026-09-21) */
.vw-room .info .bg.tel{background:var(--tel-l,#FFF1E0);color:var(--tel,#D9750A)}
/* 객실 사진 사용안함 — 썸네일 열을 빼고 내용이 그 자리를 쓴다 */
.vw-room.nogal{grid-template-columns:1fr auto}
.vw-room .th{width:168px;height:112px;border-radius:10px;overflow:hidden;cursor:pointer;
  background:linear-gradient(135deg,#E8EEFB,#DCE6F8);display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:800;color:#8FA3C6}
.vw-room.off .th{cursor:default}
.vw-room .th img{width:100%;height:100%;object-fit:cover;display:block}
.vw-room .info{min-width:0}
.vw-room .info .bg{display:inline-block;font-size:12px;font-weight:800;padding:4px 9px;border-radius:6px;margin-bottom:7px}
.vw-room .info .bg.ok{background:var(--ok-bg,#E7F7EE);color:var(--ok,#0A7B47)}
.vw-room .info .bg.no{background:var(--bg-2,#F1F3F6);color:var(--ink-3,#8B95A3)}
.vw-room .info h4{font-size:18px;font-weight:800;letter-spacing:-.3px;margin-bottom:5px}
.vw-room .info .m{font-size:14px;color:var(--ink-2)}
.vw-room .info .more{margin-top:8px;padding:0;border:0;background:none;color:var(--pt);font-size:14px;font-weight:800;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;font-family:inherit}
.vw-room .info .ex{margin-top:7px;font-size:13px;color:var(--ink-3)}
.vw-room .buy{text-align:right;min-width:190px}
.vw-room .buy .pr{font-size:13px;color:var(--ink-3)}
.vw-room .buy .pv{font-size:22px;font-weight:800;letter-spacing:-.6px;margin:2px 0 4px;white-space:nowrap}
.vw-room .buy .add{font-size:12px;color:var(--ink-3);margin-bottom:9px}
.vw-room .buy .soldout{font-size:15px;color:var(--ink-3);font-weight:700}
/* 전화 문의 버튼 — 객실 카드의 '선택' 자리에 온다. 주황 계열로 예약 가능(파랑)·마감(회색)과 구분 (2026-09-21) */
.vw-room .buy .vw-tel{display:inline-block;padding:8px 14px;border-radius:8px;background:var(--tel,#D9750A);color:#fff;font-size:14px;font-weight:800;text-decoration:none;white-space:nowrap}
.vw-room .buy .vw-tel:hover{filter:brightness(1.08)}
.vw-pick{height:44px;padding:0 26px;border:1.5px solid var(--pt);background:var(--card,#fff);color:var(--pt);border-radius:10px;
  font-size:15px;font-weight:800;cursor:pointer;font-family:inherit}
.vw-pick:hover{background:var(--pt-l)}
.vw-room.sel .vw-pick{background:var(--pt);color:#fff}

/* ── 객실 카드(a·b 공통) — 객실 1개당 가로로 긴 한 줄(배지·이름·평수 | 가격·버튼).
   PC·모바일 모두 이 한 줄 구조를 쓰되, 모바일은 폭이 좁아 평수·상세문구 등을 줄인
   짧은 표기(.short, 예: "2~4인")를 대신 보여준다(widget.js 가 둘 다 만들어 둔다).
   목록 자체에 높이 한도를 둬서 객실이 몇 개든 이 구간 안에서만 훑어보게 한다. */
.vw:is([data-ui="a"],[data-ui="b"]) .vw-rooms{
  display:flex;flex-direction:column;gap:10px;
  max-height:min(72vh,560px);overflow-y:auto;overflow-x:hidden;padding:2px 2px 4px;margin:0 -2px;
  scroll-behavior:smooth;
}
.vw:is([data-ui="a"],[data-ui="b"]) .vw-room{display:flex;flex-direction:row;align-items:center;gap:16px;
  padding:13px 16px;overflow:hidden}
.vw:is([data-ui="a"],[data-ui="b"]) .vw-room .th{flex:0 0 auto;width:84px;height:64px;border-radius:8px}
.vw:is([data-ui="a"],[data-ui="b"]) .vw-room .info{display:flex;align-items:baseline;gap:10px;flex:1 1 auto;min-width:0;padding:0}
.vw:is([data-ui="a"],[data-ui="b"]) .vw-room .info .bg{flex:0 0 auto;margin-bottom:0}
.vw:is([data-ui="a"],[data-ui="b"]) .vw-room .info h4{flex:0 0 auto;font-size:16px;margin-bottom:0;white-space:nowrap}
.vw:is([data-ui="a"],[data-ui="b"]) .vw-room .info .m{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.vw:is([data-ui="a"],[data-ui="b"]) .vw-room .info .m .short{display:none}   /* 넓은 화면은 평수까지 다 보여준다 */
.vw:is([data-ui="a"],[data-ui="b"]) .vw-room .info .more{flex:0 0 auto;margin-top:0;font-size:13px;white-space:nowrap}
.vw:is([data-ui="a"],[data-ui="b"]) .vw-room .info .ex{flex:1 1 auto;min-width:100px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vw:is([data-ui="a"],[data-ui="b"]) .vw-room .buy{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;
  gap:6px 14px;padding:0;text-align:left;margin-left:auto}
.vw:is([data-ui="a"],[data-ui="b"]) .vw-room .buy .pr{font-size:12.5px;white-space:nowrap}
.vw:is([data-ui="a"],[data-ui="b"]) .vw-room .buy .pv{font-size:17px;margin:0;white-space:nowrap}
/* 기존 900px 이하 공용 규칙(.vw-room .buy .vw-pick{grid-column:2;...})과 우선순위(구체성)가
   같아서 파일 뒤쪽에 있는 그 규칙에 밀렸다 — .vw-room .buy 를 선택자에 포함해 확실히 이기게 한다. */
.vw:is([data-ui="a"],[data-ui="b"]) .vw-room .buy .vw-pick{flex:0 0 auto;grid-column:auto;grid-row:auto;
  height:38px;padding:0 18px;font-size:13.5px;white-space:nowrap}

/* 모바일 — 썸네일·평수 상세·상세보기 링크를 줄이거나 빼서 한 줄 폭을 맞춘다.
   (레퍼런스 사이트도 실제 모바일 폭에서 열어 보면 한 줄이 아니라 3줄로 쪼개졌다 —
    정보를 줄여야만 진짜 한 줄이 된다는 걸 확인하고 이렇게 압축했다.) */
@media(max-width:759px){
  .vw:is([data-ui="a"],[data-ui="b"]) .vw-room{gap:0;padding:12px 14px}
  .vw:is([data-ui="a"],[data-ui="b"]) .vw-room .th{display:none}
  /* overflow:hidden 안전장치 — buy 쪽 폭 계산이 늘어나 info 몫이 줄어드는 경우에도
     이름·평수 글자가 buy 위로 넘쳐 겹쳐 보이는 대신 이 안에서 잘리게 막는다. */
  .vw:is([data-ui="a"],[data-ui="b"]) .vw-room .info{gap:7px;overflow:hidden}
  .vw:is([data-ui="a"],[data-ui="b"]) .vw-room .info .bg{font-size:13px;padding:4px 9px}
  .vw:is([data-ui="a"],[data-ui="b"]) .vw-room .info h4{flex:0 0 auto;font-size:14.5px}
  /* 짧은 표기('2~4인')는 4~5자뿐이라 줄어들 이유가 없다 — 대신 이름(h4) 쪽을 줄어들게 둔다.
     flex:0 1 auto 로 두면 이름이 길 때 .m 이 먼저 눌려 "2~…" 처럼 그 짧은 글자마저 잘렸다. */
  .vw:is([data-ui="a"],[data-ui="b"]) .vw-room .info .m{flex:0 0 auto;overflow:visible;text-overflow:clip;font-size:13.5px}
  /* 두 줄로 풀어 자리가 생겼으니 '기준 2명 · 최대 4명' 을 온전히 보여 준다 —
     '2~4인' 은 짧지만 무슨 뜻인지 바로 안 와닿는다 (2026-09-10) */
  .vw:is([data-ui="a"],[data-ui="b"]) .vw-room .info .m .full{display:inline}
  .vw:is([data-ui="a"],[data-ui="b"]) .vw-room .info .m .short{display:none}
  .vw:is([data-ui="a"],[data-ui="b"]) .vw-room .info .more{display:none}   /* 한 줄에 자리가 없다 */
  /* '선택하신 기간에 이미 예약이 있습니다' 처럼 왜 못 고르는지 알려 주는 글이라 작으면 안 된다 */
  .vw:is([data-ui="a"],[data-ui="b"]) .vw-room .info .ex{white-space:normal;overflow:visible;text-overflow:clip;font-size:13px}
  /* 한 줄에 [이름·인원][금액][선택] 을 다 넣으려니 서로 폭을 뺏어 이름이 '금잔디 2~4′' 처럼
     잘렸다. 좁은 화면에서는 카드를 두 줄로 푼다 — 위에 이름·인원, 아래에 금액과 [선택].
     둘 다 폭을 온전히 쓰게 되어 잘림이 없어지고 버튼도 크게 잡힌다 (2026-09-10). */
  /* 이 폭에서 카드는 grid 가 아니라 flex 다 — 줄바꿈을 켜고 두 덩어리 모두
     한 줄씩 온전히 쓰게 한다(flex-basis:100%). 예전엔 한 줄에 우겨넣느라
     '금잔디 2~4′' 처럼 이름이 잘렸다 (2026-09-10). */
  .vw:is([data-ui="a"],[data-ui="b"]) .vw-room{flex-wrap:wrap;row-gap:10px;
    /* 한 줄 전제로 걸려 있던 값들 — 두 줄이 되면 카드가 안 늘어나고 아래가 잘린다 */
    align-items:flex-start;align-content:flex-start;height:auto;overflow:visible}
  .vw:is([data-ui="a"],[data-ui="b"]) .vw-room .info{flex:1 1 100%;min-width:0;overflow:visible;flex-wrap:wrap}
  .vw:is([data-ui="a"],[data-ui="b"]) .vw-room .info h4{flex:0 1 auto;overflow:visible}
  .vw:is([data-ui="a"],[data-ui="b"]) .vw-room .buy{flex:1 1 100%;max-width:none;width:auto;
    display:flex;align-items:center;justify-content:space-between;gap:4px 12px}
  /* '2박 합계' 라벨을 숨기면 1박 값인지 총액인지 알 수 없다 — 작게라도 남긴다 (2026-09-10) */
  .vw:is([data-ui="a"],[data-ui="b"]) .vw-room .buy .pr{display:block;font-size:13.5px;color:var(--ink-2)}
  .vw:is([data-ui="a"],[data-ui="b"]) .vw-room .buy .pv{font-size:17px;font-weight:800}
  /* 예전엔 32px 로 줄였는데, 손가락으로 누르는 가장 중요한 버튼이 제일 작아지는 꼴이었다.
     휴대폰에서 권장되는 최소 터치 크기(44px)를 지키고 글자도 읽을 수 있게 키운다 (2026-09-10).
     '선택'→'선택됨 ✓' 로 글자가 늘어나도 카드가 밀리지 않을 만큼 min-width 를 준다. */
  .vw:is([data-ui="a"],[data-ui="b"]) .vw-room .buy .vw-pick{height:48px;padding:0 16px;font-size:15px;font-weight:700;min-width:88px}
}

/* 처음 들어오면 날짜가 정해져 있지 않다(첫 화면은 검색바만) — 입실·퇴실을 정하고
   [적용하기] 를 눌러야 그 조건에 맞는 객실이 나온다. 위젯 안쪽 JS(commitDates)가 이 클래스를 뗀다.
   요약·[다음으로](.vw-cta)는 숨기지 않는다 — "날짜를 선택해 주세요" 안내와 버튼이
   처음부터 붙어 있어야 뭘 해야 할지 알 수 있다(다음으로는 비활성 상태로 둔다). */
.vw:is([data-ui="a"],[data-ui="b"]).vw-nodate .vw-sech,
.vw:is([data-ui="a"],[data-ui="b"]).vw-nodate #applyErr,
.vw:is([data-ui="a"],[data-ui="b"]).vw-nodate #rooms{display:none}

/* ── [다음으로] ──
   구사이트처럼 화면 하단 고정 바가 아니라 문서 흐름 안, 객실 목록 바로 아래.
   (고정 바는 첫 화면(검색바뿐)에서 바까지의 빈 공백이 너무 넓어 걷어냈다)
   안내 문구(.t)는 아직 할 일이 남았을 때만 — 객실까지 고르면 날짜·요금은 위쪽
   (날짜 필드·선택된 객실 카드)에 다 보이므로 요약을 반복하지 않고 버튼만 남긴다(syncBar). */
.vw-cta{display:flex;flex-direction:column;align-items:center;gap:14px;margin:26px 0 8px;text-align:center}
/* 다음에 할 일 안내 — 15px·--ink-2 는 놓치기 쉬웠다. 어르신도 바로 보이게 키운다 (2026-09-10) */
.vw-cta .t{font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.vw-cta .t[hidden]{display:none}
/* 다 골랐으면 안내는 보이지 않되 자리는 지킨다(visibility) — display:none 으로 빼면
   줄 높이만큼 버튼이 튀어 올라 화면이 움직인다 */
.vw-cta .t.ok{visibility:hidden}
.vw-cta[hidden]{display:none}   /* 1단계에서만 보인다(goStep) */
.vw-next{flex:0 0 auto;height:54px;padding:0 56px;border:0;border-radius:12px;background:var(--pt);color:#fff;
  font-size:17px;font-weight:800;cursor:pointer;font-family:inherit}
/* 버튼은 늘 누를 수 있다(goNextStep 이 다음 할 일로 데려간다).
   아직 다 못 고른 상태는 연한 파랑으로 두어 '눌러도 되는 버튼' 으로 보이게 한다 (2026-09-10) */
.vw-next:disabled{background:var(--bg-2,#EEF1F5);color:var(--ink-2);cursor:default;font-weight:700}
.vw-next:not(.ready){background:#8FB2FF;color:#fff}
.vw-next:not(.ready):hover{background:#7AA3FF}
/* 안내는 눌렀을 때만 뜨므로, 뜰 때 눈에 들어오게 한다 */
.vw-cta .t{animation:vwHint .18s ease-out}
@keyframes vwHint{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.vw-cta .t{animation:none}}
/* 달력이 이제 검색바 아래 '떠서' 열리므로(position:absolute) sbwrap 높이가 안 늘어난다
   — 예전엔 달력이 문서 흐름을 밀어내 sticky 를 열려 있는 동안 풀어야 했지만, 더는 그럴 일이 없다.
   sticky 를 유지하면 스크롤해도 검색바+달력이 화면 위에 계속 떠 있다(호텔스닷컴·야놀자 방식). */

@media(max-width:900px){
  /* 라벨 열을 좁히고 필드는 전체 폭으로 */
  .vw-frow{grid-template-columns:84px 1fr;min-height:58px}
  .vw-frow>.lb{padding:0 13px;font-size:13px}
  .vw-frow>.ct{padding:10px 12px}
  .vw-sbtn{height:54px;max-width:none}
  .vw-sbtn .v b{font-size:14px}   /* "9.14 (월)" 이 좁은 칸에서 잘리지 않게 */
  .vw-sb-date .seg{padding:0 9px;gap:6px}
  .vw-sb-date .seg .ic{display:none}   /* 좁은 폭 — 달력 아이콘은 생략 */
  .vw-sb-date .nt{margin-right:9px;padding:4px 9px}
  .vw-sb-guest{height:46px;padding:0 14px}
  /* 달력·인원 팝오버는 '날짜 칸(.ct)' 기준이라, 라벨 열(84px)만큼 오른쪽으로 밀려
     화면 폭의 60% 남짓밖에 못 썼다(390px 화면에서 240px). 좁은 폭에서는 행 전체를
     기준으로 삼아 화면 폭에 가깝게 펼친다 — 달력 칸도 커지고, 하단의 1·2·3박과
     −/+ 스테퍼도 줄바꿈 없이 한 줄에 들어간다. */
  .vw-frow{position:relative}
  .vw-frow>.ct{position:static}
  .vw-gpop{left:12px;width:calc(100% - 24px)}
  .vw-calgrid{grid-template-columns:1fr;gap:16px}
  .vw-caldrop{padding:14px 14px 12px;left:12px;width:calc(100% - 24px)}
  .vw-mv{width:44px;height:44px}                 /* 터치 타깃 44px 확보 */
  .vw-stepper button{width:46px;height:46px}
  .vw-calft{flex-wrap:wrap}
  /* 달력 하단([적용하기] 옆) 전용 — 숙박일수 행의 버튼(#nightQp2)은 왼쪽 정렬 그대로 둔다 */
  .vw-calft .vw-nightgrp{flex:1 1 100%;order:1;justify-content:center;flex-wrap:nowrap;gap:10px}
  .vw-calapply{flex:1 1 100%;order:2}
  .vw-room{grid-template-columns:104px 1fr;gap:12px;padding:12px}
  .vw-room.nogal{grid-template-columns:1fr}
  /* 사진을 끄면 카드가 한 칸이라 배지·객실명·평수가 전부 왼쪽에 몰려 오른쪽이 비었다.
     객실명은 왼쪽에 두고 평수·인원만 오른쪽 끝으로 보내 한 줄에 나눠 담는다.
     (PC 는 썸네일 자리가 없어도 폭이 넓어 지금 배치로 충분하다 — 모바일에서만) */
  .vw-room.nogal .info{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:10px}
  .vw-room.nogal .info .bg{grid-column:1/-1;justify-self:start}
  .vw-room.nogal .info h4{margin-bottom:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .vw-room.nogal .info .m{text-align:right;white-space:nowrap}
  .vw-room.nogal .info .ex{grid-column:1/-1}
  .vw-room .th{width:104px;height:80px;font-size:13px}
  /* 추가 인원이 붙으면 '기준 2명 + 추가 1명 10,000원' 이 들어와 한 줄에 담을 폭이 안 나온다.
     flex + nowrap 이라 각 항목이 짓눌려 '1박 합계' 가 네 줄로 쪼개졌다.
     금액 정보는 왼쪽에 세로로 쌓고 [선택] 버튼만 오른쪽에 둔다. */
  .vw-room .buy{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;
    align-items:center;column-gap:12px;text-align:left;
    min-width:0;border-top:1px dashed var(--line);padding-top:11px;margin-top:2px}
  .vw-room .buy .pr,
  .vw-room .buy .pv,
  .vw-room .buy .add{grid-column:1;min-width:0}
  .vw-room .buy .pv{margin:0}
  .vw-room .buy .add{margin:0}
  .vw-room .buy .vw-pick{grid-column:2;grid-row:1/-1;align-self:center}
  .vw-cta .t{font-size:16px}
  .vw-next{width:100%;height:52px;padding:0 26px;font-size:16px}
}

/* 320~360px 기기 — 달력 하단 1·2·3박 + 스테퍼가 한 줄에 남도록 간격만 좁힌다 */
@media(max-width:365px){
  .vw-caldrop{padding-left:10px;padding-right:10px}
  .vw-calft{margin-left:-10px;margin-right:-10px;padding-left:10px;padding-right:10px}
  .vw-calft .vw-nightqp{gap:5px}
  .vw-calft .vw-nightqp button{padding:0 8px}
  .vw-calft .vw-nightgrp{gap:6px}
  .vw-calft .vw-nightstep{gap:5px}
  .vw-calft .vw-nightstep button{width:28px;height:28px}
  .vw-calft .vw-nightstep b{min-width:24px}
}

/* 320px 급 좁은 화면(구형 iPhone SE·폴더블 접힘)에서는
   '기준 2명 + 추가 1명 10,000원' 이 한 줄에 안 들어가 '원' 한 글자만 다음 줄로 떨어졌다.
   [선택] 버튼과 안내 글자를 조금씩 줄여 한 줄에 담는다. */
@media(max-width:360px){
  .vw-room .buy .vw-pick{min-width:92px;padding:0 14px}
  .vw-room .buy .add{font-size:11px}
}


/* =====================================================================
   화면 형태 b — 달력을 접지 않고 계속 펼쳐 둔 검색바형(setCalPinned).
   달력 UI(색상·칸 위치·크기 등)는 검색바형과 완전히 같아야 하므로, 여기 남기는 규칙은
   '접지 않고 계속 펼쳐 둔다'는 동작 차이를 위해 꼭 필요한 것뿐이다 — 겉모습은 건드리지 않는다.
   (a 와 같은 DOM 을 쓰고 이 최소한의 배치·표시만 바꾼다)
   ===================================================================== */
.vw[data-ui="b"] .vw-calapply{display:none}          /* 날짜를 누르면 곧바로 반영되니 필요 없다 */
/* a(검색바형)는 달력이 떴다 사라지는 팝오버라 뒤 내용을 덮지만, b 는 늘 펼쳐진 전용 구획이라
   애초에 '덮을 뒤'가 없다 — 날짜 행(.ct) 안 문서 흐름에 그대로 두어 폭·높이 제한 없이 늘 온전히 보인다. */
.vw[data-ui="b"] .vw-caldrop{position:static;width:auto;max-height:none;overflow:visible;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 12px 30px -14px rgba(16,24,40,.24);margin-top:10px}

@media(min-width:901px){
  /* 달력을 위에 펼쳐 두고 객실 목록은 그 아래.
     예전에는 좌(달력) / 우(객실) 2단이었는데, 객실 수가 늘면 두 칸의 높이가 크게 벌어져
     달력 아래로 빈 공간이 길게 남았다. 세로로 쌓으면 객실이 몇 개든 자연스럽다. */
  .vw[data-ui="b"] .vw-panel[data-panel="1"]{display:block}
  /* display 를 지정하면 hidden 속성이 먹히지 않는다.
     이걸 빠뜨려 [다음으로] 를 눌러도 1단계(달력·객실)가 그대로 남고 그 아래에 예약자 정보가 붙었다. */
  .vw[data-ui="b"] .vw-panel[hidden]{display:none}
}


/* 안내관리 > 환불안내 문구.
   글자색·굵기·크기는 관리자가 에디터에서 정한 대로 보여 준다(이전에는 !important 로 덮어써서
   에디터로 넣은 색과 크기가 하나도 나타나지 않았다).
   다만 폰트·자간·가로폭은 통일해 레이아웃이 깨지지 않게 한다. */
.vw-refund-guide{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);
  font-size:13.5px;line-height:1.75;color:var(--ink-2);word-break:keep-all;overflow-x:auto}
.vw-refund-guide *{max-width:100%!important;font-size:13.5px!important;font-family:inherit!important;
  line-height:1.75!important;color:var(--ink-2)!important;letter-spacing:normal!important}
.vw-refund-guide p{margin:0 0 6px}
.vw-refund-guide p:last-child{margin-bottom:0}
.vw-refund-guide img{max-width:100%!important;height:auto!important}
.vw-refund-guide table{width:100%!important;border-collapse:collapse!important}
.vw-refund-guide td,.vw-refund-guide th{border:1px solid var(--line)!important;padding:7px 9px!important}


/* ===== 공용 확인 모달 — alert/confirm 대신 사용 (당일 예약 경고, 예약 취소 확인) ===== */
.vw-cfm{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.vw-cfm[hidden]{display:none}
.vw-cfm-bg{position:absolute;inset:0;background:var(--overlay,rgba(15,23,42,.55))}
.vw-cfm-box{position:relative;width:100%;max-width:420px;background:var(--card,#fff);border-radius:18px;padding:26px 24px 20px;
  box-shadow:0 24px 60px -20px rgba(16,24,40,.45);overflow-y:auto}
.vw-cfm-ic{width:52px;height:52px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;
  background:var(--warn-bg,#FFF4E5);color:var(--warn,#E8890C);font-size:26px;font-weight:800}
.vw-cfm-t{font-size:19px;font-weight:800;text-align:center;letter-spacing:-.4px;margin-bottom:10px;word-break:keep-all}
.vw-cfm-d{font-size:14.5px;line-height:1.75;color:var(--ink-2);text-align:center;word-break:keep-all}
.vw-cfm-d b{color:var(--ink)}
.vw-cfm-sum{margin-top:14px;padding:12px 14px;background:var(--bg);border-radius:12px;font-size:14px}
.vw-cfm-sum div{display:flex;justify-content:space-between;gap:10px;padding:3px 0;color:var(--ink-2)}
.vw-cfm-sum div b{color:var(--ink);font-weight:700}
.vw-cfm-sum div.hl b{color:var(--coral)}
.vw-cfm-ft{display:flex;gap:9px;margin-top:20px}
.vw-cfm-ft button{flex:1;height:50px;border-radius:12px;font-size:15.5px;font-weight:800;cursor:pointer;font-family:inherit}
.vw-cfm-ft .no{background:var(--card,#fff);border:1.5px solid var(--line);color:var(--ink-2)}
.vw-cfm-ft .yes{border:0;background:var(--pt);color:#fff}
.vw-cfm-ft .yes.danger{background:var(--coral)}
@media(max-width:520px){.vw-cfm-box{padding:22px 18px 18px}.vw-cfm-t{font-size:17px}}


/* 예약번호 눌러서 복사 */
.vw-copy{display:inline-flex;align-items:center;gap:6px;cursor:pointer;position:relative;
  padding:2px 8px;margin:-2px -8px;border-radius:9px;transition:.15s;user-select:all}
.vw-copy:hover{background:rgba(43,108,255,.1)}
.vw-copy svg{color:var(--pt);flex:0 0 auto}
.vw-copy.copied{background:rgba(43,108,255,.14)}
.vw-copy.copyfail{background:rgba(255,90,95,.14)}
.vw-copy-tip{position:absolute;left:50%;top:-33px;transform:translateX(-50%);white-space:nowrap;
  background:var(--ink);color:#fff;font-size:12px;font-weight:700;font-style:normal;
  padding:6px 10px;border-radius:8px;pointer-events:none;z-index:5}
.vw-copy-tip:after{content:'';position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--ink)}


/* 예약조회 — 취소·환불 규정 접기 토글 */
.vm-tiers-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:12px;
  padding:11px 13px;background:var(--bg);border:1px solid var(--line);border-radius:11px;
  font-family:inherit;font-size:14px;font-weight:700;color:var(--ink-2);cursor:pointer}
.vm-tiers-toggle:hover{border-color:var(--line-2,#CBD5E1)}
.vm-tiers-toggle span{font-size:13px;color:var(--pt);font-weight:700}
.vm-tiers[hidden]{display:none}
.vm-tiers{margin-top:8px}


/* ===== 예약조회 상세 — 예약 위젯과 같은 카드 톤 ===== */
.vm-card{border:1.5px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card,#fff);margin-bottom:14px}
.vm-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;background:var(--pt-l)}
.vm-top.vm-cancel{background:rgba(255,90,95,.10)}
.vm-top.vm-wait{background:var(--bg)}
.vm-chip{flex:0 0 auto;font-size:12.5px;font-weight:800;padding:6px 12px;border-radius:999px;background:var(--pt);color:#fff}
.vm-top.vm-cancel .vm-chip{background:var(--coral)}
.vm-top.vm-wait .vm-chip{background:var(--ink-2)}
.vm-no{text-align:right;min-width:0}
.vm-no span{display:block;font-size:11.5px;font-weight:700;color:var(--ink-2);letter-spacing:.2px}
.vm-no b{display:inline-flex;align-items:center;gap:6px;font-size:19px;font-weight:800;letter-spacing:-.4px;white-space:nowrap}

/* 일정 — 위젯 3단계의 [입실 · N박 · 퇴실] 과 같은 형태 */
.vm-stay{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.vm-stay .d{flex:1;min-width:0}
.vm-stay .d i{display:block;font-style:normal;font-size:11.5px;font-weight:800;color:var(--pt);margin-bottom:3px}
.vm-stay .d b{font-size:17px;font-weight:800;white-space:nowrap}
.vm-stay .n{flex:0 0 auto;font-size:13px;font-weight:800;color:var(--pt);background:var(--pt-l);border-radius:999px;padding:5px 12px}

.vm-rows{padding:6px 18px 14px}
.vm-rows>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 0;font-size:15px}
.vm-rows>div+div{border-top:1px solid var(--line)}
.vm-rows>div span{color:var(--ink-2);white-space:nowrap;flex:0 0 auto}
.vm-rows>div b{font-weight:700;text-align:right;word-break:keep-all}
.vm-rows>div.tot b{font-size:19px;font-weight:800;color:var(--pt)}
.vm-rows .vm-pen{color:var(--coral)}

/* 환불 안내 카드 */
.vm-refund-card{border-color:var(--pt-l,#DDE6F8)}
.vm-refund-hd{padding:16px 18px 12px;font-size:17px;font-weight:800;letter-spacing:-.4px;word-break:keep-all}
.vm-refund-hd b{color:var(--pt)}
.vm-refund-hd .vm-dday{display:block;margin-top:5px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.vm-refund-card .vm-refund-note{padding:0 18px 12px;margin:0;font-size:12.5px;color:var(--ink-3);line-height:1.6}
.vm-refund-card .vm-tiers-toggle{margin:0 18px 12px;width:auto}
.vm-refund-card .vm-tiers{margin:0 18px 12px}
.vm-refund-card .vw-agree{margin:0 18px 16px}
@media(max-width:520px){
  .vm-stay .d b{font-size:15.5px}
  .vm-no b{font-size:17px}
  .vm-refund-hd{font-size:15.5px}
}

/* ── 예약 취소 완료 화면 (조회 상세와 같은 카드 톤) ── */
.vm-done{max-width:560px;margin:0 auto}
.vm-done-hd{text-align:center;padding:8px 0 20px}
.vm-done-ic{width:60px;height:60px;border-radius:50%;background:rgba(255,90,95,.12);color:var(--coral);
  display:grid;place-items:center;margin:0 auto 14px}
.vm-done-hd h3{font-size:21px;font-weight:800;letter-spacing:-.5px;margin-bottom:8px}
.vm-done-lead{font-size:15px;color:var(--ink-2);line-height:1.6;word-break:keep-all}
.vm-done-lead b{color:var(--ink);font-weight:800}
.vm-done .vm-info-box{margin-bottom:14px}
.vm-done-ft{display:flex;gap:10px;margin-top:18px}
.vm-done-ft>*{flex:1;margin:0}
@media (max-width:480px){
  .vm-done-hd h3{font-size:19px}
  .vm-done-ft{flex-direction:column-reverse}
}
.vm-done-sub{border:1.5px solid var(--line);background:var(--card,#fff);color:var(--ink-2);border-radius:12px;
  padding:15px 18px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit}
.vm-done-sub:hover{border-color:var(--line-2,#CBD5E1);background:var(--bg)}

/* ── 좁은 화면의 달력 요금 표기 ──
   한 칸이 43px 남짓인데 '1,000~'(12px)은 39px 이 필요해 옆 칸으로 삐져나왔다.
   글자를 줄이고 칸 안에서 가운데로 맞춘다. */
@media(max-width:560px){
  .vw-cd .p{font-size:10px;letter-spacing:-.3px;overflow:hidden;text-overflow:clip}
  .vw-cd{padding-left:1px;padding-right:1px}
}
@media(max-width:380px){
  .vw-cd .p{font-size:9px;letter-spacing:-.4px}
}

/* 인원을 바꾸는 동안 기존 객실 카드를 남긴 채 살짝 흐리게만 한다(목록이 사라졌다 나타나는 깜빡임 방지) */
.vw-rooms.loading{opacity:.5;transition:opacity .12s}
/* '선택' → '선택됨 ✓' 로 바뀔 때 버튼 폭이 커지며 카드가 밀리던 것을 막는다 */
.vw-pick{min-width:112px}

.vw-gpop-note{margin:0;padding:10px 0 12px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3);text-align:center}
.vw-gpop-note b{color:var(--ink-2);font-weight:700}

/* ── 화면 형태 고르기 ──
   [달력 펼쳐 보기] 는 검색바↔달력(같은 화면의 두 표시 방식),
   [객실별 달력형] 토글은 예전 방식으로 통째로 바꾼다. */
.vw-uipick{display:inline-flex;align-items:center;gap:16px;margin:0 0 12px;float:right;clear:both;user-select:none}
.vw-uipick[hidden]{display:none}
.vw-uichk{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:13px;font-weight:700;color:var(--ink-2)}
.vw-uichk[hidden]{display:none}
.vw-uichk input{width:16px;height:16px;accent-color:var(--pt);cursor:pointer;margin:0}
/* 누르는 곳이라 44px 은 확보한다 — 스위치만 24px 이면 빗나가기 쉽다 (2026-09-10) */
.vw-uisw{display:inline-flex;align-items:center;gap:9px;cursor:pointer;min-height:44px;padding:0 2px}
.vw-uisw .t{font-size:13.5px;font-weight:700;color:var(--ink-2)}
.vw-uisw input{position:absolute;opacity:0;width:0;height:0}
.vw-uisw .sw{position:relative;display:block;width:42px;height:24px;border-radius:999px;
  background:var(--line-2,#CBD5E1);transition:background .16s;flex:0 0 auto}
.vw-uisw .sw:after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:var(--card,#fff);box-shadow:0 1px 3px rgba(16,24,40,.28);transition:transform .16s}
.vw-uisw input:checked+.sw{background:var(--pt)}
.vw-uisw input:checked+.sw:after{transform:translateX(18px)}
.vw-uisw input:focus-visible+.sw{box-shadow:0 0 0 3px rgba(43,108,255,.25)}
/* 오른쪽으로 떠 있어 다음 요소가 올라붙지 않게 */
.vw-uipick+*{clear:both}
@media(max-width:520px){
  .vw-uipick{gap:12px}
  .vw-uichk,.vw-uisw .t{font-size:13.5px}
}


/* ── 안내 모달(취소·환불 규정 상세) ── */
.vw-gmodal{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;padding:20px}
.vw-gmodal[hidden]{display:none}
.vw-gmodal-bg{position:absolute;inset:0;background:var(--overlay,rgba(15,23,42,.55))}
.vw-gmodal-box{position:relative;background:var(--card,#fff);border-radius:16px;max-width:560px;width:100%;
  max-height:80vh;display:flex;flex-direction:column;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.vw-gmodal-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 20px 12px;border-bottom:1px solid var(--line)}
.vw-gmodal-hd b{font-size:17px;font-weight:800}
.vw-gmodal-x{border:0;background:none;font-size:26px;line-height:1;color:var(--ink-3);cursor:pointer;padding:0 2px}
.vw-gmodal-x:hover{color:var(--ink-2)}
.vw-gmodal-body{padding:16px 20px;overflow-y:auto;flex:1}
.vw-gmodal-body .vw-refund-guide{margin:0;padding:0;border-top:0}
.vw-gmodal-ft{padding:12px 20px 18px;text-align:right}
.vw-gmodal-ok{background:var(--pt);color:#fff;border:0;border-radius:10px;font-weight:700;
  font-size:15px;padding:11px 26px;cursor:pointer;font-family:inherit}

/* 안내 모달 안의 항목별 구획 — 안내문마다 서식(색·크기)이 제각각이라
   구분선만으로는 어디서 끊기는지 알아보기 어렵다. 항목마다 카드로 감싼다. */
.vw-gsec{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:0 0 14px;overflow:hidden}
.vw-gsec+.vw-gsec{margin-top:12px}
.vw-gsec h4{margin:0 0 12px;padding:11px 16px;font-size:13.5px;font-weight:800;
  color:var(--pt-d);background:var(--pt-l);border-bottom:1px solid var(--line);
  letter-spacing:-.2px;display:flex;align-items:center;gap:7px}
.vw-gsec h4:before{content:'';width:3px;height:13px;border-radius:2px;background:var(--pt);flex:0 0 auto}
.vw-gsec .vw-refund-guide{margin:0;padding:0 16px;border-top:0}

/* 완료화면 입금 안내 — 관리자 '안내관리 > 예약안내' 본문.
   에디터에서 지정한 글자색·크기를 덮지 않도록 !important 를 쓰지 않는다. */
.vw-done .acctbox .vw-acct-guide{margin-top:12px;padding-top:12px;border-top:1px dashed var(--pt);text-align:left;font-size:12px;line-height:1.7;color:var(--ink-2)}
.vw-done .acctbox .vw-acct-guide p{margin:0 0 4px;font-size:inherit;color:inherit}
.vw-done .acctbox .vw-acct-guide p:last-child{margin-bottom:0}

/* 입실·퇴실 날짜의 요일 색 — 달력과 같은 규칙(토 파랑 / 일 빨강) */
.vw-sbtn .v b.dow-sat{color:var(--sat,#1F6FEB)}
.vw-sbtn .v b.dow-sun{color:#E5484D}

/* 동의 문구는 한 줄로 고정한다 — [필수] 배지만 다음 줄로 떨어지면 어색하다.
   여유가 18px 남짓이라 화면이 조금만 좁거나 확대하면 접혔다. */
.vw-agree span{flex-wrap:nowrap;white-space:nowrap}
.vw-agree i{margin-left:5px;flex:0 0 auto}
@media(max-width:1100px){
  .vw-agree{font-size:13px}
  .vw-agree i{font-size:11px;padding:1px 4px}
}

/* 달력 아래 최소 숙박일수 설명 — 안에 든 예시 칩은 달력에 뜨는 표시와 같은 모양으로 (2026-09-10) */
/* 최소 숙박일수 안내 — 한글은 기본이 글자 단위 줄바꿈이라 '예약은/받지' 처럼 끊긴다.
   keep-all 로 띄어쓰기에서만 끊고, 넘쳐서 두 줄이 되면 둘째 줄이 본문 시작(칩 자리)에
   맞도록 가운뎃점을 따로 띄운다 (2026-09-10) */
/* 최소 숙박일수 안내는 '읽어야 하는' 문장이라 다른 각주(--ink-3, 대비 2.6:1)보다 진하게 둔다.
   --ink-2 는 흰 배경 대비 6:1 이라 12.5px 에서도 또렷하다 (2026-09-10) */
.vw-mnnote{display:flex;gap:5px;align-items:center;margin-top:4px;line-height:1.6;word-break:keep-all;
	font-size:12.5px;color:var(--ink-2)}
.vw-mnnote b:not(.vw-mnchip){color:var(--ink)}
.vw-mnnote .mk{flex:none}
.vw-mnnote .tx{flex:1;min-width:0}
/* 칩은 flex 로 세로 중앙을 맞춘다 — vertical-align:middle 은 한글 x-height 기준이라
   글자 중심보다 2px 쯤 내려가 줄이 안 맞아 보였다 (2026-09-10) */
.vw-mnnote .vw-mnchip{flex:none;display:inline-flex;align-items:center;font-size:10px;font-weight:800;color:#fff;
	background:var(--pt);border-radius:20px;padding:2px 8px;line-height:1.1;white-space:nowrap;
	position:relative;top:-1px}   /* 칩이 글자 중심보다 1px 내려가 보여 올린다 */

/* 부가 서비스 (2026-09-10 · 한 줄 표로 2026-09-11)
   항목당 한 줄(이름·단가 | − 0 +)로 늘 펼쳐 둔다 — 떠나요·야놀자펜션·네이버 예약과 같은 방식.
   접어 두면 어르신은 안 눌러 보고, 옵션(바베큐·조식)이 안 팔린다. */
.vw-card-s{margin-left:8px;font-size:13.5px;font-weight:500;color:var(--ink-3);letter-spacing:0}
.vw-svc-guide{margin:-4px 0 10px;font-size:13.5px;color:var(--ink-2);line-height:1.6;word-break:keep-all}
.vw-svc-guide b{color:var(--ink)}
.vw-svc{display:flex;flex-direction:column}
.vw-svc-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.vw-svc-row.on{background:linear-gradient(90deg,var(--pt-l,#EEF4FF),transparent 70%)}
.vw-svc-row .i{flex:1;min-width:0}
.vw-svc-row .i b{display:block;font-size:15.5px;font-weight:700;color:var(--ink);word-break:keep-all}
.vw-svc-row .i .u{display:block;font-size:13.5px;color:var(--ink-2);margin-top:2px;white-space:nowrap}
.vw-svc-row .i .m{display:block;font-size:13px;color:var(--ink-3);margin-top:2px;word-break:keep-all}
.vw-svc-row .i .calc{display:block;margin-top:4px;font-size:13.5px;font-weight:700;color:var(--pt-d,var(--pt));word-break:keep-all}
.vw-svc-row .c{flex:none}
.vw-svc-step{gap:6px}
.vw-svc-step b{display:inline-block;min-width:34px;text-align:center;font-size:16px;font-weight:800;color:var(--ink)}
.vw-svc-step button{width:44px;height:44px;border-radius:10px;font-size:22px}

/* 어르신 기준 손질 (2026-09-10)
   ── 아직 쓸 수 없는 줄은 아예 감춘다. 회색으로 놔두면 "왜 안 눌리지?" 가 된다.
      날짜를 정하면 vw-nodate 가 떨어지면서 나타난다(widget.js commitDates). */
.vw.vw-nodate .vw-frow.vw-nightrow{display:none}

/* 좁은 화면(320px 구형 폰) — 날짜 "9.18 (금)" 이 잘렸다. 글자를 줄이는 대신
   버튼 안쪽 여백을 줄여 자리를 만든다 (2026-09-10) */
@media (max-width:340px){
	/* 라벨(날짜·인원) 칸이 130px 를 먹어 입력이 170px 밖에 못 썼다 —
	   구형 폰에서는 라벨을 위로 올려 입력이 화면 폭을 온전히 쓰게 한다 (2026-09-10) */
	.vw-frow{grid-template-columns:1fr;min-height:0}
	.vw-frow>.lb{align-self:auto;padding:8px 12px 0;background:none;border-radius:0}
	.vw-frow>.lb span{min-width:0;text-align:left;text-align-last:left}
	.vw-frow>.ct{padding:0 12px 10px}
	.vw-sbtn{padding-left:8px;padding-right:8px;gap:4px}
	/* 날짜 두 칸이 서로 폭을 뺏어 "9.18 (금)" 이 33px 로 눌려 잘렸다 —
	   두 칸을 똑같이 나눠 갖게 하고 아이콘·박수칩은 자리를 양보한다 (2026-09-10) */
	.vw-sbtn .seg{flex:1 1 0;min-width:0}
	.vw-sbtn .v b{font-size:14.5px;white-space:nowrap}
	.vw-sbtn .ic{display:none}
	.vw-sbtn .nt{padding:0 6px;font-size:12.5px}
	.vw-nightqp button{padding:0 12px}
}

/* ===== 예약내역 목록 · 회원 로그인 안내 (2026-09-30 회원 예약) ===== */
.vm-mytabs{display:flex;gap:6px;margin-bottom:14px}
.vm-mytabs button{flex:1;border:1.5px solid var(--line);background:var(--card,#fff);border-radius:10px;padding:10px 4px;font-size:15px;font-weight:800;color:var(--ink-3);font-family:inherit;cursor:pointer}
.vm-mytabs button.on{border-color:var(--pt);color:var(--pt);background:var(--pt-l)}
.vm-myitem{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"chip room arr" "date date arr" "meta meta arr";gap:4px 10px;align-items:center;
  width:100%;text-align:left;border:1.5px solid var(--line);border-radius:14px;background:var(--card,#fff);padding:14px 16px;margin-bottom:10px;font-family:inherit;cursor:pointer}
.vm-myitem:hover{border-color:var(--pt)}
.vm-mychip{grid-area:chip;font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;background:var(--pt);color:#fff;white-space:nowrap}
.vm-mychip.vm-wait{background:var(--ink-2)}
.vm-mychip.vm-cancel{background:var(--coral)}
.vm-myroom{grid-area:room;font-size:16px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vm-mydate{grid-area:date;font-size:15px;font-weight:700;color:var(--ink)}
.vm-mymeta{grid-area:meta;font-size:13px;color:var(--ink-3)}
.vm-myarr{grid-area:arr;font-style:normal;font-size:22px;color:var(--ink-3)}
.vm-sub-link{text-align:center;margin-top:16px;font-size:14px;color:var(--ink-2)}
.vm-sub-link a{color:var(--pt);font-weight:700;text-decoration:none}
.vm-sub-link[hidden]{display:none}
.vm-gate{display:flex;flex-direction:column;gap:10px}
.vm-gate .vw-apply{display:block;text-align:center;text-decoration:none}
.vm-gate-sub{display:block;text-align:center;padding:14px;border:1.5px solid var(--pt);border-radius:12px;color:var(--pt);font-weight:800;font-size:16px;text-decoration:none}

/* ===== 3단계 예약자 이름·휴대폰 줄 (2026-09-30) =====
   _step3.jsp 의 .vw-frow 가 위쪽 '날짜·인원 표' 의 .vw-frow(라벨 기둥 130px / 모바일 84px)에 덮여,
   모바일에서 예약자 이름 칸이 84px 기둥에 갇혀 좁게 보였다. 3단계 폼 안에서는 원래 뜻(두 칸 → 좁으면 한 칸)으로 되돌린다. */
.vw-form > .vw-frow{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;min-height:0;border-top:0}
@media(max-width:560px){ .vw-form > .vw-frow{grid-template-columns:1fr} }

/* 예약확인 — 입금대기 예약의 대표 입금계좌 (2026-09-30) */
.vm-acct{margin-bottom:14px;color:var(--ink-2)}
.vm-acct b{font-size:17px;color:var(--ink)}
.vm-acct small{color:var(--ink-3)}