/* ─────────────────────────────────────────────────────────────
   스마트폰·태블릿(세로) 대응 레이어.

   기존 화면은 데스크톱 폭(좌측 고정 메뉴 200px + 넓은 표)만 고려해 만들어져
   폰에서는 확대·축소하며 써야 했다. 이 파일은 화면이 좁을 때만 켜지는
   덧칠 레이어라 데스크톱 화면에는 아무 영향이 없다.

   적용 대상은 mobile.js 가 붙이는 클래스로 정한다.
     - body.mo            : 좁은 화면일 때
     - body.nav-open      : 좌측 메뉴(서랍)를 연 상태
     - table.mo-cards     : 표를 카드로 펼칠 대상 (mobile.js 가 지정)
   ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {

    /* ── 전체 골격 ──
       데스크톱은 화면 높이를 꽉 채우고 안쪽만 스크롤하지만,
       폰에서는 주소창 높이가 계속 바뀌므로 문서 전체를 스크롤하게 둔다. */
    html, body { height: auto; overflow-x: hidden; }
    .c_container, .c_wrap { height: auto; min-height: 100%; }
    .c_wrap { display: block; }
    .contents__scroll { height: auto; overflow-y: visible; }

    /* ── 좌측 메뉴를 서랍으로 ──
       평소에는 화면 밖에 두고 상단 버튼으로 밀어 넣는다. */
    .c_nav {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 262px;
        max-width: 84vw;
        background: #fff;
        z-index: 10500;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: 0 0 24px rgba(0, 0, 0, .18);
    }
    body.nav-open .c_nav { transform: none; }

    /* 데스크톱의 '메뉴 접기'(.toggled)는 폰에서 의미가 없어 무시한다 */
    .toggled .c_nav { width: 262px; }
    .toggled .c_nav .logo,
    .toggled .c_nav .logo .logo__title,
    .toggled .c_nav .nav__category,
    .toggled .c_nav .nav__category * { display: revert; }

    .mo-backdrop {
        display: none;
        position: fixed; inset: 0;
        background: rgba(17, 24, 39, .45);
        z-index: 10400;
    }
    body.nav-open .mo-backdrop { display: block; }
    body.nav-open { overflow: hidden; }

    .c_nav .logo { padding: 16px 18px; }
    .c_nav .nav__category .menu > a,
    .c_nav .nav__category .depth-3 a,
    .c_nav .nav__category .depth-2-item span {
        padding-top: 11px;
        padding-bottom: 11px;      /* 손가락으로 눌러도 빗나가지 않게 */
        font-size: 15px;
    }

    /* ── 본문 ── */
    .contents { width: 100%; }
    .contents__inner { padding: 12px 10px 72px; }   /* 아래 여백은 떠 있는 버튼 자리 */
    .contents__title { font-size: 19px; margin-bottom: 10px; padding-left: 0; }
    .contents__title .title_box { flex-wrap: wrap; justify-content: flex-start; gap: 4px; }
    .contents__title .path_box { display: none; }   /* 좁은 화면에서 경로는 접는다 */

    /* ── 상단 사용자 바 ──
       고정(sticky)해 두면 줄바꿈된 두 번째 줄이 제목 위로 겹쳐 올라오므로 그냥 흘려 둔다. */
    .content.user {
        flex-wrap: wrap;
        gap: 6px 8px;
        padding: 8px 10px;
        background: #fff;
        border-bottom: 1px solid #e5e7eb;
        /* 데스크톱은 높이가 46px 로 고정돼 있다. 폰에서는 두 줄이 되므로 풀어 주지 않으면
           두 번째 줄이 상자 밖으로 삐져나와 제목 위에 겹친다. */
        height: auto;
        min-height: 0;
    }
    .content.user .info_wrap { flex-wrap: wrap; gap: 6px; }
    .content.user .user_name { display: none; }     /* 이름은 배지에 이미 있다 */

    /* 메뉴 여닫이 버튼 (데스크톱의 접기 버튼 자리를 그대로 쓴다) */
    .content.user .logo__func .func {
        width: 38px; height: 38px;
        display: flex !important;
        align-items: center; justify-content: center;
        font-size: 18px;
    }
    .content.user .logo__func .unfold { display: none !important; }

    /* 모달 안(iframe)으로 열린 화면은 바깥 화면의 머리·버튼과 겹쳐 두 벌이 된다 */
    body.mo-embed .content.user,
    body.mo-embed #fbFab { display: none !important; }
    body.mo-embed .contents__inner { padding-bottom: 20px; }

    /* ── 검색·버튼 줄 ──
       데스크톱에서는 '건수 + 데이터수 + 검색분류 + 검색어 + 조회 + 엑셀'이 한 줄로 늘어선다.
       폰 폭으로는 700px 가까이 넘쳐 화면 밖으로 나가므로 줄마다 접어 내린다. */
    .content.info,
    .content.search,
    .search_box,
    .btn_box,
    .button-box,
    .table-search {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* 건수 안내는 한 줄을 통째로 쓴다. 폭이 눌리면 글자가 세로로 쪼개진다. */
    .total-info {
        width: 100%;
        white-space: nowrap;
    }

    .search-group {
        width: 100%;
        flex-wrap: wrap;
        gap: 6px;
    }
    /* 검색칸은 한 줄에 하나씩, 버튼은 남는 폭을 나눠 갖는다 */
    .search-group > select,
    .search-group > input,
    .search-group .search-data {
        width: 100% !important;
        min-width: 0;
        flex: 1 1 100%;
    }
    .search-group > button,
    .search-group > .common-btn,
    .search-group > a {
        flex: 1 1 auto;
        min-width: 92px;
    }

    /* 버튼 글자가 세로로 쪼개지지 않게 */
    .common-btn, .modalBtn, button, .btn, .tab { white-space: nowrap; }
    .list-tab { flex-wrap: wrap; gap: 4px; }
    .list-tab .tab { padding: 7px 12px; font-size: 14px; }

    /* 손가락 크기에 맞춘 버튼·입력칸.
       입력 글자를 16px 미만으로 두면 iOS 사파리가 화면을 확대해 버린다. */
    /* select2 안쪽 조각(칩의 × 버튼 등)은 제외한다.
       거기까지 키우면 칩이 세로로 늘어나고 × 표시가 깨진다. */
    .common-btn,
    .modalBtn,
    button:not([class*="select2"]):not(.select2-selection__clear),
    .btn {
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .select2-container button,
    .select2-container .select2-selection__choice__remove,
    .select2-container .select2-selection__clear {
        min-height: 0 !important;
        height: auto;
        padding: 0 4px;
        line-height: 1;
    }
    input[type="text"], input[type="number"], input[type="date"],
    input[type="search"], input[type="password"], select, textarea,
    .data-input, .em-input {
        font-size: 16px;
        min-height: 40px;
    }
    .select2-container { width: 100% !important; }
    /* select2 안쪽 조각(선택 칩·검색칸)까지 40px 로 키우면 칩이 세로로 늘어나 깨져 보인다 */
    .select2-container .select2-search__field,
    .select2-container .select2-selection__choice,
    .select2-container input {
        min-height: 0 !important;
        height: auto;
    }
    .select2-container .select2-selection--multiple,
    .select2-container .select2-selection--single { min-height: 40px; }

    /* ── 표를 카드로 ──
       칸이 열 개가 넘는 표는 가로 스크롤로도 읽기 어려워, 한 건을 한 장으로 펼친다.
       칸 이름은 mobile.js 가 각 칸에 data-label 로 넣어 준다. */
    table.mo-cards { display: block; width: 100%; border: none; }
    table.mo-cards thead { display: none; }
    table.mo-cards tbody { display: block; }
    table.mo-cards colgroup { display: none; }
    table.mo-cards tr {
        display: block;
        margin-bottom: 10px;
        padding: 6px 12px;
        border: 1px solid #e5e7eb;
        border-radius: 9px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
    }
    table.mo-cards td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: auto !important;
        border: none !important;
        border-bottom: 1px solid #f3f4f6 !important;
        padding: 9px 0;
        text-align: right;
        font-size: 14px;
        white-space: normal;
        word-break: break-word;
    }
    table.mo-cards tr td:last-child { border-bottom: none !important; }
    /* 칸이 flex 라 안에 든 버튼·뱃지가 눌려 글자가 삐져나온다. 제 크기를 지키게 한다. */
    table.mo-cards td .common-btn,
    table.mo-cards td button,
    table.mo-cards td .btn,
    table.mo-cards td .badge,
    table.mo-cards td .sent-badge,
    table.mo-cards td input,
    table.mo-cards td select {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }
    /* 카드 안 버튼까지 40px 로 키우면 '도면관리' 처럼 짧은 버튼이 정사각형이 돼 어색하다.
       좌우 여백을 늘려 납작한 원래 모양을 지킨다. */
    table.mo-cards td .common-btn,
    table.mo-cards td button,
    table.mo-cards td .btn {
        padding: 6px 14px !important;
        min-height: 32px;
        line-height: 1.2;
    }
    table.mo-cards td:before {
        content: attr(data-label);
        flex: 0 0 38%;
        text-align: left;
        color: #6b7280;
        font-weight: 600;
        font-size: 13px;
    }
    /* 값이 없는 칸은 자리만 차지하므로 감춘다 */
    table.mo-cards td.mo-empty { display: none; }
    /* 이름표가 필요 없는 칸(체크박스 등)은 값만 왼쪽에 */
    table.mo-cards td.mo-nolabel { justify-content: flex-start; text-align: left; }
    table.mo-cards td.mo-nolabel:before { content: none; }
    /* '조회된 데이터가 없습니다' 같은 안내 줄 */
    table.mo-cards td.no-data { justify-content: center; text-align: center; }
    table.mo-cards td.no-data:before { content: none; }

    /* 카드로 펼치지 않은 표는 제 폭을 지키고 가로로 밀어 본다.
       폭을 화면에 맞춰 눌러 버리면 날짜·시간 같은 값이 서로 겹쳐 읽을 수 없다. */
    .mo-scroll-x {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .mo-scroll-x > table { min-width: max-content; }

    /* ── 모달 ── */
    .common-modal .common-modal__inner,
    .edit-modal .common-modal__inner {
        width: 94vw !important;
        max-width: 94vw !important;
        max-height: 88vh;
        overflow-y: auto;
    }
    .data-form { flex-wrap: wrap; }
    .data-form .form-group { width: 100% !important; }

    /* ── 페이지 번호 ── */
    .pagination { flex-wrap: wrap; gap: 8px; }
    .pagination .page { flex-wrap: wrap; }
    .pagination .page li { min-width: 34px; min-height: 34px; }

    /* 수정요청 떠 있는 버튼이 하단 버튼을 가리지 않게 */
    #fbFab { bottom: 14px; right: 14px; width: 46px; height: 46px; }
}

/* 아주 좁은 화면(구형 폰)에서는 이름표를 위로 올려 값 공간을 넓힌다 */
@media (max-width: 420px) {
    table.mo-cards td {
        display: block;
        text-align: left;
        padding: 7px 0;
    }
    table.mo-cards td:before {
        display: block;
        margin-bottom: 2px;
    }
}