// 댓글
#comments {
	.comment-header {
		display: grid;
		grid-template-columns: 1fr auto auto;
		align-items: center;
		margin-bottom: 10px;
		gap: 10px;

		article {
			&:nth-of-type(1) {
				font-weight: bold;

				> em {
					font-style: normal;
					color: #d51b28;
				}
			}

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

				select {
					height: inherit;
				}
			}
		}
	}

	.write-form {
		display: grid;
		grid-template-rows: 1fr auto;
		grid-template-columns: auto 1fr auto;
		grid-template-areas: "thumb textarea textarea"
							 "thumb controls buttons";
		row-gap: 7px;
		column-gap: 10px;

		div {
			&:nth-of-type(1) {
				grid-area: thumb;
			}

			&:nth-of-type(2) {
				grid-area: textarea;

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

			&:nth-of-type(3) {
				grid-area: controls;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				gap: 7px;
			}

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

	.edit-form {
		display: grid;
		grid-template-rows: 1fr auto;
		grid-template-columns: 1fr auto;
		grid-template-areas: "textarea textarea"
							 "controls buttons";
		row-gap: 7px;
		column-gap: 10px;

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

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

			&:nth-of-type(2) {
				grid-area: controls !important	;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				gap: 7px;
			}

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

	.comment-list {
		position: relative;

		ol {
			list-style: none;
			display: flex;
			flex-direction: column;
			margin: 0;
			gap: 10px;

			> li {
				display: grid;
				grid-template-rows: auto 1fr auto;
				grid-template-columns: auto 1fr auto;
				grid-template-areas: "thumb header controls"
									 "thumb content content"
									 "_ footer footer";
				row-gap: 7px;
				column-gap: 10px;
				margin-bottom: 10px;
				border-bottom: 1px solid #eee;

				div {
					// 댓글 작성자 사진
					&:nth-of-type(1) {
						grid-area: thumb;
					}

					// 댓글 작성자, 작성일시
					&:nth-of-type(2) {
						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: #999;
								}

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

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

						> button {
							padding: 0 15px;

							&:hover, &:focus, &:active {
								background-color: #f0f0f0;
								outline: 1px solid #dedede;
								border-radius: 3px;
							}
						}
					}

					// 댓글 내용
					&:nth-of-type(4) {
						grid-area: content;
					}

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

						> button {
							color: #666;

							/*
							// 좋아요, 싫어요 버튼 스타일
							&:nth-of-type(1),
							&:nth-of-type(2) {
								padding: 0 15px;
								outline: 1px solid #dedede;
								border-radius: 3px;

								&:hover, &:focus, &:active {
									background-color: #f0f0f0;
								}
							}
							*/

							&:nth-of-type(1) {
								color: #0D6295;

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