@charset "utf-8";

/* LHI 2025.11.19
   component - color form btn popup
*/

:root {
	--whte:#FFFFFF;--whte-gr: linear-gradient(360deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.7) 100%);
    --red:#CA1F22; --red-80:#F44336; --red-40:#EB989A; --red-20:#FFE5E5;
    --orng:#FF9800;
    --gren:#415761; --gren-80:#1F4E79; --gren-60:#00897B;
    --navy:#0F3561; --navy-80:#213784; --navy-60:#618193; --navy-40:#C1CED1;
    --blue:#2D4CB7; --blue-80:#3A61EA; --blue-60:#5184FF; --blue-40:#DBEBFF; --blue-20:#E6EEF7; --blue-10:#F1F7FE;
    --gray:#A4ABCA; --gray-30:#CCCCCC; --gray-20:#E8ECEF; --gray-10:#F0F2F5;
    --blck:#000000; --blck-80:#222222; --blck-70:#333333; --blck-60:#555555; --blck-50:#555555;--blck-40:#444;
    --purple:#322A66; --purple-80: #493AA1; --purple-70: #301A87; --purple-60:#5C47E4; --purple-40:#9195FA;--purple-30:#A4ABCA; --purple-20:#E2E9F4;--purple-10:#D7DFEA;--purple-gr:linear-gradient(180deg, #F0F2F5 0%, #E4EBF6 100%);
    --pink:#EE2B8C;--pink-10:#FFE1EF; --pink-gr: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 237, 246, 0.9) 100%);
}

/* input */
label {position:relative; display:inline-block; vertical-align:middle;}
input::placeholder {font-weight:500; color:var(--blck-50);}
input[type="text"], input[type="date"], input[type="month"], select, input[type="radio"], input[type="checkbox"] {font-family:'Pretendard', Sans-serif; font-size:15px; font-weight:400; color:var(--blck-50); border:1px solid var(--gray-30); background-color:var(--whte); outline:none; box-sizing:border-box;}
input[type="text"], input[type="date"], input[type="month"], select {min-width:150px; height:37px; padding:0 10px; vertical-align:middle; border-radius:3px; background-color:var(--whte); box-sizing:border-box;}
input[type="text"]:hover, input[type="text"]:focus, input[type="text"]:active,
input[type="date"]:hover, input[type="date"]:focus, input[type="date"]:active,
input[type="month"]:hover, input[type="month"]:focus, input[type="month"]:active {border-color:var(--blue);}
input[type="text"]:disabled, input[type="date"]:disabled, input[type="month"]:disabled {color:var(--blck-30); border-color:var(--gray-30); background-color:var(--gray-20); cursor:unset;}
input[type="text"][readonly="readonly"], input[type="date"][readonly="readonly"], input[type="month"][readonly="readonly"] {color:var(--blck-30); border-color:var(--gray-30); background-color:var(--gray-20); pointer-events:none; cursor:unset;}

input[type="date"] {position:relative; cursor:pointer;}
input[type="date"]::-webkit-clear-button, input[type="date"]::-webkit-inner-spin-button {display:none;}
input[type="date"]::-webkit-calendar-picker-indicator {position:absolute; left:0; top:0; width:100%; height:100%; background:transparent; color:transparent; cursor:pointer; z-index:1;}
input[type="date"]:after {content:''; position:absolute; top:0; right:0; width:35px; height:35px; background:url('/images/nfsi/front/information/board/inp_wrap.png') right -105px no-repeat;}
input[type="date"]:hover:after, input[type="date"]:focus:after, input[type="date"]:active:after {border-color:var(--blue); background-position-y:-140px;}
input[type="date"]:disabled {color:var(--blck-30); border-color:var(--gray-30); background-color:var(--gray-20); pointer-events:none; cursor:unset;}
input[type="date"][readonly="readonly"] {color:var(--blck-30); border-color:var(--gray-30); background-color:var(--gray-20); pointer-events:none; cursor:unset;}
input[type="date"]:disabled:after, input[type="date"][readonly="readonly"]:after { background-position-y:-175px;}

input[type="month"] {position:relative; cursor:pointer;}
input[type="month"]::-webkit-clear-button, input[type="month"]::-webkit-inner-spin-button {display:none;}
input[type="month"]::-webkit-calendar-picker-indicator {position:absolute; left:0; top:0; width:100%; height:100%; background:transparent; color:transparent; cursor:pointer; z-index:1;}
input[type="month"]:after {content:''; position:absolute; top:0; right:0; width:35px; height:35px; background:url('/images/nfsi/front/information/board/inp_wrap.png') right -105px no-repeat;}
input[type="month"]:hover:after, input[type="month"]:focus:after, input[type="month"]:active:after {border-color:var(--blue); background-position-y:-140px;}
input[type="month"]:disabled {color:var(--blck-30); border-color:var(--gray-30); background-color:var(--gray-20); pointer-events:none; cursor:unset;}
input[type="month"][readonly="readonly"] {color:var(--blck-30); border-color:var(--gray-30); background-color:var(--gray-20); pointer-events:none; cursor:unset;}
input[type="month"]:disabled:after, input[type="month"][readonly="readonly"]:after { background-position-y:-175px;}

label + label input[type="checkbox"], label + label input[type="radio"] {margin-left:8px;}
input[type="checkbox"], input[type="radio"] {width:auto; vertical-align:middle; margin:-2px 5px 0 0; line-height:1;}
input[type="checkbox"]:disabled, input[type="radio"]:disabled {pointer-events:none; cursor:unset;}

select {position:relative; height:37px; padding:0 35px 0 10px; vertical-align:middle; border-radius:3px; background:url('/images/nfsi/front/information/board/inp_wrap.png') right 0 no-repeat var(--whte); -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer;}
select::-ms-expand {display:none;}
select:hover, select:focus, select:active {border-color:var(--blue); background-position-y:-35px;}
select:disabled {color:var(--blck-30); border-color:var(--gray-30); background-position-y:-70px; background-color:var(--gray-20); pointer-events:none; cursor:unset;}
select[readonly="readonly"] {color:var(--blck-30); border-color:var(--gray-30); background-position-y:-70px; background-color:var(--gray-20); pointer-events:none; cursor:unset;}
select option {font-weight:500;}

:focus,input[type="radio"]:focus{outline:2px dotted #000;outline-offset:1px;}
input:focus{outline:2px dotted var(--navy-80);outline-offset:0;}


/* year select */
.inp_year {position:relative; cursor:pointer; background:url('/images/nfsi/front/information/board/inp_wrap.png') right -105px no-repeat;}
.inp_year:hover, .inp_year:focus, .inp_year:active {background-position-y:-140px;}
.year-grid-wrapper {position:absolute; display: none;width:225px; padding:15px; font-size:14px; text-align:center; border:1px solid var(--gray-30); border-radius:3px; background:var(--whte); box-shadow:0 0 6px rgba(0,0,0,0.1); z-index:9;}
.year-header {margin-bottom:10px; padding-bottom:10px; font-size:15px; font-weight:600; /* color:var(--purple) */color:var(--navy); border-bottom:1px solid var(--gray-30);}
.year-grid {display:flex; flex-wrap:wrap; gap:8px;}
.year-item {width:calc(100% / 3 - 6px); padding:8px; border:1px solid var(--purple-20); border-radius:4px; background:var(--purple-20); cursor:pointer;}
.year-item:hover, .year-item:focus, .year-item:active {font-weight:500; color:var(--whte); border-color:var(--navy); background:var(--navy); /* border-color:var(--purple-70); background:var(--purple-70); */}

/* 자동완성 초기화 */
input[type="text"]:autofill, input[type="text"]:autofill:hover, input[type="text"]:autofill:focus, input[type="text"]:autofill:active {box-shadow:0 0 0 60px var(--whte) inset; -webkit-text-fill-color:var(--blck-70);}

/* 주요버튼 */
.btn_srch {position:relative; min-width: 110px;padding:10px 16px; font-size:18px; font-weight:600; color:var(--whte); border-radius:24px;  border:1px solid var(--navy-80); background:var(--navy);/* border:1px solid var(--purple); background:var(--purple-70); */}
.btn_srch:before{content:""; display:inline-block;; width:16px; height:16px; margin:-3px 8px 0 0; vertical-align:middle; background:url('/images/nfsi/front/information/board/icon_wrap.png') -40px 0 no-repeat;}
/* .btn_srch:focus{outline:2px dashed #fff;outline-offset:-2px;} */
.btn_reset {position:relative; min-width: 110px;padding:10px 16px; font-size:18px; font-weight:600; color:var(--navy-80);/* color:var(--purple); */ border-radius:24px; border:1px solid var(--navy); background:var(--whte);}
.btn_reset:before {content:""; display:inline-block; width:16px; height:16px; margin:-3px 8px 0 0; vertical-align:middle; background:url('/images/nfsi/front/information/board/icon_wrap.png') -20px 0 no-repeat;}
/* 기본버튼 */
.btn_wrap {position:absolute; top:13px; right:25px;}
.btn_excel {position:relative; padding:10px 16px; font-size:18px; font-weight:600;  color:var(--navy-80); /* color:var(--purple-70);  */border-radius:20px;  border:1px solid var(--navy-80);/* border:1px solid var(--purple-70); */ background:var(--whte);z-index:11;}
.btn_excel:before {content:""; display:inline-block; width:20px; height:17px; margin:-4px 8px 0 0; vertical-align:middle; background:url('/images/nfsi/front/information/board/icon_wrap.png') -40px -20px no-repeat;}

/* 포인트컬러 */
.pnt_red {color:var(--red) !important;} .pnt_orng {color:var(--orng) !important;} .pnt_navy {color:var(--navy) !important;} .pnt_blue {color:var(--blue) !important;} .pnt_gray {color:var(--gray) !important;}

/* layer pop */
.layer_wrap {overflow:hidden; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.2); opacity:0; visibility:hidden; z-index:-1;}
.layer_wrap.layer_open {opacity:1; visibility:visible; z-index:99;}
.layer_cont {position:absolute; top:50%; left:50%; width:100%; max-width:800px; height:auto; max-height:90%; padding:30px; border-radius:10px; background:var(--whte); transform:translate(-50%, -50%); box-sizing:border-box;}
.layer_cont .pop_head {position:relative;}
.layer_cont .pop_head .pop_tit {padding-bottom:20px; font-size:22px; font-weight:600; color:var(--blck); border-bottom:1px solid var(--blck-70);}
.layer_cont .pop_head .btn_close {overflow:hidden; position:absolute; top:0; right:0; width:30px; height:30px; text-indent:-9999px; background:url('/images/nfsi/front/information/board/icon_wrap.png') -120px -30px no-repeat;}
.layer_cont .pop_body {overflow-y:auto; max-height:calc(100vh - 180px); padding-top:25px; box-sizing:border-box;}
.layer_cont .pop_body .bt_btn {margin-top:20px;}
.layer_cont .pop_body .bt_btn button, .layer_cont .pop_body .btn_btn a {padding:10px 20px; font-size:15px;}

/* layer pop size */
.layer_cont.layer_lg {max-width:1200px;}
.layer_cont.layer_md {max-width:800px;}
.layer_cont.layer_sm {max-width:400px;}

@media screen and (max-width:1200px){
    .btn_wrap {right:15px;}
}
@media screen and (max-width:1000px){
	.btn_wrap {position:relative; top:auto; right:auto; margin-top:10px; text-align:right;}
}
@media screen and (max-width:800px){
    .btn_excel {padding:8px 10px; font-size:15px;}
}