/* Comment layout: avatar column, inline metadata, and compact composer. */
#content .board #comment .comment_reply_target { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; color:var(--comment-text); font-size:12px; }
#content .board #comment .comment_reply_target[hidden] { display:none; }
#content .board #comment .comment_reply_cancel { flex-shrink:0; padding:4px 8px; border:1px solid var(--comment-line); border-radius:6px; background:transparent; color:var(--comment-text); cursor:pointer; }
#content .board #comment .comment_reply_cancel:hover { color:#f5a916; border-color:#f5a916; }
#content .board #comment.feedback {
    --comment-bg:#0c0c0c;
    --comment-line:#252527;
    --comment-text:#e8e8e8;
    --comment-muted:#77777c;
    margin-top:24px;
    padding:0 0px 24px;
    border:1px solid transparent;
    border-radius:18px;
    background:var(--comment-bg);
}
#content .board #comment .fbHeader { padding:24px 0 12px; border-color:var(--comment-line); }
#content .board #comment .fbHeader h2 { font-size:20px; color:var(--comment-text); }
#content .board #comment .fbHeader h2 em { font-size:20px; color:#f5a916; }
#content .board #comment .fbList { padding:0; }
#content .board #comment .fbItem { padding:24px 0 18px; border-color:var(--comment-line); }
#content .board #comment .fbItem.indent { padding-left:min(calc(var(--reply-depth, 1) * 28px), 140px); border-left:0; }
#content .board #comment .reply_depth { color:var(--comment-muted); font-size:10px; white-space:nowrap; }
#content .board #comment .fbMeta {
    position:relative;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:4px 10px;
    min-height:22px;
    margin:0 0 4px;
    padding-left:58px;
}
#content .board #comment .fbMeta .profile {
    position:absolute;
    top:0;
    left:0;
    box-sizing:border-box;
    width:42px;
    height:42px;
    border:0;
    background-color:#222225;
}
#content .board #comment .fbMeta span.profile {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='18' r='7' fill='%2377777c'/%3E%3Cpath d='M11 39v-3a13 13 0 0 1 26 0v3' fill='%2377777c'/%3E%3C/svg%3E");
    background-size:100%;
}
#content .board #comment .fbMeta .author { align-self:center; margin:0; font-size:16px; line-height:24px; color:var(--comment-text); }
#content .board #comment .fbMeta .time { align-self:center; margin:0; font-family:inherit; font-size:12px; line-height:24px; white-space:nowrap; color:var(--comment-muted); }
#content .board #comment .fbItem > .xe_content,
#content .board #comment .fbItem > .rhymix_content {
    clear:none;
    width:auto;
    margin:0 0 0 58px;
    color:#c7c7ca;
    font-size:16px;
    line-height:1.6;
}
#content .board #comment .fbItem .action { width:auto; margin:10px 0 0 58px; gap:10px; font-size:11px; }
#content .board #comment .fbItem .fileList { margin-left:58px; }
#content .board #comment .write_comment { margin:20px 0 0; padding:0; }
#content .board #comment .comment_composer { display:flex; align-items:flex-start; gap:10px; }
#content .board #comment .comment_editor { flex:1; min-width:0; }
#content .board #comment .rx_simpleeditor_wrapper { width:100%; margin:0; }
#content .board #comment .comment_editor .rx_simpleeditor,
#content .board #comment .comment_editor textarea {
    box-sizing:border-box;
    width:100% !important;
    min-height:48px !important;
    height:48px !important;
    margin:0;
    padding:14px 12px !important;
    border:1px solid var(--comment-line) !important;
    border-radius:8px !important;
    background:#141416 !important;
    color:var(--comment-text) !important;
    font:12px/18px "Pretendard",sans-serif !important;
    overflow:auto;
    resize:vertical;
}
#content .board #comment .comment_editor .rx_simpleeditor:focus,
#content .board #comment .comment_editor textarea:focus { outline:1px solid #f5a916 !important; }
#content .board #comment .comment_editor .rx_simpleeditor[data-empty="true"]::before { content:attr(data-placeholder); color:var(--comment-muted); pointer-events:none; }
#content .board #comment .comment_submit {
    flex:0 0 48px;
    height:48px;
    padding:0;
    border:0;
    border-radius:8px;
    background:#f5a916;
    color:#17130b;
    font:600 12px/1 "Pretendard",sans-serif;
    cursor:pointer;
}
#content .board #comment .comment_submit:hover { background:#ffb82e; }
#content .board #comment .comment_submit:focus-visible { outline:2px solid var(--comment-text); outline-offset:3px; }
#content .board #comment .write_comment .write_author:not(.write_author_wrap) { width:auto; margin:12px 0 0; flex-wrap:wrap; }
#content .board #comment .write_author .item { position:relative; }
#content .board #comment .write_author label[for="userName"],
#content .board #comment .write_author label[for="userPw"] {
    position:absolute !important;
    display:block !important;
    top:50% !important;
    left:10px !important;
    right:auto;
    width:auto;
    height:auto;
    margin:0;
    padding:0;
    transform:translateY(-50%);
    overflow:visible;
    clip:auto;
    clip-path:none;
    color:#8b8b91 !important;
    font-size:12px !important;
    line-height:1 !important;
    white-space:nowrap;
    pointer-events:none;
    z-index:2;
}
#content .board #comment .write_author .userName::placeholder,
#content .board #comment .write_author .userPw::placeholder { color:transparent !important; opacity:0 !important; }
#content .board #comment .comment_editor .xefu-container { margin-top:8px; }
html[data-theme="light"] #content .board #comment.feedback { --comment-bg:#fff; --comment-line:#e1e4e7; --comment-text:#22272d; --comment-muted:#737780; }
html[data-theme="light"] #content .board #comment .fbItem > .xe_content,
html[data-theme="light"] #content .board #comment .fbItem > .rhymix_content { color:#444; }
html[data-theme="light"] #content .board #comment .comment_editor .rx_simpleeditor,
html[data-theme="light"] #content .board #comment .comment_editor textarea { background:#f7f7f8 !important; }
@media (max-width:900px) {
    #content .board #comment.feedback { padding:0 3px 18px; margin-top: 0px;}
}
@media (max-width:600px) {
    #content .board #comment .fbHeader { padding:0px 0 10px; }
    #content .board #comment .fbHeader h2,
    #content .board #comment .fbHeader h2 em { font-size:17px; }
    #content .board #comment .fbItem { padding-top:20px; }
    #content .board #comment .fbItem.indent { padding-left:min(calc(var(--reply-depth, 1) * 16px), 64px); }
    #content .board #comment .fbMeta { padding-left:48px; gap:2px 7px; }
    #content .board #comment .fbMeta .profile { width:36px; height:36px; }
    #content .board #comment .fbMeta .author { font-size:14px; line-height:21px; }
    #content .board #comment .fbMeta .time { font-size:10px; line-height:21px; }
    #content .board #comment .fbItem > .xe_content,
    #content .board #comment .fbItem > .rhymix_content,
    #content .board #comment .fbItem .action,
    #content .board #comment .fbItem .fileList { margin-left:48px; }
    #content .board #comment .fbItem > .xe_content,
    #content .board #comment .fbItem > .rhymix_content { font-size:14px; }
    #content .board #comment .comment_composer { gap:8px; }
    #content .board #comment .comment_submit { flex-basis:48px; font-size:12px; }
    #content .board #comment .comment_editor .rx_simpleeditor,
    #content .board #comment .comment_editor textarea { 
        min-height:40px !important;
        height:40px !important;
        padding:10px 12px !important; font-size:12px !important; }

    #content .board #comment .comment_submit {
        height:40px;
    }
}

/* CKEditor keeps its toolbar and upload controls, with a shorter body. */
#content .board #comment .comment_editor .rx_ckeditor { min-height:0 !important; }
#content .board #comment .comment_editor .cke_contents { height:60px !important; min-height:0 !important; }

/* Guest fields and the existing attachment controls share one compact row. */
/* Reply and edit forms use the same compact field on desktop and mobile. */
#content .board #comment.comment_form .comment_editor .cke_top,
#content .board #comment.comment_form .comment_editor .cke_bottom { display:none !important; }
#content .board #comment.comment_form .comment_editor .cke,
#content .board #comment.comment_form .comment_editor .cke_inner {
    box-sizing:border-box;
    width:100% !important;
    background:#141416 !important;
    border-radius:8px !important;
    box-shadow:none !important;
}
#content .board #comment.comment_form .comment_editor .cke {
    border:1px solid #737b84 !important;
    overflow:hidden;
}
#content .board #comment.comment_form .comment_editor .cke_contents {
    height:48px !important;
    border:0 !important;
}
#content .board #comment.comment_form .comment_editor .rx_simpleeditor,
#content .board #comment.comment_form .comment_editor textarea { border-color:#737b84 !important; }
html[data-theme="light"] #content .board #comment.comment_form .comment_editor .cke,
html[data-theme="light"] #content .board #comment.comment_form .comment_editor .cke_inner { background:#f7f7f8 !important; }

#content .board #comment .comment_tools { display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px; margin-top:12px; }
#content .board #comment .comment_tools .write_author:not(.write_author_wrap) { box-sizing:border-box; display:flex; align-items:center; flex-wrap:wrap; float:none; flex:1 1 auto; min-width:0; width:auto; margin:0; padding:0; gap:5px; }
#content .board #comment .comment_tools .write_author .item { box-sizing:border-box; display:block; position:relative; float:none; flex:0 0 72px; min-width:0; width:72px !important; margin:0; }
#content .board #comment .comment_tools .write_author .iText { box-sizing:border-box; width:100% !important; height:30px !important; margin:0; }
#content .board #comment .comment_tools .xefu-container {
    box-sizing:border-box;
    flex:0 1 auto;
    width:auto;
    max-width:100%;
    margin:0 0 0 auto !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}
#content .board #comment .comment_tools .xefu-dropzone {
    position:relative;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    text-align:right;
}
#content .board #comment .comment_tools .xefu-act-selectfile { box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; height:30px !important; min-height:30px !important; margin:0; padding:0 8px !important; font-size:10px; line-height:14px; }
#content .board #comment .comment_tools .xefu-dropzone-message { display:none; }
#content .board #comment .comment_tools .upload_info {
    position:absolute;
    top:100%;
    right:0;
    width:max-content;
    max-width:260px;
    margin:4px 0 0 !important;
    padding:3px 6px;
    border-radius:4px;
    background:var(--comment-bg);
    color:var(--comment-muted);
    font-size:10px;
    line-height:16px;
    pointer-events:none;
    z-index:4;
}
#content .board #comment .comment_tools .xefu-container:has(.xefu-list li) { flex-basis:100%; width:100%; }

/* Make the native file picker cover the visible attachment button. */
#content .board #comment .comment_tools .xefu-act-selectfile { position:relative; overflow:hidden !important; }
#content .board #comment .comment_tools .xefu-act-selectfile input[type="file"] {
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    box-sizing:border-box;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    opacity:0 !important;
    z-index:3;
    cursor:pointer;
    pointer-events:auto !important;
}