/* ==========================================================================
   branch-m2026-pages.css — 分站页面级样式（移动）
   用法：各分站移动页面模板在 /css/branch-m2026.css（通用组件）之后引入本文件。
   分区：一、首页 / 二、列表页 / 三、文章页。
   约定：Banner 城市定制一律挂 .branch-hero--{city} 变体类（HTML 中
   <section class="banner branch-hero branch-hero--{city}">），新增城市时
   复制对应变体段、改类名并替换背景图与强调色即可，勿改通用组件。
   ========================================================================== */


/* ==========================================================================
   一、首页（mobile/index.html）
   ========================================================================== */

/* ---------- 为什么选择立华星财务：白色面板 + 01–06 编号列举，与上方图标卡片区隔 ---------- */
.why-panel {
  background-color: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 16px;
  box-shadow: var(--shadow-sm);
}
.why-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.why-row:last-child { border-bottom: 0; }
.why-row .num {
  flex: none;
  width: 40px;
  font-family: Roboto, "DIN Alternate", sans-serif;
  font-size: 22px;
  font-weight: bold;
  line-height: 1;
  color: var(--red);
  border-right: 2px solid var(--red-light);
  padding-right: 12px;
}
.why-row h3 { font-size: var(--fs-card); font-weight: 500; line-height: 1.5; color: var(--black); }
.why-row p { font-size: var(--fs-aux); line-height: 1.5; color: var(--gray-light); margin-top: 2px; }

/* ---------- 政策动态 / 财务知识 Tab（当前红底白字，点击切换列表） ---------- */
.home-tabs { display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; cursor: pointer; }
.home-tabs span {
  flex: 1; justify-content: center;
  min-height: 36px; display: inline-flex; align-items: center;
  padding: 0 4px; font-size: 13px; white-space: nowrap;
  border: 1px solid var(--red); border-radius: 999px; color: var(--red);
  font-weight: 500;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.home-tabs .on { background-color: var(--red); color: #FFFFFF; box-shadow: 0 5px 14px rgba(217, 39, 46, .16); }

/* ---------- Banner 城市定制：长沙（.branch-hero--changsha） ----------
   城市相关值（换城市时只需改这两处）：
   - 背景图：/images/branch/branch-banners/changsha-hero-mobile.png
   - 强调色：#FFB07D（banner-kicker 文字、services 序号圈、trust 数字） */
.branch-hero--changsha { min-height:600px; padding:26px 20px 24px; background-image:url("/images/branch/branch-banners/changsha-hero-mobile.png"); background-position:center center; background-color:#10233b; color:#fff; text-align:left; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; }
.branch-hero--changsha::after { background:rgba(3,12,24,.12); }
.branch-hero--changsha .banner-kicker { align-self:flex-start; display:inline-flex; align-items:center; min-height:34px; padding:0 14px; margin:0 0 16px; border:1px solid rgba(255,255,255,.5); border-radius:18px; color:#FFB07D; font-size:14px; letter-spacing:.5px; background-color:rgba(4,14,27,.34); }
.branch-hero--changsha .banner-brand { max-width:340px; font-size:36px; line-height:1.2; letter-spacing:0; text-align:left; text-shadow:0 2px 14px rgba(0,0,0,.3); }
.branch-hero--changsha .banner-sub { max-width:340px; margin-top:14px; font-size:17px; line-height:1.6; opacity:1; text-shadow:0 2px 12px rgba(0,0,0,.3); }
.branch-hero--changsha .banner-services { display:grid; grid-template-columns:repeat(6,1fr); gap:7px; margin-top:auto; width:100%; font-size:13px; line-height:1.3; }
.branch-hero--changsha .banner-services span { grid-column:span 2; min-width:0; min-height:78px; padding:10px 2px 9px; border:1px solid rgba(255,255,255,.2); border-radius:4px; background-color:rgba(8,22,38,.52); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#fff; backdrop-filter:blur(3px); }
.branch-hero--changsha .banner-services span:nth-child(4) { grid-column:2 / span 2; }
.branch-hero--changsha .banner-services b { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid #FFB07D; border-radius:50%; color:#FFB07D; font-size:15px; font-weight:500; }
.branch-hero--changsha .banner-trust { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:18px; color:rgba(255,255,255,.94); font-size:13px; white-space:nowrap; }
.branch-hero--changsha .banner-trust strong { color:#FFB07D; font-size:15px; }
.branch-hero--changsha .banner-trust i { width:1px; height:14px; margin:0 6px; background-color:rgba(255,255,255,.4); }

/* ---------- Banner 城市定制：东莞（.branch-hero--dongguan） ----------
   - 背景图：/images/branch/branch-banners/dongguan-hero-mobile.png
   - 强调色：#A8D2FF */
.branch-hero--dongguan { min-height:600px; padding:26px 20px 24px; background-image:url("/images/branch/branch-banners/dongguan-hero-mobile.png"); background-position:center center; background-color:#10233b; color:#fff; text-align:left; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; }
.branch-hero--dongguan::after { background:rgba(3,12,24,.12); }
.branch-hero--dongguan .banner-kicker { align-self:flex-start; display:inline-flex; align-items:center; min-height:34px; padding:0 14px; margin:0 0 16px; border:1px solid rgba(255,255,255,.5); border-radius:18px; color:#A8D2FF; font-size:14px; letter-spacing:.5px; background-color:rgba(4,14,27,.34); }
.branch-hero--dongguan .banner-brand { max-width:340px; font-size:36px; line-height:1.2; letter-spacing:0; text-align:left; text-shadow:0 2px 14px rgba(0,0,0,.3); }
.branch-hero--dongguan .banner-sub { max-width:340px; margin-top:14px; font-size:17px; line-height:1.6; opacity:1; text-shadow:0 2px 12px rgba(0,0,0,.3); }
.branch-hero--dongguan .banner-services { display:grid; grid-template-columns:repeat(6,1fr); gap:7px; margin-top:auto; width:100%; font-size:13px; line-height:1.3; }
.branch-hero--dongguan .banner-services span { grid-column:span 2; min-width:0; min-height:78px; padding:10px 2px 9px; border:1px solid rgba(255,255,255,.2); border-radius:4px; background-color:rgba(8,22,38,.52); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#fff; backdrop-filter:blur(3px); }
.branch-hero--dongguan .banner-services span:nth-child(4) { grid-column:2 / span 2; }
.branch-hero--dongguan .banner-services b { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid #A8D2FF; border-radius:50%; color:#A8D2FF; font-size:15px; font-weight:500; }
.branch-hero--dongguan .banner-trust { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:18px; color:rgba(255,255,255,.94); font-size:13px; white-space:nowrap; }
.branch-hero--dongguan .banner-trust strong { color:#A8D2FF; font-size:15px; }
.branch-hero--dongguan .banner-trust i { width:1px; height:14px; margin:0 6px; background-color:rgba(255,255,255,.4); }

/* ---------- Banner 城市定制：佛山（.branch-hero--foshan） ----------
   - 背景图：/images/branch/branch-banners/foshan-hero-mobile.png
   - 强调色：#F2C477 */
.branch-hero--foshan { min-height:600px; padding:26px 20px 24px; background-image:url("/images/branch/branch-banners/foshan-hero-mobile.png"); background-position:center center; background-color:#10233b; color:#fff; text-align:left; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; }
.branch-hero--foshan::after { background:rgba(3,12,24,.12); }
.branch-hero--foshan .banner-kicker { align-self:flex-start; display:inline-flex; align-items:center; min-height:34px; padding:0 14px; margin:0 0 16px; border:1px solid rgba(255,255,255,.5); border-radius:18px; color:#F2C477; font-size:14px; letter-spacing:.5px; background-color:rgba(4,14,27,.34); }
.branch-hero--foshan .banner-brand { max-width:340px; font-size:36px; line-height:1.2; letter-spacing:0; text-align:left; text-shadow:0 2px 14px rgba(0,0,0,.3); }
.branch-hero--foshan .banner-sub { max-width:340px; margin-top:14px; font-size:17px; line-height:1.6; opacity:1; text-shadow:0 2px 12px rgba(0,0,0,.3); }
.branch-hero--foshan .banner-services { display:grid; grid-template-columns:repeat(6,1fr); gap:7px; margin-top:auto; width:100%; font-size:13px; line-height:1.3; }
.branch-hero--foshan .banner-services span { grid-column:span 2; min-width:0; min-height:78px; padding:10px 2px 9px; border:1px solid rgba(255,255,255,.2); border-radius:4px; background-color:rgba(8,22,38,.52); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#fff; backdrop-filter:blur(3px); }
.branch-hero--foshan .banner-services span:nth-child(4) { grid-column:2 / span 2; }
.branch-hero--foshan .banner-services b { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid #F2C477; border-radius:50%; color:#F2C477; font-size:15px; font-weight:500; }
.branch-hero--foshan .banner-trust { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:18px; color:rgba(255,255,255,.94); font-size:13px; white-space:nowrap; }
.branch-hero--foshan .banner-trust strong { color:#F2C477; font-size:15px; }
.branch-hero--foshan .banner-trust i { width:1px; height:14px; margin:0 6px; background-color:rgba(255,255,255,.4); }

/* ---------- Banner 城市定制：杭州（.branch-hero--hangzhou） ----------
   - 背景图：/images/branch/branch-banners/hangzhou-hero-mobile.png
   - 强调色：#9DE5DA */
.branch-hero--hangzhou { min-height:600px; padding:26px 20px 24px; background-image:url("/images/branch/branch-banners/hangzhou-hero-mobile.png"); background-position:center center; background-color:#10233b; color:#fff; text-align:left; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; }
.branch-hero--hangzhou::after { background:rgba(3,12,24,.12); }
.branch-hero--hangzhou .banner-kicker { align-self:flex-start; display:inline-flex; align-items:center; min-height:34px; padding:0 14px; margin:0 0 16px; border:1px solid rgba(255,255,255,.5); border-radius:18px; color:#9DE5DA; font-size:14px; letter-spacing:.5px; background-color:rgba(4,14,27,.34); }
.branch-hero--hangzhou .banner-brand { max-width:340px; font-size:36px; line-height:1.2; letter-spacing:0; text-align:left; text-shadow:0 2px 14px rgba(0,0,0,.3); }
.branch-hero--hangzhou .banner-sub { max-width:340px; margin-top:14px; font-size:17px; line-height:1.6; opacity:1; text-shadow:0 2px 12px rgba(0,0,0,.3); }
.branch-hero--hangzhou .banner-services { display:grid; grid-template-columns:repeat(6,1fr); gap:7px; margin-top:auto; width:100%; font-size:13px; line-height:1.3; }
.branch-hero--hangzhou .banner-services span { grid-column:span 2; min-width:0; min-height:78px; padding:10px 2px 9px; border:1px solid rgba(255,255,255,.2); border-radius:4px; background-color:rgba(8,22,38,.52); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#fff; backdrop-filter:blur(3px); }
.branch-hero--hangzhou .banner-services span:nth-child(4) { grid-column:2 / span 2; }
.branch-hero--hangzhou .banner-services b { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border:1px solid #9DE5DA; border-radius:50%; color:#9DE5DA; font-size:15px; font-weight:500; }
.branch-hero--hangzhou .banner-trust { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:18px; color:rgba(255,255,255,.94); font-size:13px; white-space:nowrap; }
.branch-hero--hangzhou .banner-trust strong { color:#9DE5DA; font-size:15px; }
.branch-hero--hangzhou .banner-trust i { width:1px; height:14px; margin:0 6px; background-color:rgba(255,255,255,.4); }


/* ==========================================================================
   二、列表页（mobile/list_cscwzs.html）
   ========================================================================== */

/* ---------- 列表区：标签行与列表的衔接留白 ---------- */
.news-wrap { padding-top: 8px; }

/* ---------- 分页器底部补 40px 版块间距（规范 3.3 栏目上下间距） ---------- */
.pager { padding-bottom: 40px; }

.no-data { padding: 40px 0; text-align: center; color: var(--gray-light); font-size: var(--fs-body); }


/* ==========================================================================
   三、文章页（mobile/msg_cscwzs.html）
   ========================================================================== */

/* ---------- 顶部品牌横幅（浅红渐变底，避免大面积红底刺眼；高 ≤88px，仅品牌名 + 一句 slogan） ---------- */
.article-top {
  background: linear-gradient(180deg, var(--red-light) 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--border);
  padding: 14px var(--page-pad) 12px;   /* 实测总高约 75px */
}
.article-top .brand { font-size: var(--fs-banner); font-weight: bold; line-height: 1.3; color: var(--black); border-left: 4px solid var(--red); padding-left: 12px; }
.article-top .slogan { font-size: var(--fs-aux); line-height: 1.5; color: var(--red); margin-top: 2px; padding-left: 16px; }

/* ---------- 标题与信息行（规范 6.2：标题 18px Bold；信息行 12px 辅助灰一行排开） ---------- */
.article-head { padding-top: 24px; }
.article-title { font-size: var(--fs-section); font-weight: bold; line-height: 1.3; color: var(--black); }
.article-meta {
  display: flex; gap: 16px;
  margin-top: 12px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-aux); line-height: 1.5; color: var(--gray-light);
}

/* ---------- 正文（规范 6.2 重点：16px / 行高 1.9 / 段距 16px） ---------- */
.article-body { margin-top: 20px; font-size: var(--fs-article); line-height: 1.9; color: var(--gray); }
.article-body p { margin-bottom: 16px; }
.article-body a { color: var(--red); text-decoration: underline; }
/* 正文内小节标题：15px Bold 标题黑 */
.article-body h2 { font-size: var(--fs-card); font-weight: bold; line-height: 1.4; color: var(--black); margin: 28px 0 12px; }
/* 正文中强调的关键数字 */
.article-body .em { color: var(--red); font-weight: 500; }

/* ---------- 表格（允许横向滚动，表头浅灰底，隔行 #F7F7F7） ---------- */
.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.article-body table {
  width: 100%; min-width: 520px;   /* 窄屏触发横向滚动 */
  border-collapse: collapse;
  font-size: var(--fs-body); line-height: 1.5; text-align: center;
}
.article-body th, .article-body td { padding: 10px 12px; border: 1px solid var(--border); white-space: nowrap; }
.article-body thead th { background-color: var(--bg-gray); color: var(--black); font-weight: 500; }
.article-body tbody tr:nth-child(even) td { background-color: #F7F7F7; }
/* 横滑提示：12px 辅助灰 */
.table-tip { font-size: var(--fs-aux); line-height: 1.5; color: var(--gray-light); margin: 8px 0 16px; }

/* ---------- 上一篇 / 下一篇 ---------- */
.prev-next { margin-top: 24px; border-top: 1px solid var(--border); }
.prev-next p { padding: 12px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-body); line-height: 1.7; }
.prev-next .label { color: var(--gray-light); margin-right: 8px; }

/* ---------- 相关阅读（规范 6.2：.side-title + .news-list 纯文字） ---------- */
.like-sec { padding: 24px var(--page-pad) 40px; }

/* 正文内图片（后台编辑器上传的配图） */
.article-body .article-image { text-align: center; margin: 20px 0; }
.article-body img { max-width: 100%; height: auto; border-radius: 2px; }

/* ---------- 移动端首页常见问题（FAQ） ---------- */
.m-faq .faq-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.m-faq .faq-card .q { font-weight: 600; line-height: 1.6; }
.m-faq .faq-card .a { color: var(--gray-light); line-height: 1.7; margin-top: 6px; font-size: var(--fs-aux); }
.m-faq .faq-badge { display: inline-block; font-style: normal; border-radius: 4px; padding: 0 5px; margin-right: 6px; font-size: 12px; }
.m-faq .faq-badge--q { background: var(--red); color: #fff; }
.m-faq .faq-badge--a { background: var(--bg-gray); color: var(--black); border: 1px solid var(--border); }