/*!
 * @CustomCss
 * @version 1.0.0 | 2023.01.02 Updates
 */

@-webkit-keyframes loadingoverlay_animation__rotate_right {
	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes loadingoverlay_animation__rotate_right {
	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-webkit-keyframes loadingoverlay_animation__rotate_left {
	to {
		-webkit-transform: rotate(-360deg);
		transform: rotate(-360deg);
	}
}

@keyframes loadingoverlay_animation__rotate_left {
	to {
		-webkit-transform: rotate(-360deg);
		transform: rotate(-360deg);
	}
}

@-webkit-keyframes loadingoverlay_animation__fadein {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.1, 0.1);
		transform: scale(0.1, 0.1);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
	}
}

@keyframes loadingoverlay_animation__fadein {
	0% {
		opacity: 0;
		-webkit-transform: scale(0.1, 0.1);
		transform: scale(0.1, 0.1);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
	}
}

@-webkit-keyframes loadingoverlay_animation__pulse {
	0% {
		-webkit-transform: scale(0, 0);
		transform: scale(0, 0);
	}
	50% {
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
	}
	100% {
		-webkit-transform: scale(0, 0);
		transform: scale(0, 0);
	}
}

@keyframes loadingoverlay_animation__pulse {
	0% {
		-webkit-transform: scale(0, 0);
		transform: scale(0, 0);
	}
	50% {
		-webkit-transform: scale(1, 1);
		transform: scale(1, 1);
	}
	100% {
		-webkit-transform: scale(0, 0);
		transform: scale(0, 0);
	}
}

/* ui 달력 */
.ui-datepicker *{font-size:16px;}

.inpline.datepicker {
	font-size: 16px;
}
/* 레이어팝업 */
.pop {position: absolute; top: 0; left: 0; width: 100%; z-index: 1000; }
.pop .popBox {position: absolute; top: 70px; left: 0;}
.pop .popitem {color: #fff; padding: 5px; margin: 10px;display: none; vertical-align: top; background: #000;}
.pop .popitem img {max-width: 100%;}
.pop .closeWrap {text-align: center; font-size: 14px; padding: 5px 0;}
.pop .closeWrap a {color: #fff; margin: 0 5px;}
@media all and (max-width:640px) {
	.pop .popBox .popitem div.imgs {width:100% !important;height:auto !important;}
}

/* 다음글, 이전글 */
.foot_board {color: #101010;border-collapse:collapse; width:100%; border-top:1px solid #e5e5e5;word-break:break-all;}
.foot_board .gray {text-align:center;}
.foot_board th {color:#2f3743; border-bottom:1px solid #e5e5e5; padding:12px 10px 11px 10px; font-weight:500; background-color:#fafafb;}
.foot_board td {border-bottom:1px solid #e5e5e5; padding:9px 10px 8px 10px; background:none; text-align:left;}

/* 동영상 레이어 */
.video_modal_popup {display: none; z-index: 110; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background:rgba(0,0,0,0.8);}
.video_wrapper {display: flex; position: fixed; top: 0; left: 0; right: 0; bottom: 0; justify-content: center; align-items: center; z-index: 1;}
.video_modal_popup .video_wrapper .video {position: relative; width: 60%; padding-bottom:33.8%; z-index: 10; top: 20px;font-size:0;}
.video_modal_popup .video_wrapper iframe {position: absolute; width: 100%; height: 100%;}
@media all and (max-width:1024px) {
	.video_modal_popup .video_wrapper .video {width: 80%; padding-bottom: 44.9%;}
}

/* 게시물 상세페이지 */
.ck-content strong {font-weight: bold !Important;}

/* 신청확인 및 취소*/
.pobox {position: relative; text-align: center; margin-bottom: 50px; padding: 35px 80px; border:1px solid #ddd; border-image: initial;border-top: 5px solid #3472c5; border-radius: 10px;}
.pobox .box_tit {font-size: 29px; color:#0c59bc; font-weight: 600;}
.pobox .box_tit img {vertical-align: middle; margin: 0px 6px 5px 0px;}
.pobox .box_tit em.black {color:#000;}
.pobox .box_text em.red {font-weight: 600; color:#e30000;}
.pobox .box_text {font-size:22px; color:#000; font-weight:400; margin-bottom:30px;}
.pobox .box_desc em.blue {color:#0c59bc;}
.pobox .box_desc {font-size:18px; color:#666}

/* 촬영방법 영상팝업 */
#videoPopup{display:none;position:fixed;left:0;right:0;top:20%;width:90%;max-width:1080px;margin:0 auto;z-index:101;}
#videoPopup .layerWrap{position:relative;width:100%;height:0;padding-top:56.25%;}
#videoPopup .layerWrap video{position:absolute;left:0;top:0;width:100%;height:100%;}
#videoPopup .close {display:block;position:absolute;right:-25px;top:-25px;width:50px;height:50px;border-radius:100%;border:2px solid #000;background:#fff url('../imgs/header/m_close.png') no-repeat 50%;text-indent:-9999px;overflow:hidden;}
@media all and (max-width:640px) {
	#videoPopup .close {right:-15px;top:-15px;width:34px;height:34px;background-size:15px 15px;}
}



body {
	/* 스크롤바가 있든 없든 영역을 항상 확보해서 화면 밀림 방지 */
	scrollbar-gutter: stable;
}

html.modal-open,
body.modal-open {
	overflow: hidden !important;
	/* 만약 스크롤바가 사라지면서 화면이 옆으로 튀는 게 싫다면 아래 추가 */
}


/* 모달 배경 및 중앙 정렬 */
.modal-wrapper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	overflow-y: auto;
}

.modal-wrapper.active {
	display: flex !important;
}

.modal-wrapper .board_insert th {
	background: #f9fbfc;
	border-bottom: 1px solid #e1e1e1;
	font-family: var(--ecms-font-family-a);
	padding-left:1.5rem;
}

.modal-wrapper .board_insert td {
	padding: 10px 15px;
	border-bottom: 1px solid #e1e1e1;
}

.modal-content {
	background: #fff; border-radius: 8px; overflow: hidden;
	box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.modal-content.modal-xl {
	width:70%;
}
.modal-content.modal-xxl {
	width:90%;
}

/* 헤더 - Navy 테마 */
.modal-header {
	background: #1b3c72; color: #fff; padding: 15px 25px;
	display: flex; justify-content: space-between; align-items: center;
}
.modal-header h3 { font-size: 1.2rem; font-weight: 500; margin: 0; }
.modal-close { background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; }

/* 바디 패딩 */
.modal-body { padding: 25px; max-height: 70vh; overflow-y: auto; }
.modal-content.modal-xl .modal-body {
	max-height: 80vh;
}
.modal-content.modal-xxl .modal-body {
	max-height: 90vh;
}
/* 푸터 중앙 정렬 */
.modal-footer {position:relative; padding: 15px; border-top: 1px solid #eee; background: #f9fbfc; }
.modal-footer .button-group {
	width:100%;
	display: inline-flex; align-items: center; justify-content: space-between;
}


.modal-content .board_insert {
	table-layout: fixed;
	width: 100%;
}
/* 로딩 오버레이 - z-index를 최상위로 올리고 배경색을 진하게 해보세요 */
.macho-loader-wrapper {
	position: absolute !important; /* 강제 적용 */
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	background: rgba(255, 255, 255, 0.85) !important; /* 조금 더 불투명하게 */
	display: flex !important;
	align-items: center;
	justify-content: center;
	z-index: 10000 !important; /* 모달 내부 요소보다 높아야 함 */
	pointer-events: all;
}

.macho-spinner {
	width: 50px;
	height: 50px;
	border: 5px solid #f3f3f3;
	border-top: 5px solid #3498db;
	border-radius: 50%;
	animation: macho-spin 1s linear infinite;
}
@keyframes macho-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}



/* 안내 문구 스타일 */
.txt_info {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	color: #666; /* 너무 흐리지 않은 회색 */
	line-height: 1.5;
	letter-spacing: -0.02em;
}

/* 불렛 포인트나 아이콘을 앞에 넣고 싶을 때 (선택 사항) */
.txt_info::before {
	content: '※'; /* 또는 '·' */
	margin-right: 4px;
	color: #888;
}

/* 강조가 필요한 안내 문구 (빨간색 버전) */
.txt_info.point {
	color: #e74c3c;
}


/* 모달 내 입력 테이블 여백 조정 */
.board_insert {
	width: 100%;
	border-top: 2px solid #333; /* 시큐웨어 표준 상단 라인 */
}

.board_insert th {
	background: #f9f9f9;
	padding: 12px 15px;
	text-align: left;
	border-bottom: 1px solid #ddd;
	font-weight: 600;
}

.board_insert td {
	padding: 10px 15px;
	border-bottom: 1px solid #ddd;
}

/* 업로드 진행바 영역 간격 */
#uploadProgressArea {
	padding: 15px;
	background: #f4f6f9;
	border-radius: 4px;
	margin-top: 20px;
}



/* 파일 업로드 커스텀 그룹 */
.file_input_wrapper {
	display: flex;
	gap: 6px;
	align-items: center;
}

/* 파일명이 보여지는 가짜 입력창 */
#fileNameDisplay {
	flex: 1;
	background-color: #f9f9f9;
	cursor: default;
}

/* 찾아보기 버튼 (회색 톤) */
.btn_file_select {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 34px;
	padding: 0 15px;
	background: #6c757d;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.2s;
}
.btn_file_select:hover { background: #5a6268; }

/* 업로드 버튼 (시큐웨어 블루) */
.btn_file_upload {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 34px;
	padding: 0 15px;
	background: #007bff;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
}
.btn_file_upload:hover { background: #0056b3; }

.btn_file_select span, .btn_file_upload span { font-size: 18px; }

/* 진행바 디자인 개선 */
.progress_info {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	margin-bottom: 6px;
	color: #333;
}

.progress_bar_container {
	width: 100%;
	height: 8px;
	background: #eee;
	border-radius: 4px;
	overflow: hidden;
}

.progress_bar_fill {
	width: 0%;
	height: 100%;
	background: linear-gradient(90deg, #007bff, #00c6ff);
	transition: width 0.2s;
}

.tag_list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 5px;
}
.tag_item {
	background-color: #f1f3f5;
	color: #495057;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 13px;
	display: flex;
	align-items: center;
	border: 1px solid #dee2e6;
}
.tag_remove {
	margin-left: 6px;
	cursor: pointer;
	color: #adb5bd;
	font-weight: bold;
}
.tag_remove:hover {
	color: #fa5252;
}

/* 프로세스 안내 박스 전체 컨테이너 */
.process_callout_box {
	border: 1px solid #dee2e6;
	border-left: 5px solid #007bff;
	border-radius: 6px;
	margin-bottom: 25px;
	overflow: hidden;
	background-color: #ffffff;
}

/* 헤더 영역 (클릭 가능한 부분) */
.process_callout_header {
	background: #f8f9fa;
	padding: 12px 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: background 0.2s ease;
}

.process_callout_header:hover {
	background: #f1f3f5;
}

.process_callout_title_group {
	display: flex;
	align-items: center;
}

.process_callout_title_group .material-symbols-outlined {
	font-size: 20px;
	color: #007bff;
	margin-right: 10px;
}

.process_callout_title_group strong {
	font-size: 14px;
	color: #333;
}

/* 상세 내용 영역 */
.process_callout_content {
	padding: 15px 20px 20px 50px;
	background: #fff;
	border-top: 1px solid #eee;
}

.process_callout_content p {
	margin: 0;
	color: #555;
	font-size: 13.5px;
	line-height: 1.6;
	letter-spacing: -0.5px;
}

.process_callout_content .sub_txt {
	font-size: 12px;
	color: #999;
	margin-top: 8px;
	display: block;
}

/* 화살표 애니메이션 */
.rotate_icon {
	transition: transform 0.3s ease;
}
.rotate_icon.active {
	transform: rotate(180deg);
}


form .board_insert textarea {
	font-size: 16px;
}



a.btn_regi[disabled="disabled"],
a.btn_regi.disabled {
	background: #cccccc !important;
	border: 1px solid #bbbbbb !important;
	color: #666666 !important;
	cursor: not-allowed;
	pointer-events: none;
	opacity: 0.7;
}
a.btn_regi[disabled="disabled"] span {
	color: #666666 !important;
}


.inline-form {
	display: flex;
	align-items:center;
	gap: 15px;
}

b[v-cloak],
span[v-cloak]{
	display: inline-flex !important;
	width: 16px;
	height: 16px;
	color: rgba(0,0,0,0) !important;
	background-image: url('data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==');
}

[v-cloak]  {
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}

tr.select-item:hover {
	background-color: #f1f1f1;
	cursor: pointer;

}

tr.select-item.select-item-bold:hover {
	font-weight: bold;
}

tr.checked-item {
	background-color: #e7effb;
	font-weight: 600;
}

.cursor-pointer {
	cursor:pointer !important;
}

.modal-body .section-title {
	position: relative;
	font-weight: 600;
	font-size: 1.2em;
	margin-bottom:1rem;
}
.btn_big_white {
	border-color: #ffc107; color: #856404; background-color: #fff9e6;
}
.btn_big_white:disabled,
.btn_big_white.disabled {
	border-color: #e0e0e0 !important;
	color: #a0a0a0 !important;
	background-color: #f5f5f5 !important;
	cursor: not-allowed;
	opacity: 0.7;
	box-shadow: none !important;
}
.btn_big_white:disabled:hover {
	background-color: #f5f5f5 !important;
	border-color: #e0e0e0 !important;
}


.btn_big_darkblue:disabled,
.btn_big_darkblue.disabled {
	background-color: #cbd5e0 !important;
	border-color: #cbd5e0 !important;
	color: #ffffff !important;
	cursor: not-allowed;
	opacity: 0.6;
	box-shadow: none !important;
}
.btn_big_darkblue:disabled:hover {
	background-color: #cbd5e0 !important;
	border-color: #cbd5e0 !important;
}

.apply-status-container {
	flex: 1;
	display: flex;
	justify-content: center;
}

.status-badge {
	display: flex;
	align-items: center;
	background-color: #f8f9fa;
	padding: 6px 15px;
	border-radius: 50px;
	border: 1px solid #e9ecef;
}

.status-badge .label {
	color: #6c757d;
	font-weight: 500;
	margin-right: 10px;
}

.status-badge .divider {
	display: inline-block;
	width: 1px;
	height: 14px;
	background-color: #dee2e6;
	margin-right: 10px;
}

.status-badge .value {
	color: #111827;
	font-weight: 700;
}

/* 범용 상태 칩
   목록/상세에서 enum 상태 하나를 한 눈에 보여주기 위한 공용 배지.
   사용 예) <span class="status-chip status-chip--success">승인완료</span>
   또는   <span class="status-chip status-accept">승인완료</span>  ← 도메인별 alias 사용 시 */
.status-chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	border-radius: 999px;
	border: 1px solid transparent;
	white-space: nowrap;
}

/* 의미 기반 variant (다른 도메인의 상태 enum 에도 재사용 가능) */
.status-chip--pending {
	color: #8a6d00;
	background-color: #fff8db;
	border-color: #f7e08a;
}
.status-chip--success {
	color: #1d643b;
	background-color: #e6f6ee;
	border-color: #a8dcc0;
}
.status-chip--danger {
	color: #a02020;
	background-color: #fdecec;
	border-color: #f3bcbc;
}
.status-chip--muted {
	color: #4b5563;
	background-color: #f1f3f5;
	border-color: #dee2e6;
}
.status-chip--info {
	color: #2c5282;
	background-color: #ebf2fb;
	border-color: #b6cdea;
}

/* 서포터즈 신청 상태(SupportersApplyStatusType) 직결 alias.
   HTML 에서 :class="'status-' + item.applyStatus.toLowerCase()" 로 바로 연결 */
.status-chip.status-apply    { color:#8a6d00; background:#fff8db; border-color:#f7e08a; }
.status-chip.status-accept   { color:#1d643b; background:#e6f6ee; border-color:#a8dcc0; }
.status-chip.status-complete { color:#a02020; background:#fdecec; border-color:#f3bcbc; }
.status-chip.status-cancel   { color:#4b5563; background:#f1f3f5; border-color:#dee2e6; }

.color-red {
	color: #ef4444 !important;
}

.modal-body select.selline,
.modal-body input.inpline
{
	height:40px;
}


.headerWrap #top1menu {
	display: flex;
	flex-wrap: nowrap;
}

.headerWrap #top1menu li.top2hover {
	flex-shrink: 0;
}

.text-left {
	text-align:left !important;
}
.pl-2,
.px-2 {
	padding-left: 0.5rem !important;
}


.text-gray {
	color: #66778a !important
}

.text-red {
	color: #a93535 !important
}

.text-yellow {
	color: #bd5800 !important
}

.text-green {
	color: #227e41 !important
}

.text-dark {
	color:#333 !important;
}

.text-black {
	color: #000 !important
}

.text-blue {
	color: #296ad4 !important
}

.text-primary {
	color :#2c37a6 !important;
}


/* CKEditor 5 게시글 본문 테이블 스타일링 */
.ck-content {
	margin-top:20px;
	line-height: 1.6;
	color: #333;
}

.ck-content table {
	width: 100% !important;
	border-collapse: collapse !important;
	margin: 1.5rem 0;
	border: 1px solid #d1d5db; /* 외곽선색 */
	table-layout: fixed; /* 테이블 너비 고정 */
}

.ck-content table td,
.ck-content table th {
	border: 1px solid #d1d5db !important; /* 칸 구분선 */
	padding: 12px 15px !important;       /* 안쪽 여백 */
	word-break: break-all;               /* 텍스트 줄바꿈 */
	vertical-align: middle;
	text-align:center !important;
}


/* 표 내부의 p 태그 마진 제거 (불필요한 공백 방지) */
.ck-content table p {
	margin: 0 !important;
	padding: 0 !important;
}

/* 모바일 대응: 표가 너무 크면 가로 스크롤 생성 */
@media screen and (max-width: 768px) {
	.ck-content {
		overflow-x: auto;
	}
	.ck-content table {
		min-width: 500px; /* 모바일에서 표가 너무 찌그러지지 않게 */
	}
}



/* 공통 버튼 스타일 */
.btn_small_red,
.btn_small_white {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 500;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.2s ease;
	text-decoration: none;
	border: 1px solid transparent;
	line-height: 1.4;
}

/* Red 버튼: 강조용 */
.btn_small_red {
	background-color: #e53e3e;
	color: #ffffff;
}

.btn_small_red:hover {
	background-color: #c53030;
}

.btn_small_red:active {
	background-color: #9b2c2c;
}

/* White 버튼: 취소 또는 일반 작업용 */
.btn_small_white {
	background-color: #ffffff;
	color: #4a5568;
	border-color: #d1d5db;
}

.btn_small_white:hover {
	background-color: #f7fafc;
	border-color: #cbd5e0;
}

.btn_small_white:active {
	background-color: #edf2f7;
}



#popup-wrap {
	position: relative;
	z-index: 9999;
}

.main-layer-popup {
	position: fixed; /* 화면에 고정 */
	width: 400px;
	background: #fff;
	border: 1px solid #ddd;
	box-shadow: 5px 5px 25px rgba(0,0,0,0.2);
	border-radius: 10px;
	overflow: hidden;
	display: none; /* 일단 숨김 (JS에서 판단 후 노출) */
}

.popup-body img {
	width: 100%;
	height: auto;
	display: block;
}

.popup-footer {
	background: #222;
	padding: 10px 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.today-check {
	color: #eee;
	font-size: 13px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
}

.btn-close {
	background: #555;
	color: #fff;
	border: none;
	padding: 4px 12px;
	border-radius: 4px;
	font-size: 12px;
	cursor: pointer;
}

.btn-close:hover {
	background: #777;
}

/* 모바일 전용: 화면 중앙에 꽉 차게 */
@media screen and (max-width: 500px) {
	.main-layer-popup {
		width: 90% !important;
		left: 5% !important;
		top: 20% !important;
	}
}