/* 이벤트 홈 팝업 (event/walkrun/popup.php) — 공용 .modal(design.css) 위에 올린다. 다음 이벤트도 같은 파일을 쓴다. */
.ev-popup { width: min(400px, calc(100vw - 32px)); }
.ev-popup-img { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--bg); }
.ev-popup-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ev-popup-body { display: grid; gap: 10px; padding: 20px 22px 18px; text-align: center; }
.ev-popup-badge { justify-self: center; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary); font-size: 12px; font-weight: 800; }
/* 헤드라인은 이미지에 이미 있어 화면에서는 숨기고, 스크린리더용 제목으로만 둔다 */
.ev-popup-body h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ev-popup-desc { font-size: 14px; line-height: 1.55; color: var(--text-2); }
.ev-popup-go { width: 100%; margin-top: 4px; }
.ev-popup-foot { display: flex; justify-content: space-between; padding: 0 22px 16px; }
.ev-popup-foot button { padding: 8px 4px; font-size: 14px; color: var(--text-3); }
.ev-popup-foot button:hover { color: var(--text); }
@media (max-height: 640px) { .ev-popup-img { display: none; } }

/* ── 신기능 팝업: 3D 영상 · 3D 지도 (event/replay/popup.php) ──
 * 휴대폰: 위 이미지(가운데 경로·거리 부분) + 아래 설명. 넓은 화면: 왼쪽 세로 이미지 + 오른쪽 설명. */
.ev-popup--replay { width: min(400px, calc(100vw - 32px)); padding: 0; }
.ev-replay-img { display: flex; justify-content: center; background: #0b0d09; outline: none; }
/* 휴대폰: 9:16 영상을 자르지 않고 통째로 — 높이는 화면의 40% (설명이 함께 들어가게) */
.ev-replay-img video { display: block; height: min(40vh, 420px); width: auto; aspect-ratio: 9 / 16; object-fit: cover; background: #0b0d09; }
.ev-replay-body { text-align: left; gap: 12px; }
.ev-replay-body .ev-popup-badge { justify-self: start; }
/* 이벤트 팝업은 제목이 이미지에 있어 숨기지만(.ev-popup-body h2), 이 팝업은 제목을 보여 준다 */
.ev-popup-body h2.ev-replay-title { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
  font-size: 20px; line-height: 1.35; font-weight: 800; letter-spacing: -0.02em; outline: none; }
.ev-replay-list { display: grid; gap: 12px; margin: 2px 0 0; padding: 0; list-style: none; }
.ev-replay-list li { display: flex; gap: 12px; align-items: flex-start; }
.ev-replay-list b { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; }
.ev-replay-list b em { font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary); }
.ev-replay-list p { margin-top: 3px; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.ev-replay-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; font-size: 19px; }
.ev-replay-ico--video { background: #C6FF34; color: #0b1a00; }
.ev-replay-ico--map { background: #171A12; color: #C6FF34; }
.ev-replay-how { font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.ev-replay-how b { color: var(--text); }
@media (min-width: 720px) {
  .ev-popup--replay { width: min(760px, calc(100vw - 48px)); }
  .ev-popup--replay[open] { display: grid; grid-template-columns: 300px 1fr; }
  .ev-replay-img video { width: 100%; height: auto; max-height: 560px; }
  .ev-replay-main { display: flex; flex-direction: column; justify-content: center; }
  .ev-replay-body { padding: 28px 28px 16px; }
  .ev-popup-body h2.ev-replay-title { font-size: 22px; }
}
/*
 * 휴대폰: 설명 글은 빼고 영상만 — 팝업 폭을 꽉 채운다 (2026-10-16 사용자 요청: 글이 함께 들어가 모바일에서 어색했다)
 * 폭은 화면 폭과 '화면 높이에서 아래 버튼 줄을 뺀 높이 × 9/16' 중 작은 값 → 영상 전체가 한 화면에 들어간다.
 * 아래에는 '오늘 하루 보지 않기 · 닫기' 만 남긴다.
 */
@media (max-width: 719px) {
  .ev-popup--replay { width: min(360px, calc(100vw - 32px), calc((100dvh - 120px) * 9 / 16)); }
  .ev-replay-img video { width: 100%; height: auto; }
  .ev-replay-body { display: none; }
  .ev-popup--replay .ev-popup-foot { padding: 12px 18px 14px; }
}