@charset "utf-8";
/* =========================================================================================
   e_propulsion.css　電気推進システム一覧ページ専用
   -----------------------------------------------------------------------------------------
   書き方は style.css の決めごとに合わせる（字下げは空白4つ・色は変数・値はコメントに書き写さない）。

   このページの作りの要点
   ・表を使わず「1製品＝1枚のカード」で並べる。横スクロールが構造的に起きないようにするため。
   ・カードの中身は「数値のタイル4つ（2列×2行）＋外形寸法が1行」。
     値が無い製品でも「未確認」と出してタイルの数を変えないので、カードの行数が中身で変わらない。
   ・絞り込みと並べ替えは JavaScript が行う。JavaScript が動かないときは操作欄を出さず、
     全件が並んだだけのページとして読める（.ep_wrap に ep_js が付いたときだけ操作欄を出す）。
   ・style.css には「* { font-family…; font-size…; font-weight…; }」という全要素への指定があり、
     カードの中の div や span にも直接かかる。継承では届かないので、必要な場所で明示している。
   ========================================================================================= */
:root {
    /* ===== このページだけで使う色 ===== */
    --ep_sale_bg   : #eef7ea; /* 「商用販売中」の印の背景 */
    --ep_sale_line : #bcd9ae; /* 「商用販売中」の印の枠線 */
    --ep_sale_text : #3c6b28; /* 「商用販売中」の印の文字 */
}

/* -----------------------------------------------------------------------------------------
   ページ全体の枠
 -----------------------------------------------------------------------------------------*/
.ep_wrap {
    width: 100%;
}

/* -----------------------------------------------------------------------------------------
   絞り込み・並べ替えの操作欄
   JavaScript が動いたときだけ出す（動かないのに操作できる見た目を出さないため）
 -----------------------------------------------------------------------------------------*/
.ep_controls {
    display: none;
}
.ep_wrap.ep_js .ep_controls {
    display: block;
    /* 下のカード一覧と左右の端をそろえる。
       box-sizing を border-box にしてあるので、この幅に枠線と内側の余白が含まれる
       （含めないと、余白と枠線のぶん（左右に11pxずつ）カード一覧より広くなる） */
    box-sizing: border-box;
    width: calc(100% - 22px);
    margin: 0 auto 14px auto;
    padding: 10px;
    border: 1px solid var(--frame_color);
    border-radius: 8px;
    background-color: var(--sched_bg);
}
.ep_ctrl_title {
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--text_sub_color);
}
.ep_chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.ep_chip {
    padding: 4px 10px;
    border: 1px solid var(--sched_line);
    border-radius: 6px;
    background-color: #fff;
    font-size: 12px;
    color: var(--text_sub_color);
    cursor: pointer;
}
.ep_chip[aria-pressed="true"] {
    border-color: var(--main_color);
    background-color: var(--main_color);
    color: #fff;
}
.ep_selects {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}
/* ラベルと入力欄の組。狭い画面で折り返すときに、ラベルだけが前の行に残らないようにする */
.ep_field {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ep_selects label {
    font-size: 12px;
    color: var(--text_sub_color);
}
.ep_selects select,
.ep_selects input[type="text"] {
    padding: 3px 4px;
    border: 1px solid var(--sched_line);
    border-radius: 4px;
    font-size: 12px;
}
.ep_selects input[type="text"] {
    width: 160px;
    max-width: 100%;
}
.ep_count {
    margin-top: 10px;
    font-size: 12px;
    color: var(--text_sub_color);
}

/* -----------------------------------------------------------------------------------------
   比較表
   カードの「比較する」を選んだときだけ出る。中身は JavaScript が組み立てる
 -----------------------------------------------------------------------------------------*/
.ep_compare {
    display: none;
}
/* 選ばれているものがあるときだけ出す（ep_has_pick は JavaScript が付ける） */
.ep_wrap.ep_has_pick .ep_compare {
    display: block;
    /* 幅のそろえ方は操作欄と同じ（枠線と余白を幅に含める） */
    box-sizing: border-box;
    width: calc(100% - 22px);
    margin: 0 auto 14px auto;
    padding: 10px;
    border: 1px solid var(--sched_line);
    border-radius: 8px;
    background-color: #fff;
}
.ep_compare_head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.ep_compare_title {
    font-size: 13px;
    font-weight: bold;
    color: var(--main_color);
}
.ep_compare_head button {
    padding: 3px 10px;
    border: 1px solid var(--sched_line);
    border-radius: 6px;
    background-color: #fff;
    font-size: 12px;
    color: var(--text_sub_color);
    cursor: pointer;
}
.ep_compare_note {
    margin-bottom: 6px;
    font-size: 11px;
    color: var(--text_sub_color);
}
.ep_compare_note:empty {
    display: none;
}
/* クラスタに関する注釈（表の下）。
   表のすぐ下に続けると表の一部に見えるので、上に余白を取り、小さな見出しを立てる。
   出し入れは JavaScript が hidden で行う */
.ep_cluster_note {
    margin-top: 14px;
}
.ep_cluster_note_title {
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: bold;
    color: var(--main_color);
}
.ep_cluster_note_text {
    font-size: 11px;
    /* 5行ほどの小さな文字が続くので、行間を広めに取る */
    line-height: 1.7;
    color: var(--text_sub_color);
}
.ep_compare_table {
    width: 100%;
    /* 列幅を中身に左右されない形にする。1つでも中身に合わせて伸びる列があると、
       長い製品名や長い方式名の行だけ配分が変わり、列の左端がそろわなくなる */
    table-layout: fixed;
    border-collapse: collapse;
}
.ep_compare_table th,
.ep_compare_table td {
    padding: 4px 6px;
    border-bottom: 1px solid var(--frame_color);
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
    vertical-align: top;
    overflow-wrap: break-word;
}
/* 項目名の列。
   ★幅は JavaScript が決める（比べている数と表の幅で変わるため。e_propulsion.js の fitLabelWidth）。
   ここの 30% は、JavaScript が幅を入れるまでの仮の値。
   数で変える理由：固定幅にすると、2件だけ並べたときに製品の列だけが広くなって釣り合わない。
   割合だけにすると、表が広いときに見出し列が無駄に広くなる
   （実測：いちばん長い「トータルインパルス」は12pxで108px） */
.ep_compare_table th.ep_compare_label {
    width: 30%;
    font-weight: normal;
    color: var(--text_sub_color);
}
/* 製品名の行 */
.ep_compare_table th.ep_compare_name {
    border-bottom: 1px solid var(--sched_line);
    font-size: 12px;
    font-weight: bold;
}
/* 製品名の下に添える開発メーカー・機関 */
.ep_compare_table th.ep_compare_name .ep_compare_maker {
    margin-top: 2px;
    font-size: 11px;
    font-weight: normal;
    line-height: 1.5;
    color: var(--text_sub_color);
}
/* 1行おきに薄く敷く。横に目を走らせたときに、どの行を見ているか見失わないようにするため。
   1行目（スラスタ名の行）から敷き始める */
.ep_compare_table tr:nth-child(odd) td,
.ep_compare_table tr:nth-child(odd) th {
    background-color: var(--sched_bg);
}
/* クラスタ基数の行。
   中に入る選び欄は文字より背が高いので、そのままだと見出しの文字だけが上に寄り、
   行の高さも他より大きくなる。中心をそろえ、上下の余白を詰めて高さを他の行に近づける */
.ep_compare_table tr.ep_cluster_row th,
.ep_compare_table tr.ep_cluster_row td {
    padding-top: 2px;
    padding-bottom: 2px;
    vertical-align: middle;
}
/* クラスタ基数の選び欄 */
.ep_compare_table select.ep_cluster {
    padding: 2px 3px;
    border: 1px solid var(--sched_line);
    border-radius: 4px;
    font-size: 12px;
}
.ep_compare_table .ep_unknown {
    font-size: 12px;
}
/* 注記の欄（表のいちばん下）。Excel のセルの中で改行してあれば、そのまま改行して出す */
.ep_compare_table td.ep_note_cell {
    white-space: pre-line;
}

/* -----------------------------------------------------------------------------------------
   カードの並び
   入れ物の幅に合わせて列数が決まるので、画面幅ごとの切り替えを書かなくてよい
 -----------------------------------------------------------------------------------------*/
.ep_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 12px;
    width: calc(100% - 22px);
    margin: 0 auto;
}
.ep_card {
    padding: 12px 14px;
    border: 1px solid var(--frame_color);
    border-radius: 10px;
    background-color: #fff;
}
/* 絞り込みで外れたカード */
.ep_card.ep_hide {
    display: none;
}

/* ===== カードの頭（製品名・メーカー・印） ===== */
.ep_head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.ep_head_name {
    /* 長い製品名で印を押しのけないようにする（下限を 0 にすると文字が1字ずつ縦に並ぶので付けない） */
    flex: 1 1 0%;
    min-width: 120px;
}
.ep_name {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.4;
}
.ep_maker {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text_sub_color);
}
.ep_badges {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}
.ep_badge {
    padding: 2px 8px;
    border: 1px solid var(--sched_line);
    border-radius: 4px;
    background-color: var(--sched_tag);
    font-size: 11px;
    color: var(--main_color);
    white-space: nowrap;
}
/* 開発・販売状況の印。商用販売中だけ色を変え、実証段階は探査機ミッションと同じ系統の色を使う */
.ep_badge.ep_sale {
    border-color: var(--ep_sale_line);
    background-color: var(--ep_sale_bg);
    color: var(--ep_sale_text);
}
.ep_badge.ep_demo {
    border-color: var(--mission_line);
    background-color: var(--mission_tag);
    color: var(--mission_text);
}
.ep_badge.ep_quiet {
    border-color: var(--frame_color);
    background-color: var(--sched_bg);
    color: var(--text_sub_color);
}

/* ===== 方式・推進剤の行 ===== */
.ep_type {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text_sub_color);
}

/* ===== 数値のタイル ===== */
.ep_tiles {
    display: grid;
    /* 2列で固定する。幅が狭くても1列にしないのは、カードの行数をどの画面幅でも同じに保つため */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 10px;
}
.ep_tile {
    padding: 6px 9px;
    border-radius: 6px;
    background-color: var(--sched_bg);
}
/* 外形寸法は文字が長いので、1行を丸ごと使う */
.ep_tile.ep_tile_wide {
    grid-column: 1 / -1;
}
.ep_tile_label {
    font-size: 11px;
    line-height: 1.4;
    color: var(--text_sub_color);
}
.ep_tile_value {
    font-size: 15px;
    line-height: 1.5;
    /* 「100.95×99×97.3(突起含)」のような長い値でタイルが広がらないようにする */
    overflow-wrap: break-word;
}
.ep_tile_unit {
    font-size: 11px;
    color: var(--text_sub_color);
}
.ep_unknown {
    font-size: 13px;
    color: var(--text_sub_color);
}

/* ===== 比較するためのチェック欄 ===== */
/* 比較表は JavaScript が作るので、動かないときはチェック欄も出さない */
.ep_card_foot {
    display: none;
}
.ep_wrap.ep_js .ep_card_foot {
    display: block;
    margin-top: 10px;
}
.ep_pick {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text_sub_color);
    cursor: pointer;
}
.ep_pick input {
    cursor: pointer;
}
/* これ以上選べないとき。押せないことが見て分かるようにする */
.ep_pick.ep_pick_off {
    color: var(--frame_color);
    cursor: default;
}
.ep_pick.ep_pick_off input {
    cursor: default;
}
/* 比較に選ばれているカード */
.ep_card.ep_picked {
    border-color: var(--main_color);
}

/* ===== 詳しい項目（開閉） ===== */
.ep_detail {
    margin-top: 10px;
}
.ep_detail summary {
    font-size: 12px;
    color: var(--main_color);
    cursor: pointer;
}
.ep_detail dl {
    margin: 8px 0 0 0;
    border-top: 1px solid var(--frame_color);
}
.ep_detail dt {
    padding: 5px 0 0 0;
    font-size: 11px;
    color: var(--text_sub_color);
}
.ep_detail dd {
    margin: 0;
    padding: 0 0 5px 0;
    border-bottom: 1px solid var(--frame_color);
    font-size: 13px;
    line-height: 1.6;
    overflow-wrap: break-word;
}
.ep_detail dd a {
    color: var(--main_color);
    text-decoration: underline;
}
/* 出典が複数あるときの「出典①」の見出し。URL は次の行に出す */
.ep_detail dd .ep_source_no {
    font-size: 11px;
    color: var(--text_sub_color);
}

/* 管理人にだけ出る知らせ（条件欄に決まっていない記号があったとき） */
.ep_admin_notice {
    box-sizing: border-box;
    width: calc(100% - 22px);
    margin: 10px auto 0 auto;
    padding: 10px 12px;
    border: 1px solid var(--mission_line);
    border-radius: 8px;
    background-color: var(--mission_tag);
    font-size: 12px;
    line-height: 1.7;
    color: var(--mission_text);
}

/* -----------------------------------------------------------------------------------------
   絞り込みの結果が0件のときの案内
 -----------------------------------------------------------------------------------------*/
.ep_empty {
    display: none;
    /* 幅のそろえ方は操作欄と同じ（枠線と余白を幅に含める） */
    box-sizing: border-box;
    width: calc(100% - 22px);
    margin: 10px auto 0 auto;
    padding: 12px;
    border: 1px solid var(--frame_color);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text_sub_color);
}
.ep_wrap.ep_none .ep_empty {
    display: block;
}