/*
 * figure-slider：構造と動きだけ
 * 受ける変数：
 *   --part-figure-height（舞台の高さ）/ --part-figure-foot（床から足元までの高さ）
 *   --part-pedestal（台座の塗り）/ --part-pedestal-line / --part-figure-shadow（足元の影の色）
 *   --part-stage-bg（舞台の背景）/ --part-radius / --part-fg / --part-muted / --part-bg / --part-line / --part-accent / --part-accent-fg / --part-focus
 */
.part-figure-slider {
  position: relative;
  min-width: 0;
  color: var(--part-fg, #222);
}

.part-figure-slider__store {
  display: none;
}

.part-figure-slider__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

.part-figure-slider__tab {
  min-height: 40px;
  padding: 8px 18px;
  border: 1px solid var(--part-line, #cfcfcf);
  border-radius: 999px;
  background: var(--part-bg, #fff);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.part-figure-slider__tab[aria-selected="true"] {
  border-color: var(--part-accent, #333);
  background: var(--part-accent, #333);
  color: var(--part-accent-fg, #fff);
}

.part-figure-slider__stage {
  position: relative;
  height: var(--part-figure-height, clamp(340px, 62vw, 560px));
  overflow: hidden;
  border-radius: var(--part-radius, 8px);
  background: var(--part-stage-bg, linear-gradient(180deg, #f6f6f6 0%, #ececec 100%));
  touch-action: pan-y;
  user-select: none;
}

.part-figure-slider__stage:focus {
  outline: none;
}

.part-figure-slider__stage:focus-visible {
  outline: 2px solid var(--part-focus, #1a1a1a);
  outline-offset: 2px;
}

.part-figure-slider__floor {
  position: absolute;
  left: 50%;
  bottom: calc(var(--part-figure-foot, 9%) - 5%);
  width: min(62%, 360px);
  height: 10%;
  border: 1px solid var(--part-pedestal-line, rgba(0, 0, 0, 0.08));
  border-radius: 50%;
  background: var(--part-pedestal, radial-gradient(ellipse at 50% 40%, #fff 0%, #e2e2e2 70%, #d6d6d6 100%));
  transform: translateX(-50%);
}

.part-figure-slider__shadow {
  position: absolute;
  left: 50%;
  bottom: calc(var(--part-figure-foot, 9%) - 1.6%);
  width: min(30%, 170px);
  height: 3.2%;
  border-radius: 50%;
  background: var(--part-figure-shadow, rgba(0, 0, 0, 0.28));
  filter: blur(6px);
  transform: translateX(-50%);
}

.part-figure-slider__frames {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 4%;
  bottom: var(--part-figure-foot, 9%);
}

.part-figure-slider__frame {
  position: absolute;
  inset: 0;
}

.part-figure-slider__frame[hidden] {
  display: none;
}

.part-figure-slider__frame.is-leaving {
  pointer-events: none;
}

.part-figure-slider__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  -webkit-user-drag: none;
}

.part-figure-slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 1px solid var(--part-line, #cfcfcf);
  border-radius: 50%;
  background: var(--part-bg, #fff);
  color: var(--part-fg, #222);
  cursor: pointer;
}

.part-figure-slider__arrow[hidden] {
  display: none;
}

.part-figure-slider__arrow--prev {
  left: 10px;
}

.part-figure-slider__arrow--next {
  right: 10px;
}

.part-figure-slider__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.part-figure-slider__arrow--prev::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}

.part-figure-slider__arrow--next::before {
  transform: translate(-70%, -50%) rotate(45deg);
}

.part-figure-slider__caption {
  margin: 14px 0 0;
  text-align: center;
}

.part-figure-slider__caption p {
  margin: 0;
}

.part-figure-slider__count {
  color: var(--part-muted, #666);
  font-size: 0.8em;
  letter-spacing: 0.08em;
}

.part-figure-slider__pose {
  margin-top: 2px;
  font-size: 1.15em;
  font-weight: 700;
}

.part-figure-slider__note {
  margin-top: 4px;
  color: var(--part-muted, #555);
}

.part-figure-slider__thumbs {
  display: flex;
  justify-content: safe center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 4px 2px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.part-figure-slider__thumbs[hidden] {
  display: none;
}

.part-figure-slider__thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 80px;
  padding: 4px;
  border: 1px solid var(--part-line, #cfcfcf);
  border-radius: var(--part-radius, 8px);
  background: var(--part-surface, #f4f4f4);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s, border-color 0.2s;
}

.part-figure-slider__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
}

.part-figure-slider__thumb[aria-pressed="true"] {
  border-color: var(--part-accent, #333);
  box-shadow: inset 0 0 0 1px var(--part-accent, #333);
  opacity: 1;
}

.part-figure-slider__thumb:hover {
  opacity: 1;
}

.part-figure-slider__tab:focus-visible,
.part-figure-slider__arrow:focus-visible,
.part-figure-slider__thumb:focus-visible {
  outline: 2px solid var(--part-focus, #1a1a1a);
  outline-offset: 2px;
}

.part-figure-slider[data-part-motion="reduce"] *,
.part-figure-slider[data-part-motion="reduce"] *::before {
  transition: none !important;
  animation: none !important;
}
