@charset "utf-8";

/* reset */
* { margin:0; padding:0; box-sizing:border-box; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; -moz-text-size-adjust:none; -o-text-size-adjust:none; }
html, body { height:100%; width:100%; }
body * { font-family:'IBM Plex Sans KR', 'Nanum Gothic', 'Noto Sans KR', sans-serif; font-weight:400; font-size:14px; }

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, button, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strike, strong, sub, sup, 
tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, hr{ margin:0; padding:0; }

table { width:100%; table-layout:fixed; border-spacing:0; }
img { vertical-align:middle; }
ol, ul, li { list-style:none; }
em { font-style:normal; }
a { outline:none; text-decoration:none; }
button { border:0; cursor:pointer; z-index:1; } /* background:inherit; */


/* color setting */
:root {
	--transback30:rgba(0,0,0,0.30);
	--transback60:rgba(0,0,0,0.60);
	--background:#FDFDFC;
	--black_19:#191919;
	--point_red:#FF4026;
	--point_green:#0C9A56;
	
	--over_green:#E8F7F4;
	--over_yellow:#FFFBC9;
	--over_blue:#E3F1FF;
	
	--gray900:#FAFAFA;
	--gray800:#F5F5F5;
	--gray750:#EFEFEF;
	--gray700:#E2E2E2;
	--gray600:#BFBFBF;
	--gray500:#A0A0A0;
	--gray400:#929292;
	--gray300:#777777;
	--gray200:#444444;

	--green300:#006064;
	--yellow300:#F4D35E;
	--darkgreen300:#97971e;
	
}

/* font color */
.red { color:var(--point_red); }
.green { color:var(--point_green); }
.height100 { height:100px; }

/* toast msg */
#toast { 
	display:none; z-index:70; visibility:hidden; position:fixed; left:50%; top:90px; width:320px; 
	margin-left:-160px; padding:10px; background:var(--transback60); color:#FFFFFF; transition-duration:0.25s; 
	text-align:center; font-size:14px; border-radius:5px; line-height:150%;
}
#toast.show { visibility:visible; animation:fadein 0.5s, fadeout 0.5s 4s; }
@keyframes fadein { from { top:60px; opacity:0; } to { top:90px; opacity:1; } }
@keyframes fadeout { from { top:90px; opacity:1; } to { top:120px; opacity:0; } }
#toast > strong, span { font-size:14px; }


/* loading bar */
@keyframes lotate { 100% { transform:rotate(360deg); } }
#pageloading { display:none; position:fixed; z-index:80; top:0px; left:0px; right:0px; bottom:0px; } 
.loadingbg { position:fixed; top:0px; left:0px; right:0px; bottom:0px; background-color:rgba(0, 0, 0, 0.2); }
.loadingimg { 
	position:fixed; z-index:1; animation-name:lotate; animation:lotate 3s infinite; top:50%; left:50%; width:36px; height:36px; 
	margin-top:-18px; margin-left:-18px; border-radius:36px; background-image:url("/images/comm/loading.svg"); background-size:36px auto; 
	background-position:center; background-repeat:no-repeat; 
}

/* hr */
hr { border: none; /* 기본 테두리 제거 */
	height: 1px; /* 선의 굵기 설정 (높이로 지정) */
	background-color: var(--gray700); /* 선의 색상 설정 */
	width: 100%; /* 선의 길이 설정 */
	margin: 10px 0; /* 상하 여백 설정 */ }

/* button */
.btn_type_1 { background:var(--black_19); color:#fff; border:1px solid var(--black_19); } 
.btn_type_2 { background:var(--gray700); color:var(--black_19); border:1px solid var(--gray700); }
.btn_type_3 { background:#FFF; color:var(--gray300); border:1px solid var(--gray700); }

.btn_line_1 { background:#fff; color:var(--black_19); border:1px solid var(--black_19); }
.btn_line_2 { background:#fff; color:var(--point_red); border:1px solid var(--point_red); }
.btn_line_3 { background:#fff; color:var(--point_green); border:1px solid var(--point_green); }
.btn_line_4 { background:#fff; color:var(--gray500); border:1px solid var(--gray500); }

.btn_xs { padding:7px; border-radius:3px; font-size:13px; }
.btn_s { padding-top:10px; padding-bottom:10px; border-radius:3px; font-size:13px; }
.btn_m { padding-top:14.5px; padding-bottom:14.5px; border-radius:3px; font-size:15px; }
.btn_left { margin-left:5px; }

.btn50 { width:50px; }
.btn70 { width:70px; }
.btn120 { width:120px; }
.btn150 { width:150px; }
.btnh36 { height:36px; line-height:16px; }
.btnh36:hover { border:1px solid var(--black_19); }







/* input */
.custom_input { box-sizing: border-box; height:36px; background-color:#fff; border:1px solid var(--gray700); border-radius:3px; padding:9px 10px; font-size:13px; color:var(--black_19); vertical-align:middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.custom_input:focus { border-color:var(--mint500); outline:none; color:var(--gray200); }
.custom_input.-err { border:1px solid var(--point_red); }
.custom_input.-hidden { display:none; }
.custom_input.-all { width:100%; }
.custom_input.-mid { max-width:300px; width:100% }
.custom_input.-short { max-width:110px; width:100%; }
.custom_input.-long { max-width:500px; width:100% }
.custom_input.-readonly { background-color:var(--gray750); }
.custom_input::placeholder { color:var(--gray600); font-weight:400; font-size:13px; line-height:13px; }

/* iOS에서만 적용: font-family: monospace; -> 숫자 넓이 고정 */
@supports (-webkit-touch-callout: none) {
	.custom_input { font-family: monospace; letter-spacing: 0; }
}


input[type="text"].flatpickr-input {
	-webkit-appearance: none; /* iOS 기본 스타일 제거 */
	/* 기타 사용자 정의 스타일 */
}


/* input 크롬 자동입력 파란화면 제거 */
input:-webkit-autofill { -webkit-box-shadow:0 0 0 1000px white inset; box-shadow:0 0 0 1000px white inset; }

/* select */
.custom_selectbox { min-width:80px; height:36px; appearance:none; -webkit-appearance:none; -moz-appearance:none; background-color:#fff; border:1px solid var(--gray700); border-radius:3px; padding:7px 30px 7px 10px; font-size:13px; color:var(--gray300); cursor:pointer; outline:none; position:relative; box-sizing:border-box; vertical-align:middle; } 
.custom_selectbox { background-image:url("/images/comm/ico_select.svg"); background-repeat:no-repeat; background-position:right 10px center; background-size:16px; }
.custom_selectbox:hover { border-color:var(--gray600); }
.custom_selectbox:focus { border-color:var(--black_19); } /* box-shadow:0 0 5px rgba(0, 123, 255, 0.5); */


.custom_select { height:36px; appearance:none; -webkit-appearance:none; -moz-appearance:none; background-color:#fff; border:1px solid var(--gray700); border-radius:3px; padding:9px 30px 9px 10px; font-size:13px; color:var(--gray400); cursor:pointer; outline:none; position:relative; box-sizing:border-box; vertical-align:middle; } 
.custom_select { background-image:url("/images/comm/ico_select.svg"); background-repeat:no-repeat; background-position:right 10px center; background-size:16px; }
.custom_select { flex-grow:1; height:50px; font-size: 16px; color: var(--black_19); line-height:20px; }
.custom_select:hover { border-color:var(--gray600); }
.custom_select:focus { border-color:var(--black_19); } /* box-shadow:0 0 5px rgba(0, 123, 255, 0.5); */

.custom_select.btn_s { padding-top:10px; padding-bottom:10px; border-radius:3px; font-size:13px; }


/* input */
.custom_textarea { height:100px; background-color:#fff; border:1px solid var(--gray700); border-radius:3px; padding:9px 10px; font-size:14px; line-height:16px; color:var(--gray400); vertical-align:middle; }
.custom_textarea:focus { border-color:var(--mint500); outline:none; color:var(--gray200); }
.custom_textarea.-err { border:1px solid var(--point_red); }
.custom_textarea.-hidden { display:none; }
.custom_textarea.-default { width:100%; height:300px; }

/* input 크롬 자동입력 파란화면 제거 */
textarea:-webkit-autofill { -webkit-box-shadow:0 0 0 1000px white inset; box-shadow:0 0 0 1000px white inset; }


/* 테이블 스타일 */
.custom_table { table-layout:auto; width:100%; border-collapse:collapse; border-top:1px solid var(--gray700); }
.custom_table .checkbox-container { margin: 0 auto; }
.custom_table th { border-top:1px solid var(--gray750); text-align:center; vertical-align:middle; white-space:nowrap; max-width:300px; overflow:hidden; text-overflow:ellipsis; }
.custom_table td { border-top:1px solid var(--gray750); text-align:center; vertical-align:middle; white-space:nowrap; max-width:300px; overflow:hidden; text-overflow:ellipsis; }

.custom_table thead th { border-bottom:1px solid var(--black_19); line-height:100%; text-align:center; vertical-align:middle; color:var(--black_19); font-size:14px; padding:18px 7px; border-top:none; font-weight:600; }
.custom_table thead th label { display:inline-block; text-align:center; margin:0px; padding:0px; margin-top:2px; }

.custom_table tbody tr:hover { background-color: var(--gray750); }
.custom_table tbody tr.on { background-color: var(--over_yellow); }
.custom_table tbody tr.on:hover { background-color: var(--over_yellow); }

.custom_table tbody td { border-bottom:1px solid var(--gray750); line-height:100%; text-align:center; vertical-align:middle; color:var(--gray200); font-size:13px; padding:7px; }
.custom_table tbody td:hover { background-color:var(--gray700); }
.custom_table tbody td.narrow { padding:0px 7px 0px 7px; }
.custom_table tbody td.small { font-size:10px; }
.custom_table tbody td.left { text-align:left; }
.custom_table tbody td span.marginleft { margin-left:50px; }
.custom_table tbody td.wrap {
	white-space:normal;    /* 줄바꿈 허용 */
	overflow:visible;      /* 내용 숨김 해제 */
	text-overflow:clip;    /* ellipsis 제거 */
	word-break:break-all;  /* 한국어/영문 모두 줄바꿈 */
	max-width:300px;       /* 기존 max-width 유지 */
}

.custom_table tbody td label { display:inline-block; text-align:center; margin:0px; padding:0px; margin-top:2px; }




/* paging */
.pagination { display: flex;align-items: center;gap:24px; justify-content: center;}
.pagination .num{ display: flex;align-items: center;gap:6px; justify-content: center;}
.pagination button { border:1px solid var(--black_19); color:var(--black_19); background: #fff; padding:7px; min-width:30px; cursor: pointer; transition: all 0.2s ease; border-radius:3px; font-size:10px; font-weight:400; line-height:1; }
.pagination button:hover { background:#f0f0f0;}
.pagination button.active { background:var(--gray600); color:white; cursor:default; border-color:var(--gray600); }
.pagination button.disabled { color:var(--gray700); border-color:var(--gray700);}

.pagination button.first { border:none; width:24px; height:24px; background:url(/images/comm/ico_paging_first.svg) no-repeat 0 0; background-size:24px; }
.pagination button.first.disabled { display:none; }

.pagination button.prev { border:none; width:24px; height:24px; background:url(/images/comm/ico_paging.svg) no-repeat 0 0; }
.pagination button.prev.disabled { display:none; }

.pagination button.next { border:none; width:24px; height:24px; background:url(/images/comm/ico_paging.svg) no-repeat 0 0; }
.pagination button.next{ background-position-x:-24px; }
.pagination button.next.disabled { display:none; }

.pagination button.last { border:none; width:24px; height:24px; background:url(/images/comm/ico_paging_first.svg) no-repeat 0 0; background-size:24px; }
.pagination button.last{ background-position-x:-24px; }
.pagination button.last.disabled { display:none; }





/* scroll bar */
*::-webkit-scrollbar { width:8px; height:8px; }
*::-webkit-scrollbar-thumb { background-color:var(--gray600); border-radius:10px; background:var(--gray300); }
*::-webkit-scrollbar-track { background-color:var(--gray900); }


/* 체크박스 스타일
.checkbox-container input[type="checkbox"] {display: none;}
.custom-checkbox {width:24px;height:24px; background: url(/images/chk2.svg) no-repeat center center; background-size: cover; display: flex;justify-content: center;align-items: center;}
.checkbox-container input[type="checkbox"]:checked ~ .custom-checkbox {background-image: url(/images/chk2_active.svg);}

체크박스 스타일 - 우측에 label 텍스트 있을 때
.checkbox-container-txt{display: flex;align-items: center;margin-left: 8px;}
.checkbox-container-txt .txt{padding-left: 4px;font-size: 13px;color: var(--gray400);}
 */

/* checkbox  */
/*
.checkbox_container { display:block; width:24px; height:24px; cursor:pointer; }
.checkbox_container input[type="checkbox"] { display:none; }

.checkbox_container .custom_checkbox { display:inline-block; top:0px; left:0px; width:22px; height:22px; margin:0px; line-height:24px; border:1px solid var(--gray600); border-radius:5px; }
.checkbox_container .custom_checkbox::after { top:50%; margin-top:-12px; }
.checkbox_container:hover .custom_checkbox { border:1px solid var(--black_19); }
.checkbox_container input[type="checkbox"]:checked ~ .custom_checkbox { border:1px solid var(--black_19); background:var(--black_19); background-image:url(/images/comm/checked_white.svg); background-position:center; background-repeat:no-repeat; background-size:12px; }
*/

.checkbox_area { display:block; width:100%; transition:all 0.1s ease; cursor:pointer; margin-bottom:1px; }
.checkbox_area input[type="checkbox"] { display:none; }

.checkbox_area .custom_checkbox { display:inline-block; top:0px; left:0px; width:24px; height:24px; margin:0px; line-height:24px; transition:all 0.1s ease; border:1px solid var(--gray600); border-radius:5px; }
.checkbox_area .custom_checkbox::after { top:50%; margin-top:-12px; }
.checkbox_area:hover .custom_checkbox { border:1px solid var(--black_19); }
.checkbox_area input[type="checkbox"]:checked ~ .custom_checkbox { border:1px solid var(--black_19); background:var(--black_19); background-image:url(/images/comm/checked_white.svg); background-position:center; background-repeat:no-repeat; background-size:12px; }

.checkbox_area .custom_txt { display:inline-block; width:calc(100% - 40px); margin-left:10px; vertical-align:top; font-size:14px; line-height:150%; text-align:left; }
.checkbox_area_none { display:block; width:100%; cursor:pointer; margin:8px 0px 8px 0px; }


/* radio */
.radiobox_area { display:block; width:100%; transition:all 0.1s ease; cursor:pointer; margin-bottom:1px; }
.radiobox_area input[type="radio"] { display:none; }

.radiobox_area .custom_radio { display:inline-block; top:0px; left:0px; width:18px; height:18px; margin:5px 0px 5px 0px; line-height:16px; transition:all 0.1s ease; border:1px solid var(--gray600); border-radius:22px; }
.radiobox_area .custom_radio::after { top:50%; margin-top:-12px; }
.radiobox_area:hover .custom_radio { border:1px solid var(--black_19); }
.radiobox_area input[type="radio"]:checked ~ .custom_radio { border:1px solid var(--black_19); background:var(--black_19); background-image:url(/images/comm/checked_white.svg); background-position:center; background-repeat:no-repeat; background-size:10px; }

.radiobox_area .custom_txt { display:inline-block; width:calc(100% - 40px); margin-left:10px; vertical-align:top; font-size:14px; line-height:150%; text-align:left; }
.radiobox_area_none { display:block; width:100%; cursor:pointer; margin:10px 0px 10px 0px; }

/* popup layer */
/*
layer_pop :배경
layer_box :박스
layer_title_txt :제목
layer_close :X
layer_content :내용
*/
.layer_pop { display:none; z-index:50; position:fixed; top:0px; left:0px; bottom:0px; right:0px; text-align:center; background:var(--transback30); }
.layer_pop .layer_box { display:flex; flex-direction:column; }

.layer_pop .layer_box .layer_inside { position:relative; margin:30px auto; vertical-align:top; top:0px; width:760px; border-radius:10px; background:#FFF; }

.layer_pop .layer_box .layer_inside .layer_title { z-index:1; position:relative; text-align:left; top:0px; width:100%; left:0px; height:60px; }
.layer_pop .layer_box .layer_inside .layer_title .layer_title_txt { position:relative; padding:20px 60px 20px 20px; font-weight:600; font-size:20px; white-space:nowrap; overflow:hidden;text-overflow:ellipsis; }
.layer_pop .layer_box .layer_inside .layer_title .layer_close { position:absolute; top:12px; right:10px; width:24px; height:24px; padding:20px; background:url(/images/comm/layer_close.svg) no-repeat center; cursor:pointer; border-radius:5px; }
.layer_pop .layer_box .layer_inside .layer_title .layer_close:hover { background-color:var(--gray700); }

.layer_pop .layer_box .layer_inside .layer_data { position:sticky; text-align:left; left:0px; right:0px; max-height:calc(100svh - 140px); overflow-y:auto; overflow-x:hidden; }
.layer_pop .layer_box .layer_inside .layer_data .layer_content { position:relative; top:0px; padding:20px; word-break:break-all; }

.layer_pop .layer_box .layer_inside .layer_footer { position:sticky; text-align:left; left:0px; right:0px; height:20px; }

@media (max-width:799px) {
	.layer_pop .layer_box .layer_inside { width:100%; margin:0px; height:100svh; border-radius:0; }
	.layer_pop .layer_box .layer_inside .layer_data { max-height:calc(100svh - 70px); }
}


/* popup_over layer */
/*
layer_over_pop :배경
layer_box :박스
layer_over_title_txt :제목
layer_over_close :X
layer_over_content :내용
*/
.layer_over_pop{ display:none; z-index:51; position:fixed; top:0px; left:0px; bottom:0px; right:0px; text-align:center; background:var(--transback30); }
.layer_over_pop .layer_box { display:flex; flex-direction:column; }

.layer_over_pop .layer_box .layer_inside { position:relative; margin:30px auto; vertical-align:top; top:0px; width:760px; border-radius:10px; background:#FFF; }

.layer_over_pop .layer_box .layer_inside .layer_title { z-index:1; position:relative; text-align:left; top:0px; width:100%; left:0px; height:60px; }
.layer_over_pop .layer_box .layer_inside .layer_title .layer_over_title_txt { position:relative; padding:20px 60px 20px 20px; font-weight:600; font-size:20px; white-space:nowrap; overflow:hidden;text-overflow:ellipsis; }
.layer_over_pop .layer_box .layer_inside .layer_title .layer_over_close { position:absolute; top:12px; right:10px; width:24px; height:24px; padding:20px; background:url(/images/comm/layer_close.svg) no-repeat center; cursor:pointer; border-radius:5px; }
.layer_over_pop .layer_box .layer_inside .layer_title .layer_over_close:hover { background-color:var(--gray700); }

.layer_over_pop .layer_box .layer_inside .layer_data { position:sticky; text-align:left; left:0px; right:0px; max-height:calc(100svh - 140px); overflow-y:auto; overflow-x:hidden; }
.layer_over_pop .layer_box .layer_inside .layer_data .layer_over_content { position:relative; top:0px; padding:20px; word-break:break-all; }

.layer_over_pop .layer_box .layer_inside .layer_footer { position:sticky; text-align:left; left:0px; right:0px; height:20px; }

@media (max-width:799px) {
	.layer_over_pop .layer_box .layer_inside { width:100%; margin:0px; height:100svh; border-radius:0; }
	.layer_over_pop .layer_box .layer_inside .layer_data { max-height:calc(100svh - 70px); }
}


/* alert layer */
/*
alert_pop :배경
alert_close :X
alert_title :제목
alert_content :내용
alert_btn :버튼
*/
.alert_pop{ display:none; z-index:60; position:fixed; top:0px; left:0px; bottom:0px; right:0px; text-align:center; background:var(--transback30); }
.alert_pop::after { content:''; display:inline-block; vertical-align:middle; width:0px; height:100%; }

.alert_pop .alert_box { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:320px; height:auto; padding:20px; background:#fff; box-sizing:border-box; border-radius:5px; }
.alert_pop .alert_box .alert_close { display:none; position:absolute; top:12px; right:10px; width:24px; height:24px; padding:20px; background:url(/images/comm/layer_close.svg) no-repeat center; cursor:pointer; border-radius:5px; }
.alert_pop .alert_box .alert_close:hover { background-color:var(--gray700); }

.alert_pop .alert_box .alert_title { margin-bottom:10px; color:var(--black_19); font-size:11px; padding-right:40px; text-align:left; }
.alert_pop .alert_box .alert_content { margin-bottom:20px; color:var(--gray300); font-size:16px; line-height:150%; text-align:left; font-weight:400; }
.alert_pop .alert_box .alert_content > strong, span { color:var(--black_19); }
.alert_pop .alert_box .alert_content > span { font-size:14px; }
.alert_pop .alert_box .alert_btn { position:relative; height:40px; }



/* alert_over layer */
/*
alert_over_pop :배경
alert_over_close :X
alert_over_title :제목
alert_over_content :내용
alert_over_btn :버튼
*/
.alert_over_pop{ display:none; z-index:61; position:fixed; top:0px; left:0px; bottom:0px; right:0px; text-align:center; background:var(--transback30); }
.alert_over_pop::after { content:''; display:inline-block; vertical-align:middle; width:0px; height:100%; }

.alert_over_pop .alert_box { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:320px; height:auto; padding:20px; background:#fff; box-sizing:border-box; border-radius:5px; }
.alert_over_pop .alert_box .alert_over_close { display:none; position:absolute; top:12px; right:10px; width:24px; height:24px; padding:20px; background:url(/images/comm/layer_close.svg) no-repeat center; cursor:pointer; border-radius:5px; }
.alert_over_pop .alert_box .alert_over_close:hover { background-color:var(--gray700); }

.alert_over_pop .alert_box .alert_over_title { margin-bottom:10px; color:var(--black_19); font-size:11px; padding-right:40px; text-align:left; }
.alert_over_pop .alert_box .alert_over_content { margin-bottom:20px; color:var(--gray300); font-size:16px; line-height:150%; text-align:left; font-weight:400; }
.alert_over_pop .alert_box .alert_over_content > strong, span { color:var(--black_19); }
.alert_over_pop .alert_box .alert_over_content > span { font-size:14px; }
.alert_over_pop .alert_box .alert_over_btn { position:relative; height:40px; }