@charset "utf-8";

/* ==========================================================================
   반응형 레이아웃 - 농촌간호학회
   브레이크포인트:
   - PC      : 980px 이상
   - 태블릿  : 768px ~ 979px
   - 모바일  : 767px 이하
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   공통 컨테이너
   -------------------------------------------------------------------------- */
#contents { width: 100%; overflow-x: hidden; }

/* --------------------------------------------------------------------------
   태블릿 + 모바일 공통 (979px 이하)
   -------------------------------------------------------------------------- */
@media (max-width: 979px) {

    /* 상단 topMenu */
    #topMenu { height: auto; }
    #topMenu_container { width: 100%; min-width: 0; }
    #topMenu_container #topMenu_wrapper {
        width: 100%;
        position: static;
        margin: 0;
        text-align: right;
    }

    /* 서브페이지 레이아웃 */
    #sub_wrap { min-width: 0; }
    #sub_top { min-width: 0; height: auto; }
    .common_box { width: 100%; }
    #sub_contWrap { width: 100%; padding: 20px 15px; }
    #sub_contLeft { float: none; width: 100%; margin-bottom: 15px; }
    #sub_contRight { float: none; width: 100%; }
    .sub_content { width: 100%; }

    /* 메인 영역 */
    #mainSpecial_container { min-width: 0; height: auto; }
    #mainSpecial_container .mainSpecial_wrapper { width: 100%; height: auto; }
    #mainSpecial_container .mainSpecial_wrapper img { width: 100%; height: auto; }
    #mc01, #mc02 { width: 100%; }

    /* 푸터 */
    #footer { height: auto; }
    #footer_container { height: auto; }
    #footer_container .contents_wrapper { width: 100%; padding: 10px 15px; height: auto; }
    #footer_container .contents_wrapper .familysite { position: static; margin-top: 8px; }
    #footer_container .contents_wrapper .familysite ul { position: static; }
    #footer_container .contents_wrapper .copy { position: static; margin-top: 8px; }
    #footer_container .contents_wrapper .copy img { position: static; }
}

/* --------------------------------------------------------------------------
   모바일 (767px 이하)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

    #topMenu_container #topMenu_wrapper {
        background-color: #4d4d4d;
        padding: 4px 10px;
    }
    .topMenu_member li img { height: 20px; }

    #sub_top img { width: 100%; height: auto; }
    #sub_contWrap { padding: 12px 10px; }
    .sub_title .titleimg { margin-bottom: 10px; }
    .sub_content { padding: 0; }

    #footer_container .contents_wrapper { padding: 10px; }
    #footer_container .contents_wrapper .contents ul { display: flex; flex-wrap: wrap; }
    #footer_container .contents_wrapper .contents li { height: auto; }

    /* 게시판 */
    .board_list table { width: 100%; }
    .board_list td, .board_list th { font-size: 11px; padding: 4px 3px; }
}

/* --------------------------------------------------------------------------
   서브메뉴 (텍스트 기반)
   -------------------------------------------------------------------------- */
#text_sub_menu { width: 100%; }
#text_sub_menu .sub_tit {
    background-color: #4d7c35;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    padding: 13px 15px;
    margin-bottom: 1px;
    cursor: pointer;
    position: relative;
    user-select: none;
}
#text_sub_menu .sub_tit::after {
    content: '▼';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    transition: transform 0.3s;
}
#text_sub_menu.open .sub_tit::after { transform: translateY(-50%) rotate(180deg); }

#text_sub_menu ul { list-style: none; margin: 0; padding: 0; }
#text_sub_menu ul li a {
    display: block;
    padding: 9px 15px;
    font-size: 13px;
    color: #555;
    text-decoration: none;
    border-bottom: 1px solid #eee;
    background-color: #fafafa;
    border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s;
}
#text_sub_menu ul li a:hover { background-color: #f0f0f0; color: #333; }
#text_sub_menu ul li.active a {
    background-color: #eaf2e3;
    color: #4d7c35;
    font-weight: bold;
    border-left-color: #4d7c35;
}

/* PC: 항상 표시 */
@media (min-width: 768px) {
    #text_sub_menu ul { display: block !important; }
    #text_sub_menu .sub_tit::after { display: none; }
}
/* 모바일: 아코디언 */
@media (max-width: 767px) {
    #text_sub_menu ul { display: none; }
    #text_sub_menu.open ul { display: block; }
}