/* 헤더 영역 */
        .board-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 24px;
            gap: 16px;
        }

        .board-title h2 {
            font-size: 24px;
            font-weight: 700;
            margin: 0 0 4px 0;
        }

        .board-title p { font-size: 14px; color: var(--text-muted); margin: 0; }
        .board-title span { color: var(--primary-color); font-weight: 700; }

        .board-search { display: flex; align-items: center; gap: 8px; }
        .board-search select,
        .board-search input {
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 10px 12px;
            font-size: 14px;
            font-family: inherit;
            color: var(--text-sub);
            outline: none;
            box-sizing: border-box;
        }
        .board-search select:focus,
        .board-search input:focus { border-color: var(--primary-color); }

        .search-input-wrap { position: relative; }
        .search-input-wrap input { padding-right: 40px; width: 200px; }
        .search-input-wrap button {
            position: absolute; right: 0; top: 0; bottom: 0;
            background: none; border: none; padding: 0 12px;
            color: var(--text-muted); cursor: pointer;
        }
        .search-input-wrap button:hover { color: var(--primary-color); }

        /* 테이블 래퍼 */
        .table-wrap {
            background-color: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            overflow: hidden;
        }

        /* 데스크탑 테이블 기본 스타일 */
        .board-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
            text-align: center;
        }

        .board-table thead {
            background-color: var(--bg-color);
            border-bottom: 1px solid var(--border-color);
            font-size: 13px;
            color: var(--text-sub);
        }

        .board-table th { padding: 16px; font-weight: 600; }
        .board-table td { padding: 16px; border-bottom: 1px solid var(--border-color); border-right:0; border-left:0;color: var(--text-muted); }
        .board-table tbody tr { transition: background-color 0.2s; }
        .board-table tbody tr:hover { background-color: var(--bg-color); }
        .board-table tr.notice { background-color: var(--notice-bg); }
        .board-table tr.notice td { color: var(--text-sub); }
        .board-table tr.notice .col-id { color: var(--primary-color); font-weight: 700; }

        .col-id { width: 80px; }
        .col-subject { text-align: left; }
        .col-author { width: 120px; }
        .col-date { width: 120px; }
        .col-hit { width: 80px; }

        .subject-wrap { display: flex; align-items: center; gap: 6px; font-weight: 500; color: var(--text-main); }
        .subject-wrap a:hover { color: var(--primary-color); text-decoration: underline; }
        .subject-title { max-width: 100%; white-space: normal; word-break: break-all; }

        .badge-new {
            background-color: #ef4444; color: white; font-size: 10px; font-weight: 700;
            padding: 2px 6px; border-radius: 9999px; line-height: 1; flex-shrink: 0;
        }
        .comment-count { color: var(--primary-color); font-size: 12px; font-weight: 700; flex-shrink: 0; }

        /* 하단 컨트롤 영역 */
        .board-footer {
            padding: 16px 24px;
            background-color: rgba(249, 250, 251, 0.5);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .footer-spacer { width: 100px; }

        .pagination { display: flex; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
        .pagination li a {
            display: flex; align-items: center; justify-content: center;
            padding: 8px 14px; background-color: #ffffff; color: var(--text-muted);
            font-size: 14px; border-right: 1px solid var(--border-color); transition: all 0.2s;
        }
        .pagination li:last-child a { border-right: none; }
        .pagination li a:hover { background-color: var(--bg-color); color: var(--text-sub); }
        .pagination li a.active { background-color: var(--primary-bg); color: var(--primary-color); font-weight: 600; }

        .btn-write {
            display: inline-flex; align-items: center; justify-content: center; gap: 6px;
            padding: 10px 20px; background-color: var(--primary-color); color: #ffffff;
            font-size: 14px; font-weight: 500; border: none; border-radius: 8px;
            cursor: pointer; font-family: inherit; transition: background-color 0.2s;
        }
        .btn-write:hover { background-color: var(--primary-hover); }

        /* ================= 반응형 (모바일) ================= */
        @media (max-width: 768px) {
            .container { margin-top: 24px; }
            .board-header { flex-direction: column; align-items: flex-start; }
            .board-search { width: 100%; }
            .search-input-wrap { flex: 1; }
            .search-input-wrap input { width: 100%; }
            
            /* 모바일 테이블 -> 리스트형 카드 변환 */
            .board-table thead { display: none; }
            .board-table tr { 
                display: flex; flex-wrap: wrap; 
                padding: 16px; border-bottom: 1px solid var(--border-color);
                align-items: center; 
            }
            .board-table td { padding: 0; border: none; text-align: left; }
            
            /* 열 배치 변경 */
            .board-table .col-id { display: none; } /* 번호 숨김 */
            .board-table tr.notice .col-id { display: block; width: 100%; margin-bottom: 6px; font-size: 12px; } /* 공지 아이콘만 표시 */
            .board-table .col-subject { width: 100%; margin-bottom: 8px; font-size: 15px; }
            
            /* 메타 정보(작성자, 날짜, 조회수) 인라인 배치 */
            .board-table .col-author, 
            .board-table .col-date, 
            .board-table .col-hit {
                display: inline-block; width: auto; font-size: 12px; color: var(--text-muted);
            }
            .board-table .col-author::after, 
            .board-table .col-date::after {
                content: ''; display: inline-block; width: 1px; height: 10px;
                background-color: #d1d5db; margin: 0 8px; vertical-align: middle;
            }
            .board-table .col-hit::before { content: '조회 '; }

            /* 하단 컨트롤 모바일 배치 */
            .board-footer { flex-direction: column; gap: 16px; padding: 16px; }
            .footer-spacer { display: none; }
            .btn-write { width: 100%; padding: 12px; }
        }