.ly_add-image-btn {
  padding: 8px 16px;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  background: #fff;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.ly_add-image-btn:hover {
  background: #fafafa;
  border-color: #bbb;
}

.ly_add-image-btn:active {
  background: #f0f0f0;
}

.ly_carousel {
  position: relative;
  width: min(100%, 320px);
  aspect-ratio: 4 / 5;
  border: 1px solid #d8d8d8;
  background: #fff;
  overflow: hidden;
  user-select: none;
  cursor: grab;
  touch-action: pan-y;
}

.ly_carousel--dragging {
  cursor: grabbing;
}

.ly_carousel--dragging .ly_carousel__track {
  transition: none;
}

.ly_carousel__track {
  display: flex;
  height: 100%;
  transition: transform 0.35s ease;
}

.ly_carousel__track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.ly_carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.ly_carousel__btn:hover {
  color: #fff;
}

.ly_carousel__btn:active {
  opacity: 0.7;
}

.ly_carousel__btn--disabled {
  opacity: 0.35;
  cursor: default;
  color: rgba(255, 255, 255, 0.4);
}

.ly_carousel__btn--disabled:hover {
  color: rgba(255, 255, 255, 0.4);
  opacity: 0.35;
}

.ly_carousel__btn--prev {
  left: 4px;
}

.ly_carousel__btn--next {
  right: 4px;
}

.ly_carousel__btn svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.ly_carousel--single .ly_carousel__btn {
  display: none;
}

.ly_carousel--nav-hide .ly_carousel__btn {
  display: none;
}

/* 铺开模式：同时显示多张，横向滚动 */
.ly_carousel--spread {
  width: min(100%, 960px);
  aspect-ratio: 4 / 1;
  --ly-visible: 4;
}

.ly_carousel--spread .ly_carousel__track img {
  flex: 0 0 calc(100% / var(--ly-visible));
  width: calc(100% / var(--ly-visible));
}

/* 居中聚焦模式：固定宽度卡片，两侧露出相邻项 */
.ly_carousel--focus {
  width: 100%;
  aspect-ratio: auto;
  min-height: 0;
  overflow: visible;
  border: none;
  background: transparent;
  cursor: default;
}

.ly_carousel--focus .ly_carousel__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}

.ly_carousel--focus.ly_carousel--dragging,
.ly_carousel--focus .ly_carousel__viewport.ly_carousel--dragging {
  cursor: grabbing;
}

.ly_carousel--focus .ly_carousel__viewport.ly_carousel--dragging .ly_carousel__track {
  transition: none;
}

.ly_carousel--focus .ly_carousel__track {
  height: auto;
  align-items: stretch;
  gap: var(--ly-slide-gap, 1vw);
}

.ly_carousel--focus .ly_carousel__slide {
  flex: 0 0 var(--ly-slide-width, 27.6vw);
  flex-shrink: 0;
  width: var(--ly-slide-width, 27.6vw);
  min-width: var(--ly-slide-width, 27.6vw);
  max-width: var(--ly-slide-width, 27.6vw);
  height: var(--ly-slide-height, 33.1vw);
  box-sizing: border-box;
}

/* 文字说明模式：图片下方展示标题与描述 */
.ly_carousel--caption {
  width: min(100%, 560px);
  aspect-ratio: auto;
  min-height: 0;
  overflow: hidden;
  border: none;
  background: #fdf6f6;
  cursor: default;
}

.ly_carousel--caption .ly_carousel__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}

.ly_carousel--caption.ly_carousel--dragging,
.ly_carousel--caption .ly_carousel__viewport.ly_carousel--dragging {
  cursor: grabbing;
}

.ly_carousel--caption .ly_carousel__viewport.ly_carousel--dragging .ly_carousel__track {
  transition: none;
}

.ly_carousel--caption .ly_carousel__track {
  height: auto;
  align-items: stretch;
}

.ly_carousel--caption .ly_carousel__slide {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 56px 40px;
  text-align: center;
  box-sizing: border-box;
}

.ly_carousel--caption .ly_carousel__slide img {
  flex: none;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
}

.ly_carousel--caption .ly_carousel__caption {
  width: 100%;
  max-width: 380px;
}

.ly_carousel--caption .ly_carousel__title {
  margin-top: 18px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: #3d3d5c;
}

.ly_carousel--caption .ly_carousel__desc {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.65;
  color: #5a5a7a;
}

.ly_carousel--caption .ly_carousel__btn {
  color: #c97b84;
}

.ly_carousel--caption .ly_carousel__btn:hover {
  color: #b56872;
}

.ly_carousel--caption .ly_carousel__btn svg {
  filter: none;
}

.ly_carousel--caption .ly_carousel__btn--disabled {
  color: rgba(201, 123, 132, 0.35);
}

.ly_carousel--caption .ly_carousel__btn--disabled:hover {
  color: rgba(201, 123, 132, 0.35);
}

/* 缩略图预览 */
.ly_carousel--thumbs {
  display: flex;
  aspect-ratio: auto;
  overflow: visible;
  border: none;
  background: transparent;
  cursor: default;
  gap: 8px;
}

.ly_carousel--thumbs-top,
.ly_carousel--thumbs-bottom {
  flex-direction: column;
  width: min(100%, 320px);
}

.ly_carousel--thumbs-left,
.ly_carousel--thumbs-right {
  flex-direction: row;
  align-items: stretch;
  width: min(100%, 400px);
}

.ly_carousel--thumbs .ly_carousel__viewport {
  position: relative;
  flex: 1;
  min-width: 0;
  aspect-ratio: 4 / 5;
  border: 1px solid #d8d8d8;
  background: #fff;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}

.ly_carousel--thumbs.ly_carousel--dragging,
.ly_carousel--thumbs .ly_carousel__viewport.ly_carousel--dragging {
  cursor: grabbing;
}

.ly_carousel--thumbs .ly_carousel__viewport.ly_carousel--dragging .ly_carousel__track {
  transition: none;
}

.ly_carousel--thumbs-top .ly_carousel__thumbs,
.ly_carousel--thumbs-bottom .ly_carousel__thumbs,
.ly_carousel--thumbs-left .ly_carousel__thumbs,
.ly_carousel--thumbs-right .ly_carousel__thumbs {
  display: flex;
  gap: 6px;
}

.ly_carousel--thumbs-top .ly_carousel__thumbs,
.ly_carousel--thumbs-bottom .ly_carousel__thumbs {
  flex-direction: row;
  width: 100%;
}

.ly_carousel--thumbs-left .ly_carousel__thumbs,
.ly_carousel--thumbs-right .ly_carousel__thumbs {
  flex-direction: column;
  width: 64px;
  flex-shrink: 0;
}

.ly_carousel--thumbs-top .ly_carousel__thumb,
.ly_carousel--thumbs-bottom .ly_carousel__thumb {
  flex: 1;
  aspect-ratio: 4 / 5;
}

.ly_carousel--thumbs-left .ly_carousel__thumb,
.ly_carousel--thumbs-right .ly_carousel__thumb {
  width: 100%;
  aspect-ratio: 4 / 5;
  flex: 0 0 auto;
}

.ly_carousel__thumb {
  padding: 0;
  border: 1px solid #d8d8d8;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  opacity: 0.45;
  transition: opacity 0.2s ease;
}

.ly_carousel__thumb--active {
  opacity: 1;
}

.ly_carousel__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
