@charset "UTF-8";
/* ============================================================
   トップページ「本日の運航状況」の凡例（.info__point-legend）
   令和8年度改修「本日の運航状況の下に ○×△ の意味を記載」（a案）

   設置先: wp-content/themes/tokyoisland/css/flight_legend.css
   読み込み: wp-content/mu-plugins/umisora-flight-legend.php
             （統合版CSS tokyo-island-pages より後に出力される）

   このファイルは compass / webpack のビルド対象外なので、
   ビルドを回しても上書き・削除されません
   （compass は sass/ 配下のみ、CleanWebpackPlugin は dist/ 配下のみを対象）。

   既存ルールの上書きは .info__point-update（css/main.css）の上余白と、
   スマートフォンでの表示順のみ。いずれも新設の .info__point-foot の中だけに効かせている
   （.info__point-foot .info__point-update で詳細度を上げているので読み込み順に依存しない）。
   ============================================================ */

/* 凡例（左）と更新時刻（右）を1行に並べる。
   入りきらない幅では更新時刻が次の行の右端に回る */
.info__point-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.info__point-foot .info__point-update {
    margin-left: auto;
}

/* 文字サイズ・上下余白は右の .info__point-update に揃える（14px / 上4px・下16px）。
   左余白 4px は島ボタン（.info__point-item）の margin 4px に揃えるため */
.info__point-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 24px;
    margin: 0;
    padding: 4px 24px 16px 4px;
    list-style: none;
    font-size: 14px;
    font-size: .875rem;
    line-height: 1.25;
}

/* アイコンと文言の間 8px・項目間 24px は運航状況ページの凡例（.info__detail-ok）と同じ */
.info__point-legend-item {
    display: flex;
    align-items: center;
}

.info__point-legend-item img,
.info__point-legend-none {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

.info__point-legend-none {
    line-height: 16px;
    text-align: center;
}

/* PC・タブレット: 凡例（更新時刻）と「運航状況一覧へ」ボタンの間を 16px → 32px に広げる。
   更新時刻の下余白 16px はそのままに、行全体の下に 16px を足す。
   スマートフォンは別指定（下の max-width: 767px） */
@media screen and (min-width: 768px) {
    .info__point-foot {
        margin-bottom: 16px;
    }

    /* 島ボタンのすぐ下で文字が詰まらないよう、上余白を 4px → 8px にする
       （島ボタン下から文字まで約14px＝文字サイズ1つ分）。
       右の更新時刻も同じ 8px にして文字の高さを揃える（css/main.css の 4px を上書き） */
    .info__point-legend,
    .info__point-foot .info__point-update {
        padding-top: 8px;
    }
}

/* タブレット: 島ボタンの一覧に左右 16px の余白が付く幅（css/main.css と同じ区切り） */
@media screen and (max-width: 1024px) {
    .info__point-legend {
        padding-left: 20px;
    }
}

/* スマートフォン: 更新時刻を島ボタンの直下（右端・従来どおりの位置）に置き、
   その下に凡例を1段で並べる。表示順だけを入れ替え、HTML の並びは PC と共通 */
@media screen and (max-width: 767px) {
    .info__point-foot .info__point-update {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
        width: 100%;
        padding: 4px 16px 0;
    }

    /* 上 16px＝更新時刻との間、下 24px＝「運航状況一覧へ」ボタンとの間
       （ボタン側を広く取り、凡例を上のグリッド・時刻のまとまりに寄せる。24px はボタン下の余白と同じ値） */
    .info__point-legend {
        width: 100%;
        padding: 16px 16px 24px 20px;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .info__point-legend-item img,
    .info__point-legend-none {
        width: 14px;
        height: 14px;
        line-height: 14px;
    }
}