/* 共通の部品：モーダル（.md-*）と、モーダルの中で使う欄の追加部品（.fxc-*）

   **アプリのモーダルはすべてこの作り**（以前は mpm-modal・fs-modal・sec-modal・FX の fxm・
   インラインの個別実装と5系統に分かれていて、ラベルの位置・閉じるボタン・足元が画面ごとに違った）。
   ・骨組み：見出し（タイトル＋添え書き＋×）／本文／足元（灰色の帯。左に削除、右にキャンセル・主な操作）
   ・欄は css/parts/form.css の .fxc-field / .fxc-input / .fxc-seg / .fxc-grid。**ラベルは必ず欄の上**
   ・数字の主役は .fxc-num（大きく等幅・右寄せ）、よく使う値は欄の下のチップ（.fxc-chips）、
     入力から分かること（見込み・増減）は面を変えた1行（.fxc-calc）、欄の補足は .fxc-hint
   ・説明つきの区切りは .md-sec（見出し .md-sec-t ＋説明 .md-sec-d）
   ・Enter で保存・Esc で閉じる・開いたら最初の欄へ（js/lib/form-controls.js の mdKey / mdOpen）
   ・狭い画面は下から出るシート
   見出しに絵文字は付けない（タイトルは文字で言う）。 */

.md-overlay {
  position: fixed; inset: 0; z-index: 2100; overflow-y: auto;
  background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(2px);
  display: flex; align-items: flex-start; justify-content: center; padding: 64px 16px 24px;
}
.md {
  width: 100%; max-width: 480px;
  background: var(--color-surface); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl, 0 20px 50px rgba(15,23,42,.25)); overflow: hidden;
  /* 背の高いモーダル（銘柄の設定など）は本文だけが流れる＝見出しと足元の保存ボタンは常に見える */
  display: flex; flex-direction: column; max-height: calc(100dvh - 88px);
  animation: mdUp .18s cubic-bezier(.22, 1, .36, 1);
}
@keyframes mdUp { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .md { animation: none; } }
.md--narrow { max-width: 400px; }
.md--wide { max-width: 720px; }
.md-head {
  flex-shrink: 0; display: flex; align-items: center; gap: 10px;
  padding: 16px 20px 14px; border-bottom: 1px solid var(--color-border);
}
.md-head-t { flex: 1; min-width: 0; }
.md-title, .md-head h3 { margin: 0; font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--color-text); }
.md-head > .md-title, .md-head > h3 { flex: 1; min-width: 0; }
.md-sub { margin-top: 3px; font-size: var(--text-2xs); color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
.md-sub span { color: var(--color-text-muted); letter-spacing: 0.01em; }
.md-x {
  flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: var(--radius-md); cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--color-text-muted);
}
.md-x:hover { background: var(--color-bg); color: var(--color-text); }
.md-body { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; min-height: 0; }
.md-foot {
  flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap;
  padding: 12px 20px; border-top: 1px solid var(--color-border); background: var(--color-bg);
}
.md-foot-l { margin-right: auto; display: flex; align-items: center; gap: 10px; }
.md-del { margin-right: auto; font-size: var(--text-xs); }
.md-err { margin-right: auto; font-size: var(--text-xs); color: var(--color-danger-text); }
.md-del + .md-err, .md-foot-l + .md-err { margin-right: 0; }

/* 説明つきの区切り（投信の銘柄設定の作りを部品にしたもの） */
.md-sec { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.md-body > .md-sec:first-child { padding-top: 0; border-top: none; }
.md-sec-t { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--color-text); }
.md-sec-d { margin-top: -6px; font-size: var(--text-2xs); line-height: 1.7; color: var(--color-text-muted); }
.md-sec-d b { color: var(--color-text); font-weight: var(--fw-semibold); }

/* ── モーダルの中の欄の追加部品（.fxc-* の仲間） ── */
.fxc-field > label em, .fxc-field > span em { font-style: normal; font-weight: var(--fw-normal); color: var(--color-text-subtle); margin-left: 4px; }
.fxc-num { font-size: var(--text-lg) !important; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; text-align: right; }
/* 数字の欄の上下の矢印は出さない（右の単位と重なる。増減はチップかキーボードで） */
.fxc-num { -moz-appearance: textfield; appearance: textfield; }
.fxc-num::-webkit-inner-spin-button, .fxc-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fxc-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.02em; }
.fxc-field .fp-trigger, .fxc-field .dd-trigger { width: 100%; box-sizing: border-box; padding: 9px 12px; }
/* 一番大事な切り替え（売買・入金/出金など）は全幅で大きく */
.fxc-seglg .fxc-seg { width: 100%; }
.fxc-seglg .fxc-seg-btn { padding: 9px 0; font-size: var(--text-base); font-weight: var(--fw-bold); }
.fxc-chips { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-height: 22px; }
.fxc-chip {
  font-size: var(--text-2xs); padding: 2px 9px; cursor: pointer; font-variant-numeric: tabular-nums;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill, 999px);
  background: var(--color-bg); color: var(--color-text-muted);
}
.fxc-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
/* いま選んでいる・開いているもの（押せない） */
.fxc-chip.is-on, .fxc-chip.is-on:hover {
  cursor: default; border-color: var(--color-primary); background: var(--color-primary-light);
  color: var(--color-primary); font-weight: var(--fw-semibold);
}
.fxc-chip-note { font-size: var(--text-3xs); color: var(--color-text-subtle); }
.fxc-calc {
  display: flex; gap: 6px 18px; flex-wrap: wrap;
  padding: 9px 12px; border-radius: var(--radius-md);
  background: var(--color-bg); font-size: var(--text-xs); color: var(--color-text-muted);
}
.fxc-calc b { color: var(--color-text); font-variant-numeric: tabular-nums; margin-left: 4px; }
.fxc-calc b.up { color: var(--color-success-text); }
.fxc-calc b.down { color: var(--color-danger-text); }
.fxc-hint { font-size: var(--text-3xs); color: var(--color-text-subtle); min-height: 14px; line-height: 1.6; }
/* 対象の要約（決済する建玉・紐づく支出など）。入力ではないので枠だけ */
.fxc-summary {
  display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums;
}
.fxc-summary b { color: var(--color-text); }
.fxc-summary-sub { font-size: var(--text-2xs); color: var(--color-text-subtle); }

@media (max-width: 480px) {
  .md-overlay { padding: 0; align-items: flex-end; }
  .md, .md--narrow, .md--wide { max-width: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 92dvh; }
  .md .fxc-grid--2, .md .fxc-grid--3 { grid-template-columns: 1fr; }
  /* 足元のエラーは1行目に回す＝ボタンを折り返させない */
  .md-foot .md-err:not(:empty) { flex-basis: 100%; order: -1; margin: 0; }
}
.fxc-chips:empty { display: none; }

/* ラベルと欄を縦に並べる並び（以前の mpm-field-grid＝ラベルが欄の左、を置き換え）。
   label → 欄 → label → 欄 … を1列に積み、ラベルの前だけ間を空ける */
.fxc-stack { display: flex; flex-direction: column; gap: 6px; }
.fxc-stack > label { font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--color-text-muted); }
.fxc-stack > label:not(:first-child) { margin-top: 8px; }
.fxc-stack > input, .fxc-stack > select, .fxc-stack > textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-lg);
  font-size: var(--text-sm); font-family: inherit; background: var(--color-surface); color: var(--color-text);
}
.fxc-stack > input:focus, .fxc-stack > select:focus, .fxc-stack > textarea:focus {
  outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light);
}
.fxc-stack > input[readonly] { background: var(--color-bg); border-color: transparent; font-weight: var(--fw-semibold); cursor: default; }
.fxc-stack .fp-trigger, .fxc-stack .dd-trigger { width: 100%; box-sizing: border-box; padding: 9px 12px; }
.md-divider { border: none; border-top: 1px solid var(--color-border); margin: 4px 0; }

/* 区切りの見出しの行（見出し＋右に状態の札など） */
.md-sec-h { display: flex; align-items: center; gap: 8px; }
.md-sec-h h4 { margin: 0; font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--color-text); }
.md-sec-h > :last-child:not(h4) { margin-left: auto; }
/* <label class="fxc-field"><span>見出し</span><input></label> の形（ラベル要素で包む欄）も同じ見た目 */
.fxc-field > span:first-child { font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--color-text-muted); }