/*
 * app-shell.css — 全站 app-shell（側欄 + #mainContent + 固定底部導覽列）共用版面修正
 *
 * 問題：手機版底部有固定導覽列（partial mobile-nav.html，md:hidden、高約 65px、z-50）。
 *       但各頁捲動容器 #mainContent 的 padding-bottom 只有 24px（p-6），
 *       導致最底部一排功能（編輯／分享等）落在導覽列下方的死區、點不到。
 *
 * 修正：手機版（< md, 768px）為 #mainContent 增加底部留白，讓內容能完整捲動到導覽列上方，
 *       並額外保留 iOS 瀏海手機的 safe-area。桌機（≥ md）導覽列隱藏，維持原本 24px 不受影響。
 *
 * 用 #mainContent（id 選擇器，specificity 高於 Tailwind 的 .p-6 等 class），確保穩定覆蓋。
 */
@media (max-width: 767px) {
    #mainContent {
        /* 80px 已大於導覽列高度 65px，再加上 iOS safe-area inset */
        padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    }
}