.write {
	padding: 22px 24px 24px;
	background: var(--page);
	border: 1px solid var(--line);
	border-radius: var(--r2);
	box-shadow: var(--sh1);
}

.write .field { position: relative; margin-bottom: 10px; }

.write .count {
	display: block;
	margin-top: 4px;
	text-align: right;
	color: var(--dim-soft);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.write .count.full { color: var(--brand-text); }
.write .field.two { display: flex; gap: 8px; }
.write .field.two input { flex: 1 1 0; min-width: 0; }
.write .field.row { display: flex; gap: 8px; }
.write .field.row select { flex: 0 0 150px; }
.write .field.row input { flex: 1 1 auto; min-width: 0; }

.write input[type=text],
.write input[type=password],
.write input[type=email],
.write select,
.write textarea,
.form-narrow input[type=text],
.form-narrow input[type=password],
.form-narrow input[type=email] {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--line-hard);
	border-radius: var(--r1);
	background: var(--page);
	transition: border-color .13s ease, box-shadow .13s ease;
	-webkit-appearance: none;
}

.write select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 34px;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.write input:focus, .write textarea:focus, .write select:focus,
.form-narrow input:focus {
	outline: 0;
	border-color: var(--brand);
	box-shadow: var(--ring);
}

.write textarea { min-height: 340px; line-height: 1.8; resize: vertical; }

.write .field.act {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--line-soft);
}

.upload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.upload .hint { color: var(--dim); font-size: 12.5px; }
.upload .shots { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
.upload .shot { position: relative; display: inline-block; line-height: 0; }
.upload .shot img { width: 84px; height: 64px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--r1); }

.upload .shot button {
	position: absolute;
	top: -7px;
	right: -7px;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 1px solid var(--line-hard);
	border-radius: 50%;
	background: var(--page);
	line-height: 1;
	color: var(--dim);
}

.upload .shot button:hover { color: var(--on-ink); background: var(--ink); border-color: var(--ink); }

.form-narrow {
	/* 경고: 이 카드가 놓이는 .content 는 flex 다. width 를 주지 않으면 내용 폭으로 쪼그라들어
	   max-width 가 아무 일도 하지 않는다. 실측 235px 로 붙어 있었다. */
	width: 100%;
	max-width: 380px;
	margin: 8px auto;
	padding: 30px 26px 28px;
	background: var(--page);
	border: 1px solid var(--line);
	border-radius: var(--r2);
	box-shadow: var(--sh1);
}

.form-narrow h1 { margin-bottom: 20px; font-size: 21px; text-align: center; color: var(--ink); }
.form-narrow .field { margin-bottom: 9px; }

.form-narrow input[type=text],
.form-narrow input[type=password],
.form-narrow input[type=email] { height: 46px; padding-top: 0; padding-bottom: 0; }

.form-narrow .btn { width: 100%; height: 46px; font-size: 15px; margin-top: 6px; }
.form-narrow .links { margin-top: 18px; text-align: center; font-size: 13px; }
.form-narrow .links a { margin: 0 7px; color: var(--dim); font-weight: 600; }
.form-narrow .links a:hover { color: var(--brand-text); }

@media (max-width: 640px) {
	.write { padding: 18px 15px 20px; }

	/* 손에 쥐고 쓰는 화면에서는 여백보다 입력칸이 크다. 폭을 다 쓴다. */
	.form-narrow { max-width: none; margin: 0; padding: 26px 18px 24px; }
}

@media (pointer: coarse) {
	.write input[type=text], .write input[type=password], .write input[type=email],
	.write select, .write textarea,
	.form-narrow input[type=text], .form-narrow input[type=password], .form-narrow input[type=email],
	.search-form input[type=search],
	.cmt-form textarea, .cmt-form input[type=text], .cmt-form input[type=password] {
		font-size: 16px;
	}
}