/* 기본 페이지 스타일 */
body {
	margin: 0;
	font-family: Arial, sans-serif;
	background-color: #FFFFFF;
}

/* 전체 컨테이너: introduce/information 페이지와 유사한 레이아웃 */
.container {
	display: flex;
	flex: 1;
	height: 100vh;
	padding-left: 7%;
	padding-right: 7%;
	gap: 20px;
}

/* 좌측 사이드바 */
/* 기존 사이드바 스타일 */
/* 좌측 사이드바 스타일 수정 */
.sidebar {
	width: 180px;
	background-color: #D6CCC2;
	border-right: 1px solid #D5BDAF;
	border-left: 1px solid #D5BDAF;
	display: flex;
	flex-direction: column;
	/* 좌우와 하단 패딩은 유지하고, 상단 패딩은 0으로 설정 */
	padding: 0 10px 10px;
}

/* 기존 sidebar-title 스타일 그대로 사용 */
.sidebar-title {
	margin: 0 -10px 10px;
	width: calc(100% + 20px);
	box-sizing: border-box;

	padding: 12px 10px;
	text-align: center;
	background-color: #F5EBE0;
	border-bottom: 1px solid #D5BDAF;
	font-size: 18px;
	font-weight: bold;
	color: #333;
}

.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-button {
	/* box-sizing 을 보장해야 calc 가 정상 동작합니다 */
	box-sizing: border-box;

	/* 기존 스타일 */
	display: block;
	padding: 12px;
	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;

	/* 여기서 사이드바의 좌우 padding(10px) 만큼 음수 마진을 주고,
     width 를 100% + 2*padding 만큼 늘려서 꽉 차도록 한다 */
	margin: 0 -10px;
	width: calc(100% + 20px);
}

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

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

/* 오른쪽 콘텐츠 영역 */
.content {
	flex: 1;
	padding: 5%;
	background-color: #FFFFFF;
	overflow-y: auto;

}

/* 프로그램 리스트 (카드 형태) */
.program-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

/* 프로그램 카드 */
.program-card {
	width: 200px;
	height: 220px;
	max-width: 300px;
	border: 1px solid #ddd;
	border-radius: 8px;
	text-align: center;
	position: relative;
	display: block;
}

.program-card img {
	width: 160px;
	height: 160px;
	border-radius: 4px;
	margin-bottom: 0.5rem;
}

.program-title {
	font-weight: bold;
	
}


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

}

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

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

.pi-ex {
	width: 80%;
	padding: 10px;
	overflow-wrap: break-word;
	word-wrap: break-word;
	white-space: normal;
	display: block;
}

.pi-ex * {
	white-space: normal !important;
	word-break: break-word;
	overflow-wrap: break-word;
}