/* ─────────────────────────────────────────────
 * style.css — 返済余力計算ツール（DSCR）
 *
 * デザインは OWNERIS に揃える。トークンは OWNERIS の
 * apps/owneris/src/styles/tokens.css（Style A "minimal"）の値をそのまま複製し、
 * コンポーネントの語彙（帯・カード・数字・丸ボタン・ヘアライン）も同じものを使う。
 * 色を差し替えるときは :root だけを編集する。
 * ───────────────────────────────────────────── */

:root,
[data-style="minimal"] {
  /* Color — surfaces */
  --bg:            #F3F6FA;   /* 地（淡い青みのグレー） */
  --surface:       #FFFFFF;   /* カード・パネル */
  --surface-dim:   #E9EEF5;   /* 控えめな帯・交互行 */
  --ink:           #17233A;   /* 主要テキスト（濃紺） */
  --ink-2:         #4A5A72;   /* 補助テキスト */
  --ink-3:         #5A6673;   /* キャプション・ラベル（12px でも AA 4.5:1） */
  --hairline:      #E1E7F0;   /* 罫線（1pxで使う） */
  --accent:        #2563A8;   /* 既定の1色（青） */
  --accent-ink:    #FFFFFF;
  --cta:           #F58A2E;   /* 行動ボタン（橙）。文字は --ink */
  --cta-ink:       #17233A;
  --inverse-bg:    #17233A;
  --inverse-ink:   #F3F6FA;

  /* Typography — 外部フォントは読み込まない（OSの日本語フォントのみ） */
  --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;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --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;
  --fs-input:     1.1rem;     /* 16px 以上（iOS のズーム防止） */
  --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 (8pxグリッド) */
  --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;

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

  /* 判定色（DSCR 4段階）。基準色はすべて白文字で AA 4.5:1 以上。
     淡色面・帯は OWNERIS と同じく color-mix でここから導く。 */
  --color-level-good:     #15713B;
  --color-level-standard: #2563A8;
  --color-level-tight:    #8A5A00;
  --color-level-danger:   #A72A2D;
  --color-negative:       #A72A2D;

  /* 警告（結果エリア直下の注意文）は OWNERIS の status-warning を使う */
  --status-warning:       #b97a00;
  --status-warning-soft:  #FCF0D8;
}

/* 判定色 1色から「淡色面 / 罫線 / 帯」を導く。data-level ごとに --level を差し替えるだけ。 */
[data-level="good"]     { --level: var(--color-level-good); }
[data-level="standard"] { --level: var(--color-level-standard); }
[data-level="tight"]    { --level: var(--color-level-tight); }
[data-level="danger"]   { --level: var(--color-level-danger); }

[data-level] {
  --level-soft:   color-mix(in srgb, var(--level) 10%, #fff);
  --level-line:   color-mix(in srgb, var(--level) 28%, #fff);
  --level-light:  color-mix(in srgb, var(--level) 88%, #fff);
  --level-deep:   color-mix(in srgb, var(--level) 78%, #0B1020);
  --level-band:   linear-gradient(135deg, var(--level-light) 0%, var(--level) 55%, var(--level-deep) 100%);
}

/* 会社色の帯（ヘッダー）。OWNERIS と同じ導出式。 */
:root {
  --accent-light: color-mix(in srgb, var(--accent) 88%, #fff);
  --accent-deep:  color-mix(in srgb, var(--accent) 78%, #0B1020);
  --accent-soft:  color-mix(in srgb, var(--accent) 10%, #fff);
  --band:         linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 55%, var(--accent-deep) 100%);
}

/* ─────────────────────────────────────────────
 * リセット・基本
 * ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

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;
  padding-bottom: env(safe-area-inset-bottom);
}

ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

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

/* 数字は欧文フォント・等幅桁。OWNERIS の .num と同じ扱い。 */
.hero-number__value,
.sub-metric__value,
.field__input {
  font-family: var(--font-latin);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* ─────────────────────────────────────────────
 * アクセシビリティ
 * ───────────────────────────────────────────── */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

[hidden] { display: none !important; }

.skip-link {
  position: absolute; top: -60px; left: var(--sp-2);
  padding: 10px 18px; z-index: 100;
  background: var(--ink); color: #fff;
  border-radius: var(--radius-pill);
  text-decoration: none; font-size: var(--fs-small); font-weight: 700;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-2); }

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

/* ─────────────────────────────────────────────
 * 動き — 立ち上がりの1回だけ。以降は操作への応答のみ。
 * ───────────────────────────────────────────── */
@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 line-in { to { opacity: 1; transform: none; clip-path: inset(-6px); } }

.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; }

.reveal-up {
  opacity: 0; transform: translateY(18px);
  animation: fade-up var(--dur-slow) var(--ease-expo) both;
  animation-delay: calc(min(var(--i, 0), 10) * 70ms);
}
.reveal-line {
  display: block; opacity: 0; transform: translateY(.5em); transform-origin: left bottom;
  clip-path: inset(0 0 100% 0);
  animation: line-in .9s var(--ease-expo) both;
  animation-delay: calc(var(--i, 0) * 110ms);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-up, .reveal-line { opacity: 1; transform: none; clip-path: none; }
}

/* ─────────────────────────────────────────────
 * 帯（ページ見出し）
 * ───────────────────────────────────────────── */
.band {
  position: relative; overflow: hidden;
  background: var(--band); color: #fff;
}
.band > :not(.ambient) { position: relative; z-index: 1; }

.tool-header .container-tool {
  padding-block: var(--sp-3) calc(var(--sp-5) + 64px);
}

.eyebrow {
  font-family: var(--font-latin); font-weight: 500;
  font-size: .72rem; letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: #fff; opacity: .85;
}

.tool-name {
  font-family: var(--font-display);
  font-size: var(--fs-h1); font-weight: 800;
  letter-spacing: .01em; line-height: var(--lh-tight);
  margin-top: 8px;
}

.tool-tagline {
  margin-top: 12px; font-size: var(--fs-small);
  max-width: 40em; opacity: .92; line-height: 1.85;
}

/* パンくず（帯の上に置く） */
.breadcrumbs__list {
  display: flex; flex-wrap: wrap;
  font-size: var(--fs-caption);
  color: rgba(255,255,255,.82);
  letter-spacing: .04em;
}
.breadcrumbs__item { display: inline-flex; align-items: center; }
.breadcrumbs__item + .breadcrumbs__item::before {
  content: "/"; margin-inline: 10px; color: rgba(255,255,255,.45);
}
.breadcrumbs__link { color: #fff; text-decoration: none; opacity: .82; }
.breadcrumbs__link:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs__current { color: #fff; font-weight: 700; }

/* ─────────────────────────────────────────────
 * 本文レイアウト — 入力（左・追従）｜結果ほか（右）
 * ───────────────────────────────────────────── */
.tool-main {
  position: relative; z-index: 1;
  margin-top: -64px;
  padding-bottom: var(--sp-7);
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  column-gap: var(--sp-3);
  row-gap: 0;
  align-items: start;
}
.tool-main > * { grid-column: 2; }
.tool-main > .input-panel { grid-column: 1; grid-row: 1 / span 40; position: sticky; top: var(--sp-2); }
.tool-main > .disclaimer { grid-column: 1 / -1; }
.tool-main > * + * { margin-top: 20px; }
.tool-main > .input-panel + * { margin-top: 0; }

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

/* ─────────────────────────────────────────────
 * パネル（白いカード）
 * ───────────────────────────────────────────── */
.panel {
  background: var(--surface);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
}
@media (min-width: 601px) { .panel { padding: 28px; } }

.panel-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3); font-weight: 800;
  line-height: var(--lh-tight);
}
.panel-lead {
  color: var(--ink-3); font-size: var(--fs-small);
  margin-top: 6px;
}

/* ─────────────────────────────────────────────
 * 入力欄
 * ───────────────────────────────────────────── */
.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__label { font-size: var(--fs-small); font-weight: 700; letter-spacing: .02em; }

.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:hover { border-color: color-mix(in srgb, var(--accent) 35%, #fff); }
.field__input-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

.field__input {
  flex: 1; min-width: 0; width: 100%;
  border: 0; background: transparent;
  padding-block: 12px;
  font-size: var(--fs-input);
  color: var(--ink);
}
.field__input:focus, .field__input:focus-visible { outline: none; }

.field__help { font-size: var(--fs-caption); color: var(--ink-3); line-height: 1.65; }
.field__error { font-size: var(--fs-caption); color: var(--status-warning); font-weight: 700; }
.field:has(.field__error:not([hidden])) .field__input-wrap { border-color: var(--status-warning); }

/* ─────────────────────────────────────────────
 * 結果 — 大きな数字1つ（帯）＋ その内訳2つ
 * ───────────────────────────────────────────── */
.result-section__body { display: grid; gap: var(--sp-2); }

.hero-number {
  position: relative; overflow: hidden;
  /* 数字を左、判定ラベルをその横にベースライン揃えで置く */
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  column-gap: var(--sp-3);
  padding: 30px 34px;
  border-radius: var(--radius-l);
  background: var(--band);
  color: #fff;
  box-shadow: var(--shadow-2);
  transition: background var(--dur-slow) var(--ease);
}
@media (max-width: 600px) { .hero-number { padding: 24px 22px; } }
.hero-number > :not(.ambient) { position: relative; z-index: 1; }

/* 判定に応じて帯の色そのものが変わる（JS は data-level を付けるだけ） */
.result-card--dscr[data-level] { background: var(--level-band); }

.hero-number__label {
  grid-column: 1 / -1;
  font-family: var(--font-latin);
  font-size: .72rem; letter-spacing: var(--ls-wide); text-transform: uppercase;
  opacity: .9; font-weight: 700;
}

.hero-number__value {
  grid-column: 1;
  font-size: clamp(3rem, 8vw, 4.6rem);
  font-weight: 300; line-height: 1.05;
  margin-top: 2px;
}

/* 判定ラベル（色だけに頼らずテキストで必ず併記する） */
.result-card__label {
  grid-column: 2;
  justify-self: start;
  margin-bottom: 12px;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.55);
  color: #fff;
  font-size: var(--fs-small); font-weight: 700;
  letter-spacing: .06em;
}

.result-card__message {
  grid-column: 1 / -1;
  margin-top: 10px;
  font-size: var(--fs-small);
  color: rgba(255,255,255,.95);
}

/* 幅が狭いときは判定ラベルを数字の下へ落とす */
@media (max-width: 520px) {
  .hero-number { grid-template-columns: 1fr; }
  .hero-number__value, .result-card__label { grid-column: 1; }
  .result-card__label { margin-top: 12px; margin-bottom: 0; }
}

/* data-level が外れた未算出状態 — 色を持たないニュートラルな面 */
.result-card--dscr:not([data-level]) {
  background: var(--surface);
  color: var(--ink-3);
  box-shadow: var(--shadow-1);
}
.result-card--dscr:not([data-level]) .hero-number__value { color: var(--ink-3); opacity: .55; }
.result-card--dscr:not([data-level]) .result-card__message { color: var(--ink-2); }
.result-card--dscr:not([data-level]) .ambient { display: none; }

/* 内訳（NOI と 年間ローン返済額） */
.sub-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
@media (max-width: 420px) { .sub-metrics { grid-template-columns: 1fr; } }

.sub-metric {
  background: var(--surface);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  padding: 18px 20px;
}
.sub-metric__label { font-size: var(--fs-caption); color: var(--ink-3); }
.sub-metric__value { font-size: 1.6rem; font-weight: 700; margin-top: 4px; line-height: 1.2; }
.sub-metric__help { font-size: var(--fs-caption); color: var(--ink-3); margin-top: 4px; }

.result-card__unit {
  font-family: var(--font-body);
  font-size: .9rem; font-weight: 700;
  color: var(--ink-3);
  margin-left: 3px; letter-spacing: 0;
}
.result-card--noi .result-card__value.is-negative { color: var(--color-negative); }

/* 警告（計算は続行） */
.result-warning {
  margin-top: var(--sp-2);
  background: var(--status-warning-soft);
  border-left: 4px solid var(--status-warning);
  border-radius: var(--radius-s);
  padding: 14px 18px;
  font-size: var(--fs-small);
  color: var(--ink);
}

/* ─────────────────────────────────────────────
 * DSCRの目安（現在地を示す帯）
 * ───────────────────────────────────────────── */
.level-legend {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: var(--sp-2);
}
@media (max-width: 560px) { .level-legend { grid-template-columns: 1fr 1fr; } }

.level-legend__item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px;
  border-radius: var(--radius-s);
  background: var(--level-soft);
  border: 1px solid var(--level-line);
  border-top: 4px solid var(--level);
  color: var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease-expo);
}

.level-legend__range { font-family: var(--font-latin); font-size: var(--fs-caption); font-weight: 700; letter-spacing: .02em; color: var(--ink-2); }
.level-legend__label { font-size: var(--fs-small); font-weight: 700; }

/* 現在の判定区分 — 面を塗って現在地にする */
.level-legend__item.is-active {
  background: var(--level);
  border-color: var(--level);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-1);
}
.level-legend__item.is-active .level-legend__range { color: rgba(255,255,255,.9); }
.level-legend__item.is-active .level-legend__label::after {
  content: "いまここ";
  display: block;
  margin-top: 2px;
  font-size: var(--fs-caption);
  font-weight: 400;
  letter-spacing: .08em;
  opacity: .85;
}

.level-legend-section__note {
  margin-top: var(--sp-2);
  font-size: var(--fs-caption);
  color: var(--ink-3);
  line-height: 1.75;
}

/* ─────────────────────────────────────────────
 * 解説
 * ───────────────────────────────────────────── */
.explanation__body { margin-top: var(--sp-2); font-size: var(--fs-small); line-height: 1.95; max-width: 46em; }

.explanation__formula {
  margin-top: var(--sp-2);
  background: var(--accent-soft);
  border-radius: var(--radius-s);
  padding: 18px 20px;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  line-height: 1.9;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-x: auto;
}

/* ─────────────────────────────────────────────
 * よくある質問
 * ───────────────────────────────────────────── */
.faq__item { border-top: 1px solid var(--hairline); }
.faq__item:first-of-type { border-top: none; margin-top: var(--sp-1); }

.faq__question {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 0;
  font-size: var(--fs-small); font-weight: 700; line-height: 1.7;
  list-style: none; cursor: pointer;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::before {
  content: ""; flex: none;
  width: 18px; height: 18px; margin-top: 4px;
  background: var(--accent);
  -webkit-mask: linear-gradient(#000 0 0) 50% 50%/2px 10px no-repeat, linear-gradient(#000 0 0) 50% 50%/10px 2px no-repeat;
  mask: linear-gradient(#000 0 0) 50% 50%/2px 10px no-repeat, linear-gradient(#000 0 0) 50% 50%/10px 2px no-repeat;
  transition: transform var(--dur) var(--ease-expo);
}
.faq__item[open] .faq__question::before { transform: rotate(45deg); }

.faq__answer {
  padding-bottom: 18px;
  font-size: var(--fs-small);
  color: var(--ink-2);
  line-height: 1.95;
  max-width: 46em;
}

/* ─────────────────────────────────────────────
 * シェア
 * ───────────────────────────────────────────── */
.share { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--sp-2); }

.share__button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--hairline);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-small); font-weight: 700;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease-expo);
}
.share__button:hover { border-color: var(--ink); transform: translateY(-1px); }

/* URLコピーだけは行動ボタン（橙） */
.share__button:last-child {
  background: var(--cta); border-color: var(--cta); color: var(--cta-ink);
}
.share__button:last-child:hover { box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--cta) 80%, transparent); }

.share-toast {
  margin-top: 12px;
  align-self: flex-start;
  display: inline-block;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--ink); color: #fff;
  font-size: var(--fs-small); font-weight: 700;
}

/* ─────────────────────────────────────────────
 * 次に使う道具
 * ───────────────────────────────────────────── */
.related-tools__heading {
  font-family: var(--font-display);
  font-size: var(--fs-h3); font-weight: 800;
  margin-bottom: var(--sp-2);
}
.related-tools__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
@media (max-width: 800px) { .related-tools__list { grid-template-columns: 1fr; } }

.related-tool-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px;
  background: var(--surface);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  text-decoration: none; color: var(--ink);
  min-height: 160px;
  transition: transform var(--dur) var(--ease-expo), box-shadow var(--dur) var(--ease);
}
.related-tool-card:hover, .related-tool-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-2); }

.related-tool-card__title { font-weight: 800; font-size: 1rem; line-height: 1.5; }
.related-tool-card__description { font-size: var(--fs-caption); color: var(--ink-2); line-height: 1.7; flex: 1; }
.related-tool-card__cta { font-size: var(--fs-small); font-weight: 700; color: var(--accent); }

/* ─────────────────────────────────────────────
 * PR バナー
 * ───────────────────────────────────────────── */
.pr-banner {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px;
  background: var(--surface);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
}
.pr-banner__label {
  align-self: flex-start;
  padding: 3px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  font-size: .7rem; letter-spacing: .08em; color: var(--ink-3);
}
.pr-banner__heading { font-weight: 800; font-size: 1rem; }
.pr-banner__body { font-size: var(--fs-caption); color: var(--ink-2); line-height: 1.7; }
.pr-banner__cta { align-self: flex-start; font-size: var(--fs-small); font-weight: 700; color: var(--accent); text-decoration: none; }

/* ─────────────────────────────────────────────
 * 免責
 * ───────────────────────────────────────────── */
.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);
  line-height: 1.8;
  padding-left: 1em; text-indent: -1em;
}
.disclaimer::before { content: "・"; }

/* ─────────────────────────────────────────────
 * 印刷（結果を1枚で持ち出せるように）
 * ───────────────────────────────────────────── */
@media print {
  body { background: #fff; color: #000; font-size: 10px; }
  .skip-link, .ambient, .share-section, .related-tools, .pr-banner, .faq { display: none !important; }
  .band { background: none; color: #000; border-bottom: 1px solid #999; }
  .eyebrow, .breadcrumbs__list, .breadcrumbs__link, .breadcrumbs__current { color: #000; }
  .tool-header .container-tool { padding-block: 6px 8px; }
  .tool-name { font-size: 15px; }
  .tool-main { display: block; margin-top: 0; padding-bottom: 0; }
  .tool-main > * + * { margin-top: 8px; }
  .panel, .sub-metric, .hero-number { box-shadow: none; border: 1px solid #ccc; }
  .hero-number, .result-card--dscr[data-level] {
    background: none !important; color: #000; border-left: 3px solid #000; padding: 10px 12px;
  }
  .result-card__label { border-color: #000; color: #000; background: none; }
  .level-legend__item.is-active { background: none; color: #000; outline: 2px solid #000; }
  .level-legend__item.is-active .level-legend__range { color: #000; }
  .reveal-up, .reveal-line { animation: none; opacity: 1; transform: none; clip-path: none; }
}