/*
 * t8-move-list-v3-system/modules/move-list/style.css
 *
 * 更新日: 2026-09-23
 *
 * 役割:
 * - Move List V3で使用するCSSを管理する。
 * - コマンドリストページの各表示要素を整える。
 *
 * メモ:
 * - 本サイトは常時ダークモードを前提とする。
 * - 背景色、文字色、境界線などは、
 *   ダークモードで見やすい配色を使用する。
 * - 動画は最大幅640pxで表示する。
 * - 画面幅が640px未満の場合は100%まで縮小する。
 * - iframeは16:9を維持して表示する。
 * - 動画HTMLはwp_oembed_get()で生成するため、
 *   iframe側にも幅を指定する。
 */




/* move-list の h1（ページタイトル） */
/* move-list の h1（ダークモード対応・控えめ） */
.t8-move-list-v3-title {
    font-size: 24px;
    font-weight: 600;
    margin: 10px 0 12px;
    line-height: 1.4;
}


/*
========================================
Move List V3 Intro
========================================
*/

.t8-move-list-v3-intro {
    font-size: 13px;
}


/*
========================================
コマンドリスト動画
========================================
*/

.t8-move-list-v3-video-details {
    width: 800px;
    max-width: 100%;
}


/*
========================================
開閉ボタン
========================================
*/

.t8-move-list-v3-video-summary {
    cursor: pointer;
    font-weight: bold;
    padding: 10px 0;
}


/*
========================================
開閉ボタンのマーカー
========================================
*/

.t8-move-list-v3-video-summary::marker {
    font-size: 0.8em;
}


/*
========================================
動画
========================================
*/

.t8-move-list-v3-video {
    width: 800px;
    max-width: 100%;
    margin-top: 10px;
}


.t8-move-list-v3-video iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    display: block;
}


/*
========================================
目次
========================================
*/

.t8-move-list-v3-commandlist-toc {
    font-size: 14px;
}


/*
========================================
Move List V3 技一覧
2列 × 2段
========================================
*/

.t8-move-list-v3-frame-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;

}

/*
========================================
1段目
2列を結合
========================================
*/

.t8-move-list-v3-frame-header {
    grid-column: 1 / 3;
    grid-row: 1;

    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;

    padding: 10px;
    border: 1px solid #ccc;
    background-color: #3a3a3a;
}


/*
command_order
*/

.t8-move-list-v3-frame-order {
    padding-right: 15px;
    font-size: 18px;
}


/*
1段目の技名
*/

.t8-move-list-v3-frame-header-name {
    min-width: 0;
    font-size: 18px;
    font-weight: bold;
}


/*
========================================
2段目
========================================
*/

.t8-move-list-v3-frame-image-id {
    grid-column: 1;
    grid-row: 2;

    padding: 10px;
    border: 1px solid #ccc;
}


.t8-move-list-v3-frame-data {
    grid-column: 2;
    grid-row: 2;

    display: flex;
    flex-direction: column;

    padding: 30px 10px 10px 10px;
    border: 1px solid #ccc;
}


/*
========================================
2段目 右側
========================================
*/


/*
右下
技名 + アイコン情報
*/

.t8-move-list-v3-frame-detail-header {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 8px;
}


/*
右下の技名
*/

.t8-move-list-v3-frame-detail-name {
    min-width: 0;
    font-size: 12px;
    font-weight: bold;
}


/*
アイコン情報
*/

.t8-move-list-v3-frame-icons {
    display: flex;
    gap: 5px;
    align-items: center;
    font-size: 13px;
}


/*
command
*/

.t8-move-list-v3-frame-command {
    margin-bottom: 8px;
    font-size: 14px;
}


/*
hitbox / damage / white_damage
*/

.t8-move-list-v3-frame-status {
    display: flex;
    gap: 15px;
    font-size: 14px;
}

/*
command_note
*/

.t8-move-list-v3-frame-command-note {
    font-size: 12px;
}


/*
========================================
カテゴリー見出し
========================================
*/

.t8-move-list-v3-frame-category {
    margin-top: 25px;
}