/*
 * 상품 상세설명 에디터
 */

.simple-editor{
	margin:10px 0;
	width:100%;
	color:#222;
	background-color:#fff;
	border:1px solid #ccc;
	border-radius:5px;
	box-sizing:border-box;
}

.simple-editor *,
.simple-editor *::before,
.simple-editor *::after{
	box-sizing:border-box;
}

.simple-editor-toolbar{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:4px;
	padding:8px;
	background-color:#f5f6f8;
	border-bottom:1px solid #ccc;
	border-radius:5px 5px 0 0;
}

.simple-editor-toolbar button,
.simple-editor-toolbar select{
	height:32px;
	padding:0 10px;
	color:#333;
	font-family:inherit;
	font-size:12px;
	background-color:#fff;
	border:1px solid #ccc;
	border-radius:4px;
	outline:none;
	cursor:pointer;
}

.simple-editor-toolbar button:hover,
.simple-editor-toolbar select:hover{
	background-color:#eee;
	border-color:#999;
}

.simple-editor-toolbar button.is-active{
	color:#fff;
	background-color:#222;
	border-color:#222;
}

.simple-editor-toolbar select{
	min-width:90px;
}

.simple-editor-divider{
	display:block;
	flex:0 0 1px;
	width:1px;
	height:22px;
	margin:0 4px;
	background-color:#ccc;
}

.simple-editor-color{
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:35px;
	height:32px;
	font-weight:bold;
	background-color:#fff;
	border:1px solid #ccc;
	border-radius:4px;
	cursor:pointer;
}

.simple-editor-color:hover{
	background-color:#eee;
	border-color:#999;
}

.simple-editor-color input{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	opacity:0;
	cursor:pointer;
}

.simple-editor-status{
	display:flex;
	align-items:center;
	min-height:30px;
	padding:5px 10px;
	font-size:12px;
	color:#777;
	background-color:#fafafa;
	border-bottom:1px solid #e5e5e5;
}

.simple-editor-status.is-loading{
	color:#8a5a00;
	background-color:#fff9e6;
}

.simple-editor-status.is-error{
	color:#b42318;
	background-color:#fff5f5;
}

.simple-editor-status.is-success{
	color:#087857;
	background-color:#f1fcf7;
}

.simple-editor-content{
	width:100%;
	height:400px;
	padding:20px;
	overflow-x:hidden;
	overflow-y:auto;
	color:#222;
	line-height:1.7;
	word-break:break-word;
	background-color:#fff;
	outline:none;
}

.simple-editor-content:empty::before{
	color:#aaa;
	content:"상품 상세설명을 입력해주세요.";
}

/* 일반 문단은 기존처럼 간격 유지 */
.simple-editor-content p{
	margin:0 0 15px;
	padding:0;
}

/* 제목 */
.simple-editor-content h2{
	margin:25px 0 12px;
	font-size:26px;
	line-height:1.4;
}

.simple-editor-content h3{
	margin:22px 0 10px;
	font-size:22px;
	line-height:1.4;
}

.simple-editor-content h4{
	margin:20px 0 10px;
	font-size:18px;
	line-height:1.4;
}

/* 목록 */
.simple-editor-content ul,
.simple-editor-content ol{
	padding-left:30px;
	margin:10px 0 15px;
}

/* 링크 */
.simple-editor-content a{
	color:#1c5ca8;
	text-decoration:underline;
}

/* 일반 이미지 */
.simple-editor-content img{
	max-width:100%;
	height:auto;
	vertical-align:top;
	cursor:pointer;
}

/*
 * 이미지 문단만 간격 제거
 * 일반 엔터 문단은 p 기본 margin을 그대로 사용합니다.
 */
.simple-editor-content .simple-editor-image-row{
	display:block;
	min-height:0;
	margin:0;
	padding:0;
	line-height:0;
	font-size:0;
}

.simple-editor-content .simple-editor-image-row + .simple-editor-image-row{
	margin-top:0;
}

.simple-editor-content .simple-editor-image-row img{
	display:block;
	width:auto;
	max-width:100%;
	height:auto;
	margin:0;
	padding:0;
	vertical-align:top;
}

/* 선택된 이미지 */
.simple-editor-content img.is-selected{
	outline:3px solid #222;
	outline-offset:-3px;
}

/* 드래그 중 */
.simple-editor-content.is-dragover{
	background-color:#f5f7fa;
	box-shadow:inset 0 0 0 3px #777;
}

/* HTML 소스 편집 영역 */
.simple-editor-source{
	display:none;
	width:100%;
	height:400px;
	padding:15px;
	overflow-x:auto;
	overflow-y:auto;
	color:#eee;
	font-family:Consolas, Monaco, monospace;
	font-size:13px;
	line-height:1.6;
	white-space:pre-wrap;
	background-color:#222;
	border:0;
	outline:none;
	resize:none;
}

/* HTML 모드 */
.simple-editor.is-source-mode .simple-editor-content{
	display:none;
}

.simple-editor.is-source-mode .simple-editor-source{
	display:block;
}

/* 미리보기 레이어 */
.simple-editor-preview-layer{
	display:none;
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.82);
	z-index:99999;
	overflow-x:hidden;
	overflow-y:auto;
}

.simple-editor-preview-layer.is-active{
	display:block;
}

.simple-editor-preview-head{
	position:sticky;
	top:0;
	z-index:2;
	width:100%;
	height:54px;
	background-color:#111;
	border-bottom:1px solid #333;
}

.simple-editor-preview-head-inner{
	width:100%;
	max-width:1160px;
	margin:0 auto;
	padding:10px 17px;
	box-sizing:border-box;
	text-align:right;
}

.simple-editor-preview-close{
	display:inline-block;
	height:34px;
	padding:0 15px;
	color:#fff;
	font-size:13px;
	font-family:inherit;
	background-color:#222;
	border:1px solid #666;
	border-radius:3px;
	outline:none;
	cursor:pointer;
}

.simple-editor-preview-close:hover{
	background-color:#000;
	border-color:#999;
}

.simple-editor-preview-body{
	width:100%;
	max-width:1160px;
	margin:0 auto;
	padding:17px;
	box-sizing:border-box;
}

.simple-editor-preview-content{
	width:100%;
	min-height:500px;
	padding:30px;
	color:#222;
	font-size:15px;
	line-height:1.7;
	word-break:break-word;
	background-color:#fff;
	box-sizing:border-box;
}

.simple-editor-preview-content p{
	margin:0 0 15px;
	padding:0;
}

.simple-editor-preview-content h2{
	margin:25px 0 12px;
	font-size:26px;
	line-height:1.4;
}

.simple-editor-preview-content h3{
	margin:22px 0 10px;
	font-size:22px;
	line-height:1.4;
}

.simple-editor-preview-content h4{
	margin:20px 0 10px;
	font-size:18px;
	line-height:1.4;
}

.simple-editor-preview-content ul,
.simple-editor-preview-content ol{
	padding-left:30px;
	margin:10px 0 15px;
}

.simple-editor-preview-content a{
	color:#1c5ca8;
	text-decoration:underline;
}

.simple-editor-preview-content img{
	max-width:100%;
	height:auto;
	vertical-align:top;
}

.simple-editor-preview-content .simple-editor-image-row{
	display:block;
	min-height:0;
	margin:0;
	padding:0;
	line-height:0;
	font-size:0;
}

.simple-editor-preview-content .simple-editor-image-row + .simple-editor-image-row{
	margin-top:0;
}

.simple-editor-preview-content .simple-editor-image-row img{
	display:block;
	width:auto;
	max-width:100%;
	height:auto;
	margin:0;
	padding:0;
	vertical-align:top;
}

@media (max-width:767px) {
	.simple-editor-content{
		height:320px;
		padding:14px;
		font-size:14px;
	}

	.simple-editor-source{
		height:320px;
	}

	.simple-editor-toolbar{
		padding:6px;
		gap:3px;
	}

	.simple-editor-toolbar button,
	.simple-editor-toolbar select{
		height:30px;
		padding:0 8px;
		font-size:12px;
	}

	.simple-editor-toolbar select{
		min-width:78px;
	}

	.simple-editor-preview-body{
		padding:10px;
	}

	.simple-editor-preview-content{
		min-height:400px;
		padding:18px;
		font-size:14px;
	}
}