: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;

	--font-size__placeholder: 14px;
	--line-height__placeholder: 30px;

	--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,
.fake-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;
}

.fake-input {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

.fake-textarea {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 1rem;
	min-height: 12.5rem;
}

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,
.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 {
	min-width: 120px;
	word-break: keep-all;
	/* margin-bottom: 0.25rem; */
}

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

select {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	column-gap: 1rem;
	appearance: none;
	background-color: var(--color_white);
	background-image: url("/public/images/icon/ic_dropdown.svg");
	background-repeat: no-repeat;
	background-size: 1rem;
	background-position: right 8px 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.small,
.textfield__horizontal.small {
	min-width: unset;
	width: auto;
}

.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,
.cms-textfield-b .fake-input,
.cms-textfield-b textarea,
.cms-textfield-b .fake-textarea,
.textfield__vertical input {
	width: 100%;
	min-height: var(--field-height_md);
	height: auto;
	padding-left: 1rem;
	padding-right: 1rem;
	border: var(--border__lightgray-1);
	border-radius: var(--curved);
}

.cms-textfield-b textarea {
	height: initial;
}

.cms-textfield-b.small input,
.cms-textfield-b.small .fake-input,
.textfield__vertical.small input {
	height: var(--field-height_sm);
	font-size: var(--font-size__body-2);
}

.cms-textfield-b.small input::placeholder,
.textfield__vertical.small input::placeholder {
	font-size: var(--font-size__body-2);
}

.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_sm);
	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);
	font-size: var(--font-size__body-2);
}

.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.small label::before,
.cms-checkbox.small label::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	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);
}

/* checkbox default, consent */

.cms-checkbox-d,
.cms-consent {}

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

.cms-checkbox-d label,
.cms-consent label {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	column-gap: 0.5rem;
	min-width: 7.5rem;
	width: auto;
	height: var(--field-height_xs);
	color: var(--gray_400);
	font-size: var(--font-size__label);
	font-weight: var(--font-weight__bold);
	line-height: var(--line-height__label);
	cursor: pointer;
	transition: all 0.1s ease-out;
}

.cms-checkbox-d label::before,
.cms-consent 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-d input:checked+label,
.cms-consent input:checked+label {
	color: var(--gray_600);
	font-size: var(--font-size__label);
	font-weight: var(--font-weight__bold);
	line-height: var(--line-height__label);
}

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

/* select box */
.cms-select-a,
.select-box {
	width: auto;
	height: var(--field-height_md);
	padding-left: 1rem;
	padding-right: 2rem;
	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);
	font-size: var(--font-size__body-2);
}

/* 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 {
	position: relative;
	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: absolute;
	top: 0;
	left: 0;
	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;
	border-radius: var(--curved);
}

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

.fail-message {
	color: var(--color_danger);
}

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

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