/* ==========================================================================
   구매후기 (review.css)

   ★ 이 화면들의 독자는 <사기 전에 읽는 사람>과 <어르신>이다.
     그래서 글자를 작게 줄이지 않고, 별점을 장식이 아니라 정보로 취급한다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 별점 (fragments/rating.html)

   회색 별 위에 노란 별을 폭 %만큼 겹쳐서 반쪽 별을 만든다.
   ★ 이미지나 아이콘 폰트를 쓰지 않는다 — 별 하나 때문에 폰트 파일을 더 받게 하거나,
     로딩 실패 시 네모가 뜨는 화면을 만들 이유가 없다. 별표 문자는 어느 기기에나 있다.
   -------------------------------------------------------------------------- */
.rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.rating__stars {
    position: relative;
    display: inline-block;
    /* 겹쳐 그리려면 두 겹의 글자 크기·자간이 같아야 한다. 여기서 한 번만 정한다. */
    font-size: var(--font-size-md);
    line-height: 1;
    letter-spacing: 1px;
}

.rating__stars-off {
    color: #d9d6cd;
}

.rating__stars-on {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: #f5a623;
    /* 잘린 별이 다음 줄로 넘어가면 겹침이 어긋난다 */
    white-space: nowrap;
}

.rating__score {
    font-weight: 700;
    color: var(--color-text);
}

.rating__count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   2. 상품 상세의 별점 요약
   -------------------------------------------------------------------------- */

/* 가격 위에 놓이는 줄. 눌러서 후기 탭으로 내려간다 */
.product-detail__rating {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    text-decoration: none;
}

.product-detail__rating-go {
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    text-decoration: underline;
}

.review-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
    margin-bottom: var(--space-5);
    padding: var(--space-5);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.review-summary__score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}

.review-summary__score > strong {
    font-size: var(--font-size-3xl);
    line-height: 1;
    color: var(--color-text);
}

/* 별점 분포 막대.
   평균만 보여 주면 4.2 가 전부 4점인지 5점과 1점이 섞인 것인지 알 수 없다.
   손님에게는 그 차이가 크다. */
.review-bars {
    flex: 1 1 220px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.review-bars__row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 4px;
}

.review-bars__label {
    flex: 0 0 34px;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.review-bars__track {
    flex: 1 1 auto;
    height: 10px;
    background: #e8e5dc;
    border-radius: 999px;
    overflow: hidden;
}

.review-bars__fill {
    display: block;
    height: 100%;
    background: #f5a623;
}

.review-bars__count {
    flex: 0 0 28px;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   3. 후기 목록
   -------------------------------------------------------------------------- */
.review-lead {
    margin-bottom: var(--space-5);
    padding: var(--space-4) var(--space-5);
    /* 실측 117자/줄이었다. 눈이 다음 줄 첫머리를 놓치는 폭이다 */
    max-width: var(--measure);
    background: var(--color-primary-light);
    border-radius: var(--radius-sm);
    line-height: 1.7;
}

/* 후기 본문도 같은 규칙을 따른다 — 여기가 이 화면에서 가장 오래 읽는 글이다 */
.review-item__content {
    max-width: var(--measure);
}

.review-list {
    margin: 0 0 var(--space-6);
    padding: 0;
    list-style: none;
}

.review-item {
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--color-border);
}

.review-item:first-child {
    border-top: 1px solid var(--color-border);
}

.review-item__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.review-item__product {
    font-weight: 700;
    color: var(--color-primary);
}

/* 후기 본문. 손님이 줄바꿈해 쓴 그대로 보여 준다 —
   th:text 는 이스케이프만 하고 줄바꿈은 살리지 못하므로 CSS 가 맡는다. */
.review-item__content {
    margin: 0 0 var(--space-3);
    line-height: 1.8;
    white-space: pre-wrap;
}

/* 사진은 눌러서 크게 볼 수 있다. 어르신에게 작은 썸네일만으로는 부족하다. */
.review-item__photo {
    display: inline-block;
    margin-bottom: var(--space-3);
}

.review-item__photo img {
    max-width: 240px;
    max-height: 240px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.review-item__meta {
    display: flex;
    gap: var(--space-3);
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* 농원 답글. 손님 글과 확실히 구분되어야 한다 —
   같은 모양이면 누가 쓴 글인지 읽는 중에 헷갈린다. */
.review-item__reply {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-tint);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-sm);
}

.review-item__reply p {
    margin: 0;
    line-height: 1.7;
    white-space: pre-wrap;
}

.review-item__reply-title {
    margin-bottom: 4px;
    font-weight: 700;
    font-size: var(--font-size-sm);
    color: var(--color-primary);
}

.review-item__actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

/* --------------------------------------------------------------------------
   4. 작성 화면
   -------------------------------------------------------------------------- */
.review-target {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.review-target__img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.review-target__name {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.review-target__hint {
    margin: 4px 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* 별점 고르기.
   ★ JS 별 위젯이 아니라 <라디오>다. JS 가 안 뜨면 별점을 아예 못 주는데,
     그 실패는 화면에 보이지도 않는다. 라디오는 JS 없이 동작하고 스크린리더도 읽는다. */
.rating-pick {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rating-pick__option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    /* 손가락이 굵어도 빗나가지 않는 높이 */
    min-height: 52px;
    padding: 0 var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.rating-pick__option input {
    width: 22px;
    height: 22px;
    accent-color: var(--color-primary);
}

/* 고른 것이 한눈에 보여야 한다. 테두리 색만 바꾸면 어르신 눈에는 차이가 없다. */
.rating-pick__option:has(input:checked) {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
}

.rating-pick__stars {
    font-size: var(--font-size-xl);
    line-height: 1;
    color: #f5a623;
    letter-spacing: 1px;
}

.rating-pick__label {
    font-size: var(--font-size-md);
    font-weight: 700;
}

.rating-pick--invalid .rating-pick__option {
    border-color: var(--color-danger);
}

.review-form__text {
    min-height: 160px;
    line-height: 1.7;
    resize: vertical;
}

.review-form__current {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.review-form__current img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   5. 주문상세의 후기 진입점
   -------------------------------------------------------------------------- */
.order-review {
    margin: var(--space-5) 0;
    padding: var(--space-4);
    background: var(--color-primary-light);
    border-radius: var(--radius-sm);
}

.order-review__title {
    margin: 0 0 4px;
    font-size: var(--font-size-md);
    font-weight: 700;
}

.order-review__lead {
    margin: 0 0 var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
}

.order-review__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.order-review__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}

.order-review__thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.order-review__name {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   6. 상품 카드의 별점
   -------------------------------------------------------------------------- */
.product-card .rating {
    margin-top: 4px;
}

@media (min-width: 640px) {
    .review-item__photo img {
        max-width: 320px;
        max-height: 320px;
    }
}

/* 후기 적립금 안내. ★ 본문 크기 그대로 둔다 — 작게 만들면 정작 읽어야 할 사람이 못 읽는다. */
.review-target__reward {
    margin: var(--space-2) 0 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-primary-dark);
    border-radius: var(--radius-md);
    background: var(--color-tint);
    font-size: var(--font-size-md);
    line-height: var(--line-height-base);
}