@charset "utf-8";

/*
	common_1250.css/community.css를 로드한 뒤 이 파일을 이어서 로드해서 캐스케이드로 오버라이드한다.
	고정폭(width+min-width:1250px) 컨테이너가 두 군데 있다: common_1250.css의
	#gnv_box/#footer .foot-box, community.css의 #header-box/#contents(#con1250의 부모).
	전부 유동화해야 #con1250 이하 콘텐츠가 실제로 화면폭에 맞게 줄어든다.
*/

#gnv_box {
    width: 100%;
    min-width: 0;
    max-width: 1250px;
    padding: 0 15px;
    box-sizing: border-box;
}

#footer .foot-box {
    width: 100%;
    min-width: 0;
    max-width: 1250px;
    height: auto;
    padding: 0 15px;
    box-sizing: border-box;
}

#footer .foot-box .right {
    width: calc(100% - 140px);
}

#footer .foot-box img {
    max-width: 100%;
    height: auto;
}

#contents {
    width: 100%;
    min-width: 0;
    max-width: 1250px;
}

#header-box {
    width: 100%;
    min-width: 0;
    max-width: 1250px;
    margin: 0 auto;
    box-sizing: border-box;
}

#con1250 img {
    max-width: 100%;
    height: auto;
}

#con1250 {
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
}

/* towninfo/cardnews_gnu_header.php 등에서 쓰는 2단 컨테이너(community의 #con1250과는 다른 구조).
   towninfo.css 기준 #contents-left 935px + #contents-right 300px(+margin-left 15px) = 1250px.
   카드뉴스는 #contents-left-center를 인라인 <style>로 935px 재지정하므로, 이 파일의 <link>를
   그 인라인 스타일보다 뒤에 둬서(cardnews_gnu_header.php 참고) 여기서 유동화한다. */
#contents-left {
    width: 100%;
    min-width: 0;
    max-width: 935px;
}

#contents-left-center {
    width: 100%;
    max-width: 935px;
}

#contents-right {
    width: 100%;
    min-width: 0;
    max-width: 300px;
}

/* desktop */
@media only screen and (min-width:720px) {}

/* gnv 햄버거 토글: 데스크탑에서는 항상 숨김, 모바일에서만 노출(아래 900px 블록) */
.gnv-toggle {
    display: none;
}

/* mobile */
@media only screen and (max-width:900px) {
    #gnv {
        height: auto;
        overflow: visible;
    }

    /* #gnv_box 자체 좌우 패딩(15px, 데스크탑용)까지 겹치면 토글 텍스트가 본문(#con1250,
	   12px)보다 더 안쪽에서 시작해 왼쪽 정렬이 안 맞는다 — 모바일에서는 #gnv_box 패딩을
	   없애고 토글 버튼 패딩(12px)만으로 본문과 동일한 왼쪽 여백을 맞춘다. */
    #gnv_box {
        padding: 0;
    }

    .gnv-toggle {
        display: block;
        width: 100%;
        box-sizing: border-box;
        text-align: left;
        padding: 8px 12px;
        background: #f2f2f2;
        border: 0;
        font-size: 14px;
        color: #333;
        cursor: pointer;
    }

    /* 기본 접힘 — 토글 클릭 시 JS가 #gnv-menu에 .open을 붙였다 뗐다 함 */
    #gnv-menu {
        display: none;
    }

    #gnv-menu.open {
        display: block;
    }

    #gnv_box .gnv_left {
        float: none;
        height: auto;
    }

    #gnv_box .gnv_left li {
        float: none;
        border-right: 0;
        border-bottom: 1px solid #fff;
    }

    /* 원본 li a 패딩(좌 10px)이 토글/로고/본문 기준(12px)과 안 맞아서 왼쪽만 맞춰준다.
	   common_1250.css의 :first-child(HOME)는 padding-left:0px가 더 높은 특이도라 따로 지정. */
    #gnv_box .gnv_left li a {
        padding-left: 20px;
    }

    #gnv_box .gnv_left li:first-child a {
        padding-left: 20px;
    }

    #gnv_box .gnv_right {
        float: none;
        width: 100%;
        height: auto;
    }

    #gnv_box .gnv_right li {
        float: left;
    }

    #gnv_box .gnv_right li:first-child a {
        padding-left: 20px;
    }

    #footer .foot-box {
        height: auto;
        padding: 15px;
    }

    #footer .foot-box .left {
        float: none;
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }

    #footer .foot-box .right {
        float: none;
        width: 100%;
    }

    #footer .foot-box .right ul.menu li {
        float: none;
        display: block;
        padding: 2px 0;
    }

    #footer .foot-box .right ul.menu li.bar {
        display: none;
    }

    /* towninfo 2단 컨테이너: 사이드바(#contents-right)를 본문 아래로 스택 */
    #contents-left {
        float: none;
        width: 100%;
        max-width: none;
    }

    #contents-right {
        float: none;
        width: 100%;
        max-width: none;
        margin: 20px 0 0 0;
    }

}

/* community/top_menu.php는 공유 원본이라 건드리지 않는다. #header-box .menu(구인/프리랜서/
   렌트&리스 등)는 스프라이트 이미지 기반 고정폭(815px) 서브메뉴라 h1(250px)+.menu(815px)+
   strong(120px) 합쳐서 최소 1185px가 필요하다. #gnv/#footer가 대응 가능한 900px보다 훨씬
   넓은 구간(~900~1300px)까지 별도로 잡아야 겹침/가로 스크롤이 안 생긴다.
   각 링크의 텍스트는 이미 DOM에 접근성용 숨김 텍스트(.ht, community.css)로 존재하므로,
   완전히 숨기는 대신 이 텍스트를 다시 보이게 하고 세로 목록으로 재배치해서 햄버거
   드롭다운으로 노출한다(토글 버튼은 ads.php에서 JS로 삽입). */
.submenu-toggle {
    display: none;
}

@media only screen and (max-width:1300px) {
    #header {
        height: auto;
    }

    /* 왼쪽 패딩을 #con1250/.gnv-toggle과 동일한 12px로 맞춰서 로고가 본문/메뉴1 토글과
	   같은 세로선에서 시작하게 함 */
    #header-box {
        height: auto;
        overflow: hidden;
        padding: 15px 12px;
    }

    #header-box h1 {
        float: left;
    }

    #header-box strong {
        display: none;
    }

    .submenu-toggle {
        display: inline-block;
        float: right;
        margin-top: 18px;
        margin-right: 15px;
        background: none;
        border: 1px solid #666;
        color: #333;
        padding: 6px 14px;
        border-radius: 4px;
        font-size: 13px;
        cursor: pointer;
    }

    #header-box .menu {
        float: none;
        clear: both;
        width: 100%;
        height: auto;
        display: none;
    }

    #header-box .menu.open {
        display: block;
    }

    #header-box .menu ul {
        height: auto;
    }

    #header-box .menu ul li {
        display: block;
        float: none;
        width: 100%;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid #e0e0e0;
    }

    #header-box .menu ul li.bar {
        display: none;
    }

    #header-box .menu ul li a {
        display: block !important;
        float: none !important;
        width: auto !important;
        height: auto !important;
        background: none !important;
        padding: 12px 15px;
    }

    #header-box .menu ul li a .ht {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        text-indent: 0;
        line-height: normal;
        color: #333;
        font-size: 15px;
    }
}