/* 指摘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は
   カンマ区切りで複数指定でき、同じプロパティに複数の指定がある場合は後に
   書いた方が有効になる仕様を利用している)。 */
/* ==========================================================================
   badge_test(バッジテスト合格者)専用スタイル。sub-page.css を読み込んだ後に
   追加で読み込む。taikai.css(絞り込みバー・チップ)・gokakusha.css(行・事実表・
   名前グリッド)の配色・角丸・ホバー感をそのまま踏襲する(第5段階5-C、2026-08-19)。
   ========================================================================== */

/* ---------- アーカイブ: 絞り込みバー(taikaiの骨格+library風の検索欄) ---------- */
/* 段階5-D: 2029(バッジテストを受けてみよう！)への相互リンク(フィルターバーの上) */
.sao-sub-badge-crosslink { margin: 0 0 14px; }

.sao-sub-badge-filter { background: #fff; border: 0; border-radius: var(--sao-radius-card); box-shadow: var(--sao-shadow-card); padding: 24px 24px; display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 22px; }
.sao-sub-badge-fitem label { display: block; font-size: 16px; font-weight: 700; color: var(--sao-sub-muted); letter-spacing: .06em; white-space: nowrap; margin-bottom: 6px; }
/* 指摘144■2(2026-08-31): 見本design/skioita-list-article-v1.html の.fchipと
   並べても浮かないよう配色・寸法を揃えた。操作方法は変更していない、CSSのみ。 */
.sao-sub-badge-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-badge-fitem select:hover { border-color: var(--sao-sub-sky); color: var(--sao-sub-blue); }
.sao-sub-badge-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.sao-sub-badge-chip { border: 1.5px solid var(--sao-sub-line); border-radius: var(--sao-radius-pill); padding: 7px 15px; font-size: 16px; font-weight: 700; color: var(--sao-sub-muted); cursor: pointer; transition: .22s, outline 0s; background: #fff; }
.sao-sub-badge-chip:hover { border-color: var(--sao-sub-sky); color: var(--sao-sub-blue); }
/* 指摘143■1(2026-08-31): 見本design/skioita-list-article-v1.html の.fchipに
   合わせ、選択中の塗りを--sao-sub-blueから--sao-sub-navy(濃紺)へ変更。 */
/* 指摘187■8(2026-09-05): 選択中の色を紺→青に揃えた。棚卸し(指摘186■0)の
   時点ではこのページのチップを測っておらず、紺のままなのを見落としていた。
   今回 is-on を6ページ横断で測り直して発見した。 */
.sao-sub-badge-chip.is-on { background: var(--sao-sub-blue); border-color: var(--sao-sub-blue); color: #fff; }
.sao-sub-badge-search input[type=search] { border: 1.5px solid var(--sao-sub-line); border-radius: 4px; background: #fff; padding: 9px 14px; font-size: 14px; color: var(--sao-sub-ink); font-family: inherit; min-width: 180px; }
/* 指摘34(2026-08-20)。outline: noneだけを指定するのは禁止、輪郭線は
   style.cssの共通フォーカススタイル(:focus-visible)に任せる。 */
.sao-sub-badge-search input[type=search]:focus { border-color: var(--sao-sub-sky); }
.sao-sub-badge-count { margin-left: auto; align-self: center; font-size: 16px; color: var(--sao-sub-muted); }
.sao-sub-badge-count b { color: var(--sao-sub-navy); font-size: 18px; font-weight: 700; margin: 0 2px; }

/* ---------- アーカイブ: シーズングループ・行 ---------- */
.sao-sub-badge-seasonhead { display: flex; align-items: baseline; gap: 13px; margin: 32px 0 12px; }
.sao-sub-badge-seasonhead:first-child { margin-top: 0; }
.sao-sub-badge-seasonhead b { font-size: 19px; letter-spacing: .02em; color: var(--sao-sub-navy); }
.sao-sub-badge-seasonhead span { font-size: 16px; color: var(--sao-sub-muted); }
.sao-sub-badge-rowlist { display: flex; flex-direction: column; gap: 8px; }
.sao-sub-badge-row { display: grid; grid-template-columns: 176px 1fr 70px auto; align-items: center; gap: 18px; padding: 16px 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-badge-rowlist .sao-sub-badge-row:last-child { border-bottom: 0; }
/* 指摘143■1(2026-08-31): 見本design/skioita-list-article-v1.html の.rowに
   合わせ、ホバー時の反応を「面を光らせる」(背景塗り)から「線と矢印だけ」に
   変更した。taikai.css・gokakusha.cssと同じ考え方(左端に暖色の縦線)。 */
.sao-sub-badge-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-badge-row:hover { background: var(--sao-sub-ice); }
.sao-sub-badge-row:hover::before { transform: scaleY(1); }
.sao-sub-badge-row:hover .sao-sub-badge-venue { color: var(--sao-sub-blue); }
.sao-sub-badge-dt { font-size: 16px; color: var(--sao-sub-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 指摘86■2(2026-08-24): eventと同じ理由で、コンテナのflex-wrapとバッジ
   自身のwhite-space:nowrapをセットで指定する(サイト内でバッジの振る舞いを
   1種類に揃える)。現在のラベル(級別テスト/プライズテスト/ジュニアテスト・
   スキー/スノーボード)は短く潰れは未発生だったが、将来長いラベルが
   追加された場合に備える。 */
.sao-sub-badge-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
/* 指摘214(2026-09-16)で統一した。元の指定は次のとおり:
     .sao-sub-badge-tag         color:#fff / border-radius 4px / padding 3px 9px
     .sao-sub-badge-tag-type    background var(--sao-sub-teal) #14708F（白文字）
     .sao-sub-badge-tag-shumoku background var(--sao-sub-blue) #0B5A9E（白文字）
   どちらも「中身の種類」なので、style.css の「分類の札」に一本化。 */
.sao-sub-badge-venue { display: block; font-size: 16px; color: var(--sao-sub-muted); }
.sao-sub-badge-num { text-align: right; font-size: 16px; color: var(--sao-sub-muted); white-space: nowrap; }
.sao-sub-badge-num b { color: var(--sao-sub-navy); font-size: 17px; font-weight: 700; margin-right: 2px; }
.sao-sub-badge-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-badge-row:hover .sao-sub-badge-arrow { transform: translateX(5px); color: var(--sao-sub-navy); }
.sao-sub-badge-noresult { text-align: center; color: var(--sao-sub-muted); padding: 30px 0; }

/* ---------- 個別ページ ---------- */
.sao-sub-badge-detail { margin-bottom: 26px; }
.sao-sub-badge-dbadges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
/* 指摘214(2026-09-16)で統一した。元の指定は次のとおり:
     .sao-sub-badge-badge         color:#fff / background var(--sao-sub-blue) #0B5A9E / padding 3px 9px
     .sao-sub-badge-badge-bumon   background #14708F（白文字）
     .sao-sub-badge-badge-type    background var(--sao-sub-teal) #14708F（白文字）
     .sao-sub-badge-badge-shumoku background var(--sao-sub-blue) #0B5A9E（白文字）
     .sao-sub-badge-badge-nendo   background transparent / color var(--sao-sub-amber) #B45309
                                  / border 1.5px solid 同色 / padding 1.5px 8px
   4つとも「中身の種類」なので、style.css の「分類の札」1通りに揃えた。
   ※これらはバッジテストの**個別ページ**にだけ出るため、指摘213の棚卸しでは
     見落としていた(指摘214■1で追加)。 */

.sao-sub-badge-factbox { background: #fff; border: 0; border-radius: var(--sao-radius-card); box-shadow: var(--sao-shadow-card); overflow: hidden; margin-bottom: 26px; }
.sao-sub-badge-factbox dl { display: grid; grid-template-columns: 124px 1fr; margin: 0; }
.sao-sub-badge-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-badge-factbox dd { padding: 16px 24px; font-size: 15px; border-bottom: 1px solid var(--sao-sub-line); margin: 0; }
.sao-sub-badge-factbox dl > dt:nth-last-of-type(1), .sao-sub-badge-factbox dl > dd:nth-last-of-type(1) { border-bottom: 0; }

.sao-sub-badge-results { background: #fff; border: 0; border-radius: var(--sao-radius-card); box-shadow: var(--sao-shadow-card); padding: 24px 24px; margin-bottom: 20px; }
.sao-sub-badge-results h3 { font-size: 15px; color: var(--sao-sub-blue-d); margin: 0 0 16px; padding-bottom: 9px; border-bottom: 1px solid var(--sao-sub-line); }
/* 【2026-10-19 よこしゅんさん】級と名前の区切りが分かりにくい → 級の見出しにアクセント（左の太い線＋薄い青の帯）。
   級と級の間も少しあける。見出しの帯が区切りになるので、名前の表の上の線は付けない（下の .sao-sub-badge-namegrid） */
.sao-sub-badge-gradegroup { margin-bottom: 26px; }
.sao-sub-badge-gradegroup:last-child { margin-bottom: 0; }
.sao-sub-badge-gradelabel { display: flex; align-items: baseline; gap: 10px; font-size: 16px; font-weight: 700; color: var(--sao-sub-navy); margin: 0 0 4px; padding: 7px 12px; background: var(--sao-sub-ice); border-left: 4px solid var(--sao-sub-blue); border-radius: 0 6px 6px 0; }
.sao-sub-badge-gradelabel span { font-size: 14px; font-weight: 400; color: var(--sao-sub-muted); }
/* 【2026-10-19 よこしゅんさん】名前が見にくい → 表（名簿）の形。色の帯（枠）をやめ、1人1行を細い線で区切る。
   パソコンは3列（1つの級は多くても9人。Local の全ページで数えた）、スマホは1列（下の @media）。名前は折り返さない */
.sao-sub-badge-namegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; padding: 0 4px 0 16px; }
.sao-sub-badge-namecard { padding: 9px 4px; border-bottom: 1px solid var(--sao-sub-line); text-align: left; font-size: 16px; font-weight: 700; color: var(--sao-sub-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 指摘104(2026-08-26): 「該当者なし」(合格者0名を表す表示専用の値、氏名では
   ない)を、実在の氏名カードと視覚的に区別する。太字をやめ、色を控えめにし、
   斜体にすることで「人名ではない注記」であることを示す(枠・級見出しの
   表示は他と揃え、その級が実在すること自体は分かるようにする)。 */
.sao-sub-badge-namecard-none { font-weight: 400; font-style: italic; color: var(--sao-sub-muted); white-space: normal; }

/* ---------- 前後のセッション(taikaiと同じ骨格) ---------- */
.sao-sub-badge-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.sao-sub-badge-pn { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border: 0; border-radius: var(--sao-radius-card); box-shadow: var(--sao-shadow-card); text-decoration: none !important; color: inherit; transition: .2s, outline 0s; }
.sao-sub-badge-pn:hover { border-color: var(--sao-sub-sky); background: var(--sao-sub-ice); }
.sao-sub-badge-pn.is-next { text-align: right; align-items: flex-end; }
.sao-sub-badge-pn em { font-style: normal; font-size: 16px; color: var(--sao-sub-muted); }
.sao-sub-badge-pn b { font-size: 16px; font-weight: 700; color: var(--sao-sub-navy); }

@media (max-width: 900px) {
  .sao-sub-badge-row { grid-template-columns: 1fr auto; gap: 8px; }
  .sao-sub-badge-dt { display: none; }
  .sao-sub-badge-arrow { display: none; }
  .sao-sub-badge-count { margin-left: 0; width: 100%; }
  .sao-sub-badge-factbox dl { grid-template-columns: 100px 1fr; }
  .sao-sub-badge-prevnext { grid-template-columns: 1fr; }
  .sao-sub-badge-pn.is-next { text-align: left; align-items: flex-start; }
}

/* ---------- 統合ページ(2029)の4タブ 指摘70(2026-08-24) ---------- */
.badge-tab-nav { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 18px; }
.badge-tab-btn {
  border: 1.5px solid var(--sao-sub-line); border-radius: var(--sao-radius-pill);
  padding: 12px 20px; font-size: 15px; font-weight: 700; color: var(--sao-sub-muted);
  background: #fff; cursor: pointer; font-family: inherit; transition: .22s, outline 0s;
  flex: 1 1 auto; min-width: 130px; text-align: center;
}
.badge-tab-btn:hover { border-color: var(--sao-sub-sky); color: var(--sao-sub-blue); }
.badge-tab-btn.is-on { background: var(--sao-sub-blue); border-color: var(--sao-sub-blue); color: #fff; box-shadow: 0 2px 10px rgba(11,90,158,.18); }

/* JS無効時は.js-readyが付かないため、全パネルが既定(display指定なし=表示)のまま
   縦に並ぶ(指摘69■2)。JSが読み込まれた瞬間、インラインscriptが.js-readyを付与し、
   以降はis-activeのパネルだけを見せる排他表示に切り替わる。 */
.badge-tabs.js-ready .badge-tabpanel { display: none; }
.badge-tabs.js-ready .badge-tabpanel.is-active { display: block; }
.badge-tabpanel { margin-bottom: 8px; }
.badge-tabpanel .badge-acc-body { padding: 0; }

/* 検定種目表の再編成(区分/実技種目/斜面設定、級ごとにrowspan)。指摘70。 */
.badge-skill-table td:first-child { vertical-align: top; text-align: left; white-space: normal !important; }
.badge-skill-table td:first-child b { display: block; margin-top: 12px; font-size: 14px; }
.badge-skill-table td:first-child b:first-child { margin-top: 0; }
.badge-grade-note { display: block; font-size: 16px; font-weight: 400; color: var(--sao-sub-muted); white-space: normal !important; margin: 2px 0 4px; }

/* 指摘74■1(2026-08-24): 320pxで区分列(級+注記)が潰れていたため、実測した
   最小幅を指定する(注記は文章なのでnowrapは使わない、min-widthのみ)。
   .entry-body .scroll-box table{min-width:0 !important}(詳細度: クラス2つ+
   要素1つ)と詳細度が同点だとCSSの読み込み順で負けることがあるため、
   body.sao-subを足して確実に上回るようにする(sub-page.cssの他の表の
   上書きと同じ書き方に揃える)。 */
/* 指摘77で発見: 指摘74時点の300pxはpadding込みのclientWidthで算出しており
   実効幅を過大評価していた。padding抜きで再計測し320pxに修正。 */
body.sao-sub .scroll-box table.badge-skill-table {
  min-width: 320px !important;
}

@media (max-width: 600px) {
  .badge-tab-btn { font-size: 16px; padding: 10px 8px; min-width: 0; }
}

@media (max-width: 600px) {
  /* 【2026-10-18・19】スマホは1列（1人1行） */
  .sao-sub-badge-namegrid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================
   指摘193■1(提案2、2026-09-07、手直しリスト No.37)
   バッジテスト統合ページ(2029)の表が「変な部分で改行される」件の対応。

   【何が起きていたか(指摘192■5で Range を使って1文字ずつ実測)】
     「1,500 ／ 円〜 ／ 3,000円」  金額が途中で割れる
     「（一 ／ 般、目 ／ 安）」     括弧の中が1〜3文字ずつ割れる
     「ナチュラ ／ ル／急斜 ／ 面」 単語の途中で割れる
     「含むナチ ／ ュラル／」       小さい「ュ」が行頭に来る

   【原因(getComputedStyle()の実測値)】
     1. セルに word-break: break-word / overflow-wrap: break-word が効いていた
        (= はみ出すくらいなら単語の途中でも割ってよい、という指定)
     2. 表の min-width が 0〜460px と小さく、横スクロールの枠(.scroll-box)が
        あるのに表が枠に合わせて縮み、細くなった列の中で 1 が働いていた

   【対応】表を内容が必要とする幅(max-content)まで広げ、単語の途中では
   割らないようにする。あふれた分は今までどおり .scroll-box が横スクロールで
   受ける。**このページ(page-id-2029)だけに効くセレクタで書いている。**
   他のページの表(教育部の行事計画・加盟クラブ一覧・総務部の会員登録料・
   TOPIC記事の結果表など)には一切影響しない。

   【詳細度について】このページの表には既に
     .badge-acc-body .scroll-box table { min-width:0 !important; ... }  (4266.css、クラス2)
     body.sao-sub .scroll-box table.badge-skill-table { min-width:320px !important } (クラス3+要素2)
   が掛かっている。body.sao-sub.page-id-2029 …(クラス4+要素2)で確実に上回る。
   ============================================ */
body.sao-sub.page-id-2029 .entry-body .scroll-box table,
body.sao-sub.single-event .entry-body .sao-sub-event-skill .scroll-box table {
  min-width: max-content !important;
}
body.sao-sub.page-id-2029 .entry-body .scroll-box table th,
body.sao-sub.single-event .entry-body .sao-sub-event-skill .scroll-box table th,
body.sao-sub.page-id-2029 .entry-body .scroll-box table td,
body.sao-sub.single-event .entry-body .sao-sub-event-skill .scroll-box table td {
  word-break: normal !important;
  overflow-wrap: normal !important;
  white-space: nowrap;
}
/* 検定種目表の「区分」列(級名+合格点の注記)と注記そのものは文章なので、
   ここだけは折り返しを許す(既存の指摘70の指定と同じ考え方)。 */
body.sao-sub.page-id-2029 .entry-body .scroll-box table.badge-skill-table td:first-child,
body.sao-sub.single-event .entry-body .sao-sub-event-skill .scroll-box table.badge-skill-table td:first-child,
body.sao-sub.page-id-2029 .entry-body .badge-grade-note,
body.sao-sub.single-event .entry-body .sao-sub-event-skill .badge-grade-note {
  white-space: normal !important;
}
/* 注記(合格点)に折り返しの上限を与える。
   これが無いと、表の幅を「内容が必要とする幅」にした結果、注記の
   いちばん長いひと続き(「（合計280点以上で合格」)が区分列の幅を決めてしまい、
   実測で表が804pxになる。1440pxのときの本文の幅は764pxなので、40pxはみ出して
   横スクロールが出てしまっていた(実測)。上限を掛けると688pxに収まる。
   値は実測で決めた(12em/10em/9em/8emのいずれでも688pxで同じだったため、
   いちばん緩い12emを採る)。 */
body.sao-sub.page-id-2029 .entry-body .badge-grade-note,
body.sao-sub.single-event .entry-body .sao-sub-event-skill .badge-grade-note {
  max-width: 12em;
}

/* 指摘193■1(提案1): 削除した比較表の「対象」列を各タブへ移したときの見た目。
   新しい様式は作らず、同じページの .badge-acc-note と同じ大きさ・色に揃える。 */
body.sao-sub.page-id-2029 .entry-body .badge-target,
body.sao-sub.single-event .entry-body .sao-sub-event-skill .badge-target {
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--sao-sub-ink);
}
body.sao-sub.page-id-2029 .entry-body .badge-target b,
body.sao-sub.single-event .entry-body .sao-sub-event-skill .badge-target b {
  display: inline-block;
  margin-right: 10px;
  padding: 2px 9px;
  border: 1px solid var(--sao-sub-line);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--sao-sub-muted);
  letter-spacing: .04em;
}

/* ============================================
   指摘271■3(2026-09-23、改善リスト1 No.8): イベントの詳細ページの「検定種目」。
   見本 design/skioita-badge-event-v1.html(「表はいまのバッジテストのページの表と同じ作り」)。
   上の page-id-2029 だけに効いていた指定は、同じ中身を
   body.sao-sub.single-event .entry-body .sao-sub-event-skill にも当たるよう広げた
   (セレクタを並べただけ。値は変えていない。詳細度はクラス5+要素2で、2029側より高い)。
   ここではイベント側だけに要る指定を足す。
   ============================================ */
/* 2029ではタブのパネルの中で padding:0 にしていた(.badge-tabpanel .badge-acc-body)。
   イベント側は 4266 の .badge-acc-body{padding:24px} が掛かるので同じく 0 にする。 */
body.sao-sub.single-event .sao-sub-event-skill .badge-acc-body { padding: 0; }