/* page */
.dview-page{
	width: 100%;
}

/* top bar */
.dview-top{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.dview-top__left{
	display:flex;
	align-items:center;
	gap: 10px;
	min-width: 0;
}

.dview-back{
	width: 42px;
	height: 42px;
	border-radius: 12px;
	border: 1px solid #2f3138;
	background: #202226;
	color: #e6e6e6;
	cursor: pointer;

	display:flex;
	align-items:center;
	justify-content:center;
}

.dview-back:hover{
	background:#23242a;
	border-color:#3a3d46;
}

.dview-title{
	font-size: 15px;
	font-weight: 900;
	color:#ffffff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 60vw;
}

/* download buttons */
.dview-top__right{
	display:flex;
	align-items:center;
	gap: 10px;
	flex: 0 0 auto;
}

.dview-dl{
	height: 42px;
	padding: 0 14px;
	border-radius: 12px;

	border: 1px solid #2f3138;
	background: #202226;
	color: #e6e6e6;

	font-size: 13px;
	font-weight: 800;

	display:flex;
	align-items:center;
	gap: 8px;
	cursor: pointer;
}

.dview-dl:hover{
	background:#23242a;
	border-color:#3a3d46;
}

.dview-dl:disabled{
	opacity: 0.45;
	cursor: default;
}


/* workspace */
.dview-work{
	height: calc(100vh - 120px);
	min-height: 520px;
	position: relative;
}

/* canvas */
/* canvas */
.dview-canvas{
	height: 100%;
	border: 1px solid #2a2b30;
	border-radius: 12px;
	background-color: #1b1c20;
	overflow: hidden;

	padding: 16px; /* 도면이 너무 꽉 차 보이지 않게 */

	display:flex;
	align-items:center;
	justify-content:center;

	/* grid (preview only) */
	background-image:
			linear-gradient(to right, rgba(255,255,255,0.01) 1px, transparent 1px),
			linear-gradient(to bottom, rgba(255,255,255,0.01) 1px, transparent 1px),
			linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
			linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
	background-size:
			10px 10px,
			10px 10px,
			50px 50px,
			50px 50px;
}


/* svg image */
.dview-canvas img{
	display:block;
	width: 100%;
	height: 100%;
	max-width: 90%;
	max-height: 90%;
	object-fit: contain;
}

/* empty (centered) */
.dview-empty{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

	width: 520px;
	max-width: calc(100% - 40px);

	padding: 18px 18px;

	border-radius: 14px;
	border: 1px dashed #2f3138;
	background:#1b1c20;
	color:#9fa2a8;

	text-align: center;
	font-size: 13px;
	line-height: 1.5;
}

/* small screens */
@media (max-width: 900px){
	.dview-top{
		flex-direction: column;
		align-items: stretch;
	}

	.dview-top__right{
		justify-content:flex-start;
		flex-wrap: wrap;
	}

	.dview-title{
		max-width: 100%;
	}
	.dview-work{
		height: calc(100vh - 160px);
	}
}


/* svg image */
.dview-canvas img{
	display:block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.dview-canvas{
	padding: 16px;   /* 또는 20px */
}