/* ==================== OBT 모바일 반응형 CSS ==================== */
/* 모든 @media 쿼리를 한 곳에 집중 - 테마 CSS 뒤에 로드 */

/* ==================== Phase 0: 기반 (브레이크포인트 + 햄버거) ==================== */

/* 모바일 드로어 전용 요소 (데스크탑 숨김) */
.m-drawer-footer {
    display: none;
}

/* 모바일 회의모드 컨트롤 (기본 숨김 — 768px 이하에서만 표시) */
.meeting-mobile-status-bar,
.meeting-bottom-bar,
.meeting-participants-sheet,
.meeting-sheet-backdrop,
.meeting-more-menu { display: none; }

/* CHAT/MEETING 탭 (기본 숨김 — 모바일에서만 표시) */
.messenger-sidebar-tabs { display: none; }

/* 햄버거 버튼 (기본 숨김) */
.m-hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: 1px solid var(--light-border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 22px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
}
.m-hamburger:hover {
    background: var(--hover-bg);
}

/* 메뉴 오버레이 (기본 숨김) */
.m-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 8999;
}

/* === 태블릿 (1024px 이하) === */
@media (max-width: 1024px) {
    #mainPage {
        width: 100%;
        margin: 0;
        box-shadow: none;
        border: none;
    }
    .header {
        height: auto;
        min-height: 60px;
        padding: clamp(8px, 2vw, 30px) clamp(12px, 2vw, 30px);
    }
}


/* === 태블릿 세로 / 모바일 (768px 이하) === */
@media (max-width: 768px) {
    /* 공통 기반: 가로 스크롤 완전 제거 + 터치 최적화 */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    body {
        -webkit-tap-highlight-color: transparent;
    }
    #mainPage {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
    /* iOS 자동 줌 방지: 17px 이상 */
    input, select, textarea, button {
        font-size: 17px;
    }
    /* 터치 타겟: 최소 44px (Quill 툴바 제외) */
    button, a, .btn, [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    /* 체크박스/라디오: 커스텀 앱 스타일 */
    input[type="checkbox"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        margin: 4px;
        cursor: pointer;
        border: 2px solid var(--text-muted, #999);
        border-radius: 6px;
        background: var(--surface, #fff);
        position: relative;
        transition: all 0.15s ease;
        flex-shrink: 0;
    }
    input[type="checkbox"]:checked {
        background: var(--primary, #4a7c59);
        border-color: var(--primary, #4a7c59);
    }
    input[type="checkbox"]:checked::after {
        content: '';
        position: absolute;
        left: 7px;
        top: 3px;
        width: 6px;
        height: 12px;
        border: solid #fff;
        border-width: 0 2.5px 2.5px 0;
        transform: rotate(45deg);
    }
    input[type="radio"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        min-width: 18px;
        min-height: 18px;
        margin: 2px;
        padding: 0;
        cursor: pointer;
        border: 2px solid var(--text-muted, #999);
        border-radius: 50%;
        background: var(--surface, #fff);
        position: relative;
        transition: all 0.15s ease;
        flex-shrink: 0;
    }
    input[type="radio"]:checked {
        border-color: var(--primary, #4a7c59);
    }
    input[type="radio"]:checked::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--primary, #4a7c59);
    }
    /* 라디오 그룹 모바일 세로 배치 */
    .radio-group {
        flex-direction: column;
        gap: 4px;
    }
    /* 체크박스 라벨 클릭 영역 확대 */
    label:has(> input[type="checkbox"]),
    label:has(> input[type="radio"]) {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 4px 0;
        cursor: pointer;
    }
    /* obt-toggle 체크박스는 원래 크기 유지 (숨김 처리) */
    label.obt-toggle input[type="checkbox"] {
        -webkit-appearance: none;
        appearance: none;
        width: 0;
        height: 0;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 0;
        border: none;
        position: absolute;
        opacity: 0;
    }
    label.obt-toggle input[type="checkbox"]::after {
        display: none;
    }
    .ql-toolbar button,
    .ql-toolbar .ql-picker,
    .ql-toolbar .ql-picker-label,
    .ql-toolbar .ql-color-picker,
    .ql-toolbar a {
        min-height: unset !important;
        min-width: unset !important;
    }
    .ql-toolbar.ql-snow {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 4px 8px !important;
    }
    .ql-toolbar .ql-formats {
        flex-shrink: 0;
    }
    /* 모달 열림 시 배경 스크롤 방지 */
    body.modal-open {
        overflow: hidden !important;
    }

    /* 햄버거 표시 */
    .m-hamburger {
        display: flex;
    }

    /* 헤더 축소 */
    .header {
        height: 50px;
        padding: 0 12px;
        flex-wrap: nowrap;
        align-items: center;
    }
    .header-left {
        flex: 1;
        min-width: 0;
        align-self: auto;
    }
    .header-top-right {
        position: static;
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
    }
    .header-top-right .btn-logout {
        display: none !important;
    }
    .header-top-right #currentUser {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 17px !important;
    }
    .header h1 {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
        padding: 0;
        line-height: 50px;
        display: flex;
        align-items: center;
        height: 50px;
    }
    .user-info {
        padding: 0;
        gap: 6px;
        height: 50px;
        display: flex;
        align-items: center;
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
    }
    #currentUser {
        max-width: 140px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex-shrink: 1;
        min-width: 0;
    }
    #currentUserEmail { display: none !important; }
    /* 로그아웃/테마/메신저/이메일 버튼은 드로어·탭바로 이동 */
    .btn-logout { display: none !important; }
    .header-left .theme-switcher { display: flex !important; gap: 4px; }
    .header-left .theme-btn { width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; border-width: 1.5px; }
    .header-icon-btn { display: none !important; }
    /* 역할 텍스트 숨김 (이름만 표시) */
    .user-info .user-role { display: none !important; }

    /* 메뉴바: 사이드 드로어 */
    .menubar {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100vh;
        height: 100dvh;
        flex-direction: column;
        background: var(--dark-soft);
        border-right: 1px solid var(--light-border);
        z-index: 9000;
        padding: 16px 0;
        overflow-y: auto;
        box-shadow: 4px 0 20px rgba(0,0,0,0.3);
        transform: translateX(-100%);
        transition: transform 300ms ease;
    }
    body.m-menu-open .menubar {
        transform: translateX(0);
    }
    body.m-menu-open .m-menu-overlay {
        display: block;
    }
    body.m-menu-open {
        overflow: hidden !important;
    }
    .menu-item {
        padding: 14px 20px;
        font-size: 18px;
        white-space: nowrap;
        border-radius: 0;
        text-align: left;
        width: 100%;
    }
    .menu-item.active {
        border-bottom: none;
        background: var(--primary);
        color: var(--text-heading);
    }
    /* 드로어 하단: 테마 + 로그아웃 */
    .m-drawer-footer {
        display: flex !important;
        margin-top: auto;
        padding: 16px 20px;
        border-top: 1px solid var(--light-border);
        flex-direction: column;
        gap: 12px;
    }
    .m-drawer-theme {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--text-secondary);
        font-size: 17px;
    }
    .m-drawer-theme .theme-btn {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
        border-radius: 50%;
        cursor: pointer;
    }
    .m-drawer-logout {
        width: 100%;
        padding: 12px;
        background: var(--surface);
        color: var(--status-error);
        border: 1px solid var(--light-border);
        border-radius: 6px;
        font-size: 17px;
        cursor: pointer;
        text-align: center;
    }
    .m-drawer-logout:hover {
        background: var(--status-error);
        color: #fff;
    }

    /* 메인 콘텐츠 */
    .main-content {
        padding: clamp(8px, 2vw, 20px);
        min-height: calc(100vh - 100px);
    }
    .content-header {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 테이블 가로스크롤: 테이블 부모에 overflow-x 적용 */
    .tab-content,
    .sub-tab-content,
    .settings-tab-content,
    [id^="clientTab"],
    [id^="approval"][id$="Section"],
    [data-doc-tab],
    .table-container,
    .client-group-body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* 테이블: 유동 폭, 부모 스크롤 컨테이너에서 가로스크롤 */
    #pageContainer table:not(.calendar-grid):not(.gantt-table):not(.gantt-left-table):not(.a4-table) {
        min-width: 0;
        table-layout: auto;
        white-space: normal;
    }
    /* 카드 대체 없는 테이블: 부모 스크롤 + 적절한 min-width */
    .perm-table-wrapper table,
    .contact-table-wrapper table {
        min-width: 500px;
    }
    /* A4 미리보기 내부 테이블: 기존 유지 */
    #pageContainer .a4-page table:not(.calendar-grid):not(.gantt-table) {
        min-width: 0;
        table-layout: fixed;
        white-space: normal;
    }
    /* 관리 컬럼 버튼: 원본 유지 */
    td .btn-group,
    td .action-buttons {
        flex-wrap: nowrap;
    }

    /* 탭 버튼 스타일 (스크롤은 반응형 블록에서 정의) */
    .tab-btn {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 17px;
        padding: 10px 12px;
    }

    /* 모달: clamp 유동폭 */
    .modal-content,
    .modal-large .modal-content,
    .modal-content.modal-large,
    .modal-content.modal-preview,
    .modal-content.modal-approval-fullscreen {
        width: clamp(300px, 95vw, 450px) !important;
        max-width: 95vw !important;
        max-height: 90vh;
        margin: 5vh auto;
        border-radius: 0;
        overflow: auto;
    }
    /* 모달 내부 최소 폰트 17px 정책 강제 (A4 인쇄영역 제외) */
    .modal-content,
    .modal-content label,
    .modal-content span:not(.a4-page span),
    .modal-content td:not(.a4-page td),
    .modal-content th:not(.a4-page th),
    .modal-content p:not(.a4-page p),
    .modal-content li,
    .modal-content .form-group label,
    .modal-content .status-badge,
    .modal-buttons button {
        font-size: 17px !important;
    }
    .modal-content h3 { font-size: 20px !important; }
    .modal-content h4 { font-size: 18px !important; }
    /* A4 인쇄 영역은 원본 폰트 유지 */
    .modal-content .a4-page,
    .modal-content .a4-page * {
        font-size: unset !important;
    }

    /* 큰 모달 (미리보기, 결재)은 넓게 유지 */
    .modal-large .modal-content,
    .modal-content.modal-large,
    .modal-content.modal-preview,
    .modal-content.modal-approval-fullscreen {
        width: 95vw !important;
    }

    /* 폼: 문서 작성 모달(발주서/견적서/거래명세표/기안서/택배/코팅)은 세로 스택
       그 외 모달은 데스크탑과 동일한 가로 배치 유지 */
    #poModal .form-row,
    #quotationModal .form-row,
    #tsModal .form-row,
    #draftModal .form-row,
    #deliveryShipModal .form-row,
    #deliveryAddrModal .form-row,
    #coatingOrderModal .form-row,
    #scheduleQuickEventModal .form-row,
    #qmsComplaintModal .form-row,
    #qmsComplaintDetailModal .form-row {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        overflow-x: visible !important;
        gap: 0 !important;
    }
    #poModal .form-row .form-group,
    #quotationModal .form-row .form-group,
    #tsModal .form-row .form-group,
    #draftModal .form-row .form-group,
    #deliveryShipModal .form-row .form-group,
    #deliveryAddrModal .form-row .form-group,
    #coatingOrderModal .form-row .form-group,
    #scheduleQuickEventModal .form-row .form-group,
    #qmsComplaintModal .form-row .form-group,
    #qmsComplaintDetailModal .form-row .form-group {
        flex: unset !important;
        width: 100% !important;
    }
    /* 리뷰.md #215 — obt-toggle 긴 라벨 모바일 줄바꿈(기본 nowrap 가 좁은 화면서 잘림).
       고객 불만 '실제 부적합' 토글 라벨처럼 긴 문구가 화면 밖으로 넘치던 회귀 방지. */
    label.obt-toggle {
        align-items: flex-start !important;
        max-width: 100% !important;
    }
    label.obt-toggle .obt-toggle-label {
        white-space: normal !important;
        word-break: keep-all;
    }
    /* 고객 불만 상세 모달: 워크플로우 버튼 다수(수정/조사/기각/삭제/닫기 등) → 폰트 축소 + 줄바꿈 허용
       (eqDetailModal 선례). flex:1 1 0 한 줄 강제로 텍스트가 깨지던 문제 해소. */
    #qmsComplaintDetailModal .modal-buttons-sticky {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    #qmsComplaintDetailModal .modal-buttons-sticky button {
        flex: 1 1 auto !important;
        min-width: 72px !important;
        font-size: 14px !important;
        padding: 9px 6px !important;
        white-space: nowrap !important;
    }
    /* ===== 문서 모달 품목 테이블: 조건섹션 스타일 가로 행 레이아웃 ===== */
    #poModal .quotation-items-table,
    #quotationModal .quotation-items-table,
    #tsModal .quotation-items-table,
    #deliveryShipModal .quotation-items-table {
        border: none !important;
        table-layout: auto !important;
    }
    #poModal .quotation-items-table thead,
    #quotationModal .quotation-items-table thead,
    #tsModal .quotation-items-table thead,
    #deliveryShipModal .quotation-items-table thead {
        display: none !important;
    }
    #poModal .quotation-items-table tbody,
    #quotationModal .quotation-items-table tbody,
    #tsModal .quotation-items-table tbody,
    #deliveryShipModal .quotation-items-table tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    /* 각 품목 tr: 카드형 구분 */
    #poModal .quotation-items-table tbody tr,
    #quotationModal .quotation-items-table tbody tr,
    #tsModal .quotation-items-table tbody tr,
    #deliveryShipModal .quotation-items-table tbody tr {
        display: flex !important;
        flex-direction: column !important;
        padding: 10px !important;
        border: 1px solid var(--light-border) !important;
        border-radius: 6px !important;
        background: var(--surface) !important;
    }
    /* 각 td = form-group 스타일 (가로 라벨-값 + 구분선) */
    #poModal .quotation-items-table td,
    #quotationModal .quotation-items-table td,
    #tsModal .quotation-items-table td,
    #deliveryShipModal .quotation-items-table td {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        gap: 8px !important;
        padding: 7px 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--light-border) !important;
        width: auto !important;
    }
    /* 마지막 td는 border-bottom 제거 */
    #poModal .quotation-items-table td:last-child,
    #quotationModal .quotation-items-table td:last-child,
    #tsModal .quotation-items-table td:last-child,
    #deliveryShipModal .quotation-items-table td:last-child {
        border-bottom: none !important;
    }
    /* 복수 품목 구분: 택배 모달은 border-top 유지 */
    #deliveryShipModal .quotation-items-table tbody tr + tr td:first-child {
        border-top: 3px solid var(--light-border) !important;
    }
    /* 라벨 (::before): form-group label과 동일 (flex: 0 0 80px) */
    #poModal .quotation-items-table td::before,
    #quotationModal .quotation-items-table td::before,
    #tsModal .quotation-items-table td::before,
    #deliveryShipModal .quotation-items-table td::before {
        flex: 0 0 80px !important;
        font-size: 17px !important;
        font-weight: 500 !important;
        color: var(--text-muted) !important;
        white-space: nowrap !important;
    }
    /* 칼럼별 라벨 (견적/발주/거래명세) */
    #poModal .quotation-items-table td:nth-child(1)::before,
    #quotationModal .quotation-items-table td:nth-child(1)::before,
    #tsModal .quotation-items-table td:nth-child(1)::before { content: "품명"; }
    #poModal .quotation-items-table td:nth-child(2)::before,
    #quotationModal .quotation-items-table td:nth-child(2)::before,
    #tsModal .quotation-items-table td:nth-child(2)::before { content: "규격"; }
    #poModal .quotation-items-table td:nth-child(3)::before,
    #quotationModal .quotation-items-table td:nth-child(3)::before,
    #tsModal .quotation-items-table td:nth-child(3)::before { content: "단위"; }
    #poModal .quotation-items-table td:nth-child(4)::before,
    #quotationModal .quotation-items-table td:nth-child(4)::before,
    #tsModal .quotation-items-table td:nth-child(4)::before { content: "수량"; }
    #poModal .quotation-items-table td:nth-child(5)::before,
    #quotationModal .quotation-items-table td:nth-child(5)::before,
    #tsModal .quotation-items-table td:nth-child(5)::before { content: "단가"; }
    #poModal .quotation-items-table td:nth-child(6)::before,
    #quotationModal .quotation-items-table td:nth-child(6)::before,
    #tsModal .quotation-items-table td:nth-child(6)::before { content: "금액"; }
    /* 삭제 td: 카드 내 상단 우측 배치 */
    #poModal .quotation-items-table td:nth-child(7),
    #quotationModal .quotation-items-table td:nth-child(7),
    #tsModal .quotation-items-table td:nth-child(7) {
        order: -1 !important;
        justify-content: flex-end !important;
        border: none !important;
        padding: 0 0 4px !important;
        width: auto !important;
    }
    /* 삭제 버튼 크기 */
    #poModal .quotation-items-table .btn-remove-row,
    #quotationModal .quotation-items-table .btn-remove-row,
    #tsModal .quotation-items-table .btn-remove-row {
        padding: 5px 12px !important;
    }
    #poModal .quotation-items-table td:nth-child(7)::before,
    #quotationModal .quotation-items-table td:nth-child(7)::before,
    #tsModal .quotation-items-table td:nth-child(7)::before { content: none !important; }
    /* 금액 행 스타일: 우측 정렬 */
    #poModal .quotation-items-table td:nth-child(6),
    #quotationModal .quotation-items-table td:nth-child(6),
    #tsModal .quotation-items-table td:nth-child(6) {
        font-weight: 600 !important;
        font-size: 17px !important;
        justify-content: space-between !important;
    }

    /* ===== 견적서 기계장치정보: 데스크탑 레이아웃 유지 + 가로스크롤 ===== */
    #quotationModal #equipmentSection {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    #quotationModal #equipmentSection > * {
        min-width: 700px;
    }
    #quotationModal #equipmentSection h4 {
        min-width: 0;
    }
    /* form-group: 데스크탑과 동일하게 세로(column) 배치 */
    #quotationModal #equipmentSection > .form-group,
    #quotationModal #equipmentSection > .form-row > .form-group {
        display: block !important;
        flex-direction: column !important;
        border-bottom: none !important;
        padding: 0 0 10px !important;
    }
    #quotationModal #equipmentSection .form-group > label {
        flex: unset !important;
        white-space: normal !important;
        display: block !important;
        margin-bottom: 5px !important;
        font-size: 13px !important;
        color: var(--text-secondary) !important;
    }
    /* form-row: 데스크탑과 동일한 가로 배치 */
    #quotationModal #equipmentSection .form-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    #quotationModal #equipmentSection .form-row .form-group {
        flex: 1 !important;
        width: auto !important;
    }
    /* 폰트 사이즈: 데스크탑 원본 유지 */
    #quotationModal #equipmentSection label,
    #quotationModal #equipmentSection span,
    #quotationModal #equipmentSection td,
    #quotationModal #equipmentSection th,
    #quotationModal #equipmentSection p,
    #quotationModal #equipmentSection input,
    #quotationModal #equipmentSection button {
        font-size: unset !important;
    }
    #quotationModal #equipmentSection .ql-editor table {
        display: table !important;
        table-layout: auto !important;
        width: 100% !important;
    }
    #quotationModal #equipmentSection .ql-editor table thead {
        display: table-header-group !important;
    }
    #quotationModal #equipmentSection .ql-editor table tbody {
        display: table-row-group !important;
    }
    #quotationModal #equipmentSection .ql-editor table tr {
        display: table-row !important;
    }
    #quotationModal #equipmentSection .ql-editor table td,
    #quotationModal #equipmentSection .ql-editor table th {
        display: table-cell !important;
    }
    /* 미리보기 모달 기계장치정보: A4 내부이므로 이미 보호되지만 추가 보장 */
    #quotationPreviewModal .equipment-specs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    #quotationPreviewModal .equipment-specs table {
        display: table !important;
        table-layout: auto !important;
    }
    #quotationPreviewModal .equipment-specs table thead {
        display: table-header-group !important;
    }
    #quotationPreviewModal .equipment-specs table tbody {
        display: table-row-group !important;
    }
    #quotationPreviewModal .equipment-specs table tr {
        display: table-row !important;
    }
    #quotationPreviewModal .equipment-specs table td,
    #quotationPreviewModal .equipment-specs table th {
        display: table-cell !important;
        font-size: unset !important;
    }

    /* ===== 택배 발송 항목 테이블: 같은 행 레이아웃 ===== */
    #deliveryShipModal .ship-items-wrap {
        overflow-x: visible !important;
    }
    #deliveryShipModal .quotation-items-table {
        min-width: 0 !important;
        display: block !important;
        width: 100% !important;
    }
    #deliveryShipModal .ship-colgroup {
        display: none !important;
    }
    #deliveryShipModal .quotation-items-table td:nth-child(1)::before { content: "종류"; }
    #deliveryShipModal .quotation-items-table td:nth-child(2)::before { content: "업체명"; }
    #deliveryShipModal .quotation-items-table td:nth-child(3)::before { content: "주소"; }
    #deliveryShipModal .quotation-items-table td:nth-child(4)::before { content: "받는분"; }
    #deliveryShipModal .quotation-items-table td:nth-child(5)::before { content: "연락처"; }
    #deliveryShipModal .quotation-items-table td:nth-child(6)::before { content: "물품"; }
    #deliveryShipModal .quotation-items-table td:nth-child(7)::before { content: "물품가액"; min-width: 64px !important; }
    #deliveryShipModal .quotation-items-table td:nth-child(8)::before { content: "BOX"; }
    #deliveryShipModal .quotation-items-table td:nth-child(9)::before { content: "비고"; }
    #deliveryShipModal .quotation-items-table td:nth-child(10)::before { content: none !important; }
    /* 삭제 행: 우측 정렬 */
    #deliveryShipModal .quotation-items-table td:nth-child(10) {
        justify-content: flex-end !important;
    }

    /* ===== 입력 필드: flex:1로 남은 공간 채움 ===== */
    #poModal .quotation-items-table td input,
    #poModal .quotation-items-table td select,
    #quotationModal .quotation-items-table td input,
    #quotationModal .quotation-items-table td select,
    #tsModal .quotation-items-table td input,
    #tsModal .quotation-items-table td select,
    #deliveryShipModal .quotation-items-table td input,
    #deliveryShipModal .quotation-items-table td select {
        flex: 1 !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        font-size: 17px !important;
    }
    /* 품명 td 내부 div(input+선택버튼 wrapper) flex:1 */
    #poModal .quotation-items-table td:nth-child(1) > div,
    #quotationModal .quotation-items-table td:nth-child(1) > div,
    #tsModal .quotation-items-table td:nth-child(1) > div {
        flex: 1 !important;
        min-width: 0 !important;
    }
    /* 규격~단가 인풋 모두 중앙정렬 (2~5번째 td) */
    #poModal .quotation-items-table td:nth-child(n+2):nth-child(-n+5) input,
    #poModal .quotation-items-table td:nth-child(n+2):nth-child(-n+5) select,
    #quotationModal .quotation-items-table td:nth-child(n+2):nth-child(-n+5) input,
    #quotationModal .quotation-items-table td:nth-child(n+2):nth-child(-n+5) select,
    #tsModal .quotation-items-table td:nth-child(n+2):nth-child(-n+5) input,
    #tsModal .quotation-items-table td:nth-child(n+2):nth-child(-n+5) select {
        text-align: center !important;
    }
    /* 택배: 물품가액 우측 정렬, BOX 가운데 정렬 */
    #deliveryShipModal .quotation-items-table td:nth-child(7) input {
        text-align: right !important;
    }
    #deliveryShipModal .quotation-items-table td:nth-child(8) input {
        text-align: center !important;
    }

    /* ===== 금액 요약 (quotation-summary): 품목 행과 동일한 form-group 스타일 ===== */
    .modal .quotation-summary {
        padding: 0 !important;
        margin-top: 8px !important;
    }
    .modal .quotation-summary table {
        width: 100% !important;
        margin: 0 !important;
        border: none !important;
        border-collapse: collapse !important;
        box-shadow: none !important;
    }
    .modal .quotation-summary tr {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 7px 0 !important;
        border-bottom: 1px solid var(--light-border) !important;
        background: transparent !important;
    }
    .modal .quotation-summary tr:last-child {
        border-bottom: none !important;
    }
    .modal .quotation-summary td {
        border: none !important;
        padding: 0 !important;
        background: transparent !important;
        font-size: 17px !important;
    }
    .modal .quotation-summary td:first-child {
        flex: 0 0 80px !important;
        font-weight: 500 !important;
        color: var(--text-muted) !important;
        text-align: left !important;
    }
    .modal .quotation-summary td:last-child {
        flex: 1 !important;
        text-align: right !important;
    }
    .modal .quotation-summary .total td:first-child,
    .modal .quotation-summary .total td:last-child {
        font-weight: bold !important;
        color: var(--danger) !important;
    }

    /* 택배 페이지 필터바 (앱 모바일 표준 패턴, 2026-05-03):
       셀렉터 한 줄, 검색 input 한 줄, 날짜 두 개 50/50, 검색/조회/액션 버튼 각자 한 줄 */
    #deliveryTabAddress > .filter-bar,
    #deliveryTabShipment > .filter-bar {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 0 !important;
    }
    #deliveryTabAddress > .filter-bar > select,
    #deliveryTabShipment > .filter-bar > select,
    #deliveryTabAddress > .filter-bar > input[type="text"],
    #deliveryTabAddress > .filter-bar > input[type="search"] {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    #deliveryTabAddress > .filter-bar > input[type="date"],
    #deliveryTabShipment > .filter-bar > input[type="date"] {
        flex: 1 1 calc(50% - 3px) !important;
        min-width: 0 !important;
        width: auto !important;
        padding: 0 8px !important;
    }
    #deliveryTabAddress > .filter-bar > span,
    #deliveryTabShipment > .filter-bar > span {
        display: none !important;
    }
    #deliveryTabAddress > .filter-bar > button,
    #deliveryTabShipment > .filter-bar > button,
    #deliveryTabAddress > .filter-bar > .btn-confirm,
    #deliveryTabShipment > .filter-bar > .btn-confirm,
    #deliveryTabAddress > .filter-bar > .btn-add,
    #deliveryTabShipment > .filter-bar > .btn-add {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        white-space: nowrap !important;
    }
    /* 우측 액션 래퍼(가져오기+내보내기+주소추가) 한 줄, 내부 버튼 균등 분배 */
    #deliveryTabAddress > .filter-bar > div[style*="margin-left"],
    #deliveryTabShipment > .filter-bar > div[style*="margin-left"] {
        flex: 1 1 100% !important;
        margin-left: 0 !important;
        width: 100% !important;
        display: flex !important;
        gap: 6px !important;
    }
    #deliveryTabAddress > .filter-bar > div[style*="margin-left"] > button,
    #deliveryTabShipment > .filter-bar > div[style*="margin-left"] > button {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }
    /* 택배발송: HTML 소스 순서가 셀렉터+날짜+날짜+조회+내보내기+발송작성 으로 통일됨 (delivery.html 직접 수정) */

    /* 그 외 모달은 가로 배치 유지 */
    .modal-content .form-row {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: visible !important;
    }
    .modal-content .form-row .form-group {
        flex: 1 !important;
        width: auto !important;
    }
    .modal-content button {
        min-height: unset !important;
        min-width: unset !important;
    }
    /* 모달 외부 폼: 원본 크기 유지, 넘치면 스크롤 */
    .form-row {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }
    .form-section {
        padding: 12px !important;
        overflow-x: auto;
    }
    /* 모달 하단 버튼 고정 */
    .modal-buttons-sticky,
    .modal-content > div:last-child:has(button) {
        position: sticky;
        bottom: 0;
        padding: 8px;
        background: var(--surface);
        z-index: 10;
    }
    .modal-buttons-sticky button {
        flex: 1 1 0 !important;
        font-size: 17px !important;
        padding: 10px 6px !important;
        min-height: 44px !important;
        text-align: center !important;
    }
    /* 미리보기 모달 하단 버튼 (모바일): grid 2열 + 텍스트 길면 2줄 자동 줄바꿈
       - .modal-content.modal-preview .preview-actions-sticky 인라인 규칙(specificity 0,3,0)을
         이기기 위해 동일 selector로 grid를 강제. */
    .preview-actions-sticky,
    .modal-content.modal-preview .preview-actions-sticky {
        padding: 10px !important;
        gap: 6px !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }
    .preview-actions-sticky button,
    .modal-content.modal-preview .preview-actions-sticky button {
        flex: unset !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        /* 한 줄에 안 들어가면 자연스럽게 두 줄로 — 글자 잘림 방지 */
        white-space: normal !important;
        word-break: keep-all !important;       /* 한국어 단어 보존 */
        overflow-wrap: break-word !important;  /* 영문 PDF·이메일 등 긴 단어 폴백 */
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.2 !important;
        font-size: 15px !important;
        min-height: 44px !important;
        height: auto !important;               /* 두 줄일 때 높이 확장 허용 */
        padding: 6px 4px !important;
        text-align: center !important;
    }

    /* ===== 글로벌 앱모달 카드 스타일 ===== */
    /* 모든 모달의 modal-body 패딩 */
    .modal .modal-body {
        padding: 12px !important;
    }
    /* form-section → 카드 컨테이너 */
    .modal .form-section {
        margin-bottom: 16px !important;
        padding: 12px !important;
        background: var(--surface) !important;
        border-radius: 0 !important;
        border: 1px solid var(--light-border) !important;
    }
    /* 섹션 제목 (h4) */
    .modal .form-section h4 {
        font-size: 17px !important;
        font-weight: 700;
        margin-bottom: 8px !important;
    }
    /* form-row → 세로 스택 */
    .modal .form-section > .form-row {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        overflow-x: visible !important;
    }
    /* form-group → 가로 라벨-값 배치 + 구분선 */
    .modal .form-section > .form-row > .form-group,
    .modal .form-section > .form-group {
        display: flex !important;
        flex-direction: row !important;
        flex: unset !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 0 !important;
        padding: 7px 0 !important;
        border-bottom: 1px solid var(--light-border) !important;
        width: 100% !important;
    }
    /* 마지막 항목 구분선 제거 */
    .modal .form-section > .form-row:last-child > .form-group:last-child,
    .modal .form-section > .form-group:last-child {
        border-bottom: none !important;
    }
    /* 라벨: 고정 80px, 뮤트 색상 (obt-toggle 자체는 값 영역이므로 제외) */
    .modal .form-section .form-group > label:not(.obt-toggle) {
        display: block !important;
        flex: 0 0 80px !important;
        margin-bottom: 0 !important;
        font-size: 17px !important;
        color: var(--text-muted) !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
    }
    /* obt-toggle: 값 영역으로 flex:1 확보 (라벨 80px 매처에서 제외되므로 원래 패딩/배경 유지) */
    .modal .form-section .form-group > label.obt-toggle {
        flex: 1 !important;
        min-width: 0 !important;
    }
    /* 값 (div): flex-1, 말줄임 */
    .modal .form-section .form-group > div:not(.form-row):not(.form-group):not(.select-with-button) {
        flex: 1 !important;
        font-size: 17px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        min-width: 0 !important;
    }
    /* 긴 텍스트(flex:1 전체폭 form-group) 줄바꿈 허용 */
    .modal .form-section .form-group[style*="flex:1"] > div,
    .modal .form-section .form-group[style*="flex: 1"] > div {
        white-space: normal !important;
        word-break: break-word !important;
    }
    /* 폼 입력 요소: flex-1 */
    .modal .form-section .form-group > input:not([type="radio"]):not([type="checkbox"]),
    .modal .form-section .form-group > select,
    .modal .form-section .form-group > textarea {
        flex: 1 !important;
        min-width: 0 !important;
    }
    .modal .form-section .form-group > .select-with-button {
        flex: 1 !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        overflow: visible !important;
    }
    .modal .form-section .form-group > .select-with-button > input[type="text"] {
        flex: 1 !important;
        min-width: 0 !important;
    }
    .modal .form-section .form-group > .select-with-button > button {
        flex: none !important;
        padding: 6px 10px !important;
        white-space: nowrap !important;
        font-size: 17px !important;
    }
    /* 파일 첨부 영역: 모바일 줄바꿈 허용 */
    .modal .form-section > div:has(input[type="file"]) {
        flex-wrap: wrap !important;
    }
    .modal .form-section > div:has(input[type="file"]) > input[type="file"] {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        font-size: 17px !important;
    }
    .modal .form-section .form-group:has(input[type="file"]) {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
    }
    .modal .form-section .form-group:has(input[type="file"]) > input[type="file"] {
        flex: 1 1 calc(100% - 88px) !important;
        min-width: 0 !important;
        font-size: 17px !important;
    }
    /* 모달 내 테이블 앱 스타일 */
    .modal .form-section .data-table,
    .modal .form-section table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        border-radius: 0;
        overflow: hidden;
        border: 1px solid var(--border-color);
    }
    .modal .form-section .data-table th,
    .modal .form-section table th {
        font-size: 17px !important;
        padding: 8px 6px !important;
        background: var(--surface) !important;
        white-space: nowrap;
    }
    .modal .form-section .data-table td,
    .modal .form-section table td {
        font-size: 17px !important;
        padding: 8px 6px !important;
        border-bottom: 1px solid var(--light-border);
    }
    /* btn-sm 터치 최적화 */
    .modal .btn-sm {
        font-size: 17px !important;
        padding: 8px 14px !important;
        min-height: 44px;
    }

    /* 결재 모달: 세로 스택 + 스크롤 */
    .modal-content.modal-approval-fullscreen {
        height: auto !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    .approval-split-container {
        flex-direction: column !important;
        overflow: visible !important;
    }
    .approval-split-left {
        width: 100% !important;
        min-width: 0 !important;
        max-height: 50vh;
        overflow-y: auto !important;
        flex-shrink: 0;
        padding: 10px !important;
    }
    .approval-split-left .a4-page {
        zoom: 0.4;
    }
    .approval-split-right {
        width: 100% !important;
        min-width: 0 !important;
        border-left: none !important;
        border-top: 2px solid var(--light-border);
        padding: 15px !important;
    }
    /* A4 미리보기 축소 (zoom 방식: 레이아웃 크기도 축소) */
    .a4-container {
        padding: 4px !important;
        overflow: hidden;
    }
    .a4-page {
        width: 210mm !important;
        zoom: 0.40;
    }
    /* 핀치 줌 시 모달 전체를 transform → 레이아웃 불변 */
    .modal-content[data-zoom] {
        will-change: transform;
    }

    /* 버튼 그룹 */
    .btn-group, .action-buttons {
        flex-wrap: wrap;
        gap: 4px;
    }

    /* 알림 배지 */
    .unread-badge { font-size: 17px; padding: 1px 5px; }

    /* 서브탭 메뉴 */
    .sub-tab-menu {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 -8px;
        padding: 0 8px;
    }
    .sub-tab-menu::-webkit-scrollbar { display: none; }
    .sub-tab-btn {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 17px;
        padding: 6px 10px;
    }
}

/* ==================== Phase 1: 로그인 + 대시보드 ==================== */
@media (max-width: 768px) {
    /* 로그인 패널 */
    .login-panel {
        width: 100% !important;
        min-width: unset !important;
        max-width: unset !important;
        padding: 20px !important;
    }
    .login-panel-inner {
        max-width: 100% !important;
        padding: 0 10px !important;
    }
    .login-bg {
        display: none;
    }
    .login-box {
        width: calc(100vw - 32px) !important;
        max-width: 400px !important;
        padding: 24px !important;
        margin: 0 auto;
    }
    .login-box input {
        width: 100% !important;
        font-size: 17px !important;
    }
    .login-box button {
        width: 100% !important;
        height: 48px !important;
    }
    .login-logo h1 {
        font-size: 22px !important;
    }

    /* 대시보드 */
    .dash-container {
        max-width: 100% !important;
        padding: 0 12px !important;
    }
    .dash-urgent-zone {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .dash-urgent-zone::-webkit-scrollbar { display: none; }
    .dash-work-board {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .dash-trends {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .dash-section {
        margin-bottom: 12px !important;
    }
}

@media (max-width: 480px) {
    /* 헤더 h1: "OBT" 축약 표시 */
    .header h1 {
        font-size: 0 !important;
        letter-spacing: 0 !important;
        flex: 0 0 auto !important;
    }
    .header h1::before {
        content: 'OBT';
        font-size: 24px;
        font-weight: 700;
    }
    #currentUser {
        max-width: 180px;
    }
}

/* ==================== Phase 2: 결재 + 문서관리 ==================== */
@media (max-width: 768px) {
    /* 견적서/발주서 당사자: 원본 유지, 스크롤 */
    .quotation-parties {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* 결재선 모달 */
    #approvalLineModal .modal-content {
        width: 95vw !important;
    }
    /* 결재선 출처 카드: 모바일에서 1열 세로 스택 */
    #approvalSourceCards {
        grid-template-columns: 1fr !important;
    }
    /* 빈 상태 클릭 placeholder: 모바일 터치 타겟 */
    .approval-group-empty-clickable {
        min-height: 56px;
        padding: 18px !important;
    }

    /* A4 미리보기 (Phase 0에서 축소/스크롤 처리) */

    /* 문서관리 4탭 */
    .doc-tab-menu {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
        margin: 0 -8px;
        padding: 0 8px;
    }
    .doc-tab-menu::-webkit-scrollbar { display: none; }

    /* 통계 그리드: item-stats-grid로 통합 처리 */

    /* 결재 상태별 아이콘 텍스트: 원본 유지 */
}

/* ==================== Phase 3: 거래처 + 품목 + 재고 ==================== */
@media (max-width: 768px) {
    /* 거래처/품목: 부모 스크롤 */

    /* 재고 카테고리 탭 */
    .inv-category-tabs,
    .inventory-tabs {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
        margin: 0 -8px;
        padding: 0 8px;
    }
    .inv-category-tabs::-webkit-scrollbar,
    .inventory-tabs::-webkit-scrollbar { display: none; }

    /* 검색/필터 바: 원본 1줄 유지, 스크롤 */
    .filter-bar, .search-bar, .toolbar {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .filter-bar > *, .search-bar > *, .toolbar > * {
        flex-shrink: 0;
    }

    /* 카드형 아이템 그리드: 원본 유지, 스크롤 */
    .item-cards-grid,
    .card-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 480px) {
    /* 필터바: 768px 규칙 유지 (원본 1줄 스크롤) */
}


/* ==================== Phase 4: 이메일 + 메신저 ==================== */
/* 데스크탑과 동일 레이아웃 유지 (min-width:1560px 가로스크롤) */
/* 캔버스/회의모드만 모바일 대응 */
@media (max-width: 768px) {
    /* 모바일: 가로모드에서만 채팅 숨김 (세로모드는 카카오톡 스타일로 하단 표시) */
    body.meeting-landscape-mode .messenger-container.canvas-mode .messenger-chat-area {
        display: none !important;
    }
    .messenger-container.canvas-mode .messenger-canvas-area {
        width: 100% !important;
    }
    .canvas-toolbar {
        flex-wrap: wrap;
        gap: 2px;
    }
    /* voice-panel 크기: Phase 7에서 모바일 수평바로 재정의 */
}

/* ==================== Phase 5: 일정관리 (간트 + 캘린더) ==================== */
@media (max-width: 768px) {
    /* 캘린더 */
    .calendar-container {
        overflow-x: auto;
    }
    .calendar-grid {
        min-width: 320px;
    }
    .calendar-cell {
        min-height: 60px;
        padding: 2px;
    }
    /* 캘린더 폰트: 원본 유지 */
    /* 요일 약어 */
    .cal-day-full { display: none; }
    .cal-day-short { display: inline; }

    /* 캘린더 뷰 토글 */
    .calendar-view-toggle {
        flex-wrap: wrap;
        gap: 4px;
    }

    /* 간트 차트: 프로젝트 상세 영역 */
    .gantt-back-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .gantt-back-row .gantt-project-title {
        font-size: 17px !important;
        margin: 0 !important;
    }
    .gantt-back-row .gantt-back-row-btns {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
        margin-left: 0 !important;
    }
    .gantt-back-row .gantt-back-row-btns button {
        font-size: 17px !important;
        min-height: 44px;
        padding: 8px 4px !important;
        white-space: nowrap;
    }
    /* 간트 차트: 데스크탑 그대로 + 가로스크롤만 추가 */
    [id$="GanttContainer"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .gantt-wrapper {
        min-width: max-content !important;
    }
    /* 간트 요약바: 모바일 축소 */
    .gantt-summary-bar {
        font-size: 13px !important;
        padding: 6px 10px !important;
    }
    .gantt-sum-row {
        gap: 6px !important;
    }
    .gantt-sum-label {
        min-width: 60px !important;
        font-size: 13px !important;
    }
    .gantt-sum-days {
        font-size: 12px !important;
    }
    /* 근본 수정: 간트 내부를 모바일 글로벌 스타일에서 완전 제외
       → 체크박스 24px, 폰트 17px, 버튼 44px 등이 간트 셀을 왜곡하는 문제 해결 */
    .gantt-wrapper input,
    .gantt-wrapper select,
    .gantt-wrapper textarea,
    .gantt-wrapper button,
    .gantt-wrapper a {
        font-size: 17px !important;
        min-height: 0 !important;
        min-width: 0 !important;
    }
    .gantt-wrapper input[type="checkbox"] {
        -webkit-appearance: checkbox !important;
        appearance: checkbox !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: initial !important;
        border-radius: 0 !important;
        background: initial !important;
        position: static !important;
        transition: none !important;
    }
    .gantt-wrapper input[type="checkbox"]:checked {
        background: initial !important;
        border-color: initial !important;
    }
    .gantt-wrapper input[type="checkbox"]::after,
    .gantt-wrapper input[type="checkbox"]:checked::after {
        content: none !important;
        display: none !important;
    }
    /* 간트 폰트: 원본 유지 */

    /* 코팅관리: 작업 정보 카드 원본 유지 + 가로스크롤 */
    #coatingDailyOrderInfo,
    #coatingShipOrderInfo {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #coatingDailyOrderInfo > div[style*="grid"],
    #coatingShipOrderInfo > div[style*="grid"] {
        min-width: 600px;
    }
    #coatingDailyOrderInfo > div[style*="grid"] > div,
    #coatingShipOrderInfo > div[style*="grid"] > div {
        white-space: nowrap;
    }

    /* 코팅관리: 작업 상세 A4 미리보기 모달 모바일 최적화 (eq-card-* 패턴 공용) */
    #coatingDetailModal .modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
    }
    /* A4 페이지: 모바일 가로폭 맞춤 */
    #coatingDetailModal .a4-page {
        width: 100% !important;
        min-width: 0 !important;
        padding: 12px !important;
    }
    /* 진행률 바: 전체 너비 사용 */
    #coatingDetailModal .coating-progress-bar {
        max-width: 100% !important;
    }
    /* 미리보기 표 가독성 */
    #coatingDetailModal .eq-card-table th,
    #coatingDetailModal .eq-card-table td,
    #coatingDetailModal .eq-card-info-table th,
    #coatingDetailModal .eq-card-info-table td {
        font-size: 12pt !important;
        word-break: break-all;
    }
    /* 하단 버튼 모바일 터치 대응 */
    #coatingDetailModal .preview-actions-sticky button {
        min-height: 44px;
        font-size: 17px !important;
        flex: 1;
    }

    /* 코팅관리: 작업 등록/수정 모달 모바일 최적화 */
    /* select-with-button 래핑은 제네릭 룰(.modal .form-group > .select-with-button)에서 처리 */
    #coatingOrderModal .form-section h4,
    #coatingOrderModal label {
        font-size: 17px !important;
    }
    #coatingOrderModal input,
    #coatingOrderModal select,
    #coatingOrderModal textarea {
        font-size: 17px !important;
    }
    #coatingOrderModal .modal-buttons button {
        min-height: 44px;
        font-size: 17px !important;
        flex: 1;
    }

    /* 빠른 일정 등록 모달 모바일 최적화 */
    #scheduleQuickEventModal .modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
    }
    #scheduleQuickEventModal label,
    #scheduleQuickEventModal input,
    #scheduleQuickEventModal textarea {
        font-size: 17px !important;
    }
    #scheduleQuickEventModal .modal-buttons button {
        min-height: 44px;
        font-size: 17px !important;
    }

    /* 템플릿 수정 모달 — 전체화면, 데스크탑 레이아웃 유지, 양방향 스크롤
       (testDetailModal/evalDetailModal 동일 패턴, 실제 id는 scTemplateEditModal) */
    #scTemplateEditModal {
        padding: 0 !important;
        overflow: hidden !important;
    }
    #scTemplateEditModal .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    #scTemplateEditModal .modal-header {
        flex-shrink: 0 !important;
        padding: 12px 16px !important;
    }
    #scTemplateEditModal .modal-body {
        flex: 1 1 0 !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 0 !important;
    }
    /* 데스크탑 레이아웃 유지 — min-width로 가로 스크롤 유발 */
    #scTemplateEditModal .tmpl-edit-info,
    #scTemplateEditModal .tmpl-edit-toolbar,
    #scTemplateEditModal .tmpl-edit-table-wrap {
        min-width: 900px !important;
    }
    /* 내부 스크롤 제거 — modal-body가 단일 스크롤 컨테이너 */
    #scTemplateEditModal .tmpl-edit-table-wrap {
        max-height: none !important;
        overflow: visible !important;
    }
    /* 체크박스 컬럼 확장 — 24×24+마진4 = 32px 필요, 기본 30px 좁아 다음 셀로 넘침 */
    #scTemplateEditModal .data-table th:first-child,
    #scTemplateEditModal .data-table td:first-child {
        width: 44px !important;
        min-width: 44px !important;
        padding: 4px !important;
        text-align: center !important;
    }
    /* 셀 패딩 축소 — 모바일 기본 td:12px가 좁은 컬럼(70/90px)을 터뜨림 방지 */
    #scTemplateEditModal .data-table th,
    #scTemplateEditModal .data-table td {
        padding: 6px 8px !important;
    }
    #scTemplateEditModal .modal-buttons {
        flex-shrink: 0 !important;
        position: static !important;
        margin: 0 !important;
        padding: 10px 12px !important;
    }

    /* 패럴린 설정 모달:
       modal-content = 95vw (화면 맞춤, 유일한 스크롤 컨테이너)
       settings-tab-content = min-width:900px (데스크탑 레이아웃 유지)
       → 폼+테이블이 같은 스크롤 안에서 한 번에 이동 */
    /* 패럴린 설정 모달: 데스크탑 1200px 레이아웃, 메뉴+콘텐츠 동일 너비 */
    #paryleneSettingsModal .settings-tab-content,
    #paryleneSettingsModal .sub-tab-menu {
        min-width: 1100px;
    }
    #paryleneSettingsModal .sub-tab-menu {
        overflow-x: visible !important;
    }

    /* 패럴린 모달: align-items:center → flex-start (콘텐츠가 뷰포트보다 클 때 상단 잘림 방지) */
    #paryleneCalcModal {
        align-items: flex-start !important;
    }
    #paryleneCalcModal .modal-header {
        flex-wrap: wrap;
        gap: 4px;
    }
    #paryleneCalcModal .modal-header h3 {
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* 패럴린 분할 레이아웃: 좌우 → 상하 변환, 가로스크롤 허용 */
    /* Grid max-content 컬럼: 모든 자식이 동일 너비, 배경 통일 */
    /* height:auto + max-height:100vh → 그리드 행이 콘텐츠 크기 유지 + 뷰포트 스크롤 */
    .parylene-fullscreen {
        display: grid !important;
        grid-template-columns: max-content;
        overflow: auto !important;
        padding: 8px !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: auto !important;
        max-height: 100vh !important;
        margin: 0 !important;
    }
    .parylene-split {
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
        gap: 12px;
    }
    .parylene-input-panel {
        overflow: visible !important;
        padding-right: 0 !important;
        max-height: none !important;
    }
    .parylene-input-panel table,
    .parylene-fullscreen table {
        table-layout: auto !important;
        white-space: normal !important;
    }
    .parylene-result-panel {
        min-height: 300px;
    }
    /* 하단 버튼: sticky 해제 (통합 스크롤에서 오작동 방지) */
    .parylene-fullscreen .modal-footer {
        position: static !important;
    }

    /* ============================================================
       이메일 설정 모달: 글로벌 .modal 카드 패턴(라벨 80px 좌측 가로배치) 무시 →
       전통적 수직 레이아웃 (라벨 위, 입력 아래) 강제 복원.
       글로벌 규칙들이 !important 라 모든 셀렉터에 더 높은 특이도 + !important 필요.
       ============================================================ */
    #emailSettingsModal .modal-content .form-section {
        padding: 14px !important;
        background: var(--surface) !important;
        border: 1px solid var(--light-border) !important;
    }
    #emailSettingsModal .modal-content .form-section h4 {
        font-size: 16px !important;
        font-weight: 700 !important;
        margin: 0 !important;
        line-height: 1.3 !important;
    }
    /* form-group: 수직 스택 복원 (글로벌 가로 flex 무효화) */
    #emailSettingsModal .modal-content .form-section .form-group,
    #emailSettingsModal .modal-content .form-section > .form-row > .form-group,
    #emailSettingsModal .modal-content .form-section > .form-group {
        display: block !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 0 !important;
        margin: 0 0 14px 0 !important;
        border-bottom: none !important;
        gap: 0 !important;
    }
    /* 라벨: 입력 위에 블록으로, 6px 간격 확보 */
    #emailSettingsModal .modal-content .form-section .form-group > label:not(.obt-toggle) {
        display: block !important;
        flex: none !important;
        width: auto !important;
        margin: 0 0 6px 0 !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: var(--text-primary) !important;
        line-height: 1.4 !important;
        white-space: normal !important;
    }
    /* 입력/선택/텍스트영역: 100% 폭 */
    #emailSettingsModal .modal-content .form-section .form-group > input:not([type="radio"]):not([type="checkbox"]),
    #emailSettingsModal .modal-content .form-section .form-group > select,
    #emailSettingsModal .modal-content .form-section .form-group > textarea,
    #emailSettingsModal .modal-content .form-section .form-group .form-control {
        flex: none !important;
        width: 100% !important;
        font-size: 16px !important;
    }
    /* 체크박스 라벨: input + 텍스트 한 줄 정렬, 라벨 자체는 vertical-center */
    #emailSettingsModal .modal-content .form-section .form-group > label:has(> input[type="checkbox"]) {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 0 !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
    }
    #emailSettingsModal .modal-content .form-section .form-group input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
        flex: 0 0 18px !important;
        flex-shrink: 0 !important;
    }
    /* form-row: 모바일에서 세로 스택 (이미 글로벌 적용 중이지만 gap 확보) */
    #emailSettingsModal .modal-content .form-section > .form-row {
        display: block !important;
        gap: 0 !important;
    }

    /* 섹션 헤더: h4(굵게) + 부제(작게) baseline 정렬, 좁으면 wrap 자연스럽게 */
    #emailSettingsModal .modal-content .form-section .settings-section-header {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: baseline !important;
        gap: 4px 10px !important;
        margin: 0 0 10px 0 !important;
        padding: 0 0 8px 0 !important;
        border-bottom: 1px solid var(--light-border) !important;
    }
    #emailSettingsModal .modal-content .form-section .settings-section-header h4 {
        margin: 0 !important;
        line-height: 1.3 !important;
        font-size: 16px !important;
    }
    #emailSettingsModal .modal-content .form-section .settings-section-header .text-muted {
        font-size: 12px !important;
        font-weight: 400 !important;
        line-height: 1.3 !important;
    }
    /* 섹션 설명 문구 */
    #emailSettingsModal .modal-content .form-section > p.text-muted {
        margin: 0 0 12px 0 !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    /* settings-actions: 가용 공간 분배 + 텍스트 줄바꿈 차단 */
    #emailSettingsModal .modal-content .settings-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }
    #emailSettingsModal .modal-content .settings-actions > button {
        flex: 1 1 auto !important;
        min-width: max-content !important;
        white-space: nowrap !important;
    }

    /* 설정 항목 (.settings-item): 모바일에서 액션 버튼 wrap 허용 */
    #emailSettingsModal .modal-content .settings-item {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    #emailSettingsModal .modal-content .settings-item-info {
        flex: 1 1 70% !important;
    }
    #emailSettingsModal .modal-content .settings-item-actions {
        flex: 0 0 auto !important;
        flex-wrap: wrap !important;
    }

    /* 탭 메뉴: 가로 스크롤 + scrollbar 숨김 */
    #emailSettingsModal .tab-menu {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
    }
    #emailSettingsModal .tab-menu::-webkit-scrollbar { display: none; }

    /* 닫기 sticky 버튼: 본문 끝에 정확히 붙도록 (음수 margin-bottom 무력화 + 배경 견고) */
    #emailSettingsModal .modal-buttons-sticky {
        margin-bottom: 0 !important;
        bottom: 0 !important;
        background: var(--surface) !important;
        z-index: 20 !important;
    }
}

/* ==================== Phase 6: 조직관리 + 공지 ==================== */
@media (max-width: 768px) {
    /* 권한 체크박스 테이블 */
    .perm-table-wrapper,
    .permission-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 조직관리 6탭 */
    .org-tab-menu {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
        margin: 0 -8px;
        padding: 0 8px;
    }
    .org-tab-menu::-webkit-scrollbar { display: none; }

    /* 부서/사용자: 원본 유지, 스크롤 */
    .org-layout,
    .org-split {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 권한 탭: Phase 8 통합 스크롤 사용 (min-width: 1560px)
       근본 원인: API가 admin 전용 → 비관리자에게 안내 메시지 표시 (JS에서 처리) */

    /* Quill 에디터 */
    .ql-editor {
        min-height: 150px;
    }
    /* ql-toolbar: Phase 0에서 처리 */

    /* 공지사항 */
    .notice-list-item {
        padding: 10px 8px;
    }
}

/* ==================== Phase 7: 문서모달 + 거래처 + 품목 + 재고 + 결재 추가 ==================== */
@media (max-width: 768px) {
    /* 10. 문서 모달: 품목 테이블 가로스크롤 */
    .modal-content table {
        min-width: 600px;
    }
    /* 수량/단가 숫자 키패드 */
    input[type="number"] {
        -moz-appearance: textfield;
    }
    /* Quill.js 에디터 높이 */
    .ql-editor {
        height: auto !important;
        min-height: 150px !important;
    }

    /* 11-13. 현황 카드: 원본 크기 유지, 가로 스크롤 */
    .item-stats-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .item-stat-card {
        min-width: 120px;
        flex: 0 0 auto;
    }
    /* 거래처 담당자 테이블 가로스크롤 */
    .contact-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 12. 품목 통계: 원본 유지 (위에서 처리) */
    /* 하위분류 그룹 헤더 줄바꿈 */
    .group-header-text,
    .subcategory-header {
        white-space: normal !important;
        word-break: break-word;
    }

    /* 13. 재고 관리: item-stats-grid로 통합 처리 */
    [id^="invTab"] table {
        min-width: 0;
    }
    /* 재고 관리 버튼: nowrap 해제 + 컴팩트 */
    [id^="invTab"] td:last-child {
        white-space: normal !important;
    }
    [id^="invTab"] td:last-child button {
        font-size: 17px;
        padding: 4px 8px;
        min-height: 30px;
        min-width: auto;
        margin: 1px;
    }

    /* 재고 상세 모달: 정보 테이블 4열→2열 리플로우 */
    #invDetailInfo table {
        min-width: 0 !important;
    }
    #invDetailInfo table tr {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    #invDetailInfo table td {
        box-sizing: border-box !important;
    }
    #invDetailInfo table td:nth-child(odd) {
        flex: 0 0 30% !important;
        max-width: 30% !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #invDetailInfo table td:nth-child(even) {
        flex: 0 0 70% !important;
        max-width: 70% !important;
    }
    /* 상세 모달: 모바일에서 이력 테이블 숨기고 카드 표시 */
    #invDetailModal .table-container {
        display: none !important;
    }
    #invDetailHistCards {
        display: block !important;
    }

    /* 14. 결재함 탭 */
    .approval-tabs {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
        margin: 0 -8px;
        padding: 0 8px;
    }
    .approval-tabs::-webkit-scrollbar { display: none; }
    /* 결재선 설정 모달 */
    .approval-group-section {
        margin-bottom: 8px;
    }
    /* 결재선 테이블 가로스크롤 */
    .approval-group-section table {
        min-width: 500px;
    }

    /* 15~16: 이메일/메신저 데스크탑과 동일 (Phase 4에서 제거) */

    /* 17. 회의 모드 모바일 — 줌 스타일 하단 컨트롤 바 */
    /* 데스크톱 canvas-header / voice-panel 숨김 → 모바일 전용 UI로 대체 */
    .messenger-canvas-area .canvas-header { display: none !important; }
    .messenger-canvas-area .voice-panel { display: none !important; }
    .guest-canvas-area .voice-panel,
    .guest-controls { display: none !important; }

    /* 모바일 상태바 + 하단 컨트롤 바 표시 */
    .meeting-mobile-status-bar { display: flex !important; }
    .meeting-bottom-bar { display: flex !important; }

    /* --- 상태바 (36px) — order:-1로 최상단 배치 --- */
    .meeting-mobile-status-bar {
        order: -1;
        position: relative;
        align-items: center;
        justify-content: center;
        padding: 0 12px;
        height: 36px;
        background: rgba(0,0,0,0.75);
        color: #fff;
        flex-shrink: 0;
        z-index: 8200;
    }
    .mmb-left {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .mmb-title {
        font-size: 17px;
        font-weight: 600;
    }
    .mmb-timer {
        font-size: 17px;
        color: #aaa;
        font-variant-numeric: tabular-nums;
    }
    .mmb-end-btn {
        background: #e53935;
        color: #fff;
        border: none;
        border-radius: 16px;
        padding: 4px 16px;
        font-size: 17px;
        font-weight: 600;
        cursor: pointer;
        min-height: 28px !important;
        min-width: auto !important;
    }

    /* --- 하단 컨트롤 바 (56px) — order:10으로 최하단 배치 --- */
    .meeting-bottom-bar {
        order: 10;
        align-items: center;
        justify-content: space-around;
        height: 56px;
        background: rgba(0,0,0,0.85);
        flex-shrink: 0;
        z-index: 8200;
        padding: 0 4px;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    /* 리뷰.md 프로토콜 #117 — visual ↔ click area sync.
       이전: width:56px 고정 + justify-content:space-around → 버튼 사이 빈 공간 + 라벨 overflow 로
             visual 마이크 버튼의 우측이 인접 버튼 click 영역. "마이크 왼쪽만 잘 됨" 회귀.
       수정: flex:1 로 컨테이너 균등 분할. label overflow ellipsis 로 visual 안 넘침. */
    .mbb-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: #ccc;
        cursor: pointer;
        flex: 1 1 0;
        max-width: 96px;
        height: 48px;
        border-radius: 8px;
        padding: 2px 4px;
        min-height: 48px !important;
        min-width: 48px !important;
        overflow: hidden;
    }
    .mbb-btn:active { background: rgba(255,255,255,0.1); }
    .mbb-btn.active { color: #4caf50; }
    /* 리뷰.md #115 — 권한 다이얼로그 진행 중 시각적 피드백 (클릭 즉시 반응) */
    .mbb-btn.mbb-pending { color: #ffa726; animation: mbb-pulse 1.2s ease-in-out infinite; }
    @keyframes mbb-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
    .mbb-btn.active-danger { color: #e53935; }
    .mbb-icon { font-size: 22px; line-height: 1.2; display: inline-flex; align-items: center; justify-content: center; }
    .mbb-icon svg { vertical-align: middle; }
    .mbb-label { font-size: 17px; line-height: 1.2; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .mmm-icon { display: inline-flex; align-items: center; width: 22px; }
    .mmm-icon svg { vertical-align: middle; }

    /* --- 캔버스 영역 레이아웃 (세로 정렬) --- */
    .messenger-canvas-area,
    .guest-canvas-area {
        flex-direction: column !important;
    }
    .canvas-body,
    .guest-canvas-body {
        flex: 1 !important;
        min-height: 0;
        overflow: hidden;
    }
    .canvas-wrapper {
        flex: 1;
        width: 100vw;
    }
    .canvas-wrapper canvas {
        width: auto !important;
        height: auto !important;
        max-width: 100%;
        max-height: 100%;
    }

    /* 캔버스 툴바: flow 내 배치 (fixed → relative) */
    .canvas-toolbar {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        z-index: 8100;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* #133: 테마 무관 고정 dark surface (데스크탑 SSOT 와 동일) */
        background: #2a2a2a;
        color: #f0f0f0;
        border-top: 1px solid rgba(255,255,255,0.12);
        padding: 4px 8px;
        flex-shrink: 0;
    }
    .canvas-toolbar button {
        flex-shrink: 0;
    }

    /* 카메라 그리드: 모바일 (grid-3 span 규칙 초기화 + 비디오 전체 표시) */
    .camera-grid-view {
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: none !important;
        grid-auto-rows: 1fr;
    }
    .camera-grid-view.grid-1 {
        grid-template-columns: 1fr !important;
    }
    .camera-grid-view.grid-3 .camera-tile:first-child {
        grid-row: auto !important;
    }
    .camera-tile {
        border-radius: 8px;
        min-height: 0;
    }
    .camera-tile video {
        object-fit: contain !important;
    }
    /* 화면 공유 뷰 */
    .screen-share-view video {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* --- 참여자 바텀시트 --- */
    .meeting-participants-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60vh;
        background: var(--surface, #1e1e1e);
        border-radius: 16px 16px 0 0;
        z-index: 8500;
        transform: translateY(100%);
        transition: transform 300ms ease;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .meeting-participants-sheet.open {
        display: flex !important;
        transform: translateY(0);
    }
    .mps-handle-bar {
        width: 40px;
        height: 4px;
        background: var(--text-muted, #666);
        border-radius: 2px;
        margin: 10px auto 6px;
        flex-shrink: 0;
    }
    .mps-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 16px 8px;
        font-size: 17px;
        font-weight: 600;
        color: var(--text-primary, #fff);
        flex-shrink: 0;
    }
    .mps-close {
        background: none;
        border: none;
        color: var(--text-primary, #fff);
        font-size: 22px;
        cursor: pointer;
        min-height: 36px !important;
        min-width: 36px !important;
    }
    .mps-list {
        flex: 1;
        overflow-y: auto;
        padding: 0 8px 16px;
    }
    /* 시트 내부 참여자 항목 세로 배치 */
    .mps-list .vp-item {
        flex-direction: row !important;
        align-items: center;
        padding: 8px 12px;
        border-bottom: 1px solid var(--light-border, #333);
    }
    .mps-list .vp-item .vp-level-bar { display: none; }

    /* --- 백드롭 --- */
    .meeting-sheet-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 8400;
    }
    .meeting-sheet-backdrop.active {
        display: block !important;
    }

    /* --- 더보기 메뉴 --- */
    .meeting-more-menu {
        position: fixed;
        bottom: 70px;
        right: 8px;
        background: var(--surface, #2a2a2a);
        border: 1px solid var(--light-border, #444);
        border-radius: 12px;
        z-index: 8500;
        min-width: 180px;
        padding: 6px 0;
        box-shadow: 0 4px 20px rgba(0,0,0,0.4);
        transform: scale(0.9) translateY(10px);
        opacity: 0;
        pointer-events: none;
        transition: transform 200ms ease, opacity 200ms ease;
    }
    .meeting-more-menu.open {
        display: block !important;
        transform: scale(1) translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
    .mmm-item {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        height: 44px;
        padding: 0 16px;
        background: none;
        border: none;
        color: var(--text-primary, #fff);
        font-size: 17px;
        cursor: pointer;
        text-align: left;
        min-height: 44px !important;
        min-width: auto !important;
    }
    .mmm-item:active { background: rgba(255,255,255,0.08); }
    /* #131 — 더보기 마이크/카메라 ON / 공유 ON 시각 피드백 */
    .mmm-item.active { color: #4caf50; }
    .mmm-item.active-danger { color: #e53935; }

    /* --- 오버레이 토글 (탭하면 UI 숨김/표시) --- */
    .meeting-overlay-hidden .meeting-mobile-status-bar {
        opacity: 0;
        transform: translateY(-100%);
        pointer-events: none;
        transition: opacity 300ms ease, transform 300ms ease;
    }
    .meeting-overlay-hidden .meeting-bottom-bar,
    .meeting-overlay-hidden .canvas-toolbar {
        opacity: 0;
        transform: translateY(100%);
        pointer-events: none;
        transition: opacity 300ms ease, transform 300ms ease;
    }
    /* 전환 애니메이션 (보이는 상태) */
    .meeting-mobile-status-bar,
    .meeting-bottom-bar,
    .canvas-toolbar {
        transition: opacity 300ms ease, transform 300ms ease;
    }

    /* 채팅 패널: 기본 숨김, 토글시 슬라이드 업 */
    .canvas-chat-panel {
        position: fixed !important;
        bottom: 0;
        left: 0;
        width: 100vw !important;
        height: 50vh;
        z-index: 8100;
        transform: translateY(100%);
        transition: transform 300ms ease;
    }
    .canvas-chat-panel.open {
        transform: translateY(0);
    }
    /* 핀치 줌 */
    .canvas-wrapper {
        touch-action: pan-x pan-y pinch-zoom;
    }

    /* 19. 일정관리 캘린더 */
    .calendar-grid .calendar-cell {
        min-height: 60px;
    }
    /* 간트 차트 좌측 패널 */
    .gantt-left-panel {
        width: 200px !important;
        min-width: 200px !important;
    }

    /* 20. 코팅 생산관리: Phase 5에서 처리 */

    /* 21. 패럴린 단가 계산기: Phase 5에서 상세 처리 */
    /* 공정설정/기초데이터 테이블 가로스크롤 */
    .parylene-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* 트레이 배치 시각화 */
    .tray-canvas {
        max-width: 100%;
    }
    /* 기초데이터 5탭 가로스크롤 */
    .parylene-base-tabs {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
        margin: 0 -8px;
        padding: 0 8px;
    }
    .parylene-base-tabs::-webkit-scrollbar { display: none; }

    /* 22. 공지사항 - 원본 테이블 유지, 스크롤 */
    .notice-filter-bar {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .notice-filter-bar > * {
        flex-shrink: 0;
    }

    /* 23. 프로젝트 모달: form-row 세로 스택 + 발주처 select-with-button 리플로우 */
    #scheduleProjectModal .modal-content {
        width: 95vw !important;
        max-width: 95vw !important;
    }
    #scheduleProjectModal .form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }
    #scheduleProjectModal .form-row .form-group {
        width: 100% !important;
        flex: unset !important;
    }
    #scheduleProjectModal .select-with-button {
        flex-wrap: wrap;
        gap: 6px;
    }
    #scheduleProjectModal .select-with-button input[type="text"] {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
    #scheduleProjectModal .form-section h4,
    #scheduleProjectModal label {
        font-size: 17px !important;
    }
    #scheduleProjectModal input,
    #scheduleProjectModal select,
    #scheduleProjectModal textarea {
        font-size: 17px !important;
    }
    #scheduleProjectModal .select-with-button button {
        font-size: 17px !important;
        min-height: 44px;
    }
    #scheduleProjectModal .modal-buttons button {
        min-height: 44px;
        font-size: 17px !important;
        flex: 1;
    }

    /* 24. 인터랙티브 어시스턴트 */
    .obt-assist-tooltip {
        max-width: calc(100vw - 24px) !important;
        width: calc(100vw - 24px) !important;
    }
    .obt-assist-highlight {
        pointer-events: none;
    }
    .obt-assist-help-btn {
        font-size: 14px !important;
        padding: 4px 8px !important;
        margin-right: 0 !important;
        /* 터치 타겟 44px 글로벌 규칙 해제 (시각 크기는 줄이되 hit area는 유지) */
        min-width: 0 !important;
        min-height: 32px !important;
        height: 32px !important;
    }
    /* modal-header 내부: close 버튼과 겹치지 않도록 우측 여백 확보 */
    .modal-header .obt-assist-help-btn,
    .modal-header.has-obt-assist .obt-assist-help-btn {
        right: 52px !important;
    }
    .obt-assist-help-btn.first-use::after {
        font-size: 14px !important;
    }
    /* :has() 미지원 WebView에서 h3 오버플로 방지 — JS 클래스 토글 경로 */
    .modal-header.has-obt-assist h3 {
        padding-right: 110px !important;
    }

    /* 25. A4 미리보기/인쇄 */
    .print-btn-mobile {
        display: none;
    }

    /* 26. 성능/UX */
    * {
        -webkit-overflow-scrolling: touch;
    }
    /* iOS safe area */
    .modal-content {
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
    }
    .canvas-toolbar {
        padding-bottom: calc(4px + env(safe-area-inset-bottom, 0));
    }
}

@media (max-width: 480px) {
    /* 17. 회의모드 480px */
    /* 더보기 메뉴 full-width */
    .meeting-more-menu {
        left: 8px;
        right: 8px;
        min-width: auto;
    }
    /* 간트 좌측 패널 */
    .gantt-left-panel {
        width: 150px !important;
        min-width: 150px !important;
    }
}

/* ==================== 반응형 레이아웃: 유동 컨테이너 + 컴포넌트별 대응 ==================== */
@media (max-width: 768px) {
  /* pageContainer: 가로스크롤 제거, 유동 폭 */
  #pageContainer {
    overflow-x: hidden;
    width: 100%;
  }

  /* 통계 그리드: 2×2 컴팩트 (inline style override) */
  .item-stats-grid[style],
  .client-stats-grid[style],
  .inventory-stats-grid[style],
  .coating-stats-grid[style],
  .document-stats-grid[style],
  .approval-stats[style],
  .stats-grid[style] {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    overflow-x: visible !important;
  }
  .item-stats-grid .item-stat-card,
  .client-stats-grid .stat-card,
  .stats-grid .stat-card {
    padding: 8px 6px !important;
    min-width: 0 !important;
  }
  .item-stats-grid .item-stat-count,
  .stats-grid .stat-count {
    font-size: 20px !important;
  }
  .item-stats-grid .item-stat-label,
  .stats-grid .stat-label {
    font-size: 13px !important;
  }

  /* 필터/검색바: 컴팩트 wrap — 요소 2개씩 한 줄 배치 */
  .filter-bar, .search-bar, .toolbar, .notice-filter-bar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 0 !important;
    margin-bottom: 6px !important;
    white-space: normal !important;
    overflow-x: visible !important;
  }
  .filter-bar > *, .search-bar > *, .toolbar > * {
    flex-shrink: 1 !important;
  }
  /* 필터바 전체 요소 높이 통일 (44px 터치 타겟) */
  .filter-bar > select,
  .filter-bar > input,
  .filter-bar > button,
  .search-bar > select,
  .search-bar > input,
  .search-bar > button {
    height: 44px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    font-size: 17px !important;
    padding: 0 10px !important;
  }
  /* select, input: 50% 너비로 2개씩 배치 (직접 자식만)
     min-width 를 가독성 한계로 두어, 공간 부족 시 축소 대신 다음 줄로 wrap 되게 함 */
  .filter-bar > select, .search-bar > select {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 110px !important;
  }
  .filter-bar > input[type="text"],
  .filter-bar > input[type="search"],
  .search-bar > input[type="text"],
  .search-bar > input[type="search"] {
    flex: 1 1 calc(50% - 6px) !important;
    min-width: 140px !important;
  }
  /* 날짜는 YYYY-MM-DD + 캘린더 아이콘 표시 폭 보장 */
  .filter-bar > input[type="date"] {
    flex: 0 1 auto !important;
    min-width: 130px !important;
    width: auto !important;
  }
  /* 날짜 사이 ~ 구분자 숨기기 (공간 절약) */
  .filter-bar > span[style*="text-muted"] {
    display: none !important;
  }
  /* 버튼: 자동 크기로 한 줄에 나란히 */
  .filter-bar > button,
  .filter-bar > .btn-add,
  .filter-bar > .btn-confirm,
  .filter-bar > .btn-cancel {
    flex: 0 0 auto !important;
    white-space: nowrap;
  }
  /* 공지사항 3버튼(검색/내보내기/공지작성) 균등 1/3 분배 */
  #noticeSearchInput ~ .btn-confirm,
  #noticeSearchInput ~ .btn-add {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding: 0 4px !important;
  }
  /* 공지사항 3버튼(검색/내보내기/공지작성) 균등 1/3 분배 */
  #noticeSearchInput ~ .btn-confirm,
  #noticeSearchInput ~ .btn-add {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding: 0 4px !important;
  }
  /* 우측 margin-left:auto div (액션 버튼 그룹) → 전체 너비 */
  .filter-bar > div[style*="margin-left:auto"] {
    margin-left: 0 !important;
    width: 100%;
    display: flex !important;
    gap: 6px;
  }
  .filter-bar > div[style*="margin-left:auto"] > button {
    flex: 1;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 10px !important;
    font-size: 17px !important;
  }

  /* ==== 생산운영(코팅·QMS·설비) 표준 모바일 필터바 레이아웃 ====
     사용자 정책 (2026-05-03):
     - 셀렉터: 각자 한 줄 (full row, 한 개씩)
     - 텍스트 입력: 한 줄
     - 날짜 두 개: 같은 줄에 반반(50/50)
     - 검색/조회 단독 버튼: 한 줄
     - 우측 액션 래퍼(내보내기+등록): 한 줄, 내부 버튼은 균등 배분 */
  #mfgProduction .filter-bar,
  #mfgQuality .filter-bar,
  #mfgEquipment .filter-bar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 0 !important;
  }
  #mfgProduction .filter-bar > select,
  #mfgQuality .filter-bar > select,
  #mfgEquipment .filter-bar > select {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  #mfgProduction .filter-bar > input[type="text"],
  #mfgProduction .filter-bar > input[type="search"],
  #mfgQuality .filter-bar > input[type="text"],
  #mfgQuality .filter-bar > input[type="search"],
  #mfgEquipment .filter-bar > input[type="text"],
  #mfgEquipment .filter-bar > input[type="search"] {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  #mfgProduction .filter-bar > input[type="date"],
  #mfgQuality .filter-bar > input[type="date"],
  #mfgEquipment .filter-bar > input[type="date"] {
    flex: 1 1 calc(50% - 3px) !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 0 8px !important;
  }
  #mfgProduction .filter-bar > button,
  #mfgQuality .filter-bar > button,
  #mfgEquipment .filter-bar > button {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  #mfgProduction .filter-bar > label,
  #mfgQuality .filter-bar > label,
  #mfgEquipment .filter-bar > label {
    flex: 1 1 100% !important;
  }
  /* 우측 액션 래퍼(margin-left:auto)는 한 줄 차지, 내부 버튼 균등 배분 */
  #mfgProduction .filter-bar > div[style*="margin-left"],
  #mfgQuality .filter-bar > div[style*="margin-left"],
  #mfgEquipment .filter-bar > div[style*="margin-left"] {
    flex: 1 1 100% !important;
    margin-left: 0 !important;
    width: 100%;
    display: flex !important;
    gap: 6px !important;
  }
  #mfgProduction .filter-bar > div[style*="margin-left"] > button,
  #mfgQuality .filter-bar > div[style*="margin-left"] > button,
  #mfgEquipment .filter-bar > div[style*="margin-left"] > button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  /* ~ 구분자: 날짜가 같은 줄에 50/50 으로 배치되므로 표시 (정상 inline) */
  #mfgProduction .filter-bar > span,
  #mfgQuality .filter-bar > span,
  #mfgEquipment .filter-bar > span {
    display: none !important;
  }

  /* ==== 품목 관리 카테고리 탭 + 거래처 목록 탭 ====
     사용자 정책 (2026-05-03 앱만): 검색 입력 한 줄, 검색 버튼 아래 한 줄 */
  #itemTabMachine > .filter-bar > input[type="text"],
  #itemTabMaterial > .filter-bar > input[type="text"],
  #itemTabParts > .filter-bar > input[type="text"],
  #itemTabService > .filter-bar > input[type="text"],
  #itemTabCoating > .filter-bar > input[type="text"],
  #clientTabList > .filter-bar > input[type="text"] {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  #itemTabMachine > .filter-bar > .btn-confirm,
  #itemTabMaterial > .filter-bar > .btn-confirm,
  #itemTabParts > .filter-bar > .btn-confirm,
  #itemTabService > .filter-bar > .btn-confirm,
  #itemTabCoating > .filter-bar > .btn-confirm,
  #clientTabList > .filter-bar > .btn-confirm {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  /* 탭 메뉴: 가로 스크롤 (정당한 패턴) */
  .tab-menu, .sub-tab-menu, .doc-tab-menu,
  .inv-category-tabs, .inventory-tabs,
  .org-tab-menu, .approval-tabs, .parylene-base-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tab-menu::-webkit-scrollbar, .sub-tab-menu::-webkit-scrollbar,
  .doc-tab-menu::-webkit-scrollbar, .inv-category-tabs::-webkit-scrollbar,
  .inventory-tabs::-webkit-scrollbar, .org-tab-menu::-webkit-scrollbar,
  .approval-tabs::-webkit-scrollbar, .parylene-base-tabs::-webkit-scrollbar {
    display: none;
  }

  /* 폼 레이아웃: 단일 컬럼 */
  .form-row {
    flex-direction: column;
    gap: 8px;
  }
  .form-row > .form-group {
    width: 100%;
  }

  /* 조직관리 레이아웃 */
  .org-layout, .org-split, .parylene-split {
    flex-direction: column;
  }
  .org-layout > *, .org-split > *, .parylene-split > * {
    width: 100%;
    min-width: 0;
  }

  /* 조직관리: 사용자 테이블 이메일 짤림 방지 */
  #usersTableWrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  #usersTable th, #usersTable td {
    padding: 8px 6px !important;
    font-size: 17px !important;
    white-space: nowrap;
  }
  #usersTable td select {
    font-size: 17px !important;
  }

  /* 조직관리: 부서 목록 — 모바일 풀폭 + 카드 터치 타겟 강화 */
  .dept-list-wrap {
    max-width: none !important;
  }
  .dept-list {
    border-radius: 4px;
  }
  .dept-item {
    padding: 14px 16px !important;
    font-size: 17px !important;
    min-height: 52px;
    gap: 8px;
  }
  .dept-item .btn-sm {
    padding: 8px 14px !important;
    font-size: 15px !important;
    min-height: 40px;
  }

  /* 조직관리: 회사 직인 dropzone — 모바일 가독성 */
  #orgCompanyStampDropzone {
    padding: 22px 14px !important;
  }
  #orgCompanyStampDropzone .btn-confirm {
    padding: 10px 18px !important;
    font-size: 17px !important;
    min-height: 44px;
  }
  #orgCompanyStampDropzone span {
    display: block;
    margin-left: 0 !important;
    margin-top: 8px;
    font-size: 15px !important;
  }
  #orgCompanyStampPreviewList .notice-attach-item {
    padding: 12px !important;
    font-size: 16px;
  }
  #orgCompanyStampPreviewList .notice-attach-item .btn-sm {
    padding: 8px 14px !important;
    font-size: 15px !important;
    min-height: 40px;
  }

  /* 조직관리: 권한 테이블 모바일 최적화 */
  #deptPermsContainer table,
  #posPermsContainer table,
  #userPermsContainer table {
    table-layout: fixed;
    width: 100%;
  }
  #deptPermsContainer table td:first-child,
  #posPermsContainer table td:first-child,
  #userPermsContainer table td:first-child,
  #deptPermsContainer table th:first-child,
  #posPermsContainer table th:first-child,
  #userPermsContainer table th:first-child {
    text-align: left;
    word-break: keep-all;
    font-size: 17px;
    padding: 8px 6px;
  }
  #deptPermsContainer table td,
  #posPermsContainer table td,
  #userPermsContainer table td,
  #deptPermsContainer table th,
  #posPermsContainer table th,
  #userPermsContainer table th {
    padding: 8px 4px;
    font-size: 17px;
  }

  /* 견적서/발주서 parties 레이아웃 */
  .quotation-parties {
    flex-direction: column;
    gap: 12px;
  }
}

/* ==================== 필터바 앱 스타일: 모바일 검색 레이아웃 최적화 ==================== */
@media (max-width: 480px) {
    /* 공통: margin-left:auto 제거 (버튼/div 모두 — div는 기존 규칙이 처리) */
    .filter-bar > button[style*="margin-left:auto"],
    .filter-bar > .btn-add[style*="margin-left:auto"],
    .filter-bar > .btn-confirm[style*="margin-left:auto"] {
        margin-left: 0 !important;
    }

    /* --- 패턴A: select → 풀너비 한줄 --- */
    #clientTabList > .filter-bar > select,
    #clientTabLogs > .filter-bar > select,
    #deliveryTabAddress > .filter-bar > select,
    #coatingTabParylene > .filter-bar > select,
    [data-doc-tab="drafts"] > .filter-bar > select,
    [data-doc-tab="quotations"] > .filter-bar > select,
    [data-doc-tab="purchase-orders"] > .filter-bar > select,
    [data-doc-tab="transaction-statements"] > .filter-bar > select,
    [data-doc-tab="logs"] > .filter-bar > select,
    #itemTabLogs > .filter-bar > select,
    #invTabHistory > .filter-bar > select,
    #approvalMyRequestsSection > .filter-bar > select,
    #ctTabList > .filter-bar > select {
        flex: 1 1 100% !important;
        max-width: none !important;
    }

    /* --- 패턴B: 검색입력 + 검색버튼 같은줄 (date/추가버튼 없는 단순 패턴) ---
       #clientTabList, #deliveryTabAddress 는 768px 블록에서 풀너비 한 줄로 분리 처리됨 (2026-05-03) */
    #approvalMyRequestsSection > .filter-bar > input[type="text"],
    #invTabMaterial > .filter-bar > input[type="text"],
    #invTabParts > .filter-bar > input[type="text"],
    #invTabConsumable > .filter-bar > input[type="text"],
    #invTabPackaging > .filter-bar > input[type="text"],
    #invTabEtc > .filter-bar > input[type="text"] {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    /* --- 패턴C: 검색입력 풀너비 (date 범위 또는 다수 버튼이 있는 패턴) --- */
    #noticeSearchInput,
    #coatingTabParylene > .filter-bar > input[type="text"],
    [data-doc-tab="quotations"] > .filter-bar > input[type="text"],
    [data-doc-tab="purchase-orders"] > .filter-bar > input[type="text"],
    [data-doc-tab="drafts"] > .filter-bar > input[type="text"],
    [data-doc-tab="transaction-statements"] > .filter-bar > input[type="text"],
    [data-doc-tab="logs"] > .filter-bar > input[type="text"],
    #clientTabLogs > .filter-bar > input[type="text"],
    #itemTabLogs > .filter-bar > input[type="text"],
    #invTabHistory > .filter-bar > input[type="text"],
    #ctTabList > .filter-bar > input[type="text"] {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    /* --- 패턴D: 날짜 두 개 한 줄에 50/50 (생산운영 표준 패턴) --- */
    #clientTabLogs > .filter-bar > input[type="date"],
    #itemTabLogs > .filter-bar > input[type="date"],
    #invTabHistory > .filter-bar > input[type="date"],
    [data-doc-tab="logs"] > .filter-bar > input[type="date"],
    [data-doc-tab="quotations"] > .filter-bar > input[type="date"],
    [data-doc-tab="purchase-orders"] > .filter-bar > input[type="date"],
    [data-doc-tab="drafts"] > .filter-bar > input[type="date"],
    [data-doc-tab="transaction-statements"] > .filter-bar > input[type="date"],
    #coatingTabHistory > .filter-bar > input[type="date"] {
        flex: 1 1 calc(50% - 3px) !important;
        min-width: 0 !important;
        font-size: 17px !important;
        padding: 0 8px !important;
    }
    /* 검색 버튼: 한 줄 (생산운영 표준) */
    #clientTabLogs > .filter-bar > .btn-confirm,
    #itemTabLogs > .filter-bar > .btn-confirm,
    #invTabHistory > .filter-bar > .btn-confirm,
    [data-doc-tab="logs"] > .filter-bar > .btn-confirm,
    [data-doc-tab="quotations"] > .filter-bar > .btn-confirm,
    [data-doc-tab="purchase-orders"] > .filter-bar > .btn-confirm,
    [data-doc-tab="drafts"] > .filter-bar > .btn-confirm,
    [data-doc-tab="transaction-statements"] > .filter-bar > .btn-confirm,
    #coatingTabHistory > .filter-bar > .btn-confirm,
    #coatingTabParylene > .filter-bar > .btn-confirm,
    #coatingTabOrders > .filter-bar > .btn-confirm {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        padding: 0 10px !important;
    }
}

/* ==================== Phase 8: 모바일 회의모드 가로 강제 전환 ==================== */
/*
 * 전략: body.meeting-mobile-active 클래스 기반으로 모바일 회의 UI 활성화
 * 세로(390px)에서는 기존 @media (max-width:768px) 규칙이 작동하고,
 * 가로(844px)에서는 768px을 초과하므로 .meeting-mobile-active 셀렉터로 보완.
 * @media (max-width:1024px) 안에 넣어 데스크톱에는 영향 없음.
 */

/* --- 1) 가로 모드에서 모바일 회의 UI 활성화 (768px < width ≤ 1024px) --- */
@media (min-width: 769px) and (max-width: 1024px) {
    /* 데스크톱 회의 UI 숨김 → 모바일 회의 UI 표시 (가로 전환 시) */
    body.meeting-mobile-active .messenger-canvas-area .canvas-header { display: none !important; }
    body.meeting-mobile-active .messenger-canvas-area .voice-panel { display: none !important; }
    body.meeting-mobile-active .guest-canvas-area .voice-panel { display: none !important; }
    body.meeting-mobile-active .guest-controls { display: none !important; }
    body.meeting-landscape-mode .messenger-container.canvas-mode .messenger-chat-area { display: none !important; }
    body.meeting-mobile-active .messenger-container.canvas-mode .messenger-canvas-area { width: 100% !important; min-width: 0 !important; }

    /* 모바일 상태바 + 하단 컨트롤 바 표시 */
    body.meeting-mobile-active .meeting-mobile-status-bar { display: flex !important; }
    body.meeting-mobile-active .meeting-bottom-bar { display: flex !important; }

    /* --- 상태바 (order:-1로 최상단 배치) --- */
    body.meeting-mobile-active .meeting-mobile-status-bar {
        order: -1;
        position: relative;
        align-items: center;
        justify-content: center;
        padding: 0 12px;
        height: 36px;
        background: rgba(0,0,0,0.75);
        color: #fff;
        flex-shrink: 0;
        z-index: 8200;
    }
    body.meeting-mobile-active .mmb-left { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 10px; }
    body.meeting-mobile-active .mmb-title { font-size: 17px; font-weight: 600; }
    body.meeting-mobile-active .mmb-timer { font-size: 17px; color: #aaa; font-variant-numeric: tabular-nums; }
    body.meeting-mobile-active .mmb-end-btn {
        background: #e53935; color: #fff; border: none; border-radius: 16px;
        padding: 4px 16px; font-size: 17px; font-weight: 600; cursor: pointer;
        min-height: 28px !important; min-width: auto !important;
    }

    /* --- 하단 컨트롤 바 (order:10으로 최하단) --- */
    body.meeting-mobile-active .meeting-bottom-bar {
        order: 10;
        align-items: center;
        justify-content: space-around;
        height: 56px;
        background: rgba(0,0,0,0.85);
        flex-shrink: 0;
        z-index: 8200;
        padding: 0 4px;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    body.meeting-mobile-active .mbb-btn {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        background: none; border: none; color: #ccc; cursor: pointer;
        flex: 1 1 0; max-width: 96px; height: 48px; border-radius: 8px; padding: 2px 4px;
        min-height: 48px !important; min-width: 48px !important; overflow: hidden;
    }
    body.meeting-mobile-active .mbb-btn:active { background: rgba(255,255,255,0.1); }
    body.meeting-mobile-active .mbb-btn.active { color: #4caf50; }
    body.meeting-mobile-active .mbb-btn.active-danger { color: #e53935; }
    body.meeting-mobile-active .mbb-icon { font-size: 22px; line-height: 1.2; display: inline-flex; align-items: center; justify-content: center; }
    body.meeting-mobile-active .mbb-icon svg { vertical-align: middle; }
    body.meeting-mobile-active .mbb-label { font-size: 17px; line-height: 1.2; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    body.meeting-mobile-active .mmm-icon { display: inline-flex; align-items: center; width: 22px; }
    body.meeting-mobile-active .mmm-icon svg { vertical-align: middle; }

    /* --- 캔버스 영역 레이아웃 --- */
    body.meeting-mobile-active .messenger-canvas-area,
    body.meeting-mobile-active .guest-canvas-area { flex-direction: column !important; }
    body.meeting-mobile-active .canvas-body,
    body.meeting-mobile-active .guest-canvas-body { flex: 1 !important; min-height: 0; overflow: hidden; }
    body.meeting-mobile-active .canvas-wrapper { flex: 1; width: 100%; }
    body.meeting-mobile-active .canvas-wrapper canvas { width: auto !important; height: auto !important; max-width: 100%; max-height: 100%; }

    /* 캔버스 툴바: flow 내 배치 */
    body.meeting-mobile-active .canvas-toolbar {
        position: relative !important; bottom: auto !important; left: auto !important;
        width: 100% !important; z-index: 8100;
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        /* #133: 테마 무관 고정 dark surface (데스크탑 SSOT 와 동일) */
        background: #2a2a2a; color: #f0f0f0;
        border-top: 1px solid rgba(255,255,255,0.12);
        padding: 4px 8px; flex-shrink: 0;
    }
    body.meeting-mobile-active .canvas-toolbar button { flex-shrink: 0; }

    /* 카메라 그리드: 단순 2열 (grid-3 span 초기화 + 비디오 전체 표시) */
    body.meeting-mobile-active .camera-grid-view { grid-template-columns: 1fr 1fr !important; grid-template-rows: none !important; grid-auto-rows: 1fr; }
    body.meeting-mobile-active .camera-grid-view.grid-1 { grid-template-columns: 1fr !important; }
    body.meeting-mobile-active .camera-grid-view.grid-3 .camera-tile:first-child { grid-row: auto !important; }
    body.meeting-mobile-active .camera-tile { border-radius: 8px; min-height: 0; }
    body.meeting-mobile-active .camera-tile video { object-fit: contain !important; }
    /* 화면 공유 뷰 */
    body.meeting-mobile-active .screen-share-view video { width: 100%; height: auto; object-fit: contain; }

    /* --- 참여자 바텀시트 --- */
    body.meeting-mobile-active .meeting-participants-sheet {
        position: fixed; bottom: 0; left: 0; right: 0; height: 60vh;
        background: var(--surface, #1e1e1e); border-radius: 16px 16px 0 0;
        z-index: 8500; transform: translateY(100%); transition: transform 300ms ease;
        display: flex; flex-direction: column; overflow: hidden;
    }
    body.meeting-mobile-active .meeting-participants-sheet.open {
        display: flex !important; transform: translateY(0);
    }
    body.meeting-mobile-active .mps-handle-bar {
        width: 40px; height: 4px; background: #666; border-radius: 2px;
        margin: 10px auto 6px; flex-shrink: 0;
    }
    body.meeting-mobile-active .mps-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 4px 16px 8px; font-size: 17px; font-weight: 600;
        color: var(--text-primary, #fff); flex-shrink: 0;
    }
    body.meeting-mobile-active .mps-close {
        background: none; border: none; color: var(--text-primary, #fff);
        font-size: 22px; cursor: pointer; min-height: 36px !important; min-width: 36px !important;
    }
    body.meeting-mobile-active .mps-list { flex: 1; overflow-y: auto; padding: 0 8px 16px; }
    body.meeting-mobile-active .mps-list .vp-item {
        flex-direction: row !important; align-items: center;
        padding: 8px 12px; border-bottom: 1px solid var(--light-border, #333);
    }
    body.meeting-mobile-active .mps-list .vp-item .vp-level-bar { display: none; }

    /* --- 백드롭 --- */
    body.meeting-mobile-active .meeting-sheet-backdrop {
        position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 8400;
    }
    body.meeting-mobile-active .meeting-sheet-backdrop.active { display: block !important; }

    /* --- 더보기 메뉴 --- */
    body.meeting-mobile-active .meeting-more-menu {
        position: fixed; bottom: 70px; right: 8px;
        background: var(--surface, #2a2a2a); border: 1px solid var(--light-border, #444);
        border-radius: 12px; z-index: 8500; min-width: 180px; padding: 6px 0;
        box-shadow: 0 4px 20px rgba(0,0,0,0.4);
        transform: scale(0.9) translateY(10px); opacity: 0; pointer-events: none;
        transition: transform 200ms ease, opacity 200ms ease;
    }
    body.meeting-mobile-active .meeting-more-menu.open {
        display: block !important; transform: scale(1) translateY(0); opacity: 1; pointer-events: auto;
    }
    body.meeting-mobile-active .mmm-item {
        display: flex; align-items: center; gap: 10px; width: 100%; height: 44px;
        padding: 0 16px; background: none; border: none; color: var(--text-primary, #fff);
        font-size: 17px; cursor: pointer; text-align: left;
        min-height: 44px !important; min-width: auto !important;
    }
    body.meeting-mobile-active .mmm-item:active { background: rgba(255,255,255,0.08); }

    /* --- 오버레이 토글 --- */
    body.meeting-mobile-active .meeting-overlay-hidden .meeting-mobile-status-bar {
        opacity: 0; transform: translateY(-100%); pointer-events: none;
        transition: opacity 300ms ease, transform 300ms ease;
    }
    body.meeting-mobile-active .meeting-overlay-hidden .meeting-bottom-bar,
    body.meeting-mobile-active .meeting-overlay-hidden .canvas-toolbar {
        opacity: 0; transform: translateY(100%); pointer-events: none;
        transition: opacity 300ms ease, transform 300ms ease;
    }
    body.meeting-mobile-active .meeting-mobile-status-bar,
    body.meeting-mobile-active .meeting-bottom-bar,
    body.meeting-mobile-active .canvas-toolbar {
        transition: opacity 300ms ease, transform 300ms ease;
    }

    /* 핀치 줌 */
    body.meeting-mobile-active .canvas-wrapper { touch-action: pan-x pan-y pinch-zoom; }
}

/* 세로 모드 캔버스+채팅 분할 제거 — 모바일 회의는 항상 가로 전체화면 (MEETING 탭) */

/* --- 2) 가로 모드: 전체 캔버스 (클래스 기반) --- */
/* === 상태바/하단바 축소 === */
body.meeting-landscape-mode .meeting-mobile-status-bar {
    height: 28px !important;
    padding: 0 10px;
}
body.meeting-landscape-mode .mmb-title { font-size: 17px; }
body.meeting-landscape-mode .mmb-timer { font-size: 17px; }
body.meeting-landscape-mode .mmb-end-btn {
    padding: 2px 12px; font-size: 17px; min-height: 24px !important;
}
body.meeting-landscape-mode .meeting-bottom-bar { height: 44px !important; }
body.meeting-landscape-mode .mbb-btn {
    /* #117 — 가로 모드도 flex:1 균등 분할 (visual ↔ click area sync) */
    flex: 1 1 0 !important; max-width: 88px;
    height: 40px; min-height: 40px !important; min-width: 40px !important;
}
body.meeting-landscape-mode .mbb-icon { font-size: 18px; }
body.meeting-landscape-mode .mbb-label { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* === 캔버스 영역: 자동 너비 (flex:1) === */
body.meeting-landscape-mode .messenger-container.canvas-mode .messenger-canvas-area {
    width: auto !important;
    flex: 1 !important;
    min-width: 0 !important;
}

/* 캔버스 전체 활용 */
body.meeting-landscape-mode .canvas-wrapper {
    width: 100% !important; height: 100% !important;
}
body.meeting-landscape-mode .canvas-wrapper canvas {
    width: auto !important; height: auto !important;
    max-width: 100%; max-height: 100%;
}

/* 카메라 그리드: 2열 (grid-3 span 초기화) */
body.meeting-landscape-mode .camera-grid-view {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: none !important;
    grid-auto-rows: 1fr;
}
body.meeting-landscape-mode .camera-grid-view.grid-3 .camera-tile:first-child {
    grid-row: auto !important;
}

/* 화면 공유: 가로 꽉 채움 */
body.meeting-landscape-mode .screen-share-view { flex: 1; }
body.meeting-landscape-mode .screen-share-view video {
    width: 100%; height: 100%; object-fit: contain;
}

/* 캔버스 툴바: 하단 중앙 floating (데스크톱 스타일) */
body.meeting-landscape-mode .canvas-toolbar {
    position: absolute !important;
    bottom: 48px !important;
    left: 50% !important;
    transform: translateX(-50%);
    width: auto !important;
    max-width: 90%;
    border-radius: 8px;
    background: rgba(0,0,0,0.8) !important;
    border: 1px solid var(--light-border);
    padding: 4px 8px;
    z-index: 8150;
}

/* 참여자 시트: 우측 사이드 패널 */
body.meeting-landscape-mode .meeting-participants-sheet {
    top: 0 !important; bottom: 0 !important;
    left: auto !important; right: 0 !important;
    width: 280px !important; height: 100% !important;
    border-radius: 0 !important; transform: translateX(100%) !important;
}
body.meeting-landscape-mode .meeting-participants-sheet.open {
    transform: translateX(0) !important;
}
body.meeting-landscape-mode .mps-handle-bar { display: none; }

/* 더보기 메뉴: 위치 조정 */
body.meeting-landscape-mode .meeting-more-menu { bottom: 50px !important; }

/* 오버레이 토글: floating 툴바 대응 */
body.meeting-landscape-mode .meeting-overlay-hidden .canvas-toolbar {
    opacity: 0; transform: translateX(-50%) translateY(100%); pointer-events: none;
}

/* ==================== 모바일 앱 네비게이션 (탭바 + FAB + 카드뷰) ==================== */

/* --- 하단 탭바 --- */
.m-tab-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--ods-tab-bar-h);
    background: var(--dark-soft);
    border-top: 1px solid var(--light-border);
    z-index: var(--ods-z-tabbar);
    align-items: center;
    justify-content: space-around;
    padding-bottom: var(--ods-safe-bottom);
    box-sizing: content-box;
}
.m-tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 0;
    gap: 2px;
    position: relative;
    min-height: unset;
    min-width: unset;
}
.m-tab-item.active {
    color: var(--primary);
}
.m-tab-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.m-tab-icon svg {
    width: 22px;
    height: 22px;
}
.m-tab-label {
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
}
.m-tab-badge {
    position: absolute;
    top: 4px;
    right: 50%;
    transform: translateX(14px);
    background: var(--danger);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: var(--ods-radius-full);
    padding: 0 4px;
}
/* --- FAB (플로팅 액션 버튼, 우하단) --- */
/* 49차: 외부 FAB는 기본 숨김. quickadd config.enabled=true 일 때만 OdsMobile.FAB.applyVisibility()에서 display:flex 부여.
 * body.m-chat-open / body.m-meeting-direct 시 강제 숨김. */
.m-fab-btn {
    display: none;
    position: fixed;
    bottom: calc(var(--ods-tab-bar-h) + var(--ods-safe-bottom) + 12px);
    right: 12px;
    left: auto;
    transform: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--primary);
    border: 1px solid var(--light-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: var(--ods-z-fab);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: transform var(--ods-duration-normal) var(--ods-ease-out),
                background var(--ods-duration-fast),
                opacity var(--ods-duration-fast);
    min-height: unset;
    min-width: unset;
    padding: 0;
    opacity: 0.88;
}
body.m-chat-open .m-fab-btn,
body.m-meeting-direct .m-fab-btn { display: none !important; }
.m-fab-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 17px;
    line-height: 1.5;
}
.m-fab-divider {
    height: 1px;
    background: var(--light-border);
    margin: 6px 8px;
}
.m-fab-item-edit { opacity: 0.85; }
.m-fab-btn:hover {
    opacity: 1;
}
.m-fab-btn:active {
    transform: scale(0.92);
    opacity: 1;
}
.m-fab-btn.active {
    background: var(--primary);
    color: #ffffff;
    opacity: 1;
}
.m-fab-btn .m-fab-icon,
.m-fab-btn .m-fab-icon-close { width: 22px; height: 22px; }
.m-fab-icon-close { display: none; }
.m-fab-btn.active .m-fab-icon { display: none; }
.m-fab-btn.active .m-fab-icon-close { display: block; }

/* FAB 오버레이 */
.m-fab-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: var(--ods-z-fab-overlay);
    opacity: 0;
    transition: opacity var(--ods-duration-normal);
}
.m-fab-overlay.active {
    display: block;
    opacity: 1;
}

/* FAB 메뉴 — 49차 v3: 11항목(10 액션 + 편집 버튼) 모두 viewport 안에 표시.
 * bottom은 탭바 바로 위, max-height는 viewport 거의 풀, gap 축소로 콘텐츠 압축. */
.m-fab-menu {
    display: none;
    position: fixed;
    bottom: calc(var(--ods-tab-bar-h) + var(--ods-safe-bottom) + 8px);
    right: 12px;
    left: auto;
    transform: translateY(20px);
    opacity: 0;
    z-index: var(--ods-z-fab-menu);
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    transition: opacity var(--ods-duration-normal) var(--ods-ease-out),
                transform var(--ods-duration-normal) var(--ods-ease-out);
    pointer-events: none;
    min-width: 180px;
    max-width: 240px;
    max-height: calc(100vh - var(--ods-tab-bar-h) - var(--ods-safe-bottom) - var(--ods-safe-top) - 24px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px;
    -webkit-overflow-scrolling: touch;
}
/* 시트 안 항목 컴팩트 — 최소 터치 타겟 44px 유지 */
.m-fab-menu .m-fab-item {
    min-height: 44px;
    padding: 6px 12px;
}
.m-fab-menu.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.m-fab-item {
    display: flex;
    align-items: center;
    gap: var(--ods-space-3);
    background: var(--surface);
    border: 1px solid var(--light-border);
    border-radius: var(--ods-radius-lg);
    padding: var(--ods-space-3) var(--ods-space-4);
    color: var(--text-primary);
    font-size: var(--ods-text-base);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: var(--ods-shadow-md);
    min-height: var(--ods-touch-min);
    width: 100%;
    min-width: unset;
}
.m-fab-item:active {
    background: var(--hover-bg);
}
.m-fab-item-icon {
    font-size: 20px;
    flex-shrink: 0;
    width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}
.m-fab-item-label {
    font-weight: 500;
}

/* --- 탭바 편집 UI --- */
.m-tbe-section {
    margin-bottom: 16px;
}
.m-tbe-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 4px;
}
.m-tbe-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-bottom: 1px solid var(--border-color);
    min-height: 48px;
}
.m-tbe-order {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.m-tbe-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}
.m-tbe-icon svg {
    width: 20px;
    height: 20px;
}
.m-tbe-label {
    flex: 1;
    font-size: 17px;
    color: var(--text-primary);
}
.m-tbe-arrows {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.m-tbe-arrow {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.m-tbe-arrow:active {
    background: var(--hover-bg);
}
.m-tbe-remove {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    background: var(--status-error);
    border: none;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}
.m-tbe-remove:active {
    opacity: 0.8;
}
.m-tbe-item-available {
    cursor: pointer;
    border-radius: 8px;
    border-bottom: none;
    margin-bottom: 2px;
    background: var(--surface);
}
.m-tbe-item-available:active {
    background: var(--hover-bg);
}
.m-tbe-item-available.m-tbe-disabled {
    opacity: 0.4;
    pointer-events: none;
}
.m-tbe-add {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.m-tbe-actions {
    display: flex;
    gap: 10px;
    padding: 12px 0 4px;
}
.m-tbe-btn-reset {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 17px;
    cursor: pointer;
    min-height: 48px;
    min-width: unset;
}
.m-tbe-btn-save {
    flex: 2;
    padding: 12px;
    border-radius: 8px;
    background: var(--primary);
    border: none;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    min-height: 48px;
    min-width: unset;
}
.m-tbe-btn-reset:active, .m-tbe-btn-save:active {
    opacity: 0.85;
}

/* ==================== 49차: QuickAddEditor (빠른 추가 편집) ==================== */
.m-qae-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    min-height: 48px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 12px;
}
.m-qae-toggle-text { flex: 1; min-width: 0; }
.m-qae-toggle-title { font-size: 17px; color: var(--text-primary); font-weight: 600; line-height: 1.2; }
.m-qae-switch {
    width: 48px; height: 28px; border-radius: 14px;
    background: var(--border-color); border: none;
    position: relative; cursor: pointer; flex-shrink: 0;
    transition: background var(--ods-duration-fast);
    padding: 0;
    min-width: 48px; min-height: 28px;
}
.m-qae-switch.on { background: var(--primary); }
.m-qae-switch-thumb {
    position: absolute; top: 3px; left: 3px;
    width: 22px; height: 22px; border-radius: 50%;
    background: #fff;
    transition: left var(--ods-duration-fast);
}
.m-qae-switch.on .m-qae-switch-thumb { left: 23px; }

.m-qae-section { margin-bottom: 14px; }
.m-qae-section-title {
    font-size: 17px; color: var(--text-primary); font-weight: 600;
    padding: 8px 4px;
}
.m-qae-empty {
    padding: 16px; text-align: center;
    color: var(--text-muted); font-size: 15px;
    background: var(--surface); border-radius: 8px;
    border: 1px dashed var(--border-color);
}
.m-qae-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; margin-bottom: 6px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    min-height: 48px;
}
.m-qae-item-available { cursor: pointer; }
.m-qae-item-available:active { background: var(--primary-bg, var(--surface)); opacity: 0.9; }
/* 49차 v2: 최대 도달 시 추가 가능 항목 어둡게 — 탭바 비활성과 동일한 시각 언어 */
.m-qae-item-disabled {
    opacity: 0.4;
    pointer-events: none;
    filter: grayscale(0.5);
}
.m-qae-maxed-notice {
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--surface);
    border: 1px dashed var(--status-error);
    border-radius: 8px;
    color: var(--status-error);
    font-size: 14px;
    line-height: 1.4;
}
.m-qae-order {
    flex-shrink: 0; width: 22px; text-align: center;
    color: var(--text-muted); font-size: 14px;
}
.m-qae-icon {
    flex-shrink: 0; width: 22px; height: 22px;
    color: var(--text-secondary);
    display: inline-flex; align-items: center; justify-content: center;
}
.m-qae-icon svg { width: 22px; height: 22px; }
.m-qae-label {
    flex: 1; min-width: 0;
    font-size: 17px; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.m-qae-arrows { display: inline-flex; gap: 4px; flex-shrink: 0; }
.m-qae-arrow {
    width: 28px; height: 28px; min-width: 28px; min-height: 28px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
}
.m-qae-remove {
    flex-shrink: 0; width: 28px; height: 28px;
    min-width: 28px; min-height: 28px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--status-error);
    border-radius: 6px;
    font-size: 18px; line-height: 1;
    cursor: pointer; padding: 0;
}
.m-qae-add {
    flex-shrink: 0; color: var(--primary);
    font-size: 20px; font-weight: 700;
}

.m-qae-category { margin-bottom: 8px; }
.m-qae-category-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
}
.m-qae-category-label { font-size: 15px; color: var(--text-secondary); font-weight: 600; }
.m-qae-category-arrow {
    color: var(--text-muted); font-size: 12px;
    transition: transform var(--ods-duration-fast);
}
.m-qae-category.m-qae-collapsed .m-qae-category-arrow {
    transform: rotate(-90deg);
}
.m-qae-category-body { padding: 8px 0 0; }
.m-qae-category.m-qae-collapsed .m-qae-category-body { display: none; }

.m-qae-actions {
    display: flex; gap: 10px;
    padding: 12px 0 4px;
    position: sticky; bottom: 0;
    background: var(--bg);
    border-top: 1px solid var(--border-color);
    margin-top: 12px;
}
.m-qae-btn-reset {
    flex: 1; padding: 12px; border-radius: 8px;
    background: var(--surface); border: 1px solid var(--border-color);
    color: var(--text-secondary); font-size: 17px;
    cursor: pointer; min-height: 48px;
}
.m-qae-btn-save {
    flex: 2; padding: 12px; border-radius: 8px;
    background: var(--primary); border: none;
    color: #fff; font-size: 17px; font-weight: 600;
    cursor: pointer; min-height: 48px;
}
.m-qae-btn-reset:active, .m-qae-btn-save:active { opacity: 0.85; }

/* --- 바텀시트 --- */
.m-bs-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: var(--ods-z-bottomsheet);
    opacity: 0;
    transition: opacity var(--ods-duration-normal);
}
.m-bs-backdrop.active {
    display: block;
    opacity: 1;
}
.m-bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    border-radius: var(--ods-radius-xl) var(--ods-radius-xl) 0 0;
    z-index: calc(var(--ods-z-bottomsheet) + 1);
    transform: translateY(100%);
    transition: transform var(--ods-duration-slow) var(--ods-ease-out);
    max-height: 70vh;
    overflow-y: auto;
    padding-bottom: var(--ods-safe-bottom);
}
.m-bottom-sheet.active {
    transform: translateY(0);
}
.m-bs-handle-area {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.m-bs-handle-area:active .m-bs-handle {
    background: var(--text-secondary);
}
.m-bs-handle {
    width: 36px;
    height: 4px;
    background: var(--muted-light);
    border-radius: 2px;
}
.m-bs-header {
    padding: var(--ods-space-3) var(--ods-space-4);
    border-bottom: 1px solid var(--light-border);
}
.m-bs-title {
    font-size: var(--ods-text-lg);
    font-weight: 600;
    color: var(--text-heading);
}
.m-bs-body {
    padding: var(--ods-space-4);
}

/* --- 더보기 그리드 --- */
.m-more-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ods-space-4);
    padding: var(--ods-space-2) 0;
}
.m-more-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ods-space-2);
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: var(--ods-space-3);
    border-radius: var(--ods-radius-md);
    min-height: unset;
    min-width: unset;
}
.m-more-item:active {
    background: var(--hover-bg);
}
.m-more-icon {
    font-size: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}
.m-more-label {
    font-size: var(--ods-text-xs);
    font-weight: 500;
    text-align: center;
}

/* --- Pull to Refresh --- */
.m-ptr-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ods-space-2);
    height: 0;
    overflow: hidden;
    transition: height var(--ods-duration-normal), opacity var(--ods-duration-normal);
    opacity: 0;
    color: var(--text-muted);
    font-size: var(--ods-text-sm);
}
.m-ptr-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--light-border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: m-ptr-spin 0.8s linear infinite;
}
@keyframes m-ptr-spin {
    to { transform: rotate(360deg); }
}

/* --- 스와이프 액션 배경 --- */
.m-swipe-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--ods-space-2);
    padding: 0 var(--ods-space-4);
    color: #fff;
    font-weight: 600;
    font-size: var(--ods-text-sm);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--ods-duration-fast);
}
.m-swipe-bg-left {
    right: 0;
    justify-content: flex-end;
    background: var(--danger);
}
.m-swipe-bg-right {
    left: 0;
    justify-content: flex-start;
    background: var(--status-success);
}
.m-swipe-icon {
    font-size: 20px;
}

/* --- 모바일 카드 리스트 공통 --- */
.m-card-list {
    display: none;
}
.m-card {
    display: flex;
    flex-direction: column;
    gap: var(--ods-space-1);
    padding: var(--ods-card-padding);
    background: var(--surface);
    border-bottom: 1px solid var(--light-border);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.m-card:active {
    background: var(--hover-bg);
}
.m-card-row {
    display: flex;
    align-items: center;
    gap: var(--ods-space-2);
}
.m-card-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.m-card-subtitle,
.m-card-sub {
    font-size: 17px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.m-card-meta {
    font-size: 17px;
    color: var(--text-muted);
}
.m-card-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 0;
    border-radius: var(--ods-radius-sm);
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.m-card-kv .m-card-badge {
    font-size: 17px;
    padding: 3px 10px;
}
.m-card-badge.success { background: transparent; color: var(--status-success); }
.m-card-badge.warning { background: transparent; color: var(--status-warning); }
.m-card-badge.error { background: transparent; color: var(--status-error); }
.m-card-badge.info { background: transparent; color: var(--status-info); }
.m-card-badge.muted { background: transparent; color: var(--text-muted); }

/* 키-값 카드 행 (라벨 왼쪽 + 값 오른쪽) */
.m-card-kv {
    display: flex;
    align-items: center;
    gap: var(--ods-space-2, 8px);
    padding: 3px 0;
}
.m-card-kv-label {
    flex: 0 0 70px;
    font-size: 17px;
    color: var(--text-muted);
    font-weight: 500;
}
.m-card-kv-value {
    flex: 1;
    font-size: 17px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 카드 내 액션 버튼 영역 — 왼쪽정렬 + 버튼 크기 통일 */
.m-card .m-card-actions {
    justify-content: flex-start !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
.m-card .m-card-actions button {
    flex: 0 0 auto !important;    /* .btn-cancel의 flex:1 오버라이드 → 모든 버튼 동일 크기 */
    width: auto !important;
    min-width: 60px !important;
    font-size: 17px !important;
    padding: 6px 14px !important;
    text-align: center !important;
    min-height: 40px !important;
}

/* FAB이 카드를 가리지 않도록 리스트 전체에 하단 여백 (마지막 카드 우측 패딩은 제거 — 마지막 1개 정렬 꼬임 원인) */
body.m-native .m-card-list {
    padding-bottom: calc(44px + 24px);
}

/* 수량 진행 바 (재고 카드) */
.m-qty-bar {
    height: 4px;
    background: var(--light-border);
    border-radius: 2px;
    overflow: hidden;
    margin-top: var(--ods-space-1);
}
.m-qty-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width var(--ods-duration-normal);
}
.m-qty-bar-fill.safe { background: var(--status-success); }
.m-qty-bar-fill.warning { background: var(--status-warning); }
.m-qty-bar-fill.danger { background: var(--status-error); }

/* --- 모바일 검색바 (축소/확장 토글) --- */
.m-search-bar {
    display: none;
    align-items: center;
    gap: var(--ods-space-2);
    padding: var(--ods-space-2) var(--ods-space-4);
    background: var(--surface);
    border-bottom: 1px solid var(--light-border);
}
.m-search-input {
    flex: 1;
    padding: var(--ods-space-2) var(--ods-space-3);
    background: var(--dark-soft);
    border: 1px solid var(--light-border);
    border-radius: var(--ods-radius-md);
    color: var(--text-primary);
    font-size: var(--ods-text-base);
}
.m-search-input::placeholder {
    color: var(--text-muted);
}

/* --- 이메일 연락처 모바일 헤더/탭 (기본 숨김, m-native에서만 표시) --- */
.email-contacts-mobile-header,
.email-contacts-mobile-tabs {
    display: none;
}

/* --- 이메일 모바일 폴더 드롭다운 + 바텀시트 --- */
.email-folder-select {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--surface);
    border-bottom: 1px solid var(--light-border);
}
.email-folder-btn {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 12px;
    background: var(--dark-soft);
    border: 1px solid var(--light-border);
    border-radius: 0;
    color: var(--text-primary);
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
}
.email-folder-chev {
    font-size: 14px;
    color: var(--text-muted);
}
.email-folder-sync,
.email-folder-settings {
    flex: 0 0 auto;
    padding: 6px 0;
    font-size: 15px;
    width: 44px;
    min-height: 44px;
    border-radius: 0;
    background: var(--dark-soft);
    border: 1px solid var(--light-border);
    color: var(--text-primary);
    text-align: center;
}
.email-folder-compose {
    flex: 0 0 auto;
    padding: 6px 0;
    font-size: 15px;
    font-weight: 600;
    width: 52px;
    min-height: 44px;
    border-radius: 0;
    background: var(--primary);
    border: 1px solid var(--primary);
    color: #fff;
    text-align: center;
    cursor: pointer;
}
.email-folder-compose:active {
    opacity: 0.8;
}
.email-folder-sheet {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0 24px;
}
.email-folder-sheet-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    color: var(--text-primary);
    font-size: 17px;
    text-align: left;
    cursor: pointer;
    min-height: 48px;
    width: 100%;
}
.email-folder-sheet-item.active {
    background: var(--hover-bg);
    border-left-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
}
.email-folder-sheet-item:active {
    background: var(--hover-bg);
}
.email-folder-sheet-label {
    flex: 1;
}
.email-folder-sheet-count {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 14px;
}
.email-folder-sheet-badge {
    flex: 0 0 auto;
    background: var(--status-error, #e53935);
    color: #fff;
    font-size: 13px;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
}
.email-folder-sheet-sep {
    padding: 12px 20px 4px;
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
    border-top: 1px solid var(--light-border);
    margin-top: 4px;
}

/* --- 이메일 모바일 폴더 탭 (레거시, 모바일에선 숨김) --- */
.email-mobile-tabs {
    display: none;
    gap: 0;
    background: var(--dark-soft);
    border-bottom: 1px solid var(--light-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.email-mobile-tab {
    flex: 1;
    padding: var(--ods-space-3) var(--ods-space-2);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: var(--ods-text-sm);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    min-height: unset;
    min-width: unset;
}
.email-mobile-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.email-mobile-tab .m-tab-badge {
    position: static;
    display: inline-block;
    transform: none;
    margin-left: 4px;
    vertical-align: middle;
}
.email-compose-btn {
    color: var(--primary);
    font-weight: 600;
    flex: 0 0 auto;
    padding: var(--ods-space-3) var(--ods-space-4);
}
/* 이메일 작성 필드 모바일 */
.compose-field-row { padding: 6px 12px; }
.compose-field-label { flex: 0 0 75px; font-size: 13px; }

/* --- 메신저 뒤로가기 버튼 (데스크톱 숨김) --- */
.messenger-back-btn {
    display: none !important;
}

/* ==================== m-native 모드 (768px 이하 + 모바일 앱 UI) ==================== */
@media (max-width: 768px) {
    /* 탭바 + FAB 활성화 시 메인 컨텐츠 하단 여백 (FAB 44px + 버퍼 28px) */
    body.m-native .main-content {
        padding-bottom: calc(var(--ods-tab-bar-h) + var(--ods-safe-bottom) + 72px);
    }

    /* 탭바 표시 시 사이드 드로어 숨김 (더보기 탭에서 접근) */
    body.m-native .m-hamburger {
        display: none !important;
    }

    /* 모바일 카드 리스트 표시 / 데스크톱 테이블 숨김 */
    body.m-native .m-card-list {
        display: block;
    }
    body.m-native .table-container,
    body.m-native .notice-table-wrap,
    body.m-native #clientsGroupContainer,
    body.m-native #delegationTableWrap,
    body.m-native #approvalRuleTableWrap,
    body.m-native #pendingUsersTableWrap,
    body.m-native #usersTableWrap {
        display: none;
    }
    /* 모달 내부 테이블은 숨기지 않음 */
    body.m-native .modal .table-container {
        display: block !important;
        overflow-x: auto;
    }
    /* 모달 내 form-section 테이블은 보임 유지 */
    body.m-native .modal .form-section .table-container {
        display: block !important;
        overflow-x: auto;
    }

    /* 모바일 검색바 */
    body.m-native .m-search-bar {
        display: flex;
    }

    /* === 이메일: 3분할 → 단일 뷰 === */
    body.m-native .email-container {
        display: flex !important;
        flex-direction: column !important;
        height: calc(100vh - 70px - var(--ods-tab-bar-h) - var(--ods-safe-bottom, 0px)) !important;
        overflow: hidden;
    }
    body.m-native .email-sidebar {
        display: none !important;
    }
    body.m-native .email-list-panel {
        width: 100% !important;
        min-width: unset !important;
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    body.m-native #emailList {
        flex: 0 0 auto;
        min-height: 0;
        overflow: visible;
    }
    /* FAB가 하단 버튼을 가리지 않도록 패널 끝에 여유 패딩 */
    body.m-native .email-list-panel::after {
        content: "";
        flex: 0 0 auto;
        height: 80px;
    }
    body.m-native .email-detail-panel {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: var(--ods-tab-bar-h);
        z-index: var(--ods-z-modal);
        background: var(--surface);
        overflow-y: auto;
        padding-bottom: var(--ods-safe-bottom);
    }
    /* 이메일 페이지네이션 모바일 */
    body.m-native .email-page-nav {
        padding: 8px 12px;
        gap: 2px;
        flex-wrap: wrap;
    }
    body.m-native .email-page-nav .page-btn {
        min-width: 36px;
        height: 36px;
        font-size: 15px;
    }
    body.m-native .email-page-nav .page-info {
        width: 100%;
        text-align: center;
        margin: 4px 0 0;
        font-size: 14px;
    }
    /* 이메일 상단 폴더 탭 (사이드바 대체) */
    body.m-native .email-list-header {
        flex-direction: column;
        gap: var(--ods-space-2);
    }
    /* 연락처 패널 모바일 */
    body.m-native .email-contacts-panel {
        width: 100% !important;
        min-width: unset !important;
    }
    /* 연락처 모바일 헤더: 메일함 돌아가기 + 타이틀 */
    body.m-native .email-contacts-mobile-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 12px;
        background: var(--surface);
        border-bottom: 1px solid var(--light-border);
    }
    body.m-native .email-contacts-back {
        flex: 0 0 auto;
        padding: 8px 12px;
        font-size: 15px;
        min-height: 40px;
        background: var(--dark-soft);
        border: 1px solid var(--light-border);
        border-radius: 0;
        color: var(--text-primary);
        cursor: pointer;
    }
    body.m-native .email-contacts-mobile-title {
        flex: 1;
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
    }
    /* 연락처 카테고리 탭 (전체/사내/거래업체/개인) */
    body.m-native .email-contacts-mobile-tabs {
        display: flex;
        gap: 0;
        background: var(--surface);
        border-bottom: 1px solid var(--light-border);
    }
    body.m-native .email-contacts-mobile-tab {
        flex: 1;
        padding: 10px 6px;
        background: none;
        border: none;
        border-bottom: 2px solid transparent;
        color: var(--text-muted);
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
        min-height: 44px;
    }
    body.m-native .email-contacts-mobile-tab.active {
        color: var(--primary);
        border-bottom-color: var(--primary);
    }
    body.m-native .email-contact-detail {
        position: fixed;
        top: 0; left: 0; right: 0;
        bottom: var(--ods-tab-bar-h);
        z-index: var(--ods-z-modal);
        background: var(--surface);
        overflow-y: auto;
        padding-bottom: var(--ods-safe-bottom);
    }

    /* === 메신저: 목록/채팅 뷰 토글 === */
    body.m-native .messenger-container {
        display: block !important;
    }
    body.m-native .messenger-sidebar {
        width: 100% !important;
        min-width: unset !important;
        border-right: none !important;
    }
    body.m-native .messenger-chat-area {
        display: none !important;
    }
    body.m-native.m-chat-open .messenger-sidebar {
        display: none !important;
    }
    body.m-native.m-chat-open .messenger-chat-area {
        display: flex !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: var(--ods-tab-bar-h);
        z-index: var(--ods-z-modal);
        background: var(--surface);
        width: 100% !important;
        min-width: unset !important;
        flex-direction: column;
    }
    /* 뒤로가기 버튼: 데스크톱 숨김, 모바일 표시 */
    body.m-native .messenger-back-btn {
        display: inline-flex !important;
    }

    /* === 메신저: 채팅 헤더 모바일 최적화 === */
    body.m-native .messenger-chat-header {
        padding: 8px 12px;
        gap: 4px;
    }
    body.m-native .messenger-chat-title {
        flex: 1;
        min-width: 0;
    }
    body.m-native #messenger-chat-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 120px;
        font-size: 17px;
    }
    body.m-native .messenger-chat-actions {
        flex-shrink: 0;
        gap: 2px;
    }
    body.m-native .messenger-chat-actions .btn-sm {
        padding: 4px 8px;
        font-size: 17px;
    }
    body.m-native .messenger-chat-actions .obt-assist-help-btn {
        display: none !important;
    }

    /* === 메신저: CHAT/MEETING 탭 === */
    body.m-native .messenger-sidebar-tabs {
        display: flex;
        border-bottom: 1px solid var(--light-border);
        flex-shrink: 0;
    }
    .mst-tab {
        flex: 1;
        padding: 12px 0;
        background: none;
        border: none;
        border-bottom: 2px solid transparent;
        color: var(--text-muted);
        font-size: 17px;
        font-weight: 600;
        cursor: pointer;
        min-height: 44px;
    }
    .mst-tab.active {
        color: var(--text-primary);
        border-bottom-color: var(--primary);
    }

    /* 모바일 채팅 헤더에서 회의 버튼 숨김 (MEETING 탭으로 분리) */
    body.m-native .messenger-meeting-btn { display: none !important; }

    /* 회의 상태 뱃지 */
    .mst-meeting-badge {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: var(--status-success, #4caf50);
        font-size: 17px;
        font-weight: 500;
    }
    .mst-meeting-dot {
        width: 6px; height: 6px;
        background: var(--status-success, #4caf50);
        border-radius: 50%;
        animation: mst-pulse 1.5s ease-in-out infinite;
    }
    @keyframes mst-pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.3; }
    }

    /* === 이메일: 폴더 탭 (모바일 선택기로 대체) === */
    body.m-native .email-mobile-tabs {
        display: none !important;
    }

    /* 모바일 폴더 선택기 (드롭다운) */
    body.m-native .email-folder-select {
        display: flex !important;
    }
    body.m-native .email-list-header > h3 {
        display: none !important;
    }
    /* 모바일 검색 바: 입력창 flex:1, 버튼 플랫 텍스트 */
    body.m-native .email-list-header {
        padding: 6px 10px;
    }
    body.m-native .email-list-header .email-search {
        gap: 6px;
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
    }
    body.m-native .email-list-header .email-search input[type="text"] {
        flex: 1;
        min-width: 0;
        border-radius: 0;
        padding: 8px 10px;
        min-height: 44px;
    }
    body.m-native .email-list-header .email-search button,
    body.m-native .email-list-header .email-search .btn-sm {
        flex: 0 0 auto;
        background: var(--dark-soft);
        border: 1px solid var(--light-border);
        border-radius: 0;
        color: var(--text-primary);
        padding: 6px 0;
        font-size: 15px;
        min-height: 44px;
        width: 52px;
        min-width: 52px;
        text-align: center;
    }
    body.m-native .email-list-header .email-search button:active,
    body.m-native .email-list-header .email-search .btn-sm:active {
        background: var(--hover-bg);
    }
    /* 고급 검색 패널: 모바일 레이아웃 */
    body.m-native .email-advanced-search {
        padding: 10px 12px;
        background: var(--surface);
        border-bottom: 1px solid var(--light-border);
    }
    body.m-native .email-advanced-search .form-row {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 8px;
    }
    body.m-native .email-advanced-search .form-group {
        width: 100%;
    }
    body.m-native .email-advanced-search .form-group input,
    body.m-native .email-advanced-search .form-group select {
        width: 100%;
        min-height: 44px;
        border-radius: 0;
        padding: 8px 10px;
    }
    body.m-native .email-advanced-search .form-group label {
        font-size: 14px;
        color: var(--text-muted);
        margin-bottom: 4px;
        display: block;
    }
    body.m-native .email-advanced-search .form-row:last-child {
        flex-direction: row !important;
        gap: 8px;
        justify-content: stretch;
        margin-top: 8px;
    }
    body.m-native .email-advanced-search .btn-add,
    body.m-native .email-advanced-search .btn-cancel {
        flex: 1;
        border-radius: 0;
        min-height: 44px;
        padding: 8px 16px;
    }

    /* === 이메일 리스트: 카드 뷰 (체크박스 중앙, 1행 발신자+날짜+★ / 2행 제목) === */
    body.m-native #emailList {
        padding: 0;
        gap: 0;
        display: flex;
        flex-direction: column;
    }
    body.m-native .email-row {
        display: none !important;
    }
    body.m-native .email-card {
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--surface);
        border: none;
        border-bottom: 1px solid var(--light-border);
        border-radius: 0;
        padding: 14px 14px;
        margin: 0;
        cursor: pointer;
        transition: background 0.1s;
    }
    body.m-native .email-card:active {
        background: var(--hover-bg);
    }
    body.m-native .email-card.recalled {
        opacity: 0.5;
    }
    body.m-native .email-card-cb-wrap {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        min-width: 22px;
        min-height: 22px;
        padding: 0;
    }
    body.m-native .email-card-cb-wrap input {
        width: 20px;
        height: 20px;
        margin: 0;
    }
    body.m-native .email-card-body {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    body.m-native .email-card-row1 {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    body.m-native .email-card-sender {
        flex: 1;
        min-width: 0;
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body.m-native .email-card.unread .email-card-sender {
        font-weight: 700;
    }
    body.m-native .email-card-date {
        flex: 0 0 auto;
        font-size: 13px;
        color: var(--text-muted);
        white-space: nowrap;
    }
    body.m-native .email-card-star {
        flex: 0 0 auto;
        cursor: pointer;
        font-size: 20px;
        color: var(--text-muted);
        line-height: 1;
        padding: 0 2px;
    }
    body.m-native .email-card-star.starred {
        color: #f5a623;
    }
    body.m-native .email-card-row2 {
        display: block;
    }
    body.m-native .email-card-subject {
        display: block;
        font-size: 15px;
        color: var(--text-muted);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1.4;
    }
    body.m-native .email-card.unread .email-card-subject {
        color: var(--text-primary);
        font-weight: 500;
    }

    /* === 이메일 리스트 선택 바: 플랫 텍스트, 체크박스 세로 라인 카드와 일치 === */
    body.m-native .email-select-bar {
        flex-wrap: nowrap;
        gap: 8px;
        padding: 8px 14px;  /* 카드 padding-left 14px와 동일 → 체크박스 세로 라인 맞춤 */
        overflow-x: auto;
        border-bottom: 1px solid var(--light-border);
        align-items: center;
        min-height: 44px;
        background: var(--surface);
    }
    body.m-native .email-select-bar .email-select-all {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 0;
        margin: 0;
        font-size: 15px;
    }
    body.m-native .email-select-bar .email-select-all input[type="checkbox"] {
        width: 20px;
        height: 20px;
        margin: 0;
    }
    body.m-native .email-select-bar .btn-sm,
    body.m-native .email-select-bar button {
        flex: 0 0 auto;
        background: transparent;
        border: none;
        border-radius: 0;
        color: var(--text-primary);
        padding: 6px 10px;
        font-size: 15px;
        min-height: 36px;
        min-width: unset;
    }
    body.m-native .email-select-bar .btn-sm:active,
    body.m-native .email-select-bar button:active {
        background: var(--hover-bg);
    }

    /* === 페이지네이션: 한 줄 정렬, 가로스크롤 === */
    body.m-native .email-page-nav {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 6px 8px;
        gap: 2px;
        justify-content: flex-start;
    }
    body.m-native .email-page-nav .page-btn {
        flex: 0 0 auto;
        min-width: 36px;
        height: 36px;
        border-radius: 0;
        padding: 0 8px;
    }
    body.m-native .email-page-nav .page-info {
        flex: 0 0 auto;
        width: auto;
        margin: 0 0 0 8px;
        white-space: nowrap;
    }
    body.m-native .email-page-nav .page-dots {
        flex: 0 0 auto;
    }

    /* === 연락처 카드 버튼 영역: 균등 분할, 일관된 크기 === */
    body.m-native .contacts-card-actions {
        display: flex !important;
        gap: 8px !important;
        margin-top: 12px !important;
        width: 100%;
    }
    body.m-native .contacts-card-actions button {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        min-height: 40px !important;
        padding: 8px 4px !important;
        font-size: 15px !important;
        border-radius: 0 !important;
        text-align: center !important;
        margin: 0 !important;
        white-space: nowrap;
    }

    /* === 이메일 상세: 제목/메타 라인 정리 === */
    body.m-native .email-detail-subject {
        font-size: 17px;  /* 메타 16px + 1 */
        font-weight: 600;
        padding-bottom: 8px;
        margin-bottom: 10px;
    }
    body.m-native .email-detail-meta {
        padding: 10px 12px;
    }
    /* 보낸사람/받는사람/참조: flex로 hanging indent (라벨 고정폭, 값 줄바꿈 시 라벨 너비만큼 들여쓰기) */
    body.m-native .email-detail-from {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 4px 8px;
        margin-bottom: 6px;
    }
    body.m-native .email-detail-from > span:first-child {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        flex: 1;
        min-width: 0;
    }
    body.m-native .email-detail-to,
    body.m-native .email-detail-cc {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 4px;
    }
    body.m-native .email-detail-from strong,
    body.m-native .email-detail-to strong,
    body.m-native .email-detail-cc strong {
        flex: 0 0 72px;
        min-width: 72px;
        color: var(--text-secondary);
    }
    body.m-native .email-detail-value {
        flex: 1;
        min-width: 0;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    body.m-native .email-detail-date {
        flex: 0 0 auto;
        font-size: 13px;
        white-space: nowrap;
        margin-left: 0;
    }

    /* === 이메일 상세 본문: 긴 텍스트 자동 줄바꿈, 테이블/pre는 개별 가로스크롤 === */
    body.m-native .email-detail-content {
        overflow-x: hidden;
        padding: 14px;
    }
    body.m-native .email-detail-body {
        max-width: 100%;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }
    body.m-native .email-detail-body * {
        max-width: 100% !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
    }
    body.m-native .email-detail-body pre,
    body.m-native .email-detail-body code {
        white-space: pre-wrap !important;
        word-break: break-word !important;
    }
    /* 테이블: 전체 너비 초과 시 가로 스크롤 (구조 보존) */
    body.m-native .email-detail-body table {
        display: block !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        white-space: normal !important;
    }
    body.m-native .email-detail-body img,
    body.m-native .email-detail-body video,
    body.m-native .email-detail-body iframe {
        max-width: 100% !important;
        height: auto !important;
    }

    /* === 이메일 상세 헤더: 컴팩트 버튼 === */
    body.m-native .email-detail-panel .email-detail-header {
        flex-wrap: nowrap;
        padding: 6px 8px;
        gap: 4px;
    }
    body.m-native .email-detail-panel .email-detail-header .btn-back {
        flex: 0 0 auto;
        padding: 6px 10px;
        font-size: 14px;
        min-width: 60px;
        white-space: nowrap;
    }
    body.m-native .email-detail-panel .email-detail-actions {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        gap: 4px;
        flex-wrap: nowrap;
        overflow-x: auto;
    }
    body.m-native .email-detail-panel .email-detail-actions button {
        flex: 0 0 auto;
        padding: 6px 10px;
        font-size: 14px;
        min-height: 36px;
        white-space: nowrap;
    }

    /* === 이메일 작성 헤더: 컴팩트 === */
    body.m-native .email-compose-panel .email-detail-header {
        flex-wrap: nowrap;
        padding: 6px 8px;
        gap: 4px;
        align-items: center;
    }
    body.m-native .email-compose-panel .email-detail-header .btn-back {
        flex: 0 0 auto;
        padding: 6px 10px;
        font-size: 14px;
        min-width: 60px;
    }
    body.m-native .email-compose-panel .email-detail-header h3 {
        display: none;
    }
    body.m-native .email-compose-panel .compose-toolbar {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        gap: 4px;
        flex-wrap: nowrap;
    }
    body.m-native .email-compose-panel .compose-toolbar .compose-toolbar-btn {
        flex: 0 0 auto;
        padding: 6px 10px;
        font-size: 14px;
        min-height: 36px;
        white-space: nowrap;
    }

    /* === 대시보드: 세로 1열 스택 === */
    body.m-native .dashboard-zones {
        display: flex !important;
        flex-direction: column !important;
    }
    body.m-native .dashboard-zone {
        width: 100% !important;
        min-width: unset !important;
    }
    body.m-native .zone-section-grid {
        grid-template-columns: 1fr !important;
    }
    body.m-native .dash-stat-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    body.m-native .command-welcome {
        font-size: var(--ods-text-lg) !important;
    }
    body.m-native .command-action-count {
        font-size: var(--ods-text-2xl) !important;
    }

    /* 대시보드 긴급 카드 터치 확대 */
    body.m-native .dash-urgent-card {
        min-width: 140px;
        min-height: var(--ods-touch-comfortable);
        padding: var(--ods-space-4);
    }
    body.m-native .dash-urgent-card .uc-count {
        font-size: var(--ods-text-2xl);
    }
    body.m-native .dash-section-title {
        padding: var(--ods-space-3) var(--ods-space-4);
        font-size: var(--ods-text-base);
    }
}

/* === 회의 탭 직접 진입: 사이드바+채팅 숨기고 캔버스만 전체화면 === */
body.m-meeting-direct .messenger-sidebar,
body.m-meeting-direct .messenger-chat-area { display: none !important; }
body.m-meeting-direct .messenger-canvas-area {
    display: flex !important;
    position: fixed;
    inset: 0;
    z-index: 9500;
}
/* 탭바 숨김 (회의 중) */
body.m-meeting-direct .m-tab-bar { display: none !important; }
/* 더보기 메뉴에서 가로/세로 토글 숨김 (회의 탭은 항상 가로) */
body.m-meeting-direct #mmm-orientation { display: none !important; }

/* ==================== 대시보드 반응형 Grid ==================== */
@media (max-width: 768px) {
    .dashboard-zones {
        display: flex;
        flex-direction: column;
    }
    .zone-section-grid {
        grid-template-columns: 1fr;
    }
    .dash-stat-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
    .dash-urgent-zone, .dash-work-board, .dash-trends {
        width: 100%;
        min-width: 0;
    }
    /* 대시보드 위젯 시스템 모바일 */
    .dash-widget-drawer { width: 100%; }
    .dash-kpi-card .kpi-value { font-size: 20px; }
    .dash-kpi-card .kpi-label { font-size: 17px; }
    .dash-attendance-row .att-label { font-size: 17px; }
    .dash-attendance-row .att-value { font-size: 17px; }
    .dash-widget-title { font-size: 17px; }
    .dash-widget-more { font-size: 17px; padding: 4px 8px; }
    .dash-widget-empty { font-size: 17px; }
    .dash-widget-badge { font-size: 17px; }
    .drawer-widget-name { font-size: 17px; }
    .drawer-category { font-size: 17px; }
    .dash-mobile-widget-item { font-size: 17px; }
    .dash-header #btnEditDashboard { font-size: 17px; }
}

/* ==================== safe-area-inset (노치/다이나믹 아일랜드 대응) ==================== */
body.m-native .header {
    padding-top: var(--ods-safe-top, env(safe-area-inset-top));
}
body.m-native .main-content {
    padding-left: max(clamp(8px, 2vw, 20px), var(--ods-safe-left, env(safe-area-inset-left)));
    padding-right: max(clamp(8px, 2vw, 20px), var(--ods-safe-right, env(safe-area-inset-right)));
}
body.m-native .menubar {
    padding-top: calc(16px + var(--ods-safe-top, env(safe-area-inset-top)));
}

/* ==================== 모바일 최소 폰트 17px: ODS 토큰 오버라이드 ==================== */
@media (max-width: 768px) {
    :root {
        --ods-text-xs: 17px;
        --ods-text-sm: 17px;
        --ods-text-base: 17px;
        --ods-text-md: 17px;
        --ods-text-lg: 17px;
    }
}

/* ==================== 모바일 최소 폰트 17px: 테마 CSS 오버라이드 ==================== */
@media (max-width: 768px) {
    /* 공지사항 카드 */
    .notice-card-date { font-size: 17px !important; }
    .notice-card-title { font-size: 17px !important; }
    .notice-card-btn { font-size: 17px !important; }
    .dash-empty { font-size: 17px !important; }

    /* 결재 배지 */
    .approval-badge { font-size: 17px !important; }

    /* 회의모드 화면공유/캔버스 알림 */
    .screen-share-stop-bar .stop-btn-label { font-size: 17px !important; }
    .screen-share-stop-bar { font-size: 17px !important; }
    .canvas-notification-inner { font-size: 17px !important; }

    /* 탭바 아이템 라벨 */
    .ods-tab-bar-item-label { font-size: 17px !important; }

    /* 카드 리스트 빈 상태 */
    .m-card-list-empty { font-size: 17px !important; }
    .m-card-empty {
        text-align: center;
        color: var(--text-muted);
        padding: 32px 16px;
        font-size: 17px !important;
    }

    /* 카메라 타일 */
    .camera-tile-name { font-size: 17px !important; }
    .camera-tile-mute { font-size: 17px !important; }
    .camera-tile-pin { font-size: 17px !important; }
    .camera-grid-item-name { font-size: 17px !important; }
    .camera-grid-info-badge { font-size: 17px !important; }

    /* 참여자 패널 */
    .vp-camera-toggle { font-size: 17px !important; }
    .vp-button-muted::after { font-size: 17px !important; }
    .vp-presence-label { font-size: 17px !important; }
    .voice-panel-footer { font-size: 17px !important; }
    .voice-request-item-label { font-size: 17px !important; }
}

/* ==================== 인쇄 시 원래 크기 유지 ==================== */
@media print {
    #mainPage {
        width: 100%;
        max-width: none;
    }
    .a4-page {
        width: 210mm !important;
        min-width: 210mm !important;
        zoom: 1 !important;
        transform: none !important;
    }
}

/* ===== QMS 품질관리 모바일 ===== */
@media (max-width: 768px) {
    /* 검사 기준 모달: 전체 너비 */
    #qmsStandardModal .modal-content {
        width: 100% !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0;
    }

    /* QMS 테이블 → 모바일 카드 뷰 (data-label 기반) */
    #qmsStdItemsTable,
    #qmsInspResultsTable,
    #qmsCertItemsTable {
        min-width: 0 !important;
        border: none !important;
    }
    #qmsStdItemsTable thead,
    #qmsInspResultsTable thead,
    #qmsCertItemsTable thead {
        display: none !important;
    }
    #qmsStdItemsTable tbody tr,
    #qmsInspResultsTable tbody tr,
    #qmsCertItemsTable tbody tr {
        display: block !important;
        margin-bottom: 12px;
        padding: 12px;
        background: var(--surface);
        border-radius: 8px;
        border: 1px solid var(--light-border);
    }
    #qmsStdItemsTable tbody td,
    #qmsInspResultsTable tbody td,
    #qmsCertItemsTable tbody td {
        display: flex !important;
        align-items: center;
        padding: 7px 0 !important;
        border: none !important;
        border-bottom: 1px solid var(--light-border) !important;
        gap: 8px;
        width: 100% !important;
        text-align: left !important;
    }
    #qmsStdItemsTable tbody td:last-child,
    #qmsInspResultsTable tbody td:last-child,
    #qmsCertItemsTable tbody td:last-child {
        border-bottom: none !important;
    }
    /* # 열 숨김 */
    #qmsStdItemsTable tbody td:first-child,
    #qmsInspResultsTable tbody td:first-child,
    #qmsCertItemsTable tbody td:first-child {
        display: none !important;
    }
    /* data-label → ::before 라벨 */
    #qmsStdItemsTable tbody td[data-label]::before,
    #qmsInspResultsTable tbody td[data-label]::before,
    #qmsCertItemsTable tbody td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 80px;
        font-weight: 500;
        color: var(--text-muted);
        font-size: 17px;
        white-space: nowrap;
    }
    /* 빈 라벨 (삭제 버튼) */
    #qmsStdItemsTable tbody td[data-label=""]::before,
    #qmsCertItemsTable tbody td[data-label=""]::before {
        display: none;
    }
    /* 입력 요소 flex-1 */
    #qmsStdItemsTable tbody td input,
    #qmsStdItemsTable tbody td select,
    #qmsInspResultsTable tbody td input,
    #qmsInspResultsTable tbody td select,
    #qmsCertItemsTable tbody td input,
    #qmsCertItemsTable tbody td select {
        flex: 1;
        font-size: 17px !important;
        min-width: 0;
        width: auto !important;
    }
    /* checkbox 는 flex-1 불필요 */
    #qmsStdItemsTable tbody td input[type="checkbox"] {
        flex: 0 0 auto;
    }
    /* empty-state 전체 너비 */
    #qmsInspResultsTable tbody td[colspan] {
        display: block !important;
        text-align: center !important;
    }
    #qmsInspResultsTable tbody td[colspan]::before {
        display: none;
    }
    /* table-container 가로스크롤 제거 */
    #qmsStandardModal .table-container,
    #qmsInspectionModal .table-container,
    #qmsCertModal .table-container {
        overflow-x: visible !important;
    }

    /* 모달 내 폼 세로 배치 */
    #qmsStandardModal .form-row {
        flex-direction: column;
    }
    #qmsStandardModal .form-group {
        width: 100% !important;
    }

    /* QMS 탭 메뉴: 가로 스크롤 */
    #qmsDashboard ~ .tab-menu,
    #mainContent > .tab-menu {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    /* QMS 필터바: 감싸기 (생산운영 표준 모바일 레이아웃 따름 — 위 #mfgQuality 규칙 참고) */
    #qmsStandards .filter-bar,
    #qmsIncoming .filter-bar,
    #qmsProcess .filter-bar,
    #qmsFinal .filter-bar,
    #qmsNcr .filter-bar,
    #qmsCertificate .filter-bar {
        flex-wrap: wrap;
        gap: 6px;
    }
    /* 모든 select/text input 은 한 줄 차지 */
    #qmsStandards .filter-bar select,
    #qmsStandards .filter-bar input[type="text"],
    #qmsIncoming .filter-bar select,
    #qmsIncoming .filter-bar input[type="text"],
    #qmsProcess .filter-bar select,
    #qmsProcess .filter-bar input[type="text"],
    #qmsFinal .filter-bar select,
    #qmsFinal .filter-bar input[type="text"],
    #qmsNcr .filter-bar select,
    #qmsNcr .filter-bar input[type="text"],
    #qmsCertificate .filter-bar select,
    #qmsCertificate .filter-bar input[type="text"] {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        font-size: 17px !important;
    }
    /* 날짜는 두 개 반반 (50/50) */
    #qmsStandards .filter-bar input[type="date"],
    #qmsIncoming .filter-bar input[type="date"],
    #qmsProcess .filter-bar input[type="date"],
    #qmsFinal .filter-bar input[type="date"],
    #qmsNcr .filter-bar input[type="date"],
    #qmsCertificate .filter-bar input[type="date"] {
        flex: 1 1 calc(50% - 3px) !important;
        min-width: 0 !important;
        width: auto !important;
        padding: 0 8px !important;
    }
    /* 검색/조회 단독 버튼: 한 줄 */
    #qmsStandards .filter-bar > button,
    #qmsIncoming .filter-bar > button,
    #qmsProcess .filter-bar > button,
    #qmsFinal .filter-bar > button,
    #qmsNcr .filter-bar > button,
    #qmsCertificate .filter-bar > button {
        flex: 1 1 100% !important;
        font-size: 17px !important;
        white-space: nowrap;
    }

    /* QMS 테이블: 모바일 숨김 (카드 뷰 사용) */
    body.m-native #qmsStandards .table-container,
    body.m-native #qmsIncoming .table-container,
    body.m-native #qmsProcess .table-container,
    body.m-native #qmsFinal .table-container,
    body.m-native #qmsNcr .table-container,
    body.m-native #qmsCertificate .table-container,
    body.m-native #qmsSupplier .table-container,
    body.m-native #qmsCalibration .table-container {
        display: none;
    }

    /* QMS 대시보드 통계 그리드 */
    #qmsStatsGrid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* QMS 검사 모달 (Phase 2) */
    #qmsInspectionModal .modal-content {
        max-width: 95vw;
    }
    /* min-width/font-size → QMS 카드 뷰 규칙으로 통합됨 */
    .qms-meas-input,
    .qms-memo-input {
        font-size: 17px !important;
        min-height: 36px;
    }
    #qmsInspectionModal .form-row {
        flex-direction: column;
    }
    #qmsInspectionModal .form-group {
        margin-bottom: 10px;
    }

    /* QMS Phase 5: 거래처 평가 + 교정 관리 모달 */
    #qmsSupplierScoreModal .modal-content,
    #qmsCalibrationModal .modal-content {
        max-width: 95vw;
    }
    #qmsSupplierScoreModal .form-row,
    #qmsCalibrationModal .form-row {
        flex-direction: column;
    }
    #qmsSupplierScoreModal .form-group,
    #qmsCalibrationModal .form-group {
        margin-bottom: 10px;
    }

    /* QMS 새 탭 필터바 — 생산운영 표준 모바일 레이아웃 적용 */
    #qmsSupplier .filter-bar,
    #qmsCalibration .filter-bar {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        overflow-x: visible !important;
    }
    #qmsSupplier .filter-bar select,
    #qmsSupplier .filter-bar input[type="text"],
    #qmsCalibration .filter-bar select,
    #qmsCalibration .filter-bar input[type="text"] {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    #qmsSupplier .filter-bar input[type="date"],
    #qmsCalibration .filter-bar input[type="date"] {
        flex: 1 1 calc(50% - 3px) !important;
        min-width: 0 !important;
        padding: 0 8px !important;
    }
    #qmsSupplier .filter-bar > button,
    #qmsCalibration .filter-bar > button {
        flex: 1 1 100% !important;
        white-space: nowrap;
    }

    /* QMS 모달 내 테이블 → 앱 스타일 */
    #qmsStandardModal table,
    #qmsInspectionModal table,
    #qmsNcrDetailModal table,
    #qmsCertModal table,
    #qmsSupplierScoreModal table,
    #qmsCalibrationModal table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid var(--border-color);
    }
    #qmsStandardModal table th,
    #qmsInspectionModal table th,
    #qmsNcrDetailModal table th,
    #qmsCertModal table th {
        font-size: 17px !important;
        padding: 12px 10px !important;
        background: var(--surface) !important;
        white-space: nowrap;
    }
    #qmsStandardModal table td,
    #qmsInspectionModal table td,
    #qmsNcrDetailModal table td,
    #qmsCertModal table td {
        font-size: 17px !important;
        padding: 14px 10px !important;
        border-bottom: 1px solid var(--light-border);
    }
    /* QMS 모달 내 폼 라벨/값 */
    #qmsStandardModal .form-group label,
    #qmsInspectionModal .form-group label,
    #qmsNcrDetailModal .form-group label,
    #qmsCertModal .form-group label {
        font-size: 17px !important;
        color: var(--text-muted);
    }
    #qmsStandardModal .form-group div,
    #qmsInspectionModal .form-group div,
    #qmsNcrDetailModal .form-group div,
    #qmsCertModal .form-group div {
        font-size: 17px !important;
    }
    #qmsStandardModal h4,
    #qmsInspectionModal h4,
    #qmsNcrDetailModal h4,
    #qmsCertModal h4 {
        font-size: 17px !important;
        font-weight: 700;
    }
    #qmsStandardModal .btn-sm,
    #qmsInspectionModal .btn-sm,
    #qmsNcrDetailModal .btn-sm,
    #qmsCertModal .btn-sm {
        font-size: 17px !important;
        padding: 8px 14px !important;
        min-height: 44px;
    }
    /* QMS 모달 전체 너비 */
    #qmsNcrModal .modal-content,
    #qmsNcrDetailModal .modal-content,
    #qmsCertModal .modal-content {
        width: 100% !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0;
    }
    #qmsNcrModal .form-row,
    #qmsNcrDetailModal .form-row,
    #qmsCertModal .form-row {
        flex-direction: column;
    }
    #qmsNcrModal .form-group,
    #qmsNcrDetailModal .form-group,
    #qmsCertModal .form-group {
        width: 100% !important;
        margin-bottom: 10px;
    }
    /* NCR 상세 정보 그리드: 모바일 1열 */
    #qmsNcrDetailInfo > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/* ===== 설비관리(CMMS) 모바일 ===== */
@media (max-width: 768px) {
    /* 설비관리 모달: 전체 너비 */
    #eqFormModal .modal-content,
    #eqDetailModal .modal-content,
    #eqWoFormModal .modal-content,
    #eqWoDetailModal .modal-content {
        width: 100% !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0;
    }
    #eqPmFormModal .modal-content,
    #eqBreakdownFormModal .modal-content {
        width: 100% !important;
        max-width: 95vw !important;
    }

    /* 모달 내 폼 세로 배치 */
    #eqFormModal .form-row,
    #eqPmFormModal .form-row,
    #eqWoFormModal .form-row,
    #eqBreakdownFormModal .form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }
    #eqFormModal .form-row .form-group,
    #eqPmFormModal .form-row .form-group,
    #eqWoFormModal .form-row .form-group,
    #eqBreakdownFormModal .form-row .form-group {
        flex: unset !important;
        width: 100% !important;
    }

    /* 설비관리 필터바: 생산운영 표준 모바일 레이아웃 (위 #mfgEquipment 규칙 참고) */
    #equipmentPage .filter-bar {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    #equipmentPage .filter-bar select,
    #equipmentPage .filter-bar input[type="text"],
    #equipmentPage .filter-bar input[type="search"] {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        font-size: 17px !important;
    }
    #equipmentPage .filter-bar input[type="date"] {
        flex: 1 1 calc(50% - 3px) !important;
        min-width: 0 !important;
        padding: 0 8px !important;
    }
    #equipmentPage .filter-bar > button {
        flex: 1 1 100% !important;
        white-space: nowrap;
    }

    /* 설비 상세 모달 서브탭 */
    #eqDetailModal .sub-tab-menu {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    /* 설비관리 테이블 숨기기 + 카드 표시 */
    #eqRegistry .table-container,
    #eqPm .table-container,
    #eqWo .table-container,
    #eqBreakdown .table-container,
    #eqParts .table-container {
        display: none;
    }
    #eqRegistryCards,
    #eqPmCards,
    #eqWoCards,
    #eqBreakdownCards,
    #eqPartsCards {
        display: block !important;
    }

    /* 상세 모달: 테이블↔카드 뷰 전환 (CSS 강제) — 설비관리 전용 */
    #eqWoDetailModal .wo-detail-table-view,
    #eqDetailModal .eq-detail-table-view {
        display: none !important;
    }
    #eqWoDetailModal .wo-detail-card-view,
    #eqDetailModal .eq-detail-card-view {
        display: block !important;
    }

    /* 설비 상세 모달: 모바일 컴팩트 (400×700 기준) */
    #eqDetailModal .modal-content {
        padding: 10px !important;
    }
    #eqDetailModal .eq-detail-grid {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        margin-bottom: 4px !important;
    }
    #eqDetailModal .modal-body .form-section {
        padding: 6px 8px !important;
        margin-bottom: 4px !important;
    }
    #eqDetailModal .modal-body .form-section h4 {
        font-size: 12px !important;
        margin: 0 0 4px 0 !important;
        padding-bottom: 2px !important;
    }
    #eqDetailModal .detail-view .form-group {
        margin-bottom: 0 !important;
        padding: 2px 0 !important;
        border-bottom: none !important;
    }
    #eqDetailModal .detail-view .form-group label {
        flex: 0 0 68px !important;
        font-size: 12px !important;
    }
    #eqDetailModal .detail-view .form-group > div {
        font-size: 13px !important;
    }
    #eqDetailModal .sub-tab-btn {
        padding: 4px 8px !important;
        font-size: 12px !important;
    }
    #eqDetailModal .table-container,
    #eqDetailModal .eq-detail-card-view {
        max-height: 16vh !important;
        overflow-y: auto !important;
    }
    #eqDetailModal .eq-detail-card-view .m-card {
        padding: 4px 6px !important;
        font-size: 12px !important;
    }
    #eqDetailModal .modal-header { margin-bottom: 4px !important; padding-bottom: 4px !important; }
    #eqDetailModal .modal-header h3 { font-size: 14px !important; }
    #eqDetailModal .modal-buttons-sticky { padding: 6px 10px !important; }
    #eqDetailModal .modal-buttons-sticky button { font-size: 13px !important; padding: 6px 8px !important; }

    /* WO 상세 모달: 체크리스트/부품 카드 스타일 */
    .wo-detail-kv {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 7px 0;
        border-bottom: 1px solid var(--light-border);
        font-size: 17px;
    }
    .wo-detail-kv:last-child {
        border-bottom: none;
    }
    .wo-detail-kv-label {
        flex: 0 0 80px;
        color: var(--text-muted);
        font-weight: 500;
        font-size: 17px;
        white-space: nowrap;
    }
    .wo-detail-kv-value {
        flex: 1;
        font-size: 17px;
        color: var(--text-primary);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
    .wo-detail-part-card {
        padding: 8px 0;
        border-bottom: 2px solid var(--light-border);
    }
    .wo-detail-part-card:last-child {
        border-bottom: none;
    }
    .wo-detail-part-card .wo-detail-kv {
        padding: 4px 0;
    }
    /* h4, btn-sm → 글로벌 앱모달 카드 스타일로 통합됨 */

    /* 설비관리 스탯 그리드 */
    #eqDashboard .item-stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px;
    }

    /* 최소 폰트 17px 정책 */
    #equipmentPage select,
    #equipmentPage input,
    #equipmentPage textarea,
    #equipmentPage td,
    #equipmentPage th,
    #equipmentPage .form-group label,
    #eqFormModal select,
    #eqFormModal input,
    #eqFormModal textarea,
    #eqPmFormModal select,
    #eqPmFormModal input,
    #eqWoFormModal select,
    #eqWoFormModal input,
    #eqWoFormModal textarea,
    #eqBreakdownFormModal select,
    #eqBreakdownFormModal input,
    #eqBreakdownFormModal textarea {
        font-size: 17px !important;
    }

    /* ===== 통합 검색 반응형 - 최소 17px 정책 ===== */
    #globalSearchInput {
        font-size: 17px !important;
        min-width: 100% !important;
    }
    .btn-search-primary {
        font-size: 17px !important;
    }
    /* 아코디언 */
    .sa-group-header {
        font-size: 17px !important;
        padding: 14px 12px !important;
    }
    .sa-group-title { font-size: 17px !important; }
    .sa-module-header {
        font-size: 17px !important;
        padding: 12px 8px !important;
    }
    .sa-field-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    }
    .sa-field-label {
        font-size: 17px !important;
    }
    /* 토글 라벨 — 모듈 라벨(17px)과 동일 폰트, nowrap 강제 (좁은 영역에서 글자 1자씩 wrap 방지) */
    .sa-selall {
        font-size: 17px !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }
    .sa-group-count { font-size: 17px !important; }
    .sa-bulk-toggle {
        font-size: 17px !important;
        padding: 4px 8px !important;
        white-space: nowrap !important;
        flex: 0 0 auto !important;
    }
    .sa-bulk-sep {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
    /* sa-help-bar 모바일: 안내문은 100% 너비, 토글들은 자연 가로 정렬 */
    .sa-help-bar {
        flex-wrap: wrap !important;
        gap: 6px 10px !important;
        padding: 10px 12px !important;
    }
    .sa-help-bar > span:not(.sa-bulk-toggle):not(.sa-bulk-sep):not(.sa-help-icon) {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
    .sa-help-bar .sa-bulk-toggle:first-of-type {
        margin-left: 0 !important;
    }
    /* 그룹 헤더 / 모듈 헤더에서 토글이 헤더 너비를 넘지 않도록 — 한 줄 배치 보장 */
    .sa-group-header, .sa-module-header {
        flex-wrap: nowrap !important;
        align-items: center !important;
    }
    .sa-group-header > .sa-group-title {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .sa-module-header > span:not(.sa-arrow-sm):not(.sa-selall) {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 17px !important;
    }
    .sa-filter-label { font-size: 17px !important; }
    /* 공통 필터 */
    #sfDateFrom, #sfDateTo, #sfStatus {
        font-size: 17px !important;
    }
    /* 검색 결과 */
    #searchResults { font-size: 17px !important; }
    .search-card, .search-card * { font-size: 17px !important; }
    .sa-result-header, .sa-result-header * { font-size: 17px !important; }
    .search-more { font-size: 17px !important; }
    #searchResults > div > div { font-size: 17px !important; }
    /* 검색 결과 버튼 */
    #searchResults button,
    #searchAccordion button {
        font-size: 17px !important;
    }
    /* ===== 기본 검색 - 검색바(입력+4버튼) 정렬 ===== */
    #normalSearchArea > .filter-bar:first-of-type {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: stretch !important;
    }
    #normalSearchArea > .filter-bar:first-of-type > #globalSearchInput {
        flex: 0 0 100% !important;
        min-width: 0 !important;
        padding: 12px 10px !important;
    }
    #normalSearchArea > .filter-bar:first-of-type > span {
        display: none !important;
    }
    #normalSearchArea > .filter-bar:first-of-type > button {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
        padding: 12px 8px !important;
        font-size: 17px !important;
        white-space: nowrap !important;
    }

    /* ===== 기본 검색 - 공통 필터(기간/상태/초기화) 정렬 — 50차 dr-filter 적용 후 갱신 =====
       구조: 기간 라벨 / dr-filter / 상태 라벨 / select / 초기화 버튼
       모바일 그리드(52px label + 1fr control 2열) 2행 + 초기화 단독행 */
    #normalSearchArea > .filter-bar ~ .filter-bar {
        display: grid !important;
        grid-template-columns: 52px 1fr !important;
        column-gap: 8px !important;
        row-gap: 8px !important;
        align-items: center !important;
        justify-items: stretch !important;
        margin-top: 8px !important;
    }
    #normalSearchArea > .filter-bar ~ .filter-bar .sa-filter-label {
        margin: 0 !important;
        padding: 0 0 0 10px !important;
        display: inline-block !important;
        text-align: left !important;
        justify-self: start !important;
        align-self: center !important;
        white-space: nowrap !important;
        width: 100% !important;
    }
    #normalSearchArea > .filter-bar ~ .filter-bar > .dr-filter {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }
    #normalSearchArea > .filter-bar ~ .filter-bar > .dr-filter .dr-btn {
        padding: 10px 8px !important;
    }
    #normalSearchArea > .filter-bar ~ .filter-bar > #sfStatus {
        width: 100% !important;
        min-width: 0 !important;
        padding: 10px 8px !important;
        box-sizing: border-box !important;
    }
    #normalSearchArea > .filter-bar ~ .filter-bar > .btn-cancel {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        padding: 10px 8px !important;
        font-size: 17px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    /* ===== 고급 검색 - 헤더 ===== */
    .sa-adv-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        padding: 10px 12px !important;
    }
    .sa-adv-header > span {
        text-align: left !important;
    }

    /* ===== 고급 검색 옵션 C: 상단행/프리셋박스/조합행 ===== */
    .sa-adv-toprow {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    .sa-adv-titlebox { width: 100% !important; }
    .sa-adv-presetbox {
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .sa-adv-presetbox > .sa-adv-select {
        flex: 1 1 100% !important;
        width: 100% !important;
        font-size: 17px !important;
        padding: 10px 12px !important;
        height: 44px !important;
        box-sizing: border-box !important;
        text-overflow: ellipsis !important;
    }
    .sa-adv-presetbox > button {
        flex: 1 1 calc(33.333% - 6px) !important;
        font-size: 15px !important;
        padding: 0 8px !important;
        height: 44px !important;
        box-sizing: border-box !important;
    }
    .sa-adv-combinatorrow {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        padding: 10px 12px !important;
    }
    .sa-adv-combinatorrow > .sa-filter-label {
        flex: 0 0 100% !important;
        font-weight: 600;
    }
    .sa-adv-combinatorrow > .sa-adv-radio {
        flex: 1 1 calc(50% - 4px) !important;
        justify-content: center !important;
        font-size: 17px !important;
        padding: 10px 4px !important;
    }
    .sa-adv-mod {
        flex: 1 1 calc(50% - 4px) !important;
        max-width: none !important;
        font-size: 17px !important;
    }
    .sa-adv-comb {
        flex: 0 0 80px !important;
        max-width: 90px !important;
        font-size: 17px !important;
    }

    /* ===== 고급 검색 - 모듈/조합 바 (구) ===== */
    .sa-adv-topbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    .sa-adv-topbar > .sa-filter-label {
        flex: 0 0 100% !important;
        margin: 0 !important;
        font-weight: 600;
        color: var(--text-heading);
    }
    .sa-adv-topbar > .sa-adv-select {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 10px 8px !important;
        font-size: 17px !important;
    }
    .sa-adv-topbar > .sa-adv-radio {
        flex: 1 1 calc(50% - 4px) !important;
        justify-content: center !important;
        padding: 10px 4px !important;
        font-size: 17px !important;
    }

    /* ===== 고급 검색 - 프리셋 바 ===== */
    .sa-adv-presetbar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    .sa-adv-presetbar > .sa-filter-label {
        flex: 0 0 100% !important;
        margin: 0 !important;
        font-weight: 600;
        color: var(--text-heading);
    }
    .sa-adv-presetbar > .sa-adv-select {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 10px 8px !important;
        font-size: 17px !important;
    }
    .sa-adv-presetbar > button {
        flex: 1 1 calc(33.333% - 6px) !important;
        width: auto !important;
        padding: 10px 4px !important;
        font-size: 15px !important;
        white-space: nowrap !important;
    }

    /* ===== 고급 검색 - 조건 행 (옵션 C: 셀렉트 한 줄씩, 입력+X 같은 줄, 44px 통일) ===== */
    .sa-adv-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    /* 셀렉트(결합자/모듈/필드/연산자) 모두 100% 너비 */
    .sa-adv-row > .sa-adv-select {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 44px !important;
        padding: 10px 12px !important;
        font-size: 17px !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }
    /* 값 입력 — 남은 공간 차지, X 버튼과 같은 줄 */
    .sa-adv-row > .sa-adv-input {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        height: 44px !important;
        padding: 10px 12px !important;
        font-size: 17px !important;
        box-sizing: border-box !important;
    }
    /* between 연산자의 ~ 구분자 */
    .sa-adv-row > span {
        flex: 0 0 auto !important;
        text-align: center !important;
        font-size: 14px !important;
        padding: 0 4px !important;
    }
    /* X 버튼 — 정사각 44×44, 입력과 같은 줄 */
    .sa-adv-row > .sa-adv-del {
        flex: 0 0 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        margin-left: 0 !important;
        padding: 0 !important;
        font-size: 17px !important;
        box-sizing: border-box !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* 결합자/모듈 wrap 깨지지 않도록 옛 50:50 규칙 무력화 */
    .sa-adv-mod, .sa-adv-comb {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .sa-adv-desc {
        padding: 2px 12px 8px 12px !important;
        font-size: 14px !important;
    }

    /* ===== 고급 검색 - 액션 버튼 ===== */
    .sa-adv-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    .sa-adv-actions > .btn-add {
        flex: 0 0 100% !important;
        width: 100% !important;
        height: 44px !important;
        padding: 0 8px !important;
        font-size: 17px !important;
        box-sizing: border-box !important;
    }
    .sa-adv-actions > div[style*="flex:1"],
    .sa-adv-actions > div[style*="flex: 1"] {
        display: none !important;
    }
    .sa-adv-actions > .btn-search-primary,
    .sa-adv-actions > .btn-confirm,
    .sa-adv-actions > .btn-cancel {
        flex: 1 1 calc(33.333% - 6px) !important;
        width: auto !important;
        height: 44px !important;
        padding: 0 4px !important;
        font-size: 17px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
    #advancedFilterPanel button { font-size: 17px !important; }
}

/* ==================== 근태관리 모바일 ==================== */
@media (max-width: 768px) {
    .att-correct-link {
        font-size: 17px !important;
    }

    #attendancePage .filter-bar select,
    #attendancePage .filter-bar input[type="text"],
    #attendancePage .filter-bar input[type="date"],
    #attendancePage .filter-bar input[type="month"] {
        flex: 1 1 calc(50% - 8px) !important;
        min-width: 0 !important;
        font-size: 17px !important;
    }

    /* 근태관리 필터바 정렬: 버튼도 50% (select과 페어) */
    #attendancePage .filter-bar > .btn-confirm,
    #attendancePage .filter-bar > .btn-add {
        flex: 1 1 calc(50% - 8px) !important;
        min-width: 0 !important;
        font-size: 17px !important;
        padding: 0 4px !important;
    }

    /* 근무시간: 25일 마감 preset은 전체줄 사용 */
    #attMonthlyPreset {
        flex: 1 1 100% !important;
    }

    /* 근태관리 필터바의 ~ 구분자 숨김 (공간 절약) */
    #attendancePage .filter-bar > span {
        display: none !important;
    }

    /* 휴가 탭: 유형 select을 조회 버튼 앞으로 재배치 (dates 쌍 + type|조회 쌍) */
    #attLeaveFilterType { order: 3 !important; }
    #attLeave > .filter-bar > .btn-confirm { order: 4 !important; }

    /* 52시간 모니터링: date를 맨 위 전체줄로, dept|조회를 다음줄에 쌍으로 */
    #attTeam > .filter-bar > #attWeeklyFilterDate {
        order: -1 !important;
        flex: 1 1 100% !important;
    }

    /* Table → Card toggle */
    #attDashboard .table-container,
    #attCheckin .table-container,
    #attLeave .table-container,
    #attMonthly .table-container,
    #attBalance .table-container,
    #attPolicy .table-container {
        display: none !important;
    }
    /* 52시간 모니터링은 테이블도 카드도 모바일 표시 */
    #attTeam .table-container {
        display: none !important;
    }
    #attRecordCards,
    #attLeaveCards,
    #attMonthlyCards,
    #attWeeklyCards,
    #attBalanceCards,
    #attPolicyCards {
        display: block !important;
    }

    /* Check-in big button */
    .att-checkin-card {
        text-align: center;
        padding: 20px;
    }
    .att-checkin-btn {
        width: 100%;
        padding: 16px;
        font-size: 18px !important;
        border-radius: 12px;
        margin: 8px 0;
    }

    /* 52h gauge */
    .att-gauge-bar {
        height: 24px;
        border-radius: 12px;
    }

    /* Min font 17px policy */
    #attendancePage select,
    #attendancePage input,
    #attendancePage textarea,
    #attendancePage td,
    #attendancePage th,
    #attendancePage .m-card-val,
    #attendancePage .m-card-key,
    #attendancePage .m-card-title {
        font-size: 17px !important;
    }

    /* Stats grid 2x2 on mobile */
    #attendancePage .item-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Team grid */
    .att-team-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Modal full width (QMS 패턴 동일) */
    #attLeaveFormModal .modal-content,
    #attRecordEditModal .modal-content,
    #attBalanceAdjustModal .modal-content,
    #attPolicyFormModal .modal-content,
    #attLeaveDetailModal .modal-content,
    #attPersonDetailModal .modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
        margin: 0;
    }

    /* Form vertical on mobile */
    #attendancePage .form-row {
        flex-direction: column;
    }

    /* 개인별 근무 상세 테이블 — 모바일에서도 표시 (카드뷰 불필요) */
    #attPersonDetailSection .table-container {
        display: block !important;
        overflow-x: auto;
    }

    /* 개인별 근무 상세 통계 카드 — 4열→2×2 그리드 */
    #attPersonDetailSection .item-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ==================== 보고서/통계 모바일 ==================== */
@media (max-width: 768px) {
    /* KPI 카드 2x2 그리드 (전 탭). 아래 "차트 1열" 규칙보다 specificity가 높아야 하므로 속성 셀렉터 추가 */
    #reportDashboard .item-stats-grid[style],
    #reportSales .item-stats-grid[style],
    #reportClosing .item-stats-grid[style],
    #reportPurchaseClosing .item-stats-grid[style],
    #reportProduction .item-stats-grid[style],
    #reportInventory .item-stats-grid[style],
    #reportQuality .item-stats-grid[style],
    #reportSamples .item-stats-grid[style],
    #reportDevice .item-stats-grid[style] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* 차트 그리드: 1열 세로 스택 (KPI 그리드는 제외해서 KPI가 1열로 붕괴되지 않도록) */
    #reportDashboard > div[style*="grid-template-columns"]:not(.item-stats-grid),
    #reportSales > div[style*="grid-template-columns"]:not(.item-stats-grid),
    #reportProduction > div[style*="grid-template-columns"]:not(.item-stats-grid),
    #reportInventory > div[style*="grid-template-columns"]:not(.item-stats-grid),
    #reportQuality > div[style*="grid-template-columns"]:not(.item-stats-grid),
    #reportSamples > div[style*="grid-template-columns"]:not(.item-stats-grid),
    #reportDevice > div[style*="grid-template-columns"]:not(.item-stats-grid) {
        grid-template-columns: 1fr !important;
    }

    /* 차트 컨테이너 높이 축소 (인라인 height:280px/300px 오버라이드) */
    #reportDashboard .form-section > div[style*="height:"],
    #reportSales .form-section > div[style*="height:"],
    #reportProduction .form-section > div[style*="height:"],
    #reportInventory .form-section > div[style*="height:"],
    #reportQuality .form-section > div[style*="height:"],
    #reportSamples .form-section > div[style*="height:"],
    #reportDevice .form-section > div[style*="height:"] {
        height: 220px !important;
    }

    /* 필터바 — 앱 표준 패턴 (장치개발/거래처/문서 기준):
       셀렉터·텍스트입력·체크박스라벨·버튼은 한 줄(100% 폭),
       날짜는 dd-date-row 내부에서 50:50 (~ 구분자는 가림),
       margin-left:auto 우측 액션 div 컨테이너는 한 줄로 균등 분배 */
    #reportDashboard .filter-bar,
    #reportSales .filter-bar,
    #reportClosing .filter-bar,
    #reportPurchaseClosing .filter-bar,
    #reportProduction .filter-bar,
    #reportInventory .filter-bar,
    #reportQuality .filter-bar,
    #reportSamples .filter-bar,
    #reportDevice .filter-bar,
    #reportSnapshots .filter-bar {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        padding: 4px 0 !important;
        flex-wrap: wrap !important;
        overflow-x: visible !important;
    }
    #reportDashboard .filter-bar > select,
    #reportDashboard .filter-bar > input[type="text"],
    #reportDashboard .filter-bar > input[type="date"],
    #reportDashboard .filter-bar > .btn-confirm,
    #reportDashboard .filter-bar > .btn-add,
    #reportDashboard .filter-bar > label,
    #reportSales .filter-bar > select,
    #reportSales .filter-bar > input[type="text"],
    #reportSales .filter-bar > input[type="date"],
    #reportSales .filter-bar > .btn-confirm,
    #reportSales .filter-bar > .btn-add,
    #reportSales .filter-bar > label,
    #reportClosing .filter-bar > select,
    #reportClosing .filter-bar > input[type="text"],
    #reportClosing .filter-bar > input[type="date"],
    #reportClosing .filter-bar > .btn-confirm,
    #reportClosing .filter-bar > .btn-add,
    #reportClosing .filter-bar > label,
    #reportPurchaseClosing .filter-bar > select,
    #reportPurchaseClosing .filter-bar > input[type="text"],
    #reportPurchaseClosing .filter-bar > input[type="date"],
    #reportPurchaseClosing .filter-bar > .btn-confirm,
    #reportPurchaseClosing .filter-bar > .btn-add,
    #reportPurchaseClosing .filter-bar > label,
    #reportProduction .filter-bar > select,
    #reportProduction .filter-bar > input[type="text"],
    #reportProduction .filter-bar > input[type="date"],
    #reportProduction .filter-bar > .btn-confirm,
    #reportProduction .filter-bar > .btn-add,
    #reportProduction .filter-bar > label,
    #reportInventory .filter-bar > select,
    #reportInventory .filter-bar > input[type="text"],
    #reportInventory .filter-bar > input[type="date"],
    #reportInventory .filter-bar > .btn-confirm,
    #reportInventory .filter-bar > .btn-add,
    #reportInventory .filter-bar > label,
    #reportQuality .filter-bar > select,
    #reportQuality .filter-bar > input[type="text"],
    #reportQuality .filter-bar > input[type="date"],
    #reportQuality .filter-bar > .btn-confirm,
    #reportQuality .filter-bar > .btn-add,
    #reportQuality .filter-bar > label,
    #reportSamples .filter-bar > select,
    #reportSamples .filter-bar > input[type="text"],
    #reportSamples .filter-bar > input[type="date"],
    #reportSamples .filter-bar > .btn-confirm,
    #reportSamples .filter-bar > .btn-add,
    #reportSamples .filter-bar > label,
    #reportDevice .filter-bar > select,
    #reportDevice .filter-bar > input[type="text"],
    #reportDevice .filter-bar > input[type="date"],
    #reportDevice .filter-bar > .btn-confirm,
    #reportDevice .filter-bar > .btn-add,
    #reportDevice .filter-bar > label,
    #reportSnapshots .filter-bar > select,
    #reportSnapshots .filter-bar > .btn-confirm,
    #reportSnapshots .filter-bar > .btn-add {
        width: 100% !important;
        flex: unset !important;
        box-sizing: border-box !important;
        font-size: 17px !important;
        padding: 8px !important;
        min-height: 44px !important;
        white-space: normal !important;
    }
    /* 날짜 2개 50:50 (dd-date-row 내부) — display 는 default(.dd-date-row{display:flex}) 사용,
       대시보드에서 inline style="display:none" (이번 달/지난 달 등) 을 덮어쓰지 않도록 !important 제외 */
    #reportDashboard .filter-bar .dd-date-row,
    #reportSales .filter-bar .dd-date-row,
    #reportClosing .filter-bar .dd-date-row,
    #reportPurchaseClosing .filter-bar .dd-date-row,
    #reportProduction .filter-bar .dd-date-row,
    #reportInventory .filter-bar .dd-date-row,
    #reportQuality .filter-bar .dd-date-row,
    #reportSamples .filter-bar .dd-date-row,
    #reportDevice .filter-bar .dd-date-row {
        gap: 6px !important;
        width: 100% !important;
        flex-direction: row !important;
    }
    #reportDashboard .filter-bar .dd-date-row > input,
    #reportSales .filter-bar .dd-date-row > input,
    #reportClosing .filter-bar .dd-date-row > input,
    #reportPurchaseClosing .filter-bar .dd-date-row > input,
    #reportProduction .filter-bar .dd-date-row > input,
    #reportInventory .filter-bar .dd-date-row > input,
    #reportQuality .filter-bar .dd-date-row > input,
    #reportSamples .filter-bar .dd-date-row > input,
    #reportDevice .filter-bar .dd-date-row > input {
        flex: 1 !important;
        width: 0 !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        font-size: 17px !important;
        padding: 8px !important;
        min-height: 44px !important;
    }
    #reportDashboard .filter-bar .dd-date-row > span,
    #reportSales .filter-bar .dd-date-row > span,
    #reportClosing .filter-bar .dd-date-row > span,
    #reportPurchaseClosing .filter-bar .dd-date-row > span,
    #reportProduction .filter-bar .dd-date-row > span,
    #reportInventory .filter-bar .dd-date-row > span,
    #reportQuality .filter-bar .dd-date-row > span,
    #reportSamples .filter-bar .dd-date-row > span,
    #reportDevice .filter-bar .dd-date-row > span {
        display: none !important;
    }
    /* 우측 액션 div 컨테이너 (margin-left:auto) — 한 줄에 균등 분배 */
    #reportDashboard .filter-bar > div:not(.dd-date-row):not(.item-stats-grid),
    #reportSales .filter-bar > div:not(.dd-date-row):not(.item-stats-grid),
    #reportClosing .filter-bar > div:not(.dd-date-row):not(.item-stats-grid),
    #reportPurchaseClosing .filter-bar > div:not(.dd-date-row):not(.item-stats-grid),
    #reportProduction .filter-bar > div:not(.dd-date-row):not(.item-stats-grid),
    #reportInventory .filter-bar > div:not(.dd-date-row):not(.item-stats-grid),
    #reportQuality .filter-bar > div:not(.dd-date-row):not(.item-stats-grid),
    #reportSamples .filter-bar > div:not(.dd-date-row):not(.item-stats-grid),
    #reportDevice .filter-bar > div:not(.dd-date-row):not(.item-stats-grid) {
        width: 100% !important;
        margin-left: 0 !important;
        display: flex !important;
        gap: 6px !important;
    }
    #reportDashboard .filter-bar > div:not(.dd-date-row):not(.item-stats-grid) > .btn-add,
    #reportDashboard .filter-bar > div:not(.dd-date-row):not(.item-stats-grid) > .btn-confirm,
    #reportSales .filter-bar > div:not(.dd-date-row):not(.item-stats-grid) > .btn-add,
    #reportSales .filter-bar > div:not(.dd-date-row):not(.item-stats-grid) > .btn-confirm,
    #reportClosing .filter-bar > div:not(.dd-date-row):not(.item-stats-grid) > .btn-add,
    #reportClosing .filter-bar > div:not(.dd-date-row):not(.item-stats-grid) > .btn-confirm,
    #reportPurchaseClosing .filter-bar > div:not(.dd-date-row):not(.item-stats-grid) > .btn-add,
    #reportPurchaseClosing .filter-bar > div:not(.dd-date-row):not(.item-stats-grid) > .btn-confirm,
    #reportProduction .filter-bar > div:not(.dd-date-row):not(.item-stats-grid) > .btn-add,
    #reportProduction .filter-bar > div:not(.dd-date-row):not(.item-stats-grid) > .btn-confirm,
    #reportInventory .filter-bar > div:not(.dd-date-row):not(.item-stats-grid) > .btn-add,
    #reportInventory .filter-bar > div:not(.dd-date-row):not(.item-stats-grid) > .btn-confirm,
    #reportQuality .filter-bar > div:not(.dd-date-row):not(.item-stats-grid) > .btn-add,
    #reportQuality .filter-bar > div:not(.dd-date-row):not(.item-stats-grid) > .btn-confirm,
    #reportSamples .filter-bar > div:not(.dd-date-row):not(.item-stats-grid) > .btn-add,
    #reportSamples .filter-bar > div:not(.dd-date-row):not(.item-stats-grid) > .btn-confirm,
    #reportDevice .filter-bar > div:not(.dd-date-row):not(.item-stats-grid) > .btn-add,
    #reportDevice .filter-bar > div:not(.dd-date-row):not(.item-stats-grid) > .btn-confirm {
        flex: 1 !important;
        font-size: 17px !important;
        padding: 8px !important;
        min-height: 44px !important;
    }
    /* 필터바 직접 자식 정보성 span (경고/주석 등) — 한 줄 차지하도록 폭 100% */
    #reportDashboard .filter-bar > span,
    #reportSales .filter-bar > span,
    #reportClosing .filter-bar > span,
    #reportPurchaseClosing .filter-bar > span,
    #reportProduction .filter-bar > span,
    #reportInventory .filter-bar > span,
    #reportQuality .filter-bar > span,
    #reportSamples .filter-bar > span,
    #reportDevice .filter-bar > span {
        width: 100% !important;
        margin-left: 0 !important;
        flex: unset !important;
    }

    /* 매출/매입마감: 모바일은 카드 듀얼렌더링 사용 (테이블 숨김 + 카드 표시) */
    /* 카드 내 체크박스로 선택 가능, 동일 data-id끼리 자동 동기화 */
    #reportClosing .table-container,
    #reportPurchaseClosing .table-container {
        display: none !important;
    }
    #closingCards,
    #pclosingCards {
        display: block !important;
    }

    /* 마감 카드 헤더(섹션 타이틀) */
    .m-card-section-header {
        padding: 12px 16px 10px;
        font-weight: bold;
        font-size: 17px;
        border-bottom: 2px solid var(--accent-color);
        background: var(--surface);
    }
    /* 마감 카드: 거래처 그룹 (체크박스+상호+합계) */
    .m-card-closing {
        padding: 12px 16px;
    }
    .m-card-closing-head {
        align-items: center;
        gap: 10px !important;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--light-border);
        margin-bottom: 6px;
    }
    .m-card-closing-row {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 8px 0;
        border-bottom: 1px dashed var(--light-border);
    }
    .m-card-closing-row:last-of-type {
        border-bottom: none;
    }
    .m-card-closing-row > input[type="checkbox"] {
        margin-top: 3px;
    }
    .m-card-closing-row-body {
        flex: 1;
        min-width: 0;
    }
    .m-card-closing-row-title {
        font-size: 17px;
        font-weight: 600;
        color: var(--text-primary);
        word-break: break-all;
    }
    .m-card-closing-row-meta {
        font-size: 14px;
        color: var(--text-muted);
        margin-top: 2px;
    }
    .m-card-closing-row-amount {
        font-size: 17px;
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
        flex: 0 0 auto;
        text-align: right;
    }
    .m-card-closing-subtotal {
        margin-top: 6px;
        padding-top: 8px;
        border-top: 1px solid var(--light-border);
        text-align: right;
        font-weight: bold;
        font-size: 17px;
    }

    /* 카테고리 분석 매트릭스: 모바일은 카드 듀얼렌더링 (테이블 숨김 + 카드 표시) */
    #reportSales .form-section > .table-container:has(#salesMatrixTable),
    #reportSales .form-section > .table-container:has(#purchaseMatrixTable) {
        display: none !important;
    }
    #salesMatrixCards,
    #purchaseMatrixCards {
        display: block !important;
    }
    /* 매트릭스 카드 KV 라벨: 월(2026-04) 폭 충분히 + 줄바꿈 방지 */
    #salesMatrixCards .m-card-kv-label,
    #purchaseMatrixCards .m-card-kv-label {
        flex: 0 0 90px;
        white-space: nowrap;
    }
    #salesMatrixCards .m-card-kv-value,
    #purchaseMatrixCards .m-card-kv-value {
        text-align: right;
        justify-content: flex-end;
    }

    /* 최소 폰트 17px */
    #reportDashboard select,
    #reportDashboard input,
    #reportSales select,
    #reportSales input,
    #reportClosing select,
    #reportClosing input,
    #reportPurchaseClosing select,
    #reportPurchaseClosing input,
    #reportProduction select,
    #reportProduction input,
    #reportInventory select,
    #reportInventory input,
    #reportQuality select,
    #reportQuality input,
    #reportSamples select,
    #reportSamples input,
    #reportDevice select,
    #reportDevice input,
    #reportSnapshots select {
        font-size: 17px !important;
    }
    #reportDashboard td,
    #reportDashboard th,
    #reportSales td,
    #reportSales th,
    #reportClosing td,
    #reportClosing th,
    #reportPurchaseClosing td,
    #reportPurchaseClosing th,
    #reportProduction td,
    #reportProduction th,
    #reportInventory td,
    #reportInventory th,
    #reportQuality td,
    #reportQuality th,
    #reportSamples td,
    #reportSamples th,
    #reportDevice td,
    #reportDevice th,
    #reportSnapshots td,
    #reportSnapshots th {
        font-size: 15px !important;
    }

    /* KPI 숫자 폰트 축소 (좁은 폭에서 줄바꿈 방지) */
    #reportDashboard .item-stat-count,
    #reportSales .item-stat-count,
    #reportClosing .item-stat-count,
    #reportPurchaseClosing .item-stat-count,
    #reportProduction .item-stat-count,
    #reportInventory .item-stat-count,
    #reportQuality .item-stat-count,
    #reportSamples .item-stat-count,
    #reportDevice .item-stat-count {
        font-size: 20px !important;
        word-break: break-all;
    }

    /* 탭 메뉴: 가로 스크롤 */
    #pageContainer .tab-menu {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #pageContainer .tab-menu::-webkit-scrollbar { display: none; }
    #pageContainer .tab-menu .tab-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

/* ==================== 토글 스위치 모바일 ==================== */
@media (max-width: 768px) {
    label.obt-toggle,
    .form-group label.obt-toggle {
        padding: 12px 14px;
    }
    label.obt-toggle .obt-toggle-label {
        font-size: 17px !important;
    }
    label.obt-toggle .obt-toggle-desc {
        font-size: 17px !important;
    }
    label.obt-toggle .obt-toggle-track {
        width: 50px; min-width: 50px; height: 28px; border-radius: 14px;
    }
    label.obt-toggle .obt-toggle-track::after {
        width: 24px; height: 24px;
    }
    label.obt-toggle input:checked + .obt-toggle-track::after {
        transform: translateX(22px);
    }
}

/* ==================== 계약관리 모바일 ==================== */
@media (max-width: 768px) {
    /* 필터바 wrap */
    #contractsPage .filter-bar {
        flex-wrap: wrap;
        gap: 8px;
    }
    #contractsPage .filter-bar select,
    #contractsPage .filter-bar input {
        flex: 1 1 calc(50% - 8px);
        min-width: 120px;
        font-size: 17px !important;
    }
    #contractsPage .filter-bar .btn-add,
    #contractsPage .filter-bar .btn-confirm {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* 통계 그리드 2x2 */
    #contractStatsGrid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }

    /* 모달 전체 너비 */
    #contractFormModal .modal-content,
    #contractViewModal .modal-content,
    #contractRenewModal .modal-content {
        max-width: 95vw !important;
    }
    #contractFormModal .form-row,
    #contractRenewModal .form-row {
        flex-direction: column;
    }

    /* 최소 17px 폰트 */
    #contractsPage select,
    #contractsPage input,
    #contractsPage textarea,
    #contractsPage td,
    #contractsPage th,
    #contractsPage .form-group label,
    #contractsPage .item-stat-count,
    #contractsPage .item-stat-label,
    #contractsPage .m-card-title,
    #contractsPage .m-card-sub,
    #contractsPage .m-card-badge,
    #contractsPage .m-card-meta,
    #contractsPage .m-card-val,
    #contractsPage .m-card-key {
        font-size: 17px !important;
    }
}

/* ==================== 플로팅 패널 모바일 ==================== */
@media (max-width: 768px) {
    .header-icon-btn {
        padding: 6px 8px;
        font-size: 0;
        gap: 0;
    }
    .header-icon-btn .header-icon-svg { font-size: 20px; }
    .header-icon-badge { top: -4px; right: -4px; }

    .floating-panel {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important;
        z-index: 900;
    }
    .floating-panel.minimized {
        top: auto !important;
        height: 48px !important;
        width: 200px !important;
        bottom: 60px !important;
        right: 10px !important;
        left: auto !important;
        border-radius: 8px !important;
    }
    .floating-panel + .floating-panel { right: 0 !important; }
    .floating-panel-backdrop { z-index: 899; }

    .floating-panel .messenger-container { flex-direction: column; }
    .floating-panel .messenger-sidebar { width: 100%; height: 100%; }
    .floating-panel .messenger-input-area textarea,
    .floating-panel .messenger-messages,
    .floating-panel .email-list,
    .floating-panel .email-detail-content {
        font-size: 17px !important;
    }
}

@media (max-width: 480px) {
    .header-icon-btn { padding: 5px 6px; }
}

/* ==================== 생산운영 모바일 ==================== */
@media (max-width: 768px) {
    .mfg-sub-tabs {
        padding: 0 4px;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .mfg-sub-tabs::-webkit-scrollbar {
        display: none;
    }
    .mfg-sub-tabs .tab-btn {
        padding: 8px 12px;
        font-size: 17px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .mfg-kpi-section .item-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .mfg-alert-item {
        font-size: 17px;
    }
}

/* ==================== 내 업무 모바일 ==================== */
@media (max-width: 768px) {
    /* 테이블 숨김 / 카드 표시 */
    #myworkPage .table-container { display: none !important; }
    #myworkPage .m-card-list { display: block !important; }

    /* 근무시간 탭 — 경영지원 개인별 근무상세와 동일하게 테이블 직접 표시 */
    #mwSubMonthly .table-container {
        display: block !important;
        overflow-x: auto;
    }
    #mwSubMonthly .m-card-list {
        display: none !important;
    }

    /* 17px 최소 폰트 */
    #myworkPage select, #myworkPage input, #myworkPage textarea,
    #myworkPage td, #myworkPage th,
    #myworkPage .m-card-val, #myworkPage .m-card-key, #myworkPage .m-card-title,
    #myworkPage .item-stat-count, #myworkPage .item-stat-label,
    #myworkPage .m-card-empty, #myworkPage h4,
    #myworkPage .btn-add, #myworkPage .btn-confirm, #myworkPage .btn-cancel {
        font-size: 17px !important;
    }

    /* 통계 카드 2×2 */
    #myworkPage .mw-stats-grid,
    #myworkPage .item-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        overflow-x: visible !important;
        flex-wrap: unset !important;
    }

    /* 필터바: 세로 정렬 (mw-date-row 그룹핑 패턴) */
    #myworkPage .filter-bar {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        padding: 4px 0 !important;
    }
    #myworkPage .filter-bar > select,
    #myworkPage .filter-bar > input,
    #myworkPage .filter-bar > .btn-confirm,
    #myworkPage .filter-bar > .btn-add {
        width: 100% !important;
        flex: unset !important;
        box-sizing: border-box !important;
        font-size: 17px !important;
        padding: 8px !important;
        min-height: 44px;
    }
    /* 날짜/셀렉터 2개 나란히 (50:50) */
    #myworkPage .filter-bar .mw-date-row {
        display: flex !important;
        gap: 6px;
        width: 100%;
    }
    #myworkPage .filter-bar .mw-date-row input,
    #myworkPage .filter-bar .mw-date-row select {
        flex: 1 !important;
        width: 0 !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        font-size: 17px !important;
        padding: 8px 4px !important;
        min-height: 44px;
    }

    /* 모달 전체너비 */
    #myworkPage .modal .modal-content {
        width: 100vw !important; max-width: 100vw !important;
        border-radius: 0 !important; margin: 0;
    }
    #myworkPage .form-row { flex-direction: column; }

    /* === 캘린더 네비게이션 모바일 === */

    /* 내 캘린더 / 부서일정 캘린더 네비 2줄 배치 */
    #myworkPage .calendar-nav {
        flex-wrap: wrap !important;
        gap: 8px !important;
        align-items: center;
    }
    /* 부서 셀렉터: 첫 줄 전체 */
    #mwDeptSelector {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        font-size: 17px !important;
        padding: 10px !important;
    }
    /* 날짜 라벨 줄바꿈 방지 */
    #mwCalLabel, #mwDeptCalLabel {
        white-space: nowrap !important;
        font-size: 17px !important;
        min-width: 0 !important;
        flex-shrink: 0 !important;
    }
    /* 네비 버튼 최소 크기 */
    #myworkPage .calendar-nav .btn-confirm {
        padding: 8px 12px !important;
        font-size: 17px !important;
        min-width: 40px;
        flex-shrink: 0 !important;
    }
    /* 뷰 모드 셀렉터 */
    #mwCalViewMode, #mwDeptCalViewMode {
        padding: 8px !important;
        font-size: 17px !important;
        flex-shrink: 0 !important;
    }

    /* === 근무시간 연도/월 셀렉터 === */
    #mwMonthlyYear, #mwMonthlyMonth {
        min-width: 90px !important;
        padding: 10px !important;
        font-size: 17px !important;
    }

    /* === 근태관리 서브탭 전용 === */

    /* 서브탭 메뉴 가로 스크롤 */
    #mwAttSubTabs {
        overflow-x: auto !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
    }
    #mwAttSubTabs::-webkit-scrollbar { display: none; }

    /* 출퇴근 탭: 오늘 상태 세로 스택 */
    #mwSubCheckin #mwTodayStatus {
        flex-direction: column !important;
        gap: 8px !important;
    }
    #mwSubCheckin #mwTodayStatus span {
        font-size: 18px !important;
    }

    /* 출퇴근 버튼 터치 크기 확대 */
    #mwBtnCheckIn, #mwBtnCheckOut {
        flex: 1;
        padding: 16px 20px !important;
        font-size: 18px !important;
        min-height: 52px;
    }

    /* 휴가 신청 버튼 full-width */
    .mw-leave-action {
        text-align: center !important;
    }
    .mw-leave-btn {
        width: 100% !important;
        padding: 14px !important;
        font-size: 17px !important;
        min-height: 48px;
        border-radius: 10px !important;
    }

    /* 기술 입문 — 모바일 레이아웃 + 폰트 cascade (56F차 통일, 18→16px) */
    /* 56J차: 셀렉터를 탭바·본문에서 충분히 띄움 (매뉴얼 페이지 .manuals-mobile-select 리듬과 동일) */
    .mw-ti-mobile-select {
        display: block !important;
        margin: 20px 0 24px !important;
    }
    .mw-ti-mobile-select select {
        width: 100%;
        min-height: 44px;
        padding: 0 12px;
        font-size: 17px;
        box-sizing: border-box;
    }
    .mw-ti-layout {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .mw-ti-toc { display: none !important; }
    /* 폰트 17(최대)→16(최소), 위계는 굵기로 (56H차) */
    #myworkPage #mwTiHeader { display: none !important; }
    #myworkPage #mwTiTitle { display: none !important; }
    #myworkPage #mwTiDesc { display: none !important; }
    #myworkPage .mw-ti-section.depth-0 > .mw-ti-section-header h2 { font-size: 17px !important; font-weight: 700 !important; }
    #myworkPage .mw-ti-section.depth-1 > .mw-ti-section-header h3 { font-size: 17px !important; font-weight: 700 !important; }
    #myworkPage .mw-ti-section.depth-2 > .mw-ti-section-header h4 { font-size: 17px !important; font-weight: 600 !important; }
    /* 본문 + 모든 자손 → 16px wildcard (글로벌 * { 16px } 우회) */
    #myworkPage .mw-ti-section-content,
    #myworkPage .mw-ti-section-content * {
        font-size: 16px !important;
    }
    #myworkPage .mw-ti-section-content { line-height: 1.7 !important; }
    #myworkPage .mw-ti-section-content h4 { font-weight: 700 !important; }
    #myworkPage .mw-ti-section-content p,
    #myworkPage .mw-ti-section-content li { font-weight: 400 !important; }
    #myworkPage .mw-ti-section-content strong { font-weight: 700 !important; }
    /* 테이블 — 글로벌 width:100% / #myworkPage td 17px 강제 무력화 */
    #myworkPage .mw-ti-section-content table {
        width: auto !important;
        max-width: 100%;
    }
    #myworkPage .mw-ti-section-content table th,
    #myworkPage .mw-ti-section-content table td {
        padding: 6px 10px !important;
        white-space: normal !important;
        text-transform: none !important;
    }
    #myworkPage .mw-ti-section-content table th { text-align: center !important; font-weight: 700 !important; }
    #myworkPage .mw-ti-section-content table td { font-weight: 400 !important; }

    /* 빈 상태 카드 스타일 */
    .m-card-empty {
        text-align: center;
        color: var(--text-muted);
        padding: 32px 16px;
        font-size: 17px;
    }

    /* 카드 내 버튼 터치 크기 */
    #myworkPage .m-card .btn-sm {
        padding: 8px 16px !important;
        font-size: 17px !important;
        min-height: 44px;
    }
    #myworkPage .m-card-footer {
        display: flex;
        gap: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--light-border);
        margin-top: 4px;
    }

    /* form-section 간격 */
    #mwAttendancePane .form-section {
        margin-bottom: 12px !important;
        padding: 12px !important;
    }
    #mwAttendancePane .form-section h4 {
        margin-bottom: 8px !important;
    }

    /* 이번 주 근무시간 게이지 높이 */
    #mwWeeklyBar, #mwMonthlyWeekBar {
        min-height: 28px;
    }
}

/* 사용자 상세/편집 모달 반응형 */
@media (max-width: 768px) {
    #userProfileModal .modal-content {
        width: 100% !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    #userProfileModal .form-value {
        font-size: 17px;
    }
    #userProfileModal input,
    #userProfileModal select {
        font-size: 17px !important;
    }
}

/* 장치개발 날짜 래퍼 — 데스크탑 기본 인라인 */
.dd-date-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* ==================== 장치개발 모바일 ==================== */

/* 1024px 이하 */
/* 1024px 이하: testDetailModal 내부는 데스크탑 레이아웃 유지 (삭제됨) */

/* 768px 이하 */
@media (max-width: 768px) {
    /* 장치개발 테이블 최소 너비 + 스크롤 */
    #deviceDevPage .data-table {
        min-width: 600px;
    }

    /* 프로젝트 상세 뷰 — 모바일 (#88 마이그레이션 후 헤더 규칙은 .detail-page-header SSOT가 담당) */
    #ddProjectDetailView {
        padding-bottom: calc(var(--ods-tab-bar-h) + var(--ods-safe-bottom) + 16px);
    }

    /* 상세 페이지 헤더 SSOT (프로토콜 #88) — 모바일 터치 타겟 + 가로 스크롤 */
    .detail-page-header {
        flex-wrap: nowrap !important;
        gap: 6px !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .detail-page-header > h3 {
        font-size: 17px !important;
        flex: 1 1 60px !important;   /* 최소 60px 확보 → 항상 "E..." 같은 ellipsis 가시성 보장 */
        min-width: 60px !important;
    }
    .detail-page-header > button,
    .detail-page-header > .status-badge {
        padding: 6px 10px !important;
        font-size: 17px !important;
        min-height: 44px;
        flex-shrink: 0;
    }
    /* 설비대장 상세 — list 토글 뷰는 모바일 탭바 여백 확보 */
    #eqDetailView {
        padding-bottom: calc(var(--ods-tab-bar-h) + var(--ods-safe-bottom) + 16px);
    }
    #ddProjectDetailView .form-row {
        flex-direction: column;
    }
    #ddProjectDetailView .item-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    #ddProjGanttContainer {
        padding-bottom: calc(var(--ods-tab-bar-h) + var(--ods-safe-bottom) + 16px);
        margin-left: -8px;
        margin-right: -8px;
    }
    #ddProjGanttContainer .gantt-wrapper {
        border-left: none;
        border-right: none;
        border-radius: 0;
    }
    #ddProjGanttContainer .gantt-left-table col:first-child {
        width: 44px !important;
    }
    #ddProjGanttContainer .gantt-left-table th:first-child,
    #ddProjGanttContainer .gantt-left-table td:first-child {
        width: 44px !important;
        min-width: 44px !important;
        text-align: center;
    }
    #ddProjGanttContainer .gantt-left-table input[type="checkbox"] {
        width: 22px;
        height: 22px;
    }
    #ddSubSchedule .gantt-back-row-btns {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        width: 100%;
    }
    #ddSubSchedule .gantt-back-row-btns button {
        font-size: 17px !important;
        padding: 8px 4px !important;
        min-height: 44px;
    }

    /* ===== 장치개발 모달 — 모바일 앱 전체화면 ===== */

    /* 생성/수정 모달: 전체 너비 + border-radius 제거 */
    #evalModal .modal-content,
    #testCreateModal .modal-content,
    #testEditModal .modal-content {
        width: 100% !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0;
        margin: 0;
    }

    /* 성능평가 상세: 전체 화면, 데스크탑 레이아웃 유지, 양방향 스크롤 (코팅테스트와 동일 패턴) */
    #evalDetailModal {
        padding: 0 !important;
        overflow: hidden !important;
    }
    #evalDetailModal .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    #evalDetailModal .modal-header {
        flex-shrink: 0 !important;
        padding: 12px 16px !important;
    }
    #evalDetailModal .modal-body {
        flex: 1 1 0 !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 0 !important;
    }
    #evalDetailBodyInner {
        min-width: 1400px;
        padding: 12px;
    }
    /* border-collapse 외곽 보더 클리핑 방지 */
    #evalDetailBodyInner .table-container {
        overflow: visible !important;
    }
    /* modal-buttons-sticky의 margin:-30px / bottom:-30px가 padding:0 환경에서 가려짐 방지 */
    #evalDetailModal .modal-buttons {
        flex-shrink: 0 !important;
        position: static !important;
        margin: 0 !important;
        padding: 10px 12px !important;
    }

    /* 코팅 테스트 상세: 전체 화면, 데스크탑 레이아웃 유지, 양방향 스크롤 */
    #testDetailModal {
        padding: 0 !important;
        overflow: hidden !important;
    }
    #testDetailModal .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    #testDetailModal .modal-header {
        flex-shrink: 0 !important;
        padding: 12px 16px !important;
    }
    #testDetailModal .modal-body {
        flex: 1 1 0 !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 0 !important;
    }
    /* 내부 wrapper — 데스크탑 너비 통일, 모든 자식이 동일 폭 */
    #testDetailBodyInner {
        min-width: 1400px;
        padding: 12px;
    }
    /* border-collapse 외곽 보더 클리핑 방지 */
    #testDetailBodyInner .table-container {
        overflow: visible !important;
    }
    #testDetailModal .modal-buttons {
        flex-shrink: 0 !important;
        position: static !important;
        margin: 0 !important;
        padding: 10px 12px !important;
    }

    /* 선택자/프리셋 모달: 인라인 width 오버라이드 → 전체 너비 */
    #ddClientSelectorModal .modal-content,
    #ddItemSelectorModal .modal-content,
    #recipePresetSelectorModal .modal-content,
    #recipePresetSaveModal .modal-content,
    #recipePresetManagerModal .modal-content,
    #evalPresetSelectorModal .modal-content,
    #evalPresetSaveModal .modal-content,
    #evalPresetManagerModal .modal-content {
        width: 100% !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0;
    }

    /* 폼 세로 배치 (생성/수정 모달) */
    #evalModal .form-row,
    #testCreateModal .form-row,
    #testEditModal .form-row {
        flex-direction: column !important;
        gap: 0 !important;
    }
    #evalModal .form-row .form-group,
    #testCreateModal .form-row .form-group,
    #testEditModal .form-row .form-group {
        flex: unset !important;
        width: 100% !important;
    }

    /* 선택자 모달 내 padding/margin 보정 */
    #ddClientSelectorModal .modal-body,
    #ddItemSelectorModal .modal-body {
        padding: 12px;
    }
    #ddClientSelectorModal > .modal-content > div:not(.modal-header),
    #ddItemSelectorModal > .modal-content > div:not(.modal-header) {
        padding: 0 12px;
    }

    /* 17px 최소 폰트 — 모든 폼 요소 */
    #evalModal select,
    #evalModal input,
    #evalModal textarea,
    #evalModal label,
    #evalModal .form-section h4,
    #testCreateModal select,
    #testCreateModal input,
    #testCreateModal textarea,
    #testCreateModal label,
    #testCreateModal .form-section h4,
    #testEditModal select,
    #testEditModal input,
    #testEditModal textarea,
    #testEditModal label,
    #testEditModal .form-section h4,
    #ddClientSelectorModal input,
    #ddClientSelectorModal select,
    #ddItemSelectorModal input,
    #ddItemSelectorModal select,
    #recipePresetSelectorModal input,
    #recipePresetSelectorModal select,
    #recipePresetSaveModal input,
    #recipePresetSaveModal textarea,
    #recipePresetSaveModal label,
    #recipePresetSaveModal select,
    #evalPresetSelectorModal input,
    #evalPresetSaveModal input,
    #evalPresetSaveModal textarea,
    #evalPresetSaveModal label {
        font-size: 17px !important;
    }

    /* 성능평가 상세 — 데스크탑 레이아웃 유지 (evalDetailBodyInner min-width:900px로 가로 스크롤 처리) */

    /* 코팅 테스트 상세 — 데스크탑 레이아웃 유지 (세로 wrap 제거) */

    /* 센서 차트 / RECIPE / 두께 / 업로드 / 분석: testDetailModal 내부는
       데스크탑 레이아웃 유지 (modal-body min-width:900px로 가로 스크롤 처리) */

    /* 필터바 모바일 — 세로 정렬 (mywork 패턴) */
    #deviceDevPage .filter-bar {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        padding: 4px 0 !important;
    }
    #deviceDevPage .filter-bar > select,
    #deviceDevPage .filter-bar > input,
    #deviceDevPage .filter-bar > .btn-confirm,
    #deviceDevPage .filter-bar > .btn-add {
        width: 100% !important;
        flex: unset !important;
        box-sizing: border-box !important;
        font-size: 17px !important;
        padding: 8px !important;
        min-height: 44px;
    }
    /* 날짜 2개 나란히 (50:50) */
    #deviceDevPage .filter-bar .dd-date-row {
        display: flex !important;
        gap: 6px;
        width: 100%;
    }
    #deviceDevPage .filter-bar .dd-date-row input {
        flex: 1 !important;
        width: 0 !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        font-size: 17px !important;
        padding: 8px !important;
        min-height: 44px;
    }
    /* margin-left:auto div(버튼 컨테이너) — 전체 너비 */
    #deviceDevPage .filter-bar > div:not(.dd-date-row) {
        width: 100% !important;
        margin-left: 0 !important;
        display: flex !important;
        gap: 6px !important;
    }
    #deviceDevPage .filter-bar > div:not(.dd-date-row) > .btn-add,
    #deviceDevPage .filter-bar > div:not(.dd-date-row) > .btn-confirm {
        flex: 1 !important;
        font-size: 17px !important;
        padding: 8px !important;
        min-height: 44px;
    }

    /* 평가 배지 */
    .eval-badge-pass,
    .eval-badge-fail,
    .eval-badge-pending,
    .eval-badge-na {
        font-size: 17px;
    }

    /* 통계 카드 */
    #deviceDevPage .stats-grid,
    #deviceDevPage .item-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* 프리셋 관리 모달 테이블 가로 스크롤 */
    #recipePresetManagerModal .table-container,
    #evalPresetManagerModal .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #recipePresetManagerModal .data-table,
    #evalPresetManagerModal .data-table {
        min-width: 500px;
        font-size: 17px;
    }

    /* A4 미리보기 모달 — 모바일 전체화면 */
    #evalA4Modal,
    #testA4Modal {
        padding: 0 !important;
    }
    #evalA4Modal > div:first-child,
    #testA4Modal > div:first-child {
        flex-wrap: wrap;
        gap: 6px;
        padding: 6px 10px !important;
    }
    #evalA4Modal > div:first-child button,
    #testA4Modal > div:first-child button {
        font-size: 17px !important;
        padding: 6px 10px !important;
    }
    /* A4 컨테이너: 가로 스크롤 허용 */
    #evalA4Modal > div:last-child,
    #testA4Modal > div:last-child {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 10px !important;
    }
    #evalA4Frame,
    #testA4Frame {
        width: 297mm !important;
        min-width: 297mm !important;
        min-height: 210mm !important;
        padding: 8mm 12mm !important;
        font-size: 9pt !important;
        flex-shrink: 0;
    }

    /* 장치개발 일정 탭 — 간트 영역 */
    #ddGanttArea .gantt-back-row {
        flex-wrap: wrap;
        gap: 8px;
    }
    #ddGanttArea .gantt-back-row-btns {
        flex-wrap: wrap;
        gap: 4px;
    }
    #ddGanttArea .gantt-back-row-btns button {
        font-size: 17px;
        padding: 6px 10px;
    }

    /* 선택자 모달 내 목록 아이템 터치 타겟 */
    #ddClientSelectorList > div,
    #ddItemSelectorList > div,
    #rpSelectorList > div,
    #epSelectorList > div {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 17px;
    }
    /* 거래처 탭 버튼 */
    #ddClientSelectorModal .client-tab {
        font-size: 17px !important;
        padding: 8px 14px !important;
    }
}

/* 480px 이하 — 장치개발 */
@media (max-width: 480px) {
    /* 통계 카드 2열 */
    #deviceDevPage .item-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* A4 미리보기 인쇄 — 장치개발 */
@media print {
    .eval-a4-container {
        padding: 20px;
    }
    .eval-a4-container th,
    .eval-a4-container td {
        font-size: 9px;
    }
}

/* 설비관리: 상태 카드 그리드 모바일 (2026-04-20 v2: 사각형+17px) */
@media (max-width: 768px) {
    .eq-status-grid {
        grid-template-columns: 1fr;
        border-left: none;
        border-top: none;
    }
    .eq-status-card {
        border-right: none;
        border-left: none;
        padding: 16px 18px;
    }
    .eq-status-card-name {
        font-size: 18px;
    }
    .eq-status-card-code {
        font-size: 17px;
    }
    .eq-status-card-kpi-label {
        font-size: 17px;
    }
    .eq-status-card-kpi-val {
        font-size: 22px;
    }
    .eq-status-card-foot {
        font-size: 17px;
    }
}