/* =========================================================
   JCC.TV 반응형 패치 (Phase 1)
   - style.css, screen.css는 그대로 두고, 이 파일은
     "추가"로 불러오는 패치 파일입니다.
   - 기존 디자인/색상/구조는 유지하면서, 화면 크기에 따라
     레이아웃이 자연스럽게 줄어들도록 보정합니다.
   ========================================================= */

/* 1. 이미지가 화면(컨테이너)보다 커지지 않도록 */
img {
    max-width: 100%;
    height: auto;
}

/* 2. 전체 레이아웃(760px 표) - 화면이 넓으면 가운데, 좁으면 꽉 채움 */
table[width="760"] {
    width: 100%;
    max-width: 760px;
}

/* 3. 메인 슬라이더 영역 - 데스크탑은 기존 그대로(585px) 유지 */
#container {
    width: 100%;
    max-width: 585px;
}


/* =========================================================
   태블릿 / 모바일 (가로 768px 이하)
   ========================================================= */
@media screen and (max-width: 768px) {

    /* 한글이 더 선명하게 보이도록 모바일 기본 폰트 보정 */
    body, td, font, a, div {
        font-family: -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    }

    /* 이 사이트는 모든 표(table)가 레이아웃용이므로,
       모바일에서는 표/행/칸을 전부 블록으로 풀어서
       순서대로 위->아래로 쌓이게 만든다.
       (좌측메뉴 -> 중앙콘텐츠 -> 우측코너 순서로 자연스럽게 배치) */
    table, tbody, thead, tr, td, th {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* PC(760px) 기준 좌표로 배치된 position:absolute / fixed 요소들이
       모바일에서 콘텐츠와 겹치거나 빈 공간을 만드는 문제 해결
       -> 모든 요소를 일반적인 순서대로(static) 배치 */
    * {
        position: static !important;
    }

    /* 셀 안쪽 여백은 살짝 남겨서 너무 답답하지 않게 */
    td {
        box-sizing: border-box;
        padding: 4px 8px !important;
    }

    /* 글자 크기를 모바일 기준으로 키움 (기존 9pt -> 약 14px) */
    body, td, font {
        font-size: 14px !important;
        line-height: 1.5;
    }

    /* 마우스오버로만 열리던 서브메뉴(인사말/예배안내 등)는
       모바일에서 위치가 깨지므로 일단 숨김.
       -> Phase 2에서 햄버거 메뉴 안으로 재배치 예정 */
    #Layer1, #Layer2, #Layer3, #Layer4 {
        display: none !important;
    }

    /* 메인 슬라이더(easySlider)는 585px 고정폭 가로 캐러셀 전제로 만들어져
       모바일 폭에서 충돌(빈 공간) 발생.
       -> 모바일에서는 슬라이더 동작을 끄고 첫 번째 이미지만
          화면 폭에 맞춘 정적 배너로 표시 */
    #container, #content, #slider,
    .faContents, #slider ul {
        width: 100% !important;
        height: auto !important;
        overflow: hidden !important;
        position: static !important;
        margin: 0 !important;
    }

    #slider li {
        display: none !important;
    }

    #slider li:first-child {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        float: none !important;
        position: static !important;
    }

    #prevBtn, #nextBtn, #slider1prev, #slider1next {
        display: none !important;
    }

    /* 배경이미지로 그려진 메뉴바가 잘리지 않도록 */
    td[background] {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
}


/* =========================================================
   작은 모바일 (가로 480px 이하) - 글자 크기 추가 보정
   ========================================================= */
@media screen and (max-width: 480px) {
    body, td, font {
        font-size: 15px !important;
    }
}