/* ============ 房屋图鉴 · 列表页 ============
   作用域全部挂在 .house-* 下，不写全局 reset：
   本页与全站共用 header / footer / tokens，动 * 或 body 会跟 overlay.css 打架（踩坑 #54 同类）。

   2026-11-01 首版：P0 只做房屋本体。
   - 上半屏：7 套横向对比表，一屏看全价格/区域/车位/承重
   - 下半屏：按价格升序逐套详情，大图 + 规格 + 官方描述 + 房型图
   - 页尾：舒适度 10 级 / 收藏值 30 级两张表（折叠），财运与爱意标注未开放
*/

/* 2026-11-01 用户报「内容居左」：本页 head 只引 overlay.css，而它的
   .container{max-width:1200px;padding:0 20px} **没有 margin:0 auto**，所以整页贴左。
   站点其它列表页（如 vehicle-list.css）都各自补了这一条，这里照抄，别再依赖 overlay。 */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.header-inner{display:flex;align-items:center;gap:20px;height:64px}

/* ---------- 七套房卡片墙（一格格排开，图占大头） ---------- */
.house-grid-sec{margin:0 0 24px}
.house-grid-sec h2{font-size:22px;font-weight:800;margin:0 0 4px;color:var(--ink)}
.house-grid-sec .sub{font-size:15px;color:var(--ink-muted);margin:0 0 16px}
/* 2026-11-01 SEO：列表页原先只有 <h1>，正文不到 200 字、且 H1 直接跳到卡片的 <h3>。
   补一段导语 + 一个 H2 小节标题，既补语义层级，也让抓取到的正文有内容。
   注意特异性：`.house-grid-sec h2` 是 0-1-1，这里用 0-2-0 才压得住。 */
.house-lead{margin:10px 0 20px;font-size:16px;line-height:1.8;color:var(--ink-muted);max-width:880px}
.house-grid-sec .house-list-title{margin:0 0 14px}
/* 封面用客户端「我的房产」列表那张建筑外观图（ListShowTexture，277×278 方形），
   所以回到三列方形格子：一格格排开，图 380×380 占卡片大半。 */
.house-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.house-tile{display:flex;flex-direction:column;background:var(--surface-raised);border:1px solid var(--line);border-radius:16px;overflow:hidden;color:inherit;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.house-tile:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(20,30,50,.12);border-color:var(--brand)}
.tile-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--surface-sunken)}
.tile-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.house-tile:hover .tile-media img{transform:scale(1.04)}
.tile-type{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.94);color:var(--ink);font-size:14px;font-weight:700;border-radius:999px;padding:4px 11px;letter-spacing:.3px}
.tile-price-tag{position:absolute;right:12px;bottom:12px;background:rgba(10,14,22,.72);color:#fff;font-size:17px;font-weight:800;border-radius:999px;padding:6px 13px;backdrop-filter:blur(6px);letter-spacing:.2px}
.tile-price-tag small{font-weight:500;font-size:13px;opacity:.88;margin-left:2px}
.tile-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px}
.tile-body h3{margin:0;font-size:20px;font-weight:800;color:var(--ink);letter-spacing:.4px}
.tile-slogan{margin:0;font-size:14px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-stats{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:14.5px}
.tile-stats li{display:flex;flex-direction:column;gap:1px;padding:6px 9px;background:var(--surface-sunken);border-radius:8px}
.tile-stats li span{color:var(--ink-muted)}
.tile-stats li b{color:var(--ink);font-weight:700}

/* ---------- 单套详情卡 ---------- */
.house-list{display:flex;flex-direction:column;gap:28px;margin:0 0 40px}
.house-card{background:var(--surface-raised);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.house-hero{position:relative;height:320px;background-size:cover;background-position:center;background-repeat:no-repeat}
.house-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,22,.34) 0%,rgba(10,14,22,.04) 34%,rgba(10,14,22,.72) 100%)}
/* 标题直接写在图上：客户端没有「房产名艺术字」，RealEstateNameImage 那张 248×340 的竖图其实是
   拍立得实拍照（带小熊贴纸），所以名字只能靠排版给，别指望有现成字图。 */
.house-hero-text{position:absolute;left:28px;right:200px;bottom:22px;z-index:2;color:#fff}
/* color 必须显式写：全局 h2 有 color:var(--ink)，会盖掉从 .house-hero-text 继承来的白字 */
.house-hero-text h2{margin:0;color:#fff;font-size:34px;font-weight:800;letter-spacing:1px;line-height:1.15;text-shadow:0 2px 18px rgba(0,0,0,.72),0 1px 3px rgba(0,0,0,.6);scroll-margin-top:90px}
.house-hero-text p{margin:6px 0 0;font-size:15px;font-weight:500;color:rgba(255,255,255,.86);text-shadow:0 1px 8px rgba(0,0,0,.5)}
.house-hero .house-price-tag{position:absolute;right:18px;top:16px;z-index:3;background:rgba(10,14,22,.66);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:6px 14px;font-size:15px;font-weight:700;letter-spacing:.4px;backdrop-filter:blur(6px)}
/* 拍立得挂在右下角，压住卡片分界线，像一张随手贴上去的实拍 */
.house-hero .house-photo{position:absolute;right:26px;bottom:-26px;width:150px;height:auto;z-index:4;border:6px solid #fff;border-radius:10px;transform:rotate(-3deg);box-shadow:0 12px 30px rgba(10,14,22,.32);background:#fff}

.house-body{padding:34px 24px 24px}
.house-slogan{margin:0 0 16px;font-size:17px;color:var(--brand-deep);font-weight:700}
.house-slogan::before{content:"「"}
.house-slogan::after{content:"」"}

.house-specs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:0 0 16px}
.house-specs div{background:var(--surface-sunken);border-radius:12px;padding:10px 12px}
.house-specs dt{font-size:13px;color:var(--ink-muted);margin:0 0 3px}
.house-specs dd{margin:0;font-size:17px;font-weight:700;color:var(--ink)}
.house-specs dd small{font-size:13px;font-weight:400;color:var(--ink-muted);margin-left:2px}

.house-desc{margin:0 0 18px;font-size:16px;line-height:1.85;color:var(--ink-body)}
.house-wide{margin:0 0 14px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.house-wide img{width:100%;height:auto;display:block}
.house-rooms-label{font-size:14px;color:var(--ink-muted);margin:0 0 8px}
/* 每套 7 张，3 列会剩一排孤零零 1 张，4 列正好 4+3 */
.house-rooms{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.house-rooms figure{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--surface-sunken)}
.house-rooms img{width:100%;height:100%;aspect-ratio:1/1;object-fit:cover;display:block}

/* ---------- 房屋收益 ---------- */
.house-system{margin:0 0 22px}
.house-system h2{font-size:22px;font-weight:800;margin:0 0 6px;color:var(--ink)}
.house-system p{font-size:16px;line-height:1.7;color:var(--ink-body);margin:0 0 10px}
.house-system details{border:1px solid var(--line);border-radius:14px;background:var(--surface-raised);margin:0 0 8px;overflow:hidden}
.house-system details>summary{cursor:pointer;padding:10px 16px;font-size:16px;font-weight:700;color:var(--ink);list-style:none}
.house-system details>summary::-webkit-details-marker{display:none}
.house-system details>summary::after{content:"展开";float:right;font-size:14px;font-weight:500;color:var(--ink-muted)}
.house-system details[open]>summary::after{content:"收起"}
.house-system details>summary:hover{background:var(--surface-hover)}
.house-lv-wrap{overflow-x:auto;border-top:1px solid var(--line-subtle)}
table.house-lv{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
table.house-lv th,table.house-lv td{padding:6px 12px;text-align:left;border-bottom:1px solid var(--line-subtle);white-space:nowrap}
table.house-lv thead th{font-size:14px;color:var(--ink-muted);background:var(--surface-sunken);font-weight:600}
table.house-lv tbody tr:last-child td{border-bottom:0}

.house-note{border-left:3px solid var(--warning);background:var(--surface-sunken);border-radius:0 12px 12px 0;padding:10px 14px;font-size:15px;line-height:1.7;color:var(--ink-body)}
.house-note b{color:var(--ink)}

/* ---------- 响应式 ---------- */
@media(max-width:900px){
  .house-stats{grid-template-columns:repeat(2,1fr)}
  .house-rooms{grid-template-columns:repeat(3,1fr)}
  .house-specs{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:767px){
  .house-hero{height:200px}
  .house-hero-text{left:16px;right:110px;bottom:14px}
  .house-hero-text h2{font-size:22px}
  .house-hero-text p{font-size:11px;margin-top:3px}
  .house-hero .house-price-tag{right:12px;top:12px;font-size:12px;padding:5px 11px}
  .house-hero .house-photo{width:74px;right:10px;bottom:-12px;border-width:3px;border-radius:7px}
  .house-body{padding:22px 16px 20px}
  .house-head h2{font-size:19px}
  .house-specs{grid-template-columns:repeat(2,1fr)}
  .house-rooms{grid-template-columns:repeat(2,1fr)}
  .house-stat b{font-size:17px}
}

/* ============ 单套房产详情页（2026-11-01 v2） ============
   列表页点到 houses/<slug>.html 后才有的内容：首屏、规格、描述、房型图、房内家具、异象家具。 */

.hd-hero{position:relative;border-radius:20px;overflow:hidden;background-size:cover;background-position:center;margin:10px 0 16px;min-height:280px;display:flex}
.hd-hero-mask{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,14,22,.88) 0%,rgba(10,14,22,.62) 52%,rgba(10,14,22,.12) 100%)}
.hd-hero-body{position:relative;z-index:2;width:100%;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:26px 34px}
.hd-hero-text{max-width:600px}
.hd-tag{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);color:#fff;border-radius:999px;padding:4px 12px;font-size:14px;font-weight:700;letter-spacing:.5px}
/* 全局 h2/h1 有 color:var(--ink)，这里必须显式写白（踩坑 #54 同款：别指望继承） */
.hd-hero-text h1{margin:12px 0 8px;color:#fff;font-size:40px;font-weight:800;letter-spacing:1px;line-height:1.15;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.hd-slogan{margin:0;font-size:17px;color:rgba(255,255,255,.86)}
.hd-price{margin:12px 0 0;font-size:30px;font-weight:800;color:#ffd479;line-height:1}
.hd-price small{font-size:15px;font-weight:500;color:rgba(255,255,255,.78);margin-left:4px}
/* 这张图自带白描边 + 网点装饰，配浅色底才好看；深色首屏上直接放会像一块白斑，
   所以给个浅色相框底板，做成「贴在首屏上的照片」。 */
.hd-cover{width:200px;height:auto;flex-shrink:0;padding:10px;border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.97),rgba(244,247,252,.9));box-shadow:0 18px 44px rgba(0,0,0,.42)}

.hd-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 20px}
.hd-specs > div{background:var(--surface-raised);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.hd-specs dt{font-size:14px;color:var(--ink-muted);margin:0 0 4px}
.hd-specs dd{margin:0;font-size:17px;font-weight:700;color:var(--ink);line-height:1.4}
.hd-specs dd small{font-size:14px;font-weight:500;color:var(--ink-muted);margin-left:2px}

.hd-sec{margin:0 0 22px}
.hd-sec h2{margin:0 0 9px;font-size:21px;font-weight:800;color:var(--ink);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.hd-sub{font-size:14.5px;font-weight:500;color:var(--ink-muted)}
.hd-desc{margin:0;font-size:16px;line-height:1.75;color:var(--ink-body)}
.hd-rooms{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.hd-rooms figure{margin:0;aspect-ratio:1/1;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--surface-sunken)}
.hd-rooms img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- 房内家具 ---------- */
.hd-furn-stats{margin:0 0 10px;font-size:15px;line-height:1.6;color:var(--ink-muted)}
.hd-furn-stats b{color:var(--ink);font-weight:700}
.furn-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:9px}
.furn-card{display:flex;gap:10px;align-items:center;background:var(--surface-raised);border:1px solid var(--line);border-radius:12px;padding:9px 11px}
.furn-body{flex:1;min-width:0}
.furn-card img,.furn-noimg{width:64px;height:64px;flex-shrink:0;border-radius:10px;background:var(--surface-sunken);object-fit:contain}
.furn-noimg{display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--ink-muted)}
.furn-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.furn-top b{font-size:16px;font-weight:700;color:var(--ink);line-height:1.3}
.furn-q{font-size:13px;font-weight:700;border-radius:999px;padding:1px 7px;white-space:nowrap;flex-shrink:0}
.q-white{background:#eef1f5;color:#5b6472}
.q-green{background:#e6f6ec;color:#1a7f47}
.q-blue{background:#e6f0ff;color:#2559b8}
.q-purple{background:#f1e9ff;color:#6b32c0}
.q-orange{background:#fff1e2;color:#b45309}
.furn-nums{display:flex;align-items:center;gap:10px;margin-top:4px;font-size:14px;color:var(--ink-muted);flex-wrap:wrap}
.furn-nums b{color:var(--ink);font-weight:700}
.furn-count{margin-left:auto;font-size:13.5px;font-weight:700;color:var(--brand-ink);background:var(--brand-soft);border-radius:999px;padding:1px 8px}

/* ---------- 异象家具 ---------- */
.spec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:9px}
.spec-card{display:flex;gap:12px;background:var(--surface-raised);border:1px solid var(--line);border-radius:14px;padding:11px}
.spec-card img,.spec-noimg{width:74px;height:74px;flex-shrink:0;border-radius:12px;background:var(--surface-sunken);object-fit:contain}
.spec-noimg{display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--ink-muted)}
.spec-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.spec-top b{font-size:17px;font-weight:800;color:var(--ink)}
.spec-lv{font-size:13.5px;font-weight:700;color:var(--brand-deep)}
.spec-desc{margin:6px 0 0;font-size:14.5px;line-height:1.7;color:var(--ink-muted)}

/* ---------- 上下篇 ---------- */
.hd-nav{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin:4px 0 26px}
.hd-nav a{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface-raised);text-decoration:none;color:inherit;font-size:15px}
.hd-nav a{padding:10px 14px}
.hd-nav a span{font-size:13.5px;color:var(--ink-muted)}
.hd-nav a b{font-size:16.5px;font-weight:700;color:var(--ink)}
.hd-nav a:hover{border-color:var(--brand);box-shadow:0 8px 20px rgba(20,30,50,.08)}
.hd-nav-next{text-align:right}
.hd-nav-all{align-items:center;justify-content:center;font-weight:700;color:var(--brand-deep) !important;white-space:nowrap}

/* 列表卡片底部「房内 N 种家具」那行 */
.tile-more{margin:8px 0 0;font-size:14px;color:var(--ink-muted);display:flex;align-items:center;justify-content:space-between;gap:8px}
.tile-more i{font-style:normal;font-weight:700;color:var(--brand-deep);white-space:nowrap}

@media(max-width:900px){
  .hd-hero-body{padding:24px}
  .hd-hero-text h1{font-size:28px}
  .hd-cover{width:140px}
  .hd-specs{grid-template-columns:repeat(2,1fr)}
  .hd-rooms{grid-template-columns:repeat(3,1fr)}
  .hd-nav{grid-template-columns:1fr;}
  .hd-nav-next{text-align:left}
}


/* ---------- 收益区：先讲清楚「这两项是干嘛的」，再给表 ---------- */
.gain-explain{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 12px}
/* 两张卡内容长度不一样，用纵向 flex + margin-top:auto 让底部「这套房」那条对齐 */
.gain-card{display:flex;flex-direction:column;background:var(--surface-raised);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.gain-card h3{margin:0 0 7px;font-size:17px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:9px}
.gain-card h3::before{content:"";width:4px;height:17px;border-radius:2px;background:var(--brand);flex-shrink:0}
.gain-card p{margin:0 0 6px;font-size:16px;line-height:1.72;color:var(--ink-body)}
.gain-card p:last-child{margin-bottom:0}
.gain-card b{color:var(--ink);font-weight:700}
.gain-now{margin-top:auto !important;padding:7px 11px;border-radius:10px;background:var(--brand-soft);color:var(--brand-deep) !important;font-weight:600}
.gain-now b{color:var(--brand-deep)}
@media(max-width:900px){
  .gain-explain{grid-template-columns:1fr}
}

/* ---------- 压掉全局 section 的上下 48px ----------
   overlay.css 里有 `section:not(.panel){padding:var(--sp-12) 0 !important}`，
   房屋页每个板块（首屏、介绍、家具、异象、房型、收益）都被它上下各撑 48px，
   一块内容只占几十像素、上下却空 96px —— 这就是「板块之间空太多」的来源。
   注意 house-list.css 加载在 overlay.css 之前，同特异性压不住，这里提高特异性。 */
body > .container .hd-hero,
body > .container .hd-sec,
body > .container .house-grid-sec{padding:0 !important}