h1 { text-align: center; }
model-viewer {
	width: 100%;
	height: calc(100dvh - 290px);
	display: block;
	position: relative;
	.view360 {
		position: absolute; top: 10px; right: 10px;
		width: 40px; height: 29px;
	}
	&::part(default-ar-button) {
		display: none;
	}
	&::part(default-progress-bar) {
		top: auto; bottom: 0px;
	}
}
#modelInfoPanel {
	display: flex; flex-direction: column; gap: 3px; margin: 10px 0px 30px 0px;
	.itemName { font-weight: bold; text-align: center; }
	.selectOpt {
		text-align: center;
		&:empty { display: none; }
	}
	.button {
		text-align: center;
		.ar-button {
			margin-top: 10px;
			padding: 6px 50px;
			border-radius: 24px;
			border: 0;
			color: #ffffff; background: #842c37;
			font-size: 16px;
			cursor: pointer;
			display: inline-flex; align-items: center; gap: 15px;
			img { width: 36px; height: 31px; }
			span { white-space: nowrap; }
		}
	}
}
#qrPanel {
	display: none; z-index: var(--z-overlay);
	&.show { display: block; }
	.bg {
		position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.box {
		position: fixed; top: 50%; left: calc((100% - (950px - 725px)) / 2); transform: translate(-50%, -50%);
		display: flex; flex-direction: column; gap: 10px;
		color: #000000; background-color: #ffffff;
		padding: 20px; border-radius: 10px;
		.text {}
		.qr { text-align: center; }
	}
}