.table-fixed_cal {
    table-layout: fixed;
    width: 100%;
    /* 모바일 가독성 확보를 위한 최소 너비 설정 (가로 스크롤 발생) */
    min-width: 700px;
}

.table-fixed_cal th,
.table-fixed_cal td {
    width: 14.28%;
    position: relative;
    padding: 0;
    vertical-align: top;
}

.table-fixed_cal tbody td {
    height: 100px; /* 최소 높이 설정 */
}

/* 날짜 숫자 영역 */
.day-header_cal {
    padding: 4px 8px;
    text-align: left;
}

.day-number_cal {
    font-weight: 500;
}

/* 공휴일 명칭 */
.holiday-name_cal {
    font-size: 0.75rem;
    color: #dc3545;
    margin-left: 4px;
    display: inline-block;
}

/* 이벤트 컨테이너: 날짜 셀 내부에서 이벤트 바들을 담는 영역 */
.events-container_cal {
    display: flex;
    flex-direction: column;
    padding-bottom: 4px;
    min-height: 80px; /* 셀 높이 확보 */
}

/* 이벤트 바 스타일 */
.event-bar_cal {
    height: 24px;
    line-height: 24px;
    margin-bottom: 2px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    position: relative;
    z-index: 10;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    transition: transform 0.1s, box-shadow 0.1s;
}

.event-bar_cal:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    z-index: 20; /* 호버 시 위로 */
}

/* 연속 일정 바 (시작) - 주 단위 렌더링용 */
.event-bar_cal.start {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* 연속 일정 바 (중간) */
.event-bar_cal.middle {
    border-radius: 0;
}

/* 연속 일정 바 (끝) */
.event-bar_cal.end {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* 연속 일정 바 (전체 - 1일짜리지만 연속 로직 탈 때) */
.event-bar_cal.single {
    border-radius: 4px;
}

/* 빈 슬롯 (스페이서) - 높이 고정 필수 */
.event-slot_cal {
    height: 26px; /* 바(24px) + 마진(2px) */
    position: relative; /* 바의 절대 위치 기준점이 될 수 있음 */
    width: 100%; /* 슬롯은 셀 너비에 맞춤 */
}

/* 빈 슬롯 (숨김용) */
.event-spacer_cal {
    height: 26px; 
    visibility: hidden;
}

/* 토/일 색상 */
.day-number_cal.sunday_cal { color: #dc3545; }
.day-number_cal.saturday_cal { color: #0d6efd; }

.container_cal {
    max-width: 1000px;
}

.event-bar-default_cal { background-color: #6c757d; }
.event-bar-red_cal { background-color: #ff6b6b; }
.event-bar-blue_cal { background-color: #4dabff; }
.event-bar-green_cal { background-color: #51cf66; }
.event-bar-orange_cal { background-color: #ffa94d; }
.event-bar-pink_cal { background-color: #f783ac; }

#calendarBody_cal td.empty_cal {
    background-color: #fdfdfd;
}

thead th {
    font-weight: 600;
}

/* 모바일 전용 스타일 */
@media (max-width: 768px) {
    .btn-sm-mobile {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        border-radius: 0.2rem;
    }
    .fs-md-2 {
        /* 모바일에서는 fs-4가 적용되므로 여기선 정의 불필요, 
           하지만 desktop에서 fs-2를 적용하려면 미디어 쿼리 밖에서 정의하거나 
           Bootstrap의 기본 클래스 활용법을 따라야 함.
           여기서는 custom class로 해결.
        */
    }
}

/* 데스크탑에서 fs-2 적용을 위한 유틸리티 클래스 */
@media (min-width: 768px) {
    .fs-md-2 {
        font-size: calc(1.325rem + .9vw) !important; /* Bootstrap h2 size approx */
    }
}