/* 根变量定义 */
    /*
    :root {
        --head-height: 130px; /* 全局头部高度 */
        /* --bottom-color:#147aa3;
    }
    */

    :root {

        --head-height: 130px; /* 全局头部高度 */
        --bottom-color:#147aa3;
        /* 主色调 - 水墨青黛 */
        --primary-color: #3A5F70;
        --primary-light: #5A7F90;
        --primary-dark: #1A3F50;
        
        /* 辅助色 - 朱砂金粟 */
        --accent-color: #C53D2F;
        --accent-light: #E55D4F;
        --accent-gold: #D4AF37;
        
        /* 中性色 - 宣纸与墨色 */
        --paper-color: #F8F4E9;
        --paper-shadow: #E8E4D9;
        --ink-color: #333333;
        --ink-light: #666666;
        
        /* 点缀色 - 秋香与石青 */
        --autumn-color: #A68B5D;
        --stone-blue: #3A7CA5;
        
        /* 尺寸变量 */
        --head-height: 140px;
        --nav-width: 260px;
        --border-radius: 8px;
    }

    /* 首先定义字体家族 */
    @font-face {
      font-family: 'HanaMin';
      src: url('webfonts/HanaMinA.ttf') format('truetype'),
           url('webfonts/HanaMinB.ttf') format('truetype');
      /* 根据实际文件格式和路径修改 */
      font-weight: normal;
      font-style: normal;
      font-display: swap; /* 可选，控制字体加载期间的显示行为 */
    }



    /* 基础样式重置 */
    * {
        margin: 0;   /* 清除默认边距 */
        padding: 0;   /* 清除默认内边距 */
        box-sizing: border-box; /* 盒模型设置为border-box */


    }

    body {
        background: #fff;
    }


    h2 {
        font-size: 1.6rem;
    }

    .sub-header h2 {
        font-size: 1.6rem;
        font-weight: normal;
        font-family: "KaiTi", "楷体", serif;
        color:white;
    }

    h1 {
        font-size: 3rem;
        color: #f6e18b;
        margin-bottom: 15px;
        font-weight: normal;
        letter-spacing: 8px;
        text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
    }



/* 头部样式 */
    .site-header {
        background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
        color: white;
        padding: 12px 0;
        text-align: center;
        border-bottom: 4px solid var(--accent-gold);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        top: 0;
        z-index: 100;
    }

    .header-container {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
    }

    .logo {
        display: flex;
        align-items: center;
        flex-direction: column;
    }


    .logo h1 {
        font-size: 3rem;
        color: #f6e18b;
        margin-bottom: 15px;
        font-weight: normal;
        letter-spacing: 8px;
        text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
    }
        
    .logo-icon {
        font-size: 28px;
        margin-right: 10px;
        color: #f9e4b7;
    }
    
    /* 关键信息区域 - 紧凑布局 */
    .key-info {
        display: flex;
        gap: 25px;
    }
    
    .info-item {
        text-align: center;
        position: relative;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .info-item:hover {
        transform: translateY(-2px);
    }
    
    .info-item::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 0;
        height: 2px;
        background-color: #f9e4b7;
        transition: width 0.3s ease;
    }
    
    .info-item:hover::after {
        width: 100%;
    }
    
    .info-number {
        display: block;
        font-size: 18px;
        font-weight: bold;
        color: #f9e4b7;
    }
    
    .info-label {
        margin-top: 2px;
        padding: 10px 20px;
        font-size: 1.1rem;
        color: #d2ad38;
   }

    /* 头部内容 */




    .subtitle {
            font-size: 1.3rem;
            color: #d4af37;
            font-style: italic;
            margin-bottom: 20px;
        }

    .stats {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 20px;
        }

    .stat-item {
            background: #e8d5b5;
            padding: 10px 20px;
            border-radius: 20px;
            font-size: 0.9rem;
            color: #66441e;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
        }

    a {
         color: inherit; /* 继承父元素颜色（推荐）*/
         text-decoration: none;
    }


    /* 全局固定头部样式 */
    .global-header {
        position:relative;  /* fixed 固定不动 */
        top: 0;
        width: 100%;
        height: var(--head-height); /* 使用变量定义高度 */
        //background: linear-gradient(135deg, #2c3e50, #3498db);
        background: linear-gradient(to right, #614385 0%, #516395 100%);
        color: white;
        display: flex;              /* 启用flex布局 */
        flex-direction: column;     /* 垂直排列子元素 */
        align-items: center;        /* 水平居中 */
        justify-content: center;    /* 垂直居中 */
        text-align: center;         /* 文本居中 */
        padding: 10px 25px;         /* 调整内边距 */
        z-index: 1000;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 底部阴影 */
    }

    .site-title {
        display: block;
        font-family: 'LiSu', cursive;
        font-size:2.8rem;
    }

    p {
        display: block;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        unicode-bidi: isolate;
    }

    /* 主内容容器布局 */
    .main-container {
        margin-top: 6px; /* var(--head-height); /* 避开头部高度 */
        display:flex; 
    }


    /* 修改左侧导航栏样式 */
    .left-nav {
        position: sticky;  /* fixed 改为固定定位 */
        top: 0; /* var(--head-height); */
        left: 0;

        height:100vh;
        bottom: 0; /* 从顶部到底部撑满 */
        width: 240px;
        background: #b7d6e4; /* #b7d6e4; */
        border-radius:10px 10px 0 0;

        color: #000;
        margin: 0 15px;
        overflow-y: hidden; /* 禁止滚动条 */
        z-index: 500; /* 确保在内容上方 */
    }

    /* 导航菜单列表 */
    .nav-menu {
        list-style: none; /* 移除列表标记 */
        padding: 0.1rem 0;
    }


    /* 右侧内容区容器 */
    .right-container {
        flex: 1;  /* 占据剩余空间 */
        background: #f5f6fa; /* 浅灰色背景 */
        display: flex;
        flex-direction: column; /* 垂直排列 */
    }






    /* 导航项交互样式 */

    .nav-item {
        font-size: 1.1rem;
        font-family: "宋体", "Tahoma", "Microsoft YaHei", "Noto Sans SC", "SimSun", "NSimSun", "新宋体", "KaiTi", "楷体", serif;
        cursor: pointer;  /* 鼠标手型 */
        transition: background 0.3s; /* 背景色过渡动画 */
        text-align: center;
        border-bottom: 1px solid #90bfdd;
    }
    
    .nav-item:last-child {
        border-bottom: none;
    }
    
    .nav-item a {
        display: block;
        padding: 0.4rem 1.5rem;
        color: var(--text-color);
        text-decoration: none;
        transition: var(--transition);
        position: relative;
    }
        
    .nav-item a:hover {
        /*background: rgba(142, 68, 173, 0.1); */
        padding-left: 2rem;
        background: #106697; /* 悬停背景色 */
        color:#fff;
    }
    
    .nav-item.active a {
        background:#106697;
        color:#fff;
    }
    
    .nav-item.active a::before {
        content: '';
        position: absolute;
        top:0;
        border-top: 1.2rem solid transparent;
        border-bottom: 1.2rem solid transparent;
        border-left: 1.5rem solid #f39c12;
        left: 0px; /* 使三角形位于元素右侧 */
    }



    



    /* 子头部粘性定位 */
    .sub-header {
        /* background: linear-gradient(to right, var(--primary-light), var(--primary-color));; */
        background: linear-gradient(90deg, #3498db, #2ecc71);
        position: sticky; /* 粘性定位 */
        top: 0;  /* var(--head-height) */
        border-radius: 10px 10px 0 0;
        padding: 10px 30px;
        z-index: 500; /* 低于全局头部 */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 轻量阴影 */
        display: flex;
        align-items: center;
        justify-content: space-between; /* 两侧对齐 */

        opacity: 1;  /* 透明度 */
    }

    /* 诗歌多列布局容器 */
    .poem-container {
        column-width: 450px;  /* 每列基准宽度 */
        column-gap: 2rem;    /* 列间距 */
        padding: 1.5rem 2rem 0; /* 上/左右/下内边距 */
        background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23c9ad92' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
    }

    /* 诗歌卡片样式 */
    .poem-card {
        background: white;
        padding: 1.5rem;
        border-radius: 10px; /* 圆角效果 */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 基础阴影 */
        margin-bottom: 2rem;  /* 卡片间距 */
        break-inside: avoid;  /* 防止分列断裂 */
        transition: transform 0.3s; /* 悬停动画过渡 */
        border-right:3px solid #ccc;
    }


    /* 卡片悬停动画效果 */
    .poem-card:hover {
        transform: translateY(-5px); /* 上移效果 */
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* 增强阴影 */
    }

    /* 诗歌标题样式 */
    .poem-title {
        font-family: 'HanYi', cursive;
        font-size: 1.8rem;
        color: #2c3e50;  /* 深蓝色 */
        padding-bottom: 0.5rem;
        border-bottom: 2px solid var(--bottom-color); /* #e74c3c红色下划线 */
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        position: relative;
        margin-bottom: 1rem;
    }

    /* 标题下划线动画 */
    .poem-title:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--bottom-color);  /* #e74c3c;红色下划线 */
        transition: width 0.3s ease-out;   
        will-change: transform; /* 性能优化 */
    }

    .poem-card:hover .poem-title:after {
        width: 100%;
        transform: translateX(0);
    }

    /* 作者信息样式 */
    .poem-author {
        color: #7f8c8d;  /* 灰色文字 */
        margin-bottom: 1.4rem;
        
    }

    /* 诗歌内容排版 */
    .poem-content {
        font-size: 1.1rem;
        font-family: 'Noto Sans sc', 'HanaMin', serif; /* 建议提供后备字体 */
        line-height: 1;  /* 行高设置 */
        white-space: pre-wrap; /* 保留换行格式 */
    }

    /* 增加空数据提示样式 */
    .empty-tip {
        column-span: all;/* 强制跨所有列 不然会有两列内容*/
        padding: 20px;
        text-align: center;
        color: #666;
    }


    .p-card {
        max-width: 768px;
        width: 100%;         /* 添加宽度限制 */
        margin: 0 auto;      /* 水平居中 */
        padding: 20px;       /* 内容留白 */
        display: flex;
        flex-direction: column;
        align-items: center; /* 子元素居中 */
    }

    /* read诗歌标题样式 */
    .p-title {
        font-family: 'HanYi', cursive;
        font-size: 2.5rem;
        color: #2c3e50;  /* 深蓝色 */
        padding-top: 3rem;
        padding-bottom: 0.5rem;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        text-align: center;
        position: relative;
        margin-bottom: 1rem;
    }



    /* 作者信息样式 */
    .p-author {
        color: #7f8c8d;  /* 灰色文字 */
        margin-bottom: 1.8rem;
        text-align: center;
        font-size:1.7rem;
    }

    /* 诗歌内容排版 */
    .p-content {
        font-size: 1.7rem;
        line-height: 1;
        white-space: pre-wrap; /* 保留换行格式 */
        text-align: left;      /* 内容左对齐 */
        font-family: 'HanYi', cursive;
    }

    .p-yw {
        font-family: 'HanYi', cursive;
        font-size: 1.6rem;
        line-height:3rem;
        padding: 20px 30px 0;
    }

    /* 右侧内容区容器 */
    .right-read {
        flex: 1;  /* 占据剩余空间 */
        background: #fcfcfc; /* 浅灰色背景 */
        display: flex;
        flex-direction: column; /* 垂直排列 */
    }

    .pagination {
        display: flex;
        justify-content: space-between;
        margin: 2rem 0;
    }
      


    /* 分页样式 */
    .pagination {
        display: flex;
        justify-content: center;
        margin: 30px 0;
        flex-wrap: wrap;
    }
    
    .pagination a, .pagination span {
        display: inline-block;
        padding: 8px 16px;
        margin: 0 4px;
        border: 1px solid #ddd;
        border-radius: 4px;
        text-decoration: none;
        color: var(--primary-color);
        transition: all 0.3s;
    }
    
    .pagination a:hover {
        background-color: var(--primary-dark);
        border-color: var(--primary-dark);
        color:white;
    }
    
    .pagination .current {
        background-color: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
    }
    
    .pagination .disabled {
        color: #ccc;
        pointer-events: none;
    }
    
    .pagination-info {
        text-align: center;
        margin-bottom: 20px;
        color: #666;
        font-size: 14px;
    }
    
    .page-jump {
        display: flex;
        justify-content: center;
        margin: 20px 0;
        align-items: center;
    }
    
    .page-jump input {
        padding: 8px;
        margin: 0 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        text-align: center;
    }
    
    .page-jump button {
        padding: 8px 16px;
        background-color: var(--primary-color);
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    
    .page-jump button:hover {
        background-color: var(--primary-dark);
    }



    .menu {
        font-size: 1.7rem;
        background: #175982;
        color:#d4af37;
        font-family: "KaiTi", "楷体", serif;
        text-align: center;
        padding:0.5rem;
        border-bottom:2px dotted  #1e5a75;
    }






    /* 语言选择器样式 */
    .lang-selector {
        position: absolute;
        top: 5px;
        right: 60px;
        display: flex;
        gap: 5px;
        background: white;
        padding: 5px 10px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        z-index: 100;
    }
    
    .lang-btn {
        padding: 5px 12px;
        border: 1px solid #ddd;
        background: white;
        border-radius: 15px;
        cursor: pointer;
        font-size: 0.85rem;
        transition: all 0.3s ease;
    }
    
    .lang-btn.active {
        background: #4a6fa5;
        color: white;
        border-color: #4a6fa5;
    }
    
    .lang-btn:hover:not(.active) {
        background: #f0f0f0;
    }

    /* 上面 语言选择器样式 */





    /* 响应式设计 - 移动端适配 */
    @media (max-width: 768px) {
        /* head头部内容自动换行 */
        .header-container {
            flex-direction: column;
            gap: 15px;
        }


        .pagination a, .pagination span {
            padding: 6px 12px;
            margin: 2px;
        }


        .left-nav {
            width: 180px;  /* 缩小导航宽度 */
        }
        
        .poem-container {
            column-width: 100%; /* 单列显示 */
            padding: 1rem;  /* 减少内边距 */
        }
        
        .global-header {
            font-size: 1rem;  /* 缩小字体 */
            padding: 0 15px;  /* 减少水平内边距 */
        }



        

    }