

.dwz{
	--dwz-line:#D8E0EA; --dwz-navy:#071C35; --dwz-blue:#1E88E5; --dwz-mut:#667085;
	border:1px solid var(--dwz-line); background:#fff;
}
.dwz *{box-sizing:border-box}

.dwz__bar{
	display:flex; flex-wrap:wrap; align-items:center; gap:2px;
	padding:6px 8px; background:#F8FAFC; border-bottom:1px solid var(--dwz-line);
}
.dwz__sep{width:1px; height:20px; margin:0 5px; background:var(--dwz-line)}

.dwz-b{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:30px; height:30px; padding:0 7px;
	border:1px solid transparent; border-radius:0;
	background:transparent; color:#344054; font:inherit; font-size:13px; line-height:1;
	cursor:pointer; transition:background-color .15s ease, border-color .15s ease;
}
.dwz-b:hover{background:#E8EEF6}
.dwz-b i{font-size:16px; line-height:1}
.dwz-b.is-on{background:var(--dwz-navy); border-color:var(--dwz-navy); color:#fff}
.dwz-b.is-right{margin-left:auto; font-size:12px; letter-spacing:.02em}
.dwz-b.is-text{min-width:0; height:28px; border:1px solid var(--dwz-line); background:#fff; font-size:12px}
.dwz-b.is-text:hover{border-color:#B7C4D4}

.dwz-sel{
	height:30px; padding:0 6px; border:1px solid var(--dwz-line); border-radius:0;
	background:#fff; color:#344054; font:inherit; font-size:12px; cursor:pointer;
}

.dwz-color{
	position:relative; display:inline-flex; align-items:center; justify-content:center;
	min-width:30px; height:30px; cursor:pointer;
}
.dwz-color:hover{background:#E8EEF6}
.dwz-color i{font-size:16px; color:#344054; pointer-events:none}
.dwz-color input{
	position:absolute; left:4px; right:4px; bottom:3px; width:auto; height:5px;
	padding:0; border:0; background:none; cursor:pointer;
}

.dwz__ask{
	display:flex; flex-wrap:wrap; align-items:center; gap:8px;
	padding:8px 10px; background:#EFF6FF; border-bottom:1px solid var(--dwz-line);
	color:#1E3A8A; font-size:12.5px;
}
.dwz__ask[hidden]{display:none}
.dwz__ask input[type=text]{
	flex:1 1 200px; min-width:0; height:30px; padding:0 9px;
	border:1px solid #BFDBFE; border-radius:0; background:#fff; color:#111827; font:inherit; font-size:13px;
}

.dwz__area{
	min-height:180px; max-height:340px; overflow-y:auto;
	padding:14px; color:#111827; font-size:15px; line-height:1.7; word-break:keep-all; outline:none;
}
.dwz__area:focus{box-shadow:inset 0 0 0 2px rgba(30,136,229,.18)}
.dwz__area:empty::before{content:'내용을 입력하십시오.'; color:#98A2B3}
.dwz__area > *:first-child{margin-top:0}
.dwz__area > *:last-child{margin-bottom:0}
.dwz__area h2{margin:.6em 0 .4em; font-size:1.5em; font-weight:700; line-height:1.35}
.dwz__area h3{margin:.6em 0 .4em; font-size:1.25em; font-weight:700; line-height:1.4}
.dwz__area h4{margin:.6em 0 .4em; font-size:1.08em; font-weight:700; line-height:1.45}
.dwz__area p{margin:0 0 .6em}
.dwz__area ul{margin:0 0 .6em; padding-left:1.3em; list-style:disc}
.dwz__area ol{margin:0 0 .6em; padding-left:1.4em; list-style:decimal}
.dwz__area a{color:var(--dwz-blue); text-decoration:underline}
.dwz__area img{max-width:100%; height:auto}

.dwz.is-source .dwz__area{display:none}
.dwz.is-source .dwz__bar .dwz-b:not(.is-right),
.dwz.is-source .dwz__bar .dwz-sel,
.dwz.is-source .dwz__bar .dwz-color,
.dwz.is-source .dwz__bar .dwz__sep{opacity:.35; pointer-events:none}
.dwz .dwz__src{
	display:block; width:100%; min-height:180px; padding:12px 14px;
	border:0; border-radius:0; background:#0F172A; color:#E2E8F0;
	font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; line-height:1.65;
	resize:vertical; outline:none;
}
.dwz .dwz__src[hidden]{display:none}
