/* ★★★**`PL-06`（診断・参加者）の 見た目**——★★★**`210` の 決まり «そのまま»**。
 *
 * ★★★**色は 決裁済みの 案 `A`**（`AP-OWN-29`「Aで進めましょう」）
 *   ——★★★**当方が 色を 作って いません**（★`screen_visual_v4.json` の
 *   `palettes.A` «そのまま»）。
 * ★★★**文字・余白の 刻みも `210` «そのまま»**
 *   （★画面名 24／小見出し 18／本文 16／最小 12・★外周 32／節 24／部品 16／欄の中 8）。
 * ★★★**ビルド 0・新しい 依存 0**。
 */

:root {
  /* ★★★**案 `A`**（★採用・`AP-OWN-29`） */
  --ji: #FFFFFF;
  --ji-fuku: #F4F6F8;
  --moji: #1A1A1A;
  --moji-fuku: #4A5568;
  --omo: #1F3A5F;
  --omo-moji: #FFFFFF;
  --keikoku: #B03030;
  --keikoku-ji: #FDECEC;
  --chui: #8A5A00;
  --chui-ji: #FFF6E5;
  --seiko: #1E6B3A;
  --seiko-ji: #EAF6EE;
  --kyokai: #6B7A8A;
  --shoten: #0B63CE;

  /* ★★★**`210` の 刻み** */
  --t-gamen: 24px;
  --t-komidashi: 18px;
  --t-honbun: 16px;
  --t-saisho: 12px;
  --s-gaishu: 32px;
  --s-setsu: 24px;
  --s-buhin: 16px;
  --s-naka: 8px;
  --tap: 44px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: var(--s-gaishu);
  background: var(--ji);
  color: var(--moji);
  font-size: var(--t-honbun);
  font-family: "Noto Sans JP", "Yu Gothic UI", system-ui, sans-serif;
  line-height: 1.7;
}

h1 { font-size: var(--t-gamen); margin: 0 0 var(--s-setsu); }
h2 { font-size: var(--t-komidashi); margin: 0 0 var(--s-buhin); }

.pl06__section {
  margin-bottom: var(--s-setsu);
  padding: var(--s-buhin);
  background: var(--ji-fuku);
  border: 1px solid var(--kyokai);
  border-radius: 6px;
}

/* ★★★**帯**（★`210` の `state_look` «そのまま»） */
.pl06__band {
  padding: var(--s-naka) var(--s-buhin);
  margin-bottom: var(--s-buhin);
  border-radius: 4px;
  font-size: var(--t-honbun);
}
.pl06__band--error { background: var(--keikoku-ji); color: var(--keikoku); }
.pl06__band--notice { background: var(--chui-ji); color: var(--chui); }
.pl06__band--ok { background: var(--seiko-ji); color: var(--seiko); }
/* ★★★**正常は 帯を 出しません**（★`state_look.正常`） */
.pl06__band--none { display: none; }

/* ★★★**軸の 札**——★★★**`0` 点と 未算出を 書き分けます** */
.pl06__axes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-buhin);
}
.pl06__axis {
  padding: var(--s-buhin);
  background: var(--ji);
  border: 1px solid var(--kyokai);
  border-radius: 4px;
}
.pl06__axis-name { font-size: var(--t-komidashi); margin: 0 0 var(--s-naka); }
.pl06__score { font-size: var(--t-gamen); font-weight: 700; }
.pl06__score--unmeasured { color: var(--chui); font-size: var(--t-honbun); }
.pl06__max { color: var(--moji-fuku); font-size: var(--t-saisho); }
.pl06__why { color: var(--chui); font-size: var(--t-saisho); margin: var(--s-naka) 0 0; }

/* ★★★**比較**（★前回・今回・差） */
.pl06__table-wrap { overflow-x: auto; }   /* ★★表の «中だけ» 横スクロール */
table.pl06__table { border-collapse: collapse; width: 100%; min-width: 520px; }
.pl06__table th, .pl06__table td {
  padding: var(--s-naka);
  border-bottom: 1px solid var(--kyokai);
  text-align: left;
  font-size: var(--t-honbun);
}
.pl06__table thead th { background: var(--omo); color: var(--omo-moji); }
/* ★★★**見出しは 折り返しません**（★Codex 連携280 §2——★★★**実測で
 *   `SA-09`（10 欄）の 「状態」「版」が «1 文字ずつ» 折り返して いました**）。
 *   ★★★**必須の 列を 消しません**——★★★**表の «中だけ» 横スクロール**
 *   （`.pl06__table-wrap`）で 読みます。 */
.pl06__table thead th { white-space: nowrap; }
.pl06__delta--up { color: var(--seiko); }
.pl06__delta--down { color: var(--keikoku); }
.pl06__delta--none { color: var(--chui); font-size: var(--t-saisho); }

/* ★★★**押せる もの**（★★44px 以上・`v.ui.tap_min`） */
.pl06__button {
  min-height: var(--tap);
  min-width: var(--tap);
  padding: var(--s-naka) var(--s-buhin);
  background: var(--omo);
  color: var(--omo-moji);
  border: none;
  border-radius: 4px;
  font-size: var(--t-honbun);
  cursor: pointer;
}
.pl06__button:focus-visible { outline: 3px solid var(--shoten); outline-offset: 2px; }
/* ★★★**`a` を ボタンに 使う ときの 揃え**（★入口・結果の 導線）
 *   ——★★★**下線を 残すと «文» に 見えます**ので 外し、
 *   ★★★**狭い 幅では 縦に 積みます**（★★★**390px で 重なって いました**・★実測）。 */
a.pl06__button {
  display: inline-block;
  text-decoration: none;
  line-height: 1.4;
  margin: 0 var(--s-naka) var(--s-naka) 0;
}
@media (max-width: 480px) {
  a.pl06__button { display: block; margin-right: 0; text-align: center; }
}
.pl06__note { color: var(--moji-fuku); font-size: var(--t-saisho); }
/* ★★★**入力欄**（★`PL-01`）——★★★**押せる 高さは `v.ui.tap_min`**（★`210`） */
.pl06__input {
  min-height: var(--tap);
  width: 100%;
  box-sizing: border-box;
  padding: var(--s-naka);
  font-size: var(--t-honbun);
  border: 1px solid var(--kyokai);
  border-radius: 4px;
}
.pl06__button[disabled] { opacity: .55; cursor: default; }

/* ★★★**読むだけの 画面に «押せそう» を 置きません**（★`RP-02` の 注意） */
.pl06__readonly { cursor: default; }

@media (max-width: 768px) {
  body { padding: var(--s-buhin); }
  .pl06__axes { grid-template-columns: 1fr; }
}