/* 1. 背景与基础布局保持不变 */
body {
    background-image: url('../images/DiWangDongXvn/page_bg_1.webp'); 
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    background-color: #f5f5f5;
    font-family: 'Noto Serif SC', 'Source Han Serif SC', serif;
}

/* 你的 CSS 里之前漏掉了这个类，请务必加上 */
.content-wrapper {
    position: relative;          /* 让“继续探索”按钮相对于这个区域定位 */
    width: 100%;
    height: calc(100vh - 60px); /* 减去顶部导航栏的高度，确保容器填满剩余空间 */
    overflow: hidden;
}

.interaction-container {
    display: flex;
    justify-content: space-around;
    padding: 0 50px;
    position: relative;
    z-index: 2;
}

/* 2. 左右侧区域的基础样式 */
.side-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* transform 能够强制让元素脱离 Flex 限制进行位移 */
}

.left-side {
    margin-top: 85px; 
    /* 尝试加大数值测试，比如 translateX(-100px)，看是否有明显跳动 */
    transform: translateX(-80px); 
}

.right-side {
    margin-top: -12.5px; 
    transform: translateX(-135px); 
}
/* 4. 按钮文字样式：保持透明背景 */
.custom-btn {
    background: transparent;
    border: none;
    font-family: 'Noto Serif SC', serif;
    font-size: 18px;
    font-weight: bold;
    color: #5c4b3a;
    cursor: pointer;
    padding: 10px 40px;
    outline: none;
    /* 这个 margin-bottom 也会撑开空间，如果不需要文本框太靠下可以减小它 */
    margin-bottom: 30px; 
}
/* 5. 正文文本框样式（清除之前的背景，作为容器） */
.text-box {
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease;
    /* 关键：让内部的 p 标签紧密排列 */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 默认左对齐 */
}

/* 专门针对右侧的文字容器进行下移 */
.right-side .text-box {
    margin-top: -10px;  /* 数值越大，三段文字整体离按钮越远 */
}

/* 专门针对左侧的文字容器进行下移 */
.left-side .text-box {
    margin-top: -10px;  /* 数值越大，三段文字整体离按钮越远 */
}

/* 6. 核心修改：让背景框“连起来” */
.text-box p {
    background-color: rgba(255, 255, 255, 0.7); /* 半透明白底 */
    padding: 10px 20px;                          /* 缩小上下内边距 */
    margin-bottom: 0;                            /* 彻底消除段落间距，让框连起来 */
    color: #462d06;
    font-size: 16px;
    line-height: 1.8;
    text-indent: 2em;
    /* 关键：去掉圆角，只在最顶和最底保留圆角 */
    border-radius: 0; 
}

/* 给第一段顶部加圆角，最后一段底部加圆角，形成一个整体框 */
.text-box p:first-child {
    border-radius: 15px 15px 0 0;
    padding-top: 20px;
}
.text-box p:last-child {
    border-radius: 0 0 15px 15px;
    padding-bottom: 20px;
}

/* 7. 精细调节每一段的宽度和位置（此时背景会随宽度自动变化） */

/* 左侧三段 */
.left-side .text-box p { 
    width:85%;
    margin-left: 50px; 
    margin-top: 0px; }

/* --- 右侧三段：阶梯式宽度精准控制 --- */

/* 统一设置右侧所有段落的左对齐线，确保左侧是直的 */
.right-side .text-box p {
    margin-left: 33px;   /* 统一改为0，或者统一一个数值 */
    margin-right: 17px; 
    margin-top:-10px;
}

/* 第一段：最窄 */
.right-side .text-box p:nth-child(1) { 
    width: 40%; 
}

/* 第二段：中等宽度，并加上右上圆角 */
.right-side .text-box p:nth-child(2) { 
    width: 120%;         /* 从 125% 调低到 75% 即可收窄 */
    border-top-right-radius: 15px;
    margin-top:0px;
}

/* 第三段：最宽（但不要超过100%），同样加上右上圆角 */
.right-side .text-box p:nth-child(3) { 
    width: 120%;         /* 收窄到 95% 避免溢出 */
    margin-top:0px;
}

.next-page-btn {
    position: absolute; 
    bottom: 35px; /* 距离 content-wrapper 底部 50px */
    right: 115px; /* 距离 content-wrapper 右侧 100px */
    z-index: 10;

    
    display: block;
    width: 150px;
    height: 50px;
    line-height: 50px; /* 文字垂直居中 */
    text-align: center;
}

.content-wrapper {
    position: relative;
    width: 100%;
    /* 确保容器高度不超过浏览器可视区域 */
    height: calc(100vh - 60px); 
    
    /* 核心：强制隐藏所有溢出的内容，彻底消除滑动键 */
    overflow: hidden; 
}