@charset "utf-8";
/**
 * 공통 모달(안내/확인) 전용 스타일
 * - #gfModalAlert / #gfModalConfirm 스코프이므로 기존 .modal 요소에는 영향이 없다.
 * - content.css 를 로드하지 않는 화면(tiles/main.jsp)에서도 동일하게 보이도록 자급자족 구성.
 */
#gfModalAlert,
#gfModalConfirm{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;display:none;}
#gfModalAlert.on,
#gfModalConfirm.on{display:block;}

#gfModalAlert .modal_overlay,
#gfModalConfirm .modal_overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);backdrop-filter:blur(3px);z-index:0;}

#gfModalAlert .modal_box,
#gfModalConfirm .modal_box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;
    width:90%;max-width:520px;max-height:90%;box-sizing:border-box;
    background:#fff;border-radius:12px;padding:0 30px 30px;}

/* 크기 옵션 (opt.size : 'sm' | 'md' | 'lg'). 미지정 시 기본 max-width 520px */
#gfModalAlert .modal_box.gf_size_sm,
#gfModalConfirm .modal_box.gf_size_sm{max-width:420px;}
#gfModalAlert .modal_box.gf_size_md,
#gfModalConfirm .modal_box.gf_size_md{max-width:520px;}
#gfModalAlert .modal_box.gf_size_lg,
#gfModalConfirm .modal_box.gf_size_lg{max-width:760px;}

#gfModalAlert .modal_header,
#gfModalConfirm .modal_header{position:relative;padding-top:40px;}
#gfModalAlert .modal_header h4,
#gfModalConfirm .modal_header h4{margin:0;padding:0;font-size:22px;line-height:1.4;text-align:center;color:#222;}
#gfModalAlert .modal_header h4:before,
#gfModalConfirm .modal_header h4:before{display:none;}

/* 닫기(X) — 템플릿 스프라이트 이미지에 의존하지 않도록 CSS 로 작도 */
#gfModalAlert .btn_close,
#gfModalConfirm .btn_close{position:absolute;top:10px;right:0;width:28px;height:28px;padding:0;margin:0;
    border:0;background:transparent;font-size:0;line-height:0;color:transparent;overflow:hidden;cursor:pointer;}
#gfModalAlert .btn_close:before, #gfModalConfirm .btn_close:before,
#gfModalAlert .btn_close:after,  #gfModalConfirm .btn_close:after{content:"";position:absolute;top:13px;left:4px;width:20px;height:2px;background:#666;}
#gfModalAlert .btn_close:before, #gfModalConfirm .btn_close:before{transform:rotate(45deg);}
#gfModalAlert .btn_close:after,  #gfModalConfirm .btn_close:after{transform:rotate(-45deg);}

#gfModalAlert .modal_con,
#gfModalConfirm .modal_con{margin-top:20px;max-height:50vh;overflow-y:auto;}
#gfModalAlert .modal_msg,
#gfModalConfirm .modal_msg{margin:0;font-size:16px;line-height:1.6;text-align:center;color:#333;word-break:keep-all;}

#gfModalAlert .modal_btn,
#gfModalConfirm .modal_btn{display:flex;justify-content:center;gap:8px;margin-top:24px;}
#gfModalAlert .modal_btn button,
#gfModalConfirm .modal_btn button{display:inline-flex;justify-content:center;align-items:center;
    min-width:110px;padding:12px 24px;border:1px solid #444;border-radius:50px;background:#fff;
    font-size:16px;color:#222;cursor:pointer;transition:.2s;}
#gfModalAlert .modal_btn .btn_pri,
#gfModalConfirm .modal_btn .btn_pri{background:#e55902;border-color:transparent;color:#fff;}
#gfModalAlert .modal_btn button:hover,
#gfModalConfirm .modal_btn button:hover{opacity:.85;}

/* 모달 표시 중 배경 스크롤 잠금 */
body.modal-open{overflow:hidden;}

@media all and (max-width:768px){
    #gfModalAlert .modal_box,
    #gfModalConfirm .modal_box{padding:0 20px 20px;}
    #gfModalAlert .modal_btn button,
    #gfModalConfirm .modal_btn button{min-width:90px;padding:10px 16px;font-size:15px;}
}