/* 게시판 댓글 입력폼 이모지 팔레트 UI
   - 버튼: 작성폼 좌상단(작성자 아이콘 옆), 기본 그레이 → hover 시 컬러
   - 팔레트: 스마트에디터2 이모지(se2_emoji.css)와 동일 레이아웃, comment-emoji-* 네임스페이스
   - 사용처: board/comment.php(#boardNewCommentStyle), skin/board/board_suggest/comment.php */
.comment-emoji-btn {
    display: inline-block;
    padding: 0;
    margin: 0 8px 0 2px;
    background: transparent;
    border: 0;
    cursor: pointer;
    vertical-align: middle;
    line-height: 1;
    position: relative;
    top: -1px;
}

.comment-emoji-btn > span {
    display: inline-block;
    font-size: 17px;
    line-height: 1;
    filter: grayscale(1);
    opacity: .55;
}

.comment-emoji-btn:hover > span,
.comment-emoji-btn:focus-visible > span {
    filter: none;
    opacity: 1;
}

.comment-emoji-panel {
    position: absolute;
    z-index: 10000;
    width: 344px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.comment-emoji-tabs {
    display: flex;
    padding: 6px 8px;
    border-bottom: 1px solid #eee;
}

.comment-emoji-tab {
    flex: 1;
    height: 32px;
    margin: 0 2px;
    padding: 0;
    font-size: 18px;
    line-height: 30px;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}

.comment-emoji-tab:hover {
    background: #f2f2f2;
}

.comment-emoji-tab.active {
    background: #eef4ff;
    border-color: #b9d3ff;
}

.comment-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding: 8px;
    max-height: 150px;
    overflow-y: auto;
}

.comment-emoji-item {
    height: 30px;
    padding: 0;
    font-size: 18px;
    line-height: 28px;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}

.comment-emoji-item:hover {
    background: #f2f2f2;
}

/* 최근 사용 탭이 비어 있을 때: 그리드를 flex 중앙정렬 컨테이너로 전환 */
.comment-emoji-grid--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

/* 안내 문구(가로/세로 중앙 정렬) */
.comment-emoji-empty {
    padding: 0 8px;
    text-align: center;
    font-size: 12px;
    color: #999;
}

/* 680px 이하 비회원 폼: 이모지 버튼 폭만큼 입력칸 축소(common.css calc(50% - 15px) 보정, 줄바꿈 방지) */
@media (max-width: 680px) {
    div#boardNewCommentStyle div.comment_write div.user_name > input {
        width: calc(50% - 32px);
    }
}