/* ==========================================================
   _mobile.css - 모바일 반응형 스타일(추후 변경 예정)
   style.css, _modals.css, _auth.css에서 분리
   ========================================================== */

/* -----------------------------------------------------------
   style.css에서 분리
   ----------------------------------------------------------- */

/* 모바일에서는 모든 모달 닫기(X) 버튼을 숨긴다. */
@media (max-width: 1023px) {
    .modal-overlay .modal-close-btn {
        display: none !important;
    }
}

/* notificationView는 태블릿 이하에서 필터 탭과 목록 간격을 모바일 흐름으로 정리한다. */
@media (max-width: 1023px) {
    .notification-view-page .notification-view-main {
        max-width: 100% !important;
    }

    .notification-view-page .notification-view-content {
        margin-top: 12px !important;
    }

    .notification-view-page .notification-filter-wrap {
        gap: 10px;
        margin-bottom: 12px;
    }

    .notification-view-page .notification-read-tabs,
    .notification-view-page .notification-type-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .notification-view-page .notification-read-tabs::-webkit-scrollbar,
    .notification-view-page .notification-type-tabs::-webkit-scrollbar {
        display: none;
    }

    .notification-view-page .noti-tab-btn,
    .notification-view-page .noti-type-btn {
        flex: 0 0 auto;
        white-space: nowrap;
        min-height: 44px;
    }

    .notification-view-page #notiTableContainer {
        overflow-x: auto;
        border-radius: var(--k-radius-md);
    }

    .notification-view-page #notiTableContainer .table-freemode {
        min-width: 720px;
    }

    .notification-view-page #notiCenterPagination {
        margin-top: 12px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
    }

    .notification-view-page #notiCenterPagination .page-btn {
        min-width: auto;
        height: 32px;
        padding: 0 6px;
    }

    .notification-view-page #notiCenterPagination .page-nav-btn {
        min-width: 32px;
        width: 32px;
        padding: 0;
        font-size: 16px;
    }
}

/* notificationView는 767px 이하에서 카드 리스트와 페이지 영역을 모바일 단일 흐름으로 전환한다. */
@media (max-width: 767px) {
    .notification-view-page .notification-view-content {
        margin-top: 10px !important;
    }

    .notification-view-page .noti-tab-btn {
        min-height: 42px;
        padding: 0 14px;
        font-size: 13px;
    }

    .notification-view-page .noti-type-btn {
        min-height: 40px;
        padding: 0 12px;
        font-size: 12px;
    }

    .notification-view-page #notiTableContainer {
        display: none !important;
    }

    .notification-view-page #notiCenterListMobile {
        display: block !important;
        margin-top: 8px;
        background: var(--k-bg-white);
        border: var(--k-border-thin);
        border-radius: var(--k-radius-md);
        overflow: hidden;
    }

    .notification-view-page .noti-center-card {
        padding: 12px 14px;
    }

    .notification-view-page .noti-center-card-msg {
        font-size: 13px;
        line-height: 1.45;
    }

    .notification-view-page .noti-center-card-date {
        font-size: 12px;
    }

    .notification-view-page .noti-unread-dot {
        width: 8px;
        height: 8px;
    }

    .notification-view-page #notiCenterPagination .page-btn {
        min-width: auto;
        height: 32px;
        padding: 0 6px;
        font-size: 13px;
    }

    .notification-view-page #notiCenterPagination .page-nav-btn {
        min-width: 32px;
        width: 32px;
        padding: 0;
        font-size: 16px;
    }
}

/* 알림/컨펌은 모바일 공통 규격(360px 기준)으로 통일한다. */
@media (max-width: 1023px) {
    .custom-alert-overlay {
        padding: 12px;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .custom-alert-container {
        width: calc(100vw - 24px);
        max-width: 420px;
        max-height: calc(100dvh - (24px + env(safe-area-inset-top) + env(safe-area-inset-bottom)));
        padding: 16px;
        border-radius: var(--k-radius-md);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .custom-alert-header {
        padding: 0 0 12px 0;
        margin-bottom: 0;
    }

    .custom-alert-title {
        font-size: 16px;
        font-weight: 700;
        line-height: 1.35;
    }

    .custom-alert-body {
        padding: 12px 0;
        gap: 12px;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .custom-alert-message {
        font-size: 14px;
        line-height: 1.5;
    }

    .custom-alert-footer {
        padding: 12px 0 0 0;
        gap: 8px;
        border-top: var(--k-border-thin);
        margin-top: 0;
    }

    .custom-alert-footer .btn-freemode {
        min-height: 44px;
        padding: 10px 12px;
    }

    .custom-alert-footer.single-button .btn-freemode {
        width: 100%;
    }

    .custom-alert-footer.two-buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    /* 컨펌 버튼 순서를 모바일 기준으로 맞춘다. */
    .custom-alert-footer.two-buttons #customAlertConfirmBtn {
        order: 1;
    }

    .custom-alert-footer.two-buttons #customAlertCancelBtn {
        order: 2;
    }
}

/* 메모 그룹 선택 모달은 모바일에서도 카드형 모달 규격을 유지한다. */
@media (max-width: 1023px) {
    #memoGroupModal.modal-overlay {
        align-items: center !important;
        justify-content: center !important;
        padding: 12px;
    }

    #memoGroupModal .modal-container.memo-group-modal-compact {
        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;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: var(--k-radius-md);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    #memoGroupModal .modal-header {
        padding: 14px 16px 12px;
        border-bottom: var(--k-border-thin);
        margin-bottom: 0;
    }

    #memoGroupModal .modal-title {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 16px;
        line-height: 1.35;
    }

    #memoGroupModal .modal-body {
        padding: 12px 16px 8px;
        margin-right: 0 !important;
        padding-right: 16px !important;
        box-sizing: border-box;
        overflow-y: auto;
    }

    #memoGroupModal .modal-footer {
        display: flex;
        flex-direction: row !important;
        align-items: center;
        justify-content: space-between;
        border-top: var(--k-border-thin);
        background: var(--k-bg-white);
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
        gap: 8px;
    }

    #memoGroupModal .modal-footer .btn-freemode {
        min-height: 44px;
        width: auto !important;
        min-width: 76px;
    }
}

/* calendarView는 모바일에서 툴바와 일정 리스트 간격을 360px 기준으로 통일한다. */
/* 컬러 팔레트 하단 닫기 푸터는 기본으로 숨기고 모바일에서만 노출한다. */

/* 헤더 마이페이지는 태블릿 모바일에서 프로필 버튼과 드롭다운 접근성을 개선한다. */
@media (max-width: 1023px) {
    /* 마이페이지 모달 상단은 고정 헤더와 겹치지 않도록 헤더 높이만큼 여백을 적용한다. */
    #myPageModal.modal-overlay {
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: calc(var(--header-height, 70px) + env(safe-area-inset-top)) !important;
    }

    /* 마이페이지 모달은 태블릿 구간에서 본문 스크롤과 버튼 배치 영역을 보장한다. */

    #myPageModal .modal-body {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* 마이페이지 모달 body의 기본 우측 여백을 제거해 화면 잘림을 방지한다. */
    #myPageModal .modal-body {
        margin-right: 0 !important;
        padding-right: 16px !important;
        box-sizing: border-box;
    }

    /* 마이페이지 모달 타이틀은 항상 보이도록 가시성을 명시한다. */
    #myPageModal .modal-title {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: var(--ref-ink) !important;
    }

    #myPageModal .modal-footer {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    #myPageModal .modal-footer .btn-freemode {
        min-height: 44px;
    }
}

/* 헤더 마이페이지는 360px 기준에서 드롭다운과 모달을 모바일 UX로 조정한다. */
@media (max-width: 767px) {

    #myPageModal.modal-overlay {
        align-items: stretch !important;
        justify-content: stretch !important;
        /* 모바일에서는 오버레이를 전체 높이로 사용하고 상단 보정은 modal-header에서 처리한다. */
        padding: 0;
        height: 100dvh;
        height: 100svh;
    }

    #myPageModal .modal-header {
        flex-shrink: 0;
        padding: 14px 16px 12px !important;
        border-bottom: var(--k-border-thin);
        margin-bottom: 0 !important;
        /* 모바일 고정 헤더와 겹치지 않도록 본문 시작 지점을 헤더 높이만큼 내린다. */
        margin-top: calc(var(--header-height, 70px) + env(safe-area-inset-top)) !important;
        background: var(--k-bg-white);
    }

    #myPageModal .modal-body {
        flex: 1;
        min-height: 0;
        padding: 12px 16px 8px !important;
    }

    /* 마이페이지 모달 body의 기본 우측 여백을 제거해 화면 잘림을 방지한다. */
    #myPageModal .modal-body {
        margin-right: 0 !important;
        padding-right: 16px !important;
        box-sizing: border-box;
    }

    /* 마이페이지 모달 타이틀은 모바일에서도 항상 보이도록 강제한다. */
    #myPageModal .modal-title {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: var(--ref-ink) !important;
        font-size: 20px;
        font-weight: 600;
        line-height: 1.4;
    }

    #myPageModal .form-group {
        margin-bottom: 12px;
    }

    #myPageModal .input-freemode {
        min-height: 44px;
    }

    #myPageModal .modal-footer {
        flex-shrink: 0;
        flex-direction: column;
        align-items: stretch;
        /* 모바일 브라우저 하단 안전 영역을 고려해 푸터 여백을 보정한다. */
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom)) !important;
    }

}

/* Task 뷰는 모바일에서 필터, 목록, 모달 공통 레이아웃을 화면 폭 기준으로 통일한다. */
@media (max-width: 1023px) {
    /* task 날짜 필터 입력 노출 시 배경을 차단하는 딤 오버레이를 표시한다. */

    /* 딤 오버레이 위에 달력이 보이도록 z-index를 상향한다. */
    .flatpickr-calendar.task-range-date-calendar {
        z-index: 12600 !important;
    }

    /* 딤 오버레이가 활성화되면 배경 스크롤을 제한한다. */
    body.task-range-date-dim-open {
        overflow: hidden;
    }

    /* Task 상세 모달 body의 기본 우측 여백을 제거해 화면 잘림을 방지한다. */

}

/* -----------------------------------------------------------
   _auth.css에서 분리
   ----------------------------------------------------------- */

/* 로그인/회원가입 모바일 보정 */
@media (max-width: 767px) {
    .login-card {
        padding: 35px 20px;
    }

    .login-header h1 {
        font-size: 29px;
    }

    .input-row {
        gap: 4px;
        align-items: center;
    }

    .input-row span {
        font-size: 13px;
    }

    .id-check-group {
        gap: 6px;
    }

}

/* faqView는 767px 이하에서 문의 모달을 전체화면으로 전환한다. */
@media (max-width: 767px) {
    #contactModal.modal-overlay,
    #myContactDetailModal.modal-overlay {
        align-items: stretch !important;
        justify-content: stretch !important;
        padding: 0;
        height: 100dvh;
        height: 100svh;
    }

    #contactModal .modal-header,
    #myContactDetailModal .modal-header {
        flex-shrink: 0;
        padding: 0px 0px 12px;
        border-bottom: var(--k-border-thin);
        margin-top: calc(var(--header-height, 70px) + env(safe-area-inset-top));
        margin-bottom: 0;
        background: var(--k-bg-white);
    }

    #contactModal .modal-title,
    #myContactDetailModal .modal-title {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 20px;
        font-weight: 600;
        line-height: 1.35;
    }

    #contactModal .modal-body,
    #myContactDetailModal .modal-body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px 16px 8px;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    #contactModal #contactModalForm > div:first-child {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-bottom: 12px !important;
    }

    #contactModal #contactModalForm > div {
        margin-bottom: 12px !important;
    }

    #contactModal #modalMessage {
        min-height: 140px;
    }

    #contactModal .btn-freemode.btn-main.is-primary {
        min-height: 44px;
        width: calc(100% - 92px) !important;
        padding: 0 12px !important;
        font-size: 14px !important;
        vertical-align: top;
        float: left;
    }

    /* 문의하기 버튼 오른쪽에 모바일 전용 닫기 버튼을 노출한다. */

    /* 문의 폼 하단 액션 버튼 float 정렬을 정리한다. */
    #contactModal #contactModalForm::after {
        content: "";
        display: block;
        clear: both;
    }
}

/* 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,
    .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;
    }

    /* 파일 선택 버튼은 모바일에서 입력 필드 흐름으로 대체한다. */
    .setting-view-page .file-select-btn {
        display: none !important;
    }

    /* 간단 입력 모달은 모바일에서도 카드형 최대 420px로 유지한다. */
    .setting-password-modal.modal-overlay {
        align-items: center !important;
        justify-content: center !important;
        padding: 12px;
        box-sizing: border-box;
    }

    .setting-password-modal .modal-container.setting-modal-compact {
        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: 0 auto !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        border-radius: var(--k-radius-md) !important;
        box-shadow: var(--k-shadow-modal) !important;
        padding: 16px 0 !important;
        overflow: hidden;
    }

    /* 비밀번호 변경 모달은 별도 카드형으로 라운드와 내부 여백을 적용한다. */
    .setting-password-modal .modal-container.setting-modal-compact {
        border-radius: var(--k-radius-md) !important;
        padding: 16px 0 !important;
    }

    .setting-password-modal .modal-header {
        padding: 16px 16px 12px !important;
        margin-bottom: 0;
    }

    .setting-password-modal .modal-body {
        padding: 12px 16px 8px !important;
    }

    .setting-password-modal .modal-body {
        margin-right: 0 !important;
        padding-right: 16px !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 비밀번호 모달은 모바일에서도 버튼 두 개가 명확히 보이도록 액션 영역을 보정한다. */
    .setting-password-modal .setting-password-form {
        padding: 4px;
    }

    .setting-password-modal .setting-password-actions {
        margin-top: 20px;
    }

    .setting-password-modal .setting-password-actions .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-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-input-row {
        flex-direction: column;
    }

    .setting-view-page .setting-input-row .setting-help-text {
        align-self: flex-start;
    }

    .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;
    }

    /* 비밀번호 모달 하단 버튼은 모바일에서 2열 고정으로 배치한다. */
    .setting-password-modal .setting-password-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 16px;
    }

    .setting-password-modal .setting-password-close-btn {
        min-width: 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;
    }
}

/* join 화면은 태블릿 이하에서 가입 폼 레이아웃을 1열 중심으로 정리한다. */
@media (max-width: 1023px) {
    .auth-page .mp-container.join-view-page {
        align-items: flex-start !important;
        padding-top: 48px !important;
        padding-left: 16px;
        padding-right: 16px;
    }

    .join-view-page .join-auth-card {
        width: min(640px, 100%);
        max-width: 100%;
        margin: 0 auto;
        padding: 24px 20px;
    }

    .join-view-page .join-company-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .join-view-page .id-check-group {
        align-items: stretch;
    }

    .join-view-page .auth-agree.join-auth-agree {
        align-items: flex-start;
        gap: 6px;
    }

    .join-view-page .join-submit-btn {
        min-height: 44px !important;
        height: 44px !important;
    }
}

/* join, joinDone, withDraw, privacyModal은 모바일(767px 이하) 간격을 보정한다. */
@media (max-width: 767px) {
    .auth-page .mp-container.join-view-page {
        padding-top: 24px !important;
        padding-left: 12px;
        padding-right: 12px;
    }

    .join-view-page .join-auth-card {
        padding: 20px 16px;
    }

    .join-view-page .join-title-wrap h1 {
        font-size: 28px;
    }

    .join-view-page .id-check-group {
        flex-direction: column;
        gap: 8px;
    }

    .join-view-page .id-check-group #checkIdBtn {
        width: 100%;
        min-height: 44px;
    }

    .join-view-page .join-company-notice {
        padding: 12px;
        font-size: 13px;
        line-height: 1.45;
    }

    .join-view-page .join-agree-view {
        margin-left: 0;
    }

    .join-done-view-page {
        padding: 20px 12px;
    }

    .join-done-view-page .join-done-card {
        width: 100%;
        max-width: 100%;
        padding: 20px 16px 24px 16px !important;
    }

    .join-done-view-page .join-done-card h1 {
        font-size: 28px;
        margin-bottom: 8px;
    }

    .join-done-view-page .join-done-card p {
        font-size: 14px;
        line-height: 1.55;
    }

    .join-done-view-page .success-icon {
        font-size: 52px;
        margin-bottom: 16px;
    }

    .join-done-view-page .join-done-card .btn-freemode {
        min-height: 44px;
    }

    .join-withdraw-view-page {
        min-height: 100vh;
        padding: 24px 16px 48px;
    }

    .join-withdraw-view-page .join-withdraw-card {
        width: 100%;
        max-width: 100%;
        padding: 24px 20px;
    }

    .join-withdraw-view-page .withdraw-step-head {
        margin-bottom: 24px;
    }

    .join-withdraw-view-page .withdraw-step-head h1 {
        font-size: 24px;
    }

    .join-withdraw-view-page .withdraw-step-head p {
        font-size: 13px;
    }

    .join-withdraw-view-page .auth-form-gap {
        gap: 20px;
    }

    .join-withdraw-view-page .withdraw-reason-list {
        grid-template-columns: 1fr;
    }

    .join-withdraw-view-page .withdraw-reason-item {
        min-height: 44px;
        padding: 0 12px;
    }

    .join-withdraw-view-page .withdraw-reason-item label {
        font-size: 14px;
        line-height: 1.45;
    }

    .join-withdraw-view-page .auth-notice {
        font-size: 13px;
        line-height: 1.6;
    }

    .join-withdraw-view-page .withdraw-agree-row {
        padding: 14px;
    }

    .join-withdraw-view-page .withdraw-action-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .join-withdraw-view-page .withdraw-action-row .btn-freemode {
        width: 100%;
        min-height: 44px;
    }

    .join-privacy-modal-overlay {
        align-items: stretch !important;
        justify-content: stretch !important;
        padding: 0;
        height: 100dvh;
        height: 100svh;
    }

    .join-privacy-modal-content {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        height: 100svh !important;
        max-height: 100dvh !important;
        max-height: 100svh !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .join-privacy-modal-header {
        flex-shrink: 0;
        padding: 14px 16px 12px !important;
        margin-bottom: 0 !important;
        border-bottom: var(--k-border-thin);
    }

    .join-privacy-modal-header h2 {
        font-size: 18px;
        line-height: 1.35;
    }

    .join-privacy-modal-body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px 16px 8px !important;
        line-height: 1.6 !important;
    }

    .join-privacy-modal-footer {
        flex-shrink: 0;
        margin-top: 0 !important;
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom)) !important;
        border-top: var(--k-border-thin);
        text-align: right;
    }

    .join-privacy-modal-footer .btn-freemode {
        width: 100%;
        min-height: 44px;
    }
}

/* login과 myPage 화면은 태블릿 이하에서 입력, 버튼, 카드 간격을 보정한다. */
@media (max-width: 1023px) {
    .login-page-body .login-right-panel {
        padding: 24px 16px 28px;
    }

    .login-page-body .login-right-panel .login-card {
        width: min(560px, 100%);
        max-width: 100%;
        height: auto;
        padding: 0 20px 20px;
    }

    .login-page-body .login-header {
        margin-bottom: 48px;
    }

    .login-page-body .login-option-row {
        margin-top: 14px;
        margin-bottom: 16px;
    }

    .login-page-body .login-submit-btn,
    .login-page-body .social-btn {
        min-height: 44px;
    }

}

/* login과 myPage 화면은 모바일에서 옵션 행과 버튼 라인을 터치 기준으로 정리한다. */
@media (max-width: 767px) {
    .login-page-body .login-card-container {
        min-height: 100dvh;
    }

    .login-page-body .login-left-panel {
        min-height: 220px;
        padding: 28px 16px;
    }

    .login-page-body .login-left-content {
        gap: 16px;
    }

    .login-page-body .login-left-brand-text {
        font-size: 28px;
    }

    .login-page-body .login-left-copy h2 {
        font-size: 20px;
    }

    .login-page-body .login-right-panel {
        padding: 12px 12px 20px;
    }

    .login-page-body .login-right-panel .login-card {
        padding: 0 12px 16px;
    }

    .login-page-body .login-header {
        margin-bottom: 28px;
    }

    .login-page-body .login-header h1 {
        font-size: 28px;
        line-height: 1.25;
    }

    .login-page-body .login-header p {
        font-size: 14px;
    }

    /* 로그인 옵션 행은 모바일에서도 한 줄 가로 배치를 유지한다. */
    .login-page-body .login-option-row {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .login-page-body .login-checkbox-wrapper {
        flex: 1 1 auto;
        min-width: 0;
    }

    .login-page-body .login-find-link {
        font-size: 13px;
    }

    .login-page-body .login-links {
        margin-top: 24px;
        gap: 4px;
    }

    .login-page-body .social-login-divider {
        margin: 18px 0;
    }

    .login-page-body .social-btn {
        margin-bottom: 8px;
        padding: 10px 12px;
        font-size: 14px;
    }

    /* 모바일에서는 최근 로그인 배지를 우측 상단에 고정하고 좌측 기준값을 해제한다. */
    .login-page-body .login-submit-btn.is-last-login::after,
    .login-page-body .social-btn.is-last-login::after {
        top: 5px;
        left: 8px;
        right: auto;
        min-width: 30px;
        height: 18px;
        font-size: 10px;
    }

    .login-page-body .social-btn i,
    .login-page-body .social-btn span,
    .login-page-body .social-btn svg {
        font-size: 18px;
        width: 18px;
        height: 18px;
    }

}

/* findAuth와 resetPw 화면은 태블릿 이하에서 인증 폼 간격과 버튼 배치 영역을 통일한다. */
@media (max-width: 1023px) {
    .mp-container.find-auth-view-page,
    .mp-container.reset-pw-view-page {
        align-items: flex-start !important;
        padding-top: 48px !important;
        padding-left: 16px;
        padding-right: 16px;
    }

    .find-auth-view-page .find-auth-card,
    .reset-pw-view-page .reset-pw-card {
        width: min(560px, 100%);
        max-width: 100%;
        margin: 0 auto;
        padding: 24px 20px !important;
    }

    .find-auth-view-page .find-auth-tabs.tabs-freemode {
        margin-bottom: 20px;
    }

    .find-auth-view-page .find-auth-tabs .tab-link-freemode {
        min-height: 44px;
        font-size: 14px;
    }

    .find-auth-view-page .form-box.active,
    .reset-pw-view-page .auth-form-gap {
        gap: 14px;
    }

    .find-auth-view-page .input-freemode,
    .find-auth-view-page .btn-freemode,
    .reset-pw-view-page .input-freemode,
    .reset-pw-view-page .btn-freemode {
        min-height: 44px;
    }

    .find-auth-view-page .result-box {
        margin-top: 12px;
        padding: 12px;
    }

    .reset-pw-view-page h2 {
        margin-bottom: 24px !important;
    }
}

/* findAuth와 resetPw 화면은 모바일에서 카드, 타이틀, 탭 간격을 추가로 줄인다. */
@media (max-width: 767px) {
    .mp-container.find-auth-view-page,
    .mp-container.reset-pw-view-page {
        padding-top: 24px !important;
        padding-left: 12px;
        padding-right: 12px;
    }

    .find-auth-view-page .find-auth-card,
    .reset-pw-view-page .reset-pw-card {
        padding: 20px 16px !important;
    }

    .find-auth-view-page .find-auth-title-wrap h1 {
        font-size: 28px;
        line-height: 1.3;
    }

    .reset-pw-view-page h2 {
        font-size: 26px;
        line-height: 1.3;
        margin-bottom: 20px !important;
    }

    .find-auth-view-page .find-auth-tabs.tabs-freemode {
        padding: 3px;
        margin-bottom: 16px;
    }

    .find-auth-view-page .find-auth-tabs .tab-link-freemode {
        font-size: 13px;
    }

    .find-auth-view-page .form-box.active,
    .reset-pw-view-page .auth-form-gap {
        gap: 18px;
    }

    .find-auth-view-page .id-result-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .find-auth-view-page .auth-join,
    .reset-pw-view-page .auth-join {
        margin-top: 24px;
    }
}

/* projectView 모달은 태블릿 이하에서 모달 폭과 푸터 버튼 배치를 화면 중심으로 정리한다. */
@media (max-width: 1023px) {
    #projectCreateModal .modal-container.modal-fullscreen-mobile,
    #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(--k-radius-md) !important;
    }

    /* projectView 전체화면 모달은 헤더와 타이틀 가시성을 모바일에서 고정한다. */
    #projectCreateModal .modal-header,
    #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, 70px) + env(safe-area-inset-top));
    }

    #projectCreateModal .modal-title,
    #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;
    }

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

    #projectCreateModal .form-group.form-inline-group {
        flex-direction: column;
        align-items: stretch;
        gap: 12px !important;
    }

    /* 일정 등록 토글은 모바일에서도 좌측 정렬로 유지한다. */

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

    #projectCreateModal .modal-footer,
    #quickCustomerModal .modal-footer,
    #templateSelectModal .modal-footer {
        padding: 12px 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;
    }

    #deleteProjectModal .modal-container.modal-small,
    #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(--k-radius-md) !important;
    }

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

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

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

    /* 컬러 팔레트 팝업 하단 닫기 버튼 영역은 모바일에서도 우측 정렬 기준으로 보정한다. */
    #colorPaletteModal .modal-footer {
        display: flex;
        justify-content: flex-end;
        padding: 8px 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(--k-radius-md) !important;
    }
}

/* projectView 모달은 모바일에서 전체화면 모달과 팝업 모달 크기를 추가 보정한다. */
@media (max-width: 767px) {
    #projectCreateModal .modal-container.modal-fullscreen-mobile,
    #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: 0 !important;
    }

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

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

    #projectCreateModal .modal-body,
    #quickCustomerModal .modal-body,
    #templateSelectModal .modal-body {
        padding: 12px 16px 8px !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;
    }

    #deleteProjectModal .modal-container.modal-small,
    #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;
    }

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

    #deleteProjectModal .modal-title,
    #colorPaletteModal .modal-title,
    #colorFilterModal .modal-title {
        font-size: 20px;
        font-weight: 600;
    }

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

    #colorPaletteModal .modal-footer {
        padding: 8px 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: 0 !important;
    }

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

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

/* projectDetailView는 모바일에서 상세 섹션과 모달 구조를 화면 폭에 맞춰 정리한다. */
@media (max-width: 1023px) {

    /* 모바일에서는 정산 탭을 숨기고 review/task/feed/schedule/calendar만 사용한다. */

    /* 프로젝트 상세 상단 액션 버튼은 모바일에서도 우측 정렬로 유지한다. */

    /* 메모 섹션 편집 버튼은 제목 우측 끝에 배치한다. */

    /* 피드백 상단 액션은 선택박스를 좌측, 버튼을 우측 흐름으로 고정한다. */

    /* 피드백 테이블은 모바일에서도 가로 스크롤로 공통 테이블 구조를 유지한다. */

    /* 피드백 테이블 최소 폭: 모바일에서 열 구조가 무너지지 않도록 유지한다. */

    /* 공유일정 상단 입력과 액션 버튼은 한 줄에서 입력 좌측, 버튼 우측 배치를 유지한다. */

    /* 공유 액션 버튼(링크복사/공유하기)은 모바일에서도 우측 정렬로 유지한다. */

    #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(--k-radius-md) !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 10px !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;
    }

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

}

/* projectDetailView는 작은 모바일에서 섹션과 모달을 세로 우선 구조로 단순화한다. */
@media (max-width: 767px) {

    /* 프로젝트 정보 내 메모 수정 버튼은 작은 모바일에서도 2열 구성을 유지한다. */

    #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: 0 !important;
    }

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

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