반폭 · 리뷰 평점 요약(별점 분포와 대표 문장)

쇼핑몰이나 플레이스 리뷰의 평균 평점, 별점 분포, 자주 나오는 칭찬과 불만 한 문장씩을 절반 칸에. 분포 5행 고정, 대표 문장 2개(각 18자 이내). 값 바꾸는 법: .n=평균 평점. 별 채움은 .st 안 span 의 width = 평점 ÷ 5 × 100(%). .dist 의 .b 5개가 5점~1점, 막대 i 의 width = 비율(%). .q 2개가 대표 문장(.k=구분, .d=문장, .c=언급 건수).

직접 제작. 쇼핑몰 상품 리뷰 요약 영역의 일반 구성(평균 평점, 별점 분포 막대)을 참고. 별은 인라인 SVG, 강조색은 별에만.

<div class="dk dkh dkh-a-review"><div class="dk-card"><p class="dk-lb">구매 리뷰 요약 · 최근 12개월</p>
<div class="top"><div class="sc"><div class="n">4.6<small>/ 5</small></div><div class="st"><svg width="108" height="20" viewBox="0 0 108 20"><path transform="translate(0 0)" d="M10 1.5 12.6 7.2 18.8 7.9 14.2 12.1 15.5 18.3 10 15.2 4.5 18.3 5.8 12.1 1.2 7.9 7.4 7.2Z"/><path transform="translate(22 0)" d="M10 1.5 12.6 7.2 18.8 7.9 14.2 12.1 15.5 18.3 10 15.2 4.5 18.3 5.8 12.1 1.2 7.9 7.4 7.2Z"/><path transform="translate(44 0)" d="M10 1.5 12.6 7.2 18.8 7.9 14.2 12.1 15.5 18.3 10 15.2 4.5 18.3 5.8 12.1 1.2 7.9 7.4 7.2Z"/><path transform="translate(66 0)" d="M10 1.5 12.6 7.2 18.8 7.9 14.2 12.1 15.5 18.3 10 15.2 4.5 18.3 5.8 12.1 1.2 7.9 7.4 7.2Z"/><path transform="translate(88 0)" d="M10 1.5 12.6 7.2 18.8 7.9 14.2 12.1 15.5 18.3 10 15.2 4.5 18.3 5.8 12.1 1.2 7.9 7.4 7.2Z"/></svg><span style="width:92%"><svg width="108" height="20" viewBox="0 0 108 20"><path transform="translate(0 0)" d="M10 1.5 12.6 7.2 18.8 7.9 14.2 12.1 15.5 18.3 10 15.2 4.5 18.3 5.8 12.1 1.2 7.9 7.4 7.2Z"/><path transform="translate(22 0)" d="M10 1.5 12.6 7.2 18.8 7.9 14.2 12.1 15.5 18.3 10 15.2 4.5 18.3 5.8 12.1 1.2 7.9 7.4 7.2Z"/><path transform="translate(44 0)" d="M10 1.5 12.6 7.2 18.8 7.9 14.2 12.1 15.5 18.3 10 15.2 4.5 18.3 5.8 12.1 1.2 7.9 7.4 7.2Z"/><path transform="translate(66 0)" d="M10 1.5 12.6 7.2 18.8 7.9 14.2 12.1 15.5 18.3 10 15.2 4.5 18.3 5.8 12.1 1.2 7.9 7.4 7.2Z"/><path transform="translate(88 0)" d="M10 1.5 12.6 7.2 18.8 7.9 14.2 12.1 15.5 18.3 10 15.2 4.5 18.3 5.8 12.1 1.2 7.9 7.4 7.2Z"/></svg></span></div><div class="c">리뷰 1,280건</div></div>
<div class="dist">
<div class="b"><span>5점</span><span class="t"><i style="width:68%"></i></span><span class="p">68%</span></div>
<div class="b"><span>4점</span><span class="t"><i style="width:21%"></i></span><span class="p">21%</span></div>
<div class="b"><span>3점</span><span class="t"><i style="width:6%"></i></span><span class="p">6%</span></div>
<div class="b"><span>2점</span><span class="t"><i style="width:3%"></i></span><span class="p">3%</span></div>
<div class="b"><span>1점</span><span class="t"><i style="width:2%"></i></span><span class="p">2%</span></div>
</div></div>
<div class="qs">
<div class="q"><span class="k">자주 나온 칭찬</span><span class="d">소음이 작아 밤에도 사용 가능</span><span class="c">214건</span></div>
<div class="q"><span class="k">자주 나온 불만</span><span class="d">배터리 교체 방법 안내 부족</span><span class="c">57건</span></div>
</div>
<p class="nt">자사 쇼핑몰 구매 리뷰 기준 · 예시 값</p></div></div>

.dkh-a-review .dk-card{display:flex;flex-direction:column;padding:22px 26px}
.dkh-a-review .dk-lb{flex:none;margin:0 0 10px}
.dkh-a-review .nt{flex:none;margin:8px 0 0;font-size:var(--f-cap);color:var(--mu);line-height:1.4}
.dkh-a-review .top{flex:none;display:grid;grid-template-columns:118px 1fr;column-gap:20px;align-items:center;padding:10px 0 14px;border-top:1px solid var(--line2)}
.dkh-a-review .n{font-size:var(--f-num);font-weight:700;line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.dkh-a-review .n small{font-size:var(--f-sm);font-weight:400;color:var(--mu);margin-left:6px;letter-spacing:0}
.dkh-a-review .st{position:relative;width:108px;height:20px;margin:6px 0 4px}
.dkh-a-review .st svg{display:block}
.dkh-a-review .st > svg path{fill:var(--g1)}
.dkh-a-review .st span{position:absolute;left:0;top:0;height:20px;overflow:hidden}
.dkh-a-review .st span path{fill:var(--ac)}
.dkh-a-review .sc .c{font-size:var(--f-cap);color:var(--mu)}
.dkh-a-review .dist{display:flex;flex-direction:column;gap:3px}
.dkh-a-review .b{display:grid;grid-template-columns:28px 1fr 34px;column-gap:8px;align-items:center;font-size:var(--f-cap);color:var(--mu);line-height:1.4}
.dkh-a-review .t{display:block;height:8px;background:var(--soft);border-radius:4px}
.dkh-a-review .t i{display:block;height:100%;background:var(--g3);border-radius:4px}
.dkh-a-review .p{text-align:right;color:var(--ink2);font-variant-numeric:tabular-nums}
.dkh-a-review .qs{flex:1;min-height:0;display:flex;flex-direction:column}
.dkh-a-review .q{flex:1;display:grid;grid-template-columns:90px 1fr auto;column-gap:12px;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:var(--f-sm);line-height:1.45}
.dkh-a-review .q .k{font-size:var(--f-cap);color:var(--mu);white-space:nowrap}
.dkh-a-review .q .d{font-weight:600;color:var(--ink)}
.dkh-a-review .q .c{font-size:var(--f-cap);color:var(--mu);white-space:nowrap}