/* ============================================================
   首页 · 自习室
   与 H5 定稿版同一套设计语言：米白底 + 白卡 + 红色竖条标题 + 细边框
   尺寸口径：H5 用 px（容器 702×276 的等比），小程序用 rpx（750rpx = 屏宽）
   ============================================================ */
.page {
  min-height: 100vh;
  padding: 20rpx 24rpx 40rpx;
  background: var(--xz);
}

/* ---------------- Banner（用户实拍图，图上不加文字）---------------- */
.bn-card {
  width: 100%;
  height: 276rpx;
  border-radius: 20rpx;
  overflow: hidden;
  background: #EFE7DE;
  margin-bottom: 20rpx;
}
.bn-img { width: 100%; height: 276rpx; display: block; }

/* ---------------- 区块（通知公告 / 自习室一览 共用）---------------- */
.sec {
  background: var(--white);
  border: 1rpx solid var(--line);
  border-radius: 20rpx;
  padding: 28rpx;
  margin-bottom: 20rpx;
}
.sec-t {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 30rpx;
  font-weight: 600;
  color: var(--dj2);
  padding-left: 20rpx;
  position: relative;
}
.sec-t::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 6rpx; height: 28rpx;
  margin-top: -14rpx;
  border-radius: 3rpx;
  background: var(--djh);
}
.sec-t-r { font-size: 24rpx; font-weight: 400; color: var(--t3); }

/* ---------------- 区域分布图 ---------------- */
/* 渐变底座与 H5 一致；地图用 Canvas 自绘，铺满卡片内宽 */
.sec-map {
  padding: 0;
  overflow: hidden;
  background: #F2F8FC url('/assets/map-bg.jpg') center bottom / cover no-repeat;
}
.sec-map .sec-t {
  padding: 28rpx 28rpx 0;
  margin-bottom: 18rpx;
  background: transparent;
}
.map-wrap {
  position: relative;
  width: 100%;
  height: 452rpx;          /* 与 H5 的 447×288 同比例（702×288/447≈452） */
}
.xmap { width: 100%; height: 452rpx; display: block; }

/* 浮动气泡卡（点标点后出现） */
.bubble {
  position: absolute;
  width: 400rpx;
  padding: 20rpx 22rpx;
  background: var(--white);
  border: 1rpx solid var(--line);
  border-radius: 16rpx;
  box-shadow: 0 8rpx 24rpx rgba(31, 58, 82, 0.16);
  z-index: 20;
}
.bb-name { font-size: 28rpx; font-weight: 600; color: var(--xs); }
.bb-meta { font-size: 23rpx; color: var(--t2); margin-top: 6rpx; }
.bb-acts { display: flex; justify-content: flex-end; gap: 14rpx; margin-top: 14rpx; }

/* ---------------- 通知公告 ---------------- */
/* .site-notice 是区块语义钩子（与 H5 同名），本身只调一点下间距 */
.site-notice { padding-bottom: 24rpx; }
.sn-card {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-top: 18rpx;
  padding: 24rpx 0 4rpx;
  border-top: 1rpx solid var(--line);
}
.sn-badge {
  flex: none;
  padding: 4rpx 14rpx;
  border-radius: 8rpx;
  background: var(--djh);
  color: #fff;
  font-size: 22rpx;
}
.sn-txt { flex: 1; min-width: 0; }
.sn-t { font-size: 28rpx; color: var(--xs); line-height: 1.5; }
.sn-meta {
  display: flex; align-items: center; gap: 10rpx;
  font-size: 23rpx; color: var(--t3); margin-top: 8rpx;
}
.sn-dot { width: 10rpx; height: 10rpx; border-radius: 5rpx; background: var(--qkl); }
.notice-empty { font-size: 26rpx; color: var(--t3); padding: 20rpx 0 4rpx; }

/* ---------------- 搜索 / 区县 / 排序 ---------------- */
.zone { margin-bottom: 20rpx; }
.search-row { margin-bottom: 18rpx; }
.search-box {
  display: flex; align-items: center; gap: 14rpx;
  height: 76rpx; padding: 0 22rpx;
  background: var(--white);
  border: 1rpx solid var(--line);
  border-radius: 16rpx;
}
.search-input { flex: 1; font-size: 27rpx; color: var(--xs); }
.ph { color: var(--t3); }
.search-clear {
  width: 40rpx; height: 40rpx; line-height: 36rpx; text-align: center;
  border-radius: 20rpx; background: var(--line); color: var(--t2); font-size: 28rpx;
}

.chips { display: flex; gap: 16rpx; flex-wrap: wrap; margin-bottom: 18rpx; }
.chip {
  padding: 12rpx 30rpx;
  border-radius: 32rpx;
  border: 1rpx solid var(--line);
  background: var(--white);
  color: var(--t2);
  font-size: 26rpx;
}
.chip.on {
  background: var(--red-l);
  border-color: var(--djh);
  color: var(--djh);
  font-weight: 600;
}

.filter-bar { display: flex; }
.sort-switch {
  display: flex;
  border: 1rpx solid var(--line);
  border-radius: 14rpx;
  overflow: hidden;
  background: var(--white);
}
.ss-item {
  padding: 12rpx 28rpx;
  font-size: 26rpx;
  color: var(--t2);
}
.ss-item.on { background: var(--red-l); color: var(--djh); font-weight: 600; }

/* ---------------- 自习室一览 ---------------- */
.result-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4rpx 4rpx 16rpx;
}
.rb-t {
  font-size: 30rpx; font-weight: 600; color: var(--dj2);
  padding-left: 20rpx; position: relative;
}
.rb-t::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 6rpx; height: 28rpx; margin-top: -14rpx;
  border-radius: 3rpx; background: var(--djh);
}

.room-list { display: flex; flex-direction: column; gap: 20rpx; }

.room-card {
  background: var(--white);
  border: 2rpx solid #BFA084;
  border-radius: 20rpx;
  overflow: hidden;
}
/* 媒体区：铺满卡片宽度，比例与 H5 的 445×205 一致（702×205/445≈324rpx） */
.rc-gal { position: relative; width: 100%; height: 324rpx; background: #EFE7DE; }
.rc-shot-img { width: 100%; height: 324rpx; display: block; }
.rc-shot-ph {
  display: flex; align-items: center; justify-content: center;
  color: var(--t3); font-size: 25rpx;
}

.rc-body { padding: 24rpx 26rpx 8rpx; }
.rc-head { display: flex; align-items: center; gap: 16rpx; margin-bottom: 14rpx; }
.rc-name { flex: 1; min-width: 0; font-size: 31rpx; font-weight: 600; color: var(--xs); }
.rc-tag {
  flex: none; padding: 4rpx 14rpx; border-radius: 8rpx;
  background: var(--red-l); border: 1rpx solid var(--red-line);
  color: var(--djh); font-size: 22rpx;
}

.rc-meta { display: flex; align-items: center; gap: 12rpx; padding: 9rpx 0; }
.rc-meta-k { flex: none; width: 132rpx; font-size: 25rpx; color: var(--t3); }
.rc-meta-v { flex: 1; min-width: 0; font-size: 25rpx; color: var(--xs); }
.rc-meta-go { flex: none; font-size: 24rpx; color: var(--djh); }

.rc-addr {
  display: flex; align-items: center; gap: 12rpx;
  margin-top: 10rpx; padding: 18rpx 20rpx;
  background: #FBF8F5;
  border: 1rpx solid var(--line);
  border-radius: 14rpx;
}
.rc-addr-t { flex: 1; min-width: 0; font-size: 25rpx; color: var(--xs); }
.rc-go { flex: none; font-size: 24rpx; color: var(--djh); }

.rc-cap {
  display: flex; align-items: center; gap: 12rpx;
  padding: 20rpx 26rpx;
  border-top: 1rpx solid var(--line);
  background: #FBF8F5;
}
.cap-k { font-size: 25rpx; color: var(--t3); }
.cap-v { font-size: 28rpx; font-weight: 600; color: var(--djh); }

/* ---------------- 按钮 / 空态 ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 18rpx 32rpx; border-radius: 14rpx;
  font-size: 27rpx; background: var(--white);
  border: 1rpx solid var(--line); color: var(--t2);
}
.btn::after { border: none; }
.btn-sm { padding: 10rpx 26rpx; font-size: 25rpx; }
.btn-red { background: var(--djh); border-color: var(--djh); color: #fff; }
.btn-line-red { background: var(--white); border-color: var(--djh); color: var(--djh); }
.lm-btn { width: 100%; margin-top: 8rpx; }

.empty { display: flex; flex-direction: column; align-items: center; padding: 70rpx 0 40rpx; }
.empty-img { width: 200rpx; height: 200rpx; }
.empty-t { font-size: 29rpx; color: var(--xs); margin-top: 20rpx; }
.empty-s { font-size: 25rpx; color: var(--t3); margin-top: 8rpx; }
.empty-btn { margin-top: 28rpx; }