.post-container2 {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}
.post-title {
    color: #333333;
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.5em;
}

.post-author a {
	color:#000;
	text-decoration:none;
}

.post-author a:hover {
	text-decoration:underline;
}

.private-post {
	font-size:0.8rem;
	color:yellow;
	margin-left:10px;
}

.post-content {
    color: #444444;
    margin-bottom: 20px;
    line-height: 1.6;
}

.post-content img {
	max-width:100%;
}

.post-tags {
    margin-bottom: 20px;
}
.tag {
    display: inline-block;
    background-color: #322b2e;
    color: #ffffff;
    padding: 5px 10px;
    margin-right: 5px;
    font-size: 0.8em;
    border-radius: 5px;
}
.post-actions {
    margin-bottom: 20px;
    text-align: center;
}
.like-button {
    /* background-color: #322b2e; */
	background:none;
    color: #eeeeee;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 0.9rem;
}
.like-button.liked {
	background:none;
    background-color: orangered;
}
.comments-section {
    margin-top: 30px;
}
.comment-form textarea {
	width: 95%;
    height: 42px;
    margin-bottom: 10px;
    background-color: #252830;
    border: 1px solid #000000;
    color: #eee;
    border-radius: 5px;
    padding: 10px;
    font-size: 1em;
    resize: vertical;
}

.comment-form textarea:focus {
	outline: none !important;

    box-shadow: 0 0 10px #719ECE;
}

.comment-form button {
    background-color: #717790;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 1em;
}
.comments-list {
    margin-top: 20px;
}
.comment {
    background-color: #444857;
    /* border: 1px solid #e0e0e0; */
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}
.comment-meta {
    display: flex;
    justify-content: space-between;
    color: #666666;
    margin-bottom: 10px;
    font-size: 0.9em;
}
.comment-content {
    color: #eee;
    line-height: 1.6;
	font-size:0.9rem;
	padding-bottom:10px;
	margin-bottom:10px;
	
}
.comments-disabled {
    color: #322b2e;
    font-style: italic;
    text-align: center;
}


.comment-link {
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    text-decoration: none;
}

.comment-count {
    margin-left: 5px;
    font-size: 0.9em;
}

.comment-section {
    display: flex;
    align-items: center;
}

.comment-link {
    margin-right: 10px;
    color: #00ffff;
    text-decoration: none;
}

.comment-profile-images {
    display: flex;
    align-items: center;
}



.bot-comment {
	font-size:0.8rem;
	color:#b2ff00;
	margin-left:5px;
}

.more-comments {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #a5a5a5;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    margin-left: 5px;
}

/* 기존 CSS 스타일 포함 */
#loading {
    /*
	position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
	*/
    padding: 10px 20px;
    /* background-color: rgba(170, 170, 170, 0.7); */
    color: #ccc;
	text-align:center;
	margin-bottom:20px;
    
	border-radius: 20px;
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
	
    font-size: 1em;
    font-weight: bold;
    display: none;
    z-index: 1000;
}

.spinner {
    display: inline-block;
    margin-right: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.fa-spinner {
    animation: spin 2s linear infinite;
}

h2#comments {
	font-size:1.0rem;	
}


.need-login-comment {
	border:1px solid #111;
	padding:10px;
	background:#444857;
	border-radius:10px;
}

.post-container {
	padding:20px;
	background: #2c303a;
    margin: 10px auto;
    border-radius: 10px;
}

@media (max-width:567px){
	.post-container {
		padding:20px 10px;
	}
}


.post-container .post-image {
    height: 300px;
    width: auto;
    object-fit: cover;
    border-radius: 5px;
    cursor: pointer;
	margin-bottom:10px;
}


.comment-content ul {
	padding:0;	
}

.comment-content ol {
	padding-left:12px;
}
.comment-content ul li {
	list-style:none;
	padding:5px;
}

.comment.reply {
    padding-left: 10px;
	border-radius:0;
}

.comment.reply.sp {
	border-bottom: 1px solid #000;
    box-shadow: 0px 1px 0px 0px #686868;
}

.comment.reply .comment-content {
	padding-bottom:0;
	margin-bottom:0;
	padding-left:8px;
}

.replies {
	border-left:5px solid #717790;
	margin-left:20px;
	padding-left:10px;
	padding-top:10px;
}

.replies .replies {
	padding-left:0px;
	margin-left:0px;
	border-left:none;
}

.replies .comment {
	padding-left:0px;
	margin-bottom:0px;
	padding-bottom:0px;
}

.replies .comment-content {
	margin-bottom:0px;
	padding-bottom:0px;
}

.reply-button {
	background: none; /* 배경 제거 */
	border: none; /* 테두리 제거 */
	color: #ffffff; /* 다크모드에 어울리는 텍스트 색상 */
	font-size: 0.9rem; /* 아이콘 크기 조절 */
	cursor: pointer; /* 커서 변경 */
	padding: 5px; /* 패딩 추가 */
}
.reply-button i {
	margin-right: 5px; /* 아이콘과 텍스트 사이 여백 */
}
.reply-button:hover {
	color: #bbbbbb; /* 호버 시 색상 변경 */
}

reply-form {
	background-color: #1e1e1e; /* 폼 배경 색상 */
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 그림자 효과 */
	margin-bottom: 10px;
}
.reply-form textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid #333;
	border-radius: 4px;
	background-color: #2b2b2b;
	color: #ffffff;
	resize: vertical; /* 세로 크기 조절 허용 */
	margin-bottom: 10px;
}
.reply-form button {
	background-color: #3a3a3a; /* 버튼 배경 색상 */
	color: #ffffff;
	border: none;
	padding: 10px 15px;
	border-radius: 4px;
	cursor: pointer;
	margin-right: 5px;
}
.reply-form button:hover {
	background-color: #555555; /* 버튼 호버 배경 색상 */
}

.post-content a, .comment-content a {
	color:orange;
	text-decoration:none;
	
}

.comment-content img {
	max-width:100%;
}