<article class="dc-card">
<div class="dc-card__media" role="img" aria-label="지게차 점검 장면"></div>
<div class="dc-card__body">
<p class="dc-card__eyebrow">안전교육</p>
<h3 class="dc-card__title"><a class="dc-card__link" href="#">지게차 작업 전 점검 5분</a></h3>
<p class="dc-card__text">현장에서 매일 하는 점검을 순서대로 정리했습니다.</p>
<ul class="dc-card__meta">
<li>영상 12분</li>
<li>수강 1,240명</li>
</ul>
</div>
</article>
.dc-card {
display: flex; flex-direction: column; overflow: hidden;
max-width: 340px;
background: var(--dc-surface);
border: 1px solid var(--dc-line);
border-radius: var(--dc-r-md);
box-shadow: var(--dc-sh-1);
font-family: var(--dc-font);
}
.dc-card__media {
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, var(--dc-brand-soft), var(--dc-sunken));
}
.dc-card__body {
display: flex; flex-direction: column; gap: var(--dc-2);
padding: var(--dc-4);
}
.dc-card__eyebrow {
margin: 0; font-size: 12px; font-weight: 700;
color: var(--dc-brand-text);
}
.dc-card__title { margin: 0; font-size: 16px; line-height: 1.4; color: var(--dc-text); }
.dc-card__link { color: inherit; text-decoration: none; }
.dc-card__link:hover { text-decoration: underline; }
.dc-card__text { margin: 0; font-size: 13px; line-height: 1.6; color: var(--dc-text-sub); }
.dc-card__meta {
display: flex; flex-wrap: wrap; gap: var(--dc-3);
margin: 0; padding: 0; list-style: none;
font-size: 12px; color: var(--dc-text-mute);
}
.dc-card--row { flex-direction: row; max-width: 520px; }
.dc-card--row .dc-card__media { flex: 0 0 136px; aspect-ratio: auto; }
.dc-card--clickable {
position: relative;
transition: border-color var(--dc-fast), box-shadow var(--dc-fast);
}
.dc-card--clickable:hover { border-color: var(--dc-line-bold); box-shadow: var(--dc-sh-2); }
.dc-card--clickable .dc-card__link::after {
content: ""; position: absolute; inset: 0; border-radius: inherit;
}
.dc-card--clickable:has(.dc-card__link:focus-visible) {
outline: 2px solid var(--dc-brand); outline-offset: 2px;
}
.dc-card--clickable .dc-card__link:focus-visible { outline: none; }
@media (max-width: 480px) {
.dc-card--row { flex-direction: column; }
.dc-card--row .dc-card__media { flex: none; aspect-ratio: 16 / 9; }
}