/*
  이벤트 팝업 — 웹툰 원작 영상화 작품 모집 (2026-11-03 대표)
  ==================================================================
  ★ .event-popup 하위에서만 선언. #hex · !important · :root 없음. 토큰만.
  ★ CLIIP 홈 · 웹툰 홈 둘 다에서 같은 모양 — 웹툰 브랜드 토큰(--wt-*)을 쓴다. 포인트는 노랑 단추 하나.
*/
.event-popup {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, 0.6);
}
.event-popup__panel {
  position: relative; width: min(420px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  border: 1px solid var(--wt-line); border-radius: 18px;
  background: var(--wt-card); color: var(--wt-text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  font-family: var(--font-sans);
}
.event-popup__x {
  position: absolute; top: 8px; right: 10px; z-index: 1;
  width: 36px; height: 36px; border: 0; border-radius: 999px;
  background: rgba(0, 0, 0, 0.45); color: var(--wt-text);
  font: inherit; font-size: 22px; line-height: 1; cursor: pointer;
}
.event-popup__img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.event-popup__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 16px; }
.event-popup__eyebrow { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; color: var(--wt-text-3); }
.event-popup__title { margin: 0; font-size: 24px; font-weight: 900; line-height: 1.25; word-break: keep-all; }
.event-popup__lead { margin: 0; font-size: 15px; line-height: 1.55; color: var(--wt-text-soft); word-break: keep-all; }
.event-popup__perks { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.event-popup__perks li { position: relative; padding-left: 16px; font-size: 15px; font-weight: 700; }
.event-popup__perks li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 999px; background: var(--wt-yellow); }
.event-popup__when { margin: 0; font-size: 13px; color: var(--wt-text-3); }
.event-popup__go {
  display: flex; align-items: center; justify-content: center; height: 48px; margin-top: 4px;
  border-radius: 999px; background: var(--wt-yellow); color: var(--wt-ink);
  font-size: 16px; font-weight: 900; text-decoration: none;
}
.event-popup__go:hover { background: var(--wt-yellow-2); }
.event-popup__go:focus-visible { outline: 2px solid var(--wt-text); outline-offset: 2px; }
.event-popup__foot { display: flex; justify-content: space-between; border-top: 1px solid var(--wt-line); }
.event-popup__skip {
  flex: 1; padding: 12px; border: 0; background: transparent; color: var(--wt-text-2);
  font: inherit; font-size: 13px; cursor: pointer;
}
.event-popup__skip + .event-popup__skip { border-left: 1px solid var(--wt-line); }
.event-popup__skip:hover { color: var(--wt-text); text-decoration: underline; }
.event-popup__prizes { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.event-popup__prizes li { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--wt-line); border-radius: 12px; background: var(--wt-chip); }
.event-popup__prizes b { font-size: 14px; color: var(--wt-yellow); }
.event-popup__prizes span { font-size: 15px; font-weight: 800; }
.event-popup__sub { margin: 4px 0 0; font-size: 13px; font-weight: 800; color: var(--wt-text-2); }
.event-popup__notes { margin: 0; font-size: 12px; line-height: 1.6; color: var(--wt-text-3); word-break: keep-all; }