.calendar-header { text-align: center; margin-bottom: 28px; font-size: 24px;font-weight: 600; display: flex ; align-content: center; justify-content: space-between; }
.calendar-header span { margin: 0px 12px; }

.onDetailView { font-weight: 600; cursor: pointer}
.onDetailView.active {
    height: 27px;
    width: 27px;
    background: #38424F;
    color: #F9FBFF ;
    border-radius: 50%;
    display: block;
}

#calendar { position: relative;}
.toastui-calendar-see-more-container { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); height: 300px !important;}

.toastui-calendar-month-more-list::-webkit-scrollbar {
    width: 4px; /* 가로 폭을 4px로 설정 */
}

/* 스크롤바의 트랙 (스크롤바 배경) */
.toastui-calendar-month-more-list::-webkit-scrollbar-track {
    background: var(--bs-gray-200); /* 트랙 배경색을 회색으로 설정 */
}

/* 스크롤바의 thumb (스크롤바의 이동 가능한 부분) */
.toastui-calendar-month-more-list::-webkit-scrollbar-thumb {
    background-color: var(--bs-blue); /* thumb의 색상을 검정색으로 설정 */
    border-radius: 2px; /* 둥근 모서리 설정 (선택 사항) */
}

.toastui-calendar-weekday-event { cursor: default !important;}
.toastui-calendar-weekday-event-block { padding: 8px 0px}
.toastui-calendar-template-task span { font-weight: 400;}

.year .calendar-wrap { position: relative; --cols: 3;width : calc( (100% / var(--cols)) - 16px);padding: 0.75rem;margin: 1rem 8px;border: 1px solid var(--bs-gray-400);border-radius: 8px;}

.toastui-calendar-grid-cell-header { position: relative;}
.event-cnt {height: 27px;width: 27px;position: absolute;right: 6px;top: 16px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 0.6rem;}


.calendar-wrap .today { display: block; height: 27px; width: 27px; background: var(--bs-blue); border-radius: 50%;;}
.calendar-wrap .holiday { color: rgb(255, 64, 64) !important }
.calendar-wrap .today.holiday , .onDetailView.active.holiday {  background: rgb(255, 64, 64); color: #fff !important  }

.toastui-calendar-day-name-item.toastui-calendar-month {padding: 0px !important;text-align: center; }


@media (min-width : 2000px) {
    .year .calendar-wrap { --cols :4}
}

@media (max-width : 1400px) {
    .year .calendar-wrap { --cols :2}
}

@media (max-width : 950px) {
    .year .calendar-wrap { --cols :1}
}


.bg-custom-50 { --bg: #fff; position: relative; z-index: 1; }
.bg-custom-50::before { content: ""; background: var(--bg); opacity: 0.5; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: -1}


.emp-text { color: #FC5555; font-weight: 600 !important; }




.course-calendar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  max-width: 500px;
  margin: 0px auto;
}

.course-calendar .day-name { font-weight: 600; text-align: center; background: var(--bs-gray-200);padding: 8px;}
.course-calendar .day {
  /* display: flex; */
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #eee;
  /* border-radius: 6px; */
  padding: 6px 12px 12px;
  min-height: 70px;
  background: #fff;
}

.course-calendar .day .date {
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}
.course-calendar .day .date.holiday { color: var(--bs-danger); font-weight: 600;}
.course-calendar .day .date.cdt,.course-calendar .day .date.pbt { color: #0059ff; font-weight: 600;}

.course-calendar .day .content {
  font-size: 12px;
  color: #555;
  margin-top: 8px;
}

.course-calendar .day .content div.holiday { color: var(--bs-danger) }
.course-calendar .day .content div.cdt { color: #0059ff }
.course-calendar .day .content div.pbt { color: #0059ff }

.course-calendar .day.outside {
  opacity: 0.3; /* 범위 바깥 흐림 효과 */
}