header h3 {color: #fff; text-align: right; font-weight: normal; padding: 0; font-size: 1.1em;}

.custom-width {max-width: 900px;}

	
	.badgeContainer {
			display: flex; /* 유연한 레이아웃 */
			flex-wrap: wrap; /* 줄바꿈 허용 */
			justify-content: center; /* 가로 중앙 정렬 */
			align-items:flex-start; /* 세로 중앙 정렬 */
			gap: 10px; /* 카드 사이 간격 */
			width: 100%; /* 부모 컨테이너 너비 */
	}



.programUnitDiv {background: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 30px 30px 20px 30px; margin-bottom: 30px; cursor: pointer !important;}
.programUnit-img {
	border-radius: 10px;
	height: 200px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.label-progrmStatus1 {padding: 5px 15px; background: var(--color-main); color: #fff; border-radius: 25px; margin-right: 5px !important;}
.label-progrmDday1 {padding: 5px 15px; border: 2px solid var(--color-main); color: var(--color-sub); border-radius: 25px; margin-right: 5px !important;}
.label-progrmText1 {padding: 5px 10px; color: var(--color-main);}

.label-progrmStatus2 {padding: 5px 15px; background: var(--color-point); color: #fff; border-radius: 25px; margin-right: 5px !important;}
.label-progrmDday2 {padding: 5px 15px; border: 2px solid var(--color-point); color: var(--color-point); border-radius: 25px; margin-right: 5px !important;}
.label-progrmText2 {padding: 5px 10px; color: var(--color-point);}

.programUnitDiv h3 {padding: 15px 0 10px 0; /*color: var(--color-main);*/}
.programTags {font-size: 0.95rem; color: #888;;}
.competenceTags li {font-size: 0.9rem; border:1px dashed #999; border-radius: 20px; padding: 5px 10px; margin: 0 5px 15px 0;}
.competenceTags li.active {border: 1px solid var(--color-grey-light); background: var(--color-grey-light); /*color: var(--color-main);*/}

.boardDiv {background: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 30px 30px 20px 30px; margin-bottom: 30px;}

.frontBoardTable {width: 100%; font-size: 0.9rem;}
.frontBoardTable td {padding: 7px; border-bottom: 1px solid #ddd;}
.frontBoardTable tr:hover {background: #fff;}



/******* 자기설계전공 **********/


.mainWrap .btn-menu {
		width: 100%;
		border: 1px solid #e0e0e0; border-radius: 0;
		background-color: white;
		color: black;
		font-size: 1em;
		padding: 17px 10px;
}

.mainWrap .btn-menu.active {
		background-color: var(--color-grey);
		border: 1px solid var(--color-grey);
		color: white;
}

.mainWrap .btn-menu:not(.active):hover {
		background-color: var(--color-main-light);
		border: 1px solid #e0e0e0; border-radius: 0;
}


.mainWrap .dropdown-toggle {
		background-color: var(--color-grey);
		color: white;
		width: 100%;
		padding: 17px 10px;
		text-align: center;
		border-radius: 0;
}
.mainWrap .dropdown-toggle:hover {
		background-color: var(--color-grey);
		color: white;
}
.mainWrap .dropdown-toggle:focus {
		background-color: var(--color-grey);
		color: white;
		box-shadow: none; /* Removes the focus outline */
}
.mainWrap .dropdown-menu {
		width: 100%;
		text-align: center;
		border-radius: 0;
		line-height: 200%;
}
.mainWrap .dropdown-item.active {
		color: var(--color-main);
		font-weight: left;
	  background: none;
}



.bgDiv {background: var(--color-grey-light); padding: 20px 20px 10px 20px; border-radius: 10px;}


/*720 부터*/
@media (min-width: 720px) {
	header img {height: 50px;}
	
	main {padding-top: 50px;}

	.badgeProfile {
			width: 200px; /* 고정 너비 */
			padding-bottom: 0;
	}
	
	.modal-body {padding: 30px;}
	
	
}

/*720 이하*/

@media (max-width: 720px) {
	
	.w-pannel {padding-top: 30px;}
	
	.programUnitDiv {padding: 20px; margin: 0 10px 30px 10px;}
	.boardDiv {padding: 20px; margin: 0 10px 30px 10px;}
	
	.badgeProfile {
			width: 155px; /* 고정 너비 */
			padding-bottom: 0;
	}
	
	.mainWrap {padding: 5px;}
}