/*
 * t8-frame-data-v3-system/test/test04-style.css
 *
 * 更新日: 2026-10-07
 *
 * 役割:
 * - test04-render.php専用のCSSを管理する。
 * - Frame Dataテストテーブルの表示を管理する。
 * - test04のモーダル表示を管理する。
 * - モーダル内の詳細テーブルを管理する。
 *
 * 現段階:
 * - モーダル機能の動作確認用。
 * - 本番Frame Data V3とは分離する。
 */


/*
========================================
Frame Data テストテーブル
========================================
*/

.t8-frame-data-v3-test04-table {

    width: 100%;

    border-collapse: collapse;

}


/*
========================================
Frame Data テストテーブル
セル
========================================
*/

.t8-frame-data-v3-test04-table th,
.t8-frame-data-v3-test04-table td {

    padding: 8px;

    border: 1px solid #555;

}


/*
========================================
モーダル全体
========================================

役割:
- 画面全体を覆う。
- ページの通常コンテンツとは別レイヤーにする。
- モーダル本体を画面中央に配置する。
*/

#t8-frame-data-v3-test04-modal {

    position: fixed;

    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    z-index: 99999;

    display: flex;

    justify-content: center;
    align-items: center;

    background: rgba(0, 0, 0, 0.75);

    overflow: auto;

}


/*
========================================
モーダル本体
========================================

役割:
- 通常のFrame Dataテーブルより
  大きなサイズで表示する。
- 詳細情報をまとめて表示する。
*/

.t8-frame-data-v3-test04-modal-content {

    width: 95%;

    max-width: 1400px;

    max-height: 90vh;

    padding: 40px;

    background: #222;

    border: 1px solid #555;

    border-radius: 8px;

    box-sizing: border-box;

    color: #fff;

    position: relative;

    overflow: auto;

}


/*
========================================
モーダル詳細テーブル
========================================

役割:
- モーダル専用の詳細テーブル。
- 通常テーブルとは別のスタイルで管理する。
- 11列の詳細情報を表示する。
- モーダル本体の中央に配置する。
*/

.t8-frame-data-v3-test04-modal-table {

    width: 100%;

    margin: 0 auto;

    border-collapse: collapse;

    min-width: 1100px;

}


/*
========================================
モーダル詳細テーブル
セル
========================================

役割:
- ヘッダーとデータを中央寄せする。
- テーマ側CSSの影響を受けにくくする。
*/

.t8-frame-data-v3-test04-modal-table th,
.t8-frame-data-v3-test04-modal-table td {

    padding: 12px 14px;

    border: 1px solid #555;

    text-align: center !important;

    vertical-align: middle !important;

    white-space: nowrap;

}


/*
========================================
モーダル詳細テーブル
ヘッダー
========================================
*/

.t8-frame-data-v3-test04-modal-table th {

    font-weight: bold;

    text-align: center !important;

    vertical-align: middle !important;

}


/*
========================================
モーダル詳細テーブル
データ
========================================
*/

.t8-frame-data-v3-test04-modal-table td {

    text-align: center !important;

    vertical-align: middle !important;

}


/*
========================================
モーダル詳細テーブル
技名・コマンド
========================================

役割:
- 技名とコマンドを縦方向に表示する。
- 技名とコマンドも中央に配置する。
*/

.t8-frame-data-v3-test04-modal-table td:first-child {

    line-height: 1.6;

    text-align: center !important;

    vertical-align: middle !important;

}


/*
========================================
閉じるボタン
========================================
*/

#t8-frame-data-v3-test04-close {

    position: absolute;

    top: 10px;
    right: 10px;

    width: 36px;
    height: 36px;

    border: none;

    background: transparent;

    color: #fff;

    font-size: 28px;

    line-height: 36px;

    cursor: pointer;

}


/*
========================================
閉じるボタン ホバー
========================================
*/

#t8-frame-data-v3-test04-close:hover {

    opacity: 0.7;

}