/* ==========================================================
   _auth.css - 인증 관련 페이지 스타일
   (login, join, joinDone, withDraw, findAuth, resetPw)
   ========================================================== */

.auth-card {
    width: 600px;
    max-width: 600px;
    padding: 32px 32px;
}

.auth-card.card-freemode:hover {
    transform: none;
    box-shadow: var(--k-shadow-box);
}

.auth-form-gap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.w-100 {
    width: 100%;
}

.auth-notice {
    background-color: var(--k-bg-gray-light);
    border: var(--k-border-light);
    padding: 16px;
    border-radius: var(--k-radius-md);
    font-size: 14px;
    color: var(--k-text-gray);
    line-height: 1.5;
    margin-top: -50px;
}

.auth-join {
    text-align: center;
    margin-top: 16px;
    color: var(--k-text-gray);
    font-size: 14px;
}

.auth-join a {
    color: var(--ref-ink);
    font-weight: 700;
    text-decoration: underline;
    margin-left: 8px;
}

.input-group label {
    font-weight: 700;
    margin-bottom: 8px;
    display: block;
}

/* --- 회원가입 (join) --- */
html.auth-page {
    overflow-y: scroll;
}

.auth-page .mp-container {
    align-items: flex-start !important;
    padding-top: 100px !important;
}

.member-type-selector {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
}

/* 회원가입 회원유형 토글 버튼 레이아웃을 공통 토글 스타일 위에서 보정한다. */
.member-type-selector .toggle-btn-group {
    width: 100%;
}

/* 회원가입 회원유형 버튼 텍스트 줄바꿈 깨짐을 방지하고 아이콘 정렬을 맞춘다. */
.member-type-selector .toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 18px;
    white-space: nowrap;
    font-weight: 600;
}




/* 회원가입 기업 정보 입력 묶음도 일반 입력 항목과 동일한 간격으로 배치한다. */
.join-view-page .join-company-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

























/* 모바일에서도 요금제 버튼을 가로 1줄로 유지한다. */
@media (max-width: 767px) {
}

.company-only-field {
    display: none;
}

/* 기업회원으로 진입한 회원가입 화면은 스크립트 실행 전 기업정보를 즉시 표시한다. */
.company-only-field.is-visible {
    display: block;
}

/* 회원가입 개인 유형 초기 상태에서는 기업 안내 문구를 숨긴다. */
#companyNotice {
    display: none;
}

/* 회원가입의 기업 안내 문구는 토글 버튼 영역을 가리지 않도록 기본 음수 마진을 해제한다. */
.join-view-page #companyNotice {
    margin-top: 0;
    align-items: center;
    gap: 8px;
    cursor: default;
}

/* 소셜 회원가입처럼 조건부로 숨겨야 하는 입력 영역을 공통으로 감춘다. */
.join-hidden {
    display: none !important;
}

/* 회원가입 화면에서는 소셜 가입 버튼 영역을 항상 숨긴다. */
.join-view-page .social-login-divider,
.join-view-page .social-login {
    display: none !important;
}

.input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.id-check-group {
    display: flex;
    gap: 8px;
}

.password-group {
    position: relative;
}

.toggle-pw {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--k-text-gray);
}

.toggle-pw:hover {
    color: var(--k-text-gray);
}

/* --- 회원가입 완료 (joinDone) --- */
.success-icon {
    font-size: 64px;
    color: var(--ref-accent-yellow);
    margin-bottom: 24px;
    display: block;
    text-align: center;
}

/* --- 회원탈퇴 (withDraw) --- */
.withdraw-reason-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.withdraw-reason-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--k-border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: var(--k-bg-white);
}

.withdraw-reason-item:hover {
    border-color: var(--k-bg-blue);
    background-color: var(--k-bg-hover);
}

.withdraw-reason-item.selected {
    border-color: var(--k-bg-blue);
    background-color: var(--k-border-color-light);
}

.withdraw-reason-item input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--k-bg-blue);
    cursor: pointer;
    flex-shrink: 0;
}

.withdraw-reason-item label {
    flex: 1;
    cursor: pointer;
    font-size: 15px;
    color: var(--ref-ink);
}

.withdraw-reason-item.selected label {
    font-weight: 600;
}

.step-container {
    display: none;
}

.step-container.active {
    display: block;
}

/* --- 아이디/비밀번호 찾기 (findAuth) --- */
.find-auth-tabs.tabs-freemode {
    width: 100%;
    display: flex;
    padding: 4px;
    margin-bottom: 32px;
    justify-content: center;
}

.find-auth-tabs .tab-link-freemode {
    flex: 1;
    text-align: center;
}

.form-box {
    display: none;
}

.form-box.active {
    display: flex;
    flex-direction: column;
    gap: 19px;
    animation: authFadeIn 0.3s ease-in-out;
}

@keyframes authFadeIn {
    from {
        opacity: 0;
        transform: translateY(0);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 신규 인증 화면 공통 디자인 --- */

/* 신규 인증 화면의 배경과 기본 글꼴을 통일한다. */
.auth-reference-page-body {
    min-height: 100vh;
    margin: 0;
    background: var(--fm-color-canvas);
    font-family: var(--fm-font-family);
}

/* 신규 인증 카드를 표시하는 화면의 공통 여백을 정의한다. */
.mp-container.auth-reference-view {
    min-height: 100vh;
    padding: var(--fm-space-10) var(--fm-space-4);
    box-sizing: border-box;
    background: var(--fm-color-canvas);
}

/* 신규 인증 카드의 폭과 외곽 효과를 시안 규격으로 통일한다. */
.auth-reference-view .auth-reference-card {
    width: 512px;
    max-width: 100%;
    padding: var(--fm-space-9) var(--fm-space-6) var(--fm-space-8);
    box-sizing: border-box;
    cursor: default;
    background: var(--fm-color-surface);
    border: 1px solid var(--fm-color-border);
    border-radius: var(--fm-radius-large);
    box-shadow: var(--fm-shadow-card);
}

/* 신규 인증 카드에 불필요한 이동 효과가 생기지 않도록 고정한다. */
.auth-reference-view .auth-reference-card:hover {
    transform: none;
    box-shadow: var(--fm-shadow-card);
}

/* 신규 인증 화면 제목을 시안처럼 왼쪽 정렬한다. */
.auth-reference-title {
    margin: 0;
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-heading);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.03em;
    text-align: left;
}

/* 신규 인증 폼의 입력 항목 간격을 정의한다. */
.auth-reference-form {
    gap: 28px;
}

/* 신규 인증 폼 입력 묶음의 외부 여백을 제거한다. */
.auth-reference-form .input-group {
    margin: 0;
}

/* 신규 인증 폼 라벨의 크기와 강조 수준을 통일한다. */
.auth-reference-form .input-group label {
    display: block;
    margin-bottom: var(--fm-space-3);
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body-large);
    font-weight: 600;
    line-height: 1.4;
}

/* 신규 인증 폼의 필수 입력 표시를 오류 색상으로 표시한다. */
.auth-required {
    color: var(--fm-color-danger);
}

/* 신규 인증 폼 입력창을 공통 40픽셀 규격으로 통일한다. */
.auth-reference-form .input-freemode {
    height: var(--fm-control-height-medium);
    padding: 0 var(--fm-space-4);
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body-large);
    background: var(--fm-color-surface);
    border: 1px solid var(--fm-color-border-strong);
    border-radius: var(--fm-radius-medium);
    box-shadow: none;
}

/* 신규 인증 폼 입력창의 안내 문구 색상을 통일한다. */
.auth-reference-form .input-freemode::placeholder {
    color: var(--fm-color-text-secondary);
    opacity: 1;
}

/* 신규 인증 폼 입력창의 선택 상태를 브랜드 색상으로 표시한다. */
.auth-reference-form .input-freemode:focus {
    border-color: var(--fm-color-primary);
    box-shadow: none;
}

/* 신규 인증 폼의 주요 실행 버튼을 브랜드 버튼으로 표시한다. */
.auth-reference-view .auth-reference-submit {
    height: var(--fm-control-height-large);
    min-height: var(--fm-control-height-large);
    margin-top: var(--fm-space-4);
    padding: 0 var(--fm-space-4);
    color: var(--fm-color-surface) !important;
    font-size: var(--fm-font-size-body-large);
    font-weight: 500;
    background: var(--fm-color-primary) !important;
    border: none;
    border-radius: var(--fm-radius-medium);
    box-shadow: none;
}

/* 신규 인증 폼의 주요 실행 버튼에 간결한 마우스 반응을 적용한다. */
.auth-reference-view .auth-reference-submit:hover:not(:disabled) {
    color: var(--fm-color-surface) !important;
    background: var(--fm-color-primary) !important;
    box-shadow: none;
    opacity: 0.94;
}

/* 신규 인증 화면의 로그인 이동 영역을 카드 하단 중앙에 배치한다. */
.auth-reference-view .auth-reference-login {
    margin-top: var(--fm-space-8);
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-body-large);
}

/* 신규 인증 화면의 로그인 링크를 브랜드 색상으로 표시한다. */
.auth-reference-view .auth-reference-login a {
    margin-left: var(--fm-space-2);
    color: var(--fm-color-primary);
    font-weight: 600;
    text-decoration: none;
}

/* 신규 인증 화면의 로그인 링크에 마우스를 올리면 밑줄을 표시한다. */
.auth-reference-view .auth-reference-login a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- 신규 회원탈퇴 디자인 --- */

/* 회원탈퇴 페이지의 배경을 통합 인증 화면의 흰색 표면으로 표시한다. */
.withdraw-page-body {
    background: var(--fm-color-surface);
}

/* 회원탈퇴 본문을 공통 헤더 아래에서 시작하고 데스크톱 여백을 적용한다. */
.mp-container.join-withdraw-view-page {
    align-items: flex-start;
    min-height: calc(100vh - 60px);
    padding: 52px var(--fm-space-4) 120px;
    background: var(--fm-color-surface);
}

/* 회원탈퇴 제목과 단계 패널을 최대 1260픽셀 본문으로 묶는다. */
.join-withdraw-view-page .join-withdraw-shell {
    display: flex;
    flex-direction: column;
    gap: 42px;
    width: min(1260px, 100%);
    margin: 0 auto;
}

/* 회원탈퇴 화면의 통합 서비스 제목을 피그마 글자 위계로 표시한다. */
.join-withdraw-view-page .join-withdraw-page-title {
    margin: 0;
    color: var(--fm-color-text-primary);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 회원탈퇴 화면 제목의 가운데점을 일반 굵기로 구분한다. */
.join-withdraw-view-page .join-withdraw-page-title__separator {
    font-weight: 400;
}

/* 회원탈퇴 두 단계 콘텐츠를 연한 주요색 배경 패널에 배치한다. */
.join-withdraw-view-page .join-withdraw-panel {
    width: 100%;
    padding: var(--fm-space-8) 180px;
    box-sizing: border-box;
    overflow: hidden;
    background: color-mix(in srgb, var(--fm-color-primary) 3%, var(--fm-color-surface));
    border-radius: var(--fm-radius-medium);
}

/* 회원탈퇴 활성 단계를 피그마의 42픽셀 세로 간격으로 표시한다. */
.join-withdraw-view-page .step-container.active {
    display: flex;
    flex-direction: column;
    gap: 42px;
}

/* 회원탈퇴 단계 제목과 안내 문구를 가운데 정렬한다. */
.join-withdraw-view-page .withdraw-step-head {
    margin: 0;
    text-align: center;
}

/* 회원탈퇴 단계 제목을 18픽셀 준강조 글자로 표시한다. */
.join-withdraw-view-page .withdraw-step-title {
    margin: 0;
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-heading-small);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 회원탈퇴 단계의 보조 안내 문구를 표시한다. */
.join-withdraw-view-page .withdraw-step-description {
    margin: var(--fm-space-2) 0 0;
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 회원탈퇴 확인 단계 안내의 약관 문구를 주요색으로 강조한다. */
.join-withdraw-view-page .withdraw-confirm-title strong {
    color: var(--fm-color-primary);
    font-weight: 600;
}

/* 회원탈퇴 단계 폼의 주요 영역을 42픽셀 간격으로 배치한다. */
.join-withdraw-view-page .withdraw-form {
    display: flex;
    flex-direction: column;
    gap: 42px;
    width: 100%;
}

/* 회원탈퇴 사유와 상세내용을 32픽셀 간격으로 묶는다. */
.join-withdraw-view-page .withdraw-feedback-fields {
    display: flex;
    flex-direction: column;
    gap: var(--fm-space-8);
    width: 100%;
}

/* 회원탈퇴 사유 목록을 피그마의 두 열 구조로 배치한다. */
.join-withdraw-view-page .withdraw-reason-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fm-space-2);
    margin-top: 0;
}

/* 회원탈퇴 사유 항목을 라디오와 문구가 포함된 선택 행으로 표시한다. */
.join-withdraw-view-page .withdraw-reason-item {
    display: flex;
    align-items: center;
    gap: var(--fm-space-3);
    min-width: 0;
    min-height: var(--k-btn-main-height);
    padding: var(--fm-space-3) var(--fm-space-35);
    box-sizing: border-box;
    background: var(--fm-color-surface);
    border: 1px solid var(--fm-color-border-strong);
    border-radius: var(--fm-radius-medium);
}

/* 회원탈퇴 사유 항목에 마우스를 올리면 주요색 테두리를 표시한다. */
.join-withdraw-view-page .withdraw-reason-item:hover {
    background: var(--fm-color-surface);
    border-color: var(--fm-color-primary);
}

/* 선택된 회원탈퇴 사유 행은 피그마처럼 중립 표면을 유지한다. */
.join-withdraw-view-page .withdraw-reason-item.selected {
    background: var(--fm-color-surface);
    border-color: var(--fm-color-border-strong);
}

/* 회원탈퇴 사유의 키보드 포커스를 주요색 외곽선으로 표시한다. */
.join-withdraw-view-page .withdraw-reason-item:focus-within {
    border-color: var(--fm-color-primary);
    box-shadow: 0 0 0 3px var(--fm-color-primary-soft);
}

/* 회원탈퇴 사유 라디오 버튼에 브랜드 색상을 적용한다. */
.join-withdraw-view-page .withdraw-reason-item input[type="radio"] {
    width: var(--fm-space-4);
    height: var(--fm-space-4);
    margin: 0;
    accent-color: var(--fm-color-primary);
    flex-shrink: 0;
}

/* 회원탈퇴 사유 문구를 14픽셀 중간 굵기로 표시한다. */
.join-withdraw-view-page .withdraw-reason-item label {
    min-width: 0;
    flex: 1;
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 선택된 회원탈퇴 사유 문구도 동일한 중간 굵기를 유지한다. */
.join-withdraw-view-page .withdraw-reason-item.selected label {
    font-weight: 500;
}

/* 회원탈퇴 상세내용 입력을 라벨과 입력창의 세로 묶음으로 표시한다. */
.join-withdraw-view-page .withdraw-detail-field {
    display: flex;
    flex-direction: column;
    gap: var(--fm-space-35);
    width: 100%;
}

/* 회원탈퇴 상세내용 라벨을 보조색 준강조 글자로 표시한다. */
.join-withdraw-view-page .withdraw-detail-field label {
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-body);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 회원탈퇴 상세내용 입력창을 피그마의 120픽셀 높이로 표시한다. */
.join-withdraw-view-page .withdraw-detail-field textarea {
    width: 100%;
    height: 120px;
    min-height: 120px;
    padding: 10px var(--fm-space-35);
    box-sizing: border-box;
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
    line-height: 1.4;
    resize: vertical;
    background: var(--fm-color-surface);
    border: 1px solid var(--fm-color-border-strong);
    border-radius: var(--fm-radius-medium);
}

/* 회원탈퇴 상세내용 입력창의 선택 상태를 브랜드 색상으로 표시한다. */
.join-withdraw-view-page .withdraw-detail-field textarea:focus {
    border-color: var(--fm-color-primary);
    box-shadow: none;
}

/* 회원탈퇴 단계의 주요·보조 행동을 가운데 정렬한다. */
.join-withdraw-view-page .withdraw-action-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--fm-space-2);
}

/* 회원탈퇴 약관을 피그마의 중립 안내 박스 형태로 표시한다. */
.join-withdraw-view-page .withdraw-notice {
    width: 100%;
    max-height: none;
    margin-top: 0;
    padding: 18px;
    box-sizing: border-box;
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
    line-height: 1.4;
    background: var(--fm-color-surface);
    border: 1px solid var(--fm-color-border-strong);
    border-radius: var(--fm-radius-medium);
}

/* 회원탈퇴 약관 제목을 본문보다 작고 굵게 표시한다. */
.join-withdraw-view-page .withdraw-notice h2 {
    margin: 0 0 6px;
    font-size: var(--fm-font-size-small);
    font-weight: 600;
    line-height: 1.4;
}

/* 회원탈퇴 약관 번호 목록의 기본 여백과 줄 간격을 정리한다. */
.join-withdraw-view-page .withdraw-notice ol {
    margin: 0;
    padding-left: 21px;
}

/* 회원탈퇴 약관 항목은 별도 여백 없이 연속된 번호 목록으로 표시한다. */
.join-withdraw-view-page .withdraw-notice li + li {
    margin-top: 0;
}

/* 회원탈퇴 아이디와 본인확인 입력행을 세로로 정렬한다. */
.join-withdraw-view-page .withdraw-verification-fields {
    display: flex;
    flex-direction: column;
    gap: var(--fm-space-4);
    width: 500px;
    max-width: 100%;
}

/* 회원탈퇴 본인확인 라벨과 입력창을 피그마의 행 구조로 배치한다. */
.join-withdraw-view-page .withdraw-verification-row {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    align-items: center;
    gap: 42px;
}

/* 회원탈퇴 본인확인 라벨을 공통 본문 규격으로 표시한다. */
.join-withdraw-view-page .withdraw-verification-row label {
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/* 회원탈퇴 본인확인 입력창 높이와 테두리를 공통 폼 규격에 맞춘다. */
.join-withdraw-view-page .withdraw-verification-row .input-freemode {
    width: 100%;
    min-width: 0;
    height: var(--k-input-height);
    padding: 0 var(--fm-space-35);
    color: var(--fm-color-text-primary);
    background: var(--fm-color-surface);
    border: 1px solid var(--fm-color-border-strong);
    border-radius: var(--fm-radius-medium);
}

/* 회원탈퇴 아이디 읽기전용 입력창을 중립 배경으로 구분한다. */
.join-withdraw-view-page .withdraw-verification-row .withdraw-readonly-input {
    font-weight: 600;
    background: var(--fm-color-canvas);
}

/* 회원탈퇴 약관 동의 영역의 외부 여백을 제거한다. */
.join-withdraw-view-page .withdraw-agree-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
}

/* 회원탈퇴 약관 동의 체크박스와 문구를 한 줄로 배치한다. */
.join-withdraw-view-page .withdraw-agree-label {
    display: inline-flex;
    align-items: center;
    gap: var(--fm-space-2);
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
}

/* 회원탈퇴 약관 동의 체크박스에 브랜드 색상을 적용한다. */
.join-withdraw-view-page .withdraw-agree-label input {
    width: var(--fm-space-35);
    height: var(--fm-space-35);
    margin: 0;
    accent-color: var(--fm-color-primary);
    flex-shrink: 0;
}

/* 회원탈퇴 약관 동의 체크박스의 선택 상태를 주요색으로 표시한다. */
.join-withdraw-view-page .withdraw-agree-label input:checked {
    background-color: var(--fm-color-primary);
    border-color: var(--fm-color-primary);
}

/* --- 신규 회원가입 디자인 --- */

/* 회원가입 카드는 긴 입력 폼이 잘리지 않도록 화면 상단부터 배치한다. */
.auth-page .mp-container.join-view-page {
    align-items: flex-start !important;
    padding-top: var(--fm-space-10) !important;
}

/* 회원가입 제목과 첫 입력 영역 사이의 간격을 정의한다. */
.join-view-page .join-title-wrap {
    margin-bottom: var(--fm-space-12);
}

/* 회원가입 폼의 개인·기업 선택 영역 여백을 제거한다. */
.join-view-page .member-type-selector {
    margin-bottom: 0;
}

/* 회원가입 개인·기업 선택 그룹을 브랜드 색상 기반으로 표시한다. */
.join-view-page .member-type-selector .toggle-btn-group {
    overflow: hidden;
    background: var(--fm-color-surface);
    border: 1px solid var(--fm-color-border-strong);
    border-radius: var(--fm-radius-medium);
}

/* 회원가입 개인·기업 선택 버튼의 높이와 글꼴을 통일한다. */
.join-view-page .member-type-selector .toggle-btn {
    min-height: var(--fm-control-height-large);
    padding: 0 var(--fm-space-4);
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-body-large);
    background: var(--fm-color-surface);
}

/* 회원가입 개인·기업 선택 버튼의 선택 상태를 브랜드 색상으로 표시한다. */
.join-view-page .member-type-selector .toggle-btn.active {
    color: var(--fm-color-surface);
    background: var(--fm-color-primary);
}

/* 회원가입 개인·기업 선택 버튼의 마우스 반응을 부드럽게 표시한다. */
.join-view-page .member-type-selector .toggle-btn:hover:not(.active) {
    color: var(--fm-color-text-primary);
    background: var(--fm-color-primary-soft);
}




/* 기업 회원 추가 입력 항목 사이의 간격을 신규 폼과 통일한다. */
.join-view-page .join-company-grid {
    gap: var(--fm-space-6);
}

/* 회원가입 아이디 입력창과 중복확인 버튼을 한 줄로 배치한다. */
.join-view-page .id-check-group {
    display: flex;
    align-items: stretch;
    gap: var(--fm-space-2);
}

/* 회원가입 아이디 입력창이 남은 영역을 채우도록 설정한다. */
.join-view-page .id-check-group .join-flex-1 {
    min-width: 0;
    flex: 1;
}

/* 회원가입 중복확인 버튼은 공통 버튼 너비를 유지하며 입력창 옆에 배치한다. */
.join-view-page .join-id-check-btn {
    flex: 0 0 auto;
}

/* 회원가입 비밀번호 입력창의 보기 버튼 공간을 확보한다. */
.join-view-page .password-group .input-freemode {
    padding-right: var(--fm-space-12);
}

/* 회원가입 비밀번호 보기 버튼을 입력창 오른쪽 중앙에 배치한다. */
.join-view-page .toggle-pw {
    right: var(--fm-space-1);
    width: var(--fm-control-height-medium);
    height: var(--fm-control-height-medium);
    padding: 0;
    color: var(--fm-color-text-secondary);
}

/* 회원가입 비밀번호 보기 버튼의 마우스 반응을 정의한다. */
.join-view-page .toggle-pw:hover {
    color: var(--fm-color-text-primary);
}
















/* 회원가입 폼 안의 로그인 이동 영역은 폼 간격만 사용한다. */
.join-view-page .auth-reference-login {
    margin-top: 0;
}

/* --- 신규 아이디·비밀번호 찾기 디자인 --- */

/* 아이디·비밀번호 찾기 제목과 탭 사이의 간격을 정의한다. */
.find-auth-view-page .find-auth-title-wrap {
    margin-bottom: var(--fm-space-12);
}

/* 아이디·비밀번호 찾기 탭을 시안의 밑줄형 탭으로 표시한다. */
.find-auth-view-page .find-auth-tabs.tabs-freemode {
    width: 100%;
    max-height: none;
    padding: 0;
    gap: 0;
    margin-bottom: var(--fm-space-10);
    overflow: visible;
    background: transparent;
    border-bottom: 1px solid var(--fm-color-border-strong);
    border-radius: 0;
}

/* 아이디·비밀번호 찾기 탭 버튼의 기본 형태를 정의한다. */
.find-auth-view-page .find-auth-tabs .tab-link-freemode {
    position: relative;
    flex: 1;
    min-height: var(--fm-control-height-large);
    padding: 0 var(--fm-space-2);
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body-large);
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

/* 아이디·비밀번호 찾기 탭의 마우스 반응에서 배경 효과를 제거한다. */
.find-auth-view-page .find-auth-tabs .tab-link-freemode:hover {
    color: var(--fm-color-text-primary);
    background: transparent;
}

/* 아이디·비밀번호 찾기 선택 탭을 굵게 표시한다. */
.find-auth-view-page .find-auth-tabs .tab-link-freemode.active {
    color: var(--fm-color-text-primary);
    font-weight: 600;
    background: transparent;
    box-shadow: none;
}

/* 아이디·비밀번호 찾기 선택 탭 아래에 브랜드 밑줄을 표시한다. */
.find-auth-view-page .find-auth-tabs .tab-link-freemode.active::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: var(--fm-color-primary);
}

/* 아이디·비밀번호 찾기 활성 폼의 입력 간격을 시안에 맞춘다. */
.find-auth-view-page .find-auth-form.active {
    gap: 28px;
}

/* 아이디·비밀번호 찾기 실패 안내를 입력 폼 내부에 표시한다. */
.find-auth-view-page .find-auth-status {
    padding: var(--fm-space-3) var(--fm-space-4);
    color: var(--fm-color-danger);
    font-size: var(--fm-font-size-body);
    line-height: 1.5;
    background: var(--fm-color-danger-soft);
    border-radius: var(--fm-radius-medium);
}

/* 아이디·비밀번호 찾기 실패 안내의 숨김 상태를 보장한다. */
.find-auth-view-page .find-auth-status[hidden] {
    display: none;
}

/* 아이디·비밀번호 찾기 화면의 로그인 링크는 단독 링크로 표시한다. */
.find-auth-view-page .find-auth-login a {
    margin-left: 0;
}

/* --- 아이디·비밀번호 찾기 결과 팝업 --- */

/* 아이디·비밀번호 찾기 결과 팝업 배경을 화면 전체에 표시한다. */
.find-auth-result-modal {
    position: fixed;
    inset: 0;
    z-index: var(--k-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--fm-space-4);
    box-sizing: border-box;
    background: var(--k-overlay-dark-50);
}

/* 아이디·비밀번호 찾기 결과 팝업의 숨김 상태를 보장한다. */
.find-auth-result-modal[hidden] {
    display: none;
}

/* 아이디·비밀번호 찾기 결과 팝업 본문의 크기와 여백을 정의한다. */
.find-auth-result-dialog {
    width: 412px;
    max-width: 100%;
    padding: var(--fm-space-9) var(--fm-space-6) var(--fm-space-6);
    box-sizing: border-box;
    text-align: center;
    background: var(--fm-color-surface);
    border: 1px solid var(--fm-color-border);
    border-radius: var(--fm-radius-medium);
    box-shadow: var(--fm-shadow-modal);
}

/* 아이디·비밀번호 찾기 성공 아이콘의 원형 배경을 표시한다. */
.find-auth-result-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--fm-control-height-medium);
    height: var(--fm-control-height-medium);
    border-radius: var(--fm-radius-pill);
    background: var(--fm-color-primary);
}




/* 아이디·비밀번호 찾기 결과 팝업 제목을 강조한다. */
.find-auth-result-title {
    margin: var(--fm-space-6) 0 0;
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-heading);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.03em;
}

/* 아이디·비밀번호 찾기 결과 팝업 안내 문구를 표시한다. */
.find-auth-result-message {
    min-height: 50px;
    margin: var(--fm-space-8) 0 0;
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-body-large);
    font-weight: 500;
    line-height: 1.55;
    white-space: pre-line;
}

/* 아이디·비밀번호 찾기 결과 팝업 확인 버튼을 시안의 외곽선 버튼으로 표시한다. */
.find-auth-result-confirm {
    width: 100%;
    height: var(--fm-control-height-large);
    margin-top: var(--fm-space-8);
    color: var(--fm-color-text-primary);
    font-family: var(--fm-font-family);
    font-size: var(--fm-font-size-body-large);
    font-weight: 500;
    background: var(--fm-color-surface);
    border: 1px solid var(--fm-color-border-strong);
    border-radius: var(--fm-radius-medium);
    cursor: pointer;
}

/* 아이디·비밀번호 찾기 결과 팝업 확인 버튼의 마우스 반응을 정의한다. */
.find-auth-result-confirm:hover {
    background: var(--fm-color-canvas);
}

/* --- 비밀번호 재설정 (resetPw) --- */

/* 비밀번호 재설정 화면의 배경과 기본 글꼴을 정의한다. */
.reset-pw-page-body {
    min-height: 100vh;
    margin: 0;
    background: var(--fm-color-canvas);
    font-family: var(--fm-font-family);
}

/* 비밀번호 재설정 카드를 화면 중앙에 배치한다. */
.mp-container.reset-pw-view-page {
    min-height: 100vh;
    padding: var(--fm-space-10) var(--fm-space-4);
    box-sizing: border-box;
    background: var(--fm-color-canvas);
}

/* 비밀번호 찾기 시안과 동일한 카드 폭과 외곽 효과를 적용한다. */
.reset-pw-view-page .reset-pw-card {
    width: 512px;
    max-width: 100%;
    padding: var(--fm-space-9) var(--fm-space-6) var(--fm-space-8);
    box-sizing: border-box;
    cursor: default;
    background: var(--fm-color-surface);
    border: 1px solid var(--fm-color-border);
    border-radius: var(--fm-radius-large);
    box-shadow: var(--fm-shadow-card);
}

/* 비밀번호 재설정 카드에 불필요한 이동 효과가 생기지 않도록 고정한다. */
.reset-pw-view-page .reset-pw-card:hover {
    transform: none;
    box-shadow: var(--fm-shadow-card);
}

/* 비밀번호 재설정 제목과 입력 폼 사이의 간격을 정의한다. */
.reset-pw-header {
    margin-bottom: var(--fm-space-12);
}

/* 비밀번호 재설정 제목을 비밀번호 찾기 시안처럼 왼쪽 정렬한다. */
.reset-pw-title {
    margin: 0;
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-heading);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.03em;
    text-align: left;
}

/* 비밀번호 입력 항목 사이의 세로 간격을 통일한다. */
.reset-pw-view-page .reset-pw-form {
    gap: 28px;
}

/* 비밀번호 입력 항목의 기본 여백을 제거한다. */
.reset-pw-view-page .input-group {
    margin: 0;
}

/* 비밀번호 입력 항목 라벨을 시안의 강조 수준으로 표시한다. */
.reset-pw-view-page .input-group label {
    margin-bottom: var(--fm-space-3);
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body-large);
    font-weight: 600;
    line-height: 1.4;
}

/* 비밀번호 입력창의 높이와 테두리를 비밀번호 찾기 시안에 맞춘다. */
.reset-pw-view-page .input-freemode {
    height: var(--fm-control-height-medium);
    padding: 0 var(--fm-space-4);
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body-large);
    background: var(--fm-color-surface);
    border: 1px solid var(--fm-color-border-strong);
    border-radius: var(--fm-radius-medium);
    box-shadow: none;
}

/* 비밀번호 입력창의 안내 문구 색상을 공통 보조 텍스트 색상으로 표시한다. */
.reset-pw-view-page .input-freemode::placeholder {
    color: var(--fm-color-text-secondary);
    opacity: 1;
}

/* 비밀번호 입력창 선택 상태를 브랜드 색상으로 표시한다. */
.reset-pw-view-page .input-freemode:focus {
    border-color: var(--fm-color-primary);
    box-shadow: none;
}

/* 비밀번호 재설정 버튼을 시안의 대형 브랜드 버튼 규격으로 표시한다. */
.reset-pw-view-page .reset-pw-submit {
    height: var(--fm-control-height-large);
    margin-top: var(--fm-space-4);
    padding: 0 var(--fm-space-4);
    color: var(--fm-color-surface) !important;
    font-size: var(--fm-font-size-body-large);
    font-weight: 500;
    background: var(--fm-color-primary) !important;
    border: none;
    border-radius: var(--fm-radius-medium);
    box-shadow: none;
}

/* 비밀번호 재설정 버튼에 간결한 마우스 반응을 적용한다. */
.reset-pw-view-page .reset-pw-submit:hover:not(:disabled) {
    color: var(--fm-color-surface) !important;
    background: var(--fm-color-primary) !important;
    box-shadow: none;
    opacity: 0.94;
}

/* Figma 로그인 화면에는 최근 로그인 배지를 표시하지 않는다. */
.login-page-body .login-submit-btn.is-last-login::after,
.login-page-body .social-btn.is-last-login::after {
    display: none;
}

/* 로그인 이동 링크를 카드 하단 중앙에 배치한다. */
.reset-pw-view-page .reset-pw-login {
    margin-top: var(--fm-space-8);
    font-size: var(--fm-font-size-body-large);
}

/* 로그인 이동 링크를 시안의 브랜드 링크 형태로 표시한다. */
.reset-pw-view-page .reset-pw-login a {
    margin-left: 0;
    color: var(--fm-color-primary);
    font-weight: 600;
    text-decoration: none;
}

/* 로그인 이동 링크에 마우스를 올리면 밑줄을 표시한다. */
.reset-pw-view-page .reset-pw-login a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ==========================================================
   로그인 페이지 스타일 (style.css에서 이동)
   ========================================================== */

/* Login View Styles */
.login-page-body {
    background: var(--fm-color-canvas);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    font-family: var(--fm-font-family);
}

.login-card-container {
    width: 100%;
    min-height: 100vh;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 600px;
    align-items: stretch;
    column-gap: 0;
    box-sizing: border-box;
}

/* 로그인 좌측 소개 영역의 배치를 정의한다. */
.login-left-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 56px;
    background: var(--fm-color-canvas);
    overflow: hidden;
}

/* 로그인 좌측 콘텐츠를 시안처럼 중앙 정렬한다. */
.login-left-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--fm-space-9);
    width: 100%;
    max-width: 760px;
    text-align: center;
}

/* 로그인 좌측 상단 브랜드 영역을 구성한다. */
.login-left-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fm-space-5);
}

/* 로그인 화면의 공통 브랜드 심볼을 배치한다. */
.login-brand-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fm-space-1);
}

/* 로그인 브랜드 심볼의 원형 요소를 표시한다. */
.login-brand-dot {
    height: 18px;
    width: 18px;
    border-radius: var(--fm-radius-pill);
    background: var(--fm-color-primary);
}

/* 로그인 브랜드 심볼의 그라데이션 막대를 표시한다. */
.login-brand-pill {
    width: 40px;
    height: 18px;
    border-radius: var(--fm-radius-pill);
    background: linear-gradient(90deg, var(--fm-color-primary), var(--fm-color-logo-cyan));
}

/* 로그인 좌측 브랜드 텍스트 스타일을 지정한다. */
.login-left-brand-text {
    font-size: 42px;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: -0.02em;
    font-family: var(--fm-font-family);
    color: var(--ref-ink);
}

/* 로그인 좌측 소개 문구 영역을 구성한다. */
.login-left-copy {
    max-width: 760px;
    text-align: center;
}

/* 로그인 좌측 소개 제목 스타일을 지정한다. */
.login-left-copy h2 {
    margin: 0;
    font-size: var(--fm-font-size-heading);
    line-height: 1.45;
    letter-spacing: -0.03em;
    color: var(--fm-color-text-primary);
    font-weight: 500;
}

/* 로그인 우측 패널의 위치를 오른쪽으로 정렬한다. */
.login-right-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 30px 40px 54px;
    background-color: var(--fm-color-surface);
}

/* 로그인 우측 카드 폭을 고정해 시안 구조를 맞춘다. */
.login-right-panel .login-card {
    width: 600px;
    max-width: 600px;
    height: 800px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: var(--fm-color-surface);
    border: none !important;
    box-shadow: none !important;
}

.login-card {
    padding: 0 34px;
    background: var(--fm-color-surface);
    border-radius: var(--fm-radius-medium);
    box-shadow: var(--fm-shadow-card);
    border: 1px solid var(--fm-color-border);
}

/* 로그인 화면의 카드는 시안에 맞춰 외곽 효과를 제거한다. */
.login-right-panel .login-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

.login-header {
    text-align: left;
    margin-bottom: 70px;
}

/* 로그인 제목 상단의 브랜드 심볼 간격을 정의한다. */
.login-header-symbol {
    margin-bottom: var(--fm-space-9);
}

.login-header h1 {
    font-size: 32px;
    margin: 0 0 var(--fm-space-5);
    color: var(--fm-color-text-primary);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.03em;
}

.login-header p {
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-body-large);
    margin: 0;
    font-weight: 400;
}

.login-input-wrapper {
    margin-bottom: var(--fm-space-3);
}

.login-input {
    background: transparent !important;
    border: none !important;
    border-bottom: var(--k-border-thin) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 12px 0;
    font-size: var(--fm-font-size-body-large);
    color: var(--fm-color-text-primary);
    transition: border-color 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.login-input:focus {
    outline: none;
    border: none !important;
    border-bottom: 1px solid var(--fm-color-primary) !important;
    box-shadow: none !important;
}

.login-input::placeholder {
    color: var(--fm-color-text-secondary);
    font-weight: 400;
}

/* 로그인 유지 옵션과 계정 찾기 링크를 한 줄로 정렬한다. */
.login-option-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: var(--fm-space-5);
    margin-bottom: 28px;
}

.login-checkbox-wrapper {
    margin-bottom: 0;
}

.login-checkbox-wrapper .checkbox-freemode {
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-body);
    font-weight: 400;
}

/* 로그인 유지 체크박스의 크기와 브랜드 선택 색상을 정의한다. */
.login-checkbox-wrapper .checkbox-freemode input {
    width: 18px;
    height: 18px;
    accent-color: var(--fm-color-primary);
}

/* 로그인 유지 체크박스의 선택 상태를 브랜드 색상으로 표시한다. */
.login-checkbox-wrapper .checkbox-freemode input:checked {
    border-color: var(--fm-color-primary);
    background-color: var(--fm-color-primary);
}

/* 계정 찾기 링크의 줄바꿈을 방지한다. */
.login-find-link {
    white-space: nowrap;
}

.login-submit-btn {
    width: 100%;
    height: var(--fm-control-height-large);
    background: var(--fm-color-primary) !important;
    color: var(--fm-color-surface) !important;
    border: none !important;
    border-radius: var(--fm-radius-medium);
    font-size: var(--fm-font-size-body-large);
    padding: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--k-transition-fast);
    box-shadow: none;
    position: relative;
}

.login-submit-btn:hover {
    background: var(--fm-color-primary) !important;
    color: var(--fm-color-surface) !important;
    box-shadow: none;
    opacity: 0.94;
}

.login-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 60px;
}

.login-link {
    color: var(--fm-color-text-secondary);
    text-decoration: none;
    font-size: var(--fm-font-size-body);
    font-weight: 400;
    transition: color 0.2s ease;
}

.login-link:hover {
    color: var(--fm-color-text-primary);
}

/* 회원가입 안내 문구 스타일을 지정한다. */
.login-signup-text {
    font-size: var(--fm-font-size-body);
    color: var(--fm-color-text-secondary);
    font-weight: 400;
}

/* 회원가입 링크 강조 스타일을 지정한다. */
.login-signup-link {
    text-decoration: underline;
    text-underline-offset: 2px;
    color: var(--fm-color-text-secondary);
    font-weight: 600;
}

.social-login {
    display: flex;
    flex-direction: column;
    gap: var(--fm-space-3);
    margin-top: var(--fm-space-8);
}

.social-btn {
    width: 100%;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 600;
    border-radius: var(--fm-radius-medium);
    padding: 12px;
    transition: var(--k-transition-fast);
    cursor: pointer;
    font-size: 15px;
    border: var(--k-border-thin);
    position: relative;
}

/* 소셜 로그인 대형 버튼 규격을 통일한다. */
.social-btn-lg {
    height: var(--fm-control-height-large);
    font-size: var(--fm-font-size-body-large);
    font-weight: 500;
}

.social-btn i,
.social-btn span,
.social-btn svg {
    font-size: 19px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.social-btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: var(--k-shadow-btn);
}

.social-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px var(--k-overlay-dark-10);
}

.social-btn.naver {
    background: var(--fm-color-social-naver);
    color: var(--fm-color-surface);
    border: 1px solid var(--fm-color-social-naver);
}

.social-btn.naver:not(:disabled):hover {
    filter: brightness(0.9);
}

.social-btn.naver .naver-logo {
    font-size: 21px;
    font-weight: 900;
    color: var(--fm-color-surface);
}

.social-btn.kakao {
    background: var(--fm-color-social-kakao);
    color: var(--fm-color-text-primary);
    border: 1px solid var(--fm-color-social-kakao);
}

.social-btn.kakao:not(:disabled):hover {
    background: var(--k-color-chart-yellow);
    border-color: var(--k-color-chart-yellow);
}

.social-btn.kakao .kakao-logo {
    font-size: 21px;
    color: var(--fm-color-text-primary);
}

.social-btn.google {
    background: var(--fm-color-surface);
    color: var(--fm-color-text-primary);
    border: var(--k-border-thin);
}

.social-btn.google:not(:disabled):hover {
    background: var(--k-bg-gray-light);
    border-color: var(--k-color-gray-ccc);
}

.social-btn.google .google-logo {
    width: 20px;
    height: 20px;
}

/* 최근 로그인 수단에 해당하는 버튼 우측 상단에 배지를 표시한다. */
.login-submit-btn.is-last-login::after,
.social-btn.is-last-login::after {
    content: '최근 로그인';
    position: absolute;
    top: 6px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--ref-ink);
    color: var(--k-bg-white);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1;
    box-sizing: border-box;
    pointer-events: none;
}

/* 태블릿 이하에서 로그인 좌우 레이아웃을 세로로 전환한다. */
@media (max-width: 1200px) {
    .login-card-container {
        width: 100%;
        min-height: auto;
        grid-template-columns: 1fr;
        row-gap: 0;
    }

    .login-left-panel {
        min-height: 360px;
        padding: 48px 24px;
        gap: 20px;
    }

    .login-left-brand-text {
        font-size: 38px;
    }

    .login-left-copy {
        max-width: none;
    }

    .login-left-copy h2 {
        font-size: var(--fm-font-size-heading);
    }

    .login-right-panel {
        justify-content: center;
        padding: 36px 24px 40px;
    }

    .login-right-panel .login-card {
        width: min(600px, 100%);
        max-width: 100%;
        height: auto;
    }

}

/* 모바일에서는 소개 문구와 카드를 소형 화면에 맞춰 축소한다. */
@media (max-width: 767px) {
    .login-card-container {
        min-height: 100vh;
    }

    .login-left-panel {
        min-height: 280px;
        padding: 40px 20px;
    }

    .login-left-content {
        gap: 28px;
    }

    .login-left-brand-text {
        font-size: 34px;
    }

    .login-left-copy h2 {
        font-size: 24px;
        line-height: 1.34;
    }

    .login-right-panel {
        padding: 20px 14px 28px;
    }

    .login-right-panel .login-card {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
}




.company-only-field.show {
    max-height: 100px;
    opacity: 1;
    margin-top: 10px;
}

/* =============================================
   OAuth 팝업 공통 스타일 (oauthSuccess, oauthLoginResult)
   ============================================= */
.oauth-popup {
    background-color: var(--ref-bg-base);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    font-family: var(--fm-font-family);
    overflow: hidden;
}

.oauth-card {
    background-color: var(--fm-color-surface);
    padding: 40px;
    border-radius: var(--fm-radius-large);
    box-shadow: var(--fm-shadow-modal);
    text-align: center;
    max-width: 400px;
    width: 90%;
    animation: oauthSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid var(--fm-color-border);
}

.oauth-icon-wrapper {
    margin: 0 auto 24px;
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.oauth-icon-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--fm-color-primary);
    opacity: 0.1;
    animation: oauthPulse 2s infinite;
}

.oauth-icon-bg.error {
    background-color: var(--ref-accent-orange-soft);
}

.oauth-icon {
    font-size: 32px;
    color: var(--fm-color-primary);
    position: relative;
    z-index: 1;
    animation: oauthScaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards;
}

.oauth-icon.error {
    color: var(--ref-accent-orange-soft);
}

.oauth-title {
    font-size: var(--fm-font-size-heading);
    font-weight: 700;
    color: var(--fm-color-text-primary);
    margin-bottom: 8px;
    letter-spacing: var(--fm-letter-spacing-ui);
}

.oauth-message {
    color: var(--ref-gray-700);
    font-size: var(--fm-font-size-body);
    line-height: 1.5;
    margin-bottom: 32px;
}

.oauth-btn-close {
    background-color: var(--fm-color-primary);
    color: var(--fm-color-surface);
    border: none;
    padding: 12px 24px;
    border-radius: var(--fm-radius-medium);
    font-weight: 500;
    font-size: var(--fm-font-size-body);
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease;
    width: 100%;
    box-shadow: var(--fm-shadow-card);
}

.oauth-btn-close:hover {
    background-color: var(--fm-color-primary);
    filter: brightness(0.95);
    transform: translateY(-1px);
    box-shadow: var(--fm-shadow-card);
}

.oauth-btn-close:active {
    background-color: var(--fm-color-primary);
    filter: brightness(0.9);
    transform: translateY(0);
}

@keyframes oauthSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes oauthScaleIn {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes oauthPulse {
    0% { transform: scale(1); opacity: 0.1; }
    50% { transform: scale(1.1); opacity: 0.15; }
    100% { transform: scale(1); opacity: 0.1; }
}

/* ==========================================================
   Figma 인증 화면 공통 구조
   ========================================================== */

/* 인증 화면 공통 상단 내비게이션을 홈페이지 헤더 규격으로 배치한다. */
.auth-site-header {
    position: sticky;
    top: 0;
    z-index: var(--k-z-sticky);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
    padding: 0 24px;
    box-sizing: border-box;
    background: var(--fm-color-surface);
    box-shadow: none;
}

/* 인증 화면을 아래로 스크롤하면 고정 헤더와 본문 사이에 공통 그림자를 표시한다. */
.auth-site-header.is-scrolled {
    box-shadow: var(--k-shadow-hard-sm);
}

.auth-site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1260px;
    min-height: 60px;
    margin: 0 auto;
    padding: 0;
}

.auth-site-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--fm-space-2);
    color: var(--fm-color-text-primary);
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
}

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

.auth-site-logo span,
.auth-brand-hero-logo span {
    font-family: var(--fm-font-family);
    font-weight: 900;
}

.auth-site-logo span {
    display: inline-block;
    font-size: inherit;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

.auth-site-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.auth-site-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 14px;
    box-sizing: border-box;
    color: var(--fm-color-text-secondary);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
}

.auth-site-action-divider {
    width: 1px;
    height: 12px;
    background: var(--fm-color-border);
}

/* 인증 화면의 브랜드 소개 문구와 로고를 Figma 위치에 맞춘다. */
.auth-brand-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fm-space-2);
    width: min(1260px, 100%);
    margin: 52px auto 0;
}

.auth-brand-hero-copy {
    margin: 0;
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-heading);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

.auth-brand-hero-logo {
    display: flex;
    align-items: center;
    gap: var(--fm-space-4);
    height: 65px;
}

.auth-brand-hero-mark {
    width: 80px;
    height: 23px;
}

.auth-brand-hero-logo span {
    color: var(--fm-color-text-primary);
    font-size: 47px;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 인증 화면 공통 회원 유형 탭을 Figma의 외곽선 탭으로 표시한다. */
.auth-member-tabs,
.join-view-page .member-type-selector .toggle-btn-group {
    display: flex;
    width: 100%;
    height: 46px;
    box-sizing: border-box;
    overflow: hidden;
    background: var(--fm-color-canvas);
    border: 1px solid var(--fm-color-border-strong);
    border-radius: var(--fm-radius-medium);
}

.auth-member-tab,
.join-view-page .member-type-selector .toggle-btn {
    flex: 1;
    height: 45px;
    min-height: 0;
    padding: 0 var(--fm-space-6);
    color: var(--fm-color-text-secondary);
    font-family: var(--fm-font-family);
    font-size: var(--fm-font-size-label);
    font-weight: 600;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--fm-radius-medium);
    cursor: pointer;
}

.auth-member-tab.is-active,
.join-view-page .member-type-selector .toggle-btn.active {
    color: var(--fm-color-primary);
    background: var(--fm-color-surface);
    border-color: var(--fm-color-primary);
}

/* 로그인 화면 전체를 Figma 데스크톱 프레임과 동일한 세로 흐름으로 구성한다. */
.login-page-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--fm-color-surface);
}

/* 로그인 카드 외곽을 1260픽셀 분할 카드로 표시한다. */
.login-page-body .login-card-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 504px;
    width: min(1260px, calc(100% - 32px));
    height: 800px;
    min-height: 800px;
    margin: 52px auto 0;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--fm-color-surface);
    border: 1px solid var(--k-color-gray-e0);
    border-radius: var(--fm-radius-medium);
}

/* 로그인 카드 좌측에 Figma 원본 비주얼을 배치한다. */
.login-page-body .login-left-panel {
    display: flex;
    min-width: 0;
    height: 100%;
    padding: var(--fm-space-8);
    box-sizing: border-box;
    background-image: url('/images/auth/login-visual-background.jpeg');
    background-position: left center;
    background-repeat: no-repeat;
    background-size: auto 100%;
}

/* 로그인 좌측 소개 문구를 비주얼 중앙에 배치한다. */
.login-page-body .login-left-content {
    gap: var(--fm-space-8);
    max-width: none;
}

/* 로그인 좌측의 기존 보조 로고는 Figma 시안에서 제외한다. */
.login-page-body .login-left-brand {
    display: none;
}

/* 로그인 좌측 문구를 제목과 설명의 세로 묶음으로 표시한다. */
.login-page-body .login-left-copy {
    display: flex;
    flex-direction: column;
    gap: var(--fm-space-8);
    max-width: none;
    color: var(--fm-color-surface);
}

/* 로그인 좌측 핵심 문구를 Figma의 32픽셀 강조 제목으로 표시한다. */
.login-page-body .login-left-copy h2 {
    margin: 0;
    color: var(--fm-color-surface);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;
    text-shadow: 0 0 4px var(--k-overlay-dark-10);
}

/* 로그인 좌측 설명 문구를 Figma의 18픽셀 보조 문장으로 표시한다. */
.login-page-body .login-left-copy p {
    margin: 0;
    color: var(--fm-color-surface);
    font-size: var(--fm-font-size-heading-small);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
    text-shadow: 0 0 4px var(--k-overlay-dark-10);
}

/* 로그인 우측 패널을 브랜드 소개와 로그인 폼의 세로 구조로 배치한다. */
.login-page-body .login-right-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 52px;
    width: 504px;
    height: 100%;
    padding: var(--fm-space-8) 52px;
    box-sizing: border-box;
    background: var(--fm-color-surface);
}

/* 로그인 우측의 브랜드 소개 영역을 Figma 카드 내부 규격으로 축소한다. */
.login-page-body .auth-brand-hero {
    gap: var(--fm-space-35);
    width: 100%;
    margin: 0;
}

/* 로그인 우측의 브랜드 소개 문구를 22픽셀로 표시한다. */
.login-page-body .auth-brand-hero-copy {
    font-size: var(--fm-font-size-detail-title);
    text-align: center;
}

/* 로그인 우측의 브랜드 로고 요소를 가로로 정렬한다. */
.login-page-body .auth-brand-hero-logo {
    gap: var(--fm-space-3);
    height: auto;
}

/* 로그인 우측의 브랜드 심볼을 Figma 원본 크기로 표시한다. */
.login-page-body .auth-brand-hero-mark {
    width: 60px;
    height: 17px;
}

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

/* 로그인 우측 폼 카드를 400픽셀 고정 폭으로 표시한다. */
.login-page-body .login-right-panel .login-card {
    display: block;
    width: 400px;
    max-width: 100%;
    height: auto;
    padding: 0;
}

/* 로그인 우측의 이전 안내 제목은 Figma 시안에서 제외한다. */
.login-page-body .login-header {
    display: none;
}

/* 아이디 로그인 폼을 여백 없는 세로 구조로 배치한다. */
.login-page-body #loginForm {
    display: flex;
    flex-direction: column;
    margin-top: 0;
}

/* 로그인 입력창 외곽의 기본 여백을 제거한다. */
.login-page-body .login-input-wrapper {
    margin: 0;
}

/* 로그인 입력창 사이에 Figma의 14픽셀 간격을 적용한다. */
.login-page-body .login-input-wrapper + .login-input-wrapper {
    margin-top: var(--fm-space-35);
}

/* 로그인 입력창을 Figma의 외곽선 입력 규격으로 표시한다. */
.login-page-body .login-input {
    height: 44px;
    padding: 0 var(--fm-space-35);
    color: var(--fm-color-text-primary);
    font-family: var(--fm-font-family);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
    background: var(--fm-color-surface) !important;
    border: 1px solid var(--k-color-gray-e0) !important;
    border-radius: var(--fm-radius-medium) !important;
}

/* 로그인 입력창 안내 문구를 비활성 텍스트 색상으로 표시한다. */
.login-page-body .login-input::placeholder {
    color: var(--fm-color-text-disabled);
    opacity: 1;
}

/* 로그인 입력창의 선택 상태를 브랜드 색상으로 표시한다. */
.login-page-body .login-input:focus {
    border-color: var(--fm-color-primary) !important;
}

/* 로그인 유지 옵션과 계정 찾기 링크를 Figma 간격으로 배치한다. */
.login-page-body .login-option-row {
    width: 100%;
    margin: var(--fm-space-8) 0;
    line-height: 1;
}

/* 로그인 유지 체크박스 문구를 14픽셀 보조 텍스트로 표시한다. */
.login-page-body .login-checkbox-wrapper .checkbox-freemode {
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
}

/* 로그인 계정 찾기 링크를 Figma 보조 텍스트 규격으로 표시한다. */
.login-page-body .login-find-link {
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
}

/* 로그인 실행 버튼을 Figma의 44픽셀 브랜드 버튼으로 표시한다. */
.login-page-body .login-submit-btn {
    width: 100%;
    height: 44px;
    padding: 0 var(--fm-space-6);
    color: var(--fm-color-surface);
    font-family: var(--fm-font-family);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
    background: var(--fm-color-primary);
    border: 0;
    border-radius: var(--fm-radius-medium);
    cursor: pointer;
}

/* 소셜 로그인 영역을 구분선과 원형 버튼의 두 줄 구조로 배치한다. */
.login-page-body .social-login {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    row-gap: var(--fm-space-8);
    column-gap: var(--fm-space-6);
    margin-top: var(--fm-space-8);
}

/* 숨김 상태의 소셜 로그인 영역은 레이아웃에서 제외한다. */
.login-page-body .social-login[hidden] {
    display: none;
}

/* 소셜 로그인 구분 문구를 양쪽 선과 함께 표시한다. */
.auth-social-divider {
    display: flex;
    align-items: center;
    gap: var(--fm-space-6);
    width: 100%;
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.02em;
}

/* 소셜 로그인 구분 문구 양쪽에 공통 경계선 색상을 적용한다. */
.auth-social-divider::before,
.auth-social-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--fm-color-border);
}

/* 소셜 로그인 버튼을 44픽셀 원형 아이콘 버튼으로 표시한다. */
.login-page-body .social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: var(--fm-radius-pill);
    box-shadow: none;
}

/* Google 로그인 버튼에 Figma의 흰 배경과 외곽선을 적용한다. */
.login-page-body .social-btn.google {
    height: 46px;
    min-height: 46px;
    background: var(--fm-color-surface);
    border: 1px solid var(--k-color-gray-e0);
}

/* Google 로그인 아이콘을 원본 비율로 표시한다. */
.login-page-body .social-btn.google img {
    width: 22px;
    height: 23px;
}

/* Naver와 Kakao 로그인 아이콘을 버튼 전체 크기로 표시한다. */
.login-page-body .social-btn.naver img,
.login-page-body .social-btn.kakao img {
    width: 44px;
    height: 44px;
}

/* 최근 사용한 일반 로그인 버튼의 배지를 다시 표시한다. */
.login-page-body .login-submit-btn.is-last-login::after {
    display: inline-flex;
}

/* 최근 사용한 소셜 로그인 버튼 위에 Figma 말풍선 본체를 표시한다. */
.login-page-body .social-btn.is-last-login::after {
    content: '최근 로그인';
    top: -28px;
    left: 50%;
    display: inline-flex;
    width: 66px;
    min-width: 66px;
    height: 19px;
    padding: 2px var(--fm-space-2);
    transform: translateX(-50%);
    border-radius: var(--fm-radius-medium);
    background: var(--fm-color-text-primary);
    color: var(--fm-color-surface);
    font-family: var(--fm-font-family);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 최근 사용한 소셜 로그인 배지 아래에 7×5픽셀 말풍선 꼬리를 표시한다. */
.login-page-body .social-btn.is-last-login::before {
    content: '';
    position: absolute;
    top: -9px;
    left: 50%;
    width: 7px;
    height: 5px;
    transform: translateX(-50%);
    background: var(--fm-color-text-primary);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* 회원가입 안내 영역을 로그인 카드 하단에 배치한다. */
.login-page-body .login-links {
    gap: var(--fm-space-2);
    margin-top: 42px;
}

/* 로그인 회원가입 안내 문구를 Figma의 14픽셀 Medium 규격으로 표시한다. */
.login-page-body .login-signup-text,
.login-page-body .login-signup-link {
    font-size: var(--fm-font-size-body);
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.02em;
}

/* 회원가입 링크를 Figma의 브랜드 색상으로 강조한다. */
.login-page-body .login-signup-link {
    color: var(--fm-color-primary);
    font-weight: 500;
    text-decoration: none;
}

/* 회원가입 화면을 Figma의 452픽셀 세로 폼으로 표시한다. */
.join-page-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--fm-color-surface);
}

.auth-page .mp-container.join-view-page {
    min-height: 0;
    margin-top: 54px;
    margin-bottom: 141px;
    padding: 0 !important;
    background: var(--fm-color-surface);
}

.join-view-page .join-auth-card {
    width: 452px;
    max-width: 100%;
    padding: 0;
    background: var(--fm-color-surface);
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.join-view-page .join-auth-card:hover {
    box-shadow: none;
}

.join-view-page .join-title-wrap {
    display: none;
}

.join-view-page .join-form {
    gap: var(--fm-space-8);
}

.join-view-page .member-type-selector + .company-only-field,
.join-view-page #companyNoGroup + .input-group,
.join-view-page .input-group + .join-consent-list,
.join-view-page .join-consent-list + .join-submit-btn,
.join-view-page .join-submit-btn + .join-service-notice {
    margin-top: 10px;
}

.join-view-page .member-type-selector,
.join-view-page .member-type-selector .toggle-btn-group {
    margin: 0;
}

.join-view-page .auth-reference-form .input-group label {
    margin-bottom: var(--fm-space-35);
    font-size: var(--fm-font-size-label);
}

.join-view-page .auth-reference-form .input-freemode {
    height: 44px;
    padding: 0 var(--fm-space-35);
    font-size: var(--fm-font-size-body);
    border-color: var(--fm-color-border);
}

/* 회원가입 입력창의 포커스를 로그인 입력창과 동일하게 표시한다. */
.join-view-page .auth-reference-form .input-freemode:focus,
.join-view-page .auth-reference-form .input-freemode:focus-visible {
    border-color: var(--fm-color-primary);
    outline: none;
    box-shadow: none;
}

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

.join-company-section {
    display: flex;
    flex-direction: column;
    gap: var(--fm-space-8);
}

.join-company-section + .join-company-section {
    margin-top: 42px;
}

.join-section-title {
    margin: 0;
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-label);
    font-weight: 600;
    line-height: 1.4;
}

.join-address-row {
    display: grid;
    grid-template-columns: 209px max-content;
    gap: var(--fm-space-2);
}

.join-address-search-btn,
.join-company-file-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 var(--fm-space-4);
    box-sizing: border-box;
    color: var(--fm-color-text-primary);
    font-family: var(--fm-font-family);
    font-size: var(--fm-font-size-body);
    font-weight: 500;
    background: var(--fm-color-surface);
    border: 1px solid var(--fm-color-border-strong);
    border-radius: var(--fm-radius-medium);
    cursor: pointer;
}

.join-view-page .join-address-base,
.join-view-page .join-address-detail {
    margin-top: var(--fm-space-2);
}

.join-view-page input[readonly] {
    color: var(--fm-color-text-primary);
    background: var(--fm-color-canvas);
}

.join-company-upload-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--fm-space-6);
    padding: var(--fm-space-8) var(--fm-space-35);
    color: var(--fm-color-text-primary);
    text-align: center;
    background: var(--fm-color-canvas);
    border-radius: var(--fm-radius-medium);
}

.join-company-upload-box p,
.join-company-upload-box span {
    margin: 0;
    font-size: var(--fm-font-size-small);
    line-height: 1.4;
}

.join-company-upload-box p {
    font-size: var(--fm-font-size-label);
}

.join-company-upload-box p strong,
.join-company-file-button,
.join-company-file-name {
    color: var(--fm-color-primary);
}

.join-company-file-button {
    border-color: var(--fm-color-primary);
}

.join-company-file-name {
    max-width: 100%;
    overflow: hidden;
    font-size: var(--fm-font-size-small);
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.join-company-upload-box ul {
    margin: 0;
    padding-left: var(--fm-space-5);
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-small);
    line-height: 1.4;
    text-align: left;
}

.join-section-divider,
.join-consent-divider {
    width: 100%;
    height: 1px;
    margin-top: 42px;
    background: var(--fm-color-border);
}

.join-view-page .id-check-group {
    gap: var(--fm-space-2);
}

/* 회원가입 중복확인 버튼의 너비를 공통 버튼 콘텐츠와 여백으로 결정한다. */
.join-view-page .join-id-check-btn {
    flex: 0 0 auto;
}

.join-consent-list {
    display: flex;
    flex-direction: column;
    gap: var(--fm-space-2);
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body);
}

.join-consent-row,
.join-consent-row label {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: var(--fm-space-2);
}

.join-consent-row {
    justify-content: space-between;
}

.join-consent-all {
    justify-content: flex-start;
    overflow: hidden;
}

/* 만 15세 이상 동의 문구를 체크박스 바로 옆에 배치한다. */
.join-consent-age {
    justify-content: flex-start;
}

.join-consent-row input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--fm-color-primary);
    flex: 0 0 18px;
}

.join-consent-row span {
    line-height: 1.4;
}

.join-consent-row strong {
    color: var(--fm-color-primary);
}

.join-consent-row em {
    color: var(--fm-color-danger);
    font-style: normal;
}

.join-consent-row i {
    color: var(--fm-color-text-secondary);
    font-style: normal;
}

.join-consent-divider {
    margin: var(--fm-space-2) 0;
}

.join-policy-view {
    flex: 0 0 auto;
    padding: 0;
    color: var(--fm-color-text-secondary);
    font-family: var(--fm-font-family);
    font-size: var(--fm-font-size-body);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.join-view-page .join-submit-btn {
    margin: 0;
}

.join-service-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--fm-space-2);
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-body);
}

.join-service-notice img {
    width: 43px;
    height: 12px;
}

/* 회원가입 약관 상세 모달을 공통 토큰으로 표시한다. */
body.auth-modal-open {
    overflow: hidden;
}

.join-privacy-modal-overlay[hidden] {
    display: none;
}

.join-privacy-modal-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--fm-space-4);
}

.join-privacy-modal-content {
    width: 500px;
    max-width: 100%;
    max-height: 80vh;
    padding: var(--fm-space-6);
    box-sizing: border-box;
    overflow: auto;
    background: var(--fm-color-surface);
    border-radius: var(--fm-radius-medium);
}

.join-privacy-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--fm-space-6);
}

.join-privacy-modal-header h2 {
    margin: 0;
    color: var(--fm-color-text-primary);
    font-size: var(--fm-font-size-detail-title);
}

.join-privacy-modal-close {
    color: var(--fm-color-text-secondary);
    font-size: var(--fm-font-size-heading);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.join-privacy-modal-body dl {
    display: grid;
    gap: var(--fm-space-2);
    margin: 0;
}

.join-privacy-modal-body dt {
    margin-top: var(--fm-space-3);
    color: var(--fm-color-text-primary);
    font-weight: 600;
}

.join-privacy-modal-body dd {
    margin: 0;
    color: var(--fm-color-text-secondary);
    line-height: 1.6;
}

.join-privacy-modal-footer {
    margin-top: var(--fm-space-6);
    text-align: right;
}

.join-privacy-modal-confirm {
    width: 100%;
    height: 44px;
    color: var(--fm-color-surface);
    background: var(--fm-color-primary);
    border: 0;
    border-radius: var(--fm-radius-medium);
    cursor: pointer;
}

/* 아이디·비밀번호 찾기 화면을 500×554픽셀 Figma 규격으로 보정한다. */
.find-auth-view-page .find-auth-card {
    width: 500px;
    max-width: 100%;
    padding: var(--fm-space-8) var(--fm-space-6);
    background: var(--fm-color-surface);
    border: 0;
    border-radius: var(--fm-radius-medium);
    box-shadow: var(--fm-shadow-modal);
}

.find-auth-view-page .find-auth-title-wrap {
    margin-bottom: 42px;
}

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

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

.find-auth-view-page .find-auth-tabs .tab-link-freemode {
    height: 45px;
    min-height: 45px;
    font-size: var(--fm-font-size-label);
}

.find-auth-view-page .find-auth-tabs .tab-link-freemode.active::after {
    height: 3px;
}

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

.find-auth-view-page .auth-reference-form .input-group label {
    margin-bottom: var(--fm-space-35);
    font-size: var(--fm-font-size-label);
}

.find-auth-view-page .auth-reference-form .input-freemode {
    height: 44px;
    padding: 0 var(--fm-space-35);
    font-size: var(--fm-font-size-body);
    border-color: var(--fm-color-border);
}

.find-auth-view-page .find-auth-submit {
    height: 44px;
    min-height: 44px;
    margin-top: var(--fm-space-5);
    font-size: var(--fm-font-size-body);
}

.find-auth-view-page .find-auth-login {
    margin-top: var(--fm-space-8);
    font-size: var(--fm-font-size-small);
}

/* 아이디·비밀번호 찾기 결과 팝업을 400픽셀 Figma 규격으로 표시한다. */
.find-auth-result-dialog {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 400px;
    max-width: 100%;
    padding: var(--fm-space-8) var(--fm-space-6);
    border: 0;
    border-radius: var(--fm-radius-medium);
    box-shadow: var(--fm-shadow-modal);
}

.find-auth-result-icon {
    width: 40px;
    height: 40px;
    background: transparent;
}

.find-auth-result-icon img {
    width: 40px;
    height: 40px;
}

.find-auth-result-title {
    margin-top: 18px;
    font-size: var(--fm-font-size-detail-title);
}

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

.find-auth-result-confirm {
    height: 44px;
    margin-top: 42px;
    color: var(--fm-color-surface);
    font-size: var(--fm-font-size-body);
    background: var(--fm-color-primary);
    border: 1px solid var(--fm-color-primary);
}

.find-auth-result-confirm:hover {
    color: var(--fm-color-surface);
    background: var(--fm-color-primary);
    opacity: 0.94;
}