/* 축의대 고객 달력은 토요일·일요일만 두 열로 보여줍니다. */
#customer-view .reception-weekdays,
#customer-view .reception-days {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#customer-view .reception-weekdays span:first-child {
  color: #526b8b;
}

#customer-view .reception-weekdays span:last-child {
  color: #ad5266;
}

#customer-view .reception-days .availability-day {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

#customer-view .reception-days .weekend-sunday {
  border-right: 0;
}

#customer-view .reception-days .last-weekend-row {
  border-bottom: 0;
}

#customer-view .reception-days .availability-day-placeholder {
  pointer-events: none;
}

/* 주차별로 화이트와 아이보리를 번갈아 구분합니다. */
#customer-view .reception-days .weekend-row-odd {
  background: #fff;
}

#customer-view .reception-days .weekend-row-even {
  background: #fbf6e8;
}

#customer-view .reception-days .weekend-row-odd .availability-day-slot {
  background: #fff;
}

#customer-view .reception-days .weekend-row-even .availability-day-slot {
  background: #f5edda;
}

/* 월·일 마감은 주차 교차색보다 우선해 연한 회색으로 표시합니다. */
#customer-view .reception-days .availability-day.month-closed,
#customer-view .reception-days .availability-day.day-closed {
  background: #f0f0ee;
  color: #8d8d89;
}

#customer-view .reception-days .availability-day.month-closed .availability-day-slot,
#customer-view .reception-days .availability-day.day-closed .availability-day-slot {
  background: #e7e7e4;
  color: #858581;
}

#customer-view .reception-days .availability-day,
#customer-view .reception-days .availability-day-slot,
#customer-view .reception-days .availability-day-booking {
  color: #625f5c;
}

/* 날짜 전체·오전·오후를 각각 선택할 수 있습니다. */
.availability-calendar-card .availability-day {
  display: grid;
  min-height: 94px;
  padding: 0;
  grid-template-rows: minmax(0, 1fr) auto;
}

.availability-day-main {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 9px;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.availability-day-heading {
  display: flex;
  min-height: 25px;
  align-items: center;
  gap: 7px;
}

.availability-day-heading > b {
  display: grid;
  min-width: 25px;
  height: 25px;
  place-items: center;
  font: 400 14px var(--serif);
}

.availability-day-closed-label {
  display: inline-grid;
  min-height: 17px;
  padding: 2px 6px;
  place-items: center;
  border-radius: 999px;
  background: #ead5da;
  color: var(--wine);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.25;
}

.availability-day-bookings {
  display: grid;
  width: 100%;
  margin-top: 8px;
  gap: 4px;
}

.availability-day-booking {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 4px 6px;
  border-radius: 8px;
  background: #faf6f7;
  color: var(--wine);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.4;
  overflow-wrap: anywhere;
  white-space: normal;
}

.availability-day.today .availability-day-heading > b {
  border-radius: 50%;
  background: var(--wine);
  color: #fff;
}

.availability-day-main.active {
  background: #f8f1f2;
}

.availability-day-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
}

.availability-day-slot {
  display: flex;
  min-width: 0;
  padding: 6px 3px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  border-right: 1px solid var(--line);
  background: #faf8f5;
  color: #557050;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}

.availability-day-slot:last-child {
  border-right: 0;
}

.availability-day-slot em {
  font-size: 8px;
  font-style: normal;
}

.availability-day-slot.active {
  background: var(--wine);
  color: #fff;
}

.availability-day-slot.none {
  color: #ad5266;
}

.availability-day-slot.none.active {
  color: #fff;
}

.availability-day-main:focus-visible,
.availability-day-slot:focus-visible {
  position: relative;
  z-index: 2;
  outline: 2px solid var(--wine);
  outline-offset: -2px;
}

.availability-result-card {
  scroll-margin-top: 86px;
}

.reception-bookings {
  margin-top: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
}

.reception-bookings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.reception-bookings-head h3 {
  margin: 0;
  font-size: 12px;
}

.reception-bookings-head span {
  color: var(--muted);
  font-size: 9px;
}

.reception-booking-list {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.reception-booking-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding-top: 7px;
  border-top: 1px solid #eee8e2;
}

.reception-booking-row strong {
  color: var(--wine);
  font-size: 10px;
}

.reception-booking-row span,
.reception-booking-empty {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.reception-booking-empty {
  margin-top: 10px;
}

.availability-member-avatar.custom {
  background-position: center !important;
  background-size: cover !important;
}

.availability-calendar-card .availability-day.blocked,
.availability-calendar-card .availability-day.blocked.outside {
  position: relative;
  background: #e5e3e0;
  color: #aaa5a0;
  box-shadow: none;
}

.availability-calendar-card .availability-day.outside:not(.blocked) {
  opacity: .42;
  background: #f8f5f1;
}

.availability-calendar-card .availability-day.outside:not(.blocked) .availability-day-slots {
  visibility: hidden;
}

.availability-day.blocked button {
  cursor: not-allowed;
}

.availability-day.blocked .availability-day-slots {
  opacity: .18;
}

.availability-day.blocked .weekday-block-label {
  position: absolute;
  z-index: 3;
  right: 4px;
  bottom: 4px;
  left: 4px;
  display: grid;
  min-height: 22px;
  place-items: center;
  border-radius: 6px;
  background: #d5d2ce;
  color: #8f8983;
  font-size: 8px;
  font-weight: 800;
  pointer-events: none;
}

.availability-day.blocked.today .availability-day-main > b {
  background: #b7b2ad;
  color: #f7f5f2;
}

@media (max-width: 560px) {
  .availability-calendar-card .availability-day {
    min-height: 68px;
    padding: 0;
  }

  .availability-day-main {
    min-height: 39px;
    padding: 6px;
  }

  .availability-day-slot {
    padding: 5px 1px;
    font-size: 8px;
  }

  .availability-day-slot em {
    display: none;
  }

  .availability-result-card {
    scroll-margin-top: 76px;
  }
}

/* 성공 안내가 비어 있으면 상태 영역 자체도 접어 달력 아래 여백을 남기지 않습니다. */
.availability-status:empty {
  display: none;
}


.availability-region-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 7px;
}
.reception-region-filter { margin: 14px 0 12px; }
.reception-region-filter > strong { color: var(--muted); font-size: 11px; }
.availability-region-tabs button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.availability-region-tabs button.active {
  border-color: var(--wine);
  background: var(--wine);
  color: #fff;
}
@media (max-width: 560px) {
  .availability-region-tabs { gap: 5px; }
  .availability-region-tabs button { min-height: 38px; font-size: 11px; }
}