/**
 * @author parkyk
 * @since 2026-04-02
 * @description HTML 편집기 스타일
 *
 * @modified 2026-04-02 parkyk - 셀렉트, 색상 팔레트, 코드블록 스타일 추가
 */

/******************/
/* 편집기 컨테이너 */
/******************/
._he_wrap {
	border: 1px solid #ccc;
	border-radius: 3px;
	background: #fff;
}
._he_wrap:focus-within {
	border-color: #86b7fe;
}

/******************/
/* 툴바 */
/******************/
._he_toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	padding: 0.25rem;
	border-bottom: 1px solid #ddd;
	background: #f8f9fa;
	border-radius: 3px 3px 0 0;
}
._he_toolbar button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.75rem;
	height: 1.75rem;
	padding: 0 0.25rem;
	border: 1px solid transparent;
	border-radius: 3px;
	background: none;
	cursor: pointer;
	color: #333;
}
._he_toolbar button:hover {
	background: #e2e6ea;
	border-color: #ccc;
}
._he_toolbar button._active {
	background: #d0d4d8;
	border-color: #adb5bd;
}
._he_toolbar button:disabled,
._he_toolbar button:disabled:hover {
	opacity: 0.35;
	cursor: default;
	background: none;
	border-color: transparent;
}
/* 툴바 셀렉트 (글꼴/크기) */
._he_select {
	height: 1.75rem;
	padding: 0 0.25rem;
	border: 1px solid #ccc;
	border-radius: 3px;
	background: #fff;
	cursor: pointer;
	outline: none;
}
._he_select:disabled {
	opacity: 0.35;
	cursor: default;
}
/* 구분선 */
._he_sep {
	width: 1px;
	margin: 0.125rem 0.25rem;
	background: #ccc;
}

/******************/
/* 색상 팔레트 */
/******************/
._he_color_popup {
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 0.375rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
._he_color_grid {
	display: grid;
	grid-template-columns: repeat(7, 1.25rem);
	gap: 2px;
}
._he_color_swatch {
	width: 1.25rem;
	height: 1.25rem;
	border: 1px solid #ddd;
	border-radius: 2px;
	cursor: pointer;
}
._he_color_swatch:hover {
	border-color: #333;
	transform: scale(1.15);
}

/******************/
/* 편집 영역 */
/******************/
._he_body {
	padding: 0.5rem;
	outline: none;
	overflow-y: auto;
}
._he_body:empty::before {
	content: attr(data-placeholder);
	color: #999;
}
/* 편집 영역 내부 요소 기본 스타일 */
._he_body h2 { margin: 0.5rem 0 0.25rem; }
._he_body h3 { margin: 0.5rem 0 0.25rem; }
._he_body p { margin: 0 0 0.25rem; }
._he_body ul,
._he_body ol { margin: 0.25rem 0; padding-left: 1.5rem; }
._he_body a { color: #0d6efd; text-decoration: underline; }
._he_body blockquote {
	margin: 0.25rem 0;
	padding: 0.25rem 0.75rem;
	border-left: 3px solid #ccc;
	color: #666;
}
._he_body pre {
	margin: 0.25rem 0;
	padding: 0.5rem 0.75rem;
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 3px;
	font-family: "Consolas", "Courier New", monospace;
	white-space: pre-wrap;
	word-break: break-all;
}
._he_body hr {
	border: none;
	border-top: 1px solid #ccc;
	margin: 0.5rem 0;
}
._he_body table {
	border-collapse: collapse;
	margin: 0.25rem 0;
}
._he_body table td,
._he_body table th {
	border: 1px solid #ccc;
	padding: 0.25rem 0.5rem;
}

/******************/
/* 소스 모드 */
/******************/
._he_source {
	display: none;
	width: 100%;
	border: none;
	padding: 0.5rem;
	outline: none;
	resize: none;
	font-family: "Consolas", "Courier New", monospace;
}