/* LION2 Signal SweetAlert skin — steel, concrete and hazard-yellow system. */

.sweet-overlay {
    position: fixed !important;
    z-index: 10000 !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background:
        radial-gradient(circle at 50% 42%, rgb(0 190 220 / 12%), transparent 34%),
        rgb(2 3 7 / 76%) !important;
    backdrop-filter: blur(4px) brightness(.72);
    -webkit-backdrop-filter: blur(4px) brightness(.72);
}

.sweet-alert {
    box-sizing: border-box !important;
    width: min(440px, calc(100vw - 32px)) !important;
    margin-left: -220px !important;
    padding: 104px 30px 26px !important;
    overflow: hidden;
    border: 1px solid #ffd400 !important;
    border-radius: 2px !important;
    background:
        url('/skin/lion2_main/images/lion-logo-v2.webp')
        no-repeat center 28px / 150px auto,
        linear-gradient(180deg, rgb(31 36 39 / 98%), rgb(8 10 11 / 99%)),
        url('/skin/lion2_main/images/signal/parts-v2/textures/signal-part-concrete-v2.webp')
        center / 420px auto repeat !important;
    color: #e7ecee;
    box-shadow:
        0 26px 70px rgb(0 0 0 / 78%),
        0 0 28px rgb(0 190 220 / 14%),
        inset 0 0 0 4px rgb(5 7 8 / 82%),
        inset 0 0 0 5px rgb(255 212 0 / 24%),
        inset 0 0 34px rgb(0 0 0 / 72%) !important;
}

.sweet-alert::before {
    content: "";
    position: absolute;
    top: 85px;
    right: 27px;
    left: 27px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ffd400 18%, #fff2a3 50%, #00bedc 82%, transparent);
    box-shadow: 0 1px 8px rgb(0 190 220 / 18%);
}

.sweet-alert::after {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid rgb(190 205 211 / 24%);
    border-radius: 1px;
    pointer-events: none;
}

.sweet-alert .sa-icon {
    display: none !important;
}

.sweet-alert h2 {
    margin: 0 0 10px !important;
    color: #ffd400 !important;
    font-family: "ChosunGu", "Noto Sans KR", sans-serif;
    font-size: 21px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: -.02em;
    text-shadow:
        0 2px 2px #020303,
        0 0 8px rgb(0 190 220 / 18%);
}

.sweet-alert p {
    margin: 0 !important;
    color: #cbd4d8 !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    word-break: keep-all;
}

.sweet-alert fieldset {
    margin: 14px 0 0 !important;
}

.sweet-alert input {
    height: 44px !important;
    border: 1px solid #59656a !important;
    border-radius: 3px !important;
    background: linear-gradient(180deg, rgb(7 9 10 / 98%), rgb(23 27 29 / 98%)) !important;
    color: #eef2f3 !important;
    box-shadow:
        inset 0 0 14px rgb(0 0 0 / 55%),
        0 0 0 2px rgb(0 190 220 / 5%) !important;
}

.sweet-alert input:focus {
    border-color: #ffd400 !important;
    box-shadow:
        inset 0 0 14px rgb(0 0 0 / 55%),
        0 0 8px rgb(0 190 220 / 24%) !important;
}

.sweet-alert.deposit-account-swal p {
    text-align: left;
}

.sweet-alert .deposit-account-swal-body {
    min-height: 48px;
    margin: 12px 0 2px;
    padding: 14px;
    border: 1px solid #4d595e;
    border-radius: 3px;
    background: rgb(5 8 9 / 74%);
    color: #edf2f3;
    line-height: 1.7;
    word-break: break-word;
    /* [2026-08-04] 계좌 안내는 리치 에디터 HTML — 태그가 레이아웃을 잡으므로 pre-line 을 쓰지 않는다 */
    text-align: left;
    box-shadow: inset 0 0 16px rgb(0 0 0 / 42%);
}

.sweet-alert .deposit-account-empty {
    color: #8e9ba0;
}

/* [2026-08-04] 계좌 안내 리치 HTML — 에디터가 뱉는 블록 태그 기본 여백 정리 */
.sweet-alert .deposit-account-swal-body :is(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6) {
    margin: 0 0 8px;
    color: inherit !important;
    font-size: inherit !important;
    text-align: left;
}
.sweet-alert .deposit-account-swal-body :is(p, ul, ol, blockquote):last-child {
    margin-bottom: 0;
}
.sweet-alert .deposit-account-swal-body :is(ul, ol) {
    padding-left: 20px;
    list-style: revert;
}
.sweet-alert .deposit-account-swal-body img {
    max-width: 100%;
    height: auto;
}
.sweet-alert .deposit-account-swal-body table {
    width: auto;
    max-width: 100%;
    border-collapse: collapse;
}
.sweet-alert .deposit-account-swal-body :is(td, th) {
    padding: 4px 8px;
    border: 1px solid rgb(93 106 111 / 64%);
}
.sweet-alert .deposit-account-swal-body a {
    color: inherit;
    text-decoration: underline;
}

.sweet-alert .sa-button-container {
    margin-top: 20px;
}

.sweet-alert button {
    min-width: 112px;
    min-height: 42px;
    margin: 0 5px !important;
    padding: 9px 20px !important;
    border-radius: 3px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    transition: filter .16s ease, transform .16s ease;
}

.sweet-alert button.confirm {
    border: 1px solid #ffd400 !important;
    background:
        linear-gradient(180deg, #ffe21a, #f0bc00 52%, #b98200) !important;
    color: #080a0b !important;
    text-shadow: 0 1px rgb(255 255 255 / 30%);
    box-shadow:
        inset 0 1px rgb(255 255 255 / 40%),
        inset 0 -6px 12px rgb(90 62 0 / 22%),
        0 4px 12px rgb(0 0 0 / 40%) !important;
}

.sweet-alert button.cancel {
    border: 1px solid #59656a !important;
    background: linear-gradient(180deg, #30373a, #111517) !important;
    color: #d5dde0 !important;
    box-shadow:
        inset 0 1px rgb(255 255 255 / 10%),
        0 4px 10px rgb(0 0 0 / 32%) !important;
}

.sweet-alert button:hover,
.sweet-alert button:focus-visible {
    filter: brightness(1.16);
    transform: translateY(-1px);
}

.sweet-alert button:active {
    transform: translateY(1px);
}

@media (max-width: 520px) {
    .sweet-alert {
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        left: 50% !important;
        width: calc(100vw - 24px) !important;
        height: auto !important;
        max-height: calc(100dvh - 24px) !important;
        margin-left: calc(-50vw + 12px) !important;
        padding: 92px 18px 22px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        background-position: center 25px, center, center !important;
        background-size: 132px auto, auto, 360px auto !important;
    }

    .sweet-alert::before {
        top: 76px;
        right: 18px;
        left: 18px;
    }

    .sweet-alert h2 {
        font-size: 19px !important;
    }

    .sweet-alert p {
        font-size: 13px !important;
    }

    .sweet-alert button {
        min-width: 104px;
        min-height: 40px;
        padding: 8px 16px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sweet-alert,
    .sweet-alert button {
        transition: none !important;
    }
}