/* 모바일 상세 하단 예약 바 — 마크업은 book-bar.js render(), 표시 여부는 book-bar.js init().
   데스크톱(>700px)에서는 헤더 예약 버튼(site-shell)이 대신하므로 숨긴다. */
.book-bar { display: none; }

@media (max-width:700px) {
  .book-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900; /* 헤더(1000)보다 낮게, 예약·상담 dialog는 최상위 층이라 늘 위에 뜬다 */
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(23, 42, 70, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
  }
  .book-bar.is-visible {
    transform: none;
    visibility: visible;
    transition: transform .2s ease;
  }
  .book-bar-button {
    display: block;
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    background: var(--accent-orange, #E8622C);
    color: var(--primary-navy, #172A46);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
  }
  /* 바가 맨 아래 내용(푸터)을 가리지 않게 여백을 둔다. */
  body:has(.book-bar) { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}

@media (max-width:700px) and (prefers-reduced-motion: reduce) {
  .book-bar, .book-bar.is-visible { transition: none; }
}