/* form */
@import './_agreement';
@import './_input-text';
@import './_input-file';
@import './_input-check';
@import './_selectbox';

/* form-group structure */
.form-container {
	.board-detail {
		.post-title {
			border-bottom-color: #000; border-top: 0; padding-top: 0;
			.tit {
				font-size: 3.5rem;
			}
		}
	}
}

.form-group {
	.form-wrap {
		width: 100%; max-width: 800px; margin: 0 auto; 
		&.w-100pct {
			max-width: 100%;
		}
		.group {
			&:not(:first-child) {
				padding-top: 80px;
			}
			.group-title {
				border-bottom: 1px solid var(--line);
				.tit {
					font-size: 2.5rem; font-weight: 800; display: inline-block; padding-bottom: 10px; 
				}
				.txt {
					display: inline-block; padding-left: 10px; padding-bottom: 15px; 
				}
				.input-check {
					top: -8px;
				}
				&.in-flex {
					display: flex; align-items: center; gap: 15px;
					.tit {
						margin: 0;
					}
				}
			}
			.row {
				display: flex; flex-wrap: wrap; gap: 15px;
				.input-group {
					width: calc(50% - 7.5px);
					&.w-100pct {
						width: 100%;
					}
				}
			}
			.input-group {
				padding-top: 20px; 
				.tit {
					position: relative; font-size: 1.5rem; font-weight: 700; padding-bottom: 5px;
					.btn-wrap {
						margin-top: 0; position: absolute; top: -5px; right: 0;
					}
				}
				.txt {
					font-size: 2rem; font-weight: 700; line-height: 1.4;
				}
			}
		}
	}
}

.file-table {
	table {
		tr {
			&:hover {
				background-color: transparent;
			}
			td {
				text-align: left;
			}	
		}
	}
}

.in-flex {
	display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
	.in-flex-item {
		flex: 1; display: flex; align-items: center; gap: 5px;
		.input-text,
		.selectbox {
			width: calc(100% - 23px);
		}
		.unit {
			display: inline-block; font-size: 1.5rem; color: #666;
		}
	}
}

.address-group {
	display: flex; margin-bottom: 10px;
	.btn-wrap {
		width: 100px; 
		button {
			border-radius: 0 3px 3px 0; margin: 0 !important; width: 100%; height: 45px;
		}
	}
	.input-text {
		width: calc(100% - 100px); margin: 0 !important;
		input {
			border-right: 0; border-radius: 2px 0 0 2px; 
		}
	}
}

.valid {
	color: #999; font-size: 1.4rem; font-weight: 600; padding: 7px 0 0; line-height: 1.6;
	&.pd-valid {
		padding: 0 0 8px; font-weight: 400; color: #333;
	}
	&.colr-red {
		color: var(--red);
	}
	&.colr-gray {
		color: #666;
	}
	.underline {
		text-decoration: underline;
	}
}
.ess {
	display: inline-block; height: 5px; width: 5px; border-radius: 10px; background: #f05050; margin: 0 0 8px 2px;
}
.unit {
	display: inline-block; font-size: 1.5rem; color: #666;
}

.mg-b5px {
	margin-bottom: 5px;
}

.agreement-group {
	.btn-wrap {
		button {
			font-size: 1.6rem !important; height: 50px;
		}
	}
}

.btn-submit {
	margin-top: 50px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: center; gap: 10px;
	.cancel-btn {
		width: 100px; font-size: 1.5rem !important;
	}
	.save-btn {
		width: 100px; font-size: 1.5rem;	
	}
	.submit-btn {
		width: calc(100% - 210px);
	}
}

@media (max-width: 660px) {
	.btn-submit {
		margin-top: 30px; padding-top: 15px; flex-wrap: wrap; gap: 10px;
		button {
			margin: 0;
		}
		.cancel-btn {
			width: 100px;
		}
		.save-btn {
			width: calc(100% - 115px);
		}
		.submit-btn {
			width: 100%; padding: 13px 0; font-size: 1.6rem; font-weight: 700;
		}
	}
}








.inputbtn-group {
	display: flex;
	.btn-wrap {
		width: 120px !important; margin-top: 0;
		button {
			border-radius: 0 2px 2px 0; margin: 0 !important; width: 100%; height: 45px; padding: 0 !important;
		}
	}
	.input-text {
		width: calc(100% - 120px); margin: 0 !important;
		input {
			border-right: 0; border-radius: 2px 0 0 2px;  margin-top: 0 !important;
		}
	}
}

.selectbox-group {
	display: flex; flex-wrap: wrap; gap: 5px;
	.tit {
		width: 100%;
	}
	.selectbox {
		padding-top: 5px; flex: 1;
	}
}

.auth-status {
	font-size: 1.3rem; font-weight: 700; padding: 2px 8px; margin-left: 5px; border-radius: 3px; background: #eee;
	&.verified {
		background: #eeffef; color: #1a8b33; border: 1px solid #b9dbbb;
	}
	&.unverified {
		background: #ffeeee; color: #bb3131; border: 1px solid #f1c0c0;
	}
}


.small-input {
	&.pd-bot {
		padding-bottom: 13px;
	}
	.input-text {
		input {
			height: 36px;
		}
	}
	.selectbox {
		select {
			line-height: 35px;
		}
		&::after {
				width: 5px; height: 5px; right: 11px; top: 14px;
			}
	}
	.inputbtn-group {
		.btn-wrap {
			button {
				height: 36px;
			}
		}
	}
}

.search-input {
	margin-top: 10px;
	.search {
		display: flex; gap: 5px;
	}
}

.third-input {
		margin-top: 10px;
	.third {
		display: flex; gap: 5px;
		.input-text {
			input {
				margin-top: 0 !important;
			}
		}
	}
}


.row-group {
    dl {
        display: flex; align-items: center; border-bottom: 1px dashed #bbb; padding: 20px 10px; font-size: 1.6rem; line-height: 1.4;
        dt {
            width: 130px; font-weight: 600; word-break: keep-all;
        }
        dd {
            width: calc(100% - 130px); font-weight: 400;
        }
        p.txt {
            font-weight: 500;
        }
    }
}

.file-btn {
	text-align: left;
	.a-btn {
		display: inline-flex; align-items: center; gap: 5px; text-align: center;
		.file-icon {
			width: 13px; height: 13px;
		}
	}
}

.check-group {
    display: inline-flex; align-items: center; margin-top: 10px;
    .input-text {
        input {
            height: 40px !important; font-size: 1.5rem; margin-top: 0 !important;
        }
    }
}

.mt-5 {
	margin-top: 5px;
}

.mb-5 {
	margin-bottom: 5px;
}

.mt-10 {
	margin-top: 10px;
}
.mb-10 {
	margin-bottom: 10px;
}

.mt-0 {
	margin-top: 0 !important;
}

.mb-0 {
	margin-bottom: 0 !important;
}


@media (max-width: 820px) {
		.third-input {
			.third {
				flex-direction: column;
			.input-text {
				width: 100% !important;
				input {
					margin-top: 0 !important;
				}
			}
		}
	}
}



@media (max-width: 1200px) {
	.form-container {
		.board-detail {
			.post-title {
				padding: 0 0 50px;
			}
		}
	}
	.form-group {
		.form-wrap {
			padding: 0;
			.group {
				.group-title {
					.tit {
						font-size: 2rem;
					}
				}
				.input-group {
					.tit {
						font-size: 1.5rem;
					}
					.txt {
						font-size: 1.7rem;
					}
				}
			}
		}
	}
}

@media (max-width: 1024px) {
	.form-group {
		.form-wrap {
			.group {
				.row {
					flex-direction: column;
					.input-group {
						width: 100%;
					}
				}
			}
		}
	}
}

@media (max-width: 768px) {
	.form-container {
		.board-detail {
			.post-title {
				padding: 0 0 25px;
				.tit {
					font-size: 2.2rem;
				}
				.txt {
					font-size: 1.6rem;
				}
			}
		}
	}
	.form-group {
		flex-direction: column; padding: 30px 0;
		.form-wrap {
			width: 100%;
			.group {
				.group-title {
					.txt,
					.tit {
						padding-bottom: 10px;
					}
				}
				.row {
					gap: 0;
				}
				.input-group {
					.tit {
						font-size: 1.4rem; 
						.btn-wrap {
							top: -10px;
						}
					}
					.txt {
						font-size: 1.6rem;
					}
				}
			}
		}
	}
	.valid {
		font-size: 1.1rem;
	}

	.career-table {
		table {
			display: block; 
			colgroup {
				col {
					width: auto !important;
				}
			}
			thead {
				display: none;
			}
			tbody {
				display: block;
				tr {
					display: block; padding: 10px 0;
					td {
						display: block; height: auto; border: 0;
						.input-row {
							display: block;
							.input-text {
								width: 100%;
							}
							.btn-wrap {
								width: 100%; margin-top: 5px; text-align: left;
							}
						}
					}
				}
			}
			.data-label {
				position: relative; display: block;
				&:before {
					content: attr(data-label); display: block; text-align: left; font-weight: 800; padding-bottom: 5px; color: #777;
				}
			}
		}
	}
}

@media (max-width: 475px) {
	.form-container {
		.board-detail {
			.post-title {
				padding: 20px 0 40px;
				.tit {
					line-height: 1.6; padding-bottom: 20px;
				}
			}
			.info {
				text-align: left; padding: 1px 0 1px 17px; border-left: 5px solid #d0d2d3; display: block;
				span {
					display: block;
				}
			}
		}
	}
	.form-group {
		.form-wrap {
			padding: 0;
		}
	}
	.default-table {
		table {
			colgroup {
				.tit {
					width: 90px;
				}
			}
		}
	}
	.agreement-group {
		.btn-wrap {
			button {
				width: 100% !important;
			}
		}
	}
	.inputbtn-group {
		.input-text {
			width: calc(100% - 70px);
			input {
				padding-left: 10px; padding-right: 10px;
			}
		}
		.btn-wrap {
			width: 70px;
			button {
				padding-left: 0; padding-right: 0;
			}
		}
	}
	.row-group {
		&.mo-column {
			dl {
				flex-direction: column; gap: 5px;
				dt {
					width: 100%; font-weight: 700; font-size: 1.5rem;
				}
				dd {
					width: 100%; font-size: 1.4rem; line-height: 1.7;
					b {
						font-weight: 600;
					}
				}
			}
		}
		dl {
			font-size: 1.4rem; padding: 17px 5px;
			dt {
				width: 90px;
				br {
					display: none;
				}
			}
			dd {
				width: calc(100% - 90px);
			}
		}
	}
}