/* ==========================================================================
   기존 작성해주신 CSS (오타 수정 포함)
   ========================================================================== */
.start-list-banner.container {
    background-color: #dbe9ff; 
    height: 280px; 
    width: 1116px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    border-radius: 16px;
}

.start-list-banner .left-wrap {
    display: flex; 
    flex-direction: column; 
    width: 240px; 
    z-index: 2; 
    position: relative;
    box-sizing: border-box;
    gap: 10px;
}

.start-list-banner .left-wrap .badge-container {
    position: relative;
}

.start-list-banner .left-wrap .badge-container .badge {
    position: relative; 
    display: inline-block; 
    font-size: 14px; 
    background-color: #b9d2fa; 
    color: #4a7fd6; 
    border-radius: 999px; 
    padding: 4px; 
    width: 200px; 
    font-weight: 600; 
    text-align: center; 
    left: -40px; 
    top : 16px;
}

.start-list-banner .left-wrap .title {
    font-size: 30px;
    line-height: 1.4; 
    text-align: left; 
    font-weight: 600; 
    margin-bottom: 0;
}

.start-list-banner .left-wrap .description {
    text-align: left; 
    font-size: 16px; 
    line-height: 1.4; 
    margin-bottom: 0; 
    z-index: 2;
}

.start-list-banner .bg-image {
    position: absolute; 
    left: 220px; 
    top: 80px; 
    width: 160px; 
    height: 160px; 
    transform: rotate(10deg);
    background-image: url('/images/calendar/start_calendar.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center; 
    pointer-events: none;
    z-index: 1;
}

.action-btn {
    width: 80%;
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-size: 14px;
    height: 36px;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.2s;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("/mobile/images/main/arrow_right.png");
    background-repeat: no-repeat;
    background-position: calc(100% - 10px) center;
    background-size: 12px;
}

.action-btn:active {
    opacity: 0.9;
}

.btn-blue { background-color: #162a45; }

.start-list-banner .card-container{
    width: 630px; 
    /* background-color: aquamarine; */
    height: 100%; 
    z-index: 2; 
    display: flex; 
    padding : 20px; 
    box-sizing: border-box; 
    gap : 20px;
}

/* ==========================================================================
   카드 아이템 기본 스타일 및 그림자/Hover 효과 추가
   ========================================================================== */
.start-list-banner .card-item {
    display: block;        /* inline(a태그 기본값) 구조를 블록으로 변경 */
    text-decoration: none; /* 링크 밑줄 제거 */
    color: inherit;        /* 부모 글자색 상속 (텍스트 색상 변하지 않게) */
    background-color: #fff; 
    border-radius: 8px; 
    flex: 1;

    /* [추가] 초기 그림자 스타일 및 부드러운 애니메이션 설정 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 은은하고 부드러운 그림자 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 변경 시 0.3초간 부드럽게 작동 */
}

/* [추가] 마우스를 올렸을 때(Hover) 효과 */
.start-list-banner .card-item:hover {
    transform: translateY(-6px); /* 위로 6px만큼 살짝 띄움 */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); /* 카드가 뜨면서 그림자도 더 넓고 진해짐 */
}

/* ==========================================================================
   HTML 인라인 스타일을 CSS 클래스로 전환 및 반영
   ========================================================================== */

/* 카드 이미지 감싸는 영역 구문 */
.start-list-banner .card-image-wrap {
    width: 100%; 
    position: relative;
}

/* 카드 이미지 속성 */
.start-list-banner .card-img {
    border-radius: 8px 8px 0 0; 
    width: 100%; 
    aspect-ratio: 1.15;
    display: block; /* 하단 미세 공백 제거용 */
}

/* 출발확정 뱃지와 찜(하트) 아이콘 컨테이너 */
.start-list-banner .card-badge-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
}

/* 출발확정 뱃지 스타일 */
.start-list-banner .status-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #d2042d;
    background: #ffe6eb;
    border-radius: 4px;
    padding: 4px 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); 
    line-height: 1;
    font-size: 12px; /* 기본 폰트 사이즈 추가 */
    font-weight: bold;
}

/* 뱃지 내부 날짜 텍스트 */
.start-list-banner .date-text {
    font-size: 10px;
}

/* 하트 아이콘 스타일 */
.start-list-banner .wish-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); 
    width: 28px;
    height: 28px;
    color: red;
    background: white;
    border-radius: 4px;
    font-size: 20px;
    line-height: 1;
    opacity: 0.8;
}

/* 카드 텍스트 정보 컨테이너 */
.start-list-banner .card-info-wrap {
    display: flex; 
    flex-direction: column; 
    align-items: center;
    padding: 8px; /* 텍스트 공간 확보를 위한 패딩 추가 추천 */
    box-sizing: border-box;
}

/* 서브 타이틀: 1줄 제한 후 ... 처리 */
.start-list-banner .sub-title {
    color: grey; 
    font-size: 10px;
    
    /* [추가] 말줄임 및 1줄 제한 설정 */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    
    /* 높이 균형을 위한 설정 (선택사항) */
    line-height: 1.2;
    height: 1.2em; 
    margin-bottom: 4px;
}

/* 메인 상품명 제목: 2줄 제한 후 ... 처리 */
.start-list-banner .main-title {
    font-size: 11px; 
    line-height: 1.2; 
    font-weight: 600;
    text-align: center;
    margin: 0;

    /* [추가] 말줄임 및 2줄 제한 설정 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    
    /* line-height(1.2) * 2줄 = 2.4em 고정으로 카드의 높이 밸런스 유지 */
    height: 2.4em; 
}

/* 가격 감싸는 영역 */
.start-list-banner .price-wrap {
    margin-top: 4px;
    margin-bottom: 0;
    font-size: 14px;
}

/* 가격 숫자 강조 */
.start-list-banner .price-num {
    color: #d2042d; 
    font-size: 16px; /* 첫 번째 카드 기준 18px로 통일 (원하시면 20px 변경 가능) */
    font-weight: bold;
}