.bottom-navigation {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #2a3b4c;
    border-top: 1px solid #3c5269; /* 메뉴바 상단 경계선 */
    padding: 6px 0;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.3);
    z-index: 1000;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #aebfd0;
    font-size: 14px;
    flex: 1;
    padding: 3px 0;
    transition: color 0.3s ease;
    border-right: 1px solid #354a5e; /* 각 항목 사이의 수직 경계선 */
}

.nav-item:last-child {
    border-right: none; /* 마지막 항목 경계선 제거 */
}

.nav-item:hover,
.nav-item.active {
    color: #6a9edb;
}

.nav-item i {
    font-size: 24px;
    margin-bottom: 5px;
}



/*
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


<div class="bottom-navigation">
    <a href="#" class="nav-item">
        <i class="material-icons">handshake</i> <span>중보기도</span>
    </a>
    <a href="#" class="nav-item">
        <i class="material-icons">menu_book</i> <span>나의기도</span>
    </a>
    <a href="#" class="nav-item">
        <i class="material-icons">settings</i> <span>설정</span>
    </a>
</div>


*/