/* PC/모바일 top 제어 */
    .top-pc { display: none; }
    .top-mobile { display: block; }


    /* 반응형 레이아웃 컨테이너 */
    .responsive-container {
        display: flex;
        flex-direction: column; /* 모바일에서는 세로 배치 */
        width: 100%; /* 모바일에서 꽉 채움 */
        margin: 0 auto;
    }

    /* 사이드바 (좌측 메뉴) - 모바일에서는 숨김 */
    .responsive-sidebar {
        display: none;
    }

    /* 메인 콘텐츠 */
    .responsive-content {
        width: 100%;
        padding: 0; /* 컨테이너의 좌우 여백을 0으로 설정 */
        box-sizing: border-box;
    }

    /* 게시판 테이블 스타일 */
    .board-table {
        width: 100%;
        border-collapse: collapse;
    }
    .board-table th, .board-table td {
        padding: 10 15 10 15; /* 기본 셀 안쪽 여백은 10px */
        box-sizing: border-box;
    }
    .board-table th {
        height: 40px;
        background-color: #f2f2f2;
    }
    .board-table td {
         height: 40px;
    }

    /* 모바일에서 타이틀(th)의 좌우 패딩만 0으로 설정 */
    .board-table thead th {
        padding-left: 0;
        padding-right: 0;
    }

    .board-table .col-subject {
        text-align: left;
    }
    .separator-row td {
        height: 1px;
        padding: 0;
        background-color: #eeeeee;
    }
    
    /* 모바일에서는 '번호', '작성자' 열 숨김 */
    .board-table .col-num,
    .board-table .col-author {
        display: none;
    }
    
    /* 모바일에서 제목과 날짜의 비율 조정 */
    .board-table .col-subject { width: 70%; }
    .board-table .col-date { width: 30%; font-size: 0.9em; text-align: center; }


    /* --- PC (태블릿 이상, 768px 이상) --- */
    @media (min-width: 768px) {
        
        /* PC에서는 PC top만 보임 */
        .top-pc { display: block; }
        .top-mobile { display: none; }

        .responsive-container {
            flex-direction: row; /* PC에서는 가로 배치 */
            width: 90%; 
            max-width: 940px; /* 최대 넓이 940px */
            margin: 15px auto 0 auto;
        }

        /* PC에서는 사이드바 보임 */
        .responsive-sidebar {
            display: block;
            flex: 0 0 190px;
            margin-right: 50px;
        }

        .responsive-content {
            flex: 1 1 700px;
            padding: 0; /* PC는 원래 0이었음 (유지) */
        }

        /* PC에서는 '번호', '작성자' 열 보임 */
        .board-table .col-num,
        .board-table .col-author {
            display: table-cell;
            text-align: center;
        }

        /* PC에서 비율 재조정 */
        .board-table .col-num { width: 10%; }
        .board-table .col-subject { width: 50%; }
        .board-table .col-author { width: 15%; }
        .board-table .col-date { width: 25%; }

        /* PC에서는 타이틀(th)의 여백을 다시 10px로 복원 */
        .board-table thead th {
            padding-left: 10px;
            padding-right: 10px;
        }
    }