/* ====================================================================
   共通部品（2026-09-01 新設 / M4 UI土台）

   ## なぜ新しい名前で作るのか

   既存のクラス名は、同じ名前がページごとに別物になっている。実測:
     .form-group  … 110箇所で使用 / **9通りの定義**が11ページに散在
     .loading     …  29箇所で使用 / **5通りの定義**
     .notion-table…  17箇所で使用 / 2通りの定義が7ページに複製
   共通CSSに寄せると、寄せた瞬間に各ページの見た目が変わる。
   だから既存名は触らず、衝突しない `k-` で新しい層を作り、
   画面を1枚ずつこちらへ移していく（移した画面から順に、直しが1箇所で済む）。

   ## 色と寸法は必ず変数で書く（検査11が直値を弾く）
   直値を書かないこと。クラブごとに色を変える(M4「クラブ別テーマ」)ときに、
   :root の変数を差し替えるだけで済ませるため。変数の定義は custom.css。

   ## 読み込み順
   base.html で custom.css の直後、Tailwind の前。
   Tailwind のユーティリティが後ろ＝後勝ちなので、
   `class="k-btn px-2"` のような上書きは意図どおり効く。
   ==================================================================== */

/* ── ボタン ───────────────────────────────────────────────
   実測(2026-09-01): ボタン477個に対し、クラスの組み合わせが234通り。
   最も多いものでも15回しか使われていない。= 事実上、毎回書き下ろしている。 */
.k-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;              /* DESIGN.md: タップ領域 >= 44px */
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--r-btn, 14px);
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.k-btn:disabled,
.k-btn[aria-disabled="true"] {
  background: var(--accent-disabled);
  border-color: var(--accent-disabled);
  color: var(--on-accent);
  cursor: not-allowed;
}
.k-btn--primary   { background: var(--accent-primary); color: var(--on-accent); }
.k-btn--primary:hover:not(:disabled)   { background: var(--accent-hover); }
.k-btn--secondary { background: var(--card); border-color: var(--border-default); color: var(--ink-2); }
.k-btn--secondary:hover:not(:disabled) { background: var(--bg-hover); }
.k-btn--ghost     { background: transparent; color: var(--ink-3); }
.k-btn--ghost:hover:not(:disabled)     { color: var(--ink); background: var(--bg-hover); }
.k-btn--danger    { background: var(--accent-danger); color: var(--on-accent); }
.k-btn--danger:hover:not(:disabled)    { filter: brightness(.93); }
.k-btn--sm   { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.k-btn--lg   { min-height: 56px; padding: 14px 24px; font-size: 15px; }
.k-btn--full { width: 100%; }

/* ── カード ─────────────────────────────────────────── */
.k-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card, 20px);
  padding: 16px;
}
.k-card--flat  { border-radius: var(--radius-md, 12px); padding: 12px; }
.k-card__title {
  margin: 0 0 12px;
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

/* ── 見出し ─────────────────────────────────────────── */
.k-heading {
  margin: 0 0 12px;
  font-family: var(--font-jp);
  font-weight: 700;
  color: var(--ink);
}
.k-heading--1 { font-size: 20px; }
.k-heading--2 { font-size: 16px; }
.k-heading--3 { font-size: 14px; color: var(--ink-2); }

/* ── タグ（DESIGN.md 5.2 に対応） ───────────────────── */
.k-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--r-pill, 999px);
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.k-tag--green  { background: var(--green-bg);  color: var(--green-2); }
.k-tag--blue   { background: var(--blue-bg);   color: var(--blue-2); }
.k-tag--purple { background: var(--purple-bg); color: var(--purple-2); }
.k-tag--coral  { background: var(--coral-bg);  color: var(--coral); }
.k-tag--muted  { background: var(--beige-deep); color: var(--ink-3); }

/* ── 入力欄 ─────────────────────────────────────────── */
.k-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.k-field__label {
  font-family: var(--font-jp);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}
.k-field__required { margin-left: 4px; color: var(--accent-danger); font-size: 12px; }
.k-field__hint  { font-size: 12px; color: var(--ink-3); }
.k-field__error { font-size: 12px; color: var(--accent-danger); }
.k-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm, 8px);
  background: var(--card);
  font-family: var(--font-jp);
  font-size: 14px;
  color: var(--ink);
}
.k-input:focus {
  outline: none;
  border-color: var(--border-active);
  box-shadow: 0 0 0 3px var(--green-bg);
}
.k-input:disabled { background: var(--beige-deep); color: var(--ink-3); cursor: not-allowed; }
textarea.k-input { min-height: 96px; line-height: 1.6; resize: vertical; }
.k-field--error .k-input { border-color: var(--accent-danger); }

/* ── 外部の決済サービスが差し込む入力欄の枠 ───────────────
   PAY.JP の payjp.js は、カード番号・有効期限・セキュリティコードを
   **向こうの iframe** として置いていく。中の見た目は向こうにしか触れず、
   こちらが用意できるのは外側の箱だけ。箱を用意しないと、名義欄には枠が
   あるのにカード番号だけ枠が無い状態になり、どこに打てば良いのか分からない
   （2026-09-03 実機で判明）。
   .k-input と同じ寸法・同じ枠にして、1枚の入力欄に見えるようにする。
   高さは iframe の実寸に合わせて中身で決まるので min-height だけ持たせる。 */
.k-cardbox {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm, 8px);
  background: var(--card);
}
/* iframe には :focus が効かない。JS で is-focus を付け外しする。 */
.k-cardbox.is-focus {
  border-color: var(--border-active);
  box-shadow: 0 0 0 3px var(--green-bg);
}
.k-cardbox.is-invalid { border-color: var(--accent-danger); }

/* 罠のフィールド（2026-09-05 / セキュリティ申告 S4 クレジットマスター対策）
   カード登録フォームに置く、人には見えない入力欄。自動入力する道具が
   埋めてしまうため、値が入っていたらボットとみなして登録を止める。
   display:none や hidden ではなく画面外へ飛ばすのは、「隠されている＝罠」と
   判断して避ける道具があるため。判定は utils/card_guard.py。 */
.k-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* ── 表 ─────────────────────────────────────────────
   PCは表、スマホはカード。既存の notion-table + mobile-card-view と
   同じ考え方だが、あちらは7ページに同じCSSが複製されている。 */
.k-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.k-table th {
  padding: 10px 12px;
  background: var(--card-2);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
  text-align: left;
  white-space: nowrap;
}
.k-table td { padding: 12px; border-bottom: 1px solid var(--line-soft); color: var(--ink); }
.k-table tbody tr:hover { background: var(--card-2); }
.k-table__wrap { overflow-x: auto; }

/* ── 空の状態 ───────────────────────────────────────── */
.k-empty { padding: 40px 16px; text-align: center; color: var(--ink-3); font-size: 14px; }
.k-empty__title { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--ink-2); }

/* ── 読み込み中 ─────────────────────────────────────── */
.k-loading { padding: 40px 16px; text-align: center; color: var(--ink-3); font-size: 14px; }

/* ── タブ ───────────────────────────────────────────── */
.k-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.k-tab {
  padding: 10px 16px;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  font-family: var(--font-jp);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-3);
  cursor: pointer;
}
.k-tab[aria-selected="true"] { color: var(--green-2); border-bottom-color: var(--green); }

/* ── モーダル ───────────────────────────────────────── */
.k-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.k-modal[hidden] { display: none; }
.k-modal__overlay { position: absolute; inset: 0; background: var(--bg-overlay); }
.k-modal__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--card);
  border-radius: var(--r-card, 20px);
  padding: 20px;
}
.k-modal__title { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--ink); }
.k-modal__actions { display: flex; gap: 8px; margin-top: 20px; }
.k-modal__actions > * { flex: 1; }

/* ── 通知（トースト） ───────────────────────────────── */
.k-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 60;
  max-width: calc(100% - 32px);
  padding: 12px 20px;
  border-radius: var(--r-pill, 999px);
  background: var(--ink);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 700;
  box-shadow: var(--shadow-lift);
}
.k-toast[hidden] { display: none; }
.k-toast--success { background: var(--accent-success); }
.k-toast--error   { background: var(--accent-danger); }

/* スマホ */
@media (max-width: 640px) {
  .k-card { padding: 14px; }
  .k-modal__panel { max-width: 100%; }
}

/* ── 選択欄（k-select）────────────────────────────────────
   ネイティブ <select> の代わりに開くドロップダウン。

   ## なぜ要るのか
   **Android の LINE アプリ内ブラウザでは <select> が開かない。**
   2026年の沼津市選手権申込で実際に保護者が申込めず、CSに連絡が来ている。
   会員への案内はLINEから飛ばしているので、この経路が主線であって例外ではない。

   暫定策として「外部ブラウザで開く」誘導を沼津フォームに入れたが、それでも
   開けない端末があった。根本策は、ネイティブの select を残したまま（値の送信も
   JS無効時の動作も変えずに）UIだけ自前の div に置き換えること。
   実装は static/js/dropdown.js。伊豆フォームで先行採用したものを部品にした。

   .k-select__native は消さずに残す（display:none にすると required の
   ブラウザ検証やフォーム送信が壊れる。位置だけ隠す）。 */
.k-select {
  position: relative;
  min-width: 0;
}
.k-select__native {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.k-select__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-soft, #e5e7eb);
  border-radius: var(--radius-md, 12px);
  background: var(--card, #ffffff);
  color: var(--ink, #212121);
  /* 16px 未満だと iOS が拡大するので下げない */
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}
.k-select.is-open .k-select__btn {
  border-color: var(--border-active, #00897b);
}
.k-select__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.k-select__label.is-placeholder {
  color: var(--ink-3, #9e9e9e);
}
.k-select__arrow {
  flex-shrink: 0;
  color: var(--ink-3, #9e9e9e);
  font-size: 12px;
  line-height: 1;
}
.k-select__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 260px;
  overflow-y: auto;
  background: var(--card, #ffffff);
  border: 1px solid var(--line-soft, #e5e7eb);
  border-radius: var(--radius-md, 12px);
  box-shadow: 0 10px 28px var(--bg-overlay, #0000002b);
  z-index: 60;
  display: none;
}
.k-select.is-open .k-select__menu {
  display: block;
}
.k-select__opt {
  padding: 12px 14px;
  font-size: 15px;
  color: var(--ink-2, #424242);
  cursor: pointer;
  border-bottom: 1px solid var(--line-soft, #e5e7eb);
}
.k-select__opt:last-child {
  border-bottom: none;
}
.k-select__opt.is-selected {
  background: var(--bg-selected, #e0f2f1);
  color: var(--ink, #212121);
  font-weight: 700;
}
.k-select__opt.is-disabled {
  color: var(--ink-4, #bdbdbd);
  cursor: default;
}