:root {
	--color-accent: #55d;
	--color-active: #aaf;
	--theme-backgroundImage: linear-gradient(#222);
	--theme-backgroundColor: #000;
	--theme-frame0: rgba(0,0,0,0.3);
	--theme-frame1: rgba(255,255,255,0.6);
	--theme-frame2: rgba(255,255,255,0.15);
	--theme-icon: #fff;
	--theme-text: #fff;
}
html {
	background-color: var(--theme-backgroundColor);
	background-image: var(--theme-backgroundImage);
}
body {
	margin: 0;
	box-sizing: border-box:
	font-family: sans-serif;
	font-feature-settings: "palt" 1;
	line-break: strict;
	text-rendering: optimizeSpeed;
}
svg .icon {
	fill: var(--theme-icon);
}
section.stage {
	position: relative;
	&.hidden {
		display: none;
	}
	> main {
		margin-top: 36px;
		display: grid;
		filter: drop-shadow(0 0 20px rgba(0,0,0,0.3));
		> div {
			> figure {
				margin: 0;
				display: grid;
				grid-template-columns: 1fr;
				grid-template-rows: 1fr;
				max-width: 100%;
				max-height: 100%;
				> img {
					grid-area: 1/1/2/2;
					max-width: 100%;
					max-height: 100%;
					user-select: none;
					background-color: #888;
					&:not([src]) {
						display: none;
					}
				}
				> svg {
					grid-area: 1/1/2/2;
					max-width: 100%;
					max-height: 100%;
					user-select: none;
					a {
						cursor: pointer;
						&.hoverOpacity {
							transition: 0.1s;
							&:hover {
								opacity: 0.7;
							}
						}
					}
				}
				> div#spreadTurnOver0 {
					grid-area: 1/1/2/2;
					width: 100%;
					height: 100%;
					user-select: none;
					display: grid;
					&:has(> img:not([src])) {
						display: none;
					}
					> img {
						grid-area: 1/1/2/2;
						display: block;
						width: 100%;
					}
					> div {
						grid-area: 1/1/2/2;
						width: 0%;
						background-image: linear-gradient(to right,rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 80%, rgba(0,0,0,0.2) 85%, rgba(0,0,0,0.3) 90%, rgba(0,0,0,0.2) 95%, rgba(0,0,0,0.4) 100%);
					}
				}
				> div#spreadTurnOver1 {
					grid-area: 1/1/2/2;
					width: 100%;
					height: 100%;
					user-select: none;
					display: grid;
					&:has(> img:not([src])) {
						display: none;
					}
					> img {
						grid-area: 1/1/2/2;
						display: block;
						width: 100%;
					}
					> div {
						grid-area: 1/1/2/2;
						width: 0%;
						background-image: linear-gradient(to left,rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 80%, rgba(0,0,0,0.2) 85%, rgba(0,0,0,0.3) 90%, rgba(0,0,0,0.2) 95%, rgba(0,0,0,0.4) 100%);
					}
				}
			}
		}
	}
	&.scale1 {
		> main {
			grid-template-columns: 50vw 50vw;
			grid-template-rows: calc(100svh - 86px);
			height: calc(100svh - 86px);
			> div {
				height: calc(100svh - 86px);
				display: flex;
				&:nth-of-type(1) {
					justify-self: right;
					text-align: right;
					> figure {
						align-self: center;
						> img {
							justify-self: right;
							text-align: right;
						}
						> svg {
							justify-self: right;
							text-align: right;
						}
					}
				}
				&:nth-of-type(2) {
					justify-self: left;
					> figure {
						align-self: center;
						> img {}
						> svg {}
					}
				}
				> img {
					cursor: pointer;
				}
			}
		}
	}
	&.scale2 {
		height: 100svh;
		max-height: 100svh;
		overflow: hidden;
		> main {
			margin: 0;
			position: absolute;
			left: 0;
			top: 0;
			grid-template-columns: 200vw 200vw;
			cursor: grab;
			> div {
				align-self: center;
				&:nth-of-type(1) {
					justify-self: right;
					text-align: right;
					> figure {
						> img {
							max-width: none;
							max-height: none;
						}
					}
				}
				&:nth-of-type(2) {
					justify-self: left;
					> figure {
						> img {
							max-width: none;
							max-height: none;
						}
					}
				}
			}
		}
	}
	&.scale1NoBind {
		> main {
			grid-template-columns: 100vw;
			grid-template-rows: calc(100svh - 120px);
			height: calc(100svh - 120px);
			> div {
				height: calc(100svh - 120px);
				display: flex;
				&:nth-of-type(1) {
					justify-self: center;
					text-align: center;
					> img {
						align-self: center;
					}
				}
				&:nth-of-type(2) {
					display: none;
				}
				> img {}
			}
		}
	}
	&.scale2NoBind {
		height: 100svh;
		max-height: 100svh;
		overflow: hidden;
		> main {
			margin-top: 0px;
			position: absolute;
			left: 0;
			top: 36px;
			grid-template-columns: 200vw;
			cursor: grab;
			> div {
				align-self: center;
				&:nth-of-type(1) {
					justify-self: center;
					text-align: center;
					> img {}
				}
				&:nth-of-type(2) {
					display: none;
				}
			}
		}
	}
}
section.stageTouch {
	margin-top: 36px;
	display: grid;
	row-gap: 10px;
	&.hidden {
		display: none;
	}
	&.bind {
		grid-template-columns: 50vw 50vw;
	}
	&.noBind {
		grid-template-columns: 100vw;
	}
	> figure {
		margin: 0;
		display: grid;
		> img {
			grid-area: 1/1/2/2;
			width: 100%;
			display: block;
		}
		> svg {
			grid-area: 1/1/2/2;
			width: 100%;
			height: auto;
		}
	}
}
header {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 36px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--theme-frame0);
	> button {
		padding-inline: 20px;
		height: 36px;
		border: none;
		background-color: transparent;
		cursor: pointer;
		color: var(--theme-text);
		&.hidden {
			display: none;
		}
		@media (width < 550px) {
			padding-inline: 10px;
		}
		@media (width < 400px) {
			padding-inline: 3px;
		}
		&:hover {
			background-color: var(--theme-frame1);
		}
		> img,svg {
			vertical-align: bottom;
		}
	}
	> #rangeScaleArea {
		display: flex;
		align-items: center;
		width: 170px;
		height: 36px;
		padding: 0px 5px;
		border: none;
		&.hidden {
			display: none;
		}
		@media (width < 470px) {
			display: none;
		}
		&:not(:has(input.hidden)) {
			&:hover {
				background-color: var(--theme-frame1);
			}
		}
		> input {
			&.hidden {
				display: none;
			}
			accent-color: var(--color-accent);
			cursor: pointer;
			width: 160px;
		}
		> div#qualitySign {
			display: flex;
			align-items: center;
			column-gap: 5px;
			&.hidden {
				display: none;
			}
			> svg {
				min-width: 16px;
				animation: loaderRotate 2s linear infinite;
			}
			> span {
				font-size: 0.75rem;
				line-height: 1.2;
				color: var(--theme-text);
			}
		}
	}
	> p {
		font-size: 0.8rem;
		color: var(--theme-text);
		opacity: 0.7;
		&.hidden {
			display: none;
		}
	}
}
@keyframes loaderRotate {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--theme-frame0);
	&.hidden {
		display: none;
	}
	> #pageTitleValue {
		color: var(--theme-text);
		font-size: 0.75rem;
		width: 350px;
		white-space: nowrap;
		overflow: hidden;
		padding: 6px 3px 0 3px;
		height: 50px;
		box-sizing: border-box;
		&:hover {
			background-color: var(--theme-frame1);
		}
		@media (width < 900px) {
			display: none;
		}
	}
	> #pagePdfValue {
		font-size: 0.75rem;
		width: 2rem;
		min-width: 2rem;
		white-space: nowrap;
		overflow: hidden;
		padding: 6px 3px 0 3px;
		height: 50px;
		box-sizing: border-box;
		&:hover {
			background-color: var(--theme-frame1);
		}
		> div {
			> a {
				text-decoration: none;
				margin-right: 5px;
				padding: 1px 2px;
				color: var(--color-accent);
				&:hover {
					color: var(--theme-text);
					background-color: var(--theme-frame2);
				}
			}
		}
	}
	> #pageNameValue {
		font-size: 0.75rem;
		width: 2rem;
		min-width: 2rem;
		white-space: nowrap;
		overflow: hidden;
		padding: 6px 3px 0 3px;
		height: 50px;
		box-sizing: border-box;
		&:hover {
			background-color: var(--theme-frame1);
		}
		> div {
			color: var(--theme-text);
			text-decoration: none;
			cursor: pointer;
		}
	}
	> .rangePage {
		display: flex;
		align-items: center;
		column-gap: 2px;
		padding: 2px 3px 0 3px;
		height: 50px;
		box-sizing: border-box;
		&:hover {
			background-color: var(--theme-frame1);
		}
		> input {
			accent-color: var(--color-accent);
			cursor: pointer;
			outline: 0;
			width: 160px;
			@media (width < 550px) {
				width: 100px;
			}
			@media (width < 400px) {
				display: none;
			}
		}
		> div {
			font-size: 0.8rem;
			color: var(--theme-text);
			cursor: pointer;
		}
	}
	> button {
		border: none;
		padding-inline: 20px;
		border: none;
		cursor: pointer;
		background-color: transparent;
		height: 50px;
		box-sizing: border-box;
		&:hover {
			background-color: var(--theme-frame1);
		}
		&:active {
			border-color: var(--color-active);
		}
		> img,svg {
			vertical-align: bottom;
		}
		@media (width < 500px) {
			padding-inline: 10px;
		}
	}
}
dialog#modalView {
	background-color: var(--theme-backgroundColor);
	background-image: var(--theme-backgroundImage);
	scrollbar-color: var(--color-accent) var(--theme-backgroundColor);
	width: 100vw;
	height: 100svh;
	margin: 10px;
	padding: 0;
	border: solid 1px var(--color-accent);
	overflow: hidden;
	&::backdrop {
		background-color: rgba(0,0,0,0);
	}
	> div {
		> #modalViewClose {
			background-color: var(--color-accent);
			color: #fff;
			font-size: 0.9rem;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 40px;
			user-select: none;
			cursor: pointer;
			opacity: 0.5;
			&:hover {
				opacity: 0.8;
			}
		}
		> .control {
			padding: 10px;
			display: grid;
			grid-template-columns: 80px 80px 20px 1fr;
			column-gap: 10px;
			align-items: center;
			@media (width < 500px) {
				grid-template-columns: 45px 45px 18px 1fr;
			}
			> div {
				> input[type="radio"] {
					display: none;
					&:checked + label {
						background-color: var(--color-accent);
						.icon {
							fill: #fff;
						}
					}
				}
				> label {
					display: block;
					height: 36px;
					border-radius: 5px 0 5px 0;
					border: solid 1px var(--color-accent);
					background-color: transparent;
					cursor: pointer;
					display: flex;
					justify-content: center;
					align-items: center;
					user-select: none;
					&:active {
						border-color: var(--color-active);
					}
					> img,svg {
						vertical-align: bottom;
					}
				}
			}
			> svg {}
			> input[type="text"] {
				height: 30px;
				width: calc(100% - 32px);
				outline: none;
				border: solid 1px var(--color-accent);
				border-radius: 5px 0 5px 0;
				background-color: var(--theme-frame2);
				color: var(--theme-text);
				padding-inline: 15px;
			}
		}
		> #modalViewArea {
			margin-top: 10px;
			padding: 10px;
			height: calc(98vh - 150px);
			overflow-y: auto;
			border: solid 1px #444;
			> dl.list {
				margin: 0;
				> div {
					&:hover {
						background-color: var(--color-accent);
						color: #fff;
					}
					&:nth-of-type(1) {
						border-top: solid 1px var(--theme-frame2);
					}
					border-bottom: solid 1px var(--theme-frame2);
					display: grid;
					grid-template-columns: 3em 3em 1fr;
					padding-block: 1px;
					cursor: pointer;
					font-size: 0.8rem;
					color: var(--theme-text);
					@media (width < 700px) {
						font-size: 0.7rem;
					}
					> dt:nth-of-type(1) {
						opacity: 0.3;
					}
					> dt:nth-of-type(2) {
					}
					> dd {
						margin: 0;
					}
				}
				> p {
					color: var(--color-active);
					text-align: center;
				}
			}
			> dl.grid {
				margin: 0;
				display: flex;
				flex-wrap: wrap;
				column-gap: 5px;
				row-gap: 10px;
				> div {
					width: 150px;
					cursor: pointer;
					font-size: 0.8rem;
					color: var(--theme-text);
					background-color: var(--theme-frame2);
					&:hover {
						background-color: var(--color-accent);
						color: #fff;
					}
					@media (width < 700px) {
						font-size: 0.7rem;
					}
					> dt {
						> img {
							width: 150px;
							display: block;
						}
					}
					> dd:nth-of-type(1) {
						margin: 0;
						padding: 2px 5px 0 5px;
						display: grid;
						grid-template-columns: 1fr 1fr;
						> small {
							font-size: inherit;
							opacity: 0.5;
						}
						> span {
						}
					}
					> dd:nth-of-type(2) {
						margin: 0;
						padding: 2px 5px 2px 5px;
					}
				}
				> p {
					color: var(--color-active);
					text-align: center;
					background-color: var(--theme-frame2);
					padding: 20px;
				}
			}
		}
	}
}
dialog#modalConfig {
	background-color: var(--theme-backgroundColor);
	background-image: var(--theme-backgroundImage);
	scrollbar-color: var(--color-accent) var(--theme-backgroundColor);
	margin-top: 10px;
	padding: 0;
	border: solid 1px var(--color-accent);
	overflow: hidden;
	&::backdrop {
		background-color: rgba(0,0,0,0);
	}
	> div {
		> div.close {
			display: flex;
			align-items: center;
			> #modalConfigClose {
				flex-grow: 1;
				background-color: var(--color-accent);
				color: #fff;
				font-size: 0.8rem;
				line-height: 1;
				text-align: center;
				user-select: none;
				cursor: pointer;
				padding: 14px;
				opacity: 0.5;
				&:hover {
					opacity: 0.8;
				}
			}
			> button {
				height: 40px;
				width: 40px;
				border: none;
				background-color: var(--theme-frame1);
				cursor: pointer;
				color: var(--theme-text);
				&:active {
					border-color: var(--color-active);
				}
				&:hover {
					opacity: 0.8;
				}
				> svg {
					vertical-align: bottom;
				}
			}
		}
		> .content {
			padding: 0 10px 10px 10px;
			overflow-y: auto;
			height: calc(98vh - 80px);
			> .control {
				margin-top: 10px;
				display: flex;
				flex-wrap: wrap;
				column-gap: 5px;
				row-gap: 5px;
				align-items: center;
				> p {
					color: var(--theme-text);
					font-size: 0.9rem;
					@media (width < 820px) {
						width: 100%;
						margin-bottom: 5px;
					}
				}
				> div {
					> input[type="radio"] {
						display: none;
						&:checked + label {
							background-color: var(--color-accent);
							color: #fff;
						}
					}
					> label {
						height: 29px;
						color: var(--theme-text);
						font-size: 0.9rem;
						padding-inline: 18px;
						border-radius: 5px 0 5px 0;
						border: solid 1px var(--color-accent);
						background-color: transparent;
						cursor: pointer;
						display: flex;
						justify-content: center;
						align-items: center;
						user-select: none;
						&:active {
							border-color: var(--color-active);
						}
					}
					> input[type="button"] {
						display: none;
					}
				}
			}
			> .note {
				> p {
					margin: 0;
					color: var(--theme-text);
					opacity: 0.8;
					font-size: 0.8rem;
					line-height: 1.7;
				}
			}
			> .usage {
				margin-top: 30px;
				> p {
					margin: 0;
					color: var(--theme-text);
					opacity: 0.8;
					font-size: 0.8rem;
					line-height: 1.7;
				}
			}
			> .version {
				margin-top: 30px;
				text-align: center;
				> p {
					margin: 0;
					color: var(--theme-text);
					opacity: 0.8;
					font-size: 0.7rem;
				}
			}
			> .copyright {
				margin-top: 5px;
				text-align: center;
				> p {
					margin: 0;
					color: var(--theme-text);
					opacity: 0.6;
					font-size: 0.7rem;
				}
			}
		}
	}
}
dialog#modalShare {
	background-color: var(--theme-backgroundColor);
	background-image: var(--theme-backgroundImage);
	margin: 10px auto auto auto;
	padding: 0;
	border: solid 1px var(--color-accent);
	&::backdrop {
		background-color: rgba(0,0,0,0);
	}
	> div {
		> #modalShareClose {
			background-color: var(--color-accent);
			color: #fff;
			font-size: 0.7rem;
			line-height: 1;
			text-align: center;
			user-select: none;
			cursor: pointer;
			padding: 10px;
			opacity: 0.5;
			&:hover {
				opacity: 0.8;
			}
		}
		> div {
			padding: 0 10px 10px 10px;
			> .modalShareLink {
				margin-top: 20px;
				> div {
					display: flex;
					align-items: flex-start;
					column-gap: 12px;
					> div#modalShareUrl {
						font-size: 0.9rem;
						line-height: 1;
						color: var(--theme-text);
					}
					> button {
						cursor: pointer;
						background-color: transparent;
						border: none;
					}
				}
				> p {
					margin-block: 2px 0;
					font-size: 0.9rem;
					line-height: 1;
					color: var(--theme-text);
					min-height: 1rem;
				}
			}
			> div#modalShareQr {
				margin-top: 10px;
				background-color: #fff;
				padding: 30px;
				text-align: center;
				> svg {
					max-width: 100%;
				}
			}
		}
	}
}
dialog#modalPage {
	background-color: var(--theme-backgroundColor);
	background-image: var(--theme-backgroundImage);
	margin: auto auto 60px auto;
	padding: 0;
	border: solid 1px var(--color-accent);
	&::backdrop {
		background-color: rgba(0,0,0,0);
	}
	> div {
		> #modalPageClose {
			background-color: var(--color-accent);
			color: #fff;
			font-size: 0.7rem;
			line-height: 1;
			text-align: center;
			user-select: none;
			cursor: pointer;
			padding: 10px;
			opacity: 0.5;
			&:hover {
				opacity: 0.8;
			}
		}
		> div {
			padding: 0 10px 10px 10px;
			> p {
				margin-top: 10px;
				margin-bottom: 0;
				font-size: 0.8rem;
				line-height: 1;
				color: var(--theme-text);
				> small {
					font-size: 0.7rem;
					line-height: 1;
				}
			}
			> input[type="text"] {
				margin-top: 3px;
				height: 30px;
				width: calc(100% - 32px);
				outline: none;
				border: solid 1px var(--color-accent);
				border-radius: 5px 0 5px 0;
				background-color: var(--theme-frame2);
				color: var(--theme-text);
				padding-inline: 15px;
			}
		}
	}
}