/* jobhuman.css */

/* 투명 배경 확인을 위한 체크무늬 패턴 */
.bg-checkered {
    background-color: #ffffff;
    background-image: linear-gradient(45deg, #e5e7eb 25%, transparent 25%), 
                      linear-gradient(-45deg, #e5e7eb 25%, transparent 25%), 
                      linear-gradient(45deg, transparent 75%, #e5e7eb 75%), 
                      linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* [수정] 그리드 컨테이너 스타일 */
#jobhuman-grid {
    display: grid;
    /* [요청] PC에서 jpg 미리보기 사이즈 150px * 150px 설정 */
    grid-template-columns: repeat(auto-fill, 150px);
    gap: 0.1rem; /* 이미지 사이 간격 */
    padding: 0.1rem;
}

/* [수정 2] 모바일 화면 설정 */
@media (max-width: 767px) {
    #jobhuman-grid {
        /* [요청] 모바일에서 jpg 미리보기 사이즈 70px * 70px 설정 */
        grid-template-columns: repeat(auto-fill, 85px);
        /* [요청] 모바일 맨 좌측 여백 2px, 나머지 패딩 0 */
        padding: 0;
        padding-left: 2px;
    }
}

/* 그리드 이미지 아이템 스타일 */
.jobhuman-item {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    background: #f9fafb;
    
    /* 그리드 셀 너비(설정된 값)를 따름 */
    width: 100%; 
    /* 정사각형 비율 유지 */
    aspect-ratio: 1 / 1; 
}

.jobhuman-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.jobhuman-item img {
    transition: transform 0.3s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jobhuman-item:hover img {
    transform: scale(1.05);
}

/* ======================================================== */
/* ▼▼▼ [신규] 필터 바 스타일 (analysis.css 참고) ▼▼▼ */
/* ======================================================== */

/* 개별 필터 아이템 (레이블 + 셀렉트박스) */
.analysis-filter-item {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* 8px */
}

/* 필터 레이블 (예: '직업:') */
.filter-label {
    font-size: 0.875rem; /* text-sm */
    color: #4b5563; /* gray-600 */
}

/* 모바일에서는 필터 바의 좌우 패딩을 줄여 공간 확보 */
@media (max-width: 767px) {
    #jobhuman-filter-bar {
        padding-left: 1rem; /* 모바일 좌우 패딩: px-4 (1rem) */
        padding-right: 1rem;
    }
}
/* ▲▲▲ [신규] ▲▲▲ */