/* 편별 유튜브 본편 안내 (shared/video.js) — 한지·먹·낙관 색을 잇는다 */
.sv {
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; align-items: center; gap: 18px;
  margin: 26px 0 0; padding: 14px; max-width: 760px;
  border: 1px solid #cdc1a8; border-radius: 10px; background: rgba(255, 252, 245, .78);
  font-family: "IBM Plex Sans KR", "Malgun Gothic", sans-serif; color: #1c1a17; text-align: left;
}
.sv p { margin: 0; }
.sv--center { margin-left: auto; margin-right: auto; }
.sv-thumb { position: relative; display: block; border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 9; background: #ddd2bb; }
.sv-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.2, .7, .1, 1); }
.sv-thumb:hover img, .sv-thumb:focus-visible img { transform: scale(1.04); }
.sv-play {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  display: grid; place-items: center; padding-left: 4px; background: rgba(178, 59, 37, .92); color: #fbefe8; font-size: 18px;
  box-shadow: 0 6px 16px -6px rgba(28, 26, 23, .6);
}
.sv-dur { position: absolute; right: 6px; bottom: 6px; padding: 3px 6px; border-radius: 3px; background: rgba(28, 26, 23, .78); color: #fbefe8; font: 500 11px/1 "IBM Plex Mono", monospace; }
.sv-k { font: 500 11px/1.4 "IBM Plex Mono", monospace; letter-spacing: .1em; color: #b23b25; }
.sv-t { margin-top: 4px !important; font: 700 17px/1.45 "Noto Serif KR", serif; }
.sv-s { margin-top: 4px !important; font-size: 13px; line-height: 1.6; color: #766d5f; }
.sv-go { display: inline-block; margin-top: 10px; color: #8e2c1a; font-size: 14px; font-weight: 600; text-underline-offset: 4px; }
.sv-qr { margin: 0; display: grid; justify-items: center; gap: 6px; }
.sv-qr img { display: block; width: 104px; height: 104px; border-radius: 4px; }
.sv-qr figcaption { font-size: 11px; line-height: 1.4; color: #766d5f; text-align: center; }

/* 휴대폰에서는 화면 속 QR 을 찍을 수 없으므로 QR 을 숨기고 썸네일·링크만 둔다 */
@media (max-width: 640px) {
  .sv { grid-template-columns: 1fr; gap: 12px; }
  .sv-qr { display: none; }
}

/* 워크시트 같은 인쇄물 — 머리글 오른쪽의 작은 QR */
.sv-stamp { margin-left: auto; display: flex; align-items: center; gap: 10px; font-family: "IBM Plex Sans KR", "Malgun Gothic", sans-serif; }
.sv-stamp img { display: block; width: 76px; height: 76px; }
.sv-stamp p { margin: 0; display: grid; gap: 2px; font-size: 12px; line-height: 1.4; color: #766d5f; }
.sv-stamp b { color: #1c1a17; font-size: 13px; }
.sv-stamp a { color: #8e2c1a; font: 500 12px/1.4 "IBM Plex Mono", monospace; }
@media (max-width: 640px) { .sv-stamp img { display: none; } }
@media print {
  .sv-stamp img { display: block; }
  .sv-stamp a { color: #1c1a17; text-decoration: none; }
}