@charset "utf-8";
/* board_basic/commnet.php*/
.comments { 
	margin-top:0.5rem;
	padding:0; background-color:ghostwhite; 
	width: 100%; 
	max-width: 1200px; 
}
.comment { 
	padding:1rem; 
	border-bottom:1px solid #eee; 
	display:flex; 
	flex-direction:column; gap:0.5rem; 
}
.comment-author { 
	font-weight:bold; 
	font-size:1rem; 
	color:#333; 
}
.comment .info { 
	font-size:0.85rem; 
	color:#777; 
}
.comments .text { 
	font-size:1rem; 
	/* line-height: 1.4;**는 줄 간격을 폰트 크기의 1.4배로 설정하라는 의미이며, CSS 모범 사례에 가장 부합하는 방식입니다 */
	line-height:1.4; 
	/* pre속성: html 소스코드에 있는 줄바꿈문자(/n)과 공백을 그대로 화면에 유지한다. wrap속성: 내용이 컨테이이너 너비를 초과하면 자동으로 줄을 바꾼다. */
	white-space:pre-wrap;  
	padding:0.5rem; 
	background-color: #E8E0E0; 
}
.comment .actions { 
	display:flex; 
	gap:0.5rem; 
}
.comment .actions .vote-btn { 
	background:#eee; 
	border:none; 
	border-radius:4px; 
	padding:0.4rem 0.8rem; 
	font-size:0.9rem; 
	cursor:pointer; 
}
.comment .actions .vote-btn:hover { background:#ddd; }
.comment-form { 
	margin-top:1rem; 
	display:flex; 
	flex-direction:column; 
	gap:0.5rem; 
}
.comment-form textarea { 
	width:100%; 
	padding:0.8rem; 
	font-size:1rem; 
	line-height:1.5; 
	border:1px solid #ccc; 
	border-radius:5px; 
	resize:vertical; 
	min-height:100px; 
	transition:border-color 0.2s, box-shadow 0.2s; 
}
.comment-form textarea:focus { 
	outline:none; 
	border-color:#007bff; 
	box-shadow:0 0 0 2px rgba(0,123,255,0.25); 
}
.comment-form textarea::placeholder { color:#999; }
.comment-form .btn { 
	align-self:flex-end; 
	background:#007bff; 
	color:#fff; 
	padding:0.6rem 1.2rem; 
	border:none; 
	border-radius:4px; 
	cursor:pointer; 
	font-size:0.9rem; 
}
.comment-form .btn:hover { background:#0056b3; }

/* Pagination reuse */
.pagination { 
	text-align:center; 
	margin:1.5rem 0; 
}
.pagination a, .pagination span { 
	display:inline-block; 
	padding:0.4rem 0.8rem; 
	margin:0 0.2rem; 
	text-decoration:none; 
	border:1px solid #ccc; 
	border-radius:3px; 
	font-size:0.9rem; color:#333; 
}
.pagination .active { 
	background:#007bff; 
	color:#fff; 
	border-color:#007bff; 
}

/* Responsive */
@media (max-width:599px) {
  .comment { padding:0.8rem; }
  .comment .actions { flex-wrap:wrap; }
  .comment-form { flex-direction:column; }
}
@media (min-width:600px) {
  .comment { flex-direction:row; align-items:flex-start; }
  .comment-author { flex:0 0 120px; }
  .comment .info, .comment .text { flex:1; }
  .comment .actions { flex:0 0 auto; align-self:center; }
  .comment-form { flex-direction:row; align-items:flex-start; }
  .comment-form textarea { flex:1; }
  .comment-form .btn { margin-left:1rem; align-self:center; }
}