@charset "utf-8";
/* 텍스트 색깔 지정 레이어 팝업 */
#colorPopup{

    position:fixed;

    left:0;
    right:0;

    margin:auto;

    width:97%;
    height:120px;

    bottom:-220px;

    background:rgba(239,229,217,.75);

    border:1px solid rgba(206,191,168,.95);

    border-radius:10px;

    transition:all .35s ease;

    z-index:99999;

    backdrop-filter:blur(5px);

}

/* 열릴 때 */

#colorPopup.show{

    bottom:15px;

}

/* 색상 영역 */

.colorArea{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:15px;

}

/* 원형 버튼 */

.colorBtn{

    width:34px;

    height:34px;

    border-radius:50%;

    margin:0 12px;

    cursor:pointer;

    border:2px solid #999;

    box-shadow:0 1px 4px rgba(0,0,0,.25);

}

/* 색상 */

.yellow{

    background:#FFF59D;

}

.green{

    background:#C8E6C9;

}

.pink{

    background:#F8BBD0;

}

.blue{

    background:#BBDEFB;

}

/* 아래 버튼 */

.menuArea{

    display:flex;

    justify-content:center;

    margin-top:18px;

}

/* 버튼 */

.popupBtn{

    margin:0 8px;

    padding:6px 14px;

    border:none;

    border-radius:18px;

    background:#ffffff;

    color:#555;

    font-size:14px;

    cursor:pointer;

    box-shadow:0 1px 3px rgba(0,0,0,.2);

}

.popupBtn:active{

    transform:scale(.96);

}