.site-footer {
  background-color: var(--color-primary);
  padding: 32rem 0;
  width: 100%;
  font-size: 16rem;
  line-height: 1;
}

.sp-only {
  display: none !important;
}
.pc-only {
  display: block !important;
}

.footer-container {
  margin: 0 auto;
  padding: 0 44rem; /* PC端左右内边距 */
  display: flex;
  gap: clamp(40rem, 6vw, 307rem);
  /* gap: 307rem; */
  align-items: flex-start;
}

/* 左侧大块：包含 nav / info / divider / links / copyright */
.footer-left {
  flex: 1;
  min-width: 0;
  width: 100%;
  display: grid;
  grid-template-areas:
    'nav info'
    'divider divider'
    'links copyright';
  grid-template-columns: clamp(220rem, 28vw, 380rem) 1fr;
  /* grid-template-columns: 380rem 1fr; */
}

/* 右侧大块：只放 logo */
.footer-right {
  /* width: 300px; */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  margin-left: auto; /* 自動マージンで右端に配置 */
}

/* --- 1. 导航区域 (Nav) --- */
.footer-nav {
  grid-area: nav;
}
.footer-nav li {
  margin-bottom: 32rem;
}
.footer-nav a {
  font-weight: 500;
  font-size: 16rem;
  line-height: 1;
  color: var(--color-bg);
}

/* --- 2. 信息区域 (Info: 联系方式 & 地址) --- */
.footer-info {
  grid-area: info;
}
.info-group {
  margin-bottom: 48rem;
}
.info-title {
  font-weight: 500;
  font-size: 16rem;
  line-height: 1;
  color: var(--color-bg);
  margin-bottom: 24rem;
}
.info-content p {
  /* font-weight: 500; */
  font-size: 14rem;
  line-height: 1.6;
  color: #a0a0a0;
}

/* --- 3. Logo区域 --- */
.footer-logo {
  display: flex;
  justify-content: flex-end; /* PC端Logo居右 */
  align-items: flex-end;
}

.footer-logo .logo-img {
  width: auto;
  height: 342rem;
  display: block;
}

/* --- 4. 分割线 --- */
.footer-divider {
  grid-area: divider;
  width: 100%;
  height: 1rem;
  background-color: #a0a0a0;
  opacity: 0.5;
  margin: 0 0 32rem 0;
}

/* --- 5. 底部链接 (Links) --- */
.footer-links {
  grid-area: links;
  display: flex;
  flex-direction: column;
  gap: 16rem;
  width: 100%;
}

.footer-links a {
  font-weight: 500;
  font-size: 14rem;
  line-height: 1;
  color: #a0a0a0;
}

/* =========================================
     Mobile 响应式样式 (max-width: 768px)
     ========================================= */
@media (max-width: 768px) {
  .sp-only {
    display: block !important;
  }
  .pc-only {
    display: none !important;
  }

  .site-footer {
    padding: 48rem 0;
  }

  .footer-logo .logo-img {
    width: auto;
    height: auto;
    max-width: 360rem;
  }

  .footer-container {
    padding: 0 22rem; /* 移动端左右内边距 */
    flex-direction: column;
    gap: 0rem;
  }

  .footer-left {
    grid-template-columns: 1fr;
    grid-template-areas:
      'nav'
      'links'
      'info'
      'copyright';
    /* gap: 20px; */
  }

  .footer-right {
    width: 100%;
    align-items: flex-start;
  }

  /* 移动端 Logo 左对齐且变大 */
  .footer-logo {
    justify-content: flex-start;
    margin-top: 20rem;
    margin-bottom: 10rem;
  }
  .footer-logo svg {
    width: 100%;
  }

  /* 移动端版权信息左对齐 */
  .footer-copyright {
    width: 100%;
    text-align: left;
    font-weight: 500;
    font-size: 11rem;
    line-height: 1;
    color: #a0a0a0;
  }
  /* 处理 PC端分割线在移动端的显示逻辑 */
  .footer-divider {
    display: none; /* 隐藏 PC 端那条通栏分割线 */
  }

  /* 创建移动端专用的分割线（利用伪元素或CSS边框实现更佳，这里为了结构清晰，我们在HTML里处理逻辑，或者直接给 links 上下加边框） */
  .footer-links {
    border-top: 1rem solid var(--color-line);
    border-bottom: 1rem solid var(--color-line);
    padding: 24rem 0;
    gap: 16rem;
  }
  .info-group {
    margin-top: 24rem;
  }
  .info-title {
    margin-bottom: 16rem;
  }

  .footer-links {
    grid-area: links;
    display: flex;
    flex-direction: column;
  }
  .footer-links a {
    font-weight: 500;
    font-size: 14rem;
    line-height: 1;
    color: #a0a0a0;
  }

  /* 导航间距调整 */
  .footer-nav li {
    margin-bottom: 24rem;
  }
}