/* ==========================================================================
   popup.css — 메인페이지 팝업 노출
   ========================================================================== */

.site-popup-layer {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  pointer-events: none;
}
.site-popup-stack {
  display: grid;
  width: 100%; max-width: 380px;
}
.site-popup {
  pointer-events: auto;
  grid-column: 1; grid-row: 1;
  align-self: start;
  background: #fff;
  border-radius: var(--radius-lg);
  width: 100%;
  box-shadow: 0 30px 70px rgba(20,30,45,0.35);
  overflow: hidden;
  opacity: 0;
  transform: translate(calc(var(--depth, 0) * 10px), calc(var(--depth, 0) * -14px + 16px)) scale(calc(1 - var(--depth, 0) * 0.04));
  transition: opacity .3s ease, transform .35s cubic-bezier(.22,.61,.36,1);
}
.site-popup.open {
  opacity: 1;
  transform: translate(calc(var(--depth, 0) * 10px), calc(var(--depth, 0) * -14px)) scale(calc(1 - var(--depth, 0) * 0.04));
}
.site-popup.closing { opacity: 0; transform: translate(30px, -10px) scale(.9) rotate(4deg); }
.site-popup:not(:first-child) { filter: brightness(0.94); }

.site-popup-img { width: 100%; aspect-ratio: 4/5; display: block; cursor: pointer; }
.site-popup-img img { width: 100%; height: 100%; object-fit: cover; }

.site-popup-text { padding: 30px 26px 24px; }
.site-popup-text h3 { font-size: 18px; margin-bottom: 10px; }
.site-popup-text p { font-family: var(--font-info); font-size: 14.5px; color: var(--ink-soft); line-height: 1.7; white-space: pre-line; }
.site-popup-text a.popup-link-btn {
  display: inline-block; margin-top: 16px;
  font-family: var(--font-info); font-size: 13.5px; font-weight: 600;
  color: var(--teal-deep);
}

.site-popup-close {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(20,30,45,0.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(3px);
}
.site-popup-close svg { width: 15px; height: 15px; }

.site-popup-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  font-family: var(--font-info); font-size: 12.5px; color: var(--ink-soft);
}
.site-popup-footer label { display: flex; align-items: center; gap: 6px; }
.site-popup-footer button { color: var(--ink-soft); }

/* 여러 개일 경우 살짝 겹쳐서 카드 스택처럼 */
/* (스택 방식으로 변경 — 개별 margin 불필요) */

@media (max-width: 480px) {
  .site-popup-stack { max-width: min(300px, 78vw); }
  .site-popup-text { padding: 22px 20px 18px; }
  .site-popup-text h3 { font-size: 16px; }
  .site-popup-text p { font-size: 13.5px; }
  .site-popup-footer { padding: 10px 14px; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-popup { transition: none; }
}