@charset "utf-8";

/* ========================== Color 변수 ========================= */

:root {
    --clr-primary: #2e3285;
    /* --clr-primary5: #f4f6f9; */
    /* 사실 point 의 5%임 */
    --clr-primary5: #f7f7fe;
    --clr-point: #665ff0;
    --clr-lightblue: #f6fbff;
    /* --clr-lightblue: #fafdff; */
    --clr-darkgray: #212121;
    --clr-red: #f44336;
    --clr-red5: #fef5f5;
    --clr-green: #4caf50;
    --clr-green5: #f6fbf6;
    --clr-white: #ffffff;
    /* --clr-gray1: #fbfbfb; */
    /* 실제로 3% 임 */
    --clr-gray1: #f8f8f8;
    --clr-gray10: #e6e7e8;
    --clr-gray20: #d1d3d4;
    --clr-gray30: #bcbec0;
    --clr-gray60: #808284;
    --shadow: 0 0 15px 0px rgba(0, 0, 0, 0.05);
    --shadow-btn: 0 0.1rem 0.3rem 0.1rem rgba(0, 0, 0, 0.15);
}

/* ========================== Color 클래스 ========================= */

/* ---------- primary ---------- */
.clr-primary {
    color: var(--clr-primary) !important;
}
.clr-primary-bg {
    background-color: var(--clr-primary) !important;
}
/* ---------- primary 5% ---------- */
.clr-primary5 {
    color: var(--clr-primary5) !important;
}
.clr-primary5-bg {
    background-color: var(--clr-primary5) !important;
}
/* ---------- point ---------- */
.clr-point {
    color: var(--clr-point) !important;
}
.clr-point-bg {
    background-color: var(--clr-point) !important;
}
/* ---------- lightblue ---------- */
.clr-lightblue {
    color: var(--clr-lightblue) !important;
}
.clr-lightblue-bg {
    background-color: var(--clr-lightblue) !important;
}
/* ---------- darkgray ---------- */
.clr-darkgray {
    color: var(--clr-darkgray) !important;
}
.clr-darkgray-bg {
    background-color: var(--clr-darkgray) !important;
}
/* ---------- red ---------- */
.clr-red {
    color: var(--clr-red) !important;
}
.clr-red-bg {
    background-color: var(--clr-red) !important;
}
/* ---------- red 5% ---------- */
.clr-red5 {
    color: var(--clr-red5) !important;
}
.clr-red5-bg {
    background-color: var(--clr-red5) !important;
}
/* ---------- green ---------- */
.clr-green {
    color: var(--clr-green) !important;
}
.clr-green-bg {
    background-color: var(--clr-green) !important;
}
/* ---------- green 5% ---------- */
.clr-green5 {
    color: var(--clr-green5) !important;
}
.clr-green5-bg {
    background-color: var(--clr-green5) !important;
}
/* ---------- white ---------- */
.clr-white {
    color: var(--clr-white) !important;
}
.clr-white-bg {
    background-color: var(--clr-white) !important;
}
/* ---------- gray 1% ---------- */
.clr-gray1 {
    color: var(--clr-gray1) !important;
}
.clr-gray1-bg {
    background-color: var(--clr-gray1) !important;
}
/* ---------- gray 10% ---------- */
.clr-gray10 {
    color: var(--clr-gray10) !important;
}
.clr-gray10-bg {
    background-color: var(--clr-gray10) !important;
}
/* ---------- gray 20% ---------- */
.clr-gray20 {
    color: var(--clr-gray20) !important;
}
.clr-gray20-bg {
    background-color: var(--clr-gray20) !important;
}
/* ---------- gray 30% ---------- */
.clr-gray30 {
    color: var(--clr-gray30) !important;
}
.clr-gray30-bg {
    background-color: var(--clr-gray30) !important;
}
/* ---------- gray 60% ---------- */
.clr-gray60 {
    color: var(--clr-gray60) !important;
}
.clr-gray60-bg {
    background-color: var(--clr-gray60) !important;
}