#preview{

    flex:1;

    display:flex;
    justify-content:center;
    align-items:center;

    overflow:auto;

    background:#dadada;

}

/* ========================= */

#captureArea{

    width:600px;

    background:#111111;

    padding:38px 34px;

}

/* ========================= */

.notification{

    display:flex;
    align-items:center;

    gap:18px;

    position:relative;

    margin-bottom:52px;

}

.notification.split{

    margin-bottom:140px;

}

.notification:last-child{

    margin-bottom:0;

}

/* ========================= */

.profile{

    width:72px;
    height:72px;

    border-radius:50%;

    object-fit:cover;

    background:#555;

    flex-shrink:0;

}

/* ========================= */

.text{

    flex:0 0 380px;
}

/* ========================= */

.name{

    color:white;

    font-size:24px;
    font-weight:700;

    margin-bottom:10px;

}

/* ========================= */

.messageRow{

    display:flex;
    align-items:center;

    gap:8px;

}

/* ========================= */

.message{

    color:#9c9c9c;

    font-size:20px;

}

/* ========================= */

.time{

    color:#8d8d8d;

    font-size:20px;

    white-space:nowrap;

}

/* ========================= */

.dot{

    width:18px;
    height:18px;

    border-radius:50%;

    background:#1d69ff;

    margin-left:18px;

    flex-shrink:0;

}

#mobileSaveButton{

    display:none;

}

/* ===========================
   Mobile
=========================== */

@media (max-width:768px){

    /* 저장 버튼 */

    #mobileSaveButton{

        display:block;

        position:fixed;

        left:16px;
        right:16px;
        bottom:16px;

        height:52px;

        border:none;
        border-radius:10px;

        background:#1f6fff;
        color:#fff;

        font-size:16px;
        font-weight:700;

        z-index:1000;

    }

    /* 터치 효과 */

    .profile,
    .name,
    .message{

        cursor:pointer;
        transition:.15s;

    }

    .profile:active,
    .name:active,
    .message:active{

        opacity:.6;

    }

    /* 검은 영역 */

    #captureArea{

        padding:38px 34px;

    }

    /* 알림 */

    .notification{

        display:flex;
        align-items:center;

        gap:14px;

        margin-bottom:52px;

    }

    .notification.split{

        margin-bottom:140px;

    }

    /* 프로필 */

    .profile{

        width:72px;
        height:72px;

        flex-shrink:0;

    }

    /* 핵심 */

    .text{

        width:260px;
        flex:none;

    }

    /* 이름 */

    .name{

        font-size:24px;

    }

    /* 메시지 */

    .message{

        font-size:20px;

    }

    .time{

        font-size:20px;

    }

    /* 파란 점 */

    .dot{

        margin-left:auto;

        width:18px;
        height:18px;

        flex-shrink:0;

    }

}