/* Kaname「グラフで見る」（会員向け可視化・マネフォ風）。.kt-graphs スコープのみ。
   - 外部CDN/ライブラリ禁止＝自前のインラインSVG/CSSで描画。
   - kt-* トークン（kaname.css / kaname_pop.css）を流用。両ファイルは編集しない。
   - 390px完璧・横スクロール禁止。SVGは幅可変（viewBox＋preserveAspectRatio）。
   - 新規に width:100% リテラルは使わない（max-width / inline-size:100% はSVG可変の慣用）。 */

.kt-graphs{
  --kt-g-card: var(--kt-card, #fff);
  --kt-g-ink: var(--kt-ink, #1E2433);
  --kt-g-soft: var(--kt-ink-soft, #5B6478);
  --kt-g-line: var(--kt-line, #E4E9F2);
  --kt-g-accent: var(--kt-accent, #2B6CF6);
  --kt-g-bg: var(--kt-accent-bg, #E7EFFF);
  --kt-g-shadow: var(--kt-shadow, 0 6px 22px rgba(43,108,246,.10));
  color: var(--kt-g-ink);
  box-sizing: border-box;
}
.kt-graphs *,
.kt-graphs *::before,
.kt-graphs *::after{ box-sizing: border-box; }

/* カード（各グラフの器） */
.kt-g-card{
  background: var(--kt-g-card);
  border: 1px solid var(--kt-g-line);
  border-radius: 20px;
  box-shadow: var(--kt-g-shadow);
  padding: 18px 16px 16px;
  margin: 0 0 18px;
  max-width: 640px;
  overflow: hidden;               /* はみ出し根絶（横スクロール禁止） */
}
.kt-g-card__head{
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.kt-g-card__title{
  font-size: 1.02rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: .01em;
}
.kt-g-card__sub{
  font-size: .78rem;
  color: var(--kt-g-soft);
  margin: 0;
}

/* SVG は幅可変（親幅に合わせる・高さは viewBox 比率で自動） */
.kt-g-svg{
  display: block;
  inline-size: 100%;              /* SVGを親幅に追従（レイアウト幅ではなく描画幅） */
  max-width: 100%;
  height: auto;
}

/* ── ① 収支バランス（積み上げ横バー） ── */
.kt-g-balance__nums{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 12px;
}
.kt-g-num{
  display: flex;
  flex-direction: column;
  min-width: 92px;
}
.kt-g-num b{ font-size: 1.12rem; font-weight: 800; }
.kt-g-num span{ font-size: .74rem; color: var(--kt-g-soft); }

.kt-g-bar{
  display: flex;
  block-size: 30px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--kt-g-bg);
  border: 1px solid var(--kt-g-line);
}
.kt-g-bar__seg{
  block-size: 100%;
  min-inline-size: 0;
  transition: flex-basis .5s ease;
}
.kt-g-legend{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.kt-g-legend li{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  color: var(--kt-g-soft);
}
.kt-g-dot{
  inline-size: 11px; block-size: 11px;
  border-radius: 4px;
  flex: 0 0 auto;
}
.kt-g-note{
  font-size: .78rem;
  color: var(--kt-g-soft);
  margin: 10px 0 0;
  line-height: 1.6;
}
.kt-g-note--warn{ color: #B45309; }

/* ── ② 固定費ドーナツ ── */
.kt-g-donut{
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.kt-g-donut__ring{
  flex: 0 0 auto;
  inline-size: 138px;
  max-inline-size: 40vw;
}
.kt-g-donut__center{ text-anchor: middle; }
.kt-g-donut__total{ font-size: 15px; font-weight: 800; fill: var(--kt-g-ink); }
.kt-g-donut__cap{ font-size: 8.5px; fill: var(--kt-g-soft); }
.kt-g-donut__list{
  flex: 1 1 150px;
  min-inline-size: 0;
  margin: 0; padding: 0;
  list-style: none;
}
.kt-g-donut__list li{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: .84rem;
  border-block-end: 1px dashed var(--kt-g-line);
}
.kt-g-donut__list li:last-child{ border-block-end: 0; }
.kt-g-donut__name{ flex: 1 1 auto; min-inline-size: 0; }
.kt-g-donut__pct{ color: var(--kt-g-soft); font-variant-numeric: tabular-nums; }

/* ── ③ 折れ線/エリア（推移） ── */
.kt-g-trend{ margin: 0; }
.kt-g-trend + .kt-g-trend{ margin-block-start: 18px; }
.kt-g-trend__area{ opacity: .16; }
.kt-g-trend__line{ fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.kt-g-trend__dot{ stroke: #fff; stroke-width: 1.6; }
.kt-g-trend__lbl{ font-size: 8px; fill: var(--kt-g-soft); text-anchor: middle; }
.kt-g-trend__single{
  font-size: .84rem; color: var(--kt-g-soft); margin: 6px 0 0;
}

/* ── ④ 費目別 3ヶ月グループ棒 ── */
.kt-g-bars{
  display: flex;
  gap: 10px;
  align-items: flex-end;
  justify-content: space-around;
  min-block-size: 108px;
  padding: 4px 0 0;
}
.kt-g-bars__group{
  flex: 1 1 0;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.kt-g-bars__cols{
  display: flex;
  align-items: flex-end;
  gap: 3px;
  block-size: 92px;
}
.kt-g-bars__col{
  inline-size: 8px;
  border-radius: 4px 4px 0 0;
  align-self: flex-end;
  min-block-size: 0;
}
.kt-g-bars__ym{ font-size: .76rem; color: var(--kt-g-soft); }

/* ── ロック帯（非会員）＋CTA ── */
.kt-g-lock{
  background: linear-gradient(180deg, var(--kt-g-bg), var(--kt-g-card));
  border: 1px solid var(--kt-g-line);
  border-radius: 20px;
  padding: 18px 16px;
  margin: 0 0 18px;
  max-width: 640px;
}
.kt-g-lock__title{ font-size: 1.02rem; font-weight: 800; margin: 0 0 6px; }
.kt-g-lock__body{ font-size: .88rem; color: var(--kt-g-soft); margin: 0 0 14px; line-height: 1.7; }
.kt-g-cta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--kt-g-accent);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: .92rem;
}
.kt-g-cta:hover{ background: var(--kt-accent-d, #1B52CC); }

/* サンプル帯（実データでない旨） */
.kt-g-sample{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .74rem;
  font-weight: 700;
  color: var(--kt-g-accent);
  background: var(--kt-g-bg);
  border-radius: 999px;
  padding: 3px 11px;
  margin: 0 0 14px;
}

/* 空状態（会員だがデータ無し）の導線 */
.kt-g-empty{
  border: 1px dashed var(--kt-g-line);
  border-radius: 18px;
  padding: 16px;
  margin: 0 0 18px;
  max-width: 640px;
}
.kt-g-empty__body{ font-size: .88rem; color: var(--kt-g-soft); line-height: 1.7; margin: 0 0 12px; }
.kt-g-empty__links{ display: flex; gap: 10px; flex-wrap: wrap; }
.kt-g-link{
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .86rem; font-weight: 700;
  color: var(--kt-g-accent); text-decoration: none;
  border: 1px solid var(--kt-g-line);
  border-radius: 999px; padding: 8px 15px;
}
.kt-g-link:hover{ background: var(--kt-g-bg); }

.kt-g-foot{
  font-size: .76rem;
  color: var(--kt-g-soft);
  line-height: 1.7;
  margin: 4px 0 0;
  max-width: 640px;
}

@media (max-width: 400px){
  .kt-g-donut__ring{ inline-size: 120px; }
  .kt-g-bars__col{ inline-size: 7px; }
}