/* ════════════════════════════════════════
   響應式（窄畫面 / iPad 直立）
   ════════════════════════════════════════ */
@media (max-width: 900px), (orientation: portrait) and (pointer: coarse) {
    body, body.sidebar-expanded {
        padding-left: 0;
        padding-top: 56px;
    }
    #sidebar, #sidebar.expanded {
        width: 100%;
        height: 52px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        padding: 6px 8px;
        top: 0;
        left: 0;
        border-right: none;
        border-bottom: 1px solid var(--accent-bg);
        overflow: hidden;
    }
    #sidebar.expanded {
        height: auto;
        flex-wrap: wrap;
        padding: 8px;
        gap: 6px;
        overflow: visible;
    }
    #sidebar.expanded .nav-btn {
        width: 100% !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        padding: 0 10px !important;
    }
    #sidebar.expanded .nav-label {
        display: inline !important;
        opacity: 1 !important;
        overflow: visible;
    }
    .nav-spacer { display: none; }
    #page-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "bl" "br";
        min-height: 0;
    }
    #aculist-content {
        padding: 12px 12px 34px;
    }
    #aculist-grid {
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
        gap: 10px;
    }
}