/* =========================================
   이음 예약/결제 + 결제완료 — detail.css 공통 컴포넌트 위에 로드
   (dhead·panel·rows·price·sheet 는 detail.css 재사용)
========================================= */

/* 하단 고정 CTA가 콘텐츠를 가리지 않도록 */
.app{padding-bottom:calc(108px + env(safe-area-inset-bottom))}

/* ---------- 예약 상품 요약 ---------- */
/* 썸네일·텍스트는 공통 .thumb/.fs-* (tokens.css) 사용 */
.bk-item{display:flex;gap:12px;align-items:flex-start}
.bk-item__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bk-dates{display:flex;border:1px solid var(--g200);border-radius:var(--radius-md);overflow:hidden}
.bk-dates__cell{flex:1;display:flex;flex-direction:column;gap:2px;padding:12px;align-items:center}
.bk-dates__cell + .bk-dates__cell{border-left:1px solid var(--g200)}

/* ---------- 폼 — 공통 .field/.field__label/.input-field/.select-field (tokens.css) 사용 ---------- */
.bk-err{display:none;font-size:13px;color:var(--red-500);letter-spacing:-.3px}
.bk-err--show{display:block}

/* ---------- 쿠폰 · 포인트 ---------- */
.bk-point{display:flex;gap:8px}
.bk-point .input-field{flex:1;min-width:0}
.bk-point__all{flex:none;height:48px;padding:0 14px;border:1px solid var(--blue-100);border-radius:var(--radius-base);
  background:var(--white);color:var(--blue-500);font-size:14px;font-weight:600;letter-spacing:-.35px}
.bk-point__have b{color:var(--g700)}

/* ---------- 결제 수단 ---------- */
.bk-pays{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bk-pay{height:52px;border:1px solid var(--g200);border-radius:var(--radius-base);background:var(--white);
  display:flex;align-items:center;justify-content:center;gap:6px;font-size:15px;font-weight:500;color:var(--g700);letter-spacing:-.375px}
.bk-pay i{font-size:20px;color:var(--g500)}
.bk-pay--on{border-color:var(--blue-500);color:var(--blue-600);font-weight:600;background:var(--blue-50)}
.bk-pay--on i{color:var(--blue-500)}

/* ---------- 금액 요약 ---------- */
/* 금액 행 텍스트는 공통 .fs-sub (tokens.css) 사용 */
.bk-amounts{display:flex;flex-direction:column}
.bk-amt{height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 4px}
.bk-amt__v{font-weight:500}
.bk-amt__v--minus{color:var(--blue-500)}
.bk-amt--total{border-top:1px solid var(--g200);margin-top:8px;padding-top:8px;height:52px}
.bk-amt--total .bk-amt__k{font-size:15px;font-weight:700;color:var(--g900)}
.bk-amt--total .bk-amt__v{font-size:18px;font-weight:700;color:var(--blue-500)}

/* ---------- 약관 동의 ---------- */
.bk-agrees{display:flex;flex-direction:column}
.bk-agree{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;background:none;text-align:left;width:100%}
.bk-agree i{font-size:20px;color:var(--g300);flex:none}
.bk-agree.on i{color:var(--blue-500)}
.bk-agree__txt{flex:1}
.bk-agree--all{border-bottom:1px solid var(--g200);margin-bottom:4px}
.bk-agree--all .bk-agree__txt{font-size:15px;font-weight:700;color:var(--g900)}
.bk-agree__view{flex:none;font-size:13px;color:var(--g500);text-decoration:underline;background:none}

/* ---------- 결제 실패/취소 배너 ---------- */
.bk-fail{display:none;margin:12px 16px 0;background:var(--red-50);border:1px solid var(--red-100);border-radius:var(--radius-base);
  padding:12px;flex-direction:column;gap:4px}
.bk-fail--show{display:flex}
.bk-fail__t{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--red-500);letter-spacing:-.35px}
.bk-fail__s{font-size:13px;color:var(--g700);letter-spacing:-.325px;line-height:18px}

/* ---------- 하단 결제 CTA ---------- */
.bk-cta{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:100%;max-width:var(--app-max);z-index:60;
  background:var(--white);box-shadow:0 -1px 4px rgba(17,17,17,.12);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px}
.bk-cta__price{display:flex;flex-direction:column;gap:2px;flex-shrink:0}
.bk-cta__now{white-space:nowrap}
/* 결제 버튼(공통 .btn) — 로딩 시 스피너를 텍스트 옆에 표시 (disabled 배경보다 우선) */
.bk-cta .btn.loading,.bk-cta .btn.loading:disabled{background:var(--blue-600);pointer-events:none}
@keyframes bk-spin{to{transform:rotate(360deg)}}
.bk-spinner{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:var(--white);
  animation:bk-spin .7s linear infinite;display:none}
.loading .bk-spinner{display:block}

/* ---------- 쿠폰 선택 시트 ---------- */
.sheet--auto{height:auto;max-height:70vh;max-height:70dvh}
.bk-cpn{display:flex;flex-direction:column;gap:10px;padding:0 16px 24px}
.bk-cpn__item{border:1px solid var(--g200);border-radius:var(--radius-md);padding:14px;display:flex;flex-direction:column;gap:4px;
  background:var(--white);text-align:left;width:100%}
.bk-cpn__item.on{border-color:var(--blue-500);background:var(--blue-50)}
.bk-cpn__pct{font-size:17px;font-weight:700;color:var(--blue-500);letter-spacing:-.425px}
/* 이름·조건 텍스트는 공통 .fs-label/.fs-cap (tokens.css) 사용 */
.bk-cpn__none{border:1px solid var(--g200);border-radius:var(--radius-md);padding:14px;background:var(--white);
  font-size:14px;font-weight:600;color:var(--g700);text-align:center;width:100%}

/* =========================================
   결제 완료
========================================= */
.done-hero{background:var(--white);padding:48px 16px 32px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
/* 완료 아이콘 배경은 공통 .icirc .icirc--64 (tokens.css) 사용 */
.done-hero__t{font-size:20px;font-weight:700;color:var(--g900);letter-spacing:-.5px;line-height:28px}
.done-hero__no b{color:var(--g700);font-weight:600}
.done-ctas{display:flex;gap:8px;padding:16px;background:var(--white);margin-top:12px}