.source-video-preview-list {
  display: grid;
  gap: var(--s-3, 1rem);
  margin-block: var(--s-3, 1rem);
}

.source-video-preview {
  margin-top: var(--s-3, 1rem);
  overflow: hidden;
  border: var(--border, 1px solid #d9d5ca);
  border-radius: var(--r-md, 8px);
  background: var(--c-bg-2, #eeebe3);
}

.source-video-preview__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #181816;
}

.source-video-preview__media iframe,
.source-video-preview__media video,
.source-video-preview__media img {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  pointer-events: none;
}

.source-video-preview__hit {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.source-video-preview__hit::after {
  position: absolute;
  right: var(--s-2, 0.75rem);
  bottom: var(--s-2, 0.75rem);
  padding: 0.35rem 0.55rem;
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: 999px;
  background: rgb(24 24 22 / 0.78);
  color: #fff;
  content: "원본 열기 ↗";
  font-family: var(--f-mono, monospace);
  font-size: var(--fs-2xs, 0.72rem);
  letter-spacing: 0.03em;
}

.source-video-preview__hit:hover,
.source-video-preview__hit:focus-visible {
  opacity: 1;
  box-shadow: inset 0 0 0 2px var(--c-accent, #315c4f);
}

.source-video-preview__meta {
  padding: var(--s-3, 1rem);
}

.source-video-preview__meta > a {
  display: block;
  color: var(--c-ink, #1a1a18);
  font-weight: 600;
  line-height: 1.45;
  word-break: keep-all;
}

.source-video-preview__meta p {
  margin: var(--s-1, 0.4rem) 0 0;
  color: var(--c-ink-2, #56544f);
  font-size: var(--fs-sm, 0.9rem);
  line-height: 1.65;
  word-break: keep-all;
}

.source-video-preview__meta span {
  display: block;
  margin-top: var(--s-2, 0.75rem);
  color: var(--c-ink-3, #74716a);
  font-family: var(--f-body, sans-serif);
  font-size: var(--fs-2xs, 0.72rem);
  letter-spacing: var(--ls-ko, -0.01em);
}

td > .source-video-preview-list {
  min-width: 220px;
}

td .source-video-preview__meta {
  padding: var(--s-2, 0.75rem);
}

td .source-video-preview__meta span {
  display: none;
}

@media (max-width: 560px) {
  .source-video-preview__hit::after {
    right: var(--s-1, 0.4rem);
    bottom: var(--s-1, 0.4rem);
  }
}