@charset "utf-8";/* ==================================================================  list.skin.css 최종 수정본================================================================== *//* ===============================================================   ▼▼▼ [핵심 수정] 정렬 문제 해결을 위한 코드 ▼▼▼================================================================== *//* 1. 썸네일과 뱃지를 감싸는 부모 영역(.list-thumb-area) 스타일 */.list-thumb-area {    width: 210px;       /* 썸네일 영역의 너비를 210px로 고정합니다. */    flex-shrink: 0;     /* 다른 요소에 의해 너비가 줄어드는 것을 방지합니다. */    display: flex;    align-items: center;    justify-content: center;}/* 2. 기존 썸네일 컨테이너는 너비 설정을 제거하고 내부에서 크기를 맞춥니다. */.thumbnail-container {    position: relative;    border-radius: 8px;    width: 100%; /* 부모인 list-thumb-area의 너비를 따릅니다. */}/* 3. 썸네일 이미지 자체의 스타일 (크기 유지를 위해 중요) */.thumbnail-container img {    max-width: 100%; /* 부모 너비를 넘지 않도록 설정 */    height: auto;    /* 이미지 비율 유지 */    transition: transform 0.4s ease;    /* width: 100% 속성을 제거하여 이미지가 강제로 늘어나지 않도록 함 */}/* 4. 헤더와 리스트의 너비를 정확히 일치시킵니다. */.header-thumb {    width: 210px; /* .list-thumb-area 와 동일한 너비 */    flex-shrink: 0;    text-align: center;}.header-info {    flex-grow: 1; /* 남은 공간을 모두 차지 */    text-align: center;    /* position, right 속성 제거하여 flexbox 정렬을 따르도록 함 */}.header-timer {    width: 120px; /* 타이머와 동일한 너비 */    flex-shrink: 0;    text-align: center;}/* ===============================================================   ▲▲▲ [여기까지] 정렬 문제 해결을 위한 코드 ▲▲▲================================================================== *//* 기존 구조는 그대로 유지 */.product-type-scroll .list-item-thumb {    width: 109px;    height: 104px;}.status-badge {    padding: 3px 7px;    font-size: 12px;    color: #ffffff;    font-weight: bold;    border-radius: 4px;    box-shadow: 0 2px 5px rgba(0,0,0,0.2);}.list-badge-container {    position: absolute;    top: -15px;    right: 0px;    z-index: 10;    display: flex;    gap: 4px;    transition: transform 0.3s ease;}.title-badge {    font-size: 11px;    padding: 4px 6px;    border-radius: 4px;    color: #ffffff;    font-weight: bold;    background-color: #6054c8;}body {    font-family: 'Noto Sans KR', sans-serif;    color: #333333;}.job-card {    position: relative;    background: #ffffff;    border: 1px solid #e5e7eb;    border-radius: 5px;    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);    /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); */    opacity: 0;    transform: translateY(20px);    animation: card-fade-in 0.5s ease-out forwards;    padding-top: 15px;    margin-bottom: 12px;}.job-card:nth-child(1) {animation-delay: 0.05s;}.job-card:nth-child(2) { animation-delay: 0.1s; }.job-card:nth-child(3) { animation-delay: 0.15s; }@keyframes card-fade-in {    to { opacity: 1; transform: translateY(0); }}.job-card:hover {    /* transform: translateY(-5px); */    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.05);    border-color: #a098e5;}.job-card:hover .thumbnail-container img {    transform: scale(1.08);}.job-card:hover .store-name {    color: #a254c8;}.job-card:hover .list-badge-container {    transform: translateY(-3px) scale(1.05);}.jump-timer-wrapper {position: relative;width: 100px;height: 35px;}.jump-timer-wrapper svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(-90deg); }.timer-bg { stroke: #e5e7eb; fill: none; stroke-width: 8; }.timer-progress { stroke: #6054c8; fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1s linear; filter: drop-shadow(0 0 5px rgba(96, 84, 200, 0.4)); }.timer-text { position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 14px; }.timer-text .time {font-weight: 700;letter-spacing: 1px;color: #555;}.timer-text .label { font-size: 10px; color: #6b7280; margin-top: 2px; }.store-name {    color: #6054c8;    font-weight: 700;    font-size: 1.15rem;    transition: color 0.3s ease;}.store-region {color: #6b7280;font-weight: 600;}.job-title { color: #374151; font-weight: 500; }.notice-card { background: #fafafa; border-color: #e5e7eb; }.list-header {    display: none;}@media (min-width: 640px) {    .list-header {        display: flex;        align-items: center;        gap: 1.25rem;        padding: 15px; /* 좌우 패딩 추가하여 카드와 맞춤 */        margin-bottom: 1rem;        border-radius: 5px;        background-color: #ffffff;        font-weight: 600;        color: #555;        font-size: 14px;        text-transform: uppercase;        letter-spacing: 0.05em;        border-bottom: 1px solid #e5e7eb;    }}/* 뱃지 배경 색상은 기존 디자인 유지 */.badge-urgent { background-color: #ef4444de; }.badge-recommend { background-color: #f39c12de; }.badge-open { background-color: #22c55ede; }.badge-guarantee { background-color: #3b82f6de; }/* 지원자 보기 버튼 스타일 */.btn_applicant_view {    display: inline-block;    padding: 5px 10px;    background: #e9ecef;    color: #495057;    border: 1px solid #dee2e6;    border-radius: 4px;    font-size: 13px;    text-decoration: none;    margin-left: 10px;}.btn_applicant_view:hover {    background: #dee2e6;}/* Region Filter Wrapper & Bar Styling */.region-filter-wrapper {    margin-bottom: 2rem;     /* 좌우 여백 */}.region-filter-bar {    display: flex;    flex-wrap: wrap; /* 모바일에서 요소들이 줄바꿈되도록 */    align-items: center;    gap: 1rem; /* 요소들 사이 간격 */    background-color: #fff; /* 흰색 배경 */    border: 1px solid #e0e0e0; /* 연한 테두리 */    border-radius: 5px; /* 둥근 모서리 */    padding: 1rem;    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 은은한 그림자 */}.region-select-group {    display: flex;    gap: 0.5rem; /* 셀렉트 박스 간 간격 */    flex-grow: 1; /* 가능한 공간을 차지하도록 */    min-width: 250px; /* 너무 작아지지 않도록 최소 너비 설정 */}/* Custom Selectbox Styling */.custom-select {    display: block;    width: 100%;    font-size: 1rem;    line-height: 1.5;    color: #495057;    background-color: #f8f9fa; /* 연한 배경색 */    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5L8 11L14 5'/%3e%3c/svg%3e"); /* 드롭다운 아이콘 */    background-repeat: no-repeat;    background-position: right 0.75rem center;    background-size: 16px 12px;    border: 1px solid #ced4da;    border-radius: 0.25rem;    -webkit-appearance: none;    -moz-appearance: none;    appearance: none;    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;}.custom-select:focus {    border-color: #80bdff;    outline: 0;    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);}.custom-select:disabled {    background-color: #e9ecef;    opacity: 1;}/* Filter Options (Checkbox) Styling */.filter-options {    display: flex;    align-items: center;}.custom-checkbox-label {    display: flex;    align-items: center;    cursor: pointer;    font-size: 1rem;    color: #343a40;    user-select: none; /* 텍스트 선택 방지 */    margin-bottom: 0; /* Bootstrap 기본 margin-bottom 제거 */}.custom-checkbox {    position: absolute;    opacity: 0;    cursor: pointer;    height: 0;    width: 0;}.checkbox-indicator {    display: inline-block;    position: relative;    width: 20px;    height: 20px;    background-color: #f8f9fa;    border: 1px solid #ced4da;    border-radius: 4px;    margin-right: 8px;    transition: all 0.2s ease;}.custom-checkbox:checked + .checkbox-indicator {    background-color: #007bff; /* 체크 시 파란색 (이미지의 파란색 박스 참고) */    border-color: #007bff;}.custom-checkbox:checked + .checkbox-indicator::after {    content: '';    position: absolute;    left: 6px;    top: 2px;    width: 6px;    height: 12px;    border: solid white;    border-width: 0 3px 3px 0;    transform: rotate(45deg);}/* Responsive Adjustments */@media (max-width: 768px) {    .region-filter-wrapper {        padding: 0 0.5rem; /* 모바일 좌우 여백 */    }    .region-filter-bar {        flex-direction: column; /* 세로로 정렬 */        align-items: flex-start; /* 왼쪽 정렬 */        gap: 0.8rem;        padding: 0.8rem;    }    .region-select-group {        flex-direction: column; /* 셀렉트 박스도 세로 정렬 */        gap: 0.8rem;        width: 100%; /* 전체 너비 차지 */        min-width: unset;    }    .filter-options {        width: 100%; /* 전체 너비 차지 */        justify-content: flex-start; /* 왼쪽 정렬 */        margin-top: 0.5rem;    }}