/* =========================================================================
   旧大会の速報ページ (リデザイン版)

   ⚠ 出どころは Claude Design の «速報ページリデザイン» / «駅伝速報ページリデザイン»。
     色・字・間隔のトークンは NOGU-LAB Design System (`colors_and_type.css`) の
     **セマンティック層**をそのまま持ってきている。値を直書きしないこと。

   ⚠ 旧デザインの CSS (`legacy-marathon.css` / `legacy-ekiden.css`) とは
     **併用しない**。クラス名は `lg-` で始め、旧 CSS と衝突させない。

   ⚠ 元デザインにある «速報中» «自動更新 ON» «10:42 更新» «4 区 進行中» は
     **入れていない**。ここに出すのは終わった大会の保存版で、
     進行中のふりをすると嘘になる。
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400..700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap");

:root {
  /* ---- Purple: プライマリ ---- */
  --nl-purple-100: #F3E8FF;
  --nl-purple-700: #7E22CE;
  --nl-purple-800: #6B21A8;
  --nl-purple-900: #581C87;

  /* ---- Gray / Stone: ニュートラル ---- */
  --nl-gray-100: #F5F5F4;
  --nl-gray-200: #E7E5E4;
  --nl-gray-300: #D6D3D1;
  --nl-gray-400: #A8A29E;
  --nl-gray-500: #78716C;
  --nl-gray-600: #57534E;
  --nl-gray-700: #44403C;
  --nl-gray-900: #1C1917;
  --nl-white: #FFFFFF;

  /* ---- 注意喚起 ---- */
  --nl-yellow-100: #FEF3C7;
  --nl-yellow-800: #92400E;

  /* ---- セマンティック層 (部品はこちらを使う) ---- */
  --nl-text-default: var(--nl-gray-900);
  /* ⚠ ページ地 (`--nl-bg-subtle`) の上で 4.5:1 を満たす濃さにする。
     gray-500 だと 4.4:1 で AA に届かない (レビューで実測) */
  --nl-text-subtle: var(--nl-gray-600);
  --nl-text-muted: var(--nl-gray-500);
  --nl-text-inverse: var(--nl-white);
  --nl-text-assist: var(--nl-purple-700);
  --nl-text-warning: var(--nl-yellow-800);
  --nl-bg-default: var(--nl-white);
  --nl-bg-subtle: var(--nl-gray-100);
  --nl-bg-assist: var(--nl-purple-100);
  --nl-bg-assist-strong: var(--nl-purple-700);
  --nl-bg-warning: var(--nl-yellow-100);
  --nl-border-default: var(--nl-gray-300);
  /* ⚠ 以前は定義が無いまま `.lg-chart__more` と `.lg-rt__row` が参照しており、
     宣言ごと無効になって **区切り線が 1 本も出ていなかった** */
  --nl-border-subtle: var(--nl-gray-200);
  /* 押している間の地の色 (カードの行など)。
     ⚠ このページで足したもの。DS に同じ役割の名前があればそちらへ寄せる */
  --nl-bg-pressed: var(--nl-gray-200);
  --nl-shadow-card: 0 4px 4px rgba(0, 0, 0, 0.10);
  /* QR モーダルの背景を暗くする幕 */
  --nl-bg-scrim: rgba(0, 0, 0, 0.50);

  --nl-radius-xs: 4px;
  --nl-radius-sm: 8px;
  --nl-radius-md: 12px;
  --nl-radius-pill: 9999px;

  --nl-font-jp: "Hiragino Kaku Gothic Pro", "Hiragino Sans", "Noto Sans JP",
    -apple-system, BlinkMacSystemFont, "Yu Gothic", "Meiryo", sans-serif;
  /* ⚠ 数字専用。記録と順位はこちらで組む (字幅がそろって桁が読みやすい) */
  --nl-font-display: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont,
    "Inter", sans-serif;
  --nl-tracking-jp: 0.04em;

  /* PC 版に切り替える幅。⚠ 変えるときは下のメディアクエリ全部を揃える */
  --lg-page-max: 1024px;
}

/* =========================================================================
   土台
   ========================================================================= */
body.lg {
  margin: 0;
  background: var(--nl-gray-200);
  color: var(--nl-text-default);
  font-family: var(--nl-font-jp);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: var(--nl-tracking-jp);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.lg-page {
  max-width: var(--lg-page-max);
  margin: 0 auto;
  background: var(--nl-bg-subtle);
  box-shadow: var(--nl-shadow-card);
  min-height: 100vh;
}

.lg-num { font-family: var(--nl-font-display); letter-spacing: 0; }

/* ⚠ キーボード操作でも «いまどこか» が分かるように。色だけに頼らない */
.lg :focus-visible {
  outline: 3px solid var(--nl-purple-700);
  outline-offset: 2px;
  border-radius: var(--nl-radius-xs);
}

/* ⚠ **hover の見た目は必ず `@media (hover: hover)` の中に書く。**
   iPhone はタップした要素に :hover を付けたままにするので、カードを押して詳細へ行き、
   戻ってくると «その 1 枚だけ灰色» のまま残る (本番の実機で発生)。
   指で押した合図は :active で出す (legacy-certificate.js が iOS でも効くようにしている) */

/* «記録証へ» などのページ内リンク。⚠ 動きを減らす設定の人には飛ぶだけにする */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* 線だけのアイコン (検索・QR・矢印)。⚠ 絵文字は使わない。色は文字色に従う */
.lg-icon {
  flex: none; width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* =========================================================================
   ヘッダー (バナー + 大会名)
   ========================================================================= */
.lg-hero { background: var(--nl-bg-default); }
.lg-hero__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--nl-border-default);
}
.lg-hero__names { min-width: 0; }
.lg-hero__title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; }
/* ⚠ «先頭へ戻る» でフォーカスを受ける。マウス・指で戻ったときは枠を出さない */
.lg-hero__title:focus:not(:focus-visible) { outline: none; }
.lg-hero__meta { margin: 2px 0 0; font-size: 12px; color: var(--nl-text-subtle); }
/* ⚠ バナーは文字入りのグラフィック。**切り抜かない** (cover にすると大会名が欠ける) */
.lg-hero__image { display: block; width: 100%; height: auto; }

.lg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--nl-white); color: var(--nl-gray-900);
  border: none; border-radius: var(--nl-radius-pill);
  padding: 6px 12px;
  font-family: var(--nl-font-jp); font-size: 12px; font-weight: 600;
  letter-spacing: var(--nl-tracking-jp);
  cursor: pointer;
}
@media (hover: hover) { .lg-chip:hover { background: var(--nl-gray-100); } }
.lg-chip--outline {
  flex: none;
  color: var(--nl-text-assist); background: var(--nl-bg-default);
  border: 1px solid var(--nl-border-default);
}

.lg-summary {
  background: var(--nl-bg-default);
  border-bottom: 1px solid var(--nl-border-default);
  padding: 12px 16px;
  font-size: 12px; color: var(--nl-gray-600);
}

/* =========================================================================
   本文
   ========================================================================= */
.lg-body { padding: 16px; display: flex; flex-direction: column; gap: 16px; }

/* ⚠ **ここを 900px 以上にだけ書いてはいけない。** 検索・種目・見出し・グラフ・一覧は
   `.lg-main` の «中» に並ぶので、ここに gap が無いとスマホで全部が隙間ゼロで
   くっつく (本番のスマホ表示で発生。詳細ページの `.lg-detail__main` と同じ事故)。
   PC の 2 カラムはメディアクエリ側で grid に組み替える。 */
.lg-side, .lg-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ⚠ `box-sizing: border-box` を外さない。PC で `width: 300px` を指定しているが、
   content-box だと padding と枠が足されて 334px になり、900px 付近で見出しが折り返した */
.lg-search {
  display: flex; align-items: center; gap: 10px;
  box-sizing: border-box;
  min-height: 44px; padding: 0 16px;
  background: var(--nl-bg-default);
  border: 1px solid var(--nl-border-default);
  border-radius: var(--nl-radius-pill);
  font-size: 14px; color: var(--nl-text-subtle);
  text-decoration: none;
}
@media (hover: hover) { .lg-search:hover { background: var(--nl-bg-subtle); } }
.lg-search__icon { width: 18px; height: 18px; color: var(--nl-text-muted); }
.lg-search__label { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lg-field { display: flex; flex-direction: column; gap: 6px; }
.lg-field__label { font-size: 12px; font-weight: 600; color: var(--nl-text-subtle); }
.lg-field__select {
  appearance: none;
  width: 100%; height: 48px; padding: 0 40px 0 14px;
  background: var(--nl-bg-default) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2378716C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid var(--nl-border-default);
  border-radius: var(--nl-radius-sm);
  font-family: var(--nl-font-jp); font-size: 15px; font-weight: 600;
  letter-spacing: var(--nl-tracking-jp); color: var(--nl-text-default);
}

/* 一覧の見出し (種目名 ／ 件数 + スタート時刻など)。
   ⚠ スマホでは «操作 (検索・種目)» と «中身 (件数・一覧)» の間を少し空ける */
.lg-mainhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 8px; }
.lg-mainhead__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* ⚠ h2 / p の既定の margin を必ず消す。残すと見出しの上下だけ間延びする */
.lg-mainhead__title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4; }
.lg-mainhead__meta { margin: 0; font-size: 12px; color: var(--nl-text-subtle); }
.lg-mainhead__link {
  flex: none; min-height: 44px; display: inline-flex; align-items: center;
  font-size: 13px; font-weight: 600; color: var(--nl-text-assist); white-space: nowrap;
}

/* =========================================================================
   記録の一覧 (1 セットのマークアップで «カード» にも «表» にもなる)

   ⚠ **同じ内容を 2 通り出さない。** 以前はカードとテーブルを両方 HTML に出して
     CSS で片方を消していたが、400 件で DOM の 6 割が無駄になり、
     片方だけ直して中身がずれる事故も起きた。
     ここでは grid の領域指定を差し替えるだけで見え方を変える。
   ========================================================================= */
.lg-list { display: flex; flex-direction: column; }
.lg-rows { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }

/* ⚠ 右端の «›» は «押せるカード» の合図。スマホで出していなかったため、
   ただの表示に見えて詳細 (記録証) まで辿り着けない人がいた */
.lg-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto 8px;
  grid-template-areas:
    "rank name time chevron"
    "rank meta time chevron";
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  background: var(--nl-bg-default);
  border-radius: var(--nl-radius-md);
  box-shadow: var(--nl-shadow-card);
  padding: 14px 14px 14px 16px;
  color: inherit;
  text-decoration: none;
  /* ⚠ iOS の灰色の押下表示を消し、:active の色だけで押したことを伝える */
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease-out;
}
@media (hover: hover) { .lg-row:hover { background: var(--nl-bg-subtle); } }
.lg-row:active { background: var(--nl-bg-pressed); }

/* ⚠ 数字は **等幅数字** で組む。SF Pro / Inter の数字は既定でプロポーショナルで、
   行ごとに «00:42:27» と «00:40:58» の幅が 3px ずれて桁が揃わなかった */
.lg-row__rank, .lg-row__no, .lg-row__value, .lg-row__gap { font-variant-numeric: tabular-nums; }

.lg-row__rank {
  grid-area: rank;
  width: 36px; height: 36px; border-radius: var(--nl-radius-pill);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--nl-font-display); font-size: 16px; font-weight: 600;
  color: var(--nl-gray-600);
}
.lg-row__rank--first { background: var(--nl-bg-assist-strong); color: var(--nl-text-inverse); }
.lg-row__rank--podium { background: var(--nl-bg-assist); color: var(--nl-text-assist); }

/* 名前 + 備考タグ。
   ⚠ 入りきらないときは **タグを次の行へ折り返す**。横に並べたまま縮めると
   PC の狭い幅で «★大会新記録» に押されて名前が 2 文字 («下川…») まで削られた */
.lg-row__name {
  grid-area: name; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px;
  min-width: 0; font-size: 15px; font-weight: 700;
}
.lg-row__nametext { min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-row__note {
  flex: none; max-width: 100%; box-sizing: border-box;
  padding: 1px 8px; border: 1px solid var(--nl-border-default); border-radius: var(--nl-radius-pill);
  color: var(--nl-text-subtle);
  font-size: 11px; font-weight: 600; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ★ の付いた備考 («★大会新記録») だけ塗る。⚠ 枠の 1px ぶんを padding で補って高さを揃える */
.lg-row__note--highlight {
  padding: 2px 8px; border: none;
  background: var(--nl-bg-assist); color: var(--nl-text-assist);
}

/* ⚠ スマホでは «No. と 所属» を 1 行にまとめる。PC では display:contents で
   包みを消し、grid の一員として並ぶ */
.lg-row__meta { grid-area: meta; display: flex; gap: 6px; min-width: 0; font-size: 12px; color: var(--nl-text-subtle); }
.lg-row__no::before { content: "No. "; }
.lg-row__sub:not(:empty)::before { content: "／ "; }
/* ⚠ **ゼッケンは縮めない。** 所属が長いと両方が縮み «No. 25…» と番号が読めなくなった
   (検索結果で発生)。… で切るのは所属のほう */
.lg-row__no { flex: none; white-space: nowrap; }
.lg-row__sub { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 記録 + トップ差。スマホでは右端に縦に積む */
.lg-row__time {
  grid-area: time;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  font-family: var(--nl-font-display); line-height: 1;
}
.lg-row__value { font-size: 20px; font-weight: 600; white-space: nowrap; }
/* 途中棄権など、記録の代わりに文言を出すとき */
.lg-row__value--none { font-family: var(--nl-font-jp); font-size: 13px; color: var(--nl-text-subtle); }
.lg-row__gap { font-size: 12px; font-weight: 500; color: var(--nl-text-subtle); white-space: nowrap; }
/* ⚠ 差の無い行 (1 位など) の空箱はスマホでは畳む。記録が行の中央に来るように */
.lg-row__gap:empty { display: none; }
/* 途中棄権 («3区まで»)。⚠ 区切りの «／» は他の行と同じ色のまま */
.lg-row__sub--unfinished { color: var(--nl-text-warning); }
.lg-row__sub--unfinished::before { color: var(--nl-text-subtle); }

.lg-row__chevron { grid-area: chevron; font-size: 20px; line-height: 1; color: var(--nl-text-muted); text-align: right; }

/* 列の見出しはスマホでは出さない (カード表示なので列が無い)。
   ⚠ **メディアクエリより前に置く。** 後ろに書くと PC 側の指定を打ち消す */
.lg-rowhead { display: none; }

.lg-empty {
  background: var(--nl-bg-default); border-radius: var(--nl-radius-md);
  box-shadow: var(--nl-shadow-card); padding: 32px 16px;
  text-align: center; font-size: 14px; color: var(--nl-text-subtle);
}

.lg-notice {
  background: var(--nl-bg-warning); border-radius: var(--nl-radius-md);
  padding: 16px; display: flex; flex-direction: column; gap: 6px;
}
.lg-notice__title { font-size: 13px; font-weight: 700; color: var(--nl-text-warning); }
.lg-notice__body { font-size: 12px; color: var(--nl-text-warning); line-height: 1.7; }

.lg-footer { text-align: center; font-size: 11px; color: var(--nl-text-subtle); padding: 8px 0 4px; }
.lg-footer a { color: inherit; text-decoration: none; }
@media (hover: hover) { .lg-footer a:hover { color: var(--nl-text-assist); text-decoration: underline; } }

/* =========================================================================
   PC (1024 幅の 2 カラム)
   ⚠ この幅はデザインの «PC ／ 1024 幅» に合わせている
   ========================================================================= */
@media (min-width: 900px) {
  .lg-hero__bar { padding: 16px 32px; gap: 24px; }
  .lg-hero__title { font-size: 20px; }
  .lg-hero__meta { display: inline; margin-left: 16px; font-size: 14px; }
  .lg-hero__names { display: flex; align-items: baseline; gap: 16px; }
  .lg-summary { padding: 12px 32px; font-size: 14px; }

  /* ⚠ 左カラムは 240px。260px だと 900px 付近で右の表が «トップ差» の列を
     足した分だけ窮屈になり、チーム名が 7 文字ほどで切れていた */
  .lg-body {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 24px;
    padding: 24px 32px 32px;
    align-items: start;
  }
  .lg-side { gap: 16px; }

  /* 本文は «見出し | 検索» の 1 行目 + 全幅の 2 行目以降。
     ⚠ マークアップの順 (検索 → 種目 → 見出し) はスマホの操作順。
     ここでは位置を明示して見出しを左、検索を右に置く */
  .lg-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 24px; row-gap: 16px;
    align-items: start;
  }
  .lg-main > * { grid-column: 1 / -1; }
  .lg-main > .lg-mainhead { grid-column: 1; grid-row: 1; align-self: center; margin-top: 0; }
  .lg-main > .lg-search { grid-column: 2; grid-row: 1; align-self: center; width: 300px; min-height: 40px; }
  .lg-mainhead__meta { font-size: 13px; }
  /* ⚠ PC は左の «運営向け» に同じリンクがある */
  .lg-mainhead__link { display: none; }

  .lg-panel {
    background: var(--nl-bg-default); border-radius: var(--nl-radius-md);
    box-shadow: var(--nl-shadow-card); padding: 20px;
    display: flex; flex-direction: column; gap: 12px;
  }
  .lg-panel__title { font-size: 13px; font-weight: 700; }
  .lg-panel__link { font-size: 13px; font-weight: 600; color: var(--nl-text-assist); text-decoration: none; }
  @media (hover: hover) { .lg-panel__link:hover { text-decoration: underline; } }

  /* 種目は «選ぶ» のではなく «並べて見せる» に変える (数が見えるほうが速い) */
  .lg-catlist { display: flex; flex-direction: column; gap: 6px; }
  .lg-catlist__item {
    display: block; padding: 10px 14px; border-radius: var(--nl-radius-sm);
    font-size: 14px; font-weight: 600; color: var(--nl-gray-700); text-decoration: none;
  }
  @media (hover: hover) { .lg-catlist__item:hover { background: var(--nl-gray-100); } }
  .lg-catlist__item[aria-current="page"] { background: var(--nl-bg-assist-strong); color: var(--nl-text-inverse); }

  /* ⚠ 同じマークアップを «表» に組み替える。要素は増やさない */
  .lg-field { display: none; }

  /* 表の枠。⚠ 列の見出しも **この枠の中**。外に置くと見出しだけが地の上に浮いて、
     表と切り離されて見えた。
     ⚠ `overflow: hidden` にしない。スクロール領域ができて見出しの sticky が効かなくなる */
  .lg-list {
    background: var(--nl-bg-default); border-radius: var(--nl-radius-md);
    box-shadow: var(--nl-shadow-card);
    overflow: clip; overflow-clip-margin: 4px;
  }
  .lg-rows { gap: 0; }

  /* 列: 順位 | 名前 | ゼッケン | 所属 | 記録 | トップ差 | ›
     ⚠ 固定幅の合計は 900px (左カラム込み) で本文に収まるように決めている。
     超えると `overflow: clip` で右端の列が黙って切れる (以前 «総合記録» が消えた) */
  .lg-rowhead, .lg-row {
    grid-template-areas: none;
    grid-template-columns: 44px minmax(120px, 1fr) 56px minmax(0, 1fr) 96px 64px 12px;
    /* ⚠ 子の `grid-area: rank` 等は **必ず auto に戻す**。
       名前付き領域を消しただけだと «存在しない線» を指したままになり、
       自動配置で列がめちゃくちゃになる (実際に崩れた) */
    column-gap: 10px; row-gap: 0;
    border-radius: 0; box-shadow: none;
    border-bottom: 1px solid var(--nl-border-subtle);
    padding: 14px 20px;
    font-size: 15px;
  }
  /* 駅伝: 3 列目の «通過区間» は «完走» «3区まで» しか入らないので狭く、名前を広く */
  .lg-list--team .lg-rowhead, .lg-list--team .lg-row {
    grid-template-columns: 44px minmax(0, 1fr) 56px 72px 96px 64px 12px;
  }
  /* 検索結果: «トップ差» の列ごと無くす (検索に当たった一部の行だけでは差を計算していない) */
  .lg-list--search .lg-row {
    grid-template-columns: 44px minmax(120px, 1fr) 56px minmax(0, 1fr) 96px 12px;
  }
  .lg-list--search.lg-list--team .lg-row {
    grid-template-columns: 44px minmax(0, 1fr) 56px 72px 96px 12px;
  }
  .lg-rows > li:last-child .lg-row { border-bottom: none; }
  .lg-row__rank, .lg-row__name, .lg-row__meta, .lg-row__time, .lg-row__chevron { grid-area: auto; }

  /* ⚠ 包みを消して中身を直接 grid の一員にする。これで «列» になる */
  .lg-row__meta { display: contents; }
  .lg-row__rank { width: auto; height: auto; border-radius: 0; background: none; justify-content: flex-start; }
  .lg-row__rank--first, .lg-row__rank--podium { background: none; color: var(--nl-text-default); }
  /* 表では 1 位だけ文字色で目立たせる (塗りの丸は表の中だと重い) */
  .lg-row__rank--first { color: var(--nl-text-assist); }
  .lg-row__no, .lg-row__sub { font-size: 14px; color: var(--nl-gray-600); }
  .lg-row__sub--unfinished { color: var(--nl-text-warning); }
  /* ⚠ 詳細度をスマホ側 (`:not(:empty)`) 以上にする。足りないと «／» が残る */
  .lg-row__no::before, .lg-row__sub:not(:empty)::before { content: none; }
  .lg-row__no { font-family: var(--nl-font-display); }

  /* 記録 + トップ差。⚠ この箱は «記録» «トップ差» の **2 列にまたがる**。
     中の間隔を列の間隔 (10px) と同じにし、トップ差の幅を列幅 (64px) と同じに
     することで、見出しと桁の位置を揃えている */
  .lg-row__time { grid-column: span 2; flex-direction: row; align-items: baseline; justify-content: flex-end; gap: 10px; }
  .lg-row__value { font-size: 15px; }
  /* ⚠ 上の 15px と詳細度が同じなので、必ず後ろに置く (前に置くと «記録なし» も 15px になる) */
  .lg-row__value--none { font-size: 13px; }
  .lg-row__gap, .lg-row__gap:empty { display: block; flex: none; width: 64px; text-align: right; font-size: 13px; }
  .lg-list--search .lg-row__time { grid-column: auto; }
  .lg-list--search .lg-row__gap, .lg-list--search .lg-row__gap:empty { display: none; }
  .lg-row__chevron { font-size: 16px; }

  /* 列の見出し。⚠ 行と同じ grid で組む (ずれないように)。
     ⚠ 数百行あるので、スクロールしても表の上端に残す */
  .lg-rowhead {
    display: grid; align-items: center;
    position: sticky; top: 0; z-index: 1;
    background: var(--nl-bg-default);
    border-bottom: 1px solid var(--nl-border-default);
    padding: 12px 20px;
    font-size: 12px; font-weight: 600; color: var(--nl-text-subtle);
  }
  .lg-rowhead__num { text-align: right; }

  .lg-footer { font-size: 12px; }
}

@media (max-width: 899px) {
  /* PC 専用の部品はスマホでは出さない */
  .lg-side { display: none; }
  /* ⚠ 見出しを消してはいけない。h2 が 1 つも残らないと、見出しジャンプで
     記録リストへ到達できなくなる (レビュー指摘)。
     すぐ上のセレクトと重複する «種目名» だけを読み上げ専用にする */
  .lg-mainhead__category {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}

/* ⚠ 「動きを減らす」設定を尊重する */
@media (prefers-reduced-motion: reduce) {
  .lg * { transition: none !important; animation: none !important; }
}

/* =========================================================================
   詳細ページ (選手 / チーム)
   ========================================================================= */
.lg-backbar {
  display: flex; align-items: center; gap: 12px;
  background: var(--nl-bg-default);
  border-bottom: 1px solid var(--nl-border-default);
  padding: 12px 16px;
}
/* ⚠ 戻るリンクは折り返させない。大会名が長いと «記録一 / 覧» と割れる
   (375px の画面で発生)。縮むのは隣の大会名のほうで、そちらは … で切る */
.lg-backbar__link {
  flex: none; white-space: nowrap;
  font-size: 13px; font-weight: 600; color: var(--nl-text-assist); text-decoration: none;
}
@media (hover: hover) { .lg-backbar__link:hover { text-decoration: underline; } }
.lg-backbar__title {
  min-width: 0; font-size: 15px; font-weight: 700; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.lg-detail { padding: 16px; display: flex; flex-direction: column; gap: 12px; }

/* ⚠ **ここを 900px 以上にだけ書いてはいけない。** カードは
   `.lg-detail__main` の «中» に並ぶので、ここに gap が無いとスマホで
   カードどうしが隙間ゼロでくっつく (実機で発生)。
   横並びにするのだけがメディアクエリの仕事。 */
.lg-detail__main, .lg-detail__side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.lg-cardbox {
  background: var(--nl-bg-default); border-radius: var(--nl-radius-md);
  box-shadow: var(--nl-shadow-card); padding: 20px 16px;
  display: flex; flex-direction: column; gap: 16px;
}
.lg-cardbox__title { font-size: 13px; font-weight: 700; margin: 0; }

.lg-ident { display: flex; flex-direction: column; gap: 6px; }
.lg-ident__name { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.25; }
.lg-ident__name small { font-size: 13px; font-weight: 400; color: var(--nl-text-subtle); margin-left: 6px; }
.lg-ident__sub { margin: 0; font-size: 12px; color: var(--nl-text-subtle); }
.lg-ident__tags { display: flex; gap: 6px; flex-wrap: wrap; }

.lg-tag {
  font-size: 12px; font-weight: 600; border-radius: var(--nl-radius-pill); padding: 4px 12px;
  color: var(--nl-text-assist); background: var(--nl-bg-assist);
}
.lg-tag--quiet { color: var(--nl-gray-600); background: transparent; border: 1px solid var(--nl-border-default); padding: 3px 12px; }
.lg-tag--muted { color: var(--nl-gray-700); background: var(--nl-gray-200); }

/* ⚠ 記録は «いちばん大きい数字»。ここが主役 */
.lg-headline { display: flex; flex-direction: column; gap: 4px; padding-top: 16px; border-top: 1px solid var(--nl-border-default); }
.lg-headline__label { font-size: 12px; font-weight: 600; color: var(--nl-text-subtle); }
.lg-headline__value { font-family: var(--nl-font-display); font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.lg-headline__value--quiet { font-size: 44px; color: var(--nl-gray-600); }
.lg-headline__note { font-size: 13px; color: var(--nl-gray-600); margin-top: 6px; }
.lg-headline__note b { font-family: var(--nl-font-display); font-weight: 600; color: var(--nl-text-assist); }

.lg-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 16px; border-top: 1px solid var(--nl-border-default); }
.lg-stats__label { font-size: 11px; color: var(--nl-text-subtle); }
.lg-stats__value { font-family: var(--nl-font-display); font-size: 24px; font-weight: 600; line-height: 1; }
.lg-stats__value span { font-family: var(--nl-font-jp); font-size: 12px; font-weight: 400; color: var(--nl-gray-600); }
/* ⚠ トップとの差はパープルで «自分の位置» を示す。1 位のときは — なので色を付けない */
.lg-stats__value--gap { color: var(--nl-text-assist); }

/* ---- 区間記録 (駅伝): 横スクロールの表をやめて縦のタイムライン ---- */
.lg-legs { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.lg-leg { display: grid; grid-template-columns: 36px 16px minmax(0, 1fr); gap: 10px; }
.lg-leg__no { display: flex; flex-direction: column; gap: 2px; }
.lg-leg__num { font-family: var(--nl-font-display); font-size: 17px; font-weight: 600; line-height: 1.1; }
.lg-leg__unit { font-size: 10px; color: var(--nl-text-subtle); }
.lg-leg__rail { display: flex; flex-direction: column; align-items: center; }
.lg-leg__dot { width: 12px; height: 12px; border-radius: var(--nl-radius-pill); background: var(--nl-bg-assist-strong); margin-top: 3px; }
.lg-leg__dot--empty { background: var(--nl-white); border: 2px solid var(--nl-gray-400); }
.lg-leg__line { width: 2px; flex: 1; background: var(--nl-border-default); }
.lg-leg__body { padding-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.lg-leg__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lg-leg__runner { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-leg__time { flex: none; font-family: var(--nl-font-display); font-size: 16px; font-weight: 600; }
.lg-leg__tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lg-leg__tag { font-size: 11px; font-weight: 600; color: var(--nl-text-assist); background: var(--nl-bg-assist); border-radius: var(--nl-radius-pill); padding: 3px 10px; }
.lg-leg__tag--quiet { color: var(--nl-gray-600); background: transparent; border: 1px solid var(--nl-border-default); padding: 2px 10px; }
.lg-leg__pass { font-size: 11px; color: var(--nl-text-subtle); }
.lg-leg--none .lg-leg__num, .lg-leg--none .lg-leg__runner { color: var(--nl-text-subtle); }

.lg-members { list-style: none; margin: 0; padding: 0; }
.lg-member {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--nl-gray-200); font-size: 14px;
}
.lg-member__leg { font-size: 12px; color: var(--nl-text-subtle); }
.lg-member__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-member__note { font-size: 11px; color: var(--nl-text-subtle); }

/* ---- 記録証 ---- */
.lg-cert__image {
  display: block; width: 100%; height: auto;
  background: var(--nl-bg-subtle); border: 1px solid var(--nl-border-default);
}
.lg-actions { display: flex; flex-direction: column; gap: 8px; }
.lg-button {
  height: 48px; border-radius: var(--nl-radius-pill);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--nl-font-jp); font-size: 15px; font-weight: 600;
  letter-spacing: var(--nl-tracking-jp); cursor: pointer;
  transition: background 150ms ease-out;
  text-decoration: none;
}
.lg-button--primary { border: none; background: var(--nl-bg-assist-strong); color: var(--nl-text-inverse); }
@media (hover: hover) { .lg-button--primary:hover { background: var(--nl-purple-800); } }
.lg-button--primary:active { background: var(--nl-purple-900); }
.lg-button--quiet { border: 1px solid var(--nl-border-default); background: var(--nl-bg-default); color: var(--nl-text-default); }
@media (hover: hover) { .lg-button--quiet:hover { background: var(--nl-gray-100); } }

/* 記録証の «作成中» のくるくる。
   ⚠ 動きを減らす設定の人には回さない (回転はめまいの原因になりうる) */
.lg-button { gap: 8px; }
.lg-button.is-busy { cursor: progress; }
.lg-button__spinner {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2.4px solid rgba(255, 255, 255, 0.35); border-top-color: var(--nl-white);
  animation: lg-spin 800ms linear infinite;
}
.lg-button__spinner--quiet {
  border-color: var(--nl-gray-300); border-top-color: var(--nl-bg-assist-strong);
}
@keyframes lg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .lg-button__spinner { animation-duration: 2400ms; }
}

/* ---- シェア ---- */
.lg-share { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lg-share__item {
  height: 44px; border: 1px solid var(--nl-border-default); border-radius: var(--nl-radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--nl-font-jp); font-size: 14px; font-weight: 600;
  background: var(--nl-bg-default); color: var(--nl-text-default);
  text-decoration: none; cursor: pointer;
}
@media (hover: hover) { .lg-share__item:hover { background: var(--nl-gray-100); } }

@media (min-width: 900px) {
  .lg-backbar { padding: 16px 32px; }
  /* ⚠ PC は «記録» と «記録証» を左右に。縦に積むと記録証まで遠い */
  /* ⚠ 右カラムは «中身があるときだけ» 幅を取る。固定にすると記録証の出ない
     画面 (棄権チームなど) で右 360px が丸ごと死ぬ (レビュー指摘) */
  .lg-detail {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px; padding: 24px 32px 32px; align-items: start;
  }
  .lg-detail__side:not(:empty) { width: 360px; }
  .lg-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =========================================================================
   検索
   ========================================================================= */
.lg-searchform { display: flex; flex-direction: column; gap: 16px; }

/* ⚠ 読み上げのために radio のまま組み、見た目だけセグメントにする */
.lg-segment {
  display: flex; gap: 0; margin: 0; padding: 3px; border: none;
  background: var(--nl-gray-200); border-radius: var(--nl-radius-pill);
}
.lg-segment__item { flex: 1; }
.lg-segment__item input { position: absolute; opacity: 0; width: 0; height: 0; }
.lg-segment__item span {
  display: block; text-align: center; padding: 8px 0;
  border-radius: var(--nl-radius-pill);
  font-size: 13px; font-weight: 600; color: var(--nl-gray-600);
  cursor: pointer;
}
.lg-segment__item input:checked + span {
  color: var(--nl-text-default); background: var(--nl-bg-default);
  box-shadow: var(--nl-shadow-card);
}
.lg-segment__item input:focus-visible + span { outline: 3px solid var(--nl-purple-700); outline-offset: 2px; }

.lg-input {
  height: 48px; padding: 0 14px;
  background: var(--nl-bg-default);
  border: 1px solid var(--nl-border-default); border-radius: var(--nl-radius-sm);
  font-family: var(--nl-font-display); font-size: 17px; font-weight: 600;
  color: var(--nl-text-default);
}

.lg-resultcount { margin: 0; font-size: 13px; font-weight: 600; color: var(--nl-text-subtle); }
/* 上限で打ち切ったときの案内 */
.lg-searchnote { margin: -8px 0 0; font-size: 12px; color: var(--nl-text-subtle); line-height: 1.6; }

/* 検索結果の種目ごとのまとまり。⚠ まとめないと «1位» が何の 1 位か分からない */
.lg-searchgroup { display: flex; flex-direction: column; gap: 8px; }
.lg-searchgroup__title {
  margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px;
  font-size: 14px; font-weight: 700;
}
.lg-searchgroup__count { font-size: 12px; font-weight: 600; color: var(--nl-text-subtle); }

.lg-hint {
  background: var(--nl-bg-default); border: 1px solid var(--nl-border-default);
  border-radius: var(--nl-radius-md); padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.lg-hint__title { margin: 0; font-size: 13px; font-weight: 700; }
.lg-hint__body { margin: 0; font-size: 12px; color: var(--nl-gray-600); line-height: 1.6; }

/* 読み上げ専用 (画面には出さないがラベルとしては要る) */
.lg-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (min-width: 900px) {
  /* ⚠ 検索は 1 カラム。右に置くものが無い */
  .lg-detail--single { grid-template-columns: minmax(0, 720px); justify-content: center; }
  /* ⚠ 順位変動は «区間 × チーム» の表を横に並べるので 720px では足りない */
  .lg-detail--wide { grid-template-columns: minmax(0, 1060px); justify-content: center; }
}

/* =========================================================================
   順位変動グラフ (駅伝)
   ========================================================================= */
.lg-chart {
  background: var(--nl-bg-default); border-radius: var(--nl-radius-md);
  box-shadow: var(--nl-shadow-card); padding: 20px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.lg-chart__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.lg-chart__title { margin: 0; font-size: 15px; font-weight: 700; }
.lg-chart__meta { font-size: 12px; color: var(--nl-text-subtle); }
/* ⚠ viewBox で組んでいるので幅に追従する。スマホでも横スクロールしない */
/* ⚠ 線は SVG、文字は HTML。文字を SVG の中に置くと viewBox と一緒に縮み、
   375px の画面で 7px 程度になって読めなくなる (実測)。
   重ねる箱は position:relative、中の文字は % で置く (LegacyRankChart が出す) */
.lg-chart__plot { position: relative; }
.lg-chart__svg { display: block; width: 100%; height: auto; }
.lg-chart__labels { position: absolute; inset: 0; pointer-events: none; }
.lg-chart__labels span { position: absolute; white-space: nowrap; }

/* 順位の目盛り。左端に右寄せで置く (SVG 側の余白 46/720 = 6.4% と揃える) */
.lg-chart__rank {
  left: 0; width: 5.0%; box-sizing: border-box; padding-right: 5px;
  transform: translateY(-50%);
  text-align: right; font-family: var(--nl-font-display);
  font-size: 11px; color: var(--nl-text-subtle);
}

/* 区間の目盛り。下端に中央寄せで置く。
   ⚠ 両端だけは内側へ寄せる。中央寄せのままだと 1 区が左の順位ラベルに、
   最終区が右のチーム名に食い込む (実機で接していた) */
.lg-chart__leg {
  bottom: 0; transform: translateX(-50%);
  font-size: 11px; font-weight: 600; color: var(--nl-text-subtle);
}
.lg-chart__leg--first { transform: translateX(-10%); }
.lg-chart__leg--last { transform: translateX(-90%); }

/* チーム名。⚠ SVG 側で右に確保した余白 (208/720 = 28.9%) の中に置く。
   線の終点の «左» に置くと、最終区間まで記録の無いチームの名前が
   グラフの真ん中に落ちて他チームの線に重なる (石川耐寒 第4部で実測)。
   ⚠ left は SVG の描画域の右端 (1 - 196/720 = 72.8%) より **外側** に置く。
   内側だと線の終点に名前がくっついて読みにくい (実機で «6区» のラベルと
   チーム名が接していた)。3% ほど空けてから並べる */
.lg-chart__team {
  left: 75.8%; right: 0; transform: translateY(-50%);
  font-size: 11px; font-weight: 600; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis;
}

@media (min-width: 900px) {
  .lg-chart__rank, .lg-chart__leg { font-size: 13px; }
  .lg-chart__team { font-size: 13px; }
}
/* 記録証の «長押しで保存» 案内。
   ⚠ マウスのある環境 (PC) では長押しの話をしても混乱するだけなので出さない。
   hover できない = 指で触る端末、という判定にしている */
.lg-cert__hint { display: none; margin: 0; font-size: 12px; color: var(--nl-text-subtle); line-height: 1.7; }
@media (hover: none) {
  .lg-cert__hint { display: block; }
}

.lg-chart__note { margin: 0; font-size: 12px; color: var(--nl-text-subtle); line-height: 1.6; }

/* 順位変動ページへの導線。⚠ カードの下端いっぱいに置いて押しやすくする。
   ⚠ 負の margin はカードの padding と **必ず同じ値**にする (PC は 24px)。
   ずれると区切り線が端まで届かず、下にも隙間が残る */
/* ⚠ `box-sizing: border-box` を外さない。このファイルには全体のリセットが無く、
   content-box のままだと min-height に上下の padding が足されて 73px の帯になっていた */
.lg-chart__more {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  box-sizing: border-box;
  min-height: 48px; margin: 0 -16px -20px; padding: 12px 16px;
  border-top: 1px solid var(--nl-border-subtle);
  border-radius: 0 0 var(--nl-radius-md) var(--nl-radius-md);
  font-size: 13px; font-weight: 600; color: var(--nl-text-assist); text-decoration: none;
}
@media (hover: hover) { .lg-chart__more:hover { background: var(--nl-gray-100); } }
.lg-chart__chevron { font-size: 18px; line-height: 1; }

@media (min-width: 900px) {
  .lg-chart { padding: 24px; }
  .lg-chart__title { font-size: 17px; }
  .lg-chart__more { margin: 0 -24px -24px; padding: 12px 24px; }
}

/* =========================================================================
   記録が無いとき
   ========================================================================= */
.lg-blank { align-items: flex-start; gap: 12px; padding: 24px 16px; }
.lg-blank .lg-tag { align-self: flex-start; }
.lg-blank__title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.35; }
.lg-blank__body { margin: 0; font-size: 13px; color: var(--nl-gray-600); line-height: 1.7; }
.lg-blank .lg-button { align-self: stretch; }

/* 当日の流れ (種目とスタート時刻) */
.lg-schedule { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.lg-schedule__item { display: grid; grid-template-columns: 52px 16px minmax(0, 1fr); gap: 12px; }
.lg-schedule__time {
  font-family: var(--nl-font-display); font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 600; line-height: 1.2;
}
.lg-schedule__rail { display: flex; flex-direction: column; align-items: center; }
.lg-schedule__dot { width: 12px; height: 12px; border-radius: var(--nl-radius-pill); background: var(--nl-bg-assist-strong); margin-top: 2px; }
/* ⚠ いま見ている種目だけ塗る。全部塗ると «どれを見ているか» が消える */
.lg-schedule__dot--quiet { background: var(--nl-white); border: 2px solid var(--nl-purple-700); }
.lg-schedule__line { width: 2px; flex: 1; background: var(--nl-border-default); }
.lg-schedule__body { padding-bottom: 18px; }
.lg-schedule__name { font-size: 14px; font-weight: 700; color: inherit; text-decoration: none; }
@media (hover: hover) { .lg-schedule__name:hover { color: var(--nl-text-assist); text-decoration: underline; } }
.lg-schedule__name[aria-current="page"] { color: var(--nl-text-assist); }

/* =========================================================================
   QR モーダル
   ========================================================================= */
.lg-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: var(--nl-bg-scrim);
}
.lg-modal__panel {
  background: var(--nl-bg-default); border-radius: var(--nl-radius-md);
  padding: 24px; max-width: 400px; width: 100%; text-align: center;
  display: flex; flex-direction: column; gap: 16px;
}
.lg-modal__title { margin: 0; font-size: 17px; font-weight: 700; }
.lg-modal__qr {
  display: flex; justify-content: center; padding: 20px;
  background: var(--nl-bg-subtle); border-radius: var(--nl-radius-md);
}
.lg-modal__qr svg { display: block; max-width: 100%; height: auto; }
.lg-modal__url { margin: 0; font-size: 13px; color: var(--nl-text-subtle); word-break: break-all; }

/* 見出しと注記を横に並べる (注記は見出しの中に入れない) */
.lg-cardbox__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lg-cardbox__note { margin: 0; font-size: 11px; color: var(--nl-text-subtle); }

/* ⚠ モーダルを開いているあいだは背面を止める */
body.lg-noscroll { overflow: hidden; }

/* «ページの先頭へ戻る» (記録一覧)。⚠ QR モーダル (z-index 1000) より下に置く */
.lg-totop {
  position: fixed; right: 16px; bottom: 16px; z-index: 900;
  width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--nl-border-default); border-radius: var(--nl-radius-pill);
  background: var(--nl-bg-default); color: var(--nl-text-default);
  box-shadow: var(--nl-shadow-card);
  cursor: pointer;
}
@media (hover: hover) { .lg-totop:hover { background: var(--nl-bg-subtle); } }
.lg-totop .lg-icon { width: 20px; height: 20px; }

/* «記録証へ» (詳細ページ・スマホだけ) */
.lg-jump {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; border-radius: var(--nl-radius-pill);
  background: var(--nl-bg-assist); color: var(--nl-text-assist);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
@media (hover: hover) { .lg-jump:hover { text-decoration: underline; } }
/* ⚠ 飛んだ先の見出しが画面の縁に貼り付かないように */
.lg-cert { scroll-margin-top: 16px; }
@media (min-width: 900px) {
  /* PC は記録証が右カラムに並んで見えている */
  .lg-jump { display: none; }
}

/* ⚠ 指で押す的は 44px 以上。小さいと隣を押してしまう */
.lg-chip { min-height: 44px; padding: 0 16px; }

/* ⚠ フッタのリンクも指で押せる高さにする */
.lg-footer a { display: inline-block; padding: 8px 4px; }

/* 戻る帯に出す大会名 */
.lg-backbar__race { font-size: 13px; color: var(--nl-text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-pagetitle { margin: 0; font-size: 20px; font-weight: 700; }

/* ============================================================
   順位変動ページ (駅伝)
   ⚠ 出どころは Claude Design «駅伝速報ページリデザイン» 1e / 1f
   ============================================================ */

.lg-pagehead { display: flex; flex-direction: column; gap: 6px; }
.lg-pagelead { margin: 0; font-size: 13px; color: var(--nl-text-default); line-height: 1.7; text-wrap: pretty; }
.lg-pagemeta { margin: 0; font-size: 12px; color: var(--nl-text-subtle); }
.lg-pagenote { margin: 0; font-size: 12px; color: var(--nl-text-subtle); line-height: 1.7; text-wrap: pretty; }

/* 表示チーム数の切り替え。⚠ JS ではなくリンク (URL で共有できる) */
.lg-segment--links { display: flex; gap: 8px; flex-wrap: wrap; }
.lg-segment__link {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
  border: 1px solid var(--nl-border-default); border-radius: var(--nl-radius-pill);
  background: var(--nl-bg-default); color: var(--nl-text-default);
  font-size: 13px; font-weight: 600; text-decoration: none;
}
@media (hover: hover) { .lg-segment__link:hover { background: var(--nl-gray-100); } }
.lg-segment__link.is-current {
  border-color: transparent; background: var(--nl-bg-assist-strong); color: var(--nl-text-inverse);
}

/* 拡大ボタン。
   ⚠ スマホでは見出しと同じ行に置かない。«順位変動グラ / フ» と見出しが
   割れて «標 / 準» までぶら下がる (実機で発生)。行を分ける */
.lg-chart--wide .lg-chart__head { flex-direction: column; align-items: stretch; gap: 10px; }
.lg-zoom { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lg-zoom__value { flex: 1; min-width: 0; font-size: 11px; color: var(--nl-text-subtle); }
.lg-zoom__button {
  min-width: 34px; height: 32px; padding: 0 8px;
  border: 1px solid var(--nl-border-default); border-radius: var(--nl-radius-sm);
  background: var(--nl-bg-default); color: var(--nl-text-default);
  font-family: var(--nl-font-jp); font-size: 14px; font-weight: 600; cursor: pointer;
}
.lg-zoom__button--text { font-size: 12px; }
@media (hover: hover) { .lg-zoom__button:hover:not(:disabled) { background: var(--nl-gray-100); } }
.lg-zoom__button:disabled { opacity: 0.4; cursor: default; }

/* スクロールの案内。⚠ 拡大中だけ出す (できないのに «できます» と言わない) */
.lg-chart__hint { margin: 0; font-size: 12px; font-weight: 600; color: var(--nl-text-assist); }

.lg-chart__clear {
  align-self: flex-start; min-height: 36px; padding: 0 14px;
  border: 1px solid var(--nl-border-default); border-radius: var(--nl-radius-pill);
  background: var(--nl-bg-default); color: var(--nl-text-default);
  font-family: var(--nl-font-jp); font-size: 12px; font-weight: 600; cursor: pointer;
}
@media (hover: hover) { .lg-chart__clear:hover { background: var(--nl-gray-100); } }

/* 選んだチームの行。⚠ 色だけでなく左の帯でも示す */
.lg-rt__row { cursor: pointer; }
/* ⚠ 選択の背景を濃くしすぎない。#C2410C のチーム名が purple-100 の上では 4.39:1 で
   4.5:1 に届かない (14px の太字は WCAG の «大きな文字» に当たらない) */
.lg-rt__row.is-selected { background: var(--nl-gray-100); box-shadow: inset 3px 0 0 var(--nl-bg-assist-strong); }
.lg-chart__scroll:focus-visible { outline: 2px solid var(--nl-bg-assist-strong); outline-offset: 2px; }

/* ⚠ Alpine が動く前に x-show の中身が一瞬見えるのを防ぐ */
[x-cloak] { display: none !important; }

/* ⚠ 箱からはみ出したときだけ横スクロールさせる。
   ⚠ **min-width で無理に広げない。** 広げるとチーム名を置いてある右の余白が
   最初の表示で画面の外に出てしまい、«名前の無いグラフ» に見える (実機で確認)。
   グラフは SVG なので幅に合わせて縮む。細かい数字は下の表で読む作り。 */
.lg-chart--wide .lg-chart__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.lg-chart--wide .lg-chart__scroll:focus-visible { outline: 2px solid var(--nl-bg-assist-strong); outline-offset: 2px; }

/* 区間ごとの通過順位。
   ⚠ スマホは «チームごとのカード»、PC は «表»。**同じマークアップ**を
   grid の組み替えだけで両方にする (結果一覧の .lg-row と同じ考え方)。
   table 要素を使わないのは、display を変えると行と列の対応が壊れるため。
   ⚠ 区間数 (--lg-legs) は大会ごとに違うので Blade から渡している */
.lg-rt { display: flex; flex-direction: column; }
.lg-rt__head { display: none; }

.lg-rt__row {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 0; border-top: 1px solid var(--nl-border-subtle);
}
/* ⚠ `:first-of-type` では効かない。先頭には見出し行 (`.lg-rt__head`、同じ div) があるので、
   1 行目は «2 番目の div» になる。区切り線の変数が未定義で線が出ていなかった頃は
   気づけず、定義したとたん PC で見出しの下線と重なって 2px になった */
.lg-rt__head + .lg-rt__row { border-top: none; }

.lg-rt__team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lg-rt__swatch { flex: none; width: 20px; height: 8px; }
/* ⚠ 名前は折り返さない。折り返すと No. が 3 行目に落ちて行が崩れる (実機で発生)。
   ⚠ button だが見た目は文字のまま。押せることは aria-pressed で伝える */
.lg-rt__name {
  flex: 1; min-width: 0; padding: 0; border: none; background: none;
  font-family: var(--nl-font-jp); font-size: 14px; font-weight: 700;
  letter-spacing: var(--nl-tracking-jp); color: inherit; text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lg-rt__name:focus-visible { outline: 2px solid var(--nl-bg-assist-strong); outline-offset: 2px; }
.lg-rt__bib { flex: none; font-family: var(--nl-font-display); font-size: 11px; color: var(--nl-text-subtle); }

.lg-rt__cells { display: grid; grid-template-columns: repeat(var(--lg-legs, 6), minmax(0, 1fr)); gap: 4px; }
.lg-rt__cell { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.lg-rt__rank { font-family: var(--nl-font-display); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; line-height: 1; }
.lg-rt__unit { font-family: var(--nl-font-jp); font-size: 10px; font-weight: 400; color: var(--nl-text-subtle); }
.lg-rt__none { font-size: 13px; color: var(--nl-text-subtle); line-height: 1; }
.lg-rt__delta { font-size: 10px; line-height: 1.2; }
/* ⚠ 上がった/下がったは色だけで伝えない。▲▼ の記号も必ず添える */
.lg-rt__delta--up { color: var(--nl-text-assist); }
.lg-rt__delta--down { color: var(--nl-text-subtle); }

/* スマホでは «1区からの変動» をチーム名の行の右端に寄せる */
.lg-rt__gain { position: absolute; }
.lg-rt__row { position: relative; }
.lg-rt__gain { top: 12px; right: 0; display: flex; align-items: baseline; gap: 2px; }
.lg-rt__gainvalue { font-family: var(--nl-font-display); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; }
/* ⚠ 変動の数字と重ならないよう、名前の側に場所を空けておく */
.lg-rt__team { padding-right: 56px; }

@media (min-width: 900px) {
  .lg-pagelead { font-size: 14px; }
  /* PC は横幅があるので見出しと拡大ボタンを 1 行に戻す */
  .lg-chart--wide .lg-chart__head { flex-direction: row; align-items: center; }
  .lg-zoom__value { flex: none; margin-right: 4px; }

  /* PC は表。⚠ 行の grid に «区間のマス» を直接並べたいので、
     まとめ箱 (.lg-rt__cells) は display:contents で消す */
  .lg-rt__head, .lg-rt__row {
    display: grid;
    grid-template-columns: minmax(160px, 1.4fr) repeat(var(--lg-legs, 6), minmax(0, 1fr)) 108px;
    gap: 10px; align-items: center;
  }
  .lg-rt__head {
    padding: 8px 0 10px; border-bottom: 1px solid var(--nl-border-default);
    font-size: 11px; font-weight: 600; color: var(--nl-text-subtle);
  }
  .lg-rt__headcells, .lg-rt__cells { display: contents; }
  .lg-rt__headcell { text-align: center; }
  .lg-rt__headgain { text-align: right; }
  .lg-rt__row { padding: 10px 0; }
  .lg-rt__team { padding-right: 0; }
  .lg-rt__cell { flex-direction: column; }
  .lg-rt__rank { font-size: 15px; }
  /* ⚠ スマホで絶対配置にしていたのを戻す。戻さないと右端に貼り付いたままになる */
  .lg-rt__gain { position: static; justify-content: flex-end; }
  .lg-rt__gainvalue { font-size: 15px; }
}

/* =========================================================================
   押している間の合図 (タッチ端末でも出す)
   ⚠ hover の見た目は «hover できる端末» に限ったので、指で押したときの合図は
     ここで出す。以前はタップ後に残る :hover が合図の代わりになっていた。
   ⚠ **ファイルの最後に置く。** hover の指定と詳細度が同じなので、後ろに無いと
     マウスで押したときに hover の色が勝つ。
   ⚠ «いま選んでいるもの» (塗りの付いた切り替え) は押しても灰色にしない。
   ========================================================================= */
.lg-chip:active,
.lg-search:active,
.lg-button--quiet:active,
.lg-share__item:active,
.lg-chart__more:active,
.lg-totop:active,
.lg-segment__link:not(.is-current):active,
.lg-zoom__button:not(:disabled):active,
.lg-chart__clear:active,
.lg-catlist__item:not([aria-current="page"]):active {
  background: var(--nl-bg-pressed);
}