/* 2024.04.15*/
.bottom_bar {
    display: none;
}

/*_______________________________________________태블릿*/
@media screen and (max-width: 1024px) {
    .bottom_bar {
        display: block;
        width: 100%;
        position: fixed;
        bottom: 0;
        z-index: var(--z-index-2);
        background: var(--color-bg-inverse);
        border-top: var(--border-width-1) solid var(--color-shadow-primary);
        box-shadow: 0px -2px 8px 0px rgba(0, 0, 0, 0.06);
    }

    /* 메뉴 컨텐츠*/
    .bottom_bar .bottom_bar_inner {
        display: flex;
        align-items: center;
        height: 58px;
    }

    /* 메뉴 */
    .bottom_bar .bottom_bar_inner .bottom_menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    /* 아이콘 박스 */
    .bottom_bar .bottom_bar_inner .bottom_menu .iconbox {
        position: relative;
    }

    /* NEW 아이콘*/
    .bottom_bar .bottom_bar_inner .bottom_menu .iconbox .icon_new {
        width: 16px;
        height: 16px;
        line-height: 16px;
        position: absolute;
        right: -16px;
        top: -4px;
        font-size: var(--font-size-12);
        color: var(--color-text-inverse);
        background: var(--color-icon-red);
        border-radius: var(--border-radius-full);
        text-align: center;
    }

    /* 텍스트 */
    .bottom_bar .bottom_bar_inner .bottom_menu > span {
        font-size: 13px;
        font-weight: var(--font-weight-m);
        color: var(--color-text-semigrey);
        position: relative;
    }

    /* HOT 아이콘 */
    .bottom_bar .bottom_bar_inner .bottom_menu > span .hot {
        position: absolute;
        font-size: 7px;
        font-weight: var(--font-weight-r);
        top: -32px;
        right: -12px;
        padding: 2px 4px;
        color: var(--color-text-inverse);
        background: var(--color-icon-red);
        border-radius: var(--border-radius-full);
        text-align: center;
    }

    /* 홈, 관심질환, 햄버거 메뉴, 알림, 간병인 홈 선택 시 */
    .bottom_bar .bottom_bar_inner .bottom_menu.active .icon_home svg path,
    .bottom_bar .bottom_bar_inner .bottom_menu.active .icon_disease_search svg path,
    .bottom_bar .bottom_bar_inner .bottom_menu.active .icon_hamburger_menu svg path,
    .bottom_bar .bottom_bar_inner .bottom_menu.active .icon_notification svg path {
        stroke: var(--color-icon-brand);
    }

    .bottom_bar .bottom_bar_inner .bottom_menu.active .icon_announcement svg path,
    .bottom_bar .bottom_bar_inner .bottom_menu.active .icon_health svg path {
        fill: var(--color-icon-brand);
    }

    .bottom_bar .bottom_bar_inner .bottom_menu.active .icon_caregiver_home svg path {
        stroke: #00c5c5;
    }

    /* 공고, 헬스케어, 간병인 홈 선택 시 */
    .bottom_bar .bottom_bar_inner .bottom_menu.active .icon_caregiver_home svg path {
        stroke: #00c5c5;
    }

    /* 선택 시 텍스트 색 */
    .bottom_bar .bottom_bar_inner .bottom_menu.active > span {
        color: var(--color-text-brand);
    }

    .care_bar .bottom_bar_inner .bottom_menu.active .icon_health svg path {
        fill: #00c5c5;
    }

    /* 선택 시 텍스트 색 */
    .care_bar .bottom_bar_inner .bottom_menu.active > span {
        color: #00c5c5;
    }

    .health_bar .bottom_bar_inner .bottom_menu.active .iconbox svg path {
        fill: var(--color-text-health);
    }

    .health_bar .bottom_bar_inner .bottom_menu.active > span {
        color: var(--color-text-health);
    }
}