/* ===== Mobile Bottom Nav v2.1 ===== */

.mbnav{
    position: fixed; left:0; right:0; bottom:0;
    z-index: 1200; pointer-events: none;
}

.mbnav__rail{
    position: relative;
    width: 100%; margin: 0;                /* ⬅ 꽉 차게 */
    padding: 0 0 calc(10px + env(safe-area-inset-bottom,0));
    list-style: none; padding-inline-start: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 80px 1fr 1fr;
    align-items: end; gap: 0;
}

/* 바탕(이제 좌우 여백 없음) */
.mbnav__rail::before{
    content:"";
    position:absolute;
    left:0; right:0; bottom:-6px;   /* ⬅ -6px 추가 (기존 0) */
    height:64px;
    background:#fff;
    border-radius:18px 18px 0 0;
    box-shadow:0 -6px 24px rgba(0,0,0,.12);
    z-index:0;
}

.mbnav__item{
    height: 35px; display:flex; align-items:center; justify-content:center;
    pointer-events:auto; position:relative; z-index:1;
}

.mbnav__link{
    text-decoration:none;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:6px; min-width:56px;
}
.mbnav__icon{ width:22px; height:22px; fill:#8e95a2; transition:transform .12s ease, fill .12s ease; }
.mbnav__label{ font-size:11px; color:#4c505b; line-height:1; white-space:nowrap; }

.mbnav__fab-wrap{ height:86px; pointer-events:none; position:relative; z-index:2; }

/* FAB */
.mbnav__fab{
    pointer-events:auto;
    position:absolute;
    left:50%; bottom:-3px; transform:translateX(-50%); /* 기존 bottom:18px → 22px */
    width:62px; height:62px; border-radius:50%;
    background:#2563ff;
    display:grid; place-items:center;
    box-shadow:0 10px 22px rgba(37,99,255,.35), 0 4px 10px rgba(0,0,0,.08);
}

.mbnav__fab-icon{ width:26px; height:26px; fill:#fff; }

/* ⛔ 흰 가로줄 만들던 컷아웃 효과 제거 */
.mbnav__fab::after{ content:none; }

.mbnav__link:active .mbnav__icon{ transform: translateY(1px); }
.mbnav__fab:active{ transform: translateX(-50%) translateY(1px); }

.mbnav__item.is-active .mbnav__icon{ fill:#2563ff; }
.mbnav__item.is-active .mbnav__label{ color:#2563ff; font-weight:600; }

@media (max-width:768px){
    body{ padding-bottom: calc(96px + env(safe-area-inset-bottom,0)); }
}

@media (prefers-color-scheme: dark){
    .mbnav__rail::before{ background:#f6f7f9; box-shadow: 0 -6px 24px rgba(0,0,0,.22); }
    .mbnav__icon{ fill:#7a8090; }
    .mbnav__label{ color:#3b3f49; }
}