/* ==========================================================================
   首页样式
   --------------------------------------------------------------------------
   ⚠ 本文件的每一个数值都来自 uni-app 原站（localhost:8080）在 375px 下的实测，
     以及 pages/index/index.vue + components/{searchBar,filterBox,hospitalList,
     tabbar,aiSkinTab,qrCode} 的 SCSS 源码。不要凭 PHP 版模板改这里 ——
     PHP 版是另起一套类名的重写，数值与原站不一致（上一版就是抄它抄错的）。

   换算：原站 rpx 在 375 视口下 = rpx × 0px（rpxCalcMaxDeviceWidth: 640）。
   桌面模型：容器 max-width 由 --page-max 决定（实测老站 640），字号固定 px，大结构宽度用百分比。
   ========================================================================== */

/* ---------- 骨架 ---------- */
.page-main { background: #fff; }
.index-body { background: #fff; position: relative; }

/* 标题栏样式已挪到 app.css（全站件，详情页不加载 index.css）*/

/* ---------- ② 搜索栏 ----------
   components/searchBar：.search-bar 紫色渐变，.search padding-bottom 36rpx，
   .search-box 宽 75% 高 60rpx 圆角 25px opacity .922，
   .contact-box 绝对定位在搜索框右侧 16rpx 处。整条 sticky 在标题栏之下。 */
.search-bar {
  width: 100%;
  background-image: linear-gradient(to bottom, #afa7ef, #968ae8);
  position: sticky; top: round(down, calc(44 * var(--px)), 1px); z-index: 99;
}
.search-bar .search {
  display: flex; width: 100%; padding: 0 0 round(down, calc(18 * var(--px)), 1px);
  justify-content: center; align-items: center; position: relative;
}
.search-bar .search-box {
  display: flex; align-items: center;
  width: 75%; height: round(down, calc(30 * var(--px)), 1px);
  background: #fff; opacity: .922; border-radius: round(down, calc(25 * var(--px)), 1px);
  text-decoration: none; box-sizing: border-box;
}
.search-bar .search-icon {
  display: block; flex: 0 0 round(down, calc(20 * var(--px)), 1px); width: round(down, calc(20 * var(--px)), 1px); height: round(down, calc(20 * var(--px)), 1px); margin-left: round(down, calc(17 * var(--px)), 1px);
}
/* 实测 213 / 281 = 75.8%，占位符 15px/400 rgb(48,49,51) line-height 26px */
.search-bar .search-text {
  width: 75.8%; height: round(down, calc(24 * var(--px)), 1px); margin-left: round(down, calc(15 * var(--px)), 1px);
  font-size: round(down, calc(15 * var(--px)), 1px); font-weight: 400; color: rgb(48, 49, 51); line-height: round(down, calc(26 * var(--px)), 1px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-bar .contact-box {
  position: absolute; left: calc(50% + 75% / 2 + round(down, calc(8 * var(--px)), 1px));
  height: round(down, calc(25 * var(--px)), 1px); line-height: 0;
}
.search-bar .contact-icon { display: block; width: round(down, calc(25 * var(--px)), 1px); height: round(down, calc(25 * var(--px)), 1px); }

/* 语言切换 —— 原站是 u-action-sheet：**底部弹出面板**，不是下拉菜单。
   实测 @375：全屏 rgba(0,0,0,.5) 遮罩 + 375x264 白底贴底，
   每项 375x52（padding 15px、内容 22px、content-box），项间 1px #eee 分隔线，
   文字 16px/400 rgb(48,49,51) 居中。5×52 + 4×1 = 264 ✓
   SSR 用 <details> 承载，这样 5 条语言链接不依赖 JS 也能被爬虫抓到。 */
.lang-switch > summary { list-style: none; cursor: pointer; }
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch .lang-mask,
.lang-switch .u-action-sheet { display: none; }
.lang-switch[open] .lang-mask {
  display: block; position: fixed; inset: 0;
  background: rgba(0, 0, 0, .5); z-index: 10070;
}
.lang-switch[open] .u-action-sheet {
  display: block; position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--page-max); background: #fff; z-index: 10071;
}
.u-action-sheet__item-wrap__item {
  display: flex; align-items: center; justify-content: center;
  height: round(down, calc(22 * var(--px)), 1px); padding: round(down, calc(15 * var(--px)), 1px); box-sizing: content-box;
  text-decoration: none;
}
/* ⚠ 分隔线是**独立元素**（原站 uView 的 u-line），不是项自己的 border ——
     做成 border 会让项变成 53px（老站每项恒为 52px，面板 5×52 + 4×1 = 264）。 */
.u-action-sheet .u-line { display: block; height: 1px; background: #eee; }
.u-action-sheet__item-wrap__item__name {
  font-size: round(down, calc(16 * var(--px)), 1px); font-weight: 400; color: rgb(48, 49, 51); line-height: round(down, calc(22 * var(--px)), 1px);
}

/* 横滑轨道里禁掉浏览器原生「拖图片 / 拖链接」——
   不禁的话按住图片一拖会触发 HTML5 拖放，pointermove 直接断掉，
   表现为「拖不动」（横幅整块是图片，最容易撞上）。 */
.nav-swiper__track, .hot-track { user-select: none; -webkit-user-select: none; }
.nav-swiper__track img, .hot-track img,
.nav-swiper__track a, .hot-track a {
  -webkit-user-drag: none; user-drag: none;
}

/* ---------- ③ 项目分类宫格 ----------
   原站是 swiper，高度 upx2px(305) = 152px；.classify-box 实测 375x150、
   padding 12px 10px、row-gap 10px；item flex-basis 20%、图 37x37 mb 4px、
   文字 12px/500 #1E1E1E 单行截断。 */
.nav-swiper { position: relative; overflow: hidden; background: #fff; }
.nav-swiper__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.nav-swiper__track::-webkit-scrollbar { display: none; }
.nav-swiper__page { flex: 0 0 100%; scroll-snap-align: start; }
.classify-box {
  display: flex; flex-direction: row; flex-wrap: wrap; row-gap: round(down, calc(10 * var(--px)), 1px);
  box-sizing: border-box; background: #fff; padding: round(down, calc(12 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px);
}
.classify-item {
  flex-basis: 20%; display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-decoration: none;
}
.classify-item img { width: round(down, calc(37 * var(--px)), 1px); height: round(down, calc(37 * var(--px)), 1px); margin-bottom: round(down, calc(4 * var(--px)), 1px); object-fit: contain; }
.classify-item span {
  font-size: round(down, calc(12 * var(--px)), 1px); font-weight: 500; color: #1E1E1E;
  width: 100%; text-align: center; line-height: round(down, calc(17 * var(--px)), 1px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 指示点：实测 24x8，点 8x8，active #afa7ef / 其余 #f5f5f5，间距 8px */
.nav-swiper__dots {
  position: absolute; left: 0; right: 0; bottom: 0; height: round(down, calc(8 * var(--px)), 1px);
  display: flex; justify-content: center; align-items: center;
}
.nav-swiper__dot {
  width: round(down, calc(8 * var(--px)), 1px); height: round(down, calc(8 * var(--px)), 1px); border-radius: 50%; background: #f5f5f5; margin-right: round(down, calc(8 * var(--px)), 1px);
}
.nav-swiper__dot:last-child { margin-right: 0; }
.nav-swiper__dot--active { background: #afa7ef; }

/* ---------- ④ 热门活动横幅 ----------
   .hot-box padding 0 28rpx；.swiper 高度 17vw / min 85px / max 170px、圆角 8px。
   ⚠ 图片是 uni-app <image> 无 mode → 渲染成 background-size:100% 100%，
     也就是「拉伸」不是「裁切」。用 object-fit: fill，写 cover 会把图切掉。 */
.hot-box { padding: 0 round(down, calc(14 * var(--px)), 1px); }
.hot-swiper {
  position: relative; width: 100%;
  /* ⚠ 这三个值是**真实的 px 上下限**，不是 rpx —— 不能跟着视口缩放。
     老站实测：320/375/414/500 都是 85 高（被 min 兜住），630 才 107（=17vw）。
     px2u.mjs 把它们当普通 px 转成了 var(--px)，结果 414 下变成 94、630 变成 143。
     这里改回定值。 */
  height: 17vw; min-height: 85px; max-height: 170px;
  border-radius: round(down, calc(8 * var(--px)), 1px); overflow: hidden;
}
.hot-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hot-track::-webkit-scrollbar { display: none; }
.hot-item { display: block; flex: 0 0 100%; height: 100%; scroll-snap-align: start; }
.hot-item img { width: 100%; height: 100%; border-radius: round(down, calc(5 * var(--px)), 1px); object-fit: fill; display: block; }
.hot-dots {
  position: absolute; left: 0; right: 0; bottom: 0; height: round(down, calc(8 * var(--px)), 1px);
  display: flex; justify-content: center; align-items: center;
}
.hot-dot { width: round(down, calc(8 * var(--px)), 1px); height: round(down, calc(8 * var(--px)), 1px); border-radius: 50%; background: #fff; margin-right: round(down, calc(8 * var(--px)), 1px); }
.hot-dot:last-child { margin-right: 0; }
.hot-dot--active { background: #fe739d; }

/* ---------- ⑤ tabs + 筛选条 ----------
   .list-box padding 25rpx 0 10rpx + height 118rpx（content-box → 实测总高 76px）。
   height 是原站作者写死的，为的是筛选框展开时列表不跳；筛选框允许溢出到下方。 */
.list-box {
  padding: round(down, calc(12 * var(--px)), 1px) 0 round(down, calc(5 * var(--px)), 1px); height: round(down, calc(59 * var(--px)), 1px); box-sizing: content-box; position: relative;
  background: #fff;
}
/* ⚠ 上面那个写死的 height 是照抄原站的（为的是筛选弹层展开时列表不跳）。
   但 tab 3 的分类横滑条是**在流内**的，内容一旦超过 59px 就会溢出盒子；
   又因为 .list-box 是 sticky + z-index:10，溢出部分会盖住下面的商品。
   所以积分那一档改成自适应高度。 */
.list-box--integral { height: auto; min-height: round(down, calc(59 * var(--px)), 1px); }
.sticky-tabs { position: sticky; top: round(down, calc(92 * var(--px)), 1px); z-index: 10; }
.sticky-tabs.filters-open { z-index: 20000; }

/* u-tabs：4 项均分（原站 ::v-deep 强制 flex:1 + space-around），
   实测 nav 375x31、item 94x21 padding 0 11px、文字 15px/600 #000、
   选中 transform scale(1.2)，指示线 18x4 圆角 100px #9791F6。 */
.u-tabs { position: relative; display: flex; height: round(down, calc(31 * var(--px)), 1px); }
.u-tabs__item {
  flex: 1 1 0%; display: flex; align-items: center; justify-content: center;
  padding: 0 round(down, calc(11 * var(--px)), 1px); box-sizing: border-box; text-decoration: none;
  font-size: round(down, calc(15 * var(--px)), 1px); font-weight: 600; color: #000;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.u-tabs__item--active { transform: scale(1.2); }
.u-tabs__line {
  position: absolute; bottom: 0; width: round(down, calc(18 * var(--px)), 1px); height: round(down, calc(4 * var(--px)), 1px);
  border-radius: round(down, calc(100 * var(--px)), 1px); background: #9791F6;
  transition: transform .3s;
}

/* filterBox：.filter-box-wrapper > .search-box（375x44）
   > .search-left-wrapper（横滑，padding 10px 0 10px 17px）+ .search-right（padding 10px）*/
.filter-box-wrapper { position: relative; }
.filter-box-wrapper > .search-box {
  display: flex; align-items: center; background: #fff; position: relative; overflow: hidden;
}
.search-left-wrapper {
  flex: 1; width: 0; min-width: 0;
  display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  padding: round(down, calc(10 * var(--px)), 1px) 0 round(down, calc(10 * var(--px)), 1px) round(down, calc(17 * var(--px)), 1px); scrollbar-width: none;
}
.search-left-wrapper::-webkit-scrollbar { display: none; }
.item-tag-block { width: round(down, calc(27 * var(--px)), 1px); flex-shrink: 0; }
.item-tag {
  display: flex; align-items: center; flex-shrink: 0;
  padding: round(down, calc(4 * var(--px)), 1px) round(down, calc(11 * var(--px)), 1px); margin-right: round(down, calc(20 * var(--px)), 1px); gap: round(down, calc(4 * var(--px)), 1px);
  font-weight: 400; color: #1a191e; background: #f7f8fc;
  font-size: round(down, calc(14 * var(--px)), 1px); line-height: round(down, calc(14 * var(--px)), 1px); border-radius: round(down, calc(12 * var(--px)), 1px);
  text-decoration: none; box-sizing: border-box;
}
.item-tag .tag-icon { width: round(down, calc(16 * var(--px)), 1px); height: round(down, calc(16 * var(--px)), 1px); flex-shrink: 0; object-fit: contain; }
.item-tag .arrow-icon {
  width: round(down, calc(16 * var(--px)), 1px); height: round(down, calc(16 * var(--px)), 1px); flex-shrink: 0; position: relative;
  font-size: round(down, calc(10 * var(--px)), 1px); color: #1a191e;
}
/* 箭头用 CSS 画，避免依赖 uView 图标字体 */
.item-tag .arrow-icon::before {
  content: ''; position: absolute; left: round(down, calc(4 * var(--px)), 1px); top: round(down, calc(5 * var(--px)), 1px);
  width: round(down, calc(6 * var(--px)), 1px); height: round(down, calc(6 * var(--px)), 1px); border-right: round(down, calc(1.4 * var(--px)), 1px) solid currentColor; border-bottom: round(down, calc(1.4 * var(--px)), 1px) solid currentColor;
  transform: rotate(45deg);
}
.item-tag-active {
  color: #9e94eb; border: 1px solid #9e94eb; background: rgba(87, 76, 250, .1);
  padding: round(down, calc(3 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px); /* 补 1px 边框，保持外框 24px 高 */
}
.item-tag-active .arrow-icon { color: #9e94eb; }
.item-tag-active .arrow-icon::before { transform: rotate(-135deg); top: round(down, calc(7 * var(--px)), 1px); }
.search-right {
  flex-shrink: 0; padding: round(down, calc(10 * var(--px)), 1px); font-size: round(down, calc(14 * var(--px)), 1px); color: #111; font-weight: 400;
  white-space: nowrap; display: flex; justify-content: center; align-items: center;
  line-height: 1; text-decoration: none;
}
.search-right img { width: round(down, calc(15 * var(--px)), 1px); height: round(down, calc(15 * var(--px)), 1px); margin-left: round(down, calc(5 * var(--px)), 1px); }

/* 展开的子项面板：原站 .child-list-box 绝对定位 top:100%、灰底、内白卡 */
.child-list-box {
  position: absolute; top: 100%; left: 0; right: 0;
  max-height: round(down, calc(300 * var(--px)), 1px); overflow-y: auto;
  padding: round(down, calc(5 * var(--px)), 1px) round(down, calc(9 * var(--px)), 1px) 0; box-sizing: border-box;
  background: #f5f5f5; box-shadow: 0 round(down, calc(2 * var(--px)), 1px) round(down, calc(6 * var(--px)), 1px) rgba(0, 0, 0, .08); z-index: 1000;
}

/* 全量筛选：原站 filterBox 的底部弹层。通过 URL 状态打开，保证 SSR 后的每个选项
   都是可抓取、可回退的真实链接。 */
.filter-mask {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, .45);
}
.filter-popup {
  width: min(100%, var(--page-max)); max-height: calc(100vh - round(down, calc(50 * var(--px)), 1px));
  display: flex; flex-direction: column; background: #fff;
  border-radius: round(down, calc(14 * var(--px)), 1px) round(down, calc(14 * var(--px)), 1px) 0 0; overflow: hidden;
}
.filter-header {
  height: round(down, calc(48 * var(--px)), 1px); flex: 0 0 round(down, calc(48 * var(--px)), 1px); padding: 0 round(down, calc(16 * var(--px)), 1px);
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #f1f1f1; font-size: round(down, calc(16 * var(--px)), 1px);
}
.filter-close {
  width: round(down, calc(32 * var(--px)), 1px); height: round(down, calc(32 * var(--px)), 1px); display: grid; place-items: center;
  font-size: round(down, calc(24 * var(--px)), 1px); font-weight: 300; color: #555;
}
.filter-main { flex: 1; min-height: 0; overflow-y: auto; padding: round(down, calc(4 * var(--px)), 1px) round(down, calc(16 * var(--px)), 1px) round(down, calc(18 * var(--px)), 1px); }
.filter-section { padding-top: round(down, calc(14 * var(--px)), 1px); }
.filter-section h2 { margin: 0 0 round(down, calc(10 * var(--px)), 1px); font-size: round(down, calc(15 * var(--px)), 1px); font-weight: 600; }
.filter-section-group + .filter-section-group { margin-top: round(down, calc(12 * var(--px)), 1px); }
.filter-section-group h3 { margin: 0 0 round(down, calc(8 * var(--px)), 1px); font-size: round(down, calc(13 * var(--px)), 1px); font-weight: 500; color: #666; }
.filter-tags { display: flex; flex-wrap: wrap; gap: round(down, calc(8 * var(--px)), 1px); }
.filter-tag {
  min-width: round(down, calc(68 * var(--px)), 1px); padding: round(down, calc(7 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px); border-radius: round(down, calc(5 * var(--px)), 1px);
  background: #f7f8fc; color: #333; font-size: round(down, calc(13 * var(--px)), 1px); text-align: center;
}
.filter-tag-active { background: rgba(158, 148, 235, .14); color: #786ee0; }
.filter-footer {
  flex: 0 0 round(down, calc(58 * var(--px)), 1px); display: flex; gap: round(down, calc(12 * var(--px)), 1px); padding: round(down, calc(9 * var(--px)), 1px) round(down, calc(16 * var(--px)), 1px);
  border-top: 1px solid #f1f1f1; background: #fff;
}
.filter-btn {
  flex: 1; display: grid; place-items: center; border-radius: round(down, calc(20 * var(--px)), 1px);
  font-size: round(down, calc(14 * var(--px)), 1px); border: 1px solid #9e94eb;
}
.filter-reset { color: #786ee0; background: #fff; }
.filter-confirm { color: #fff; background: #9e94eb; }
.child-list-container { padding: round(down, calc(9 * var(--px)), 1px); background: #fff; border-radius: round(down, calc(10 * var(--px)), 1px); }
.child-group-wrapper { width: 100%; margin-bottom: round(down, calc(10 * var(--px)), 1px); }
.child-group-wrapper:last-child { margin-bottom: 0; }
.child-group-title {
  width: 100%; font-size: round(down, calc(15 * var(--px)), 1px); font-weight: bold; color: #1a191e;
  margin-bottom: round(down, calc(5 * var(--px)), 1px); padding-left: round(down, calc(2 * var(--px)), 1px);
}
.child-items-wrapper, .child-items-list { display: flex; flex-wrap: wrap; gap: round(down, calc(10 * var(--px)), 1px); }
.child-item {
  padding: round(down, calc(4 * var(--px)), 1px) round(down, calc(11 * var(--px)), 1px); border-radius: round(down, calc(12 * var(--px)), 1px); font-size: round(down, calc(14 * var(--px)), 1px); color: #1a191e;
  background: #f7f8fc; display: flex; align-items: center; gap: round(down, calc(4 * var(--px)), 1px);
  text-decoration: none; box-sizing: border-box;
}
.child-item-active {
  color: #9e94eb; border: 1px solid #9e94eb; background: rgba(87, 76, 250, .1);
  padding: round(down, calc(3 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px);
}

/* ---------- ⑥ 列表区 ----------
   .view-list padding-bottom 108rpx；机构列表 .list-jg 灰底 #f6f6f6 padding 10px 0。 */
.view-list { padding: 0 0 round(down, calc(54 * var(--px)), 1px); }
.list-empty { padding: round(down, calc(40 * var(--px)), 1px) 0; text-align: center; font-size: round(down, calc(13 * var(--px)), 1px); color: #999; }
.loading-text {
  display: flex; justify-content: center; align-items: center; gap: round(down, calc(6 * var(--px)), 1px);
  font-size: round(down, calc(12 * var(--px)), 1px); color: #ccc; padding: 0 0 round(down, calc(15 * var(--px)), 1px); margin: 0 0 round(down, calc(25 * var(--px)), 1px);
}
/* 追加下一页要 1~2 秒，原站文案在这期间不变，看起来像卡死了。
   加一个小转圈只做「正在动」的反馈，不改文案（文案仍照原站两态）。 */
.loading-text.is-loading::before {
  content: ''; width: round(down, calc(12 * var(--px)), 1px); height: round(down, calc(12 * var(--px)), 1px); border-radius: 50%;
  border: 1px solid #e4e4e4; border-top-color: #9e94eb;
  animation: loading-spin .7s linear infinite;
}
@keyframes loading-spin { to { transform: rotate(360deg); } }
.recommend-tip { padding: round(down, calc(15 * var(--px)), 1px) round(down, calc(14 * var(--px)), 1px) round(down, calc(7 * var(--px)), 1px); text-align: center; background: #fff; }
.recommend-tip-line1 { font-size: round(down, calc(12 * var(--px)), 1px); font-weight: 600; color: #333; margin-bottom: round(down, calc(4 * var(--px)), 1px); line-height: 1.5; }
.recommend-tip-line2 { font-size: round(down, calc(10 * var(--px)), 1px); color: #999; line-height: 1.5; }

/* 机构卡（components/hospitalList）：
   .list-item 355x158、margin 0 10px 10px、radius 12px、padding 12px 9px 7px、column-gap 12px
   图 95x95 radius 7px aspectFill；右栏 230 宽。 */
.list-jg { display: flex; flex-direction: column; background: #f6f6f6; padding: round(down, calc(10 * var(--px)), 1px) 0; }
.list-jg .list-item {
  display: flex; margin: 0 round(down, calc(10 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px); background: #fff;
  border-radius: round(down, calc(12 * var(--px)), 1px); padding: round(down, calc(12 * var(--px)), 1px) round(down, calc(9 * var(--px)), 1px) round(down, calc(7 * var(--px)), 1px); column-gap: round(down, calc(12 * var(--px)), 1px);
  text-decoration: none; color: inherit;
}
/* ⚠ 固定 95px，不要用百分比。
   桌面模型是「字号固定 px + 容器加宽到 750」，图片一旦跟着容器放大就会
   变成「图很大、字很小」。百分比只用在留白和栏宽上，不用在元素自身尺寸上。 */
.list-jg .list-item-left { flex: 0 0 round(down, calc(95 * var(--px)), 1px); }
.list-jg .list-item-left img {
  width: round(down, calc(95 * var(--px)), 1px); height: round(down, calc(95 * var(--px)), 1px); border-radius: round(down, calc(7 * var(--px)), 1px); object-fit: cover; display: block;
}
.list-jg .list-item-right { flex: 1; min-width: 0; }
.hospital-title {
  font-size: round(down, calc(18 * var(--px)), 1px); font-weight: 500; color: rgba(0, 0, 0, .9); margin-bottom: round(down, calc(7 * var(--px)), 1px);
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  line-height: round(down, calc(25 * var(--px)), 1px);
}
.hospital-title-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
/* 客服图标（iconfont custom-icon-kefu1），实测 14x15、16px/500 #9e94eb、scale(.9) */
.hospital-title .custom-icon-kefu1 {
  color: #9e94eb; display: inline-block; font-size: round(down, calc(16 * var(--px)), 1px); line-height: 1;
  transform: scale(.9); animation: kefu-shake 1s infinite;
}
@keyframes kefu-shake {
  0%   { transform: scale(1.1); }
  30%  { transform: scale(1); }
  60%  { transform: scale(.9); }
  80%  { transform: scale(1); }
  100% { transform: scale(1.1); }
}
.hospital-tag { display: flex; flex-shrink: 0; align-items: center; }
.hospital-tag .discount-icon { width: round(down, calc(20 * var(--px)), 1px); height: round(down, calc(20 * var(--px)), 1px); margin-right: round(down, calc(4 * var(--px)), 1px); object-fit: contain; }
.hospital-tag .same-price {
  background: #fff1f8; font-size: round(down, calc(13 * var(--px)), 1px); line-height: round(down, calc(14 * var(--px)), 1px); padding: round(down, calc(6 * var(--px)), 1px);
  color: #ef5189; border-radius: round(down, calc(4 * var(--px)), 1px); margin-right: round(down, calc(8 * var(--px)), 1px);
  display: flex; align-items: center;
}
.hospital-address { font-size: round(down, calc(13 * var(--px)), 1px); color: #4c4c4c; margin-bottom: round(down, calc(6 * var(--px)), 1px); line-height: round(down, calc(18 * var(--px)), 1px); }
.hospital-address .sep { margin: 0 round(down, calc(4 * var(--px)), 1px); }
.response-time { font-size: round(down, calc(13 * var(--px)), 1px); color: #4c4c4c; margin-bottom: round(down, calc(7 * var(--px)), 1px); line-height: round(down, calc(18 * var(--px)), 1px); }
.response-time .hour { color: #ef5189; }
.hospital-items {
  width: 100%; display: flex; flex-direction: column; row-gap: round(down, calc(9 * var(--px)), 1px);
  border-top: 1px solid #f5f5f5; padding-top: round(down, calc(12 * var(--px)), 1px);
}
.hospital-items .items { display: flex; column-gap: round(down, calc(4 * var(--px)), 1px); }
.hospital-items .hui {
  height: round(down, calc(18 * var(--px)), 1px); font-size: round(down, calc(11 * var(--px)), 1px); line-height: round(down, calc(18 * var(--px)), 1px); color: #e83474;
  background: #fff1f8; text-align: center;
}
/* 非简体时原站给 .hui 固定 100rpx 宽（译文更长） */
.hospital-items .hui--wide { width: round(down, calc(50 * var(--px)), 1px); }
.hospital-items .price { font-size: round(down, calc(12 * var(--px)), 1px); font-weight: 500; line-height: round(down, calc(18 * var(--px)), 1px); color: #e83474; }
.hospital-items .item-name {
  flex: 1; min-width: 0; font-size: round(down, calc(12 * var(--px)), 1px); line-height: round(down, calc(18 * var(--px)), 1px); color: #1c1c1c; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- ⑦ 底部 tabbar ----------
   components/tabbar：.tabbar 高 100rpx（50px）fixed；.action flex 1、图 24x24、
   文字 11px mt 4px；中间 .add-action padding-top 51px + .center-img 45x45（接口下发），
   ::after 画 64x64 白圆凸起。选中 #fe739d，未选 #666。 */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--page-max); z-index: 1024;
  display: flex; align-items: center; justify-content: space-between;
  min-height: round(down, calc(50 * var(--px)), 1px); height: calc(calc(50 * var(--px)) + env(safe-area-inset-bottom) / 2);
  padding: 0 0 calc(env(safe-area-inset-bottom) / 2);
  background: #fff; color: #666;
  box-shadow: 0 -.5px round(down, calc(3 * var(--px)), 1px) rgba(0, 0, 0, .1);
}
.tabbar .action {
  font-size: round(down, calc(11 * var(--px)), 1px); position: relative; flex: 1; text-align: center;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  line-height: 1; background: inherit; text-decoration: none; color: inherit;
}
.tabbar .action img { width: round(down, calc(24 * var(--px)), 1px); height: round(down, calc(24 * var(--px)), 1px); }
.tabbar .action span { margin-top: round(down, calc(4 * var(--px)), 1px); }
.tabbar .acitve-color { color: #fe739d; }
.tabbar .gray { color: #666; }
.tabbar .add-action { position: relative; z-index: 2; padding-top: round(down, calc(51 * var(--px)), 1px); color: #aaa; }
.tabbar .add-action .center-img {
  position: absolute; width: round(down, calc(45 * var(--px)), 1px); height: round(down, calc(45 * var(--px)), 1px); border-radius: 50%;
  top: 32%; left: 50%; transform: translate(-50%, -50%); z-index: 2; object-fit: cover;
}
.tabbar .add-action::after {
  content: ''; position: absolute; width: round(down, calc(64 * var(--px)), 1px); height: round(down, calc(64 * var(--px)), 1px); top: -15px;
  left: 0; right: 0; margin: auto; border-radius: round(down, calc(44 * var(--px)), 1px);
  box-shadow: 0 -1px round(down, calc(4 * var(--px)), 1px) rgba(0, 0, 0, .08); background: inherit; z-index: 0;
}
.tabbar .add-action::before {
  content: ''; position: absolute; width: round(down, calc(50 * var(--px)), 1px); height: round(down, calc(15 * var(--px)), 1px); bottom: round(down, calc(15 * var(--px)), 1px);
  left: 0; right: 0; margin: auto; background: inherit; z-index: 1;
}

/* 悬浮件样式已挪到 app.css（全站件，详情页不加载 index.css）*/


/* ---------- ⑨ 项目卡（首页 tab 1 与分类页共用 components/iteminfo）----------
   ⚠ 上一版这块是照 PHP 版写的，数值全错。以下来自 iteminfo 的 SCSS + 实测：
     .list-xm            padding 8rpx 35rpx 0（= 4px 17px 0），**无灰底**
     .list-item          1rpx 边框 #E5E5E5、圆角 15rpx(7px)、margin-bottom 10px、
                         **无内边距、无白底**，position relative（右上角挂优惠角标）
     .list-item-left     图 196rpx = 98px、圆角 7px
     .list-item-right    margin-left 16px、padding 5px 0、width 100%、
                         justify-content: space-around
     .list-item-title    **16px/bold #000**、单行截断、max-width 78%
     .list-item-price-box  三格 + 两条竖线（.line 1px #dcdcdc，margin 0 10px）
     价格               28rpx/700 #EF5189，单位 20rpx #606060
     标签/已预约/面诊费   小标题 11px #606060，数字 14px #333 / 12px #606060
     .list-item-info    标签块 11px #5f5f5f、底 #f6f6f6、padding 4px 5px、margin-right 5px
   ---------------------------------------------------------------------------- */
.list-xm {
  display: flex; flex-direction: column;
  padding: round(down, calc(4 * var(--px)), 1px) round(down, calc(17 * var(--px)), 1px) 0;  /* 35rpx 老站实测取整为 17px */
}
.list-xm .list-item {
  display: flex; flex-direction: row; position: relative;
  width: 100%; margin: 0 0 round(down, calc(10 * var(--px)), 1px);
  border: 1px solid #E5E5E5; border-radius: round(down, calc(7 * var(--px)), 1px);
  text-decoration: none; color: inherit;
}
.list-xm .list-item-left { flex: 0 0 round(down, calc(98 * var(--px)), 1px); border-radius: round(down, calc(7 * var(--px)), 1px); }
.list-xm .list-item-left img {
  width: round(down, calc(98 * var(--px)), 1px); height: round(down, calc(98 * var(--px)), 1px); border-radius: round(down, calc(7 * var(--px)), 1px); object-fit: cover; display: block;
}
.list-xm .list-item-right {
  display: flex; flex-direction: column;
  justify-content: space-around; align-items: flex-start;
  flex: 1; min-width: 0; margin-left: round(down, calc(16 * var(--px)), 1px); padding: round(down, calc(5 * var(--px)), 1px) 0;
}
.list-xm .list-item-title {
  font-size: round(down, calc(16 * var(--px)), 1px); font-weight: bold; color: #000; max-width: 78%;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
}
/* 价格区：三行「左标签 + 右值」，整块 108x66，每行 22px。
   ⚠ 不是三列带竖线 —— 上一版按 PHP 版做成三列，实测老站是这个结构。 */
.list-xm .list-item-price-box {
  display: flex; flex-direction: row; width: 100%; margin: round(down, calc(4 * var(--px)), 1px) 0;
}
.list-xm .yy-hb-wrap {
  display: flex; flex-direction: column; justify-content: space-around;
}
.list-xm .other-price-container,
.list-xm .sales-info,
.list-xm .service-fee-container {
  display: flex; align-items: center; height: round(down, calc(22 * var(--px)), 1px);
}
.list-xm .price-label,
.list-xm .sales-label,
.list-xm .service-label {
  font-size: round(down, calc(11 * var(--px)), 1px); color: #606060; margin-right: round(down, calc(10 * var(--px)), 1px); flex-shrink: 0; line-height: round(down, calc(16 * var(--px)), 1px);
}
.list-xm .price-value { font-size: round(down, calc(14 * var(--px)), 1px); font-weight: 700; color: #EF5189; line-height: round(down, calc(20 * var(--px)), 1px); }
.list-xm .price-unit { font-size: round(down, calc(10 * var(--px)), 1px); color: #606060; line-height: round(down, calc(14 * var(--px)), 1px); }
/* 斜杠随 .price-unit 同为 10px（原站 26rpx 是另一个分支的值，实测这页是 10px）*/
.list-xm .price-unit .yy-price-icon { font-style: normal; font-size: inherit; }
.list-xm .sales-number { font-size: round(down, calc(10 * var(--px)), 1px); color: #606060; line-height: round(down, calc(14 * var(--px)), 1px); }
.list-xm .service-value { font-size: round(down, calc(12 * var(--px)), 1px); color: #606060; line-height: round(down, calc(17 * var(--px)), 1px); }
/* 机构名 / 医生名是两个灰底小标签，不是纯文字 */
.list-xm .list-item-info { display: flex; align-items: center; flex-wrap: nowrap; overflow: hidden; }
/* ⚠ 老站这些标签有 `border: 1px` + content-box（和 .doctor-tag 同一个坑）——
     漏了每个窄 2px。 */
.list-xm .list-item-info > span {
  font-size: round(down, calc(11 * var(--px)), 1px); color: #5f5f5f; background: #f6f6f6;
  padding: round(down, calc(4 * var(--px)), 1px) round(down, calc(5 * var(--px)), 1px); margin: 0 round(down, calc(5 * var(--px)), 1px) 0 0; flex-shrink: 0;
  border: 1px solid transparent; box-sizing: content-box;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.list-xm .list-item-info .custom-icon-kefu1 {
  color: #9e94eb; display: inline-block; font-size: round(down, calc(16 * var(--px)), 1px); line-height: 1;
  animation: kefu-shake 1s infinite;
}
/* 优惠角标：原站挂在卡片右上角（.zh-tj），is_airbnb 时是 .airbab-tag */
.list-xm .zh-tj {
  position: absolute; right: 0; top: 0;
  background: #fff1f8; font-size: round(down, calc(11 * var(--px)), 1px); line-height: round(down, calc(14 * var(--px)), 1px); padding: round(down, calc(4 * var(--px)), 1px) round(down, calc(6 * var(--px)), 1px);
  color: #ef5189; border-radius: 0 round(down, calc(7 * var(--px)), 1px) 0 round(down, calc(7 * var(--px)), 1px);
  display: flex; align-items: center;
}
.list-xm .zh-tj .discount-icon { width: round(down, calc(14 * var(--px)), 1px); height: round(down, calc(14 * var(--px)), 1px); margin-right: round(down, calc(4 * var(--px)), 1px); object-fit: contain; }

/* ---------- ⑨-3 分类页容器（原站 .body #f5f5f5 套 .detail #fff）---------- */
.body { background: #f5f5f5; }
.body > .detail { background: #fff; }

/* ---------- ⑨-2 院长卡（首页 tab 2，components/doctorList） ---------- */
.list-ys { display: flex; flex-direction: column; background: #f6f6f6; padding: round(down, calc(10 * var(--px)), 1px) 0; }
.list-ys .list-item {
  display: flex; margin: 0 round(down, calc(10 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px); background: #fff;
  border-radius: round(down, calc(12 * var(--px)), 1px); padding: round(down, calc(12 * var(--px)), 1px) round(down, calc(9 * var(--px)), 1px) round(down, calc(7 * var(--px)), 1px); column-gap: round(down, calc(12 * var(--px)), 1px);
  text-decoration: none; color: inherit;
}
.list-ys .list-item-left { flex: 0 0 round(down, calc(95 * var(--px)), 1px); }
.list-ys .list-item-left img {
  width: round(down, calc(95 * var(--px)), 1px); height: round(down, calc(95 * var(--px)), 1px); border-radius: round(down, calc(7 * var(--px)), 1px); object-fit: cover; display: block;
}
.list-ys .list-item-right { flex: 1; min-width: 0; }

.list-ys .doctor-info { display: flex; align-items: center; font-size: round(down, calc(15 * var(--px)), 1px); font-weight: 500; color: rgba(0, 0, 0, .9); line-height: round(down, calc(21 * var(--px)), 1px); margin-bottom: round(down, calc(7 * var(--px)), 1px); }
.list-ys .doctor-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-ys .doctor-info .info-line { width: 1px; height: round(down, calc(11 * var(--px)), 1px); background: #ddd; margin: 0 round(down, calc(6 * var(--px)), 1px); flex-shrink: 0; }
.list-ys .doctor-info .info-txt { font-size: round(down, calc(12 * var(--px)), 1px); font-weight: 400; color: #4c4c4c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-ys .doctor-tag-list { display: flex; align-items: center; flex-wrap: nowrap; overflow: hidden; margin-bottom: round(down, calc(7 * var(--px)), 1px); }
.list-ys .doctor-tag-label { font-size: round(down, calc(12 * var(--px)), 1px); color: #999; flex-shrink: 0; margin-right: round(down, calc(4 * var(--px)), 1px); }
.list-ys .doctor-tag {
  font-size: round(down, calc(11 * var(--px)), 1px); color: #606060; background: #f5f5f5; border-radius: round(down, calc(4 * var(--px)), 1px);
  padding: round(down, calc(2 * var(--px)), 1px) round(down, calc(6 * var(--px)), 1px); margin-right: round(down, calc(4 * var(--px)), 1px); flex-shrink: 0; white-space: nowrap;
}
.list-ys .hospital-pro-scroll { display: flex; column-gap: round(down, calc(8 * var(--px)), 1px); overflow-x: auto; scrollbar-width: none; }
.hospital-pro-scroll::-webkit-scrollbar { display: none; }
.list-ys .hospital-pro-item { flex: 0 0 round(down, calc(71 * var(--px)), 1px); min-width: 0; }
.hospital-pro-item img { width: round(down, calc(71 * var(--px)), 1px); height: round(down, calc(71 * var(--px)), 1px); border-radius: round(down, calc(6 * var(--px)), 1px); object-fit: cover; display: block; }
.list-ys .hospital-pro-name { font-size: round(down, calc(11 * var(--px)), 1px); color: #1c1c1c; line-height: round(down, calc(16 * var(--px)), 1px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-ys .hospital-pro-price { font-size: round(down, calc(11 * var(--px)), 1px); font-weight: 500; color: #e83474; line-height: round(down, calc(16 * var(--px)), 1px); }

/* 积分商城（tab 3，components/pointProduct）：
   外层 .view-list 上原站给 padding 0 19rpx；.sp_content padding 0 5rpx；
   两列 calc(50% - 10rpx)，1px 边框 #e1e1e1，圆角 10rpx；
   图高固定 320rpx = 160px（不是等比方图）。 */
.sp_wrap { padding: 0 round(down, calc(9 * var(--px)), 1px); }
.sp_content { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 round(down, calc(2 * var(--px)), 1px); }
.sp_item {
  flex: 0 0 calc(50% - round(down, calc(5 * var(--px)), 1px)); width: calc(50% - round(down, calc(5 * var(--px)), 1px)); box-sizing: border-box;
  border: 1px solid #e1e1e1; border-radius: round(down, calc(5 * var(--px)), 1px); margin-bottom: round(down, calc(10 * var(--px)), 1px);
  display: flex; flex-direction: column; overflow: hidden;
  text-decoration: none; color: inherit;
}
.sp_img { width: 100%; background: #f6f6f6; }
/* 原站是 width:100% + height:320rpx（高度随容器缩放）。
   这里用 aspect-ratio 复刻同一个形状：@375 卡片宽 170.5 → 图高 160。 */
.sp_img img {
  display: block; width: 100%; aspect-ratio: 170.5 / 160;
  object-fit: cover; margin: 0 auto; border-radius: round(down, calc(5 * var(--px)), 1px);
}
.sp_text {
  padding: round(down, calc(5 * var(--px)), 1px); background: #fff; display: flex; flex-direction: column; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp_title {
  max-width: 100%; font-size: round(down, calc(16 * var(--px)), 1px); text-align: left; color: #000;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp_num { width: 100%; display: flex; flex-direction: column; flex: 1; margin-top: round(down, calc(2 * var(--px)), 1px); }
.sp_jf_num { display: flex; flex-direction: row; color: #ff5a62; font-size: round(down, calc(14 * var(--px)), 1px); }
.sp_jf_num > span { flex: 1; }
.sp_jf_num .sp_point { font-size: round(down, calc(16 * var(--px)), 1px); }
.sp_dh_num { font-size: round(down, calc(12 * var(--px)), 1px); color: #999; margin-top: round(down, calc(2 * var(--px)), 1px); }

/* 积分分类横滑条（tab 3 专用，替代 filterBox）。数据来自 Integral/getclassify */
/* 原站是 <scroll-view scroll-x enable-flex>，也就是一条 flex 横滑行。
   ⚠ 不要用 inline-flex 标签 + white-space:nowrap —— 行内基线余量会让整行
     在宽屏下凭空高 10px（@375 是 32px，@750 变 42px），进而溢出 .list-box。 */
.hospital-level-scroll {
  width: 100%; padding: round(down, calc(5 * var(--px)), 1px) round(down, calc(17 * var(--px)), 1px);
  box-sizing: border-box; overflow-x: auto; scrollbar-width: none;
  display: flex; align-items: center; flex-wrap: nowrap;
}
.hospital-level-scroll::-webkit-scrollbar { display: none; }
.hospital-level-scroll .item-tag {
  display: flex; flex-shrink: 0; margin-right: round(down, calc(20 * var(--px)), 1px); font-size: round(down, calc(14 * var(--px)), 1px); line-height: round(down, calc(14 * var(--px)), 1px);
  padding: round(down, calc(4 * var(--px)), 1px) round(down, calc(11 * var(--px)), 1px); color: #111; background: #f5f5f5; border-radius: round(down, calc(12 * var(--px)), 1px);
}
.hospital-level-scroll .item-tag-active {
  background: rgba(87, 76, 250, .1); color: #574cfa; border: 1px solid #574cfa; padding: round(down, calc(3 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px);
}

/* ---------- ⑩ 分页（SSR 专有：原站是上拉加载，爬虫需要真链接） ---------- */
.pagination {
  display: flex; justify-content: center; align-items: center; gap: round(down, calc(14 * var(--px)), 1px);
  padding: round(down, calc(14 * var(--px)), 1px) 0 round(down, calc(20 * var(--px)), 1px); font-size: round(down, calc(13 * var(--px)), 1px); color: #666; background: #f6f6f6;
}
.pagination a { color: #9e94eb; text-decoration: none; }


/* ==========================================================================
   ⑪ 骨架屏
   --------------------------------------------------------------------------
   数值取自原站四个列表组件的 .bone 样式（rpx × 0.5）：
     hospitalList  .image-box / .hospital-*-bone
     iteminfo      .list-item.bone
     doctorList    .list-ys.bone
     pointProduct  .sp_content.bone

   ⚠ SSR 首屏**不需要**骨架屏 —— 数据已经在 HTML 里了，这正是 SSR 的意义。
     它只用在客户端切 tab / 筛选 / 翻页那段取数空窗（见 index.vue 的 loading）。
   ========================================================================== */
.bone .image-box { width: round(down, calc(95 * var(--px)), 1px); height: round(down, calc(95 * var(--px)), 1px); border-radius: round(down, calc(8 * var(--px)), 1px); background: #f6f6f6; }

/* 机构卡 */
.list-jg.bone .hospital-title-bone {
  width: round(down, calc(100 * var(--px)), 1px); height: round(down, calc(24 * var(--px)), 1px); margin-bottom: round(down, calc(7 * var(--px)), 1px); background: #f6f6f6; border-radius: round(down, calc(8 * var(--px)), 1px);
}
.list-jg.bone .hospital-address-bone {
  width: round(down, calc(80 * var(--px)), 1px); height: round(down, calc(17 * var(--px)), 1px); margin-bottom: round(down, calc(6 * var(--px)), 1px); background: #f6f6f6; border-radius: round(down, calc(8 * var(--px)), 1px);
}
.list-jg.bone .response-time-bone {
  width: round(down, calc(90 * var(--px)), 1px); height: round(down, calc(17 * var(--px)), 1px); margin-bottom: round(down, calc(7 * var(--px)), 1px); background: #f6f6f6; border-radius: round(down, calc(8 * var(--px)), 1px);
}

/* 项目卡（原站 .image-box 这里是 196rpx，比机构卡的 190rpx 大 3px） */
.list-xm.bone .image-box { width: round(down, calc(98 * var(--px)), 1px); height: round(down, calc(98 * var(--px)), 1px); }
.list-xm.bone .list-item-title {
  width: round(down, calc(100 * var(--px)), 1px); height: round(down, calc(21 * var(--px)), 1px); border-radius: round(down, calc(8 * var(--px)), 1px); background: #f6f6f6;
}
.list-xm.bone .price-hb-title,
.list-xm.bone .yy-num-title,
.list-xm.bone .yy-price-title {
  height: round(down, calc(13 * var(--px)), 1px); border-radius: round(down, calc(8 * var(--px)), 1px); background: #f6f6f6;
}
.list-xm.bone .price-hb-title { width: round(down, calc(70 * var(--px)), 1px); }
.list-xm.bone .yy-num-title { width: round(down, calc(35 * var(--px)), 1px); }
.list-xm.bone .yy-price-title { width: round(down, calc(55 * var(--px)), 1px); }
.list-xm.bone .list-item-info > span { display: inline-block; height: round(down, calc(15 * var(--px)), 1px); width: round(down, calc(30 * var(--px)), 1px); background: #f6f6f6; border-radius: round(down, calc(8 * var(--px)), 1px); }

/* 院长卡。原站骨架的 .image-box 写的是 97rpx（≈48px），和实际 95px 头像对不上，
   多半是原站自己的笔误 —— 这里用真实尺寸，只保留它的圆形。 */
.list-ys.bone .image-box { border-radius: 50%; }
.list-ys.bone .doctor-title { width: round(down, calc(54 * var(--px)), 1px); height: round(down, calc(24 * var(--px)), 1px); background: #f6f6f6; border-radius: round(down, calc(8 * var(--px)), 1px); }
.list-ys.bone .info-txt { width: round(down, calc(70 * var(--px)), 1px); height: round(down, calc(17 * var(--px)), 1px); background: #f6f6f6; border-radius: round(down, calc(8 * var(--px)), 1px); }
.list-ys.bone .info-line { background: #f6f6f6; margin: round(down, calc(5 * var(--px)), 1px); padding: round(down, calc(5 * var(--px)), 1px) 0px; }
.list-ys.bone .doctor-tag-label { width: round(down, calc(24 * var(--px)), 1px); height: round(down, calc(16 * var(--px)), 1px); background: #f6f6f6; border-radius: round(down, calc(8 * var(--px)), 1px); }
.list-ys.bone .doctor-tag { width: round(down, calc(36 * var(--px)), 1px); height: round(down, calc(16 * var(--px)), 1px); background: #f6f6f6; border-radius: round(down, calc(8 * var(--px)), 1px); }
.list-ys.bone .hospital-pro-item { width: round(down, calc(71 * var(--px)), 1px); height: round(down, calc(71 * var(--px)), 1px); background: #f6f6f6; border-radius: round(down, calc(8 * var(--px)), 1px); }

/* 积分商品（原站 .sp_img 骨架高 358rpx） */
.sp_content.bone .sp_img { width: 100%; height: round(down, calc(179 * var(--px)), 1px); background: #f6f6f6; }
.sp_content.bone .sp_title { width: 70%; height: round(down, calc(18 * var(--px)), 1px); background: #f6f6f6; border-radius: round(down, calc(8 * var(--px)), 1px); }
.sp_content.bone .sp_jf_num { width: 40%; height: round(down, calc(16 * var(--px)), 1px); background: #f6f6f6; border-radius: round(down, calc(8 * var(--px)), 1px); margin-top: round(down, calc(4 * var(--px)), 1px); }

/* 呼吸感，原站没有但空窗期不闪一下很像卡死 */
.bone .image-box, .bone [class$="-bone"], .bone .sp_img,
.list-xm.bone .list-item-title, .list-ys.bone .doctor-title { animation: bone-pulse 1.4s ease-in-out infinite; }
@keyframes bone-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }


/* ==========================================================================
   ⑫ 列表页专用（机构列表 / 医生列表 / 搜索结果 / 商圈）
   --------------------------------------------------------------------------
   和首页的区别（实测老站 /cn/hospitals）：
     · 没有 u-tabs，筛选条是**独立一层 sticky**，不像首页嵌在 .list-box 里
     · .view-list 没有 padding-bottom（首页那 54px 是首页特有的），
       改由最外层 padding-bottom: 150rpx = 75px 给 tabbar 留位
     · 搜索栏是**真输入框**（原站 searchBar 的 index=false 形态）
   ========================================================================== */
.page-body--list { padding: 0 0 round(down, calc(75 * var(--px)), 1px); }

/* 搜索结果页：老站把 searchBar 和 filterBox 放在**同一层** u-sticky 里
   （pages/search/list.vue），所以两条一起吸顶，不像机构列表那样分两层。 */
.sticky-search-filter { position: sticky; top: 0; z-index: 999; background: #fff; }
.sticky-search-filter .search-bar { position: static; }
.content-wrapper { background: #fff; }

/* 筛选条独立 sticky：老站是 <u-sticky bgColor="#fff" offset-top="95rpx" z-index="999">，
   实测吸附位置 y=92（= 标题栏 44 + 搜索栏 48），和首页 .sticky-tabs 同一条线。 */
.sticky-filter {
  position: sticky; top: round(down, calc(92 * var(--px)), 1px); z-index: 999; background: #fff;
}

/* .view-list 在列表页不留底部内边距（首页才有 54px） */
.view-list--plain { padding: 0; }

/* 搜索框在列表页是 <form> + <input>，清掉浏览器默认样式，
   其余尺寸沿用 §② 的 .search-box / .search-text。 */
.search-bar form.search-box { border: 0; }
.search-bar input.search-text {
  border: 0; background: transparent; outline: none; padding: 0;
  -webkit-appearance: none; appearance: none;
}
.search-bar input.search-text::-webkit-search-cancel-button { -webkit-appearance: none; }


/* ==========================================================================
   ⑬ 医生列表页的卡片
   --------------------------------------------------------------------------
   ⚠ 和首页 tab 2 的院长卡**不是同一套**。原站 pages/doctor/doctor.vue 没有用
     components/doctorList，而是自己内联了一套：头像 97rpx 圆形、标题 16px/700、
     标签换行、卡片没有白底和圆角。类名却和首页那套重名（.doctor-title /
     .doctor-tag / .list-item …），所以这里必须用 .doctors-list 限定作用域，
     否则会互相污染。数值全部来自 localhost:8080/cn/doctors 实测 @375。
   ========================================================================== */
/* ⚠ border-bottom 20rpx solid #EEEEEE 是卡片之间的灰色分隔条，不是普通边框 ——
     漏了它每张卡矮 10px（实测老站 205 / 我 194）。 */
.doctors-list .list-item {
  display: flex; flex-direction: row; padding: 0 round(down, calc(24 * var(--px)), 1px); margin: round(down, calc(5 * var(--px)), 1px) 0;
  border-bottom: round(down, calc(10 * var(--px)), 1px) solid #EEEEEE;
  text-decoration: none; color: inherit;
}
.doctors-list .list-item-left { flex: 0 0 round(down, calc(48 * var(--px)), 1px); }
.doctors-list .list-item-left img {
  width: round(down, calc(48 * var(--px)), 1px); height: round(down, calc(48 * var(--px)), 1px); border-radius: 50%; object-fit: cover; display: block;
}
.doctors-list .list-item-right { flex: 1; min-width: 0; margin-left: round(down, calc(11 * var(--px)), 1px); }

.doctors-list .doctor-info { display: flex; align-items: center; font-size: round(down, calc(10 * var(--px)), 1px); color: #444; }
.doctors-list .doctor-title {
  font-size: round(down, calc(16 * var(--px)), 1px); font-weight: 700; color: #0c0d10; line-height: round(down, calc(22 * var(--px)), 1px); margin-right: round(down, calc(8 * var(--px)), 1px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doctors-list .info-txt {
  font-size: round(down, calc(10 * var(--px)), 1px); color: #5c5c5c; line-height: round(down, calc(14 * var(--px)), 1px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 实测 2x10：内容 0，全靠 padding 撑出来的一根竖线 */
.doctors-list .info-line {
  width: 0; height: 0; padding: round(down, calc(5 * var(--px)), 1px) 1px; margin: round(down, calc(5 * var(--px)), 1px); background: #444;
  box-sizing: content-box; flex-shrink: 0;
}

.doctors-list .doctor-tag-list {
  display: flex; flex-wrap: wrap; align-items: center; margin-top: round(down, calc(7 * var(--px)), 1px);
}
.doctors-list .doctor-tag-label {
  font-size: round(down, calc(10 * var(--px)), 1px); color: #444; line-height: round(down, calc(14 * var(--px)), 1px); margin: 0 round(down, calc(5 * var(--px)), 1px) round(down, calc(3 * var(--px)), 1px) 0; flex-shrink: 0;
}
/* ⚠ 原站有 `border: 1rpx solid #e4e4e4` + content-box —— 边框虽然浅但占 2px 宽，
     漏了每个标签窄 2px（实测「水光针」老站 42.67 / 我 40.67，文字宽度两边一样）。 */
.doctors-list .doctor-tag {
  /* 行高 14 不是 16：老站 content-box 下总高 24 = 内容 14 + padding 8 + border 2 */
  font-size: round(down, calc(10 * var(--px)), 1px); color: #5f5f5f; line-height: round(down, calc(14 * var(--px)), 1px);
  padding: round(down, calc(4 * var(--px)), 1px) round(down, calc(5 * var(--px)), 1px); margin: 0 round(down, calc(5 * var(--px)), 1px) round(down, calc(3 * var(--px)), 1px) 0; background: #f6f6f6;
  border: 1px solid #e4e4e4; border-radius: round(down, calc(2 * var(--px)), 1px); box-sizing: content-box;
}

/* ⚠ 照抄原站的 white-space:nowrap + inline-block，别改成 flex ——
     行内基线余量让整条高 92px（flex 会是 88px）。
   ⚠ 必须显式写 flex/width 覆盖首页 §⑨ 的 `.hospital-pro-item { flex: 0 0 71px }`，
     只写 flex-shrink 覆盖不掉 flex-basis，实测被撑成 71x88。 */
.doctors-list .hospital-pro-scroll {
  white-space: nowrap; overflow-x: auto; margin: round(down, calc(9 * var(--px)), 1px) 0 round(down, calc(11 * var(--px)), 1px);
  width: 100%; scrollbar-width: none; display: block;
}
.doctors-list .hospital-pro-scroll::-webkit-scrollbar { display: none; }
.doctors-list .hospital-pro-item {
  display: inline-block; margin-right: round(down, calc(10 * var(--px)), 1px); flex: none; width: round(down, calc(87 * var(--px)), 1px);
}
.doctors-list .hospital-pro-item img {
  width: round(down, calc(87 * var(--px)), 1px); height: round(down, calc(87 * var(--px)), 1px); border-radius: round(down, calc(7 * var(--px)), 1px); object-fit: cover; display: block;
}

/* 骨架屏（原站 .list-ys.bone 在这一页对应的尺寸） */
.doctors-list.bone .list-item-left .image-box {
  width: round(down, calc(48 * var(--px)), 1px); height: round(down, calc(48 * var(--px)), 1px); border-radius: 50%; background: #f6f6f6;
}
.doctors-list.bone .doctor-title { width: round(down, calc(54 * var(--px)), 1px); height: round(down, calc(22 * var(--px)), 1px); background: #f6f6f6; border-radius: round(down, calc(8 * var(--px)), 1px); }
.doctors-list.bone .info-txt { width: round(down, calc(60 * var(--px)), 1px); height: round(down, calc(14 * var(--px)), 1px); background: #f6f6f6; border-radius: round(down, calc(8 * var(--px)), 1px); }
.doctors-list.bone .doctor-tag-label { width: round(down, calc(20 * var(--px)), 1px); height: round(down, calc(14 * var(--px)), 1px); background: #f6f6f6; border-radius: round(down, calc(8 * var(--px)), 1px); }
.doctors-list.bone .doctor-tag { width: round(down, calc(43 * var(--px)), 1px); height: round(down, calc(24 * var(--px)), 1px); background: #f6f6f6; border-radius: round(down, calc(8 * var(--px)), 1px); padding: 0; }
.doctors-list.bone .hospital-pro-item {
  width: round(down, calc(87 * var(--px)), 1px); height: round(down, calc(87 * var(--px)), 1px); background: #f6f6f6; border-radius: round(down, calc(7 * var(--px)), 1px); flex: none;
}