/* ============================================================
 * pro-theme.css — Pro コンソール v2（独立した業務画面の静けさ）
 *
 * /circle で Pro のサークルを表示している間だけ、circle.js が body に
 * `pro-surface` クラスを付ける。このファイルの全ルールはそのクラスに
 * スコープされているので、Free のサークル・未ログイン・他ページの
 * 見た目には一切影響しない（クラスが無ければ全て不発）。
 * 幹事専用ページ（/settlement /report /invite）は body に静的に
 * pro-surface を持つ＝常にこの面。参加者が見る /pay は読み込まない。
 *
 * v2（2026-07-27 コンソール v2）の言語:
 *   - 無料版の語彙（絵文字・丸バッジ・白カード）を持ち込まない。
 *     見出し・ボタンの絵文字は .card-title .icon / .ui-emoji ごと隠す
 *   - データテーブル中心: 1px の区切り・行ホバー・tabular-nums・
 *     小さく字間の広いセクションラベル（11-12px / 0.08em / --pro-mist）
 *   - コートライン（--pro-line の直線）は各ページ1〜2の主要区画だけ
 *     （/circle=「次の練習」、/settlement=「いまの精算」、/report=「まとめ」、
 *      /invite=招待の札）。他の区切りは全て 1px の hairline
 *   - ヘッダーは全ページ共通の .pro-topbar（ワードマーク+サークル切替+アカウント)
 *
 * v6（2026-07-27 全ビューの部品刷新）:
 *   - 列見出し .pro-thead（PC だけ・11px / 0.08em / mist）と、行の grid を
 *     揃えた本物のデータテーブル: メンバー（.roster-pro-row）・コート台帳
 *     （.court-ledger-row）・精算の練習一覧（.set-practice）・記録の4集計（.rep-row）
 *   - 状態は全て「小さなドット + テキストラベル」に統一
 *     （court-badge / roster-pro-status / set-person-state。色チップ・塗りをやめた）
 *   - CSV・もっと見る等の副操作（.rep-ghost-btn / .set-ghost-btn）は
 *     inline の静かなボタンへ（全幅の帯にしない）
 *   - 数値列は右揃え + tabular-nums（面数・料金・参加・回数・金額）
 *
 * v7（2026-07-28 ライトへ全面再スキン）:
 *   本人指示「Claude design を North Star にしたライト方向。かっこいいは
 *   ダークで作らない」（docs/PRO-CONCEPT.md）に沿って、v6 の深緑ダークから
 *   生成りのライトへ反転した。デザインの正本は docs/design/pro-console-v3/。
 *   - **表示機構は一切変えていない**。body.pro-surface スコープ・
 *     data-pro-view のビュー切替・.pro-page のグリッドはそのまま＝皮だけ替えた
 *   - 旧版は地色6色と rgba(白,数%) の派生で組んでいたが、明では白の透過が
 *     使えない（紙に白を重ねても何も起きない）ため、罫・hover・縁は
 *     **不透明の暖色**に置き換えた（--pro-rule / --pro-hairline / --pro-edge /
 *     --pro-wash）。ここが v6→v7 で最も大きく変わった構造
 *   - --pro-line の意味が反転した。旧=コートラインの**白**（文字と構造線を
 *     兼ねる）→ 新=最強**インク**。明では文字と罫線は無関係な色なので、
 *     構造線は --pro-rule / --pro-hairline へ分離した
 *   - --pro-green を新設。暗では地全体が緑だったので不要だったが、明では
 *     選択・確定・アクティブ・主 CTA の主役になる。塗り=確定 / 輪郭のみ=未確定
 *     の意味論はここで表現する
 *   - ライムは明地では文字色に使えない（コントラストが出ない）。主 CTA は
 *     ライム地+暗文字 → 緑地+クリーム文字へ構造ごと変えた。ライムは印・
 *     バー・編集中の枠にだけ残る
 *
 * トークン:
 *   地   --pro-court(ページ) / --pro-night(カード面) / --pro-bar(トップバー) / --pro-sub(ヘッダ行)
 *   字   --pro-line(最強) / --pro-mist(補助) / --pro-faint(最弱ラベル)
 *   主色 --pro-green / --pro-green-hover / --pro-on-green
 *   飾り --pro-ball(ライム塗り) / --pro-ball-ink(濃ライム・枠) / --pro-clay(注意)
 *   罫   --pro-rule(強) → --pro-hairline(静) → --pro-edge(操作の縁) → --pro-edge-strong(hover)
 *
 * コントラスト: 全テキスト 4.5:1 以上（test/pro-theme-contrast.test.mjs が
 * playwright の実描画で 7ビュー×2幅 + 3ページ×2幅 を走査する）。**このテストは
 * 色をハードコードしていない**ので、再スキンしてもそのまま白on白の検出器として
 * 効く。生成り地（#F4F1E8）が最も条件が厳しいので、落ちた色は暗い側へ寄せて
 * 合格させる（デザインより WCAG を優先）。
 * ============================================================ */

body.pro-surface {
  /* --- 地（紙・面）。暗→明で「深い緑の面」から「生成りの紙」へ反転した --- */
  --pro-court: #F4F1E8;   /* ページの地。全画面のベース */
  --pro-night: #FFFDF8;   /* カード・テーブル・入力欄の面（旧: 一段深いパネル） */
  --pro-bar: #FAF8F2;     /* トップバー・タブストリップ */
  --pro-sub: #FBF8F0;     /* テーブルのヘッダ行・合計行・選択行（面より一段濃い） */

  /* --- インク。旧 --pro-line はコートラインの白だったが、明では最強インク --- */
  --pro-line: #16281D;    /* 最強インク: 見出し・名前・数値の主役 */
  --pro-mist: #5A6860;    /* 補助テキスト: メタ情報・注記・単位 */
  --pro-faint: #6E6A5C;   /* 最弱: セクションラベル・列見出し・ヒント */

  /* --- 主色。暗では地全体が緑だったので不要だったが、明では強調の主役 --- */
  --pro-green: #1F5138;      /* 選択・確定・リンク・アクティブ・主 CTA */
  --pro-green-hover: #153B28;
  --pro-on-green: #FBF9F1;   /* 緑地の上に載る文字 */

  /* --- アクセント（ライム）。明地では文字色に使えない。面と縁にだけ --- */
  --pro-ball: #C7DB3F;       /* 塗りのアクセント（印・バー） */
  --pro-ball-ink: #9CB02A;   /* 編集中 input の枠・hover/focus リング */

  /* --- 注意・締切（赤いアラート色は使わない）。明地で 4.5:1 を満たす土色へ --- */
  --pro-clay: #8A5A3C;
  --pro-clay-ink: #7A4E33;

  /* --- 罫・面の派生。旧版は全て rgba(白, 数%) だったが、明では不透明の暖色 --- */
  --pro-rule: #E2DAC7;    /* 強い区切り: セクション見出しの水平線・KPI の上下罫 */
  --pro-hairline: #EDE6D6;/* 静かな区切り: カード内の仕切り・列間 */
  --pro-edge: #DDD6C4;    /* ghost ボタン・操作要素の縁 */
  --pro-edge-strong: #CFC4AB; /* hover 時に一段濃くする縁 */
  --pro-wash: #F1ECDD;    /* hover のごく薄い持ち上げ */
  --pro-well: #FFFDF8;    /* 入力欄。暗では沈ませたが、明では面と同じ紙に置く */

  background: var(--pro-court);
  color: var(--pro-line);
}

/* 落ち着き: pro-surface では動きを最小に。reduced-motion では全て止める */
@media (prefers-reduced-motion: reduce) {
  body.pro-surface *,
  body.pro-surface *::before,
  body.pro-surface *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* フォーカスリングは --pro-ball で可視化（キーボード操作の現在地） */
body.pro-surface a:focus-visible,
body.pro-surface button:focus-visible,
body.pro-surface summary:focus-visible,
body.pro-surface input:focus-visible,
body.pro-surface select:focus-visible,
body.pro-surface textarea:focus-visible {
  outline: 2px solid var(--pro-ball-ink);
  outline-offset: 2px;
}

/* ============================================================
 * コンソールヘッダー .pro-topbar（circle / settlement / report 共通）
 * 左: 「テニス調整くん Pro」ワードマーク（テキストのみ・絵文字/画像なし）
 * 中: サークル切替（各ページの JS が ProNav.renderCircles で描画）
 * 右: アカウント（表示名 → 無料版のトップを見る / ログアウト）
 * circle.html では inline CSS が既定 display:none ＝ Free では存在しない
 * ============================================================ */
body.pro-surface .pro-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 50;
  height: 52px;
  padding: 0 20px;
  background: var(--pro-bar);
  border-bottom: 1px solid var(--pro-rule);
}
body.pro-surface .pro-topbar-brand {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--pro-line);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}
body.pro-surface .pro-topbar-mark {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--pro-line);
  border: 1px solid var(--pro-edge);
  border-radius: 3px;
  padding: 2px 5px 1px;
  line-height: 1.2;
}
/* サークル切替。多い時は横スクロール（スクロールバーは出さない） */
body.pro-surface .pro-topbar-circles {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border-left: 1px solid var(--pro-hairline);
  padding-left: 14px;
}
body.pro-surface .pro-topbar-circles::-webkit-scrollbar { display: none; }
body.pro-surface .pro-topbar-tab {
  flex: none;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pro-mist);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
}
body.pro-surface .pro-topbar-tab:hover { color: var(--pro-line); background: var(--pro-wash); }
body.pro-surface .pro-topbar-tab.is-active {
  color: var(--pro-line);
  background: var(--pro-wash);
  border-color: var(--pro-hairline);
}
body.pro-surface .pro-topbar-tab-add { border: 1px dashed var(--pro-edge); }
body.pro-surface .pro-topbar-account { flex: none; margin-left: auto; position: relative; }
body.pro-surface .pro-topbar-account-btn {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pro-line);
  background: transparent;
  border: 1px solid var(--pro-edge);
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.pro-surface .pro-topbar-account-btn:hover { background: var(--pro-wash); }
body.pro-surface .pro-topbar-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 200px;
  background: var(--pro-night);
  border: 1px solid var(--pro-edge);
  border-radius: 6px;
  padding: 6px;
  z-index: 60;
}
body.pro-surface .pro-topbar-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pro-line);
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 9px 12px;
  cursor: pointer;
  text-decoration: none;
}
body.pro-surface .pro-topbar-menu-item:hover { background: var(--pro-wash); }

/* ---- 旧クロームを外す（コンソールはヘッダー1本で語る） ----
 * ロゴのブランドバー・/circle の丸い白ヘッダー・/settlement /report の戻るボタン・
 * ページ内のサークル切替タブ（ヘッダーに移った）。Free ではこの規則ごと不発 */
/* ロゴバーは inline style（display:flex）を持つため !important で消す */
body.pro-surface .container > a[aria-label="テニス調整くん トップへ"] { display: none !important; }
body.pro-surface .cir-header { display: none; }
body.pro-surface #circle-switcher { display: none; }
body.pro-surface .set-back,
body.pro-surface .rep-back { display: none; }
body.pro-surface #set-circles,
body.pro-surface #rep-circles { display: none; }

/* ---- 絵文字の全廃（コンソールは言葉とレイアウトで語る） ----
 * 見出しの .icon、ボタン内の .ui-emoji、picker のカレンダー絵文字。
 * span を隠すだけなので Free の DOM・見た目には触れない */
body.pro-surface .card-title .icon,
body.pro-surface .ui-emoji,
body.pro-surface .pf-cal-icon { display: none; }

/* ---- /settlement /report のページ見出し（旧ヘッダーの再利用・箱をやめて文字だけ） ---- */
body.pro-surface .header {
  background: transparent;
  box-shadow: none;
  border: none;
  border-radius: 0;
  padding: 8px 0 0;
  margin-bottom: 6px;
}
body.pro-surface .set-ht,
body.pro-surface .rep-ht { color: var(--pro-line); font-size: 1.05rem; font-weight: 800; }
body.pro-surface .set-ht small,
body.pro-surface .rep-ht small { color: var(--pro-mist); font-weight: 500; letter-spacing: 0.03em; }

/* ============================================================
 * 基本部品（カード・見出し・文字・入力・ボタン）
 * ============================================================ */

/* カード = 夜側のパネル。1px hairline と小さな角丸（箱を主張させない） */
body.pro-surface .card {
  background: var(--pro-night);
  border: 1px solid var(--pro-hairline);
  border-radius: 6px;
  box-shadow: none;
}

/* 見出し = セクションラベル（11-12px・字間 0.08em・mist）。下線も 1px hairline */
body.pro-surface .card-title {
  color: var(--pro-mist);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--pro-hairline);
  margin-bottom: 14px;
}

/* サークル名の行（/circle）。カードの箱をやめ、ページ見出しとして立てる */
body.pro-surface #circle-title-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 2px 2px 0;
  margin-bottom: 12px;
  box-shadow: none;
}
body.pro-surface .circle-title {
  color: var(--pro-line);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* ---- 文字の基本 ---- */
body.pro-surface .note-text { color: var(--pro-mist); }
body.pro-surface .loading { color: var(--pro-mist); }
body.pro-surface .form-label {
  color: var(--pro-mist);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* ---- 入力欄 = 暗い面に沈む控えめな枠（v2: 明るい紙をやめた） ---- */
body.pro-surface .form-input {
  background: var(--pro-well);
  border: 1px solid var(--pro-hairline);
  border-radius: 4px;
  color: var(--pro-line);
  caret-color: var(--pro-line);
  font-variant-numeric: tabular-nums;
}
body.pro-surface .form-input:focus {
  outline: none;
  border-color: var(--pro-ball-ink);
  box-shadow: none;
  background: var(--pro-well);
}
body.pro-surface .form-input::placeholder { color: var(--pro-mist); }
body.pro-surface .circle-time-sep { color: var(--pro-mist); }

/* 移行済み名簿の休会中の行: inline CSS の灰地（Free 用）を Pro の面へ洗い直す。
 * v6 は rgba(0,0,0,.18) の黒の透過で沈めていたが、明地では #D1CFCB の
 * 濁った灰になり mist 文字が 3.78:1 に落ちる。塗りは一段濃い面に留め、
 * 休会中であることは文字の温度（mist）で示す */
body.pro-surface .roster-pro-row.is-inactive .roster-pro-name,
body.pro-surface .roster-pro-row.is-inactive .roster-pro-class {
  background: var(--pro-sub);
  color: var(--pro-mist);
}

/* popup-free picker（LINE 内ブラウザ用の自前 widget）。JS には触らず、CSS スコープだけで
   入力欄と同じ「沈む枠」に揃える。開いたパネル側は popup-free-pickers.css の明るい紙のまま
   （ネイティブのドロップダウンと同じ読み方） */
body.pro-surface .pf-select-trigger,
body.pro-surface .pf-cal-trigger,
body.pro-surface .pf-time-trigger {
  background: var(--pro-well);
  border: 1px solid var(--pro-hairline);
  border-radius: 4px;
  color: var(--pro-line);
}
body.pro-surface .pf-select-trigger:hover,
body.pro-surface .pf-cal-trigger:hover { border-color: var(--pro-edge); }
body.pro-surface .pf-select-trigger:focus,
body.pro-surface .pf-select-trigger[aria-expanded="true"],
body.pro-surface .pf-cal-trigger:focus,
body.pro-surface .pf-cal-trigger[aria-expanded="true"] {
  border-color: var(--pro-ball-ink);
  background: var(--pro-well);
}
body.pro-surface .pf-select-caret,
body.pro-surface .pf-cal-caret,
body.pro-surface .pf-time-caret { color: var(--pro-mist); }

/* ---- ボタン ----
 * 主 CTA（1画面に少数）だけが --pro-ball。他は線だけの ghost。 */
body.pro-surface .btn.btn-primary {
  background: var(--pro-green);
  color: var(--pro-on-green);
  border: none;
  border-radius: 4px;
  box-shadow: none;
  font-weight: 800;
}
body.pro-surface .btn.btn-primary:hover:not(:disabled) {
  filter: brightness(1.05);
  box-shadow: none;
  transform: none;
}
body.pro-surface .btn.btn-secondary {
  background: transparent;
  border: 1px solid var(--pro-edge);
  color: var(--pro-line);
  border-radius: 4px;
}
body.pro-surface .btn.btn-secondary:hover:not(:disabled) {
  background: var(--pro-wash);
  border-color: var(--pro-edge-strong);
}
/* 押せないボタン: 基底の .btn:disabled は opacity:.5 で、暗地では十分だったが
 * 明地では緑の塗りが生成りへ薄まり、上の白文字が読めなくなる（薄緑に白）。
 * 不透明のまま塗りを落として「弱いインク」で示す。border は足さない
 * （enabled との間で 2px ずれるため。この面では枠より色の温度で語る） */
body.pro-surface .btn:disabled {
  opacity: 1;
  background: var(--pro-sub);
  color: var(--pro-faint);
}

/* ghost 系（白カード前提だった従来部品を、線だけの静かなボタンへ） */
body.pro-surface .circle-rename-btn,
body.pro-surface .circle-more-btn,
body.pro-surface .roster-suggest-btn,
body.pro-surface .home-next-link,
body.pro-surface .home-cal-today,
body.pro-surface .court-row-actions button,
body.pro-surface .court-row-actions a {
  background: transparent;
  border: 1px solid var(--pro-edge);
  border-radius: 4px;
  color: var(--pro-line);
}
body.pro-surface .circle-rename-btn:hover,
body.pro-surface .circle-more-btn:hover,
body.pro-surface .roster-suggest-btn:hover,
body.pro-surface .home-next-link:hover,
body.pro-surface .home-cal-today:hover,
body.pro-surface .court-row-actions button:hover,
body.pro-surface .court-row-actions a:hover {
  background: var(--pro-wash);
}

/* ============================================================
 * データテーブルの共通部品（コンソール v2 の中心語彙）
 * .pro-thead = 列見出しの1行。行側の grid と同じ列幅を各テーブルが指定する。
 * スマホ（〜768px）は列が畳まれるので見出しも出さない
 * （circle.html は inline でも display:none 既定＝Free では絶対に出ない）
 * ============================================================ */
body.pro-surface .pro-thead { display: none; }
@media (min-width: 769px) {
  body.pro-surface .pro-thead {
    display: grid;
    column-gap: 12px;
    align-items: baseline;
    padding: 0 8px 6px;
    border-bottom: 1px solid var(--pro-hairline);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--pro-mist);
  }
  body.pro-surface .pro-thead .num { text-align: right; }
  /* PC の副操作（もっと見る・過去の回答者から追加・キャンセル期限を消す）は
     inline の静かなボタンに落とす＝全幅の帯にしない（スマホはタップ面を保って全幅のまま） */
  body.pro-surface .circle-more-btn,
  body.pro-surface .roster-suggest-btn {
    display: inline-block;
    width: auto;
    padding: 7px 12px;
    font-size: 0.78rem;
  }
}
/* 主 CTA も帯にしない（PC の広いカードで全幅に伸ばさない） */
@media (min-width: 1160px) {
  body.pro-surface .btn.btn-primary.btn-block { max-width: 560px; }
}

/* ============================================================
 * ホーム
 * ============================================================ */

/* ---- ①「次の練習」= このページ唯一のコートライン区画。面の上に直接ラインを引く ---- */
body.pro-surface .home-next {
  background: var(--pro-night);
  border: 1px solid var(--pro-rule);
  border-radius: 0;
  box-shadow: none;
  padding: 20px 20px 18px;
}
body.pro-surface .home-next-label {
  color: var(--pro-faint);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}
/* 「次の練習」の印（ball はここと主 CTA・フォーカスにだけ使う） */
body.pro-surface .home-next-label::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pro-ball);
  margin-right: 8px;
  vertical-align: 1px;
}
body.pro-surface .home-next-headline {
  color: var(--pro-line);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}
body.pro-surface .home-next-title { color: var(--pro-line); }
body.pro-surface .home-next-meta { color: var(--pro-mist); font-variant-numeric: tabular-nums; }
body.pro-surface .home-next-empty { color: var(--pro-mist); }
/* ② 参加状況 = スコアボードの数字（丸い pill をやめ、静かな読み出しに） */
body.pro-surface .home-next-summary {
  background: var(--pro-wash);
  border: 1px solid var(--pro-hairline);
  border-radius: 3px;
  color: var(--pro-line);
  font-variant-numeric: tabular-nums;
  margin-right: 6px;
}
body.pro-surface .home-loading { color: var(--pro-mist); }

/* ---- ③ 月間カレンダー ---- */
body.pro-surface .home-cal-label {
  color: var(--pro-line);
  font-variant-numeric: tabular-nums;
}
body.pro-surface .home-cal-nav {
  background: transparent;
  border: 1px solid var(--pro-edge);
  border-radius: 4px;
  color: var(--pro-line);
}
body.pro-surface .home-cal-nav:hover { background: var(--pro-wash); }
body.pro-surface .home-cal-dow span { color: var(--pro-mist); }
/* 土日の色は暗地前提の淡い青／赤（#8AA0C0 / #C08A8A）だと明地で 2.6〜2.9:1 に
 * 落ちる。プロトタイプの土=青灰・日=赤茶へ差し替える（docs/design/pro-console-v3/tokens.md §1.2） */
body.pro-surface .home-cal-dow .dow-sun { color: #7E6252; }
body.pro-surface .home-cal-dow .dow-sat { color: #5C6E80; }
body.pro-surface .home-cal-cell {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--pro-line);
  font-variant-numeric: tabular-nums;
}
body.pro-surface .home-cal-cell.is-out { color: var(--pro-mist); }
body.pro-surface .home-cal-cell.has-practice {
  background: var(--pro-wash);
  color: var(--pro-line);
}
body.pro-surface .home-cal-cell.is-today { border-color: var(--pro-green); }
body.pro-surface .home-cal-dot { background: var(--pro-green); }
body.pro-surface .home-cal-dot.is-full { background: var(--pro-mist); }
body.pro-surface .home-cal-count { color: var(--pro-mist); }
body.pro-surface .home-cal-row { border-top: 1px solid var(--pro-hairline); }
body.pro-surface .home-cal-row:hover { background: var(--pro-wash); }
body.pro-surface .home-cal-row-date {
  color: var(--pro-line);
  font-variant-numeric: tabular-nums;
}
body.pro-surface .home-cal-row-title { color: var(--pro-mist); }
body.pro-surface .home-cal-row-sum { color: var(--pro-mist); font-variant-numeric: tabular-nums; }
body.pro-surface .home-cal-row.is-past .home-cal-row-date,
body.pro-surface .home-cal-row.is-past .home-cal-row-title,
body.pro-surface .home-cal-row.is-past .home-cal-row-sum { color: var(--pro-mist); }
body.pro-surface .home-cal-empty { color: var(--pro-mist); }

/* ---- ④ サークルのいま ---- */
body.pro-surface .home-now-list li {
  color: var(--pro-line);
  border-top: 1px solid var(--pro-hairline);
  font-variant-numeric: tabular-nums;
}

/* ---- ⑤ 確認導線（面の上の一行） ---- */
body.pro-surface .home-status { color: var(--pro-mist); }
body.pro-surface .home-status a { color: var(--pro-line); }

/* ============================================================
 * 名簿・コート台帳・運営・予定一覧（データテーブルの読み味）
 * ============================================================ */

/* いつものメンバー（旧名簿）のチップ。丸いバッジ（999px）は無料版の語彙なので角を締める */
body.pro-surface .roster-chip {
  background: var(--pro-wash);
  border: 1px solid var(--pro-hairline);
  border-radius: 4px;
  color: var(--pro-line);
}
body.pro-surface .roster-chip-x { color: var(--pro-mist); }
body.pro-surface .roster-chip-x:hover {
  background: rgba(201, 123, 90, 0.25);
  color: var(--pro-clay-ink);
}
body.pro-surface .roster-bulk summary,
body.pro-surface .court-past-toggle summary { color: var(--pro-mist); }
body.pro-surface .roster-suggest-chip {
  background: transparent;
  border: 1px dashed var(--pro-edge);
  border-radius: 4px;
  color: var(--pro-line);
}
body.pro-surface .roster-suggest-chip:hover {
  background: var(--pro-wash);
  border-color: var(--pro-edge-strong);
}

/* メンバー（100名名簿）= データテーブル。列 = 名前 / クラス / 在籍 / 削除。
 * PC は .pro-thead と同じ grid、スマホは従来の折り返し（inline CSS）のまま。
 * 行内編集: 入力は行に沈めて枠を消し、hover で hairline・focus で沈む枠を出す */
body.pro-surface .roster-pro-row { border-bottom: 1px solid var(--pro-hairline); }
body.pro-surface .roster-thead { grid-template-columns: minmax(0, 1fr) 200px 108px 32px; }
/* 列頭を行内編集の入力テキスト（input の左 padding 10px）と揃える */
body.pro-surface .roster-thead span { padding-left: 10px; }
@media (min-width: 769px) {
  body.pro-surface .roster-pro-list { margin-top: 0; }
  body.pro-surface .roster-pro-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px 108px 32px;
    column-gap: 12px;
    align-items: center;
    padding: 2px 8px;
  }
  body.pro-surface .roster-pro-row:hover { background: var(--pro-wash); }
  body.pro-surface .roster-pro-row .form-input {
    background: transparent;
    border-color: transparent;
    padding: 8px 10px;
    max-width: none;
  }
  body.pro-surface .roster-pro-row .form-input:hover { border-color: var(--pro-hairline); }
  body.pro-surface .roster-pro-row .form-input:focus {
    background: var(--pro-well);
    border-color: var(--pro-ball-ink);
  }
  /* 休会中の行: 塗りではなく文字の温度で示す（inline CSS の明るい灰地を打ち消す） */
  body.pro-surface .roster-pro-row.is-inactive .roster-pro-name,
  body.pro-surface .roster-pro-row.is-inactive .roster-pro-class {
    background: transparent;
  }
}
/* 在籍 = ドット + テキストラベル（参加中=line / 休会中=mist）。押せる印は hover の縁だけ */
body.pro-surface .roster-pro-status {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--pro-line);
  letter-spacing: 0.04em;
  text-align: left;
}
body.pro-surface .roster-pro-status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pro-green);
  margin-right: 6px;
  vertical-align: 1px;
}
body.pro-surface .roster-pro-status:hover {
  border-color: var(--pro-edge);
  background: var(--pro-wash);
}
body.pro-surface .roster-pro-status.is-inactive {
  background: transparent;
  border-color: transparent;
  color: var(--pro-mist);
}
body.pro-surface .roster-pro-status.is-inactive::before { background: var(--pro-mist); }
body.pro-surface .roster-pro-status.is-inactive:hover {
  border-color: var(--pro-edge);
  background: var(--pro-wash);
}
body.pro-surface .roster-pro-remove { color: var(--pro-mist); }
body.pro-surface .roster-pro-remove:hover {
  background: rgba(201, 123, 90, 0.25);
  color: var(--pro-clay-ink);
}

/* コート台帳 = 台帳テーブル。列 = 施設 / 日時 / 面数 / 料金 / 状態（circle.js の
 * courtRowEl が cell を作る）。PC は .pro-thead と同じ grid、スマホは折り返し。
 * .court-row は共同幹事の一覧も使う共通クラスなので、grid は .court-ledger-row だけに張る */
body.pro-surface .court-row { border-top: 1px solid var(--pro-hairline); }
body.pro-surface .court-row:hover { background: var(--pro-wash); }
body.pro-surface .court-row-line {
  color: var(--pro-line);
  font-variant-numeric: tabular-nums;
}
body.pro-surface .court-row-detail { color: var(--pro-mist); font-variant-numeric: tabular-nums; }
body.pro-surface .court-row-note { color: var(--pro-mist); font-size: 0.78rem; }
body.pro-surface .court-thead { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) 44px 84px 96px; }
body.pro-surface .court-cell-facility {
  color: var(--pro-line);
  font-size: 0.88rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}
body.pro-surface .court-cell-when {
  color: var(--pro-line);
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}
body.pro-surface .court-cell-count,
body.pro-surface .court-cell-fee {
  color: var(--pro-line);
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 769px) {
  body.pro-surface .court-ledger-row {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.1fr) 44px 84px 96px;
    column-gap: 12px;
    align-items: baseline;
    padding: 8px;
  }
  body.pro-surface .court-ledger-row > .court-row-note,
  body.pro-surface .court-ledger-row > .court-row-actions { grid-column: 1 / -1; }
  body.pro-surface .court-cell-count,
  body.pro-surface .court-cell-fee { text-align: right; }
}
/* スマホ: 施設を1行目に、日時・面数・料金・状態を2行目に折り返す（読み物として崩さない） */
@media (max-width: 768px) {
  body.pro-surface .court-ledger-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    align-items: baseline;
  }
  body.pro-surface .court-ledger-row > .court-cell-facility,
  body.pro-surface .court-ledger-row > .court-row-note,
  body.pro-surface .court-ledger-row > .court-row-actions { flex: 1 1 100%; }
}
body.pro-surface .court-row.is-cancelled .court-cell-facility,
body.pro-surface .court-row.is-cancelled .court-cell-when,
body.pro-surface .court-row.is-cancelled .court-cell-count,
body.pro-surface .court-row.is-cancelled .court-cell-fee {
  color: var(--pro-mist);
  text-decoration: line-through;
}
/* 状態は色チップでなく「小さなドット + テキストラベル」
   （scheduled=line / 注意=clay / cancelled=mist・赤いアラート色は使わない） */
body.pro-surface .court-badge {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 3px 0;
  color: var(--pro-line);
  letter-spacing: 0.04em;
}
body.pro-surface .court-badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pro-green);
  margin-right: 6px;
  vertical-align: 1px;
}
body.pro-surface .court-badge.is-tentative {
  background: transparent;
  border: none;
  color: var(--pro-clay-ink);
}
body.pro-surface .court-badge.is-tentative::before { background: var(--pro-clay); }
body.pro-surface .court-badge.is-cancelled {
  background: transparent;
  border: none;
  color: var(--pro-mist);
}
body.pro-surface .court-badge.is-cancelled::before { background: var(--pro-mist); }
body.pro-surface .court-form { border-top: 1px solid var(--pro-hairline); }
body.pro-surface .court-delete-btn,
body.pro-surface .circle-delete-btn {
  background: transparent;
  border: 1px solid rgba(201, 123, 90, 0.55);
  border-radius: 4px;
  color: var(--pro-clay-ink);
}
body.pro-surface .court-delete-btn:hover,
body.pro-surface .circle-delete-btn:hover { background: rgba(201, 123, 90, 0.14); }

/* 一緒に運営する人（court-row を再利用しているため差分だけ）。
 * 役割・招待の状態は小さな字間広めのラベル、行内の操作は inline の静かなボタン */
body.pro-surface .court-row-sub {
  color: var(--pro-mist);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
body.pro-surface #operators-list .court-row { padding: 10px 8px; }
body.pro-surface #operators-list .roster-suggest-btn {
  display: inline-block;
  width: auto;
  margin-top: 8px;
  padding: 5px 12px;
  font-size: 0.78rem;
}
body.pro-surface #operator-transfer-list .circle-more-btn {
  display: inline-block;
  width: auto;
  margin-right: 8px;
  padding: 8px 14px;
  font-size: 0.8rem;
}

/* 予定一覧 */
body.pro-surface .circle-event-row { border-bottom: 1px solid var(--pro-hairline); }
body.pro-surface .circle-event-row:hover { background: var(--pro-wash); }
body.pro-surface .circle-event-title { color: var(--pro-line); }
body.pro-surface .circle-event-date { color: var(--pro-mist); font-variant-numeric: tabular-nums; }
body.pro-surface .circle-events-empty {
  background: transparent;
  border: 1px dashed var(--pro-edge);
  border-radius: 4px;
  color: var(--pro-mist);
}
/* Pro の行（練習・出欠ビュー）: 状態はドット + テキストラベル（開催前=line / 終了=mist）。
   行全体が管理導線＝新しいタブでイベントページを開く */
body.pro-surface .pro-event-status {
  flex: none;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--pro-line);
  white-space: nowrap;
}
body.pro-surface .pro-event-status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pro-green);
  margin-right: 6px;
  vertical-align: 1px;
}
body.pro-surface .pro-event-row.is-past .pro-event-status,
body.pro-surface .pro-event-row.is-undated .pro-event-status { color: var(--pro-mist); }
body.pro-surface .pro-event-row.is-past .pro-event-status::before,
body.pro-surface .pro-event-row.is-undated .pro-event-status::before { background: var(--pro-mist); }
body.pro-surface .pro-event-row.is-past .circle-event-title { color: var(--pro-mist); }

/* ============================================================
 * 練習・出欠ビュー — 予定の作成（コンソール内で完結・#event-create-card）
 * Free では出ないカード（circle.js が Pro のサークルでだけ hidden を外す）なので、
 * 見た目はこのファイルに閉じる。フォームは PC で2カラム・ラベル上置き
 * ============================================================ */
body.pro-surface .pev-date-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 4px;
  border-top: 1px solid var(--pro-hairline);
}
body.pro-surface .pev-date-row-text {
  flex: 1;
  min-width: 0;
  font-size: 0.88rem;
  color: var(--pro-line);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
body.pro-surface #pev-date-list { margin: 4px 0 6px; }
body.pro-surface .pev-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--pro-line);
}
/* チェックボックスの塗りもコートラインの白（UA 既定の黒 color を持ち込まない＝settlement と同じ） */
body.pro-surface .pev-toggle input {
  width: 16px;
  height: 16px;
  flex: none;
  accent-color: var(--pro-line);
  color: var(--pro-line);
}
body.pro-surface .pev-toggle-desc {
  margin: 6px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--pro-mist);
}
/* 「複数の候補日にする」は補助操作＝全幅で主張させない（roster-suggest-btn の block を戻す） */
body.pro-surface #pev-add-date { display: inline-block; width: auto; }
/* 共有文のコピーは textarea の下に置く（横に並べない） */
body.pro-surface #pev-copy-text { display: block; }
body.pro-surface .pev-error { color: var(--pro-clay-ink); font-size: 0.84rem; font-weight: 700; }
body.pro-surface .pev-done-title { color: var(--pro-line); font-weight: 700; margin-bottom: 12px; }
body.pro-surface .pev-share-row { display: flex; gap: 8px; }
body.pro-surface .pev-share-row .form-input { flex: 1; min-width: 0; }
body.pro-surface .pev-done-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
@media (min-width: 769px) {
  body.pro-surface .pev-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    align-content: start;
  }
}

/* danger zone（clay の枠。悲鳴を上げない注意） */
body.pro-surface .circle-danger { border: 1px solid var(--pro-clay); }

/* ---- トースト / フッター ---- */
body.pro-surface .toast {
  background: var(--pro-night);
  border: 1px solid var(--pro-edge);
  border-radius: 6px;
  color: var(--pro-line);
}
body.pro-surface .site-footer { color: var(--pro-mist); }
body.pro-surface .site-footer a { color: var(--pro-line); }
body.pro-surface .site-footer a:hover { color: var(--pro-mist); }

/* ============================================================
 * レイアウト — PC 前提（基準 1280〜1440・商品設計 §7.1）
 * 左: 固定ナビ / 中央: 次の練習＋カレンダー＋管理カード / 右: サークルのいま
 *
 * グリッドは #circle-main に張る。#circle-home は display:contents で
 * 「次の練習」「カレンダー」と右レール（.pro-home-side）を直接グリッドに
 * 参加させる＝HTML の並び（Free の構造・既存テストが固定）は一切動かさない。
 * ページ内のサークル切替タブはヘッダーに移ったため常に隠す＝グリッドの
 * 1行目はサークル名の行から始まる。
 * スマホ（〜768px）はグリッドを張らず従来の縦積みのまま。
 * ============================================================ */

/* ---- 左ナビ（全幅共通の見た目。表示の有無は幅ごとの節で切り替え） ---- */
body.pro-surface .pro-nav { display: block; }
body.pro-surface .pro-nav-summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--pro-line);
  border: 1px solid var(--pro-edge);
  border-radius: 4px;
  padding: 10px 14px;
}
body.pro-surface .pro-nav-summary::-webkit-details-marker { display: none; }
body.pro-surface .pro-nav-summary::after { content: " ▾"; color: var(--pro-mist); }
body.pro-surface .pro-nav-fold[open] .pro-nav-summary::after { content: " ▴"; color: var(--pro-mist); }
body.pro-surface .pro-nav-body { padding: 8px 0 2px; }
body.pro-surface .pro-nav-link {
  display: block;
  padding: 8px 12px;
  margin: 1px 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--pro-mist);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 0 4px 4px 0;
}
body.pro-surface .pro-nav-link:hover { color: var(--pro-line); background: var(--pro-wash); }
/* 現在ページ = コートラインの縦線（ball は使わない: 主 CTA とフォーカスだけ） */
body.pro-surface .pro-nav-link.is-current {
  border-left-color: var(--pro-green);
  background: var(--pro-wash);
  color: var(--pro-line);
  font-weight: 700;
}
body.pro-surface .pro-nav-group {
  margin-top: 16px;
  padding: 10px 12px 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--pro-mist);
  border-top: 1px solid var(--pro-hairline);
}

/* ---- スマホ（〜768px）: 左ナビは上部の畳んだ「メニュー」。縦積みは従来どおり ---- */
@media (max-width: 768px) {
  body.pro-surface .pro-topbar { padding: 0 12px; gap: 10px; }
  body.pro-surface .pro-nav { margin-bottom: 14px; }
  body.pro-surface .pro-nav-body {
    border: 1px solid var(--pro-hairline);
    border-top: none;
    border-radius: 0 0 4px 4px;
    padding: 8px 8px 6px;
    background: var(--pro-night);
  }
}

/* ---- タブレット〜（769px〜）: 左ナビ + メインの2カラム ---- */
@media (min-width: 769px) {
  body.pro-surface .container { max-width: 1400px; padding: 22px 28px 44px; }
  body.pro-surface #circle-main {
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    column-gap: 28px;
    row-gap: 0;
    align-items: start;
  }
  /* 直下の子は既定でメイン列。ナビ・右レールだけ後で上書きする */
  body.pro-surface #circle-main > * { grid-column: 2; min-width: 0; }
  body.pro-surface #circle-main > .pro-nav {
    grid-column: 1;
    grid-row: 1 / span 60; /* 実行数より十分大きい span＝最下段まで左の列であり続ける */
    align-self: stretch;
  }
  /* ナビ本体はスクロールに追従（列の中で sticky・sticky なヘッダーの下に留まる） */
  body.pro-surface #circle-main > .pro-nav .pro-nav-fold { position: sticky; top: 68px; }
  body.pro-surface #circle-main > .pro-nav .pro-nav-summary { display: none; }
  body.pro-surface #circle-main > .pro-nav .pro-nav-body { padding-top: 0; }
  /* #circle-home を開いて、中のカードを直接グリッドの行にする */
  body.pro-surface #circle-main > #circle-home { display: contents; }
  body.pro-surface #circle-main > #circle-home > * { grid-column: 2; min-width: 0; }

  /* 設定フォームは PC で2カラム（ラベル上置き・見出しと保存は全幅） */
  body.pro-surface #circle-settings-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    align-content: start;
  }
  body.pro-surface #circle-settings-card > .card-title,
  body.pro-surface #circle-settings-card > #circle-def-save,
  body.pro-surface #circle-settings-card > .note-text { grid-column: 1 / -1; }
}

/* ---- PC（1160px〜）: 3カラム。右レール = サークルのいま・確認・精算・記録 ---- */
@media (min-width: 1160px) {
  body.pro-surface #circle-main {
    grid-template-columns: 208px minmax(0, 1fr) 300px;
    column-gap: 32px;
  }
  body.pro-surface #circle-main > #circle-home > .pro-home-side {
    grid-column: 3;
    grid-row: 2 / span 60;
    align-self: start;
    position: sticky;
    top: 68px;
  }
  /* 主 CTA は右レールの先頭（サークル名の行と同じ高さ）に置く */
  body.pro-surface #circle-main > #circle-new-event {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
  }
  /* 業務画面の密度: 単独の入力欄はカード全幅まで間延びさせない
     （2分割の行 = .circle-time-row / .court-form-row / .roster-add-row はそのまま） */
  body.pro-surface .form-group > .form-input,
  body.pro-surface .form-group > .pf-select-wrap { max-width: 560px; }
  /* 中央の主要区画はゆとりを持たせ、数字は大きく */
  body.pro-surface .home-next { padding: 26px 28px 24px; }
  body.pro-surface .home-next-headline { font-size: 1.85rem; }
  body.pro-surface .home-next-title { font-size: 1rem; }
  body.pro-surface .home-cal-cell { min-height: 52px; font-size: 0.92rem; }
  body.pro-surface .home-cal-dow span { font-size: 0.72rem; }
  body.pro-surface .roster-pro-row .roster-pro-class { max-width: 200px; }
}

/* ============================================================
 * ビュー切替（左ナビ＝本物のビュー切替・/circle の Pro だけ）
 *
 * circle.js が location.hash（#members 等）と同期して body に
 * data-pro-view="home|events|members|courts|settings|operators" を付け替える。
 * data-pro-views（空白区切りのビュー名）を持つ要素は、現在のビューが
 * 含まれる時だけ表示される＝ホームを「次の練習＋カレンダー＋右レール」に絞り、
 * 名簿・コート・設定・共同幹事・予定一覧は独立ビューになる。
 * Free では pro-surface も data-pro-view も付かない＝この節ごと不発（全カード縦積み）。
 *
 * display:none は !important — #circle-home の display:contents 規則
 * （id 2つで specificity が上）に隠す側が負けないため。表示を強制する規則は
 * 置かない＝各カード自身の .hidden 切替（Pro 判定・排他表示）はそのまま生きる。
 * ============================================================ */
body.pro-surface[data-pro-view="home"] #circle-main [data-pro-views]:not([data-pro-views~="home"]),
body.pro-surface[data-pro-view="events"] #circle-main [data-pro-views]:not([data-pro-views~="events"]),
body.pro-surface[data-pro-view="members"] #circle-main [data-pro-views]:not([data-pro-views~="members"]),
body.pro-surface[data-pro-view="courts"] #circle-main [data-pro-views]:not([data-pro-views~="courts"]),
body.pro-surface[data-pro-view="settings"] #circle-main [data-pro-views]:not([data-pro-views~="settings"]),
body.pro-surface[data-pro-view="operators"] #circle-main [data-pro-views]:not([data-pro-views~="operators"]) {
  display: none !important;
}

/* PC: メンバー / コートのビューは右レールが無いので、右列ぶんまで広げて
 * 「一覧（左）/ 追加・編集（右）」の2カラム（.pro-split）で横幅を活かす */
@media (min-width: 1160px) {
  body.pro-surface[data-pro-view="members"] #circle-main > #circle-members,
  body.pro-surface[data-pro-view="courts"] #circle-main > #court-card { grid-column: 2 / -1; }
  /* 練習・出欠ビューも右レールが無いので右列ぶんまで広げる（作成フォーム + 一覧） */
  body.pro-surface[data-pro-view="events"] #circle-main > #event-create-card,
  body.pro-surface[data-pro-view="events"] #circle-main > #circle-events-card { grid-column: 2 / -1; }
  body.pro-surface .pro-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    column-gap: 32px;
    align-items: start;
  }
  /* 追加・編集の列は一覧のスクロールに追従（長い名簿でもフォームが手元に残る） */
  body.pro-surface .pro-split-side { position: sticky; top: 68px; }
  /* 移行前サークルのメンバービューの実体＝旧名簿カード。全幅は間延びするので読める幅に留める */
  body.pro-surface[data-pro-view="members"] #roster-legacy-card { max-width: 832px; }
  body.pro-surface .pro-split-side > .roster-add-row,
  body.pro-surface .pro-split-side > #court-add-btn { margin-top: 0 !important; }
  body.pro-surface .pro-split-side .court-form { margin-top: 0; padding-top: 0; border-top: none; }
}

/* ============================================================
 * Pro 単機能ページ（/settlement /report）— 左ナビ共有の2カラム
 * circle と同じ .pro-nav 部品を .pro-page ラッパーの左列に置き、
 * Pro ページ間（ホーム・精算・記録）を回遊できるようにする。
 * スマホ（〜768px）は既存の「畳んだメニュー」ルールがそのまま効く。
 * ============================================================ */
@media (min-width: 769px) {
  body.pro-surface .pro-page {
    display: grid;
    grid-template-columns: 208px minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
  }
  body.pro-surface .pro-page > .pro-nav .pro-nav-fold { position: sticky; top: 68px; }
  body.pro-surface .pro-page > .pro-nav .pro-nav-summary { display: none; }
  body.pro-surface .pro-page > .pro-nav .pro-nav-body { padding-top: 0; }
}
@media (min-width: 1160px) {
  body.pro-surface .pro-page { column-gap: 32px; }
}

/* ---- サークル切替・期間タブ（/settlement /report のページ内タブ。
 *      サークル切替はヘッダーへ移り、この見た目は期間タブが使う） ---- */
body.pro-surface .set-tab,
body.pro-surface .rep-tab {
  background: transparent;
  border: 1px solid var(--pro-edge);
  border-radius: 4px;
  color: var(--pro-line);
}
body.pro-surface .set-tab:hover,
body.pro-surface .rep-tab:hover { background: var(--pro-wash); }
body.pro-surface .set-tab.is-active,
body.pro-surface .rep-tab.is-active {
  background: var(--pro-green);
  border-color: var(--pro-green);
  color: var(--pro-on-green);
  font-weight: 800;
}

/* ============================================================
 * /settlement — 精算
 * ============================================================ */

/* 練習の一覧 = テーブル（日付 / タイトル / 参加）。現在の練習は左のコートラインで示す
 * （ball は使わない）。PC は .set-thead と同じ grid、スマホは従来の縦積み */
body.pro-surface .set-practice {
  border-top: 1px solid var(--pro-hairline);
  border-left: 2px solid transparent;
  border-radius: 0;
}
body.pro-surface .set-practice:first-child { border-top: none; }
body.pro-surface .set-practice:hover { background: var(--pro-wash); }
body.pro-surface .set-practice.is-active {
  background: var(--pro-wash);
  border-left-color: var(--pro-green);
}
body.pro-surface .set-practice-date { color: var(--pro-line); font-variant-numeric: tabular-nums; }
body.pro-surface .set-practice-title { color: var(--pro-mist); }
body.pro-surface .set-practice-sum { color: var(--pro-mist); font-variant-numeric: tabular-nums; }
body.pro-surface .set-thead {
  grid-template-columns: 200px minmax(0, 1fr) auto;
  padding-left: 12px; /* 行側の border-left 2px + padding 10px と列頭を揃える */
}
@media (min-width: 769px) {
  body.pro-surface .set-practice {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) auto;
    column-gap: 12px;
    align-items: baseline;
    padding: 9px 8px 9px 10px;
  }
  body.pro-surface .set-practice-title { margin-top: 0; }
  body.pro-surface .set-practice-sum { margin-top: 0; text-align: right; }
}

/* 副操作（CSV・もっと見る・項目を足す）= inline の静かなボタン。
 * 全幅の帯にしない（主 CTA と読み分けられる大きさに落とす） */
body.pro-surface .set-ghost-btn,
body.pro-surface .rep-ghost-btn {
  background: transparent;
  border: 1px solid var(--pro-hairline);
  border-radius: 4px;
  color: var(--pro-mist);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 7px 12px;
}
/* PC は inline（スマホはタップ面を保って全幅のまま＝circle 側の副操作と同じ規則） */
@media (min-width: 769px) {
  body.pro-surface .set-ghost-btn,
  body.pro-surface .rep-ghost-btn {
    display: inline-block;
    width: auto;
    margin-right: 8px;
  }
}
body.pro-surface .set-ghost-btn:hover,
body.pro-surface .rep-ghost-btn:hover {
  background: var(--pro-wash);
  border-color: var(--pro-edge);
  color: var(--pro-line);
}
body.pro-surface .set-extra-remove { background: transparent; color: var(--pro-mist); }
body.pro-surface .set-extra-remove:hover {
  background: rgba(201, 123, 90, 0.25);
  color: var(--pro-clay-ink);
}

/* 集める金額のプレビュー（スコアボードの数字） */
body.pro-surface .set-preview {
  background: var(--pro-wash);
  border: 1px solid var(--pro-hairline);
  border-radius: 3px;
}
body.pro-surface .set-preview-amount { color: var(--pro-line); font-variant-numeric: tabular-nums; }
body.pro-surface .set-preview-line { color: var(--pro-mist); font-variant-numeric: tabular-nums; }
body.pro-surface .set-preview-note { color: var(--pro-mist); font-variant-numeric: tabular-nums; }

/* 対象者・受け取りの1行 */
body.pro-surface .set-person { border-top: 1px solid var(--pro-hairline); }
body.pro-surface .set-person:first-child { border-top: none; }
body.pro-surface .set-person:hover { background: var(--pro-wash); }
body.pro-surface .set-person-name { color: var(--pro-line); }
/* 支払い状態 = ドット + テキストラベル（確認済み=line / まだ=mist。塗らない・急かさない）。
 * 押して切り替える操作なので、hover でだけ縁を出して押せる印にする */
body.pro-surface .set-person-state {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: var(--pro-mist);
  letter-spacing: 0.04em;
}
body.pro-surface .set-person-state::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pro-mist);
  margin-right: 6px;
  vertical-align: 1px;
}
body.pro-surface .set-person-state:hover {
  border-color: var(--pro-edge);
  background: var(--pro-wash);
}
body.pro-surface .set-person-state.is-done {
  background: transparent;
  border-color: transparent;
  color: var(--pro-line);
}
body.pro-surface .set-person-state.is-done::before { background: var(--pro-line); }
body.pro-surface .set-person-state.is-done:hover {
  border-color: var(--pro-edge);
  background: var(--pro-wash);
}
body.pro-surface .set-person-link {
  background: transparent;
  border: 1px solid var(--pro-edge);
  border-radius: 3px;
  color: var(--pro-line);
}
body.pro-surface .set-person-link:hover { background: var(--pro-wash); }
body.pro-surface .set-person-check { color: var(--pro-mist); }
/* チェックボックスの塗りもコートラインの白（既定の青・UA 既定の黒 color を持ち込まない） */
body.pro-surface .set-person-check input {
  accent-color: var(--pro-line);
  color: var(--pro-line);
}

/* いまの精算 = このページ唯一のコートライン区画 */
body.pro-surface .set-current {
  background: var(--pro-night);
  border: 1px solid var(--pro-rule);
  border-radius: 0;
}
body.pro-surface .set-current-amount { color: var(--pro-line); font-variant-numeric: tabular-nums; }
body.pro-surface .set-current-line { color: var(--pro-mist); font-variant-numeric: tabular-nums; }
body.pro-surface .set-current-progress {
  background: var(--pro-wash);
  border: 1px solid var(--pro-hairline);
  border-radius: 3px;
  color: var(--pro-line);
  font-variant-numeric: tabular-nums;
}

/* 取り消し = クレーの土色（赤いアラート色は使わない） */
body.pro-surface .set-danger-btn {
  background: transparent;
  border: 1px solid rgba(201, 123, 90, 0.55);
  border-radius: 4px;
  color: var(--pro-clay-ink);
}
body.pro-surface .set-danger-btn:hover { background: rgba(201, 123, 90, 0.14); }

/* これまでの精算 */
body.pro-surface .set-history li {
  color: var(--pro-mist);
  border-top: 1px solid var(--pro-hairline);
  font-variant-numeric: tabular-nums;
}
body.pro-surface .set-history li:first-child { border-top: none; }

/* 送り先のフォームは PC で2カラム（ラベル上置き。見出し・注記・保存は全幅） */
@media (min-width: 769px) {
  body.pro-surface #set-payout-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    align-content: start;
  }
  body.pro-surface #set-payout-card > .card-title,
  body.pro-surface #set-payout-card > .note-text,
  body.pro-surface #set-payout-card > #set-payout-save { grid-column: 1 / -1; }
}

/* ============================================================
 * /report — これまでの記録
 * ============================================================ */

/* まとめ = このページ唯一のコートライン区画 */
body.pro-surface .rep-sum {
  background: var(--pro-court);
  border: 2px solid var(--pro-line);
  border-radius: 0;
}
body.pro-surface .rep-sum-list li { color: var(--pro-line); font-variant-numeric: tabular-nums; }

/* 記録の4集計 = テーブル（左列=練習や名前・右列=数字）。列見出しは .rep-thead。
 * 1行の中の副情報（タイトル・内訳）は左列の2行目に落とす */
body.pro-surface .rep-thead { grid-template-columns: minmax(0, 1fr) auto; }
body.pro-surface .rep-row { border-top: 1px solid var(--pro-hairline); }
body.pro-surface .rep-row:first-child { border-top: none; }
body.pro-surface .rep-row:hover { background: var(--pro-wash); }
body.pro-surface .rep-row-head { color: var(--pro-line); font-variant-numeric: tabular-nums; }
body.pro-surface .rep-row-sub { color: var(--pro-mist); }
body.pro-surface .rep-row-note { color: var(--pro-mist); font-variant-numeric: tabular-nums; }
body.pro-surface .rep-row-num { color: var(--pro-line); font-variant-numeric: tabular-nums; text-align: right; }
@media (min-width: 769px) {
  body.pro-surface .rep-row { padding: 8px; }
}

/* ============================================================
 * /invite — 招待を受け取る（ナビ無し・1枚の札に集中させる）
 * ============================================================ */
body.pro-surface .inv-head-title { color: var(--pro-line); }
body.pro-surface .inv-head-sub { color: var(--pro-mist); }
/* 見えているのは常に1枚だけ＝その1枚がこのページ唯一のコートライン区画 */
body.pro-surface .inv-main {
  background: var(--pro-night);
  border: 2px solid var(--pro-line);
  border-radius: 0;
}