/* ============================================================
   [A4] MNNBOX 앱식 UI — 토스트 + 확인 바텀시트/다이얼로그
   반응형: 모바일 = 하단 바텀시트, PC = 중앙 다이얼로그.
   브라우저 alert()/confirm() 대체. 전역 로드.
   ============================================================ */

/* ── 토스트 ── */
.mn-toast-wrap {
  position: fixed; left: 50%; top: 18px; transform: translateX(-50%);
  z-index: 100000; display: flex; flex-direction: column; gap: 8px;
  width: min(92vw, 440px); pointer-events: none;
}
.mn-toast {
  pointer-events: auto; background: #14181F; color: #fff;
  border-radius: 12px; padding: 13px 16px; font-size: 14px; font-weight: 600;
  line-height: 1.5; box-shadow: 0 8px 30px rgba(0,0,0,.22);
  display: flex; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(-10px); transition: .22s ease;
}
.mn-toast.show { opacity: 1; transform: none; }
.mn-toast--success { background: #0E9F6E; }
.mn-toast--error   { background: #C0483F; }
.mn-toast--info    { background: #0A2472; }
.mn-toast__ic { font-size: 16px; flex: none; }

/* ── 확인 시트/다이얼로그 ── */
.mn-sheet-backdrop {
  position: fixed; inset: 0; z-index: 100001;
  background: rgba(7,10,20,.5); opacity: 0; transition: opacity .2s ease;
  display: flex; align-items: flex-end; /* 모바일 기본: 하단 */
}
.mn-sheet-backdrop.show { opacity: 1; }
.mn-sheet {
  background: #fff; width: 100%;
  border-radius: 20px 20px 0 0; box-shadow: 0 -8px 40px rgba(0,0,0,.22);
  transform: translateY(100%); transition: transform .26s cubic-bezier(.22,1,.36,1);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mn-sheet-backdrop.show .mn-sheet { transform: none; }
.mn-sheet__inner { padding: 22px 22px 20px; max-width: 460px; margin: 0 auto; }
.mn-sheet__title { font-size: 17px; font-weight: 800; color: #14181F; margin: 0 0 6px; letter-spacing: -.01em; }
.mn-sheet__msg { font-size: 14px; color: #5B6472; margin: 0 0 18px; line-height: 1.6; white-space: pre-line; }
.mn-sheet__btns { display: flex; gap: 10px; }
.mn-sheet__btn {
  flex: 1; border: none; border-radius: 11px; padding: 14px 12px;
  font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: filter .12s;
}
.mn-sheet__btn:active { filter: brightness(.95); }
.mn-sheet__btn--cancel { background: #EEF0F3; color: #5B6472; }
.mn-sheet__btn--ok { background: #0A2472; color: #fff; }
.mn-sheet__btn--ok.danger { background: #C0483F; }

/* ── PC: 중앙 다이얼로그 ── */
@media (min-width: 641px) {
  .mn-sheet-backdrop { align-items: center; justify-content: center; }
  .mn-sheet {
    width: min(420px, 92vw); border-radius: 16px;
    box-shadow: 0 20px 60px rgba(7,26,74,.28);
    transform: scale(.96); opacity: .6;
    transition: transform .2s ease, opacity .2s ease;
  }
  .mn-sheet-backdrop.show .mn-sheet { transform: none; opacity: 1; }
  .mn-sheet__inner { padding: 26px 26px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .mn-toast, .mn-sheet, .mn-sheet-backdrop { transition: none; }
}