@charset "UTF-8";

@font-face {font-family: "源暎アンチック"; src: url("../../fonts/GenEiAntiqueNv5-M.woff2") format("woff2");}
@font-face {font-family: "源暎Nuゴシック"; src: url("../../fonts/GenEiNuGothic-EB.woff2" ) format("woff2");}
@font-face {font-family: "源暎ラテミン"  ; src: url("../../fonts/GenEiLateMinN_v2.woff2" ) format("woff2");}
@font-face {font-family: "源暎ラテゴ"    ; src: url("../../fonts/GenEiLateGoN_v2.woff2"  ) format("woff2");}
@font-face {font-family: "源暎エムゴ"    ; src: url("../../fonts/GenEiMGothic2-Regular.woff2") format("woff2");}
@font-face {font-family: "源暎こぶり明朝"; src: url("../../fonts/GenEiKoburiMin6-R.woff" ) format("woff" );}
@font-face {font-family: "源暎ちくご明朝"; src: url("../../fonts/GenEiChikugoMin2-R.woff") format("woff" );}
@font-face {font-family: "さつき源代明朝"; src: url("../../fonts/SatsukiGendaiMincho-M.woff2") format("woff2");}

:root {
	--width: 45rem;
	--item-transit: 200ms;

	--color-background: white;
	--color-foreground: #1a1a1a;
	--color-link: green;
	--color-active: seagreen;
	--color-active-contrast: white;

	--color-theme1: white;
	--color-theme2: seagreen;
	--color-theme3: seagreen;
	--color-theme4: white;

	@media (prefers-color-scheme: dark) {
		--color-background: black;
		--color-foreground: gainsboro;
		--color-link: seagreen;
		--color-active: seagreen;
		--color-active-contrast: white;

		--color-theme1: black;
		--color-theme2: seagreen;
		--color-theme3: seagreen;
		--color-theme4: black;
	}
}

* {
	box-sizing: border-box;
}

body {
	overscroll-behavior: auto none;
	touch-action: manipulation;
	margin: 0;
	background-color: var(--color-background);
	color           : var(--color-foreground);
	line-height: 1;
}
p {
	margin: 0;
	line-height: 1.6;
}
ul {
	margin : 0;
	padding: 0;
	list-style-type: none;
}
.button {
	height: 1.8em;
	background-color: var(--color-theme3);
	color: var(--color-theme4);
	white-space: nowrap;
	cursor: pointer;
	display: grid;
	align-items    : center;
	justify-content: center;
}
.button:hover {
	background-color: var(--color-active);
	color           : var(--color-active-contrast);
	transition      : all var(--item-transit);
}
.button:focus {
	outline: medium solid var(--color-active);
	outline-offset: 4px;
}

a {
	color: var(--color-link);
}
a:hover,
a:focus {
	outline: none;
	text-decoration: none;
	background-color: var(--color-link);
	color: var(--color-background);
	transition: background-color var(--item-transit), color var(--item-transit);
}

body {
	width : 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	overflow: hidden;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: min-content 1fr;
}
body > :nth-child(1) {
	border-style: none none solid none;
	border-color: silver;
	border-width: thin;
}
body > :nth-child(2) {
	overflow: auto;
}
body > :nth-child(2) > div {
	width: var(--width);
	max-width: 100%;
	padding: 2rem 1rem 6rem 1rem;
}

#Editor  {
	width: var(--width);
	max-width: 100%;
	padding: 1rem 1rem 0 1rem;
	display: grid;
	grid-template-columns: 1fr min-content;
	column-gap: 1em;
}
#Editor.vertical #Preview {
	writing-mode: vertical-rl;
	height: 15rem;
}

#Preview {
	font-size: medium;
	line-height: 1.25;
	margin-bottom: 1rem;
	padding: 0.2rem 0.4rem;
	border: solid thin silver;
	white-space: pre;
	resize: vertical;
	height: 10rem;
	overflow: auto;
}
#Preview:focus {
	border-color: transparent;
	outline: medium solid var(--color-active);
}

#Controller {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	user-select: none;
	-webkit-user-select: none;
}
#Controller > * {
	margin-bottom: 1rem;
}
#ButtonFontList {
	min-width: 9em;
	background-color: var(--color-theme1);
	border: solid thin var(--color-theme2);
	color           : var(--color-theme2);
}
#ButtonFontList:hover {
	background-color: var(--color-active);
	color           : var(--color-active-contrast);
	transition: all var(--item-transit);
}

#Controller > :nth-child(2) {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#WritingMode {
	display: grid;
	align-items: center;
}
#FontSizeController {
	display: grid;
	grid-template-columns: repeat(2, min-content);
	align-items: center;
}
#FontSizeController > span {
	width: 2.6em;
	text-align: right;
}
#FontSizeController > span:after {
	content: "pt";
	font-size: small;
	margin-left: 0.2ex;
}
#FontSizeController > div {
	display: grid;
	grid-template-columns: min-content;
}
#FontSizeController svg {
	height: 2em;
	color: var(--color-theme3);
}
#FontSizeController svg:focus,
#FontSizeController svg:hover {
	outline: none;
	background-color: var(--color-active);
	color           : var(--color-active-contrast);
	transition      : all var(--item-transit);
	cursor: pointer;
}

#Controller > :nth-child(3) {
	flex: none;
	display: flex;
	justify-content: flex-end;
}
#Controller > :nth-child(3) > * {
	flex: 0 0 auto;
}
#ButtonCopy {
	padding-left : 1ex;
	padding-right: 1ex;
}

/* 小型画面 縦 */
@media (max-width: 30rem) {
	#Editor.horizontal {
		grid-template-columns: 1fr;
	}
	#Editor.horizontal #Preview {
		height: 8rem;
	}
	#Editor.horizontal #Controller {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	#Editor.horizontal #Controller > :nth-child(2) {
		margin-left: 1rem;
	}
	#Editor.horizontal #Controller :nth-child(3) {
		flex: 1 0 auto;
	}
	#Editor.vertical #Preview {
		height: 14.8rem;
	}
	#Editor.vertical #Controller {
		justify-content: flex-end;
	}
}

/************/

#Description {
	margin-bottom: 3em;
}
@media (max-width: 25rem) {
	#Description p {
		display: inline;
	}
}
#Letters {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.5ex;
	row-gap: 1ex;
	user-select: none;
	-webkit-user-select: none;
}
#Letters ul {
	display: grid;
	grid-template-columns: repeat(8, min-content);
	column-gap: 0.5ex;
	list-style: none;
	font-size: x-large;
}
#Letters li {
	width : 1.5em;
	height: 1.5em;
	display: grid;
	align-items    : center;
	justify-content: center;
}
#Letters li:hover {
	background-color: var(--color-active);
	color           : var(--color-active-contrast);
	transition: all var(--item-transit);
}
#Letters li:empty,
#Letters li:empty:hover {
	background-color: transparent;
	box-shadow: none;
	transition: none;
	pointer-events: none;
}

#Backstage {
	display: none;
}

.screen {
	position: fixed;
	top : 0;
	margin: 0;
	width : 100%;
	height: 100%;
	overflow: hidden;
}

.panel {
	position: absolute;
	background-color: var(--color-background);
	border: thin solid silver;
	overflow: auto;
}

.message {
	position: fixed;
	left: 0;
	width: var(--width);
	max-width: 100%;
	height: 100vh;
	padding: 25vh 1em 1em 1em;
	text-align: center;
	pointer-events: none;
}
.message p {
	display: inline-block;
	padding: 0.1ex 1.6ex;
	border-radius: 2.2ex;
	background-color: var(--color-foreground);
	color: var(--color-background);
	font-size: 140%;
	box-shadow: 0 0 0.5ex 0.5ex var(--color-background);
}
.debug {
	position: fixed;
	bottom: 0;
	width: 100%;
	padding: 1ex;
	background-color: rgba(0, 0, 0, 0.8);
	color: white;
	font-size: small;
	font-family: monospace;
	line-height: 1.25;
}

.fadeIn {
	animation: FadeIn;
	animation-duration: 100ms;
}
.fadeIn.long {
	animation-duration: 400ms;
}
.fadeOut {
	opacity: 0;
	animation: FadeOut;
	animation-duration: 100ms;
}
.fadeOut.long {
	animation-duration: 1000ms;
}
@keyframes FadeIn {
	  0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes FadeOut {
	  0% {opacity: 1;}
	100% {opacity: 0;}
}

.close {
	text-align: right;
	margin-bottom: 1ex;
}
.close svg {
	height: 2.4em;
	padding: 1.2ex;
	color: var(--color-foreground);
	cursor: pointer;
}
.close svg:focus,
.close svg:hover {
	outline: none;
	background-color: var(--color-active);
	color           : var(--color-active-contrast);
	transition: all var(--item-transit);
}

.fontLoader {
	position: fixed;
	left    : -1em;
	bottom  : 0;
	margin  : 0;
	padding : 0;
	background-color: transparent;
	color: transparent;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
}

.fontList {
	max-width : calc(100vw - 2em);
}
.fontList ul {
	max-height: calc(100vh - 4rem);
	overflow-y: auto;
	line-height: 2;
	font-size  : x-large;
}
.fontList li {
	width : 9em;
	display: grid;
	align-items    : center;
	justify-content: center;
	word-break: keep-all;
	cursor: pointer;
}
.fontList li:hover,
.fontList li:focus {
	outline: none;
	background-color: var(--color-active);
	color           : var(--color-active-contrast);
	transition: all var(--item-transit);
}
.fontList li.selected {
	background-color: var(--color-theme1);
	color: var(--color-theme2);
}