body{
    background-color: #eee7df;
}

.first {
    padding: 30px;
    background-color: #f1e2d0;
    margin: 30px 20px 0 20px;
    text-align: center;
    font-size: clamp(1rem, 5.5vw, 6.5em);
    border: 8px solid #7a5a3a;
    box-shadow: inset 0 0 0 4px #b8956a;
}
.main-title {
    font-family: "华文隶书", "STLiti", "LiSu", "隶书", serif;
    direction: rtl;
    unicode-bidi: bidi-override;
    white-space: nowrap; 
}
.introduction {
    font-size: 0.4em;
    font-family: "华文隶书", "STLiti", "LiSu", "隶书", serif;
    direction: rtl;
    unicode-bidi: bidi-override;
    
}
.second,
.forth{
    display: flex; 
    flex-direction: row-reverse;
    padding: 0;
    margin: -6px 20px 0 20px;
    border: 8px solid #7a5a3a;
    box-shadow: inset 0 0 0 8px #b8956a;
    font-size: 2em;
    text-align: center;
    background-color: #f1e2d0;
}
.board{
    font-family: "华文隶书", "STLiti", "LiSu", "隶书", serif;
    writing-mode: vertical-rl; 
    text-orientation: upright;
    font-size: 1.5em;
    background-color: #b8956a;
    margin-left: 10px;
    min-height: 200px; 
}
.shelf-scroll{
    writing-mode: vertical-rl; 
    text-orientation: upright;
    overflow-x: auto;
}
.shelf-scroll::-webkit-scrollbar {
    height: 8px;
}
.shelf-scroll::-webkit-scrollbar-thumb {
    background: #7a5a3a;
    border-radius: 4px;
}
.shelf-scroll::-webkit-scrollbar-track {
    background: #b8956a;
}
.book{
    font-family: "华文隶书", "STLiti", "LiSu", "隶书", serif;
    writing-mode: vertical-rl; 
    text-orientation: upright;
    margin: 10px;
    padding: 7px 0 13px 2px;
    box-shadow: 
        inset 2px 0 4px rgba(0,0,0,0.15),   /* 右侧暗边，模拟装订凹陷 */
        inset -2px 0 4px rgba(255,255,255,0.2), /* 左侧亮边，模拟纸张反光 */
        2px 0 6px rgba(0,0,0,0.1);            /* 外部投影，让书浮起来 */
    background: 
    linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.25) 6%, 
                    transparent 6%, transparent 94%, 
                    rgba(0,0,0,0.25) 94%, rgba(0,0,0,0.25) 100%),
    #eee7df;
    height: 180px;          /* 固定高度 */
    overflow: hidden;       /* 防止溢出 */
    word-break: break-all;  /* 允许在任意字符处换行（竖排下就是换列） */
    line-height: 1.2;       /* 调整行距，控制每列高度 */
    cursor: pointer;
}

.third {
    display: flex;
    margin: -6px 20px 0 20px;
    min-height: 200px;
    font-size: 2em;
}
.third-section {
    display: flex;
    flex-direction: row-reverse;
    background-color: #f1e2d0;
    border: 8px solid #7a5a3a;
    box-shadow: inset 0 0 0 4px #b8956a;
    flex: 1;
    overflow: hidden;
}
.section-left {
    flex: 4;
}
.section-right {
    flex: 6;
}

/* ===== 第五层 #archive：双列书脊（仅覆盖差异） ===== */
#archive {
    display: flex;
    flex-direction: row-reverse;
    padding: 0;
    margin: -6px 20px 0 20px;
    border: 8px solid #7a5a3a;
    box-shadow: inset 0 0 0 8px #b8956a;
    font-size: 2em;
    text-align: center;
    background-color: #f1e2d0;
    min-height: 200px;
}
#archive .board {
    flex: 0 0 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;          /* 保留与通用 .board 一致的间距 */
    min-height: 200px;          /* 保持高度一致 */
}
/* shelf-scroll：让书脊横向流动（其余继承自 .shelf-scroll） */
#archive .shelf-scroll {
    display: flex;
    flex-direction: column;     /* 在 vertical-rl 下让书水平并排排列 */
    overflow-y: hidden;
    flex: 1;
    padding: 0 6px;
}
/* book：改为横向并排（内容与日期左右分布） */
#archive .book {
    display: flex;
    flex-direction: column;     /* 在 vertical-rl 下 = 从左到右排列（日期在左，内容在右） */
    align-items: center;
    justify-content: center;
    height: 240px;
    width: auto;
    margin: 10px 6px;
    padding: 4px 2px;           /* 稍收窄内边距，适应两列 */
    flex-shrink: 0;
    word-break: normal;
    /* box-shadow 和 background 完全继承自通用 .book，无需重写 */
}
/* 内容与日期：竖排、居中，允许语义换行 */
#archive .book-content,
#archive .book-date {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: "华文隶书", "STLiti", "LiSu", "隶书", serif;
    white-space: normal;        /* 关键：允许换行，不再强制单列 */
    word-break: keep-all;       /* 关键：中文/数字词组不被拆散，只在词间换行 */
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;             /* 改为自动尺寸，不再拉伸占满空间 */
    padding: 0 2px;
    color: #2d1b0e;
}
/* 日期：在左侧，字号稍小、半透明，右侧加分隔线 */
#archive .book-date {
    font-size: 0.55em;
    opacity: 0.6;
    border-right: 1px solid rgba(0,0,0,0.1);   /* 分隔线在右侧（内容一侧） */
    padding-right: 4px;
}