/* =========================================================
   Movie styles (archive + single)
   - シンプル・モノクロ (#333 / #fff) ・可読性優先
   ========================================================= */
:root { --fg:#333; --bg:#fff; --muted:#666; --line:#e6e6e6; --hover:#f7f7f7; }
body  { color:var(--fg); background:var(--bg); }
a:focus-visible { outline:2px solid #000; outline-offset:2px; }

/* 共通 wrap 幅 */
.movie-archive.wrap,
.movie-single.wrap,
.movie-archive .wrap,
.movie-single .wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}
@media (max-width:900px){
  .movie-archive.wrap,
  .movie-single.wrap,
  .movie-archive .wrap,
  .movie-single .wrap { padding: 12px; }
}

/* =========================
   Archive: フィルタフォーム
   ========================= */
.movie-archive .movie-filter { margin: 1rem 0; }
.movie-archive .movie-filter .filter-grid{
  display:grid; gap:.75rem;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.movie-archive .movie-filter label{
  display:flex; flex-direction:column; gap:.35rem; font-size:.95rem;
}
.movie-archive .movie-filter select,
.movie-archive .movie-filter input[type="number"]{
  border:1px solid var(--line); border-radius:8px;
  padding:.45rem .6rem; background:#fff; color:var(--fg);
  width:100%;
}
.movie-archive .movie-filter .range{ display:flex; align-items:center; gap:.4rem; }
.movie-archive .movie-filter .range .sep{ color:var(--muted); }

.movie-archive .filter-actions{
  margin-top:.75rem; display:flex; gap:.5rem; flex-wrap:wrap;
}
.movie-archive .filter-actions button,
.movie-archive .filter-actions .button{
  border:1px solid var(--line); background:#fff; color:#333;
  border-radius:8px; padding:.45rem .75rem; cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center;
}
.movie-archive .filter-actions button:hover,
.movie-archive .filter-actions .button:hover{ background:var(--hover); }
.movie-archive .filter-actions .button.reset{ color:#333; }

/* =========================
   Archive: グリッド & カード
   ========================= */
.movie-archive h1{
  font-size:clamp(1.3rem,2.6vw,1.8rem);
  line-height:1.25; margin:.25rem 0 1rem;
}

.movie-archive .movie-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}

.movie-archive .card{
  border:1px solid var(--line); border-radius:10px; background:#fff;
  overflow:hidden;
  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease;
}
.movie-archive .card:hover{
  transform: translateY(-1px);
  border-color:#ddd; box-shadow:0 6px 14px rgba(0,0,0,.06);
}

/* サムネ：比率を確保してCLS回避（2:3想定） */
.movie-archive .card .thumb{
  display:block; background:#f6f6f6; overflow:hidden;
  aspect-ratio: 2 / 3;
}
.movie-archive .card .thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}

.movie-archive .card .card-body{ padding:.6rem .75rem .8rem; }
.movie-archive .card .title{
  font-size:1rem; line-height:1.35; margin:.25rem 0 .25rem;
}
.movie-archive .card .title a{ color:inherit; text-decoration:none; }
.movie-archive .card .title a:hover{ text-decoration:underline; }

.movie-archive .card .meta{
  color:var(--muted); font-size:.92rem; margin:.1rem 0 .35rem;
}
.movie-archive .card .excerpt{
  color:var(--fg); line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}

/* ページネーション（the_posts_pagination） */
.movie-archive .navigation.pagination .nav-links{
  display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-top:1rem;
}
.movie-archive .navigation.pagination .page-numbers{
  border:1px solid var(--line); background:#fff; color:var(--fg);
  border-radius:8px; padding:.35rem .6rem; text-decoration:none;
}
.movie-archive .navigation.pagination .page-numbers.current{
  background:#000; color:#fff; border-color:#000;
}
.movie-archive .navigation.pagination .page-numbers:hover:not(.current){ background:var(--hover); }

/* =========================
   Single: 最小スタイル（将来拡張用）
   ※ single-movie.php にクラス .movie-single を付けておくと適用
   ========================= */
.movie-single h1{
  font-size:clamp(1.4rem,3vw,2rem);
  line-height:1.25; margin:.25rem 0 .5rem;
}
.movie-single .movie-meta{
  display:grid; gap:.25rem; color:var(--muted); font-size:.95rem; margin-bottom:.5rem;
}
.movie-single .hero,
.movie-single .post-thumbnail,
.movie-single .wp-post-image{
  width:100%; height:auto; border-radius:10px; display:block; margin:.25rem 0 .75rem;
}
.movie-single .entry-content{
  margin-top:.75rem; line-height:1.8; font-size:1rem;
}
.movie-single .entry-content h2{ font-size:1.25rem; margin:1.2rem 0 .5rem; }
.movie-single .entry-content h3{ font-size:1.1rem; margin:1rem 0 .4rem; }
.movie-single .entry-content p { margin:.8rem 0; }
.movie-single .entry-content img,
.movie-single .entry-content figure img{ max-width:100%; height:auto; }
.movie-single .entry-content table{
  width:100%; border-collapse:collapse; margin:1rem 0; font-size:.95rem;
}
.movie-single .entry-content th,
.movie-single .entry-content td{
  border:1px solid var(--line); padding:.5rem .6rem; text-align:left;
}
.movie-single .entry-content blockquote{
  border-left:4px solid var(--line);
  padding:.25rem .75rem; margin:.8rem 0; color:#111; background:#fafafa;
}

/* 作品メタのラベル行（「ジャンル：〜 / 〜」等）を少し弱めに */
.movie-single .movie-meta p{ margin:.15rem 0; }
.movie-single .movie-meta strong{ color:#111; }

/* アクセシビリティ */
.movie-archive a:focus-visible,
.movie-single  a:focus-visible{ outline:2px solid #000; outline-offset:2px; }




/* =========================================================
   Movie styles (archive + single)
   - モノクロ (#333/#fff) ・可読性 & CLS対策
   ========================================================= */
:root { --fg:#333; --bg:#fff; --muted:#666; --line:#e6e6e6; --hover:#f7f7f7; }
body  { color:var(--fg); background:var(--bg); }
a:focus-visible { outline:2px solid #000; outline-offset:2px; }

/* 共通 wrap（本文幅） */
.movie-archive.wrap,
.movie-single.wrap,
.movie-archive .wrap,
.movie-single .wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}
@media (max-width:900px){
  .movie-archive.wrap,
  .movie-single.wrap,
  .movie-archive .wrap,
  .movie-single .wrap { padding: 12px; }
}

/* ---------------------------------------------------------
   共通：カードグリッド（アーカイブ/関連作品で共用）
   --------------------------------------------------------- */
.movie-grid{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.card{
  border:1px solid var(--line); border-radius:10px; background:#fff;
  overflow:hidden;
  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
  transform: translateY(-1px);
  border-color:#ddd; box-shadow:0 6px 14px rgba(0,0,0,.06);
}
/* サムネはCLS対策で比率先取り（2:3想定ポスター） */
.card .thumb{ display:block; background:#f6f6f6; overflow:hidden; aspect-ratio: 2 / 3; }
.card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.card .card-body{ padding:.6rem .75rem .8rem; }
.card .title{ font-size:1rem; line-height:1.35; margin:.25rem 0 .25rem; }
.card .title a{ color:inherit; text-decoration:none; }
.card .title a:hover{ text-decoration:underline; }
.card .meta{ color:var(--muted); font-size:.92rem; margin:.1rem 0 .35rem; }
.card .excerpt{
  color:var(--fg); line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}

/* =========================================================
   Archive
   ========================================================= */
.movie-archive h1{
  font-size:clamp(1.3rem,2.6vw,1.8rem);
  line-height:1.25; margin:.25rem 0 1rem;
}

/* フィルタフォーム */
.movie-archive .movie-filter { margin: 1rem 0; }
.movie-archive .movie-filter .filter-grid{
  display:grid; gap:.75rem;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.movie-archive .movie-filter label{
  display:flex; flex-direction:column; gap:.35rem; font-size:.95rem;
}
.movie-archive .movie-filter select,
.movie-archive .movie-filter input[type="number"]{
  border:1px solid var(--line); border-radius:8px;
  padding:.45rem .6rem; background:#fff; color:var(--fg); width:100%;
}
.movie-archive .movie-filter .range{ display:flex; align-items:center; gap:.4rem; }
.movie-archive .movie-filter .range .sep{ color:var(--muted); }

.movie-archive .filter-actions{
  margin-top:.75rem; display:flex; gap:.5rem; flex-wrap:wrap;
}
.movie-archive .filter-actions button,
.movie-archive .filter-actions .button{
  border:1px solid var(--line); background:#fff; color:#333;
  border-radius:8px; padding:.45rem .75rem; cursor:pointer;
  text-decoration:none; display:inline-flex; align-items:center;
}
.movie-archive .filter-actions button:hover,
.movie-archive .filter-actions .button:hover{ background:var(--hover); }

/* ページネーション（the_posts_pagination） */
.movie-archive .navigation.pagination .nav-links{
  display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-top:1rem;
}
.movie-archive .navigation.pagination .page-numbers{
  border:1px solid var(--line); background:#fff; color:var(--fg);
  border-radius:8px; padding:.35rem .6rem; text-decoration:none;
}
.movie-archive .navigation.pagination .page-numbers.current{
  background:#000; color:#fff; border-color:#000;
}
.movie-archive .navigation.pagination .page-numbers:hover:not(.current){ background:var(--hover); }

/* =========================================================
   Single
   ========================================================= */
.movie-single h1{
  font-size:clamp(1.4rem,3vw,2rem);
  line-height:1.25; margin:.25rem 0 .5rem;
}

/* パンくず */
.movie-single .breadcrumbs{ font-size:.9rem; color:var(--muted); margin-bottom:.25rem; }
.movie-single .breadcrumbs a{ color:inherit; text-decoration:none; }
.movie-single .breadcrumbs a:hover{ text-decoration:underline; }
.movie-single .breadcrumbs .sep{ margin:0 .35rem; }

/* ヒーロー */
.movie-single .hero{
  width:100%; height:auto; border-radius:10px; display:block; margin:.25rem 0 .75rem;
}

/* 作品メタ */
.movie-single .movie-meta{
  display:grid; gap:.25rem; color:var(--muted); font-size:.95rem; margin-bottom:.5rem;
}
.movie-single .movie-meta p{ margin:.15rem 0; }
.movie-single .movie-meta strong{ color:#111; }

/* トレーラー（oEmbed iframeを16:9で） */
.movie-single .trailer{ margin:.5rem 0 1rem; }
.movie-single .trailer iframe{
  width:100%; aspect-ratio:16/9; height:auto; border:0; border-radius:10px; display:block;
}

/* 本文 */
.movie-single .entry-content{ margin-top:.75rem; line-height:1.8; font-size:1rem; }
.movie-single .entry-content h2{ font-size:1.25rem; margin:1.2rem 0 .5rem; }
.movie-single .entry-content h3{ font-size:1.1rem; margin:1rem 0 .4rem; }
.movie-single .entry-content p { margin:.8rem 0; }
.movie-single .entry-content img,
.movie-single .entry-content figure img{ max-width:100%; height:auto; }
.movie-single .entry-content table{
  width:100%; border-collapse:collapse; margin:1rem 0; font-size:.95rem;
}
.movie-single .entry-content th,
.movie-single .entry-content td{
  border:1px solid var(--line); padding:.5rem .6rem; text-align:left;
}
.movie-single .entry-content blockquote{
  border-left:4px solid var(--line);
  padding:.25rem .75rem; margin:.8rem 0; color:#111; background:#fafafa;
}

/* <!--nextpage--> */
.movie-single .page-links{
  display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-top:1rem;
}
.movie-single .page-links .page-link{
  border:1px solid var(--line); border-radius:8px; padding:.35rem .6rem; background:#fff;
}

/* 前後ナビ（シリーズ優先リンク） */
.movie-single .post-nav{
  display:flex; justify-content:space-between; gap:1rem; margin-top:1rem; padding-top:1rem;
  border-top:1px solid var(--line);
}
.movie-single .post-nav a{ text-decoration:none; color:var(--fg); }
.movie-single .post-nav a:hover{ text-decoration:underline; }

/* 関連作品（共通グリッド/カードを再利用） */
.movie-single .related-movies{ margin-top:1.5rem; }
.movie-single .related-movies h2{ font-size:1.2rem; margin:0 0 .6rem; }

/* 関連ニュース（縦リスト） */
.movie-single .related-news{ margin-top:1.5rem; }
.movie-single .related-news h2{ font-size:1.2rem; margin:0 0 .6rem; }
.movie-single .related-news .news-list{
  list-style:none; margin:0; padding:0; display:grid; gap:.6rem;
}
.movie-single .related-news .news-list li{
  display:flex; align-items:center; gap:.6rem;
  border:1px solid var(--line); border-radius:10px; background:#fff; padding:.4rem .6rem;
}
.movie-single .related-news .news-list a{
  display:flex; align-items:center; gap:.6rem; color:inherit; text-decoration:none; flex:1;
}
.movie-single .related-news .news-list img{
  width:72px; height:72px; object-fit:cover; border-radius:6px; background:#f6f6f6;
}
.movie-single .related-news .news-list .title{
  font-size:1rem; line-height:1.35;
}
.movie-single .related-news time{
  color:var(--muted); font-size:.9rem; white-space:nowrap;
}