@charset "UTF-8";

/* ==========================================================================
   CSS变量定义 - 主题配置
   ========================================================================== */
:root {
    /* 主题色彩 */
    --primary-color: #333;
    --text-color: #666;
    --text-hover-color: #a30004;

    /* 字体配置 */
    --font-family-base: "SF Pro Display", "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --font-family-chinese: "fz-zhong", var(--font-family-base);

    /* 布局配置 */
    --container-max-width: 1410px;
    --container-padding: 15px;

    /* 字体平滑和间距 */
    --letter-spacing: 0.04em;
    --letter-spacing-firefox: 0;
}

/* ==========================================================================
   重置样式
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-width: 1400px;
    font-family: var(--font-family-base);
    -webkit-font-smoothing: antialiased;
    letter-spacing: var(--letter-spacing);
}

/* Firefox 字体间距修复 */
@-moz-document url-prefix() {
    body {
        letter-spacing: var(--letter-spacing-firefox);
    }
}

/* ==========================================================================
   字体定义
   ========================================================================== */
@font-face {
    font-family: "fz-zhong";
    src: url("../fonts/FZYanSJW_Zhong.TTF") format("truetype");
    font-display: swap;
    /* 字体加载优化 */
}

/* ==========================================================================
   基础元素样式
   ========================================================================== */
ul,
ol,
li {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--text-color);
    transition: color 0.3s ease;
    /* 添加过渡效果 */
}

a:hover {
    color: var(--text-hover-color);
}

img {
    border: 0;
    max-width: 100%;
    height: auto;
    /* 响应式图片 */
}

/* ==========================================================================
   标题和文本样式重置
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6,
b,
strong,
em,
i,
body:not(.article-content) table th {
    font-weight: 400;
    font-family: var(--font-family-chinese);
}

b,
strong,
em,
i {
    font-style: normal;
}

/* 特殊情况下的斜体保持 */
.item-drag-wrap em *,
body .title-t em,
body .title-t i {
    font-style: italic;
}

/* ==========================================================================
   表单元素样式
   ========================================================================== */
input,
select,
textarea {
    vertical-align: middle;
    color: #000;
    border: none;
    outline: 0;
    resize: none;
}

/* ==========================================================================
   表格样式
   ========================================================================== */
body:not(.article-content) table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
}

body:not(.article-content) .noteContent table {
    width: auto;
    word-break: break-all;
}

/* ==========================================================================
   通用布局组件
   ========================================================================== */
.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* ==========================================================================
   响应式设计 - 移动优先
   ========================================================================== */

/* 移动端端基础字体大小 */
/*@media screen and (min-width:212px) {*/
@media screen and (min-width: 1px) and (max-width: 213px) {
    html {
        font-size: 9.09px
    }
}

/*@media screen and (min-width:319px) {*/
@media screen and (min-width: 214px) and (max-width: 320px) {
    html {
        font-size: 13.65px
    }
}

/*@media screen and (min-width:359px) {*/
@media screen and (min-width: 321px) and (max-width: 360px) {
    html {
        font-size: 15.36px
    }
}

/*@media screen and (min-width:374px) {*/
@media screen and (min-width: 361px) and (max-width: 375px) {
    html {
        font-size: 16px
    }
}

/*@media screen and (min-width:383px) {*/
@media screen and (min-width: 376px) and (max-width: 384px) {
    html {
        font-size: 16.38px
    }
}

/*@media screen and (min-width:399px) {*/
@media screen and (min-width: 385px) and (max-width: 400px) {
    html {
        font-size: 17.07px
    }
}

/*@media screen and (min-width:414px) {*/
@media screen and (min-width: 401px) and (max-width: 415px) {
    html {
        font-size: 17.71px
    }
}

/*@media screen and (min-width:925px) {*/
@media screen and (min-width: 416px) and (max-width: 926px) {
    html {
        font-size: 18.09px
    }
}

/* 大屏幕适配 */
@media screen and (min-width: 926px) and (max-width: 1200px) {
    body {
        zoom: 0.7;
    }
}

@media screen and (min-width: 1201px) {
    body {
        zoom: 1;
    }
}

/* ==========================================================================
   工具类 - BEM命名规范
   ========================================================================== */

/* 文本相关 */
.text--primary {
    color: var(--primary-color);
}

.text--chinese {
    font-family: var(--font-family-chinese);
}

.text--center {
    text-align: center;
}

.text--bold {
    font-weight: 700;
}

/* 显示控制 */
.hidden {
    display: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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