/* --- 메인 박스 컨테이너 --- */
.stb-related-box {
    border: 2px solid #00b894; /* 마닌포스트 시그니처 컬러 */
    background-color: #f8fdfb; /* 아주 연한 민트/화이트 배경 */
    border-radius: 12px;
    padding: 5px 15px 15px 15px;
    margin: 40px 0; /* 본문과 간격 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* 붕 뜬 효과 */
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

/* --- 헤더 --- */
.stb-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 8px;
}

.stb-box-header h3 {
    margin: 0 !important; 
    margin-top: 5px !important; /* 너무 딱 붙으면 답답하니 5px 정도만 */
    font-size: 17px;
    font-weight: 800;
    color: #333;
    letter-spacing: -0.5px;
}

.stb-ad-badge {
    font-size: 10px;
    color: #aaa;
    border: 1px solid #ddd;
    padding: 1px 4px;
    border-radius: 3px;
}

/* --- 카드 아이템 (핵심) --- */
.stb-list-container {
    display: flex;
    flex-direction: column; /* 세로로 쌓기 */
    gap: 10px; /* 아이템 간격 */
}

.stb-card-item {
    display: flex; /* 좌측 이미지, 우측 텍스트 */
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 10px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    align-items: center;
}

.stb-card-item:hover {
    border-color: #00b894;
    transform: translateY(-2px); /* 살짝 올라오는 효과 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* --- 이미지 영역 (고정 크기) --- */
.stb-card-img {
    flex: 0 0 70px; /* 너비 70px 고정 */
    height: 70px;
    margin-right: 12px;
    border-radius: 6px;
    overflow: hidden;
    background: #f0f0f0;
    border: 1px solid #f0f0f0;
}

.stb-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 비율 유지하며 꽉 채우기 */
    display: block;
}

/* --- 텍스트 정보 영역 --- */
.stb-card-info {
    flex: 1; /* 나머지 공간 차지 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0; /* 텍스트 넘침 방지 */
}

.stb-title {
    font-size: 15px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 6px 0 !important;
    line-height: 1.3;
    /* 긴 제목 말줄임표(...) 처리 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- [수정] 하단 영역 (업종 + 가격) --- */
.stb-bottom-row {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    margin-top: 6px; 
}

/* 업종 배지 (왼쪽) - 글자 크기 키움 */
.stb-cat-badge {
    font-size: 13px; /* 기존 11px -> 13px로 확대 */
    color: #555;
    background-color: #f0f2f5;
    padding: 3px 8px; /* 여백도 살짝 늘려서 답답하지 않게 */
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap; 
}

/* 가격 그룹 (오른쪽) */
.stb-price-group {
    display: flex;
    align-items: center;
    font-size: 13px;
    text-align: right;
}

.stb-label {
    color: #999;
    margin-right: 4px;
    font-size: 11px;
}

.stb-price {
    color: #d63031; 
    font-weight: 800;
    font-size: 15px; /* 가격도 균형 맞게 살짝 키움 (선택사항) */
}

/* --- 푸터 (더보기 링크) --- */
.stb-box-footer {
    text-align: right;
    margin-top: 10px;
}

.stb-more-link {
    font-size: 12px;
    color: #888;
    text-decoration: none;
}
.stb-more-link:hover {
    color: #00b894;
    text-decoration: underline;
}

/* --- [추가] 모바일 전용 스타일 --- */
@media screen and (max-width: 768px) {
    /* 모바일에서 제목 글자 크기 살짝 줄임 */
    .stb-title {
        font-size: 18px !important; /* PC(15px) -> 모바일(14px) */
        letter-spacing: -0.5px; /* 자간을 좁혀서 더 많이 들어가게 */
    }
    
    /* 모바일에서는 이미지 크기를 살짝 줄여서 텍스트 공간 확보 (선택사항) */
    .stb-card-img {
        flex: 0 0 65px; /* 70px -> 65px */
        height: 65px;
    }
}