/* 폰트 세팅 */
:root {
    --font-basic: 'NotoSans';
    --font-weight-light: 300;
    --font-weight-medium: 500;
    --font-weight-semibold: 700;
    --font-weight-bold: 800;
    --font-weight-heavy: 900;
}

/* 기본 컬러 */
html {
    --logo-img: url("/resources/images/logo.png");
    --logo-img_w: url("/resources/images/logo_w.png");

    --input-placeholder-color: #b5b5b5;
    --color-background: #fff;
    --color-background-rgb: 255,255,255;
    --black-white-rgb: 0,0,0;
	--color-background-light-blue:#f8f8fa;
	
	
    --color-basic: #212529;
    --color-basic-rgb: 33,37,41;
    --color-basic-reverse: #fff;

    --color-white: #fff;
    --color-white-rgb: 255,255,255;
    --color-black: #000;
    --color-black-rgb: 0,0,0;
    --color-gray: #888;
    --color-gray-rgb: 85,85,85;
    --color-gray-deep: #555;
    --color-gray-deep-rgb: 25,25,25;
    --color-gray-light: #ddd;
    --color-gray-light-rgb: 221,221,221,;

    --color-blue: #0d6efd;
    --color-blue-rgb: 13,110,253;
    --color-blue-middle: #003879;
    --color-blue-middle-rgb: 0,56,121;
    --color-blue-deep: #161c42;
    --color-blue-deep-rgb: 22,28,66;
    --color-sky: #c0d3ed;
    --color-sky-rgb: 192,211,237;
    --color-red: #e30011;
    --color-red-rgb: 227,0,17;
    --color-pink: #DC45D6;
    --color-pink-rgb: 220,69,214;
    --color-yellow: #fef675;
    --color-yellow-rgb: 254,246,117;
    --color-green: #04b56c;
    --color-green-rgb: 4,180,106;
    --color-orange: #ff7f50;
    --color-orange-rgb: 255,127,80;
    --color-violet: #231a6b;

    --table-header-bg: #e7f1ffi;
    --table-header-color: #161c42;
    --table-body-color: #4c4c4c;
    
    --box-shadow-blue: 0px 0px 8px rgba(192, 211, 237, 0.5);
	--box-shadow-gray: 0px 0px 8px rgba(0, 0, 0, 0.1);
	--box-shadow-red: 0px 0px 8px rgba(277, 0, 17, 0.3);

	--border-radius-10:10px;
	--border-radius-20:20px;
}

/* 컬러 - 일반 */
.color-basic {
    color: var(--color-basic) !important;
}

.color-bg {
    color: var(--color-background);
}

.hover-gray:hover,
.color-gray {
    color: var(--color-gray) !important;
}

.hover-blue:hover,
.color-blue {
    color: var(--color-blue) !important;
}

.hover-blue-deep:hover,
.color-blue-deep {
    color: var(--color-blue-deep) !important;
}

.hover-red:hover,
.color-red {
    color: var(--color-red) !important;
}

.hover-green:hover,
.color-green {
    color: var(--color-green) !important;
}

.hover-orange:hover,
.color-orange {
    color: var(--color-orange) !important;
}

.hover-violet:hover,
.color-violet {
    color: var(--color-violet) !important;
}

.hover-yellow:hover,
.color-yellow {
    color: var(--color-yellow) !important;
}

/* 컬러 - 버튼 */
.btn.btn-gray {
    background-color: var(--color-gray);
    color: var(--color-white);
}
.btn.btn-gray-line {
    background-color: var(--color-background);
    border: 1px solid rgba(var(--color-gray-rgb),0.2);
    color: var(--color-gray);
}
.btn.btn-gray-light {
    background-color: rgba(var(--color-basic-rgb),0.1);
}
.btn.btn-gray-light-line {
    background-color: var(--color-background);
    border: 1px solid var(--color-gray-light);
    color: var(--color-gray);
}

.btn.btn-gray:hover,
.btn.btn-gray-line:hover,
.btn.btn-gray-light:hover,
.btn.btn-gray-light-line:hover{box-shadow:var(--box-shadow-gray)}

.btn.btn-red {
    border-color: var(--color-red);
    background-color: var(--color-red);
    color: var(--color-white);
}

.btn.btn-red-line {
    border-color: var(--color-red);
    background-color: var(--color-background);
    color: var(--color-red);
}
.btn.btn-red:hover,
.btn.btn-red-line:hvoer{box-shadow:var(--box-shadow-red)}

.btn.btn-blue {
    border-color: var(--color-blue);
    background-color: var(--color-blue);
    color: var(--color-white);
}

.btn.btn-blue-line {
    border-color: var(--color-blue);
    background-color: var(--color-background);
    color: var(--color-blue);
}

.btn.btn-blue-deep {
    border-color: var(--color-blue-deep);
    background-color: var(--color-blue-deep);
    color: var(--color-white);
}

.btn.btn-blue-deep-line {
    border-color: var(--color-blue-deep);
    background-color: var(--color-background);
    color: var(--color-blue-deep);
}

.btn.btn-blue:hover,
.btn.btn-blue-line:hover,
.btn.btn-blue-deep:hover,
.btn.btn-blue-deep-line:hover{box-shadow: 0px 0px 8px rgba(var(--color-blue-rgb), 0.5)}

.btn.btn-green-line {
    border-color: var(--color-green);
    background-color: var(--color-background);
    color: var(--color-green);
}

.btn.btn-green {
    border-color: var(--color-green);
    background-color: var(--color-green);
    color: var(--color-white);
}

.btn.btn-green-line:hover,
.btn.btn-green:hover{box-shadow: 0px 0px 8px rgba(var(--color-green-rgb), 0.5)}

.btn.btn-orange {
    border-color: var(--color-orange);
    background-color: var(--color-orange);
    color: var(--color-white);
}

.btn.btn-orange:hover{box-shadow: 0px 0px 8px rgba(var(--color-orange-rgb), 0.5)}

.btn.btn-violet {
    border-color: var(--color-violet);
    background-color: var(--color-violet);
    color: var(--color-white);
}
.btn.btn-violet:hover{box-shadow: 0px 0px 8px rgba(var(--color-violet-rgb), 0.5)}

.btn.btn-sky{
    border-color: rgba(var(--color-sky-rgb), 0.5);
    background-color: rgba(var(--color-sky-rgb), 0.5);
    color: var(--color-blue-deep);
}

.btn.btn-sky:hover{box-shadow:var(--box-shadow-blue)}

.btn{border-radius:8px; font-size:15px; padding:8px 15px;font-family:"NotoSans", "Apple SD Gothic Neo",sans-serif; transition: all .5s;}
.btn:hover{filter: brightness(90%); text-decoration:none;}
.btn-md{font-size:14px; padding:6px 12px;border-radius:7px;}
.btn-sm,
.btn-xs{border-radius:5px; font-size:13px; padding:5px 8px;}

/* shadow */
.box-shadow-blue{box-shadow: var(--box-shadow-blue);}
.box-shadow-gray{box-shadow: var(--box-shadow-gray);}
.box-shadow-red{box-shadow: var(--box-shadow-red);}

/* radius */
.border-radius-10{border-radius:var(--border-radius-10);}
.border-radius-20{border-radius:var(--border-radius-20);}

/* border-color */
.border-gray{border: 1px solid var(--color-gray-light);}
.border-blue{border: 1px solid var(--color-blue);}
.border-sky{border: 1px solid var(--color-sky);}
.border-blue-deep{border: 1px solid var(--color-blue-deep);}


.form-check-input:checked{background-color:var(--color-blue-deep); border-color:var(--color-blue-deep);}