/* ═══════════════════════════════════════════════════════════════ mm_modal.css - 모바일 페이지 진입/퇴장 슬라이드 애니메이션 2026-04-25 신규 ───────────────────────────────────────────────────────────── 사용법: ← 우→좌 슬라이드 ← 아래→위 슬라이드 (상품등록) 사용 페이지: mm_my_sell, mm_my_like, mm_keyword_alert, mm_block_list, mm_contact, mm_viewed, mm_profile_edit, mm_find_id, mm_find_pass, mm_join, mm_chat, mm_withdraw, mm_terms, mm_privacy → mm-modal-rtl mm_register / product_add_new → mm-modal-btu ═══════════════════════════════════════════════════════════════ */ /* 진입 애니메이션 - body 전체에 적용 */ body.mm-modal { /* 페이지 로드 즉시 시작 위치 (화면 밖) */ opacity: 0; will-change: transform, opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden; /* 안드로이드: transform 부모 안 sticky 자식 위치 깨짐 방지 */ -webkit-perspective: 1000; perspective: 1000; } /* 우→좌 슬라이드 (대부분 페이지) */ body.mm-modal-rtl { transform: translateX(100%); transition: transform 380ms cubic-bezier(.22,.61,.36,1), opacity 220ms ease-out; } /* 아래→위 슬라이드 (상품등록 모달) */ body.mm-modal-btu { transform: translateY(100%); transition: transform 380ms cubic-bezier(.22,.61,.36,1), opacity 220ms ease-out; } /* 진입 완료 상태 (mm_modal.js 가 클래스 추가) */ body.mm-modal.mm-entered { transform: translate(0,0); opacity: 1; } /* 퇴장 애니메이션 (X 닫기 시) */ body.mm-modal.mm-leaving { opacity: 0; } body.mm-modal-rtl.mm-leaving { transform: translateX(100%); } body.mm-modal-btu.mm-leaving { transform: translateY(100%); } /* 공통 X 닫기 버튼 스타일 (선택적 사용) */ .mm-close-btn { width: 36px; height: 36px; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: inherit; flex-shrink: 0; padding: 0; } .mm-close-btn svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; fill: none; } .mm-close-btn:active { opacity: .6; }