.toast_popup_area *,
.toast_popup_area *::before,
.toast_popup_area *::after {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
}

/*============================================================
** toast 팝업  css 2025.10.02
**----------------------------------------------------------*/
/*===============================================
 * 토스트 메세지 팝업
**---------------------------------------------*/
.toast_popup_area{
position:fixed;z-index:1000;display:flex;flex-direction:column;justify-content:flex-end;   
padding:5px 5px 5px 5px ;width:auto;height:auto;
/*background:yellow;*/
}


/* 토스트 메세지 에리어 */
.toast_popup_area.rightTop     { top:0px;right:0px; align-items: flex-end; }/* 오른쪽 상단 */
.toast_popup_area.rightBottom  { bottom:0px;right:0px; align-items: flex-end;    }/* 오른쪽 하단 */
.toast_popup_area.centerTop    { top:0px;left:50%;transform:translateX(-50%);}/* 중앙 상단 */
.toast_popup_area.centerBottom { bottom:0px;left:50%;transform:translateX(-50%); }/* 중앙 하단 */
.toast_popup_area.leftTop      { top:0px;left:0px;align-items: flex-start; }/* 왼쪽 상단 */
.toast_popup_area.leftBottom   { bottom:0px;left:0px;align-items: flex-start;    }/* 왼쪽 하단 */
.toast_popup_area.topAll       { top:0px;left:0px;align-items: flex-start;width:100%;}/* 상단 전체 */
.toast_popup_area.bottomAll    { bottom:0px;left:0px;align-items: flex-start;width:100%;}/* 하단 전체 */
 
.toast_popup {
position: relative;margin:1px 0px 0px 0px;padding:0px 5px 5px 0px;background: transparent;overflow: hidden;
min-height: 0px;height: 0px;margin:0px;padding:0px;transition: all 0.5s ease;/*0.2 슬라이드 높일를 줄여서 그 이후 삭제*/
/*background: yellow;*/
}

.toast_slider {display:flex;
    position: absolute;top: 0; left: 0;     margin:0px; padding:0px;width : calc(100% - 3px);height: calc(100% - 3px); 
    color: #333;
    line-height:25px;font-size: 14px; border: 1px solid #ccc;border-radius: 7px; box-shadow: 1px 3px 6px -3px #969696;
    text-decoration: none;
    -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;
    -webkit-touch-callout: none;-webkit-user-drag: none;
    overflow:hidden;
}
/* toast_slider에 동작을 위해 아래의 설정들을 따로 넣어야 하기에 클래스를 추가해 줌 */
.move_up{
    /* 처음은 아래쪽에 숨어 있음 */
    transform: translateY(calc(100% + 20px));opacity: 1; /* 항상 보여야 함 */
    transition: transform 1.0s ease; /* 1.0 토스트 팝업에 걸리는 오르고 내리는 시간 */
}
.move_down{ 
    /* 처음은 아래쪽에 숨어 있음 */
    transform: translateY(calc(-100% - 20px));opacity: 1; /* sssssssssssssss항상 보여야 함 */
    transition: transform 1.0s ease; /* 1.0 토스트 팝업에 걸리는 오르고 내리는 시간 */
}
.move_left{
    /* 처음은 오른쪽에 숨어 있음 */
    transform: translateX(calc(100% + 20px));opacity: 1; /* ssssssssssssssss항상 보여야 함 */
    transition: transform 1.0s ease; /* 1.0 토스트 팝업에 걸리는 오르고 내리는 시간 */
}
.move_right{
    /* 처음은 왼쪽에 숨어 있음 */
    transform: translateX(calc(-100% - 20px));opacity: 1; /* 항상 보여야 함 */
    transition: transform 1.0s ease; /* 1.0 토스트 팝업에 걸리는 오르고 내리는 시간 */
}
.move_fade {
  /* 처음은 opacity 0에서 클래스 추가시 점점 보이도록  */
  transform: translateY(0);opacity: 0;
  transition: opacity 1.5s ease; /* 2.0js의 속도도 맞춰줘야 함 */
}
/* 추가로 효과를 만들어 낸다 */
.toast_slider.up    {transform: translateY(0); opacity: 1;} /* 위로 올라와서 보임 */
.toast_slider.down  {transform: translateY(0); opacity: 1;} /*ddddddddd 위로 올라와서 보임 */
.toast_slider.left  {transform: translateX(0); opacity: 1;} /* 우측에서 좌측으로 빠져 나오면서 보임 */
.toast_slider.right {transform: translateX(0); opacity: 1;} /*ddddddddd 우측에서 좌측으로 빠져 나오면서 보임 */
.move_fade.fadeIn   {transform: translate(0, 0); opacity: 1;} /* 안보임에서 보임으로 : fadeIn삭제시 안보임으로 변경 */


/* 삭제 버튼 */
.toastBtn{
position:absolute;top:10px;right:10px;z-index:100;display: inline-block;
padding:1px 1px;width:15px;height:15px;overflow:hidden;font-size:15px;
color:#eb6f6f;text-align:center; font-weight:bold;line-height:9px;cursor:pointer;
}
.toastBtn.addPx{right:25px;}
.toastBtn:hover {color: #e02323;}
.toastBtn:active{color: #991515;}
/* 컨텐츠 ( 제목, 내용, 아이콘 ) */
.toastContent{display: flex;margin:0px;padding:0px;  height: inherit;}
.toastIcon {margin:10px 5px 10px 20px;padding:0px;width:50px;}
.toastMsgIn{position:relative;z-index:2;margin:10px 5px 10px 10px;padding:0px;width:calc(100% - 0px);height:calc(100% - 20px);}
.toastMsgIn.addPx{ overflow: auto;}
.toast_subject{position:absolute;z-index:2;font-size:13px;font-weight:bold;color:#333;}
.toast_content{position:absolute;z-index:2;font-size:12px;font-weight:normal;  white-space: pre-line;  /* 줄바꿈(\n)을 그대로 표시 */ font-family: sans-serif;}


/* 토스트 팝업 각 상황에 대한 색 지정 */
/*================ success ================*/
.toastIcon.success {
    position: absolute;
    margin:0;padding:0;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: url("./images/toast/success.png") no-repeat center;
    background-position: 6px 6px;
    background-size: 17px 17px;
}
/* 그림자/블러 레이어 */
.toastIcon.success::before {
    content: "";position: absolute;
    top:1px; left:1px;width: 30px; height: 30px;border-radius: 50%;
    background: url(./images/toast/success.png) no-repeat center;
    background-position: 6px 6px;
    background-size: 17px 17px;z-index:-1;filter: blur(5px);
    opacity:0.5;
}

/*================ info ================*/
.toastIcon.info  {
    position: absolute;
    z-index:10;
    margin:0;padding:0;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: url("./images/toast/info.png") no-repeat center;
    background-position: 6px 6px;
    background-size: 17px 17px;
}
/* 그림자/블러 레이어 */
.toastIcon.info::before {
    content: "";position: absolute;
    z-index:8;
    top:1px; left:1px;width: 30px; height: 30px;border-radius: 50%;
    background: url("./images/toast/info.png") no-repeat center;
    background-position: 6px 6px;
    background-size: 17px 17px;z-index:-1;filter: blur(5px);
    opacity:0.5;
}

/*================ warning ================*/
.toastIcon.warning  {
    position: absolute;
    z-index:10;
    margin:0;padding:0;
    width:50px; height: 40px;
    border-radius: 50%;
    background: url("./images/toast/warning.png") no-repeat center;
    background-position: 6px 6px;
    background-size: 17px 17px;
}
/* 그림자/블러 레이어 */
.toastIcon.warning::before {
    content: "";position: absolute;
    z-index:8;
    top:1px; left:1px;width: 30px; height: 30px;border-radius: 50%;
    background: url("./images/toast/warning.png") no-repeat center;
    background-position: 6px 6px;
    background-size: 17px 17px;z-index:-1;filter: blur(5px);
    opacity:0.5;
}

/*================ error ================*/
.toastIcon.error  {
    position: absolute;
    z-index:10;
    margin:0;padding:0;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: url("./images/toast/error.png") no-repeat center;
    background-position: 6px 6px;
    background-size: 17px 17px;
}
/* 그림자/블러 레이어 */
.toastIcon.error::before {
    content: "";position: absolute;
    z-index:8;
    top:1px; left:1px;width: 30px; height: 30px;border-radius: 50%;
    background: url("./images/toast/error.png") no-repeat center;
    background-position: 6px 6px;
    background-size: 17px 17px;z-index:-1;filter: blur(5px);
    opacity:0.5;
}

/*================ notification ================*/
.toastIcon.notification  {
    position: absolute;
    z-index:10;
    margin:0;padding:0;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: url("./images/toast/notification.png") no-repeat center;
    background-position: 6px 6px;
    background-size: 17px 17px;
}
/* 그림자/블러 레이어 */
.toastIcon.notification::before {
    content: "";position: absolute;
    z-index:8;
    top:1px; left:1px;width: 30px; height: 30px;border-radius: 50%;
    background: url("./images/toast/notification.png") no-repeat center;
    background-position: 6px 6px;
    background-size: 17px 17px;z-index:-1;filter: blur(5px);
    opacity:0.5;
}

/*================ normal ================*/
.toastIcon.normal  {
    position: absolute;
    z-index:10;
    margin:0;padding:0;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: url("./images/toast/normal.png") no-repeat center;
    background-position: 6px 6px;
    background-size: 17px 17px;
}
/* 그림자/블러 레이어 */
/*
.toastIcon.normal::before {
    content: "";position: absolute;
    z-index:8;
    top:1px; left:1px;width: 30px; height: 30px;border-radius: 50%;
    background: url("./images/toast/normal.png") no-repeat center;
    background-position: 6px 6px;
    background-size: 17px 17px;z-index:-1;filter: blur(5px);
    opacity:0.5;
}*/


/* 이미지를 콘텐츠로 사용한다면 */
.toastIcon.useImg{position:absolute;z-index:3;left:0px;top:25px;}

/*================ 배경과 글자색 ================*/
.toastBackground{position:fixed;width:100%;height:100%;top:0;left:0;z-index:-1;} 
.success .toastBackground { 
    background: #d4f9ef;  /* 연한 민트 */
    color: #045c37;       /* 진한 초록 */
    opacity:1;
}

.info .toastBackground { 
    background-color: #d0e9fb;  /* 연한 하늘색 */
    color: #07457a;       /* 진한 파랑 */ 
    opacity:1;
}

.warning .toastBackground { 
    background-color: #fff4d9;  /* 연한 오렌지/살구톤 */
    color: #6b3b00;       /* 짙은 오렌지 브라운 */
    opacity:1;
}

.error .toastBackground { 
    background-color: #fde0de;  /* 연한 살구핑크 */
    color: #7a0c00;       /* 짙은 붉은 브라운 */
    opacity:1;
}

.notification .toastBackground { 
    background-color: #f2e6ff;   /* 연보라 */
    color: #5c2e91;        /* 진한 보라 */
    opacity:1;
}

.normal .toastBackground { 
    background-color:#313131;   /* 연보라 */
    opacity:0.8;
}
.normal .toast_slider .toast_subject{color: #fff; /* 진한 보라 */}
.normal .toast_slider .toast_content{color: #f7f7f7; /* 진한 보라 */}


/*================ 보더 애니메이션 ================*/
/* keyframes: 두 번 깜빡임 + 마지막 회색, 빨강으로 천천히 변화 */
@keyframes blinkTwiceSmooth {
  0%   { border-color: #ccc; }
  20%  { border-color: #d53e33; }  /* 빨강으로 서서히 */ 
  50%  { border-color: #ccc; }
  70%  { border-color: #d53e33; }  /* 두 번째 빨강으로 서서히 */ 
  100% { border-color: #ccc; }
}

/* 애니메이션 클래스  (고칠 떄는 js 전역변수 borderAnimationTime 같이 변경) */
.toast_slider.animate { 
    animation: blinkTwiceSmooth var(--blink-duration, 2.0s) ease-in-out forwards;
}
/* 퍼센트 프로그레스 바*/
.toast_slider .toastPercent{
    position: fixed;
    bottom: 0;
    z-index:2;
    width: 100%;
    height:3px;
}
.toast_slider .toastPercent .barProgress{
    display: block;
    height: 100%;
    width: 0;
    background: #99bdf9;transition: width 0.5s ease-out;
}

.toast_popup .countDown{position:absolute;bottom:0px;right:0px;z-index:10;width:calc(100% - 20px);
height:30px;margin:0;padding:10px 10px;text-align:right;line-height:10px;font-size:12px;color:#ff6633;}
.toast_popup .countDown.addPx{right: 20px;}