/* 이펙터 · 2026-10 제작 · 유튜브·숏츠 목록 스타일 */

.cm-media .cm-title + .cm-yt-mainwrap, .cm-media .cm-title + .cm-list-wrap { margin-top: 2.5rem; }
@media (min-width: 992px) { .cm-media .cm-title + .cm-yt-mainwrap, .cm-media .cm-title + .cm-list-wrap { margin-top: 3.5rem; } }

.cm-yt-mainwrap { max-width: 52rem; margin-inline: auto; }
.cm-yt-mainwrap:empty { display: none; }
.cm-yt-main { position: relative; display: block; }
.cm-yt-mainthumb { position: relative; display: block; overflow: hidden; border-radius: var(--cm-r); background: var(--ss-bg-soft); aspect-ratio: 832 / 450; isolation: isolate; }
.cm-yt-mainthumb > img, .cm-yt-mainthumb > .img-ph { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; object-fit: cover; aspect-ratio: auto !important; transition: transform .45s ease; }
@media (hover: hover) { .cm-yt-main:hover .cm-yt-mainthumb > img, .cm-yt-main:focus-visible .cm-yt-mainthumb > img { transform: scale(1.04); } }
.cm-yt-main:focus-visible, .cm-yt-card:focus-visible { outline: 2px solid var(--ss-ink); outline-offset: 4px; }

.cm-yt-play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 2.75rem; transform: translate(-50%, -50%); transition: transform .3s ease; pointer-events: none; }
.cm-yt-play-lg { width: 3.75rem; }
.cm-yt-play-img { display: block; width: 100%; aspect-ratio: 84 / 60; }
@media (hover: hover) { a:hover > .cm-thumb > .cm-yt-play, .cm-yt-main:hover .cm-yt-play { transform: translate(-50%, -50%) scale(1.1); } }

.cm-yt { grid-template-columns: minmax(0, 1fr); gap: 2.5rem 1rem; margin-top: 2.5rem; }
.cm-yt-mainwrap + .cm-list-wrap { margin-top: 2.5rem; }
@media (min-width: 576px) { .cm-yt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 1.5rem; } }
@media (min-width: 992px) { .cm-yt { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4rem 2rem; } .cm-yt-mainwrap + .cm-list-wrap { margin-top: 4rem; } }
.cm-yt .cm-thumb { --cm-ar: 832 / 450; }
.cm-yt .cm-yt-thumb .cm-yt-play { width: 2.75rem; }
.cm-yt-t { display: -webkit-box; margin-top: 1rem; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 1.0625rem; font-weight: 600; line-height: 1.5; color: var(--ss-ink); }
.cm-yt-d { display: block; margin-top: .25rem; font-size: .875rem; line-height: 1.5; color: var(--ss-weak); }
@media (min-width: 992px) { .cm-yt-t { margin-top: 1.25rem; font-size: 1.125rem; } .cm-yt-d { font-size: .9375rem; } }

.cm-sh { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1rem; }
@media (min-width: 768px) { .cm-sh { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 1.5rem; } }
@media (min-width: 992px) { .cm-sh { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4rem 2rem; } }
.cm-sh .cm-thumb { --cm-ar: 334 / 355; }
.cm-sh-t { display: block; margin-top: 1rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 1rem; font-weight: 600; line-height: 1.5; color: var(--ss-ink); }
.cm-sh-tag { display: block; font-size: .75rem; line-height: 1.5; color: var(--ss-weak); }
@media (min-width: 992px) { .cm-sh-t { margin-top: 1.25rem; font-size: 1.125rem; } }

.cm-media-ch { margin: 3rem 0 0; text-align: center; }
.cm-media-chlink { display: inline-block; padding: .75rem 1.75rem; border: 1px solid var(--ss-ink); border-radius: 62.5rem; font-size: .9375rem; font-weight: 600; line-height: 1.5; color: var(--ss-ink); transition: background-color .25s ease, color .25s ease; }
@media (hover: hover) { .cm-media-chlink:hover { background: var(--ss-ink); color: var(--ss-white); } }
.cm-media-chlink:focus-visible { outline: 2px solid var(--ss-ink); outline-offset: 3px; }
@media (min-width: 992px) { .cm-media-ch { margin-top: 4rem; } .cm-media-chlink { padding: .875rem 2.25rem; font-size: 1rem; } }

@media (prefers-reduced-motion: reduce) { .cm-thumb > img, .cm-yt-mainthumb > img { transition: none; } }