/* LabuChat 웹 4a — 호스트 리뷰 목록 (templates/reviews.html). 색은 --c4a-* 토큰만 쓴다. */
.rv4-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 0 12px;
    background: var(--c4a-surface);
    color: var(--c4a-ink);
    font-family: var(--c4a-font-text);
}
.rv4-bar h1 {
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 700 17px/1 var(--c4a-font-text);
}
.rv4-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    color: var(--c4a-ink);
    text-decoration: none;
}
.rv4-icon .ms { font-size: 24px; }

.rv4 { padding: 8px 20px 96px; font-family: var(--c4a-font-text); color: var(--c4a-ink); }

/* 요약 카드 */
.rv4-summary {
    padding: 14px 16px;
    background: var(--c4a-surface-alt);
    border-radius: 16px;
}
.rv4-score { margin: 0; font: 800 36px/1 var(--c4a-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rv4-count { margin: 6px 0 0; font: 400 12px/1 var(--c4a-font-text); color: var(--c4a-text-secondary); }

/* 리뷰 행 */
.rv4-item { display: flex; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--c4a-list-divider); }
.rv4-item:last-child { border-bottom: 0; }
.rv4-avatar {
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 99px;
    object-fit: cover;
    background: var(--c4a-skeleton);
}
.rv4-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c4a-ink);
    color: var(--c4a-surface);
    font: 700 14px/1 var(--c4a-font-text);
}
.rv4-body { flex: 1; min-width: 0; }
.rv4-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rv4-name { font: 600 14px/1.2 var(--c4a-font-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv4-date { flex: none; font: 400 12px/1 var(--c4a-font-text); color: var(--c4a-text-secondary); }
.rv4-stars { display: block; margin-top: 6px; font: 400 13px/1 var(--c4a-font-text); letter-spacing: 1px; color: var(--c4a-ink); }
.rv4-comment { margin: 6px 0 0; font: 400 14px/1.55 var(--c4a-font-text); overflow-wrap: anywhere; }

.rv4-note { padding: 40px 0; text-align: center; font: 400 14px/1.5 var(--c4a-font-text); color: var(--c4a-text-secondary); }

/* 하단 CTA */
.rv4-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    padding: 12px 20px 16px;
    background: var(--c4a-surface);
    border-top: 1px solid var(--c4a-line);
}
.rv4-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: 600px;
    height: 52px;
    margin: 0 auto;
    border-radius: var(--c4a-radius-cta);
    background: var(--c4a-ink);
    color: var(--c4a-surface);
    font: 600 16px/1 var(--c4a-font-text);
    text-decoration: none;
}
.rv4-cta .ms { font-size: 20px; }
.rv4 a:focus-visible { outline: 2px solid var(--c4a-ink); outline-offset: 2px; }
body:has(.rv4-cta) { padding-bottom: 80px; }