<ul class="dc-clist">
<li class="dc-clist__item">
<a class="dc-clist__card" href="#">
<span class="dc-clist__thumb" aria-hidden="true"></span>
<span class="dc-clist__body">
<span class="dc-clist__tag">당일지급</span>
<span class="dc-clist__title">인천 남동공단 상하차 보조</span>
<span class="dc-clist__meta">남동구 고잔동 · 오전 7시</span>
<span class="dc-clist__value">일급 140,000원</span>
</span>
</a>
</li>
<li class="dc-clist__item">
<a class="dc-clist__card" href="#">
<span class="dc-clist__thumb" aria-hidden="true"></span>
<span class="dc-clist__body">
<span class="dc-clist__tag">주말만</span>
<span class="dc-clist__title">시흥 정왕동 아파트 내부 정리</span>
<span class="dc-clist__meta">시흥시 정왕동 · 오전 8시</span>
<span class="dc-clist__value">일급 120,000원</span>
</span>
</a>
</li>
<li class="dc-clist__item">
<a class="dc-clist__card" href="#">
<span class="dc-clist__thumb" aria-hidden="true"></span>
<span class="dc-clist__body">
<span class="dc-clist__tag">초보가능</span>
<span class="dc-clist__title">안산 원곡동 식품공장 포장</span>
<span class="dc-clist__meta">안산시 원곡동 · 오후 2시</span>
<span class="dc-clist__value">시급 11,500원</span>
</span>
</a>
</li>
</ul>
.dc-clist {
display: flex; flex-direction: column; gap: var(--dc-3);
margin: 0; padding: var(--dc-4); list-style: none;
background: var(--dc-bg);
font-family: var(--dc-font);
}
.dc-clist__item { min-width: 0; }
.dc-clist__card {
display: flex; gap: var(--dc-3);
height: 100%; padding: var(--dc-3);
background: var(--dc-surface);
border: 1px solid var(--dc-line);
border-radius: var(--dc-r-md);
box-shadow: var(--dc-sh-1);
color: inherit; text-decoration: none;
transition: border-color var(--dc-fast), transform var(--dc-fast);
}
.dc-clist__card:active { transform: scale(.99); border-color: var(--dc-line-bold); }
.dc-clist__thumb {
flex: 0 0 92px; align-self: stretch; min-height: 92px;
border-radius: var(--dc-r-sm);
background: linear-gradient(135deg, var(--dc-brand-soft), var(--dc-sunken));
}
.dc-clist__body {
flex: 1 1 auto; min-width: 0;
display: flex; flex-direction: column; gap: var(--dc-1);
}
.dc-clist__tag {
align-self: flex-start;
padding: 2px var(--dc-2); border-radius: var(--dc-r-full);
background: var(--dc-ok-soft); color: var(--dc-ok);
font-size: 11px; font-weight: 700;
}
.dc-clist__title {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
font-size: 15px; font-weight: 700; line-height: 1.4;
color: var(--dc-text);
}
.dc-clist__meta {
font-size: 12px; color: var(--dc-text-mute);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dc-clist__value {
margin-top: auto; padding-top: var(--dc-1);
font-size: 14px; font-weight: 700; color: var(--dc-text);
}
.dc-clist--grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dc-clist--grid .dc-clist__card { flex-direction: column; }
.dc-clist--grid .dc-clist__thumb { flex: none; min-height: 0; aspect-ratio: 4 / 3; }
.dc-clist--compact .dc-clist__thumb { flex: 0 0 64px; min-height: 64px; }
.dc-clist--compact .dc-clist__title { -webkit-line-clamp: 1; }