/* 結果画面の共通スタイル。会場PC とスマホの結果ページで共用する。
   色トークン（--bg / --key / --line …）は読み込む側が定義する。

   構成は図鑑の標本ページ。見出しは明朝の日本語で、
   極小の英大文字ラベルは使わない。
   明朝は Windows の游明朝・macOS のヒラギノで足りるので webfont は要らない。 */

.r-wrap {
  --f-mincho: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
}

/* ---------- 通し番号の帯 ---------- */

.r-index {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 9px;
  margin-bottom: 34px;
}

.r-index-t {
  font-family: var(--f-mincho);
  font-size: 15px;
  letter-spacing: 0.3em;
  color: var(--txt);
}

.r-index-n {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--dim);
}

/* ---------- 標本ページ本体 ---------- */

/* 広い画面は 2 段組み。左に図版と計測値、右に名前と振れ方。 */
.r-plate {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  grid-template-areas:
    "fig main"
    "met main";
  grid-template-rows: auto 1fr;
  column-gap: 34px;
  align-items: start;
  margin-bottom: 34px;
}

.r-figure { grid-area: fig; }
.r-main   { grid-area: main; min-width: 0; }
.r-metrics {
  grid-area: met;
  margin-top: 26px;
  border-top: 1px solid var(--line-2, var(--line));
  padding-top: 16px;
}

/* ---------- 図版 ---------- */

.illust {
  margin: 0;
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 12px;
  overflow: hidden;
}

.illust img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

.illust figcaption {
  position: absolute;
  inset: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sunk, var(--bg));
  color: var(--dim-2);
  z-index: 0;
}

.illust.no-img img {
  display: none;
}

.illust .ph-code {
  font-family: var(--f-mincho);
  font-size: 30px;
  letter-spacing: 0.12em;
  color: var(--line);
}

.illust-cap {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--dim-2);
  margin: 8px 0 26px;
}

/* ---------- 見出し ---------- */

.r-who {
  font-size: 13px;
  color: var(--key);
  margin-bottom: 4px;
}

.r-name {
  font-family: var(--f-mincho);
  font-size: clamp(48px, 9vw, 74px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: -6px 0 0;
}

.r-alias {
  font-family: var(--f-mincho);
  font-size: 20px;
  color: var(--key);
  margin-top: 8px;
}

.r-catch {
  color: var(--dim);
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.8;
}

/* ---------- セクション見出し ---------- */

.r-sec,
.r-sub {
  margin-bottom: 30px;
}

.r-sec {
  border-top: 1px solid var(--line);
  padding-top: 22px;
}

.r-sub {
  margin-top: 32px;
  margin-bottom: 0;
}

.r-sub + .r-sub {
  border-top: 1px solid var(--line-2, var(--line));
  padding-top: 18px;
}

.r-sec > h2,
.r-sub > h2 {
  font-family: var(--f-mincho);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--txt);
  font-weight: 400;
  margin: 0 0 16px;
}

.r-sec h3 {
  font-family: var(--f-mincho);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--dim);
  font-weight: 400;
  margin: 0 0 10px;
}

/* ---------- 4軸バー ---------- */

.ax-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.ax-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.ax-name {
  font-size: 13px;
  color: var(--dim-2);
  font-variant-numeric: tabular-nums;
}

.ax-name.on {
  color: var(--txt);
  font-weight: 700;
}

.ax-bar {
  display: flex;
  height: 7px;
  margin-top: 5px;
  background: var(--panel);
  overflow: hidden;
}

.ax-bar .seg {
  display: block;
  height: 100%;
  background: var(--line);
}

.ax-bar .seg.win {
  background: var(--key);
}

.ax-note {
  font-size: 11.5px;
  color: var(--dim-2);
  margin-top: 5px;
}

/* ---------- 六つの角度 ---------- */

.r-score-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 26px;
  align-items: center;
}

.sc-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.sc {
  display: grid;
  grid-template-columns: 3em 1fr 2.2em auto;
  gap: 10px;
  align-items: center;
}

.sc-l {
  font-size: 13.5px;
}

.sc-bar {
  display: block;
  height: 5px;
  background: var(--panel);
}

.sc-bar i {
  display: block;
  height: 100%;
}

.sc-v {
  font-family: var(--f-mono);
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sc-r {
  font-family: var(--f-mincho);
  font-size: 15px;
  color: var(--dim);
  width: 1.2em;
  text-align: center;
}

/* ---------- 計測値 ---------- */

.mt-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.mt {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 12.5px;
}

.mt-l {
  color: var(--dim);
}

.mt-v {
  font-family: var(--f-mono);
  font-size: 13.5px;
  color: var(--txt);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---------- 本文 ---------- */

.r-body {
  line-height: 2.05;
  margin: 0;
  max-width: 62ch;
}

/* ---------- 下段 ---------- */

.foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 26px;
}

.bullets {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 14px;
}

.foot-note {
  font-size: 12px;
  color: var(--dim-2);
  margin-top: 5px;
}

.foot-opp .bullets {
  font-family: var(--f-mono);
  letter-spacing: 0.06em;
}

/* ---------- 狭い画面 ---------- */

@media (max-width: 720px) {
  /* 1 段に畳むとき、grid の行順のままだと
     図版 → 計測値の数字 → タイプ名 になり、一番見たいものが数字の後ろに埋まる。
     flex に切り替えて 図版 → 名前と振れ方 → 計測値 の順に並べ替える。 */
  .r-plate {
    display: flex;
    flex-direction: column;
    gap: 22px;
    /* grid 用の align-items: start が flex では flex-start として効き、
       子が内容幅まで縮んでしまう。1 段のときは必ず伸ばす。 */
    align-items: stretch;
  }
  .r-figure { order: 1; }
  .r-main   { order: 2; }
  .r-metrics { order: 3; margin-top: 0; }

  .r-figure .illust {
    max-width: 220px;
    margin: 0 auto;
  }
  .illust-cap {
    max-width: 220px;
    margin: 8px auto 0;
  }

  .r-score-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* 計測値は 1 行 1 項目だと縦に伸びすぎるので 2 列にする。 */
  .mt-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 9px 18px;
  }
}

/* 一番狭い端末。項目名が折り返して値と衝突しないようにする。 */
@media (max-width: 380px) {
  .mt-list {
    grid-template-columns: 1fr;
  }
  .sc {
    grid-template-columns: 2.8em minmax(0, 1fr) 2em auto;
    gap: 8px;
  }
  .foot-grid {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 20px;
  }
  .r-index {
    flex-wrap: wrap;
    gap: 2px 12px;
  }
}

/* ------------------------------------------------------------------
   会場PC 向けの 3 列。スクロールなしで 1 画面に収める。
   機種で画面の高さが違うので、はみ出したぶんは view.js の fitToScreen が縮める。
   ------------------------------------------------------------------ */

.r-dense {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr) 268px;
  gap: 0 30px;
  align-items: start;
}

.r-dense .dc {
  min-width: 0;
}

/* 3 列に入れたブロックは、縦の余白と罫を詰める。 */
.r-dense .r-sec,
.r-dense .r-sub {
  margin: 0 0 16px;
  padding-top: 14px;
}

.r-dense .dc > :first-child {
  border-top: 0;
  padding-top: 0;
}

.r-dense .r-sec > h2,
.r-dense .r-sub > h2 {
  margin-bottom: 10px;
}

.r-dense .r-figure {
  margin-bottom: 14px;
}

.r-dense .illust-cap {
  margin-bottom: 0;
}

.r-dense .r-metrics {
  margin-top: 0;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.r-dense .mt-list {
  gap: 6px;
}

.r-dense .mt {
  font-size: 11.5px;
}

.r-dense .mt-v {
  font-size: 12.5px;
}

.r-dense .r-name {
  font-size: 60px;
  margin-top: -4px;
}

.r-dense .r-alias {
  font-size: 17px;
  margin-top: 5px;
}

.r-dense .r-catch {
  font-size: 13px;
  margin-top: 7px;
}

.r-dense .r-main {
  margin-bottom: 16px;
}

.r-dense .ax-list {
  gap: 10px;
}

.r-dense .ax-name {
  font-size: 12px;
}

.r-dense .r-body {
  font-size: 12.5px;
  line-height: 1.85;
  max-width: none;
}

.r-dense .foot-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 20px;
}

.r-dense .bullets {
  font-size: 13px;
  gap: 3px;
}

.r-dense .r-score-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

.r-dense .radar {
  max-width: 236px;
}

.r-dense .sc-list {
  gap: 8px;
}

.r-dense .sc {
  grid-template-columns: 2.8em minmax(0, 1fr) 2em auto;
  gap: 8px;
}

.r-dense .sc-l,
.r-dense .sc-v {
  font-size: 12.5px;
}

/* 1 画面に収めるための詰め。3 列の高さがなるべく揃うようにする。 */

.r-dense .illust {
  max-width: 200px;
}

.r-dense .ax-list {
  gap: 8px;
}

.r-dense .ax-bar {
  margin-top: 4px;
}

.r-dense .r-about {
  margin-bottom: 14px;
}

.r-dense .foot-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 14px;
}

.r-dense .r-foot h3 {
  margin-bottom: 6px;
}

.r-dense .r-take {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.r-dense .radar {
  max-width: 208px;
}

/* さらに詰める。1366x768 のノートでも縮小なしで収まるところまで落とす。 */

.r-dense .illust {
  max-width: 172px;
}

.r-dense .radar {
  max-width: 180px;
}

.r-dense .r-name {
  font-size: 52px;
}

.r-dense .r-alias {
  font-size: 16px;
}

/* 計測値は 2 列に。フル版は 11 項目あり、1 列だと右列だけ突出する。 */
.r-dense .mt-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 14px;
}

.r-dense .mt {
  display: block;
}

.r-dense .mt-l {
  display: block;
  font-size: 11px;
  line-height: 1.4;
}

.r-dense .mt-v {
  font-size: 13px;
}

.r-dense .r-sec,
.r-dense .r-sub {
  margin-bottom: 12px;
  padding-top: 12px;
}

.r-dense .r-about {
  margin-bottom: 12px;
}

.r-dense .r-body {
  line-height: 1.8;
}

/* フル版は 6 軸 + 11 計測値で右列だけ伸びる。そこを 3 列に割って揃える。 */

.r-dense .mt-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px 12px;
}

.r-dense .radar {
  max-width: 168px;
}

.r-dense .r-body {
  line-height: 1.72;
}

.r-dense .r-sec,
.r-dense .r-sub {
  margin-bottom: 10px;
  padding-top: 10px;
}

.r-dense .r-main {
  margin-bottom: 12px;
}

.r-dense .ax-list {
  gap: 7px;
}

.r-dense .sc-list {
  gap: 7px;
}

.r-dense .foot-grid {
  gap: 8px 14px;
}

.r-dense .r-take {
  margin-top: 10px;
  padding-top: 12px;
}