/* ============================================
   27. WORK DETAIL - GALLERY 追加分
   style.css の末尾に貼り付けてください
   （変数・section-heading・work-detail 等は既存を流用）
   ============================================ */

.work-gallery { padding: var(--space-2xl) 0; }
.work-gallery.alt {
  background: var(--color-white);
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}
.work-gallery .section-inner {
  max-width: 1080px; margin: 0 auto; padding: 0 var(--space-xl);
}

/* --- PC ギャラリー --- */
.pc-stack { display: grid; gap: var(--space-lg); }
.pc-frame {
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-alt);
  overflow: hidden;
}
.pc-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 9px var(--space-md);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-light);
}
.pc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-border); }
.pc-url {
  margin-left: var(--space-sm);
  font-family: var(--font-mono); font-size: 0.55rem;
  letter-spacing: 0.08em; color: var(--color-text-muted);
}
.pc-screen { display: block; }
.pc-screen img { width: 100%; height: auto; display: block; }
.pc-cap {
  margin-top: var(--space-sm);
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.12em; color: var(--color-text-muted);
}

/* --- スマホ ギャラリー --- */
.mobile-row {
  display: flex; gap: var(--space-lg);
  flex-wrap: wrap; justify-content: center;
}
.phone { width: 172px; flex-shrink: 0; }
.phone-frame {
  border: 1px solid var(--color-border);
  border-radius: 22px; padding: 8px;
  background: var(--color-white);
  box-shadow: 0 18px 40px -28px rgba(44,40,37,0.5);
}
.phone-notch {
  width: 46px; height: 4px; border-radius: 4px;
  background: var(--color-border); margin: 0 auto 7px;
}
.phone-screen {
  border-radius: 14px; overflow: hidden;
  aspect-ratio: 9 / 19;             /* ファーストビュー想定。上揃えで表示 */
  background: var(--color-bg-alt);
}
.phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.phone-cap {
  text-align: center; margin-top: var(--space-sm);
  font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 0.1em; color: var(--color-text-muted);
}

/* --- スクロール / 動画 --- */
.media-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: start; }
.scroll-cap {
  border: 1px solid var(--color-border-light);
  background: var(--color-bg-alt);
  height: 420px; overflow: hidden; position: relative;
}
.scroll-inner { position: absolute; inset: 0; }
.scroll-inner img { width: 100%; height: auto; display: block; }
/* 縦長画像を自動スクロール（必要なければ animation 行を削除） */
.scroll-inner { animation: ayuraScroll 16s linear infinite; }
@keyframes ayuraScroll {
  0%   { transform: translateY(0); }
  45%  { transform: translateY(calc(-100% + 420px)); }
  55%  { transform: translateY(calc(-100% + 420px)); }
  100% { transform: translateY(0); }
}
.video-box {
  border: 1px solid var(--color-border-light);
  background: var(--color-dark);
  aspect-ratio: 16 / 10; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.video-box video, .video-box iframe { width: 100%; height: 100%; border: 0; }
.media-meta { margin-top: var(--space-md); font-size: 0.82rem; color: var(--color-text-light); line-height: 2; }

/* --- レスポンシブ --- */
@media (max-width: 768px) {
  .work-gallery .section-inner { padding: 0 var(--space-lg); }
  .media-row { grid-template-columns: 1fr; gap: var(--space-xl); }
  .phone { width: 150px; }
  .scroll-cap { height: 360px; }
  @keyframes ayuraScroll {
    0% { transform: translateY(0); }
    45% { transform: translateY(calc(-100% + 360px)); }
    55% { transform: translateY(calc(-100% + 360px)); }
    100% { transform: translateY(0); }
  }
}

/* 動きを減らす設定の端末では自動スクロール停止 */
@media (prefers-reduced-motion: reduce) {
  .scroll-inner { animation: none; }
}