@media (max-width: 1100px) {

    /* =========================
       레이아웃 기본 (중복 제거)
       ========================= */
    .page{
        grid-template-columns: 1fr;
        margin: 0 auto 48px;
        padding: 0 14px;
        gap: 14px;
    }

    .grid{
        grid-template-columns: 1fr;
    }

    /* =========================
       1) 상단 3개 라벨링 제거 (모바일만)
       ========================= */
    .status-group{
        display: none !important;
    }

    /* =========================
       2) 상단 타이틀 줄바꿈 방지 (모바일만)
       ========================= */
    .brand{
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .brand-text{
        min-width: 0;
        flex: 1 1 auto;
    }

    .brand-title,
    .brand-subtitle{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .app-bar{
        padding-bottom: 17px;
        margin-bottom: 15px;
    }

    /* =========================
       3) 탐색 메뉴: 기존 카드 느낌 유지 + 100% 폭 + 글자 가림 제거
       ========================= */
    .side-nav{
        /* 기존에 가져온 static/row 설정 유지 */
        position: relative;
        flex-direction: row;
        align-items: center;
        top: auto;
        height: auto;
        transform: none;

        /* 폭 100%로 꽉 차게 */
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;

        /* 헤더 바로 아래 붙이기 */
        margin: 3px 0 0px 0;

        /* 기존 디자인 유지 */
        padding: 15px 10px;
        background: #ffffff;
        border: 1px solid rgba(226,232,240,0.95);
        border-radius: 14px;
        box-shadow: 0 10px 22px rgba(15,23,42,0.06);

        display: flex;
        gap: 6px;

        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
    }
    .side-nav::-webkit-scrollbar{ display: none; }

    /* ‘탐색’ 제목/설명 숨김 */
    .nav-title,
    .nav-footnote{
        display: none;
    }

    .card-thumb {
        margin-top: 10%;
    }

    /* 메뉴 버튼 (기존 유지) */
    .nav-item{
        flex: 0 0 auto;
        white-space: nowrap;

        padding: 10px 12px;
        border-radius: 12px;

        background: rgba(241,245,249,0.65);
        border: 1px solid rgba(226,232,240,0.9);

        font-size: 14px;
        font-weight: 700;
        color: rgba(15,23,42,0.78);
        line-height: 1;

        position: relative;

        width:32%;
        text-align: center;
    }

    .nav-item.active{
        background: rgba(46,125,246,0.16);
        border-color: rgba(46,125,246,0.32);
        color: rgba(11,47,109,1);
    }

    /* 활성 인디케이터: 메뉴 글자 가리지 않게 “아래쪽 테두리”로만 표시 */
    .nav-item.active::after{
        content: '';
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 4px;          /* 조금 더 아래로 */
        height: 2px;          /* 3px -> 2px 로 얇게 */
        border-radius: 999px;
        background: rgba(46,125,246,0.95);
        opacity: 0.9;
        pointer-events: none;
    }

    /* =========================
       4) 문제의 “화살표 인디케이터” 제거 (글자 가림의 원인)
       ========================= */
    .side-nav::before,
    .side-nav::after{
        content: none !important;
        display: none !important;
    }

    /* =========================
       오늘의 헤드라인(섹션) - "가로로 길어지는 현상" 근본 해결
       키워드: 줄바꿈(WRAP)
       박스: 화면 안쪽(100%) 고정
       ========================= */

    /* 섹션 자체는 무조건 화면 안 */
    .section,
    .section-header,
    .section-body{
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 내부 요소가 부모 폭을 밀어내지 못하게 */
    .section *{
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 헤더: 너무 커 보이면 여기만 살짝 컴팩트 */
    .section-header{
        padding: 12px 12px 10px;
        gap: 8px;
    }

    /* 타이틀: 너무 크면 축소(원하면 수치 조정) */
    .section-title h2{
        font-size: 20px;
        line-height: 1.15;
        letter-spacing: -0.2px;
    }
    .section-title .sub{
        font-size: 12px;
    }

    /* 본문도 약간 축소 */
    .section-body{
        padding: 10px 12px 12px;
    }

    /* =========================
       키워드 칩: "줄바꿈"이 핵심
       ========================= */
    .chip-row{
        display: flex;
        flex-wrap: wrap;           /* 핵심: 줄바꿈 */
        gap: 8px;

        overflow: visible;         /* auto/scroll 금지 */
        width: 100%;
        max-width: 100%;

        margin-top: 8px;
    }

    /* 칩이 박스를 밀지 않게 */
    .chip{
        flex: 0 0 auto;
        white-space: nowrap;       /* 칩 글자는 한 줄 유지 */
        max-width: 100%;

        padding: 8px 10px;
        font-size: 13px;
        border-radius: 999px;
    }

    /* =========================
       날짜/토글: 가로 튐 방지 (줄바꿈 허용)
       ========================= */
    .section-actions{
        width: 100%;
        max-width: 100%;

        display: flex;
        align-items: center;
        justify-content: flex-start;

        gap: 10px;
        flex-wrap: wrap;           /* 핵심: nowrap 금지 */
        min-width: 0;

        margin-top: 8px;
    }

    .date-display{
        padding: 8px 10px;
        border-radius: 12px;
        font-size: 13px;
        min-width: 94px;
        flex: 0 0 auto;
    }

    /* 토글이 폭을 밀어내지 않게 */
    label.toggle{
        flex: 0 0 auto;
    }

    /* ‘속보 확인’ 글자 방향 안전 */
    .toggle-labels span{
        writing-mode: horizontal-tb;
    }


    /* =========================
       위로가기 버튼 클릭 액션
       ========================= */
    #scrollTopBtn{
        top: 85%;
        position: fixed;
        right: 14px;
        bottom: 84px;            /* 하단 탭/토글 안 겹치게 */
        z-index: 999;

        width: 44px;
        height: 44px;
        border-radius: 999px;

        background: rgba(255,255,255,0.95);
        border: 1px solid rgba(226,232,240,0.9);
        box-shadow: 0 10px 20px rgba(15,23,42,0.18);

        font-size: 20px;
        font-weight: 700;
        color: rgba(15,23,42,0.85);

        display: flex;
        align-items: center;
        justify-content: center;

        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    }

    /* 나타날 때 */
    #scrollTopBtn.show{
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    #cpang_iframe{
        width:355px;
    }

    #news-modal{
        align-items: flex-start;
        justify-content: center;
        padding: 16px;
        box-sizing: border-box;
    }

    /* 실제 모달 카드 */
    #news-modal .modal-card{
        position: fixed;       /* 핵심 */
        left: 16px;
        right: 16px;

        top: 16px;             /* 위 여백 */
        bottom: calc(76px + 16px);  /* 하단 메뉴(76) + 여백(16) */

        width: auto;           /* fixed + left/right 쓰면 auto가 맞음 */
        max-width: none;

        margin: 0;             /* fixed니까 margin 제거(겹침 방지) */

        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

}

@media (max-width: 1100px) {

    /* 모바일에서는 기존 상단 메뉴 제거 */
    .side-nav{
        display: none !important;
    }

    /* 본문이 하단 네비에 가리지 않게 */
    body,
    .page{
        padding-bottom: 76px;
    }

    .bottom-nav{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 76px;

        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-items: center;

        background: rgba(255,255,255,0.94);
        backdrop-filter: blur(12px);
        border-top: 1px solid var(--border);
        z-index: 9999;
    }

    .bn-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;

        font-size: 12px;
        font-weight: 700;
        color: var(--muted);
        text-decoration: none;
    }

    .bn-ico{
        font-size: 20px;
        line-height: 1;
    }

    .bn-item.active{
        color: var(--accent);
    }


}