/* 1) 全站字体：先用系统中文字体（更接近设计稿的方正感） */
:root{
  --bar-h: 84px;
  --teal: #00a6b2;
  --paper: #efe3c6;

  --sidebar-w: 360px; /* 左侧logo栏宽度 */
  --pad: 36px;        /* 米白色块上下右边距 */
  --gutter: 72px; /* ✅ 菜单文字与米白色块左边缘对齐用的基准 */

  --main-h: 680px;  /* ✅ 固定主视觉高度（logo 和米白色块都会固定） */
}

/* 基础 */
*{ box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  background: var(--teal);

  /* 中文优先：更接近“粗方”的观感 */
  font-family: "PingFang SC","Microsoft YaHei","Noto Sans SC","Heiti SC",Arial,Helvetica,sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;

  /* ✅ 关键两行：固定版面，不随窗口缩放 */
  min-width: 1200px;   /* ← 设计稿宽度，按需要可调 */
  overflow-x: auto;    /* ← 小于这个宽度时显示横向滚动 */
}

/* 左列：品牌文字 */
.brand-text{
  grid-column: 1;

  /* ✅ 关键：在左侧列中水平 + 垂直居中 */
  justify-self: center;
  align-self: center;

  color: #fff;
  text-decoration: none;
  white-space: nowrap;

  font-size: 48px;
  font-weight: 900;
  letter-spacing: 6px;
  line-height: 1;
}

/* 左列：文字 */
.innertop-text{
  display: block;
  margin: 0;

  text-align: left; 
  color: #000;
  text-decoration: none;
  white-space: nowrap;

  font-size: 48px;
  font-weight: 900;
  letter-spacing: 6px;
  line-height: 1;
}

/* 左列：文字 */
.innerbody-text{
  display: block;
  margin: 0;

  text-align: left;      
  color: #000;
  text-decoration: none;
  white-space: nowrap;

  font-size: 32px;
  font-weight: 900;
  letter-spacing: 6px;
  line-height: 1;
}


/* 顶部导航栏 */
.topbar{
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: var(--bar-h);
  background: #000;
  z-index: 9999;
}

.topbar-inner{
  height: var(--bar-h);
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr; /* ✅ 左列=侧栏宽，右列=内容列 */
  align-items: center;

  /* ✅ 不要再用 padding 影响对齐 */
  padding: 0;
}

/* 右列：菜单，从 gutter 开始，保证和米白色块对齐 */
.nav{
  grid-column: 2;
  justify-self: start;
  padding-left: var(--gutter);  /* ✅ 关键：跟 content 左边距一致 */

  display: flex;
  gap: 96px;
  align-items: center;
  flex-wrap: nowrap;

  justify-content: flex-start;
}

.nav-item{
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 1px;
  white-space: nowrap;

  font-size: 36px;
}

.nav-item span{
  font-weight: 800;

}

/* 主体布局：固定版面，不随窗口挤压缩放 */
.layout{
  min-height: 100vh;
  padding-top: var(--bar-h);
  display: flex;

  flex-wrap: nowrap;     /* ✅ 永远不换行 */
  min-width: 1200px;     /* ✅ 小于这个宽度就横向滚动 */
}

/* 左侧：logo区域 */
.sidebar{
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--teal);

  /* ✅ 关键：与右侧 content 的 padding-top/padding-bottom 一致 */
  padding: var(--pad) 0;

  /* ✅ 关键：从顶部开始摆放，不要居中 */
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* 左侧 logo 固定高度盒子：跟米白色 panel 一样高 */
.logo-box{
  height: var(--main-h);
  width: 100%;

  /* ✅ 关键：盒子顶部对齐 */
  display: flex;
  align-items: flex-start;
  justify-content: center;

  flex: 0 0 auto;
}

/* 图片在盒子里“尽可能大”显示 */
.sidebar-logo{
  height: var(--main-h);   /* 固定高度：等于米白色 */
  width: auto;             /* 按比例算宽度 */
  max-width: none;         /* ❌ 禁止再被压回 sidebar */
  display: block;

}

.content{
  flex: 1;
  background: transparent;   /* ✅ 内容区本身不涂米白 */
  padding: var(--pad);       /* ✅ 外边距用 padding 来做 */
  padding-left: var(--gutter); /* ✅ 左边与菜单对齐 */
  min-width: 900px; 
}

.panel{
  height: var(--main-h);   /* ✅ 用统一高度 */
  background: var(--paper);
  border-radius: 2px;
  overflow: auto; 
}

.panel2{
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 28px 36px;
}

.brand-logos{
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, auto)); /* 一行4个，自动缩放 */
  gap: 28px 0; /* 行距 列距 */
  align-items: center;
  justify-items: start;
}

.brand-logo{
  width: 100%;
  max-height: 100px;     /* 控制视觉高度一致 */
  width: auto;
  object-fit: contain;  /* 不裁切，等比缩放 */
  display: block;
}