/*
 * 모바일 대응 스타일 (main.jsp, waterBloomStats.jsp 에서 로드)
 * 목적: 최소 수준 - 모바일에서 가로 스크롤/잘림 없이 내용이 보이도록만 함 (전면 반응형 리디자인 아님)
 * new_styles.css 뒤에 이어서 로드되며, 이 파일을 <link>로 불러오는 페이지에만 영향을 줌.
 */

img, svg { max-width: 100%; }

@media (max-width: 768px) {

    html, body {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* 헤더 */
    #lee_header { height: auto; }
    .header_Area { width: 100%; box-sizing: border-box; padding: 0 10px; }
    .header_Area h1 { float: none; margin: 10px auto; }

    ul.lee_Gnb {
        width: 100%;
        height: auto;
        border-left: none;
        display: none;
        flex-wrap: wrap;
    }
    ul.lee_Gnb li {
        width: 33.333%;
        box-sizing: border-box;
        font-size: 11px;
    }
    ul.lee_Gnb li ul.sub li { width: 100%; }

    /* 메인 비주얼 배너 */
    .m_visual {
        width: 100%;
        height: auto;
        min-height: 140px;
        float: none;
        box-sizing: border-box;
        background-size: cover;
        background-position: center;
    }

    /* 컨텐츠 영역: 고정폭(1060px) 그리드를 세로 스택으로 전환 */
    .m_contents {
        width: 100%;
        min-height: 0;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .m_Conts {
        float: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        box-sizing: border-box;
    }

    .cont_info {
        width: 100% !important;
        box-sizing: border-box;
    }

    .cont_info > ul{
        margin-bottom: 100px;
    }

    .stic_graph, ul.stic_Grap, ul.grap_Name {
        width: 100%;
    }
    ul.stic_Grap li {
        width: 50%;
        box-sizing: border-box;
    }

    .m_Cont03 { height: auto; }
    .m_Cont03 > ul > li > a {
        width: 50%;
        height: auto;
        box-sizing: border-box;
    }

    .m_Cont04 > a {
        width: 100%;
        background-size: contain;
    }

    /* 차트 영역: main.jsp에 인라인 style="width:300px"로 박혀있어 !important로 덮어씀 */
    .m_Cont06 .cont_info,
    .m_Cont07 .cont_info,
    #chart1,
    #chart2 {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 푸터 */
    .footer_Area {
        width: 100%;
        box-sizing: border-box;
        padding: 0 15px 13px;
    }
    .footer_Area .add_nom {
        width: 100%;
        margin: 10px auto 0;
    }
    .btn_Icon ul { width: 100%; }

    /* 로그인 등 고정폭 팝업 */
    .pop_Login {
        width: 85vw;
        max-width: 350px;
        margin-left: 0;
        left: 7.5vw;
    }

    /* ---- waterBloomStats.jsp (서브페이지 공통 레이아웃: .contents > .left_Menu + .sub_right_Cont) ---- */

    .contents {
        width: 100%;
        min-height: 0;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .left_Menu {
        float: none;
        width: 100%;
        height: auto;
        display: none;
    }
    .left_Menu > dl {
        width: 100%;
        float: none;
    }
    .left_Menu > dl > dt,
    .left_Menu > dl > dd > ul > li {
        width: 100%;
        box-sizing: border-box;
    }
    .left_Menu > h3 { width: 100%; }

    .sub_right_Cont {
        width: 100%;
        float: none;
        margin: 0px 0;
        box-sizing: border-box;
    }

    .sub_right_Cont ul{
        margin-left: 10%;
    }

    .cont_Title ul {
        display: none;
    }

    /* 하이차트 컨테이너에 인라인 min-width:850px가 박혀있어 !important로 덮어씀 */
    #container {
        min-width: 0 !important;
        width: 100% !important;
    }

    /* 컬럼 10개짜리 통계표: 잘리는 대신 가로 스크롤 */
    .cont_Table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .cont_Table > table {
        min-width: 600px;
    }

    #seoul-gnb-plugin .seoul-gnb-holder {
        /*background: url("../images/menu-icon.svg") no-repeat left center;*/
    }

    /* 화면 폭에 상관없이 항상 정중앙 고정 (margin-left:30% 는 특정 폭에서만 맞았음) */
    #seoul-gnb-plugin .seoul-gnb-holder .seoul-gnb-link {
        float: none;
        position: absolute;
        left: 50%;
        top: 8px;
        margin: 0;
        transform: translateX(-50%);
    }

    .top_somBtn {
        display: none;
    }

    .seoul-gnb-menu {
        display: none;
    }

    .header_Area {
        display: block;
    }

    /* #lee_header가 position:relative라, 서울시 공통 GNB 바(#seoul-common-gnb, 높이 48px)
       바로 아래에서 시작함 -> top:-48px로 끌어올려서 그 바 위에 겹쳐 보이게 함 */
    .menu-icon {
        position: absolute;
        top: -48px;
        right: 10px;
        z-index: 2000;
        display: block;
        height: 48px;
        line-height: 48px;
        padding-left: 34px;
        margin: 0;
        background: url("../images/menu-icon.svg") no-repeat left center;
        background-size: 28px 28px;
        font-size: 14px;
        color: #fff;
        cursor: pointer;
    }

    /* menu-icon 클릭 시 body에 mobile-nav-open 클래스가 토글됨 (header.jsp 참고) */
    /* #lee_header가 자체 z-index:1000짜리 stacking context라, 그 안의 .menu-icon(2000)/.header_Area(1900)는
       #lee_header 안에서만 유효함. 뒷배경 오버레이(body::before, 1800)가 #lee_header(1000) 위에 깔려서
       열렸을 때 아이콘까지 눌리지 않던 문제 -> #lee_header 자체를 오버레이보다 위로 끌어올려서 해결 */
    body.mobile-nav-open #lee_header {
        z-index: 2100;
    }

    /* 열렸을 때 햄버거 아이콘 -> 닫기(X) 아이콘으로 교체 */
    body.mobile-nav-open .menu-icon {
        background-image: url("../images/close-icon.svg");
        z-index: 2000;
    }

    body.mobile-nav-open .header_Area {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1900;
        background: #fff;
        padding: 15px 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    body.mobile-nav-open ul.lee_Gnb {
        display: block;
    }
    body.mobile-nav-open ul.lee_Gnb li {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #eee;
    }
    body.mobile-nav-open ul.lee_Gnb li > a {
        display: block;
        padding: 10px 5px;
    }
    /* header.jsp의 JS가 $("ul.sub").hide()로 인라인 style="display:none"을 박아놔서 !important로 덮어씀 */
    body.mobile-nav-open ul.lee_Gnb li ul.sub {
        display: block !important;
        position: static;
        top: auto;
        left: auto;
        z-index: auto;
        border: none;
        background: #f7f7f7;
    }
    body.mobile-nav-open ul.lee_Gnb li ul.sub li {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        background: none;
        border-bottom: 1px solid #e5e5e5;
    }
    body.mobile-nav-open ul.lee_Gnb li ul.sub li a {
        text-indent: 0;
        padding: 8px 10px 8px 25px;
        line-height: normal;
        font-size: 12px;
        color: #666;
    }

    /* 메뉴 열렸을 때 뒷배경 살짝 어둡게 (탭해서 닫기용) */
    body.mobile-nav-open::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1800;
    }

}