/* index.css */



/* 공통 영역 */
.main-index-content {
    max-width: 75em;
    margin: 0 auto;
    padding-top: 6.25em;
    padding-left: 1.25em;
    padding-right: 1.25em;
}

a{
    text-decoration: none;
}




/* 배너 이미지 */
.index-banner {
    width: 100%;
    max-width: 100%;
    height: 30em;
    border-radius: 0.5em;
    overflow: hidden;
    margin-bottom: 2.5em;
}

.index-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
    display: block;
}




/* 상품 박스 */
.index-product-box {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border-radius: 0.75em;
    border: 1px solid #e0e0e0;
    box-shadow: 0 0.125em 0.3125em rgba(0,0,0,0.05);
    padding: 1em 1.25em;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.index-product-box:hover {
    background-color: #f7f7f7;
}

.index-product-image {
    width: 5em; /* 가로만 설정 */
    flex-shrink: 0;
}

.index-product-image img {
    width: 100%;
    height: auto; /* 비율 유지 */
    display: block;
}

.index-product-info {
    flex-grow: 1;
    margin-left: 1em;
}

.index-product-title {
    font-size: 1.125em;
    font-weight: bold;
    margin-bottom: 0.375em;
    color: #333;
}

.index-product-desc {
    font-size: 0.875em;
    color: #555;
    line-height: 1.4;
}

.index-product-action {
    font-size: 1em;
    font-weight: 500;
    color: #222;
    margin-left: auto;
}




/* 컨텐츠 */

/* 이벤트 섹션 */
.index-event-section {
    margin-top: 4em;
}

.index-event-title {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 1em;
    color: #222;
}

/* 그리드 설정 */
.index-event-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1em; /* 박스 간격 */
}

/* 개별 아이템 박스 */
.index-event-item {
    flex: 0 0 calc(20% - 1em); /* grow: 0, shrink: 0, basis: 20%-gap */
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 0.5em;
    padding: 1em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: box-shadow 0.3s ease;
    cursor: pointer;
}

.index-event-item:hover {
    box-shadow: 0 0.3em 0.8em rgba(0, 0, 0, 0.1);
}

/* 이미지 */
.index-event-image img {
    width: 100%;
    border-radius: 0.5em;
    margin-bottom: 0.75em;
}

/* 작은 날짜글씨 */
.index-event-meta {
    font-size: 0.75em;
    color: #888;
    margin-bottom: 0.3em;
}

/* 제목 */
.index-event-name {
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 0.3em;
    color: #222;
}

/* 설명 */
.index-event-desc {
    font-size: 0.875em;
    color: #555;
    margin-bottom: 0.3em;
}

/* 참가금액 */
.index-event-entry {
    font-size: 0.875em;
    color: #444;
    margin-bottom: 0.2em;
}

/* 거래량 */
.index-event-volume {
    font-size: 0.875em;
    color: #444;
}


.yello {

    background-color: yellow;
    padding: 0;  /* 위아래 여백 거의 없음 */
    border-radius: 0em;
}



/* 반응형 */
/* 반응형 (스마트폰 기준, 600px 이하) */
@media screen and (max-width: 600px) {

    .main-index-content {
        padding:0.5em;
        padding-top:6em;
    }

    /* 배너 세로 줄이기 */
    .index-banner {
        height: 10em;
    }

    /* product box → row (이미지 왼쪽, info 오른쪽) */
    .index-product-box {
        flex-direction: row;
        align-items: flex-start;
        padding: 1em;
        flex-wrap: wrap;
    }

    .index-product-image {
        width: 3.5em;
        margin-right: 0.75em;
        flex-shrink: 0;
    }

    .index-product-info {
        flex: 1;
        margin-left: 0;
        width: auto;
    }

    .index-product-title {
        font-size: 1em;
    }

    .index-product-desc {
        margin-top: 0.5em;
        font-size:0.8em;
    }

    .index-product-action {
        flex-basis: 100%;
        margin-top: 0.75em;
        margin-left: 0;
    }

    /* 이벤트 섹션 - 1줄 1개 */
    .index-event-item {
        flex: 0 0 100%;
    }

    .index-event-title {
        font-size: 1.2em;
    }

    .index-event-name {
        font-size: 0.95em;
    }

    .index-event-meta,
    .index-event-desc,
    .index-event-entry,
    .index-event-volume {
        font-size: 0.8em;
    }
}