/* 기본 리셋 및 폰트 설정 */
    body {
        margin: 0;
        padding: 0;
        font-family: 'Malgun Gothic', 'Dotum', sans-serif;
    }

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

    /* [추가] PC/모바일 bottom 제어 */
    .bottom-pc { display: none; }
    .bottom-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;
    }

    /* 게시판 테이블 스타일 -> 본문 스타일로 변경 
    */
    .view-header {
        padding: 15px 20px;
        border-bottom: 2px solid #f0f0f0;
    }
    .view-header h2 {
        margin: 0 0 10px 0;
        font-size: 1.4em;
        word-break: keep-all;
    }
    .view-meta {
        font-size: 0.9em;
        color: #888;
    }
    
    /* 'command' 필드가 표시될 본문 영역 */
    .view-body {
        padding: 20px 20px;
        min-height: 250px;
        line-height: 1.57;
        font-size: 1.1em;
        color: #333;
        word-break: break-all; /* 긴 글자 자동 줄바꿈 */
    }

    /* 목록 버튼 */
    .view-footer {
        text-align: center;
        padding: 20px 0;
    }
    .view-footer .btn-list {
        display: inline-block;
        padding: 10px 25px;
        background-color: #f2f2f2;
        color: #333;
        text-decoration: none;
        border-radius: 4px;
    }


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

        /* [추가] PC에서는 PC bottom만 보임 */
        .bottom-pc { display: block; }
        .bottom-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에서 본문 스타일 조정 */
        .view-header {
            padding: 30px 10;
            border-bottom-width: 3px;
        }
        .view-body {
            padding: 20px 10px;
	font-size: 15px;
        }
    }



/* 버튼들을 담을 부모 컨테이너 */
    .button-container {
        text-align: right;     /* 내부 요소들을 오른쪽으로 정렬 */
        margin-top: 20px;      /* <div id="space20"> 대신 여백 추가 */
        margin-bottom: 20px;   /* <div id="space20"> 대신 여백 추가 */
    }

    /* 삭제 버튼이 포함된 form을 인라인 블록으로 만듭니다. */
    /* 이렇게 해야 링크(a)와 폼(form)이 나란히 배치됩니다. */
    .button-container form {
        display: inline-block; /* 핵심: form을 한 줄에 나란히 세움 */
        margin: 0;             /* form의 기본 여백 제거 */
        vertical-align: middle;/* 다른 버튼과 세로 정렬 맞춤 */
    }

    /* 모든 버튼(a 태그와 button 태그)에 공통으로 적용될 스타일 
    */
    .btn {
        display: inline-block;  /* <a> 태그도 버튼처럼 취급 */
        padding: 10px 18px;
        font-size: 16px;
        color: white;
        text-decoration: none;  /* 링크 밑줄 제거 */
        border-radius: 5px;
        border: none;           /* button 태그의 기본 테두리 제거 */
        cursor: pointer;        /* 마우스 커서 변경 */
        font-family: inherit;   /* 버튼의 글꼴을 통일 */
        line-height: 1.5;       /* 텍스트 세로 정렬 */
        margin-left: 8px;       /* 버튼 사이의 간격 */
    }

    /* 수정 버튼 (파란색) */
    .btn-primary {
        background-color: #007bff;
    }
    .btn-primary:hover {
        background-color: #0056b3;
    }

    /* 삭제 버튼 (빨간색) */
    .btn-danger {
        background-color: #dc3545; /* 삭제 버튼은 보통 빨간색 */
    }
    .btn-danger:hover {
        background-color: #c82333;
    }



/* 이미지 컨테이너 (선택 사항: 이미지와 본문 사이 간격 등을 조절하고 싶을 때 사용) */
.view-photo-container {
    max-width: 100%; /* 부모 요소의 너비를 넘지 않도록 설정 */
    margin-bottom: 20px; /* 이미지 아래에 간격 추가 */
    overflow: hidden; /* 혹시 모를 오버플로우 방지 */
}

/* 실제 이미지 태그에 적용되는 스타일 */
.view-photo {
    width: 100%; /* 부모 컨테이너에 맞춰 가로 100%로 설정 */
    height: auto; /* 가로에 맞춰 세로 비율 자동 조정 */
    display: block; /* 이미지 하단에 불필요한 공백 제거 */
    max-width: 100%; /* 이미지가 원본 크기 이상으로 늘어나지 않도록 방지 */
    border-radius: 5px; /* 모서리 둥글게 (선택 사항) */
}