/* ナビゲーション関連 */

/* ---- 左右キャレット ----------------------------------------------------- */
.nav-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  background: transparent;
  border: 0;
  padding: 8px;
  margin: 0;
  cursor: pointer;
  color: var(--color-body);
  opacity: 0.25;
  transition: opacity 180ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  font-family: inherit;
}
.nav-arrow:hover {
  opacity: 1;
}
.nav-arrow:active {
  opacity: 0.5;
  transition-duration: 60ms;
}
.nav-arrow:focus {
  outline: none;
}
.nav-arrow:focus-visible {
  outline: 2px solid var(--color-body);
  outline-offset: 2px;
  border-radius: 4px;
}
.nav-arrow .material-symbols-outlined {
  /* PCで概ね 50px、ビューポートに追随 */
  font-size: clamp(36px, 3.5vw, 60px);
  font-variation-settings:
    'FILL' 0,
    'wght' 200,
    'GRAD' 0,
    'opsz' 48;
  line-height: 1;
}
#nav-prev {
  left: 8px;
}
#nav-next {
  right: 8px;
}

/* 表示制御（active slide のレイアウト・位置に応じて） */
body[data-active-layout="cover-all"] .nav-arrow,
body[data-nav-at-start="true"] #nav-prev,
body[data-nav-at-end="true"] #nav-next,
body[data-active-layout="cover"] #nav-prev,
body[data-active-layout="end"] #nav-next {
  display: none;
}


#page-indicator {
  position: fixed;
  right: 18px;
  bottom: 14px;
  z-index: 50;
  pointer-events: none;
  font-family: var(--font-body), sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.32);
  user-select: none;
  font-variant-numeric: tabular-nums;
}

#page-indicator[hidden] {
  display: none;
}

/* cover-all 等の暗い背景の上では白く表示 */
#page-indicator.invert {
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}

/* 画面端のクリックゾーンの当たり判定はJS側で。
   カーソルだけは雰囲気としてポインターっぽく表示しておく */
#stage {
  cursor: default;
}

/* ---- レスポンシブ ------------------------------------------------------ */
/* 縦持ち or 極端に小さいビューポートでは案内を表示 */
@media (orientation: portrait) and (max-width: 700px) {
  #stage::before {
    content: "横向きで見ると綺麗ですよ ↻";
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;
    z-index: 60;
    text-align: center;
    font-family: var(--font-body), sans-serif;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
    pointer-events: none;
  }
}