/* 页面切换时始终保留滚动条占位，防止内容横向抖动 */
html {
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

body {
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  scroll-behavior: smooth;
  min-width: 1280px;
  /* flex column 让 main flex-grow 生效，页面始终撑满视口高度，
     避免短内容页面滚动条消失引起的布局抖动 */
  display: flex;
  flex-direction: column;
}

/* Iconify 图标占位防止布局抖动 */
iconify-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

/* 会员页面样式 */

.member-aside nav a.active {
  color: rgb(37 99 235 / var(--tw-bg-opacity));
  font-weight: bold;
}

/* 侧边栏 sticky 定位：避免不同页面高度不同导致视觉跳变 */
.member-aside {
  position: sticky;
  top: 5rem;
  /* 与 main 的 pt-20 对齐，紧贴导航栏下方 */
  align-self: flex-start;
  max-height: calc(100vh - 5.5rem);
  overflow-y: auto;
}

/* 文档卡片样式 */
.template-card:hover .overlay {
  opacity: 1;
}

/* 模板卡片封面图区域
 * 容器比例与 PPT 封面图 (300:421) 完全一致，保证竖向封面图完整展示无裁切。
 * 其他格式（xls/txt 等）使用 object-contain 同样完整展示，仅在边缘留有浅色背景。
 */
.template-card-cover {
  aspect-ratio: 300 / 421;
  background: #ffffff;
  /* 灰白底，作为 letterbox 填充色 */
}

.template-card-cover img {
  object-fit: contain;
}