.sps-toast-region {
    position: fixed;
    z-index: 2147483600;
    top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    display: grid;
    gap: 9px;
    width: min(390px, calc(100vw - 32px));
    pointer-events: none;
}

.sps-notice[data-sps-notice-popup] {
    position: fixed;
    z-index: 2147483600;
    top: max(16px, env(safe-area-inset-top));
    right: max(16px, env(safe-area-inset-right));
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 30px;
    align-items: start;
    gap: 11px;
    width: min(390px, calc(100vw - 32px));
    padding: 13px;
    border: 1px solid var(--sps-border, #d6e1ea);
    border-radius: 16px;
    background: var(--sps-surface, #fff);
    color: var(--sps-ink, #10243e);
    font-weight: 650;
    box-shadow: 0 20px 54px rgba(20, 44, 70, .2);
    pointer-events: auto;
    animation: spsToastIn .3s cubic-bezier(.2, .8, .2, 1) both;
}

.sps-toast-region > .sps-notice[data-sps-notice-popup] {
    position: relative;
    inset: auto;
    width: 100%;
}

.sps-notice__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: #eaf3ff;
    color: #1769d2;
    font-size: 17px;
    font-weight: 850;
}

.sps-notice__icon::before { content: "i"; }
.sps-notice.success .sps-notice__icon::before { content: "✓"; }
.sps-notice.warning .sps-notice__icon::before { content: "!"; }
.sps-notice.error .sps-notice__icon::before { content: "×"; }

.sps-notice__content {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.sps-notice__content strong {
    color: currentColor;
    font-size: 12.5px;
    line-height: 1.25;
}

.sps-notice__content > span {
    font-size: 11.5px;
    font-weight: 590;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.sps-notice__close {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: currentColor;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    opacity: .7;
}

.sps-notice__close:hover { background: rgba(16, 36, 62, .07); opacity: 1; }
.sps-notice.success { border-color: #b9e2da; background: #f0faf7; color: #176b5e; }
.sps-notice.success .sps-notice__icon { background: #dff5ef; color: #16765c; }
.sps-notice.error { border-color: #efbec8; background: #fff5f6; color: #ac3349; }
.sps-notice.error .sps-notice__icon { background: #ffe3e8; color: #b83c55; }
.sps-notice.warning { border-color: #efd39d; background: #fff9ed; color: #8a5a17; }
.sps-notice.warning .sps-notice__icon { background: #ffefc9; color: #966118; }
.sps-notice.is-closing { opacity: 0; transform: translateY(-8px) scale(.98); transition: opacity .2s ease, transform .2s ease; }

@keyframes spsToastIn {
    from { opacity: 0; transform: translateY(-12px) scale(.975); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 440px) {
    .sps-toast-region {
        top: auto;
        bottom: max(12px, env(safe-area-inset-bottom));
        right: 10px;
        left: 10px;
        width: auto;
    }

    .sps-notice[data-sps-notice-popup] {
        top: auto;
        bottom: max(12px, env(safe-area-inset-bottom));
        right: 10px;
        left: 10px;
        width: auto;
    }

    .sps-toast-region > .sps-notice[data-sps-notice-popup] {
        inset: auto;
        width: 100%;
    }

    .sps-notice[data-sps-notice-popup] { animation-name: spsToastInMobile; }
}

@keyframes spsToastInMobile {
    from { opacity: 0; transform: translateY(12px) scale(.975); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sps-notice[data-sps-notice-popup] { animation: none; transition: none; }
}