@charset "utf-8";

/* =========================================
   1. 기본 설정
   ========================================= */
body {
    margin: 0;
    padding: 0;
    /* 뉴스 사이트처럼 깔끔한 고딕 계열 우선 적용 */
    font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Dotum', sans-serif;
}

h1 { line-height: 130%; font-size:26px; font-weight:700;}
h2 { line-height: 135%; font-size:22px; font-weight:600;}
h3 { line-height: 135%; font-weight:600;}
b {font-weight:500;}

/* =========================================
   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 {
    padding: 0 20px 20px 20px;
    min-height: 250px;
    word-break: break-all;
}

/* [모바일 폰트 설정]
   화면이 작은 모바일(기본)에서는 글자를 18px로 키웁니다.
*/
.view-body, 
.view-body div, 
.view-body p, 
.view-body span {
    /* 모바일 추천: 18px (네이버 뉴스 스타일) */
    font-size: 17px !important; 
    
    /* 줄 간격: 글자가 커진 만큼 시원하게 벌림 (1.7 ~ 1.8) */
    line-height: 1.65 !important; 
    
    /* 자간: 글자가 클 때 너무 퍼져 보이지 않게 살짝 조임 */
    letter-spacing: -0.5px !important;
    
    color: #333;
}

/* 이미지는 비율 유지 */
.view-body img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    line-height: normal !important;
    margin: 15px 0; /* 이미지 위아래 여백 추가 */
}

/* =========================================
   5. PC 화면 설정 (768px 이상)
   ========================================= */
@media (min-width: 768px) {
    
    .top-pc, .bottom-pc { display: block; }
    .top-mobile, .bottom-mobile { display: none; }
    
    .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;
    }

    .responsive-content {
        flex: 1;
        padding: 0;
    }

    .view-body {
        padding: 0;
    }

    /* [PC 폰트 설정] 
       PC에서는 화면이 크므로 17px 정도면 충분합니다.
       여기서 값을 따로 지정해줍니다.
    */
    .view-body, 
    .view-body div, 
    .view-body p, 
    .view-body span {
        font-size: 16px !important; /* PC는 17px */
        line-height: 1.7 !important; 
    }
}