/* 하단 탭바(시안 Nav375 2638:46575) - 모바일 폭에서만 보인다. 탭바 높이는 --bottom-tab-bar-h 하나에서 나온다(탭바 · 푸터 아래 여백 · 플로팅 위치). */

.bottom-tab-bar {
    display: none;
}

@media (max-width: 960px) { /* @bp:960 */
    /* 시안에 세이프 에어리어 값이 없다 - 탭바 화면은 viewport-fit 기본값이라 env 가 0 이고 아래 패딩은 시안 8 이다. */
    .has-bottom-tab-bar {
        --bottom-tab-bar-h: calc(8px + 58.29px + max(8px, env(safe-area-inset-bottom, 0px)));
    }

    .bottom-tab-bar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 100;                      /* 옛 #fix-mobile 과 같은 층 - #mask(100) · 상담신청 레이어와의 앞뒤를 그대로 둔다 */
        display: flex;
        align-items: center;
        gap: 10px;
        box-sizing: border-box;
        height: var(--bottom-tab-bar-h);
        padding: 8px 12px max(8px, env(safe-area-inset-bottom, 0px));
        background-color: var(--fstd-surface);
        box-shadow: inset 0 1px 0 var(--fstd-stroke-muted);
    }

    /* base.css 가 모든 요소의 포커스 윤곽선을 지운다 - 키보드 포커스에서만 되살린다. */
    .bottom-tab-bar :focus-visible {
        outline: revert;
    }

    .bottom-tab-bar__item {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        min-width: 0;
        font-size: var(--ds-text-base, 14px);
        font-weight: var(--ds-weight-medium, 500);
        line-height: var(--ds-lh-body2, 20px);
        letter-spacing: -0.28px;
        text-align: center;
        white-space: nowrap;
        text-decoration: none;
    }
    /* 항목은 <a> 라 :hover 까지 적는다 - base.css 의 a:hover { color: inherit }(0,1,1)가 클래스 하나(0,1,0)를 이긴다. */
    .bottom-tab-bar__item,
    .bottom-tab-bar__item:hover {
        color: var(--fstd-neutral-label);
    }
    .bottom-tab-bar__item.is-active,
    .bottom-tab-bar__item.is-active:hover {
        color: var(--ds-brand, #f57a77);
        font-weight: var(--ds-weight-semibold, 600);
    }

    .bottom-tab-bar__icon {
        display: block;
        width: 24px;
        height: 24px;
    }
    .bottom-tab-bar__icon--active,
    .bottom-tab-bar__item.is-active .bottom-tab-bar__icon {
        display: none;
    }
    .bottom-tab-bar__item.is-active .bottom-tab-bar__icon--active {
        display: block;
    }
}