@charset "utf-8";

/* @font-face {
	font-family: 'Silver';
	src:
		url('../font/Silver.woff2') format('woff2'),
		url('../font/Silver.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}
.silver:not(#_):not(#_) {
	font-family: 'Silver';
	font-size: 1.33333333em;
	line-height: 0.9;
} */
@font-face {
	font-family: 'dalmoori';
	src:
		url('../font/dalmoori.woff2') format('woff2'),
		url('../font/dalmoori.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}
.dalmoori:not(#_):not(#_) {
	font-family: 'dalmoori';
	line-height: 1.2;
}
@font-face {
	font-family: 'DOSGothic';
	src:
		url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/DOSGothic.woff')
		format('woff');
	font-weight: normal;
	font-style: normal;
}
.dosgothic:not(#_):not(#_) {
	font-family: 'DOSGothic';
}
@font-face {
	font-family: 'DOSMyungjo';
	src:
		url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/DOSMyungjo.woff')
		format('woff');
	font-weight: normal;
	font-style: normal;
}
.dosmyungjo:not(#_):not(#_) {
	font-family: 'DOSMyungjo';
}
@font-face {
	font-family: 'DOSSaemmul';
	src:
		url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/DOSSaemmul.woff')
		format('woff');
	font-weight: normal;
	font-style: normal;
}
.dossaemmul:not(#_):not(#_) {
	font-family: 'DOSSaemmul';
}
@font-face {
	font-family: 'Sam3KRFont';
	src:
		url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/Sam3KRFont.woff')
		format('woff');
	font-weight: normal;
	font-style: normal;
}
.sam3:not(#_):not(#_) {
	font-family: 'Sam3KRFont';
}
@import url('https://cdn.jsdelivr.net/gh/Dalgona/neodgm-webfont@1.50/neodgm/style.css');
.neodgm:not(#_):not(#_) {
	font-family: 'NeoDunggeunmo';
}
/* 'Noto Sans KR' */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

* {
	box-sizing: border-box;
}
html {
	height: 100%;
	font-size: 16px;
}
body {
	margin: 0;
	height: 100%;
	font-family: 'Noto Sans KR', sans-serif;
	text-align: center;
}

h2, h3, p {
	margin-bottom: 0;
}
a {
	color: #0060c0;
}
a:visited {
	color: #6000c0;
}
canvas {
	display: block;
}

.spaced {
	margin-top: 0.25rem;
}
.long-spaced {
	margin-top: 1rem;
}

#logo {
	position: fixed;
	left: 0;
	top: 0;
	padding: 16px;
	width: 100%;
	background: linear-gradient(
		to bottom,
		white,
		rgba(255, 255, 255, 0.8) 80%, transparent
	);
	text-align: left;
	font-size: 0;
	white-space: nowrap;
	z-index: 1;
}
	#logo * {
		vertical-align: middle;
	}
		#logo a img {
			width: 64px;
		}
	#caption {
		margin-left: 8px;
		font-size: 1rem;
		line-height: 64px;
	}

header {
	position: relative;
	height: 28rem;
	margin-top: 96px;
	margin-bottom: 2rem;
	background:
		linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)),
		url('../img/cover.jpg') 50% 65%/cover,
		#600000;
}
	#fontInfo {
		position: absolute;
		left: 1rem;
		bottom: 1rem;
		text-align: left;
	}
		#fontInfo h1 {
			margin: 0;
			font-size: 2rem;
			line-height: 1.2;
			color: white;
			text-shadow: 0 2px 3px black;
		}
	#font-author {
		margin: 0;
		position: absolute;
		left: 0%;
		top: calc(100% + 1.6em);
		white-space: nowrap;
	}

#list {
	display: inline-flex;
	flex-flow: row nowrap;
	justify-content: left;
	align-items: flex-start;
	max-width: 100%;
	overflow-x: auto;
}
	#list .item {
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		border: initial;
		padding: 0.25rem;
		flex: none;
		color: black;
		background: initial;
		font-size: unset;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		transition: background-color 0.2s ;
	}
	#list .item:hover {
		background-color: #eee;
	}
		#list .item > * {
			flex: none;
		}
		#list .item img {
			width: 80px;
			height: 80px;
		}
			#list .item.active img.inactive, #list .item.inactive img.active {
				display: none;
			}

section {
	margin: auto;
	width: 80%;
	max-width: 1000px;
	text-align: left;
}
.info {
	color: #0060c0;
	font-size: 0.9em;
}
.info::before {
	content: 'ⓘ ';
}
.warn {
	color: #c06000;
	font-size: 0.9em;
}
.warn::before {
	content: '⚠ ';
}
.info + .info, .info + .warn, .warn + .info, .warn + .warn {
	margin-top: 0.25rem;
}

.pill-container {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	margin-top: 0.25rem;
}
.pill {
	display: inline-block;
	flex: none;
	margin: 0.25em;
	border: 1px solid black;
	border-radius: 2em;
	padding: 0.25em 0.5em;
	font-family: unset;
	font-size: unset;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	cursor: pointer;

	transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.pill.standalone {
	border-color: #003060;
	background-color: #003060;
	color: white;
}
input[type="radio"]:checked + .pill, input[type="checkbox"]:checked + .pill {
	border-color: #0060c0;
	background-color: #0060c0;
	color: white;
}
input[type="number"] {
	width: 4em;
}

#prev-input {
	width: 100%;
	height: 10rem;
}
#prev-container {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: flex-start;
}
#prev-container canvas {
	flex: none;
}

#dl-charset-toggle {
	text-align: center;
}

#download {
	position: relative;
	display: block;
	margin: 1rem auto 0;
	border: none;
	border-radius: 2em;
	padding: 1em 0;
	width: 256px;
	color: white;
	background: linear-gradient(to right, transparent, #0060c0) #80b0e0;
	font-size: 1.2em;
	line-height: 1;
	font-family: unset;
	box-shadow: 0 3px 4px rgba(0, 0, 0, 0.5);

	transition: background-color 0.2s;
}
#download:hover:not(:active) {
	background-color: #4088d0;
}

.inst-instruction {
	display: grid;
	grid-auto-flow: row;
	grid-template-columns: 33.33333333333333% 33.33333333333333% 33.33333333333333%;
	place-items: start stretch;
}
.inst-instruction p {
	display: flex;
	flex-flow: column nowrap;
	align-items: flex-start;
	margin: 0 0.5rem 2rem;
}
.inst-instruction p * {
	flex: none;
}
.inst-instruction p img {
	margin-bottom: 0.5rem;
	width: 100%;
}

footer {
	margin-top: 2rem;
	padding: 2rem;
	background: #eee;
	font-size: 0.8rem;
	text-align: left;
}
	footer * {
		opacity: 0.8;
	}
	footer > p:first-child {
		margin: 0;
	}
	footer address {
		font-style: initial;
	}
	footer .linklike {
		border: none;
		padding: 0;
		font-family: unset;
		font-size: unset;
		color: #0060c0;
		background: none;
		text-decoration: underline;
		cursor: pointer;
	}

.license {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	text-align: left;
	font-family: 'Noto Sans KR', sans-serif;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 2;
}
	.license-modal {
		flex: auto;
		max-width: 80%;
		max-height: 80%;
		padding: 1rem;
		overflow-y: auto;
		background-color: white;
	}
		.license-modal h2:first-child {
			margin-top: 0;
		}
		.license-modal h3 {
			font-weight: normal;
		}
		.license-modal h3 a {
			font-weight: bold;
		}
		.license-modal :last-child {
			margin-bottom: 1rem;
		}
		.license-modal pre {
			padding: 1rem;
			white-space: pre-wrap;
			background-color: #e0e0e0;
		}

.hidden-input {
	display: none;
}

.loading-animation {
	position: relative;
	left: 50%;
	top: 50%;
	width: 0;
	height: 1em;
	transform: translate(-4px, calc(0.5em - 4px));
}
.pill-container .loading-animation {
	left: unset;
	height: 3em;
	transform: translate(-4px, calc(1.5em - 4px));
}
	.loading-animation div {
		position: absolute;
		border-radius: 4px;
		width: 8px;
		height: 8px;
		background-color: #0060c0;
	}
	#download .loading-animation div {
		background-color: white;
	}

@media all and (max-width: 1280px) {
	.inst-instruction {
		grid-template-columns: 50% 50%;
	}
}

@media all and (max-width: 640px) {
	.inst-instruction {
		grid-template-columns: 100%;
	}
}