/*댓글*/
/* 댓글 전체 영역 */
.comment-wrap {
    max-width: 950px;
    margin-top: 30px;
    padding-bottom: 40px;
    font-family: 'Noto Sans KR', sans-serif;
}

.comment-title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 18px;
    color: #222;
}

/* 댓글 작성 박스 */
.comment-write-box {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
}

.comment-write-box .comment-editor {
    width: 97%;
    height: 30px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px;
    resize: none;
    font-size: 13px;
}

.btn-comment {
    width: 65px;
    height: 30px;
    border: none;
    background: #4a90e2;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
}

.btn-comment:hover {
    background: #357ac8;
}

/* 댓글 리스트 */
.comment-list {
    display: flex;
    flex-direction: column;
    /*gap: 22px;*/
}

/* 개별 댓글 */
.comment-item {
    display: flex;
    /*gap: 12px;*/
}

/* 프로필 */
.comment-profile img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
}

/* 본문 */
.comment-body {
    flex: 1;
}

/* 닉네임 + 날짜 줄 */
.comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.nickname {
    font-size: 14px;
    font-weight: 700;
    color: #111;
}

.comment-date {
    font-size: 12px;
    color: #888;
}

/* 댓글 텍스트 */
.comment-content {
    font-size: 14px;
    color: #333;
    margin-bottom: 6px;
    line-height: 1.5;
}

/* 버튼들 */
.comment-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.like-btn,
.dislike-btn,
.reply-btn {
    cursor: pointer;
    user-select: none;
    color: #555;
}

.like-btn:hover { color: #0a8f00; }
.dislike-btn:hover { color: #cf0000; }
.reply-btn:hover { color: #4a90e2; }

/******** 다크모드 ********/
body.dark-mode .comment-title { color: #f1f1f1; }
body.dark-mode .nickname { color: #fff; }
body.dark-mode .comment-date { color: #aaa; }
body.dark-mode .comment-content { color: #ddd; }

body.dark-mode .comment-write-box textarea {
    background: #1c1c1c;
    border: 1px solid #444;
    color: #eee;
}

body.dark-mode .comment-item {
    border-color: #333;
}

body.dark-mode .like-btn:hover { color: #30ff30; }
body.dark-mode .dislike-btn:hover { color: #ff4747; }
body.dark-mode .reply-btn:hover { color: #6aa8ff; }

.reply-item {
    margin-left: 30px;
    /*background: #fafafa;*/
    /*border-left: 2px solid #ddd;*/
    padding-left: 10px;
}

.comment-actions span {
    cursor: pointer;           /* 손가락 커서 */
    margin-right: 8px;
    padding: 2px 4px;
    border-radius: 4px;
    transition: 0.15s;
    font-size: 12px;
    color: #666;
}

/* 수정 버튼 */
.comment-actions .edit-btn:hover {
    background-color: #e8f0ff;
    color: #2267d8;
}

/* 삭제 버튼 */
.comment-actions .delete-btn:hover {
    background-color: #ffe8e8;
    color: #d82222;
}

/* 답글 버튼 */
.comment-actions .reply-btn:hover {
    background-color: #f0f0f0;
    color: #333;
}

/*zzzzzzzzzzzz*/
/* 대댓글 입력 박스 */
.reply-box {
    margin-top: 8px;
    margin-left: 48px; /* 들여쓰기만 약간 */
    padding: 0;
    display: flex;
    gap: 8px;
}

.reply-box textarea {
    width: 70%;
    min-height: 36px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 12px;
    resize: none;
}

.reply-box button {
    padding: 6px 12px;
    background: #4a90e2;
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    height: 53px;
}

.reply-box button:hover {
    background: #357ac8;
}

/* DARK MODE */
body.dark-mode .reply-box textarea {
    background: #222;
    color: #eee;
    border-color: #555;
}
body.dark-mode .reply-box button {
    background: #5fa0ff;
}

/* ✅ 개미티콘 버튼 (댓글/대댓글 공통) */
.ant-emoji-toggle,
.reply-emoji-btn {
    display: inline-block;
    margin-top: 5px;
    font-size: 12px;
    color: #888;
    cursor: pointer;
    transition: 0.2s;
}

.ant-emoji-toggle:hover,
.reply-emoji-btn:hover {
    color: #16a085;
    transform: scale(1.05);
}

/* ✅ 개미티콘 패널 */
.ant-emoji-panel {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 8px;
    margin-top: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    animation: slideUp 0.25s ease;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ✅ 개미티콘 이미지 */
.ant-emoji-panel img {
    width: 55px;
    height: 55px;
    cursor: pointer;
    transition: 0.2s ease;
}
.ant-emoji-panel img:hover {
    transform: scale(1.15);
}

/* ✅ 댓글/대댓글 내 표시되는 개미티콘 */
.comment-content img,
.reply-content img {
    width: 70px !important;
    height: 70px !important;
    vertical-align: middle;
    margin: 0 3px;
}

/* ✅ reply-box 액션 영역 */
.reply-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.reply-submit {
    background: #16a085;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.2s;
}
.reply-submit:hover {
    background: #13876b;
}