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

   아이콘 배지는 "연한 배경 + 같은 계열 진한 글자" 로 의미를 구분한다.
     tone_confirm(초록 체크) 완료 / tone_action(파랑 i·?) 안내·질문 / tone_danger(빨강 경고) 실패·파괴적
   버튼은 주 버튼만 진하게 채우고(남색, 파괴적이면 빨강) 취소는 연회색으로 낮춘다 —
   두 버튼이 둘 다 연한 색이면 어느 쪽이 '예'인지 한눈에 안 들어온다 (2026-10 개선안 A).
   본문은 첫 줄이 제목(.wj_modal_msg), 나머지가 설명(.wj-modal__desc) — wj-modal.js 가 나눈다.
   ===================================================================== */

.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: 26px 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: 44px;
    height: 44px;
    border-radius: 50%;
    margin-bottom: 14px;
}
.wj_modal.no_ico .wj_modal_badge {
    display: none;
}
.wj_modal_ico {
    font-size: 20px;
    line-height: 1;
}
/* 질문 배지의 '?' — xeicon 이 아니라 글자로 그린다.
   xeicon.min.css 의 `i { font-family: xeicon !important }` 를 피하려고 <i> 안쪽 span 에 둔다 */
.wj-modal__glyph {
    font-family: 'Pretendard', sans-serif;
    font-size: 22px;
    font-weight: 800;
    font-style: normal;
}

/* 제목 — pre-line: 제목 안에서 일부러 끊은 줄(앱 설치 안내 등)을 살린다 */
.wj_modal_msg {
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.45;
    letter-spacing: -0.4px;
    white-space: pre-line;
}
/* 설명 — 메시지의 둘째 줄부터. 있을 때만 노출 */
.wj-modal__desc {
    display: none;
    margin-top: 6px;
    font-size: 14.5px;
    font-weight: 500;
    color: #64748b;
    line-height: 1.55;
    letter-spacing: -0.3px;
    white-space: pre-line;
}
.wj_modal.wj-modal--has-desc .wj-modal__desc {
    display: block;
}
/* 부가 문구(응모권 지급 안내 등) — 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: 22px;
}
.wj_modal_btn {
    flex: 1;
    height: 48px;
    border: 0;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.3px;
    cursor: pointer;
    transition: background .15s ease;
}
.wj_modal_btn:focus {
    outline: none;
}
.wj_modal_btn:focus-visible {
    outline: 2px solid #0d498c;
    outline-offset: 2px;
}

/* 주 버튼 — 완료·안내·질문은 남색, 파괴적·실패는 빨강 채움 */
.wj_modal_btn.tone_confirm,
.wj_modal_btn.tone_action {
    background: #0d498c;
    color: #fff;
}
.wj_modal_btn.tone_confirm:hover,
.wj_modal_btn.tone_action:hover {
    background: #0a3c74;
}
.wj_modal_btn.tone_danger {
    background: #d64545;
    color: #fff;
}
.wj_modal_btn.tone_danger:hover {
    background: #c03a3a;
}
.wj_modal_btn.tone_cancel {
    background: #f1f3f5;
    color: #4b5563;
}
.wj_modal_btn.tone_cancel:hover {
    background: #e7eaee;
}

/* 보조 액션(로그인 안내의 '회원가입' 등) — 주 액션과 같은 색을 테두리로만 쓴다.
   톤 클래스를 물려받으면 흰 글자가 되므로 글자색을 다시 지정하고, currentColor 로 테두리 색이 따라온다.
   톤 규칙보다 뒤에 와야 배경을 되돌릴 수 있다 (같은 (0,2,0) 특이도) */
.wj_modal_btn.alt {
    background: #fff;
    color: #0d498c;
    box-shadow: inset 0 0 0 1.5px currentColor;
}
.wj_modal_btn.alt.tone_danger {
    color: #d64545;
}
.wj_modal_btn.alt:hover {
    background: #f6f9fc;
}

/* 취소·보조·확인 3개가 나란한 경우 — 모달 폭이 340px 이라 글자를 한 단계 줄인다 */
.wj_modal.three_btns .wj_modal_btn {
    padding: 0 4px;
    font-size: 14px;
}

/* 배지 색은 모달 전체 톤을 따른다 */
.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);
    }
}

/* ---------------------------------------------------------------------
   앱 설치 유도 모달 변형 — wj-app-promo.js 가 #wjModal 에 붙였다 뗀다.
   "그냥 웹으로 볼게요" 는 설치 버튼보다 확실히 약해 보여야 하므로
   회색 채움 버튼 대신 아래쪽 텍스트 버튼으로 낮춘다.
   column-reverse 는 취소 버튼이 마크업상 확인보다 앞에 있어서 쓴다.
   --------------------------------------------------------------------- */
.wj_modal.wj-app-promo .wj_modal_btns {
    flex-direction: column-reverse;
    gap: 4px;
}
.wj_modal.wj-app-promo .wj_modal_btn {
    flex: none;
}
.wj_modal.wj-app-promo .wj_modal_btn.cancel {
    height: auto;
    padding: 8px 0;
    background: transparent;
    color: #888;
    font-size: 14px;
    font-weight: 500;
}
.wj_modal.wj-app-promo .wj_modal_btn.cancel:hover {
    background: transparent;
    color: #555;
}