:root {
	--tag-bg: rgb(110, 46, 46);
	--radius: 7px; /* 全局圆角 */
	--shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 全局阴影 */
    --gap: 15px;
    --gap-larger: 30px;
}

.dark {
	--tag-bg:rgb(144, 169, 214);
	--shadow: 0 4px 6px rgba(255, 255, 255, 0.1);
}




/* 漫画墙网格布局 */
.manga-grid {
    max-width: 1200px;
    margin: var(--gap);
    padding: var(--gap);
}
  
.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 一行 4 列 */
    gap: var(--gap-larger); /* 网格间距 */
    justify-content: center; /* 居中对齐整个网格 */
}
  
.grid-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* 内容水平居中 */
    text-align: center;
    transition: transform 0.3s ease;
}

.grid-item h3 {
    margin-top: var(--gap);
    font-size: 15px;
    word-wrap: break-word;
    color: var(--content);
    
}
  
.grid-item:hover {
    transform: scale(1.05);
  
}
  
.grid-item img {
    width: 100%; /* 封面图片宽度占满网格单元 */
    max-width: 150px; /* 最大宽度为 150px */
    height: auto; /* 按比例调整高度 */
    border-radius: var(--radius); /* 圆角样式 */
    margin: 0 auto; /* 居中对齐 */
    transition: transform 0.3s ease; /* 鼠标悬停效果 */
}
  
.grid-item img:hover {
    transform: scale(1.05); /* 悬停时略微放大图片 */
    box-shadow: var(--shadow);
}

/* Tags 样式 */
.tags-filter {
    display: flex; /* 使用 flexbox 布局 */
	justify-content: center; /* 水平居中 */
	gap: var(--gap); /* 按钮之间的间距 */
	margin-top: var(--gap); /* 设置顶部的间距 */
	margin-bottom: var(--gap); /* 设置底部距离 */
	flex-wrap: wrap; /* 小屏幕自动换行 */
}

.tag-btn {
  font-family:'Huiwen-mincho';
  padding: 5px 10px;
  margin: 3px;
  border: 2px solid var(--border-color);
  background: var(--texture) repeat, var( --secondary);
  background-size: cover;
  color: var( --tertiary);
  cursor: pointer;
  border-radius: var(--radius);
  font-size: 15px;
  transition: background-color 0.3s ease;
}

.tag-btn.hover,
.tag-btn.active {
    background-color: var( --tag-bg);
	transform: translateY(-2px);
  	box-shadow: var(--shadow);
}


/* 隐藏未筛选的漫画 */
.manga-item {
    display: none;
}

.manga-item.visible {
    display: block;
}

  

/*漫画具体页面*/
.manga-detail {
    max-width: 1200px;
    margin: 0 auto;
  
}
  
.post-header {
    text-align: left; /* 标题左对齐 */
    margin-bottom: 30px; /* 与下面内容拉开距离 */
}


.manga-pages {
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;
    justify-content: center;
}
  
.manga-page {
    display: flex; /* 让图片在容器中居中 */
    justify-content: center;
    align-items: center;
    width: 100%; /* 为每个容器设置固定宽度 */
    height: auto; /* 根据内容高度自动调整 */
}


.manga-page img {
    width: 100%;
    margin: 5px;
    max-width: 100%;
}
  
@media screen and (max-width: 1280px) {
	.grid {
        grid-template-columns: repeat(3, 1fr); /* 每行显示2列 */}
}

@media screen and (max-width: 860px) {
	.grid {grid-template-columns: repeat(2, 1fr); /* 每行显示2列 */}
    
}