/**
 * 搜索入口页 /{lang}/search —— 照 pages/search/search.vue 的 scoped SCSS 换算
 * （375 视口下 1rpx = 0.5px）。
 *
 * ⚠ 原站是 scoped 的，.body/.title/.list/.search 全是通用名，
 *   这里一律挂在 .search-page 下，不能污染全站。
 */
.body.search-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  box-sizing: border-box;
  padding-bottom: 0;
}

.search-page .search {
  background-color: #f5f5f5;
  width: 100%;
  box-sizing: border-box;
  padding: round(down, calc(10 * var(--px)), 1px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.search-page .search-left {
  flex-grow: 1;
  height: round(down, calc(35 * var(--px)), 1px);
  background: #ffffff;
  border-radius: round(down, calc(21 * var(--px)), 1px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 round(down, calc(13 * var(--px)), 1px);
  min-width: 0;
}
.search-page .search-left .search-icon {
  width: round(down, calc(15 * var(--px)), 1px); height: round(down, calc(15 * var(--px)), 1px); flex-shrink: 0; margin-right: round(down, calc(3 * var(--px)), 1px);
}
.search-page .search-left input {
  flex-grow: 1;
  min-width: 0;
  font-size: round(down, calc(12 * var(--px)), 1px);
  color: #1a1a1a;
  border: 0;
  outline: none;
  background: none;
}
.search-page .search-right {
  width: round(down, calc(59 * var(--px)), 1px);
  height: round(down, calc(35 * var(--px)), 1px);
  background: #afa7ef;
  border-radius: round(down, calc(21 * var(--px)), 1px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: round(down, calc(12 * var(--px)), 1px);
  color: #ffffff;
  flex-shrink: 0;
  margin-left: round(down, calc(10 * var(--px)), 1px);
  border: 0;
  /* ⚠ index.css 里有一条裸的 `.search-right { padding:10px }`（首页搜索栏用的），
     这里必须显式清掉，否则按钮被撑变形。 */
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

.search-page .detaile {
  background: #ffffff;
  border-radius: round(down, calc(15 * var(--px)), 1px) round(down, calc(15 * var(--px)), 1px) 0 0;
  min-height: calc(100vh - round(down, calc(55 * var(--px)), 1px));
}
.search-page .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: round(down, calc(20 * var(--px)), 1px) round(down, calc(10 * var(--px)), 1px) round(down, calc(12 * var(--px)), 1px);
  font-size: round(down, calc(15 * var(--px)), 1px);
  font-weight: 500;
  color: #333333;
  background: none;
}
.search-page .title > div { width: round(down, calc(19 * var(--px)), 1px); height: round(down, calc(19 * var(--px)), 1px); cursor: pointer; }
.search-page .title > div img { width: 100%; height: 100%; }

.search-page .list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 round(down, calc(4 * var(--px)), 1px);
}
.search-page .list a {
  background: #f5f5f5;
  border-radius: round(down, calc(15 * var(--px)), 1px);
  margin: 0 round(down, calc(6 * var(--px)), 1px) round(down, calc(12 * var(--px)), 1px);
  padding: round(down, calc(6 * var(--px)), 1px) round(down, calc(12 * var(--px)), 1px);
  font-size: round(down, calc(12 * var(--px)), 1px);
  color: #333333;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.search-page .list a img {
  width: round(down, calc(14 * var(--px)), 1px); height: round(down, calc(14 * var(--px)), 1px); flex-shrink: 0; margin-right: round(down, calc(2 * var(--px)), 1px);
}