/* ============================================================
   合格ナビ × まなび航路 — v24 統合スキン
   ------------------------------------------------------------
   目的: Claude Code 版（機能一式）の DOM をそのまま使いながら、
   Genspark Design 版の視覚言語に置き換える。

   方針（重要）:
   - **HTML/JSは一切いじらず、CSSだけで見た目を差し替える**。
     app.js / app-v19.js が吐くマークアップは 250 個超のクラスを
     持つが、機能の本体でもあるため、触ると機能が壊れる。
   - 読み込み順は style.css → tailwind.css → **skin-v24.css**。
     最後に読むので、詳細度が同じなら常にこちら側が勝つ。
     ただし style.css 側は `!important` を多用しているので、
     打ち消す必要がある箇所ではこちらも `!important` を使う。
   - 表示モード3種（ダーク/ライト/夜間）は維持する。
     Genspark 版はダーク専用だったので、その配色を
     「ダークの値」として --t-* トークンへ流し込み、
     ライト/夜間は既存の値を活かして色相だけ寄せる。
   ============================================================ */

/* ---- 1. デザイントークン（Genspark 版 :root をそのまま採用） ---- */
:root{
  --gs-ink:rgba(246,249,255,.92);
  --gs-ink-70:rgba(246,249,255,.82);
  --gs-ink-55:rgba(246,249,255,.70);
  --gs-ink-35:rgba(246,249,255,.45);
  --gs-line:rgba(255,255,255,.12);
  --gs-line-strong:rgba(255,255,255,.22);
  --gs-bg:#05070d;
  --gs-panel:rgba(10,16,30,.62);
  --gs-panel-strong:rgba(10,16,30,.82);
  --gs-cyan:#8de9ff;
  --gs-violet:#b9a7ff;
  --gs-gold:#f5d98d;
  --gs-lime:#d7ff3a;
  --gs-danger:#ff8fa3;
  --gs-hit-min:44px;

  /* Genspark のフォントスタック。日本語はシステムフォントへ委譲する
     （CSP font-src 'self' を厳格に保つため、和文は同梱しない） */
  --gs-sans:'Inter','Helvetica Neue','Hiragino Kaku Gothic ProN','Yu Gothic','Meiryo',system-ui,sans-serif;
  --gs-serif:'Instrument Serif','Hiragino Mincho ProN','Yu Mincho',Georgia,serif;

  /* 既存アプリのテーマトークンを Genspark 値へ差し替える（ダーク） */
  --t-bg:#05070d; --t-surface:rgba(10,16,30,.62); --t-panel:rgba(10,16,30,.82);
  --t-line:rgba(255,255,255,.12); --t-line-2:rgba(255,255,255,.12); --t-line-3:rgba(255,255,255,.08);
  --t-text:#f6f9ff; --t-ink-2:rgba(246,249,255,.82); --t-ink-3:rgba(246,249,255,.82);
  --t-ink-4:rgba(246,249,255,.66); --t-ink-5:rgba(246,249,255,.66);
  --t-muted:rgba(246,249,255,.66); --t-muted-2:rgba(246,249,255,.45);
  --t-accent-ink:var(--gs-lime);

  /* 旧トークン（style.css の直参照）も寄せる */
  --amber:var(--gs-lime);
  --panel:rgba(10,16,30,.62);
  --line:rgba(255,255,255,.12);
}

/* ライト / 夜間では Genspark のアクセントを暗背景前提の値から
   紙背景でも 4.5:1 を満たす値へ落とす。ライム(#d7ff3a)は白地では
   コントラスト 1.2 しかなく、そのまま使うと文字が読めなくなる。 */
body.student-light{
  --gs-ink:#17251f;
  --gs-ink-70:#33423b;
  --gs-ink-55:#5c6b63;
  --gs-ink-35:#8a978f;
  --gs-line:rgba(23,37,31,.14);
  --gs-line-strong:rgba(23,37,31,.26);
  --gs-bg:#f7f5ef;
  --gs-panel:rgba(255,255,255,.9);
  --gs-panel-strong:rgba(255,255,255,.96);
  --gs-cyan:#0f6d86;
  --gs-violet:#5b3bb0;
  --gs-gold:#8b6500;
  --gs-lime:#3f6b00;
  --gs-danger:#a8203c;
  --t-accent-ink:#3f6b00;
}
body.student-light.theme-night{
  --gs-ink:#2b2620;
  --gs-ink-70:#43392e;
  --gs-ink-55:#675d50;
  --gs-ink-35:#8b8172;
  --gs-line:rgba(43,38,32,.16);
  --gs-line-strong:rgba(43,38,32,.3);
  --gs-bg:#efe7d9;
  --gs-panel:rgba(248,242,231,.94);
  --gs-panel-strong:rgba(248,242,231,.99);
  --gs-cyan:#0d5f75;
  --gs-violet:#563596;
  --gs-gold:#7a5800;
  --gs-lime:#3a6100;
  --t-accent-ink:#3a6100;
}

/* ---- 2. 土台（body / 背景レイヤー / タイポ） ---- */
body.site-shell{
  background:var(--gs-bg) !important;
  color:var(--gs-ink) !important;
  font-family:var(--gs-sans) !important;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(215,255,58,.35);color:#fff;}
body.student-light ::selection{background:rgba(63,107,0,.22);color:#17251f;}

/* Genspark の背景 3 層（動画 → ベール → グリッド）を既存の要素へ割り当てる。
   .site-cosmic-video / .site-cosmic-veil / .world-atmosphere は
   renderer.tsx が全ページに出しているので、追加マークアップは要らない。 */
.site-cosmic-video{
  position:fixed;inset:0;z-index:-4;width:100%;height:100%;object-fit:cover;
  filter:saturate(.65) brightness(.42) contrast(1.06) !important;
}
.site-cosmic-veil{
  position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(1200px 700px at 78% 8%, rgba(83,147,222,.20), transparent 50%),
    radial-gradient(900px 600px at 8% 90%, rgba(215,255,58,.06), transparent 55%),
    linear-gradient(180deg, rgba(2,5,12,.55), rgba(3,8,18,.86) 60%, rgba(3,6,14,.98)) !important;
}
/* 既存の .world-atmosphere は暖色のオーロラ 2 枚。Genspark は
   代わりに 64px のグリッドを敷いているので、そちらへ置き換える。 */
.world-atmosphere{
  position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.35;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(1200px 700px at 60% 20%, #000, transparent 70%);
  -webkit-mask-image:radial-gradient(1200px 700px at 60% 20%, #000, transparent 70%);
}
.world-atmosphere::before,.world-atmosphere::after{display:none !important;}

body.student-light .site-cosmic-video{display:none !important;}
body.student-light .site-cosmic-veil{
  background:radial-gradient(1100px 700px at 80% 0%, rgba(15,109,134,.07), transparent 55%) !important;
}
body.student-light .world-atmosphere{opacity:.5;
  background-image:
    linear-gradient(rgba(23,37,31,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,37,31,.045) 1px, transparent 1px);}

/* 見出し: Genspark の詰めたトラッキング + text-wrap:balance */
h1,h2,h3{letter-spacing:-.03em;line-height:1.15;text-wrap:balance;}
.h-mega{font-family:var(--gs-sans);font-weight:600;letter-spacing:-.045em;line-height:.98;text-wrap:balance;}
.serif{font-family:var(--gs-serif);font-style:italic;font-weight:400;letter-spacing:-.005em;}
.tabnum,.tabular-nums{font-variant-numeric:tabular-nums;}

/* 既存の .eyebrow-mini を Genspark の .eyebrow に寄せる。
   琥珀の極太ラベルから、字間を開けた小さな大文字ラベルへ。 */
.eyebrow-mini,.immersive-eyebrow,.lp-eyebrow{
  color:var(--gs-ink-55) !important;
  font-size:14px !important;
  font-weight:500 !important;
  letter-spacing:.22em !important;
  text-transform:uppercase;
}

/* フォーカスリング（Genspark はライム、既存は琥珀） */
button:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible,a:focus-visible,[tabindex]:focus-visible{
  outline:2px solid rgba(215,255,58,.6) !important;
  outline-offset:3px !important;border-radius:6px;
}
body.student-light button:focus-visible,body.student-light input:focus-visible,
body.student-light textarea:focus-visible,body.student-light select:focus-visible,
body.student-light a:focus-visible{outline-color:rgba(63,107,0,.75) !important;}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--gs-lime);color:#0b1200;
  padding:10px 16px;border-radius:0 0 12px 0;font-weight:600;z-index:100;
}
.skip-link:focus{left:0;}

/* ---- 3. Glass サーフェス ----------------------------------
   既存の主要カードをまとめて Genspark の .glass / .glass-strong に
   置き換える。ここが「デザインを移植する」の実体。 */
.lp-card,.wizard-card,.route-orbit-panel,.route-plan,.learning-cockpit,
.reflection-card,.priority-section,.progress-diagnosis,.three-year-roadmap,
.account-panel,.message-panel,.admin-card,.legal-page section,.plan-summary,
.v19-card,.outlook-card,.exam-picker,.route-levels,.consent-card,
.past-exam-panel,.grade-report,.display-settings,.heatmap-block,
.focus-panel,.sample-banner,.source-note,.transfer-code,.signup-record-section{
  background:linear-gradient(145deg, rgba(255,255,255,.06), rgba(5,13,27,.55)) !important;
  border:1px solid var(--gs-line) !important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.10), 0 24px 80px rgba(0,0,0,.28) !important;
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  border-radius:20px;
  color:var(--gs-ink);
}
body.student-light .lp-card,body.student-light .wizard-card,body.student-light .route-orbit-panel,
body.student-light .route-plan,body.student-light .learning-cockpit,body.student-light .reflection-card,
body.student-light .priority-section,body.student-light .progress-diagnosis,body.student-light .three-year-roadmap,
body.student-light .account-panel,body.student-light .message-panel,body.student-light .admin-card,
body.student-light .legal-page section,body.student-light .plan-summary,body.student-light .v19-card,
body.student-light .outlook-card,body.student-light .exam-picker,body.student-light .route-levels,
body.student-light .consent-card,body.student-light .past-exam-panel,body.student-light .grade-report,
body.student-light .display-settings,body.student-light .heatmap-block,body.student-light .focus-panel,
body.student-light .sample-banner,body.student-light .source-note,body.student-light .transfer-code,
body.student-light .signup-record-section{
  background:var(--gs-panel) !important;
  border-color:var(--gs-line) !important;
  box-shadow:0 18px 50px rgba(23,37,31,.10) !important;
  color:var(--gs-ink) !important;
}

/* 主役級のパネルは glass-strong + アクセントの縁取り */
.learning-cockpit{
  background:linear-gradient(160deg, rgba(255,255,255,.09), rgba(6,12,24,.78)) !important;
  border-color:var(--gs-line-strong) !important;
  box-shadow:inset 0 0 0 1px rgba(215,255,58,.45), 0 30px 90px rgba(0,0,0,.35) !important;
}
.plan-summary{box-shadow:inset 0 0 0 1px rgba(141,233,255,.4), 0 24px 80px rgba(0,0,0,.28) !important;}
.route-orbit-panel{box-shadow:inset 0 0 0 1px rgba(185,167,255,.45), 0 24px 80px rgba(0,0,0,.28) !important;}

/* style.css が .lp-card 等に載せていた白いグラデ枠線は、
   Genspark の inset ハイライトと二重になるので消す。 */
.lp-card::before,.legal-page section::before,.admin-card::after{display:none !important;}

/* 見出しのグラデーション文字（style.css）は Genspark の
   ソリッドな白 + serif アクセントに置き換える。 */
.lp-section__head h2,.legal-page h1,.plan-summary__main h1{
  background:none !important;-webkit-text-fill-color:currentColor;
  color:var(--gs-ink) !important;
}

/* ---- 4. ボタン（Genspark: ライムの pill + ghost の pill） ---- */
.lp-cta,.wizard-next,.account-btn.is-primary,.contact-form button[type=submit],
.admin-search button,.minimum-button,.save-reflection,.add-subject-row button,
.v19-primary,.consent-accept,#start-btn,.immersive-cta{
  background:var(--gs-lime) !important;
  color:#0b1200 !important;
  border:none !important;
  border-radius:9999px !important;
  padding:14px 22px !important;
  font-weight:600 !important;
  font-size:16px !important;
  min-height:var(--gs-hit-min);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  box-shadow:0 14px 40px rgba(215,255,58,.28), inset 0 -2px 0 rgba(0,0,0,.10) !important;
  transition:transform .18s ease, box-shadow .18s ease;
}
.lp-cta:hover,.wizard-next:hover,.account-btn.is-primary:hover,.minimum-button:hover,
.save-reflection:hover,.v19-primary:hover,#start-btn:hover,.immersive-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 55px rgba(215,255,58,.36), inset 0 -2px 0 rgba(0,0,0,.10) !important;
}
body.student-light .lp-cta,body.student-light .wizard-next,body.student-light .account-btn.is-primary,
body.student-light .minimum-button,body.student-light .save-reflection,
body.student-light .add-subject-row button,body.student-light .v19-primary,
body.student-light .consent-accept,body.student-light #start-btn,body.student-light .immersive-cta{
  background:var(--gs-lime) !important;color:#fff !important;
  box-shadow:0 12px 32px rgba(63,107,0,.24) !important;
}

.wizard-back,.account-btn,.v19-ghost,.v19-switch,.consent-decline,
.dashboard-actions button,.rating-buttons button,.replace-book-btn{
  border:1px solid rgba(255,255,255,.28) !important;
  border-radius:9999px !important;
  background:rgba(255,255,255,.04) !important;
  color:var(--gs-ink) !important;
  min-height:var(--gs-hit-min);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.wizard-back:hover,.account-btn:hover,.v19-ghost:hover,.v19-switch:hover,
.dashboard-actions button:hover,.replace-book-btn:hover{
  border-color:rgba(255,255,255,.55) !important;
  background:rgba(255,255,255,.08) !important;
  transform:translateY(-2px);
}
body.student-light .wizard-back,body.student-light .account-btn,body.student-light .v19-ghost,
body.student-light .v19-switch,body.student-light .consent-decline,
body.student-light .dashboard-actions button,body.student-light .rating-buttons button,
body.student-light .replace-book-btn{
  border-color:var(--gs-line-strong) !important;
  background:rgba(255,255,255,.6) !important;
  color:var(--gs-ink) !important;
}
.rating-buttons button.selected{
  background:var(--gs-lime) !important;color:#0b1200 !important;border-color:transparent !important;
}
body.student-light .rating-buttons button.selected{color:#fff !important;}

/* ---- 5. チップ / バッジ / バー（Genspark .chip / .bar） ---- */
.route-badge,.priority-badge,.material-type-badge,.verify-badge,.account-badge,
.past-exam-badge,.v19-daychip,.selected-subjects>span,.outlook-band,.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px !important;border-radius:9999px !important;
  font-size:14px !important;line-height:1 !important;font-weight:500 !important;
  border:1px solid var(--gs-line-strong) !important;
  background:rgba(255,255,255,.05) !important;
  color:var(--gs-ink-70) !important;
}
.priority-badge.is-primary,.route-badge.is-good,.verify-badge.is-linked{
  background:rgba(215,255,58,.10) !important;border-color:rgba(215,255,58,.4) !important;color:#eefcb6 !important;
}
.route-badge.is-mid,.priority-badge.is-warn,.verify-badge.is-unmeasured{
  background:rgba(141,233,255,.08) !important;border-color:rgba(141,233,255,.35) !important;color:#d7f5ff !important;
}
.route-badge.is-low,.priority-badge.is-danger,.outlook-band.is-danger{
  background:rgba(255,143,163,.10) !important;border-color:rgba(255,143,163,.4) !important;color:#ffd7de !important;
}
body.student-light .route-badge,body.student-light .priority-badge,body.student-light .material-type-badge,
body.student-light .verify-badge,body.student-light .account-badge,body.student-light .past-exam-badge,
body.student-light .v19-daychip,body.student-light .selected-subjects>span,body.student-light .outlook-band{
  background:rgba(23,37,31,.05) !important;color:var(--gs-ink-70) !important;
}

/* 進捗バー: Genspark の cyan→violet グラデーションで統一する。
   既存は琥珀・緑・ライムがばらばらに混ざっていた。 */
.book-progress-meter>i,.progress-summary i,.verify-bar>i,.outlook-bar>i,
.route-track>i,.bar>i,.v19-metric>i{
  background:linear-gradient(90deg,var(--gs-cyan),var(--gs-violet)) !important;
}
.book-progress-meter,.progress-summary>div,.verify-bar,.outlook-bar,.route-track,.bar{
  height:6px;border-radius:9999px;background:rgba(255,255,255,.08) !important;overflow:hidden;
}
body.student-light .book-progress-meter,body.student-light .progress-summary>div,
body.student-light .verify-bar,body.student-light .outlook-bar,body.student-light .route-track,
body.student-light .bar{background:rgba(23,37,31,.10) !important;}

/* ---- 6. ダッシュボードのヘッダーとタブ ---- */
.dashboard-header{
  background:rgba(5,7,13,.72) !important;
  border-bottom:1px solid var(--gs-line) !important;
  backdrop-filter:blur(18px) saturate(120%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);
  box-shadow:none !important;
}
body.student-light .dashboard-header{background:rgba(247,245,239,.86) !important;}
.dashboard-brand{font-weight:500 !important;letter-spacing:-.005em;color:var(--gs-ink) !important;}
.dashboard-brand i{color:var(--gs-lime) !important;}
/* 控えめさは字送りとサイズで出し、明度はコントラスト基準を満たす側に寄せる。
   注意: tailwind.css の `.dashboard-brand span small` が --cosmos-faint
   （アルファ .48）を当てており、詳細度でこちらより強い。opacity だけ上げても
   色のアルファと掛け算になって 4.28 のままだった。**同じ詳細度で色ごと**
   置き換え、opacity は 1 に戻して二重の減衰をなくす。 */
.dashboard-brand small,.dashboard-brand span small{
  font-size:13px;letter-spacing:.22em;margin-left:8px;text-transform:uppercase;
  opacity:1;color:var(--gs-ink-55) !important;
}
.dashboard-countdown{color:var(--gs-ink-55) !important;}
.dashboard-countdown b{color:var(--gs-lime) !important;font-variant-numeric:tabular-nums;}

.dashboard-tabs{border-bottom:1px solid var(--gs-line);}
.dashboard-tab{
  border:none !important;background:none !important;border-radius:0 !important;
  color:var(--gs-ink-55) !important;
  min-height:var(--gs-hit-min);
  padding:14px 16px !important;
  position:relative;transition:color .18s ease;
}
.dashboard-tab:hover{color:var(--gs-ink) !important;}
.dashboard-tab[aria-selected="true"]{color:var(--gs-ink) !important;}
.dashboard-tab[aria-selected="true"]::after{
  content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;
  background:var(--gs-lime);border-radius:2px;
}
.dashboard-tab small{display:block;font-size:13px;letter-spacing:.14em;opacity:.55;text-transform:uppercase;margin-top:3px;}

/* ---- 7. 「今日の航路」コックピットとタスク行 ---- */
.cockpit-head h2{font-weight:600 !important;letter-spacing:-.03em;}
.streak{
  background:rgba(215,255,58,.10) !important;border:1px solid rgba(215,255,58,.4) !important;
  color:#eefcb6 !important;border-radius:14px !important;
}
body.student-light .streak{background:rgba(63,107,0,.08) !important;color:var(--gs-lime) !important;}

.study-task,.review-task{
  background:rgba(255,255,255,.04) !important;
  border:1px solid var(--gs-line) !important;
  color:var(--gs-ink) !important;
  border-radius:14px !important;
  min-height:var(--gs-hit-min);
  transition:border-color .18s ease, background .18s ease;
}
.study-task:hover,.review-task:hover{
  border-color:rgba(215,255,58,.45) !important;background:rgba(255,255,255,.07) !important;
}
.study-task.is-done{opacity:.45 !important;}
.study-task input{accent-color:var(--gs-lime) !important;}
.task-subject{
  background:rgba(141,233,255,.10) !important;color:var(--gs-cyan) !important;
  border-radius:8px !important;font-weight:600 !important;
}
.task-copy small,.study-task time{color:var(--gs-ink-55) !important;}
body.student-light .study-task,body.student-light .review-task{
  background:rgba(255,255,255,.7) !important;color:var(--gs-ink) !important;
}

.focus-panel{color:var(--gs-ink) !important;border-radius:18px;}
.focus-panel>b{font-size:48px;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--gs-ink) !important;}
.focus-panel>span{color:var(--gs-ink-55) !important;letter-spacing:.22em;font-weight:500 !important;font-size:14px;}
.focus-panel>small{color:var(--gs-lime) !important;}
.focus-panel button{background:var(--gs-lime) !important;color:#0b1200 !important;border-radius:9999px !important;min-height:36px;padding:8px 16px !important;}
.focus-panel button+button{background:rgba(255,255,255,.08) !important;color:var(--gs-ink) !important;}
body.student-light .focus-panel button{color:#fff !important;}
body.student-light .focus-panel button+button{background:rgba(23,37,31,.07) !important;color:var(--gs-ink) !important;}

.review-alert{
  background:rgba(245,217,141,.10) !important;border:1px solid rgba(245,217,141,.35) !important;
  color:var(--gs-gold) !important;border-radius:12px !important;
}

/* ---- 8. フォーム（ウィザードの入力欄） ---- */
input,select,textarea{
  font-family:var(--gs-sans);
}
.field-stack>input,.field-stack>select,.field-stack>textarea,
.add-subject-row select,.deviation-input input,.grade-score-grid input,
.v19-form-row input,.v19-form-row select,.v19-form-row textarea,
.message-form textarea,.message-form select,.message-form input,
.contact-form input,.contact-form textarea,.contact-form select,
.account-form input,.book-page-fields input,.custom-book-form input,
.owned-book-search input,.catalog-search input,.reflection-grid textarea{
  background:rgba(255,255,255,.05) !important;
  border:1px solid var(--gs-line-strong) !important;
  color:var(--gs-ink) !important;
  border-radius:12px !important;
  padding:12px 14px !important;
  min-height:var(--gs-hit-min);
}
/* 【v28 変更】プレースホルダーを --gs-ink-35 → --gs-ink-55 へ。
   実測で ink-35 はダーク4.30 / ライト2.79 / 夜間3.12 と全モードで4.5:1未満だった。
   ink-55 はダーク8.33 / ライト5.15 / 夜間5.25 で全モード合格。
   ink-35 は今後、文字には使わない（装飾記号専用）。 */
input::placeholder,textarea::placeholder{color:var(--gs-ink-55) !important;}
input:hover,select:hover,textarea:hover{border-color:rgba(141,233,255,.45) !important;}
input:focus,select:focus,textarea:focus{
  border-color:rgba(215,255,58,.55) !important;
  box-shadow:0 0 0 4px rgba(215,255,58,.10) !important;
}
body.student-light .field-stack>input,body.student-light .field-stack>select,
body.student-light .field-stack>textarea,body.student-light .add-subject-row select,
body.student-light .deviation-input input,body.student-light .grade-score-grid input,
body.student-light .v19-form-row input,body.student-light .v19-form-row select,
body.student-light .v19-form-row textarea,body.student-light .message-form textarea,
body.student-light .contact-form input,body.student-light .contact-form textarea,
body.student-light .account-form input,body.student-light .reflection-grid textarea{
  background:#fff !important;border-color:var(--gs-line-strong) !important;color:var(--gs-ink) !important;
}
.field-stack>label,.reflection-grid label,.v19-form-row label{
  color:var(--gs-ink-70) !important;font-weight:500 !important;font-size:15px;
}
.field-note,.orbit-note,.route-note,.share-note,.v19-note,.progress-accuracy-note,
.display-note,.empty-help,.scenario-note,.grade-subtitle,.outlook-subtitle{
  color:var(--gs-ink-55) !important;font-size:15px;line-height:1.7;
}
.deviation-input input{color:var(--gs-cyan) !important;font-variant-numeric:tabular-nums;}
input[type=range]{accent-color:var(--gs-lime);}

/* ---- 9. Tailwind ユーティリティの読み替え ------------------
   app.js は text-slate-* / bg-slate-* / border-slate-* を直接使う。
   Genspark のパレットに合わせて全部読み替える。ここを飛ばすと
   「新しい枠の中に古い青灰色の文字」が残って一番目立つ。 */
.text-slate-100,.text-slate-200,.text-white{color:var(--gs-ink) !important;}
.text-slate-300,.text-slate-400{color:var(--gs-ink-70) !important;}
.text-slate-500,.text-slate-600{color:var(--gs-ink-55) !important;}
.text-amber-200,.text-amber-300,.text-amber-400{color:var(--gs-lime) !important;}
.text-emerald-300,.text-emerald-400,.text-green-400{color:var(--gs-cyan) !important;}
.text-sky-300,.text-sky-400,.text-cyan-300,.text-blue-400{color:var(--gs-cyan) !important;}
.text-violet-300,.text-purple-300,.text-indigo-300{color:var(--gs-violet) !important;}
.text-rose-300,.text-rose-400,.text-red-400{color:var(--gs-danger) !important;}
.bg-slate-800,.bg-slate-900,.bg-slate-950,.bg-slate-900\/70{background-color:transparent !important;}
.bg-slate-700,.bg-slate-500{background-color:rgba(255,255,255,.08) !important;}
.border-slate-600,.border-slate-700,.border-slate-800{border-color:var(--gs-line) !important;}
.hover\:bg-slate-800:hover,.hover\:bg-slate-700:hover{background-color:rgba(255,255,255,.08) !important;}
body.student-light .bg-slate-700,body.student-light .bg-slate-500{background-color:rgba(23,37,31,.07) !important;}
body.student-light .hover\:bg-slate-800:hover,body.student-light .hover\:bg-slate-700:hover{background-color:rgba(23,37,31,.06) !important;}

/* ---- 10. トースト / 同意ゲート / フッター ---- */
.toast{
  background:var(--gs-panel-strong) !important;color:var(--gs-ink) !important;
  border:1px solid var(--gs-line-strong) !important;border-left:3px solid var(--gs-lime) !important;
  border-radius:12px !important;backdrop-filter:blur(14px);
}
.toast.warn{border-left-color:var(--gs-gold) !important;}
body.student-light .toast{background:#fff !important;color:var(--gs-ink) !important;}

.consent-gate{background:rgba(5,7,13,.82);backdrop-filter:blur(8px);}
body.student-light .consent-gate{background:rgba(247,245,239,.9);}

.site-footer,.immersive-footer{
  background:linear-gradient(180deg, transparent, rgba(5,7,13,.72)) !important;
  border-top:1px solid var(--gs-line) !important;
  color:var(--gs-ink-70) !important;margin-top:72px;
}
body.student-light .site-footer,body.student-light .immersive-footer{
  background:linear-gradient(180deg, transparent, rgba(23,37,31,.05)) !important;
}
.site-footer h2,.immersive-footer h2{
  font-size:14px !important;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gs-ink-55) !important;font-weight:500 !important;
}
.site-footer a:hover,.immersive-footer a:hover{color:var(--gs-ink) !important;}
.hr-mini{height:1px;background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);}

/* ---- 11. タッチ hit target 44px の保証（Genspark の必須要件） ---- */
.dashboard-actions button,.dashboard-tab,.wizard-next,.wizard-back,.account-btn,
.lp-cta,.v19-primary,.v19-ghost,.minimum-button,.save-reflection,
.selected-subjects button,.v19-remove,.replace-book-btn{
  min-height:var(--gs-hit-min);
}
.selected-subjects button,.v19-remove{
  min-width:var(--gs-hit-min);border-radius:9999px;
}

/* ---- 12. 明るい配色で取り残された面の修復 --------------------
   本スキンは文字色を --gs-* 系へ寄せたので、**背景だけが暗いまま残った
   コンポーネント**が「暗い面に暗い文字」になる。ブラウザ上で
   「明るい配色なのに輝度0.18未満の面」を数えて洗い出した結果、
   実害があったのは学習航路レーダーの中心円だけだった。 */
body.student-light .route-orbit__core{
  background:var(--gs-panel-strong) !important;
  border-color:var(--gs-line-strong) !important;
  box-shadow:0 0 30px rgba(15,109,134,.10) !important;
}
body.student-light .route-orbit__core small{color:var(--gs-cyan) !important;}
body.student-light .route-orbit__core strong{color:var(--gs-ink) !important;}
body.student-light .route-orbit__core strong span,
body.student-light .route-orbit__core p{color:var(--gs-ink-55) !important;}

/* 合格到達度の大きな数字と「この点数の出し方」は style.css が
   sky-400(#38bdf8) / sky-300(#7dd3fc) を直書きしている。暗い背景では
   足りていたが、白いカードの上では 1.96 / 1.67 まで落ちる。
   Tailwindユーティリティ経由ではないので §9 の読み替えでは拾えない。 */
body.student-light .outlook-score b{color:var(--gs-cyan) !important;}
body.student-light .outlook-score b.is-good{color:#0f7a48 !important;}
body.student-light .outlook-score b.is-warn{color:#8b6500 !important;}
body.student-light .outlook-score b.is-danger{color:var(--gs-danger) !important;}
body.student-light .outlook-method summary{color:var(--gs-cyan) !important;}

/* ---- 13. モーション / 高コントラスト / 印刷 ---- */
@media (prefers-reduced-motion:reduce){
  .site-cosmic-video{display:none !important;}
  *,*::before,*::after{animation:none !important;transition:none !important;}
}
@media (forced-colors:active){
  .site-cosmic-video,.site-cosmic-veil,.world-atmosphere{display:none !important;}
  .lp-card,.wizard-card,.learning-cockpit,.plan-summary,.v19-card{
    background:Canvas !important;color:CanvasText !important;border:1px solid CanvasText !important;
    box-shadow:none !important;backdrop-filter:none !important;
  }
}
@media print{
  .site-cosmic-video,.site-cosmic-veil,.world-atmosphere,.dashboard-header{display:none !important;}
  .lp-card,.wizard-card,.learning-cockpit,.plan-summary,.v19-card,.route-plan,.reflection-card{
    background:#fff !important;color:#111 !important;border:1px solid #ccc !important;
    box-shadow:none !important;backdrop-filter:none !important;
  }
}

/* ---- 14. 教材の判別ダイアログ（v25） ------------------------
   撮影・バーコード読み取り・候補提示を1枚で行う。候補は必ず
   「一致度」と「レベル情報の有無」を添えて出す（自動確定しない）。 */
.identify-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.identify-actions .v19-ghost{font-size:15px;}
.identify-actions .v19-ghost.is-quiet{opacity:.75;}

.identify-dialog{
  border:none;padding:0;background:transparent;max-width:min(560px,94vw);width:100%;
}
.identify-dialog::backdrop{background:rgba(5,7,13,.72);backdrop-filter:blur(6px);}
.identify-dialog form{
  background:linear-gradient(160deg, rgba(255,255,255,.09), rgba(6,12,24,.92));
  border:1px solid var(--gs-line-strong);border-radius:22px;padding:22px;
  color:var(--gs-ink);
  box-shadow:0 30px 90px rgba(0,0,0,.5);
  display:flex;flex-direction:column;gap:14px;
}
body.student-light .identify-dialog form{background:var(--gs-panel-strong);}
.identify-dialog header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.identify-dialog header h2{font-size:18px;font-weight:600;margin:4px 0 0;letter-spacing:-.02em;}
.identify-dialog header button{
  min-width:var(--gs-hit-min);min-height:var(--gs-hit-min);border-radius:9999px;
  background:rgba(255,255,255,.06);color:var(--gs-ink);border:1px solid var(--gs-line);
}
.identify-stage{
  border-radius:16px;overflow:hidden;background:rgba(0,3,10,.5);
  min-height:150px;display:grid;place-items:center;padding:12px;
}
body.student-light .identify-stage{background:rgba(23,37,31,.05);}
.identify-stage video{width:100%;max-height:44vh;object-fit:cover;border-radius:12px;display:block;}
.identify-status{font-size:15px;line-height:1.7;color:var(--gs-ink-70);margin:0;}
.identify-status b{color:var(--gs-ink);}
.identify-dialog footer{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}
.identify-dialog footer button[value="cancel"]{
  border:1px solid var(--gs-line-strong);border-radius:9999px;padding:12px 20px;
  background:rgba(255,255,255,.04);color:var(--gs-ink);min-height:var(--gs-hit-min);
}

.identify-list{display:flex;flex-direction:column;gap:8px;width:100%;}
.identify-option{
  text-align:left;width:100%;border:1px solid var(--gs-line);border-radius:14px;
  padding:12px 14px;background:rgba(255,255,255,.04);color:var(--gs-ink);
  min-height:var(--gs-hit-min);display:flex;flex-direction:column;gap:3px;
  transition:border-color .18s ease, background .18s ease;
}
.identify-option:hover,.identify-option:focus-visible{
  border-color:rgba(215,255,58,.5);background:rgba(255,255,255,.08);
}
body.student-light .identify-option{background:rgba(255,255,255,.72);}
.identify-option b{font-size:16px;font-weight:600;line-height:1.4;}
.identify-option span{font-size:14px;color:var(--gs-ink-70);}
.identify-option small{font-size:14px;color:var(--gs-ink-55);font-variant-numeric:tabular-nums;}

/* ---- 15. ネイティブ部品の配色（v25.2・実機の不具合報告から） ------------
   報告: 学部選択のプルダウンが「白背景に白文字」で読めない。

   原因は `color-scheme` の指定漏れ。select 本体には色を当てていたが、
   **ドロップダウンの中身(option)はOSが描く**ため、
   - option の背景 = 透明 → OSが既定の「白」で塗る
   - option の文字 = select から継承した ほぼ白
   となって同化していた。実測で option が 814 個すべてこの状態だった。

   直し方は2段構え。
   1. `color-scheme` を配色ごとに宣言し、ネイティブ部品全体
      （プルダウン・スクロールバー・日付ピッカー・数値スピナー）を
      正しい明暗で描かせる。これが根本の修正。
   2. そのうえで option/optgroup に**不透明な背景**を明示する。
      color-scheme を見ないブラウザでも白背景に落ちないようにするため。
   ------------------------------------------------------------------- */

/* 1. 根本修正: 配色モードをブラウザに伝える */
:root{ color-scheme: dark; }
:root:has(body.student-light){ color-scheme: light; }
body.site-shell{ color-scheme: dark; }
body.student-light{ color-scheme: light; }

/* 2. プルダウンの中身。**背景は必ず不透明にする**（透明だとOSの白が出る） */
select option,
select optgroup{
  background-color:#0d1524;
  color:#f6f9ff;
}
body.student-light select option,
body.student-light select optgroup{
  background-color:#ffffff;
  color:#17251f;
}
body.student-light.theme-night select option,
body.student-light.theme-night select optgroup{
  background-color:#f8f2e7;
  color:#2b2620;
}
select optgroup{ font-weight:600; }
/* 選べない項目は薄くするが、背景は保ったままにする（消えないように） */
select option:disabled{ color:var(--gs-ink-55); }

/* 3. チェックボックス・ラジオ・スライダーの色。auto のままだと
      明るいモードの既定色で描かれ、暗い面から浮く */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress{ accent-color: var(--gs-lime); }

/* 4. Chromeの自動入力。既定で薄黄色の背景＋黒文字に上書きされ、
      暗い面の中でここだけ白飛びする。内側の影で塗り替える
      （background-color は自動入力時に効かないため box-shadow を使う） */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--gs-ink);
  -webkit-box-shadow: 0 0 0 1000px #0d1524 inset;
  caret-color: var(--gs-ink);
}
body.student-light input:-webkit-autofill,
body.student-light input:-webkit-autofill:hover,
body.student-light input:-webkit-autofill:focus{
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
}

/* 5. 入力欄のカーソル色。文字色に合わせないと暗い面で見失う */
input, textarea, select{ caret-color: var(--gs-ink); }

/* ---- 16. 薄すぎるトークンの是正（v25.2） --------------------------
   `--cosmos-faint` は暗い配色で #e0eaf97a（アルファ .48）。
   これを文字色に使っている箇所が実測 4.28 で 4.5:1 を割っていた。
   使用箇所は `.wizard-route__leg`（ウィザードの未到達ステップ）と
   `.dashboard-brand span small`。**個別に直すとまた別の箇所で再発する**ので
   トークンそのものを底上げする。控えめさはアルファではなく字送りとサイズで出す。
   （--cosmos-muted はアルファ .70 で約7.7:1、線・面のトークンは文字ではないため対象外） */
:root{ --cosmos-faint: rgba(246,249,255,.66); }

/* ---- 17. 明るい配色で「白い面に白い文字」になる箇所の一掃（v25.2） ----
   報告のあった学部プルダウンを直す過程で、**明るい配色のウィザード見出しが
   比1.00＝完全に見えない**状態だと分かった（「大学と学部を選択」など）。

   原因は §12 と同じ構図。tailwind.css が暗い配色前提で白文字を直書きしており
   （14セレクタ。うち一部は !important）、本スキンが面を明るく塗り替えたことで
   白×白になった。個別に潰すと再発するので、**該当セレクタをまとめて
   配色トークンへ差し戻す**。

   ボタン類（.wizard-next / .add-subject-row button / .focus-panel button 等）は
   ライム地の上に載るので白のままが正しい。ここでは**面の上に載る文字だけ**を扱う。 */
body.student-light .wizard-card h1,
body.student-light .wizard-card h2,
body.student-light .wizard-card h3,
body.student-light .lp-nav__brand,
body.student-light .dashboard-brand,
body.student-light .admin-bar__brand,
body.student-light .legal-header a,
body.student-light .legal-page h1,
body.student-light .legal-page h2,
body.student-light .admin-card h1,
body.student-light .admin-card h2,
body.student-light .admin-card h3,
body.student-light .admin-stat b,
body.student-light .react-fallback h1{
  color:var(--gs-ink) !important;
  -webkit-text-fill-color:var(--gs-ink);
}
/* ヘッダーのアイコンだけはアクセント色を保つ（真っ黒にすると識別が落ちる） */
body.student-light .lp-nav__brand i,
body.student-light .dashboard-brand i{ color:var(--gs-lime) !important; }

/* 見出しのグラデーション文字（style.css）は明るい配色で
   -webkit-text-fill-color が効いたままだと白く抜ける */
body.student-light .plan-summary__main h1,
body.student-light .route-orbit-panel h2,
body.student-light .priority-section h2,
body.student-light .three-year-roadmap h2,
body.student-light .learning-cockpit h2,
body.student-light .reflection-card h2,
body.student-light .progress-diagnosis h2{
  color:var(--gs-ink) !important;
  -webkit-text-fill-color:var(--gs-ink) !important;
  background:none !important;
}

/* ---- 18. 明るい配色で残っていた低コントラスト（v25.2・実測から） ------
   §17 で見出しは直ったが、ブラウザ上で全ステップを走査したところ
   本文・補足でまだ基準未満が残っていた。style.css が暗い配色前提の
   固定色（cyan-100 / amber / slate-400）を直書きしている箇所で、
   ライト用の上書きが無いもの。**実測で落ちたものだけ**を直す
   （アクセント地の上に載る白文字まで巻き込むと今度はそちらが壊れる）。

     .source-note b                1.12  「文部科学省 令和7年度全国大学一覧」
     ラベル内の「必須」バッジ        1.67
     .deviation-input span         2.56  「偏差値」
     .source-note span             2.56  「大学・学部名データ更新」
     .owned-book-isbn label span   2.20  「ISBN（任意・裏表紙のバーコード）」
     .wizard-route__leg            1.07  完了済みステップ（白のアルファ.75）
   ------------------------------------------------------------------- */
body.student-light .source-note b,
body.student-light .normalization-summary{ color:var(--gs-cyan) !important; }

body.student-light .source-note span,
body.student-light .deviation-input span,
body.student-light .picker-heading p,
body.student-light .owned-book-isbn label span,
body.student-light .owned-book-search label span,
body.student-light .field-stack>label small{ color:var(--gs-ink-55) !important; }

/* 「必須」などラベル内の強調。琥珀は白地で 1.67 しかない */
body.student-light .field-stack>label b,
body.student-light .identity-grid label b,
body.student-light .owned-book-grid label b{ color:#8b6500 !important; }

/* ウィザードの進捗表示。到達済みは白のアルファ.75、未到達は --cosmos-faint。
   どちらも明るい面では読めないので、配色トークンへ寄せる */
body.student-light .wizard-route__leg,
body.student-light .wizard-route__leg b,
body.student-light .wizard-route__leg span{ color:var(--gs-ink-55) !important; }
body.student-light .wizard-route__leg.is-done,
body.student-light .wizard-route__leg.is-done b,
body.student-light .wizard-route__leg.is-done span,
body.student-light .wizard-route__leg.is-current,
body.student-light .wizard-route__leg.is-current b,
body.student-light .wizard-route__leg.is-current span{ color:var(--gs-ink) !important; }

/* ---- 19. 明るい配色で「面だけ暗いまま」の一掃（v25.2） ---------------
   §12 で学習航路レーダーの中心円を直したのと同じ構図が他にもあった。
   本スキンは文字色を配色トークンへ寄せるので、**背景だけ暗いまま残った
   コンポーネント**が「暗い面に暗い文字」になる。

   実測（明るい配色・Step2/3）:
     .deviation-row  背景 rgba(17,26,49,.58) のまま
       → 「国語」1.09 / 「原偏差値」2.23 / 「教材ルート: 現代文」2.93

   CSSを機械的に突き合わせ、暗い背景を持つのに明るい配色の上書きが無い
   クラスを洗い出して、まとめて面を差し替える。 */
body.student-light .deviation-row{
  background:rgba(255,255,255,.72) !important;
  border-color:var(--gs-line) !important;
}
body.student-light .deviation-row small{ color:var(--gs-ink-55) !important; }
body.student-light .deviation-row label{ color:var(--gs-ink-70) !important; }
body.student-light .deviation-row b{ color:var(--gs-ink) !important; }

/* SSRフォールバック（React読込前の一瞬）と管理画面の暗い面 */
body.student-light .ssr-features,
body.student-light .ssr-how,
body.student-light .ssr-disclaimer,
body.student-light .admin-secret{
  background:var(--gs-panel) !important;
  border-color:var(--gs-line) !important;
  color:var(--gs-ink) !important;
}
/* 現在の端末バッジは緑地に白文字で自己完結しているが、
   明るい配色では地の緑が浮くので落ち着いた色へ寄せる */
body.student-light .account-current-device{
  background:rgba(15,118,110,.12) !important;
  color:#0f5f57 !important;
}

/* ---- 20. スマホのタップ領域を44pxへ揃える（v25.3） -------------------
   実機幅375pxで計測したところ、計画画面側に基準未満が5件残っていた。
   LP側（§lp-v24）は44pxを保証しているのに、SPA側だけ漏れていた形。

     .dashboard-menu-btn      40px（style.css が min-height:40px を指定）
     .site-footer nav > a     38px ×4（運営者情報／プライバシー／利用規約／お問い合わせ）

   押せないほどではないが、基準を片方だけ満たしている状態は次に触る人の
   判断を誤らせる。フッターは見た目の行間を変えたくないので、
   LP と同じ「min-height + ::before で hit area を広げる」方式に合わせる。 */
.dashboard-menu-btn{ min-height:var(--gs-hit-min) !important; }

.site-footer nav > a{
  position:relative;
  min-height:var(--gs-hit-min);
  display:inline-flex;
  align-items:center;
}
.site-footer nav > a::before{
  content:"";
  position:absolute;
  inset:-3px -6px;
}

/* ヘッダーのブランド名もリンク。実測21pxだったので hit area を広げる
   （見た目のサイズは変えない。ロゴを大きくすると版面が崩れるため） */
.lp-nav__brand,
.dashboard-brand a,
a.dashboard-brand{
  position:relative;
  min-height:var(--gs-hit-min);
  display:inline-flex;
  align-items:center;
}
.lp-nav__brand::before,
.dashboard-brand a::before,
a.dashboard-brand::before{
  content:"";
  position:absolute;
  inset:-12px -8px;
}

/* チェックボックス・ラジオを包むラベル。**実質の当たり判定はラベル**なので、
   本体（13〜22px）ではなくラベル側を44pxにする。
   ラジオはもともとラベルが大きく問題なかったが、「完了済み」のように
   1行だけのラベルは22pxしかなかった。
   :has() 非対応の環境向けに、既知のクラスも併記しておく。 */
#app label:has(> input[type="checkbox"]),
#app label:has(> input[type="radio"]),
.past-exam-check,
.consent-check{
  min-height:var(--gs-hit-min);
  display:flex;
  align-items:center;
}

/* 教材一覧のチェックボックス（28px）と、本文中の「出版社確認先」リンク（高さ28px）は
   **意図して44pxにしていない**。
   - チェックボックス28pxは WCAG 2.2 AA の最小 24×24px を満たす。44pxまで広げると
     教材リストの行が間延びし、1画面に収まる冊数が大きく減る
   - 文章の中に置かれたインラインリンクは、WCAG 2.5.8 で対象サイズの適用外
   ここを一律44pxにすると、基準を満たすために読みやすさを失う。
   触る人が「直し漏れ」と誤解しないよう、判断として書き残しておく。 */
.book-item input[type="checkbox"]{ min-width:24px; min-height:24px; }

/* ---- 21. 管理画面の通知トグル（v26） ------------------------ */
.admin-toggle{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;border:1px solid var(--gs-line-strong);border-radius:14px;
  background:rgba(255,255,255,.04);cursor:pointer;
  min-height:var(--gs-hit-min);
}
body.student-light .admin-toggle{background:rgba(255,255,255,.6);}
.admin-toggle:hover{border-color:rgba(215,255,58,.45);}
.admin-toggle input{margin-top:3px;flex:none;width:20px;height:20px;}
.admin-toggle span{display:flex;flex-direction:column;gap:4px;}
.admin-toggle b{font-size:16px;font-weight:600;}
.admin-toggle small{font-size:15px;line-height:1.65;color:var(--gs-ink-55);}

/* ---- 22. 実測時間のまとめて入力 / 記録画面の読み取り（v27） -------- */
.bulk-dialog{border:none;padding:0;background:transparent;max-width:min(660px,94vw);width:100%;}
.bulk-dialog::backdrop{background:rgba(5,7,13,.72);backdrop-filter:blur(6px);}
.bulk-dialog form{
  background:linear-gradient(160deg, rgba(255,255,255,.09), rgba(6,12,24,.94));
  border:1px solid var(--gs-line-strong);border-radius:22px;padding:22px;
  color:var(--gs-ink);box-shadow:0 30px 90px rgba(0,0,0,.5);
  display:flex;flex-direction:column;gap:14px;max-height:88vh;overflow-y:auto;
}
body.student-light .bulk-dialog form{background:var(--gs-panel-strong);}
.bulk-dialog header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.bulk-dialog header h2{font-size:18px;font-weight:600;margin:4px 0 0;letter-spacing:-.02em;}
.bulk-dialog header button[value="cancel"]{
  min-width:var(--gs-hit-min);min-height:var(--gs-hit-min);border-radius:9999px;
  background:rgba(255,255,255,.06);color:var(--gs-ink);border:1px solid var(--gs-line);
}

.bulk-import{
  display:flex;flex-direction:column;gap:8px;padding:14px;
  border:1px dashed var(--gs-line-strong);border-radius:14px;
}
.bulk-import .v19-ghost{align-self:flex-start;}

.bulk-rows{display:flex;flex-direction:column;gap:10px;}
.bulk-row{
  display:grid;gap:8px;align-items:end;
  grid-template-columns:1fr 1fr auto;
  padding:12px;border:1px solid var(--gs-line);border-radius:14px;
  background:rgba(255,255,255,.04);
}
body.student-light .bulk-row{background:rgba(255,255,255,.65);}
@media (max-width:560px){ .bulk-row{grid-template-columns:1fr 1fr;} }
.bulk-row label{display:flex;flex-direction:column;gap:4px;min-width:0;}
.bulk-row__label{font-size:14px;color:var(--gs-ink-55);font-weight:500;}
.bulk-row select,.bulk-row input{
  min-height:var(--gs-hit-min);
  background:rgba(255,255,255,.05);border:1px solid var(--gs-line-strong);
  color:var(--gs-ink);border-radius:10px;padding:8px 10px;width:100%;
}
body.student-light .bulk-row select,body.student-light .bulk-row input{background:#fff;}
.bulk-row__remove{
  min-width:var(--gs-hit-min);min-height:var(--gs-hit-min);
  border-radius:10px;border:1px solid var(--gs-line-strong);
  background:rgba(255,255,255,.04);color:var(--gs-ink-55);
}
.bulk-row__remove:hover{border-color:var(--gs-danger);color:var(--gs-danger);}

.bulk-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.bulk-total{font-size:15px;color:var(--gs-ink-55);font-variant-numeric:tabular-nums;}
.bulk-status{font-size:15px;line-height:1.7;color:var(--gs-ink-70);margin:0;min-height:1.2em;}
.bulk-status.is-error{color:var(--gs-danger);}
.bulk-dialog footer{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}
.bulk-dialog footer button[value="cancel"]{
  border:1px solid var(--gs-line-strong);border-radius:9999px;padding:12px 20px;
  background:rgba(255,255,255,.04);color:var(--gs-ink);min-height:var(--gs-hit-min);
}

.bulk-scan{
  border-radius:16px;overflow:hidden;background:rgba(0,3,10,.5);
  padding:12px;display:flex;flex-direction:column;gap:10px;
}
body.student-light .bulk-scan{background:rgba(23,37,31,.05);}
.bulk-scan video{width:100%;max-height:40vh;object-fit:cover;border-radius:12px;display:block;}
.bulk-scan__actions{display:flex;gap:10px;flex-wrap:wrap;}

/* ============================================================
   【v28 追加】改善セクション（2026-08-22）
   1. 検証済み/参考候補バッジの一瞬で分かる差別化
   2. ウィザード離脱対策（進捗の可視化・次アクションの固定表示）
   変更はこのファイル末尾に集約する（後勝ちの設計に従う）。
   ============================================================ */

/* ---- v28-1. 検証済み/参考候補バッジ ----------------------------
   従来は §5 の共通バッジ規則（!important）が style.css の
   .verify-badge.is-verified / .is-reference の色分けを打ち消し、
   両者が「同じ灰色のチップ」に見えていた。
   ダーク実測: 共通規則の ink-70 は 12.4:1 だが**色差ゼロ**。
   改善後: 検証済み=ライム系+✓前置、参考候補=琥珀系+要確認マーク。
   コントラスト実測（本ファイル冒頭のトークンで計算）:
     ダーク  #eefcb6 on lime12%面 13.62:1 / #ffe1a8 on 琥珀10%面 12.69:1
     ライト  #2c4a00 on 緑10%面    8.64:1 / #6b4e00 on 琥珀8%面    6.90:1
     夜間    #2c4a00               7.80:1 / #6b4e00                6.22:1 */
.verify-badge.is-verified,
.owned-book-options>button em.is-verified{
  background:rgba(215,255,58,.12) !important;
  border-color:rgba(215,255,58,.5) !important;
  color:#eefcb6 !important;
  font-weight:700 !important;
}
.verify-badge.is-verified::before,
.owned-book-options>button em.is-verified::before{
  content:"✓ ";font-weight:900;letter-spacing:0;
}
.verify-badge.is-reference,
.owned-book-options>button em:not(.is-verified){
  background:rgba(245,217,141,.10) !important;
  border-color:rgba(245,217,141,.45) !important;
  color:#ffe1a8 !important;
  font-weight:700 !important;
}
.verify-badge.is-reference::before{
  content:"⚠ ";font-weight:900;letter-spacing:0;
}
body.student-light .verify-badge.is-verified,
body.student-light .owned-book-options>button em.is-verified{
  background:rgba(63,107,0,.10) !important;
  border-color:rgba(63,107,0,.5) !important;
  color:#2c4a00 !important;
}
body.student-light .verify-badge.is-reference,
body.student-light .owned-book-options>button em:not(.is-verified){
  background:rgba(139,101,0,.08) !important;
  border-color:rgba(139,101,0,.45) !important;
  color:#6b4e00 !important;
}
/* 色覚に依存しない冗長化: 形（✓/⚠）+太さ+色の3経路で区別する。
   forced-colors では背景が消えるため、記号だけでも判別できる。 */
@media (forced-colors:active){
  .verify-badge.is-verified,.verify-badge.is-reference{border-width:2px !important;}
}

/* ---- v28-2. ウィザード離脱対策 ---------------------------------
   6ステップの途中離脱を減らす3点をCSSだけで行う。
   (a) 完了ステップに✓を出し「進んでいる」実感を作る
   (b) 現在ステップをライムのリングで強調し現在地の迷子を防ぐ
   (c) モバイルで次へ/戻るボタンを画面下に固定し、
       長いフォームでもスクロールせず次アクションへ到達できる     */
.wizard-route__leg.is-done .wizard-route__pin{
  background:var(--gs-lime) !important;border-color:var(--gs-lime) !important;
  position:relative;
}
.wizard-route__leg.is-done .wizard-route__pin::after{
  content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:900;color:#0b1200;line-height:1;
}
.wizard-route__leg.is-current .wizard-route__pin{
  background:var(--gs-cyan) !important;border-color:var(--gs-cyan) !important;
  box-shadow:0 0 0 4px rgba(141,233,255,.25);
}
.wizard-route__leg.is-current b,.wizard-route__leg.is-current span{
  color:var(--gs-ink) !important;font-weight:700;
}
/* 進捗の背骨線。leg間の到達感を面でも見せる */
#wizard-progress{position:relative;}

/* (c) モバイル: アクション行を下部固定。誤タップ防止に背景を敷く */
@media (max-width:640px){
  .wizard-actions{
    position:sticky;bottom:0;z-index:20;
    margin:16px -4px 0;padding:10px 4px calc(10px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg, transparent, var(--gs-bg) 32%);
    backdrop-filter:blur(6px);
  }
  body.student-light .wizard-actions{
    background:linear-gradient(180deg, transparent, var(--gs-bg) 32%);
  }
}
/* 次へボタンが無効(is-locked)のとき、理由が近くにあると分かる形で
   「押せない」を明示する（disabled の透明度だけでは気づかれない） */
.wizard-next.is-locked{
  opacity:.45 !important;cursor:not-allowed !important;
  filter:grayscale(.4);
}

/* ---- v28-3. 照合失敗フォールバックのボタン群（app-v19.js対応） ----
   失敗ステータスの直下に縦積みで出す。タップ44px以上を保証する。 */
.identify-fallback{
  display:flex;flex-direction:column;gap:10px;margin-top:12px;
}
.identify-fallback button{
  min-height:var(--gs-hit-min);
  border-radius:9999px;padding:10px 18px;
  border:1px solid var(--gs-line-strong);
  background:rgba(255,255,255,.05);color:var(--gs-ink);
  font-weight:600;
}
.identify-fallback button:hover{border-color:var(--gs-cyan);}
.identify-fallback .v19-primary{
  background:var(--gs-lime);color:#0b1200;border-color:transparent;
}
body.student-light .identify-fallback button{background:rgba(23,37,31,.04);}
body.student-light .identify-fallback .v19-primary{
  background:var(--gs-lime);color:#fff;
}


/* ============================================================
   【v31 追加】教材登録：カードを2つの箱へ振り分ける
   ------------------------------------------------------------
   探す場所を上に1つ置き、出てきた教材を角丸カードにして
   「やっている途中」「終わった」へドラッグして仕分ける。
   カードの色は教科のイメージカラー（--card-color をJSが入れる）。
   ドラッグはキーボード・支援技術で使えないため、カード内の
   移動ボタンを常に併置し、そちらでも同じ操作ができるようにする。
   ============================================================ */
.sorter-search{
  display:grid;gap:10px;margin:16px 0;padding:14px;
  border:1px solid var(--gs-line-strong);border-radius:14px;
  background:rgba(255,255,255,.04);
}
.sorter-search__row{display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);gap:10px;}
.sorter-search__row label{display:grid;gap:5px;color:var(--gs-ink-70);font-size:14px;font-weight:800;}
.sorter-search__scan{display:flex;flex-wrap:wrap;gap:8px;}
.sorter-search__note{margin:0;color:var(--gs-ink-55);font-size:14px;}
.owned-free-add{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:var(--gs-hit-min);margin-top:6px;
  border:1px dashed var(--gs-line-strong);border-radius:10px;
  background:transparent;color:var(--gs-ink-70);font-size:15px;font-weight:700;
}
.owned-free-add:hover{border-color:var(--gs-cyan);color:var(--gs-ink);}

/* ---- 箱 ---- */
.sorter-tray,.sorter-zone{
  padding:12px;border-radius:14px;
  border:1.5px dashed var(--gs-line-strong);
  background:rgba(255,255,255,.02);
}
.sorter-tray{margin:12px 0;}
.sorter-zones{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.sorter-tray>header,.sorter-zone>header{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.sorter-tray h3,.sorter-zone h3{margin:0;font-size:16px;color:var(--gs-ink);}
.sorter-tray>header span,.sorter-zone>header span{color:var(--gs-ink-55);font-size:14px;font-weight:800;}
.sorter-zone__hint{margin:4px 0 10px;color:var(--gs-ink-55);font-size:14px;line-height:1.6;}
.sorter-zone__cards{display:grid;gap:8px;min-height:76px;}
.sorter-zone__empty{
  display:flex;align-items:center;justify-content:center;
  margin:0;padding:16px 10px;text-align:center;
  color:var(--gs-ink-55);font-size:14px;line-height:1.6;
}
/* ドラッグ中に下に来ている箱 */
.sorter-zone.is-over,.sorter-tray.is-over{
  border-style:solid;border-color:var(--gs-lime);
  background:rgba(215,255,58,.10);
}
.sorter-note{margin:12px 0 0;color:var(--gs-ink-55);font-size:14px;line-height:1.7;}

/* ---- 教材カード（角丸・教科色） ---- */
.owned-card{
  display:grid;gap:8px;padding:12px;
  border-radius:14px;
  border:1px solid color-mix(in srgb, var(--card-color) 55%, transparent);
  background:color-mix(in srgb, var(--card-color) 16%, transparent);
  border-left:5px solid var(--card-color);
  color:var(--gs-ink);
  touch-action:none;          /* ドラッグ中に画面がスクロールしないように */
  cursor:grab;
}
.owned-card:focus-visible{outline:3px solid var(--gs-cyan);outline-offset:2px;}
.owned-card__body{display:grid;gap:2px;}
.owned-card__body i{color:var(--card-color);font-size:16px;}
.owned-card__body b{font-size:16px;line-height:1.5;word-break:break-word;}
.owned-card__body small{color:var(--gs-ink-70);font-size:13px;}
.owned-card__moves{display:flex;flex-wrap:wrap;gap:6px;}
.owned-card__moves button{
  min-height:var(--gs-hit-min);padding:8px 12px;
  border-radius:9999px;border:1px solid var(--gs-line-strong);
  background:rgba(255,255,255,.06);color:var(--gs-ink);
  font-size:14px;font-weight:700;
}
.owned-card__moves button:hover:not(:disabled){border-color:var(--gs-cyan);}
.owned-card__moves button:disabled{opacity:.35;cursor:not-allowed;}
.owned-card.is-dragging{
  z-index:60;cursor:grabbing;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  transform:rotate(-1.5deg);opacity:.95;pointer-events:none;
}
body.student-light .owned-card{background:color-mix(in srgb, var(--card-color) 12%, #fff);}
body.student-light .owned-card__moves button{background:rgba(23,37,31,.05);}

/* color-mix 非対応ブラウザでも面と枠が消えないようにする */
@supports not (background: color-mix(in srgb, red 10%, transparent)){
  .owned-card{background:rgba(255,255,255,.06);border-color:var(--gs-line-strong);}
}
@media (max-width:640px){
  .sorter-search__row{grid-template-columns:1fr;}
  .sorter-zones{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .owned-card.is-dragging{transform:none;}
}
@media (forced-colors:active){
  .owned-card{border:2px solid CanvasText;}
  .sorter-zone.is-over,.sorter-tray.is-over{border:3px solid Highlight;}
}

/* ============================================================
   【v33 追加】行長の上限（WCAG SC 1.4.8）
   ------------------------------------------------------------
   SC 1.4.8 は1行の上限を「80文字、CJKなら40文字」と定める。
   和文の字面は欧文のおよそ2倍の幅を持つため半分にされている。
   実測: 1440px幅で本文11個中10個が超過し、最長105.5字だった
   （モバイルだけ測っていて見落としていた）。
   和文は1文字≒1emなので、38em で約38字に収まる。
   行が長いほど行間も広く要るという指摘に合わせ、本文の行間も確保する。
   ============================================================ */
#app p,
#app li,
#app dd,
#app .v19-note,
#app .empty-help{
  max-width:38em;
}
/* 数値や短いラベルを中央寄せしている箇所では、上限が効くと
   左に寄って見えるため中央維持を明示する */
/* 【2026-09-04】text-align:center を「親から継承している」要素は下のセレクタに
   当たらず、38em の上限だけが効いて左に寄る。フッターの一文がこれだった
   （幅608pxの箱が1120pxの左端に置かれ、その中で中央揃えになっていた）。 */
.site-footer p,.site-footer small,
#app .site-footer p,#app .site-footer small{
  margin-left:auto;margin-right:auto;
}
#app [style*="text-align:center"] p,
#app .text-center p,
#app p.text-center{
  margin-left:auto;margin-right:auto;
}
/* 段落間は行間の1.5倍以上（SC 1.4.8）。
   実測で26件中5件が下回っていた。 */
#app p + p{
  margin-top:max(1.5em, 0.75rem);
}

/* ============================================================
   【v33 追加】Tailwindの最小サイズも13pxへ
   ------------------------------------------------------------
   --text-xs は既定で .75rem（12px）。app.js で21箇所使われており、
   ダッシュボードのツールバー（共有/CSV/保存/印刷/再作成）が
   ここだけ12pxで残っていた。CSSファイル側だけ底上げしても、
   ユーティリティクラス経由の指定は素通りする。
   トークンを上書きして、経路を問わず13pxを下限にする。
   ============================================================ */
:root{ --text-xs:.8125rem; }   /* 12px -> 13px */

/* ============================================================
   2026-09-02 最終監査（Lens4 視認性）で実測値から直した箇所。
   V-1 13px 未満: step1 label small 12px / step5 選択肢 small 12.8px / 進捗リング「%」11.9px
   V-3 行間: 本文 1.6〜1.43 → 1.75（要件 1.7〜1.9）
   V-4 .outlook-band は 2〜3 行の文章なのにチップ扱い line-height:1 で行が重なっていた
   V-5 1440px の行長: legal p 53字 / LP 免責 64字 → 全角 40 字相当で折り返す
   タップ領域: 同意チェック 22px / step5 チェック 13px / <summary> 22px → 24px 以上（WCAG 2.5.8）
   ============================================================ */
.field-stack>label small,.owned-books-choice small{font-size:13px !important;}
.field-stack>label small{color:#94a3b8 !important;} /* #64748b は 4.23:1 → 13px 本文の 4.5:1 を満たす色へ */
.route-orbit__core strong span{font-size:max(13px,.35em) !important;}
.legal-page p,.legal-page li,.lp24 p,.lp24 .hero__copy,.wizard-card p,.wizard-card .field-note,
.consent-links,.plan-summary__meta,.source-note span,.outlook-factor,.text-sm.text-slate-400,.v19-note,
.site-footer p,.site-footer small,.legal-lead,.contact-form p,.contact-form label{line-height:1.75 !important;}
.outlook-band{display:block !important;padding:0 !important;border:0 !important;border-radius:0 !important;
  font-size:15px !important;line-height:1.8 !important;font-weight:400 !important;background:transparent !important;}
.legal-page p,.legal-page li{max-width:40em;}
.lp24 .foot__disclaimer{max-width:40em;}
.consent-check input,.owned-book-card input[type=checkbox],.past-exam-panel input[type=checkbox],
.deviation-row input[type=checkbox],.display-item input[type=checkbox],.owned-books-choice input[type=radio],.integrated-fields input[type=checkbox]{width:24px !important;height:24px !important;min-width:24px;min-height:24px;flex:0 0 auto;}
.outlook-method summary,details>summary{min-height:24px;display:flex;align-items:center;padding:6px 0;}