:root {
  --coloraccent: #ff4081;
  --colorblack: #000000;
  --colorwhite: #ffffff;
  --colornavy: #001F3F;
  --colorpurple: #6A0DAD;
  --colorpink: #FF69B4;
  --colorgray: #b9b9b9;
  --coloryellow: #FFD700;
  --colorgreen: #008000;
  --colorblue: #0000FF;
  --colorred: #FF0000;
  --colororange: #FFA500;
  --colorteal: #008080;
  --colormint: #3EB489;
  --colorbeige: #F5F5DC;
  --colorpeach: #FFDAB9;
  
  --lightnavy: #e3e9ee;
  --lightpurple: #E6E6FA;
  --lightpink: #FFB6C1;
  --lightgray: #EFEFEF;
  --lightyellow: #FFFACD;
  --lightgreen: #90EE90;
  --lightblue: #ADD8E6;
  --lightred: #FFA07A;
  --lightorange: #FFDAB9;
  --lightteal: #AFEEEE;
  --lightmint: #98FF98;
  --lightbeige: #F5F5DC;
  --lightpeach: #FFDAB9;

  --darknavy: #0A1128;
  --darkpurple: #4B0082;
  --darkpink: #8B0000;
  --darkgray: #454545;
  --darkyellow: #FFD700;
  --darkgreen: #006400;
  --darkblue: #0032a8;
  --darkred: #8B0000;
  --darkorange: #FF8C00;
  --darkteal: #008B8B;
  --darkmint: #3CB371;
  --darkbeige: #C5A89C;
  --darkpeach: #D88C83;
}
.col-custom-30 { width: 30px; flex: 0 0 30px; }
.col-custom-40 { width: 40px; flex: 0 0 40px; }
.col-custom-50 { width: 50px; flex: 0 0 50px; }
.col-custom-60 { width: 60px; flex: 0 0 60px; }
.col-custom-70 { width: 70px; flex: 0 0 70px; }
.col-custom-80 { width: 80px; flex: 0 0 80px; }
.col-custom-90 { width: 90px; flex: 0 0 90px; }
.col-custom-100 { width: 100px; flex: 0 0 100px; }
.col-custom-110 { width: 110px; flex: 0 0 110px; }
.col-custom-120 { width: 120px; flex: 0 0 120px; }
.col-custom-130 { width: 130px; flex: 0 0 130px; }
.col-custom-140 { width: 140px; flex: 0 0 140px; }
.col-custom-150 { width: 150px; flex: 0 0 150px; }
.col-custom-160 { width: 160px; flex: 0 0 160px; }
.col-custom-170 { width: 170px; flex: 0 0 170px; }
.col-custom-180 { width: 180px; flex: 0 0 180px; }
.col-custom-190 { width: 190px; flex: 0 0 190px; }
.col-custom-200 { width: 200px; flex: 0 0 200px; }
.col-custom-210 { width: 210px; flex: 0 0 210px; }
.col-custom-220 { width: 220px; flex: 0 0 220px; }
.col-custom-230 { width: 230px; flex: 0 0 230px; }
.col-custom-240 { width: 240px; flex: 0 0 240px; }
.col-custom-250 { width: 250px; flex: 0 0 250px; }
.col-custom-260 { width: 260px; flex: 0 0 260px; }
.col-custom-270 { width: 270px; flex: 0 0 270px; }
.col-custom-280 { width: 280px; flex: 0 0 280px; }
.col-custom-290 { width: 290px; flex: 0 0 290px; }
.col-custom-300 { width: 300px; flex: 0 0 300px; }
.col-custom-400 { width: 300px; flex: 0 0 400px; }
.col-custom-500 { width: 500px; flex: 0 0 500px; }
.col-custom-auto { flex: 1 1 auto; max-width: 100%; }
.col-custom-auto-1 { flex: 0 0 auto; max-width: 100%; }

.wfpx-10  { flex: 0 0 10px; max-width: 10px; width: 10px; }
.wfpx-20  { flex: 0 0 20px; max-width: 20px; width: 20px; }
.wfpx-30  { flex: 0 0 30px; max-width: 30px; width: 30px; }
.wfpx-40  { flex: 0 0 40px; max-width: 40px; width: 40px; }
.wfpx-50  { flex: 0 0 50px; max-width: 50px; width: 50px; }
.wfpx-60  { flex: 0 0 60px; max-width: 60px; width: 60px; }
.wfpx-70  { flex: 0 0 70px; max-width: 70px; width: 70px; }
.wfpx-80  { flex: 0 0 80px; max-width: 80px; width: 80px; }
.wfpx-90  { flex: 0 0 90px; max-width: 90px; width: 90px; }
.wfpx-100 { flex: 0 0 100px; max-width: 100px; width: 100px; }
.wfpx-110 { flex: 0 0 110px; max-width: 110px; width: 110px; }
.wfpx-120 { flex: 0 0 120px; max-width: 120px; width: 120px; }
.wfpx-130 { flex: 0 0 130px; max-width: 130px; width: 130px; }
.wfpx-140 { flex: 0 0 140px; max-width: 140px; width: 140px; }
.wfpx-150 { flex: 0 0 150px; max-width: 150px; width: 150px; }
.wfpx-160 { flex: 0 0 160px; max-width: 160px; width: 160px; }
.wfpx-170 { flex: 0 0 170px; max-width: 170px; width: 170px; }
.wfpx-180 { flex: 0 0 180px; max-width: 180px; width: 180px; }
.wfpx-190 { flex: 0 0 190px; max-width: 190px; width: 190px; }
.wfpx-200 { flex: 0 0 200px; max-width: 200px; width: 200px; }
.wfpx-210 { flex: 0 0 210px; max-width: 210px; width: 210px; }
.wfpx-220 { flex: 0 0 220px; max-width: 220px; width: 220px; }
.wfpx-230 { flex: 0 0 230px; max-width: 230px; width: 230px; }
.wfpx-240 { flex: 0 0 240px; max-width: 240px; width: 240px; }
.wfpx-250 { flex: 0 0 250px; max-width: 250px; width: 250px; }
.wfpx-260 { flex: 0 0 260px; max-width: 260px; width: 260px; }
.wfpx-270 { flex: 0 0 270px; max-width: 270px; width: 270px; }
.wfpx-280 { flex: 0 0 280px; max-width: 280px; width: 280px; }
.wfpx-290 { flex: 0 0 290px; max-width: 290px; width: 290px; }
.wfpx-300 { flex: 0 0 300px; max-width: 300px; width: 300px; }
.wfpe-10  { flex: 0 0 10%; max-width: 10%; width: 10%; }
.wfpe-15  { flex: 0 0 15%; max-width: 15%; width: 15%; }
.wfpe-20  { flex: 0 0 20%; max-width: 20%; width: 20%; }
.wfpe-25  { flex: 0 0 25%; max-width: 25%; width: 25%; }
.wfpe-30  { flex: 0 0 30%; max-width: 30%; width: 30%; }
.wfpe-31  { flex: 0 0 31%; max-width: 31%; width: 31%; }
.wfpe-32  { flex: 0 0 32%; max-width: 32%; width: 32%; }
.wfpe-33  { flex: 0 0 33%; max-width: 33%; width: 33%; }
.wfpe-34  { flex: 0 0 34%; max-width: 34%; width: 34%; }
.wfpe-35  { flex: 0 0 35%; max-width: 35%; width: 35%; }
.wfpe-36  { flex: 0 0 36%; max-width: 36%; width: 36%; }
.wfpe-37  { flex: 0 0 37%; max-width: 37%; width: 37%; }
.wfpe-38  { flex: 0 0 38%; max-width: 38%; width: 38%; }
.wfpe-39  { flex: 0 0 39%; max-width: 39%; width: 39%; }
.wfpe-40  { flex: 0 0 40%; max-width: 40%; width: 40%; }
.wfpe-41  { flex: 0 0 41%; max-width: 41%; width: 41%; }
.wfpe-42  { flex: 0 0 42%; max-width: 42%; width: 42%; }
.wfpe-43  { flex: 0 0 43%; max-width: 43%; width: 43%; }
.wfpe-44  { flex: 0 0 44%; max-width: 44%; width: 44%; }
.wfpe-45  { flex: 0 0 45%; max-width: 45%; width: 45%; }
.wfpe-46  { flex: 0 0 46%; max-width: 46%; width: 46%; }
.wfpe-47  { flex: 0 0 47%; max-width: 47%; width: 47%; }
.wfpe-48  { flex: 0 0 48%; max-width: 48%; width: 48%; }
.wfpe-49  { flex: 0 0 49%; max-width: 49%; width: 49%; }
.wfpe-50  { flex: 0 0 50%; max-width: 50%; width: 50%; }
.wfpe-51  { flex: 0 0 51%; max-width: 51%; width: 51%; }
.wfpe-52  { flex: 0 0 52%; max-width: 52%; width: 52%; }
.wfpe-53  { flex: 0 0 53%; max-width: 53%; width: 53%; }
.wfpe-54  { flex: 0 0 54%; max-width: 54%; width: 54%; }
.wfpe-55  { flex: 0 0 55%; max-width: 55%; width: 55%; }
.wfpe-56  { flex: 0 0 56%; max-width: 56%; width: 56%; }
.wfpe-57  { flex: 0 0 57%; max-width: 57%; width: 57%; }
.wfpe-58  { flex: 0 0 58%; max-width: 58%; width: 58%; }
.wfpe-59  { flex: 0 0 59%; max-width: 59%; width: 59%; }
.wfpe-60  { flex: 0 0 60%; max-width: 60%; width: 60%; }
.wfpe-61  { flex: 0 0 61%; max-width: 61%; width: 61%; }
.wfpe-62  { flex: 0 0 62%; max-width: 62%; width: 62%; }
.wfpe-63  { flex: 0 0 63%; max-width: 63%; width: 63%; }
.wfpe-64  { flex: 0 0 64%; max-width: 64%; width: 64%; }
.wfpe-65  { flex: 0 0 65%; max-width: 65%; width: 65%; }
.wfpe-66  { flex: 0 0 66%; max-width: 66%; width: 66%; }
.wfpe-67  { flex: 0 0 67%; max-width: 67%; width: 67%; }
.wfpe-68  { flex: 0 0 68%; max-width: 68%; width: 68%; }
.wfpe-69  { flex: 0 0 69%; max-width: 69%; width: 69%; }
.wfpe-70  { flex: 0 0 70%; max-width: 70%; width: 70%; }
.wfpe-75  { flex: 0 0 75%; max-width: 75%; width: 75%; }
.wfpe-80  { flex: 0 0 80%; max-width: 80%; width: 80%; }
.wfpe-85  { flex: 0 0 85%; max-width: 85%; width: 85%; }
.wfpe-90  { flex: 0 0 90%; max-width: 90%; width: 90%; }
.wfpe-100 { flex: 1 1 100%; max-width: 100%; width: 100%; }
.wf-auto  { flex: 1 1 auto; max-width: 100%; min-width: 120px; }
.wf-align-left  { width: 100%; text-align: left !important; }
.wf-align-right { width: 100%; text-align: right !important; }
.wf-ml-auto { margin-left: auto; }

@media(max-width: 768px) {
    .wfpe-10  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-15  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-20  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-25  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-30  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-31  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-32  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-33  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-34  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-35  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-36  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-37  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-38  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-39  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-40  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-41  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-42  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-43  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-44  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-45  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-46  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-47  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-48  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-49  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-50  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-51  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-52  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-53  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-54  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-55  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-56  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-57  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-58  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-59  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-60  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-61  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-62  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-63  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-64  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-65  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-66  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-67  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-68  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-69  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-70  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-75  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-80  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-85  { flex: 1 1 100%; max-width: 100%; }
    .wfpe-90  { flex: 1 1 100%; max-width: 100%; }
}

.custom-scroll {
    overflow-y: auto;
}
.custom-scroll::-webkit-scrollbar{
    width: 0px; 
}
.custom-scroll::-webkit-scrollbar-thumb{
    width: 0px;
}
.custom-scroll::-webkit-scrollbar-track{

}

.custom-check-box {
    position: relative;
    display: flex;
    align-items: center; /* 수직 정렬 */
}

.custom-check-box > input[type="checkbox"] {
    display: none;
}

.custom-check-box > label {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: var(--font-size, 16px);
}

.custom-check-box > label > .checkbox {
    position: relative;
    display: inline-block;
    align-self: flex-start;
    width: var(--checkbox-size, 16px);
    height: var(--checkbox-size, 16px);
    flex: 0 0 var(--checkbox-size, 16px);
    border: 1px solid var(--none-border-color, #ddd);
    border-radius: 3px;
    margin-right: var(--checkbox-spacing, 10px); /* 체크박스와 텍스트 간격 */
}

.custom-check-box > label > .checkbox > .svg-icon-check {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--icon-size, 12px);
    height: var(--icon-size, 12px);
    color: var(--none-color, #ddd);
}

.custom-check-box > label > span.kind {
    font-size: var(--font-size, 12px);
    font-weight: var(--font-weight, 400);
    color: var(--font-color, #6F6963);
}

.custom-check-box > label > span.subject {
    margin-left: var(--subject-spacing, 10px);
    font-size: var(--font-size, 14px);
    font-weight: var(--font-weight, 700);
    color: var(--font-color, #6F6963);
}

/* 체크된 상태 */
.custom-check-box > input[type="checkbox"]:checked + label > .checkbox {
    border-color: var(--check-border-color, #0066ff);
}

.custom-check-box > input[type="checkbox"]:checked + label > .checkbox > .svg-icon-check {
    color: var(--check-color, #0066ff);
}

/* 라디오 버튼 */
.custom-radio-wrap {
    position: relative;
    display: flex;
}

.custom-radio-wrap > .custom-radio-box {
    position: relative;
    --radio-size: 17px;
    --padding-label: 1.5;
}

.custom-radio-wrap > .custom-radio-box + .custom-radio-box {
    margin-left: 10px;
}

.custom-radio-wrap > .custom-radio-box > input[type="radio"] {
    display: none;
}

.custom-radio-wrap > .custom-radio-box > input[type="radio"] + label {
    position: relative;
    display: flex;
    padding-left: calc(var(--radio-size) * var(--padding-label));
    cursor: pointer;
}

.custom-radio-wrap > .custom-radio-box > label:before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--radio-size);
    height: var(--radio-size);
    border: 1px solid var(--darkgray);
    border-radius: 50%;
    content: '';
}

.custom-radio-wrap > .custom-radio-box > label > span {
    display: inline-block;
    align-self: center;
    color: var(--darkgray);
}

.custom-radio-wrap > .custom-radio-box > label > .radio-label {
    font-size: 14px;
    padding-top: 1px;
}

.custom-radio-wrap > .custom-radio-box > label > .svg-icon {
    position: absolute;
    --icon-size: 17px;
    --icon-left: 2px;
    width: var(--icon-size);
    height: var(--icon-size);
    left: var(--icon-left);
    top: 50%;
    transform: translateY(-50%);
    color: var(--darkgray);
}

.custom-radio-wrap > .custom-radio-box > input[type="radio"]:checked + label:before {
    border: 1px solid var(--radio-color, var(--darkblue));
}

.custom-radio-wrap > .custom-radio-box> input[type="radio"]:checked + label > .radio-label {
    color: var(--radio-color, var(--darkblue));
}

.custom-radio-wrap > .custom-radio-box> input[type="radio"]:checked + label > .svg-icon {
    color: var(--radio-color, var(--darkblue));
}