@media (max-width: 1024px) {
            body {
                height: auto;
                overflow: auto;
                padding: 0;
                background: #f8f9fa;
            }

            .main-container {
                flex-direction: column;
                height: auto;
                gap: 10px;
                padding: 10px;
                width: 100% !important;
                max-width: 100% !important;
                display: flex !important;
                box-sizing: border-box;
            }

            /* 좌/우 영역 패딩 및 너비 최적화 */
          .left-area,
.right-area {
    display: contents !important;
}

            /* 1페이지/2페이지 내부 패널 간격 통일 */
            #intro-mode-left {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box;
}

#detail-mode-left {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box;
}

            /* 상단 타이틀: 단색 배경으로 깔끔하게 조정 */
            .l1-title {
                width: 100% !important;
                margin: 0 0 10px 0;
                border-radius: 12px;
                height: 110px;
                background: #333;
                padding: 20px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                text-align: left;
                align-items: flex-start;
                position: sticky !important;
                top: 0 !important;
                z-index: 2000 !important;
            }

            .slogan-top {
                font-size: 13px;
                opacity: 0.8;
            }

            .brand-main {
                font-size: 26px;
                margin: 6px 0;
            }

            /* 패널 디자인: 부드러운 무채색 그림자 - 모든 패널 여백 통일 */
            .glass-panel {
                border: 1px solid #eee;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
                margin-bottom: 0 !important;  /* flex gap이 간격 담당 */
                margin-top: 0 !important;
                border-radius: 16px;
            }

            /* 입력창 스타일 */
            input,
            select {
                height: 45px;
                border: 1px solid #ddd;
                border-radius: 10px;
                padding: 0 12px;
                font-size: 13px;
                background: #fff;
            }

          .l2-search div[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    border: none !important;      /* 이전 수정에서 생긴 외곽선 강제 제거 */
    background: transparent !important; /* 배경을 투명하게 하여 칸 내 정렬 */
    padding: 0 !important;
    box-shadow: none !important;
}

            .input-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 10px; /* 위쪽과 간격 확보 */
}

            .btn-search {
                height: 50px;
                background: #333;
                border-radius: 12px;
                font-size: 16px;
                margin-top: 15px;
            }

            /* 뉴스 및 리스트 레이아웃 */
            .l3-summary {
                height: 50px;
                line-height: 50px;
                font-size: 14px;
                text-align: center;
                color: #333;
                font-weight: bold;
            }

           .l4-list {
    height: auto !important;
    min-height: 60px;
    max-height: 220px;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    padding: 6px;
    position: relative;
    z-index: 1;
}
.scroll-container {
    min-height: 0 !important;
    overflow-x: hidden !important;
}

            .card {
                min-height: 45px;
                margin-bottom: 5px;
                border-radius: 12px;
                background: #fff;
                border: 1px solid #eee;
            }

            /* 하단 티커 및 지도 */
            .r1-map {
                height: 320px;
                min-height: 320px;
                border-radius: 20px;
                margin-bottom: 10px;
            }

            .r2-ad-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
}

            .ad-unit {
    height: 90px;
    min-height: 90px;
}

            /* 모바일: left-area 안의 푸터는 완전히 숨김 */
            .left-area .l6-footer,
            #intro-mode-left .l6-footer,
            #detail-mode-left .l6-footer {
                display: none !important;
            }

            /* 모바일: right-area 안의 푸터도 숨김 */
            .right-area .l6-footer {
                display: none !important;
            }

            /* 모바일 전용 푸터: 뉴스 티커 바로 아래에 표시 */
            .r3-news-ticker {
                height: 55px;
                border-radius: 12px;
                margin-bottom: 10px !important;
                margin-top: 0 !important;
            }

            /* 모바일 전용 하단 푸터 스타일 */
            .mobile-only-footer {
                display: block !important;
                padding: 20px;
                font-size: 12px;
                line-height: 1.8;
                color: #888;
                background: #fff;
                border: 1px solid #eee;
                box-shadow: 0 4px 10px rgba(0,0,0,0.05);
                border-radius: 16px;
                margin-bottom: 10px;
            }

            /* 상세 페이지 업무 카드 및 레이아웃 강제 재배치 */
            .task-detail-container {
                flex-direction: column !important;
                height: auto !important;
                gap: 10px;
            }

            .task-ctrl-group,
            .task-ctrl-a,
            .task-slider-b {
                width: 100% !important;
                max-width: 100% !important;
                flex: none !important;
                height: auto !important;
                box-sizing: border-box;
            }

            .task-ctrl-a {
                padding: 0;
                border-radius: 16px;
            }

            .task-slider-b {
                padding: 15px;
                border-radius: 16px;
                min-height: 250px;
            }

            .task-container {
                display: flex !important;
                flex-direction: row !important;
                flex-wrap: nowrap !important;
                gap: 0 !important;
                overflow: hidden !important;
                padding: 0 !important;
                width: 100% !important;
                height: 280px !important; /* 2x2 높이 충분히 확보 */
                scroll-behavior: smooth;
            }

            .task-page-wrapper {
                flex: 0 0 100%;
                width: 100%;
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: 1fr 1fr;
                gap: 10px;
                padding: 10px;
                box-sizing: border-box;
            }

            .task-card {
                width: 100% !important;
                height: 120px !important;
                min-width: 0 !important;
                padding: 12px !important;
                font-size: 11px !important;
                background: #fff;
                border: 1.5px solid #333;
                border-radius: 8px;
            }

/* 페이지네이션: 모바일 터치 최적화 */
.pagination {
    display: flex !important;
    justify-content: center !important;
    margin-top: 20px !important;
    gap: 8px !important;
}

.pagination a, .pagination span {
    min-width: 38px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    text-decoration: none;
    color: #333;
}

            /* 하단 푸터 제어 */
            .pc-footer { display: none !important; }
            .mobile-footer { display: block !important; }
        }