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

// 댓글
#comments {

	// 댓글창 상단
	.comment-header {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		margin-bottom: 0;
		gap: 10px;

		article {
			padding-bottom: 8px;

			// 댓글 수
			&:nth-of-type(1) {
				font-weight: bold;
				font-size: 1.25rem;
				padding-right: 10px;

				> em {
					font-style: normal;
					color: var(--color-danger);
				}
			}

			// 정렬
			&:nth-of-type(2) {
				height: 100%;

				select {
					height: inherit;
				}
			}
		}

		@media (max-width: 576px) {
			grid-template-columns: auto auto 1fr;
		}
	}

	// 댓글 입력 란
	.write-form {
		display: flex;
		flex-direction: row;
		justify-items: stretch;
		column-gap: 20px;
		padding: 10px 0;

		> div:nth-of-type(1) {
			img {
				width: clamp(1.5rem, 8vw, 4.5rem);
				max-height: 72px;

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

		> div:last-of-type {
			display: grid;
			grid-template-rows: 1fr auto;
			grid-template-columns: 1fr auto;
			grid-template-areas: "textarea textarea"
								 "controls buttons";
    		width: 100%;
			row-gap: 6px;
			column-gap: 0;

			> div {
				&:nth-of-type(1) {
					grid-area: textarea;

					> textarea {
						width: 100%;
						resize: none;
						overflow-y: hidden;
					}
				}

				&:nth-of-type(2) {
					grid-area: controls;
					display: flex;
					flex-direction: row;
					column-gap: 7px;
    				align-items: center;
				}

				&:nth-of-type(3) {
					grid-area: buttons;
					display: flex;
					flex-direction: row;
					flex-wrap: nowrap;
					justify-content: flex-end;
					gap: 8px;
				}
			}
		}
	}

	// 댓글 수정란
	.edit-form {
		display: grid;
		grid-template-rows: 1fr auto;
		grid-template-columns: 1fr auto;
		grid-template-areas: "textarea textarea"
							 "controls buttons";
		row-gap: 6px;
		column-gap: 0;

		> div {
			&:nth-of-type(1) {
				grid-area: textarea;

				> textarea {
					width: 100%;
					resize: none;
					overflow-y: hidden;
				}
			}

			&:nth-of-type(2) {
				grid-area: controls;
				display: flex;
				flex-direction: row;
				column-gap: 7px;
				align-items: center;
			}

			&:nth-of-type(3) {
				grid-area: buttons;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: flex-end;
				gap: 8px;
			}
		}
	}

	// 멘션 자동완성
	.mention-suggestion {
		position: absolute;
		bottom: 100%;
		left: 0;
		right: 0;
		z-index: 10;
		background: var(--bg-page);
		border: 1px solid var(--border-default);
		border-radius: 6px;
		box-shadow: 0 2px 8px var(--shadow-color);
		max-height: 200px;
		overflow-y: auto;

		ul {
			list-style: none;
			margin: 0;
			padding: 4px 0;

			li {
				display: flex;
				align-items: center;
				gap: 10px;
				padding: 8px 12px;
				cursor: pointer;

				img {
					width: 28px;
					height: 28px;
					border-radius: 50%;
					object-fit: cover;
				}

				span {
					font-size: 0.875rem;
					font-weight: 500;
				}

				small {
					font-size: 0.75rem;
					color: var(--text-muted);
				}

				&.selected,
				&:hover {
					background: var(--bg-subtle);
				}
			}
		}
	}

	// QnA 답변 대기 안내
	.qna-pending-notice {
		text-align: center;
		padding: 2rem;
		color: var(--color-warning-text);
		background: var(--color-warning-bg);
		border: 1px solid rgba(202, 138, 4, 0.2);
		border-radius: 0.5rem;
		margin: 0 0 1rem 0;

		p {
			margin: 0.25rem 0;

			&:first-child {
				font-weight: 600;
				font-size: 1.05rem;
			}

			&:last-child {
				font-size: 0.875rem;
				color: #a16207;
			}
		}
	}

	// 댓글 목록
	.comment-list {
		position: relative;
		margin-top: 10px;
		border-top: 1px solid var(--border-default);
		border-bottom: 1px solid var(--border-default);

		ol {
			list-style: none;
			display: flex;
			flex-direction: column;
			width: 100%;
			margin: 0;
			gap: 0;

			> li {
				display: flex;
    			flex-direction: row;
				column-gap: 20px;
				padding: 14px 0 10px 0;
				border-bottom: 1px solid var(--border-default);

				// 대댓글 래퍼는 그리드 해제
				&:has(> ol) {
					padding: 0;
				}

				// 댓글 작성자 사진
				> div:nth-of-type(1) {
					img {
						width: clamp(1.5rem, 8vw, 4.5rem);
						max-height: 72px;
					}

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

				// 댓글 정보들
				> div:last-of-type {
					display: grid;
					grid-template-rows: auto auto auto;
					grid-template-columns: 1fr auto;
					grid-template-areas: "header controls"
										"content content"
										"footer footer";
					width: 100%;
					row-gap: 8px;
					column-gap: 0;

					// 답글 폼 (article.write-form)
					> article:nth-of-type(1) {
						grid-column: 1 / -1;
					}

					@media (max-width: 364px) {
						row-gap: 0;
					}

					> div {
						// 댓글 작성자, 작성일시
						&:nth-of-type(1) {
							grid-area: header;

							> ul {
								display: flex;
								flex-wrap: wrap;
								column-gap: 7px;
								row-gap: 0;
								list-style: none;

								li {
									position: relative;

									// 가운데 점 추가
									&::after {
										content: '·';
										margin-left: 7px;
										color: var(--text-muted);
									}

									// 마지막 li는 점 숨김
									&:last-child::after {
										content: '';
										margin: 0;
									}

									> span {
										font-size: 0.875rem;
										font-weight: 500;
									}

									> small {
										font-size: 0.813rem;
									}
								}
							}
						}

						// 댓글 관리
						&:nth-of-type(2) {
							grid-area: controls;

							> button {
								padding: 0 4px;

								&:hover, &:focus, &:active {
									background-color: var(--bg-subtle);
									outline: 1px solid var(--border-default);
									border-radius: 3px;
								}
							}
						}

						// 댓글 내용
						&:nth-of-type(3) {
							grid-area: content;
							font-size: 0.938rem;

							> .mention {
								color: #550eaf;
							}

							// 첨부 파일
							section.file-embed {
								display: inline-block;
								width: max-content;
								max-width: 100%;
								padding: 5px 40px;
								border: 1px solid var(--border-strong);
								border-radius: 5px;
								background: var(--bg-elevated);
								margin: 5px 0;
								box-sizing: border-box;

								.file-icon svg {
									width: 19px;
									height: 19px;
									display: inline-block;
									vertical-align: sub;
									padding-right: 5px;
								}

								&.image-style-align-left {
									margin-left: 0;
									margin-right: auto;
								}

								&.image-style-align-center {
									display: block;
									margin-left: auto;
									margin-right: auto;
								}

								&.image-style-align-right {
									margin-left: auto;
									margin-right: 0;
								}

								&:hover {
									background-color: var(--bg-subtle);
									border-color: var(--text-link-hover);
									cursor: pointer;
								}
							}
						}

						// 답글/좋아요/싫어요
						&:nth-of-type(4) {
							grid-area: footer;
							position: relative;
							display: flex;
							flex-direction: row;
							flex-wrap: nowrap;
							gap: 0;

							> div {
								color: var(--text-secondary);

								// 답글
								&:nth-of-type(1) {
									flex-grow: 1;
									text-align: left;

									> button {
										color: var(--text-link);

										&:hover {
											color: var(--brand-orange);
											text-decoration: underline;
										}
									}
								}

								// 좋아요, 싫어요
								&:nth-of-type(2),
								&:nth-of-type(4) {
									> button {
										padding: 0 7px;
										border-radius: 3px;

										&:hover, &:focus, &:active {
											outline: 1px solid var(--border-default);
											background-color: var(--bg-subtle);
										}

										> svg {
											font-size: 0.875rem;
										}
									}
								}

								// 좋아요 수, 싫어요 수
								&:nth-of-type(3),
								&:nth-of-type(5) {
									padding: 0 8px 0 4px;

									> em {
										font-style: normal;
										font-size: 0.813rem;
									}
								}
							}
						}
					}
				}

				&:last-of-type {
					border-bottom: 0;
				}
			}
		}
	}
}