/* ============================================
   Monogatari — Responsive
   ============================================ */

/* ── タブレット ── */
@media (max-width: 1024px) {
  :root {
    --text-hero: clamp(2rem, 5vw, 3.5rem);
  }

  .music-featured-card {
    grid-template-columns: 220px 1fr;
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── モバイル ── */
@media (max-width: 768px) {
  .nav-links {
    display: none;
  }

  .mobile-menu-btn {
    display: flex;
  }

  .mobile-nav {
    display: flex;
  }

  .container {
    padding: 0 var(--space-md);
  }

  .section-header {
    padding: var(--space-4xl) 0 var(--space-2xl);
  }

  .section-header h2 {
    font-size: var(--text-3xl);
  }

  .section-header h2::before,
  .section-header h2::after {
    display: none;
  }

  .hero-logo {
    width: 120px;
  }

  .hero-cta {
    flex-direction: column;
    align-items: center;
  }

  .hero-cta .btn {
    width: 100%;
    max-width: 280px;
  }

  .hero-scroll-indicator {
    display: none;
  }

  .music-featured-card {
    grid-template-columns: 1fr;
  }

  .music-featured-cover {
    max-width: 250px;
    margin: 0 auto;
  }

  .characters-grid,
  .music-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-md);
    padding: 0 var(--space-md) var(--space-3xl);
  }

  .videos-grid {
    grid-template-columns: 1fr;
    padding: 0 var(--space-md) var(--space-3xl);
  }

  .links-grid {
    grid-template-columns: 1fr;
    padding: 0 var(--space-md) var(--space-3xl);
  }

  .link-card {
    padding: var(--space-md);
    gap: var(--space-md);
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .tier-selector {
    gap: var(--space-sm);
  }

  .tier-tab {
    font-size: var(--text-xs);
    padding: var(--space-xs) var(--space-md);
  }

  .tier-items-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  .password-gate {
    padding: var(--space-2xl) var(--space-md);
  }

  .password-input-group {
    flex-direction: column;
  }

  .footer-links {
    flex-direction: column;
    gap: var(--space-md);
  }

  .modal {
    width: 95vw;
    max-height: 90vh;
  }

  .story-prose {
    font-size: var(--text-base);
    line-height: 1.95;
    padding: 0 var(--space-sm);
  }
  .story-lead,
  .story-close { font-size: var(--text-lg); }

  /* 縦画面では 2.5:1 の絵が細い帯になってしまう。高さを決めて
     中央やや右(人物が並んでいる範囲)を切り出す。 */
  .story-kv img {
    height: 30vh;
    min-height: 220px;
    max-height: none;
    object-fit: cover;
    object-position: 55% 45%;
  }
  .story-watch { padding: var(--space-xl) var(--space-md); }

  .ornament-divider {
    margin: var(--space-2xl) 0;
  }
}

/* ── 小型モバイル ── */
@media (max-width: 480px) {
  :root {
    --text-hero: 2rem;
  }

  .hero-tagline {
    font-size: var(--text-base);
  }

  .hero-tagline-sub {
    font-size: var(--text-sm);
  }

  .characters-grid,
  .music-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .card-body,
  .music-card-info {
    padding: var(--space-md);
  }

  .section-header h2 {
    font-size: var(--text-2xl);
  }
}

/* ── アクセシビリティ ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero-logo,
  .hero-title,
  .hero-tagline,
  .hero-tagline-sub,
  .hero-cta,
  .hero-scroll-indicator {
    opacity: 1 !important;
    transform: none !important;
  }

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── ハイコントラスト ── */
@media (prefers-contrast: high) {
  :root {
    --color-border: rgba(212, 168, 83, 0.4);
    --color-text-muted: #b0a090;
  }
}


/* ══════════════════════════════════════════
   横スクロール防止
   .section-bg-glow は幅400px固定の装飾。狭い画面では
   left指定と合わさってビューポートを超え、横スクロールを生む。
   ══════════════════════════════════════════ */
@media (max-width: 780px) {
  .section-bg-glow {
    width: 320px;
    height: 320px;
    margin: -60px 0 0 -60px;
  }
}


/* ── 読む: 幅が足りない画面ではバナーをロゴに差し替える ──
   バナーは約6:1。640px を切ると帯の高さが 60px 未満になり、
   中の「カクヨムにて連載中!」が読めなくなるため。
   入れ替えなので、ロゴが2つ見える状態にはならない。 */
@media (max-width: 640px) {
  .read-banner   { display: none; }
  .read-card-art { display: block; }
}


/* ── VIDEOS: スマホでは YouTube の一覧のように積む ──
   サムネを画面幅いっぱいに出し、その下にタイトル。
   あらすじは3行で切って一覧性を優先する。 */
@media (max-width: 700px) {
  .videos-latest { padding: 0 var(--space-md); }
  .videos-latest-title { font-size: var(--text-xl); }

  /* スマホは「左サムネ + 右にタイトルとあらすじ」。
     YouTube の検索結果や関連動画と同じ並べ方。 */
  .video-rows { gap: var(--space-lg); }
  .video-row {
    grid-template-columns: 140px 1fr;
    gap: var(--space-md);
    align-items: start;
  }
  .video-row-thumb { border-radius: var(--radius-sm); }
  .video-row-play svg { width: 30px; height: 30px; }
  .video-row-title { font-size: var(--text-sm); line-height: 1.45; }
  .video-row-story {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}


/* ── MUSIC: スマホでは VIDEOS と同じく縦に積む ── */
@media (max-width: 700px) {
  .music-latest { padding: 0 var(--space-md); }
  .music-latest-title { font-size: var(--text-xl); }

  .music-rows { gap: var(--space-2xl); }
  .music-row {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
  .music-row-thumb { border-radius: var(--radius-sm); }
  .music-row-play svg { width: 52px; height: 52px; }
  .music-row-title { font-size: var(--text-base); }
  .music-row-story {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}


/* ── BOOKS: 縦画面では表紙を上に積む ── */
@media (max-width: 760px) {
  .books-list { padding: 0 var(--space-md) var(--space-3xl); gap: var(--space-3xl); }
  .book-card {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .book-cover { max-width: 240px; margin: 0 auto; }
  .book-title { font-size: var(--text-xl); }
}


/* ── 読む: 書籍導線は狭い画面では1列 ── */
@media (max-width: 700px) {
  .home-books-list { grid-template-columns: 1fr; }
  .home-book { grid-template-columns: 88px 1fr; }
}


/* ── LINKS: 狭い画面 ── */
@media (max-width: 640px) {
  .links-grid { padding: 0 var(--space-md) var(--space-3xl); }
  .link-feature {
    grid-template-columns: auto 1fr;
    row-gap: var(--space-md);
  }
  .link-feature-go { grid-column: 1 / -1; text-align: right; }
  .link-card { padding: var(--space-md); gap: var(--space-md); }
  .link-card-icon { width: 40px; height: 40px; }
}


/* ── 特典: 狭い画面 ── */
@media (max-width: 640px) {
  .vault-item { grid-template-columns: 64px 1fr; row-gap: var(--space-sm); }
  .vault-item-cover { width: 64px; }
  .vault-item-go, .vault-item-note, .vault-item-lock { grid-column: 1 / -1; text-align: right; }
  .vault-gallery { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--space-md); }
}


/* ── シリーズカード / MUSICカード: 狭い画面 ── */
@media (max-width: 640px) {
  .series-card { width: 240px; }
  .series-card-body { padding: var(--space-md); }
  .music-card { width: 200px; }
}


@media (max-width: 640px) {
  .listen-newest-card { grid-template-columns: 130px 1fr; gap: var(--space-md); padding: var(--space-md); }
  .listen-newest-title { font-size: var(--text-base); }
}


@media (max-width: 640px) {
  .series-fold-head { padding: var(--space-md) var(--space-lg); }
  .series-fold-title { font-size: var(--text-lg); }
  .series-fold-body { padding: 0 var(--space-md) var(--space-xl); }
}


/* 狭い画面では矢印を外に出す余地が無いので、端に重ねて置く */
@media (max-width: 700px) {
  .carousel-arrow--prev { left: 2px; }
  .carousel-arrow--next { right: 2px; }
}


/* ── 会員ページのプレビュー ── */
@media (max-width: 767px) {
  .member-page { padding: 0 var(--space-md); }
  .member-head { grid-template-columns: 1fr; gap: var(--space-lg); }
  .member-meta { justify-items: start; text-align: left; }
  .member-switch-btn { padding: var(--space-sm) var(--space-md); font-size: var(--text-xs); }
  .mitem { grid-template-columns: 56px 1fr; row-gap: var(--space-sm); }
  .mitem-cover { width: 56px; height: 42px; }
  .mitem-go { grid-column: 1 / -1; text-align: right; }
  .mdetail-head { flex-direction: column; gap: var(--space-lg); }
  .mdetail-cover { width: 120px; }
  .preview-note { flex-direction: column; gap: var(--space-sm); }
}


/* ── 資料室 ── */
@media (max-width: 767px) {
  .lore { padding: 0 var(--space-md); }
  .lore-toc { padding: 0 var(--space-md); }
  .lore-toc a { padding: var(--space-sm) var(--space-md); }
  .lore-block { margin-bottom: var(--space-3xl); }
  .lore-title { font-size: var(--text-xl); }
}

/* ── 初期設定資料 ── */
@media (max-width: 767px) {
  .settei-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-md); }
  .settei-view { padding: var(--space-md); }
  .settei-view-body img { max-height: calc(100vh - 7rem); }
  .settei-view-close { top: var(--space-sm); right: var(--space-sm); }
}

/* ── CHARACTERS の相関図 ── */
@media (max-width: 767px) {
  .char-map { padding: 0 var(--space-md); margin-bottom: var(--space-2xl); }
  /* 画面が狭いと図が潰れる。縦を稼いで、指で動かせる余地を残す */
  .char-map-frame iframe { height: 60vh; min-height: 320px; max-height: 460px; }
}

/* ── VIDEOS の折りたたみに付けたシリーズの絵 ── */
@media (max-width: 767px) {
  .series-fold-head { padding: var(--space-md) var(--space-lg); gap: var(--space-md); }
  .series-fold-thumb { width: 92px; }
}