/* ===================================================================
   하단 메인 메뉴 (모바일)

   따로 떼어 둔 이유: 관리자 화면은 사이트 헤더를 쓰지 않아 이 바가 함께
   사라졌다. 관리자 페이지에 들어가는 순간 아래 메뉴가 없어져, 다른 곳으로
   가려면 뒤로가기를 눌러야 했다. 이제 조각과 스타일이 한 벌로 다닌다.

   칸은 다섯이다. 한 줄에 여섯 이상을 밀어 넣으면 글자가 0.6rem 아래로
   내려가 한글이 뭉개진다. 여기서 빠진 곳(드랍, 배지, 교육 등)은
   위 햄버거 서랍에 그대로 있다.
   =================================================================== */

:root {
    --mobile-bottom-nav-height: 68px;
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-bottom-nav { display: none; }

@media (max-width: 767.98px) {

    /* 바가 가리지 않도록 본문 아래를 비워 둔다.
       hbc-mobile.css 가 없는 화면(관리자)에서도 필요하므로 여기서 건다. */
    body {
        padding-bottom: calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-bottom));
    }

    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--mobile-bottom-nav-height);
        padding-bottom: var(--mobile-safe-bottom);
        background: rgba(15, 18, 30, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-top: 1px solid rgba(255,255,255,0.08);
        z-index: 1050;
        justify-content: space-around;
        align-items: center;
        overflow: visible;
    }

    .mobile-tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        flex: 1;
        min-width: 0;
        height: 100%;
        text-decoration: none;
        color: rgba(255,255,255,0.52);
        /* 0.6rem 은 한글에서 글자 모양이 뭉개진다. 읽히는 크기까지 올린다. */
        font-size: 0.68rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        transition: color 0.15s;
        position: relative;
        padding: 4px 0;
        min-height: auto;
        white-space: nowrap;
    }

    .mobile-tab-item i {
        font-size: 1.32rem;
        line-height: 1;
    }

    .mobile-tab-item.active { color: #fbbf24; }
    .mobile-tab-item.active i { filter: drop-shadow(0 0 8px rgba(245,158,11,0.5)); }

    /* 지금 어디에 있는지 — 색만으로는 흘깃 봐서 안 잡힌다.
       위쪽에 짧은 막대를 그어 현재 자리를 못박는다. */
    .mobile-tab-item.active::before {
        content: '';
        position: absolute;
        top: 0;
        width: 26px;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: #fbbf24;
    }

    /* 아틀라스는 이 사이트가 가장 밀고 있는 곳이다.
       다만 가운데 자리가 아니라 넷째이므로 솟아오르게 두지 않는다 —
       가운데가 아닌 칸만 튀어 올라 있으면 잘못 만든 것처럼 보인다.
       대신 색으로 눈에 띄게 한다. */
    .mobile-tab-item.tab-atlas { color: #6ee7b7; }
    .mobile-tab-item.tab-atlas.active { color: #34d399; }
    .mobile-tab-item.tab-atlas.active::before { background: #34d399; }

    /* 독서토론도 제 색을 갖는다 — 하늘색.
       아틀라스(초록)·지금 자리 표시(금색)·강의(보라)와 겹치지 않고,
       사이트에서 이미 "내 독서 노트"에 쓰는 색이라 읽기와 이어진다. */
    .mobile-tab-item.tab-bookclub { color: #7dd3fc; }
    .mobile-tab-item.tab-bookclub.active { color: #38bdf8; }
    .mobile-tab-item.tab-bookclub.active i { filter: drop-shadow(0 0 8px rgba(56,189,248,0.5)); }
    .mobile-tab-item.tab-bookclub.active::before { background: #38bdf8; }

    /* 하늘 광장 — 연보라. 광장에서 "구름 위" 고도에 쓰는 색이라 광장과 이어지고,
       바로 옆 독서토론(하늘색)·아틀라스(초록)·지금 자리(금색)와 겹치지 않는다. */
    .mobile-tab-item.tab-plaza { color: #c4b5fd; }
    .mobile-tab-item.tab-plaza.active { color: #a78bfa; }
    .mobile-tab-item.tab-plaza.active i { filter: drop-shadow(0 0 8px rgba(167,139,250,0.55)); }
    .mobile-tab-item.tab-plaza.active::before { background: #a78bfa; }

    /* 안 읽은 수 같은 것을 붙일 자리 */
    .mobile-tab-badge {
        position: absolute;
        top: 6px;
        right: calc(50% - 18px);
        background: #ef4444;
        color: #fff;
        font-size: 0.55rem;
        font-weight: 700;
        min-width: 14px;
        height: 14px;
        border-radius: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 3px;
        line-height: 1;
    }
    /* display:flex 가 hidden 속성을 이기므로 숨김을 따로 못박는다 */
    .mobile-tab-badge[hidden] { display: none; }
}

/* 태블릿부터는 위쪽 메뉴가 보이므로 아래 바는 접는다 */
@media (min-width: 768px) {
    .mobile-bottom-nav { display: none !important; }
}