/*
 * t8-frame-data-v3-system/modules/frame/style.css
 *
 * 更新日: 2026-10-06-23
 *
 * 役割:
 * - Frame Data V3の表示スタイルを定義する。
 * - Frame Data V3の各セクションの文字サイズ、色、余白などを調整する。
 *
 * メモ:
 * - 本サイトは常時ダークモードを前提とする。
 * - 背景色、文字色、境界線などは、
 *   ダークモードで見やすい配色を使用する。
 */





/*
 * イントロ
 */
.t8-frame-data-v3-intro {
    font-size: 13px;
}


/*
 * toc
 */
.t8-frame-data-v3-toc {
    font-size: 14px;
}


/*
 * ========================================
 * t8-frame-data-v3
 * 表示項目 設定パネル
 * ========================================
 *
 * 変更内容:
 * - 「表示項目」を設定パネルとして分かりやすくする。
 * - ダークモードを前提とした配色に変更。
 * - 枠線 + 暗めの背景色で囲む。
 * - カードのような強い影は使用しない。
 * - Frame Data本体より目立ちすぎないデザインにする。
 *
 * 対象HTML:
 * .t8-frame-data-v3-display-options
 */


/*
 * ========================================
 * 表示項目 外側
 * ========================================
 *
 * 設定パネル全体を囲む。
 */

.t8-frame-data-v3-display-options {

    /*
     * ダークモード用の背景色。
     *
     * Frame Data本体より少しだけ
     * 背景を変えて設定エリアを区別する。
     */
    background: #1c1c1c;

    /*
     * パネルの境界を明確にする。
     */
    border: 1px solid #3a3a3a;

    /*
     * 少しだけ角を丸める。
     */
    border-radius: 6px;

    /*
     * Frame Dataタイトルや目次との間隔。
     */
    margin: 20px 0;

}


/*
 * ========================================
 * 表示項目 タイトル
 * ========================================
 *
 * <summary>部分。
 * 閉じている状態でも
 * 「設定項目」であることを分かりやすくする。
 */

.t8-frame-data-v3-display-options-title {

    /*
     * 外側より少しだけ明るい背景にする。
     */
    background: #252525;

    /*
     * タイトル周辺の余白。
     */
    padding: 10px 14px;

    /*
     * 文字を少し強調する。
     */
    font-weight: 600;

    /*
     * クリックできることを分かりやすくする。
     */
    cursor: pointer;

}


/*
 * ========================================
 * 表示項目 設定内容
 * ========================================
 *
 * <details>を開いたときに表示される部分。
 */

.t8-frame-data-v3-display-options-content {

    /*
     * タイトルと設定内容を区切る。
     */
    border-top: 1px solid #3a3a3a;

    /*
     * 設定内容の内側に余白を付ける。
     */
    padding: 14px;

}


/*
 * ========================================
 * 各表示項目
 * ========================================
 *
 * checkbox + ラベル。
 */

.t8-frame-data-v3-display-option {

    /*
     * checkboxと文字を横並びにする。
     */
    display: inline-flex;

    /*
     * checkboxと文字の間隔。
     */
    align-items: center;
    gap: 5px;

    /*
     * 項目同士の間隔。
     */
    margin-right: 18px;
    margin-bottom: 8px;

    /*
     * クリックできることを分かりやすくする。
     */
    cursor: pointer;

}


/*
 * ========================================
 * リセットボタン
 * ========================================
 *
 * 設定項目の下にまとめる。
 */

.t8-frame-data-v3-display-options-reset {

    /*
     * 上のcheckbox群との間隔。
     */
    margin-top: 8px;

    /*
     * 上段の設定項目と区切る。
     */
    padding-top: 10px;

    /*
     * 区切り線。
     */
    border-top: 1px solid #3a3a3a;

}


/*
 * ========================================
 * 表示設定リセットボタン
 * ========================================
 */

.t8-frame-data-v3-display-reset {

    /*
     * ボタンらしい余白。
     */
    padding: 6px 12px;

    /*
     * ボタンの境界。
     */
    border: 1px solid #4a4a4a;

    /*
     * 少しだけ角を丸める。
     */
    border-radius: 4px;

    /*
     * ダークモード用のボタン背景。
     */
    background: #252525;

    /*
     * ダークモード用の文字色。
     */
    color: #dddddd;

    /*
     * クリックできることを分かりやすくする。
     */
    cursor: pointer;

}


/*
 * ========================================
 * リセットボタン hover
 * ========================================
 */

.t8-frame-data-v3-display-reset:hover {

    /*
     * マウスを乗せたときだけ
     * 少し明るくする。
     */
    background: #333333;

    /*
     * hover時の境界線。
     */
    border-color: #555555;

}

/*
 * ========================================
 * 表示項目 外側
 * ========================================
 *
 * 設定パネル全体を囲む。
 *
 * 変更内容:
 * - 表示項目と目次の間に余白を確保する。
 * - 下側を30pxにして、目次との密着感をなくす。
 */

.t8-frame-data-v3-display-options {

    /*
     * ダークモード用の背景色。
     */
    background: #1c1c1c;

    /*
     * パネルの境界を明確にする。
     */
    border: 1px solid #3a3a3a;

    /*
     * 少しだけ角を丸める。
     */
    border-radius: 6px;

    /*
     * 上:
     * - Frame Dataタイトルとの間隔
     *
     * 右:
     * - 0
     *
     * 下:
     * - 30px
     * - 目次との間隔を確保する
     *
     * 左:
     * - 0
     */
    margin: 20px 0 30px;

}




.t8-frame-data-v3-frame-table th {
    font-size: 13px;
}



.t8-frame-data-v3-move-name {
    font-size: 12px;
}

.t8-frame-data-v3-command {
    font-size: 14px;
}



.t8-frame-data-v3-hitbox {
    font-size: 14px;
}


.t8-frame-data-v3-damage {
    font-size: 14px;
}

.t8-frame-data-v3-frame-table td.t8-frame-data-v3-startup-column {
    font-size: 14px;
    text-align: center;
    width: 50px;
}

.t8-frame-data-v3-frame-table td.t8-frame-data-v3-frames-column {
    font-size: 14px;
    text-align: right;
    width: 60px;
}


.t8-frame-data-v3-frame-table td.t8-frame-data-v3-grd-column,
.t8-frame-data-v3-frame-table td.t8-frame-data-v3-nh-column,
.t8-frame-data-v3-frame-table td.t8-frame-data-v3-ch-column {
    font-size: 15px;
    text-align: center;
    width: 70px;
}


/* 通常テーブルの備考 */
.t8-frame-data-v3-frame-table td.t8-frame-data-v3-normal-remarks-column {
    font-size: 14px;
    width: 40px;
}

/* 投げテーブルの備考 */
.t8-frame-data-v3-frame-table td.t8-frame-data-v3-throw-remarks-column {
    font-size: 14px;
    width: 300px;
}