<article class="dc-stat">
<h3 class="dc-stat__label">이번 달 정산액</h3>
<p class="dc-stat__value">4,820<span class="dc-stat__unit">만원</span></p>
<p class="dc-stat__delta dc-stat__delta--up"><span class="dc-stat__arrow" aria-hidden="true">▲</span>+12.4%<span class="dc-stat__period">지난달 대비</span></p>
</article>
.dc-stat {
display: flex; flex-direction: column; gap: var(--dc-2);
min-width: 170px; max-width: 260px;
padding: var(--dc-4);
background: var(--dc-surface);
border: 1px solid var(--dc-line);
border-radius: var(--dc-r-md);
font-family: var(--dc-font);
}
.dc-stat__label { margin: 0; font-size: 13px; font-weight: 600; color: var(--dc-text-sub); }
.dc-stat__value {
margin: 0; font-size: 32px; font-weight: 700; line-height: 1.1;
letter-spacing: -0.01em; color: var(--dc-text);
}
.dc-stat__unit { margin-left: var(--dc-1); font-size: 14px; font-weight: 600; color: var(--dc-text-sub); }
.dc-stat__delta {
display: flex; align-items: center; gap: var(--dc-1);
margin: 0; font-size: 12px; font-weight: 700;
color: var(--dc-text-sub);
}
.dc-stat__delta--up { color: var(--dc-ok); }
.dc-stat__delta--down { color: var(--dc-danger); }
.dc-stat__arrow { font-size: 9px; }
.dc-stat__period { margin-left: var(--dc-1); font-weight: 400; color: var(--dc-text-mute); }
.dc-stat-grid {
display: grid; gap: var(--dc-3);
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.dc-stat-grid .dc-stat { min-width: 0; max-width: none; }
.dc-stat__spark { display: block; width: 100%; height: 36px; color: var(--dc-brand); }
.dc-stat__sparkline {
fill: none; stroke: currentColor; stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round;
}
.dc-stat__sparkdot { fill: currentColor; }
@media (max-width: 420px) {
.dc-stat__value { font-size: 28px; }
}