.community-modern-wrap { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.community-modern-header { display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px solid #f0f0f0; margin-bottom:20px; }
.community-modern-header h2 { font-size:20px; font-weight:600; color:#1a1a1a; margin:0; }
.community-modern-header .count { font-size:14px; color:#888; font-weight:400; margin-left:8px; }
.community-modern-utils { display:flex; gap:10px; align-items:center; }
.community-modern-sort { position:relative; }
.community-modern-sort-btn { background:#f5f5f5; border:1px solid #e0e0e0; border-radius:6px; padding:8px 14px; font-size:13px; color:#555; cursor:pointer; display:flex; align-items:center; gap:6px; }
.community-modern-sort-btn:hover { background:#eee; }
.community-modern-sort-menu { position:absolute; top:100%; left:0; background:#fff; border:1px solid #e0e0e0; border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,0.1); z-index:10; display:none; min-width:100px; }
.community-modern-sort-menu.active { display:block; }
.community-modern-sort-menu a { display:block; padding:10px 14px; font-size:13px; color:#555; text-decoration:none; }
.community-modern-sort-menu a:hover, .community-modern-sort-menu a.active { background:#f8f9fa; color:#1a1a1a; }
.community-modern-write-btn { background:#1a1a1a; color:#fff; border:none; border-radius:6px; padding:8px 16px; font-size:13px; font-weight:500; cursor:pointer; text-decoration:none; }
.community-modern-write-btn:hover { background:#333; color:#fff; }
.community-modern-list { display:flex; flex-direction:column; gap:16px; }
.community-modern-item { background:#fff; border:1px solid #f0f0f0; border-radius:10px; padding:16px; }
.community-modern-user { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.community-modern-avatar { width:36px; height:36px; border-radius:50%; overflow:hidden; background:#f5f5f5; flex-shrink:0; }
.community-modern-avatar img { width:100%; height:100%; object-fit:cover; }
.community-modern-meta { flex:1; }
.community-modern-name-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.community-modern-name { font-size:14px; font-weight:600; color:#1a1a1a; }
.community-modern-badge { padding:2px 6px; border-radius:4px; font-size:10px; font-weight:500; }
.community-modern-badge.purchaser { background:#dcfce7; color:#16a34a; }
.community-modern-badge.visitor { background:#f1f5f9; color:#64748b; }
.community-modern-badge.hidden { background:#fff3cd; color:#8a6d3b; border:1px solid #f5d58a; }
.community-modern-date { font-size:12px; color:#999; margin-top:2px; }
.community-modern-images { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.community-modern-images img { width:80px; height:80px; object-fit:cover; border-radius:6px; cursor:pointer; }
.community-modern-content { font-size:14px; line-height:1.6; color:#333; word-break:keep-all; white-space:pre-wrap; margin-bottom:12px; }
.community-modern-actions { display:flex; justify-content:space-between; align-items:center; padding-top:12px; border-top:1px solid #f5f5f5; }
.community-modern-btns { display:flex; gap:6px; }
.community-modern-btn { display:inline-flex; align-items:center; gap:4px; padding:6px 12px; border:1px solid #e8e8e8; border-radius:16px; background:#fff; font-size:12px; color:#666; text-decoration:none; cursor:pointer; }
.community-modern-btn:hover, .community-modern-btn.on { border-color:#1a1a1a; color:#1a1a1a; }
.community-modern-btn svg { width:14px; height:14px; }
.community-modern-owner-btns { display:flex; gap:4px; }
.community-modern-owner-btn { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; border-radius:4px; color:#999; cursor:pointer; }
.community-modern-owner-btn:hover { background:#f5f5f5; color:#555; }
.community-modern-owner-btn.btn-hide-toggle { width:auto; height:28px; padding:0 10px; border:1px solid #e4e4e4; font-size:11px; color:#555; }
.community-modern-owner-btn.btn-hide-toggle:hover { border-color:#c9c9c9; background:#f9f9f9; }
.community-modern-item.hidden-comment,
.community-modern-reply.hidden-comment { opacity:0.72; border-color:#f5d58a; background:#fffaf0; }
.community-modern-replies { margin-top:12px; margin-left:20px; padding-left:16px; border-left:2px solid #f0f0f0; }
.community-modern-reply { background:#fafafa; border-radius:8px; padding:12px; margin-bottom:10px; }
.community-modern-reply:last-child { margin-bottom:0; }
.community-modern-reply-form { margin-top:12px; background:#f8f9fa; border-radius:8px; padding:12px; display:none; }
.community-modern-reply-form.active { display:block; }
.community-modern-reply-input { width:100%; padding:10px; border:1px solid #e0e0e0; border-radius:6px; font-size:13px; resize:none; min-height:60px; max-height:200px; box-sizing:border-box; }
.community-modern-reply-submit { margin-top:8px; display:flex; justify-content:flex-end; gap:8px; }
.community-modern-reply-submit button { padding:8px 16px; border-radius:6px; font-size:13px; cursor:pointer; }
.community-modern-reply-submit .cancel { background:#fff; border:1px solid #ddd; color:#666; }
.community-modern-reply-submit .submit { background:#1a1a1a; border:none; color:#fff; }
.community-modern-more { text-align:center; margin-top:20px; }
.community-modern-more-btn { display:inline-block; padding:12px 32px; border:1px solid #e0e0e0; border-radius:6px; font-size:13px; color:#555; text-decoration:none; cursor:pointer; background:#fff; }
.community-modern-more-btn:hover { border-color:#1a1a1a; color:#1a1a1a; }
.community-modern-loading { text-align:center; padding:40px 0; color:#888; }
.community-modern-empty { text-align:center; padding:60px 0; color:#999; font-size:14px; }

.community-write-modal-content { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; border-radius:16px; width:90%; max-width:540px; max-height:90vh; overflow-y:auto; }
.community-write-header { padding:20px 24px; border-bottom:1px solid #eee; display:flex; justify-content:space-between; align-items:center; }
.community-write-header h3 { margin:0; font-size:18px; font-weight:600; }
.community-write-close { background:none; border:none; font-size:24px; color:#999; cursor:pointer; padding:0; line-height:1; }
.community-write-body { padding:20px 24px; }
.community-author-mode { display:flex; gap:12px; margin-bottom:20px; }
.community-author-option { flex:1; padding:14px 16px; border:2px solid #e0e0e0; border-radius:10px; cursor:pointer; display:flex; align-items:center; gap:12px; transition:all 0.2s; }
.community-author-option:hover { border-color:#ccc; }
.community-author-option.selected { border-color:#D30026; background:#fff5f7; }
.community-author-option input { display:none; }
.community-author-avatar { width:40px; height:40px; border-radius:50%; background:#f5f5f5; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:20px; }
.community-author-avatar img { width:100%; height:100%; object-fit:cover; }
.community-author-info { flex:1; }
.community-author-name { font-size:14px; font-weight:600; color:#333; }
.community-author-desc { font-size:12px; color:#888; margin-top:2px; }
.community-author-badge { font-size:10px; font-weight:500; padding:2px 6px; border-radius:4px; display:inline-block; margin-top:4px; }
.community-author-badge.purchaser { background:#dcfce7; color:#16a34a; }
.community-author-badge.visitor { background:#f1f5f9; color:#64748b; }
.community-profile-settings { margin-bottom:16px; }
.community-profile-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; background:#f5f5f5; border:1px solid #ddd; border-radius:6px; font-size:12px; color:#555; cursor:pointer; }
.community-profile-btn:hover { background:#eee; }
.community-image-upload { margin-bottom:16px; }
.community-image-dropzone { border:2px dashed #ddd; border-radius:10px; padding:24px; text-align:center; cursor:pointer; transition:all 0.2s; background:#fafafa; }
.community-image-dropzone:hover, .community-image-dropzone.drag-over { border-color:#D30026; background:#fff5f7; }
.community-image-dropzone-text { color:#888; font-size:13px; }
.community-image-dropzone-text svg { display:block; margin:0 auto 8px; color:#ccc; }
.community-image-preview { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.community-image-preview-item { position:relative; width:80px; height:80px; border-radius:8px; overflow:hidden; }
.community-image-preview-item img { width:100%; height:100%; object-fit:cover; }
.community-image-preview-remove { position:absolute; top:4px; right:4px; width:20px; height:20px; background:rgba(0,0,0,0.6); border-radius:50%; border:none; color:#fff; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.community-write-textarea { width:100%; height:140px; padding:14px; border:1px solid #ddd; border-radius:10px; font-size:14px; resize:none; box-sizing:border-box; line-height:1.6; }
.community-write-textarea:focus { outline:none; border-color:#D30026; }
.community-write-footer { padding:16px 24px; border-top:1px solid #eee; display:flex; justify-content:space-between; align-items:center; }
.community-write-info { font-size:12px; color:#888; }
.community-write-btns { display:flex; gap:8px; }
.community-write-cancel { padding:10px 20px; background:#fff; border:1px solid #ddd; border-radius:8px; font-size:14px; cursor:pointer; }
.community-write-submit { padding:10px 24px; background:#D30026; border:none; border-radius:8px; color:#fff; font-size:14px; font-weight:500; cursor:pointer; }
.community-write-submit:hover { background:#b80020; }

@media (max-width:768px) {
    .community-modern-header { flex-direction:column; align-items:flex-start; gap:12px; }
    .community-modern-replies { margin-left:10px; padding-left:10px; }
}