@media screen and (max-width: 768px) {
	.container {
		flex-direction: column;
		height: 100vh;
	}

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


	.main-content {
		flex-direction: column;
		width: 100%;
		font-size: small;
	}

	.content-placeholder {
		font-size: 22px;
		text-align: center;
	}

	.sidebar {
		flex-direction: column;
		gap: 10px;
		background-color: #D6CCC2;
		border: none;
	}

	.floor-section {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		/* 버튼 3개씩 1행 구성 */
		width: 100%;
		gap: 0px;
		/* 버튼 간 여백 제거 */
	}

	.floor-label {
		font-weight: bold;
		font-size: 14px;
		background-color: #E3D5CA;
		padding: 10px;
		border-radius: 5px;
		min-width: 40px;
		text-align: center;
		color: #333;
	}

	.menu-button {
		width: 100%;
		/* 부모 셀에 꽉 차도록 */
		box-sizing: border-box;
		padding: 10px 0;
		/* 좌우 패딩 제거로 간결한 디자인 */
		font-size: 14px;
		background-color: #F5EBE0;
		border: #D6CCC2 2px solid;
		border: none;
		color: #333;
		cursor: pointer;
		transition: background-color 0.2s ease;
				border: 1px solid #D6CCC2;
	}

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


	/*#EDEDE9*/
	/*#D6CCC2*/
	/*#F5EBE0*/
	/*#E3D5CA*/
	/*#D5BDAF*/
	.sidebar-title {
		padding: 10px;
		text-align: center;
		background-color: #D6CCC2;
		color: white;
		font-size: 14px;
		font-weight: bold;
		cursor: default;
		width: 100%;
		/* 아래 두 줄 추가 또는 수정 */
		border: none;
		/* 모든 테두리 제거 */

		/* 필요할 경우 아래만 살짝 */
	}


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

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

	.menu-button.active {
		background-color: #D5BDAF;
		/* 활성화 버튼 배경 */
		color: white;
		font-weight: bold;
	}
	
	.content img{
		width: 100%;
		height: 100%;
	}

}