/* 이벤트 팝업 — 첫 화면을 덮는 물건이라, 빨리 뜨는 것보다 **정확히 닫히는 것**이 중요하다.
   구조: .evpop(전체 덮개) > .evpop__backdrop + .evpop__dialog(이미지 · caption · 하단 바) */

/* ⚠ 이 한 줄이 없으면 팝업이 닫히지 않는다.
   JS 는 hidden 속성을 껐다 켜는데, 브라우저 기본 [hidden]{display:none} 은 클래스 선택자
   .evpop{display:flex} 보다 약하다. 즉 아래 규칙이 있어야 hidden 이 실제로 먹는다. */
.evpop[hidden] { display: none; }

.evpop {
  position: fixed;
  inset: 0;
  z-index: 1080;              /* 부트스트랩 모달(1055) 위 */
  display: flex;
  padding: 16px;
  overflow-y: auto;           /* 아주 낮은 화면에서 최후의 안전망 — 아래 margin:auto 와 한 쌍 */
}

/* fixed 다 — absolute 로 두면 .evpop 이 스크롤될 때(위 overflow-y) 덮개가 처음 위치에
   남아서, 스크롤한 만큼 아래쪽이 덮이지 않은 채로 드러난다. */
.evpop__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 17, 0.62);
}

.evpop__dialog {
  /* 가운데 정렬을 부모의 align-items 가 아니라 **여기 margin:auto** 로 한다.
     align-items:center 로 가운데를 맞추면, 팝업이 화면보다 클 때 위로 넘친 부분이
     스크롤 영역 밖으로 밀려 영영 닿을 수 없다(닫기 버튼이 잘린다). margin:auto 는
     넘칠 때 위쪽 여백부터 0 이 되어 넘친 부분이 스크롤 안에 남는다. */
  margin: auto;
  position: relative;         /* 닫기(×) 버튼 기준 */
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;           /* 이미지 모서리를 둥글게 자른다 */
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);

  /* 세로가 모자란 화면에서 비율을 지키려면 **가로를 줄여야** 한다 — 세로만 자르면 이미지가
     찌그러지거나 하단 바가 화면 밖으로 밀려난다.
     --evpop-ar 은 이미지의 가로/세로 비율이고 PHP 가 **실제 파일에서 읽어** 넘긴다.
     여기 숫자를 박아 두면 다른 비율 이미지가 올라온 날 하단 바가 화면 밖으로 밀린다.
     기본값 0.8 은 4:5 — 비율을 못 읽었을 때만 쓰인다.
     160px 은 하단 바·caption·바깥 여백이 가져가는 몫이다. */
  width: min(420px, calc(100vw - 32px), calc((100vh - 160px) * var(--evpop-ar, 0.8)));
  width: min(420px, calc(100vw - 32px), calc((100dvh - 160px) * var(--evpop-ar, 0.8)));
  min-width: 240px;           /* 이 아래로 줄면 글씨가 못 읽을 크기가 된다 */
  animation: evpop-in 180ms ease-out;
}

.evpop__link,
.evpop__img {
  display: block;
  width: 100%;
  height: auto;
}

.evpop__link:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: -3px;
}

/* 닫기(×) — 이미지가 어떤 색이든 보여야 해서 반투명 검정 원을 깐다. */
.evpop__x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 22px;
  line-height: 36px;
  cursor: pointer;
}
.evpop__x:hover { background: rgba(0, 0, 0, 0.62); }
.evpop__x:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* 작은 글씨는 이미지에 굽지 않고 여기로 뺀다 — 확대해도 안 깨지고 낭독기가 읽는다. */
.evpop__caption {
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid #eee;
  color: #666;
  font-size: 13px;
  line-height: 1.5;
  word-break: keep-all;       /* 한글을 단어 중간에서 끊지 않는다 */
}

/* 하단 바 — 이미지 **밖**에 둔다. 이미지 안에 그리면 클릭 영역을 좌표로 맞춰야 해서
   이미지가 바뀔 때마다 어긋난다. */
.evpop__bar {
  display: flex;
  align-items: stretch;
  border-top: 1px solid #eee;
  background: #fafafa;
}

.evpop__hide,
.evpop__close {
  flex: 1 1 auto;
  min-height: 48px;           /* 손가락으로 누르는 최소 크기 */
  padding: 0 12px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}

.evpop__hide { color: #666; text-align: left; }
.evpop__close { flex: 0 0 auto; min-width: 96px; color: #111; font-weight: 700; }
.evpop__hide:hover,
.evpop__close:hover { background: #f0f0f0; }
.evpop__hide:focus-visible,
.evpop__close:focus-visible { outline: 3px solid #1a73e8; outline-offset: -3px; }

/* 팝업이 떠 있는 동안 뒤쪽 페이지가 스크롤되면, 닫고 나서 엉뚱한 위치에 가 있게 된다.
   overflow:hidden 만으로는 iOS 사파리에서 문서가 계속 스크롤된다 — 그래서 position:fixed
   까지 건다. 대신 그 순간 스크롤 위치가 0 으로 튀므로, JS 가 top 에 -스크롤값을 넣고
   닫을 때 되돌린다(event_popup.js 의 lockScroll/unlockScroll). 둘은 반드시 같이 간다. */
body.evpop-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

@keyframes evpop-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* 움직임에 민감한 사용자 설정 존중 — 팝업은 갑자기 튀어나오는 물건이라 특히 그렇다. */
@media (prefers-reduced-motion: reduce) {
  .evpop__dialog { animation: none; }
}