/**
 * responsive.css — 반응형 단일 출처.
 *
 * ⚠️ 규칙: 이 앱의 모든 @media 반응형 CSS는 이 파일에만 작성한다.
 *          페이지 CSS(pages/**\/*.css)에 새 @media 금지. 기존 @media는 해당 메뉴 작업 시 이 파일로 이관.
 * 로드   : layouts.php / layouts-empty.php 에서 페이지 CSS 뒤(맨끝) → 미디어쿼리 오버라이드가 이김.
 * BP     : ≤992(lg↓=폰+태블릿) = 메인 모바일 레이아웃 + ≤576(sm↓=작은폰) 미세조정. 데스크톱(≥993) 무손상.
 *          ※ 대표님 지시: 태블릿도 폰과 동일 → 폰 레이아웃을 ≤992 로 적용(768 티어 미사용).
 *          ※ 상세뷰 카드간격만 ≤1200. (한때 전체 ≤1200 단일화했으나 1000~1200 성겨서 철회한 이력.)
 * 스타일 : 하드코딩 색·폰트 금지 → common.css :root 토큰. BS 유틸 클래스 금지(시맨틱 클래스).
 *
 *   [G] 전역 공유 레이아웃 / [P] 페이지별.
 * ================================================================= */


/* ================================================================
 * [G] 전역 공유 레이아웃
 * ============================================================== */

/* ── 태블릿 이하 (≤992px) ─────────────────────────────────────── */
@media (max-width: 992px) {
    /* 페이지 헤더: 고정 높이 완화, 좌우 여백 축소 */
    /* 데스크톱은 min-height 80px 로 여백을 확보하지만, 폰에선 그만큼이 빈 공간이 된다
       (타이틀 한 줄 = 20px). 내용 높이에 맞게 줄인다. */
    .page-header {
        min-height: 0;
        padding: 16px;
    }

    /* 툴바: 좌우 여백 축소 (스택은 폰 구간에서) */
    .page-toolbar {
        padding-left: 16px;
        padding-right: 16px;
    }

    .modal .modal-dialog {
        margin: 10px auto;
    }
}

/* ── 폰 + 태블릿 (≤992px) — 대표님 지시: 태블릿도 폰과 동일 레이아웃 ─────────── */
@media (max-width: 992px) {

    /* 페이지 헤더: 타이틀 + 액션버튼(BACK/NEW…)을 세로 스택 (상세 페이지 상단 짓눌림 해결) */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    /* 버튼 전역 컴팩트 (데스크톱 40px 유지, 폰 35px). .btn.btn-sm 은 2클래스라 자기크기 유지. */
    .btn {
        height: 35px;
        padding: 0 10px;
    }

    .form-control,
    .page-toolbar-search .form-control {
        height: 35px;
    }

    /* 통합 툴바 — 세로 스택 */
    .page-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
        position: static;   /* 세로로 길어진 툴바가 뷰포트 덮지 않게 sticky 해제 */
    }
    .page-toolbar-sep {
        display: none;
    }

    /* 스탯: 3등분 한 줄 카드 */
    .page-toolbar-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        width: 100%;
    }
    .page-toolbar-divider {
        display: none;
    }
    .page-toolbar-stat,
    .page-toolbar-stat:first-child {
        /* 992 이하는 전 화면 왼쪽 정렬(개발자 지시 2026-08-20). 예전엔 여기만 center 라
           577~992 구간만 가운데, 576 이하는 start 로 갈렸다. 이제 두 구간이 이어진다. */
        justify-content: start;
        gap: 10px;
        padding: 10px 5px;
        background: var(--bs-bg-secondary);
        border: 1px solid var(--bs-border-secondary);
        border-radius: var(--bs-radius-sm);
    }
    .page-toolbar-stat-icon {
        width: 30px;
        height: 30px;
    }

    /* Leads 는 스탯이 4개다(TOTAL·OPEN·CONVERTED·NO FOLLOW UP) → 3열이면 마지막 칩만 혼자 내려온다.
       2×2 로 떨어지게 이 페이지만 2열로 덮는다. 위 `repeat(3, 1fr)` 은 스탯 3개인 나머지 화면의 기본값이라
       건드리지 않는다. */
    .crs-leads-page .page-toolbar-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 필터: 2열 그리드. flex + `flex:1 1 calc(50% - 5px)` 이던 것을 grid 로 교체 —
       검색칸만 `flex:1 1 auto` 라 폭이 내용에 따라 들쭉날쭉해 칸이 균등하지 않았다(개발자 지적). */
    .page-toolbar-filters {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: end;
        width: 100%;
        gap: 10px;
    }
    .page-toolbar-filter {
        width: auto !important;         /* index 인라인 width(100px/160px) 무력화 */
        min-width: 0;
    }

    /* SEARCH 버튼 숨김 — 폰에선 Enter 키가 같은 동작(ajax.reload)을 하므로 중복 트리거다.
       숨기면 검색 인풋이 칸 전체를 쓴다. 컨테이너째 숨겨야 빈 grid 칸이 안 생긴다.
       ⚠️`.page-toolbar-filter-actions` 를 통째로 숨기면 안 된다 — 28개 중 2개(Crew/Trip Calendar)는
         `cc_filter_reset_all`·`tc_filter_reset_all` = **필터 초기화** 버튼이라 Enter 로 대체 불가.
       ⚠️스코프 필수 — `op_assign_plane_search_btn`(Operator 모달 기체검색)은 툴바 밖이라 유지돼야 한다.
       접미사 매칭이라 `search_btn`·`fext_search_btn`·`fsl_search_btn` 26개가 모두 잡힌다. */
    .page-toolbar-filter-actions:has([id$="search_btn"]) {
        display: none;
    }
    .page-toolbar-filter-actions {
        min-width: 0;
    }
    .page-toolbar-filter-actions .btn {
        justify-content: center;
        width: 100%;
    }

    /* ── 모달 헤더: 데스크톱 값(20px 패딩·16px 타이틀·0.1em 자간) 그대로라 폰에서 과함.
       390px 기준 헤더 높이 107px(뷰포트 1/4)+타이틀 2줄이던 것을 압축한다 → 70px·1줄.
       ⭐범인은 폰트가 아니라 **자간**이었다: 대문자 25자 타이틀에 0.1em 이면 폭을 ~40px 먹는다.
       자간만 0 으로 두면 14px 를 유지하면서 한 줄에 들어간다(12px 로 줄일 필요 없음). */
    .modal-header {
        padding: 15px;
        gap: 10px;
    }
    .modal-title {
        font-size: var(--font-large);
        letter-spacing: 0;
    }

    /* ── 사이드탭 모달(.modal-side-layout): 좌측 세로탭 → 상단 가로탭 스택 ──────
       (modal.css 의 구 @media 640px 에서 이관 + 버그 수정. bp 는 앱 정책대로 992.)
       공유 컴포넌트 — operator/crew/fbo/ground-handler/bill/quote/trip/user-group/expense 등 전부.
       ⚠️구 블록이 안 먹던 이유 2가지:
         ① 마크업에 BS 유틸 `flex-column`(=flex-direction:column !important)이 붙어 있어
            row 로 못 바꿨음 → !important 로 덮는다.
         ② `.modal-side-nav .nav-item{width:100%}` 는 그대로라 각 탭이 100% 폭 → 세로로 쌓임
            (nav-link 만 width:auto 로 바꿔서 소용없었음) → nav-item 을 직접 손본다.
       탭 개수가 2~9개로 편차가 커서(user-group 2 ~ trip 9) `flex:1 0 auto`:
         적으면 늘어나 한 줄을 꽉 채우고, 많으면 내용폭 유지 → nowrap+overflow-x 로 가로 스크롤. */
    .modal-side-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
    }
    /* 스타일 = 세그먼트 컨트롤(개발자 선택 B안). Crew Dashboard `.cd-seg` 와 동일 언어:
       회색 트랙 + 활성만 흰 알약. nav 자체를 트랙으로 쓴다(margin 으로 띄우고 배경/라운드 부여).
       탭이 많으면 알약이 내용폭을 유지한 채 트랙이 가로 스크롤(nowrap + overflow-x). */
    .modal-side-layout > .modal-side-nav,
    .modal-side-layout > .modal-side-nav.nav-tabs {
        grid-column: 1;
        grid-row: 1;
        max-width: none;
        flex-direction: row !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: none;
        border-bottom: 0;
        margin: 10px;
        padding: 6px 6px 7px 6px;
        gap: 3px;
        background: var(--bs-bg-secondary);
        border-radius: var(--bs-radius-sm);
    }
    /* min-width = "한 화면에 최대 3개" 바닥값(개발자 지시). 짧은 탭도 이 아래로 안 내려가서
       4개부터 트랙이 가로 스크롤된다. flex-basis 가 아니라 min-width 인 이유:
       "GROUND HANDLER" 처럼 이보다 긴 라벨은 자기 내용폭을 그대로 유지해야 잘리지 않는다.
       33% 가 아니라 calc 인 이유: 33%×3=99% 에 gap(3px×2)+ 가 더해져 3개일 때도 3px 밀렸다.
       gap 2개분(6px)을 3등분해 빼면 3개까지 정확히 한 화면에 들어간다. */
    .modal-side-nav .nav-item {
        width: auto;
        flex: 1 0 auto;
        min-width: calc(33.333% - 4px);
    }
    /* 색 !important: 세그먼트 스타일(활성 = 흰 알약 + primary-dark)이 base(활성 = primary 글자색)와
       값이 달라 확실히 덮으려는 것. base 는 정상이다.
       ⚠️정정(2026-07-21 실측): 한때 "base 탭 글자색이 활성상태가 아니라 위치로 걸린다"고 적어뒀으나
       버그가 아니었다. modal.css 의 `transition: color .15s` 가 백그라운드 탭에서 currentTime 0 으로
       얼어붙고, 멈춘 transition 은 author !important 보다 우선이라 getComputedStyle 이 클릭 이전 값을
       돌려준 것뿐. 탭을 보이게 하거나 getAnimations().finish() 후 재면 정상(비활성 muted/활성 primary). */
    .modal-side-nav .nav-link {
        width: 100%;
        padding: 10px;
        text-align: center;
        white-space: nowrap;
        border: 0 !important;
        border-radius: var(--bs-radius-sm);
        font-size: var(--font-small);
        font-weight: 700;
        color: var(--bs-muted) !important;
        background: transparent !important;
    }
    .modal-side-nav .nav-link.active,
    .modal-side-nav .nav-item.show .nav-link {
        background: var(--bs-card) !important;
        color: var(--bs-primary-dark) !important;
    }
    .modal-side-layout > .modal-side-content {
        grid-column: 1;
        grid-row: 2;
        padding: 20px;
    }

    /* [G] 사진 슬롯(.photo-slots): 4열 그리드는 모바일 폭에서 칸이 너무 좁아진다 → 2열.
       (4칸을 1열로 쌓으면 DOCUMENTS 탭이 지나치게 길어져 2열로 절충. 아주 작은 폰만 1열.) */
    .photo-slots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 모달: 중앙정렬 + 좌우 여백 동시 확보 + 본문 스크롤.
       좌우 auto=중앙, width:calc(100%-20)=꽉 차도 좌우 10px gap(각 모달 max-width 가 상한). */
    .modal-dialog {
        margin: 10px auto;
        width: calc(100% - 20px);
    }
    .modal-body {
        max-height: calc(100vh - 180px);
        overflow-y: auto;
    }

    .select2-container .select2-selection--single {
        height: 35px;
        padding: 8px 16px !important;
    }
}

/* ── 작은 폰 (≤576px) ─────────────────────────────────────────── */
@media (max-width: 576px) {

    /* ⭐폰트 토큰 스케일 자체를 1px 낮춘다(개발자 지시, ≤576 한정).
       common.css :root 를 덮어쓰는 방식 — responsive.css 가 뒤에 로드되므로 이김.
       토큰 사용처가 ~290곳이라 앱 전체 타이포가 한 번에 내려간다.
       --font-extra-small(8px)만 제외: 더 줄이면 판독 불가.
       ⚠️높이·여백은 px 라 같이 안 줄어들고, 하드코딩 폰트 3곳(17/18/22)도 영향 없음.
       ⚠️태블릿(577~992)은 기존 스케일 유지 — 폰에서만 작아진다. */
    /*
    :root {
        --font-small: 9px;
        --font-normal: 11px;
        --font-large: 13px;
        --font-extra-large: 15px;
        --font-display: 17px;
    }
    */

    /* 헤더·툴바 좌우 여백 제거(개발자 지시). 좁은 폰에선 바깥 컨테이너 여백만으로 충분하고,
       16px 를 더 주면 내용 폭이 그만큼 깎인다. 상하 10px 만 유지. */
    .page-header,
    .page-toolbar {
        padding: 10px 0;
    }

    /* 스탯 카드: 좁은 폰에서 여백·아이콘 축소 (3열 유지).
       정렬은 위 992 블록에서 이미 start 라 여기 다시 안 쓴다(중복 제거). */
    .page-toolbar-stat,
    .page-toolbar-stat:first-child {
        padding: 5px 5px;
        gap: 5px;
    }
    .page-toolbar-stat-icon {
        width: 26px;
        height: 26px;
    }
    .page-toolbar-stat-val {
        font-size: var(--font-normal);
    }

    /* 문서 미리보기 패널: 기본 width 30% + min-width 420px 라 390px 화면을 넘는다 → 풀폭.
       min-width 를 0 으로 풀지 않으면 420px 가 그대로 남아 화면 밖으로 나간다. */
    #documentPreviewPanel.document-preview-panel {
        width: 100%;
        min-width: 0;
    }

    /* [G] 사진 슬롯: 아주 좁은 폰에서는 2열도 칸이 뭉개진다 → 1열 스택. */
    .photo-slots {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 읽기전용 행 라벨: 기본 min-width 150px 는 좁은 폰에서 값 영역을 너무 잡아먹는다 → 100px */
    .modal-row-label {
        min-width: 100px;
    }

    /* 모달: 좁은 폰에서도 좌우 여백 유지 (margin:0 금지 — 대표님 피드백) */
    .modal-dialog {
        margin: 10px;
    }
    .modal-body {
        max-height: calc(100vh - 150px);
    }
}

/* ── 상세뷰(dv-*) 공용: 컬럼(col-xl-*)이 세로로 쌓일 때(≤1200) 카드 간격 ─── */
/* customer / vendor(bill) 상세 공유. 쌓인 카드가 서로 붙던 문제 해결. */
@media (max-width: 1200px) {
    .dv-customer-card,
    .dv-summary-tabs {
        margin-bottom: 15px;
    }
}
/* Customer View: 오른쪽 묶음(견적/문서/노트)은 <1400 에서 세로 스택 → 견적↔문서 간격을
   문서↔노트(view.css .cv-notes-card margin-top:25px)와 25px 통일. (공유규칙보다 ID로 우선) */
@media (max-width: 1399px) {
    #cm_customer_view .dv-summary-tabs {
        margin-bottom: 25px;
    }
}

/* ── 상세뷰 내부 데이터테이블(견적/트립/인보이스 패널): 테이블만 가로 스크롤 (≤992) ─── */
/* DataTables 2.x: 래퍼=.dt-container. dom 프리셋 <""<""tr>><"d-flex…"<i><p>> →
     .dt-container > div:first-child = 테이블 래퍼, > div:nth-child(2) = info/paginate flex행. */
@media (max-width: 992px) {
    .dv-sc-list .dt-container > div:first-child {
        overflow-x: auto;
    }
    /* 기본(autoWidth 패널): 520px 플로어 */
    .dv-sc-list table.datatable,
    .dv-sc-list table.dataTable {
        min-width: 520px;
    }
    /* 명시 컬럼폭 패널(autoWidth:false, .dv-sc-list--fixedcols) opt-in */
    .dv-sc-list--fixedcols table.datatable,
    .dv-sc-list--fixedcols table.dataTable {
        min-width: max-content;
        width: auto !important;
    }
}

/* ── 데이터테이블 공통(전체): info/pagination 세로 2줄 스택 + 중앙 (≤992, 태블릿 포함) ─── */
/* Showing 한 줄 / Pagination 한 줄. 컨트롤 행이 BS 유틸 .justify-content-between(=!important)이라
   !important 로 덮음. 스크롤 밖(둘째 div)이라 가로 스크롤 시에도 이동 안 함. */
@media (max-width: 992px) {
    .dt-container > .d-flex.justify-content-between {
        flex-direction: column;
        align-items: center;
        justify-content: center !important;
    }
    /* info/pagination 좌우 패딩 제거 (dom 프리셋 info=.ps-3 / paging=.pe-3). 직계자식만 스코프. */
    .dt-container > .d-flex > .ps-3 {
        padding-left: 0 !important;
    }
    .dt-container > .d-flex > .pe-3 {
        padding-right: 0 !important;
    }

    /* 페이지네이션 가로 압축 — 버튼 개수는 그대로, 폭/여백만 줄인다.
       페이지네이션이 .table-responsive(가용 366px) 안에 있어서, 기본 크기로는 422~431px 가 되어
       컨테이너 scrollWidth 를 부풀림 → 표가 아니라 컨트롤 영역이 좌우로 끌리는 증상이 났다.
       (페이지 번호 개수를 줄이는 방식은 데스크톱까지 영향이 가서 폐기 — 여긴 순수 CSS·모바일 한정.)
       개발자 지정값(최종): 26x26 정사각 + 폰트 축소(--font-small) + 굵기 600(작아진 만큼 가독 보강).
       ⚠️기본값이 datatable.custom.css 에서 !important 로 박혀 있어(min-width:32/height:32/
       padding:0 8px) 같은 선택자 특이도 + !important 로 맞춰야 이긴다(responsive.css 가 뒤에 로드됨). */
    .dt-container:has(table.datatable) .dt-paging nav button.dt-paging-button {
        min-width: 26px !important;
        height: 26px !important;
        padding: 0 !important;
        font-size: var(--font-small) !important;
        margin-left: 0 !important;
        font-weight: 600 !important;
    }
    .dt-paging .ellipsis {
        padding: 0;
    }

    /* 리스트 페이지: .table-responsive 전체 스크롤 대신 표 래퍼만 스크롤(컨트롤 고정) */
    .table-responsive .dt-container > div:first-child {
        overflow-x: auto;
    }
}

/* ── form-section-header(공유): 모바일에서 우측 다중 버튼그룹을 타이틀 아래 풀폭으로 ──
   permission/crew-expense/crew-mgmt 헤더처럼 버튼 여러개(.ms-auto.d-flex)가 타이틀 옆에 껴서
   눌리던 것 → 아래로 내림. 단일 EDIT 버튼(.btn.ms-auto)은 작아서 인라인 유지. */
@media (max-width: 992px) {
    .form-section-header {
        flex-wrap: wrap;
        row-gap: 10px;
    }
    .form-section-header > .ms-auto.d-flex {
        width: 100%;
        margin-left: 0;
    }
}

/* ── 노트 모달 헤더(공용 note-modal 파셜: customer/vendor/company/quote 등 공유) ──
   좌: "NOTES (EDITABLE FOR 1 DAY)" / 우: 검색창 280px 가 space-between 으로 붙어 있어
   모바일에서 둘 다 눌림. → 검색창을 다음 줄 풀폭으로 내리고(인라인 max-width override),
   힌트는 줄바꿈 대신 폰트만 줄여 타이틀과 한 줄 유지(개발자 결정). */
@media (max-width: 992px) {
    #notesModal .datatable-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    #notesModal .datatable-header .page-toolbar-search {
        max-width: none !important;
    }
    #notesModal .dt-title-hint {
        font-size: var(--font-small);
    }
}


/* ── 헤더 현재시각 2종(.header-clocks: 표시 타임존 / UTC) ──────────────────
   헤더는 한 줄에 로고 + 시계 2개 + 알림/프로필이 모두 들어가는 좁은 가로 예산이라
   폭이 줄면 순서대로 덜어낸다.
   ≤1200: 날짜 줄을 감춰 폭을 줄임(시각 + 타임존은 유지 — 어느 쪽이 UTC 인지 알아야 한다).
          가운뎃점은 CSS ::before 라 날짜를 감추면 같이 꺼야 앞에 · 만 남지 않는다.
   ≤992 : 통째로 숨김. 로고 + 사이드바 토글 + 프로필만으로도 꽉 찬다. */
@media (max-width: 1200px) {
    .header-clocks {
        --hdr-clock-w: 118px;
        gap: 12px;
        margin-left: 16px;
    }
    .header-clock + .header-clock {
        padding-left: 12px;
    }
    .header-clock-date {
        display: none;
    }
    .header-clock-zone::before {
        content: none;
        margin: 0;
    }
}

@media (max-width: 992px) {
    .header-clocks {
        display: none;
    }
}


/* ================================================================
 * [P] 페이지별 — 대메뉴 작업 시 각 페이지 전용 @media 를 스코프해서 이관
 * ============================================================== */

/* ── Quote View 모달(#quoteViewModal) ─────────────────────────────
   view-modal.css 의 흩어진 @media 5종(640·720·900·992·1100)에서 이관·통합 — 2026-07-20.
   ⚠️**ID 선택자를 그대로 유지해야 한다.** 이 모달의 데스크톱 규칙이
     `#quoteViewModal #quoteViewMode.modal-side-layout`(특이도 2,1,0)이라,
     공용 `.modal-side-layout`(0,1,0)은 파일을 뒤로 옮겨도 **절대 못 이긴다**(특이도 > 순서).
     실제로 그 탓에 사이드탭이 스택되지 않고 nav·콘텐츠가 좁은 2fr 열에 겹쳐 눌렸었다. */
@media (max-width: 992px) {
    /* 사이드탭 상단 스택 — 공용 규칙이 못 이기므로 같은 특이도로 다시 선언 */
    #quoteViewModal #quoteViewMode.modal-side-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(0, 1fr);
    }
    /* ⭐PAYMENT DETAILS 가 콘텐츠 폭(326px)을 넘어 460px 로 삐져나가던 것.
       범인은 결제이력 **DataTable**. `.table-responsive` 는 정상인데 그 부모 `.qv-card--full` 이
       **grid 아이템이면서 min-width:auto** 라, 표가 요구하는 456px 만큼 칸이 벌어진다.
       → 칸이 벌어지니 .table-responsive 가 그 폭을 다 받아 스크롤할 이유가 없어지고(무력화),
         카드·행까지 전부 밀려나갔다. grid/flex 아이템이 줄어들 수 있게 풀어주는 게 핵심.
       (참고: stat-card 자체의 최소 폭은 87px 뿐이라 2열은 원래 충분히 들어간다.) */
    #quoteViewModal .qv-card,
    #quoteViewModal .qv-card--full {
        min-width: 0;
    }
    #quoteViewModal #qvTabFinance .row > [class*="col"],
    #quoteViewModal .stat-card {
        min-width: 0;
    }
    /* `.row` 거터 음수마진(g-2=-4px, g-4=-12px)이 내용을 페인 밖으로 밀어낸다.
       모달 안에서는 바깥 여백을 이미 modal-side-content 가 갖고 있어 음수마진이 불필요.
       탭 전체에 적용 — PAYMENT(g-2)·GROUND HANDLERS(g-4) 등에서 동일 증상 확인. */
    #quoteViewModal .modal-side-content .row {
        margin-left: 0;
        margin-right: 0;
    }
    #quoteViewModal .stat-card strong,
    #quoteViewModal .stat-card span {
        min-width: 0;
        overflow-wrap: anywhere;
    }


    /* ADD/EDIT PAYMENT 모달: 좌(QUOTE PRICE 프리뷰) | 우(입력폼) 5:5 그리드라
       폰에서 각 칸이 192px 로 줄고, 그 안에서 라벨 100px 을 빼면 금액 입력칸이 **40px** 만 남아
       오른쪽 정렬된 금액이 아예 안 보였다(실측). → 세로로 쌓아 폭을 확보한다.
       라벨 min-width 100px 도 이 좁은 프리뷰에선 과해서 여기서만 푼다. */
    #quotePaymentModal .qpay-modal-body {
        grid-template-columns: 1fr;
        row-gap: 15px;
    }
    #quotePaymentModal .modal-row-label {
        min-width: 0;
        flex: 0 0 auto;
    }
    #quotePaymentModal .qpay-preview .modal-row input {
        min-width: 0;
    }

    /* ITINERARY 표 가로 스크롤 — view-modal.css 가 모서리 라운드(radius 10px) 처리를 위해
       `.qv-itinerary-table-wrap{overflow:hidden}` 을 걸어둬서, 좁은 폭에서 표(886px)가 넘쳐도
       **잘리기만 하고 스크롤바가 안 생겼다**(.table-responsive 가 무력화). 가로만 auto 로 되돌린다. */
    #quoteViewModal .qv-itinerary-table-wrap {
        overflow-x: auto;
    }

    /* 카드 그리드 2열 → 1열 */
    #quoteViewModal .qv-card-grid {
        grid-template-columns: 1fr;
    }
    #quoteViewModal .qv-card--full {
        grid-column: auto;
    }
    /* ⚠️견적서(.acs-*) 규칙은 여기 두면 안 된다 — view-modal.css 에 남겨야 한다.
       PDF 내보내기가 **view-modal.css 텍스트만** iframe 에 주입하고(responsive.css 는 주입 안 함),
       그 iframe 은 210mm=794px 라 992 구간에 걸린다. 여기로 옮겼더니 PDF 에서 견적서 레이아웃이
       통째로 빠져 깨졌다. 자세한 사유는 view-modal.css 하단 주석 참조. */
}

/* ── Trip View 모달 표: 압축 대신 가로 스크롤 ──────────────────────
   모달 본문 가용폭이 370px 뿐이라 표가 칸수대로 짜부라졌다(PASSENGERS 8칸 → 칸당 17~51px).
   [G] 리스트 정책과 동일하게 **표에 min-width 바닥을 주고 .table-responsive 가 스크롤**하게 한다.
   PASSENGERS 는 `table-layout:fixed`(trip-view-modal.css)가 폭을 강제 배분하므로 auto 로 되돌린다.
   ※ PERMITS 표는 이미 `.tvm-gh-receipt-sheet{overflow-x:auto}` + `table{min-width:680px}` 로
     같은 패턴이 걸려 있어 여기서 손대지 않는다. */
@media (max-width: 992px) {
    .trip-view-modal .table-responsive {
        overflow-x: auto;
    }
    /* colgroup 으로 컬럼폭을 명시한 표 = 그 합만큼 폭을 확보하고 래퍼가 스크롤.
       max-content 라 표마다 숫자를 하드코딩할 필요가 없다(PASSENGERS 930·CREW TRAVEL 750·
       CREW REPORTS 450px 가 각자 알아서 잡힌다). */
    .table-layout-fixed {
        min-width: max-content;
        width: auto;
    }

    /* ── Bill/Pax 상세 드로어: 폭 확장 → 오른쪽에서 슬라이드하는 전체폭 오버레이 ──
       기본 동작은 루트의 width 를 0→360px 로 벌려 안쪽 aside(360px 고정)를 드러내는 방식이고,
       데스크톱은 동시에 modal-dialog 를 1300→1660px 로 넓혀 그 자리를 만든다.
       모바일은 넓힐 공간이 없어 본문과 드로어가 370px 를 나눠 가지며 둘 다 짜부라졌다.
       ⚠️1차 시도(=position:absolute; inset:0 만 덮어쓰기)는 실패했다 —
         폭 전환(transition)이 기준을 잃어 "왼쪽에서 열리고 오른쪽으로 닫히는" 엉뚱한 동작이 됐다.
         **여는 방식 자체를 transform 슬라이드로 다시 정의**해야 한다.
       부모 .tv-modal-body-row 는 overflow:hidden 이라 화면 밖 드로어를 잘라준다(별도 처리 불필요).
       pointer-events(none/auto)는 base 규칙 그대로 상속받는다. */
    .trip-view-modal .tv-modal-body-row {
        position: relative;
    }
    .trip-view-modal .tv-bill-drawer-root,
    .trip-view-modal .tv-pax-drawer-root {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: auto;
        flex: none;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        border-left-width: 0;
        z-index: 5;
        transform: translateX(100%);          /* 닫힘 = 오른쪽 화면 밖 */
        transition: transform 0.22s ease;
    }
    .trip-view-modal .tv-bill-drawer-root.is-open,
    .trip-view-modal .tv-pax-drawer-root.is-open {
        flex: none;
        width: 100%;
        max-width: 100%;
        transform: translateX(0);             /* 열림 = 제자리로 슬라이드 */
    }
    .trip-view-modal .tv-bill-drawer,
    .trip-view-modal .tv-pax-drawer {
        width: 100%;
        max-width: none;
    }

    /* Billing summary 검색 필터: col-md-* 라 md 미만에선 col-12 로 풀려 5줄이 된다.
       → 툴바 필터([G] .page-toolbar-filter)와 같이 한 줄에 2개씩. .row 거터(g-2)는 그대로 유지. */
    #tvm-bill-filters > [class*="col-"] {
        width: 50%;
    }

    /* 모달 내부 툴바(QTY OF PAX 등): trip-view-modal.css 의 구 @media 640px 가 세로 스택으로
       만들어 "라벨+뱃지 / 입력+APPLY" 2줄이 됐다(이관하며 규칙 삭제).
       → 한 줄 유지. 좁은 폭은 왼쪽 라벨 그룹이 줄어들며 흡수하고, 입력칸도 96→70px 로 줄인다. */
    .trip-view-modal .modal-side-toolbar {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 10px;
    }
    .trip-view-modal .modal-side-toolbar > .d-flex:first-child {
        min-width: 0;
    }
    .trip-view-modal #tvm_pax_qty_input {
        width: 70px;
    }
    /* 마크업의 BS 유틸(px-3=좌우 16px, my-2=상하 8px)이 좁은 폭에서 내용 공간을 깎는다.
       BS 유틸은 !important 라 같은 강도로 눌러야 한다. */
    .trip-view-modal #tv-pax-qty-toolbar {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ── Flight Time Calculator 폼: 세로 스택 → 3행 그리드 ──────────────
   #ftc-form 이 .page-toolbar 라서 [G] 규칙으로 세로 스택되어 8개가 8줄을 먹었다.
   개발자 지시 배치: ①DEPARTURE + 스왑버튼 + ARRIVAL ②AIRCRAFT + WINDS ③FLIGHT DATE + DEP TIME.
   .page-toolbar-filter 는 [G] 에서 이미 `flex:1 1 calc(50% - 5px)` + `width:auto !important`
   (인라인 width 170/160/150/120px 무력화)를 받으므로 ②③은 자동으로 2열이 된다.
   ①만 스왑버튼(약 40px)이 끼어 50%+50%+40 > 100% 로 넘치므로 ICAO 쪽 basis 를 줄여 맞춘다. */
@media (max-width: 992px) {
    #ftc-form {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 10px;
    }
    #ftc-form .flight-calc-icao {
        flex: 1 1 calc(50% - 35px);
    }
    #ftc-form .flight-calc-swap {
        flex: 0 0 auto;
    }
    #ftc-form .flight-calc-calc-btn {
        flex: 1 1 100%;
    }

    /* 자동완성 드롭다운이 화면 밖으로 나가던 것 —
       index.css 가 데스크톱용으로 `right:auto; min-width:340px` 를 줘서(입력칸보다 넓게)
       ARRIVAL(left 225px)에서 225+340=565px 가 되어 390px 화면을 넘었다.
       입력칸 폭(153px)으로 가두면 안 넘치지만 너무 좁다 →
       **폭은 넓게 유지하고 각자 자기 쪽 가장자리에 앵커**: DEPARTURE 는 왼쪽 기준으로 오른쪽으로,
       ARRIVAL 은 오른쪽 기준으로 왼쪽으로 펼친다. 어느 쪽도 화면을 벗어나지 않는다. */
    #ftc-form .flight-calc-icao .page-toolbar-suggest {
        min-width: 340px;
        max-width: calc(100vw - 24px);
        width: auto;
    }
    #ftc-form #origin_icao_suggest {
        left: 0;
        right: auto;
    }
    #ftc-form #destination_icao_suggest {
        left: auto;
        right: 0;
    }
    #ftc-form .page-toolbar-suggest-item {
        padding: 10px;
        white-space: normal;
        word-break: break-word;
    }
}

/* ── 승객 검색 모달(shared/passengers/pax-search-modal) 검색 행 → 1열 ──
   구 인라인 @media 600px 에서 이관(2026-07-20), 앱 티어 992 로 통일.
   ⚠️구 인라인 선택자는 `#<?=$modalId?> .<?=$prefix?>-search-row` 처럼 **PHP 변수**라
     호출부마다 다르다(quote: qps·qpa / trip: tps·tpa, 4종). 정적 CSS 에선 재현 불가.
     → 모달 루트에 이미 붙어있는 **공용 클래스 `.pax-search-modal`** 로 스코프하고,
       행은 클래스 접미사로 잡는다(마크업상 `class="<?=$prefix?>-search-row"` 단독 클래스라 성립).
       id 접미사 매칭보다 견고하다 — 나중에 id 를 바꿔도 안 깨진다. */
@media (max-width: 992px) {
    .pax-search-modal [class$="-search-row"] {
        grid-template-columns: 1fr;
    }
}

/* ── Crew Expense 승인 타임라인: 가로 흐름 → 세로 스택(화살표 90° 회전) ──
   구 인라인 @media 640px 에서 이관(2026-07-20), 앱 티어 992 로 통일. */
@media (max-width: 992px) {
    .ce-timeline {
        flex-direction: column;
        align-items: stretch;
    }
    .ce-tl-arrow {
        justify-content: center;
        transform: rotate(90deg);
    }
}

/* ── Customer 생성 페이지 (create.css 에서 이관) ─────────────────── */
@media (max-width: 992px) {
    .customer-create-grid {
        grid-template-columns: 1fr;   /* 2열 → 1열 */
    }
    .customer-create-section--wide {
        grid-column: 1;
    }
}

/* ── Crews Corner 폼(cr-form-grid): 2단(col-lg-4/8)이 ≤992 스택 시 카드 세로 간격 ──
   travel-info + crew-reporting/create 공유. Bootstrap .row 는 스택 시 세로 gap 없음 → row-gap 부여. */
@media (max-width: 992px) {
    .cr-form-main > .row {
        row-gap: 20px;
    }
}

/* ── 설정 카드(.setting-cards): 모바일에서 한 줄에 하나씩 ──
   (crew-expense/setting 페이지는 2026-07-23 폐기 — 현재 사용처는 crew-report-template/setting.css)
   crew-report-template/setting.css 는 flex-wrap:nowrap / .setting-card{flex:1 1 0;min-width:0} 라
   width:100% 만으로는 안 먹고 카드 5개가 61px 로 짜부라졌다.
   → wrap 을 풀고 flex 자체를 100% 고정해야 한 줄에 하나씩 떨어진다. */
@media (max-width: 992px) {
    .setting-cards {
        flex-wrap: wrap;
    }
    .setting-card {
        width: 100%;
        flex: 0 0 100%;
        min-width: 0;
    }
}

/* ── Crew Report Template View/Modify 모달 EDIT: REPORT TYPE · CREW TYPE 2열 → 1열 ── */
@media (max-width: 576px) {
    #crtViewModal .crt-edit-types {
        grid-template-columns: 1fr;
    }
}

/* ── Crew Expense group/approval 상세 헤더: 모바일에서 액션 버튼 풀폭 ──
   상태 badge(작은 pill)와 액션 버튼(풀폭)을 시각적으로 확실히 구분. */
@media (max-width: 992px) {
    .expense-group-view-actions {
        width: 100%;
    }
    .expense-group-view-actions .btn {
        width: 100%;
    }
}

/* ── User 탭(프로필 3개 / 상세 4개): 모바일에서 2줄 wrap → 한 줄 + 가로 스크롤 ──
   ⚠️클래스가 둘이다 — profile.php=`user-profile-tabs`, view.php=`user-view-tabs`(#userTab).
   기존엔 profile 만 잡고 있어서 **view 의 탭 4개는 규칙이 안 걸린 채 2줄로 wrap** 되고 있었다.
   규칙 = 사이드탭 모달(.modal-side-nav)과 동일 정책: 한 화면에 최대 3개, 넘으면 가로 스크롤.
   min-width 를 쓰는 이유·calc 인 이유는 modal-side-nav 주석 참조. */
@media (max-width: 992px) {
    /* 스타일도 모달 사이드탭과 동일(개발자 지시): 회색 트랙 + 활성만 흰 알약.
       nav 자체가 트랙 — 다만 페이지 흐름에 있어 좌우 margin 은 0(헤더/툴바가 이미 padding 0 이라
       좌측 정렬을 맞춘다), 아래만 10px 띄운다. */
    .user-profile-tabs,
    .user-view-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        margin: 0 0 10px;
        padding: 6px 6px 7px 6px;
        gap: 3px;
        border: 0;
        background: var(--bs-bg-secondary);
        border-radius: var(--bs-radius-sm);
    }
    .user-profile-tabs .nav-item,
    .user-view-tabs .nav-item {
        flex: 1 0 auto;
        min-width: calc(33.333% - 4px);
    }
    .user-profile-tabs .nav-link,
    .user-view-tabs .nav-link {
        width: 100%;
        text-align: center;
        padding: 10px;
        white-space: nowrap;
        border: 0 !important;
        border-radius: var(--bs-radius-sm);
        font-size: var(--font-small);
        font-weight: 700;
        color: var(--bs-muted) !important;
        background: transparent !important;
        letter-spacing: 0.1em;
    }
    .user-profile-tabs .nav-link.active,
    .user-view-tabs .nav-link.active,
    .user-profile-tabs .nav-item.show .nav-link,
    .user-view-tabs .nav-item.show .nav-link {
        background: var(--bs-card) !important;
        color: var(--bs-primary-dark) !important;
        font-weight: 700;   /* 페이지 CSS 가 활성탭만 600 으로 낮춰서 모달과 어긋나던 것 통일 */
    }
}

/* ── User Permission edit 모달: 6열 권한테이블 첫 열(함수명 min-width 340px)이 모바일 폭을
   다 먹어 체크박스 열(Menu/View/Edit/Add/Delete)이 안 보이던 것 → 첫 열 160~200px 축소 +
   함수명 줄바꿈. sticky(좌측 고정)는 유지 → 가로 스크롤해도 함수명 보임. ── */
@media (max-width: 992px) {
    #editUserModal .permission-table thead th:first-child,
    #editUserModal .permission-table tbody td:first-child,
    #editUserModal .permission-table .perm-title-cell {
        min-width: 160px;
        max-width: 200px;
    }
    #editUserModal .permission-table .perm-node-label {
        white-space: normal;
    }
}

/* ── EDIT PERMISSION 모달: depth 들여쓰기 모바일 축소 (기존 인라인 20+depth*20 → 20+depth*10) ──
   perm.js 가 인라인 style 로 padding-left 넣어서 !important 로 덮음. 5px 배수(20/30/40/50/60/70). */
@media (max-width: 992px) {
    #editUserModal tr[data-depth="0"] .perm-title-cell { padding-left: 20px !important; }
    #editUserModal tr[data-depth="1"] .perm-title-cell { padding-left: 30px !important; }
    #editUserModal tr[data-depth="2"] .perm-title-cell { padding-left: 40px !important; }
    #editUserModal tr[data-depth="3"] .perm-title-cell { padding-left: 50px !important; }
    #editUserModal tr[data-depth="4"] .perm-title-cell { padding-left: 60px !important; }
    #editUserModal tr[data-depth="5"] .perm-title-cell { padding-left: 70px !important; }
}

/* ── Quote 생성 티켓 테이블: 가로 1줄(min-width 52rem)이라 모바일 가로스크롤 →
   테이블을 flex-wrap 랩 레이아웃으로 전환(스크롤 제거) + 좌측 rail(스텝번호 원) 숨김. outbound/return 공용.
   배치: [LEGS][DATE] / [출발공항] / [swap] / [도착공항] / [DEP시각][ARR시각] / [FLIGHT TIME] */
@media (max-width: 992px) {
    .quote-create-page .quote-doc-block__rail {
        display: none;
    }
    /* ≤576 은 아래 블록에서 좌우 패딩 0 으로 다시 덮는다(파일 뒤쪽이 이김).
       여기는 577~992 구간용 값. */
    .quote-doc-masthead {
        padding: 1.5rem 1rem 1.5rem 1.25rem;
    }
    .quote-doc-block__main {
        padding-left: 0;
    }
    .quote-create-page .quote-ticket-table-scroll {
        overflow-x: visible;
        margin: 0;
        padding: 0;
    }
    .quote-create-page .quote-ticket-table--outbound-line {
        min-width: 0;
    }
    .quote-create-page .quote-ticket-table,
    .quote-create-page .quote-ticket-table tbody,
    .quote-create-page .quote-ticket-table tr,
    .quote-create-page .quote-ticket-table td {
        display: block;
    }
    .quote-create-page .quote-ticket-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 10px;
    }
    /* 셀 min-width(9.5rem 등)·colgroup width 무력화 → 랩 방해 제거 */
    .quote-create-page .quote-ticket-table td[class*="quote-ticket-cell--"] {
        min-width: 0;
        width: auto;
        padding: 0;
    }
    /* 배치 */
    .quote-create-page .quote-ticket-cell--leg    { flex: 0 0 auto; }
    .quote-create-page .quote-ticket-cell--date   { flex: 1 1 auto; }
    .quote-create-page .quote-ticket-cell--airport{ flex: 1 1 100%; }
    .quote-create-page .quote-ticket-cell--swap   { flex: 1 1 100%; text-align: center; }
    .quote-create-page .quote-ticket-cell--time   { flex: 1 1 calc(50% - 5px); }
    .quote-create-page .quote-ticket-cell--ftime  { flex: 1 1 100%; }

    /* .quote-doc-block__body(padding:0) 직계 .row 의 gutter 음수마진(-8px)이 흡수 못 돼
       8px 넘치던 것 → 마진 0(컬럼 패딩은 유지). 가로스크롤 잔여분 제거. */
    .quote-create-page .quote-doc-block__body > .row {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ── Multiple Enter Bill: col-lg-5/7 2단 → ≤991 자동 스택(Bootstrap) ──
   폭·스택은 row/col-lg 가 담당(2026-07-22 구 meb-layout flex 제거). 스택 시엔
   프리뷰 sticky 해제(화면 덮음 방지) + 높이 축소만 여기서 처리. */
@media (max-width: 992px) {
    .multiple-enter-bill-page .meb-col-right {
        position: static;
    }
    /* 스택 시 프리뷰가 뷰포트를 다 먹지 않게 높이 축소 */
    .multiple-enter-bill-page .meb-preview-scroll {
        max-height: 70vh;
    }
}

/* ── Crew Dashboard(템플릿): 8:4 분할·KPI 3열·히어로 상세 4열 → 좁은 폭 축소 ── */
@media (max-width: 992px) {
    /* 8:4 (main:side) → 세로 스택 */
    .cd-page .cd-split {
        grid-template-columns: 1fr;
    }
    /* 캘린더:스케줄스택 → 세로 스택 */
    .cd-page .cd-cal-todo {
        grid-template-columns: 1fr;
    }
}

/* ── Quote 워크시트(≤576) ────────────────────────────────────────
   ⚠️위치 주의: 같은 파일 위쪽 ≤992 Quote 블록에도 `.quote-doc-masthead{padding:...}` 가 있어
   특이도가 같다 → **반드시 그 블록보다 뒤**에 있어야 이긴다(처음에 앞에 뒀다가 안 먹었음).
   ①머리말 좌/우 2단 → 세로 2행: DOCUMENT·PREPARED 카드를 타이틀 아래로 내리고 50%씩 가로 배치.
   ②좌우 패딩 제거(폰은 바깥 컨테이너 여백으로 충분, 24~28px 은 내용폭만 깎음) / 위아래 15px 유지.
   ③시트 우측 경계선 제거 — 좌우 여백이 없어져 화면 끝에 붙은 선처럼 보인다. */
@media (max-width: 576px) {
    .quote-doc-masthead {
        flex-direction: column;
        padding: 15px 0;
    }
    .quote-doc-masthead__right {
        flex-direction: row;
        min-width: 0;
        text-align: left;
    }
    .quote-doc-masthead__right > .quote-doc-ref {
        flex: 1 1 50%;
        min-width: 0;
    }
    .quote-doc-flow {
        padding: 0 0 15px;
    }
    .quote-doc-sheet {
        border-right: 0;
    }
}

@media (max-width: 576px) {
    .cd-page .cd-kpis {
        grid-template-columns: 1fr;
    }
    .cd-page .cd-hero__detail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* 헤더 퀵액션 풀폭 정렬 + 한 줄에 2개씩 */
    .cd-page .cd-quick {
        width: 100%;
    }
    .cd-page .cd-quick > .btn {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
    }
    /* 스케줄 ICS 재전송 버튼: 모바일은 아이콘만 (라벨 숨김) */
    .cd-page .cd-flt__ics span {
        display: none;
    }
    .cd-page .cd-flt__ics {
        gap: 0;
    }
}

/* ── Trip Calendar: 모바일 반응형 (≤991.98px 리스트뷰 전환 + 필터 2열 + 툴바) ──
 * Crew Calendar 와 동일 패턴. JS matchMedia(991.98) 리스트뷰 전환과 브레이크포인트 일치. */
@media (max-width: 991.98px) {
    /* 상단 필터: 고정폭(inline width) 무시하고 한 줄에 2개씩 */
    .trip-calendar-page .page-toolbar-filters {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: flex-start;
        gap: 10px;
    }
    .trip-calendar-page .page-toolbar-filters .page-toolbar-filter {
        width: 100%; /* calc(50% - 5px) !important; */
        min-width: 0;
    }
    /* CLEAR FILTERS: 한 줄 전체 폭 */
    .trip-calendar-page .page-toolbar-filters .page-toolbar-filter-actions {
        width: 100% !important;
        min-width: 0;
    }
    .trip-calendar-page .page-toolbar-filters .page-toolbar-filter-actions .btn {
        width: 100%;
    }
    /* 영역 분할선 제거(스탯↔필터 + 스탯 사이) — 모바일에서 어색한 잔선 */
    .trip-calendar-page .page-toolbar-sep,
    .trip-calendar-page .page-toolbar-divider {
        display: none;
    }
    /* 통계 타일: 줄바꿈 허용 */
    .trip-calendar-page .page-toolbar-stats {
        flex-wrap: wrap;
    }

    #tripCalendar {
        min-height: 420px;
    }
    /* .fc 루트(=#tripCalendar)는 세로 flex — order 재배치 안전장치 */
    #tripCalendar.fc {
        display: flex;
        flex-direction: column;
    }
    /* 헤더 툴바: prev · title · next 를 한 줄로 */
    #tripCalendar .fc-header-toolbar {
        flex-direction: row !important;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px !important;
    }
    /* today: footerToolbar 를 헤더 바로 아래 중앙 줄로 끌어올림 */
    #tripCalendar .fc-footer-toolbar {
        order: 1;
        margin: 0 0 12px !important;
        justify-content: center;
    }
    #tripCalendar .fc-view-harness {
        order: 2;
    }
    #tripCalendar .fc-toolbar-title {
        font-size: 0.95rem;
    }
    #tripCalendar .fc-button {
        padding: 5px 10px !important;
    }
    /* 리스트뷰 이벤트 줄바꿈 허용(모바일에서 제목 잘림 방지) */
    #tripCalendar .fc-list-event-title,
    #tripCalendar .fc-list-event-title a {
        white-space: normal;
        word-break: break-word;
    }
}

@media (max-width: 575.98px) {
    .trip-calendar-page .tc-calendar-card .tc-calendar-body {
        padding: 10px;
    }
}

/* ── [P] Trip Estimator — CREATE QUOTE 듀얼 뷰 (좁은 화면=상/하 세로 분할) ──────
 * 데스크톱은 View 축소(참고)+Quote 넓게(B). ≤992 에서는 상(View, 참고)/하(Quote, 주작업)로 쌓되
 * Quote 에 세로 공간을 더 준다. (좌우 규칙은 !important 라 여기서도 !important 로 이겨야 함 — 이 파일이 맨끝 로드) */
@media (max-width: 992px) {
    body.quote-dual-mode #tripEstViewModal .modal-dialog {
        max-width: calc(100vw - 2rem);
        width: calc(100vw - 2rem);
        margin: 1rem auto;
        align-items: flex-start;
    }
    body.quote-dual-mode #tripEstViewModal .modal-content {
        max-height: 34vh;
    }
    body.quote-dual-mode #quoteCreateModal.common-overlay {
        align-items: flex-end;
        justify-content: center;
        padding: 1rem;
    }
    body.quote-dual-mode #quoteCreateModal .page-modal-card {
        max-width: calc(100vw - 2rem) !important;
        width: calc(100vw - 2rem);
        max-height: 58vh;
        margin-right: 0;
    }
}

/* ── [P] QUOTE HISTORY 인라인 패널 — 차트|표 좌우를 좁은 화면에선 세로 스택으로 ──
 * 표 최소 내용폭이 ≈390px 이라, 좌우로 두면 두 쪽 다 못 쓰게 좁아진다. */
@media (max-width: 992px) {
    .rqh-split,
    .ghh-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── [P] Quote "View Itinerary" 모달(#quoteAdditionalModal) — 좁은 화면 여백 축소 ──
 * 폰/태블릿에선 가로 여백을 줄여 표(.table-responsive)에 폭을 내준다. (스텝번호 01/02/03 은 헤더 안 인라인 배치라 별도 처리 불필요)
 * 표가 화면을 벗어나는 근본 원인(그리드 트랙 minmax(0,1fr))은 additional-modal.css 에서 처리 → 여기선 여백만.
 * ⚠️ additional-modal.css 는 모달 파셜에 인라인 <link> 라 이 파일보다 DOM 뒤 → 동특이도면 페이지 CSS 가 이김.
 *    그래서 ID 요소의 .modal 클래스를 물려 특이도를 한 단계 올려(로드순서 무관) 오버라이드가 확실히 이기게 한다.
 * ⚠️ 상단 헤더(.acs-*)의 스택은 별도 처리가 없다 — `.acs-doc-head` 가 flex-wrap:wrap,
 *    `.acs-customer-row` 는 view-modal.css 의 720px 티어에서 1열로 접힌다(그 파일에 남겨야 하는 예외). */
@media (max-width: 992px) {
    #quoteAdditionalModal.modal .acs-doc-head,
    #quoteAdditionalModal.modal .acs-customer-row {
        padding-left: 12px;
        padding-right: 12px;
    }
    #quoteAdditionalModal.modal .acs-rule {
        margin-left: 12px;
        margin-right: 12px;
    }
    #quoteAdditionalModal.modal .qam-doc-flow {
        padding: 0 12px 18px;
    }
    /* 데스크톱은 본문 좌측 들여쓰기(padding-left:50px)로 헤더와 정렬 — 폰/태블릿에선 표에 폭을 내주려 0 */
    #quoteAdditionalModal.modal .qam-doc-block__body {
        padding-left: 0;
    }
}


/* ── CRS ▸ Leads ▸ Lead View 모달(대시보드) ───────────────────────
   2026-08-21 개편분. 데스크톱 규칙은 pages/crs/leads/index.css.

   폰에서 깨지던 실체(360×640 실측): 헤더 105 + **요약 스트립 204** + 본문 214 + 푸터 117.
   3칸짜리 스트립이 세로로 쌓이면서 화면의 1/3 을 먹고, 게다가 본문에 걸어둔 **고정 높이**
   (`height: min(560px, calc(100vh - 20rem))`)와 합이 `.modal-content` 의 max-height 를 넘어
   `overflow:hidden` 에 푸터가 잘렸다.

   ① 본문 높이 고정 해제 — 그 고정은 데스크톱에서 페이저/필터를 누를 때 modal-dialog-centered
      가 모달을 위아래로 튀게 하는 걸 막으려는 것이다. 폰에선 모달이 거의 전체 높이라 튈 일이
      없고, 고정하면 위처럼 잘리기만 한다. auto 로 두면 flex + max-height + overflow-y 가 받는다.
   ② 스트립은 track 을 좁혀(200→140) 2열로 접고 패딩을 줄인다 → 204px → 약 90px. */
@media (max-width: 992px) {
    .crs-lead-dash {
        height: auto;
    }
    .crs-lead-summary {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
    .crs-summary-cell {
        padding: 8px 12px;
    }
    /* 카드 사이 간격도 데스크톱(18px)은 폰에서 과하다. */
    .crs-dash-grid,
    .crs-dash-col {
        gap: 12px;
    }
}


/* ── 모달 열림 중 스크롤바 보정 padding 무효화 → modal.css 로 이동 ──────────────
 * 화면폭과 무관하게 무효화해야 해서(데스크톱은 html{overflow-y:scroll} 로 스크롤바가 유지됨)
 * 미디어쿼리가 아닌 modal.css 의 `body.modal-open` 규칙으로 옮겼다. */

/* ── Email Templates 편집 모달 SENDER — 좁은 화면에서 주소/표시이름 2열을 세로로 ──
   메일박스+@+도메인 3열도 같이 무너뜨린다(@ 는 줄 사이에 남기지 않고 감춘다). */
@media (max-width: 576px) {
    .et-sender__custom {
        grid-template-columns: 1fr;
    }
    .et-sender__addr {
        grid-template-columns: 1fr;
    }
    .et-sender__at {
        display: none;
    }
}

/* ── Notification Setting 이벤트 검색 — 좁은 화면에선 헤더 아래로 내려 전체 폭 사용 ── */
@media (max-width: 992px) {
    .group-notification-setting-page .page-header {
        flex-wrap: wrap;
        row-gap: 10px;
        padding-bottom: 12px;
    }
    .group-notification-setting-page .page-header-right {
        flex: 0 0 100%;
    }
    .group-notification-setting-page .ims-search {
        width: 100%;
    }
}