/* 시안 F — 투어 상세(f/tour.jsp) 전용 (2026-10-13). 공통 모양은 trp-f.css(데모 site.css) 그대로이고, 여기는 운영 예약 폼만의 모양이다.
   예약 폼은 옛 화면과 같은 필드(날짜 달력 모달·옵션별 수량·요청사항)라서 데모 .book(날짜 input·옵션 select·인원 1칸)과 구조가 다르다.
   .book 클래스를 그대로 쓰면 trp-f.js 의 데모 수량·합계 처리가 붙으므로 .tbk 로 같은 모양을 다시 정의한다. */

/* ── 예약 폼(.tbk = 데모 .book 모양) ── */
.tbk { position: sticky; top: calc(var(--header-h) + 16px); border: 1px solid var(--ln); background: var(--bg); border-radius: var(--trp-radius-card); padding: 20px; display: grid; gap: 14px; }
.sheet .tbk { position: static; border: 0; padding: 0; }
/* 예약 박스 스크롤 추종(대표 지시 10-14): trp-f.css 가 .detail 을 align-items:start 로 두어 aside 높이가 박스 높이와 같아 sticky 가 움직일 공간이 없었다.
   aside 를 본문 높이만큼 늘려 박스가 헤더 아래에 머물게 하고, 창이 박스보다 낮으면 박스 안에서 스크롤한다. 1000px 미만(하단 시트)은 .book-panel 이 display:none 이라 영향 없음. */
@media (min-width: 1000px) {
  .detail > .book-panel { align-self: stretch; }
  .book-panel .tbk { max-height: calc(100dvh - var(--header-h) - 32px); overflow-y: auto; }
}
.tbk-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tbk .from { font-size: 14px; color: var(--mu); }
.tbk .from b { display: block; font-size: 28px; color: var(--ink); font-family: var(--trp-serif); font-weight: 500; }
.tbk .from span { font-size: 13px; }
.tbk-x { display: none; margin: -6px -10px 0 0; }
.sheet .tbk-x { display: inline-flex; }
.tbk-lbl { font-size: 13px; font-weight: 600; color: var(--ink); }
.tbk-date { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--ln); border-radius: var(--trp-radius); background: var(--bg); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color var(--press); }
.tbk-date:hover { border-color: var(--br); }
.tbk-date:focus-visible { border-color: var(--br); outline: 2px solid rgba(124,27,40,.18); outline-offset: 0; }
.tbk-date-v { font-variant-numeric: tabular-nums; }
.tbk-cal { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; color: var(--mu); }
.tbk-opts { display: grid; }
.tbk-opts .opt:last-child { border-bottom: 1px solid var(--ln); }
.tbk .opt .sub { font-variant-numeric: tabular-nums; }
.tbk-note { margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--mu); }
.tbk-note b { color: var(--ink); font-weight: 600; }
.tbk-qty { display: inline-flex; align-items: center; border: 1px solid var(--ln); border-radius: 999px; }
.tbk-qty button { width: 40px; height: 40px; border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; border-radius: 999px; color: var(--ink); user-select: none; -webkit-user-select: none; transition: transform var(--press) var(--ease-out), background-color var(--press); }
.tbk-qty button:active { transform: scale(0.9); background: var(--sf); }
.tbk-qty .count { width: 30px; min-height: 0; padding: 0; border: 0; background: transparent; text-align: center; font: inherit; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.tbk-qty .count:focus { outline: 2px solid rgba(124,27,40,.25); border-radius: 4px; }
.tbk-guest { display: grid; gap: 8px; }
.tbk-guest-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.tbk-guest-row span { color: var(--mu); }
.tbk-guest-row strong { min-width: 0; overflow-wrap: anywhere; text-align: right; font-weight: 600; color: var(--ink); }
.tbk-guest .field { margin-top: 4px; }
.tbk-guest .field textarea { min-height: 84px; }
.tbk-guest .field small { font-weight: 400; color: var(--mu); }
.tbk-noopt { font-size: 14px; color: var(--mu); }
.tbk .total b { font-variant-numeric: tabular-nums; }
.tbk .reserve-btn.inactive { opacity: 1; }
/* 결제 전 확인 요약(옛 화면 #trpSummary): 날짜나 인원을 고른 뒤에만 */
.trp-summary { display: none; gap: 4px; padding: 10px 12px; border-radius: var(--trp-radius); background: var(--sf); font-size: 13px; color: var(--mu); }
.trp-summary.on { display: grid; }
.trp-summary strong { color: var(--ink); font-weight: 600; }
.trp-summary-sep { margin: 0 6px; color: var(--ln); }
/* 사진이 하나도 없을 때 */
.ft-noimg .pg-slide img { object-fit: contain; background: var(--sf); }

/* ── jquery.modal 을 시트 위에 ── */
.f-tour .blocker { z-index: 1000; }

/* ── 로그인 모달(옛 화면 #trpLoginModal, 모양만 시안 F) ── */
.blocker .modal.trp-login-modal { width: min(100%, 420px); max-width: 420px; padding: 28px 24px 24px; }
.trp-login-modal form { display: grid; gap: 14px; }
.trp-login-modal .modal-txt { padding-right: 32px; }
.trp-login-close { position: absolute; top: 10px; right: 10px; }
.trp-login-google { width: 100%; }
.trp-login-err { font-size: 13px; color: var(--err); }
.trp-login-links { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.trp-login-links a { color: var(--br); text-decoration: underline; text-underline-offset: 3px; }

/* ── 날짜·시간 달력 모달(옛 화면 itemCalModal*.jsp 마크업 그대로, 모양만 시안 F) ── */
.blocker .modal.modal-Calendar { width: min(100%, 720px); max-width: 720px; padding: 22px 22px 24px; }
.modal-Calendar .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.modal-Calendar .modal-top { position: absolute; top: 10px; right: 10px; }
.modal-Calendar .modal__close { width: 44px; height: 44px; min-height: 0; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; position: relative; }
.modal-Calendar .modal__close::before, .modal-Calendar .modal__close::after { content: ""; position: absolute; left: 12px; right: 12px; top: 21px; height: 2px; border-radius: 1px; background: var(--ink); transform: rotate(45deg); }
.modal-Calendar .modal__close::after { transform: rotate(-45deg); }
.modal-Calendar .modal__close:hover { background: var(--sf); }
.modal-Calendar .modal-top2 { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-right: 44px; margin-bottom: 18px; }
.modal-Calendar .modal-tit h3 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--br); }
.modal-Calendar .modal-tit i { display: none; }
.modal-Calendar .modal-txt { margin-top: 4px; font-family: var(--trp-serif); font-size: 21px; font-weight: 500; color: var(--ink); }
.modal-Calendar .modal-sel { flex: 0 0 auto; min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--br); color: #fff; font: inherit; font-weight: 700; cursor: pointer; transition: transform var(--press) var(--ease-out); }
.modal-Calendar .modal-sel:active { transform: scale(0.97); }
.modal-Calendar .modal-cont { display: grid; gap: 20px; }
@media (min-width: 640px) { .modal-Calendar .modal-cont { grid-template-columns: minmax(0, 1fr) 200px; } }
.modal-Calendar .calendar_nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.modal-Calendar .calendar_nav span { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.modal-Calendar .calendar_nav a { width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); text-decoration: none; }
.modal-Calendar .calendar_nav a:hover { background: var(--sf); }
.modal-Calendar .calendar_nav a::before { content: ""; width: 9px; height: 9px; border: solid currentColor; border-width: 0 0 2px 2px; transform: translateX(2px) rotate(45deg); }
.modal-Calendar .calendar_nav a.next::before { transform: translateX(-2px) rotate(-135deg); }
.modal-Calendar table.ct { width: 100%; border-collapse: collapse; table-layout: fixed; }
.modal-Calendar .ct th { padding: 6px 0; font-size: 12px; font-weight: 600; color: var(--mu); text-align: center; }
.modal-Calendar .ct td { padding: 2px 0; text-align: center; vertical-align: top; }
.modal-Calendar .ct_wrap { display: flex; flex-direction: column; align-items: center; }
.modal-Calendar .ct_day { width: 40px; height: 40px; max-width: 100%; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 14px; color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; transition: background-color var(--press); }
.modal-Calendar .ct_day[onclick^="fnSelectDate"]:hover { background: var(--sf); }
.modal-Calendar .ct_day[onclick^="alert"] { cursor: not-allowed; }
.modal-Calendar .ct_today .ct_day { box-shadow: inset 0 0 0 1px var(--ln); }
.modal-Calendar .ct_day.active { background: var(--br) !important; color: #fff !important; font-weight: 700; }
.modal-Calendar .ct_skd { display: none; }
.modal-Calendar .date-tit { margin-bottom: 10px; font-size: 13px; font-weight: 700; color: var(--ink); }
.modal-Calendar .date-list ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.modal-Calendar .date-list li { list-style: none; }
.modal-Calendar .date-list input { position: absolute; opacity: 0; pointer-events: none; }
.modal-Calendar .date-list label { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--ln); border-radius: 999px; font-size: 14px; color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.modal-Calendar .date-list input:checked + label { border-color: var(--br); background: var(--br); color: #fff; font-weight: 600; }
.modal-Calendar .date-list input:focus-visible + label { outline: 2px solid rgba(124,27,40,.35); outline-offset: 2px; }
.modal-Calendar .date-list ul:empty::before { content: "No times for this tour yet."; font-size: 13px; color: var(--mu); }
html[data-theme=dark] .blocker .modal.modal-Calendar .modal-sel, html[data-theme=dark] .modal-Calendar .ct_day.active { color: #fff; }
@media (max-width: 559px) {
  .blocker .modal.modal-Calendar { padding: 18px 14px 18px; }
  .modal-Calendar .modal-top2 { flex-direction: column; align-items: stretch; }
  .modal-Calendar .modal-sel { order: 2; }
}