/* =========================================================
   커리어모드 공통 디자인
   스타일 가이드 대상 화면에만 적용되는 레이아웃과 컴포넌트를 정의한다.
   ========================================================= */

/* 커리어모드 화면의 기본 표면과 타이포그래피를 정의한다. */
body.career-mode-page {
    margin: 0;
    background: var(--career-white);
    color: var(--career-ink);
    font-family: var(--k-font-primary), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* =========================================================
   기업 통합 공고 관리 화면
   ========================================================= */

/* 통합 공고 관리 제목 행을 피그마의 단일 제목 구조로 정리한다. */
body.company-posting-manage-page .company-posting-manage-title-row {
    display: block;
}

/* 통합 공고 관리의 유형 필터와 상태 도구를 한 행에 배치한다. */
body.company-posting-manage-page .company-posting-toolbar {
    display: flex;
    margin-top: 32px;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

/* 통합 공고 관리 유형 필터의 공통 하단 여백을 해제한다. */
body.company-posting-manage-page .company-posting-toolbar .career-project-type-tabs {
    margin: 0;
    gap: 6px;
}

/* 통합 공고 관리 유형 필터 버튼의 포인터 상태를 정의한다. */
body.company-posting-manage-page .company-posting-toolbar .career-project-type-tab {
    font-family: inherit;
    cursor: pointer;
}

/* 통합 공고 관리 결과 건수와 모집 상태 선택기를 정렬한다. */
body.company-posting-manage-page .company-posting-result-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 통합 공고 관리 전체 건수를 피그마 문구 위계로 표시한다. */
body.company-posting-manage-page .company-posting-result-controls .career-project-total {
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

/* 통합 공고 관리 전체 건수 숫자 간격을 정의한다. */
body.company-posting-manage-page .company-posting-result-controls .career-project-total strong {
    margin-left: 8px;
    color: var(--career-ink);
    font-weight: 500;
}

/* 통합 공고 관리 카드 목록을 일정한 간격의 세로 목록으로 배치한다. */
body.company-posting-manage-page .company-posting-list {
    display: grid;
    margin-top: 24px;
    gap: 12px;
}

/* 통합 공고 관리 카드를 본문·지표·메뉴의 세 영역으로 구성한다. */
body.company-posting-manage-page .company-posting-card {
    position: relative;
    display: grid;
    min-height: 146px;
    padding: 24px 18px;
    grid-template-columns: minmax(0, 1fr) auto 60px;
    align-items: center;
    gap: 32px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
}

/* 마감·기간 만료 공고 카드의 표면을 보조 위계로 표시한다. */
body.company-posting-manage-page .company-posting-card.is-closed {
    background: var(--career-surface);
}

/* 통합 공고 관리 카드의 본문 너비 축소를 허용한다. */
body.company-posting-manage-page .company-posting-card-main {
    min-width: 0;
}

/* 통합 공고 관리 카드의 유형과 마감 임박 배지를 정렬한다. */
body.company-posting-manage-page .company-posting-badges {
    display: flex;
    min-height: 20px;
    align-items: center;
    gap: 4px;
}

/* 통합 공고 관리 카드의 공통 배지 크기를 정의한다. */
body.company-posting-manage-page .company-posting-type-badge,
body.company-posting-manage-page .company-posting-dday-badge,
body.company-posting-manage-page .company-posting-negotiable-badge {
    display: inline-flex;
    min-height: 20px;
    padding: 2px 10px;
    align-items: center;
    justify-content: center;
    border-radius: var(--k-radius-pill);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

/* 상주 공고 유형 배지를 주요 색상으로 표시한다. */
body.company-posting-manage-page .company-posting-type-badge.is-onsite {
    background: var(--career-primary-soft);
    color: var(--career-primary);
}

/* 외주 공고 유형 배지를 성공 색상으로 표시한다. */
body.company-posting-manage-page .company-posting-type-badge.is-outsource {
    background: var(--k-status-success-bg);
    color: var(--fm-color-success);
}

/* 마감 임박 배지를 위험 색상으로 표시한다. */
body.company-posting-manage-page .company-posting-dday-badge {
    background: var(--fm-color-danger-soft);
    color: var(--fm-color-danger);
}

/* 외주 일정 협의 가능 배지를 중립 색상으로 표시한다. */
body.company-posting-manage-page .company-posting-negotiable-badge {
    background: var(--career-surface);
    color: var(--career-muted);
}

/* 통합 공고 관리 카드 제목을 프로젝트 카드 위계로 표시한다. */
body.company-posting-manage-page .company-posting-title {
    display: block;
    max-width: 100%;
    margin-top: 16px;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: var(--career-ink);
    font-family: inherit;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

/* 통합 공고 관리 카드 제목의 키보드와 포인터 상태를 표시한다. */
body.company-posting-manage-page .company-posting-title:hover,
body.company-posting-manage-page .company-posting-title:focus-visible {
    color: var(--career-primary);
    outline: 0;
}

/* 통합 공고 관리 카드의 주요 조건을 한 행에 배치한다. */
body.company-posting-manage-page .company-posting-meta {
    display: flex;
    min-width: 0;
    margin-top: 14px;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

/* 통합 공고 관리 카드 조건 사이에 짧은 구분선을 표시한다. */
body.company-posting-manage-page .company-posting-meta > span:not(:first-child)::before {
    display: inline-block;
    width: 1px;
    height: 10px;
    margin-right: 8px;
    background: var(--career-border);
    content: "";
    vertical-align: middle;
}

/* 협의 가능 배지 앞에는 조건 구분선을 표시하지 않는다. */
body.company-posting-manage-page .company-posting-meta > .company-posting-negotiable-badge::before {
    display: none;
}

/* 통합 공고 관리 카드의 우측 상태 영역을 중앙 정렬한다. */
body.company-posting-manage-page .company-posting-card-side {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 모집중 공고의 상태·마감일·지원자 지표를 가로로 배치한다. */
body.company-posting-manage-page .company-posting-metrics {
    display: flex;
    align-items: center;
}

/* 통합 공고 관리 카드의 개별 지표를 두 줄 구조로 표시한다. */
body.company-posting-manage-page .company-posting-metric {
    position: relative;
    display: flex;
    min-width: 116px;
    min-height: 46px;
    padding: 0 18px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    border: 0;
    background: transparent;
    color: var(--career-ink);
    font-family: inherit;
    text-align: center;
}

/* 첫 번째 이후 공고 지표 앞에 세로 구분선을 표시한다. */
body.company-posting-manage-page .company-posting-metric + .company-posting-metric::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 46px;
    background: var(--career-border);
    content: "";
}

/* 통합 공고 관리 지표 라벨을 본문 크기로 표시한다. */
body.company-posting-manage-page .company-posting-metric span {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

/* 통합 공고 관리 지표 값을 주요 색상으로 강조한다. */
body.company-posting-manage-page .company-posting-metric strong {
    color: var(--career-primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/* 지원자 수 지표의 피그마 기준 너비를 유지한다. */
body.company-posting-manage-page .company-posting-applicant-count {
    min-width: 78px;
}

/* 마감·기간 만료 카드의 우측 상태를 피그마 너비로 표시한다. */
body.company-posting-manage-page .company-posting-closed-label {
    width: 130px;
    padding: 0 24px;
    color: var(--career-muted);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

/* 통합 공고 관리 카드의 더보기 메뉴 기준 영역을 정의한다. */
body.company-posting-manage-page .company-posting-menu-wrap {
    position: relative;
    display: flex;
    width: 60px;
    min-height: 28px;
    align-items: center;
    justify-content: center;
}

/* 통합 공고 관리 카드의 더보기 버튼을 테두리 없는 아이콘으로 표시한다. */
body.company-posting-manage-page .company-posting-menu-trigger {
    display: inline-flex;
    width: 60px;
    height: 28px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--career-muted);
    cursor: pointer;
}

/* 통합 공고 관리 더보기 버튼의 탐색 상태를 주요 색상으로 표시한다. */
body.company-posting-manage-page .company-posting-menu-trigger:hover,
body.company-posting-manage-page .company-posting-menu-trigger:focus-visible {
    color: var(--career-primary);
    outline: 0;
}

/* 통합 공고 관리의 복제·수정·마감·삭제 메뉴를 피그마 크기로 정의한다. */
body.company-posting-manage-page .company-posting-action-menu {
    position: absolute;
    z-index: var(--k-z-dropdown);
    top: calc(100% + 4px);
    right: 0;
    width: 68px;
    padding: 12px 16px;
    border: 1px solid var(--k-border-light-color);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    box-shadow: var(--k-shadow-soft);
}

/* 숨김 상태의 통합 공고 관리 메뉴를 화면에서 제외한다. */
body.company-posting-manage-page .company-posting-action-menu[hidden] {
    display: none;
}

/* 통합 공고 관리 메뉴 항목을 세로 텍스트 버튼으로 표시한다. */
body.company-posting-manage-page .company-posting-action-menu button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--career-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

/* 통합 공고 관리 메뉴 항목 사이의 피그마 간격을 적용한다. */
body.company-posting-manage-page .company-posting-action-menu button + button {
    margin-top: 16px;
}

/* 통합 공고 관리 삭제 메뉴를 위험 색상으로 표시한다. */
body.company-posting-manage-page .company-posting-action-menu button.is-danger {
    color: var(--fm-color-danger);
}

/* 통합 공고 관리 메뉴 항목의 탐색 상태를 강조한다. */
body.company-posting-manage-page .company-posting-action-menu button:hover,
body.company-posting-manage-page .company-posting-action-menu button:focus-visible {
    color: var(--career-primary);
    outline: 0;
}

/* 통합 공고 관리 삭제 메뉴의 탐색 상태에도 위험 색상을 유지한다. */
body.company-posting-manage-page .company-posting-action-menu button.is-danger:hover,
body.company-posting-manage-page .company-posting-action-menu button.is-danger:focus-visible {
    color: var(--fm-color-danger);
}

/* 통합 공고 관리 빈 상태를 공통 카드로 표시한다. */
body.company-posting-manage-page .company-posting-empty {
    padding: 56px 24px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
    color: var(--career-muted);
    font-size: 14px;
    text-align: center;
}

/* 통합 공고 관리 페이지네이션을 카드 목록과 분리한다. */
body.company-posting-manage-page .company-posting-pagination {
    margin-top: 28px;
}

/* 공고 삭제 확인창을 피그마 기준 너비와 내부 간격으로 표시한다. */
.company-posting-delete-modal {
    width: min(calc(100vw - 32px), 420px);
    max-width: 420px;
    padding: 32px 24px;
    gap: 42px;
    box-sizing: border-box;
    background: var(--career-white);
    border-radius: var(--k-radius-md);
    box-shadow: var(--k-shadow-soft);
}

/* 공고 삭제 질문과 영향 안내를 중앙 정렬한다. */
.company-posting-delete-intro {
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: column;
    gap: 24px;
    text-align: center;
}

/* 공고 삭제 경고 아이콘과 질문을 세로로 배치한다. */
.company-posting-delete-heading {
    display: flex;
    width: 100%;
    align-items: center;
    flex-direction: column;
    gap: 18px;
}

/* 공고 삭제 경고 아이콘을 피그마의 40px 주요 색상 아이콘으로 표시한다. */
.company-posting-delete-icon {
    width: 40px;
    height: 40px;
    color: var(--career-primary);
    font-size: 40px;
    line-height: 1;
}

/* 공고 삭제 질문을 확인창 제목 위계로 표시한다. */
.company-posting-delete-heading h2 {
    margin: 0;
    color: var(--career-ink);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 공고 삭제의 영향을 보조 문구로 안내한다. */
.company-posting-delete-description {
    margin: 0;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
    word-break: keep-all;
}

/* 공고 삭제 영향 안내의 각 문장을 줄 단위로 표시한다. */
.company-posting-delete-description span {
    display: block;
}

/* 삭제 대상 공고명과 지원자 수를 주요 색상의 보조 표면에 표시한다. */
.company-posting-delete-summary {
    display: flex;
    width: 100%;
    padding: 16px;
    align-items: center;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
    background: var(--career-primary-soft);
    border-radius: var(--k-radius-md);
    text-align: center;
}

/* 삭제 대상 공고명을 한 줄 위계로 강조한다. */
.company-posting-delete-title {
    max-width: 100%;
    overflow: hidden;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 삭제 대상 공고의 지원자 라벨과 인원수를 정렬한다. */
.company-posting-delete-applicants {
    display: flex;
    align-items: center;
    gap: 1px;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 지원자 라벨과 숫자 사이에 피그마의 8px 간격을 적용한다. */
.company-posting-delete-applicants > span:first-child {
    margin-right: 7px;
}

/* 삭제 대상 공고의 지원자 수를 주요 색상으로 강조한다. */
.company-posting-delete-applicants strong {
    color: var(--career-primary);
    font-weight: 500;
}

/* 공고 삭제와 취소 행동을 같은 폭으로 배치한다. */
.company-posting-delete-actions {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--k-space-sm);
}

/* 공고 삭제 확인창의 행동 버튼 높이를 피그마 값으로 맞춘다. */
.company-posting-delete-actions .btn-freemode {
    width: 100%;
    height: 42px;
}

/* 공고 삭제 확인창의 취소 행동을 보조 표면으로 표시한다. */
.company-posting-delete-actions .btn-freemode.is-line {
    background: var(--career-surface);
}

@media (max-width: 1180px) {
    /* 중간 화면에서 통합 공고 카드를 본문과 하단 관리 영역으로 전환한다. */
    body.company-posting-manage-page .company-posting-card {
        grid-template-columns: minmax(0, 1fr) 48px;
        gap: 20px;
    }

    /* 중간 화면에서 통합 공고 지표를 본문 아래 전체 너비로 배치한다. */
    body.company-posting-manage-page .company-posting-card-side {
        grid-row: 2;
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    /* 중간 화면에서 통합 공고 관리 메뉴를 카드 우측 상단에 유지한다. */
    body.company-posting-manage-page .company-posting-menu-wrap {
        grid-row: 1;
        grid-column: 2;
    }
}

@media (max-width: 767px) {
    /* 작은 화면에서 통합 공고 필터 도구를 세로로 배치한다. */
    body.company-posting-manage-page .company-posting-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
    }

    /* 작은 화면에서 통합 공고 유형 필터를 가로 스크롤할 수 있게 한다. */
    body.company-posting-manage-page .company-posting-toolbar .career-project-type-tabs {
        overflow-x: auto;
    }

    /* 작은 화면에서 통합 공고 결과 도구를 오른쪽에 정렬한다. */
    body.company-posting-manage-page .company-posting-result-controls {
        justify-content: flex-end;
    }

    /* 작은 화면에서 통합 공고 카드 안쪽 간격을 줄인다. */
    body.company-posting-manage-page .company-posting-card {
        padding: 20px 16px;
    }

    /* 작은 화면에서 통합 공고 제목 크기를 조정한다. */
    body.company-posting-manage-page .company-posting-title {
        font-size: 18px;
        white-space: normal;
    }

    /* 작은 화면에서 통합 공고 지표를 카드 폭에 맞춰 분배한다. */
    body.company-posting-manage-page .company-posting-metrics {
        width: 100%;
    }

    /* 작은 화면에서 통합 공고 지표의 최소 너비와 여백을 줄인다. */
    body.company-posting-manage-page .company-posting-metric {
        min-width: 0;
        padding: 0 10px;
        flex: 1;
    }

    /* 작은 화면에서 마감 문구를 왼쪽 정렬한다. */
    body.company-posting-manage-page .company-posting-closed-label {
        width: auto;
        padding: 0;
        text-align: left;
    }
}

/* =========================================================
   기업 포지션 관리
   ========================================================= */

/* 포지션 관리 목록의 본문 폭과 화면 여백을 정의한다. */
body.company-position-page .company-position-shell,
body.company-position-detail-page .company-position-detail-shell {
    width: min(1260px, calc(100% - 64px));
    margin: 0 auto;
    padding: 32px 0 96px;
}

/* 포지션 관리 제목과 등록 행동을 한 행에 배치한다. */
body.company-position-page .company-position-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    margin-bottom: 32px;
}

/* 포지션 등록 행동을 Figma의 외곽선 버튼 크기로 정의한다. */
body.company-position-page .company-position-create-button {
    height: 36px;
    min-height: 36px;
    padding: 8px 16px;
    border-color: var(--career-primary);
    color: var(--career-primary);
}

/* 포지션 형태 필터와 결과 제어 영역을 양쪽에 배치한다. */
.company-position-toolbar,
.company-position-offer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    margin-bottom: 24px;
}

/* 포지션 관리 도구 모음의 간격을 기업 공고 관리 도구 모음과 통일한다. */
body.company-position-page .company-position-toolbar {
    gap: 32px;
}

/* 포지션 관리 유형 탭의 공통 하단 여백을 해제한다. */
body.company-position-page .company-position-toolbar .career-project-type-tabs {
    margin: 0;
    gap: 6px;
}

/* 포지션 목록 결과 건수와 정렬 선택을 한 행에 배치한다. */
.company-position-result-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 포지션 목록 전체 건수를 본문 강조 수준으로 표시한다. */
.company-position-total {
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

/* 포지션 목록 전체 건수 숫자를 같은 굵기로 표시한다. */
.company-position-total strong {
    color: var(--career-ink);
    font-weight: 500;
}

/* 포지션 관리 전체 건수 숫자 간격을 기업 공고 관리 화면과 통일한다. */
body.company-position-page .company-position-total strong {
    margin-left: 8px;
}

/* 포지션 목록 결과 건수와 정렬 사이 구분선을 정의한다. */
.company-position-control-divider {
    width: 1px;
    height: 10px;
    background: var(--career-border);
}

/* 포지션 카드 목록의 기본 간격을 정의한다. */
.company-position-list,
.company-position-offer-list {
    display: grid;
    gap: 12px;
}

/* 포지션 카드의 정보·제안 집계·관리 메뉴 열을 정의한다. */
.company-position-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 60px;
    gap: 36px;
    align-items: center;
    padding: 24px 18px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    cursor: pointer;
}

/* 마감된 포지션 카드에 보조 표면을 적용한다. */
.company-position-card.is-closed {
    background: var(--career-surface);
}

/* 포지션 카드 주요 내용을 세로 흐름으로 배치한다. */
.company-position-card-main {
    display: grid;
    justify-items: start;
    min-width: 0;
}

/* 포지션 카드의 상주·외주 형태 배지를 정의한다. */
.company-position-type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 4px 10px;
    border-radius: var(--k-radius-pill);
    background: var(--career-primary-soft);
    color: var(--career-primary);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

/* 외주 포지션 배지를 기존 성공 계열 토큰으로 구분한다. */
.company-position-type-badge.is-outsource {
    background: var(--k-bg-success-soft);
    color: var(--k-color-green-800);
}

/* 포지션 카드 제목을 20px 위계로 표시한다. */
.company-position-card h2 {
    width: 100%;
    margin: 16px 0 8px;
    overflow: hidden;
    color: var(--career-ink);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 포지션 카드의 시작일·기간·금액을 한 행에 배치한다. */
.company-position-condition-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

/* 포지션 조건 항목 사이에 짧은 구분선을 표시한다. */
.company-position-condition-list > div {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* 첫 항목을 제외한 포지션 조건 앞에 구분선을 추가한다. */
.company-position-condition-list > div + div::before {
    width: 1px;
    height: 10px;
    margin-right: 0;
    background: var(--career-border);
    content: '';
}

/* 포지션 조건 라벨과 값을 동일한 본문 크기로 표시한다. */
.company-position-condition-list dt,
.company-position-condition-list dd {
    margin: 0;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

/* 포지션 카드 등록일을 보조 정보로 표시한다. */
.company-position-create-date {
    display: flex;
    gap: 8px;
    margin: 16px 0 0;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
}

/* 포지션 카드 제안 상태별 건수를 가로로 배치한다. */
.company-position-metrics {
    display: flex;
    align-items: center;
}

/* 포지션 카드의 개별 제안 건수를 가운데 정렬한다. */
.company-position-metrics > div {
    display: grid;
    min-width: 78px;
    gap: 8px;
    padding: 0 18px;
    text-align: center;
}

/* 포지션 카드의 제안 건수 사이에 세로 구분선을 표시한다. */
.company-position-metrics > div + div {
    border-left: 1px solid var(--career-border);
}

/* 포지션 카드의 제안 지표 라벨을 정의한다. */
.company-position-metrics span {
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 600;
}

/* 포지션 카드의 제안 지표 숫자를 주요 색상으로 표시한다. */
.company-position-metrics strong {
    color: var(--career-primary);
    font-size: 18px;
    font-weight: 600;
}

/* 마감된 포지션 상태를 카드 우측 가운데에 표시한다. */
.company-position-closed-label {
    min-width: 130px;
    color: var(--career-muted);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

/* 포지션 카드 관리 메뉴의 기준 위치를 정의한다. */
.company-position-menu-wrap {
    position: relative;
    display: flex;
    justify-content: flex-end;
}

/* 포지션 카드 더보기 버튼을 60px 행동 영역에 맞춘다. */
.company-position-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--career-muted);
    cursor: pointer;
}

/* 포지션 카드 관리 메뉴를 버튼 아래 팝오버로 표시한다. */
.company-position-menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    right: 0;
    display: grid;
    min-width: 88px;
    gap: 4px;
    padding: 12px 16px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    box-shadow: var(--k-shadow-soft);
}

/* 닫힌 포지션 카드 관리 메뉴를 화면에서 제거한다. */
.company-position-menu[hidden] {
    display: none;
}

/* 포지션 카드 관리 메뉴 항목을 텍스트 행동으로 정의한다. */
.company-position-menu button {
    padding: 4px 0;
    border: 0;
    background: transparent;
    color: var(--career-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

/* 포지션 삭제 메뉴를 기존 위험 색상 토큰으로 표시한다. */
.company-position-menu button.is-danger {
    color: var(--k-color-red-alert);
}

/* 등록된 포지션이 없을 때 전체 폭 안내를 표시한다. */
.company-position-empty {
    padding: 64px 24px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    color: var(--career-muted);
    text-align: center;
}

/* 포지션 빈 목록 제목을 본문 주요 색상으로 표시한다. */
.company-position-empty strong {
    display: block;
    margin-bottom: 8px;
    color: var(--career-ink);
    font-size: 16px;
}

/* 포지션 빈 목록 안내의 기본 여백을 제거한다. */
.company-position-empty p {
    margin: 0;
}

/* 포지션 등록 모달 외부 여백과 스크롤 범위를 정의한다. */
body.company-position-page .company-position-form-overlay {
    padding: 16px;
}

/* 포지션 등록 모달을 Figma 기준 600px 폭으로 정의한다. */
body.company-position-page .company-position-form-modal {
    --modal-inline-padding: 24px;
    width: min(600px, calc(100% - 32px));
    max-width: 600px;
    padding: 32px 0;
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    box-shadow: var(--k-shadow-soft);
}

/* 포지션 등록 모달 제목 아래 여백을 정의한다. */
body.company-position-page .company-position-form-modal > .modal-header {
    margin-bottom: 42px;
    padding-top: 0;
    padding-bottom: 0;
}

/* 포지션 등록 모달 제목을 18px 위계로 표시한다. */
body.company-position-page .company-position-form-modal .modal-title {
    color: var(--career-ink);
    font-size: 18px;
    font-weight: 600;
}

/* 포지션 등록 모달 본문만 세로 스크롤하도록 정의한다. */
body.company-position-page .company-position-form-body {
    overflow-y: auto;
}

/* 포지션 등록 입력 항목을 32px 간격으로 배치한다. */
.company-position-form-fields {
    display: grid;
    gap: 32px;
}

/* 포지션 등록 폼의 기본 필드 여백을 제거한다. */
.company-position-form-fields .form-group {
    min-width: 0;
    margin: 0;
}

/* 포지션 등록 라벨과 값의 공통 간격과 타이포를 정의한다. */
.company-position-form-fields .form-label {
    margin-bottom: var(--k-space-form-label);
    color: var(--career-ink);
    font-size: 15px;
    font-weight: 600;
}

/* 포지션 등록의 예상 시작일과 기간을 같은 행에 배치한다. */
.company-position-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

/* 포지션 등록 입력 요소를 공통 36px 입력으로 정의한다. */
.company-position-form-fields .input-freemode {
    width: 100%;
    height: 36px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
}

/* 포지션 등록 프로젝트 형태의 기본 필드셋 장식을 제거한다. */
.company-position-project-type {
    padding: 0;
    border: 0;
}

/* 포지션 등록 프로젝트 형태 선택지를 가로로 배치한다. */
.company-position-radio-group {
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: 16px;
}

/* 포지션 등록 프로젝트 형태 라디오와 문구를 정렬한다. */
.company-position-radio-group label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
}

/* 포지션 등록 선택 라디오를 주요 색상으로 표시한다. */
.company-position-radio-group input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--career-primary);
}

/* 포지션 프로젝트 내용 입력 높이와 내부 여백을 정의한다. */
.company-position-form-fields textarea.company-position-content {
    height: 200px;
    min-height: 200px;
    padding: 18px;
    line-height: 1.4;
    resize: none;
}

/* 포지션 등록 모달 하단 버튼을 같은 너비로 배치한다. */
body.company-position-page .company-position-form-modal > .modal-footer {
    padding-top: 52px;
    gap: 8px;
}

/* 포지션 등록 모달 하단 버튼 높이를 Figma 기준으로 정의한다. */
body.company-position-page .company-position-form-modal > .modal-footer .btn-freemode {
    min-width: 0;
    height: 42px;
    flex: 1;
}

/* 포지션 관련 모달이 열렸을 때 배경 스크롤을 막는다. */
body.company-position-modal-open {
    overflow: hidden;
}

/* 포지션 상세 제목과 마감 행동을 양쪽에 배치한다. */
.company-position-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
    margin-bottom: 36px;
}

/* 포지션 상세 제목을 26px 위계로 표시한다. */
.company-position-detail-header h1 {
    margin: 0;
    color: var(--career-ink);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.4;
}

/* 포지션 상세 등록일을 보조 정보로 표시한다. */
.company-position-detail-header p {
    display: flex;
    gap: 8px;
    margin: 12px 0 0;
    color: var(--career-muted);
    font-size: 14px;
}

/* 포지션 상세 조건을 두 열 보조 표면으로 배치한다. */
.company-position-detail-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 72px;
    margin: 0;
    padding: 24px;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
}

/* 포지션 상세 조건 항목을 라벨과 값 두 열로 배치한다. */
.company-position-detail-summary > div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 14px;
}

/* 포지션 상세 조건 라벨과 값을 정의한다. */
.company-position-detail-summary dt,
.company-position-detail-summary dd {
    margin: 0;
    color: var(--career-ink);
    font-size: 14px;
    line-height: 1.4;
}

/* 포지션 상세 조건 값을 강조한다. */
.company-position-detail-summary dd {
    font-weight: 600;
}

/* 포지션 프로젝트 내용과 제안 목록 영역의 위 여백을 정의한다. */
.company-position-content-section,
.company-position-offer-section {
    margin-top: 52px;
}

/* 포지션 상세 구획 제목을 아이콘과 함께 표시한다. */
.company-position-content-section h2,
.company-position-offer-section h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 600;
}

/* 포지션 상세 구획 제목 아이콘을 주요 색상으로 표시한다. */
.company-position-content-section h2 i,
.company-position-offer-section h2 i {
    color: var(--career-primary);
}

/* 포지션 프로젝트 내용을 구분선 아래에 표시한다. */
.company-position-detail-content {
    min-height: 210px;
    margin-top: 24px;
    padding: 24px;
    border-top: 1px solid var(--career-border);
    color: var(--career-ink);
    font-size: 14px;
    line-height: 1.6;
}

/* 포지션 제안 목록 헤더의 기본 아래 여백을 제거한다. */
.company-position-offer-header {
    margin-bottom: 24px;
}

/* 포지션 상세의 프리랜서 제안 카드를 세 열로 구성한다. */
.company-position-offer-card {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr) 332px;
    gap: 52px;
    align-items: center;
    padding: 28px 24px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
}

/* 포지션 제안 카드의 프리랜서 기본 정보를 정렬한다. */
.company-position-offer-person {
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: 0;
}

/* 포지션 제안 카드의 프로필 이미지를 원형으로 표시한다. */
.company-position-offer-avatar {
    display: inline-flex;
    flex: 0 0 60px;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: var(--k-radius-pill);
    background: var(--career-border);
    color: var(--career-white);
}

/* 포지션 제안 카드 프로필 이미지가 원형 영역을 채우게 한다. */
.company-position-offer-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 포지션 제안 카드의 프리랜서 이름을 강조한다. */
.company-position-offer-person strong {
    color: var(--career-ink);
    font-size: 16px;
    font-weight: 600;
}

/* 포지션 제안 카드의 프리랜서 요약을 보조 정보로 표시한다. */
.company-position-offer-person p {
    margin: 6px 0 0;
    color: var(--career-muted);
    font-size: 12px;
    line-height: 1.4;
}

/* 포지션 제안 카드의 전문 분야와 보유 기술을 세로로 배치한다. */
.company-position-offer-profile {
    display: grid;
    min-width: 0;
    gap: 12px;
    margin: 0;
}

/* 포지션 제안 카드 프로필 항목을 라벨과 값 두 열로 배치한다. */
.company-position-offer-profile > div {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 14px;
}

/* 포지션 제안 카드 프로필 라벨을 보조 색상으로 표시한다. */
.company-position-offer-profile dt {
    color: var(--career-muted);
    font-size: 12px;
}

/* 포지션 제안 카드 프로필 값을 한 줄로 줄임 표시한다. */
.company-position-offer-profile dd {
    margin: 0;
    overflow: hidden;
    color: var(--career-ink);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 포지션 제안 카드의 답변 상태를 왼쪽, 행동 버튼을 오른쪽에 배치한다. */
.company-position-offer-state {
    display: grid;
    grid-template-columns: 150px 130px;
    gap: 14px 52px;
    align-items: center;
}

/* 포지션 제안 카드의 답변 상태를 강조한다. */
.company-position-offer-state > strong {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    color: var(--career-ink);
    font-size: 16px;
    font-weight: 600;
}

/* 포지션 제안 카드의 수락 상태를 주요 색상으로 표시한다. */
.company-position-offer-state > strong.is-accepted {
    color: var(--career-primary);
}

/* 포지션 제안 카드의 답변 일자를 보조 정보로 표시한다. */
.company-position-offer-state p {
    display: flex;
    grid-column: 1;
    grid-row: 2;
    gap: 8px;
    justify-content: center;
    margin: 0;
    color: var(--career-muted);
    font-size: 14px;
    white-space: nowrap;
}

/* 포지션 제안 카드의 행동 버튼을 Figma 기준의 얇은 높이로 표시한다. */
.company-position-offer-state .btn-freemode {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-self: center;
    min-width: 0;
    height: 28px;
    padding: 4px 24px;
    justify-content: center;
    font-size: 14px;
    line-height: 1.4;
}

/* 프리랜서 답변 모달 외부 여백을 정의한다. */
.company-position-response-overlay {
    padding: 16px;
}

/* 프리랜서 답변 모달을 Figma 기준 폭과 내부 여백으로 정의한다. */
.company-position-response-modal {
    --modal-inline-padding: 24px;
    width: min(420px, calc(100% - 32px));
    max-width: 420px;
    padding: 32px 0;
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    box-shadow: var(--k-shadow-soft);
}

/* 프리랜서 답변 모달 본문을 가운데 정렬한다. */
.company-position-response-body {
    padding: 0 24px;
    text-align: center;
}

/* 프리랜서 답변 모달의 완료 아이콘을 주요 색상으로 표시한다. */
.company-position-response-icon {
    color: var(--career-primary);
    font-size: 42px;
}

/* 프리랜서 답변 모달 제목을 24px 위계로 표시한다. */
.company-position-response-body h2 {
    margin: 24px 0 42px;
    color: var(--career-ink);
    font-size: 24px;
    font-weight: 600;
}

/* 프리랜서 답변 내용과 답변일을 보조 표면에 배치한다. */
.company-position-response-message {
    padding: 16px;
    border-radius: var(--k-radius-md);
    background: var(--career-primary-soft);
    color: var(--career-ink);
    text-align: left;
}

/* 프리랜서 답변 내용 라벨과 답변일 라벨을 보조 색상으로 표시한다. */
.company-position-response-message > span,
.company-position-response-message > div span {
    color: var(--career-muted);
    font-size: 14px;
}

/* 프리랜서 답변 본문을 읽기 좋은 행간으로 표시한다. */
.company-position-response-message p {
    margin: 8px 0 18px;
    font-size: 14px;
    line-height: 1.5;
}

/* 프리랜서 답변일을 라벨과 한 행에 배치한다. */
.company-position-response-message > div {
    display: flex;
    gap: 8px;
    color: var(--career-muted);
    font-size: 13px;
}

/* 프리랜서 답변 모달 하단 행동을 같은 너비로 배치한다. */
.company-position-response-modal > .modal-footer {
    padding-top: 42px;
    gap: 8px;
}

/* 프리랜서 답변 모달 하단 버튼 높이를 정의한다. */
.company-position-response-modal > .modal-footer .btn-freemode {
    min-width: 0;
    height: 42px;
    flex: 1;
}

/* 태블릿에서 포지션 카드와 제안 카드를 두 열 중심으로 재배치한다. */
@media (max-width: 1023px) {
    .company-position-card {
        grid-template-columns: minmax(0, 1fr) 60px;
    }

    .company-position-metrics,
    .company-position-closed-label {
        grid-column: 1 / -1;
        justify-self: start;
    }

    .company-position-menu-wrap {
        grid-column: 2;
        grid-row: 1;
    }

    .company-position-offer-card {
        grid-template-columns: minmax(0, 1fr) 332px;
        gap: 36px;
    }

    .company-position-offer-profile {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* 모바일에서 포지션 관리 화면과 모달을 단일 열로 전환한다. */
@media (max-width: 767px) {
    body.company-position-page .company-position-shell,
    body.company-position-detail-page .company-position-detail-shell {
        width: min(100% - 32px, 1260px);
        padding-top: 24px;
        padding-bottom: 64px;
    }

    .company-position-page-header,
    .company-position-toolbar,
    .company-position-detail-header,
    .company-position-offer-header {
        align-items: stretch;
        flex-direction: column;
    }

    .company-position-result-controls {
        justify-content: space-between;
    }

    .company-position-card,
    .company-position-offer-card {
        grid-template-columns: minmax(0, 1fr) 44px;
        gap: 20px;
    }

    .company-position-metrics {
        width: 100%;
        overflow-x: auto;
    }

    .company-position-metrics > div {
        min-width: 64px;
        padding: 0 12px;
    }

    .company-position-detail-summary,
    .company-position-form-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .company-position-detail-summary > div {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .company-position-offer-person,
    .company-position-offer-profile,
    .company-position-offer-state {
        grid-column: 1 / -1;
    }

    .company-position-offer-state {
        grid-template-columns: minmax(0, 1fr);
    }

    .company-position-offer-state .btn-freemode {
        grid-column: 1;
        grid-row: 3;
        width: 100%;
    }
}

/* 커리어모드 화면의 박스 크기 계산 방식을 통일한다. */
body.career-mode-page *,
body.career-mode-page *::before,
body.career-mode-page *::after {
    box-sizing: border-box;
}

/* 커리어모드 화면의 전체 페이지 골격을 정의한다. */
body.career-mode-page .list-view-layout {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background: var(--career-white);
}

/* 커리어모드 화면의 공통 콘텐츠 폭을 정의한다. */
body.career-mode-page .job-board-wrapper,
body.career-mode-page .job-detail-wrapper {
    width: min(1260px, calc(100% - 48px));
    max-width: 1260px;
    margin-right: auto;
    margin-left: auto;
}

/* 동적으로 표시하기 전 요소의 초기 숨김 상태를 정의한다. */
body.career-mode-page .career-is-initially-hidden {
    display: none;
}

/* 스크린 리더에서만 읽히는 보조 문구를 정의한다. */

/* =========================================================
   공통 헤더
   ========================================================= */

/* 커리어모드 헤더를 구분선과 그림자 없는 흰색 표면으로 정의한다. */
.job-header-shell--career .job-header {
    position: static;
    width: 100%;
    border-bottom: 0;
    background: var(--career-white);
    box-shadow: none;
}

/* 커리어모드 헤더 내부를 로고, 내비게이션, 사용자 영역으로 배치한다. */
.job-header-shell--career .job-header-inner {
    display: flex;
    width: min(1260px, calc(100% - 48px));
    max-width: 1260px;
    margin: 0 auto;
    height: var(--header-height);
    min-height: var(--header-height);
    padding: 0;
    align-items: center;
    gap: 0;
}

/* 커리어모드 헤더의 브랜드 묶음을 정렬한다. */
.job-header-shell--career .job-header-brand {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

/* 커리어모드 로고 링크의 크기와 텍스트를 정의한다. */
.job-header-shell--career .job-header-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--career-ink);
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
}

/* 커리어모드 로고 심볼의 크기를 정의한다. */
.job-header-shell--career .job-header-logo img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* 커리어모드 기업 홈 이동 버튼을 캡슐 형태로 정의한다. */
.job-header-shell--career .job-header-biz-home-link {
    display: inline-flex;
    min-height: 34px;
    padding: 0 14px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-pill);
    background: var(--career-white);
    color: var(--career-ink);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

/* 커리어모드 기업 홈 이동 버튼의 포인터 상태를 정의한다. */
.job-header-shell--career .job-header-biz-home-link:hover,
.job-header-shell--career .job-header-biz-home-link:focus-visible {
    border-color: var(--career-primary);
    color: var(--career-primary);
}

/* 커리어모드 주 내비게이션을 브랜드 옆에 배치한다. */
.job-header-shell--career .job-header-nav-wrap {
    min-width: 0;
    margin-left: 48px;
    background: transparent;
    box-shadow: none;
}

/* 커리어모드 주 내비게이션 내부 폭 제한을 해제한다. */
.job-header-shell--career .job-header-nav-inner {
    width: auto;
    max-width: none;
}

/* 커리어모드 주 내비게이션 항목의 간격을 정의한다. */
.job-header-shell--career .job-header-nav {
    display: flex;
    min-height: var(--header-height);
    align-items: center;
    justify-content: flex-start;
    gap: 40px;
}

/* 커리어모드 주 내비게이션 링크를 텍스트형으로 정의한다. */
.job-header-shell--career .job-header-nav-tab {
    display: inline-flex;
    min-height: var(--header-height);
    padding: 0;
    align-items: center;
    border: 0;
    background: transparent;
    color: var(--career-ink);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
}

/* 커리어모드 주 내비게이션 링크의 탐색 상태를 정의한다. */
.job-header-shell--career .job-header-nav-tab:hover,
.job-header-shell--career .job-header-nav-tab:focus-visible {
    color: var(--career-primary);
}

/* 커리어모드 사용자 도구를 헤더 우측에 정렬한다. */
.job-header-shell--career .job-header-user {
    display: flex;
    margin-left: auto;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

/* 커리어모드 헤더 알림 버튼의 위치 기준을 정의한다. */
.job-header-shell--career .header-notification-container {
    position: relative;
}

/* 커리어모드 헤더 알림 아이콘의 색상과 크기를 정의한다. */
.job-header-shell--career .job-header-notification-icon {
    color: var(--k-bg-gray);
    font-size: 18px;
}

/* 커리어모드 헤더 프로필 버튼을 정렬한다. */
.job-header-shell--career .job-header-profile-trigger {
    display: inline-flex;
    min-height: 40px;
    padding: 0;
    align-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
    color: var(--career-ink);
    cursor: pointer;
}

/* 커리어모드 헤더 사용자명의 위계를 정의한다. */
.job-header-shell--career .job-header-username {
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 600;
}

/* 커리어모드 프로필 드롭다운의 표면과 간격을 정의한다. */
.job-header-shell--career .job-header-profile-wrap .profile-dropdown {
    width: 130px;
    min-width: 130px;
    padding: 6px 0;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    box-shadow: var(--k-shadow-modal);
}

/* 커리어모드 프로필 드롭다운 상단의 구독 등급을 정의한다. */
.job-header-shell--career .profile-dropdown .career-profile-grade {
    display: flex;
    min-height: 42px;
    padding: 0 16px;
    align-items: center;
    color: var(--career-muted);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

/* 커리어모드 프로필 드롭다운 항목을 정의한다. */
.job-header-shell--career .profile-dropdown .dropdown-item {
    display: flex;
    width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 0 16px;
    align-items: center;
    border-radius: 0;
    color: var(--career-ink);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
}

/* 커리어모드 프로필 드롭다운 항목의 활성 표면을 정의한다. */
.job-header-shell--career .profile-dropdown .dropdown-item:hover,
.job-header-shell--career .profile-dropdown .dropdown-item:focus-visible,
.job-header-shell--career .profile-dropdown .dropdown-item.is-active {
    background: var(--career-primary-soft);
    color: var(--career-ink);
    font-weight: 600;
}

/* 커리어모드 프로필 드롭다운 항목의 키보드 포커스를 표시한다. */
.job-header-shell--career .profile-dropdown .dropdown-item:focus-visible {
    outline: 2px solid var(--career-primary);
    outline-offset: -2px;
}

/* 커리어모드 프로필 드롭다운 첫 항목의 상단 여백을 정의한다. */
.job-header-shell--career .profile-dropdown .career-dropdown-first-item {
    margin-top: 4px;
}

/* 커리어모드 프로필 드롭다운 마지막 항목의 하단 여백을 정의한다. */
.job-header-shell--career .profile-dropdown .career-dropdown-last-item {
    margin-bottom: 4px;
}

/* =========================================================
   공통 버튼과 입력 요소
   ========================================================= */

/* 커리어모드 공통 버튼의 기본 골격을 정의한다. */
body.career-mode-page .btn-freemode {
    display: inline-flex;
    min-height: 40px;
    padding: 0 18px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    color: var(--career-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
}

/* 커리어모드 주요 버튼의 색상과 테두리를 정의한다. */
body.career-mode-page .btn-freemode.is-primary,
body.career-mode-page .btn-freemode.primary,
body.career-mode-page .btn-freemode.btn-main.is-primary,
body.career-mode-page .btn-freemode.btn-sub.is-primary {
    border-color: var(--career-primary);
    background: var(--career-primary);
    color: var(--career-white);
}

/* 커리어모드 주요 버튼의 포인터 상태를 정의한다. */
body.career-mode-page .btn-freemode.is-primary:hover:not(:disabled),
body.career-mode-page .btn-freemode.is-primary:focus-visible:not(:disabled) {
    border-color: var(--k-color-violet-700);
    background: var(--k-color-violet-700);
    color: var(--career-white);
}

/* 커리어모드 외곽선 버튼의 색상을 정의한다. */
body.career-mode-page .btn-freemode.is-line,
body.career-mode-page .btn-freemode.btn-main.is-line,
body.career-mode-page .btn-freemode.btn-sub.is-line {
    border-color: var(--career-primary);
    background: var(--career-white);
    color: var(--career-primary);
}

/* 커리어모드 외곽선 버튼의 포인터 상태를 정의한다. */
body.career-mode-page .btn-freemode.is-line:hover:not(:disabled),
body.career-mode-page .btn-freemode.is-line:focus-visible:not(:disabled) {
    border-color: var(--career-primary);
    background: var(--career-primary-soft);
    color: var(--career-primary);
}

/* 커리어모드 위험 외곽선 버튼의 색상을 정의한다. */
body.career-mode-page .btn-freemode.is-danger-outline {
    border-color: var(--ref-accent-orange);
    background: var(--career-white);
    color: var(--ref-accent-orange);
}

/* 커리어모드 버튼의 비활성 상태를 정의한다. */
body.career-mode-page .btn-freemode:disabled {
    border-color: var(--k-color-gray-e5);
    background: var(--k-color-gray-e5);
    color: var(--k-color-gray-9c);
    cursor: not-allowed;
}

/* 커리어모드 입력과 셀렉트의 공통 골격을 정의한다. */
body.career-mode-page .input-freemode,
body.career-mode-page .select-freemode,
body.career-mode-page .form-control,
body.career-mode-page .contact-modal-textarea {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background-color: var(--career-white);
    color: var(--career-ink);
    font-family: inherit;
    font-size: 14px;
    box-shadow: none;
}

/* 커리어모드 텍스트 영역의 내부 여백과 행간을 정의한다. */
body.career-mode-page textarea.input-freemode,
body.career-mode-page textarea.form-control,
body.career-mode-page .contact-modal-textarea {
    padding: 14px;
    line-height: 1.6;
}

/* 커리어모드 입력 요소의 포커스 상태를 정의한다. */
body.career-mode-page .input-freemode:focus,
body.career-mode-page .select-freemode:focus,
body.career-mode-page .form-control:focus,
body.career-mode-page .contact-modal-textarea:focus {
    border-color: var(--career-primary);
    outline: 2px solid var(--k-overlay-indigo-15);
    outline-offset: 1px;
}

/* 커리어모드 체크박스와 라디오의 강조색을 정의한다. */
body.career-mode-page input[type="checkbox"],
body.career-mode-page input[type="radio"] {
    accent-color: var(--career-primary);
}

/* 숫자 입력값을 우측 정렬하는 공통 클래스를 정의한다. */
body.career-mode-page .career-input-number {
    text-align: right;
}

/* =========================================================
   커리어모드 홈
   ========================================================= */

/* 커리어모드 홈의 흰색 본문과 상하 여백을 정의한다. */
body.career-mode-home-page .recruit-home-main {
    flex: 1;
    padding: 72px 0 96px;
    background: var(--career-white);
}

/* 커리어모드 홈의 주요 섹션을 세로로 배치한다. */
body.career-mode-home-page .recruit-home-shell {
    display: flex;
    flex-direction: column;
    gap: 72px;
}

/* 커리어모드 홈 히어로를 중앙 정렬한다. */
body.career-mode-home-page .career-home-hero {
    display: flex;
    min-height: 320px;
    padding: 24px 0 10px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

/* 커리어모드 홈 히어로 상단 문구를 정의한다. */
body.career-mode-home-page .career-home-hero-eyebrow {
    margin: 0 0 14px;
    color: var(--career-ink);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.35;
}

/* 커리어모드 홈 히어로 핵심 제목을 정의한다. */
body.career-mode-home-page .career-home-hero-title {
    margin: 0;
    color: var(--career-primary);
    font-size: 52px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* 커리어모드 홈 히어로 설명을 정의한다. */
body.career-mode-home-page .career-home-hero-desc {
    margin: 24px 0 0;
    color: var(--career-text);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.4;
}

/* 커리어모드 홈 프로모션 배너를 기준 이미지 크기로 표시한다. */
body.career-mode-home-page .career-home-promo {
    display: block;
    padding: 0;
    overflow: hidden;
    border-radius: var(--k-radius-xl);
}

/* 커리어모드 홈 프로모션 이미지를 원본 비율로 맞춘다. */
body.career-mode-home-page .career-home-promo img {
    display: block;
    width: 100%;
    height: auto;
}

/* 커리어모드 홈 프로모션 배너의 일반 문구를 정의한다. */
body.career-mode-home-page .career-home-promo span {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

/* 커리어모드 홈 프로모션 배너의 핵심 문구를 정의한다. */
body.career-mode-home-page .career-home-promo strong {
    font-size: 24px;
    font-weight: 700;
    white-space: nowrap;
}

/* 커리어모드 홈 콘텐츠 섹션의 기존 상단 장식을 제거한다. */
body.career-mode-home-page .recruit-content-section {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

/* 커리어모드 홈 섹션 제목과 더보기 링크를 정렬한다. */
body.career-mode-home-page .recruit-section-head {
    display: flex;
    margin: 0 0 32px;
    padding: 0;
    align-items: center;
    justify-content: space-between;
    border: 0;
}

/* 커리어모드 홈 섹션 제목을 정의한다. */
body.career-mode-home-page .recruit-section-title {
    margin: 0;
    color: var(--career-ink);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
}

/* 커리어모드 홈 더보기 링크를 정의한다. */
body.career-mode-home-page .recruit-section-link {
    display: inline-flex;
    min-height: auto;
    padding: 0;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--career-primary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}

/* 커리어모드 홈 더보기 링크의 화살표를 포인트 색상으로 표시한다. */
body.career-mode-home-page .recruit-section-link::after {
    width: 7px;
    height: 7px;
    border-right-color: currentColor;
    border-bottom-color: currentColor;
    transform: rotate(-45deg);
}

/* 커리어모드 홈 더보기 링크의 포인터 상태를 유지한다. */
body.career-mode-home-page .recruit-section-link:hover,
body.career-mode-home-page .recruit-section-link:focus-visible {
    color: var(--career-primary);
    background: transparent;
    text-decoration: none;
}

/* 커리어모드 홈 카드 목록을 데스크톱 3열로 정의한다. */
body.career-mode-home-page .recruit-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

/* 커리어모드 홈 프로젝트 카드를 상주·외주 공통 요약형으로 정의한다. */
body.career-mode-home-page .recruit-content-card {
    display: flex;
    min-width: 0;
    min-height: 240px;
    padding: 24px;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    color: var(--career-ink);
    text-decoration: none;
    box-shadow: none;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

/* 커리어모드 홈 프로젝트 카드의 포인터 상태를 정의한다. */
body.career-mode-home-page .recruit-content-card:hover,
body.career-mode-home-page .recruit-content-card:focus-visible {
    border-color: var(--career-primary);
    box-shadow: none;
    transform: none;
}

/* 커리어모드 홈 프로젝트 카드의 배지와 관심 상태를 정렬한다. */
body.career-mode-home-page .career-project-card-top {
    display: flex;
    min-height: 22px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* 커리어모드 홈 프로젝트 카드의 배지 묶음을 정렬한다. */
body.career-mode-home-page .career-project-card-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

/* 커리어모드 홈 프로젝트 카드의 공통 배지를 정의한다. */
body.career-mode-home-page .career-project-badge {
    display: inline-flex;
    min-height: 20px;
    padding: 0 10px;
    align-items: center;
    border-radius: var(--k-radius-pill);
    font-size: 12px;
    font-weight: 600;
}

/* 커리어모드 홈 상주 프로젝트 배지를 정의한다. */
body.career-mode-home-page .career-project-badge.is-onsite {
    background: var(--career-primary-soft);
    color: var(--career-primary);
}

/* 커리어모드 홈 외주 프로젝트 배지를 정의한다. */
body.career-mode-home-page .career-project-badge.is-outsource {
    background: var(--k-status-success-bg);
    color: var(--ref-accent-green);
}

/* 커리어모드 홈 신규 프로젝트 배지를 정의한다. */
body.career-mode-home-page .career-project-badge.is-new {
    background: var(--k-bg-info-soft);
    color: var(--ref-accent-blue);
}

/* 커리어모드 홈 마감 임박 프로젝트 배지를 정의한다. */
body.career-mode-home-page .career-project-badge.is-deadline {
    background: var(--k-status-danger-bg);
    color: var(--ref-accent-orange);
}

/* 커리어모드 홈 마감 프로젝트 배지를 정의한다. */
body.career-mode-home-page .career-project-badge.is-closed {
    background: var(--career-surface);
    color: var(--career-muted);
}

/* 커리어모드 홈 관심 프로젝트 상태를 아이콘으로 표시한다. */
body.career-mode-home-page .career-project-bookmark-btn {
    display: inline-flex;
    width: 24px;
    height: 24px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: var(--k-color-gray-aaa);
    font-size: 18px;
}

body.career-mode-home-page .career-project-bookmark-btn.is-active {
    color: var(--ref-accent-orange);
}

/* 커리어모드 홈 카드 제목의 위계를 정의한다. */
body.career-mode-home-page .career-project-card-title {
    display: -webkit-box;
    margin: 16px 0 0;
    overflow: hidden;
    color: var(--career-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* 커리어모드 홈 카드 회사명을 정의한다. */
body.career-mode-home-page .career-project-card-company {
    margin: 12px 0 0;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

/* 커리어모드 홈 카드 업무 요약을 한 줄로 표시한다. */
body.career-mode-home-page .career-project-card-summary {
    margin: 24px 0 0;
    overflow: hidden;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 커리어모드 홈 카드 핵심 조건을 두 행으로 배치한다. */
body.career-mode-home-page .career-home-project-meta {
    display: flex;
    margin-top: 8px;
    flex-direction: column;
    gap: 8px;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

/* 커리어모드 홈 카드 조건 한 행의 항목을 구분선과 함께 정렬한다. */
body.career-mode-home-page .career-home-project-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 0;
}

body.career-mode-home-page .career-home-project-meta-row span {
    display: inline-flex;
    align-items: center;
}

body.career-mode-home-page .career-home-project-meta-row span + span::before {
    width: 1px;
    height: 10px;
    margin: 0 8px;
    background: var(--career-border);
    content: "";
}

/* 커리어모드 홈 카드 조건 레이블을 값과 구분한다. */
body.career-mode-home-page .career-home-project-meta strong {
    margin-right: 4px;
    font-weight: 500;
}

/* 커리어모드 홈 빈 상태를 옅은 보라 표면으로 정의한다. */
body.career-mode-home-page .recruit-empty-card {
    display: flex;
    min-height: 52px;
    padding: 0 16px;
    align-items: center;
    border: 0;
    border-radius: var(--k-radius-md);
    background: var(--career-primary-soft);
    color: var(--career-primary);
    font-size: 13px;
}

/* =========================================================
   프로젝트 목록
   ========================================================= */

/* 커리어모드 프로젝트 목록의 상하 여백을 정의한다. */
body.career-mode-page .job-list-page,
body.career-mode-page .work-request-list-shell {
    flex: 1;
    padding-top: 32px;
    padding-bottom: 96px;
}

/* 커리어모드 프로젝트 목록 제목 영역을 정의한다. */
body.career-mode-page .job-list-page-header {
    display: flex;
    margin: 0 0 24px;
    align-items: center;
    justify-content: space-between;
}

/* 커리어모드 프로젝트 목록 페이지 제목을 정의한다. */
body.career-mode-page .job-section-title {
    margin: 0;
    color: var(--career-ink);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 커리어모드 프로젝트 유형 전환 링크를 정의한다. */
body.career-mode-page .career-project-type-tabs {
    display: flex;
    margin-bottom: 28px;
    align-items: center;
    gap: 8px;
}

/* 커리어모드 프로젝트 유형 전환 항목을 외곽선 버튼으로 정의한다. */
body.career-mode-page .career-project-type-tab {
    display: inline-flex;
    min-height: 36px;
    padding: 0 14px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    color: var(--career-text);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

/* 커리어모드 프로젝트 유형 전환 항목의 선택 상태를 정의한다. */
body.career-mode-page .career-project-type-tab.is-active,
body.career-mode-page .career-project-type-tab:hover,
body.career-mode-page .career-project-type-tab:focus-visible {
    border-color: var(--career-primary);
    color: var(--career-primary);
}

/* 통합 프로젝트 검색 화면의 본문 여백을 정의한다. */
body.career-project-search-page .career-project-search-shell {
    flex: 1;
    padding-top: 32px;
    padding-bottom: 96px;
}

/* 통합 프로젝트 검색의 1차 직군 탭을 정의한다. */
body.career-project-search-page .career-project-category-tabs,
body.career-biz-list-page .career-biz-talent-list-page .career-project-category-tabs {
    display: flex;
    width: 100%;
    align-items: center;
    border-bottom: 1px solid var(--career-border);
}

/* 통합 프로젝트 검색의 1차 직군 항목을 텍스트 탭으로 정의한다. */
body.career-project-search-page .career-project-category-tab,
body.career-biz-list-page .career-biz-talent-list-page .career-project-category-tab {
    position: relative;
    min-height: 58px;
    padding: 0 18px;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--career-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

/* 통합 프로젝트 검색의 선택된 직군을 강조한다. */
body.career-project-search-page .career-project-category-tab.is-active,
body.career-project-search-page .career-project-category-tab:hover,
body.career-project-search-page .career-project-category-tab:focus-visible,
body.career-biz-list-page .career-biz-talent-list-page .career-project-category-tab.is-active,
body.career-biz-list-page .career-biz-talent-list-page .career-project-category-tab:hover,
body.career-biz-list-page .career-biz-talent-list-page .career-project-category-tab:focus-visible {
    color: var(--career-ink);
    font-weight: 700;
}

/* 통합 프로젝트 검색의 선택된 직군 하단선을 표시한다. */
body.career-project-search-page .career-project-category-tab.is-active::after,
body.career-biz-list-page .career-biz-talent-list-page .career-project-category-tab.is-active::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: var(--career-primary);
    content: "";
}

/* 통합 프로젝트 검색의 세부 직무 패널을 정의한다. */
body.career-project-search-page .career-project-detail-panel {
    display: grid;
    min-height: 90px;
    margin-top: 28px;
    grid-template-columns: 108px minmax(0, 1fr);
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    overflow: hidden;
}

/* 통합 프로젝트 검색의 숨겨진 세부 직무 영역을 제외한다. */
body.career-project-search-page .career-project-detail-panel[hidden],
body.career-project-search-page .career-project-detail-group[hidden] {
    display: none;
}

/* 통합 프로젝트 검색의 세부 직무 고정 라벨을 정의한다. */
body.career-project-search-page .career-project-detail-label {
    display: flex;
    padding: 24px 18px;
    align-items: center;
    justify-content: center;
    background: var(--career-surface);
    color: var(--career-muted);
    font-size: 13px;
    font-weight: 600;
}

/* 통합 프로젝트 검색의 세부 직무 목록 영역을 정의한다. */
body.career-project-search-page .career-project-detail-groups {
    display: flex;
    min-width: 0;
    padding: 20px 26px;
    align-items: center;
}

/* 통합 프로젝트 검색의 세부 직무를 여러 행으로 배치한다. */
body.career-project-search-page .career-project-detail-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 28px;
}

/* 통합 프로젝트 검색의 세부 직무 항목을 텍스트 버튼으로 정의한다. */
body.career-project-search-page .career-project-detail-group button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--career-muted);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    cursor: pointer;
}

/* 통합 프로젝트 검색의 선택된 세부 직무를 강조한다. */
body.career-project-search-page .career-project-detail-group button.is-active,
body.career-project-search-page .career-project-detail-group button:hover,
body.career-project-search-page .career-project-detail-group button:focus-visible {
    color: var(--career-primary);
    font-weight: 700;
}

/* 통합 프로젝트 검색의 목록 영역 간격을 정의한다. */
body.career-project-search-page .career-project-list-section {
    margin-top: 26px;
}

/* 통합 프로젝트 검색과 프리랜서 찾기의 결과 도구 모음을 한 행에 배치한다. */
body.career-project-search-page .career-project-list-toolbar,
body.career-biz-list-page .career-biz-talent-list-page .career-project-list-toolbar {
    display: flex;
    margin-bottom: 12px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* 통합 프로젝트 검색의 유형 필터 하단 여백을 해제한다. */
body.career-project-search-page .career-project-type-tabs {
    margin: 0;
}

/* 통합 프로젝트 검색의 유형 필터 버튼 커서를 정의한다. */
body.career-project-search-page button.career-project-type-tab {
    font-family: inherit;
    cursor: pointer;
}

/* 통합 프로젝트 검색과 프리랜서 찾기의 결과 수와 정렬을 정렬한다. */
body.career-project-search-page .career-project-result-controls,
body.career-biz-list-page .career-biz-talent-list-page .career-project-result-controls {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* 통합 프로젝트 검색과 프리랜서 찾기의 전체 건수를 정의한다. */
body.career-project-search-page .career-project-total,
body.career-biz-list-page .career-biz-talent-list-page .career-project-total {
    color: var(--career-text);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* 통합 프로젝트 검색과 프리랜서 찾기의 전체 건수 값을 강조한다. */
body.career-project-search-page .career-project-total strong,
body.career-biz-list-page .career-biz-talent-list-page .career-project-total strong {
    color: var(--career-ink);
    font-weight: 700;
}

/* 통합 프로젝트 검색과 프리랜서 찾기의 정렬 라벨을 접근성 전용으로 숨긴다. */
body.career-project-search-page .career-project-sort-label,
body.career-biz-list-page .career-biz-talent-list-page .career-project-sort-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 통합 프로젝트 검색과 프리랜서 찾기의 정렬 선택 상자를 정의한다. */
body.career-project-search-page .career-project-sort-select,
body.career-biz-list-page .career-biz-talent-list-page .career-project-sort-select {
    min-width: 92px;
    height: 36px;
    padding: 0 10px;
    border: 0;
    background: var(--career-white);
    color: var(--career-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* 통합 프로젝트 검색의 카드 목록을 세로로 배치한다. */
body.career-project-search-page .career-project-list {
    display: grid;
    gap: 12px;
}

/* 통합 프로젝트 검색의 프로젝트 카드를 정의한다. */
body.career-project-search-page .career-project-list-card {
    position: relative;
    min-height: 208px;
    padding: 18px 28px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    color: var(--career-ink);
    box-shadow: none;
    cursor: pointer;
}

/* 통합 프로젝트 검색 카드의 포인터 상태를 정의한다. */
body.career-project-search-page .career-project-list-card:hover,
body.career-project-search-page .career-project-list-card:focus-visible,
body.career-project-search-page .career-project-list-card:focus-within {
    border-color: var(--career-primary);
    outline: 0;
}

/* 통합 프로젝트 검색 카드의 배지와 관심 버튼을 정렬한다. */
body.career-project-search-page .career-project-card-top {
    display: flex;
    min-height: 22px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* 통합 프로젝트 검색 카드의 배지 묶음을 정렬한다. */
body.career-project-search-page .career-project-card-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* 통합 프로젝트 검색 카드의 공통 배지를 정의한다. */
body.career-project-search-page .career-project-badge {
    display: inline-flex;
    min-height: 20px;
    padding: 0 9px;
    align-items: center;
    border-radius: var(--k-radius-pill);
    font-size: 11px;
    font-weight: 600;
}

/* 통합 프로젝트 검색 카드의 상주 배지를 정의한다. */
body.career-project-search-page .career-project-badge.is-onsite {
    background: var(--career-primary-soft);
    color: var(--career-primary);
}

/* 통합 프로젝트 검색 카드의 외주 배지를 정의한다. */
body.career-project-search-page .career-project-badge.is-outsource {
    background: var(--k-status-success-bg);
    color: var(--ref-accent-green);
}

/* 통합 프로젝트 검색 카드의 신규 배지를 정의한다. */
body.career-project-search-page .career-project-badge.is-new {
    background: var(--k-bg-info-soft);
    color: var(--ref-accent-blue);
}

/* 통합 프로젝트 검색 카드의 마감 배지를 정의한다. */
body.career-project-search-page .career-project-badge.is-deadline {
    background: var(--k-status-danger-bg);
    color: var(--ref-accent-orange);
}

/* 통합 프로젝트 검색 카드의 모집 마감 배지를 정의한다. */
body.career-project-search-page .career-project-badge.is-closed {
    background: var(--career-surface);
    color: var(--career-muted);
}

/* 통합 프로젝트 검색 카드의 관심 버튼을 정의한다. */
body.career-project-search-page .career-project-bookmark-btn {
    display: inline-flex;
    width: 34px;
    height: 34px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--k-color-gray-aaa);
    font-size: 18px;
    cursor: pointer;
}

/* 통합 프로젝트 검색 카드의 선택된 관심 버튼을 강조한다. */
body.career-project-search-page .career-project-bookmark-btn.is-active,
body.career-project-search-page .career-project-bookmark-btn:hover,
body.career-project-search-page .career-project-bookmark-btn:focus-visible {
    color: var(--ref-accent-orange);
    outline: 0;
}

/* 통합 프로젝트 검색 카드 제목의 위계를 정의한다. */
body.career-project-search-page .career-project-card-title {
    margin: 4px 48px 0 0;
    color: var(--career-ink);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
}

/* 통합 프로젝트 검색 카드 제목 링크는 기존 제목 디자인을 유지합니다. */
body.career-project-search-page .career-project-card-title a {
    color: inherit;
    text-decoration: none;
}

/* 통합 프로젝트 검색 카드 회사명을 정의한다. */
body.career-project-search-page .career-project-card-company {
    margin: 8px 0 0;
    color: var(--career-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* 통합 프로젝트 검색 카드의 요약 문구를 한 줄로 정의한다. */
body.career-project-search-page .career-project-card-summary {
    margin: 16px 0 0;
    overflow: hidden;
    color: var(--career-muted);
    font-size: 13px;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 통합 프로젝트 검색 카드 핵심 조건을 정렬한다. */
body.career-project-search-page .career-project-card-meta {
    display: flex;
    margin-top: 8px;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 0;
    color: var(--career-text);
    font-size: 13px;
    line-height: 1.5;
}

/* 통합 프로젝트 검색 카드 핵심 조건을 구분선으로 나눈다. */
body.career-project-search-page .career-project-card-meta span {
    display: inline-flex;
    align-items: center;
}

body.career-project-search-page .career-project-card-meta span + span::before {
    width: 1px;
    height: 12px;
    margin: 0 10px;
    background: var(--career-border);
    content: "";
}

/* 통합 프로젝트 검색 카드 조건 레이블을 강조한다. */
body.career-project-search-page .career-project-card-meta strong {
    margin-right: 4px;
    color: var(--career-ink);
    font-weight: 600;
}

/* 통합 프로젝트 검색의 빈 상태를 정의한다. */
body.career-project-search-page .career-project-empty {
    display: flex;
    min-height: 120px;
    padding: 24px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
    color: var(--career-muted);
    font-size: 14px;
}

/* 커리어모드 직군 탭을 가로 텍스트 탭으로 정의한다. */
body.career-mode-page .job-category-tabs {
    display: flex;
    width: 100%;
    margin: 0 0 28px;
    padding: 0;
    align-items: center;
    gap: 0;
    border: 0;
    border-bottom: 1px solid var(--career-border);
    border-radius: 0;
    background: var(--career-white);
    overflow-x: auto;
}

/* 커리어모드 직군 탭 항목의 기본 형태를 정의한다. */
body.career-mode-page .job-category-tab {
    position: relative;
    flex: 0 0 auto;
    min-height: 54px;
    padding: 0 18px;
    border: 0;
    background: transparent;
    color: var(--career-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

/* 커리어모드 직군 탭 항목의 선택 상태를 정의한다. */
body.career-mode-page .job-category-tab.active,
body.career-mode-page .job-category-tab:hover,
body.career-mode-page .job-category-tab:focus-visible {
    color: var(--career-ink);
    font-weight: 700;
}

/* 커리어모드 직군 탭의 선택 표시선을 정의한다. */
body.career-mode-page .job-category-tab.active::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: var(--career-primary);
    content: "";
}

/* 커리어모드 목록 검색과 결과 수 영역을 정의한다. */
body.career-mode-page .job-search-section {
    display: flex;
    margin: 0 0 18px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

/* 커리어모드 목록 검색 컨트롤 행을 우측 정렬한다. */
body.career-mode-page .job-search-control-row {
    display: flex;
    margin-left: auto;
    align-items: center;
    gap: 10px;
}

/* 커리어모드 목록 결과 수의 위계를 정의한다. */
body.career-mode-page .total-count-label {
    color: var(--career-text);
    font-size: 14px;
    font-weight: 600;
}

/* 커리어모드 목록 결과 수 강조값을 정의한다. */
body.career-mode-page .total-count-label span {
    color: var(--career-primary);
}

/* 커리어모드 상세검색 토글 버튼을 정의한다. */
body.career-mode-page .job-filter-toggle-btn,
body.career-mode-page .job-search-btn {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    color: var(--career-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* 커리어모드 목록 검색 입력 묶음을 정의한다. */
body.career-mode-page .job-search-box,
body.career-mode-page .work-request-search-box {
    display: flex;
    min-height: 40px;
    padding: 0;
    align-items: center;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    overflow: hidden;
}

/* 커리어모드 목록 검색 입력의 경계선을 제거한다. */
body.career-mode-page .job-search-box .select-freemode,
body.career-mode-page .job-search-box .job-search-input,
body.career-mode-page .work-request-search-box .select-freemode,
body.career-mode-page .work-request-search-box .job-search-input {
    height: 40px;
    min-height: 40px;
    border: 0;
    border-radius: 0;
    outline: 0;
}

/* 커리어모드 상세검색 패널의 표면과 여백을 정의한다. */
body.career-mode-page .job-filter-panel {
    margin: 0 0 28px;
    padding: 22px 24px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
    box-shadow: none;
}

/* 커리어모드 상세검색 조건 그룹의 간격을 정의한다. */
body.career-mode-page .job-filter-row {
    gap: 20px;
}

/* 커리어모드 상세검색 라벨의 위계를 정의한다. */
body.career-mode-page .job-filter-label {
    color: var(--career-ink);
    font-size: 13px;
    font-weight: 600;
}

/* 커리어모드 상세검색 선택 칩을 정의한다. */
body.career-mode-page .filter-chip {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-pill);
    background: var(--career-white);
    color: var(--career-muted);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
}

/* 커리어모드 상세검색 선택 칩의 활성 상태를 정의한다. */
body.career-mode-page .filter-chip.active {
    border-color: var(--career-primary);
    background: var(--career-primary-soft);
    color: var(--career-primary);
    font-weight: 600;
}

/* 커리어모드 목록 콘텐츠의 기존 장식과 패딩을 제거한다. */
body.career-mode-page .list-view-content.job-board {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* 커리어모드 외주 목록 표의 고정 열 계산 방식을 정의한다. */
body.career-mode-page .work-request-table-fixed {
    table-layout: fixed;
}

/* 커리어모드 외주 목록 순번 열 너비를 정의한다. */
body.career-mode-page .work-request-col-number {
    width: 50px;
}

/* 커리어모드 외주 목록 구분 열 너비를 정의한다. */
body.career-mode-page .work-request-col-type {
    width: 80px;
}

/* 커리어모드 외주 목록 예산 열 너비를 정의한다. */
body.career-mode-page .work-request-col-budget {
    width: 128px;
}

/* 커리어모드 외주 목록 날짜 열 너비를 정의한다. */
body.career-mode-page .work-request-col-date {
    width: 120px;
}

/* 커리어모드 외주 목록 건수 열 너비를 정의한다. */
body.career-mode-page .work-request-col-count {
    width: 80px;
}

/* 커리어모드 외주 목록 상태 열 너비를 정의한다. */
body.career-mode-page .work-request-col-status {
    width: 90px;
}

/* 커리어모드 외주 목록 행동 열 너비를 정의한다. */
body.career-mode-page .work-request-col-action {
    width: 70px;
}

/* 커리어모드 상주 프로젝트 목록 행을 전체 폭 카드로 정의한다. */
body.career-mode-page .job-list-desktop .job-list-row {
    display: grid;
    min-height: 146px;
    margin-bottom: 12px;
    padding: 22px 24px;
    grid-template-columns: minmax(170px, 0.9fr) minmax(0, 2.1fr) minmax(190px, 1fr) minmax(150px, 0.8fr);
    align-items: center;
    gap: 22px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    box-shadow: none;
    cursor: pointer;
}

/* 커리어모드 상주 프로젝트 목록 카드의 포인터 상태를 정의한다. */
body.career-mode-page .job-list-desktop .job-list-row:hover,
body.career-mode-page .job-list-desktop .job-list-row:focus-within {
    border-color: var(--career-primary);
    background: var(--career-white);
    box-shadow: none;
    transform: none;
}

/* 커리어모드 상주 프로젝트 목록 제목을 정의한다. */
body.career-mode-page .job-list-title {
    color: var(--career-ink);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}

/* 커리어모드 외주 목록 카드를 전체 폭 행 형태로 정의한다. */
body.career-mode-page .work-request-list-row-card {
    display: grid;
    min-height: 154px;
    margin-bottom: 12px;
    padding: 22px 24px;
    grid-template-columns: minmax(0, 1fr) 230px 112px;
    align-items: center;
    gap: 24px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    box-shadow: none;
}

/* 커리어모드 외주 목록 카드의 포인터 상태를 정의한다. */
body.career-mode-page .work-request-list-row-card:hover,
body.career-mode-page .work-request-list-row-card:focus-within {
    border-color: var(--career-primary);
    box-shadow: none;
    transform: none;
}

/* 커리어모드 외주 목록 제목을 정의한다. */
body.career-mode-page .work-request-list-row-title {
    margin: 8px 0;
    color: var(--career-ink);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}

/* 커리어모드 외주 목록 설명과 출처를 정의한다. */
body.career-mode-page .work-request-list-row-desc,
body.career-mode-page .work-request-list-row-origin {
    color: var(--career-muted);
    font-size: 13px;
    line-height: 1.6;
}

/* 커리어모드 목록 상태 배지의 공통 형태를 정의한다. */
body.career-mode-page .work-request-list-badge,
body.career-mode-page .job-list-tag,
body.career-mode-page .job-status-tag,
body.career-mode-page .company-profile-deadline-badge {
    display: inline-flex;
    min-height: 22px;
    padding: 0 9px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--k-radius-pill);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

/* 커리어모드 목록의 현재 페이지를 배경 없이 주요 색상 텍스트로 강조한다. */
body.career-mode-page .job-pagination .active,
body.career-mode-page .settle-pagination .active {
    border-color: transparent;
    background: transparent;
    color: var(--career-primary);
    font-weight: 700;
}

/* =========================================================
   프로젝트 상세
   ========================================================= */

/* 커리어모드 상세 페이지의 상하 여백을 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page {
    flex: 1;
    max-width: 1260px;
    padding: 32px 0 100px;
}

/* 커리어모드 상세 상단 제목 영역을 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-detail-header {
    margin: 0 0 32px;
    padding: 0;
    border: 0;
}

/* 커리어모드 상세 제목과 액션을 양쪽에 배치한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-detail-header-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
}

/* 커리어모드 상세 페이지 제목을 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-detail-title {
    margin: 0 0 16px;
    color: var(--career-ink);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.35;
}

/* 커리어모드 상세 메타 정보를 인라인으로 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-detail-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 0;
    color: var(--ref-ink);
    font-size: 14px;
}

/* 커리어모드 상세 메타 정보 사이의 구분선을 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .career-detail-meta-divider {
    display: inline-flex;
    align-items: center;
}

/* 커리어모드 상세 메타 구분선을 얇은 회색 선으로 표시한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .career-detail-meta-divider::before {
    width: 1px;
    height: 12px;
    margin: 0 14px;
    background: var(--career-border);
    content: "";
}

/* 커리어모드 상세 마감 배지의 앞 간격을 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .career-detail-meta-status {
    margin-left: 10px;
}

/* 커리어모드 상세 화면의 마감 배지를 정의한다. */
body.career-mode-page .career-detail-deadline-badge {
    display: inline-flex;
    min-height: 24px;
    padding: 0 10px;
    align-items: center;
    justify-content: center;
    border-radius: var(--k-radius-pill);
    background: var(--k-bg-danger-soft-100);
    color: var(--ref-logo-coral);
    font-size: 12px;
    font-weight: 700;
}

/* 커리어모드 상세 화면의 마감 완료 배지를 정의한다. */
body.career-mode-page .career-detail-deadline-badge.is-closed {
    background: var(--career-surface);
    color: var(--career-muted);
}

/* 커리어모드 상세 메타의 회사명 강조 클래스를 정의한다. */
body.career-mode-page .career-detail-owner-name {
    color: var(--career-ink);
    font-size: 16px;
    font-weight: 500;
}

/* 커리어모드 상세 상단 액션 버튼을 정렬한다. */
body.career-mode-page .work-request-detail-action-group,
body.career-mode-page .work-request-detail-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* 커리어모드 상세 상단 관심등록과 지원 버튼 크기를 참조 화면에 맞춘다. */
body.career-mode-page .job-posting-detail-page #detailBookmarkBtn,
body.career-mode-page .job-posting-detail-page #detailApplyShortcutBtn {
    min-width: 86px;
    height: 46px;
    padding: 0 20px;
    border-radius: var(--k-radius-md);
    font-size: 15px;
    font-weight: 500;
}

/* 커리어모드 상세 상단 지원 버튼을 주요 색상으로 표시한다. */
body.career-mode-page .job-posting-detail-page #detailApplyShortcutBtn,
body.career-mode-page .job-posting-detail-page #detailApplyShortcutBtn:hover {
    border-color: var(--career-primary);
    background: var(--career-primary);
    color: var(--career-white);
}

/* 커리어모드 상세 관심등록 완료 상태를 주요 색상으로 표시한다. */
body.career-mode-page .job-posting-detail-page #detailBookmarkBtn.active {
    border-color: var(--career-primary);
    color: var(--career-primary);
}

/* 커리어모드 상세 요약 섹션을 옅은 표면으로 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-detail-content > .career-detail-summary-section,
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-detail-content > .job-detail-section:first-child {
    margin: 0 0 52px;
    padding: 24px;
    border: 0;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
}

/* 커리어모드 상세 일반 섹션 간격을 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-detail-section {
    margin: 0 0 52px;
}

/* 커리어모드 상세 섹션 제목 행을 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-detail-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--career-border);
}

/* 커리어모드 상세 섹션 제목을 체크 아이콘 패턴으로 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .section-title {
    display: flex;
    min-height: 44px;
    margin: 0 0 28px;
    padding: 0 0 20px;
    align-items: center;
    gap: 9px;
    border: 0;
    border-bottom: 1px solid var(--career-border);
    color: var(--career-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}

/* 커리어모드 상세 복합 제목 행의 중복 구분선을 제거한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-detail-section-head .section-title {
    flex: 1;
    margin-bottom: 0;
    border-bottom: 0;
}

/* 커리어모드 상세 신고하기와 기업정보 더보기 버튼을 텍스트 링크로 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-detail-report-btn,
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-company-intro-btn {
    width: auto;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--career-muted);
    font-size: 13px;
    font-weight: 500;
}

/* 커리어모드 상세 우측 텍스트 링크의 화살표 크기를 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-detail-report-btn i,
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-company-intro-btn i {
    color: inherit;
    font-size: 10px;
}

/* 상세 화면 텍스트 액션의 호버 상태는 배경 없이 글자색만 변경한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-detail-report-btn:hover:not(:disabled),
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-detail-report-btn:focus-visible:not(:disabled),
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-company-intro-btn:hover:not(:disabled),
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-company-intro-btn:focus-visible:not(:disabled) {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--career-primary);
    transform: none;
}

/* 모바일 프로젝트 상세 헤더의 제목과 신고하기를 왼쪽에 정렬한다. */
@media (max-width: 768px) {
    body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-detail-section-head--report {
        align-items: flex-start;
    }

    /* 모바일 기업 정보 헤더의 제목과 더보기 버튼을 가로로 배치한다. */
    body.career-mode-page .job-detail-wrapper.job-posting-detail-page #ownerInfoSection .job-detail-section-head {
        flex-direction: row;
        align-items: center;
    }
}

/* 커리어모드 상세 섹션 체크 아이콘을 원형으로 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .section-title > i {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--career-primary);
    color: var(--career-white);
    font-size: 9px;
}

/* 커리어모드 상세 본문의 가독성을 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .content-text,
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .work-request-copy-block {
    color: var(--career-text);
    font-size: 14px;
    line-height: 1.75;
}

/* 프로젝트 상세 Toast UI 본문의 기본 글자 크기와 굵기를 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .toastui-editor-contents {
    font-size: 15px;
    font-weight: 400;
}

/* 커리어모드 프로젝트 상세 안의 구조화 보조 내용을 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .career-detail-subsection {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--career-border);
}

/* 커리어모드 프로젝트 상세 안의 보조 제목을 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .career-detail-subsection h4 {
    margin: 0 0 12px;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 700;
}

/* 커리어모드 상세 요약 정보의 두 열 배치를 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-detail-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 84px;
    row-gap: 12px;
    padding: 0;
}

/* 커리어모드 상세 요약 정보를 좌우 대응 행으로 배치한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .career-detail-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 커리어모드 상세 요약의 전체 폭 항목을 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .career-detail-summary-grid .job-detail-info-row.is-wide {
    grid-column: 1 / -1;
}

/* 커리어모드 상세 요약 정보 열의 간격을 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-detail-info-column {
    display: grid;
    gap: 14px;
}

/* 커리어모드 상세 요약 정보 행을 라벨과 값으로 배치한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-detail-info-row {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
}

/* 커리어모드 상세 요약 정보 라벨을 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .info-label {
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 600;
}

/* 커리어모드 상세 요약 정보 값을 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .info-value {
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 600;
}

/* 커리어모드 기업 요약 카드를 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .requester-profile-card {
    display: grid;
    padding: 24px;
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: start;
    gap: 42px;
    border: 0;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
    box-shadow: none;
}

/* 커리어모드 상세 기업 로고 영역의 기존 여백을 제거한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .requester-profile-card .requester-profile-logo-area {
    margin: 0;
}

/* 커리어모드 상세 기업 로고 박스를 카드에 맞춘다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .requester-profile-card .requester-profile-logo {
    width: 100%;
    height: 80px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
}

/* 커리어모드 상세 기업 로고 이미지가 박스 안에서 비율을 유지하도록 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .requester-profile-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 등록된 기업 로고가 없을 때 건물 아이콘을 표시한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .requester-profile-logo.is-placeholder {
    color: var(--k-color-gray-aaa);
    font-size: 20px;
}

/* 커리어모드 기업정보의 제목과 정보 그리드를 묶는다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .requester-profile-content {
    min-width: 0;
}

/* 커리어모드 기업정보 카드의 기업명을 제목으로 표시한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .requester-profile-company-name {
    display: block;
    margin: 0 0 32px;
    color: var(--career-ink);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

/* 커리어모드 기업정보 그리드를 두 열로 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .requester-profile-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 32px;
}

/* 커리어모드 기업정보 항목을 라벨과 값으로 배치한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .requester-profile-info-item {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    align-items: start;
    gap: 52px;
}

/* 커리어모드 기업정보 라벨을 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .requester-profile-info-label {
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
}

/* 커리어모드 기업정보 값을 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .requester-profile-info-value {
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 600;
}

/* 커리어모드 기업정보 출처 안내를 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .requester-profile-source-notice {
    margin: 32px 0 0;
    color: var(--career-muted);
    font-size: 12px;
    line-height: 1.6;
}

/* 커리어모드 첨부파일 행을 외곽선 카드로 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .work-request-attachment-item,
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .work-request-reference-item {
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
}

/* 커리어모드 첨부파일 다운로드 버튼을 간결한 텍스트 링크로 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .work-request-attachment-download {
    min-width: 94px;
    height: 32px;
    border-color: var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    color: var(--career-muted);
}

/* 상주 프로젝트 근무지 주소와 지도 링크를 한 줄에 배치한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-detail-location-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
}

/* 상주 프로젝트 근무지 주소의 기존 하단 여백을 제거한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-detail-location-address {
    margin: 0;
    padding-left: 24px;
}

/* 상주 프로젝트 지도보기를 배경 없는 텍스트 링크로 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-detail-location-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    color: var(--career-muted);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

/* 상주 프로젝트 지도보기 호버 상태는 글자색만 변경한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-detail-location-link:hover,
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-detail-location-link:focus-visible {
    color: var(--career-primary);
}

/* 상주·외주 프로젝트 담당자 정보를 옅은 단일 행 패널로 표시한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page #recruitContactSection .requester-profile-info-panel,
body.career-mode-page .job-detail-wrapper.job-posting-detail-page #requestContactSection .requester-profile-info-panel {
    display: flex;
    padding: 24px;
    align-items: center;
    gap: 52px;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
}

/* 상주·외주 프로젝트 담당자 항목의 라벨과 값을 이미지 기준으로 좁게 정렬한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page #recruitContactSection .requester-profile-info-item,
body.career-mode-page .job-detail-wrapper.job-posting-detail-page #requestContactSection .requester-profile-info-item {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

/* 상주·외주 프로젝트 담당자명 항목의 기준 폭을 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page #recruitContactSection .requester-profile-info-item:first-child,
body.career-mode-page .job-detail-wrapper.job-posting-detail-page #requestContactSection .requester-profile-info-item:first-child {
    flex: 0 0 110px;
}

/* 상주·외주 프로젝트 연락처 항목의 기준 폭을 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page #recruitContactSection .requester-profile-info-item:nth-child(2),
body.career-mode-page .job-detail-wrapper.job-posting-detail-page #requestContactSection .requester-profile-info-item:nth-child(2) {
    flex: 0 0 180px;
}

/* 상주·외주 프로젝트 이메일 항목이 남은 폭을 사용하도록 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page #recruitContactSection .requester-profile-info-item:nth-child(3),
body.career-mode-page .job-detail-wrapper.job-posting-detail-page #requestContactSection .requester-profile-info-item:nth-child(3) {
    flex: 1 1 auto;
}

/* 커리어모드 체불사업주 안내를 독립된 하단 행으로 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-wage-arrears-section {
    margin-bottom: 0;
}

/* 커리어모드 체불사업주 안내의 외곽선을 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-wage-arrears-notice {
    display: flex;
    min-height: 56px;
    margin-top: 0;
    padding: 0 24px;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
}

/* 커리어모드 체불사업주 안내 아이콘을 테두리 원형 정보 아이콘으로 표시한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-wage-arrears-notice-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 1px solid var(--ref-logo-coral);
    border-radius: 50%;
    background: transparent;
    color: var(--ref-logo-coral);
    font-size: 8px;
    line-height: 1;
}

/* 커리어모드 체불사업주 안내 정보 문자를 원 중앙에 정렬한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-wage-arrears-notice-icon > i {
    font-size: 8px;
    line-height: 1;
}

/* 커리어모드 체불사업주 제목과 설명을 한 줄에 배치한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-wage-arrears-notice-body {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 18px;
}

/* 커리어모드 체불사업주 제목의 크기와 굵기를 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-wage-arrears-notice-body strong {
    display: inline;
    flex: 0 0 auto;
    color: var(--career-ink);
    font-size: 13px;
    font-weight: 700;
}

/* 커리어모드 체불사업주 설명을 제목 옆 보조 문구로 표시한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-wage-arrears-notice-body p {
    margin: 0;
    color: var(--career-muted);
    font-size: 12px;
    line-height: 1.5;
}

/* 커리어모드 체불사업주 확인 링크를 텍스트 형태로 정의한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-wage-arrears-notice-link,
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-wage-arrears-notice-link:hover {
    width: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--career-muted);
    box-shadow: none;
    font-size: 12px;
    font-weight: 500;
    transform: none;
}

/* 커리어모드 체불사업주 확인 링크의 호버 상태는 글자색만 변경한다. */
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-wage-arrears-notice-link:hover,
body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-wage-arrears-notice-link:focus-visible {
    border: 0;
    background: transparent;
    color: var(--career-primary);
}

/* =========================================================
   프로필 설정
   ========================================================= */

/* 커리어모드 프로필 설정 화면의 상하 여백을 정의한다. */
body.career-mode-profile-page .job-board-wrapper {
    flex: 1;
    padding-top: 32px;
    padding-bottom: 96px;
}

/* 커리어모드 프로필 폼의 카드 장식을 제거한다. */
body.career-mode-profile-page .talent-profile-form {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--career-white);
    box-shadow: none;
}

/* 커리어모드 프로필 상단 안내와 연락 가능 시간을 배치한다. */
body.career-mode-profile-page .talent-profile-form-header {
    display: flex;
    margin: 0 0 52px;
    align-items: flex-start;
    flex-direction: column;
    gap: 32px;
}

/* 프로필 제목과 공개 설정을 피그마와 같은 한 줄 구조로 배치한다. */
body.career-mode-profile-page .talent-profile-title-row {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
}

/* 커리어모드 프로필 제목과 설명을 피그마 간격으로 배치한다. */
body.career-mode-profile-page .talent-profile-form-header-copy {
    display: flex;
    width: auto;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 14px;
}

/* 커리어모드 프로필 페이지 제목을 정의한다. */
body.career-mode-profile-page .page-title {
    margin: 0;
    color: var(--career-ink);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 커리어모드 프로필 상단 설명을 정의한다. */
body.career-mode-profile-page .work-request-public-profile-desc {
    margin: 0;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 프로젝트 투입 가능일 라벨과 날짜 입력을 가로로 정렬한다. */
body.career-mode-profile-page .talent-profile-available-date-panel {
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: 16px;
}

/* 프로젝트 투입 가능일 라벨을 프로필 기본 라벨 위계로 표시한다. */
body.career-mode-profile-page .talent-profile-available-date-label {
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/* 프로젝트 투입 가능일 입력 폭과 달력 아이콘 공간을 정의한다. */
body.career-mode-profile-page .talent-profile-available-date-input-wrap {
    width: 300px;
}

body.career-mode-profile-page .talent-profile-available-date-input-wrap .input-freemode {
    width: 100%;
    padding-right: 40px;
}

/* 커리어모드 연락 가능 시간 패널을 가로로 정렬한다. */
body.career-mode-profile-page .talent-response-time-panel {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* 커리어모드 연락 가능 시간 선택 요소의 간격과 폭을 정의한다. */
body.career-mode-profile-page .talent-response-time-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.career-mode-profile-page .talent-response-time-label {
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

body.career-mode-profile-page .talent-response-time-controls .select-freemode {
    width: 104px;
    height: 40px;
    padding-right: 34px;
    border-color: var(--career-border);
    border-radius: var(--k-radius-md);
    background-color: var(--career-white);
    color: var(--career-ink);
    font-size: 14px;
}

body.career-mode-profile-page .talent-response-time-controls .select-freemode:first-child {
    width: 128px;
}

/* 커리어모드 연락 가능 시간의 비활성 선택값도 피그마와 같은 본문 색으로 표시한다. */
body.career-mode-profile-page .talent-response-time-controls .select-freemode:disabled {
    opacity: 1;
    background-color: var(--career-white);
    color: var(--career-ink);
}

/* 커리어모드 프로필 공개 설정 박스를 정의한다. */
body.career-mode-profile-page .talent-profile-public-box {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

/* 커리어모드 프로필 공개 설정 내용을 양쪽으로 배치한다. */
body.career-mode-profile-page .work-request-public-profile-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 커리어모드 프로필 섹션 간격을 정의한다. */
body.career-mode-profile-page .talent-profile-section-block {
    margin: 0 0 52px;
}

/* 커리어모드 프로필 섹션 제목을 정의한다. */
body.career-mode-profile-page .talent-profile-section-title {
    display: flex;
    min-height: 22px;
    margin: 0 0 24px;
    padding: 0 0 24px;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--career-border);
    color: var(--career-ink);
    font-size: 16px;
    font-weight: 600;
}

/* 커리어모드 프로필 섹션 체크 아이콘을 정의한다. */
body.career-mode-profile-page .talent-profile-section-check {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--career-primary);
    color: var(--career-white);
    font-size: 9px;
}

/* 커리어모드 프로필 섹션 머리말과 추가 버튼을 정렬한다. */
body.career-mode-profile-page .talent-profile-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--career-border);
}

/* 커리어모드 복합 프로필 섹션 제목의 중복 구분선을 제거한다. */
body.career-mode-profile-page .talent-profile-section-head .talent-profile-section-title {
    flex: 1;
    margin: 0;
    padding: 0;
    border: 0;
}

/* 커리어모드 프로필 폼 본문 행의 간격을 정의한다. */
body.career-mode-profile-page .talent-profile-form-body {
    display: grid;
    gap: 16px;
    padding: 0;
}

/* 커리어모드 프로필 폼 행을 라벨과 입력으로 배치한다. */
body.career-mode-profile-page .talent-profile-form-row {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    min-height: 36px;
    align-items: center;
    gap: 32px;
}

/* 커리어모드 프로필 폼의 복합 기본 정보 행을 정의한다. */
body.career-mode-profile-page .talent-profile-form-row.is-basic-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

/* 커리어모드 프로필 인라인 필드를 라벨과 입력으로 배치한다. */
body.career-mode-profile-page .talent-profile-inline-field {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    align-items: center;
    gap: 32px;
}

/* 커리어모드 프로필 이미지 행을 정렬한다. */
body.career-mode-profile-page .talent-profile-image-row {
    display: flex;
    padding: 0;
    align-items: center;
    gap: 32px;
}

/* 커리어모드 프로필 이미지 미리보기를 원형으로 정의한다. */
body.career-mode-profile-page .talent-profile-image-preview {
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
    border: 1px solid var(--career-border);
    border-radius: 50%;
    background: var(--career-white);
    overflow: hidden;
}

/* 커리어모드 프로필 반복 입력 항목을 옅은 표면으로 정의한다. */
body.career-mode-profile-page .talent-profile-portfolio-register-grid {
    padding: 22px 24px;
    border: 0;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
    box-shadow: none;
}

/* 커리어모드 프로필 추가 버튼을 외곽선 형태로 정의한다. */
body.career-mode-profile-page .talent-profile-outline-btn {
    display: inline-flex;
    min-height: 36px;
    padding: 0 16px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--career-primary);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    color: var(--career-primary);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    gap: 10px;
}

/* 커리어모드 프로필 하단 액션을 중앙 정렬한다. */
body.career-mode-profile-page .talent-profile-page-actions {
    display: flex;
    margin-top: 0;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* 커리어모드 프로필 섹션 제목의 필수 표기를 강조한다. */
body.career-mode-profile-page .talent-profile-required {
    color: var(--ref-accent-orange);
}

/* 커리어모드 프로필 이미지 안내 영역의 폭과 간격을 정의한다. */
body.career-mode-profile-page .talent-profile-image-guide {
    width: 457px;
    gap: 12px;
}

/* 커리어모드 프로필 이미지 안내 문구를 피그마 위계로 표시한다. */
body.career-mode-profile-page .talent-profile-help {
    color: var(--career-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 커리어모드 프로필 이미지 액션 버튼을 36px 높이로 맞춘다. */
body.career-mode-profile-page .talent-profile-image-buttons .btn-freemode {
    height: 36px;
    min-height: 36px;
    padding: 0 16px;
    border-radius: var(--k-radius-md);
    font-size: 14px;
    font-weight: 500;
}

/* 커리어모드 프로필 소개글의 옅은 표면과 내부 여백을 정의한다. */
body.career-mode-profile-page .talent-profile-intro-body {
    height: 229px;
    padding: 24px;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
}

/* 커리어모드 프로필 소개글 입력 영역을 피그마 높이로 맞춘다. */
body.career-mode-profile-page .talent-profile-intro-body .textarea-freemode {
    width: 100%;
    height: 181px;
    min-height: 181px;
    padding: 18px;
    border-color: var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    resize: none;
}

/* 커리어모드 프로필 기본 정보 라벨을 피그마 위계로 정의한다. */
body.career-mode-profile-page .talent-profile-basic-section .label-freemode {
    margin: 0;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 커리어모드 프로필 기본 정보 입력 요소의 공통 크기와 표면을 정의한다. */
body.career-mode-profile-page .talent-profile-basic-section .input-freemode,
body.career-mode-profile-page .talent-profile-basic-section .select-freemode {
    height: 36px;
    min-height: 36px;
    padding: 0 14px;
    border-color: var(--career-border);
    border-radius: var(--k-radius-md);
    background-color: var(--career-white);
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

/* 커리어모드 프로필 이름과 연락처 입력 폭을 정의한다. */
body.career-mode-profile-page .talent-profile-form-row > .talent-profile-medium-input,
body.career-mode-profile-page .talent-profile-contact-group .talent-profile-medium-input {
    width: 300px;
    max-width: 300px;
}

/* 복수 지역 선택기의 기준 폭과 배치를 정의한다. */
.career-region-picker {
    position: relative;
    width: 805px;
    max-width: 100%;
}

/* 복수 지역 선택기의 현재 선택값 버튼을 공통 입력 형태로 표시한다. */
.career-region-picker-toggle {
    display: flex;
    width: 300px;
    max-width: 100%;
    height: 36px;
    padding: 0 14px;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    color: var(--career-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

/* 복수 지역 선택기 화살표의 열린 상태를 표시한다. */
.career-region-picker-toggle i {
    color: var(--career-muted);
    font-size: 11px;
    transition: transform 0.2s ease;
}

.career-region-picker-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* 복수 지역 선택기의 지역 목록과 선택 태그 패널을 정의한다. */
.career-region-picker-panel {
    margin-top: 8px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    overflow: hidden;
}

.career-region-picker-panel[hidden] {
    display: none;
}

/* 복수 지역 선택기의 시/도와 시/군/구 목록을 두 열로 배치한다. */
.career-region-picker-options {
    display: grid;
    max-height: 250px;
    box-sizing: border-box;
    grid-template-columns: 300px minmax(0, 1fr);
    overflow: hidden;
}

/* 복수 지역 선택기의 시/도 버튼을 두 열로 배치하고 목록 내부를 스크롤한다. */
.career-region-picker-sidos {
    display: grid;
    max-height: 250px;
    box-sizing: border-box;
    padding: 14px;
    border-right: 1px solid var(--career-border);
    background: var(--career-surface);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 4px;
    overflow-y: auto;
}

.career-region-sido-button {
    height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--k-radius-md);
    background: transparent;
    color: var(--career-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.career-region-sido-button.is-active {
    background: var(--career-primary-soft);
    color: var(--career-primary);
    font-weight: 600;
}

/* 복수 지역 선택기의 시/군/구 체크 항목을 세 열로 배치하고 목록 내부를 스크롤한다. */
.career-region-picker-gungus {
    display: grid;
    max-height: 250px;
    box-sizing: border-box;
    padding: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: start;
    gap: 14px 20px;
    overflow-y: auto;
}

.career-region-option {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
    gap: 8px;
    cursor: pointer;
}

.career-region-option input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    flex: 0 0 14px;
    accent-color: var(--career-primary);
}

/* 복수 지역 선택기의 선택 결과를 삭제 가능한 태그로 표시한다. */
.career-region-picker-tags {
    display: flex;
    min-height: 54px;
    padding: 12px 14px;
    align-items: center;
    flex-wrap: wrap;
    border-top: 1px solid var(--career-border);
    gap: 8px;
}

.career-region-tag {
    display: inline-flex;
    min-height: 30px;
    padding: 0 10px;
    align-items: center;
    border-radius: var(--k-radius-pill);
    background: var(--career-primary-soft);
    color: var(--career-primary);
    font-size: 13px;
    font-weight: 500;
    gap: 8px;
}

.career-region-tag button {
    display: inline-flex;
    width: 16px;
    height: 16px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 10px;
    cursor: pointer;
}

/* 복수 지역 선택기의 전체 초기화 버튼을 선택 태그 오른쪽 끝에 배치한다. */
.career-region-reset {
    min-height: 30px;
    margin-left: auto;
    padding: 0 10px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    color: var(--career-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

/* 지역 공통코드가 없을 때 선택기 안내 문구를 표시한다. */
.career-region-picker-empty {
    margin: 0;
    color: var(--career-muted);
    font-size: 14px;
}

/* 커리어모드 프로필 연락처와 이메일 입력 묶음을 정렬한다. */
body.career-mode-profile-page .talent-profile-contact-group,
body.career-mode-profile-page .talent-profile-email-group,
body.career-mode-profile-page .talent-profile-location-group,
body.career-mode-profile-page .talent-profile-radio-group,
body.career-mode-profile-page .talent-profile-rate-group {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 14px;
}

/* 커리어모드 프로필 이메일 아이디와 도메인 폭을 동일하게 맞춘다. */
body.career-mode-profile-page .talent-profile-email-group .talent-profile-medium-input,
body.career-mode-profile-page .talent-profile-email-group .talent-profile-email-domain-select {
    width: 196px;
    max-width: 196px;
    flex: 0 0 196px;
}

/* 커리어모드 프로필 사업자 유형을 테두리 없는 라디오 항목으로 표시한다. */
body.career-mode-profile-page .talent-profile-radio-option {
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
    gap: 8px;
}

/* 커리어모드 프로필 선택된 사업자 유형은 글자색을 유지한다. */
body.career-mode-profile-page .talent-profile-radio-option:has(input[type="radio"]:checked) {
    border: 0;
    color: var(--career-muted);
}

/* 커리어모드 프로필 직무와 경력을 한 행에 배치한다. */
body.career-mode-profile-page .talent-profile-job-career-row {
    display: grid;
    grid-template-columns: 700px minmax(0, 1fr);
    min-height: 36px;
    align-items: center;
    gap: 24px;
}

/* 커리어모드 프로필 직무 선택 요소를 동일한 폭으로 배치한다. */
body.career-mode-profile-page .talent-profile-job-selects {
    display: grid;
    width: 588px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

/* 커리어모드 프로필 경력 입력의 숫자 영역 폭을 정의한다. */
body.career-mode-profile-page .is-career-field .talent-profile-short-input {
    width: 84px;
    max-width: 84px;
}

/* 커리어모드 프로필 희망 근무지 라벨을 열린 선택기 상단에 맞춘다. */
body.career-mode-profile-page .talent-profile-form-row.is-region-row {
    align-items: start;
}

body.career-mode-profile-page .talent-profile-form-row.is-region-row > .label-freemode {
    padding-top: 8px;
}

/* 커리어모드 프로필 희망 단가 입력과 단위를 인풋 밖에 나란히 배치한다. */
body.career-mode-profile-page .talent-profile-rate-value .input-freemode {
    width: 150px;
    max-width: 150px;
}

/* 커리어모드 프로필 체크 항목을 피그마 크기와 간격으로 표시한다. */
body.career-mode-profile-page .talent-profile-check-option {
    min-height: 20px;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    gap: 8px;
}

body.career-mode-profile-page .talent-profile-check-option input[type="checkbox"] {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
}

/* 커리어모드 프로필 개인정보 동의를 카드 없이 한 행으로 표시한다. */
body.career-mode-profile-page .talent-profile-privacy-agreement {
    width: auto;
    justify-content: flex-start;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* 프로필 공개에 필요한 수집 동의와 제3자 제공 동의를 세로 목록으로 배치한다. */
body.career-mode-profile-page .talent-profile-privacy-agreements {
    width: 100%;
    margin-top: 0;
    padding: 10px 0;
}

body.career-mode-profile-page .talent-profile-privacy-agreement .talent-profile-check-option {
    color: var(--career-ink);
}

body.career-mode-profile-page .talent-profile-privacy-agreement strong {
    color: var(--ref-accent-orange);
}

/* 프로필과 회사 설정의 약관 링크를 동일한 보조 문구 형태로 표시한다. */
.career-consent-terms-link {
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
}

.career-consent-terms-link:hover,
.career-consent-terms-link:focus-visible {
    color: var(--career-primary);
    outline: 0;
}

/* 커리어모드 프로필 하단 버튼을 피그마 액션 크기로 맞춘다. */
body.career-mode-profile-page .talent-profile-page-actions .btn-freemode {
    width: 103px;
    min-width: 103px;
    height: 52px;
    min-height: 52px;
    padding: 0 24px;
    border-radius: var(--k-radius-md);
    font-size: 16px;
    font-weight: 600;
}

/* =========================================================
   기업정보
   ========================================================= */

/* 커리어모드 기업정보 페이지의 상하 여백을 정의한다. */
body.career-mode-company-page .company-profile-page {
    flex: 1;
    padding-top: 32px;
    padding-bottom: 96px;
}

/* 커리어모드 기업정보 페이지 제목을 정의한다. */
body.career-mode-company-page .company-profile-title {
    margin: 0 0 24px;
    color: var(--career-ink);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 커리어모드 기업정보 요약 카드를 정의한다. */
body.career-mode-company-page .company-profile-overview-card {
    display: grid;
    padding: 24px;
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: start;
    gap: 42px;
    border: 0;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
    box-shadow: none;
}

/* 커리어모드 기업정보 로고 영역을 왼쪽 열에 정렬한다. */
body.career-mode-company-page .company-profile-brand-line {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* 커리어모드 기업정보 로고 영역을 참조 화면 비율로 정의한다. */
body.career-mode-company-page .company-profile-logo {
    width: 200px;
    height: 80px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
}

/* 커리어모드 기업정보 회사명을 정의한다. */
body.career-mode-company-page .company-profile-name {
    margin: 0 0 32px;
    color: var(--career-ink);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

/* 커리어모드 기업정보 회사명과 상세 정보를 오른쪽 열에 배치한다. */
body.career-mode-company-page .company-profile-overview-content {
    min-width: 0;
}

/* 커리어모드 기업정보 요약 항목을 두 열로 배치한다. */
body.career-mode-company-page .company-profile-info-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 32px;
}

/* 커리어모드 기업정보 요약 라벨과 값을 기준 간격으로 정렬한다. */
body.career-mode-company-page .company-profile-info-panel .requester-profile-info-item {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 52px;
    align-items: start;
}

/* 커리어모드 기업정보 프로젝트 섹션 제목 행을 정의한다. */
body.career-mode-company-page .company-profile-section-head {
    margin-bottom: 0;
}

/* 커리어모드 기업정보 프로젝트 제목 구분선 아래 간격을 참조 화면과 맞춘다. */
body.career-mode-company-page .company-profile-section-head .section-title {
    margin-bottom: 24px;
}

/* 커리어모드 기업정보 더보기 버튼을 텍스트 링크로 정의한다. */
body.career-mode-company-page .company-profile-more-btn {
    width: auto;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--career-muted);
    font-size: 13px;
}

/* 커리어모드 기업정보 더보기는 호버 시 배경 없이 글자색만 변경한다. */
body.career-mode-company-page .company-profile-more-btn:hover:not(:disabled),
body.career-mode-company-page .company-profile-more-btn:focus-visible:not(:disabled) {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--career-primary);
    transform: none;
}

/* 커리어모드 기업정보 프로젝트 목록 간격을 정의한다. */
body.career-mode-company-page .company-profile-list-body {
    display: grid;
    gap: 12px;
}

/* 커리어모드 기업정보 프로젝트 카드를 정의한다. */
body.career-mode-company-page .company-profile-project-card {
    position: relative;
    display: block;
    min-height: 0;
    padding: 24px 18px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    color: inherit;
    box-shadow: none;
    text-decoration: none;
    transition: var(--k-transition-fast);
}

/* 커리어모드 기업정보 프로젝트 카드의 호버 상태를 정의한다. */
body.career-mode-company-page .company-profile-project-card:hover {
    border-color: var(--career-primary);
    box-shadow: none;
    transform: none;
}

/* 커리어모드 기업정보 프로젝트 카드 본문을 정의한다. */
body.career-mode-company-page .company-profile-project-main {
    min-width: 0;
}

/* 커리어모드 기업정보 프로젝트 카드 상단에 상태와 관심 아이콘을 배치한다. */
body.career-mode-company-page .company-profile-project-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* 커리어모드 기업정보 프로젝트 카드의 관심 아이콘을 보조 색상으로 표시한다. */
body.career-mode-company-page .company-profile-project-favorite {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    color: var(--career-muted);
    font-size: 18px;
}

/* 커리어모드 기업정보 프로젝트 유형과 상태를 정렬한다. */
body.career-mode-company-page .company-profile-project-badges {
    display: flex;
    margin-bottom: 0;
    align-items: center;
    gap: 4px;
}

/* 커리어모드 기업정보 프로젝트 유형과 상태 배지를 정의한다. */
body.career-mode-company-page .company-profile-project-type,
body.career-mode-company-page .company-profile-project-status {
    display: inline-flex;
    min-height: 20px;
    padding: 0 10px;
    align-items: center;
    justify-content: center;
    border-radius: var(--k-radius-pill);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

/* 커리어모드 기업정보 상주 프로젝트 유형 배지를 정의한다. */
body.career-mode-company-page .company-profile-project-type.is-onsite {
    background: var(--career-primary-soft);
    color: var(--career-primary);
}

/* 커리어모드 기업정보 외주 프로젝트 유형 배지를 정의한다. */
body.career-mode-company-page .company-profile-project-type.is-outsource {
    background: var(--k-status-success-bg);
    color: var(--ref-accent-green);
}

/* 커리어모드 기업정보 신규 프로젝트 배지를 정의한다. */
body.career-mode-company-page .company-profile-project-status.is-new {
    background: var(--k-bg-info-soft);
    color: var(--ref-accent-blue);
}

/* 커리어모드 기업정보 외주 작업 방식 배지를 정의한다. */
body.career-mode-company-page .company-profile-project-status.is-work-mode {
    background: var(--career-surface);
    color: var(--career-muted);
}

/* 커리어모드 기업정보 프로젝트 마감 상태를 정의한다. */
body.career-mode-company-page .company-profile-project-status.is-closed {
    background: var(--career-surface);
    color: var(--career-muted);
}

/* 커리어모드 기업정보 프로젝트 마감 배지를 주요 색상으로 정의한다. */
body.career-mode-company-page .company-profile-deadline-badge {
    display: inline-flex;
    min-height: 20px;
    padding: 0 10px;
    align-items: center;
    justify-content: center;
    border-radius: var(--k-radius-pill);
    background: var(--k-status-danger-bg);
    color: var(--ref-accent-orange);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

/* 커리어모드 기업정보 마감 완료 배지를 낮은 강조로 정의한다. */
body.career-mode-company-page .company-profile-deadline-badge.is-closed {
    background: var(--career-surface);
    color: var(--career-muted);
}

/* 커리어모드 기업정보 프로젝트 제목을 정의한다. */
body.career-mode-company-page .company-profile-project-title {
    min-width: 0;
    margin: 0;
    color: var(--career-ink);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
}

/* 커리어모드 기업정보 프로젝트 제목과 마감 배지를 한 줄에 배치한다. */
body.career-mode-company-page .company-profile-project-title-row {
    display: flex;
    margin-top: 16px;
    align-items: center;
    gap: 12px;
}

/* 커리어모드 기업정보 프로젝트 기업명을 정의한다. */
body.career-mode-company-page .company-profile-project-company {
    margin: 8px 0 0;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

/* 커리어모드 기업정보 프로젝트 요약을 정의한다. */
body.career-mode-company-page .company-profile-project-summary {
    display: flex;
    min-width: 0;
    margin: 14px 0 0;
    align-items: center;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    overflow: hidden;
}

/* 커리어모드 기업정보 프로젝트 요약 항목을 한 줄에 표시한다. */
body.career-mode-company-page .company-profile-project-summary span {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 커리어모드 기업정보 프로젝트 기술과 업무 요약을 구분선으로 나눈다. */
body.career-mode-company-page .company-profile-project-summary span + span::before {
    width: 1px;
    height: 10px;
    margin: 0 8px;
    flex: 0 0 1px;
    background: var(--career-border);
    content: "";
}

/* 커리어모드 기업정보 프로젝트 메타 정보를 정의한다. */
body.career-mode-company-page .company-profile-project-meta {
    display: flex;
    margin-top: 14px;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 0;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

/* 커리어모드 기업정보 프로젝트 조건 항목을 정렬한다. */
body.career-mode-company-page .company-profile-project-meta > span {
    display: inline-flex;
    align-items: center;
}

/* 커리어모드 기업정보 프로젝트 조건을 구분선으로 나눈다. */
body.career-mode-company-page .company-profile-project-meta > span + span::before {
    width: 1px;
    height: 10px;
    margin: 0 8px;
    flex: 0 0 1px;
    background: var(--career-border);
    content: "";
}

/* 커리어모드 기업정보 프로젝트 조건 라벨을 강조한다. */
body.career-mode-company-page .company-profile-project-meta strong {
    margin-right: 6px;
    font-weight: 600;
}

/* 커리어모드 기업정보 외주 프로젝트 일정 협의 배지를 정의한다. */
body.career-mode-company-page .company-profile-project-meta .company-profile-project-negotiable {
    min-height: 20px;
    padding: 0 10px;
    justify-content: center;
    border-radius: var(--k-radius-pill);
    background: var(--career-surface);
    color: var(--career-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

/* 커리어모드 기업정보 일정 협의 배지 앞의 조건 구분선을 제거한다. */
body.career-mode-company-page .company-profile-project-meta .company-profile-project-negotiable::before {
    display: none;
}

/* 커리어모드 기업정보 빈 상태 행을 정의한다. */
body.career-mode-company-page .company-profile-empty-row {
    display: flex;
    min-height: 56px;
    padding: 0 24px;
    align-items: center;
    justify-content: flex-start;
    border: 0;
    border-radius: var(--k-radius-md);
    background: var(--career-primary-soft);
    color: var(--career-primary);
    font-size: 13px;
}

/* 커리어모드 기업정보 출처 안내 박스를 정의한다. */
body.career-mode-company-page .company-profile-notice {
    margin-top: 52px;
    padding: 18px 22px;
    border: 0;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
    color: var(--career-muted);
    font-size: 12px;
    line-height: 1.7;
}

/* 커리어모드 기업정보 출처 안내 문단 여백을 정의한다. */
body.career-mode-company-page .company-profile-notice p {
    margin: 0;
}

/* =========================================================
   신고 모달
   ========================================================= */

/* 커리어모드 모달 오버레이를 화면 전체에 배치한다. */
body.career-mode-page .contact-modal-overlay {
    position: fixed;
    z-index: var(--k-z-modal);
    inset: 0;
    display: none;
    padding: 24px;
    align-items: center;
    justify-content: center;
    background: var(--k-overlay-dark-40);
}

/* 커리어모드 모달이 열렸을 때의 배치를 정의한다. */
body.career-mode-page .contact-modal-overlay.active,
body.career-mode-page .contact-modal-overlay.is-open {
    display: flex;
}

/* 커리어모드 신고 모달의 크기와 표면을 정의한다. */
body.career-mode-page .work-request-report-modal,
body.career-mode-page .work-request-detail-report-modal {
    display: flex;
    width: min(500px, 100%);
    max-width: 500px;
    height: 670px;
    max-height: calc(100vh - 48px);
    padding: 32px 24px;
    flex-direction: column;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    box-shadow: var(--k-shadow-modal);
    overflow-y: auto;
}

/* 커리어모드 신고 모달 제목을 정의한다. */
body.career-mode-page .work-request-report-modal h3 {
    margin: 0 0 8px;
    color: var(--career-ink);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 커리어모드 신고 모달 설명을 정의한다. */
body.career-mode-page .work-request-report-modal .contact-modal-desc {
    margin: 0 0 32px;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 커리어모드 신고 폼의 항목 간격을 정의한다. */
body.career-mode-page .work-request-report-form {
    display: grid;
    gap: 36px;
}

/* 커리어모드 신고 폼의 기본 그룹 여백을 제거한다. */
body.career-mode-page .work-request-report-form .form-group {
    margin: 0;
}

/* 커리어모드 신고 폼의 라벨을 정의한다. */
body.career-mode-page .work-request-report-form .form-label {
    display: block;
    margin: 0 0 var(--k-space-form-label);
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 커리어모드 신고 사유를 두 열 카드로 배치한다. */
body.career-mode-page .work-request-report-reason-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

/* 커리어모드 신고 사유 선택 항목을 카드로 정의한다. */
body.career-mode-page .work-request-report-reason-item {
    display: flex;
    min-height: 44px;
    padding: 0 14px;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
    cursor: pointer;
}

/* 커리어모드 신고 사유 선택 항목의 활성 상태를 정의한다. */
body.career-mode-page .work-request-report-reason-item.is-checked {
    border-color: var(--career-border);
    background: var(--career-white);
    color: var(--career-ink);
}

/* 커리어모드 신고 사유 라디오의 선택 테두리를 주요 색상으로 정의한다. */
body.career-mode-page .work-request-detail-report-modal .work-request-report-reason-item input:checked {
    border-color: var(--career-primary);
}

/* 커리어모드 신고 사유 라디오의 선택점을 주요 색상으로 정의한다. */
body.career-mode-page .work-request-detail-report-modal .work-request-report-reason-item input:checked::after {
    background: var(--career-primary);
}

/* 커리어모드 신고 상세 입력 높이를 정의한다. */
body.career-mode-page .work-request-report-modal .contact-modal-textarea {
    width: 100%;
    height: 166px;
    min-height: 166px;
    padding: 14px 16px;
    border-color: var(--career-border);
    color: var(--career-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
    resize: vertical;
}

/* 커리어모드 신고 상세 입력 안내 문구를 보조 색상으로 정의한다. */
body.career-mode-page .work-request-report-modal .contact-modal-textarea::placeholder {
    color: var(--career-muted);
    font-weight: 500;
    opacity: 1;
}

/* 커리어모드 신고 모달 하단 액션을 같은 폭으로 배치한다. */
body.career-mode-page .work-request-report-modal .contact-modal-actions {
    display: grid;
    margin-top: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

/* 커리어모드 신고 모달 하단 버튼을 전체 폭으로 정의한다. */
body.career-mode-page .work-request-report-modal .contact-modal-actions .btn-freemode {
    width: 100%;
    min-height: 42px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 커리어모드 신고 모달 취소 버튼을 옅은 회색 채움 형태로 정의한다. */
body.career-mode-page .work-request-report-modal .contact-modal-actions .btn-freemode.is-line,
body.career-mode-page .work-request-report-modal .contact-modal-actions .btn-freemode.is-line:hover:not(:disabled),
body.career-mode-page .work-request-report-modal .contact-modal-actions .btn-freemode.is-line:focus-visible:not(:disabled) {
    border-color: var(--career-border);
    background: var(--career-surface);
    box-shadow: none;
    color: var(--career-ink);
    transform: none;
}

/* =========================================================
   공고 등록과 기업정보 설정 폼
   ========================================================= */

/* 커리어모드 폼 화면의 본문과 푸터 사이 여백을 정의한다. */
body.career-mode-form-page .job-board-wrapper {
    flex: 1;
    padding-bottom: 96px;
}

/* 커리어모드 공고 등록 폼의 기준 폭과 상단 여백을 정의한다. */
body.career-mode-form-page .job-posting-form-page {
    width: 100%;
    max-width: 1200px;
    padding: 32px 0 0;
}

/* 커리어모드 공고 등록 제목과 첫 섹션 사이의 간격을 정의한다. */
body.career-mode-form-page .job-posting-form-header {
    margin-bottom: 44px;
}

/* 커리어모드 공고 등록 화면 제목을 페이지 제목 체계에 맞춘다. */
body.career-mode-form-page .job-posting-form-header .form-title,
body.career-mode-company-settings-page .company-profile-image-form .page-title {
    color: var(--career-ink);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.35;
}

/* 커리어모드 공고 등록 섹션의 수직 간격을 정의한다. */
body.career-mode-form-page .job-posting-form-section {
    margin-top: 56px;
}

/* 커리어모드 공고 등록 섹션 머리말을 공통 구분선 패턴으로 정의한다. */
body.career-mode-form-page .job-posting-section-head {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--career-border);
}

/* 커리어모드 공고 등록 섹션 제목 크기를 정의한다. */
body.career-mode-form-page .job-posting-section-title {
    color: var(--career-ink);
    font-size: 16px;
    font-weight: 700;
}

/* 커리어모드 폼 섹션 체크 아이콘을 주요 색상으로 정의한다. */
body.career-mode-form-page .job-posting-section-check,
body.career-mode-company-settings-page .company-profile-section-check {
    background: var(--career-primary);
    color: var(--career-white);
}

/* 커리어모드 공고 등록 섹션 본문의 들여쓰기와 간격을 정의한다. */
body.career-mode-form-page .job-posting-section-body {
    gap: 18px;
    padding: 24px 0 0;
}

/* 커리어모드 공고 등록의 좁은 섹션 본문 간격을 제거한다. */
body.career-mode-form-page .career-form-section-body-tight {
    gap: 0;
}

/* 커리어모드 공고 등록의 모집분야와 상세 직무를 동일한 폭으로 배치한다. */
body.career-mode-form-page .career-job-category-selects {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

/* 커리어모드 숫자 입력값을 우측 정렬한다. */
body.career-mode-page .career-input-number {
    text-align: right;
}

/* 커리어모드 체크 필드의 기본 왼쪽 여백을 정의한다. */
body.career-mode-form-page .career-job-check-offset {
    padding-left: 12px;
}

/* 커리어모드 장문 입력의 내부 여백을 공통화한다. */
body.career-mode-form-page .career-form-textarea {
    padding: 20px;
}

/* 커리어모드 파일 입력을 업로드 버튼으로만 조작할 수 있게 숨긴다. */
body.career-mode-page .career-file-input {
    display: none;
}

/* 커리어모드 연락처 인증 버튼 높이를 입력 요소와 맞춘다. */
body.career-mode-page .career-contact-auth-button {
    height: 38px;
}

/* 커리어모드 폼 입력 요소의 테두리와 표면을 통일한다. */
body.career-mode-form-page .job-posting-form-page .form-control,
body.career-mode-form-page .job-posting-form-page .select-freemode,
body.career-mode-company-settings-page .company-profile-image-form .input-freemode,
body.career-mode-company-settings-page .company-profile-image-form .select-freemode {
    min-height: 40px;
    border-color: var(--career-border);
    border-radius: var(--k-radius-md);
    background-color: var(--career-white);
    color: var(--career-ink);
    box-shadow: none;
}

/* 커리어모드 폼 입력 요소의 포커스 상태를 주요 색상으로 정의한다. */
body.career-mode-form-page .job-posting-form-page .form-control:focus,
body.career-mode-form-page .job-posting-form-page .select-freemode:focus,
body.career-mode-company-settings-page .company-profile-image-form .input-freemode:focus,
body.career-mode-company-settings-page .company-profile-image-form .select-freemode:focus {
    border-color: var(--career-primary);
    outline-offset: 0;
}

/* 커리어모드 선택형 폼의 기본 라디오 테두리를 중립 색상으로 정의한다. */
body.career-mode-form-page .job-posting-choice input[type="radio"],
body.career-mode-profile-page .talent-profile-radio-option input[type="radio"] {
    border-color: var(--career-border);
}

/* 커리어모드 선택형 폼의 선택된 라디오 테두리를 주요 색상으로 정의한다. */
body.career-mode-form-page .job-posting-choice input[type="radio"]:checked,
body.career-mode-profile-page .talent-profile-radio-option input[type="radio"]:checked {
    border-color: var(--career-primary);
}

/* 커리어모드 선택형 폼의 라디오 선택점을 주요 색상으로 정의한다. */
body.career-mode-form-page .job-posting-choice input[type="radio"]:checked::after,
body.career-mode-profile-page .talent-profile-radio-option input[type="radio"]:checked::after {
    background: var(--career-primary);
}

/* 커리어모드 선택형 폼의 체크 상태를 주요 색상으로 정의한다. */
body.career-mode-form-page .job-posting-choice input[type="checkbox"]:checked,
body.career-mode-form-page .job-posting-private-check input:checked,
body.career-mode-profile-page .talent-profile-check-option input[type="checkbox"]:checked {
    border-color: var(--career-primary);
    background: var(--career-primary);
}

/* 커리어모드 선택형 폼의 활성 외곽선을 주요 색상으로 정의한다. */
body.career-mode-form-page .job-posting-choice:has(input:checked),
body.career-mode-profile-page .talent-profile-radio-option:has(input[type="radio"]:checked) {
    border-color: var(--career-primary);
    color: var(--career-primary);
}

/* 커리어모드 주소 검색 버튼을 보조 외곽선 버튼으로 정의한다. */
body.career-mode-form-page .job-board .btn-freemode.btn-sub.job-posting-address-button,
body.career-mode-form-page .job-board .btn-freemode.btn-sub.job-posting-address-button:hover {
    border-color: var(--career-primary);
    background: var(--career-white);
    color: var(--career-primary);
}

/* 커리어모드 폼 하단 액션의 저장 버튼을 주요 색상으로 고정한다. */
body.career-mode-form-page .job-board .btn-freemode.is-primary,
body.career-mode-form-page .job-board .btn-freemode.btn-main.is-primary,
body.career-mode-form-page .job-board .btn-main.is-primary {
    border-color: var(--career-primary);
    background: var(--career-primary);
    color: var(--career-white);
}

/* 커리어모드 기업정보 설정 폼의 기준 폭과 상하 여백을 정의한다. */
body.career-mode-company-settings-page .company-profile-edit-form {
    width: 100%;
    max-width: 1200px;
    margin-top: 32px;
    padding: 0 0 96px;
}

/* 커리어모드 기업정보 설정 섹션 간격을 정의한다. */
body.career-mode-company-settings-page .company-profile-image-form .company-profile-form-section {
    margin-bottom: 56px;
}

/* 커리어모드 기업정보 설정 섹션 머리말을 공통 패턴으로 정의한다. */
body.career-mode-company-settings-page .company-profile-image-form .company-profile-form-section-title {
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom-color: var(--career-border);
    color: var(--career-ink);
    font-size: 16px;
}

/* 커리어모드 기업정보 설정의 소개 입력 영역을 옅은 표면으로 묶는다. */
body.career-mode-company-settings-page .company-profile-intro-body {
    padding: 22px 24px;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
}

/* 커리어모드 기업정보 비공개 스위치 묶음을 정렬한다. */
body.career-mode-company-settings-page .career-company-public-toggle {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 10px;
    color: var(--career-ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* 커리어모드 기업정보 비공개 스위치의 실제 체크박스를 숨긴다. */
body.career-mode-company-settings-page .career-company-public-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* 커리어모드 기업정보 비공개 스위치 트랙을 정의한다. */
body.career-mode-company-settings-page .career-company-public-toggle-track {
    position: relative;
    width: 34px;
    height: 20px;
    border-radius: var(--k-radius-pill);
    background: var(--career-border);
}

/* 커리어모드 기업정보 비공개 스위치 손잡이를 정의한다. */
body.career-mode-company-settings-page .career-company-public-toggle-track::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--career-white);
    content: "";
    transition: transform var(--k-transition-fast);
}

/* 커리어모드 기업정보 비공개 스위치 선택 상태를 정의한다. */
body.career-mode-company-settings-page .career-company-public-toggle input:checked + .career-company-public-toggle-track {
    background: var(--career-primary);
}

/* 커리어모드 기업정보 비공개 스위치 선택 손잡이 위치를 정의한다. */
body.career-mode-company-settings-page .career-company-public-toggle input:checked + .career-company-public-toggle-track::after {
    transform: translateX(14px);
}

/* 피그마 등록·기업 설정 화면이 공유하는 1260px 본문과 페이지 여백을 정의한다. */
body.career-mode-form-page .career-registration-form,
body.career-mode-company-settings-page .career-registration-form {
    width: 100%;
    max-width: 1260px;
    margin: 0 auto;
    padding: 32px 0 96px;
    border: 0;
    border-radius: 0;
    background: var(--career-white);
    box-shadow: none;
}

/* 피그마 등록·기업 설정 화면의 제목과 설명 간격을 공통화한다. */
body.career-mode-form-page .career-registration-form .job-posting-form-header,
body.career-mode-company-settings-page .career-registration-form .work-request-public-profile-header {
    display: flex;
    margin: 0 0 52px;
    padding: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

body.career-mode-form-page .career-registration-form .job-posting-form-header {
    flex-direction: column;
    gap: 14px;
}

body.career-mode-company-settings-page .career-registration-form .talent-profile-form-header-copy {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 피그마 등록·기업 설정 화면의 페이지 제목을 정의한다. */
body.career-mode-form-page .career-registration-form .job-posting-form-header .form-title,
body.career-mode-company-settings-page .career-registration-form .page-title {
    margin: 0;
    color: var(--career-ink);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 피그마 등록·기업 설정 화면의 안내 문구를 정의한다. */
body.career-mode-form-page .career-registration-form-desc,
body.career-mode-company-settings-page .career-registration-form .work-request-public-profile-desc {
    margin: 0;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 상주·외주 등록 폼의 주요 섹션을 52px 간격의 단일 흐름으로 배치한다. */
body.career-mode-form-page .career-registration-form > form {
    display: flex;
    flex-direction: column;
    gap: 52px;
}

body.career-mode-form-page .career-registration-form .job-posting-form-section,
body.career-mode-company-settings-page .career-registration-form .company-profile-form-section {
    width: 100%;
    margin: 0;
}

body.career-mode-company-settings-page .career-registration-form .company-profile-form-section {
    margin-bottom: 52px;
}

/* 외주 등록 화면의 시각 순서를 피그마 정보 흐름에 맞춘다. */
body.career-biz-work-request-form-page section.is-request-content { order: 1; }
body.career-biz-work-request-form-page section.is-project-detail { order: 2; }
body.career-biz-work-request-form-page section.is-proposal-request { order: 3; }
body.career-biz-work-request-form-page section.is-contact-info { order: 4; }
body.career-biz-work-request-form-page .work-request-form-actions { order: 5; }

/* 피그마 등록·기업 설정 화면의 섹션 머리말과 구분선을 정의한다. */
body.career-mode-form-page .career-registration-form .job-posting-section-head,
body.career-mode-company-settings-page .career-registration-form .company-profile-form-section-title {
    display: flex;
    min-height: 47px;
    margin: 0;
    padding: 0 0 24px;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--career-border);
    color: var(--career-ink);
}

body.career-mode-form-page .career-registration-form .job-posting-section-title,
body.career-mode-company-settings-page .career-registration-form .company-profile-form-section-title {
    color: var(--career-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 피그마 섹션의 필수 문구를 기존 위험 강조 색상으로 표시한다. */
body.career-mode-page .career-registration-required {
    color: var(--ref-accent-orange);
}

/* 피그마 등록·기업 설정 화면의 18px 원형 체크 아이콘을 정의한다. */
body.career-mode-form-page .career-registration-form .job-posting-section-check,
body.career-mode-company-settings-page .career-registration-form .company-profile-section-check {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    background: var(--career-primary);
    color: var(--career-white);
    font-size: 9px;
}

/* 피그마 등록·기업 설정 화면의 입력 행 사이 간격을 정의한다. */
body.career-mode-form-page .career-registration-form .job-posting-section-body,
body.career-mode-company-settings-page .career-registration-form .company-profile-form-body {
    display: flex;
    padding: 24px 0 0;
    flex-direction: column;
    gap: 16px;
}

/* 피그마 등록 폼의 80px 라벨 열과 32px 입력 간격을 정의한다. */
body.career-mode-form-page .career-registration-form .job-posting-field {
    display: grid;
    width: 100%;
    min-height: 36px;
    grid-template-columns: 80px minmax(0, 1fr);
    align-items: center;
    gap: 32px;
}

body.career-mode-form-page .career-registration-form .job-posting-field-row {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}

body.career-mode-form-page .career-registration-form .job-posting-label,
body.career-mode-company-settings-page .career-registration-form .label-freemode {
    margin: 0;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 피그마 폼의 36px 입력, 선택 요소와 스타일 가이드 표본을 공통 규격으로 정의한다. */
body.career-mode-form-page .career-registration-form .form-control,
body.career-mode-form-page .career-registration-form .select-freemode,
body.career-mode-company-settings-page .career-registration-form .input-freemode,
body.career-mode-company-settings-page .career-registration-form .select-freemode,
body.style-guide-page #forms input.input-freemode,
body.style-guide-page #forms .select-freemode {
    height: 36px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background-color: var(--career-white);
    color: var(--career-ink);
    box-shadow: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

body.career-mode-form-page .career-registration-form .form-control::placeholder,
body.career-mode-company-settings-page .career-registration-form .input-freemode::placeholder {
    color: var(--career-muted);
    opacity: 1;
}

body.career-mode-form-page .career-registration-form .form-control[readonly],
body.career-mode-form-page .career-registration-form .select-freemode:disabled,
body.career-mode-company-settings-page .career-registration-form .input-freemode[readonly] {
    opacity: 1;
    background-color: var(--career-white);
    color: var(--career-ink);
}

/* 피그마 폼에서 자주 사용하는 입력 묶음 폭을 정의한다. */
body.career-mode-form-page .career-registration-form .job-posting-field.is-medium {
    width: 412px;
}

body.career-mode-form-page .career-registration-form .job-posting-field.is-category {
    width: 700px;
}

body.career-mode-form-page .career-registration-form .career-job-category-selects {
    display: grid;
    width: 588px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body.career-mode-form-page .career-registration-form .job-posting-field.is-compact {
    width: 192px;
}

body.career-mode-form-page .career-registration-form .job-posting-field.is-career-years {
    width: 222px;
}

body.career-mode-form-page .career-registration-form .job-posting-field.is-pay-amount {
    width: 312px;
}

body.career-mode-form-page .career-registration-form .job-posting-field.is-date-range {
    width: 612px;
}

/* 숫자 입력의 단위를 입력 테두리 밖 우측에 배치한다. */
body.career-mode-form-page .career-registration-inline-unit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

body.career-mode-form-page .career-registration-inline-unit .form-control {
    width: 100%;
    min-width: 0;
    padding-right: 4px;
}

body.career-mode-form-page .career-registration-inline-unit .job-posting-unit-text {
    position: static;
    color: var(--career-muted);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

/* 피그마 등록 폼의 날짜 범위와 예상 주차를 정렬한다. */
body.career-mode-form-page .career-registration-form .job-posting-date-range {
    display: grid;
    width: 500px;
    grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

body.career-mode-form-page .career-registration-form .career-registration-period-range {
    width: 560px;
    grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) auto;
}

body.career-mode-form-page .career-registration-period-weeks {
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    margin-left: 14px;
}

/* 근무시간 선택과 직접 입력을 한 행에 배치한다. */
body.career-mode-form-page .career-registration-form .job-posting-field.is-work-time {
    width: 480px;
    grid-template-columns: 80px 32px 180px 8px 180px;
    gap: 0;
}

body.career-mode-form-page .career-registration-form .job-posting-field.is-work-time .job-posting-label {
    grid-column: 1;
}

body.career-mode-form-page .career-registration-form .job-posting-field.is-work-time .select-freemode {
    grid-column: 3;
}

body.career-mode-form-page .career-registration-form .job-posting-field.is-work-time .form-control {
    grid-column: 5;
}

/* 피그마의 테두리 없는 라디오와 체크 항목을 정의한다. */
body.career-mode-form-page .career-registration-form .job-posting-choice,
body.career-mode-form-page .career-registration-form .job-posting-private-check {
    display: inline-flex;
    min-height: 20px;
    padding: 0;
    align-items: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
    gap: 8px;
}

body.career-mode-form-page .career-registration-form .job-posting-choice-group {
    gap: 16px;
}

body.career-mode-form-page .career-registration-form .job-posting-choice:has(input:checked) {
    border: 0;
    color: var(--career-ink);
}

body.career-mode-form-page .career-registration-form .job-posting-choice input,
body.career-mode-form-page .career-registration-form .job-posting-private-check input {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

/* 필요기술 입력과 입력된 기술 태그를 같은 라벨 행에 배치한다. */
body.career-mode-form-page .career-registration-tag-input {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
}

/* 근무지 선택과 주소 입력 폭을 피그마 기준으로 정의한다. */
body.career-mode-form-page .career-registration-form .job-posting-region-field {
    width: 612px;
    grid-template-columns: 80px 500px;
    gap: 32px;
}

body.career-mode-form-page .career-registration-form .job-posting-region-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body.career-mode-form-page .career-registration-form .job-posting-address-group {
    width: 500px;
    gap: 6px;
}

body.career-mode-form-page .career-registration-form .job-posting-address-search-row {
    grid-template-columns: 209px 90px;
    gap: 8px;
}

body.career-mode-form-page .career-registration-form .job-posting-address-detail-row {
    grid-template-columns: 1fr;
    gap: 6px;
}

body.career-mode-form-page .career-registration-form .job-posting-address-button {
    height: 36px;
    min-height: 36px;
    border-radius: var(--k-radius-md);
    font-size: 14px;
    font-weight: 500;
}

/* 담당자 연락처와 이메일 입력 폭을 피그마 기준으로 정의한다. */
body.career-mode-form-page .career-registration-form .job-posting-field.is-contact {
    width: 412px;
}

body.career-mode-form-page .career-registration-form .job-posting-field.is-contact-email {
    width: 600px;
    grid-template-columns: 80px 32px 240px 8px 240px;
    gap: 0;
}

body.career-mode-form-page .career-registration-form .job-posting-field.is-contact-email .job-posting-label {
    grid-column: 1;
}

body.career-mode-form-page .career-registration-form .job-posting-field.is-contact-email .form-control {
    grid-column: 3;
}

body.career-mode-form-page .career-registration-form .job-posting-field.is-contact-email .career-registration-email-domain {
    grid-column: 5;
}

body.career-mode-form-page .career-registration-form .job-posting-help {
    color: var(--career-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 공고 등록 전 법정 의무 안내를 입력 흐름과 구분되는 정보 표면으로 표시한다. */
.career-job-legal-notice {
    display: flex;
    margin-top: 8px;
    padding: 14px;
    flex-direction: column;
    gap: 6px;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
    color: var(--career-muted);
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 법정 의무 안내 제목을 주요 색상의 아이콘과 함께 강조한다. */
.career-job-legal-notice-title {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--career-ink);
    font-size: 13px;
    font-weight: 600;
}

.career-job-legal-notice-title i {
    color: var(--career-primary);
}

/* 법정 의무 안내 문장과 관련 링크를 한 흐름으로 배치한다. */
.career-job-legal-notice p {
    display: flex;
    margin: 0;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4px 8px;
}

/* 법정 의무 안내의 외부 링크와 모달 열기 행동을 동일한 텍스트 링크로 표시한다. */
.career-job-legal-notice a,
.career-job-legal-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--career-muted);
    font: inherit;
    font-weight: 600;
    line-height: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.career-job-legal-notice a:hover,
.career-job-legal-notice a:focus-visible,
.career-job-legal-link:hover,
.career-job-legal-link:focus-visible {
    color: var(--career-primary);
    outline: 0;
}

/* 채용 담당자 개인정보 동의와 공개 안내를 세로 흐름으로 구성한다. */
.career-job-contact-consent {
    display: flex;
    margin-top: 14px;
    flex-direction: column;
    gap: 12px;
}

/* 개인정보 동의 체크와 약관 링크를 한 행에 배치한다. */
.career-job-contact-consent-row,
.career-job-contact-consent-row label {
    display: flex;
    min-height: 20px;
    align-items: center;
    gap: 8px;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.career-job-contact-consent-row input[type="checkbox"] {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    margin: 0;
    accent-color: var(--career-primary);
}

.career-job-contact-consent-row strong {
    color: var(--ref-accent-orange);
}

.career-job-contact-consent-row a {
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.career-job-contact-consent-row a:hover,
.career-job-contact-consent-row a:focus-visible {
    color: var(--career-primary);
    outline: 0;
}

.career-job-contact-consent-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--k-text-gray);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.career-job-contact-consent-link:hover,
.career-job-contact-consent-link:focus-visible {
    color: var(--k-text-black);
}

/* 담당자 연락처 공개 조건을 보조 정보 표면으로 안내한다. */
.career-job-contact-notice {
    display: flex;
    min-height: 52px;
    margin: 0;
    padding: 0 18px;
    align-items: center;
    gap: 8px;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
    color: var(--career-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

.career-job-contact-notice i {
    color: var(--career-muted);
}

/* 채용절차법 안내 모달을 화면 중앙에 배치한다. */
.career-job-law-modal-overlay {
    position: fixed;
    z-index: var(--k-z-modal);
    inset: 0;
    display: flex;
    padding: 16px;
    align-items: center;
    justify-content: center;
    background: var(--k-overlay-dark-50);
}

.career-job-law-modal-overlay[hidden] {
    display: none;
}

/* 채용절차법 안내 모달의 피그마 기준 너비와 내부 흐름을 정의한다. */
.career-job-law-modal {
    display: flex;
    width: min(100%, 650px);
    max-height: calc(100vh - 32px);
    padding: 32px 24px;
    flex-direction: column;
    gap: 24px;
    overflow: auto;
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    box-shadow: var(--k-shadow-modal);
}

.career-job-law-modal-header h2 {
    margin: 0;
    color: var(--career-ink);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 법정 의무와 행정처분 표가 좁은 화면에서도 내용을 유지하도록 감싼다. */
.career-job-law-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.career-job-law-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    color: var(--career-ink);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.career-job-law-table th,
.career-job-law-table td {
    height: 36px;
    padding: 7px 12px;
    border: 1px solid var(--career-border);
    vertical-align: middle;
}

.career-job-law-table th {
    background: var(--career-primary-soft);
    color: var(--career-primary);
    font-weight: 600;
    text-align: center;
}

.career-job-law-table th:last-child,
.career-job-law-table td:last-child {
    width: 36%;
    text-align: center;
}

/* 채용절차법 안내 모달의 확인 행동을 전체 폭으로 표시한다. */
.career-job-law-modal-footer .btn-freemode {
    width: 100%;
    min-height: 42px;
}

@media (max-width: 767px) {
    .career-job-contact-consent-row {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .career-job-law-modal {
        padding: 24px 18px;
    }
}

/* 프로젝트 상세과 제안 요청사항을 옅은 표면 안의 흰색 입력으로 정의한다. */
body.career-mode-form-page .career-registration-textarea-surface,
body.career-mode-company-settings-page .career-registration-form .company-profile-intro-body {
    height: 529px;
    margin-top: 24px;
    padding: 24px;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
}

body.career-mode-form-page .career-registration-textarea-surface .job-posting-large-textarea,
body.career-mode-company-settings-page .career-registration-form .company-profile-intro-body .work-request-public-profile-textarea {
    width: 100%;
    height: 481px;
    min-height: 481px;
    padding: 18px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    resize: none;
}

/* 프로젝트 상세 및 제안 요청사항 입력의 좌우 회색 여백을 피그마 기준으로 고정한다. */
body.career-mode-form-page .career-registration-textarea-surface {
    padding-right: 0;
    padding-left: 0;
}

body.career-mode-form-page .career-registration-textarea-surface .job-posting-large-textarea {
    width: calc(100% - var(--k-space-xl) - var(--k-space-xl));
    margin-right: auto;
    margin-left: auto;
}

body.career-biz-work-request-form-page .career-registration-textarea-surface.is-proposal-request,
body.career-mode-company-settings-page .career-registration-form .company-profile-intro-body {
    height: 229px;
}

body.career-biz-work-request-form-page .career-registration-textarea-surface.is-proposal-request .job-posting-large-textarea,
body.career-mode-company-settings-page .career-registration-form .company-profile-intro-body .work-request-public-profile-textarea {
    height: 181px;
    min-height: 181px;
}

/* 피그마 등록·기업 설정 화면의 하단 액션을 중앙에 배치한다. */
body.career-mode-form-page .career-registration-form .job-form-action-area,
body.career-mode-company-settings-page .career-registration-form .work-request-public-profile-actions {
    display: flex;
    margin: 0;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

body.career-mode-form-page .career-registration-form .job-form-action-primary {
    gap: 8px;
}

body.career-mode-form-page .career-registration-form .is-job-form-large,
body.career-mode-company-settings-page .career-registration-form .work-request-public-profile-actions .btn-freemode {
    width: auto;
    min-width: 103px;
    height: 52px;
    min-height: 52px;
    padding: 0 24px;
    border-radius: var(--k-radius-md);
    font-size: 16px;
    font-weight: 600;
}

/* 기업 정보 설정 화면의 로고, 기본 정보와 공개 스위치를 피그마 규격으로 정의한다. */
body.career-mode-company-settings-page .career-registration-form .company-profile-logo-row {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    padding: 24px 0 0;
    align-items: center;
    gap: 32px;
}

body.career-mode-company-settings-page .career-registration-form .company-profile-logo-preview {
    width: 200px;
    height: 80px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
}

body.career-mode-company-settings-page .career-registration-form .company-profile-logo-actions {
    gap: 12px;
}

body.career-mode-company-settings-page .career-registration-form .company-profile-logo-help {
    color: var(--career-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

body.career-mode-company-settings-page .career-registration-form .company-profile-logo-buttons .btn-freemode {
    height: 36px;
    min-height: 36px;
    padding: 0 16px;
    border-radius: var(--k-radius-md);
    font-size: 14px;
    font-weight: 500;
}

body.career-mode-company-settings-page .career-registration-form .company-profile-form-row {
    display: grid;
    width: 412px;
    min-height: 36px;
    grid-template-columns: 80px 300px;
    align-items: center;
    gap: 32px;
}

/* 기업 프로필의 공고 자동입력용 담당자 행을 피그마 정보 구조에 맞춘다. */
body.career-mode-company-settings-page .career-registration-form .company-profile-contact-phone-row {
    width: 100%;
    grid-template-columns: 80px 300px minmax(0, 1fr);
}

body.career-mode-company-settings-page .career-registration-form .company-profile-contact-help {
    display: flex;
    margin: 0;
    align-items: center;
    gap: 8px;
    color: var(--career-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

body.career-mode-company-settings-page .career-registration-form .company-profile-contact-help::before {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-radius: 50%;
    background: var(--career-muted);
    content: '';
}

body.career-mode-company-settings-page .career-registration-form .company-profile-contact-email-row {
    width: 600px;
    grid-template-columns: 80px 488px;
}

body.career-mode-company-settings-page .career-registration-form .company-profile-contact-email-fields {
    display: grid;
    width: 488px;
    grid-template-columns: 300px 180px;
    gap: 8px;
}

body.career-mode-company-settings-page .career-registration-form .company-profile-contact-email-domain {
    width: 180px;
}

body.career-mode-company-settings-page .career-registration-form .company-profile-contact-consent {
    margin-top: 0;
    padding: 10px 0;
}

body.career-mode-company-settings-page .career-registration-form .company-profile-form-row-inline {
    width: 600px;
    grid-template-columns: 80px 32px 300px 32px 56px 24px 76px;
    gap: 0;
}

body.career-mode-company-settings-page .career-registration-form .company-profile-form-row-inline > .label-freemode:first-child {
    grid-column: 1;
}

body.career-mode-company-settings-page .career-registration-form .company-profile-form-row-inline > .company-profile-select {
    grid-column: 3;
}

body.career-mode-company-settings-page .career-registration-form .company-profile-form-row-inline > .company-profile-worker-label {
    grid-column: 5;
}

body.career-mode-company-settings-page .career-registration-form .company-profile-form-row-inline > .company-profile-worker-field {
    grid-column: 7;
}

body.career-mode-company-settings-page .career-registration-form .company-profile-select,
body.career-mode-company-settings-page .career-registration-form .company-profile-date-input {
    width: 300px;
}

body.career-mode-company-settings-page .career-registration-form .company-profile-worker-label {
    justify-self: start;
}

body.career-mode-company-settings-page .career-registration-form .company-profile-worker-field {
    display: grid;
    width: 76px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

body.career-mode-company-settings-page .career-registration-form .company-profile-worker-input {
    width: 100%;
    min-width: 0;
    padding-right: 14px;
}

body.career-mode-company-settings-page .career-registration-form .company-profile-worker-field > span {
    position: static;
    color: var(--career-muted);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

body.career-mode-company-settings-page .career-registration-form .company-profile-form-row-address {
    width: 600px;
    grid-template-columns: 80px 488px;
}

body.career-mode-company-settings-page .career-registration-form .company-profile-address-group {
    width: 488px;
    gap: 6px;
}

/* 기업정보의 홈페이지 입력 끝선을 소재지와 근로자수 행에 맞춘다. */
body.career-mode-company-settings-page .career-registration-form .company-profile-form-row-wide {
    width: 600px;
    grid-template-columns: 80px 488px;
}

body.career-mode-company-settings-page .career-registration-form .career-company-public-toggle {
    min-height: 20px;
    gap: 6px;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
}

body.career-mode-company-settings-page .career-registration-form .career-company-public-toggle-track {
    width: 34px;
    height: 18px;
}

body.career-mode-company-settings-page .career-registration-form .career-company-public-toggle-track::after {
    top: 2px;
    left: 2px;
}

body.career-mode-company-settings-page .career-registration-form .career-company-public-toggle input:checked + .career-company-public-toggle-track::after {
    transform: translateX(16px);
}

/* 좁은 화면에서 피그마 폼의 고정 라벨 열과 컨트롤 폭을 해제한다. */
@media (max-width: 767px) {
    body.career-mode-form-page .career-registration-form,
    body.career-mode-company-settings-page .career-registration-form {
        padding-top: 28px;
        padding-bottom: 64px;
    }

    body.career-mode-form-page .career-registration-form .job-posting-field,
    body.career-mode-company-settings-page .career-registration-form .company-profile-form-row,
    body.career-mode-company-settings-page .career-registration-form .company-profile-form-row-inline,
    body.career-mode-company-settings-page .career-registration-form .company-profile-form-row-address,
    body.career-mode-company-settings-page .career-registration-form .company-profile-contact-phone-row,
    body.career-mode-company-settings-page .career-registration-form .company-profile-contact-email-row {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body.career-mode-company-settings-page .career-registration-form .company-profile-form-row-inline > .label-freemode:first-child,
    body.career-mode-company-settings-page .career-registration-form .company-profile-form-row-inline > .company-profile-select,
    body.career-mode-company-settings-page .career-registration-form .company-profile-form-row-inline > .company-profile-worker-label,
    body.career-mode-company-settings-page .career-registration-form .company-profile-form-row-inline > .company-profile-worker-field {
        grid-column: auto;
    }

    body.career-mode-company-settings-page .career-registration-form .company-profile-worker-field,
    body.career-mode-company-settings-page .career-registration-form .company-profile-worker-input {
        width: 100%;
    }

    body.career-mode-form-page .career-registration-form .job-posting-field.is-work-time,
    body.career-mode-form-page .career-registration-form .job-posting-field.is-contact-email {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body.career-mode-form-page .career-registration-form .job-posting-field.is-work-time .job-posting-label,
    body.career-mode-form-page .career-registration-form .job-posting-field.is-work-time .select-freemode,
    body.career-mode-form-page .career-registration-form .job-posting-field.is-work-time .form-control,
    body.career-mode-form-page .career-registration-form .job-posting-field.is-contact-email .job-posting-label,
    body.career-mode-form-page .career-registration-form .job-posting-field.is-contact-email .form-control,
    body.career-mode-form-page .career-registration-form .job-posting-field.is-contact-email .career-registration-email-domain {
        grid-column: auto;
    }

    body.career-mode-form-page .career-registration-form .career-job-category-selects,
    body.career-mode-form-page .career-registration-form .job-posting-date-range,
    body.career-mode-form-page .career-registration-form .job-posting-region-controls,
    body.career-mode-form-page .career-registration-form .job-posting-address-group,
    body.career-mode-company-settings-page .career-registration-form .company-profile-address-group {
        width: 100%;
    }

    body.career-mode-company-settings-page .career-registration-form .company-profile-contact-email-fields {
        width: 100%;
        grid-template-columns: 1fr;
    }

    body.career-mode-company-settings-page .career-registration-form .company-profile-contact-email-domain {
        width: 100%;
    }

    body.career-mode-company-settings-page .career-registration-form .company-profile-logo-row {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   알림 센터
   ========================================================= */

/* 알림 센터의 목록 영역을 페이지 제목 바로 아래에 배치한다. */
body.career-notification-page .career-notification-section {
    margin-top: 0;
}

/* 알림 센터의 유형 필터와 전체 건수 및 읽음 상태 필터를 한 행에 정렬한다. */
body.career-notification-page .career-notification-toolbar {
    margin-bottom: 16px;
}

/* 알림 목록의 외곽선과 모서리 라운드를 제거한다. */
body.career-notification-page .career-notification-list {
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: var(--career-white);
}

/* 알림 한 건의 유형과 내용을 가로로 정렬한다. */
body.career-notification-page .career-notification-item {
    display: grid;
    width: 100%;
    min-height: 88px;
    padding: 16px 24px;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    border: 1px solid var(--career-border);
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    background: var(--career-white);
    color: var(--career-ink);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: var(--k-transition-fast);
}

/* 인접한 알림 항목의 위아래 외곽선을 겹쳐 한 줄로 표시한다. */
body.career-notification-page .career-notification-item + .career-notification-item {
    margin-top: -1px;
}

/* 읽지 않은 알림을 낮은 주요 색상 배경으로 구분한다. */
body.career-notification-page .career-notification-item.is-unread {
    background: var(--career-primary-soft);
}

/* 알림 항목의 탐색 상태를 공통 주요 색상으로 표시한다. */
body.career-notification-page .career-notification-item:hover,
body.career-notification-page .career-notification-item:focus-visible {
    position: relative;
    z-index: 1;
    outline: 0;
    border-top-color: var(--career-primary);
    border-bottom-color: var(--career-primary);
    background: var(--career-surface);
}

/* 알림 수신일과 본문을 세로 정보 구조로 배치한다. */
body.career-notification-page .career-notification-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 9px;
}

/* 알림 유형을 공통 중립 배지 형태로 표시한다. */
body.career-notification-page .career-notification-type-badge {
    display: inline-flex;
    min-height: 22px;
    padding: 0 9px;
    align-items: center;
    justify-content: center;
    border-radius: var(--k-radius-pill);
    background: var(--career-surface);
    color: var(--career-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    min-width: 58px;
}

/* 읽지 않은 알림의 유형 배지는 흰색 표면으로 분리한다. */
body.career-notification-page .career-notification-item.is-unread .career-notification-type-badge {
    background: var(--career-white);
    color: var(--career-primary);
}

/* 알림 수신일을 보조 정보 위계로 표시한다. */
body.career-notification-page .career-notification-date {
    color: var(--career-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

/* 알림 본문을 목록의 주요 정보로 표시한다. */
body.career-notification-page .career-notification-message {
    min-width: 0;
    color: var(--career-ink);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.02em;
    word-break: keep-all;
}

/* 읽지 않은 알림 본문의 위계를 한 단계 강조한다. */
body.career-notification-page .career-notification-item.is-unread .career-notification-message {
    font-weight: 500;
}

/* 알림 본문 내 발신자 이름을 굵게 표시한다. */
body.career-notification-page .notification-sender-highlight {
    color: var(--career-ink);
    font-weight: 700;
}

/* 알림의 로딩·빈 목록·오류 상태를 패널 중앙에 배치한다. */
body.career-notification-page .career-notification-empty-state {
    display: flex;
    min-height: 280px;
    padding: 48px 24px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* 알림 목록 상태 아이콘을 중립 원형 배경으로 표시한다. */
body.career-notification-page .career-notification-empty-icon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    align-items: center;
    justify-content: center;
    border-radius: var(--k-radius-pill);
    background: var(--career-surface);
    color: var(--career-muted);
    font-size: 17px;
}

/* 알림 목록 상태 제목을 본문 제목 위계로 표시한다. */
body.career-notification-page .career-notification-empty-state strong {
    color: var(--career-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

/* 알림 목록 상태 설명을 보조 문구로 표시한다. */
body.career-notification-page .career-notification-empty-state p {
    margin: 8px 0 0;
    color: var(--career-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* 알림 목록과 페이지네이션 사이의 간격을 정의한다. */
body.career-notification-page .career-notification-list + .job-pagination {
    margin-top: 36px;
}

/* 모바일에서 알림 센터 필터와 목록 여백을 축소한다. */
@media (max-width: 767px) {
    body.career-notification-page .career-notification-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
    }

    body.career-notification-page .career-project-result-controls {
        width: 100%;
        justify-content: flex-end;
    }

    body.career-notification-page .career-notification-item {
        min-height: 104px;
        padding: 18px 16px;
        grid-template-columns: max-content minmax(0, 1fr);
        align-items: flex-start;
        gap: 12px;
    }

    body.career-notification-page .career-notification-message {
        font-size: 14px;
        word-break: break-word;
    }
}

/* =========================================================
   자격증 추가 모달
   ========================================================= */

/* 외부 카탈로그 검색 입력과 결과 목록의 위치 기준을 정의한다. */
body.career-mode-page .career-autocomplete {
    position: relative;
    width: 100%;
}

/* 자동완성 결과를 입력 바로 아래의 공통 드롭다운 표면으로 표시한다. */
body.career-mode-page .career-autocomplete-list {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 20;
    max-height: 240px;
    padding: 6px;
    border: var(--k-border-thin);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    box-shadow: var(--k-shadow-soft);
    overflow-y: auto;
}

/* hidden 속성이 설정된 자동완성 결과는 화면에서 제거한다. */
body.career-mode-page .career-autocomplete-list[hidden] {
    display: none;
}

/* 자동완성 결과 한 건의 이름, 기관, 구분 정보를 정렬한다. */
body.career-mode-page .career-autocomplete-option {
    display: flex;
    width: 100%;
    padding: 10px 12px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    border-radius: var(--k-radius-sm);
    background: transparent;
    color: var(--career-ink);
    text-align: left;
    cursor: pointer;
}

/* 마우스와 키보드로 가리킨 자동완성 결과를 공통 선택 표면으로 강조한다. */
body.career-mode-page .career-autocomplete-option:hover,
body.career-mode-page .career-autocomplete-option.is-active {
    background: var(--career-surface);
}

/* 자동완성 결과의 자격명과 발행기관을 세로로 배치한다. */
body.career-mode-page .career-autocomplete-option-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

/* 자동완성 결과의 자격명을 한 줄로 표시한다. */
body.career-mode-page .career-autocomplete-option-copy strong {
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 자동완성 결과의 발행기관을 보조 정보로 표시한다. */
body.career-mode-page .career-autocomplete-option-copy span {
    overflow: hidden;
    color: var(--career-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 자동완성 결과의 국가·민간 구분을 작은 보조 표식으로 표시한다. */
body.career-mode-page .career-autocomplete-option em {
    flex: 0 0 auto;
    color: var(--career-primary);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}

/* 자동완성 조회 상태 문구를 입력 아래에 표시한다. */
body.career-mode-page .career-autocomplete-status {
    margin: 6px 0 0;
    color: var(--career-muted);
    font-size: 12px;
    line-height: 1.4;
}

/* 빈 자동완성 조회 상태 문구는 레이아웃에서 제거한다. */
body.career-mode-page .career-autocomplete-status:empty {
    display: none;
}

/* 커리어모드 자격증 추가 모달은 호출 전 숨김 상태를 유지한다. */
body.career-mode-profile-page .talent-certificate-modal-overlay {
    display: none;
    padding: 24px;
    background: var(--k-overlay-dark-40);
}

/* 커리어모드 자격증 추가 모달의 열린 상태를 정의한다. */
body.career-mode-profile-page .talent-certificate-modal-overlay.is-open {
    display: flex;
}

/* 커리어모드 자격증 추가 모달의 크기와 표면을 정의한다. */
body.career-mode-profile-page .talent-certificate-modal {
    width: min(400px, 100%);
    height: 502px;
    max-width: 400px;
    box-sizing: border-box;
    padding: 32px 24px;
    border: 0;
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    box-shadow: var(--k-shadow-soft);
    overflow: hidden;
}

/* 커리어모드 자격증 추가 모달의 머리말 여백을 정의한다. */
body.career-mode-profile-page .talent-certificate-modal .modal-header {
    padding: 0;
    border: 0;
}

/* 커리어모드 자격증 추가 모달 제목을 정의한다. */
body.career-mode-profile-page .talent-certificate-modal .modal-title {
    color: var(--career-ink);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 커리어모드 자격증 추가 모달 입력 영역 간격을 정의한다. */
body.career-mode-profile-page .talent-certificate-modal-body {
    display: grid;
    flex: 0 0 auto;
    gap: 32px;
    padding: 0;
    overflow: visible;
}

/* 커리어모드 자격증 추가 모달 필드의 중복 하단 여백을 제거한다. */
body.career-mode-profile-page .talent-certificate-modal-body .form-group {
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* 커리어모드 자격증 추가 모달 라벨을 피그마 타이포그래피로 정의한다. */
body.career-mode-profile-page .talent-certificate-modal-body .form-label {
    color: var(--career-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 커리어모드 자격증 추가 모달 입력 요소를 공통 입력 스타일로 정의한다. */
body.career-mode-profile-page .talent-certificate-modal-body .input-freemode {
    width: 100%;
    height: 36px;
    min-height: 36px;
    padding: 0 14px;
    border-color: var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 커리어모드 자격증 추가 모달 입력 안내 문구 색상을 정의한다. */
body.career-mode-profile-page .talent-certificate-modal-body .input-freemode::placeholder {
    color: var(--career-muted);
    opacity: 1;
}

/* 커리어모드 자격증 추가 모달 날짜 입력 영역을 전체 폭으로 정의한다. */
body.career-mode-profile-page .talent-certificate-modal-body .job-posting-date-input-wrap {
    display: block;
    width: 100%;
}

/* 커리어모드 자격증 추가 모달 달력 아이콘을 피그마 크기와 명도로 정의한다. */
body.career-mode-profile-page .talent-certificate-modal-body .job-posting-date-icon {
    right: 14px;
    color: var(--career-ink);
    font-size: 16px;
    opacity: 0.3;
}

/* 커리어모드 자격증 추가 모달 하단 액션을 같은 폭으로 배치한다. */
body.career-mode-profile-page .talent-certificate-modal-actions {
    display: grid;
    margin-top: 52px;
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

/* 커리어모드 자격증 추가 모달 버튼을 전체 폭으로 정의한다. */
body.career-mode-profile-page .talent-certificate-modal-actions .btn-freemode {
    width: 100%;
    height: 42px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: var(--k-radius-md);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 커리어모드 프로젝트 경력 동적 라벨의 크기를 공통화한다. */
body.career-mode-profile-page .talent-profile-project-label {
    font-size: 14px;
}

/* 커리어모드 프로젝트 경력 장문 라벨의 상단 정렬 여백을 정의한다. */
body.career-mode-profile-page .talent-profile-project-label.is-top-aligned {
    padding-top: 12px;
}

/* 커리어모드 프로필 자격증 입력 행을 피그마 열 너비로 배치한다. */
body.career-mode-profile-page .talent-profile-certificate-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 90px 39px;
    align-items: center;
    gap: 8px;
}

/* 커리어모드 프로필 자격증 입력 요소를 옅은 표면으로 표시한다. */
body.career-mode-profile-page .talent-profile-certificate-row .input-freemode {
    width: 100%;
    height: 36px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
}

/* 커리어모드 프로필 자격증 삭제 버튼을 아이콘 버튼으로 표시한다. */
body.career-mode-profile-page .talent-profile-certificate-delete-btn {
    width: 39px;
    min-width: 39px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
    color: var(--career-ink);
    font-size: 11px;
}

/* 커리어모드 프로필 근무경력 목록을 카드 간격으로 배치한다. */
body.career-mode-profile-page .talent-profile-career-list {
    gap: 24px;
}

/* 커리어모드 프로필 근무경력 카드를 피그마 표면과 내부 간격으로 정의한다. */
body.career-mode-profile-page .talent-profile-career-card {
    position: relative;
    display: flex;
    width: 100%;
    padding: 24px;
    flex-direction: column;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
    gap: 14px;
}

/* 커리어모드 프로필 근무경력 입력 행을 80px 라벨 기준으로 정렬한다. */
body.career-mode-profile-page .talent-profile-career-row {
    display: grid;
    min-height: 36px;
    grid-template-columns: 80px minmax(0, 1fr);
    align-items: center;
    gap: 32px;
}

body.career-mode-profile-page .talent-profile-career-label {
    margin: 0;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

/* 커리어모드 프로필 근무경력 회사명과 직책을 같은 폭으로 배치한다. */
body.career-mode-profile-page .talent-profile-career-pair {
    display: grid;
    width: 608px;
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body.career-mode-profile-page .talent-profile-career-row > .input-freemode,
body.career-mode-profile-page .talent-profile-career-pair .input-freemode,
body.career-mode-profile-page .talent-profile-career-pair .select-freemode,
body.career-mode-profile-page .talent-profile-career-row .talent-profile-date-field .input-freemode {
    height: 36px;
    min-height: 36px;
    padding: 0 14px;
    border-color: var(--career-border);
    border-radius: var(--k-radius-md);
    background-color: var(--career-white);
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
}

body.career-mode-profile-page .talent-profile-career-row > .input-freemode {
    width: 608px;
    max-width: 100%;
}

/* 커리어모드 프로필 근무경력 삭제 버튼을 카드 우측 상단에 배치한다. */
body.career-mode-profile-page .talent-profile-career-delete {
    position: absolute;
    top: 24px;
    right: 24px;
    display: inline-flex;
    width: 36px;
    height: 36px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    color: var(--career-muted);
    font-size: 11px;
    cursor: pointer;
}

/* 커리어모드 프로필 프로젝트 경력 카드를 피그마 표면과 내부 간격으로 정의한다. */
body.career-mode-profile-page .talent-profile-project-card {
    display: flex;
    width: 100%;
    height: 500px;
    padding: 24px;
    flex-direction: column;
    gap: 32px;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
}

/* 커리어모드 프로필 프로젝트명과 기간 입력 행을 세로로 배치한다. */
body.career-mode-profile-page .talent-profile-project-fields {
    display: flex;
    height: 86px;
    flex-direction: column;
    gap: 14px;
}

/* 커리어모드 프로필 프로젝트 입력 행을 80px 라벨 기준으로 정렬한다. */
body.career-mode-profile-page .talent-profile-project-row {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    min-height: 36px;
    margin: 0;
    align-items: center;
    gap: 32px;
}

body.career-mode-profile-page .talent-profile-project-row .input-freemode {
    width: 100%;
    height: 36px;
    min-height: 36px;
    padding: 0 14px;
    border-color: var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
}

/* 커리어모드 프로필 프로젝트 라벨을 본문 입력 위계로 정의한다. */
body.career-mode-profile-page .talent-profile-project-label {
    margin: 0;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

/* 커리어모드 프로필 프로젝트 기간 입력 묶음의 폭을 정의한다. */
body.career-mode-profile-page .talent-profile-date-range {
    display: grid;
    width: 500px;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

/* 커리어모드 프로필 프로젝트 담당업무 및 내용을 라벨 위·입력 아래로 배치한다. */
body.career-mode-profile-page .talent-profile-project-row.is-description {
    display: flex;
    height: 334px;
    min-height: 334px;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
}

body.career-mode-profile-page .talent-profile-project-row.is-description .talent-profile-project-textarea {
    width: 100%;
    height: 300px;
    min-height: 300px;
    padding: 18px;
    resize: none;
}

/* 커리어모드 프로필 취소 버튼을 주요 색상 외곽선으로 표시한다. */
body.career-mode-profile-page .talent-profile-page-actions .btn-freemode.is-line {
    border: 1.5px solid var(--career-primary);
    background: var(--career-white);
    color: var(--career-primary);
}

/* =========================================================
   기존 화면 우선순위 보정
   ========================================================= */

/* 커리어모드 상세 지원 버튼의 기존 강조색을 주요 색상으로 교체한다. */
body.career-mode-page .job-posting-detail-page #detailApplyShortcutBtn {
    border-color: var(--career-primary);
    background: var(--career-primary);
    color: var(--career-white);
}

/* 커리어모드 목록의 선택 직군 하단선을 주요 색상으로 고정한다. */
body.career-mode-list-page .job-list-page .job-category-tab.active,
body.career-mode-list-page .work-request-page.work-request-view-page .job-category-tab.active {
    border-bottom-color: var(--career-primary);
}

/* 커리어모드 목록의 선택 필터 칩을 보라색 보조 표면으로 정의한다. */
body.career-mode-list-page .job-list-page .filter-chip.active,
body.career-mode-list-page .work-request-page .filter-chip.active {
    border-color: var(--career-primary);
    background: var(--career-primary-soft);
    color: var(--career-primary);
}

/* =========================================================
   반응형
   ========================================================= */

/* 태블릿에서 커리어모드 헤더와 카드 열을 축소한다. */
@media (max-width: 1023px) {
    .job-header-shell--career .job-header-nav-wrap {
        margin-left: 28px;
    }

    .job-header-shell--career .job-header-nav {
        gap: 22px;
    }

    body.career-project-search-page .career-project-category-tab,
    body.career-biz-list-page .career-biz-talent-list-page .career-project-category-tab {
        padding: 0 14px;
    }

    body.career-project-search-page .career-project-detail-group {
        gap: 14px 22px;
    }

    body.career-mode-page .job-list-desktop .job-list-row {
        grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1.8fr) minmax(160px, 1fr);
    }

    body.career-mode-page .job-list-desktop .job-list-period-col {
        display: none;
    }

    body.career-mode-page .work-request-list-row-card {
        grid-template-columns: minmax(0, 1fr) 200px;
    }

    body.career-mode-page .work-request-list-row-deadline {
        display: none;
    }

    body.career-mode-page .requester-profile-info-grid,
    body.career-mode-company-page .company-profile-info-panel {
        grid-template-columns: 1fr;
    }

    body.career-mode-home-page .recruit-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

/* 모바일에서 커리어모드 화면을 단일 열 구조로 전환한다. */
@media (max-width: 767px) {
    body.career-mode-page .job-board-wrapper,
    body.career-mode-page .job-detail-wrapper {
        width: calc(100% - 32px);
    }

    .job-header-shell--career .job-header-inner {
        width: calc(100% - 32px);
        height: auto;
        min-height: var(--header-height);
        padding: 12px 0;
        flex-wrap: wrap;
        gap: 10px;
    }

    .job-header-shell--career .job-header-brand {
        flex: 1;
    }

    .job-header-shell--career .job-header-logo {
        font-size: 17px;
    }

    .job-header-shell--career .job-header-logo img {
        width: 34px;
        height: 34px;
    }

    .job-header-shell--career .job-header-nav-wrap {
        order: 3;
        width: 100%;
        margin: 0;
    }

    .job-header-shell--career .job-header-nav {
        min-height: 42px;
        gap: 24px;
        overflow-x: auto;
    }

    .job-header-shell--career .job-header-nav-tab {
        min-height: 42px;
        font-size: 13px;
        white-space: nowrap;
    }

    body.career-mode-page .job-list-page,
    body.career-mode-page .work-request-list-shell,
    body.career-project-search-page .career-project-search-shell,
    body.career-mode-page .job-detail-wrapper.job-posting-detail-page,
    body.career-mode-profile-page .job-board-wrapper,
    body.career-mode-company-page .company-profile-page {
        padding-top: 28px;
        padding-bottom: 64px;
    }

    body.career-mode-page .job-search-section,
    body.career-mode-page .job-search-control-row,
    body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-detail-header-main,
    body.career-mode-profile-page .talent-profile-form-header {
        align-items: stretch;
        flex-direction: column;
    }

    body.career-mode-page .job-search-control-row {
        width: 100%;
        margin-left: 0;
    }

    body.career-mode-page .job-search-box,
    body.career-mode-page .work-request-search-box {
        flex: 1;
    }

    body.career-mode-page .job-category-tab {
        padding: 0 14px;
    }

    body.career-project-search-page .career-project-category-tab,
    body.career-biz-list-page .career-biz-talent-list-page .career-project-category-tab {
        padding: 0 12px;
    }

    body.career-project-search-page .career-project-detail-panel {
        grid-template-columns: 1fr;
    }

    body.career-project-search-page .career-project-detail-label {
        padding: 14px 18px;
        justify-content: flex-start;
    }

    body.career-project-search-page .career-project-detail-groups {
        padding: 18px;
    }

    body.career-project-search-page .career-project-list-section {
        margin-top: 32px;
    }

    body.career-project-search-page .career-project-list-toolbar,
    body.career-biz-list-page .career-biz-talent-list-page .career-project-list-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
    }

    body.career-project-search-page .career-project-type-tabs {
        overflow-x: auto;
    }

    body.career-project-search-page .career-project-result-controls,
    body.career-biz-list-page .career-biz-talent-list-page .career-project-result-controls {
        justify-content: space-between;
    }

    body.career-project-search-page .career-project-list-card {
        min-height: 0;
        padding: 20px;
    }

    body.career-project-search-page .career-project-card-title {
        margin-right: 0;
        font-size: 17px;
    }

    body.career-project-search-page .career-project-card-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    body.career-project-search-page .career-project-card-meta span + span::before {
        display: none;
    }

    body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-detail-info-grid,
    body.career-mode-page .job-detail-wrapper.job-posting-detail-page .requester-profile-info-grid,
    body.career-mode-company-page .company-profile-info-panel {
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-detail-title {
        font-size: 24px;
    }

    body.career-mode-page .work-request-detail-action-group {
        width: 100%;
        justify-content: stretch;
    }

    body.career-mode-page .job-posting-detail-page #detailBookmarkBtn,
    body.career-mode-page .job-posting-detail-page #detailApplyShortcutBtn {
        min-width: 0;
        flex: 1;
    }

    body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-detail-content > .career-detail-summary-section,
    body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-detail-content > .job-detail-section:first-child {
        padding: 24px 20px;
    }

    body.career-mode-page .job-detail-wrapper.job-posting-detail-page .job-detail-info-row {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    body.career-mode-page .job-detail-wrapper.job-posting-detail-page .requester-profile-card,
    body.career-mode-company-page .company-profile-overview-card {
        grid-template-columns: 1fr;
    }

    body.career-mode-page .job-detail-wrapper.job-posting-detail-page #recruitContactSection .requester-profile-info-panel,
    body.career-mode-page .job-detail-wrapper.job-posting-detail-page #requestContactSection .requester-profile-info-panel {
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    body.career-mode-page .job-detail-wrapper.job-posting-detail-page #recruitContactSection .requester-profile-info-item,
    body.career-mode-page .job-detail-wrapper.job-posting-detail-page #requestContactSection .requester-profile-info-item {
        flex: 0 0 auto;
    }

    body.career-mode-company-page .company-profile-project-card {
        min-height: 0;
        padding: 22px 20px;
    }

    body.career-mode-company-page .company-profile-project-summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
        overflow: visible;
    }

    body.career-mode-company-page .company-profile-project-summary span {
        width: 100%;
        white-space: normal;
    }

    body.career-mode-company-page .company-profile-project-summary span + span::before,
    body.career-mode-company-page .company-profile-project-meta > span + span::before {
        display: none;
    }

    body.career-mode-page .work-request-report-modal,
    body.career-mode-page .work-request-detail-report-modal {
        padding: 24px;
    }

    body.career-mode-page .work-request-report-modal .contact-modal-textarea {
        min-height: 160px;
    }

    body.career-mode-profile-page .talent-profile-form-body,
    body.career-mode-profile-page .talent-profile-image-row {
        padding-right: 0;
        padding-left: 0;
    }

    body.career-mode-profile-page .talent-profile-form-row,
    body.career-mode-profile-page .talent-profile-inline-field,
    body.career-mode-profile-page .talent-profile-form-row.is-basic-pair {
        grid-template-columns: 1fr;
    }

    body.career-mode-page .work-request-report-reason-list {
        grid-template-columns: 1fr;
    }

    body.career-mode-home-page .recruit-home-main {
        padding-top: 32px;
    }

    body.career-mode-home-page .career-home-hero {
        min-height: 300px;
    }

    body.career-mode-home-page .career-home-hero-eyebrow {
        font-size: 20px;
    }

    body.career-mode-home-page .career-home-hero-title {
        font-size: 36px;
    }

    body.career-mode-home-page .career-home-promo strong {
        font-size: 20px;
        white-space: normal;
    }

    body.career-mode-home-page .recruit-card-grid {
        grid-template-columns: 1fr;
    }
}

/* 모바일에서 커리어모드 등록 폼의 고정 폭과 들여쓰기를 해제한다. */
@media (max-width: 767px) {
    body.career-mode-form-page .job-posting-form-page,
    body.career-mode-company-settings-page .company-profile-edit-form {
        padding-top: 28px;
        padding-bottom: 64px;
    }

    body.career-mode-form-page .job-posting-section-body,
    body.career-mode-company-settings-page .company-profile-form-body,
    body.career-mode-company-settings-page .company-profile-logo-row {
        padding-right: 0;
        padding-left: 0;
    }

    body.career-mode-form-page .career-job-check-offset {
        padding-left: 0;
    }

    body.career-mode-company-settings-page .career-company-public-toggle {
        align-self: flex-start;
    }

    body.career-mode-profile-page .talent-certificate-modal-overlay {
        padding: 16px;
    }
}

/* =========================================================
   설정 화면
   ========================================================= */

/* 설정 화면 본문에 스타일 가이드의 문서형 여백을 적용한다. */
body.career-mode-settings-page .career-settings-wrapper {
    flex: 1;
    padding-top: 32px;
    padding-bottom: 96px;
}

/* 설정 화면 헤더에 스크롤 위치와 관계없이 항상 그림자를 표시한다. */
body.career-mode-settings-page .job-header-shell--career .job-header {
    position: relative;
    z-index: var(--k-z-sticky);
    box-shadow: var(--k-shadow-soft);
}

/* 설정 화면 헤더 내부를 본문과 같은 전체 폭으로 배치하고 좌우 여백을 적용한다. */
body.career-mode-settings-page .job-header-shell--career .job-header-inner {
    width: 100%;
    max-width: none;
    padding-right: 24px;
    padding-left: 12px;
}

/* 설정 화면의 전체 콘텐츠 폭을 공통 본문 폭에 맞춘다. */
body.career-mode-settings-page .career-settings-page {
    width: 100%;
}

/* 설정 화면 제목 영역과 메뉴 사이 간격을 정의한다. */
body.career-mode-settings-page .career-settings-page-header {
    display: block !important;
    margin-bottom: 42px;
}

/* 설정 화면의 페이지 제목을 공통 제목 체계로 정의한다. */
body.career-mode-settings-page .setting-page-heading {
    margin: 0;
    color: var(--career-ink);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.35;
}

/* 설정 화면의 페이지 안내 문구를 정의한다. */
body.career-mode-settings-page .setting-page-description {
    margin: 10px 0 0;
    color: var(--career-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* 설정 화면을 좌측 메뉴와 우측 문서 영역으로 배치한다. */
body.career-mode-settings-page .setting-layout-freemode {
    display: grid;
    min-height: 0;
    height: auto;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 56px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: var(--career-white);
    box-shadow: none;
}

/* 설정 화면의 데스크톱 메뉴를 단순한 구분선 구조로 정의한다. */
body.career-mode-settings-page .setting-sidebar-freemode {
    display: block !important;
    width: auto;
    min-width: 0;
    height: fit-content;
    padding: 0 24px 0 0;
    overflow: visible;
    border-right: 1px solid var(--career-border);
    background: var(--career-white);
}

/* 설정 화면의 좌측 메뉴 제목을 표시한다. */
body.career-mode-settings-page .setting-sidebar-title {
    display: block;
    margin: 0 0 14px;
    padding: 0 14px;
    color: var(--career-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}

/* 설정 화면의 좌측 메뉴 항목 간격을 정의한다. */
body.career-mode-settings-page .setting-menu-freemode {
    gap: 4px;
}

/* 설정 화면의 좌측 메뉴 기본 상태를 정의한다. */
body.career-mode-settings-page .setting-menu-item-freemode {
    min-height: 42px;
    margin: 0;
    padding: 10px 14px;
    border-radius: var(--k-radius-md);
    color: var(--career-text);
    font-size: 14px;
    font-weight: 500;
}

/* 설정 화면의 좌측 메뉴 호버와 키보드 초점 상태를 정의한다. */
body.career-mode-settings-page .setting-menu-item-freemode:hover,
body.career-mode-settings-page .setting-menu-item-freemode:focus-visible {
    outline: 0;
    background: var(--career-surface);
    color: var(--career-ink);
}

/* 설정 화면의 선택된 좌측 메뉴를 주요 색상으로 표시한다. */
body.career-mode-settings-page .setting-menu-item-freemode.active {
    margin: 0;
    padding: 10px 14px;
    border: 0;
    border-radius: var(--k-radius-md);
    background: var(--career-primary-soft);
    color: var(--career-primary);
    font-weight: 700;
}

/* 설정 화면의 모바일 탭은 데스크톱에서 숨긴다. */
body.career-mode-settings-page .setting-mobile-tabs {
    display: none !important;
}

/* 설정 화면의 우측 콘텐츠를 문서형 흰색 표면으로 정의한다. */
body.career-mode-settings-page .setting-content-freemode {
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow: visible;
    background: var(--career-white);
}

/* 설정 화면의 선택된 섹션만 표시한다. */
body.career-mode-settings-page .setting-section-freemode {
    width: 100%;
    max-width: 900px;
    animation: fadeIn 0.2s ease;
}

/* 설정 화면의 콘텐츠 제목을 페이지 제목 체계에 맞춘다. */
body.career-mode-settings-page .setting-title-freemode {
    margin: 0;
    color: var(--career-ink);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.35;
}

/* 설정 화면의 콘텐츠 안내와 첫 섹션 사이 간격을 정의한다. */
body.career-mode-settings-page .setting-desc-freemode {
    margin: 10px 0 44px;
    color: var(--career-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* 설정 화면의 섹션 제목을 체크 아이콘과 구분선 패턴으로 정의한다. */
body.career-mode-settings-page .setting-page-title.section-title {
    min-height: 0;
    margin: 0 0 24px;
    padding: 0 0 18px;
    color: var(--career-ink);
    font-size: 16px;
    font-weight: 700;
}

/* 설정 화면의 반복 콘텐츠 섹션 간격을 정의한다. */
body.career-mode-settings-page .career-settings-content-section + .career-settings-content-section {
    margin-top: 56px;
}

/* 설정 화면의 기존 카드를 그림자 없는 문서 영역으로 변경한다. */
body.career-mode-settings-page .setting-content-freemode .card-freemode,
body.career-mode-settings-page .setting-content-freemode .card-freemode:hover {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}

/* 설정 화면의 폼 패널에서 기존 카드 내부 여백을 제거한다. */
body.career-mode-settings-page .career-settings-form-panel {
    margin: 0;
    padding: 0;
}

/* 설정 화면의 기본 폼을 한 줄 한 필드 구조로 정의한다. */
body.career-mode-settings-page .career-settings-form-panel .setting-form-grid {
    grid-template-columns: 1fr;
    gap: 0;
}

/* 설정 화면 폼의 라벨과 입력 시작점을 정렬한다. */
body.career-mode-settings-page .setting-content-freemode .form-group-freemode {
    display: grid;
    margin: 0 0 18px;
    grid-template-columns: 128px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
}

/* 설정 화면 폼 라벨의 기본 여백과 글자 체계를 정의한다. */
body.career-mode-settings-page .setting-content-freemode .label-freemode {
    margin: 0;
    color: var(--career-text);
    font-size: 14px;
    font-weight: 500;
}

/* 설정 화면의 짧은 입력 요소 폭을 참고 화면과 맞춘다. */
body.career-mode-settings-page .setting-content-freemode .form-group-freemode > .input-freemode,
body.career-mode-settings-page .setting-content-freemode .form-group-freemode > .select-freemode {
    width: min(100%, 460px);
}

/* 설정 화면의 읽기 전용 계정 정보를 보조 배경과 글자색으로 구분한다. */
body.career-mode-settings-page .setting-readonly-input {
    background: var(--career-surface);
    color: var(--career-muted);
}

/* 설정 화면의 우편번호 입력 폭을 고정한다. */
body.career-mode-settings-page .setting-zip-input {
    width: 150px;
    flex: 0 0 150px;
}

/* 설정 화면의 기본 주소와 상세 주소 사이 간격을 정의한다. */
body.career-mode-settings-page .setting-address-base-input {
    margin-bottom: 8px;
}

/* 설정 화면의 주소 입력 묶음을 입력 시작선에 맞춘다. */
body.career-mode-settings-page .career-settings-form-panel .form-group-freemode:has(#ibxCompanyZipCode) > :not(.label-freemode) {
    grid-column: 2;
    width: min(100%, 640px);
}

/* 설정 화면의 주소 검색 행을 한 줄로 배치한다. */
body.career-mode-settings-page .career-settings-form-panel .form-group-freemode:has(#ibxCompanyZipCode) .setting-input-row {
    margin: 0 0 8px;
}

/* 설정 화면의 기본 정보와 정산 섹션 사이 간격을 정의한다. */
body.career-mode-settings-page .setting-divider {
    height: 0;
    margin: 48px 0 0;
    background: transparent;
}

/* 설정 화면의 하단 저장 행동을 중앙에 배치한다. */
body.career-mode-settings-page .setting-form-actions {
    display: flex;
    margin-top: 48px;
    justify-content: center;
    gap: 10px;
}

/* 설정 화면 하단 주요 버튼의 최소 폭을 정의한다. */
body.career-mode-settings-page .setting-form-actions .btn-freemode {
    min-width: 96px;
}

/* 설정 화면의 알림 목록을 구분선 중심 구조로 정의한다. */
body.career-mode-settings-page .career-settings-list {
    border-bottom: 1px solid var(--career-border);
}

/* 설정 화면의 알림 항목을 한 줄 정보 구조로 정의한다. */
body.career-mode-settings-page .setting-content-freemode .career-settings-list-item {
    min-height: 76px;
    margin: 0;
    padding: 18px 4px;
    border-bottom: 1px solid var(--career-border);
}

/* 설정 화면의 마지막 알림 항목 구분선을 제거한다. */
body.career-mode-settings-page .career-settings-list-item:last-child {
    border-bottom: 0;
}

/* 설정 화면의 항목 제목을 본문보다 강조한다. */
body.career-mode-settings-page .setting-row-title {
    margin: 0 0 6px;
    color: var(--career-ink);
    font-size: 15px;
    font-weight: 600;
}

/* 설정 화면의 항목 설명 문구를 보조 색상으로 정의한다. */
body.career-mode-settings-page .setting-row-desc,
body.career-mode-settings-page .setting-help-text {
    color: var(--career-muted);
    line-height: 1.6;
}

/* 설정 화면의 토글 크기를 기업정보 참고 화면과 맞춘다. */
body.career-mode-settings-page .switch-freemode {
    width: 38px;
    height: 22px;
}

/* 설정 화면의 토글 트랙을 공통 테두리 색상으로 정의한다. */
body.career-mode-settings-page .slider-freemode {
    border-radius: var(--k-radius-pill);
    background: var(--career-border);
}

/* 설정 화면의 토글 손잡이 크기를 정의한다. */
body.career-mode-settings-page .slider-freemode::before {
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

/* 설정 화면의 토글 텍스트를 숨겨 간결한 형태로 유지한다. */
body.career-mode-settings-page .slider-freemode::after {
    display: none;
}

/* 설정 화면의 선택된 토글을 주요 색상으로 표시한다. */
body.career-mode-settings-page .switch-freemode input:checked + .slider-freemode {
    background: var(--career-primary);
}

/* 설정 화면의 선택된 토글 손잡이 위치를 정의한다. */
body.career-mode-settings-page .switch-freemode input:checked + .slider-freemode::before {
    transform: translateX(16px);
}

/* 설정 화면의 업로드 패널을 얇은 테두리 구조로 정의한다. */
body.career-mode-settings-page .setting-content-freemode .career-settings-upload-panel {
    margin: 0 0 24px;
    padding: 22px 24px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
}

/* 설정 화면의 업로드 아이콘을 주요 색상 표면으로 정의한다. */
body.career-mode-settings-page .contact-icon-box.blue {
    background: var(--career-primary-soft);
    color: var(--career-primary);
}

/* 설정 화면의 채용 승인 상태 아이콘과 안내 문구를 한 행에 배치한다. */
body.career-mode-settings-page .setting-status-header {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
}

/* 설정 화면의 채용 승인 상태 문구가 남은 폭을 사용하게 한다. */
body.career-mode-settings-page .setting-status-copy {
    min-width: 0;
}

/* 설정 화면의 상태 아이콘을 작은 상태 표면 안에 정렬한다. */
body.career-mode-settings-page .setting-status-visual {
    display: flex;
    width: 40px;
    height: 40px;
    margin: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--k-radius-md);
}

/* 설정 화면의 상태 아이콘 크기를 본문 위계에 맞춘다. */
body.career-mode-settings-page .setting-status-visual .icon-xl {
    font-size: 16px;
}

/* 설정 화면의 대기 상태 아이콘에 기존 경고 표면과 글자색을 적용한다. */
body.career-mode-settings-page .setting-status-visual.is-warning {
    background: var(--k-status-warning-bg);
    color: var(--k-status-warning-text);
}

/* 설정 화면의 반려 상태 아이콘에 기존 위험 표면과 글자색을 적용한다. */
body.career-mode-settings-page .setting-status-visual.is-danger {
    background: var(--k-status-danger-bg);
    color: var(--ref-accent-orange);
}

/* 설정 화면의 승인 완료 아이콘에 기존 성공 표면과 글자색을 적용한다. */
body.career-mode-settings-page .setting-status-visual.is-success {
    background: var(--k-status-success-bg);
    color: var(--ref-accent-green);
}

/* 설정 화면의 상태 제목과 설명 사이 간격을 정의한다. */
body.career-mode-settings-page .setting-status-copy .setting-row-title {
    margin-bottom: 6px;
}

/* 설정 화면의 상태 설명 기본 여백을 제거한다. */
body.career-mode-settings-page .setting-status-description {
    margin: 0;
}

/* 설정 화면의 반려 사유 제목을 강조한다. */
body.career-mode-settings-page .setting-reject-title {
    margin: 0 0 5px;
    color: var(--ref-accent-orange);
    font-size: 14px;
    font-weight: 600;
}

/* 설정 화면의 반려 사유를 재승인 입력과 구분되는 읽기 영역으로 표시한다. */
body.career-mode-settings-page .setting-reject-reason {
    width: auto;
    margin: 20px 0 24px 56px;
    padding: 16px;
    border: 1px solid var(--career-border);
    border-left: 3px solid var(--ref-accent-orange);
    border-radius: var(--k-radius-md);
    background: var(--k-status-danger-bg);
    text-align: left;
}

/* 설정 화면의 반려 사유 줄바꿈과 긴 문자열을 안전하게 표시한다. */
body.career-mode-settings-page .setting-reject-description {
    margin: 0;
    color: var(--career-text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* 설정 화면의 재승인 신청 폼 폭과 정렬을 정의한다. */
body.career-mode-settings-page .setting-reapplication-form {
    width: auto;
    margin: 0 0 0 56px;
    padding-top: 20px;
    border-top: 1px solid var(--career-border);
    text-align: left;
}

/* 설정 화면의 재승인 증빙파일 영역과 하단 행동 사이 간격을 정의한다. */
body.career-mode-settings-page .setting-license-reupload {
    margin-bottom: 24px;
}

/* 재승인용 증빙파일 라벨을 파일 선택 행 위에 배치한다. */
body.career-mode-settings-page .setting-reapplication-file-label {
    display: block;
    margin-bottom: 10px;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 600;
}

/* 재승인용 파일 선택 버튼과 선택 파일명을 한 행에 배치한다. */
body.career-mode-settings-page .setting-reapplication-file-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 재승인용 선택 파일명을 말줄임 없이 읽을 수 있게 표시한다. */
body.career-mode-settings-page .setting-reapplication-file-name {
    min-width: 0;
    color: var(--career-text);
    font-size: 14px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* 재승인용 파일 제한 안내의 위쪽 간격을 정의한다. */
body.career-mode-settings-page .setting-reapplication-file-help {
    margin: 8px 0 0;
}

/* 설정 화면의 상태 행동을 입력 흐름의 오른쪽에 배치한다. */
body.career-mode-settings-page .setting-status-actions {
    display: flex;
    justify-content: flex-end;
    text-align: left;
}

/* 이용권 요금 카드를 최대 세 열의 동일한 구조로 배치한다. */
.career-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

/* 이용권 요금 카드를 테두리 중심의 세로 정보 구조로 정의한다. */
.career-pricing-card {
    display: flex;
    min-width: 0;
    min-height: 420px;
    padding: 24px;
    flex-direction: column;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
}

/* 추천 이용권 카드를 주요 색상 테두리로 강조한다. */
.career-pricing-card.is-recommended {
    border: 2px solid var(--career-primary);
}

/* 이용권 요금 카드의 상품명 영역을 정의한다. */
.career-pricing-card-heading {
    margin-bottom: 20px;
}

/* 이용권 요금 카드의 상품명을 카드 제목 위계로 표시한다. */
.career-pricing-card-heading h3 {
    margin: 0;
    color: var(--career-ink);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
}

/* 이용권 가격과 지급 횟수 및 추천 배지를 한 행에 배치한다. */
.career-pricing-card-price {
    display: flex;
    min-height: 42px;
    margin-bottom: 18px;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--career-ink);
}

/* 이용권 가격을 카드의 핵심 수치로 강조한다. */
.career-pricing-card-price strong {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

/* 이용권 지급 횟수를 가격의 보조 정보로 표시한다. */
.career-pricing-card-price > span {
    color: var(--career-text);
    font-size: 15px;
    font-weight: 500;
}

/* 추천 이용권 배지를 주요 색상 캡슐 형태로 표시한다. */
.career-pricing-card-price em {
    padding: 5px 9px;
    border-radius: var(--k-radius-pill);
    background: var(--career-primary);
    color: var(--career-white);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* 이용권 요금 카드의 설명을 보조 명도로 표시한다. */
.career-pricing-card-description {
    min-height: 44px;
    margin: 0 0 24px;
    color: var(--career-muted);
    font-size: 13px;
    line-height: 1.65;
}

/* 이용권 혜택을 세로 체크 목록으로 배치한다. */
.career-pricing-card-features {
    display: flex;
    margin: 0 0 28px;
    padding: 0;
    flex: 1;
    flex-direction: column;
    gap: 14px;
    list-style: none;
}

/* 이용권 혜택 항목의 체크 아이콘과 문구를 정렬한다. */
.career-pricing-card-features li {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 10px;
    color: var(--career-text);
    font-size: 13px;
    line-height: 1.5;
}

/* 이용권 혜택의 체크 아이콘을 주요 색상으로 표시한다. */
.career-pricing-card-features i {
    width: 14px;
    height: 14px;
    margin-top: 3px;
    flex: 0 0 14px;
    color: var(--career-primary);
    font-size: 11px;
    line-height: 14px;
    text-align: center;
}

/* 이용권 구매 행동을 카드 하단 전체 폭으로 정의한다. */
.career-pricing-purchase-button.btn-freemode {
    width: 100%;
    min-height: 44px;
}

/* 이용권 상품 조회 상태 문구를 요금 카드 영역 전체에 표시한다. */
.career-pricing-message {
    margin: 0;
    padding: 40px 20px;
    grid-column: 1 / -1;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    color: var(--career-muted);
    font-size: 14px;
    text-align: center;
}

/* 설정 화면의 회원 탈퇴 행동을 일반 저장 행동과 분리한다. */
body.career-mode-settings-page .career-settings-danger-zone {
    display: flex;
    margin-top: 56px;
    padding-top: 24px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-top: 1px solid var(--career-border);
}

/* 설정 화면 회원 탈퇴 제목을 정의한다. */
body.career-mode-settings-page .career-settings-danger-zone strong {
    color: var(--career-ink);
    font-size: 15px;
    font-weight: 600;
}

/* 설정 화면 회원 탈퇴 안내 문구를 정의한다. */
body.career-mode-settings-page .career-settings-danger-zone p {
    margin: 6px 0 0;
    color: var(--career-muted);
    font-size: 13px;
    line-height: 1.6;
}

/* 설정 화면 회원 탈퇴 링크의 밑줄을 제거한다. */
body.career-mode-settings-page .setting-account-withdraw-link {
    flex: 0 0 auto;
    text-decoration: none;
}

/* 데스크톱에서 설정 사이드바를 화면 왼쪽에 고정한다. */
@media (min-width: 1024px) {
    body.career-mode-settings-page .career-settings-wrapper {
        width: 100%;
        max-width: none;
        margin-right: 0;
        margin-left: 0;
    }

    body.career-mode-settings-page .career-settings-page {
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr);
        grid-template-rows: max-content minmax(0, auto);
        align-items: start;
        column-gap: 48px;
    }

    body.career-mode-settings-page .career-settings-page-header {
        grid-column: 2;
        grid-row: 1;
        max-width: 900px;
        padding-right: 48px;
        align-self: start;
    }

    body.career-mode-settings-page .setting-layout-freemode {
        display: contents;
    }

    body.career-mode-settings-page .setting-sidebar-freemode {
        position: sticky;
        top: calc(var(--header-height) + 24px);
        width: 220px;
        min-width: 220px;
        grid-column: 1;
        grid-row: 1 / span 2;
        min-height: 0;
        padding-right: 24px;
        padding-left: 24px;
        align-self: start;
        justify-self: start;
        border-right: 0;
    }

    /* 고정 사이드바의 세로 구분선이 그리드 높이 계산에 참여하지 않게 한다. */
    body.career-mode-settings-page .setting-sidebar-freemode::after {
        position: absolute;
        top: 0;
        right: 0;
        width: 1px;
        height: calc(100vh - var(--header-height) - 48px);
        background: var(--career-border);
        content: "";
        pointer-events: none;
    }

    body.career-mode-settings-page .setting-content-freemode {
        grid-column: 2;
        grid-row: 2;
        padding-right: 48px;
    }
}

/* 태블릿에서 설정 메뉴를 하단선 탭으로 전환한다. */
@media (max-width: 1023px) {
    body.career-mode-settings-page .career-settings-wrapper {
        padding-top: 32px;
    }

    body.career-mode-settings-page .career-settings-page-header {
        margin-bottom: 32px;
    }

    body.career-mode-settings-page .setting-mobile-tabs {
        display: flex !important;
        margin: 0 0 40px;
        padding: 0;
        gap: 0;
        overflow-x: auto;
        border-bottom: 1px solid var(--career-border);
    }

    body.career-mode-settings-page .setting-mobile-tab {
        position: relative;
        min-width: 112px;
        min-height: 46px;
        padding: 0 16px 12px;
        flex: 0 0 auto;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: var(--career-muted);
        font-size: 14px;
        font-weight: 500;
    }

    body.career-mode-settings-page .setting-mobile-tab:hover:not(.active),
    body.career-mode-settings-page .setting-mobile-tab:focus-visible {
        outline: 0;
        background: transparent;
        color: var(--career-ink);
        transform: none;
    }

    body.career-mode-settings-page .setting-mobile-tab.active {
        background: transparent;
        box-shadow: inset 0 -2px 0 var(--career-primary);
        color: var(--career-primary);
        font-weight: 700;
    }

    body.career-mode-settings-page .setting-layout-freemode {
        display: block;
    }

    body.career-mode-settings-page .setting-sidebar-freemode {
        display: none !important;
    }
}

/* 모바일에서 설정 폼과 행동을 단일 열로 배치한다. */
@media (max-width: 767px) {
    body.career-mode-settings-page .career-settings-wrapper {
        width: min(1260px, calc(100% - 32px));
        padding-top: 28px;
        padding-bottom: 64px;
    }

    body.career-mode-settings-page .career-settings-page,
    body.career-mode-settings-page .setting-content-freemode {
        padding: 0 !important;
    }

    body.career-mode-settings-page .setting-page-heading,
    body.career-mode-settings-page .setting-title-freemode {
        font-size: 24px !important;
    }

    body.career-mode-settings-page .setting-desc-freemode {
        margin-bottom: 36px !important;
    }

    body.career-mode-settings-page .setting-mobile-tabs {
        margin-right: -16px;
        margin-bottom: 32px;
        margin-left: -16px;
        padding-left: 16px;
    }

    body.career-mode-settings-page .setting-content-freemode .form-group-freemode {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    body.career-mode-settings-page .setting-content-freemode .form-group-freemode > .input-freemode,
    body.career-mode-settings-page .setting-content-freemode .form-group-freemode > .select-freemode,
    body.career-mode-settings-page .career-settings-form-panel .form-group-freemode:has(#ibxCompanyZipCode) > :not(.label-freemode) {
        width: 100%;
        grid-column: 1;
    }

    body.career-mode-settings-page .setting-input-row {
        align-items: stretch;
    }

    body.career-mode-settings-page .setting-content-freemode .career-settings-list-item {
        padding: 18px 4px !important;
        flex-direction: row !important;
    }

    body.career-mode-settings-page .career-settings-list-item .row-content {
        width: auto !important;
        flex: 1;
    }

    body.career-mode-settings-page .career-settings-list-item .row-action {
        width: auto !important;
        justify-content: flex-end;
    }

    body.career-mode-settings-page .setting-content-freemode .career-settings-upload-panel {
        padding: 20px !important;
    }

    body.career-mode-settings-page .setting-content-freemode .career-settings-status-panel {
        padding: 20px;
    }

    body.career-mode-settings-page .career-settings-danger-zone {
        align-items: flex-start;
        flex-direction: column;
    }

    body.career-mode-settings-page .setting-account-withdraw-link {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   관리형 설정 화면 카드 레이아웃
   ========================================================= */

/* 관리형 설정 화면 본문을 설정 카드가 놓이는 옅은 표면으로 정의한다. */
body.career-mode-settings-page .career-settings-wrapper {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: var(--career-surface);
}

/* 관리형 설정 화면의 바깥 컨테이너 폭을 전체 영역으로 확장한다. */
body.career-mode-settings-page .career-settings-page {
    display: block;
    width: 100%;
}

/* 관리형 설정 화면의 콘텐츠를 좌측 메뉴와 우측 본문으로 배치한다. */
body.career-mode-settings-page .setting-layout-freemode {
    display: grid;
    min-height: calc(100vh - var(--header-height));
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: var(--career-surface);
    box-shadow: none;
}

/* 관리형 설정 화면의 좌측 메뉴를 헤더 아래에 고정한다. */
body.career-mode-settings-page .setting-sidebar-freemode {
    position: sticky;
    top: var(--header-height);
    display: block !important;
    width: 260px;
    min-width: 260px;
    height: calc(100vh - var(--header-height));
    min-height: 0;
    padding: 32px 20px;
    overflow-y: auto;
    border-right: 1px solid var(--career-border);
    background: var(--career-white);
}

/* 이전 고정 사이드바 보정용 가상 구분선을 제거한다. */
body.career-mode-settings-page .setting-sidebar-freemode::after {
    display: none;
}

/* 관리형 설정 화면의 좌측 제목을 참고 화면 크기로 정의한다. */
body.career-mode-settings-page .setting-sidebar-title {
    display: block;
    margin: 0 0 24px;
    padding: 0 14px;
    color: var(--career-ink);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

/* 관리형 설정 화면의 우측 카드 배치 영역을 정의한다. */
body.career-mode-settings-page .setting-content-freemode {
    width: 100%;
    min-width: 0;
    min-height: calc(100vh - var(--header-height));
    padding: 32px 36px 96px;
    overflow: visible;
    background: var(--career-surface);
}

/* 관리형 설정 화면의 각 탭 내용을 단일 흰색 카드로 정의한다. */
body.career-mode-settings-page .setting-section-freemode {
    width: 100%;
    max-width: 760px;
    padding: 28px;
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    box-shadow: var(--k-shadow-soft);
    animation: fadeIn 0.2s ease;
}

/* 이용권 요금 카드가 데스크톱에서 세 열을 유지하도록 결제 설정 카드 폭을 확장한다. */
body.career-mode-settings-page #billing.setting-section-freemode {
    max-width: 1120px;
}

/* 관리형 설정 화면의 카드 제목을 정의한다. */
body.career-mode-settings-page .setting-title-freemode {
    margin: 0 0 28px;
    color: var(--career-ink);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

/* 관리형 설정 카드에서는 별도 페이지 설명을 노출하지 않는다. */
body.career-mode-settings-page .setting-desc-freemode {
    display: none;
}

/* 관리형 설정 카드 내부의 중첩 카드 장식을 제거한다. */
body.career-mode-settings-page .setting-content-freemode .card-freemode,
body.career-mode-settings-page .setting-content-freemode .card-freemode:hover {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
}

/* 관리형 설정 카드의 섹션 제목을 일반 텍스트 형태로 정의한다. */
body.career-mode-settings-page .setting-page-title {
    min-height: 0;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    color: var(--career-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}

/* 관리형 설정 카드의 2열 폼 구조를 정의한다. */
body.career-mode-settings-page .career-settings-form-panel .setting-form-grid.cols-2,
body.career-mode-settings-page .career-settings-form-panel .setting-form-grid.cols-1-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
}

/* 관리형 설정 카드의 단일 열 폼 구조를 정의한다. */
body.career-mode-settings-page .career-settings-form-panel .setting-form-grid.cols-1 {
    grid-template-columns: 1fr;
    gap: 0;
}

/* 관리형 설정 카드의 라벨과 입력값을 한 행에 정렬한다. */
body.career-mode-settings-page .setting-content-freemode .form-group-freemode {
    display: grid;
    margin: 0 0 12px;
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

/* 관리형 설정 카드의 라벨 글자 체계를 정의한다. */
body.career-mode-settings-page .setting-content-freemode .label-freemode {
    margin: 0;
    color: var(--career-muted);
    font-size: 13px;
    font-weight: 500;
}

/* 관리형 설정 카드의 입력 요소가 행의 남은 폭을 사용하게 한다. */
body.career-mode-settings-page .setting-content-freemode .form-group-freemode > .input-freemode,
body.career-mode-settings-page .setting-content-freemode .form-group-freemode > .select-freemode {
    width: 100%;
}

/* 관리형 설정 카드의 주소 입력 묶음을 전체 카드 폭으로 정의한다. */
body.career-mode-settings-page .career-settings-form-panel .form-group-freemode:has(#ibxCompanyZipCode) {
    grid-template-columns: 88px minmax(0, 1fr);
}

/* 관리형 설정 카드의 주소 입력 행을 입력 시작선에 맞춘다. */
body.career-mode-settings-page .career-settings-form-panel .form-group-freemode:has(#ibxCompanyZipCode) > :not(.label-freemode) {
    width: 100%;
    grid-column: 2;
}

/* 관리형 설정 카드의 우편번호 입력 폭을 정의한다. */
body.career-mode-settings-page .setting-zip-input {
    width: 220px;
    flex: 0 0 220px;
}

/* 관리형 설정 카드의 주요 정보 구획을 구분선으로 나눈다. */
body.career-mode-settings-page .setting-divider {
    height: 1px;
    margin: 32px 0;
    background: var(--career-border);
}

/* 관리형 설정 카드의 저장 행동을 우측 하단에 배치한다. */
body.career-mode-settings-page .setting-form-actions {
    display: flex;
    margin-top: 32px;
    justify-content: flex-end;
    gap: 10px;
}

/* 관리형 설정 카드의 알림 구획 사이를 구분선으로 나눈다. */
body.career-mode-settings-page .career-settings-content-section + .career-settings-content-section {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--career-border);
}

/* 관리형 설정 카드의 알림 목록 외곽선을 제거한다. */
body.career-mode-settings-page .career-settings-list {
    border-bottom: 0;
}

/* 관리형 설정 카드의 알림 항목을 제목과 토글 한 행으로 배치한다. */
body.career-mode-settings-page .setting-content-freemode .career-settings-list-item {
    min-height: 72px;
    margin: 0;
    padding: 18px 0;
    border-bottom: 1px solid var(--career-border);
}

/* 관리형 설정 카드의 첫 알림 항목 위쪽 여백을 제거한다. */
body.career-mode-settings-page .career-settings-list-item:first-child {
    padding-top: 0;
}

/* 관리형 설정 카드의 마지막 알림 항목 구분선을 제거한다. */
body.career-mode-settings-page .career-settings-list-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

/* 관리형 설정 카드의 업로드 영역을 얇은 테두리로 구분한다. */
body.career-mode-settings-page .setting-content-freemode .career-settings-upload-panel {
    margin: 0 0 24px;
    padding: 20px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
}

/* 관리형 설정 카드의 채용 승인 상태를 얇은 테두리 중심의 업무형 패널로 표시한다. */
body.career-mode-settings-page .setting-content-freemode .career-settings-status-panel,
body.career-mode-settings-page .setting-content-freemode .career-settings-status-panel:hover {
    margin: 0;
    padding: 24px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    text-align: left;
}

/* 관리형 설정 카드의 회원 탈퇴 영역을 카드 하단 구분선 아래에 배치한다. */
body.career-mode-settings-page .career-settings-danger-zone {
    margin-top: 32px;
    padding-top: 24px;
}

/* 설정 화면의 채용담당자 연락처와 인증 버튼을 한 행에 배치한다. */
body.career-mode-settings-page .recruit-contact-phone-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

/* 설정 화면의 채용담당자 연락처 인증 버튼 폭을 고정한다. */
body.career-mode-settings-page .recruit-contact-auth-btn {
    min-width: 88px;
    white-space: nowrap;
}

/* 설정 화면의 채용담당자 연락처 인증 상태를 입력 행 아래에 표시한다. */
body.career-mode-settings-page .recruit-contact-auth-status {
    margin: 0;
    grid-column: 1 / -1;
    color: var(--k-status-warning-text);
}

/* 설정 화면의 채용담당자 연락처 인증 완료 상태를 성공 색상으로 표시한다. */
body.career-mode-settings-page .recruit-contact-auth-status.is-verified {
    color: var(--ref-accent-green);
}

/* 설정 화면의 채용담당자 연락처 인증 안내문 간격을 정의한다. */
body.career-mode-settings-page .recruit-contact-auth-modal-desc {
    margin: 0 0 14px;
}

/* 설정 화면의 채용담당자 연락처 인증 안내 값을 표 형태로 정렬한다. */
body.career-mode-settings-page .recruit-contact-auth-guide {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 14px;
    border: var(--k-border-thin);
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
}

/* 설정 화면의 채용담당자 연락처 인증 안내 행을 좌우로 배치한다. */
body.career-mode-settings-page .recruit-contact-auth-guide > div {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

/* 설정 화면의 채용담당자 연락처 인증 안내 라벨을 정의한다. */
body.career-mode-settings-page .recruit-contact-auth-guide dt {
    color: var(--career-muted);
    font-size: 13px;
    font-weight: 600;
}

/* 설정 화면의 채용담당자 연락처 인증 안내 값을 강조한다. */
body.career-mode-settings-page .recruit-contact-auth-guide dd {
    margin: 0;
    color: var(--career-ink);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0;
}

/* 설정 화면의 채용담당자 연락처 인증 도움말 간격을 정의한다. */
body.career-mode-settings-page .recruit-contact-auth-help {
    margin-top: 10px;
}

/* 채용 메뉴의 하위 요약 항목을 상위 메뉴보다 안쪽에 배치한다. */
body.career-mode-settings-page .setting-menu-item-freemode.is-submenu,
body.career-mode-settings-page .setting-menu-item-freemode.is-submenu.active {
    padding-left: 30px;
    font-size: 13px;
}

/* 월별 채용 이용 현황 표를 좁은 화면에서 가로 스크롤할 수 있게 한다. */
body.career-mode-settings-page .career-recruitment-summary-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
}

/* 월별 채용 이용 현황 표의 기본 너비와 글자 체계를 정의한다. */
body.career-mode-settings-page .career-recruitment-summary-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    color: var(--career-text);
    font-size: 13px;
}

/* 월별 채용 이용 현황 표의 머리글과 데이터 셀 간격을 정의한다. */
body.career-mode-settings-page .career-recruitment-summary-table th,
body.career-mode-settings-page .career-recruitment-summary-table td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--career-border);
    text-align: right;
    white-space: nowrap;
}

/* 월별 채용 이용 현황 표의 머리글을 옅은 표면으로 구분한다. */
body.career-mode-settings-page .career-recruitment-summary-table thead th {
    background: var(--career-surface);
    color: var(--career-muted);
    font-weight: 600;
}

/* 월별 채용 이용 현황 표의 월 항목을 왼쪽 정렬한다. */
body.career-mode-settings-page .career-recruitment-summary-table th:first-child,
body.career-mode-settings-page .career-recruitment-summary-table td:first-child {
    text-align: left;
}

/* 월별 채용 이용 현황 표의 데이터 행 제목을 본문 굵기로 표시한다. */
body.career-mode-settings-page .career-recruitment-summary-table tbody th {
    color: var(--career-ink);
    font-weight: 500;
}

/* 월별 채용 이용 현황 표의 마지막 행 구분선을 제거한다. */
body.career-mode-settings-page .career-recruitment-summary-table tbody tr:last-child th,
body.career-mode-settings-page .career-recruitment-summary-table tbody tr:last-child td {
    border-bottom: 0;
}

/* 월별 채용 이용 현황의 로딩과 오류 안내를 중앙에 표시한다. */
body.career-mode-settings-page .career-recruitment-summary-table .career-recruitment-summary-message-row td {
    padding: 36px 16px;
    color: var(--career-muted);
    text-align: center;
}

/* Google Calendar 연동 서비스를 Figma 기준의 아이콘·설명·행동 구조로 배치한다. */
body.career-mode-settings-page .career-calendar-integration-row {
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
}

/* Google Calendar 아이콘과 서비스 설명을 한 행에 정렬한다. */
body.career-mode-settings-page .career-calendar-integration-content {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 24px;
}

/* Figma 원본과 동일한 Google Calendar 아이콘 크기를 유지한다. */
body.career-mode-settings-page .career-calendar-integration-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    object-fit: contain;
}

/* 연동 서비스의 제목·설명·계정 정보를 세로로 배치한다. */
body.career-mode-settings-page .career-calendar-integration-copy {
    min-width: 0;
}

/* 연동 서비스 제목과 설명 사이 간격을 Figma 기준으로 맞춘다. */
body.career-mode-settings-page .career-calendar-integration-copy .setting-row-title {
    margin-bottom: 8px;
}

/* 연결된 Google 계정을 서비스 설명 아래 보조 정보로 표시한다. */
body.career-mode-settings-page .career-calendar-integration-account {
    margin: 6px 0 0;
    color: var(--career-primary);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* 연동 상태와 서비스별 동기화 행동을 우측에 정렬한다. */
body.career-mode-settings-page .career-calendar-integration-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

/* 연동 서비스의 본문 구획을 공통 테두리 토큰으로 나눈다. */
body.career-mode-settings-page .career-calendar-integration-divider {
    width: 100%;
    height: 1px;
    margin: 20px 0;
    background: var(--career-border);
}

/* 준비 중인 다음 연동 서비스 영역의 최소 높이를 정의한다. */
body.career-mode-settings-page .career-calendar-integration-row.is-preparing {
    min-height: 48px;
}

/* Google Calendar 연결 상태 조회 오류를 보조 색상으로 표시한다. */
body.career-mode-settings-page .career-calendar-integration-error {
    max-width: 180px;
    color: var(--career-muted);
    font-size: 12px;
    line-height: 1.4;
    text-align: right;
}

/* 데스크톱에서는 좌측 메뉴 제목을 사용하므로 별도 상단 제목을 숨긴다. */
@media (min-width: 1024px) {
    body.career-mode-settings-page .career-settings-page-header {
        display: none !important;
    }
}

/* 태블릿 이하에서 설정 메뉴를 가로 탭과 전체 폭 카드로 전환한다. */
@media (max-width: 1023px) {
    body.career-mode-settings-page .career-settings-wrapper {
        padding: 32px 24px 72px;
    }

    body.career-mode-settings-page .career-settings-page-header {
        display: block !important;
        margin-bottom: 24px;
    }

    body.career-mode-settings-page .setting-layout-freemode {
        display: block;
        min-height: 0;
    }

    body.career-mode-settings-page .setting-content-freemode {
        min-height: 0;
        padding: 0 !important;
    }

    body.career-mode-settings-page .setting-section-freemode {
        max-width: 760px;
        margin-right: auto;
        margin-left: auto;
    }
}

/* 모바일에서 관리형 설정 카드의 폼과 알림을 단일 열로 배치한다. */
@media (max-width: 767px) {
    body.career-mode-settings-page .career-settings-wrapper {
        width: 100%;
        padding: 24px 16px 56px;
    }

    body.career-mode-settings-page .setting-section-freemode {
        padding: 20px;
    }

    body.career-mode-settings-page .career-settings-form-panel .setting-form-grid.cols-2,
    body.career-mode-settings-page .career-settings-form-panel .setting-form-grid.cols-1-2 {
        grid-template-columns: 1fr;
        gap: 0;
    }

    body.career-mode-settings-page .setting-content-freemode .form-group-freemode,
    body.career-mode-settings-page .career-settings-form-panel .form-group-freemode:has(#ibxCompanyZipCode) {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body.career-mode-settings-page .career-settings-form-panel .form-group-freemode:has(#ibxCompanyZipCode) > :not(.label-freemode) {
        grid-column: 1;
    }

    body.career-mode-settings-page .setting-zip-input {
        width: 100%;
        flex-basis: auto;
    }

    body.career-mode-settings-page .career-calendar-integration-row:not(.is-preparing) {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    body.career-mode-settings-page .career-calendar-integration-actions {
        width: 100%;
        justify-content: flex-start;
    }

    body.career-mode-settings-page .career-calendar-integration-error {
        max-width: none;
        text-align: left;
    }

    /* 모바일에서 채용담당자 연락처 입력과 인증 버튼을 세로로 배치한다. */
    body.career-mode-settings-page .recruit-contact-phone-field {
        grid-template-columns: 1fr;
    }

    /* 모바일에서 채용담당자 연락처 인증 버튼을 전체 폭으로 표시한다. */
    body.career-mode-settings-page .recruit-contact-auth-btn {
        width: 100%;
    }

    /* 모바일에서 재승인 파일 선택 요소와 제출 버튼을 전체 폭으로 배치한다. */
    body.career-mode-settings-page .setting-content-freemode .career-settings-status-panel {
        padding: 20px;
    }

    /* 모바일에서 반려 사유와 재승인 입력을 상태 패널 전체 폭으로 표시한다. */
    body.career-mode-settings-page .setting-reject-reason,
    body.career-mode-settings-page .setting-reapplication-form {
        margin-left: 0;
    }

    body.career-mode-settings-page .setting-reapplication-file-row {
        align-items: stretch;
        flex-direction: column;
    }

    body.career-mode-settings-page .setting-reapplication-file-row .btn-freemode,
    body.career-mode-settings-page .setting-reapplication-form .setting-status-actions .btn-freemode {
        width: 100%;
    }

    body.career-mode-settings-page .setting-content-freemode .career-settings-list-item {
        padding: 18px 0 !important;
    }
}

/* =========================================================
   결제 및 이용내역 기준 설정 화면
   ========================================================= */

/* 설정 화면 헤더를 다른 커리어모드 화면과 같은 1260px 정렬축에 맞춘다. */
body.career-mode-settings-page .job-header-shell--career .job-header-inner {
    width: min(1260px, calc(100% - 48px));
    max-width: 1260px;
    padding-right: 0;
    padding-left: 0;
}

/* 설정 화면과 결제 내역 화면의 기본 표면을 흰색 문서형 레이아웃으로 통일한다. */
body.career-mode-settings-page,
body.career-mode-settings-page .career-settings-wrapper,
body.career-mode-settings-page .setting-layout-freemode,
body.career-mode-settings-page .setting-content-freemode {
    background: var(--career-white);
}

/* 설정 메뉴의 외부 화면 링크가 탭 항목과 같은 클릭 영역을 사용하게 한다. */
body.career-mode-settings-page .setting-menu-link-item {
    padding: 0;
}

/* 설정 메뉴의 외부 화면 링크 글자 체계를 일반 메뉴와 통일한다. */
body.career-mode-settings-page .setting-menu-link-item > a {
    display: flex;
    width: 100%;
    min-height: inherit;
    padding: 12px;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

/* 모바일 설정 메뉴의 외부 화면 링크 기본 밑줄을 제거한다. */
body.career-mode-settings-page .setting-mobile-link {
    text-decoration: none;
}

/* 설정 탭 전환 시 제목이 아래에서 이동하지 않고 동일한 상단 위치에 표시되게 한다. */
body.career-mode-settings-page .setting-section-freemode {
    animation: none;
}

/* 결제 및 이용내역의 섹션 사이 간격을 피그마 정보 위계에 맞춘다. */
body.career-mode-settings-page #billing .career-settings-content-section + .career-settings-content-section {
    margin-top: 42px;
    padding-top: 0;
    border-top: 0;
}

/* 결제 및 이용내역의 이용 가능한 카운트를 하나의 정보 표면에 배치한다. */
body.career-mode-settings-page .career-billing-balance {
    display: flex;
    padding: 24px;
    align-items: center;
    gap: 18px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
}

/* 기능별 잔여 카운트의 항목명과 수치를 중앙 정렬한다. */
body.career-mode-settings-page .career-billing-balance-item {
    display: flex;
    min-width: 0;
    flex: 1 0 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--career-ink);
    text-align: center;
}

/* 잔여 카운트 사이를 46px 세로 구분선으로 나눈다. */
body.career-mode-settings-page .career-billing-balance-divider {
    width: 1px;
    height: 46px;
    flex: 0 0 1px;
    background: var(--career-border);
}

/* 기능별 잔여 카운트 항목명을 본문 굵기로 표시한다. */
body.career-mode-settings-page .career-billing-balance-label {
    width: 100%;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

/* 기능별 잔여 카운트 수치와 단위를 2px 간격으로 묶는다. */
body.career-mode-settings-page .career-billing-balance-value {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--career-ink);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
}

/* 기능별 잔여 카운트 숫자만 선택 색상으로 강조한다. */
body.career-mode-settings-page .career-billing-balance-value strong {
    color: var(--career-primary);
    font: inherit;
}

/* 개인회원 활동 요약 항목을 해당 목록으로 이동하는 링크로 표시한다. */
body.career-mode-settings-page .career-personal-summary-item {
    min-height: 126px;
    padding: 10px 8px;
    border-radius: var(--k-radius-md);
    color: var(--career-ink);
    text-decoration: none;
}

/* 개인회원 활동 요약 링크의 마우스와 키보드 초점을 공통 선택 색상으로 구분한다. */
body.career-mode-settings-page .career-personal-summary-item:hover,
body.career-mode-settings-page .career-personal-summary-item:focus-visible {
    background: var(--career-primary-soft);
    outline: 2px solid var(--career-primary);
    outline-offset: 2px;
}

/* 개인회원 활동 요약에서 연결되는 목록 이름을 보조 정보로 표시한다. */
body.career-mode-settings-page .career-personal-summary-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--career-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

/* 개인회원 활동 요약 링크 선택 시 이동 안내 문구도 주요 색상으로 표시한다. */
body.career-mode-settings-page .career-personal-summary-item:hover .career-personal-summary-link,
body.career-mode-settings-page .career-personal-summary-item:focus-visible .career-personal-summary-link {
    color: var(--career-primary);
}

/* 개인회원 활동 요약의 로딩과 오류 안내를 재시도 버튼과 한 줄로 배치한다. */
body.career-mode-settings-page .career-personal-summary-status {
    display: flex;
    min-height: 36px;
    margin-top: 14px;
    align-items: center;
    gap: 12px;
    color: var(--career-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* 개인회원 활동 요약 상태가 끝나면 안내 영역을 숨긴다. */
body.career-mode-settings-page .career-personal-summary-status[hidden] {
    display: none;
}

/* 결제·상세 이용내역 표를 1px 외곽선 안에 배치한다. */
body.career-mode-settings-page #billing .career-recruitment-summary-table-wrap {
    width: 100%;
    border: 1px solid var(--career-border);
    border-radius: 0;
}

/* 결제·상세 이용내역 표를 피그마 본문 폭과 14px 글자 체계로 맞춘다. */
body.career-mode-settings-page #billing .career-recruitment-summary-table {
    min-width: 952px;
    table-layout: fixed;
    font-size: 14px;
}

/* 결제·상세 이용내역 표 셀을 피그마 기준 중앙 정렬로 통일한다. */
body.career-mode-settings-page #billing .career-recruitment-summary-table th,
body.career-mode-settings-page #billing .career-recruitment-summary-table td {
    height: 44px;
    padding: 12px 16px;
    color: var(--career-ink);
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
}

/* 결제·상세 이용내역 표의 머리글을 브랜드 선택 표면으로 구분한다. */
body.career-mode-settings-page #billing .career-recruitment-summary-table thead th {
    background: var(--career-primary-soft);
    color: var(--career-primary);
    font-weight: 600;
}

/* 결제 내역의 데이터 행 높이를 피그마의 46px 행 간격에 맞춘다. */
body.career-mode-settings-page .career-billing-table tbody td {
    height: 46px;
}

/* 결제 내역의 날짜와 유효기간 열을 151px로 맞춘다. */
body.career-mode-settings-page .career-billing-table th:first-child,
body.career-mode-settings-page .career-billing-table td:first-child,
body.career-mode-settings-page .career-billing-table th:last-child,
body.career-mode-settings-page .career-billing-table td:last-child {
    width: 151px;
}

/* 결제 내역의 상품명 열을 230px로 맞춘다. */
body.career-mode-settings-page .career-billing-table th:nth-child(2),
body.career-mode-settings-page .career-billing-table td:nth-child(2) {
    width: 230px;
}

/* 결제 내역의 세 기능 건수 열을 각 100px로 맞춘다. */
body.career-mode-settings-page .career-billing-table th:nth-child(3),
body.career-mode-settings-page .career-billing-table td:nth-child(3),
body.career-mode-settings-page .career-billing-table th:nth-child(4),
body.career-mode-settings-page .career-billing-table td:nth-child(4),
body.career-mode-settings-page .career-billing-table th:nth-child(5),
body.career-mode-settings-page .career-billing-table td:nth-child(5) {
    width: 100px;
}

/* 결제 내역의 금액 열을 120px로 맞춘다. */
body.career-mode-settings-page .career-billing-table th:nth-child(6),
body.career-mode-settings-page .career-billing-table td:nth-child(6) {
    width: 120px;
}

/* 상세 이용내역의 사용일 열을 150px로 맞춘다. */
body.career-mode-settings-page .career-usage-history-table th:first-child,
body.career-mode-settings-page .career-usage-history-table td:first-child {
    width: 150px;
}

/* 상세 이용내역의 사용 항목 열을 230px로 맞춘다. */
body.career-mode-settings-page .career-usage-history-table th:nth-child(2),
body.career-mode-settings-page .career-usage-history-table td:nth-child(2) {
    width: 230px;
}

/* 상세 이용내역의 건수 열을 100px로 맞춘다. */
body.career-mode-settings-page .career-usage-history-table th:nth-child(3),
body.career-mode-settings-page .career-usage-history-table td:nth-child(3) {
    width: 100px;
}

/* 상세 이용내역의 내용 열을 남은 472px에 중앙 정렬한다. */
body.career-mode-settings-page .career-usage-history-table th:last-child,
body.career-mode-settings-page .career-usage-history-table td:last-child {
    width: 472px;
    text-align: center;
}

/* 상세 이용내역 페이지 이동을 표 아래 중앙에 배치한다. */
body.career-mode-settings-page .career-usage-pagination {
    display: flex;
    min-height: 20px;
    margin-top: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* 상세 이용내역 페이지 번호를 장식 없는 텍스트 버튼으로 표시한다. */
body.career-mode-settings-page .career-usage-pagination button {
    display: inline-flex;
    width: 20px;
    height: 20px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--career-ink);
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}

/* 현재 상세 이용내역 페이지를 배경 장식 없이 굵기로 구분한다. */
body.career-mode-settings-page .career-usage-pagination button.is-active {
    background: transparent;
    color: var(--career-ink);
    font-weight: 600;
}

/* 상세 이용내역 페이지 이동의 마우스와 키보드 초점을 브랜드 색상으로 구분한다. */
body.career-mode-settings-page .career-usage-pagination button:hover,
body.career-mode-settings-page .career-usage-pagination button:focus-visible {
    background: var(--career-primary-soft);
    color: var(--career-primary);
    outline: none;
}

/* 데스크톱 설정 화면을 피그마의 250px 메뉴와 954px 본문 구조로 맞춘다. */
@media (min-width: 1024px) {
    body.career-mode-settings-page .career-settings-wrapper {
        width: min(1260px, calc(100% - 48px));
        max-width: 1260px;
        margin: 0 auto;
        padding: 52px 0 96px;
    }

    body.career-mode-settings-page .setting-layout-freemode {
        min-height: 0;
        grid-template-columns: 250px minmax(0, 1fr);
        align-items: start;
        gap: 56px;
    }

    body.career-mode-settings-page .setting-sidebar-freemode {
        position: sticky;
        top: calc(var(--header-height) + 24px);
        display: block !important;
        width: 250px;
        min-width: 250px;
        height: fit-content;
        padding: 14px;
        grid-column: 1;
        grid-row: 1;
        overflow: visible;
        border: 1px solid var(--career-border);
        border-radius: var(--k-radius-md);
        background: var(--career-white);
    }

    body.career-mode-settings-page .setting-sidebar-title {
        height: 55px;
        margin: 0 0 8px;
        padding: 12px;
        font-size: 22px;
        font-weight: 600;
    }

    body.career-mode-settings-page .setting-menu-freemode {
        gap: 8px;
    }

    body.career-mode-settings-page .setting-menu-item-freemode,
    body.career-mode-settings-page .setting-menu-item-freemode.active {
        height: 46px;
        min-height: 46px;
        padding: 12px;
        border: 0;
        border-radius: var(--k-radius-md);
        background: transparent;
        color: var(--career-ink);
        font-size: 16px;
        font-weight: 600;
    }

    body.career-mode-settings-page .setting-menu-item-freemode.active {
        color: var(--career-primary);
    }

    body.career-mode-settings-page .setting-menu-link-item {
        padding: 0;
    }

    body.career-mode-settings-page .setting-menu-link-item > a {
        height: 100%;
    }

    body.career-mode-settings-page .setting-content-freemode {
        width: 100%;
        max-width: 954px;
        min-height: 0;
        padding: 0;
        grid-column: 2;
        grid-row: 1;
        align-self: start;
    }

    body.career-mode-settings-page .setting-section-freemode,
    body.career-mode-settings-page #billing.setting-section-freemode {
        width: 100%;
        max-width: 954px;
        padding: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    body.career-mode-settings-page .setting-title-freemode {
        margin: 0 0 42px;
        padding: 0;
        font-size: 26px;
        font-weight: 600;
        line-height: 1.4;
    }

    body.career-mode-settings-page .setting-page-title {
        margin: 0 0 24px;
        font-size: 20px;
        font-weight: 600;
    }

    body.career-mode-settings-page #billing .setting-title-freemode {
        margin: 0 0 42px;
        padding: 0;
        font-size: 26px;
        line-height: 1.4;
    }

    body.career-mode-settings-page #billing .setting-page-title {
        margin: 0 0 24px;
        font-size: 16px;
        line-height: 1.4;
    }
}

/* 태블릿 이하에서도 결제 내역이 설정 탭의 전체 폭을 사용하게 한다. */
@media (max-width: 1023px) {
    body.career-mode-settings-page #billing.setting-section-freemode {
        max-width: 100%;
    }

    body.career-mode-settings-page .setting-sidebar-freemode {
        display: none !important;
    }

    body.career-mode-settings-page .setting-title-freemode,
    body.career-mode-settings-page #billing .setting-title-freemode {
        margin: 0 0 32px !important;
        padding: 0;
        font-size: 24px !important;
        line-height: 1.4;
    }
}

/* 모바일에서 잔여 카운트와 표의 밀도를 유지하면서 터치 영역을 확보한다. */
@media (max-width: 767px) {
    body.career-mode-settings-page .job-header-shell--career .job-header-inner {
        width: min(100% - 32px, 1260px);
    }

    body.career-mode-settings-page .career-billing-balance {
        padding: 20px 8px;
    }

    body.career-mode-settings-page .career-billing-balance-label {
        font-size: 13px;
    }

    body.career-mode-settings-page .career-billing-balance-value {
        font-size: 16px;
    }

    body.career-mode-settings-page #billing .career-settings-content-section + .career-settings-content-section {
        margin-top: 40px;
    }

    body.career-mode-settings-page #billing .career-recruitment-summary-table {
        font-size: 13px;
    }
}

/* =========================================================
   지원 내역·관심 목록 공통 화면
   ========================================================= */

/* 지원 내역과 관심 목록의 본문 여백을 최신 목록 프레임에 맞춘다. */
body.career-activity-page .career-activity-shell {
    flex: 1;
    max-width: 1260px;
    padding-right: 0;
    padding-left: 0;
    padding-top: 32px;
    padding-bottom: 96px;
}

/* 지원 내역과 관심 목록의 제목 아래 간격을 정의한다. */
body.career-activity-page .job-list-page-header {
    margin-bottom: 32px;
}

/* 지원 내역과 관심 목록의 필터 영역 상단 여백을 제거한다. */
body.career-activity-page .career-activity-list-section {
    margin-top: 0;
}

/* 지원 내역과 관심 목록의 선택 필터를 피그마 외곽선 상태로 표시한다. */
body.career-activity-page .career-project-type-tab.is-active {
    border-color: var(--career-primary);
    background: var(--career-white);
    color: var(--career-ink);
    font-weight: 500;
}

/* 지원 내역과 관심 목록의 유형 필터 간격을 피그마 기준으로 정의한다. */
body.career-activity-page .career-project-type-tabs {
    gap: 6px;
}

/* 지원 내역과 관심 목록의 결과 수와 선택기를 피그마 간격으로 정렬한다. */
body.career-activity-page .career-project-result-controls {
    gap: 12px;
}

/* 지원 내역과 관심 목록의 전체 건수를 피그마 본문 위계로 표시한다. */
body.career-activity-page .career-project-total {
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 전체 건수의 숫자와 단위 간격을 피그마 기준으로 정의한다. */
body.career-activity-page .career-project-total strong {
    margin-right: 2px;
    margin-left: 4px;
    color: var(--career-ink);
    font-weight: 500;
}

/* 공통 상태·정렬 선택기를 배치한다. */
.career-activity-select {
    position: relative;
    width: auto;
    padding-left: 13px;
    flex: 0 0 auto;
}

/* 결과 건수와 공통 선택기 사이의 세로 구분선을 표시한다. */
.career-activity-select::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 10px;
    background: var(--career-border);
    content: "";
    transform: translateY(-50%);
}

/* 공통 상태·정렬 선택기의 현재 값을 표시한다. */
.career-activity-select-trigger {
    display: flex;
    width: auto;
    height: auto;
    padding: 0;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    border: 0;
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    color: var(--career-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
    white-space: nowrap;
    cursor: pointer;
}

/* 프로필 링크 입력 행을 자격증과 동일한 디자인의 단일 입력 구조로 배치한다. */
body.career-mode-profile-page .talent-profile-link-row {
    grid-template-columns: minmax(0, 1fr) 39px;
}

body.career-mode-profile-page .talent-profile-link-input {
    min-width: 0;
}

/* 공통 상태·정렬 선택기의 화살표를 피그마 아이콘 프레임 크기로 정렬한다. */
.career-activity-select-trigger i {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    align-items: center;
    justify-content: center;
    color: var(--career-primary);
    font-size: 10px;
    line-height: 1;
}

/* 열린 상태의 공통 선택기 화살표 방향을 전환한다. */
.career-activity-select.is-open .career-activity-select-trigger i {
    transform: rotate(180deg);
}

/* 공통 상태·정렬 선택기의 선택 항목 목록을 정의한다. */
.career-activity-select-menu {
    position: absolute;
    z-index: var(--k-z-dropdown);
    top: calc(100% + 4px);
    right: 0;
    min-width: 88px;
    padding: 12px 16px;
    border: 1px solid var(--k-border-light-color);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    box-shadow: var(--k-shadow-soft);
}

/* 숨김 속성이 지정된 공통 선택기 목록을 화면에서 제외한다. */
.career-activity-select-menu[hidden] {
    display: none;
}

/* 공통 상태·정렬 선택기 항목을 세로 목록으로 표시한다. */
.career-activity-select-menu button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--career-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

/* 공통 상태·정렬 선택기 항목 사이의 피그마 간격을 적용한다. */
.career-activity-select-menu button + button {
    margin-top: 16px;
}

/* 선택된 공통 상태·정렬 항목을 피그마 기본 텍스트 위계로 유지한다. */
.career-activity-select-menu button.is-selected {
    color: var(--career-ink);
    font-weight: 500;
}

/* 공통 상태·정렬 항목의 탐색 상태를 주요 색상으로 표시한다. */
.career-activity-select-menu button:hover,
.career-activity-select-menu button:focus-visible {
    color: var(--career-primary);
    font-weight: 600;
    outline: 0;
}

/* 지원 내역과 관심 목록의 프로젝트 카드를 피그마 목록 밀도로 정의한다. */
body.career-activity-page .career-activity-card {
    display: grid;
    min-height: 140px;
    padding: 24px 18px;
    grid-template-columns: minmax(0, 1fr) 130px;
    align-items: stretch;
    gap: 36px;
}

/* 모집 종료 프로젝트 카드의 표면과 글자를 보조 위계로 표시한다. */
body.career-activity-page .career-activity-card.is-closed {
    background: var(--career-surface);
}

/* 지원 내역과 관심 목록 카드의 본문 너비 축소를 허용한다. */
body.career-activity-page .career-activity-card-main {
    min-width: 0;
}

/* 지원 내역과 관심 목록 카드 제목을 프로젝트 카드 위계로 표시한다. */
body.career-activity-page .career-activity-card .career-project-card-title {
    margin-top: 16px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 지원 내역과 관심 목록 카드 설명의 줄바꿈을 한 줄로 제한한다. */
body.career-activity-page .career-activity-card .career-project-card-summary {
    margin-top: 14px;
}

/* 모집 종료 카드의 본문 정보를 보조 글자색으로 낮춘다. */
body.career-activity-page .career-activity-card.is-closed .career-project-card-title,
body.career-activity-page .career-activity-card.is-closed .career-project-card-company,
body.career-activity-page .career-activity-card.is-closed .career-project-card-summary,
body.career-activity-page .career-activity-card.is-closed .career-project-card-meta,
body.career-activity-page .career-activity-card.is-closed .career-project-card-meta strong {
    color: var(--career-muted);
}

/* 지원 내역과 관심 목록 카드 우측 상태와 행동을 세로로 배치한다. */
body.career-mode-page .career-activity-card-side {
    display: flex;
    width: 130px;
    min-width: 0;
    padding: 0 24px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    box-sizing: border-box;
    text-align: center;
}

/* 지원 내역 카드의 현재 처리 상태를 본문 위계로 표시한다. */
body.career-mode-page .career-activity-status {
    width: 100%;
    color: var(--career-primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 모집 종료 상태는 보조 글자색으로 표시한다. */
body.career-mode-page .career-activity-card.is-closed .career-activity-status {
    color: var(--career-muted);
}

/* 지원 내역과 관심 목록 카드의 행동 버튼을 세로로 정렬한다. */
body.career-mode-page .career-activity-actions {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* 카드 우측 행동 버튼을 전체 폭으로 정의한다. */
body.career-mode-page .career-activity-actions .btn-freemode {
    width: 100%;
    min-width: 0;
    height: 38px;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: var(--k-radius-md);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 지원 내역 카드의 보조 행동 버튼을 피그마의 중립 외곽선으로 표시한다. */
body.career-mode-page .career-activity-actions .btn-freemode.is-line {
    border-color: var(--career-border);
    background: var(--career-white);
    color: var(--career-ink);
}

/* 관심 목록 카드의 지원 버튼을 주요 색상으로 표시한다. */
body.career-mode-page .career-activity-actions .btn-freemode.is-primary {
    border-color: var(--career-primary);
    background: var(--career-primary);
    color: var(--career-white);
}

/* 목록 전체가 비어 있을 때 제목과 행동을 포함하는 패널을 정의한다. */
body.career-mode-page .career-activity-empty-state {
    display: flex;
    min-height: 254px;
    padding: 52px 24px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    text-align: center;
}

/* 행동형 빈 상태의 제목을 정의한다. */
body.career-mode-page .career-activity-empty-state strong {
    color: var(--career-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

/* 행동형 빈 상태의 설명을 정의한다. */
body.career-mode-page .career-activity-empty-state p {
    margin: 8px 0 32px;
    color: var(--career-muted);
    font-size: 14px;
    line-height: 1.4;
}

/* 행동형 빈 상태의 프로젝트 찾기 버튼 크기를 정의한다. */
body.career-mode-page .career-activity-empty-state .btn-freemode {
    min-width: 128px;
}

/* 지원 내역과 관심 목록의 페이지네이션 간격을 정의한다. */
body.career-activity-page .career-activity-list + .job-pagination {
    margin-top: 36px;
}

/* 지원 내역과 관심 목록의 안내 박스를 카드 목록 아래에 배치한다. */
body.career-activity-page .career-activity-notice {
    margin-top: 24px;
    padding: 18px 24px;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
}

/* 지원 내역과 관심 목록 안내 문구를 아이콘과 한 줄 기준으로 정렬한다. */
body.career-activity-page .career-activity-notice p {
    display: flex;
    margin: 0;
    align-items: flex-start;
    gap: 8px;
    color: var(--career-muted);
    font-size: 13px;
    line-height: 1.6;
    align-items:center;
}

/* 안내 문구 사이의 간격을 정의한다. */
body.career-activity-page .career-activity-notice p + p {
    margin-top: 6px;
}

/* 지원 내역 안내의 법령 링크를 본문과 같은 위계로 표시한다. */
body.career-activity-page .career-activity-notice a {
    color: var(--career-primary);
    text-decoration: underline;
}

/* 지원 결과 안내 팝업의 배경 레이어를 정의한다. */
body.career-activity-page .career-apply-result-overlay {
    display: none;
    position: fixed;
    z-index: calc(var(--k-z-header) + 1);
    inset: 0;
    padding: 24px;
    align-items: center;
    justify-content: center;
    background: var(--k-overlay-dark-40);
}

/* 지원 결과 안내 팝업의 열린 상태를 표시한다. */
body.career-activity-page .career-apply-result-overlay.is-open {
    display: flex;
}

/* 지원 결과 안내 팝업의 크기와 내부 배치를 정의한다. */
body.career-mode-page .career-apply-result-modal {
    display: flex;
    width: min(432px, 100%);
    min-height: 472px;
    padding: 32px 24px;
    flex-direction: column;
    align-items: center;
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    box-shadow: var(--k-shadow-soft);
    text-align: center;
}

/* 지원 결과 안내 팝업의 확인 아이콘을 정의한다. */
body.career-mode-page .career-apply-result-icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--career-primary);
    color: var(--career-white);
    font-size: 16px;
}

/* 지원 결과 안내 팝업 제목을 정의한다. */
body.career-mode-page .career-apply-result-modal h2,
body.career-mode-page .career-apply-result-modal h3 {
    margin: 20px 0 0;
    color: var(--career-ink);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
}

/* 지원 결과 안내 팝업의 설명을 정의한다. */
body.career-mode-page .career-apply-result-description {
    margin: 12px 0 0;
    color: var(--career-muted);
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-line;
}

/* 지원 결과 안내 팝업의 결과 메시지 표면을 정의한다. */
body.career-mode-page .career-apply-result-message {
    width: 100%;
    margin-top: 24px;
    padding: 16px;
    border-radius: var(--k-radius-md);
    background: var(--career-primary-soft);
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    white-space: pre-line;
}

/* 지원 결과 안내 팝업의 보조 안내를 정의한다. */
body.career-mode-page .career-apply-result-note {
    margin: 14px 0 0;
    color: var(--career-muted);
    font-size: 12px;
    line-height: 1.5;
}

/* 지원 결과 안내 팝업의 확인 버튼을 하단 전체 폭으로 배치한다. */
body.career-mode-page .career-apply-result-modal > .btn-freemode {
    width: 100%;
    min-height: 42px;
    margin-top: auto;
}

/* 스타일 가이드의 지원 결과 팝업 표본을 실제 폭으로 중앙 정렬한다. */
body.style-guide-page .style-guide-apply-result-modal {
    margin: 0 auto;
}

/* 프로필 상단의 공개 설정 제어 요소를 정렬한다. */
body.career-mode-profile-page .talent-profile-header-controls {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* 프로필 상단의 공개 설정을 별도 카드가 아닌 간결한 제어 요소로 표시한다. */
body.career-mode-profile-page .talent-profile-header-controls .talent-profile-public-box {
    margin: 0;
    padding: 0;
    background: transparent;
}

/* 프로필 상단 공개 설정의 제목과 스위치 간격을 정의한다. */
body.career-mode-profile-page .talent-profile-header-controls .work-request-public-profile-toggle {
    gap: 10px;
}

/* 프로필 상단 공개 설정 제목을 폼 라벨 위계로 정의한다. */
body.career-mode-profile-page .talent-profile-header-controls .setting-page-title {
    margin: 0;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 600;
}

/* 프로필 공개 스위치를 직전 프로필 화면의 34px 크기로 표시한다. */
body.career-mode-profile-page .talent-profile-public-toggle-switch {
    position: relative;
    display: inline-flex;
    width: 34px;
    height: 18px;
    flex: 0 0 auto;
    cursor: pointer;
}

/* 프로필 공개 스위치의 실제 체크박스를 시각적으로 숨긴다. */
body.career-mode-profile-page .talent-profile-public-toggle-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* 프로필 공개 스위치의 트랙을 정의한다. */
body.career-mode-profile-page .talent-profile-public-toggle-track {
    position: absolute;
    inset: 0;
    border-radius: var(--k-radius-pill);
    background: var(--career-border);
    transition: background var(--k-transition-fast);
}

/* 프로필 공개 스위치의 손잡이를 정의한다. */
body.career-mode-profile-page .talent-profile-public-toggle-track::before {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 16px;
    height: 16px;
    border: 1px solid var(--career-border);
    border-radius: 50%;
    background: var(--career-white);
    box-shadow: var(--k-shadow-hard-sm);
    content: "";
    transition: border-color var(--k-transition-fast), transform var(--k-transition-fast);
}

/* 프로필 공개 스위치의 키보드 포커스를 표시한다. */
body.career-mode-profile-page .talent-profile-public-toggle-switch input:focus-visible + .talent-profile-public-toggle-track {
    outline: 2px solid var(--career-primary);
    outline-offset: 2px;
}

/* 프로필 공개 스위치의 선택 상태를 주요 색상으로 표시한다. */
body.career-mode-profile-page .talent-profile-public-toggle-switch input:checked + .talent-profile-public-toggle-track {
    background: var(--career-primary);
}

/* 프로필 공개 스위치의 선택 상태 손잡이 위치를 정의한다. */
body.career-mode-profile-page .talent-profile-public-toggle-switch input:checked + .talent-profile-public-toggle-track::before {
    border-color: var(--career-primary);
    transform: translateX(16px);
}

/* 자격증 팝업을 고정 높이 안에서 상하로 배치한다. */
body.career-mode-profile-page .talent-certificate-modal {
    display: flex;
    flex-direction: column;
}

/* 자격증 팝업 제목과 입력 영역 사이 간격을 정의한다. */
body.career-mode-profile-page .talent-certificate-modal .modal-header {
    margin-bottom: 42px;
}

/* 자격증 팝업 라벨과 입력 사이의 공통 간격을 적용한다. */
body.career-mode-profile-page .talent-certificate-modal-body .form-label {
    margin-bottom: var(--k-space-form-label);
}

/* 자격증 팝업 닫기 행동을 중립 표면 버튼으로 표시한다. */
body.career-mode-profile-page .talent-certificate-modal-actions .career-neutral-action {
    border-color: var(--k-border-light-color);
    background: var(--career-surface);
    color: var(--career-ink);
}

/* 기업 로고가 없거나 로드되지 않을 때 건물 아이콘을 중앙에 표시한다. */
body.career-mode-company-page .company-profile-logo.is-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--career-muted);
    font-size: 18px;
}

/* 모바일에서 지원 내역과 관심 목록의 필터·카드·모달을 단일 열로 배치한다. */
@media (max-width: 767px) {
    body.career-activity-page .career-project-list-toolbar,
    body.career-mode-profile-page .talent-profile-header-controls {
        align-items: flex-start;
        flex-direction: column;
    }

    body.career-mode-profile-page .talent-profile-title-row,
    body.career-mode-profile-page .talent-profile-available-date-panel {
        align-items: flex-start;
        flex-direction: column;
    }

    body.career-mode-profile-page .talent-profile-available-date-panel {
        width: 100%;
        gap: 10px;
    }

    body.career-mode-profile-page .talent-profile-available-date-input-wrap {
        width: min(300px, 100%);
    }

    body.career-activity-page .career-project-type-tabs {
        width: 100%;
        overflow-x: auto;
    }

    body.career-activity-page .career-project-result-controls {
        width: 100%;
        justify-content: flex-end;
    }

    body.career-activity-page .career-activity-card {
        display: flex;
        padding: 20px 16px;
        flex-direction: column;
        gap: 20px;
    }

    body.career-mode-page .career-activity-card-side {
        width: 100%;
        padding: 16px 0 0;
        align-items: flex-start;
        border-top: 1px solid var(--career-border);
        border-left: 0;
        text-align: left;
    }

    body.career-mode-page .career-activity-actions {
        flex-direction: row;
    }

    body.career-mode-page .career-activity-actions .btn-freemode {
        flex: 1;
    }

    body.career-mode-page .career-apply-result-modal {
        min-height: 472px;
    }
}

/* 받은 제안 정렬 메뉴의 긴 문구가 줄바꿈되지 않도록 너비를 확장한다. */
body.received-offer-page .received-offer-sort-menu {
    width: 104px;
}

/* 받은 제안 카드를 유형, 제목, 일정 정보 중심의 Figma 높이로 표시한다. */
body.received-offer-page .received-offer-card {
    min-height: 120px;
    padding: 18px;
}

/* 받은 제안 카드 제목과 유형 배지 사이의 간격과 위계를 정의한다. */
body.received-offer-page .received-offer-card .career-project-card-title {
    margin: 14px 48px 0 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

/* 받은 제안 카드의 제안일과 답변 기한을 제목 바로 아래에 배치한다. */
body.received-offer-page .received-offer-card .career-project-card-meta {
    margin-top: 8px;
    color: var(--career-muted);
    font-size: 12px;
    font-weight: 500;
}

/* 받은 제안 카드 일정 라벨을 값과 같은 보조 위계로 표시한다. */
body.received-offer-page .received-offer-card .career-project-card-meta strong {
    color: inherit;
    font-weight: 500;
}

/* 받은 제안 카드의 답변 버튼을 Figma의 작은 주요 행동 크기로 표시한다. */
body.received-offer-page .received-offer-card .career-activity-actions .btn-freemode {
    width: auto;
    min-width: 66px;
    height: 32px;
    min-height: 32px;
    padding: 0 12px;
    font-size: 12px;
}

/* 수락된 받은 제안 상태를 주요 색상으로 표시한다. */
body.received-offer-page .received-offer-card .career-activity-status.is-accepted {
    color: var(--career-primary);
}

/* 미응답과 거절 상태를 보조 글자색으로 표시한다. */
body.received-offer-page .received-offer-card .career-activity-status.is-muted {
    color: var(--career-muted);
}

/* 받은 제안 카드의 완료 상태 문구를 본문 크기로 표시한다. */
body.received-offer-page .received-offer-card .career-activity-status {
    font-size: 13px;
    font-weight: 500;
}

/* 받은 제안 확인 안내 제목을 아이콘과 한 행으로 정렬한다. */
body.received-offer-page .received-offer-notice .received-offer-notice-title {
    align-items: center;
    color: var(--career-muted);
    font-size: 12px;
    font-weight: 500;
}

/* 받은 제안 확인 안내의 세부 항목을 작은 보조 문구로 표시한다. */
body.received-offer-page .received-offer-notice ul {
    margin: 6px 0 0 16px;
    padding: 0;
    color: var(--career-muted);
    font-size: 12px;
    line-height: 1.5;
}

/* 받은 제안 상세 모달이 열렸을 때 배경 화면의 스크롤을 막는다. */
body.received-offer-modal-open {
    overflow: hidden;
}

/* 받은 제안 상세 모달의 열린 상태를 표시한다. */
body.received-offer-page .received-offer-detail-overlay.is-open {
    display: flex;
}

/* 받은 제안 상세 모달을 Figma 기준의 단일 열 문서형 팝업으로 정의한다. */
body.received-offer-page .received-offer-detail-modal {
    position: relative;
    display: flex;
    width: min(590px, calc(100% - 32px));
    max-width: 590px;
    max-height: calc(100vh - 48px);
    padding: 32px 24px;
    flex-direction: column;
    overflow-y: auto;
    border: 0;
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    box-shadow: var(--k-shadow-soft);
    box-sizing: border-box;
}

/* 받은 제안 상세 모달의 닫기 버튼을 우측 상단에 고정한다. */
body.received-offer-page .received-offer-modal-close {
    position: absolute;
    z-index: 1;
    top: 24px;
    right: 24px;
    color: var(--career-ink);
    font-size: 20px;
}

/* 받은 제안 상세 모달의 본문 섹션을 32px 간격으로 배치한다. */
body.received-offer-page .received-offer-detail-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* 받은 제안 상세 모달 제목과 일정 정보를 세로로 배치한다. */
body.received-offer-page .received-offer-detail-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 받은 제안 상세 모달 제목을 브랜드 색상의 20px 제목으로 표시한다. */
body.received-offer-page .received-offer-detail-modal h2 {
    margin: 0;
    padding-right: 32px;
    color: var(--career-primary);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
    word-break: break-word;
}

/* 받은 제안일과 답변 기한을 한 행의 보조 정보로 표시한다. */
body.received-offer-page .received-offer-detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 받은 제안 일정 값은 라벨과 같은 보조 위계로 표시한다. */
body.received-offer-page .received-offer-detail-meta strong {
    color: inherit;
    font-weight: 500;
}

/* 받은 제안 일정 사이에 10px 세로 구분선을 표시한다. */
body.received-offer-page .received-offer-detail-meta-divider {
    width: 1px;
    height: 10px;
    background: var(--career-border);
}

/* 받은 제안 상세 섹션 제목을 공통 본문 제목 위계로 표시한다. */
body.received-offer-page .received-offer-detail-section h3 {
    margin: 0;
    color: var(--career-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 받은 제안 프로젝트 정보 제목과 조건 표면 사이에 14px 간격을 둔다. */
body.received-offer-page .received-offer-project-section {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-form-label);
}

/* 받은 제안 프로젝트 조건을 옅은 표면의 세로 정의 목록으로 배치한다. */
body.received-offer-page .received-offer-condition-grid {
    display: flex;
    padding: 18px;
    flex-direction: column;
    gap: var(--k-space-form-label);
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
}

/* 받은 제안 핵심 조건 한 항목을 라벨과 값으로 구분한다. */
body.received-offer-page .received-offer-condition-item {
    display: grid;
    grid-template-columns: 85px minmax(0, 1fr);
    align-items: center;
    gap: 52px;
}

/* 받은 제안 핵심 조건의 라벨을 보조 색상으로 표시한다. */
body.received-offer-page .received-offer-condition-item span {
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

/* 받은 제안 핵심 조건의 값을 기본 본문 위계로 표시한다. */
body.received-offer-page .received-offer-condition-item strong {
    min-width: 0;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    word-break: break-word;
}

/* 받은 제안과 프로젝트 내용을 제목, 구분선, 본문의 단일 흐름으로 배치한다. */
body.received-offer-page .received-offer-text-section {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-form-label);
}

/* 받은 제안과 프로젝트 내용 제목 아래에 공통 구분선을 표시한다. */
body.received-offer-page .received-offer-text-section h3 {
    padding-bottom: var(--k-space-form-label);
    border-bottom: 1px solid var(--career-border);
}

/* 받은 제안과 프로젝트 내용을 좌우 18px 여백의 문서형 본문으로 표시한다. */
body.received-offer-page .received-offer-text-section p {
    margin: 0;
    padding: 0 18px;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 받은 제안 담당자 정보의 제목과 기업정보 이동을 같은 행에 배치한다. */
body.received-offer-page .received-offer-contact-head {
    display: flex;
    padding-bottom: var(--k-space-form-label);
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid var(--career-border);
}

/* 받은 제안 기업정보 이동을 낮은 위계의 텍스트 행동으로 표시한다. */
body.received-offer-page .received-offer-company-link {
    display: inline-flex;
    padding: 0;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: var(--career-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
}

/* 받은 제안 기업정보 이동의 탐색 상태를 밑줄로 표시한다. */
body.received-offer-page .received-offer-company-link:hover,
body.received-offer-page .received-offer-company-link:focus-visible {
    text-decoration: underline;
    outline: 0;
}

/* 받은 제안 기업정보 이동 화살표를 Figma 크기로 표시한다. */
body.received-offer-page .received-offer-company-link i {
    font-size: 10px;
}

/* 받은 제안 담당자 정보를 옅은 표면의 세로 정의 목록으로 배치한다. */
body.received-offer-page .received-offer-contact-grid {
    display: flex;
    margin-top: var(--k-space-form-label);
    padding: 18px;
    flex-direction: column;
    gap: var(--k-space-form-label);
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
}

/* 받은 제안 담당자 한 항목을 라벨과 값으로 구분한다. */
body.received-offer-page .received-offer-contact-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
}

/* 받은 제안 담당자 라벨을 보조 위계로 표시한다. */
body.received-offer-page .received-offer-contact-item span {
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

/* 받은 제안 담당자 값을 기본 본문 위계로 표시한다. */
body.received-offer-page .received-offer-contact-item strong {
    min-width: 0;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* 받은 제안 상세 모달의 수락·거절 버튼을 같은 폭으로 배치한다. */
body.received-offer-page .received-offer-detail-actions {
    margin-top: 52px;
}

body.received-offer-page .received-offer-detail-actions .btn-freemode {
    flex: 1;
    min-height: 42px;
    font-size: 14px;
    font-weight: 500;
}

/* 받은 제안 거절 버튼을 Figma의 옅은 보조 표면으로 표시한다. */
body.received-offer-page .received-offer-detail-actions .btn-freemode.is-line,
body.received-offer-page .received-offer-detail-actions .btn-freemode.is-line:hover:not(:disabled),
body.received-offer-page .received-offer-detail-actions .btn-freemode.is-line:focus-visible:not(:disabled) {
    border-color: var(--career-border);
    background: var(--career-surface);
    box-shadow: none;
    color: var(--career-ink);
    transform: none;
}

/* 받은 제안 수락·거절 입력 모달을 공통 500px 문서형 팝업으로 표시한다. */
body.career-mode-page.received-offer-page .received-offer-response-modal {
    max-height: calc(100vh - 32px);
    box-shadow: var(--k-shadow-soft);
}

/* 받은 제안 수락·거절 입력 모달의 본문 간격을 Figma 기준으로 정의한다. */
body.career-mode-page.received-offer-page .received-offer-response-modal .received-offer-response-body,
body.career-mode-page.received-offer-page .received-offer-response-modal.is-failed .received-offer-response-body {
    padding-top: 32px;
    gap: 32px;
}

/* 받은 제안 전달 내용 입력창을 Figma의 120px 높이로 표시한다. */
body.career-mode-page.received-offer-page .received-offer-response-modal .career-biz-modal-textarea {
    height: 120px;
    min-height: 120px;
    padding: 10px 14px;
    resize: none;
}

/* 받은 제안 입력 모달과 하단 행동 사이의 간격을 통일한다. */
body.career-mode-page.received-offer-page .received-offer-response-actions {
    margin-top: 52px;
}

/* 받은 제안 입력 모달의 취소 버튼을 중립 표면으로 표시한다. */
body.received-offer-page .received-offer-response-actions [data-received-offer-action="cancel"],
body.received-offer-page .received-offer-response-actions [data-received-offer-action="cancel"]:hover:not(:disabled),
body.received-offer-page .received-offer-response-actions [data-received-offer-action="cancel"]:focus-visible:not(:disabled) {
    border-color: var(--career-border);
    background: var(--career-surface);
    box-shadow: none;
    color: var(--career-ink);
    transform: none;
}

/* 받은 제안 응답 완료 모달을 상태별 안내가 포함된 단일 행동 팝업으로 표시한다. */
body.received-offer-page .received-offer-response-success-modal {
    width: min(420px, 100%);
    min-height: 280px;
    padding: 32px 24px;
    gap: 42px;
}

/* 받은 제안 수락 완료 모달의 안내 영역을 포함할 세로 높이를 확보한다. */
body.received-offer-page .received-offer-response-success-modal.is-accepted {
    min-height: 410px;
}

/* 받은 제안 응답 완료의 아이콘·제목·설명을 세로 흐름으로 정렬한다. */
body.received-offer-page .received-offer-response-success-content,
body.received-offer-page .received-offer-response-success-headline {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 받은 제안 응답 완료 아이콘과 제목 사이 간격을 정의한다. */
body.received-offer-page .received-offer-response-success-headline {
    gap: 18px;
}

/* 받은 제안 응답 완료 제목의 공통 모달 기본 여백을 제거한다. */
body.received-offer-page .received-offer-response-success-modal h2 {
    margin: 0;
}

/* 받은 제안 응답 완료 설명을 제목 아래 Figma 간격으로 배치한다. */
body.received-offer-page .received-offer-response-success-modal .career-apply-result-description {
    margin: 24px 0 0;
    text-align: center;
}

/* 받은 제안 수락 후 계약 안내를 중립 표면 카드로 표시한다. */
body.received-offer-page .received-offer-accept-notice {
    width: 100%;
    margin-top: 24px;
    padding: 14px;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
    color: var(--career-muted);
    box-sizing: border-box;
}

/* 숨긴 받은 제안 수락 안내를 화면과 접근성 트리에서 제외한다. */
body.received-offer-page .received-offer-accept-notice[hidden] {
    display: none;
}

/* 받은 제안 수락 안내 제목을 아이콘과 한 행에 배치한다. */
body.received-offer-page .received-offer-accept-notice > p {
    display: flex;
    margin: 0;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

/* 받은 제안 수락 안내 목록을 읽기 좋은 보조 본문으로 표시한다. */
body.received-offer-page .received-offer-accept-notice ul {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
}

/* 받은 제안 응답 완료 확인 버튼의 자동 여백을 Figma 간격으로 대체한다. */
body.received-offer-page .received-offer-response-success-modal > .btn-freemode {
    margin-top: 0;
}

/* 모바일에서 받은 제안 상세 모달의 바깥 여백과 조건 간격을 축소한다. */
@media (max-width: 767px) {
    body.received-offer-page .received-offer-detail-overlay {
        padding: 16px;
    }

    body.received-offer-page .received-offer-detail-modal {
        width: 100%;
        max-height: calc(100vh - 32px);
        padding: 24px 16px;
    }

    body.received-offer-page .received-offer-condition-item {
        gap: 24px;
    }

    body.received-offer-page .received-offer-card .career-activity-actions .btn-freemode {
        width: 100%;
    }

    body.career-mode-page.received-offer-page .received-offer-response-modal {
        width: 100%;
        padding: 24px 0;
    }

    body.career-mode-page.received-offer-page .received-offer-response-actions {
        margin-top: 32px;
    }
}

/* =========================================================
   기업회원 목록·인재 관리 화면
   ========================================================= */

/* 기업회원 관리 화면의 공통 본문 여백을 정의한다. */
body.career-biz-list-page .career-biz-page {
    flex: 1;
    padding-top: 32px;
    padding-bottom: 88px;
}

/* 기업회원 관리 화면의 제목과 주요 행동을 양쪽에 배치한다. */
body.career-biz-list-page .career-biz-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

/* 기업회원 관리 화면의 전체 건수를 공통 문서형 문구로 표시한다. */
body.career-mode-page .career-project-total {
    color: var(--career-text);
    font-size: 14px;
    font-weight: 500;
}

/* 기업회원 관리 화면의 전체 건수 값을 강조한다. */
body.career-mode-page .career-project-total strong {
    margin: 0 4px 0 8px;
    color: var(--career-ink);
    font-weight: 700;
}

/* 지원자 관리 상태 필터를 제목 아래에 배치한다. */
body.career-biz-applicant-page .career-biz-applicant-filters {
    display: flex;
    margin: 28px 0 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* 지원자 관리 상태 필터의 기본 버튼을 외곽선 형태로 표시한다. */
body.career-biz-applicant-page .career-biz-applicant-filters .filter-chip {
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    color: var(--career-text);
    font-size: 14px;
    font-weight: 500;
}

/* 지원자 관리 상태 필터의 선택 상태를 주요 색상으로 표시한다. */
body.career-biz-applicant-page .career-biz-applicant-filters .filter-chip.active,
body.career-biz-applicant-page .career-biz-applicant-filters .filter-chip:hover,
body.career-biz-applicant-page .career-biz-applicant-filters .filter-chip:focus-visible {
    border-color: var(--career-primary);
    background: var(--career-white);
    color: var(--career-primary);
    outline: 0;
}

/* 지원자 관리의 건수 영역 간격을 정의한다. */
body.career-biz-applicant-page .job-applicant-review-summary,
body.career-biz-applicant-page.work-request-applicant-design-page .job-applicant-review-summary {
    margin: 28px 0 14px;
}

/* 지원자 관리 표를 외곽선 카드 안에 표시한다. */
body.career-biz-applicant-page .job-applicant-review-table-wrap {
    overflow: visible;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
}

/* 지원자 관리 표의 헤더를 보조 표면으로 표시한다. */
body.career-biz-applicant-page .job-applicant-review-table th {
    border-bottom-color: var(--career-border);
    background: var(--career-surface);
    color: var(--career-ink);
    font-weight: 600;
}

/* 지원자 관리 표의 본문 구분선과 색상을 공통 토큰으로 맞춘다. */
body.career-biz-applicant-page .job-applicant-review-table td {
    border-bottom-color: var(--career-border);
    color: var(--career-text);
}

/* 지원자 관리 표의 마지막 행 구분선을 제거한다. */
body.career-biz-applicant-page .job-applicant-review-table tr:last-child td {
    border-bottom: 0;
}

/* 지원자 관리의 경력·지원일·상태 값을 가운데 정렬한다. */
body.career-biz-applicant-page .job-applicant-review-career,
body.career-biz-applicant-page .job-applicant-review-date,
body.career-biz-applicant-page .job-applicant-review-status {
    text-align: center;
}

/* 지원자 관리의 경력 값을 주요 정보로 표시한다. */
body.career-biz-applicant-page .job-applicant-review-career {
    color: var(--career-ink);
    font-size: 16px;
    font-weight: 500;
}

/* 지원자 관리의 지원일을 보조 정보로 표시한다. */
body.career-biz-applicant-page .job-applicant-review-date {
    color: var(--career-muted);
    font-weight: 400;
}

/* 지원자 관리의 아바타를 주요 색상으로 표시한다. */
body.career-biz-applicant-page .job-applicant-review-avatar,
body.career-biz-applicant-page .job-applicant-profile-avatar {
    background: var(--career-primary);
    color: var(--career-white);
}

/* 지원자 관리의 이름과 프로젝트 제목을 기본 잉크 색상으로 표시한다. */
body.career-biz-applicant-page .job-applicant-review-person strong,
body.career-biz-applicant-page .job-applicant-review-project strong {
    color: var(--career-ink);
}

/* 지원자 관리의 보조 정보를 공통 보조 색상으로 표시한다. */
body.career-biz-applicant-page .job-applicant-review-person span,
body.career-biz-applicant-page .job-applicant-review-project span {
    color: var(--career-muted);
}

/* 지원자 관리의 상태 버튼을 공통 입력 요소와 같은 형태로 표시한다. */
body.career-biz-applicant-page .job-applicant-status-button {
    border-color: var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    color: var(--career-text);
}

/* 지원자 관리의 상태 버튼 탐색 상태를 주요 테두리로 표시한다. */
body.career-biz-applicant-page .job-applicant-status-button:hover:not(:disabled),
body.career-biz-applicant-page .job-applicant-status-button:focus-visible:not(:disabled) {
    border-color: var(--career-primary);
    color: var(--career-primary);
    outline: 0;
}

/* 지원자 관리 안내문을 주요 색상의 보조 표면으로 표시한다. */
body.career-biz-applicant-page .work-request-applicant-guide,
body.career-biz-applicant-page .job-applicant-review-guide {
    min-height: 42px;
    margin-top: 16px;
    padding: 0 16px;
    border-radius: var(--k-radius-md);
    background: var(--career-primary-soft);
    color: var(--career-text);
}

/* 지원자 관리 안내 아이콘을 주요 색상으로 표시한다. */
body.career-biz-applicant-page .work-request-applicant-guide i,
body.career-biz-applicant-page .job-applicant-review-guide i {
    color: var(--career-primary);
}

/* 표준 모달의 설명과 입력 영역 간격을 정의한다. */
body.career-mode-page .career-biz-modal-description {
    margin: 0 0 20px;
    color: var(--career-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* 기업회원 표준 모달의 라벨과 값 사이 간격을 디자인 기준에 맞춘다. */
body.career-mode-page .modal-body .form-label {
    display: block;
    margin-bottom: var(--k-space-form-label);
}

/* 표준 모달의 여러 줄 입력 높이와 크기 조절 방식을 정의한다. */
body.career-mode-page .career-biz-modal-textarea,
body.career-biz-detail-page .career-biz-mail-modal textarea {
    width: 100%;
    min-height: 144px;
    resize: vertical;
}

/* 지원자 프로필 모달의 본문만 스크롤되도록 정의한다. */
body.career-biz-applicant-page .job-applicant-profile-modal-body {
    overflow-y: auto;
}

/* 지원자 프로필 표준 모달의 상단 여백을 보완한다. */
body.career-biz-applicant-page .job-applicant-profile-modal > .modal-header {
    padding-top: 24px;
}

/* 지원자 프로필 모달의 섹션 제목 아이콘을 주요 색상으로 표시한다. */
body.career-biz-applicant-page .job-applicant-profile-section-title i {
    color: var(--career-primary);
}

/* 지원자 프로필 모달을 프리랜서 상세 화면과 동일한 문서 폭으로 표시한다. */
body.career-biz-applicant-page .job-applicant-profile-modal {
    width: min(980px, calc(100vw - 48px));
    max-width: 980px;
    max-height: calc(100vh - 48px);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
}

/* 지원자 프로필 모달 헤더의 좌우선을 본문과 맞춘다. */
body.career-biz-applicant-page .job-applicant-profile-modal-header {
    padding: 24px 32px 20px;
}

/* 지원자 프로필 모달 본문을 피그마 상세 구조의 스크롤 영역으로 정의한다. */
body.career-biz-applicant-page .job-applicant-profile-modal-body.talent-profile-detail-page {
    width: 100%;
    max-width: none;
    padding: 24px 32px 0;
    background: var(--career-white);
}

/* 지원자 프로필 상단 요약을 카드 없이 문서 흐름에 배치한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-detail-top {
    margin: 0 0 32px;
    padding: 0;
    border: 0;
    background: transparent;
}

/* 지원자 프로필 이미지와 정보 사이 간격을 피그마 기준으로 정의한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-detail-summary {
    gap: 32px;
}

/* 지원자 프로필 아바타를 80px 원형 이미지로 표시한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-avatar {
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    background: var(--career-primary);
    color: var(--career-white);
    font-size: 24px;
}

/* 지원자 프로필 이미지를 원형 영역에 맞춰 자른다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 지원자 이름을 피그마의 본문 제목 위계로 표시한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-detail-heading h2 {
    margin: 0 0 8px;
    color: var(--career-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

/* 지원자 직무와 활동 조건을 한 줄 메타 정보로 배치한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-meta-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

/* 지원자 상단 메타 정보 사이에 세로 구분선을 표시한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-meta-divider {
    width: 1px;
    height: 10px;
    background: var(--career-border);
}

/* 지원자 자기소개를 프로필 요약 아래 문서 본문으로 표시한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-intro-lead {
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    white-space: pre-line;
    word-break: break-word;
}

/* 지원자 프로필 상단과 첫 상세 섹션 사이 간격을 정의한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-detail-content {
    margin-top: 52px;
}

/* 지원자 프로필 상세 섹션 사이를 피그마의 문서 간격으로 배치한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-detail-section {
    margin-bottom: 52px;
}

/* 지원자 프로필 섹션 제목과 본문 사이에 구분선과 간격을 둔다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-detail-section-title {
    margin: 0 0 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--career-border);
    color: var(--career-ink);
    font-size: 16px;
    font-weight: 600;
}

/* 지원자 프로필 섹션 아이콘을 18px 주요 색상 원으로 표시한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-detail-section-title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--career-primary);
    color: var(--career-white);
    font-size: 9px;
}

/* 지원자 기본 정보를 피그마의 보조 표면 두 열 카드로 표시한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-basic-grid {
    display: grid;
    padding: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 18px;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
}

/* 지원자 기본 정보 각 열의 행 간격을 정의한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-basic-column {
    gap: 18px;
}

/* 지원자 보유기술 행이 기본 정보 두 열 전체를 사용하도록 정의한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-basic-wide {
    grid-column: 1 / -1;
}

/* 지원자 기본 정보의 라벨과 값을 피그마 너비로 배치한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-basic-item {
    grid-template-columns: 65px minmax(0, 1fr);
    gap: 52px;
}

/* 지원자 기본 정보의 글자 크기와 행간을 통일한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-basic-item span,
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-basic-item strong {
    font-size: 14px;
    line-height: 1.4;
}

/* 지원자 기본 정보 라벨을 보조 색상으로 표시한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-basic-item span {
    color: var(--career-muted);
    font-weight: 600;
}

/* 지원자 기본 정보 값을 기본 잉크 색상으로 표시한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-basic-item strong {
    color: var(--career-ink);
    font-weight: 500;
}

/* 지원자 자격증 목록을 하나의 보조 표면 카드로 표시한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-certificate-view {
    gap: 18px;
    padding: 24px;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
}

/* 지원자 자격증 행을 이름, 기관, 취득월 순서로 배치한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-certificate-view-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 24px;
    padding: 0;
}

/* 지원자 포트폴리오 자료를 하나의 보조 표면 카드에 배치한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-resource-list {
    gap: 18px;
    padding: 24px;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
}

/* 지원자 포트폴리오 링크의 중복 배경과 내부 여백을 제거한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-resource-link {
    min-height: 20px;
    padding: 0;
    background: transparent;
    color: var(--ref-accent-blue);
    font-size: 14px;
}

/* 지원자 포트폴리오 파일을 보조 표면 안의 단순 행으로 표시한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-resource-file {
    min-height: 32px;
    padding: 0;
    background: transparent;
}

/* 지원자 포트폴리오 파일 다운로드를 주요 외곽선 버튼으로 표시한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-resource-file a {
    border-color: var(--career-primary);
    background: var(--career-white);
    color: var(--career-primary);
}

/* 지원자 근무 경력 목록을 하나의 보조 표면 카드로 표시한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-career-list {
    display: grid;
    gap: 42px;
    padding: 24px;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
}

/* 지원자 근무 경력을 기간과 회사 정보의 두 열로 배치한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-career-row {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    align-items: start;
    gap: 42px;
}

/* 지원자 근무 경력 기간을 보조 텍스트로 표시한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-career-row > time {
    color: var(--career-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

/* 지원자 근무 경력 본문을 세로로 배치한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-career-body {
    display: grid;
    min-width: 0;
    gap: 8px;
}

/* 지원자 근무 경력 회사명과 직책을 한 줄로 표시한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-career-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--career-ink);
    font-size: 14px;
    line-height: 1.4;
}

/* 지원자 근무 경력 담당업무의 기본 여백을 제거한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-career-body p {
    margin: 0;
    color: var(--career-ink);
    font-size: 14px;
    line-height: 1.4;
}

/* 지원자 프로젝트 경력 목록을 하나의 보조 표면 카드로 표시한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-project-list {
    gap: 42px;
    padding: 24px;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
}

/* 지원자 프로젝트 경력 행의 중복 카드 표면을 제거한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-project-card {
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 42px;
    padding: 0;
    background: transparent;
}

/* 지원자 프로젝트 경력 제목 아래 간격을 정의한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-project-body h4 {
    margin: 0 0 14px;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 600;
}

/* 지원자 프로젝트 경력의 설명 행을 피그마 본문 크기로 표시한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-project-copy,
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-project-tech {
    margin-top: 0;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

/* 지원자 프로젝트 경력의 설명 라벨을 기본 굵기로 표시한다. */
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-project-copy strong,
body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-project-tech strong {
    font-weight: 500;
}

/* 지원자 프로필 모달 하단 행동 영역을 본문 좌우선과 맞춘다. */
body.career-biz-applicant-page .job-applicant-profile-modal-footer {
    padding: 16px 32px 24px;
}

/* 좁은 화면의 지원자 프로필 모달을 단일 열 문서 구조로 전환한다. */
@media (max-width: 768px) {
    body.career-biz-applicant-page .job-applicant-profile-modal {
        width: calc(100vw - 32px);
        max-height: calc(100vh - 32px);
    }

    body.career-biz-applicant-page .job-applicant-profile-modal-header,
    body.career-biz-applicant-page .job-applicant-profile-modal-footer {
        padding-right: 16px;
        padding-left: 16px;
    }

    body.career-biz-applicant-page .job-applicant-profile-modal-body.talent-profile-detail-page {
        padding: 20px 16px 0;
    }

    body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-detail-summary {
        align-items: flex-start;
        gap: 16px;
    }

    body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-avatar {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
    }

    body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-detail-content {
        margin-top: 36px;
    }

    body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-detail-section {
        margin-bottom: 36px;
    }

    body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-basic-grid,
    body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-certificate-view-row,
    body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-career-row,
    body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-project-card {
        grid-template-columns: 1fr;
    }

    body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-basic-wide {
        grid-column: auto;
    }

    body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-career-row,
    body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-project-card {
        gap: 14px;
    }

    body.career-biz-applicant-page .job-applicant-profile-modal .talent-profile-resource-file {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* 지원자 신고 사유 선택 항목을 공통 테두리 카드로 표시한다. */
body.career-biz-applicant-page .work-request-report-reason-item {
    border-color: var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    color: var(--career-text);
}

/* 지원자 신고 사유의 선택 상태를 주요 색상으로 표시한다. */
body.career-biz-applicant-page .work-request-report-reason-item.is-checked {
    border-color: var(--career-primary);
    background: var(--career-primary-soft);
}

/* 프리랜서 찾기의 공통 직군 탭과 검색 영역 사이 간격을 정의한다. */
body.career-biz-list-page .career-biz-talent-list-page .career-project-category-tabs {
    margin-bottom: 24px;
}

/* 프리랜서 찾기의 결과 수와 정렬 영역을 우측에 배치한다. */
body.career-biz-list-page .career-biz-talent-list-page .talent-search-section {
    justify-content: flex-end;
}

/* 프리랜서 찾기 목록을 카드 사이 간격이 있는 세로 목록으로 배치한다. */
body.career-biz-list-page .career-biz-talent-list {
    display: grid;
    gap: 12px;
    border-top: 0;
}

/* 프리랜서 찾기 개별 인재 행을 외곽선 카드로 표시한다. */
body.career-biz-list-page .career-biz-talent-list .talent-list-row {
    min-height: 104px;
    padding: 20px 24px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
}

/* 프리랜서 찾기 인재 카드의 탐색 상태를 주요 테두리로 표시한다. */
body.career-biz-list-page .career-biz-talent-list .talent-list-row:hover,
body.career-biz-list-page .career-biz-talent-list .talent-list-row:focus-visible {
    border-color: var(--career-primary);
    outline: 0;
}

/* 프리랜서 찾기 인재 아바타를 주요 색상으로 표시한다. */
body.career-biz-list-page .career-biz-talent-list .talent-avatar {
    background: var(--career-primary);
    color: var(--career-white);
}

/* 프리랜서 찾기 인재 이름과 값 정보를 기본 잉크 색상으로 표시한다. */
body.career-biz-list-page .career-biz-talent-list .talent-name,
body.career-biz-list-page .career-biz-talent-list .talent-finder-career-col strong,
body.career-biz-list-page .career-biz-talent-list .talent-finder-info-item strong {
    color: var(--career-ink);
}

/* 프리랜서 찾기 인재의 라벨과 보조 정보를 공통 보조 색상으로 표시한다. */
body.career-biz-list-page .career-biz-talent-list .talent-card-subtitle,
body.career-biz-list-page .career-biz-talent-list .talent-finder-career-col span,
body.career-biz-list-page .career-biz-talent-list .talent-finder-info-item span,
body.career-biz-list-page .career-biz-talent-list .talent-finder-update-col span,
body.career-biz-list-page .career-biz-talent-list .talent-finder-update-col time {
    color: var(--career-muted);
}

/* 프리랜서 상세 화면의 본문 폭과 여백을 정의한다. */
body.career-biz-detail-page .career-biz-talent-detail {
    width: min(1040px, calc(100% - 48px));
    max-width: 1040px;
    margin: 0 auto;
    padding: 48px 0 88px;
}

/* 프리랜서 상세 화면의 페이지 제목 기본 여백을 제거한다. */
body.career-biz-detail-page .talent-profile-detail-page-title {
    margin: 0;
    color: var(--career-ink);
    font-size: 26px;
    font-weight: 600;
}

/* 프리랜서 상세 화면의 프로필 요약을 외곽선 카드로 표시한다. */
body.career-biz-detail-page .talent-profile-detail-top {
    margin: 32px 0 48px;
    padding: 24px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
}

/* 프리랜서 상세 화면의 아바타를 주요 색상으로 표시한다. */
body.career-biz-detail-page .talent-profile-detail-page .talent-profile-avatar {
    width: 72px;
    height: 72px;
    background: var(--career-primary);
    color: var(--career-white);
}

/* 프리랜서 상세 화면의 인재 이름을 제목 위계로 표시한다. */
body.career-biz-detail-page .talent-profile-detail-heading h2 {
    color: var(--career-ink);
    font-size: 20px;
    font-weight: 600;
}

/* 프리랜서 상세 화면의 프로필 요약 문구를 보조 색상으로 표시한다. */
body.career-biz-detail-page .talent-profile-detail-heading p {
    color: var(--career-muted);
}

/* 프리랜서 상세 화면의 섹션 간격을 문서 흐름에 맞춘다. */
body.career-biz-detail-page .talent-profile-detail-page .talent-profile-detail-section {
    margin-bottom: 52px;
}

/* 프리랜서 상세 화면의 섹션 제목과 구분선을 공통 색상으로 표시한다. */
body.career-biz-detail-page .talent-profile-detail-page .talent-profile-detail-section-title {
    border-bottom-color: var(--career-border);
    color: var(--career-ink);
    font-size: 16px;
}

/* 프리랜서 상세 화면의 섹션 제목 아이콘을 주요 색상으로 표시한다. */
body.career-biz-detail-page .talent-profile-detail-page .talent-profile-detail-section-title i {
    background: var(--career-primary);
    color: var(--career-white);
}

/* 프리랜서 상세 화면의 정보 라벨을 공통 보조 색상으로 표시한다. */
body.career-biz-detail-page .talent-profile-basic-item span,
body.career-biz-detail-page .talent-profile-certificate-view-row span,
body.career-biz-detail-page .talent-profile-certificate-view-row time,
body.career-biz-detail-page .talent-profile-project-side,
body.career-biz-detail-page .talent-profile-project-tech {
    color: var(--career-muted);
}

/* 프리랜서 상세 화면의 정보 값을 기본 잉크 색상으로 표시한다. */
body.career-biz-detail-page .talent-profile-basic-item strong,
body.career-biz-detail-page .talent-profile-certificate-view-row strong,
body.career-biz-detail-page .talent-profile-project-body,
body.career-biz-detail-page .talent-profile-project-body h4,
body.career-biz-detail-page .talent-profile-project-copy,
body.career-biz-detail-page .talent-profile-intro-view {
    color: var(--career-ink);
}

/* 프리랜서 상세 화면의 자료와 프로젝트 경험을 보조 표면 카드로 표시한다. */
body.career-biz-detail-page .talent-profile-resource-link,
body.career-biz-detail-page .talent-profile-resource-file,
body.career-biz-detail-page .talent-profile-project-card,
body.career-biz-detail-page .talent-profile-project-empty-card {
    background: var(--career-surface);
}

/* 프리랜서 상세 화면의 자료 다운로드 행동을 주요 외곽선 버튼으로 표시한다. */
body.career-biz-detail-page .talent-profile-resource-file a {
    border-color: var(--career-primary);
    background: var(--career-white);
    color: var(--career-primary);
}

/* 프리랜서 파일 미리보기 본문의 최소 높이를 정의한다. */
body.career-biz-detail-page .talent-file-preview-body {
    min-height: 320px;
}

/* 프리랜서 파일 미리보기 모달을 공통 표준 모달 여백으로 맞춘다. */
body.career-biz-detail-page .talent-file-preview-modal {
    padding: 24px 0;
    border-radius: var(--k-radius-md);
    background: var(--career-white);
}

/* 모바일에서 기업회원 관리 화면을 단일 열 흐름으로 배치한다. */
@media (max-width: 767px) {
    body.career-biz-list-page .career-biz-page {
        width: min(100% - 32px, 1260px);
        padding-top: 32px;
        padding-bottom: 64px;
    }

    body.career-biz-list-page .career-biz-page-header,
    body.career-biz-detail-page .talent-profile-detail-top {
        align-items: stretch;
        flex-direction: column;
    }

    body.career-biz-applicant-page .job-applicant-review-mobile-list {
        gap: 12px;
        border-top: 0;
    }

    body.career-biz-applicant-page .job-applicant-review-card {
        padding: 18px 16px;
        border: 1px solid var(--career-border);
        border-radius: var(--k-radius-md);
        background: var(--career-white);
    }

    body.career-biz-applicant-page .work-request-report-reason-list {
        grid-template-columns: 1fr;
    }

    body.career-biz-list-page .career-biz-talent-list .talent-list-row {
        padding: 20px 16px;
    }

    body.career-biz-detail-page .career-biz-talent-detail {
        width: min(100% - 32px, 1040px);
        padding-top: 32px;
        padding-bottom: 64px;
    }

    body.career-biz-detail-page .talent-profile-detail-top {
        margin-top: 24px;
        padding: 20px 16px;
    }

    body.career-biz-detail-page .talent-profile-detail-summary {
        align-items: flex-start;
    }

    body.career-biz-detail-page .talent-profile-detail-page .talent-profile-basic-grid {
        padding-right: 0;
        padding-left: 0;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    body.career-biz-detail-page .talent-profile-detail-page .talent-profile-certificate-view-row,
    body.career-biz-detail-page .talent-profile-detail-page .talent-profile-project-card {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* =========================================================
   프리랜서 찾기 Figma 화면
   ========================================================= */

/* 프리랜서 찾기 직군 탭을 Figma의 50px 높이로 맞춘다. */
body.career-biz-list-page .career-biz-talent-list-page .career-project-category-tabs {
    margin-bottom: 32px;
}

/* 프리랜서 찾기 직군 탭의 글자 크기와 좌우 여백을 정의한다. */
body.career-biz-list-page .career-biz-talent-list-page .career-project-category-tab {
    min-height: 50px;
    padding: 0 16px;
    font-size: 16px;
    font-weight: 500;
}

/* 선택된 프리랜서 직군 탭을 굵은 글자로 표시한다. */
body.career-biz-list-page .career-biz-talent-list-page .career-project-category-tab.is-active {
    font-weight: 600;
}

/* 프리랜서 목록 결과 도구 모음과 카드 사이 여백을 정의한다. */
body.career-biz-list-page .career-biz-talent-list-page .talent-search-section {
    margin-bottom: 24px;
}

/* 프리랜서 목록 결과 수와 정렬 선택의 간격을 정의한다. */
body.career-biz-list-page .career-biz-talent-list-page .career-project-result-controls {
    gap: 12px;
}

/* 프리랜서 목록 전체 건수를 Figma 본문 크기로 표시한다. */
body.career-biz-list-page .career-biz-talent-list-page .career-project-total,
body.career-biz-list-page .career-biz-talent-list-page .career-project-total strong {
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
}

/* 프리랜서 목록 정렬 선택을 외곽선 없는 텍스트 셀렉트로 표시한다. */
body.career-biz-list-page .career-biz-talent-list-page .career-project-sort-select {
    min-width: 82px;
    height: 36px;
    padding: 0 24px 0 0;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
}

/* 프리랜서 목록 카드 사이를 Figma의 18px 간격으로 배치한다. */
body.career-biz-list-page .career-biz-talent-list {
    gap: 18px;
}

/* 프리랜서 목록 카드를 프로필, 핵심 정보, 소개, 스크랩 순서로 배치한다. */
body.career-biz-list-page .career-biz-talent-list .talent-list-row {
    display: grid;
    min-height: 104px;
    padding: 28px 24px;
    grid-template-columns: 300px minmax(0, 1fr) 300px 24px;
    align-items: center;
    gap: 52px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    cursor: pointer;
}

/* 프리랜서 목록의 프로필 묶음이 지정된 열 너비 안에서 줄어들도록 정의한다. */
body.career-biz-list-page .career-biz-talent-list .talent-finder-profile-col,
body.career-biz-list-page .career-biz-talent-list .talent-finder-profile-copy {
    min-width: 0;
}

/* 프리랜서 목록의 이미지와 이름 사이 간격을 정의한다. */
body.career-biz-list-page .career-biz-talent-list .talent-finder-profile {
    gap: 32px;
}

/* 프리랜서 목록 아바타를 60px 원형으로 표시한다. */
body.career-biz-list-page .career-biz-talent-list .talent-avatar {
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    border-radius: 50%;
    font-size: 20px;
    overflow: hidden;
}

/* 프리랜서 목록 프로필 이미지를 원형 영역에 맞춰 자른다. */
body.career-biz-list-page .career-biz-talent-list .talent-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 프리랜서 목록 이름을 16px 제목으로 표시한다. */
body.career-biz-list-page .career-biz-talent-list .talent-name {
    margin: 0;
    color: var(--career-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

/* 프리랜서 목록 직무와 경력을 한 줄 메타 정보로 배치한다. */
body.career-biz-list-page .career-biz-talent-list .talent-card-subline {
    display: flex;
    min-width: 0;
    margin-top: 8px;
    align-items: center;
    gap: 8px;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

/* 프리랜서 목록 메타 문구가 길 때 한 줄 말줄임으로 표시한다. */
body.career-biz-list-page .career-biz-talent-list .talent-card-subtitle {
    overflow: hidden;
    min-width: 0;
    margin: 0;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
    text-overflow: ellipsis;
}

/* 프리랜서 목록 직무와 경력 사이의 구분선을 표시한다. */
body.career-biz-list-page .career-biz-talent-list .talent-card-divider {
    width: 1px;
    height: 10px;
    flex: 0 0 1px;
    background: var(--career-border);
}

/* 프리랜서 목록의 전문 분야와 기술을 두 행으로 배치한다. */
body.career-biz-list-page .career-biz-talent-list .talent-finder-info-col {
    display: grid;
    min-width: 0;
    gap: 8px;
}

/* 프리랜서 목록 핵심 정보의 라벨과 값 너비를 정의한다. */
body.career-biz-list-page .career-biz-talent-list .talent-finder-info-item {
    display: grid;
    min-width: 0;
    grid-template-columns: 65px minmax(0, 1fr);
    align-items: center;
    gap: 24px;
}

/* 프리랜서 목록 핵심 정보 라벨을 보조 색상으로 표시한다. */
body.career-biz-list-page .career-biz-talent-list .talent-finder-info-item span {
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/* 프리랜서 목록 핵심 정보 값을 한 줄로 표시한다. */
body.career-biz-list-page .career-biz-talent-list .talent-finder-info-item strong {
    overflow: hidden;
    min-width: 0;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 프리랜서 목록 자기소개를 최대 세 줄로 표시한다. */
body.career-biz-list-page .career-biz-talent-list .talent-finder-intro {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    word-break: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* 프리랜서 목록 스크랩 버튼을 24px 아이콘 버튼으로 표시한다. */
body.career-biz-list-page .career-biz-talent-list .talent-finder-bookmark {
    display: inline-flex;
    width: 24px;
    height: 24px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--career-muted);
    font-size: 16px;
    cursor: pointer;
}

/* 저장된 프리랜서의 스크랩 아이콘을 주요 색상으로 표시한다. */
body.career-biz-list-page .career-biz-talent-list .talent-finder-bookmark.is-active {
    color: var(--career-primary);
}

/* 프리랜서 목록 페이지네이션을 Figma의 20px 텍스트 버튼으로 정의한다. */
body.career-biz-list-page .career-biz-talent-list-page .settle-pagination {
    margin-top: 32px;
    gap: 8px;
}

/* 프리랜서 목록 페이지 번호와 이동 버튼 크기를 통일한다. */
body.career-biz-list-page .career-biz-talent-list-page .settle-pagination .page-btn {
    width: 20px;
    min-width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
}

/* 현재 프리랜서 목록 페이지를 기본 잉크 색상으로 표시한다. */
body.career-biz-list-page .career-biz-talent-list-page .settle-pagination .page-btn.active {
    color: var(--career-ink);
}

/* =========================================================
   프리랜서 상세 Figma 화면
   ========================================================= */

/* 프리랜서 상세 본문을 1260px 문서 폭으로 정의한다. */
body.career-biz-detail-page .career-biz-talent-detail {
    width: min(1260px, calc(100% - 48px));
    max-width: 1260px;
    padding: 32px 0 100px;
}

/* 프리랜서 상세 제안 안내와 행동 버튼을 양쪽에 배치한다. */
body.career-biz-detail-page .career-biz-talent-cta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
}

/* 프리랜서 상세 제안 안내 제목을 Figma의 26px 위계로 표시한다. */
body.career-biz-detail-page .talent-profile-detail-page-title {
    margin: 0;
    color: var(--career-ink);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 프리랜서 상세 상단 행동 버튼을 48px 높이로 정의한다. */
body.career-biz-detail-page .career-biz-talent-cta .work-request-detail-action-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 프리랜서 상세 상단 스크랩과 제안 버튼 크기를 맞춘다. */
body.career-biz-detail-page .career-biz-talent-cta .btn-freemode {
    min-width: 80px;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--k-radius-md);
    font-size: 15px;
    font-weight: 500;
}

/* 프리랜서 상세 프로필 요약을 카드 없이 문서 흐름에 배치한다. */
body.career-biz-detail-page .talent-profile-detail-top {
    margin: 52px 0 32px;
    padding: 0;
    border: 0;
    background: transparent;
}

/* 프리랜서 상세 프로필 이미지와 정보 사이 간격을 정의한다. */
body.career-biz-detail-page .talent-profile-detail-summary {
    gap: 32px;
}

/* 프리랜서 상세 아바타를 80px 원형 이미지로 표시한다. */
body.career-biz-detail-page .talent-profile-detail-page .talent-profile-avatar {
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
    border-radius: 50%;
    font-size: 24px;
    overflow: hidden;
}

/* 프리랜서 상세 프로필 이미지를 원형 영역에 맞춰 자른다. */
body.career-biz-detail-page .talent-profile-detail-page .talent-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 프리랜서 상세 이름을 16px 제목으로 표시한다. */
body.career-biz-detail-page .talent-profile-detail-heading h2 {
    margin: 0 0 8px;
    color: var(--career-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

/* 프리랜서 이름과 응답률 지표를 같은 흐름에 배치한다. */
body.career-biz-detail-page .talent-profile-name-row {
    display: flex;
    margin-bottom: 8px;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* 이름 행 내부 제목의 중복 하단 여백을 제거한다. */
body.career-biz-detail-page .talent-profile-name-row h2 {
    margin: 0;
}

/* 응답률을 이름보다 작은 서비스 지표 배지로 표시한다. */
body.career-biz-detail-page .talent-response-rate-badge {
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 600;
}

/* 프리랜서 상세 직무와 연락 가능 시간을 한 줄로 배치한다. */
body.career-biz-detail-page .talent-profile-meta-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

/* 프리랜서 상세 상단 메타 정보 사이 구분선을 표시한다. */
body.career-biz-detail-page .talent-profile-meta-divider {
    width: 1px;
    height: 10px;
    background: var(--career-border);
}

/* 프리랜서 상세 자기소개를 프로필 아래 문서 본문으로 표시한다. */
body.career-biz-detail-page .talent-profile-intro-lead {
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    word-break: break-word;
}

/* 프리랜서 상세 프로필 상단과 첫 섹션 사이 간격을 정의한다. */
body.career-biz-detail-page .talent-profile-detail-content {
    margin-top: 52px;
}

/* 프리랜서 상세 섹션 사이를 Figma의 52px 간격으로 배치한다. */
body.career-biz-detail-page .talent-profile-detail-page .talent-profile-detail-section {
    margin-bottom: 52px;
}

/* 프리랜서 상세 섹션 제목과 본문 사이에 24px 간격을 둔다. */
body.career-biz-detail-page .talent-profile-detail-page .talent-profile-detail-section-title {
    margin: 0 0 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--career-border);
    color: var(--career-ink);
    font-size: 16px;
    font-weight: 600;
}

/* 프리랜서 상세 섹션 아이콘을 18px 주요 색상 원으로 표시한다. */
body.career-biz-detail-page .talent-profile-detail-page .talent-profile-detail-section-title i {
    width: 18px;
    height: 18px;
    background: var(--career-primary);
    color: var(--career-white);
    font-size: 9px;
}

/* 프리랜서 상세 기본 정보를 보조 표면의 두 열 카드로 표시한다. */
body.career-biz-detail-page .talent-profile-detail-page .talent-profile-basic-grid {
    display: grid;
    padding: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 18px;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
}

/* 프리랜서 상세 기본 정보 각 열의 행 간격을 정의한다. */
body.career-biz-detail-page .talent-profile-detail-page .talent-profile-basic-column {
    gap: 18px;
}

/* 프리랜서 상세 보유기술 행이 두 열 전체를 사용하도록 정의한다. */
body.career-biz-detail-page .talent-profile-detail-page .talent-profile-basic-wide {
    grid-column: 1 / -1;
}

/* 프리랜서 상세 기본 정보의 라벨과 값을 Figma 너비로 배치한다. */
body.career-biz-detail-page .talent-profile-detail-page .talent-profile-basic-item {
    grid-template-columns: 65px minmax(0, 1fr);
    gap: 52px;
}

/* 프리랜서 상세 기본 정보의 글자 크기와 굵기를 통일한다. */
body.career-biz-detail-page .talent-profile-detail-page .talent-profile-basic-item span,
body.career-biz-detail-page .talent-profile-detail-page .talent-profile-basic-item strong {
    font-size: 14px;
    line-height: 1.4;
}

/* 프리랜서 상세 기본 정보 라벨을 보조 색상으로 표시한다. */
body.career-biz-detail-page .talent-profile-detail-page .talent-profile-basic-item span {
    color: var(--career-muted);
    font-weight: 600;
}

/* 프리랜서 상세 기본 정보 값을 기본 잉크 색상으로 표시한다. */
body.career-biz-detail-page .talent-profile-detail-page .talent-profile-basic-item strong {
    color: var(--career-ink);
    font-weight: 500;
}

/* 프리랜서 자격증 목록을 보조 표면 카드로 표시한다. */
body.career-biz-detail-page .talent-profile-detail-page .talent-profile-certificate-view {
    gap: 18px;
    padding: 24px;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
}

/* 프리랜서 자격증 한 행을 이름, 기관, 취득월 순서로 배치한다. */
body.career-biz-detail-page .talent-profile-detail-page .talent-profile-certificate-view-row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 24px;
}

/* 프리랜서 포트폴리오 자료를 하나의 보조 표면 카드에 배치한다. */
body.career-biz-detail-page .talent-profile-detail-page .talent-profile-resource-list {
    gap: 18px;
    padding: 24px;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
}

/* 프리랜서 포트폴리오 링크의 중복 배경과 내부 여백을 제거한다. */
body.career-biz-detail-page .talent-profile-detail-page .talent-profile-resource-link {
    min-height: 20px;
    padding: 0;
    background: transparent;
    color: var(--ref-accent-blue);
    font-size: 14px;
}

/* 프리랜서 근무 경력 목록을 하나의 보조 표면 카드로 표시한다. */
body.career-biz-detail-page .talent-profile-career-list {
    display: grid;
    gap: 42px;
    padding: 24px;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
}

/* 프리랜서 근무 경력을 기간과 회사 정보의 두 열로 배치한다. */
body.career-biz-detail-page .talent-profile-career-row {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    align-items: start;
    gap: 42px;
}

/* 프리랜서 근무 경력 기간을 보조 텍스트로 표시한다. */
body.career-biz-detail-page .talent-profile-career-row > time {
    color: var(--career-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

/* 프리랜서 근무 경력 본문을 세로로 배치한다. */
body.career-biz-detail-page .talent-profile-career-body {
    display: grid;
    min-width: 0;
    gap: 8px;
}

/* 프리랜서 근무 경력 회사명과 직책을 한 줄로 표시한다. */
body.career-biz-detail-page .talent-profile-career-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--career-ink);
    font-size: 14px;
    line-height: 1.4;
}

/* 프리랜서 근무 경력 담당업무의 기본 여백을 제거한다. */
body.career-biz-detail-page .talent-profile-career-body p {
    margin: 0;
    color: var(--career-ink);
    font-size: 14px;
    line-height: 1.4;
}

/* 프리랜서 프로젝트 경력 목록을 하나의 보조 표면 카드로 표시한다. */
body.career-biz-detail-page .talent-profile-detail-page .talent-profile-project-list {
    gap: 42px;
    padding: 24px;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
}

/* 프리랜서 프로젝트 경력 행의 중복 카드 표면을 제거한다. */
body.career-biz-detail-page .talent-profile-detail-page .talent-profile-project-card {
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 42px;
    padding: 0;
    background: transparent;
}

/* 프리랜서 프로젝트 경력 제목 아래 간격을 정의한다. */
body.career-biz-detail-page .talent-profile-detail-page .talent-profile-project-body h4 {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 600;
}

/* 프리랜서 프로젝트 경력 설명 행의 간격과 글자 크기를 정의한다. */
body.career-biz-detail-page .talent-profile-detail-page .talent-profile-project-copy,
body.career-biz-detail-page .talent-profile-detail-page .talent-profile-project-tech {
    margin-top: 0;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

/* 프리랜서 프로젝트 경력 설명 라벨을 기본 굵기로 표시한다. */
body.career-biz-detail-page .talent-profile-detail-page .talent-profile-project-copy strong,
body.career-biz-detail-page .talent-profile-detail-page .talent-profile-project-tech strong {
    font-weight: 500;
}

/* =========================================================
   프리랜서 제안하기 팝업
   ========================================================= */

/* 제안하기 팝업이 좁은 화면에서도 안전한 외부 여백을 유지하도록 정의한다. */
body.career-mode-page .talent-offer-modal-overlay {
    padding: 16px;
}

/* 제안하기 팝업의 폭과 상하 여백을 Figma 기준으로 정의한다. */
body.career-mode-page .talent-offer-modal {
    --modal-inline-padding: 24px;
    width: min(550px, calc(100% - 32px));
    max-width: 550px;
    padding: 32px 0;
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    box-shadow: var(--k-shadow-soft);
}

/* 제안하기 팝업 제목과 입력 영역 사이 간격을 정의한다. */
body.career-mode-page .talent-offer-modal > .modal-header {
    margin: 0 0 42px;
    padding-top: 0;
    padding-bottom: 0;
}

/* 제안하기 팝업 제목을 18px 위계로 표시한다. */
body.career-mode-page .talent-offer-modal .modal-title {
    color: var(--career-ink);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

/* 제안하기 팝업 본문이 입력 영역만 스크롤하도록 정의한다. */
body.career-mode-page .talent-offer-modal-body {
    overflow-y: auto;
}

/* 제안하기 팝업 입력 항목을 32px 간격의 세로 흐름으로 배치한다. */
body.career-mode-page .talent-offer-form {
    display: grid;
    gap: 32px;
}

/* 제안하기 팝업의 공고 연결과 포지션 연결을 세로로 구분한다. */
body.career-mode-page .talent-offer-source-grid {
    display: grid;
    gap: 32px;
}

/* 제안하기 팝업 필드의 기본 하단 여백을 제거한다. */
body.career-mode-page .talent-offer-form .form-group {
    min-width: 0;
    margin: 0;
}

/* 제안하기 팝업 라벨을 Figma의 15px 위계로 표시한다. */
body.career-mode-page .talent-offer-form .form-label {
    margin-bottom: var(--k-space-form-label);
    color: var(--career-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

/* 제안하기 팝업의 예상 시작일과 예상 기간을 같은 행에 배치한다. */
body.career-mode-page .talent-offer-field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

/* 제안하기 팝업 입력 요소를 36px 공통 입력으로 정의한다. */
body.career-mode-page .talent-offer-form .input-freemode,
body.career-mode-page .talent-offer-form .select-freemode {
    width: 100%;
    height: 36px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background-color: var(--career-white);
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
}

/* 제안하기 팝업의 날짜 입력 문구가 달력 아이콘과 겹치지 않도록 오른쪽 여백을 확보한다. */
body.career-mode-page .talent-offer-form .job-posting-date-input-wrap .input-freemode {
    padding-right: 34px;
    cursor: pointer;
}

/* 제안하기 팝업 프로젝트 형태 그룹의 기본 필드셋 장식을 제거한다. */
body.career-mode-page .talent-offer-work-type {
    padding: 0;
    border: 0;
}

/* 제안하기 팝업 프로젝트 형태 선택지를 가로로 배치한다. */
body.career-mode-page .talent-offer-radio-group {
    display: flex;
    min-height: 40px;
    padding: 10px 0;
    align-items: center;
    gap: 16px;
}

/* 제안하기 팝업 프로젝트 형태 라디오와 문구를 정렬한다. */
body.career-mode-page .talent-offer-radio-group label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

/* 제안하기 팝업 선택 라디오를 주요 색상으로 표시한다. */
body.career-mode-page .talent-offer-radio-group input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--career-primary);
}

/* 제안하기 팝업의 제안·프로젝트 내용 입력 높이를 200px로 정의한다. */
body.career-mode-page .talent-offer-form textarea.talent-offer-textarea {
    height: 200px;
    min-height: 200px;
    padding: 18px;
    line-height: 1.4;
    resize: none;
}

/* 제안하기 팝업 하단 행동과 본문 사이 간격을 정의한다. */
body.career-mode-page .talent-offer-modal > .modal-footer {
    padding-top: 52px;
    gap: 8px;
}

/* 제안하기 팝업 하단 버튼을 같은 너비의 42px 버튼으로 표시한다. */
body.career-mode-page .talent-offer-modal > .modal-footer .btn-freemode {
    min-width: 0;
    height: 42px;
    flex: 1;
    border-radius: var(--k-radius-md);
    font-size: 14px;
    font-weight: 500;
}

/* 제안 수락 후 연락처 공개 기간 안내를 보조 표면으로 표시한다. */
body.career-mode-page .talent-offer-contact-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 14px;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
    color: var(--career-muted);
    font-size: 12px;
    line-height: 1.4;
}

/* 태블릿에서 프리랜서 목록 카드를 두 열 중심 구조로 전환한다. */
@media (max-width: 1023px) {
    body.career-biz-list-page .career-biz-talent-list .talent-list-row {
        grid-template-columns: minmax(0, 1fr) 24px;
        gap: 20px;
    }

    body.career-biz-list-page .career-biz-talent-list .talent-finder-info-col,
    body.career-biz-list-page .career-biz-talent-list .talent-finder-intro {
        grid-column: 1 / -1;
    }

    body.career-biz-list-page .career-biz-talent-list .talent-finder-bookmark {
        grid-column: 2;
        grid-row: 1;
    }
}

/* 모바일에서 프리랜서 상세과 제안 팝업을 단일 열로 배치한다. */
@media (max-width: 767px) {
    body.career-biz-detail-page .career-biz-talent-detail {
        width: min(100% - 32px, 1260px);
        padding-top: 32px;
        padding-bottom: 64px;
    }

    body.career-biz-detail-page .career-biz-talent-cta,
    body.career-biz-detail-page .talent-profile-detail-top {
        align-items: stretch;
        flex-direction: column;
    }

    body.career-biz-detail-page .career-biz-talent-cta .work-request-detail-action-group,
    body.career-biz-detail-page .career-biz-talent-cta .btn-freemode {
        width: 100%;
    }

    body.career-biz-detail-page .talent-profile-detail-summary {
        align-items: flex-start;
    }

    body.career-biz-detail-page .talent-profile-detail-page .talent-profile-basic-grid,
    body.career-mode-page .talent-offer-field-row {
        grid-template-columns: 1fr;
    }

    body.career-biz-detail-page .talent-profile-detail-page .talent-profile-basic-wide {
        grid-column: auto;
    }

    body.career-biz-detail-page .talent-profile-career-row,
    body.career-biz-detail-page .talent-profile-detail-page .talent-profile-project-card {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    body.career-mode-page .talent-offer-modal {
        width: 100%;
        max-height: calc(100vh - 32px);
        padding-top: 24px;
        padding-bottom: 24px;
    }
}

/* =========================================================
   지원자 미확정 사유 모달
   ========================================================= */

/* 지원 결과 안내 모달이 좁은 화면에서도 안전한 외부 여백을 유지하도록 정의한다. */
body.career-mode-page .applicant-result-message-overlay {
    padding: 16px;
}

/* 지원 결과 안내 모달의 폭과 내부 여백을 Figma 기준으로 정의한다. */
body.career-mode-page .applicant-result-message-modal {
    --modal-inline-padding: 24px;
    width: min(500px, calc(100% - 32px));
    max-width: 500px;
    padding: 32px 0;
    border-radius: var(--k-radius-md);
    background: var(--career-white);
}

/* 지원 결과 안내 모달의 제목 영역 간격을 정의한다. */
body.career-mode-page .applicant-result-message-header {
    margin: 0;
    padding-bottom: 0;
    align-items: flex-start;
}

/* 지원 결과 안내 모달의 제목 묶음이 전체 폭을 사용하도록 정의한다. */
body.career-mode-page .applicant-result-message-header > div {
    min-width: 0;
    flex: 1;
}

/* 미확정 상태에서 Figma에 없는 상단 닫기 버튼을 숨긴다. */
body.career-mode-page .applicant-result-message-close[hidden] {
    display: none;
}

/* 지원 결과 안내 모달 제목을 Figma의 헤드라인 위계로 표시한다. */
body.career-mode-page .applicant-result-message-header .modal-title {
    color: var(--career-ink);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 지원 결과 안내 모달 설명을 제목 아래 보조 문구로 표시한다. */
body.career-mode-page .applicant-result-message-description {
    margin: 8px 0 0;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 불합격 상태에서만 지원자 알림과 상태 변경 제한 안내를 표시한다. */
body.career-mode-page .applicant-result-message-warning {
    display: none;
    margin-top: 18px;
    padding: var(--k-space-form-label);
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
    color: var(--career-muted);
}

/* 미확정 사유 모달에서 안내 상자를 노출한다. */
body.career-mode-page .applicant-result-message-modal.is-failed .applicant-result-message-warning {
    display: flex;
}

/* 불합격 안내 아이콘과 제목을 한 행에 정렬한다. */
body.career-mode-page .applicant-result-message-warning-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

/* 불합격 처리 주의사항을 피그마의 들여쓰기 목록으로 표시한다. */
body.career-mode-page .applicant-result-message-warning ul {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 지원 결과 안내 모달 본문의 기본 상단 간격을 정의한다. */
body.career-mode-page .applicant-result-message-body {
    display: flex;
    padding-top: 24px;
    flex-direction: column;
    gap: 24px;
}

/* 미확정 사유 모달 본문의 섹션 간격을 Figma 기준으로 넓힌다. */
body.career-mode-page .applicant-result-message-modal.is-failed .applicant-result-message-body {
    padding-top: 42px;
    gap: 32px;
}

/* 숨김 상태인 미확정 사유 선택 영역을 화면에서 제외한다. */
body.career-mode-page .applicant-result-message-reason-group[hidden] {
    display: none;
}

/* 미확정 사유 선택 영역의 필드셋 기본 모양을 제거한다. */
body.career-mode-page .applicant-result-message-reason-group {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* 미확정 사유 선택 라벨을 보조 제목으로 표시한다. */
body.career-mode-page .applicant-result-message-reason-group legend {
    width: 100%;
    margin: 0 0 var(--k-space-form-label);
    padding: 0;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 미확정 사유 항목을 일정한 간격의 세로 목록으로 배치한다. */
body.career-mode-page .applicant-result-message-reason-list {
    display: grid;
    gap: 8px;
}

/* 미확정 사유 한 항목을 라디오와 문구가 있는 외곽선 카드로 표시한다. */
body.career-mode-page .applicant-result-message-reason-item {
    display: flex;
    min-height: 44px;
    padding: 10px 14px;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    color: var(--career-ink);
    cursor: pointer;
}

/* 미확정 사유 항목의 탐색 상태를 주요 테두리로 표시한다. */
body.career-mode-page .applicant-result-message-reason-item:hover,
body.career-mode-page .applicant-result-message-reason-item:focus-within {
    border-color: var(--career-primary);
}

/* 미확정 사유 라디오 버튼의 크기와 강조색을 정의한다. */
body.career-mode-page .applicant-result-message-reason-item input {
    width: 16px;
    height: 16px;
    margin: 0;
    flex: 0 0 16px;
    accent-color: var(--career-primary);
}

/* 미확정 사유 문구를 Figma의 본문 위계로 표시한다. */
body.career-mode-page .applicant-result-message-reason-item span {
    min-width: 0;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
    word-break: break-word;
}

/* 지원 결과 상세내용 입력 그룹의 불필요한 하단 여백을 제거한다. */
body.career-mode-page .applicant-result-message-detail-group {
    margin: 0;
}

/* 지원 결과 상세내용 라벨을 보조 제목으로 표시한다. */
body.career-mode-page .applicant-result-message-detail-group .form-label {
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 지원 결과 상세내용 입력을 Figma의 문서형 텍스트 영역으로 표시한다. */
body.career-mode-page .applicant-result-message-detail-group .career-biz-modal-textarea {
    width: 100%;
    min-height: 100px;
    border-color: var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 지원 결과 입력 오류 문구는 내용이 있을 때만 표시한다. */
body.career-mode-page .applicant-result-message-error {
    min-height: 0;
    margin: 6px 0 0;
    color: var(--fm-color-danger);
    font-size: 12px;
    line-height: 1.5;
}

body.career-mode-page .applicant-result-message-error:empty {
    display: none;
}

/* 지원 결과 안내 모달의 확인과 취소 버튼을 같은 폭으로 배치한다. */
body.career-mode-page .applicant-result-message-actions {
    display: grid;
    margin-top: 24px;
    padding-top: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

/* 미확정 사유 모달의 본문과 버튼 사이 간격을 Figma 기준으로 정의한다. */
body.career-mode-page .applicant-result-message-modal.is-failed .applicant-result-message-actions {
    margin-top: 52px;
}

/* 지원 결과 안내 모달의 하단 버튼 크기를 통일한다. */
body.career-mode-page .applicant-result-message-actions .btn-freemode {
    width: 100%;
    min-height: 42px;
}

/* 지원 결과 안내 모달의 취소 버튼을 중립 표면으로 표시한다. */
body.career-mode-page .applicant-result-message-actions [data-result-message-action="cancel"] {
    border-color: var(--career-border);
    background: var(--career-surface);
    color: var(--career-ink);
}

/* 모바일에서 미확정 사유 모달의 여백과 버튼 간격을 축소한다. */
@media (max-width: 767px) {
    body.career-mode-page .applicant-result-message-overlay {
        padding: 12px;
    }

    body.career-mode-page .applicant-result-message-modal {
        width: 100%;
        padding: 24px 0;
    }

    body.career-mode-page .applicant-result-message-modal.is-failed .applicant-result-message-body {
        padding-top: 32px;
    }

    body.career-mode-page .applicant-result-message-modal.is-failed .applicant-result-message-actions {
        margin-top: 32px;
    }
}

/* =========================================================
   기업 관심 프리랜서 목록·메모 팝업
   ========================================================= */

/* 관심 프리랜서 목록의 본문 폭과 상하 여백을 정의한다. */
body.company-talent-bookmark-page .company-talent-bookmark-shell {
    width: min(1260px, calc(100% - 64px));
    margin: 0 auto;
    padding: 32px 0 96px;
}

/* 관심 프리랜서 페이지 제목 아래 간격을 정의한다. */
body.company-talent-bookmark-page .company-talent-bookmark-header {
    margin-bottom: 32px;
}

/* 관심 프리랜서 직군을 하단선 탭 한 행으로 배치한다. */
body.company-talent-bookmark-page .company-talent-category-tabs {
    display: flex;
    overflow-x: auto;
    align-items: center;
    border-bottom: 1px solid var(--career-border);
    scrollbar-width: none;
}

/* 관심 프리랜서 직군 탭의 스크롤바를 화면에서 숨긴다. */
body.company-talent-bookmark-page .company-talent-category-tabs::-webkit-scrollbar {
    display: none;
}

/* 관심 프리랜서 직군 탭의 기본 타이포그래피와 클릭 영역을 정의한다. */
body.company-talent-bookmark-page .company-talent-category-tab {
    position: relative;
    min-width: max-content;
    min-height: 50px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: var(--career-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

/* 선택하거나 탐색 중인 관심 프리랜서 직군을 주요 색상으로 표시한다. */
body.company-talent-bookmark-page .company-talent-category-tab.is-active,
body.company-talent-bookmark-page .company-talent-category-tab:hover,
body.company-talent-bookmark-page .company-talent-category-tab:focus-visible {
    color: var(--career-primary);
    outline: 0;
}

/* 선택된 관심 프리랜서 직군 하단선을 프리랜서 찾기 탭과 같은 2px로 표시한다. */
body.company-talent-bookmark-page .company-talent-category-tab.is-active::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: var(--career-primary);
    content: "";
}

/* 관심 프리랜서 전체 건수와 정렬을 목록 우측에 배치한다. */
body.company-talent-bookmark-page .company-talent-bookmark-toolbar {
    display: flex;
    margin: 28px 0 14px;
    align-items: center;
    justify-content: flex-end;
}

/* 관심 프리랜서 카드 목록을 일정한 세로 간격으로 배치한다. */
body.company-talent-bookmark-page .company-talent-bookmark-list {
    display: grid;
    gap: 18px;
}

/* 관심 프리랜서 카드의 공통 외곽선과 표면을 정의한다. */
body.company-talent-bookmark-page .company-talent-bookmark-card {
    overflow: hidden;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
}

/* 비공개 관심 프리랜서 카드를 보조 표면으로 구분한다. */
body.company-talent-bookmark-page .company-talent-bookmark-card.is-private {
    background: var(--career-surface);
}

/* 관심 프리랜서 카드 본문을 프로필·정보·행동·관심 아이콘 네 열로 배치한다. */
body.company-talent-bookmark-page .company-talent-bookmark-card-main {
    display: grid;
    min-height: 124px;
    padding: 27px 24px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 130px 24px;
    align-items: center;
    column-gap: 52px;
    box-sizing: border-box;
}

/* 관심 프리랜서 프로필 이미지와 이름 정보를 한 행에 정렬한다. */
body.company-talent-bookmark-page .company-talent-bookmark-profile {
    display: flex;
    min-width: 0;
    padding: 0;
    align-items: center;
    gap: 32px;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    text-align: left;
}

/* 이동 가능한 관심 프리랜서 프로필에 탐색 커서를 적용한다. */
body.company-talent-bookmark-page button.company-talent-bookmark-profile {
    cursor: pointer;
}

/* 관심 프리랜서 프로필의 키보드 초점을 주요 색상으로 표시한다. */
body.company-talent-bookmark-page button.company-talent-bookmark-profile:focus-visible {
    border-radius: var(--k-radius-md);
    outline: 2px solid var(--career-primary);
    outline-offset: 4px;
}

/* 관심 프리랜서 프로필 이미지를 60px 원형으로 표시한다. */
body.company-talent-bookmark-page .company-talent-bookmark-avatar {
    display: inline-flex;
    overflow: hidden;
    width: 60px;
    height: 60px;
    flex: 0 0 60px;
    align-items: center;
    justify-content: center;
    border-radius: var(--k-radius-pill);
    background: var(--career-primary-soft);
    color: var(--career-primary);
    font-size: 20px;
    font-weight: 600;
}

/* 관심 프리랜서 프로필 이미지가 원형 영역을 채우도록 정의한다. */
body.company-talent-bookmark-page .company-talent-bookmark-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 관심 프리랜서 이름과 요약 정보가 남은 폭을 사용하도록 정의한다. */
body.company-talent-bookmark-page .company-talent-bookmark-identity {
    display: block;
    min-width: 0;
}

/* 관심 프리랜서 이름을 카드의 주요 정보로 표시한다. */
body.company-talent-bookmark-page .company-talent-bookmark-identity > strong {
    display: block;
    overflow: hidden;
    color: var(--career-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 관심 프리랜서 직무·경력·상주 정보를 이름 아래 한 행으로 배치한다. */
body.company-talent-bookmark-page .company-talent-bookmark-meta {
    display: flex;
    min-width: 0;
    margin-top: 8px;
    flex-wrap: wrap;
    align-items: center;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

/* 관심 프리랜서 요약 정보 사이에 세로 구분선을 표시한다. */
body.company-talent-bookmark-page .company-talent-bookmark-meta > span + span::before {
    display: inline-block;
    width: 1px;
    height: 12px;
    margin: 0 10px;
    background: var(--career-border);
    content: "";
    vertical-align: -1px;
}

/* 관심 프리랜서 전문 분야와 보유기술을 두 행으로 배치한다. */
body.company-talent-bookmark-page .company-talent-bookmark-facts {
    display: grid;
    min-width: 0;
    margin: 0;
    gap: 18px;
}

/* 관심 프리랜서 정보 행의 라벨과 값을 고정 간격으로 정렬한다. */
body.company-talent-bookmark-page .company-talent-bookmark-facts > div {
    display: grid;
    min-width: 0;
    grid-template-columns: 65px minmax(0, 1fr);
    align-items: center;
    column-gap: 24px;
}

/* 관심 프리랜서 정보 라벨을 보조 색상으로 표시한다. */
body.company-talent-bookmark-page .company-talent-bookmark-facts dt {
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

/* 관심 프리랜서 정보 값을 한 줄로 표시한다. */
body.company-talent-bookmark-page .company-talent-bookmark-facts dd {
    overflow: hidden;
    margin: 0;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 관심 프리랜서 메모와 제안 행동을 카드 안에서 세로로 배치한다. */
body.company-talent-bookmark-page .company-talent-bookmark-actions {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
}

/* 관심 프리랜서 카드 행동 버튼을 Figma의 얇은 버튼 크기로 정의한다. */
body.company-talent-bookmark-page .company-talent-bookmark-actions .btn-freemode {
    width: 96px;
    min-width: 96px;
    height: 28px;
    min-height: 28px;
    padding: 0 12px;
    border-radius: var(--k-radius-md);
    font-size: 13px;
    font-weight: 500;
}

/* 관심 프리랜서 해제 아이콘을 24px 무장식 버튼으로 표시한다. */
body.company-talent-bookmark-page .company-talent-bookmark-toggle {
    display: inline-flex;
    width: 24px;
    height: 24px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--career-primary);
    font-size: 20px;
    cursor: pointer;
}

/* 관심 프리랜서 해제 아이콘의 키보드 초점을 표시한다. */
body.company-talent-bookmark-page .company-talent-bookmark-toggle:focus-visible {
    border-radius: var(--k-radius-sm);
    outline: 2px solid var(--career-primary);
    outline-offset: 2px;
}

/* 저장된 메모를 카드 하단의 보조 표면 행으로 표시한다. */
body.company-talent-bookmark-page .company-talent-bookmark-memo-row {
    display: flex;
    min-height: 48px;
    padding: 0 24px;
    align-items: center;
    gap: 14px;
    border-top: 1px solid var(--career-border);
    background: var(--career-surface);
    box-sizing: border-box;
}

/* 관심 프리랜서 메모 라벨을 고정 너비로 표시한다. */
body.company-talent-bookmark-page .company-talent-bookmark-memo-row strong {
    flex: 0 0 auto;
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 600;
}

/* 관심 프리랜서 메모 본문을 한 줄 말줄임으로 표시한다. */
body.company-talent-bookmark-page .company-talent-bookmark-memo-row p {
    overflow: hidden;
    margin: 0;
    color: var(--career-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 관심 프리랜서 빈 상태가 목록 전체 폭을 사용하도록 정의한다. */
body.company-talent-bookmark-page .company-talent-bookmark-list .career-activity-empty-state {
    width: 100%;
    box-sizing: border-box;
}

/* 관심 프리랜서 목록과 페이지네이션 사이 간격을 정의한다. */
body.company-talent-bookmark-page .company-talent-bookmark-list + .job-pagination {
    margin-top: 36px;
}

/* 메모 팝업이 좁은 화면에서도 안전한 외부 여백을 유지하도록 정의한다. */
body.company-talent-bookmark-page .company-talent-memo-overlay {
    padding: 16px;
}

/* 메모 팝업의 폭과 내부 상하 여백을 Figma 기준으로 정의한다. */
body.company-talent-bookmark-page .company-talent-memo-modal {
    --modal-inline-padding: 24px;
    width: min(400px, calc(100% - 32px));
    max-width: 400px;
    padding: 32px 0;
    border-radius: var(--k-radius-md);
    background: var(--career-white);
}

/* 메모 팝업 제목과 입력 영역 사이 간격을 정의한다. */
body.company-talent-bookmark-page .company-talent-memo-modal > .modal-header {
    margin: 0 0 42px;
    padding-top: 0;
    padding-bottom: 0;
}

/* 메모 팝업 제목을 18px 위계로 표시한다. */
body.company-talent-bookmark-page .company-talent-memo-modal .modal-title {
    color: var(--career-ink);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

/* 메모 팝업 본문이 입력 영역 높이를 그대로 사용하도록 정의한다. */
body.company-talent-bookmark-page .company-talent-memo-body {
    overflow: visible;
}

/* 메모 입력 영역을 100px 높이의 공통 외곽선 입력으로 표시한다. */
body.company-talent-bookmark-page .company-talent-memo-textarea {
    width: 100%;
    height: 100px;
    min-height: 100px;
    padding: 10px 14px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    resize: none;
    box-sizing: border-box;
}

/* 메모 팝업 입력의 키보드 초점을 주요 테두리로 표시한다. */
body.company-talent-bookmark-page .company-talent-memo-textarea:focus {
    border-color: var(--career-primary);
    outline: 0;
}

/* 메모 팝업 하단 행동을 입력 영역에서 52px 떨어진 두 열로 배치한다. */
body.company-talent-bookmark-page .company-talent-memo-actions {
    display: grid;
    padding-top: 52px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

/* 메모 팝업 저장과 취소 버튼을 같은 42px 높이로 표시한다. */
body.company-talent-bookmark-page .company-talent-memo-actions .btn-freemode {
    width: 100%;
    min-width: 0;
    height: 42px;
    min-height: 42px;
    border-radius: var(--k-radius-md);
    font-size: 14px;
    font-weight: 500;
}

/* 메모 팝업이 열린 동안 배경 스크롤을 제한한다. */
body.company-talent-memo-open {
    overflow: hidden;
}

/* 스타일 가이드의 관심 프리랜서 패턴 묶음 아래 간격을 정의한다. */
.style-guide-company-talent-bookmark-preview {
    margin-bottom: 28px;
}

/* 스타일 가이드에서 메모 팝업을 보조 표면 위 정적 예시로 표시한다. */
.style-guide-company-talent-memo-preview {
    display: flex;
    margin-top: 24px;
    padding: 32px 24px;
    justify-content: center;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
}

/* 스타일 가이드의 메모 팝업이 실제 팝업과 같은 너비를 유지하도록 정의한다. */
.style-guide-company-talent-memo-preview .company-talent-memo-modal {
    flex: 0 1 400px;
}

/* 태블릿에서 관심 프리랜서 카드를 유동형 두 열 구조로 전환한다. */
@media (max-width: 1023px) {
    body.company-talent-bookmark-page .company-talent-bookmark-card-main {
        padding: 24px;
        grid-template-columns: minmax(0, 1fr) 24px;
        row-gap: 24px;
        column-gap: 20px;
    }

    body.company-talent-bookmark-page .company-talent-bookmark-facts,
    body.company-talent-bookmark-page .company-talent-bookmark-actions {
        grid-column: 1 / -1;
    }

    body.company-talent-bookmark-page .company-talent-bookmark-actions {
        align-items: center;
        flex-direction: row;
        justify-content: flex-end;
    }

    body.company-talent-bookmark-page .company-talent-bookmark-toggle {
        grid-column: 2;
        grid-row: 1;
    }
}

/* 모바일에서 관심 프리랜서 목록과 메모 팝업을 좁은 화면 폭에 맞춘다. */
@media (max-width: 767px) {
    body.company-talent-bookmark-page .company-talent-bookmark-shell {
        width: calc(100% - 32px);
        padding-top: 24px;
        padding-bottom: 64px;
    }

    body.company-talent-bookmark-page .company-talent-bookmark-header {
        margin-bottom: 24px;
    }

    body.company-talent-bookmark-page .company-talent-category-tab {
        min-height: 46px;
        padding: 0 12px;
    }

    body.company-talent-bookmark-page .company-talent-bookmark-card-main {
        padding: 24px 16px;
    }

    body.company-talent-bookmark-page .company-talent-bookmark-profile {
        gap: 16px;
    }

    body.company-talent-bookmark-page .company-talent-bookmark-facts > div {
        grid-template-columns: 65px minmax(0, 1fr);
        column-gap: 14px;
    }

    body.company-talent-bookmark-page .company-talent-bookmark-actions .btn-freemode {
        width: 100%;
        flex: 1;
    }

    body.company-talent-bookmark-page .company-talent-bookmark-memo-row {
        min-height: 64px;
        padding: 14px 16px;
        align-items: flex-start;
    }

    body.company-talent-bookmark-page .company-talent-memo-modal {
        width: 100%;
        padding: 24px 0;
    }

    body.company-talent-bookmark-page .company-talent-memo-modal > .modal-header {
        margin-bottom: 32px;
    }

    body.company-talent-bookmark-page .company-talent-memo-actions {
        padding-top: 32px;
    }
}

/* =========================================================
   기업 통합 지원자 관리 화면
   ========================================================= */

/* 지원자 관리 본문을 피그마의 1260px 기준 폭으로 정렬한다. */
body.company-applicant-board-page .company-applicant-board-shell {
    width: min(calc(100% - 32px), 1260px);
    max-width: 1260px;
}

/* 프로젝트 요약과 공고 행동을 상단 양쪽에 배치한다. */
body.company-applicant-board-page .company-applicant-board-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-space-xl);
}

/* 프로젝트 제목과 모집 마감일을 세로 위계로 구성한다. */
body.company-applicant-board-page .company-applicant-board-summary {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--k-space-form-label);
}

/* 프로젝트 제목이 긴 경우 한 줄에서 말줄임 처리한다. */
body.company-applicant-board-page .company-applicant-board-summary .job-section-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 모집 마감일과 D-day 배지를 한 행에 정렬한다. */
body.company-applicant-board-page .company-applicant-deadline {
    display: flex;
    align-items: center;
    gap: var(--k-space-sm);
    color: var(--career-ink);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

/* 모집 마감일 값을 본문과 같은 위계로 표시한다. */
body.company-applicant-board-page .company-applicant-deadline strong {
    font-weight: 500;
}

/* 모집 마감 D-day를 위험 상태 배지로 표시한다. */
body.company-applicant-board-page .company-applicant-deadline em {
    display: inline-flex;
    min-height: 20px;
    padding: 2px 10px;
    align-items: center;
    justify-content: center;
    border-radius: var(--k-radius-pill);
    background: var(--fm-color-danger-soft);
    color: var(--fm-color-danger);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.3;
}

/* 숨긴 모집 마감 배지는 화면 배치에서 제외한다. */
body.company-applicant-board-page .company-applicant-deadline em[hidden] {
    display: none;
}

/* 공고보기와 마감하기 행동 버튼을 피그마 간격으로 정렬한다. */
body.company-applicant-board-page .company-applicant-board-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--k-space-sm);
}

/* 통합 지원자 보드를 피그마 높이로 유지하고 가로 스크롤 영역을 정의한다. */
body.company-applicant-board-page .company-applicant-board-scroll {
    box-sizing: border-box;
    width: 100%;
    height: 949px;
    margin-top: 52px;
    padding: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
}

/* 네 개 지원자 단계를 동일한 폭과 전체 높이의 칸반 열로 배치한다. */
body.company-applicant-board-page .company-applicant-board {
    display: grid;
    width: 100%;
    height: 100%;
    min-width: 1222px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px;
}

/* 개별 지원자 단계를 옅은 브랜드 표면의 세로 목록으로 표시한다. */
body.company-applicant-board-page .company-applicant-column {
    display: flex;
    min-height: 0;
    padding: 18px 16px;
    flex-direction: column;
    gap: var(--k-space-xl);
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: var(--k-radius-md);
    background: var(--career-primary-soft);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* 불합격 단계는 피그마의 중립 회색 표면으로 구분한다. */
body.company-applicant-board-page .company-applicant-column[data-status="FAILED"] {
    background: var(--k-border-light-color);
}

/* 드래그 중 현재 놓을 수 있는 열을 브랜드 테두리로 강조한다. */
body.company-applicant-board-page .company-applicant-column.is-drop-target {
    border-color: var(--career-primary);
    box-shadow: var(--k-shadow-soft);
}

/* 단계 제목과 관리 아이콘을 한 행 양쪽에 배치한다. */
body.company-applicant-board-page .company-applicant-column-header {
    position: relative;
    display: flex;
    min-height: 22px;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-space-lg);
}

/* 단계 전체 선택, 제목과 지원자 수를 한 행에 정렬한다. */
body.company-applicant-board-page .company-applicant-column-title {
    display: flex;
    min-width: 0;
    padding: 0 var(--k-space-sm);
    align-items: center;
    gap: var(--k-space-xs);
    color: var(--career-ink);
    font-size: 16px;
    line-height: 1.4;
}

/* 전체 선택 체크박스와 제목 사이에 피그마 간격을 적용한다. */
body.company-applicant-board-page .company-applicant-column-title .company-applicant-select-control {
    margin-right: var(--k-space-md);
}

/* 단계 제목과 건수를 같은 굵기로 표시한다. */
body.company-applicant-board-page .company-applicant-column-title strong,
body.company-applicant-board-page .company-applicant-column-title > span {
    font-weight: 600;
    white-space: nowrap;
}

/* 단계의 추후 관리 메뉴 버튼을 테두리 없는 아이콘으로 표시한다. */
body.company-applicant-board-page .company-applicant-column-menu {
    display: inline-flex;
    width: 33px;
    height: 22px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--career-muted);
    cursor: pointer;
}

/* 단계 관리 아이콘의 탐색 상태를 브랜드 색상으로 표시한다. */
body.company-applicant-board-page .company-applicant-column-menu:hover,
body.company-applicant-board-page .company-applicant-column-menu:focus-visible {
    color: var(--career-primary);
    outline: 0;
}

/* 컬럼 이동 메뉴 버튼과 목록을 같은 기준점에 배치한다. */
body.company-applicant-board-page .company-applicant-column-menu-wrap {
    position: relative;
    flex: 0 0 auto;
}

/* 선택 지원자의 이동 가능 단계를 컬럼 헤더 아래 메뉴로 표시한다. */
body.company-applicant-board-page .company-applicant-column-action-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: var(--k-z-dropdown);
    display: flex;
    width: 132px;
    padding: var(--k-space-xs);
    flex-direction: column;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    box-shadow: var(--k-shadow-soft);
}

/* 닫힌 컬럼 이동 메뉴는 화면 배치에서 제외한다. */
body.company-applicant-board-page .company-applicant-column-action-menu[hidden] {
    display: none;
}

/* 컬럼 이동 항목을 공통 드롭다운 행동 버튼으로 표시한다. */
body.company-applicant-board-page .company-applicant-column-action-menu button {
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--k-radius-sm);
    background: transparent;
    color: var(--career-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

/* 컬럼 이동 항목의 탐색 상태를 브랜드 표면으로 구분한다. */
body.company-applicant-board-page .company-applicant-column-action-menu button:hover,
body.company-applicant-board-page .company-applicant-column-action-menu button:focus-visible {
    background: var(--career-primary-soft);
    color: var(--career-primary);
    outline: 0;
}

/* 단계 안의 지원자 카드를 일정한 세로 간격으로 배치하고 초과 카드를 내부 스크롤한다. */
body.company-applicant-board-page .company-applicant-card-list {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    gap: var(--k-space-md);
    overflow-y: auto;
}

/* 지원자 카드를 피그마의 흰색 테두리 카드로 표시한다. */
body.company-applicant-board-page .company-applicant-card {
    display: flex;
    width: 100%;
    padding: 18px;
    flex-direction: column;
    gap: 18px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    color: var(--career-ink);
    cursor: grab;
    transition: border-color 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}

/* 선택된 지원자 카드에 브랜드 테두리와 약한 그림자를 적용한다. */
body.company-applicant-board-page .company-applicant-card.is-selected {
    border-color: var(--career-primary);
    box-shadow: var(--k-shadow-soft);
}

/* 드래그 대상과 이동 복제 카드의 시각적 위계를 조정한다. */
body.company-applicant-board-page .company-applicant-card.is-chosen,
body.company-applicant-board-page .company-applicant-card.is-dragging-card {
    cursor: grabbing;
}

/* 드래그 자리 표시 카드의 투명도를 낮춘다. */
body.company-applicant-board-page .company-applicant-card.is-ghost {
    opacity: 0.45;
}

/* 지원자 이름과 카드 도구를 상단 양쪽에 배치한다. */
body.company-applicant-board-page .company-applicant-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

/* 카드 선택 체크박스와 지원자 이름을 한 행에 배치한다. */
body.company-applicant-board-page .company-applicant-card-name {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--k-space-sm);
}

/* 지원자 이름을 카드 제목 위계로 표시한다. */
body.company-applicant-board-page .company-applicant-card-name strong {
    overflow: hidden;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 카드와 열에서 공통 사용하는 16px 선택 체크박스를 정의한다. */
body.company-applicant-board-page .company-applicant-select-control {
    position: relative;
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* 기본 체크박스는 접근성을 유지한 채 시각적으로 숨긴다. */
body.company-applicant-board-page .company-applicant-select-control input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    opacity: 0;
}

/* 사용자 정의 체크박스 표면을 공통 테두리로 표시한다. */
body.company-applicant-board-page .company-applicant-select-control > span {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-sm);
    background: var(--career-white);
    color: var(--career-white);
    font-size: 9px;
}

/* 선택 또는 부분 선택된 체크박스를 브랜드 표면으로 표시한다. */
body.company-applicant-board-page .company-applicant-select-control input:checked + span,
body.company-applicant-board-page .company-applicant-select-control input:indeterminate + span {
    border-color: var(--career-primary);
    background: var(--career-primary);
}

/* 키보드 초점이 있는 체크박스의 외곽선을 표시한다. */
body.company-applicant-board-page .company-applicant-select-control input:focus-visible + span {
    outline: 2px solid var(--career-primary);
    outline-offset: 2px;
}

/* 불합격 단계에서는 다중 선택 체크박스를 노출하지 않는다. */
body.company-applicant-board-page .company-applicant-column[data-status="FAILED"] .company-applicant-select-control {
    display: none;
}

/* 프로필 보기와 메모 작성 버튼의 투명 클릭 영역을 일정한 간격으로 정렬한다. */
body.company-applicant-board-page .company-applicant-card-tools {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--k-space-xs);
}

/* 아이콘 크기는 유지하고 투명 사각형 버튼 영역만 넓혀 클릭하기 쉽게 한다. */
body.company-applicant-board-page .company-applicant-card-tools button {
    display: inline-flex;
    width: var(--k-btn-grid-size);
    height: var(--k-btn-grid-size);
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--career-muted);
    font-size: 14px;
    cursor: pointer;
}

/* 카드 도구의 탐색 상태를 브랜드 색상으로 표시한다. */
body.company-applicant-board-page .company-applicant-card-tools button:hover,
body.company-applicant-board-page .company-applicant-card-tools button:focus-visible {
    color: var(--career-primary);
    outline: 0;
}

/* 불합격 카드에서는 피그마 기준으로 메모 아이콘을 숨긴다. */
body.company-applicant-board-page .company-applicant-column[data-status="FAILED"] .company-applicant-edit-button {
    display: none;
}

/* 전문 분야, 경력과 근무 선호 정보를 한 행에 표시한다. */
body.company-applicant-board-page .company-applicant-card-meta {
    display: flex;
    min-width: 0;
    align-items: center;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

/* 카드 메타 정보가 카드 폭을 넘을 때 말줄임 처리한다. */
body.company-applicant-board-page .company-applicant-card-meta span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 두 번째 이후 메타 정보 앞에 짧은 구분선을 표시한다. */
body.company-applicant-board-page .company-applicant-card-meta span + span::before {
    display: inline-block;
    width: 1px;
    height: 10px;
    margin: 0 var(--k-space-sm);
    background: var(--career-border);
    content: "";
    vertical-align: middle;
}

/* 지원일 라벨과 날짜를 보조 정보 위계로 정렬한다. */
body.company-applicant-board-page .company-applicant-card-date {
    display: flex;
    align-items: center;
    gap: var(--k-space-sm);
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

/* 지원일 값은 라벨과 같은 굵기로 유지한다. */
body.company-applicant-board-page .company-applicant-card-date strong {
    font-weight: 500;
}

/* 지원자 메모를 카드 안의 옅은 브랜드 표면으로 표시한다. */
body.company-applicant-board-page .company-applicant-card-memo {
    display: flex;
    min-width: 0;
    padding: var(--k-space-md);
    align-items: center;
    gap: 6px;
    overflow: hidden;
    border-radius: var(--k-radius-md);
    background: var(--career-primary-soft);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

/* 메모 라벨을 브랜드 색상으로 구분한다. */
body.company-applicant-board-page .company-applicant-card-memo strong {
    flex: 0 0 auto;
    color: var(--career-primary);
}

/* 긴 메모 내용은 한 줄에서 말줄임 처리한다. */
body.company-applicant-board-page .company-applicant-card-memo span {
    min-width: 0;
    overflow: hidden;
    color: var(--career-ink);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 면접 단계의 추후 결과 버튼 영역을 기본적으로 숨긴다. */
body.company-applicant-board-page .company-applicant-card-stage-actions {
    display: none;
    flex-direction: column;
    gap: var(--k-space-sm);
}

/* 면접 단계에서만 합격과 불합격 버튼을 표시한다. */
body.company-applicant-board-page .company-applicant-column[data-status="INTERVIEW"] .company-applicant-card-stage-actions {
    display: flex;
}

/* 면접 단계의 결과 버튼 두 개를 같은 폭으로 배치한다. */
body.company-applicant-board-page .company-applicant-result-actions {
    display: flex;
    width: 100%;
    align-items: center;
    gap: var(--k-space-sm);
}

/* 면접 결과 버튼을 피그마의 얇은 외곽선 버튼으로 표시한다. */
body.company-applicant-board-page .company-applicant-card-stage-actions button {
    display: inline-flex;
    height: 30px;
    padding: 0 var(--k-space-md);
    align-items: center;
    justify-content: center;
    flex: 1;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-sm);
    background: var(--career-white);
    color: var(--career-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

/* 면접 일정 추가 버튼은 카드 전체 폭을 사용한다. */
body.company-applicant-board-page .company-applicant-card-stage-actions .company-applicant-interview-schedule {
    width: 100%;
    flex: 0 0 auto;
}

/* 면접 결과 버튼의 탐색 상태를 브랜드 테두리로 표시한다. */
body.company-applicant-board-page .company-applicant-card-stage-actions button:hover,
body.company-applicant-board-page .company-applicant-card-stage-actions button:focus-visible {
    border-color: var(--career-primary);
    color: var(--career-primary);
    outline: 0;
}

/* 선택과 이동 결과 안내 문구는 보조기기에만 제공한다. */
body.company-applicant-board-page .company-applicant-board-announcer {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* 지원자 메모 모달의 폭과 내부 여백을 공통 모달 기준으로 정의한다. */
body.company-applicant-board-page .company-applicant-memo-modal {
    width: min(500px, calc(100% - 32px));
    max-width: 500px;
    border-radius: var(--k-radius-md);
    background: var(--career-white);
}

/* 메모 대상 지원자 이름을 제목 아래 보조 문구로 표시한다. */
body.company-applicant-board-page .company-applicant-memo-description {
    margin: var(--k-space-sm) 0 0;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

/* 지원자 메모 입력 영역을 문서형 텍스트 영역으로 표시한다. */
body.company-applicant-board-page .company-applicant-memo-input {
    width: 100%;
    min-height: 144px;
    resize: vertical;
}

/* 메모 입력 오류는 위험 토큰으로 안내한다. */
body.company-applicant-board-page .company-applicant-memo-error {
    margin: 6px 0 0;
    color: var(--fm-color-danger);
    font-size: 12px;
    line-height: 1.5;
}

/* 오류 문구가 없을 때 불필요한 공간을 제거한다. */
body.company-applicant-board-page .company-applicant-memo-error:empty {
    display: none;
}

/* 메모 저장과 취소 버튼을 같은 폭으로 배치한다. */
body.company-applicant-board-page .company-applicant-memo-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--k-space-sm);
}

/* 메모 모달의 하단 버튼이 전체 열 너비를 사용하도록 정의한다. */
body.company-applicant-board-page .company-applicant-memo-actions .btn-freemode {
    width: 100%;
}

/* 지원자 화면의 미팅일 선택기를 모달보다 위에 표시한다. */
body.company-applicant-board-page .flatpickr-calendar {
    z-index: var(--k-z-modal);
}

@media (max-width: 767px) {
    /* 작은 화면에서 프로젝트 요약과 공고 행동을 세로로 배치한다. */
    body.company-applicant-board-page .company-applicant-board-header {
        align-items: stretch;
        flex-direction: column;
    }

    /* 작은 화면에서 상단 행동 버튼을 동일한 폭으로 배치한다. */
    body.company-applicant-board-page .company-applicant-board-actions > * {
        flex: 1;
    }

    /* 작은 화면에서는 제목과 칸반 보드 사이 간격을 줄인다. */
    body.company-applicant-board-page .company-applicant-board-scroll {
        margin-top: 32px;
    }
}

/* =========================================================
   단기 채용 지원자 목록과 상태·미팅 상호작용
   ========================================================= */

/* 지원자 목록 본문을 피그마 기준 1260px 폭으로 정렬한다. */
body.career-biz-applicant-page .career-biz-page {
    width: min(calc(100% - 32px), 1260px);
    max-width: 1260px;
}

/* 지원자 목록 상단에 공고 요약과 관리 행동을 양쪽으로 배치한다. */
body.career-biz-applicant-page .job-applicant-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
}

/* 지원자 목록 공고 제목과 마감일을 세로로 배치한다. */
body.career-biz-applicant-page .job-applicant-page-summary {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: var(--k-space-form-label);
}

/* 지원자 목록 공고 제목을 피그마 제목 크기로 표시한다. */
body.career-biz-applicant-page .job-applicant-page-summary .job-section-title {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.4;
}

/* 모집 마감일과 D-day 배지를 한 줄로 정렬한다. */
body.career-biz-applicant-page .job-applicant-page-deadline {
    display: flex;
    align-items: center;
    gap: var(--k-space-sm);
    color: var(--career-ink);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
}

/* 지원자 목록의 D-day를 주요 행동과 구분되는 작은 배지로 표시한다. */
body.career-biz-applicant-page .job-applicant-page-deadline em {
    min-height: 20px;
    padding: 2px 10px;
    border-radius: var(--k-radius-pill);
    background: var(--career-primary-soft);
    color: var(--career-primary);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
}

/* 공고 보기와 마감하기 버튼을 상단 우측에 배치한다. */
body.career-biz-applicant-page .job-applicant-page-actions {
    display: flex;
    align-items: center;
    gap: var(--k-space-sm);
}

/* 지원자 목록 상단 행동 버튼을 피그마 높이로 맞춘다. */
body.career-biz-applicant-page .job-applicant-page-actions .btn-freemode {
    min-width: 0;
    height: 42px;
    padding: 0 16px;
}

/* 지원자 상태 필터를 공고 요약과 52px 간격으로 분리한다. */
body.career-biz-applicant-page .career-biz-applicant-filters {
    margin: 52px 0 24px;
    gap: 6px;
}

/* 상태 필터에 라벨과 건수를 함께 표시한다. */
body.career-biz-applicant-page .career-biz-applicant-filters .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 0 14px;
    color: var(--career-ink);
}

/* 상태 필터 건수는 라벨과 동일한 크기로 표시한다. */
body.career-biz-applicant-page .career-biz-applicant-filters .filter-chip strong {
    font-size: inherit;
    font-weight: inherit;
}

/* 선택 상태는 테두리만 주요 색상으로 표시한다. */
body.career-biz-applicant-page .career-biz-applicant-filters .filter-chip.active {
    color: var(--career-ink);
}

/* 지원자 목록 테이블은 카드 외곽선 없이 가로 구분선으로 구성한다. */
body.career-biz-applicant-page .job-applicant-review-table-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: var(--career-white);
}

/* 지원자 목록 헤더를 흰색 표면과 위아래 구분선으로 표시한다. */
body.career-biz-applicant-page .job-applicant-review-table th {
    height: 44px;
    padding: 0 24px;
    border-top: 1px solid var(--career-border);
    border-bottom: 1px solid var(--career-border);
    background: var(--career-white);
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 600;
}

/* 지원자 목록 행을 피그마의 넓은 정보 밀도로 표시한다. */
body.career-biz-applicant-page .job-applicant-review-table td {
    height: 120px;
    padding: 28px 24px;
    border-bottom: 1px solid var(--career-border);
    color: var(--career-text);
    font-size: 14px;
}

/* 마지막 지원자 행에도 하단 구분선을 유지한다. */
body.career-biz-applicant-page .job-applicant-review-table tr:last-child td {
    border-bottom: 1px solid var(--career-border);
}

/* 선택한 지원자 행을 주요 색상의 보조 표면으로 구분한다. */
body.career-biz-applicant-page [data-applicant-row].is-selected {
    background: var(--career-primary-soft);
}

/* 피그마 표 구조에 맞춰 지원자 정보 열 폭을 정의한다. */
body.career-biz-applicant-page .job-applicant-col-info {
    width: 35%;
    padding-left: 24px;
    text-align: left;
}

/* 피그마 표 구조에 맞춰 전문 분야와 기술 열 폭을 정의한다. */
body.career-biz-applicant-page .job-applicant-col-expertise {
    width: 42%;
}

/* 피그마 표 구조에 맞춰 지원일 열 폭을 정의한다. */
body.career-biz-applicant-page .job-applicant-col-date {
    width: 11%;
}

/* 피그마 표 구조에 맞춰 상태 열 폭을 정의한다. */
body.career-biz-applicant-page .job-applicant-col-status {
    width: 12%;
}

/* 지원자 정보 셀의 기존 강제 여백을 피그마 값으로 맞춘다. */
body.career-biz-applicant-page .job-applicant-review-info-cell {
    padding-left: 24px !important;
}

/* 체크박스와 지원자 프로필을 한 줄로 정렬한다. */
.job-applicant-review-identity {
    display: flex;
    align-items: center;
    gap: 32px;
    min-width: 0;
}

/* 지원자 선택 체크박스와 라벨을 한 줄로 정렬한다. */
.job-applicant-select-control {
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-form-label);
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* 지원자 선택 체크박스를 피그마의 16px 크기로 고정한다. */
.job-applicant-select-control input {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--career-primary);
}

/* 행 체크박스는 지원자 프로필과 독립된 너비를 사용한다. */
.job-applicant-row-select {
    flex: 0 0 16px;
}

/* 변경할 수 없는 지원자 체크박스를 비활성 상태로 표시한다. */
.job-applicant-select-control input:disabled {
    cursor: default;
    opacity: .45;
}

/* 지원자 아바타는 피그마 기준 60px 원형을 유지한다. */
body.career-biz-applicant-page .job-applicant-review-avatar {
    flex-basis: 60px;
    width: 60px;
    height: 60px;
    background: var(--career-surface);
    color: var(--career-muted);
}

/* 지원자 프로필 버튼의 내부 간격은 아바타와 정보 사이 18px을 사용한다. */
body.career-biz-applicant-page .job-applicant-review-profile {
    gap: 18px;
}

/* 취소된 지원자 프로필 버튼은 시각적 정보를 유지하되 동작하지 않는다. */
body.career-biz-applicant-page .job-applicant-review-profile:disabled {
    cursor: default;
    opacity: 1;
}

/* 지원자 이름을 피그마 본문 강조 크기로 표시한다. */
body.career-biz-applicant-page .job-applicant-review-person strong {
    color: var(--career-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

/* 지원자 직무·경력·선호 지역 메타를 한 줄로 표시한다. */
body.career-biz-applicant-page .job-applicant-review-person span {
    gap: var(--k-space-sm);
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

/* 지원자 메타 구분선은 보조 테두리 색상을 사용한다. */
body.career-biz-applicant-page .job-applicant-review-person em {
    color: var(--career-border);
}

/* 전문 분야와 보유기술을 두 행의 라벨·값 구조로 배치한다. */
body.career-biz-applicant-page .job-applicant-review-expertise {
    display: table-cell;
    vertical-align: middle;
}

/* 전문 분야와 보유기술의 각 행을 동일한 간격으로 정렬한다. */
body.career-biz-applicant-page .job-applicant-review-expertise > div {
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: 0;
}

/* 전문 분야와 보유기술 행 사이 간격을 정의한다. */
body.career-biz-applicant-page .job-applicant-review-expertise > div + div {
    margin-top: var(--k-space-sm);
}

/* 전문 분야와 보유기술 라벨 폭을 피그마 기준으로 고정한다. */
body.career-biz-applicant-page .job-applicant-review-expertise strong {
    flex: 0 0 65px;
    color: var(--career-muted);
    font-weight: 600;
}

/* 전문 분야와 보유기술 값의 긴 문구를 말줄임한다. */
body.career-biz-applicant-page .job-applicant-review-expertise span {
    overflow: hidden;
    min-width: 0;
    color: var(--career-ink);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 지원일을 피그마의 보조 정보 색상으로 표시한다. */
body.career-biz-applicant-page .job-applicant-review-date {
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

/* 미팅 일정 버튼과 상태 셀렉트를 세로로 배치한다. */
.job-applicant-status-actions {
    display: inline-flex;
    align-items: center;
    flex-direction: column;
    gap: 6px;
}

/* 서류 통과 상태의 미팅 일정 행동을 작은 외곽선 버튼으로 표시한다. */
.job-applicant-meeting-button {
    width: 110px;
    min-height: 28px;
    padding: 0 12px;
    border: 1px solid var(--career-primary);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    color: var(--career-ink);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

/* 미팅 일정 버튼의 탐색 상태를 주요 색상으로 표시한다. */
.job-applicant-meeting-button:hover,
.job-applicant-meeting-button:focus-visible {
    color: var(--career-primary);
    outline: 0;
}

/* 지원 상태 셀렉트의 피그마 너비와 높이를 적용한다. */
body.career-biz-applicant-page .job-applicant-status-button {
    justify-content: space-between;
    width: 110px;
    height: 36px;
    padding: 0 14px;
    border-color: var(--career-border);
    border-radius: var(--k-radius-md);
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
}

/* 지원 상태 메뉴를 셀렉트 너비와 일치시킨다. */
body.career-biz-applicant-page .job-applicant-status-menu {
    top: 42px;
    min-width: 110px;
    padding: 6px 0;
    border-color: var(--career-border);
    border-radius: var(--k-radius-md);
    box-shadow: var(--k-shadow-soft);
}

/* 지원 상태 메뉴 항목을 피그마 본문 크기로 표시한다. */
body.career-biz-applicant-page .job-applicant-status-menu button {
    min-height: 36px;
    padding: 0 14px;
    color: var(--career-ink);
    font-size: 14px;
}

/* 현재 상태 메뉴 항목은 보조 표면으로 구분한다. */
body.career-biz-applicant-page .job-applicant-status-menu button:disabled {
    background: var(--career-surface);
    color: var(--career-muted);
    cursor: default;
}

/* 지원자 취소 안내를 피그마의 정보 바 형태로 표시한다. */
body.career-biz-applicant-page .job-applicant-review-guide {
    min-height: 52px;
    margin-top: 24px;
    padding: 0 18px;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
    color: var(--career-muted);
    font-size: 13px;
}

/* 지원자 취소 안내 아이콘을 보조 색상으로 표시한다. */
body.career-biz-applicant-page .job-applicant-review-guide i {
    color: var(--career-muted);
}

/* 선택한 지원자의 일괄 행동을 화면 하단 중앙의 플로팅 막대로 표시한다. */
.job-applicant-bulk-bar {
    position: fixed;
    bottom: 232px;
    left: 50%;
    z-index: var(--k-z-sticky);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    min-height: 56px;
    padding: 12px 24px;
    border-radius: var(--k-radius-md);
    background: var(--career-primary);
    box-shadow: var(--k-shadow-modal);
    color: var(--career-white);
    transform: translateX(-50%);
}

/* 숨김 속성이 있는 선택 작업 막대는 화면에서 제거한다. */
.job-applicant-bulk-bar[hidden] {
    display: none;
}

/* 스타일 가이드 안에서는 선택 작업 막대를 일반 문서 흐름으로 표시한다. */
.job-applicant-bulk-bar.is-preview {
    position: static;
    transform: none;
}

/* 선택 해제 버튼과 선택 건수를 한 줄로 표시한다. */
.job-applicant-bulk-selection {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 124px;
}

/* 플로팅 막대의 선택 해제 아이콘 버튼을 표시한다. */
.job-applicant-bulk-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--career-white);
    cursor: pointer;
}

/* 선택 건수와 플로팅 행동 문구를 동일한 강조로 표시한다. */
.job-applicant-bulk-selection strong,
.job-applicant-bulk-action {
    color: var(--career-white);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/* 플로팅 상태 변경 행동을 텍스트 버튼으로 표시한다. */
.job-applicant-bulk-action {
    padding: 4px 8px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

/* 처리 중이거나 상태 변경이 제한된 플로팅 행동을 비활성 상태로 표시한다. */
.job-applicant-bulk-action[aria-disabled="true"],
.job-applicant-bulk-action:disabled {
    cursor: default;
}

/* 플로팅 작업 사이의 세로 구분선을 표시한다. */
.job-applicant-bulk-divider {
    width: 1px;
    height: 14px;
    background: var(--k-overlay-white-50);
}

/* 상태 변경 확인창을 피그마 기준 400px 폭으로 표시한다. */
.job-applicant-status-confirm-modal {
    width: min(calc(100vw - 32px), 400px);
    max-width: 400px;
    padding: 32px 24px;
    background: var(--career-white);
    border-radius: var(--k-radius-md);
    box-shadow: var(--k-shadow-soft);
}

/* 상태 변경 확인창의 아이콘과 문구를 중앙 정렬한다. */
.job-applicant-status-confirm-content {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    text-align: center;
}

/* 피그마에서 내보낸 상태 변경 확인 아이콘 크기를 고정한다. */
.job-applicant-status-confirm-icon {
    width: 40px;
    height: 40px;
}

/* 상태 변경 확인 질문을 피그마 제목 크기로 표시한다. */
.job-applicant-status-confirm-content h2 {
    margin: 0;
    color: var(--career-ink);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
}

/* 변경할 상태명만 주요 색상으로 강조한다. */
.job-applicant-status-confirm-content #applicantStatusConfirmLabel {
    color: var(--career-primary);
}

/* 상태 변경의 영향 안내를 보조 색상으로 표시한다. */
.job-applicant-status-confirm-content p {
    margin: 6px 0 0;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

/* 상태 확인창과 미팅 모달의 하단 행동을 같은 폭으로 배치한다. */
.job-applicant-modal-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--k-space-sm);
    width: 100%;
    margin-top: 42px;
}

/* 상태 확인창과 미팅 모달의 하단 버튼 높이를 피그마 값으로 맞춘다. */
.job-applicant-modal-actions .btn-freemode {
    width: 100%;
    height: 42px;
}

/* 미팅 일정 등록 모달을 피그마 기준 550px 폭과 내부 여백으로 표시한다. */
.job-applicant-meeting-modal {
    width: min(calc(100vw - 32px), 550px);
    max-width: 550px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 32px 24px;
    border-radius: var(--k-radius-md);
    box-shadow: var(--k-shadow-soft);
}

/* 미팅 일정 등록 제목을 피그마 크기로 표시한다. */
.job-applicant-meeting-header h2 {
    margin: 0;
    color: var(--career-ink);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

/* 미팅 일정 입력 필드를 42px 제목 간격 아래에 배치한다. */
.job-applicant-meeting-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 42px;
}

/* 미팅 일정 라벨과 입력값 사이에 공통 14px 간격을 적용한다. */
.job-applicant-meeting-field {
    display: flex;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    flex-direction: column;
    gap: var(--k-space-form-label);
}

/* 미팅 일정 필드 라벨을 피그마 강조 문구로 표시한다. */
.job-applicant-meeting-field > span,
.job-applicant-meeting-field legend {
    margin: 0;
    padding: 0;
    color: var(--career-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

/* 미팅 일정의 입력과 선택 요소 높이를 피그마 값으로 맞춘다. */
.job-applicant-meeting-field .input-freemode,
.job-applicant-meeting-field .select-freemode {
    width: 100%;
    height: 36px;
    padding: 0 14px;
    border-color: var(--career-border);
    border-radius: var(--k-radius-md);
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
}

/* 읽기 전용 프리랜서 선택값을 일반 입력값과 같은 명도로 표시한다. */
.job-applicant-meeting-field .select-freemode:disabled {
    opacity: 1;
    background-color: var(--career-white);
    color: var(--career-ink);
    cursor: default;
}

/* 진행 방식 선택을 대면과 비대면 두 항목으로 배치한다. */
.job-applicant-meeting-method > div {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 36px;
}

/* 진행 방식 라디오와 문구를 한 줄로 정렬한다. */
.job-applicant-meeting-method label {
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-sm);
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

/* 진행 방식 라디오는 주요 색상 토큰을 사용한다. */
.job-applicant-meeting-method input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--career-primary);
}

/* 미팅 일자와 시간을 두 개의 같은 폭 열로 배치한다. */
.job-applicant-meeting-date-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

/* 미팅 메모 입력 높이를 피그마 기준 100px로 맞춘다. */
.job-applicant-meeting-field textarea.input-freemode {
    height: 100px;
    padding: 18px;
    resize: vertical;
}

/* 미팅 등록 오류를 위험 색상으로 안내한다. */
.job-applicant-meeting-error {
    margin: -18px 0 0;
    color: var(--fm-color-danger);
    font-size: 12px;
    line-height: 1.5;
}

/* 오류 문구가 없을 때 불필요한 공간을 제거한다. */
.job-applicant-meeting-error:empty {
    display: none;
}

/* 미팅 일정 모달의 행동 영역은 본문과 52px 간격을 사용한다. */
.job-applicant-meeting-modal .job-applicant-modal-actions {
    margin-top: 52px;
}

/* 지원자 미팅일 날짜 선택기를 모달 위에 표시한다. */
body.career-biz-applicant-page .flatpickr-calendar {
    z-index: var(--k-z-modal);
}

@media (max-width: 767px) {
    /* 작은 화면에서 공고 요약과 관리 행동을 세로로 배치한다. */
    body.career-biz-applicant-page .job-applicant-page-header {
        align-items: stretch;
        flex-direction: column;
    }

    /* 작은 화면에서 공고 관리 버튼을 같은 폭으로 표시한다. */
    body.career-biz-applicant-page .job-applicant-page-actions > * {
        flex: 1;
    }

    /* 작은 화면에서 상태 필터의 상단 간격을 줄인다. */
    body.career-biz-applicant-page .career-biz-applicant-filters {
        margin-top: 32px;
    }

    /* 모바일 지원자 카드의 선택 영역을 카드 폭에 맞춘다. */
    body.career-biz-applicant-page .job-applicant-review-identity {
        gap: var(--k-space-md);
    }

    /* 모바일 지원자 카드의 상태 행동을 우측에 유지한다. */
    body.career-biz-applicant-page .job-applicant-status-actions {
        flex: 0 0 110px;
    }

    /* 작은 화면의 플로팅 작업 막대를 가로 스크롤 가능한 형태로 표시한다. */
    .job-applicant-bulk-bar {
        right: 16px;
        bottom: 16px;
        left: 16px;
        justify-content: flex-start;
        overflow-x: auto;
        transform: none;
    }

    /* 작은 화면에서 미팅 일자와 시간을 한 열로 전환한다. */
    .job-applicant-meeting-date-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1023px) {
    /* 태블릿 이하에서는 이용권 요금 카드를 가용 폭에 맞춰 자동 배치한다. */
    .career-pricing-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

@media (max-width: 639px) {
    /* 모바일에서는 이용권 요금 카드를 한 열로 표시한다. */
    .career-pricing-grid {
        grid-template-columns: 1fr;
    }

    /* 모바일 이용권 요금 카드의 세로 길이를 콘텐츠에 맞춘다. */
    .career-pricing-card {
        min-height: 0;
    }
}