@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;

	}

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

	.badge-ended {
		position: absolute;
		top: 8px;
		right: 8px;
		background-color: #D6CCC2;
		color: white;
		padding: 4px 8px;
		border-radius: 4px;
		font-size: 12px;
		font-weight: bold;
		z-index: 10;
	}

	.menu-group {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		width: 100%;
	}

	/* active 상태인 메뉴 버튼 (필요에 따라 수정) */
	.menu-button.active {
		background-color: #D5BDAF;
		color: white;
		font-weight: bold;
	}

	.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;
		word-break: keep-all;
		/* 한글 단어 단위로 줄바꿈 */
		line-break: auto;
		/* 한글에 맞는 줄바꿈 규칙 */
		white-space: normal;
		/* 일반 줄바꿈 허용 */
		word-spacing: 0.05em;
		/* 한글에 어울리는 약간의 단어 간격 */
		letter-spacing: 0;
		/* 자간은 기본 유지 (너무 넓으면 부자연스러움) */
	}

	.menu-button.current {
		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;
	}

	.container {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.program-list {
		display: flex;
		flex-wrap: wrap;
		gap: 9%;
		justify-content: center;
		/* 추가: 내부 항목들 가운데 정렬 */
	}

	.program-card {
		width: 42%;
		height: auto;
		max-width: 300px;
		border: 1px solid #ddd;
		border-radius: 8px;
		text-align: center;
		margin-top: 5%;
		position: relative;
		display: block;
	}


	.program-card img {
		margin-top: 10px;
		width: 90%;
		aspect-ratio: 1 / 1;
		/* 비율 고정 (정사각형) */
		object-fit: cover;
		border-radius: 4px;
		margin-bottom: 0.5rem;
	}

	.program-title {
		font-weight: 500;
		word-break: keep-all;
		/* 한글 단어 단위로 줄바꿈 */
		line-break: auto;
		/* 한글에 맞는 줄바꿈 규칙 */
		white-space: normal;
		/* 일반 줄바꿈 허용 */
		word-spacing: 0.05em;
		/* 한글에 어울리는 약간의 단어 간격 */
		letter-spacing: 0;
		/* 자간은 기본 유지 (너무 넓으면 부자연스러움) */
	}

	.pi-img {
		width: 150px;
		height: 150px;
		object-fit: cover;

		display: block;
		/* 블록 요소로 변경 */
		margin-left: auto;
		/* 좌측 마진 자동 */
		margin-right: auto;
		/* 우측 마진 자동 */

	}

	.program-intro {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		/* 줄바꿈 허용 */
		align-items: center;
		gap: 20px;
		margin-bottom: 3%;
	}

	.program-list {
		margin-top: 3%;

	}




}