.dpop{
	--dp-navy:#071C35; --dp-navy-2:#0E2A4D; --dp-blue:#1E88E5;
	--dp-line:#E5EAF0; --dp-line-2:#D8E0EA; --dp-mut:#667085; --dp-fg:#111827; --dp-bg:#F4F7FA;
	display:flex; flex-direction:column; flex:1 1 auto; min-height:0;
	color:var(--dp-fg); font-size:14px; line-height:1.6;
	font-family:Pretendard,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
.dpop *{box-sizing:border-box}

.dpop > form{display:flex; flex-direction:column; flex:1 1 auto; min-height:0; overflow:hidden}
.dpop__scroll{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:22px 30px 26px; background:var(--dp-bg)}

.dpop-notice{
	flex:0 0 auto; margin:0 20px 15px 20px; padding:14px 16px;
	border:1px solid #bfdbfe; background:#eff6ff; color:#1e3a8a;
	font-weight:600; font-size:13px; line-height:1.55;
}

.dpop-top{
	display:flex; flex-wrap:wrap; align-items:center; gap:12px;
	padding:20px 22px; background:#fff;
	border:1px solid rgba(7,28,53,.08); box-shadow:0 14px 38px rgba(7,28,53,.06);
}
.dpop-top__sp{flex:1 1 auto}
.dpop-hint{margin:10px 0 0; color:var(--dp-mut); font-size:13px; line-height:1.65}
.dpop-top + .dpop-hint{margin:10px 2px 0}

.dpop-chk{
	display:inline-flex; align-items:center; gap:10px;
	min-height:44px; padding:0 14px;
	border:1px solid var(--dp-line); background:#FAFCFE; color:#344054;
	font-size:13px; white-space:nowrap; cursor:pointer;
}
.dpop-chk input{width:18px; height:18px; margin:0; accent-color:var(--dp-blue)}

.dpop-chk.is-mini{min-height:32px; height:32px; padding:0 10px; gap:6px; font-size:12px}
.dpop-chk.is-mini input{width:15px; height:15px}

.dpop-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:6px;
	height:44px; padding:0 18px; border:1px solid var(--dp-line-2); border-radius:0;
	background:#fff; color:#344054; font:inherit; font-size:13px; cursor:pointer;
	transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.dpop-btn:hover{background:#EEF3F8; border-color:#B7C4D4}
.dpop-btn.is-mini{height:32px; padding:0 10px; font-size:12px}
.dpop-btn.is-primary{background:var(--dp-navy); border-color:var(--dp-navy); color:#fff}
.dpop-btn.is-primary:hover{background:var(--dp-navy-2); border-color:var(--dp-navy-2); color:#fff}
.dpop-btn.is-ghost{background:#EEF3F8; border-color:#EEF3F8; color:#344054}
.dpop-btn.is-danger{color:#DC2626}
.dpop-btn.is-danger:hover{background:#FEF2F2; border-color:#FCA5A5; color:#DC2626}
.dpop-btn.is-lg{height:48px; padding:0 26px; font-size:14px}
.dpop-btn[disabled]{opacity:.55; cursor:default}

.dpop-list{margin-top:16px; display:flex; flex-direction:column; gap:12px}
.dpop-it{
	background:#fff; border:1px solid rgba(7,28,53,.08);
	box-shadow:0 14px 38px rgba(7,28,53,.06);
}
.dpop-it__hd{
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	padding:12px 16px; background:#fff; border-bottom:1px solid transparent;
}
.dpop-it.is-open .dpop-it__hd{border-bottom-color:var(--dp-line)}

/* 팝업이 지금 화면에 표시되는 상태인지 알려 주는 표시입니다. */
.dpop-state{
	flex:0 0 auto; order:-1;
	padding:4px 10px; border-radius:999px;
	font-size:12px; font-weight:700; line-height:1.4; white-space:nowrap;
}
.dpop-state.is-on{background:#E7F6EC; color:#1B7F3B}
.dpop-state.is-wait{background:#FFF4E0; color:#9A6300}
.dpop-state.is-done{background:#FDECEC; color:#B3261E}
.dpop-state.is-off{background:#EEF1F5; color:#5B6472}
.dpop-it__sum{
	display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0;
	background:none; border:0; padding:0; font:inherit; font-size:15px; font-weight:700;
	color:var(--dp-navy); text-align:left; cursor:pointer;
}
.dpop-it__sum strong{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700}
.dpop-it__sum i{transition:transform .2s ease; color:var(--dp-mut); font-size:18px}
.dpop-it.is-open .dpop-it__sum i{transform:rotate(180deg)}
.dpop-it__act{display:flex; align-items:center; gap:6px; flex:0 0 auto}
.dpop-btn.is-mini i{font-size:15px; line-height:1}

.dpop-it__grip{
	display:flex; align-items:center; justify-content:center; flex:0 0 auto;
	width:26px; height:32px; margin-right:-4px;
	color:#98A2B3; font-size:17px; cursor:grab; user-select:none;
}
.dpop-it__grip:hover{color:var(--dp-navy)}
.dpop-it__grip:active{cursor:grabbing}

.dpop-it.is-drag{opacity:.35}
.dpop-it--ph{
	background:#EEF3F8; border:1px dashed #94A3B8; box-shadow:none;
}
.dpop-it--ghost{
	position:fixed; z-index:99950; left:0; top:0; margin:0;
	transform:translate(-24px,-18px) rotate(-1deg);
	pointer-events:none; opacity:.95; box-shadow:0 22px 50px rgba(7,28,53,.28);
}
.dpop-it--ghost .dpop-it__hd{border-bottom:0}
.dpop-it__bd{display:none; padding:22px}
.dpop-it.is-open .dpop-it__bd{display:block}

.dpop-it[data-type="image"] [data-pop-content]{display:none}
.dpop-it[data-type="editor"] [data-pop-imgs]{display:none}

.dpop-row{display:grid; grid-template-columns:1fr 1fr; gap:20px 18px; align-items:start}
.dpop-row.is-4{grid-template-columns:repeat(4,1fr)}

.dpop-row.is-off, .dpop-f.is-off{opacity:.45}
.dpop-row + .dpop-row{margin-top:20px}

.dpop-f{display:grid; gap:10px; color:#344054; font-size:13px}
.dpop-f > span{font-size:13px; color:#344054}
.dpop-f input[type=text],
.dpop-f input[type=number],
.dpop-f input[type=datetime-local],
.dpop-f select{
	width:100%; height:48px; padding:0 14px;
	border:1px solid var(--dp-line-2); border-radius:0; background:#fff; color:var(--dp-fg);
	font:inherit; font-size:15px; outline:none; appearance:none;
	transition:border-color .2s ease, box-shadow .2s ease;
}
.dpop-f select{
	padding-right:36px; cursor:pointer;
	background-image:linear-gradient(45deg,transparent 50%,#667085 50%),linear-gradient(135deg,#667085 50%,transparent 50%);
	background-position:calc(100% - 18px) 21px, calc(100% - 13px) 21px;
	background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.dpop-f input:focus,
.dpop-f select:focus{border-color:var(--dp-blue); box-shadow:0 0 0 4px rgba(30,136,229,.12)}
.dpop-f input::placeholder{color:#98A2B3}
.dpop-f input[type=file]{
	width:100%; padding:12px 14px; border:1px dashed var(--dp-line-2); background:#FAFCFE;
	color:#475467; font-size:13px;
}

.dpop-dt{position:relative; display:block}
.dpop-dt input{padding-right:42px!important}
.dpop-dt__x{
	position:absolute; right:1px; top:1px; width:38px; height:46px;
	border:0; background:none; color:#98A2B3; font-size:15px; line-height:1; cursor:pointer;
}
.dpop-dt__x:hover{color:#DC2626}

.dpop-f.is-wide{grid-column:1 / -1}

.dpop-f + .dpop-f{margin-top:20px}
.dpop-row > .dpop-f + .dpop-f{margin-top:0}

.dpop-sec + .dpop-sec{margin-top:20px; padding-top:20px; border-top:1px solid var(--dp-line)}
.dpop-sec__hd{
	display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:14px;
}
.dpop-sec__hd > strong{
	display:inline-flex; align-items:center; gap:7px;
	color:var(--dp-navy); font-size:13px; font-weight:700; letter-spacing:-.01em;
}
.dpop-sec__hd > strong i{color:var(--dp-blue); font-size:16px; line-height:1}

.dpop-sec__note{flex:1 1 200px; color:var(--dp-mut); font-size:12px; line-height:1.55}
.dpop-sec__hd .dpop-btn{margin-left:auto}

.dpop-img{padding:16px; background:#F8FAFC; border:1px solid var(--dp-line)}
.dpop-img + .dpop-img{margin-top:10px}
.dpop-img__hd{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px}
.dpop-img__hd strong{color:#344054; font-size:13px}
.dpop-img__body{display:grid; grid-template-columns:190px minmax(0,1fr); gap:16px; align-items:start}
.dpop-img__fields{min-width:0}

.dpop-img__pv{
	display:flex; align-items:center; justify-content:center;
	height:128px; padding:10px;
	border:1px dashed var(--dp-line-2); background:#fff center/contain no-repeat;
	color:#98A2B3; font-size:12px; text-align:center;
}
.dpop-img__pv.is-on{border-style:solid; background-color:#EEF3F8}
.dpop-img__pv.is-on .dpop-img__ph{display:none}
.dpop-img__ph{display:inline-flex; flex-direction:column; align-items:center; gap:6px}
.dpop-img__ph i{font-size:22px; color:#B7C4D4}
.dpop-img .dpop-row{align-items:end}

.dpop-img__fields > .dpop-f + .dpop-f,
.dpop-img__fields > .dpop-f + .dpop-row{margin-top:16px}

.dpop-foot{
	flex:0 0 auto; display:flex; align-items:center; gap:12px;
	padding:14px 30px; background:#fff; border-top:1px solid rgba(7,28,53,.09);
}
.dpop-msg{margin:0; flex:1 1 auto; font-size:13px; color:var(--dp-mut)}
.dpop-msg.is-ok{color:#15803D}
.dpop-msg.is-err{color:#DC2626}

@media (max-width:768px){
	.dpop__scroll{padding:18px 16px 22px}
	.dpop-notice{margin:0 16px 15px 16px}
	.dpop-foot{padding:12px 16px}
	.dpop-row, .dpop-row.is-4{grid-template-columns:1fr}
	.dpop-img__body{grid-template-columns:1fr}
	.dpop-it__hd{flex-wrap:wrap}
}