/*
  booking-panel.css
  ------------------------------------------------------------
  BOOK 버튼을 누르면 우측(모바일은 하단)에서 열리는 예약 패널.
  실제 예약은 우리 사이트에서 하지 않고 OTA 파트너 사이트로 새 탭 연결만
  해주는 구조라, 안의 파트너 목록은 js/booking-panel.js가
  SITE_CONFIG.bookingPartners를 읽어서 자동으로 그려줍니다.
*/

.booking-overlay{
  position:fixed; inset:0; background:rgba(57,49,32,.5);
  opacity:0; pointer-events:none; transition:opacity .5s var(--ease);
  z-index:198; backdrop-filter:blur(2px);
}
.booking-overlay.show{ opacity:1; pointer-events:auto; }

.booking-panel{
  position:fixed; top:0; right:0; height:100vh; width:min(440px, 92vw);
  background:var(--foam); z-index:199;
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .55s var(--ease);
  box-shadow:-30px 0 60px -20px rgba(57,49,32,.35);
}
.booking-panel.open{ transform:translateX(0); }

/* 모바일 바텀시트 상단 드래그 핸들(데스크탑에서는 숨김) */
.sheet-handle{
  display:none; width:36px; height:4px; border-radius:2px;
  background:var(--line); margin:12px auto 0;
}

.booking-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:28px 32px 18px; flex-shrink:0;
}
.booking-close{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--ink);
  transition:all .3s var(--ease);
}
.booking-close:hover{ background:var(--ink); color:var(--foam); }
.booking-close svg{width:16px; height:16px;}

.booking-scroll{ flex:1; overflow-y:auto; padding:0 32px 24px; }

.booking-intro{ margin-bottom:28px; }
.booking-title{ font-family:var(--font-en-main); font-size:26px; font-weight:700; color:var(--ink); margin-bottom:10px; }
.booking-sub-en{ font-family:var(--font-en-sub); font-size:14px; color:rgba(57,49,32,.7); margin-bottom:4px; }
.booking-sub-kr{ font-family:var(--font-kr); font-size:13px; color:rgba(57,49,32,.55); }

.partner-label{
  font-family:var(--font-en-main); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:rgba(57,49,32,.5); margin-bottom:12px;
}
.partner-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:8px; }
.partner-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; border:1px solid var(--line); border-radius:4px;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.partner-row:hover{ border-color:var(--ink); background:var(--sand); }
.partner-text{ display:flex; flex-direction:column; gap:3px; }
.partner-text strong{ font-family:var(--font-en-main); font-size:15px; font-weight:700; color:var(--ink); }
.partner-text span{ font-family:var(--font-en-sub); font-size:12.5px; color:rgba(57,49,32,.6); }
.ext-icon{ width:16px; height:16px; color:var(--ink); flex-shrink:0; }

.partner-toggle{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding:18px 2px; border-top:1px solid var(--line); margin-top:8px;
  font-family:var(--font-en-main); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; color:var(--ink);
}
.toggle-icon{ width:16px; height:16px; transition:transform .3s var(--ease); }
.partner-toggle[aria-expanded="true"] .toggle-icon{ transform:rotate(45deg); }
.partner-other-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  max-height:0; overflow:hidden; transition:max-height .35s var(--ease);
}
.partner-other-grid.open{ max-height:120px; padding-bottom:6px; }
.partner-pill{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 10px; border:1px solid var(--line); border-radius:4px;
  font-family:var(--font-en-main); font-size:13.5px; font-weight:700; color:var(--ink);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.partner-pill:hover{ border-color:var(--ink); background:var(--sand); }
.partner-pill .ext-icon{ width:13px; height:13px; }

.booking-footer{
  flex-shrink:0; padding:20px 32px 26px; border-top:1px solid var(--line); background:var(--foam);
}
.footer-note{
  font-family:var(--font-en-sub); font-size:12px; line-height:1.7; color:rgba(57,49,32,.55);
  margin-bottom:16px;
}
.footer-help{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:var(--font-kr); font-size:13px; color:var(--ink);
}
.footer-help a{
  font-family:var(--font-en-main); font-weight:700; color:var(--ink);
  border-bottom:1px solid var(--ink); padding-bottom:2px;
}

/* ── 재진입 플로팅 버튼: 패널을 한 번이라도 닫으면 우하단에 노출 ── */
.confirm-stay{
  position:fixed; right:24px; bottom:28px; z-index:96;
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  background:var(--ink); color:var(--foam); padding:14px 22px;
  border-radius:30px; box-shadow:0 18px 34px -14px rgba(57,49,32,.5);
  opacity:0; transform:translateY(16px) scale(.96); pointer-events:none;
  transition:opacity .45s var(--ease), transform .45s var(--ease);
  font-size:11px; color:rgba(255,250,240,0.65); letter-spacing:.02em;
}
.confirm-stay.show{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.confirm-stay span{
  font-family:var(--font-en-main); font-size:16px; color:var(--foam); font-weight:700;
}
.confirm-stay:hover{ background:var(--brass); color:var(--ink); }
.confirm-stay:hover span{ color:var(--ink); }

/* ===== 모바일(640px 이하): 예약 패널이 바텀시트로 전환 ===== */
@media (max-width:640px){
  .confirm-stay{ right:16px; bottom:16px; padding:12px 18px; }
  .booking-scroll{ padding:0 22px 20px; }
  .booking-panel-head{ padding:22px 22px 16px; }
  .booking-footer{ padding:14px 22px; }
  .booking-panel{
    top:auto; bottom:0; left:0; right:0; width:100%;
    height:90vh; max-height:90vh;
    border-radius:20px 20px 0 0;
    transform:translateY(100%);
    box-shadow:0 -20px 50px -20px rgba(57,49,32,.35);
  }
  .booking-panel.open{ transform:translateY(0); }
  .sheet-handle{ display:block; }
}