/**
 * KEAD Job List Styles
 */

* {
	box-sizing: border-box;
    font-family: 'Noto Sans KR', sans-serif;
}

/* 필터 스타일 */
.kead-job-filter {
    background: linear-gradient(135deg, #f8f9fa, #e8f0fe);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 4px 10px rgba(66, 133, 244, 0.08);
    border-left: 4px solid #4285f4;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}

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

.filter-group {
    flex: 1;
    min-width: 200px;
}

.filter-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: #4285f4;
}

.filter-select,
.filter-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #e8f0fe;
    border-radius: 4px;
    font-size: 0.9rem;
}

.search-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

.search-group label {
    width: 100%;
}

.search-group .filter-input {
    flex: 1;
    min-width: 200px;
}

/* 버튼 스타일 */
.primary-button {
    background-color: #4285f4;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.reset-button {
    background-color: #f8f9fa;
    color: #666;
    padding: 10px 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.primary-button:hover,
.reset-button:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

/* 섹션 제목 */
.section-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #4285f4;
    margin-bottom: 20px;
}

/* 카드형 UI */
.kead-job-cards {
    margin-bottom: 40px;
}

.card-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.job-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.job-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.card-header {
    padding: 15px;
    background-color: #f8f9fa;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.card-title {
    font-weight: 700;
    font-size: 1rem;
    color: #333;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-dday {
    font-size: 0.8rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    color: white;
}

.dday-urgent {
    background-color: #d32f2f;
}

.dday-warning {
    background-color: #ff9800;
}

.dday-closed {
    background-color: #9e9e9e;
}

.card-body {
    padding: 15px;
}

.card-job {
    font-weight: 600;
    margin-bottom: 10px;
    color: #4285f4;
}

.card-addr {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-salary {
    font-size: 0.9rem;
    color: #333;
    font-weight: 600;
}

.card-footer {
    padding: 10px 15px;
    background-color: #f8f9fa;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
}

.card-env-tags {
    display: flex;
    gap: 5px;
}

.env-tag {
    font-size: 1.2rem;
    cursor: help;
}

.card-emp-type {
    font-size: 0.8rem;
    padding: 3px 8px;
    background-color: #e8f0fe;
    color: #4285f4;
    border-radius: 4px;
}

.job-row {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.job-row:hover {
    background-color: #f8f9fa;
}

.job-detail-row {
    background-color: #f8f9fa;
}

.job-detail {
    padding: 20px !important;
}

.detail-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.detail-section {
    flex: 1;
    min-width: 250px;
}

.detail-section div {
    margin-bottom: 8px;
}

.detail-section h4 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #4285f4;
}

.env-section {
    flex-basis: 100%;
}

/* 페이지네이션 */
.pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.pagination-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 5px;
}

.pagination-item {
    margin: 0;
}

.pagination-link {
    display: block;
    padding: 8px 12px;
    background-color: #f8f9fa;
    color: #666;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.pagination-link:hover {
    background-color: #e8f0fe;
    color: #4285f4;
}

.pagination-link.active {
    background-color: #4285f4;
    color: white;
}

/* 결과 없음 메시지 */
.no-jobs {
    text-align: center;
    padding: 20px;
    color: #666;
}

/* 반응형 */
@media (max-width: 768px) {
    .filter-group {
        flex-basis: 100%;
    }
    
    .card-container {
        grid-template-columns: 1fr;
    }
    
    .detail-section {
        flex-basis: 100%;
    }
}

/* 툴팁 스타일 */
.env-tag {
    position: relative;
    cursor: help;
}

.env-tag .tooltip {
    visibility: hidden;
    width: 120px;
    background-color: #4285f4;
    color: white;
    text-align: center;
    border-radius: 4px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.8rem;
    pointer-events: none;
}

.env-tag .tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #4285f4 transparent transparent transparent;
}

.env-tag:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

/* 마감일 스타일 수정 - 색상 제거 */
.job-dday {
    font-size: 0.9rem;
    font-weight: 600;
}

/* 기존 색상 클래스는 카드형 UI에만 사용 */
.card-dday.dday-urgent {
    background-color: #d32f2f;
}

.card-dday.dday-warning {
    background-color: #ff9800;
}

.card-dday.dday-closed {
    background-color: #9e9e9e;
}

/* 리스트형 UI */
.kead-job-list {
    margin-bottom: 40px;
}

.list-container {
    overflow-x: auto;
}

/* 테이블 전체 스타일 */
#job-table {
    table-layout: fixed; /* 고정 레이아웃 사용 */
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

/* 테이블 헤더 개선 */
#job-table th {
    background-color: #4285f4; /* 더 진한 배경색 */
    color: white; /* 텍스트 색상 */
    padding: 12px 10px; /* 패딩 조정 */
    text-align: left;
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

/* 테이블 셀 패딩 조정 */
#job-table td {
    padding: 12px 10px;
    vertical-align: middle;
    border-bottom: 1px solid #eee;
}

/* 번호 열 스타일 */
#job-table th:first-child,
#job-table td:first-child {
    width: 60px; /* 너비 최소화 */
    text-align: center; /* 가운데 정렬 */
}

/* 고용형태 열 스타일 */
#job-table th:nth-child(5),
#job-table td:nth-child(5) {
    width: 100px; /* 충분한 너비 확보 */
    white-space: nowrap; /* 줄바꿈 방지 */
}

/* 사업장명과 모집직종에 더 많은 공간 할당 */
#job-table th:nth-child(2),
#job-table td:nth-child(2) {
    width: 20%; /* 사업장명 */
}

#job-table th:nth-child(3),
#job-table td:nth-child(3) {
    width: 20%; /* 모집직종 */
}

/* 마감일 열 스타일 */
#job-table th:last-child,
#job-table td:last-child {
    width: 90px;
    text-align: center;
}

/* 테이블 행 스타일 */
.job-row {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.job-row:hover {
    background-color: #f8f9fa;
}

.job-detail-row {
    background-color: #f8f9fa;
}

/* 상세 내용 스타일 - 가운데 정렬 방지 */
.job-detail {
    text-align: left !important; /* 상세 내용은 항상 왼쪽 정렬 */
}

.detail-container {
    text-align: left;
}

/* 상세 내용의 모든 요소가 왼쪽 정렬되도록 */
.detail-section h4,
.detail-section div {
    text-align: left;
}

/* 카드 컨테이너 스타일 - 6개 카드를 위한 그리드 조정 */
#job-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3열 그리드 */
    grid-gap: 20px;
    margin-bottom: 30px;
}

@media (max-width: 992px) {
    #job-cards {
        grid-template-columns: repeat(2, 1fr); /* 태블릿에서는 2열 */
    }
}

@media (max-width: 576px) {
    #job-cards {
        grid-template-columns: 1fr; /* 모바일에서는 1열 */
    }
}

.dday-soon {
    background-color: #4285f4;  /* 파란색 배경 또는 원하는 색상 */
}

/* 비활성화된 페이지네이션 링크 */
.pagination-link.disabled {
    background-color: #f1f1f1;
    color: #ccc;
    cursor: not-allowed;
    padding: 8px 12px;
    display: block;
    border-radius: 4px;
}

/* 처음으로/끝으로 버튼 스타일 */
.pagination-link[data-page="1"],
.pagination-link[data-page="last"] {
    font-weight: bold;
}

.title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #4285f4;
    margin-bottom: 5px;
}
.subtitle {
    font-size: 1rem;
    color: #666;
    margin-bottom: 10px;
}

.kead-job-list-source {
    font-size: 0.8rem;
    color: #666;
    margin-top: 30px;
    text-align: center;
}

.kead-container {
    max-width: 1200px;
    margin: 0 auto;
}