/* input text */
.input-text {
	display: inline-block; width: 100%; position: relative;
	&.block {
		display: block; margin-top: 5px;
	}
	input {
		width: 100%; height: 45px; display: inline-block; background: #fff; padding: 0 15px; color: #585858; border-radius: 2px; transition: background 0.1s ease; font-size: 1.5rem; border: 1px solid var(--line);
		&:hover,
		&:focus {
			border-color: #aaa;
		}
		&:read-only {
			cursor: default; background: #f2f2f2;
		}
		&:disabled {
			background: #f2f2f2; cursor: not-allowed; pointer-events: none;
		}
	}
}

/* textarea */
.input-textarea {
	display: inline-block; width: 100%; position: relative;
	textarea {
		width: 100%; resize: none; padding: 15px; font-size: 1.5rem; min-height: 200px; border: 1px solid var(--line); border-radius: 2px; position: relative; background: #fff;
		&::-webkit-scrollbar {
			width: 4px; height: 10px;
		}
		&::-webkit-scrollbar-track {
			background-color: transparent;
		}
		&::-webkit-scrollbar-thumb {
			border-radius: 10px; background-color: #dcdcdc;
		}
		&:hover,
		&:focus {
			border-color: #aaa;
		}
		&:read-only {
			cursor: default; background: #f2f2f2;
		}
		&:disabled {
			background: #f2f2f2; cursor: not-allowed; pointer-events: none;
		}
	}
	.text-limit {
		position: absolute; width: calc(100% - 20px); text-align: right; z-index: 2; bottom: 6px; right: 15px; color: #b4b4b4; cursor: default; display: inline-block; background: #fff;
		span {
			font-size: 1rem;
			&.count {
				color: #999; font-weight: 600;
			}
			&.excess {
				color: #e16060;
			}
			&.unit {
				font-size: 11px; margin-left: 2px;
			}
		}
	}
}

/* input phone */
.input-phone {
	position: relative;
	.p-group {
		display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-bottom: 5px;
		.selectbox {
			width: 80px; margin: 0 !important;
		}
		.input-text {
			flex: 1; position: relative; margin: 0 !important;
		}
		.btn-wrap {
			width: 120px;
			button {
				height: 45px; margin-top: 0 !important; padding: 0 !important; width: 100%; border-radius: 2px;
			}
		}
	}
}
.time-limit {
	position: absolute; top: 50%; transform: translateY(-50%); right: 10px; font-size: 1.2rem; color: #e14949; font-weight: 600;
}

/* input email */
.input-email {
	position: relative; display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
	.input-text {
		flex: 1; margin: 0 !important;
		&.first-input {
			position: relative;
			&:after {
				content: '@'; color: #999; position: absolute; top: 50%; transform: translateY(-50%); right: 10px; font-size: 1.5rem; font-weight: 600;
			}
		}
	}
	.selectbox {
		width: 150px; margin: 0 !important;
	}
	.btn-wrap {
		width: 100%;
		button {
			height: 45px; margin-top: 0 !important; padding: 0 !important; width: 100%; border-radius: 2px;
		}
	}
}

@media (max-width: 1024px) {
	.input-text {
		margin: 1px;
	}
}

@media (max-width: 680px) {
	.input-email {
		flex-direction: column;
		.selectbox {
			width: 100%;
		}
	}
	.input-phone {
		.p-group {
			.btn-wrap {
				width: 100px; 
				button {
					font-size: 1.3rem;
				}
			}
		}
	}
}