/*
 * t8-update-system/modules/separate/style.css
 *
 * 更新日: 2026-09-13
 *
 * 役割:
 * - 個別アップデート情報の表示用CSSを担当する。
 *
 * メモ・注意点:
 * - アップデート表示専用のCSS。
 * - Move List V3 / Frame側にはアップデート専用CSSを追加しない。
 *
 * - Season 1 / Season 2 は4列構成。
 * - Season 3以降は3列構成。
 *
 * - command は180px。
 * - Season 1 / Season 2 の category は100px。
 * - Season 1 / Season 2 の impact は60px。
 * - Season 3以降の category は120px。
 * - description は残りの幅を使用する。
 *
 * - impact は「↑」「↓」「↑↓」の3種類のみなので、
 *   60px固定で問題ない。
 */


/*
========================================
アップデート全体
========================================
*/

.t8-update-separate {
    margin: 20px 0;
}


/*
========================================
アップデート1件
========================================
*/

/*
 * Season 1 / Season 2
 *
 * command
 * category
 * impact
 * description
 */

.t8-update-separate-item.is-four-column {
    display: grid;
    grid-template-columns: 180px 100px 60px minmax(0, 1fr);
}


/*
 * Season 3以降
 *
 * command
 * category
 * description
 */

.t8-update-separate-item.is-three-column {
    display: grid;
    grid-template-columns: 180px 120px minmax(0, 1fr);
}


/*
========================================
Ver.ごとのカード
========================================
*/

.t8-update-separate-version-card {
    margin-bottom: 20px;

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;

    overflow: hidden;
}


/*
========================================
アップデート バージョン見出し
========================================
*/

.t8-update-separate-version {
    margin: 24px 0 8px;
    padding-left: 10px;
    font-size: 18px;
    font-weight: 700;
}


/* ====================================
   更新データ：交互背景
   ==================================== */

.t8-update-separate-item.is-odd {
    background: rgba(255, 255, 255, 0.025);
}

.t8-update-separate-item.is-even {
    background: rgba(255, 255, 255, 0.055);
}




/*
========================================
アップデート ヘッダー
========================================
*/

/*
 * Season 1 / Season 2
 *
 * command
 * category
 * impact
 * description
 */

.t8-update-separate-header.is-four-column {
    display: grid;
    grid-template-columns: 180px 100px 60px minmax(0, 1fr);
}


/*
 * Season 3以降
 *
 * command
 * category
 * description
 */

.t8-update-separate-header.is-three-column {
    display: grid;
    grid-template-columns: 180px 120px minmax(0, 1fr);
}




/*
========================================
ヘッダー：コマンド
========================================
*/

.t8-update-separate-header-command {
    padding: 10px 12px;

    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.15);

    font-size: 13px;
    font-weight: 700;

    display: flex;
    justify-content: center;
    align-items: center;
}


/*
========================================
ヘッダー：カテゴリー
========================================
*/

.t8-update-separate-header-category {
    padding: 10px 12px;

    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-left: 0;

    font-size: 13px;
    font-weight: 700;

    display: flex;
    justify-content: center;
    align-items: center;
}


/*
========================================
ヘッダー：Impact
========================================
*/

.t8-update-separate-header-impact {

}


/*
========================================
ヘッダー：説明
========================================
*/

.t8-update-separate-header-description {
    padding: 10px 12px;

    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-left: 0;

    font-size: 13px;
    font-weight: 700;

    display: flex;
    justify-content: center;
    align-items: center;
}


/*
 * Season 1 / Season 2
 *
 * Impact列と説明列を
 * 1つのヘッダーとして結合する。
 */

.t8-update-separate-header.is-four-column
.t8-update-separate-header-description {
    grid-column: 3 / 5;
}





/*
========================================
1列目：コマンド
========================================
*/

.t8-update-separate-command {
    padding: 12px;

    border: 1px solid rgba(255, 255, 255, 0.15);

    font-weight: 600;
    font-size: 13px;

    display: flex;
    align-items: center;

    overflow-wrap: anywhere;
}


/*
========================================
2列目：カテゴリー
========================================
*/

.t8-update-separate-category {
    padding: 12px;

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-left: 0;

    font-weight: 600;
    font-size: 13px;

    display: flex;
    justify-content: center;
    align-items: center;
}


/*
========================================
3列目：Impact
========================================
*/

.t8-update-separate-impact {
    padding: 12px;

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-left: 0;

    font-weight: 600;
    text-align: center;
    font-size: 13px;

    display: flex;
    justify-content: center;
    align-items: center;
}


/*
========================================
説明
========================================
*/

.t8-update-separate-description {
    padding: 12px;

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-left: 0;

    line-height: 1.7;
    min-width: 0;
    font-size: 13px;
}


/*
========================================
変更なし
========================================
*/

.t8-update-separate-no-change-row {
    padding: 12px 12px 12px 20px;

    font-size: 15px;
    font-weight: 600;
}

/*
========================================
新規参戦
========================================
*/

.t8-update-separate-new-character {
    padding: 12px 12px 12px 20px;

    font-size: 15px;
    font-weight: 600;
}