/* =========================================================
   모달 컴포넌트 (.mdl)

   디자인 시스템: Modal/Alert (office 파일 2RXVwEVTf8LfMv522z6tju / 133:5576)
   값은 후불 상조 시안의 인스턴스(CMVSYu7vfydMgeKtgcJv1X / 2274:12613)를 따른다 -
   같은 컴포넌트인데 껍데기 치수가 조금 다르다(335/r8/24·20·20 → 327/r12/20·20·16).

   짝을 이루는 파일 - 셋을 함께 옮겨야 동작한다:
     CI/apply/application/modules/common/views/inc/partials/_alert_modal.php
     apply/js/modal.js

   두 겹으로 나뉜다.
     .mdl        껍데기 - 딤 · 가운데 상자 · 열고 닫기. 어떤 내용이든 담는다.
     .mdl-alert  DS 의 Alert 배치 - 아이콘 · 제목 · 설명(선택) · 확인 버튼 하나.
   다른 모양의 모달이 필요하면 .mdl 만 쓰고 안을 새로 짜면 된다 - .mdl-alert 를 고치지 말 것.

   .csf(상담 접수 폼)와 같은 관례를 쓴다: hidden 속성으로 접고 .is-open 으로 애니메이션,
   닫기 지점은 data-mdl-close. 두 컴포넌트를 나중에 합치기 쉽도록 일부러 맞췄다.
   ========================================================= */

.mdl {
    position: fixed;
    inset: 0;
    /* .csf(1000)보다 위 - 접수 완료 모달이 시트를 덮으며 뜬다. */
    z-index: 1100;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.mdl[hidden] {
    display: none !important;
}
/* hidden 속성의 UA 스타일은 특정도 0 이라 클래스 규칙에 진다 - 안에서는 el.hidden 이 항상 이기게 한다. */
.mdl [hidden] {
    display: none !important;
}

.mdl-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.mdl-box {
    position: absolute;
    left: 50%;
    top: 50%;
    box-sizing: border-box;
    /* 폭은 시안 고정값. 320 짜리 화면에서 넘치지 않게 상한만 둔다. */
    width: 327px;
    max-width: calc(100vw - 40px);
    padding: 20px 20px 16px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.mdl.is-open .mdl-dim {
    opacity: 1;
}
.mdl.is-open .mdl-box {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .mdl-dim,
    .mdl-box {
        transition: none;
    }
}

/* --- 닫기 (껍데기 공용) --- */
.mdl-close-row {
    display: flex;
    justify-content: flex-end;
}
.mdl-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.mdl-close img {
    width: 20px;
    height: 20px;
}

/* =========================================================
   Alert 배치
   ========================================================= */

.mdl-alert {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.mdl-alert-head {
    display: flex;
    flex-direction: column;
}
/* 아이콘 자리는 높이 62 로 고정 - 상태 아이콘이 바뀌어도 제목 위치가 흔들리지 않는다. */
.mdl-alert-icon {
    display: flex;
    height: 62px;
    align-items: center;
    justify-content: center;
}
.mdl-alert-icon img {
    width: 62px;
    height: 62px;
}
.mdl-alert-text {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 20px;
}
/* 시안은 nowrap + 말줄임이지만 실제 문구는 길이가 제각각이라 접히게 둔다 -
   자르면 "무엇이 완료됐는지"가 사라진다. */
.mdl-alert-title {
    margin: 0;
    color: #191a1a;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    letter-spacing: -0.4px;
    text-align: center;
}
/* 설명 줄은 DS 에는 있고 이번 시안에는 없다 - 기본은 꺼져 있고 text 를 넘기면 켜진다. */
.mdl-alert-desc {
    margin: 0;
    color: #555a5d;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: -0.21px;
    text-align: center;
}
.mdl-alert-cta {
    display: flex;
    height: 48px;
}
.mdl-alert-btn {
    flex: 1 1 auto;
    height: 48px;
    border: 0;
    border-radius: 6px;
    background: #f57a77;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    cursor: pointer;
}