/* ARC 画像ギャラリー — モバイルは横スワイプ、デスクトップはベントグリッド */

.arc-showcase {
  --arc-showcase-gold: var(--arc-brand-accent);
  --arc-showcase-radius: 0.625rem;
  --arc-showcase-gap: clamp(0.375rem, 1vw, 0.625rem);
  --arc-showcase-mobile-h: min(42vh, 16.25rem);
  max-width: 71.25rem;
  margin: 0 auto clamp(1.25rem, 3vw, 2rem);
  padding: 0 clamp(0.5rem, 2vw, 1rem);
}

.arc-showcase__label {
  text-align: center;
  color: #7f7f7f;
  font-size: 0.95em;
  margin: 0 0 0.75rem;
  letter-spacing: 0.04em;
}

.arc-showcase__label em {
  font-style: italic;
}

.arc-showcase__hint {
  display: none;
  text-align: center;
  font-size: 0.82rem;
  color: #888;
  margin: 0 0 0.5rem;
  letter-spacing: 0.02em;
}

.arc-showcase__hint::before {
  content: '← ';
  opacity: 0.5;
}

.arc-showcase__hint::after {
  content: ' →';
  opacity: 0.5;
}

/* —— モバイル: 横スクロールカルーセル —— */
.arc-showcase__carousel {
  display: none;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  gap: 0.85rem;
  padding: 0.5rem clamp(0.5rem, 3vw, 1rem) 0.625rem;
  margin: 0 calc(-1 * clamp(0.5rem, 2vw, 1rem));
  scrollbar-width: none;
}

.arc-showcase__carousel::-webkit-scrollbar {
  display: none;
}

.arc-showcase__carousel .arc-showcase__item {
  flex: 0 0 min(86vw, 20rem);
  scroll-snap-align: center;
  aspect-ratio: 4 / 3;
  min-height: 0;
}

/* —— デスクトップ / 展開時: ベントグリッド —— */
.arc-showcase__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(7.5rem, 14vw);
  gap: clamp(0.625rem, 1.4vw, 1rem);
  padding: 0.375rem;
}

.arc-showcase--duo .arc-showcase__grid {
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(8.75rem, 22vw);
  max-width: 45rem;
  margin: 0 auto;
}

.arc-showcase--trio .arc-showcase__grid {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(7.5rem, 16vw);
  max-width: 56.25rem;
  margin: 0 auto;
}

.arc-showcase__item {
  position: relative;
  margin: 0;
  border-radius: var(--arc-showcase-radius);
  overflow: hidden;
  cursor: pointer;
  background: var(--arc-showcase-placeholder, #1a1a1a);
  opacity: 1;
  transform: none;
  /* 写真ごとの style 属性で上書き（未設定時はアクセント黄の控えめグロー） */
  --arc-showcase-glow-color: var(--arc-brand-accent, #ffe900);
  --arc-showcase-glow-soft: rgba(255, 233, 0, 0.3);
  --arc-showcase-glow-mid: rgba(255, 233, 0, 0.45);
  --arc-showcase-glow-strong: rgba(255, 233, 0, 0.63);
  --arc-showcase-glow-border: rgba(255, 233, 0, 0.18);
  --arc-showcase-glow-border-strong: rgba(255, 233, 0, 0.26);
  box-shadow:
    0 0 0 1px var(--arc-showcase-glow-border),
    0 0 0.625rem 1.5px var(--arc-showcase-glow-soft),
    0 0 1.25rem 4px var(--arc-showcase-glow-soft);
  transition: box-shadow 0.4s ease;
}

.arc-showcase__item.is-visible {
  opacity: 1;
  transform: none;
}

.arc-showcase__item:focus-visible {
  outline: 0.125rem solid var(--arc-showcase-gold);
  outline-offset: 0.125rem;
}

.arc-showcase__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition:
    opacity 0.24s ease,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.arc-showcase__item.is-image-ready img {
  opacity: 1;
}

.arc-showcase__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 45%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.arc-showcase__item-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 0.5rem 0.65rem;
  font-size: 0.7rem;
  line-height: 1.35;
  color: #fff;
  opacity: 0;
  transform: translateY(0.375rem);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
  pointer-events: none;
}

@media (hover: hover) {
  .arc-showcase__item:hover {
    box-shadow:
      0 0 0 1px var(--arc-showcase-glow-border-strong),
      0 0 0.825rem 3px var(--arc-showcase-glow-mid),
      0 0 1.625rem 6.5px var(--arc-showcase-glow-soft),
      0 0 2.75rem 11px var(--arc-showcase-glow-soft);
  }

  .arc-showcase__item:hover img {
    transform: scale(1.06);
  }

  .arc-showcase__item:hover::after {
    opacity: 1;
  }

  .arc-showcase__item:hover .arc-showcase__item-caption {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ベント配置（12枚） */
.arc-showcase--main .arc-showcase__item:nth-child(1) {
  grid-column: span 2;
  grid-row: span 2;
}

.arc-showcase--main .arc-showcase__item:nth-child(6) {
  grid-column: span 2;
}

/* モバイル折りたたみグリッド */
.arc-showcase__more-wrap {
  display: none;
  text-align: center;
  margin-top: 0.65rem;
}

.arc-showcase__more {
  appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: var(--arc-brand-surface-card);
  color: var(--arc-brand-ink);
  font: inherit;
  font-size: 0.88rem;
  padding: 0.55rem 1.25rem;
  border-radius: 62.4375rem;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}

.arc-showcase__more:hover {
  border-color: var(--arc-showcase-gold);
  background: var(--arc-brand-editor-chrome-bg);
}

.arc-showcase.is-expanded .arc-showcase__more {
  display: none;
}

.arc-showcase__progress {
  display: none;
  height: 0.125rem;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 1px;
  margin: 0.5rem auto 0;
  max-width: 7.5rem;
  overflow: hidden;
}

.arc-showcase__progress-bar {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--arc-showcase-gold);
  border-radius: 1px;
  transition: width 0.15s ease-out;
}

/* ライトボックス */
.arc-showcase-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(10, 10, 10, 0.92);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s ease,
    visibility 0.35s;
}

.arc-showcase-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.arc-showcase-lightbox__img {
  width: auto;
  height: auto;
  max-width: min(96vw, 93.75rem);
  max-height: min(88vh, 62.5rem);
  object-fit: contain;
  border-radius: 0.375rem;
  opacity: 0;
  /* GPU 合成でモバイルでも滑らかに（box-shadow はトランジションしない） */
  transform: translateZ(0) scale(0.94);
  will-change: transform, opacity;
  backface-visibility: hidden;
  transition:
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.28s ease;
  box-shadow:
    0 0 0 1px var(--arc-showcase-glow-border, rgba(255, 233, 0, 0.18)),
    0 0 1.125rem 5px var(--arc-showcase-glow-soft, rgba(255, 233, 0, 0.3)),
    0 0 2.5rem 14px var(--arc-showcase-glow-soft, rgba(255, 233, 0, 0.24));
}

.arc-showcase-lightbox.is-open .arc-showcase-lightbox__img {
  opacity: 1;
  transform: translateZ(0) scale(1);
}

/* マーキー由来の拡大表示は光を出さない */
.arc-showcase-lightbox.is-no-glow .arc-showcase-lightbox__img {
  box-shadow: none;
}

.arc-showcase-lightbox__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.25rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  padding: 0 1rem;
}

.arc-showcase-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
}

.arc-showcase-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.arc-showcase-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
  transition: background 0.2s;
}

.arc-showcase-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

.arc-showcase-lightbox__prev {
  left: 0.75rem;
}

.arc-showcase-lightbox__next {
  right: 0.75rem;
}

/* スワイプ案内（モバイル・数秒でフェードアウト・背景なし） */
.arc-showcase__swipe-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  z-index: 3;
  transform: translate(-50%, -50%);
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #888;
  font-family: inherit;
  font-size: calc(0.82rem * 1.5);
  font-weight: inherit;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  animation: arc-showcase-swipe-badge 3.5s ease forwards;
}

.arc-showcase__swipe-badge::before {
  content: '← ';
  opacity: 0.5;
}

.arc-showcase__swipe-badge::after {
  content: ' →';
  opacity: 0.5;
}

@keyframes arc-showcase-swipe-badge {
  0%,
  65% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* —— 流れる（マーキー）レイアウト —— */
.arc-showcase--marquee {
  --arc-marquee-h: clamp(9rem, 22vw, 15rem);
  --arc-marquee-gap: clamp(0.5rem, 1.4vw, 1rem);
  max-width: none;
  margin: clamp(1rem, 3vw, 2rem) 0;
  padding: 0;
}

.arc-showcase--marquee.arc-showcase--orient-portrait {
  --arc-marquee-h: clamp(13rem, 34vw, 22rem);
}

.arc-showcase__marquee {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  /* ユーザーの横スワイプはネイティブスクロールで追従、縦はページスクロールへ */
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  /* 端を柔らかくフェード（GPU 負荷の軽い mask） */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}

.arc-showcase__marquee::-webkit-scrollbar {
  display: none;
}

.arc-showcase__marquee.is-dragging {
  cursor: grabbing;
}

.arc-showcase__marquee-track {
  display: flex;
  width: max-content;
  gap: var(--arc-marquee-gap);
  padding: 0.375rem 0;
}

.arc-showcase--marquee .arc-showcase__item {
  flex: 0 0 auto;
  height: var(--arc-marquee-h);
  width: auto;
  aspect-ratio: 4 / 3;
  /* マーキーは描画コストを抑えるためグローを使わない */
  box-shadow: none;
}

.arc-showcase--marquee.arc-showcase--orient-portrait .arc-showcase__item {
  aspect-ratio: 3 / 4;
}

/* マーキー画像は常時表示（フェード待ちで消えないように） */
.arc-showcase--marquee .arc-showcase__item img {
  opacity: 1;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  /* マウスドラッグでスクロールできるよう、画像のネイティブドラッグを無効化 */
  -webkit-user-drag: none;
}

@media (hover: hover) {
  .arc-showcase--marquee .arc-showcase__item:hover {
    box-shadow: none;
  }
}

/* マーキー内 YouTube（サムネイル＋再生ボタン → クリックで埋め込み再生） */
.arc-showcase__item--youtube {
  cursor: default;
}

.arc-showcase__item--youtube:not(.is-youtube-playing) {
  cursor: pointer;
}

.arc-showcase__youtube-media {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.arc-showcase__item--youtube img {
  opacity: 1;
}

.arc-showcase__youtube-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(0, 0, 0, 0.18);
  cursor: pointer;
  z-index: 2;
  transition: background 0.25s ease;
}

.arc-showcase__youtube-play-icon {
  display: block;
  width: clamp(2.75rem, 8vw, 4rem);
  height: clamp(2.75rem, 8vw, 4rem);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.42);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
  position: relative;
}

.arc-showcase__youtube-play-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.55rem 0 0.55rem 0.95rem;
  border-color: transparent transparent transparent rgba(255, 255, 255, 0.88);
}

@media (hover: hover) {
  .arc-showcase__item--youtube:hover .arc-showcase__youtube-play {
    background: rgba(0, 0, 0, 0.28);
  }

  .arc-showcase__item--youtube:hover .arc-showcase__youtube-play-icon {
    background: rgba(0, 0, 0, 0.52);
  }
}

.arc-showcase__item--youtube.is-youtube-playing .arc-showcase__youtube-play {
  display: none;
}

.arc-showcase__youtube-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.arc-showcase--marquee .arc-showcase__item--youtube::after,
.arc-showcase--marquee .arc-showcase__item--video-file::after {
  display: none;
}

.arc-showcase__item--video-file {
  cursor: pointer;
}

.arc-showcase__item--video-file.is-video-playing {
  cursor: default;
}

.arc-showcase__video-media {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.arc-showcase__item--video-file .arc-showcase__video-media video {
  display: none;
}

.arc-showcase__video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.arc-showcase__item--video-file.is-video-playing .arc-showcase__video-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

@media (max-width: 767.98px) {
  .arc-showcase--marquee {
    --arc-marquee-h: clamp(7rem, 40vw, 11rem);
  }

  .arc-showcase--marquee.arc-showcase--orient-portrait {
    --arc-marquee-h: clamp(10rem, 55vw, 15rem);
  }
}

@media (max-width: 767.98px) {
  /* モバイルはグローを抑えて、写真同士の干渉を減らす */
  .arc-showcase__item {
    --arc-showcase-glow-soft: rgba(255, 233, 0, 0.16);
    --arc-showcase-glow-mid: rgba(255, 233, 0, 0.26);
    --arc-showcase-glow-strong: rgba(255, 233, 0, 0.38);
    --arc-showcase-glow-border: rgba(255, 233, 0, 0.12);
    --arc-showcase-glow-border-strong: rgba(255, 233, 0, 0.18);
    box-shadow:
      0 0 0 1px var(--arc-showcase-glow-border),
      0 0 0.35rem 0.75px var(--arc-showcase-glow-soft),
      0 0 0.8rem 2px var(--arc-showcase-glow-soft);
  }

  /* 携帯：フェードイン・段階表示なし（ページ表示と同時に見える） */
  .arc-showcase__item,
  .arc-showcase__carousel .arc-showcase__item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .arc-showcase__item img {
    transition: none;
  }

  .arc-showcase__hint {
    display: none !important;
  }

  /* 一覧のみ：常にグリッド */
  .arc-showcase--mode-grid .arc-showcase__carousel {
    display: none !important;
  }

  .arc-showcase--mode-grid .arc-showcase__grid {
    display: grid !important;
    margin-top: 0;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(6.25rem, 28vw);
  }

  .arc-showcase--mode-grid.arc-showcase--duo .arc-showcase__grid {
    grid-template-columns: 1fr;
  }

  .arc-showcase--mode-grid .arc-showcase__progress {
    display: none !important;
  }

  /* モバイルはスワイプ：カルーセルのみ */
  .arc-showcase--mode-swipe .arc-showcase__carousel {
    display: flex;
    height: var(--arc-showcase-mobile-h);
  }

  .arc-showcase--mode-swipe .arc-showcase__carousel .arc-showcase__item {
    opacity: 1;
    transform: none;
  }

  .arc-showcase--mode-swipe .arc-showcase__grid {
    display: none !important;
  }

  .arc-showcase--mode-swipe .arc-showcase__progress {
    display: block;
  }

  .arc-showcase--mode-swipe.arc-showcase--duo .arc-showcase__carousel {
    height: min(36vh, 12.5rem);
  }

  .arc-showcase--mode-swipe.arc-showcase--duo .arc-showcase__carousel .arc-showcase__item {
    flex: 0 0 min(78vw, 17.5rem);
  }

  /* JS 未実行フォールバック（スワイプモード） */
  .arc-showcase--mode-swipe .arc-showcase__carousel:empty + .arc-showcase__grid {
    display: grid !important;
    margin-top: 0;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(6.25rem, 28vw);
  }

  .arc-showcase--mode-grid .arc-showcase--main .arc-showcase__grid .arc-showcase__item:nth-child(1),
  .arc-showcase--mode-grid .arc-showcase--main .arc-showcase__grid .arc-showcase__item:nth-child(6),
  .arc-showcase--mode-grid.arc-showcase--main .arc-showcase__grid .arc-showcase__item:nth-child(1),
  .arc-showcase--mode-grid.arc-showcase--main .arc-showcase__grid .arc-showcase__item:nth-child(6) {
    grid-column: span 1;
    grid-row: span 1;
  }

  /* 携帯：写真上のキャプションは非表示（タップ時のライトボックス内のみ表示） */
  .arc-showcase__item-caption {
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.375rem);
  }

  .arc-showcase__item::after {
    opacity: 0;
  }
}

@media (min-width: 768px) {
  .arc-showcase__carousel {
    display: none !important;
  }

  .arc-showcase__grid {
    display: grid !important;
  }

  .arc-showcase__more-wrap,
  .arc-showcase__progress {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arc-showcase__item,
  .arc-showcase__item img,
  .arc-showcase-lightbox,
  .arc-showcase-lightbox__img {
    transition: none;
  }

  .arc-showcase__carousel {
    scroll-behavior: auto;
  }

  /* 自動スクロールは JS 側で停止。横スワイプでの閲覧は引き続き可能 */
}