/* ============================================================
   JumpHigh — design tokens & global styles
   Theme: "BETA"（ロゴ配色）

   出自: Claude Design プロジェクト `JumpHigh 改善案.dc.html` の配色案 B。
   案は A（TRUST 3・白基調＋深い青）と B の2案を提示しており、**運営者が B を選択**した
   （2026-08-18）。B は `frontend/static/img/jumphigh-mark.svg` の3色と**バイト単位で一致**する
   ——アプリとロゴの配色が初めて揃う。直前の案C-2「トラストブルー」（紺・ティール・黄）
   は全廃した。

   <important>
   **書体は外部から取りに行かない。** モックは Google Fonts から Figtree と
   Noto Sans JP を読むが、それをそのまま持ち込むと
   (1) CSP の `style-src` / `font-src` を fonts.googleapis.com /
       fonts.gstatic.com へ広げることになる（`src/csp_policy.py` と
       `edge/src/csp.generated.js` の両方＝`tests/test_csp_sync.py` の対象）
   (2) ログイン画面の訪問者全員が第三者へリクエストを 1 本出す
       ——これは Turnstile の api.js を静的タグから外したときに
       「無効構成でも訪問者全員が Cloudflare を叩く」として明示的に
       退けた形と同じ
   になる。よってフォントスタックの**先頭に**モックの書体を置き、
   端末に在れば使い、無ければ OS の同等品へ落ちるようにしてある。
   自己ホストしたい場合は `frontend/static/fonts/` へ置いて
   `@font-face` を足す（Dockerfile の COPY と配布テストが要る）。
   </important>

   色の使い分け（守ること）:
   - `--color-accent` (#1d4f5f) …… 主操作・現在地・データの主系列。
     ロゴマークの地の色。案が「ティールの役割は主色に統合」と定めたので、
     **副次の強調に別の色を作らない**
   - `--color-accent-2` (#d86f45) …… 要注意・BEST。ロゴマークのバーの色。
     **面と点にだけ使う**。白地でコントラスト 3.34:1 しか出ないので、
     文字・白抜きは `--color-accent-2-600` 以上（-600 = 5.04:1）
   - `--highlight` …… 自己ベストなど「ごく少数」の栄誉表示専用（`.badge-best` のみ）。
     案は「黄色の BEST は強調色1色に置き換え」と定めたので accent-2 の濃い段を指す。
     情報の階層を作る色ではない

   <important>
   **幾何は「ゼロ角丸・罫・整列」**。案は Modernist の組版で、面（角丸カード＋影）ではなく
   **罫と整列**で構造を作る。したがって
   `--radius-sm/md/lg` は **0**、`--shadow-*` は **none**。
   ピル(999px)を作らないための `--radius-pill` は**トークンごと削除**した
   （名前が残っていると復活する）。丸くしてよいのは
   スピナ・ドットのように**本当に円であるもの**だけで、それは各規則が
   `border-radius: 50%` を直接持つ。
   </important>
   ============================================================ */

:root {
  /* --- Brand surface --- */
  --color-bg: #f7f4ec;
  --color-surface: #ffffff;
  --color-text: #1f2a2e;
  --color-accent: #1d4f5f;
  --color-accent-2: #d86f45;
  --color-divider: rgba(31, 42, 46, .38);

  /* --- Tonal ramps (mock と同値) --- */
  --color-neutral-100: #faf8f3;
  --color-neutral-200: #ece8de;
  --color-neutral-300: #dcd7ca;
  --color-neutral-400: #cdc8ba;
  --color-neutral-500: #a4adb0;
  --color-neutral-600: #7c8b8f;
  --color-neutral-700: #5d6a6e;
  --color-neutral-800: #3c4548;
  --color-neutral-900: #272d2f;

  --color-accent-100: #e3ecee;
  --color-accent-200: #cadee5;
  --color-accent-300: #97c1cf;
  --color-accent-400: #4295b0;
  --color-accent-500: #1d4f5f;
  --color-accent-600: #174250;
  --color-accent-700: #123743;
  --color-accent-800: #0c2b35;
  --color-accent-900: #071f27;

  --color-accent-2-100: #fbeae1;
  --color-accent-2-200: #f2e0d8;
  --color-accent-2-300: #eac3b4;
  --color-accent-2-400: #e09e83;
  --color-accent-2-500: #d86f45;
  --color-accent-2-600: #ac5735;
  --color-accent-2-700: #8b4529;
  --color-accent-2-800: #6b341e;
  --color-accent-2-900: #4e2413;

  /* --- Semantic --- */
  --highlight:     var(--color-accent-2-600);
  --highlight-ink: var(--color-surface);
  --color-danger:   #b3261e;   /* 白地 6.6:1 */
  --color-danger-bg:#fdecea;
  --color-warn:     #8a5300;   /* 白地 6.3:1 */
  --color-warn-bg:  #fdf3e0;
  --color-ok: var(--color-accent-700);
  --color-ok-bg: var(--color-accent-100);

  /* --- Text roles ---
     <important>
     **白ではなく「一番濃い地」を基準に決める**こと。文字トーンは
     `--color-surface`(#fff) の上だけでなく `--color-neutral-100`(#faf8f3)・
     `--color-neutral-200`(#ece8de)・`--color-accent-2-100`(#fbeae1)・
     `--color-bg`(#f7f4ec) の上にも載る。白基準で選ぶと、実際に置かれる
     地の上で AA を割る —— 2026-08-18 の刷新（案C-2）で実際にそうなり、
     日付タイル（neutral-200 の上）が 3.88:1 まで落ちていた。
     下の比は**最も濃い地 neutral-200 の上**での実測値。
     `tests/test_design_system.py::TestBetaPaletteTokens` と
     E2E `TestContrastMeetsAA` が両側から縛る。

     地はクリーム（暖色）・文字は青灰（寒色）で、これは案の意図した対比。
     暖色の紙に寒色のインク、という組み合わせなので、
     **neutral ランプを寒色に戻すと地の上で濁って見える**。
     </important> */
  --ink: #1f2a2e;   /* 12.0:1 */
  --ink-2: #414f53;   /* 7.0:1  本文の副次 */
  --ink-3: #5d6a6e;   /* 4.6:1  メタ・注記（これより薄い文字は作らない） */
  --ink-4: #a4adb0;   /* 装飾専用。**文字に使わない**（点・区切り・枠のみ） */

  /* --- Typography ---
     案の書体は Archivo（Latin・数字のグロテスク）＋ Noto Sans JP。
     **どちらも取りに行かない**（上の <important> 参照）ので、端末に在れば使い、
     無ければ和文は Hiragino Sans / Yu Gothic UI、Latin は system-ui へ落ちる。
     Archivo を先頭に置けるのは、**和文グリフを持たない**＝日本語は自動的に
     次の Noto Sans JP が拾うため。見出しの主役は引き続き日本語の太ゴシック。 */
  --font-body: "Archivo", "Noto Sans JP", -apple-system, BlinkMacSystemFont,
               "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Meiryo",
               system-ui, sans-serif;
  --font-heading: "Archivo", "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI",
                  "Meiryo", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  system-ui, sans-serif;
  --font-num: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI",
              system-ui, sans-serif;

  /* --- Geometry ---
     ピル(999px)をやめ、控えめな角丸で「計測器の面」を作るのが案C-2の要。 */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;

  /* --- Elevation --- */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  --maxw: 1100px;

  /* ============================================================
     Legacy aliases
     ------------------------------------------------------------
     app.js は CSS 変数を 1 つも参照しない（実測）。参照しているのは
     index/terms/privacy のインラインスタイルだけで、そこで使われるのは
     --ink / --ink-2 / --ink-3 / --line / --green-deep の 5 つ。
     ただし旧テーマの名前は theme.css 内の各所と、将来の差分で
     戻ってきやすいので、**全部を新パレットへ写像して残す**
     （消すと「色が当たらない」ではなく「無色になる」壊れ方をする）。
     ============================================================ */
  --bg:        var(--color-bg);
  --bg-0:      var(--color-neutral-100);
  --bg-1:      var(--color-bg);
  --card:      var(--color-surface);
  --surface:   var(--color-surface);
  --surface-2: var(--color-neutral-100);
  --hair:      var(--color-neutral-200);
  --line:      var(--color-neutral-300);
  --line-soft: var(--color-neutral-200);
  --ink-dim:   var(--ink-2);
  --ink-faint: var(--ink-3);
  --gray:      var(--color-accent);
  --gray-d:    var(--color-accent-700);
  --green:        var(--color-accent);        /* 旧アクセント → 副次 */
  --green-deep:   var(--color-accent);          /* 旧「主操作の緑」 → 紺 */
  --coral:        var(--color-accent);
  --coral-strong: var(--color-accent-600);
  --coral-glow: rgba(29, 79, 95, .22);
  --cyan:         var(--color-accent);
  --cyan-deep:    var(--color-accent-700);
  --cyan-glow: rgba(216, 111, 69, .24);
  --lime:         var(--color-accent);
  --yellow:       var(--highlight);
  --pink:         var(--color-accent-300);
  --sans:    var(--font-body);
  --display: var(--font-heading);
  --ui:      var(--font-body);
  --num:     var(--font-num);
  --radius: var(--radius-lg);
  --r-sm:   var(--radius-sm);
  --r-md:   var(--radius-md);
  --r-lg:   var(--radius-lg);
  --shadow-1: var(--shadow-sm);
  --shadow-2: var(--shadow-md);
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
/* `scrollbar-gutter` は**画面遷移で横幅が動かないため**に要る。画面は
   `showScreen()` の hidden 排他切替で入れ替わるので、背の高い画面（アップロード）
   から背の低い画面（解析待ち）へ移るとスクロールバーが消え、その幅ぶん
   ページ全体が横へずれる。`stable` は常に溝を確保するので、どの画面でも
   コンテンツ幅が同じになる。未対応ブラウザでは単に無視される（従来どおり）。 */
html { font-size: 16px; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- background: 紺とティールのごく淡い差し色。主張させない ---- */
.app-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(29, 79, 95, .06), transparent 60%),
    radial-gradient(60% 40% at 92% 4%, rgba(216, 111, 69, .05), transparent 60%),
    var(--color-bg);
}
.app-root { position: relative; z-index: 1; }

::selection { background: rgba(29, 79, 95, .16); }

button { font: inherit; color: inherit; cursor: pointer; }
input, select { font: inherit; }
a { color: var(--color-accent); }
a:hover { color: var(--color-accent-700); }

/* ============================================================
   Motion
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .rise-in  { animation: riseIn  0.5s cubic-bezier(0.16,1,0.3,1) both; }
  .fade-in  { animation: fadeIn  0.4s ease both; }
  @keyframes riseIn  { from { transform: translateY(10px); } to { transform: none; } }
  @keyframes fadeIn  { from { transform: translateY(10px); } to { transform: none; } }
}

/* ============================================================
   Typography helpers
   ============================================================ */
.display {
  font-family: var(--font-heading);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.16;
}
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--color-accent);
}

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--color-neutral-300); border-radius: 0; }

/* ============================================================
   App chrome — sticky top nav
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 max(22px, 4vw);
  height: 56px;
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--color-divider);
}
/* トップバー下端の 2 色帯（3px。ログインの 6px より控えめに） */
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 3px;
  background: linear-gradient(90deg,
    var(--color-accent) 55%, var(--color-accent-2) 55%);
}

.topbar-left  { display: flex; align-items: center; gap: 1rem; }
.topbar-right { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.topbar-logo-btn { background: none; border: none; padding: 0; }

/* ---------- Logo ---------- */
.logo {
  display: inline-flex; align-items: center; gap: 9px;
  user-select: none; white-space: nowrap; flex: 0 0 auto; text-decoration: none;
}
/* 紺のタイル + ロゴマーク（favicon と同じ絵）。中身の SVG は HTML 側で、
   テーマは箱の色と寸法だけを持つ。背景 --color-accent はマークの地の色そのもの
   なので、SVG からは角丸の矩形を外して弧・バー・点だけを描く。 */
.logo-tile {
  width: 28px; height: 28px; flex: 0 0 auto;
  border-radius: 0;
  background: var(--color-accent);
  color: var(--color-neutral-100);
  display: inline-flex; align-items: center; justify-content: center;
}
.logo-tile svg { width: 100%; height: 100%; display: block; }
.logo-mark {
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 19px;
  color: var(--color-text);
  line-height: 1;
}
.logo-mark .up { color: var(--color-accent); }
.logo-tick { display: none; }  /* 旧テーマの装飾。案C-2 では使わない */

/* ---------- Auth / beta badge ---------- */
.auth-status {
  font-size: 12.5px; font-weight: 600; color: var(--ink-3);
  max-width: 180px; min-width: 0; flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 900px) {
  .auth-status { display: none; }
}
.beta {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--color-accent);
  border: 1px solid var(--color-accent-200);
  background: var(--color-accent-100);
  padding: 4px 10px; border-radius: var(--radius-sm);
}

/* ============================================================
   Page shell
   ============================================================ */
.page {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(1.6rem, 5vw, 3rem) max(22px, 4vw) 5rem;
}
.page-narrow { max-width: 760px; }

.page-head { margin-bottom: 1.6rem; }
.page-title {
  font-family: var(--font-heading);
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  line-height: 1.3;
  color: var(--color-text);
}
.page-sub {
  color: var(--ink-2); margin-top: 0.45rem; max-width: 56ch;
  font-size: 14px; font-weight: 500; line-height: 1.75;
}

/* ============================================================
   Card
   ============================================================ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
}
.card-pad { padding: clamp(1.2rem, 3vw, 1.8rem); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  font-family: var(--font-body); font-weight: 700;
  border: 1px solid transparent; border-radius: var(--radius-md);
  padding: 11px 20px; font-size: 14.5px;
  text-decoration: none;
  transition: background .16s, color .16s, border-color .16s, opacity .16s;
  white-space: nowrap;
  min-height: 44px;
  cursor: pointer;
}
.btn:active { transform: translateY(0.5px); }
.btn svg    { width: 1.1em; height: 1.1em; }

/* Primary = 紺のソリッド */
.btn-primary {
  background: var(--color-accent); color: var(--color-neutral-100);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover  { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
/* 無効状態は WCAG 1.4.3 の対象外（inactive UI component）だが、
   「次へ」は導線の要なので読める濃さは残す。地を neutral-200 まで
   明るくして文字を neutral-600 に置き、3:1 前後を確保している。 */
.btn-primary:disabled {
  background: var(--color-neutral-200); color: var(--color-neutral-600);
  cursor: not-allowed; box-shadow: none;
}

/* Secondary（旧 .btn-outline / .btn-ghost）= 白サーフェス + 罫 */
.btn-ghost, .btn-outline {
  background: var(--color-surface); color: var(--ink-2);
  border-color: var(--color-neutral-300);
}
.btn-ghost:hover, .btn-outline:hover {
  color: var(--color-text); background: var(--color-neutral-100);
  border-color: var(--color-neutral-400);
}
.btn-ghost:disabled, .btn-outline:disabled {
  color: var(--color-neutral-600); background: var(--color-neutral-200);
  border-color: var(--color-neutral-300); cursor: not-allowed;
}

/* 副次アクセント（ティール）。**白文字で 4.5:1 を通すのは -700 から**
   （-600 は 4.39:1 で僅かに足りない。実測して -700 へ下げた）。 */
.btn-cyan { background: var(--ink); color: var(--color-surface); }
.btn-cyan:hover  { background: var(--color-neutral-800); }
.btn-cyan:active { background: var(--color-neutral-900); }

/* Sizes */
.btn-lg {
  min-height: 52px; padding: 14px 26px; font-size: 15.5px;
  font-family: var(--font-heading); font-weight: 800;
}
.btn-mini { padding: 7px 14px; font-size: 12.5px; min-height: 36px; border-radius: 0; }
.btn-block { width: 100%; }

/* ============================================================
   Inputs
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field-label {
  font-size: 12.5px; font-weight: 700; color: var(--ink-2);
  display: block; margin-bottom: 6px;
}
.field-hint { font-size: 11px; color: var(--ink-3); line-height: 1.5; }
.input, .select {
  width: 100%; min-height: 48px;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-neutral-300); border-radius: var(--radius-md);
  padding: 11px 14px; font-size: 15px; font-weight: 500;
}
/* プレースホルダは書式の例（2.00 / 1.75）＝読ませる文字。装飾トーンにしない。 */
.input::placeholder { color: var(--ink-3); }
.input:hover, .select:hover { border-color: var(--color-neutral-400); }
.input:focus, .select:focus {
  border-color: var(--color-accent); outline: none;
  box-shadow: 0 0 0 3px var(--color-accent-100);
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%237f8992' d='M0 0h12L6 8z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* ============================================================
   Camera position picker (撮影位置・5方向の離散選択)
   ------------------------------------------------------------
   色は必ずここのトークン経由で当てること。SVG 側に fill/stroke を
   直書きすると案C-2 の面から浮く（旧・座標クリック式の教訓）。
   俯瞰図のスポットと右のボタン列は**同じ状態の2ビュー**で、選択状態は
   app.js の renderPosPicker() が .is-on / data-active で同期する。
   ============================================================ */
.pos-picker-grid {
  display: grid; grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 1.1rem; align-items: center; margin-top: 6px;
}
@media (max-width: 640px) { .pos-picker-grid { grid-template-columns: 1fr; } }
.pos-picker {
  width: 100%; display: block;
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  -webkit-tap-highlight-color: transparent;
}

/* 助走路・マット: 位置関係を示す文脈。主張させない。
   助走路は矩形ではなく J カーブ 2 本（`.pit-approach`）——走高跳の助走は
   直線ではないので、帯で描くとカメラ位置との関係が読めない。 */
.pit-runway     { fill: rgba(31, 42, 46, .03); }
.pit-approach   { fill: none; stroke: var(--color-neutral-500); stroke-width: 1.5;
                  stroke-dasharray: 4 3; stroke-linecap: round; }
.pit-runway-lbl { fill: var(--ink-3); font-size: 9px; font-weight: 600; }
.pit-mat        { fill: var(--color-accent-2-100); stroke: var(--color-accent-2-300); stroke-width: 1; }
.pit-mat-lbl    { fill: var(--color-accent-2-800); font-size: 9px; font-weight: 600; }

/* バーと支柱: 座標系の基準になる固定ランドマーク＝ニュートラルな濃色 */
.pit-bar      { stroke: var(--color-neutral-900); stroke-width: 3; stroke-linecap: round; }
.pit-standard { fill: var(--color-surface); stroke: var(--color-neutral-900); stroke-width: 2; }
.pit-bar-lbl  { fill: var(--ink-2); font-size: 9px; font-weight: 700; }

/* 5方向スポット: 選択中だけアクセント色（.is-on は renderPosPicker が付ける） */
.pos-spot { cursor: pointer; }
.pos-spot .pos-hit { fill: transparent; }
.pos-spot .pos-dot { fill: var(--color-surface); stroke: var(--color-neutral-500); stroke-width: 2.5; }
.pos-spot .pos-lbl { fill: var(--ink-3); font-size: 9px; font-weight: 600; }
.pos-spot.is-on .pos-dot { fill: var(--color-accent); stroke: var(--color-surface); }
.pos-spot.is-on .pos-lbl { fill: var(--color-accent); font-weight: 800; }

/* 方向ボタン列（SVG と連動する第2ビュー） */
.pos-btns { display: flex; flex-direction: column; gap: 0.5rem; }
.pos-btn {
  display: flex; align-items: center; gap: 0.6rem; text-align: left;
  border: 1px solid var(--color-neutral-300); background: var(--color-surface); color: var(--ink-2);
  border-radius: var(--radius-md); padding: 9px 14px; font-size: 13.5px; font-weight: 700;
  min-height: 42px; cursor: pointer;
}
.pos-btn .pos-btn-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--color-neutral-400); flex: 0 0 auto; }
.pos-btn[data-active="true"] {
  border-color: var(--color-accent); background: var(--color-accent-100); color: var(--color-accent);
}
.pos-btn[data-active="true"] .pos-btn-dot { background: var(--color-accent); }
.pos-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.pos-note { color: var(--ink-3); font-size: 12px; margin: 0.4rem 0 0; }

/* 座標表示（未選択のときだけ出るヒント行） */
.pit-coords { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }

/* ============================================================
   Meta head (撮影メタデータ見出し + 入力引き継ぎ)
   ============================================================ */
.meta-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.prefill-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: var(--color-accent-800);
  background: var(--color-accent-100); border: 1px solid var(--color-accent-200);
  padding: 5px 12px; border-radius: var(--radius-sm);
}
.prefill-badge .link-btn { margin-left: 2px; }
.prev-tag { color: var(--ink-3); font-weight: 500; font-size: 11.5px; margin-left: 6px; }
.carry-note { font-size: 12px; margin-top: 0.9rem; }

/* ============================================================
   Video frame
   ============================================================ */
.vframe {
  position: relative; width: 100%; border-radius: var(--radius-md); overflow: hidden;
  background: #10161c; border: 1px solid var(--color-neutral-200);
  aspect-ratio: 9 / 16;
}
.vframe video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #10161c; }
/* Trim preview is tap-to-play (no play button of our own); hide the browser's
   default center play-button overlay, which otherwise covers the jumper (issue #132). */
#video-preview::-webkit-media-controls-overlay-play-button,
#video-preview::-webkit-media-controls-start-playback-button,
#video-preview::-webkit-media-controls-play-button { display: none !important; -webkit-appearance: none; }
#video-preview::-webkit-media-controls { display: none !important; }
/* 動画の上に載る札は暗地の上なので、白の面ではなく暗い面 + 白文字にする
   （モックの JUMP_0817 バッジと同じ扱い）。 */
.vtag {
  position: absolute; left: 12px; top: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  color: var(--color-neutral-100); background: rgba(39, 45, 51, .78);
  padding: 4px 10px; border-radius: 0;
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.vtag::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-accent); flex: 0 0 auto;
}

/* ============================================================
   Chips / badges
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-neutral-200); color: var(--ink-2); max-width: 100%;
  background: var(--color-neutral-100);
}
.chip-coral { color: var(--color-accent); border-color: var(--color-accent-200); background: var(--color-accent-100); }
.chip-cyan  { color: var(--color-accent-2-800); border-color: var(--color-accent-2-200); background: var(--color-accent-2-100); }
.chip-dot   { width: 7px; height: 7px; border-radius: 99px; background: currentColor; flex: 0 0 auto; }
.chip .chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 自己ベスト等の栄誉表示。**黄色はここでしか使わない** */
.badge-best {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
  background: var(--highlight); color: var(--highlight-ink);
  border-radius: 0; padding: 2px 8px;
}

.divider { height: 1px; background: var(--color-divider); border: none; margin: 1.4rem 0; }

/* ============================================================
   Flow steps — 区切りバー + ラベル + 「ステップ n/N」チップ
   ------------------------------------------------------------
   モックの 3 分割バーをそのまま N 分割へ一般化した。状態は従来どおり
   app.js の `setFlowStep()` が付ける data-on / data-done で、
   **JS 側の契約は変えていない**。
   広い画面ではラベル、狭い画面では番号を出す（どちらかは必ず読める）。
   ============================================================ */
.steps { display: flex; align-items: stretch; gap: 6px; margin-bottom: 1.4rem; }
.step {
  display: flex; flex-direction: column; gap: 7px;
  flex: 1 1 0; min-width: 0;
  font-size: 11.5px; font-weight: 700; color: var(--ink-3);
}
.step::before {
  content: ""; display: block; height: 6px; border-radius: 0;
  background: var(--color-neutral-300);
  transition: background .2s;
}
.step[data-done="true"]::before { background: var(--color-accent-300); }
.step[data-on="true"]::before   { background: var(--color-accent); }
.step[data-on="true"]   { color: var(--color-accent); }
.step[data-done="true"] { color: var(--ink-2); }
.step-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-num   { display: none; }
/* 旧テーマの連結線。分割バー自体が進捗を表すので不要 */
.step-line  { display: none; }

@media (max-width: 720px) {
  .steps .step-label { display: none; }
  .steps .step-num   { display: block; }
}

/* 「ステップ 2/6」— 現在地を数で示す小札 */
.step-chip {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; color: var(--color-accent);
  background: var(--color-accent-100); border-radius: var(--radius-sm);
  padding: 4px 10px; white-space: nowrap;
}
.page-head-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}

/* ============================================================
   Drop zone
   ============================================================ */
.dropzone {
  position: relative; border: 1.5px dashed var(--color-neutral-400); border-radius: var(--radius-lg);
  padding: clamp(2rem, 6vw, 3.2rem) 1.5rem; text-align: center;
  background: var(--color-neutral-100); transition: border-color .18s, background .18s; cursor: pointer;
}
.dropzone:hover, .dropzone.drag-over { border-color: var(--color-accent); background: var(--color-accent-100); }
.dropzone-icon {
  width: 54px; height: 54px; margin: 0 auto 1rem; display: grid; place-items: center;
  border-radius: 0; background: var(--color-accent-100); color: var(--color-accent);
}
.dropzone-icon svg { width: 24px; height: 24px; }
.dropzone-main { font-family: var(--font-heading); font-size: 16px; font-weight: 800; color: var(--color-text); }
.dropzone-sub  { color: var(--ink-3); font-size: 13px; margin-top: 6px; }
.dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* ============================================================
   Scrubber
   ============================================================ */
.scrub { position: relative; height: 46px; border-radius: var(--radius-sm); background: var(--color-neutral-200); border: 1px solid var(--color-neutral-300); cursor: pointer; touch-action: none; }
.scrub-fill { position: absolute; top: 0; bottom: 0; background: var(--color-accent-100); border-left: 2px solid var(--color-accent); border-right: 2px solid var(--color-accent); pointer-events: auto; cursor: grab; touch-action: none; }
.scrub-fill:active { cursor: grabbing; }
.scrub-frames { position: absolute; inset: 0; display: flex; opacity: 0.35; pointer-events: none; border-radius: var(--radius-sm); overflow: hidden; }
.scrub-frames span { flex: 1; border-right: 1px solid var(--color-neutral-300); }
.scrub-handle { position: absolute; top: -4px; bottom: -4px; width: 28px; margin-left: -14px; background: none; border: none; padding: 0; cursor: ew-resize; touch-action: none; z-index: 2; min-height: 44px; }
.scrub-handle::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; transform: translateX(-50%); background: var(--color-accent); border-radius: 0; }

/* ============================================================
   Trim layout
   ============================================================ */
.trim-layout { display: grid; grid-template-columns: 260px 1fr; gap: 1.5rem; align-items: start; }
.trim-video .vframe { aspect-ratio: 9/16; }

@media (orientation: landscape) and (max-height: 600px) {
  .trim-layout { grid-template-columns: 200px 1fr; gap: 1rem; }
  .trim-video .vframe { max-height: calc(100vh - 140px); aspect-ratio: auto; }
}

/* 中央の再生ボタン（.vplay）は 2026-08-13 に撤去した（跳躍者を覆うため）。
   再生/停止は動画自体のタップ。初回だけ右上に小バッジで案内する。 */
.vtap-hint {
  position: absolute; right: 12px; top: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: var(--color-neutral-100);
  background: rgba(39, 45, 51, .78); padding: 4px 9px; border-radius: 0;
  pointer-events: none; opacity: 1; transition: opacity .3s;
}
.vtap-hint.is-fading { opacity: 0; }
.trim-video .vframe video { cursor: pointer; }

.trim-controls { display: flex; flex-direction: column; gap: 1rem; padding-top: 0.5rem; }
.trim-row { display: flex; align-items: center; justify-content: space-between; }
.trim-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
.trim-mark { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.8rem; background: var(--color-neutral-100); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-md); }
.trim-mark .trim-input { min-height: 40px; padding: 6px 10px; font-size: 1.1rem; font-weight: 700; }
.trim-mark .trim-length { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 900; color: var(--color-accent); }
.trim-mark .trim-length small { font-size: .72rem; color: var(--ink-3); margin-left: 2px; font-weight: 700; }
.trim-frames-note { font-size: 11.5px; color: var(--ink-3); }
.trim-summary { color: var(--ink-2); font-size: 12.5px; }
.trim-summary.trim-warning { color: var(--color-warn); font-weight: 600; }

.meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin-top: 0.7rem; }
/* 3値セグメント（性別トグル・アーカイブのフィルタ）。
   .lang-toggle / .result-tabs と同じ data-active="true" 方式。
   `.input`/`.select` と同じ min-height にして、1/3 カラムに並んだとき
   隣の入力欄と天地が揃うようにする。 */
.seg-toggle {
  display: flex; gap: 2px; padding: 3px;
  background: var(--color-neutral-200); border-radius: var(--radius-md); min-height: 48px;
}
.seg-toggle button {
  appearance: none; border: 0; background: none; cursor: pointer;
  flex: 1 1 0; min-width: 0; padding: 8px 4px; border-radius: 0;
  font-size: 12.5px; font-weight: 700; color: var(--ink-2);
  white-space: nowrap; transition: background .15s, color .15s;
}
.seg-toggle button[data-active="true"] { background: var(--color-accent); color: var(--color-neutral-100); }
.seg-toggle button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
/* 撮影位置マップのように 1/3 カラムでは潰れる項目を全幅へ。 */
.meta-grid .field-fullwidth { grid-column: 1 / -1; }
.consent { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 1.1rem; color: var(--ink-2); font-size: 13.5px; line-height: 1.6; cursor: pointer; }
.consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-accent); flex: 0 0 auto; }
.terms-page { max-width: 760px; }
.terms-card { display: flex; flex-direction: column; gap: 1rem; }
.terms-copy { color: var(--ink-2); font-size: 14px; line-height: 1.85; }
.terms-copy p { margin: 0; }
.terms-copy ul { margin: 0.8rem 0 0; padding-left: 1.2rem; }
.terms-copy li + li { margin-top: 0.45rem; }
.terms-consent { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.9rem; background: var(--color-neutral-100); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-md); color: var(--color-text); font-size: 14px; line-height: 1.6; cursor: pointer; }
.terms-consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-accent); flex: 0 0 auto; }

.upload-state-text { margin-top: 0.7rem; font-size: 12.5px; color: var(--ink-3); text-align: center; }
.upload-state-text[data-tone="warning"] { color: var(--color-warn); font-weight: 600; }
.upload-state-text[data-tone="ready"]   { color: var(--color-accent); font-weight: 600; }

.error-msg { color: var(--color-danger); font-size: 13.5px; font-weight: 600; margin-top: 0.8rem; }
.file-meta-line { color: var(--ink-3); font-size: 12.5px; margin-top: 0.4rem; }

/* 案内ボックス（ティールの淡い面）。警告ではなく「次に起きること」を伝える */
.hint-note {
  background: var(--color-accent-100); border-radius: var(--radius-md);
  padding: 12px 16px; font-size: 12.5px; font-weight: 600; line-height: 1.75;
  color: var(--color-accent-800);
}

/* ============================================================
   Login
   ============================================================ */
.login-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  min-height: calc(100vh - 6px);
}
/* ログイン画面の天に引く 2 色帯（署名要素） */
.login-rule {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: 6px;
  background: linear-gradient(90deg,
    var(--color-accent) 55%, var(--color-accent-2) 55%);
}
.login-headline {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.1rem);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin: 1.2rem 0 1rem;
}
.login-headline .accent { color: var(--color-accent); }
.login-lead { color: var(--ink-2); font-size: 14.5px; font-weight: 500; max-width: 46ch; line-height: 1.85; }
.login-actions { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 0.7rem; align-items: stretch; max-width: 22rem; }
.oidc-btn { background: var(--color-surface); border-color: var(--color-neutral-300); color: var(--color-text); }
.oidc-btn:hover { border-color: var(--color-neutral-400); }
/* ユーザー名/パスワード認証（本番の唯一のログイン経路） */
.pw-auth { margin-top: 1.4rem; max-width: 22rem; }
.pw-form { display: flex; flex-direction: column; gap: 0.8rem; }
.pw-field { display: flex; flex-direction: column; gap: 0.35rem; color: var(--ink-2); font-size: 12.5px; font-weight: 700; }
.pw-field input {
  padding: 0.8rem 0.9rem; font-size: 16px; /* 16px 未満は iOS Safari が自動ズームする */
  font-weight: 500;
  color: var(--color-text); background: var(--color-surface);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md); width: 100%; box-sizing: border-box;
  min-height: 48px;
}
.pw-field input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-100); }
.pw-hint { color: var(--ink-3); font-size: 11.5px; line-height: 1.6; margin: 0; font-weight: 500; }
/* Turnstile ウィジェットのマウント先。中身は Cloudflare の iframe（既定 300x65）で
   こちらからは制御できない。min-height で先に高さを確保し、ウィジェットが
   非同期に描かれたときにログインボタンが下へ飛ぶ（誤クリックを招く）のを防ぐ。
   [hidden] を明示するのは、.pw-form の display:flex が hidden 属性に勝つため。 */
.pw-turnstile { min-height: 65px; max-width: 100%; overflow: hidden; }
.pw-turnstile[hidden] { display: none; }
.pw-switch { color: var(--ink-2); font-size: 12.5px; margin-top: 0.9rem; }
.link-btn {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--color-accent); font-weight: 700; text-decoration: underline;
  text-underline-offset: 2px;
}
.link-btn:hover { color: var(--color-accent-700); }

.login-fine { color: var(--ink-3); font-size: 12px; margin-top: 0.8rem; max-width: 42ch; line-height: 1.6; }
.login-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2.4rem; }
.login-feats > div { display: flex; flex-direction: column; gap: 0.55rem; color: var(--ink-2); font-size: 12.5px; font-weight: 600; line-height: 1.6; }
.login-feats svg { width: 22px; height: 22px; color: var(--color-accent); }

.login-visual { display: flex; justify-content: center; }
.hero-frame { display: flex; }

/* login logo (topbar is hidden on the login screen) */
.login-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; user-select: none; margin-bottom: 1.2rem; }
.login-logo .logo-tile { width: 30px; height: 30px; border-radius: 0; }
.login-logo .logo-mark { font-weight: 800; letter-spacing: -0.01em; font-size: 20px; color: var(--color-text); line-height: 1; }
.login-logo .logo-mark .up { color: var(--color-accent); }

/* login hero illustration (modeled bar + pose skeleton) */
.hero-illus {
  position: relative;
  width: min(330px, 72vw);
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-200);
  box-shadow: var(--shadow-lg);
}
.hero-illus-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-phase-tag {
  position: absolute; left: 12px; bottom: 12px; z-index: 3;
  font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--color-neutral-100);
  background: rgba(39, 45, 51, .82); padding: 4px 10px; border-radius: 0;
}
.hero-angle {
  position: absolute; z-index: 4;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text);
  background: rgba(255,255,255,.9); padding: 3px 7px; border-radius: 0;
  border: 1px solid var(--color-neutral-200); white-space: nowrap;
}
.hero-joints { animation: jhpulse 2.6s ease-in-out infinite; transform-origin: center; }
@keyframes jhpulse { 0%,100% { opacity: .5 } 50% { opacity: 1 } }

@media (prefers-reduced-motion: reduce) { .hero-joints { animation: none; } }

/* ============================================================
   Height ruler
   ============================================================ */
.ruler { position: relative; width: 48px; flex: 0 0 48px; align-self: stretch; }
.ruler-track { position: absolute; inset: 0 auto 0 50%; width: 2px; transform: translateX(-50%); background: linear-gradient(180deg, var(--color-accent), var(--color-neutral-200) 70%); border-radius: 0; }
.ruler-tick { position: absolute; left: 50%; height: 1px; background: var(--color-neutral-300); }
.ruler-tick.major { width: 22px; transform: translateX(-50%); background: var(--color-neutral-500); }
.ruler-tick.minor { width: 12px; transform: translateX(-50%); }
.ruler-bar { position: absolute; left: 50%; transform: translateX(-50%); width: 30px; height: 3px; border-radius: 0; background: var(--color-accent); }

/* ============================================================
   Analyze progress
   ============================================================ */
/* 解析待ちも**他の画面と同じページ枠に載せる**（HTML 側で `.page .page-narrow` を
   併記する）。以前はここが `min-height: calc(100vh - 52px)` の中央寄せ＋カード幅
   600px 固定で、解析開始を押した瞬間に「カード幅」「縦位置」「スクロールバーの
   有無」が同時に動いていた。枠を共有すれば、遷移してもページの形が変わらない。 */
/* 解析待ちは stepper とカードを縦に積むだけ。独自の縦寸法・中央寄せを
   持たせない（持たせると遷移でページの形が変わる＝2026-08-04 の実障害）。 */
.analyze-wrap { display: block; }
.analyze-card { width: 100%; }
.analyze-head { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.analyze-pct {
  font-family: var(--font-heading);
  font-weight: 900; font-size: clamp(2.6rem, 9vw, 4rem);
  letter-spacing: -0.02em; line-height: 1; color: var(--color-text);
}
.analyze-pct small { font-size: .32em; color: var(--color-accent); margin-left: 2px; }
/* 「この動画は約n分かかります（nフレーム）」。%の下の行に置く。 */
.analyze-eta { margin: 0.35rem 0 0; font-size: 12px; font-weight: 600; color: var(--ink-3); }
/* 残り時間。%と同じ行の右端（`.analyze-head` は flex）。 */
.analyze-remaining {
  margin: 0 0 0 auto; font-size: 13px; font-weight: 700; color: var(--color-accent);
}
.bigbar { height: 8px; border-radius: 0; background: var(--color-neutral-300); overflow: hidden; margin: 0.8rem 0 0.8rem; }
.bigbar i { display: block; height: 100%; background: var(--color-accent); border-radius: 0; transition: width 0.3s ease; }
.status-text  { color: var(--ink-2); font-size: 13px; font-weight: 600; }
.task-id-text { font-size: 11px; color: var(--ink-3); margin-top: 0.5rem; }

/* 解析待ち画面の広告枠（docs/ads_policy.md 1）。
   Turnstile と同じ考え方でレイアウトシフトを先回りして潰す: 広告は非同期に
   描かれるので、後から高さが生えると進捗表示とキャンセルボタンが下へ飛ぶ
   （待っている人が誤クリックする）。--ad-h を先に確保し、<ins> 側にも同じ高さを
   固定して「実際に配信された広告の高さ」に左右されないようにする。
   [hidden] を明示するのは、将来 .analyze-card 側の display 指定が hidden 属性に
   勝つ事故（.pw-form で実際に起きた）を防ぐため。無効時は完全に無寸法。 */
.ad-slot { --ad-h: 250px; margin-top: 1.4rem; min-height: calc(var(--ad-h) + 24px); overflow: hidden; }
.ad-slot[hidden] { display: none; }
.ad-slot-label { display: block; font-size: 10px; letter-spacing: .08em; color: var(--ink-3); text-align: left; margin-bottom: 4px; }
.ad-slot .ad-unit { display: block; width: 100%; height: var(--ad-h); }

/* 解析待ち画面の豆知識カード（15 秒ごとに差し替わる）。
   広告枠と同じ CLS の理屈がここにも効く: tip の長さが違うとカードの高さが
   15 秒ごとに変わり、**下にある広告枠が上下して誤クリックを誘発する**。
   本文の長さは tests/test_frontend_static.py::TestAnalyzeTips が上限で縛り、
   その上限が収まる min-height をここで先に確保して高さの揺れを潰す
   （min-height なので、翻訳で溢れたときは切らずに伸ばす＝文章は必ず読める）。
   [hidden] を明示するのは .ad-slot と同じ理由（display 指定が hidden 属性に
   勝つ事故の予防）。

   **予約する高さはフォント依存で決まる**。同じ本文でもグリフ幅が違えば行数が変わる:
   実測で幅 375px の英文 1 件が、Windows の system-ui では 232px なのに Verdana 級の
   広い書体では 269px になった（CI の Linux ランナーは stack の候補を 1 つも持たず
   ここへ落ちる）。したがって min-height は「手元の実測」ではなく**観測した最悪の
   書体**の上に取る。余白が出るのは承知のうえで、利用者に tip をスクロールさせない
   ことと、15 秒ごとに下の広告枠を動かさないことを優先している。
   検証は E2E `TestCardHeightIsStable`（既定書体と広い書体の両方で測る）。 */
.tips-card {
  margin-top: 1.4rem; padding: 14px 16px 12px; border-radius: var(--radius-md); text-align: left;
  min-height: 288px;
  display: flex; flex-direction: column;
  background: var(--color-accent-100);
  border: 1px solid var(--color-accent-200);
}
.tips-card[hidden] { display: none; }
@media (min-width: 560px) { .tips-card { min-height: 200px; } }
.tips-top { display: flex; align-items: center; gap: .45rem; margin-bottom: .55rem; }
.tips-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: var(--color-accent-800); }
.tips-cat { font-size: 10.5px; font-weight: 600; color: var(--color-accent-700); }
.tips-cat:not(:empty)::before { content: "·"; margin-right: .4rem; }
.tips-ctl { margin-left: auto; display: flex; gap: 2px; }
.tips-btn { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-accent-700); }
.tips-btn:hover { background: var(--color-surface); }
.tips-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.tips-title { font-family: var(--font-heading); font-size: 13.5px; font-weight: 800; line-height: 1.5; color: var(--color-text); }
.tips-text { margin-top: .3rem; font-size: 12.5px; font-weight: 500; line-height: 1.8; color: var(--color-neutral-800); }
.tips-src { margin-top: .4rem; margin-bottom: .7rem; font-size: 10.5px; line-height: 1.5; color: var(--color-accent-700); }
/* margin-top:auto で 15 秒バーをカード下端へ寄せる。予約した高さと本文の差
   （＝短い tip で出る余白）が、バーの下ではなく本文とバーの間に入るので、
   意図した余白に見える。本文が高いときは auto が 0 に潰れ、.tips-src の
   margin-bottom が最小の間隔を保つ。 */
.tips-timer { height: 2px; border-radius: 0; background: var(--color-accent-200); overflow: hidden; margin-top: auto; }
.tips-timer i { display: block; height: 100%; width: 0; border-radius: 0; background: var(--color-accent); }
/* 動きを減らす設定では 15 秒バーのアニメを出さない（内容の切り替えは
   停止ボタンで止められる＝WCAG 2.2.2 は満たしたまま）。 */
@media (prefers-reduced-motion: reduce) { .tips-timer { visibility: hidden; } }

/* ============================================================
   Result
   ============================================================ */
.result-grid { display: grid; grid-template-columns: 360px 1fr; gap: 1.5rem; align-items: start; }
.result-video .vframe { aspect-ratio: 9/16; }

/* ---- segment control for result tabs ---- */
.result-tabs {
  display: inline-flex;
  background: var(--color-neutral-200);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 2px;
  margin-bottom: 1.2rem;
  flex-wrap: wrap;
}
.result-tabs .navlink,
.result-tabs button {
  appearance: none; border: 0; background: none; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--ink-2);
  padding: 7px 16px; border-radius: 0; transition: .16s;
  min-height: 36px;
}
.result-tabs .navlink[data-active="true"],
.result-tabs button.active,
.result-tabs button[data-active="true"] {
  background: var(--color-accent); color: var(--color-neutral-100);
}

/* ---- 大きな数値タイル（最新記録・自己ベスト等） ---- */
.stat-tile {
  width: 104px; height: 104px; flex: 0 0 auto;
  border-radius: 0; background: var(--color-accent-100);
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.stat-tile .stat-tile-value {
  font-family: var(--font-heading); font-weight: 900;
  font-size: 33px; line-height: 1; color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
.stat-tile .stat-tile-unit { font-size: 11px; font-weight: 700; color: var(--color-accent); margin-top: 3px; }

/* ---- KV list ---- */
.kv { display: flex; justify-content: space-between; gap: 1rem; padding: 10px 0; border-bottom: 1px solid var(--color-neutral-200); font-size: 13.5px; }
.kv:last-child { border: none; }
.kv span   { color: var(--ink-2); }
.kv strong { font-variant-numeric: tabular-nums; font-weight: 700; }

.result-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.2rem; margin: 0.6rem 0 1rem; }
.result-dl dt { color: var(--ink-2); font-size: 13.5px; }
.result-dl dd { font-size: 13.5px; font-weight: 600; }

/* 用途ごとのグループ（解析結果 / 共有する / AIコーチング）を縦に積む。
   グループ内はボタンを横に並べる（.result-action-row）。 */
.result-actions { display: grid; gap: 0.9rem; margin-top: 0.6rem; }
.result-actions .btn svg { vertical-align: -2px; margin-right: 6px; }
.result-action-group {
  display: grid;
  gap: 0.45rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
}
.result-action-group-title {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--color-accent);
}
.result-action-group-hint { margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--ink-3); }
.result-action-row { display: flex; gap: 0.55rem; flex-wrap: wrap; }
.share-length-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 12.5px;
  color: var(--ink-2);
  cursor: pointer;
}
.share-length-toggle input { margin: 0; accent-color: var(--color-accent); }
/* 共有の設定（尺・演出版の見た目・出す要素）。行はサーバが選択肢を返すまで
   `hidden` なので、既定では従来どおり尺のトグル1行だけが出る。 */
.share-options { display: flex; flex-direction: column; gap: 0.45rem; }
.share-theme-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink-2);
}
.share-theme-select {
  font: inherit;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: inherit;
}
.share-elements-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink-2);
}
.share-elements-label { font-weight: 700; }
.share-element-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
}
.share-element-toggle input { margin: 0; accent-color: var(--color-accent); }
.share-fallback {
  margin-top: 0.7rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.share-fallback p { margin: 0; font-size: 0.88rem; line-height: 1.6; }
/* 「準備できた・もう一度押すと共有」は次の操作を促す文なので、他の案内より強く出す。 */
.share-ready { font-weight: 700; color: var(--color-accent); }
.share-caption-label { font-size: 0.76rem !important; font-weight: 700; color: var(--ink-3); }
.share-caption {
  align-self: stretch;
  font-size: 0.86rem !important;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-300);
  user-select: all;
  -webkit-user-select: all;
  word-break: break-word;
}
.share-help-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.share-hint { font-size: 0.78rem !important; color: var(--ink-3); }
.flow-actions { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; flex-wrap: wrap; }

.performance-report {
  display: grid;
  gap: 1rem;
}
.performance-loading,
.performance-warning {
  color: var(--ink-2);
  font-size: 13.5px;
}
.performance-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}
.performance-kicker {
  margin: 0 0 0.2rem;
  color: var(--color-accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}
.performance-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.35;
  letter-spacing: 0;
}
.performance-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}
.performance-metric {
  min-height: 92px;
  padding: 13px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-neutral-200);
  background: var(--color-neutral-100);
}
.performance-metric-label {
  display: block;
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
}
.performance-metric-value {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-heading);
  font-weight: 900;
  color: var(--color-text);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.performance-metric small {
  display: block;
  margin-top: 0.45rem;
  color: var(--ink-3);
  font-size: 10.5px;
  line-height: 1.45;
}
.motion-model {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-neutral-200);
  background: var(--color-neutral-100);
}
.motion-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
}
.motion-meta {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  align-items: center;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.9);
  border: 1px solid var(--color-neutral-200);
  font-size: 12.5px;
  backdrop-filter: blur(8px);
}
.motion-meta span {
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.phase-report {
  display: grid;
  gap: 0.65rem;
}
.phase-report h4,
.phase-bars {
  display: grid;
  gap: 0.45rem;
}
.phase-bar-row {
  display: grid;
  grid-template-columns: minmax(72px, 92px) minmax(0, 1fr) 64px;
  gap: 0.7rem;
  align-items: center;
  color: var(--ink-2);
  font-size: 12.5px;
}
.phase-bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phase-bar-track {
  height: 8px;
  border-radius: 0;
  overflow: hidden;
  background: var(--color-neutral-200);
}
.phase-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
}
.phase-bar-row strong {
  color: var(--color-text);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.performance-warnings {
  display: grid;
  gap: 0.35rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-md);
  background: var(--color-warn-bg);
  color: var(--color-warn);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.6;
}
.performance-warnings p {
  margin: 0;
}

/* ---- AIコーチ: 円形アバター + 吹き出しカード（モック 05） ---- */
.performance-advice {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.9rem;
}
.performance-advice-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.performance-advice-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  color: var(--color-accent-800);
  background: var(--color-accent-100);
  border: 1px solid var(--color-accent-200);
}
.performance-advice-beta { margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--ink-3); }
.advice-mode-builder {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
}
.advice-mode-title { margin: 0; font-size: 12.5px; font-weight: 800; color: var(--color-text); }
.advice-mode-hint { margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--ink-3); }
.advice-mode-fields {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: 3px;
}
.advice-target-field[hidden] { display: none; }
.performance-advice-body { display: grid; gap: 0.45rem; }
.performance-advice-body:empty { display: none; }
/* 助言スレッド（追加で聞いた分・掘った所見）。最初の助言の下に罫で区切って並べる。 */
.performance-advice-thread { display: grid; gap: 0.6rem; }
.performance-advice-thread:empty { display: none; }
.performance-advice-thread-item {
  padding-top: 0.6rem;
  border-top: 1px dashed var(--color-neutral-200);
}
.advice-followups { display: grid; gap: 0.55rem; margin-top: 0.35rem; }
.advice-followup-group { display: grid; gap: 0.3rem; }
.advice-followup-title { margin: 0; font-size: 11.5px; font-weight: 800; color: var(--color-text); }
.advice-followup-hint { margin: 0; font-size: 11px; line-height: 1.6; color: var(--ink-3); }
.advice-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.advice-chip {
  appearance: none;
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
  color: var(--color-text);
  font: inherit;
  font-size: 11.5px;
  line-height: 1.4;
  padding: 4px 10px;
  cursor: pointer;
}
.advice-chip:hover { border-color: var(--color-accent-700); }
.advice-chip:disabled { opacity: .55; cursor: default; }
.performance-advice-kind {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--color-accent-700);
}
/* 出所（AI が書いたのか、レビュー済みの固定ヒントか）。**塗りで区別しない** ——
   オレンジは要注意・BEST の 4 用途に限る規則（theme の「2色＋地」）。
   罫と文字の強さだけで見分けさせる。 */
.performance-advice-origin {
  display: grid;
  gap: 2px;
  border-left: 3px solid var(--color-neutral-300);
  padding-left: 10px;
}
.performance-advice-origin[data-origin="luna_generated"] {
  border-left-color: var(--color-accent);
}
.performance-advice-origin-title {
  margin: 0;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--color-text);
}
.performance-advice-origin-note {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-3);
}
/* 解析そのものを信用できないときの案内（レポートの先頭）。「要注意」なので
   警告色の罫と地を使う（文字は --color-warn で白地 6.3:1）。 */
.performance-trust-notice {
  display: grid;
  gap: 6px;
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-left: 3px solid var(--color-warn);
  background: var(--color-warn-bg);
}
.performance-trust-title {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--color-warn);
}
.performance-trust-note,
.performance-trust-lead,
.performance-trust-reasons {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.performance-trust-lead { font-weight: 700; }
.performance-trust-reasons { padding-left: 1.2em; }
.performance-trust-notice .btn {
  justify-self: start;
  margin-top: 4px;
}
/* 吹き出し: 左上だけ角を落として「コーチが喋っている」形にする */
.performance-advice-text {
  white-space: pre-wrap;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.85;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  border-top-left-radius: 5px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.coaching-video-btn { margin-top: 0.35rem; }
.coaching-video-status { margin: 0; color: var(--ink-3); font-size: 11.5px; line-height: 1.5; }
/* カードへの受け止め。`.result-action-row` と同じ間隔にする —— 隙間ゼロで並ぶと
   1px の枠を共有して「1つの分割コントロール」に見え、2択だと読めない。 */
.coaching-card-reactions { display: flex; gap: 0.55rem; flex-wrap: wrap; margin-top: 0.35rem; }
.coaching-card-reaction-note,
.coaching-card-reaction-status {
  margin: 0.5rem 0 0;
  color: var(--ink-3);
  font-size: 11.5px;
  line-height: 1.5;
}
.coaching-card-reaction-btn[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-neutral-100);
}
.coaching-video { display: block; width: 100%; max-width: 480px; margin-top: 0.5rem; background: #000; }
.performance-advice-context,
.performance-advice-disclaimer {
  margin: 0;
  color: var(--ink-3);
  font-size: 11.5px;
}
.performance-advice-context { font-weight: 700; }

/* ============================================================
   Archive entry (アップロード画面からアーカイブ画面への入口)
   ============================================================ */
.archive-entry { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.archive-entry[hidden] { display: none; }
.archive-entry-count { margin: 0.25rem 0 0; font-size: 13.5px; color: var(--ink-2); font-weight: 700; }
.archive-entry .btn { flex: 0 0 auto; }

/* ============================================================
   マイページ（案1a「計測台帳」）— 件数の帯・最新値・プロフィール
   ============================================================ */
/* 上から「今の数値 → 推移 → 跳躍の記録 → プロフィール」の一本道。面（角丸 + 影）
   ではなく罫と整列で構造を作るのは既存テーマの方針そのままで、ここでも
   `--radius-*` は 0・`--shadow-*` は none を前提にしている。 */
.mypage-summary {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--color-divider); background: var(--color-surface);
  margin-top: 1rem;
}
.mypage-summary[hidden] { display: none; }
.mypage-cell { padding: 14px 12px; border-right: 1px solid var(--color-neutral-200); }
.mypage-cell:last-child { border-right: 0; }
.mypage-cell-label { display: block; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.mypage-cell-value {
  display: block; margin-top: 4px; font-size: 30px; font-weight: 900; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mypage-cell-value .mypage-unit { font-size: 14px; font-weight: 700; margin-left: 3px; }
.mypage-cell-month .mypage-cell-value { color: var(--color-accent); }

/* 最新値のカード。数値は主色で大きく、増減は塗りの札で右端に置く。
   増減に橙（要注意）は使わない —— 速く跳べた/遅かったは良否ではないので、
   `--color-accent-2` の役割（BEST・要注意）と衝突させない。 */
.mypage-latest { display: grid; gap: 10px; margin-top: 10px; }
.mypage-latest[hidden] { display: none; }
.mypage-metric {
  border: 1px solid var(--color-divider); background: var(--color-surface); padding: 16px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
}
.mypage-metric-body { min-width: 0; }
.mypage-metric-name { display: block; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.mypage-metric-value {
  display: block; margin-top: 6px; font-size: 40px; font-weight: 900; line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.mypage-metric-primary .mypage-metric-value { color: var(--color-accent); }
.mypage-metric-value .mypage-unit {
  font-size: 16px; font-weight: 700; color: var(--ink-2); margin-left: 5px;
}
.mypage-metric-note { display: block; margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.mypage-delta {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
  font-size: 13px; font-weight: 800; color: var(--color-neutral-100);
  background: var(--color-accent); padding: 5px 9px; font-variant-numeric: tabular-nums;
}

/* 跳躍者プロフィール（読み取り専用の定義リスト） */
.profile-title {
  font-family: var(--font-heading); font-size: 1.19rem; font-weight: 900;
  letter-spacing: -0.01em; margin: 0;
}
.profile-note { color: var(--ink-3); font-size: 12px; margin: 0.5rem 0 0; line-height: 1.6; }
.profile-rows { display: grid; margin-top: 0.75rem; }
.profile-row {
  display: flex; justify-content: space-between; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid var(--color-neutral-200); font-size: 14px;
}
.profile-row:last-child { border-bottom: 0; }
.profile-row dt { color: var(--ink-2); margin: 0; }
.profile-row dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ============================================================
   History (跳躍の一覧)
   ============================================================ */
/* 行クラス .history-item / 空状態 .history-empty は
   E2E（test_frontend_flow / test_ads_progress）が数える契約なので改名しない。 */
.history-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.history-title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 900; letter-spacing: -0.01em; margin: 0; }
.history-count { color: var(--ink-3); font-size: 12px; margin: 0.3rem 0 0; }
.history-count strong { color: var(--color-text); font-weight: 700; }
.history-filter { flex: 0 0 auto; min-height: 40px; }
.history-filter button { font-size: 12px; padding: 6px 12px; }
/* 一覧は「月の見出し（畳める）→ 日付の背骨に沿ったタイムライン」（案1a）。
   行どうしの隙間を 0 にして 1px の罫で仕切る —— 背骨が途切れて見えないように。 */
.history-list { display: block; margin-top: 0.9rem; }
.history-group { margin-top: 2px; }
/* 月の見出しは開閉ボタン。`.history-date` は**月名だけ**を持つ（件数を混ぜると
   E2E の見出し検査が「今月」と一致しなくなるし、読み上げも冗長になる）。 */
.history-month {
  width: 100%; display: flex; align-items: center; gap: 8px;
  margin-top: 20px; padding: 0 0 8px; min-height: 44px; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--color-divider);
  background: none; font: inherit; text-align: left; color: var(--color-text);
}
.history-group:first-child .history-month { margin-top: 0; }
.history-month-chevron { display: inline-flex; flex: 0 0 auto; transition: transform .18s; }
.history-month[aria-expanded="false"] .history-month-chevron { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .history-month-chevron { transition: none; } }
.history-date { font-size: 14px; font-weight: 800; letter-spacing: .02em; color: var(--color-text); }
.history-month-meta { font-size: 12px; font-weight: 700; color: var(--ink-3); }

/* 1 行 = 日付の背骨 + 記録。左 56px は「日付 28px + 背骨と印」の帯。 */
.history-item {
  position: relative; padding: 14px 0 14px 56px;
  border-bottom: 1px solid var(--color-neutral-200);
  font-size: 13.5px;
}
.history-item::before {
  content: ""; position: absolute; left: 36px; top: 0; bottom: 0;
  width: 1px; background: var(--color-neutral-300);
}
.history-item:last-child { border-bottom: 0; }
.history-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* 札は縮ませない（見出しが長い動画でも「自己ベスト」を欠けさせない）。 */
.history-title-row .badge-best { flex: 0 0 auto; }
/* 見出しは**バー高**（案1a）。ファイル名はメタ行へ落とした —— 一覧で効くのは
   「どのくらいの高さを跳んだか」で、アップロード時のファイル名ではない。 */
.history-item strong { font-size: 16px; font-weight: 800; }
.history-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.history-metrics { font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.history-metrics strong { font-size: inherit; font-weight: 800; }
.history-meta { font-size: 12px; color: var(--ink-3); }
.history-filename {
  display: inline-block; max-width: 26ch; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
.history-item-expired { opacity: .72; }
/* 自己ベストは日付の印と札で示す（行を枠で囲うと背骨が切れる）。 */
.history-item-best strong { color: var(--color-accent); }

/* 行頭の日付。数字は常に本文色で置き、強調（自己ベスト / 最新 / 期限切れ）は
   背骨の上の四角い印だけで示す —— 文字色を薄くすると AA を割る。
   クラス名 `.history-thumb` は据え置き（E2E とスタイルの契約）。 */
.history-thumb {
  position: absolute; left: 0; top: 14px; width: 28px; text-align: right;
  font-size: 15px; font-weight: 800; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.history-thumb::after {
  content: ""; position: absolute; left: 31px; top: 2px; width: 11px; height: 11px;
  background: var(--color-neutral-300);
}
.history-thumb.is-recent::after { background: var(--color-accent-300); }
.history-thumb.is-best::after { background: var(--color-accent); }
.history-thumb.is-expired::after {
  background: var(--color-surface); border: 1px solid var(--color-neutral-400);
}
.history-thumb .thumb-day { font-size: inherit; font-weight: inherit; }

.history-more { width: 100%; margin-top: 16px; }
.history-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-neutral-200); color: var(--ink-3); background: var(--color-neutral-100);
  flex: 0 0 auto;
}
.history-badge.is-done { color: var(--color-accent); background: var(--color-accent-100); border-color: var(--color-accent-200); }
.history-badge.is-running { color: var(--color-warn); background: var(--color-warn-bg); border-color: #f0d9a8; }
/* 1 行の主役は「結果を見る」ひとつ（`btn-primary`）。残りは小さい枠線に落として
   高さで差を付ける。削除だけは文字色を灰に置き、押し間違いのコストが高い操作を
   視線の最後に回す（`--color-error` で赤くはしない —— 常時赤は「危険」の意味を
   すり減らす。確認ダイアログが実際の歯止め）。 */
.history-actions { display: flex; gap: 0.4rem; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.history-actions .btn-primary { min-height: 44px; }
.history-delete-btn { color: var(--ink-3); }
.history-retention { color: var(--ink-3); font-size: 11.5px; margin: 1rem 0 0; line-height: 1.6; }
.history-empty { color: var(--ink-3); font-size: 13.5px; }

/* 動画ラベル（履歴のバッジ行とインライン編集フォーム） */
.history-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.history-badges .chip { font-size: 11px; padding: 2px 8px; }
.history-badges .chip .chip-text { max-width: 22ch; }
/* ラベル編集フォーム。撮影条件はウィザードの入力から自動で入るようになったので、
   ここは「人が入れるしかない量」だけの小さな枠に抑える（開いたときに一覧の主役を
   押しのけないこと）。列は狭め・コントロールも小さめで、長い説明は `title` へ。 */
.label-editor { display: grid; gap: 8px 10px; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); padding-top: 8px; margin-top: 2px; border-top: 1px dashed var(--color-neutral-300); }
.label-editor[hidden] { display: none; }
.label-field { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.label-field input, .label-field select { font: inherit; font-size: 12.5px; font-weight: 500; padding: 5px 8px; border: 1px solid var(--color-neutral-300); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); min-width: 0; }
.label-field-checkbox { flex-direction: row; align-items: center; gap: 7px; grid-column: 1 / -1; cursor: help; }
.label-editor-note { grid-column: 1 / -1; font-size: 11px; color: var(--ink-3); margin: 0; }
.label-editor-actions { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#history-archived { margin-top: .7rem; }
#history-archived summary { cursor: pointer; color: var(--ink-3); font-size: 12.5px; font-weight: 600; user-select: none; }
#history-archived > .history-item { opacity: .78; }

/* グループ比較アドバイスの条件ビルダー */
.advice-group-builder { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--color-neutral-300); }
.advice-group-title { font-family: var(--font-heading); font-weight: 800; font-size: 13px; margin: 0 0 2px; }
.advice-group-hint { color: var(--ink-3); font-size: 11.5px; margin: 0 0 8px; line-height: 1.6; }
.advice-group-fields { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 10px; }

/* 指標の推移グラフ（自前 inline SVG） */
.series-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.series-title {
  font-family: var(--font-heading); font-size: 1.19rem; font-weight: 900;
  letter-spacing: -0.01em; margin: 0;
}
/* 指標はタブで切り替え、グラフは常に1枚だけ（案1a）。選択中は主色のベタ塗り。 */
.series-tabs { display: flex; gap: 2px; padding: 3px; background: var(--color-neutral-200); margin-top: 0.75rem; }
.series-tab {
  border: 0; flex: 1 1 0; padding: 9px 6px; min-height: 40px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 700;
  background: transparent; color: var(--ink-2);
}
.series-tab[data-active="true"] { background: var(--color-accent); color: var(--color-neutral-100); }
/* 読み込み中の骨。線が来るまで「軸だけ出て中身が空」に見せない。 */
@keyframes jhSeriesPulse { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }
.series-skeleton { animation: jhSeriesPulse 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .series-skeleton { animation: none; opacity: .6; } }
.series-hint { color: var(--ink-3); font-size: 12px; margin: 0.4rem 0 0.7rem; line-height: 1.6; }
.series-controls { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0.4rem 0 0; }
.series-controls-head {
  margin: 1.4rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--color-neutral-200);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--color-accent);
}
.series-check { align-self: end; }
/* <important>
   **チャートは viewBox をホストの実測幅で組む**（app.js の renderSeriesChart）。
   ここで横スクロールを許すと、はみ出し → スクロールバー出現 → clientWidth 減少
   → ResizeObserver が再描画、の往復になり得る。溢れる設計ではないので閉じる。
   </important> */
.series-chart-host { overflow: hidden; margin-top: 0.9rem; }
.series-chart { width: 100%; height: auto; display: block; }
.series-band { fill: var(--color-accent); opacity: .07; }
.series-band-edge { stroke: var(--color-accent-300); stroke-width: 1; stroke-dasharray: 3 3; }
.series-grid { stroke: var(--color-neutral-200); stroke-width: 1; }
.series-axis { stroke: var(--color-neutral-400); stroke-width: 1; }
/* 目盛りは数字なので等幅数字で。**px はそのまま画面の px** になる（上の important）。 */
.series-axis-label {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: 11.5px; fill: var(--ink-3);
}
.series-unit { font-size: 11px; font-weight: 700; letter-spacing: .04em; fill: var(--ink-3); }
.series-line { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.series-line-fix { stroke: var(--color-accent); }
.series-line-moving { stroke: var(--color-accent-2-600); }
.series-line-unknown { stroke: var(--color-neutral-500); }
/* 重なった点を数えられるように、地の色で縁を取る。 */
.series-dot { stroke: var(--color-surface); stroke-width: 1.6; }
.series-dot-fix { fill: var(--color-accent); }
.series-dot-moving { fill: var(--color-accent-2-600); }
.series-dot-unknown { fill: var(--color-neutral-500); }
.series-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0.6rem 0 0; font-size: 12px; }
.series-legend-item { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 700; }
.series-legend-item::before { content: ""; width: 14px; height: 3px; border-radius: 0; }
.series-legend-fix::before { background: var(--color-accent); }
.series-legend-moving::before { background: var(--color-accent-2-600); }
.series-note { color: var(--ink-3); font-size: 12px; margin: 0.35rem 0 0; line-height: 1.65; }
.series-empty { color: var(--ink-3); font-size: 12.5px; }

/* ============================================================
   Section spacing
   ============================================================ */
.section-gap { margin-top: 1.2rem; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 920px) {
  .login-grid { grid-template-columns: 1fr; min-height: 0; padding-top: 2rem; }
  .login-visual { order: -1; }
  .hero-illus { width: min(260px, 64vw); }
  .trim-layout { grid-template-columns: 1fr; }
  .trim-video .vframe { aspect-ratio: 16/9; max-width: 420px; margin: 0 auto; }
  .result-grid { grid-template-columns: 1fr; }
  .result-video .vframe { max-width: 320px; margin: 0 auto; }
}
@media (max-width: 920px) and (orientation: landscape) {
  .trim-layout { grid-template-columns: 220px 1fr; }
  .trim-video .vframe { aspect-ratio: 9/16; max-width: none; margin: 0; }
}
@media (max-width: 560px) {
  /* ---- Topbar: narrow padding/gap so all elements fit in one row ---- */
  .topbar {
    padding: 0 12px;
    gap: 0.5rem;
  }
  .topbar-left  { gap: 0.5rem; min-width: 0; }
  .topbar-right { gap: 0.4rem; min-width: 0; flex-shrink: 1; }

  .logo-mark { font-size: 17px; }
  .logo-tile { width: 26px; height: 26px; }

  /* Login, trim, meta, performance layouts */
  .login-feats { grid-template-columns: 1fr; gap: 0.8rem; }
  .login-feats > div { flex-direction: row; align-items: center; }
  .trim-grid { grid-template-columns: 1fr; }
  .meta-grid { grid-template-columns: 1fr; }
  .performance-head { align-items: stretch; flex-direction: column; }
  .performance-metric-grid { grid-template-columns: 1fr; }
  .phase-bar-row { grid-template-columns: minmax(68px, 84px) minmax(0, 1fr) 58px; gap: 0.5rem; }
  .motion-meta { position: static; margin: 8px; }
}

/* Very narrow: hide Beta badge to give lang-toggle room */
@media (max-width: 420px) {
  .beta { display: none; }
  .topbar { padding: 0 8px; gap: 0.3rem; }
  .logo-mark { font-size: 15px; }
  .topbar-right { gap: 0.25rem; }
  .topbar-right .btn-mini { padding: 5px 7px; font-size: 12px; white-space: nowrap; }
  .lang-toggle button { padding: 4px 8px; font-size: 11px; }
}

/* ============================================================
   Jumper canvas
   ============================================================ */
.jumper-canvas-wrap { margin-bottom: 1rem; }
.jumper-canvas-wrap .vframe { max-width: 480px; margin: 0 auto; aspect-ratio: 16/9; }
.jumper-hint { color: var(--ink-3); font-size: 12.5px; text-align: center; margin-top: 0.5rem; }

/* 1フレーム自動検出プレビュー: ローディング表示 & 確認UI（跳躍者/バー共通） */
.detect-preview-loading {
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  margin-top: 0.6rem;
}
.detect-preview-confirm {
  margin-top: 0.8rem;
  padding: 1rem;
  background: var(--color-accent-100);
  border-radius: var(--radius-md);
  text-align: center;
}
/* 自動検出が不発だったときの理由。手動選択は使えるので警告色にはしない
   （「壊れた」ではなく「手で囲んでください」を伝えるのが目的）。 */
.detect-preview-note {
  color: var(--ink-2);
  font-size: 12.5px;
  text-align: center;
  margin-top: 0.6rem;
}
.detect-preview-question { font-family: var(--font-heading); color: var(--color-text); font-size: 14px; font-weight: 800; margin: 0 0 0.7rem; }
.detect-preview-actions { display: flex; gap: 0.6rem; justify-content: center; }
.detect-preview-actions .btn { flex: 1 1 auto; max-width: 220px; }

/* ============================================================
   Language toggle (JA | EN segment control)
   ============================================================ */
.lang-toggle {
  display: inline-flex;
  background: var(--color-neutral-200);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
  align-items: center;
  flex-shrink: 0;
}
.lang-toggle button {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  padding: 4px 10px;
  border-radius: 0;
  min-height: 28px;
  line-height: 1;
  transition: background .15s, color .15s;
}
.lang-toggle button[data-active="true"] {
  background: var(--color-accent);
  color: var(--color-neutral-100);
}
/* login-screen内の小型トグル */
.login-lang-toggle {
  margin-top: 0.8rem;
}
/* 撮影位置で測れない表示要素（サーバが unavailable_code を付けたもの）。
   押しても変わらないトグルであることを見た目で示す。 */
.share-element-toggle[data-locked="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ============================================================
   Bottom navigation
   ============================================================ */
/* 行き先は 2 つだけ。トップバーと同じ文法（罫 1 本・角丸なし・影なし）で、
   上下の対になるように置く。出す画面の判定は app.js の FOOTER_SCREENS。 */
.bottomnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--color-divider);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottomnav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 10px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
}
.bottomnav-btn + .bottomnav-btn { border-left: 1px solid var(--color-divider); }
.bottomnav-btn:hover { background: var(--color-neutral-100); color: var(--color-accent); }
.bottomnav-btn svg { flex: 0 0 auto; }
@media (max-width: 420px) {
  .bottomnav-btn { flex-direction: column; gap: 2px; font-size: 11px; min-height: 56px; }
}

/* ============================================================
   Result actions — 3 icons + one exclusive panel
   ============================================================ */
.result-actionbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 0.6rem;
}
.result-action-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border: 1px solid var(--color-neutral-200);
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 11.5px;
  font-weight: 700;
}
.result-action-icon:hover { border-color: var(--color-accent); color: var(--color-accent); }
.result-action-icon[aria-expanded="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent-100);
  color: var(--color-accent);
}
.result-panel { display: grid; gap: 0.9rem; margin-top: 8px; }
.result-panel > [hidden] { display: none; }

/* アドバイス本文のたたみ。中身が入るまで見出しごと出さない（app.js が hidden）。 */
.advice-fold {
  border-top: 1px solid var(--color-divider);
  padding-top: 0.45rem;
}
.advice-fold-summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-accent);
  padding: 0.35rem 0;
  list-style: none;
}
.advice-fold-summary::-webkit-details-marker { display: none; }
.advice-fold-summary::before {
  content: "\203A";
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.15s ease;
}
.advice-fold[open] > .advice-fold-summary::before { transform: rotate(90deg); }

/* ============================================================
   Share preview — 9:16 のテンプレアニメ
   ============================================================ */
/* 利用者の解析結果は 1 つも入らない見本。骨格は解析済みの跳躍 1 本の実 KP
   （frontend/static/js/share-sample.js＝生成物）で、テーマ（色・線の文法）と
   要素トグルだけが実際の設定に追随する。色は CSS 変数で svg[style] から入る
   （app.js が /share-options の theme_specs をそのまま流す＝JS へ色を書き写さない）。 */
.share-preview {
  display: grid;
  gap: 0.4rem;
  justify-items: center;
  margin-bottom: 0.6rem;
}
.share-preview-svg {
  width: 156px;
  height: auto;
  border: 1px solid var(--color-neutral-300);
  display: block;
}
.share-preview-note {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-3);
  text-align: center;
  max-width: 30ch;
}
/* <important>
   **すべてのキーフレームは app.js が実行時に組む**（`#share-preview-keyframes`）。
   区間の割合は見本のフレーム数とサーバの hold_seconds で決まり、CSS のキーフレーム
   選択子は変数を取れないため。ここに書くのは「どの名前をどの尺で回すか」だけで、
   `@keyframes` の本体は 1 つも持たない —— 持つと片方だけ古くなる。
   </important> */
/* 骨格のフレーム。1 フレーム = 骨と関節の 2 本の path で、自分の窓でだけ見える。
   タイミング関数は linear（窓の外は ε だけずらした段で切るので、なめらかに
   フェードしない）。 */
.share-preview-svg .pv-frame {
  opacity: 0;
  animation-duration: var(--pv-cycle, 6s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
/* 静止カットの目盛り。 */
.share-preview-svg .pv-cut { animation: pv-cut-a var(--pv-cycle, 6s) linear infinite; }
.share-preview-svg .pv-cut[data-cut="physics"],
.share-preview-svg .pv-cut[data-cut="toeoff"] {
  animation-name: pv-cut-b;
}
/* 目盛りが伸びる・扇が開く。**サイクル全体を回して、静止の窓の中だけで進む**
   （尺だけ短く回すと、静止が終わったあとも裏で描き直しが続いて位相がずれる）。 */
/* `stroke-dasharray` は**線の実長より長い**必要があり、実長はキャンバスの寸法で
   決まるので app.js が同じ <style> へ書き込む（ここに数値を置くと、線を伸ばした
   ときに片方だけ古くなって端が永久に消える）。 */
.share-preview-svg .pv-grow {
  animation: pv-draw-a var(--pv-cycle, 6s) ease-out infinite;
}
.share-preview-svg .pv-grow-x {
  animation: pv-drawx-a var(--pv-cycle, 6s) ease-out infinite;
}
.share-preview-svg .pv-sweep {
  transform-box: fill-box;
  transform-origin: 0% 100%;
  animation: pv-sweep-a var(--pv-cycle, 6s) ease-out infinite;
}
.share-preview-svg .pv-cut[data-cut="physics"] .pv-grow,
.share-preview-svg .pv-cut[data-cut="toeoff"] .pv-grow { animation-name: pv-draw-b; }
.share-preview-svg .pv-cut[data-cut="physics"] .pv-grow-x,
.share-preview-svg .pv-cut[data-cut="toeoff"] .pv-grow-x { animation-name: pv-drawx-b; }
.share-preview-svg .pv-cut[data-cut="physics"] .pv-sweep,
.share-preview-svg .pv-cut[data-cut="toeoff"] .pv-sweep { animation-name: pv-sweep-b; }
/* <important>
   **止めるのではなく「終わった状態」を出す。** 進捗 0 で凍らせると
   「角度が閉じたまま・ブラケットの長さ 0」＝何も分からない絵になる。
   目的は全体のデザインがすぐ分かることなので、必ず終端を見せる。
   骨格も同じで、**止めると全フレームが opacity:0 になって体が消える**ので、
   接地のフレーム（data-key="1"）だけを残す。
   </important> */
@media (prefers-reduced-motion: reduce) {
  .share-preview-svg * { animation: none !important; }
  .share-preview-svg .pv-grow,
  .share-preview-svg .pv-grow-x { stroke-dashoffset: 0; }
  .share-preview-svg .pv-frame { display: none; }
  .share-preview-svg .pv-frame[data-key="1"] { display: block; opacity: 1; }
  .share-preview-svg .pv-cut[data-cut="physics"],
  .share-preview-svg .pv-cut[data-cut="toeoff"] { display: none; }
}

/* ============================================================
   Group comparison — pick jumps by thumbnail
   ============================================================ */
.advice-group-modes { margin: 0.5rem 0; }
.advice-group-picker { display: grid; gap: 0.5rem; }
/* 警告は既存の .performance-warnings と同じ色語彙。**強調色（オレンジ）は
   使わない** —— 案 B ではあれは「要注意・BEST」の4用途に予約されていて、
   情報の階層へ漏らすと全部が要注意に見える（design-system テストが縛る）。 */
.picker-warning {
  margin: 0;
  padding: 0.45rem 0.6rem;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.6;
  background: var(--color-warn-bg);
  color: var(--color-warn);
}
.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}
.picker-card {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px;
  border: 1px solid var(--color-neutral-200);
  background: var(--color-surface);
  cursor: pointer;
  min-width: 0;
}
.picker-card:has(input:checked) { border-color: var(--color-accent); background: var(--color-accent-100); }
.picker-card[data-excluded="true"] { opacity: 0.5; cursor: not-allowed; }
.picker-card input { margin: 0; accent-color: var(--color-accent); flex: 0 0 auto; }
.picker-thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--color-neutral-200);
}
.picker-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.picker-card-body { display: grid; gap: 1px; min-width: 0; }
.picker-card-body strong {
  font-size: 11.5px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.picker-card-meta { font-size: 10.5px; color: var(--ink-3); }
.picker-card-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.picker-chip {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 4px;
  background: var(--color-neutral-200);
  color: var(--ink-2);
}
.picker-chip.is-muted { color: var(--ink-3); }
.picker-summary { margin: 0; font-size: 11.5px; color: var(--ink-3); }
.picker-empty { margin: 0; font-size: 12px; color: var(--ink-3); }

/* ============================================================
   Capture guide — 初回だけ出す「解析が崩れやすい撮り方」
   ============================================================

   <important>
   **モーダルにしない。** このアプリにモーダルの前例は 1 つも無く、
   `tests/test_frontend_static.py::TestGroupPicker::test_no_modal_is_introduced`
   がモーダル用の要素・API・ARIA 属性を repo 全体で禁じている。
   案内は他の画面と同じ `showScreen()` の一枚（`#guide-section`）にしてある。
   図を 3 枚並べるので、狭い端末では覆い被せる窓より一枚画面のほうが読める。
   </important>

   図はすべてインライン SVG で、色は下の `.cg-*` クラスが持つ
   （生の hex を SVG 属性へ書かない）。**実写のフレームは載せていない**——
   手元の失敗例に写っているのは実在の選手で、撮影同意はモデル学習の範囲までしか
   取れていない。図は同じ幾何（跳躍者の大きさ・写り込みの位置）を再現する。
   根拠の数字は docs/capture_quality.md。 */

.guide-grid {
  display: grid;
  gap: 1px;
  background: var(--color-divider);
  border: 1px solid var(--color-divider);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.guide-card {
  background: var(--color-surface);
  padding: 1rem 1.1rem 1.2rem;
  display: grid;
  gap: 0.5rem;
  align-content: start;
}
.guide-fig {
  display: block;
  width: 100%;
  height: auto;
  background: var(--color-neutral-100);
  border: 1px solid var(--color-neutral-300);
}
.guide-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--color-warn);
}
/* 札は 3 種。丸ごと失敗する話（警告色）／じわじわ落ちる話／これからやること。
   全部同じ色にすると、避けるべきことと確かめることが読み分けられない。 */
.guide-tag-soft { color: var(--ink-3); }
.guide-tag-do { color: var(--color-accent); }
.guide-card h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.45;
}
.guide-card p { margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--ink-2); }
.guide-fix {
  color: var(--color-accent);
  font-weight: 700;
  border-top: 1px solid var(--color-neutral-300);
  padding-top: 0.5rem;
}
.guide-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.guide-actions .page-sub { margin-top: 0; font-size: 12.5px; }

/* 入口リンク（アップロード画面から開き直す） */
.guide-open-btn {
  background: none;
  border: none;
  padding: 4px 0;
  min-height: 44px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  align-self: start;
}

/* 使い方の 3 手順。カードのグリッドとは別の形にする ——
   「順番のあるもの」と「並列に避けるもの」を同じ見た目にすると、
   どちらも読み飛ばされる。 */
.guide-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--color-neutral-200); }
.guide-step {
  display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px;
  align-items: center; padding: 14px 16px; background: var(--color-surface);
}
.guide-step-fig { width: 100%; height: auto; display: block; }
.guide-step-body { min-width: 0; }
.guide-step-n {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: var(--color-neutral-100); background: var(--color-accent);
  padding: 1px 7px; margin-bottom: 6px;
}
.guide-step h3 {
  font-family: var(--font-heading); font-weight: 800; font-size: 15px;
  line-height: 1.5; color: var(--color-text);
}
.guide-step p { margin: 0.35rem 0 0; font-size: 12.5px; line-height: 1.8; color: var(--ink-2); }
.guide-cards-head { display: grid; gap: 0.35rem; }
.guide-cards-title {
  font-family: var(--font-heading); font-weight: 900;
  font-size: clamp(1.1rem, 3vw, 1.35rem); line-height: 1.4; color: var(--color-text);
}
.guide-cards-head .page-sub { margin-top: 0; }

/* --- 図のインク（ここ以外で SVG に色を書かない） ---
   `<use>` で参照する人型は fill を継承するので、`.cg-jumper` / `.cg-other` を
   参照側に付けて色を決める。**新しいクラスを図で使うときは必ずここに足す**——
   未定義のままだと SVG の既定（黒の塗り）で描かれ、意図しない黒い矩形になる。 */
.cg-sky    { fill: var(--color-neutral-100); }
.cg-ground { fill: var(--color-neutral-300); }
.cg-mat    { fill: var(--color-accent-300); }
.cg-bar    { fill: none; stroke: var(--color-neutral-700); stroke-width: 1.6; stroke-linecap: round; }
.cg-jumper { fill: var(--color-accent-600); }
.cg-other  { fill: var(--color-neutral-600); }
.cg-edge   { fill: none; stroke: var(--color-neutral-500); stroke-width: 1.2; }
.cg-scale  { fill: none; stroke: var(--color-accent); stroke-width: 2.4; }
.cg-mark   { fill: none; stroke: var(--color-warn); stroke-width: 1.8; stroke-dasharray: 4 3; }
.cg-ok     { fill: none; stroke: var(--color-accent); stroke-width: 1.8; }
/* 使い方の図（切り出す範囲・推移）で使う 2 つ。`.cg-span` が「残す区間」、
   `.cg-cut` が「捨てる側」と目盛りの補助線。 */
.cg-span   { fill: var(--color-accent); }
.cg-cut    { fill: none; stroke: var(--color-neutral-500); stroke-width: 1.6; stroke-dasharray: 3 3; }
/* 溶けている胴体と、そこだけ見えている腕・脚。**背景と同じ濃さを意図的に使う**——
   ここは『見分けが付かないこと』そのものが図の内容なので、コントラストを
   上げてはいけない（上げると図が主張と逆のことを言う）。 */
.cg-woods  { fill: var(--color-neutral-600); }
.cg-blend  { fill: var(--color-neutral-700); }
.cg-limb   { fill: none; stroke: var(--color-neutral-200); stroke-width: 2; stroke-linecap: round; }

@media (max-width: 560px) {
  .guide-grid { grid-template-columns: 1fr; }
  /* 図を上、文を下へ。160px の図と本文を横に並べると、本文が 12ch まで潰れる。 */
  .guide-step { grid-template-columns: 1fr; gap: 10px; }
  .guide-step-fig { max-width: 220px; }
  .guide-actions { flex-direction: column-reverse; align-items: stretch; }
  .guide-actions .btn { width: 100%; }
}