/*
 * PequeFut design tokens (soccer_hub 案B 最終, 2026-09-25)
 * 正本: docs/implementation_spec_B3_2026-09-25.md「前提とトークン」+ docs/redesign_plan_2026-09-25.md §2
 * 形式: salon-base registry/salon/presets/<name>/tokens.css と同じ「:root に集約・用途コメント付き」
 * 規則:
 *  - --brand (#74cc00) は塗り・バッジ・アクセント線のみ。文字色には絶対に使わない(白地で 2.0:1)
 *  - 黄緑の塗りの上の文字は --on-brand。黄緑系の文字・リンクは --brand-text(白地 5.2:1)
 *  - 確認状態は base(枠)/tint(地)/text(文字)の3トークン + アイコン形 + ラベルで表す(色単独依存なし)
 *  - 外部フォント(Google Fonts)は読まない。file:// と無通信の境界(docs/site_build.md)を守る
 */
:root {
  /* ── ブランド ── */
  --brand: #74cc00;            /* 塗り・選択チップ・該当曜日・アクセント線のみ */
  --brand-hover: #68b800;      /* 黄緑ボタンのホバー塗り */
  --on-brand: #0f2a12;         /* 黄緑の塗りの上の文字・アイコン(7.8:1) */
  --brand-text: #3f7a00;       /* 黄緑系の文字・リンク・枠(白地 5.2:1) */
  --brand-text-hover: #2f5c00; /* リンクのホバー */
  --brand-tint: #eef8e0;       /* 「比較中」地・ホバー背景 */

  /* ── ニュートラル ── */
  --ink: #17201b;              /* 本文・見出し */
  --muted: #535d57;            /* ラベル・補足(白地 6.9:1) */
  --line: #dfe4dc;             /* 区切り線・カード枠 */
  --line-strong: #c9d1c6;      /* カードホバー枠・区バッジ枠 */
  --field-border: #b9c3b5;     /* 入力・チップの枠 */
  --field-border-hover: #8a948c;
  --bg: #f4f6f3;               /* ページ地・出典ボックス */
  --surface: #ffffff;          /* ヘッダー・カード・サイドバー・フッター */
  --surface-hover: #f4f7f2;    /* チップ・ナビのホバー地 */
  --focus: #1f6fb2;            /* フォーカスリング(:focus-visible のみ) */
  --focus-on-dark: #ffffff;

  /* ── 無効 ── */
  --disabled-bg: #eef1ed;
  --disabled-border: #d3d9d1;
  --disabled-text: #7d857f;

  /* ── 曜日ストリップ ── */
  --day-on-bg: var(--brand);
  --day-on-text: var(--on-brand);
  --day-off-bg: #f2f4f1;
  --day-off-text: #6b746e;     /* 非該当(4.4:1)+打ち消し線 */

  /* ── 注意帯(private モードのみ) ── */
  --band-bg: #fff6e0;
  --band-line: #f0dca8;
  --band-text: #5c3d00;

  /* ── 暗い面(比較バー・トレイ・スクリム) ── */
  --tray: #0f2a12;
  --tray-text: #ffffff;
  --tray-muted: #c9d4cb;
  --tray-line: rgba(255, 255, 255, 0.14);
  --tray-slot: rgba(255, 255, 255, 0.12);
  --dark-button: #17201b;      /* 「この住所で近い順」 */
  --dark-button-hover: #2c3530;
  --scrim: rgba(10, 20, 12, 0.5);
  --scrim-sheet: rgba(10, 20, 12, 0.55);

  /* ── 確認状態バッジ(base=枠 / tint=地 / text=文字・アイコン) ── */
  --st-verified-base: #1f6fb2;   /* 確認済: 実線の丸+チェック */
  --st-verified-tint: #e7f0fa;
  --st-verified-text: #174f82;
  --st-reference-base: #e39a12;  /* 参考情報・現行条件は問い合わせ: 三角+! */
  --st-reference-tint: #fdf1d8;
  --st-reference-text: #7a4600;
  --st-unknown-base: #6b727c;    /* 現況未確認: 破線の丸+? */
  --st-unknown-tint: #eceef1;
  --st-unknown-text: #464c55;
  --st-conflict-base: #8d2f2f;   /* 資料間で相違あり(既存挙動を維持): 実線の丸+! */
  --st-conflict-tint: #fbeaea;
  --st-conflict-text: #6e1f1f;

  /* ── ヒーロー ── */
  --hero-h-desktop: 560px;
  --hero-h-tablet: 440px;
  --hero-h-mobile: 360px;
  --hero-overlay: linear-gradient(180deg, rgba(8, 20, 10, 0.10) 0%, rgba(8, 20, 10, 0.30) 45%, rgba(8, 20, 10, 0.80) 100%);
  --hero-text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);

  /* ── タイポ(外部フォント無し。Apple の丸ゴシックを第一候補、Windows は Meiryo に退避) ── */
  --font-heading: "Hiragino Maru Gothic ProN", "M PLUS Rounded 1c", "Yu Gothic UI", "Meiryo", "Hiragino Sans", sans-serif;
  --font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  --fs-hero: 28px;             /* ヒーロー サブタイトル(デスクトップ)/800 lh1.45 */
  --fs-hero-mobile: 17px;      /* /800 lh1.5 */
  --fs-drawer-title: 26px;     /* /800 lh1.3 */
  --fs-fee: 24px;              /* 月謝の数値 /800 lh1.0 letter-spacing -0.01em */
  --fs-mobile-title: 22px;
  --fs-section: 20px;          /* 「クラブ・スクール一覧」 */
  --fs-empty: 18px;            /* 空状態・下シート見出し */
  --fs-card-title: 16px;       /* カードのクラブ名・サイドバー見出し・検索ボタン */
  --fs-bar: 15px;              /* 比較バー・比較する・条件をクリア */
  --fs-h-small: 14px;          /* 詳細の項目見出し・比較表の列見出し */
  --fs-body-lg: 15px;          /* 詳細の値・検索入力 lh1.6 */
  --fs-body: 14px;             /* ナビ・セレクト lh1.5 */
  --fs-body-sm: 13px;          /* カード本文・チップ・ボタン・フッター・比較表 lh1.5 */
  --fs-caption: 12px;          /* ラベル・バッジ・出典・注意帯・曜日セル lh1.55 */
  --fs-note: 11.5px;           /* 住所の注記 */
  --fs-tag: 11px;              /* 区バッジ・非公開バッジ /700 lh1.35 */

  /* ── 余白(4px基準 9段) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --page-gutter: 24px;         /* モバイル 16px */
  --sidebar-w: 280px;
  --card-h: 300px;             /* 要約カード固定高(最大 320px) */
  --card-h-max: 320px;
  --card-gap: 12px;
  --drawer-w: 520px;

  /* ── 角丸(7段) ── */
  --radius-day: 5px;           /* 曜日セル */
  --radius-tag: 6px;           /* 区バッジ */
  --radius-field: 8px;         /* 入力・セレクト・四角ボタン・出典ボックス・比較スロット */
  --radius-card: 10px;         /* カード・空状態 */
  --radius-search: 14px;       /* 検索バー容器(モバイル 12px) */
  --radius-sheet: 18px;        /* 下シート上角 */
  --radius-pill: 999px;        /* チップ・ピル・状態バッジ・主要ボタン */

  /* ── 影(5段) ── */
  --shadow-card-hover: 0 4px 14px rgba(16, 32, 20, 0.10);
  --shadow-search: 0 10px 30px rgba(8, 20, 10, 0.25);
  --shadow-bar: 0 -8px 24px rgba(0, 0, 0, 0.18);
  --shadow-drawer: -12px 0 32px rgba(0, 0, 0, 0.22);
  --shadow-sheet: 0 -10px 30px rgba(0, 0, 0, 0.25);

  /* ── 操作寸法 ── */
  --hit-min: 44px;             /* タッチ対象の最小。見た目が小さい部品は ::before で拡張 */
  --control-h: 44px;           /* 入力・セレクト・チップ・ラジオ行 */
  --button-h-sm: 36px;         /* 「比較に追加」見た目 */
  --sheet-cta-h: 48px;
}

    * { box-sizing: border-box; }
    html { background: var(--bg); }
    body { margin: 0; color: var(--ink); background: var(--bg); font-family: var(--font-body); font-size: var(--fs-body-sm); line-height: 1.6; overflow-wrap: anywhere; }
    a { color: var(--brand-text); text-underline-offset: 3px; }
    @media (hover: hover) { a:hover { color: var(--brand-text-hover); } }
    button, input, select { font: inherit; }
    button { cursor: pointer; }
    h1, h2, h3 { line-height: 1.3; margin: 0; }
    :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

    /* ---- header ---- */
    .site-header { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--space-6); height: 56px; padding: 0 var(--page-gutter); background: var(--surface); border-bottom: 1px solid var(--line); }
    .brand { display: flex; flex-shrink: 0; }
    .brand-logo { height: 30px; width: auto; display: block; }
    .header-nav { display: flex; min-width: 0; margin-left: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tabs { display: flex; }
    .tab { position: relative; display: flex; align-items: center; height: 56px; padding: 0 14px; border: 0; background: transparent; color: var(--ink); font-size: var(--fs-body); font-weight: 500; cursor: pointer; white-space: nowrap; }
    .tab[aria-selected="true"] { font-weight: 700; box-shadow: inset 0 -3px 0 var(--brand); }
    @media (hover: hover) { .tab:hover { background: var(--surface-hover); } }
    .tab:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
    #mode-badge { display: inline-flex; flex-shrink: 0; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--radius-pill); border: 1px solid var(--field-border-hover); color: var(--muted); font-size: var(--fs-tag); font-weight: 700; white-space: nowrap; }
    html[data-mode="public"] #mode-badge, html[data-mode="public"] #mode-notice { display: none; }
    @media (max-width: 767px) { .site-header { flex-wrap: wrap; height: auto; padding: 0; } .brand { padding: 0 8px 0 16px; height: 52px; align-items: center; } #mode-badge { margin: 8px 8px 8px auto; } .header-nav { width: 100%; order: 3; padding: 0 6px; } .tab { height: 44px; } }

    #mode-notice { height: 32px; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--band-bg); border-bottom: 1px solid var(--band-line); color: var(--band-text); font-size: 12px; font-weight: 500; }

    /* ---- hero ---- */
    .hero { position: relative; height: var(--hero-h-desktop); overflow: hidden; }
    .hero-media { position: absolute; inset: 0; }
    .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; }
    .hero-overlay { position: absolute; inset: 0; background: var(--hero-overlay); }
    .hero-content { position: relative; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 20px; padding: 0 var(--page-gutter) var(--space-8); }
    .hero-sub { margin: 0; max-width: 820px; font-family: var(--font-heading); font-size: var(--fs-hero); font-weight: 800; line-height: 1.45; color: #fff; text-align: center; text-shadow: var(--hero-text-shadow); overflow-wrap: normal; word-break: normal; }
    .only-mobile { display: none; }
    .hero-search-wrap { width: 100%; max-width: 1000px; }
    .hero-search { display: flex; gap: 8px; padding: 8px; background: var(--surface); border-radius: var(--radius-search); box-shadow: var(--shadow-search); }
    .hero-search-row { display: contents; }
    .hero-field { position: relative; flex-grow: 1; display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 14px; border-radius: var(--radius-field); border: 1px solid var(--field-border); background: var(--surface); }
    .hero-field input { flex-grow: 1; min-width: 0; min-height: 0; border: 0; padding: 0; outline: none; font-size: 15px; color: var(--ink); background: transparent; }
    .hero-field svg { flex-shrink: 0; color: var(--muted); }
    .hero-select { display: flex; flex-direction: column; gap: 4px; width: 150px; flex-shrink: 0; }
    .hero-select.age { width: 160px; }
    .hero-select select { height: 52px; padding: 0 12px; border-radius: var(--radius-field); border: 1px solid var(--field-border); background: var(--surface); color: var(--ink); font-size: 14px; }
    .hero-search-btn { flex-shrink: 0; height: 52px; padding: 0 28px; border: 0; border-radius: var(--radius-field); background: var(--brand); color: var(--on-brand); font-family: var(--font-heading); font-size: 16px; font-weight: 800; cursor: pointer; display: flex; align-items: center; gap: 6px; }
    @media (hover: hover) { .hero-field:hover, .hero-select select:hover { border-color: var(--field-border-hover); } .hero-search-btn:hover { background: var(--brand-hover); } }
    .hero-field:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
    .hero-select select:focus-visible, .hero-search-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
    @media (max-width: 1023px) { .hero { height: var(--hero-h-tablet); } }
    html[data-tab]:not([data-tab="clubs"]) .hero { display: none; }
    .tab-band { display: flex; align-items: center; min-height: 72px; padding: 0 var(--page-gutter); background: var(--surface); border-bottom: 3px solid var(--brand); }
    .tab-band-title { font-family: var(--font-heading); font-size: var(--fs-section); font-weight: 800; color: var(--ink); line-height: 1.3; }
    @media (max-width: 767px) {
      .hero { height: var(--hero-h-mobile); }
      .hero-media img { object-position: center center; }
      .hero-content { padding: 0 16px 16px; gap: 12px; }
      .hero-sub { font-size: var(--fs-hero-mobile); line-height: 1.5; }
      .only-mobile { display: inline; }
      .hero-search { flex-direction: column; }
      .hero-search-row { display: flex; gap: 6px; }
      .hero-field { height: 44px; }
      .hero-select { width: 30%; }
      .hero-select.age { width: 36%; }
      .hero-select select { height: 44px; }
      .hero-search-btn { flex-grow: 1; height: 44px; }
    }

    /* ---- summary bar ---- */
    .summary-bar { background: var(--surface); padding: 12px var(--page-gutter); border-bottom: 1px solid var(--line); text-align: center; }
    .summary-line { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px; font-size: 13px; color: var(--muted); }
    .summary-line strong { font-family: var(--font-heading); font-size: var(--fs-bar); font-weight: 800; color: var(--ink); }
    .summary-dot { color: var(--field-border-hover); }

    /* ---- public-only front-matter notice (MODE === "public") ---- */
    .public-notice { background: var(--surface); border-bottom: 1px solid var(--line); padding: 10px var(--page-gutter); font-size: 13px; line-height: 1.6; color: var(--ink); }
    .public-notice[hidden] { display: none; }
    .public-notice p { margin: 3px 0; max-width: 920px; margin-left: auto; margin-right: auto; }
    .public-notice a { color: var(--brand-text); }
    @media (hover: hover) { .public-notice a:hover { color: var(--brand-text-hover); } }
    .public-notice .notice-link { border: 0; background: transparent; padding: 0; font: inherit; color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
    @media (hover: hover) { .public-notice .notice-link:hover { color: var(--brand-text-hover); } }
    @media (max-width: 767px) { .public-notice { padding: 8px 16px; font-size: 12px; } }

    /* ---- layout / sidebar ---- */
    .layout { display: flex; }
    .sidebar { width: var(--sidebar-w); flex-shrink: 0; box-sizing: border-box; align-self: flex-start; display: flex; flex-direction: column; gap: 18px; padding: var(--space-5) var(--page-gutter) var(--space-6); background: var(--surface); border-right: 1px solid var(--line); }
    .sidebar-heading { margin: 0; font-family: var(--font-heading); font-size: var(--fs-card-title); font-weight: 800; color: var(--ink); }
    @media (max-width: 1023px) { .layout { flex-direction: column; } .sidebar { width: 100%; border-right: 0; border-bottom: 1px solid var(--line); } }

    .chip-field { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; }
    .chip-field legend { padding: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
    .chip-row { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }

    .weekday-chip { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--field-border); background: var(--surface); font-size: var(--fs-body-sm); font-weight: 500; color: var(--ink); cursor: pointer; flex-shrink: 0; }
    .weekday-chip input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
    .weekday-chip:has(input:checked) { background: var(--brand); border-color: var(--brand-text); color: var(--on-brand); font-weight: 700; }
    @media (hover: hover) { .weekday-chip:hover { border-color: var(--field-border-hover); } .weekday-chip:has(input:checked):hover { background: var(--brand-hover); } }
    .weekday-chip:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
    #weekday-filter legend { padding: 0 0 4px; font-size: 12px; font-weight: 700; color: var(--muted); }

    .chip-clear { flex-shrink: 0; min-height: 40px; padding: 0 12px; border-radius: var(--radius-field); border: 1px solid var(--field-border); background: var(--surface); color: var(--brand-text); font-size: 12px; font-weight: 700; }
    .chip-clear:disabled { background: var(--disabled-bg); border-color: var(--disabled-border); color: var(--disabled-text); cursor: not-allowed; }
    @media (hover: hover) { .chip-clear:not(:disabled):hover { border-color: var(--field-border-hover); } }

    .region-chip { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--field-border); background: var(--surface); color: var(--ink); font-size: var(--fs-body-sm); font-weight: 500; cursor: pointer; flex-shrink: 0; }
    .region-chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand-text); color: var(--on-brand); font-weight: 700; }
    @media (hover: hover) { .region-chip:hover { border-color: var(--field-border-hover); } .region-chip[aria-pressed="true"]:hover { background: var(--brand-hover); } }

    .more-filters { border: 0; }
    .more-filters > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: var(--control-h); padding: 0 12px; border: 1px solid var(--field-border); border-radius: var(--radius-field); background: var(--surface); font-size: var(--fs-body-sm); font-weight: 700; color: var(--ink); cursor: pointer; }
    .more-filters > summary::-webkit-details-marker { display: none; }
    .more-filters > summary .lead { display: flex; align-items: center; gap: 6px; }
    .more-filters[open] > summary { background: var(--surface-hover); }
    .more-filters[open] > summary .chev { transform: rotate(180deg); }
    .more-filters-body { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; }
    .two-col { display: flex; gap: 8px; }
    .two-col .field { width: calc(50% - 4px); }

    .field { display: grid; gap: 5px; min-width: 0; }
    .field label { color: var(--muted); font-size: 12px; font-weight: 700; }
    input, select { width: 100%; min-height: var(--control-h); padding: 8px 12px; border: 1px solid var(--field-border); border-radius: var(--radius-field); background: var(--surface); color: var(--ink); font-size: 13px; }
    @media (hover: hover) { input:hover, select:hover { border-color: var(--field-border-hover); } }

    .distance-button { height: var(--control-h); padding: 0 16px; border: 0; border-radius: var(--radius-field); background: var(--dark-button); color: #fff; font-size: 13px; font-weight: 700; }
    .distance-button.secondary { background: transparent; border: 1px solid var(--field-border); color: var(--brand-text); }
    @media (hover: hover) { .distance-button:not(.secondary):hover { background: var(--dark-button-hover); } .distance-button.secondary:hover { border-color: var(--field-border-hover); } }
    #distance-form { display: flex; flex-direction: column; gap: 8px; }
    .field-note { margin: 8px 0 0; display: flex; gap: 5px; align-items: flex-start; font-size: var(--fs-note); line-height: 1.5; color: var(--muted); }
    .field-note svg { flex-shrink: 0; margin-top: 1px; }
    #distance-status { margin: 6px 0 0; font-size: 13px; color: var(--ink); min-height: 1em; }
    #distance-status.error { color: var(--st-conflict-text); }
    .field-help { margin-top: 8px; }
    .field-help summary { display: flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--muted); list-style: none; }
    .field-help summary::-webkit-details-marker { display: none; }
    .field-help p { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

    .filter-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
    @media (max-width: 1023px) { .filter-note { display: none; } }

    /* ---- main content ---- */
    .main-content { flex-grow: 1; min-width: 0; padding: var(--space-5) var(--page-gutter) var(--space-7); }
    @media (max-width: 767px) { .main-content { padding: 16px; } }
    .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
    .section-head h2 { font-family: var(--font-heading); font-size: var(--fs-section); font-weight: 800; color: var(--ink); }
    .section-head p { margin: 0; color: var(--muted); font-size: 13px; }
    @media (max-width: 767px) { .section-head { align-items: start; flex-direction: column; } }

    /* ---- list header sort/distance toolbar (moved here from the sidebar) ---- */
    #toolbar-parking { display: none; }
    .list-sort-slot { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 0; }
    @media (max-width: 767px) { .list-sort-slot { align-items: stretch; width: 100%; } }
    .club-sort-filter { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
    .sort-pills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; min-width: 0; }
    @media (max-width: 767px) { .sort-pills { justify-content: flex-start; } }
    .sort-pill { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--field-border); background: var(--surface); color: var(--ink); font-size: var(--fs-body-sm); font-weight: 500; cursor: pointer; white-space: nowrap; }
    .sort-pill svg { display: none; flex-shrink: 0; }
    .sort-pill[aria-pressed="true"] { background: var(--brand); border-color: var(--brand-text); color: var(--on-brand); font-weight: 700; }
    .sort-pill[aria-pressed="true"] svg { display: inline; }
    @media (hover: hover) { .sort-pill:hover { border-color: var(--field-border-hover); } .sort-pill[aria-pressed="true"]:hover { background: var(--brand-hover); } }
    .sort-pill:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
    .fee-sort-note { margin: 0; max-width: 360px; color: var(--muted); font-size: 12px; line-height: 1.5; text-align: right; }
    @media (max-width: 767px) { .fee-sort-note { max-width: none; text-align: left; } }
    .distance-filter { margin-top: 2px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-field); background: var(--bg); max-width: 360px; box-sizing: border-box; min-width: 0; }
    @media (max-width: 767px) { .distance-filter { max-width: none; width: 100%; } }
    .distance-collapsed { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--ink); }
    .distance-collapsed[hidden] { display: none; }
    [hidden] { display: none !important; }
    .distance-collapsed-clear { border: 0; background: transparent; padding: 0; color: var(--brand-text); font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
    @media (hover: hover) { .distance-collapsed-clear:hover { color: var(--brand-text-hover); } }
    .distance-collapsed-clear:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

    .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); }
    @media (max-width: 1179px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 767px) { .cards { grid-template-columns: minmax(0, 1fr); } }

    .card { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
    .card-button { width: 100%; text-align: left; border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; }
    @media (hover: hover) { .card-button:hover h3 { color: var(--brand-text); text-decoration: underline; } }
    .card-button:focus-visible h3 { color: var(--brand-text); text-decoration: underline; }
    .card-top { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
    .card h3 { margin: 0 0 5px; font-family: var(--font-heading); font-size: 16px; font-weight: 800; color: var(--ink); }
    .card-meta { margin: 0; color: var(--muted); font-size: 13px; }
    .badge { display: inline-flex; align-items: center; width: fit-content; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--st-reference-tint); color: var(--st-reference-text); font-size: 12px; font-weight: 700; margin: 6px 0 0; }
    .badge.outside { background: var(--disabled-bg); color: var(--muted); }
    .badge.unconfirmed { background: var(--st-reference-tint); color: var(--st-reference-text); }
    .card-fact { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 4px 8px; margin: 12px 0 0; font-size: 13px; }
    .card-fact dt { color: var(--muted); }
    .card-fact dd { margin: 0; }
    .source { margin-top: 10px; padding: 8px 10px; border-radius: var(--radius-field); background: var(--bg); font-size: 12px; line-height: 1.55; color: var(--ink); }
    .source p { margin: 2px 0; }
    .source a { color: var(--brand-text); font-weight: 700; overflow-wrap: anywhere; }
    @media (hover: hover) { .source a:hover { color: var(--brand-text-hover); } }
    .fact-note { margin: 2px 0; color: var(--muted); }

    /* ---- region tag / status badge ---- */
    .region-tag { flex-shrink: 0; display: inline-flex; padding: 2px 8px; border-radius: var(--radius-tag); background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); font-size: var(--fs-tag); font-weight: 700; white-space: nowrap; }
    .region-tag-outside { background: var(--disabled-bg); color: var(--muted); border-color: var(--disabled-border); }
    .region-tag-unknown { background: var(--st-reference-tint); color: var(--st-reference-text); border-color: var(--st-reference-base); }

    .status { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border-radius: var(--radius-pill); border: 1px solid; font-size: 12px; font-weight: 700; line-height: 1.35; }
    .status-verified { background: var(--st-verified-tint); border-color: var(--st-verified-base); color: var(--st-verified-text); }
    .status-reference { background: var(--st-reference-tint); border-color: var(--st-reference-base); color: var(--st-reference-text); }
    .status-unknown { background: var(--st-unknown-tint); border-color: var(--st-unknown-base); color: var(--st-unknown-text); }

    /* ---- club card ---- */
    .club-card { box-sizing: border-box; min-width: 0; height: auto; min-height: var(--card-h); display: flex; flex-direction: column; gap: 7px; padding: 14px 14px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: visible; }
    @media (hover: hover) { .club-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card-hover); } }
    .club-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
    .club-card-title { margin: 0; min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-heading); font-size: var(--fs-card-title); font-weight: 800; color: var(--ink); line-height: 1.3; }
    .club-card-status .status { }
    .club-card-row { display: flex; gap: 8px; font-size: 13px; line-height: 1.5; }
    .club-card-row .row-label { flex-shrink: 0; color: var(--muted); width: 30px; }
    .club-card-row .row-value { color: var(--ink); font-weight: 500; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .club-card-weekday { align-items: center; }
    .wd-strip { display: flex; gap: 3px; }
    .wd-cell { width: 26px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-day); font-size: 12px; }
    .wd-cell.on { background: var(--day-on-bg); color: var(--day-on-text); font-weight: 700; }
    .wd-cell.off { background: var(--day-off-bg); color: var(--day-off-text); font-weight: 500; text-decoration: line-through; }
    .wd-unknown { display: inline-flex; padding: 3px 10px; border-radius: var(--radius-pill); border: 1px dashed var(--field-border-hover); color: var(--muted); font-size: 12px; font-weight: 500; }
    .club-card-status { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    .league-pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 800; letter-spacing: .02em; line-height: 1.35; color: #fff; }
    .league-s1 { background: #1f3358; } .league-s2 { background: #1f7a3a; } .league-s3 { background: #1e6b74; } .league-aoba { background: #4f8a2f; } .league-none { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
    .guide-figure { margin: 16px 0; } .guide-figure img { display: block; width: 100%; max-width: 920px; height: auto; border-radius: var(--radius-card); border: 1px solid var(--line); }
    .club-card-fee { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
    .club-card-fee .fee-label { font-size: 12px; color: var(--muted); }
    .club-card-fee .fee-prefix, .club-card-fee .fee-suffix { font-size: 13px; font-weight: 700; color: var(--ink); }
    .club-card-fee .fee-amount { font-family: var(--font-heading); font-size: var(--fs-fee); font-weight: 800; color: var(--ink); letter-spacing: -0.01em; line-height: 1; }
    .club-card-fee .fee-unknown { font-family: var(--font-heading); font-size: 20px; font-weight: 700; color: var(--ink); }
    .club-card-location { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--ink); line-height: 1.45; }
    .club-card-location svg { flex-shrink: 0; margin-top: 1px; color: var(--muted); }
    .club-card-location span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .club-card-spacer { flex-grow: 1; }
    .club-card-sources { border-top: 1px solid var(--line); padding-top: 8px; }
    .club-card-sources > summary { display: flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ink); list-style: none; }
    .club-card-sources > summary::-webkit-details-marker { display: none; }
    .club-card-sources[open] > summary svg { transform: rotate(90deg); }
    .source-list { padding: 8px 0 0 20px; font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 8px; }
    .source-item > strong { color: var(--ink); }
    .club-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .card-view-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

    .compare-add { position: relative; display: inline-flex; align-items: center; gap: 5px; min-height: var(--button-h-sm); padding: 0 12px; border-radius: var(--radius-field); border: 1px solid var(--brand-text); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
    .compare-add::before { content: ""; position: absolute; inset: -4px; }
    .compare-add[aria-pressed="true"] { background: var(--brand-tint); color: var(--on-brand); }
    .compare-add[disabled] { border-color: var(--disabled-border); background: var(--disabled-bg); color: var(--disabled-text); cursor: not-allowed; }
    @media (hover: hover) { .compare-add:not([disabled]):hover { background: var(--brand-tint); } }
    .detail-link { position: relative; display: inline-flex; align-items: center; gap: 2px; min-height: var(--button-h-sm); border: 0; background: transparent; padding: 0; color: var(--brand-text); font-size: 13px; font-weight: 700; cursor: pointer; }
    .detail-link::before { content: ""; position: absolute; inset: -4px; }
    @media (hover: hover) { .detail-link:hover { color: var(--brand-text-hover); text-decoration: underline; } }

    .club-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: var(--space-9) var(--space-6); border: 1.5px dashed var(--field-border); border-radius: var(--radius-card); background: var(--surface); text-align: center; }
    .club-empty > svg { width: 40px; height: 40px; color: var(--muted); }
    .club-empty-title { margin: 0; font-family: var(--font-heading); font-size: var(--fs-empty); font-weight: 800; color: var(--ink); }
    .club-empty-condition { margin: 0; font-size: 13px; color: var(--muted); }
    .club-empty-hint { margin: 0; font-size: 12px; color: var(--muted); max-width: 520px; }
    .club-empty-clear { height: 44px; padding: 0 24px; border: 0; border-radius: var(--radius-pill); background: var(--brand); color: var(--on-brand); font-family: var(--font-heading); font-size: 15px; font-weight: 800; cursor: pointer; }
    @media (hover: hover) { .club-empty-clear:hover { background: var(--brand-hover); } }

    .empty { padding: 24px; border: 1px dashed var(--field-border); border-radius: var(--radius-card); background: var(--surface); color: var(--muted); }
    .empty strong { display: block; color: var(--ink); margin-bottom: 4px; }

    .distance-result { margin: 0; font-size: 13px; color: var(--ink); }
    .distance-result strong { font-weight: 700; }
    .distance-result small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }

    .fee-result { margin: 8px 0 0; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-field); background: var(--bg); font-size: 13px; }
    .fee-result strong { color: var(--ink); }
    .fee-result small { display: block; color: var(--muted); margin-top: 4px; }
    .fee-result details { margin-top: 8px; }
    .fee-result ul { margin: 6px 0; padding-left: 20px; }

    /* ---- drawer ---- */
    #detail { position: fixed; top: 0; right: 0; bottom: 0; z-index: 30; width: min(520px, calc(100vw - 48px)); box-sizing: border-box; display: flex; flex-direction: column; background: var(--surface); box-shadow: var(--shadow-drawer); overflow-y: auto; }
    #detail:focus { outline: none; }
    #detail[hidden] { display: none; }
    @media (max-width: 767px) { #detail { width: 100%; } }
    #drawer-scrim { position: fixed; inset: 0; z-index: 29; background: var(--scrim); }
    #drawer-scrim[hidden] { display: none; }
    body:has(#drawer-scrim:not([hidden])) { overflow: hidden; }

    .drawer-topbar { position: sticky; top: 0; z-index: 2; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 12px 0 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
    .drawer-topbar span { font-size: 13px; font-weight: 700; color: var(--muted); }
    .detail-head { display: flex; flex-direction: column; gap: 6px; padding: 20px var(--space-5) 0; }
    .detail-head h2 { font-family: var(--font-heading); font-size: var(--fs-drawer-title); font-weight: 800; color: var(--ink); }
    .detail-head p { margin: 0; font-size: 12px; color: var(--muted); }
    .close { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-field); background: transparent; color: var(--ink); cursor: pointer; }
    @media (hover: hover) { .close:hover { background: var(--surface-hover); } }
    .detail-grid { display: flex; flex-direction: column; padding: 0 var(--space-5) var(--space-6); }
    .detail-block { padding: 16px 0; border-top: 1px solid var(--line); }
    .detail-block:first-child { border-top: 0; }
    .detail-block h3 { margin: 0 0 10px; font-family: var(--font-heading); font-size: var(--fs-h-small); font-weight: 800; color: var(--muted); }
    .detail-block ul { margin: 0; padding-left: 1.2em; }
    .detail-block li { margin: 4px 0; font-size: 15px; }
    .detail-grid > .compare-actions { padding: 12px var(--space-5) 0; }
    .card-fact-lg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; margin: 0; font-size: 15px; }
    .card-fact-lg dt { color: var(--muted); font-weight: 700; font-size: 14px; }
    .card-fact-lg dt:not(:first-child) { margin-top: 16px; }
    .card-fact-lg dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
    .detail-head, .detail-grid, .detail-block { min-width: 0; overflow-wrap: anywhere; }
    @media (max-width: 767px) { .detail-head { padding: 16px 16px 0; } .detail-grid { padding: 0 16px 24px; } }

    /* ---- compare (tab) ---- */
    .compare-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-field); background: var(--bg); }
    .compare-summary p { margin: 0; font-size: 14px; color: var(--ink); }
    .compare-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
    .compare-remove, .compare-clear, .compare-candidates { min-height: 36px; padding: 0 12px; border-radius: var(--radius-field); border: 1px solid var(--brand-text); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 700; cursor: pointer; }
    @media (hover: hover) { .compare-remove:hover, .compare-clear:hover, .compare-candidates:hover { background: var(--brand-tint); } }
    .compare-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-field); }
    .compare-table { min-width: 760px; width: 100%; border-collapse: collapse; background: var(--surface); table-layout: fixed; }
    .compare-table th, .compare-table td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; text-align: left; font-size: 13px; line-height: 1.5; color: var(--ink); }
    .compare-table thead th { border-top: 0; background: var(--bg); font-family: var(--font-heading); font-size: 14px; font-weight: 800; }
    .compare-table th[scope="row"] { position: sticky; left: 0; z-index: 1; min-width: 9em; width: 110px; background: var(--bg); font-weight: 700; color: var(--muted); white-space: nowrap; }
    .compare-table .source { margin-top: 6px; }
    .compare-table-wrap.dark { border-color: var(--tray-line); }
    .compare-table.dark { background: transparent; }
    .compare-table.dark th, .compare-table.dark td { border-top: 1px solid var(--tray-line); color: var(--tray-text); }
    .compare-table.dark thead th { background: transparent; color: var(--tray-text); }
    .compare-table.dark th[scope="row"] { background: transparent; color: var(--tray-muted); }
    .compare-table.dark .compare-remove { border-color: rgba(255,255,255,.5); background: transparent; color: var(--tray-text); }

    /* ---- compare bar (persistent) ---- */
    #compare-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 14px var(--page-gutter); background: var(--tray); box-shadow: var(--shadow-bar); max-height: 60vh; overflow-y: auto; }
    #compare-bar[hidden] { display: none; }
    .tray-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .tray-count { flex-shrink: 0; font-family: var(--font-heading); font-size: var(--fs-bar); font-weight: 800; color: var(--tray-text); }
    .tray-slots { display: flex; gap: 8px; flex-grow: 1; min-width: 0; flex-wrap: wrap; }
    .tray-slot { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 6px 0 12px; border-radius: var(--radius-field); background: var(--tray-slot); color: var(--tray-text); font-size: 13px; font-weight: 700; white-space: nowrap; }
    .tray-slot-empty { border: 1px dashed rgba(255,255,255,.45); color: var(--tray-muted); font-size: 12px; font-weight: 500; background: transparent; padding: 0 12px; }
    .tray-slot-remove { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--tray-text); cursor: pointer; padding: 0; }
    .tray-slot-remove:focus-visible { outline: 3px solid var(--focus-on-dark); outline-offset: 2px; }
    .tray-toggle { flex-shrink: 0; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,.5); background: transparent; color: var(--tray-text); font-size: 13px; font-weight: 700; cursor: pointer; }
    .tray-cta { flex-shrink: 0; height: 44px; padding: 0 24px; border: 0; border-radius: var(--radius-pill); background: var(--brand); color: var(--on-brand); font-family: var(--font-heading); font-size: var(--fs-bar); font-weight: 800; cursor: pointer; }
    .tray-cta[disabled] { background: rgba(255,255,255,.12); color: var(--tray-muted); cursor: not-allowed; }
    @media (hover: hover) { .tray-toggle:hover { background: rgba(255,255,255,.08); } .tray-cta:not([disabled]):hover { background: var(--brand-hover); } }
    .tray-toggle:focus-visible, .tray-cta:focus-visible { outline: 3px solid var(--focus-on-dark); outline-offset: 2px; }
    #compare-bar .compare-table-wrap { margin-top: 14px; }

    /* ---- guide ---- */
    .guide { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
    .guide h1, .guide h2, .guide h3 { margin-top: 1.2em; font-family: var(--font-heading); color: var(--ink); }
    .guide h1:first-child, .guide h2:first-child, .guide h3:first-child { margin-top: 0; }
    .guide p { margin: .65em 0; font-size: 14px; }
    .guide-table { max-width: 100%; overflow-x: auto; margin: 12px 0; }
    .guide table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .guide th, .guide td { min-width: 10em; padding: 8px; border: 1px solid var(--line); vertical-align: top; text-align: left; }
    .guide th { background: var(--bg); }
    .guide hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }

    /* ---- footer ---- */
    .site-footer { margin-top: 32px; padding: var(--space-6) var(--page-gutter); background: var(--surface); border-top: 1px solid var(--line); }
    .site-about { max-width: 920px; margin: 0 0 20px; font-size: 13px; line-height: 1.6; color: var(--ink); }
    .site-about[hidden] { display: none; }
    .site-about h2 { font-family: var(--font-heading); font-size: 15px; font-weight: 800; margin: 0 0 8px; }
    .site-about p { margin: 3px 0; }
    .site-about a { color: var(--brand-text); }
    .footer-nav { display: flex; flex-wrap: wrap; gap: 28px; }
    .footer-link { display: inline-flex; align-items: center; min-height: 44px; border: 0; background: transparent; padding: 0; color: var(--ink); font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
    @media (hover: hover) { .footer-link:hover { color: var(--brand-text); } }
    .correction-link { margin: 16px 0 8px; font-size: 13px; }
    .correction-link a { color: var(--brand-text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
    @media (hover: hover) { .correction-link a:hover { color: var(--brand-text-hover); } }
    .footer-meta { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
    @media (max-width: 767px) { .footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 4px; } }
    
    
  
.brand-text{color:var(--ink);font-family:var(--font-heading);font-size:26px;font-weight:900;letter-spacing:-1px;line-height:1}.brand-text span{color:var(--brand-text)}.brand-sub{display:block;font-size:10px;font-weight:500;letter-spacing:.08em;margin-top:6px}.brand{text-decoration:none;align-items:center}.site-header{gap:18px}#mode-badge{font-size:10px}.hero-media img{object-position:center top}.hero-sub{font-size:30px}.hero-search-wrap{max-width:1040px}.hero-label{font-size:12px;font-weight:700;color:white;text-shadow:var(--hero-text-shadow);margin:0}.hero-content{gap:18px}.hero-image-note{position:absolute;right:14px;top:12px;background:rgba(8,20,10,.48);color:#fff;padding:3px 9px;border-radius:6px;font-size:10px}.hero-select{margin:0}.hero-quick-link{color:white;font-weight:700;font-size:12px;text-shadow:var(--hero-text-shadow)}.summary-line .summary-item{white-space:nowrap}.site-note{max-width:1420px;margin:auto;padding:12px 24px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line)}.sidebar{flex-shrink:0}.sidebar .field{margin:16px 0}.sidebar .reset{margin-top:14px}.filter-note{display:block!important}.search-clear{border:1px solid var(--field-border);border-radius:var(--radius-pill);padding:9px 18px;background:white;min-height:44px;color:var(--ink);font-weight:700;font-size:12px}.list-head{align-items:flex-start}.list-head h2{margin-bottom:6px}.sort-pills{justify-content:flex-start}.distance-filter{max-width:none}.distance-controls{display:flex;align-items:end;gap:8px;flex-wrap:wrap}.distance-controls .field{flex:1 1 200px}.distance-controls button{flex-shrink:0}.distance-filter .field label{color:var(--ink)}#distance-status{margin:6px 0 0}.toolbar{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:20px}.toolbar .sort-pills{margin-bottom:8px}.club-card-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:21px}.club-card{min-height:330px;gap:10px}.affiliation-pill{font-size:11px;color:var(--muted);background:var(--bg);padding:3px 8px;border-radius:5px}.club-card .status{font-size:10px}.fee-condition{font-size:11px;color:var(--muted);margin:0}.source-list .source-links a{font-weight:600}.source-links{display:flex;flex-direction:column;gap:4px;align-items:start;overflow-wrap:anywhere}.source-links span,.field-note{font-size:11px;color:var(--muted);line-height:1.6}.field-note{display:block;margin-top:5px}.source-field{font-size:12px;border-top:1px solid var(--line);padding-top:9px}.source-field:first-child{border-top:0;padding-top:0}.source-field strong{color:var(--ink)}.source-field p{margin:4px 0}.source-item{font-size:12px}.card-footnote{font-size:11px;color:var(--muted);margin-top:10px}.empty .compare-candidates{margin-top:12px}#compare-content .compare-summary{background:var(--surface)}#compare-content .compare-table th,#compare-content .compare-table td{overflow-wrap:anywhere}.comparison-helper{font-size:12px;color:var(--muted);margin:0 0 14px}.guide{padding:30px;max-width:1120px;margin:auto}.guide h2{font-size:30px;line-height:1.5}.guide h3{font-size:20px;line-height:1.6}.guide h4{font-size:15px;margin:18px 0 6px}.guide-intro{max-width:740px;padding:6px 0 22px}.guide-intro h2{margin-top:14px}.guide-intro p{font-size:15px;line-height:1.9}.guide-kicker{display:inline-block;background:var(--brand-tint);color:var(--brand-text);padding:4px 11px;border-radius:var(--radius-pill);font-size:12px;font-weight:700;margin-bottom:15px}.guide .guide-meta{font-size:12px;color:var(--muted);line-height:1.7}.guide-toc{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-card);padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}.guide-toc strong{grid-column:1/-1;margin-bottom:4px;font-size:13px}.guide-toc a{font-size:13px;line-height:1.6}.guide-section{scroll-margin-top:20px;border-top:1px solid var(--line);padding-top:26px;margin-top:30px}.guide-section h3 span{display:inline-flex;align-items:center;justify-content:center;width:34px;height:32px;font-size:13px;color:var(--on-brand);background:var(--brand);border-radius:7px;margin-right:8px;vertical-align:middle}.guide-section>h3{margin-top:0}.guide p{line-height:1.9}.guide .guide-cite{font-size:12px;color:var(--muted);line-height:1.8;margin-top:14px}.table-hint{display:none}.guide-table{margin:16px 0}.guide table{min-width:720px}.guide td{line-height:1.8;font-size:13px}.guide th{font-size:13px;line-height:1.8}.guide td a,.guide-cite a{font-weight:600}.guide th small{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:5px}.guide-callout{background:var(--brand-tint);border-left:4px solid var(--brand-text);border-radius:0 8px 8px 0;padding:16px 18px;margin:18px 0}.guide-callout>strong{font-size:14px}.guide-callout p{font-size:13px;margin:8px 0 0}.guide-two{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:18px 0}.guide-mini{border:1px solid var(--line);border-radius:var(--radius-card);padding:17px}.guide-mini h4{margin:0;font-size:15px}.guide-mini p{font-size:13px}.guide-filter{min-height:40px;padding:8px 12px;border:1px solid var(--brand-text);border-radius:8px;background:var(--brand-tint);color:var(--brand-text);font-weight:700;font-size:12px;white-space:nowrap}.guide-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.check-guide{max-width:860px}.checklist{list-style:none;margin:20px 0;padding:0}.checklist li{border-bottom:1px solid var(--line);padding:17px 0}.checklist label{display:flex;align-items:start;gap:13px;font-size:14px;cursor:pointer}.checklist input{width:18px;min-height:18px;height:18px;accent-color:var(--brand-text);margin:3px 0 0;flex-shrink:0}.checklist label:has(input:checked){color:var(--muted)}.compare-tab-note{font-size:12px;color:var(--muted)}.tray-slots{flex-wrap:nowrap;overflow:auto}.tray-slot{font-size:12px;white-space:nowrap}.tray-slot-empty{min-width:90px;justify-content:center}.tray-slot-remove{flex-shrink:0}.tray-slot-label{max-width:170px;overflow:hidden;text-overflow:ellipsis}.tray-row{flex-wrap:nowrap}.tray-count{font-size:13px}.tray-cta{font-size:13px;padding:0 18px}.tray-all-clear{border:0;min-height:40px;padding:0 8px;background:transparent;color:white;text-decoration:underline;font-size:12px;white-space:nowrap}.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;border-radius:9px;padding:12px 18px;z-index:60;font-size:13px;max-width:90vw;width:max-content}.site-footer{padding-bottom:110px}.site-footer p{max-width:1100px}.footer-nav{justify-content:center}.footer-nav .footer-link{min-height:36px}.download-links{display:flex;gap:18px;flex-wrap:wrap;margin:18px 0;font-size:12px}.brand-note{color:var(--muted);font-size:11px}.prototype-note{font-size:11px;text-align:center;color:var(--muted);margin:8px 0}.sources-note{font-size:12px;color:var(--muted)}dialog{border:0;padding:0;background:var(--surface);color:var(--ink);max-height:100dvh}dialog::backdrop{background:var(--scrim)}#detail-dialog{position:fixed;inset:0 0 0 auto;margin:0;width:min(540px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;box-shadow:var(--shadow-drawer)}.dialog-title{font-size:22px;line-height:1.5;margin:0 0 6px}.detail-body{padding:24px}.detail-body .detail-grid{padding:0}.detail-body dl{margin:25px 0 0;display:block}.detail-body dt{font-size:13px;font-weight:700;color:var(--muted);margin:22px 0 6px}.detail-body dd{margin:0;padding-bottom:17px;border-bottom:1px solid var(--line);font-size:14px}.detail-notes{margin-top:20px;background:var(--st-reference-tint);padding:15px;border-radius:8px;font-size:12px;line-height:1.8}.detail-notes ul{margin:5px 0;padding-left:18px}.detail-body .compare-add{margin-top:20px}.location-source{font-size:11px;color:var(--muted);margin-top:8px}.tab-band{justify-content:space-between;gap:15px}.tab-band small{font-size:11px;color:var(--muted)}
@media(min-width:1450px){.site-header,.layout{max-width:1500px;margin:auto}.hero-content{max-width:1420px;margin:auto}.hero-media img{object-position:center top}}
@media(max-width:1023px){.hero-sub{font-size:25px}.guide{padding:22px}.guide h2{font-size:26px}.site-header{gap:8px}.tab{padding:0 10px}.brand-text{font-size:23px}}
@media(max-width:767px){.brand{padding:0 12px 0 16px;height:60px}.brand-text{font-size:25px}.brand-sub{font-size:10px}.header-nav{justify-content:flex-start}.tab{padding:0 13px;font-size:13px}.hero{height:260px}.hero-media img{object-position:45% center}.hero-content{gap:13px;padding-bottom:22px}.hero-sub{font-size:21px}.hero-label{font-size:11px}.hero-search{padding:7px}.hero-search-row .hero-select{width:32%}.hero-search-row .hero-select.age{width:36%}.hero-search-btn{padding:0 14px}.hero-quick-link{font-size:11px}.hero-image-note{font-size:9px}.summary-bar{padding:10px 16px}.summary-line{font-size:11px;gap:4px}.summary-line strong{font-size:13px}.site-note{padding:10px 16px;font-size:11px}.guide{padding:20px 16px}.guide h2{font-size:25px}.guide h3{font-size:18px}.guide-intro p{font-size:14px}.guide-toc{grid-template-columns:1fr;gap:12px;padding:16px}.guide-section{padding-top:22px;margin-top:26px}.guide-two{grid-template-columns:1fr}.guide-callout{padding:14px}.guide p{font-size:13px}.guide .guide-cite{font-size:11px}.guide-filter{font-size:12px}.distance-controls{align-items:stretch}.distance-controls .field{flex-basis:100%}.distance-controls button{font-size:12px;flex:1;padding:0 10px}.distance-filter{padding:10px}.club-card{min-height:300px}.club-card-title{font-size:17px}.club-card .status{font-size:11px}.tray-row{flex-wrap:wrap;gap:7px}.tray-count{width:100%;font-size:12px}.tray-slots{max-width:calc(100% - 135px);gap:5px}.tray-slot{height:32px;padding-left:8px;font-size:11px}.tray-slot-label{max-width:85px}.tray-slot-empty{display:none}.tray-cta{margin-left:auto;height:40px;padding:0 14px;font-size:12px}.tray-all-clear{position:absolute;top:3px;right:16px;font-size:11px}.tab-band{min-height:64px;padding:0 16px}.tab-band small{display:none}.detail-body{padding:20px}.dialog-title{font-size:23px}.hero-content .hero-field input{font-size:14px}.prototype-note{font-size:10px}.footer-nav{justify-content:start}}
@media(max-width:767px){.sidebar{gap:12px;padding:18px 16px}.sidebar .field{margin:3px 0}.sidebar .filter-note{display:none!important}#day-options{gap:4px}.sidebar .search-clear{margin-top:2px}#guide-from-filter{margin-top:0!important}}
@media(max-width:767px){.guide .table-hint{display:block;font-size:11px;color:var(--muted);margin:12px 0 -5px}}
@media print{.site-header,#mode-notice,.hero,.summary-bar,.site-note,.sidebar,.toolbar,.tab-band,.site-footer,#compare-bar,.toast,.print-button,#clubs-panel,#guide-panel,#compare-panel,dialog{display:none!important}.layout{display:block!important}.main-content{padding:0!important}#checklist-panel{display:block!important}.guide{border:0;max-width:none}.guide-toc{display:none}.checklist li{padding:12px 0}.check-guide:after{content:'PequeKarate（仮）・体験前チェック・2026-11-04';font-size:11px;display:block;margin-top:20px}body{background:white}#checklist-panel .guide-actions{display:none}}
.history-matches{margin:18px 0;padding:18px;background:var(--brand-tint);border:1px solid var(--line);border-radius:10px;font-size:12px;line-height:1.8}.history-matches h3{font-size:14px;margin:0 0 10px}.history-matches ul{padding-left:18px}.history-matches li+li{margin-top:14px}.identity-history{margin-top:18px;border:1px solid var(--line);border-radius:8px;padding:14px;font-size:12px}.identity-history h3{font-size:14px;margin:0 0 10px}.history-item+.history-item{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}.history-item p{line-height:1.8}.archive-history{margin:16px 0}.followup-summary{border-left:3px solid var(--brand-text);padding-left:12px}.unknown-age-toggle{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.7}.unknown-age-toggle input{width:18px;min-height:18px;height:18px;margin:3px 0 0;accent-color:var(--brand-text);flex-shrink:0}.review-note{font-size:12px;line-height:1.8;color:var(--muted);background:var(--bg);padding:12px;border-radius:8px}.coverage-box{max-width:1420px;margin:0 auto;padding:12px 24px;border-bottom:1px solid var(--line);background:var(--surface);font-size:12px}.coverage-box summary{cursor:pointer;font-weight:700;color:var(--ink);line-height:1.9}.coverage-box p{margin:10px 0;color:var(--muted);line-height:1.8}.coverage-box table{border-collapse:collapse;width:100%;max-width:700px;margin:12px 0}.coverage-box th,.coverage-box td{border:1px solid var(--line);padding:8px;text-align:left}.coverage-links{display:flex;flex-wrap:wrap;gap:16px;margin:12px 0}.coverage-note{color:var(--muted);font-size:11px}.fee-condition{line-height:1.6}.club-card-title{min-height:22px}@media(max-width:767px){.coverage-box{padding:12px 16px}.coverage-box table{font-size:11px}.coverage-box th,.coverage-box td{padding:5px}.unknown-age-toggle{font-size:12px}}@media print{.coverage-box{display:none!important}}
.karate-type-tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}.karate-type-pill{display:inline-flex;align-items:center;max-width:100%;padding:4px 9px;border:1px solid var(--line);border-radius:var(--radius-pill);font-size:12px;font-weight:700;line-height:1.5;overflow-wrap:anywhere;background:var(--brand-tint);color:var(--ink)}.karate-type-pill.type-unknown{background:var(--bg);color:var(--muted);border-style:dashed}.karate-type-pill.type-other{background:var(--surface)}.karate-type-pill.type-reference{background:var(--surface);color:var(--muted);font-weight:500}.type-evidence ul,.type-uncertainties ul{padding-left:18px;margin:4px 0 8px}.karate-type-help{font-size:11px;line-height:1.7;color:var(--muted);margin:8px 0 0}.sidebar .karate-type-filter{margin-top:0}@media(max-width:767px){.karate-type-pill{font-size:11px}.karate-type-help{font-size:11px}.sidebar .karate-type-filter{min-width:0}}

#filter-controls{display:flex;flex-direction:column;gap:12px}#filter-controls[hidden]{display:none}.filter-mobile-head{display:none}.filter-summary{font-size:12px;line-height:1.6;margin:0;color:var(--muted);overflow-wrap:anywhere}.pagination{display:flex;align-items:center;justify-content:center;gap:18px;padding:24px 0}.pagination[hidden]{display:none}.pagination button,#show-unlocated,#filter-toggle{min-height:44px;padding:10px 16px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-weight:700;cursor:pointer}.pagination button:disabled{opacity:.45;cursor:default}.pagination button:focus-visible,#show-unlocated:focus-visible,#filter-toggle:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.field-evidence{margin-top:8px;font-size:12px;line-height:1.7}.field-evidence>summary{cursor:pointer;color:var(--muted);padding:4px 0}.field-evidence .source-links{margin-top:8px}.compare-selected{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:10px}.compare-selected li{display:flex;gap:8px;align-items:center;font-size:12px}.compare-mobile{display:none}#results-heading{scroll-margin-top:16px}#results-heading:focus{outline:2px solid var(--focus);outline-offset:4px}.detail-notes>summary{font-weight:700;cursor:pointer}.sidebar .field{margin:6px 0}.club-card{min-height:290px}
@media(max-width:767px){.filter-mobile-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.sidebar-heading{display:none}.sidebar{padding:12px 16px;gap:8px}.hero-content{gap:10px;padding-bottom:16px}.hero-sub{font-size:21px}.hero-label,.hero-quick-link{display:none}.site-note{padding:8px 16px}.summary-bar{padding:8px 16px}.compare-desktop{display:none}.compare-mobile{display:block}.compare-field-group{margin:20px 0}.compare-field-group>h3{font-size:17px;margin:0 0 10px}.compare-field-group>ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}.compare-field-group>ul>li{padding:14px;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-size:14px;line-height:1.7;overflow-wrap:anywhere}.compare-field-group h4{font-size:12px;color:var(--muted);margin:0 0 6px}.compare-selected{display:grid;gap:8px}.compare-selected li{justify-content:space-between}.club-card{min-height:280px}.filter-summary{font-size:11px}.pagination{gap:12px}}
@media(max-width:767px){#compare-content .compare-summary{flex-direction:column;align-items:stretch;gap:12px}.compare-summary .compare-actions{margin-top:0}.compare-summary .compare-selected{margin:0}.compare-selected li{gap:12px;align-items:center}.compare-selected li>strong{flex:1;min-width:0}.compare-selected .compare-remove{flex-shrink:0;white-space:nowrap;min-height:40px}}.site-operator{font-size:12px;line-height:1.8;max-width:880px}.site-operator p{margin:6px 0}.correction-help{font-size:11px;color:var(--muted)}.correction-box{margin-top:24px;padding:16px;border:1px solid var(--line);border-radius:8px;font-size:12px;line-height:1.8}.correction-box h3{font-size:15px;margin:0 0 10px}.correction-box p{margin:8px 0 0}