/* ============================================================
   咸宁信息网 · 公共设计系统 common.css
   版本: v1.0 (2026-08-22 全站重构)
   ------------------------------------------------------------
   定位: 本地同城分类信息门户
   作用: ① 定义全站设计变量(主色/辅色/圆角/间距/字体/阴影)
        ② 封装公共组件(卡片/按钮/表单/标签/分页/侧栏/弹窗)
        ③ 统一布局容器与栅格
   引用顺序: 各页面 head 中 第一个 link (在 home_new.css 之前)
   维护: 改配色/圆角/间距只需改本文件 :root 变量, 全站生效
   ============================================================ */

/* ---------- 1. 设计变量(Design Tokens) ---------- */
:root{
  /* 主色系(蓝) */
  --hn-primary:        #2b6de8;   /* 主色: 链接/按钮/高亮 */
  --hn-primary-dark:   #1f5bd0;   /* 主色加深: hover */
  --hn-primary-light:  #eef4ff;   /* 主色浅底: hover背景/标签底 */
  --hn-primary-border: #c8d6f0;   /* 主色边框: 卡片hover */

  /* 强调色系(橙) */
  --hn-accent:         #ff6a00;   /* 强调色: 发布按钮/重点 */
  --hn-accent-dark:    #e85f00;   /* 强调色加深: hover */
  --hn-accent-light:   #fff7ed;   /* 强调色浅底 */

  /* 文字色系 */
  --hn-text:           #333;      /* 正文主色 */
  --hn-text-title:     #222;      /* 标题深色 */
  --hn-text-secondary: #888;      /* 次要文字: 描述/时间 */
  --hn-text-muted:     #bbb;      /* 弱化文字: 占位/空态 */
  --hn-link:           #444;      /* 列表链接默认 */

  /* 功能色 */
  --hn-danger:         #e33;      /* 红: 置顶/紧急/错误 */
  --hn-warning:        #f97316;   /* 橙: 需求类/提示 */
  --hn-success:        #16a34a;   /* 绿: 成功/认证 */

  /* 边框/背景 */
  --hn-border:         #e8e8e8;   /* 卡片边框 */
  --hn-border-light:   #f0f0f0;   /* 分隔线(浅) */
  --hn-border-dashed:  #f2f2f2;   /* 虚线分隔 */
  --hn-bg:             #f5f6fa;   /* 页面背景 */
  --hn-bg-card:        #fff;      /* 卡片背景 */
  --hn-bg-mod:         #fafbfd;   /* 模块标题底 */
  --hn-bg-hover:       #f5f9ff;   /* 列表行hover底 */

  /* 圆角 */
  --hn-radius:         12px;      /* 大圆角: 卡片 */
  --hn-radius-mid:     10px;      /* 中圆角: 输入框/小组件 */
  --hn-radius-sm:      8px;       /* 小圆角: 图片/按钮 */
  --hn-radius-pill:    16px;      /* 胶囊: 导航标签 */

  /* 阴影 */
  --hn-shadow-sm:      0 1px 4px rgba(0,0,0,.04);
  --hn-shadow-md:      0 6px 16px rgba(0,0,0,.10);
  --hn-shadow-lg:      0 8px 24px rgba(0,0,0,.12);

  /* 间距(8px 基准) */
  --hn-gap:            14px;      /* 模块间标准间距 */
  --hn-gap-sm:         10px;
  --hn-gap-lg:         24px;
  --hn-pad:            16px;      /* 卡片内边距 */
  --hn-pad-lg:         20px;

  /* 字体层级 */
  --hn-font:           "Microsoft YaHei","PingFang SC","Helvetica Neue",Arial,sans-serif;
  --hn-fs-h1:          22px;      /* 大标题 */
  --hn-fs-h2:          18px;      /* 模块标题 */
  --hn-fs-h3:          16px;      /* 卡片标题/重点 */
  --hn-fs-body:        14px;      /* 正文 */
  --hn-fs-small:       13px;      /* 次要 */
  --hn-fs-xs:          12px;      /* 弱化/时间 */
  --hn-lh:             1.5;       /* 行高 */

  /* 布局 */
  --hn-width:          1200px;    /* 内容最大宽度 */
  --hn-width-side:     280px;     /* 侧栏宽 */
  --hn-width-tag:      230px;     /* 标签云侧栏宽 */
  --hn-z-sticky:       100;
  --hn-z-modal:        1000;
}

/* ---------- 2. 基础重置(补齐 global.css, 统一盒模型) ---------- */
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%;height:auto}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400;margin:0}

/* ---------- 3. 布局容器(全站统一 1200px) ---------- */
/* 覆盖 V7 旧 .body1000(1000px) → 统一 1200px */
.body1000,.hn-container{width:100%;max-width:var(--hn-width);margin:0 auto;padding:0 12px}
.bodybgcolor{background:var(--hn-bg);padding-bottom:12px}

/* 主区布局: 左内容 + 右侧栏(flex) */
.hn-layout{display:flex;gap:var(--hn-gap);align-items:flex-start;max-width:var(--hn-width);margin:0 auto}
.hn-layout-main{flex:1;min-width:0}
.hn-layout-side{width:var(--hn-width-side);flex-shrink:0;display:flex;flex-direction:column;gap:var(--hn-gap)}

/* ---------- 4. 卡片组件(全站统一) ---------- */
.hn-card{background:var(--hn-bg-card);border:1px solid var(--hn-border);border-radius:var(--hn-radius);box-shadow:var(--hn-shadow-sm);overflow:hidden}
.hn-card-hd{display:flex;align-items:center;justify-content:space-between;padding:11px var(--hn-pad);border-bottom:1px solid var(--hn-border-light);background:var(--hn-bg-mod)}
.hn-card-hd .t{font-size:var(--hn-fs-h3);font-weight:bold;color:var(--hn-text-title)}
.hn-card-hd .t a{color:var(--hn-text-title)}
.hn-card-hd .t .hn-tag{display:inline-block;width:6px;height:15px;background:var(--hn-primary);border-radius:2px;vertical-align:-2px;margin-right:8px}
.hn-card-hd .o{font-size:var(--hn-fs-small)}
.hn-card-hd .o a{color:var(--hn-primary);margin-left:10px}
.hn-card-bd{padding:var(--hn-pad)}

/* 通用列表行(信息列表/侧栏列表) */
.hn-listrow{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px dashed var(--hn-border-dashed);font-size:var(--hn-fs-body)}
.hn-listrow:last-child{border-bottom:none}
.hn-listrow .it{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hn-listrow .it a{color:var(--hn-link)}
.hn-listrow .it a:hover{color:var(--hn-primary)}
.hn-listrow .tm{color:var(--hn-text-muted);font-size:var(--hn-fs-xs);margin-left:10px;white-space:nowrap}
.hn-listrow .ct{color:var(--hn-primary);font-size:var(--hn-fs-xs);margin-left:10px;white-space:nowrap}

/* 空状态 */
.hn-empty{color:var(--hn-text-muted);padding:18px 0;text-align:center;font-size:var(--hn-fs-small)}

/* ---------- 5. 按钮组件 ---------- */
/* 主按钮(蓝) */
.hn-btn{display:inline-block;background:var(--hn-primary);color:#fff;border:none;border-radius:var(--hn-radius-sm);padding:9px 24px;font-size:var(--hn-fs-body);cursor:pointer;text-align:center;transition:background .15s}
.hn-btn:hover{background:var(--hn-primary-dark)}
/* 强调按钮(橙, 发布) */
.hn-btn-accent{background:var(--hn-accent)}
.hn-btn-accent:hover{background:var(--hn-accent-dark)}
/* 幽灵按钮(描边) */
.hn-btn-ghost{background:#fff;color:var(--hn-primary);border:1px solid var(--hn-primary)}
.hn-btn-ghost:hover{background:var(--hn-primary-light)}
/* 小按钮 */
.hn-btn-sm{padding:6px 16px;font-size:var(--hn-fs-small)}
/* 覆盖 V7 老按钮类, 统一外观 */
.btn-normal{background:var(--hn-primary)!important;border:none!important;border-radius:var(--hn-radius-sm)!important;color:#fff!important;padding:8px 22px!important;font-size:var(--hn-fs-body)!important;cursor:pointer}
.btn-normal:hover{background:var(--hn-primary-dark)!important}
.fabu1{background:var(--hn-accent)!important;border:none!important;border-radius:var(--hn-radius-sm)!important;color:#fff!important;padding:11px 44px!important;font-size:17px!important;font-weight:bold;cursor:pointer}
.fabu1:hover{background:var(--hn-accent-dark)!important}

/* ---------- 6. 表单组件(统一输入框/下拉) ---------- */
.hn-input,
input.input,textarea.input,select.input,
.pstxt{width:100%;border:1px solid #ddd;border-radius:var(--hn-radius-mid);padding:8px 12px;font-size:var(--hn-fs-body);font-family:var(--hn-font);color:var(--hn-text);background:#fff;outline:none;transition:border-color .15s}
.hn-input:focus,
input.input:focus,textarea.input:focus,select.input:focus,.pstxt:focus{border-color:var(--hn-primary);box-shadow:0 0 0 3px var(--hn-primary-light)}
.hn-input::placeholder,textarea.input::placeholder{color:var(--hn-text-muted)}
/* 覆盖 V7 老 .publish-detail-item 输入框 */
.publish-detail-item input[type=text],.publish-detail-item textarea{border:1px solid #ddd;border-radius:var(--hn-radius-mid);padding:8px 12px;font-size:var(--hn-fs-body);outline:none}
.publish-detail-item input[type=text]:focus,.publish-detail-item textarea:focus{border-color:var(--hn-primary);box-shadow:0 0 0 3px var(--hn-primary-light)}

/* ---------- 7. 标签组件(tag chip) ---------- */
.hn-chip{display:inline-block;padding:4px 12px;border-radius:var(--hn-radius-pill);font-size:var(--hn-fs-small);color:#555;background:#fff;border:1px solid var(--hn-border);cursor:pointer;transition:all .15s;white-space:nowrap}
.hn-chip:hover{background:var(--hn-primary);color:#fff;border-color:var(--hn-primary)}
.hn-chip.accent:hover{background:var(--hn-warning);border-color:var(--hn-warning)}
.hn-chip .cnt{color:var(--hn-text-muted);font-size:var(--hn-fs-xs);margin-left:4px}
.hn-chip:hover .cnt{color:#fff}
/* 覆盖 V7 列表信息里的 font 标签类 */
.infolists .typo-smalls font{color:var(--hn-primary);background:var(--hn-primary-light);border-radius:4px;padding:1px 8px;margin-right:6px;font-size:var(--hn-fs-xs);font-weight:normal}

/* ---------- 8. 标签云侧栏组件 ---------- */
/* 列表页: 内容 + 右侧标签云 (CSS Grid 两列, 顶部对齐, 无空白, 现代浏览器都支持) */
.hn-list-layout{max-width:var(--hn-width);margin:0 auto;width:100%;display:grid;grid-template-columns:minmax(0,1fr) var(--hn-width-tag);gap:var(--hn-gap);align-items:start}
.hn-list-layout > .infolists{grid-column:1}
.hn-list-layout > .hn-list-content{grid-column:1}  /* 兼容list.html: content包裹infolists在col1 */
.hn-list-layout > .hn-tag-cloud{grid-column:2}
/* 标签云: 卡片样式 */
.hn-tag-cloud{width:100%;background:var(--hn-bg-card);border:1px solid var(--hn-border);border-radius:var(--hn-radius);box-shadow:var(--hn-shadow-sm);overflow:hidden}
.hn-tag-cloud .hn-tag-cloud-hd{padding:11px var(--hn-pad);border-bottom:1px solid var(--hn-border-light);background:var(--hn-bg-mod);font-size:var(--hn-fs-h3);font-weight:bold;color:var(--hn-text-title)}
.hn-tag-cloud .hn-tag-cloud-hd .hn-tag{display:inline-block;width:6px;height:15px;background:var(--hn-primary);border-radius:2px;vertical-align:-2px;margin-right:8px}
.hn-tag-cloud ul{list-style:none;margin:0;padding:10px 14px;display:flex;flex-wrap:wrap;gap:8px}
.hn-tag-cloud ul li{margin:0}
.hn-tag-cloud ul li a{display:inline-block;padding:4px 11px;border-radius:var(--hn-radius-pill);font-size:var(--hn-fs-small);color:#555;background:#fff;border:1px solid var(--hn-border);transition:all .15s}
.hn-tag-cloud ul li a:hover{background:var(--hn-primary);color:#fff;border-color:var(--hn-primary)}
.hn-tag-cloud ul li a .cnt{color:var(--hn-text-muted);font-size:var(--hn-fs-xs);margin-left:3px}
.hn-tag-cloud ul li a:hover .cnt{color:#fff}

/* ---------- 9. 分页组件(统一) ---------- */
.pagination2,.hn-pager{max-width:var(--hn-width);margin:18px auto;text-align:center}
.pagination2 a,.pagination2 span,.hn-pager a,.hn-pager span{display:inline-block;background:#fff;border:1px solid #e0e0e0;border-radius:var(--hn-radius-sm);padding:6px 14px;margin:0 4px;color:#555;font-size:var(--hn-fs-body);transition:all .15s}
.pagination2 a:hover,.hn-pager a:hover{border-color:var(--hn-primary);color:var(--hn-primary)}
.pagination2 .current,.hn-pager .current{background:var(--hn-primary);border-color:var(--hn-primary);color:#fff;font-weight:bold}

/* ---------- 10. 弹窗/提示框组件 ---------- */
/* 遮罩 */
.hn-modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:var(--hn-z-modal);display:none;align-items:center;justify-content:center}
.hn-modal-mask.show{display:flex}
/* 弹窗主体 */
.hn-modal{background:#fff;border-radius:var(--hn-radius);box-shadow:var(--hn-shadow-lg);max-width:480px;width:90%;max-height:85vh;overflow:auto;animation:hn-modal-in .2s ease}
@keyframes hn-modal-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.hn-modal-hd{display:flex;align-items:center;justify-content:space-between;padding:14px var(--hn-pad);border-bottom:1px solid var(--hn-border-light)}
.hn-modal-hd .t{font-size:var(--hn-fs-h3);font-weight:bold;color:var(--hn-text-title)}
.hn-modal-hd .close{cursor:pointer;color:var(--hn-text-secondary);font-size:20px;line-height:1;border:none;background:none}
.hn-modal-hd .close:hover{color:var(--hn-danger)}
.hn-modal-bd{padding:var(--hn-pad-lg);font-size:var(--hn-fs-body);color:var(--hn-text)}
.hn-modal-ft{padding:12px var(--hn-pad);border-top:1px solid var(--hn-border-light);text-align:right;display:flex;gap:10px;justify-content:flex-end}
/* 轻提示 toast */
.hn-toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.75);color:#fff;padding:10px 22px;border-radius:var(--hn-radius-mid);font-size:var(--hn-fs-body);z-index:var(--hn-z-modal);display:none}
.hn-toast.show{display:block}

/* ---------- 11. 面包屑 ---------- */
.location{margin:10px auto;font-size:var(--hn-fs-small);color:var(--hn-text-secondary);max-width:var(--hn-width);padding:0 12px}
.location a{color:var(--hn-primary)}
.location a:hover{text-decoration:underline}

/* ---------- 12. 图片统一裁切规范(避免大小不一破坏布局) ---------- */
/* 列表缩略图: 110x82 统一裁切 */
.hn-img-thumb{width:110px;height:82px;object-fit:cover;border-radius:var(--hn-radius-sm);border:1px solid #eee;display:block}
.infolists .media-cap img{width:110px!important;height:82px!important;object-fit:cover;border-radius:var(--hn-radius-sm)!important;border:1px solid #eee}
/* 详情主图 */
.hn-img-main{max-width:100%;border-radius:var(--hn-radius-mid)}
/* 头像 */
.hn-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover}

/* ---------- 13. 工具类 ---------- */
.hn-clear{clear:both}
.hn-text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hn-text-primary{color:var(--hn-primary)}
.hn-text-danger{color:var(--hn-danger)}
.hn-text-muted{color:var(--hn-text-secondary)}
.hn-mt{margin-top:var(--hn-gap)}
.hn-mb{margin-bottom:var(--hn-gap)}
.hn-hidden{display:none!important}

/* ---------- 14. 响应式(移动端适配) ---------- */
@media (max-width: 900px){
  :root{--hn-gap:10px;--hn-pad:12px}
  .hn-layout{flex-direction:column}.hn-list-layout{grid-template-columns:1fr}
  .hn-layout-side,.hn-list-layout .hn-tag-cloud{width:100%}
  .body1000,.hn-container{padding:0 8px}
  .hn-card-bd{padding:12px}
  .fabu1{padding:10px 28px;font-size:15px}
  .hn-listrow{font-size:13px}
}
@media (max-width: 600px){
  .hn-chip{font-size:12px;padding:3px 9px}
  .hn-btn{padding:8px 18px}
}

/* ============================================================
   完 · common.css
   后续维护: 配色改 :root; 组件改对应 section; 新增组件加新 section
   ============================================================ */