/* 설정 화면의 메일 이력 영역은 모바일에서 필터와 검색 리스트 간격을 공통 규격으로 통일한다. */
@media (max-width: 1023px) {
    .mail-log-view-page .list-view-main {
        max-width: 100% !important;
    }

    .mail-log-view-page .list-view-content {
        margin-top: 12px !important;
    }

    .mail-log-view-page .settle-search-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .mail-log-view-page .settle-search-controls {
        width: 100%;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 8px;
    }

    .mail-log-view-page .settle-search-select,
    .mail-log-view-page .settle-search-status,
    .mail-log-view-page .settle-search-btn,
    .mail-log-view-page .settle-search-input-wrap {
        width: 100%;
    }

    .mail-log-view-page .settle-search-condition {
        width: 100%;
    }

    .mail-log-view-page .settle-date-range {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 8px;
        align-items: center;
    }

    .mail-log-view-page .settle-search-date {
        width: 100%;
    }

    .mail-log-view-page .settle-search-input-wrap {
        max-width: none;
    }

    .mail-log-view-page .mail-log-table-container {
        display: none !important;
    }

    .mail-log-view-page .mail-log-list-mobile {
        display: block !important;
        margin-top: 8px;
        border: var(--k-border-thin);
        border-radius: var(--k-radius-sm);
        background: var(--k-bg-white);
        overflow: hidden;
    }

    .mail-log-view-page .mail-log-mobile-card {
        display: block;
        padding: 12px;
        border-bottom: var(--k-border-thin);
    }

    .mail-log-view-page .mail-log-mobile-card:last-child {
        border-bottom: none;
    }

}

/* 설정 화면의 메일 이력 영역은 360px 기준에서 검색 영역과 카드 간격을 추가로 압축한다. */
@media (max-width: 767px) {
    .mail-log-view-page .settle-date-range {
        grid-template-columns: minmax(0, 1fr);
    }

    .mail-log-view-page .mail-log-mobile-card {
        padding: 10px;
    }

    .mail-log-view-page .mail-log-mobile-card .flex-between {
        align-items: flex-start;
        gap: 8px;
    }

    .mail-log-view-page .mail-log-mobile-card .mail-type-badge {
        flex-shrink: 0;
    }
}

/* settingView는 모바일 기본 간격을 360px 기준으로 정리한다. */
@media (max-width: 1023px) {
    .setting-view-page {
        max-width: 100% !important;
        padding: 16px !important;
    }

    .setting-view-page .setting-page-header {
        margin-bottom: 16px;
        padding: 0 4px;
    }

    .setting-view-page .setting-mobile-tabs {
        display: flex;
        gap: 8px;
        margin-bottom: 16px;
        padding: 0 2px 2px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .setting-view-page .setting-mobile-tabs::-webkit-scrollbar {
        display: none;
    }

    .setting-view-page .setting-mobile-tab {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 0 14px;
        border-radius: var(--k-radius-md);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        font-size: 13px;
        line-height: 1.2;
    }

    .setting-view-page .setting-mobile-tab span {
        white-space: nowrap;
    }

    .setting-view-page .setting-layout-freemode {
        border-radius: var(--k-radius-md);
        min-height: auto;
    }

    .setting-view-page .setting-content-freemode {
        width: 100%;
        padding: 20px !important;
    }

    .setting-view-page .setting-section-freemode {
        max-width: 100%;
    }

    .setting-view-page .setting-title-freemode {
        margin-top: 0;
        margin-bottom: 8px;
        font-size: 22px !important;
    }

    .setting-view-page .setting-desc-freemode {
        margin-bottom: 20px !important;
    }

    .setting-view-page .setting-form-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    .setting-view-page .form-group-freemode {
        margin-bottom: 16px;
    }

    .setting-view-page .input-freemode,
    .setting-view-page .select-freemode {
        min-height: var(--fm-control-height-medium);
    }

    .setting-view-page .btn-freemode {
        min-height: 44px;
    }

    .setting-view-page .setting-input-row {
        align-items: stretch;
        gap: 8px;
        flex-wrap: wrap;
    }

    .setting-view-page .setting-form-actions {
        margin-top: 12px;
    }

    .setting-view-page .setting-form-actions .btn-freemode {
        min-width: 120px;
    }

    .setting-view-page .card-freemode.row-layout {
        padding: 16px !important;
        gap: 12px !important;
    }

    .setting-view-page .row-action {
        gap: 8px;
    }

    .setting-view-page .row-action .btn-freemode {
        min-height: 44px;
    }










}

/* settingView는 767px 이하에서 입력과 액션을 1열 중심 흐름으로 단순화한다. */
@media (max-width: 767px) {
    .setting-view-page {
        padding: 12px !important;
    }

    .setting-view-page .setting-content-freemode {
        padding: 16px !important;
    }

    /* 모바일 설정 레이아웃의 외곽선과 그림자를 제거하고 라운드는 유지한다. */
    .setting-view-page .setting-layout-freemode {
        border: none;
        border-radius: var(--k-radius-md);
        box-shadow: none;
    }

    .setting-view-page .setting-mobile-tabs {
        margin-bottom: 12px;
    }

    .setting-view-page .setting-mobile-tab {
        padding: 0 12px;
        font-size: 12px;
    }

    /* settingView의 no-hover 카드는 모바일에서 좌우 패딩을 제거한다. */
    .setting-view-page .card-freemode.no-hover {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 설정 주요 카드는 모바일에서 상단 여백을 줄이고 좌우 패딩을 유지한다. */
    .setting-view-page .setting-content-freemode > .setting-primary-section > .card-freemode {
        padding: 14px 4px 32px !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .setting-view-page .setting-input-row {
        flex-direction: column;
    }

    .setting-view-page .setting-form-actions {
        justify-content: stretch;
    }

    .setting-view-page .setting-form-actions .btn-freemode {
        width: 100%;
    }

    .setting-view-page .row-action {
        width: 100% !important;
        justify-content: stretch;
    }

    .setting-view-page .row-action .btn-freemode {
        width: 100%;
        flex: 1 1 100%;
    }

    /* 포트폴리오 파일 목록은 모바일에서 한 줄씩 전체 너비로 정리한다. */
    .setting-view-page #portfolioFileList {
        width: 100%;
        display: flex;
        flex-direction: column !important;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .setting-view-page #portfolioFileList > div {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    .setting-view-page #portfolioFileList > div > div:first-child {
        min-width: 0;
        flex: 1 1 auto;
    }

    .setting-view-page #portfolioFileList > div .btn-grid {
        flex-shrink: 0;
    }

}

/* settingView는 360px 근접 화면에서 탭 간격을 추가 보정한다. */
@media (max-width: 389px) {
    .setting-view-page .setting-title-freemode {
        font-size: 20px !important;
    }

    .setting-view-page .setting-mobile-tab {
        min-height: 40px;
        padding: 0 10px;
    }
}

/* projectView 모달은 태블릿 이하에서 모달 폭과 푸터 버튼 배치를 화면 중심으로 정리한다. */
@media (max-width: 1023px) {
    #quickCustomerModal .modal-container.modal-fullscreen-mobile,
    #templateSelectModal .modal-container.modal-fullscreen-mobile {
        width: calc(100vw - 24px) !important;
        max-width: 680px !important;
        max-height: calc(100dvh - (24px + env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
        margin: 12px auto !important;
        border-radius: var(--fm-radius-medium) !important;
    }

    /* projectView 전체화면 모달은 헤더와 타이틀 가시성을 모바일에서 고정한다. */
    #quickCustomerModal .modal-header,
    #templateSelectModal .modal-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px;
        /* 모바일 고정 헤더와 겹치지 않도록 taskDetailModal 패턴과 동일하게 헤더를 내린다. */
        margin-top: calc(var(--header-height, 60px) + env(safe-area-inset-top));
    }

    #quickCustomerModal .modal-title,
    #templateSelectModal .modal-title {
        display: block !important;
        flex: 1 1 auto;
        min-width: 0;
        color: var(--ref-ink) !important;
        opacity: 1 !important;
        visibility: visible !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #quickCustomerModal .modal-body,
    #templateSelectModal .modal-body {
        padding: 12px 16px 0 !important;
    }

    #quickCustomerModal .form-inline-group {
        flex-wrap: wrap;
        gap: 8px !important;
    }

    #colorFilterModal .modal-footer .btn-freemode,
    #quickCustomerModal .modal-footer .btn-freemode,
    #templateSelectModal .modal-footer .btn-freemode {
        min-height: 44px;
    }

    #quickCustomerModal .modal-footer,
    #templateSelectModal .modal-footer {
        padding: var(--fm-modal-body-footer-gap) 16px calc(14px + env(safe-area-inset-bottom)) !important;
    }

    /* 템플릿 모달 액션 버튼은 모바일에서 2열 1행 배치로 고정한다. */
    #templateSelectModal .modal-footer {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
        gap: 8px;
    }

    #templateSelectModal .modal-footer .btn-freemode {
        width: 100% !important;
        min-width: 0;
        min-height: 44px;
        padding: 0 10px;
        font-size: 14px;
    }

    /* 고객 빠른 등록 모달 액션 버튼은 템플릿 모달과 동일한 2열 구성으로 맞춘다. */
    #quickCustomerModal .modal-footer {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
        gap: 8px;
    }

    #quickCustomerModal .modal-footer .btn-freemode {
        width: 100% !important;
        min-width: 0;
        min-height: 44px;
        padding: 0 10px;
        font-size: 14px;
    }

    #colorPaletteModal .modal-container.modal-small,
    #colorFilterModal .modal-container.dropdown-modal {
        width: calc(100vw - 24px) !important;
        max-width: 420px !important;
        max-height: calc(100dvh - (24px + env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
        margin: 12px auto !important;
        border-radius: var(--fm-radius-medium) !important;
    }

    #colorPaletteModal .modal-body,
    #colorFilterModal .modal-body {
        padding: 12px 16px 0 !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #colorFilterModal .modal-footer {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: var(--fm-modal-body-footer-gap) 16px calc(14px + env(safe-area-inset-bottom)) !important;
    }

    #colorFilterModal .modal-footer .btn-freemode {
        width: 100%;
    }

    #colorPaletteModal .color-add-form {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
        margin-bottom: 12px;
    }

    #colorPaletteModal .color-add-form .btn-freemode {
        min-height: 40px;
    }

    #colorPaletteModal .color-palette-list {
        max-height: 42vh !important;
    }

    /* 컬러 팔레트 팝업 하단 닫기 버튼 영역은 모바일에서도 우측 정렬 기준으로 보정한다. */
    #colorPaletteModal .modal-footer {
        display: flex;
        justify-content: flex-end;
        padding: var(--fm-modal-body-footer-gap) 16px calc(14px + env(safe-area-inset-bottom)) !important;
    }

    #colorPaletteModal .modal-footer .btn-freemode {
        min-height: 40px;
    }

    #colorFilterModal.dropdown-modal-overlay {
        align-items: center !important;
        justify-content: center !important;
        padding: 12px;
    }

    #pricingModal .modal-container {
        width: calc(100vw - 24px) !important;
        max-width: 1000px !important;
        max-height: calc(100dvh - (24px + env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
        margin: 12px auto !important;
        border-radius: var(--fm-radius-medium) !important;
    }
}

/* projectView 모달은 모바일에서 전체화면 모달과 팝업 모달 크기를 추가 보정한다. */
@media (max-width: 767px) {
    #quickCustomerModal .modal-container.modal-fullscreen-mobile,
    #templateSelectModal .modal-container.modal-fullscreen-mobile {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: var(--fm-radius-medium) !important;
    }

    #quickCustomerModal .modal-header,
    #templateSelectModal .modal-header {
        padding: 14px 16px 12px !important;
        /* taskDetailModal과 동일하게 모바일 고정 헤더 높이만큼 내려 타이틀 가시성을 보장한다. */
        margin-top: calc(var(--header-height, 60px) + env(safe-area-inset-top));
    }

    #quickCustomerModal .modal-title,
    #templateSelectModal .modal-title {
        font-size: var(--fm-font-size-heading-small) !important;
        line-height: 1.35;
        font-weight: 600;
        color: var(--ref-ink) !important;
    }

    #quickCustomerModal .modal-body,
    #templateSelectModal .modal-body {
        padding: 12px 16px 0 !important;
    }

    #quickCustomerModal .toggle-btn-group .toggle-btn {
        min-height: 40px;
    }

    #templateSelectModal #templateListContainer {
        max-height: 40vh;
        overflow-y: auto;
    }

    /* 템플릿 모달 하단 버튼 크기를 767px 이하에서 터치 기준으로 추가 보정한다. */
    #templateSelectModal .modal-footer {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    #templateSelectModal .modal-footer .btn-freemode {
        width: 100% !important;
        min-width: 0;
        min-height: 42px;
        font-size: 13px;
        padding: 0 8px;
    }

    /* 고객 빠른 등록 모달 버튼도 동일한 모바일 버튼 크기로 통일한다. */
    #quickCustomerModal .modal-footer {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    #quickCustomerModal .modal-footer .btn-freemode {
        width: 100% !important;
        min-width: 0;
        min-height: 42px;
        font-size: 13px;
        padding: 0 8px;
    }

    #colorPaletteModal .modal-container.modal-small,
    #colorFilterModal .modal-container.dropdown-modal {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        margin: 8px auto !important;
    }

    #colorPaletteModal .modal-header,
    #colorFilterModal .modal-header {
        padding: 12px 14px 10px !important;
    }

    #colorPaletteModal .modal-title,
    #colorFilterModal .modal-title {
        font-size: var(--fm-font-size-heading-small);
        font-weight: 600;
    }

    #colorPaletteModal .modal-body,
    #colorFilterModal .modal-body {
        padding: 10px 14px 0 !important;
    }

    #colorPaletteModal .modal-footer {
        padding: var(--fm-modal-body-footer-gap) 14px calc(12px + env(safe-area-inset-bottom)) !important;
    }

    #pricingModal {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    #pricingModal .modal-container {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: var(--fm-radius-medium) !important;
    }

    #pricingModal .modal-header {
        padding: 14px 16px 12px !important;
    }

    #pricingModal .modal-body {
        padding: 8px 12px 0 !important;
    }
}

/* projectDetailView는 모바일에서 상세 섹션과 모달 구조를 화면 폭에 맞춰 정리한다. */
@media (max-width: 1023px) {
    .project-detail-view-page {
        padding: 10px 12px 18px;
    }

    .project-detail-view-page #breadcrumbNavContainer .header-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .project-detail-view-page .project-tabs {
        margin-bottom: 10px;
    }

    .project-detail-view-page .project-tabs .tabs-freemode {
        max-height: none;
        padding: 4px;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .project-detail-view-page .project-tabs .tabs-freemode::-webkit-scrollbar {
        display: none;
    }

    .project-detail-view-page .project-tabs .tab-link-freemode {
        flex: 0 0 auto;
        min-height: 40px;
        padding: 8px 14px;
        white-space: nowrap;
    }

    /* 모바일에서는 정산 탭을 숨기고 프로젝트 정보와 업무 탭만 사용한다. */
    .project-detail-view-page .project-tabs .project-tab[data-tab="settlement"] {
        display: none !important;
    }




    .project-detail-view-page .project-info-summary-titles {
        display: none;
    }

    .project-detail-view-page .project-info-summary {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .project-detail-view-page .project-info-summary .info-card-summary {
        min-width: 0;
    }

    /* 메모 섹션 편집 버튼은 제목 우측 끝에 배치한다. */
    .project-detail-view-page .memo-section-header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .project-detail-view-page .memo-section-header #memoEditBtn {
        width: auto;
        margin-left: auto;
        flex: 0 0 auto;
    }

    .project-detail-view-page .memo-edit-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .project-detail-view-page .memo-edit-actions .btn-freemode {
        width: 100%;
    }

    #estimatePreviewModal .modal-container.modal-estimate-preview,
    #customerContractPreviewModal .modal-container.modal-estimate-preview,
    #estimateMailLogModal .modal-container.modal-xlarge {
        width: calc(100vw - 24px) !important;
        max-width: 720px !important;
        max-height: calc(100dvh - (24px + env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
        margin: 12px auto !important;
        border-radius: var(--fm-radius-medium) !important;
    }

    /* 미리보기와 메일 로그 모달은 모바일에서도 중앙 카드형 크기를 유지한다. */
    /* 미리보기 모달은 모바일에서 공통 카드 모달 상하 패딩 영향을 제거한다. */
    /* 메일 로그 모달은 모바일에서 공통 카드 모달 상하 패딩 영향을 제거한다. */
    #estimatePreviewModal .modal-header,
    #customerContractPreviewModal .modal-header,
    #estimateMailLogModal .modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    #estimatePreviewModal .modal-title,
    #customerContractPreviewModal .modal-title,
    #estimateMailLogModal .modal-title {
        display: block !important;
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #estimateMailLogModal .modal-body {
        padding: 12px 16px 0 !important;
    }

    /* projectDetail 이벤트 모달 푸터는 2버튼과 그룹 버튼 배치를 모바일 기준으로 유지한다. */
    #estimatePreviewModal .modal-body,
    #customerContractPreviewModal .modal-body {
        padding: 0 !important;
    }

    #estimatePreviewModal .modal-footer,
    #customerContractPreviewModal .modal-footer {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    #estimatePreviewModal .modal-footer .footer-left,
    #estimatePreviewModal .modal-footer .footer-right,
    #customerContractPreviewModal .modal-footer .footer-left,
    #customerContractPreviewModal .modal-footer .footer-right {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    #estimatePreviewModal .modal-footer .footer-right .btn-freemode,
    #customerContractPreviewModal .modal-footer .footer-right .btn-freemode,
    #estimateMailLogModal .modal-footer .btn-freemode {
        width: 100%;
    }

}

/* projectDetailView는 작은 모바일에서 섹션과 모달을 세로 우선 구조로 단순화한다. */
@media (max-width: 767px) {
    .project-detail-view-page {
        padding: 8px 10px 16px;
    }

    .project-detail-view-page .project-tabs .tab-link-freemode {
        min-height: 38px;
        padding: 8px 12px;
        font-size: 13px;
    }

    /* 프로젝트 정보 내 메모 수정 버튼은 작은 모바일에서도 2열 구성을 유지한다. */
    .project-detail-view-page .memo-edit-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #estimatePreviewModal,
    #customerContractPreviewModal,
    #estimateMailLogModal {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    #estimatePreviewModal .modal-container.modal-estimate-preview,
    #customerContractPreviewModal .modal-container.modal-estimate-preview,
    #estimateMailLogModal .modal-container.modal-xlarge {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: var(--fm-radius-medium) !important;
    }

    /* 미리보기 모달은 작은 모바일에서도 헤더 영역 가시성을 유지한다. */
    /* 메일 로그 모달은 작은 모바일에서도 헤더 영역 가시성을 유지한다. */
    /* taskDetailModal 기준과 동일하게 고정 헤더 높이만큼 내려 타이틀이 가리지 않게 한다. */
    #estimatePreviewModal .modal-header,
    #estimateMailLogModal .modal-header {
        padding: 14px 16px 12px !important;
        margin-top: calc(var(--header-height, 60px) + env(safe-area-inset-top));
    }

    /* 중앙 카드형 모달은 헤더 오프셋 이후 본문 여백을 모바일 기준으로 조정한다. */
    #estimateMailLogModal .modal-body {
        padding: 10px 14px 0 !important;
    }
}


/* 모바일 카드형 모달 공통 오버레이는 중앙 카드 배치로 통일한다. */
@media (max-width: 1023px) {
    .m-modal-card-overlay {
        padding: 12px !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 모바일 카드형 모달 공통 클래스는 컨테이너 크기, 모양, 스크롤 범위를 통일한다. */
    .m-modal-card {
        width: calc(100vw - 24px) !important;
        height: auto !important;
        max-height: calc(100dvh - (24px + env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
        margin: 0 auto !important;
        position: relative !important;
        inset: auto !important;
        border-radius: var(--fm-radius-medium) !important;
        border: var(--k-border-thin) !important;
        box-shadow: var(--fm-shadow-modal) !important;
        background: var(--k-bg-white) !important;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    /* 폼을 직접 포함한 모바일 카드형 모달도 본문 스크롤을 유지한다. */
    .m-modal-card > form {
        display: flex;
        min-height: 0;
        flex: 1 1 auto;
        flex-direction: column;
    }

    /* 모바일 카드형 모달 공통 클래스는 헤더 정렬과 여백을 통일한다. */
    .m-modal-card > .modal-header,
    .m-modal-card > form > .modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 14px 16px 12px !important;
        border-bottom: var(--k-border-thin);
        background: var(--k-bg-white);
    }

    /* 모바일 카드형 모달 공통 클래스는 본문 여백을 통일한다. */
    .m-modal-card > .modal-body,
    .m-modal-card > form > .modal-body {
        padding: 12px 16px 0 !important;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* 모바일 카드형 모달 공통 클래스는 푸터 여백과 보더를 통일한다. */
    .m-modal-card > .modal-footer,
    .m-modal-card > form > .modal-footer {
        padding: var(--fm-modal-body-footer-gap) 16px calc(16px + env(safe-area-inset-bottom));
        margin-top: 0;
        border-top: var(--k-border-thin);
        background: var(--k-bg-white);
        flex-shrink: 0;
    }




    .m-modal-card--lg {
        max-width: 720px !important;
    }

    /* 모바일 카드형 모달 공통 클래스는 카드형 모달의 헤더 오프셋을 제거한다. */
    .m-modal-header--no-offset {
        margin-top: 0 !important;
    }

    /* 모바일 카드형 모달 공통 클래스는 푸터 버튼을 가로 한 줄로 고정한다. */
    .m-modal-footer-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px;
        overflow-x: auto;
    }

    .m-modal-footer-row .btn-freemode {
        width: auto !important;
        min-width: 72px;
        min-height: var(--fm-touch-target-min);
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* 모바일 카드형 모달 공통 클래스는 좌우 액션 그룹 푸터를 통일한다. */
    .m-modal-footer-split {
        justify-content: space-between !important;
    }

    .m-modal-footer-split .footer-left,
    .m-modal-footer-split .footer-right {
        width: auto !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px;
    }

    .m-modal-footer-split .footer-right {
        margin-left: auto;
        justify-content: flex-end;
    }

    .m-modal-footer-split .footer-left:empty {
        display: none !important;
    }
}

/* 모바일 카드형 모달 공통 클래스는 767px 이하에서 좌우 여백을 8px로 축소한다. */
@media (max-width: 767px) {
    .m-modal-card-overlay {
        padding: 8px !important;
    }

    .m-modal-card {
        width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - (16px + env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
    }
}

/* 공통 데이터 테이블은 모바일에서도 실제 테이블 구조와 핵심 컬럼을 유지한다. */
@media screen and (max-width: 1023px) {
    .table-container-freemode.coop-data-table-container {
        display: block !important;
        visibility: visible !important;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .table-freemode.coop-data-table {
        display: table !important;
        visibility: visible !important;
        width: 100%;
        min-width: 560px !important;
    }

    .coop-data-table [data-mobile-hidden="true"] {
        display: none !important;
    }

    .coop-data-table th,
    .coop-data-table td {
        padding-left: 8px;
        padding-right: 8px;
    }
}