/* === 모바일 메뉴 패널 (항상 작동) === */
#mobileMenuOverlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10001;
}
#mobileMenuOverlay.active { display: block; }

#mobileMenuPanel {
    position: fixed;
    top: 0; right: -300px;
    width: 280px; height: 100vh;
    background: #fff;
    z-index: 10002;
    overflow-y: auto;
    transition: right 0.3s ease;
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
}
#mobileMenuPanel.active { right: 0 !important; }

#mobileMenuPanel .m-menu-header {
    padding: 20px 16px;
    background: #333;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#mobileMenuPanel .m-menu-close {
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    background: none;
    border: none;
}
#mobileMenuPanel .m-menu-item {
    display: block;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    text-decoration: none;
    font-size: 14px;
}
#mobileMenuPanel .m-menu-item:active { background: #f0f0f0; }
#mobileMenuPanel .m-menu-item i { width: 24px; margin-right: 8px; color: #999; }
#mobileMenuPanel .m-menu-divider {
    padding: 8px 16px;
    font-size: 11px;
    color: #999;
    background: #f8f8f8;
    font-weight: 600;
}

/**
 * KDCA Mobile-First CSS
 * 네이티브 앱 수준 모바일 레이아웃
 * kornft.org 전용
 */

/* ============================================
   MOBILE BASE (max-width: 768px)
   ============================================ */
@media all and (max-width: 768px) {

    /* --- 전체 레이아웃 --- */
    body {
        font-size: 14px;
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
    }

    #hd_wrapper { padding: 0; }
    #container { padding: 0 12px; margin-top: 56px; }
    #footer { padding: 20px 12px; font-size: 11px; }

    /* --- 모바일 헤더 --- */
    #hd {
        position: relative;
    }

    /* PC GNB 드롭다운만 숨김, 1차 메뉴는 스크롤 가능 */
    .gnb_2dul { display: none !important; }

    /* 상단 유틸리티(로그인/회원가입) 축소 */
    #hd_login_msg { display: none; }
    #tnb { font-size: 11px; }

    /* --- 모바일 상단 햄버거 버튼 --- */
    #mobileMenuBtn {
        display: flex !important;
    }

    #mobileMenuOverlay {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 10001;
    }

    #mobileMenuOverlay.active { display: block; }

    #mobileMenuPanel {
        position: fixed;
        top: 0; right: -280px;
        width: 280px; height: 100%;
        background: #fff;
        z-index: 10002;
        overflow-y: auto;
        transition: right 0.3s ease;
        box-shadow: -4px 0 20px rgba(0,0,0,0.15);
    }

    #mobileMenuPanel.active { right: 0; }

    #mobileMenuPanel .m-menu-header {
        padding: 20px 16px;
        background: #333;
        color: #fff;
        font-size: 16px;
        font-weight: 700;
    }

    #mobileMenuPanel .m-menu-item {
        display: block;
        padding: 14px 16px;
        border-bottom: 1px solid #f0f0f0;
        color: #333;
        text-decoration: none;
        font-size: 14px;
    }

    #mobileMenuPanel .m-menu-item:hover,
    #mobileMenuPanel .m-menu-item:active {
        background: #f5f5f5;
    }

    #mobileMenuPanel .m-menu-item i {
        width: 24px;
        margin-right: 8px;
        color: #999;
    }

    #mobileMenuPanel .m-menu-divider {
        padding: 8px 16px;
        font-size: 11px;
        color: #999;
        background: #f8f8f8;
        font-weight: 600;
        text-transform: uppercase;
    }

    /* --- 서브 히어로 배너 --- */
    .contentTitle,
    .subTopBg {
        height: 120px !important;
        min-height: 120px !important;
    }

    .contentTitle h2,
    .subTopBg h2 {
        font-size: 20px !important;
        padding-top: 40px !important;
    }

    /* --- 사이드바 숨김 --- */
    #sideBar,
    .leftMenuWr,
    #snb {
        display: none !important;
    }

    #ctWrap {
        width: 100% !important;
        float: none !important;
        padding: 0 !important;
    }

    /* --- 메인 슬라이더 --- */
    .mainVisualImage {
        height: 200px !important;
    }

    .mvSlider li {
        height: 200px !important;
    }

    .mvSlider .mvMwAlign {
        font-size: 16px !important;
    }

    .mvSlider .mvMwAlign h2 {
        font-size: 18px !important;
    }

    /* --- 메인 퀵메뉴 --- */
    .mCiconBox, .mCiconBox2, .mCiconBox3,
    .mCiconBox4, .mCiconBox5 {
        width: 25% !important;
        padding: 8px 4px !important;
    }

    .mCiconBox .circle_icon,
    .mCiconBox2 .circle_icon,
    .mCiconBox3 .circle_icon {
        width: 48px !important;
        height: 48px !important;
    }

    .mCiconBox span,
    .mCiconBox2 span,
    .mCiconBox3 span {
        font-size: 11px !important;
        margin-top: 4px !important;
    }

    /* --- 등기 목록 카드형 --- */
    #bo_list .likeTbl > ul > li {
        display: block !important;
        padding: 12px !important;
        border-bottom: 1px solid #eee;
    }

    #bo_list .likeTbl > ul > li > div {
        display: block !important;
        padding: 0 !important;
        border: none !important;
    }

    .likeTbl > ul > li.likeTblTh { display: none !important; }

    .td_subject .bo_tit a {
        font-size: 15px !important;
        font-weight: 600;
        line-height: 1.4;
    }

    /* --- 등기 상세보기 --- */
    #bo_v { padding: 0 !important; }

    #bo_v_atc { padding: 12px !important; }

    #bo_v_info {
        padding: 8px 12px !important;
        font-size: 12px;
    }

    /* 등기 개요 테이블 → 세로 배치 */
    .view_info_table,
    table.basic_table {
        display: block !important;
    }

    .view_info_table tr,
    table.basic_table tr {
        display: block !important;
        border-bottom: 1px solid #eee;
        padding: 8px 0;
    }

    .view_info_table th,
    table.basic_table th {
        display: block !important;
        width: 100% !important;
        font-size: 11px;
        color: #999;
        padding: 0 !important;
        border: none !important;
        background: none !important;
    }

    .view_info_table td,
    table.basic_table td {
        display: block !important;
        width: 100% !important;
        padding: 2px 0 !important;
        border: none !important;
        font-size: 14px;
    }

    /* --- 폼 요소 --- */
    .frm_input,
    .full_input,
    select.frm_input {
        font-size: 16px !important; /* iOS 줌 방지 */
        padding: 10px 12px !important;
        border-radius: 8px !important;
    }

    .btn_submit,
    .btn_confirm .btn_submit {
        width: 100% !important;
        padding: 14px !important;
        font-size: 16px !important;
        border-radius: 8px !important;
    }

    .btn_confirm {
        padding: 12px 0 !important;
    }

    /* --- 하단 탭바 (네이티브 앱 스타일) --- */
    #mobileTabBar {
        display: flex !important;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: 60px;
        background: #1a2332;
        border-top: none;
        z-index: 9999;
        justify-content: space-around;
        align-items: center;
        box-shadow: 0 -2px 15px rgba(0,0,0,0.2);
        padding-bottom: env(safe-area-inset-bottom);
    }

    #mobileTabBar a {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: #8899aa;
        font-size: 10px;
        padding: 6px 0;
        flex: 1;
    }

    #mobileTabBar a:active { color: #fff; }

    #mobileTabBar a i {
        font-size: 20px;
        margin-bottom: 3px;
    }

    /* 탭바 공간 확보 */
    body { padding-bottom: 56px !important; }

    /* --- 검색바 --- */
    #sch_stx, .sch_input {
        font-size: 16px !important;
        padding: 12px !important;
        border-radius: 24px !important;
    }

    /* --- 게시판 공통 --- */
    #bo_btn_top { padding: 8px 0; }
    #bo_list_total { font-size: 12px; }

    /* --- 뉴스/웹진 스킨 --- */
    .mainBoxWebzineStyle .listType_01,
    .mainBoxWebzineStyle2 .listType_01 {
        flex-direction: column !important;
    }

    .mainBoxWebzineStyle .listType_01 .img_wr {
        width: 100% !important;
        height: 180px !important;
    }

    /* --- QR코드 --- */
    #bo_v img[alt*="QR"],
    .qr_code img {
        max-width: 150px !important;
    }

    /* --- 페이지네이션 --- */
    .pg_wrap {
        padding: 16px 0;
    }

    .pg_wrap a, .pg_wrap strong {
        min-width: 36px;
        height: 36px;
        line-height: 36px;
        font-size: 13px;
    }

    /* --- 유틸리티 --- */
    .sound_only { display: none; }

    /* 브레드크럼 숨김 */
    .location_wr,
    .breadcrumb_wr {
        display: none !important;
    }

    /* 카카오톡 채널 버튼 위치 조정 */
    #kakao-talk-channel-chat-button,
    .kakao_btn {
        bottom: 64px !important;
    }

    /* 스크롤 탑 버튼 위치 */
    #top_btn {
        bottom: 70px !important;
        right: 12px !important;
    }

}

/* ============================================
   SMALL MOBILE (max-width: 420px)
   ============================================ */
@media all and (max-width: 420px) {
    .mCiconBox, .mCiconBox2, .mCiconBox3 {
        width: 25% !important;
    }

    .mCiconBox .circle_icon {
        width: 40px !important;
        height: 40px !important;
    }

    .mCiconBox span {
        font-size: 10px !important;
    }

    .mainVisualImage { height: 160px !important; }

    .contentTitle h2 { font-size: 18px !important; }
}

/* ============================================
   PC에서는 모바일 요소 숨김
   ============================================ */
@media all and (min-width: 769px) {
    #mobileMenuBtn,
    #mobileMenuOverlay,
    #mobileMenuPanel,
    #mobileTabBar { display: none !important; }
}