/* ea-card.css — EA の共通カード・一覧の絞り込み・ランキング・はじめ方（2026-10-27 TASK_catalog_ux_mail_v2 §4）。
   色はすべて site.css のトークン。#hex を書かない（DESIGN.md §2）。影・グラデーションなし。
   ブレークポイント: スマホ ≤767 / タブレット 768〜1023（2列）/ PC ≥1024（3列） */

/* 色の取り次ぎ。site.css を読むページは site.css のトークン（ライト／ダーク切替つき）、読まない LP（GOLD PIVOT BREAK など。
   ライト固定の独自パレット --ink / --panel / --rule / --paper / --deep）はそちらを使う。どちらも無いときはブラウザのシステム色。
   部品の中では --eac-* だけを使う。 */
:root {
  --eac-card: var(--card, var(--panel, Canvas));
  --eac-canvas: var(--canvas, var(--paper, Canvas));
  --eac-raised: var(--raised, var(--paper, Canvas));
  --eac-text: var(--text, var(--ink, CanvasText));
  --eac-muted: var(--text-muted, var(--ink-2, CanvasText));
  --eac-faint: var(--text-faint, var(--ink-3, GrayText));
  --eac-border: var(--border, var(--rule, GrayText));
  --eac-border-light: var(--border-light, var(--rule, GrayText));
  --eac-accent: var(--accent, var(--deep, LinkText));
  --eac-on-accent: var(--on-accent, Canvas);
  --eac-mono: var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace);
}

.eac-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .eac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .eac-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- full ---------- */
/* 2026-10-27 Owner「カードが真っ白でのっぺり」: 上に BT 残高推移の「顔」、手法はタグ、指標は面の箱で区切る。
   色は増やさない（線は --profit／--loss、面は --raised、選択は --accent の枠だけ。DESIGN.md §2） */
.eac-card { display: flex; flex-direction: column; border-radius: 12px; background: var(--eac-card); color: var(--eac-text); border: 1px solid var(--eac-border); min-width: 0; overflow: hidden; transition: border-color .15s; }
.eac-card:hover { border-color: var(--eac-accent); }
.eac-face { position: relative; display: block; height: 112px; background: var(--eac-raised); border-bottom: 1px solid var(--eac-border); text-decoration: none; }
.eac-curve { position: absolute; left: 12px; right: 12px; top: 30px; bottom: 10px; width: calc(100% - 24px); height: calc(100% - 40px); }
.eac-face .eac-status { position: absolute; top: 10px; right: 10px; background: var(--eac-card); color: var(--eac-text); border: 1px solid var(--eac-border); }
.eac-face-label { position: absolute; top: 12px; left: 12px; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--eac-muted); }
.eac-face-na { position: absolute; inset: 30px 12px 10px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--eac-muted); }
.eac-body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 16px 18px 18px; }
@media (min-width: 1024px) { .eac-body { padding: 18px 20px 20px; } }
.eac-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.eac-tag { display: inline-block; padding: 3px 10px; border-radius: 40px; background: var(--eac-raised); color: var(--eac-text); font-size: 12px; font-weight: 600; line-height: 1.4; }
.eac-card .eac-kpis { margin: 2px 0 0; padding: 10px 4px; gap: 0; border-radius: 10px; background: var(--eac-raised); text-align: center; }
.eac-card .eac-kpis div + div { border-left: 1px solid var(--eac-border); }
.eac-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.eac-name { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.35; letter-spacing: -0.005em; }
.eac-name a { color: inherit; text-decoration: none; }
.eac-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.eac-status { flex: none; display: inline-block; padding: 2px 10px; border-radius: 40px; background: var(--eac-raised); color: var(--eac-muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.eac-meta { margin: 0; color: var(--eac-muted); font-size: 14px; line-height: 1.5; }
.eac-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 0; }
.eac-kpis div { min-width: 0; }
.eac-kpis dt { margin: 0; color: var(--eac-muted); font-size: 12px; font-weight: 500; }
.eac-kpis dd { margin: 2px 0 0; font-family: var(--eac-mono); font-variant-numeric: tabular-nums; font-weight: 750; font-size: 20px; line-height: 1.2; white-space: nowrap; }
/* 範囲（1.42〜2.73 など）は長いので小さく */
.eac-kpis dd.long { font-size: 15px; white-space: normal; }
/* サイドバーの横では列数を幅で決める（カード幅 260px 以上） */
.eac-finder .eac-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.eac-kpis dd.na { color: var(--eac-muted); font-weight: 500; }
.eac-src { margin: 0; color: var(--eac-muted); font-size: 12px; font-family: var(--eac-mono); line-height: 1.5; }
.eac-cap { margin: 0; color: var(--eac-muted); font-size: 14px; line-height: 1.6; }
.eac-price { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.eac-price .num { font-family: var(--eac-mono); font-variant-numeric: tabular-nums; font-weight: 800; font-size: 24px; }
.eac-price small { color: var(--eac-muted); font-size: 12px; }
.eac-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.eac-badge { display: inline-block; padding: 2px 10px; border-radius: 40px; border: 1px solid var(--eac-border); color: var(--eac-text); font-size: 12px; font-weight: 600; }
.eac-actions { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.eac-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px; border-radius: 40px; border: 1px solid var(--eac-border-light); background: transparent; color: var(--eac-text); font-size: 15px; font-weight: 600; text-decoration: none; }
.eac-btn:hover { background: var(--eac-raised); }
.eac-btn.primary { background: var(--eac-accent); border-color: var(--eac-accent); color: var(--eac-on-accent); }
.eac-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--eac-text); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.eac-desc { margin: 0; font-size: 15px; line-height: 1.75; color: var(--eac-text); }

/* ---------- compact（ランキング行） ---------- */
.eac-rank { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--eac-border); }
.eac-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "no name act" "no nums act"; gap: 2px 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--eac-border); }
.eac-row .no { grid-area: no; font-family: var(--eac-mono); font-weight: 750; font-size: 16px; color: var(--eac-muted); text-align: center; }
.eac-row .nm { grid-area: name; min-width: 0; font-size: 15px; font-weight: 650; }
.eac-row .nm a { color: var(--eac-text); text-decoration: none; }
.eac-row .nm small { display: block; margin-top: 1px; color: var(--eac-muted); font-size: 12px; font-weight: 500; }
.eac-row .nums { grid-area: nums; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 12px; color: var(--eac-muted); }
.eac-row .nums b { font-family: var(--eac-mono); font-variant-numeric: tabular-nums; font-weight: 750; font-size: 14px; color: var(--eac-text); margin-left: 4px; }
.eac-row .act { grid-area: act; }
.eac-row .act .eac-btn { min-height: 40px; padding: 8px 14px; font-size: 14px; }
@media (min-width: 1024px) {
  .eac-row { grid-template-columns: 40px minmax(0, 1.4fr) minmax(0, 2fr) auto; grid-template-areas: "no name nums act"; }
}
.eac-hscroll { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin: 0; list-style: none; padding-left: 0; }
.eac-hscroll > li { flex: 0 0 min(280px, 82%); scroll-snap-align: start; }
.eac-hscroll .eac-row { grid-template-columns: 28px minmax(0, 1fr); grid-template-areas: "no name" "no nums" "no act"; border: 1px solid var(--eac-border); border-radius: 12px; background: var(--eac-card); padding: 12px; }
.eac-hscroll .eac-row .act { padding-top: 6px; }

/* ---------- タブ ---------- */
.eac-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 12px; padding: 0 0 4px; }
.eac-tabs button { flex: none; min-height: 44px; padding: 8px 16px; border-radius: 40px; border: 1px solid var(--eac-border); background: transparent; color: var(--eac-text); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.eac-tabs button[aria-selected="true"] { background: var(--eac-raised); border-color: var(--eac-muted); font-weight: 650; }
.eac-note { margin: 8px 0 0; color: var(--eac-muted); font-size: 12px; line-height: 1.6; }
/* 部品の中の文字リンクは本文色＋下線（site.css の --link はダークで暗い面に沈むため） */
.eac-note a, .eac-finder p a, .eac-steps a { color: var(--eac-text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 一覧（絞り込み） ---------- */
.eac-finder { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1024px) { .eac-finder { grid-template-columns: 260px minmax(0, 1fr); gap: 24px; align-items: start; } }
.eac-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin: 0; }
.eac-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border-radius: 40px; border: 1px solid var(--eac-border); background: transparent; color: var(--eac-text); font: inherit; font-size: 14px; cursor: pointer; text-decoration: none; }
.eac-chip[aria-pressed="true"] { background: var(--eac-raised); border-color: var(--eac-muted); font-weight: 650; }
.eac-chip .n { font-family: var(--eac-mono); font-size: 12px; color: var(--eac-muted); }
.eac-side { border: 1px solid var(--eac-border); border-radius: 12px; background: var(--eac-card); }
.eac-side > summary { min-height: 48px; display: flex; align-items: center; padding: 0 16px; cursor: pointer; font-weight: 650; font-size: 15px; }
@media (min-width: 1024px) { .eac-side > summary { display: none; } .eac-side { position: sticky; top: 88px; } }
.eac-side-body { padding: 4px 16px 16px; }
.eac-group { margin: 12px 0 0; padding: 0; border: 0; }
.eac-group legend { padding: 0; margin: 0 0 6px; font-size: 13px; font-weight: 650; color: var(--eac-text); }
.eac-group label { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 14px; color: var(--eac-text); cursor: pointer; }
.eac-group label .n { margin-left: auto; font-family: var(--eac-mono); font-size: 12px; color: var(--eac-muted); }
.eac-group label.zero { color: var(--eac-faint); }
.eac-group input { width: 18px; height: 18px; accent-color: var(--eac-accent); }
.eac-reset { margin-top: 12px; }
.eac-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 12px; }
.eac-count { font-size: 14px; color: var(--eac-muted); }
.eac-count b { font-family: var(--eac-mono); color: var(--eac-text); font-size: 16px; }
.eac-bar select { min-height: 44px; padding: 6px 14px; border-radius: 32px; border: 1px solid var(--eac-border-light); background: var(--eac-raised); color: var(--eac-text); font: inherit; font-size: 14px; }
.eac-view { display: inline-flex; gap: 4px; }
.eac-view button { min-height: 44px; padding: 6px 14px; border-radius: 40px; border: 1px solid var(--eac-border); background: transparent; color: var(--eac-text); font: inherit; font-size: 14px; cursor: pointer; }
.eac-view button[aria-pressed="true"] { background: var(--eac-raised); border-color: var(--eac-muted); font-weight: 650; }
.eac-more { display: flex; justify-content: center; margin-top: 16px; }
.eac-empty { padding: 24px; text-align: center; color: var(--eac-muted); border: 1px dashed var(--eac-border); border-radius: 12px; }

/* ---------- 仕様表・価格ブロック（LP） ---------- */
/* LP によっては差し込み位置が暗いヒーローの中になるので、自前の面と文字色を持つ */
.eac-lp { box-sizing: border-box; background: var(--eac-card); color: var(--eac-text); border: 1px solid var(--eac-border); border-radius: 12px; padding: 4px 16px 20px; }
.eac-lp h2 { color: var(--eac-text); }
@media (min-width: 768px) { .eac-lp { padding: 8px 24px 24px; } }
.eac-spec { width: 100%; border-collapse: collapse; font-size: 15px; }
.eac-spec th, .eac-spec td { padding: 10px 12px; border-bottom: 1px solid var(--eac-border); text-align: left; vertical-align: top; line-height: 1.6; }
.eac-spec th { width: 34%; background: var(--eac-raised); color: var(--eac-text); font-weight: 600; font-size: 14px; }
.eac-spec td.na { color: var(--eac-muted); }
.eac-guide th { width: 30%; }
.eac-prices { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .eac-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); } .eac-prices.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.eac-prices > li { padding: 16px; border: 1px solid var(--eac-border); border-radius: 12px; background: var(--eac-card); }
.eac-prices h3 { margin: 0 0 6px; font-size: 15px; font-weight: 650; }
.eac-prices p { margin: 4px 0 0; font-size: 14px; color: var(--eac-muted); line-height: 1.6; }
.eac-prices .num { font-family: var(--eac-mono); font-variant-numeric: tabular-nums; font-weight: 750; font-size: 22px; color: var(--eac-text); }

/* ---------- LP のタブ（ページ内リンク）・フォワードパネル ---------- */
.eac-lp-tabs { margin: 16px 0 0; }
.eac-lp-tabs a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 40px; border: 1px solid var(--eac-border); color: var(--eac-text); font-size: 14px; font-weight: 500; text-decoration: none; }
.eac-lp-tabs a:hover { background: var(--eac-raised); }
.eac-tab-anchor { display: block; scroll-margin-top: 88px; }
.eac-kpis4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .eac-kpis4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.eac-kpis4 dd { font-size: 24px; }
.eac-kpis dd.pos { color: var(--profit, var(--green, CanvasText)); }
.eac-kpis dd.neg { color: var(--loss, var(--red, CanvasText)); }
.eac-fwd-small { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
@media (min-width: 768px) { .eac-fwd-small { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.eac-fwd-small dt { margin: 0; color: var(--eac-muted); font-size: 12px; }
.eac-fwd-small dd { margin: 2px 0 0; font-size: 14px; font-family: var(--eac-mono); }

/* ---------- スマホの固定CTA（購入ページのみ。DESIGN.md §7） ---------- */
.eac-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); min-height: 64px; background: var(--eac-card); border-top: 1px solid var(--eac-border); }
.eac-sticky .eac-btn { flex: 1; }
@media (min-width: 768px) { .eac-sticky { display: none; } }
body.has-eac-sticky { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { body.has-eac-sticky { padding-bottom: 0; } }

/* ---------- スマホ下固定ナビ（§4-5） ---------- */
.eac-bnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: grid; grid-template-columns: repeat(4, 1fr); height: calc(56px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--eac-card); border-top: 1px solid var(--eac-border); }
.eac-bnav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--eac-text); text-decoration: none; font-size: 11px; font-weight: 600; }
.eac-bnav svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.eac-bnav a[aria-current="page"] { font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) { .eac-bnav { display: none; } }
body.has-eac-bnav { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { body.has-eac-bnav { padding-bottom: 0; } }

/* ---------- はじめ方（§4-6） ---------- */
.eac-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: 10px; counter-reset: eacstep; }
@media (min-width: 1024px) { .eac-steps.wide { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.eac-steps > li { position: relative; padding: 14px 14px 14px 52px; border: 1px solid var(--eac-border); border-radius: 12px; background: var(--eac-card); counter-increment: eacstep; }
.eac-steps > li::before { content: counter(eacstep); position: absolute; left: 14px; top: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--eac-raised); color: var(--eac-text); font-family: var(--eac-mono); font-weight: 750; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.eac-steps b { display: block; font-size: 15px; font-weight: 650; }
.eac-steps span { display: block; margin-top: 2px; font-size: 14px; color: var(--eac-muted); line-height: 1.6; }
.eac-steps a { color: var(--eac-text); }
.eac-fab { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 56; min-height: 44px; padding: 10px 18px; border-radius: 40px; border: 1px solid var(--eac-border-light); background: var(--eac-card); color: var(--eac-text); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; }
body.has-eac-bnav .eac-fab { bottom: calc(68px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { body.has-eac-bnav .eac-fab { bottom: 16px; } }
body.has-eac-sticky .eac-fab { bottom: calc(80px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { body.has-eac-sticky .eac-fab { bottom: 16px; } }
.eac-panel { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: flex-end; background: rgba(0, 0, 0, .45); }
.eac-panel[hidden] { display: none; }
.eac-panel-body { width: min(440px, 100%); height: 100%; overflow-y: auto; padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); background: var(--eac-canvas); color: var(--eac-text); }
.eac-panel-body h2 { margin: 0; font-size: 20px; font-weight: 700; }
.eac-panel-body h3 { margin: 20px 0 8px; font-size: 15px; font-weight: 650; }
.eac-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.eac-panel-body details { border-bottom: 1px solid var(--eac-border); }
.eac-panel-body summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: 15px; font-weight: 600; }
.eac-panel-body details p { margin: 0 0 12px; font-size: 14px; line-height: 1.7; color: var(--eac-muted); }
.eac-panel-body ul.links { margin: 0; padding: 0; list-style: none; }
.eac-panel-body ul.links a { display: flex; align-items: center; min-height: 44px; color: var(--eac-text); }
.eac-scrolltop { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 56; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--eac-border-light); background: var(--eac-card); color: var(--eac-text); font-size: 18px; cursor: pointer; }
.eac-scrolltop[hidden] { display: none; }
body.has-eac-bnav .eac-scrolltop { bottom: calc(68px + env(safe-area-inset-bottom)); }
body.has-eac-sticky .eac-scrolltop { bottom: calc(80px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { body.has-eac-bnav .eac-scrolltop, body.has-eac-sticky .eac-scrolltop { bottom: 16px; } }