/* 指摘41(2026-08-20): このファイル内の `transition: .Ns;`(全プロパティ対象)は、
   ホバー時の色・影・移動などの変化を滑らかにするためのものだが、`outline`
   (指摘34で新設したフォーカスリング)にもそのまま適用されてしまい、
   キーボードでフォーカスした瞬間に輪郭が即座に出ず、既存の色(灰色等)から
   紺色へ約200〜300msかけて遷移して見える副作用があった(発見の経緯:
   reports/20260820-instr37-full-report.md「(5)指摘34の再確認」)。
   `transition: .Ns, outline 0s;` の形にすることで、outlineだけ即座に反映され、
   他のプロパティの遷移(ホバー効果等)は従来どおり残る(CSSのtransitionは
   カンマ区切りで複数指定でき、同じプロパティに複数の指定がある場合は後に
   書いた方が有効になる仕様を利用している)。 */
/* ==========================================================================
   gokakusha(合格者情報)専用スタイル。sub-page.css を読み込んだ後に追加で読み込む。
   設計: design/skioita-pages-concept-v1.html(合格者部分)
   実装: reports/20260815-gokakusha-impl.md(2026-08-15、第3段階)
   ========================================================================== */

/* ---------- アーカイブ: 絞り込みバー ---------- */
.sao-sub-gokakusha-filter { background: #fff; border: 0; border-radius: var(--sao-radius-card); box-shadow: var(--sao-shadow-card); padding: 24px 24px; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }
.sao-sub-gokakusha-fform { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.sao-sub-gokakusha-fitem { display: flex; align-items: center; gap: 10px; }
.sao-sub-gokakusha-fitem label { font-size: 16px; font-weight: 700; color: var(--sao-sub-muted); letter-spacing: .06em; white-space: nowrap; }
/* 指摘144■2(2026-08-31): 見本design/skioita-list-article-v1.html の.fchipと
   並べても浮かないよう配色・寸法を揃えた。操作方法は変更していない、CSSのみ。 */
.sao-sub-gokakusha-fitem select { appearance: none; border: 1px solid var(--sao-sub-line); border-radius: 4px; background: #fff; padding: 7px 32px 7px 15px; font-size: 16px; font-weight: 700; color: var(--sao-sub-muted); font-family: inherit; cursor: pointer; min-width: 168px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%230B5A9E' stroke-width='2' fill='none'/></svg>"); background-repeat: no-repeat; background-position: right 13px center; transition: color .2s, border-color .2s, outline 0s; }
.sao-sub-gokakusha-fitem select:hover { border-color: var(--sao-sub-sky); color: var(--sao-sub-blue); }
.sao-sub-gokakusha-count { margin-left: auto; font-size: 16px; color: var(--sao-sub-muted); }
.sao-sub-gokakusha-count b { color: var(--sao-sub-navy); font-size: 18px; font-weight: 700; margin: 0 2px; }

/* ---------- アーカイブ: 年度グループ・行 ---------- */
.sao-sub-gokakusha-yearhead { display: flex; align-items: baseline; gap: 13px; margin: 32px 0 12px; }
.sao-sub-gokakusha-yearhead:first-child { margin-top: 0; }
.sao-sub-gokakusha-yearhead b { font-size: 19px; letter-spacing: .02em; }
.sao-sub-gokakusha-yearhead span { font-size: 16px; color: var(--sao-sub-muted); }
.sao-sub-gokakusha-rowlist { display: flex; flex-direction: column; gap: 8px; }
.sao-sub-gokakusha-row { display: grid; grid-template-columns: 184px 1fr 92px auto; align-items: center; gap: 20px; padding: 18px 22px; border: 0; border-radius: var(--sao-radius-row); box-shadow: var(--sao-shadow-row); transition: .22s, outline 0s; background: #fff; text-decoration: none !important; color: inherit; position: relative; }
.sao-sub-gokakusha-rowlist .sao-sub-gokakusha-row:last-child { border-bottom: 0; }
/* 指摘143■1(2026-08-31): 見本design/skioita-list-article-v1.html の.rowに
   合わせ、ホバー時の反応を「面を光らせる」(背景塗り)から「線と矢印だけ」に
   変更した。taikai.css・badge-test.cssと同じ考え方(左端に暖色の縦線)。 */
.sao-sub-gokakusha-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  /* 指摘262■3(2026-09-23): 触れると出る左の縦線を、橙から紺へ。
     連盟のご要望。**新しい色は足していない**（既にある紺 #0A2E4D を使用）。
     --sao-sub-sun / --sao-top-sun の定義そのものは残す（ほかでも使われているため）。 */
  background: var(--sao-sub-navy); transform: scaleY(0); transform-origin: center;
  transition: transform .22s, outline 0s;
}
/* 指摘187■5(2026-09-05): 背景を足して見本の .row:hover に揃える。 */
.sao-sub-gokakusha-row:hover { background: var(--sao-sub-ice); }
.sao-sub-gokakusha-row:hover::before { transform: scaleY(1); }
.sao-sub-gokakusha-row:hover .sao-sub-gokakusha-main b { color: var(--sao-sub-blue); }
.sao-sub-gokakusha-dt { font-size: 16px; color: var(--sao-sub-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sao-sub-gokakusha-main b { display: block; font-weight: 700; font-size: 15.5px; line-height: 1.55; color: var(--sao-sub-ink); transition: color .22s, outline 0s; }
.sao-sub-gokakusha-sub { display: block; font-size: 16px; color: var(--sao-sub-muted); margin-top: 3px; }
.sao-sub-gokakusha-sub i { font-style: normal; color: var(--sao-sub-muted); opacity: .7; margin-right: 4px; }
.sao-sub-gokakusha-num { text-align: right; font-size: 16px; color: var(--sao-sub-muted); white-space: nowrap; }
.sao-sub-gokakusha-num b { color: var(--sao-sub-navy); font-size: 17px; font-weight: 700; margin-right: 2px; }
.sao-sub-gokakusha-arrow { color: var(--sao-sub-blue); font-size: 17px; transition: transform .22s, color .2s, outline 0s; }
/* 指摘263■2-1(2026-09-23): 矢印も紺に。矢印は「→」という**文字**なので
   基準は4.5:1で、橙の実測3.03:1は満たしていなかった(紺なら12.25:1)。
   左の縦線(指摘262■3)と色をそろえる意味もある。連盟の承認済み。 */
.sao-sub-gokakusha-row:hover .sao-sub-gokakusha-arrow { transform: translateX(5px); color: var(--sao-sub-navy); }

/* ---------- 個別ページ ---------- */
.sao-sub-gokakusha-factbox { background: #fff; border: 0; border-radius: var(--sao-radius-card); box-shadow: var(--sao-shadow-card); overflow: hidden; margin-bottom: 32px; }
.sao-sub-gokakusha-factbox dl { display: grid; grid-template-columns: 124px 1fr; margin: 0; }
.sao-sub-gokakusha-factbox dt { background: var(--sao-sub-ice); color: var(--sao-sub-navy); font-weight: 700; font-size: 16px; padding: 16px 24px; border-bottom: 1px solid #fff; margin: 0; }
.sao-sub-gokakusha-factbox dd { padding: 16px 24px; font-size: 15px; border-bottom: 1px solid var(--sao-sub-line); margin: 0; }
.sao-sub-gokakusha-factbox dl > dt:nth-last-of-type(1), .sao-sub-gokakusha-factbox dl > dd:nth-last-of-type(1) { border-bottom: 0; }

/* 合格者名一覧: designの4列固定グリッドではなく、氏名+所属を持つカードを
   auto-fillで自然に折り返す形にした(2026-08-15、ユーザー判断: 1セッションあたり
   平均2〜3名のため4列固定だと間延びする、所属も情報として残す)。
   カード幅(minmax)は、実データで最も長い所属名(2026-08-15確認時点で「九重ジュニア
   レーシングクラブ」16文字、スペース無しの連続文字列)が1行に収まる幅に合わせて
   190pxへ拡大した(2026-08-15、①の調整)。 */
.sao-sub-gokakusha-names { background: #fff; border: 0; border-radius: var(--sao-radius-card); box-shadow: var(--sao-shadow-card); padding: 24px 24px; }
.sao-sub-gokakusha-names h3 { font-size: 15px; color: var(--sao-sub-blue-d); margin: 0 0 14px; padding-bottom: 9px; border-bottom: 1px solid var(--sao-sub-line); }
/* 【2026-10-19 よこしゅんさん】名前が見にくい → 表（名簿）の形。色の帯（枠）をやめ、1人1行を細い線で区切る。
   「名前｜所属」の2列。名前の幅をそろえて、所属の頭が縦にそろうようにする。1回の合格者は多くても10人（Local の全ページで数えた） */
.sao-sub-gokakusha-namegrid { display: grid; grid-template-columns: minmax(0, 1fr); } /* 上の線は見出し（h3）の下線 */
.sao-sub-gokakusha-namecard { padding: 9px 4px; border-bottom: 1px solid var(--sao-sub-line); text-align: left; display: flex; align-items: baseline; gap: 16px; }
.sao-sub-gokakusha-namecard b { display: inline; flex: none; min-width: 8em; white-space: nowrap; font-size: 16px; font-weight: 700; color: var(--sao-sub-navy); }
/* word-break:keep-all で「クラ/ブ」のような文字単位の不自然な折り返しを避け、
   スペースの無い連続した組織名はできるだけ1行で表示する。1行に収まりきらない
   極端に長い名称のときだけoverflow-wrap:break-wordがフォールバックとして働き、
   カードからのはみ出しを防ぐ(CJKテキストの標準的な折り返し手法)。 */
.sao-sub-gokakusha-namecard span { display: inline; flex: 1 1 auto; min-width: 0; font-size: 15px; color: var(--sao-sub-muted); margin-top: 0; overflow-wrap: anywhere; }

/* ---------- サイドバー: 同年度の他のセッション ---------- */
.sao-sub-gokakusha-snav { background: #fff; border: 0; border-radius: var(--sao-radius-card); box-shadow: var(--sao-shadow-card); overflow: hidden; margin-bottom: 20px; }
.sao-sub-gokakusha-snav b { display: block; background: var(--sao-sub-navy); color: #fff; padding: 14px 18px; font-size: 16px; margin: 0; }
.sao-sub-gokakusha-snav a { display: flex; justify-content: space-between; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--sao-sub-line); font-size: 16px; transition: .2s, outline 0s; line-height: 1.5; text-decoration: none !important; color: var(--sao-sub-ink); }
.sao-sub-gokakusha-snav a:last-child { border-bottom: 0; }
.sao-sub-gokakusha-snav a:hover { background: var(--sao-sub-ice); color: var(--sao-sub-blue); }
.sao-sub-gokakusha-snav a.is-cur { background: var(--sao-sub-ice); color: var(--sao-sub-blue); font-weight: 700; box-shadow: inset 3px 0 0 var(--sao-sub-blue); }
.sao-sub-gokakusha-snav a i { font-style: normal; color: var(--sao-sub-muted); font-size: 16px; white-space: nowrap; }

@media (max-width: 900px) {
  .sao-sub-gokakusha-row { grid-template-columns: 1fr auto; gap: 10px; }
  .sao-sub-gokakusha-dt { display: none; }
  .sao-sub-gokakusha-arrow { display: none; }
  .sao-sub-gokakusha-count { margin-left: 0; width: 100%; }
  .sao-sub-gokakusha-factbox dl { grid-template-columns: 100px 1fr; }
}

/* 【2026-10-18 よこしゅんさん】スマホでは名前と所属が上下に分かれて読みにくい → 1人1行（名前の右に所属）。
   名前は折り返さない。所属が長いときだけ、所属の中で折り返す */
@media (max-width: 600px) {
  /* 1人1行は、2026-10-19 にパソコンと共通（上）にした。スマホは名前の幅をそろえず、少し詰める */
  .sao-sub-gokakusha-namecard { gap: 10px; }
  .sao-sub-gokakusha-namecard b { min-width: 0; }
  .sao-sub-gokakusha-namecard span { font-size: 14px; }
}
