/* =====================================================================
   PC 楼盘排行榜（2026-10-29）
   作用域 body.jyn-rank；复用 loupan_hx_detail.css 的 :root 暮山变量
   ===================================================================== */

body.jyn-rank{background:var(--jyn-bg);}
.jyn-rank .mainbox,.jyn-rank .conatiner_bg{background:transparent;}

/* ---------- 页头 ---------- */
.jyn-rank .jyn-rk{padding:24px 0 52px;}
.jyn-rank .jyn-rk-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding:24px 28px;border-radius:20px;color:#fff;
  background:linear-gradient(135deg,#7D8471 0%,#656B5C 100%);
  box-shadow:0 12px 26px rgba(60,52,40,.16);}
.jyn-rank .jyn-rk-hero h1{font-size:27px;font-weight:800;letter-spacing:-.4px;color:#fff;line-height:1.3;}
.jyn-rank .jyn-rk-hero p{margin-top:8px;font-size:13.5px;color:rgba(255,255,255,.86);}
.jyn-rank .jyn-rk-hero-side{flex:none;text-align:right;}
.jyn-rank .jyn-rk-hero-side span{display:block;font-size:12px;color:rgba(255,255,255,.7);letter-spacing:.3px;}
.jyn-rank .jyn-rk-hero-side a{display:inline-flex;align-items:center;gap:5px;margin-top:10px;height:34px;padding:0 16px;
  border-radius:17px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);
  font-size:12.5px;font-weight:700;color:#fff;}
.jyn-rank .jyn-rk-hero-side a:hover{background:#fff;color:var(--jyn-primary-dark);}
.jyn-rank .jyn-rk-hero-side a i{width:5px;height:5px;border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:rotate(45deg);margin-top:-1px;}

/* ---------- 榜单切换 ---------- */
.jyn-rank .jyn-rk-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px;}
.jyn-rank .jyn-rk-tabs{display:flex;gap:6px;padding:6px;background:#fff;border-radius:16px;box-shadow:var(--jyn-shadow);}
.jyn-rank .jyn-rk-tab{display:block;padding:9px 22px;border:0;border-radius:12px;background:transparent;
  text-align:left;cursor:pointer;transition:background .18s;}
.jyn-rank .jyn-rk-tab b{display:block;font-size:15px;font-weight:800;line-height:1.35;color:var(--jyn-text1);}
.jyn-rank .jyn-rk-tab em{display:block;margin-top:2px;font-style:normal;font-size:11.5px;color:var(--jyn-text4);}
.jyn-rank .jyn-rk-tab:hover{background:var(--jyn-primary-50);}
.jyn-rank .jyn-rk-tab.on{background:var(--jyn-primary);}
.jyn-rank .jyn-rk-tab.on b{color:#fff;}
.jyn-rank .jyn-rk-tab.on em{color:rgba(255,255,255,.84);}
.jyn-rank .jyn-rk-note{font-size:12px;color:var(--jyn-text4);}

/* ---------- 两栏 ---------- */
.jyn-rank .jyn-rk-main{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;margin-top:16px;align-items:start;}
.jyn-rank .jyn-rk-body{background:#fff;border-radius:20px;box-shadow:var(--jyn-shadow);padding:4px 24px 16px;}

/* ---------- 榜单主体 ---------- */
.jyn-rank .jyn-rk-panel{display:none;}
.jyn-rank .jyn-rk-panel.on{display:block;}
.jyn-rank .jyn-rk-ph{display:flex;align-items:baseline;gap:10px;padding:15px 0 12px;border-bottom:1px solid var(--jyn-border);}
.jyn-rank .jyn-rk-ph h2{font-size:20px;font-weight:800;color:var(--jyn-text1);}
.jyn-rank .jyn-rk-ph span{font-size:12.5px;color:var(--jyn-text4);}

.jyn-rank .jyn-rk-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin-top:4px;}
.jyn-rank .jyn-rk-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px dashed var(--jyn-border);}
.jyn-rank .jyn-rk-no{flex:none;width:28px;height:28px;line-height:28px;text-align:center;border-radius:9px;
  background:var(--jyn-bg2);color:var(--jyn-text2);font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;}
.jyn-rank .jyn-rk-no.no1{background:linear-gradient(135deg,#E8C48C 0%,#C0815A 100%);color:#fff;}
.jyn-rank .jyn-rk-no.no2{background:linear-gradient(135deg,#CFD3C9 0%,#A8AEA0 100%);color:#fff;}
.jyn-rank .jyn-rk-no.no3{background:linear-gradient(135deg,#E3CDB3 0%,#C2A181 100%);color:#fff;}

.jyn-rank .jyn-rk-pic{flex:none;width:92px;height:66px;border-radius:10px;overflow:hidden;background:var(--jyn-bg2);}
.jyn-rank .jyn-rk-pic img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .4s ease;}
.jyn-rank .jyn-rk-item:hover .jyn-rk-pic img{transform:scale(1.06);}

.jyn-rank .jyn-rk-tx{flex:1;min-width:0;}
.jyn-rank .jyn-rk-title{display:block;font-size:14.5px;font-weight:700;color:var(--jyn-text1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.jyn-rank .jyn-rk-title:hover{color:var(--jyn-primary-dark);}
.jyn-rank .jyn-rk-meta{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12px;color:var(--jyn-text4);}
.jyn-rank .jyn-rk-meta em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.jyn-rank .jyn-rk-meta i{flex:none;width:1px;height:10px;background:var(--jyn-border);}

.jyn-rank .jyn-rk-val{flex:none;text-align:right;min-width:76px;}
.jyn-rank .jyn-rk-val b{display:block;font-size:17px;font-weight:800;line-height:1.2;
  color:var(--jyn-gold-dark);font-variant-numeric:tabular-nums;}
.jyn-rank .jyn-rk-val em{display:block;margin-top:2px;font-style:normal;font-size:11px;color:var(--jyn-text4);}
.jyn-rank .jyn-rk-item--top .jyn-rk-val b{color:#B4763F;}

/* ---------- 右侧说明 ---------- */
.jyn-rank .jyn-rk-side{position:sticky;top:16px;display:grid;gap:16px;}
.jyn-rank .jyn-rk-card{background:#fff;border-radius:20px;box-shadow:var(--jyn-shadow);padding:20px 22px;}
.jyn-rank .jyn-rk-card h3{position:relative;padding-left:12px;font-size:16px;font-weight:800;color:var(--jyn-text1);}
.jyn-rank .jyn-rk-card h3::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:4px;border-radius:2px;background:var(--jyn-primary);}
.jyn-rank .jyn-rk-rule{margin-top:14px;}
.jyn-rank .jyn-rk-rule dt{margin-top:12px;font-size:13px;font-weight:800;color:var(--jyn-text1);}
.jyn-rank .jyn-rk-rule dt:first-child{margin-top:0;}
.jyn-rank .jyn-rk-rule dd{margin:4px 0 0;font-size:12.5px;line-height:1.75;color:var(--jyn-text4);}
.jyn-rank .jyn-rk-tip{margin-top:14px;padding-top:12px;border-top:1px dashed var(--jyn-border);
  font-size:12px;line-height:1.7;color:var(--jyn-text4);}
.jyn-rank .jyn-rk-card--cta{background:linear-gradient(160deg,#FFFFFF 0%,var(--jyn-primary-50) 100%);}
.jyn-rank .jyn-rk-card--cta p{margin-top:10px;font-size:12.5px;line-height:1.75;color:var(--jyn-text2);}
.jyn-rank .jyn-rk-btn{display:block;margin-top:14px;height:44px;line-height:44px;text-align:center;
  border-radius:12px;background:var(--jyn-primary);color:#fff !important;font-size:14px;font-weight:700;}
.jyn-rank .jyn-rk-btn:hover{background:var(--jyn-primary-dark);}
.jyn-rank .jyn-rk-link{display:inline-flex;align-items:center;gap:5px;margin-top:12px;
  font-size:12.5px;font-weight:600;color:var(--jyn-primary-dark);}
.jyn-rank .jyn-rk-link i{width:5px;height:5px;margin-top:-1px;border-top:1.6px solid currentColor;
  border-right:1.6px solid currentColor;transform:rotate(45deg);}

/* ---------- 窄屏 ---------- */
@media (max-width:1240px){
  .jyn-rank .jyn-rk-main{grid-template-columns:minmax(0,1fr);}
  .jyn-rank .jyn-rk-side{position:static;grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:900px){
  .jyn-rank .jyn-rk-list{grid-template-columns:minmax(0,1fr);}
  .jyn-rank .jyn-rk-side{grid-template-columns:minmax(0,1fr);}
  .jyn-rank .jyn-rk-hero{flex-direction:column;align-items:flex-start;}
  .jyn-rank .jyn-rk-hero-side{text-align:left;}
}

/* =====================================================================
   首页 / 列表页 / 详情页内嵌排名（2026-10-29）
   颜色写字面值，避免依赖 loupan.html 没有引入的 :root 变量
   ===================================================================== */

/* ---------- 通用小榜单块 ---------- */
.jyn-rk-band{margin:26px auto 0;padding:22px 26px 8px;background:#fff;border-radius:20px;
  box-shadow:0 8px 22px rgba(60,52,40,.07);}
.jyn-rk-band__hd{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid #ECEAE5;}
.jyn-rk-band__hd h3{font-size:19px;font-weight:800;color:#2B2D28;letter-spacing:-.2px;}
.jyn-rk-band__sub{flex:1;font-size:12.5px;color:#8A8C84;}
.jyn-rk-band__more{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 14px;border-radius:16px;
  background:#F5F6F3;font-size:12.5px;font-weight:700;color:#5F6655;transition:background .18s,color .18s;}
.jyn-rk-band__more:hover{background:#7D8471;color:#fff;}
.jyn-rk-band__more i{width:5px;height:5px;margin-top:-1px;border-top:1.6px solid currentColor;
  border-right:1.6px solid currentColor;transform:rotate(45deg);}

.jyn-rk-band__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;}
.jyn-rk-band__col{padding:16px 22px 12px;border-right:1px solid #F1EFEA;}
.jyn-rk-band__col:last-child{border-right:0;}
.jyn-rk-band__col:first-child{padding-left:0;}
.jyn-rk-band__t{display:flex;align-items:baseline;gap:8px;margin-bottom:10px;}
.jyn-rk-band__t b{font-size:15px;font-weight:800;color:#2B2D28;}
.jyn-rk-band__t em{font-style:normal;font-size:11.5px;color:#9A9C93;}
.jyn-rk-band__list{margin:0;padding:0;list-style:none;}
.jyn-rk-band__list li{border-bottom:1px dashed #F1EFEA;}
.jyn-rk-band__list li:last-child{border-bottom:0;}
.jyn-rk-band__list a{display:flex;align-items:center;gap:9px;padding:8px 0;}
.jyn-rk-band__list .no{flex:none;width:19px;height:19px;line-height:19px;text-align:center;border-radius:6px;
  background:#F1EFEA;color:#8A8C84;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;}
.jyn-rk-band__list .no.top{background:linear-gradient(135deg,#E2B981,#C99A5C);color:#fff;}
.jyn-rk-band__list .nm{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:#2B2D28;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.jyn-rk-band__list a:hover .nm{color:#656B5C;}
.jyn-rk-band__list .vl{flex:none;font-size:13px;font-weight:800;color:#B4763F;font-variant-numeric:tabular-nums;}
.jyn-rk-band__list .vl i{margin-left:3px;font-style:normal;font-size:10.5px;font-weight:400;color:#9A9C93;}

/* ---------- 列表页顶部速览（3 榜 × Top3） ---------- */
.jyn-rk-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 14px;}
.jyn-rk-strip__card{background:#fff;border:1px solid #ECEAE5;border-radius:14px;padding:12px 14px 6px;}
.jyn-rk-strip__hd{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px;}
.jyn-rk-strip__hd b{font-size:14px;font-weight:800;color:#2B2D28;}
.jyn-rk-strip__hd span{font-size:11px;color:#9A9C93;}
.jyn-rk-strip__list{margin:0;padding:0;list-style:none;}
.jyn-rk-strip__list a{display:flex;align-items:center;gap:7px;padding:5px 0;}
.jyn-rk-strip__list .no{flex:none;width:17px;height:17px;line-height:17px;text-align:center;border-radius:5px;
  background:#F1EFEA;color:#8A8C84;font-size:11px;font-weight:700;}
.jyn-rk-strip__list .no.top{background:linear-gradient(135deg,#E2B981,#C99A5C);color:#fff;}
.jyn-rk-strip__list .nm{flex:1;min-width:0;font-size:12.5px;color:#2B2D28;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.jyn-rk-strip__list a:hover .nm{color:#656B5C;}
.jyn-rk-strip__list .vl{flex:none;font-size:12px;font-weight:700;color:#B4763F;font-variant-numeric:tabular-nums;}
.jyn-rk-strip__list .vl i{margin-left:3px;font-style:normal;font-size:10px;font-weight:400;color:#9A9C93;}
.jyn-rk-strip-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;}
.jyn-rk-strip-hd h2{font-size:17px;font-weight:800;color:#2B2D28;letter-spacing:-.2px;}
.jyn-rk-strip-hd a{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:#7D8471;}
.jyn-rk-strip-hd a:hover{color:#B4763F;}
.jyn-rk-strip-hd a i{width:5px;height:5px;margin-top:-1px;border-top:1.6px solid currentColor;
  border-right:1.6px solid currentColor;transform:rotate(45deg);}

/* ---------- 楼盘详情页榜单表现 ---------- */
.lp7-rank{display:flex;align-items:center;gap:0;margin-top:12px;padding:12px 4px;
  background:#FBFAF6;border:1px solid #ECEAE5;border-radius:14px;}
.lp7-rank__hd{flex:none;padding:0 16px 0 12px;font-size:12.5px;font-weight:800;color:#5F6655;
  border-right:1px solid #ECEAE5;}
.lp7-rank__hd em{display:block;margin-top:2px;font-style:normal;font-size:10.5px;font-weight:400;color:#9A9C93;}
.lp7-rank__item{flex:1;min-width:0;padding:6px 14px;border-right:1px solid #F1EFEA;
  color:inherit;text-decoration:none;border-radius:10px;transition:background .15s;}
.lp7-rank__item:hover{background:#F3F1EA;}
.lp7-rank__item:last-of-type{border-right:0;}
.lp7-rank__item span{display:block;font-size:11px;color:#9A9C93;}
.lp7-rank__item b{display:block;margin-top:3px;font-size:16px;font-weight:800;color:#B4763F;font-variant-numeric:tabular-nums;}
.lp7-rank__item b i{margin-left:5px;font-style:normal;font-size:11px;font-weight:500;color:#8A8C84;}
.lp7-rank__item.none b{color:#B4B6AE;font-size:13px;font-weight:600;}
.lp7-rank__go{flex:none;margin-left:6px;padding:0 12px;text-decoration:none;
  font-size:12px;font-weight:700;color:#656B5C;}
.lp7-rank__go:hover{color:#B4763F;}

@media (max-width:1240px){
  .jyn-rk-band__cols{grid-template-columns:minmax(0,1fr);}
  .jyn-rk-band__col{padding:14px 0 8px;border-right:0;border-bottom:1px solid #F1EFEA;}
  .jyn-rk-band__col:last-child{border-bottom:0;}
  .jyn-rk-strip{grid-template-columns:minmax(0,1fr);}
}