/* 筋トレ記録ラボ 共通スタイル
   確定値は docs/layout-style-guide.md を正本とする。 */

:root {
  --bg: #f7f8fa;
  --surface: #ffffff;
  --text: #1c2330;
  --muted: #59616f;
  --base: #1f3a5f;
  --accent: #e8622c;
  /* 小さい文字用の濃い橙。--accent は図の線や塗りには十分だが、
     13〜15pxの文字に使うと薄い背景の上で対比が3.0〜3.4しかない。 */
  --accent-text: #b0450f;
  /* 3本目の線に使う濃い緑。青（--base）・橙（--accent）と色相が離れており、
     白地の上で対比が5.0あるので図の線として読める。 */
  --accent2: #2f7d63;
  --line: #d6dae2;
  --soft: #eef1f6;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 17px;
  line-height: 1.75;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, system-ui, sans-serif;
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding-inline: 20px;
}

.wrap--wide {
  max-width: 960px;
}

/* 表のために広げたページでも、読む文の1行は長くしない。
   960pxいっぱいだと1行54字ほどになり、行の先頭へ目が戻りにくい。
   広さが要るのは表と図だけなので、そこだけ幅いっぱいを使う。

   読む文は外枠の中で中央に置く。左寄せのままだと、題・ナビの左端（280px）と
   本文の左端（180px）が1280pxの画面で100pxずれ、別の列のように見えていた。
   見出しと出典欄も同じ列に入れる。 */
.wrap--wide > p,
.wrap--wide > ul,
.wrap--wide > ol,
.wrap--wide > dl,
.wrap--wide > h2,
.wrap--wide > h3,
.wrap--wide > .callout,
.wrap--wide > .source,
.wrap--wide > .ebars,
.wrap--wide > .sbars,
.wrap--wide > .gbars,
.wrap--wide > .toc {
  max-width: 720px;
  margin-inline: auto;
}

/* ヒーローは小さく作る。padding は 24px から始める（layout-style-guide.md）。 */
.hero {
  background: var(--base);
  color: #fff;
  padding-block: 20px;
}

.hero h1 {
  font-size: 28px;
  line-height: 1.3;
  margin: 0 0 4px;
}

.hero p {
  margin: 0;
  font-size: 15px;
  color: #d9e2ef;
}

.sitenav {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}

.sitenav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  list-style: none;
  margin: 0;
  padding-block: 10px;
  /* padding-block だけだと、ブラウザ標準の左の字下げ40pxが残る。
     list-style: none は印を消すだけで字下げは消さない。 */
  padding-inline: 0;
}

.sitenav a {
  color: var(--base);
}

main {
  padding-block: 32px 48px;
}

h2 {
  font-size: 21px;
  line-height: 1.4;
  margin: 40px 0 12px;
}

h3 {
  font-size: 18px;
  margin: 24px 0 8px;
}

p,
ul,
ol {
  margin: 0 0 16px;
}

a {
  color: var(--base);
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.field .hint {
  display: block;
  font-size: 15px;
  font-weight: 400;
  color: var(--muted);
}

select,
input[type="number"] {
  width: 100%;
  max-width: 100%;
  font-size: 17px;
  font-family: inherit;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.row > * {
  flex: 1 1 200px;
  min-width: 0;
}

button {
  font-size: 17px;
  font-family: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--base);
  border: none;
  border-radius: 6px;
  padding: 11px 22px;
  cursor: pointer;
}

button:hover {
  background: #16294a;
}

.result {
  margin-top: 24px;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 15px;
}

.scroll {
  overflow-x: auto;
  margin-bottom: 16px;
  /* 右端の影を、見えている端に貼り付けるため */
  display: flex;
}

/* 表がまだ右に続いていることを示す影。
   幅が足りているときと、右端まで送ったあとは出さない
   （続きが無いのに「まだある」と見せないため）。
   手がかりを影だけに頼らないよう、文の断りも別に置いてある。 */
.scroll::after {
  content: "";
  flex: 0 0 18px;
  margin-left: -18px;
  position: sticky;
  right: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  background: linear-gradient(to left, rgba(28, 35, 48, 0.18), rgba(28, 35, 48, 0));
}

.scroll.is-overflowing::after {
  opacity: 1;
}

.scroll.is-overflowing.is-end::after {
  opacity: 0;
}

th,
td {
  border: 1px solid var(--line);
  padding: 7px 10px;
  text-align: left;
  white-space: nowrap;
}

th {
  background: var(--soft);
  font-weight: 700;
}

td.num,
th.num {
  text-align: right;
}

tr.me td {
  background: #fdf0e9;
  font-weight: 700;
}

.note {
  font-size: 15px;
  color: var(--muted);
}

.warn {
  font-size: 15px;
  background: #fdf3e6;
  border-left: 3px solid var(--accent);
  padding: 10px 14px;
  margin-bottom: 16px;
}

.source {
  font-size: 15px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  margin-top: 40px;
  padding-top: 16px;
}

/* 出典の長いURLが折り返さず、ページ全体を横に広げていた（2026-09-12実測） */
.source a,
a[href^="http"] {
  overflow-wrap: anywhere;
  word-break: break-word;
}

footer {
  background: var(--surface);
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--muted);
  padding-block: 20px 28px;
}

@media (max-width: 520px) {
  .hero h1 {
    font-size: 24px;
  }
  th,
  td {
    padding: 6px 8px;
  }
}

/* ---- 結果の表示 ---- */

.result-card {
  border-left: 4px solid var(--accent);
}

.result-sub {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 2px;
}

.headline {
  font-size: 21px;
  font-weight: 700;
  margin: 0 0 4px;
}

.headline strong {
  color: var(--accent);
  font-size: 32px;
  letter-spacing: -0.01em;
}

.result .card + .card {
  margin-top: 20px;
}

.result h3 {
  margin-top: 0;
}

/* 分布のかたちと自分の位置 */
.curve {
  display: block;
  width: 100%;
  height: auto;
  margin: 8px 0 4px;
}

.curve-fill {
  fill: #cfd9e6;
}

.curve-line {
  fill: none;
  stroke: var(--base);
  stroke-width: 2;
}

.axis {
  stroke: var(--line);
  stroke-width: 1;
}

.tick {
  stroke: var(--line);
  stroke-width: 1;
}

.ticklabel {
  fill: var(--muted);
  font-size: 13px;
  text-anchor: middle;
}

.axislabel {
  fill: var(--muted);
  font-size: 13px;
  text-anchor: middle;
}

.offnote {
  fill: var(--accent-text);
  font-size: 13px;
}

.me-line {
  stroke: var(--accent);
  stroke-width: 2.5;
}

.me-dot {
  fill: var(--accent);
}

/* 項目の切り替えボタン */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  font-size: 15px;
  font-weight: 700;
  color: var(--base);
  background: var(--surface);
  border: 1px solid var(--base);
  border-radius: 999px;
  padding: 7px 14px;
}

.chip:hover {
  background: var(--soft);
}

.chip .note {
  font-weight: 400;
}

/* ---- 測定項目への導線 ---- */

.itemgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
  padding: 0;
  list-style: none;
}

.itemgrid a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--text);
}

.itemgrid a:hover {
  border-color: var(--base);
}

.itemgrid strong {
  display: block;
  color: var(--base);
}

.itemgrid .note {
  font-size: 13px;
}

/* 現在地 */
.sitenav a[aria-current="page"] {
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
}

/* 見出しの上の余白を、カードの中では詰める */
.card > h2:first-child,
.card > h3:first-child {
  margin-top: 0;
}

/* 頻度別の比較（ドット）
   横軸が0から始まらないため、棒ではなく点で位置だけを示す。 */
.dots {
  position: relative;
  margin: 4px 0 8px;
  padding-top: 24px;
}

.dots::after {
  content: "";
  position: absolute;
  left: calc(var(--me));
  top: 20px;
  bottom: 26px;
  width: 2px;
  background: var(--accent);
}

.dots-me {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
}

.dots-me-label {
  position: absolute;
  left: calc(var(--me));
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-text);
}

.dotrow {
  margin-bottom: 12px;
}

.dotlabel {
  font-size: 15px;
  margin-bottom: 2px;
}

.dottrack {
  position: relative;
  height: 18px;
  border-bottom: 1px solid var(--line);
}

.dot {
  position: absolute;
  top: 5px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--base);
}

.dotrow.is-me .dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px #fbe0d5;
}

.dotrow.is-me .dotlabel {
  font-weight: 700;
}

.dotval {
  position: absolute;
  top: 12px;
  transform: translateX(-50%);
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.dotaxis {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
  padding-top: 4px;
}

/* 年齢によって、先に聞く条件を入れ替える（JSが order を切り替える） */
.axisfields {
  display: flex;
  flex-direction: column;
}

/* 補足の囲み（学校でもらう数字との違いなど） */
.callout {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--base);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 24px 0;
}

.callout h2,
.callout h3 {
  margin-top: 0;
  font-size: 17px;
}

.callout p:last-child {
  margin-bottom: 0;
}

.callout th {
  white-space: normal;
}

/* 横に長い表で、左端の列（年齢や区分名）を固定する。
   スマホで横へスクロールすると、どの行を見ているのか分からなくなるため。 */
.scroll table td:first-child,
.scroll table th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  box-shadow: 1px 0 0 var(--line);
}

.scroll table thead th:first-child {
  background: var(--soft);
  z-index: 2;
}

.scroll table tbody tr:nth-child(even) td {
  background: #fbfcfd;
}

.scroll table tbody tr:nth-child(even) td:first-child {
  background: #fbfcfd;
}

.scroll table tbody tr.me td,
.scroll table tbody tr.me td:first-child {
  background: #fdf0e9;
}

/* URLなどの短い記法 */
code {
  font-size: 15px;
  background: var(--soft);
  border-radius: 3px;
  padding: 1px 5px;
  overflow-wrap: anywhere;
}

/* 年齢ごとの平均の折れ線 */
.chart {
  display: block;
  width: 100%;
  height: auto;
  margin: 8px 0 4px;
}

.chart .grid {
  stroke: var(--line);
  stroke-width: 1;
}

.chart .ylabel {
  fill: var(--muted);
  font-size: 13px;
  text-anchor: end;
}

.chart .xlabel {
  fill: var(--muted);
  font-size: 13px;
  text-anchor: middle;
}

.chart .line {
  fill: none;
  stroke-width: 2;
}

.chart .line--overall {
  stroke: #9aa6b6;
  stroke-dasharray: 4 3;
}

.chart .line--top {
  stroke: var(--base);
}

.chart .line--bottom {
  stroke: var(--accent);
}

.chart .dotc--overall {
  fill: #9aa6b6;
}

.chart .dotc--top {
  fill: var(--base);
}

.chart .dotc--bottom {
  fill: var(--accent);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  font-size: 15px;
}

.legend li::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 3px;
  margin-right: 6px;
  vertical-align: middle;
}

.legend .legend--overall::before {
  background: #9aa6b6;
}

.legend .legend--top::before {
  background: var(--base);
}

.legend .legend--bottom::before {
  background: var(--accent);
}

.chart .unitlabel {
  fill: var(--muted);
  font-size: 13px;
  text-anchor: start;
}

/* 差の大きさ（標準偏差の何個分か）の横棒。0から始まるので長さを比として読んでよい */
.ebars {
  margin: 8px 0 4px;
}

.ebars-head {
  display: flex;
  gap: 18px;
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 10px;
}

.ebars-head span::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 10px;
  margin-right: 6px;
  vertical-align: middle;
  border-radius: 2px;
}

.ebars-head .legend--top::before {
  background: var(--base);
}

.ebars-head .legend--bottom::before {
  background: var(--accent);
}

.ebar {
  margin-bottom: 12px;
}

.ebar-label {
  font-size: 15px;
  margin-bottom: 3px;
}

.ebar-rows {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* 値は棒の外の列に置く。棒の子要素にすると、見た目は薄い背景の上でも
   DOMの親は濃い色の棒になり、読み上げや検査の観点で色の対比が取れない。 */
.ebar-row {
  display: grid;
  grid-template-columns: 1fr 3.6em;
  align-items: center;
  gap: 8px;
}

.ebar-track {
  background: var(--soft);
  border-radius: 2px;
}

.ebar-fill {
  height: 14px;
  min-width: 2px;
  border-radius: 2px;
}

.ebar-fill--m {
  background: var(--base);
}

.ebar-fill--f {
  background: var(--accent);
}

.ebar-val {
  font-size: 13px;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}

/* この区分での目盛り（上位◯%にあたる記録） */
.marks {
  margin: 16px 0 4px;
}

.marks h3 {
  margin: 0 0 4px;
  font-size: 17px;
}

.marklist {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.marklist li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 6px;
  background: var(--surface);
}

.marklist li.is-reached {
  border-color: var(--accent);
  background: #fdf0e9;
}

.markpct {
  font-size: 15px;
  color: var(--muted);
  min-width: 5.5em;
}

.markval {
  font-size: 17px;
  font-weight: 700;
  flex: 1;
}

.markstate {
  font-size: 13px;
  color: var(--muted);
}

.marklist li.is-reached .markstate {
  color: var(--accent-text);
  font-weight: 700;
}

/* 男女差の図。0をまたぐので、0の位置を軸として描く */
.chart .zeroline {
  stroke: var(--text);
  stroke-width: 1.5;
}

.chart .line--third {
  stroke: var(--accent2);
}

.chart .dotc--third {
  fill: var(--accent2);
}

.legend .legend--third::before {
  background: var(--accent2);
}

.gbars {
  margin: 8px 0 4px;
}

.gbar-track {
  position: relative;
  flex: 1;
  height: 15px;
  background: var(--soft);
  border-radius: 3px;
}

.gbar-zero {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--text);
}

.gbar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 2px;
}

.gbar-fill--m {
  background: var(--base);
}

.gbar-fill--f {
  background: var(--accent);
}

/* 右端に置くラベル。クラスで指定しないと .chart .xlabel の text-anchor に負けて
   半分はみ出す（SVGの属性よりCSSが強い）。 */
.chart .endlabel {
  text-anchor: end;
}

/* 割合の横棒。0〜100%で、50%（2つの区分がまったく同じ）の位置に目印を置く */
.sbars {
  margin: 8px 0 4px;
}

.sbar-track {
  position: relative;
  flex: 1;
  height: 15px;
  background: var(--soft);
  border-radius: 3px;
}

.sbar-mark {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--text);
}

.sbar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 2px;
  background: var(--base);
}

/* 本文へ飛ぶ近道。ナビが7項目あるので、キーボードだけで使う人は
   どのページでも7回Tabを押さないと中身に届かない。
   見た目には出さず、焦点が当たったときだけ現れる。 */
.skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--surface);
  color: var(--base);
  padding: 10px 16px;
  border: 2px solid var(--accent);
  border-radius: 0 0 8px 0;
}

.skiplink:focus {
  left: 0;
}

/* ページ内の目次。項目ページは390px幅で10画面ぶんあるので、
   検索から来た人が見たい節へ直接行けるようにする。 */
.toc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 20px 16px;
  margin: 24px 0;
}

.toc-label {
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--muted);
}

.toc ol {
  margin: 0;
  padding-inline: 1.2em 0;
  font-size: 16px;
}

.toc li {
  margin-bottom: 4px;
}

.toc li:last-child {
  margin-bottom: 0;
}