/**
 * mm-modal.css — MyMerci 공용 결제 유도/체험 안내 모달 디자인 토큰
 *
 * 사용처:
 *   - lib/trial.lib.php   render_trial_modal()       — 한도/만료 차단 시점
 *   - pages/mocktest_result.php #trial_scroll_modal  — 결과 페이지 스크롤 트리거
 *
 * 의도:
 *   두 모달은 트리거/컨텍스트/로직이 달라 마크업을 합치진 않지만, 디자인 토큰은
 *   100% 공유하므로 이 파일 한 곳에서만 관리하면 자동 동기화된다.
 *   상태성(display:none/flex 등)은 호출처의 인라인 style 또는 JS 토글에 맡기고
 *   여기엔 시각 토큰만 둔다.
 *
 * 주의: voucher_modal.php (.vm-modal) 는 별도 결제 시스템이며 이 파일과 무관.
 */

/* 오버레이 — display 토글은 호출처에서 (hidden=none, 노출=flex) */
.mm-modal-overlay { position: fixed; inset: 0; z-index: 2147483647; background: rgba(0,0,0,0.6); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; }

/* 카드 컨테이너 */
/* hd_pops_modal portrait 비율 유지 + 크기 축소 + 이미지 full-bleed.
   360×488 → 340×460 (5% 축소, 비율 ~0.74 유지). overflow:hidden 으로 이미지가 카드 라운드 코너에 맞춰 잘림.
   min-height + flex column 으로 vm-modal 높이와 균일. CTA는 margin-top:auto로 바닥 고정. */
.mm-modal-card { position: relative; background: #fff; border-radius: 18px; max-width: 340px; width: 100%; min-height: min(460px, 85vh); padding: 40px 24px 24px; text-align: center; box-shadow: 0 24px 60px rgba(0,0,0,0.3); box-sizing: border-box; animation: mmModalIn 0.3s ease-out; display: flex; flex-direction: column; overflow: hidden; }
.mm-modal-cta { margin-top: auto; }

/* 닫기 버튼 (×) */
.mm-modal-close { position: absolute; top: 10px; right: 14px; border: 0; background: transparent; font-size: 26px; line-height: 1; padding: 4px 8px; color: #aaa; cursor: pointer; }

/* 상단 아이콘 원 (Variant B: 매핑된 수강권 이미지 없을 때 fallback) */
.mm-modal-icon { width: 72px; height: 72px; border-radius: 50%; background: #f0f7ff; color: #2097FF; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.mm-modal-icon i { font-size: 32px; }

/* Hero 카드 (Variant A: 수강권 이미지 + 풀 타이틀 — 모달의 시각 hero) */
/* full-bleed: hero wrapper에 negative margin 으로 카드 padding(40px 24px) 무력화 → 이미지가 카드 가장자리까지 닿음.
   카드의 overflow:hidden + border-radius:18px 가 이미지를 둥글게 클립. */
.mm-modal-hero { margin: -40px -24px 16px; }
.mm-modal-hero-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; display: block; background: #fff; }
/* 이미지는 full-bleed 인데 타이틀은 hero wrap 안에 있으므로 horizontal padding 재추가 */
.mm-modal-hero-title { padding: 14px 24px 0; font-size: 18px; font-weight: 600; color: #1a1a1a; line-height: 1.4; margin: 0; letter-spacing: -0.3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; }

/* 타이틀/서브타이틀 */
.mm-modal-title { font-size: 20px; font-weight: 800; color: #222; margin: 0 0 6px; }
.mm-modal-subtitle { font-size: 14px; color: #2097FF; font-weight: 700; margin: 0 0 14px; }
/* 서브타이틀 아래 보조 안내 문구 — 컨텍스트 보완 (배경 없는 옅은 회색 텍스트) */
.mm-modal-helper { font-size: 13px; color: #6b7280; line-height: 1.5; margin: 0 0 16px; padding: 0 8px; word-break: keep-all; }

/* 후킹 카피 + 가치 제안 (체험→정규 전환 유도 본문)
   의도: 빈 중간 공간을 채우면서 "흐름 연속성" 메시지로 결제 동기 강화 */
.mm-modal-pitch { margin: 0 0 20px; padding: 0 8px; }
.mm-modal-pitch-lead { font-size: 18px; font-weight: 600; color: #1a1a1a; line-height: 1.5; margin: 0 0 16px; letter-spacing: -0.4px; word-break: keep-all; }
.mm-modal-pitch-lead strong { color: #2097FF; }
/* width:fit-content + margin auto → 컨텐츠 폭만큼만 차지하고 가운데 정렬 (모달 전체 text-align:center와 시각 일치) */
.mm-modal-pitch-list { list-style: none; padding: 0; margin: 0 auto; display: flex; flex-direction: column; gap: 9px; width: fit-content; max-width: 100%; }
.mm-modal-pitch-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: #4b5563; text-align: left; line-height: 1.5; word-break: keep-all; }
.mm-modal-pitch-list li i { color: #2097FF; font-size: 12px; margin-top: 4px; flex-shrink: 0; }
.mm-modal-pitch-list li span { flex: 1; }

/* FOMO 칩 (좌측 그린 닷 + 활성 회원수) */
.mm-modal-fomo { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; padding: 5px 12px; background: #fff; border: 1px solid #e8f1fb; border-radius: 20px; font-size: 12px; color: #555; box-shadow: 0 1px 3px rgba(32,151,255,0.08); max-width: 100%; }
.mm-modal-fomo-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,0.6); animation: mmFomoPulse 1.6s ease-in-out infinite; flex-shrink: 0; }
.mm-modal-fomo strong { color: #2097FF; font-weight: 800; }

/* 본문 박스 (라이트 블루 틴트) */
.mm-modal-body { font-size: 14px; color: #555; line-height: 1.5; margin: 0 0 24px; padding: 14px 16px; background: #f0f7ff; border-radius: 10px; }
.mm-modal-body strong { color: #222; }

/* CTA 버튼 (Hero pill, 그라데이션) */
.mm-modal-cta { display: inline-block; padding: 13px 28px; background: #2097FF; color: #fff; border-radius: 24px; font-size: 14px; font-weight: 500; text-decoration: none; box-shadow: 0 4px 12px rgba(32,151,255,0.35); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.mm-modal-cta:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(32,151,255,0.45); }
.mm-modal-cta:active { transform: scale(0.98); }

/* 애니메이션 */
@keyframes mmModalIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes mmFomoPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); } 50% { box-shadow: 0 0 0 6px rgba(34,197,94,0); } }