@media screen and (max-width: 768px) {

	html,
	body {
		margin: 0;
		padding: 0;
		overflow-x: hidden;
		height: 100%;
	}

	.sidebar {
		display: flex;
		flex-direction: column;
		background-color: #D6CCC2;

	}


	.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: 40%;
		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);
		}
	}


	/* 1행: 제목 */
	.sidebar-title {
		width: 100%;
		/* 전체 행 차지 */
		text-align: center;
		background-color: #D6CCC2;
		color: white;
		font-size: 14px;
		font-weight: bold;
		cursor: default;
		padding: 10px 0;
		border: none;
	}

	/* 2행: 버튼 4개 정렬 */
	.room-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		/* 4개로 나눔 */
		width: 100%;
	}

	.menu-button {
		width: 100%;
		box-sizing: border-box;
		padding: 10px 0;
		font-size: 14px;
		background-color: #F5EBE0;
		border: none;
		color: #333;
		cursor: pointer;
		transition: background-color 0.2s ease;
		border: 1px solid #D6CCC2;
	}

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

	.content {
		width: 90%;
		padding: 5%;
		overflow-wrap: break-word;
		word-break: break-word;
		white-space: normal;
		flex: 1;
	}

	.content img {
		width: 90%;
	}

	.container {
		flex: 1;
		/* 본문 영역(사이드+메인)이 빈 공간을 전부 차지 */
	}

	/* 메인 콘텐츠 영역 (#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;
		flex-direction: column;
		gap: 0;
		/* 간격 없애기 */
		width: 100%;
	}




	#timetable-wrapper {

		margin-left: -8px;
		/* 왼쪽으로 조금 더 붙이기 */
	}

	/* 시설 정보 영역 */
	#room-content {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	/* 타임테이블 영역 - 고정 폭 제거하고 유동 폭으로 변경 */
	.timetable-wrapper {
		flex: 1;
		flex-shrink: 1;
		overflow-x: auto;
		width: auto;
	}

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

	.slot-row-container {
		overflow-x: auto;
		padding-bottom: 10px;
		margin-top: 5%;
	}

	.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 {
		width: 50px;
		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.past-slot {
		background-color: #EDEDE9 !important;
		color: #999;
		cursor: not-allowed;
	}

	.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;
	}

	#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;*/
	/*	}*/

	.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 사이 간격 */
		/* 필요 시 여백 조절 */
	}

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

	}

	.useGuideBtn {
		width: 20%;
		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;
		align-items: center;
		/* 수직 중앙 정렬 */
	}

	.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;
		font-size: smaller;
	}

	.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: 20%;
		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: 20%;
		padding: 12px;
		text-align: center;
		background-color: #F5EBE0;
		border: none;
		border-radius: 10%;
		font-size: 16px;
		cursor: pointer;
		color: #333;

		margin-bottom: 5px;
	}
}