/* 작업의뢰 화면을 협업 서비스 톤앤매너에 맞춰 정리한다. */

/* 작업의뢰 공통 레이아웃 간격과 배경을 정의한다. */
.work-request-page {
    background-color: var(--ref-bg-base);
}

/* 작업의뢰/채용/프리랜서 검색 상단 헤더와 탭 내비를 한 덩어리로 고정한다. */
.list-view-layout.job-board .job-header-shell {
    position: sticky;
    top: 0;
    z-index: var(--k-z-sticky);
}

/* 작업의뢰/채용/프리랜서 검색 고정 헤더 영역의 배경과 분리감을 유지한다. */
.list-view-layout.job-board .job-header-shell::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.94);
    /* 네이티브 셀렉트 옵션 레이어 닫힘 시 헤더 blur 합성으로 발생하는 깜빡임을 방지한다. */
    backdrop-filter: none;
    pointer-events: none;
    z-index: -1;
}

/* 작업의뢰/채용/프리랜서 검색 고정 헤더 영역 하단 경계선을 정의한다. */
.list-view-layout.job-board .job-header-shell {
    box-shadow: 0 1px 0 rgba(226, 232, 240, 0.9);
}

/* 작업의뢰 목록/폼 공통 본문 폭과 여백을 정의한다. */
.work-request-page .job-board-wrapper {
    max-width: 1200px;
    padding: 0px 0px 56px;
    box-sizing: border-box;
}

/* 작업의뢰 상세/회사소개 본문 폭과 여백을 정의한다. */
.work-request-page .job-detail-wrapper {
    max-width: 1200px;
    padding: 32px 24px 56px;
    box-sizing: border-box;
}

/* 작업의뢰 공통 페이지 타이틀 톤을 협업 화면과 맞춘다. */
.work-request-page .page-title,
.work-request-page .form-title,
.work-request-page .job-detail-title,
.work-request-page .requester-company-hero-title {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 26px;
    font-weight: 600;
    color: var(--ref-ink);
    line-height: 1.25;
    margin-top: 10px;
}

/* 작업의뢰 공통 보조 설명 문구 톤을 정의한다. */
.work-request-page .page-subtitle,
.work-request-page .work-request-public-profile-desc,
.work-request-page .work-request-form-help,
.work-request-page .setting-row-desc {
    margin: 8px 0 0;
    color: var(--ref-gray-700);
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
}

/* 작업의뢰 리스트 상단 헤더 정렬을 정의한다. */
.work-request-page .job-board-header {
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 20px;
}

/* 작업의뢰 메인 목록 헤더를 단기 채용 공고 목록과 동일한 흐름으로 정렬한다. */
.work-request-page.work-request-view-page .job-board-header {
    align-items: center;
    gap: 0;
}

/* 작업의뢰 헤더 내부 텍스트 블록 간격을 정의한다. */
.work-request-page .work-request-board-header-main {
    padding-bottom: 0;
}

/* 작업의뢰 헤더 액션 버튼 정렬을 정의한다. */

/* 작업의뢰 카테고리 탭 영역을 카드형 필터 바로 정리한다. */
.work-request-page .job-category-tabs {
    display: flex;
    gap: 8px;
    padding: 12px;
    margin-bottom: 16px;
    border: var(--k-border-thin);
    border-radius: var(--k-radius-md);
    background-color: var(--k-bg-white);
    box-shadow: var(--k-shadow-hard-sm);
    overflow-x: auto;
}

/* 작업의뢰 메인 목록 카테고리 탭을 단기 채용 공고 목록 구조와 동일하게 맞춘다. */
.work-request-page.work-request-view-page .job-category-tabs {
    gap: 0;
    padding: 0;
    margin-bottom: var(--space-24);
    border: none;
    border-bottom: 2px solid var(--job-color-border);
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

/* 작업의뢰 카테고리 버튼 기본 톤을 정의한다. */
.work-request-page .job-category-tab {
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--k-color-gray-d1);
    border-radius: var(--k-radius-pill);
    background-color: var(--k-bg-white);
    color: var(--ref-gray-700);
    font-size: 13px;
    font-weight: 500;
    transition: var(--k-transition-fast);
    white-space: nowrap;
}

/* 작업의뢰 메인 목록 카테고리 버튼을 단기 채용 공고 목록과 같은 형태로 정리한다. */
.work-request-page.work-request-view-page .job-category-tab {
    height: auto;
    padding: 10px 18px;
    border: none;
    border-bottom: 2.5px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--k-text-subtle);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: -2px;
}

/* 작업의뢰 카테고리 버튼 hover 상태를 정의한다. */
.work-request-page .job-category-tab:hover {
    border-color: var(--job-color-primary);
    color: var(--job-color-primary);
    background-color: #ecfdf5;
}

/* 작업의뢰 메인 목록 카테고리 버튼 hover 상태를 단기 채용 공고 목록과 맞춘다. */
.work-request-page.work-request-view-page .job-category-tab:hover {
    border-color: transparent;
    color: var(--job-color-text);
    background: none;
}

/* 작업의뢰 카테고리 버튼 활성 상태를 정의한다. */
.work-request-page .job-category-tab.active {
    border-color: var(--job-color-primary);
    background-color: #ecfdf5;
    color: var(--job-color-primary);
    box-shadow: none;
}

/* 작업의뢰 메인 목록 카테고리 버튼 활성 상태를 단기 채용 공고 목록과 맞춘다. */
.work-request-page.work-request-view-page .job-category-tab.active {
    border-color: transparent;
    border-bottom-color: var(--job-color-primary);
    background: none;
    color: var(--job-color-text);
    font-weight: 700;
    box-shadow: none;
}

/* 작업의뢰 검색 패널을 협업 카드 스타일로 정리한다. */
.work-request-page .job-search-section.card-freemode {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding: 18px 20px;
    margin-bottom: 18px;
    border: var(--k-border-thin);
    border-radius: var(--k-radius-md);
    box-shadow: var(--k-shadow-hard-sm);
}

/* 작업의뢰 검색 패널 좌측 정보 영역 정렬을 정의한다. */
.work-request-page .work-request-search-left {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 280px;
    flex: 1;
}

/* 작업의뢰 목록 페이지 검색 패널 좌측 영역을 가로 배치로 정렬한다. */
.work-request-page.work-request-list-page .work-request-search-left {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

/* 작업의뢰 목록 페이지 총 건수 문구가 줄바꿈되지 않도록 고정한다. */
.work-request-page.work-request-list-page .total-count-label {
    flex-shrink: 0;
}

/* 작업의뢰 총 건수 문구 톤을 정의한다. */
.work-request-page .total-count-label {
    color: var(--ref-ink);
    font-size: 14px;
    font-weight: 600;
}

/* 내 작업의뢰 상단 요약 영역의 하단 간격을 정의한다. */

/* 작업의뢰 필터 칩 배치를 정의한다. */
.work-request-page .job-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 작업의뢰 필터 칩 기본 스타일을 정의한다. */
.work-request-page .filter-chip {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--k-color-gray-d1);
    border-radius: var(--k-radius-pill);
    background-color: var(--k-bg-white);
    color: var(--ref-gray-700);
    font-size: 13px;
    font-weight: 500;
}

/* 작업의뢰 필터 칩 hover 상태를 정의한다. */
.work-request-page .filter-chip:hover {
    border-color: var(--job-color-primary);
    color: var(--job-color-primary);
    background-color: #ecfdf5;
}

/* 작업의뢰 필터 칩 활성 상태를 정의한다. */
.work-request-page .filter-chip.active {
    border-color: var(--job-color-primary);
    background-color: #ecfdf5;
    color: var(--job-color-primary);
}

/* 작업의뢰 검색 입력 묶음 레이아웃을 정의한다. */
.work-request-page .job-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 460px;
    padding: 0;
    border: none;
    background: transparent;
}

/* 작업의뢰 메인 목록 검색 입력 묶음을 단기 채용 공고 목록과 같은 하단선 구조로 맞춘다. */
.work-request-page.work-request-view-page .job-search-box {
    border-bottom: 2px solid var(--k-text-black);
    padding-bottom: var(--space-8);
}

/* 작업의뢰 검색 입력 묶음 내부 셀렉트 톤을 맞춘다. */
.work-request-page .job-search-box .select-freemode {
    border: var(--k-border-thin);
    background-color: var(--k-bg-white);
}

/* 작업의뢰 검색어 입력 필드를 협업 입력 스타일로 정리한다. */
.work-request-page .job-search-input {
    min-width: 240px;
    height: var(--k-input-height);
    padding: 0 14px;
    border: var(--k-border-thin);
    border-radius: var(--k-radius-md);
    background-color: var(--k-bg-white);
    color: var(--ref-ink);
    font-size: 14px;
}

/* 작업의뢰 검색어 입력 포커스 상태를 정의한다. */
.work-request-page .job-search-input:focus {
    outline: none;
    border-color: var(--job-color-primary);
    box-shadow: inset 0 0 0 1px var(--job-color-primary);
}

/* 작업의뢰 검색 버튼을 메인 컬러 기준으로 정리한다. */
.work-request-page .job-search-btn {
    width: var(--k-input-height);
    height: var(--k-input-height);
    border: none;
    border-radius: var(--k-radius-md);
    background-color: var(--job-color-primary);
    color: var(--k-bg-white);
    font-size: 14px;
}

/* 작업의뢰 검색 버튼 hover 상태를 정의한다. */
.work-request-page .job-search-btn:hover {
    background-color: var(--job-color-primary-dark);
}

/* 작업의뢰 목록 테이블과 페이지네이션 간격을 정리한다. */
.work-request-page .job-pagination {
    margin-top: 22px;
}

/* 작업의뢰 목록을 의뢰 브리프 카드 흐름으로 배치한다. */
.work-request-page .work-request-brief-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

/* 작업의뢰 브리프 카드를 한 장의 목록 카드처럼 정리한다. */
.work-request-page .work-request-brief-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 20px;
    border: var(--k-border-thin);
    border-radius: var(--k-radius-md);
    background-color: var(--k-bg-white);
    box-shadow: var(--k-shadow-hard-sm);
    cursor: pointer;
    transition: var(--k-transition-fast);
}

/* 작업의뢰 브리프 카드 hover 상태를 정의한다. */
.work-request-page .work-request-brief-card:hover {
    border-color: var(--job-color-primary);
    box-shadow: var(--k-shadow-hover2);
    transform: translateY(-1px);
}

/* 작업의뢰 브리프 카드 상단 영역을 제목과 액션 중심으로 정렬한다. */

/* 작업의뢰 브리프 카드 본문 영역을 제목 중심 세로 흐름으로 정렬한다. */

/* 작업의뢰 브리프 카드 우측 액션 영역을 정렬한다. */

/* 작업의뢰 브리프 카드 우측 액션이 없을 때 영역을 제거한다. */

/* 작업의뢰 브리프 카드 상단 라벨 묶음을 정렬한다. */

/* 작업의뢰 브리프 카드 카테고리 배지를 정의한다. */

/* 작업의뢰 브리프 카드 제목을 정의한다. */
.work-request-page .work-request-brief-title {
    margin: 0;
    color: var(--ref-ink);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.45;
    word-break: keep-all;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* 작업의뢰 브리프 카드 설명 문구를 정의한다. */
.work-request-page .work-request-brief-desc {
    margin: 0;
    color: var(--ref-gray-700);
    font-size: 14px;
    line-height: 1.6;
    word-break: keep-all;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

/* 작업의뢰 브리프 카드 태그 영역을 정의한다. */

/* 작업의뢰 브리프 카드 태그를 정의한다. */

/* 작업의뢰 브리프 카드 태그 라벨을 정의한다. */

/* 작업의뢰 브리프 카드 태그 값을 정의한다. */

/* 작업의뢰 브리프 카드 주요 조건 영역을 정의한다. */

/* 작업의뢰 브리프 카드 주요 조건 항목을 정의한다. */

/* 작업의뢰 브리프 카드 주요 조건 홀수 항목의 왼쪽 구분선을 제거한다. */

/* 작업의뢰 브리프 카드 주요 조건 짝수 항목의 왼쪽 구분선을 유지한다. */

/* 작업의뢰 브리프 카드 주요 조건 라벨을 정의한다. */

/* 작업의뢰 브리프 카드 주요 조건 값을 정의한다. */

/* 작업의뢰 브리프 카드의 마감 힌트를 주요 조건 안에서 표시한다. */

/* 작업의뢰 브리프 카드의 긴급 마감 힌트를 강조한다. */

/* 작업의뢰 브리프 카드 하단 정보를 정렬한다. */

/* 작업의뢰 브리프 카드 출처 정보를 정렬한다. */
.work-request-page .work-request-brief-origin {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    min-width: 0;
}

/* 작업의뢰 브리프 카드 출처 정보 사이 구분점을 표시한다. */
.work-request-page .work-request-brief-origin span + span {
    position: relative;
}

/* 작업의뢰 브리프 카드 출처 정보 구분점 스타일을 정의한다. */
.work-request-page .work-request-brief-origin span + span::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 50%;
    width: 3px;
    height: 3px;
    border-radius: var(--k-radius-pill);
    background-color: var(--ref-gray-700);
    transform: translateY(-50%);
}

/* 작업의뢰 브리프 카드 빈 상태를 전체 폭으로 표시한다. */
.work-request-page .work-request-empty-card--brief {
    grid-column: 1 / -1;
}

/* 작업의뢰 모바일 카드 설명 문구를 정의한다. */
.work-request-page .work-request-card-mobile-desc {
    margin: 0;
    color: var(--ref-gray-700);
    font-size: 13px;
    line-height: 1.65;
    word-break: keep-all;
}

/* 작업의뢰 모바일 카드 결과물 요약 영역을 정의한다. */

/* 작업의뢰 모바일 카드 결과물 라벨을 정의한다. */

/* 작업의뢰 모바일 카드 결과물 값을 정의한다. */

/* 작업의뢰 폼 외곽 컨테이너를 페이지 레이아웃 기준으로 정리한다. */
.work-request-page.work-request-form-layout .form-container,
.work-request-page.work-request-public-profile-page .form-container {
    max-width: 1040px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

/* 회사 프로필 수정 화면을 이미지 기준의 넓은 단일 폼 폭으로 맞춘다. */
.work-request-page.work-request-public-profile-page .company-profile-edit-form {
    max-width: 1200px;
    margin: 32px auto 0;
    padding: 0 24px 56px;
}

/* 작업의뢰 폼 헤더 간격을 정리한다. */
.work-request-page .work-request-form-header,
.work-request-page .work-request-public-profile-header {
    margin-bottom: 32px;
    padding: 0 4px;
}

/* 회사 프로필 섹션 간격을 이미지 흐름에 맞춘다. */
.work-request-page .company-profile-image-form .company-profile-form-section {
    margin-bottom: 64px;
}

/* 회사 프로필 페이지 제목 크기를 이미지 기준으로 조정한다. */
.work-request-page .company-profile-image-form .page-title {
    margin-top: 0;
    font-size: 26px;
}

/* 회사 프로필 섹션 제목과 구분선을 정의한다. */
.work-request-page .company-profile-image-form .company-profile-form-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 30px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--job-color-border);
    color: var(--job-color-text);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
}

/* 회사 프로필 섹션 체크 아이콘을 이미지 톤으로 표시한다. */
.work-request-page .company-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(--ref-logo-coral);
    color: var(--k-bg-white);
    font-size: 8px;
    line-height: 1;
    flex-shrink: 0;
}

/* 회사 프로필 로고 영역을 이미지와 같은 가로 흐름으로 배치한다. */
.work-request-page .company-profile-logo-row {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    align-items: center;
    gap: 32px;
    padding-left: 28px;
}

/* 회사 프로필 로고 미리보기 크기를 고정해 레이아웃 흔들림을 줄인다. */
.work-request-page .company-profile-logo-preview {
    width: 170px;
    height: 90px;
    border: 1px solid var(--job-color-border);
    border-radius: var(--k-radius-md);
    background-color: var(--k-bg-white);
}

/* 회사 프로필 로고 도움말과 버튼을 세로 흐름으로 정렬한다. */
.work-request-page .company-profile-logo-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* 회사 프로필 로고 업로드 안내문을 이미지와 같은 작은 문구로 표시한다. */
.work-request-page .company-profile-logo-help {
    margin: 0;
    color: var(--job-color-text-light);
    font-size: 13px;
    line-height: 1.5;
}

/* 회사 프로필 로고 버튼 묶음의 간격을 정의한다. */
.work-request-page .company-profile-logo-buttons {
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* 회사 프로필 입력 본문을 라벨/입력 행 구조로 정렬한다. */
.work-request-page .company-profile-form-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-left: 24px;
}

/* 회사 프로필 입력 행을 좌측 라벨과 우측 입력으로 구성한다. */
.work-request-page .company-profile-form-row {
    display: grid;
    grid-template-columns: 76px minmax(0, 560px);
    align-items: center;
    gap: 22px;
    min-width: 0;
}

/* 회사 프로필 라벨을 이미지 기준의 굵기와 색상으로 맞춘다. */
.work-request-page .company-profile-image-form .label-freemode {
    margin-bottom: 0;
    color: var(--job-color-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
}

/* 회사 프로필 입력 요소의 높이와 테두리를 이미지와 맞춘다. */
.work-request-page .company-profile-image-form .input-freemode,
.work-request-page .company-profile-image-form .select-freemode {
    height: 36px;
    border-color: var(--job-color-border);
    background-color: var(--k-bg-white);
}

/* 회사 프로필 기업구분과 근로자수를 한 줄에 배치한다. */
.work-request-page .company-profile-form-row-inline {
    grid-template-columns: 76px 210px 86px 130px;
}

/* 회사 프로필 기업구분 선택 상자의 폭을 고정한다. */
.work-request-page .company-profile-select {
    width: 210px;
}

/* 회사 프로필 근로자수 라벨 간격을 한 줄 배치에 맞춘다. */
.work-request-page .company-profile-worker-label {
    justify-self: end;
}

/* 회사 프로필 근로자수 입력과 단위를 정렬한다. */
.work-request-page .company-profile-worker-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 회사 프로필 근로자수 입력 폭을 고정한다. */
.work-request-page .company-profile-worker-input {
    width: 78px;
    text-align: right;
}

/* 회사 프로필 근로자수 단위 문구를 본문 톤으로 표시한다. */
.work-request-page .company-profile-worker-field span {
    color: var(--job-color-text-light);
    font-size: 13px;
    white-space: nowrap;
}

/* 회사 프로필 짧은 입력 행 폭을 이미지에 맞춘다. */
.work-request-page .company-profile-form-row-short {
    grid-template-columns: 76px 210px;
}

/* 회사 프로필 설립일 입력 폭을 고정한다. */
.work-request-page .company-profile-date-input {
    width: 210px;
}

/* 회사 프로필 소재지 행을 근무지 주소와 같은 2줄 구조로 배치한다. */
.work-request-page .company-profile-form-row-address {
    grid-template-columns: 76px minmax(0, 1fr);
    max-width: none;
}

/* 회사 프로필 주소 입력 그룹 간격을 근무지 주소와 동일하게 맞춘다. */
.work-request-page .company-profile-address-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 회사 프로필 주소 읽기 전용 입력 배경을 근무지 주소와 동일하게 유지한다. */
.work-request-page .company-profile-address-group .form-control[readonly] {
    background: var(--k-bg-white);
    cursor: default;
}

/* 회사 프로필 소개 입력 영역을 전체 폭으로 배치한다. */
.work-request-page .company-profile-intro-body {
    padding-left: 0;
}

/* 회사 프로필 소개 textarea 높이를 이미지와 맞춘다. */
.work-request-page .company-profile-intro-body .work-request-public-profile-textarea {
    width: 100%;
    min-height: 306px;
    resize: vertical;
}

/* 회사 프로필 하단 액션 버튼 폭과 높이를 이미지에 맞춘다. */
.work-request-page .company-profile-image-form .work-request-public-profile-actions .btn-freemode {
    min-width: 134px;
    height: 44px;
}

@media screen and (max-width: 640px) {
    /* 모바일에서 회사 프로필 로고 편집 영역을 단일 열로 전환한다. */
    .work-request-page .company-profile-logo-row {
        grid-template-columns: 1fr;
        padding-left: 0;
    }

    .work-request-page .company-profile-logo-preview {
        width: 100%;
    }

    .work-request-page .company-profile-logo-buttons {
        flex-wrap: wrap;
    }

    .work-request-page .company-profile-form-body {
        padding-left: 0;
    }

    .work-request-page .company-profile-form-row,
    .work-request-page .company-profile-form-row-inline,
    .work-request-page .company-profile-form-row-short,
    .work-request-page .company-profile-form-row-address {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .work-request-page .company-profile-select,
    .work-request-page .company-profile-date-input {
        width: 100%;
    }

    .work-request-page .company-profile-worker-label {
        justify-self: start;
    }

    /* 모바일에서 외주 프로젝트 등록 입력+버튼 행을 세로로 배치한다. */
    .work-request-page .work-request-skill-input-row {
        grid-template-columns: 1fr;
    }

    /* 모바일에서 외주 프로젝트 등록 외곽 버튼을 행 전체 폭으로 확장한다. */
    .work-request-page .work-request-outline-action-btn {
        width: 100%;
    }

}

/* 작업의뢰 폼 카드 톤을 협업 카드와 통일한다. */
.work-request-page .work-request-public-profile-form .card-freemode {
    margin-bottom: 18px;
    padding: 24px;
    border: var(--k-border-thin);
    border-radius: var(--k-radius-md);
    box-shadow: var(--k-shadow-hard-sm) !important;
}

/* 외주 프로젝트 등록 화면을 이미지 기준의 섹션형 폭으로 확장한다. */
.work-request-page.work-request-form-layout .work-request-registration-form-page {
    max-width: 1260px;
    padding: 32px 0 48px;
}

/* 외주 프로젝트 등록 화면 섹션 본문 좌우 여백을 단기 채용 등록 화면과 맞춘다. */
.work-request-page .work-request-registration-section .job-posting-section-body {
    padding-left: 24px;
    padding-right: 24px;
}

/* 외주 프로젝트 등록 화면 예산 라벨과 입력을 함께 표시한다. */
.work-request-page .work-request-budget-field {
    width: 280px;
    grid-template-columns: 90px minmax(0, 160px);
}

/* 외주 프로젝트 등록 화면 행 내부 체크박스를 입력 컨트롤 높이에 맞춘다. */
.work-request-page .work-request-inline-check {
    min-height: var(--k-input-height);
}

/* 외주 프로젝트 등록 화면 외곽 버튼을 코랄 라인 버튼으로 통일한다. */
.work-request-page .work-request-outline-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    height: 36px;
    padding: 0 14px;
    border-color: var(--ref-logo-coral);
    border-radius: var(--k-radius-md);
    background: var(--k-bg-white);
    color: var(--ref-logo-coral);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

/* 외주 프로젝트 등록 화면 외곽 버튼 hover 상태를 정의한다. */
.work-request-page .work-request-outline-action-btn:hover {
    border-color: var(--ref-logo-coral);
    background: var(--k-bg-white);
    color: var(--ref-logo-coral);
}

/* 외주 프로젝트 등록 화면 외곽 버튼이 공통 버튼보다 우선 적용되도록 정의한다. */
.job-board.work-request-page .btn-freemode.btn-sub.is-line.work-request-outline-action-btn {
    height: 36px;
    border-color: var(--ref-logo-coral);
    background: var(--k-bg-white);
    color: var(--ref-logo-coral);
}

/* 외주 프로젝트 등록 화면 외곽 버튼 hover가 공통 버튼보다 우선 적용되도록 정의한다. */
.job-board.work-request-page .btn-freemode.btn-sub.is-line.work-request-outline-action-btn:hover {
    border-color: var(--ref-logo-coral);
    background: var(--k-bg-white);
    color: var(--ref-logo-coral);
}

/* 외주 프로젝트 등록 화면 협의가능 체크를 이미지형 테두리 버튼으로 표시한다. */
.work-request-page .work-request-negotiable-choice {
    min-width: 88px;
}

/* 외주 프로젝트 등록 화면 필요기술 입력 행을 버튼과 한 줄로 배치한다. */
.work-request-page .work-request-skill-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

/* 외주 프로젝트 등록 화면 필요기술 칩 목록 간격을 정의한다. */
.work-request-page .work-request-skill-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 32px;
}

/* 외주 프로젝트 등록 화면 필요기술 칩 형태를 정의한다. */
.work-request-page .work-request-skill-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 12px;
    border-radius: var(--k-radius-pill);
    background: var(--k-bg-gray-light);
    color: var(--ref-ink);
    font-size: 13px;
    font-weight: 600;
}

/* 외주 프로젝트 등록 화면 필요기술 칩 삭제 버튼을 아이콘형으로 정리한다. */
.work-request-page .work-request-skill-chip button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: var(--k-radius-pill);
    background: transparent;
    color: var(--k-color-gray-888);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

/* 외주 프로젝트 등록 화면 큰 입력 영역의 높이를 이미지 기준으로 맞춘다. */
.work-request-page .work-request-large-textarea {
    min-height: 280px;
}

/* 외주 프로젝트 등록 화면 읽기 전용 담당자 입력 배경을 유지한다. */
.work-request-page .work-request-registration-form-page .form-control[readonly]:not(.work-request-date-input) {
    background: var(--k-bg-white);
    cursor: default;
}

/* 외주 프로젝트 등록 화면 준비자료 입력 그룹 간격을 분리한다. */
.work-request-page .work-request-material-field {
    margin-bottom: 18px;
}

/* 외주 프로젝트 등록 화면 준비자료 마지막 입력 그룹의 하단 여백을 정리한다. */
.work-request-page .work-request-material-field:last-child {
    margin-bottom: 0;
}

/* 외주 프로젝트 등록 화면 준비자료 업로드 박스를 URL 입력과 별도 영역으로 표시한다. */
.work-request-page .work-request-material-upload-box {
    margin-top: 0;
}

/* 외주 프로젝트 등록 화면 첨부파일 목록을 이미지 기준의 낮은 리스트로 표시한다. */
.work-request-page .work-request-attachment-list--form {
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--k-color-gray-e5);
    border-radius: var(--k-radius-md);
}

/* 외주 프로젝트 등록 화면 첨부파일 행의 카드 장식을 제거한다. */
.work-request-page .work-request-attachment-list--form .work-request-attachment-item {
    min-height: 56px;
    padding: 0 16px;
    border: 0;
    border-radius: 0;
    background: var(--k-bg-white);
}

/* 외주 프로젝트 등록 화면 첨부파일 행 사이를 얇은 선으로 구분한다. */
.work-request-page .work-request-attachment-list--form .work-request-attachment-item + .work-request-attachment-item {
    border-top: 1px solid var(--k-color-gray-e5);
}

/* 외주 프로젝트 등록 화면 첨부파일 아이콘과 상태 배지를 숨긴다. */
.work-request-page .work-request-attachment-list--form .work-request-attachment-icon,
.work-request-page .work-request-attachment-list--form .work-request-attachment-badge {
    display: none;
}

/* 외주 프로젝트 등록 화면 첨부파일 정보를 한 줄로 정렬한다. */
.work-request-page .work-request-attachment-list--form .work-request-attachment-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* 외주 프로젝트 등록 화면 첨부파일 이름 행 폭을 제한한다. */
.work-request-page .work-request-attachment-list--form .work-request-attachment-name-row {
    min-width: 0;
}

/* 외주 프로젝트 등록 화면 첨부파일 이름을 주요 텍스트로 표시한다. */
.work-request-page .work-request-attachment-list--form .work-request-attachment-name {
    color: var(--ref-ink);
    font-size: 13px;
    font-weight: 600;
}

/* 외주 프로젝트 등록 화면 첨부파일 용량을 이름 옆 보조 텍스트로 표시한다. */
.work-request-page .work-request-attachment-list--form .work-request-attachment-meta {
    margin-top: 0;
    color: var(--k-color-gray-888);
    font-size: 12px;
}

/* 외주 프로젝트 등록 화면 첨부파일 삭제 버튼을 이미지 기준의 연한 코랄 버튼으로 표시한다. */
.work-request-page .work-request-attachment-list--form .work-request-attachment-remove {
    min-width: 46px;
    height: 30px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--k-radius-pill);
    background: var(--k-bg-danger-soft-100);
    color: var(--ref-logo-coral);
    font-size: 12px;
    font-weight: 600;
}

/* 외주 프로젝트 등록 화면 첨부파일 삭제 버튼 hover 상태를 정의한다. */
.work-request-page .work-request-attachment-list--form .work-request-attachment-remove:hover {
    background: var(--k-bg-danger-soft-100);
    color: var(--ref-logo-coral);
}

/* 외주 프로젝트 등록 화면 첨부파일 삭제 버튼이 공통 버튼보다 우선 적용되도록 정의한다. */
.job-board.work-request-page .work-request-attachment-list--form .btn-freemode.btn-sub.work-request-attachment-remove,
.job-board.work-request-page .work-request-attachment-list--form .btn-freemode.btn-sub.work-request-attachment-remove:hover {
    border: 0;
    background: var(--k-bg-danger-soft-100);
    color: var(--ref-logo-coral);
}

/* 외주 프로젝트 등록 화면 첨부파일 없음 문구를 리스트 톤에 맞춘다. */
.work-request-page .work-request-attachment-list--form .work-request-attachment-empty {
    border: 0;
    border-radius: 0;
    background: var(--k-bg-white);
}

/* 외주 프로젝트 등록 화면 하단 주요 버튼을 중앙에 배치한다. */
.work-request-page .work-request-form-actions .job-form-action-primary {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* 작업의뢰 폼 섹션 타이틀 톤을 정리한다. */
.work-request-page .setting-page-title {
    margin: 0;
    color: var(--ref-ink);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
}

/* 작업의뢰 폼 라벨 톤을 협업 입력 라벨과 맞춘다. */
.work-request-page .form-container .form-label {
    color: var(--ref-ink);
    font-size: 14px;
    font-weight: 500;
}

/* 작업의뢰 폼 입력 기본 톤을 협업 입력 스타일에 맞춘다. */
.work-request-page .form-container .form-control {
    height: var(--k-input-height);
    padding: 0 14px;
    border: var(--k-border-thin);
    border-radius: var(--k-radius-md);
    color: var(--ref-ink);
    font-size: 14px;
    background-color: var(--k-bg-white);
}

/* 작업의뢰 폼 textarea 높이와 패딩을 정리한다. */
.work-request-page .form-container textarea.form-control {
    height: auto;
    padding: 10px 14px;
}

/* 작업의뢰 업로드 박스 톤을 협업 카드와 맞춘다. */
.work-request-page .work-request-form-upload-box {
    border: 1px dashed var(--k-color-gray-d1);
    border-radius: var(--k-radius-md);
    background-color: var(--k-bg-gray-light);
}

/* 작업의뢰 폼 버튼 영역 간격을 정리한다. */
.work-request-page .btn-area {
    margin-top: 28px;
}

/* 작업의뢰 폼 하단 액션 영역을 저장 버튼 그룹 기준으로 중앙 정렬한다. */
.work-request-page .work-request-form-actions {
    align-items: center;
    justify-content: center;
}

/* 작업의뢰 수정 화면 삭제 버튼을 왼쪽 끝에 배치한다. */

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

/* 작업의뢰 상세 상단 요약 카드를 정의한다. */
.work-request-page .job-detail-header {
    padding: 26px 28px;
    border: var(--k-border-thin);
    border-radius: var(--k-radius-md);
    border-bottom: var(--k-border-thin);
    background-color: var(--k-bg-white);
    box-shadow: var(--k-shadow-hard-sm);
}

/* 작업의뢰 상세 콘텐츠 영역 간격을 정리한다. */
.work-request-page .job-detail-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 작업의뢰 상세 섹션을 카드형 블록으로 정리한다. */
.work-request-page .job-detail-section {
    margin-bottom: 0;
    padding: 24px;
    border: var(--k-border-thin);
    border-radius: var(--k-radius-md);
    background-color: var(--k-bg-white);
    box-shadow: var(--k-shadow-hard-sm);
}

/* 작업의뢰 상세 섹션 타이틀 톤을 정의한다. */
.work-request-page .section-title {
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--k-color-gray-f0);
    color: var(--ref-ink);
    font-size: 17px;
    font-weight: 600;
}

/* 작업의뢰 상세 메타 정보를 보조 정보 톤으로 정리한다. */
.work-request-page .job-detail-meta {
    gap: 20px;
    flex-wrap: wrap;
    color: var(--ref-gray-700);
    font-size: 13px;
}

/* 작업의뢰 상세 메타 아이콘 묶음 간격을 정의한다. */

/* 작업의뢰 상세 한 줄 브리프 문구를 정의한다. */

/* 작업의뢰 상세 핵심 요약 카드를 배치한다. */

/* 작업의뢰 상세 핵심 요약 카드 스타일을 정의한다. */

/* 작업의뢰 상세 핵심 요약 라벨을 정의한다. */

/* 작업의뢰 상세 핵심 요약 값을 정의한다. */

/* 작업의뢰 상세 정보 라벨 톤을 정의한다. */
.work-request-page .info-label {
    color: var(--ref-gray-700);
    font-weight: 500;
}

/* 작업의뢰 상세 본문 문단 톤을 정의한다. */
.work-request-page .content-text {
    color: var(--k-text-body);
}

/* 작업의뢰 상세 내부 카드형 보조 박스 톤을 통일한다. */
.work-request-page .requester-profile-info-item,
.work-request-page .requester-company-copy-block,
.work-request-page .work-request-guide-box {
    border-radius: var(--k-radius-md);
    border: var(--k-border-thin);
    box-shadow: none;
}

/* 작업의뢰 공개 프로필 배지 톤을 메인 컬러 기준으로 정리한다. */

/* 작업의뢰 회사소개 대표 카드 톤을 협업 카드와 통일한다. */

/* 작업의뢰 회사소개 화면은 채용 회사소개 화면과 동일하게 카드 장식을 제거한다. */
.work-request-page.work-request-company-page .job-detail-wrapper.job-posting-detail-page.requester-company-page {
    max-width: 1180px;
    padding: 32px 24px 64px;
}

/* 작업의뢰 회사소개 섹션은 채용 회사소개와 동일하게 카드형 블록을 사용하지 않는다. */
.work-request-page.work-request-company-page .job-detail-section {
    margin-bottom: 58px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* 작업의뢰 회사소개 섹션 제목을 채용 회사소개와 동일한 문서형 제목으로 표시한다. */
.work-request-page.work-request-company-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;
}

/* 작업의뢰 회사소개 대표 영역을 채용 회사소개와 같은 낮은 장식 패널로 표시한다. */

/* 작업의뢰 회사소개 상단 회사명을 채용 회사소개와 동일하게 표시한다. */
.work-request-page.work-request-company-page .requester-company-hero-title {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--job-color-text);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.25;
}

/* 작업의뢰 회사소개 상단 설명 문구를 채용 회사소개와 동일하게 표시한다. */

/* 작업의뢰 회사소개 상단 브랜드명을 채용 회사소개와 동일한 톤으로 표시한다. */

/* 작업의뢰 회사소개 통계 항목의 카드 테두리와 그림자를 제거한다. */

/* 작업의뢰 회사소개 본문 블록을 채용 회사소개처럼 문서형으로 표시한다. */
.work-request-page.work-request-company-page .requester-company-copy-block {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* 작업의뢰 회사소개 최근 목록 카드를 채용 회사소개와 같은 절제된 목록형으로 표시한다. */

/* 작업의뢰 회사소개 최근 목록 hover 장식을 채용 회사소개와 동일하게 낮춘다. */

/* 공통 기업정보 화면의 전체 문서 폭과 여백을 정의한다. */
.company-profile-page.job-posting-detail-page {
    max-width: 1180px;
    padding: 32px 24px 64px;
}

/* 공통 기업정보 화면 섹션을 이미지 기준의 문서형 블록으로 표시한다. */
.company-profile-page .job-detail-section {
    margin: 0 0 58px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* 공통 기업정보 화면 최상단 제목을 정의한다. */
.company-profile-page .company-profile-title {
    margin: 0 0 32px;
    color: var(--job-color-text);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.35;
}

/* 공통 기업정보 상단 요약 패널을 연한 배경 박스로 표시한다. */
.company-profile-page .company-profile-overview-card {
    padding: 22px 16px 24px;
    border-radius: 8px;
    background: var(--k-color-gray-fa);
}

/* 공통 기업정보 로고와 회사명 행을 배치한다. */
.company-profile-page .company-profile-brand-line {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
}

/* 공통 기업정보 로고 박스를 디자인 이미지 비율로 표시한다. */
.company-profile-page .company-profile-logo {
    width: 176px;
    height: 54px;
    border-radius: 8px;
    background: var(--k-bg-white);
    color: var(--job-color-text-light);
    font-size: 20px;
}

/* 공통 기업정보 회사명을 로고 옆 주요 텍스트로 표시한다. */
.company-profile-page .company-profile-name {
    margin: 0;
    color: var(--job-color-text);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.25;
}

/* 공통 기업정보 기본 정보 그리드를 2열 문서형으로 정리한다. */
.company-profile-page .company-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;
}

/* 공통 기업정보 기본 정보 항목을 라벨과 값으로 배치한다. */
.company-profile-page .company-profile-info-panel .requester-profile-info-item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* 공통 기업정보 기본 정보 라벨 톤을 정의한다. */
.company-profile-page .company-profile-info-panel .requester-profile-info-label {
    color: var(--job-color-text-light);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

/* 공통 기업정보 기본 정보 값을 진하게 표시한다. */
.company-profile-page .company-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;
}

/* 공통 기업정보 회사소개 본문을 문서형 텍스트로 표시한다. */
.company-profile-page .requester-company-copy-block {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--job-color-text);
    font-size: 14px;
    line-height: 1.85;
}

/* 공통 기업정보 섹션 제목과 더보기 버튼 행을 배치한다. */
.company-profile-page .company-profile-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--job-color-border);
}

/* 공통 기업정보 섹션 제목이 남은 폭을 채우도록 한다. */
.company-profile-page .company-profile-section-head .section-title {
    flex: 1;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

/* 공통 기업정보 더보기 버튼을 이미지형 보조 버튼으로 표시한다. */
.company-profile-page .company-profile-more-btn {
    min-width: 64px;
    height: 34px;
    border-radius: var(--k-radius-pill);
    background: var(--k-bg-white);
}

/* 공통 기업정보 하단 목록 테이블 영역을 정의한다. */
.company-profile-page .company-profile-list-table {
    width: 100%;
}

/* 공통 기업정보 하단 목록 헤더를 3열 구조로 표시한다. */
.company-profile-page .company-profile-list-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px 150px;
    column-gap: 24px;
    align-items: center;
    min-height: 46px;
    padding: 0 16px;
    background: var(--k-color-gray-fa);
    border-bottom: 1px solid var(--job-color-border);
    color: var(--job-color-text-light);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

/* 공통 기업정보 하단 목록 행을 3열 구조로 표시한다. */
.company-profile-page .company-profile-list-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px 140px;
    column-gap: 24px;
    align-items: center;
    min-height: 104px;
    padding: 22px 16px;
    border-bottom: 1px solid var(--job-color-border);
    cursor: pointer;
}

/* 공통 기업정보 하단 목록 행 hover 상태를 정의한다. */
.company-profile-page .company-profile-list-row:hover {
    background: var(--k-color-gray-fa);
}

/* 공통 기업정보 하단 목록 제목 영역을 정리한다. */
.company-profile-page .company-profile-list-main {
    min-width: 0;
}

/* 공통 기업정보 하단 목록 제목 텍스트를 정의한다. */
.company-profile-page .company-profile-list-main strong {
    display: block;
    color: var(--job-color-text);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.45;
    word-break: keep-all;
}

/* 공통 기업정보 하단 목록 보조 문구를 정의한다. */
.company-profile-page .company-profile-list-main p {
    margin: 8px 0 0;
    color: var(--job-color-text-light);
    font-size: 14px;
    line-height: 1.55;
}

/* 공통 기업정보 외주 프로젝트 목록 회사명을 제목 아래 보조 정보로 표시한다. */
.company-profile-page .company-profile-list-company {
    display: block;
    margin-top: 12px;
    color: var(--job-color-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

/* 공통 기업정보 하단 목록 구분 컬럼을 세로 정보로 배치한다. */
.company-profile-page .company-profile-list-type {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: var(--job-color-text-light);
    font-size: 14px;
    line-height: 1.45;
}

/* 공통 기업정보 외주 프로젝트 메타 라벨과 값을 한 줄에 표시한다. */
.company-profile-page .company-profile-request-meta span {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 10px;
}

/* 공통 기업정보 외주 프로젝트 메타 라벨을 정의한다. */
.company-profile-page .company-profile-request-meta em {
    color: var(--job-color-text-light);
    font-style: normal;
}

/* 공통 기업정보 외주 프로젝트 메타 값을 정의한다. */
.company-profile-page .company-profile-request-meta strong {
    color: var(--job-color-text);
    font-weight: 700;
}

/* 공통 기업정보 외주 프로젝트 예산 라벨과 값을 주요 텍스트로 표시한다. */
.company-profile-page .company-profile-request-meta span:first-child em,
.company-profile-page .company-profile-request-meta span:first-child strong {
    color: var(--job-color-text);
}

/* 공통 기업정보 외주 프로젝트 완료 희망일과 지원자 값을 보조 텍스트로 표시한다. */
.company-profile-page .company-profile-request-meta span:not(:first-child) strong {
    color: var(--job-color-text-light);
    font-weight: 600;
}

/* 공통 기업정보 하단 목록 기간 컬럼을 우측 정렬한다. */
.company-profile-page .company-profile-list-period {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    color: var(--job-color-text-light);
    font-size: 14px;
    line-height: 1.55;
    text-align: right;
}

/* 공통 기업정보 외주 프로젝트 마감 배지를 코랄 포인트로 표시한다. */
.company-profile-page .company-profile-deadline-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 26px;
    padding: 0 10px;
    border-radius: var(--k-radius-pill);
    background: var(--ref-accent-orange-bg-soft);
    color: var(--ref-logo-coral);
    font-size: 12px;
    font-weight: 800;
}

/* 공통 기업정보 마감된 외주 프로젝트 배지 톤을 낮춘다. */
.company-profile-page .company-profile-deadline-badge.is-closed {
    color: var(--job-color-text-light);
}

/* 공통 기업정보 하단 목록 빈 상태를 표시한다. */
.company-profile-page .company-profile-empty-row {
    padding: 26px 16px;
    border-bottom: 1px solid var(--job-color-border);
    color: var(--job-color-text-light);
    font-size: 14px;
    text-align: center;
}

/* 공통 기업정보 안내 문구 박스를 하단에 표시한다. */
.company-profile-page .company-profile-notice {
    margin-top: -6px;
    padding: 18px 20px;
    border-radius: 8px;
    background: var(--k-color-gray-fa);
    color: var(--job-color-text-light);
    font-size: 13px;
    line-height: 1.7;
}

/* 공통 기업정보 안내 문구의 기본 여백을 제거한다. */
.company-profile-page .company-profile-notice p {
    margin: 0;
}

/* 공통 기업정보 안내 문구 사이 간격을 정의한다. */
.company-profile-page .company-profile-notice p + p {
    margin-top: 4px;
}

/* 모바일 공통 기업정보 화면을 단일 열로 재배치한다. */
@media screen and (max-width: 768px) {
    .company-profile-page.job-posting-detail-page {
        padding: 24px 16px 44px;
    }

    .company-profile-page .company-profile-title {
        margin-bottom: 24px;
        font-size: 24px;
    }

    .company-profile-page .company-profile-brand-line {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .company-profile-page .company-profile-logo {
        width: 156px;
        height: 48px;
    }

    .company-profile-page .company-profile-name {
        font-size: 23px;
    }

    .company-profile-page .company-profile-info-panel {
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    .company-profile-page .company-profile-info-panel .requester-profile-info-item {
        grid-template-columns: 86px minmax(0, 1fr);
    }

    .company-profile-page .company-profile-section-head {
        align-items: center;
    }

    .company-profile-page .company-profile-list-header {
        display: none;
    }

    .company-profile-page .company-profile-list-row {
        grid-template-columns: 1fr;
        gap: 14px;
        min-height: 0;
        padding: 20px 0;
    }

    .company-profile-page .company-profile-list-type {
        gap: 6px;
    }

    .company-profile-page .company-profile-list-period {
        align-items: flex-start;
        text-align: left;
    }
}

/* 작업의뢰 하단 목록 버튼 영역 간격을 정리한다. */

/* 작업의뢰 상태 배지 크기와 두께를 정리한다. */
.work-request-page .work-request-status-tag {
    font-size: 12px;
    font-weight: 600;
}

/* 작업의뢰 상세 페이지의 외곽 래퍼만 큰 카드로 사용한다. */
.work-request-detail-page .job-detail-wrapper {
    background-color: var(--k-bg-white);
}

/* 작업의뢰 상세 페이지 헤더 카드 스타일을 제거하고 상단 구분선만 유지한다. */
.work-request-detail-page .job-detail-header {
    padding: 0 0 24px;
    border: 0;
    border-bottom: 1px solid var(--k-color-gray-e8);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* 작업의뢰 상세 페이지 섹션 간격을 카드 대신 구분선 기준으로 재구성한다. */
.work-request-detail-page .job-detail-content {
    gap: 0;
}

/* 작업의뢰 상세 페이지 섹션의 카드 스타일을 제거한다. */
.work-request-detail-page .job-detail-section {
    margin-bottom: 0;
    padding: 28px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* 작업의뢰 상세 페이지 섹션 사이에만 구분선을 넣는다. */
.work-request-detail-page .job-detail-section + .job-detail-section {
    margin-top: 28px;
    border-top: 1px solid var(--k-color-gray-f0);
}

/* 작업의뢰 상세 페이지 섹션 제목의 카드형 하단 라인을 제거한다. */
.work-request-detail-page .section-title {
    margin-bottom: 16px;
    padding-bottom: 0;
    border-bottom: 0;
}

/* 작업의뢰 상세 페이지의 개별 보조 카드 스타일을 모두 평면형으로 정리한다. */
.work-request-detail-page .work-request-copy-block,
.work-request-detail-page .requester-profile-info-item,
.work-request-detail-page .work-request-guide-box {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* 작업의뢰 제안 폼을 제작 요청 답변서 형태로 정리한다. */

/* 작업의뢰 제안 폼의 대상 의뢰 요약 박스를 정의한다. */

/* 작업의뢰 제안 폼의 대상 의뢰 제목을 정의한다. */

/* 작업의뢰 제안 폼의 대상 의뢰 메타 정보를 정렬한다. */

/* 작업의뢰 상세 페이지의 참고 링크와 첨부파일을 평면형 리스트로 정리한다. */
.work-request-detail-page .work-request-reference-list,
.work-request-detail-page .work-request-attachment-list {
    gap: 0;
}

/* 작업의뢰 상세 페이지의 링크/첨부파일 행 카드 스타일을 제거한다. */
.work-request-detail-page .work-request-reference-item,
.work-request-detail-page .work-request-attachment-item {
    padding: 14px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* 작업의뢰 상세 페이지의 링크/첨부파일 행 사이를 구분선으로만 나눈다. */
.work-request-detail-page .work-request-reference-item + .work-request-reference-item,
.work-request-detail-page .work-request-attachment-item + .work-request-attachment-item {
    border-top: 1px solid var(--k-color-gray-f0);
}

/* 작업의뢰 상세 페이지의 의뢰자 프로필 통계/정보 그리드가 평면형으로 보이도록 간격을 조정한다. */
.work-request-detail-page .requester-profile-info-grid {
    gap: 16px;
}

/* 작업의뢰 상세 페이지의 하단 버튼 영역을 본문 카드 내부 간격에 맞춘다. */

/* 작업의뢰 상세 화면을 채용 상세와 같은 문서형 레이아웃으로 고정한다. */
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page {
    max-width: 1180px;
    padding: 32px 24px 64px;
    background: transparent;
}

/* 작업의뢰 상세 헤더의 카드 장식을 제거하고 채용 상세 상단 구조와 맞춘다. */
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .job-detail-header {
    margin-bottom: 34px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* 작업의뢰 상세 제목을 채용 상세 제목 톤으로 표시한다. */
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .job-detail-title {
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    color: var(--job-color-text);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.35;
}

/* 작업의뢰 상세 메타 정보를 채용 상세와 같은 한 줄 문서형으로 표시한다. */
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .job-detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    color: var(--job-color-text-light);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
}

/* 작업의뢰 상세 본문 섹션의 카드형 구분을 제거한다. */
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .job-detail-content {
    display: block;
    gap: 0;
}

/* 작업의뢰 상세 본문 섹션의 카드형 구분을 제거한다. */
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .job-detail-section {
    margin: 0 0 38px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* 작업의뢰 상세 섹션 사이의 별도 구분선을 제거한다. */
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .job-detail-section + .job-detail-section {
    margin-top: 0;
    border-top: 0;
}

/* 작업의뢰 상세 섹션 제목을 채용 상세와 동일하게 표시한다. */
.work-request-detail-page .job-detail-wrapper.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;
}

/* 작업의뢰 상세 섹션 헤더 라인을 우측 버튼 아래까지 확장한다. */
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .job-detail-section-head {
    align-items: flex-start;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--job-color-border);
}

/* 작업의뢰 상세 섹션 헤더 내부 제목의 자체 라인을 제거한다. */
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .job-detail-section-head .section-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

/* 작업의뢰 상세 신고하기 버튼을 이미지처럼 작은 pill 버튼으로 표시한다. */
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .job-detail-report-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    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;
}

/* 작업의뢰 상세 신고하기 버튼 아이콘 크기를 버튼 높이에 맞춘다. */
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .job-detail-report-btn i {
    color: var(--job-color-text-light);
    font-size: 10px;
}

/* 작업의뢰 상세 기업정보 더보기 버튼을 이미지처럼 작은 pill 버튼으로 표시한다. */
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .job-company-intro-btn {
    min-width: 82px;
    height: 28px;
    padding: 14px 12px;
    border-radius: var(--k-radius-pill);
    background: var(--k-bg-white);
    color: var(--job-color-text-light);
    font-size: 11px;
    font-weight: 500;
}

/* 작업의뢰 상세 핵심 정보 라벨 폭을 긴 항목명 기준으로 조정한다. */
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .job-detail-info-row {
    grid-template-columns: 112px minmax(0, 1fr);
}

/* 작업의뢰 상세 핵심 정보 라벨을 채용 상세와 동일하게 표시한다. */
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .info-label {
    color: var(--job-color-text-light);
    font-weight: 600;
}

/* 작업의뢰 상세 핵심 정보 값을 채용 상세와 동일하게 표시한다. */
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .info-value {
    color: var(--job-color-text);
    font-weight: 500;
    line-height: 1.6;
    word-break: break-word;
}

/* 작업의뢰 상세 내용 블록의 별도 카드 장식을 제거한다. */
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .work-request-copy-block,
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .work-request-guide-box {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* 작업의뢰 상세 문서형 본문 텍스트를 이미지와 같은 밀도로 표시한다. */
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .work-request-copy-block {
    color: var(--job-color-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.85;
    word-break: break-word;
}

/* 작업의뢰 상세 준비자료 영역 내부 목록 간격을 정의한다. */
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .work-request-reference-list,
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .work-request-attachment-list {
    display: grid;
    gap: 12px;
}

/* 작업의뢰 상세 준비자료의 참고 URL과 파일 등록 그룹을 분리한다. */
.work-request-detail-page .work-request-material-detail-group + .work-request-material-detail-group {
    margin-top: 16px;
}

/* 작업의뢰 상세 참고 링크 아래 첨부파일 목록 간격을 확보한다. */
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .work-request-reference-list:not(:empty) + .work-request-attachment-list:not(:empty) {
    margin-top: 12px;
}

/* 작업의뢰 상세 참고 링크와 첨부파일을 이미지형 낮은 행으로 표시한다. */
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .work-request-reference-item,
.work-request-detail-page .job-detail-wrapper.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);
}

/* 작업의뢰 상세 준비자료 행 사이 추가 구분선을 제거한다. */
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .work-request-reference-item + .work-request-reference-item,
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .work-request-attachment-item + .work-request-attachment-item {
    border-top: 1px solid var(--job-color-border);
}

/* 작업의뢰 상세 첨부파일 본문 영역을 한 줄로 정렬한다. */
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .work-request-attachment-item-main {
    min-width: 0;
    flex: 1;
}

/* 작업의뢰 상세 첨부파일 정보 영역을 파일명과 용량으로 배치한다. */
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .work-request-attachment-info {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

/* 작업의뢰 상세 첨부파일 이름을 주요 텍스트로 표시한다. */
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .work-request-attachment-name {
    color: var(--job-color-text);
    font-size: 13px;
    font-weight: 700;
}

/* 작업의뢰 상세 첨부파일 용량을 보조 텍스트로 표시한다. */
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .work-request-attachment-meta {
    color: var(--job-color-text-light);
    font-size: 12px;
}

/* 작업의뢰 상세 첨부파일 다운로드 버튼을 작은 보조 버튼으로 표시한다. */
.work-request-detail-page .job-detail-wrapper.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;
}

/* 작업의뢰 상세 참고 링크 행의 아이콘을 우측에 배치한다. */
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .work-request-reference-item i {
    color: var(--job-color-text-light);
    font-size: 12px;
}

/* 작업의뢰 상세 의뢰자 정보 패널을 채용 상세 기업정보와 동일한 문서형 패널로 표시한다. */
.work-request-detail-page .job-detail-wrapper.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열로 표시한다. */
.work-request-detail-page .job-detail-wrapper.job-posting-detail-page .requester-profile-info-panel .requester-profile-info-item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* 작업의뢰 상세 하단 버튼 영역의 카드형 상단선을 제거한다. */

/* 태블릿 이하에서 작업의뢰 공통 레이아웃을 재배치한다. */
@media screen and (max-width: 1023px) {
    /* 작업의뢰 목록/상세 공통 좌우 여백을 줄인다. */
    .work-request-page .job-board-wrapper,
    .work-request-page .job-detail-wrapper {
        padding: 24px 16px 40px;
    }

    /* 작업의뢰 리스트 헤더를 세로 배치로 전환한다. */
    .work-request-page .job-board-header {
        align-items: stretch;
        flex-direction: column;
    }

    /* 작업의뢰 검색 패널을 세로 흐름으로 전환한다. */
    .work-request-page .job-search-section.card-freemode {
        gap: 16px;
        padding: 16px;
    }

    /* 작업의뢰 검색 패널 좌측 영역 최소 폭 제약을 해제한다. */
    .work-request-page .work-request-search-left {
        min-width: 0;
    }

    /* 작업의뢰 목록 페이지 검색 패널 좌측 영역을 모바일에서 세로 배치로 유지한다. */
    .work-request-page.work-request-list-page .work-request-search-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    /* 작업의뢰 검색 입력 묶음을 줄바꿈 가능하게 전환한다. */
    .work-request-page .job-search-box {
        min-width: 0;
        width: 100%;
        flex-wrap: wrap;
    }

    /* 작업의뢰 검색 입력 폭을 모바일에 맞게 확장한다. */
    .work-request-page .job-search-input {
        min-width: 0;
        flex: 1 1 180px;
    }

    /* 작업의뢰 브리프 목록을 태블릿 폭에서 2열로 전환한다. */
    .work-request-page .work-request-brief-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 작업의뢰 브리프 카드 여백을 태블릿 이하에서 줄인다. */
    .work-request-page .work-request-brief-card {
        gap: 12px;
        padding: 18px;
    }

    /* 작업의뢰 브리프 카드 상단 영역 간격을 태블릿 이하에서 줄인다. */

    /* 작업의뢰 브리프 카드 핵심 지표를 태블릿 이하에서 2열로 줄인다. */

    /* 작업의뢰 브리프 카드 주요 조건의 줄 간격을 태블릿 이하에서 확보한다. */

    /* 작업의뢰 브리프 카드 주요 조건 홀수 항목의 왼쪽 구분선을 제거한다. */

    /* 작업의뢰 브리프 카드 주요 조건 짝수 항목의 왼쪽 구분선을 유지한다. */

    /* 작업의뢰 폼 2열 레이아웃을 단일 열로 전환한다. */

    /* 작업의뢰 상세 카드 내부 헤더를 세로 배치로 전환한다. */

    /* 작업의뢰 상세 통계/정보 그리드를 단일 열로 전환한다. */
    .work-request-page .requester-profile-info-grid {
        grid-template-columns: 1fr;
    }

    /* 작업의뢰 상세 페이지 모바일 카드 내부 여백을 조정한다. */
    .work-request-detail-page .job-detail-wrapper {
        padding: 24px 16px 32px;
    }
}

/* 모바일에서 작업의뢰 브리프 카드 내부 지표를 단일 열에 가깝게 압축한다. */
@media screen and (max-width: 640px) {
    /* 모바일에서 작업의뢰 브리프 목록을 단일 열로 전환한다. */
    .work-request-page .work-request-brief-list {
        grid-template-columns: 1fr;
    }

    .work-request-page .work-request-brief-card {
        padding: 18px;
    }

    /* 모바일에서 작업의뢰 브리프 카드 지표를 한 줄씩 읽기 쉽게 배치한다. */

    /* 모바일에서 작업의뢰 브리프 카드 주요 조건 구분선을 세로 흐름에 맞춘다. */

    /* 모바일에서 작업의뢰 브리프 카드 주요 조건 사이에만 구분선을 넣는다. */

    /* 모바일에서 작업의뢰 브리프 카드 하단 정보를 세로로 배치한다. */

    /* 모바일에서 외주 프로젝트 등록 입력+버튼 행을 세로로 배치한다. */
    .work-request-page .work-request-skill-input-row {
        grid-template-columns: 1fr;
    }

    /* 모바일에서 외주 프로젝트 등록 외곽 버튼을 행 전체 폭으로 확장한다. */
    .work-request-page .work-request-outline-action-btn {
        width: 100%;
    }

    /* 모바일에서 외주 프로젝트 등록 하단 버튼을 세로로 배치한다. */
    .work-request-page .work-request-form-actions .job-form-action-primary {
        flex-direction: column;
        width: 100%;
    }

}

/* 외주 프로젝트 목록 본문 여백을 단기 채용 목록과 동일한 폭으로 정의한다. */
.work-request-page .work-request-list-shell {
    max-width: 1200px;
    padding: 32px 0px 48px;
}

/* 외주 프로젝트 목록 제목 영역의 간격을 정의한다. */
.work-request-page .work-request-list-shell .job-list-page-header {
    margin-bottom: 28px;
}

/* 외주 프로젝트 목록 제목 크기와 굵기를 정의한다. */
.work-request-page .work-request-list-shell .job-section-title {
    margin: 0;
    color: var(--ref-ink);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.35;
}

/* 외주 프로젝트 목록 카테고리 탭을 단기 채용 목록과 같은 하단선 구조로 정의한다. */
.work-request-page.work-request-view-page .work-request-list-shell .job-category-tabs {
    align-items: flex-end;
    gap: 0;
    padding: 0;
    margin-bottom: 24px;
    border: none;
    border-bottom: 1px solid var(--job-color-border);
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

/* 외주 프로젝트 목록 카테고리 버튼의 기본 형태를 정의한다. */
.work-request-page.work-request-view-page .work-request-list-shell .job-category-tab {
    min-height: 34px;
    height: auto;
    padding: 12px 16px;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    margin-bottom: -1px;
    background: none;
    color: var(--job-color-text-light);
    font-size: 15px;
    font-weight: 500;
}

/* 외주 프로젝트 목록 카테고리 버튼의 hover 상태를 정의한다. */
.work-request-page.work-request-view-page .work-request-list-shell .job-category-tab:hover {
    border-color: transparent;
    color: var(--ref-ink);
    background: none;
}

/* 외주 프로젝트 목록 활성 카테고리 버튼을 정의한다. */
.work-request-page.work-request-view-page .work-request-list-shell .job-category-tab.active {
    border-color: transparent;
    border-bottom-color: var(--ref-logo-coral);
    background: none;
    color: var(--ref-ink);
    font-weight: 600;
}

/* 외주 프로젝트 목록 검색 상단 영역을 정의한다. */
.work-request-page .work-request-list-shell .job-search-section {
    display: block;
    margin-bottom: 20px;
}

/* 외주 프로젝트 목록 건수 행을 정의한다. */
.work-request-page .work-request-list-shell .job-search-count-line {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}

/* 외주 프로젝트 목록 검색 제어 행을 정의한다. */
.work-request-page .work-request-list-shell .job-search-control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* 외주 프로젝트 목록 전체 건수 문구를 정의한다. */
.work-request-page .work-request-list-shell .total-count-label {
    margin: 0;
    color: var(--ref-ink);
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
}

/* 외주 프로젝트 목록 전체 건수 숫자를 강조한다. */
.work-request-page .work-request-list-shell .total-count-label span {
    color: var(--ref-logo-coral);
    font-weight: 700;
}

/* 외주 프로젝트 목록 정렬 칩 묶음을 정의한다. */
.work-request-page .work-request-list-shell .work-request-sort-chips {
    gap: 6px;
}

/* 외주 프로젝트 목록 정렬 칩 기본 상태를 정의한다. */
.work-request-page .work-request-list-shell .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;
}

/* 외주 프로젝트 목록 정렬 칩 hover 상태를 정의한다. */
.work-request-page .work-request-list-shell .filter-chip:hover {
    border-color: var(--ref-logo-coral);
    background-color: var(--k-bg-white);
    color: var(--ref-logo-coral);
}

/* 외주 프로젝트 목록 활성 정렬 칩을 정의한다. */
.work-request-page .work-request-list-shell .filter-chip.active {
    border-color: var(--ref-logo-coral);
    background-color: var(--ref-logo-coral);
    color: var(--k-bg-white);
}

/* 외주 프로젝트 목록 검색 입력과 버튼 묶음을 정의한다. */
.work-request-page .work-request-list-shell .job-search-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

/* 외주 프로젝트 목록 검색 박스를 정의한다. */
.work-request-page.work-request-view-page .work-request-list-shell .job-search-box {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    width: 300px;
    min-width: 0;
    height: 36px;
    padding: 0;
    border: 1px solid var(--job-color-border);
    border-radius: var(--k-radius-md);
    background-color: var(--k-bg-white);
}

/* 외주 프로젝트 목록 검색 입력을 정의한다. */
.work-request-page .work-request-list-shell .job-search-input {
    min-width: 0;
    height: 100%;
    flex: 1 1 auto;
    padding: 0 8px 0 10px;
    border: none;
    border-radius: 0;
    background-color: transparent;
    color: var(--ref-ink);
    font-size: 12px;
    box-shadow: none;
}

/* 외주 프로젝트 목록 검색 입력 포커스 상태를 정의한다. */
.work-request-page .work-request-list-shell .job-search-input:focus {
    border: none;
    box-shadow: none;
}

/* 외주 프로젝트 목록 검색 입력 placeholder를 정의한다. */
.work-request-page .work-request-list-shell .job-search-input::placeholder {
    color: var(--job-color-text-light);
}

/* 외주 프로젝트 목록 검색 아이콘 영역을 정의한다. */
.work-request-page .work-request-list-shell .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;
    pointer-events: none;
}

/* 외주 프로젝트 목록 검색 버튼을 정의한다. */
.work-request-page .work-request-list-shell .job-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    width: auto;
    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;
}

/* 외주 프로젝트 목록 검색 버튼 hover 상태를 정의한다. */
.work-request-page .work-request-list-shell .job-search-btn:hover {
    background-color: var(--k-bg-white);
}

/* 외주 프로젝트 데스크톱 라인 목록 외곽선을 정의한다. */
.work-request-page .work-request-list-shell .work-request-brief-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--job-color-border);
}

/* 외주 프로젝트 목록 행 레이아웃을 정의한다. */
.work-request-page .work-request-list-shell .work-request-list-row-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px 92px;
    align-items: start;
    gap: 18px;
    min-height: 112px;
    padding: 22px 16px;
    border: none;
    border-bottom: 1px solid var(--job-color-border);
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    cursor: pointer;
    transition: var(--k-transition-fast);
}

/* 외주 프로젝트 목록 행 hover 상태를 정의한다. */
.work-request-page .work-request-list-shell .work-request-list-row-card:hover {
    border-bottom-color: var(--job-color-border);
    background-color: var(--k-bg-job-subtle);
    box-shadow: none;
    transform: none;
}

/* 외주 프로젝트 목록 행 좌측 본문을 정의한다. */
.work-request-page .work-request-list-shell .work-request-list-row-main {
    display: grid;
    gap: 12px;
    min-width: 0;
}

/* 외주 프로젝트 목록 제목과 관심 버튼 행을 정의한다. */
.work-request-page .work-request-list-shell .work-request-list-title-line {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* 외주 프로젝트 목록 제목을 정의한다. */
.work-request-page .work-request-list-shell .work-request-list-row-title {
    overflow: hidden;
    margin: 0;
    color: var(--ref-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 외주 프로젝트 목록 요약 문구를 정의한다. */
.work-request-page .work-request-list-shell .work-request-list-row-desc {
    overflow: hidden;
    margin: 0;
    color: var(--job-color-text-light);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 외주 프로젝트 목록 의뢰자 정보를 정의한다. */
.work-request-page .work-request-list-shell .work-request-list-row-origin {
    display: block;
    overflow: hidden;
    color: var(--ref-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 외주 프로젝트 목록 의뢰자 정보의 기존 구분점을 제거한다. */
.work-request-page .work-request-list-shell .work-request-list-row-origin span + span::before {
    display: none;
}

/* 외주 프로젝트 목록 메타 정보 묶음을 정의한다. */
.work-request-page .work-request-list-shell .work-request-list-row-meta {
    display: grid;
    gap: 10px;
    min-width: 0;
}

/* 외주 프로젝트 목록 메타 정보 한 줄을 정의한다. */
.work-request-page .work-request-list-shell .work-request-list-row-meta-line {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--job-color-text-light);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

/* 외주 프로젝트 목록 메타 정보 값을 정의한다. */
.work-request-page .work-request-list-shell .work-request-list-row-meta-line strong {
    overflow: hidden;
    color: var(--ref-ink);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 외주 프로젝트 목록 예산 라벨을 값과 같은 강조 색상으로 정의한다. */
.work-request-page .work-request-list-shell .work-request-list-row-meta-line:first-child span {
    color: var(--ref-ink);
}

/* 외주 프로젝트 목록 희망 완료일 라벨과 값을 보조 색상으로 정의한다. */
.work-request-page .work-request-list-shell .work-request-list-row-meta-line:nth-child(2),
.work-request-page .work-request-list-shell .work-request-list-row-meta-line:nth-child(2) strong {
    color: var(--job-color-text-light);
}

/* 외주 프로젝트 목록 지원자 값을 라벨과 같은 보조 색상으로 정의한다. */
.work-request-page .work-request-list-shell .work-request-list-row-meta-line:nth-child(3) strong {
    color: var(--job-color-text-light);
}

/* 외주 프로젝트 목록 마감 정보 영역을 정의한다. */
.work-request-page .work-request-list-shell .work-request-list-row-deadline {
    display: grid;
    justify-items: center;
    gap: 12px;
    color: var(--job-color-text-light);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
}

/* 내 외주 프로젝트 목록 행의 우측 관리 영역 폭을 정의한다. */
.work-request-page.work-request-my-list-page .work-request-list-shell .work-request-list-row-card {
    grid-template-columns: minmax(0, 1fr) 250px 128px;
}

/* 내 외주 프로젝트 목록 지원자 관리 버튼 영역을 정의한다. */

/* 내 외주 프로젝트 목록 지원자 관리 버튼을 목록 밀도에 맞게 정의한다. */

/* 외주 프로젝트 목록 마감 배지를 정의한다. */
.work-request-page .work-request-list-shell .work-request-list-deadline-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 22px;
    padding: 4px 10px;
    border-radius: var(--k-radius-pill);
    background-color: var(--ref-accent-orange-bg-soft);
    color: var(--ref-logo-coral);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* 외주 프로젝트 목록 마감 임박 배지를 정의한다. */
.work-request-page .work-request-list-shell .work-request-list-deadline-badge.is-urgent {
    background-color: var(--ref-accent-orange-bg-soft);
    color: var(--ref-logo-coral);
}

/* 외주 프로젝트 목록 시작일 보조 문구를 정의한다. */
.work-request-page .work-request-list-shell .work-request-list-start-date {
    white-space: nowrap;
}

/* 외주 프로젝트 목록 관심 버튼을 단기 채용 목록과 같은 크기로 정의한다. */
.work-request-page .work-request-list-shell .bookmark-btn {
    flex-shrink: 0;
    min-width: 24px;
    min-height: 24px;
    padding: 2px 4px;
    color: var(--k-color-slate-300);
    font-size: 14px;
}

/* 외주 프로젝트 목록 관심 버튼 hover 상태를 정의한다. */
.work-request-page .work-request-list-shell .bookmark-btn:hover {
    color: var(--ref-logo-coral);
    transform: none;
}

/* 외주 프로젝트 목록 활성 관심 버튼을 정의한다. */
.work-request-page .work-request-list-shell .bookmark-btn.active {
    color: var(--ref-logo-coral);
}

/* 태블릿 폭에서 외주 프로젝트 목록 행을 좁은 화면에 맞춰 재배치한다. */
@media screen and (max-width: 900px) {
    .work-request-page .work-request-list-shell .job-search-control-row,
    .work-request-page .work-request-list-shell .job-search-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .work-request-page.work-request-view-page .work-request-list-shell .job-search-box,
    .work-request-page .work-request-list-shell .job-search-btn {
        width: 100%;
    }

    .work-request-page .work-request-list-shell .work-request-list-row-card {
        grid-template-columns: 1fr;
    }

    .work-request-page .work-request-list-shell .work-request-list-row-deadline {
        justify-items: start;
    }
}

/* 지원내역/관심목록 본문 여백을 목록형 화면과 동일하게 정의한다. */
.application-list-page .application-list-shell {
    max-width: 1200px;
    padding: 32px 32px 48px;
}

/* 지원내역/관심목록 기존 테이블 영역을 라인형 목록 전환 후 숨긴다. */
.application-list-page .application-list-shell .list-view-content {
    display: none;
}

/* 지원내역/관심목록 총 건수 강조 색상을 정의한다. */
.application-list-page .application-list-shell .total-count-label span {
    color: var(--ref-logo-coral);
}

/* 관심목록 정렬 칩 영역을 목록 상단에 맞춰 정렬한다. */
.application-list-page .bookmark-control-row {
    margin-top: 18px;
}

/* 관심목록 정렬 칩 묶음을 정의한다. */
.application-list-page .bookmark-sort-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 관심목록 정렬 칩 기본 스타일을 정의한다. */
.application-list-page .bookmark-sort-chips .filter-chip {
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid var(--k-color-gray-d1);
    border-radius: var(--k-radius-pill);
    background-color: var(--k-bg-white);
    color: var(--ref-gray-700);
    font-size: 13px;
    font-weight: 500;
}

/* 관심목록 정렬 칩 hover 상태를 정의한다. */
.application-list-page .bookmark-sort-chips .filter-chip:hover {
    border-color: var(--ref-logo-coral);
    color: var(--ref-logo-coral);
}

/* 관심목록 정렬 칩 활성 상태를 정의한다. */
.application-list-page .bookmark-sort-chips .filter-chip.active {
    border-color: var(--ref-logo-coral);
    background-color: var(--ref-logo-coral);
    color: var(--k-bg-white);
}

/* 지원자관리 헤더를 목록형 화면의 제목과 액션 구조로 정렬한다. */
.work-request-applicant-page .work-request-applicant-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* 지원자관리 라인형 행은 내부 링크와 버튼 중심으로 동작하도록 정의한다. */
.application-list-page.work-request-applicant-page .history-line-row {
    cursor: default;
}

/* 지원자관리 액션 버튼을 목록 밀도에 맞게 정의한다. */
.work-request-applicant-page .history-line-actions .btn-freemode {
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
}

/* 지원자관리 우측 액션 버튼을 세로로 정렬한다. */
.work-request-applicant-page .history-line-actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
}

/* 지원내역/관심목록 라인형 목록 외곽선을 정의한다. */
.application-list-page .history-line-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid var(--job-color-border);
}

/* 지원내역/관심목록 라인형 목록의 빈 상태를 정의한다. */
.application-list-page .history-line-empty {
    padding: 48px 16px;
    border-bottom: 1px solid var(--job-color-border);
    color: var(--job-color-text-light);
    font-size: 13px;
    text-align: center;
}

/* 지원내역 빈 상태를 중앙 안내와 이동 버튼 구조로 정의한다. */
.application-list-page .my-apply-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    min-height: 240px;
    padding: 56px 16px;
}

/* 지원내역 빈 상태 제목을 정의한다. */
.application-list-page .my-apply-empty-state strong {
    color: var(--ref-ink);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

/* 지원내역 빈 상태 설명을 정의한다. */
.application-list-page .my-apply-empty-state p {
    margin: 0;
    color: var(--job-color-text-light);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

/* 지원내역 빈 상태 이동 버튼을 정의한다. */
.application-list-page .my-apply-empty-state .btn-freemode {
    min-height: 34px;
    padding: 0 14px;
    font-size: 13px;
}

/* 지원내역/관심목록 라인형 행 레이아웃을 정의한다. */
.application-list-page .history-line-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px 128px;
    align-items: start;
    gap: 18px;
    min-height: 112px;
    padding: 22px 16px;
    border-bottom: 1px solid var(--job-color-border);
    cursor: pointer;
    transition: var(--k-transition-fast);
}

/* 지원내역 행의 이미지형 목록 컬럼 폭을 정의한다. */
.application-list-page .my-apply-line-row {
    grid-template-columns: minmax(0, 1fr) 260px 136px;
    padding: 22px 16px;
    align-items: center;
}

/* 관심목록 행의 이미지형 목록 컬럼 폭을 정의한다. */
.application-list-page .bookmark-line-row {
    grid-template-columns: minmax(0, 1fr) 270px 124px;
    min-height: 116px;
    padding: 22px 16px;
}

/* 지원내역/관심목록 라인형 행 hover 상태를 정의한다. */
.application-list-page .history-line-row:hover {
    background-color: var(--k-bg-job-subtle);
}

/* 지원내역/관심목록 라인형 행 좌측 본문을 정의한다. */
.application-list-page .history-line-main {
    display: grid;
    gap: 12px;
    min-width: 0;
}

/* 지원내역 회사명을 제목 위 보조 정보로 정의한다. */
.application-list-page .my-apply-company {
    overflow: hidden;
    color: var(--job-color-text-light);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 지원내역/관심목록 제목과 버튼 행을 정의한다. */
.application-list-page .history-line-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* 지원내역 테이블 제목과 처리상태 배지를 한 줄로 정렬한다. */
.application-list-page .my-apply-title-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
}

/* 지원내역 테이블 제목이 처리상태 배지를 밀어내지 않도록 말줄임 처리한다. */
.application-list-page .my-apply-title-cell .job-title-link {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 지원내역/관심목록 제목을 정의한다. */
.application-list-page .history-line-title {
    overflow: hidden;
    margin: 0;
    color: var(--ref-ink);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 지원내역/관심목록 요약 문구를 정의한다. */
.application-list-page .history-line-desc {
    overflow: hidden;
    margin: 0;
    color: var(--job-color-text-light);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 지원내역 상주 프로젝트 태그 라인을 정의한다. */
.application-list-page .my-apply-tag-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    color: var(--job-color-text-light);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

/* 지원내역 상주 프로젝트 태그 항목 구분선을 정의한다. */
.application-list-page .my-apply-tag-line span {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

/* 지원내역 상주 프로젝트 태그 항목 사이 구분자를 정의한다. */
.application-list-page .my-apply-tag-line span + span::before {
    content: "";
    width: 1px;
    height: 12px;
    margin: 0 10px;
    background-color: var(--job-color-border);
}

/* 지원내역 검토중 배지를 제목 옆 보조 배지로 정의한다. */
.application-list-page .my-apply-review-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 24px;
    padding: 0 12px;
    border-radius: var(--k-radius-pill);
    background-color: var(--ref-accent-orange-bg-soft);
    color: var(--ref-logo-coral);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* 지원내역 모바일 제목과 처리상태 배지를 한 줄로 정렬한다. */
.application-list-page .work-request-card-mobile-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* 지원내역 모바일 제목이 처리상태 배지를 밀어내지 않도록 말줄임 처리한다. */
.application-list-page .work-request-card-mobile-title-row .work-request-card-mobile-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 지원내역/관심목록 출처 정보를 정의한다. */
.application-list-page .history-line-origin {
    overflow: hidden;
    color: var(--ref-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 지원내역/관심목록 메타 정보 묶음을 정의한다. */
.application-list-page .history-line-meta {
    display: grid;
    gap: 10px;
    min-width: 0;
}

/* 관심목록 중앙 상세 정보를 이미지형 문구 구조로 정의한다. */
.application-list-page .bookmark-line-detail {
    display: grid;
    align-content: center;
    gap: 8px;
    min-width: 0;
    color: var(--job-color-text-light);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

/* 관심목록 중앙 상세 정보 항목을 한 줄로 정리한다. */
.application-list-page .bookmark-line-detail span,
.application-list-page .bookmark-line-detail strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 관심목록 중앙 상세 정보 강조 문구를 이미지 기준 회색 톤으로 정의한다. */
.application-list-page .bookmark-line-detail strong {
    color: var(--job-color-text-light);
    font-weight: 500;
}

/* 지원내역 우측 정보 묶음을 이미지형 간격으로 정의한다. */
.application-list-page .my-apply-line-info {
    gap: 9px;
}

/* 지원내역/관심목록 메타 정보 한 줄을 정의한다. */
.application-list-page .history-line-meta-item {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--job-color-text-light);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

/* 지원내역 지역 단독 행을 값 중심으로 정의한다. */
.application-list-page .my-apply-line-info .my-apply-location {
    display: block;
    color: var(--job-color-text-light);
    font-weight: 500;
}

/* 지원내역/관심목록 메타 정보 값을 정의한다. */
.application-list-page .history-line-meta-item strong {
    overflow: hidden;
    color: var(--ref-ink);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 지원내역 외주 프로젝트 예산 라벨과 값을 주요 텍스트 색상으로 표시한다. */
.application-list-page .my-apply-budget-meta,
.application-list-page .my-apply-budget-meta span,
.application-list-page .my-apply-budget-meta strong {
    color: var(--ref-ink);
}

/* 지원내역 외주 프로젝트 지원일 라벨과 값을 보조 텍스트 색상으로 표시한다. */
.application-list-page .my-apply-date-meta,
.application-list-page .my-apply-date-meta span,
.application-list-page .my-apply-date-meta strong {
    color: var(--ref-gray-700);
}

/* 관심 외주 프로젝트 예산 라벨을 값과 같은 강조 색상으로 정의한다. */

/* 관심 외주 프로젝트 희망 완료일 라벨과 값을 보조 색상으로 정의한다. */

/* 관심 외주 프로젝트 지원자 값을 라벨과 같은 보조 색상으로 정의한다. */

/* 지원내역/관심목록 우측 상태와 액션 영역을 정의한다. */
.application-list-page .history-line-side {
    display: grid;
    align-self: center;
    align-content: center;
    justify-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--job-color-text-light);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    justify-content: center;
}

/* 지원내역 우측 상태 문구를 정의한다. */
.application-list-page .my-apply-status-text {
    color: var(--ref-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
}

/* 지원내역/관심목록 우측 보조 날짜를 정의한다. */
.application-list-page .history-line-sub-date {
    white-space: nowrap;
}

/* 관심목록 주요 액션 버튼을 이미지형 목록 버튼으로 정의한다. */
.application-list-page .bookmark-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    min-height: 34px;
    padding: 0 16px;
    border: 1px solid var(--ref-logo-coral);
    border-radius: var(--k-radius-sm);
    background-color: var(--ref-logo-coral);
    color: var(--k-bg-white);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

/* 관심목록 주요 액션 버튼 hover 상태를 정의한다. */
.application-list-page .bookmark-action-btn:hover {
    border-color: var(--ref-accent-orange);
    background-color: var(--ref-accent-orange);
}

/* 관심목록 모바일 액션 버튼 영역을 정의한다. */
.application-list-page .bookmark-mobile-action {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

/* 지원내역/관심목록 액션 버튼 묶음을 정의한다. */
.application-list-page .history-line-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

/* 지원내역/관심목록 액션 버튼을 목록 밀도에 맞게 정의한다. */
.application-list-page .history-line-actions .btn-freemode {
	height: 32px;
    min-height: 30px;
    min-width: 60px;
    padding: 0 12px;
    font-size: 12px;
}

/* 지원내역 하단 안내 박스를 정의한다. */
.application-list-page .my-apply-notice-box {
    display: grid;
    margin-top: 88px;
    padding: 16px;
    border-radius: var(--k-radius-sm);
    background-color: var(--k-color-gray-fa);
    color: var(--job-color-text-light);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

/* 지원내역 하단 안내 문단을 정의한다. */
.application-list-page .my-apply-notice-box p {
    margin: 0;
}

/* 관심목록 하단 안내 문단을 아이콘과 함께 정렬한다. */
.application-list-page .bookmark-notice-box p {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 관심목록 하단 안내 아이콘 색상을 정의한다. */
.application-list-page .bookmark-notice-box i {
    color: var(--career-muted);
}

/* 지원내역/관심목록 관심 버튼을 목록형 화면과 같은 크기로 정의한다. */
.application-list-page .history-line-list .bookmark-btn {
    flex-shrink: 0;
    min-width: 24px;
    min-height: 24px;
    padding: 2px 4px;
    color: var(--ref-logo-coral);
    font-size: 14px;
}

/* 지원내역/관심목록 태블릿 이하 레이아웃을 정의한다. */
@media screen and (max-width: 900px) {
    .application-list-page .application-list-shell .job-search-control-row,
    .application-list-page .application-list-shell .job-search-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .application-list-page .application-list-shell .job-search-box,
    .application-list-page .application-list-shell .job-search-btn {
        width: 100%;
    }

    .application-list-page .history-line-row {
        grid-template-columns: 1fr;
    }

    .application-list-page .my-apply-line-row {
        grid-template-columns: 1fr;
    }

    .application-list-page .history-line-side {
        justify-items: start;
    }

    .application-list-page .my-apply-notice-box {
        margin-top: 36px;
    }
}