/* 인증 화면 전용 모바일 규칙을 로그인 후 업무 화면과 분리한다. */
/* ==========================================================
   _mobile.css - 모바일 반응형 스타일(추후 변경 예정)
   style.css, _modals.css, _auth.css에서 분리
   ========================================================== */

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

/* 알림/컨펌은 모바일 공통 규격(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: 412px;
        max-height: calc(100dvh - (24px + env(safe-area-inset-top) + env(safe-area-inset-bottom)));
        padding: var(--fm-space-8) var(--fm-space-5) var(--fm-space-5);
        border-radius: var(--fm-radius-medium);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .custom-alert-header {
        padding: 0;
        margin: var(--fm-space-5) 0 0;
    }

    .custom-alert-title {
        font-size: var(--fm-font-size-heading-small);
        font-weight: 600;
        line-height: 1.4;
    }

    .custom-alert-body {
        min-height: 50px;
        margin-top: var(--fm-space-6);
        padding: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

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

    .custom-alert-footer {
        gap: var(--fm-space-3);
        border: 0;
    }

    .custom-alert-footer .btn-freemode {
        min-height: var(--fm-control-height-large);
        padding: 0 var(--fm-space-4);
    }

    .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: var(--fm-space-3);
    }

    /* 컨펌 취소 버튼을 왼쪽에 배치한다. */
    .custom-alert-footer.two-buttons #customAlertCancelBtn {
        order: 1;
    }

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

/* 로그인/회원가입 모바일 보정 */
@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;
    }

}


/* 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(512px, 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;
    }

    /* 태블릿 회원탈퇴 본문의 바깥 여백을 화면 폭에 맞춰 축소한다. */
    .mp-container.join-withdraw-view-page {
        padding: 40px var(--fm-space-4) 80px;
    }

    /* 태블릿 회원탈퇴 패널의 내부 여백을 줄여 두 열 사유 목록을 유지한다. */
    .join-withdraw-view-page .join-withdraw-panel {
        padding: var(--fm-space-8) var(--fm-space-12);
    }

}

/* 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: var(--fm-font-size-heading-small);
    }

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

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

    .mp-container.join-withdraw-view-page {
        padding: var(--fm-space-8) var(--fm-space-3) 64px;
    }

    /* 모바일 회원탈퇴 제목과 패널 사이의 간격을 축소한다. */
    .join-withdraw-view-page .join-withdraw-shell {
        gap: var(--fm-space-6);
    }

    /* 모바일 회원탈퇴 페이지 제목을 화면 폭에 맞는 크기로 표시한다. */
    .join-withdraw-view-page .join-withdraw-page-title {
        font-size: var(--fm-font-size-detail-title);
    }

    /* 모바일 회원탈퇴 패널의 좌우 여백을 16픽셀로 축소한다. */
    .join-withdraw-view-page .join-withdraw-panel {
        padding: var(--fm-space-6) var(--fm-space-4);
    }

    /* 모바일 회원탈퇴 단계의 주요 영역 간격을 32픽셀로 축소한다. */
    .join-withdraw-view-page .step-container.active,
    .join-withdraw-view-page .withdraw-form {
        gap: var(--fm-space-8);
    }

    /* 모바일 회원탈퇴 사유 목록을 한 열로 배치한다. */
    .join-withdraw-view-page .withdraw-reason-list {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 모바일 회원탈퇴 안내 문구를 13픽셀로 표시한다. */
    .join-withdraw-view-page .withdraw-step-description {
        font-size: var(--fm-font-size-small);
    }

    /* 모바일 회원탈퇴 사유 행의 내부 여백을 유지한다. */
    .join-withdraw-view-page .withdraw-reason-item {
        padding: var(--fm-space-3) var(--fm-space-35);
    }

    /* 모바일 회원탈퇴 사유 문구를 14픽셀로 표시한다. */
    .join-withdraw-view-page .withdraw-reason-item label {
        font-size: var(--fm-font-size-body);
        line-height: 1.4;
    }

    /* 모바일 회원탈퇴 약관 문구의 가독성을 높인다. */
    .join-withdraw-view-page .withdraw-notice {
        font-size: 13px;
        line-height: 1.6;
    }

    /* 모바일 회원탈퇴 본인확인 라벨과 입력창을 한 열로 배치한다. */
    .join-withdraw-view-page .withdraw-verification-row {
        grid-template-columns: 1fr;
        gap: var(--fm-space-2);
    }

    /* 모바일 회원탈퇴 버튼도 44픽셀 터치 높이를 유지한다. */
    .join-withdraw-view-page .withdraw-action-row .btn-freemode {
        min-height: var(--k-btn-main-height);
    }

    /* 모바일 회원탈퇴 동의 문구는 여러 줄에서도 체크박스와 상단을 맞춘다. */
    .join-withdraw-view-page .withdraw-agree-label {
        align-items: flex-start;
        white-space: normal;
    }

    .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: var(--fm-radius-medium) !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 0 !important;
        line-height: 1.6 !important;
    }

    .join-privacy-modal-footer {
        flex-shrink: 0;
        margin-top: 0 !important;
        padding: var(--fm-modal-body-footer-gap) 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 화면은 태블릿 이하에서 입력, 버튼, 카드 간격을 보정한다. */
@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 화면은 모바일에서 옵션 행과 버튼 라인을 터치 기준으로 정리한다. */
@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 {
        width: min(512px, 100%);
        max-width: 100%;
        margin: 0 auto;
        padding: 24px 20px !important;
    }

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

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

    .find-auth-view-page .find-auth-tabs .tab-link-freemode {
        min-height: var(--fm-control-height-large);
        font-size: var(--fm-font-size-body-large);
    }

    .find-auth-view-page .form-box.active {
        gap: 24px;
    }

    .reset-pw-view-page .auth-form-gap {
        gap: 24px;
    }

    .find-auth-view-page .input-freemode,
    .reset-pw-view-page .input-freemode {
        min-height: var(--fm-control-height-medium);
    }

    .find-auth-view-page .btn-freemode,
    .reset-pw-view-page .btn-freemode {
        min-height: var(--fm-control-height-large);
    }

    .reset-pw-view-page .reset-pw-header {
        margin-bottom: 40px;
    }
}

/* 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: var(--fm-font-size-heading-small);
        line-height: 1.3;
    }

    .reset-pw-view-page .reset-pw-title {
        font-size: var(--fm-font-size-heading-small);
        line-height: 1.3;
    }

    .reset-pw-view-page .reset-pw-header {
        margin-bottom: var(--fm-space-8);
    }

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

    .find-auth-view-page .find-auth-tabs .tab-link-freemode {
        font-size: var(--fm-font-size-body);
    }

    .find-auth-view-page .form-box.active {
        gap: var(--fm-space-6);
    }

    .reset-pw-view-page .auth-form-gap {
        gap: var(--fm-space-6);
    }

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

    .find-auth-result-dialog {
        padding: var(--fm-space-8) var(--fm-space-5) var(--fm-space-5);
    }

    .find-auth-result-title {
        font-size: var(--fm-font-size-heading-small);
    }

    .find-auth-result-message {
        margin-top: var(--fm-space-6);
        font-size: var(--fm-font-size-body);
    }

    .find-auth-result-confirm {
        margin-top: var(--fm-space-6);
    }
}

/* Figma 로그인 화면을 태블릿 폭에 맞는 좌우 분할 카드로 축소한다. */
@media (min-width: 768px) and (max-width: 1279px) {
    /* 태블릿 로그인 카드의 크기와 열 너비를 화면에 맞춘다. */
    .login-page-body .login-card-container {
        grid-template-columns: minmax(0, 1fr) 440px;
        width: calc(100% - 32px);
        height: 720px;
        min-height: 720px;
        margin-top: var(--fm-space-8);
    }

    /* 태블릿 로그인 좌측 비주얼의 내부 여백을 유지한다. */
    .login-page-body .login-left-panel {
        height: 100%;
        min-height: 0;
        padding: var(--fm-space-8);
    }

    /* 태블릿 로그인 좌측 제목을 가용 폭에 맞춰 축소한다. */
    .login-page-body .login-left-copy h2 {
        font-size: 28px;
    }

    /* 태블릿 로그인 좌측 설명 문구를 16픽셀로 표시한다. */
    .login-page-body .login-left-copy p {
        font-size: var(--fm-font-size-body-large);
    }

    /* 태블릿 로그인 우측 패널의 폭과 간격을 축소한다. */
    .login-page-body .login-right-panel {
        gap: var(--fm-space-10);
        width: 440px;
        height: 100%;
        padding: var(--fm-space-8) var(--fm-space-5);
    }

    /* 태블릿 로그인 폼이 우측 패널 폭을 넘지 않도록 제한한다. */
    .login-page-body .login-right-panel .login-card {
        width: min(400px, 100%);
    }

}

/* Figma 인증 화면의 모바일 레이아웃을 한 열 반응형으로 전환한다. */
@media (max-width: 767px) {
    .auth-site-header {
        height: 60px;
        padding: 0 14px;
    }

    .auth-site-header-inner {
        min-height: 60px;
        padding: 0;
    }

    .auth-site-logo img {
        width: 40px;
        height: 40px;
    }

    .auth-site-logo span {
        display: inline-block;
        font-size: 20px;
    }

    .auth-site-actions {
        gap: 0;
    }

    .auth-site-action {
        min-height: 34px;
        padding: 7px var(--fm-space-2);
        font-size: var(--fm-font-size-caption);
    }

    .auth-brand-hero {
        gap: var(--fm-space-1);
        margin-top: var(--fm-space-8);
        padding: 0 var(--fm-space-4);
        box-sizing: border-box;
    }

    .auth-brand-hero-copy {
        font-size: var(--fm-font-size-heading-small);
        text-align: center;
    }

    .auth-brand-hero-logo {
        gap: var(--fm-space-3);
        height: 54px;
    }

    .auth-brand-hero-mark {
        width: 62px;
        height: auto;
    }

    .auth-brand-hero-logo span {
        font-size: 36px;
    }

    .login-page-body .login-card-container {
        grid-template-columns: 1fr;
        width: auto;
        height: auto;
        min-height: 0;
        margin: var(--fm-space-6) var(--fm-space-4) 0;
    }

    /* 모바일 로그인 좌측 비주얼을 카드 상단의 짧은 소개 영역으로 표시한다. */
    .login-page-body .login-left-panel {
        height: 220px;
        min-height: 220px;
        padding: var(--fm-space-6) var(--fm-space-4);
        background-size: cover;
    }

    /* 모바일 로그인 좌측 문구 사이의 간격을 축소한다. */
    .login-page-body .login-left-copy {
        gap: var(--fm-space-4);
    }

    /* 모바일 로그인 좌측 제목을 24픽셀로 표시한다. */
    .login-page-body .login-left-copy h2 {
        font-size: var(--fm-font-size-heading);
    }

    /* 모바일 로그인 좌측 설명 문구를 14픽셀로 표시한다. */
    .login-page-body .login-left-copy p {
        font-size: var(--fm-font-size-body);
    }

    /* 모바일 로그인 우측 패널을 카드 전체 폭으로 표시한다. */
    .login-page-body .login-right-panel {
        gap: var(--fm-space-10);
        width: 100%;
        height: auto;
        padding: var(--fm-space-10) var(--fm-space-5);
    }

    /* 모바일 로그인 브랜드 소개 문구가 한 줄 단위로 자연스럽게 배치되도록 축소한다. */
    .login-page-body .auth-brand-hero-copy {
        font-size: var(--fm-font-size-heading-small);
    }

    /* 모바일 로그인 브랜드 로고의 세로 높이를 콘텐츠에 맞춘다. */
    .login-page-body .auth-brand-hero-logo {
        height: auto;
    }

    /* 모바일 로그인 브랜드 이름을 36픽셀로 표시한다. */
    .login-page-body .auth-brand-hero-logo span {
        font-size: 36px;
    }

    /* 모바일 로그인 폼 카드를 우측 패널 전체 폭으로 표시한다. */
    .login-page-body .login-right-panel .login-card {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    /* 모바일 로그인 옵션 행의 세로 여백을 축소한다. */
    .login-page-body .login-option-row {
        flex-direction: row;
        align-items: center;
        margin: var(--fm-space-6) 0;
    }

    /* 모바일 소셜 로그인 버튼도 44픽셀 터치 영역을 유지한다. */
    .login-page-body .social-btn {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        margin-bottom: 0;
        padding: 0;
    }

    /* 모바일 최근 소셜 로그인 배지를 아이콘 위쪽 중앙에 배치한다. */
    .login-page-body .social-btn.is-last-login::after {
        top: -28px;
        left: 50%;
        right: auto;
        width: 66px;
        min-width: 66px;
        height: 19px;
        padding: 2px var(--fm-space-2);
        transform: translateX(-50%);
        font-size: 11px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: -0.02em;
    }

    .auth-page .mp-container.join-view-page {
        margin-top: var(--fm-space-12);
        padding: 0 var(--fm-space-4) !important;
    }

    .join-view-page .join-auth-card {
        width: 100%;
        padding: 0;
    }

    .join-view-page .join-company-grid {
        display: flex;
        gap: var(--fm-space-8);
    }

    .join-address-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .join-company-upload-box {
        padding: var(--fm-space-6) var(--fm-space-4);
    }

    .join-company-upload-box span br {
        display: none;
    }

    .join-consent-all,
    .social-signup-consent-all {
        align-items: flex-start;
    }

    .join-consent-row span,
    .social-signup-consent-row span {
        white-space: normal;
    }

    .join-service-notice {
        align-items: flex-start;
        font-size: var(--fm-font-size-small);
        line-height: 1.5;
    }

    .social-signup-consent-overlay {
        align-items: center;
    }

    .modal-container.social-signup-consent-modal {
        width: calc(100% - 32px);
        max-height: calc(100vh - 32px);
        padding: var(--fm-space-6) var(--fm-space-4);
        overflow-y: auto;
        border-radius: var(--fm-radius-medium);
    }

    .social-signup-consent-header h2 {
        font-size: var(--fm-font-size-heading-small);
    }

    .join-privacy-modal-content {
        width: calc(100% - 32px);
        padding: var(--fm-space-5);
    }
}

/* 좁은 모바일 화면에서 인증 링크와 주소 버튼이 잘리지 않도록 보정한다. */
@media (max-width: 420px) {
    .login-page-body .login-option-row {
        align-items: flex-start;
        gap: var(--fm-space-2);
    }

    .login-page-body .login-find-link {
        text-align: right;
    }

    .join-address-row {
        grid-template-columns: 1fr;
    }

    .join-consent-row,
    .social-signup-consent-row {
        align-items: flex-start;
    }

    .join-policy-view,
    .social-signup-policy-view {
        padding-top: 2px;
    }
}