/**
 * Layout CSS
 * 页面结构模板：主容器、section、内容流和导航锚点。
 * HTML 重构时优先给结构节点补这些 class，再逐步减少内联样式。
 */

.page-shell {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--space-5);
}

.page-view {
    width: 100%;
}

.page-main {
    display: block;
}

.page-section {
    position: relative;
    scroll-margin-top: calc(var(--nav-height) + var(--space-5));
}

.page-content-flow {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.page-view > .page-section + .page-section {
    margin-top: var(--space-6);
}

.view-switch-section {
    margin-bottom: var(--space-5);
}

.section-anchor-target {
    scroll-margin-top: calc(var(--nav-height) + var(--space-5));
}

@media (max-width: 640px) {
    .page-shell {
        padding: var(--space-4);
    }

    .page-content-flow {
        gap: var(--space-5);
    }
}