/* ==========================================================================
   秭归房产 复刻版 — 设计令牌
   提取自站点 CDN CSS：base.css / index.css / list.css / mb-common.css
   ========================================================================== */

:root {
  /* ---------- 主色（深翡翠绿：沉稳、高端、房产信托质感） ---------- */
  --c-primary:        #0b7a52;
  --c-primary-deep:   #086243;
  --c-primary-light:  #2fb287;
  --c-primary-soft:   #e6f3ee;   /* 浅绿底 */
  --c-primary-87:     rgba(11, 122, 82, .12);
  --c-gold:           #b98a4a;   /* 高端金点缀（VIP/会员/精品） */
  --c-price:          #e84c3d;   /* 价格红 */
  --c-geren:          #e8877a;   /* 个人房源标签 */
  --c-muted:          #9aa1ab;   /* 次要灰：单价/辅助 */
  --c-title:          #15181d;   /* 标题近黑 */
  --c-text:           #3a3f47;   /* 正文 */
  --c-text-sub:       #6b7280;   /* 次级正文 */
  --c-text-weak:      #9aa1ab;   /* 弱化文字 */
  --c-text-hint:      #b8bec8;   /* 提示 */

  /* ---------- 背景 ---------- */
  --bg-body:          #f5f6f8;   /* 页面底（冷灰白） */
  --bg-panel:         #fafafa;   /* 面板底 */
  --bg-white:         #fff;

  /* ---------- 描边 ---------- */
  --line:             #f0f1f4;
  --line-card:        #eef0f3;
  --line-nav:         #eceef1;

  /* ---------- 圆角（大圆角现代感） ---------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  /* ---------- 阴影（柔和弥散，替代硬边框） ---------- */
  --shadow-sm: 0 1px 4px rgba(21, 24, 29, .05);
  --shadow-md: 0 4px 16px rgba(21, 24, 29, .08);
  --shadow-lg: 0 10px 32px rgba(21, 24, 29, .12);

  /* ---------- 字号 ---------- */
  --fs-xs: 11px;   /* 单价/角标 */
  --fs-sm: 13px;   /* 正文/标签/导航 */
  --fs-md: 15px;   /* 卡片标题/价格 */
  --fs-lg: 19px;   /* 页面小标题 */

  /* ---------- 尺寸 ---------- */
  --thumb-w: 116px;      /* 卡片缩略图宽 */
  --nav-h: 57px;         /* 底部导航高 */
  --filter-h: 44px;      /* 筛选栏高 */
  --page-pad: 16px;      /* 页面左右内边距 */
}

/* ==========================================================================
   Reset / 基础
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--fs-sm);
  color: var(--c-text);
  background: var(--bg-body);
  -webkit-font-smoothing: antialiased;
  letter-spacing: .2px;
}

body { max-width: 640px; margin: 0 auto; position: relative; overflow-x: hidden; }

ul, ol, li { list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; border: 0; }
input, button, textarea, select { font-family: inherit; font-size: inherit; outline: none; border: 0; background: none; color: inherit; }
em, i { font-style: normal; }
table { border-collapse: collapse; width: 100%; }

/* ---------- 通用工具类 ---------- */
.flexbox { display: flex; }
.flex1 { flex: 1; }
.text_cut { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.twoline { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clearfix::after { content: ""; display: block; clear: both; }

/* Swiper 轮播基础结构（swiper-lite 配套） */
.swiper-container { overflow: hidden; position: relative; }
.swiper-wrapper { display: flex; }
.swiper-wrapper > .swiper-slide { flex-shrink: 0; }

.dianxian { height: 0; border-bottom: 1px solid var(--line-card); }

.null-banner {
  padding: 90px 0;
  text-align: center;
  color: var(--c-text-weak);
  font-size: var(--fs-sm);
}
.null-banner img { width: 110px; margin: 0 auto 12px; opacity: .7; }

/* 加载中 */
#loading {
  padding: 16px 0;
  text-align: center;
  color: var(--c-text-weak);
  font-size: var(--fs-sm);
}
#loading::after { content: "加载中..."; }
#loading.done::after { content: "没有更多了"; }

/* 顶部安全区占位（页面头） */
.page-head {
  position: sticky; top: 0; z-index: 60;
  height: 44px; line-height: 44px;
  background: var(--bg-white);
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-title);
  border-bottom: 1px solid var(--line);
}
.page-head .back {
  position: absolute; left: 10px; top: 0;
  width: 30px; height: 44px;
  display: flex; align-items: center;
}
.page-head .back::before {
  content: ""; width: 9px; height: 9px;
  border-left: 2px solid var(--c-title); border-bottom: 2px solid var(--c-title);
  transform: rotate(45deg);
}
.page-head .right {
  position: absolute; right: 12px; top: 0;
  font-size: var(--fs-sm); font-weight: 400; color: var(--c-text-sub);
}

/* 页面主体（避开底部导航） */
.page-body { padding-bottom: calc(var(--nav-h) + 8px); }

/* ==========================================================================
   底部 5 导航（首页/发现/发布房源/消息/我的）
   ========================================================================== */
.hm_ft-nv {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 640px; height: var(--nav-h);
  background: var(--bg-white);
  border-top: 1px solid var(--line-nav);
  z-index: 80;
  display: flex;
}
.hm_ft-nv a {
  float: left; width: 20%; text-align: center;
  font-size: var(--fs-sm); color: var(--c-text-sub);
  padding-top: 6px;
  display: flex; flex-direction: column; align-items: center;
}
.hm_ft-nv a i {
  width: 22px; height: 22px; margin-bottom: 3px;
  background-repeat: no-repeat; background-position: center; background-size: contain;
  display: block;
}
.hm_ft-nv a.on, .hm_ft-nv a.active { color: var(--c-primary); }
/* 中间「发布房源」凸起按钮 */
.hm_ft-nv a.center { padding-top: 0; position: relative; }
.hm_ft-nv a.center i {
  width: 46px; height: 46px; margin-top: -18px; margin-bottom: 3px;
  border-radius: 50%; background: var(--c-primary);
  box-shadow: 0 3px 8px rgba(3, 172, 101, .35);
  position: relative;
}
.hm_ft-nv a.center i::before,
.hm_ft-nv a.center i::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); background: #fff; border-radius: 2px;
}
.hm_ft-nv a.center i::before { width: 20px; height: 2px; }
.hm_ft-nv a.center i::after  { width: 2px; height: 20px; }
.hm_ft-nv a.center span { font-size: var(--fs-sm); }

/* ==========================================================================
   图标占位（原站用雪碧图，此处用内联 SVG data-uri 替代，保持尺寸一致）
   ========================================================================== */
.icon { display: inline-block; background-position: center; background-repeat: no-repeat; background-size: contain; }