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

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


/* 照片区域整体容器 */
.gallery-photos{
	width:100%;
}


/* 照片容器 */
.gallery-photo {
    width: 24.9%; 
    position: relative;
	display: none; 
}

.gallery-photo.visible {
    display: block;
	visibility: visible;
    animation: fadeIn 0.5s ease-in-out;
}

/* 图片样式 */
.gallery-photo img{
	display: block;
	width: 100%;
	padding: 5px;
	cursor: pointer;
	transition: all .3s ease-in-out;/* 动画效果 */
}


.gallery-photo.visible{
	visibility: visible;
	animation: fadeIn 2s;
}


/* 鼠标悬停的缩放和阴影变化 */
.gallery-photo:hover {
	transform: translateY(-2px); /* 悬浮时微微向上 */
	box-shadow: var(--shadow); /* 增强阴影效果 */
}
  
/* 鼠标悬停时图片缩放 */
.gallery-photo:hover img {
	transform: scale(1.05); /* 微缩放效果 */
	opacity: 0.95; /* 增强图片清晰度 */
}


.gallery-photo span.photo-title{
	position: absolute;
	background: rgba(0, 0, 0, 0.3);
	padding: 3px 4px;
	font-size: 14px;
	color: #fff;
	display: none;
	animation: fadeIn 1s;
	bottom: 5px;
	left: 5px;
	border-radius: var(--radius);
}


/* 鼠标悬停时显示标题 */
.gallery-photo:hover span.photo-title{
	display:block;
}

@media screen and (max-width: 1280px) {
	.gallery-photo{width:33.3%;}
}

@media screen and (max-width: 860px) {
	.gallery-photo{width:49.9%;}
	.gallery-photo:hover {
		transform: none; /* 禁用向上移动效果 */
		box-shadow: none; /* 去除阴影 */
	}
	.gallery-photo:hover img {
		transform: none; /* 禁用缩放 */
		opacity: 1; /* 恢复默认清晰度 */
	}
}

@keyframes fadeIn{
	0% {opacity: 0;}
   100% {opacity: 1;}
}



/* Tag 栏样式 */
.tag-list {
	display: flex; /* 使用 flexbox 布局 */
	justify-content: center; /* 水平居中 */
	gap: 10px; /* 按钮之间的间距 */
	margin-top: 20px; /* 设置顶部的间距 */
	margin-bottom: 20px; /* 设置底部距离 */
	flex-wrap: wrap; /* 小屏幕自动换行 */
}

.tag-filter {
  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-filter:hover {
	background-color: var( --tag-bg);
	transform: translateY(-2px);
  	box-shadow: var(--shadow);
}

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