/* ============================================================================
 * KDCA 반응형 모바일 오버라이드 (2026-06-12)
 * 라이브 kornft.org (app/* Phase6) 페이지를 PC레이아웃→모바일 최적화.
 * layout.php 에서 kdca-reg.css 뒤(마지막)에 로드 → 최우선 캐스케이드.
 * 별도 파일 = 멀티세션 핫파일(kdca-reg.css) 충돌 회피.
 *
 * 원칙: PC 디자인 구조 유지하되 ≤768px 에서 폭을 줄이며 깨지는 부분을 교정.
 *   - 가로 스크롤(overflow) 제거 · 고정폭→유동 · 테이블 가독 · 그리드 스택
 *   - A4 증명서/등본(.hpa) = 공문서라 비파괴(가로 팬 허용)
 *   - /app/m 순수 모바일과 무관 (반응형 동일페이지 전용)
 * ========================================================================== */

/* ====== 공통: 가로 스크롤 차단 (모든 폭) ====== */
html { -webkit-text-size-adjust: 100%; }

/* ============================================================================
 * 태블릿~모바일 (≤ 980px) — 사이드바/2단 레이아웃 단일화 시작
 * ========================================================================== */
@media all and (max-width: 980px) {
    #ctWrap, #container { width: 100% !important; max-width: 100% !important; float: none !important; box-sizing: border-box; }
    #sideBar, .sideBar, #snb_side, aside#sideBar { display: none !important; }   /* PC 좌측 사이드바 숨김(모바일은 하단탭/햄버거) */
}

/* ============================================================================
 * 모바일 (≤ 768px) — 핵심 교정
 * ========================================================================== */
@media all and (max-width: 768px) {

    /* ---- 가로 오버플로 원천 차단 ---- */
    html, body { overflow-x: hidden !important; max-width: 100% !important; }
    #ctWrap, #container, .container, #wrap, #wrapper { width: 100% !important; max-width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; }

    /* ---- 유동 미디어 (이미지/영상/iframe 넘침 방지) ---- */
    #container img, #ctWrap img, .home-wrap img,
    #container video, #container iframe, #container embed,
    .rc-img img, .rl-img img, .list_img img, .file-preview img { max-width: 100% !important; height: auto !important; }
    audio, video { width: 100% !important; max-width: 100% !important; }

    /* ---- 고정폭 유틸 클래스 → 유동 (목록 w200/w150, 마이페이지 등) ---- */
    #container .w100, #container .w150, #container .w200, #container .w250,
    #container .w300, #container .w350, #container .w400, #container .w500,
    .w100, .w150, .w200, .w250, .w300, .w350, .w400, .w500 {
        width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box;
    }
    /* 인라인 width:px 가 큰 요소 (소개/마이페이지) — img/div 한정 보강 */
    #container [style*="width:"][style*="px"]:not(.hpa):not(.hpa *) { max-width: 100% !important; }

    /* ---- 콘텐츠 테이블 가독화 (key:value 표) — A4(.hpa) 제외 ---- */
    #container table:not(.hpa table), #container .tablecss {
        width: 100% !important; max-width: 100% !important; table-layout: fixed; word-break: break-word; border-collapse: collapse;
    }
    #container table:not(.hpa table) th, #container table:not(.hpa table) td,
    #container .tablecss th, #container .tablecss td {
        word-break: break-word; white-space: normal !important; font-size: 13px; padding: 8px 6px !important; vertical-align: top;
    }
    /* 첫 칸(라벨) 너무 넓지 않게 */
    #container .tablecss td:first-child, #container .tablecss th:first-child { width: 34% !important; }
    /* 가로로 넓은 데이터 표는 가로 스크롤 래핑 (강제 fixed 부적합한 경우) */
    .table-scroll, .tableScroll, #container .wide-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* ---- Bootstrap 그리드 모바일 스택 보강 (자격시험 col-md 8개 등) ---- */
    #container [class*="col-md-"], #container [class*="col-lg-"],
    #container [class*="col-sm-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
    #container .row { margin-left: 0 !important; margin-right: 0 !important; }

    /* ---- 페이지 제목/히어로 ---- */
    .h2_title, h2.h2_title, #page_title { font-size: 17px !important; line-height: 1.35; }
    .contentTitle, [class*="subTopBg"] { height: auto !important; min-height: 56px !important; }

    /* ---- 폼 요소 (등기신청/회원/검색) — 풀폭 + iOS 줌방지 ---- */
    #container input[type="text"], #container input[type="email"], #container input[type="tel"],
    #container input[type="number"], #container input[type="password"], #container input[type="search"],
    #container input[type="url"], #container input[type="date"], #container select, #container textarea,
    .frm_input, .full_input {
        width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; font-size: 16px !important;
    }
    #container ::placeholder { font-size: 13px !important; }
    #container textarea { min-height: 90px; }

    /* ---- 블록체인 해쉬/지갑주소 긴 문자열 → 줄바꿈 (모바일 가로넘침 최대 주범: 상세 10개·마이페이지 35개) ---- */
    .hash-tag, .sv_member, #container .hash-tag, #container [class*="hash"],
    #container .wallet, #container [class*="wallet-addr"], #container code, #container .tx-hash {
        word-break: break-all !important; overflow-wrap: anywhere !important; white-space: normal !important;
        max-width: 100% !important; display: inline-block; box-sizing: border-box; font-size: 11px !important;
    }
    /* ---- 서명 캔버스 (등기신청/회원) → 폭 맞춤 (그리기 좌표는 JS가 rect 기준 → 표시 스케일 무해) ---- */
    #container canvas, canvas.signature, .sign-pad canvas, .signature-pad canvas, #bo_w canvas {
        max-width: 100% !important; height: auto !important; box-sizing: border-box; border: 1px solid var(--m-line, #e6ebf2);
    }
    /* ---- 큰 인라인 width(900/640px 등) 요소 일반 보호 ---- */
    #container section:not(.hpa):not(.hpa *), #container .row > div:not(.hpa):not(.hpa *) { max-width: 100% !important; box-sizing: border-box; }

    /* ---- 버튼: 터치 타겟 + 줄바꿈 허용 ---- */
    #container .btn, #container .btn_b01, #container .btn_b02, #container button,
    #container input[type="submit"] { white-space: normal !important; word-break: keep-all; min-height: 40px; }
    /* 버튼 그룹 가로나열 → 줄바꿈 wrap */
    #container .flex-y-center, #container .btn-group, #container .flex-x-end { flex-wrap: wrap !important; gap: 6px; }

    /* ---- 등기목록 액션버튼(증명서/등본 열람) 한 줄 균등 ---- */
    #bo_v .flex-y-center > div, #container .flex-y-center > div { flex: 1 1 0 !important; min-width: 0 !important; margin: 0 !important; }

    /* ---- 마이페이지 메뉴/카드 그리드 ---- */
    .biz_menu, .kmm-grid, .mypage-menu { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
    .biz_menu > *, .kmm-grid > * { width: auto !important; }

    /* ---- 홈 위젯 카드 (등기물건 목록) ---- */
    .home-reg-grid, .home-recent-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .home-wrap, .home-section { padding-left: 12px !important; padding-right: 12px !important; }

    /* ---- 푸터 ---- */
    #footer, .footer, address.container { font-size: 11px !important; padding: 16px 12px !important; word-break: keep-all; }

    /* ---- 페이지네이션 터치 ---- */
    .pg_wrap a, .pg_wrap strong { min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }

    /* ---- A4 증명서/등기부등본 (.hpa) = SVG foreignObject 래핑 (cert-mobile-svg.js) ----
       벡터처럼 폭에 맞춰 축소(레이아웃 안 깨짐) + 확대/축소 컨트롤. PC 무영향. */
    .cert-svg-zoomwrap { overflow: auto !important; -webkit-overflow-scrolling: touch; width: 100% !important; background: #eceef1; padding: 8px 0; box-sizing: border-box; }
    .cert-svg-fit { width: 100%; height: auto; display: block; margin: 0 auto; background: #fff; box-shadow: 0 2px 14px rgba(0,0,0,.13); }
    .cert-zoom-bar { position: sticky; top: 52px; z-index: 60; display: flex; gap: 8px; justify-content: center; align-items: center; padding: 8px; background: rgba(255,255,255,.96); border-bottom: 1px solid #e6ebf2; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
    .cert-zoom-bar button:active { background: #eef2f7 !important; }
    /* SVG 래핑 전(초기 로드 순간) .hpa 가 페이지 폭 넘쳐 가로스크롤 나는 것 방지 */
    .hpa { margin-left: auto !important; margin-right: auto !important; max-width: 100%; }
}

/* ============================================================================
 * 소형 모바일 (≤ 480px) — 더 촘촘하게
 * ========================================================================== */
@media all and (max-width: 480px) {
    #ctWrap, #container, .container { padding-left: 10px !important; padding-right: 10px !important; }
    .h2_title, h2.h2_title { font-size: 16px !important; }
    #container table:not(.hpa table) th, #container table:not(.hpa table) td { font-size: 12px; padding: 6px 4px !important; }
    .home-reg-grid, .home-recent-grid { grid-template-columns: 1fr !important; }
    .biz_menu, .kmm-grid, .mypage-menu { grid-template-columns: repeat(2, 1fr) !important; }
    #container .tablecss td:first-child { width: 38% !important; }
}