/* ============================================================
   UBC 게시판 스킨 (ubc_default) 공통 스타일
   - 게시판 스킨 페이지(list/view/write, _layout.html)
   - 프로그램 페이지 게시판 탭(_board_inline.html)
   에서 공유. 프로그램 페이지에서는 program.css 다음에 로드되어
   게시판 관련 규칙을 오버라이드한다.
   ============================================================ */

/* ── 게시판 페이지 제목 ── */
.board-page-title {
    padding-top: 10px;
    padding-bottom: 40px;
}
.board-page-title h3 {
    font-size: 2.1rem;
    font-weight: 800;
    margin: 0 0 8px;
}
.board-page-title p {
    color: var(--color-text-dim);
    margin: 0;
}

/* ── 상단 컨트롤 (정렬/검색) ── */
.board-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}
.board-controls { display: flex; gap: 10px; align-items: center; }
.board-select {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.875rem;
    cursor: pointer;
}
.board-search { display: flex; gap: 5px; }
.board-search select {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.875rem;
}
.board-search input {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.875rem;
    width: 200px;
}
.board-search button {
    padding: 8px 16px;
    background: #4A90E2;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    font-size: 0.875rem;
}

/* ── 게시판 테이블 ── */
.board-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    margin-bottom: 20px;
}
.board-table thead {
    background: var(--color-surface-2);
    border-top: 2px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.board-table th {
    padding: 15px 10px;
    text-align: center;
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.9375rem;
}
.board-table td {
    padding: 18px 10px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    color: var(--color-text);
    font-size: 0.9375rem;
}
.board-table td.title { text-align: left; padding-left: 20px; }
.board-table td.title a {
    color: var(--color-text);
    text-decoration: none;
}
.board-table td.title a:hover { color: #ff6b35; text-decoration: underline; }
.board-table tr.notice-row { background: var(--color-surface-2); font-weight: 600; }
.board-table tr.deleted-row { opacity: 0.5; }
.attachment { color: var(--color-text-dim); margin-left: 5px; }
.comment-cnt { color: #ff6b35; font-size: 0.85em; margin-left: 4px; }
.reply-cnt { color: #20c997; font-size: 0.85em; margin-left: 4px; }

/* ── 하단 (페이지네이션 + 글쓰기) ── */
.board-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    flex-wrap: wrap;
    gap: 10px;
}
/* 페이지네이션 스타일은 frontend/css/pagination.css 로 분리(공통). 게시판은 nav.pagination 마크업으로 해당 규칙을 상속한다. */
.board-write-btn {
    padding: 10px 20px;
    background: #5CB85C;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
}
.board-write-btn:hover { background: #4CAF50; color: white; }

/* ── 인라인 게시판(프로그램 탭) 전용 ── */
.board-count { font-size: 0.9rem; color: var(--color-text-dim); }
.btn-board-all {
    padding: 10px 20px;
    background: var(--color-surface-2);
    color: var(--color-text);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
}
.btn-board-all:hover { border-color: #ff6b35; color: #ff6b35; }
.btn-board-all i { font-size: 0.75rem; }

/* ── 게시글 뷰 ── */
.post-header {
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.post-header h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 12px; }
.post-meta {
    display: flex;
    gap: 20px;
    font-size: 0.875rem;
    color: var(--color-text-dim);
    flex-wrap: wrap;
}
.post-content {
    min-height: 200px;
    line-height: 1.8;
    padding: 20px 0;
    border-bottom: 1px solid var(--border-color);
    word-break: break-word;
}
.post-files {
    margin: 20px 0;
    padding: 15px;
    background: var(--color-surface-2);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}
.post-files h5 { margin: 0 0 10px; font-size: 0.9375rem; }
.post-files ul { list-style: none; padding: 0; margin: 0; }
.post-files li { margin-bottom: 6px; font-size: 0.9rem; }
.post-files a { color: var(--color-text); text-decoration: none; }
.post-files a:hover { color: #ff6b35; }
.post-vote {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border-color);
}
.vote-btn {
    padding: 10px 28px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    font-size: 0.9375rem;
    transition: all 0.2s;
}
.vote-btn:hover { border-color: #ff6b35; color: #ff6b35; }
/* 선택됨(내 투표/신고 완료) effect — 기본 outline, 선택 시 채움. 필요 시 여기서 교체 */
.vote-btn.active {
    background: #ff6b35;
    border-color: #ff6b35;
    color: #fff;
}
.comment-del-btn.active { font-weight: 700; text-decoration: underline; }
/* 댓글 추천/비추천 선택됨 effect — 게시글 .vote-btn.active 와 동일한 채움 */
.comment-vote.active {
    background: #ff6b35;
    border-color: #ff6b35;
    color: #fff;
    text-decoration: none;
}
.post-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    flex-wrap: wrap;
    gap: 8px;
}
.btn-action {
    padding: 8px 20px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    text-decoration: none;
    display: inline-block;
}
.btn-list { background: var(--color-surface-2); border: 1px solid var(--border-color); color: var(--color-text); }
.btn-list:hover { border-color: #ff6b35; color: #ff6b35; }
.btn-reply { background: #4A90E2; color: white; }
.btn-edit { background: #5bc0de; color: white; }
.btn-delete { background: #d9534f; color: white; }
.btn-reply:hover { background: #357abd; color: white; }
.btn-edit:hover { background: #46b8da; color: white; }
.btn-delete:hover { background: #c9302c; color: white; }

/* ── 댓글 ── */
.comment-section { margin-top: 30px; }
.comment-section h4 { font-size: 1rem; font-weight: 700; margin-bottom: 16px; }
.comment-item {
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
}
.comment-item.reply { padding-left: 2em; }
.comment-author { font-weight: 600; font-size: 0.9rem; margin-right: 10px; }
.comment-date { font-size: 0.8rem; color: var(--color-text-dim); }
.comment-text { margin: 6px 0 0; font-size: 0.9375rem; white-space: pre-wrap; word-break: break-word; }
.comment-form-wrap { margin-top: 20px; }
.comment-form-wrap textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.9375rem;
    resize: vertical;
    box-sizing: border-box;
}
.comment-submit {
    margin-top: 8px;
    padding: 10px 24px;
    background: #4A90E2;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9375rem;
}
.comment-del-btn {
    font-size: 0.8rem;
    color: #d9534f;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
}

/* ── 글쓰기 폼 ── */
.write-form-wrap .form-row { margin-bottom: 18px; }
.write-form-wrap label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 0.9375rem;
}
.write-form-wrap input[type="text"],
.write-form-wrap textarea,
.write-form-wrap input[type="number"],
.write-form-wrap input[type="datetime-local"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.9375rem;
    box-sizing: border-box;
}
.write-form-wrap textarea { min-height: 300px; resize: vertical; }
.write-form-wrap .check-row { display: flex; gap: 20px; align-items: center; }
.write-form-wrap .admin-extras {
    padding: 14px;
    background: var(--color-surface-2);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 18px;
}
.write-form-wrap .admin-extras h5 { margin: 0 0 10px; font-size: 0.875rem; }
.write-form-wrap .admin-extras .flex-row {
    display: flex; flex-wrap: wrap; gap: 16px;
}
.write-form-wrap .admin-extras .flex-row > div { flex: 1; min-width: 120px; }
.write-form-wrap .file-table { width: 100%; border-collapse: collapse; }
.write-form-wrap .file-table td { padding: 8px 0; }
.errorlist { color: #d9534f; font-size: 0.85rem; padding: 0; list-style: none; margin: 4px 0 0; }
.error-box {
    background: #fdf0f0;
    border: 1px solid #d9534f;
    border-radius: 4px;
    padding: 10px 14px;
    color: #d9534f;
    margin-bottom: 14px;
    font-size: 0.9rem;
}
.form-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}
.btn-submit {
    padding: 10px 28px;
    background: #5CB85C;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9375rem;
    font-weight: 600;
}
.btn-submit:hover { background: #4CAF50; }
.btn-cancel {
    padding: 10px 20px;
    background: var(--color-surface-2);
    color: var(--color-text);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9375rem;
    text-decoration: none;
}
.btn-cancel:hover { border-color: #ff6b35; color: #ff6b35; }

/* ============================================================
   모바일 (768px 미만) — 게시판 테이블을 카드형 리스트로 전환
   ============================================================ */
@media (max-width: 768px) {
    /* ── 상단 컨트롤(정렬/검색): 세로 스택 + 폭 100% ── */
    .board-header { flex-direction: column; align-items: stretch; }
    .board-controls { width: 100%; justify-content: flex-start; }
    .board-select { width: auto; }
    .board-search { width: 100%; flex-wrap: nowrap; }
    .board-search select { display: none; }  /* 검색 항목은 기본값(제목+내용) 유지 */
    .board-search input { flex: 1 1 auto; width: auto; min-width: 70px; }
    .board-search button { flex: 0 0 auto; white-space: nowrap; padding: 8px 10px; }
    .board-search .sb-search-reset { flex: 0 0 auto; white-space: nowrap; }

    /* ── 테이블 → 카드 ── */
    .board-table { border: 0; margin-bottom: 16px; }
    .board-table thead { display: none; }              /* 헤더 행 숨김 */
    .board-table tbody { display: block; }
    .board-table tr {
        display: block;
        background: var(--color-surface);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 14px 16px;
        margin-bottom: 12px;
    }
    .board-table td {
        display: inline;                                /* 메타는 한 줄에 흐르도록 */
        border: 0;
        padding: 0;
        text-align: left;
        font-size: 0.85rem;
    }

    /* 번호·추천 칸 숨김 (단, 빈 게시판 colspan 메시지 셀은 예외) */
    .board-table td:nth-child(1):not([colspan]),
    .board-table td:nth-child(6) { display: none; }

    /* 제목: 블록 + 강조 (제목 안의 답글/잠금/댓글수/첨부 아이콘 포함) */
    .board-table td.title {
        display: block;
        padding-left: 0;
        margin-bottom: 8px;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1.4;
    }

    /* 메타 한 줄: 작성자 · 작성일 · 조회 N */
    .board-table td:nth-child(3),
    .board-table td:nth-child(4),
    .board-table td:nth-child(5) { color: var(--color-text-dim); }
    .board-table td:nth-child(3)::after,
    .board-table td:nth-child(4)::after { content: " · "; }
    .board-table td:nth-child(5)::before { content: "조회 "; }

    /* 빈 게시판 안내 메시지(colspan) 유지 */
    .board-table td[colspan] {
        display: block;
        text-align: center;
        padding: 40px 0;
    }

    /* 공지 행: 번호 칸의 '공지' 라벨이 숨겨지므로 카드 테두리로 강조 */
    .board-table tr.notice-row {
        border-color: #ff6b35;
        background: var(--color-surface-2);
    }

    /* ── 하단(페이지네이션 + 글쓰기): 세로 스택 ── */
    .board-footer { flex-direction: column; }
    .board-write-btn { width: 100%; text-align: center; }
}

/* 비회원 작성 / 캡챠 */
.guest-box { border: 1px solid var(--border-color, #ddd); border-radius: 6px; padding: 12px; margin-bottom: 14px; }
.captcha-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.captcha-wrap img { border: 1px solid var(--border-color, #ddd); border-radius: 4px; }

/* Summernote 위지윅 에디터 테마 보정은 공용 sb/css/sb_summernote.css 로 통합됨(위젯이 자동 로드). */