#actionSheet {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    transition: 1s;

    /* 서서히 나타나는 효과 */
    visibility: hidden;
    opacity: 0;
}
#actionSheet.active {
    /* 서서히 나타나는 효과 */
    visibility: visible;
    opacity: 1;
}

.action-options {
    background-color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /* 세로 컨텐츠가 늘어나는 경우 스크롤이 생기도록 설정 */
    overflow: auto;

    max-height: 300px;
    /* 아래에서 위로 나타나는 효과, max-height과 동일하게 작성 */
    position: relative;
    bottom: -300px;

    transition: 1s;
}
#actionSheet.active .action-options {
    /* 아래에서 위로 나타나는 효과, max-height과 동일하게 작성 */
    bottom: 0;
}

.option {
    padding: 15px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.option.close {
    text-align: center;
}

.option:hover {
    background-color: #f2f2f2;
}