style.css

@charset 'utf-8';
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP|Noto+Sans+KR);

/* Layout */

body {
	font-family: 'Noto Sans JP', 'Noto Sans KR', 나눔고딕, sans-serif;
	font-size: 0.82em;
	text-align: center;
}

article {
	display: flex;
	align-items: center;
	justify-items: center;
	width: 100%;
	flex-wrap: wrap;
}

/* Header */

h2,
h3,
h4 {
	width: 100%;
}

h2.title {
	font-size: 2em;
	margin: 0 auto;
}

h2.title a {
	text-decoration: none;
	color: #ba003c;
}

h4.version {
	text-align: right;
	margin: 0 auto;
}


button {
	height: 3em;
	margin: 1em;
	box-shadow: 1px 1px 3px #ccc;
	background-color: #6799ff;
	border: 0.2em #fff solid;
	border-radius: 0.3em;
	color: #fff;
}

button:hover {
	transition: .2s cubic-bezier(.42, 0, .03, .96);
	box-shadow: 2px 2px 5px #333;
	background-color: #0055ee;
}

button.copy {}


/* Article */
.textarea,
.buttons {
	display: inline-flex;
	width: 100%;
	justify-content: center;
}

.textarea form p {
	text-align: left;
	clear: both;
}

.textarea textarea {
	transition: .2s cubic-bezier(.42, 0, .03, .96);
	width: 90vw;
	height: 15em;
	border: none;
	border-radius: 0.3em;
	padding: 1em;
}

.textarea *:focus {
	outline: none;
}

.textarea form {
	width: 100%;
	text-align: left;
}

.textarea form p {
	padding: 0;
	margin: 1em 0 .3em 0;
	font-size: 1.2em;
	font-weight: 700;
}

.textarea form input,
.textarea form select {
	border-radius: .4em;
}


.textarea form input,
.textarea form select {
	border: none;
	padding: 1em;
	margin: 0 0 1em 0;
	width: 50%;
	box-sizing: border-box;
}

.textarea form details {
	border: 1px solid #fff;
	border-radius: .4em;
	background-color: #fff;
	width: 40%;
	padding: 1em;
	box-sizing: border-box;
	float: right;
}

.textarea form details>summary::marker {}

.textarea form .notes {
	display: inline-block;
	width: 50%;
	text-align: left;
}

details[open] summary {
	border-bottom: 1px solid #333;
	padding-bottom: 1em;
}

.textarea form details ul {
	padding-left: 1em;
	word-break: break-all;
	list-style: none;
}

.textarea form details ul li {
	margin-bottom: .5em;
}

.textarea form button.plus,
.textarea form button.minus {
	border-radius: 50%;
	display: inline-block;
	min-width: 0;
	width: 3em;
	height: 3em;
	padding: 0;
	margin: 1em .5em;
	float: right;
}

ul>span {
	font-weight: bold;
}

li {
	list-style: none;
}

/* Scrollbar */

::-webkit-scrollbar {
	width: 9px;
	height: 9px;
	border: 1px solid rgba(0, 0, 0, .1);
}

::-webkit-scrollbar-thumb {
	background: rgba(50, 50, 50, .3);
}

::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, .1);
}