/**
 * KDCA Mobile CSS v2 - Native App Quality
 * 네이티브 앱 수준 정교한 모바일 레이아웃
 */

/* ============================================
   모바일 메뉴 패널 (항상 작동 - 미디어쿼리 밖)
   ============================================ */
#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: #1a2332;
    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: 28px; cursor: pointer;
    background: none; border: none; line-height: 1;
}
#mobileMenuPanel .m-menu-item {
    display: block;
    padding: 13px 16px;
    border-bottom: 1px solid #f5f5f5;
    color: #333;
    text-decoration: none;
    font-size: 14px;
}
#mobileMenuPanel .m-menu-item:active { background: #f0f0f0; }
#mobileMenuPanel .m-menu-item i { width: 22px; margin-right: 10px; color: #888; font-size: 13px; }
#mobileMenuPanel .m-menu-divider {
    padding: 6px 16px;
    font-size: 11px;
    color: #999;
    background: #f8f8f8;
    font-weight: 600;
    letter-spacing: 0.5px;
}

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

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

    /* === 모바일 서브내비게이션 숨김 (햄버거로 통합) === */
    .contentTitleSub,
    .bNBar,
    .bNBarMw,
    .bNBar1D,
    .bNBar2D,
    .leftMenuUseFlase .contentTitle + div,
    #snb_side,
    .location_wr,
    .loc1D_wr,
    .loc2D_wr,
    .loc1DA,
    .loc2DA,
    [class*="locWr"],
    [class*="loc1D"],
    [class*="loc2D"] {
        display: none !important;
    }

    /* === GNB 1차메뉴 가로 스크롤 개선 === */
    #gnb {
        display: none !important; /* 모바일에서 GNB 완전 숨김 - 햄버거로 대체 */
    }

    /* === 헤더 간소화 === */
    #hd {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        height: 50px;
        padding: 0 12px !important;
        background: #fff;
        border-bottom: 1px solid #eee;
    }

    #hd_wrapper { padding: 0 !important; margin: 0 !important; }
    #hd_h1 { margin: 0 !important; }
    #hd_h1 a img, #logo img { height: 28px !important; }

    /* 상단 유틸리티 완전 숨김 (모바일) */
    #tnb, #tnbWr, #hd_pop, .hd_pop, #hd_qnb { display: none !important; }
    #hd .sch_btn, #btnSchbox { display: none !important; }

    /* === 서브 히어로 배너 깔끔하게 === */
    .contentTitle, .subTopBg, [class*="subTopBg"] {
        height: 60px !important;
        min-height: 60px !important;
        margin: 0 -12px !important;
    }
    .contentTitle h2, .subTopBg h2 {
        font-size: 16px !important;
        padding-top: 20px !important;
        letter-spacing: -0.5px;
    }

    /* === 페이지 제목 (서브 배너 아래) === */
    .h2_title, h2.h2_title, #ctWrap > h2 {
        font-size: 17px !important;
        font-weight: 700;
        padding: 14px 0 10px !important;
        margin: 0 0 10px !important;
        border-bottom: none !important;
        color: #1a2332;
    }

    /* === 본문 영역 === */
    #container { margin-top: 0 !important; }
    #ctWrap { padding: 0 14px !important; }

    /* === 하단 탭바 완벽 고정 === */
    #mobileTabBar {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 56px !important;
        background: #1a2332 !important;
        z-index: 9999 !important;
        justify-content: space-around !important;
        align-items: center !important;
        box-shadow: 0 -1px 10px rgba(0,0,0,0.2) !important;
        padding: 0 !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        margin: 0 !important;
        border: none !important;
    }

    #mobileTabBar > a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
        color: #7a8a9a !important;
        font-size: 9px !important;
        flex: 1 !important;
        height: 56px !important;
        padding: 4px 0 !important;
        gap: 2px;
        -webkit-tap-highlight-color: transparent;
    }

    #mobileTabBar > a > span:first-child {
        font-size: 20px !important;
        line-height: 1;
    }

    #mobileTabBar > a:active { color: #fff !important; }

    /* 가운데 + 버튼 */
    #mobileTabBar > a:nth-child(3) {
        margin-top: -20px !important;
        height: auto !important;
    }

    /* === 푸터 하단 여백 === */
    body { padding-bottom: 60px !important; }
    #footer { margin-bottom: 60px !important; }

    /* === 상담문의 박스 (사이드바 안) === */
    .sidebar_contact, .sideBar_contact { display: none !important; }



    

    
    #hd_pop { display: none !important; }

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

    /* === 컨테이너 === */
    #container { padding: 0 !important; margin: 0 !important; width: 100% !important; }
    #ctWrap { width: 100% !important; float: none !important; padding: 0 12px !important; }

    

    

    /* === 브레드크럼 === */
    .location_wr, .breadcrumb_wr, [class*="breadcrumb"] {
        font-size: 11px !important;
        padding: 6px 12px !important;
        background: #f8f9fa;
        margin: 0 -12px 12px;
        border-bottom: 1px solid #eee;
    }

    /* === 페이지 제목 === */
    .h2_title, h2.h2_title {
        font-size: 18px !important;
        padding: 12px 0 8px !important;
        margin-bottom: 10px !important;
        border-bottom: 2px solid #1a2332;
    }

    /* === 메인 슬라이더 === */
    .mainVisualImage { height: 180px !important; }
    .mvSlider li { height: 180px !important; }
    .mvSlider .mvMwAlign h2 { font-size: 16px !important; }
    .mvSlider .mvMwAlign p { font-size: 12px !important; }

    /* === 메인 퀵메뉴 === */
    .mCiconBox, .mCiconBox2, .mCiconBox3, .mCiconBox4, .mCiconBox5 {
        width: 25% !important;
        padding: 6px 2px !important;
    }
    .mCiconBox .circle_icon, .mCiconBox2 .circle_icon, .mCiconBox3 .circle_icon {
        width: 44px !important; height: 44px !important;
    }
    .mCiconBox span, .mCiconBox2 span, .mCiconBox3 span {
        font-size: 10px !important;
        margin-top: 3px !important;
        display: block;
    }

    /* === 검색바 === */
    #sch_stx, .sch_input, input[name="stx"] {
        font-size: 15px !important;
        padding: 10px 14px !important;
        border-radius: 20px !important;
    }

    /* === 게시판 목록 (테이블→카드형) === */
    .likeTbl > ul > li.likeTblTh { display: none !important; }
    .likeTbl > ul > li.likeTblTd {
        display: block !important;
        padding: 12px 0 !important;
        border-bottom: 1px solid #eee !important;
    }
    .likeTbl > ul > li > div {
        display: inline-block !important;
        border: none !important;
        padding: 0 !important;
    }
    .likeTbl > ul > li > div.td_subject {
        display: block !important;
        padding-bottom: 4px !important;
    }
    .likeTbl .td_subject .bo_tit a {
        font-size: 14px !important;
        font-weight: 500;
        line-height: 1.4;
        color: #333;
    }
    .likeTbl .td_name, .likeTbl .td_date, .likeTbl .td_datetime, .likeTbl .td_num {
        font-size: 11px !important; color: #999 !important;
    }

    /* === 게시판 기본 스킨 (basic_knca 등) === */
    .basic_table { width: 100% !important; }
    .basic_table th, .basic_table td {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 3px 0 !important;
        border: none !important;
    }
    .basic_table th {
        font-size: 11px !important;
        color: #999 !important;
        background: none !important;
    }
    .basic_table td { font-size: 14px !important; }
    .basic_table tr {
        display: block !important;
        border-bottom: 1px solid #eee;
        padding: 8px 0 !important;
    }

    /* === 등기 목록 (form_knca) 모바일 카드형 === */
    #bo_list .listType_01 {
        flex-direction: column !important;
        padding: 12px 0 !important;
        border-bottom: 1px solid #eee;
    }
    #bo_list .listType_01 .img_wr {
        width: 100% !important;
        height: auto !important;
        max-height: 200px;
        overflow: hidden;
        border-radius: 8px;
        margin-bottom: 8px;
    }
    #bo_list .listType_01 .img_wr img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover;
    }

    /* === 등기 상세 (view) === */
    #bo_v { padding: 0 !important; }
    #bo_v_atc { padding: 8px 0 !important; }
    #bo_v_info { padding: 8px 0 !important; font-size: 12px !important; }
    #bo_v_title { font-size: 16px !important; }

    /* 등기 개요 테이블 → 세로 배치 */
    .view_info_table, #bo_v table, table[class*="tbl"] {
        display: block !important;
    }
    .view_info_table tr, #bo_v table tr {
        display: flex !important;
        flex-wrap: wrap;
        border-bottom: 1px solid #f0f0f0;
        padding: 6px 0;
    }
    .view_info_table th, #bo_v table th {
        display: block !important;
        width: 100% !important;
        font-size: 11px !important;
        color: #888 !important;
        padding: 0 !important;
        border: none !important;
        background: none !important;
        font-weight: 500;
    }
    .view_info_table td, #bo_v table td {
        display: block !important;
        width: 100% !important;
        padding: 2px 0 !important;
        border: none !important;
        font-size: 13px !important;
    }

    /* === 폼 요소 === */
    .frm_input, .full_input, select.frm_input, input[type="text"], input[type="email"], input[type="tel"], textarea, select {
        font-size: 16px !important;
        padding: 10px 12px !important;
        border-radius: 8px !important;
        border: 1px solid #ddd !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    input[type="text"]:focus, input[type="email"]:focus, textarea:focus, select:focus {
        border-color: #4e73df !important;
        box-shadow: 0 0 0 3px rgba(78,115,223,0.1) !important;
        outline: none;
    }

    .btn_submit, .btn_confirm .btn_submit, input[type="submit"] {
        width: 100% !important;
        padding: 14px !important;
        font-size: 16px !important;
        border-radius: 10px !important;
        background: #1a2332 !important;
        color: #fff !important;
        border: none !important;
        font-weight: 600;
    }

    .btn_cancel, .btn_b01, .btn_b02 {
        padding: 10px 16px !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }

    .btn_confirm { padding: 12px 0 !important; text-align: center; }

    /* === 하단 탭바 === */
    #mobileTabBar {
        display: flex !important;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: 60px;
        background: #1a2332;
        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: 4px 0;
        flex: 1;
    }
    #mobileTabBar a:active { color: #fff; }
    #mobileTabBar a i { font-size: 20px; margin-bottom: 2px; }

    /* === 페이지네이션 === */
    .pg_wrap { padding: 16px 0; text-align: center; }
    .pg_wrap a, .pg_wrap strong {
        display: inline-flex;
        align-items: center; justify-content: center;
        min-width: 36px; height: 36px;
        font-size: 13px;
        border-radius: 8px;
        margin: 0 2px;
    }
    .pg_wrap strong { background: #1a2332; color: #fff; }

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

    /* === 푸터 === */
    #footer {
        padding: 16px 12px !important;
        font-size: 11px !important;
        line-height: 1.6;
        margin-bottom: 60px;
    }

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

    /* === 유틸리티 === */
    .sound_only { display: none !important; }

    /* 카카오톡 버튼 위치 */
    #kakao-talk-channel-chat-button, .kakao_btn { bottom: 68px !important; right: 8px !important; }
    #top_btn { bottom: 68px !important; right: 8px !important; }

    /* === 관리자 버튼 === */
    .btn_admin { font-size: 11px !important; padding: 4px 8px !important; }

    /* === 댓글 === */
    #bo_vc { padding: 12px 0 !important; }
    .bo_vc_w { padding: 8px !important; }

    /* === FAQ 아코디언 === */
    .faq_list li { padding: 12px !important; }
    .faq_list li .title { font-size: 14px !important; }

    /* === 등기신청 폼 === */
    .tbl_frm01 table { display: block !important; }
    .tbl_frm01 tr { display: block !important; margin-bottom: 8px; }
    .tbl_frm01 th { display: block !important; width: 100% !important; padding: 4px 0 !important; font-size: 12px !important; color: #666; }
    .tbl_frm01 td { display: block !important; width: 100% !important; padding: 0 !important; }

    /* === 서명 캔버스 === */
    canvas { max-width: 100% !important; }

    /* === 마이페이지 탭 === */
    .nav-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .nav-tabs .nav-link { white-space: nowrap; font-size: 12px; padding: 8px 12px; }
}

/* ============================================
   SMALL MOBILE (max-width: 420px)
   ============================================ */
@media all and (max-width: 420px) {
    .mCiconBox span, .mCiconBox2 span { font-size: 9px !important; }
    .mainVisualImage { height: 150px !important; }
    .contentTitle h2 { font-size: 15px !important; }
    #gnb .gnb_1da { font-size: 11px !important; padding: 8px 6px !important; }
}