body {
  font-family: 'Noto Sans KR', sans-serif;
  background-color: #ffffff;
  color: #18181b;
}

/* 전체 페이지 래퍼 (모바일 기준 최대 폭 중앙 정렬) */
.facility-page {
  max-width: 768px;
  margin: 0 auto;
  min-height: max(884px, 100dvh);
  background-color: #ffffff;
}

/* 전체 레이아웃 폭: 접수하기 버튼까지와 동일하게 */
.facility-layout {
  max-width: 1100px;
  /* 필요하면 1000~1200 사이에서 조정 */
  margin: 0 auto;
}

/* 헤더 */
.facility-header-title {
  font-size: 1rem;
  font-weight: 700;
}

/* 메인 이미지 비율 통일 */
.facility-main-image {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* 반응형: 중간 크기 화면에서 이미지 크기 조정 */
@media (min-width: 768px) and (max-width: 991px) {
  .facility-main-image {
    max-height: 400px;
  }
}

/* 썸네일 공통 스타일 */
.facility-thumb {
  cursor: pointer;
  width: 100%;
  height: 80px;
  object-fit: cover;
  border: 2px solid transparent;
  transition: border-color .15s ease, box-shadow .15s ease;
  display: block;
}

/* 썸네일 컬럼 동일 크기 유지 */
.row.g-2>.col {
  flex: 1 1 0;
  min-width: 0;
}

/* 썸네일 active 상태 */
.facility-thumb.thumb-active {
  border-color: #0d6efd;
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

/* 타이틀 & 기본 정보 */
.facility-title {
  font-size: 1.25rem;
  font-weight: 700;
}

.info-label {
  font-size: 0.85rem;
  color: #64748b;
}

.info-value {
  font-size: 0.9rem;
  font-weight: 500;
}

/* 추가 정보 박스 */
.facility-extra {
  font-size: 0.85rem;
}

/* 구분선 */
.facility-divider {
  height: 8px;
  background-color: #f8fafc;
}

/* 탭 버튼 */
.facility-tab {
  color: #6c757d;
}

.facility-tab.active {
  color: #0d6efd;
  border-bottom: 2px solid #0d6efd !important;
}

/* 섹션 제목 */
.section-subtitle {
  font-size: 1.05rem;
  font-weight: 700;
}

/* 이용료 테이블 헤더 */
.facility-fee-table thead th {
  background-color: #f8f9fa;
  font-weight: 600;
}

.facility-fee-table tbody td {
  font-size: 0.9rem;
}

/* 푸터(고정 버튼 영역) */
.facility-footer {
  position: sticky;
  bottom: 0;
  padding: 0.75rem 0.5rem;
}

/* 체육시설 상세보기 제목 스타일 */
.sub-tit {
  margin-bottom: 1.5em;
  font-weight: 500;
  font-size: 1.5em;
  letter-spacing: -.11em;
  text-align: center;
  color: #343d48;
}

/* 상세/위치 탭 영역을 버튼 폭과 맞추기 */
/* .facility-tab-wrapper { 별도 여백이 필요하면 여기서 조정 } */

/* 위/아래 구분선 길이를 오른쪽 컬럼 폭에 맞추고 싶을 때 */
.facility-hr {
  margin-left: 0;
  width: 100%;
}

/* 버튼 행이 너무 넓게 퍼지지 않게 하고 싶으면 (선택) */
/* .facility-btn-row { max-width: 520px; } */

/* 캘린더 뷰 스타일 */
.facility-calendar-container {
  margin-bottom: 1.5rem;
}

.facility-calendar-grid {
  display: flex;
  flex-direction: column;
  background-color: #f8f9fa;
  width: 100%;
}

.facility-calendar-row {
  display: grid;
  grid-template-columns: 80px repeat(7, 1fr);
  width: 100%;
}

.facility-calendar-time-slot {
  height: 40px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.375rem;
  font-size: 0.7rem;
  color: #64748b;
  background-color: #ffffff;
  position: relative;
  border-right: 1px solid #e2e8f0;
  min-width: 80px;
  flex-shrink: 0;
}

.facility-calendar-time-slot.time-label {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #475569;
}

.facility-calendar-time-slot.time-label-maintenance {
  background-color: #f1f5f9;
  font-weight: 600;
  color: #475569;
}

.facility-calendar-day-header {
  padding: 0.5rem 0.375rem;
  text-align: center;
  font-weight: 700;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  font-size: 0.8rem;
}

.facility-calendar-day-header:last-child {
  border-right: none;
}

.facility-calendar-day-cell {
  height: 40px;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  background-color: #ffffff;
  position: relative;
  min-width: 0;
}

.facility-calendar-day-header:last-child,
.facility-calendar-day-cell:last-child {
  border-right: none;
}

.facility-calendar-day-cell.available {
  background-color: #e7f3ff;
}

.facility-calendar-day-cell.maintenance {
  background-color: #f1f5f9;
  background-image: repeating-linear-gradient(45deg,
      transparent,
      transparent 10px,
      rgba(203, 213, 225, 0.4) 10px,
      rgba(203, 213, 225, 0.4) 20px);
}

.facility-calendar-booking-block {
  position: absolute;
  left: 2px;
  right: 2px;
  background-color: #0056b3;
  color: #ffffff;
  padding: 0.125rem 0.25rem;
  border-radius: 0.2rem;
  font-size: 0.65rem;
  z-index: 10;
  cursor: pointer;
  transition: background-color 0.2s;
  box-shadow: 0 1px 3px rgba(0, 86, 179, 0.3);
}

.facility-calendar-booking-block:hover {
  background-color: #004085;
}

.facility-calendar-booking-block .booking-title {
  font-weight: 700;
  margin-bottom: 0.0625rem;
  font-size: 0.65rem;
  line-height: 1.2;
}

.facility-calendar-booking-block .booking-time {
  font-size: 0.6rem;
  opacity: 0.9;
  line-height: 1.2;
}

.facility-calendar-blocked-block {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(248, 249, 250, 0.8);
  color: #64748b;
  border: 1px dashed #adb5bd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  z-index: 5;
  margin: 2px;
}

.facility-calendar-blocked-block.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.facility-calendar-stripes {
  background-color: #f1f5f9;
  background-image: repeating-linear-gradient(45deg,
      transparent,
      transparent 10px,
      rgba(203, 213, 225, 0.4) 10px,
      rgba(203, 213, 225, 0.4) 20px);
}

/* 캘린더 그리드 경계선 */
.facility-calendar-grid-border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  display: grid;
  grid-template-columns: 80px repeat(7, 1fr);
}

.facility-calendar-grid-border>div {
  border-right: 1px solid #e2e8f0;
}

.facility-calendar-grid-border>div:last-child {
  border-right: none;
}

/* 반응형 스타일 */
@media (max-width: 768px) {
  .facility-calendar-grid {
    min-width: 700px;
  }

  .facility-calendar-time-slot {
    font-size: 0.65rem;
    padding-top: 0.25rem;
    height: 35px;
  }

  .facility-calendar-day-header {
    padding: 0.375rem 0.25rem;
    font-size: 0.75rem;
  }

  .facility-calendar-day-cell {
    height: 35px;
  }
}

@media (max-width: 576px) {
  .facility-calendar-container .card-body {
    padding: 0.75rem;
  }

  .facility-calendar-grid {
    min-width: 600px;
  }

  .facility-calendar-time-slot {
    height: 32px;
    font-size: 0.6rem;
  }

  .facility-calendar-day-cell {
    height: 32px;
  }
}

/* 상세정보 탭 스타일 (예약 관리 페이지 스타일 참고) */
.dot {
  border-radius: 999px;
}

.dot-section {
  width: 6px;
  height: 6px;
  background-color: #0ea5e9;
}

.section-title {
  font-size: 1.05rem;
  font-weight: 700;
}

.info-card {
  border: 0;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* 액션 버튼 영역 */
.facility-action-buttons {
  margin-top: 1rem;
}

.facility-action-buttons .btn {
  min-height: 44px;
  font-weight: 500;
}

/* 모바일 반응형 */
@media (max-width: 767.98px) {
  .facility-action-buttons {
    flex-direction: column;
    margin-top: 1.5rem;
  }

  .facility-action-buttons .btn {
    width: 100% !important;
  }
}