/* movie-gallery-grid-layout.css
/* ────────────────────────────────────────────────────
   タブ切替：コンテンツの表示/非表示を制御
   ・.tab-content は非表示
   ・.tab-content.active で Flex レイアウト表示
   ──────────────────────────────────────────────────── */
.tab-content {
  display: none;
}
.tab-content.active {
  display: flex; /* 必要に応じて block / grid に変更してください */
}

/* =====================================
   ギャラリー＆レビュー　フォーム投稿ボタンのスタイル調整
   ===================================== */
/* 通常状態 */
.open-modal-btn {
  display: inline-block;
  padding: 8px 16px;
  background-color: #fff;
  color: #333;
  border: 2px solid #333;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 6px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

/* ホバー時のスタイル */
.open-modal-btn:hover {
  background-color: #333;
  color: #fff;
  cursor: pointer;
}


/* =====================================
   　フィルター機能のスタイル調整
   ===================================== */
/* フィルターコンテナ */
.gallery-filter-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}

/* フィルターボタン */
.filter-btn {
  padding: 8px 16px;
  border: none;
  background-color: #f5f5f5;
  color: #555;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 50px;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* アクティブボタンのスタイル */
.filter-btn.active,
.filter-btn:hover {
  background-color: #333;
  color: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* =====================================
  レビュー評価フィルター（プルダウン）のスタイル調整
===================================== */
.review-filter-container select#rating-filter-dropdown {
    padding: 8px 14px;
    border: 2px solid #ddd;
    border-radius: 50px;
    background-color: #f5f5f5;
    color: #555;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: border-color 0.3s, box-shadow 0.3s;
    outline: none;
    appearance: none; /* ブラウザのデフォルト矢印を消す */
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="gray"><polygon points="7,10 17,10 12,15"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px top 50%;
    background-size: 20px;
}

/* プルダウンホバー時 */
.review-filter-container select#rating-filter-dropdown:hover {
    border-color: #aaa;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* プルダウンフォーカス時 */
.review-filter-container select#rating-filter-dropdown:focus {
    border-color: #333;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.1);
}

/* オプションスタイル（シンプルに表示） */
.review-filter-container select#rating-filter-dropdown option {
    font-weight: normal;
    padding: 5px 10px;
}




/* =====================================
   グリッド表示 (Default専用：カラム方式)
   ===================================== */
.gallery-items.default {
    column-count: 5; /* 通常5列 */
    column-gap: 5px;
}

@media (max-width: 1200px) {
    .gallery-items.default { column-count: 4; } /* 1200px以下は4列 */
}

@media (max-width: 900px) {
    .gallery-items.default { column-count: 3; } /* 900px以下は3列 */
}

@media (max-width: 600px) {
    .gallery-items.default { column-count: 2; } /* 600px以下は2列 */
}

.gallery-items.default .gallery-item {
    break-inside: avoid;
    margin-bottom: 16px;
    cursor: pointer;
}

.gallery-items.default .gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
    user-select: none;
    pointer-events: none;
}

/* grid表示時はコメントとリンクを非表示 */
.gallery-items.default .gallery-item p,
.gallery-items.default .gallery-item a {
    display: none;
}

/* =====================================
   horizontalクラス適用時のスタイル調整（いいね順、新着順、古い順用）
   Defaultとは異なり、Flexbox＋Masonryで縦詰め横並び表示
   ===================================== */
.gallery-items.horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 横並び時のアイテム幅（レスポンシブ） */
.gallery-items.horizontal .gallery-item {
    width: calc(20% - 8px); /* 基本5列 */
}

@media (max-width: 1200px) {
    .gallery-items.horizontal .gallery-item { width: calc(25% - 8px); } /* 4列表示 */
}

@media (max-width: 900px) {
    .gallery-items.horizontal .gallery-item { width: calc(33.33% - 8px); } /* 3列表示 */
}

@media (max-width: 600px) {
    .gallery-items.horizontal .gallery-item { width: calc(50% - 8px); } /* 2列表示 */
}

/* horizontal表示時はコメントとリンクを非表示 */
.gallery-items.horizontal .gallery-item p,
.gallery-items.horizontal .gallery-item a {
    display: none;
}

/* 画像サイズ調整 */
.gallery-items.horizontal .gallery-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    user-select: none;
    pointer-events: none;
}



/* =====================================
   ライトボックス（詳細モーダル）２カラム
   ===================================== */
#gallery-lightbox {
    display: none;               /* JSで制御 */
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1000;
  display: flex;
  justify-content: center;     /* 水平方向中央寄せ */
  align-items: center;         /* 垂直方向中央寄せ */
}

/* 背景のブロック */
#gallery-lightbox .lightbox-backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
}

/* モーダル本体 */
#gallery-lightbox .lightbox-content {
    position: relative;
    display: flex;               /* 左右をフレックスで並べる */
    max-width: 90vw;             /* 横幅上限 */
    max-height: 90vh;            /* 縦幅上限 */
    margin: auto;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;            /* カラム外のはみ出しを隠す */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* 左カラム：画像領域 */
#gallery-lightbox .lightbox-media {
    flex: 1 1 60%;               /* 幅の比率（例：６：４） */
    background: #000;            /* 画像読み込み前の背景 */
}
#gallery-lightbox .lightbox-media img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* 右カラム：テキスト＋ボタン領域 */
#gallery-lightbox .lightbox-info {
    flex: 1 1 40%;
    padding: 16px;
    overflow-y: auto;            /* テキストが長いときは縦スクロール */
}

/* 閉じるボタン（×） */
#gallery-lightbox .lightbox-close {
    position: absolute;
    top: 8px; right: 12px;
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    z-index: 1001;
}

/* 「いいね」ボタンの簡易スタイル */
.lightbox-like-button {
    margin: 12px 0;
    padding: 8px 12px;
    border: none;
    background: #e0245e;
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
}

/* SNSリンク */
.lightbox-sns-link {
    display: inline-block;
    margin: 8px 0;
    color: #1da1f2;
    text-decoration: none;
}

/* 関連映画 */
.lightbox-related {
    margin-top: 12px;
}
.lightbox-related label {
    font-weight: bold;
}
.lightbox-related .related-movie-title {
    margin-left: 4px;
}

/* ───── ライトボックス ２カラムの上下中央揃え ───── */
#gallery-lightbox .lightbox-content {
  /* すでに display:grid; がある場合は以下だけ追記 */
  align-items: center;      /* 縦方向の中央寄せ */
}

/* 右側の info カラムだけ中央寄せしたい場合 */
#gallery-lightbox .lightbox-info {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* このブロックの縦方向センター */
  height: 100%;
}

/* =====================================
  レビューフィルター コンテナ調整（新規追加）
===================================== */
.review-filter-container {
  display: flex;          /* 横並び表示にする */
  flex-wrap: wrap;        /* 幅を超えたら折り返し */
  align-items: center;    /* 縦方向の中央揃え */
  gap: 10px;              /* ボタン間の間隔調整 */
  margin-bottom: 30px;    /* 下部の余白 */
}

/* レビュー用フィルターボタンの調整（新規追加） */
.review-filter-btn {
  padding: 8px 16px;
  border: none;
  background-color: #f5f5f5;
  color: #555;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 50px;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  height: 36px;          /* 高さを統一 */
  line-height: 20px;     /* 文字の位置調整 */
}

/* レビュー用アクティブボタンの調整（新規追加） */
.review-filter-btn.active,
.review-filter-btn:hover {
  background-color: #333;
  color: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* プルダウンの高さ統一・微調整（既存スタイルを上書き調整） */
.review-filter-container select#rating-filter-dropdown {
  height: 36px;                     /* ボタンと高さを完全に揃える */
  padding: 8px 32px 8px 16px;       /* 内側余白調整（特に右側） */
  background-position: right 10px center; /* 矢印の位置を調整 */
}