@charset "utf-8";

/* B8 — 예약 폼 / 체크아웃 (bk_on 오버레이)
   마크업: shop/direct_form/renewalBookForm.php · 동작: js/Item/itemBookForm.js
   규격 참조: .claude/skills/style/item-detail-page.md

   구조·정보위계는 기획팀 프로토타입(#checkoutView)을 따르고, 비주얼은 리뉴얼 전용으로 새로 잡는다.
   프로토타입의 8px 회색 띠 구분을 버리고 연회색 지면 위 카드 스택으로 간다 — 레거시 폼과 한눈에 구분된다.
   쿠폰·포인트·결제수단은 이 화면 범위 밖(기존 결제 경로 유지). */

/* ===== 전체 화면 오버레이 =====
   폭·위치는 폼이 스스로 정한다. 호출부(bk_on 옵션)가 3곳이라 제각각이었고, 기본 분기가 박는 인라인
   transform 은 자식의 position:fixed 까지 무력화시킨다 — itemBookForm.js 가 인라인을 걷어내고
   이 클래스를 붙인다. 선택자 (1,1,0) 이 style.css:1082 `div#…{max-width:1000px}` (1,0,1) 을 이긴다. */
#item_book_area_setdate_div.item-book-form-overlay {
    position: fixed;
    inset: 0;
    z-index: 400;
    max-width: none;
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: var(--tp-bg);
    overflow: hidden;
    transform: none;
}

/* ⚠ `form_multi.php:168` 의 인라인 <style> 이 `#item_book_area_setdate_form{max-width:760px; margin:0 auto}`
   를 건다. 그 파일은 저장 필드·setprice 보존용으로 `.item-book-form__cost-src`(display:none) 안에
   include 되는데, **display:none 은 마크업만 숨길 뿐 <style> 규칙은 문서 전역에 그대로 적용된다.**
   레거시 파일은 무수정 원칙이라 여기서 덮는다. */
form#item_book_area_setdate_form.item-book-form-on {
    max-width: none;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--tp-bg);
    color: var(--tp-text);
    font-family: var(--tp-font);
    /* ⚠ 여기에 transform 계열(animation 의 transform 포함)을 절대 넣지 말 것.
       이 폼은 overflow-y:auto 스크롤 컨테이너이고 그 안에 `#btn_small_bx{position:fixed}`(모바일 하단 바)가
       있다. transform 이 걸리면 이 요소가 fixed 의 containing block 이 되어 하단 바가 뷰포트가 아니라
       "스크롤 콘텐츠 최하단" 기준으로 계산돼 콘텐츠 중간에 걸쳐 보인다.
       진입 모션은 opacity 로만 주고, 상승 효과는 fixed 자식이 없는 .item-book-form__main 에 건다. */
    animation: item-book-form-fade .2s ease-out both;
}

/* 폼은 상세와 같은 서체(--tp-font)를 쓴다 — 오버레이 컨테이너(#item_book_area_setdate_div)가 .item-detail 루트 밖에 있어
   상속받지 못하므로 폼에 직접 건다(위 규칙). 폼 컨트롤은 부모 폰트를 상속하지 않고
   브라우저 기본 폰트(Windows Chrome = Arial)로 그려지므로 따로 상속시킨다. */
form#item_book_area_setdate_form.item-book-form-on button,
form#item_book_area_setdate_form.item-book-form-on input,
form#item_book_area_setdate_form.item-book-form-on select,
form#item_book_area_setdate_form.item-book-form-on textarea {
    font-family: inherit;
}

@keyframes item-book-form-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes item-book-form-rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    form#item_book_area_setdate_form.item-book-form-on,
    .item-book-form__main { animation: none; }
}

/* ===== 상단 바 — 지면 전체 폭, 내용만 1180 정렬 ===== */
.item-book-form__top {
    position: sticky;
    top: 0;
    z-index: 5;
    border-bottom: 1px solid var(--tp-line);
    background: #fff;
    /* 앱 웹뷰 상단 세이프존 — 오버레이가 화면 최상단에 붙는다 */
    padding-top: calc(var(--safeAreaTop2, 0px));
    padding-top: calc(var(--safeAreaTop1, 0px));
}

.item-book-form__top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1180px;
    height: 62px;
    margin: 0 auto;
    padding: 0 20px;
}

.item-book-form__title {
    color: var(--tp-text);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.item-book-form__x {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #666;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    transition: background .16s, color .16s;
}

.item-book-form__x:hover { background: var(--tp-bg); color: var(--tp-text); }
.item-book-form__x:focus-visible { outline: 2px solid var(--tp-blue); outline-offset: 2px; }

/* ===== 2단 레이아웃 ===== */
.item-book-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 30px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 26px 20px 90px;
}

.item-book-form__main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    /* transform 을 써도 안전한 자리 — 이 안에는 position:fixed 자식이 없다 */
    animation: item-book-form-rise .24s ease-out both;
}

/* ===== 섹션 카드 ===== */
.item-book-form__sec {
    padding: 24px 20px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(20, 30, 55, .04);
}

.item-book-form__sec h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    color: var(--tp-text);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    border-left:0 !important;
    padding-left:0 !important;
}

/* 섹션 제목 액센트 바 — 번호 매김 대신. 예약폼 섹션은 필수·선택이 섞여 순서가 정보가 아니다 */
.item-book-form__sec h3::before {
    content: "";
    flex: 0 0 auto;
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--tp-blue);
}

/* ===== 상품 요약 ===== */
.item-book-form__prod {
    display: flex;
    gap: 16px;
}

.item-book-form__prod-thumb {
    flex-shrink: 0;
    width: 88px;
    height: 88px;
    border-radius: 12px;
    object-fit: cover;
}

.item-book-form__prod-thumb--empty { background: var(--tp-bg); }

.item-book-form__prod-name {
    color: var(--tp-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -.3px;
}

.item-book-form__prod-meta {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.6;
}

.item-book-form__prod-meta p {
    margin: 0;
    color: #55606f;
}

.item-book-form__prod-meta b {
    margin-right: 8px;
    color: var(--tp-text);
    font-weight: 500;
}

/* 요금이 만료·삭제된 라인 안내 — 라인 바로 아래 한 줄 */
.item-book-form__prod-unavail {
    display: block;
    color: var(--tp-sun);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
}

/* ===== 입력 필드 ===== */
.item-book-form__field { margin-bottom: 16px; }
.item-book-form__field--last { margin-bottom: 0; }

.item-book-form__field > label {
    display: block;
    margin: 8px 0;
    color: var(--tp-gray);
    font-size: 13px;
    font-weight: 500;
}

.item-book-form__field > label b { color: var(--tp-sun); }

.item-book-form__field input[type="text"],
.item-book-form__field input[type="date"],
.item-book-form__field select,
.item-book-form__field textarea,
.item-book-form__inline-input {
    width: 100%;
    height: auto;
    padding: 12px 8px;
    border: 1px solid #ccd2db;
    border-radius: 8px;
    background: #fff;
    color: var(--tp-text);
    font-family: inherit;
    font-size: 14px;
    transition: border-color .16s, box-shadow .16s;
}

.item-book-form__field textarea {
    min-height: 92px;
    line-height: 1.7;
    resize: vertical;
}

/* `style.css:2927` 이 `#item_book_area_setdate_form_misc` 를 id 로 잡아 폭·높이를 고정한다 (1,0,0).
   레거시는 `book_setdate_direct.php:672` 가 뒤에서 덮었는데 그 <style> 블록을 리뉴얼에서 게이팅했으므로
   여기서 다시 명시한다. */
.item-book-form__field #item_book_area_setdate_form_misc {
    padding: 12px 8px;
    width: 100%;
    max-width: none;
    min-height: 110px;
    height: auto;
}

.item-book-form__field input:focus,
.item-book-form__field select:focus,
.item-book-form__field textarea:focus,
.item-book-form__inline-input:focus {
    border-color: var(--tp-blue);
    outline: 0;
    box-shadow: 0 0 0 3px var(--tp-blue-tint);
}

.item-book-form__row2 { display: flex; gap: 12px; }
.item-book-form__row2 > .item-book-form__field { flex: 1; min-width: 0; }

/* 휴대폰·이메일은 여러 입력이 한 줄 */
.item-book-form__phone,
.item-book-form__email,
.item-book-form__time {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* 이메일은 '기타' 선택 시 도메인 직접입력이 하나 더 열린다 — 좁아지면 줄바꿈으로 폭을 확보한다 */
.item-book-form__email { flex-wrap: wrap; }
.item-book-form__email > input { flex: 1 1 130px; width: auto; }
.item-book-form__at { flex: 0 0 auto; }

/* 폭을 고정하지 않는다 — 앱 웹뷰의 네이티브 select 화살표가 데스크톱보다 넓어
   고정 84px 에서는 `010` 이 `01` 로 잘린다. 내용 기준으로 맡기고 최소폭만 보장한다.
   ⚠ `flex-basis:auto` 는 `width` 를 따르므로 base 규칙(:221 `width:100%`)을 함께 되돌려야 한다. */
.item-book-form__phone select { flex: 0 0 auto; width: auto; min-width: 84px; }
.item-book-form__time select { flex: 0 1 88px; }
.item-book-form__phone input,
.item-book-form__email input { min-width: 0; }
.item-book-form__email select { flex: 0 1 140px; }
.item-book-form__at { color: var(--tp-gray); }

/* `style.css:2922` 가 이 네 개 id 에 `width:48px` 를 건다 (1,0,0).
   레거시는 `book_setdate_direct.php:611` 이 덮었는데 그 <style> 블록을 리뉴얼에서 게이팅했으므로 재선언한다. */
.item-book-form__phone #item_book_area_setdate_form_orderer_mobile2,
.item-book-form__phone #item_book_area_setdate_form_orderer_mobile3,
.item-book-form__phone #item_book_area_setdate_form_orderer_phone2,
.item-book-form__phone #item_book_area_setdate_form_orderer_phone3 {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    text-align: left;
}

/* ===== 예약자 정보 (읽기 전용) ===== */
.item-book-form__person {
    padding: 12px 16px;
    border: 1px solid var(--tp-line);
    border-radius: 12px;
    background: #fbfcfd;
    color: var(--tp-text);
    font-size: 14px;
}

.item-book-form__person p {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0;
    padding: 8px 0;
}

.item-book-form__person b {
    color: var(--tp-gray);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .3px;
}

.item-book-form__dot { color: var(--tp-line); }

.item-book-form__person .item-book-form__inline-input {
    width: auto;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
}

/* 카카오 ID 는 그 줄에 혼자 오므로 남는 폭을 전부 차지하게 둔다 */
.item-book-form__person #item_book_area_setdate_form_orderer_msgid {
    flex: 1 1 auto;
    min-width: 220px;
    max-width: none;
}

.item-book-form__person .item-book-form__phone select,
.item-book-form__person .item-book-form__phone input {
    width: auto;
    min-width: 66px;
    padding: 6px 10px;
    border: 1px solid #ccd2db;
    border-radius: 8px;
    font-size: 13px;
}

/* 예약자 카드는 padding·font 가 더 작아 앱 웹뷰에서 특히 잘린다 — 통신사 select 만 최소폭을 올린다 */
.item-book-form__person .item-book-form__phone select { min-width: 78px; }

/* 예약자 정보 카드는 한 줄에 여러 항목이 오므로 늘리지 않고 최소폭만 확보한다
   (바로 위 여행자 정보용 flex 규칙과 특이도가 같아 순서로 이긴다) */
.item-book-form__person #item_book_area_setdate_form_orderer_mobile2,
.item-book-form__person #item_book_area_setdate_form_orderer_mobile3 {
    flex: 0 1 auto;
    min-width: 78px;
}

.item-book-form__hint {
    margin: 10px 0 0;
    color: var(--tp-gray);
    font-size: 13px;
    line-height: 1.6;
}

/* ===== 여행자 정보 ===== */
.item-book-form__trav-head {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--tp-sun);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.item-book-form__trav-head input { accent-color: var(--tp-sun); }

.item-book-form__trav {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--tp-line);
    border-radius: 12px;
    background: #fbfcfd;
}

/* ===== 취소·환불 규정 ===== */
.item-book-form__refund {
    padding: 16px;
    border: 1px solid var(--tp-warn-line);
    border-radius: 12px;
    background: var(--tp-warn-bg);
    color: var(--tp-warn-text);
    font-size: 13px;
    line-height: 1.6;
}

.item-book-form__refund-agree {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 16px;
    color: var(--tp-sun);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    cursor: pointer;
}

.item-book-form__refund-agree input {
    margin-top: 3px;
    accent-color: var(--tp-sun);
}

/* ===== 우측 결제 카드 ===== */
.item-book-form__aside {
    position: sticky;
    top: 86px;
    align-self: start;
}

.item-book-form__pay-box {
    padding: 20px;
    border: 1px solid var(--tp-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(20, 30, 55, .06);
}

.item-book-form__pay-box * { box-sizing: border-box; }

.item-book-form__pay-title {
    margin: 0 0 16px;
    color: var(--tp-text);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.3px;
}

.item-book-form__pay-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    color: #55606f;
    font-size: 14px;
}

.item-book-form__pay-line b {
    color: var(--tp-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.item-book-form__pay-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--tp-line);
}

.item-book-form__pay-total-label {
    color: var(--tp-text);
    font-size: 15px;
    font-weight: 500;
}

.item-book-form__pay-total #item_book_area_setdate_form_priceview,
.item-book-form__pay-total-amount {
    color: var(--tp-blue);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.5px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.item-book-form__price-source { display: none; }

/* 현장 잔금(예약금 상품) — 총액 아래 독립 안내 박스 */
.item-book-form__pay-box .balancePrice {
    display: block;
    margin-top: 12px;
    padding: 8px 12px;
    border: 1px solid var(--tp-warn-line);
    border-radius: 8px;
    background: var(--tp-warn-bg);
    color: var(--tp-warn-text);
    font-size: 14px;
    font-weight: 500;
}

/* 약관 동의 */
.item-book-form__agree {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--tp-line);
}

.item-book-form__agree-all {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
    color: var(--tp-text);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

/* 행 간격은 프로토타입 `.co-agree .it{padding:5px 0}` 규격이 정본이다.
   상세보기 `›` 버튼은 프로토타입에 없는 추가 요소라 버튼 높이만큼 약관 3줄이 벌어지지 않도록
   PC는 28px, 모바일은 32px 행 안에서 밀도를 유지한다(모바일 규칙은 이 파일 하단 참조). */
.item-book-form__agree-row {
    display: flex;
    align-items: center;
}

.item-book-form__agree-it {
    display: flex;
    flex: 1 1 auto;
    gap: 8px;
    align-items: center;
    min-width: 0;
    padding: 5px 0;
    color: color-mix(in srgb, var(--tp-text) 74%, var(--tp-gray));
    font-size: 13px;
    cursor: pointer;
}

.item-book-form__agree input { accent-color: var(--tp-blue); }

.item-book-form__agree-view {
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--tp-disabled);
    font: inherit;
    font-size: 30px;
    font-weight: 300;
    cursor: pointer;
}

.item-book-form__agree-view:hover { color: var(--tp-blue); }
.item-book-form__agree-view:focus-visible { outline: 2px solid var(--tp-blue); outline-offset: -4px; }

/* 모바일 약관 3행은 한 덩어리로 읽히도록 간격을 압축한다. 44px 행 강제는 제거한다.
   ⚠ 전체 동의도 같은 행 높이로 묶는다 — `margin-bottom` 으로 띄우면 전체 동의↔첫 줄만
   간격이 좁아진다(margin + 행 여백 대 행 여백 + `.it` padding 양쪽).
   행 높이를 단일 단위로 두면 세 줄의 리듬이 32px 로 일정해진다.
   ⚠ 화살표 버튼은 **높이만** 행에 맞추고 너비 38px 은 유지한다 — 세로를 좁히면서
   가로 탭 영역까지 줄이면 누르기 어려워진다. `.it` 은 28px 라 32px 행 안에 그대로 들어간다. */
@media (max-width: 780px) {
    .item-book-form__agree-all,
    .item-book-form__agree-row { min-height: 32px; }

    .item-book-form__agree-all { margin-bottom: 0; }

    .item-book-form__agree-view {
        flex: 0 0 38px;
        width: 38px;
        height: 32px;
    }
    .item-book-form__refund-agree {font-size: 13px; align-items: start;}
}

/* ===== 결제 섹션 (즉시결제 상품 전용 · 2026-09-10 기획팀 QA 3차) =====
   섹션 카드 규격은 `.item-book-form__sec` 을 그대로 쓰고 내부 요소만 정의한다.
   문구·판정은 결제 페이지(`payment_book.php`)와 같은 소스라 여기서는 표현만 담당한다. */

.item-book-form__pay-notice {
    margin: 0;
    color: #555;
    font-size: 15px;
    line-height: 1.7;
}

.item-book-form__pay-notice li + li { margin-top: 6px; }

.item-book-form__coupon-picked,
.item-book-form__coupon-empty,
.item-book-form__pay-empty {
    margin-top: 8px;
    color: var(--tp-gray);
    font-size: 13px;
}

.item-book-form__coupon-item {
    display: flex;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 8px;
    padding: 8px 12px;
    border: 1px solid var(--tp-line);
    border-radius: 8px;
    background: var(--tp-bg);
    font-size: 13px;
}

/* 고른 쿠폰 줄 — select 아래에 여러 장이 쌓인다(레거시와 같은 복수 사용) */
.item-book-form__coupon-item span {
    flex: 1 1 auto;
    min-width: 0;
}

.item-book-form__coupon-del {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--tp-gray);
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.item-book-form__coupon-del:hover { background: #fff; color: var(--tp-sun); }

/* 쿠폰 select — 폼 필드 규격을 그대로 쓴다(프로토타입 `.co-field`) */
.item-book-form__coupon select {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--tp-line);
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
    font-size: 14px;
}

.item-book-form__coupon select:disabled { background: var(--tp-bg); color: var(--tp-gray); }

.item-book-form__point-have {
    color: var(--tp-text);
    font-size: 15px;
    letter-spacing: -0.02em;
}

.item-book-form__point-have b {
    color: var(--tp-blue);
    font-variant-numeric: tabular-nums;
}

.item-book-form__point-input {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}

.item-book-form__point-input input {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--tp-line);
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.item-book-form__point-input input:focus { border-color: var(--tp-blue); outline: 0; }

.item-book-form__point-all {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--tp-line);
    border-radius: 8px;
    background: #fff;
    color: var(--tp-text);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.item-book-form__point-all:hover { background: var(--tp-bg); }

.item-book-form__point-note {
    margin: 10px 0 0;
    color: var(--tp-gray);
}
.item-book-form__point-note li {font-size: 13px; line-height: 1.6;}

.item-book-form__pay-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.item-book-form__pay-method {
    display: flex;
    gap: 8px;
    align-items: center;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid var(--tp-line);
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.item-book-form__pay-method input { accent-color: var(--tp-blue); }

/* 선택 상태는 라디오가 아니라 카드 전체로 보여준다.
   `:has()` 대신 JS 가 `--on` 을 토글한다 — 구형 앱 WebView 는 `:has()` 를 만나면 규칙 전체를 버린다. */
.item-book-form__pay-method--on {
    border-color: var(--tp-blue);
    background: var(--tp-blue-tint);
    font-weight: 700;
}

/* 즉시결제가 아니면 할인 줄을 내지 않는다 — 쿠폰·포인트를 고를 자리가 없다 */
.item-book-form__pay-line--off { display: none; }

@media (max-width: 540px) {
    .item-book-form__pay-methods { grid-template-columns: minmax(0, 1fr); }
}

/* CTA — #btn_small_bx · div.posi · input[type=submit] 은 레거시 제출 계약이라 구조를 유지한 채 스타일만 잡는다.
   덮어야 하는 레거시 규칙:
     · style.css:4300 `#btn_small_bx > div{width:70px; height:30px; overflow:hidden}` — 버튼 상자가 70×30 으로 고정된다
     · style.css:4307 `#btn_small_bx > div.posi{background:#3c3c3c}`
     · form_multi.php:169 `#btn_small_bx{max-width:760px; margin:0 auto}`
   (`book_setdate_direct.php` 의 `form#… div#btn_small_bx{position:absolute}` (2,0,2) 는 리뉴얼 분기에서 게이팅했다) */
.item-book-form__pay-box #btn_small_bx {
    position: static;
    display: block;
    max-width: none;
    /* 프로토타입 `.co-pay-btn{margin-top:14px}` — 약관 마지막 줄과 CTA 사이 간격 */
    margin: 14px 0 0;
}

.item-book-form__pay-box #btn_small_bx > div.posi {
    width: 100%;
    height: auto;
    border-radius: 12px;
    background: none;
    overflow: visible;
}

.item-book-form__bar-amt { display: none; }

/* 프로토타입 `.co-pay-btn` 은 상세 CTA `.btn-book` 과 동일 선언이다 — 두 화면의 CTA 가
   달라 보이지 않게 radius 12 / padding 15 / 16px / 700 을 그대로 맞춘다. */
.item-book-form__pay-box #btn_small_bx .posi input[type="submit"] {
    width: 100%;
    height: auto;
    padding: 16px;
    border: 0;
    border-radius: 8px;
    background: var(--tp-hotel-blue) !important;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background .16s;
}

.item-book-form__pay-box #btn_small_bx .posi input[type="submit"]:hover { background: var(--tp-blue-dark); }
.item-book-form__pay-box #btn_small_bx .posi input[type="submit"]:focus-visible { outline: 2px solid var(--tp-blue); outline-offset: 3px; }

.item-book-form__pay-box #btn_small_bx .posi input[type="submit"]:disabled {
    background: var(--tp-disabled) !important;
    cursor: not-allowed;
}

/* 필수 약관 미동의 — `disabled` 대신 이 클래스를 쓴다. 잠긴 input 은 클릭 이벤트를 내지 않아
   사유를 안내할 수 없기 때문이다(itemBookForm.js `syncSubmit`). 시각 표시만 담당한다. */
.item-book-form__pay-box #btn_small_bx .posi input[type="submit"].item-book-form__submit--pending {
    background: var(--tp-disabled) !important;
}

/* style.css:2873 이 `#item_book_area_setdate_form table{width:920px; table-layout:fixed}` 로 폼 안 모든
   테이블 폭을 고정한다. 리뉴얼은 2단 그리드라 이 값이 남으면 좌측 컬럼을 밀어낸다(여권 폼 등). */
form#item_book_area_setdate_form.item-book-form-on table {
    width: 100%;
    margin: 0;
    border-top: 0;
    table-layout: auto;
}

/* ===== 요금 선택 UI (숨김) =====
   옵션·인원은 상세 화면에서 확정된다. 이 폼에서는 다시 고르지 않고 요약만 보여주지만,
   저장 필드와 금액 계산(setprice)이 레거시 요금 폼 안에 있어 DOM 은 유지한 채 감춘다. */
.item-book-form__cost-src { display: none; }

/* ===== 모바일 — 1단 + 하단 고정 결제 바 ===== */
@media (max-width: 980px) {
    .item-book-form {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px 14px 112px;
    }

    .item-book-form__aside { position: static; }

    .item-book-form__pay-box { padding-bottom: 18px; }

    .item-book-form__pay-box #btn_small_bx {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
        display: flex;
        gap: 12px;
        align-items: center;
        max-width: none;
        margin: 0;
        padding: 12px 16px;
        border-top: 1px solid var(--tp-line);
        background: #fff;
        box-shadow: 0 -4px 18px rgba(20, 30, 55, .09);
        /* 홈 인디케이터 세이프존 */
        padding-bottom: calc(var(--safeAreaBottom2, 0px) + 12px);
        padding-bottom: calc(var(--safeAreaBottom1, 0px) + 12px);
    }

    .item-book-form__bar-amt {
        display: block;
        flex: 1 1 auto;
        color: var(--tp-blue);
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -0.02em;
        font-variant-numeric: tabular-nums;
    }

    .item-book-form__pay-box #btn_small_bx > div.posi { flex: 0 0 54%; width: auto; }
    .item-book-form__pay-box--instant #btn_small_bx > div.posi { flex-basis: 100%; }
}

@media (max-width: 780px) {
    .item-book-form__top-inner { height: 56px; padding: 0 14px; }
    .item-book-form__sec { padding: 24px 16px; border-radius: 16px;}
    .item-book-form__row2 { flex-direction: column; gap: 0; }
    .item-book-form__row2 > .item-book-form__field { margin-bottom: 14px; }
    .item-book-form__prod-thumb { width: 72px; height: 72px; }

    .item-book-form__pay-total-amount {font-size: 20px;}
    .item-book-form__pay-total {padding-top: 12px;}
    .item-book-form__agree {padding-top: 12px;}
}

@media (max-width: 540px) {
    .item-book-form__person p { gap: 5px; }
    .item-book-form__dot { display: none; }
    .item-book-form__person .item-book-form__inline-input { min-width: 140px; }
}

/* D-09 부가옵션(optc) — 옵션명과 금액·수량을 두 줄로 분리해 긴 이름도 같은 흐름을 유지한다. */
.item-book-form__opt {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--tp-line);
    font-size: 14px;
    cursor: pointer;
}

.item-book-form__opt:last-child { border-bottom: 0; padding-bottom: 0; }
.item-book-form__opt--fixed { cursor: default; }

.item-book-form__opt > input[type="checkbox"] { flex: 0 0 auto; margin: 2px 0 0; }

.item-book-form__opt-body {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
}

.item-book-form__opt-name {
    display: block;
    color: var(--tp-text);
    font-weight: 500;
}

.item-book-form__opt-meta {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.item-book-form__opt-price {
    flex: 0 0 auto;
    color: var(--tp-sun);
    font-weight: 500;
}

.item-book-form__opt-fixed-note {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 8px;
    background: var(--tp-bg);
    color: var(--tp-gray);
    font-size: 11px;
    font-weight: 700;
}

.item-book-form__opt-qty-label {
    color: var(--tp-text);
    font-size: 13px;
}

.item-book-form__opt-subtotal {
    color: var(--tp-text);
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

input.item-book-form__opt-qty {
    flex: 0 0 auto;
    width: 62px;
    padding: 6px 8px;
    border: 1px solid var(--tp-line);
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
}

input.item-book-form__opt-qty:disabled { background: var(--tp-bg); color: var(--tp-disabled); }

.item-book-form__opt-info {
    display: block;
    color: var(--tp-gray);
    font-size: 13px;
}

/* 이용 정보의 라디오 선택 — 투어 시간(`tourTimeRadio`) · 라운지 픽업/샌딩 항공편.
   값이 짧고 개수가 2~4개라 칩 한 줄이 select 보다 읽기 쉽고 탭하기 쉽다.
   선택 상태는 radio 자체(`accent-color`)가 이미 표시하므로 `:has()` 배경은 보조 강조일 뿐이다. */
.item-book-form__choice {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.item-book-form__choice-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid #ccd2db;
    border-radius: 8px;
    background: #fff;
    color: var(--tp-text);
    font-size: 14px;
    cursor: pointer;
    transition: border-color .16s, background .16s;
}

.item-book-form__choice-item input[type="radio"] {
    margin: 0;
    accent-color: var(--tp-blue);
}

.item-book-form__choice-item:hover { border-color: var(--tp-blue); }
.item-book-form__choice-item:focus-within { border-color: var(--tp-blue); box-shadow: 0 0 0 3px var(--tp-blue-tint); }

.item-book-form__choice-item:has(input:checked) {
    border-color: var(--tp-blue);
    background: var(--tp-blue-tint);
    font-weight: 700;
}

/* 호텔 연장숙박 — 현재 투숙 중인 객실 번호(`add2[2]`). `연장숙박` 을 골랐을 때만 보인다(itemBookForm.js initExtendRoom).
   레거시 id 규칙(PC `css/style.css` width 96px · 모바일 `m_/style.css` width 72px·padding·테두리)이
   필드 공통 입력 규칙을 특이도로 이기므로 id 를 함께 걸어 되돌린다. */
.item-book-form__extend-room { margin: 10px 0 0; }
.item-book-form__extend-room[hidden] { display: none; }

.item-book-form__extend-room #item_book_area_setdate_form_add2_2 {
    box-sizing: border-box;
    width: 100%;
    max-width: 320px;
    padding: 12px;
    border: 1px solid #ccd2db;
    border-radius: 8px;
    font-size: 14px;
}

.item-book-form__extend-room #item_book_area_setdate_form_add2_2:focus { border-color: var(--tp-blue); }

/* readonly 로 잠긴 샌딩장소(`sending_place_check_id`)는 편집 불가임이 보여야 한다 */
.item-book-form__field input[readonly] {
    background: var(--tp-bg);
    color: var(--tp-gray);
}

/* 여행자 명단(use6[4~6]) — 프로토타입에 정본 화면이 없어 신규 설계다.
   인원 유형별 그룹 헤더 + 사람 단위 행 반복. 행을 다시 카드로 만들지 않는다 —
   섹션 카드 안에 카드를 겹치면 스택 위계가 무너진다(부가옵션과 같은 규칙). */
/* h3 가 이미 14px 를 벌어 두므로 안내문은 위 여백을 더하지 않는다 */
.item-book-form__entry-sec > .item-book-form__hint { margin-top: 0; }

.item-book-form__entry-group { margin-top: 18px; }
.item-book-form__entry-group:first-of-type { margin-top: 14px; }

.item-book-form__entry-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--tp-line);
}

.item-book-form__entry-type {
    font-size: 15px;
    font-weight: 600;
    color: var(--tp-text);
}

/* 최대 20명까지 늘어나는 반복 입력에서 사용자가 잃는 것은 '어디까지 채웠는가' 하나다.
   진행 카운터가 이 섹션의 유일한 강조 요소이고, 장식이 아니라 정보다. */
.item-book-form__entry-count {
    flex: 0 0 auto;
    color: var(--tp-gray);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.item-book-form__entry-count b { color: var(--tp-blue); }

.item-book-form__entry-group--done .item-book-form__entry-count { color: var(--tp-blue); }

.item-book-form__entry-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.item-book-form__entry {
    display: flex;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--tp-line);
}

.item-book-form__entry:last-child { border-bottom: 0; padding-bottom: 0; }

/* 라벨 한 줄(11.5px + margin 6px) 만큼 내려 첫 입력칸과 눈높이를 맞춘다 */
.item-book-form__entry-no {
    flex: 0 0 22px;
    height: 22px;
    margin-top: 40px;
    border-radius: 50%;
    background: var(--tp-bg);
    color: var(--tp-gray);
    font-size: 12px;
    font-weight: 600;
    line-height: 22px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.item-book-form__entry-fields {
    flex: 1 1 auto;
    min-width: 0;
}

.item-book-form__entry-fields > .item-book-form__field:last-child { margin-bottom: 0; }

/* 이름은 전폭 — 여권 영문 성명이 가장 길고 오기가 가장 잦다.
   생년월일·성별·나이는 짧으므로 한 줄에 나눠 담아 행 높이를 줄인다. */
.item-book-form__entry-sub {
    display: flex;
    gap: 10px;
}

.item-book-form__entry-sub > .item-book-form__field {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0;
}

@media (max-width: 540px) {
    .item-book-form__entry-sub { flex-wrap: wrap; gap: 0;}
    .item-book-form__entry-sub > .item-book-form__field { flex: 1 1 100%; margin-bottom: 8px; }
    .item-book-form__entry-sub > .item-book-form__field:last-child { margin-bottom: 0; }
}

/* 출발·도착 항공편 표기 (passport_info='Y' 상품)
   레거시 `book_setdate_direct.php` 여권정보 블록의 `<tr><th>출발 항공편</th>` 2행을 카드 레이아웃으로 옮긴 것.
   표기 문자열은 레거시 그대로 유지한다 — 오전/오후 · 요일 · `(+N)` 포함. */
.item-book-form__flight {
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--tp-line);
    border-radius: 8px;
    background: var(--tp-bg);
    list-style: none;
}

.item-book-form__flight-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 5px 0;
}

.item-book-form__flight-row + .item-book-form__flight-row {
    border-top: 1px dashed var(--tp-line);
    margin-top: 5px;
    padding-top: 10px;
}

.item-book-form__flight-dir {
    flex-shrink: 0;
    width: 78px;
    color: #555;
    font-size: 15px;
    font-weight: 700;
}

.item-book-form__flight-val {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 540px) {
    .item-book-form__flight-row { flex-direction: column; gap: 2px; }
    .item-book-form__flight-dir { width: auto; }
}

/* 호텔(a1) 객실 정보 — 침대유형 · 투숙 인원 · 아동 나이
   상세에서는 객실·요금제만 고르고 여기서 객실 단위 값을 확정한다(레거시 form_a1.php 계약 유지). */
.item-book-form__room {
    margin-top: 8px;
    padding: 16px;
    border: 1px solid var(--tp-line);
    border-radius: 8px;
    background: var(--tp-bg);
}

.item-book-form__room:last-child { margin-bottom: 0; }

.item-book-form__room-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 16px;
}

.item-book-form__room-no {
    padding: 4px 8px;
    border-radius: 24px;
    background: var(--tp-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.item-book-form__room-name {
    color: #444;
    font-size: 14px;
    font-weight: 600;
}

.item-book-form__room-ages {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--tp-line);
}

.item-book-form__room-ages .item-book-form__field {
    display: inline-block;
    width: 48%;
    margin-bottom: 8px;
}

/* D-10 투숙객 정보 — 팝업 호출 버튼과 결과 표시 영역.
   결과 마크업(.detailInfo_list)은 레거시 inRoomDetailInfo() 가 만든다 — 클래스명을 바꾸면 안 된다. */
.item-book-form__room-guest {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--tp-line);
}

.item-book-form__room-guest .roomDetailInfoInsert {
    padding: 8px 14px;
    border: 1px solid var(--tp-blue);
    border-radius: 8px;
    background: #fff;
    color: var(--tp-blue);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.item-book-form__room-guest .roomDetailInfoInsert:hover {
    background: var(--tp-blue-tint);
}

.item-book-form__room-guest .detailInfo_list {
    margin-top: 8px;
    color: #555;
    font-size: 13px;
    line-height: 1.8;
}