/* Morif Simple Popups */
/* Scroll lock is primarily handled via JS (body: fixed). Keep a CSS backstop. */
.mfsp-open{ overflow:hidden !important; overflow-x:hidden !important; overscroll-behavior:none; }
.mfsp-open body{ overflow:hidden !important; overflow-x:hidden !important; overscroll-behavior:none; }

.mfsp-modal{ position:fixed; inset:0; z-index:99999; display:none; }
.mfsp-modal.is-active{ display:block; }

/* Overlay: center modal and keep it inside viewport (incl. mobile safe areas) */
.mfsp-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:
    calc(18px + env(safe-area-inset-top))
    calc(18px + env(safe-area-inset-right))
    calc(18px + env(safe-area-inset-bottom))
    calc(18px + env(safe-area-inset-left));
  touch-action: auto;
}

/* Stack wrapper (PC: 여러 개 팝업을 한 번에 보여주기) */
.mfsp-stack{
  width:100%;
  max-height:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;

  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:16px;
}

/* Box: max width 500px, height grows naturally up to viewport; after that, body scrolls */
.mfsp-box{
  position:relative;
  width:min(420px, 92vw);
  max-height:min(92dvh, 92vh);
  display:flex;
  flex-direction:column;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,.35);
}


/* Body takes remaining height; if content is long, it scrolls INSIDE the popup (page doesn't move) */
.mfsp-body{
  flex:1 1 auto;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.mfsp-img{ display:block; width:100%; height:auto; }
.mfsp-link{ color:inherit; text-decoration:none; display:block; }
.mfsp-text{ padding:20px; font-size:16px; line-height:1.6; }

/* Bottom bar (PC/모바일 공통) */
.mfsp-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:14px;
  padding:12px 14px;
  background:#000;
  align-items:center;
}

.mfsp-btn{
  flex:0 0 auto;
  /* 버튼처럼 보이지 않게: "폰트형" 클릭 텍스트 */
  border:0 !important;
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  -webkit-appearance:none;
  appearance:none;

  font: inherit;
  font-size:13px !important;
  line-height:1.2;
  color:#fff !important;
  cursor:pointer;
}
.mfsp-btn:hover{ color:#96202E !important; }
.mfsp-btn:focus-visible{
  outline:2px solid rgba(255,255,255,.55);
  outline-offset:2px;
}


@media (min-width: 880px){
  /* PC에서 여러 개 팝업이 켜져있을 때: 5개 x 2줄 형태로 배치 */
  .mfsp-modal.mfsp-multi .mfsp-stack{
    max-width: min(1600px, 100%);
  }
  .mfsp-modal.mfsp-multi .mfsp-box{
    width: calc((100% - 64px) / 5);
    flex: 0 0 calc((100% - 64px) / 5);
    max-height: min(92dvh, 92vh);
  }
}
@media (max-width: 500px){
  /* 모바일: 좌우 20px 확보 */
  .mfsp-overlay{
    padding:
      calc(18px + env(safe-area-inset-top))
      calc(20px + env(safe-area-inset-right))
      calc(18px + env(safe-area-inset-bottom))
      calc(20px + env(safe-area-inset-left));
  }

  .mfsp-box{
    width:min(420px, calc(100vw - 40px));
  }

  /* 모바일에서는 여러 팝업이 있을 때 세로로 자연스럽게 스크롤되도록 */
  .mfsp-stack{
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:center;
  }
}