/* 기본 페이지 스타일 */
body {
	margin: 0;
	font-family: Arial, sans-serif;
	background-color: #FFFFFF;
	overflow-x: hidden;
	/* 전체 페이지 좌우 스크롤 방지 */
}

/* 전체 컨테이너: 사이드바와 메인 콘텐츠를 가로로 배치 */
.container {
  display: flex;
  flex-direction: row;
  padding: 0 7%;
  gap: 10px;
  box-sizing: border-box;
  flex:1;
}

.spinner-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 10000;
	display: none;
}

.spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60px;
	height: 60px;
	border: 6px solid #f3f3f3;
	border-top: 6px solid #f5cc00;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.content {
  flex: 1;
  min-width: 0; /* flex-item에서 overflow-x 처리 위해 필요 */
  padding-left: 5%;
  padding-top: 5%;
  display: flex;
  flex-direction: column;
}

ul ul li {
	margin-left: 2.0rem;
}

.slot.past-slot {
	background-color: #EDEDE9 !important;
	color: #999;
	cursor: not-allowed;
}

/* 좌측 사이드바 (고정 폭 180px) */
.sidebar {
  width: 180px;
  flex-shrink: 0; /* 절대 줄어들지 않게 */
  background-color: #D6CCC2;
  border: 1px solid #D5BDAF;
  display: flex;
  flex-direction: column;
  padding: 0 10px 10px;
}

.sidebar-title {
	margin: 0 -10px 10px;
	width: calc(100% + 20px);
	padding: 12px 10px;
	text-align: center;
	background-color: #F5EBE0;
	border-bottom: 1px solid #D5BDAF;
	font-size: 18px;
	font-weight: bold;
	color: #333;
}


/* 메인 콘텐츠 영역 (#room-info) - 사이드바 오른쪽 */
#room-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* 제목 요소가 있다면 전체 폭 사용 */
#room-title,
#floor-title {
	margin: 0;
	padding: 10px 0;
}

/* room-flex-container: 시설정보와 타임테이블을 가로로 균등 배치 */
.room-flex-container {
  
  display: flex !important;
  flex-direction: column !important;
  
  width: 100%;
  gap: 0;
  overflow: hidden;
}


/* 양쪽 모두 동일한 비율, 여백 제거 */
#room-content {
	display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "img    text"
    "choice text"
    "btn    text"
    "warn   text";
  column-gap: 20px;
}
.room-content .roomInfoImg {
  grid-area: img;
}
.room-content .roomInfoText {
  grid-area: text;
}

.room-content .booking-choice {
  grid-area: choice;
}
.booking-choice {
	margin-top:10px;
}
.roomInfoText{
	margin-left: 10%;
	
}
.room-content #show-timetable-btn {
  order: 2;
  margin: 8px 0;
}

.room-content #login-wraning {
  order: 3;
  margin-bottom: 10px;
 }
#room-content img {
	min-width: 400px;
	height: auto;
}
#show-timetable-btn {
  grid-area: btn;
  justify-self: start; /* 왼쪽 정렬 */
}

#login-warning {
  grid-area: warn;
  justify-self: start;
  margin-bottom: 10px;
}

/* 타임테이블 영역 - 고정 폭 제거하고 유동 폭으로 변경 */
/* timetable-wrapper는 내부가 넘칠 경우 스크롤 */
.timetable-wrapper {
  flex: 1;
  overflow-x: auto;
  margin-top: 5%;
}

#timetable-container{
	width: 100%;
}
/* 타임테이블 내부 스타일 */
.timetable {
	display: flex;
	flex-direction: column;
}

.slot-row-container {
  overflow-x: auto;
  width: 100%;
  padding-bottom: 10px;
}

.slot-row {
	display: flex;
	gap: 0;
	border-top: 1px solid #D5BDAF;
	border-bottom: 1px solid #D5BDAF;
	padding: 10px 0;
	min-width: max-content;
}

.label-cell {
	min-width: 100px;
	text-align: center;
	font-weight: bold;
}

.slot {
	width: 60px;
	height: 40px;
	border: 1px solid #D5BDAF;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	position: relative;
	border-radius: 4px;
	background-color: #fff;
	user-select: none;
}

.slot:hover {
	background-color: #E3D5CA;
}

.blocked-slot {
	background-color: #EDEDE9 !important;
	pointer-events: none;
	cursor: not-allowed;
	color: #666;
}

.slot.selected {
	background-color: #D5BDAF;
	color: white;
	font-weight: bold;
}

.selected-time-display {
	margin: 15px 0;
	font-weight: bold;
}

#submit-btn {
	padding: 10px 20px;
	background-color: #D5BDAF;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	margin-bottom:5%;
}

#submit-btn:disabled {
	background-color: #EDEDE9;
	cursor: not-allowed;
}

/* 공통 버튼 스타일 (room 버튼 및 메뉴 버튼) */
.room-btn,
.menu-button {
	display: block;
	width: calc(100% + 20px);
	/* 좌우 여백 포함한 전체 폭 확보 */
	margin-left: -10px;
	/* 왼쪽 여백 제거 */
	padding: 12px 10px;
	text-align: center;
	background-color: #F5EBE0;
	border: none;
	border-bottom: 1px solid #D5BDAF;
	font-size: 16px;
	cursor: pointer;
	color: #333;
	transition: background-color 0.3s;
	 word-break: keep-all;

}

.room-btn:hover,
.menu-button:hover {
	background-color: #E3D5CA;
}

.room-btn.active,
.menu-button.active {
	background-color: #D5BDAF;
	color: white;
	font-weight: bold;
}

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 2000;
}

.useGuideCheckBox {
	display: flex;
	align-items: center;
	/* 수직 중앙 정렬 */
	justify-content: flex-end;
	/* 부모 안에서 오른쪽 정렬 */
	gap: 8px;
	/* p와 input 사이 간격 */
	margin-top: 20px;
	/* 필요 시 여백 조절 */
}

.useGuideBtn-wrapper {
	display: flex;
	justify-content: flex-end;
	margin-top: 10px;
}

.useGuideBtn {
	width: 10%;
	padding: 12px;
	text-align: center;
	background-color: #F5EBE0;
	border: none;
	font-size: 16px;
	cursor: pointer;
	color: #333;
	cursor: pointer;
	border-radius: 10%;
	margin-bottom: 5px;
	display: flex;
	align-items: center;
	/* 수직 중앙 정렬 */
	justify-content: flex-end;
}

.use-guide-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 2000;
}


.rental-detail-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 2000;
}

.modal-input-group {
	display: flex;
	flex-direction: column;
}

.modal-input-group input {
	width: 80%;
	height: 40px;
	border-radius: 6px;
	border: 1px solid #D6CCC2;
	padding: 10px 14px;
}

.modal-input-group label {
	margin-top: 10px;
}

.rental-detail-modal.show {
	display: flex;
}

.use-guide-modal.show {
	display: flex;
}

.modal-overlay.show {
	display: flex;
}

.modal-content {
	background: #fff;
	border-radius: 6px;
	width: 600px;
	max-width: 90%;
	max-height: 80%;
	padding: 20px;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.modal-content h3 {
	margin-top: 0;
}

.modal-scroll {
	flex: 1;
	overflow-y: auto;
	margin-bottom: 20px;
	padding-right: 10px;
}

.modal-scroll ul {
	padding-left: 1.2em;
}

.modal-buttons {
	text-align: right;
}

.modal-buttons button {
	margin-left: 10px;
	padding: 8px 16px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	background: #F5EBE0;
	color: #333;
	transition: background 0.2s;
}

.modal-buttons button.cancel {
	background: #EDEDE9;
	color: #555;
}

.modal-buttons button:hover {
	background: #E3D5CA;
}

.scroll-box {
	height: calc(100% - 150px);
	overflow-y: auto;
	border: 1px solid #ccc;
	padding: 10px;
	margin: 10px 0;
	font-size: 14px;

}

.scroll-box li {
	word-break: break-word;
}



#confirmApplyBtn {
	display: block;
	width: 10%;
	padding: 12px;
	text-align: center;
	background-color: #F5EBE0;
	border: none;

	font-size: 16px;
	cursor: pointer;
	color: #333;
	border-radius: 10%;
	margin-bottom: 5px;
}

#cancelApplyBtn {
	display: block;
	width: 10%;
	padding: 12px;
	text-align: center;
	background-color: #F5EBE0;
	border: none;
	border-radius: 10%;
	font-size: 16px;
	cursor: pointer;
	color: #333;

	margin-bottom: 5px;
}