/* 微分係数と導関数のページ専用。共通の部品は style.css */
:root {
  --c-sec: #c2410c;   /* 直線 AB：橙・実線 */
  --c-tan: #1f5fd6;   /* 接線：青・破線 */
  --c-dx: #15803d;    /* 横の変化：緑 */
  --c-dy: #6d28d9;    /* 縦の変化：紫 */
  --c-gap: #be123c;   /* ずれ：赤・点線 */
}
.bk-sim [hidden] { display: none !important; }
.bk-sim #plot { display: block; width: 100%; cursor: pointer; touch-action: pan-y; }
.bk-sim .sim-stage { min-width: 0; }

/* 図の中 */
.bk-grid { stroke: #e8edf5; stroke-width: 1; }
.bk-axis { stroke: #3b4457; stroke-width: 1.5; }
.bk-tick { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.bk-axis-label { font-size: 13px; font-style: italic; fill: var(--text); }
.bk-frame { fill: none; stroke: var(--line); stroke-width: 1; }
.bk-curve { fill: none; stroke: var(--c-path); stroke-width: 3.2; stroke-linejoin: round; }
.bk-sec { stroke: var(--c-sec); stroke-width: 3; }
.bk-tan { stroke: var(--c-tan); stroke-width: 2.4; stroke-dasharray: 9 5; }
.bk-tan2 { stroke: #0f766e; stroke-width: 2.4; stroke-dasharray: 3 4; stroke-linecap: round; }
.bk-tan3 { stroke: var(--c-dy); stroke-width: 2.4; stroke-dasharray: 14 4 3 4; }
.bk-leg-x { stroke: var(--c-dx); stroke-width: 2.6; }
.bk-leg-y { stroke: var(--c-dy); stroke-width: 2.6; }
.bk-leg-gap { stroke: var(--c-gap); stroke-width: 4; stroke-dasharray: 2 4; stroke-linecap: round; }
.bk-guide { stroke: #5c677d; stroke-width: 1.2; stroke-dasharray: 2 4; }
.bk-a { fill: var(--c-tan); stroke: #fff; stroke-width: 1.5; }
.bk-b { fill: var(--c-sec); stroke: #fff; stroke-width: 1.5; }
.bk-b-on { fill: #fff; stroke: var(--c-sec); stroke-width: 2.5; }
.bk-p { fill: var(--c-dy); stroke: #fff; stroke-width: 1.5; }
.bk-other { fill: #fff; stroke: var(--c-gap); stroke-width: 2.5; }
.bk-trail { fill: var(--c-sec); }
.bk-dcurve { fill: none; stroke: var(--c-sec); stroke-width: 2.2; }
.bk-dnow { fill: var(--c-sec); stroke: #fff; stroke-width: 1.5; }
.bk-dopen { fill: #fff; stroke: var(--c-sec); stroke-width: 2; }
.bk-bar { stroke: var(--c-dy); stroke-width: 4; }
.bk-t { font-size: 12.5px; font-weight: 700; fill: var(--text); paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; font-variant-numeric: tabular-nums; }
.bk-t-a { fill: var(--c-tan); }
.bk-t-b { fill: var(--c-sec); }
.bk-t-x { fill: var(--c-dx); }
.bk-t-y { fill: var(--c-dy); }
.bk-t-gap { fill: var(--c-gap); }
.bk-t-p { fill: var(--c-dy); }
.bk-t-sub { fill: var(--muted); font-weight: 500; }

/* 操作部 */
.bk-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 2px 0 6px; }
.bk-presets .btn { font-size: 0.86rem; padding: 6px 4px; min-height: 40px; min-width: 0; }
.bk-presets .btn[aria-pressed="true"], .bk-kind .btn[aria-pressed="true"] { background: var(--blue); color: #fff; }
.bk-kind { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 8px 0 4px; }
.bk-slider { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) 2.8em; align-items: center; gap: 6px; margin: 2px 0; }
.bk-slider label { font-size: 0.9rem; font-weight: 700; }
.bk-slider output { min-width: 0; text-align: right; font-weight: 700; color: var(--blue-dark); }
.bk-slider input[type="range"] { width: 100%; height: 32px; accent-color: var(--blue); margin: 0; }
.bk-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 6px 0; }
.bk-btns .btn { min-width: 0; padding: 6px 4px; font-size: 0.9rem; }
.bk-sim .tri-status { min-height: 5em; }
.bk-formula { font-weight: 700; margin: 0 0 4px; overflow-wrap: anywhere; }

/* 読み取り */
.bk-big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 8px; }
.bk-big > div { border: 1.5px solid var(--line); border-radius: 8px; padding: 4px 8px; min-width: 0; }
.bk-big .n { display: block; font-size: 0.78rem; color: var(--muted); line-height: 1.35; }
.bk-big output { display: block; text-align: left; min-width: 0; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bk-big .is-sec { border-color: var(--c-sec); }
.bk-big .is-sec output { color: var(--c-sec); }
.bk-big .is-tan { border-color: var(--c-tan); }
.bk-big .is-tan output { color: var(--c-tan); }
.bk-lines { margin: 0 0 8px; padding: 0; list-style: none; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.bk-lines li { padding: 2px 0; overflow-wrap: anywhere; }
.bk-lines .l { display: block; font-size: 0.8rem; color: var(--muted); }
.bk-hbtn { font: inherit; font-variant-numeric: tabular-nums; border: 1px solid var(--line); background: #fff; color: var(--blue-dark); border-radius: 6px; padding: 2px 6px; min-height: 30px; cursor: pointer; width: 100%; text-align: left; }
.bk-hbtn:hover { background: var(--blue-soft); }
.bk-hbtn[aria-pressed="true"] { background: var(--blue-soft); border-color: var(--blue); font-weight: 700; }
.bk-htable td, .bk-htable th { font-size: 0.88rem; }
.bk-htable .bk-lim td, .bk-htable .bk-lim th { font-weight: 700; }
.bk-steps { margin: 0; padding-left: 1.3em; font-size: 0.93rem; }
.bk-steps li { margin: 0 0 4px; overflow-wrap: anywhere; }
.bk-tlist { margin: 6px 0 0; padding: 0; list-style: none; font-weight: 700; font-size: 0.95rem; }
.bk-tlist li { padding: 2px 0; overflow-wrap: anywhere; }
.bk-result { font-weight: 700; margin: 6px 0 0; }
.bk-result.is-near { color: #15803d; }
.bk-result.is-far { color: #9a3412; }

/* 図の説明 */
.lg-sec { stroke: var(--c-sec); stroke-width: 3; }
.lg-tan { stroke: var(--c-tan); stroke-width: 2.4; stroke-dasharray: 9 5; }
.lg-curve { stroke: var(--c-path); stroke-width: 3.2; }
.lg-x { stroke: var(--c-dx); stroke-width: 2.6; }
.lg-y { stroke: var(--c-dy); stroke-width: 2.6; }
.lg-gap { stroke: var(--c-gap); stroke-width: 4; stroke-dasharray: 2 4; stroke-linecap: round; }
.lg-a { fill: var(--c-tan); }
.lg-b { fill: var(--c-sec); }
.lg-p { fill: var(--c-dy); }
.lg-other { fill: #fff; stroke: var(--c-gap); stroke-width: 2.2; }

/* 本文の図 */
.bk-fig { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.bk-fig text { font-family: var(--font); font-size: 13px; fill: var(--text); }
.bk-fig .f-axis { stroke: #3b4457; stroke-width: 1.5; }
.bk-fig .f-curve { fill: none; stroke: var(--c-path); stroke-width: 3; }
.bk-fig .f-sec { stroke: var(--c-sec); stroke-width: 2.6; }
.bk-fig .f-tan { stroke: var(--c-tan); stroke-width: 2.2; stroke-dasharray: 8 5; }
.bk-fig .f-x { stroke: var(--c-dx); stroke-width: 2.4; }
.bk-fig .f-y { stroke: var(--c-dy); stroke-width: 2.4; }
.bk-fig .p-a { fill: var(--c-tan); }
.bk-fig .p-b { fill: var(--c-sec); }
.bk-fig .t-sec { fill: var(--c-sec); font-weight: 700; }
.bk-fig .t-tan { fill: var(--c-tan); font-weight: 700; }
.bk-fig .t-x { fill: var(--c-dx); font-weight: 700; }
.bk-fig .t-y { fill: var(--c-dy); font-weight: 700; }
.bk-table td, .bk-table th { font-size: 0.92rem; }

@media (max-width: 900px) {
  .bk-sim .sim-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .bk-sim .mode-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-big { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}