/* blog.css - 블로그 게시판, 에디터, 뷰어 스타일 */

/* Editor Control Box */
.write_controllbox { margin-top: 2em; padding: 0; display: flex; flex-direction: row; align-items: stretch; gap: 15px; }
.write_option {
    display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; flex: 1 1 0%; min-width: 0; min-height: 50px;
    padding: 0.75em; background: var(--bg-element); border: solid 1px var(--border-color); border-radius: 5px;
}
.write_option .tag-title {
    font-weight: 600; margin-bottom: 0.35em; color: var(--text-main); font-size: 0.85em; text-transform: uppercase; display: block; width: 100%;
}
.write_option .tag-content-wrapper { display: flex; flex-wrap: wrap; gap: 4px 6px; line-height: 1.4; width: 100%; }
.write_option .tag-item {
    background-color: var(--bg-element-alt); border: 1px solid var(--border-color); border-radius: 15px; padding: 0.2em 0.8em; font-size: 0.9em; color: var(--text-main); margin-right: 0;
}

/* Quill Editor (Custom Theme) */
.ql-toolbar.ql-snow { background: var(--bg-element-alt); border: 1px solid var(--border-color); border-bottom: none; border-radius: 5px 5px 0 0; padding: 12px 8px; }
.ql-container.ql-snow { background: var(--bg-element); border: 1px solid var(--border-color); border-radius: 0 0 5px 5px; color: var(--text-main); min-height: 300px; }
.ql-editor { font-family: var(--font-main); font-size: 1rem; line-height: 1.65em; }
.ql-toolbar.ql-snow.sticky {
    position: fixed; top: 44px; left: 0; right: 0; width: 100%; z-index: 999; background: var(--bg-page); box-shadow: 0 2px 5px rgba(0,0,0,0.1); padding-left: 15px; padding-right: 15px;
}
.ql-container.ql-snow.has-sticky-toolbar { padding-top: 60px; }
@media screen and (min-width: 841px) { .ql-toolbar.ql-snow.sticky { top: 0; } }

/* Comments */
.comment-section { margin-top: 3em; padding-top: 2em; border-top: 1px solid var(--border-color); }
#comments-list .comment { background: var(--bg-element-alt); border-radius: 5px; padding: 1em 1.5em; margin-bottom: 1em; border: 1px solid var(--border-color); }
.comment-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px dotted var(--border-color); padding-bottom: 5px; margin-bottom: 10px; font-weight: 600; color: var(--text-main); }
.comment-time, .comment-date { font-size: 0.9em; color: var(--text-sub); margin-left: 0.5em; }
.reply-list { margin-left: 40px; padding-left: 15px; border-left: 2px solid var(--border-color); }
.btn-reply { font-size: 0.8em; padding: 3px 8px; border: 1px solid var(--border-color); background: var(--bg-element); border-radius: 4px; color: var(--text-main); }
#reply-status-bar { display: none; background: var(--bg-element-alt); border: 1px solid var(--border-color); padding: 8px 12px; margin-bottom: 10px; border-radius: 4px; }

/* Vote Controls */
.vote-controls { display: flex; gap: 10px; }
@media screen and (max-width: 480px) { .vote-controls .button { width: auto; display: inline-block; flex: 1 1 0; } }

/* Bookmark Images */
.images-list-container { display: flex; flex-wrap: wrap; gap: 10px; padding: 10px; border: 1px solid var(--border-color); background: var(--bg-element-alt); max-height: 230px; overflow-y: auto; }
.image-preview-item { position: relative; width: 100px; height: 100px; }
.image-preview-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.toggle-visibility-btn { position: absolute; top: 5px; right: 5px; background: rgba(0,0,0,0.6); color: white; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; border: none; }