/* 파일명: _3_posts_community/_3_posts_community.css */

/* ================= 서브 네비게이션 ================= */
.board-subnav-wrap { max-width: 1100px; margin: 30px auto 0; padding: 0 20px; }
.board-subnav { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 14px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04); }
.board-subnav a { display: inline-block; padding: 10px 18px; border-radius: 10px; background-color: #f3f4f6; color: #374151; font-weight: 600; transition: 0.2s; }
.board-subnav a.active { background-color: #6b7280; color: #ffffff; }

/* ================= 게시판 목록 (board.php) ================= */
.board-container { max-width: 1100px; margin: 50px auto; padding: 0 20px; color: #333; }
.board-page-header { margin-bottom: 35px; }
.board-page-title { font-size: 32px; color: #111827; font-weight: 800; letter-spacing: -1px; }
.board-filter-text { font-size: 18px; color: #6b7280; margin-left: 10px; font-weight: 400; }

.top-actions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; gap: 20px; }
.search-form { display: flex; gap: 8px; align-items: center; }
.search-select { padding: 0 10px; height: 42px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; background: #fff; color: #444; }
.search-input { padding: 0 15px; height: 42px; border: 1px solid #ddd; border-radius: 8px; width: 220px; font-size: 14px; }
.btn-search { background: #4b5563; color: white; height: 42px; padding: 0 20px; border-radius: 8px; border: none; cursor: pointer; font-size: 14px; font-weight: 600; }
.btn-search:hover { background: #1f2937; }

.action-buttons { display: flex; gap: 10px; }
.btn-my-posts { background-color: #f9fafb; color: #4b5563; padding: 12px 20px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 14px; border: 1px solid #e5e7eb; transition: all 0.2s; }
.btn-my-posts:hover { background-color: #f3f4f6; }
.btn-my-posts.active { background-color: #374151; color: #fff; border-color: #111827; }
.btn-write { background-color: #111827; color: white; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 14px; transition: background 0.2s; border: none; }
.btn-write:hover { background-color: #000; }

.board-table { width: 100%; table-layout: fixed; border-collapse: collapse; background: white; border-radius: 12px; overflow: hidden; border: 1px solid #eee; }
.board-table th { background-color: #f3f4f6; color: #4b5563; font-weight: 700; font-size: 13px; padding: 18px 15px; text-align: center;}
.board-table td { border-bottom: 1px solid #f3f4f6; padding: 18px 15px; text-align: center; color: #111827; }
.board-table-empty { padding: 80px; color: #9ca3af; text-align: center; }
.board-table-muted { color: #999; }

.board-title { text-align: left !important; padding-left: 20px !important; }
.board-title a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #111827; text-decoration: none; font-weight: 500; }
.board-title a:hover { color: #666; text-decoration: underline; }

.author-wrapper { display: flex; align-items: center; gap: 10px; justify-content: center; }
.list-profile-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid #eee; }

.pagination-wrapper { display: flex; justify-content: center; margin-top: 50px; }
.pagination { display: flex; gap: 8px; }
.pagination a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: 1px solid #e5e7eb; color: #4b5563; text-decoration: none; font-weight: 600; }
.pagination a.active { background-color: #374151; color: white; border-color: #374151; }

/* ================= 글쓰기 & 수정 폼 공통 (write.php, edit.php) ================= */
.form-container { max-width: 800px; margin: 50px auto; }
.form-page-header { margin-bottom: 30px; text-align: center; }
.form-page-title { font-size: 28px; font-weight: 800; color: #111827; }

.form-card { padding: 30px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border: 1px solid #eee; }
.form-card-edit { padding: 40px; } 

.btn-submit-dark { background-color: #374151; color: white; padding: 12px 25px; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; text-decoration: none; display: inline-block; transition: all 0.2s;}
.btn-submit-dark:hover { background-color: #111827; }
.btn-cancel-light { background-color: #f3f4f6; color: #374151; margin-left: 10px; padding: 12px 25px; border-radius: 8px; border: none; cursor: pointer; font-weight: 600; text-decoration: none; display: inline-block; transition: all 0.2s;}
.btn-cancel-light:hover { background-color: #e5e7eb; }
.btn-delete-outline { background: #fff; color: #ef4444; border: 1px solid #fecaca; margin-top: 10px; padding: 12px 25px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: all 0.2s;}

.form-input-extended { width: 100%; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; box-sizing: border-box; margin-bottom: 20px; font-size: 15px; }
.form-file-input { padding: 8px; background: #fff; }

.form-group-label { font-weight: 600; color: #374151; display: block; margin-bottom: 8px; }
.form-actions-center { margin-top: 30px; text-align: center; border-top: 1px solid #f3f4f6; padding-top: 30px; }

.current-image-preview { padding: 15px; background: #f9fafb; border-radius: 8px; border: 1px solid #f3f4f6; margin-bottom: 15px; }
.current-image-label { font-size: 12px; color: #6b7280; margin-bottom: 8px; }
.current-image-img { max-width:300px; border-radius:6px; display:block; }
.new-image-label { font-size: 13px; color: #374151; margin-bottom: 8px; }

/* ================= 상세 보기 (view.php) ================= */
.view-container { max-width: 900px; margin: 50px auto; }
.view-page-header { margin-bottom: 30px; border-bottom: 2px solid #111827; padding-bottom: 10px; }
.view-page-title { font-size: 32px; color: #111827; font-weight: 800; letter-spacing: -1px; margin: 0; }

.post-view-card { background: white; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); padding: 40px; margin-top: 20px; border: 1px solid #eee; }
.post-view-header { border-bottom: 1px solid #f3f4f6; padding-bottom: 20px; margin-bottom: 30px; }
.post-view-title { font-size: 24px; color: #111827; margin-bottom: 15px; font-weight: 800; word-break: break-all; overflow-wrap: anywhere; line-height: 1.4; }

.post-meta { display: flex; align-items: center; gap: 20px; color: #6b7280; font-size: 14px; }
.author-info { display: flex; align-items: center; gap: 8px; color: #111827; font-weight: 600; }
.author-img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 1px solid #e5e7eb; }
.meta-divider { font-weight: 400; color: #9ca3af; margin-right: 5px; }

.post-view-content { line-height: 1.8; color: #374151; font-size: 16px; min-height: 200px; margin-bottom: 40px; word-break: break-all; overflow-wrap: anywhere; white-space: pre-wrap; }

.post-image-box { background: #f9fafb; padding: 20px; border-radius: 8px; border: 1px solid #f3f4f6; margin-bottom: 30px; }
.post-image-label { font-size: 13px; color: #6b7280; margin-bottom: 10px; font-weight: 600; }
.post-image { max-width: 100%; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-top: 10px; display: block;}

.post-view-actions { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f3f4f6; padding-bottom: 20px; margin-bottom: 40px; gap: 10px;}
.right-actions { display: flex; gap: 10px; }

.btn-view-action { padding: 10px 20px; border-radius: 8px; font-weight: 600; text-decoration: none; font-size: 14px; transition: all 0.2s; border: none; cursor: pointer; display: inline-block; white-space: nowrap;}
.btn-view-list { background: #f3f4f6; color: #374151; }
.btn-view-edit { background: #374151; color: white; }
.btn-view-delete { background: #fff; color: #ef4444; border: 1px solid #fecaca; }

/* 댓글 영역 */
.comments-section { margin-top: 20px; }
.comments-title { font-size: 18px; font-weight: 700; color: #111827; margin-bottom: 20px; }
.comments-count { color: #6b7280; margin-left: 5px; }

.comment-form { background: #f9fafb; padding: 20px; border-radius: 12px; border: 1px solid #e5e7eb; display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; }
.comment-form-reply { padding: 15px; margin-bottom: 0; }
.comment-textarea { width: 100%; padding: 15px; border: 1px solid #e5e7eb; border-radius: 8px; resize: vertical; font-size: 14px; font-family: inherit; }
.btn-comment-submit { align-self: flex-end; background: #374151; color: white; padding: 10px 25px; border-radius: 8px; font-weight: 600; border: none; cursor: pointer;}
.btn-reply-submit { padding: 8px 16px; font-size: 13px; }

.comment-login-prompt { text-align: center; padding: 20px; background: #f9fafb; border-radius: 12px; color: #6b7280; font-size: 14px; margin-bottom: 30px; }
.comment-login-link { color:#374151; font-weight:600; text-decoration:underline; }

.comment-list { list-style: none; padding: 0; margin-bottom: 30px; }
.comment-item { padding: 20px 0; border-bottom: 1px solid #f3f4f6; }
.comment-empty { text-align:center; padding: 40px 0; color: #9ca3af; font-size: 14px; border-bottom: none; }

.comment-author-info { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.comment-author-name { font-weight: 700; color: #111827;}
.comment-date { font-size: 12px; color: #9ca3af; margin-left: auto; }
.comment-content { font-size: 15px; color: #4b5563; line-height: 1.6; padding-left: 34px; white-space: pre-wrap; word-break: break-all; overflow-wrap: anywhere; }

.btn-reply-toggle { font-size: 12px; color: #6b7280; background: none; border: none; cursor: pointer; padding: 0; margin-left: 34px; margin-top: 8px; font-weight: 600; }
.btn-reply-toggle:hover { color: #111827; text-decoration: underline; }
.reply-form-wrapper { display: none; margin-top: 15px; padding-left: 34px; }
.reply-item { padding: 15px 20px; background-color: #f9fafb; border-radius: 8px; margin-top: 10px; margin-left: 34px; border: 1px solid #e5e7eb; }
.reply-item-img { width: 20px; height: 20px; }
.reply-item-content { padding-left: 0; }

.c-pagination-wrapper { display: flex; justify-content: center; margin-top: 20px; margin-bottom: 30px; }
.c-pagination { display: flex; gap: 8px; }
.c-pagination a { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 8px; border: 1px solid #e5e7eb; color: #4b5563; text-decoration: none; font-weight: 600; font-size: 14px; }
.c-pagination a.active { background-color: #374151; color: white; border-color: #374151; }
.c-pagination a:hover:not(.active) { background-color: #f3f4f6; }

@media (max-width: 640px) {
    .post-view-card { padding: 20px; margin: 0 10px 30px; }
    .post-view-actions { flex-direction: column; align-items: stretch; }
    .right-actions { justify-content: center; }
}

/* ================= 댓글 삭제 버튼 ================= */
.btn-comment-delete { 
    font-size: 12px; 
    color: #ef4444; 
    background: none; 
    border: none; 
    cursor: pointer; 
    padding: 0; 
    font-weight: 600; 
    transition: 0.2s; 
}
.btn-comment-delete:hover { 
    color: #b91c1c; 
    text-decoration: underline; 
}