/* ============================================================
   팝업(모달) 공용 스타일 — 기준은 로그인 모달(assets/admin-login.js가 띄우는 것)이다.
   서비스 안의 모든 팝업이 같은 딤(어두운 배경+블러) · 같은 모서리(20px) · 같은 X 버튼을 쓰도록
   각 화면에 흩어져 있던 팝업 클래스들을 여기 한 곳에서 함께 맞춘다(2026-08-19).

   여기서 함께 맞추는 팝업들
     .um-login-overlay / .um-login-modal / .um-login-close   로그인 (기준)
     .modal-back      / .modal          / .modal-x           마이페이지(대시보드) — 공유·QR·설정·통계
     .url-modal-overlay / .url-modal    / .url-modal-close   에디터 — 청첩장 주소 만들기
     .qr-modal        / .qr-modal-content                    포토 방명록 — QR

   새 팝업을 만들 땐 이 세 겹(딤 / 카드 / 닫기 버튼)을 그대로 쓰거나,
   여기 셀렉터 목록에 새 클래스를 한 줄 더 얹는다.
   ============================================================ */

/* ── ① 딤: 어둡게 깔고 뒤를 살짝 흐린다 ── */
.um-login-overlay,
.modal-back,
.url-modal-overlay,
.qr-modal{
  background:rgba(20,20,24,.55);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}

/* ── ② 카드: 같은 모서리와 같은 그림자 ── */
.um-login-modal,
.modal,
.url-modal,
.qr-modal-content{
  border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}
/* 모서리를 20px로 키우면 안쪽 콘텐츠가 라운드 밖으로 삐져나올 수 있다 — 카드가 잘라준다 */
.modal,.url-modal,.qr-modal-content{overflow:hidden;}
/* 대시보드 모달은 내용이 길면 카드 안에서 세로로 스크롤된다(overflow:hidden이 이를 덮지 않게) */
.modal{overflow-y:auto;}

/* ── ③ 닫기(X) 버튼: 동그란 회색 배경의 32px 버튼 ── */
.um-login-close,
.modal-x,
.url-modal-close{
  width:32px; height:32px; flex:none; padding:0;
  border:none; border-radius:50%;
  background:rgba(0,0,0,.06); color:#333;
  font-size:15px; line-height:32px; text-align:center; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s ease;
}
.um-login-close:hover,
.modal-x:hover,
.url-modal-close:hover{background:rgba(0,0,0,.12); color:#111;}
/* 머리줄(제목 옆)이 아니라 카드 모서리에 얹는 X — 로그인 모달과 같은 자리(위 14px, 오른쪽 14px) */
.um-login-close,
.modal-x.floating{position:absolute; top:14px; right:14px; z-index:2;}