:root {
    --global-gray-05: #F3F3FA;
    --global-gray-10: #E9E9F4;
    --global-gray-20: #E0E0EA;
    --global-gray-30: #D6D6E2;
    --global-gray-40: #C4C4D2;
    --global-gray-50: #9696A3;
    --global-gray-60: #71717C;
    --global-gray-70: #58585F;
    --global-gray-80: #3D3D43;
    --global-gray-90: #29292C;
    --brand-primary-05: #E9F0FE;
    --brand-primary-10: #DEE9FE;
    --brand-primary-20: #BBD1FC;
    --brand-primary-30: #9ABBFB;
    --brand-primary-40: #4F89F8;
    --brand-primary-50: #236CF6;
    --brand-primary-60: #2061DD;
    --brand-primary-70: #1C56C5;
    --brand-primary-80: #133B87;
    --brand-primary-90: #0F2D67;
    --pastel-blue-100: #EDF6FF;
    --pastel-blue-200: #D7EDFF;
    --pastel-blue-300: #86C1FF;
    --pastel-blue-400: #007CFF;
    --pastel-blue-500: #004BA9;
    --pastel-green-100: #E9FFE6;
    --pastel-green-200: #CDF9CD;
    --pastel-green-300: #49CC93;
    --pastel-green-400: #008F5D;
    --pastel-green-500: #00422C;
    --pastel-yellow-100: #FFFEDB;
    --pastel-yellow-200: #FFFD92;
    --pastel-yellow-300: #FDD700;
    --pastel-yellow-400: #B88400;
    --pastel-yellow-500: #765708;
    --pastel-red-100: #FFF3F7;
    --pastel-red-200: #FFDFE9;
    --pastel-red-300: #FF989E;
    --pastel-red-400: #D83841;
    --pastel-red-500: #9B0000;
    --pastel-teal-100: #F7FDFC;
    --pastel-teal-200: #CCF6EE;
    --pastel-teal-300: #4CD6CE;
    --pastel-teal-400: #009990;
    --pastel-teal-500: #005C62;
    --pastel-violet-100: #F3EDFF;
    --pastel-violet-200: #E9E4FF;
    --pastel-violet-300: #BD8DFF;
    --pastel-violet-400: #8A39FA;
    --pastel-violet-500: #550AA9;
    --pastel-orange-100: #FFF6EB;
    --pastel-orange-200: #FFE4C1;
    --pastel-orange-300: #FFBB63;
    --pastel-orange-400: #F68511;
    --pastel-orange-500: #7A2F00;
}

  
.badge_toast{position: fixed; display:none; z-index: 110; bottom: 2rem; right: 2rem; overflow: hidden;}
.badge_toast .inr{position: relative; width: 45rem; opacity: 0; transform: translateY(100%); transition: opacity 0.15s ease, transform 0.15s ease; display: flex; align-items: center; justify-content: space-between; height: 8.1rem; margin-top: 2.4rem; padding-inline: 2rem 1.6rem; background-color: var(--brand-primary-50); border-radius: 0.8rem;}
.badge_toast .inr.show{opacity: 1; transform: translateY(0); max-width:100%;}
.badge_toast .inr.hide{opacity: 0; transform: translateX(100%);}
.badge_toast .txt{color: #fff;}
.badge_toast .txt span{font-size: 2rem; font-weight: 800; line-height: 1;}
.badge_toast .txt p{margin-top: 1.2rem; line-height: 1;}
.badge_toast a{height: 3.2rem; padding-inline: 1.2rem; align-content: center; line-height: 1; border-radius: 0.4rem; background-color: #fff; font-size: 1.4rem; font-weight: 700; color: #1D1D1D;}
.badge_toast a:hover, .badge_toast a.press{background-color: rgba(255, 255, 255, 0.75);}
.badge_toast a:focus-visible{outline-offset: 0.2rem; outline-color: #fff;}

@media screen and (max-width: 1023px) {    

	
	  /* 가상 요소로 오버레이 표현 */
	  .badge_toast::before {
	    content: "";
	    position: absolute;
	    top: 0; left: 0;
	    width: 100%; height: 100%;
	    background: rgba(0,0,0,0.5);
	  }
	  
	  
	.badge_toast{width: 100%; height: 100%; right: auto; left: 50%; transform: translateX(-50%); bottom: 0rem; padding-bottom: 1.6rem;}
	 
	.badge_toast .inr{height: 7.1rem; width: 29rem; margin-inline: auto; margin-top: 2rem; position: fixed; bottom: 2rem;}
	.badge_toast .inr.show{opacity: 1; transform: translateY(0); max-width:100%; left: 50%;    transform: translateX(-50%);}
	.badge_toast .txt span{font-size: 1.5rem;}
	.badge_toast .txt p{font-size: 1.2rem; margin-top: 0.8rem; }
	.badge_toast a{height: 2.8rem; padding-inline: 0.8rem; font-size: 1.2rem; min-width: 4rem;}
	
    
    
        
        
}