<div class="dc-stack">
<span class="dc-stack__list" aria-hidden="true">
<span class="dc-stack__item">김</span>
<span class="dc-stack__item">박</span>
<span class="dc-stack__item">N</span>
<span class="dc-stack__item dc-stack__item--more">+3</span>
</span>
<span class="dc-stack__label">
<strong class="dc-stack__count">작업자 6명</strong>
김도현, 박수진 외 4명
</span>
</div>
.dc-stack {
display: flex; align-items: center; gap: var(--dc-3);
font-family: var(--dc-font);
}
.dc-stack__list { display: flex; align-items: center; }
.dc-stack__item {
display: grid; place-items: center;
width: 36px; height: 36px; flex: 0 0 auto;
margin-left: -10px;
border-radius: var(--dc-r-full);
background: var(--dc-brand-soft);
color: var(--dc-brand-text);
box-shadow: 0 0 0 2px var(--dc-surface);
font-size: 13px; font-weight: 700; line-height: 1;
user-select: none;
}
.dc-stack__list .dc-stack__item:first-child { margin-left: 0; }
.dc-stack__item--more { background: var(--dc-sunken); color: var(--dc-text-sub); font-size: 12px; }
.dc-stack__label { font-size: 12px; line-height: 1.4; color: var(--dc-text-mute); }
.dc-stack__count { display: block; font-size: 14px; color: var(--dc-text); }
.dc-stack--sm .dc-stack__item { width: 26px; height: 26px; margin-left: -8px; font-size: 11px; }
.dc-stack--sm .dc-stack__item--more { font-size: 10px; }
.dc-stack__add {
display: grid; place-items: center;
width: 44px; height: 44px; flex: 0 0 auto;
margin-left: var(--dc-2);
border: 1px dashed var(--dc-line-field);
border-radius: var(--dc-r-full);
background: var(--dc-surface);
color: var(--dc-text-sub);
cursor: pointer;
transition: color var(--dc-fast), border-color var(--dc-fast);
}
.dc-stack__add:hover { border-color: var(--dc-brand); color: var(--dc-brand); }
.dc-stack__addicon { width: 18px; height: 18px; }