/* =========================
   Bottom Navigation
========================= */

.bottom-nav {
    display: none;
}


/* スマホのみ表示 */
@media (max-width: 768px) {

    body {
        padding-bottom: 98px;
    }

    .bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;

        height: 90px;

        display: flex;
        align-items: stretch;
        justify-content: space-around;

        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);

        border-top: 1px solid #eee;

        z-index: 9999;

        padding-bottom: env(safe-area-inset-bottom);
    }

    
    .bottom-nav-item {
        flex: 1;

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

        gap: 3px;

        color: #C41E3A;
        text-decoration: none;

        font-size: 9px;

        /* 下側に余白 */
        padding-bottom: 0px;
        box-sizing: border-box;

        /* 押したときのアニメーション */
        transition:
            transform 0.12s ease,
            opacity 0.12s ease;

        -webkit-tap-highlight-color: transparent;
    }

    .bottom-nav-icon {
        width: 30px;
        height: 30px;

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

        transition: transform 0.12s ease;
    }

    .bottom-nav-icon svg {
        width: 30px;
        height: 30px;

        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .bottom-nav-label {
        white-space: nowrap;
        line-height: 1.2;

        transition: transform 0.12s ease;
    }

    /* 現在いるページ */
    .bottom-nav-item.active {
        color: #C41E3A;
        font-weight: 600;
    }

    .bottom-nav-item.active .bottom-nav-icon {
        transform: translateY(-1px);
    }

    /* =========================
   タップした瞬間
========================= */

.bottom-nav-item:active {
    transform: translateY(-4px);
    opacity: 0.7;
}
}


/* リストメーカーだけ少し小さく */
.bottom-nav-icon.playlist-icon svg {
    width: 26px;
    height: 26px;
}

.bottom-nav-label {
    margin-bottom: 30px;
}