/* ============================================================
   共通CSS：出場校登録システム 全画面共通のデザイン部品
   （デザイン仕様書に基づく。公開サイトと調和する配色・書体に統一する）

   画面固有のスタイルは各画面の <style> にそのまま残してよい。
   ここに置くのは、ヘッダー・見出し・バッジ・ボタン・入力欄など
   複数画面で繰り返し使う部品だけ。
   ============================================================ */

:root {
  /* ---- 暗い面（ヘッダー・見出し帯・全面ダーク画面） ----
     2026-09-20：濃紺のブランドは維持しつつ、スマホでの視認性が低いという
     指摘を受けて全体的に明度・彩度を上げた（旧値は各行末尾のコメント参照） */
  --bg-deep:    #0b1d30; /* 旧 #060d15 */
  --bg-base:    #0f2338; /* 旧 #0a121c */
  --bg-panel:   #142c46; /* 旧 #0d1926 */
  --bg-label:   #0c2238; /* 旧 #08101a */

  --line:       #2c4a68; /* 旧 #16283a */
  --line-thin:  #203b58; /* 旧 #132132 */
  --line-input: #3a6088; /* 旧 #26405a */

  --text:       #ffffff;
  --text-sub:   #c3d6ea; /* 旧 #9fb6cc */
  --text-muted: #a0b6cc; /* 旧 #7f93a8 */
  --text-dim:   #7f9ab5; /* 旧 #5b738c */

  --accent:     #3480f5; /* 旧 #1f6fe5 */
  --accent-lt:  #8ec0ff; /* 旧 #68a4ff */
  --accent-bg:  rgba(52, 128, 245, .20); /* 旧 rgba(31, 111, 229, .16) */

  --warn:  #c3e34a;
  --alert: #e0413a;

  /* 状態バッジ：未入力（旧・未着手）＝薄いグレー、締切済＝濃いグレー */
  --notyet:     #c7c7c7; /* 旧 #b8b8b8 */
  --notyet-dot: #9e9e9e; /* 旧 #8f8f8f */
  --locked:     #93939a; /* 旧 #7a7a7a */
  --locked-dot: #6b6b72; /* 旧 #55555a */

  /* ---- 明るい面（入力欄・表） ---- */
  --l-bg:       #f2f5f8;
  --l-panel:    #ffffff;
  --l-line:     #dbe3ec;
  --l-text:     #0a121c;
  --l-text-sub: #7a8a9b;
  --l-accent:   #1a5ec4;

  /* 明るい面の状態バッジ用グレー（--notyet/--locked は暗い面向けの明度のため別トークン） */
  --l-notyet:      #8a8a8a;
  --l-notyet-bg:   #f0f0f0;
  --l-notyet-line: #dcdcdc;
  --l-locked:      #6b6b6b;
  --l-locked-bg:   #e8e8e8;
  --l-locked-line: #d0d0d0;

  --font-family: "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
}

/* ================================================
   4-1 ヘッダー（全画面共通）
   ================================================ */
.app-header {
  height: 54px;
  min-height: 54px;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 20px;
  font-family: var(--font-family);
}
.app-header .brand {
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--text);
  white-space: nowrap;
  flex-shrink: 0;
}
.app-header nav {
  display: flex;
  gap: 22px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}
.app-header nav a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.app-header nav a svg { flex-shrink: 0; }
.app-header nav a:hover { color: var(--text); }
.app-header nav a.active { color: var(--accent-lt); }
.app-header .logout-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--line-input);
  color: var(--text-sub);
  padding: 6px 14px;
  border-radius: 2px;
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
.app-header .logout-btn svg { flex-shrink: 0; }
.app-header .logout-btn:hover { border-color: var(--accent); color: var(--text); }
/* ヘッダー右端のヘルプデスクボタンは、見た目はnavのリンクと揃える */
.app-header .helpdesk-btn {
  background: transparent;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted);
}
.app-header .helpdesk-btn:hover { color: var(--text); }
.app-header .helpdesk-btn svg { flex-shrink: 0; }

@media (max-width: 560px) {
  .app-header { gap: 14px; padding: 0 12px; }
  .app-header .brand { display: none; }
  .app-header nav { gap: 14px; }
  .app-header nav a span { display: none; }
  .app-header .helpdesk-btn span { display: none; }
}

/* ================================================
   4-1b ヘルプデスク（モーダル。ヘッダーのヘルプデスクボタンから開く）
   ================================================ */
.helpdesk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 13, 21, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
}
.helpdesk-box {
  background: var(--l-panel);
  border-radius: 10px;
  max-width: 360px;
  width: 100%;
  overflow: hidden;
}
.helpdesk-head {
  background: var(--bg-deep);
  color: #fff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
}
.helpdesk-head button {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  display: flex;
}
.helpdesk-head button:hover { color: #fff; }
.helpdesk-body { padding: 18px; }
.helpdesk-row { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--l-line); font-size: 13.5px; }
.helpdesk-row:last-of-type { border-bottom: none; }
.hd-label { color: var(--l-text-sub); flex-shrink: 0; }
.helpdesk-row span:last-child { color: var(--l-text); font-weight: 500; text-align: right; }
.helpdesk-note { font-size: 11.5px; color: var(--l-text-sub); line-height: 1.7; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--l-line); }

/* ================================================
   4-1c ページ見出し帯（大会名／パンくず／学校名＋都道府県シルエット／
   ウィジェット）。全画面共通。学校名の代わりにページタイトルを出す
   旧方式は廃止し、「今どこにいるか」はパンくずリストで示す
   ================================================ */
.page-head {
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
  padding: 18px 20px 14px;
}
.page-head-inner { max-width: 980px; margin: 0 auto; }
.page-head .head-ja { margin: 0; }

/* パンくずリストは、見出し帯の一番下に「現在地バッジ」と並べて表示する
   （学校名・ウィジェットより下、区切り線の下）。バッジは各画面のセクション
   見出し（お知らせ等）と同じ色にして、今どの画面にいるか一目でわかるようにする */
.page-subrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.page-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--l-accent), #3480f5);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px 6px 10px;
  border-radius: 20px;
  flex-shrink: 0;
}
.page-badge svg { flex-shrink: 0; display: block; }
/* flexアイテムは既定でmin-width:autoのため、幅が足りない時に縮まず
   はみ出してしまう。min-width:0で明示的に縮められるようにし、折り返す */
.page-subrow .breadcrumb { flex: 1 1 160px; min-width: 0; }
.breadcrumb { font-size: 12px; letter-spacing: .02em; }
.breadcrumb a { color: var(--accent-lt); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .crumb-sep { margin: 0 6px; color: var(--text-dim); }
.breadcrumb .crumb-current { color: var(--text-sub); }

/* 学校名のブロックと、右側のウィジェットを横に並べる。
   画面が狭いときはウィジェットが下に折り返す */
.page-head-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
  flex-wrap: wrap;
  margin-top: 16px;
}
/* ウィジェットは常に横1列・同じ幅で並べる（gridなら折り返しで幅が崩れない） */
.head-widgets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  flex: 1 1 420px;
  max-width: 620px;
}
.head-widgets .stat-tile,
.head-widgets .players-card {
  margin-bottom: 0;
  min-width: 0;
}
/* ウィジェットの高さは自動的に揃う（同じgrid行なので一番高いカードに合わせて
   伸びる）。見出しの位置を他と揃えるため、上詰めにする */
.head-widgets .stat-tile:not(.stat-ring-tile) {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
@media (max-width: 860px) {
  .head-widgets { width: 100%; max-width: none; }
}

/* ---- ウィジェット共通部品（見出し・数字・補足・メーター）。
   ダッシュボード以外の画面は「締切まで」＋「その画面の数字」の2枚構成
   （.cols-2）。中身は js/head-widgets.js の renderTile() で描画する ---- */
.widget-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 10px; font-size: 12px; color: var(--text-sub); }
.widget-head svg { display: block; }
.stat-tile { background: var(--bg-panel); border-radius: 10px; padding: 14px 16px; }
.stat-value-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.stat-tile .stat-value { font-size: 24px; font-weight: 600; color: #fff; line-height: 1; }
.stat-tile .stat-value small { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.stat-tile .stat-value.is-text { font-size: 17px; }
.stat-tile .stat-sub { font-size: 10.5px; color: var(--accent-lt); margin-top: 6px; }
/* 締切が近い・人数が足りない等の注意表示（数字の色だけ変える） */
.stat-tile.tone-warn .stat-value { color: #ffd479; }
.stat-tile.tone-alert .stat-value { color: #ff8a80; }
/* 状態ウィジェット（未入力＝灰／未保存＝赤／未提出＝黄／提出済み＝緑）。数字の前に色の点を付ける */
.stat-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 2px; }
.stat-tile.tone-muted .stat-value { color: #c7c7c7; }
.stat-tile.is-status.tone-ok .stat-value { color: #8fe3b0; }
.stat-tile.is-status.tone-warn .stat-sub { color: #ffd479; }
.stat-tile.is-status.tone-alert .stat-sub { color: #ffb3ab; }
.stat-tile.is-status.tone-muted .stat-sub { color: var(--text-muted); }
/* 新着（申請書など）。注意・警告と区別するため紫系にする */
.stat-tile.tone-new .stat-value,
.stat-tile.tone-new .stat-sub { color: #d4b4ff; }
.stat-tile.tone-ok .stat-sub { color: #8fe3b0; }
/* 進み具合のメーター（〇/〇 の割合） */
.stat-meter { height: 5px; border-radius: 3px; background: var(--line); margin-top: 10px; overflow: hidden; }
.stat-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .3s; }
.stat-tile.tone-ok .stat-meter > span { background: #4cc38a; }
.stat-tile.tone-alert .stat-meter > span { background: #ff8a80; }
.head-widgets.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 0 1 400px;
  max-width: 400px;
}
@media (max-width: 860px) {
  .head-widgets.cols-2 { flex-basis: 100%; max-width: none; }
}

/* 都道府県シルエットを大きく・学校名と少し重なるように配置する。
   都道府県ごとに縦横比が大きく違うため、固定の正方形の枠を用意し、
   svg側は preserveAspectRatio（既定のxMidYMid meet）で枠に収める */
.head-school-row { display: flex; align-items: flex-end; }
.pref-badge-lg {
  flex-shrink: 0;
  width: 118px;
  height: 118px;
  margin-right: -26px;
  margin-bottom: -6px;
}
.pref-badge-lg svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 8px 16px rgba(52, 128, 245, .38));
}
.school-text { position: relative; z-index: 1; min-width: 0; }
.pref-name-top { font-size: 11px; letter-spacing: .12em; color: #fff; margin-bottom: 5px; }
.applicant-line { font-size: 12.5px; color: var(--text-muted); margin-top: 8px; }
@media (max-width: 480px) {
  .pref-badge-lg { width: 84px; height: 84px; margin-right: -16px; }
}

/* このページはヘッダーに学校名を大きく出すため、ヘッダー右上の
   小さな学校名表示は重複するので常に隠す */
.header-school-code { display: none; }

/* ================================================
   4-2 見出し（英字ラベル＋和文見出し）
   ================================================ */
.tournament-name {
  font-size: 15px;
  color: var(--text-sub);
  letter-spacing: .02em;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.head-en {
  font-size: 11px;
  color: var(--accent);
  letter-spacing: .3em;
  margin-bottom: 6px;
}
.head-ja {
  font-size: 26px;
  color: var(--text);
  letter-spacing: .06em;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}
.head-rule {
  width: 56px;
  height: 2px;
  background: var(--accent);
  margin-top: 14px;
  border: none;
}
@media (max-width: 480px) {
  .head-ja { font-size: 21px; }
}

/* ================================================
   4-3 二段組（左：見出し列／右：内容）
   ================================================ */
.split { display: grid; grid-template-columns: 168px 1fr; }
.split-label {
  background: var(--bg-label);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px 12px;
  gap: 6px;
}
.split-label .en {
  font-size: 10px;
  color: var(--accent);
  letter-spacing: .26em;
}
.split-label .ja {
  font-size: 15px;
  color: var(--text);
  letter-spacing: .12em;
}
.split-body { padding: 20px 26px; min-width: 0; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split-label { flex-direction: row; justify-content: flex-start; padding: 12px 20px; }
}

/* ================================================
   4-4 状態バッジ
   ================================================ */
/* 暗い面：点＋文字（枠なし） */
.badge-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
}
.badge-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.badge-dot.done    { color: var(--accent-lt); }
.badge-dot.done::before    { background: var(--accent); }
.badge-dot.editing { color: var(--warn); }
.badge-dot.editing::before { background: var(--warn); }
.badge-dot.notyet  { color: var(--notyet); }
.badge-dot.notyet::before  { background: var(--notyet-dot); }
.badge-dot.locked  { color: var(--locked); }
.badge-dot.locked::before  { background: var(--locked-dot); }

/* 明るい面：塗り＋枠 */
.badge-fill {
  display: inline-block;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge-fill.done    { background: #e7f0fd; color: #1a5ec4; border-color: #bcd5f5; }
.badge-fill.editing { background: #f4f8e2; color: #6a7d1e; border-color: #d8e39e; }
.badge-fill.notyet  { background: var(--l-notyet-bg); color: var(--l-notyet); border-color: var(--l-notyet-line); }
.badge-fill.locked  { background: var(--l-locked-bg); color: var(--l-locked); border-color: var(--l-locked-line); }

/* ================================================
   4-5 ボタン
   ================================================ */
.btn {
  display: inline-block;
  border-radius: 2px;
  font-size: 13px;
  padding: 8px 18px;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  border: 1px solid transparent;
}
/* 暗い面 */
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #1a5ec4; }
.btn-secondary { background: transparent; color: var(--text-sub); border-color: var(--line-input); }
.btn-secondary:hover { color: var(--text); border-color: var(--accent); }
.btn-disabled { background: transparent; color: var(--text-dim); border-color: var(--line); cursor: default; pointer-events: none; }
/* 明るい面 */
.l-btn-primary { background: var(--l-accent); color: #fff; }
.l-btn-primary:hover { background: #164e9e; }
.l-btn-secondary { background: #fff; color: var(--l-accent); border-color: #bcd5f5; }
.l-btn-secondary:hover { background: #f3f8ff; }
.l-btn-disabled { background: transparent; color: #b6c1cd; border-color: var(--l-line); cursor: default; pointer-events: none; }

/* ================================================
   4-6 入力欄（明るい面）
   ================================================ */
.field-input {
  background: #fff;
  border: 1px solid var(--l-line);
  border-radius: 2px;
  font-size: 16px;
  padding: 7px 10px;
  font-family: inherit;
  color: var(--l-text);
}
.field-input:focus {
  outline: none;
  border-color: var(--l-accent);
  box-shadow: 0 0 0 3px rgba(26, 94, 196, .15);
}
.field-input.error {
  border-color: #c0392b;
  background: #fff8f8;
}

/* ================================================
   4-6 入力欄（暗い面。ログイン・初回登録など全面ダーク画面で使用）
   ================================================ */
.field-input-dark {
  background: var(--bg-base);
  border: 1px solid var(--line-input);
  border-radius: 2px;
  font-size: 16px;
  padding: 7px 10px;
  font-family: inherit;
  color: var(--text);
  width: 100%;
}
.field-input-dark::placeholder { color: var(--text-dim); }
.field-input-dark:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.field-input-dark.invalid {
  border-color: var(--alert);
  background: rgba(224, 65, 58, .1);
}

/* ================================================
   暗い面のカード（ログイン・初回登録の箱）
   ================================================ */
.dark-card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 2px;
}

/* 暗い面のエラー表示 */
.alert-box {
  background: rgba(224, 65, 58, .1);
  border: 1px solid rgba(224, 65, 58, .4);
  color: #ff8b85;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 2px;
  line-height: 1.6;
}

/* ================================================
   6-3 節の見出し（明るい面。入力画面で使用）
   ================================================ */
.section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--l-text);
  letter-spacing: .03em;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--l-accent);
}

/* ================================================
   共通：キーボード操作の焦点を必ず見えるようにする
   ================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-lt);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(104, 164, 255, .25);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================================================
   6. 本文レイアウト（左の目次・保存状態・ボタン＋区画カード＋表組みの行）
   入力画面で使う。目次・カード見出し・入力済み数は js/form-layout.js が作る。
   各画面の <style> にある .statusBar / label / .wrap より優先させるため、
   セレクタは .fl-layout などで絞って詳細度を上げている
   ================================================ */
.wrap.fl-wrap { max-width: 980px; }

.fl-layout {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
.fl-main { min-width: 0; }
.fl-lead { font-size: 13px; color: var(--l-text-sub); line-height: 1.8; margin: 0 0 14px; }

/* ---- 左の列：目次・保存状態・ボタン（画面を下に送っても付いてくる） ---- */
.fl-side {
  position: sticky;
  top: 12px;
  background: var(--l-panel);
  border: 1px solid var(--l-line);
  border-radius: 10px;
  padding: 12px;
}
.fl-side-title { font-size: 11px; color: var(--l-text-sub); margin: 0 0 6px 4px; }
.fl-nav { display: flex; flex-direction: column; gap: 2px; }
.fl-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--l-text);
  text-decoration: none;
}
.fl-nav a:hover { background: #f2f6fc; }
.fl-nav .fl-num {
  width: 18px; height: 18px; border-radius: 50%;
  background: #e6eef9; color: var(--l-accent);
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fl-nav .fl-name { min-width: 0; }
.fl-nav .fl-count { margin-left: auto; font-size: 11px; color: var(--l-text-sub); }
.fl-nav a.is-current { background: #e6eef9; color: var(--l-accent); font-weight: 700; }
.fl-nav a.is-done .fl-num { background: #4cc38a; color: #fff; }
.fl-nav a.is-empty { color: #99a3ae; }
.fl-nav a.has-error .fl-num { background: #c0392b; color: #fff; }

/* 保存状態（各画面の #statusBar をそのまま左の列に置き、明るい面用の色に直す） */
.fl-layout .fl-side .statusBar {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  margin: 10px 0 0;
  padding: 10px 4px 0;
  background: transparent;
  border: none;
  border-top: 1px solid var(--l-line);
  border-radius: 0;
  font-size: 12px;
}
.fl-layout .fl-side .statusBar .time,
.fl-layout .fl-side .statusBar .count { flex-basis: 100%; font-size: 11px; color: var(--l-text-sub); margin-left: 17px; }
.fl-layout .fl-side .statusBar.notyet .dot  { background: var(--l-notyet); }
.fl-layout .fl-side .statusBar.notyet .label { color: var(--l-notyet); }
.fl-layout .fl-side .statusBar.dirty .dot   { background: #c0392b; }
.fl-layout .fl-side .statusBar.dirty .label { color: #c0392b; }
.fl-layout .fl-side .statusBar.editing .dot   { background: #9bb31a; }
.fl-layout .fl-side .statusBar.editing .label { color: #6a7d10; }
.fl-layout .fl-side .statusBar.done .dot   { background: var(--l-accent); }
.fl-layout .fl-side .statusBar.done .label { color: var(--l-accent); }

.fl-actions { display: grid; gap: 8px; margin-top: 12px; }
/* 一時保存・提出ボタン（区画カード・バッジと同じ角の丸い形）。
   保存中に各画面の JS がボタンの文字を textContent で書き換えるため、
   アイコンは要素ではなく ::before（CSS の mask）で付けている */
.fl-layout .fl-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 11px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  cursor: pointer;
  transition: filter .15s, background .15s;
}
.fl-layout .fl-actions button::before {
  content: "";
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: var(--fl-btn-icon) no-repeat center / contain;
          mask: var(--fl-btn-icon) no-repeat center / contain;
}
.fl-layout .fl-actions .l-btn-primary {
  background: linear-gradient(135deg, var(--l-accent), #3480f5);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(26, 94, 196, .3);
  --fl-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2 15 22l-4-9-9-4 20-7z'/%3E%3C/svg%3E");
}
.fl-layout .fl-actions .l-btn-primary:hover { filter: brightness(1.08); }
.fl-layout .fl-actions .l-btn-secondary {
  background: #fff;
  color: var(--l-accent);
  border: 1.5px solid var(--l-accent);
  --fl-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/%3E%3Cpath d='M17 21v-8H7v8M7 3v5h8'/%3E%3C/svg%3E");
}
.fl-layout .fl-actions .l-btn-secondary:hover { background: #f3f8ff; }
.fl-layout .fl-actions button:disabled { opacity: .5; cursor: default; pointer-events: none; }

/* ---- 区画カード ---- */
.fl-card {
  background: var(--l-panel);
  border: 1px solid var(--l-line);
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(11, 29, 48, .05);
  scroll-margin-top: 12px;
}
/* カードの見出しは、ダッシュボードのセクション見出し（.hub-card-head）と同じ青いグラデーションの帯 */
.fl-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--l-accent), #3480f5);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
}
.fl-card-head .fl-num {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(255, 255, 255, .22); color: #fff;
  font-size: 11px; letter-spacing: 0;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fl-badge { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: 0; padding: 2px 10px; border-radius: 10px; }
.fl-badge.is-done     { background: #e3f5ec; color: #2a7a4f; }
.fl-badge.is-todo     { background: #fff3dc; color: #a35a00; }
.fl-badge.is-optional { background: #f0f0f0; color: #8a8a8a; }

/* カード内の小見出し帯（個人戦の「監督」など） */
.fl-sub {
  background: #eef2f7;
  color: #1a3a66;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 6px 18px;
  border-bottom: 1px solid var(--l-line);
}

/* ---- 表の1行（左：項目名／右：入力欄） ---- */
/* 項目名・入力欄とも行の上下中央に置く。項目名の列の背景色と区切り線は、
   項目名のマスではなく行に塗る（マスを中央に寄せても背景が途切れないように） */
.fl-row {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  border-bottom: 1px solid #e3e8ee;
  background: linear-gradient(to right, #fafbfc 0, #fafbfc 189px, #e3e8ee 189px, #e3e8ee 190px, transparent 190px);
}
.fl-row:last-child { border-bottom: none; }
:is(.fl-layout, .fl-onecol) .fl-label {
  display: block;
  margin: 0;
  padding: 11px 16px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--l-text);
}
.fl-req { color: #c0392b; margin-left: 4px; font-weight: 700; }
.fl-value { padding: 7px 16px; min-width: 0; }
:is(.fl-layout, .fl-onecol) .fl-value .hint { margin: 6px 0 0; }
.fl-row.is-invalid { background: linear-gradient(to right, #fff6f6 0, #fff6f6 189px, #e3e8ee 189px, #e3e8ee 190px, transparent 190px); }
.fl-row.is-invalid .fl-label { color: #c0392b; }

/* カード内の右寄せの小さな操作行（選手カードの「オーダー表示名」「この選手を消去」など） */
.fl-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 16px;
  background: #f7f9fc;
  border-bottom: 1px solid #e3e8ee;
  font-size: 12px;
  color: var(--l-text-sub);
}
.fl-tools > :first-child { margin-right: auto; }
/* カード内の注意書き（オーダー枠の決まり、選手登録前の案内など） */
.fl-note { padding: 12px 16px; font-size: 12.5px; line-height: 1.8; color: var(--l-text-sub); }
.fl-main > .fl-note {
  background: var(--l-panel);
  border: 1px solid var(--l-line);
  border-left: 4px solid var(--l-accent);
  border-radius: 8px;
  margin-bottom: 16px;
}
/* カード内のエラー文・警告の入れ物（空のときは高さ0。中身が出たときだけ余白が付く） */
.fl-msgs { padding: 0 16px; }
.fl-msgs .fieldError, .fl-msgs .fieldWarn { margin: 10px 0; }
/* 項目名の下に小さく出す補足（生年月日の横の年齢など） */
.fl-label .age { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 400; color: var(--l-accent); }
/* 表の行の中のチェック欄は、各画面の縦並び用の余白を消して項目名と高さをそろえる */
.fl-value > .checkLine { margin: 4px 0 0; }
/* 1行に並べる小さな入力欄（選手カードの 姓・名・学年・段位・生年月日 など）。
   小さな項目名（label）は欄の左に置く。.fl-name は 姓/セイ・名/メイ の欄の位置を上下の行でそろえる */
.fl-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.fl-inline .fl-f { display: inline-flex; align-items: center; gap: 7px; }
:is(.fl-layout, .fl-onecol) .fl-inline .fl-f > label {
  display: inline-block;
  margin: 0;
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--l-text-sub);
  white-space: nowrap;
}
.fl-layout .fl-inline.fl-name .fl-f > label { width: 2.2em; }
.fl-layout .fl-inline.fl-name input { width: 180px; }
:is(.fl-layout, .fl-onecol) .fl-inline select { width: auto; padding: 4px 4px; font-size: 15px; }
.fl-inline .fl-birth { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--l-text-sub); }
/* 入力欄を行の上下の真ん中に置く（項目名が2行になる行など） */
.fl-row.is-middle .fl-value { display: flex; flex-direction: column; justify-content: center; }
/* 補助的なチェック（「基本情報で登録した引率責任者と同じ」など）は文字を小さく */
.fl-layout .checkLine.fl-small label { font-size: 12px; color: var(--l-text-sub); }
/* カード見出しの帯の右側に置く補助チェック（団体戦の「引率責任者と同じ」）と、
   小見出しの帯の右側に置く補助チェック（個人戦の「選手1の監督」の右） */
.fl-card-head .fl-head-extra { margin-left: 10px; letter-spacing: 0; font-weight: 400; }
.fl-layout .fl-card-head .checkLine.fl-small label { color: #fff; }
.fl-card-head .checkLine, .fl-sub .checkLine { margin: 0; }
.fl-sub.fl-sub-flex { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fl-sub .checkLine { letter-spacing: 0; font-weight: 400; }
/* 入力欄の高さ（全画面共通）。上下の余白を詰めて約30pxに。
   文字の大きさは16pxのまま（iPhoneは16px未満だと入力時に画面が拡大されるため） */
:is(.fl-layout, .fl-onecol) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), textarea) {
  line-height: 1.3;
  padding-top: 4px;
  padding-bottom: 4px;
}
:is(.fl-layout, .fl-onecol) select:not(.fl-inline select) { padding-top: 4px; padding-bottom: 4px; }
/* 目次の番号を付けないカード見出し（一覧画面） */
.fl-card[data-head="plain"] > .fl-card-head { padding: 12px 18px; }

/* ---- 一覧・確認画面：左の列なしの中央1列 ---- */
.fl-onecol { max-width: 760px; margin: 0 auto; }
.fl-list-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid #e3e8ee;
}
.fl-list-row:last-child { border-bottom: none; }
.fl-list-main { flex: 1; min-width: 0; }
.fl-list-title { font-size: 14.5px; font-weight: 700; color: var(--l-text); }
.fl-list-desc { font-size: 12px; color: var(--l-text-sub); line-height: 1.7; margin-top: 3px; }
.fl-list-side { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* ---- スマホ：目次は上に横並び、表は縦並び、ボタンは画面下に固定 ---- */
@media (max-width: 860px) {
  .fl-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .fl-side { position: static; padding: 8px; }
  .fl-side-title { display: none; }
  .fl-nav { flex-direction: row; overflow-x: auto; gap: 4px; }
  .fl-nav a { white-space: nowrap; flex-shrink: 0; }
  .fl-nav .fl-count { display: none; }
  .fl-layout .fl-side .statusBar { margin-top: 6px; padding-top: 6px; }
  .fl-actions {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 20;
    margin: 0;
    grid-template-columns: 1fr 1fr;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--l-panel);
    border-top: 1px solid var(--l-line);
    box-shadow: 0 -4px 12px rgba(11, 29, 48, .08);
  }
  body.has-fl-actions { padding-bottom: 72px; }
  .fl-row { grid-template-columns: minmax(0, 1fr); }
  .fl-row { background: none; }
  .fl-row.is-invalid { background: #fff6f6; }
  :is(.fl-layout, .fl-onecol) .fl-label { padding: 12px 14px 2px; }
  .fl-value { padding: 4px 14px 12px; }
  .fl-card-head { padding: 10px 14px; }
  .fl-list-row { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
  .fl-list-side { justify-content: flex-end; }
}