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

section.latest-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)
				clamp(80px, 10%, 120px)
				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),
				&:nth-child(4) {
					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;
			}

			.prefix {
				color: #333;
				padding-right: 0.5rem;
			}

			.board-name {
				color: #666;
				font-size: 0.813rem;
				padding-right: 0.5rem;
			}

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

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

				> em {
					display: inherit;
					font-style: normal;

					> span {
						color: #d13232;
						font-size: 0.813rem;
						vertical-align: text-top;
						padding-right: 4px;
					}
				}

				> svg {
					padding-right: 4px;
					color: #9c9898;
				}

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

			// PC
			ol {
				display: grid;
				grid-template-columns:
					clamp(50px, 5%, 80px)
					clamp(80px, 10%, 120px)
					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) {
						text-align: left;
						color: #666;
						font-size: 0.875rem;
					}

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

					&:nth-child(4) {
						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;
				}
			}
		}
	}
}