/* 갤러리 스타일 */

label{
	padding-left:5px;
}
#gall_ul {
}

/* 교육프로그램 상세보기 스타일 */
#bo_v_img{
	margin-top:30px;
}

#bo_v_img img{
	width:100%;
	height:auto;
}

#bo_v_img, .edu-info {
    text-align: center;
}
#smart_editor2{
	min-width:auto;
}

#eduprogram-view,#eduprogram-list,#eduprogram-write{
	
}
.row{
	margin-top:30px;
}

.edu-info{
	border-top:2px solid #333;
	border-bottom:2px solid #333;
	padding:30px 0;
}

.edu-info dt {
    background: #e8e8e8;
    padding: 5px 10px;
    border-radius: 10px;
}

.edu-info dd {
    margin:10px 0;
    font-weight: bold;
}

/* 운영프로그램 공통 스타일 */
ul.is_view_btn {
    display: none;
}

/* 공통 레이아웃 */
.eduprogram-list, .eduprogram-view, .eduprogram-write,
.common-list, .common-view, .common-write {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 0px;
}

/* 헤더 스타일
.list_header, .eduprogram-view header {
    margin-bottom: 30px;
    text-align: center;
}

.list_title, .eduprogram-view h2 {
    font-size: 28px;
    font-weight: 600;
    color: #333;
    margin: 0;
}


.list_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    padding: 0 40px;
}*/


.list_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    padding: 0 0px;
}

/*
.list_header {
    font-size: 36px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0;
    position: relative;
    padding-left: 20px;
    letter-spacing: -0.5px;
}*/


.list-title {
    font-size: 36px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0;
    position: relative;
    padding-left: 20px;
    letter-spacing: -0.5px;
}

.list-title:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 28px;
    background: linear-gradient(to bottom, #007bff, #00bfff);
    border-radius: 3px;
}

.list-filter {
    display: flex;
    gap: 15px;
}

.list-filter select {
    width: 180px;
    height: 45px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 0 20px;
    font-size: 15px;
    color: #333;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E") no-repeat right 20px center;
    appearance: none;
    transition: all 0.3s ease;
}

.list-filter select:hover {
    border-color: #007bff;
}

/* 상태 표시 스타일 */
.program_status, .eduprogram-view .status {
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 17px;
    font-weight: bold;
	width:fit-content;
	display:block;
	margin:0 auto;
}

.eduprogram-view header h2{
	margin:20px;
	font-size:25px;
	text-align:center;
}

.eduprogram-view header span{
	width:100%;
	display:block;
	text-align:right;
}

.program_status.진행, .eduprogram-view .status.진행 {
    background: #e8f4ff;
    color: #007bff;
}

.program_status.예정, .eduprogram-view .status.예정 {
    background: #fff3cd;
    color: #ffc107;
}

.program_status.완료, .eduprogram-view .status.완료 {
    background: #333;
    color: #fff;
}

/* 필터 스타일 */
.list_filter {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

.filter_group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.filter_item {
    flex: 1;
}

.filter_item label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #333;
}

/* 폼 컨트롤 스타일 */
.form-control {
    width: 100%;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
	margin-top:10px;
}

.form-control:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

/* 달력 스타일 */
.datepicker {
    z-index: 8;
    background: #fff;
    position: relative;
}

.datepicker-dropdown {
    padding: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border: 1px solid #ddd;
    border-radius: 4px;
    position: absolute;
    left: 0;
    margin-top: 5px;
}

.datepicker table {
    width: 100%;
    border-collapse: collapse;
}

.datepicker table tr td,
.datepicker table tr th {
    padding: 8px;
    text-align: center;
    border: 1px solid #ddd;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
    background-color: #007bff !important;
    background-image: none;
    color: #fff !important;
}

.datepicker table tr td.today {
    background-color: #e8f4ff !important;
    background-image: none;
}

.datepicker table tr td:hover {
    background-color: #f8f9fa;
}

/* 입력 필드 스타일 */
.input-group {
    position: relative;
	display:flex;
	justify-content:space-between;
	align-items:baseline;
}

.input-group .datepicker {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
	padding:8px 12px;
}


/* 버튼 스타일 
.btn_search, .btn_reset, .btn_write {
    min-width: 100px;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    text-align: center;
    line-height: 1.5;
}*/


.btn_search {
    padding: 0 20px;
    height: 40px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 17px;
    cursor: pointer;
    transition: background 0.3s;
}

.filter_buttons{
		text-align:center;
}

.btn_search:hover {
    background: #0056b3;
    text-decoration: none;
}

/* 프로그램 아이템 스타일 */
.program_item {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    display: flex;
    gap: 20px;
}

.program_item:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* 썸네일 스타일 */
.program_thumbnail {
    flex: 0 0 250px;
    overflow: hidden;
    border-radius: 4px;
    background: #f8f9fa;
}

.program_thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.program_thumbnail:hover img {
    transform: scale(1.05);
}

.program_thumbnail .no_image {
    width: 100%;
    padding: 40px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 14px;
    background: #f8f9fa;
}

/* 프로그램 컨텐츠 스타일 */
.program_content {
    flex: 1;
    min-width: 0;
}

.program_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 15px 0;
}

.program_board_title {
    font-size: 25px;
    font-weight: 600;
    margin: 0;
}

.program_board_title a {
    color: #333;
    text-decoration: none;
}

.program_board_title a:hover {
    color: #007bff;
}

/* 프로그램 정보 스타일 */
.program_info {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 4px;
    font-size: 15px;
}

.info_row {
    display: flex;
    margin-bottom: 10px;
}

.info_row:last-child {
    margin-bottom: 0;
}

.info_item {
    flex: 1;
    display: flex;
    align-items: center;
}

.info_item .label {
    width: 80px;
    font-weight: 500;
    color: #666;
}

.info_item .value {
    flex: 1;
    color: #333;
    font-weight: bold;
}

/* 페이지네이션 스타일 */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.pagination a {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
}

.pagination a:hover {
    background: #f8f9fa;
}

.pagination .active {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
}

/* 에디터 스타일 */
.cke_chrome {
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
}

.cke_top, .cke_bottom {
    background: #f8f9fa !important;
    border: 1px solid #ddd !important;
}

/* 기타 유틸리티 클래스 */
.empty_list {
    text-align: center;
    padding: 50px 0;
    color: #666;
    font-size: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    margin: 20px 0;
}

.hidden {
    display: none !important;
}

/* 운영프로그램 쓰기 */

#wr_subject {
    width: 100%;
}

#wr_content {
    border: 1px solid #ddd;
	padding:15px;
	margin-top:10px;
}

.eduprogram-write, .common-write {
    margin-top: 50px;
    position: relative;
}

.attach-list {
    margin-top: 15px;
}

.attach-image {
    margin-bottom: 15px;
}

.attach-image img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

.attach-file {
    margin-bottom: 10px;
}

.attach-file .btn {
    text-decoration: none;
}

.btn_confirm {
    text-align: center;
    margin-top: 40px;
	border-top:2px solid #333;
	padding-top:30px;
}

.btn_confirm .btn {
	background:#5a6268;
	color:#fff;
	padding:12px 30px;
	border:none;
	border-radius:4px;
	font-size:15px;
	font-weight:500;
	cursor:pointer;
	text-decoration:none;
	line-height:1.2;
	height:40px;
}

.btn_confirm #btn_submit{
	background:#003366;
	color:#fff;
	height:40px;
}
/* 관리자 메뉴 */
.btn_bo_user {
    display: flex;
    justify-content: flex-end;
}

.btn_bo_user li {
    margin-right: 15px;
}

.btn_bo_user li:last-child {
    margin-right: 0;
}

.btn_bo_user li:after {
    content: '|';
    margin-left: 15px;
}

.btn_bo_user li:last-child:after {
    content: '';
    margin: 0;
}

.btn_bo_user li .btn {
    font-size: 17px;
}

.adm_menu {
    display: flex;
}

.adm_menu .info{
	display:flex;
	flex-direction:column;
	
}

.adm_menu ul {
    padding: 0;
    margin-top: 15px;
}

.adm_menu ul li {
    float: left;
}

.adm_menu ul li a:after {
    content: '|';
    margin: 0px 15px;
}

.adm_menu ul .more_opt li:last-child a::after {
    content: '';
}

/* 운영프로그램 view */
.edu-content{
	padding-top:30px;
}

.edu-content img{
	max-width:100%;
}
/* 에디터 추가 스타일 */
.cke_sc {
    position: relative;
    text-align: right;
    margin-top: -30px;
}

.cke_sc .cke_sc_def {
    position: absolute;
    top: 0;
    left: 120px;
    background: #fff;
    padding: 15px;
    border-radius: 15px;
    border: 1px solid #e8e8e8;
    z-index: 9;
}

.write_div {
    margin-top: 30px;
}

#wr_3, #wr_6, #wr_8 {
    width: 100%;
}

.wr_content .sound_only {
    display: none;
}

.wr_content iframe {
    margin-top: 8px;
}

/* 프로그램 링크 */
.program_link {
    width: 100%;
    margin-top: 50px;
}

.program_link a {
    display: block;
    border-radius: 15px;
    font-size: 20px;
    background: #333;
    color: #fff;
    width: fit-content;
    padding: 5px 30px;
    margin: 0 auto;
} 


.btn_write {
    display: inline-block;
    padding: 10px 25px;
    background: var(--primary-color);
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.3s;
	font-size:17px;
}

.btn_write:hover {
    background: #003366;
	color:#fff;
}

.list_buttons{
	margin-top:50px;
	text-align:center;
}


/* 게시판 페이징 nav */
.pg_wrap {
    text-align: center;
    margin: 40px 0;
    font-family: 'Pretendard', sans-serif;
}

.pg_wrap .pg a,
.pg_wrap .pg strong {
    display: inline-block;
    margin: 0 4px;
    padding: 8px 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #f8f8f8;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
}

.pg_wrap .pg a:hover {
    background-color: #333;
    color: #fff;
    border-color: #333;
}

.pg_wrap .pg strong.pg_current {
    background-color: #333;
    color: #fff;
    border-color: #333;
    font-weight: bold;
    cursor: default;
}



/* 중복확인, 인증번호 발송/확인 버튼 */
/* 중복확인, 인증번호 발송/확인 버튼 */
.btn_id_check {
    display: inline-block;
    min-width: 90px;         /* 버튼 최소 너비 확보 */
    padding: 6px 16px;
    background: #003366;
    color: #fff;
    border: none;
    border-radius: 3px;
	height:48px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s;
    vertical-align: middle;
    white-space: nowrap;     /* 버튼 텍스트 줄바꿈 방지 */
    text-align: center;
    box-sizing: border-box;
}
.btn_id_check:disabled,
.btn_id_check[disabled] {
    background: #ccc;
    cursor: not-allowed;
}
.btn_id_check:hover:not(:disabled) {
    background: #003366;
}

/* 메시지 영역 (유효성, 안내 등) */
#msg_mb_id,
#msg_mb_password,
#msg_mb_password_re,
#msg_mb_nick,
#msg_mb_email,
#msg_mb_hp,
#msg_email_verify {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    min-height: 18px;
    line-height: 1.4;
    color: #e74c3c; /* 기본: 빨간색(에러) */
}
#msg_mb_id.green,
#msg_mb_password.green,
#msg_mb_password_re.green,
#msg_mb_nick.green,
#msg_mb_email.green,
#msg_mb_hp.green,
#msg_email_verify.green {
    color: #2ecc40; /* 성공: 초록색 */
}

/* 이메일 인증번호 입력 영역 */
.email_verify_wrap {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.email_verify_wrap input[type='text'] {
    width: 120px;
    padding: 6px;
    font-size: 14px;
}
.email_verify_wrap .btn_id_check {
    margin-left: 0;
}

/* 입력박스 통일 */
.frm_input.full_input,
input[type='text'].frm_input,
input[type='password'].frm_input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    font-size: 15px;
    border: 1px solid #ddd;
    border-radius: 3px;
    margin-top: 4px;
    margin-bottom: 2px;
    transition: border 0.2s;
}
.frm_input.full_input:focus {
    border-color: #007bff;
    outline: none;
}

/* 툴팁 */
.tooltip_icon {
    background: none;
    border: none;
    color: #007bff;
    cursor: pointer;
    margin-left: 4px;
    font-size: 16px;
    vertical-align: middle;
}
.tooltip {
    display: none;
    position: absolute;
    z-index: 10;
    background: #fff;
    border: 1px solid #007bff;
    color: #333;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-top: 4px;
    min-width: 180px;
    max-width: 320px;
    word-break: keep-all;
}

/* 입력 그룹(아이디, 이메일 등) */
.id_input_wrap,
.email_input_wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap; /* 줄바꿈 방지 */
}

#reg_mb_id{
	width:70%;	
}
#btn_id_check{
	width:25%;
}

#reg_mb_email{
	width:40%;
}

#email_domain_select{
	margin-left:1%;
	width:37%
}
	

@media screen and (max-width: 768px) {
	.id_input_wrap,
.email_input_wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap; /* 줄바꿈 방지 */
}
	#reg_mb_id{
		
	}
	#btn_id_check{
		
	}
	
	#reg_mb_email{
		width:100%
	}
	
	#email_domain_select{
		margin-left:0%;
		width:100%
	}
	.btn_id_check{
		width:auto !important;
	}
}