@charset "utf-8";

/* ====== 全局重置 ====== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
        }

        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.5;
            max-width: 500px;
            margin: 0 auto;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            min-height: 100vh;
        }


/* 针对超大屏幕优化 */
@media (min-width: 1920px) {
    html { font-size: 18px; }
}

/* 针对小屏幕优化 */
@media (max-width: 768px) {
    html { font-size: clamp(12px, 1vw + 13px, 16px); }
}

/* 针对超小屏幕优化 */
@media (max-width: 360px) {
    html { font-size: 12px; }
}



/* ====== 响应式标题系统 ====== */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5em 0;
    font-weight: 600;
    line-height: var(--leading-tight);
    color: var(--primary-color);
    font-family: var(--font-primary);
}

/* 标题大小 - 使用动态clamp值 */
h1 { font-size: var(--text-4xl); }   /* 36-48px */
h2 { font-size: var(--text-3xl); }   /* 30-40px */
h3 { font-size: var(--text-2xl); }   /* 24-32px */
h4 { font-size: var(--text-xl); }    /* 20-24px */
h5 { font-size: var(--text-lg); }    /* 18-20px */
h6 { font-size: var(--text-base); }  /* 16-18px */

/* 移动端标题优化 */
@media (max-width: 768px) {
    h1, h2, h3, h4, h5, h6 {
        line-height: var(--leading-normal);
    }
    
    h1 { 
        font-size: clamp(1.5rem, 4vw, 2rem);  /* 24-32px */
        letter-spacing: -0.02em;
    }
    
    h2 { 
        font-size: clamp(1.375rem, 3.5vw, 1.75rem);  /* 22-28px */
    }
    
    h3 { 
        font-size: clamp(1.25rem, 3vw, 1.5rem);  /* 20-24px */
    }
    
    h4 { 
        font-size: clamp(1.125rem, 2.5vw, 1.375rem);  /* 18-22px */
    }
    
    h5 { 
        font-size: var(--text-base);  /* 16-18px */
    }
    
    h6 { 
        font-size: var(--text-sm);  /* 14-16px */
    }
}

/* ====== 链接样式 ====== */
a {
    color: var(--secondary-color);
    text-decoration: none;
    word-wrap: break-word;
    word-break: break-word;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
    font-size: inherit; /* 继承父元素字体大小 */
    font-family: inherit; /* 继承父元素字体 */
}

a:hover {
    color: var(--primary-color);
    border-bottom-color: var(--accent-color);
    transform: translateY(-1px);
}

/* 小屏幕链接优化 */
@media (max-width: 768px) {
    a {
        padding: 0.125em 0; /* 增加触摸区域 */
    }
}

/* ====== 文本元素 ====== */
p { 
    line-height: var(--leading-relaxed);
    font-size: var(--text-base);
    font-family: var(--font-primary);
    text-rendering: optimizeLegibility;
}

/* 段落在不同设备上的优化 */
@media (max-width: 768px) {
    p {
        font-size: clamp(0.875rem, 2vw, 1rem);  /* 14-16px */
        line-height: var(--leading-loose);
        margin-bottom: 1.25em;
    }
}


/* 小文本 */
small, .text-sm {
    font-size: var(--text-sm);
    font-family: var(--font-primary);
}

/* 代码文本 */
pre, code {
    font-family: 'Monaco', 'Menlo', 'Consolas', 'Courier New', monospace;
    font-size: var(--text-sm);
    background-color: rgba(0, 0, 0, 0.05);
    padding: 0.2em 0.4em;
    border-radius: 3px;
}

/* ====== 表单元素响应式 ====== */
input, textarea, select, button {
    font-size: 100%; /* 继承字体大小 */
    outline: none;
    font-family: var(--font-primary);
    transition: all 0.3s ease;
}

/* 输入框样式优化 */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"], 
input[type="url"],
textarea,
select {
    font-size: var(--text-base);
    font-family: var(--font-primary);
    color: var(--text-color);
    background-color: #fff;
    border: 1px solid var(--border-color); 
    border-radius: 4px;
    width: 100%;
    max-width: 100%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 输入框焦点状态 */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(141, 110, 99, 0.1);
    outline: none;
}

/* 小屏幕输入框优化 */
@media (max-width: 768px) {
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    textarea,
    select {
        font-size: clamp(0.875rem, 3vw, 1rem);
      
        min-height: 44px; /* 最小触摸高度 */
    }
}
 

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover {
    background-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 小屏幕按钮优化 */ 
@media (max-width: 768px) {
    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"] {
        font-size: clamp(0.875rem, 3vw, 1rem);
        /*! padding: 1em 2em; */
        min-height: 48px; /* 增加触摸区域 */
        
    }
}

/* ====== 列表样式 ====== */
ul, ol, li {
    list-style: none;
    font-family: var(--font-primary);
}

/* 有序/无序列表样式 */
ul:not([class]), ol:not([class]) {
    margin-left: 1.5em;
    margin-bottom: 1.5em;
    font-size: var(--text-base);
}

ul:not([class]) li {
    list-style: disc;
    margin-bottom: 0.75em;
    line-height: var(--leading-relaxed);
}

ol:not([class]) li {
    list-style: decimal;
    margin-bottom: 0.75em;
    line-height: var(--leading-relaxed);
}

/* 小屏幕列表优化 */
@media (max-width: 768px) {
    ul:not([class]), ol:not([class]) {
        margin-left: 1em;
        font-size: var(--text-base);
    }
}

/* ====== 表格样式 ====== */
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    font-size: var(--text-sm);
    font-family: var(--font-primary);
    margin-bottom: 1.5em;
}

th, td {
    padding: 0.75em 1em;
    border: 1px solid var(--border-color);
    text-align: left;
}

th {
    background-color: rgba(0, 0, 0, 0.05);
    font-weight: 600;
}

/* 小屏幕表格优化 - 水平滚动 */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        font-size: var(--text-sm);
    }
    
    th, td {
        padding: 0.5em 0.75em;
    }
}

/* ====== 图片响应式 ====== */
img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* ====== 实用工具类 ====== */
/* 文本大小工具类 - 响应式 */
.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }

/* 行高工具类 */
.leading-tight { line-height: var(--leading-tight); }
.leading-normal { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }
.leading-loose { line-height: var(--leading-loose); }


/* 文本对齐 */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* 文本装饰 */
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-normal { font-weight: 400; }
.font-light { font-weight: 300; }

.italic { font-style: italic; }
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }

/* 响应式显示/隐藏 */
.show-mobile { display: none; }
.hide-mobile { display: block; }

@media (max-width: 768px) {
    .show-mobile { display: block; }
    .hide-mobile { display: none; }
}

/* 内边距 */
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }

.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }

/* 外边距 */
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 0.75rem; }
.m-4 { margin: 1rem; }
.m-6 { margin: 1.5rem; }
.m-8 { margin: 2rem; }

.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* 浮动 */
.fl { float: left; }
.fr { float: right; }

/* 响应式浮动 */
@media (max-width: 768px) {
    .fl, .fr {
        float: none;
        display: block;
        width: 100%;
    }
}

/* 定位 */
.pr { position: relative; }
.pa { position: absolute; }
.pf { position: fixed; }
.ps { position: sticky; }

/* 清除浮动 */
.clear { clear: both; height: 0; }
.clearafter:after {
    content: "";
    display: table;
    clear: both;
}

/* 特殊场景清除浮动（兼容性保留） */
.blk-main .clearlist,
.blk-main .listclear,
.b-main .clearlist,
.b-main .listclear {
    clear: both;
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    width: 100%;
    float: none;
}

/* 圆角 */
.rounded { border-radius: 4px; }
.rounded-lg { border-radius: 8px; }
.rounded-full { border-radius: 9999px; }

/* 阴影 */
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }

/* 过渡动画 */
.transition { transition: all 0.3s ease; }
.transition-fast { transition: all 0.15s ease; }
.transition-slow { transition: all 0.5s ease; }


.ptb90{padding: 68px 0;}
.pt90{padding-top: 68px}