/* ── Itdasy Design System v1 · screens/booking-v4.css ─────────
   예약관리 v4 — 월/주/일 3뷰 · 모바일 + PC
   mockup: ../../mockups/04-booking.html
   tokens: tokens.css */

/* [2026-05-04] 예약관리 인라인 탭 통일 — 사이드바 232px 우측 영역. fade 0.08s. */
@keyframes bk-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#cal-overlay {
  animation: bk-fade-in 0.08s ease-out !important;
}

/* ============================================================
   §0 로컬 변수 — time grid 높이 + spring easing
   ============================================================ */
.bk-root {
  --bk-h-mobile-day: 50px;   /* [2026-05-17 v6] 60→50 — 직선 바 톤 컴팩트. JS HOUR_PX_MOBILE_DAY 와 동기화 필수 */
  --bk-h-mobile-week: 50px;  /* 모바일 주간 시간 셀 */
  --bk-h-pc-week: 60px;      /* PC 주간 시간 셀 */
  /* [Step 5 · 2026-05-16] PC 일간 60px — JS HOUR_PX_PC_DAY 와 동기화 필수 */
  --bk-h-pc-day: 60px;
  --bk-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   §1 button 류 native reset (공통)
   ============================================================ */
.bk-header__back,
.bk-today-btn,
.bk-view__btn,
.bk-pc__nav-btn,
.bk-pc__add-btn,
.bk-fab,
.bk-mini__nav button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline: 0;
  cursor: pointer;
  font-family: inherit;
}

/* ============================================================
   §2 공통 헤더
   ============================================================ */
.bk-header {
  padding: 16px 18px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bk-header__back {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.bk-header__title-wrap {
  text-align: center;
  flex: 1;
}
.bk-header__month {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text);
}
.bk-header__sub {
  font-size: 11px;
  color: var(--text-subtle);
  margin-top: 1px;
  font-weight: 500;
}
.bk-today-btn {
  font-size: 11.5px;
  color: var(--text);
  font-weight: 700;
  padding: 6px 11px;
  background: var(--surface-2);
  border-radius: var(--r-pill);
}

/* ============================================================
   §3 툴바 / 직원 칩 / 뷰 토글
   ============================================================ */
.bk-toolbar {
  padding: 0 16px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bk-view {
  display: flex;
  gap: 1px;
  background: var(--surface-2);
  padding: 2px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}
.bk-view__btn {
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  background: none;
  color: var(--text-muted);
  border-radius: 6px;
}
.bk-view__btn.is-on {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   §4 모바일 일간 뷰
   ============================================================ */
.bk-dates {
  display: flex;
  gap: 4px;
  padding: 8px 16px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.bk-dates::-webkit-scrollbar { display: none; }

.bk-date {
  flex-shrink: 0;
  width: 46px;
  padding: 8px 0;
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  background: transparent;
  border: 0;
}
.bk-date:hover { background: var(--surface-2); }
.bk-date.is-on { background: var(--text); }

.bk-date__dow {
  font-size: 11px;
  color: var(--text-subtle);
  font-weight: 600;
}
.bk-date.is-on .bk-date__dow { color: rgba(255, 255, 255, 0.7); }

.bk-date__num {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
}
.bk-date.is-on .bk-date__num { color: var(--surface); }

.bk-date.has-events::after {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--brand-strong);
  margin-top: 2px;
}
.bk-date.is-on.has-events::after { background: var(--surface); }

.bk-day {
  flex: 1;
  overflow-y: auto;
  position: relative;
  background: var(--surface);
}
.bk-day::-webkit-scrollbar { width: 0; }

.bk-day__row {
  display: flex;
  height: var(--bk-h-mobile-day, 60px);
  border-top: 0.5px solid var(--border);
  position: relative;
}
.bk-day__row:first-child { border-top: none; }

.bk-day__hour-label {
  width: 50px;
  padding: 4px 8px 0 0;
  font-size: 10.5px;
  color: var(--text-subtle);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  flex-shrink: 0;
}
.bk-day__hour-content {
  flex: 1;
  position: relative;
}
.bk-day__slot-half {
  height: calc(var(--bk-h-mobile-day, 60px) / 2);
  cursor: pointer;
  transition: background 0.12s;
}
.bk-day__slot-half:hover { background: var(--brand-bg); }

/* 예약 블록 (모바일 일간) */
.bk-block {
  position: absolute;
  left: 4px;
  right: 8px;
  background: var(--brand-bg);
  border-left: 3px solid var(--brand-strong);
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}
.bk-block:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.bk-block__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-strong);
  letter-spacing: -0.2px;
}
.bk-block__sub {
  font-size: 10.5px;
  color: var(--brand-strong);
  margin-top: 2px;
  font-weight: 500;
  opacity: 0.85;
}

/* ============================================================
   §5 모바일 월간 뷰
   ============================================================ */
.bk-month-m { padding: 4px 12px 12px; }

.bk-month-m__dow-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.bk-month-m__dow {
  font-size: 11px;
  color: var(--text-subtle);
  font-weight: 600;
  text-align: center;
  padding: 4px 0;
}

.bk-month-m__cells {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 92px;
  gap: 1px;
  background: var(--border);
  border: 0.5px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.bk-month-m__cell {
  background: var(--surface);
  padding: 3px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: background 0.12s;
  overflow: hidden;
}
.bk-month-m__cell:hover { background: var(--brand-bg); }
.bk-month-m__cell--other { background: var(--surface-2); }
.bk-month-m__cell--other .bk-month-m__num { color: var(--text-subtle); opacity: 0.5; }
.bk-month-m__cell--today .bk-month-m__num {
  color: var(--surface);
  background: var(--brand-strong);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.bk-month-m__num {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.bk-month-m__events {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 2px;
  flex: 1;
  overflow: hidden;
}
.bk-month-m__evt {
  font-size: 8px;
  padding: 0 3px;
  background: var(--brand-bg);
  color: var(--brand-strong);
  border-radius: 3px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.bk-month-m__more {
  font-size: 8px;
  color: var(--text-subtle);
  font-weight: 600;
  padding: 0 3px;
  line-height: 1.4;
}

/* ============================================================
   §6 모바일 주간 뷰
   ============================================================ */
.bk-week-m {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bk-week-m__header {
  display: grid;
  grid-template-columns: 32px repeat(7, 1fr);
  border-bottom: 0.5px solid var(--border);
}
.bk-week-m__h-cell {
  padding: 8px 2px;
  text-align: center;
}
.bk-week-m__h-dow {
  font-size: 9px;
  color: var(--text-subtle);
  font-weight: 600;
}
.bk-week-m__h-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}
.bk-week-m__h-cell.is-today .bk-week-m__h-num {
  color: var(--surface);
  background: var(--brand-strong);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  margin-top: 2px;
}

.bk-week-m__grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 32px repeat(7, 1fr);
  position: relative;
  background: var(--surface);
}
.bk-week-m__grid::-webkit-scrollbar { width: 0; }

.bk-week-m__time-cell {
  height: var(--bk-h-mobile-week, 50px);
  padding: 3px 4px 0 0;
  font-size: 9px;
  color: var(--text-subtle);
  font-weight: 600;
  text-align: right;
  border-top: 0.5px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.bk-week-m__time-cell:first-child { border-top: none; }

.bk-week-m__day {
  position: relative;
  border-left: 0.5px solid var(--border);
}
.bk-week-m__hour {
  height: var(--bk-h-mobile-week, 50px);
  border-top: 0.5px solid var(--border);
  cursor: pointer;
  transition: background .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.bk-week-m__hour:first-child { border-top: none; }
/* [2026-05-24] 모바일 탭 피드백 — hover 미동작 환경 대응 */
.bk-week-m__hour:active {
  background: var(--brand-bg);
}

/* [2026-06-11] 주간뷰 1안 — 흰 배경 + 상태 점 (상태별 배경/좌측바 제거) */
.bk-week-m__block {
  position: absolute;
  left: 1px;
  right: 1px;
  background: #fff;
  border: 0.5px solid #E5E8EB;
  border-radius: 8px;
  padding: 2px 4px;
  cursor: pointer;
  overflow: hidden;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

/* ============================================================
   §7 + FAB (모바일)
   ============================================================ */
.bk-fab {
  position: absolute;
  right: 18px;
  bottom: 86px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-brand);
  color: var(--surface);
  z-index: 10;
}

/* ============================================================
   §8 PC 메인 (공통)
   — 좌측 사이드바는 myshop 의 .ms-side 재사용 (별도 정의 없음)
   ============================================================ */
.bk-pc {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}
.bk-pc__header {
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 0.5px solid var(--border);
}
.bk-pc__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--text);
}
.bk-pc__month-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}
.bk-pc__nav-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.bk-pc__month-label {
  font-size: 14px;
  font-weight: 700;
  padding: 0 12px;
  min-width: 80px;
  text-align: center;
  letter-spacing: -0.2px;
  color: var(--text);
}
.bk-pc__spacer { flex: 1; }

.bk-pc__stats {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  align-items: center;
}
.bk-pc__stats b {
  color: var(--text);
  font-weight: 700;
}

.bk-pc__add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--brand-strong);
  color: var(--surface);
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 700;
}

.bk-pc__body {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.bk-pc__left {
  width: 240px;
  border-right: 0.5px solid var(--border);
  padding: 18px 16px;
  overflow-y: auto;
  background: var(--surface);
  flex-shrink: 0;
}
.bk-pc__left::-webkit-scrollbar { width: 0; }

/* ============================================================
   §9 PC 좌측 — 미니 캘린더
   ============================================================ */
.bk-mini {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px;
  margin-bottom: 14px;
}
.bk-mini__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.bk-mini__month {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--text);
}
.bk-mini__nav {
  display: flex;
  gap: 2px;
}
.bk-mini__nav button {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-subtle);
}
.bk-mini__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.bk-mini__dow {
  font-size: 9.5px;
  color: var(--text-subtle);
  font-weight: 600;
  text-align: center;
  padding: 4px 0;
}
.bk-mini__day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  position: relative;
}
.bk-mini__day:hover { background: var(--surface-2); }
.bk-mini__day--other { color: var(--text-subtle); opacity: 0.5; }
.bk-mini__day--today {
  background: var(--brand-bg);
  color: var(--brand-strong);
  font-weight: 700;
}
.bk-mini__day--selected {
  background: var(--text);
  color: var(--surface);
}
.bk-mini__day.has-event::after {
  content: '';
  position: absolute;
  bottom: 2px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--brand-strong);
}
.bk-mini__day--selected.has-event::after { background: var(--surface); }

/* ============================================================
   §10 PC 좌측 — 직원 리스트
   ============================================================ */

/* ============================================================
   §11 PC 좌측 — 통계 카드
   ============================================================ */
.bk-stats {
  background: var(--surface);
  border: 0.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px;
}
.bk-stats__row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--border);
}
.bk-stats__row:last-child { border-bottom: none; }
.bk-stats__label {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}
.bk-stats__value {
  font-size: 13px;
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   §12 PC 캘린더 메인 컨테이너
   ============================================================ */
.bk-pc-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ============================================================
   §13 PC 주간 뷰
   ============================================================ */
.bk-week__header {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  border-bottom: 0.5px solid var(--border);
  background: var(--surface);
}
.bk-week__h-cell {
  padding: 12px 8px;
  text-align: center;
  border-left: 0.5px solid var(--border);
}
.bk-week__h-cell:first-child { border-left: none; }
.bk-week__h-dow {
  font-size: 11px;
  color: var(--text-subtle);
  font-weight: 600;
  letter-spacing: 0.3px;
}
.bk-week__h-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-top: 3px;
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
}
.bk-week__h-cell.is-today .bk-week__h-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-strong);
  color: var(--surface);
  font-size: 14px;
}

.bk-week__grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  position: relative;
}
.bk-week__grid::-webkit-scrollbar { width: 0; }

.bk-week__time-col {
  display: flex;
  flex-direction: column;
  background: var(--surface);
}
.bk-week__time-cell {
  height: var(--bk-h-pc-week, 60px);
  padding: 4px 8px 0 0;
  font-size: 10.5px;
  color: var(--text-subtle);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  border-top: 0.5px solid var(--border);
}
.bk-week__time-cell:first-child { border-top: none; }

.bk-week__day {
  position: relative;
  border-left: 0.5px solid var(--border);
  background: var(--surface);
}
.bk-week__hour {
  height: var(--bk-h-pc-week, 60px);
  border-top: 0.5px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}
.bk-week__hour:first-child { border-top: none; }
.bk-week__hour:hover { background: var(--brand-bg); }

/* [2026-06-11] 주간뷰 1안 — 흰 배경 + 상태 점 (상태별 배경/좌측바 제거) */
.bk-week__block {
  position: absolute;
  left: 4px;
  right: 4px;
  background: #fff;
  border: 0.5px solid #E5E8EB;
  border-radius: 8px;
  padding: 5px 8px;
  cursor: pointer;
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.bk-week__block:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  z-index: 4;
}
.bk-week__block-title {
  font-weight: 700;
  color: var(--brand-strong);
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.bk-week__block-sub {
  color: var(--brand-strong);
  margin-top: 1px;
  font-weight: 500;
  opacity: 0.85;
}

/* ============================================================
   §14 PC 월간 뷰
   ============================================================ */
.bk-pc-month {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bk-pc-month__dow-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 0.5px solid var(--border);
}
.bk-pc-month__dow {
  font-size: 11px;
  color: var(--text-subtle);
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 12px;
  text-align: left;
  background: var(--surface);
}
.bk-pc-month__cells {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  gap: 1px;
  background: var(--border);
  overflow: hidden;
}
.bk-pc-month__cell {
  background: var(--surface);
  padding: 8px 10px;
  cursor: pointer;
  transition: background 0.12s;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 100px;
  overflow: hidden;
}
.bk-pc-month__cell:hover { background: var(--brand-bg); }
.bk-pc-month__cell--other { background: var(--surface-2); }
.bk-pc-month__cell--other .bk-pc-month__num {
  color: var(--text-subtle);
  opacity: 0.5;
}
.bk-pc-month__num {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.bk-pc-month__cell--today .bk-pc-month__num {
  color: var(--surface);
  background: var(--brand-strong);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.bk-pc-month__events {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  overflow: hidden;
}
.bk-pc-month__evt {
  font-size: 11px;
  padding: 2px 6px;
  background: var(--brand-bg);
  color: var(--brand-strong);
  border-radius: 4px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bk-pc-month__evt:hover { transform: translateY(-1px); }
.bk-pc-month__more {
  font-size: 11px;
  color: var(--text-subtle);
  font-weight: 600;
  padding: 0 6px;
}

/* ============================================================
   §15 PC 일간 뷰 (직원 컬럼 분할)
   ============================================================ */
.bk-pc-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bk-pc-day__header {
  display: grid;
  grid-template-columns: 80px repeat(3, 1fr);
  border-bottom: 0.5px solid var(--border);
  background: var(--surface);
}
.bk-pc-day__h-cell {
  padding: 14px 12px;
  text-align: center;
  border-left: 0.5px solid var(--border);
}
.bk-pc-day__h-cell:first-child {
  border-left: none;
  padding-top: 18px;
}

.bk-pc-day__h-meta {
  font-size: 11px;
  color: var(--text-subtle);
  margin-top: 2px;
  font-weight: 500;
}

.bk-pc-day__grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 80px repeat(3, 1fr);
  position: relative;
}
.bk-pc-day__grid::-webkit-scrollbar { width: 0; }

.bk-pc-day__time-col {
  display: flex;
  flex-direction: column;
  background: var(--surface);
}
.bk-pc-day__time-cell {
  height: var(--bk-h-pc-day, 80px);
  padding: 4px 12px 0 0;
  font-size: 11px;
  color: var(--text-subtle);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  border-top: 0.5px solid var(--border);
}
.bk-pc-day__time-cell:first-child { border-top: none; }

.bk-pc-day__hour {
  height: var(--bk-h-pc-day, 80px);
  border-top: 0.5px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}
.bk-pc-day__hour:first-child { border-top: none; }
.bk-pc-day__hour:hover { background: var(--brand-bg); }

.bk-pc-day__block {
  position: absolute;
  left: 8px;
  right: 8px;
  background: var(--brand-bg);
  border-left: 3px solid var(--brand-strong);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}
.bk-pc-day__block:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.bk-pc-day__block-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-strong);
  letter-spacing: -0.2px;
}
.bk-pc-day__block-time {
  font-size: 11px;
  color: var(--brand-strong);
  font-weight: 600;
  margin-top: 2px;
  opacity: 0.85;
}
.bk-pc-day__block-service {
  font-size: 11px;
  color: var(--brand-strong);
  margin-top: 4px;
  font-weight: 500;
  opacity: 0.85;
}

/* ============================================================
   §16 반응형 — 모바일 우선, PC 1100px+ 부터 좌측 사이드바 노출
   ============================================================ */
@media (max-width: 1099px) {
  .bk-pc__left { display: none; }
  .bk-pc__body { flex-direction: column; }
}

@media (min-width: 1100px) {
  .bk-pc__body { flex-direction: row; }
  .bk-pc__left { display: block; }
}

/* ============================================================
   §17 prefers-reduced-motion — hover transform 끄기
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .bk-block,
  .bk-week__block,
  .bk-pc-day__block,
  .bk-pc-month__evt {
    transition: none;
  }
  .bk-block:hover,
  .bk-week__block:hover,
  .bk-pc-day__block:hover,
  .bk-pc-month__evt:hover {
    transform: none;
  }
}

/* ═══ 상태 컬러코딩 (2026-05-16) ═══ */

/* is-dim: 취소/노쇼 (일간뷰 — 주간뷰는 2026-06-11 상태점 디자인으로 대체) */
.bk-block.is-dim,
.bk-pc-day__block.is-dim {
  opacity: 0.5;
}

/* [2026-05-26] confirmed — 차분한 파랑 (#5B7FC4) */
.bk-block.bk-st-confirmed,
.bk-pc-day__block.bk-st-confirmed {
  background: rgba(91,127,196,0.12);
}
.bk-st-confirmed .bk-block__title,
.bk-st-confirmed .bk-week__block-title,
.bk-st-confirmed .bk-pc-day__block-title { color: #2E4B85; }
.bk-st-confirmed .bk-block__sub,
.bk-st-confirmed .bk-week__block-sub,
.bk-st-confirmed .bk-pc-day__block-time,
.bk-st-confirmed .bk-pc-day__block-service { color: #5B7FC4; opacity: 0.85; }

.bk-month-m__evt.bk-st-confirmed,
.bk-month-pc__evt.bk-st-confirmed {
  background: rgba(91,127,196,0.12);
  color: #2E4B85;
}

/* completed — 초록 (#16B55E) */
.bk-block.bk-st-completed,
.bk-pc-day__block.bk-st-completed {
  background: rgba(22,181,94,0.12);
}
.bk-st-completed .bk-block__title,
.bk-st-completed .bk-week__block-title,
.bk-st-completed .bk-pc-day__block-title { color: #0F8746; }
.bk-st-completed .bk-block__sub,
.bk-st-completed .bk-week__block-sub,
.bk-st-completed .bk-pc-day__block-time,
.bk-st-completed .bk-pc-day__block-service { color: #16B55E; opacity: 0.85; }

.bk-month-m__evt.bk-st-completed,
.bk-month-pc__evt.bk-st-completed {
  background: rgba(22,181,94,0.12);
  color: #0F8746;
}

/* cancelled — 회색 + 취소선 */
.bk-block.bk-st-cancelled,
.bk-pc-day__block.bk-st-cancelled {
  background: var(--surface-2);
  border-left-color: var(--text-subtle);
}
.bk-st-cancelled .bk-block__title,
.bk-st-cancelled .bk-week__block-title,
.bk-st-cancelled .bk-pc-day__block-title {
  color: var(--text-subtle);
  text-decoration: line-through;
}
.bk-st-cancelled .bk-block__sub,
.bk-st-cancelled .bk-week__block-sub,
.bk-st-cancelled .bk-pc-day__block-time,
.bk-st-cancelled .bk-pc-day__block-service { color: var(--text-subtle); }

/* 월별 이벤트 — cancelled */
.bk-month-m__evt.bk-st-cancelled,
.bk-month-pc__evt.bk-st-cancelled {
  background: var(--surface-2);
  color: var(--text-subtle);
  text-decoration: line-through;
}

/* [2026-05-26] no_show — 빨강 (#E5484D) + 취소선 */
.bk-block.bk-st-noshow,
.bk-pc-day__block.bk-st-noshow {
  background: rgba(229,72,77,0.12);
}
.bk-st-noshow .bk-block__title,
.bk-st-noshow .bk-week__block-title,
.bk-st-noshow .bk-week-m__name,
.bk-st-noshow .bk-pc-day__block-title {
  color: #B0353A;
  text-decoration: line-through;
}
.bk-st-noshow .bk-block__sub,
.bk-st-noshow .bk-week__block-sub,
.bk-st-noshow .bk-pc-day__block-time,
.bk-st-noshow .bk-pc-day__block-service { color: #E5484D; opacity: 0.85; }

/* 월별 이벤트 — no_show */
.bk-month-m__evt.bk-st-noshow,
.bk-month-pc__evt.bk-st-noshow {
  background: rgba(229,72,77,0.12);
  color: #B0353A;
  text-decoration: line-through;
}

/* 텍스트 줄바꿈 방지 (모든 블록) */
.bk-block__title,
.bk-block__sub,
.bk-week-m__block,
.bk-week__block-title,
.bk-week__block-sub,
.bk-pc-day__block-title,
.bk-pc-day__block-time,
.bk-pc-day__block-service {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   [2026-05-17 v6] mockup-calendar-blocks 톤 — 직선 바 + 흰 배경
   bk-c-* 색 클래스는 인덱스 순서대로 부여됨 (하루 안 5색 순환)
   기존 .bk-block / .bk-pc-day__block / .bk-week__block / .bk-week-m__block 의
   톤을 in-place 덮어쓰기. status 톤 (.bk-st-*) 은 cancelled/no_show 만 회색으로.
   ============================================================ */
.bk-block--v6,
.bk-pc-day__block--v6,
/* [2026-06-11] 주간뷰 1안 상태점 카드 — PC */
.bk-week__block--v6 {
  background: #fff !important;
  border: 0.5px solid #E5E8EB !important;
  border-radius: 8px !important;
  padding: 5px 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  overflow: hidden;
  color: var(--text, #191F28);
  text-align: left !important;  /* [v6] button 의 기본 center 덮어쓰기 */
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: transform .08s ease, box-shadow .12s ease;
}
.bk-block--v6:hover,
.bk-pc-day__block--v6:hover,
.bk-week__block--v6:hover {
  background: var(--surface-2, #F7F8FA) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.bk-block--v6 .bk-block__body,
.bk-pc-day__block--v6 .bk-pc-day__block-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;  /* [v6] 왼쪽 정렬 */
  gap: 1px;
  overflow: hidden;
  text-align: left;
}

/* 좌측 컬러 바 — 5색 */
.bk-bar {
  display: inline-block;
  width: 3px;
  align-self: stretch;
  margin: 6px 0;
  border-radius: 2px;
  background: #C5CBD2;
  flex-shrink: 0;
}
/* [2026-05-26] 5색 순환 폐지 → status 색 일원화 (.bk-st-* 가 배경 담당) */
.bk-st-confirmed .bk-bar { background: #5B7FC4; }
.bk-st-completed .bk-bar { background: #16B55E; }
.bk-st-noshow    .bk-bar { background: #E5484D; }

/* 본문 텍스트 */
.bk-block--v6 .bk-block__title,
.bk-pc-day__block--v6 .bk-pc-day__block-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text, #191F28);
  letter-spacing: -0.3px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-block--v6 .bk-block__svc,
.bk-pc-day__block--v6 .bk-pc-day__block-svc {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted, #4E5968);
  margin-left: 6px;
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
}
.bk-block--v6 .bk-block__sub,
.bk-pc-day__block--v6 .bk-pc-day__block-time {
  font-size: 11px;
  color: var(--text-subtle, #8B95A1);
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* [2026-06-11] 주간뷰 1안 상태점 카드 — 모바일 (2줄: 점·시간 / 이름) */
.bk-week-m__block--v6 {
  background: #fff !important;
  border: 0.5px solid #E5E8EB !important;
  border-radius: 8px !important;
  padding: 2px 4px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 0 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  color: var(--text, #191F28);
  overflow: hidden;
}

/* status 우선 — cancelled / no_show 회색 + dim (일간뷰. 주간뷰는 상태점 디자인) */
.bk-block--v6.bk-st-cancelled,
.bk-block--v6.bk-st-noshow,
.bk-pc-day__block--v6.bk-st-cancelled,
.bk-pc-day__block--v6.bk-st-noshow {
  opacity: 0.55;
}
.bk-st-cancelled .bk-bar,
.bk-st-noshow .bk-bar {
  background: #C5CBD2 !important;
}

/* [v6] 완료 — 살짝 흐림 + 우측 ✓ 마크. 좌측 바는 고객 색 유지. strikethrough X. */
.bk-block--v6.bk-st-completed,
.bk-pc-day__block--v6.bk-st-completed {
  background: #FBFCFD !important;
  opacity: 0.78;
}
.bk-block--v6.bk-st-completed:hover,
.bk-pc-day__block--v6.bk-st-completed:hover {
  opacity: 1;
}
/* ✓ 완료 마크 — 우측 끝에 초록 동그라미 (구분용). 주간뷰는 인라인 ✓ 사용 */
.bk-block--v6.bk-st-completed::after,
.bk-pc-day__block--v6.bk-st-completed::after {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0F6E56;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  margin-right: 6px;
  margin-left: auto;
}

/* ── [2026-05-24] 예약 상태 색상 범례 ─────────────────────── */
.bk-legend {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 2px;
  font-size: 11px;
  color: var(--text-muted, #6B7684);
  flex-wrap: wrap;
}
.bk-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  letter-spacing: -0.2px;
  white-space: nowrap;
}
.bk-legend__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* 모바일 toolbar 안에서는 한 줄로 wrap, 작게 */
.bk-toolbar .bk-legend {
  margin-left: auto;
  padding-right: 4px;
}
@media (max-width: 480px) {
  .bk-toolbar .bk-legend {
    font-size: 10.5px;
    gap: 7px;
  }
}

/* [2026-05-28] 시간축 동적 확장 — 운영시간 밖 라벨은 분홍(브랜드) 색으로 "영업외 예약" 신호 */
.bk-day__hour-label.is-off,
.bk-week-m__time-cell.is-off,
.bk-week__time-cell.is-off,
.bk-pc-day__time-cell.is-off {
  color: var(--brand-strong);
}

/* [2026-05-28] 정보카드 재디자인 — PC 좌측 패널 (펼친 상태 디폴트) */
.bk-stat-card {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface-2);
  font-family: var(--font-sans);
  box-sizing: border-box;
}
.bk-stat-card__head {
  display: flex; align-items: flex-end; justify-content: space-between;
}
.bk-stat-card__label { font-size: 11px; color: #8B95A1; font-weight: 400; }
.bk-stat-card__count { font-size: 20px; color: #191F28; font-weight: 500; line-height: 1; }
.bk-stat-card__note  { font-size: 11px; color: #B0B8C1; margin-top: 2px; font-weight: 400; }
.bk-stat-card__row {
  display: flex; margin-top: 10px;
}
.bk-stat-card__cell {
  flex: 1; display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 0 8px;
  border-right: 0.5px solid var(--border, #E5E8EB);
}
.bk-stat-card__cell:last-child { border-right: none; }
.bk-stat-card__cell-label { font-size: 11px; color: #8B95A1; font-weight: 400; }
.bk-stat-card__cell-val   { font-size: 13px; color: #191F28; font-weight: 500; }
.bk-stat-card__cell.is-cancel .bk-stat-card__cell-label,
.bk-stat-card__cell.is-cancel .bk-stat-card__cell-val {
  color: var(--danger);
}

/* 모바일 카드 — 접힘 디폴트, 탭하면 펼침 */
.bk-stat-card--m {
  display: block; text-align: left;
  border: 0.5px solid transparent;
  background: var(--surface-2);
  cursor: pointer;
  padding: 12px 14px;
}
.bk-stat-card--m .bk-stat-card__label { font-size: 11px; }
.bk-stat-card--m .bk-stat-card__count { font-size: 16px; }
.bk-stat-card--m.is-open { border-color: var(--brand); }
.bk-stat-card__compact {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 4px; font-size: 11px; color: #8B95A1; font-weight: 400;
}
.bk-stat-card__caret { font-size: 12px; color: #B0B8C1; }
.bk-stat-mobile-row {
  display: grid; gap: 8px; padding: 8px 12px;
  grid-template-columns: 1fr 1fr;
}
.bk-stat-mobile-row.is-single { grid-template-columns: 1fr; }