/* PC 버전 테이블 스타일 */
.responsive-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.responsive-table thead {
    background-color: #f1f3f5;
}

.responsive-table th, .responsive-table td {
    padding: 12px 15px;
    font-size: 0.75rem;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.responsive-table th {
    font-weight: 600;
    color: var(--text-muted);
    
}

.reward-value {
    font-weight: bold;
    color: var(--primary-color);
}
.chef-recipe-img {
        width: 350px !important; 
        height: auto !important;
        border-radius: 15px; /* 둥근 모서리 크기 */
        object-fit: cover; /* 이미지가 찌그러지지 않고 비율을 유지하도록 합니다. */
        margin: 15px 0; /* 중앙 정렬을 위한 마진 설정 (위/아래 15px, 좌/우 0) */
        display: block; /* margin: auto를 위해 block 요소로 변경 */
        border: 1px solid #ddd; /* 선택사항: 테두리 추가 */
    }
/* 정렬 수정 - PC 및 대형 화면용 */
@media screen and (min-width: 769px) {
    /* '구매상품' 열 (두 번째 열) 왼쪽 정렬 */
    .responsive-table th:nth-child(2),
    .responsive-table td:nth-child(2),
    .responsive-table td:nth-child(4) {
        text-align: left;
    }

    /* 리워드 관련 열 (세 번째, 네 번째, 다섯 번째 열) 오른쪽 정렬 */
    
    .responsive-table th:nth-child(5),
    .responsive-table td:nth-child(5),
    .responsive-table th:nth-child(6),
    .responsive-table td:nth-child(6),
    .responsive-table th:nth-child(7),
    .responsive-table td:nth-child(7) {
        text-align: right;
    }
}
/* 모바일 대응 (반응형의 핵심) */
@media screen and (max-width: 768px) {
    .left-title {
        font-size: 25px !important;  /* 모바일에서 줄어들 글자 크기 */
    }
    .responsive-table thead {
        display: none; /* 헤더 숨김 */
    }

    .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td {
        display: block;
        width: 100%;
    }

    .responsive-table tr {
        margin-bottom: 15px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 10px;
        background: #fff;
    }

    .responsive-table td {
        text-align: right;
        padding: 8px 10px;
        border-bottom: 1px dashed #eee;
        position: relative;
        padding-left: 50%; /* 레이블 공간 확보 */
    }

    .responsive-table td:last-child {
        border-bottom: none;
    }

    /* 데이터 이름(레이블) 강제 삽입 */
    .responsive-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        width: 45%;
        font-weight: 600;
        text-align: left;
        color: var(--text-muted);
    }
}