/* Popup — PC 9방향 위치 + 미세조정 오프셋(--ox/--oy) + 크기(--pw/--ph)/스크롤, 모바일 분리·풀스크린 */
#popup-stack { position: relative; z-index: 9998; }
.jpopup { position: fixed; z-index: 9998; --ox: 0px; --oy: 0px; }

.jpopup-card {
  position: relative; background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 12px 48px rgba(0,0,0,.28);
  width: var(--pw, 420px); max-width: calc(100vw - 32px);
  max-height: calc(100vh - 48px);
  display: flex; flex-direction: column;
  animation: jpop-in .25s ease;
}
@keyframes jpop-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.jpopup-body { overflow: hidden; }
.jpopup-body img { display: block; width: 100%; height: auto; }

/* 너비 0 = 이미지 원본 너비 */
.jpopup.autow .jpopup-card { width: auto; }
.jpopup.autow .jpopup-body img { width: auto; max-width: calc(100vw - 32px); }

/* 높이 지정 */
.jpopup.fixedh .jpopup-card { height: var(--ph); }
.jpopup.fixedh .jpopup-body { flex: 1; min-height: 0; }
.jpopup.fixedh .jpopup-body img { width: 100%; height: 100%; object-fit: contain; }
/* 내부 스크롤 허용 */
.jpopup.canscroll .jpopup-body { overflow: auto; }
.jpopup.fixedh.canscroll .jpopup-body img { height: auto; object-fit: initial; }

.jpopup-x {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: rgba(0,0,0,.5); color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
}
.jpopup-x:hover { background: rgba(0,0,0,.75); }
.jpopup-content { padding: 22px; color: #1c2733; line-height: 1.6; }
.jpopup-content h1, .jpopup-content h2, .jpopup-content h3 { margin: 0 0 10px; }
.jpopup-cta { display: block; text-align: center; padding: 13px; background: #0b3d91; color: #fff; text-decoration: none; font-weight: 700; }
.jpopup-cta:hover { background: #1054c4; }
.jpopup-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; background: #f4f6f9; font-size: 13px; flex-shrink: 0; }
.jpopup-dont { color: #555; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.jpopup-close { background: 0; border: 0; color: #333; cursor: pointer; font-size: 13px; font-weight: 600; }
.jpopup.closing { opacity: 0; transition: opacity .2s; }

/* PC 9방향 위치 (오프셋 --ox/--oy 합산) */
.pcpos-tl { top: 24px;  left: 24px;  transform: translate(var(--ox), var(--oy)); }
.pcpos-tc { top: 24px;  left: 50%;   transform: translate(calc(-50% + var(--ox)), var(--oy)); }
.pcpos-tr { top: 24px;  right: 24px; transform: translate(var(--ox), var(--oy)); }
.pcpos-ml { top: 50%;   left: 24px;  transform: translate(var(--ox), calc(-50% + var(--oy))); }
.pcpos-mc { top: 50%;   left: 50%;   transform: translate(calc(-50% + var(--ox)), calc(-50% + var(--oy))); }
.pcpos-mr { top: 50%;   right: 24px; transform: translate(var(--ox), calc(-50% + var(--oy))); }
.pcpos-bl { bottom: 24px; left: 24px;  transform: translate(var(--ox), var(--oy)); }
.pcpos-bc { bottom: 24px; left: 50%;   transform: translate(calc(-50% + var(--ox)), var(--oy)); }
.pcpos-br { bottom: 24px; right: 24px; transform: translate(var(--ox), var(--oy)); }

/* PC/모바일 콘텐츠 전환 */
.pp-pc { display: block; }
.pp-m  { display: none; }

/* 디바이스 한정 */
@media (min-width: 769px) { .dev-mobile { display: none !important; } }
@media (max-width: 768px) { .dev-pc { display: none !important; } }

@media (max-width: 768px) {
  .pp-pc { display: none; }
  .pp-m  { display: block; }
  /* 모바일: 위치 무관 중앙/상/하 자동 */
  .jpopup { top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; }
  .jpopup-card { width: var(--mw, var(--pw, 86vw)) !important; max-width: calc(100vw - 24px); height: auto !important; }
  .mpos-center { top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; }
  .mpos-top    { top: 16px !important; left: 50% !important; transform: translateX(-50%) !important; }
  .mpos-bottom { bottom: 16px !important; left: 50% !important; transform: translateX(-50%) !important; }
  /* 모바일 풀스크린 */
  .mfs { top: 0 !important; left: 0 !important; right: 0; bottom: 0; transform: none !important; }
  .mfs .jpopup-card { width: 100vw !important; max-width: 100vw; height: 100vh !important; max-height: 100vh; border-radius: 0; }
  .mfs .jpopup-body { flex: 1; display: flex; align-items: center; justify-content: center; overflow: auto; }
  .mfs .pp-m img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
}