/* 二次関数の最大・最小のページ専用。共通の部品は style.css */
:root {
  --c-max: #c2410c;   /* 最大：橙・上向きの三角 */
  --c-min: #1f5fd6;   /* 最小：青・下向きの三角 */
  --c-axisline: #6d28d9; /* 軸：紫・破線 */
  --c-mid: #0f766e;   /* 定義域の真ん中：青緑・点線、ひし形 */
}
.nj-sim [hidden] { display: none !important; }
.nj-sim #plot { cursor: pointer; }
#plot .p-handle { fill: transparent; stroke: none; cursor: grab; touch-action: none; }
#plot .p-handle:active { cursor: grabbing; }
#param-plot { display: block; width: 100%; height: 300px; touch-action: pan-y; cursor: ew-resize; }
.param-wrap { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; }

/* 図の中 */
.nj-domain { fill: var(--blue-soft); opacity: 0.75; }
.nj-grid { stroke: #e8edf5; stroke-width: 1; }
.nj-axis { stroke: #3b4457; stroke-width: 1.5; }
.nj-axis-head { fill: #3b4457; }
.nj-tick { font-size: 11.5px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.nj-tick-break { font-weight: 700; fill: var(--text); }
.nj-axis-label { font-size: 13px; font-style: italic; fill: var(--text); }
.nj-chip { font-size: 13.5px; font-weight: 700; fill: var(--text); }
.nj-chip-sub { font-size: 12.5px; font-weight: 700; fill: var(--muted); }
.nj-axisline { stroke: var(--c-axisline); stroke-width: 1.8; stroke-dasharray: 7 4; }
.nj-midline { stroke: var(--c-mid); stroke-width: 1.4; stroke-dasharray: 1.5 4; stroke-linecap: round; }
.nj-curve { fill: none; stroke: var(--c-path); stroke-width: 3.5; stroke-linejoin: round; }
.nj-curve-out { fill: none; stroke: #8a93a6; stroke-width: 1.5; stroke-dasharray: 6 4; }
.nj-end { fill: var(--c-path); }
.nj-end-open { fill: #fff; stroke: var(--c-path); stroke-width: 2; }
.nj-vertex { fill: var(--c-axisline); }
.nj-vertex-out { fill: #fff; stroke: var(--c-axisline); stroke-width: 1.8; }
.nj-mark-max { fill: var(--c-max); stroke: #fff; stroke-width: 1.2; }
.nj-mark-min { fill: var(--c-min); stroke: #fff; stroke-width: 1.2; }
.nj-t { font-size: 12.5px; font-weight: 700; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.nj-t-max { fill: var(--c-max); }
.nj-t-min { fill: var(--c-min); }
.nj-t-axis { fill: var(--c-axisline); }
.nj-t-vertex { fill: var(--c-axisline); font-weight: 500; }
.nj-strip-top { stroke: var(--line); stroke-width: 1; }
.nj-strip-note { font-size: 11px; fill: var(--muted); }
.nj-dist { stroke: #8a93a6; stroke-width: 2.5; }
.nj-dist-max { stroke: var(--c-max); stroke-width: 3.5; }
.nj-dist-min { stroke: var(--c-min); stroke-width: 3.5; }
.nj-dist-cap { stroke-width: 2; }
.nj-dist-t { font-size: 10.5px; font-weight: 700; fill: var(--text); paint-order: stroke; stroke: #fff; stroke-width: 2.5px; font-variant-numeric: tabular-nums; }
.nj-bar { stroke: var(--blue); stroke-width: 5; }
.nj-bar-end { fill: var(--blue); }
.nj-bar-t { font-size: 11.5px; font-weight: 700; fill: var(--blue-dark); paint-order: stroke; stroke: #fff; stroke-width: 2.5px; }
.nj-mid { fill: var(--c-mid); stroke: #fff; stroke-width: 1; }

/* a のグラフ */
.nj-band { fill: #f1f4f9; stroke: var(--line); stroke-width: 1; }
.nj-band-min.is-now { fill: #cfe0fb; stroke: var(--c-min); stroke-width: 1.5; }
.nj-band-max.is-now { fill: #fbdcc9; stroke: var(--c-max); stroke-width: 1.5; }
.nj-band-name { font-size: 12px; font-weight: 700; }
.nj-band-name.nj-band-min { fill: var(--c-min); stroke: none; }
.nj-band-name.nj-band-max { fill: var(--c-max); stroke: none; }
.nj-band-t { font-size: 12px; fill: var(--muted); }
.nj-band-t.is-now { font-weight: 700; fill: var(--text); }
.nj-break { stroke: #5c677d; stroke-width: 1.1; stroke-dasharray: 2 3; }
.nj-now { stroke: var(--text); stroke-width: 1.5; }
.nj-pcurve-max { fill: none; stroke: var(--c-max); stroke-width: 3; }
.nj-pcurve-min { fill: none; stroke: var(--c-min); stroke-width: 3; stroke-dasharray: 8 4; }

/* 図の説明 */
.lg-max { fill: var(--c-max); }
.lg-min { fill: var(--c-min); }
.lg-axisline { stroke: var(--c-axisline); stroke-width: 2; stroke-dasharray: 6 4; }
.lg-midline { stroke: var(--c-mid); stroke-width: 2; stroke-dasharray: 1.5 4; stroke-linecap: round; }
.lg-curve { stroke: var(--c-path); stroke-width: 3.5; }
.lg-curve-out { stroke: #8a93a6; stroke-width: 1.5; stroke-dasharray: 6 4; }
.lg-pmax { stroke: var(--c-max); stroke-width: 3; }
.lg-pmin { stroke: var(--c-min); stroke-width: 3; stroke-dasharray: 8 4; }

/* 操作部 */
.nj-sim .mode-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.c-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 4px 0; }
.nj-presets { display: grid; gap: 6px; }
.nj-preset { text-align: left; font-size: 0.86rem; padding: 6px 8px; min-height: 40px; line-height: 1.4; }
.nj-sim .nj-preset[aria-pressed="true"] { background: var(--blue); color: #fff; }
.nj-slider { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) 2.8em; align-items: center; gap: 6px; margin: 2px 0; }
.nj-slider label { font-size: 0.9rem; font-weight: 700; }
.nj-slider output { min-width: 0; text-align: right; font-weight: 700; color: var(--blue-dark); }
.nj-slider input[type="range"] { width: 100%; height: 32px; accent-color: var(--blue); margin: 0; }
.nj-now-line { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; margin: 4px 0 6px; font-variant-numeric: tabular-nums; font-size: 0.92rem; }
.nj-now-line b { color: var(--blue-dark); }
.nj-form { margin: 0 0 2px; overflow-wrap: anywhere; }
.nj-form-sub { margin: 0 0 2px; font-size: 0.86rem; color: var(--muted); overflow-wrap: anywhere; }
.nj-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 8px 0 0; }
.nj-res { border-radius: 8px; padding: 4px 8px; background: #fff; border: 1.5px solid var(--line); }
.nj-res-max { border-color: var(--c-max); }
.nj-res-min { border-color: var(--c-min); }
.nj-res .nj-res-name { display: block; font-size: 0.8rem; font-weight: 700; }
.nj-res-max .nj-res-name { color: var(--c-max); }
.nj-res-min .nj-res-name { color: var(--c-min); }
.nj-res output { display: block; min-width: 0; text-align: left; font-weight: 700; overflow-wrap: anywhere; }
.nj-tag { display: inline-block; font-size: 0.76rem; line-height: 1.3; white-space: nowrap; color: var(--muted); }
.nj-tag-max { color: var(--c-max); font-weight: 700; }
.nj-tag-min { color: var(--c-min); font-weight: 700; }
.nj-case-table { margin: 0 0 8px; }
.nj-case-table caption { text-align: left; font-weight: 700; font-size: 0.9rem; padding: 2px 0; }
.nj-param-box { margin-top: 10px; }
.nj-param-box h3 { margin: 0 0 4px; font-size: 1rem; }
.nj-sim .tri-status { min-height: 5.4em; }

/* 本文の図 */
.nj-fig { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
.nj-fig text { font-family: var(--font); font-size: 13px; fill: var(--text); }
.nj-fig .f-curve { fill: none; stroke: var(--c-path); stroke-width: 3; }
.nj-fig .f-curve-out { fill: none; stroke: #8a93a6; stroke-width: 1.5; stroke-dasharray: 6 4; }
.nj-fig .f-axis { stroke: #3b4457; stroke-width: 1.5; }
.nj-fig .f-axisline { stroke: var(--c-axisline); stroke-width: 1.8; stroke-dasharray: 7 4; }
.nj-fig .f-mid { stroke: var(--c-mid); stroke-width: 1.5; stroke-dasharray: 1.5 4; stroke-linecap: round; }
.nj-fig .f-domain { fill: var(--blue-soft); }
.nj-fig .f-max { fill: var(--c-max); }
.nj-fig .f-min { fill: var(--c-min); }
.nj-fig .t-max { fill: var(--c-max); font-weight: 700; }
.nj-fig .t-min { fill: var(--c-min); font-weight: 700; }
.nj-fig .t-axis { fill: var(--c-axisline); font-weight: 700; }
.three-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.three-figs figcaption { font-size: 0.85rem; color: var(--muted); text-align: center; }
.nj-table td, .nj-table th { font-size: 0.92rem; }
.nj-fig-wide { max-width: 460px; }
.nj-fig .f-grid { stroke: #e8edf5; stroke-width: 1; }
.nj-fig .f-pmax { fill: none; stroke: var(--c-max); stroke-width: 3; }
.nj-fig .f-pmin { fill: none; stroke: var(--c-min); stroke-width: 3; stroke-dasharray: 8 4; }

@media (max-width: 900px) {
  .nj-sim .sim-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .nj-sim .mode-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .three-figs { grid-template-columns: minmax(0, 1fr); }
  .tv-cmp { font-size: 0.82rem; }
}