/* =====================================================================
   投資シミュレーション - スタイルシート
   修正指示書 §6 に従い、参考デザイン（OWNERIS / Style A minimal）に合わせる。
   - tokens.css の変数を :root に展開
   - app.css の部品（.container-tool / .band / .panel / .field* / .hero-number
     / .sub-metrics / .figure / .points / .btn / .next-card / .disclaimer /
     .site-footer / @media print / @media prefers-reduced-motion / :focus-visible）を流用
   - 外部フォント・外部CSS・外部JSは読み込まない（OS の日本語フォントのみ）
   ===================================================================== */

/* ---------- Design tokens（tokens.css から） ---------- */
:root,
[data-style="minimal"] {
  /* Color — surfaces */
  --bg:            #F3F6FA;
  --surface:       #FFFFFF;
  --surface-dim:   #E9EEF5;
  --ink:           #17233A;
  --ink-2:         #4A5A72;
  --ink-3:         #5A6673;
  --hairline:      #E1E7F0;
  --accent:        #2563A8;
  --accent-ink:    #FFFFFF;
  --accent-soft:   #E9EFF6;
  --cta:           #F58A2E;
  --cta-ink:       #17233A;
  --inverse-bg:    #17233A;
  --inverse-ink:   #F3F6FA;

  /* Typography */
  --font-display: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", sans-serif;
  --font-body:    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
  --font-latin:   "Helvetica Neue", "Inter", "Segoe UI", Arial, sans-serif;
  --fs-hero:      clamp(2rem, 4.2vw, 3rem);
  --fs-h1:        clamp(1.7rem, 3.2vw, 2.25rem);
  --fs-h2:        clamp(1.4rem, 2.2vw, 1.7rem);
  --fs-h3:        1.15rem;
  --fs-body:      1rem;
  --fs-small:     .875rem;
  --fs-caption:   .75rem;
  --lh-tight:     1.25;
  --lh-body:      1.8;
  --ls-wide:      .18em;
  --ls-body:      .02em;

  /* Shape & depth */
  --radius-s:     12px;
  --radius-m:     16px;
  --radius-l:     22px;
  --radius-pill:  999px;
  --shadow-1:     0 8px 24px -14px rgba(23,35,58,.22);
  --shadow-2:     0 18px 40px -22px rgba(23,35,58,.32);
  --border:       1px solid var(--hairline);

  /* Spacing */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 48px; --sp-6: 64px; --sp-7: 96px; --sp-8: 128px;
  --container:    1240px;
  --section-pad:  var(--sp-7);

  /* Motion */
  --ease:         cubic-bezier(.22,.61,.36,1);
  --ease-expo:    cubic-bezier(.26,1,.48,1);
  --dur:          .3s;
  --dur-slow:     .9s;
}

/* Chart series（両スタイル共通） */
:root, [data-style] {
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --grid-hairline: #e1e0d9;
  --chart-muted:   #8C949B;
}

/* Status（両スタイル共通） */
:root, [data-style] {
  --status-good:     #0ca30c;
  --status-warning:  #b97a00;
  --status-serious:  #c05a2e;
  --status-critical: #d03b3b;
  --status-good-soft:     #E2F4E2;
  --status-warning-soft:  #FCF0D8;
  --status-serious-soft:  #FAE6DC;
  --status-critical-soft: #FADEDE;
}

/* ---------- app.css から流用する派生変数 ---------- */
:root {
  --tool-container: var(--container);
  --company-accent: var(--accent);
}
:root, .company-scope {
  --accent-soft:  color-mix(in srgb, var(--company-accent) 10%, #fff);
  --ico-bg:       color-mix(in srgb, var(--company-accent) 12%, #fff);
  --accent-deep:  color-mix(in srgb, var(--company-accent) 78%, #0B1020);
  --accent-light: color-mix(in srgb, var(--company-accent) 80%, #fff);
  --band:         linear-gradient(135deg, var(--accent-light) 0%, var(--company-accent) 55%, var(--accent-deep) 100%);
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
.num { font-family: var(--font-latin); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ---------- Visually hidden ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Keyframes ---------- */
@keyframes drift { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-3%,4%,0) scale(1.05); } 100% { transform: translate3d(2%,-3%,0) scale(1.02); } }
@keyframes fade-up { to { opacity: 1; transform: none; } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes line-in { to { opacity: 1; transform: none; clip-path: inset(-6px); } }

/* ---------- Ambient（帯の白い円） ---------- */
.ambient {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.ambient::before, .ambient::after {
  content: ""; position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.12);
  animation: drift 22s var(--ease) infinite alternate;
}
.ambient::before { width: 520px; height: 520px; right: -140px; top: -260px; }
.ambient::after  { width: 320px; height: 320px; right: 34%; bottom: -220px; background: rgba(255,255,255,.08); animation-duration: 30s; animation-direction: alternate-reverse; }
.ambient--result::before { width: 280px; height: 280px; right: -70px; top: -90px; }
.ambient--result::after { display: none; }

/* ---------- Container / Band ---------- */
.container-tool { max-width: var(--tool-container); margin-inline: auto; padding-inline: var(--sp-4); }
@media (max-width: 600px) { .container-tool { padding-inline: var(--sp-2); } }

.band { position: relative; overflow: hidden; background: var(--band); color: #fff; }
.band > :not(.ambient) { position: relative; z-index: 1; }
.eyebrow {
  font-family: var(--font-latin); font-weight: 500; font-size: .72rem;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--company-accent); display: flex; align-items: center; gap: 12px;
}
.band .eyebrow { color: #fff; opacity: .85; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  top: -40px; left: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
  border-radius: 0 0 8px 0;
}
.skip-link:focus { top: 0; }

/* ---------- Company header（siteName 空のときは DOM も非表示） ---------- */
.company-header { background: var(--surface); border-bottom: 1px solid var(--hairline); position: relative; z-index: 2; }
.company-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); min-height: 72px; padding-block: 12px; flex-wrap: wrap; }
.company-header__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.company-header__mark {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--company-accent); color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  flex: none;
}
.company-header__logo-text {
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.company-header__sub { font-size: var(--fs-caption); color: var(--ink-3); letter-spacing: .04em; margin-left: 2px; }
.company-header__phone { display: flex; flex-direction: column; align-items: flex-end; text-decoration: none; line-height: 1.3; }
.company-header__phone-number { font-family: var(--font-latin); font-size: 1.25rem; font-weight: 700; letter-spacing: .04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.company-header__phone-hours { font-size: var(--fs-caption); color: var(--ink-3); }

/* ---------- Tool header / band ---------- */
.tool-header .container-tool { padding-block: var(--sp-4) calc(var(--sp-4) + 64px); }
.tool-name {
  font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 800;
  letter-spacing: .01em; line-height: 1.25; margin-top: 8px;
}
.tool-tagline {
  margin-top: 10px; font-size: var(--fs-small);
  max-width: 40em; opacity: .92;
}

/* ---------- Main: 左入力（sticky）｜右結果 ---------- */
.tool-main { position: relative; z-index: 1; margin-top: -64px; padding-bottom: 0; }
.tool-main.container-tool {
  display: grid; grid-template-columns: 400px minmax(0, 1fr);
  column-gap: 24px; row-gap: 0; align-items: start;
}
.tool-main > * { grid-column: 2; }
.tool-main > .input-panel { grid-column: 1; grid-row: 1 / -1; position: sticky; top: 16px; }
.tool-main > * + * { margin-top: 20px; }
.tool-main > .input-panel + * { margin-top: 0; }
.tool-main > .input-panel { z-index: 1; }
/* 注記はグリッドの外に置き、sticky の入力パネルと重ならないようにする */
.disclaimer-wrap { padding-bottom: var(--sp-7); }

@media (max-width: 960px) {
  .tool-main.container-tool { grid-template-columns: 1fr; }
  .tool-main > *, .tool-main > .input-panel { grid-column: 1; grid-row: auto; position: static; }
  .tool-main > .input-panel + * { margin-top: 20px; }
}

/* ---------- Panel（カード） ---------- */
.panel { background: var(--surface); border-radius: var(--radius-m); box-shadow: var(--shadow-1); padding: 28px; }
.panel-title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 800; margin-bottom: 4px; }
.panel-lead { color: var(--ink-3); font-size: var(--fs-small); margin-bottom: var(--sp-2); }

/* ---------- Field group & labels ---------- */
.field-group { margin-top: var(--sp-3); }
.field-group:first-of-type { margin-top: 0; }
.field-group__label {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--ink-2);
  margin-bottom: var(--sp-2);
}

/* ---------- Field ---------- */
.field-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); margin-top: var(--sp-2); }
.field { display: flex; flex-direction: column; gap: 6px; }
/* 空の補足欄を畳んだぶん、項目どうしの区切りは明示的に確保する */
.field + .field { margin-top: var(--sp-2); }
.field__label { font-size: var(--fs-small); font-weight: 700; letter-spacing: .02em; }
.field__label .required { color: var(--company-accent); margin-left: 2px; font-weight: 400; font-size: var(--fs-caption); }

.field__input-wrap {
  display: flex; align-items: center;
  border: 1.5px solid var(--hairline); border-radius: var(--radius-s);
  background: var(--surface); padding-inline: 14px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field__input-wrap:focus-within { border-color: var(--company-accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.field__input {
  flex: 1; min-width: 0; border: 0; background: transparent;
  padding-block: 12px; font-size: 1.1rem; font-family: var(--font-latin);
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.field__input::placeholder { color: var(--ink-3); opacity: .7; }
.field__input:focus, .field__input:focus-visible { outline: none; }
.field__unit { color: var(--ink-3); font-size: var(--fs-small); white-space: nowrap; margin-left: 8px; }
.field__help { font-size: var(--fs-caption); color: var(--ink-3); }
.field__error {
  font-size: var(--fs-caption); color: var(--status-warning);
  display: flex; align-items: flex-start; gap: 4px;
}
.field__error svg { flex-shrink: 0; margin-top: 1px; }
.field--error .field__input-wrap { border-color: var(--status-warning); }
/* 注意（オレンジ）は「入力が危ない」ときだけ出す一貫した合図。
   中身が無いときに帯だけ残らないよう :empty で畳む。 */
.field__warning {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: var(--fs-caption); line-height: 1.6;
  color: var(--status-warning);
  background: var(--status-warning-soft);
  border-left: 3px solid var(--status-warning);
  padding: 8px 10px;
  border-radius: 0 8px 8px 0;
}
.field__warning::before { content: "!"; font-weight: 800; flex-shrink: 0; }
.field__warning:empty, .field__error:empty, .field__help:empty { display: none; }

.field__toggle {
  display: inline-flex; flex-wrap: wrap;
  border: 1.5px solid var(--hairline); border-radius: var(--radius-pill);
  padding: 2px; gap: 2px;
  width: fit-content; max-width: 100%;
  margin-bottom: 6px;
}
.field__toggle button {
  border: 0; background: transparent;
  padding: 6px 12px; font-size: var(--fs-caption);
  border-radius: var(--radius-pill); cursor: pointer;
  color: var(--ink-2); font-family: var(--font-body);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.field__toggle button[aria-pressed="true"] { background: var(--company-accent); color: #fff; }

/* ---------- Equity hint（借入欄の自動表示） ---------- */
.equity-hint {
  font-size: var(--fs-caption); color: var(--ink-3);
  background: var(--surface-dim);
  padding: 8px 12px;
  border-radius: 10px;
  margin-top: 4px;
}

/* ---------- Actions（入力例／クリア） ---------- */
.actions {
  display: flex; gap: 8px; margin-top: var(--sp-3);
  flex-wrap: wrap;
}

/* ---------- State empty ---------- */
.state-empty {
  background: var(--surface);
  border: 1.5px dashed var(--hairline);
  border-radius: var(--radius-m);
  padding: var(--sp-5) var(--sp-3);
  text-align: center; color: var(--ink-3);
}
.state-empty__title {
  font-family: var(--font-display); font-size: var(--fs-h3); color: var(--ink-2);
  margin-bottom: 8px; font-weight: 700;
}
.state-empty__body { font-size: var(--fs-small); max-width: 30em; margin-inline: auto; }

/* ---------- Result section ---------- */
.result-section { opacity: 0; transform: translateY(14px); animation: fade-up .8s var(--ease-expo) both; }
.result-body { display: grid; gap: 16px; }

/* ---------- Hero number ---------- */
.hero-number {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 4px;
  padding: 30px 34px;
  border-radius: var(--radius-l);
  background: var(--band); color: #fff;
  box-shadow: var(--shadow-2);
}
.hero-number > :not(.ambient) { position: relative; z-index: 1; }
.hero-number__label { font-size: var(--fs-caption); letter-spacing: .06em; opacity: .9; font-weight: 700; }
.hero-number__value {
  font-family: var(--font-latin); font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 300; letter-spacing: -.02em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 0;
}
.hero-number__unit { font-size: 1.2rem; margin-left: 8px; font-family: var(--font-body); letter-spacing: 0; opacity: .9; }
.hero-number__note { font-size: var(--fs-small); opacity: .9; margin-top: 4px; }
.hero-number--negative { /* 面の色は変えない（指示書 §5.1） */ }

/* ---------- Sub metrics（白カード6枚） ---------- */
.sub-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 600px) { .sub-metrics { grid-template-columns: 1fr 1fr; gap: 10px; } }
.sub-metric {
  background: var(--surface); border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  padding: 18px 20px;
  position: relative;
}
.sub-metric__label { font-size: var(--fs-caption); color: var(--ink-3); }
.sub-metric__value {
  font-family: var(--font-latin); font-size: 1.5rem; font-weight: 700;
  margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  display: flex; align-items: baseline; gap: 8px;
}
.sub-metric__help { font-size: var(--fs-caption); color: var(--ink-3); margin-top: 2px; }
.sub-metric__tag {
  font-size: var(--fs-caption); font-weight: 700;
  color: var(--status-warning); background: var(--status-warning-soft);
  padding: 2px 8px; border-radius: var(--radius-pill);
  margin-left: auto;
}

/* ---------- Figure（家賃収入の行き先） ---------- */
.figure { background: var(--surface); border-radius: var(--radius-m); box-shadow: var(--shadow-1); padding: 20px 22px; }
.figure svg { width: 100%; height: auto; display: block; border-radius: 8px; overflow: hidden; }
.figure-bar { transform-box: fill-box; transform-origin: 0 50%; animation: grow-x var(--dur-slow) var(--ease-expo) both; }
.figure-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.figure-legend__item { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-caption); }
.figure-legend__swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.figure-legend__label { color: var(--ink-2); }
.figure-legend__value { color: var(--ink); font-weight: 700; }
.figure-legend__pct { color: var(--ink-3); }
.figure-shortfall {
  margin-top: 12px; font-size: var(--fs-small); color: var(--status-warning);
  background: var(--status-warning-soft);
  padding: 8px 12px; border-radius: 8px;
}

/* ---------- Rate table ---------- */
.rate-table-wrap .panel-title { margin-bottom: 4px; }
.rate-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); margin-top: var(--sp-2); }
.rate-table th, .rate-table td { padding: 10px 12px; text-align: right; border-bottom: 1px solid var(--hairline); }
.rate-table thead th { font-size: var(--fs-caption); color: var(--ink-3); font-weight: 700; background: var(--surface-dim); }
.rate-table tbody th { font-weight: 700; text-align: left; }
.rate-table tbody th[scope="row"] { color: var(--ink); }
.rate-table__now { display: inline-block; margin-left: 6px; font-size: var(--fs-caption); background: var(--accent-soft); color: var(--company-accent); padding: 1px 8px; border-radius: var(--radius-pill); }
.rate-table__neg { color: var(--status-warning); font-weight: 700; }
.rate-table__row--warn { background: var(--status-warning-soft); }
.rate-table__row--warn th, .rate-table__row--warn td { border-bottom-color: transparent; }
@media (max-width: 600px) {
  .rate-table { font-size: var(--fs-small); }
  .rate-table th, .rate-table td { padding: 8px 6px; }
}

/* ---------- Points ---------- */
.points { background: var(--accent-soft); padding: 20px 24px; border-radius: var(--radius-m); }
.points__title { font-weight: 800; font-size: var(--fs-small); margin-bottom: 6px; }
.points p { font-size: var(--fs-small); color: var(--ink); }
.points p + p { margin-top: 6px; }

/* ---------- Buttons（丸） ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-pill);
  padding: 13px 24px; font-weight: 700; text-decoration: none; cursor: pointer;
  border: 1.5px solid var(--ink); background: var(--ink); color: #fff;
  font-size: var(--fs-small);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-expo), box-shadow var(--dur) var(--ease);
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn--accent { background: var(--cta); border-color: var(--cta); color: var(--cta-ink); }
.btn--accent:hover:not(:disabled) { box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--cta) 80%, transparent); }
.btn--brand { background: var(--company-accent); border-color: var(--company-accent); color: #fff; }
.btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--hairline); }
.btn--ghost:hover:not(:disabled) { border-color: var(--ink); }
.btn--small { padding: 9px 16px; font-size: var(--fs-caption); }
.btn--block { width: 100%; }

/* ---------- Next steps / cards ---------- */
.next-steps__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.next-steps__grid {
  display: grid;
  /* 右カラム幅 752px で 3枚のとき 3列に収まるよう 220px にしている */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  align-items: stretch;      /* カードの高さを行内でそろえる */
}
.next-card {
  background: var(--surface); border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  padding: 22px; display: flex; flex-direction: column; gap: 8px;
}
.next-card--primary { background: var(--company-accent); color: #fff; }
.next-card__eyebrow { font-family: var(--font-latin); font-size: var(--fs-caption); color: var(--ink-2); letter-spacing: .1em; }
.next-card--primary .next-card__eyebrow, .next-card--primary .next-card__body { color: #fff; opacity: .9; }
.next-card__title { font-weight: 800; font-size: 1rem; }
.next-card__body { font-size: var(--fs-caption); color: var(--ink-2); line-height: 1.7; flex: 1 1 auto; }
.next-card .btn {
  margin-top: auto;            /* カード下端に寄せる = 2枚のボタンの上端がそろう */
  align-self: flex-start;
  width: auto;
  min-width: 160px;            /* 2つのボタンの幅の差をなくす */
  white-space: nowrap;         /* 「URLをコ / ピー」のような折り返しを止める */
}
.next-card__status { font-size: var(--fs-caption); color: var(--status-good); margin-top: 6px; min-height: 1em; }
/* status を持たないカードにも同じ高さの枠を作り、ボタンの上端をそろえる */
.next-card:not(:has(.next-card__status))::after {
  content: "";
  display: block;
  font-size: var(--fs-caption);
  margin-top: 6px;
  min-height: 1em;
}

/* ---------- Disclaimer ---------- */
.disclaimer {
  margin-top: var(--sp-4); border-top: 1px solid var(--hairline);
  padding-top: var(--sp-2); font-size: var(--fs-caption); color: var(--ink-3);
}
.disclaimer ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.disclaimer li { padding-left: 1em; text-indent: -1em; }
.disclaimer li::before { content: "・"; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--hairline); padding-block: var(--sp-3) var(--sp-4); color: var(--ink-3); font-size: var(--fs-caption); background: var(--surface); }
.site-footer__inner { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; }
.site-footer__powered { font-family: var(--font-latin); letter-spacing: .04em; }

/* ---------- 印刷（A4縦1枚・「概算」透かし） ---------- */
@page { size: A4; margin: 14mm; }
@media print {
  * { line-height: 1.35 !important; }
  body { background: #fff; color: #000; font-size: 9.5px; }
  .no-print, .input-panel, .state-empty, .ambient, .actions, .next-steps, .skip-link, .company-header, .tool-tagline, .figure-legend, .figure-shortfall, .sub-metric__tag, .rate-table__now, .field__help, .field__error, .field__warning, .field-group__label, .equity-hint, .field__toggle { display: none !important; }
  .container-tool { max-width: 100%; padding-inline: 0; }
  .band { background: none; color: #000; }
  .band .eyebrow { color: #000; }
  .tool-header .container-tool { padding-block: 6px 4px; }
  .tool-name { font-size: 14px; margin-top: 2px; }
  .tool-main { margin-top: 0; padding-bottom: 0; }
  .disclaimer-wrap { padding-bottom: 0; }
  .tool-main.container-tool { display: block; }
  .tool-main > * + * { margin-top: 8px; }
  .panel, .sub-metric, .figure, .hero-number { box-shadow: none; }
  .hero-number { padding: 8px 10px; background: none; color: #000; border: 1px solid #ccc; border-left: 3px solid #000; border-radius: 4px; break-inside: avoid; overflow: visible; }
  .hero-number__value { font-size: 22px; }
  .hero-number__label, .hero-number__unit, .hero-number__note { font-size: 8px; color: #000; opacity: 1; }
  .sub-metrics { grid-template-columns: repeat(3, 1fr) !important; gap: 6px; margin-top: 6px; }
  .sub-metric { padding: 5px 8px; border: 1px solid #ddd; border-radius: 4px; }
  .sub-metric__value { font-size: 12px; }
  .figure { margin-top: 6px; padding: 6px; border: 1px solid #ddd; border-radius: 4px; break-inside: avoid; }
  .figure svg { height: 24px; }
  .points { margin-top: 6px; padding: 6px 8px; background: #f4f4f4; }
  .rate-table-wrap { break-inside: avoid; }
  .rate-table { font-size: 8px; }
  .rate-table th, .rate-table td { padding: 2px 4px; }
  .rate-table__neg { color: #000; }
  .print-inputs { display: block !important; margin-top: 6px; font-size: 8px; }
  .print-inputs table { width: 100%; border-collapse: collapse; }
  .print-inputs th, .print-inputs td { padding: 1px 6px 1px 0; border-bottom: 1px dotted #ccc; text-align: left; }
  .disclaimer { margin-top: 8px; padding-top: 6px; font-size: 6.8px; color: #444; }
  .site-footer { padding-block: 6px 0; font-size: 7px; background: none; border-top: none; }
  .print-meta { display: flex !important; justify-content: space-between; font-size: 7.5px; color: #444; margin-top: 4px; }
  .print-watermark { display: block !important; }
  a[href]::after { content: ""; }
}
.print-inputs, .print-meta { display: none; }
.print-watermark {
  display: none; position: fixed; inset: 0; z-index: 999; pointer-events: none;
  font-family: var(--font-display); font-size: 120px; color: rgba(0,0,0,.06);
  text-align: center; padding-top: 40%; letter-spacing: .3em;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ambient::before, .ambient::after, .figure-bar, .result-section { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ---------- Focus visible ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--company-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.band a:focus-visible, .band button:focus-visible { outline-color: #fff; }

/* ---------- Mobile: 入力パネルを縦に並べる際の見やすさ ---------- */
@media (max-width: 600px) {
  .panel { padding: 20px; }
  .actions .btn { flex: 1 1 auto; }
  .next-steps__grid { grid-template-columns: 1fr; }
  .hero-number { padding: 24px; }
}