.ytc{ border:1px solid #d8e0f0; border-radius:12px; background:#fff; padding:12px; }
.ytc__play{ display:flex; align-items:center; gap:12px; width:100%; padding:0; margin:0; border:0;
  background:none; cursor:pointer; text-align:left; font:inherit; color:inherit; border-radius:8px; }
.ytc__play:focus-visible{ outline:2px solid #1E40AF; outline-offset:4px; }
.ytc__img{ position:relative; flex:0 0 112px; width:112px; aspect-ratio:16/9; border-radius:8px;
  overflow:hidden; background:#0b1c4d; }
.ytc__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.ytc__img::after{ content:""; position:absolute; right:6px; bottom:6px; width:28px; height:20px;
  border-radius:6px; background:rgba(11,28,77,.9); transition:background .15s; }
.ytc__img::before{ content:""; position:absolute; right:15px; bottom:11px; z-index:1;
  border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent #fff; }
.ytc__play:hover .ytc__img::after{ background:#1E40AF; }
.ytc__tx{ min-width:0; word-break:keep-all; }
.ytc__tx b{ display:block; font-size:var(--fs-sm); font-weight:700; color:#0b1c4d; line-height:1.45; }
.ytc__tx span{ display:block; margin-top:4px; font-size:var(--fs-xs); color:#5b6b8f; }
.ytc__frame{ position:relative; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:#0b1c4d; }
.ytc__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.ytc__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:12px; padding-top:8px; border-top:1px solid #d8e0f0; }
.ytc__foot a{ display:inline-flex; align-items:center; min-height:32px; font-size:var(--fs-xs);
  text-decoration:none; }
.ytc__yt{ font-weight:700; color:#1E40AF; }
.ytc__yt::after{ content:""; width:6px; height:6px; margin-left:8px; border-top:2px solid currentColor;
  border-right:2px solid currentColor; transform:rotate(45deg); }
.ytc__ch{ color:#5b6b8f; }
.ytc__foot a:hover{ text-decoration:underline; text-underline-offset:3px; }

@media (min-width:769px){
  .ytc{ max-width:760px; padding:16px; }
  .ytc__play{ gap:24px; }
  .ytc__img{ flex:0 0 280px; width:280px; }
  .ytc__img::after{ right:10px; bottom:10px; width:44px; height:30px; border-radius:8px; }
  .ytc__img::before{ right:25px; bottom:18px; border-width:7px 0 7px 11px; }
  .ytc__tx b{ font-size:var(--fs-body, 16px); }
  .ytc__foot{ margin-top:16px; }
}

.ytc + .ytc{ margin-top:12px; }