/* 알림 받기 버튼(종 아이콘).
   back-to-top 버튼(오른쪽 아래)과 겹치지 않도록 그 위에 둔다.
   설치 버튼은 없다 — 주소창의 브라우저 기본 설치 아이콘을 쓴다. */

.pwa-fab {
    position: fixed;
    right: 1rem;
    bottom: 5.5rem;
    z-index: 1040;
    display: flex;
    align-items: center;
    gap: .1rem;
    padding: .2rem .3rem .2rem .2rem;
    background: rgba(255, 255, 255, .96);
    border: 1px solid #e3e6f0;
    border-radius: 50rem;
    box-shadow: 0 .25rem .8rem rgba(28, 32, 53, .14);
}

.pwa-bell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: .95rem;
    color: #4761FF;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.pwa-bell:hover:not(:disabled) { background: #eef1ff; }
.pwa-bell:disabled { opacity: .5; cursor: default; }

.pwa-fab-close {
    padding: 0 .3rem;
    line-height: 1;
    font-size: .95rem;
    color: #a6aabb;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.pwa-fab-close:hover { color: #6c7085; }

.pwa-toast {
    position: fixed;
    right: 1rem;
    bottom: 8.5rem;
    z-index: 1041;
    max-width: min(22rem, 88vw);
    padding: .55rem .8rem;
    background: #1C2035;
    color: #fff;
    border-radius: .5rem;
    font-size: .85rem;
    box-shadow: 0 .35rem 1rem rgba(28, 32, 53, .28);
}

@media (max-width: 575.98px) {
    /* 종 아이콘 하나뿐이라 폭을 늘리지 않는다. 위치만 살짝 올린다. */
    .pwa-fab { bottom: 4.75rem; }
    .pwa-toast { left: 1rem; right: 1rem; max-width: none; bottom: 7.75rem; }
}