/* 모달 셸 공용 컴포넌트 - 모달 창의 틀(머리·본문·닫기)을 어느 화면에서든 같은 모양으로. 레이아웃이 base 뒤에 싣는다 */
@layer lib, custom;
@layer custom {
/* 모달 셸이 자기 마크업에 쓰는 클래스만 둔다. 상세 페이지는 같은 역할에 conScroll-wrap 과
   conDetailBtn_box 를 따로 쓰므로 여기 대상이 아니다. box3 나 box5 처럼 화면 전체가 공유하는
   박스 클래스도 넣지 않는다 - 그쪽 주인은 스킨 CSS 라서, 여기에 복제하면 스킨이 바뀔 때 갈라진다. */

/* 버튼 사이 간격의 근거는 gap 하나여야 한다. 종전에는 마크업의 공백 텍스트 노드에 의존했는데,
   셸이 버튼을 버튼 행으로 모으면 그 공백이 사라져 간격이 버튼마다 달라진다. */
.modalBtn_box {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* 부트스트랩이 modal-footer 안 버튼에 주는 margin-left 가 위 gap 에 더해진다.
   상쇄하지 않으면 footer 에 남은 버튼만 다른 자리보다 넓게 벌어진다. */
.modal-footer .modalBtn_box .btn + .btn {
    margin-left: 0;
}

/* footer 는 flex 라 래퍼가 내용폭으로 줄어든다. 그러면 안쪽 justify-content:center 가
   보이지 않고 버튼이 오른쪽에 몰린다 - 래퍼를 한 줄 전체로 펴 준다. */
.modal-footer > .modalScroll-wrap {
    flex: 1 1 100%;
}

@media (max-width:768px) {
    /* 모바일에서 버튼이 넘치면 가로로 스크롤한다. 아래 min-width 의 max-content 가 없으면
       넘칠 때 왼쪽 버튼이 스크롤 범위 밖으로 잘린다 - 제거하지 말 것. */
    .modalScroll-wrap {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, .2) transparent;
    }

    .modalBtn_box {
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 8px;
        min-width: max-content;
    }

    .modalBtn_box > * {
        flex: 0 0 auto;
    }
}

/* 부트스트랩 5 는 .modal-dialog 에 max-width(--bs-modal-width, 576px 이상에서 500px)를 걸어
   호출부가 준 width 를 잘라낸다. 부트스트랩 3 에는 이 상한이 없어 인라인 width 가 그대로 먹혔다.
   폭을 명시한 다이얼로그만 상한을 화면 기준으로 되돌린다 - 폭을 안 준 모달은 부트스트랩 기본값을 유지한다. */
@media (min-width: 576px) {
    .modal > .modal-dialog[style*="width"] {
        max-width: 95%;
    }
}

/* 조회 중 모달 본문을 덮는 가림막 - modal.common.js 가 이 마크업을 만든다(260902에 레이아웃에서 옮김) */
.modal-body .custom_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    background: var(--mfm-vw-rgba-255-255-255-30);
    border-radius: 3px;
}

.modal-body .custom_overlay .fa {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -15px;
    margin-top: -15px;
    color: var(--mfm-vw-000000);
    font-size: 30px;
}

/* mfm-base.css 에 있던 규칙 - 소관을 맞춰 여기로 옮김(모달 셸의 크기·배치) */
#modalFrame{
    max-width: 100%;
}
.modal-dialog .modal-content h4.modal-title i{
    margin-right:7px;
}
/* gModal.frame(리포트 뷰어 iframe) 모달 반응형 — modal.common.js 가 호출부 인자(1200/700 등)를
   다이얼로그와 iframe 에 인라인 px 로 박아 화면보다 넓어도 줄지 않던 것. 요청 폭은 그대로 두고 화면을 넘을
   때만 가둔다(축소 전용이라 데스크톱 표시는 종전과 동일).
   셀렉터는 JS 가 채우는 공용 셸(globalModalView/globalModalPopupView)로 한정한다 — id="modal-dialog" 는
   뷰 자체 모달에도 여러 곳 중복돼 있어 그쪽 width 까지 건드리지 않으려는 것 */
#globalModalView > .modal-dialog,
#globalModalPopupView > .modal-dialog{
    max-width: 95%;
}
.modal-header{
    padding-bottom:0;
}
@media (max-width:768px) {
.modal-dialog{
        width:95% !important;
        /* 폭을 95% 로 줄이는 만큼 좌우를 나눠 가져야 가운데 선다 - 부트스트랩은 이 구간에서 .5rem 고정이라
           왼쪽만 8px 이 되고 남는 여백이 전부 오른쪽으로 몰린다 */
        margin-left: auto;
        margin-right: auto;
    }
/* frame(iframe) 모달 모바일 — 인라인 px(width 1170/height 700)를 화면 기준으로 되돌린다.
       다이얼로그 자체의 인라인 height 는 건드리지 않는다(modal-dialog 는 배경 없는 래퍼라 남는 높이가
       보이지 않고, id 가 뷰 모달과 겹쳐 있어 강제로 덮으면 무관한 모달까지 영향받는다) */
    #modalFrame{
        width: 100% !important;
        height: 70vh !important;
    }
}
}

/* print frame modal - inner document has its own padding */
.modal-body.modal-body-frame {
    padding-bottom: 4px;
}