/* ============================================================
   便民工具箱公共样式
   设计稿宽度：750px
   架构与参考站（老黄历网）一致：
   1. body 米白底色，唯一 .gj-page 容器 max-width:750px 居中
   2. 白底吸顶导航头 .gj-header（蓝字）、蓝色横幅 .gj-hero、米白主体 .gj-main、
      深色页脚 .gj-footer 全部限制在 750px 内
   3. --u: min(1vw, 7.5px) 作为全局缩放单位
      ≤750px 随视口等比缩放；≥750px 后所有尺寸锁定不再放大
   ============================================================ */

/* ---------- 全局缩放单位（750px 设计稿） ---------- */
:root {
  --u: min(1vw, 7.5px); /* 750px 的 1%，超过 750px 视口后锁定为 7.5px */
  --c-main: #2563eb; /* 主色：科技蓝 */
  --c-accent: #3b82f6; /* 强调色：亮蓝 */
  --c-bg: #f1f5f9; /* 页面背景（750px 两侧）：淡蓝灰 */
  --c-shadow: rgba(37, 99, 235, 0.18); /* 搜索框等带主题色的阴影 */
  --c-footer: #0f172a; /* 页脚：深蓝黑 */
}

/* ---------- 全局 ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background: var(--c-bg); /* 750px 容器两侧露出的底色 */
  color: #333;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

/* 行内重点标注：加粗 + 橙字 + 淡橙底圆角（与logo橙色呼应） */
.gj-mark {
  font-style: normal;
  font-weight: 700;
  background: #fff6e6;
  color: #f3951c;
  padding: calc(0.4 * var(--u)) calc(1.33 * var(--u));
  border-radius: calc(1.2 * var(--u));
}

input,
button {
  font-family: inherit;
}

/* ---------- 页面唯一750px容器（所有模块背景均不超出此宽度） ---------- */
.gj-page {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  overflow: clip;
  background: #fff;
}

/* ---------- 内容水平内边距容器（宽度由 .gj-page 统一控制） ---------- */
.gj-wrap {
  padding: 0 calc(3.2 * var(--u)); /* 左右24px */
}

/* ---------- 面包屑（工具页通用） ---------- */
.gj-crumb {
  display: flex;
  align-items: center;
  gap: calc(1.2 * var(--u)); /* 9px */
  padding: calc(2 * var(--u)) 0 0; /* 15px 顶部 */
  font-size: calc(2.6 * var(--u)); /* 19.5px */
  color: #94a3b8;
  flex-wrap: wrap;
}

.gj-crumb a {
  color: #64748b;
}

.gj-crumb a:hover {
  color: var(--c-main);
}

.gj-crumb em {
  font-style: normal;
  color: var(--c-text);
}

/* ---------- 网站头部：吸顶导航（深色一体版：与英雄区同渐变连成横幅，750px内） ---------- */
.gj-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: calc(2.4 * var(--u)) calc(4 * var(--u)); /* 18px 30px */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(2 * var(--u));
  background: linear-gradient(135deg, #1e40af 0%, #0f766e 100%); /* 与英雄区同款渐变 */
}

.gj-brand {
  display: flex;
  align-items: center;
  gap: calc(1.4 * var(--u)); /* 10.5px */
  min-width: 0;
}

/* 门户 logo：半透明白底圆角容器 + 内嵌渐变扳手 SVG（深色头部上不融底） */
.gj-logo-box {
  width: calc(4.5333 * var(--u)); /* 34px */
  height: calc(4.5333 * var(--u));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: calc(1.33 * var(--u)); /* 10px */
}

.gj-logo-sm {
  width: calc(3 * var(--u)); /* 22.5px */
  height: calc(3 * var(--u));
}

/* 工具站版 logo：彩色圆角方块 + bi 图标（底色由工具页传入） */
.gj-logo {
  width: calc(4.5333 * var(--u)); /* 34px */
  height: calc(4.5333 * var(--u));
  flex-shrink: 0;
}

.gj-logo-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(1.33 * var(--u)); /* 10px，与门户 logo 圆角一致 */
  border: 1px solid rgba(255, 255, 255, 0.28); /* 深色头上的白色描边，质感统一 */
  color: #fff;
}

.gj-logo-tool .bi {
  font-size: calc(2.67 * var(--u)); /* 20px 图标 */
}

.gj-brand-link {
  font-size: calc(3.6 * var(--u)); /* 27px */
  font-weight: 600;
  letter-spacing: calc(0.3 * var(--u));
  line-height: 1.2; /* 压行盒：默认行高会把头部撑高 */
  white-space: nowrap;
  color: #fff; /* 深色头部上的白色品牌字 */
}

.gj-brand-link:hover {
  opacity: 0.85;
}

/* 汉堡菜单按钮：白色三横线，半透明白圆角容器 */
.gj-menu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(0.9 * var(--u)); /* 横线间距 6.75px */
  width: calc(5.6 * var(--u)); /* 42px */
  height: calc(5.6 * var(--u));
  background: rgba(255, 255, 255, 0.16);
  border: 0;
  border-radius: calc(1.33 * var(--u)); /* 10px */
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.gj-menu-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

.gj-menu-btn span {
  display: block;
  width: calc(3.07 * var(--u)); /* 23px：显式宽度（align-items:center 后不再由 padding 拉伸） */
  height: calc(0.4 * var(--u)); /* 3px */
  background: #fff;
  border-radius: calc(99 * var(--u));
  transition: transform 0.25s, opacity 0.25s;
}

/* 打开时三横线变 X */
.gj-menu-btn.open span:nth-child(1) { transform: translateY(calc(1.3 * var(--u))) rotate(45deg); }
.gj-menu-btn.open span:nth-child(2) { opacity: 0; }
.gj-menu-btn.open span:nth-child(3) { transform: translateY(calc(-1.3 * var(--u))) rotate(-45deg); }

/* 下拉菜单面板 */
.gj-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  background: #fff;
  border-top: 1px solid #e2e8f0;
  padding: calc(1.33 * var(--u)) calc(2.67 * var(--u)) calc(2 * var(--u)); /* 10px 20px 15px */
  box-shadow: 0 calc(1.6 * var(--u)) calc(4 * var(--u)) rgba(30, 58, 138, 0.25);
}

.gj-nav.open {
  display: flex;
}

.gj-nav-item {
  color: var(--c-main);
  font-size: calc(3.2 * var(--u)); /* 24px */
  font-weight: 500;
  padding: calc(2.67 * var(--u)) calc(2.67 * var(--u)); /* 20px */
  border-radius: calc(1.33 * var(--u)); /* 10px */
  white-space: nowrap;
}

.gj-nav-item:active {
  background: rgba(37, 99, 235, 0.08);
}

.gj-nav-item.active {
  color: var(--c-main);
  font-weight: 600;
  background: rgba(37, 99, 235, 0.1);
}

/* ---------- 英雄区横幅 hero（深蓝→青绿渐变，750px内） ---------- */
.gj-hero {
  background: linear-gradient(135deg, #1e40af 0%, #0f766e 100%);
  padding: calc(5.3333 * var(--u)) 0; /* 上下40px */
  text-align: center;
}

.gj-sitename {
  color: #fff;
  font-size: calc(5.0667 * var(--u)); /* 38px */
  font-weight: 700;
  letter-spacing: calc(0.5333 * var(--u)); /* 4px */
  line-height: 1.3;
}

.gj-slogan {
  color: rgba(255, 255, 255, 0.72);
  font-size: calc(2.9333 * var(--u)); /* 22px */
  margin-top: calc(2.1333 * var(--u)); /* 16px */
  line-height: 1.65; /* 副标题两行显示，行距撑开不挤 */
}

.gj-slogan-sub {
  margin-top: calc(1.0667 * var(--u)); /* 两行间距8px */
  font-size: calc(2.6667 * var(--u)); /* 20px */
  color: rgba(255, 255, 255, 0.6); /* 略淡，形成层次 */
}

.gj-slogan-num {
  color: #fde047; /* 亮黄：蓝底上醒目 */
  font-size: calc(3.6 * var(--u)); /* 27px，比正文略大 */
  padding: 0 calc(0.4 * var(--u)); /* 3px */
}

/* ---------- 主体区（白色，750px内） ---------- */
.gj-main {
  background: #fff;
  padding-bottom: calc(6.6667 * var(--u)); /* 50px，与页脚间隔 */
}

/* ---------- 搜索区（英雄区内） ---------- */
.gj-search-section {
  margin-top: calc(3.2 * var(--u)); /* 副标题下方24px，与热门词间距对称 */
}

.gj-search-box {
  background: #fff;
  border-radius: calc(3.7333 * var(--u)); /* 28px 胶囊 */
  height: calc(7.4667 * var(--u)); /* 56px */
  max-width: calc(82.6667 * var(--u)); /* 620px，左右收窄 */
  margin: 0 auto; /* 居中 */
  display: flex;
  align-items: center;
  gap: calc(2 * var(--u));
  padding: 0 calc(3.2 * var(--u)); /* 24px */
  box-shadow: 0 calc(0.8 * var(--u)) calc(3.2 * var(--u)) var(--c-shadow);
}

.gj-search-box .bi-search {
  font-size: calc(2.9333 * var(--u)); /* 22px */
  color: #b8b0ac;
}

.gj-search-box input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: calc(3.2 * var(--u)); /* 24px */
  color: #333;
  min-width: 0;
}

.gj-search-box input::placeholder {
  color: #b8b0ac;
}

.gj-search-clear {
  border: none;
  background: transparent;
  color: #ccc;
  font-size: calc(3.2 * var(--u)); /* 24px */
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* ---------- 热门搜索词 ---------- */
.gj-hotwords {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(1.8667 * var(--u)); /* 14px */
  margin-top: calc(3.2 * var(--u)); /* 搜索框下方24px，上下对称 */
}

.gj-hotwords-label {
  font-size: calc(2.6667 * var(--u)); /* 20px */
  color: rgba(255, 255, 255, 0.55);
}

.gj-hotword {
  background: rgba(255, 255, 255, 0.16);
  border-radius: calc(4 * var(--u));
  padding: calc(1.0667 * var(--u)) calc(3.2 * var(--u)); /* 8px 24px */
  font-size: calc(2.6667 * var(--u)); /* 20px */
  color: #fff;
  cursor: pointer;
}

.gj-hotword:active {
  background: #fff;
  color: var(--c-main);
}

/* ---------- 分类导航（6分类一行彩点胶囊：淡彩底 + 圆点图标 + 两字简称） ---------- */
.gj-catnav {
  display: flex;
  gap: calc(1.2 * var(--u)); /* 9px */
  margin-top: calc(4 * var(--u)); /* 30px：与英雄区拉开间距 */
}

.gj-cat {
  flex: 1; /* 6 个胶囊均分一行 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(0.9 * var(--u)); /* 6.75px */
  border-radius: calc(3 * var(--u)); /* 22.5px 胶囊圆角 */
  padding: calc(1.3 * var(--u)) 0; /* 9.75px 上下 */
  transition: transform 0.15s, box-shadow 0.15s;
}

.gj-cat:hover {
  transform: translateY(-2px); /* 轻浮起 */
  box-shadow: 0 calc(0.8 * var(--u)) calc(2 * var(--u)) rgba(15, 23, 42, 0.12);
}

.gj-cat-dot {
  width: calc(3.4 * var(--u)); /* 25.5px 圆点 */
  height: calc(3.4 * var(--u));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: calc(2.1 * var(--u)); /* 15.75px 图标 */
  flex-shrink: 0;
}

.gj-cat-name {
  font-size: calc(2.5 * var(--u)); /* 18.75px 简称 */
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
}

/* ---------- 工具区块与卡片网格 ---------- */
.gj-section {
  margin-top: calc(6.6667 * var(--u)); /* 50px */
}

.gj-section-title {
  text-align: center;
  font-size: calc(4 * var(--u)); /* 30px */
  font-weight: 600;
  color: #2a2a2a;
  line-height: 1.4;
}

.gj-section-sub {
  text-align: center;
  font-size: calc(2.9333 * var(--u)); /* 22px */
  color: #9a938f;
  margin-top: calc(0.8 * var(--u)); /* 6px */
  margin-bottom: calc(3.2 * var(--u)); /* 24px */
}

.gj-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 一行5个 */
  gap: calc(1.6 * var(--u)); /* 12px，5列更紧凑 */
}

.gj-tool {
  background: #fff;
  border: 1px solid #e2e8f0; /* 淡描边：与白色内容区分出边界 */
  border-radius: calc(2.6667 * var(--u)); /* 20px */
  padding: calc(2.6667 * var(--u)) calc(0.8 * var(--u)); /* 20px 6px */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(1.8667 * var(--u)); /* 14px */
  text-align: center;
  box-shadow: 0 calc(0.8 * var(--u)) calc(2.4 * var(--u)) rgba(30, 58, 138, 0.08);
  transition: transform 0.15s, border-color 0.15s;
}

.gj-tool:hover {
  border-color: var(--c-accent); /* 悬停时描边变主题色，同时解决白底白卡辨识问题 */
  transform: translateY(-2px);
}

.gj-tool:active {
  transform: scale(0.97);
}

.gj-tool-icon {
  width: calc(6.4 * var(--u)); /* 48px */
  height: calc(6.4 * var(--u));
  min-width: calc(6.4 * var(--u));
  border-radius: calc(2.1333 * var(--u)); /* 16px */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: calc(3.4667 * var(--u)); /* 26px */
}

.gj-tool > span {
  min-width: 0; /* 允许 flex 子项收缩，省略号才能生效 */
  max-width: 100%;
}

.gj-tool-name {
  display: block;
  font-size: calc(2.6667 * var(--u)); /* 20px，5列卡片更窄 */
  font-weight: 500;
  color: #333;
  line-height: 1.35;
  max-width: 5em; /* 固定5个字宽，超出统一省略号截断 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 搜索无结果提示 ---------- */
.gj-empty {
  display: none;
  text-align: center;
  color: #9a938f;
  font-size: calc(3.2 * var(--u)); /* 24px */
  padding: calc(8 * var(--u)) 0;
}

.gj-empty.show {
  display: block;
}

/* ---------- 工具说明 ---------- */
.gj-note {
  background: #eff6ff; /* 主题色极淡底 */
  border-radius: calc(2.6667 * var(--u)); /* 20px */
  padding: calc(4 * var(--u)); /* 30px */
  display: flex;
  flex-direction: column;
  gap: calc(3.2 * var(--u)); /* 24px */
}

.gj-note p {
  font-size: calc(3.4667 * var(--u)); /* 26px */
  color: #555;
  line-height: 1.7;
}

/* ---------- 常见问题（手风琴） ---------- */
.gj-faq-list {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u)); /* 15px */
}

.gj-faq {
  background: #fff;
  border: 1px solid #e2e8f0; /* 淡描边：与白色内容区分出边界 */
  border-radius: calc(2.1333 * var(--u)); /* 16px */
  overflow: hidden;
  box-shadow: 0 calc(0.8 * var(--u)) calc(2.4 * var(--u)) rgba(30, 58, 138, 0.08);
}

.gj-faq summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(2.6667 * var(--u));
  padding: calc(3.2 * var(--u)) calc(4 * var(--u)); /* 24px 30px */
  font-size: calc(3.2 * var(--u)); /* 24px */
  font-weight: 500;
  color: #333;
  cursor: pointer;
  line-height: 1.4;
}

.gj-faq summary::-webkit-details-marker {
  display: none;
}

.gj-faq summary .bi-chevron-down {
  color: var(--c-accent);
  font-size: calc(3.7333 * var(--u)); /* 28px */
  flex-shrink: 0;
  transition: transform 0.2s;
}

.gj-faq[open] summary .bi-chevron-down {
  transform: rotate(180deg);
}

.gj-faq-answer {
  padding: 0 calc(4 * var(--u)) calc(3.2 * var(--u)); /* 0 30px 24px */
  font-size: calc(3.2 * var(--u)); /* 24px */
  color: #666;
}

/* ============================================================
   宽版模式（$pageWide=true，PC向工具页）
   - 解除 .gj-page 的 750px 限宽，主体宽度由页面自己的 CSS 控制
   - 头部/页脚/面包屑/相关工具与主体对齐：1120px 居中
   - 英雄区保持全宽渐变，文字居中不受影响
   布局永远只有两档：窄版（默认750）与本档，不再加第三档
   ============================================================ */
.gj-page-wide {
  max-width: none;
}

.gj-page-wide .gj-header {
  padding-left: max(calc(4 * var(--u)), calc(50% - 560px));
  padding-right: max(calc(4 * var(--u)), calc(50% - 560px));
}

.gj-page-wide .gj-main > .gj-wrap,
.gj-page-wide .gj-footer .gj-wrap {
  max-width: 1120px;
  margin: 0 auto;
}

/* ---------- 页脚（深蓝黑底，750px内） ---------- */
.gj-footer {
  background: var(--c-footer);
  padding: calc(5 * var(--u)) 0 calc(4 * var(--u)); /* 37.5px 0 30px */
  text-align: center;
}

/* 品牌区：logo + 站名 */
.gj-footer-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(1.6 * var(--u)); /* 12px */
}

.gj-footer-logo {
  width: calc(5.6 * var(--u)); /* 42px */
  height: calc(5.6 * var(--u));
}

.gj-footer-name {
  color: #fff;
  font-size: calc(4.4 * var(--u)); /* 33px */
  font-weight: 700;
  letter-spacing: calc(0.4 * var(--u));
}

/* 描述行 */
.gj-footer-desc {
  margin-top: calc(2.4 * var(--u)); /* 18px */
  color: rgba(255, 255, 255, 0.62);
  font-size: calc(2.8 * var(--u)); /* 21px */
  line-height: 1.75;
}

/* 友情链接 */
.gj-footer-links {
  margin-top: calc(3.2 * var(--u)); /* 24px */
}

.gj-footer-links-title {
  color: rgba(255, 255, 255, 0.4);
  font-size: calc(2.8 * var(--u)); /* 21px */
  margin-bottom: calc(1.6 * var(--u)); /* 12px */
}

.gj-footer-links-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(1.6 * var(--u)) calc(2.8 * var(--u)); /* 12px 21px */
  list-style: none;
}

.gj-footer-links-list a {
  color: rgba(255, 255, 255, 0.62);
  font-size: calc(2.8 * var(--u)); /* 21px */
}

.gj-footer-links-list a:hover {
  color: #fff;
}

/* 分隔线 */
.gj-footer-line {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin-top: calc(3.2 * var(--u)); /* 24px */
}

/* 分类行 */
.gj-footer-cats {
  margin-top: calc(2.4 * var(--u)); /* 18px */
  color: rgba(255, 255, 255, 0.55);
  font-size: calc(2.5 * var(--u)); /* 18.75px */
  line-height: 1.6;
}

/* 版权行 */
.gj-footer-copy {
  margin-top: calc(0.8 * var(--u)); /* 6px */
  color: rgba(255, 255, 255, 0.5);
  font-size: calc(2.5 * var(--u)); /* 18.75px */
  line-height: 1.6;
}