/*
 * 피폿 공통 모달 — 가이드의 alert() 대체(개발문서 §4-8, Q-12). ui-ux-pro-max 점검 반영:
 * role=dialog/alertdialog · 포커스 가두기 · Esc · 기본 포커스 주 버튼 · 아이콘+글자로 의미 전달(색만 쓰지 않음) ·
 * 버튼 높이 44px · 들어올 때 280ms ease-out-back / 나갈 때 160ms ease-in · prefers-reduced-motion · 375px 대응.
 * 토큰은 가이드 새 스타일(오렌지 #FF5E1E + 그라데이션, Pretendard, 반경 20px, 유리 오버레이) 안에서만 쓴다.
 * 이용자 서비스(pipot)가 원본, 관리자 서비스(pipot-admin)는 같은 파일 사본.
 */
.pm-overlay {
  --pm-orange: #FF5E1E;
  --pm-gradient: linear-gradient(135deg, #FF5E1E 0%, #F97316 100%);
  --pm-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: 1.25rem;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transition: opacity 200ms ease-out;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  letter-spacing: -0.02em;
}
.pm-overlay.pm-open { opacity: 1; }
.pm-overlay.pm-closing { opacity: 0; transition: opacity 160ms ease-in; }

.pm-card {
  position: relative; width: 100%; max-width: 420px;
  background: #FFFFFF; border-radius: 20px; padding: 2rem 1.75rem 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35), 0 0 0 1px rgba(226, 232, 240, 0.9);
  text-align: center; color: #0F172A;
  transform: translateY(14px) scale(0.96);
  transition: transform 280ms var(--pm-ease-back);
}
.pm-open .pm-card { transform: translateY(0) scale(1); }
.pm-closing .pm-card { transform: translateY(8px) scale(0.98); transition: transform 160ms ease-in; }

.pm-icon {
  width: 52px; height: 52px; margin: 0 auto 1rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #FFF5F0; border: 1px solid #FFD2C0; color: var(--pm-orange);
}
.pm-icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pm-overlay[data-kind="success"] .pm-icon { background: #ECFDF5; border-color: #A7F3D0; color: #047857; }
.pm-overlay[data-kind="confirm"] .pm-icon,
.pm-overlay[data-kind="quota"] .pm-icon { background: #FFF7ED; border-color: #FDBA74; color: #C2410C; }
.pm-overlay[data-kind="error"] .pm-icon { background: #FEF2F2; border-color: #FCA5A5; color: #B91C1C; }
.pm-overlay[data-kind="input"] .pm-icon { background: #F1F5F9; border-color: #CBD5E1; color: #334155; }

.pm-eyebrow {
  display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em;
  padding: 3px 10px; border-radius: 9999px; margin-bottom: 0.6rem;
  background: #FFF5F0; color: #C2410C; border: 1px solid #FFD2C0;
}
.pm-overlay[data-kind="error"] .pm-eyebrow { background: #FEF2F2; color: #991B1B; border-color: #FCA5A5; }
.pm-overlay[data-kind="success"] .pm-eyebrow { background: #ECFDF5; color: #065F46; border-color: #A7F3D0; }
.pm-overlay[data-kind="input"] .pm-eyebrow { background: #F1F5F9; color: #334155; border-color: #CBD5E1; }

.pm-title { font-size: 1.2rem; font-weight: 900; line-height: 1.4; color: #0F172A; margin: 0 0 0.5rem; }
.pm-msg { font-size: 0.95rem; line-height: 1.65; color: #475569; margin: 0; white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; }

/* detail — 선택·복사용 읽기 전용 한 줄(공유 링크 등). 터치 높이 44px, 긴 링크는 말줄임 + 포커스 시 전체 선택 */
.pm-detail {
  display: block; width: 100%; box-sizing: border-box; min-height: 44px; margin-top: 1rem;
  padding: 0.65rem 0.85rem; border: 1.5px solid #E2E8F0; border-radius: 10px; background: #F8FAFC;
  font-family: inherit; font-size: 0.875rem; font-weight: 600; color: #0F172A; text-align: left;
  text-overflow: ellipsis; letter-spacing: 0;
}
.pm-detail:focus-visible { outline: 3px solid rgba(255, 94, 30, 0.45); outline-offset: 2px; border-color: #FF5E1E; }

.pm-actions { display: flex; gap: 0.625rem; margin-top: 1.5rem; }
.pm-btn {
  flex: 1; min-height: 46px; padding: 0.7rem 1rem; border-radius: 10px;
  font-family: inherit; font-size: 0.95rem; font-weight: 800; letter-spacing: -0.02em;
  cursor: pointer; transition: transform 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out;
}
.pm-btn:focus-visible { outline: 3px solid rgba(255, 94, 30, 0.45); outline-offset: 2px; }
.pm-primary { border: none; color: #FFFFFF; background: var(--pm-gradient); box-shadow: 0 8px 20px -6px rgba(255, 94, 30, 0.45); }
.pm-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -6px rgba(255, 94, 30, 0.55); }
.pm-secondary { border: 1.5px solid #CBD5E1; background: #FFFFFF; color: #334155; }
.pm-secondary:hover { background: #F8FAFC; border-color: #94A3B8; }
.pm-overlay[data-kind="error"] .pm-primary.pm-danger,
.pm-primary.pm-danger { background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%); box-shadow: 0 8px 20px -6px rgba(185, 28, 28, 0.4); }

html.pm-lock, html.pm-lock body { overflow: hidden !important; }

@media (max-width: 480px) {
  .pm-overlay { align-items: flex-end; padding: 0.75rem; }
  .pm-card { max-width: none; padding: 1.75rem 1.25rem 1.25rem; border-radius: 20px; }
  .pm-actions { flex-direction: column-reverse; }
  .pm-detail { font-size: 1rem; } /* iOS 입력칸 포커스 확대 방지(16px) */
}

@media (prefers-reduced-motion: reduce) {
  .pm-overlay, .pm-overlay.pm-closing { transition: opacity 1ms linear; }
  .pm-card, .pm-open .pm-card, .pm-closing .pm-card { transform: none; transition: none; }
  .pm-btn { transition: none; }
}

@media print { .pm-overlay { display: none !important; } }