/* ============================================================
 * 老站样式 —— 通过 nuxt.config 的 app.head.link 以 <link> 方式引入
 * 见 nuxt.config.ts 的 app.head.link 配置
 *
 * 为什么不用 @import / css 数组？
 *   老站 CSS 在 /resources/** 下（public 静态目录），
 *   任何经过 Vite/PostCSS 的处理都会尝试按文件系统相对路径解析，
 *   导致 '/resources/ui/ui.css' 被解析成 'C:\resources\ui\ui.css' 而报 ENOENT。
 *   直接用 <link> 让浏览器按 URL 加载，既零转换风险，又保持原顺序。
 * ============================================================ */

/* ============================================================
 * 补充规则（2026-10-14）—— 不覆盖老站样式，只做必要加固
 * ============================================================ */

/* ------------------------------------------------------------
 * 分页条「上一页 / 下一页」宽度（2026-10-14 修正）
 *
 * 老站 style.css 给分页按钮定的是固定方块：
 *   .page a, .page span { width: 47px; height: 45px; ... }        ← 普通页码
 *   .page a.goprev, .page span.goprev,
 *   .page a.next,   .page span.next { width: 80px; }              ← 上一页/下一页
 *
 * 也就是说「上一页 / 下一页」必须带 .goprev / .next 类才会被加宽到 80px，
 * 否则三个字塞不进 47px 方块就会折行。
 *
 * 新版此前把两个按钮都写成了 .gonext（不存在的类名）→ 落到 47px 规则 →
 * 「上一页」「下一页」跨行显示（用户反馈）。
 * 组件已改为老站类名；这里再补一条显式规则兜底，
 * 避免老站 CSS 加载顺序变化或未来改动重新引入该问题。
 * 尺寸与老站保持一致（80px，含 1px 边框实际渲染 82px）。
 * ------------------------------------------------------------ */
.page a.goprev,
.page a.next {
  width: 80px;
}

/* 分页条：禁止按钮内部文字折行（老站按钮是单行方块） */
.page > a,
.page > span {
  white-space: nowrap;
}

/* 分页条在容器内水平居中（老站 .page { text-align:center }，此处冗余加固） */
.page {
  display: block;
  text-align: center;
}

/* ------------------------------------------------------------
 * 表格列宽兜底（2026-10-14 第二轮，测试问题 #3）
 *
 * 老站用 HTML 旧式属性表达列宽：
 *   <td width="420" nowrap valign="bottom">
 * 静态页转换曾把 width/nowrap/valign 丢掉 →
 * /sale/yuan-liao-yao-list-0.htm 表格从 888px 塌成 396px。
 *
 * 已在 SaleYuanLiaoYao.vue 补回属性（源数据修复，首选方案）。
 * 这里再加一层 CSS 兜底：只要 td 仍带 width 属性，就按属性值锁定列宽，
 * 并禁止单元格内文字折行 —— 与老站的 nowrap 行为一致。
 *
 * ⚠️ 只对「带 width 属性的 td」生效，不影响其他表格。
 * ------------------------------------------------------------ */
.gongsigaikuang table td[width] {
  word-break: break-all; /* 老站该表 style 里的同名声明 */
}
.gongsigaikuang table td[nowrap] {
  white-space: nowrap;
}
/* 老站该表容器就是 1200px（.wrap），表格按列宽自然撑到 888px。
   若浏览器把 table-layout 交给内容决定，会退化成自适应宽度，
   这里显式固定为 auto 并让 width 属性生效。 */
.gongsigaikuang table {
  table-layout: auto;
}

/* ------------------------------------------------------------
 * 表单校验提示 + 提交结果弹窗（2026-10-14 第二轮，测试问题 #4）
 *
 * 老站靠 Validform 与 box 两个第三方库注入样式；新架构不再引入这两个库，
 * 故在此按实测值复刻（www.nhwa-group.com/job/jian-li-tou-di.htm）：
 *   · 错误提示 .Validform_checktip.Validform_wrong
 *       position:absolute; color:#f00; font-size:13px; 位于输入框右侧
 *   · 错误输入框 .Validform_error
 *       border:1px solid #ddd; background:#ffe7e7
 * ------------------------------------------------------------ */
.Form-J1 .Form-J1-li {
  position: relative; /* 让提示可以相对本行绝对定位 */
}

/* 错误提示：红字，贴在输入框右侧（老站实测 left:371px / top:15px，此处用相对定位自适应） */
.Form-J1 .Form-J1-li .Validform_checktip {
  font-size: 13px;
  line-height: 28px;
  white-space: nowrap;
}
.Form-J1 .Form-J1-li .Validform_checktip.Validform_wrong {
  color: #ff0000;
}
/* 工作经历（textarea 行）的提示另起一行，避免遮挡下方「验证码」行 */
.Form-J1 .Form-J1-li textarea + .Validform_checktip.Validform_wrong {
  display: block;
  margin-top: 4px;
  line-height: 1.6;
  white-space: normal;
}
/* 含 textarea 的表单行：撑开高度，让提示有位置且不压住下一行 */
.Form-J1 .Form-J1-li:has(> textarea) {
  padding-bottom: 22px;
}

/* 错误输入框：粉底（老站实测 rgb(255,231,231)） */
.Form-J1 .form1 input.Validform_error,
.Form-J1 .form1 textarea.Validform_error,
.Form-J1 .form1 select.Validform_error {
  background: #ffe7e7;
  border: 1px solid #ddd;
}

/* 日期控件（老站 My97，新架构用原生 date）保持与老站输入框一致的观感 */
.Form-J1 .Form-J1-li input[type='date'] {
  height: 28px;
  line-height: 28px;
  border: 1px #ddd solid;
  width: 70%;
  box-sizing: border-box;
  padding: 0 4px;
  background: #fff;
}

/* ---------------- 提交结果弹窗（复刻老站 box 弹层外观）---------------- */
.jb51_box {
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.jb51_mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}
.jb51_dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.jb51_head {
  position: relative;
  height: 38px;
  line-height: 38px;
  background: #1c7dbf; /* 与老站主题蓝一致 */
  color: #fff;
  padding: 0 34px 0 14px;
  font-size: 14px;
}
.jb51_title {
  font-weight: 500;
}
.jb51_close {
  position: absolute;
  right: 0;
  top: 0;
  width: 34px;
  height: 38px;
  line-height: 36px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  text-decoration: none;
}
.jb51_close:hover {
  background: rgba(255, 255, 255, 0.15);
}
.jb51_body {
  padding: 26px 18px;
  font-size: 14px;
  color: #333;
  text-align: center;
  min-height: 40px;
}
.jb51_foot {
  padding: 0 0 18px;
  text-align: center;
}
.jb51_ok {
  min-width: 86px;
  height: 32px;
  line-height: 32px;
  background: #1c7dbf;
  color: #fff;
  border: none;
  border-radius: 3px;
  font-size: 14px;
  cursor: pointer;
  padding: 0 18px;
}
.jb51_ok:hover {
  background: #17668f;
}

/* ------------------------------------------------------------
 * 地图降级层（2026-10-14 第二轮，测试问题 #6）
 *
 * 百度地图 AK 已被账号所有者删除（API 返回 error:201），
 * 校验不通过 → SDK 不请求瓦片 → 容器只剩米色背景（老站同样如此）。
 * 业务侧重新申请 AK 前，用本层展示公司联系信息，避免大片空白。
 * 尺寸跟随 .map_box（老站 style.css: `.map_box{width:100%;height:500px;overflow:hidden}`），
 * 背景沿用老站容器的米色 #f3f1ec。
 * ------------------------------------------------------------ */
.map_box {
  position: relative;
}
/* 降级层必须撑满 .map_box（500px），否则绝对定位的 inset:0 会因父级无高度而塌缩 */
.contact .part1 .map_box {
  height: 500px;
}
.map_fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f1ec; /* 老站 #contactMap 容器的背景色 */
  z-index: 2;
}
.map_fallback_inner {
  text-align: center;
  padding: 0 20px;
  color: #666;
  font-size: 14px;
  line-height: 2;
}
.map_fallback_ico {
  display: inline-block;
  width: 46px;
  height: 46px;
  margin-bottom: 10px;
  background: no-repeat center/contain;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.6'%3E%3Cpath d='M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
}
.map_fallback_name {
  font-size: 17px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}
.map_fallback_addr,
.map_fallback_tel {
  color: #666;
}
.map_fallback_tel a {
  color: #1c7dbf;
  text-decoration: none;
}
.map_fallback_tel a:hover {
  text-decoration: underline;
}
.map_fallback_link {
  display: inline-block;
  margin-top: 10px;
  color: #1c7dbf;
  text-decoration: none;
  font-size: 13.5px;
}
.map_fallback_link:hover {
  text-decoration: underline;
}

/* ── 2026-10-14：联系我们静态地图（替代 JS SDK，页面直接出图）
      整张图即链接，点击跳转百度地图详细页 ── */
#contactMap-45701 {
  position: relative;
  overflow: hidden;
  background: #f3f1ec;
}
#contactMap-45701 .bmap_static_wrap {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  text-decoration: none;
}
#contactMap-45701 .bmap_static {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#contactMap-45701 .bmap_static_tip {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid #d5d8dc;
  border-radius: 4px;
  color: #1c7dbf;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  transition: background .15s, border-color .15s;
}
#contactMap-45701 .bmap_static_wrap:hover .bmap_static_tip {
  background: #fff;
  border-color: #1c7dbf;
}

/* ============================================================
   2026-10-30 传承与沿革：年份面板互斥显示
   ------------------------------------------------------------
   症状：点「2025年」左侧高亮正确，右侧显示的却是别的年份内容。

   根因：老站靠 resources/modules/tab.js 用 seajs.importStyle 运行时注入
         .tab .tab_c{display:none} / .tab .tab_c_cur{display:block}
         新站是 Vue、没引 tab.js，34 个 .his_right 全部 display:block
         叠成一摞，右侧看到的只是叠层里露出来的某一块。

   为什么放这里而不是组件 <style>：
     该组件由 static-pages.ts 动态 import，组件级 CSS 不会随页面注入
     （实测 HTML 里根本没有 AboutChuanCheng.css 的 link）。
     放 style.css 也不行 —— 被后续加载的样式盖掉。
     legacy.css 是最后一个 <link>，专门用来覆盖老站样式。

   为什么不用 v-show / :style：
     实测 SSR 首屏 style 属性为空字符串，v-show 要等首次交互才接管，
     「刚打开页面」那一刻仍是 34 个全显示。纯 CSS 从第一帧就对。

   为什么不用 scoped + :deep()：
     编译成 `[data-v-xxx] .his_right_area ...`，要求祖先带 scope 属性，
     实测该属性没落到 .his_right_area 的父级 → 规则整体失效。
   ============================================================ */
/*
   ============================================================
   2026-11-04 改版：全部年份连续展示，年份 Tab 改为滚动锚点

   老规则是「只显示 tab_c_cur 那一个」，配合组件只渲染一条来实现。
   现在需求变了：右侧要把 34 个年份全部铺开，点左侧年份滚动定位过去。

   所以：
     · 去掉 display:none —— 所有 .his_right 一直可见
     · 去掉 tab_c_cur 显隐规则 —— 它现在只用于左侧 Tab 的高亮，不控面板
     · 补 scroll-margin-top —— 滚动定位时留出页头高度，避免标题被盖住

   ⚠️ 不要恢复 display:none：
      组件已改为渲染全部年份，只要有一处 display:none 就会整段不显示。
   ============================================================ */
.licheng .his_right_area .his_right.tab_c {
  display: block;
  /* 滚动定位的落点留白（吸顶导航约 80px） */
  scroll-margin-top: 90px;
}

/* 右侧面板之间留出分隔，否则 34 段内容会连成一片看不出边界 */
.licheng .his_right_area .his_right.tab_c + .his_right.tab_c {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px dashed #e4e4e4;
}