/* ── 예약 추가/수정 폼 (2026-05-29 재디자인)
   메인홈/시술완료 시트와 톤 통일 (0.5px #E5E8EB · radius 12px · padding 11~12px 14px) */

.bf-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 14px 96px;
  animation: bfFadeIn .22s ease-out both;
}
@media (min-width: 900px) {
  .bf-wrap { max-width: 900px; padding: 18px 18px 24px; }
  .bf-grid { display: grid; grid-template-columns: 220px 1fr; gap: 18px; }
}
/* PC 3컬럼 (≥1100px): 좌사이드 200px + 가운데 1fr + 우 sticky 280px */
.bf-root { display:block; }
.bf-side-left, .bf-side-right { display:contents; }
@media (min-width: 1100px) {
  .bf-wrap { max-width:1100px; padding:18px 18px 24px; }
  .bf-root {
    display:grid;
    grid-template-columns: 200px 1fr 280px;
    gap:12px;
    align-items:start;
  }
  .bf-side-left, .bf-side-right { display:block; }
  .bf-side-right { position:sticky; top:14px; }
  .bf-side-left .bf-card { padding:11px 14px; }
  .bf-side-left .bf-side-label { font-size:11px; color:#8B95A1; font-weight:500; letter-spacing:-0.2px; }
  .bf-side-left .bf-side-date { font-size:13px; font-weight:500; color:#191F28; letter-spacing:-0.3px; margin-top:2px; }
  .bf-side-left .bf-side-meta { font-size:11px; color:#8B95A1; margin-top:2px; }
}
@media (max-width: 1099px) {
  .bf-side-left { display:none; }
}

@keyframes bfFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* 공통 카드 */
.bf-card {
  background:#fff;
  border:0.5px solid #E5E8EB;
  border-radius:12px;
  padding:11px 14px;
  margin-bottom:8px;
}
.bf-card.compact { padding:10px 14px; }
.bf-card .bf-label {
  font-size:11px; color:#8B95A1; font-weight:500;
  letter-spacing:-0.2px; margin-bottom:6px;
  text-transform:none;
}

/* 상태 토글 (수정 모드) */
.bf-status-row { display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.bf-status-btn {
  padding:9px 0; font-size:12px; font-weight:500;
  background:#fff; border:0.5px solid #E5E8EB; border-radius:8px;
  color:#4E5968; cursor:pointer; font-family:inherit;
  letter-spacing:-0.2px; transition: all .12s;
}
.bf-status-btn.on { background:#191F28; color:#fff; border-color:#191F28; }
.bf-status-btn.on.bf-st-noshow { background:#E5484D; border-color:#E5484D; }
.bf-status-btn.on.bf-st-completed { background:#16B55E; border-color:#16B55E; }

/* 날짜 카드 — 라벨 제거, 한 줄 */
.bf-date-card {
  display:flex; align-items:center; gap:8px;
  width:100%; border:none; background:transparent; padding:0;
  cursor:pointer; font-family:inherit; text-align:left;
}
.bf-date-card .bf-date-info { flex:1; min-width:0; }
.bf-date-text { font-size:14px; font-weight:500; color:#191F28; letter-spacing:-0.3px; }
.bf-date-meta { font-size:11px; color:#8B95A1; margin-top:2px; letter-spacing:-0.2px; }
.bf-date-meta:empty { display:none; }
.bf-date-chev { color:#8B95A1; font-size:18px; line-height:1; flex-shrink:0; }
.bf-date-native { position:absolute; opacity:0; pointer-events:none; width:0; height:0; }

/* 시간 휠 픽커 — 3컬럼 (오전/오후 · 12,1..11 · 분 10단위) */
.bf-time-picker {
  position:relative;
  background:#F2F4F6;
  border-radius:12px;
  padding:6px;
  display:grid; grid-template-columns: 1fr 1fr 1fr;
  height:150px;
  touch-action:pan-y;
  overflow:hidden;
}
.bf-tp-selection {
  position:absolute;
  left:6px; right:6px;
  top:50%; transform:translateY(-22px);
  height:44px;
  background:#fff;
  border-radius:8px;
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
  pointer-events:none; z-index:1;
}
.bf-tp-wheel {
  position:relative; z-index:2;
  height:100%; overflow-y:auto; overflow-x:hidden;
  text-align:center;
  scroll-snap-type: y mandatory;
  -ms-overflow-style:none; scrollbar-width:none;
  scroll-behavior:smooth;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
}
.bf-tp-wheel::-webkit-scrollbar { display:none; }
/* 위·아래 53px 빈 padding — (150 - 44) / 2 = 53. 첫·끝 항목도 가운데 정렬 */
.bf-tp-inner { padding: 53px 0; }
.bf-tp-row {
  height:44px; line-height:44px;
  font-size:13px; font-weight:500;
  color:#B0B8C1;
  font-variant-numeric: tabular-nums;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  user-select:none;
  transition: color .15s, font-size .15s, font-weight .15s;
}
.bf-tp-row.current {
  color:#191F28; font-weight:500;
  font-size:25px; letter-spacing:-0.4px;
}

/* 소요 시간 */
.bf-dur-head {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:8px;
}
.bf-dur-end {
  font-size:11px; color:#BC6675; font-weight:500;
  letter-spacing:-0.2px; font-variant-numeric:tabular-nums;
}
.bf-dur-chips { display:flex; gap:6px; flex-wrap:wrap; }
.bf-dur-chip {
  padding:7px 14px; border-radius:999px; font-size:12px; font-weight:500;
  border:0.5px solid #E5E8EB; background:#fff; color:#4E5968;
  cursor:pointer; font-family:inherit; letter-spacing:-0.2px;
  transition: background .12s, color .12s, border-color .12s;
}
.bf-dur-chip:hover { background:#F7F8FA; color:#191F28; }
.bf-dur-chip.on { background:#191F28; color:#fff; border-color:#191F28; }

/* 고객 카드 — + 박스 ❌, 좌측 직선 막대 */
.bf-cust-card {
  display:flex; align-items:center; gap:10px;
  width:100%; border:none; background:transparent; padding:0;
  cursor:pointer; font-family:inherit; text-align:left;
}
.bf-cust-bar { width:3px; height:44px; border-radius:2px; background:#BC6675; flex-shrink:0; }
.bf-cust-bar.empty { height:36px; background:#D1D6DB; }
/* [2026-06-10] 고객 미선택 저장 시도 시 흔들림 강조 (app-calendar-view.js bfSave 검증) */
.bf-cust-required { animation: bfCustShake 0.4s ease; }
.bf-cust-required .bf-cust-bar.empty { background: var(--danger, #EF4444); }
.bf-cust-required .bf-cust-empty-text { color: var(--danger, #EF4444); }
@keyframes bfCustShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .bf-cust-required { animation: none; }
}
.bf-cust-info { flex:1; min-width:0; }
.bf-cust-name {
  font-size:15px; font-weight:500; color:#191F28; letter-spacing:-0.3px;
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.bf-cust-badge {
  font-size:11px; padding:1px 6px; border-radius:999px; font-weight:500;
  background:#F2F4F6; color:#8B95A1;
}
.bf-cust-badge.green { background:#E1F5EE; color:#16B55E; }
.bf-cust-badge.pink { background:#F7EFF0; color:#BC6675; }
.bf-cust-meta { font-size:11px; color:#8B95A1; margin-top:2px; letter-spacing:-0.2px; }
.bf-cust-empty-text { font-size:12px; color:#8B95A1; letter-spacing:-0.2px; }
.bf-cust-chev { color:#8B95A1; font-size:18px; line-height:1; flex-shrink:0; }
.bf-cust-clear {
  width:22px; height:22px; border-radius:50%;
  background:transparent; border:none; cursor:pointer;
  color:#8B95A1; font-family:inherit;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.bf-cust-clear:hover { background:#F2F4F6; }

/* 시술 카드 */
.bf-svc-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.bf-svc-sub { font-size:11px; color:#8B95A1; letter-spacing:-0.2px; }
.bf-svc-more { font-size:11px; color:#8B95A1; cursor:pointer; background:none; border:none; font-family:inherit; }
.bf-svc-chips { display:flex; gap:6px; flex-wrap:wrap; }
.bf-svc-chip {
  padding:7px 14px; border-radius:999px; font-size:12px; font-weight:500;
  background:#fff; border:0.5px solid #E5E8EB; color:#4E5968;
  cursor:pointer; font-family:inherit; letter-spacing:-0.2px;
  transition: background .12s, color .12s, border-color .12s;
}
.bf-svc-chip:hover { background:#F7F8FA; color:#191F28; }
.bf-svc-chip.on { background:#191F28; color:#fff; border-color:#191F28; }
.bf-svc-chip.add { color:#8B95A1; border-style:dashed; }
.bf-svc-input {
  width:100%; margin-top:8px; padding:10px 12px;
  background:#fff; border:0.5px solid #E5E8EB; border-radius:10px;
  font-size:13px; color:#191F28; font-family:inherit;
  outline:none; transition: border-color .15s;
}
.bf-svc-input:focus { border-color:#191F28; }

/* 시술 카드 — 칩 + 잇비 박스 + 금액 라인 한 카드 안 */
.bf-service-card { padding:0; }
.bf-service-card .bf-svc-pad { padding:11px 14px; }
.bf-service-card .bf-svc-itby { border-top:0.5px solid #F0F1F4; }
.bf-service-card .bf-svc-itby .bf-itby { margin:0; border-radius:0; padding:10px 14px; background:#FAFAFB; }
.bf-service-card .bf-amount-rows { border-top:0.5px solid #F0F1F4; padding:11px 14px; }

/* PC: 시술 카드 안 금액 숨김 (우측 패널로 이동) · 모바일: 우측 패널 금액 숨김 */
@media (min-width: 1100px) {
  .bf-service-card .bf-amount-rows { display:none; }
}
@media (max-width: 1099px) {
  .bf-side-right .bf-money-card { display:none; }
}

/* 잇비 분석 박스 안 메모 — "● 메모 · 본문" 한 줄 */
.bf-itbi-memo {
  display:flex; align-items:flex-start; gap:5px;
  padding:8px 10px 0;
  font-size:11px; line-height:1.4;
  flex-wrap:wrap;
}
.bf-itbi-memo:empty { display:none; }
.bf-itbi-memo-dot {
  width:5px; height:5px; border-radius:50%;
  background:#BC6675; flex-shrink:0;
  margin-top:6px;
}
.bf-itbi-memo-label { color:#BC6675; font-weight:500; }
.bf-itbi-memo-sep { color:#D9DCE0; }
.bf-itbi-memo-text { color:#4E5968; white-space:normal; word-break:break-word; flex:1; min-width:0; }

/* 잇비 한 마디 */
.bf-itby {
  display:flex; align-items:center; gap:8px;
  background:#FAFAFB; border-radius:10px;
  padding:10px 14px; margin-bottom:8px;
  animation: bfFadeIn .2s ease-out both;
}
.bf-itby-icon {
  width:18px; height:18px; border-radius:50%; flex-shrink:0;
  background:#BC6675; color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.bf-itby-text { font-size:11px; font-weight:500; color:#BC6675; letter-spacing:-0.2px; line-height:1.45; }

/* 금액 위계 — 시술비·예약금 작게 / 잔금 큰 폰트 */
.bf-money { padding:2px 0; }
.bf-money-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 0;
}
.bf-money-row.deposit { border-bottom:0.5px solid #F0F1F4; padding-bottom:10px; }
.bf-money-row.total { padding:12px 0 4px; }
.bf-money-key { font-size:11px; color:#8B95A1; letter-spacing:-0.2px; }
.bf-money-row.total .bf-money-key { font-size:13px; color:#191F28; font-weight:500; }
.bf-money-val {
  display:inline-flex; align-items:baseline; gap:3px;
  font-size:13px; font-weight:500; color:#191F28;
  font-variant-numeric: tabular-nums;
  cursor:pointer;
  border-radius:6px; padding:2px 6px; margin:-2px -6px;
  transition: background .12s;
}
.bf-money-val:hover { background:#F7F8FA; }
.bf-money-val .bf-num { font-size:13px; }
.bf-money-row.deposit .bf-money-val .bf-num { color:#BC6675; }
.bf-money-row.total .bf-money-val { padding:0; margin:0; }
.bf-money-row.total .bf-money-val .bf-num {
  font-size:20px; letter-spacing:-0.4px;
}
@media (min-width: 1100px) {
  .bf-money-row.total .bf-money-val .bf-num { font-size:24px; letter-spacing:-0.5px; }
  .bf-money-row.total .bf-money-val .bf-money-unit { font-size:13px; }
}
.bf-money-unit { font-size:11px; color:#8B95A1; }
/* 빈 값 → "탭해서 입력 ›" 분홍 텍스트 */
.bf-amount-link {
  background:none; border:none; padding:0; margin:0;
  font-family:inherit; font-size:11px; font-weight:500;
  color:#BC6675; cursor:pointer; letter-spacing:-0.2px;
}
.bf-amount-link:hover { text-decoration:underline; }
.bf-money-input {
  width:110px; text-align:right;
  border:none; outline:none; background:transparent;
  font-size:12px; font-weight:500; color:#191F28;
  font-family:inherit; font-variant-numeric: tabular-nums;
  padding:0 0 2px; margin:0;
  border-bottom:1.5px solid #191F28;
  -webkit-appearance:none; appearance:none;
  box-shadow:none;
}
.bf-money-input:focus {
  outline:none !important;
  box-shadow:none !important;
  border-bottom:1.5px solid #191F28 !important;
}
.bf-money-row.total .bf-money-input { font-size:16px; }
.bf-money-row.deposit .bf-money-input { color:#BC6675; }
.bf-money-val:has(.bf-money-input) { background:transparent !important; }

/* 메모 카드 */
.bf-memo-toggle {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; border:none; background:transparent;
  padding:0; cursor:pointer; font-family:inherit;
}
.bf-memo-toggle-left { display:flex; align-items:center; gap:6px; }
.bf-memo-icon { font-size:11px; line-height:1; color:#8B95A1; transition: transform .2s; }
.bf-memo-toggle.open .bf-memo-icon { transform: rotate(180deg); }
.bf-memo-title { font-size:12px; font-weight:500; color:#191F28; letter-spacing:-0.2px; }
.bf-memo-hint { font-size:11px; color:#8B95A1; letter-spacing:-0.2px; }
.bf-memo-fields { margin-top:10px; display:none; }
.bf-memo-toggle.open + .bf-memo-fields { display:block; }
.bf-memo {
  width:100%; padding:10px 12px;
  background:#fff; border:0.5px solid #E5E8EB; border-radius:10px;
  font-size:13px; color:#191F28; font-family:inherit;
  resize:none; min-height:64px; outline:none;
  transition: border-color .15s;
}
.bf-memo:focus { border-color:#191F28; }
.bf-memo::placeholder { color:#C5CBD2; }
.bf-memo-counter { font-size:11px; color:#8B95A1; text-align:right; margin-top:4px; }

/* 충돌 경고 */
.dt-conflict {
  display:none;
  padding:10px 14px;
  background:#FDECEC; color:#E5484D;
  font-size:12px; font-weight:500; letter-spacing:-0.2px;
  border-radius:10px; margin-bottom:8px;
}

/* 뒤로 버튼 */
.cv-form-back {
  background:transparent; border:none; cursor:pointer;
  font-size:13px; color:#8B95A1; padding:6px 8px;
  font-family:inherit; letter-spacing:-0.2px;
  margin-bottom:4px;
}
.cv-form-back:hover { color:#4E5968; }

/* CTA */
.bf-cta {
  position:sticky; bottom:0;
  background:#fff;
  padding:10px 14px;
  border-top:0.5px solid #F0F1F4;
  display:grid; grid-template-columns:1fr 2fr; gap:6px;
  z-index:10;
  margin: 12px -14px -96px;
}
@media (min-width: 1100px) {
  .bf-cta {
    position:static; padding:0; border-top:none; margin:8px 0 0;
    background:transparent;
  }
}
.bf-btn-primary {
  flex:2; padding:14px 0;
  background:#191F28; color:#fff;
  border:none; border-radius:12px;
  font-size:14px; font-weight:500; cursor:pointer;
  font-family:inherit; letter-spacing:-0.3px;
  transition: background .12s;
}
.bf-btn-primary:hover { background:#3D434D; }
.bf-btn-primary:disabled { opacity:.6; cursor:default; }
.bf-btn-secondary {
  flex:1; padding:14px 0;
  background:#fff; color:#4E5968;
  border:0.5px solid #E5E8EB; border-radius:12px;
  font-size:14px; font-weight:500; cursor:pointer;
  font-family:inherit; letter-spacing:-0.3px;
}
.bf-btn-secondary:hover { background:#F7F8FA; }
.bf-btn-danger {
  flex:1; padding:14px 0;
  background:#fff; color:#E5484D;
  border:0.5px solid #FDECEC; border-radius:12px;
  font-size:14px; font-weight:500; cursor:pointer;
  font-family:inherit; letter-spacing:-0.3px;
}
.bf-btn-danger:hover { background:#FDECEC; }

/* 월 → 주 전환 — 슬라이드 업 (좌→우 X) */
.cv-month-out .bk-month-m__cells,
.cv-month-out .bk-pc-month__cells {
  animation: cvMonthOutUp .3s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes cvMonthOutUp {
  to { transform: translateY(-40px); opacity: 0; }
}
.cv-week-slidein { animation: cvWeekSlideUp .4s ease-out both; }
@keyframes cvWeekSlideUp {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* PC 우측 패널 잇비 박스 (모바일에선 시술 카드 안 .bf-svc-itby 가 표시) */
.bf-itby-pc {
  background: #FDF7F8;
  border: 0.5px solid #F4C0D1;
  border-radius: 10px;
  padding: 9px 11px;
  margin-bottom: 10px;
}
.bf-itby-pc .bf-itby { margin: 0; padding: 0; background: transparent; gap: 6px; }
.bf-itby-pc .bf-itby-icon { background: transparent; color: #BC6675; width: auto; height: auto; }
.bf-itby-pc .bf-itby-text { font-size: 11px; font-weight: 500; color: #BC6675; }
@media (min-width: 1100px) {
  .bf-service-card .bf-svc-itby { display: none !important; }
}
@media (max-width: 1099px) {
  .bf-side-right .bf-itby-pc { display: none !important; }
}

/* AI 잇비의 고객 정보 분석 — 로딩 점 3개 통통 */
.bf-itbi-dots {
  display: inline-flex; gap: 4px; align-items: center;
  padding: 4px 0;
}
.bf-itbi-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: #BC6675;
  animation: bfBounce 1.2s infinite ease-in-out both;
}
.bf-itbi-dots span:nth-child(1) { animation-delay: -0.32s; }
.bf-itbi-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bfBounce {
  0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
  40%           { transform: scale(1); opacity: 1; }
}