/**
 * app-screens — Multi-visible Peek gallery
 * 3 枚同時表示（PC） / 1.2 枚（モバイル） + 右端 peek でスクロール可能と認知させる
 * Remosse-Web: --skin-light  /  Stonehash-Web: --skin-dark
 */

/* ─── Custom properties ────────────────────── */
.app-screens {
  --as-gap: 0.875rem;
  --as-radius: 1.125rem;
  --as-btn-size: 2.25rem;
  margin-top: 2rem;
}

/* Light skin（Remosse-Web） */
.app-screens--skin-light {
  --as-card-bg: #ffffff;
  --as-card-img-bg: #f1f5f9;
  --as-card-shadow: 0 2px 14px rgb(15 23 42 / 0.08), 0 1px 3px rgb(15 23 42 / 0.05);
  --as-caption-head: rgb(15 23 42);
  --as-caption-body: rgb(100 116 139);
  --as-btn-bg: rgb(255 255 255 / 0.95);
  --as-btn-fg: rgb(51 65 85);
  --as-btn-border: rgb(226 232 240);
  --as-dot: rgb(203 213 225);
  --as-dot-hover: rgb(148 163 184);
  --as-dot-active: #3dc7c7;
}

@media (prefers-color-scheme: dark) {
  .app-screens--skin-light {
    --as-card-bg: rgb(30 41 59 / 0.75);
    --as-card-img-bg: rgb(15 23 42 / 0.7);
    --as-card-shadow: 0 2px 14px rgb(0 0 0 / 0.3), 0 1px 3px rgb(0 0 0 / 0.2);
    --as-caption-head: rgb(248 250 252);
    --as-caption-body: rgb(148 163 184);
    --as-btn-bg: rgb(15 23 42 / 0.92);
    --as-btn-fg: rgb(226 232 240);
    --as-btn-border: rgb(51 65 85);
    --as-dot: rgb(51 65 85);
    --as-dot-hover: rgb(100 116 139);
    --as-dot-active: #38bdf8;
  }
}

/* Dark skin（Stonehash-Web） */
.app-screens--skin-dark {
  --as-card-bg: rgb(9 15 33);
  --as-card-img-bg: rgb(2 6 23);
  --as-card-shadow: 0 4px 22px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(30 64 175 / 0.45);
  --as-caption-head: rgb(226 232 240);
  --as-caption-body: rgb(148 163 184);
  --as-btn-bg: rgb(15 23 42 / 0.92);
  --as-btn-fg: rgb(226 232 240);
  --as-btn-border: rgb(30 58 138 / 0.55);
  --as-dot: rgb(30 41 59);
  --as-dot-hover: rgb(71 85 105);
  --as-dot-active: #38bdf8;
}

/* ─── Scroll track ──────────────────────────── */
/*
 * overflow-x: auto → スクロールコンテナとして機能し、
 * padding の内側で box-shadow が見える
 */
.app-screens__track {
  display: flex;
  gap: var(--as-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* 上下の padding で box-shadow を表示。左右は peek のため最小限 */
  padding: 1rem 0.375rem 1.5rem;
  list-style: none;
  margin: 0 0 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  /* 横方向のパンを明示（タッチ／一部ブラウザの挙動整理） */
  touch-action: pan-x pinch-zoom;
}

.app-screens__track:active {
  cursor: grabbing;
  scroll-behavior: auto;
}

/* ドラッグ中は scroll-snap と scrollLeft の更新が競合してカクつくため無効化（JS が is-dragging を付与） */
.app-screens__track.is-dragging {
  scroll-snap-type: none;
  /* スクロール位置のレイヤ化で追従を滑らかに */
  will-change: scroll-position;
}

.app-screens__track::-webkit-scrollbar {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .app-screens__track {
    scroll-behavior: auto;
  }
}

/* ─── Cards ─────────────────────────────────── */
/*
 * PC: 3 枚 + 0.25 枚 peek  →  calc((100% - 2gap) / 3.25)
 * SP: 1 枚 + 0.2 枚 peek   →  calc((100% - gap)  / 1.2)
 * 100% = track の flex container 幅（= 表示領域幅）
 */
.app-screens__card {
  flex: 0 0 calc((100% - 2 * var(--as-gap)) / 3.25);
  min-width: 160px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  border-radius: var(--as-radius);
  background: var(--as-card-bg);
  box-shadow: var(--as-card-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

@media (max-width: 639px) {
  .app-screens__card {
    flex: 0 0 calc((100% - var(--as-gap)) / 1.2);
  }
}

/* ─── Image area（全カードで同じ高さ → 端末画像の上下位置を揃える） ─ */
.app-screens__img-wrap {
  flex: 0 0 auto;
  /* 説明文の長さに依存させない固定スロット（長いキャプションは下ブロックで折返し） */
  height: clamp(17.25rem, 36vw, 24rem);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: var(--as-card-img-bg);
  padding: 1rem 0.625rem 0;
}

.app-screens__img-wrap img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  object-position: bottom center;
  /* ブラウザの画像ドラッグで横スクロールが奪われないように */
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  filter: drop-shadow(0 6px 18px rgb(0 0 0 / 0.2));
}

.app-screens--skin-dark .app-screens__img-wrap img {
  filter: drop-shadow(0 6px 20px rgb(0 0 0 / 0.55));
}

/* ─── Card caption（最低高さで見出し位置を揃え、余白は下に回す） ─ */
.app-screens__card-caption {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 7.25rem;
  padding: 0.75rem 0.875rem 1rem;
  box-sizing: border-box;
}

.app-screens__card-caption strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--as-caption-head);
  margin: 0 0 0.2rem;
  line-height: 1.4;
}

.app-screens__card-caption span {
  display: block;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--as-caption-body);
}

/* ─── Footer: [←] dots [→] ──────────────────── */
.app-screens__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

/* ─── Prev / Next ───────────────────────────── */
.app-screens__btn {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  pointer-events: auto;
  width: var(--as-btn-size);
  height: var(--as-btn-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--as-btn-border);
  background: var(--as-btn-bg);
  color: var(--as-btn-fg);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease;
}

.app-screens__btn:hover:not(:disabled) {
  transform: scale(1.08);
}

.app-screens__btn:focus-visible {
  outline: 2px solid var(--as-dot-active);
  outline-offset: 2px;
}

.app-screens__btn:disabled {
  opacity: 0.28;
  cursor: not-allowed;
}

.app-screens__btn svg {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}

/* ─── Dot indicators ─────────────────────────── */
.app-screens__dots {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.app-screens__dots button {
  display: block;
  height: 0.5rem;
  width: 0.5rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--as-dot);
  cursor: pointer;
  /* width transition → active は pill 形（1.5rem 幅） */
  transition: background 0.2s ease, width 0.2s ease;
}

.app-screens__dots button:hover {
  background: var(--as-dot-hover);
}

.app-screens__dots button[aria-current="true"] {
  background: var(--as-dot-active);
  width: 1.5rem;
}

.app-screens__dots button[aria-current="true"]:hover {
  background: var(--as-dot-active);
}

.app-screens__dots button:focus-visible {
  outline: 2px solid var(--as-dot-active);
  outline-offset: 2px;
}