/* NexusBrain Site Popup (Homepage / Global)
   - Admin에서 설정한 /data/popup.json 기반
   - 접근성: aria-modal, focus trap(간단), ESC 닫기
*/

/*
  IMPORTANT
  - backdrop는 "모달 뒤"에 있어야 합니다.
  - 기존에는 backdrop이 fixed + 높은 z-index로 떠서 dialog 위를 덮어버려
    팝업 자체가 뿌옇게(blur) 보이는 현상이 발생했습니다.
  - 해결: root(.nb-site-popup)를 화면 전체 컨테이너로 두고,
    backdrop은 root 내부 absolute(z-index:0), dialog는 relative(z-index:1)로 올립니다.
*/
.nb-site-popup-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  z-index: 0;
  opacity: 0;
  transition: opacity .2s ease;
}

.nb-site-popup{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
}

.nb-site-popup.open{ pointer-events: auto; }
.nb-site-popup.open .nb-site-popup-backdrop{ opacity: 1; }

.nb-site-popup-dialog{
  position: relative;
  z-index: 1;
  width: min(var(--nb-popup-dialog-w, 520px), 90vw);
  max-height: 85vh;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
  transform: translateY(-16px) scale(.985);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.nb-site-popup.open .nb-site-popup-dialog{
  transform: translateY(0) scale(1);
  opacity: 1;
}

.nb-site-popup-head{
  padding: 16px 18px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.nb-site-popup-title{
  font-family: Pretendard, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.35;
  color: #1A2B3C;
}

.nb-site-popup-close{
  border: 0;
  background: transparent;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background .2s ease, transform .2s ease;
}
.nb-site-popup-close:hover{ background: rgba(0,0,0,.06); }
.nb-site-popup-close:active{ transform: scale(.96); }

.nb-site-popup-body{
  padding: 18px;
  flex: 1 1 auto;
  overflow: auto;
}

.nb-site-popup-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.nb-site-popup-text{
  font-family: Pretendard, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: #4A5568;
  white-space: normal;
}

.nb-site-popup-foot{
  padding: 14px 18px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  border-top: 1px solid rgba(0,0,0,.06);
}

.nb-site-popup-left{
  display:flex;
  align-items:center;
  gap: 10px;
  font-family: Pretendard, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 13px;
  color: #4A5568;
}

.nb-site-popup-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  color: #1A2B3C;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.nb-site-popup-btn:hover{ background: rgba(0,0,0,.03); }
.nb-site-popup-btn:active{ transform: scale(.98); }

.nb-site-popup-btn.primary{
  background: #00C17C;
  border-color: #00C17C;
  color: #fff;
}
.nb-site-popup-btn.primary:hover{ background: #00A86B; border-color: #00A86B; }

.nb-site-popup-check{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.nb-site-popup-check input{ transform: translateY(1px); }

@media (max-width: 480px){
  .nb-site-popup{ padding: 14px; }
  .nb-site-popup-title{ font-size: 16px; }
}


/* Admin Preview Mode (inside /ppo/popup.php) */
.nb-site-popup.preview{
  position: relative;
  inset: auto;
  z-index: auto;
  display: flex;
  width: 100%;
  min-height: 340px;
  padding: 28px 18px;
  border-radius: 18px;
  background: #F3F4F6;
  overflow: hidden;
  /* 관리자 미리보기에서도 버튼/링크를 테스트할 수 있도록 클릭 허용 */
  pointer-events: auto;
}

.nb-site-popup.preview .nb-site-popup-backdrop{
  background: rgba(0,0,0,.10);
  backdrop-filter: none;
  opacity: 1;
  /* 미리보기에서는 배경 클릭(닫힘)을 막고 내부 요소만 클릭되게 */
  pointer-events: none;
}

.nb-site-popup.preview .nb-site-popup-dialog{
  transform: none;
  opacity: 1;
  transition: none;
}

.nb-site-popup-muted{ opacity: .75; }


/* SAFETY: prevent backdrop from stealing clicks / blur on dialog */
.nb-site-popup{ isolation:isolate; }
.nb-site-popup-dialog{ pointer-events:auto; filter:none; }
.nb-site-popup-backdrop{ pointer-events:auto; }


/* Media wrapper: aspect-ratio 기반 가변 레이아웃 + 스켈레톤 로딩 */
.nb-site-popup-media{
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.04);
  margin-bottom: 14px;
  position: relative;
  aspect-ratio: var(--nb-popup-ratio, 16 / 9);
}

.nb-site-popup-media .nb-site-popup-img{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .18s ease;
}

.nb-site-popup-media.loaded .nb-site-popup-img{ opacity: 1; }

.nb-site-popup-skeleton{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.04) 25%, rgba(0,0,0,.08) 37%, rgba(0,0,0,.04) 63%);
  background-size: 400% 100%;
  animation: nbPopupShimmer 1.1s ease infinite;
}

.nb-site-popup-media.loaded .nb-site-popup-skeleton{ display:none; }

@keyframes nbPopupShimmer{
  0%{ background-position: 100% 0; }
  100%{ background-position: 0 0; }
}

/* 작은 화면에서 과도한 높이 방지 */
@media (max-height: 680px){
  .nb-site-popup-dialog{ max-height: 88vh; }
}

/* Backward compatibility: old markup (img directly inside body) */
.nb-site-popup-body > .nb-site-popup-img{
  position: static;
  height: auto;
  max-height: 60vh;
  background: rgba(0,0,0,.04);
  border-radius: 14px;
  margin-bottom: 14px;
  opacity: 1;
}