/* ============================================================
   굿박스 어드민 — 모바일 덮어쓰기
   ------------------------------------------------------------
   기존 CSS 는 손대지 않는다. _Layout 의 <link> 한 줄만 지우면 원상복구.
   사이드바 접힘(햄버거)은 템플릿이 이미 처리하므로 여기서는
   '폰에서 실제로 불편한 것'만 고친다:
     ① 넓은 표가 화면을 뚫는 것 → 카드 안에서 가로 스크롤
     ② 여백이 너무 커서 한 화면에 보이는 게 없는 것
     ③ 입력칸을 누르면 iOS 가 화면을 확대해 버리는 것
     ④ 버튼이 너무 작아 손가락으로 못 누르는 것
   ============================================================ */

@media (max-width: 767.98px) {

    /* ── ⓪ 검은 테스트 띠를 화면 아래로 ─────────────────────
       띠가 문서 맨 위에 있으면 템플릿의 고정 로고 상자(nav-header)와
       겹쳐 왼쪽 위가 깨져 보인다. 폰에서는 아래에 고정해 겹침을 없앤다. */
    .gb-test-band {
        position: fixed;
        left: 0; right: 0; bottom: 0; top: auto;
        z-index: 99999;
        font-size: 11px !important;
        padding: 5px !important;
        opacity: .95;
    }
    body { padding-bottom: 28px; }   /* 띠가 맨 아래 내용을 가리지 않게 */

    /* 로고 상자는 딱 햄버거 버튼 크기만큼만 (글자 로고는 숨김) */
    .nav-header { width: 5rem !important; }
    .nav-header .brand-logo { display: none !important; }
    .header { padding-left: 5rem !important; }

    /* ── ① 표: 카드 안에서 옆으로 스크롤 ─────────────────
       표를 줄바꿈으로 구겨 넣으면 숫자 표는 오히려 못 읽는다.
       행 모양을 지키고 옆으로 미는 쪽이 관리 화면에는 맞다. */
    .card-body,
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .card-body .table th,
    .card-body .table td {
        white-space: nowrap;
    }

    /* ── ② 여백 줄이기 ──────────────────────────────────── */
    .content-body .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
    .card { margin-bottom: 12px; }
    .card-body { padding: 12px; }
    .card-header { padding: 12px; }
    .page-titles { padding: 8px 12px; margin-bottom: 10px; }

    /* 요약 카드(분석 KPI)의 숫자가 칸을 뚫지 않게 */
    .card-body h5, .card-body h4 { font-size: 15px; word-break: keep-all; }

    /* ── ③ iOS 자동 확대 방지 ───────────────────────────
       입력칸 글자가 16px 미만이면 iOS 사파리가 화면을 확대한다. */
    input.form-control,
    select.form-control,
    textarea.form-control,
    .form-control-sm {
        font-size: 16px !important;
    }

    /* ── ④ 손가락 크기 ──────────────────────────────────── */
    .btn-xs, .btn-xs-xs {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }
    .form-check-input {
        width: 1.15rem;
        height: 1.15rem;
    }

    /* ── 화면 요소별 손질 ────────────────────────────────── */
    /* 검색줄·기간 버튼줄이 한 줄에 안 들어가면 자연스럽게 줄바꿈 */
    .card-header.search-wrap,
    .card-header .d-flex {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* 날짜 입력이 화면 절반을 넘지 않게 */
    input[type="date"], input[type="datetime-local"] {
        max-width: 46vw;
    }

    /* 모달은 화면을 거의 다 쓴다 (상세 이미지 검수 등) */
    .modal-dialog { margin: 8px; }
    .modal-dialog.modal-xl, .modal-dialog.modal-lg { max-width: none; }

    /* 그래프가 세로로 길게 늘어나는 것 방지 */
    canvas { max-height: 260px; }

    /* 표 안의 아주 작은 글씨를 폰에서 읽을 수 있는 크기로 */
    .table { font-size: 13px; }

    /* 문의 상세의 페이백 카드 — 칸들이 세로로 자연스럽게 쌓인다 (부트스트랩 col 이 처리)
       지급 버튼만 눌리기 좋게 키운다 */
    #fp_give { min-height: 40px; }
}

/* 태블릿(768~991px): 표 스크롤만 적용 */
@media (min-width: 768px) and (max-width: 991.98px) {
    .card-body, .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}