/* 🗂️マスタ管理（支払方法・コード・投信銘柄ほか） */

/* ============================================================
   支払方法カードグリッド
   ============================================================ */
.mp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(164px, 100%), 1fr));
  gap: 12px;
  margin-top: 12px;
}
.mp-grid--ended {
  opacity: 0.48;
}
.mp-card {
  position: relative;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px 12px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
  background: var(--color-surface);
  overflow: hidden;
}
.mp-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--mp-color, #90a4ae);
}
.mp-card:hover {
  border-color: var(--mp-color, #94a3b8);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.mp-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.mp-link-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  font-size: var(--text-3xs);
  font-weight: var(--fw-bold);
  background: var(--color-border);
  color: var(--color-text-muted);
  cursor: default;
  vertical-align: middle;
  transition: background 0.15s, color 0.15s;
}
.mp-link-badge:hover {
  background: var(--color-primary);
  color: var(--color-text-on-accent);
}

/* ── カスタムツールチップ ─────────────────────────────── */
/* 支払方法などのモーダルは共通の部品（css/parts/modal.css の .md-* と .fxc-stack） */

/* ── マスタ管理タブ ─────────────────────────────────────── */
.mst-head h2 {
  margin: 0 0 4px;
}
.mst-lead {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin: 0 0 var(--sp-4);
}
/* セグメント切替（トラック＋白い可動サム） */
.mst-seg {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-4);
  max-width: 100%;
  overflow-x: auto;
}
.mst-seg-btn {
  appearance: none;
  border: none;
  background: transparent;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  padding: 7px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.mst-seg-btn:hover {
  color: var(--color-text);
}
.mst-seg-btn.active {
  background: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.mst-seg-count {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  margin-left: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  text-align: center;
}
.mst-seg-btn.active .mst-seg-count {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.mst-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.mst-toolbar input[type="search"] {
  flex: 0 1 260px;
  padding: 7px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--text-xs);
  background: var(--color-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mst-toolbar input[type="search"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.mst-msg {
  font-size: var(--text-sm);
}
.mst-hint {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin: 0 0 var(--sp-3);
}
/* 一覧行 */
.mst-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mst-rows--grid {
  display: grid;
  /* 名前＋CD＋ピル2つ＋ボタンが入る幅。280px だとピルが「支…」まで潰れて読めない */
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
  gap: 6px 10px;
}
/* 支払方法用。**行が切り詰めなしで必要とする幅で決める**。編集アイコンを外し、
   上限を1520pxへ広げた結果、一番広い行（ビックカメラSuicaカード＝459px）に対して
   3列でも1列463pxが取れるようになった。9割の行は349pxで足りるので余裕は十分。
   狭い画面では自動で2列・1列に落ちる。 */
.mst-rows--grid-lg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr));
  gap: 6px 10px;
}
.mst-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.mst-row:hover {
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.mst-row--dragging {
  opacity: 0.4;
}
.mst-row--over {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.mst-handle {
  color: var(--color-text-subtle);
  font-size: var(--text-2xs);
  letter-spacing: -2px;
  cursor: grab;
  user-select: none;
}
.mst-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-circle);
  flex-shrink: 0;
}
.mst-dot--payee {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-md);
}
.mst-row-name {
  /* 名前が主役＝残り幅を取って自分は縮まない。ピル（使用件数・N年未使用）を先に縮める。
     これが無いと、ピルが増えたときに名前だけが幅0まで潰れて消える */
  flex: 1 1 auto;
  min-width: 4.5em;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mst-cd {
  flex-shrink: 0;
  font-size: var(--text-3xs);
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}
.mst-pill {
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
  white-space: nowrap;
}
.mst-pill--free {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.35);
  color: var(--color-success-text);
}
.mst-empty {
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
  padding: var(--sp-4) 0;
}
/* 支払先のカテゴリ別グループ（グループは実績からの導出＝マスタの設定ではない） */
/* ── グループ ────────────────────────────────────────────────
   **見出しだけを別のバーにせず、器の中に入れる**（休止中エリア `.mst-paused` と
   同じ作り）。見出しを独立したバーにすると、器の色をどこに置いても行の帯と
   二重になったり、枠の角で切れ端に見えたりした。器なら境界は器自身が引く。
   左のアクセントは `.kpi-card::before` と同じ**絶対配置の棒**＝`border-left` だと
   角丸と太さの違う枠の交点でテーパーが出る。 */
.mst-group {
  position: relative;
  margin-top: var(--sp-3);
  padding: 10px 12px 10px 15px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  /* アクセントの棒を器の角丸で切り抜く（.kpi-card と同じ作り）＝棒の端が
     器のカーブに沿うので、宙に浮いた切れ端に見えない */
  overflow: hidden;
  transition: border-color 0.15s;
}
.mst-group:first-child { margin-top: 0; }
/* 畳んだグループが続くときは詰める＝行ぶんの余白が残ると間延びする */
.mst-group:not([open]) + .mst-group { margin-top: 6px; }
/* 別の区画として置くもの（廃止済みなど）は、ひとつぶん大きく空ける。
   隣接セレクタに頼らないのは、支払方法の廃止済みが現役の一覧（#mp-live）の
   **外**にあり `.mst-group + .mst-group` が当たらないため。 */
.mst-group--section { margin-top: var(--sp-6); }

.mst-group::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--group-color, var(--color-border));
}

.mst-group > summary {
  cursor: pointer;
  list-style: none;
}
.mst-group > summary::-webkit-details-marker { display: none; }
.mst-group > summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

.mst-group-head {
  display: flex;
  align-items: center;
  gap: 9px;
  position: relative;
  padding-right: 34px;   /* 右端の開閉ボタンのぶん */
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  white-space: nowrap;   /* 見出しは折らず、註釈のほうを詰める（狭い画面で「横断」が割れる） */
}
.mst-group[open] > .mst-group-head { margin-bottom: 10px; }
.mst-group-head:hover { color: var(--color-primary); }

/* 日の明細モーダルは**文字の列が左**（読む表の既定は右寄せだが、ここは見出しを
   左に置いているので本体だけ右だと頭とお尻が合わない）。金額はインラインで
   text-align:right を持たせてあるのでそちらが勝つ。 */
#cal-modal-table th, #cal-modal-table td { text-align: left; }
#cal-modal-table th.r, #cal-modal-table td.r { text-align: right; }   /* 金額は見出しも右 */

/* 開閉は**見出しの右端の丸**。左に置くと行頭記号（リストの点）に見えてしまう。
   丸は ::before（受け皿）、シェブロンは ::after（線）で描く。 */
.mst-group-head::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: var(--radius-circle);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: background 0.15s, border-color 0.15s;
}
.mst-group-head:hover::before {
  border-color: var(--color-primary-border);
  background: var(--color-primary-light);
}
.mst-group-head::after {
  content: "";
  position: absolute;
  right: 7.5px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.7px solid var(--color-text-muted);
  border-bottom: 1.7px solid var(--color-text-muted);
  transform: translateY(-5px) rotate(45deg);
  transition: transform 0.18s ease, border-color 0.15s;
}
.mst-group:not([open]) > .mst-group-head::after {
  transform: translateY(-3px) translateX(-1.5px) rotate(-45deg);
}
.mst-group-head:hover::after { border-color: var(--color-primary); }
.mst-group-count {
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);   /* バーの面より明るく＝数字が沈まない */
  border: 1px solid var(--color-border);
  font-size: var(--text-3xs);
  font-weight: var(--fw-bold);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
/* 見出しの名前。**色の点は置かない**＝色を持てるペイン（支払先・支払方法）と
   持てないペイン（祝日の年など）でラベルの左端が17pxずれていた。色は行の左端の帯が持つ。 */
.mst-group-name { flex-shrink: 0; }
/* 合計は右端へ（固定費の .fxc-group-sum を共通見出しへ持ってきたもの） */
.mst-group-spacer { flex: 1; }
.mst-group-sum {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 「設定が必要」「コード未設定」のように、行の中で埋もれると困る注意書き。
   幅のある行ではメタ行に混ぜず、左のチップとして独立させる */
.mst-warn {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(245, 158, 11, 0.16);
  color: var(--color-warning-text);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

/* 廃止済みは畳んだうえで、開いても現役と見分けがつくよう淡くする */
.mp-rows--ended { opacity: 0.6; }

.mst-group-note {
  flex: 1;
  min-width: 0;   /* これが無いと縮まず、見出しのほうが折り返される */
  font-size: var(--text-2xs);
  font-weight: var(--fw-normal);
  color: var(--color-text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 整理モード（一括休止）のバー */
.mst-chip {
  padding: 6px 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  white-space: nowrap;
}
.mst-chip:hover:not(:disabled) {
  border-color: var(--color-primary-border);
  color: var(--color-primary);
}
.mst-chip:disabled {
  opacity: 0.45;
  cursor: default;
}
.mst-chip.active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.mst-selbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
  padding: 10px 12px;
  border: 1.5px solid var(--color-primary-border);
  border-radius: var(--radius-lg);
  background: var(--color-primary-light);
}
.mst-selbar-chips,
.mst-selbar-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.mst-selbar-count {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
/* 整理モードでは CD と ✏️ を落とす＝行クリックは選択で、編集には入らないため。
   いま確かめたいのは「名前・いつまで使ったか・何件」だけ */
.mst-list--select .mst-cd {
  display: none;
}
/* 狭い画面ではさらに使用件数も落とす（「支出 …」と潰れるくらいなら出さない）。
   休止の判断で先に見るのは「いつまで使ったか」のほう */
@media (max-width: 560px) {
  .mst-list--select .mst-pill:not(.mst-pill--stale):not(.mst-pill--paused) {
    display: none;
  }
}
.mst-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  color: var(--color-text-on-accent);
}
.mst-check.on {
  border-color: var(--color-primary);
  background: var(--color-primary);
}
.mst-row--sel {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
/* 休止候補の目印。整理モードに入らなくても眺めているだけで候補が目に入る */
.mst-pill--stale {
  flex-shrink: 0;   /* 休止の判断材料なので、縮めるなら使用件数のほうを先に */
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.4);
  color: var(--color-warning-text);
}

/* グループ見出しに重なる落とし先。ドラッグ中だけ現れる（常設の入口は下の「休止中」で、
   こちらは遠い落とし先を手元に置くための近道）。ゴミ箱の絵柄(🗑)は使わない＝休止は削除
   ではないため。
   **見出しの高さを常に確保しておき、そこへ absolute で重ねる**＝ドラッグの最中に行が
   ずれない（掴んでいる最中に落とし先が動くと狙えない）。小さなピルではなく見出しの全幅を
   使うので、雑に落としても入る。 */
.mst-group-head {
  position: relative;
  min-height: 34px;
}
/* ドラッグ中だけ出る「休止」の落とし先。**見出し全体を落とし先にしない**＝
   見出しは器の中で行と地続きに並ぶので、リストの中で動かしているつもりで
   全幅（1306px）の休止ゾーンを踏んでしまう。狙って落とすチップに絞る。 */
.mst-drop {
  display: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 2px dashed var(--color-primary-border);
  border-radius: var(--radius-pill);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.mst-list--dragging .mst-drop {
  display: flex;
}
/* ドラッグ中は開閉ボタンを隠す＝落とし先と場所が重なるうえ、掴んでいる間は開閉しない */
.mst-list--dragging .mst-group-head::before,
.mst-list--dragging .mst-group-head::after {
  display: none;
}
.mst-drop.mst-zone--over {
  border-style: solid;
  background: var(--color-primary);
  color: var(--color-text-on-accent);
}

/* 休止中：常設のドロップ先。ここへ落とせば休止、ここから出せば復帰 */
.mst-live {
  border-radius: var(--radius-lg);
  transition: box-shadow 0.15s, background 0.15s;
}
.mst-paused {
  margin-top: var(--sp-5);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  background: var(--color-bg);
  transition: border-color 0.15s, background 0.15s;
}
.mst-paused > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--color-text-muted);
  list-style: revert;
}
.mst-paused[open] > summary {
  margin-bottom: 10px;
}
.mst-zone--over {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
/* 一番下の常設エリアも、ドラッグ中は畳んだままでも狙える大きさにする */
.mst-list--dragging .mst-paused {
  min-height: 92px;
  border-width: 2px;
  border-color: var(--color-primary-border);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.mst-list--dragging .mst-paused > summary {
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--color-primary);
}
.mst-row--paused {
  background: var(--color-bg);
  border-style: dashed;
}
.mst-row--paused .mst-row-name {
  color: var(--color-text-muted);
}
.mst-pill--paused {
  margin-left: auto;
  background: rgba(148, 163, 184, 0.14);
  border-color: rgba(148, 163, 184, 0.4);
  color: var(--color-text-muted);
}
.mst-pill--paused + .mst-pill {
  margin-left: 0;
}
.mst-empty--drop {
  text-align: center;
  padding: var(--sp-3) 0;
  font-size: var(--text-xs);
}
.mst-undo {
  margin-left: 10px;
  padding: 1px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.mst-undo:hover {
  border-color: var(--color-primary-border);
  color: var(--color-primary);
}
/* モーダルの休止月 */
.mst-endym-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mst-endym-hint {
  margin: 10px 0 0;
  font-size: var(--text-2xs);
  color: var(--color-text-subtle);
  line-height: 1.6;
}
/* 預かり区分だけが持つ「お知らせに1件ずつ出すか」。トグルは固定費と同じ .fxc-switch */
.mst-notify-row { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.mst-notify-lab { display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-text); }

.mst-subgroup {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 6px 2px;
  font-size: var(--text-2xs);
  font-weight: var(--fw-bold);
  color: var(--color-text-subtle);
}
.mst-subgroup:first-child { margin-top: 2px; }
.mst-subgroup-name { letter-spacing: 0.04em; }
.mst-subgroup-sum {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* 支払方法カードのドラッグ並び替え */
.mp-card--drag { cursor: grab; }
.mp-card--dragging { opacity: 0.4; }
.mp-card--over { box-shadow: 0 0 0 3px var(--color-primary-light); border-radius: var(--radius-xl); }

/* モーダル拡張（削除ボタンを左端に） */
.mst-modal-footer {
  justify-content: flex-start;
}
.mst-usage-line {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 10px;
}
.btn-danger-ghost {
  background: transparent;
  border: 1.5px solid rgba(239, 68, 68, 0.4);
  color: var(--color-danger-text);
}
.btn-danger-ghost:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.08);
  border-color: var(--color-danger-text);
}
.btn-danger-ghost:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* 他タブからの誘導リンク */
.mst-link {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  text-decoration: none;
}
.mst-link:hover {
  text-decoration: underline;
}
.mst-jump-note {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin: var(--sp-3) 0 0;
}

/* 有効カードピル */
.card-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  white-space: nowrap;
}
.card-pill-sub {
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
  font-weight: var(--fw-normal);
}

/* ============================================================
   マスタ管理: 投信銘柄
   支払方法カードと同じ「押せるカードの一覧」。1枚で状態（積立中/停止/終了）と
   コードの有無まで読めるようにして、開く前に何が足りないかを分かるようにする。
   ============================================================ */
.mst-fund-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
  gap: 12px;
}
.mst-fund-card {
  display: block; width: 100%; text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  padding: 14px 16px; cursor: pointer; font: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.mst-fund-card:hover {
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.mst-fund-top { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.mst-fund-name {
  flex: 1; min-width: 0; font-size: var(--text-base); font-weight: var(--fw-semibold);
  color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mst-fund-state {
  flex: 0 0 auto; font-size: var(--text-3xs); font-weight: var(--fw-bold);
  border-radius: var(--radius-pill); padding: 2px 8px;
}
.mst-fund-state--on { background: var(--color-success-light); color: #0d7a5f; }
.mst-fund-state--stop { background: rgba(245,158,11,0.16); color: #8a5a08; }
.mst-fund-state--off { background: rgba(148,163,184,0.18); color: var(--color-text-muted); }
.mst-fund-state--idle { background: var(--color-primary-light); color: var(--color-primary); }
.mst-fund-meta {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  font-size: var(--text-2xs); color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.mst-fund-codes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.mst-fund-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-3xs); color: var(--color-text-subtle);
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 1px 6px;
}
.mst-fund-nocode { font-size: var(--text-2xs); color: var(--color-warning-text); font-weight: var(--fw-semibold); }

/* 設定モーダルの削除ボタンは左端（誤爆しにくい位置） */
.fs-del { margin-right: auto; }
.btn.btn-danger { background: var(--color-danger); color: var(--color-text-on-accent); border: none; }
.btn.btn-danger:hover { background: #d63a3a; }

/* 月次入力: 約定日から引いた値の表示。日付が休場日だと単価が出せない */
.inv-derived-warn { color: var(--color-warning-text); }
/* 照会の月次テーブルに添える約定日 */
.inv-settle {
  margin-left: 6px; font-size: var(--text-3xs); color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}
/* 積立期間の外なのに実績の行がある月の印 */
.inv-outside {
  display: inline-block; font-size: var(--text-3xs); font-weight: var(--fw-bold);
  background: rgba(148,163,184,0.2); color: var(--color-text-muted);
  border-radius: var(--radius-md); padding: 1px 6px; margin-left: 6px; vertical-align: middle;
}

/* 投信銘柄カードのドラッグ並び替え（支払方法カードと同じ操作感） */
.mst-fund-card { position: relative; }
.mst-fund-grip {
  position: absolute; right: 10px; top: 10px;
  color: var(--color-text-subtle); font-size: var(--text-xs); letter-spacing: -2px;
  cursor: grab; opacity: 0; transition: opacity 0.15s;
}
.mst-fund-card:hover .mst-fund-grip { opacity: 1; }
.mst-fund-card--dragging { opacity: 0.45; }
.mst-fund-card--over {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* 約定日を候補で埋めている行の印（人が入れた値ではないことを見せる） */
.inv-suggest {
  display: inline-block; font-size: var(--text-3xs); font-weight: var(--fw-bold);
  background: var(--color-primary-light); color: var(--color-primary);
  border-radius: var(--radius-md); padding: 1px 6px; margin-left: 6px; vertical-align: middle;
}