bitforum-frontend/app/(forum)/board/_component/style.scss

#listHeaderContent {
	margin-bottom: 10px;
}

#listFooterContent {
	margin-top: 10px;
}

// 일반 게시판
section.default-list-layout {
	border-top: 1px solid #eaeaea;
	margin: 0.75rem 0;

	article:nth-of-type(1) {
		background-color: #f9fafb;
		border-bottom: 1px solid #eaeaea;
		padding: 0.5rem 0;

		ul {
			display: grid;
			grid-template-columns:
				clamp(50px, 5%, 80px)
				1fr
				clamp(100px, 14%, 190px)
				clamp(80px, 10%, 100px)
				clamp(50px, 9%, 100px)
				clamp(50px, 9%, 100px);
			column-gap: 0.75rem;

			li {
				text-align: center;

				&:nth-child(2),
				&:nth-child(3) {
					text-align: left;
				}
			}
		}

		@media (max-width: 1024px) {
			display: none;
		}
	}

	article:nth-of-type(2) {
		box-sizing: border-box;

		section {
			padding: 0.5rem 0;
			box-sizing: inherit;
			border-bottom: 1px solid #eaeaea;

			&.active,
			&:hover {
				background-color: #faffd1;
			}

			button {
				color: #333;
				padding-right: 0.5rem;

				&:hover {
					text-decoration: underline;
					color: #0060a9;
				}
			}

			a {
				color: #0060a9;
				text-decoration: none;

				&:hover {
					text-decoration: underline;
					color: #c7511f;
				}

				> em {
					display: inherit;
					font-style: normal;
					padding-right: 0.5rem;

					> span {
						color: #d13232;
					}
				}

				> span {
					display: inline-block;
					vertical-align: middle;
				}
			}

			// PC
			ol {
				display: grid;
				grid-template-columns:
					clamp(50px, 5%, 80px) // 번호
					1fr // 제목
					clamp(100px, 14%, 190px) // 작성자
					clamp(80px, 10%, 100px) // 작성일
					clamp(50px, 9%, 100px) // 조회수
					clamp(50px, 9%, 100px); // 추천수
				column-gap: 0.75rem;
				align-items: center;

				li {
					text-align: center;

					&:nth-child(2) {
						min-width: 0;
						text-align: left;
						word-break: keep-all;
						overflow-wrap: break-word;
						text-overflow: ellipsis;
					}

					&:nth-child(3) {
						text-align: left;
					}
				}
			}

			// Mobile
			dl {
				dt {
					font-size: 1.063rem;
					word-break: keep-all;
					overflow-wrap: break-word;
					text-overflow: ellipsis;
				}

				dd {
					ul {
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						justify-content: start;
						padding-top: 0.5rem;
						column-gap: 1.063rem;

						li {
							font-size: 0.875rem;

							&:last-child {
								flex-grow: 1;
								text-align: right;
							}
						}
					}
				}
			}

			@media (max-width: 1024px) {
				ol {
					display: none;
				}
				dl {
					display: block;
				}
			}
		}
	}
}

// 1:1 문의 게시판
section.qna-list-layout {
	border-top: 1px solid #eaeaea;
	margin: 0.75rem 0;

	article:nth-of-type(1) {
		background-color: #f9fafb;
		border-bottom: 1px solid #eaeaea;
		padding: 0.5rem 0;

		ul {
			display: grid;
			grid-template-columns:
				clamp(50px, 5%, 80px) // 번호
				1fr // 제목
				clamp(100px, 14%, 190px) // 작성자
				clamp(100px, 10%, 100px) // 답변 여부
				clamp(80px, 10%, 100px); // 작성일
			column-gap: 0.75rem;

			li {
				text-align: center;

				&:nth-child(2),
				&:nth-child(3) {
					text-align: left;
				}
			}
		}

		@media (max-width: 1024px) {
			display: none;
		}
	}

	article:nth-of-type(2) {
		box-sizing: border-box;

		section {
			padding: 0.5rem 0;
			box-sizing: inherit;
			border-bottom: 1px solid #eaeaea;

			&.active,
			&:hover {
				background-color: #faffd1;
			}

			button {
				color: #333;
				padding-right: 0.5rem;

				&:hover {
					text-decoration: underline;
					color: #0060a9;
				}
			}

			a {
				color: #0060a9;
				text-decoration: none;

				&:hover {
					text-decoration: underline;
					color: #c7511f;
				}

				> em {
					display: inherit;
					font-style: normal;
					padding-right: 0.5rem;

					> span {
						color: #d13232;
					}
				}

				> span {
					display: inline-block;
					vertical-align: middle;
				}
			}

			// PC
			ol {
				display: grid;
				grid-template-columns:
					clamp(50px, 5%, 80px) // 번호
					1fr // 제목
					clamp(100px, 14%, 190px) // 작성자
					clamp(100px, 10%, 100px) // 답변 여부
					clamp(80px, 10%, 100px); // 작성일
				column-gap: 0.75rem;
				align-items: center;

				li {
					text-align: center;

					&:nth-child(2) {
						min-width: 0;
						text-align: left;
						word-break: keep-all;
						overflow-wrap: break-word;
						text-overflow: ellipsis;
					}

					&:nth-child(3) {
						text-align: left;
					}
				}
			}

			// Mobile
			dl {
				dt {
					font-size: 1.063rem;
					word-break: keep-all;
					overflow-wrap: break-word;
					text-overflow: ellipsis;
				}

				dd {
					ul {
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						justify-content: start;
						padding-top: 0.5rem;
						column-gap: 1.063rem;

						li {
							font-size: 0.875rem;

							&:last-child {
								flex-grow: 1;
								text-align: right;
							}
						}
					}
				}
			}

			@media (max-width: 1024px) {
				ol {
					display: none;
				}
				dl {
					display: block;
				}
			}
		}
	}
}

// 공지사항
section.notice-list-layout {
	border-top: 1px solid #eaeaea;
	margin: 0.75rem 0;

	article:nth-of-type(1) {
		background-color: #f9fafb;
		border-bottom: 1px solid #eaeaea;
		padding: 0.5rem 0;

		ul {
			display: grid;
			grid-template-columns:
				clamp(50px, 5%, 80px) // 번호
				1fr // 제목
				clamp(100px, 14%, 190px) // 작성자
				clamp(80px, 10%, 100px) // 작성일
				clamp(50px, 9%, 100px); // 조회수
			column-gap: 0.75rem;

			li {
				text-align: center;

				&:nth-child(2),
				&:nth-child(3) {
					text-align: left;
				}
			}
		}

		@media (max-width: 1024px) {
			display: none;
		}
	}

	article:nth-of-type(2) {
		box-sizing: border-box;

		section {
			padding: 0.5rem 0;
			box-sizing: inherit;
			border-bottom: 1px solid #eaeaea;

			&.active,
			&:hover {
				background-color: #faffd1;
			}

			button {
				color: #333;
				padding-right: 0.5rem;

				&:hover {
					text-decoration: underline;
					color: #0060a9;
				}
			}

			a {
				color: #0060a9;
				text-decoration: none;

				&:hover {
					text-decoration: underline;
					color: #c7511f;
				}

				> em {
					display: inherit;
					font-style: normal;
					padding-right: 0.5rem;

					> span {
						color: #d13232;
					}
				}

				> span {
					display: inline-block;
					vertical-align: middle;
				}
			}

			// PC
			ol {
				display: grid;
				grid-template-columns:
					clamp(50px, 5%, 80px) // 번호
					1fr // 제목
					clamp(100px, 14%, 190px) // 작성자
					clamp(80px, 10%, 100px) // 작성일
					clamp(50px, 9%, 100px); // 조회수
				column-gap: 0.75rem;
				align-items: center;

				li {
					text-align: center;

					&:nth-child(2) {
						min-width: 0;
						text-align: left;
						word-break: keep-all;
						overflow-wrap: break-word;
						text-overflow: ellipsis;
					}

					&:nth-child(3) {
						text-align: left;
					}
				}
			}

			// Mobile
			dl {
				dt {
					font-size: 1.063rem;
					word-break: keep-all;
					overflow-wrap: break-word;
					text-overflow: ellipsis;
				}

				dd {
					ul {
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						justify-content: start;
						padding-top: 0.5rem;
						column-gap: 1.063rem;

						li {
							font-size: 0.875rem;

							&:last-child {
								flex-grow: 1;
								text-align: right;
							}
						}
					}
				}
			}

			@media (max-width: 1024px) {
				ol {
					display: none;
				}
				dl {
					display: block;
				}
			}
		}
	}
}

// 사진/영상 게시판
.album-list-layout {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
	gap: 12px;
	border-bottom: 1px solid #eaeaea;
	padding-bottom: 0.75rem;
	justify-items: center;
	align-items: start;
	margin-bottom: 0.75rem;

	> div {
		width: 100%;

		figure {

			// 대표 이미지
			article {
				a {
					display: block;
					position: relative;
					width: 100%;
					aspect-ratio: 16 / 9;
					overflow: hidden;

					img:hover, img:focus {
						border: 1px solid #eb7441;
					}
				}
			}

			dl {

				// 제목
				dt {

					// 말머리
					button {
						color: #333;
						padding-right: 0.5rem;

						&:hover {
							text-decoration: underline;
							color: #0060a9;
						}
					}

					a {
						display: inline-block;
						color: #0060a9;
						text-decoration: none;
						padding-top: 7px;

						&:hover {
							text-decoration: underline;
							color: #c7511f;
						}

						> em {
							font-style: normal;
							padding-right: 0.25rem;
							overflow-wrap: anywhere;
						}

						> span {
							display: inline-block;
							vertical-align: middle;
						}
					}
				}

				// 작성자
				dd {
					text-align: right;
				}
			}

			// 추천 수, 조회 수, 작성일
			figcaption {
				ul {
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					justify-content: end;
					padding-top: 0.5rem;
					column-gap: 1.063rem;

					li {
						font-size: 0.875rem;
					}
				}
			}
		}
	}

	> p {
		padding: 6.25rem 0;
		text-align: center;
		border-bottom: 1px solid #eaeaea;
	}
}