/* =========================================
   ランク数字の表示（ラッパー内側に配置）
   ========================================= */
.recommend-thumb-wrapper .rank-number {
    display: block !important;
    position: absolute;
    bottom: 5px; 
    left: 8px; /* 少し内側に移動 */
    
    font-size: 145px; 
    font-weight: 900;
    font-family: 'Arial Black', sans-serif;
    font-style: italic; /* 動きを出して特別感を強調 */
    
    /* 白黒テーマに合わせた高級感のある白抜きスタイル */
    color: rgba(0, 0, 0, 0.4); /* 中身は透ける黒（ポスターがうっすら見える） */
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.95); /* 縁取りを鋭い白に */
    
    /* ポスター画像に埋もれないように影を落とす */
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.8));
    
    z-index: 100; 
    line-height: 1;
    pointer-events: none;
    user-select: none;
    
    /* 消える時・ホバー時の滑らかなアニメーション */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important; 
}

/* ホバー時の演出（カードにマウスが乗った瞬間、白く光る） */
.recommend-poster-card:hover .rank-number {
    color: rgba(255, 255, 255, 1) !important; /* 中身を真っ白に満たす */
    -webkit-text-stroke: 0px transparent !important; /* 縁取りを消す */
    filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.6)); /* 白く発光させる */
    transform: scale(1.05) translateY(-5px);
}

/* カードが拡大されてサムネイル(横長)に切り替わった時に数字を隠す */
.recommend-poster-card.is-expanded .rank-number {
    opacity: 0 !important;
    transform: scale(0.8); /* 消えるときにスッと縮む演出 */
}
.admin-overlay {
    display: flex; /* 常時フレックスにするが、最初は見えないようにする */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* 最初は透明 */
    z-index: 1000;
    
    /* アニメーションの設定：0.5秒かけてじっくり暗くする */
    transition: background-color 0.5s ease, visibility 0.5s;
    
    /* 最初はクリックを無効化しておく */
    pointer-events: none;
    visibility: hidden;
    justify-content: center;
    align-items: center;
}

/* 表示された時（activeクラスがついた時）の背景 */
.admin-overlay.active {
    background-color: rgba(0, 0, 0, 0.8); /* じっくり暗くなる */
    pointer-events: auto;
    visibility: visible;
}
.admin-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    
    /* 左右20%ずつの余白 ＝ 幅は60% */
    width: 65%; 
    height: 70%;
    /* 画面が小さすぎるときに崩れないよう最小幅を設定 */
    min-width: 600px; 
    min-height: 60vh;
    
    /* 高さはコンテンツに合わせて自動調整（または 80vh などで固定） */
    max-height: 90vh;
   
    overflow-y: auto;

    background-color: #181818;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0,0,0,0.7);
    z-index: 1001;
    cursor: default;
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;
}
.admin-content::-webkit-scrollbar {
    display: none;
}
.admin-overlay.active .admin-content {
    /* ★重要：元のサイズ（1倍）に戻し、不透明にする */
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
@media (max-width: 768px) {
    .admin-content {
        width: 90%;
        min-width: auto;
        padding: 20px;
    }
}
.admin-content textarea {
    width: 100%; height: 150px; background: #222; color: #fff;
    border: 1px solid #444; padding: 10px; margin: 20px 0;
}
.save-btn {
    background: #e50914; color: white; border: none;
    padding: 10px 25px; cursor: pointer; font-weight: bold;
}
.close-btn {
    position: absolute; top: 10px; right: 20px;
    font-size: 60px; color: white; cursor: pointer;
}









/* 管理画面内の検索ボックス */
.admin-search-box {
    margin-bottom: 20px;
    position: relative;
}
#admin-search-input {
    width: 100%;
    padding: 12px;
    background: #333;
    border: 1px solid #555;
    color: white;
    border-radius: 4px;
}
.admin-search-results {
    background: #222;
    max-height: 200px;
    overflow-y: auto;
    border-radius: 0 0 4px 4px;
}
.admin-search-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid #333;
    gap: 10px;
}
.admin-search-item img {
    width: 50px; /* 画像も少し大きく */
    height: 75px;
    object-fit: cover;
}
.admin-search-item span {
    flex-grow: 1;
    font-size: 18px; /* 検索結果のタイトルを大きく */
    margin-left: 15px;
}
.admin-search-item button {
    background: #00a4dc;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}
.admin-search-item button:hover {
    background: #0084b0;
}

/* 管理画面のカードグリッド */
.admin-edit-grid {
    display: flex;      /* 横に並べる */
    flex-wrap: wrap;    /* 横幅がいっぱいになったら折り返す */
    gap: 15px;          /* 作品間の隙間 */
    padding: 15px;
    background: #111;
    border-radius: 8px;
    height: auto;
    min-height: 20vh;
    width: auto;
    overflow-y: auto;   /* 作品が増えたらスクロールできるようにする */

}

.admin-edit-card {
    /* 100%から隙間5回分(15px * 5)を引いて、6で割る計算 */
    width: calc((100% - (15px * 6)) / 6); 
    position: relative;
    
    background: #222;
    border-radius: 4px;
    overflow: visible;
    text-align: center;
    border: 1px solid #333;
    display: flex;
    flex-direction: column;
}


.admin-edit-card img {
    width: 100%;
    /* アスペクト比をポスターサイズ(2:3)に固定すると綺麗です */
    aspect-ratio: 2 / 3; 
    object-fit: cover;
}
@media (max-width: 1000px) {
    .admin-edit-card {
        width: calc((100% - (15px * 2)) / 3);
    }
}

@media (max-width: 1950px) {
    .admin-edit-card {
    /* 100%から隙間5回分(15px * 5)を引いて、6で割る計算 */
    width: calc((100% - (15px * 5)) / 5); 
    position: relative;
    
    background: #222;
    border-radius: 4px;
    overflow: visible;
    text-align: center;
    border: 1px solid #333;
    display: flex;
    flex-direction: column;
}
}


.admin-card-info {
    padding: 10px 5px;
    font-size: 14px;
    color: #ccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-card-info .title {
    display: block;
    padding: 10px 5px;
    font-size: 16px; /* 以前より一回り大きく */
    font-weight: bold;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 長いタイトルは「...」で省略 */
}
.delete-btn-top {
    position: absolute;
    top: -10px;    /* 少し上にはみ出させる（お好みで0に） */
    right: -10px;  /* 少し右にはみ出させる（お好みで0に） */
    background: #ff4d4d; /* 目立つ赤色 */
    color: white;
    border: none;
    border-radius: 50%; /* 丸いボタンにする */
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    z-index: 10;
    transition: transform 0.2s, background 0.2s;
}

.delete-btn-top:hover {
    background: #ff0000;
    transform: scale(1.1);
}

.delete-btn-top .material-symbols-outlined {
    font-size: 26px !important; /* アイコンサイズを調整 */
}

.admin-card-btns {
    display: flex;
    justify-content: center; /* 中央寄せ */
    gap: 20px;
    padding: 12px;
    background: #282828;
}

.admin-card-btns button .material-symbols-outlined {
    font-size: 28px; /* 24pxから28pxへ拡大 */
    transition: transform 0.2s;
}

.admin-card-btns button {
    background: transparent;
    color: white;
    border: none;
    cursor: pointer;
    padding: 2px;
}
.admin-card-btns button:hover:not(:disabled) .material-symbols-outlined {
    transform: scale(1.2); /* マウスを乗せるとさらに大きく */
}

.admin-card-btns button:hover:not(:disabled) {
    color: #e50914;
}

.admin-card-btns button:disabled {
    opacity: 0.3;
    color: #555;
    cursor: default;
}

.admin-card-btns .material-symbols-outlined {
    font-size: 18px;
}
#admin-settings-icon {
    display: none !important; /* 初期値として隠しておき、管理者だけJSでinline-blockにする */
    pointer-events: auto !important; /* マウス反応を復活させる */
    cursor: pointer !important;     /* カーソルを指の形にする */
    position: relative;
    z-index: 11000;                /* 他の要素より手前に出す */
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.save-status {
    font-size: 12px;
    color: #4caf50;
    margin-left: 10px;
    opacity: 0;
    transition: opacity 0.5s;
}
.save-status.show {
    opacity: 1;
}


/* 歯車アイコンの見た目調整 */
.admin-gear-icon {
    cursor: pointer;
    color: #999;
    transition: transform 0.3s ease, color 0.3s ease;
    font-size: 24px !important;
}

.admin-gear-icon:hover {
    color: #ffffff;
    transform: rotate(90deg); /* ホバーで少し回る演出 */
}

/* recommend.css の最後に追加 */

/* ホバー時に現れる情報のコンテナ */
.hover-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0;
    /* 下からじわっと暗くなるグラデーション（ロゴを見やすくするため） */
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 60%);
    transition: opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* 下詰めに配置 */
    padding: 12px;
    box-sizing: border-box;
    pointer-events: none; /* マウスイベントを邪魔しない */
}

.recommend-poster-card:hover .hover-overlay {
    opacity: 1;
}

/* ロゴのサイズと位置 */
.hover-logo {
    display: none !important;
    width: 50%;           /* 枠の半分くらいのサイズ */
    max-height: 40px;     /* 大きくなりすぎないように制限 */
    object-fit: contain;  /* 比率を維持 */
    margin-bottom: 8px;
    filter: drop-shadow(0 0 5px rgba(0,0,0,1)); /* ロゴを際立たせる */
    align-self: flex-start;
}

/* 再生ボタンの装飾 */
.h-play-btn {
    background: white;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto; /* ボタンはクリック可能に */
    transition: transform 0.2s ease;
}

.h-play-btn:hover {
    transform: scale(1.1);
    background: #e50914; /* ホバーでNetflixレッドに */
}

.h-play-btn .material-symbols-outlined {
    color: black;
    font-size: 24px;
}


/* --- ちだのおすすめ：タイトルと設定アイコンの横並び --- */

.recommend-header {
    display: flex;           /* 横並びにする */
    align-items: center;     /* 上下の高さを中央に揃える */
    gap: 15px;               /* タイトルとアイコンの間隔 */
    margin: 35px 0 5px 2.5%;   /* 位置調整（左端の余白など） */
}

/* ヘッダー内の h3 の余白をリセット（ズレ防止） */
.recommend-header h3 {
    margin: 0;
    line-height: 1;
}

/* 歯車アイコンの見た目 */
.admin-gear-icon {
    font-size: 1.5rem;       /* アイコンの大きさ */
    color: rgba(255, 255, 255, 0.3); /* 普段は薄くする */
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

/* マウスが乗った時の演出 */
.admin-gear-icon:hover {
    color: #ffffff;          /* 白く光る */
    transform: rotate(90deg); /* クルッと回る */
}