/* Block Skin: review_auto/basic — 쇼핑몰 구매후기 카드
 *
 * 카드 구조(세로):
 *   1) 별점 + 작성자
 *   2) 뱃지
 *   3) 사진(겹침 스택)
 *   4) 내용
 *   5) 날짜
 *   (하단 푸터) 상품 — 썸네일 + 상품명(2줄 클램프)
 */

.block-review--shop-basic .block-review__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 그리드 아이템이 트랙(1fr)으로 줄어들 수 있도록 min-width 해제
   (긴 콘텐츠가 가로 오버플로를 유발하지 않도록) */
.block-review--shop-basic .block-review__item {
    min-width: 0;
}

.block-review--shop-basic .block-review__card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 100%;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
}

/* 1) 별점 + 작성자 */
.block-review--shop-basic .block-review__head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.block-review--shop-basic .block-review__rating {
    flex-shrink: 0;
    white-space: nowrap;
    color: var(--color-amber-500);
    font-size: 1.05rem;     /* 살짝 키움 */
    letter-spacing: -1px;   /* 별 간격 좁힘 */
}

.block-review--shop-basic .block-review__author {
    margin-left: auto;
    min-width: 0;
    font-weight: 400;       /* 굵기 해제 */
    font-size: 0.72rem;     /* 작게 */
    color: var(--muted-foreground);  /* 연하게 (자기 이름 부담 줄이기) */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 2) 뱃지 */
.block-review--shop-basic .block-review__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.block-review--shop-basic .block-review__badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 0.7rem;
    line-height: 1.5;
    color: var(--color-white);
}

.block-review--shop-basic .block-review__badge--best { background: var(--destructive); }
.block-review--shop-basic .block-review__badge--photo { background: var(--color-indigo-500); }

/* 3) 사진 — 스택형. 1번이 맨 위(앞), 2번째부터 좌우 5도씩 기울여 아래로 깔기.
   "여러 장 있음"을 살짝 흐트러진 사진 더미로 표현. */
.block-review--shop-basic .block-review__images {
    position: relative;
    width: 118px;
    height: 70px;
    margin-bottom: 2px;
}

.block-review--shop-basic .block-review__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid var(--card);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    transform-origin: center;
}

/* 1번 맨 위 → 뒤로 갈수록 옆으로 펼치며 좌우 번갈아 기울임 (top은 가지런히) */
.block-review--shop-basic .block-review__img:nth-child(1) { z-index: 3; }
.block-review--shop-basic .block-review__img:nth-child(2) { z-index: 2; transform: translateX(26px) rotate(5deg); }
.block-review--shop-basic .block-review__img:nth-child(3) { z-index: 1; transform: translateX(52px) rotate(-5deg); }

/* 4) 내용 */
.block-review--shop-basic .block-review__text {
    font-size: 0.9rem;
    color: var(--foreground);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 5) 날짜 — 내용 바로 아래 */
.block-review--shop-basic .block-review__date {
    white-space: nowrap;
    font-size: 0.78rem;
    color: var(--muted-foreground);
}

/* 상품 푸터: 썸네일 + 상품명(2줄 클램프), 카드 하단 고정 */
.block-review--shop-basic .block-review__product {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid var(--border-subtle);
    text-decoration: none;
    color: inherit;
}

.block-review--shop-basic .block-review__product-thumb {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.block-review--shop-basic .block-review__product-name {
    flex: 1;
    min-width: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--muted-foreground);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.block-review--shop-basic .block-review__product:hover .block-review__product-name {
    text-decoration: underline;
}

/* 빈 상태 — 점선 박스 (board/코어 톤, 패키지/플러그인 소유) */
.block-review-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 100px;
    padding: 16px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    color: color-mix(in srgb, var(--muted-foreground) 55%, transparent);
    font-size: 0.875rem;
    text-align: center;
}

.block-review-empty__icon {
    font-size: 1.75rem;
    line-height: 1;
}