:root {
    /* --- 基础断点定义 (供参考) --- */
    /* 手机: < 768px */
    /* 平板: 768px - 1024px */
    /* 桌面: 1024px - 1920px */
    /* 4K屏: 3840px */
    /* --- 核心字号缩放逻辑 --- */
    /* 逻辑: 在移动端最小为 14px，在 1024px 以上开始线性增长，到 4K 达到 24px */
    /* 公式: clamp(最小值, 首选值, 最大值) */
    font-size: 14px;
}

@media (min-width: 1024px) {
    :root {
        /* 1.2vw + 10px 是一个经过计算的动态值，确保 1024-3840 之间平滑过渡 */
        font-size: clamp(16px, 0.35vw + 12.4px, 24px);
    }
}

@media (min-width: 3840px) {
    :root {
        /* 针对 4K 以上屏幕，如果想继续缩放可保持 clamp，想锁定则固定 24px */
        font-size: 24px;
    }
}

/* --- 全局布局容器 --- */
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
    /* 这里的 1rem 会随着上面定义的 font-size 自动缩放 */
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1920px) {
    .container {
        max-width: 1800px;
    }
}

@media (min-width: 3840px) {
    .container {
        max-width: 3600px;
    }
}

/* 为当前激活的 nav-link，增加加粗效果 */
.nav-link.active {
    font-weight: bold;
    color: var(--bs-primary) !important;
    border-bottom: 2px solid var(--bs-primary);
}

.p-r-t {
    position: relative;
    top: -1px;
}

.w-1r {
    width: 1rem;
}

.h-1r {
    height: 1rem;
}