/* ══════════════════════════════════════════════════════════════════════
   견적 v5 — 상담 예약 창의 속 (날짜·시간 → 예약 정보 → 예약 확정)

   기획서 「1204 무료 상담 예약 기능 기획서」(2026-09-28) 의 시안에서 떠 왔다.
   창 껍데기(.ev5-sheet .popup · header · footer · .btn)는 sheet.css 가 맡고,
   여기는 속만 맡는다.

   ⚠ 모든 규칙을 .bk 아래에 둔다 — 신청 창(.ev5-sheet .bk)과 고객 예약 관리 페이지(page-consult-booking.php)가 함께 쓴다. 시안의 이름(.day · .slot · .cal ·
     .pick · .field)은 이 페이지의 다른 자리와 겹친다 — 그래서 bk- 를 붙였다.
   ⚠ 값은 시안 그대로다. 시안이 디자인 시스템 토큰과 같다(버튼 12 · 카드 15 ·
     인풋 6 · 그림자 없음 · 폼은 #FAFAFA 면 · 인풋 흰 바탕 무테두리).
   ⚠ 자간에 !important — common.css:10 이 div·p·h2 까지 -0.5px !important 로 짚는다.
   ══════════════════════════════════════════════════════════════════════ */

.bk .bk-head{ justify-content:flex-start; padding:16px 56px 16px 24px }
.bk .bk-head__txt{ display:flex; flex-direction:column; gap:6px; text-align:left }
.bk .bk-head .popup__title{ font-size:18px; letter-spacing:-1px !important; text-wrap:balance }
.bk .bk-sub{ font-size:14px; color:var(--color-text-secondary,#666); letter-spacing:-.5px !important }

.bk .bk-body{ padding:0 }
.bk .bk-pad{ padding:20px 24px 24px; display:flex; flex-direction:column; gap:12px }
.bk .bk-retry{ align-self:flex-start }
.bk .bk-surface{ background:var(--color-bg-surface,#FAFAFA) }

/* ── 달력 ── */
.bk .bk-cal{ padding:20px 24px 8px }
.bk .bk-cal__month{
  margin-bottom:8px; font-size:17px; font-weight:600; letter-spacing:-1px !important;
  font-variant-numeric:tabular-nums;
}
.bk .bk-cal__grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px }
.bk .bk-cal__dow{
  padding:6px 0 8px; text-align:center; font-size:12px;
  color:var(--color-text-secondary,#666); letter-spacing:-.5px !important;
}
.bk .bk-cal__dow:first-child{ color:var(--color-text-disabled,#999) }
.bk .bk-day{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  height:52px; padding:0; border-radius:12px;
  border:1px solid transparent; background:transparent; cursor:pointer;
  font-family:inherit; font-size:15px; font-weight:600; line-height:1.2;
  color:var(--color-text-primary,#222); font-variant-numeric:tabular-nums;
  transition:border-color var(--transition-fast,.15s),color var(--transition-fast,.15s);
}
.bk .bk-day:hover:not(:disabled):not(.is-sel){ background:var(--color-bg-hover,#F6F6F6) }
.bk .bk-day:disabled{ font-weight:400; color:var(--color-border-default,#DDD); cursor:default }
.bk .bk-day.is-full{ color:var(--color-text-disabled,#999) }
.bk .bk-day.is-sel{
  background:#fff; border-color:var(--color-brand-primary,#EE4947); color:var(--color-brand-primary,#EE4947);
}
.bk .bk-day:focus-visible{ outline:2px solid var(--color-brand-primary,#EE4947); outline-offset:2px }
.bk .bk-day__tag{ font-size:12px; font-weight:500; line-height:1; color:var(--color-text-disabled,#999) }
.bk .bk-day__tag.m{ color:var(--color-text-secondary,#666) }

/* ── 시간 ── */
.bk .bk-times{ padding:16px 24px 24px }
.bk .bk-times__label{
  display:block; margin-bottom:12px; font-size:14px; font-weight:500; letter-spacing:-.5px !important;
}
.bk .bk-times__label span{ margin-left:6px; color:var(--color-text-secondary,#666); font-weight:400 }
.bk .bk-times__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.bk .bk-slot{
  min-height:48px; padding:6px 4px; border-radius:12px; cursor:pointer;
  background:#fff; border:1px solid var(--color-border-light,#EEE);
  font-family:inherit; font-size:15px; font-weight:500; line-height:1.2;
  color:var(--color-text-primary,#222); font-variant-numeric:tabular-nums;
  transition:border-color var(--transition-fast,.15s),color var(--transition-fast,.15s);
}
.bk .bk-slot small{
  display:block; margin-bottom:2px; font-size:12px; font-weight:400; color:var(--color-text-secondary,#666);
}
.bk .bk-slot.is-sel{ border-color:var(--color-brand-primary,#EE4947); color:var(--color-brand-primary,#EE4947) }
.bk .bk-slot.is-sel small{ color:var(--color-brand-primary,#EE4947) }
.bk .bk-slot:focus-visible{ outline:2px solid var(--color-brand-primary,#EE4947); outline-offset:2px }
.bk .bk-empty{
  padding:16px; border-radius:12px; background:var(--color-bg-surface,#FAFAFA);
  font-size:14px; line-height:1.6; color:var(--color-text-secondary,#666); letter-spacing:-.5px !important;
}
.bk .bk-empty--gap{ margin-bottom:12px }

/* ── 예약 정보 ── */
.bk .bk-form{ padding:20px 24px 28px; display:flex; flex-direction:column; gap:20px }
.bk .bk-pick{
  display:flex; flex-direction:column; gap:14px; padding:18px;
  border-radius:var(--radius-card,15px); background:#fff; border:1px solid var(--color-border-light,#EEE);
}
.bk .bk-pick__apt{ font-size:15px; font-weight:600; letter-spacing:-.5px !important }
.bk .bk-pick__apt span{ margin-left:6px; font-weight:400; color:var(--color-text-secondary,#666); font-size:13px }
.bk .bk-pick__plan{ margin-top:4px; font-size:13px; color:var(--color-text-secondary,#666) }
.bk .bk-pick__price{
  margin-top:10px; font-size:22px; font-weight:700; letter-spacing:-1px !important; font-variant-numeric:tabular-nums;
}
.bk .bk-pick__price small{ font-size:13px; font-weight:500; color:var(--color-text-secondary,#666); margin-left:4px }
.bk .bk-pick__when{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-top:14px; border-top:1px solid var(--color-border-light,#EEE);
}
.bk .bk-pick__when-k{ font-size:12px; color:var(--color-text-secondary,#666) }
.bk .bk-pick__when-v{
  margin-top:4px; font-size:16px; font-weight:600; color:var(--color-brand-primary,#EE4947);
  letter-spacing:-.5px !important; font-variant-numeric:tabular-nums;
}
.bk .bk-pick__when .btn-secondary{ min-height:36px; padding:8px 14px; font-size:13px }
.bk .bk-field{ display:flex; flex-direction:column; gap:8px }
.bk .bk-field label{ font-size:14px; font-weight:500; letter-spacing:-.5px !important }
.bk .bk-input{
  width:100%; min-height:48px; padding:12px 16px;
  background:#fff; border:1px solid transparent; border-radius:6px;
  font-family:var(--font-family-base); font-size:16px; letter-spacing:-.5px !important;
  color:var(--color-text-primary,#222);
  transition:border-color var(--transition-fast,.15s);
}
.bk .bk-input::placeholder{ color:var(--color-text-disabled,#999) }
.bk .bk-input:focus{ outline:none; border-color:var(--color-brand-primary,#EE4947) }
.bk .bk-num{ font-variant-numeric:tabular-nums }
.bk .bk-agree{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:4px }
.bk .bk-agree__row{
  display:flex; align-items:center; gap:10px; min-height:44px; padding:0;
  border:0; background:transparent; cursor:pointer; text-align:left;
  font-family:inherit; font-size:14px; font-weight:500; letter-spacing:-.5px !important;
  color:var(--color-text-primary,#222);
}
.bk .bk-agree__row em{ font-style:normal; color:var(--color-brand-primary,#EE4947) }
.bk .bk-check{
  flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:6px;
  border:1px solid var(--color-border-default,#DDD); background:#fff; color:transparent;
  transition:all var(--transition-fast,.15s);
}
.bk .bk-agree__row[aria-checked="true"] .bk-check{
  background:var(--color-brand-primary,#EE4947); border-color:var(--color-brand-primary,#EE4947); color:#fff;
}
.bk .bk-check svg{ width:10px; height:8px }
.bk .bk-agree__more{
  min-height:44px; padding:0; border:0; background:transparent; cursor:pointer;
  font-family:inherit; font-size:13px; color:var(--color-text-secondary,#666);
  text-decoration:underline; text-underline-offset:3px; letter-spacing:-.5px !important;
}
.bk .bk-agree__detail{
  font-size:13px; line-height:1.6; color:var(--color-text-secondary,#666);
  padding:14px 16px; border-radius:12px; background:#fff; letter-spacing:-.5px !important;
}
.bk .bk-note{
  margin-top:10px; text-align:center; font-size:12px; color:var(--color-text-secondary,#666);
  letter-spacing:-.5px !important;
}

/* ── 예약 확정 ── */
.bk .bk-done{ padding:28px 24px 8px }
.bk .bk-done__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--color-brand-sub,#FFF0EF); color:var(--color-brand-primary,#EE4947);
}
.bk .bk-done__icon svg{ width:18px; height:14px }
.bk .bk-done__title{ margin-top:16px; font-size:22px; font-weight:600; letter-spacing:-1px !important }
.bk .bk-done__desc{
  margin-top:8px; font-size:15px; line-height:1.6; color:var(--color-text-secondary,#666); letter-spacing:-.5px !important;
}
.bk .bk-info{
  margin:24px 0 20px; display:grid; grid-template-columns:76px 1fr; row-gap:12px; column-gap:12px;
  padding:20px; border-radius:var(--radius-card,15px); background:var(--color-bg-surface,#FAFAFA);
  font-size:14px; line-height:1.5;
}
.bk .bk-info dt{ color:var(--color-text-secondary,#666) }
.bk .bk-info dd{ margin:0; font-weight:500 }
.bk .bk-info dd.hl{ color:var(--color-brand-primary,#EE4947); font-weight:600 }
.bk .bk-foot{ display:flex; flex-direction:column; gap:8px }

/* ⚠ 비활성 단추는 회색이다(시안). buy.css 의 .ev5-sheet .btn-primary:disabled{opacity:.55}
     는 붉은 단추를 흐리게만 해서 '누를 수 있는데 약한 단추' 로 읽힌다 — 이 창에서만 덮는다. */
.bk .btn-primary:disabled{
  opacity:1; cursor:default;
  background:var(--color-border-light,#EEE); border-color:var(--color-border-light,#EEE);
  color:var(--color-text-disabled,#999);
}

/* 예약 오류 — 창 안, 단추 바로 위. 알림 띠처럼 사라지지 않는다 */
.bk .bk-err{
  display:flex; flex-direction:column; gap:10px;
  margin-bottom:10px; padding:12px 14px; border-radius:12px;
  background:var(--color-brand-sub,#FFF0EF); color:var(--color-brand-primary,#EE4947);
  font-size:13px; line-height:1.55; letter-spacing:-.5px !important;
}
/* ⚠ 오류 상자는 분홍 면이라 그 위 단추는 흰 바탕 — 면 위 단추가 묻히지 않게 */
.bk .bk-err .bk-err__link{ background:#fff; color:var(--color-text-primary,#222); text-decoration:none }

/* 먼저 가져간 시간 안내 — 1단계 맨 위(달력 위). 같은 창의 오류 상자(.bk-err)를 그대로 쓴다 */
.bk .bk-taken{ padding:16px 24px 0 }
.bk .bk-taken .bk-err{ margin-bottom:0 }