:root {
	--white: #ffffff;
	--purple100: #f5f5ff;
	--purple200: #e0e0ff;
	--purple400: #7f7fff;
	--purple401: #9a9aff;
	--orange200: #ffd9bf;
	--orange300: #fba266;
	--gray: #777;
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: #f5f5f5;
}

textarea {
	border-color: #ddd;
	resize: none;
	field-sizing: content;
	&:focus {
		outline: 2px var(--purple400) solid;
	}
}

input[type="radio"] {
	display: none;
}

.canvas-container {
	display: flex;
	justify-content: center;
	box-sizing: border-box;
	width: 75vw;
	height: 100%;
	min-height: 100vh;
	padding: 32px 0;
	transition: padding 0.3s ease-in-out;
}

.mobile-view {
	padding: 16px 0;
	.edit-canvas {
		width: 30vw;
		#titleT {
			font-size: 20px;
		}
		.authorD,
		.dateD {
			font-size: 12px;
		}
		.thumbnail-label {
			font-size: 1rem;
		}
		.subheading {
			font-size: 16px;
		}
		.photo-description {
			font-size: 10px;
		}
		.main-text {
			font-size: 14px;
		}
	}
	#articleView {
		width: 30vw;
		h1 {
		font-size: 20px;
		}
		.author,
		.published,
		.updated {
			font-size: 12px;
		}
		h2 {
			font-size: 16px;
		}
		p {
			font-size: 14px;
			white-space: pre-wrap;
		}
		.photo-description {
			font-size: 10px;
		}
	}
}

.check-mode {
	.edit-canvas,
	.edit-bar {
		display: none;
	}
	#articleView,
	.articleView-bar {
		display: block;
	}
}

.edit-canvas {
	background-color: var(--white);
	width: 60vw;
	margin: 0 16px;
	padding: 0 15px;
	transition: width 0.3s ease-in-out;

	#selectWarn {
		display: none;
		font-size: 10px;
		color: #fa0000;
	}

	#titleT {
		width: 100%;
		margin-top: 5px;
		padding: 4px 0;
		font-size: 22px;
		font-weight: bold;
		line-height: 1.4;
		transition: font-size 0.3s ease-in-out;
	}

	.authorD {
		display: flex;
		color: var(--gray);
		font-size: 14px;
		line-height: 1.2;
		transition: font-size 0.3s ease-in-out;
	}

	#authorT {
		min-width: 6rem;
		color: var(--purple400);
		&::placeholder {
			color: var(--purple401);
		}
	}

	.dateD {
		display: flex;
		justify-content: end;
		align-items: center;
		margin-bottom: 4px;
		color: var(--gray);
		font-size: 14px;
		line-height: 1.2;
		transition: font-size 0.3s ease-in-out;
	}

	#publDa,
	#updDa {
		color: var(--gray);
		border: 1px #ddd solid;
		&:focus {
			outline: 2px var(--purple400) solid;
		}
	}

	.thumbnail-label {
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		aspect-ratio: 2/1;
		border: 1px #ddd solid;
		color: var(--gray);
		font-size: 2rem;
		transition: border 0.1s, font-size 0.3s ease-in-out;
		&:hover {
			border: 2px var(--purple400) solid;
		}
	}
	
	#thumbnailWrapper {
		display: none;
		box-sizing: border-box;
		height: fit-content;
		border: 2px var(--white) solid;
		padding: 0;
		line-height: 0;
		&:hover {
			border-color: var(--purple400);
		}
		img {
			width: 100%;
			height: auto;
		}
	}

	.hr-line {
		position: relative;
		display: block;
		height: 2px;
		margin: 6px 0;
		/* background-color: var(--orange200); */
		&:hover {
			background-color: var(--orange300);
			&::after {
				background-color: var(--orange300);
			}
		}
		&:has(input[type="radio"]:checked) {
			background-color: var(--orange300);
			&::after {
				background-color: var(--orange300);
			}
		}
		&::after {
			position: absolute;
			top: -11px;
			right: -55px;
			content: "";
			display: block;
			height: 20px;
			width: 20px;
			background-color: var(--orange200);
			clip-path: shape(
				from 0 50%,
				line to 100% 0,
				line to 100% 100%,
				line to 0 50%,
				close
			);
		}
	}

	.parts {
		position: relative;
		&:has(textarea[class="subheading"])::after {
			position: absolute;
			bottom: 8px;
			display: block;
			content: "";
			width: 70%;
			height: 2px;
			background-color: var(--purple400);
		}

		button {
			box-sizing: border-box;
			height: fit-content;
			outline: none;
			border: 2px var(--white) solid;
			padding: 0;
			line-height: 0;
			scroll-margin-top: 100px;
			&:hover {
				border-color: var(--purple400);
			}
			img {
				width: 100%;
				height: auto;
			}
		}
	}

	.subheading {
		width: 100%;
		padding: 4px 0;
		font-size: 18px;
		font-weight: bold;
		scroll-margin-top: 100px;
		transition: font-size 0.3s ease-in-out;
	}

	.photo-description {
		font-size: 12px;
		color: var(--gray);
		line-height: 1.4;
		scroll-margin-top: 100px;
		transition: font-size 0.3s ease-in-out;
	}

	.main-text {
		box-sizing: border-box;
		width: 100%;
		padding: 6px 2px;
		font-size: 16px;
		font-weight: 400;
		line-height: 2;
		scroll-margin-top: 100px;
		transition: font-size 0.3s ease-in-out;
	}
}

.tag-over-select {
	#selectWarn {
		display: inline-block;
	}
	#tagSe {
		border-color: #fa0000;
	}
}

.edit-bar {
	width: 32px;
	background-color: var(--white);
}
.articleView-bar {
	display: none;
	width: 32px;
}

#articleView {
	display: none;
	width: 60vw;
	margin: 0 16px;
	padding: 4px 15px;
	background-color: var(--white);
	transition: width 0.3s ease-in-out;
	h1,
	.author,
	.published,
	.updated,
	h2,
	p,
	.photo-description {
		transition: font-size 0.3s ease-in-out;
	}
}

.tools {
	position: fixed;
	top: 0;
	right: 0;
	width: 25vw;
	height: 100vh;
	background-color: var(--white);
	#helpButton {
		position: fixed;
		top: 0;
		left: 0;
		display: none;
		border: 0;
		border-radius: 50%;
		padding: 6px;
		background-color: #00000000;
		&:active {
			background-color: #ddd;
		}
		&::before {
			content: "";
			display: block;
			width: 26px;
			height: 26px;
			background-repeat: no-repeat;
			background-size: contain;
			background-image: url(./../images/help_24dp_333333_FILL0_wght400_GRAD0_opsz24.svg);
		}
	}
	.selection-required {
		display: flex;
		gap: 3px;
		width: 80%;
		margin: 10px auto 20px auto;
		clip-path: shape(
			from 18px 0,
			line to calc(100% - 18px) 0,
			arc to calc(100% - 18px) 100% of 18px 18px cw,
			line to 18px 100%,
			arc to 18px 0 of 18px 18px cw,
			close
		);
		label {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 50%;
			height: 36px;
			border-radius: 4px;
			background-color: var(--purple200);
			color: var(--gray);
			text-align: center;
			transition: border-radius 0.1s ease-in-out;
			&::before {
				content: "";
				display: block;
				height: 0px;
				width: 0px;
				margin-right: 6px;
				background-repeat: no-repeat;
				background-size: contain;
				background-image: url(./../images/check_24dp_FFFFFF_FILL0_wght400_GRAD0_opsz24.svg);
				transition: all 0.2s ease-in-out;
			}
			&:has(input[name="viewprot"]:checked) {
				border-radius: 18px;
				background-color: var(--purple400);
				color: var(--white);
				&::before {
					height: 20px;
					width: 20px;
				}
			}
		}
	}
	nav {
		ul {
			position: relative;
			display: flex;
			margin: 0;
			padding: 0;
			border-bottom: 1px #ddd solid;
			list-style: none;
			&::after {
				position: absolute;
				bottom: 0;
				left: 0;
				content: "";
				display: block;
				height: 2px;
				width: 50%;
				background-color: var(--purple400);
				transition: left 0.2s ease-in-out;
			}
			&:has(input[id="checkMode"]:checked)::after {
				left: 50%;
			}
			li {
				width: 50%;
				label {
					display: block;
					width: 100%;
					box-sizing: border-box;
					padding: 6px;
					text-align: center;
					&:has(input:checked) {
						color: var(--purple400);
					}
				}
			}
		}
	}
	#openDownloadDialog {
		display: none;
	}
}

nav:has(input[id="checkMode"]:checked) ~ #inputPage {
	display: none;
}
nav:has(input[id="checkMode"]:checked) ~ #viewPage {
	display: block;
}

#inputPage {
	height: 100%;
	padding: 16px;
	color: var(--gray);
	font-size: 12px;
	.importD {
		margin-left: 16px;
		padding: 12px 0 16px 0;
		#importArticleLabel {
			display: flex;
			align-items: center;
			width: fit-content;
			border-radius: 999px;
			padding: 6px 16px;
			background-color: var(--purple200);
			color: #5d5dff;
			font-size: 16px;
			cursor: pointer;
			&:hover {
				background-color: #c6c6fc;
			}
			&::before {
				content: "";
				display: block;
				height: 20px;
				width: 20px;
				margin-right: 4px;
				background-repeat: no-repeat;
				background-size: contain;
				background-image: url(./../images/upload_file_24dp_5D5DFF_FILL0_wght400_GRAD0_opsz24.svg);
			}
		}
	}
	#partsBox {
		display: grid;
		grid-template-columns: 1fr;
		margin: 4px 0 32px 16px;
		border: 1px #ddd solid;
		border-radius: 10px;
		.addParts {
			box-sizing: border-box;
			display: flex;
			align-items: center;
			border: 0;
			border-radius: 10px;
			padding: 6px 6px;
			background-color: var(--white);
			font-size: 14px;
			color: #333;
			text-align: start;
			cursor: pointer;
			&:hover {
				background-color: #ddd;
			}
		}
	}
	#insertion {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		margin-bottom: 32px;
		padding-left: 16px;
		button {
			border: 0;
			border-radius: 10px;
			padding: 4px 0;
		}
		#openLinkDialog {
			color: #0000EE;
			text-decoration: underline;
		}
		#insertBold {
			font-weight: bold;
		}
		disabled-cover {
			position: absolute;
		}
	}
	.disabled {
		position: relative;
		disabled-cover {
			inset: 0;
			display: block;
			background-color: #fffa;
		}
	}
}

#viewPage {
	display: none;
	height: calc(100vh - 110px);
	padding: 16px;
	overflow-y: scroll;
	&::-webkit-scrollbar {
		display: none;
	}
	.section {
		margin: 0 0 20px 16px;
	}
	p {
		margin: 6px 0;
		font-size: 12px;
		color: var(--gray);
	}
	#fileNameDiv {
		display: flex;
		align-items: center;
		gap: 6px;
		#openFilenameInfo {
			display: block;
			border: 0;
			margin-right: 4px;
			border-radius: 50%;
			padding: 4px;
			background-color: var(--white);
			anchor-name: --open-info;
			&:active {
				background-color: #ddd;
			}
			&::before {
				content: "";
				display: block;
				height: 20px;
				width: 20px;
				background-repeat: no-repeat;
				background-size: contain;
				background-image: url(./../images/info_24dp_333333_FILL0_wght400_GRAD0_opsz24.svg);
			}
		}
	}
	#fileName {
		display: block;
		width: calc(100% - 8px);
		padding: 6px;
	}
	#setFileName {
		height: 36px;
		width: 4rem;
		margin-left: calc(100% - 4rem);
		margin-top: 8px;
		border: 1.5px #ddd solid;
		border-radius: 18px;
		padding: 6px 14px;
		background-color: var(--white);
		color: #49454e;
		transition: font-size 0.1s ease-in-out;
		&:hover {
			background-color: #f5f5ff;
		}
		&:active {
			font-size: 12px;
		}
	}
	#downloadD {
		position: relative;
		margin: 6px 0;
		padding: 6px 0;
		a {
			height: 36px;
			border: 0;
			border-radius: 18px;
			padding: 6px 14px;
			box-shadow: 0 0 6px #ddd;
			background-color: var(--purple400);
			color: var(--white);
			text-decoration: none;
			cursor: pointer;
			&:hover {
				background-color: #6666f8;
			}
		}
	}
	.disabled {
		&::after {
			position: absolute;
			inset: 0;
			content: "";
			display: block;
			background-color: #0000;
		}
		#downloadJson {
			box-shadow: 0 0 0px #fff0;
			background-color: #b7b7ff;
		}
	}
	.section:has(#copyViewer) {
		position: relative;
		anchor-name: --copy-box;
		width: calc(25vw - 48px);
		height: calc(145px + 1px/3);
		overflow-x: scroll;
		margin-top: 8px;
		border-radius: 10px;
		background-color: #121212;
		line-height: 0;
		&::-webkit-scrollbar {
			display: none;
		}
		&:hover #copyListText {
			display: block;
		}
		#copyViewer {
			border-width: 0px;
			border-radius: 10px;
			padding: 12px;
			background-color: #121212;
			color: var(--white);
			&:focus {
				outline: 0px #00000000 solid;
			}
		}
		#copyListText {
			position: absolute;
			top: 4px;
			right: 12px;
			display: none;
			height: 20px;
			width: 20px;
			margin-right: 4px;
			border: 0;
			background-color: #00000000;
			background-repeat: no-repeat;
			background-size: contain;
			background-image: url(./../images/content_copy_24dp_FFFFFF_FILL0_wght400_GRAD0_opsz24.svg);
			cursor: pointer;
		}
	}
	#toast {
		position: absolute;
		position-anchor: --copy-box;
		bottom: anchor(top);
		right: anchor(right);
		display: none;
		width: fit-content;
		border-radius: 4px;
		padding: 8px;
		box-shadow: 0 0 6px #ddd;
		background-color: var(--purple200);
		font-size: 12px;
		animation: rise-toast 0.2s ease-in-out;
	}
}
@keyframes rise-toast {
	0% {
		opacity: 0;
		transform: translateY(50%);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

#deleteParts {
	display: block;
	justify-self: end;
	height: 36px;
	width: 5rem;
	border: 0;
	border-radius: 18px;
	box-shadow: 0 0 6px #ddd;
	background-color: #ffdad6;
	color: #7d2b25;
	cursor: pointer;
	&:disabled {
		box-shadow: 0 0 0px #fff0;
		background-color: #ffefed;
		color: #7d2b2555;
	}
	&:hover:not(:disabled) {
		background-color: #ffc0b9;
	}
}

.close-dialog {
	color: #555;
	&:hover {
		background-color: #E5E5E5;
	}
}

#filenameInfo {
	position: absolute;
	position-anchor: --open-info;
	position-area: bottom left;
	max-width: 25vw;
	margin: 3px -26px 0 0;
	outline: none;
	border: 0;
	border-radius: 4px;
	padding: 20px 12px 12px 12px;
	background-color: var(--purple200);
	color: #555;
	font-size: 13px;
	clip-path: shape(
		from calc(100% - 4px) 8px,
		arc to 100% 12px of 4px 4px cw,
		line to 100% calc(100% - 4px),
		arc to calc(100% - 4px) 100% of 4px 4px cw,
		line to 4px 100%,
		arc to 0 calc(100% - 4px) of 4px 4px cw,
		line to 0 12px,
		arc to 4px 8px of 4px 4px cw,
		line to calc(100% - 16px) 8px,
		line to calc(100% - 12px) 0,
		line to calc(100% - 8px) 8px,
		line to calc(100% - 4px) 8px,
		close
	);
}

#linkDialog {
	border: 0;
	form {
		display: grid;
		grid-template-columns: 1fr;
		gap: 10px;
	}
	input:not([type="submit"]) {
		min-width: 16rem;
		margin-bottom: 16px;
		padding: 2px;
	}
	div {
		display: flex;
		justify-content: end;
		gap: 10px;
		button,
		#insertLink {
			width: 5rem;
			border: 0;
			padding: 4px;
		}
		#insertLink {
			background-color: var(--purple400);
			color: var(--white);
			&:active {
				background-color: var(--purple401);
			}
		}
	}
}

@media screen and (max-width: 767px) {
	.canvas-container {
		justify-content: end;
		width: 100vw;
		padding-top: 52px;
		.edit-canvas,
		#articleView {
			box-sizing: border-box;
			width: calc(100% - 96px);
		}
	}

	.tools {
		display: flex;
		width: 100vw;
		height: 40px;
		background-color: #fafafa;
		#helpButton {
			top: 95px;
			left: 5px;
			display: block;
		}
		.selection-required {
			display: none;
		}
		nav {
			ul {
				display: block;
				width: 44px;
				border: 0;
				border-right: 2px var(--purple400) solid;
				background-color: #fafafa;
				&::after {
					display: none;
				}
				li {
					width: 100%;
					label {
						height: 40px;
						padding: 6px 4px;
						background-color: var(--purple200);
						color: var(--gray);
						&:has(input:checked) {
							background-color: var(--purple400);
							color: var(--white);
						}
					}
				}
			}
		}
		#inputPage {
			position: relative;
			display: flex;
			align-items: center;
			width: 100%;
			padding: 0;
			span {
				display: none;
			}
			.importD {
				margin-left: 10px;
				padding: 0;
				#importArticleLabel {
					border-radius: 6px;
					padding: 6px;
					&::before {
						margin-right: 0;
					}
				}
			}
			#addPartsButton {
				position: relative; /* before要素用 */
				anchor-name: --apButton;
				border-radius: 6px;
				margin-left: 15px;
				padding: 6px;
				&:active {
					background-color: #ddd;
				}
				&::before {
					position: absolute;
					top: 0;
					left: -8px;
					content: "";
					display: block;
					width: 1px;
					height: 32px;
					background-color: #ccc;
				}
				&::after {
					content: "";
					display: block;
					width: 20px;
					height: 20px;
					background-repeat: no-repeat;
					background-size: contain;
					background-image: url(./../images/add_box_24dp_333333_FILL0_wght400_GRAD0_opsz24.svg);
				}
			}
			#partsBoxWrapper {
				position: fixed;
				position-anchor: --apButton;
				top: calc(anchor(bottom) + 3px);
				left: anchor(left);
				margin: 0;
				border: 0;
				border-radius: 10px;
				padding: 0;
				box-shadow: 0 0 6px #ddd;
				background-color: #00000000;
			}
			#partsBox {
				margin: 0;
				border: 0;
				background-color: var(--white);
			}
			#insertion {
				gap: 0;
				margin: 0;
				padding-left: 0;
				instead-span {
					display: none;
				}
				button {
					margin-left: 10px;
					border-radius: 6px;
					padding: 6px;
					background-color: #00000000;
					&:active {
						background-color: #ddd;
					}
					&::before {
						content: "";
						display: block;
						width: 20px;
						height: 20px;
						background-repeat: no-repeat;
						background-size: contain;
					}
				}
				#openLinkDialog::before {
					background-image: url(./../images/link_24dp_333333_FILL0_wght400_GRAD0_opsz24.svg);
				}
				#insertBold::before {
					background-image: url(./../images/format_bold_24dp_333333_FILL0_wght400_GRAD0_opsz24.svg);
				}
			}
			#deleteParts {
				position: absolute;
				right: 10px;
			}
			disabled-cover {
				background-color: #fafafaaa;
			}
		}
		#viewPage {
			height: 40px;
			width: 100%;
			padding: 0;
			#openDownloadDialog {
				display: block;
				width: 5.5rem;
				height: 32px;
				margin: 4px 4px 4px auto;
				border: 0;
				border-radius: 16px;
				padding: 8px;
				box-shadow: 0 0 6px #ddd;
				background-color: var(--purple200);
				color: var(--purple400);
				line-height: 1;
				&:active {
					background-color: #c3c3ff;
				}
			}
			#downloadDialogBG {
				position: fixed;
				inset: 0;
				display: none;
				justify-content: center;
	    		align-items: center;
				background-color: #ddddddaa;
				padding-bottom: 30vh;
				#downloadDialog {
					box-sizing: border-box;
					width: 90vw;
					border-radius: 12px;
					padding: 15px;
					background-color: var(--white);
				}
			}
			span {
				display: none;
			}
			.section:has(#copyViewer) {
				display: none;
			}
		}
	}

	#helpDialog {
		box-sizing: border-box;
		width: 90vw;
		border: 0;
		button[class="close-dialog"] {
			display: block;
			margin-left: auto;
			margin-bottom: 8px;
			border: 0;
			border-radius: 6px;
			padding: 6px;
			background-color: #fff;
			&:active {
				background-color: #ddd;
			}
			&::before {
				content: "";
				display: block;
				width: 26px;
				height: 26px;
				background-repeat: no-repeat;
				background-size: contain;
				background-image: url(./../images/close_45dp_AAA.svg);
			}
		}
		img {
			width: 100%;
			height: auto;
			aspect-ratio: 9/8;
			object-fit: cover;
		}
	}

	#filenameInfo {
		position-area: none;
		top: anchor(bottom);
		left: anchor(left);
		max-width: 70vw;
		margin: 0;
		border-radius: 8px;
		padding: 12px;
		clip-path: none;
	}
}