@font-face {
    font-family: '汉仪飞檐隶';
    src: url('../material/汉仪飞檐隶.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --primary-color: #2c5145;       /* 黛青色 - 主色调 */
    --secondary-color: #b54334;     /* 朱砂红 - 强调色 */
    --paper-bg: #f3f0e3;           /* 宣纸底色 */
    --gold-accent: #c5a663;         /* 金饰色 */
    --ink-color: #3a2e1e;           /* 墨色 */
    --border-color: #8d6e63;        /* 木框色 */
}


body {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><filter id="paper"><feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="5"/><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.15 -0.05"/></filter><rect width="100" height="100" filter="url(%23paper)" fill="%23f3f0e3"/></svg>');
    font-family: 'Noto Serif SC', serif;
    color: var(--ink-color);
}


/* 左侧面板样式 */
.left-panel {
    width: 30%;
    min-width: 320px;
    padding: 2rem;
   background: linear-gradient(to right, #fff 0%, #f8f4e8 100%);
    border-right: 3px solid var(--primary-color);
    box-shadow: 5px 0 15px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}
.left-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), transparent);
    opacity: 0.3;
}
/* 仿古下拉框 - 卷轴风格 */
.antique-select {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23f7f2e3"/><path d="M10,10 L90,10 M10,30 L90,30 M10,50 L90,50 M10,70 L90,70" stroke="%238d6e63" stroke-width="1" stroke-dasharray="2,3"/></svg>');
    border: 2px solid var(--border-color);
    font-family: 'Ma Shan Zheng', cursive;
    color: var(--ink-color);
    text-align: center;
    letter-spacing: 2px;
}
.antique-select {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--primary-color);
    border-radius: 4px;
    background: url('data:image/png;base64,iVBORw0...');
    /* 宣纸纹理 */
    font-family: 'Ma Shan Zheng', cursive;
    font-size: 1.1rem;
    appearance: none;
    cursor: pointer;
}

.antique-select:focus {
    outline: none;
    box-shadow: 0 0 8px var(--gold-accent);
}

/* 信息卡片样式 */


/* 信息卡片 - 药方笺样式 */
.info-card {
    background: linear-gradient(to bottom, #fff, #f7f2e3);
    border: 1px solid var(--border-color);
    border-radius: 0;
    box-shadow: 
        3px 3px 0 rgba(141,110,99,0.1),
        inset 0 0 30px rgba(166,124,82,0.1);
    position: relative;
    /* padding: 1.5rem; */
    padding: 0.8rem;


    margin-bottom: 0.8rem;
}
.info-card::after {
    content: "";
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 60px;
    height: 60px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M20,20 Q50,10 80,20 T100,50 Q90,80 80,80 T20,80 Q10,50 20,20 Z" fill="none" stroke="%23b54334" stroke-width="1" opacity="0.2"/></svg>');
    opacity: 0.3;
}

.calligraphy-title {
    font-family: 'Ma Shan Zheng', cursive;
    color: var(--secondary-color);
    margin: 0 0 1rem 0;
}

/* 古籍原文样式 */
.ancient-text-container {
    position: relative;
    background: #f7f2e3;
    padding: 0.1rem;
    border: 1px solid #d4c8a6;
}

.ancient-text {
    font-size: 1.1rem;
    line-height: 2;
    color: #4a4130;
    text-indent: 2em;
}

.scroll-texture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(180deg,
            transparent 0px,
            transparent 39px,
            rgba(0, 0, 0, 0.1) 40px);
    pointer-events: none;
}

/* 右侧可视化区域 */
.right-panel {
    flex: 1;
    padding: 0.5rem;
    position: relative;
}

.visualization-area {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
    body {
        flex-direction: column;
    }

    .left-panel {
        width: 100%;
        border-right: none;
        border-bottom: 3px solid var(--primary-color);
    }
}

/* 在原有样式后追加 */
.formula-image-container {
    margin-top: 0.3rem;
    position: relative;
    border: 3px double var(--primary-color);
    border-radius: 4px;
    padding: 8px;
    background: #f7f2e3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.antique-image {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #d4c8a6;
    filter: sepia(0.3) contrast(0.95);
}

.image-caption {
    font-family: 'Ma Shan Zheng', cursive;
    color: var(--secondary-color);
    text-align: right;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.8);
    border-top: 1px dashed var(--gold-accent);
}


/* 右侧可视化区域 */
.visualization-area {

    display: grid;
    grid-template-rows: 45vh 45vh;
    border: 1px solid #a67c52;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23f7f2e3"/><path d="M5,5 L95,5 M5,25 L95,25 M5,45 L95,45 M5,65 L95,65 M5,85 L95,85" stroke="%238d6e63" stroke-width="0.5" stroke-dasharray="3,2" opacity="0.3"/></svg>');
}

.chart-container {
    margin-top: 30px;
    border: 2px solid #8d6e63;
    border-radius: 0;
background: rgba(247, 240, 227, 0.95); /* 改为宣纸黄底色 */
    box-shadow: 
        0 2px 5px rgba(0,0,0,0.05),
        inset 0 0 0 1px #d4c8a6;
    position: relative;
}

.chart-container::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 1px dashed rgba(141, 110, 99, 0.3);
    pointer-events: none;
}
#upperCharts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

/* 桑基图容器 */
#sankeyChart {
background: linear-gradient(
        to bottom, 
        #f5efe0,  /* 浅米黄 */
        #e8dfcb   /* 古书纸色 */
    );
    border-top: 1px solid #c4b7a1; /* 更柔和的边框色 */
    height: 90%;
}
/* 添加古典纹理效果 */
.chart-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M0,50 L100,50 M50,0 L50,100" stroke="%23d4c8a6" stroke-width="0.3" opacity="0.2"/></svg>');
    pointer-events: none;
    z-index: 0;
}
.navbar {
    position: absolute;
    top: 1%;
    right: 2.5%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 10px;
    z-index: 3;
}

.navbar a:hover {
    transform: scale(1.1);
    color: #FFD700;
}

.navbar a {
    color: #264758;
    text-decoration: none;
    font-size: 25px;
    margin-right: 35px;
    font-family: '汉仪飞檐隶', sans-serif;
}

.navbar a:last-child {
    margin-right: 7px;
}







/* 翻页 */
/* 添加页面容器样式 */
.page-container {
    position: fixed;
    width: 100%;
    /* 明确指定视窗宽度 */
    height: 100%;
    left: 0;
    will-change: transform;
    /* 提示浏览器优化 */
    transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
}

/* 第一页初始位置 */
#page1 {
    transform: translateY(0);
    z-index: 1;
    flex-direction: row;
}

/* 第二页初始位置 */
#page2 {
    transform: translateY(100%);
    background: var(--paper-bg);
    padding: 2rem;
    overflow-y: auto;
    visibility: hidden;
}

/* 翻页动画状态 */
.page-up #page1 {
    transform: translateY(-100%);
}

.page-up #page2 {
    transform: translateY(0);
    visibility: visible
}

/* 导航指示器 */
.page-indicator {
    position: fixed;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
}

.page-indicator span {
    display: block;
    width: 12px;
    height: 12px;
    margin: 1rem 0;
    border-radius: 50%;
    background: rgba(44, 81, 69, 0.3);
    cursor: pointer;
    transition: all 0.3s;
}

.page-indicator span.active {
    background: var(--primary-color);
    transform: scale(1.4);
}