/* NISA枠 */

/* ============================================================
   NISA 枠タブ
   枠の消化は「あとどれだけ入れられるか」を一目で掴む画面なので、数字より先に
   ゲージが目に入る構成にする。生涯枠は横長のバー（1800万＝18本の目盛りで
   100万ごとの位置が読める）、年間枠はリング（残り月数で割った月額まで出す）。
   ============================================================ */
.nisa-hero {
  position: relative;
  background: linear-gradient(135deg, #182338 0%, #1f3355 55%, #24406b 100%);
  border-radius: var(--radius-xl);
  padding: 22px 24px 18px;
  color: var(--color-text-on-accent);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  margin-bottom: 20px;
}
/* 右上のうっすらした光。単色の板に見えないようにするだけの装飾 */
.nisa-hero::after {
  content: "";
  position: absolute; right: -80px; top: -120px;
  width: 320px; height: 320px; border-radius: var(--radius-circle);
  background: radial-gradient(circle, rgba(75,124,243,0.35) 0%, rgba(75,124,243,0) 70%);
  pointer-events: none;
}
.nisa-hero-head {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-bottom: 14px;
}
.nisa-hero-label {
  font-size: var(--text-2xs); letter-spacing: 0.08em;
  color: rgba(255,255,255,0.62); margin-bottom: 6px;
}
.nisa-hero-val {
  font-size: var(--text-2xl); font-weight: var(--fw-bold); line-height: 1.05;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.nisa-hero-of { font-size: var(--text-md); font-weight: var(--fw-medium); color: rgba(255,255,255,0.55); }
.nisa-hero-pct {
  font-size: var(--text-3xl); font-weight: var(--fw-bold); line-height: 1;
  font-variant-numeric: tabular-nums; color: #7fa9ff;
}
.nisa-hero-pct span { font-size: var(--text-md); font-weight: var(--fw-semibold); margin-left: 2px; }

.nisa-bar {
  position: relative; z-index: 1;
  height: 10px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.13); overflow: hidden;
}
.nisa-bar-lg { height: 16px; border-radius: var(--radius-md); }
.nisa-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4b7cf3 0%, #6ea8ff 100%);
  border-radius: inherit;
  box-shadow: var(--shadow-md);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* 100万ごとの目盛り。数字を読まなくても位置で量が掴める */
.nisa-tick {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(255,255,255,0.16);
}
.nisa-hero-foot {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin-top: 12px; font-size: var(--text-xs); color: rgba(255,255,255,0.78);
  font-variant-numeric: tabular-nums;
}
.nisa-hero-foot b { color: var(--color-text-on-accent); font-weight: var(--fw-bold); }
.nisa-note {
  position: relative; z-index: 1;
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: var(--text-2xs); color: rgba(255,255,255,0.5); line-height: 1.6;
}

.nisa-year-head {
  font-size: var(--text-base); font-weight: var(--fw-bold); color: var(--color-text);
  margin: 0 0 12px;
}
.nisa-rings {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 14px; margin-bottom: 20px;
}
.nisa-ring-card {
  display: flex; align-items: center; gap: 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  padding: 16px 20px;
}
.nisa-ring { width: 108px; height: 108px; flex: 0 0 auto; }
.nisa-ring-bg { fill: none; stroke: var(--color-bg); stroke-width: 11; }
.nisa-ring-fg {
  fill: none; stroke-width: 11; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 60px 60px;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.nisa-ring-pct {
  text-anchor: middle; font-size: var(--text-xl); font-weight: var(--fw-bold);
  fill: var(--color-text); font-variant-numeric: tabular-nums;
}
.nisa-ring-cap {
  text-anchor: middle; font-size: var(--text-2xs); fill: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}
.nisa-ring-body { min-width: 0; }
.nisa-ring-title { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: 4px; }
.nisa-ring-num {
  font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--color-text);
  line-height: 1.15; font-variant-numeric: tabular-nums;
}
.nisa-ring-sub { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
/* 「いまの設定なら年末いくら」。必要額のヒントの下に、実際の見込みを添える */
.nisa-ring-plan {
  margin-top: 5px; font-size: var(--text-2xs); color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.nisa-ring-plan b { color: var(--color-text); font-weight: var(--fw-bold); }
.nisa-ring-plan span { color: var(--color-text-subtle); }

.nisa-ring-hint {
  margin-top: 8px; display: inline-block;
  font-size: var(--text-2xs); color: var(--color-primary);
  background: var(--color-primary-light); border-radius: var(--radius-pill);
  padding: 3px 10px; font-variant-numeric: tabular-nums;
}
.nisa-ring-hint.nisa-ring-done { color: var(--color-success-text); background: var(--color-success-light); }

/* `minmax(0, 1fr)`＝内訳表（`.table-wrapper`）の min-content がトラックを押し広げるのを止める。
   横スクロールできる容器に入れていても、min-width が auto のままだと効かない */
.nisa-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 1100px) { .nisa-grid { grid-template-columns: minmax(0, 1fr); } }

.nisa-chip {
  display: inline-block; font-size: var(--text-3xs); font-weight: var(--fw-bold);
  border-radius: var(--radius-md); padding: 1px 6px; vertical-align: middle;
}
.nisa-chip-new { background: var(--color-primary-light); color: var(--color-primary); }
.nisa-chip-old { background: rgba(148,163,184,0.18); color: var(--color-text-muted); }
.nisa-muted { color: var(--color-text-subtle); }
.nisa-cell-bar { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.nisa-mini-bar {
  flex: 1; height: 6px; border-radius: var(--radius-xs); background: var(--color-bg);
  overflow: hidden; display: block;
}
.nisa-mini-bar i { display: block; height: 100%; background: var(--color-primary); border-radius: inherit; }
.nisa-cell-pct { font-size: var(--text-2xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .nisa-bar-fill, .nisa-ring-fg { transition: none; }
}