/*
 * 図鑑「個体評価」タブ(js/individualEvaluate.js)専用のスタイル。
 * ポケモン1体分の入力ボード自体はjs/individualCompare.jsのcreateBoard()をそのまま流用する
 * ため、ボード内部の見た目はcss/individualCompare.css(.cmp-board以下)がそのまま効く。
 * ここでは「個体評価」だけのレイアウト・結果カード・複数体比較専用チップ(バッジ/複製/
 * 削除/並べ替え)の非表示化を持つ。
 *
 * .cmp-board-single配下のルールは、同じくcreateBoard()を単体表示で使う
 * js/box.js(ボックスタブ)のモーダルにもそのまま適用される(box.cssではなく
 * ここに置いているのは、.cmp-board-singleを最初に定義したのがこのファイルのため)。
 */

.cmp-eval-tool{ padding:12px 0 0; }

/* 個体比較の複数枠UI向けボタン(バッジ・複製・削除・左右移動)は個体評価では使わないため隠す。
   保存/読込ボタンは個体比較と共有のセッション保存と繋がっていて便利なので残す。 */
.cmp-board-single [data-badge],
.cmp-board-single [data-act="dup"],
.cmp-board-single [data-act="remove"],
.cmp-board-single [data-act="move-left"],
.cmp-board-single [data-act="move-right"]{
  display:none;
}

/* ---- 上段: ボード(個体比較のカードサイズを踏襲、横は半分くらい)+「求めるもの」を隣に ----
   .cmp-board自身の flex:0 0 calc(44% - 4px)(css/individualCompare.css)は親がflex
   コンテナのときだけ効く宣言で、data-board-mountは素のブロック要素なので影響しない
   (=何もしないとフル幅になる)。ここでは.cmp-eval-board-col側の幅で「半分くらい」を作る。 */
.cmp-eval-top{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:flex-start;
}
.cmp-eval-board-col{
  flex:1 1 280px;
  max-width:50%;
  min-width:0;
}
.cmp-eval-goal-col{
  flex:1 1 200px;
  min-width:0;
}
/* 狭い画面では50%制約だと窮屈すぎるので外し、縦積みに任せる */
@media (max-width:520px){
  .cmp-eval-board-col{ max-width:none; }
}

.cmp-eval-hint{
  margin:6px 0 0;
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
}
.cmp-eval-board-col > .cmp-eval-hint{ margin:0 0 6px; }

/* ---- ヒント文+リセットボタンを1行に(ボードのすぐ上) ---- */
.cmp-eval-board-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:0 0 6px;
}
.cmp-eval-board-head > .cmp-eval-hint{ margin:0; }

/* ---- 「求めるもの」をカード状のボタンで縦に並べる(右列はボードより余りやすいため
   全体的に詰め気味にする) ---- */
.cmp-eval-goal-cards{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.cmp-eval-goal-card{
  font:inherit;
  font-size:var(--fs-sm);
  font-weight:700;
  padding:8px 12px;
  border:2px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--paper);
  color:var(--ink);
  cursor:pointer;
  text-align:center;
  transition:background-color .12s ease, border-color .12s ease, color .12s ease;
}
.cmp-eval-goal-card:hover{ background:var(--paper-dim); }
.cmp-eval-goal-card.active{
  border-color:var(--selected-border);
  background:var(--selected-bg);
  color:var(--selected-ink);
}
.cmp-eval-goal-card:disabled{ opacity:.45; cursor:default; background:var(--paper); }

/* ---- 点数カード: 「求めるもの」カードの下の余白を使い、カード1の百分位を
   遊び心のある「N点」として再掲する(N=100-上位X%=percentile*100)。
   右列(求めるもの+この点数カード)はボードよりコンテンツ量が少なく余りやすいので、
   高さを合わせにいくのではなく余白・文字サイズを詰めてコンパクトにする方針。 ---- */
.cmp-eval-score-card{
  margin-top:12px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--paper);
  text-align:center;
}
.cmp-eval-score-label{
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
}
.cmp-eval-score-num-row{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:6px;
  margin-top:2px;
}
.cmp-eval-score-num-row[hidden]{ display:none; }
.cmp-eval-score-num{
  font-size:1.5rem;
  font-weight:800;
  /* --accent-inkは「アクセント色(黄)の地の上に置く」前提の色で、この地(--paper)の
     上では暗いテーマだと沈んで見えなくなる。--selected-bgはpaper系の背景に対して
     どちらのテーマでも視認性が出るよう定義されているのでこちらを使う。 */
  color:var(--selected-bg);
}
/* ---- 食材集め目的の2軸表示: 性格・サブスキル点/食材配列点を同じカード幅の中で
   左右に並べる(結果カードのサイズ自体は変えない)。 ---- */
.cmp-eval-score-dual{
  display:flex;
  gap:8px;
  margin-top:2px;
}
.cmp-eval-score-dual[hidden]{ display:none; }
.cmp-eval-score-dual-col{
  flex:1 1 0;
  min-width:0;
}
.cmp-eval-score-dual-label{
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
}
/* 「食材について」リンク。点数の数値の下に小さく添えるだけなのでボタンらしい装飾はしない */
.cmp-eval-score-detail-btn{
  display:block;
  margin:2px auto 0;
  font:inherit;
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--info);
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
}
.cmp-eval-score-detail-btn:hover{ text-decoration:underline; }
.cmp-eval-score-note{
  margin:6px 0 0;
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
  text-align:left;
  line-height:1.45;
}
.cmp-eval-score-note-strong{
  color:var(--danger);
  font-weight:800;
}
/* Discord誘導ボタン。index.htmlのdiscord-announce-btnと同じ配色・アイコンを
   個体評価タブ側にも複製する(共有CSSファイルに無いため)。 */
.cmp-eval-discord-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:8px;
  margin-top:6px;
  border-radius:var(--radius-md);
  background:#5865F2;
  color:#fff;
  font-size:var(--fs-sm);
  font-weight:800;
  text-decoration:none;
  box-sizing:border-box;
}
.cmp-eval-discord-btn:active{ background:#4752C4; }
.cmp-eval-discord-icon{ width:18px; height:18px; flex:none; }

.cmp-eval-card{
  margin-top:16px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--paper-dim);
}
.cmp-eval-card .cmp-graph-title{ text-align:left; margin-bottom:8px; }

/* ---- カード1: 累積出現確率×強さの折れ線+今回の個体の位置を示す縦線 ----
   個体比較の既存バー(buildBarVertical/buildSumEnergyCard)は複数個体の比較・食材の内訳用の
   形なので、単一個体の分布内位置を示すこの用途には合わず新規に作る。 */
.cmp-eval-hist-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.cmp-eval-hist-head .cmp-graph-title{ margin:0; text-align:left; }
.cmp-eval-hist-gold-control{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
}
.cmp-eval-hist-gold-control .cmp-eval-gacha-label{ font-size:var(--fs-2xs); }
.cmp-eval-hist-gold-control .cmp-eval-gacha-seg button{
  min-width:28px;
  padding:3px 7px;
}
.cmp-eval-hist-layout{
  display:flex;
  align-items:stretch;
  gap:6px;
}
.cmp-eval-hist-yaxis{
  position:relative;
  display:flex;
  flex:0 0 5.5em;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-end;
  padding-left:1.35em;
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
  line-height:1.15;
  text-align:right;
}
.cmp-eval-hist-yaxis::before{
  content:'強さ';
  position:absolute;
  top:50%;
  left:0;
  transform:translateY(-50%);
  writing-mode:vertical-rl;
  letter-spacing:.08em;
}
.cmp-eval-hist{ position:relative; flex:1 1 auto; min-width:0; height:100px; }
.cmp-eval-hist-svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}
.cmp-eval-hist-line{
  fill:none;
  stroke:var(--info);
  stroke-width:2;
}
.cmp-eval-hist-separator{
  stroke:var(--ink-soft);
  stroke-width:1;
  stroke-dasharray:2 2;
  opacity:.7;
}
.cmp-eval-hist-band{ pointer-events:none; }
.cmp-eval-hist-band-blue{ fill:var(--info); opacity:.16; }
.cmp-eval-hist-band-gold{ fill:var(--accent); opacity:.24; }
.cmp-eval-hist-marker{
  stroke:var(--accent);
  stroke-width:2;
  stroke-dasharray:3 2;
}
.cmp-eval-hist-marker-label{
  position:absolute;
  top:-18px;
  left:0;
  z-index:2;
  transform:translateX(-50%);
  padding:1px 3px;
  border-radius:4px;
  background:var(--paper);
  color:var(--accent);
  font-size:var(--fs-2xs);
  font-weight:800;
  letter-spacing:.05em;
  line-height:1.2;
  white-space:nowrap;
  pointer-events:none;
}
.cmp-eval-hist-marker-label.is-edge-left{ transform:none; }
.cmp-eval-hist-marker-label.is-edge-right{ transform:translateX(-100%); }
.cmp-eval-hist-marker.is-glow{
  filter:drop-shadow(0 0 4px var(--accent));
  animation:cmp-eval-hist-marker-glow .9s ease-out both;
}
@keyframes cmp-eval-hist-marker-glow{
  0%,100%{ opacity:1; }
  35%{ opacity:.55; filter:drop-shadow(0 0 8px var(--accent)); }
}
.cmp-eval-hist-gacha-pill{
  position:absolute;
  z-index:3;
  display:grid;
  width:20px;
  height:20px;
  place-items:center;
  border:2px solid var(--paper);
  border-radius:50%;
  background:var(--gacha-marker-color);
  box-shadow:0 1px 3px rgb(0 0 0 / 25%);
  color:#fff;
  font-size:var(--fs-2xs);
  font-weight:900;
  line-height:1;
  transform:translate(-50%,-50%);
  pointer-events:none;
  user-select:none;
}
.cmp-eval-hist-gacha-pill.is-entering{
  animation:cmp-eval-hist-gacha-pill-in .42s cubic-bezier(.2,.85,.35,1.25) both;
}
@keyframes cmp-eval-hist-gacha-pill-in{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.2); }
  45%{ opacity:1; transform:translate(-50%,-50%) scale(1.35); }
  72%{ transform:translate(-50%,-50%) scale(.9); }
  100%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
}
.cmp-eval-gauge-scale{
  display:flex;
  justify-content:space-between;
  margin-top:4px;
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
}
.cmp-eval-hist-segment-legend{
  display:flex;
  flex-wrap:wrap;
  gap:3px 10px;
  margin-top:4px;
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
}
.cmp-eval-hist-segment-item{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.cmp-eval-hist-segment-item::before{
  content:'';
  width:10px;
  height:2px;
  background:var(--info);
}
.cmp-eval-hist-segment-item.is-same::before{ background:var(--accent); }
.cmp-eval-gauge-reference{
  display:flex;
  flex-wrap:wrap;
  gap:4px 10px;
  margin-top:5px;
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
}
.cmp-eval-gauge-reference-item{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.cmp-eval-gauge-reference-item::before{
  content:'';
  width:8px;
  height:8px;
  border-radius:2px;
  background:currentColor;
  opacity:.8;
}
.cmp-eval-gauge-reference-item.is-blue{ color:var(--info); }
.cmp-eval-gauge-reference-item.is-gold{ color:var(--accent); }

/* ---- 個体ガチャ: きのみガチャと同じ暖色の実行ボタン・区切られた設定欄を使い、
   抽選結果はおてつだいシミュのシェアモードに寄せたコンパクトな個体カードで並べる。 ---- */
.cmp-eval-gacha-open,
.cmp-eval-gacha-start{
  border:0;
  border-radius:var(--radius-md);
  color:#fff;
  background:linear-gradient(135deg, #FF7A59, #FFB648);
  box-shadow:0 5px 12px rgba(255, 122, 89, .3);
  font:inherit;
  font-weight:900;
  cursor:pointer;
}
.cmp-eval-gacha-open{
  width:100%;
  margin-top:10px;
  padding:10px 16px;
  font-size:var(--fs-sm);
  letter-spacing:.05em;
}
.cmp-eval-gacha-open.is-open{ box-shadow:none; transform:translateY(1px); }
.cmp-eval-gacha-panel{
  margin-top:8px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--paper);
}
.cmp-eval-gacha-panel[hidden],
.cmp-eval-gacha-results[hidden]{ display:none !important; }
.cmp-eval-gacha-panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
  font-weight:800;
  color:var(--ink);
}
.cmp-eval-gacha-modal .modal-card{
  max-width:min(94vw, 760px);
  padding:14px;
}
.cmp-eval-gacha-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:0 0 8px;
  padding-right:34px;
  font-weight:800;
  color:var(--ink);
}
.cmp-eval-gacha-modal-body > [data-gacha-graph-content]{
  margin-bottom:8px;
}
.cmp-eval-gacha-modal-body > [data-gacha-inline-ui]{
  display:block;
}
.cmp-eval-gacha-modal-body .cmp-eval-gacha-panel{
  margin-top:0;
}
.cmp-eval-gacha-close{
  padding:2px 8px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--paper-dim);
  color:var(--ink-soft);
  font:inherit;
  font-size:var(--fs-2xs);
  cursor:pointer;
}
.cmp-eval-gacha-control{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.cmp-eval-gacha-control + .cmp-eval-gacha-control{ margin-top:8px; }
.cmp-eval-gacha-label{
  flex:none;
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--ink-soft);
}
.cmp-eval-gacha-seg{
  display:flex;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
}
.cmp-eval-gacha-seg button{
  min-width:36px;
  padding:5px 9px;
  border:0;
  border-left:1px solid var(--line);
  background:var(--paper-dim);
  color:var(--ink-soft);
  font:inherit;
  font-size:var(--fs-xs);
  font-weight:800;
  cursor:pointer;
}
.cmp-eval-gacha-seg button:first-child{ border-left:0; }
.cmp-eval-gacha-seg button.active{
  background:var(--selected-bg);
  color:var(--selected-ink);
}
.cmp-eval-gacha-note{
  margin:10px 0 0;
  font-size:var(--fs-2xs);
  line-height:1.4;
  color:var(--ink-soft);
}
.cmp-eval-gacha-start{
  display:block;
  width:100%;
  margin-top:10px;
  padding:10px 16px;
  letter-spacing:.05em;
}
.cmp-eval-gacha-start:active{ transform:translateY(1px); box-shadow:0 2px 6px rgba(255, 122, 89, .25); }
.cmp-eval-gacha-results{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--line);
}
.cmp-eval-gacha-results-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
  font-size:var(--fs-xs);
}
.cmp-eval-gacha-results-head strong{ color:var(--ink); }
.cmp-eval-gacha-results-head span{ color:var(--ink-soft); font-size:var(--fs-2xs); }
.cmp-eval-gacha-share-boards{
  display:flex;
  overflow-x:auto;
  gap:8px;
  padding:2px 2px 8px;
  scroll-snap-type:x proximity;
  overscroll-behavior-inline:contain;
}
.cmp-eval-gacha-share-boards::-webkit-scrollbar{ height:6px; }
.cmp-eval-gacha-share-boards::-webkit-scrollbar-thumb{
  border-radius:var(--radius-pill);
  background:var(--line);
}
.cmp-eval-gacha-share-card{
  flex:0 0 min(180px, 76vw);
  scroll-snap-align:start;
  min-width:0;
  padding:7px;
  border:1px solid var(--gacha-marker-color);
  border-radius:var(--radius-md);
  background:var(--paper);
}
.cmp-eval-gacha-share-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:5px;
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  font-weight:800;
}
.cmp-eval-gacha-share-badge{
  display:grid;
  width:20px;
  height:20px;
  place-items:center;
  border-radius:50%;
  background:var(--gacha-marker-color);
  color:#fff;
}
.cmp-eval-gacha-share-identity{
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
  padding-bottom:5px;
  border-bottom:1px solid var(--line);
  font-size:var(--fs-xs);
  font-weight:800;
  color:var(--ink);
}
.cmp-eval-gacha-share-identity img{ width:25px; height:25px; object-fit:contain; flex:none; }
.cmp-eval-gacha-share-identity span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmp-eval-gacha-share-card.is-entering{
  animation:cmp-eval-gacha-card-in .32s ease-out both;
}
@keyframes cmp-eval-gacha-card-in{
  from{ opacity:0; transform:translateX(14px) scale(.98); }
  to{ opacity:1; transform:none; }
}
.cmp-eval-gacha-share-ingredients{
  display:flex;
  flex-wrap:wrap;
  gap:3px;
  margin-top:6px;
}
.cmp-eval-gacha-share-ing{
  display:inline-flex;
  align-items:center;
  gap:2px;
  max-width:100%;
  padding:2px 4px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--paper-dim);
  color:var(--ink-soft);
  font-size:10px;
  line-height:1.2;
}
.cmp-eval-gacha-share-ing img{ width:15px; height:15px; object-fit:contain; flex:none; }
.cmp-eval-gacha-share-ing span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmp-eval-gacha-share-subskills{
  display:flex;
  flex-wrap:wrap;
  gap:3px;
  margin-top:6px;
}
.cmp-eval-gacha-share-sub{
  display:inline-flex;
  align-items:center;
  gap:2px;
  max-width:100%;
  padding:2px 4px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--paper-dim);
  font-size:10px;
  line-height:1.2;
  color:var(--ink-soft);
}
.cmp-eval-gacha-share-sub.is-gold{ border-color:var(--accent); color:var(--accent); }
.cmp-eval-gacha-share-sub.is-blue{ border-color:var(--info); color:var(--info); }
.cmp-eval-gacha-share-sub.is-white{ border-color:var(--ink-soft); color:var(--ink); }
.cmp-eval-gacha-share-nature,
.cmp-eval-gacha-share-score{
  margin-top:6px;
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
}
.cmp-eval-gacha-share-nature{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
}
.cmp-eval-gacha-share-nature-mods{
  display:inline-flex;
  align-items:center;
  gap:3px;
}
.cmp-eval-gacha-share-nature-mods .cmp-skill-icon{ width:14px; height:14px; }
.cmp-eval-gacha-share-nature-plain{
  padding:1px 3px;
  border:1px solid currentColor;
  border-radius:4px;
  font-size:10px;
  font-weight:800;
  line-height:1.1;
}
.cmp-eval-gacha-share-nature-plain.is-up{ color:var(--danger); }
.cmp-eval-gacha-share-nature-plain.is-down{ color:var(--info); }
.cmp-eval-gacha-share-score{ font-weight:800; color:var(--ink); }
@media (max-width:420px){
  .cmp-eval-gacha-control{ align-items:flex-start; flex-direction:column; gap:4px; }
}
.cmp-eval-readout{
  margin-top:8px;
  font-size:var(--fs-md);
  font-weight:700;
  color:var(--ink);
  text-align:center;
}
.cmp-eval-note{
  margin:8px 0 0;
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
}

/* ---- 食材/スキルの競合(横棒ランキング)共通 ---- */
.cmp-eval-ing-block + .cmp-eval-ing-block{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.cmp-eval-ing-head{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:6px;
}
.cmp-eval-ing-icon{
  width:22px;
  height:22px;
  object-fit:contain;
  flex:none;
}
.cmp-eval-ing-label{
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--ink);
}
.cmp-eval-ing-jump{ flex:none; margin-left:auto; }

.cmp-eval-rank-row{
  display:grid;
  grid-template-columns:2.2em 1.4em 5em 1fr 4.2em;
  align-items:center;
  gap:6px;
  padding:2px 0;
  font-size:var(--fs-2xs);
}
.cmp-eval-rank-row.is-mine{ font-weight:700; color:var(--ink); }
.cmp-eval-rank-num{ color:var(--ink-soft); }
.cmp-eval-rank-icon{
  width:18px;
  height:18px;
  object-fit:contain;
}
.cmp-eval-rank-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cmp-eval-rank-track{
  display:block;
  height:8px;
  border-radius:var(--radius-pill);
  background:var(--paper);
}
.cmp-eval-rank-fill{
  display:block;
  height:100%;
  border-radius:var(--radius-pill);
  background:var(--info);
}
.cmp-eval-rank-row.is-mine .cmp-eval-rank-fill{ background:var(--accent); }
.cmp-eval-rank-val{ text-align:right; color:var(--ink-soft); }

/* ---- カード2: 金枠0/1/2/3の「N回以内に出現する確率」曲線+軸の数値目盛り ---- */
.cmp-eval-linechart{
  margin-top:10px;
}
.cmp-eval-linechart-wrap{
  display:flex;
  gap:6px;
}
.cmp-eval-linechart-yaxis{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-end;
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
  padding:2px 0;
}
.cmp-eval-linechart-plot{
  flex:1 1 auto;
  min-width:0;
}
.cmp-eval-linechart-svg{
  width:100%;
  height:100px;
  display:block;
  overflow:visible;
}
.cmp-eval-linechart-svg polyline{
  fill:none;
  stroke-width:2;
}
.cmp-eval-linechart-xaxis{
  display:flex;
  justify-content:space-between;
  margin-top:4px;
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
}
/* ---- カード2見出し: 金枠0/1/2/3それぞれの1回あたり確率(色は折れ線と対応) ---- */
.cmp-eval-rarity-list{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:6px;
}
.cmp-eval-rarity-item{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:var(--fs-xs);
  color:var(--ink);
}
.cmp-eval-rarity-item i{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  flex:none;
}

/* ---- 「食材について」モーダル: ①点数の内訳(基礎点×倍率の項を積み上げ)と
   ②食材数比較(AAA/AAB/AAC/ABB/ABCの5パターン、積み上げ横棒)。
   .overlay-modal/.modal-card/.modal-closeは共有シェル(css/tokens.css)をそのまま使う。 ---- */
.cmp-eval-ingdetail-card{ max-width:min(92vw, 440px); }
.cmp-eval-detail-title{
  font-weight:800;
  margin:0 0 12px;
}
.cmp-eval-qty-section-label{ margin-top:16px; }

.cmp-eval-breakdown-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 0;
  font-size:var(--fs-xs);
}
.cmp-eval-breakdown-icon{ width:22px; height:22px; object-fit:contain; flex:none; }
.cmp-eval-breakdown-formula{ color:var(--ink-soft); }
.cmp-eval-breakdown-val{ margin-left:auto; font-weight:800; color:var(--ink); white-space:nowrap; }
.cmp-eval-breakdown-sum{
  margin-top:4px;
  padding-top:6px;
  border-top:1px solid var(--line);
  text-align:right;
  font-weight:800;
  color:var(--ink);
}

.cmp-eval-qty-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px 0;
}
.cmp-eval-qty-label{
  flex:0 0 3em;
  font-size:var(--fs-2xs);
  font-weight:700;
  color:var(--ink-soft);
}
.cmp-eval-qty-track{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  height:22px;
  border-radius:var(--radius-sm, 6px);
  overflow:hidden;
  background:var(--paper-dim);
}
.cmp-eval-qty-seg{
  display:flex;
  align-items:center;
  gap:3px;
  flex:0 0 auto;
  min-width:22px;
  padding:0 4px;
  overflow:hidden;
  white-space:nowrap;
  color:#fff;
  font-size:var(--fs-2xs);
  font-weight:700;
}
.cmp-eval-qty-seg.seg-A{ background:var(--info); }
.cmp-eval-qty-seg.seg-B{ background:var(--success); }
.cmp-eval-qty-seg.seg-C{ background:var(--accent); }
.cmp-eval-qty-icon{ width:14px; height:14px; object-fit:contain; flex:none; }
.cmp-eval-qty-val{ overflow:hidden; text-overflow:ellipsis; }
.cmp-eval-qty-total{
  flex:0 0 auto;
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
  white-space:nowrap;
}