/* ==========================================================================
   Shop Staff List Styles (店舗キャスト一覧・スマホ2列最大化 ＆ 横スクロール版)
========================================================================== */

/* --------------------------------------------------
   1. 並び替え ＆ 出勤セレクタタブ（改行完全防止・横スクロール）
   -------------------------------------------------- */
/* 並び替えセレクタ（ボタン分離 ＆ 横スクロール） */
.work_status_menu {
    display: flex !important;
    gap: 6px !important;
    width: 100% !important;
    list-style: none !important;
    margin: 0 0 8px 0 !important;
    padding: 2px 2px 6px 2px !important;
    background: transparent !important;
    border: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
}

    .work_status_menu::-webkit-scrollbar {
        display: none !important;
    }

.work_status_menu_item,
.work_status_menu_item_active {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

    /* 未選択ボタン（白背景＋グレー枠のピル型） */
    .work_status_menu_item a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 14px !important;
        height: 32px !important;
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 20px !important;
        color: #475569 !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        white-space: nowrap !important; /* ★改行禁止 */
        text-decoration: none !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
        box-sizing: border-box !important;
    }

    /* 選択中ボタン（ピンク背景＋白文字） */
    .work_status_menu_item_active a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 6px 14px !important;
        height: 32px !important;
        background: linear-gradient(135deg, #e6005c, #ff2a70) !important;
        border: 1px solid #e6005c !important;
        border-radius: 20px !important;
        color: #ffffff !important;
        font-size: 12px !important;
        font-weight: bold !important;
        white-space: nowrap !important; /* ★改行禁止 */
        text-decoration: none !important;
        box-shadow: 0 2px 6px rgba(230, 0, 92, 0.3) !important;
        box-sizing: border-box !important;
    }

/* ==========================================================================
   キャストカード一覧（等幅・等高・縦長 300x450 完全固定修復版）
========================================================================== */

/* リストコンテナ全体（スマホ: 2列均等固定） */
.ShopPageStaffList {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* スマホ2列 */
    gap: 8px !important;
    width: 100% !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.ShopPageStaffListItem {
    width: 100% !important;
    min-width: 0 !important; /* 中身の画像による押し広げを防止 */
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* カード本体（高さを100%揃えるFlexbox） */
.CustomTenpoStaffCard {
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

    .CustomTenpoStaffCard:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 6px 16px rgba(230, 0, 92, 0.1) !important;
        border-color: #fbcfe8 !important;
    }

    .CustomTenpoStaffCard a {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        text-decoration: none !important;
        color: inherit !important;
    }

/* ★写真枠（縦長 300 x 450 の比率 2:3 に完全固定・はみ出しゼロ） */
.TenpoStaffImg {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 2 / 3 !important; /* 縦長比率 2:3 */
    height: auto !important;
    overflow: hidden !important;
    background-color: #f8fafc !important;
    flex-shrink: 0 !important;
}

    /* 画像本体（枠に合わせて均等トリミングフィット） */
    .TenpoStaffImg img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        object-fit: cover !important;
        display: block !important;
        transition: transform 0.25s ease !important;
    }

.CustomTenpoStaffCard:hover .TenpoStaffImg img {
    transform: scale(1.04) !important;
}

/* 情報ボディ（下部テキストエリア） */
.TenpoStaff_Body {
    padding: 8px 8px 10px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important; /* 高さを揃えて底を埋める */
    background: #ffffff !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

/* 業種タグ（キャバクラなど） */
.StaffCardGenreBox {
    margin-bottom: 2px !important;
}

.GenreBadge {
    display: inline-block !important;
    font-size: 11px !important;
    color: #475569 !important;
    background-color: #f1f5f9 !important;
    padding: 1px 5px !important;
    border-radius: 3px !important;
    line-height: 1.2 !important;
}

/* キャスト名 */
.CustomShopStaffName {
    font-size: 13px !important;
    font-weight: bold !important;
    color: #e6005c !important;
    margin: 2px 0 4px 0 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 身長などのプロフテキスト */
.CustomShopStaffProf {
    font-size: 10.5px !important;
    color: #64748b !important;
    margin: 1px 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 特徴バッジ群 */
.CustomShopStaffBadgeGroup {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 3px !important;
    margin: 4px 0 !important;
}

.ShopStaffMarkIcon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1px 4px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    color: #e6005c !important;
    border: 1px solid #fecdd3 !important;
    border-radius: 3px !important;
    background-color: #fff1f2 !important;
    line-height: 1.2 !important;
}

/* PR説明文（2行でスッキリ統一） */
.CustomShopStaffPRText {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 10.5px !important;
    color: #64748b !important;
    line-height: 1.35 !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    height: auto !important;
    max-height: 29px !important;
}

/* ==========================================================================
   タブレット対応 (600px - 899px) - 4列均等グリッド
========================================================================== */
@media screen and (max-width: 899px) and (min-width: 600px) {
    .ShopPageStaffList {
        grid-template-columns: repeat(4, 1fr) !important; /* 4列均等 */
        gap: 12px !important;
    }

    .TenpoStaff_Body {
        padding: 8px 10px 10px 10px !important;
    }

    .CustomShopStaffName {
        font-size: 13.5px !important;
    }
}

/* ==========================================================================
   ★PC対応 (900px以上) - 6列均等グリッド
========================================================================== */
@media screen and (min-width: 900px) {
    .ShopPageStaffList {
        grid-template-columns: repeat(6, 1fr) !important; /* 6列均等 */
        gap: 14px !important;
    }

    .TenpoStaff_Body {
        padding: 8px 10px 10px 10px !important;
    }

    .CustomShopStaffName {
        font-size: 14px !important;
    }
}