.content {
    padding: 30px;
    padding-top: 0px;
    font-size: 1.2em;
    width: 90%; /* 이 부분은 전체 .container 와의 관계에 따라 조정될 수 있습니다. */
                 /* 보통 .container 가 가운데 정렬을 담당하고 .content 는 그 안에서 100%를 차지하거나 패딩만 가집니다. */
                 /* 여기서는 일단 요청대로 유지합니다. */
}

/* ==== 제공해주신 .product-list 및 .product-item 스타일 ==== */
.product-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /* 또는 space-between으로 아이템 사이 간격만 주기 */
    margin-top: 20px;
}

.product-item {
    flex-basis: 30%; 
    margin-bottom: 30px; /* 수직 간격 증가 */
    box-sizing: border-box;
    text-align: center;
    border: 1px solid #eee;
    padding: 15px; /* 내부 여백 증가 */
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08); /* 그림자 약간 조정 */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* 호버 효과를 부드럽게 */
}

.product-item:hover { /* 아이템 전체에 호버 효과 */
    transform: translateY(-5px); /* 살짝 위로 이동 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.12);
}

.product-item a {
    display: block;
    text-decoration: none;
    color: #333; /* 링크 기본 색상 */
}

/* ==== 제공해주신 .product-image-box 및 자식 img 스타일 ==== */
.product-image-box {
    width: 100%;
    padding-top: 100%; /* 1:1 정사각형 비율, 이미지 크기에 따라 조정 가능 */
    position: relative;
    overflow: hidden;
    margin-bottom: 12px; /* 이미지와 캡션 사이 간격 */
    background-color: #f0f0f0;
    border-radius: 4px; /* 이미지 박스 모서리 둥글게 (선택 사항) */
}

.product-image-box img { /* .product-item img 에서 수정 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
    transition: transform 0.3s ease; /* 이미지 호버 효과를 부드럽게 */
}

/* product-item 에 호버했을 때 내부 이미지가 커지도록 수정 */
.product-item:hover .product-image-box img { /* .content img:hover 에서 수정 */
    transform: scale(1.10);
}

/* ==== 제공해주신 .product-caption 스타일 (가격 스타일 추가) ==== */
.product-caption {
    font-size: 0.95em; /* 약간 키움 */
    color: #444; /* 약간 진하게 */
    margin-bottom: 6px;
    font-weight: 500;
    line-height: 1.4;
    /* 텍스트가 길 경우 ... 처리 (선택 사항) */
    /* white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; */
}

.product-price {
    font-size: 1em; /* 캡션보다 약간 크게 */
    color: #e74c3c;
    font-weight: bold;
}


/* ==== 제공해주신 미디어 쿼리 ==== */
@media (max-width: 992px) { /* 좀 더 넓은 범위에서 2열 시작 (768px에서 수정) */
    .product-item {
        flex-basis: 46%; /* 2열일 때 계산 (간격 포함) */
    }
}

@media (max-width: 600px) { /* 좀 더 넓은 범위에서 1열 시작 (480px에서 수정) */
    .product-item {
        flex-basis: 95%; /* 1열일 때 */
    }
    .content { /* 모바일에서는 content 너비를 100%로 */
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
}