/* [spi_mypage_hub] マイページ（完全版）。記事本文カラム内の部品なので font-family はテーマ継承（宣言しない）。
   🔻 黒（#252525）のベタ塗り部品は使わない（2026-09-08 オーナー「黒はとりあえずやめて欲しい」）＝塗りは teal と白だけ。文字色の黒は可。
   レイアウトの手本＝ https://shundiary.jp/（2026-09-08 オーナー「こんな感じのカード型にして」→16:41 スクショ3枚で再指示）
     ＝ベタ塗りの太いヒーロー／左寄せの節見出し「— ▶ 小ラベル・太い大見出し＋件数・すべて見る ›」／黒の選択ピル／
       枠なしのサムネカード（角丸サムネ＋タグ行＋題名）。
   色＝ reashu.com トップの実測値だけ：#26A69A(teal) #B6E9E4 #E4F8F6 #F8FFFE 文字 #252525。
   🔻 中央寄せ＋英語小ラベル（●Records●）＋白カード縦積みは「びっくりするくらいダサい」で却下（16:41）。
   🔻 生成イラスト・生成バナーは使わない（「ファーストビューがキモすぎる」）。画像は実物（アイキャッチ／本番PC画面のスクショ）だけ。
   🚨 このファイルは assets/js/spi-mypage-hub.js が出すクラス名と1対1。片方だけ変えると無地カードに戻る。
   🚨 カード・サイドバーに外周の影は付けない（「外側の影消して」）。
   🔁 2026-09-08 19:0x オーナー「元のヘッダーを表示させずに、このページ用にヘッダーを作りたい」＝17:5x の
      「ヘッダーは消さないでー」を本人が上書き。/mypage/ ではサイト共通ヘッダー（.header）を隠し、.spi-hub-head が
      ページのヘッダーになる（下の「固定ページ /mypage/ だけの全幅レイアウト」）。
   🔁 同 19:0x「アイキャッチも微妙／イメージこんな感じ」＝参照画像は**形の指示**（19:4x「別にイメージでそのまましろとは
      言ってない」）＝ヒーローは HTML/CSS で組む（画像FVは v509 で出して即撤去）。性格検査SPIの絵だけは「この画像そのまま
      使えよ」＝渡された画像をそのまま（assets/mypage-art/）。 */

@media (max-width: 767px) {
    .spi-hub-page--top { padding-top: 64px; }
}

.spi-hub {
    border: 1px solid #B6E9E4; border-radius: 10px;
    padding: 18px 16px; margin: 14px 0; background: #fff; color: #252525;
}
/* ---------------- マイページ専用ヘッダー帯 ----------------
 * オーナー 2026-09-08「ヘッダーを特別仕様にしたい／会員限定コンテンツ みたいに入れて」＋項目6本。
 * 🚨「マイページ」の h2 は同日「ここのマイページの文字いらない」で撤去＝**復活させない**
 *    （左端は teal の会員バッジ／右端は「ログイン状況」＋連携チップ）。
 * 🔁 19:0x にサイト共通ヘッダーを隠す指示が出た＝/mypage/（body.spi-hub-screen）ではこの帯がページのヘッダー。
 *    ここの素の値は記事内に貼ったときの見え方（帯）＝/mypage/ の見え方は下の body.spi-hub-screen 側。
 * 🔻 ベル・アバター・「わたし ⌄」は置かない。
 */
.spi-hub-head-brand { display: block; flex: none; line-height: 0; }
/* 🚨 ロゴは**白版**（`assets/logo-white.png`）＝帯が teal になったので、原本 `logo.png`（地が #52A49A の
 *    箱）を載せると地の色が2つ見える。角丸は要らない（原本の箱を丸めるための 6px だった）。 */
.spi-hub-head-brand img { display: block; height: 32px; width: auto; }
/* 🔁 2026-09-09 18:3x オーナー「ファーストビューとヘッダーの上のロゴとか、会員限定のコンテストとか
 *    全部合体させて、ファーストビューに表示させよう」＝**帯とFVを1枚にした**。
 * 🔁 **2026-09-10 07:4x に FV部は畳んだ**＝オーナー「ヘッダーとファーストビューの色が被っているのはおかしい／
 *    ロゴの右に会員限定コンテンツ／ボタン2本はなくてもいい・カード型に」。
 *    いまの帯＝1行目（ロゴ＋金ピル …… ログイン状況）／2行目（ナビ5本）**だけ**。
 *    CTA2本の跡地は白地の入口カード3枚（`.spi-hub-quick`）＝teal が縦に続かない。
 * 🚨 地は teal 1色＝白い帯＋teal のヒーローの2枚に戻さない。中の文字・リンクは白。
 * 🔻 見出し「就活の教科書」は帯のロゴと同じ語なので出さない（JS 側で呼び出しだけ外した）。 */
.spi-hub-head { margin: 0 0 14px; border-radius: 12px; background: #26A69A; color: #fff; }
.spi-hub-head-in { padding: 14px 16px 16px; }
.spi-hub-head-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
/* 🔻 FV部（`.spi-hub-fv`）は 2026-09-10 07:4x に**出力ごと撤去**＝規則は残置（戻すのは PHP の2要素だけ）。 */
.spi-hub-fv { margin: 14px 0 0; }
.spi-hub-fv .spi-hub-member { display: inline-block; }
/* CTAはJSが入れる（人によって面談が出ない）＝先に高さを取って読み込み時の跳ねを止める。
 * 🚨 60px は「CTA1段（48px）＋上の余白12px」＝面談が出ない人でも空きが出ない値。 */
.spi-hub-fv-ctas { min-height: 60px; }
.spi-hub-fv-ctas .spi-hub-hero-ctas { margin: 12px 0 0; }
/* 🔁 2026-09-09 オーナー「会員限定コンテンツを金ピカにして欲しいな」＝teal(#26A69A) から金へ。
 * 🔁 同日 08:4x「金色でいいんだけど、もう少しサイトのデザインに馴染むようにして」＝**箔押し（濃い金の
 *    グラデ＋内影＋文字影）をやめて、サイトの他のピルと同じ作り**にした＝淡い地＋1pxの枠＋文字色だけで金を出す。
 *    写した先＝右端の連携チップ（淡い地＋色文字・角丸999px・12px/700）とサイドバー（1pxの枠・**影なし**）。
 *    文字色 #8a5a2b はヒーローの吹き出し（`.spi-hub-hero-badge`）と同じ茶＝画面の中で色が増えない。
 * 🚨 影は付けない（2026-09-08「外側の影消して」＝この画面の作りは枠線で輪郭を出す）。
 * 🚨 文字色 #8a5a2b は地のいちばん濃いところ(#f3e3b0)に対して 4.6:1＝12pxでも読める。
 * 🚨 金ピカにするのは**ヘッダー帯のこのバッジだけ**（ヒーローの中の同じ文字は `.spi-hub-hero-badge` で別物＝
 *    指示のスクショはヘッダーだったので触っていない）。
 * 🚨 セレクタを `.spi-hub` で1段深くしてあるのは**テーマの `p` の下マージンを外すため**＝
 *    `.spi-hub-member`（クラス1つ）はテーマの `.entry-content p`（クラス1＋要素1）に負けて
 *    `margin-bottom: 18px` が生き残り、align-items:center の行の中で**バッジだけ 9px 上へズレていた**
 *    （2026-09-09 オーナー「会員限定コンテンツの位置がずれている」＝1440実測で cy 25 / 他は 34）。
 *    `margin: 0` を書いてあっても効いていない＝**勝てるセレクタで書く**。 */
.spi-hub .spi-hub-member {
    margin: 0; padding: 6px 12px; border-radius: 999px; white-space: nowrap;
    background: linear-gradient(180deg, #fdf8e6 0%, #f3e3b0 100%);
    color: #8a5a2b; font-size: 12px; font-weight: 700; line-height: 1;
    border: 1px solid #dfc06b;
}
.spi-hub-topnav { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* 🚨 帯が teal になった（2026-09-09 の合体）＝リンクと小ラベルは**白**。
 *    もとの #252525／#6b7b78 は白地の帯だったときの値＝teal 地では 1.6:1 で読めない。 */
.spi-hub-topnav a {
    display: block; padding: 7px 10px; border-radius: 8px; white-space: nowrap;
    font-size: 13px; font-weight: 700; color: #fff; text-decoration: none;
}
.spi-hub-topnav a:hover { background: rgba(255,255,255,.18); color: #fff; }
.spi-hub-login { display: flex; align-items: center; gap: 7px; margin-left: auto; white-space: nowrap; }
.spi-hub-login-label { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.9); }
/* 狭い幅ではナビを2行目へ丸ごと落とす。
 * 🚨 1行に押し込むと（`.spi-hub-login` の margin-left:auto と挟まれて）ナビが幅0まで潰れて
 *    **リンクが1本も見えなくなる**（390pxの実描画で発覚・2026-09-08）。 */
@media (max-width: 899px) {
    .spi-hub-topnav { order: 3; flex: 1 0 100%; margin: 2px -16px 0; padding: 0 16px; }
}
.spi-hub-chip { font-size: 12px; font-weight: 700; line-height: 1; padding: 6px 10px; border-radius: 999px; background: #f0f3f3; color: #6b7b78; }
.spi-hub[data-state="unlocked"] .spi-hub-chip { background: #E4F8F6; color: #26A69A; }

.spi-hub-lead { margin: 0 0 12px; font-size: 14px; line-height: 1.8; color: #252525; }
.spi-hub-note { margin: 8px 0 0; font-size: 12px; line-height: 1.7; color: #6b7b78; }
.spi-hub-status { margin: 10px 0 0; font-size: 13px; line-height: 1.7; color: #26A69A; }

/* ---------------- ゲート（未連携）※変更なし ---------------- */

.spi-hub ul.spi-hub-perks { list-style: none; margin: 0 0 14px; padding: 0; border: none; background: none; }
.spi-hub ul.spi-hub-perks li { margin: 0; padding: 7px 0; border: none; font-size: 14px; line-height: 1.7; color: #252525; }
.spi-hub ul.spi-hub-perks li::before { content: "・"; color: #26A69A; font-weight: 700; }
.spi-hub-line {
    display: block; margin: 14px 0 0; padding: 15px 12px;
    background: #06C755; color: #fff; font-size: 16px; font-weight: 700;
    text-align: center; border-radius: 8px; text-decoration: none;
}
.spi-hub-line:hover { color: #fff; opacity: .92; }
.spi-hub-known { display: block; margin: 10px auto 0; text-align: center; font-size: 13px; color: #26A69A; text-decoration: underline; }

/* ---------------- 本体：本文＋**右**サイドバー ----------------
 * 🚨 サイドバーは右（オーナー 2026-09-08「基本的にサイドバーは右側かな？ 自社サイトの構成的に」）＝
 *    reashu.com の記事は右カラムがサイドバー。DOMの並びは nav → main のままなので
 *    grid-column で入れ替える（DOMを入れ替えるとスマホの並び＝メニューが先が崩れる）。
 */

.spi-hub-shell { display: block; }
@media (min-width: 900px) {
    .spi-hub-shell { display: grid; grid-template-columns: minmax(0, 1fr) 168px; gap: 24px; align-items: start; }
    .spi-hub-shell > .spi-hub-nav  { grid-column: 2; grid-row: 1; }
    .spi-hub-shell > .spi-hub-main { grid-column: 1; grid-row: 1; }
}
.spi-hub-main { min-width: 0; }

.spi-hub-nav { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 14px; padding-bottom: 4px; }
.spi-hub-nav a {
    display: flex; align-items: center; gap: 8px; white-space: nowrap;
    padding: 9px 12px; border-radius: 999px; text-decoration: none;
    font-size: 13px; font-weight: 700; color: #252525; background: #fff; border: 1px solid #e6e9ea;
}
.spi-hub-nav a:hover { border-color: #26A69A; color: #26A69A; }
.spi-hub-nav i { color: #26A69A; font-size: 13px; }
@media (min-width: 900px) {
    /* サイドバーは固定（オーナー 2026-09-08「サイドバーは固定して」）。
     * 🚨 貼る位置は定数で持たない＝`--spi-hub-sticky-top` に **JS が実測値**（画面上端に固定されて
     *    いるものの下端＋14px）を入れる。以前は `top: 84px` の決め打ちで、PCには固定ヘッダーが
     *    1つも無い（`header` は position:relative・実測）ため 84px がまるごと死に余白になっていた。
     *    管理バー（ログイン中だけ fixed 32px）の有無でも変わるので、高さを書かずに測る。
     * 🚨 中身が増えても切れないように、画面に収まらないぶんはサイドバーの中だけで縦スクロールさせる。 */
    .spi-hub-nav {
        position: sticky; top: var(--spi-hub-sticky-top, 20px); display: block; margin: 0;
        max-height: calc(100vh - var(--spi-hub-sticky-top, 20px) - 16px);
        overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    }
    .spi-hub-nav a { margin-bottom: 4px; border-radius: 8px; border: 0; }
}

/* ---------------- 受験用キーワード ----------------
 * 2026-09-11 15:2x オーナー「マイページのサイドバーにキーワード書いておこう」／
 *   「本番模試を受けるため、うまく開くことができなかった時のキーワードは textbook です」。
 *   同15:4x「スマホにも出す」＋置き場所は**入口カード3枚のすぐ下**（オーナー選択）。
 * 🚨 出るのは**必ずどちらか片方だけ**＝`--side`（サイドバーの一番下）は900px以上、
 *    `--flow`（本文・入口カードの下）は899px以下。DOMは2つあるが画面には1つしか出ない。
 * 🚨 `--side` を899px以下へ広げない＝768〜899px の .spi-hub-nav は上の126行で
 *    `display:flex; overflow-x:auto` の**横スクロールのチップ列**で、そこへ箱を混ぜると列が崩れる
 *    （767px以下は .spi-hub-nav ごと display:none＝690行）。だから小さい幅は `--flow` が受け持つ。
 * 文言と値そのものは JS 側（keywordBlock）が1箇所で持つ＝ゲートの data-password と同じ文字列。
 */
.spi-hub-keyword-label { margin: 0 0 5px; font-size: 11px; font-weight: 700; color: #677572; letter-spacing: .02em; }
/* 打つのは就活生＝1クリック（スマホは長押しなし）で全部選べるようにする。 */
.spi-hub-keyword-code {
    margin: 0 0 6px; padding: 7px 10px; background: #E4F8F6; border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 15px; font-weight: 700; color: #17796e; letter-spacing: .06em;
    user-select: all; -webkit-user-select: all; word-break: break-all;
}
.spi-hub-keyword-note { margin: 0; font-size: 11px; line-height: 1.55; color: #7b8785; }

/* 本文側（899px以下）＝入口カードと同じ白カード。左右の余白は親（.spi-hub-main）に従う＝
 * 自前のmarginで動かさない（本文の左端とズレる）。 */
.spi-hub-keyword--flow {
    display: block; margin: 0 0 14px; padding: 13px 14px;
    background: #fff; border: 1px solid #dfe9e7; border-radius: 12px;
}
.spi-hub-keyword--flow .spi-hub-keyword-note { font-size: 12px; }
.spi-hub-keyword--side { display: none; }

@media (min-width: 900px) {
    .spi-hub-keyword--flow { display: none; }
    .spi-hub-keyword--side { display: block; margin: 10px 0 2px; padding: 11px 2px 2px; border-top: 1px solid #eef1f1; }
}

.spi-hub-brand { display: block !important; padding: 8px 8px 22px !important; background: #fff !important; border: 0 !important; }
.spi-hub-brand img { display: block; width: 142px; height: auto; }

/* ---------------- ヒーロー（HTML/CSS・参照画像の要素を写す＝teal地／白い吹き出し／見出し2行／橙ピル／CTA） ----------------
 * 🔁 19:4x オーナー「アイキャッチデカすぎだろ／別にイメージでそのまましろとは言ってない」＝参照画像を貼った v509 を撤去。
 * 🚨 高さは先に決める＝PC 260px 前後（実描画で測る）。右列の実画面スクショは高さを押し上げるので置かない。
 * 色＝参照の実測：地 teal は reashu の #26A69A・吹き出しの文字 #8a5a2b（茶）・ピル #D95B26（橙）・💡 #F6D34A。 */

/* 🔁 2026-09-09 15:0x オーナー「就活の教科書、会員限定コンテンツみたいなFVだけちょっと残してほしい」＝
 *    吹き出しと見出しが戻ったので、14:0x に詰めた余白（18/18・PC 22/22）を **v526 の値へ戻す**。
 * 🚨 高さは先に決める＝吹き出し30px＋16＋見出し36px＋CTA(18+48)＋上下padding＝**PCで約200px／
 *    スマホ（CTA縦2段）で約260px**（下の実描画QAで測って確定させる）。
 * 🔻 橙ピル「回答結果・面談も」は戻していない＝この余白は「吹き出し＋見出し1行＋CTA」に対する値。 */
.spi-hub-hero {
    position: relative; overflow: hidden;
    margin: 0 0 22px; padding: 22px 20px 24px; border-radius: 16px;
    background: #26A69A; color: #fff;
}
.spi-hub-hero-inner { display: block; }
@media (min-width: 900px) {
    .spi-hub-hero { padding: 28px 36px 30px; }
}
.spi-hub-hero-copy { min-width: 0; }
/* 白い吹き出し（参照＝角丸の白い箱＋下向きの小さな三角） */
.spi-hub .spi-hub-hero-badge {
    position: relative; display: inline-block; margin: 0 0 16px; padding: 7px 14px; border-radius: 8px;
    background: #fff; color: #8a5a2b; font-size: 13px; font-weight: 900; line-height: 1.3; letter-spacing: .02em;
}
.spi-hub .spi-hub-hero-badge::after {
    content: ""; position: absolute; left: 22px; bottom: -7px;
    border: 7px solid transparent; border-top-color: #fff; border-bottom: 0;
}
.spi-hub .spi-hub-hero-title {
    margin: 0; font-size: 28px; font-weight: 900; line-height: 1.3; color: #fff; letter-spacing: .02em;
}
.spi-hub-hero-title > span { display: block; }
/* 橙のピル（参照＝左角が角丸・右が丸い帯に💡） */
.spi-hub .spi-hub-hero-pill {
    display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 7px 16px 7px 14px;
    border-radius: 8px 999px 999px 8px; background: #D95B26; color: #fff; font-size: 14px; font-weight: 900; line-height: 1.3;
}
.spi-hub .spi-hub-hero-pill > i { color: #F6D34A; font-size: 16px; }
/* CTA の上は吹き出し・見出しとの間隔ぶん空ける（2026-09-09 15:0x に文字が戻ったので v526 の 18px へ）。 */
.spi-hub-hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.spi-hub-hero-cta {
    display: inline-flex; align-items: center; gap: 10px; box-sizing: border-box;
    padding: 14px 24px; border-radius: 999px;
    background: #fff; color: #26A69A; font-size: 15px; font-weight: 700; text-decoration: none; line-height: 1;
}
.spi-hub-hero-cta:hover { background: #E4F8F6; color: #26A69A; }
.spi-hub-hero-cta > i { font-size: 11px; }
.spi-hub-hero-cta--ghost { background: transparent; color: #fff; border: 1px solid #fff; }
.spi-hub-hero-cta--ghost:hover { background: rgba(255,255,255,.15); color: #fff; }
.spi-hub-hero-cta--ghost > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 260px; }

/* 🔻 右列の実画面スクショ（.spi-hub-hero-shot）は 19:4x のヒーロー低背化で撤去＝高さを押し上げる。 */
/* 🔻 ヒーローの京香（2026-09-08「ファーストビュー京香さん入れようか」）は
 *    2026-09-09 08:4x オーナー「京香さんは消そうか」で**撤去**＝ここに戻さない。
 *    一緒に消したもの＝`.spi-hub-hero-inner` の右padding（京香のぶんの逃がし・640で146px／900で180px）。
 *    JS 側の生成（renderWelcome）と PHP の `data-kyouka` も同時に外してある（画像は assets に残置）。 */

@media (max-width: 480px) {
    .spi-hub-hero { padding: 20px 16px 22px; }
    .spi-hub .spi-hub-hero-title { font-size: 24px; }
    .spi-hub-hero-cta { width: 100%; justify-content: center; }
}

/* ---------------- 節見出し（— ▶ 小ラベル／大見出し＋件数／補足／すべて見る ›） ---------------- */

.spi-hub-sechead { margin: 0 0 16px; }
.spi-hub-kicker {
    display: flex; align-items: center; gap: 8px; margin: 0 0 6px;
    font-size: 12px; font-weight: 700; color: #26A69A; letter-spacing: .04em;
}
.spi-hub-kicker::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: #26A69A; }
.spi-hub-kicker > span::before { content: "\25B6"; font-size: 9px; margin-right: 6px; }
.spi-hub-sechead-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.spi-hub .spi-hub-sechead h3.spi-hub-h3 {
    margin: 0; padding: 0; border: 0; background: none;
    font-size: 24px; font-weight: 900; color: #252525; line-height: 1.35;
}
.spi-hub .spi-hub-sechead h3.spi-hub-h3::before,
.spi-hub .spi-hub-sechead h3.spi-hub-h3::after { display: none; }
.spi-hub-count {
    display: inline-block; margin-left: 10px; padding: 3px 9px; border-radius: 6px; vertical-align: middle;
    background: #E4F8F6; color: #26A69A; font-size: 13px; font-weight: 700; line-height: 1.2;
}
.spi-hub-seeall {
    display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
    font-size: 13px; font-weight: 700; color: #252525; text-decoration: none; white-space: nowrap;
}
.spi-hub-seeall { color: #26A69A; }
.spi-hub-seeall:hover { text-decoration: underline; }
.spi-hub-seeall > i { font-size: 10px; }
.spi-hub-sechead-note { margin: 6px 0 0; font-size: 13px; line-height: 1.7; color: #6b7b78; }

/* 一覧の中の小見出し（模試ツール／問題集／…） */
.spi-hub h3.spi-hub-h3 { margin: 0 0 10px; padding: 0; border: 0; background: none; font-size: 17px; font-weight: 700; color: #252525; }
.spi-hub h3.spi-hub-h3--band { padding-left: 12px; border-left: 4px solid #26A69A; }
.spi-hub-sec { margin: 0 0 30px; }
.spi-hub-sec:last-child { margin-bottom: 0; }
.spi-hub-sec > .spi-hub-note { margin: -4px 0 12px; }

/* ---------------- パネル（節の入れ物）＝線で区切るだけ・箱にしない ---------------- */

.spi-hub-panel,
.spi-hub-history { margin: 0 0 8px; padding: 22px 0 26px; border-bottom: 1px solid #eef1f1; background: transparent; }
.spi-hub-catalog { border-bottom: 0; }

/* ---------------- 入口カード3枚（記録／練習／特典） ----------------
 * 🔁 2026-09-10 07:4x オーナー「**ヘッダーとファーストビューの色が被っているのはおかしい**／
 *    **受けたWebテストの結果を確認する、面談を予約するのボタンはなくてもいいかも。競合のサイトみたいに
 *    カード型にして、どこで結果を見るかを一目瞭然にしてほしい**」＝teal帯のFV部（CTA2本）をここへ置き換えた。
 *    ＝teal は帯1本だけ／その下は**白地**のカード帯＝2つの色が縦に続かない（色被りの中身）。
 * 🚨 参照スクショ（競合の3枚）は**形の指示**＝写すのは①見出しが上 ②真ん中に大きいアイコン ③下にボタン の3点だけ。
 *    画像は貼らない（2026-09-08「アイキャッチデカすぎだろ」・2026-09-09「器の幅が違えば別物」）。
 * 🚨 カードの作りはこの画面の規約に合わせる＝白＋1pxの枠(#dfe9e7)＋角丸16px＋**外周の影なし**
 *    （2026-09-08「外側の影消して」＝正本は spi-hub.css の `.spi-unit-nav-widget`）。
 * 🚨 主は1枚だけ＝「どこで結果を見るか」が指示なので**記録が主**＝左端＋塗りボタン、残りは枠だけ。
 * 🚨 セレクタを `.spi-hub` で1段深くしてあるのはテーマの `.entry-content p / a` に勝つため
 *    （金ピルで踏んだ穴＝`margin: 0` を書いても効かず9px ズレた）。
 * 🔁 **2026-09-10 08:3x オーナー上書き**＝「**スマホの時横並びだと小さいな／あなたの記録どーんでいいよ**」
 *    （本番 v536 適用後の実機スクショつき）。私は「3列のまま縮める」（1列に積むと3枚で600pxになり
 *    『記録を一番上に』が画面外へ出る）を理由に横並びを選んだが、**390で1枚114pxは小さすぎた**＝
 *    スマホは **記録だけ幅いっぱいで大きく／練習・特典は下に2列**（オーナーが3案から選択）。
 *    ＝縦積み3枚（スクロールが増える）でも1枚だけ（他が消える）でもない。 */
.spi-hub-quick {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
    margin: 0 0 8px; padding: 22px 0 26px; border-bottom: 1px solid #eef1f1;
}
.spi-hub .spi-hub-quick-card {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    box-sizing: border-box; padding: 22px 16px 20px; min-height: 200px;
    background: #fff; border: 1px solid #dfe9e7; border-radius: 16px;
    color: #252525; text-decoration: none;
}
.spi-hub .spi-hub-quick-card:hover { border-color: #26A69A; color: #252525; text-decoration: none; }
.spi-hub .spi-hub-quick-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.4; text-align: center; }
/* アイコンは flex の残りを取って上下中央＝見出しが2行になってもボタンの位置が揃う。 */
.spi-hub-quick-icon { flex: 1 1 auto; display: grid; place-items: center; font-size: 56px; color: #26A69A; line-height: 1; }
.spi-hub .spi-hub-quick-btn {
    display: block; box-sizing: border-box; width: 100%; max-width: 220px;
    padding: 11px 16px; border-radius: 999px; border: 1px solid #26A69A;
    background: #fff; color: #26A69A; font-size: 14px; font-weight: 700; line-height: 1; text-align: center;
}
.spi-hub .spi-hub-quick-card--main .spi-hub-quick-btn { background: #26A69A; color: #fff; }

/* スマホ＝記録が幅いっぱい（どーん）／練習・特典は下に2列。
 * 🚨 主（記録）を `grid-column: 1 / -1` で1行に独立させる＝列数を変えずに済むので、
 *    カードが2枚（特典が無い人＝present 0件）になっても崩れない（記録1行＋練習1枚が左に残る）。
 * 🚨 高さは先に決める＝記録200px／サブ150px＝帯118＋カード帯 約396px で記録の節は 530px 前後＝
 *    390×844 の1画面に収まる（「記録を一番上に」を割らない・下の実測で確認する）。 */
@media (max-width: 639px) {
    .spi-hub-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 18px 0 20px; }
    .spi-hub .spi-hub-quick-card--main { grid-column: 1 / -1; }
    /* 主＝幅いっぱいなので、PCと同じ大きさのまま出す */
    .spi-hub .spi-hub-quick-card--main { gap: 12px; padding: 20px 16px 18px; min-height: 190px; }
    .spi-hub .spi-hub-quick-card--main .spi-hub-quick-title { font-size: 17px; }
    .spi-hub-quick-card--main .spi-hub-quick-icon { font-size: 52px; }
    .spi-hub .spi-hub-quick-card--main .spi-hub-quick-btn { padding: 12px 16px; font-size: 15px; max-width: 280px; }
    /* サブ2枚＝小さく横並び */
    .spi-hub .spi-hub-quick-card:not(.spi-hub-quick-card--main) { gap: 10px; padding: 16px 10px 14px; min-height: 150px; }
    .spi-hub .spi-hub-quick-card:not(.spi-hub-quick-card--main) .spi-hub-quick-title { font-size: 14px; }
    .spi-hub-quick-card:not(.spi-hub-quick-card--main) .spi-hub-quick-icon { font-size: 34px; }
    .spi-hub .spi-hub-quick-card:not(.spi-hub-quick-card--main) .spi-hub-quick-btn { padding: 9px 8px; font-size: 13px; }
}

/* ---------------- 記録 ---------------- */

.spi-hub-history-empty {
    display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
    padding: 18px 20px; border-radius: 12px; background: #F8FFFE; border: 1px solid #E4F8F6; color: #252525;
}
.spi-hub-history-empty > i { font-size: 28px; color: #26A69A; }
.spi-hub-history-empty strong, .spi-hub-history-empty span span { display: block; }
.spi-hub-history-empty strong { font-size: 14px; }
.spi-hub-history-empty span span { margin-top: 3px; font-size: 12px; color: #6b7b78; }

/* 未連携のときの記録欄＝LINEの案内1行（2026-09-09 ゲート画面の撤去にともなう置き換え）。
 * 🚨 ボタンは**中身の幅だけ**（枠いっぱいの緑ボタンはゲート画面の形＝入口の関門に見える）。
 * 🔻 ここに模試・問題への導線は置かない（同 § JS のコメント参照）。 */
.spi-hub-history-act { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.spi-hub-history-line {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 18px; border-radius: 999px; background: #06C755; color: #fff;
    font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap;
}
.spi-hub-history-line:hover { color: #fff; opacity: .92; }
.spi-hub-history-act .spi-hub-known { margin: 0; font-size: 12px; }
@media (max-width: 640px) {
    .spi-hub-history-act { margin: 12px 0 0; align-items: stretch; width: 100%; }
    .spi-hub-history-line { width: 100%; }
    .spi-hub-history-act .spi-hub-known { text-align: center; }
}

.spi-hub ul.spi-hub-list { list-style: none; margin: 0; padding: 0; border: 0; background: none; }
.spi-hub ul.spi-hub-list li {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
    margin: 0; padding: 12px 0; border: 0; border-bottom: 1px solid #eef1f1; font-size: 14px; line-height: 1.6;
}
.spi-hub ul.spi-hub-list li:last-child { border-bottom: 0; }
/* 日付の区切り（スマホ専用）。PC・タブレットでは出さない＝3列グリッドの見た目を1pxも変えない。
 * 🚨 出す/出さないはCSSだけで決める＝JSは常に1本入れる（画面幅でDOMを組み替えない）。 */
.spi-hub ul.spi-hub-list li.spi-hub-list-day { display: none; }
/* 🚨 記録は**直近5件だけ**出す（2026-09-09 14:0x オーナー「あなたの記録一覧も全部出さなくていい」＝
 *    選択肢から「直近5件だけ＋すべて見る」を本人が選択）。6件目以降はJSが `.spi-hub-list-more` を付けて
 *    ここで隠し、「すべて見る（残りN件）」で ul の `.is-clip` が外れて全部出る（取り直しは無い）。
 * 🚨 隠すのに `[hidden]` を使わない＝スマホの日付見出しには `li.spi-hub-list-day{display:flex}`(0,4,3) が
 *    別に当たっていて `[hidden]`(0,1,0) が負ける。だから**同じ土俵の (0,5,3)** をここに置く。 */
.spi-hub ul.spi-hub-list.is-clip li.spi-hub-list-more,
body.spi-hub-screen .spi-hub ul.spi-hub-list.is-clip li.spi-hub-list-more { display: none; }
.spi-hub ul.spi-hub-list li a { color: #252525; font-weight: 700; text-decoration: none; }
.spi-hub ul.spi-hub-list li a:hover { color: #26A69A; }
.spi-hub-date { font-size: 12px; color: #6b7b78; flex: none; min-width: 64px; }
.spi-hub-tag { margin-left: auto; padding: 5px 11px; border-radius: 999px; background: #26A69A; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
/* 「結果を見る」はリンク（2026-09-09）。上の `li a` が色を持っているので、ピルの白文字を明示で取り戻す。 */
.spi-hub ul.spi-hub-list li a.spi-hub-tag { color: #fff; text-decoration: none; cursor: pointer; }
.spi-hub ul.spi-hub-list li a.spi-hub-tag:hover { color: #fff; background: #1f8b81; }

/* ---------------- 記録の1行 ----------------
 * オーナー 2026-09-09 15:1x「あなたの記録で**記事のタイトル全部入れなくてよくて**、ユーザーが
 *   一目でわかるような名前にしてほしい／画像とかで作ってもいいよ／時間とか入れてもいいかも」
 *   → 3案から「**左に小さい画像＋ピル＋名前**」を本人が選択。
 * 形＝[検査タイル40px] [種類ピル][点数][日付][時刻] / [短い名前]  …右端に[結果を見る]
 * 🚨 タイルの色（地・輪郭・文字）はJSがインラインで入れる＝検査色の正本は
 *    `spi_exam_mypage_hub_tests()` の1枚（ここに色を書き足すと2枚目の対応表になる）。 */
.spi-hub-rec-tile {
    display: flex; align-items: center; justify-content: center; box-sizing: border-box;
    flex: none; width: 40px; height: 40px; padding: 2px;
    border: 1px solid #dfe6e6; border-radius: 9px;
    font-weight: 700; line-height: 1.1; text-align: center; letter-spacing: -.01em;
}
/* ⚠ 折り返させない＝大きさはJSが幅の見積もりで決めている（折り返すと「玉手/箱」になる）。 */
.spi-hub-rec-tile > span { display: block; white-space: nowrap; }
/* 本体は「メタ行」と「名前行」の2段。⚠ どちらも `flex: 1 1 100%` で**必ず改行**させる
 *   （中身の幅で折り返させると、名前が短い行だけメタと同じ行に並んで段が揃わない）。 */
.spi-hub-rec-body { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; flex: 1 1 0; min-width: 0; }
.spi-hub-rec-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; flex: 1 1 100%; min-width: 0; }
.spi-hub-rec-kind {
    flex: none; padding: 3px 7px; border-radius: 4px; background: #f1f3f3;
    color: #4a5654; font-size: 10px; font-weight: 700; line-height: 1;
}
.spi-hub-rec-score {
    flex: none; padding: 3px 7px; border-radius: 4px; background: #eaf6f4;
    color: #1f8b81; font-size: 10px; font-weight: 700; line-height: 1;
}
.spi-hub-time { flex: none; font-size: 12px; color: #6b7b78; }
.spi-hub ul.spi-hub-list li a.spi-hub-rec-name,
.spi-hub ul.spi-hub-list li span.spi-hub-rec-name {
    flex: 1 1 100%; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.45; color: #252525;
}
.spi-hub ul.spi-hub-list li a.spi-hub-rec-name:hover { color: #26A69A; }

/* ---------------- しぼりこみ（検索ピル＋黒ボタン／黒の選択ピル） ---------------- */

.spi-hub-search-wrap {
    position: relative; display: flex; align-items: center; box-sizing: border-box;
    max-width: 640px; margin: 0 0 14px; padding: 6px 6px 6px 16px;
    border: 1px solid #e3e6e6; border-radius: 999px; background: #fff;
}
.spi-hub-search-wrap > i { color: #8a9492; font-size: 14px; margin-right: 10px; }
.spi-hub input.spi-hub-search {
    flex: 1 1 auto; min-width: 0; box-sizing: border-box; margin: 0; padding: 9px 0;
    border: 0; background: transparent; font-size: 14px; color: #252525; outline: none;
}
.spi-hub-search-btn {
    flex: none; padding: 11px 16px; border: 0; border-radius: 999px; cursor: pointer;
    background: #26A69A; color: #fff; font-size: 13px; font-weight: 700; line-height: 1;
}
.spi-hub-search-btn:hover { background: #1f8a80; }

.spi-hub-tabs { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0 0 22px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.spi-hub-tabs::-webkit-scrollbar { display: none; }
.spi-hub-tab {
    flex: none; padding: 10px 18px; border: 1px solid #e3e6e6; border-radius: 999px; cursor: pointer;
    background: #fff; color: #252525; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.spi-hub-tab:hover { border-color: #26A69A; color: #26A69A; }
.spi-hub-tab.is-on { background: #26A69A; border-color: #26A69A; color: #fff; }

.spi-hub-sections { min-width: 0; }

/* ---------------- カード（枠なし：角丸サムネ＋タグ行＋題名） ---------------- */

.spi-hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
@media (min-width: 600px) { .spi-hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) {
    .spi-hub-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; }
    .spi-hub-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px 14px; }
}

.spi-hub-card {
    display: flex; flex-direction: column; min-width: 0;
    background: transparent; color: #252525; text-decoration: none;
}
.spi-hub-card:hover { color: #252525; }
.spi-hub-card:hover .spi-hub-thumb { transform: translateY(-3px); border-color: #26A69A; }
.spi-hub-card:hover .spi-hub-card-title { color: #26A69A; }

.spi-hub-thumb {
    display: block; position: relative; width: 100%; box-sizing: border-box;
    aspect-ratio: 16 / 10; border-radius: 12px; border: 1px solid #e6e9ea; background: #F8FFFE;
    line-height: 0; overflow: hidden; transition: transform .15s ease, border-color .15s ease;
}
/* 模試ツールの実画面＝ツール本体だけの切り取り（2:1・assets/mypage-shots/）。上下を切らずそのまま見せる。 */
.spi-hub-thumb--wide { aspect-ratio: 2 / 1; }
@supports not (aspect-ratio: 16 / 10) { .spi-hub-thumb { height: 0; padding-top: 62.5%; } .spi-hub-thumb--wide { padding-top: 50%; } }
.spi-hub-thumb svg,
.spi-hub-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

.spi-hub-card-body { display: block; padding: 10px 2px 0; }
.spi-hub-card-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; }
.spi-hub-tag-kind { display: inline-block; padding: 4px 8px; border-radius: 4px; background: #26A69A; color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.spi-hub-tag-test { display: inline-block; padding: 4px 8px; border-radius: 4px; background: #f1f3f3; color: #4a5654; font-size: 11px; font-weight: 700; line-height: 1; }
.spi-hub-card-title {
    display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    font-size: 14px; font-weight: 700; line-height: 1.5; color: #252525;
}
.spi-hub-card-note { display: block; margin: 4px 0 0; font-size: 12px; line-height: 1.6; color: #6b7b78; }
.spi-hub-meta { display: block; margin: 6px 0 0; font-size: 12px; color: #8a9492; line-height: 1.5; }
.spi-hub-meta.is-on { color: #26A69A; font-weight: 700; }

.spi-hub-more {
    display: block; box-sizing: border-box; width: 100%; max-width: 360px; margin: 18px auto 0; padding: 14px 20px;
    font-size: 14px; font-weight: 700; color: #252525;
    background: #fff; border: 1px solid #e3e6e6; border-radius: 999px; cursor: pointer;
}
.spi-hub-more:hover { border-color: #26A69A; color: #26A69A; }

/* ---------------- 固定ページ /mypage/ だけの全幅レイアウト（body.spi-hub-screen） ---------------- */

body.spi-hub-screen { background: #fff; }
/* 🔁 サイト共通ヘッダーを隠す（オーナー 2026-09-08 19:0x「元のヘッダーを表示させずに、このページ用に
 *    ヘッダーを作りたい」）。SANGO の .header は SPのドロワー（ハンバーガー）も中に持つ＝丸ごと消え、
 *    下の .spi-hub-head がページのヘッダーになる。
 * 🔁 2026-09-09 14:0x に私はこれを撤去して共通ヘッダーを出し直したが、**15:0x にオーナーが訂正**＝
 *    「なんかヘッダーなくなってるんだと。ごめん、**フッターだけ消してって言ったつもりだった**」
 *    ＝14:0x の指示は**スマホ固定フッターの非表示だけ**で、ヘッダー帯の撤去は私の誤読だった。
 *    ∴ この1行と .spi-hub-head（mypage-hub.php）を**同じ回で**戻す＝帯が2枚にならない。
 * ⚠ 隠すのは /mypage/（body.spi-hub-screen）だけ。フッターは PC で隠したまま（下の @media min-width:900）。 */
body.spi-hub-screen .header { display: none; }
/* 🔁 2026-09-09 14:0x オーナー「スマホフッターを非表示にしてほしい」＝/mypage/ だけ、スマホの固定フッター
 *    （テーマ SANGO の `nav.fixed-menu`＋**固定しているのは中の ul**）を出さない。
 * 🚨 `!important` を付けているのは、同じバーを差し替える `footer-nav.php` が
 *    `nav.fixed-menu:not(.spi-fnav){display:none!important}` を撃つ＝同じ土俵に載せるため
 *    （プラグイン側の自前バー `.spi-fnav` が /mypage/ に出た場合も一緒に消える）。
 * ⚠ 効くのは body.spi-hub-screen（=/mypage/）だけ＝記事・カテゴリーの固定フッターは1pxも変えない。 */
body.spi-hub-screen nav.fixed-menu,
body.spi-hub-screen .fixed-menu,
body.spi-hub-screen .fixed-menu ul { display: none !important; }
/* バーの高さぶんテーマが空けている下余白も要らなくなる（`.fixed-menu{margin-bottom:54px}`）。 */
body.spi-hub-screen .fixed-menu { margin-bottom: 0 !important; }
/* テーマの器の余白を全部落として、専用ヘッダーを画面の最上段・全幅に出す。
 * 本文側の左右余白は .spi-hub-body に持たせる（以前は #inner-content の width:calc(100% - 28px) だった）。 */
body.spi-hub-screen #inner-content { width: 100%; max-width: none; margin: 0; padding: 0; }
/* #content（page-forfront）の padding 15px/30px が残ると専用ヘッダーが両脇と上に浮く（390実測 L15/T17）＝0に */
body.spi-hub-screen #content { margin: 0; padding: 0; }
body.spi-hub-screen #main { float: none; width: 100%; }
body.spi-hub-screen #sidebar1 { display: none; }
body.spi-hub-screen #entry { margin: 0; border-radius: 0; background: transparent; }
body.spi-hub-screen #entry .entry-header, body.spi-hub-screen #entry .share { display: none; }
body.spi-hub-screen .entry-content { padding: 0; }

body.spi-hub-screen .spi-hub { border: 0; margin: 0; padding: 0; background: transparent; }
body.spi-hub-screen .spi-hub-page { max-width: none; margin: 0; padding-top: var(--spi-hub-fixed-top, 0px); }
/* ページ内リンク（FVの「受けたwebテストの結果を確認する」→ #spi-hub-records・右サイドバーの4本）の着地点を
 * 固定ヘッダーのぶん下げる。
 * 🔁 2026-09-09 15:0x にサイト共通ヘッダーを**また隠した**（上の訂正）＝画面上端に固定のものが無くなり、
 *    JS の実測値は 0px＝この calc は 12px になる（＝**害が無いので残す**・共通ヘッダーを出す日が来たら
 *    そのまま効く）。値を定数で書いていないので、隠す/出すのどちらでも同じコードで合う。 */
body.spi-hub-screen #spi-hub-top,
body.spi-hub-screen #spi-hub-records,
body.spi-hub-screen #spi-hub-catalog,
body.spi-hub-screen #spi-hub-present { scroll-margin-top: calc(var(--spi-hub-fixed-top, 0px) + 12px); }
/* 🚨 上端逃がしは**定数で持たない**＝画面上端に固定されているもの（サイト共通ヘッダー）の下端を
 *    JS が実測して `--spi-hub-fixed-top` に入れる（spi-mypage-hub.js の pinSidebar）。
 *    実測 2026-09-09＝共通ヘッダーを出していた 14:0x〜15:0x の本番スマホは `.header` が
 *    position:fixed の **62px**（ローカルは relative で 0px）＝64px の定数だとどちらかで必ず外れる。
 *    15:0x に共通ヘッダーを隠し直したので、`display:none` の要素は矩形が 0 で拾われず **0px** になる
 *    ＝padding も scroll-margin も自動で消える（実測で決めているから訂正のたびに直す行が無い）。
 *    管理バー（#wpadminbar）は WP が html の margin-top で逃がしているのでこの値には足していない。 */
/* 固定ヘッダー用の上端逃がし（.spi-hub-page--top）＝打ち消しは外したまま。
 * 🚨 付けるかどうかは JS が「いま隠れているか」を実測して決める＝高さを決め打たない。 */
body.spi-hub-screen .spi-hub-body { box-sizing: border-box; max-width: 1760px; margin: 0 auto; padding: 0 16px; }
/* 保存した結果の復元画面（/mypage/?spi_quiz=…）。中身は記事と同じミニクイズの器なので、
 * ここが持つのは**外側の余白だけ**（2026-09-09 オーナー「保存されているのはわかったが、崩れてる」）。
 * 🔁 同日「結果は別ページというかページしないといけないのでは？」で**ハブ本体を出さない1画面**に作り替えた
 *    ＝復元ブロックは .spi-hub-body の中に入る。1760pxの器と左右16pxは .spi-hub-body が持っているので、
 *    ここは上下の余白だけでよい。
 * 🔻 旧 `body.spi-hub-screen .spi-hub-page.spi-hub-restore-page`（ハブ出力の**前**に差し込んでいた版の器）は
 *    もう出ない形なので消した＝孤児のルールを残さない。 */
.spi-hub-restore-page { padding: 14px 0 8px; overflow: visible; }
.spi-hub-restore-back { margin: 0 0 10px; font-size: 13px; }
.spi-hub-restore-back a { color: #26A69A; font-weight: 700; text-decoration: none; }
.spi-hub-restore-back a:hover { text-decoration: underline; }
/* マイページ専用ヘッダー＝ページの最上段（ロゴ／会員限定コンテンツ／ナビ5本／ログイン状況）。
 * 🚨 中身に「マイページ」の文字・ベル・アバター・「わたし ⌄」は置かない（2026-09-08 決着済み）。 */
/* 🔁 2026-09-09 18:3x の合体＝この帯が /mypage/ のファーストビュー。全幅の teal。
 * 🚨 中身の左右は本文（.spi-hub-body の 1760px＋16px）と同じ器に入れる＝帯だけ端まで、
 *    中身は本文と同じ位置で始まる（別の器を作るとロゴとカードの左端がズレる）。
 * 🔻 白地＋下線1本（v526までの帯）には戻さない。 */
body.spi-hub-screen .spi-hub-head {
    margin: 0 0 22px; padding: 0;
    border: 0; border-radius: 0; background: #26A69A;
}
body.spi-hub-screen .spi-hub-head-in {
    box-sizing: border-box; max-width: 1760px; margin: 0 auto; padding: 12px 16px 20px;
}
/* 🚨 1行に固定するのはPC（900px以上）だけ＝ここで nowrap にすると、スマホで
 *    ナビが画面の外（left 324px〜843px・実測）へ押し出されて1本も見えなくなる。 */
body.spi-hub-screen .spi-hub-head-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
body.spi-hub-screen .spi-hub-topnav a { padding: 9px 12px; font-size: 14px; }
/* スマホ（900px未満）のヘッダーは**ロゴ／金ピル「会員限定コンテンツ」／〇〇さん の3つだけ**。
 * 🔁 2026-09-10 09:3x オーナー「**スマホヘッダー2列おかしいな／就活の教科書　会員限定コンテンツ　〇〇さん
 *    だけでいいよ**」＝2行目に居たナビ5本（就活の教科書とは／webテスト対策／ホワイト企業集／適職診断／面談）と
 *    「ログイン状況」のラベルを**畳んだ**。消したのは表示だけ＝PHP の `.spi-hub-topnav` とリンク定義
 *    （spi_exam_mypage_hub_member_nav）は残置＝戻すのはこの2行を外すだけ。
 *    ＝この決定は「/mypage/ のスマホ帯」への返事＝PC（900px以上）と他ページのヘッダーは無改変。
 * 🚨 CSSコメントの中で「アスタリスク2つ＋スラッシュ」を書かない（強調の ** の直後にパスを置くと
 *    そこでコメントが閉じ、以降の規則が丸ごと死ぬ＝2026-09-10 実測で ナビと login-label の
 *    display:none が効かなかった）。
 * 🚨 ナビが無くなったので grid-template-areas（2行を宣言する型）は要らない＝素の flex（上の共通行）に戻す。
 *    3つは幅が足りるかぎり**1行**に並び、足りない幅でだけ折り返す（390実測＝ロゴ172＋金ピル134で1行目、
 *    チップだけ2行目の右）。オーナーが見ていた幅（約610px）では1行に収まる。
 * 🔻 ナビを1本ずつ削る／3行にする／横スクロールのレール（端をぼかす）へは戻さない＝2026-09-09 に
 *    試して却下された形（3行はFVが下がる）。ここはナビごと畳んで解決している。
 * 🚨 判定は `docSW==iw`（負のマージンで画面に横スクロールを作っていないこと）。 */
@media (max-width: 899px) {
    /* ナビ5本は**表示だけ**畳む（DOMは残す＝PCと同じ1枚のHTML）。 */
    body.spi-hub-screen .spi-hub-topnav { display: none; }
    /* 「ログイン状況」の文字は出さずチップだけ（✓ LINE連携済み／未連携 で状態は読める）。
     * 🔁 2026-09-10 に効く幅を 479px → 899px へ広げた＝オーナーの「〇〇さんだけでいいよ」に合わせる。 */
    body.spi-hub-screen .spi-hub-login-label { display: none; }
    /* 🔁 2026-09-10 11:0x オーナー「**一列にできない？**」（スクショは375px相当＝「✓ 〇〇 さん」だけ2行目に落ちていた）
     *    ＝ロゴ／金ピル／チップの3つを**1行に固定**する。
     *    直す前の375px実測＝ロゴ172＋金ピル134＋チップ123＝429px に対し中身の幅は343px（375−左右16）
     *    ＝86px 足りず、チップだけ2行目（top 52px）へ折り返していた。∴ nowrap にしてから寸法を実測で詰めた。
     * 🚨 ここで nowrap にしても 2026-09-08 の穴（`.spi-hub-login` の margin-left:auto と挟まれてナビが
     *    幅0まで潰れ、リンクが1本も見えない）は起きない＝ナビは真上の行で display:none＝行の中身は3つだけ。
     * 🚨 チップは名前の長さで伸びる（「✓ <LINE表示名> さん」）＝長い名前で2行に割れないよう
     *    min-width:0＋ellipsis で**縮む側**にした（切り詰まっても行は1本のまま）。
     * 🔻 「さん」を落とす／ロゴを文字に置き換える／語を減らすはしない＝**寸法だけ詰める**
     *    （2026-09-09 の「会員限定コンテンツは1つも消さない」と同じ扱い）。
     * 🚨 判定は「3つの top が同じ（1行）」＋`docSW==iw`＝道具は `_tools/shot-qa/hub-headrow-qa.mjs`。 */
    body.spi-hub-screen .spi-hub-head-row { flex-wrap: nowrap; gap: 8px; }
    body.spi-hub-screen .spi-hub-login { min-width: 0; gap: 5px; }
    body.spi-hub-screen .spi-hub-chip {
        min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
}
/* 寸法を詰めるのは**スマホ幅（519px以下）だけ**＝520〜899px（大きめの端末・タブレット）は
 * 素の寸法（ロゴ32px／12px）のままでも3つが1行に収まる（520実測＝中身488pxに対し3つ+隙間で445px）。
 * 🚨 ここを 899px まで広げるとタブレットのロゴが20pxまで縮む＝**足りていない幅だけ詰める**。 */
@media (max-width: 519px) {
    body.spi-hub-screen .spi-hub-head-row { gap: 6px; }
    body.spi-hub-screen .spi-hub-head-brand img { height: 20px; }
    body.spi-hub-screen .spi-hub .spi-hub-member { padding: 5px 8px; font-size: 10px; }
    body.spi-hub-screen .spi-hub-chip { padding: 5px 8px; font-size: 11px; }
}
/* 🔁 2026-09-09 追記＝ナビが切れるのはスマホだけではない。900〜1100px（小さいノートPC）では
 *    1行固定（nowrap）のままナビ幅が足りず、最後の1〜2本が**ぼかしも無く**切れていた（900px実測＝
 *    ナビ308px／中身519px／最後のリンクの右端 935px）。同じ手当て（端をぼかす）をこの幅にも入れる。
 *    1150px以上はナビ box が中身より広くなるので、ぼかしは何もない余白に当たる＝害が無い。 */
@media (min-width: 900px) and (max-width: 1149px) {
    body.spi-hub-screen .spi-hub-topnav {
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent);
    }
}
/* 🔻 FV を画像1枚（.spi-hub-fv / fv.webp）で出す型は 19:4x「アイキャッチデカすぎだろ」で撤去＝下のヒーロー（HTML/CSS）が正。 */
body.spi-hub-screen .spi-hub-shell { gap: 18px; }
body.spi-hub-screen .spi-hub-main > .spi-hub-note { display: none; }

@media (min-width: 900px) {
    /* 🔁 サイト共通ヘッダーは 19:0x の指示で全幅ぶん隠している（上の body.spi-hub-screen .header）。
     * 🔁 フッター（`.footer, #footer`）を隠すのは 2026-09-09 15:0x のオーナー訂正で**追認された**
     *    ＝「フッターだけ消してって言ったつもりだった」（消す対象はヘッダーでなくフッターだった）。 */
    body.spi-hub-screen .footer, body.spi-hub-screen #footer { display: none; }
    /* 左右 30px＝以前の #content padding 30px と同じ余白（ヘッダーの中身も同じ 30px で縦に揃える） */
    body.spi-hub-screen .spi-hub-body { padding: 0 30px; }
    /* 🔁 2026-09-09 の合体で、左右の余白を持つのは帯ではなく**中身**（.spi-hub-head-in）＝
     *    teal は画面の端まで、ロゴ・金ピル・CTAは本文カードと同じ 30px から始まる。
     * 🚨 ここを帯側（padding）に残すと head-in の 16px が足されて**左端が 16px ズレる**
     *    （1440実測＝ロゴとCTAが 46px／本文カードは 30px）。 */
    body.spi-hub-screen .spi-hub-head-in { padding: 14px 30px 22px; }
    body.spi-hub-screen .spi-hub-head-row { gap: 10px 18px; }
    body.spi-hub-screen .spi-hub-head-brand img { height: 40px; }
    /* 🚨 サイドバーは**右**・見た目は webテストカテゴリーの単元ナビに寄せる
     *    （オーナー 2026-09-08「サイドバーは今webテストカテゴリーで使ってるサイドバー参考に」）＝
     *    白カード＋1px の枠線（#dfe9e7）＋角丸16px＋**外周の影なし**
     *    （影は同日「外側の影消して」で撤去済み＝ここで復活させない。正本＝spi-hub.css の
     *     `.spi-unit-nav-widget`。値を写しているだけで、増やすときはあちらを見る）。
     * ⚠ 以前は左カラムで「画面の高さいっぱいの白い帯＋右に境界線」だった＝サイトヘッダーを
     *    消す前提の管理画面型。ヘッダーを残す指示（同日）と右カラム化で成り立たなくなったので、
     *    負のマージン（nav -58px／main -50px）ごと廃止した。 */
    body.spi-hub-screen .spi-hub-shell { grid-template-columns: minmax(0, 1fr) 258px; gap: 28px; }
    body.spi-hub-screen .spi-hub-head-row { flex-wrap: nowrap; }
    body.spi-hub-screen .spi-hub-nav {
        padding: 10px; box-sizing: border-box;
        background: #fff; border: 1px solid #dfe9e7; border-radius: 16px;
    }
    body.spi-hub-screen .spi-hub-nav a:not(.spi-hub-brand) { padding: 13px 14px; background: #fff; font-size: 14px; }
    body.spi-hub-screen .spi-hub-nav a:not(.spi-hub-brand):hover { background: #f4f6f6; }
    body.spi-hub-screen .spi-hub-nav a[href="#spi-hub-top"] { background: #E4F8F6; color: #26A69A; }
    body.spi-hub-screen .spi-hub-nav i { width: 20px; color: #26A69A; font-size: 16px; text-align: center; }
    /* 単元ナビと同じ「見出し1本」を上に置く＝ただの箱にしない */
    body.spi-hub-screen .spi-hub-nav::before {
        content: "マイページ内"; display: block; margin: 2px 4px 8px;
        font-size: 12px; font-weight: 700; color: #677572; letter-spacing: .02em;
    }
    /* 🚨 サイドバーの貼り付き（sticky）は**本番でだけ死んでいた**（2026-09-11 オーナー「マイページの
     *    サイドバーとりあえず固定にしようか」）。上の 141行で 2026-09-08 から position:sticky を当てているのに、
     *    本番の実測（1440px・y=1200）は nav top **-1098px**＝1pxも貼り付いていない。ローカルでは +20px で
     *    正しく貼り付く＝**ローカルで再現しない＝テンプレート違い**。
     *    実体＝テーマ側の `#main{overflow-x:hidden}`（ID指定 1,0,0 で `body.spi-hub-screen main` より強い）。
     *    overflow-x:hidden は overflow-y を auto に落とす＝**祖先がスクロールコンテナになり、sticky は画面でなく
     *    その箱に対して貼る**＝画面上は素通りで流れていく（実測 computed: "hidden auto"）。
     * 🚨 `visible` でなく `clip` を当てる＝テーマが横はみ出しを切るために入れた指定を殺さない
     *    （clip はスクロールコンテナを作らないので sticky が生きる）。本番DOMへ注入して実測＝
     *    y=1200 で nav top -1098px → **+20px**（貼り付く）／docSW 1440 = iw（横スクロールは出ない）。
     * 🔙 戻すのは**この1行を消すだけ**。当たるのは /mypage/（body.spi-hub-screen）のPC幅だけ＝
     *    記事・LP・他の画面の #main には1バイトも触れていない。 */
    body.spi-hub-screen main#main { overflow-x: clip; }
    body.spi-hub-screen .spi-hub-main { padding: 0 0 30px; }
    /* ロゴは専用ヘッダー（.spi-hub-head-brand）が持つ＝サイドバー内のロゴは出さない（二重になる）。 */
    body.spi-hub-screen .spi-hub-brand { display: none !important; }
    body.spi-hub-screen .spi-hub { margin-top: 0; padding-top: 0; }
    /* 一覧のグリッドは横スクロール4枚＝記事が数百件でも縦に伸びすぎない */
    body.spi-hub-screen .spi-hub-sections .spi-hub-grid {
        grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 54px) / 4);
        overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; scrollbar-width: thin;
    }
    body.spi-hub-screen .spi-hub-sections .spi-hub-card { scroll-snap-align: start; }
    /* 🔁 2026-09-09 15:1x に行の中身を増やした（検査タイル＋種類ピル＋名前＋日時）ので **3列→2列**。
     *    1280pxで1枚 250px のままだと、40pxのタイルと「結果を見る」を引いた残りが約110pxで
     *    メタ行が3段に折り返す（実描画で確認）。2列＝1枚 約430pxで、メタ1行＋名前1行に収まる。 */
    body.spi-hub-screen .spi-hub ul.spi-hub-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    body.spi-hub-screen .spi-hub ul.spi-hub-list li { padding: 13px 14px; border: 1px solid #eef1f1; border-radius: 9px; background: #fff; }
}

@media (max-width: 899px) { .spi-hub-brand { display: none !important; } }

@media (max-width: 767px) {
    /* 以前の padding-top 72px は固定サイトヘッダーの下に潜らないための逃がし＝ヘッダーを隠したので 0。
     * 🔁 2026-09-09 overflow:hidden を外した＝横スクロールのカード列を撤去したので切るものが無く、
     *    残すと下の「検査タブの貼り付き（sticky）」が死ぬ（祖先の overflow:hidden は sticky を無効にする）。 */
    /* ⚠ ここを `padding: 0` にすると上の `padding-top: var(--spi-hub-fixed-top)` を**同じ強さで打ち消す**
     *    （2026-09-09 実測＝固定ヘッダーを注入しても padding-top が 0px のまま＝FVの上62pxが隠れた）。
     *    左右と下は 0 のまま・上だけ実測値を残す。 */
    body.spi-hub-screen .spi-hub-page { padding: var(--spi-hub-fixed-top, 0px) 0 0; }
    .spi-hub-panel, .spi-hub-history { padding: 14px 0 18px; }

    /* =========================================================================
     * スマホ＝「webテストを練習するページ」（2026-09-09 オーナー「マイページである必要はないって言われた／
     *   ユーザーがwebテストを練習するページ／今のままじゃ使いにくすぎる／科目別にタブで分けよう」）
     * 直す前の 390px 実測＝帯107px→ページ内ナビ48px→ヒーロー314px→記録262px→特典389px→（検索・タブ）→
     *   練習の最初の1件が y=1516px。最初の1画面（844px）に練習カード0枚。種類別の横スクロール列が5本。
     * 直したあと＝帯→低いヒーロー→検査タブ（貼り付き）→その検査の練習を縦1列で。
     * 🔻 横スクロールのカード列（カルーセル）へ戻さない＝1列に1件しか見えず、高さが列の中の最大に揃う。
     * ===================================================================== */

    /* ページ内ナビのチップ（ホーム/練習/記録/特典）は畳む＝タブが主役で、48pxぶん練習が下がるだけ。
     * PC（右サイドバー）はそのまま。消さずに隠す（DOMは共通）。 */
    .spi-hub-nav { display: none; }

    /* ヒーローを低くする（314px→約150px）。吹き出し「会員限定コンテンツ」（帯にも同じ語がある）と
     * 橙ピル「回答結果・面談も」はスマホでは畳む。CTA2本（結果・面談＝2026-09-09 決定）はそのまま。
     * 🚨 スマホのFVに残る文字は**見出し「就活の教科書」だけ**（実測 390px＝FV 155px）＝
     *    「会員限定コンテンツ」は真上の帯（.spi-hub-member）に出ているので語は失われない。
     * 🔻 ここに在った `.spi-hub-hero-title-brand { display: none; }` は**撤去**（2026-09-09 15:0x）＝
     *    ①見出しが2行（就活の教科書＋Webテスト練習ページ）だった頃に1行目を畳むための行で、
     *      2行目が無くなった今は**見出しが丸ごと消える**指定になっている
     *    ②しかも `.spi-hub-hero-title > span{display:block}`(0,1,1) に負けて**効いていなかった**
     *      ＝実測で「就活の教科書」は出ていた。効いていない行を残すと、次に誰かが強さを上げた瞬間に
     *      オーナー指示（15:0x「就活の教科書…のFVだけ残してほしい」）が静かに壊れる。 */
    .spi-hub-hero { margin: 0 0 12px; padding: 16px 16px 16px; border-radius: 12px; }
    .spi-hub .spi-hub-hero-badge, .spi-hub .spi-hub-hero-pill { display: none; }
    .spi-hub .spi-hub-hero-title { font-size: 22px; line-height: 1.3; }
    .spi-hub-hero-ctas { gap: 8px; margin: 12px 0 0; }
    .spi-hub-hero-cta { width: 100%; justify-content: center; padding: 11px 16px; font-size: 14px; }

    /* 節見出しはスマホでは1行（小ラベルと補足を畳んで、見出しを17pxに）。 */
    .spi-hub-kicker, .spi-hub-sechead-note { display: none; }
    .spi-hub-sechead { margin: 0 0 10px; }
    .spi-hub .spi-hub-sechead h3.spi-hub-h3 { font-size: 18px; }
    .spi-hub-count { margin-left: 8px; padding: 2px 7px; font-size: 12px; }

    /* 検査タブ＝上に貼り付く（帯は固定でないので top:0）。地を白にして下の行に透けない。 */
    .spi-hub-tabs {
        position: sticky; top: 0; z-index: 5; margin: 0 -16px 10px; padding: 8px 16px 8px;
        background: #fff; border-bottom: 1px solid #eef1f1; gap: 6px;
    }
    .spi-hub-tab { padding: 9px 14px; font-size: 13px; }
    .spi-hub-search-wrap { margin: 0 0 12px; padding: 4px 4px 4px 14px; }
    .spi-hub input.spi-hub-search { padding: 8px 0; font-size: 13px; }
    .spi-hub-search-btn { padding: 10px 14px; }
    .spi-hub-sec { margin: 0 0 20px; }
    .spi-hub h3.spi-hub-h3 { font-size: 15px; }

    /* 一覧＝縦1列のリスト（記録と同じ物差し＝1件の高さ・1画面に入る件数）。
     * 1件＝サムネ 88px ＋ 題名2行まで ＋ 右端に「›」。実測の狙い＝1件 68px前後・最初の1画面に練習 5〜6件。 */
    .spi-hub-grid, .spi-hub-grid--5 { display: block; }
    .spi-hub-card {
        flex-direction: row; align-items: center; gap: 12px;
        padding: 9px 2px; border-bottom: 1px solid #eef1f1;
    }
    .spi-hub-sec .spi-hub-card:last-of-type, .spi-hub-benefits .spi-hub-card:last-of-type { border-bottom: 0; }
    .spi-hub-card::after {
        content: "\203A"; flex: none; margin-left: auto; padding-left: 6px;
        font-size: 20px; line-height: 1; color: #26A69A; font-weight: 700;
    }
    .spi-hub-thumb, .spi-hub-thumb--wide { flex: none; width: 88px; aspect-ratio: 16 / 10; border-radius: 8px; }
    .spi-hub-thumb--wide { aspect-ratio: 2 / 1; }
    @supports not (aspect-ratio: 16 / 10) { .spi-hub-thumb { height: 55px; padding-top: 0; } .spi-hub-thumb--wide { height: 44px; } }
    .spi-hub-card:hover .spi-hub-thumb { transform: none; }
    .spi-hub-card-body { flex: 1 1 0; min-width: 0; padding: 0; }
    .spi-hub-card-tags { margin: 0 0 4px; gap: 4px; }
    .spi-hub-tag-kind, .spi-hub-tag-test { padding: 3px 6px; font-size: 10px; }
    .spi-hub-card-title { font-size: 13px; line-height: 1.45; }
    .spi-hub-meta { margin: 3px 0 0; font-size: 11px; }
    .spi-hub-more { margin: 12px auto 0; padding: 11px 16px; font-size: 13px; }

    /* 押した行の直下に開くパネル（JS の insertPanel＝スマホは行の次に入る）。列の下と同じ全幅。 */
    .spi-hub-embed-panel { margin: 8px 0 12px; }

    /* 🔁 2026-09-10 13:3x オーナー「**なんでこんな幅狭いんだ？**」（本番スクショ＝「あなたの記録」の行から
     *    開いた結果パネル・iPhone）＝パネルが **300px で固定**されていた（画面が375でも390でも同じ）。
     * 原因＝**詳細度の負け**。下の 924行 `.spi-hub ul.spi-hub-list li.spi-hub-embed-li{display:block;padding:0;border:0}`
     *   (0,3,2) は、この @media の `body.spi-hub-screen .spi-hub ul.spi-hub-list li`(0,3,3) に**後ろに書いてあっても負ける**。
     *   ∴ 埋め込み用の <li> がカードのまま（＝カードの中にカードの二重枠）＋ `display:flex` のままなので、
     *   中のパネルが **flexアイテム＝中身なりの幅**になり、`<iframe>` の**既定幅 300px** でそのまま止まる
     *   （`.spi-hub-embed-frame{width:100%}` は親の幅が中身で決まるので効かない）。
     * 実描画（headless Chrome・現物のCSS）＝li 468px に対して panel **302** / iframe **300**。
     *   スクショ実測とも一致（外枠65〜619px・中の枠85〜548px＝約300CSS px）。
     * ∴ この @media の中に**同じ詳細度で**打ち消しを置く＝panel 302→468 / iframe 300→466（実描画で確認）。
     *   390px端末なら iframe 300→356・中身 260→316。
     * 🚨 これは **mypage-hub-embed.php の「iframe の中の余白」の直し（253→309px）とは別の場所**＝
     *    あちらは iframe の中身、ここは **iframe 自体の幅**。カードから開くパネルは元から全幅なので無関係。
     * 🚨 効くのは**「あなたの記録」の行から開く結果パネル・スマホ(≤767px)だけ**＝PC（グリッドの `grid-column:1/-1`）・
     *    模試ページ・記事は1pxも動かない。戻すのはこのブロックを消すだけ（CSSのみ・PHP/JSは1バイトも触っていない）。 */
    body.spi-hub-screen .spi-hub ul.spi-hub-list li.spi-hub-embed-li {
        display: block; padding: 0; border: 0; border-radius: 0; background: none;
    }

    /* 「あなたの記録」はカード列と別扱い＝**縦1列**。
     * 🚨 2026-09-09 オーナー「スマホの時ももっと見やすくしてあげて欲しいね」。
     *    カード列と同じ横スクロールに混ざっていたので、①一度に1件しか見えない
     *    ②高さが行の中で一番高いカードに揃う（題名1行の記録に空白が付く）
     *    ③受けた順に横へ流れて日付が追いにくい、の3つが同時に起きていた。
     *    記録は「探して開く一覧」なので、上から順に読める縦リストに畳む。 */
    body.spi-hub-screen .spi-hub ul.spi-hub-list {
        display: grid; grid-auto-flow: row; grid-template-columns: 1fr; grid-auto-columns: auto;
        gap: 8px; overflow: visible; margin-right: 0; padding: 0;
        scroll-snap-type: none;
    }
    body.spi-hub-screen .spi-hub ul.spi-hub-list li {
        display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
        padding: 9px 12px; border: 1px solid #eef1f1; border-radius: 9px; background: #fff;
        scroll-snap-align: none;
    }
    /* 🚨 日付は**行から消してグループの見出しに1本だけ**出す（2026-09-09 オーナー
     *    「スマホのデザインは要修正だな」＝1件2行のままだと1件73pxで最初の1画面に4件しか入らず、
     *     しかも同じ日付が15行ぶん並んでいた）。1件は題名1行＝約40px・最初の1画面に9件入る。 */
    body.spi-hub-screen .spi-hub ul.spi-hub-list li.spi-hub-list-day {
        display: flex; align-items: center; gap: 8px;
        margin: 8px 2px 0; padding: 0; border: 0; border-radius: 0; background: none;
        font-size: 11px; font-weight: 700; color: #677572; letter-spacing: .02em;
    }
    body.spi-hub-screen .spi-hub ul.spi-hub-list li.spi-hub-list-day:first-child { margin-top: 0; }
    /* 見出しの右に細い罫を伸ばす（日付の塊がひと目で切れて見える） */
    body.spi-hub-screen .spi-hub ul.spi-hub-list li.spi-hub-list-day::after {
        content: ""; flex: 1 1 auto; height: 1px; background: #e6ecec;
    }
    /* 行の日付は隠す（見出しに出ているので重複）。⚠ 消さずに隠すだけ＝PCは従来どおり行に出る。 */
    body.spi-hub-screen .spi-hub ul.spi-hub-list li .spi-hub-date { display: none; }
    body.spi-hub-screen .spi-hub ul.spi-hub-list li .spi-hub-tag {
        flex: none; margin-left: auto; padding: 4px 10px; font-size: 11px;
    }
    /* 題名。⚠ url が無いと <span> で出る＝a だけを狙うと素の記録が横に潰れる。
     * 🚨 `flex: 1 1 auto`（basis=中身の幅）だと題名が1行ぶんの幅を丸ごと取って
     *    「結果を見る」が次の行へ落ちる（実測 39px の行が 62px になる）＝**basis は 0**にして
     *    余った幅を分け合わせる。min-width:0 が無いと日本語が縮まず同じことが起きる。 */
    /* 🔁 2026-09-09 15:1x の作り直しで行が [タイル][本体][結果を見る] になった＝**本体だけ**を伸ばす。
     * ⚠ 以前の `li > span:not(.spi-hub-date)` は 40px のタイル（span）にも当たって
     *    `flex: 1 1 0` でタイルが潰れる。狙いを名前で指す（url が無い記録は span で出るので両方書く）。 */
    body.spi-hub-screen .spi-hub ul.spi-hub-list li > .spi-hub-rec-body {
        flex: 1 1 0; min-width: 0;
    }
    body.spi-hub-screen .spi-hub ul.spi-hub-list li a.spi-hub-rec-name,
    body.spi-hub-screen .spi-hub ul.spi-hub-list li span.spi-hub-rec-name {
        font-size: 13px; line-height: 1.45;
    }
    /* 名前だけの古い形（it.name が無い応答）でも横に潰れない＝本体を持たない行の受け皿を残す。 */
    body.spi-hub-screen .spi-hub ul.spi-hub-list li > a:not(.spi-hub-tag) {
        flex: 1 1 0; min-width: 0; font-size: 13px; line-height: 1.45;
    }
}

/* =======================================================================
 * その場で受ける（カードを押すと下に開く埋め込みパネル）
 * オーナー指示 2026-09-09「このページでミニクイズとか本番模試とか全部表示したい」
 * ＝押した1本だけを同一オリジンの iframe で開く（実装は mypage-hub-embed.php）。
 * 🚨 パネルはグリッドの**外**（すぐ下）に入る。一覧が横スクロールのカルーセルなので、
 *    中に入れるとカード1枚分の幅の列になる（実描画QAで 220px を実測）。ここは全幅で置く。
 * ==================================================================== */
.spi-hub-embed-panel {
    margin: 4px 0 10px;
    border: 1px solid #e3e6ea;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 5px 6px -2px rgba(17, 24, 39, .10);
}
.spi-hub-embed-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #eef1f4;
    background: #fafbfc;
}
.spi-hub-embed-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spi-hub-embed-out {
    flex: 0 0 auto;
    font-size: 12px;
    color: #26A69A;
    text-decoration: none;
    border-bottom: 1px solid rgba(38, 166, 154, .4);
}
.spi-hub-embed-close {
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #d7dbe0;
    background: #fff;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    color: #4b5563;
    cursor: pointer;
}
.spi-hub-embed-close:hover { background: #f3f4f6; }
.spi-hub-embed-frame {
    display: block;
    width: 100%;
    border: 0;
    background: #fff;
}
/* 🔁 2026-09-10 14:26 オーナー実測（iPhone・LINE内ブラウザ）＝結果パネルがスコア欄で切れて見える。
 *    実体は復元RESTを待つ 1.6〜2.0秒（4G相当 2.4→4.1秒）に**途中の高さ**が当たっていること。
 *    ∴ 中身が描けるまでは iframe を流れから外して（読み込みは進む）「読み込んでいます…」だけを出す。
 * 🚨 効くのは `data-loading` が付いているあいだ（＝結果パネルを開いた直後）だけ＝練習パネル・模試ページ・
 *    記事は1pxも動かない。戻すのはこの4規則と JS の `__waitReady` を消すだけ。 */
.spi-hub-embed-panel[data-loading] { position: relative; }
.spi-hub-embed-panel[data-loading] .spi-hub-embed-frame { position: absolute; left: 0; top: 0; width: 100%; visibility: hidden; }
.spi-hub-embed-load { padding: 28px 12px; text-align: center; font-size: 13px; color: #6b7280; }
.spi-hub-embed-panel:not([data-loading]) .spi-hub-embed-load { display: none; }
/* 開いているカードは押した場所が分かるように輪郭だけ変える（影は足さない）。 */
.spi-hub-card[data-open="1"] { border-color: #26A69A; }

/* =======================================================================
 * 模試ツールの科目アコーディオン（カードを押すと下に開く）
 * オーナー指示 2026-09-09「模試も、押したらアコーディオンで開いて問題選べるみたいにできない？」
 * 🚨 行は**本物のリンク**＝色と cursor を明示する（祖先の `li a { color:… }` に負けて
 *    「押せなさそうな灰色」になるのを防ぐ／2026-09-09 の「結果見れないんだが」と同じ穴）。
 * ==================================================================== */
.spi-hub-subj-list { padding: 6px; }
.spi-hub-subj-loading { margin: 0; padding: 14px 10px; font-size: 13px; color: #6b7280; }
.spi-hub-subj {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #1f2937;
    text-decoration: none;
    cursor: pointer;
}
.spi-hub-subj + .spi-hub-subj { border-top: 1px solid #f0f2f5; }
.spi-hub-subj:hover { background: #f6fbfa; }
.spi-hub-subj-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.spi-hub-subj-title { font-size: 14px; font-weight: 700; color: #1f2937; line-height: 1.4; }
.spi-hub-subj-desc {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 時間は画面の既存ピルと同じ作り（淡い地＋1px枠・影なし）。 */
.spi-hub-subj-time {
    flex: 0 0 auto;
    padding: 3px 9px;
    border: 1px solid rgba(38, 166, 154, .35);
    border-radius: 999px;
    background: #eefaf8;
    color: #17796f;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.spi-hub-subj-go { flex: 0 0 auto; color: #26A69A; font-size: 18px; font-weight: 700; line-height: 1; }


/* C案①A（2026-09-09）＝記録の行の直下に開く結果パネルの包み <li>。行の見た目（flex・余白・区切り）を継がせない。
   ⚠ 私（claude-9c）が足した器の指定で、デザイン指示ではない。 */
.spi-hub ul.spi-hub-list li.spi-hub-embed-li { display: block; grid-column: 1 / -1; padding: 0; margin: 0; border: 0; border-bottom: 1px solid #eef1f1; background: none; }  /* PCの記録は2列グリッド（599行）＝全列にまたがせる */
.spi-hub ul.spi-hub-list li.spi-hub-embed-li .spi-hub-embed-panel { margin: 6px 0 12px; }
/* 🔻 2026-09-10 11:2x オーナー「**模試ページで開くがよくわからん／なんでこのボタンが必要なんだ？**」＝
 *    結果パネルの右上の呼び出しを**出さない**。要らない理由＝①結果はこのパネルに出ている
 *    ②飛び先は同じ受験の結果つき模試ページ＝**同じものが別タブで開くだけ** ③本当に描けなかったときは
 *    iframe の中に逃げ道（`.spi-hub-embed-empty` の「模試ページで開く」）が別に出る（mypage-hub-embed.php）
 *    ＝押せる出口が0にはならない。
 * 🚨 効くのは**結果パネル（`--result`）だけ**＝練習パネルの「記事で開く」（spi-mypage-hub.js:1181）と
 *    科目パネルの「ページで開く」（同1281）は**残す**（名指しは結果パネルの1本）。
 * 🚨 外したのは**呼び出しだけ**＝JSの `spi-hub-embed-out` を作る行は1バイトも触っていない
 *    ＝戻すのはこの1規則を消すだけ。 */
.spi-hub-embed-panel--result .spi-hub-embed-out { display: none; }

/* 🚨 切れっぱなし防止（2026-09-10 オーナーGO 14:5x・claude-f7）＝結果パネルを開いて8秒たっても
 *    iframe の高さが**1回も当たらなかった**ときだけ付く印（JS の `data-fallback`）。
 *    実測＝14:30:55 の画面収録（iPhone・LINE内ブラウザ・本番 v552）で iframe が 7秒以上 199px のまま
 *    ＝仮値の 200px から動かず中身が縦に切れていた。原因は未特定だが「切れて終わり」にはしない。
 * 🚨 高さが正常に届く端末には**1つも付かない**＝届いた瞬間に JS が外す。
 *    戻すのはこの2規則と JS の `__gotHeight` を消すだけ。 */
.spi-hub-embed-panel[data-fallback] { max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.spi-hub-embed-panel[data-fallback] .spi-hub-embed-head { position: sticky; top: 0; z-index: 2; }


/* 🔁 2026-09-10 15:0x オーナー「ヘッダーが見切れてる」（PCのスクショ1枚）＝帯が右端まで届かず右に白が34px
 *    残っていた。本番実測（viewport 1631px・読むだけの注入QAで前後比較）＝`main#main.m-all.t-2of3.d-5of7`
 *    （SANGOのグリッド）に padding-right: 34.24px（2.1%）が効き、その中の .spi-hub-page が 1597px
 *    ＝帯も1597pxで止まっていた（横スクロールは無し＝docSW==iw）。左の padding は元から0px＝左右非対称だった。
 *    ⚠ ローカルでは再現しない＝ローカルの /mypage/ は page-forfront テンプレートで main にガターが無い。
 *      本番のページだけ既定テンプレート（グリッドの右ガター付き）＝実測しないと見えない差。
 * 🚨 この決定は「/mypage/ の画面」への返事＝他ページの main は1バイトも変えない（body.spi-hub-screen で閉じる）。
 * 🔻 帯だけ負のマージンで端まで伸ばす形は採らない＝ガターは%（幅で変わる）＝固定pxを持つと別の幅でズレる。
 *    戻すのはこの1規則を消すだけ。 */
body.spi-hub-screen main#main { padding-right: 0; }

/* 🔁 2026-09-10 15:0x オーナー「適職診断のバナーいらない」＝blog-floating-button の固定バナー
 *    （#bfb_content_pc・画像 tekishoku-shindan.png 300x268・飛び先 /linelp-tekishoku/）を /mypage/ では出さない。
 *    実測＝/mypage/ に「適職診断」は2つだけ（この画像バナーと、帯のナビのテキストリンク1本）＝消すのはバナーだけ。
 * 🚨 この決定は「/mypage/ の画面」への返事＝記事・LP側の #bfb_content_pc は残す
 *    （2026-07-30「他プラグインの導線をこちらのCSSで消さない」の撤回を踏襲＝あれは記事のLINE導線の話）。
 * 🚨 bfb 側が display を !important で当てているので、こちらも !important でないと効かない（注入QAで実測）。
 * ⚠ 480px以下では bfb 自身のCSSが #bfb_content_pc を隠す＝効くのはPC/タブレットだけ（390px実測で元から none）。
 *    戻すのはこの1規則を消すだけ。 */
body.spi-hub-screen #bfb_content_pc,
body.spi-hub-screen #bfb_content_sp { display: none !important; }

/* 🆕 2026-09-11 オーナーGO＝「この端末からログアウト／別のLINEアカウントで開く」を**ページの一番下に1行**。
 *    理由＝セッションのcookieは30日持つのに落とす口が無く、帯にLINEの表示名が出るので
 *    共用端末では次に開いた人に前の人の名前と記録が見えていた（`line-login.php` の logout ルート）。
 * 🚨 目立たせない＝小さい文字・枠なし・ボタンの形にしない（誤タップで連携が切れると記録が見えなくなる）。
 * 🚨 帯には足さない（2026-09-10「帯はLINE表示名だけ」）／説明ブロックは増やさない
 *    （2026-09-08〜09「入口に1枚の関門や説明画面を置かない」）。
 *    戻すのはこの1ブロックと JS の renderDeviceFoot の呼び出し1行を消すだけ。 */
.spi-hub .spi-hub-foot {
    margin: 26px auto 8px;
    text-align: center;
    font-size: 12px;
    line-height: 1.9;
    color: #8b8b8b;
}
.spi-hub .spi-hub-foot button {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: #5c5c5c;
    text-decoration: underline;
    cursor: pointer;
}
.spi-hub .spi-hub-foot button[disabled] { opacity: .5; cursor: default; }
.spi-hub .spi-hub-foot .spi-hub-foot-sep { margin: 0 10px; color: #d2d2d2; }
.spi-hub .spi-hub-foot .spi-hub-foot-note {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: #a3a3a3;
}