*{font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;box-sizing:border-box;}

html,body{position:relative;width:100%;height:100%;margin:0;padding:0;color:#232323;color:var(--color_base);background-color:rgba(230, 238, 249,0.5);}
ul,ol,li{list-style:none;margin:0;padding:0;}

:root{
    --primary-color : #185ee8;
    --secondary-color : #e6eef9;
}
*:after,*:before{box-sizing:border-box;}

.container{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;}
.tabs{
    display:flex;position:relative;background-color:#fff;
    box-shadow:0 0 1px 0 rgba(24, 94, 232,0.15), 0 6px 12px 0 rgba(24, 94, 232,0.15);padding:0.75rem;border-radius:99px;
}
.tabs > *{z-index:2;}
input[type="radio"]{display:none;}
.tab{
    display:flex;align-items:center;justify-content:center;height:54px;width:200px;font-size:1.25rem;font-weight:500;
    border-radius:99px;cursor:pointer;transition:color 0.15s ease-in;
}
.notification{
    display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-left:0.75rem;border-radius:50%;
    background-color:var(--secondary-color);transition:0.15s ease-in;
}
input[type="radio"]:checked + label{color:var(--primary-color);}
input[type="radio"]:checked + label > .notification{background-color:var(--primary-color);color:#fff;}
input[id="radio-1"]:checked ~ .glider{transform:translateX(0);}
input[id="radio-2"]:checked ~ .glider{transform:translateX(100%);}
input[id="radio-3"]:checked ~ .glider{transform:translateX(200%);}
.glider{
    position:absolute;display:flex;height:54px;width:200px;background-color:var(--secondary-color);z-index:1;border-radius:99px;transition:0.25s ease-out;
}

@media (max-width: 700px){
    .tabs{transform:scale(0.6);}
}