.board-detail {
	.post-title {
		padding: 20px 0px; border-top: 2px solid #000; word-break: keep-all;
		.tit {
			font-size: 2.7rem; padding-bottom: 20px; width: 100%;
		}
		.info-wrap {
			padding: 15px 0; border-bottom: 1px solid var(--line); border-top: 1px solid var(--line);
		}
		.info {
			display: block; flex: 1;
			span {
				display: inline-block; font-size: 1.5rem; color: #666; font-weight: 600; position: relative; letter-spacing: -0.7px;
				&:not(:last-child) {
					padding-right: 25px;
					&:after {
						content: ''; width: 1px; height: 12px; position: absolute; top: 50%; transform: translateY(-50%); right: 12px; background: #aaa;
					}
				}
				strong {
					color: #444; font-weight: 800; padding-right: 5px;
				}
			}
			.btn-wrap {
				display: inline-block; margin-top: 0;
				.a-btn {
					padding: 5px 15px; margin: 0 !important;
				}
			}
		}
	}
	.post-cont {
		padding: 60px 10px; line-height: 2; border-bottom: 1px solid var(--line); font-size: 1.6rem !important;
		.tab-area {
			ul {
				display: flex; flex-wrap: wrap; gap: 5px;
				li {
					flex: 1;
					&.active {
						a {
							color: #ffffff; font-weight: 600; background: var(--navy);
						}
					}
					a {
						display: block; text-align: center; font-size: 1.5rem; line-height: 1.3; padding: 10px 6px; font-weight: 500; color: #777; background: #ededed; border-radius: 4px;
					}
				}
			}
		}
		p {
			font-size: 1.6rem !important; font-weight: 500; line-height: 1.6;
		}
		img {
			max-width: 100% !important;
		}
	}
	.answer {
		padding: 30px 30px 30px 60px; border-bottom: 1px solid var(--line); background: #f2f2f2; position: relative;
		&:after {
			content: ''; position: absolute; top: 25px; left: 25px; width: 15px; height: 15px; border-left: 5px solid #adadad; border-bottom: 5px solid #adadad;
		}
		.info {
			display: flex; gap: 10px; padding-bottom: 20px;
			p {
				font-size: 1.6rem; position: relative;
				&:not(:last-child) {
					padding-right: 10px;
					&:after {
						content: ''; width: 1px; height: 12px; position: absolute; top: 3px; right: -1px; background: #aaa;
					}
				}
				&.admin {
					font-weight: 700;
				}
			}
		}
		.txt {
			font-size: 1.6rem; line-height: 1.6;
		}
		.file-area {
			margin-top: 15px;
			.row {
				border-bottom: 0; margin: 0 5px 5px 0; display: inline-block; background: #fff; width: auto; border: 1px solid #d9d9d9; border-radius: 5px; padding: 10px 15px; box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
				.tit {
					font-size: 1.4rem;
				}
			}
		}
	}
	.file-area {
		width: 100%;
		.row {
			width: 100%; padding: 13px 10px; border-bottom: 1px solid var(--line); background: #f7f7f7;
			.tit {
				color: #555; font-size: 1.5rem; font-weight: 600; position: relative; padding-left: 25px; word-break: break-all;
				&:after {
					content: ''; width: 18px; height: 18px; position: absolute; top: 0; left: 0; background-image: url('../img/board/file.svg'); background-size: cover; background-repeat: no-repeat;
				}
				&:hover {
					text-decoration: underline;
				}
			}
			&.down-row {
				background-color: #fff;
				.down-btn {
					font-size: 1.5rem;
					&:hover {
						text-decoration: underline;
					}
					> img {
						width: 22px; height: 22px; margin-right: 5px;
					}
				}
			}
		}
	}
}

.nav-wrap {
	.row {
		display: flex; border-bottom: 1px solid #d2d2d2;
		&:hover {
			background-color: #f7f7f7;
		}
	}
	.label {
		width: 100px; overflow: hidden; padding: 15px 0 15px 25px; font-size: 1.5rem;
		img {
			opacity: 0.7; width: 20px; height: 20px;
		}
		&.prev {
			img {
				transform: rotate(90deg);
			}
		}
		&.next {
			img {
				transform: rotate(-90deg);
			}
		}
	}
	.title {
		width: calc(100% - 100px); padding-left: 10px; display: flex; align-items: center; color: #999;
		a {
			overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; font-size: 1.5rem; color: #000;
			&:hover {
				text-decoration: underline;
			}
		}
	}
}

.detail-type2 {
	&.board-detail {
		.post-title {
			border-top: 0; text-align: center; border-bottom-color: #8D8D8D; padding-top: 0;
			.txt {
				background: #EAEAEE; color: #48535B; padding: 7px 30px; border-radius: 50px; display: inline-block; font-size: 1.5rem; font-weight: 600;
			}
			.tit {
				padding-top: 20px; font-weight: 900; font-size: 3rem;
			}
			.a-more {
				display: inline-block; color: #fff; background: #0C206A; font-size: 1.3rem; font-weight: 600; min-width: 140px; padding: 5px 20px; border-radius: 5px; line-height: 1.6;
			}
		}
		dl {
			font-size: 1.7rem; line-height: 2;
			.row {
				display: flex; padding: 30px 5px; border-bottom: 1px dashed var(--line);
				dt {
					font-weight: 900; width: 200px; position: relative;
				}
				dd {
					width: calc(100% - 200px); line-height: 1.6;
					.txt {
						position: relative; padding-left: 10px;
						&:after {
							content: ''; width: 3px; height: 3px; background: #555; border-radius: 5px; position: absolute; top: 14px; left: 0;
						}
						&:not(:last-child) {
							padding-bottom: 10px;
						}
					}
				}
			}
		}
	}
}

.hash-tag-list {
    display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px;
    .item {
        display: flex; align-items: center; gap: 5px; background: #dee6ed; border-radius: 5px; padding: 5px 10px;
        .tag {
            font-size: 1.4rem; font-weight: 600; color: #444;
        }
        .remove {
			width: 14px; height: 14px; opacity: 0.5;
			&:hover {
				opacity: 1;
			}
            img {
				width: 100%; height: 100%;
            }
        }
    }
}

@media (max-width: 1200px) {
	.board-detail {
		.post-title {
			padding: 20px 0;
		}
		.post-cont {
			padding: 30px 0;
			.list-table {
				overflow-x: auto;
				table {
					min-width: 900px; width: 100%;
				}
			}
			.tab-area {
				ul {
					display: flex; flex-wrap: wrap; gap: 5px;
					li {
						flex: 0 0 auto; min-width: 100px; max-width: calc(50% - 5px);
						a {
							font-size: 1.4rem; padding: 8px;
						}
					}
				}
			}
		}
	}
}

@media (max-width: 768px) {
	.board-detail {
		.post-title {
			.fixed {
				font-size: 1.3rem; margin-bottom: 10px;
			}
			.tit {
				font-size: 2.2rem; padding-bottom: 13px;
			}
			.info {
				span {
					font-size: 1.4rem; margin: 2px 0;
				}
			}
		}
		.post-cont {
			p {
				font-size: 1.4rem !important;
			}
		}
		.answer {
			padding: 20px 20px 20px 35px;
			&:after {
				left: 15px; top: 18px; border-width: 3px; width: 12px; height: 12px;
			}
			p {
				font-size: 1.4rem !important;
			}
			.info {
				p {
					&:not(:last-child) {
						padding-right: 0;
						&:after {
							display: none;
						}
					}
				}
			}
			.file-area {
				.row {
					padding: 7px 10px; border-radius: 3px;
				}
			}
		}
		.file-area {
			.row {
				padding: 8px;
				.tit {
					font-size: 1.25rem; padding-left: 18px;
					&:after {
						width: 15px; height: 15px;
					}
				}
			}
		}
	}
	.nav-wrap {
		.label {
			width: 80px; font-size: 1.3rem; padding-left: 15px;
			img {
				width: 15px; height: 15px;
			}
		}
		.title {
			width: calc(100% - 80px); font-size: 1.3rem;
			a {
				font-size: 1.3rem;
			}
		}
	}
	.detail-type2 {
		&.board-detail {
			.post-title {
				.tit {
					font-size: 2.3rem; padding: 10px 0 25px; line-height: 1.5;
				}
				.txt {
					font-size: 1.4rem;
				}
				.a-more {
					font-size: 1.3rem; margin: 3px;
				}
			}
			dl {
				font-size: 1.6rem; line-height: 1.8;
				.row {
					padding: 20px 5px;
					dt {
						width: 150px;
					}
					dd {
						width: calc(100% - 150px);
					}
				}
			}
		}
	}
}

@media (max-width: 580px) {
	.detail-type2 {
		&.board-detail {
			.post-title {
				.tit {
					font-size: 1.8rem; padding: 10px 0 15px;
				}
				.txt {
					font-size: 1.3rem;
				}
				.a-more {
					padding: 7px 15px; display: block; width: 100%; margin: 0 0 5px;
				}
			}
			dl {
				.row {
					padding: 15px 5px;
					&.cont {
						display: block;
						dt {
							width: 100%; padding-bottom: 7px;
						}
						dd {
							width: 100%;
						}
					}
					.a-btn {
						width: 100%;
					}
				}
			}
		}
	}
	.hash-tag-list {
		.item {
			.tag {
				font-size: 1.3rem;
			}
		}
	}
}

@media (max-width: 475px) {
	.board-detail {
		.post-title {
			.tit {
				font-size: 1.9rem;
			}
			.fixed {
				font-size: 1.2rem;
			}
			.info-wrap {
				flex-direction: column; align-items: flex-start; gap: 15px; padding: 10px 0;
				.a-btn, button {
					width: 100%;
				}
			}
			.info {
				width: 100%;
				.btn-wrap {
					display: block; margin-top: 5px; width: 100%;
					.a-btn, button {
						width: 100%; 
					}
				}
				span {
					font-size: 1.3rem;
					&:not(:last-child) {
						padding-right: 10px;
						&:after {
							display: none;
						}
					}
					&.btn-span {
						display: block;
					}
					strong {
						padding-right: 2px;
					}
				}
			}
		}
	}
}