/* ============================================================
 * 토스트 알림 (하단 중앙, 자동 소멸)
 *
 * 쓰는 곳: 로그인 / 아이디·비밀번호 찾기 / 선생님 로그인 / 무료체험 신청
 *          호출은 js/web/common/toast.js 의 fn_toast()
 *
 * 확인 버튼을 눌러야 사라지는 공용 모달(modalEvent) 대신,
 * 흐름을 끊지 않는 짧은 안내에 쓴다.
 * 사용자가 반드시 인지하고 넘어가야 하는 안내는 여전히 modalEvent 를 쓴다.
 * ============================================================ */

.sh-toast-wrap {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    /* loading-image-layer 가 2000, bootstrap modal 이 1050 이라 그 위에 둔다 */
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: 90%;
    /* 토스트가 뒤쪽 클릭을 막지 않도록 */
    pointer-events: none;
}

.sh-toast {
    max-width: 100%;
    background: #2C2C2C;
    color: #fff;
    padding: 11px 18px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.55;
    text-align: center;
    /* 메시지의 \n 을 줄바꿈으로 살린다 */
    white-space: pre-line;
    word-break: keep-all;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
}

.sh-toast.on {
    opacity: 1;
    transform: none;
}

/* 성공과 실패를 색으로 구분하지 않는다. 시안대로 단색 한 가지만 쓴다.
   테두리나 배경색을 넣으면 border-radius 와 만나 겹쳐 보인다. */

@media (prefers-reduced-motion: reduce) {
    .sh-toast { transition: none; transform: none; }
}