/* RN.alert·RN.confirm 오버레이(#rnModalOverlay)와 사진 선택 시트(#rnImgPickOverlay) — user_modal.js 가 그리는 마크업의 스타일.
   _js_user_modal.jsp 가 스크립트와 함께 싣는다(셸 head·mgr_top · 인증 화면). */

/* ── 알림·확인 모달 ── */
#rnModalOverlay{display:flex;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--u-black-a40);z-index:10100;align-items:center;justify-content:center;}
#rnModalOverlay .rn-modal{background:var(--u-bg-card);border-radius:12px;width:90%;max-width:360px;box-shadow:0 12px 40px var(--u-black-a20);overflow:hidden;animation:rnModalIn .2s ease;}
@keyframes rnModalIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
#rnModalOverlay .rn-m-icon{text-align:center;padding:28px 20px 10px;font-size:40px;}
#rnModalOverlay .rn-m-title{text-align:center;font-size:16px;font-weight:700;color:var(--u-ink);padding:0 20px;}
/* 공백 없는 긴 문자열(URL·uuid·파일명)은 여기서 끊는다 — 안 끊으면 고정폭 .rn-modal(overflow:hidden) 밖으로 나가 잘린다.
   모바일 오버라이드는 이 줄을 안 건드리므로 두 뷰포트에 다 적용된다. */
#rnModalOverlay .rn-m-msg{text-align:center;font-size:14px;color:var(--u-ink-light);padding:10px 24px 24px;line-height:1.5;overflow-wrap:anywhere;word-break:break-word;}
#rnModalOverlay .rn-m-actions{display:flex;border-top:1px solid var(--u-border);}
#rnModalOverlay .rn-m-btn{flex:1;padding:14px;font-size:15px;font-weight:600;border:none;cursor:pointer;background:var(--u-bg-card);color:var(--u-ink-light);transition:background .1s;}
#rnModalOverlay .rn-m-btn:hover{background:var(--u-bg-gray);}
#rnModalOverlay .rn-m-btn.primary{color:var(--u-accent);}
#rnModalOverlay .rn-m-btn.danger{color:var(--u-danger);}
#rnModalOverlay .rn-m-btn + .rn-m-btn{border-left:1px solid var(--u-border);}
/* 모바일(≤980px): 중앙 모달 → 바텀시트 */
@media (max-width:980px){
#rnModalOverlay{align-items:flex-end;background:var(--u-mo-ink-a50);}
#rnModalOverlay .rn-modal{width:100%;max-width:100%;border-radius:24px 24px 0 0;box-shadow:0 -8px 30px var(--u-mo-ink-a18);padding:8px 24px calc(26px + env(safe-area-inset-bottom));animation:rnSheetIn .28s cubic-bezier(.32,.72,0,1);}
#rnModalOverlay .rn-modal::before{content:"";display:block;width:40px;height:4px;background:var(--u-mo-grey-faint);border-radius:2px;margin:6px auto 16px;}
#rnModalOverlay .rn-m-icon{display:none;}
#rnModalOverlay .rn-m-title{text-align:left;font-size:21px;font-weight:800;letter-spacing:-0.5px;color:var(--u-mo-ink);padding:0;}
#rnModalOverlay .rn-m-msg{text-align:left;font-size:14px;color:var(--u-mo-grey);font-weight:500;padding:5px 0 0;line-height:1.55;}
#rnModalOverlay .rn-m-actions{border-top:none;gap:9px;margin-top:20px;}
#rnModalOverlay .rn-m-btn{flex:1;height:56px;padding:0;border-radius:16px;font-size:16px;font-weight:800;letter-spacing:-0.3px;background:var(--u-mo-line);color:var(--u-mo-grey-strong);}
#rnModalOverlay .rn-m-btn:hover{background:var(--u-border);}
#rnModalOverlay .rn-m-btn + .rn-m-btn{border-left:none;}
#rnModalOverlay #rnModalCancel{flex:0.55;}
#rnModalOverlay .rn-m-btn.primary{background:var(--u-accent);color:var(--u-on-accent);}
#rnModalOverlay .rn-m-btn.primary:hover{background:var(--u-accent-hover);}
#rnModalOverlay .rn-m-btn.danger{background:var(--u-danger);color:var(--u-on-accent);}
#rnModalOverlay .rn-m-btn.danger:hover{background:var(--u-danger-strong);}
}
@keyframes rnSheetIn{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ── 사진 선택 시트(RN.pickImage) ── */
#rnImgPickOverlay{display:flex;position:fixed;top:0;left:0;right:0;bottom:0;background:var(--u-black-a40);z-index:9998;align-items:flex-end;justify-content:center;}
#rnImgPickOverlay .rn-pick-sheet{background:var(--u-bg-card);width:100%;max-width:420px;border-radius:14px 14px 0 0;padding:8px 8px 12px;animation:rnPickIn .2s ease;}
@keyframes rnPickIn{from{transform:translateY(100%)}to{transform:translateY(0)}}
#rnImgPickOverlay .rn-pick-title{text-align:center;font-size:13px;color:var(--u-ink-light);padding:10px;}
#rnImgPickOverlay .rn-pick-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:15px;font-size:15px;font-weight:600;border:none;background:var(--u-bg-gray);color:var(--u-ink);border-radius:10px;cursor:pointer;margin-bottom:6px;}
#rnImgPickOverlay .rn-pick-btn:hover{background:var(--u-bg);}
#rnImgPickOverlay .rn-pick-btn i{color:var(--u-accent);}
#rnImgPickOverlay .rn-pick-cancel{background:var(--u-bg-card);color:var(--u-ink-light);margin-bottom:0;}
