/*
 * EAダウンロード固定ページ 専用CSS
 * - link-panel.css の土台（.eal のリセット・色・ボタン・囲み）の上に、このページだけの部品を足す
 * - 本文は <div class="eal eal-dlp"> で囲む。すべて .eal.eal 配下に閉じる
 */

.eal.eal.eal-dlp > * + * { margin-top: 18px; }
.eal.eal .eal-dlp__h {
  margin-top: 36px; padding-bottom: 6px; border-bottom: 2px solid var(--eal-line);
  font-size: 18px; font-weight: 700; line-height: 1.5;
}
.eal.eal .eal-dlp__h + * { margin-top: 12px; }

/* ---- ダウンロードボタン（ZIPの差し替え時に直すのは href だけ。バージョン表示は download-page.js） ---- */
.eal.eal .eal-dlbtn__file { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; opacity: .85; }
.eal.eal .eal-dlbtn__file[hidden] { display: none; }
.eal.eal .eal-dlbtn svg { display: inline-block; vertical-align: -3px; margin-right: 6px; }

/* ---- 深い海の帯（EAのラインナップを見せる） ---- */
.eal.eal .eal-hero {
  position: relative; overflow: hidden;
  padding: 26px 22px 54px; border-radius: 14px; color: #e8f2f7;
  background:
    radial-gradient(120% 70% at 85% -10%, rgba(120, 200, 215, .28), transparent 60%),
    linear-gradient(180deg, #123b5c 0%, #0c2c47 55%, #08223a 100%);
}
/*
 * 本数は名前（.eal-roster__names の span）を CSS カウンターで数えて出す＝EAの増減で数字を直さなくてよい。
 * カウンターは文書順でしか数えられないので、本数の行は HTML ではラインナップの後ろに置き、order で先頭に見せる
 */
.eal.eal .eal-hero { display: flex; flex-direction: column; gap: 12px; }
.eal.eal .eal-hero__count { order: 1; font-size: 14px; color: #a9cfdd; }
.eal.eal .eal-hero__title { order: 2; font-size: 22px; font-weight: 700; line-height: 1.45; color: #fff; }
.eal.eal .eal-hero__lead { order: 3; font-size: 14px; color: #c8dee8; }
.eal.eal .eal-hero__count strong { font-size: 30px; line-height: 1; color: #fff; margin: 0 .1em; font-feature-settings: "tnum"; }
.eal.eal .eal-hero__count strong::before { content: counter(eal-ea); }
/* ラインナップ：系統ごとに1行。名前は飾りではなく「ZIPに何が入っているか」の目次 */
.eal.eal .eal-roster { order: 4; margin-top: 6px; display: grid; gap: 10px; counter-reset: eal-ea; }
.eal.eal .eal-roster__names span { counter-increment: eal-ea; }
.eal.eal .eal-roster__grp { display: grid; grid-template-columns: 8.5em 1fr; gap: 2px 12px; align-items: baseline; }
.eal.eal .eal-roster__label { font-size: 12.5px; font-weight: 700; color: #7fc4c9; }
.eal.eal .eal-roster__label--b { color: #9fe0c6; }
/* 区切り記号は折り返し位置で行頭に来るので使わず、間隔だけで分ける */
.eal.eal .eal-roster__names { display: flex; flex-wrap: wrap; gap: 0 1.1em; font-size: 13.5px; line-height: 1.7; color: #e8f2f7; }
.eal.eal .eal-roster__names span { white-space: nowrap; }
.eal.eal .eal-hero .eal-dlbtn {
  order: 5; margin-top: 8px; display: flex; width: 100%;
  background: #fff; border-color: #fff; color: #0c2c47; text-decoration: none;
}
.eal.eal .eal-hero .eal-dlbtn:hover { background: #e3f1f6; border-color: #e3f1f6; color: #0c2c47; }
.eal.eal .eal-hero .eal-dlbtn:focus-visible { outline: 3px solid #9fe0c6; outline-offset: 3px; }
.eal.eal .eal-hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 34px; display: block; }

/* ---- 目的別の早見（どのフォルダを使うか） ---- */
.eal.eal .eal-use { border: 1px solid var(--eal-line); border-radius: 8px; background: #fff; }
.eal.eal .eal-use__row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; }
.eal.eal .eal-use__row + .eal-use__row { border-top: 1px solid var(--eal-line); }
.eal.eal .eal-use__who { flex: 1 1 auto; min-width: 0; }
.eal.eal .eal-use__q { font-weight: 700; }
.eal.eal .eal-use__desc { margin-top: 2px; font-size: 13px; color: var(--eal-sub); }
.eal.eal .eal-use__dirs { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.eal.eal .eal-use__dir {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: var(--eal-info-bg); color: var(--eal-primary); border: 1px solid #c9dbea;
}
.eal.eal .eal-use__dir svg { flex: none; }
.eal.eal .eal-use__dir--b { background: #eef7f4; color: var(--eal-b); border-color: #c4e0d8; }
.eal.eal .eal-use__dir--plain { background: var(--eal-wash); color: var(--eal-sub); border-color: var(--eal-line); }

/* ---- ZIP の中身（フォルダ構成） ---- */
.eal.eal .eal-tree { border: 1px solid var(--eal-line); border-radius: 8px; background: #fff; font-size: 14px; }
.eal.eal .eal-tree > summary {
  list-style: none; cursor: pointer; padding: 10px 14px; font-weight: 700; font-size: 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.eal.eal .eal-tree > summary::-webkit-details-marker { display: none; }
.eal.eal .eal-tree > summary::after { content: "＋"; flex: none; color: var(--eal-sub); font-weight: 400; }
.eal.eal .eal-tree[open] > summary::after { content: "－"; }
.eal.eal .eal-tree__root {
  padding: 8px 14px; background: var(--eal-wash); border-top: 1px solid var(--eal-line); border-bottom: 1px solid var(--eal-line);
  font-size: 13px; color: var(--eal-sub); word-break: break-all;
}
.eal.eal .eal-tree__dir { padding: 10px 14px; }
.eal.eal .eal-tree__dir + .eal-tree__dir { border-top: 1px dashed var(--eal-line); }
.eal.eal .eal-tree__name { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.eal.eal .eal-tree__name small { font-weight: 400; color: var(--eal-sub); }
.eal.eal .eal-tree__name svg { flex: none; }
.eal.eal .eal-tree__files { margin-top: 4px; padding-left: 28px; font-size: 13px; color: var(--eal-sub); }
.eal.eal .eal-tree__files li { position: relative; padding-left: 1em; word-break: break-all; }
.eal.eal .eal-tree__files li::before { content: "└"; position: absolute; left: 0; color: var(--eal-muted); }
.eal.eal .eal-tree__files code { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }

/* ---- 動画（16:9 を保つ） ---- */
.eal.eal .eal-video { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #0c2c47; }
.eal.eal .eal-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.eal.eal .eal-video + .eal-note { margin-top: 6px; }

/* ---- MT5への入れ方（番号つき手順） ---- */
.eal.eal .eal-howto { counter-reset: eal-step; padding-top: 4px; }
.eal.eal .eal-howto > li { position: relative; padding: 0 0 16px 42px; }
.eal.eal .eal-howto > li:last-child { padding-bottom: 0; }
.eal.eal .eal-howto > li::before {
  counter-increment: eal-step; content: counter(eal-step);
  position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--eal-primary); color: #fff; font-weight: 700; font-size: 14px; line-height: 28px; text-align: center;
}
/* 番号の間をつなぐ線 */
.eal.eal .eal-howto > li:not(:last-child)::after {
  content: ""; position: absolute; left: 13px; top: 32px; bottom: 4px; width: 2px; background: var(--eal-line);
}
.eal.eal .eal-howto__t { font-weight: 700; line-height: 28px; }
.eal.eal .eal-howto__d { font-size: 14px; color: var(--eal-ink); }
.eal.eal .eal-howto__d + .eal-howto__d { margin-top: 4px; }
.eal.eal .eal-menu {
  display: inline-block; padding: 0 6px; margin: 0 1px; border-radius: 4px;
  background: var(--eal-wash); border: 1px solid var(--eal-line); font-size: 13px; font-weight: 700; white-space: nowrap;
}

/* ---- ページ末尾の案内 ---- */
.eal.eal .eal-next { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.eal.eal .eal-next .eal-btn { text-decoration: none; }
.eal.eal .eal-next .eal-btn--ghost { color: var(--eal-primary); grid-column: 1 / -1; }

@container eal (max-width: 480px) {
  .eal.eal .eal-dlp__h { font-size: 17px; }
  .eal.eal .eal-hero { padding: 22px 16px 48px; }
  .eal.eal .eal-hero__title { font-size: 19px; }
  .eal.eal .eal-roster__grp { grid-template-columns: 1fr; }
  /* 早見はフォルダ名を説明の下へ回す */
  .eal.eal .eal-use__row { flex-direction: column; gap: 6px; }
  .eal.eal .eal-use__dirs { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .eal.eal .eal-tree__files { padding-left: 20px; }
  .eal.eal .eal-howto > li { padding-left: 38px; }
  .eal.eal .eal-next { grid-template-columns: 1fr; }
}