/* ===== PREMIUM JOB BOARD STYLES ===== */
/* =============================================
   FreeMode Design System - Variables & Fonts
   ============================================= */

/* Pretendard Font Face */
@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    font-style: normal;
    src: url('/fonts/Pretendard-Thin.otf') format('opentype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    font-style: normal;
    src: url('/fonts/Pretendard-ExtraLight.otf') format('opentype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-style: normal;
    src: url('/fonts/Pretendard-Light.otf') format('opentype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-style: normal;
    src: url('/fonts/Pretendard-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-style: normal;
    src: url('/fonts/Pretendard-Medium.otf') format('opentype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-style: normal;
    src: url('/fonts/Pretendard-SemiBold.otf') format('opentype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-style: normal;
    src: url('/fonts/Pretendard-Bold.otf') format('opentype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-style: normal;
    src: url('/fonts/Pretendard-ExtraBold.otf') format('opentype');
}

@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-style: normal;
    src: url('/fonts/Pretendard-Black.otf') format('opentype');
}

/* Cafe24 Moyamoya Font Face */
@font-face {
    font-family: 'Cafe24Moyamoya';
    font-weight: 400;
    font-style: normal;
    src: url('/fonts/Cafe24Moyamoya-Regular-v1.0.otf') format('opentype');
}
/* Typography & Colors */
:root {
    --job-color-primary: var( --ref-logo-coral);
    --job-color-bg-subtle: var(--k-bg-job-subtle);
    --job-color-border: var(--k-color-gray-e5);
    --job-color-text: var(--k-color-slate-850);
    --job-color-text-light: var(--k-color-gray-888);

    --space-8: 6px;
    --space-12: 10px;
    --space-16: 13px;
    --space-24: 20px;
    --space-32: 26px;
    --space-40: 32px;
    --space-60: 48px;
    --space-80: 64px;

    /* Job Board 입력 높이만 공통 토큰과 다르게 사용한다. */
    --k-input-height: 40px;
}

/* Detail View Styles */
.job-detail-wrapper {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: var(--space-24) var(--space-24);
    flex: 1;
}

.job-detail-header {
    border-bottom: 2px solid var(--k-text-black);
    padding-bottom: var(--space-24);
    margin-bottom: var(--space-24);
}

.job-detail-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--space-24);
    color: var(--job-color-text);
}

.job-detail-meta {
    display: flex;
    gap: var(--space-32);
    color: var(--customer-completed);
    font-size: 14px;
}

.job-detail-section {
    margin-bottom: var(--space-60);
}

.section-title {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: var(--space-24);
    padding-bottom: var(--space-12);
    border-bottom: 1px solid var(--job-color-border);
    display: flex;
    align-items: center;
    gap: var(--space-12);
}

.section-title i {
    color: var(--job-color-primary);
}

.info-grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    row-gap: var(--space-16);
    font-size: 14px;
}

.job-detail-info-grid {
    grid-template-columns: repeat(2, minmax(120px, auto) minmax(0, 1fr));
    column-gap: var(--space-60);
}

.info-label {
    font-weight: 600;
    color: var(--customer-completed);
}

.info-value {
    color: var(--job-color-text);
}

.content-text {
    font-size: 14px;
    line-height: 1.7;
    color: var(--job-color-text);
}

/* Container Overall Layout */
.list-view-layout.job-board {
    background-color: var(--k-bg-white);
    padding: 0;
    gap: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.list-view-content.job-board {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

/* Board Header */
.job-board-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Select */
.select-freemode {
    width: 100%;
    height: var(--k-input-height);
    padding: 0 14px;
    font-family: 'Pretendard', sans-serif;
    font-size: 14px;
    background-color: var(--k-bg-white);
    border: var(--k-border-gray);
    border-radius: var(--k-radius-md);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
    color: var(--ref-ink);
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px;
    padding-right: 40px;
}

/* Main Content Wrapper */
.job-board-wrapper {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    flex: 1;
}

.job-section-title {
    text-align: left;
    font-size: 30px;
    font-weight: 600;
    color: var(--job-color-text);
    margin-bottom: 20px;
    margin-top: 10px;
}

/* Search Area */
.job-search-section {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-12);
}

.job-search-box {
    display: flex;
    border-bottom: 2px solid var(--k-text-black);
    padding-bottom: var(--space-8);
    align-items: center;
}

.job-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    background: transparent;
}

.job-search-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: var(--k-text-black);
}

/* Table Design */
.table-fixed-10rows {
    min-height: calc(var(--k-table-head-height) + (var(--k-table-row-height) * var(--k-table-visible-row-count)));
}

.job-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-32);
    border-top: 2px solid var(--k-text-black);
    /* Distinct top border */
}

.job-table th {
    height: var(--k-table-head-height);
    border-bottom: 1px solid var(--job-color-border);
    font-size: 14px;
    font-weight: 600;
    color: var(--job-color-text);
    text-align: center;
    background-color: var(--k-bg-white);
}

.job-table td {
    height: var(--k-table-row-height);
    padding: 10px 0;
    /* Generous spacing like the image */
    border-bottom: 1px solid var(--job-color-border);
    vertical-align: middle;
    text-align: center;
    font-size: 14px;
}

.row-no {
    width: 50px;
    color: var(--job-color-text-light);
}

.row-type {
    width: 80px;
    color: var(--job-color-text-light);
}

.row-title {
    text-align: left !important;
    padding-left: var(--space-32) !important;
}

.row-period {
    width: 200px;
    color: var(--job-color-text-light);
}

.row-hits {
    width: 65px;
    color: var(--job-color-text-light);
    font-family: var(--font-family-mono);
}

.row-status {
    width: 80px;
}

.row-admin {
    width: 110px;
}

.job-title-link {
    font-size: 15px;
    font-weight: 400;
    color: var(--k-text-body);
    text-decoration: none;
    transition: var(--k-transition-fast);
}

.job-title-link:hover {
    color: var(--job-color-primary);
}

/* Status Badges */
.job-status-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    min-width: 52px;
    height: 22px;
}

.job-status-tag--open {
    background-color: var(--job-color-primary);
    color: var(--k-bg-white);
}

.job-status-tag--closed {
    background-color: var(--ref-gray-700);
    color: var(--k-bg-white);
}

/* Pagination */
.job-pagination,
.settle-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
    padding-top: 0;
    margin-bottom: var(--space-32);
    border-top: none;
}

.total-count-label {
    font-size: 14px;
    color: var(--job-color-text);
    font-weight: 600;
}

.total-count-label span {
    color: var(--job-color-primary);
    margin: 0 4px;
}

/* ===== Job Board Buttons ===== */
/* Job Board 버튼 공통 골격을 정의한다. */
.job-board .btn-freemode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--job-color-border);
    background-color: var(--k-bg-white);
    color: var(--job-color-text);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-sizing: border-box;
}

/* Job Board 메인 버튼 크기를 정의한다. */
.job-board .btn-freemode.btn-main,
.job-board .btn-main {
    height: var(--k-btn-main-height);
    padding: var(--k-btn-main-padding-y) var(--k-btn-main-padding-x);
    font-size: var(--k-btn-main-font-size);
    line-height: var(--k-btn-main-line-height);
}

/* Job Board 서브 버튼 크기를 정의한다. */
.job-board .btn-freemode.btn-sub,
.job-board .btn-sub {
    height: var(--k-btn-sub-height);
    padding: var(--k-btn-sub-padding-y) var(--k-btn-sub-padding-x);
    font-size: var(--k-btn-sub-font-size);
    line-height: var(--k-btn-sub-line-height);
}

/* Job Board 그리드/테이블 버튼 크기를 정의한다. */
.job-board .btn-grid {
    width: var(--k-btn-grid-size);
    height: var(--k-btn-grid-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--k-btn-grid-border);
    background: var(--k-btn-grid-bg);
    border-radius: 6px;
    color: var(--k-color-gray-888);
    font-size: var(--k-btn-grid-font-size);
    padding: var(--k-btn-grid-padding);
    line-height: var(--k-btn-grid-line-height);
    box-sizing: border-box;
}

/* Job Board 기본 메인 톤(Primary)을 정의한다. */
.job-board .btn-freemode.primary,
.job-board .btn-freemode.is-primary,
.job-board .btn-freemode.btn-main.is-primary,
.job-board .btn-main.is-primary {
    background-color: var(--ref-logo-coral);
    color: var(--k-bg-white);
    border: none;
}

/* Job Board 기본 메인 톤(Primary) hover를 정의한다. */
.job-board .btn-freemode.primary:hover,
.job-board .btn-freemode.is-primary:hover,
.job-board .btn-freemode.btn-main.is-primary:hover,
.job-board .btn-main.is-primary:hover {
    background-color: var(--ref-accent-orange);
    box-shadow: 0 2px 8px var(--k-overlay-emerald-30);
}

/* Job Board 라인 톤(Line)을 정의한다. */
.job-board .btn-freemode.line,
.job-board .btn-freemode.is-line,
.job-board .btn-freemode.btn-sub.is-line,
.job-board .btn-sub.is-line {
    background-color: var(--k-bg-white);
    color: var(--ref-gray-700);
    border: 1px solid var(--job-color-border);
}

/* Job Board 라인 톤(Line) hover를 정의한다. */
.job-board .btn-freemode.line:hover,
.job-board .btn-freemode.is-line:hover,
.job-board .btn-freemode.btn-sub:not(.is-danger-outline):hover,
.job-board .btn-freemode.btn-sub.is-line:hover,
.job-board .btn-sub:not(.is-danger-outline):hover,
.job-board .btn-sub.is-line:hover {
    background-color: var(--ref-warm-150);
    border-color: var(--k-color-gray-d1);
}

/* Job Board 위험 채움 톤(Danger)을 정의한다. */
.job-board .btn-freemode.danger,
.job-board .btn-freemode.is-danger {
    background-color: var(--ref-accent-orange-soft);
    color: var(--k-bg-white);
    border: none;
}

/* Job Board 위험 채움 톤(Danger) hover를 정의한다. */
.job-board .btn-freemode.danger:hover,
.job-board .btn-freemode.is-danger:hover {
    background-color: var(--ref-accent-orange);
}

/* Job Board 위험 아웃라인 톤(Danger Outline)을 정의한다. */
.job-board .btn-freemode.is-danger-outline,
.job-board .btn-freemode.btn-sub.is-danger-outline,
.job-board .btn-sub.is-danger-outline {
    background-color: var(--k-bg-white);
    color: var(--ref-accent-orange-soft);
    border: 1px solid var(--k-color-red-200);
}

/* Job Board 위험 아웃라인 톤(Danger Outline) hover를 정의한다. */
.job-board .btn-freemode.is-danger-outline:hover,
.job-board .btn-freemode.btn-sub.is-danger-outline:hover,
.job-board .btn-sub.is-danger-outline:hover {
    background-color: var(--ref-accent-orange-bg-soft);
    border-color: var(--ref-accent-orange-soft);
}

/* Job Board 그리드/테이블 버튼 hover를 정의한다. */
.job-board .btn-grid:hover {
    background: var(--k-color-gray-f3);
    color: var(--job-color-text);
}

/* Job Board 그리드/테이블 버튼 상태별 색상을 정의한다. */
.job-board .btn-grid.is-edit { color: var(--job-color-text-light); }
.job-board .btn-grid.is-save { color: var(--job-color-primary); }
.job-board .btn-grid.is-delete { color: var(--ref-accent-orange-soft); }
.job-board .btn-grid.is-cancel { color: var(--k-color-gray-888); }
.job-board .btn-grid.is-download { color: var(--k-color-emerald-600); }

/* Job Board 버튼 비활성화 공통 색상을 정의한다. */
.job-board .btn-freemode:disabled,
.job-board .btn-main:disabled,
.job-board .btn-sub:disabled {
    background-color: var(--k-color-gray-e5);
    color: var(--k-color-gray-9c);
    border-color: var(--k-color-gray-e5);
    cursor: not-allowed;
}

.admin-action-btns {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-flow: wrap;
}

.form-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 24px;
    background: var(--k-bg-white);
    border-radius: var(--k-radius-xl);
    box-shadow: 0 4px 20px var(--k-overlay-dark-08);
}

.form-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--k-border-color-light);
}

/* Job board form overrides (base .form-group/.form-label in _modals.css) */
.form-container .form-group {
    margin-bottom: 16px;
}

.form-container .form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--k-color-slate-650);
    font-size: 14px;
}

.form-container .form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--k-border-color);
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.form-container .form-control:focus {
    border-color: var(--job-color-primary);
}

/* 날짜 입력 오른쪽에 달력 아이콘을 배치합니다. */

/* 단기 채용 공고/작업의뢰 일정 입력 필드를 달력 컴포넌트용 입력처럼 표시한다. */
.job-board .work-request-date-input {
    cursor: pointer;
    background-color: var(--k-bg-white);
}

.btn-area {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 32px;
}

/* 단기 채용 공고 등록/수정 화면 하단 액션을 좌우로 분리한다. */
.job-form-action-area {
    align-items: center;
    justify-content: space-between;
}

/* 단기 채용 공고 등록/수정 화면 하단 삭제 액션 영역을 정의한다. */

/* 단기 채용 공고 등록/수정 화면 하단 저장/취소 액션 영역을 정의한다. */
.job-form-action-primary {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

/* Toast UI Editor Custom Styles */

.form-container textarea.form-control {
    height: 200px;
    resize: vertical;
}

.work-request-form-page {
    max-width: 980px;
}

.work-request-form-header {
    margin-bottom: 20px;
}

.work-request-form-help {
    margin: 8px 0 0;
    color: var(--job-color-text-light);
    font-size: 12px;
    line-height: 1.6;
}

/* 단기 채용 공고 등록 화면의 전체 폭과 카드 없는 폼 톤을 정의한다. */
.job-posting-form-page {
    max-width: 1260px;
    margin: 0 auto;
    padding: 32px 0px 48px;
    border-radius: 0;
    box-shadow: none;
}

/* 단기 채용 공고 등록 화면 헤더 여백을 정의한다. */
.job-posting-form-header {
    margin-bottom: 48px;
}

/* 단기 채용 공고 등록 화면 제목의 하단선을 제거한다. */
.job-posting-form-header .form-title {
    margin: 0;
    padding: 0;
    border-bottom: 0;
    color: var(--ref-ink);
    font-size: 26px;
    font-weight: 600;
}

/* 단기 채용 공고 등록 화면 섹션 간격을 정의한다. */
.job-posting-form-section {
    margin-top: 62px;
}

/* 단기 채용 공고 등록 화면 첫 섹션의 상단 간격을 조정한다. */
.job-posting-form-section:first-of-type {
    margin-top: 0;
}

/* 단기 채용 공고 등록 화면 섹션 헤더를 정의한다. */
.job-posting-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--k-border-color-light);
}

/* 단기 채용 공고 등록 화면 섹션 체크 아이콘을 정의한다. */
.job-posting-section-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: var(--k-radius-pill);
    color: var(--k-bg-white);
    background: var(--ref-logo-coral);
    font-size: 9px;
}

/* 단기 채용 공고 등록 화면 섹션 제목을 정의한다. */
.job-posting-section-title {
    margin: 0;
    color: var(--ref-ink);
    font-size: 20px;
    font-weight: 600;
}

/* 단기 채용 공고 등록 화면 섹션 본문 그리드를 정의한다. */
.job-posting-section-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 24px 0;
}

/* 단기 채용 공고 등록 화면 필드 행 배치를 정의한다. */
.job-posting-field-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* 단기 채용 공고 등록 화면 필드 기본 배치를 정의한다. */
.job-posting-field {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* 단기 채용 공고 등록 화면 전체 폭 필드를 정의한다. */
.job-posting-field.is-full {
    max-width: 100%;
}

/* 단기 채용 공고 등록 화면 넓은 필드를 정의한다. */
.job-posting-field.is-large {
    max-width: 620px;
}

/* 단기 채용 공고 등록 화면 맞춤 폭 필드를 정의한다. */
.job-posting-field.is-fit {
    width: auto;
    min-width: 220px;
}

/* 단기 채용 공고 등록 화면 소형 숫자 필드를 정의한다. */
.job-posting-field.is-small {
    width: 210px;
}

/* 단기 채용 공고 등록 화면 중간 폭 필드를 정의한다. */
.job-posting-field.is-medium {
    width: 280px;
}

/* 단기 채용 공고 등록 화면 시간 입력 필드를 정의한다. */
.job-posting-field.is-time {
    width: 210px;
    grid-template-columns: 0 minmax(0, 1fr);
    gap: 0;
}

/* 단기 채용 공고 등록 화면 급여 입력 필드를 정의한다. */
.job-posting-field.is-pay {
    width: 150px;
    grid-template-columns: 0 minmax(0, 1fr);
    gap: 0;
}

/* 단기 채용 공고 등록 화면 담당자 입력 필드를 정의한다. */
.job-posting-field.is-contact {
    width: 520px;
}

/* 단기 채용 공고 등록 화면 체크박스 단독 필드를 정의한다. */
.job-posting-field.is-check {
    display: flex;
    align-items: center;
    width: auto;
    min-height: var(--k-input-height);
}

/* 단기 채용 공고 등록 화면 라벨을 정의한다. */
.job-posting-label {
    color: var(--ref-ink);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

/* 단기 채용 공고 등록 화면 숨김 라벨의 시각적 공간을 제거한다. */
.job-posting-label.is-empty {
    overflow: hidden;
    width: 0;
    height: 0;
    color: transparent;
}

/* 단기 채용 공고 등록 화면 입력 컨트롤을 이미지 기준 크기로 조정한다. */
.job-posting-form-page .form-control,
.job-posting-form-page .select-freemode {
    height: 40px;
    border-color: var(--k-color-gray-e5);
    border-radius: var(--k-radius-md);
    color: var(--ref-ink);
    font-size: 13px;
}

/* 단기 채용 공고 등록 화면 입력 컨트롤 placeholder 톤을 정의한다. */
.job-posting-form-page .form-control::placeholder {
    color: var(--k-color-gray-888);
}

/* 단기 채용 공고 등록 화면 선택형 버튼 그룹을 정의한다. */
.job-posting-choice-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* 단기 채용 공고 등록 화면 라디오/체크 선택 버튼을 정의한다. */
.job-posting-choice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid var(--k-color-gray-e5);
    border-radius: var(--k-radius-md);
    background: var(--k-bg-white);
    color: var(--ref-ink);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    gap: 7px;
}

/* 단기 채용 공고 등록 화면 기본 라디오/체크 크기를 정의한다. */
.job-posting-choice input {
    position: relative;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin: 0;
    border: 1px solid var(--k-color-gray-e5);
    background: var(--k-bg-white);
    appearance: none;
    -webkit-appearance: none;
}

/* 단기 채용 공고 등록 화면 라디오 선택 표시를 정의한다. */
.job-posting-choice input[type="radio"] {
    border-color: var(--ref-logo-coral);
    border-radius: var(--k-radius-pill);
}

/* 단기 채용 공고 등록 화면 선택된 라디오 내부 점을 정의한다. */
.job-posting-choice input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 7px;
    height: 7px;
    border-radius: var(--k-radius-pill);
    background: var(--ref-logo-coral);
}

/* 단기 채용 공고 등록 화면 체크박스 선택 표시를 정의한다. */
.job-posting-choice input[type="checkbox"] {
    border-radius: var(--k-radius-sm);
}

/* 단기 채용 공고 등록 화면 선택된 체크박스 배경을 정의한다. */
.job-posting-choice input[type="checkbox"]:checked {
    border-color: var(--ref-logo-coral);
    background: var(--ref-logo-coral);
}

/* 단기 채용 공고 등록 화면 선택된 체크박스의 흰색 체크를 정의한다. */
.job-posting-choice input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 4px;
    width: 4px;
    height: 8px;
    border: solid var(--k-bg-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* 단기 채용 공고 등록 화면 선택된 선택 버튼을 정의한다. */
.job-posting-choice:has(input:checked) {
    border-color: var(--ref-logo-coral);
    color: var(--ref-logo-coral);
}

/* 단기 채용 공고 등록 화면 보조 안내 문구를 정의한다. */
.job-posting-help {
    align-self: center;
    color: var(--job-color-text-light);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}

/* 단기 채용 공고 등록 화면 날짜 범위 입력을 정의한다. */
.job-posting-date-range {
    display: grid;
    grid-template-columns: minmax(0, 170px) 18px minmax(0, 170px);
    align-items: center;
    gap: 8px;
}

/* 단기 채용 공고 등록 화면 날짜 입력 아이콘 위치를 정의한다. */
.job-posting-date-input-wrap {
    position: relative;
    display: block;
    min-width: 0;
}

/* 단기 채용 공고 등록 화면 날짜 입력 아이콘 여백을 정의한다. */
.job-posting-date-input-wrap .form-control {
    padding-right: 34px;
}

/* 단기 채용 공고 등록 화면 날짜 입력 아이콘 색상과 위치를 정의한다. */
.job-posting-date-icon {
    position: absolute;
    top: 50%;
    right: 12px;
    color: var(--k-color-gray-888);
    font-size: 13px;
    pointer-events: none;
    transform: translateY(-50%);
}

/* 단기 채용 공고 등록 화면 날짜 구분자를 정의한다. */
.job-posting-date-divider {
    color: var(--ref-ink);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

/* 단기 채용 공고 등록 화면 단위 입력 레이아웃을 정의한다. */
.job-posting-unit-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

/* 단기 채용 공고 등록 화면 단위 텍스트를 정의한다. */
.job-posting-unit-text {
    color: var(--ref-gray-700);
    font-size: 13px;
    font-weight: 600;
}

/* 단기 채용 공고 등록 화면 근무지역 입력 크기를 정의한다. */
.job-posting-region-field {
    width: auto;
    grid-template-columns: 90px auto;
}

/* 단기 채용 공고 등록 화면 근무지역 셀렉트 묶음을 정의한다. */
.job-posting-region-controls {
    display: grid;
    grid-template-columns: 132px 132px;
    gap: 8px;
}

/* 단기 채용 공고 등록 화면 주소 입력 묶음을 정의한다. */
.job-posting-address-group {
    display: grid;
    gap: 8px;
}

/* 단기 채용 공고 등록 화면 우편번호 검색 행을 정의한다. */
.job-posting-address-search-row {
    display: grid;
    grid-template-columns: 90px 110px;
    gap: 8px;
    align-items: center;
}

/* 단기 채용 공고 등록 화면 기본주소와 상세주소 한 줄 배치를 정의한다. */
.job-posting-address-detail-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
}

/* 단기 채용 공고 등록 화면 우편번호 검색 버튼을 정의한다. */
.job-board .btn-freemode.btn-sub.job-posting-address-button {
    width: 90px;
    height: 36px;
    padding: 0;
    border-color: var(--ref-logo-coral);
    color: var(--ref-logo-coral);
    font-size: 13px;
    font-weight: 500;
}

/* 단기 채용 공고 등록 화면 우편번호 검색 버튼 hover를 정의한다. */
.job-board .btn-freemode.btn-sub.job-posting-address-button:hover {
    border-color: var(--ref-logo-coral);
    background: var(--k-bg-white);
    color: var(--ref-logo-coral);
}

/* 단기 채용 공고 등록 화면 주소 읽기 전용 입력 배경을 정의한다. */
.job-posting-address-group .form-control[readonly] {
    background: var(--k-bg-white);
    cursor: default;
}

/* 단기 채용 공고 등록 화면 비공개 체크를 일반 체크 형태로 정의한다. */
.job-posting-private-check {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    color: var(--ref-ink);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    gap: 7px;
}

/* 단기 채용 공고 등록 화면 비공개 체크박스 기본 형태를 정의한다. */
.job-posting-private-check input {
    position: relative;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid var(--k-color-gray-e5);
    border-radius: var(--k-radius-sm);
    background: var(--k-bg-white);
    appearance: none;
    -webkit-appearance: none;
}

/* 단기 채용 공고 등록 화면 선택된 비공개 체크박스 배경을 정의한다. */
.job-posting-private-check input:checked {
    border-color: var(--ref-logo-coral);
    background: var(--ref-logo-coral);
}

/* 단기 채용 공고 등록 화면 선택된 비공개 체크박스의 흰색 체크를 정의한다. */
.job-posting-private-check input:checked::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 4px;
    width: 4px;
    height: 8px;
    border: solid var(--k-bg-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* 단기 채용 공고 등록 화면 장문 입력 영역을 정의한다. */
.job-posting-large-textarea {
    width: 100%;
    min-height: 270px;
    padding: 18px;
    line-height: 1.7;
    resize: vertical;
}

/* 단기 채용 공고 등록 화면 액션 버튼 위치를 정의한다. */
.job-posting-form-page .job-form-action-area {
    position: relative;
    justify-content: center;
    margin-top: 60px;
}

/* 단기 채용 공고 등록 화면 하단 버튼의 이미지 기준 큰 크기를 정의한다. */
.job-board .btn-freemode.is-job-form-large {
    width: 149px;
    height: 48px;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
}

/* 단기 채용 공고 등록 화면 삭제 버튼을 수정 모드에서 좌측에 배치한다. */

.work-request-form-upload-box {
    padding: 18px 20px;
    border: 1px dashed var(--job-color-border);
    border-radius: 18px;
    background: var(--k-bg-white);
}

.work-request-form-upload-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.work-request-form-upload-copy {
    flex: 1;
}

.work-request-form-upload-copy .work-request-form-help:first-child {
    margin-top: 0;
}

.work-request-form-upload-btn {
    flex-shrink: 0;
}

.work-request-form-upload-policy {
    margin-top: 14px;
    font-size: 12px;
    color: var(--job-color-text-light);
}

.work-request-public-profile-header {
    margin-bottom: 24px;
}

.work-request-public-profile-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--job-color-text-light);
}

.work-request-public-profile-form .card-freemode {
    margin-bottom: 20px;
}

.work-request-public-profile-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.work-request-public-profile-textarea {
    min-height: 200px;
}

.work-request-public-profile-actions {
    margin-top: 24px;
}

/* ===== Mobile Responsive Styles ===== */
@media screen and (max-width: 1023px) {
    /* 단기 채용 공고 등록 화면 모바일 여백을 정의한다. */
    .job-posting-form-page {
        padding: 18px 18px 40px;
    }

    /* 단기 채용 공고 등록 화면 모바일 섹션 본문을 정의한다. */
    .job-posting-section-body {
        padding: 24px 0 0;
    }

    /* 단기 채용 공고 등록 화면 모바일 필드 행을 정의한다. */
    .job-posting-field-row {
        flex-direction: column;
        gap: 12px;
    }

    /* 단기 채용 공고 등록 화면 모바일 필드를 1열로 전환한다. */
    .job-posting-field,
    .job-posting-field.is-large,
    .job-posting-field.is-fit,
    .job-posting-field.is-small,
    .job-posting-field.is-medium,
    .job-posting-field.is-time,
    .job-posting-field.is-pay,
    .job-posting-field.is-contact,
    .job-posting-region-field {
        width: 100%;
        max-width: none;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* 단기 채용 공고 등록 화면 모바일 숨김 라벨을 유지한다. */
    .job-posting-label.is-empty {
        display: none;
    }

    /* 단기 채용 공고 등록 화면 모바일 날짜 범위를 정의한다. */
    .job-posting-date-range {
        grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
    }

    /* 단기 채용 공고 등록 화면 모바일 근무지역 셀렉트를 정의한다. */
    .job-posting-region-controls {
        grid-template-columns: 1fr;
    }

    /* 단기 채용 공고 등록 화면 모바일 주소 행을 정의한다. */
    .job-posting-address-search-row,
    .job-posting-address-detail-row {
        grid-template-columns: 1fr;
    }

    /* Job List - Mobile Card View */
    .job-list-mobile {
        display: block;
    }

    .job-table {
        display: none !important;
    }

    .work-request-public-profile-toggle {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Job Card Styles - 깔끔하고 정리된 디자인 */
    .job-list-mobile {
        padding: 0 4px;
    }

    /* Job Detail - Mobile */
    .job-detail-wrapper {
        padding: 16px;
    }

    .job-detail-title {
        font-size: 24px !important;
    }

    .job-detail-meta {
        flex-direction: column;
        gap: 12px;
    }

    .info-grid {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }

    .job-detail-info-grid {
        grid-template-columns: 96px minmax(0, 1fr);
        column-gap: 12px;
    }

    .info-label {
        font-weight: 700;
        margin-bottom: 4px;
    }

    .job-detail-info-grid .info-label {
        margin-bottom: 0;
    }

    .info-value {
        padding-left: 0;
    }

    /* Form - Mobile */
    .form-container {
        padding: 16px;
        margin: 10px;
    }

    /* 단기 채용 공고 등록 화면 모바일 전용 컨테이너 여백을 유지한다. */
    .form-container.job-posting-form-page {
        padding: 18px;
        margin: 0 auto;
    }

    /* 단기 채용 공고 등록 화면 모바일 액션을 세로 흐름으로 복귀한다. */

    .btn-area {
        flex-direction: column-reverse;
    }

    .job-form-action-area,
    .job-form-action-primary {
        align-items: stretch;
        width: 100%;
    }

    .job-form-action-primary {
        flex-direction: column;
    }

    .job-form-action-area .btn-freemode {
        width: 100%;
    }

    /* Search - Mobile */
    .job-search-section {
        flex-direction: column;
        gap: 12px;
    }

    .job-search-box {
        width: 100%;
    }

    .job-board-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 16px;
    }

    .job-section-title {
        font-size: 24px;
    }

    /* Mobile Card Admin Buttons */

    /* Status Badge 개선 */

    /* Search Section 개선 */
    .job-search-section {
        margin-bottom: 24px;
    }

    .total-count-label {
        margin-bottom: 8px;
        font-size: 15px;
        font-weight: 600;
    }

    .job-search-box {
        border-bottom: 2px solid var(--ref-ink);
        padding-bottom: 10px;
    }

    /* Header 개선 */
    .job-board-wrapper {
        padding: 0 16px 20px;
    }

    .job-section-title {
        margin-bottom: 20px;
        font-size: 26px;
    }

    /* Pagination 개선 */
    .job-pagination,
    .settle-pagination {
        margin-top: 24px;
        padding-top: 0;
        padding-bottom: 20px;
    }

    /* Category Tabs - Mobile Scroll */
    .job-category-tabs {
        padding: 0 16px;
        gap: 0;
    }

    .job-category-tab {
        padding: 8px 12px;
        font-size: 13px;
    }

    /* Filter Panel - Mobile */
    .job-filter-panel {
        padding: 14px;
    }

    .job-filter-row {
        flex-direction: column;
        gap: 6px;
    }

    .job-filter-label {
        padding-top: 0;
    }

    .job-filter-actions {
        justify-content: stretch;
    }

    .job-filter-btn {
        flex: 1;
        text-align: center;
    }

    /* Mobile Card Additions */
    .job-card-tech-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: 8px;
    }

}

/* Desktop View - Hide Mobile Cards */
@media screen and (min-width: 1024px) {
    .job-list-mobile {
        display: none !important;
    }

    .job-table {
        display: table;
    }
}

/* 단기 채용 목록 페이지의 이미지형 레이아웃을 정의한다. */
.job-list-page {
    box-sizing: border-box;
    padding: 32px 0px 48px;
}

/* 단기 채용 목록 페이지 제목 영역을 정의한다. */
.job-list-page .job-list-page-header {
    margin-bottom: 28px;
}

/* 단기 채용 목록 페이지 제목 크기를 정의한다. */
.job-list-page .job-section-title {
    margin: 0;
    color: var(--ref-ink);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.35;
}

/* 단기 채용 목록 페이지 카테고리 탭을 정의한다. */
.job-list-page .job-category-tabs {
    align-items: flex-end;
    gap: 0;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--job-color-border);
}

/* 단기 채용 목록 페이지 카테고리 버튼을 정의한다. */
.job-list-page .job-category-tab {
    min-height: 34px;
    padding: 12px 16px;
    color: var(--job-color-text-light);
    font-size: 15px;
    font-weight: 500;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}

/* 단기 채용 목록 페이지 활성 카테고리를 정의한다. */
.job-list-page .job-category-tab.active {
    color: var(--ref-ink);
    font-weight: 600;
    border-bottom: 3px solid var(--ref-logo-coral);
}

/* 단기 채용 목록 검색 상단 영역을 정의한다. */
.job-list-page .job-search-section {
    display: block;
    margin-bottom: 20px;
}

/* 단기 채용 목록 건수 행을 정의한다. */
.job-list-page .job-search-count-line {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}

/* 단기 채용 목록 검색 제어 행을 정의한다. */
.job-list-page .job-search-control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* 단기 채용 목록 검색 입력과 버튼 묶음을 정의한다. */
.job-list-page .job-search-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* 단기 채용 목록 전체 건수 문구를 정의한다. */
.job-list-page .total-count-label {
    margin: 0;
    color: var(--ref-ink);
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
}

/* 단기 채용 목록 전체 건수 숫자 색상을 정의한다. */
.job-list-page .total-count-label span {
    color: var(--ref-logo-coral);
    font-weight: 700;
}

/* 단기 채용 목록 상세검색 토글 버튼을 정의한다. */
.job-list-page .job-filter-toggle-btn {
    min-height: 36px;
    padding: 6px 12px;
    border: none;
    border-radius: var(--k-radius-md);
    background-color: var(--ref-accent-orange-bg-soft);
    color: var(--ref-logo-coral);
    font-size: 14px;
    font-weight: 500;
}

/* 단기 채용 목록 상세검색 토글 버튼 hover 상태를 정의한다. */
.job-list-page .job-filter-toggle-btn:hover {
    background-color: var(--k-bg-danger-soft-strong);
}

/* 단기 채용 목록 상세검색 토글 버튼 활성 상태를 정의한다. */
.job-list-page .job-filter-toggle-btn.active {
    background-color: var(--ref-logo-coral);
    color: var(--k-bg-white);
}

/* 단기 채용 목록 검색 박스를 정의한다. */
.job-list-page .job-search-box {
    width: 300px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--job-color-border);
    border-radius: var(--k-radius-md);
    background-color: var(--k-bg-white);
}

/* 단기 채용 목록 검색 구분 셀렉트를 정의한다. */
.job-list-page .job-search-type-select {
    display: none;
}

/* 단기 채용 목록 검색 입력을 정의한다. */
.job-list-page .job-search-input {
    min-width: 0;
    height: 100%;
    padding: 0 8px 0 10px;
    color: var(--ref-ink);
    font-size: 12px;
}

/* 단기 채용 목록 검색 입력 placeholder를 정의한다. */
.job-list-page .job-search-input::placeholder {
    color: var(--job-color-text-light);
}

/* 단기 채용 목록 검색 버튼을 정의한다. */
.job-list-page .job-search-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 100%;
    padding: 0;
    border: none;
    border-radius: 0 var(--k-radius-md) var(--k-radius-md) 0;
    background-color: transparent;
    color: var(--job-color-text-light);
    font-size: 12px;
    cursor: default;
    pointer-events: none;
}

/* 단기 채용 목록 검색 버튼을 정의한다. */
.job-list-page .job-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 36px;
    padding: 14px 12px;
    border: 1px solid var(--job-color-border);
    border-radius: var(--k-radius-md);
    background-color: var(--k-bg-white);
    color: var(--ref-ink);
    font-size: 14px;
    font-weight: 500;
}

/* 단기 채용 목록 상세검색 패널을 정의한다. */
.job-list-page .job-filter-panel {
    margin-bottom: 22px;
    padding: 18px 10px;
    border: none;
    border-radius: var(--k-radius-sm);
    background-color: var(--k-color-gray-fa);
}

/* 단기 채용 목록 상세검색 행을 정의한다. */
.job-list-page .job-filter-row {
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

/* 단기 채용 목록 상세검색 인라인 행을 정의한다. */
.job-list-page .job-filter-row--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
}

/* 단기 채용 목록 상세검색 조건 묶음을 정의한다. */
.job-list-page .job-filter-group {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* 단기 채용 목록 상세검색 라벨을 정의한다. */
.job-list-page .job-filter-label {
    min-width: auto;
    padding-top: 0;
    color: var(--ref-ink);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* 단기 채용 목록 상세검색 칩 묶음을 정의한다. */
.job-list-page .job-filter-chips {
    gap: 6px;
}

/* 단기 채용 목록 상세검색 칩을 정의한다. */
.job-list-page .filter-chip {
    min-height: 26px;
    padding: 6px 12px;
    border-color: var(--job-color-border);
    border-radius: var(--k-radius-pill);
    background-color: var(--k-bg-white);
    color: var(--job-color-text-light);
    font-size: 13px;
    font-weight: 500;
}

/* 단기 채용 목록 상세검색 칩 활성 상태를 정의한다. */
.job-list-page .filter-chip.active {
    border-color: var(--ref-logo-coral);
    background-color: var(--ref-logo-coral);
    color: var(--k-bg-white);
}

/* 단기 채용 목록 상세검색 셀렉트를 정의한다. */
.job-list-page .job-filter-chips .select-freemode {
    height: 32px;
    border-color: var(--job-color-border);
    border-radius: var(--k-radius-sm);
    color: var(--ref-ink);
    font-size: 12px;
}

/* 단기 채용 목록 지역 조건 행을 정의한다. */
.job-list-page .job-filter-row--location .job-filter-chips {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr);
    gap: 6px;
    width: 100%;
}

/* 단기 채용 목록 상세검색 액션 영역을 정의한다. */
.job-list-page .job-filter-actions {
    margin-top: 14px;
    padding-top: 0;
    border-top: none;
}

/* 단기 채용 목록 상세검색 액션 버튼을 정의한다. */
.job-list-page .job-filter-btn {
    min-height: 36px;
    padding: 0 12px;
    border-radius: var(--k-radius-md);
    font-size: 13px;
    font-weight: 500;
}

/* 단기 채용 목록 상세검색 검색 버튼을 정의한다. */
.job-list-page .job-filter-btn--search {
    background-color: var(--ref-logo-coral);
    color: var(--k-bg-white);
}

/* 단기 채용 목록 상세검색 초기화 버튼을 정의한다. */
.job-list-page .job-filter-btn--reset {
    border: 1px solid var(--job-color-border);
    background-color: var(--k-bg-white);
    color: var(--ref-ink);
}

/* 단기 채용 목록 데스크톱 리스트를 정의한다. */
.job-list-desktop {
    border-top: 1px solid var(--job-color-border);
}

/* 단기 채용 목록 데스크톱 행을 정의한다. */
.job-list-row {
    display: grid;
    grid-template-columns: 190px minmax(240px, 1fr) 210px 118px;
    gap: 18px;
    min-height: 82px;
    padding: 24px 12px;
    border-bottom: 1px solid var(--job-color-border);
    cursor: pointer;
    box-sizing: border-box;
}

/* 단기 채용 목록 행 hover 상태를 정의한다. */
.job-list-row:hover {
    background-color: var(--k-bg-job-subtle);
}

/* 단기 채용 목록 회사명 칸을 정의한다. */
.job-list-company-col {
    min-width: 0;
}

/* 단기 채용 목록 회사명과 관심 버튼 행을 정의한다. */
.job-list-company-line {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* 단기 채용 목록 회사명 텍스트를 정의한다. */
.job-list-company-name {
    overflow: hidden;
    color: var(--ref-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 단기 채용 목록 제목 칸을 정의한다. */
.job-list-title-col {
    min-width: 0;
}

/* 단기 채용 목록 제목 링크를 정의한다. */
.job-list-page .job-list-title {
    display: block;
    overflow: hidden;
    margin-bottom: 10px;
    color: var(--ref-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 단기 채용 목록 태그 영역을 정의한다. */
.job-list-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 18px;
}

/* 단기 채용 목록 태그 텍스트를 정의한다. */
.job-list-tag {
    color: var(--job-color-text-light);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
}

/* 단기 채용 목록 메타 정보 칸을 정의한다. */
.job-list-meta-col {
    display: grid;
    gap: 5px;
    color: var(--job-color-text-light);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

/* 단기 채용 목록 접수기간 칸을 정의한다. */
.job-list-period-col {
    display: grid;
    align-content: start;
    justify-items: end;
    gap: 4px;
    color: var(--job-color-text-light);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

/* 단기 채용 목록 빈 결과 영역을 정의한다. */
.job-list-empty {
    padding: 48px 16px;
    border-bottom: 1px solid var(--job-color-border);
    color: var(--job-color-text-light);
    font-size: 13px;
    text-align: center;
}

/* 단기 채용 목록 관심 버튼을 정의한다. */
.job-list-page .bookmark-btn {
    flex-shrink: 0;
    color: var(--k-color-slate-300);
    font-size: 14px;
}

/* 단기 채용 목록 관심 버튼 hover 상태를 정의한다. */
.job-list-page .bookmark-btn:hover {
    color: var(--ref-logo-coral);
}

/* 단기 채용 목록 관심 버튼 활성 상태를 정의한다. */
.job-list-page .bookmark-btn.active {
    color: var(--ref-logo-coral);
}

/* 단기 상주 프로젝트 관리자 목록 행 레이아웃을 정의한다. */

/* 단기 상주 프로젝트 관리자 목록 액션 영역을 정의한다. */

/* 단기 상주 프로젝트 관리자 목록 액션 버튼을 목록 밀도에 맞게 정의한다. */

/* 채용관리 목록의 채용중 상태 배지를 메인 코럴 색상으로 정의한다. */
.job-list-page.job-admin-list-shell .job-status-tag--open {
    background-color: var(--ref-logo-coral);
    color: var(--k-bg-white);
}

/* 단기 채용 목록 태블릿 이하 레이아웃을 정의한다. */
@media screen and (max-width: 1023px) {
    .job-list-page {
        padding: 22px 16px 36px;
    }

    .job-list-page .job-search-section {
        align-items: stretch;
    }

    .job-list-page .job-search-control-row {
        justify-content: space-between;
    }

    .job-list-page .job-search-actions {
        width: auto;
    }

    .job-list-page .job-search-box {
        width: 100%;
    }

    .job-list-page .job-filter-row {
        align-items: flex-start;
    }

    .job-list-desktop {
        display: none !important;
    }
}

/* 단기 채용 목록 모바일 상세검색 레이아웃을 정의한다. */
@media screen and (max-width: 768px) {
    .job-list-page .job-section-title {
        font-size: 22px;
    }

    .job-list-page .job-category-tabs {
        padding: 0;
    }

    .job-list-page .job-category-tab {
        padding: 0 12px;
    }

    .job-list-page .job-search-control-row {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .job-list-page .job-search-actions {
        width: 100%;
    }

    .job-list-page .job-search-box {
        flex: 1;
        width: auto;
    }

    .job-list-page .job-search-input {
        width: auto;
    }

    .job-list-page .job-search-btn {
        min-height: 28px;
        border-radius: var(--k-radius-md);
    }

    .job-list-page .job-filter-row--location .job-filter-chips {
        grid-template-columns: 1fr;
    }
}

/* ===== 채용 공통 헤더 영역입니다. ===== */

.job-header {
    border-bottom: 1px solid var(--job-color-border);
    background-color: var(--k-bg-white);
}

.job-header-inner {
    /* 채용 상단 헤더 내부 정렬 영역입니다. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
    height: 70px;
    padding: 0 32px;
}

.job-header-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--k-color-slate-800);
    font-family: 'Fredoka', sans-serif;
    font-size: 22px;
    font-weight: 600;
    flex-shrink: 0;
}

.job-header-logo img {
    width: 40px;
    height: 40px;
}

.job-header-nav-wrap {
    background-color: var(--k-bg-white);
    box-shadow: inset 0 -1px 0 var(--job-color-border);
}

.job-header-nav-inner {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.job-header-nav {
    /* 채용 상단 메뉴를 가운데 정렬하는 영역입니다. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-height: 56px;
}

.job-header-nav-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 18px;
    min-height: 56px;
    text-decoration: none;
    color: var(--k-text-subtle);
    font-size: 14px;
    font-weight: 500;
    border-bottom: 2.5px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.job-header-nav-tab:hover {
    color: var(--job-color-text);
}

.job-header-nav-tab.active {
    color: var(--job-color-text);
    border-bottom-color: var(--job-color-text);
    font-weight: 600;
}

.job-header-nav-tab i {
    font-size: 13px;
}

/* 기업회원 등록 드롭다운의 기준 영역을 정의한다. */
.job-header-create-menu-wrap {
    position: relative;
    display: flex;
    min-height: 56px;
}

/* 기업회원 등록 드롭다운 트리거 버튼을 정의한다. */
.job-header-create-trigger {
    margin: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    list-style: none;
}

/* 기업회원 등록 드롭다운 메뉴 패널을 정의한다. */
.job-header-create-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 30;
    display: grid;
    gap: 4px;
    min-width: 168px;
    padding: 8px;
    border: 1px solid var(--k-border-color);
    border-radius: var(--k-radius-sm);
    background: var(--k-bg-white);
    box-shadow: 0 4px 20px var(--k-overlay-dark-08);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -4px);
    transition: opacity 0.15s, transform 0.15s;
}

/* 기업회원 등록 드롭다운 표시 상태를 정의한다. */
.job-header-create-menu-wrap:hover .job-header-create-menu,
.job-header-create-menu-wrap:focus-within .job-header-create-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

/* 기업회원 등록 드롭다운 항목을 정의한다. */
.job-header-create-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 10px;
    border-radius: var(--k-radius-sm);
    text-decoration: none;
    color: var(--k-text-subtle);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* 기업회원 등록 드롭다운 항목의 선택 및 호버 상태를 정의한다. */
.job-header-create-menu-item:hover,
.job-header-create-menu-item.active {
    background: var(--k-bg-hover);
    color: var(--job-color-text);
}

/* 기업회원 등록 드롭다운 항목 아이콘을 정의한다. */
.job-header-create-menu-item i {
    width: 14px;
    font-size: 13px;
    text-align: center;
}

.job-header-user {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 12px;
}

/* 채용 공통 헤더 알림 개수 뱃지의 크기와 위치를 정의한다. */
.job-header-notification-badge {
    position: absolute;
    top: -10px;
    right: -5px;
    display: none;
    padding: 2px 5px;
    font-size: 11px;
}

.job-header-profile-wrap {
    position: relative;
}

.job-header-profile-wrap .profile-dropdown {
    width: 180px;
}

.job-header-profile-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.job-header-profile-trigger:hover .job-header-username {
    color: var(--job-color-text);
}

.job-header-profile-trigger .profile-chevron {
    font-size: 12px;
    color: var(--ref-ink);
}

.job-header-username {
    font-size: 14px;
    font-weight: 600;
    color: var(--k-color-slate-650);
}

@media (max-width: 1023px) {
    .job-header-inner {
        height: auto;
        padding: 0 16px;
    }

    .job-header-logo {
        font-size: 18px;
        padding: 10px 0;
    }

    .job-header-logo img {
        width: 24px;
        height: 24px;
    }

    .job-header-user {
        padding: 10px 0;
    }

    .job-header-profile-wrap .profile-dropdown {
        right: 0;
    }

    .job-header-username {
        font-size: 13px;
    }

    .job-header-nav-inner {
        padding: 0 16px;
    }

    .job-header-nav {
        width: 100%;
        gap: 0;
    }

    .job-header-nav-tab {
        flex: 1;
        justify-content: center;
        padding: 10px 8px;
        font-size: 13px;
        gap: 4px;
        min-height: 48px;
    }

    .job-header-nav-tab i {
        font-size: 12px;
    }

    .job-header-create-menu-wrap {
        flex: 1;
        min-width: 0;
    }

    .job-header-create-menu {
        left: 0;
        right: 0;
        min-width: 150px;
        transform: translate(0, -4px);
    }

    .job-header-create-menu-wrap:hover .job-header-create-menu,
    .job-header-create-menu-wrap:focus-within .job-header-create-menu {
        transform: translate(0, 0);
    }
}

/* ===== 채용 상단 배너 영역입니다. ===== */

.job-top-banner {
    background-color: var(--k-bg-hover);
}

.job-top-banner-inner {
    max-width: 1200pxpx;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.job-top-swiper {
    overflow: hidden;
}

.job-top-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.job-top-banner-link {
    display: block;
    width: 100%;
    text-decoration: none;
    cursor: pointer;
}

.job-top-banner-link.no-link,
.ad-banner-link.no-link {
    cursor: default;
}

.job-top-banner-img {
    width: 100%;
    height: auto;
    max-height: 240px;
    object-fit: cover;
    display: block;
}

.job-top-swiper-prev,
.job-top-swiper-next {
    color: var(--k-bg-white) !important;
    background: var(--k-overlay-dark-25);
    border-radius: 50%;
    width: 36px !important;
    height: 36px !important;
    transition: background 0.2s;
}

.job-top-swiper-prev::after,
.job-top-swiper-next::after {
    font-size: 14px !important;
    font-weight: 700;
}

.job-top-swiper-prev:hover,
.job-top-swiper-next:hover {
    background: var(--k-overlay-dark-45);
}

@media (max-width: 1023px) {
    .job-top-banner-img {
        max-height: 160px;
    }

    .job-top-swiper-prev,
    .job-top-swiper-next {
        display: none !important;
    }
}

/* ===== TALENT SEARCH STYLES ===== */

/* 인재 목록 카드 그리드 */

.talent-card-badges {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 150px;
}

.talent-card-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 7px;
    border-radius: var(--k-radius-pill);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.talent-card-badge--primary {
    color: var(--job-color-primary);
    background: var(--k-bg-hover);
}

.talent-card-badge--neutral {
    color: var(--k-color-slate-600);
    background: var(--k-border-color-light);
}

.talent-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--k-color-indigo-500), var(--customer-lead));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 16px;
    flex-shrink: 0;
    overflow: hidden;
}

.talent-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.talent-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--k-color-slate-800);
    margin: 0;
}

.talent-card-subtitle {
    font-size: 12px;
    color: var(--k-color-indigo-500);
    margin: 4px 0 0 0;
    font-weight: 600;
}

.talent-card-meta-item {
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.talent-card-meta-label {
    display: block;
    font-size: 11px;
    color: var(--k-color-slate-400);
    margin-bottom: 3px;
}

.talent-card-meta-value {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--k-color-slate-700);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.talent-skill-tag--more {
    background: var(--k-border-color-light);
    color: var(--k-color-slate-600);
}

.talent-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--k-border-color-light);
    font-size: 12px;
    color: var(--k-color-slate-400);
}

.talent-card-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--job-color-primary);
    font-weight: 700;
    white-space: nowrap;
}

.page-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    color: var(--k-color-slate-400);
}

/* 프리랜서 프로필 등록/수정 폼의 최대 폭을 정의한다. */
.talent-profile-form {
    max-width: 960px;
    margin: 0 auto;
}

/* 프리랜서 프로필 상단 헤더와 연락가능시간 입력 영역을 배치한다. */
.talent-profile-form-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

/* 프리랜서 프로필 헤더 문구 영역이 남은 폭을 사용하게 한다. */
.talent-profile-form-header-copy {
    flex: 1;
    min-width: 0;
}

/* 프리랜서 연락가능시간 셀렉트 그룹을 정의한다. */
.talent-response-time-panel {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* 프리랜서 연락가능시간 라벨을 상단 컨트롤에 맞춘다. */
.talent-response-time-label {
    color: var(--job-color-text);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* 프리랜서 연락가능시간 셀렉트를 3개 컬럼으로 정렬한다. */
.talent-response-time-controls {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) repeat(2, minmax(90px, 1fr));
    gap: 8px;
    width: 360px;
}

/* 프리랜서 연락가능시간 비활성화 셀렉트 상태를 표시한다. */
.talent-response-time-controls .select-freemode:disabled {
    background-color: var(--job-color-bg-subtle);
    color: var(--job-color-text-light);
    cursor: not-allowed;
}

/* 프로필 수정 화면을 이미지 기준의 넓은 단일 폼으로 표시한다. */
.talent-profile-edit-form {
    max-width: 1200px;
    margin: 28px auto 0;
    padding: 0 24px 32px;
    border-radius: 0;
    box-shadow: none;
}

/* 프로필 수정 화면 제목 하단 라인을 제거한다. */
.talent-profile-edit-form .form-title {
    border-bottom: 0;
    margin-bottom: 12px;
}

/* 프로필 공개 설정 박스를 정의한다. */
.talent-profile-public-box {
    padding: 18px 16px;
    margin: 30px 0 52px;
    border: var(--k-border-thin);
    border-radius: var(--k-radius-md);
    background-color: var(--k-bg-white);
}

/* 프로필 수정 섹션 간격을 이미지 흐름에 맞춘다. */
.talent-profile-section-block {
    margin-bottom: 48px;
}

/* 프로필 수정 섹션 제목을 정의한다. */
.talent-profile-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--job-color-border);
    color: var(--job-color-text);
    font-size: 20px;
    font-weight: 600;
}

/* 프로필 수정 섹션 체크 아이콘을 강조 색상으로 표시한다. */
.talent-profile-section-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: var(--k-radius-pill);
    background-color: var(--job-color-primary);
    color: var(--k-bg-white);
    font-size: 9px;
    line-height: 1;
    flex-shrink: 0;
}

/* 프로필 수정 필수 표시를 강조 색상으로 표시한다. */
.talent-profile-required {
    color: var(--job-color-primary);
}

/* 프로필 수정 섹션 헤더 안 제목과 추가 버튼을 같은 높이에 둔다. */
.talent-profile-edit-form .talent-profile-section-head {
    align-items: center;
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--job-color-border);
}

.talent-profile-edit-form .talent-profile-section-head .talent-profile-section-title {
    margin: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

/* 프로필 이미지 편집 행을 이미지 기준의 가로 흐름으로 배치한다. */
.talent-profile-image-row {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
    gap: 42px;
    padding-left: 28px;
}

/* 프로필 이미지 미리보기 원형 영역을 정의한다. */
.talent-profile-image-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    overflow: hidden;
    border: 1px solid var(--job-color-border);
    border-radius: var(--k-radius-pill);
    background-color: var(--k-bg-white);
    color: var(--job-color-border);
}

/* 프로필 이미지 썸네일을 원형 영역에 맞춘다. */
.talent-profile-image-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 프로필 이미지 도움말 영역을 입력 행 높이에 맞춘다. */
.talent-profile-image-guide {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* 프로필 이미지 버튼 묶음을 이미지 기준 간격으로 정렬한다. */
.talent-profile-image-buttons {
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* 프로필 기본정보를 라벨/입력 행 구조로 정렬한다. */
.talent-profile-form-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-left: 24px;
}

/* 프로필 기본정보 행을 좌측 라벨과 우측 입력으로 구성한다. */
.talent-profile-form-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

/* 기본정보 이름과 출생년도를 한 행에 배치한다. */
.talent-profile-form-row.is-basic-pair {
    grid-template-columns: minmax(0, 260px) minmax(0, 220px);
    gap: 42px;
}

/* 기본정보 한 행 내부 필드를 라벨과 입력으로 정렬한다. */
.talent-profile-inline-field {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    min-width: 0;
}

/* 긴 문장 입력 행은 라벨을 상단에 맞춘다. */
.talent-profile-form-row.is-textarea {
    align-items: flex-start;
}

/* 프로필 입력과 안내문을 세로로 배치한다. */

/* 프로필 수정의 짧은 입력 폭을 이미지 기준으로 제한한다. */
.talent-profile-short-input {
    max-width: 120px;
}

/* 프로필 수정의 중간 입력 폭을 이미지 기준으로 제한한다. */
.talent-profile-medium-input {
    max-width: 220px;
}

/* 기본 정보 입력 그리드를 이미지 구조에 맞춘다. */

/* 기본 정보 첫 번째 줄은 닉네임, 활동가능 지역, 상주 가능 여부에 맞춘다. */

/* 기본 정보 두 번째 줄은 전문분야, 경력연차, 희망단가에 맞춘다. */

/* 기본 정보 필드 라벨과 입력을 가로로 정렬한다. */

/* 기본 정보 라벨 크기를 이미지와 맞춘다. */
.talent-profile-edit-form .label-freemode {
    margin-bottom: 0;
    color: var(--ref-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

/* 닉네임 안내 문구 색상과 간격을 정의한다. */

/* 라벨 행 내부 안내 문구는 입력 시작선에 맞춘다. */

/* 프로필 도움말 문구를 이미지 기준의 작은 보조 문구로 표시한다. */
.talent-profile-help {
    margin: 0;
    color: var(--job-color-text-light);
    font-size: 12px;
    line-height: 1.5;
}

/* 단위가 붙은 입력 그룹을 정렬한다. */
.talent-profile-inline-unit,
.talent-profile-rate-group {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.talent-profile-inline-unit span,
.talent-profile-rate-group span {
    color: var(--ref-gray-700);
    font-size: 13px;
    white-space: nowrap;
}

.talent-profile-rate-group .select-freemode {
    width: 112px;
    flex-shrink: 0;
}

.talent-profile-rate-group .input-freemode {
    min-width: 0;
}

/* 프로필 출생년도 셀렉트 폭을 이미지 기준으로 맞춘다. */
.talent-profile-year-select {
    width: 96px;
    flex: 0 0 96px;
}

/* 기본정보 연락처 행의 입력, 체크, 안내문을 한 줄로 배치한다. */
.talent-profile-contact-group,
.talent-profile-email-group,
.talent-profile-resident-group,
.talent-profile-location-group,
.talent-profile-radio-group {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* 이메일 도메인 선택 폭을 이미지 기준으로 제한한다. */
.talent-profile-email-domain-select {
    width: 140px;
    flex: 0 0 140px;
}

/* 희망 근무지 시/도, 군/구 셀렉트 폭을 고정한다. */
.talent-profile-region-select {
    width: 220px;
    flex: 0 0 220px;
}

/* 기본정보 체크 옵션을 작은 체크박스와 문구로 정렬한다. */
.talent-profile-check-option {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    color: var(--job-color-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    gap: 6px;
    white-space: nowrap;
}

/* 기본정보 체크박스 기본 모양을 정의한다. */
.talent-profile-check-option input[type="checkbox"] {
    position: relative;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid var(--k-color-gray-e5);
    border-radius: var(--k-radius-sm);
    background: var(--k-bg-white);
    appearance: none;
    -webkit-appearance: none;
}

/* 기본정보 체크박스 선택 상태를 정의한다. */
.talent-profile-check-option input[type="checkbox"]:checked {
    border-color: var(--ref-logo-coral);
    background: var(--ref-logo-coral);
}

/* 기본정보 체크박스 선택 표시를 정의한다. */
.talent-profile-check-option input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 4px;
    width: 4px;
    height: 8px;
    border: solid var(--k-bg-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* 기본정보 라디오 옵션을 버튼형 라디오와 문구로 배치한다. */
.talent-profile-radio-option {
    display: inline-flex;
    align-items: center;
    height: var(--k-input-height);
    padding: 0 14px;
    border: var(--k-border-gray);
    border-radius: var(--k-radius-md);
    background: var(--k-bg-white);
    color: var(--job-color-text);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    gap: 8px;
}

/* 기본정보 라디오 기본 원형을 정의한다. */
.talent-profile-radio-option input[type="radio"] {
    position: relative;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin: 0;
    border: 1px solid var(--k-color-gray-e5);
    border-radius: 50%;
    background: var(--k-bg-white);
    appearance: none;
    -webkit-appearance: none;
}

/* 기본정보 라디오 선택 상태를 정의한다. */
.talent-profile-radio-option input[type="radio"]:checked {
    border-color: var(--ref-logo-coral);
}

/* 기본정보 라디오 선택 점을 정의한다. */
.talent-profile-radio-option input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ref-logo-coral);
    transform: translate(-50%, -50%);
}

/* 기본정보 라디오 선택 카드의 강조선을 정의한다. */
.talent-profile-radio-option:has(input[type="radio"]:checked) {
    border-color: var(--ref-logo-coral);
}

/* 기본정보 필드 옆 안내 문구를 이미지 기준의 작은 빨간 문구로 표시한다. */
.talent-profile-field-help {
    color: var(--ref-logo-coral);
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
}

/* 기본정보 개인정보 동의 박스를 이미지처럼 하단 전체 폭으로 배치한다. */
.talent-profile-privacy-agreement {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 50px;
    margin-top: 12px;
    padding: 0 16px;
    border: var(--k-border-gray);
    border-radius: var(--k-radius-md);
    background: var(--k-bg-white);
    box-sizing: border-box;
    gap: 12px;
}

/* 기본정보 개인정보 필수 문구 색상을 강조한다. */
.talent-profile-privacy-agreement strong {
    color: var(--ref-logo-coral);
    font-weight: 600;
}

/* 기본정보 약관 보기 버튼을 이미지 기준의 회색 pill 버튼으로 표시한다. */
.job-board .talent-profile-terms-button.btn-freemode.btn-sub {
    min-width: 72px;
    height: 30px;
    padding: 0 13px;
    border: 0;
    border-radius: var(--k-radius-pill);
    background-color: var(--k-bg-gray-soft-100);
    color: var(--job-color-text-light);
    font-size: 12px;
    font-weight: 500;
    line-height: 30px;
}

/* 기본정보 약관 보기 버튼 hover 톤을 이미지 톤 안에서 유지한다. */
.job-board .talent-profile-terms-button.btn-freemode.btn-sub:hover {
    border: 0;
    background-color: var(--k-bg-gray-light);
    color: var(--job-color-text-light);
    box-shadow: none;
}

/* 자기소개 입력 높이를 이미지와 맞춘다. */

/* 보유 자격증 영역을 등록 행과 목록 행으로 구성한다. */
.talent-profile-certificate-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.talent-profile-certificate-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 110px 72px;
    gap: 8px;
    align-items: center;
}

/* 보유 자격증 목록 행을 세로로 배치한다. */
.talent-profile-certificate-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 보유 자격증 목록 입력값을 이미지의 연한 행 배경으로 표시한다. */
.talent-profile-certificate-row .input-freemode {
    border-color: transparent;
    background-color: var(--k-bg-gray-soft-100);
}

/* 보유 자격증 삭제 버튼을 이미지의 작은 핑크 버튼으로 표시한다. */
.talent-profile-certificate-delete-btn {
    min-width: 62px;
    height: 30px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--k-radius-pill);
    background-color: var(--ref-accent-orange-bg-soft);
    color: var(--ref-logo-coral);
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

/* 포트폴리오 파일/URL 입력 행을 정의한다. */
.talent-profile-file-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
}

/* 포트폴리오 파일 안내 입력은 읽기 전용 보조 행으로 표시한다. */
.talent-profile-file-row .input-freemode[readonly] {
    background-color: var(--k-bg-white);
    color: var(--job-color-text-light);
    cursor: default;
}

/* 포트폴리오 URL 등록과 파일 등록 영역을 분리한다. */
.talent-profile-portfolio-register-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
}

/* 포트폴리오 등록 방식을 독립된 입력 박스로 표시한다. */

/* 포트폴리오 등록 박스의 라벨을 명확하게 표시한다. */

/* 포트폴리오 파일 등록 헤더를 설명과 버튼으로 분리한다. */

/* 포트폴리오 파일 등록 안내 문구를 보조 텍스트로 표시한다. */

/* 이미지 기준의 얇은 외곽선 액션 버튼을 정의한다. */
.talent-profile-outline-btn {
    min-width: 62px;
    height: 30px;
    padding: 0 16px;
    border: 1px solid var(--ref-accent-orange);
    border-radius: var(--k-radius-pill);
    background-color: var(--k-bg-white);
    color: var(--ref-accent-orange);
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* 자격증 삭제 아이콘 버튼을 정의한다. */

/* 프로젝트 경험 목록을 세로로 배치한다. */
.talent-profile-project-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* 프로젝트 경험 입력 카드를 이미지의 연한 박스 구조로 정의한다. */
.talent-profile-project-card {
    padding: 18px 20px;
    border-radius: var(--k-radius-md);
    background-color: var(--ref-bg-base);
}

/* 프로젝트 경험 행을 라벨/입력 2컬럼으로 정렬한다. */
.talent-profile-project-row {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.talent-profile-project-row.is-description {
    align-items: start;
}

.talent-profile-project-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

/* 프로젝트 경험 담당 업무 행을 프로젝트 기간 아래 전체 폭으로 배치한다. */
.talent-profile-project-row.is-role {
    grid-column: 1 / -1;
}

.talent-profile-date-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.talent-profile-date-range span {
    color: var(--job-color-text);
    font-size: 14px;
}

/* 달력 입력 오른쪽 아이콘 위치와 입력 여백을 정의한다. */
.talent-profile-date-field {
    position: relative;
    min-width: 0;
}

.talent-profile-date-field .input-freemode {
    width: 100%;
    padding-right: 34px;
    cursor: pointer;
}

.talent-profile-date-icon {
    position: absolute;
    top: 50%;
    right: 12px;
    color: var(--job-color-text-light);
    font-size: 13px;
    line-height: 1;
    pointer-events: none;
    transform: translateY(-50%);
}

.talent-profile-project-textarea {
    min-height: 200px;
    resize: vertical;
}

/* 페이지 하단 액션을 이미지와 같이 중앙 배치한다. */
.talent-profile-page-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 34px;
}

.talent-profile-page-actions .btn-freemode {
    min-width: 112px;
}

/* 프리랜서 프로필 도움말 간격을 입력 필드에 맞춘다. */
.talent-profile-form-body .talent-profile-help {
    margin-top: 6px;
}

/* 프리랜서 프로필 긴 입력 영역 높이를 정의한다. */
.talent-profile-textarea {
    min-height: 130px;
    resize: vertical;
}

/* 프리랜서 프로필 섹션 헤더를 액션 버튼과 함께 정렬한다. */
.talent-profile-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

/* 프리랜서 프로필 파일 입력 기본 UI를 숨긴다. */
.talent-profile-file-input {
    display: none;
}

/* 프리랜서 대표 포트폴리오 편집 목록을 세로 흐름으로 배치한다. */

/* 프리랜서 대표 포트폴리오 편집 카드 스타일을 정의한다. */
.talent-profile-portfolio-card {
    padding: 18px;
    border: var(--k-border-thin);
    border-radius: var(--k-radius-md);
    background-color: var(--job-color-bg-subtle);
}

/* 프리랜서 경력/포트폴리오 편집 카드 내부 그리드 간격을 줄인다. */
.talent-profile-portfolio-card .setting-form-grid {
    gap: 12px;
}

/* 프리랜서 경력/포트폴리오 편집 카드 내부 입력 그룹 간격을 줄인다. */
.talent-profile-portfolio-card .form-group-freemode {
    margin-bottom: 12px;
}

/* 프리랜서 대표 포트폴리오 편집 카드 헤더를 정렬한다. */
.talent-profile-portfolio-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

/* 프리랜서 대표 포트폴리오 편집 카드 제목을 정의한다. */
.talent-profile-portfolio-card-head strong {
    color: var(--job-color-text);
    font-size: 15px;
    font-weight: 700;
}

/* 프리랜서 대표 포트폴리오 빈 상태를 정의한다. */
.talent-profile-portfolio-empty {
    padding: 28px 16px;
    border: var(--k-border-thin);
    border-radius: var(--k-radius-md);
    background-color: var(--job-color-bg-subtle);
    color: var(--job-color-text-light);
    text-align: center;
    font-size: 14px;
}

/* 프리랜서 대표 포트폴리오 체크 행을 입력 UI와 맞춘다. */
.talent-profile-check-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--k-input-height);
    color: var(--job-color-text);
    font-size: 14px;
    font-weight: 600;
}

/* 인재 상세 */
.talent-detail-wrapper {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 32px 24px;
    flex: 1;
}

.talent-profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--k-color-indigo-500), var(--customer-lead));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 32px;
    flex-shrink: 0;
    overflow: hidden;
}

.talent-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.talent-skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.talent-skill-chip {
    padding: 6px 14px;
    background: var(--k-bg-indigo-soft-strong);
    color: var(--k-color-indigo-500);
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}

.talent-meta-card {
    padding: 16px 18px;
    border-radius: var(--k-radius-lg);
    border: 1px solid var(--k-border-color);
    background: var(--k-bg-hover);
}

.talent-meta-label {
    font-size: 12px;
    color: var(--k-color-slate-400);
    margin-bottom: 6px;
}

.talent-meta-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--k-color-slate-700);
    line-height: 1.5;
    white-space: pre-line;
}

.talent-career-insight {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 24px;
    padding: 4px 0 0;
}

.talent-career-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 96px;
    padding: 18px 0;
    border-top: 2px solid var(--k-color-slate-800);
    border-bottom: 1px solid var(--k-border-color);
}

.talent-career-hero span {
    font-size: 12px;
    color: var(--k-color-slate-400);
}

.talent-career-hero strong {
    margin-top: 8px;
    font-size: 32px;
    line-height: 1.15;
    color: var(--k-color-slate-800);
}

.talent-career-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    border-top: 2px solid var(--k-color-slate-800);
}

.talent-career-list-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    padding: 13px 0;
    border-bottom: 1px solid var(--k-border-color);
}

.talent-career-list-item span {
    flex-shrink: 0;
    font-size: 13px;
    color: var(--k-color-slate-400);
}

.talent-career-list-item strong {
    color: var(--k-color-slate-700);
    font-size: 15px;
    line-height: 1.45;
    text-align: right;
}

.talent-link-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--k-bg-hover);
    border: 1px solid var(--k-border-color);
    border-radius: var(--k-radius-md);
    margin-bottom: 8px;
}

.talent-link-item i {
    color: var(--k-color-indigo-500);
}

.talent-link-item a {
    color: var(--k-color-indigo-500);
    text-decoration: none;
    word-break: break-all;
}

.talent-link-item a:hover {
    text-decoration: underline;
}

/* 인재 상세 대표 포트폴리오 목록을 구분선 기반 리스트로 정의한다. */

/* 인재 상세 대표 포트폴리오 항목을 가벼운 리스트형으로 정의한다. */
.talent-portfolio-case-card {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    padding: 24px 0;
    border: 0;
    border-bottom: 1px solid var(--k-border-color);
    border-radius: 0;
    background: transparent;
}

/* 인재 상세 대표 포트폴리오 기간을 좌측 컬럼에 분리한다. */
.talent-portfolio-case-period {
    padding-top: 2px;
    color: var(--k-color-slate-400);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}

/* 인재 상세 대표 포트폴리오 본문 컬럼 너비를 안정화한다. */
.talent-portfolio-case-body {
    min-width: 0;
}

/* 인재 상세 대표 포트폴리오 항목 헤더를 정렬한다. */
.talent-portfolio-case-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

/* 인재 상세 대표 포트폴리오 제목을 정의한다. */
.talent-portfolio-case-head h4 {
    margin: 0;
    color: var(--k-color-slate-800);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}

/* 인재 상세 대표 포트폴리오 요약문을 정의한다. */
.talent-portfolio-case-head p {
    margin: 5px 0 0;
    color: var(--k-color-slate-500);
    font-size: 14px;
    line-height: 1.55;
}

/* 인재 상세 대표 포트폴리오 외부 링크를 텍스트 액션으로 정의한다. */
.talent-portfolio-case-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-height: auto;
    padding: 2px 0;
    border: 0;
    border-radius: 0;
    color: var(--k-color-indigo-500);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

/* 인재 상세 대표 포트폴리오 외부 링크 hover 상태를 정의한다. */
.talent-portfolio-case-link:hover {
    text-decoration: underline;
}

/* 인재 상세 대표 포트폴리오 메타 목록을 인라인 정보로 배치한다. */
.talent-portfolio-case-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 16px;
}

/* 인재 상세 대표 포트폴리오 메타 항목을 박스 없이 정의한다. */
.talent-portfolio-case-meta-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

/* 인재 상세 대표 포트폴리오 메타 라벨을 정의한다. */
.talent-portfolio-case-meta-item span {
    display: inline;
    margin-bottom: 0;
    color: var(--k-color-slate-400);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* 인재 상세 대표 포트폴리오 메타 값을 정의한다. */
.talent-portfolio-case-meta-item strong {
    display: inline;
    overflow: visible;
    color: var(--k-color-slate-700);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    text-overflow: clip;
    white-space: normal;
}

/* 인재 상세 대표 포트폴리오 기술 태그 영역을 정의한다. */
.talent-portfolio-case-skills {
    margin-top: 12px;
}

/* 인재 상세 대표 포트폴리오 본문 블록을 정의한다. */
.talent-portfolio-case-copy {
    margin-top: 14px;
    padding-top: 0;
    border-top: 0;
}

/* 인재 상세 대표 포트폴리오 본문 제목을 정의한다. */
.talent-portfolio-case-copy strong {
    display: block;
    margin-bottom: 6px;
    color: var(--k-color-slate-700);
    font-size: 13px;
}

/* 인재 상세 대표 포트폴리오 본문 텍스트를 정의한다. */
.talent-portfolio-case-copy div {
    color: var(--k-color-slate-600);
    font-size: 14px;
    line-height: 1.7;
}

.talent-file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.talent-file-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--k-border-color);
    border-radius: var(--k-radius-xl);
    background: var(--k-bg-white);
}

.talent-file-preview-thumb {
    width: 100%;
    height: 160px;
    border: 1px solid var(--k-border-color);
    border-radius: var(--k-radius-lg);
    background: var(--k-bg-hover);
    overflow: hidden;
    cursor: pointer;
}

.talent-file-preview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.talent-file-preview-thumb--pdf,
.talent-file-preview-thumb--file {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--k-color-indigo-500);
    font-size: 30px;
}

.talent-file-preview-thumb--pdf {
    color: var(--k-color-red-600);
}

.talent-file-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.talent-file-name-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.talent-file-name-row strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--k-color-slate-800);
    font-size: 14px;
}

.talent-file-type {
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: var(--k-radius-xl);
    background: var(--k-bg-indigo-soft);
    color: var(--k-color-indigo-500);
    font-size: 11px;
    font-weight: 700;
}

.talent-file-meta {
    margin-top: 8px;
    color: var(--k-color-slate-400);
    font-size: 12px;
}

.talent-file-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    padding-top: 16px;
}

.talent-file-action {
    min-height: 32px;
    padding: 0 10px;
    font-size: 12px;
}

.talent-file-preview-modal {
    width: min(92vw, 980px);
    max-height: 90vh;
    padding: 28px;
    border-radius: var(--k-radius-xl);
    background: var(--k-bg-white);
    overflow: hidden;
}

.talent-file-preview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.talent-file-preview-head h3 {
    margin: 0 0 6px;
    color: var(--k-color-slate-800);
    font-size: 19px;
}

.talent-file-preview-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--k-border-color);
    border-radius: var(--k-radius-md);
    background: var(--k-bg-white);
    color: var(--k-color-slate-600);
    cursor: pointer;
}

.talent-file-preview-body {
    min-height: 240px;
    max-height: 62vh;
    border: 1px solid var(--k-border-color);
    border-radius: var(--k-radius-lg);
    background: var(--k-bg-hover);
    overflow: auto;
}

.talent-file-preview-image {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

.talent-file-preview-frame {
    display: block;
    width: 100%;
    height: 58vh;
    border: 0;
    background: var(--k-bg-white);
}

.talent-file-preview-note {
    margin: 0;
    padding: 12px 14px;
    color: var(--k-color-slate-500);
    font-size: 13px;
}

.talent-file-preview-unavailable {
    display: flex;
    min-height: 240px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--k-color-slate-400);
}

.talent-file-preview-unavailable i {
    font-size: 42px;
}

/* 인재 상세 하단의 목록 이동 버튼 영역을 정렬한다. */

/* 공통 입력 모달 */
.contact-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--k-overlay-dark-50);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.contact-modal {
    background: white;
    border-radius: var(--k-radius-md);
    padding: 32px;
    width: 90%;
    max-width: 480px;
}

.contact-modal h3 {
    margin: 0 0 16px 0;
    font-size: 19px;
}

.contact-modal-desc {
    color: var(--k-text-subtle);
    font-size: 14px;
    margin-bottom: 16px;
}

.contact-modal-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--k-color-gray-d1);
    border-radius: var(--k-radius-md);
    font-size: 15px;
    resize: vertical;
    box-sizing: border-box;
}

.contact-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
}

/* 지원자 최종 결과 입력 모달의 고정 폭과 내부 간격을 정의한다. */
.applicant-result-message-modal {
    width: min(432px, calc(100% - 32px));
    padding: 32px 24px;
    border-radius: var(--k-radius-md);
    background: var(--career-white);
}

/* 지원자 최종 결과 입력 모달의 제목 위계를 정의한다. */
.applicant-result-message-modal h3 {
    margin: 0;
    color: var(--career-ink);
    font-size: 22px;
    font-weight: 600;
}

/* 지원자 최종 결과 입력 모달의 입력 영역 간격을 정의한다. */
.applicant-result-message-modal .form-group {
    margin-top: 24px;
}

/* 지원자 최종 결과 입력 모달의 라벨과 입력 간격을 정의한다. */
.applicant-result-message-modal .form-label {
    display: block;
    margin-bottom: var(--k-space-form-label);
    color: var(--career-ink);
    font-size: 14px;
    font-weight: 600;
}

/* 지원자 최종 결과 입력 모달의 전달 내용 입력을 정의한다. */
.applicant-result-message-modal .contact-modal-textarea {
    min-height: 144px;
    border-color: var(--career-border);
    color: var(--career-ink);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
}

/* 지원자 최종 결과 입력 오류 문구의 영역을 확보한다. */
.applicant-result-message-error {
    min-height: 18px;
    margin: 6px 0 0;
    color: var(--fm-color-danger);
    font-size: 12px;
    line-height: 1.5;
}

/* 지원자 최종 결과 입력 모달의 하단 버튼을 같은 폭으로 배치한다. */
.applicant-result-message-modal .contact-modal-actions {
    display: grid;
    margin-top: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 지원자 최종 결과 입력 모달의 하단 버튼을 전체 폭으로 정의한다. */
.applicant-result-message-modal .contact-modal-actions .btn-freemode {
    width: 100%;
}

/* ===== CATEGORY TABS ===== */

.job-category-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--job-color-border);
    margin-bottom: var(--space-24);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.job-category-tabs::-webkit-scrollbar {
    display: none;
}

.job-category-tab {
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--k-text-subtle);
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.job-category-tab:hover {
    color: var(--job-color-text);
}

.job-category-tab.active {
    color: var(--job-color-text);
    font-weight: 700;
    border-bottom-color: var(--job-color-primary);
}

/* Job 알림 센터 필터 영역을 채용 목록 탭 톤으로 정리한다. */
.notification-view-page .notification-filter-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

/* Job 알림 센터 탭 버튼을 기존 알림 버튼 대신 채용 공통 탭 스타일로 고정한다. */
.notification-view-page .job-category-tab {
    border: none;
    border-bottom: 2.5px solid transparent;
    border-radius: 0;
    background: transparent;
}

/* Job 알림 센터 활성 탭 버튼의 배경을 제거하고 하단선만 강조한다. */
.notification-view-page .job-category-tab.active {
    background: transparent;
    color: var(--job-color-text);
    border-bottom-color: var(--job-color-primary);
}

/* Job 알림 센터 유형 탭의 하단 여백을 읽음 상태 탭보다 작게 조정한다. */
.notification-view-page .notification-type-tabs {
    margin-bottom: 18px;
}

/* Job 알림 센터 상태 컬럼 폭을 정의한다. */
.notification-table .notification-col-status {
    width: 72px;
}

/* Job 알림 센터 유형 컬럼 폭을 정의한다. */
.notification-table .notification-col-type {
    width: 130px;
}

/* Job 알림 센터 수신일 컬럼 폭을 정의한다. */
.notification-table .notification-col-date {
    width: 160px;
}

/* Job 알림 센터 행 클릭 대상을 표시한다. */
.notification-view-page .notification-row {
    cursor: pointer;
}

/* Job 알림 센터 읽지 않은 행을 낮은 강조 배경으로 표시한다. */
.notification-view-page .noti-center-row.unread {
    background-color: var(--k-color-gray-fa);
}

/* Job 알림 센터 읽지 않은 행 글자 굵기를 유지한다. */
.notification-view-page .noti-center-row.unread td {
    font-weight: 500;
}

/* Job 알림 센터 상태 셀을 중앙 정렬한다. */
.notification-view-page .notification-status-cell {
    text-align: center;
}

/* Job 알림 센터 메시지 셀을 본문 톤으로 표시한다. */
.notification-view-page .notification-message-cell {
    padding-left: 24px;
    color: var(--job-color-text);
    text-align: left;
    line-height: 1.5;
}

/* Job 알림 센터 유형 셀을 중앙 정렬한다. */
.notification-view-page .notification-type-cell {
    text-align: center;
}

/* Job 알림 센터 수신일 셀을 보조 텍스트 톤으로 표시한다. */
.notification-view-page .notification-date-cell {
    color: var(--job-color-text-light);
    text-align: center;
    white-space: nowrap;
}

/* Job 알림 센터 발신자 강조 텍스트를 정의한다. */
.notification-view-page .notification-sender-highlight {
    color: var(--ref-ink);
    font-weight: 700;
}

/* Job 알림 센터 읽지 않음 점을 채용 주요 색상으로 표시한다. */
.notification-view-page .noti-unread-dot {
    background: var(--job-color-primary);
}

/* Job 알림 센터 읽음 아이콘을 보조 텍스트 톤으로 표시한다. */
.notification-view-page .noti-read-check {
    color: var(--job-color-text-light);
}

/* Job 알림 센터 유형 배지 크기를 고정한다. */
.notification-view-page .notification-type-badge {
    min-width: 64px;
    justify-content: center;
    font-size: 12px;
}

/* Job 알림 센터 빈 목록 안내를 테이블과 모바일에서 공통으로 표시한다. */
.notification-view-page .notification-empty {
    padding: 48px 16px;
    color: var(--job-color-text-light);
    text-align: center;
}

/* Job 알림 센터 모바일 목록을 채용 모바일 목록과 같은 간격으로 표시한다. */
.notification-view-page .noti-center-list-mobile {
    display: none;
    flex-direction: column;
    gap: 10px;
}

/* Job 알림 센터 모바일 카드를 채용 공통 카드 톤으로 정리한다. */
.notification-view-page .notification-mobile-card {
    border: 1px solid var(--job-color-border);
    border-radius: 8px;
    background: var(--k-bg-white);
}

/* Job 알림 센터 모바일 읽지 않은 카드를 낮은 강조 배경으로 표시한다. */
.notification-view-page .notification-mobile-card.unread {
    background: var(--k-color-gray-fa);
}

/* Job 알림 센터 모바일 메시지 색상을 본문 톤으로 맞춘다. */
.notification-view-page .noti-center-card-msg {
    color: var(--job-color-text);
}

/* Job 알림 센터 모바일 날짜 색상을 보조 텍스트 톤으로 맞춘다. */
.notification-view-page .noti-center-card-date {
    color: var(--job-color-text-light);
}

/* ===== FILTER PANEL ===== */

.job-filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--k-color-slate-600);
    background: var(--k-border-color-light);
    border: 1px solid var(--k-border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: var(--k-transition-fast);
}

.job-filter-toggle-btn:hover {
    background: var(--k-border-color);
}

.job-filter-toggle-btn.active {
    background: var(--job-color-primary);
    color: var(--k-bg-white);
    border-color: var(--job-color-primary);
}

.job-filter-panel {
    display: none;
    background: var(--k-bg-hover);
    border: 1px solid var(--k-border-color);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: var(--space-16);
}

.job-filter-panel.show {
    display: block;
}

.job-filter-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}

.job-filter-row:last-child {
    margin-bottom: 0;
}

.job-filter-label {
    min-width: 70px;
    font-size: 14px;
    font-weight: 600;
    color: var(--k-color-slate-650);
    padding-top: 6px;
    flex-shrink: 0;
}

.job-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}

.filter-chip {
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--k-text-subtle);
    background: var(--k-bg-white);
    border: 1px solid var(--k-color-gray-d1);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s;
}

.filter-chip.active {
    background: var(--job-color-primary);
    color: var(--k-bg-white);
    border-color: var(--job-color-primary);
}

.job-filter-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--k-border-color);
}

.job-filter-btn {
    padding: 7px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: var(--k-transition-fast);
}

.job-filter-btn--search {
    background: var(--job-color-primary);
    color: var(--k-bg-white);
}

.job-filter-btn--reset {
    background: var(--k-bg-white);
    color: var(--k-text-subtle);
    border: 1px solid var(--k-color-gray-d1);
}

.job-filter-btn--reset:hover {
    background: var(--k-border-color-light);
}

/* ===== TECH TAG ===== */

.tech-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--k-color-indigo-500);
    background: var(--k-bg-indigo-soft);
    border-radius: 10px;
    margin-right: 3px;
    margin-top: 4px;
}

.tech-tag-more {
    color: var(--k-color-slate-400);
    font-size: 12px;
    font-weight: 500;
    margin-left: 2px;
}

/* ===== BOOKMARK BUTTON ===== */

.bookmark-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--k-color-slate-300);
    transition: var(--k-transition-fast);
    padding: 2px 4px;
}

.bookmark-btn:hover {
    color: var(--k-color-yellow-400);
    transform: scale(1.15);
}

.bookmark-btn.active {
    color: var(--k-color-yellow-400);
}

/* ===== TAG INPUT (Form) ===== */

.tag-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--k-color-indigo-500);
    background: var(--k-bg-indigo-soft);
    border-radius: 14px;
}

.tag-item-remove {
    cursor: pointer;
    font-size: 14px;
    color: var(--k-color-indigo-500);
    opacity: 0.6;
    transition: opacity 0.15s;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
}

.tag-item-remove:hover {
    opacity: 1;
}

/* ===== ROW ADDITIONS ===== */

.row-company {
    width: 120px;
    color: var(--k-color-slate-600);
    font-size: 14px;
}

.row-location {
    width: 100px;
    color: var(--job-color-text-light);
    font-size: 14px;
}

.row-bookmark {
    width: 50px;
}

/* 인재 목록/상세 모바일 반응형 */
@media (max-width: 1023px) {

    .talent-career-insight {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 767px) {
    .talent-portfolio-case-head,
    .talent-profile-form-header,
    .talent-profile-section-head {
        flex-direction: column;
        align-items: stretch;
    }

    .talent-response-time-panel {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .talent-response-time-controls {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .talent-profile-edit-form {
        padding: 0 16px 28px;
    }

    .talent-profile-image-row,
    .talent-profile-form-body {
        padding-left: 0;
    }

    .talent-profile-project-grid {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .talent-profile-form-row,
    .talent-profile-image-row,
    .talent-profile-project-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .talent-profile-form-row.is-basic-pair,
    .talent-profile-inline-field {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .talent-profile-contact-group,
    .talent-profile-email-group,
    .talent-profile-resident-group,
    .talent-profile-location-group,
    .talent-profile-radio-group {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .talent-profile-radio-group {
        align-items: flex-start;
    }

    .talent-profile-year-select,
    .talent-profile-email-domain-select,
    .talent-profile-region-select {
        width: 100%;
        flex-basis: auto;
    }

    .talent-profile-field-help {
        white-space: normal;
    }

    .talent-profile-privacy-agreement {
        align-items: stretch;
        flex-direction: column;
        padding: 12px;
    }

    .talent-profile-short-input,
    .talent-profile-medium-input {
        max-width: none;
    }

    .talent-profile-certificate-row,
    .talent-profile-file-row {
        grid-template-columns: 1fr;
    }

    .talent-profile-portfolio-register-grid {
        grid-template-columns: 1fr;
    }

    .talent-profile-date-range {
        grid-template-columns: 1fr;
    }

    .talent-card-badges {
        justify-content: flex-start;
        max-width: none;
    }

    .talent-file-grid {
        grid-template-columns: 1fr;
    }

    .talent-career-list {
        grid-template-columns: 1fr;
    }

    .talent-portfolio-case-card {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .talent-file-preview-thumb {
        width: 100%;
        height: 180px;
    }

    .talent-file-preview-modal {
        width: 94vw;
        padding: 20px;
    }

    .talent-portfolio-case-meta {
        grid-template-columns: 1fr;
    }

}

/* ===== AD BANNER STYLES ===== */

.ad-banner-section {
    margin-top: var(--space-80);
    position: relative;
}

.ad-swiper {
    border-radius: var(--k-radius-xl);
    overflow: hidden;
    background-color: var(--job-color-bg-subtle);
}

.ad-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ad-banner-link {
    display: block;
    width: 100%;
    text-decoration: none;
    cursor: pointer;
}

.ad-banner-img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.ad-label {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--k-overlay-dark-45);
    color: var(--k-bg-white);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--k-radius-sm);
    z-index: 10;
    letter-spacing: 1px;
    margin: 0;
}

/* Swiper Navigation */
.ad-swiper-prev,
.ad-swiper-next {
    color: var(--k-bg-white) !important;
    background: var(--k-overlay-dark-30);
    border-radius: 50%;
    width: 36px !important;
    height: 36px !important;
}

.ad-swiper-prev::after,
.ad-swiper-next::after {
    font-size: 14px !important;
    font-weight: 700;
}

.ad-swiper-prev:hover,
.ad-swiper-next:hover {
    background: var(--k-overlay-dark-50);
}

/* Ad Banner - Mobile */
@media (max-width: 1023px) {
    .ad-banner-section {
        margin-top: var(--space-40);
    }

    .ad-banner-img {
        max-height: 120px;
    }

    .ad-swiper-prev,
    .ad-swiper-next {
        display: none !important;
    }
}

/* ===== JOB SITE FOOTER ===== */

.job-site-footer {
    border-top: 1px solid var(--job-color-border);
    margin-top: auto;
    padding: 32px 0;
    background-color: var(--k-bg-job-subtle);
}

.job-footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "info links"
        "copyright links";
    column-gap: 40px;
    margin: 0 auto;
    padding: 0 32px;
}

.job-footer-links {
    display: flex;
    grid-area: links;
    align-items: flex-start;
    flex-direction: row;
    justify-content: flex-end;
    gap: 32px;
    margin-bottom: 0;
}

.job-footer-menu-group {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.job-footer-menu-title {
    font-size: 13px;
    color: var(--job-color-text);
}

.job-footer-links a {
    font-size: 14px;
    color: var(--job-color-text-light);
    text-decoration: none;
    transition: color 0.2s;
}

.job-footer-links a:hover {
    color: var(--job-color-text);
}

.job-footer-divider {
    color: var(--k-color-gray-d1);
    font-size: 12px;
}

.job-footer-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    line-height: 1.8;
    font-size: 12px;
    color: var(--k-color-slate-400);
}

.job-footer-info-group {
    grid-area: info;
}

.job-footer-copyright {
    grid-area: copyright;
    font-size: 12px;
    color: var(--k-color-gray-b0);
    margin: 12px 0 0 0;
}

@media (max-width: 1023px) {
    .job-site-footer {
        padding: 24px 16px;
    }

    .job-footer-inner {
        display: block;
        padding: 0;
    }

    .job-footer-links {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 16px;
    }

    .job-footer-menu-group {
        gap: 6px;
    }

    .job-footer-info {
        justify-content: center;
    }

    .job-footer-copyright {
        text-align: center;
    }
}

/* 작업의뢰 목록/상세/등록 공통 스타일 */
.work-request-board-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.work-request-section-desc {
    margin: 6px 0 0;
    color: var(--job-color-text-light);
    font-size: 14px;
}

.work-request-search-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.work-request-search-box {
    gap: 8px;
}

.work-request-table tr {
    cursor: default;
}

.work-request-table .row-bookmark {
    width: 70px;
}

.work-request-title-main {
    min-width: 0;
    flex: 1;
}

.work-request-bookmark-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
}

.work-request-bookmark-btn--desktop {
    margin-top: 0;
}

.work-request-title-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.work-request-title-block .job-title-link {
    display: inline-block;
    line-height: 1.5;
}

.work-request-bookmark-cell {
    text-align: center !important;
}

.work-request-bookmark-cell .bookmark-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.work-request-title-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--job-color-text-light);
    font-size: 12px;
}

.work-request-title-meta span {
    position: relative;
}

.work-request-title-meta span + span::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--job-color-text-light);
    transform: translateY(-50%);
    opacity: 0.75;
}

.work-request-applied-badge,
.work-request-list-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
}

.work-request-list-badge i,
.work-request-applied-badge i {
    font-size: 11px;
}

.work-request-applied-badge,
.work-request-list-badge--applied {
    background: var(--k-bg-green-soft-50);
    color: var(--k-color-emerald-600);
}

.work-request-list-badge--urgent {
    background: var(--k-bg-orange-pale);
    color: var(--k-color-orange-700);
}

.work-request-list-badge--reference {
    background: var(--k-bg-blue);
    color: var(--k-color-blue-link);
}

.work-request-list-badge--attachment {
    background: var(--k-bg-white);
    border-color: var(--job-color-border);
    color: var(--job-color-text);
}

.work-request-budget-cell {
    white-space: nowrap;
}

.work-request-due-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.work-request-due-cell--center {
    align-items: center;
    text-align: center;
}

.work-request-due-date {
    color: var(--job-color-text);
    font-weight: 600;
}

.work-request-due-hint {
    color: var(--job-color-text-light);
    font-size: 12px;
    font-weight: 600;
}

.work-request-due-hint.is-urgent {
    color: var(--k-color-orange-700);
}

.work-request-count-cell {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.work-request-count-cell strong {
    color: var(--job-color-text);
    font-size: 16px;
    font-weight: 700;
}

.work-request-count-cell span {
    color: var(--job-color-text-light);
    font-size: 12px;
    font-weight: 600;
}

.work-request-empty-cell {
    padding: 100px 0;
    text-align: center;
    color: #94a3b8;
}

.work-request-empty-card {
    padding: 4rem 2rem;
    text-align: center;
    color: #94a3b8;
    font-size: 0.95rem;
}

.work-request-status-tag {
    min-width: 65px;
    justify-content: center;
}

.work-request-status-tag--open {
    background: var(--k-bg-green-soft-50);
    color: var(--k-color-emerald-600);
}

.work-request-status-tag--closed {
    background: var(--k-color-gray-f3);
    color: var(--k-color-gray-555);
}

.work-request-status-tag--expired {
    background: #fef2f2;
    color: #dc2626;
}

.work-request-status-tag--contacting {
    background: var(--k-bg-blue);
    color: var(--k-color-blue-link);
}

.work-request-status-tag--matched {
    background: var(--k-bg-purple);
    color: var(--k-color-purple-deep);
}

.work-request-status-tag--proposed {
    background: var(-color-status-warning-soft);
    color: var(--k-color-yellow-400);
}

.work-request-status-tag--onboarding {
    background: var(--k-bg-orange-pale);
    color: var(--k-color-orange-700);
}

.work-request-card-mobile {
    background: #fff;
    border: 1px solid var(--job-color-border);
    border-radius: 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.work-request-card-mobile-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.work-request-card-mobile-heading {
    min-width: 0;
    flex: 1;
}

.work-request-card-mobile-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--job-color-text);
}

.work-request-card-mobile-status {
    margin-top: 8px;
}

.work-request-card-mobile-badges {
    min-height: 22px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.work-request-card-mobile-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.work-request-card-mobile-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--job-color-border);
    background: var(--job-color-bg-subtle);
}

.work-request-card-mobile-metric span {
    color: var(--job-color-text-light);
    font-size: 12px;
}

.work-request-card-mobile-metric strong {
    color: var(--job-color-text);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
}

.work-request-card-mobile-metric em {
    color: var(--job-color-primary);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
}

.work-request-card-mobile-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--job-color-text);
}

.work-request-card-mobile-meta span:first-child {
    color: var(--job-color-text-light);
}

.work-request-detail-action-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.work-request-detail-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.work-request-overview-grid {
    row-gap: 16px;
}

.work-request-copy-block {
    padding: 20px 22px;
    border-radius: 18px;
    border: 1px solid var(--job-color-border);
    background: var(--k-bg-white);
}

.work-request-copy-block {
    line-height: 1.8;
    word-break: break-word;
}

.work-request-reference-list {
    display: grid;
    gap: 12px;
}

.work-request-reference-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid var(--job-color-border);
    background: var(--k-bg-white);
    color: var(--ref-accent-blue);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    word-break: break-all;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.work-request-reference-item:hover {
    border-color: var(--job-color-primary);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

.work-request-attachment-list {
    display: grid;
    gap: 12px;
}

.work-request-attachment-list--form {
    margin-top: 8px;
}

.work-request-attachment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid var(--job-color-border);
    background: var(--k-bg-white);
}

.work-request-attachment-item-main {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex: 1;
}

.work-request-attachment-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--job-color-bg-subtle);
    color: var(--job-color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.work-request-attachment-info {
    min-width: 0;
    flex: 1;
}

.work-request-attachment-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.work-request-attachment-name {
    color: var(--job-color-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    word-break: break-all;
}

.work-request-attachment-name:hover {
    color: var(--job-color-primary);
}

.work-request-attachment-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--job-color-bg-subtle);
    color: var(--job-color-primary);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.work-request-attachment-badge--pending {
    background: var(-color-status-warning-soft);
    color: var(--k-color-yellow-400);
}

.work-request-attachment-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--job-color-text-light);
    flex-wrap: wrap;
}

.work-request-attachment-remove,
.work-request-attachment-download {
    flex-shrink: 0;
}

.work-request-attachment-empty {
    padding: 20px;
    border-radius: 16px;
    border: 1px dashed var(--job-color-border);
    color: var(--job-color-text-light);
    font-size: 13px;
    text-align: center;
    background: #fafcfb;
}

.requester-profile-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.requester-profile-logo,
.requester-company-hero-logo {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--job-color-bg-subtle), #eef7f2);
    border: 1px solid var(--job-color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--job-color-primary);
    font-size: 28px;
    font-weight: 700;
    flex-shrink: 0;
}

.requester-company-hero-logo {
    width: 88px;
    height: 88px;
    border-radius: 24px;
    font-size: 32px;
}

.requester-profile-logo img,
.requester-company-hero-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.requester-company-hero-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--job-color-text);
    line-height: 1.25;
}

.requester-profile-info-grid,
.requester-company-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.requester-profile-info-item {
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--k-bg-white);
    border: 1px solid var(--job-color-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.requester-profile-info-label {
    font-size: 12px;
    color: var(--job-color-text-light);
}

.requester-profile-info-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--job-color-text);
    line-height: 1.6;
    word-break: break-word;
}

.requester-profile-info-panel {
    display: block;
    padding: 8px 24px;
    border-radius: 16px;
    background: var(--k-bg-white);
    border: 1px solid var(--job-color-border);
}

.requester-profile-info-panel .requester-profile-info-item {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid var(--job-color-border);
    border-radius: 0;
    background: transparent;
}

.requester-profile-info-panel .requester-profile-info-item:last-child {
    border-bottom: 0;
}

.requester-profile-info-panel .requester-profile-info-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--customer-completed);
}

.requester-profile-info-panel .requester-profile-info-value {
    min-width: 0;
}

/* 체불사업주 명단공개 확인 안내 영역을 표시한다. */
.job-wage-arrears-notice {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--job-color-border);
    border-radius: 14px;
    background: var(--k-bg-warning-soft);
}

.job-wage-arrears-notice-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--k-bg-white);
    color: var(--k-color-amber-700);
    flex-shrink: 0;
}

.job-wage-arrears-notice-body {
    min-width: 0;
    flex: 1;
}

.job-wage-arrears-notice-body strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--job-color-text);
    line-height: 1.45;
}

.job-wage-arrears-notice-body p {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--job-color-text-light);
}

.job-wage-arrears-notice-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid var(--job-color-border);
    background: var(--k-bg-white);
    color: var(--job-color-text);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.job-wage-arrears-notice-link:hover {
    border-color: var(--job-color-primary);
    color: var(--job-color-primary);
}

.requester-company-page {
    padding-top: 16px;
}

/* 회사소개 상단 정보를 상세 화면 기업정보와 같은 문서형으로 배치한다. */

/* 회사소개 상단 로고 박스를 상세 화면 로고 톤으로 표시한다. */
.requester-company-page .requester-company-hero-logo {
    width: 176px;
    height: 54px;
    border-radius: 8px;
    background: var(--k-bg-white);
    color: var(--job-color-text-light);
    font-size: 20px;
}

/* 회사소개 상단 제목 영역의 문서형 폭을 정의한다. */

/* 회사소개 상단 회사명을 상세 화면 제목 톤으로 표시한다. */
.requester-company-page .requester-company-hero-title {
    font-size: 26px;
    font-weight: 800;
}

/* 회사소개 상단 설명 문구를 보조 텍스트 톤으로 표시한다. */

/* 회사소개 통계 영역을 간결한 2열 정보로 표시한다. */

/* 회사소개 통계 항목의 장식을 낮춘다. */

/* 회사소개 기본 정보 패널을 상세 화면 기업정보와 같은 2열 문서형으로 표시한다. */
.job-posting-detail-page.requester-company-page .requester-company-info-grid.requester-profile-info-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 96px;
    row-gap: 16px;
    border: 0;
    border-radius: 8px;
    background: var(--k-color-gray-fa);
}

/* 회사소개 기본 정보 항목을 라벨과 값 2열로 배치한다. */
.job-posting-detail-page.requester-company-page .requester-company-info-grid .requester-profile-info-item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 0;
    border: 0;
    background: transparent;
}

/* 회사소개 기본 정보 라벨을 상세 화면 기업정보 톤으로 표시한다. */
.job-posting-detail-page.requester-company-page .requester-company-info-grid .requester-profile-info-label {
    color: var(--job-color-text-light);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

/* 회사소개 기본 정보 값을 상세 화면 기업정보 톤으로 표시한다. */
.job-posting-detail-page.requester-company-page .requester-company-info-grid .requester-profile-info-value {
    color: var(--job-color-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    text-align: left;
}

.requester-company-copy-block {
    padding: 0;
    border-radius: 0;
    border: 0;
    background: transparent;
}

.requester-company-copy-block a {
    color: var(--job-color-primary);
    text-decoration: underline;
}

/* 회사소개 지도 영역과 본문 사이 여백을 정의한다. */

/* 지원자 이름 링크를 기존 텍스트 톤으로 유지하면서 클릭 가능하게 표시한다. */

/* 지원자 이름 링크 hover 상태를 공통 강조색으로 표시한다. */

.work-request-applicant-company {
    font-size: 13px;
    color: var(--job-color-text-light);
}

.work-request-guide-box {
    padding: 18px 20px;
    border-radius: 14px;
    background: var(--job-color-bg-subtle);
    color: var(--job-color-text);
    font-size: 14px;
    line-height: 1.7;
}

.work-request-applicant-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* 지원자 관리 버튼을 세로로 배치합니다. */

.work-request-applicant-actions .btn-freemode {
    min-width: 78px;
}

/* 지원자 고객추가 버튼을 코랄 포인트 컬러로 표시한다. */
.work-request-applicant-actions .js-applicant-customer-add.btn-freemode.btn-sub.is-add:not(:disabled) {
    border-color: var(--ref-logo-coral);
    background-color: var(--ref-logo-coral);
    color: var(--k-bg-white);
}

/* 지원자 고객추가 버튼 hover 상태를 코랄 보조 톤으로 표시한다. */
.work-request-applicant-actions .js-applicant-customer-add.btn-freemode.btn-sub.is-add:hover:not(:disabled) {
    border-color: var(--ref-logo-coral-soft);
    background-color: var(--ref-logo-coral-soft);
    color: var(--k-bg-white);
    box-shadow: none;
}

.work-request-applicant-actions--mobile {
    justify-content: flex-start;
    margin-top: 12px;
}

/* 채용공고 관리 화면의 탭 필터 영역을 이미지 기준의 낮은 선형 구조로 정의합니다. */
.job-admin-manage-page .job-admin-manage-filter {
    margin-bottom: 20px;
}

/* 채용공고 관리 탭 묶음을 상단 구분선과 함께 배치합니다. */
.job-admin-manage-page .job-admin-management-tabs {
    display: flex;
    align-items: center;
    min-height: 54px;
    border-bottom: 1px solid var(--job-color-border);
}

/* 채용공고 관리 탭 버튼의 기본 상태를 정의합니다. */
.job-admin-manage-page .job-admin-management-tab {
    height: 54px;
    padding: 18px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--job-color-text-light);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

/* 채용공고 관리 탭 버튼의 활성 상태를 정의합니다. */
.job-admin-manage-page .job-admin-management-tab.active {
    border-bottom-color: var(--ref-logo-coral);
    color: var(--ref-ink);
    font-weight: 600;
}

/* 채용공고 관리 건수 행을 탭 아래에 배치합니다. */
.job-admin-manage-page .job-admin-manage-count-line {
    margin: 28px 0 20px;
}

/* 채용공고 관리 목록의 행 구분선을 정의합니다. */
.job-admin-manage-page .job-admin-manage-list {
    border-top: 1px solid var(--job-color-border);
}

/* 채용공고 관리 목록의 개별 행 레이아웃을 정의합니다. */
.job-admin-manage-page .job-admin-manage-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    min-height: 96px;
    padding: 22px 0 22px 16px;
    border-bottom: 1px solid var(--job-color-border);
}

/* 채용공고 관리 행의 좌측 주요 정보를 세로로 배치합니다. */
.job-admin-manage-page .job-admin-manage-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}

/* 채용공고 관리 행 제목 버튼을 텍스트 링크처럼 표시합니다. */
.job-admin-manage-page .job-admin-manage-title {
    overflow: hidden;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ref-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

/* 채용공고 관리 행 제목 hover 상태를 강조색으로 표시합니다. */
.job-admin-manage-page .job-admin-manage-title:hover {
    color: var(--ref-logo-coral);
}

/* 채용공고 관리 상태 배지를 둥근 작은 배지로 표시합니다. */
.job-admin-manage-page .job-admin-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 0 10px;
    border-radius: var(--k-radius-pill);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* 채용중 상태 배지 색상을 정의합니다. */
.job-admin-manage-page .job-admin-status-pill.is-open {
    background: var(--k-bg-blue-soft-100);
    color: var(--ref-accent-blue);
}

/* 채용마감 상태 배지 색상을 정의합니다. */
.job-admin-manage-page .job-admin-status-pill.is-closed {
    background: var(--k-color-gray-f3);
    color: var(--ref-gray-700);
}

/* 임시저장 상태 배지 색상을 정의합니다. */
.job-admin-manage-page .job-admin-status-pill.is-draft {
    background: var(--ref-accent-orange-bg-soft);
    color: var(--ref-accent-orange-soft);
}

/* 채용공고 관리 행의 우측 기간, 버튼, 메뉴를 정렬합니다. */
.job-admin-manage-page .job-admin-manage-side {
    display: grid;
    grid-template-columns: 190px auto 32px;
    align-items: center;
    gap: 18px;
}

/* 채용공고 관리 행의 기간과 지원자 수 문구를 정의합니다. */
.job-admin-manage-page .job-admin-manage-meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--job-color-text-light);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
}

/* 채용공고 관리 지원자 수 라벨과 값을 이미지 기준 간격으로 분리합니다. */
.job-admin-manage-page .job-admin-applicant-meta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}

/* 채용공고 관리 지원자 보기 버튼 크기를 이미지 기준으로 맞춥니다. */
.job-admin-manage-page .job-admin-view-btn {
    min-width: 86px;
    height: 30px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

/* 채용공고 관리 더보기 메뉴 기준점을 정의합니다. */
.job-admin-manage-page .job-admin-menu-wrap {
    position: relative;
    display: flex;
    justify-content: center;
}

/* 채용공고 관리 더보기 아이콘 버튼을 정의합니다. */
.job-admin-manage-page .job-admin-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ref-ink);
    cursor: pointer;
}

/* 채용공고 관리 더보기 메뉴 패널을 정의합니다. */
.job-admin-manage-page .job-admin-menu {
    position: absolute;
    top: 34px;
    right: 0;
    z-index: 20;
    display: none;
    min-width: 82px;
    padding: 12px 0;
    border: 1px solid var(--job-color-border);
    border-radius: 8px;
    background: var(--k-bg-white);
    box-shadow: 0 4px 14px var(--k-overlay-dark-08);
}

/* 채용공고 관리 더보기 메뉴의 열린 상태를 정의합니다. */
.job-admin-manage-page .job-admin-menu.is-open {
    display: block;
}

/* 채용공고 관리 더보기 메뉴 항목을 정의합니다. */
.job-admin-manage-page .job-admin-menu button {
    display: block;
    width: 100%;
    min-height: 32px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: var(--ref-ink);
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

/* 채용공고 관리 더보기 메뉴 항목 hover 상태를 정의합니다. */
.job-admin-manage-page .job-admin-menu button:hover {
    background: var(--k-color-gray-fa);
}

/* 채용공고 관리 더보기 메뉴의 위험 액션 색상을 정의합니다. */
.job-admin-manage-page .job-admin-menu button.is-danger {
    color: var(--ref-accent-orange-soft);
}

/* 채용공고 관리 목록 빈 상태를 정의합니다. */
.job-admin-manage-page .job-admin-manage-empty {
    padding: 42px 0;
    border-bottom: 1px solid var(--job-color-border);
    color: var(--job-color-text-light);
    font-size: 14px;
    text-align: center;
}

/* 작업의뢰 관리 행의 메타 영역을 긴 날짜와 예산 정보에 맞게 넓힌다. */
.work-request-my-list-page .job-admin-manage-page .job-admin-manage-side {
    grid-template-columns: 280px auto 32px;
}

@media (max-width: 768px) {
    /* 모바일 채용공고 관리 목록 행을 1열로 전환합니다. */
    .job-admin-manage-page .job-admin-manage-row {
        grid-template-columns: 1fr;
        gap: 18px;
        padding: 20px 0;
    }

    /* 모바일 채용공고 관리 우측 정보를 1열로 전환합니다. */
    .job-admin-manage-page .job-admin-manage-side {
        grid-template-columns: 1fr auto 32px;
        width: 100%;
    }

    /* 모바일 채용공고 관리 기간 문구를 줄바꿈 가능하게 조정합니다. */
    .job-admin-manage-page .job-admin-manage-meta {
        min-width: 0;
    }

    /* 모바일 작업의뢰 관리 행의 메타 영역을 1열 기준으로 맞춘다. */
    .work-request-my-list-page .job-admin-manage-page .job-admin-manage-side {
        grid-template-columns: 1fr auto 32px;
    }
}

/* 채용 지원자 관리 화면의 지원자 수 영역을 이미지 기준으로 정렬합니다. */
.job-applicant-review-page .job-applicant-review-summary {
    margin: 28px 0 20px;
}

/* 채용 지원자 관리 화면의 지원자 수 라벨과 값을 분리합니다. */
.job-applicant-review-page .job-applicant-review-count {
    display: inline-flex;
    align-items: center;
    color: var(--job-color-text);
    font-size: 14px;
    font-weight: 600;
}

/* 채용 지원자 관리 화면의 지원자 수 값을 강조합니다. */
.job-applicant-review-page .job-applicant-review-count span {
    color: var(--ref-logo-coral);
    font-weight: 800;
    margin-left: 12px;
    margin-right: 4px;
}

/* 채용 지원자 관리 테이블 외곽선을 정의합니다. */
.job-applicant-review-page .job-applicant-review-table-wrap {
}

/* 채용 지원자 관리 테이블의 기본 구조를 정의합니다. */
.job-applicant-review-page .job-applicant-review-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* 채용 지원자 관리 테이블 헤더 셀을 정의합니다. */
.job-applicant-review-page .job-applicant-review-table th {
    height: 48px;
    border-bottom: 1px solid var(--job-color-border);
    color: var(--ref-ink);
    background-color: var(--ref-bg-base);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

/* 채용 지원자 관리 테이블 본문 셀을 정의합니다. */
.job-applicant-review-page .job-applicant-review-table td {
    height: 96px;
    padding: 18px 0;
    border-bottom: 1px solid var(--job-color-border);
    color: var(--job-color-text);
    font-size: 14px;
    font-weight: 400;
    vertical-align: middle;
}

/* 채용 지원자 관리 테이블의 지원자 정보 열 폭을 정의합니다. */
.job-applicant-review-page .job-applicant-col-info {
    width: 30%;
    padding-left: 16px;
}

/* 채용 지원자 관리 테이블의 경력 열 폭을 정의합니다. */
.job-applicant-review-page .job-applicant-col-career {
    width: 10%;
}

/* 채용 지원자 관리 테이블의 최근 프로젝트 열 폭을 정의합니다. */
.job-applicant-review-page .job-applicant-col-project {
    width: 34%;
}

/* 채용 지원자 관리 테이블의 지원일 열 폭을 정의합니다. */
.job-applicant-review-page .job-applicant-col-date {
    width: 12%;
}

/* 채용 지원자 관리 테이블의 상태 열 폭을 정의합니다. */
.job-applicant-review-page .job-applicant-col-status {
    width: 12%;
}

/* 채용 지원자 관리 테이블의 지원자 정보 셀 여백을 정의합니다. */
.job-applicant-review-page .job-applicant-review-info-cell {
    padding-left: 16px !important;
}

/* 채용 지원자 관리 지원자 버튼을 프로필 행처럼 표시합니다. */
.job-applicant-review-page .job-applicant-review-profile {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

/* 채용 지원자 관리 지원자 아바타를 원형으로 표시합니다. */
.job-applicant-review-page .job-applicant-review-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: var(--k-radius-pill);
    background: var(--k-color-gray-fa);
    color: var(--ref-ink);
    font-size: 16px;
    font-weight: 800;
}

/* 채용 지원자 관리 지원자 아바타 이미지를 영역에 맞춥니다. */
.job-applicant-review-page .job-applicant-review-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 채용 지원자 관리 지원자 이름과 부가 정보를 세로로 배치합니다. */
.job-applicant-review-page .job-applicant-review-person {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

/* 채용 지원자 관리 지원자명을 한 줄로 표시합니다. */
.job-applicant-review-page .job-applicant-review-person strong {
    overflow: hidden;
    color: var(--ref-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 채용 지원자 관리 지원자 부가 정보를 작게 표시합니다. */
.job-applicant-review-page .job-applicant-review-person span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ref-gray-700);
    font-size: 14px;
    font-weight:500;
    line-height: 1.2;
}

/* 채용 지원자 관리 지원자 부가 정보 구분자를 정의합니다. */
.job-applicant-review-page .job-applicant-review-person em {
    color: var(--job-color-border);
    font-style: normal;
}

/* 채용 지원자 관리 경력 셀 문구를 강조합니다. */
.job-applicant-review-page .job-applicant-review-career {
    color: var(--ref-ink);
    font-weight: 700;
}

/* 채용 지원자 관리 최근 프로젝트 정보를 세로로 표시합니다. */
.job-applicant-review-page .job-applicant-review-project {
    padding-right: 16px !important;
}

/* 채용 지원자 관리 최근 프로젝트 제목을 한 줄로 표시합니다. */
.job-applicant-review-page .job-applicant-review-project strong {
    display: block;
    overflow: hidden;
    color: var(--ref-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 채용 지원자 관리 최근 프로젝트 회사명을 보조 문구로 표시합니다. */
.job-applicant-review-page .job-applicant-review-project span {
    display: block;
    overflow: hidden;
    margin-top: 7px;
    color: var(--ref-gray-700);
    font-size: 12px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 채용 지원자 관리 지원일 문구를 정의합니다. */
.job-applicant-review-page .job-applicant-review-date {
    color: var(--job-color-text-light);
    font-size: 13px;
}

/* 채용 지원자 관리 상태 셀의 기준점을 정의합니다. */
.job-applicant-review-page .job-applicant-review-status {
    position: relative;
}

/* 채용 지원자 관리 상태 드롭다운 기준점을 정의합니다. */
.job-applicant-review-page .job-applicant-status-wrap {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

/* 채용 지원자 관리 상태 버튼을 작은 셀렉트처럼 표시합니다. */
.job-applicant-review-page .job-applicant-status-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 94px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--job-color-border);
    border-radius: 6px;
    background: var(--k-bg-white);
    color: var(--job-color-text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

/* 채용 지원자 관리 비활성 상태 버튼을 정의합니다. */
.job-applicant-review-page .job-applicant-status-button.is-disabled {
    background: var(--k-color-gray-fa);
    color: var(--job-color-text-light);
    cursor: default;
}

/* 채용 지원자 관리 상태 드롭다운 아이콘 크기를 정의합니다. */
.job-applicant-review-page .job-applicant-status-button i {
    font-size: 10px;
    color: var(--job-color-text-light);
}

/* 채용 지원자 관리 상태 메뉴 패널을 정의합니다. */
.job-applicant-review-page .job-applicant-status-menu {
    position: absolute;
    top: 38px;
    left: 0;
    z-index: 30;
    display: none;
    min-width: 110px;
    padding: 8px 0;
    border: 1px solid var(--job-color-border);
    border-radius: 8px;
    background: var(--k-bg-white);
    box-shadow: 0 4px 14px var(--k-overlay-dark-08);
}

/* 채용 지원자 관리 상태 메뉴의 열린 상태를 정의합니다. */
.job-applicant-review-page .job-applicant-status-wrap.is-open .job-applicant-status-menu {
    display: block;
}

/* 채용 지원자 관리 상태 메뉴 항목을 정의합니다. */
.job-applicant-review-page .job-applicant-status-menu button {
    display: block;
    width: 100%;
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--job-color-text);
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

/* 채용 지원자 관리 상태 메뉴 hover와 활성 상태를 정의합니다. */
.job-applicant-review-page .job-applicant-status-menu button:hover,
.job-applicant-review-page .job-applicant-status-menu button.active {
    background: var(--k-color-gray-fa);
    color: var(--ref-logo-coral);
}

/* 채용 지원자 관리 빈 목록 문구를 정의합니다. */
.job-applicant-review-page .job-applicant-review-empty {
    padding: 42px 0;
    color: var(--job-color-text-light);
    font-size: 14px;
    text-align: center;
}

/* 채용 지원자 관리 모바일 목록은 데스크탑에서 숨깁니다. */
.job-applicant-review-page .job-applicant-review-mobile-list {
    display: none;
}

/* 작업의뢰 지원자 관리 화면의 제안금액 열 폭을 조정한다. */

/* 작업의뢰 지원자 관리 화면의 제안내용 열 폭을 조정한다. */

/* 작업의뢰 지원자 관리 화면의 상태 열 폭을 조정한다. */

/* 작업의뢰 지원자 관리 화면의 제안금액 셀을 가운데 정렬한다. */

/* 작업의뢰 지원자 관리 화면의 지원일 셀을 가운데 정렬한다. */

/* 작업의뢰 지원자 관리 화면의 상태와 고객추가 버튼을 세로로 배치한다. */

/* 작업의뢰 지원자 관리 화면의 고객추가 버튼을 표 안에서 작게 표시한다. */

/* 작업의뢰 지원자 목록을 참고 이미지의 단정한 테이블 밀도로 조정합니다. */
.work-request-applicant-design-page .job-applicant-review-summary {
    margin: 28px 0 20px;
}

/* 작업의뢰 지원자 목록 테이블 행 높이를 참고 이미지에 맞춥니다. */
.work-request-applicant-design-page .job-applicant-review-table td {
    height: 84px;
    padding: 16px 0;
}

/* 작업의뢰 지원자 목록 아바타를 참고 이미지 크기로 표시합니다. */
.work-request-applicant-design-page .job-applicant-review-avatar {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    font-size: 14px;
}

/* 작업의뢰 지원자 목록 프로필 영역 간격을 참고 이미지에 맞춥니다. */
.work-request-applicant-design-page .job-applicant-review-profile {
    gap: 24px;
}

/* 취소된 지원자의 프로필 버튼 비활성 상태를 정의합니다. */
.work-request-applicant-design-page .job-applicant-review-profile:disabled {
    cursor: default;
    opacity: 1;
}

/* 작업의뢰 지원자 목록 하단 안내 문구를 참고 이미지의 정보 바 형태로 표시합니다. */
.work-request-applicant-guide,
.job-applicant-review-guide {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    margin-top: 28px;
    padding: 0 12px;
    border-radius: 6px;
    background: var(--k-color-gray-fa);
    color: var(--ref-gray-700);
    font-size: 12px;
}

/* 작업의뢰 지원자 목록 하단 안내 아이콘 크기를 정리합니다. */
.work-request-applicant-guide i,
.job-applicant-review-guide i {
    color: var(--ref-gray-700);
    font-size: 12px;
}

@media (max-width: 768px) {
    /* 모바일 채용 지원자 관리 테이블을 숨깁니다. */
    .job-applicant-review-page .job-applicant-review-table-wrap {
        display: none;
    }

    /* 모바일 채용 지원자 관리 목록을 카드형으로 배치합니다. */
    .job-applicant-review-page .job-applicant-review-mobile-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        border-top: 1px solid var(--job-color-border);
    }

    /* 모바일 채용 지원자 관리 카드 행을 정의합니다. */
    .job-applicant-review-page .job-applicant-review-card {
        padding: 18px 0;
        border-bottom: 1px solid var(--job-color-border);
    }

    /* 모바일 채용 지원자 관리 카드 헤더를 정의합니다. */
    .job-applicant-review-page .job-applicant-review-card-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
    }

    /* 모바일 채용 지원자 관리 카드 메타 행을 정의합니다. */
    .job-applicant-review-page .job-applicant-review-card-meta {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        margin-top: 9px;
        color: var(--job-color-text-light);
        font-size: 12px;
    }

    /* 모바일 채용 지원자 관리 카드 메타 값을 정의합니다. */
    .job-applicant-review-page .job-applicant-review-card-meta strong {
        color: var(--job-color-text);
        font-size: 13px;
        font-weight: 700;
        text-align: right;
    }

    /* 모바일 채용 지원자 관리 최근 프로젝트 보조 문구를 정의합니다. */
    .job-applicant-review-page .job-applicant-review-card-sub {
        margin-top: 4px;
        color: var(--job-color-text-light);
        font-size: 12px;
        text-align: right;
    }
}

.work-request-profile-modal {
    width: min(740px, 96vw);
    max-width: 740px;
    max-height: 84vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

/* 지원자 프로필 모달의 헤더를 상단 고정 영역으로 분리한다. */

/* 지원자 프로필 모달 본문만 스크롤되도록 영역을 분리한다. */

/* 지원자 프로필 모달의 닫기 버튼을 하단 푸터에 배치한다. */

/* 지원자 프로필 상단의 주요 액션을 우측에 배치한다. */

/* 작업의뢰 지원 제안서 상세 레이아웃을 정의한다. */

.work-request-report-modal {
    width: min(640px, 96vw);
    max-width: 640px;
}

.work-request-report-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.work-request-report-reason-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.work-request-report-reason-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--job-color-border);
    border-radius: 12px;
    background: var(--k-bg-white);
    color: var(--job-color-text);
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.work-request-report-reason-item input {
    margin: 0;
}

.work-request-report-reason-item.is-checked {
    border-color: var(--k-primary);
    background: rgba(59, 130, 246, 0.06);
}

/* 상세 화면 신고 모달을 이미지 기준의 넓은 카드형 레이아웃으로 정의한다. */
.work-request-report-modal-overlay {
    padding: 24px 16px;
    box-sizing: border-box;
    overflow-y: auto;
}

.work-request-detail-report-modal {
    width: min(600px, 96vw);
    max-width: 600px;
    max-height: calc(100vh - 48px);
    padding: 32px;
    border-radius: var(--k-radius-md);
    background: var(--k-bg-white);
    box-sizing: border-box;
    overflow-y: auto;
}

.work-request-detail-report-modal h3 {
    margin: 0 0 12px;
    color: var(--ref-ink);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
}

.work-request-detail-report-modal .contact-modal-desc {
    margin: 0 0 42px;
    color: var(--job-color-text-light);
    font-size: 16px;
    line-height: 1.55;
}

.work-request-detail-report-modal .work-request-report-form {
    gap: 34px;
}

.work-request-detail-report-modal .form-group {
    margin: 0;
}

.work-request-detail-report-modal .form-label {
    display: block;
    margin: 0 0 16px;
    color: var(--job-color-text-light);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

.work-request-detail-report-modal .work-request-report-reason-list {
    gap: 12px 10px;
}

.work-request-detail-report-modal .work-request-report-reason-item {
    min-height: 44px;
    padding: 0 18px;
    border-color: var(--job-color-border);
    border-radius: var(--k-radius-md);
    background: var(--k-bg-white);
    color: var(--ref-ink);
    font-size: 14px;
    font-weight: 500;
    gap: 14px;
}

.work-request-detail-report-modal .work-request-report-reason-item.is-checked {
    border-color: var(--job-color-border);
    background: var(--k-bg-white);
}

.work-request-detail-report-modal .work-request-report-reason-item input {
    position: relative;
    width: 20px;
    height: 20px;
    margin: 0;
    flex: 0 0 20px;
    border: 1px solid var(--job-color-text-light);
    border-radius: var(--k-radius-pill);
    background: var(--k-bg-white);
    appearance: none;
}

.work-request-detail-report-modal .work-request-report-reason-item input::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 10px;
    height: 10px;
    border-radius: var(--k-radius-pill);
    background: var(--ref-logo-coral);
    transform: scale(0);
}

.work-request-detail-report-modal .work-request-report-reason-item input:checked {
    border-color: var(--ref-logo-coral);
}

.work-request-detail-report-modal .work-request-report-reason-item input:checked::after {
    transform: scale(1);
}

.work-request-detail-report-modal .contact-modal-textarea {
    min-height: 200px;
    padding: 16px;
    border-color: var(--job-color-border);
    border-radius: var(--k-radius-md);
    color: var(--ref-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
}

.work-request-detail-report-modal .contact-modal-textarea::placeholder {
    color: var(--job-color-text-light);
}

.work-request-detail-report-modal .work-request-form-help {
    display: none;
}

.work-request-detail-report-modal .contact-modal-actions {
    gap: 10px;
    margin-top: 32px;
}

/* 모바일에서 상세 신고 모달을 단일 컬럼으로 전환한다. */
@media screen and (max-width: 768px) {
    .work-request-detail-report-modal {
        padding: 24px;
    }

    .work-request-detail-report-modal h3 {
        font-size: 24px;
    }

    .work-request-detail-report-modal .contact-modal-desc {
        margin-bottom: 36px;
        font-size: 15px;
    }

    .work-request-detail-report-modal .work-request-report-reason-list {
        grid-template-columns: 1fr;
    }

    .work-request-detail-report-modal .contact-modal-actions {
        justify-content: stretch;
    }

}

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

.work-request-empty-box {
    padding: 20px;
    border-radius: 16px;
    border: 1px dashed var(--job-color-border);
    background: #fafcfb;
    color: var(--job-color-text-light);
    font-size: 13px;
    text-align: center;
}

/* 작업의뢰 지원 입력 영역 스타일을 정의한다. */

.mail-compose-form .form-label {
    color: var(--job-color-text);
    font-weight: 700;
    margin-bottom: 10px;
    display: block;
}

.mail-compose-form .work-request-apply-input {
    width: 100%;
    min-height: 48px;
    padding: 13px 16px;
    border: 1px solid var(--job-color-border);
    border-radius: 12px;
    background: var(--k-bg-white);
    color: var(--job-color-text);
    font-size: 14px;
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.mail-compose-form .work-request-apply-input::placeholder {
    color: var(--job-color-text-light);
}

.mail-compose-form .work-request-apply-input:focus {
    border-color: var(--job-color-primary);
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.06);
    background: var(--k-bg-white);
    outline: none;
}

.work-request-apply-textarea {
    min-height: 140px;
    resize: vertical;
}

/* 작업의뢰 지원 제안서 미입력 상태를 표시한다. */
.work-request-profile-proposal-empty {
    border: 1px dashed var(--job-color-border);
    background: #fafcfb;
    color: var(--job-color-text-light);
}

/* 지원자 프로필 모달 본문을 상세 화면과 같은 문서형 구조로 정리한다. */

/* 지원자 프로필 모달 상단 프로필 행의 장식을 낮춘다. */

/* 지원자 프로필 모달의 아바타를 상세 화면 톤의 낮은 강조 박스로 표시한다. */

/* 지원자 프로필 모달의 이름 텍스트 크기를 본문형으로 조정한다. */

/* 지원자 프로필 모달의 회사 정보를 보조 텍스트로 표시한다. */

/* 지원자 프로필 모달의 지원 요약 문구를 낮은 강조 안내 영역으로 표시한다. */

/* 지원자 프로필 모달의 섹션 간격을 상세 화면의 문서형 리듬에 맞춘다. */

/* 지원자 프로필 모달의 마지막 섹션 하단 여백을 제거한다. */

/* 지원자 프로필 모달의 섹션 제목을 체크 아이콘과 구분선 형태로 표시한다. */

/* 지원자 프로필 모달의 섹션 제목 아이콘을 상세 화면과 같은 원형 강조로 표시한다. */

/* 지원자 프로필 모달의 액션 포함 섹션 헤더를 구분선 영역으로 정렬한다. */

/* 지원자 프로필 모달의 액션 포함 제목은 헤더 구분선을 사용하도록 중복선을 제거한다. */

/* 지원자 프로필 모달의 메타 정보를 상세 화면형 정보 패널로 표시한다. */

/* 지원자 프로필 모달의 메타 카드를 라벨-값 행으로 변환한다. */

/* 지원자 프로필 모달의 메타 라벨을 보조 텍스트로 표시한다. */

/* 지원자 프로필 모달의 메타 값을 왼쪽 정렬의 진한 텍스트로 표시한다. */

/* 지원자 프로필 모달의 장문 텍스트 박스를 낮은 강조 패널로 통일한다. */

/* 지원자 프로필 모달의 미입력 제안서 상태는 점선 안내로 유지한다. */

/* 지원자 프로필 모달의 보조 라벨을 상세 화면 본문 라벨 톤으로 맞춘다. */

/* 지원자 프로필 모달의 기술 태그를 낮은 강조 뱃지로 정리한다. */

/* 지원자 프로필 모달의 링크와 파일 항목을 낮은 강조 행으로 표시한다. */

/* 지원자 프로필 모달의 링크 아이콘과 링크 색상을 상세 화면 액션 톤으로 맞춘다. */

/* 지원자 프로필 모달의 포트폴리오 목록 폭과 간격을 모달 크기에 맞춘다. */

/* 지원자 프로필 모달의 포트폴리오 제목 크기를 본문형으로 낮춘다. */

/* 지원자 프로필 모달의 포트폴리오 설명을 보조 본문 톤으로 표시한다. */

/* 지원자 프로필 모달의 비어 있음 안내를 낮은 강조 박스로 표시한다. */

/* 채용 지원자 프로필 모달의 전체 크기와 문서형 구조를 정의한다. */
.job-applicant-profile-modal {
    width: min(850px, 96vw);
    max-width: 850px;
    max-height: 90vh;
    padding: 0;
    border-radius: 8px;
    background: var(--k-bg-white);
}

/* 채용 지원자 프로필 모달의 헤더 여백을 이미지 기준으로 정리한다. */
.job-applicant-profile-modal-header {
    flex-shrink: 0;
    padding: 24px 20px 20px;
}

/* 채용 지원자 프로필 모달 제목을 작은 헤드라인으로 표시한다. */
.job-applicant-profile-modal-header h3 {
    margin: 0;
    color: var(--job-color-text);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
}

/* 채용 지원자 프로필 모달 본문을 스크롤 가능한 문서 영역으로 정의한다. */
.job-applicant-profile-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 20px;
    background: var(--k-bg-white);
}

/* 채용 지원자 프로필 상단 프로필 정보를 좌측 정렬로 배치한다. */
.job-applicant-profile-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 32px;
}

/* 채용 지원자 프로필 아바타를 이미지 기준의 작은 원형으로 표시한다. */
.job-applicant-profile-modal .job-applicant-profile-avatar {
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 50%;
    background: var(--ref-logo-coral);
    color: var(--k-bg-white);
    font-size: 22px;
    font-weight: 800;
}

/* 채용 지원자 프로필 이름과 부가정보 묶음을 세로로 배치한다. */
.job-applicant-profile-head-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* 채용 지원자 프로필 이름을 주요 텍스트로 표시한다. */
.job-applicant-profile-head-info strong {
    color: var(--job-color-text);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}

/* 채용 지원자 프로필 상단 부가정보를 보조 텍스트로 표시한다. */
.job-applicant-profile-head-info span {
    color: var(--job-color-text-light);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
}

/* 채용 지원자 프로필 섹션 간격을 이미지 기준으로 정렬한다. */
.job-applicant-profile-section {
    margin-bottom: 32px;
}

/* 채용 지원자 프로필 마지막 섹션 하단 간격을 줄인다. */
.job-applicant-profile-section:last-of-type {
    margin-bottom: 10px;
}

/* 채용 지원자 프로필 섹션 제목을 체크 아이콘과 구분선으로 표시한다. */
.job-applicant-profile-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 22px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--job-color-border);
    color: var(--job-color-text);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

/* 채용 지원자 프로필 섹션 제목 아이콘을 코럴 강조로 표시한다. */
.job-applicant-profile-section-title i {
    color: var(--ref-logo-coral);
    font-size: 14px;
}

/* 채용 지원자 프로필 기본 정보 영역을 이미지와 같은 좌우 컬럼으로 배치한다. */
.job-applicant-profile-basic-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 62px;
    padding: 0 14px;
}

/* 채용 지원자 프로필 기본 정보 컬럼별 세로 간격을 정의한다. */
.job-applicant-profile-basic-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* 채용 지원자 프로필 기본 정보 항목을 라벨과 값으로 배치한다. */
.job-applicant-profile-info-item {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    min-width: 0;
}

/* 채용 지원자 프로필 기본 정보 라벨을 보조 톤으로 표시한다. */
.job-applicant-profile-info-item span {
    color: var(--job-color-text-light);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.55;
}

/* 채용 지원자 프로필 기본 정보 값을 주요 텍스트로 표시한다. */
.job-applicant-profile-info-item strong {
    color: var(--job-color-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.55;
    word-break: break-word;
}

/* 채용 지원자 프로필 자격증 목록을 행 단위로 배치한다. */
.job-applicant-profile-certificate-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 14px;
}

/* 채용 지원자 프로필 자격증 행을 이름, 발급기관, 취득월로 나눈다. */
.job-applicant-profile-certificate-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(120px, 160px) 76px;
    align-items: center;
    gap: 14px;
    padding: 6px 0;
}

/* 채용 지원자 프로필 자격증 이름을 주요 텍스트로 표시한다. */
.job-applicant-profile-certificate-row strong {
    color: var(--job-color-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

/* 채용 지원자 프로필 자격증 보조 정보를 흐린 텍스트로 표시한다. */
.job-applicant-profile-certificate-row span,
.job-applicant-profile-certificate-row time {
    color: var(--job-color-text-light);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

/* 채용 지원자 프로필 포트폴리오 영역을 행 묶음으로 정리한다. */
.job-applicant-profile-portfolio-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 채용 지원자 프로필 포트폴리오 링크 행을 낮은 강조 박스로 표시한다. */
.job-applicant-profile-portfolio-line,
.job-applicant-profile-file-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 58px;
    padding: 14px 16px;
    border-radius: 8px;
    background: var(--k-color-gray-fa);
}

/* 채용 지원자 프로필 포트폴리오 링크를 주요 액션 색상으로 표시한다. */
.job-applicant-profile-portfolio-line a {
    overflow: hidden;
    max-width: 60%;
    color: var(--ref-accent-blue);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 채용 지원자 프로필 포트폴리오 링크 정보를 제목과 기간으로 묶어 표시한다. */
.job-applicant-profile-portfolio-line div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* 채용 지원자 프로필 포트폴리오 제목을 주요 텍스트로 표시한다. */
.job-applicant-profile-portfolio-line strong {
    overflow: hidden;
    color: var(--job-color-text);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 채용 지원자 프로필 포트폴리오 기간을 보조 텍스트로 표시한다. */
.job-applicant-profile-portfolio-line span {
    color: var(--job-color-text-light);
    font-size: 12px;
    line-height: 1.35;
}

/* 채용 지원자 프로필 파일 정보 묶음을 세로로 배치한다. */
.job-applicant-profile-file-row div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* 채용 지원자 프로필 파일명을 주요 텍스트로 표시한다. */
.job-applicant-profile-file-row strong {
    overflow: hidden;
    color: var(--job-color-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 채용 지원자 프로필 파일 크기를 보조 텍스트로 표시한다. */
.job-applicant-profile-file-row span {
    color: var(--job-color-text-light);
    font-size: 12px;
    line-height: 1.35;
}

/* 채용 지원자 프로필 파일 다운로드 버튼을 테두리 버튼으로 표시한다. */
.job-applicant-profile-file-row a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 62px;
    height: 30px;
    padding: 0 16px;
    border: 1px solid var(--ref-accent-orange);
    border-radius: var(--k-radius-pill);
    background-color: var(--k-bg-white);
    color: var(--ref-accent-orange);
    font-family: 'Pretendard', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

/* 채용 지원자 프로필 프로젝트 목록을 카드 간격으로 배치한다. */
.job-applicant-profile-project-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 채용 지원자 프로필 프로젝트 카드를 이미지 기준의 회색 박스로 표시한다. */
.job-applicant-profile-project-card {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 24px;
    padding: 22px 16px;
    border-radius: 8px;
    background: var(--k-color-gray-fa);
}

/* 채용 지원자 프로필 프로젝트 기간과 역할을 좌측 보조 정보로 배치한다. */
.job-applicant-profile-project-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    color: var(--job-color-text-light);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

/* 채용 지원자 프로필 프로젝트 본문을 세로 문서형으로 표시한다. */
.job-applicant-profile-project-body {
    min-width: 0;
}

/* 채용 지원자 프로필 프로젝트 제목을 주요 텍스트로 표시한다. */
.job-applicant-profile-project-body strong {
    display: block;
    margin-bottom: 12px;
    color: var(--job-color-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

/* 채용 지원자 프로필 프로젝트 설명을 줄바꿈 가능한 본문으로 표시한다. */
.job-applicant-profile-project-body div {
    color: var(--job-color-text);
    font-size: 13px;
    line-height: 1.75;
    white-space: pre-line;
    word-break: break-word;
}

/* 채용 지원자 프로필 자기소개를 이미지 기준의 단순 본문으로 표시한다. */
.job-applicant-profile-intro {
    padding: 2px 0 0;
    color: var(--job-color-text);
    font-size: 13px;
    line-height: 1.8;
    white-space: pre-line;
    word-break: break-word;
    padding: 0 12px;
}

/* 채용 지원자 프로필 모달 하단 버튼 영역을 우측 정렬한다. */
.job-applicant-profile-modal-footer {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px 24px;
    background: var(--k-bg-white);
}

/* 모바일 채용 지원자 프로필 모달을 단일 컬럼으로 전환한다. */
@media (max-width: 768px) {
    .job-applicant-profile-modal {
        width: 95%;
        max-width: 95%;
    }

    .job-applicant-profile-modal-header {
        padding: 22px 18px 18px;
    }

    .job-applicant-profile-modal-body {
        padding: 0 18px;
    }

    .job-applicant-profile-head {
        gap: 14px;
        margin-bottom: 24px;
    }

    .job-applicant-profile-basic-grid,
    .job-applicant-profile-project-card {
        grid-template-columns: 1fr;
    }

    .job-applicant-profile-basic-grid {
        row-gap: 12px;
    }

    .job-applicant-profile-basic-column {
        gap: 12px;
    }

    .job-applicant-profile-certificate-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 10px 0;
    }

    .job-applicant-profile-file-row,
    .job-applicant-profile-portfolio-line {
        align-items: flex-start;
        flex-direction: column;
    }

    .job-applicant-profile-portfolio-line a {
        max-width: 100%;
    }

    .job-applicant-profile-modal-footer {
        padding: 14px 18px 22px;
    }
}

/* 작업의뢰 반응형 스타일 */
@media (max-width: 768px) {
    .work-request-board-header {
        flex-direction: column;
        align-items: stretch;
    }

    .work-request-search-left {
        width: 100%;
        flex-wrap: wrap;
    }

    .work-request-search-box {
        width: 100%;
        flex-wrap: wrap;
    }

    .work-request-search-box .select-freemode,
    .work-request-search-box .job-search-input,
    .work-request-search-box .job-search-btn {
        width: 100% !important;
    }

    .work-request-form-upload-head,
    .work-request-attachment-item {
        flex-direction: column;
        align-items: stretch;
    }

    .work-request-detail-action-group,
    .work-request-detail-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .work-request-report-reason-list {
        grid-template-columns: 1fr;
    }

    .work-request-card-mobile-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .requester-profile-info-grid,
    .requester-company-info-grid {
        grid-template-columns: 1fr;
    }

    .requester-profile-info-panel {
        padding: 8px 18px;
    }

    .requester-profile-info-panel .requester-profile-info-item {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .job-wage-arrears-notice {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .job-wage-arrears-notice-link {
        width: 100%;
    }

    .work-request-profile-modal {
        width: 95%;
        max-width: 95%;
        padding: 0;
    }

    /* 모바일 지원자 프로필 모달 상단 정보를 왼쪽 정렬로 유지한다. */

    /* 모바일 지원자 프로필 모달의 기본 정보 영역을 1열로 전환한다. */

    /* 모바일 지원자 프로필 모달의 메타 행 너비를 좁은 화면에 맞춘다. */

    /* 모바일 지원자 프로필 모달의 포트폴리오 목록을 단일 컬럼으로 표시한다. */

    /* 모바일 지원자 프로필 모달의 포트폴리오 기간 여백을 제거한다. */

}

/* 단기 채용 상세 화면을 참고 이미지형 문서 레이아웃으로 정의한다. */
.job-posting-detail-page {
    max-width: 1180px;
    padding: 32px 24px 64px;
}

/* 단기 채용 상세 상단 제목과 액션 버튼을 좌우로 배치한다. */
.job-posting-detail-page .job-detail-header {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 34px;
}

/* 단기 채용 상세 상단 주요 영역의 가로 배치를 정의한다. */
.job-posting-detail-page .job-detail-header-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
}

/* 단기 채용 상세 제목 묶음의 폭을 정의한다. */
.job-posting-detail-page .job-detail-heading {
    min-width: 0;
    flex: 1;
}

/* 단기 채용 상세 제목 크기와 여백을 참고 이미지 톤으로 조정한다. */
.job-posting-detail-page .job-detail-title {
    margin: 0 0 14px;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.35;
    color: var(--job-color-text);
}

/* 단기 채용 상세 메타 정보를 한 줄 문서형으로 표시한다. */
.job-posting-detail-page .job-detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    color: var(--job-color-text-light);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
}

/* 단기 채용 상세 상단 상태 배지를 문장형 텍스트로 표시한다. */
.job-posting-detail-page .job-detail-meta .job-status-tag {
    min-width: 0;
    height: auto;
    padding: 0;
    background: transparent;
    color: var(--ref-logo-coral);
    font-size: 13px;
    font-weight: 700;
}

/* 단기 채용 상세 상단 마감 상태 텍스트를 보조 톤으로 표시한다. */
.job-posting-detail-page .job-detail-meta .job-status-tag--closed {
    color: var(--ref-gray-700);
}

/* 단기 채용 상세 상단 액션 버튼 크기를 참고 이미지 톤으로 조정한다. */
.job-posting-detail-page .work-request-detail-action-group {
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
}

/* 단기 채용 상세 상단 관심 버튼을 낮은 강조 톤으로 표시한다. */
.job-posting-detail-page #detailBookmarkBtn {
    min-width: 110px;
    height: 38px;
    border-radius: 8px;
}

/* 단기 채용 상세 상단 지원 버튼을 강조 버튼으로 표시한다. */
.job-posting-detail-page #detailApplyShortcutBtn {
    min-width: 90px;
    height: 38px;
    border-radius: 8px;
    background-color: var(--ref-logo-coral);
    border-color: var(--ref-logo-coral);
    color: var(--k-bg-white);
}

/* 단기 채용 상세 상단 지원 버튼 hover 상태를 정의한다. */
.job-posting-detail-page #detailApplyShortcutBtn:hover {
    background-color: var(--ref-accent-orange);
    border-color: var(--ref-accent-orange);
    box-shadow: none;
}

/* 단기 채용 상세 섹션 사이 문서형 간격을 정의한다. */
.job-posting-detail-page .job-detail-section {
    margin-bottom: 32px;
}

/* 단기 채용 상세 섹션 제목을 체크 아이콘과 구분선으로 표시한다. */
.job-posting-detail-page .section-title {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--job-color-border);
    color: var(--job-color-text);
    font-size: 16px;
    font-weight: 800;
    gap: 9px;
}

/* 단기 채용 상세 섹션 제목 아이콘을 원형 강조 표시로 정의한다. */
.job-posting-detail-page .section-title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--ref-logo-coral);
    color: var(--k-bg-white);
    font-size: 8px;
    line-height: 1;
}

/* 단기 채용 상세 섹션 헤더의 우측 액션 배치를 정의한다. */
.job-posting-detail-page .job-detail-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--job-color-border);
}

/* 단기 채용 상세 섹션 헤더 안의 제목 여백을 조정한다. */
.job-posting-detail-page .job-detail-section-head .section-title {
    flex: 1;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

/* 상세 본문 신고 버튼 제목 행의 간격을 정의한다. */
.job-posting-detail-page .job-detail-section-head--report {
    align-items: flex-start;
    margin-bottom: 28px;
}

/* 상세 본문 신고 버튼을 제목 행 오른쪽 액션으로 표시한다. */
.job-posting-detail-page .job-detail-report-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 0 0 auto;
    min-width: 68px;
    height: 28px;
    padding: 0 10px;
    border-radius: var(--k-radius-pill);
    background: var(--k-bg-white);
    color: var(--job-color-text-light);
    font-size: 11px;
    font-weight: 500;
}

/* 상세 본문 신고 버튼 아이콘 크기를 버튼 높이에 맞춘다. */
.job-posting-detail-page .job-detail-report-btn i {
    color: var(--job-color-text-light);
    font-size: 10px;
}

/* 단기 채용 상세 기업정보 더보기 버튼을 섹션 제목 행의 오른쪽에 배치한다. */
.job-posting-detail-page .job-company-intro-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 82px;
    height: 28px;
    padding: 0 12px;
    border-radius: var(--k-radius-pill);
    background: var(--k-bg-white);
    color: var(--job-color-text-light);
    font-size: 11px;
    font-weight: 500;
}

/* 단기 채용 상세 핵심 정보 박스를 연한 배경 패널로 표시한다. */
.job-posting-detail-page .job-detail-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 96px;
    row-gap: 0;
    padding: 28px 18px;
    border-radius: 8px;
    background-color: var(--k-color-gray-fa);
    font-size: 13px;
}

/* 단기 채용 상세 핵심 정보 컬럼 내부 행 간격을 정의한다. */
.job-posting-detail-page .job-detail-info-column {
    display: grid;
    gap: 17px;
    min-width: 0;
}

/* 단기 채용 상세 핵심 정보의 라벨과 값을 한 행에 배치한다. */
.job-posting-detail-page .job-detail-info-row {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: center;
    column-gap: 16px;
    min-width: 0;
}

/* 단기 채용 상세 핵심 정보 라벨을 보조 텍스트로 표시한다. */
.job-posting-detail-page .info-label {
    color: var(--job-color-text-light);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

/* 단기 채용 상세 핵심 정보 값을 진한 텍스트로 표시한다. */
.job-posting-detail-page .info-value {
    color: var(--job-color-text);
    font-weight: 500;
    line-height: 1.6;
    text-align: left;
    word-break: break-word;
}

/* 단기 채용 상세 본문 텍스트 가독성을 조정한다. */
.job-posting-detail-page .content-text {
    color: var(--job-color-text);
    font-size: 14px;
    line-height: 1.85;
}

/* 단기 채용 상세 참고 링크와 첨부파일 목록 간격을 외주 상세와 동일하게 정리한다. */
.job-posting-detail-page .work-request-reference-list,
.job-posting-detail-page .work-request-attachment-list {
    display: grid;
    gap: 12px;
}

/* 단기 채용 상세 첨부파일 안내 문구는 상세 이미지형 자료 목록에서 숨긴다. */

/* 단기 채용 상세 참고 링크와 첨부파일을 낮은 행 형태로 표시한다. */
.job-posting-detail-page .work-request-reference-item,
.job-posting-detail-page .work-request-attachment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    padding: 0 14px;
    border: 1px solid var(--job-color-border);
    border-radius: 8px;
    background: var(--k-bg-white);
    color: var(--job-color-text);
    font-size: 13px;
    font-weight: 700;
    box-shadow: none;
    transform: none;
}

/* 단기 채용 상세 참고 링크 hover 상태를 행 형태 안에서 유지한다. */
.job-posting-detail-page .work-request-reference-item:hover {
    border-color: var(--job-color-border);
    box-shadow: none;
    transform: none;
}

/* 단기 채용 상세 참고 링크 텍스트 줄바꿈을 제어한다. */
.job-posting-detail-page .work-request-reference-item span {
    min-width: 0;
    word-break: break-all;
}

/* 단기 채용 상세 참고 링크 아이콘을 우측 보조 아이콘으로 표시한다. */
.job-posting-detail-page .work-request-reference-item i {
    color: var(--job-color-text-light);
    font-size: 12px;
}

/* 단기 채용 상세 첨부파일 본문 영역을 한 줄로 정렬한다. */
.job-posting-detail-page .work-request-attachment-item-main {
    min-width: 0;
    flex: 1;
}

/* 단기 채용 상세 첨부파일의 기존 카드형 아이콘과 배지를 숨긴다. */
.job-posting-detail-page .work-request-attachment-icon,
.job-posting-detail-page .work-request-attachment-badge {
    display: none;
}

/* 단기 채용 상세 첨부파일 정보 영역을 파일명과 용량으로 배치한다. */
.job-posting-detail-page .work-request-attachment-info {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    flex: 1;
}

/* 단기 채용 상세 첨부파일 이름 행 폭을 제한한다. */
.job-posting-detail-page .work-request-attachment-name-row {
    min-width: 0;
}

/* 단기 채용 상세 첨부파일 이름을 주요 텍스트로 표시한다. */
.job-posting-detail-page .work-request-attachment-name {
    color: var(--job-color-text);
    font-size: 13px;
    font-weight: 700;
}

/* 단기 채용 상세 첨부파일 용량을 보조 텍스트로 표시한다. */
.job-posting-detail-page .work-request-attachment-meta {
    margin-top: 0;
    color: var(--job-color-text-light);
    font-size: 12px;
}

/* 단기 채용 상세 첨부파일 다운로드 버튼을 작은 보조 버튼으로 표시한다. */
.job-posting-detail-page .work-request-attachment-download {
    flex: 0 0 auto;
    min-width: 82px;
    height: 32px;
    border-radius: var(--k-radius-pill);
    background: var(--k-color-gray-fa);
    font-size: 12px;
}

/* 단기 채용 상세 회사 정보 카드를 낮은 장식의 정보 박스로 표시한다. */
.job-posting-detail-page .requester-profile-card {
    gap: 0;
    padding: 22px 16px 18px;
    border-radius: 8px;
    background-color: var(--k-color-gray-fa);
}

/* 단기 채용 상세 회사 로고 상단 영역을 정의한다. */
.job-posting-detail-page .requester-profile-logo-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

/* 단기 채용 상세 회사 정보 상단을 간결하게 배치한다. */

/* 단기 채용 상세 회사 로고 박스의 모서리와 배경을 조정한다. */
.job-posting-detail-page .requester-profile-logo {
    width: 176px;
    height: 54px;
    border-radius: 8px;
    background: var(--k-bg-white);
    color: var(--job-color-text-light);
    font-size: 20px;
}

/* 단기 채용 상세 회사명 텍스트 크기를 조정한다. */

/* 단기 채용 상세 회사 설명 문구의 여백을 조정한다. */

/* 단기 채용 상세 회사 정보 그리드를 2열 문서형으로 표시한다. */
.job-posting-detail-page .requester-profile-info-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 96px;
    row-gap: 16px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* 단기 채용 상세 회사 정보 항목을 라벨과 값 2열로 표시한다. */
.job-posting-detail-page .requester-profile-info-panel .requester-profile-info-item {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    align-items: center;
}

/* 단기 채용 상세 회사 정보 라벨을 보조 텍스트로 표시한다. */
.job-posting-detail-page .requester-profile-info-panel .requester-profile-info-label {
    color: var(--job-color-text-light);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

/* 단기 채용 상세 회사 정보 값을 진하게 표시한다. */
.job-posting-detail-page .requester-profile-info-panel .requester-profile-info-value {
    color: var(--job-color-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    text-align: left;
    word-break: break-word;
}

/* 단기 채용 상세 회사 정보 출처 안내 문구를 정의한다. */
.job-posting-detail-page .requester-profile-source-notice {
    margin: 20px 0 0;
    color: var(--job-color-text-light);
    font-size: 12px;
    line-height: 1.6;
}

/* 단기 채용 상세 근무지역 주소 텍스트를 정의한다. */
.job-posting-detail-page .job-detail-location-address {
    margin: 0 0 22px;
    color: var(--job-color-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.7;
}

/* 단기 채용 상세 근무지역 지도 영역을 정의한다. */
.job-posting-detail-page .job-detail-map {
    width: 100%;
    height: 380px;
    border: 1px solid var(--job-color-border);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--k-color-gray-fa);
}

/* 단기 채용 상세 지도 빈 상태를 중앙 정렬로 표시한다. */
.job-posting-detail-page .job-detail-map.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--job-color-text-light);
    font-size: 14px;
}

/* 단기 채용 상세 체불사업주 안내를 하단 알림 바 형태로 표시한다. */
.job-posting-detail-page .job-wage-arrears-notice {
    margin-top: 20px;
    padding: 16px 18px;
    border-radius: 8px;
    background: var(--k-bg-white);
}

/* 단기 채용 상세 체불사업주 안내 아이콘 톤을 조정한다. */
.job-posting-detail-page .job-wage-arrears-notice-icon {
    width: 26px;
    height: 26px;
    background: transparent;
    color: var(--ref-accent-orange);
}

/* 단기 채용 상세 체불사업주 안내 버튼을 둥근 링크로 표시한다. */
.job-posting-detail-page .job-wage-arrears-notice-link {
    min-height: 36px;
    border-radius: 999px;
    border-color: var(--job-color-border);
    background: var(--k-color-gray-fa);
    color: var(--ref-gray-700);
}

/* 단기 채용 상세 체불사업주 안내 버튼 hover 색상을 회색 보조 버튼으로 유지한다. */
.job-posting-detail-page .job-wage-arrears-notice-link:hover {
    border-color: var(--job-color-border);
    background: var(--k-bg-white);
    color: var(--job-color-text);
}

/* 단기 채용 상세 지원 카드를 참고 이미지형 정보 박스로 표시한다. */

/* 단기 채용 상세 하단 목록 버튼 간격을 정의한다. */

/* 모바일 단기 채용 상세 레이아웃을 1열로 전환한다. */
@media (max-width: 768px) {
    .job-posting-detail-page {
        padding: 24px 16px 44px;
    }

    .job-posting-detail-page .job-detail-header-main,
    .job-posting-detail-page .job-detail-section-head,
    .job-posting-detail-page .requester-profile-logo-area {
        flex-direction: column;
        align-items: stretch;
    }

    .job-posting-detail-page .work-request-detail-action-group,
    .job-posting-detail-page #detailBookmarkBtn,
    .job-posting-detail-page #detailApplyShortcutBtn,
    .job-posting-detail-page .job-detail-report-btn,
    .job-posting-detail-page .job-company-intro-btn {
        width: 100%;
    }

    .job-posting-detail-page .job-detail-title {
        font-size: 23px !important;
    }

    .job-posting-detail-page .job-detail-info-grid,
    .job-posting-detail-page .requester-profile-info-panel {
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    .job-posting-detail-page .job-detail-info-grid {
        padding: 22px 18px;
        row-gap: 17px;
    }

    .job-posting-detail-page .job-detail-info-row {
        grid-template-columns: 86px minmax(0, 1fr);
    }

    .job-posting-detail-page .requester-profile-info-panel .requester-profile-info-item {
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .job-posting-detail-page .job-detail-map {
        height: 280px;
    }

    .job-posting-detail-page .job-wage-arrears-notice {
        flex-direction: column;
        align-items: stretch;
    }

    .job-posting-detail-page.requester-company-page .requester-company-info-grid.requester-profile-info-panel {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
}

/* 채용 공통 헤더의 메뉴를 상단 헤더 내부에 배치한다. */
.job-header {
    border-bottom: 1px solid var(--k-border-color-light);
    background-color: var(--k-bg-white);
}

/* 채용 공통 헤더 내부를 로고, 메뉴, 사용자 영역으로 나눈다. */
.job-header-inner {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
    align-items: center;
    height: var(--header-height);
    padding: 0 32px;
}

/* 채용 공통 헤더 로고 영역을 정의한다. */
.job-header-brand {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* 일반회원 헤더의 로고 영역을 정의한다. */
.job-header-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ref-ink);
    font-size: 20px;
    font-weight: 800;
    text-decoration: none;
    flex-shrink: 0;
}

/* 채용 공통 헤더 로고 이미지를 정의한다. */
.job-header-logo img {
    width: 40px;
    height: 40px;
}

/* 일반회원 헤더의 기업홈 이동 버튼을 정의한다. */
.job-header-biz-home-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid var(--ref-warm-150);
    border-radius: 999px;
    background-color: var(--k-bg-white);
    color: var(--ref-ink);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
    margin-left: 8px;
}

/* 일반회원 헤더의 기업홈 이동 버튼 hover 상태를 정의한다. */
.job-header-biz-home-link:hover {
    border-color: var(--ref-logo-coral);
    color: var(--ref-logo-coral);
}

/* 채용 공통 헤더 중앙 메뉴 외곽을 정의한다. */
.job-header-nav-wrap {
    grid-column: 2;
    min-width: 0;
    background-color: transparent;
    box-shadow: none;
}

/* 채용 공통 헤더 중앙 메뉴 내부 폭을 정의한다. */
.job-header-nav-inner {
    max-width: none;
    width: auto;
}

/* 채용 공통 헤더 중앙 메뉴 정렬을 정의한다. */
.job-header-nav {
    justify-content: center;
    gap: 42px;
    min-height: 60px;
}

/* 채용 공통 헤더 중앙 메뉴 항목을 정의한다. */
.job-header-nav-tab {
    min-height: 60px;
    padding: 0;
    border-bottom: none;
    color: var(--ref-ink);
    font-size: 16px;
    font-weight: 700;
    transition: color 0.2s;
}

/* 채용 공통 헤더 중앙 메뉴 hover 상태를 정의한다. */
.job-header-nav-tab:hover {
    color: var(--ref-logo-coral);
}

/* 채용 공통 헤더 중앙 메뉴 활성 상태를 정의한다. */
.job-header-nav-tab.active {
    border-bottom-color: transparent;
    color: var(--ref-logo-coral);
    font-weight: 700;
}

/* 채용 공통 헤더 사용자 영역을 우측에 고정한다. */
.job-header-user {
    grid-column: 3;
    justify-self: end;
}

/* 채용 공통 헤더 드롭다운 기준 높이를 정의한다. */
.job-header-create-menu-wrap {
    min-height: 60px;
}

/* 채용 공통 푸터 배경과 여백을 정의한다. */
.job-site-footer {
    border-top: none;
    padding: 38px 0 44px;
    background-color: var(--ref-bg-base);
}

/* 채용 공통 푸터 내부 좌측 배치를 정의한다. */
.job-footer-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "info links"
        "copyright links";
    column-gap: 48px;
    padding: 0 32px;
}

/* 채용 공통 푸터 메뉴 그룹은 가로로, 하위 메뉴는 세로로 정의한다. */
.job-footer-links {
    grid-area: links;
    align-items: flex-start;
    flex-direction: row;
    justify-content: flex-end;
    gap: 34px;
    margin-bottom: 0;
}

/* 채용 공통 푸터 메뉴 그룹의 내부 간격을 정의한다. */
.job-footer-menu-group {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
}

/* 채용 공통 푸터 메뉴 그룹 제목을 정의한다. */
.job-footer-menu-title {
    color: var(--ref-ink);
    font-size: 13px;
    font-weight: 700;
}

/* 채용 공통 푸터 링크 텍스트를 정의한다. */
.job-footer-links a {
    color: var(--ref-gray-700);
    font-size: 13px;
    font-weight: 500;
}

/* 채용 공통 푸터 사업자 정보 묶음을 정의한다. */
.job-footer-info-group {
    grid-area: info;
    display: grid;
    gap: 6px;
}

/* 채용 공통 푸터 사업자 정보 행을 정의한다. */
.job-footer-info {
    justify-content: flex-start;
    color: var(--ref-gray-700);
    font-size: 12px;
    line-height: 1.8;
}

/* 채용 공통 푸터 저작권 문구를 정의한다. */
.job-footer-copyright {
    grid-area: copyright;
    margin-top: 26px;
    color: var(--ref-gray-700);
    font-size: 12px;
}

/* 인재 목록 화면을 단기 채용 목록과 같은 문서형 레이아웃으로 정의한다. */
.talent-list-page {
    box-sizing: border-box;
}

/* 인재 목록 상세검색 패널의 조건 배치를 정의한다. */

/* 인재 목록 상세검색 조건 그룹을 셀렉트형 필터에 맞게 정렬한다. */

/* 인재 목록 상세검색 셀렉트의 높이와 밀도를 단기 채용 목록과 맞춘다. */

/* 인재 목록 행 컨테이너를 구분선 기반 리스트로 정의한다. */
.talent-list-content {
    border-top: 1px solid var(--job-color-border);
}

/* 인재 목록 행의 컬럼 구성을 단기 채용 목록과 맞춘다. */
.talent-list-row {
    grid-template-columns: 220px minmax(260px, 1fr) 230px 142px;
    align-items: start;
}

/* 인재 목록 프로필 컬럼의 내부 여백을 정리한다. */

/* 인재 목록 아바타를 코럴 강조 톤으로 표시한다. */
.talent-list-row .talent-avatar,
.talent-detail-page .talent-profile-avatar {
    background: var(--ref-logo-coral);
    color: var(--k-bg-white);
}

/* 인재 목록 이름 텍스트를 목록 주요 텍스트 톤으로 정의한다. */
.talent-list-row .talent-name {
    overflow: hidden;
    color: var(--ref-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 인재 목록 전문 분야 텍스트를 코럴 보조 텍스트로 정의한다. */
.talent-list-row .talent-card-subtitle {
    overflow: hidden;
    color: var(--ref-logo-coral);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 인재 목록 자기소개를 두 줄 목록 제목처럼 표시한다. */

/* 인재 목록 기술 태그를 단기 채용 목록 태그와 같은 낮은 강조 텍스트로 표시한다. */

/* 인재 목록 메타 컬럼을 라벨과 값의 작은 행으로 표시한다. */

/* 인재 목록 메타 항목의 행 배치를 정의한다. */
.talent-list-meta-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

/* 인재 목록 메타 라벨을 보조 텍스트로 정의한다. */
.talent-list-meta-label {
    flex: 0 0 56px;
    color: var(--job-color-text-light);
    font-size: 12px;
    font-weight: 500;
}

/* 인재 목록 메타 값을 말줄임 가능한 주요 텍스트로 정의한다. */
.talent-list-meta-value {
    overflow: hidden;
    min-width: 0;
    color: var(--job-color-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 인재 목록 상태 컬럼의 배지 묶음을 우측 정렬한다. */

/* 인재 목록 상태 배지를 코럴 중심 톤으로 정리한다. */
.talent-list-row .talent-card-badge--primary {
    background: var(--ref-accent-orange-bg-soft);
    color: var(--ref-logo-coral);
}

/* 인재 목록 보류 배지를 경고 보조 톤으로 정리한다. */

/* 인재 목록 중립 배지를 회색 보조 톤으로 정리한다. */
.talent-list-row .talent-card-badge--neutral {
    background: var(--k-color-gray-fa);
    color: var(--ref-gray-700);
}

/* 인재 목록 기본 상태 텍스트를 배지 형태로 표시한다. */

/* 프리랜서 찾기 화면의 제목 간격을 이미지 기준으로 정리한다. */
.talent-list-page .job-list-page-header {
    margin-bottom: 26px;
}

/* 프리랜서 찾기 화면 제목을 낮은 문서형 크기로 표시한다. */
.talent-list-page .job-section-title {
    font-size: 24px;
    font-weight: 600;
}

/* 프리랜서 찾기 목록 행을 이미지 기준의 5열 리스트로 배치한다. */
.talent-list-page .talent-list-row {
    grid-template-columns: 190px 82px minmax(240px, 1fr) 184px 126px;
    align-items: center;
    gap: 18px;
    min-height: 74px;
    padding: 18px 12px;
}

/* 프리랜서 찾기 프로필 영역을 아바타와 이름으로 정렬한다. */
.talent-list-page .talent-finder-profile {
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: 0;
}

/* 프리랜서 찾기 프로필 텍스트 묶음의 말줄임 기준을 정의한다. */
.talent-list-page .talent-finder-profile-copy {
    min-width: 0;
}

/* 프리랜서 찾기 목록의 보조 프로필 문구를 회색 톤으로 표시한다. */
.talent-list-page .talent-list-row .talent-card-subtitle {
    margin-top: 8px;
    color: var(--job-color-text-light);
    font-weight: 500;
}

/* 프리랜서 찾기 경력 열을 라벨과 값의 짧은 한 줄로 표시한다. */
.talent-list-page .talent-finder-career-col {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* 프리랜서 찾기 목록 정보 라벨을 보조 텍스트로 표시한다. */
.talent-list-page .talent-finder-career-col span,
.talent-list-page .talent-finder-info-item span,
.talent-list-page .talent-finder-update-col span {
    color: var(--job-color-text-light);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
}

/* 프리랜서 찾기 경력 값을 주요 텍스트로 표시한다. */
.talent-list-page .talent-finder-career-col strong {
    color: var(--ref-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    white-space: nowrap;
}

/* 프리랜서 찾기 전문 분야와 조건 열을 행 정보 묶음으로 표시한다. */
.talent-list-page .talent-finder-info-col,
.talent-list-page .talent-finder-condition-col {
    display: grid;
    gap: 7px;
    min-width: 0;
}

/* 프리랜서 찾기 목록의 라벨-값 정보 행을 정의한다. */
.talent-list-page .talent-finder-info-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    min-width: 0;
}

/* 프리랜서 찾기 목록 정보 값을 한 줄 말줄임으로 표시한다. */
.talent-list-page .talent-finder-info-item strong {
    overflow: hidden;
    min-width: 0;
    color: var(--ref-ink);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 프리랜서 찾기 최근 업데이트 열을 우측 정렬한다. */
.talent-list-page .talent-finder-update-col {
    display: grid;
    justify-items: end;
    gap: 7px;
    min-width: 0;
}

/* 프리랜서 찾기 최근 업데이트 날짜를 낮은 강조 텍스트로 표시한다. */
.talent-list-page .talent-finder-update-col time {
    color: var(--job-color-text-light);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
    white-space: nowrap;
}

/* 태블릿 프리랜서 찾기 목록의 세부 열을 우측 컬럼에 쌓는다. */
@media (max-width: 1023px) {
    .talent-list-page .talent-finder-info-col,
    .talent-list-page .talent-finder-condition-col,
    .talent-list-page .talent-finder-update-col {
        grid-column: 2;
        justify-items: start;
    }
}

/* 모바일 프리랜서 찾기 목록을 단일 컬럼으로 전환한다. */
@media (max-width: 768px) {
    .talent-list-page .talent-finder-info-col,
    .talent-list-page .talent-finder-condition-col,
    .talent-list-page .talent-finder-update-col {
        grid-column: auto;
    }

    .talent-list-page .talent-finder-update-col {
        justify-items: start;
    }
}

/* 인재 상세 상단 프로필 요약을 단기 채용 상세 헤더 안에 정렬한다. */

/* 인재 상세 아바타 크기를 문서형 상세 헤더에 맞춘다. */
.talent-detail-page .talent-profile-avatar {
    width: 78px;
    height: 78px;
    font-size: 30px;
}

/* 인재 상세 상단 액션 버튼을 단기 채용 상세 버튼 크기에 맞춘다. */

/* 인재 상세 상단 기본 액션을 코럴 강조 버튼으로 정의한다. */

/* 인재 상세 상단 기본 액션 hover 상태를 정의한다. */

/* 인재 상세 경력 요약을 단기 채용 상세 핵심 정보 박스 톤으로 정의한다. */
.talent-detail-page .talent-career-insight {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 34px;
    padding: 28px 18px;
    border-radius: 8px;
    background-color: var(--k-color-gray-fa);
}

/* 인재 상세 경력 요약 대표 값의 구분선을 낮은 톤으로 조정한다. */
.talent-detail-page .talent-career-hero {
    min-height: 88px;
    padding: 0;
    border-top: 0;
    border-bottom: 0;
}

/* 인재 상세 경력 요약 대표 값을 문서형 상세 크기에 맞춘다. */
.talent-detail-page .talent-career-hero strong {
    color: var(--job-color-text);
    font-size: 30px;
}

/* 인재 상세 경력 조건 목록의 상단 구분선을 제거한다. */
.talent-detail-page .talent-career-list {
    border-top: 0;
}

/* 인재 상세 경력 조건 항목을 정보 행처럼 표시한다. */
.talent-detail-page .talent-career-list-item {
    min-height: 42px;
    padding: 9px 0;
    border-bottom: 1px solid var(--job-color-border);
}

/* 인재 상세 경력 조건 라벨을 단기 채용 상세 라벨 톤으로 정의한다. */
.talent-detail-page .talent-career-list-item span {
    color: var(--job-color-text-light);
    font-size: 13px;
    font-weight: 600;
}

/* 인재 상세 경력 조건 값을 단기 채용 상세 값 톤으로 정의한다. */
.talent-detail-page .talent-career-list-item strong {
    color: var(--job-color-text);
    font-size: 14px;
    font-weight: 600;
}

/* 인재 상세 일반 본문을 카드 배경 없이 문서 본문으로 표시한다. */

/* 인재 상세 기술 칩을 낮은 강조 태그로 표시한다. */
.talent-detail-page .talent-skill-chip {
    padding: 5px 11px;
    border-radius: var(--k-radius-pill);
    background: var(--k-color-gray-fa);
    color: var(--ref-gray-700);
    font-size: 13px;
}

/* 인재 상세 링크 행을 단기 채용 상세 참고 링크 톤으로 정리한다. */
.talent-detail-page .talent-link-item {
    min-height: 54px;
    padding: 0 14px;
    border-color: var(--job-color-border);
    border-radius: 8px;
    background: var(--k-bg-white);
}

/* 인재 상세 링크 아이콘과 링크 색상을 문서형 보조 톤으로 조정한다. */
.talent-detail-page .talent-link-item i,
.talent-detail-page .talent-link-item a {
    color: var(--job-color-text-light);
}

/* 인재 상세 포트폴리오 파일 카드를 낮은 장식의 자료 카드로 정의한다. */
.talent-detail-page .talent-file-card {
    border-color: var(--job-color-border);
    border-radius: 8px;
    box-shadow: none;
}

/* 인재 상세 파일 미리보기 썸네일을 문서형 카드 톤으로 조정한다. */
.talent-detail-page .talent-file-preview-thumb {
    border-color: var(--job-color-border);
    border-radius: 8px;
    background: var(--k-color-gray-fa);
}

/* 인재 상세 파일 유형 배지를 회색 보조 톤으로 표시한다. */
.talent-detail-page .talent-file-type {
    background: var(--k-color-gray-fa);
    color: var(--ref-gray-700);
}

/* 프리랜서 프로필 상세 화면을 이미지 기준의 단일 문서형 레이아웃으로 정의한다. */
.talent-profile-detail-page {
    max-width: 1040px;
    padding: 32px 24px 72px;
}

/* 프리랜서 프로필 상세 화면 제목을 문서형 헤드라인으로 표시한다. */
.talent-profile-detail-page-title {
    margin: 0 0 44px;
    color: var(--ref-ink);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
}

/* 프리랜서 프로필 상단 요약을 프로필과 메시지 버튼으로 분리한다. */
.talent-profile-detail-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 34px;
}

/* 프리랜서 프로필 이미지와 이름 영역을 가로로 정렬한다. */
.talent-profile-detail-summary {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

/* 프리랜서 프로필 상세 아바타를 이미지 기준 크기로 조정한다. */
.talent-profile-detail-page .talent-profile-avatar {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    font-size: 24px;
}

/* 프리랜서 프로필 이름과 요약 문구 영역을 정의한다. */
.talent-profile-detail-heading {
    min-width: 0;
}

/* 프리랜서 프로필 이름을 굵은 본문 제목으로 표시한다. */
.talent-profile-detail-heading h2 {
    margin: 0 0 10px;
    color: var(--ref-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

/* 프리랜서 프로필 출생년도와 전문분야 요약을 보조 텍스트로 표시한다. */
.talent-profile-detail-heading p {
    margin: 0;
    color: var(--job-color-text-light);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

/* 프리랜서 프로필 상세 섹션 간격을 이미지 흐름에 맞춘다. */
.talent-profile-detail-page .talent-profile-detail-section {
    margin-bottom: 42px;
}

/* 프리랜서 프로필 상세 섹션 제목을 체크 아이콘과 구분선으로 표시한다. */
.talent-profile-detail-page .talent-profile-detail-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--job-color-border);
    color: var(--ref-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

/* 프리랜서 프로필 상세 섹션 제목 아이콘을 코럴 원형으로 표시한다. */
.talent-profile-detail-page .talent-profile-detail-section-title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--ref-logo-coral);
    color: var(--k-bg-white);
    font-size: 8px;
}

/* 프리랜서 기본 정보를 좌우 2개 컬럼으로 배치한다. */
.talent-profile-detail-page .talent-profile-basic-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 110px;
    row-gap: 0;
    padding: 4px 20px 0;
}

/* 프리랜서 기본 정보 컬럼 간격을 정의한다. */
.talent-profile-detail-page .talent-profile-basic-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

/* 프리랜서 기본 정보 항목을 라벨과 값으로 배치한다. */
.talent-profile-detail-page .talent-profile-basic-item {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
    min-width: 0;
}

/* 프리랜서 기본 정보 라벨을 보조 텍스트로 표시한다. */
.talent-profile-detail-page .talent-profile-basic-item span {
    color: var(--job-color-text-light);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
    white-space: nowrap;
}

/* 프리랜서 기본 정보 값을 주요 텍스트로 표시한다. */
.talent-profile-detail-page .talent-profile-basic-item strong {
    color: var(--ref-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
    word-break: break-word;
}

/* 프리랜서 보유 자격증 목록을 행 단위로 정렬한다. */
.talent-profile-detail-page .talent-profile-certificate-view {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 20px 0;
}

/* 프리랜서 보유 자격증 한 행을 이름, 기관, 취득월로 배치한다. */
.talent-profile-detail-page .talent-profile-certificate-view-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(150px, 180px) 84px;
    align-items: center;
    gap: 22px;
    min-height: 24px;
}

/* 프리랜서 보유 자격증 이름을 주요 텍스트로 표시한다. */
.talent-profile-detail-page .talent-profile-certificate-view-row strong {
    color: var(--ref-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

/* 프리랜서 보유 자격증 기관과 취득월을 보조 텍스트로 표시한다. */
.talent-profile-detail-page .talent-profile-certificate-view-row span,
.talent-profile-detail-page .talent-profile-certificate-view-row time {
    color: var(--job-color-text-light);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

/* 프리랜서 포트폴리오 자료 목록을 세로로 배치한다. */
.talent-profile-detail-page .talent-profile-resource-list {
    display: grid;
    gap: 8px;
}

/* 프리랜서 포트폴리오 링크를 낮은 강조 박스로 표시한다. */
.talent-profile-detail-page .talent-profile-resource-link {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 0 18px;
    border-radius: 8px;
    background-color: var(--k-color-gray-fa);
    color: var(--ref-ink);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

/* 프리랜서 포트폴리오 파일 행을 파일 정보와 다운로드 버튼으로 나눈다. */
.talent-profile-detail-page .talent-profile-resource-file {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 58px;
    padding: 0 18px;
    border-radius: 8px;
    background-color: var(--k-color-gray-fa);
}

/* 프리랜서 포트폴리오 파일명과 용량 묶음을 정렬한다. */
.talent-profile-detail-page .talent-profile-resource-file div {
    display: flex;
    align-items: baseline;
    gap: 18px;
    min-width: 0;
}

/* 프리랜서 포트폴리오 파일명을 주요 텍스트로 표시한다. */
.talent-profile-detail-page .talent-profile-resource-file strong {
    overflow: hidden;
    color: var(--ref-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 프리랜서 포트폴리오 파일 용량을 보조 텍스트로 표시한다. */
.talent-profile-detail-page .talent-profile-resource-file span {
    color: var(--job-color-text-light);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* 프리랜서 포트폴리오 다운로드 버튼을 외곽선 버튼으로 표시한다. */
.talent-profile-detail-page .talent-profile-resource-file a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 74px;
    height: 32px;
    padding: 0 16px;
    border: 1px solid var(--ref-logo-coral);
    border-radius: var(--k-radius-pill);
    background-color: var(--k-bg-white);
    color: var(--ref-logo-coral);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

/* 프리랜서 프로젝트 경험 목록을 세로 카드로 표시한다. */
.talent-profile-detail-page .talent-profile-project-list {
    display: grid;
    gap: 16px;
}

/* 프리랜서 프로젝트 경험 카드를 이미지 기준 회색 박스로 표시한다. */
.talent-profile-detail-page .talent-profile-project-card {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 36px;
    padding: 28px 20px;
    border-radius: 8px;
    background-color: var(--k-color-gray-fa);
}

/* 프리랜서 프로젝트 경험 좌측 기간과 역할 영역을 정의한다. */
.talent-profile-detail-page .talent-profile-project-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    color: var(--job-color-text-light);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

/* 프리랜서 프로젝트 경험 본문 영역을 정의한다. */
.talent-profile-detail-page .talent-profile-project-body {
    min-width: 0;
    color: var(--ref-ink);
}

/* 프리랜서 프로젝트 경험 제목을 굵게 표시한다. */
.talent-profile-detail-page .talent-profile-project-body h4 {
    margin: 0 0 22px;
    color: var(--ref-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}

/* 프리랜서 프로젝트 경험 설명 문구를 줄바꿈 가능한 본문으로 표시한다. */
.talent-profile-detail-page .talent-profile-project-copy {
    margin-top: 14px;
    color: var(--ref-ink);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.75;
    white-space: pre-line;
    word-break: break-word;
}

/* 프리랜서 프로젝트 경험 기술 문구를 보조 정보로 표시한다. */
.talent-profile-detail-page .talent-profile-project-tech {
    margin-top: 14px;
    color: var(--job-color-text-light);
    font-size: 12px;
    line-height: 1.5;
}

/* 프로젝트 경험 텍스트형 대체 카드를 정의한다. */
.talent-profile-detail-page .talent-profile-project-empty-card {
    padding: 24px 20px;
    border-radius: 8px;
    background-color: var(--k-color-gray-fa);
    color: var(--ref-ink);
    font-size: 13px;
    line-height: 1.8;
    white-space: pre-line;
}

/* 프리랜서 자기소개 본문을 이미지 기준의 긴 문서형 텍스트로 표시한다. */
.talent-profile-detail-page .talent-profile-intro-view {
    padding: 4px 20px 0;
    color: var(--ref-ink);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.9;
    white-space: pre-line;
    word-break: break-word;
}

/* 태블릿 프리랜서 프로필 상세 본문을 좁은 화면에 맞춘다. */
@media (max-width: 1023px) {
    .talent-profile-detail-page .talent-profile-basic-grid {
        column-gap: 40px;
    }

    .talent-profile-detail-page .talent-profile-project-card {
        grid-template-columns: 150px minmax(0, 1fr);
        gap: 24px;
    }
}

/* 모바일 프리랜서 프로필 상세 화면을 단일 컬럼으로 전환한다. */
@media (max-width: 768px) {
    .talent-profile-detail-page {
        padding: 28px 16px 56px;
    }

    .talent-profile-detail-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .talent-profile-detail-page .talent-profile-basic-grid,
    .talent-profile-detail-page .talent-profile-project-card,
    .talent-profile-detail-page .talent-profile-certificate-view-row {
        grid-template-columns: 1fr;
    }

    .talent-profile-detail-page .talent-profile-basic-grid,
    .talent-profile-detail-page .talent-profile-certificate-view,
    .talent-profile-detail-page .talent-profile-intro-view {
        padding-right: 0;
        padding-left: 0;
    }

    .talent-profile-detail-page .talent-profile-resource-file,
    .talent-profile-detail-page .talent-profile-resource-file div {
        align-items: flex-start;
        flex-direction: column;
    }

    .talent-profile-detail-page .talent-profile-resource-file a {
        width: 100%;
    }
}

/* 태블릿 이하 인재 목록과 상세 화면을 1열 중심으로 전환한다. */
@media (max-width: 1023px) {

    .talent-list-row {
        grid-template-columns: minmax(180px, 220px) minmax(220px, 1fr);
    }

}

/* 모바일 인재 목록과 상세 화면의 버튼 및 행 배치를 정리한다. */
@media (max-width: 768px) {
    .talent-list-row,
    .talent-detail-page .talent-career-insight {
        grid-template-columns: 1fr;
    }

    .talent-detail-page .talent-profile-avatar {
        width: 68px;
        height: 68px;
        font-size: 26px;
    }
}

/* 태블릿 이하 채용 공통 헤더를 줄바꿈 구조로 정의한다. */
@media (max-width: 1023px) {
    .job-header-inner {
        display: flex;
        flex-wrap: wrap;
        height: auto;
        padding: 0 16px;
    }

    .job-header-brand {
        order: 1;
        padding: 10px 0;
    }

    .job-header-logo {
        padding: 0;
    }

    .job-header-user {
        order: 2;
        margin-left: auto;
        padding: 10px 0;
    }

    .job-header-nav-wrap {
        order: 3;
        flex: 0 0 100%;
        width: 100%;
        overflow-x: auto;
    }

    .job-header-nav-inner {
        padding: 0;
    }

    .job-header-nav {
        justify-content: flex-start;
        gap: 22px;
        min-height: 48px;
        width: max-content;
        min-width: 100%;
    }

    .job-header-nav-tab {
        flex: 0 0 auto;
        min-height: 48px;
        padding: 0;
        font-size: 13px;
    }

    .job-header-create-menu-wrap {
        flex: 0 0 auto;
        min-height: 48px;
    }

    .job-site-footer {
        padding: 28px 16px 34px;
    }

    .job-footer-inner {
        display: block;
        padding: 0;
    }

    .job-footer-links,
    .job-footer-info {
        justify-content: flex-start;
    }

    .job-footer-links {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 24px;
    }

    .job-footer-menu-group {
        gap: 6px;
    }

    .job-footer-copyright {
        text-align: left;
    }
}

/* 기업회원 샘플 화면의 공통 본문 폭과 여백을 정의합니다. */
.company-sample-page-shell {
    padding-bottom: var(--space-60);
}

/* 기업회원 샘플 화면의 제목과 보조 문구를 정렬합니다. */
.company-sample-header {
    align-items: flex-start;
}

/* 기업회원 샘플 화면의 보조 설명 문구를 정의합니다. */
.company-sample-subtitle {
    margin: 10px 0 0;
    color: var(--job-color-text-light);
    font-size: 14px;
    line-height: 1.6;
}

/* 기업회원 샘플 화면의 요약 카드 묶음을 정의합니다. */
.company-sample-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

/* 기업회원 제안 상태 KPI를 데스크톱에서 한 행에 배치합니다. */
.company-suggestion-summary-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* 프리랜서 제안 관리 화면의 제목 보조 설명을 정의합니다. */
.company-suggestion-page-desc,
.company-talent-page-desc {
    margin: 10px 0 0;
    color: var(--job-color-text-light);
    font-size: 14px;
    line-height: 1.6;
}

/* 프리랜서 제안 관리 화면의 검색 입력 폭을 정의합니다. */
.company-suggestion-search-field {
    width: min(320px, 32vw);
}

/* 프리랜서 제안 관리 화면의 검색 입력을 가로 폭에 맞춥니다. */
.company-suggestion-search-field .input-freemode {
    width: 100%;
}

/* 프리랜서 제안 관리 화면의 정렬 선택 폭을 정의합니다. */
.company-suggestion-sort-field .select-freemode {
    min-width: 150px;
}

/* 프리랜서 제안 관리 화면의 검색과 정렬 도구가 좁은 폭에서 줄바꿈되도록 합니다. */
.company-suggestion-page .career-project-result-controls {
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* 기업회원 샘플 화면의 요약 카드를 정의합니다. */
.company-sample-summary-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 96px;
    padding: 20px;
    border: 1px solid var(--job-color-border);
    border-radius: var(--k-radius-sm);
    background-color: var(--k-bg-white);
}

/* 선택 가능한 요약 카드의 기본 상호작용을 정의합니다. */
button.company-sample-summary-card {
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

/* 선택 가능한 요약 카드의 호버와 선택 상태를 표시합니다. */
button.company-sample-summary-card:hover,
button.company-sample-summary-card.is-active {
    border-color: var(--career-primary);
}

/* 선택된 요약 카드의 라벨과 값을 주요 색상으로 강조합니다. */
button.company-sample-summary-card.is-active span,
button.company-sample-summary-card.is-active strong {
    color: var(--career-primary);
}

/* 키보드로 선택 가능한 요약 카드의 초점 위치를 표시합니다. */
button.company-sample-summary-card:focus-visible {
    outline: 2px solid var(--career-primary);
    outline-offset: 2px;
}

/* 기업회원 샘플 화면의 요약 카드 라벨을 정의합니다. */
.company-sample-summary-card span {
    color: var(--job-color-text-light);
    font-size: 13px;
    font-weight: 500;
}

/* 기업회원 샘플 화면의 요약 카드 값을 정의합니다. */
.company-sample-summary-card strong {
    color: var(--ref-ink);
    font-size: 26px;
    font-weight: 800;
}

/* 기업 인재관리 단계 KPI를 데스크톱에서 네 열로 배치합니다. */
.company-talent-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 기업 인재관리 검색과 비교 조건 필터 영역을 정의합니다. */
.company-talent-filter-panel {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px;
    padding: 20px;
    border: 1px solid var(--job-color-border);
    border-radius: var(--k-radius-sm);
    background-color: var(--ref-bg-base);
}

/* 기업 인재관리 필터 라벨과 입력을 세로로 정렬합니다. */
.company-talent-filter-panel > label {
    display: grid;
    grid-column: span 2;
    gap: 8px;
    min-width: 0;
}

/* 기업 인재관리 통합 검색 입력은 비교 필터 두 칸 너비를 사용합니다. */
.company-talent-filter-panel > .company-talent-search-field {
    grid-column: span 4;
}

/* 기업 인재관리 필터 라벨을 공통 본문 위계로 표시합니다. */
.company-talent-filter-panel label > span,
.company-talent-sort-field > span {
    color: var(--job-color-text);
    font-size: 13px;
    font-weight: 600;
}

/* 기업 인재관리 필터 입력과 선택 너비를 통일합니다. */
.company-talent-filter-panel .input-freemode,
.company-talent-filter-panel .select-freemode {
    width: 100%;
}

/* 기업 인재관리 필터 행동 버튼을 우측에 정렬합니다. */
.company-talent-filter-actions {
    display: flex;
    grid-column: 1 / -1;
    justify-content: flex-end;
    gap: 8px;
}

/* 기업 인재관리 정렬 라벨과 선택을 한 줄로 배치합니다. */
.company-talent-sort-field {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 기업 인재관리 목록 카드 간격을 정의합니다. */
.company-talent-list {
    display: grid;
    gap: 12px;
}

/* 기업 인재관리의 프리랜서 비교 카드를 정의합니다. */
.company-talent-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 24px;
    align-items: stretch;
    padding: 22px 24px;
    border: 1px solid var(--job-color-border);
    border-radius: var(--k-radius-sm);
    background-color: var(--k-bg-white);
}

/* 비공개 프리랜서 카드를 보조 표면색으로 구분합니다. */
.company-talent-card.is-closed {
    background-color: var(--ref-bg-base);
}

/* 기업 인재관리 카드의 주요 정보를 세로로 정렬합니다. */
.company-talent-card-main {
    display: grid;
    gap: 16px;
    min-width: 0;
}

/* 기업 인재관리 카드의 프로필 정보를 정렬합니다. */
.company-talent-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

/* 기업 인재관리 카드의 이름과 프로필 요약 영역을 정의합니다. */
.company-talent-identity {
    min-width: 0;
}

/* 기업 인재관리 카드의 프리랜서 이름을 주요 정보로 표시합니다. */
.company-talent-name {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ref-ink);
    font-family: inherit;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.4;
    text-align: left;
}

/* 이동 가능한 인재 이름 버튼에 상호작용 커서를 적용합니다. */
button.company-talent-name {
    cursor: pointer;
}

/* 기업 인재관리 카드의 전문분야와 경력 문구를 정의합니다. */
.company-talent-identity p {
    margin: 4px 0 0;
    color: var(--job-color-text);
    font-size: 14px;
    line-height: 1.5;
}

/* 기업 인재관리 카드의 기술 태그 간격을 정의합니다. */
.company-talent-skill-list {
    margin-top: 10px;
}

/* 기업 인재관리 카드의 비교 조건을 네 열로 배치합니다. */
.company-talent-condition-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 14px 0;
    border-top: 1px solid var(--job-color-border);
    border-bottom: 1px solid var(--job-color-border);
}

/* 기업 인재관리 카드의 비교 조건 항목을 구분합니다. */
.company-talent-condition-grid > div {
    min-width: 0;
    padding: 0 14px;
    border-right: 1px solid var(--job-color-border);
}

/* 기업 인재관리 카드의 첫 비교 조건 왼쪽 여백을 제거합니다. */
.company-talent-condition-grid > div:first-child {
    padding-left: 0;
}

/* 기업 인재관리 카드의 마지막 비교 조건 구분선을 제거합니다. */
.company-talent-condition-grid > div:last-child {
    padding-right: 0;
    border-right: 0;
}

/* 기업 인재관리 카드의 비교 조건 라벨을 정의합니다. */
.company-talent-condition-grid dt {
    margin-bottom: 5px;
    color: var(--job-color-text-light);
    font-size: 12px;
}

/* 기업 인재관리 카드의 비교 조건 값을 정의합니다. */
.company-talent-condition-grid dd {
    overflow: hidden;
    margin: 0;
    color: var(--ref-ink);
    font-size: 14px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 기업 인재관리 카드의 비공개 안내를 정의합니다. */
.company-talent-private-notice {
    margin: 0;
    padding: 14px 16px;
    border-radius: var(--k-radius-sm);
    background-color: var(--k-bg-gray-light);
    color: var(--job-color-text-light);
    font-size: 13px;
}

/* 기업 인재관리 카드의 기업 메모 미리보기를 정의합니다. */
.company-talent-memo-preview {
    display: flex;
    gap: 10px;
    min-width: 0;
    margin: 0;
    color: var(--job-color-text);
    font-size: 13px;
}

/* 기업 인재관리 카드의 기업 메모 라벨을 고정합니다. */
.company-talent-memo-preview strong {
    flex: 0 0 auto;
    color: var(--ref-ink);
}

/* 기업 인재관리 카드의 기업 메모 본문을 한 줄로 표시합니다. */
.company-talent-memo-preview span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 기업 인재관리 카드의 저장·연락·제안 일자를 정렬합니다. */
.company-talent-date-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    color: var(--job-color-text-light);
    font-size: 12px;
}

/* 기업 인재관리 카드의 단계와 행동 영역을 정의합니다. */
.company-talent-card-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 20px;
    border-left: 1px solid var(--job-color-border);
}

/* 기업 인재관리 카드의 관리 단계와 제안 상태를 정렬합니다. */
.company-talent-status-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: auto;
}

/* 기업 인재관리 카드의 행동 버튼 폭을 통일합니다. */
.company-talent-card-side .btn-freemode {
    justify-content: center;
    width: 100%;
}

/* 우측 인재 관리 패널이 열렸을 때 본문 스크롤을 제한합니다. */
body.company-talent-drawer-open {
    overflow: hidden;
}

/* 우측 인재 관리 패널의 화면 덮개를 정의합니다. */
.company-talent-drawer-overlay {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: none;
    justify-content: flex-end;
    background-color: var(--k-overlay-dark-45);
}

/* 우측 인재 관리 패널의 열린 상태를 정의합니다. */
.company-talent-drawer-overlay.active {
    display: flex;
}

/* 우측 인재 관리 패널 본체를 정의합니다. */
.company-talent-drawer {
    display: flex;
    flex-direction: column;
    width: min(520px, 100%);
    height: 100%;
    background-color: var(--k-bg-white);
    box-shadow: var(--k-shadow-modal);
}

/* 우측 인재 관리 패널 헤더를 정의합니다. */
.company-talent-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    border-bottom: 1px solid var(--job-color-border);
}

/* 우측 인재 관리 패널의 보조 제목을 정의합니다. */
.company-talent-drawer-header span {
    display: block;
    margin-bottom: 4px;
    color: var(--job-color-text-light);
    font-size: 12px;
}

/* 우측 인재 관리 패널 제목을 정의합니다. */
.company-talent-drawer-header h3,
.company-talent-drawer-header strong {
    display: block;
    margin: 0;
    color: var(--ref-ink);
    font-size: 20px;
    font-weight: 800;
}

/* 우측 인재 관리 패널 닫기 버튼을 정의합니다. */
.company-talent-drawer-close,
.company-talent-drawer-header > button {
    display: inline-flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--job-color-border);
    border-radius: var(--k-radius-sm);
    background-color: var(--k-bg-white);
    color: var(--job-color-text);
    cursor: pointer;
}

/* 우측 인재 관리 패널의 스크롤 본문을 정의합니다. */
.company-talent-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 24px;
}

/* 우측 인재 관리 패널의 프리랜서 프로필을 정렬합니다. */
.company-talent-drawer-profile {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

/* 우측 인재 관리 패널의 프리랜서 이름을 정의합니다. */
.company-talent-drawer-profile > div > strong {
    color: var(--ref-ink);
    font-size: 18px;
    font-weight: 800;
}

/* 우측 인재 관리 패널의 프리랜서 요약을 정의합니다. */
.company-talent-drawer-profile p {
    margin: 4px 0 0;
    color: var(--job-color-text);
    font-size: 14px;
}

/* 우측 인재 관리 패널의 정보 구획을 정의합니다. */
.company-talent-drawer-section {
    margin-bottom: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--job-color-border);
}

/* 우측 인재 관리 패널의 구획 제목을 정의합니다. */
.company-talent-drawer-section h4 {
    margin: 0 0 14px;
    color: var(--ref-ink);
    font-size: 15px;
    font-weight: 700;
}

/* 우측 인재 관리 패널의 구획 제목과 상태를 정렬합니다. */
.company-talent-drawer-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

/* 상태가 함께 있는 우측 패널 구획 제목의 아래 여백을 제거합니다. */
.company-talent-drawer-section-head h4 {
    margin-bottom: 0;
}

/* 우측 인재 관리 패널의 최근 제안 제목을 정의합니다. */
.company-talent-latest-offer-title {
    display: block;
    margin-bottom: 10px;
    color: var(--ref-ink);
    font-size: 14px;
}

/* 우측 인재 관리 패널의 빈 최근 제안 안내를 정의합니다. */
.company-talent-drawer-empty {
    margin: 0;
    color: var(--job-color-text-light);
    font-size: 13px;
}

/* 우측 인재 관리 패널의 제안 관리 링크를 정의합니다. */
.company-talent-offer-history-link {
    display: inline-flex;
    margin-top: 12px;
    color: var(--career-primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

/* 우측 인재 관리 패널의 입력 너비를 통일합니다. */
.company-talent-drawer .select-freemode,
.company-talent-drawer .input-freemode {
    width: 100%;
}

/* 우측 인재 관리 패널의 프로필·제안 링크를 두 열로 배치합니다. */
.company-talent-drawer-link-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

/* 우측 인재 관리 패널의 링크 행동을 가운데 정렬합니다. */
.company-talent-drawer-link-actions .btn-freemode {
    justify-content: center;
}

/* 우측 인재 관리 패널 하단 저장 행동을 정의합니다. */
.company-talent-drawer-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 18px 24px;
    border-top: 1px solid var(--job-color-border);
    background-color: var(--k-bg-white);
}

/* 스타일 가이드에서 인재관리 카드와 패널을 함께 비교합니다. */
.style-guide-company-talent-preview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;
    margin-bottom: 28px;
}

/* 스타일 가이드의 인재 관리 패널을 독립 미리보기 크기로 표시합니다. */
.style-guide-company-talent-drawer {
    width: 100%;
    height: auto;
    min-height: 520px;
    border: 1px solid var(--job-color-border);
    border-radius: var(--k-radius-sm);
    box-shadow: none;
}

/* 스타일 가이드 인재 관리 패널 본문을 미리보기 높이에 맞춥니다. */
.style-guide-company-talent-drawer .company-talent-drawer-body {
    overflow: visible;
}

/* 기업회원 제안 목록의 카드 목록 간격을 정의합니다. */
.company-suggestion-list {
    display: grid;
    gap: 12px;
}

/* 기업회원 제안 목록의 개별 제안 카드를 정의합니다. */
.company-suggestion-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 24px;
    align-items: center;
    padding: 22px 24px;
    border: 1px solid var(--job-color-border);
    border-radius: var(--k-radius-sm);
    background-color: var(--k-bg-white);
}

/* 종료된 제안 카드의 배경을 보조 색상으로 구분합니다. */
.company-suggestion-card.is-closed {
    background-color: var(--ref-bg-base);
}

/* 기업회원 제안 카드의 주요 정보 영역을 정의합니다. */
.company-suggestion-main {
    display: grid;
    gap: 18px;
    min-width: 0;
}

/* 기업회원 제안 카드의 프리랜서 프로필 정보를 정렬합니다. */
.company-suggestion-freelancer {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

/* 기업회원 제안 카드의 프리랜서 아바타를 정의합니다. */
.company-suggestion-avatar,
.company-talent-avatar {
    display: inline-flex;
    flex: 0 0 56px;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border: 1px solid var(--job-color-border);
    border-radius: var(--k-radius-pill);
    background-color: var(--k-bg-gray-light);
    color: var(--ref-ink);
    font-size: 20px;
    font-weight: 700;
}

/* 기업회원 제안 카드의 프리랜서 프로필 이미지를 채웁니다. */
.company-suggestion-avatar img,
.company-talent-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 기업회원 제안 카드의 프리랜서 기본 정보 영역을 정의합니다. */
.company-suggestion-identity {
    min-width: 0;
}

/* 기업회원 제안 카드의 프리랜서 이름을 주요 정보로 표시합니다. */
.company-suggestion-talent-name {
    display: inline-flex;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ref-ink);
    font-family: inherit;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.4;
    text-align: left;
}

/* 이동 가능한 프리랜서 이름 버튼의 상호작용을 정의합니다. */
button.company-suggestion-talent-name {
    cursor: pointer;
}

/* 기업회원 제안 카드의 프리랜서 전문분야와 경력을 정의합니다. */
.company-suggestion-identity p,
.company-suggestion-identity > span {
    display: block;
    margin: 4px 0 0;
    color: var(--job-color-text);
    font-size: 14px;
    line-height: 1.5;
}

/* 기업회원 제안 카드의 기술 및 활동 조건 태그를 정렬합니다. */
.company-suggestion-skill-list,
.company-talent-skill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

/* 기업회원 제안 카드의 기술 및 활동 조건 태그를 정의합니다. */
.company-suggestion-skill-list span,
.company-talent-skill-list span {
    padding: 4px 8px;
    border-radius: var(--k-radius-pill);
    background-color: var(--k-bg-gray-light);
    color: var(--job-color-text);
    font-size: 12px;
    line-height: 1.4;
}

/* 기업회원 제안 카드에서 연결 프로젝트를 보조 정보로 구분합니다. */
.company-suggestion-offer-context {
    padding-top: 16px;
    border-top: 1px solid var(--job-color-border);
}

/* 기업회원 제안 카드의 프로젝트 유형과 연결 공고를 정렬합니다. */
.company-suggestion-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

/* 기업회원 제안 카드의 프로젝트 유형 배지를 정의합니다. */
.company-suggestion-type {
    display: inline-flex;
    padding: 4px 9px;
    border-radius: var(--k-radius-pill);
    background-color: var(--k-bg-job-subtle);
    color: var(--ref-ink);
    font-size: 12px;
    font-weight: 700;
}

/* 기업회원 제안 카드의 연결 프로젝트 링크를 정의합니다. */
.company-suggestion-project-link {
    overflow: hidden;
    color: var(--job-color-text);
    font-size: 13px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 직접 제안 문구는 링크가 아님을 구분합니다. */
.company-suggestion-project-link.is-disabled {
    color: var(--job-color-text-light);
}

/* 기업회원 제안 카드의 상단 배지를 정렬합니다. */
.company-suggestion-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

/* 기업회원 샘플 화면의 유형 배지를 정의합니다. */
.company-sample-type-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 10px;
    border-radius: var(--k-radius-pill);
    background-color: var(--ref-bg-base);
    color: var(--ref-ink);
    font-size: 12px;
    font-weight: 700;
}

/* 기업회원 샘플 화면의 상태 배지를 정의합니다. */
.company-sample-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 10px;
    border-radius: var(--k-radius-pill);
    background-color: var(--k-bg-gray-light);
    color: var(--job-color-text);
    font-size: 12px;
    font-weight: 700;
}

/* 기업회원 샘플 화면의 대기 상태를 정의합니다. */
.company-sample-status.is-waiting {
    background-color: var(--k-bg-job-subtle);
    color: var(--ref-ink);
}

/* 기업회원 샘플 화면의 검토중 상태를 정의합니다. */
.company-sample-status.is-reviewing,
.company-sample-type-badge.is-interview {
    background-color: var(--ref-bg-base);
    color: var(--ref-logo-coral);
}

/* 기업회원 샘플 화면의 수락 상태를 정의합니다. */
.company-sample-status.is-accepted,
.company-sample-type-badge.is-contract {
    background-color: var(--k-bg-gray-light);
    color: var(--customer-completed);
}

/* 기업회원 샘플 화면의 거절 상태를 정의합니다. */
.company-sample-status.is-declined,
.company-sample-type-badge.is-deadline {
    background-color: var(--k-bg-danger-soft-100);
    color: var(--k-color-red-700);
}

/* 기업회원 샘플 화면의 만료 상태를 정의합니다. */
.company-sample-status.is-expired {
    background-color: var(--k-bg-gray-light);
    color: var(--job-color-text-light);
}

/* 기업회원 샘플 화면의 제안 유형 표시를 정의합니다. */
.company-sample-type-badge.is-suggestion {
    background-color: var(--k-bg-job-subtle);
    color: var(--ref-ink);
}

/* 기업회원 제안 카드의 제안 제목을 정의합니다. */
.company-suggestion-title {
    display: block;
    width: 100%;
    margin: 0;
    color: var(--ref-ink);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
}

/* 기업회원 제안 카드의 제안 요약 문구를 정의합니다. */
.company-suggestion-summary {
    display: -webkit-box;
    overflow: hidden;
    margin: 8px 0 0;
    color: var(--job-color-text);
    font-size: 14px;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* 기업회원 제안 카드의 금액과 기간 및 업무 조건을 정렬합니다. */
.company-suggestion-condition-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 12px;
    color: var(--job-color-text-light);
    font-size: 13px;
}

/* 기업회원 제안 카드의 조건 라벨과 값을 구분합니다. */
.company-suggestion-condition-list span {
    display: inline-flex;
    gap: 6px;
}

/* 기업회원 제안 카드의 조건 라벨을 강조합니다. */
.company-suggestion-condition-list strong {
    color: var(--job-color-text);
    font-weight: 600;
}

/* 기업회원 제안 카드의 처리 일자 목록을 정렬합니다. */
.company-suggestion-date-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0;
}

/* 기업회원 제안 카드의 처리 일자 항목을 한 줄로 표시합니다. */
.company-suggestion-date-list > div {
    display: inline-flex;
    gap: 6px;
    font-size: 13px;
}

/* 기업회원 제안 카드의 처리 일자 라벨을 정의합니다. */
.company-suggestion-date-list dt {
    color: var(--job-color-text-light);
}

/* 기업회원 제안 카드의 처리 일자 값을 정의합니다. */
.company-suggestion-date-list dd {
    margin: 0;
    color: var(--ref-ink);
    font-weight: 600;
}

/* 기업회원 제안 카드의 대상 공고 문구를 정의합니다. */
.company-suggestion-target {
    margin-top: 8px;
    color: var(--job-color-text);
    font-size: 14px;
}

/* 기업회원 제안 카드의 메타 정보 묶음을 정의합니다. */
.company-suggestion-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 14px;
    color: var(--job-color-text-light);
    font-size: 13px;
}

/* 기업회원 제안 카드의 메타 항목을 정렬합니다. */
.company-suggestion-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* 기업회원 제안 카드의 액션 영역을 정의합니다. */
.company-suggestion-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

/* 기업회원 제안 카드의 상태와 확인 여부를 정렬합니다. */
.company-suggestion-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

/* 기업회원 제안 카드의 확인 여부를 정의합니다. */
.company-suggestion-read-state {
    color: var(--job-color-text-light);
    font-size: 12px;
}

/* 기업회원 제안 카드의 행동 버튼 폭을 통일합니다. */
.company-suggestion-actions .btn-freemode {
    justify-content: center;
    width: 100%;
}

/* 기업회원 제안 카드의 조건 문구를 정의합니다. */
.company-suggestion-actions strong {
    color: var(--ref-ink);
    font-size: 14px;
    font-weight: 700;
    text-align: right;
}

/* 기업회원 샘플 모달 외곽 표시 상태를 정의합니다. */
.company-sample-modal-overlay.active {
    display: flex;
}

/* 기업회원 샘플 모달의 폭을 정의합니다. */
.company-sample-modal {
    max-width: 560px;
}

/* 기업회원 샘플 모달 헤더를 정의합니다. */
.company-sample-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

/* 기업회원 샘플 모달 제목을 정의합니다. */
.company-sample-modal-header h3 {
    margin: 0;
}

/* 기업회원 샘플 모달 닫기 버튼을 정의합니다. */
.company-sample-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--job-color-border);
    border-radius: var(--k-radius-sm);
    background-color: var(--k-bg-white);
    color: var(--job-color-text);
    cursor: pointer;
}

/* 기업회원 샘플 모달 본문을 정의합니다. */
.company-sample-modal-body {
    display: grid;
    gap: 10px;
}

/* 기업회원 샘플 상세 행을 정의합니다. */
.company-sample-detail-row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--job-color-border);
}

/* 기업회원 샘플 상세 행 라벨을 정의합니다. */
.company-sample-detail-row span {
    color: var(--job-color-text-light);
    font-size: 13px;
}

/* 기업회원 샘플 상세 행 값을 정의합니다. */
.company-sample-detail-row strong {
    color: var(--ref-ink);
    font-size: 14px;
    font-weight: 600;
}

/* 기업회원 샘플 상세 메시지 영역을 정의합니다. */
.company-sample-detail-message {
    margin-top: 8px;
    padding: 16px;
    border-radius: var(--k-radius-sm);
    background-color: var(--ref-bg-base);
    color: var(--job-color-text);
    font-size: 14px;
    line-height: 1.7;
}

/* 기업회원 제안 상세와 답변 모달의 내용 구획을 정의합니다. */
.company-suggestion-modal-section {
    margin-top: 10px;
}

/* 기업회원 제안 상세와 답변 모달의 내용 제목을 정의합니다. */
.company-suggestion-modal-section > strong {
    color: var(--ref-ink);
    font-size: 14px;
    font-weight: 700;
}

/* 기업회원 일정 관리 화면의 전체 배치를 정의합니다. */
.company-schedule-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}

/* 기업회원 일정 관리 캘린더 영역을 정의합니다. */
.company-schedule-calendar-section,
.company-schedule-side {
    border: 1px solid var(--job-color-border);
    border-radius: var(--k-radius-sm);
    background-color: var(--k-bg-white);
}

/* 기업회원 일정 관리 도구막대를 정의합니다. */
.company-schedule-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 22px;
    border-bottom: 1px solid var(--job-color-border);
}

/* 기업회원 일정 관리 월 표시를 정의합니다. */
.company-schedule-toolbar strong {
    min-width: 140px;
    color: var(--ref-ink);
    font-size: 20px;
    font-weight: 800;
    text-align: center;
}

/* 기업회원 일정 관리 이전/다음 버튼을 정의합니다. */
.company-schedule-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--job-color-border);
    border-radius: var(--k-radius-sm);
    background-color: var(--k-bg-white);
    color: var(--job-color-text);
    cursor: pointer;
}

/* 기업회원 일정 관리 필터를 정의합니다. */
.company-schedule-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--job-color-border);
}

/* 기업회원 일정 관리 캘린더 그리드를 정의합니다. */
.company-schedule-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* 기업회원 일정 관리 요일 셀을 정의합니다. */
.company-schedule-week {
    padding: 14px 8px;
    border-bottom: 1px solid var(--job-color-border);
    color: var(--job-color-text-light);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

/* 기업회원 일정 관리 날짜 묶음을 정의합니다. */
.company-schedule-days {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* 기업회원 일정 관리 날짜 셀을 정의합니다. */
.company-schedule-day {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-height: 112px;
    padding: 12px;
    border: 0;
    border-right: 1px solid var(--job-color-border);
    border-bottom: 1px solid var(--job-color-border);
    background-color: var(--k-bg-white);
    color: var(--job-color-text);
    text-align: left;
    cursor: pointer;
}

/* 기업회원 일정 관리 비어있는 날짜 셀을 정의합니다. */
.company-schedule-day.is-empty {
    background-color: var(--ref-bg-base);
    cursor: default;
}

/* 기업회원 일정 관리 선택 날짜 셀을 정의합니다. */
.company-schedule-day.is-selected {
    background-color: var(--k-bg-job-subtle);
    box-shadow: inset 0 0 0 2px var(--ref-logo-coral);
}

/* 기업회원 일정 관리 날짜 숫자를 정의합니다. */
.company-schedule-day-number {
    color: var(--ref-ink);
    font-size: 14px;
    font-weight: 700;
}

/* 기업회원 일정 관리 날짜 이벤트 표시 영역을 정의합니다. */
.company-schedule-day-events {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* 기업회원 일정 관리 이벤트 점을 정의합니다. */
.company-schedule-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--k-radius-pill);
    background-color: var(--ref-logo-coral);
}

/* 기업회원 일정 관리 제안 이벤트 점을 정의합니다. */
.company-schedule-dot.is-suggestion {
    background-color: var(--ref-ink);
}

/* 기업회원 일정 관리 면접 이벤트 점을 정의합니다. */
.company-schedule-dot.is-interview {
    background-color: var(--ref-logo-coral);
}

/* 기업회원 일정 관리 계약 이벤트 점을 정의합니다. */
.company-schedule-dot.is-contract {
    background-color: var(--customer-completed);
}

/* 기업회원 일정 관리 마감 이벤트 점을 정의합니다. */
.company-schedule-dot.is-deadline {
    background-color: var(--k-color-red-700);
}

/* 기업회원 일정 관리 사이드 영역 헤더를 정의합니다. */
.company-schedule-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 22px;
    border-bottom: 1px solid var(--job-color-border);
}

/* 기업회원 일정 관리 사이드 영역 라벨을 정의합니다. */
.company-schedule-side-head span {
    color: var(--job-color-text-light);
    font-size: 13px;
    font-weight: 600;
}

/* 기업회원 일정 관리 사이드 영역 날짜를 정의합니다. */
.company-schedule-side-head strong {
    color: var(--ref-ink);
    font-size: 15px;
    font-weight: 800;
}

/* 기업회원 일정 관리 일정 목록을 정의합니다. */
.company-schedule-event-list {
    display: grid;
    gap: 10px;
    padding: 18px;
}

/* 기업회원 일정 관리 일정 카드를 정의합니다. */
.company-schedule-event-card {
    display: grid;
    gap: 10px;
    width: 100%;
    padding: 16px;
    border: 1px solid var(--job-color-border);
    border-radius: var(--k-radius-sm);
    background-color: var(--k-bg-white);
    color: var(--job-color-text);
    text-align: left;
    cursor: pointer;
}

/* 기업회원 일정 관리 일정 제목을 정의합니다. */
.company-schedule-event-card strong {
    color: var(--ref-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
}

/* 기업회원 일정 관리 일정 보조 문구를 정의합니다. */
.company-schedule-event-card span:last-child {
    color: var(--job-color-text-light);
    font-size: 13px;
}

/* 기업회원 일정 관리 빈 일정 문구를 정의합니다. */
.company-schedule-empty {
    padding: 32px 14px;
    color: var(--job-color-text-light);
    font-size: 14px;
    text-align: center;
}

/* 기업회원 면접 관리의 주요 메뉴를 본문과 분리합니다. */
.company-interview-primary-tabs {
    margin-bottom: 28px;
}

/* 기업회원 면접 관리에서 선택되지 않은 패널을 제외합니다. */
.company-interview-panel[hidden] {
    display: none;
}

/* 기업회원 면접 관리 패널의 필터와 주요 행동을 한 행에 배치합니다. */
.company-interview-panel-toolbar,
.company-interview-list-toolbar {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* 면접 관리 패널 내부 필터의 기존 카드 구분선을 제거합니다. */
.company-interview-panel-toolbar .company-schedule-filter,
.company-interview-list-toolbar .company-schedule-filter {
    padding: 0;
    border-bottom: 0;
}

/* 면접 관리의 오늘 이동 버튼을 공통 외곽선 버튼 형태로 정의합니다. */
.company-schedule-today-btn {
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--job-color-border);
    border-radius: var(--k-radius-sm);
    background-color: var(--k-bg-white);
    color: var(--job-color-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* TUI Calendar가 표시되는 면접 달력의 높이와 내부 여백을 정의합니다. */
.company-interview-calendar {
    height: 680px;
    padding: 20px;
}

/* TUI Calendar의 전체 글꼴을 커리어모드 공통 글꼴로 통일합니다. */
.company-interview-calendar .toastui-calendar-layout {
    background-color: var(--k-bg-white);
    font-family: var(--k-font-primary);
}

/* 면접 달력의 요일과 날짜 글자를 공통 본문 위계로 표시합니다. */
.company-interview-calendar .toastui-calendar-day-name-item,
.company-interview-calendar .toastui-calendar-grid-cell-date {
    color: var(--job-color-text);
    font-size: 13px;
}

/* 면접 달력의 요일 머리말 간격을 정의합니다. */
.company-interview-calendar .toastui-calendar-day-name-item {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* TUI Calendar의 월간 날짜와 일정에 포인터 동작을 표시합니다. */
.company-interview-calendar .toastui-calendar-daygrid-cell,
.company-interview-calendar .toastui-calendar-weekday-event {
    cursor: pointer;
}

/* TUI Calendar의 오늘 날짜를 공통 보조 배경으로 강조합니다. */
.company-interview-calendar .toastui-calendar-weekday-grid-date-decorator {
    background-color: var(--career-primary);
    color: var(--k-bg-white);
}

/* TUI Calendar 면접 일정의 글자와 모서리를 공통 규격으로 정의합니다. */
.company-interview-calendar .toastui-calendar-weekday-event-block,
.company-interview-calendar .toastui-calendar-weekday-event {
    border-radius: var(--k-radius-sm);
    font-size: 12px;
}

/* TUI Calendar의 더보기 레이어가 화면 본문 위에 표시되도록 정의합니다. */
.company-interview-calendar .toastui-calendar-floating-layer {
    z-index: var(--k-z-dropdown);
}

/* 지원자와 후보자 진행 상태 선택기를 한 행으로 정렬합니다. */
.company-interview-status-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--job-color-text-light);
    font-size: 13px;
}

/* 지원자와 후보자 진행 상태 선택기의 폭을 정의합니다. */
.company-interview-status-filter .select-freemode {
    width: 132px;
}

/* 면접일 flatpickr가 표준 모달보다 위에 표시되도록 정의합니다. */
.company-interview-management-page .flatpickr-calendar {
    z-index: var(--k-z-modal);
}

/* 면접 등록과 결과 입력 필드를 2열로 배치합니다. */
.company-interview-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
}

/* 면접 등록과 결과 입력의 개별 필드를 세로로 배치합니다. */
.company-interview-form-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--k-space-form-label);
}

/* 면접 등록과 결과 입력에서 전체 폭 필드를 정의합니다. */
.company-interview-form-field.is-full {
    grid-column: 1 / -1;
}

/* 면접 등록과 결과 입력 라벨의 위계를 정의합니다. */
.company-interview-form-field > span {
    color: var(--ref-ink);
    font-size: 14px;
    font-weight: 600;
}

/* 면접 등록과 결과 입력의 긴 메모 입력 높이를 정의합니다. */
.company-interview-form-field textarea.input-freemode {
    min-height: 112px;
    padding-top: 12px;
    resize: vertical;
}

/* 면접 등록과 결과 입력 검증 문구 영역을 정의합니다. */
.company-interview-form-error {
    min-height: 20px;
    margin: 12px 0 0;
    color: var(--k-color-red-700);
    font-size: 13px;
}

/* 면접 관리 샘플 안내와 마지막 목록 사이의 간격을 정의합니다. */
.company-interview-notice {
    margin-top: 28px;
}

@media (max-width: 960px) {
    /* 기업회원 샘플 화면의 요약 카드를 태블릿 폭에서 2열로 전환합니다. */
    .company-sample-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 기업회원 제안 상태 KPI를 태블릿 폭에서 3열로 전환합니다. */
    .company-suggestion-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* 기업 인재관리 필터를 태블릿 폭에서 두 행으로 배치합니다. */
    .company-talent-filter-panel > label {
        grid-column: span 3;
    }

    /* 기업 인재관리 통합 검색 입력을 태블릿 폭에서 절반 너비로 표시합니다. */
    .company-talent-filter-panel > .company-talent-search-field {
        grid-column: span 6;
    }

    /* 기업 인재관리 카드를 태블릿 폭에서 단일 컬럼으로 전환합니다. */
    .company-talent-card {
        grid-template-columns: 1fr;
    }

    /* 기업 인재관리 카드 행동을 태블릿 폭에서 가로 배치합니다. */
    .company-talent-card-side {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding-top: 18px;
        padding-left: 0;
        border-top: 1px solid var(--job-color-border);
        border-left: 0;
    }

    /* 기업 인재관리 상태는 태블릿 카드 행동 위 한 행을 사용합니다. */
    .company-talent-status-list {
        grid-column: 1 / -1;
        margin-bottom: 6px;
    }

    /* 스타일 가이드 인재관리 미리보기를 태블릿 폭에서 단일 열로 전환합니다. */
    .style-guide-company-talent-preview {
        grid-template-columns: 1fr;
    }

    /* 기업회원 제안 카드를 태블릿 폭에서 단일 컬럼으로 전환합니다. */
    .company-suggestion-card {
        grid-template-columns: 1fr;
    }

    /* 기업회원 제안 카드의 액션 영역을 태블릿 폭에서 가로 배치합니다. */
    .company-suggestion-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
    }

    /* 기업회원 제안 카드의 상태 영역을 태블릿 폭에서 한 행으로 유지합니다. */
    .company-suggestion-state {
        grid-column: 1 / -1;
    }

    /* 기업회원 일정 관리 화면을 태블릿 폭에서 단일 컬럼으로 전환합니다. */
    .company-schedule-layout {
        grid-template-columns: 1fr;
    }

    /* 면접 관리 패널의 필터와 행동을 태블릿 폭에서 줄바꿈합니다. */
    .company-interview-panel-toolbar,
    .company-interview-list-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    /* 기업회원 샘플 화면의 요약 카드를 모바일 폭에서 단일 컬럼으로 전환합니다. */
    .company-sample-summary-grid {
        grid-template-columns: 1fr;
    }

    /* 기업회원 제안 상태 KPI를 모바일 폭에서 2열로 전환합니다. */
    .company-suggestion-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 기업 인재관리 단계 KPI를 모바일 폭에서 두 열로 유지합니다. */
    .company-talent-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 기업 인재관리 필터를 모바일 폭에서 단일 열로 전환합니다. */
    .company-talent-filter-panel > label,
    .company-talent-filter-panel > .company-talent-search-field {
        grid-column: 1 / -1;
    }

    /* 기업 인재관리 필터 행동 버튼을 모바일 폭 전체로 확장합니다. */
    .company-talent-filter-actions .btn-freemode {
        flex: 1 1 0;
        justify-content: center;
    }

    /* 기업 인재관리 카드의 모바일 안쪽 여백을 정의합니다. */
    .company-talent-card {
        padding: 18px;
    }

    /* 기업 인재관리 비교 조건을 모바일 폭에서 두 열로 배치합니다. */
    .company-talent-condition-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    /* 기업 인재관리 모바일 비교 조건의 구분선을 제거합니다. */
    .company-talent-condition-grid > div,
    .company-talent-condition-grid > div:first-child,
    .company-talent-condition-grid > div:last-child {
        padding: 0;
        border-right: 0;
    }

    /* 기업 인재관리 카드 행동을 모바일 폭에서 두 열로 배치합니다. */
    .company-talent-card-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 우측 인재 관리 패널 헤더와 본문 여백을 모바일에서 줄입니다. */
    .company-talent-drawer-header,
    .company-talent-drawer-body {
        padding: 18px;
    }

    /* 우측 인재 관리 패널 하단 행동 여백을 모바일에서 줄입니다. */
    .company-talent-drawer-actions {
        padding: 14px 18px;
    }

    /* 기업회원 제안 카드를 모바일 폭에 맞춰 압축합니다. */
    .company-suggestion-card {
        padding: 18px;
    }

    /* 기업회원 제안 카드의 액션 버튼을 모바일 폭에서 두 열로 배치합니다. */
    .company-suggestion-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 프리랜서 제안 관리 화면의 검색 입력을 모바일 폭 전체로 확장합니다. */
    .company-suggestion-search-field {
        width: 100%;
    }

    /* 프리랜서 제안 관리 화면의 검색 버튼 폭을 모바일에서 확보합니다. */
    .company-suggestion-search-button {
        flex: 1 1 auto;
    }

    /* 프리랜서 제안 관리 화면의 정렬 선택을 모바일 폭에 맞춥니다. */
    .company-suggestion-sort-field {
        flex: 1 1 auto;
    }

    /* 프리랜서 제안 관리 화면의 정렬 선택 폭을 부모 요소에 맞춥니다. */
    .company-suggestion-sort-field .select-freemode {
        width: 100%;
    }

    /* 기업회원 일정 관리 날짜 셀 높이를 모바일 폭에서 줄입니다. */
    .company-schedule-day {
        min-height: 78px;
        padding: 8px;
    }

    /* 면접 등록과 결과 입력 필드를 모바일에서 단일 열로 전환합니다. */
    .company-interview-form-grid {
        grid-template-columns: 1fr;
    }

    /* 면접 관리의 전체 폭 필드를 모바일 단일 열에 맞춥니다. */
    .company-interview-form-field.is-full {
        grid-column: auto;
    }

    /* 모바일 면접 달력의 안쪽 여백과 높이를 줄입니다. */
    .company-interview-calendar {
        height: 560px;
        padding: 12px;
    }

    /* 기업회원 샘플 상세 행을 모바일 폭에서 단일 컬럼으로 전환합니다. */
    .company-sample-detail-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}