:root {
    --field-width_xs: 120px;
    --field-width_sm: 240px;
    --field-width_md: 320px;
    --field-width_full: 100%;

    --field-height_xs: 32px;
    --field-height_sm: 40px;
    --field-height_md: 50px;

    --font-size__label: 14px;
    --line-height__label: 20px;

    --font-size__input: 16px;
    --line-height__input: 30px;

    --font-size__message: 12px;
    --line-height__message: 18px;

    --upload-height_md: 192px;

    --color_success: var(--primary_600);
}

form {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    height: auto;
}

input {
    background-color: var(--color_white);
    color: var(--color_black);
    font-size: var(--font-size__input);
    font-weight: var(--font-weight__medium);
    line-height: var(--line-height__input);
    cursor: text;
}

input::placeholder {
    color: var(--gray_400);
    font-size: var(--font-size__input);
    font-weight: var(--font-weight__medium);
    line-height: var(--line-height__input);
}

.input-box.disabled,
input:disabled {
    background-color: var(--gray_100);
    color: var(--gray_400);
    border: var(--border__lightgray-1);
    cursor: not-allowed;
}

label,
.fake-label {
    color: var(--gray_400);
    font-size: var(--font-size__label);
    font-weight: var(--font-weight__bold);
    line-height: var(--line-height__label);
    cursor: default;
}

.fake-label {
    margin-bottom: 0.25rem;
}

select {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    column-gap: 1rem;
    appearance: none;
    background-image: url("/public/images/icon/ic_dropdown.svg");
    background-repeat: no-repeat;
    background-size: 1rem;
    background-position: right 16px center;
    cursor: pointer;
}

select:disabled {
    background-color: var(--gray_100);
    color: var(--gray_500);
    border: var(--border__lightgray-1);
    cursor: not-allowed;
}

textarea {
    display: block;
    width: 100%;
    height: auto;
    border: var(--border__lightgray-1);
    border-radius: var(--curved);
    resize: none;
    padding: 1rem;
    overflow-y: auto;
}

textarea::-webkit-scrollbar {
    display: block;
}

.submit-button {
    max-width: 21.5rem;
    width: 100%;
    margin-top: 3rem;
}

/*  horizontal only input */
.cms-textfield-a,
.textfield__horizontal {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    column-gap: 1.5rem;
    min-width: var(--field-width_md);
    width: 100%;
}

.cms-textfield-a label,
.textfield__horizontal label {
    display: block;
    width: auto;
}


.cms-textfield-a input,
.textfield__horizontal input {
    flex: 1;
    width: auto;
    height: var(--field-height_md);
    padding-left: 1rem;
    padding-right: 1rem;
    border: var(--border__lightgray-1);
    border-radius: var(--curved);
}

.cms-textfield-a .field-message,
.textfield__horizontal .field-message {
    display: none;
}

.cms-textfield-a.error input,
.textfield__horizontal.error input {
    border: 1px solid var(--color_danger);
}

.cms-textfield-a.error .field-message,
.textfield__horizontal.error .field-message {
    display: inline-block;
    width: auto;
    color: var(--color_danger);
    font-size: var(--font-size__message);
    font-weight: var(--font-weight__medium);
    line-height: var(--line-height__message);
    margin-left: auto;
}

.cms-textfield-a.success input,
.textfield__horizontal.success input {
    border: 1px solid var(--color_success);
}

.cms-textfield-a.success .filed-message,
.textfield__horizontal.success .filed-message {
    display: inline-block;
    width: auto;
    color: var(--color_danger);
    font-size: var(--font-size__message);
    font-weight: var(--font-weight__medium);
    line-height: var(--line-height__message);
    margin-left: auto;
}

/* vertical label input */
.cms-textfield-b,
.textfield__vertical {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    row-gap: 0.25rem;

}

.cms-textfield-b label,
.textfield__vertical label {
    display: block;
}

.cms-textfield-b input,
.textfield__vertical input {
    width: 100%;
    height: var(--field-height_md);
    padding-left: 1rem;
    padding-right: 1rem;
    border: var(--border__lightgray-1);
    border-radius: var(--curved);
}


.cms-textfield-b .field-message,
.textfield__vertical .field-message {
    display: none;
}

.cms-textfield-b.error input,
.textfield__vertical.error input {
    border: 1px solid var(--color_danger);
}

.cms-textfield-b.error .field-message,
.textfield__vertical.error .field-message {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    width: auto;
    color: var(--color_danger);
    font-size: var(--font-size__message);
    font-weight: var(--font-weight__medium);
    line-height: var(--line-height__message);
    margin-left: auto;
}

.cms-textfield-b.success input,
.textfield__vertical.success input {
    border: 1px solid var(--color_success);
}

.cms-textfield-b.success .field-message,
.textfield__vertical.success .field-message {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    width: auto;
    color: var(--color_success);
    font-size: var(--font-size__message);
    font-weight: var(--font-weight__medium);
    line-height: var(--line-height__message);
    margin-left: auto;
}

/* contained button input */
.cms-textfield-c,
.textfield__vertical {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    row-gap: 0.25rem;

}

.cms-textfield-c label,
.textfield__vertical label {
    display: block;
}

.cms-textfield-c .input-box,
.textfield__vertical .input-box {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    column-gap: 1rem;
    width: 100%;
    height: var(--field-height_md);
    padding-left: 1rem;
    padding-right: 1rem;
    border: var(--border__lightgray-1);
    border-radius: var(--curved);
}

.cms-textfield-c .input-box input,
.textfield__vertical .input-box input {
    flex: 1;
    display: inline-block;
    /* min-width: 200px; */
    background-color: transparent;
    border: none;
    border-radius: unset;
}

.cms-textfield-c .input-box button,
.textfield__vertical .input-box button {
    flex-shrink: 1;
    display: block;
    min-width: fit-content;
    width: auto;
    height: var(--field-height_xs);
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: var(--gray_100);
    color: var(--gray_400);
    font-size: var(--font-size__detail);
    font-weight: var(--font-weight__bold);
    line-height: var(--line-height__md);
    border-radius: var(--curved);
}

/* search input */
.cms-textfield-d,
.search-box {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    column-gap: 1.5rem;
    width: 100%;
    max-width: 400px;
    /* height: var(--field-height_md);
    padding-left: 1rem;*/
    padding-right: 1rem;
    border: var(--border__lightgray-1);
    border-radius: var(--curved);
}

.cms-textfield-d label,
.search-box label {
    display: none;
}

.cms-textfield-d div,
.search-box div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.5rem;
    width: 100%;
}

.cms-textfield-d input,
.search-box input {
    flex: 1;
    height: var(--field-height_md);
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: var(--curved);

}

.cms-textfield-d button,
.search-box button {
    padding: 0;
}

.cms-textfield-d button::after,
.search-box button::after {
    content: '';
    width: 28px;
    height: 28px;
    background-image: url("/public/images/icon/ic_search.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

/* delete input */

.cms-textfield-e,
.delete-box {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    column-gap: 1.5rem;
    width: auto;
    /* height: var(--field-height_md);
    padding-left: 1rem;*/
    padding-right: 1rem;
    border: var(--border__lightgray-1);
    border-radius: var(--curved);
}

.cms-textfield-e label,
.delete-box label {
    display: none;
}

.cms-textfield-e div,
.delete-box div {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.5rem;
    width: 100%;
}

.cms-textfield-e input,
.delete-box input {
    flex: 1;
    height: var(--field-height_md);
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: var(--curved);

}

.cms-textfield-e button,
.delete-box button {
    padding: 0;
}

.cms-textfield-e button::after,
.delete-box button::after {
    content: '';
    width: 28px;
    height: 28px;
    background-image: url("/public/images/icon/ic_close.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

/* checkbox icon a */

.cms-checkbox-a,
.cms-radio {}

.cms-checkbox-a label,
.cms-radio label {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.5rem;
    /* max-width: var(--field-width_xs); */
    min-width: 7.5rem;
    width: fit-content;
    height: var(--field-height_md);
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: var(--color_white);
    color: var(--gray_400);
    font-size: var(--font-size__label);
    font-weight: var(--font-weight__bold);
    line-height: var(--line-height__label);
    border: var(--border__lightgray-1);
    border-radius: var(--curved);
    cursor: pointer;
    transition: all 0.1s ease-out;
}

.cms-checkbox-a.small label,
.cms-radio.small label {
    height: var(--field-height_sm);
}

.cms-checkbox-a label::before,
.cms-radio label::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("/public/images/icon/ic_radio_unchecked.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.cms-checkbox-a input,
.cms-radio input {
    display: none;
}

.cms-checkbox-a input:checked+label,
.cms-radio input:checked+label {
    background-color: var(--primary_200);
    color: var(--color_black);
    font-size: var(--font-size__label);
    font-weight: var(--font-weight__bold);
    line-height: var(--line-height__label);
    border: var(--border__primary-1);
}

.cms-checkbox-a input:checked+label::before,
.cms-radio input:checked+label::before {
    background-image: url("/public/images/icon/ic_radio_checked.svg");
}

/* checkbox icon b */


.cms-checkbox-b,
.cms-checkbox {}

.cms-checkbox-b label,
.cms-checkbox label {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.5rem;
    /* max-width: var(--field-width_xs); */
    min-width: 7.5rem;
    width: fit-content;
    height: var(--field-height_md);
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: var(--color_white);
    color: var(--gray_400);
    font-size: var(--font-size__label);
    font-weight: var(--font-weight__bold);
    line-height: var(--line-height__label);
    border: var(--border__lightgray-1);
    border-radius: var(--curved);
    cursor: pointer;
    transition: all 0.1s ease-out;
}

.cms-checkbox-b .list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.5rem;
    /* max-width: var(--field-width_xs); */
    min-width: 14rem;
    width: fit-content;
    height: var(--field-height_md);
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: var(--color_white);
    color: var(--gray_400);
    font-size: var(--font-size__label);
    font-weight: var(--font-weight__bold);
    line-height: var(--line-height__label);
    border: var(--border__lightgray-1);
    border-radius: var(--curved);
    cursor: pointer;
    transition: all 0.1s ease-out;
}

.cms-checkbox-b.small label,
.cms-checkbox.small label {
    height: var(--field-height_sm);
}

.cms-checkbox-b label::before,
.cms-checkbox label::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("/public/cms/images/icon/ic_checkbox_unchecked.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.cms-checkbox-b input,
.cms-checkbox input {
    display: none;
}

.cms-checkbox-b input:checked+label,
.cms-checkbox input:checked+label {
    background-color: var(--primary_200);
    color: var(--color_black);
    font-size: var(--font-size__label);
    font-weight: var(--font-weight__bold);
    line-height: var(--line-height__label);
    border: var(--border__primary-1);
}

.cms-checkbox-b input:checked+label::before,
.cms-checkbox input:checked+label::before {
    background-image: url("/public/cms/images/icon/ic_checkbox_checked.svg");
}

/* checkbox icon c - switch style */

.cms-checkbox-c,
.cms-switch {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.cms-checkbox-c input,
.cms-switch input {
    display: none;
}

.cms-checkbox-c label,
.cms-switch label {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    min-width: 4.5rem;
    width: fit-content;
    height: 2rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    background-color: var(--gray_200);
    border-radius: var(--rounded);
    cursor: pointer;
    transition: all 0.5s ease-out;
}

.cms-checkbox-c label::after,
.cms-switch label::after {
    content: '';
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--color_white);
    border-radius: var(--circle);
}

.cms-checkbox-c input:checked+label,
.cms-switch input:checked+label {
    justify-content: flex-end;
    background-color: var(--primary_600);
}


/* select box */
.cms-select-a,
.select-box {
    width: auto;
    height: var(--field-height_md);
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: var(--color_white);
    color: var(--color_black);
    font-size: var(--font-size__body-1);
    font-weight: var(--font-weight__medium);
    line-height: var(--line-height__sm);
    border: var(--border__lightgray-1);
    border-radius: var(--curved);
    min-width: 150px;
}

.cms-select-a.small,
.select-box.small {
    height: var(--field-height_sm);
}

/* small select box */
.cms-select-b,
.cms-select-a.small {
    width: 100%;
    height: var(--field-height_sm);
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: var(--color_white);
    color: var(--color_black);
    font-size: var(--font-size__body-1);
    font-weight: var(--font-weight__medium);
    line-height: var(--line-height__sm);
    border: var(--border__lightgray-1);
    border-radius: var(--curved);
}


/* image upload field */
.cms-fileupload-a,
.image-upload-box {}

.cms-fileupload-a label,
.image-upload-box label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 0.25rem;
    max-width: var(--field-width_sm);
    min-width: var(--field-width_sm);
    width: fit-content;
    height: auto;
    aspect-ratio: 1.25/1;
    background-color: var(--gray_100);
    border: var(--border__lightgray-1);
    border-radius: var(--curved);
    cursor: pointer;
}

.cms-fileupload-a label::before,
.image-upload-box label::before {
    content: '';
    order: 1;
    display: inline-block;
    width: 50px;
    height: 50px;
    background-image: url("/public/images/icon/ic_upload.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.cms-fileupload-a label::after,
.image-upload-box label::after {
    content: '이미지 업로드';
    order: 2;
    display: block;
    color: var(--gray_400);
    font-size: var(--font-size__body-1);
    font-weight: var(--font-weight__bold);
    line-height: var(--line-height__message);
}

.cms-fileupload-a input,
.image-upload-box input {
    display: none;
}

.cms-fileupload-a span,
.image-upload-box span {
    order: 3;
    display: block;
    color: var(--gray_400);
    font-size: var(--font-size__message);
    font-weight: var(--font-weight__bold);
    line-height: var(--line-height__message);
}

.preview-wrapper .cms-checkbox-a,
.preview-wrapper .image-upload-box,
.preview-wrapper .cms-preview-a {
    min-width: var(--field-width_sm);
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: var(--field-width_sm);
}

.preview-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
}

.cms-preview-a {
    position: relative;
    border-radius: var(--curved);
    border: var(--border__lightgray-1);
    overflow: hidden;
    width: 100%;
    background-color: var(--color_background);
    font-size: 0;
}

.cms-preview-a img {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: var(--upload-height_md);
    object-fit: cover;
}

.cms-preview-a::after {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background-image: url("/public/images/icon/ic_close.svg");
}

@media screen and (max-width: 1365px) {}

@media screen and (max-width: 1023px) {}