/* 본문 시작 */
main.reservation-status {
    font-weight: bold;
}
/* 날짜 정보 영역 */
.current-date {
  margin: 110px 0 30px;
  color: var(--main-brown);
}
.month-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 40px;
}
.month-nav .month {
  margin: 0 20px;
  letter-spacing: 0.8px;
}
.month-nav button {
  margin-bottom: 3px;
  background: none;
  border: none;
  font-size: 40px;
  cursor: pointer;
  color: var(--main-brown);
}

section.calendar {
    margin: 0 10vw;
    padding-top: 20px;
    width: 80%;
    border-top: 2px solid #464646;
}
/* 레이블 표시 */
.legend {
  margin-bottom: 30px;
}
.label {
  display: inline-block;
  font-size: 18px;
  letter-spacing: 0.36px;
  margin-right: 10px;
  padding: 2px 6px;
  border-radius: 4px;
}
.label i {
    font-style: normal;
    /* font-weight: normal; */
    padding: 2px 4px;
}
.label.available i {
  background-color: #46B798;
  color: white;
}
.label.reserved i {
  background-color: #999;
  color: white;
}

/* 달력 전체 */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

/* 요일 헤더 */
.day-header {
  text-align: center;
  font-weight: bold;
  padding: 8px 0;
  background-color: #fafafa;
  border: 1px solid #ddd;
  color: #464646;
}

/* 날짜 셀 */
.calendar-day {
  background-color: white;
  border: 1px solid #ddd;
  padding: 13px;
  min-width: 0;
  min-height: 150px;
  font-size: 14px;
}
.calendar-day .date {
  font-weight: bold;
  margin-bottom: 6px;
  font-size: clamp(11px, 3vw, 28px);
  letter-spacing: 0.56px;
  font-family:'nanum-bold', 'sans-serif';
}
.calendar-day .note {
  font-size: clamp(5.8px, 1.7vw, 16px);
  color: #7B7B7B;
  margin-bottom: 25px;
  font-family:'nanum-bold', 'sans-serif';
  font-weight: normal;
}
.calendar-day .room {
  padding: 2px 0;
  font-size: 13px; 
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}
.room i {
    display: inline-block;
    font-style: normal;
    margin-right: 6px;
    padding: 2px 4px;
    color: #fff;
}
.room.available { cursor: pointer;}
.room.available i {
  background-color: #46B798;
}
.room.reserved i {
  background-color: #989898;
}
.date.sat {
  color: #285BC2;
}
.date.sun {
  color: #E30000;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.day-header {
  font-weight: 600;
  text-align: center;
  padding: 6px 0;
  border-bottom: 1px solid #ddd;
}
.calendar-day {
  min-height: 100px;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 6px;
  background: #fff;
}
.calendar-day.today {
  box-shadow: inset 0 0 0 2px #2563eb;
}
.date {
  font-weight: 700;
  margin-bottom: 4px;
}
.date.sun { color: #e11d48; }
.date.sat { color: #2563eb; }
.note {
  font-size: 12px;
  margin-top: 4px;
  padding: 2px 4px;
  border-radius: 4px;
}
/* 달력 셀 공통 — 크기 계산 일관화 */
.calendar-grid .calendar-day{
  box-sizing: border-box;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 8px;
  background: #fff;
}

/* 오늘 강조 — 크기 안 바꾸는 방식 */
.calendar-grid .calendar-day.today{
  border-color: #eee;            /* border 두께는 그대로 1px 유지 */
  box-shadow: inset 0 0 0 2px #2563eb;  /* 파란 테두리는 shadow로 */
}

/* 혹시 기존 CSS에 border:2px; 같은 게 있으면 무효화 */
.calendar-grid .calendar-day.today { border-width: 1px !important; }

/* 날짜 숫자 크기/간격 */
.calendar-grid .calendar-day .date{
  font-size: 16px;      /* (기존이 크면 14~16 사이 추천) */
  line-height: 1.1;
  font-weight: 700;
  margin-bottom: 6px;
}
/* 주말 색상 유지 */
.calendar-grid .calendar-day .date.sun { color:#e11d48; }
.calendar-grid .calendar-day .date.sat { color:#2563eb; }

/* 시즌 라벨(노트)도 높이 균일하게 */
.calendar-grid .calendar-day .note{
  display: inline-block;
  min-height: 20px;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.2;
}


/* 반응형  */
@media(max-width:1600px){
    section.calendar {
        margin: 0 3vw;
        width: 94%;
    }
}
@media(max-width:1200px){
    .month-nav, .month-nav button {
        font-size: 33px;
    }
    .label {
        font-size: 14px;
    }
}
@media (max-width: 768px) {
    section.calendar {
        margin: 0;
        width: 100%;
    }
    .calendar-grid {
      gap: 0;
    }
    .calendar-grid .calendar-day { 
      font-size: 2vw;
      border-radius: 0;
      padding: 7px 3px;
    }
    .calendar-grid .calendar-day .note {
      font-size: 2vw;
      line-height: 2.2;
      margin-top: -2px;
    }
    .calendar-grid .calendar-day .date { font-size: 14px;}
    .current-date { margin-top: 30px; }
    .month-nav, .month-nav button {
        font-size: 20px;
    }
.today-label {
  text-align: center !important;   /* 가로 가운데 정렬 */
  display: block;       /* 기본 p는 block이니 이건 생략 가능 */
  font-size: clamp(13px, 2vw, 18px);
  letter-spacing: 0.36px;
}

    .legend {
        margin-bottom: 10px;
    }
    .label {
        margin-right: 0;
        font-size: 3vw;
    }
    .day-header { 
        font-size: 3vw;
        color: #7B7B7B;
    }
    .calendar-day {
        padding: 10px 5px;
    }
    /* .calendar-day .date {
        font-size: 3vw;
    } */
    .calendar-day .note {
        /* font-size: 1.6vw; */
        word-break: keep-all;
    }
    .calendar-day .room {
        font-size: 1.8vw;
    }
    .room i {
        margin-right: 3px;
        padding: 1px 2px;
    }
}