/* ============================================================
   共通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;
}
/* KIS ONE のロゴ（白抜き。紺色のヘッダー用）
   画像は 552×140。中身は2段に分かれていて、上から
     ロゴ本体               … 10〜93px
     POWERED BY KENDOTECH  … 113〜125px
   ヘッダーの高さではタグラインがつぶれて読めないので、本体だけを出す。
   枠で切り、画像を上にずらして余白も詰める（フッターは全体を出す）。
     画像の高さ   = 見せたい高さ × 140/84
     上にずらす量 = 画像の高さ × 10/140
   枠は display:block にすること。flex の中央ぞろえにすると、枠より高い画像が
   上下にはみ出して、ロゴの上が切れてしまう。 */
.app-header .brand { display: block; overflow: hidden; height: 24px; }
.app-header .brand img { display: block; height: 40px; width: auto; margin-top: -2.9px; }
.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); }
/* 常任委員のうち、権限のある人にだけ出る「管理コンソール」。
   運営側の入口だと分かるように、ほんの少しだけ特別な見た目にする
   （バッジほど目立たせない。持ち主の指示 2026-10-06） */
.app-header nav a.admin-link {
  color: #e3c988;
  border: 1px solid rgba(214, 177, 92, .42);
  border-radius: 14px;
  padding: 4px 11px;
}
.app-header nav a.admin-link:hover {
  color: #f6e6bd;
  border-color: rgba(214, 177, 92, .8);
  background: rgba(214, 177, 92, .10);
}
.app-header nav a.admin-link.active {
  color: #f6e6bd;
  border-color: rgba(214, 177, 92, .9);
  background: rgba(214, 177, 92, .15);
}
/* 学校名＋氏名（ヘッダーの右寄り）。長い学校名は末尾を「…」で省略して、
   メニューを押しつぶさないようにする */
.app-header .header-school-code {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.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; }

/* 狭い画面（スマートフォン・小さなタブレット）では、上部メニューを2段にする。
   1段目：学校名＋氏名 … ログアウト
   2段目：メニュー（横幅をすべて使う。入り切らなければ横に動かせる）

   1列のままだと、幅375px（iPhone）でメニューが押しつぶされ
   「管理」が「管」に切れて学校名と重なっていた（2026-10-03 のチェック）。
   先生はスマートフォンで押印済み申込書の写真を登録するため、
   スマートフォンでの見え方を優先する。

   切り替える幅は860px。640pxで試したところ、タブレットの幅（641〜860px）で
   1列に戻ったとたん、学校名と氏名に場所を取られてメニューが入り切らなかった。 */
@media (max-width: 860px) {
  .app-header {
    flex-wrap: wrap;
    height: auto;
    min-height: 0;
    padding: 8px 12px;
    column-gap: 12px;
    row-gap: 6px;
  }
  /* ロゴは狭い画面でも出す（どの仕組みの画面かが分かるように）。少し小さくする */
  .app-header .brand { order: 0; height: 18px; }
  .app-header .brand img { height: 30px; margin-top: -2px; }
  .app-header .header-school-code { order: 1; flex: 1 1 auto; text-align: right; }
  .app-header .logout-btn { order: 2; padding: 5px 12px; }
  .app-header .helpdesk-btn { order: 2; }
  .app-header nav {
    order: 3;
    flex: 1 1 100%;
    gap: 18px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .app-header nav::-webkit-scrollbar { display: none; }
  .app-header nav a { font-size: 13.5px; padding: 2px 0; }
  /* 狭い画面では、アイコンを隠して文字を残す。
     全国高体連エディションは逆（文字を隠してアイコンだけ）だが、千葉県版は
     メニューが2段目で横幅をすべて使えるうえ、「個人データ」と「学校データ」の
     ようにアイコンだけでは見分けにくい項目があるため、文字を優先する。 */
  .app-header nav a svg { display: none; }
  .app-header .helpdesk-btn span { display: none; }
}
/* とくに狭い機種（iPhone SE など幅320px）では、メニューの間隔をさらに詰める */
@media (max-width: 380px) {
  .app-header { column-gap: 8px; padding: 8px 10px; }
  .app-header nav { gap: 13px; }
  .app-header .brand { height: 16px; }
  .app-header .brand img { height: 27px; margin-top: -2px; }
}

/* ================================================
   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);
  /* 上下は詰める（1画面に多く入るように。持ち主の指示 2026-10-05） */
  padding: 12px 20px 10px;
}
.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: 10px;
  padding-top: 9px;
  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; }
/* 常任委員（＝運営する側）の人にだけ、パンくずの行の右端に出す印。
   出場校の先生には出ない。役職は「常任委員名簿」に載っているかどうかで決まる
   （持ち主の指示 2026-10-06） */
.officer-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #3a2c08;
  background: linear-gradient(135deg, #f0d38a, #c9a227);
  border: 1px solid #b5901d;
  border-radius: 20px;
  padding: 5px 13px 5px 10px;
}
.officer-badge svg { display: block; flex-shrink: 0; }
/* 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;
  /* 左の名前・所属は、高さを固定したウィジェットの中央にそろえる
     （上に詰まって見える、という持ち主の指摘 2026-10-06） */
  align-items: center;
  justify-content: space-between;
  gap: 20px 28px;
  flex-wrap: wrap;
  margin-top: 0;
}
/* ウィジェットは常に横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;
  /* どの画面でも見出し帯の高さを同じにするため、ウィジェットの高さは固定する
     （持ち主の指示 2026-10-06）。中身はこの高さに収める */
  height: 124px;
  overflow: hidden;
}
@media (max-width: 860px) {
  .head-widgets .stat-tile,
  .head-widgets .players-card { height: auto; min-height: 92px; }
}
/* ウィジェットの高さは自動的に揃う（同じ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: 3px 8px; margin-bottom: 4px; font-size: 11.5px; color: var(--text-sub); }
.widget-head svg { display: block; }
.stat-tile { background: var(--bg-panel); border-radius: 10px; padding: 11px 14px; }
.stat-value-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
/* ウィジェットは、数字の高さと下の文字の高さを3枚でそろえる。
   中身の多い少ない（メーターの有無・文字の長さ）で位置がずれて見えるため
   （持ち主の指摘 2026-10-05）。数字は上そろえ、補足は下そろえにする */
/* 見出し帯のウィジェットは、まわりの余白を詰めて中身を大きく見せる
   （持ち主の指示 2026-10-06）。1行目に「大会名＋何の数字か」を横に並べ、
   数字はウィジェットの真ん中に大きく置く */
.head-widgets .stat-tile,
.head-widgets .players-card { padding: 9px 12px; }
.head-widgets .widget-head { margin-bottom: 0; gap: 2px 7px; }
.widget-head .w-what { color: #fff; font-weight: 600; font-size: 12px; }
.head-widgets .stat-value-wrap { justify-content: center; }
.head-widgets .stat-tile .stat-value { min-height: 0; display: flex; align-items: center; justify-content: center; font-size: 34px; }
.head-widgets .stat-tile .stat-value small { font-size: 15px; }
.head-widgets .stat-tile .stat-value.is-text { font-size: 18px; line-height: 1.3; }
.head-widgets .stat-tile .stat-sub { margin-top: 6px; padding-top: 0; font-size: 12px; }
.stat-tile .stat-value { font-size: 21px; 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: 15px; }
.stat-tile .stat-sub { font-size: 11px; line-height: 1.5; 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; }

/* 進み具合のリング（円グラフ）。全国高体連エディションと同じ見た目。
   塗りは画面側から
     ring.style.background = `conic-gradient(var(--accent) 〇%, var(--line) 0)`
   のように入れる */
.stat-ring-tile .widget-head { margin-bottom: 4px; }
.ring-wrap { display: flex; justify-content: center; }
.ring {
  width: 100%; max-width: 58px; aspect-ratio: 1 / 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ring-inner {
  width: 76%; height: 76%; border-radius: 50%;
  background: var(--bg-panel);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.ring-pct { font-size: 14px; font-weight: 700; color: #fff; line-height: 1; }
.ring-sub { font-size: 7.5px; color: var(--text-muted); line-height: 1.3; text-align: center; }
/* 見出し帯では、円グラフをウィジェットの高さいっぱいまで大きくする */
.head-widgets .stat-ring-tile { display: flex; flex-direction: column; }
.head-widgets .ring-wrap { flex: 1; align-items: center; min-height: 0; }
.head-widgets .ring { width: auto; height: 100%; max-width: none; max-height: 86px; }
.head-widgets .ring-pct { font-size: 21px; }
.head-widgets .ring-sub { font-size: 9px; }

/* 選手登録のウィジェット：種目ごとの人数を並べる。
   土台（背景・角丸・縦並び）が無いと中身が重なるので、ここで定義する */
.players-card {
  background: var(--bg-panel);
  border-radius: 10px;
  padding: 15px 16px;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
}
.players-hint-bottom { margin-top: auto; padding-top: 10px; font-size: 10.5px; color: var(--text-dim); text-align: right; }
.players-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.players-grid > div { display: flex; flex-direction: column; align-items: flex-end; }
.players-label { font-size: 10px; color: var(--text-muted); white-space: nowrap; margin-bottom: 3px; }
.players-count { font-size: 16px; font-weight: 600; color: #fff; white-space: nowrap; }
.players-count.zero { color: var(--text-dim); }
.players-count small { font-size: 9.5px; font-weight: 400; color: var(--text-muted); }
.head-widgets .players-grid {
  grid-template-columns: repeat(2, max-content);
  gap: 2px 22px; margin: auto 0; justify-content: center;
}
.head-widgets .players-grid > div { align-items: center; }
.head-widgets .players-label { font-size: 12px; line-height: 1.3; color: var(--accent-lt); margin-bottom: 2px; }
.head-widgets .players-count { font-size: 30px; line-height: 1; }
.head-widgets .players-count small { font-size: 12px; }
/* 3種目以上あるときは2段になるので、収まるように少し小さくする */
.head-widgets .players-grid.many { gap: 0 18px; }
.head-widgets .players-grid.many .players-label { font-size: 11px; }
.head-widgets .players-grid.many .players-count { font-size: 20px; }
.head-widgets .players-hint-bottom { padding-top: 4px; font-size: 11px; }
.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; }
}

/* ================================================
   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);
}

/* ================================================
   共通：キーボード操作の焦点を必ず見えるようにする
   ================================================ */
/* 入力欄は、青いふちと**やわらかい光**で知らせる。
   以前は太い線（2px）＋広い光（4px）で、枠が分厚く見えて使いにくかった
   （持ち主の指示 2026-10-05） */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--l-accent);
  box-shadow: 0 0 0 3px rgba(26, 94, 196, .18);
}

/* リンク・ボタンなど、ふちの無いものは細い線で囲む（キーボード操作で迷わないように） */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-lt);
  outline-offset: 2px;
}

/* ================================================
   共通：入力欄の見た目をそろえる（高さ・ふち・文字の大きさ）
   画面ごとにばらついていたので、ここで土台をそろえる。
   上下の余白は控えめにして、1画面に多く表示できるようにする
   （持ち主の指示 2026-10-05）
   ================================================ */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="tel"], input[type="search"], input[type="date"], input[type="time"],
select, textarea {
  box-sizing: border-box;
  min-height: 34px;
  font-family: inherit;
  line-height: 1.4;
}
textarea { min-height: 64px; }

/* スマホは、文字が小さいと勝手に拡大されてしまうので 16px 以上にする */
@media (max-width: 700px) {
  input[type="text"], input[type="email"], input[type="password"], input[type="number"],
  input[type="tel"], input[type="search"], input[type="date"], input[type="time"],
  select, textarea {
    font-size: 16px;
    min-height: 40px;
  }
}

@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: 12px;
  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: 9px 16px;
  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; }
/* display:grid があると hidden が効かないので、ここで打ち消す */
.fl-row[hidden] { display: 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: 10px 16px;
  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; }
}

/* ================================================
   7. 入口カード（HOME などの「まとまり」）
   全国高体連エディションの hub-card と同じ見た目。
   どの画面でも同じ部品を使い、ボタンの大きさがばらつかないようにする
   （持ち主の指摘 2026-10-03。手本は docs/画面の作り_インターハイを手本に.md）
   ================================================ */

/* 見出し帯の一番上に出す小さな文字（専門部名・年度など） */
.page-head-top { font-size: 12.5px; color: var(--text-muted); letter-spacing: .04em; margin-bottom: 4px; }

/* ---- 入口カード ---- */
.hub-card {
  display: block;
  background: var(--l-panel);
  border: 1px solid var(--l-line);
  border-radius: 8px;
  margin-bottom: 18px;
  overflow: hidden;
}
.hub-card-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 22px;
  background: linear-gradient(135deg, var(--l-accent), #3480f5);
}
.hub-card .icon-wrap {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hub-card .hub-title { font-size: 16px; font-weight: 700; color: #fff; }
.hub-card-body { padding: 14px 18px 16px; }
.hub-card .hub-desc { font-size: 13px; color: var(--l-text-sub); line-height: 1.8; margin: 0 0 14px; }
.hub-card .hub-desc:last-child { margin-bottom: 0; }
/* 知らせとボタンは、必ず横に並べる（縦に折り返すと行が高くなるため）。
   文字が長いときは、ボタンを押しのけずに末尾を「…」で省略する */
.hub-card .hub-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: nowrap;
  padding-top: 14px;
  border-top: 1px solid var(--l-line);
}
.hub-card .hub-stat {
  font-size: 13px; color: var(--l-text-sub); line-height: 1.8;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hub-card .hub-stat b { color: var(--l-accent); font-size: 15px; }
/* まだ確認していない・未読など、気づいてほしいもの */
.hub-card .hub-stat .new { color: #c0392b; font-weight: 700; }

/* ---- 行き先ボタン。min-width で大きさをそろえる ---- */
.go {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 18px;
  min-width: 142px;
  background: var(--l-accent);
  color: #fff;
  text-decoration: none;
  border-radius: 2px;
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid transparent;
  font-family: inherit;
  cursor: pointer;
}
.go svg { flex-shrink: 0; }
.go:hover { background: #164e9e; }
.go.disabled {
  background: transparent;
  color: #b6c1cd;
  border-color: var(--l-line);
  cursor: default;
  pointer-events: none;
}

/* ---- カードの中の一覧（大会の一覧など）。行の高さをそろえる ---- */
.tlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--l-line); }
.tlist li { border-bottom: 1px solid var(--l-line); }
.tlist .trow {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 2px;
  min-height: 72px;
}
.tlist .tmain { flex: 1; min-width: 0; }
.tlist .tname {
  font-size: 15px; font-weight: 700;
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
}
.tlist .tsub { font-size: 12.5px; color: var(--l-text-sub); margin-top: 5px; line-height: 1.7; }
.tlist .tsub .dl { color: #c0392b; font-weight: 700; }
/* 大会の一覧は、どの大会も同じ高さにする（持ち主の指摘 2026-10-03） */
.tlist.tournaments .trow { min-height: 84px; }

/* ---- 状態の札（大会の受付状況など） ---- */
.tag {
  font-size: 11px; border-radius: 10px; padding: 2px 9px;
  border: 1px solid; white-space: nowrap; font-weight: 400;
}
/* 行の先頭に置くときは幅をそろえて、うしろの名前の左端を合わせる */
.tag.lead { min-width: 76px; text-align: center; flex-shrink: 0; }
.tag.open  { background: #e7f0fd; border-color: #bcd5f5; color: var(--l-accent); font-weight: 700; }
.tag.soon  { background: var(--l-notyet-bg); border-color: var(--l-notyet-line); color: var(--l-notyet); }
.tag.ended { background: var(--l-locked-bg); border-color: var(--l-locked-line); color: var(--l-locked); }

/* ---- アカウント権限のバッジ ---- */
/* 暗い面（見出し帯の中） */
.role-badge {
  display: inline-block; font-size: 11.5px; padding: 3px 11px; border-radius: 10px;
  background: var(--accent-bg); color: var(--accent-lt); border: 1px solid var(--line-input);
  white-space: nowrap;
}
.role-badge.main { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .3); }
/* 明るい面（カードの中） */
.tlist .role-badge { background: #e7f0fd; color: var(--l-accent); border-color: #bcd5f5; font-weight: 400; }
.tlist .role-badge.main { background: var(--l-accent); color: #fff; border-color: var(--l-accent); }

/* ---- お知らせの小さな一覧（入口カードの中） ----
   全国高体連エディションと同じ並び。
     未読の点 ／ 日付 ／「重要」の欄 ／ 見出し ／ 既読・未読
   「重要」の欄は札があってもなくても同じ幅を取るので、見出しの左端が
   そろう（持ち主の指摘 2026-10-03）。
   一番下の行は線を引かない（下の区切り線と二重になるため）。 */
.notice-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--l-line); }
.notice-list li { border-bottom: 1px solid var(--l-line); }
.notice-list li:last-child { border-bottom: none; }
.notice-list a {
  display: flex; align-items: center; gap: 8px; padding: 10px 2px;
  color: var(--l-text-sub); text-decoration: none; font-size: 13px; line-height: 1.5;
}
.notice-list a:hover { color: var(--l-accent); }
.notice-list li.important a { color: var(--l-text); font-weight: 600; }
.notice-list li.unread a { color: var(--l-text); font-weight: 600; }
.notice-unread-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.notice-unread-dot.is-unread { background: var(--l-accent); }
.notice-date { flex-shrink: 0; width: 52px; font-size: 11px; color: var(--l-text-sub); }
/* 札は「重要」と「区分（全体・地区・個別）」の2つ並ぶことがある。
   幅を決め打ちにすると見出しに重なるので、中身に合わせて伸ばす（2026-10-06） */
.notice-badge-slot { flex-shrink: 0; display: flex; gap: 4px; align-items: center; }
.notice-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-important-badge {
  font-size: 10.5px; font-weight: bold; color: #c0392b; letter-spacing: .04em; flex-shrink: 0;
}
.notice-important-badge::before {
  content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: #c0392b; margin-right: 4px; vertical-align: middle;
}
.notice-read-state { flex-shrink: 0; font-size: 10.5px; color: var(--l-text-sub); }
.notice-list li.unread .notice-read-state { color: var(--l-accent); font-weight: 600; }
.notice-empty { font-size: 13px; color: var(--l-text-sub); }

/* ---- 狭い画面：ボタンは横いっぱいにそろえる ---- */
@media (max-width: 560px) {
  .tlist .trow { flex-wrap: wrap; min-height: 0; padding-left: 0; padding-right: 0; }
  .tlist.tournaments .trow { min-height: 0; }
  .go { width: 100%; }
  .hub-card .hub-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .hub-card-head { padding: 9px 16px; }
  .hub-card-body { padding: 16px; }
}