.video-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999;
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  padding: 20px; background: rgba(0, 0, 0, .85); }
.video-layer[hidden] { display: none; }
.video-layer__box { width: 100%; max-width: 1200px; max-height: 100%; box-sizing: border-box;
  padding: 16px; background: #111; border-radius: 12px; }
.video-layer__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.video-layer__title { flex: 1; margin: 0; font-size: 1.1rem; color: #fff; }
.video-layer__close { cursor: pointer; border: 1px solid #fff; background: transparent; color: #fff;
  border-radius: 8px; padding: 6px 14px; font-size: 1rem; font-family: inherit; }
.video-layer video { display: block; width: 100%; max-width: 100%; max-height: 75vh; background: #000; }
.video-layer__msg { margin: 10px 0 0; font-size: .95rem; color: #ffd54f; }
.video-layer :focus { outline: 3px solid #ffb400; outline-offset: 2px; }

/* ÀÚ¸·: Èò ±ÛÀÚ + ¹ÝÅõ¸í °ËÀº ¹è°æ */
video::cue { color: #fff; background-color: rgba(0, 0, 0, .7);
  font-family: "Noto Sans KR", "Malgun Gothic", "¸¼Àº °íµñ", sans-serif;
  font-size: 24px; line-height: 1.4; }

/* ¸ð¹ÙÀÏ(¹ÝÀÀÇü) */
@media (max-width: 768px) {
  .video-layer { padding: 0; }
  .video-layer__box { height: 100%; max-width: none; border-radius: 0;
    display: flex; flex-direction: column; justify-content: center; }
  .video-layer__title { font-size: 1rem; }
  .video-layer video { max-height: 60vh; }
  video::cue { font-size: 18px; }
}