@charset "utf-8";

/* mobile.css — 원본에 없던 모바일 대응. 전부 이 @media 안에만 둔다(데스크톱 무회귀 보장).
   원본은 960px 고정(viewport 도 width=960)이라 좁은 화면에서는 잘려 나갔다.
   #wrap 이 overflow:hidden 이라 가로 스크롤조차 안 돼 아예 안 보였다. */

@media (max-width: 999px) {

    /* ── 공통 ── */
    body { font-size: 13px; }
    #wrap { overflow-x: hidden; }

    /* ── 헤더: 로고 가운데, 햄버거 왼쪽, 아이콘 오른쪽 ── */
    .header > .inner,
    #header > .inner { width: auto; height: auto; padding: 8px 0 10px; }

    h1 { position: static; text-align: center; padding: 6px 56px 0; }
    h1 img { max-width: 60%; height: auto; }

    #topmenu { position: absolute; right: 10px; top: 14px; left: auto; }
    #topmenu img { width: 24px; height: auto; }

    /* 장식용 리본은 좁은 화면에서 로고·아이콘과 겹친다 */
    #roundRibbon { display: none; }

    /* 원본 대메뉴(테이블)는 238px x 4 라 들어갈 자리가 없다 → 햄버거로 대체 */
    #navigation { display: none; }

    .mnavBtn {
        display: block; position: absolute; left: 10px; top: 12px;
        width: 34px; height: 30px; padding: 6px 4px; cursor: pointer; z-index: 11;
    }
    .mnavBtn span { display: block; height: 3px; margin: 4px 0; background: #039; border-radius: 2px; }
    #mnavToggle:checked ~ .mnavBtn span { background: #F90; }

    /* 로고 줄(높이 약 54px) 아래로 펼쳐지는 드롭다운.
       absolute 라 흐름에서 빠져 헤더를 밀어내지 않고 본문 위에 덮인다. */
    #mnavToggle:checked ~ .mnav { display: block; }
    .mnav {
        position: absolute; left: 0; right: 0; top: 58px; z-index: 10;
        max-height: calc(100vh - 58px); overflow-y: auto;
        background: url(/legacy/media/pattern.jpg) repeat;
        padding: 6px 0 10px;
        box-shadow: 0 8px 14px rgba(0, 0, 0, .3);
    }
    .mnavGroup { border-top: 1px solid rgba(255, 255, 255, .25); }
    .mnavGroup:first-child { border-top: none; }
    .mnav a { display: block; color: #FFF; }
    .mnav .mnavTop { padding: 15px 16px; font: bold 14px/1.3 "Wng"; }
    .mnav ul { padding: 0 0 8px; }
    .mnav li { list-style: none; }
    /* 손가락 탭 최소 44px 확보 */
    .mnav li a { padding: 14px 16px 14px 30px; font: normal 13px/1.3 "Wng"; color: #DDE; }
    .mnav li a:active { color: #F90; }

    /* ── 메인 키비주얼 ── */
    #keyvisual { position: static; width: auto; height: auto; padding: 6px 0 0; }

    /* ── 서브 비주얼 ── */
    #subvisual { position: static; width: auto; height: auto; }
    #subvisual #areaNm { padding: 16px 0 10px; font-size: 22px; }

    /* ── 본문 ── */
    #container > .inner,
    .container > .inner { width: auto; }

    #sidemenu { width: auto; padding: 0 10px 14px; }
    #wad1 { margin-top: 14px; }
    #wad1 ul { padding: 8px 10px; }
    #wad1 li { padding: 6px 4px; font-size: 12px; }

    #contents { width: auto; padding: 10px 16px 24px; }
    #location { position: static; text-align: right; padding-bottom: 4px; }

    /* 원본 서브페이지는 통짜 이미지 한 장이라 줄이면 글자도 같이 작아진다.
       잘리는 것보다는 낫고, 확대해서 볼 수 있게 둔다. */
    #contents img { max-width: 100%; height: auto; }
    #contents table, .bbsBody iframe { max-width: 100%; }

    /* ── 메인 최신글 3단 → 세로 ── */
    #latests { display: block; width: 100%; margin: 16px 0; }
    #latests tbody, #latests tr { display: block; }
    #latests .x { display: none; }
    #latests .a { display: block; width: auto; height: auto; margin-bottom: 14px; padding-bottom: 6px; }
    #latests li a { width: 70%; }
    #latests li span { width: 30%; }

    /* ── 게시판: NAME 열을 빼고 제목 우선 ── */
    .bbsHead .nm, .bbsRow .nm, .bbsItem .w { display: none; }
    .bbsHead .dt { width: 74px; }
    .bbsItem .t, .bbsRow .t { width: calc(100% - 120px); }
    .bbsRow .no { width: 30px; }

    /* ── 오시는 길: 15.css 가 body 안에서 늦게 실려 #map 을 이긴다 → id 2개로 특이도 확보 ── */
    #objN #map { width: auto; }

    /* ── 푸터: 절대배치 해제하고 세로로 ── */
    #footer > .inner { width: auto; height: auto; padding: 14px 16px 18px; }
    #logoMono { position: static; text-align: center; padding-bottom: 10px; }
    #logoMono img { max-width: 120px; height: auto; }
    #copyright { position: static; }
    #copyright p { word-break: keep-all; }

    /* ── TOP 버튼: 원본 위치(가운데+480px)는 화면 밖이다 ── */
    #floater { left: auto; right: 10px; top: auto; bottom: 14px; margin-left: 0; }

    /* 13px 점은 손가락으로 누르기 어렵다 */
    .pagination li { margin: 6px; }
    .pagination li a { transform: scale(1.4); }
}