/* ===================================
   예약/신청 시스템 컴포넌트 (Reservation System)
   - 이벤트 캘린더, 회의실/장비 예약, 예약 세부
   =================================== */

/* ===================================
   1. 날짜 선택 네비게이터
   =================================== */
.date-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-bottom: var(--gap-form-divider);
}

.date-nav__display {
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  color: var(--color-gray-900);
  line-height: 1.2;
}

.date-nav__btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--color-gray-500);
  transition: var(--transition);
}

.date-nav__btn:hover {
  color: var(--color-primary-700);
}

.date-nav__btn .icon {
  width: 24px;
  height: 24px;
  stroke-width: 3;
}

.date-nav__calendar-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background: var(--color-white);
  cursor: pointer;
  color: var(--color-gray-600);
  transition: var(--transition);
}

.date-nav__calendar-btn:hover {
  border-color: var(--color-primary-700);
  color: var(--color-primary-700);
}

.date-nav__calendar-btn .icon {
  width: 20px;
  height: 20px;
}

/* ===================================
   2. 타임라인 바 (09:00~22:00)
   =================================== */
.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.timeline__bar {
  display: flex;
  height: 32px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background-color: var(--color-gray-100);
}

.timeline__slot {
  flex: 1;
  border-right: 1px solid var(--color-white);
}

.timeline__slot:last-child {
  border-right: none;
}

.timeline__slot--available {
  background-color: var(--color-gray-100);
}

.timeline__slot--booked {
  background-color: var(--color-gray-400);
}

.timeline__slot--selected {
  background-color: var(--color-primary-500);
}

.timeline__labels {
  display: flex;
  justify-content: space-between;
}

.timeline__label {
  font-size: var(--fs-small);
  color: var(--color-gray-500);
  font-family: var(--font-body);
}

/* ===================================
   3. 즐겨찾기 버튼
   =================================== */
.favorite-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-gray-400);
  transition: var(--transition);
  flex-shrink: 0;
}

.favorite-btn:hover {
  color: var(--color-warning);
}

.favorite-btn.is-active {
  color: var(--color-warning);
}

.favorite-btn .icon {
  width: 24px;
  height: 24px;
}

/* ===================================
   4. 카테고리 탭
   =================================== */
.category-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.category-tab {
  padding: var(--space-2) var(--space-5);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-gray-700);
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: var(--transition);
}

.category-tab:hover {
  border-color: var(--color-primary-700);
  color: var(--color-primary-700);
}

.category-tab.is-active {
  background-color: var(--color-primary-900);
  border-color: var(--color-primary-900);
  color: var(--color-white);
  font-weight: var(--fw-semibold);
}

/* ===================================
   5. 시간 슬롯 그리드 (30분 단위)
   =================================== */
.timeslot-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-2);
  margin-bottom: var(--gap-form-divider);
}

.timeslot-grid__legend {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-gray-100);
  border-radius: var(--radius-md);
}

.timeslot-grid__legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-gray-700);
}

.timeslot-grid__legend-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
}

.timeslot-grid__legend-dot--available {
  background-color: var(--color-white);
}

.timeslot-grid__legend-dot--booked {
  background-color: var(--color-gray-500);
}

.timeslot-grid__legend-dot--selected {
  background-color: var(--color-primary-900);
}

.timeslot {
  padding: var(--space-3) var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  text-align: center;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background: var(--color-white);
  cursor: pointer;
  transition: var(--transition);
  color: var(--color-gray-900);
}

.timeslot:hover {
  border-color: var(--color-primary-700);
  background-color: var(--color-primary-25);
}

.timeslot.is-booked {
  background-color: var(--color-gray-300, #E5E7EB);
  color: var(--color-gray-500);
  cursor: not-allowed;
  border-color: var(--color-gray-300, #E5E7EB);
}

.timeslot.is-selected {
  background-color: var(--color-primary-900);
  color: var(--color-white);
  border-color: var(--color-primary-900);
}

/* 시작 시간 결정 후 도달 불가 슬롯 (시작 이전 / booked 너머 / maxResveMin 초과) */
.timeslot.is-out-of-range {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* 선택 시간 요약 영역 — 첫 슬롯 선택 시 표시 (시작~끝 + 총 소요시간) */
.timeslot-summary {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-primary-25);
  border: 1px solid var(--color-primary-700);
  border-radius: var(--radius-md, 8px);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--fs-small);
}

.timeslot-summary__label {
  color: var(--color-gray-700, var(--color-gray-500));
  font-weight: var(--fw-medium);
}

.timeslot-summary__range {
  color: var(--color-primary-900);
  font-weight: var(--fw-bold);
}

.timeslot-summary__duration {
  color: var(--color-gray-600, var(--color-gray-500));
}

/* ===================================
   6. 예약 요약 카드
   =================================== */
/* 예약 확인 모달 상단 체크 아이콘 */
.reservation-confirm-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-2) 0 var(--space-6);
  border-bottom: 1px solid var(--color-gray-300);
  margin-bottom: var(--space-4);
}

.reservation-confirm-top__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-700, #0066CC);
  color: var(--color-white, #fff);
  margin-bottom: var(--space-4);
}

.reservation-confirm-top__icon svg {
  width: 28px;
  height: 28px;
}

/* 경고 변형: 권한 신청 등 (빨간 원형 배경 + 느낌표) */
.reservation-confirm-top__icon--alert {
  background-color: var(--color-danger-500, #e53935);
  color: var(--color-white, #fff);
}

/* 필수 표시 (*) 빨강 */
.required {
  color: var(--color-danger-500, #e53935);
  margin-left: 2px;
}

.reservation-confirm-top__title {
  font-size: var(--fs-title-md);
  font-weight: var(--fw-bold);
  color: var(--color-gray-900);
  margin-bottom: 0;
}

.reservation-confirm-top__desc {
  font-size: var(--fs-small);
  color: var(--color-gray-500);
  margin-top: 2px;
}

.reservation-summary {
  background: var(--color-white);
  padding: 0;
}

.reservation-summary__title {
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-6);
  line-height: 1.2;
}

.reservation-summary__row {
  display: flex;
  align-items: center;
  padding: var(--space-3) 0;
}

.reservation-summary__label {
  width: 80px;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-gray-500);
  flex-shrink: 0;
}

.reservation-summary__value {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-gray-900);
}

.reservation-summary__btn {
  margin-top: var(--space-6);
}

/* ===================================
   7. 이벤트 캘린더
   =================================== */
.event-calendar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* 상단: 월 타이틀 + 네비 + 범례 한 줄 */
.event-calendar__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.event-calendar__month {
  font-size: var(--fs-title-lg);
  font-weight: var(--fw-extrabold);
  color: var(--color-gray-900);
  line-height: 1.2;
}

.event-calendar__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.event-calendar__legend {
  display: flex;
  gap: var(--space-4);
  margin-left: auto;
}

.event-calendar__legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-gray-700);
}

.event-calendar__legend-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
}

/* 이벤트 카테고리 컬러 */
.event-calendar__legend-dot--edu { background-color: var(--color-primary-500, #0F86CA); }
.event-calendar__legend-dot--event { background-color: var(--color-primary-900, #03368C); }
.event-calendar__legend-dot--seminar { background-color: var(--color-teal-500); }
.event-calendar__legend-dot--conference { background-color: var(--color-purple-500); }
.event-calendar__legend-dot--approved { background-color: var(--color-success); }
.event-calendar__legend-dot--pending { background-color: var(--color-warning); }
.event-calendar__legend-dot--rjct { background-color: var(--color-error); }

/* 캘린더 그리드 — 셀 사이 구분선 스타일 */
.event-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  border-bottom: 1px solid var(--color-gray-300);
}

.event-calendar__weekday {
  padding: var(--space-2) 0 var(--space-3);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-gray-400);
  border-bottom: 1px solid var(--color-gray-300);
}

.event-calendar__day {
  padding: var(--space-2) 0;
  aspect-ratio: 1;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  /* 셀 사이 구분선 */
  border-top: 1px solid var(--color-gray-300);
  border-right: 1px solid var(--color-gray-300);
}

/* 각 행의 마지막 셀(토요일) 오른쪽 보더 제거 */
.event-calendar__day:nth-child(7n + 14) {
  border-right: none;
}

/* 첫째 주 day셀(child 8~14) border-top 제거 */
.event-calendar__day:nth-child(n + 8):nth-child(-n + 14) {
  border-top: none;
}

.event-calendar__day:hover {
  background-color: var(--color-gray-50, #F9FAFB);
}

/* 선택 날짜: 숫자에 원형 네이비 서클 배경 */
.event-calendar__day.is-selected .event-calendar__day-num {
  background-color: var(--color-navy-800, #1E3A5F);
  color: var(--color-white, #fff);
  border-radius: var(--radius-full);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-indent: 0;
}

/* 오늘 날짜: 숫자에 원형 아웃라인 */
.event-calendar__day.is-today .event-calendar__day-num {
  border: 2px solid var(--color-gray-400);
  border-radius: var(--radius-full);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* 일요일 날짜 숫자 빨간색 */
.event-calendar__day:nth-child(7n + 8) .event-calendar__day-num {
  color: var(--color-red-500, #EF4444);
}
/* 선택된 일요일은 흰색 유지 */
.event-calendar__day.is-selected:nth-child(7n + 8) .event-calendar__day-num {
  color: var(--color-white, #fff);
}

.event-calendar__day-num {
  display: inline-block;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-gray-900);
  padding: 0;
  margin: 0 auto 6px;
  text-align: center;
  transition: var(--transition);
}

/* ── 이벤트 바 (bar) ── */
.event-calendar__day-events {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  margin-top: auto;
}

.event-calendar__bar {
  display: block;
  height: 26px;
  line-height: 26px;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-white, #fff);
  padding: 0 var(--space-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 단일 일정 (하루) — 양쪽 라운드 */
.event-calendar__bar--single {
  border-radius: var(--radius-sm);
  margin: 0 6px;
}

/* 시작일 — 왼쪽 라운드, 오른쪽은 셀 끝까지 */
.event-calendar__bar--start {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  margin-left: 6px;
  margin-right: -1px;
}

/* 중간일 — 라운드 없이 셀 전체 폭 */
.event-calendar__bar--mid {
  border-radius: 0;
  margin-left: -1px;
  margin-right: -1px;
}

/* 종료일 — 오른쪽 라운드 */
.event-calendar__bar--end {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-left: -1px;
  margin-right: 6px;
}

/* 숨김 유틸리티 */
.event-list__item.is-hidden,
.event-calendar__empty.is-hidden { display: none; }

/* 이벤트 카테고리 컬러 — 블루 계열 */
.event-calendar__bar--edu { background-color: var(--color-primary-500, #0F86CA); }
.event-calendar__bar--event { background-color: var(--color-primary-900, #03368C); }
.event-calendar__bar--seminar { background-color: var(--color-teal-500); }
.event-calendar__bar--conference { background-color: var(--color-purple-500); }

/* 스페이서: 같은 slot 위치 유지용 투명 바 */
.event-calendar__bar--spacer {
  background-color: transparent;
  pointer-events: none;
}

/* 상단: 캘린더 */
.event-calendar__left {
  padding: 0;
}

/* 하단: 이벤트 리스트 */
.event-calendar__right {
  padding: 0;
}

.event-calendar__legend--below {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-gray-100);
  border-radius: var(--radius-md);
  margin-top: var(--space-3);
}


.event-calendar__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: var(--space-12) var(--space-6);
  background-color: var(--color-gray-100, #F3F4F6);
  border-radius: var(--radius-lg);
  color: var(--color-gray-500);
}

.event-calendar__empty-title {
  font-size: var(--fs-title-md);
  font-weight: var(--fw-bold);
  color: var(--color-gray-900);
  margin-bottom: var(--space-2);
  line-height: 1.2;
}

.event-calendar__empty-desc {
  font-size: var(--fs-body);
  color: var(--color-gray-500);
}

/* 이벤트 리스트 (우측) */
.event-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
}

.event-list::-webkit-scrollbar {
  display: none;
}

.event-list__item {
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: var(--transition);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}

.event-list__item:hover {
  border-color: var(--color-primary-700);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.08));
}

.event-list__badge {
  /* 크기·padding·radius는 .badge--md에서 상속. 색상은 .badge--info/--primary/--teal/--purple */
  /* 레이아웃 역할만 유지 */
  flex-shrink: 0;
  vertical-align: middle;
  font-weight: var(--fw-semibold);
}

.event-list__info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.event-list__title {
  font-size: var(--fs-block);
  font-weight: var(--fw-bold);
  color: var(--color-gray-900);
  line-height: 1.2;
}

.event-list__meta {
  font-size: var(--fs-small);
  color: var(--color-gray-600);
  line-height: 1.6;
}

.event-list__more {
  margin-top: var(--space-1);
}

.event-list__more-link {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-primary-700);
  text-decoration: none;
}

.event-list__more-link:hover {
  text-decoration: underline;
}

/* ===================================
   8. 회의실/장비 예약 카드
   =================================== */
.room-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
}

.room-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.room-card__info {
  flex: 1;
}

.room-card__name {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-gray-900);
  line-height: 1.2;
  margin-bottom: var(--space-1);
}

.room-card__capacity {
  display: inline-block;
  padding: 2px var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-primary-700);
  background: var(--color-primary-50);
  border-radius: var(--radius-full);
  margin-left: var(--space-2);
}

.room-card__location {
  font-size: var(--fs-small);
  color: var(--color-gray-600);
}

/* 장비 카드 (이미지 포함) */
.equip-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.equip-card__image {
  width: 100%;
  height: 160px;
  object-fit: cover;
  background-color: var(--color-gray-100);
}

.equip-card__body {
  padding: var(--space-5);
}

.equip-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.equip-card__badge {
  display: inline-block;
  padding: 2px var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-primary-700);
  background: var(--color-primary-50);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-2);
}

.equip-card__name {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-gray-900);
  line-height: 1.2;
  margin-bottom: var(--space-1);
}

.equip-card__location {
  font-size: var(--fs-small);
  color: var(--color-gray-600);
  margin-bottom: var(--space-4);
}

.equip-card__timeline-label {
  font-size: var(--fs-small);
  color: var(--color-gray-500);
  margin-bottom: var(--space-1);
}

/* 장비 카드 그리드 */
.equip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* ===================================
   9. 예약 세부 페이지
   =================================== */
.reserve-detail {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-4);
  align-items: start;
}

.reserve-detail__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.reserve-detail__sidebar {
  position: sticky;
  top: 24px;
}

/* 예약 대상 정보 */
.reserve-info {
  display: flex;
  gap: var(--space-6);
  background: var(--color-white);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.reserve-info__image {
  width: 200px;
  align-self: stretch;
  object-fit: cover;
  border-radius: var(--radius-md);
  background-color: var(--color-gray-100);
  flex-shrink: 0;
}

.reserve-info__content {
  flex: 1;
}

.reserve-info__badge {
  /* 크기·색상은 .badge--lg .badge--soft에서 상속. 이 클래스는 레이아웃 역할만 */
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-2);
}

.reserve-info__name {
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  color: var(--color-gray-900);
  line-height: 1.2;
  margin-bottom: var(--space-2);
}

.reserve-info__meta {
  font-size: var(--fs-body);
  color: var(--color-gray-600);
  line-height: 1.8;
}

/* 예약 대상 정보 (축소형) */
.reserve-info--compact {
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
}

.reserve-info--compact .reserve-info__badge {
  margin-bottom: 0;
}

.reserve-info--compact .reserve-info__name {
  font-size: var(--fs-body);
  margin-bottom: 0;
}

.reserve-info--compact .reserve-info__location {
  font-size: var(--fs-small);
  color: var(--color-gray-600);
}

/* 신청 정보 입력 폼 */
.reserve-form {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-top: var(--gap-layout-page-header);
}

.reserve-form:first-child {
  margin-top: 0;
}

.reserve-form__actions {
  margin-top: var(--gap-layout-page-header);
}

.reserve-form__title {
  font-size: var(--fs-title-sm);
  font-weight: var(--fw-bold);
  color: var(--color-gray-900);
  line-height: 1.2;
  margin-bottom: var(--space-6);
  padding-left: var(--space-4);
  position: relative;
}

.reserve-form__title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  background-color: var(--color-primary-700);
  border-radius: var(--radius-sm);
}

/* 신청 정보: 라벨-인풋 좌우 배치 (교육 신청과 통일) */
.reserve-form .member-form .form-group {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  margin-bottom: 0;
  border-bottom: 1px solid var(--color-gray-300);
}

/* 비활성 상태: 회색 표시 + 상호작용 차단 (예: 매주 반복 체크 OFF 시) */
.reserve-form .member-form .form-group.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.reserve-form .member-form .form-group:last-child {
  border-bottom: none;
}

.reserve-form .member-form .form-label {
  flex: 0 0 140px;
  margin-bottom: 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-gray-700);
  white-space: nowrap;
}

.reserve-form .member-form .form-control {
  flex: 1;
}

/* textarea는 좌우 배치 시 상단 정렬 */
.reserve-form .member-form .form-group:has(textarea) {
  align-items: flex-start;
}

.reserve-form .member-form .form-group:has(textarea) .form-label {
  padding-top: var(--space-3);
}

@media (max-width: 767px) {
  .reserve-form .member-form .form-group {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .reserve-form .member-form .form-label {
    flex: none;
  }

  .reserve-form .member-form .form-group:has(textarea) .form-label {
    padding-top: 0;
  }
}

/* ===================================
   10. 섹션 타이틀 (예약 페이지용)
   =================================== */
.section-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.section-title-row__num {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-900);
  color: var(--color-white);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.section-title-row__text {
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  color: var(--color-gray-900);
  line-height: 1.2;
}

/* ===================================
   11. 반응형
   =================================== */
@media (max-width: 1023px) {
  .event-calendar {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .event-calendar__empty {
    padding: var(--space-10) var(--space-5);
  }

  .reserve-detail {
    grid-template-columns: 1fr;
  }

  .equip-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .event-calendar {
    gap: var(--space-4);
  }

  .event-calendar__header {
    flex-wrap: nowrap;
    gap: var(--space-2);
    justify-content: center;
  }

  .event-calendar__month {
    font-size: var(--fs-title-md);
  }

  .event-calendar__legend {
    margin-left: 0;
    width: 100%;
  }

  .event-calendar__legend-item {
    font-size: var(--fs-small);
    gap: var(--space-1);
  }

  .event-calendar__legend-dot {
    width: 8px;
    height: 8px;
  }

  .event-calendar__legend {
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: center;
  }

  .event-calendar__legend--below {
    padding: var(--space-2) var(--space-1);
  }

  .event-calendar__weekday {
    font-size: var(--fs-small);
    padding: 6px 0 var(--space-2);
  }

  .event-calendar__day {
    padding: var(--space-1) 0;
  }

  .event-calendar__day-num {
    font-size: var(--fs-small);
    padding: 0 var(--space-1);
    margin: 0 0 2px 2px;
  }

  .event-calendar__day.is-selected .event-calendar__day-num,
  .event-calendar__day.is-today .event-calendar__day-num {
    width: 24px;
    height: 24px;
    line-height: 24px;
  }

  .event-calendar__bar {
    height: 16px;
    line-height: 16px;
    font-size: var(--fs-small);
  }

  .event-calendar__empty {
    padding: var(--space-8) var(--space-4);
  }

  .event-calendar__empty-title {
    font-size: var(--fs-body);
  }

  .event-calendar__empty-desc {
    font-size: var(--fs-small);
  }

  .event-list__item {
    padding: var(--space-3);
  }

  .event-list__info {
    gap: var(--space-2);
  }

  .event-list__title {
    font-size: var(--fs-small);
  }

  .event-list__meta {
    font-size: var(--fs-small);
  }

  .timeslot-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .equip-grid {
    grid-template-columns: 1fr;
  }

  .reserve-info {
    flex-direction: column;
  }

  .reserve-info__image {
    width: 100%;
    height: 200px;
  }

  .date-nav {
    justify-content: center;
  }
}

/* ===================================
   Step Indicator (예약 신청 단계 — 회원가입 스타일 재사용)
   =================================== */
.step-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-bottom: var(--gap-form-divider);
  padding: var(--space-6) 0;
}

.step-indicator__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 100px;
  position: relative;
}

.step-indicator__number {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: var(--color-gray-400);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-white);
  position: relative;
  z-index: 1;
}

.step-indicator__text {
  font-size: var(--fs-block);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  color: var(--color-gray-500);
  white-space: nowrap;
  text-align: center;
}

.step-indicator__connector {
  flex: 1;
  height: 2px;
  background-color: var(--color-gray-300);
  min-width: 40px;
  align-self: flex-start;
  margin-top: 23px;
}

/* 활성 스텝 */
.step-indicator__item--active .step-indicator__number {
  background-color: var(--color-primary-900);
}

.step-indicator__item--active .step-indicator__text {
  color: var(--color-primary-900);
  font-weight: var(--fw-bold);
}

/* 완료된 스텝 */
.step-indicator__item--completed .step-indicator__number {
  background-color: var(--color-primary-900);
}

.step-indicator__item--completed .step-indicator__text {
  color: var(--color-primary-900);
  font-weight: var(--fw-medium);
}

/* 완료 스텝 뒤의 커넥터도 채움 */
.step-indicator__item--completed + .step-indicator__connector {
  background-color: var(--color-primary-900);
}

.reserve-step[hidden] {
  display: none;
}

/* Step 상단 간격: reserve-info 아래 첫 섹션부터 */
.step-indicator + .reserve-info {
  margin-bottom: var(--gap-layout-page-header);
}

.reserve-info + .reserve-step .reserve-form:first-child {
  margin-top: 0;
}

/* 예약 날짜 range (한 줄) */
.reserve-date-range {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.reserve-date-range .form-group {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.reserve-date-range__separator {
  font-size: var(--fs-block);
  color: var(--color-gray-500);
  font-weight: var(--fw-semibold);
}

/* 단일 날짜일 때 종료일 숨김 */
.reserve-date-range.is-single .reserve-date-range__separator,
.reserve-date-range.is-single #reserve-date-end,
.reserve-date-range.is-single .form-group:last-child {
  display: none;
}

.reserve-summary-compact {
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  font-size: var(--fs-small);
}

.reserve-summary-compact strong {
  display: inline-block;
  min-width: 70px;
  color: var(--color-gray-700);
  font-weight: var(--fw-semibold);
}

/* 장비 상세 정보 → components.css .item-detail 로 이전 */

/* 기기 상세 정보 섹션 (드롭다운 내부) */
.equip-detail-section {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) 0;
}

.equip-detail-section:last-child {
  border-bottom: none;
}

.equip-detail-section__title {
  flex: 0 0 80px;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-gray-900);
  margin: 0;
}

.equip-detail-section__text {
  font-size: var(--fs-body);
  color: var(--color-gray-600);
  line-height: 1.6;
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.equip-detail-section__text li {
  display: inline;
}

.equip-detail-section__text li + li::before {
  content: ' · ';
  color: var(--color-gray-400);
}

/* 장비 예약 페이지도 시설 페이지와 동일 — space-between 정렬(.directions-detail__toggle 기본값) 유지 */

/* 관련 자료 — 링크 리스트 (인라인 유지 + 파란 링크) */
.equip-detail-section__text--links a {
  color: var(--color-primary-700);
  text-decoration: underline;
}

/* 장비상세/Step 간 공통 간격 */
.reserve-step {
  margin-top: var(--gap-layout-section-compact);
}

/* ===================================
   예약 요약 테이블
   =================================== */
/* .reserve-summary-table — .table.table--label 표준 사용, 페이지 고유(컬럼 폭, 강조 텍스트)만 정의.
   specificity 보강: components.css `.table--label tbody th` (0,1,2) 이 `width: 1%` 로 덮는 회귀 차단.
   `.table--label.reserve-summary-table tbody th` = (0,2,2) 로 우선권 확보 + min-width 보강. */
.table--label.reserve-summary-table tbody th {
  width: 140px;
  min-width: 140px;
}

.reserve-summary-table__highlight {
  color: var(--color-primary-500);
  font-weight: var(--fw-semibold);
}

/* 반복 예약 영역 */
.reserve-repeat {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.reserve-repeat__select {
  max-width: 200px;
}


/* 날짜 범위 입력 행 (시작·종료 datepicker 가로 배치) */
.reserve-date-range {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* ============================================================
   반복예약 재설계 — 섹션 숨김 + 안내 힌트 + 사전검증 확인 모달
   ============================================================ */

/* 단건/반복 전환 시 섹션 숨김 (reserve-form 은 별도 display 규칙이 있으므로 명시) */
.reserve-form[hidden] {
  display: none;
}

/* 예약 유형/반복 설정 안내 문구 */
.reserve-form__hint {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-gray-500);
}

/* 확인 모달: 날짜별 가능/불가 리스트 */
.reserve-check__lead {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-body);
  color: var(--color-gray-900);
}

.reserve-check__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 360px;
  overflow-y: auto;
}

.reserve-check__item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
}

.reserve-check__item--unavailable {
  background-color: var(--color-gray-100);
}

.reserve-check__date {
  font-weight: var(--fw-semibold);
  color: var(--color-gray-900);
}

.reserve-check__reason {
  font-size: var(--fs-small);
  color: var(--color-error);
}

.reserve-check__summary {
  margin: var(--space-4) 0 0;
  font-weight: var(--fw-semibold);
  color: var(--color-gray-900);
}