/* =====================================================================
   공용 안내 모달 (브라우저 alert/confirm 대체) — 사이트 유일 정의.
   main(style.css)·mypage(common.css)에 중복 정의돼 있던 것을 한 벌로 합쳤다.
   마크업은 static/common/js/wj-modal.js 가 생성한다.

   버튼 색은 "연한 배경 + 같은 계열 진한 글자" 로 의미를 구분한다 —
   넓은 면적을 진한 색으로 채우지 않는다.
     tone_confirm(연초록) 그냥 확인 / tone_action(연파랑) 클릭해서 뭔가 하는 버튼
     tone_danger(연빨강)  부정·파괴적 / tone_cancel(회색) 2버튼 모달의 취소
   두 버튼이 나란한 경우 위험한 쪽에만 색을 준다 (취소=회색, 탈퇴하기=연빨강).
   ===================================================================== */

.wj_modal {
    display: none;
    position: fixed;
    inset: 0;
    /* mypage 헤더·좌측메뉴 위에 떠야 해서 사이트 최상위 값으로 통일 */
    z-index: 100000;
    background: rgba(15,23,42,.45);
    align-items: center;
    justify-content: center;
}
.wj_modal.on {
    display: flex;
}
.wj_modal_box {
    width: 90%;
    max-width: 340px;
    background: #fff;
    border-radius: 16px;
    padding: 24px 22px 20px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    animation: wjModalUp .22s ease;
}

/* 아이콘 — 연한 원형 배지 안에 작은 글리프 (색은 하단 톤별 규칙에서 지정) */
.wj_modal_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-bottom: 12px;
}
.wj_modal.no_ico .wj_modal_badge {
    display: none;
}
.wj_modal_ico {
    font-size: 18px;
    line-height: 1;
}

/* pre-line: 탈퇴 확인 문구 등에서 넘겨받는 \n 줄바꿈을 살린다 */
.wj_modal_msg {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.5;
    letter-spacing: -0.3px;
    white-space: pre-line;
}
/* 부가 문구(응모권 지급 안내 등) — has_sub 일 때만 노출 */
.wj_modal_sub {
    display: none;
    margin-top: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #0d498c;
    line-height: 1.5;
    letter-spacing: -0.3px;
}
.wj_modal.has_sub .wj_modal_sub {
    display: block;
}

.wj_modal_btns {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}
.wj_modal_btn {
    flex: 1;
    height: 46px;
    border: 0;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.3px;
    cursor: pointer;
    transition: background .15s ease;
}

.wj_modal_btn.tone_confirm {
    background: #e9f6ee;
    color: #1f7a45;
}
.wj_modal_btn.tone_confirm:hover {
    background: #ddf0e5;
}
.wj_modal_btn.tone_action {
    background: #e8f0fa;
    color: #0d498c;
}
.wj_modal_btn.tone_action:hover {
    background: #dbe8f6;
}
.wj_modal_btn.tone_danger {
    background: #fdecec;
    color: #d64545;
}
.wj_modal_btn.tone_danger:hover {
    background: #f9dede;
}
.wj_modal_btn.tone_cancel {
    background: #f4f5f6;
    color: #555;
}
.wj_modal_btn.tone_cancel:hover {
    background: #e9eaec;
}

/* 배지 색은 모달 전체 톤을 따른다 */
.wj_modal.tone_confirm .wj_modal_badge {
    background: #e9f6ee;
    color: #1f7a45;
}
.wj_modal.tone_action .wj_modal_badge {
    background: #e8f0fa;
    color: #0d498c;
}
.wj_modal.tone_danger .wj_modal_badge {
    background: #fdecec;
    color: #d64545;
}

@keyframes wjModalUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}