/* Scrollbar：单列对照；锁宽；embed 悬停显条；横纵同细滑块 */
.wa-fam-grid {
  grid-template-columns: minmax(0, 1fr);
}

.wa-fam-grid > .wa-fam-card {
  min-width: 0;
  max-width: 100%;
}

.wa-fam-card__stage {
  display: block !important;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.wa-layout-demo,
.wa-sb-clip {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

body.wa-preview-embed .wa-embed {
  width: min(720px, calc(100% - 32px));
}

.wa-sb-v,
.wa-sb-h {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--color-border-2);
  border-radius: 4px;
  background: var(--color-fill-2);
  overflow: hidden;
}

.wa-sb-v {
  height: 280px;
}

.wa-sb-h {
  height: 150px;
}

.wa-sb-v .arco-scrollbar-container,
.wa-sb-h .arco-scrollbar-container {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100%;
  overflow: auto !important;
}

/* 无轨道底；悬停显条（embed）；横纵统一细滑块 */
.wa-sb-v .arco-scrollbar-track,
.wa-sb-h .arco-scrollbar-track {
  background: transparent !important;
  border: none !important;
}

.wa-sb-v .arco-scrollbar-track-direction-vertical {
  width: 10px;
}

.wa-sb-h .arco-scrollbar-track-direction-horizontal {
  height: 10px;
}

.wa-sb-v .arco-scrollbar-thumb-direction-vertical,
.wa-sb-h .arco-scrollbar-thumb-direction-horizontal {
  margin: 0 !important;
}

.wa-sb-v .arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar,
.wa-sb-h .arco-scrollbar-thumb-direction-horizontal .arco-scrollbar-thumb-bar {
  background-color: var(--color-neutral-4, #c9cdd4);
  border-radius: 999px;
}

.wa-sb-v .arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar {
  width: 5px;
  margin: 0 2.5px;
}

.wa-sb-h .arco-scrollbar-thumb-direction-horizontal .arco-scrollbar-thumb-bar {
  height: 5px;
  margin: 2.5px 0;
}

.wa-sb-v .arco-scrollbar-thumb:hover .arco-scrollbar-thumb-bar,
.wa-sb-h .arco-scrollbar-thumb:hover .arco-scrollbar-thumb-bar,
.wa-sb-v .arco-scrollbar-thumb-dragging .arco-scrollbar-thumb-bar,
.wa-sb-h .arco-scrollbar-thumb-dragging .arco-scrollbar-thumb-bar {
  background-color: var(--color-neutral-6, #86909c);
}

.wa-sb-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 12px 12px 8px;
  width: max-content;
  max-width: none;
  box-sizing: border-box;
}

/* 纵向：三列卡片网格 */
.wa-sb-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  box-sizing: border-box;
}

/* 横滑 / 纵滑共用默认卡片（.wa-acard）；横滑锁宽，纵滑跟网格列宽 */
.wa-sb-card {
  box-sizing: border-box;
  min-width: 0;
}

.wa-sb-track .wa-sb-card {
  flex: 0 0 200px;
  width: 200px;
}

.wa-sb-grid .wa-sb-card {
  width: auto;
}

/* 滚动区内补齐卡片正文最小高度；圆角/阴影/标题走全局 .wa-acard */
.wa-sb-card .arco-card-body {
  min-height: 72px;
}

/* 家族页未链 card/component.css 时，正文仍对齐默认卡片说明样式 */
.wa-sb-card .wa-acard-desc {
  margin: 0;
  color: var(--color-text-3);
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0.01em;
}