/* pages/system.css — 행사후기 영상·시스템/무대기획. 원본 sub.css .vod_line · .lay_pop */

/* ── 썸네일 3열(원본 .vod_line). 올리면 어둡게 덮고 제목(원본 .over) ── */
.vod-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 600px) { .vod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

.vod-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--color-surface-alt);
  text-align: center;
  color: #fff;
}
.vod-card__img img { width: 100%; height: auto; transition: transform var(--dur) var(--ease); }
.vod-grid--stage .vod-card { background: #fff; }
.vod-card:hover .vod-card__img img,
.vod-card:focus-visible .vod-card__img img { transform: scale(1.08); }
.vod-card__play { position: absolute; right: var(--space-3); top: var(--space-3); }
.vod-card__play .icon { width: 36px; height: 36px; }

/* 휴대폰: 올리기가 없으므로 아래쪽 띠로 제목을 늘 보여 준다 */
.vod-card__over {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  padding: var(--space-5) var(--space-3) var(--space-3);
  background: linear-gradient(0deg, rgba(0, 0, 0, .75), transparent);
  transition: opacity var(--dur);
}
.vod-card__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1.3; }
.vod-card__sub { font-size: var(--text-xs); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (hover: hover) and (min-width: 960px) {
  .vod-card__over {
    inset: 0;
    justify-content: center;
    gap: var(--space-5);
    padding: var(--space-5);
    background: rgba(0, 0, 0, .6);
    opacity: 0;
  }
  .vod-card:hover .vod-card__over,
  .vod-card:focus-visible .vod-card__over { opacity: 1; }
  .vod-card__title { font-size: 26px; font-weight: var(--weight-medium); }
  .vod-card__sub { font-size: var(--text-md); font-weight: var(--weight-medium); white-space: normal; }
}

/* ── 팝업(원본 .lay_pop: 검은 반투명 바탕 위 상자) ── */
.vod-dialog {
  width: min(960px, calc(100% - 24px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--r);
  background: var(--color-surface);
  color: var(--color-text);
  overscroll-behavior: contain;
}
.vod-dialog::backdrop { background: rgba(0, 0, 0, .8); }
.vod-dialog__box { display: flex; flex-direction: column; max-height: inherit; }
.vod-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-2) var(--space-5);
}
.vod-dialog__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.vod-dialog__close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--color-surface-alt); color: var(--color-text); flex: none; }
.vod-dialog__close:hover { background: var(--color-line); }
.vod-dialog__sub { padding: 0 var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); }
.vod-dialog__media { flex: 1; min-height: 0; overflow: auto; padding: var(--space-4) var(--space-5) var(--space-5); }
.vod-dialog__media img { width: 100%; border-radius: var(--r-sm); }
.vod-dialog__media--video { display: grid; place-items: center; }
/* 쇼츠(세로) 영상: 화면 높이에 맞춘 9:16 */
.vod-dialog__media iframe { width: min(100%, calc((100dvh - 180px) * 9 / 16)); aspect-ratio: 9 / 16; border: 0; border-radius: var(--r-sm); background: #000; }
.vod-dialog__fallback { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-accent-ink); text-decoration: underline; }