/* =========================================
   drill_mp 타임테이블 컴포넌트 스타일
   ========================================= */

/* 전체 타임테이블 컨테이너 */
.time_bar_box_v {
	height: 26em;
	background-color: var(--surface-2);
	border-radius: 7px;
	padding: 7px;
	box-sizing: border-box;
}

/* 코트 이름 헤더 박스 */
.court_name_box_v {
	display: flex;
	justify-content: flex-end;
	width: 100%;
}

/* 점유/빈자리 안내 박스 */
.mark_info_box {
	width: 30%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

/* 스크롤 가능한 시간 표시 영역 */
.time_flex_bar {
	display: flex;
	width: 100%;
	height: 22em;
	overflow: auto;
}

/* 시간 레이블(HH-HH시) 컬럼 */
.time_box_wrap {
	width: 30%;
	box-sizing: border-box;
	flex-shrink: 0;
}

/* 개별 시간 칸 (1시간 단위) */
.time_box_hour {
	background-color: var(--surface-3);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: .5em;
	pointer-events: none;
}

.time_box_hour > p {
	padding: .2em;
	text-align: center;
	pointer-events: none;
}

/* 예약 슬롯들이 absolute 배치되는 컨테이너 */
.time_spacer_box {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	width: 70%;
	flex-shrink: 0;
	box-sizing: border-box;
}

/* 클릭 가능한 5분 단위 슬롯 */
.time_spacer {
	width: 49%;
	border-radius: .3em;
	background-color: var(--surface-3);
	box-sizing: border-box;
	cursor: pointer;
}

/* 예약 상태 박스 (absolute 배치) */
.rsv_status_box {
	position: absolute;
	width: 49%;
	margin: 0 .5%;
	border-radius: .7em;
	background-color: var(--brand-color-7);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .2em;
	box-sizing: border-box;
}

/* 레슨 코치별 색상 */
.rsv_status_box.lesson_coach_1 {
	background-color: rgba(236, 181, 0, .7);
}
.rsv_status_box.lesson_coach_1554 {
	background-color: rgba(241, 60, 0, 0.7);
}

/* 예약 상태 텍스트 */
.rsv_status_text {
	color: white;
	display: flex;
	font-size: .9em;
	pointer-events: none;
	text-align: center;
	white-space: pre-line;
}

/* 예약 미리보기 박스 */
.rsv_preview_box {
	position: absolute;
	width: 49%;
	margin: 0 .5%;
	border-radius: .5em;
	box-sizing: border-box;
	background-color: rgba(0, 74, 172, 0.15);
	border: 2px dashed rgba(0, 74, 172, 0.55);
	pointer-events: none;
}