/* 투자상품 리스트 */
.project-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;}
.project-list.small {grid-template-columns: repeat(4, 1fr);}

/* 투자상품 */
.project {display: flex; flex-direction: column; height: 100%; background-color: #fff; border-radius: 1.5rem; overflow: hidden; box-shadow: 0px 0.6rem 0.64rem 0.06rem rgba(53, 53, 53, 0.14);}

/* 투자상품 썸네일 */
.project-thumbnail {position: relative; display: flex; height: 25rem; overflow: hidden;}
.project-list.small .project-thumbnail {height: 16rem;}

.project-thumbnail-img {position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: cover; transition: scale 0.3s ease-out;}

.project.end .project-thumbnail::after {content: "마감"; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; color: #fff; background-color: rgba(0, 0, 0, 0.38); font-size: 1.8rem; font-weight: bold;}
.project-list.small .project.end .project-thumbnail::after {font-size: 1.6rem;}

/* 투자상품 정보 */
.project-info-container {flex: 1; display: flex; flex-direction: column; padding: 2rem;}
.project-list.small .project-info-container {padding: 1.5rem;}
.project-info-top {display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; padding-bottom: 2rem;}
.project-list.small .project-info-top {padding-bottom: 1.5rem;}

/* 투자상품 상태 */
.project-status-wrap {display: flex; align-items: center; gap: 0.8rem;}
.project-status {display: flex; justify-content: center; align-items: center; gap: 0.4rem; min-width: 8rem; padding: 0.7rem 1rem; color: var(--main-darker); background-color: var(--main-lighter); font-size: 1.4rem; font-weight: bold; line-height: 1.1; border-radius: 0.6rem;}
.project-list.small .project-status {min-width: 6rem; padding: 0.7rem 0.8rem;}

/* 투자상품 연이율 */
.project-earning-rate {display: flex; align-items: flex-end; color: var(--main-darker); margin-left: auto; font-size: 2rem; font-weight: 800; line-height: 1;}
.project-list.small .project-earning-rate {font-size: 1.6rem;}
/* .project-earning-rate::before {content: "연"; padding: 0 0.2em 0.1em 0; font-size: 0.8em;} */
.project-earning-rate-value {font-size: 3rem;}
.project-list.small .project-earning-rate-value {font-size: 2.6rem;}

/* 투자상품 제목 */
.project-title {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: 100%; margin-bottom: 1rem; color: var(--grey-dark); font-size: 1.8rem; font-weight: bold; line-height: 1.4; overflow: hidden; text-overflow: ellipsis;}
.project-list.small .project-title {font-size: 16px;}
/* 투자상품 상세정보 */
.project-info-wrap {display: flex; align-items: center; gap: 1rem; color: var(--grey);}
.project-info {display: inherit; align-items: inherit; gap: inherit; font-size: 1.6rem; line-height: 1.1;}
.project-list.small .project-info {font-size: 1.4rem;}
.project-info:not(:last-child)::after {content: ""; display: block; height: 1rem; width: 0.1rem; background-color: var(--grey-light);}

/* Hover */
@media (hover: hover) {
    /* 투자상품 썸네일 Hover */
    .project:hover .project-thumbnail-img {scale: 1.1;}
}

@media screen and (max-width: 1000px) {
    /* 투자상품 리스트 */
    .project-list {grid-template-columns: repeat(2, 1fr);}
    .project-list.small {grid-template-columns: repeat(3, 1fr);}
}

/* Mobile breakpoint (768px) */
@media screen and (max-width: 768px) {
    /* 투자상품 리스트 */
    .project-list {grid-template-columns: 1fr;}
    .project-list.small {grid-template-columns: repeat(2, 1fr);}

    /* 투자상품 썸네일 */
    .project-thumbnail {height: 22rem;}

    /* 투자상품 정보 */
    .project-info-container {padding: 1.5rem;}
    .project-info-top {padding-bottom: 1.5rem;}

    /* 투자상품 상태 */
    .project-status-wrap {gap: 0.5rem;}
    .project-status {padding: 0.6rem 1.2rem; font-size: 1.4rem; border-radius: 0.6rem;}

    /* 진행률 */
    .project-earning-rate {font-size: 1.6rem;}
    .project-earning-rate-value {font-size: 2.6rem;}

    /* 투자상품 제목 */
    .project-title {margin-bottom: 0.5rem; font-size: 1.6rem;}
    /* 투자상품 상세정보 */
    .project-info {font-size: 1.4rem;}
}

@media screen and (max-width: 450px) {
    /* 투자상품 리스트 */
    .project-list {padding: 0rem;}
    .project-list.small {grid-template-columns: 1fr;}

    /* 투자상품 썸네일 */
    .project-list.small .project-thumbnail {height: 14rem;}
}