/* 全局设置 */
html, body {
  margin: 0;
    height: 100%;
  padding: 0;
  overflow-x: hidden; 
  box-sizing: border-box;
  font-family: "Times New Roman", sans-serif;
}

*, *::before, *::after {
  box-sizing: inherit;
}


/* ---- 桌面端 ---- */
.container {
  display: grid;
  grid-template-columns: 280px 1fr 200px;
  grid-template-rows: 1fr; 
  height: 100vh;
  gap: 0;
}
.top-section {
  display: contents; 
}

.sidebar {
  grid-column: 1;
  grid-row: 1;
}
.main {
  grid-column: 2;
  grid-row: 1;
}
.rightbar {
  grid-column: 3;
  grid-row: 1;
}

/* ---- 移动端 ---- */
@media (max-width: 768px) {
  .container {
    display: grid;
    grid-template-columns: 1fr;    
    grid-template-rows: auto 1fr;  
    height: auto;                  
    width: 100%;
    max-width: 600px; 
    margin: 0 auto;      
    gap: 0px;
  }
  .top-section {
    display: grid;
    grid-template-columns: 60% 0% 40%;
    min-width: 0; 
    gap: 0px;
    width: 100%;
    max-height: 35vh;     
    box-sizing: border-box;
    padding: 0px;
    background: transparent; 
    overflow-y: scroll; 
  scrollbar-width: thin; 
  scrollbar-color: rgba(0,0,0,0.3) transparent;}

.top-section img {
  max-width: 100%;
  height: auto;
  display: block;   
  object-fit: contain; }

/* Chrome / Edge / Safari (WebKit)  */
.top-section::-webkit-scrollbar {
  width: 6px; 
}

.top-section::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

.top-section::-webkit-scrollbar-track {
  background: transparent;
}
  
  .sidebar, .rightbar {
    grid-auto-rows: min-content;
    min-height: 0;
  }
.main {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
  }
}


/* 左栏 */
.sidebar {
  padding: 4px 6px 8px 6px; 
  font-size: 14px;
  line-height: 1.2;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar h1 {
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 6px;
}

.sidebar h1 > a,
.sidebar h2 > a { text-decoration: none; }

.menu {
  font-weight: bold;
  text-align: left;
  margin-top: 0.5em;
  margin-bottom: 0;
}

.sidebar ul {
  list-style: circle;
  padding: 4px 0 4px 8px;
  margin: 0;
  line-height: 1.4;
}

.sidebar li {
  margin: 3px 0;
}

.sidebar a {
  text-decoration: underline;
  color: rgb(0, 0, 255);
}

.sidebar a:hover {
  text-decoration: none;
}


/* 右栏 */
.rightbar {
  padding: 0px 6px 0px 12px;        
  font-size: 14px;
  line-height: 1.4;     
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
}


.rightbar ul {
  list-style:circle;
  padding: 0px;
  margin: 0 0 10px 0;
  line-height: 1.4;
}

.rightbar a {
  text-decoration:underline;
  color: rgb(0, 0, 255);
}

.rightbar a:hover {
  text-decoration: none;
}

/* 中间主栏 */
.main {
  padding: 0px 0px 0px 0px; /* 上、右、下、左 */
  overflow-y: auto;
  border-right: 1px solid black;
  border-left: 1px solid black;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0.4em;      /* 上方间距 */
  margin-bottom: 0.4em;   /* 下方间距 */
  padding-left: 0.8em;    /* ✅ 左内边距 */
  padding-right: 0.8em;   /* ✅ 右内边距 */
}


.title-row {
  display: flex;
  justify-content: space-between; /* 左右对齐 */
  align-items: baseline;          /* 底线对齐，避免link掉下去 */
  margin-bottom: 1em;
}

.title-row h1,
.title-row h2,
.title-row h3{
  flex: 1;                        /* 撑满左边空间 */
  margin: 8px  12px 8px 12px;
  line-height: 1.4;
}

.title-row a {
  margin-right: 16px;
  text-decoration: none;
  color: #0077cc;
  flex-shrink: 0;                 /* 不被标题挤压 */
  white-space: nowrap;            /* 保证不换行 */
}




img { max-width: 100%; height: auto; display: block; }

p {line-height: 1; /* 或稍小 */
  margin-top:10px;    /* 或更小 */
  margin-bottom: 24px; /* 默认通常是 16px 左右 */
}

/* 响应式：手机屏幕上下排 */
@media (max-width: 768px) {
  .poem-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .zh, .en {
    text-align: left;
  }
}


/* 视频 */
iframe {
  display: block;
  margin: 5px 0 10px 0; /* 缩小标题与视频间距 */
  width: 100%;
  border: 0;
}


.sidebar, .rightbar { min-width: 0; }


/* 诗歌或长文 */
pre {
  font-family: "Times New Roman", Georgia, "Songti SC", "SimSun", serif; /* 加中文宋体 */
  font-size: 16px;
  line-height: 1.5;       /* 行距更疏，文本呼吸 */
  white-space: pre-wrap;
  word-wrap: break-word;
  text-align: left;
  max-width:max-content;
  margin: 8px 12px 20px 12px;   /* 段前后多留空 */
  background: transparent;   /* 或淡灰，若想模拟纸感 */
  letter-spacing: 0.3px;      /* 字间微扩张，视觉更柔 */
  font-variant-ligatures: common-ligatures; /* 更自然的西文字体连接 */
}


/* 默认 grid 模式 */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.gallery img {
  width: 100%;
  border-radius: 0px;
  cursor:pointer;
  transition: transform 0.2s;
}

.gallery img:hover {
  transform: scale(1.03);
}

/* 单张查看模式 */
.lightbox {
  display: none;
}

.lightbox.active {
display: flex;
position: fixed;
top: 0;
left: 50%;                   /* 先移到中间 */
width: 50%;
height: 100%;
transform: translateX(0);    /* 不动也行，主要是配合 left: 50% */
background:#000000;
justify-content: center;
align-items: center;
z-index: 9999;
}

.lightbox img {
  max-width: 100%;          /* 不超出容器宽度 */
  max-height: 100%;         /* 不超出容器高度 */
  width: auto;              /* 保持原比例 */
  height: auto;
  border-radius: 0 !important;
  object-fit: contain;      /* 确保不被拉伸 */
}

@media (max-width: 768px) {
  .lightbox.active {
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    flex-direction: column;
  }
  .lightbox img {
    max-width: 95%;
    max-height: 85%;
  }
  .lightbox button.prev, 
  .lightbox button.next {
    font-size: 24px;
    padding: 8px;
  }
}

/* 左右按钮 */
button.prev, button.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.1);
  color: white;
  border: none;
  font-size: 32px;
  padding: 12px;
  cursor: pointer;
  z-index: 10000;
}

button.prev:hover, button.next:hover {
  background: rgba(255,255,255,0.3);
}

button.prev { left: 20px; }
button.next { right: 20px; }

/* 关闭按钮 */
button.close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  color: white;
  font-size: 32px;
  border: none;
  cursor: pointer;
  z-index: 10000;
}

button.close:hover {
  color: #888;
}

/* CSS */

/* 把你现在的 #player 和 .layer 样式全部替换成下面这几行 */
#grass-player {
  position: relative;
  width: 100%;
  height: 150%;
  overflow: hidden;
}
#grass-player img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition:none ;
}
#grass-player img.active {
  opacity: 1;
}


#grass-player .layer {
  opacity: 1;                  /* 默认就 100% 不透明！ */
  visibility: hidden;          /* 用 visibility 隐藏，等加载好再显示 */
  position: absolute;
  pointer-events: none;
  
}

#grass-player .layer.active {
   position: relative;  /* 回到文档流中 */
  visibility: visible;
  display: block;
}

.grass-row {
  display: flex;
  gap: 10px;           /* 两边的间距 */
  width: 100%;
}

#grass-player {
  flex: 2;             
  background: transparent;
}

.grass-right {
  flex: 1;             /* 右边占 1 份 */
  display: flex;
  justify-content: center;
  align-items: center;
}


/* 弹窗放大层（适度大小，非全屏）*/
#grassPopup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: none;
  backdrop-filter:unset;
  padding: 20px;                 /* 四周留白，避免贴边 */
  box-sizing: border-box;
}

#grass-player {
  position: relative;
  width: 70%;
  height: 100%;
  display: inline-block;
  cursor: pointer;   /* ← 直接改这里 */
  overflow: hidden;
}

#grassPopup.active {
  opacity: 1;
  visibility: visible;
}

/* 图片：原尺寸、不拉伸、不裁剪 */
#grassPopup img {
  max-width: 90vw;               /* 最大不超过屏幕 90% */
  max-height: 90vh;
  width: auto;                   /* 关键：原宽度 */
  height: auto;                  /* 关键：原高度 */
  object-fit: contain;
  border-radius: 0px;
  box-shadow: 0 20px 50px rgba(141, 141, 141, 0.5);
  animation: popIn 0.4s ease;
}

/* 小关闭叉叉 */
.grass-popup-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.25);
  border-radius: 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: white;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.2s ease;
}

.grass-popup-close:hover {
  background: rgba(255,255,255,0.4);
  transform: scale(1.1);
}

/* 放大动画 */
@keyframes popIn {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}


/* ✅ 仅当 .main 里面有 .photobar 时生效 */
.main:has(.photobar) {
  display: grid;
  grid-template-columns: 200px auto;  /* photobar 在左，内容在右 */
 height: 100%;
}

/* photobar 容器基本样式（仅当 main 包含 photobar 时） */
.main:has(.photobar) .photobar {
  font-size: 14px;
  overflow-y: auto;
 overflow-x: hidden;
 height: 100%;
  padding: 0;       /* ✅ 完全去掉内边距 */
  margin: 0;        /* ✅ 去掉外边距 */
  box-sizing: border-box; /* 防止滚动条撑开 */
}

.main:has(.photobar) .photobar .menu {
  margin-left: 12px;   /* ✅ 向右缩进一点 */
  font-weight: bold;   /* 如果想让它看起来是标题 */
}

/* 去掉 li 的默认内边距/外边距和前置符号 */
.main:has(.photobar) .photobar ul{
  list-style:lower-alpha;
  margin: 12px 0 0 12px;
  padding: 0 0 0 12px;
  
}

.main:has(.photobar) .photobar li {list-style:lower-alpha;
  line-height: 1.6;
  margin: 0px;
  padding: 0 0 0 0;}

/* 只针对 photobar 内的 <a>：蓝色且下划线；不影响 menu 等其它链接 */
.main:has(.photobar) .photobar a {
  color: blue;
  text-decoration: underline;
  cursor: pointer;      /* 小手提示（可选） */
}

/* 可选：a 的 hover 效果，增强可点击性（非必要） */
.main:has(.photobar) .photobar a:hover {
  text-decoration-thickness: 2px;
  color: rgb(0, 60, 180); /* 深一点的蓝 */
}



/* ✅ 内容区样式 */
.main:has(.photobar) .main-content {
     border-left: 1px solid black;    /* photobar 与内容的分隔线 */
  padding: 8px;
}