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

/* 커리어모드 화면의 기본 표면과 타이포그래피를 정의한다. */
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.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 {
    width: 100%;
    border-bottom: 1px solid var(--k-border-color-light);
    background: var(--career-white);
}

/* 커리어모드 헤더 내부를 로고, 내비게이션, 사용자 영역으로 배치한다. */
.job-header-shell--career .job-header-inner {
    display: flex;
    width: 100%;
    height: var(--header-height);
    min-height: var(--header-height);
    padding: 0 32px;
    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: 150px;
    min-width: 150px;
    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 .job-site-footer {
    margin-top: auto;
    padding: 38px 0 44px;
    border-top: 0;
    background: var(--career-surface);
}

/* 커리어모드 푸터 내부를 정보와 링크 영역으로 배치한다. */
body.career-mode-page .job-footer-inner {
    display: grid;
    width: 100%;
    max-width: none;
    padding: 0 32px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "info links"
        "copyright links";
    column-gap: 48px;
}

/* 커리어모드 푸터 링크 그룹을 우측에 정렬한다. */
body.career-mode-page .job-footer-links {
    grid-area: links;
    display: flex;
    margin: 0;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 34px;
}

/* 커리어모드 푸터 링크 그룹 내부를 세로로 정렬한다. */
body.career-mode-page .job-footer-menu-group {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
}

/* 커리어모드 푸터 그룹 제목의 위계를 정의한다. */
body.career-mode-page .job-footer-menu-title {
    color: var(--career-ink);
    font-size: 13px;
    font-weight: 700;
}

/* 커리어모드 푸터 링크의 색상과 크기를 정의한다. */
body.career-mode-page .job-footer-links a {
    color: var(--career-muted);
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
}

/* 커리어모드 푸터 사업자 정보 묶음을 정의한다. */
body.career-mode-page .job-footer-info-group {
    grid-area: info;
    display: grid;
    gap: 4px;
}

/* 커리어모드 푸터 사업자 정보 행을 정의한다. */
body.career-mode-page .job-footer-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    color: var(--career-muted);
    font-size: 12px;
    line-height: 1.8;
}

/* 커리어모드 푸터 저작권 문구를 정의한다. */
body.career-mode-page .job-footer-copyright {
    grid-area: copyright;
    margin: 24px 0 0;
    color: var(--career-muted);
    font-size: 12px;
}

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

/* 커리어모드 공통 버튼의 기본 골격을 정의한다. */
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: 68px 0 96px;
    background: var(--career-white);
}

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

/* 커리어모드 홈 히어로를 중앙 정렬한다. */
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: 28px;
    font-weight: 700;
    line-height: 1.35;
}

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

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

/* 커리어모드 홈 히어로 행동 버튼을 중앙 정렬한다. */
body.career-mode-home-page .career-home-hero-actions {
    display: flex;
    margin-top: 26px;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* 커리어모드 홈 프로모션 배너를 기준 이미지 크기로 표시한다. */
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 30px;
    padding: 0;
    align-items: center;
    justify-content: space-between;
    border: 0;
}

/* 커리어모드 홈 영문 키커 문구를 숨겨 정보 중복을 줄인다. */
body.career-mode-home-page .recruit-section-kicker {
    display: none;
}

/* 커리어모드 홈 섹션 제목을 정의한다. */
body.career-mode-home-page .recruit-section-title {
    margin: 0;
    color: var(--career-ink);
    font-size: 22px;
    font-weight: 700;
    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;
}

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

/* 커리어모드 홈 프로젝트 카드를 간결한 요약형으로 정의한다. */
body.career-mode-home-page .recruit-content-card {
    display: flex;
    min-width: 0;
    min-height: 280px;
    padding: 24px 18px 18px;
    flex-direction: column;
    gap: 0;
    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;
}

/* 커리어모드 홈 외주 프로젝트 카드는 세부 정보가 안정적으로 배치되도록 높이를 확보한다. */
body.career-mode-home-page .recruit-request-card {
    min-height: 306px;
}

/* 커리어모드 홈 프로젝트 카드의 포인터 상태를 정의한다. */
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 .recruit-card-top {
    display: flex;
    min-height: 22px;
    align-items: center;
    justify-content: space-between;
}

/* 커리어모드 홈 새 프로젝트 배지를 정의한다. */
body.career-mode-home-page .recruit-card-flag {
    display: inline-flex;
    min-height: 20px;
    padding: 0 9px;
    align-items: center;
    border-radius: var(--k-radius-pill);
    background: var(--k-status-danger-bg);
    color: var(--ref-accent-orange);
    font-size: 11px;
    font-weight: 600;
}

/* 커리어모드 홈 외주 프로젝트 배지의 색상을 정의한다. */
body.career-mode-home-page .recruit-card-flag.is-request {
    background: var(--k-status-danger-bg);
    color: var(--ref-accent-orange);
}

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

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

/* 커리어모드 홈 카드 메타 정보의 간격을 정의한다. */
body.career-mode-home-page .recruit-card-meta,
body.career-mode-home-page .recruit-request-metrics {
    display: grid;
    margin-top: 22px;
    gap: 8px;
    color: var(--career-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* 커리어모드 홈 카드 하단을 카드 아래에 고정한다. */
body.career-mode-home-page .recruit-card-footer {
    display: flex;
    width: 100%;
    margin-top: auto;
    padding-top: 18px;
    align-items: center;
    justify-content: flex-end;
    color: var(--career-muted);
    font-size: 13px;
    font-weight: 500;
}

/* 커리어모드 홈 관심 아이콘의 기본색을 정의한다. */
body.career-mode-home-page .recruit-card-top i {
    color: var(--k-color-gray-aaa);
    font-size: 17px;
    line-height: 1;
}

/* 커리어모드 홈 선택된 관심 아이콘의 색상을 정의한다. */
body.career-mode-home-page .recruit-card-top i.is-active {
    color: var(--ref-accent-orange);
}

/* 커리어모드 홈 빈 상태를 옅은 보라 표면으로 정의한다. */
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: 16px 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: 16px;
    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;
}

/* 커리어모드 상세 섹션 체크 아이콘을 원형으로 정의한다. */
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: 18px;
    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: 14px 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-form-header-copy {
    display: flex;
    width: 100%;
    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-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 {
    display: flex;
    width: auto;
    min-height: 40px;
    margin: 12px 0 0;
    padding: 10px 0;
    align-items: center;
    justify-content: flex-start;
    border: 0;
    border-radius: 0;
    background: transparent;
    gap: 8px;
}

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

/* 커리어모드 프로필 약관 링크를 보조 문구 형태로 표시한다. */
body.career-mode-profile-page .talent-profile-terms-button {
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
}

/* 커리어모드 프로필 하단 버튼을 피그마 액션 크기로 맞춘다. */
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-field-gap-large {
    gap: 48px;
}

/* 커리어모드 공고 등록의 모집분야와 상세 직무를 동일한 폭으로 배치한다. */
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-job-check-offset-large {
    padding-left: 24px;
}

/* 커리어모드 장문 입력의 내부 여백을 공통화한다. */
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;
}

/* 프로젝트 상세과 제안 요청사항을 옅은 표면 안의 흰색 입력으로 정의한다. */
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-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 {
        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-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 .notification-read-tabs {
    margin: 0;
}

/* 알림 유형 필터를 목록 위의 보조 필터 행으로 배치한다. */
body.career-notification-page .career-notification-type-tabs {
    display: flex;
    margin-bottom: 20px;
    padding-bottom: 16px;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    border-bottom: 1px solid var(--career-border);
}

/* 알림 유형 필터 항목을 간결한 텍스트 버튼으로 표시한다. */
body.career-notification-page .career-notification-type-tab {
    min-height: 32px;
    padding: 0 12px;
    flex: 0 0 auto;
    border: 0;
    border-radius: var(--k-radius-md);
    background: transparent;
    color: var(--career-muted);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

/* 선택하거나 탐색 중인 알림 유형을 주요 색상으로 강조한다. */
body.career-notification-page .career-notification-type-tab.is-active,
body.career-notification-page .career-notification-type-tab:hover,
body.career-notification-page .career-notification-type-tab:focus-visible {
    background: var(--career-primary-soft);
    color: var(--career-primary);
    outline: 0;
}

/* 알림 목록을 얇은 외곽선의 단일 패널로 표시한다. */
body.career-notification-page .career-notification-list {
    overflow: hidden;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
}

/* 알림 한 건의 상태와 내용을 가로로 정렬한다. */
body.career-notification-page .career-notification-item {
    display: grid;
    width: 100%;
    min-height: 88px;
    padding: 16px 24px;
    grid-template-columns: 28px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 16px;
    border: 0;
    border-bottom: 1px solid var(--career-border);
    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:last-child {
    border-bottom: 0;
}

/* 읽지 않은 알림을 낮은 주요 색상 배경으로 구분한다. */
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: 1px solid var(--career-primary);
    outline-offset: -1px;
}

/* 알림 읽음 상태 아이콘 영역을 일정한 크기로 정렬한다. */
body.career-notification-page .career-notification-status {
    display: inline-flex;
    width: 28px;
    height: 28px;
    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-muted);
    font-size: 11px;
}

/* 읽지 않은 알림 상태를 주요 색상의 작은 점으로 표시한다. */
body.career-notification-page .career-notification-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--k-radius-pill);
    background: var(--career-primary);
}

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

/* 알림 유형과 수신일을 한 행에 배치한다. */
body.career-notification-page .career-notification-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 알림 유형을 공통 중립 배지 형태로 표시한다. */
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;
}

/* 읽지 않은 알림의 유형 배지는 흰색 표면으로 분리한다. */
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-arrow {
    color: var(--career-muted);
    font-size: 12px;
    text-align: center;
}

/* 알림의 로딩·빈 목록·오류 상태를 패널 중앙에 배치한다. */
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 .notification-read-tabs {
        width: 100%;
        overflow-x: auto;
    }

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

    body.career-notification-page .career-notification-type-tabs {
        margin-right: -16px;
        margin-left: -16px;
        padding-right: 16px;
        padding-left: 16px;
    }

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

    body.career-notification-page .career-notification-status {
        width: 24px;
        height: 24px;
        margin-top: 1px;
        font-size: 10px;
    }

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

    body.career-notification-page .career-notification-arrow {
        margin-top: 6px;
    }
}

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

/* 외부 카탈로그 검색 입력과 결과 목록의 위치 기준을 정의한다. */
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-image-section .setting-page-title {
    margin: 0;
    color: var(--career-ink);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

/* 커리어모드 프로필 공개 스위치를 34px 트랙으로 표시한다. */
body.career-mode-profile-page .talent-profile-image-section .switch-freemode {
    width: 34px;
    height: 18px;
}

body.career-mode-profile-page .talent-profile-image-section .slider-freemode {
    border-radius: var(--k-radius-pill);
    background: var(--career-border);
}

body.career-mode-profile-page .talent-profile-image-section .slider-freemode::before {
    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);
}

body.career-mode-profile-page .talent-profile-image-section .slider-freemode::after {
    display: none;
}

body.career-mode-profile-page .talent-profile-image-section .switch-freemode input:checked + .slider-freemode {
    background: var(--career-primary);
}

body.career-mode-profile-page .talent-profile-image-section .switch-freemode input:checked + .slider-freemode::before {
    border-color: var(--career-primary);
    transform: translateX(16px);
}

/* 커리어모드 프로필 자격증 입력 행을 피그마 열 너비로 배치한다. */
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-inner {
        padding: 0 24px;
    }

    .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 {
        height: auto;
        min-height: var(--header-height);
        padding: 12px 16px;
        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-footer-inner {
        display: flex;
        padding: 0 16px;
        flex-direction: column;
        gap: 24px;
    }

    body.career-mode-page .job-footer-links {
        order: 1;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    body.career-mode-page .job-footer-info-group,
    body.career-mode-page .job-footer-copyright {
        order: 2;
    }

    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-summary {
        white-space: normal;
    }

    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-hero-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    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-field-gap-large {
        gap: 18px;
    }

    body.career-mode-form-page .career-job-check-offset,
    body.career-mode-form-page .career-job-check-offset-large {
        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 .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-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-keyword-panel {
    padding: 22px 24px;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
}

/* 설정 화면의 키워드 설명과 입력 사이 간격을 정의한다. */
body.career-mode-settings-page .career-settings-keyword-copy {
    margin-bottom: 16px;
}

/* 설정 화면의 가변 입력이 남은 너비를 사용하도록 정의한다. */
body.career-mode-settings-page .setting-flex-input {
    flex: 1;
}

/* 설정 화면의 업로드 패널을 얇은 테두리 구조로 정의한다. */
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-content-freemode .career-settings-status-panel {
    margin: 0;
    padding: 32px;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
    text-align: center;
}

/* 설정 화면의 상태 아이콘과 제목을 가운데 정렬한다. */
body.career-mode-settings-page .setting-status-visual {
    margin-bottom: 24px;
    text-align: center;
}

/* 설정 화면의 대기 상태 아이콘에 기존 경고 색상을 적용한다. */
body.career-mode-settings-page .setting-status-visual.is-warning {
    color: var(--k-color-warning);
}

/* 설정 화면의 반려 상태 아이콘과 문구에 기존 위험 색상을 적용한다. */
body.career-mode-settings-page .setting-status-visual.is-danger,
body.career-mode-settings-page .setting-reject-title,
body.career-mode-settings-page .setting-reject-description {
    color: var(--ref-accent-orange);
}

/* 설정 화면의 상태 설명과 하단 행동 사이 간격을 정의한다. */
body.career-mode-settings-page .setting-status-description,
body.career-mode-settings-page .setting-license-reupload {
    margin-bottom: 24px;
}

/* 설정 화면의 반려 사유 제목을 강조한다. */
body.career-mode-settings-page .setting-reject-title {
    margin: 0 0 5px;
    font-size: 14px;
    font-weight: 600;
}

/* 설정 화면의 상태 행동을 가운데 배치한다. */
body.career-mode-settings-page .setting-status-actions {
    text-align: center;
}

/* 설정 화면 구독 정보 영역을 옅은 표면으로 정의한다. */
body.career-mode-settings-page .setting-info-box {
    min-height: 180px;
    padding: 24px;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
}

/* 설정 화면 구독 체험 안내의 글자 체계를 정의한다. */
body.career-mode-settings-page .billing-trial-notice {
    color: var(--career-muted);
    font-size: 13px;
}

/* 설정 화면 구독 상태 텍스트를 정의한다. */
body.career-mode-settings-page .billing-status-text {
    color: var(--career-text);
    font-size: 14px;
    font-weight: 500;
}

/* 설정 화면 구독 플랜 배지를 주요 색상 체계로 정의한다. */
body.career-mode-settings-page .badge-plan {
    background: var(--career-primary-soft);
    color: var(--career-primary);
}

/* 설정 화면 구독 정보 행의 마지막 간격을 정의한다. */
body.career-mode-settings-page .billing-info-row-spaced {
    margin-bottom: 18px;
}

/* 설정 화면 읽기 전용 입력에 옅은 표면을 적용한다. */
body.career-mode-settings-page .setting-readonly-input {
    background: var(--career-surface);
    color: var(--career-muted);
}

/* 설정 화면의 회원 탈퇴 행동을 일반 저장 행동과 분리한다. */
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-keyword-panel,
    body.career-mode-settings-page .setting-content-freemode .career-settings-status-panel,
    body.career-mode-settings-page .setting-info-box {
        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 .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-keyword-panel {
    padding: 0;
    border-radius: 0;
    background: transparent;
}

/* 관리형 설정 카드의 키워드 입력과 버튼을 한 행에 배치한다. */
body.career-mode-settings-page .career-settings-keyword-panel .setting-input-row {
    flex-direction: row;
    flex-wrap: nowrap;
}

/* 키워드 알림 제목과 독립 수신 토글을 같은 행에 배치한다. */
body.career-mode-settings-page .career-settings-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-space-form-label);
    margin-bottom: 20px;
}

/* 키워드 알림 제목 행에서는 제목의 기본 하단 여백을 부모가 담당한다. */
body.career-mode-settings-page .career-settings-section-heading .setting-page-title {
    margin: 0;
}

/* 키워드가 없을 때 안내 문구를 설정 화면의 보조 문구로 표시한다. */
body.career-mode-settings-page .career-settings-keyword-empty {
    margin: 0;
    color: var(--career-muted);
    font-size: 0.85rem;
}

/* 등록된 키워드를 공통 상태 색상의 태그로 표시한다. */
body.career-mode-settings-page .career-settings-keyword-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.8rem;
    border-radius: var(--k-radius-pill);
    background: var(--k-status-warning-bg);
    color: var(--ref-ink);
    font-size: 0.85rem;
}

/* 키워드 태그의 삭제 버튼을 텍스트 아이콘 형태로 정렬한다. */
body.career-mode-settings-page .career-settings-keyword-remove {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ref-gray-700);
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

/* 관리형 설정 카드의 업로드 영역을 얇은 테두리로 구분한다. */
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-info-box {
    padding: 24px;
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
}

/* 관리형 설정 카드의 회원 탈퇴 영역을 카드 하단 구분선 아래에 배치한다. */
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;
}

/* 데스크톱에서는 좌측 메뉴 제목을 사용하므로 별도 상단 제목을 숨긴다. */
@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-settings-keyword-panel .setting-input-row {
        flex-direction: column;
    }

    /* 모바일에서 채용담당자 연락처 입력과 인증 버튼을 세로로 배치한다. */
    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-list-item {
        padding: 18px 0 !important;
    }
}

/* =========================================================
   지원 내역·관심 목록 공통 화면
   ========================================================= */

/* 지원 내역과 관심 목록의 본문 여백을 최신 목록 프레임에 맞춘다. */
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;
}

/* 지원 내역과 관심 목록의 상태·정렬 선택기를 배치한다. */
body.career-activity-page .career-activity-select {
    position: relative;
    width: auto;
    padding-left: 13px;
    flex: 0 0 auto;
}

/* 결과 건수와 상태·정렬 선택기 사이의 세로 구분선을 표시한다. */
body.career-activity-page .career-activity-select::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 10px;
    background: var(--career-border);
    content: "";
    transform: translateY(-50%);
}

/* 상태·정렬 선택기의 현재 값을 표시한다. */
body.career-activity-page .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;
}

/* 상태·정렬 선택기의 화살표를 피그마 아이콘 프레임 크기로 정렬한다. */
body.career-activity-page .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;
}

/* 열린 상태의 선택기 화살표 방향을 전환한다. */
body.career-activity-page .career-activity-select.is-open .career-activity-select-trigger i {
    transform: rotate(180deg);
}

/* 상태·정렬 선택기의 선택 항목 목록을 정의한다. */
body.career-activity-page .career-activity-select-menu {
    position: absolute;
    z-index: var(--k-z-dropdown);
    top: calc(100% + 4px);
    right: 0;
    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);
}

/* 숨김 속성이 지정된 상태·정렬 선택기 목록을 화면에서 제외한다. */
body.career-activity-page .career-activity-select-menu[hidden] {
    display: none;
}

/* 상태·정렬 선택기 항목을 세로 목록으로 표시한다. */
body.career-activity-page .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;
}

/* 상태·정렬 선택기 항목 사이의 피그마 간격을 적용한다. */
body.career-activity-page .career-activity-select-menu button + button {
    margin-top: 16px;
}

/* 선택된 상태·정렬 항목을 피그마 기본 텍스트 위계로 유지한다. */
body.career-activity-page .career-activity-select-menu button.is-selected {
    color: var(--career-ink);
    font-weight: 500;
}

/* 상태·정렬 항목의 탐색 상태를 주요 색상으로 표시한다. */
body.career-activity-page .career-activity-select-menu button:hover,
body.career-activity-page .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;
}

/* 프로필 공개 스위치의 선택 색상을 커리어모드 주요 색으로 통일한다. */
body.career-mode-profile-page .switch-freemode input:checked + .slider-freemode {
    background: var(--career-primary);
}

/* 자격증 팝업을 고정 높이 안에서 상하로 배치한다. */
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-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;
}

/* 받은 제안 거절 모달을 Figma의 500px 입력 팝업으로 정의한다. */
body.received-offer-page .received-offer-decline-modal {
    display: flex;
    width: min(500px, calc(100% - 32px));
    max-width: 500px;
    min-height: 420px;
    padding: 32px 24px;
    flex-direction: column;
    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-decline-modal h2 {
    margin: 0;
    color: var(--career-ink);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* 받은 제안 거절 안내 문구를 제목 아래 두 줄로 표시한다. */
body.received-offer-page .received-offer-decline-description {
    margin: 10px 0 0;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.02em;
}

/* 받은 제안 거절 사유 라벨과 입력창을 세로로 배치한다. */
body.received-offer-page .received-offer-decline-field {
    display: flex;
    margin-top: 34px;
    flex-direction: column;
    gap: var(--k-space-form-label);
}

/* 받은 제안 거절 사유 라벨을 보조 위계로 표시한다. */
body.received-offer-page .received-offer-decline-field label {
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

/* 받은 제안 거절 사유 입력창의 Figma 높이와 입력 여백을 적용한다. */
body.received-offer-page .received-offer-decline-field .contact-modal-textarea {
    width: 100%;
    height: 120px;
    min-height: 120px;
    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: none;
}

/* 받은 제안 거절 사유 입력 안내 문구를 보조 글자색으로 표시한다. */
body.received-offer-page .received-offer-decline-field .contact-modal-textarea::placeholder {
    color: var(--career-muted);
    opacity: 1;
}

/* 받은 제안 거절 확인과 취소 행동을 같은 폭으로 하단에 배치한다. */
body.received-offer-page .received-offer-decline-actions {
    display: grid;
    margin-top: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

/* 받은 제안 거절 모달 행동 버튼을 Figma 높이로 통일한다. */
body.received-offer-page .received-offer-decline-actions .btn-freemode {
    width: 100%;
    min-height: 42px;
    font-size: 14px;
    font-weight: 500;
}

/* 받은 제안 거절 취소 버튼을 옅은 보조 표면으로 표시한다. */
body.received-offer-page .received-offer-decline-actions .btn-freemode.is-line,
body.received-offer-page .received-offer-decline-actions .btn-freemode.is-line:hover:not(:disabled),
body.received-offer-page .received-offer-decline-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;
}

/* 받은 제안 거절 완료 모달을 Figma의 짧은 단일 행동 팝업으로 표시한다. */
body.received-offer-page .received-offer-decline-success-modal {
    width: min(432px, 100%);
    min-height: 288px;
    padding: 32px 24px;
}

/* 받은 제안 거절 완료 설명과 확인 버튼 사이의 세로 흐름을 정의한다. */
body.received-offer-page .received-offer-decline-success-modal .career-apply-result-description {
    margin-top: 24px;
}

/* 모바일에서 받은 제안 상세 모달의 바깥 여백과 조건 간격을 축소한다. */
@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.received-offer-page .received-offer-decline-modal {
        width: 100%;
        padding: 24px 16px;
    }
}

/* =========================================================
   기업회원 목록·인재 관리 화면
   ========================================================= */

/* 기업회원 관리 화면의 공통 본문 여백을 정의한다. */
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,
body.career-biz-detail-page .career-biz-detail-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

/* 기업회원 관리 화면의 설명 문구를 보조 위계로 표시한다. */
body.career-mode-page .career-biz-page-subtitle {
    margin: 8px 0 0;
    color: var(--career-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
}

/* 기업회원 관리 화면의 상단 행동 버튼이 줄어들지 않도록 정의한다. */
body.career-mode-page .career-biz-header-action {
    flex: 0 0 auto;
}

/* 기업회원 관리 화면의 전체 건수를 공통 문서형 문구로 표시한다. */
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-list-page .career-biz-manage-page .job-admin-manage-filter {
    margin-bottom: 20px;
}

/* 채용·외주 프로젝트 관리 필터를 공통 외곽선 탭으로 표시한다. */
body.career-biz-list-page .career-biz-manage-page .job-admin-management-tabs {
    min-height: 0;
    margin-bottom: 0;
    align-items: center;
    gap: 8px;
    border-bottom: 0;
}

/* 채용·외주 프로젝트 관리 필터 버튼의 크기와 중립 상태를 정의한다. */
body.career-biz-list-page .career-biz-manage-page .job-admin-management-tab {
    min-height: 36px;
    height: auto;
    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-list-page .career-biz-manage-page .job-admin-management-tab.active,
body.career-biz-list-page .career-biz-manage-page .job-admin-management-tab:hover,
body.career-biz-list-page .career-biz-manage-page .job-admin-management-tab:focus-visible {
    border-color: var(--career-primary);
    background: var(--career-white);
    color: var(--career-primary);
    outline: 0;
}

/* 채용·외주 프로젝트 관리의 건수 행 간격을 정의한다. */
body.career-biz-list-page .career-biz-manage-page .job-admin-manage-count-line {
    margin: 28px 0 14px;
}

/* 채용·외주 프로젝트 관리 목록을 카드 사이 간격이 있는 세로 목록으로 배치한다. */
body.career-biz-list-page .career-biz-manage-list {
    display: grid;
    gap: 12px;
    border-top: 0;
}

/* 채용·외주 프로젝트 관리의 개별 항목을 공통 외곽선 카드로 표시한다. */
body.career-biz-list-page .career-biz-manage-card {
    min-height: 112px;
    padding: 22px 24px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
}

/* 채용·외주 프로젝트 관리 카드의 탐색 상태를 주요 테두리로 표시한다. */
body.career-biz-list-page .career-biz-manage-card:hover {
    border-color: var(--career-primary);
}

/* 채용·외주 프로젝트 관리 카드 제목의 위계를 높인다. */
body.career-biz-list-page .career-biz-manage-card .job-admin-manage-title {
    color: var(--career-ink);
    font-size: 17px;
    font-weight: 600;
}

/* 채용·외주 프로젝트 관리 카드 제목의 탐색 상태를 주요 색상으로 표시한다. */
body.career-biz-list-page .career-biz-manage-card .job-admin-manage-title:hover,
body.career-biz-list-page .career-biz-manage-card .job-admin-manage-title:focus-visible {
    color: var(--career-primary);
    outline: 0;
}

/* 채용·외주 프로젝트 관리 카드 상태 배지의 공통 크기를 정의한다. */
body.career-biz-list-page .career-biz-manage-card .job-admin-status-pill {
    min-height: 24px;
    padding: 0 10px;
    font-size: 12px;
}

/* 모집 중인 채용·외주 프로젝트 상태를 주요 색상으로 표시한다. */
body.career-biz-list-page .career-biz-manage-card .job-admin-status-pill.is-open {
    background: var(--career-primary-soft);
    color: var(--career-primary);
}

/* 종료·임시저장 상태를 중립 색상으로 표시한다. */
body.career-biz-list-page .career-biz-manage-card .job-admin-status-pill.is-closed,
body.career-biz-list-page .career-biz-manage-card .job-admin-status-pill.is-draft {
    background: var(--career-surface);
    color: var(--career-muted);
}

/* 채용·외주 프로젝트 관리 카드의 메타 정보를 보조 색상으로 표시한다. */
body.career-biz-list-page .career-biz-manage-card .job-admin-manage-meta {
    color: var(--career-muted);
    font-size: 13px;
}

/* 채용·외주 프로젝트 관리 카드의 더보기 버튼을 공통 아이콘 버튼으로 표시한다. */
body.career-biz-list-page .career-biz-manage-card .job-admin-menu-btn {
    width: 32px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-white);
    color: var(--career-ink);
}

/* 채용·외주 프로젝트 관리 카드의 더보기 버튼 탐색 상태를 표시한다. */
body.career-biz-list-page .career-biz-manage-card .job-admin-menu-btn:hover,
body.career-biz-list-page .career-biz-manage-card .job-admin-menu-btn:focus-visible {
    border-color: var(--career-primary);
    color: var(--career-primary);
    outline: 0;
}

/* 채용·외주 프로젝트 관리의 빈 상태를 공통 카드로 표시한다. */
body.career-biz-list-page .career-biz-manage-page .job-admin-manage-empty {
    padding: 56px 24px;
    border: 1px solid var(--career-border);
    border-radius: var(--k-radius-md);
    background: var(--career-surface);
    color: var(--career-muted);
}

/* 지원자 관리 상태 필터를 제목 아래에 배치한다. */
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 .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: 1023px) {
    body.career-biz-list-page .career-biz-manage-card {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    body.career-biz-list-page .career-biz-manage-card .job-admin-manage-side,
    body.career-biz-list-page .work-request-my-list-page .career-biz-manage-card .job-admin-manage-side {
        grid-template-columns: minmax(0, 1fr) auto 32px;
    }

}

/* 모바일에서 기업회원 관리 화면을 단일 열 흐름으로 배치한다. */
@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 .career-biz-detail-title-row,
    body.career-biz-detail-page .talent-profile-detail-top {
        align-items: stretch;
        flex-direction: column;
    }

    body.career-mode-page .career-biz-header-action,
    body.career-biz-detail-page .career-biz-detail-title-row .btn-freemode,
    body.career-biz-detail-page .career-biz-talent-mail-btn {
        width: 100%;
    }

    body.career-biz-list-page .career-biz-manage-card {
        padding: 20px 16px;
    }

    body.career-biz-list-page .career-biz-manage-card .job-admin-manage-side,
    body.career-biz-list-page .work-request-my-list-page .career-biz-manage-card .job-admin-manage-side {
        grid-template-columns: minmax(0, 1fr) 32px;
        gap: 12px;
    }

    body.career-biz-list-page .career-biz-manage-card .job-admin-view-btn {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
    }

    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: 48px;
    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-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(--career-ink);
    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-biz-detail-page .talent-offer-modal-overlay {
    padding: 16px;
}

/* 제안하기 팝업의 폭과 상하 여백을 Figma 기준으로 정의한다. */
body.career-biz-detail-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-biz-detail-page .talent-offer-modal > .modal-header {
    margin: 0 0 42px;
    padding-top: 0;
    padding-bottom: 0;
}

/* 제안하기 팝업 제목을 18px 위계로 표시한다. */
body.career-biz-detail-page .talent-offer-modal .modal-title {
    color: var(--career-ink);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

/* 제안하기 팝업 본문이 입력 영역만 스크롤하도록 정의한다. */
body.career-biz-detail-page .talent-offer-modal-body {
    overflow-y: auto;
}

/* 제안하기 팝업 입력 항목을 32px 간격의 세로 흐름으로 배치한다. */
body.career-biz-detail-page .talent-offer-form {
    display: grid;
    gap: 32px;
}

/* 제안하기 팝업 필드의 기본 하단 여백을 제거한다. */
body.career-biz-detail-page .talent-offer-form .form-group {
    min-width: 0;
    margin: 0;
}

/* 제안하기 팝업 라벨을 Figma의 15px 위계로 표시한다. */
body.career-biz-detail-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-biz-detail-page .talent-offer-field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

/* 제안하기 팝업 입력 요소를 36px 공통 입력으로 정의한다. */
body.career-biz-detail-page .talent-offer-form .input-freemode,
body.career-biz-detail-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-biz-detail-page .talent-offer-form .job-posting-date-input-wrap .input-freemode {
    padding-right: 34px;
    cursor: pointer;
}

/* 제안하기 팝업 프로젝트 형태 그룹의 기본 필드셋 장식을 제거한다. */
body.career-biz-detail-page .talent-offer-work-type {
    padding: 0;
    border: 0;
}

/* 제안하기 팝업 프로젝트 형태 선택지를 가로로 배치한다. */
body.career-biz-detail-page .talent-offer-radio-group {
    display: flex;
    min-height: 40px;
    padding: 10px 0;
    align-items: center;
    gap: 16px;
}

/* 제안하기 팝업 프로젝트 형태 라디오와 문구를 정렬한다. */
body.career-biz-detail-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-biz-detail-page .talent-offer-radio-group input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--career-primary);
}

/* 제안하기 팝업의 제안·프로젝트 내용 입력 높이를 200px로 정의한다. */
body.career-biz-detail-page .talent-offer-form textarea.talent-offer-textarea {
    height: 200px;
    min-height: 200px;
    padding: 18px;
    line-height: 1.4;
    resize: none;
}

/* 제안하기 팝업 하단 행동과 본문 사이 간격을 정의한다. */
body.career-biz-detail-page .talent-offer-modal > .modal-footer {
    padding-top: 52px;
    gap: 8px;
}

/* 제안하기 팝업 하단 버튼을 같은 너비의 42px 버튼으로 표시한다. */
body.career-biz-detail-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;
}

/* 태블릿에서 프리랜서 목록 카드를 두 열 중심 구조로 전환한다. */
@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-biz-detail-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-biz-detail-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-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: 144px;
    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;
    }
}