/* Custom styles for Flatpickr calendar header */
.flatpickr-calendar {    
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem;
  max-width: 100%;
  width: 325px;
  height: 325px;
}

.time-slot:not(.bg-danger):not(.past-slot):not(.pe-none):hover {
  background-color: #e9ecef;
  cursor: pointer;
}

#bookingCanvas, #adminSettings {
  height: auto;
  max-height: 90vh;
  top: 5vh;
  bottom: 5vh;
}

/* 공통: 링크/컨테이너 정리 */
.logo-area {
  /* 고정 width/height 제거! 컨테이너는 가운데 정렬만 유지 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0;
}

.logo-link { display: inline-flex; }

/* 기본 로고 스타일: 왜곡 방지 */
.site-logo,
.footer-logo {
  display: block;
  width: auto;       /* 가로는 이미지 비율대로 */
  height: auto;      /* 세로도 비율 유지 */
  max-width: 100%;   /* 컨테이너 넘치지 않도록 */
  /* 필요시 선명도 개선용: 이미지 자체가 충분한 해상도여야 함 */
}

/* “보이는 크기”는 max-height로만 관리 (비율 유지, 왜곡 X) */
.site-logo, .footer-logo { max-height: 64px; }   /* 데스크탑 기본 헤더 로고 높이 */


.button-group {
  width: auto;              /* ← 200px 없애기 */
  flex-wrap: nowrap; 
}

.button-group .btn {
  width: auto;              /* ← 50% 없애기 */
  white-space: nowrap;      /* 글자 줄바꿈 방지 */
}

.booking-table-wrapper th {
  font-size: 0.8rem;
  white-space: nowrap;
}
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}
/* 관리자에게는 모든 슬롯에서 pointer 유지 */
body.admin-mode .time-slot.bg-danger:hover,
body.admin-mode .time-slot:not(.bg-danger):not(.past-slot):not(.pe-none):hover {
  cursor: pointer;
}
.modal-backdrop {
  background-color: transparent !important;
}

.bg-resv-1 { background-color: #dc3545 !important; }  /* 빨간색 */
.bg-resv-2 { background-color: #198754 !important; }  /* 초록색 */
.bg-resv-3 { background-color: #0d6efd !important; }  /* 파란색 */
.bg-resv-4 { background-color: #6f42c1 !important; }  /* 보라색 */
.bg-resv-5 { background-color: #fd7e14 !important; }  /* 오렌지 */

.ql-size-small {
  font-size: 10px;
}
.ql-size-large {
  font-size: 20px;
}
.ql-size-huge {
  font-size: 30px;
}

.small p {
  margin-top: 0;
  margin-bottom: 0.4rem;
  line-height: 1.2;
}
/* 고객 검색 테이블 - 메모 셀 레이아웃 */
#customerResultTable .memo-cell{
  display:flex;
  align-items:center;
  gap:.5rem;
}
#customerResultTable .memo-text{
  flex:1 1 auto;
  /* 2줄까지만 보이고 말줄임 */
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.3;
  max-height:calc(1.3em * 2);
  word-break:break-word;
}
/* 드래그 관련 슬롯 */
.time-slot.drag-origin { outline: 2px dashed #ffc107; outline-offset: -2px; }
.time-slot.drag-preview { background: rgba(255,193,7,.5) !important; }
.time-slot.drag-invalid { background: rgba(220,53,69,.25) !important; }

#weeklyGrid { display:grid; grid-template-columns: 100px repeat(7, 1fr); gap:2px; }
#weeklyGrid .cell { padding:6px; border:1px solid #e5e5e5; font-size:13px; text-align: center; }
#weeklyGrid .header { font-weight:600; background:#f7f7f7; }
#weeklyGrid .closed-cell { background:#f0f0f0; color:#888; }
#weeklyGrid .time { background:#fafafa; font-weight:600; }

.weekly-toolbar .btn {
  border: none;
}
/* 드래그 중에만 텍스트 선택 방지 */
.dragging-noselect, .dragging-noselect * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
}

/* index.css */
#customerResultTable {
  table-layout: fixed;
  width: 100%;
}
#customerResultTable th,
#customerResultTable td {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .header-container {
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .booking-header {
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: center;
    width: 100%;
    row-gap: 0.75rem;
    margin-left: 0;
    margin-right: 0;
  }

  .button-group {
    display: flex;
    justify-content: flex-end;
    width: 160px; /* 🔄 버튼 그룹 크기 약간 키움 */
    margin-top: 10px;
  }

  .button-group .btn {
    width: 50%;
    font-size: 13px;       /* 🔄 글자 크기 키움 */
    padding: 10px 10px;     /* 🔄 버튼 높이 키움 */
    line-height: 1.4;
  }

  .site-logo { max-height: 48px; }
  .footer-logo { max-height: 60px; }

  .date-selector {
    order: 2;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }

  .date-selector input,
  .date-selector button {
    font-size: 14px;
  }

  #bookingCanvas {
    height: 100vh !important;
    display: flex;
    flex-direction: column;
  }

  #bookingCanvas .offcanvas-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-bottom: 80px; /* ✅ 버튼 높이만큼 아래 여백 줌 */
  }

    /* 팝업 달력: 가운데 정렬 유지 */
  .flatpickr-calendar {
    width: 85% !important;
    max-width: 420px !important;          /* 너무 넓어지지 않게 한도 */
    height: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* 요일 헤더도 폭 100%로 */
  .flatpickr-weekdays {
    width: 100% !important;
  }

  /* ✅ 날짜 격자: 여기만 7열 그리드 주기 */
  .flatpickr-days {
    width: 100% !important;
  }
  .flatpickr-days .dayContainer {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    grid-auto-rows: 38px;                 /* 셀 높이 */
    gap: 2px;                             /* 셀 간격 (원하면 0으로) */
  }

  /* 날짜 셀: margin/padding 제거해서 정확히 맞춤 */
  .flatpickr-day {
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
    line-height: 38px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
  .flatpickr-months { 
    display: flex !important; 
  }

  /* 헤더 글자만 살짝 줄이기 (파괴적 변경 X) */
  .flatpickr-current-month { 
    font-size: 14px !important; 
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  .flatpickr-current-month .cur-month { 
    font-size: 14px !important; 
  }
  .flatpickr-current-month .numInputWrapper input.cur-year {
    font-size: 14px !important;
    min-width: 0 !important;
    width: 50px !important;   /* 연도칸만 살짝 좁힘 */
  }
}