<figure class="dc-video-figure">
<div class="dc-video">
<button type="button" class="dc-video__play">
<svg class="dc-video__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8 5.2v13.6L19 12 8 5.2Z" fill="currentColor" /></svg>
<span class="dc-sr">안전교육 3분 요약 재생</span>
</button>
<span class="dc-video__time">3:24</span>
</div>
<figcaption class="dc-video__cap">
<strong>안전교육 3분 요약</strong>
자막 한국어 · 베트남어 · 네팔어
</figcaption>
</figure>
.dc-video-figure { margin: 0; max-width: 480px; font-family: var(--dc-font); }
.dc-video {
/* 가림막은 밝은 모드에서도 어둡다. --dc-text-on 은 다크 모드에서 검어지므로 여기엔 쓸 수 없다 */
--dc-on-media: white;
position: relative;
aspect-ratio: 16 / 9;
display: grid; place-items: center;
border-radius: var(--dc-r-md);
overflow: hidden;
background: linear-gradient(135deg,
color-mix(in srgb, var(--dc-brand) 34%, var(--dc-sunken)),
color-mix(in srgb, var(--dc-text) 22%, var(--dc-sunken)));
}
.dc-video__play {
display: grid; place-items: center;
width: 64px; height: 64px;
padding: 0; border: 0;
border-radius: var(--dc-r-full);
background: var(--dc-overlay);
color: var(--dc-on-media);
cursor: pointer;
transition: transform var(--dc-fast);
}
.dc-video__play:hover { transform: scale(1.06); }
.dc-video__icon { width: 26px; height: 26px; margin-left: 3px; }
.dc-video__time {
position: absolute; right: var(--dc-2); bottom: var(--dc-2);
padding: 2px var(--dc-2);
border-radius: var(--dc-r-xs);
background: var(--dc-overlay);
color: var(--dc-on-media);
font-size: 12px; font-variant-numeric: tabular-nums;
}
.dc-video__cap {
margin-top: var(--dc-2);
font-size: 12px; line-height: 1.5; color: var(--dc-text-mute);
}
.dc-video__cap strong { display: block; font-size: 14px; color: var(--dc-text); }
.dc-video--portrait { aspect-ratio: 9 / 16; max-width: 240px; max-height: 70vh; }