<fieldset class="dc-rate" aria-describedby="dc-rate-a-hint">
<legend class="dc-rate__legend">이번 일자리는 어땠나요?</legend>
<div class="dc-rate__stars">
<input class="dc-rate__radio" type="radio" name="dc-rate-a" id="dc-rate-a5" value="5" />
<label class="dc-rate__star" for="dc-rate-a5"><span class="dc-sr">별 5개 — 아주 좋았다</span>★</label>
<input class="dc-rate__radio" type="radio" name="dc-rate-a" id="dc-rate-a4" value="4" />
<label class="dc-rate__star" for="dc-rate-a4"><span class="dc-sr">별 4개</span>★</label>
<input class="dc-rate__radio" type="radio" name="dc-rate-a" id="dc-rate-a3" value="3" checked />
<label class="dc-rate__star" for="dc-rate-a3"><span class="dc-sr">별 3개 — 보통</span>★</label>
<input class="dc-rate__radio" type="radio" name="dc-rate-a" id="dc-rate-a2" value="2" />
<label class="dc-rate__star" for="dc-rate-a2"><span class="dc-sr">별 2개</span>★</label>
<input class="dc-rate__radio" type="radio" name="dc-rate-a" id="dc-rate-a1" value="1" />
<label class="dc-rate__star" for="dc-rate-a1"><span class="dc-sr">별 1개 — 나빴다</span>★</label>
</div>
<p class="dc-rate__hint" id="dc-rate-a-hint">지금 3점 — 보통</p>
</fieldset>
.dc-rate { margin:0; padding:0; border:0; font-family:var(--dc-font); }
.dc-rate__legend { padding:0; margin-bottom:var(--dc-2); font-size:13px; font-weight:600; color:var(--dc-text); }
.dc-rate__stars { position:relative; display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:var(--dc-1); }
.dc-rate__radio { position:absolute; width:1px; height:1px; opacity:0; }
.dc-rate__star { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--dc-r-sm); color:var(--dc-line-field); font-size:28px; line-height:1; cursor:pointer; transition:color var(--dc-fast), transform var(--dc-fast); }
.dc-rate__radio:checked ~ .dc-rate__star { color:var(--dc-warn); }
.dc-rate__stars:hover .dc-rate__star { color:var(--dc-line-field); }
.dc-rate__stars:hover .dc-rate__star:hover, .dc-rate__stars:hover .dc-rate__star:hover ~ .dc-rate__star { color:var(--dc-warn); transform:scale(1.08); }
.dc-rate__radio:focus-visible + .dc-rate__star { outline:2px solid var(--dc-brand); outline-offset:2px; }
.dc-rate__hint { margin:var(--dc-2) 0 0; font-size:12px; color:var(--dc-text-sub); }
.dc-rate__error { margin:var(--dc-2) 0 0; font-size:12px; font-weight:600; color:var(--dc-danger); }
.dc-rate.is-error .dc-rate__legend { color:var(--dc-danger); }
.dc-rate--read { display:flex; align-items:center; gap:var(--dc-2); }
.dc-rate__score { font-size:17px; font-weight:700; color:var(--dc-text); font-variant-numeric:tabular-nums; }
.dc-rate__bar { position:relative; display:inline-block; color:var(--dc-line-field); font-size:18px; letter-spacing:2px; white-space:nowrap; }
.dc-rate__fill { position:absolute; inset:0 auto 0 0; overflow:hidden; color:var(--dc-warn); white-space:nowrap; }
.dc-rate__count { font-size:12px; color:var(--dc-text-mute); }