body {font-family: "Microsoft YaHei", "SimSun", sans-serif;font-size:16px;line-height:1.6;color:#333;background-color:#f5f5f5;}
html {box-sizing: border-box;}*, *::before, *::after {box-sizing: inherit;}
body,h1,h2,h3,h4,p,ul,ol,li,dl,dt,dd,figure,blockquote,fieldset,legend,header,nav,main,article,section,aside,footer,img,video,audio,svg{margin: 0;padding: 0;}
button {-webkit-tap-highlight-color: transparent;}
button:focus-visible {outline: 2px solid #044091;outline-offset: 2px;}
ul, ol, li, dl {list-style: none;}
img,video,audio,svg {max-width: 100%;height:auto;border:0;display: block;}
:focus-visible {outline: 2px solid #044091;outline-offset: 2px;}
a {color: #333;text-decoration: none;}
a:hover {color: blue;}
a:focus-visible {outline: 2px solid #044091;outline-offset: 2px;}
a, a:hover, a:active {-webkit-tap-highlight-color: transparent;}

:root { 
/* 字体大小变量 */ 
--font-size-title: 1.5rem;
--font-size-body: 1.1rem;
--font-size-md: 0.9rem;
--font-size-sm: 0.8rem;

/* 颜色变量（可选） */
--color-primary: #333;
--color-secondary: #555;
--color-tertiary: #777;
--bg-secondary: #f5f5f5;
--color-brand: #c80000;
--color-a: #044091;   
--color-card: #fff;
--border-color: rgba(0, 0, 0, 0.1);

--max-width: 1200px;
--base-gap:1rem;
--base-gap-sm:0.5rem;
--base-gap-big:1.5rem;
--radius-sm: 4px;
--radius-md: 8px;
--box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/*通用属性*/
.card{
	position: relative;
	max-width: 100%;
	padding: var(--base-gap-big);
	background-color: var(--color-card);
	border-radius: var(--radius-md);
	box-shadow: var(--box-shadow);
	line-height: 1.8;
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.sticky{
	position: sticky;
	top: 136px;
	z-index: 10;
}
.link {
	color: var(--color-a);
	transition: color 0.2s;
}
cite {
  font-style: normal;
}
.prompt{
	font-size: var(--font-size-sm);
	color: var(--color-secondary);
}
.module-header{
	padding-bottom: var(--base-gap-big);
	margin-bottom: var(--base-gap);
	border-bottom: 1px solid var(--border-color);	
}
.page-header{
	line-height: 1;
}
.relevant-content .module-header{
	margin-bottom: var(--base-gap-big);
}
.title{
	font-size: var(--font-size-title);
	line-height: 1;
}
/* text-content */
.text-content{
	font-size: var(--font-size-body);
	text-align: justify;
	text-justify: inter-character;
	hyphens: auto;
    position: relative;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.text-content p{
	padding: 0.5em 0;
	font-size: var(--font-size-body);
}
.text-content a{
    	color: var(--color-a);
}
.text-content a:hover{
    	color: blue;
}
.text-content h2{
	font-size: 1.17em;
}
/* text-content end */

.skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: #0056b3;
	color: white;
	padding: 8px 16px;
	z-index: 100;
	text-decoration: none;
	border-radius: 0 0 4px 0;
	transition: top 0.3s;
}
.skip-link:focus {
	top: 0;
	outline: 2px solid #fff;
	outline-offset: -2px;
}

/* tab*/
.tab-content {
	display: none;
}
.tab-content.active {
	display: block;
	animation: fadeIn 0.5s ease;
}
.tab-header{
	display: flex;
  	justify-content: space-between; 
	padding-bottom: var(--base-gap-big);
	margin-bottom: var(--base-gap-big);
	border-bottom: 1px solid var(--border-color);	
}
.content-list-title{
	position: relative;
	max-width: 100%;
	padding: var(--base-gap-big);
	background-color: var(--color-card);
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	box-shadow: var(--box-shadow);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	font-size: var(--font-size-title);
	line-height: 1;
}
.content-list section ,.content-list article{
	margin-bottom: var(--base-gap);
}
.content-list section:first-of-type{
	border-radius: 0 0 var(--radius-md) var(--radius-md);
}



.index-header-nav{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--base-gap);
}
.index-header-nav .tab-btn{
	position: relative;
	padding: 0.4rem 0.75rem;
	border: none;
	cursor: pointer;
	font-size: 0.8rem;
	line-height: 1;
	color: var(--color-primary);
	border-radius: 12px;
	border: 1px solid var(--border-color);
	margin-top: -4px;
	background-color: var(--bg-secondary);
}
.tab-headers .tab-btn{
	background-color: var(--bg-secondary);
} 
.index-header-nav .active{
	color: var(--color-card);
	background-color: var(--color-brand);
	border: none;
}
.index-header-nav .active{
	color: var(--color-card);
	background-color: var(--color-brand);
	border: none;
}
.index-header-nav .active::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--color-brand);
}
.index-header-nav .tab-btn:not(.active):hover{
	background-color: #e9ecef;
	border-color: #ced4da;
}
/* tab end*/

/*排版布局*/
#main-content{
	max-width: var(--max-width);
	margin: 0 auto;
	margin-bottom: var(--base-gap);
}
.main{
	display: grid;
	grid-template-columns: 2.5fr 1fr;
	gap: var(--base-gap);
	align-items: start;
}
.container {
	display: flex;
	flex-direction: column;
	gap: var(--base-gap);
}
.relevant-content {
	height: fit-content;
}
.relevant-content section{
	margin-bottom: var(--base-gap);
}
/*排版布局 end*/

/*组件模块*/

/* site-header */
.site-header{
	max-width: 100%;
	position: sticky;
	top: 0;
	z-index: 110; 
	background-color: var(--color-card);
	margin-bottom: var(--base-gap);
	box-shadow: var(--box-shadow);
}
.site-header-top{
	position: relative;
	display: flex;
	justify-content: space-between;
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--base-gap) 0;
}
.site-logo {
	background-image: url('../img/logo.gif'); 
	background-repeat: no-repeat;
	background-size: contain; 
	width: 100%;
	height: 2.75rem;
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
}
.logo-icon{
	display: block;
	height: 2.75rem;
	object-fit: contain;
	flex-shrink: 0;
}
.search-shell{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 50%;
	height: 2.75rem;
	cursor: pointer;
	background-color: #F0F0F0;
	border-radius:22px;
}
.search-text{
	outline: none;
	border:none;
	background: initial;
}
.search-button{
	padding: 0 1.25rem;
    border:none;
    background: initial;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    color: var(--color-brand);
    border-left: 1px solid var(--color-brand);
}
.site-nav-top{
	/*background-color: #C80000;*/
	/*background-color: #C12C2C;*/
	/*background-color: #B30E15;*/
	/*background-color: #800020;*/
	background-color: #C62828;
}
.site-nav-ul {
	display: flex;
}
.site-nav-li{
	position: relative;
}
.site-nav-ul a{
	color: var(--color-card);
	font-size: var(--font-size-body);
}
/* site-header end */

/* site-footer */
.site-footer{
	width: 100%;
	color: white;
	text-align: center;
	font-size: var(--font-size-sm);
	background-color: #414141;
	padding: var(--base-gap);
}
.site-footer a{color: white;}
.site-footer span{margin: 0 var(--base-gap-sm);}
/* site-footer end */

/* breadcrumb */
.breadcrumb {
	font-size: var(--font-size-md);
	color: var(--color-tertiary);
	margin-bottom: var(--base-gap);
}
.breadcrumb a{
	color: var(--color-tertiary);
}
.breadcrumb .separator {
    margin: 0 var(--base-gap-sm);
    color: var(--color-tertiary);
}
/* breadcrumb end */

/* album */
.album{
	display: flex;
	align-items: center;
	gap: var(--base-gap);
	margin-bottom: var(--base-gap);
}
.album-link{
	display: flex;
	align-items: center;
	gap: var(--base-gap);
}
.album-image{
	width: 100px;
	height: 133px;
	border-radius: var(--radius-md);
	background-color: var(--bg-secondary);
	object-fit: cover;
}
.album-data {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
  height: 133px; 
}
.album-name{
    font-size: var(--font-size-title);
}
.album-subtitle{
	font-size: var(--font-size-sm);
	color: var(--color-tertiary);
}
.album-info{
	margin-top: auto;
	font-size: var(--font-size-sm);
	color: var(--color-tertiary);
}
/* album end */

/* author */
.author,.header-author-link{
	display: flex;
	align-items: center;
	gap: var(--base-gap);
	margin-bottom: var(--base-gap);
}
.author-image{
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-color:var(--bg-secondary);
	object-fit: cover;
}
.author-name{
    font-size: var(--font-size-title);
    font-weight: 700;
}
.author-achievement{
    font-size: var(--font-size-sm);
    color: var(--color-brand);
    font-weight: 400;
}
.author-info{
	font-size: var(--font-size-sm);
	color: var(--color-tertiary);
}

.author-list{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--base-gap) var(--base-gap-big);
}
.author-item{
	min-width: 0;
	overflow: hidden;
	padding-bottom: var(--base-gap);
	border-bottom: 1px dashed var(--border-color);
}
.author-link{
	display: flex;
	flex-direction: column;
}
.i-author-name{
	font-size: var(--font-size-body);
	font-weight: 400;
}
.i-author-desc{
	font-size: var(--font-size-sm);
	color: var(--color-tertiary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* author end */

/* theme */
.theme{
	display: flex;
	align-items: center;
	gap: var(--base-gap);
}
.theme-image{
	width: 80px;
	height: 80px;
	border-radius: 15%;
	background-color:var(--bg-secondary);
	object-fit: cover;
}
.theme-name{
    font-size: var(--font-size-title);
}
.page-header .theme-name{
	margin-bottom: 0.75rem;
}
.theme-subtitle{
	font-size: var(--font-size-sm);
	color: var(--color-tertiary);
}
.theme-nav{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 1px solid var(--border-color);
	/*padding-top: var(--base-gap-big);*/
}
.theme-nav .tab-btn{
	position: relative;
	border: none;
	cursor: pointer;
	background-color: transparent;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--color-secondary);
	transition: all 0.3s ease;
}
.theme-nav .tab-btn:hover {
	/*color: var(--color-a);*/
}
.theme-nav .active {
	color: var(--color-brand);
	font-weight: 700;
}
.theme-nav .active::after {
	content: "";
	position: absolute;
	bottom: -12px; 
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid var(--color-brand);
}
.theme-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.theme-link{
  display: inline-block;
  padding: var(--base-gap-sm) var(--base-gap);
  font-size: var(--font-size-sm);
  background-color: var(--bg-secondary);
  border-radius: 2rem;
  transition: all 0.3s ease;
  border: 1px solid var(--border-color);
  line-height: 1;
  color: var(--color-secondary);
}
.theme-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 5px var(--border-color);
}
.i-theme-grid{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-gap: 0.75rem;
}
.i-theme-item{
	min-width: 0;
	overflow: hidden;
	background-color: var(--bg-secondary);
	border-radius: 8px;
}
.i-theme-link{
	padding: 0.5rem 0.75rem;
	display: flex;
	flex-direction: column;

}
.i-theme-item-name{
	font-size: var(--font-size-body);
	font-weight: 400;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.i-theme-item-desc{
	font-size: var(--font-size-sm);
	color: var(--color-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* theme end */

/* poem */
.poem-header-shell {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: nowrap;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	gap: var(--base-gap-big);
}
.poem-header {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}
	/* poem-state */
	.poem-state-list {
		display: flex;
		flex: 0 0 auto;
		flex-wrap: nowrap;
		gap: var(--base-gap-sm);
		margin-top: 0.15rem;
	}
		.poem-btn {
			position: relative;
			padding: 0.5rem 0.75rem;
			border-radius: var(--radius-sm);
			border: 1px solid var(--border-color);
			background-color:var(--bg-secondary);
			font-size: var(--font-size-md);
			color: var(--color-secondary);
			line-height: 1;
			cursor: pointer;
			transition: all 0.2s ease;
		}
		.poem-btn.current {
			background-color: var(--color-brand);
			color: white;
			border-color: var(--color-brand);
		}
		.poem-btn.current::after {
		    content: "";
		    position: absolute;
		    bottom: -6px;
		    left: 50%;
		    transform: translateX(-50%);
		    width: 0;
		    height: 0;
		    border-left: 6px solid transparent;
		    border-right: 6px solid transparent;
		    border-top: 6px solid var(--color-brand);
		}
		.poem-btn:not(.current):hover {
			background-color: #e9ecef;
		}
	/* poem-state end */
.poem-title{
	font-size: var(--font-size-title);
	line-height: 1.5;
	margin-bottom: 0.25rem;
}
.poem-meta {
	margin-bottom: var(--base-gap-sm);
}
.poem-dynasty{
	font-size: var(--font-size-md);
	color: var(--color-tertiary);
}
.poem-author{
	font-size: var(--font-size-md);
	color: var(--color-tertiary);
}
.poem-headers .poem-title{
	color: var(--color-a);
}
.poem-headers .poem-link:hover .poem-title {
    color: blue;
}
.poem-headers .poem-dynasty ,.poem-headers .poem-author{
	color: var(--color-brand);
}
.poem-content {
	font-size: var(--font-size-body);
}
.poem-content h2 , .poem-content h3{
	font-size: 1.3rem;
	margin: 0.75rem 0;
}
.appreciation{
	margin: 0.75rem 0;
}
.preface{
	padding:var(--base-gap);
	background-color: var(--bg-secondary);
	font-size:var(--font-size-md);
	color: var(--color-secondary);
	border-radius: var(--radius-md);
}
.original {
	margin: 0.75rem 0;
}
.original sup{
	color: #8d4e00;
	font-size: 12px;
}
.paraphrase{
	display: flex;
	flex-direction: column;
	gap: var(--base-gap-sm);
	position: relative;
	border-radius: var(--radius-md);
	padding: var(--base-gap);
	background-color: var(--bg-secondary);
}
.paraphrase::after {
	content: "";
	position: absolute;
	top: -12px;
	left: 2rem;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	border-bottom: 12px solid var(--bg-secondary);
}
.translate{
	font-size: 1rem;
	color: #3a6e3a;
	margin-bottom: var(--base-gap-sm);
}
.note{
	font-size: 1rem;
	color: #8d4e00;
}
.note span{

}
.annotated {
	position: relative;
	cursor: pointer;
	border-bottom: 1px dashed #333;
}
.annotated:hover{
	color: var(--color-a);
	border-color: var(--color-a);
}
.annotation {
	display: none;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--color-primary);
	color: var(--color-card);
	padding: 8px 12px;
	border-radius: var(--radius-md);
	font-size: var(--font-size-md);
	min-width: 120px;
	max-width: 300px;
	width: max-content;
	text-align: center;
	margin-top: 10px;
	z-index: 10;
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);
	white-space: normal;
	word-wrap: break-word;
}
.annotation:after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -6px;
	border-width: 6px;
	border-style: solid;
	border-color: transparent transparent var(--color-primary) transparent;
}
.annotated.active .annotation {
	display: block;
}
/* 拼音 */
        .poem-line {
            font-size: 20px;
            margin: 15px 0;
            line-height: 2.5;
        }
        ruby {
  display: inline-flex;   /* 启用Flex布局 */
  flex-direction: column-reverse; /* 拼音在上 */
  align-items: center;    /* 居中 */
  line-height: normal;    /* 重置行高 */
        	/*display: inline-block;*/
            ruby-position: over;
            ruby-align: center;
            margin-right: 0.1em;
contain: content;
will-change: min-height; /* 提示浏览器提前优化 */
        }
        rt {
        	min-width: 2.8em;
			line-height: 1.1;
            font-size: 0.6em;
            text-align: center;
            color: var(--color-brand);
            letter-spacing: 0;
        }
.punctuation {
    display: inline-block;
    vertical-align: top; /* 关键属性 */
    margin: 0 0.1em; /* 微调间距 */
    position: relative;
    top: 1rem;
}
        
.pinyinContson {
	clear: both;
	overflow: hidden;
	margin-bottom: var(--base-gap);
}
.poem-header .pinyinContson:first-child {
	margin-bottom: 0;
}
.pinyinContson span {
    text-align: center;
    display: inline-block;
}
.pinyinContson .pinyin {
    clear: both;
    line-height: 160%;
    font-size: 12px;
    font-weight: normal;
    float: left;
    width: 36px;
}
.pinyinContson .symbol {
    clear: both;
    line-height: 160%;
    font-size: 12px;
    font-weight: normal;
    float: left;
    width: 36px;
}
.pinyinContson .hanzi {
    clear: both;
    text-align: center;
    float: left;
    font-size: 22px;
    height: 36px;
    width: 36px;
    line-height: 36px;
    text-align: center;
    background: url(https://static.shihuapp.com/images/bigImgbk.png) no-repeat 2px;
    background-size: 32px 32px;
    font-family: KaiTi;
}
/* 拼音 end */
.poem-relevant-content{
	display: grid;
	gap: var(--base-gap);
}
/* poem end */

/* tool */
	.tool { 
		position: relative;
		display: flex;
		justify-content: space-around;
		margin-top: var(--base-gap);
		padding-top:2.5rem;
	}
	.tool::after {
		position: absolute;
		top: 0;
		left: 0;
		content: "";
		display: block;
		width: 100%;
		flex-shrink: 0;
		height: 1px;
		background: linear-gradient(90deg, transparent, var(--border-color), transparent);
		margin-top: var(--base-gap);
	}
	.tool-option {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: var(--base-gap-sm) 2rem;
		background-color: transparent;
		border: none;
		cursor: pointer;
		transition: all 0.2s ease;
	}
	.icon {
		width: 1.5rem;
		height: 1.5rem;
		display: inline-block;
		vertical-align: middle;
/*		fill: currentColor;*/
		transition: fill 0.3s ease;
		fill: var(--color-primary);
	}
	.tool-name {
		font-size: var(--font-size-sm);
		color: var(--color-tertiary);
		white-space: nowrap;
	}
	.tool-option:hover {
		transform: translateY(-2px);
	}
	.tool-option:hover svg ,.tool-option.on svg{
	  fill: var(--color-brand);
	}
	.tool-option:hover span ,.tool-option.on span{
	  color: var(--color-brand);
	}
	.play_audio{
		position: relative;
		position: fixed; 
		bottom: 0; left: 0; right: 0; 
		background: white; 
		padding: var(--base-gap-sm) var(--base-gap); 
		box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 1000;
		border-top: 1px solid #000;
	}
	.play_audio .close-button{
		position: absolute;
		top: -31.6px;
		right: 10px;
		border: none;
		cursor: pointer;
		/*width: 70px;*/
		height: 32px;
		background-color: white;
		border: 1px solid #000;
		border-bottom: none;
		border-radius: 8px 8px 0 0;
		font-size: 14px;
		color: var(--color-primary);
		padding: 0 1rem;
		font-weight: 700;
		z-index: 2
	}

/* tool end */

/* references */
.references{
	margin-top: var(--base-gap);
	padding-top: var(--base-gap);
	border-top: 1px solid var(--border-color);
}
.references-title{
	font-size: var(--font-size-md);
	color: var(--color-tertiary);
	margin-bottom: 0.25rem;
}
.references-list{
  display: flex;
  flex-direction: column;
  grid-gap: 0.25rem;	
}
.references-item{
	font-size: var(--font-size-sm);
	color: var(--color-tertiary);
}
/* references end */

/* poem 基本资料  */
.figure-shell{
	width: 100%;
	margin-bottom: var(--base-gap);
}
.metadata-heading {
	padding-bottom: var(--base-gap-big);
	border-bottom: 1px solid var(--border-color);
	font-size:  var(--font-size-title);
	margin-bottom: var(--base-gap-big);
	line-height: 1;
}
.metadata-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--base-gap);
}
.metadata-item {
	display: grid;
	grid-template-columns: auto 1fr;
	/*gap:  var(--base-gap);*/
}
.metadata-term{
	color: var(--color-tertiary);
	font-size: var(--font-size-md);
}
.metadata-value{
	font-size: var(--font-size-md);
}
/* poem 基本资料 end */

/* poem-works-list */
.poem-works-list{
	display: grid;
	gap:var(--base-gap-big);
	padding-top:var(--base-gap-big);
}
.poem-works-list-layout {
	position: relative;
    min-width: 0;
}
.line{
	z-index: 1;
    position: absolute;
    left: 0;
    top: 1rem;
    width: 100%;
	height: 1px;
	background: linear-gradient(
    	to right,
    	rgba(0, 0, 0, 0.4) 0%,
    	rgba(0, 0, 0, 0.4) 50%,
    	transparent 50% 
  	);
	background-size: 10px 1px; 
	background-repeat: repeat-x;
}
.poem-works-link {
	display: flex;
    justify-content: space-between;
    gap: var(--base-gap-sm);
    padding: var(--base-gap-sm) 0;
}
.works-name{
    font-size: var(--font-size-body);
    line-height: 1;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: var(--color-card);
    z-index: 2;
}
.works-author{
	font-size: 1rem;
    line-height: var(--font-size-body);
    color: var(--color-secondary);
    flex-shrink: 0;
    background-color: var(--color-card);
    z-index: 2;
}
/* poem-works-list end */

/* works-list */
.works-title{
	padding: var(--base-gap-sm) 0;
	font-size: 1.25rem;
}
.works-list{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--base-gap-sm);
}
.works-link{
	display: block;
	padding: 0.75rem ;
	background-color:var(--bg-secondary);
	font-size: var(--font-size-md);
	border-radius: var(--radius-md);
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* works-list end */

/* quick-navigation 快速导航 */
.quick-navigation{
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: var(--base-gap-big);
}
.quick-navigation-title{
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-secondary);
    padding: 1rem 0;
	font-size: 1.25rem;
	font-weight: 700;
    line-height: 1.2;
}
.quick-navigation-list{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap:var(--base-gap);
}
/* quick-navigation end */

/* 分页项样式 */
.pagination {
	display: grid;
	grid-template-columns:18.5% 80%;
	grid-gap: 1.5%;	
	direction: rtl;
}
.pagination-item{
	overflow: hidden;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-md);
	transition: all 0.3s ease;
}
.pagination-item:not([aria-current]):hover {
	transform: translateY(-2px);
	box-shadow: 0 2px 5px var(--border-color);
}
.pagination-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 3.5rem;
	color: var(--color-primary);
	font-size: var(--font-size-md);
}


.pagination-prev,
.pagination-next {
	padding: 0 var(--base-gap);
	background-color: white;
}
.pagination-link.disabled {
	color: var(--color-tertiary);
	pointer-events: none;
	background-color: var(--bg-secondary);
}
/* 分页项样式 end */

/* verse */
.verse-list{
	display: grid;
	gap: var(--base-gap);
}
.i-verse-list{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--base-gap) var(--base-gap-big);
}
.verse-item{
	padding-bottom: var(--base-gap);
    border-bottom: 1px dashed var(--border-color);
}
.verse-quote-text{
	font-size: var(--font-size-body);
	font-weight: 400;
	margin-bottom: 0.25rem;
}
.verse-quote-source{
	font-size: var(--font-size-sm);
	color: var(--color-tertiary);
}
.verse-header-title{
	font-size: 1.75rem;
	line-height: 1.5;
	margin-bottom:var(--base-gap);
}
.verse-meta {}
.verse-meta-h{
	padding: 0.2rem 0.4rem;
	font-size: var(--font-size-sm);
	color: var(--color-secondary);
	background: var(--bg-secondary);
	border-radius: var(--radius-sm);
	margin-right: 0.5rem;
}
.verse-meta p{
	padding: 0.5em 0;
	font-size: var(--font-size-body);
}
.verse-meta-term{
	font-weight: 700;
}
/* verse end */


/* 文章内容折叠*/
.text-content.expanded {
    max-height: none !important;
}
.fade-mask {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 4px;
}
.expand-all {
    background: #fff;
    border: 1px solid var(--border-color);
    padding: 5px 15px;
    border-radius: 15px;
    cursor: pointer;
    font-size: var(--font-size-md);
    color: var(--color-tertiary);
    box-shadow: 0 2px 5px var(--border-color);
    transition: all 0.2s ease;
}
.expand-all:hover {
    background: var(--bg-secondary);
    color: var(--color-primary);
}
/* 按钮箭头图标 */
.expand-all::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--color-tertiary);
    clip-path: polygon(50% 80%, 0% 0%, 100% 0%);
    margin-left: 8px;
	transition: transform 0.2s;
}
/* 展开状态箭头方向 */
.text-content.expanded .expand-all::after {
 	content: '▲';
}
.text-content.no-overflow .fade-mask {
    display: none;
}
/* 文章内容折叠 end */

/* hot-poem */
.hot-poem{
	display: grid;
	gap:var(--base-gap-big);
}
.i-hot-poem{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap:var(--base-gap-big);
}
.hot-poem-item{
	position: relative;
	padding-left: 14px;
	border-bottom: 1px dashed var(--border-color);
	padding-bottom: var(--base-gap-big);
	min-width: 0;
}
.hot-poem-item::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    width: 4px;
    height: 4px;
    background-color: #C80000;
}
.hot-poem-link{
	display: flex;
    justify-content: space-between;
    gap: var(--base-gap-sm);
}
.hot-poem-name{
    font-size: var(--font-size-body);
    line-height: 1;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hot-poem-author{
	font-size: 1rem;
	line-height: 1;
    flex-shrink: 0;
}
/* hot-poem end */

/* number */
.number{
	position: absolute;
	top: 0;
	left: 0;
	padding: 0 0.5rem;
	background-color: var(--bg-secondary);
	font-size: 12px;
	color: var(--color-secondary);
	border-radius: var(--radius-md) 0  var(--radius-md) 0;
}
/* number end*/

.references-marker{
	margin-right: 4px;
}
.xt{
	font-size: var(--font-size-sm);
	color: var(--color-tertiary);
	font-weight: normal;
}

/*弹出搜索页面*/
#searchOverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255);
	z-index: 1000;
	display: none;
	flex-direction: column;
	overflow-y: auto;
}
        .search-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            background-color: #f1f1f1;
            color: #333;
            font-size: 18px;
            position: sticky;
            top: 0;
            border-bottom: 1px solid #f1f1f1;
        }
		.search-logo {
			background-image: url('/template/pc/img/logo.gif'); 
			background-repeat: no-repeat;
			background-size: contain; 
			width: 150px;
			height: 30px;
			text-indent: -9999px;
			overflow: hidden;
			white-space: nowrap;
		}
        
        .search-main {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .search-options {
            display: flex;
            margin-bottom: 15px;
        }
        
        .search-option {
        	position: relative;
            padding: 8px 20px;
            margin-right: 10px;
            background-color: #f1f1f1;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .search-option.active {
            background-color: #C62828;
            color: white;
        }
		.search-option.active::after {
		    content: "";
		    position: absolute;
		    bottom: -7px;
		    left: 50%;
		    transform: translateX(-50%);
		    width: 0;
		    height: 0;
		    border-left: 8px solid transparent;
		    border-right: 8px solid transparent;
		    border-top: 8px solid var(--color-brand);
		}
        
        .search-form {
            display: flex;
            width: 100%;
            margin-bottom: 20px;
        }
        
        .search-input {
            flex: 1;
            padding: 12px 15px;
            font-size: 16px;
            border: 2px solid #C62828;
            border-radius: 4px 0 0 4px;
            outline: none;
        }
        
        .search-submit {
            padding: 0 20px;
            background-color: #C62828;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            font-size: 16px;
            cursor: pointer;
        }
        
        .search-submit:hover {
            background-color: #B71C1C;
        }
        
        .close-btn {
        	margin: 0;
        	padding: 6px 10px;
            background: none;
			border-radius:16px;
            border: 1px solid #333;
            cursor: pointer;
			display: flex;
  			justify-content: center;
  			align-items: center;
        }
        .icon-search-close{
        	padding-right: 10px;
        	margin-right: 10px;
        	border-right: 1px solid #333;
        	font-size: 15px;
        	line-height: 1;
        	color: #333;
        }
		.icon-search {
			width: 16px;
			height: 16px;
			display: inline-block;
			vertical-align: middle;
			transition: fill 0.3s ease;
			fill: white;
		}
		
        .search-suggestions {
            margin-bottom: 20px;
        }
        
        .suggestion-title {
            color: #666;
            margin-bottom: 10px;
            font-size: 14px;
        }
        
        .suggestion-item {
            display: inline-block;
            margin-right: 8px;
            margin-bottom: 8px;
            padding: 4px 12px;
            background-color: #eee;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
        }
        
        .suggestion-item:hover {
            background-color: #ddd;
        }
        
        .search-results {
            margin-top: 10px;
            border-top: 1px solid #eee;
            padding-top: 20px;
        }
        
        .result-title {
            font-size: 18px;
            margin-bottom: 15px;
            color: #333;
        }
        
        .result-item {
            padding: 12px;
            margin-bottom: 12px;
            background-color: #f9f9f9;
            border-radius: 4px;
            border-left: 3px solid #C62828;
        }
        
        .result-item h3 {
            margin-bottom: 6px;
            color: #333;
            font-size: 16px;
        }
        
        .result-item p {
            color: #666;
            line-height: 1.5;
            font-size: 14px;
        }
        
        .result-item em {
            color: #888;
            font-size: 13px;
        }
        
        .loading {
            display: none;
            text-align: center;
            padding: 20px;
            color: #666;
        }
        
        .no-results {
            text-align: center;
            padding: 30px;
            color: #888;
        }
/*弹出搜索页面end*/

/* PC端布局  */
@media (min-width: 768px) {
	.site-nav-ul {
		margin: 0 auto;
		max-width: var(--max-width);
		height: 2.75rem;
		line-height: 2.75rem;
	}
	.site-nav-li a{
		display: inline-block;
		width: 88px;
		line-height: 2.75rem;
		text-align: center;
	}
	.site-nav-ul .current{
		background-color: #8E0000;
	}
	.site-nav-li:not(.current):hover{
		background-color: #B71C1C;
		transition: background-color 0.2s;
	}
	.breadcrumb {
		margin: 0 auto var(--base-gap) auto;
		max-width: var(--max-width);
	}
}
/* 移动端布局  */
@media (max-width: 767px) {
	.site-header{
		padding: 0.75rem 0 var(--base-gap) 0;
	}
	.site-header-top{
		padding: 0;
		margin: 0 var(--base-gap) var(--base-gap);
	}
	.site-logo{
		position: absolute;
		top: 0.65rem;
		left: 0.75rem;
		height: 1.75rem;
	}
	.search-shell{
		width: 100%;
		height: 3rem;
		background-color: initial;
		border: 2px solid #C80000;
		border-radius:12px;
		z-index: 2;
	}
	.site-nav-top{
		background-color: initial;
	}
	.site-nav-ul{
		width: 100%;
		height: auto;
		line-height: 1;
	}
	.site-nav-li{
		flex: 1;
		text-align: center;
	}
	.site-nav-ul a{
		color: var(--color-secondary);
	}
	.site-nav-ul .current::after {
	    content: "";
	    position: absolute;
	    bottom: -8px;
	    left: 50%;
	    transform: translateX(-50%);
	    width: 20px;
	    height: 2px;
	    background-color: var(--color-brand);
	}
	.site-nav-ul .current a{
		font-weight: 700;
		color: var(--color-primary);
	}
	.main {
		grid-template-columns: 1fr;
	}
	.sticky{
		position: static;
	}
	.pc{
		display: none;
	}
	.poem-header-shell {
	    padding-top: 3.25rem;
	}
	.poem-state {
		position: absolute;
	    top: 0;
	    left: 0;
	    z-index: 100;
	    margin-top: 0;
	}
	.theme-link {
	  padding: 0.75rem 1.1rem;
	  font-size: var(--font-size-md);
	}
	.quick-navigation-list{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.i-hot-poem{
		grid-template-columns: none;
	}
	.i-verse-list{
		grid-template-columns: none;
	}
	.author-list{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.i-theme-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.punctuation {
		transform: translateY(-30%);
	}
	.metadata-term{
		color: var(--color-tertiary);
		font-size: var(--font-size-body);
	}
	.metadata-value{
		font-size: var(--font-size-body);
	}
	.play_audio{
		padding-bottom: 1rem;
	}
	.tab-headers{
	  	/*padding: var(--base-gap-sm) 0.5rem;*/
	}
	.prompt{
	padding: 0 var(--base-gap-sm);
	}
}

/* 超小设备 (手机, 小于576px) */
@media (max-width: 575.98px) {
	.tool-option {
		padding: var(--base-gap-sm) 1rem;
	}
	.pagination {
		display: grid;
		grid-template-columns:22% 75%;
		grid-gap: 3%;	
	}
}