/* ========================================================
   /assets/css/movie-detail.css
   ======================================================== */

/* -----------------------------------------
 WordPressデフォルトのh2スタイルをリセット
 ----------------------------------------- */
.movie-summary-card h2 {
  margin: 0 ;
  padding: 0 ;
  background: none ;
  font-size: inherit ;
  color: inherit ;
}

.movie-summary-card p {
  margin: 0 !important; /* 強制的に上下左右の余白をゼロに */
}


/* --- 全体のカード型レイアウト --- */
.movie-detail {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 40px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 32px rgba(0,0,0,0.08);
}

/* ====== 2カラム横並びレイアウト（ラッパー） ====== */
.movie-main-flex {
  display: flex;
  gap: 5px;
  align-items: flex-start;
  justify-content: flex-start;
  margin-top: 0;
}


/* --- アイキャッチ画像 --- */
.movie-thumbnail {
  width: 100%;
  max-width: 320px;
  min-width: 220px;
  background: none;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(60,80,120,0.09);
  overflow: hidden;
  text-align: center;
  margin-bottom: 0;
  margin-right: 16px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.movie-thumbnail img {
  width: 100%;
  height: auto;      /* ←ここ */
  display: block;
  border-radius: 12px;
  background: #f7f7f7;
  box-shadow: none;
}


/* ===== 「レビューを書く」ボタン ===== */

.open-modal-btn {
  margin-left: 12px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: clamp(14px, 2vw, 18px);
  background: #fff;
  color: #333;
  border: 2px solid #333;
  font-weight: bold;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.open-modal-btn:hover {
  background: #333;
  color: #fff;
}

/* ==== 編集ボタン（ラベル横ミニボタン） ==== */
.edit-info-btn {
  padding: 2px 12px;
  margin-left: 5px;
  border: none;
  border-radius: 999px;
  background: #f5f6fa;
  color: #4477cc;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(50,80,180,0.07);
  transition: background 0.16s, color 0.16s, box-shadow 0.2s;
  opacity: 0.87;
  display: flex;
  align-items: center;
  gap: 3px;
}
.edit-info-btn .edit-icon {
  font-size: 13px;
  margin-right: 2px;
  vertical-align: middle;
}
.edit-info-btn:hover {
  background: #e4eafe;
  color: #1b3369;
  opacity: 1;
  box-shadow: 0 2px 10px rgba(50,80,180,0.14);
}

/* ======= 公開情報・各項目のボックス ======= */
.movie-info-row {
  display: flex;
  flex-wrap: wrap;
}

/* 項目間を完全に等間隔に調整したい場合はflexのgapを使うのもおすすめです */
.movie-meta-right {
  display: flex;
  flex-direction: column;
}

.info-block {
  background: #f7f7f7;
  border-radius: 12px;
  padding: 7px 18px;
  min-width: 90px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* ==== ラベルは背景消して普通のテキストだけに ==== */
.info-label-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 2px;
  margin-bottom: 0px;
}
.info-label {
  font-size: 13px;
  color: #555;
  font-weight: 600;
  background: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 0;
  margin-right: 0;
  display: inline-block;
  letter-spacing: 0.02em;
}

/* ==== 値部分（未設定やタグ）は白のボタン風角丸のまま ==== */
.info-value,
.info-tag {
  display: inline-block;
  background: #fff;
  color: #222;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  margin-top: 4px;
  margin-bottom: 4px;
  margin-right: 4px;
  padding: 3px 14px 3px 14px;
  box-shadow: 0 1px 2px rgba(60,80,120,0.07);
  letter-spacing: 0.01em;
}

.info-tag-empty,
.info-value-empty {
  background: #fff;
  color: #aaa;
  font-weight: normal;
}

/* ==== あらすじカード ==== */
.movie-summary-card {
  background: #fffdfa;
  border-radius: 16px;
  padding: 18px 22px 14px 22px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  border: 1.5px solid #f3eada;
}
.movie-summary-card h2 {
  font-size: 19px;
  font-weight: bold;
}

/* =============================
   アイキャッチ下（ジャンル・タグ系も info-block ボックス化）
   ============================= */


.info-row-genre {
  display: flex;
  flex-wrap: wrap;
}

/* 監督と脚本家は横並び・出演者は全幅で次の行に（カスタマイズ例） */
.info-row-people-top {
  display: flex;
  flex-wrap: wrap;
}
.info-row-people-bottom {
  display: flex;
  width: 100%;
}
.info-row-people-bottom .info-block {
  min-width: 180px; /* 最小幅だけを維持しつつ、自然な幅に調整されるようwidthを削除 */
}

/* ==============================
   星評価の平均（single-movie用 detail-）
   ============================== */
.detail-single-star.detail-single-svg {
  display: inline-block;
  vertical-align: middle;
  margin-right: -0.10em;
}
.detail-single-star.detail-single-svg:last-child {
  margin-right: 0;
}
.detail-single-star.detail-single-svg svg {
  width: 100%;
  height: 100%;
  display: block;
  vertical-align: middle;
}

/* 数値部分 */
.star-score {
  font-size: 2em;
  font-weight: 900;
  margin-left: 14px;
  background: linear-gradient(90deg, #FFD700 60%, #FF7B00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  letter-spacing: 2px;
  text-shadow: 0 2px 12px #fff7d0, 0 1px 1px #c2a000a6;
  line-height: 1.1;
  -webkit-text-stroke: 0.4px #111;
  text-stroke: 2.5px #111;
}

.single-review-item {
  max-width: 900px; /* 最大幅を好みで調整 */
  width: 100%; /* 幅を制限 */
  margin-left: 0; /* 左寄せ */
}

/* ===============================
   項目の余白一括調整コード
   公開年〜出演者までの項目の余白を統一的に設定
   =============================== */
.movie-info-row,
.info-row-genre,
.info-row-people-top,
.info-row-people-bottom {
  gap: 12px;
  margin: 12px 0;
}

.movie-thumbnail {
  margin-bottom: 16px;
}

.movie-summary-card {
  margin: 16px 0;
}

.info-block {
  padding: 8px 16px;
}

.movie-review-summary {
  display: flex;
  align-items: center;
  flex-wrap: nowrap !important;
  gap: 12px;
  overflow: hidden; /* 万が一はみ出た場合に備え */
}

.average-rating {
  font-size: clamp(22px, 4vw, 34px); /* 元サイズ34pxで、徐々に縮小 */
  gap: 6px;
  flex-shrink: 0;
}

.detail-single-star.detail-single-svg {
  width: clamp(1.4em, 3vw, 2.1em); /* 星のサイズ、元の最大サイズ2.1em */
  height: clamp(1.4em, 3vw, 2.1em);
}

.star-score {
  font-size: clamp(30px, 4vw, 50px);
  margin-left: 6px;
  flex-shrink: 0;
}

/* ======= レスポンシブ ======= */
@media (max-width: 1000px) {
  .single-review-item {
    max-width: 100%; /* 最大幅を親要素以内に抑える */
    width: auto;     /* 固定幅を解除して柔軟な幅に */
    box-sizing: border-box; /* padding, border込みで計算 */
    overflow-wrap: break-word; /* 長い単語で横に伸びるのを防ぐ */
  }

  .single-review-comment,
  .spoiler-content {
    width: 100%; /* レビューコメント欄の幅をウィンドウ内に収める */
    box-sizing: border-box;
    overflow-wrap: break-word;
  }
}

@media (max-width: 900px) {
  .movie-main-flex {
    flex-direction: column;
    align-items: flex-start; /* 全体は左寄せに戻す */
  }
  .movie-thumbnail {
    max-width: 290px;
    margin: 0 auto 16px; /* 画像だけを中央寄せ */
  }
  .movie-meta-right {
    max-width: 100%;
  }
}
@media (max-width: 600px) {
  .info-block {
    padding: 6px 7px;
    min-width: 70px;
  }
  
}

/* ======= レスポンシブ対応（600px以下で1カラム＆星/数値/ボタン縮小） ======= */
@media (max-width: 600px) {
  .movie-info-row,
  .info-row-genre,
  .info-row-people-top,
  .info-row-people-bottom {
    gap: 8px;
    margin: 8px 0;
  }

  .info-block {
    padding: 6px 12px;
    min-width: 70px;
  }

  .movie-review-summary {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%; /* 幅いっぱいで中央揃えを確実に */
  }

  .average-rating {
    font-size: 22px;
    gap: 6px;
    margin-bottom: 3px;
  }

  .detail-single-star.detail-single-svg {
    width: 1.3em;
    height: 1.3em;
    margin-right: -0.08em;
  }

  .star-score {
    font-size: clamp(30px, 4vw, 50px);
    margin-left: 6px;
    letter-spacing: 1px;
    color: #fff;
    background: linear-gradient(135deg, #ff9800, #ff5722);
    padding: 3px 8px;
    border-radius: 8px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    box-shadow: 0 2px 6px rgba(255,87,34,0.4);
    flex-shrink: 0;
  }

  .open-modal-btn {
    font-size: 14px;
    padding: 7px 12px;
    margin-left: 0;
    margin-top: 3px;
  }
}