/* ============================================================
   되받쓰 — 모바일 하단 내비게이션
   ------------------------------------------------------------
   PC(769px 이상)는 기존 상단 고정 그대로 두고,
   모바일 폭에서만 메뉴바를 화면 아래로 내린다.

   각 페이지의 인라인 <style> 뒤에서 로드되므로 동일 특이도에서
   나중 규칙이 이긴다. !important 는 쓰지 않는다.

   서브헤더(2차 메뉴)가 있는 페이지는 <body data-nav="dual"> 로 표시한다.
   ============================================================ */

@media screen and (max-width: 768px) {

    /* ── 1차 메뉴바 → 하단 고정 ── */
    .header-fixed {
        top: auto;
        bottom: 0;
        /* 그림자 방향을 위쪽으로 뒤집는다 */
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.25);
    }

    /* 상단 여백 제거 → 하단 여백으로 이전 (헤더 60px + 여유 8px) */
    body {
        padding-top: 0;
        padding-bottom: 68px;
    }

    /* ── 서브헤더가 있는 페이지(list.html) ── */
    /* 1차바가 맨 아래, 2차바가 그 위에 쌓인다 */
    body[data-nav="dual"] .sub-header-fixed {
        top: auto;
        bottom: 60px;
        border-bottom: none;
        border-top: 1px solid rgba(255, 255, 255, 0.10);
    }

    body[data-nav="dual"] {
        padding-bottom: 116px;   /* 60 + 48 + 8 */
    }

    /* 규칙 필터바는 2차바 위에 붙는다 */
    body[data-nav="dual"] .rule-filter-bar {
        top: auto;
        bottom: 108px;           /* 60 + 48 */
        border-bottom: none;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* 필터바가 열려 있으면 본문 여백을 더 확보한다 */
    body[data-nav="dual"]:has(.rule-filter-bar.visible) {
        padding-bottom: 208px;
    }



    #modal-zoom-hint {
        bottom: 84px;
    }
}

/* 인쇄 시에는 화면용 하단바 규칙이 개입하지 않도록 한다 */
@media print {
    .header-fixed,
    .sub-header-fixed,
    .rule-filter-bar {
        display: none;
    }
}
