<style>
    /* 1. 기본 설정 및 폰트 */
    body {
        margin: 0;
        padding: 0;
        font-family: 'Malgun Gothic', 'Dotum', sans-serif;
    }

    /* 2. PC/모바일 표시 제어 (기본: 모바일) */
    .top-pc, .bottom-pc { display: none; }
    .top-mobile, .bottom-mobile { display: block; }
    .responsive-sidebar { display: none; }

    /* 3. 레이아웃 공통 (모바일 기준) */
    .responsive-container {
        display: flex;
        flex-direction: column; /* 세로 배치 */
        width: 100%;
        margin: 0 auto;
    }

    .responsive-content {
        width: 100%;
        box-sizing: border-box; /* 패딩이 너비에 포함되도록 설정 */
    }

    /* 4. 본문 영역 스타일 (핵심 수정 부분) */
    .view-body {
        /* [수정됨] 숫자 뒤에 'px'를 꼭 붙여야 작동합니다. 상 우 하 좌 순서 */
        padding: 0 20px 20px 20px; 
        min-height: 250px;
        line-height: 1.7;
        font-size: 1em;
        color: #333;
        word-break: break-all; /* 긴 주소 자동 줄바꿈 */
    }

    /* [추가] 본문 이미지 반응형 처리 (화면 뚫고 나감 방지) */
    .view-body img {
        max-width: 100% !important; /* 부모 넓이를 넘지 않음 */
        height: auto !important;    /* 비율 유지 */
        display: block;             /* 이미지 하단 여백 제거 */
    }

    /* =========================================
       5. PC 화면 설정 (768px 이상일 때 적용) 
       ========================================= */
    @media (min-width: 768px) {
        
        /* PC/모바일 표시 반전 */
        .top-pc, .bottom-pc { display: block; }
        .top-mobile, .bottom-mobile { display: none; }
        
        /* 레이아웃 PC형으로 변경 */
        .responsive-container {
            flex-direction: row; /* 가로 배치 */
            width: 90%; 
            max-width: 940px;
            margin: 15px auto 0 auto;
        }

        /* 사이드바 표시 */
        .responsive-sidebar {
            display: block;
            flex: 0 0 190px; /* 너비 고정 */
            margin-right: 50px;
        }

        /* 콘텐츠 영역 PC 설정 */
        .responsive-content {
            flex: 1; /* 남은 공간 차지 */
            padding: 0;
        }

        /* PC에서는 본문 좌우 여백 제거 (전체 레이아웃이 잡아주므로) */
        .view-body {
            padding: 0;
        }
        
        .view-header {
            padding: 0;
            border-bottom-width: 3px;
        }
    }


h1 {
    line-height: 130%;
  }

h2 {
    line-height: 135%;
  }
</style>