@media screen and (max-width: 767px) {
	html,
	body {
		width: 100%;
		min-height: 100%;
		background: #f5f5f5;
	}

	body {
		line-height: 1.5;
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	div#app {
		width: 100%;
		height: 100dvh;
		min-height: 100svh;
		overflow: hidden;
		background: #f5f5f5;
	}

	.flipbook {
		width: 100vw;
		height: calc(100dvh - 76px - env(safe-area-inset-bottom));
		margin: 0 auto;
		padding: 8px 8px 0;
		box-sizing: border-box;
	}

	.flipbook .viewport {
		background: #e9e9e9;
		touch-action: none;
	}

	.flipbook img.page {
		box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
	}

	.flipbook-head {
		display: flex;
		gap: 10px;
		justify-content: center;
		align-items: center;
		width: 100%;
		padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
		bottom: 0;
		box-sizing: border-box;
		background: rgba(245, 245, 245, .94);
		box-shadow: 0 -2px 12px rgba(0, 0, 0, .12);
	}

	.flipbook-head button {
		appearance: none;
		flex: 1 1 0;
		max-width: 168px;
		min-height: 44px;
		padding: 10px 12px;
		border: 1px solid #bbb;
		border-radius: 6px;
		background: #fff;
		color: #222;
		font-size: 15px;
		font-weight: 700;
		line-height: 1.2;
	}
}

@media screen and (max-width: 767px) and (orientation: landscape) {
	.flipbook {
		height: calc(100dvh - 58px - env(safe-area-inset-bottom));
		padding-top: 4px;
	}

	.flipbook-head {
		padding-top: 7px;
		padding-bottom: calc(7px + env(safe-area-inset-bottom));
	}

	.flipbook-head button {
		min-height: 38px;
		font-size: 14px;
	}
}