/* default [START] */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

/* Chrome, Safari, Edge, Opera Input 기본 속성 화살표 제거 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox Input 기본 속성 화살표 제거 */
input[type='number'] {
    -moz-appearance: textfield;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset;
    box-shadow: 0 0 0 1000px white inset;
}

/* ios 대응 */
input {
    appearance: none;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

body {
    margin: 0;
}

.page-wrapper {
    display: flex;
    width: 100%;
    background-color: #FFF;
}

*,
pre,
.input-group-sm>.custom-select,
.input-group-sm>.form-control,
.input-group-sm>.input-group-append>.btn,
.input-group-sm>.input-group-append>.input-group-text,
.input-group-sm>.input-group-prepend>.btn,
.input-group-sm>.input-group-prepend>.input-group-text,
body,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: "Pretendard Variable", Pretendard;
    word-break: keep-all;
}

p {
    color: #b3b3b3;
    font-weight: 300;
    word-break: keep-all;
    margin-top: 0;
    margin-bottom: 0;
}

a {
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease;
    word-break: keep-all;
}

a:hover {
    text-decoration: none;
}

.break-all {
    word-break: break-all;
}

.content {
    padding: 7rem 0;
}

.title-warning-text {
    color: var(--Gray-900, #101828);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

small {
    font-size: 0.875rem;
}

pre {
    margin: 0;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

pre h1,
pre h2,
pre h3,
pre h4,
pre h5 {
    margin: 0;
}

pre p {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    box-sizing: border-box;
    color: var(--Gray-800, #182230);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
}

pre figure,
pre img {
    width: 100%;
    height: auto !important;
    margin: 0;
}

ol,
ul {
    list-style-position: inside;
    /* 마커를 텍스트 안쪽으로 */
}




@keyframes rotate-loading {
    100% {
        transform: rotate(360deg);
    }
}

.loading-popup-wrap {
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 !important;
    background: none;
    border: none;
    /* backdrop-filter: blur(8px); */
    width: 100%;
    height: 100vh;
    background-color: rgba(12, 17, 29, 0.7);
    display: none;



    /* position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(12, 17, 29, 0.30);
    justify-content: center;
    align-items: center;
    z-index: 9999; */
}

.loading-popup-wrap .popup {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background-color: #fefefe;
    border-radius: 0.75rem;
    box-shadow: 0px 0px 12px 0px rgba(16, 24, 40, 0.12);
    width: 100%;
    max-width: 20rem;
    height: 17rem;
    margin: 0 1rem;
}

.loading-popup-wrap .pop-title {
    margin: -0.5rem 0 0 0;
    color: #6941C6;
    font-size: 1.5rem;
    font-weight: 700;
}

.loading-popup-wrap .pop-content {
    margin: 0;
    color: var(--Gray-600, #475467);
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.125rem;
}

.loading-popup-wrap .pop-img {
    max-width: 13rem;
    width: 100%;
    margin-top: -5rem;
    /* animation: rotate-loading 3s linear infinite; */
    transform-origin: 50% 50%;
}




.w-100 {
    width: 100%;
}

.bg-none {
    background: none;
}

.card {
    padding: 1rem 1.5rem 0 1.5rem;
    width: 100%;
    border-radius: 0.75rem;
    background: #FFF;
    box-sizing: border-box;
}

/* default [END] */

/* layout [START] */
.center {
    text-align: center;
}

.fl-left {
    float: left;
}

.fl-right {
    float: right;
}

.relative {
    position: relative;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
}

.flex-between {
    display: flex;
    justify-content: space-between;
}

.space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.space-around {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-end {
    display: flex;
    justify-content: end;
    align-items: center;
}

.flex-end-justify {
    display: flex;
    align-items: center;
    justify-content: end;
}

.flex-to-block {
    display: flex;
}

.flex-space-between-to-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-space-between-to-block-no-center {
    display: flex;
    justify-content: space-between;
}

.items-center.gap-0-25rem {
    gap: 0.25rem;
}

.gap-0-38rem {
    gap: 0.38rem;
}

.gap-half-rem {
    gap: 0.5rem;
}

.gap-0-62rem {
    gap: 0.62rem;
}

.gap-0-75rem {
    gap: 0.75rem;
}

.gap-1-rem {
    gap: 1rem;
}

.gap-1-19rem {
    gap: 1.19rem;
}

.gap-1-5rem {
    gap: 1.5rem;
}

.gap-2-rem {
    gap: 2rem;
}

.items-center {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.go-to-list-btn-wrapper.items-center {
    gap: 0.38rem;
}

.flex-end {
    display: flex;
    justify-content: end;
    flex: 1;
}

.flex-0-25 {
    flex: 0.25;
}

.flex-1 {
    flex: 1;
}


.flex-1-15 {
    flex: 1.15;
}

.flex-2 {
    flex: 2;
}

.flex-3 {
    flex: 3;
}

.flex-fill {
    flex: 1;
    min-width: 0;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.inline-block-to-block {
    display: inline-block;
}

.none {
    display: none;
}

.p0 {
    padding: 0;
}

.p-1 {
    padding: 1rem;
}

.pr-0-5-rem {
    padding-right: 0.5rem;
}

.pb-1-5-rem,
.lnb.pb-1-5-rem {
    padding-bottom: 1.5rem;
}

.pb-4rem-to-2rem {
    padding-bottom: 4rem;
}

.m0 {
    margin: 0;
}

.mt-quarter-rem {
    margin-top: 0.25rem;
}

.mt-half-rem {
    margin-top: 0.5rem;
}

.mt-0-6 {
    margin-top: 0.6rem;
}

.mt-0-8 {
    margin-top: 0.8rem;
}

.mt-one-rem {
    margin-top: 1rem;
}

.mt-1-25-rem {
    margin-top: 1.25rem;
}

.mt-one-point-five-rem {
    margin-top: 1.5rem;
}

.mt-two-rem {
    margin-top: 2rem;
}

.mr-seven-point-five-rem {
    margin-right: 0.75rem;
}

.ml-half-rem {
    margin-left: 0.5rem;
}

.ml-one-point-five-rem {
    margin-left: 1.5rem;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-quarter-rem {
    margin-bottom: 0.25rem;
}

.mb-half-rem {
    margin-bottom: 0.5rem;
}

.mb-one-rem {
    margin-bottom: 1rem;
}

.mb-1-25-rem {
    margin-bottom: 1.25rem;
}

.mb-one-point-five-rem {
    margin-bottom: 1.5rem;
}

.mb-1-87-rem {
    margin-bottom: 1.87rem;
}

.mb-two-rem {
    margin-bottom: 2rem;
}

.w-full {
    width: 100%;
}

.w-full-max-32 {
    width: 100%;
    max-width: 32rem;
}

.h-24-25-rem-to-mobile-h-auto {
    height: 24.25rem;
}

.high-priority {
    z-index: 999;
}

.text-left {
    text-align: left;
}

.flex-center-gap-sm {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.text-secondary-sm {
    color: var(--Gray-400, #98A2B3);
    text-align: right;
    font-family: Pretendard;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
}

/* input [START] */
input::placeholder {
    color: #98A2B3 !important;
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
}

.form-control:disabled,
.form-control[readonly] {
    background: var(--Gray-100, #F2F4F7);
}

.form-control,
.form-control::placeholder {
    font-size: 1rem;
}

.custom-text-label {
    display: block;
    margin-bottom: 0.38rem;
    color: var(--Gray-700, #344054);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;
    margin-top: 1.25rem;
}

.list-search-container {
    flex: 2;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 0.5rem;
    align-self: stretch;
    width: 100%;
    max-width: 29.25rem;
    border-radius: 0.75rem;
}

.custom-text-input {
    height: 2.75rem;
    align-items: center;
    border-radius: 0.5rem;
    border: 1px solid var(--Gray-300, #D0D5DD);
    background: var(--Base-White, #FFF);
    padding: 0 0.875rem;
    box-sizing: border-box;
    color: var(--Gray-900, #101828);
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem;
    transition: all 0.5s;
}

.custom-text-input:active,
.custom-text-input:focus {
    border: 1px solid var(--Brand-300, #D6BBFB);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px rgba(158, 119, 237, 0.24);
    transition: all 0.5s;
}

.custom-text-input:focus::placeholder {
    transition: all 0.5s;
}

.custom-text-input:read-only,
.custom-text-input:disabled {
    border-radius: 0.5rem;
    border: 1px solid var(--Gray-300, #D0D5DD);
    background: var(--Gray-100, #F2F4F7);
    box-shadow: none;
    overflow: hidden;
    color: var(--Gray-400, #98A2B3);
    text-overflow: ellipsis;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem;
}

/* input [END] */

/* textarea [START] */
.custom-textarea {
    width: 100%;
    height: 15rem;
    line-height: 1.5rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    border: 1px solid var(--Gray-300, #D0D5DD);
    background: var(--Base-White, #FFF);
    resize: none;
    box-sizing: border-box;
    transition: all 0.5s;
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--Gray-900, #101828);
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem;
}

.custom-textarea::placeholder {
    color: #98A2B3 !important;
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
}

.custom-textarea:active,
.custom-textarea:focus {
    border: 1px solid var(--Brand-300, #D6BBFB);
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px rgba(158, 119, 237, 0.24);
    transition: all 0.5s;
}

.text-length-check-msg {
    color: var(--Error-600, #D92D20);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
    margin-top: 0.38rem;
}

/* .custom-textarea::-webkit-scrollbar-track
{
 border-radius: 1rem;
 background-color: #eaecf0;
 margin: 1rem 0;
}

.custom-textarea::-webkit-scrollbar
{
 width: 0.5rem;
 background-color: #f8f9f9;
}

.custom-textarea::-webkit-scrollbar-thumb
{
 border-radius: 1rem;
} */

/* textarea [END] */

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* checkbox */
.checkbox-wrapper {
    position: relative;
    /* z-index: -1;
    opacity: 0; */
}

.all-checkbox,
.checkbox-wrapper .checkbox {
    z-index: -1;
    width: 1.25rem;
    opacity: 0;
}

.control__indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.375rem;
    border: 1px solid var(--Gray-300, #D0D5DD);
    background: var(--Base-White, #FFF);
}

.control--radio .control__indicator {
    border-radius: 50%;
}

.control input:checked~.control__indicator {
    background-size: contain;
    background-repeat: no-repeat;
    width: 1.25rem;
    height: 1.25rem;
    background-image: url('/img/front/checkbox-on.png');
    background-position: center !important;
    border: none;
}

.control:hover input:not([disabled]):checked~.control__indicator,
.control input:checked:focus~.control__indicator {
    background-size: contain;
    background-repeat: no-repeat;
    width: 1.25rem;
    height: 1.25rem;
    background-image: url('/img/front/checkbox-on.png');
    background-position: center !important;
    border: none;
}

.control input:disabled~.control__indicator {
    background: #e6e6e6;
    opacity: 0.5;
    pointer-events: none;
}

.control input:checked~.control__indicator:after {
    display: block;
    color: #fff;
}

.control--checkbox .control__indicator:after {
    top: 50%;
    left: 50%;
    margin-top: -1px;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.control--checkbox input:disabled~.control__indicator:after {
    border-color: #E0E5F2;
}

.control--checkbox input:disabled:checked~.control__indicator {
    background-size: contain;
    background-repeat: no-repeat;
    width: 1.25rem;
    height: 1.25rem;
    background-image: url('/img/front/checkbox-on.png');
    background-position: center !important;
    border: none;
    opacity: .2;
}

.control--checkbox .explain {
    display: block;
    color: var(--Gray-500, #667085);
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.125rem;
    margin-top: 0.5rem;
}

/* ========== select2 [START] ========== */
/* select2 화살표 커스텀 - SVG 크기에 맞게 조정 */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    background: none;
    border: none;
    width: 20px;
    height: 20px;
}

/* select2 화살표 커스텀 - 기본 화살표 숨기기 */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

/* select2 화살표 커스텀 - 위치 조정 */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 13px;
    right: 11px;
}

/* select2 화살표 커스텀 - 회전 애니메이션을 위한 클래스 */
.select2-arrow-rotated {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.select2-container--default .select2-results>.select2-results__options {
    overflow-y: overlay;
    opacity: 1;
    padding: 1rem;
}

.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb {
    background-color: hsla(0, 0%, 42%, 0.49);
}

.select2-container--default .select2-selection--single {
    border-radius: 0.5rem;
    border: none;
    border: 1px solid var(--Gray-300, #D0D5DD);
    background: var(--Base-White, #FFF);
    height: 2.75rem;
    padding: 0.625rem 0.875rem;
    height: 2.75rem !important;
}


.select2-container--default .select2-selection--single .select2-selection__rendered {
    overflow: hidden;
    color: var(--Gray-400, #98A2B3);
    text-overflow: ellipsis;
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-left: -14px;
    margin-top: 5px;
}

.select2-container--open .select2-dropdown--below {
    border-radius: 8px;
    border: 1px solid var(--Gray-200, #EAECF0);
    background: var(--Base-White, #FFF);
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    margin-top: 0.44rem;
}

.select2-container--open .select2-dropdown--above {
    border-radius: 8px;
    border: 1px solid var(--Gray-200, #EAECF0);
    background: var(--Base-White, #FFF);
    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    margin-top: -0.44rem;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border-radius: 0.5rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    /* right: -2px; */
}

.select2-results__option[aria-selected] {
    padding: 0.625rem 0.75rem;
    margin: 0.12rem 0;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;
}

.select2-container--default .select2-results__option[aria-disabled=true] {
    display: none;
    padding: 0.625rem 0.75rem;
    color: var(--Gray-400, #98A2B3);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: var(--Gray-100, #F2F4F7);
    color: var(--Gray-700, #344054);
    font-size: 0.875rem;
    font-weight: 600;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--Gray-50, #F9FAFB);
    color: var(--Gray-800, #182230);
}

.year-container .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #101828;
    font-weight: 500;
}

/* ========== select2 [END] ========== */

/* ========== Badge [START] ========== */

.success-badge {
    max-width: 2.3125rem;
    width: 100%;
    height: 1.4rem;
    display: flex;
    padding: 0.125rem 0.5rem;
    align-items: center;
    flex-direction: column;
    border-radius: 1rem;
    border: 1px solid var(--Success-200, #ABEFC6);
    background: var(--Success-50, #ECFDF3);
    color: var(--Success-500, #17B26A);
    text-align: center;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.125rem;
}

.purple-badge {
    color: var(--Purple-700, #5925DC);
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.125rem;
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
    border: 1px solid var(--Purple-200, #D9D6FE);
    background: var(--Purple-50, #F4F3FF);
}

.orange-badge {
    max-width: 2.3125rem;
    width: 100%;
    height: 1.4rem;
    display: flex;
    padding: 0.125rem 0.5rem;
    align-items: center;
    flex-direction: column;
    color: var(--Orange-700, #B93815);
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.125rem;
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
    border: 1px solid var(--Orange-200, #F9DBAF);
    background: var(--Orange-50, #FEF6EE);
}

.wait-badge {
    max-width: 2.3125rem;
    width: 100%;
    height: 1.4rem;
    display: flex;
    padding: 0.125rem 0.5rem;
    align-items: center;
    flex-direction: column;
    border-radius: 1rem;
    border: 1px solid var(--Gray-200, #EAECF0);
    background: var(--Gray-50, #F9FAFB);
    color: var(--Gray-700, #344054);
    text-align: center;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.125rem;
}

.delete-badge {
    max-width: 2.3125rem;
    width: 100%;
    height: 1.4rem;
    display: flex;
    padding: 0.125rem 0.5rem;
    align-items: center;
    flex-direction: column;
    border-radius: 1rem;
    border: 1px solid var(--Warning-200, #FEDF89);
    background: var(--Warning-50, #FFFAEB);
    color: var(--Warning-700, #B54708);
    text-align: center;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.125rem;
}


.contract-list .wait-badge {
    max-width: 2.3125rem;
    width: 100%;
    height: 1.4rem;
    display: flex;
    padding: 0.125rem 0.5rem;
    align-items: center;
    flex-direction: column;
    border-radius: 1rem;
    border: 1px solid var(--Warning-200, #FEDF89);
    background: var(--Warning-50, #FFFAEB);
    color: var(--Warning-500, #F79009);
    text-align: center;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.125rem;
}

.contract-list .conclusion-badge {
    max-width: 2.3125rem;
    width: 100%;
    height: 1.4rem;
    display: flex;
    padding: 0.125rem 0.5rem;
    align-items: center;
    flex-direction: column;
    color: var(--Success-500, #17B26A);
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.125rem;
    border-radius: 1rem;
    border: 1px solid var(--Success-200, #ABEFC6);
    background: var(--Success-50, #ECFDF3);
}

.contract-list .clear-badge {
    max-width: 2.3125rem;
    width: 100%;
    height: 1.4rem;
    display: flex;
    padding: 0.125rem 0.5rem;
    align-items: center;
    flex-direction: column;
    color: var(--Gray-500, #667085);
    text-align: center;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.125rem;
    border-radius: 1rem;
    border-radius: 1rem;
    border: 1px solid var(--Gray-200, #EAECF0);
    background: var(--Gray-50, #F9FAFB);
}

.contract-list tr td:nth-child(1) {
    width: 4.4rem;
}

.basic-table .contract-list tr td:nth-child(2) {
    white-space: nowrap;
}

.contract-list tr td:nth-child(3),
.contract-list tr td:nth-child(4) {
    width: 6.5rem;
}

.contract-list .completed_at {
    color: var(--Error-500, #F04438);
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.125rem;
}

.default-shipping-badge-wrapper {
    /* margin: 0 auto 0.12rem auto; */
    width: 3.5rem;
}

.default-shipping-badge {
    display: block;
    padding: 0.0625rem 0.25rem 0.125rem 0.25rem;
    width: 3.5rem;
    border-radius: 62.5rem;
    border: 1px solid var(--Brand-600, #7F56D9);
    background: var(--Base-White, #FFF);
    color: var(--Brand-600, #7F56D9);
    text-align: center;
    font-size: 0.625rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.badge-flex-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

.badge-general {
    padding: 0.125rem 0.5rem;
    border-radius: 62.5rem;
    border: 1px solid var(--Brand-500, #9E77ED);
    color: var(--Brand-600, #7F56D9);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.25rem;
}

.badge-order {
    padding: 0.125rem 0.5rem;
    border-radius: 62.5rem;
    border: 1px solid var(--Blue-light-500, #0BA5EC);
    color: var(--Blue-light-500, #0BA5EC);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.25rem;
}

.badge-account {
    padding: 0.125rem 0.5rem;
    border-radius: 62.5rem;
    border: 1px solid var(--Orange-500, #EF6820);
    color: var(--Orange-500, #EF6820);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.25rem;
}

.badge-score {
    padding: 0.125rem 0.5rem;
    border-radius: 62.5rem;
    border: 1px solid var(--Teal-500, #15B79E);
    color: var(--Teal-500, #15B79E);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.25rem;
}



/* ========== Badge [END] ========== */

/* ========== contents header ========== */
.contents-header .nav p {
    color: var(--Gray-400, #98A2B3);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
    margin-bottom: 0.25rem;
}

.contents-header .title {
    color: var(--Gray-700, #344054);
    font-size: 1.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2.75rem;
    letter-spacing: -0.045rem;
    margin: 0;
}

.contents-header .explain {
    color: var(--Gray-500, #667085);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
    margin-bottom: 1rem;
    margin-top: 0.5rem;
}

.board-container .btn.padding-sm-regular,
.btn.padding-sm-regular {
    padding: 0.625rem 1rem;
    height: 2.75rem;
}

/* ========== total ========== */
.total-container p {
    display: flex;
    color: var(--Gray-600, #475467);
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5rem;
}

/* =========== flex modal =========== */
.modal-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(8px);
    background-color: rgba(12, 17, 29, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 999;
    transition: opacity 0.4s ease;
}

.modal-light-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(12, 17, 29, 0.3);
    justify-content: center;
    align-items: center;
    z-index: 999;
    transition: opacity 0.4s ease;
    opacity: 0;
}

.modal-content {
    background-color: #fefefe;
    border-radius: 0.75rem;
    width: calc(100% - 1rem);
    box-shadow: 0px 0px 12px 0px rgba(16, 24, 40, 0.12);
    display: flex;
    flex-direction: column;
}

.modal-header {
    align-items: center;
    padding: 1.5rem;
}

.top-wrapper {
    display: flex;
}

.modal-header .top-wrapper .type {
    flex: 1;
    color: var(--Brand-700, #6941C6);
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5rem;
    padding-left: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

.modal-header .title-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    flex: 1;
    color: var(--Gray-900, #101828);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.75rem;
}

.modal-header .title {
    color: var(--Gray-900, #101828);
    text-align: center;
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2.75rem;
    letter-spacing: -0.045rem;
    margin-top: 0.5rem;
}

.modal-header .left-title {
    color: var(--Gray-900, #101828);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.75rem;
}

.modal-header .title-wrapper .explain {
    color: var(--Gray-600, #475467);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
    margin-top: 0.25rem;
}

.btn-close-modal {
    cursor: pointer;
}

.modal-body {
    padding: 0 1.5rem 1rem 1.5rem;
    overflow-y: auto;
}

.modal-body .sub-title {
    color: var(--Gray-900, #101828);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: 2rem;
    margin-top: 2rem;
}

.modal-body .sub-title:nth-child(1) {
    margin-top: 0;
}

.form-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.label-heading {
    margin-bottom: 0.5rem;
    color: var(--Gray-700, #344054);
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem;
}

.label-heading.mb-quarter-rem {
    margin-bottom: 0.25rem;
}

.label-description {
    color: var(--Gray-500, #667085);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
}

.modal-body .label-text {
    color: var(--Gray-500, #667085);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.25rem;
    display: block;
    padding-top: 0.5rem;
    padding-bottom: 1rem;
}

.modal-label-text {
    color: var(--Gray-500, #667085);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.25rem;
    display: block;
    padding-bottom: 1rem;
}

.modal-alert {
    z-index: 999;
}

.modal-alert .label-text {
    color: var(--Gray-500, #667085);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.25rem;
    display: block;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.modal-body {
    color: var(--Gray-600, #475467);
    font-family: Pretendard;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
}

.modal-terms .modal-body p {
    color: var(--Gray-600, #475467);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
}

.modal-footer {
    display: flex;
    padding: 2rem 1.5rem 1.5rem 1.5rem;
    justify-content: center;
    align-items: flex-start;
    gap: 0.75rem;
    align-self: stretch;
}

/* modal size */
.modal-25rem-wide {
    max-width: 25rem;
}

.modal-48rem-wide {
    max-width: 48rem;
}

/* profile img modal body */
.modal-body.profile-img {
    height: calc(90% - 20rem);
}

.profile-img-wrapper {
    display: flex;
    max-width: 42.5rem;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    margin: 0 auto;
}

.profile-img-wrapper button {
    background: none;
}

.profile-img-wrapper img {
    max-width: 6rem;
    width: 100%;
    padding: 0.25rem;
    background-color: #fff;
    border: 4px solid var(--Brand-700, #fff);
    border-radius: 5rem;
}

.profile-img-wrapper img:hover,
.profile-img-wrapper img:active {
    border: 4px solid var(--Brand-700, #6941C6);
    border-radius: 5rem;
}

.profile-img-wrapper .btn-profile-img .active {
    border: 4px solid var(--Brand-700, #6941C6);
    border-radius: 5rem;
}

/* ========== modal-alert [START] ========== */
.modal-alert-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(12, 17, 29, 0.30);
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.4s ease;
    opacity: 0;
}

.modal-alert {
    background-color: #fefefe;
    border-radius: 0.75rem;
    width: 100%;
    max-width: 25rem;
    box-shadow: 0px 0px 12px 0px rgba(16, 24, 40, 0.12);
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.5rem 1rem 1.5rem;
}

.modal-alert .title {
    color: var(--Gray-700, #344054);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.75rem;
    margin: 0;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.modal-alert .explant {
    margin-top: 0.5rem;
    color: var(--Gray-600, #475467);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.modal-alert .explant.alert-spacing-compact {
    margin: 0.5rem 0 0 0;
}

.modal-alert .explant.alert-spacing-bottom {
    margin: 0 0 1.5rem 0;
}

.modal-alert .btn-wrapper {
    display: flex;
    justify-content: end;
}

.modal-alert .btn-wrapper button {
    padding: 0.75rem 1.125rem;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5rem;
}

/* ========== modal-alert [END] ========== */

/* ========== level1 modal [START] ========== */
.modal-level-1-unbackground {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transition: opacity 0.4s ease;
    opacity: 0;
}

.modal-level-1-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(12, 17, 29, 0.70);
    backdrop-filter: blur(8px);
    justify-content: center;
    align-items: center;
    z-index: 999;
    transition: opacity 0.4s ease;
    opacity: 0;
}

.modal-level-1-general {
    width: 100%;
    max-width: 25rem;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid var(--Gray-200, #EAECF0);
    background: var(--Base-White, #FFF);
    box-shadow: 0px 0px 64px -12px rgba(16, 24, 40, 0.16);
}

.modal-level-1-background .text-wrapper {
    padding-bottom: 1.5rem;
}

.modal-level-1-general .title {
    color: var(--Gray-900, #101828);
    text-align: center;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.75rem;
    padding-bottom: 0.5rem;
    word-wrap: break-word;
    text-align: center;
}

.modal-level-1-background .explant {
    color: var(--Gray-600, #475467);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
}

.modal-level-1-background .btn-wrapper button {
    width: 100%;
    display: flex;
    padding: 1rem 1.375rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
}

.modal-level-1-background .btn-wrapper button:nth-child(2) {
    margin-top: 0.75rem;
}

.modal-level-1-background .btn-wrapper .submit-btn {
    padding: 1rem 1.375rem;
    color: var(--Base-White, #FFF);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.75rem;
}

/* ========== level1 modal [END] ========== */

/* ========== level1 등록/수정 modal [START] ========== */
.modal-level-1-edit-info {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    inset: 0;
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-level-1-edit-info.show {
    opacity: 1;
    pointer-events: auto;
    background-color: #0000001A;
}

.modal {
    background: white;
    width: 100%;
    max-width: 25.5rem;
    border-radius: 0.75rem;
    border: 1px solid var(--Gray-200, #EAECF0);
    background: var(--Base-White, #FFF);
    box-shadow: 0px 0px 64px -12px rgba(16, 24, 40, 0.16);
    position: relative;
    overflow: visible;
}

.modal-body {
    overflow: visible;
}

.modal-level-1-edit-info h2 {
    color: var(--Gray-900, #101828);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.75rem;
}

.modal-level-1-edit-info .modal-body label,
.modal-level-1-edit-info .modal-body .label {
    display: block;
    margin-bottom: 0.38rem;
    color: var(--Gray-700, #344054);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;
}

.close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 1.5rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    border: none;
    background: none;
}

.icon-wrapper {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rotate-on-hover {
    transition: transform 0.5s ease;
    transform-origin: center center;
}

.icon-wrapper:hover .rotate-on-hover,
.class-item .rotate-on-hover:hover {
    transform: rotate(180deg);
}

.close-btn:hover {
    transform: rotate(180deg);
}

.modal-level-1-edit-info {
    height: calc(var(--vh) * 100);
    /* 전체 viewport 높이 고정 */
    overflow: auto;
    z-index: 999;
}

.modal-level-1-edit-info .checkbox-group {
    display: flex;
    gap: 4.17rem;
    align-items: center;
    transition: all 0.5s;
}

.modal-level-1-edit-info .checkbox-wrapper {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 1.25rem;
}

.modal-level-1-edit-info .checkbox-label {
    color: var(--Gray-700, #344054);
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem;
}

.modal-level-1-edit-info .submit-btn {
    padding: 1rem 1.375rem;
    color: var(--Base-White, #FFF);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.75rem;
}

.modal-level-1-edit-info .modal-body .checkbox {
    width: 1.25rem;
    height: 1.25rem;
}

/* ========== level1 등록/수정 modal [END] ========== */

/* =========== bootstrap modal =========== */
/* modal [START] */
.prev-step-warning-modal .modal-dialog {
    max-width: 25rem;
}

.prev-step-warning-modal .modal-header {
    padding: 1.5rem 1.5rem 1rem 1.5rem;
}

.icon-container,
.btn-container {
    flex: 1;
}

.icon-container img {
    width: 3rem;
    height: 3rem;
    padding: 0.75;
    justify-content: center;
    align-items: center;
}

.modal-open .modal {
    backdrop-filter: blur(8px);
}

.modal-backdrop.show {
    opacity: 0.7;
    background: var(--Gray-950, #0C111D);
}

.terms-conditions-servic-modal .modal-content {
    opacity: 1;
    border-radius: 0.75rem;
}

.terms-conditions-servic-modal .modal-header {
    display: block;
    border-bottom: none;
}

.prev-step-warning-modal .modal-content {
    opacity: 1;
    border-radius: 0.75rem;
}

.prev-step-warning-modal .modal-header {
    display: flex;
    border-bottom: none;
}

.close:hover,
.close:active {
    outline: none;
}

.modal-header-type {
    flex: 2;
    text-align: center;
    color: var(--Brand-700, #6941C6);
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    padding-left: 1.5rem;
}

.modal-close:hover #close_modal {
    stroke: var(--Brand-700, #6941C6);
    cursor: pointer;
}

.modal-title {
    color: var(--Gray-900, #101828);
    text-align: center;
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 44px;
    letter-spacing: -0.72px;
    display: block;
    margin-top: 0.5rem;
}

.modal-body-container {
    padding: 0 2rem;
}

.modal-body-container h1 {
    color: var(--Gray-900, #101828);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    margin-top: 1.5rem;
}

.modal-body-container h1:nth-child(1) {
    margin-top: 0;
}

.modal-body-container p {
    color: var(--Gray-600, #475467);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.modal-footer {
    border-top: none;
}

.prev-step-warning-modal .modal-footer {
    margin: 0 auto;
    padding: 0 0 24px 0;
}

.prev-step-warning-modal .modal-dialog {
    margin: calc(33vh - 10px) auto;
}

.check-btn {
    width: 100%;
    color: var(--Base-White, #FFF);
    border-radius: 8px;
    border: 1px solid var(--Brand-600, #7F56D9);
    background: var(--Brand-600, #7F56D9);
    padding: 12px 18px;
    justify-content: center;
    align-items: center;
}

/* modal [END] */
/* ========== editable-container [START] ========== */
.editable-container .editable-section {
    border-bottom: 1px solid var(--Gray-200, #EAECF0);
    margin-bottom: 1.87rem;
}

.editable-container .btn-assistive,
.editable-container .btn-primary,
.editable-container .btn-primary-line {
    padding: 0.625rem 1rem;
    transition: all .5s ease;
}

.editable-container .text-label-wrapper {
    width: 100%;
    max-width: 17.5rem;
}

.editable-container .custom-text-label {
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem;
}

.editable-container .custom-text-label:nth-child(3) {
    margin-top: 0;
    margin-bottom: 0;
}

.editable-container .custom-text-input {
    height: 2.6rem;
}

.editable-container .font-default {
    color: var(--Gray-900, #101828);
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem;
}

.border {
    height: 0.0625rem;
    align-self: stretch;
    background: var(--Gray-200, #344054);
}

.editable-container .edit-wrapper {
    padding: 1rem;
    margin-top: 0.5rem;
    border-radius: 0.5rem;
    background: var(--Gray-50, #F9FAFB);
    display: none;
}

.editable-container .edit-input-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.5rem;
    align-self: stretch;
}

.editable-container .edit-wrapper p {
    color: var(--Gray-700, #344054);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem;
    margin-bottom: 0.38rem;
}

.editable-container .edit-wrapper .input-bottom-warning-message {
    font-weight: 400;
}

.auth-number-wrapper {
    display: none;
}

.editable-container .text-label {
    color: var(--Gray-700, #344054);
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem;
}

.mobile {
    display: none;
}

.editable-container .time-group {
    position: absolute;
    top: 25%;
    right: 4%;
}

/* ========== editable-container [END] ========== */

/* warning */
.warning-icon-wrapper svg {
    position: absolute;
    top: 20%;
    right: 3%;
}

.warning-icon-wrapper.phone-number svg {
    position: absolute;
    top: 30%;
    right: 6%;
}

.warning-icon-wrapper.name {
    position: absolute;
    top: 27%;
    right: 3%;
}

.input-bottom-warning-message {
    color: var(--Error-500, #F04438);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
    margin-top: 0.38rem;
}

.tooltip-and-delete-btn-container .show-delete-modal-btn {
    padding-right: 0.25rem;
}

/* tooltip */
.tooltip {
    margin-top: -4px;
}

[data-tooltip] {
    position: relative;
}

[data-tooltip]:before,
[data-tooltip]:after {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 30%;
    transform: translateX(-8%);
    white-space: nowrap;
    transition: all .2s ease;
    font-family: Pretendard;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
    letter-spacing: -1px;
}

[data-tooltip]:before {
    content: attr(data-tooltip);
    position: absolute;
    top: -60px;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--Gray-800, #182230);
    color: var(--Base-White, #FFF);

}

[data-tooltip]:after {
    content: '';
    border-left: 5px solid transparent;
    top: 12px;
    border-right: 5px solid transparent;
    border-top: 5px solid #182230;
}

.tooltip-and-delete-btn-container .tooltip[data-tooltip]::before {
    white-space: pre-line;
}

.tooltip-and-delete-btn-container [data-tooltip]:not([data-tooltip=""]):hover:before {
    top: -64px;
}

[data-tooltip]:not([data-tooltip=""]):hover:before {
    visibility: visible;
    opacity: 1;
    top: -44px
}

[data-tooltip]:not([data-tooltip=""]):hover:after {
    visibility: visible;
    opacity: 1;
    top: -8px
}

.sub-title [data-tooltip]:before {
    white-space: pre-line;
    width: 15rem;
}

.sub-title [data-tooltip]:not([data-tooltip=""]):hover:before {
    top: -5.25rem;
}

.bg-white {
    background-color: #fff;
}

.bg-gray {
    background-color: #f2f4f7;
}

.headerbar {
    transition: background-color 0.5s ease;
}

.empty-state-character {
    max-width: 4rem;
    width: 100%;
}

/* loding animation */
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
}

.loading span {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #f9fafb;
    border-radius: 50%;
    animation: loading 1s linear infinite;
    background-color: #344054;
}

.loading span:nth-child(1) {
    animation-delay: 0s;
}

.loading span:nth-child(2) {
    animation-delay: 0.2s;
    margin: 0px 10px
}

.loading span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes loading {

    0%,
    100% {
        opacity: 0;
        transform: scale(0.5);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.no-result-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    text-align: center;
    box-sizing: border-box;
}

.svg-wrapper {
    position: relative;
    width: 12.5rem;
    height: 6.25rem;
}

.svg-wrapper.character {
    width: 3.75rem;
    height: 5.25rem;
}

.svg-wrapper>svg {
    position: absolute;
    top: 0;
    left: 0;
}

.jelly-pop {
    animation: jelly-pop 0.6s;
}

@keyframes jelly-pop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    60% {
        transform: scale(1.2);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.board-container .no-result-wrapper .title {
    color: var(--Gray-700, #344054);
    font-family: Pretendard;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5rem;
}

.board-container .no-result-wrapper .content {
    margin: 0;
    padding: 0;
    color: var(--Gray-400, #98A2B3);
    font-family: Pretendard;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
}

.table-container.ellipsis-table-container .basic-table tbody .branch-school-logo {
    padding: 0 1rem;
}

.branch-school-logo {
    width: 15rem;
}

.branch-school-logo img {
    max-width: 15rem;
    max-height: 3rem;
}

.divider {
    width: 0.1rem;
    height: 0.75rem;
    background: var(--Gray-200, #EAECF0);
}

.editable-date {
    color: var(--Error-500, #F04438);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
}

.hidden {
    overflow: hidden;
}

.contract-download-btn {
    margin-top: 4.56rem;
}

.show-pw {
    position: absolute;
    top: 28%;
    right: 4%;
    /* background-color: #fff; */
}

.show-pw i {
    color: #98A2B3;
}

.float-right {
    float: right;
}

.input-with-button {
    display: flex;
    gap: 0.5rem;
}

.class-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.75rem;
    color: var(--Gray-900, #101828);
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem;
}

.class-item:nth-child(1) {
    margin-top: 0.5rem;
}

.remove-btn {
    cursor: pointer;
    height: 1.5rem;
}

.class-list-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.flex-row-center {
    margin: 0 auto;
    display: flex;
    gap: 1rem;
    max-width: 22rem;
    width: 100%;
    height: 3rem;
    justify-content: center;
    transition: all 0.3s;
}

.flex-row-right {
    display: flex;
    gap: 1rem;
    max-width: 22rem;
    width: 100%;
    justify-content: right;
    transition: all 0.3s;
}

.branch-class-exam-count {
    color: var(--Gray-400, #98A2B3);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
}

.search-filter-container .custom-text-input:active,
.search-filter-container .custom-text-input:focus {
    border: 1px solid var(--Gray-300, #D0D5DD);
    box-shadow: none;
}

/* 해상도가 1920x1080인 디스플레이에 대한 미디어쿼리 */
@media only screen and (min-width: 1920px) and (max-width: 1920px) and (min-height: 1080px) and (max-height: 1080px) and (min-width: 13in) and (max-width: 17in) {
    .modal-body.profile-img {
        height: calc(90vh - 20rem);
    }
}

/* 13인치에서 17인치 노트북 크기에 대한 미디어쿼리 */
@media only screen and (min-width: 13in) and (max-width: 17in) {
    .modal-body.profile-img {
        height: calc(100vh - 19rem);
    }
}

@media (max-width: 1024px) {
    .inline-block-to-block {
        display: block;
    }

    .flex-to-block {
        display: block;
    }

    .flex-space-between-to-block,
    .flex-space-between-to-block-no-center {
        display: block;
    }

    .h-24-25-rem-to-mobile-h-auto {
        height: auto;
    }

    /* ========== editable-container [START] ========== */
    .editable-container .text-label-wrapper {
        width: 100%;
        max-width: 7.5rem;
        transition: all 0.8s;
    }

    /* ========== editable-container [END] ========== */
}

@media (max-width: 767px) {
    .m-w-100 {
        width: 100%;
    }

    .board-container.m-pt-1-rem {
        padding-top: 1rem;
    }

    .modal-body.profile-img {
        height: 16rem;
    }

    .sub-title [data-tooltip]:before {
        white-space: pre-line;
        width: 10rem;
    }

    .sub-title [data-tooltip]:not([data-tooltip=""]):hover:before {
        top: -6.45rem;
    }

    .modal-alert {
        width: calc(100% - 2rem);
    }

    .editable-container .text-label-wrapper {
        display: none;
    }

    .mobile {
        display: block;
    }

    .hidden-mobile {
        display: none;
    }

    .mobile-mt-one-rem {
        margin-top: 1rem;
    }

    .pb-4rem-to-2rem {
        padding-bottom: 2rem;
    }

    .pagination {
        padding-bottom: 0;
    }

    .hide-on-mobile {
        display: none;
    }

    /* ========== level1 modal ========== */
    .modal-level-1-background {
        align-items: end;
    }

    .modal-level-1-general {
        width: calc(100% - 3rem);
        padding: 1.25rem 1rem 1rem 1rem;
        margin-bottom: 4rem;
    }

    /* ========== level1 등록/수정 modal ========== */
    .modal {
        width: calc(100% - 2rem);
    }

    .modal-level-1-edit-info .checkbox-group {
        gap: 2.81rem;
    }

    /* ========== contents header ========== */
    .contents-header .title {
        font-size: 1.125rem;
        line-height: 1.5rem;
    }

    .contents-header .explain {
        font-size: 0.75rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.25rem;
    }

    .contents-header .padding-sm-regular {
        padding: 0.5rem 0.75rem;
    }

    /* ========== modal-alert [START] ========== */
    .modal-alert {
        padding: 1.5rem 1.5rem 1rem 1.5rem;
        box-sizing: border-box;
        position: absolute;
        bottom: 5rem;
    }

    /* ========== modal-alert [END] ========== */

    .list-search-container .gubun-container {
        display: none;
    }
}