.edit {
	margin-top: 120px;

	/* promptPop */
	.promptPop {
		background: var(--fff);
		position: absolute;
		padding: 10px 16px;
		border-radius: 8px;
		z-index: 10;
		display: none;

		>div {
			display: flex;
			gap: 20px;
			align-items: center;
		}

		i.icon-top {
			font-size: 17px;
			background: var(--Pink-900);
			width: 29px;
			height: 29px;
			border-radius: 100px;
			text-align: center;
			line-height: 29px;
			cursor: pointer;
		}

		.flexD>label {
			font-size: 12px;
			color: var(--Grey-500);
			line-height: 130%;
			margin-top: 10px;
			margin-bottom: 4px;
			font-weight: 500;
		}

		input[type="text"] {
			color: var(--Grey-800);
			font-size: 20px;
			background: var(--Grey-50);
			border-radius: 4px;
			padding: 6px 10px;
			font-weight: 500;

			&::placeholder {
				color: var(--Grey-200);
			}
		}

		.btnWrap {
			color: var(--Grey-700);
			display: flex;
			margin-top: 10px;
			gap: 8px;
			font-size: 24px;
			align-items: center;

			label,
			button {
				background: var(--Grey-50);
				border-radius: 6px;
				padding: 10px;
				font-size: 14px;
				color: var(--Grey-800);
				cursor: pointer;
			}

			input[type="file"] {
				width: 0;
				position: absolute;
				visibility: hidden;
			}

			.preview {
				position: absolute;
				opacity: 0;

				img {
					border-radius: 3px;
				}

				i {
					position: absolute;
					cursor: pointer;
					bottom: 5px;
					left: 50%;
					transform: translate(-50%, 0);
					color: var(--fff);
				}

			}

			&.active .preview {
				position: relative;
				opacity: 1;
			}

			&.active button,
			&.active label {
				display: none;
			}


		}

	}

	/* brushSizePop */
	.brushSizePop {
		padding: 10px 14px;
		background: var(--Grey-800);
		position: absolute;
		left: calc(50% - 120px);
		border-radius: 10px;
		font-size: 12px;
		display: flex;
		gap: 6px;
		align-items: center;
		transform: translate(-50%, 0);
		z-index: 10;




















		>div {
			padding: 6px 4px;
			display: flex;
			align-items: center;
			gap: 6px;
		}

		#ex-out {
			min-width: 20px;
		}

		.slider {
			-webkit-appearance: none;
			/* 기본 CSS 스타일을 적용하지 않기 위해서 */
			width: 100%;
			/* 슬라이더 길이 */
			height: 8px;
			/* 슬라이더 두께 */
			border-radius: 5px;
			/* 슬라이더 모서리를 약간 둥글게 */
			background: var(--Grey-700);
			/* 슬라이더 색상 */
			outline: none;
			/* 슬라이더 테두리 없이 */
			background: linear-gradient(to right, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 50%, rgb(77, 77, 77) 50%, rgb(77, 77, 77) 100%);
		}

		/* 슬라이더 핸들(클릭해서 드래그하는 부분) 커스텀 
  (Chrome, Opera, Safari, Edge 브라우저를 위해서는 -webkit-을,
  Firefox 브라우저를 위해서는 -moz- 를 사용하세요 */
		.slider::-webkit-slider-thumb {
			-webkit-appearance: none;
			/* 기본 CSS 스타일을 적용하지 않기 위해서 */
			appearance: none;
			/* 기본 CSS 스타일을 적용하지 않기 위해서 */
			width: 12px;
			/* 슬라이더 핸들 길이 */
			height: 12px;
			/* 슬라이더 핸들 높이 */
			border-radius: 50%;
			/* 핸들 모양을 원모양으로 만들기 위함 */
			background: var(--fff);
			/* 슬라이더 핸들 색상 */
			cursor: pointer;
			/* 슬라이더 핸들에 마우스를 갖다대면 포인터로 변경 */
		}

		.slider::-moz-range-thumb {
			width: 12px;
			/* 슬라이더 핸들 길이 */
			height: 12px;
			/* 슬라이더 핸들 높이 */
			border-radius: 50%;
			/* 핸들 모양을 원모양으로 만들기 위함 */
			background: var(--fff);
			/* 슬라이더 핸들 색상 */
			cursor: pointer;
			/* 슬라이더 핸들에 마우스를 갖다대면 포인터로 변경 */
		}

	}

	/* editingBar */
	.editingBar {
		padding: 10px 20px;
		background: var(--Grey-800);
		position: absolute;
		left: calc(50% - 120px);
		border-radius: 10px;
		font-size: 14px;
		display: flex;
		gap: 10px;
		align-items: center;
		transform: translate(-50%, 0);
		z-index: 10;
		bottom: 30px;

		>span {
			min-width: 35px;
			text-align: right;

			&#percent {
				color: var(--Grey-200);
			}
		}

		>div {
			width: 148px;
			height: 8px;
			background: var(--Grey-700);
			border-radius: 100px;
			position: relative;
			overflow: hidden;

			#editing {
				background: var(--Pink-900);
				height: 8px;
				width: 0%;
			}
		}
	}

	.versionPop {
		padding: 30px;
		position: absolute;
		right: 370px;
		bottom: 010%;
		background: var(--Grey-900);
		border-radius: 8px;
		z-index: 10;

		.tit {
			h5 {
				font-size: 14px;
				line-height: 130%;
			}

			p {
				font-size: 12px;
				font-weight: 600;
				color: var(--Grey-100);
				margin-top: 6px;
				margin-bottom: 20px;
				display: flex;
				gap: 4px;
				align-items: center;
			}

			i {
				position: absolute;
				right: 30px;
				top: 30px;
				font-size: 24px;
				cursor: pointer;
			}
		}

		img {
			max-width: 294px;
			margin-bottom: 20px;
			border-radius: 3px;
		}

		button {
			width: 100%;
			border-radius: 8px;
			padding: 10px 16px;
			font-size: 14px;
			cursor: pointer;
			font-weight: 600;

			i {
				margin-right: 10px;
				font-size: 20px;
			}
		}
	}


	.titWrap {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 20px;
		margin-bottom: 20px;

		.page_back {
			position: relative;
			font-size: 24px;
			cursor: pointer;
			left: 0;
			top: 0;
		}

		.tit {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: 100px;

			.greyBtn {
				padding: 10px 14px;
				margin-right: 18px;

				span {
					font-size: 20px;
					font-weight: 600;
					color: #fff;
				}
			}

			.point {
				display: flex;
				align-items: center;
				gap: 10px;
				font-size: 18px;

				i {
					color: var(--Grey-600);
				}

			}
		}
	}

	.content {
		/* display: flex; */
		/* justify-content: space-between; */


		.imgWrap {
			width: calc(100vw - 380px) !important;
			display: flex;
			justify-content: center;
			align-items: center;
			height: calc(100vh - 120px);
			/* padding-top: 80px; */
			position: absolute;
			top: 258px;
			/* 아래 코드에 문제 있을 경우 삭제 후 위 코드 주석해제 */
			/* height: auto;
			justify-content: start;
			padding-left: 190px;
			align-items: start; */

			.flex {
				gap: 30px;
				justify-content: center;
				width: auto !important;

				>div {
					overflow: hidden;
					border-radius: 3px;
					max-height: calc(100vh - 200px);
					margin: 0 !important;
					/* width: auto; */
					/* 아래 코드에 문제 있을 경우 삭제 후 위 코드 주석해제 */
					width: 100%;
					height: 100%;
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;
					max-width: 1024px;
					max-height: 1024px;
					min-width: 360px;
					width: calc(100vw - 0px);

					>div {
						margin-top: 0 !important;

						&.color {
							margin-top: -35px !important;
						}

						>div {
							/* width: auto !important; */
							position: relative;



							canvas {
								width: auto !important;
								height: auto !important;
								/* object-fit: cover; */
								position: relative !important;
								top: 0;
								/* max-height: calc(100vh - 300px); */
								border-radius: 3px;

								&+canvas {
									position: absolute !important;
								}
							}


						}

					}
				}

				>ul {
					display: flex;
					gap: 20px;
					flex-direction: column;

					>li {
						display: flex;
						flex-direction: column;
						gap: 2px;

						button {
							cursor: pointer;
							background: var(--Grey-800);
							padding: 17px 10px;
							width: 64px;

							&:first-child {
								border-radius: 8px 8px 0 0;
							}

							&:last-child {
								border-radius: 0 0 8px 8px;
							}

							&.active {
								background: var(--fff);
								color: var(--Pink-900);

								/*&:hover {
									color: var(--fff);
									background: var(--Pink-900);
								}*/
							}

							/*&:hover {
								background: var(--Grey-400);
								color: var(--fff);
							}*/
							i {
								font-size: 20px;
							}

							span {
								margin-top: 6px;
								display: block;
								font-size: 10px;
								font-weight: 500;
							}
						}
					}

				}

			}

			img {
				max-height: 600px;
				border-radius: 3px;
			}
		}

		.history {
			width: 310px;
			position: absolute;
			right: 50px;
			top: 258px;
			-webkit-transition: all 0.1s;
			-moz-transition: all 0.1s;
			-ms-transition: all 0.1s;
			-o-transition: all 0.1s;
			transition: all 0.1s;


			>.tit {
				display: flex;
				justify-content: space-between;
				gap: 4px;
				border-radius: 4px;
				text-align: center;
				align-items: flex-start;

				li {
					background: var(--Grey-850);
					padding: 10px 10px;
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 6px;
					border-radius: 6px;
					cursor: pointer;
					color: var(--Grey-300);
					font-weight: 600;
				}

				li:first-child {
					width: 100%;
				}

				i {
					font-size: 24px;
					color: var(--Grey-500);
				}

				li.active {
					border-bottom: 4px solid var(--Grey-900);
					border-radius: 6px 6px 0 0;
					background: var(--Grey-900);
					color: var(--Grey-50);
				}

			}

			>.con {
				background: var(--Grey-900);
				position: relative;
				bottom: 0;
				padding: 20px;
				width: 100%;
				height: calc(100vh - 260px);
				overflow: scroll;

				>div {
					height: 100%;
					padding-bottom: 50px;
					display: none;
					position: relative;

					&.active {
						display: block;
					}
				}


				.tit {
					h5 {
						font-size: 18px;
						font-weight: 600;
						line-height: 130%;
						display: flex;
						gap: 10px;

						i {
							font-size: 24px;
						}
					}

					p {
						margin-top: 10px;
						margin-bottom: 20px;
						color: var(--Grey-500);
						font-size: 14px;
						line-height: 130%;
					}
				}

				.publicityList {
					display: flex;
					flex-direction: column;
					gap: 10px;
					/* height: 100%; */

					>li {
						background: var(--Grey-800);
						padding: 10px;
						border-radius: 8px;
						display: flex;
						justify-content: space-between;
						align-items: center;

						&.justNow {
							/*background: var(--Grey-600);
							color: var(--Grey-200);*/

							.colorChip {
								color: var(--Grey-200);
								font-weight: 400;
							}
						}

						>div.flexCC {
							gap: 10px;
						}

						img {
							max-width: 60px;
						}
					}
				}
			}

			.colorChip {
				display: flex;
				flex-direction: column;
				gap: 6px;
				font-size: 14px;
				color: var(--Grey-300);
				margin-left: 8px;

				>li {
					display: flex;
					gap: 4px;
					align-items: center;

					&.text {
						font-size: 18px;
						font-weight: 500;
						text-align: left;
					}

					>span {
						display: inline-block;
						width: 16px;
						height: 16px;
						border-radius: 30px;
					}
				}
			}

			.icons {
				display: flex;
				gap: 6px;

				i {
					font-size: 22px;
					cursor: pointer;
					color: var(--Grey-300);
				}

			}

			.editAI {

				.lst {
					display: block;
					height: calc(100% - 100px);
					overflow: auto;
					padding-bottom: 60px;

					.tit p {
						margin-bottom: 10px;
						font-weight: 600;
					}

					div.flexCC {
						height: 100%;
						text-align: center;
						/* font-weight: 600; */
						font-size: 20px;
					}
				}

				.btnWrap {
					width: 100%;
					position: absolute;
					padding-top: 20px;
					bottom: 20px;
					cursor: pointer;
					border-top: 1px solid rgba(255, 255, 255, 0.1);
					background-color: var(--Grey-900);

					.gray5Btn {
						width: 100%;
					}

					p {
						display: flex;
						justify-content: space-between;
						color: var(--white-opacity-70);
						font-size: 14px;
						margin-top: 10px;

						label {
							cursor: pointer;
							font-weight: 500;
						}

						padding-bottom: 10px;
					}

					p:nth-child(2) {
						padding-bottom: 30px;
					}
				}
			}
		}

	}
}

@media (max-width: 1520px) {
	.edit {
		.content {

			.imgWrap {
				/* position: relative; */
				left: 0;
				width: calc(100vw - 330px) !important;


				.flex {
					>div {
						width: calc(100vw - 450px);
					}
				}
			}

			.history {
				right: 20px;
			}

		}
	}

}

@media (max-width: 800px) {
	.edit {
		.content {

			.imgWrap {
				/* position: absolute; */
				/* left: 0; */
				/* width: calc(100vw - 330px) !important; */
				display: flex;
				justify-content: flex-start;
				margin-left: 20px;

				.flex {
					>div {
						width: calc(100vw - 450px);
					}
				}
			}

			.history {}

		}
	}

}