/* ますっち — Design System v7
   -------------------------------------------------------------------------
   組み立ては InfraAcademy にそろえる。角は小さく（8〜16px）、
   影は薄く1段だけ、見出しははっきり太く、地は白の一枚。

   色はTOPページと同じ（:root と .public-body が同じ値を持つ）。
   ログインの前後で別のサイトに見えないように。

   会話と練習の画面だけは、形の変数を前の値へ戻している
   （末尾の .screen-lesson）。吹き出しと図の並びは、角と影を詰めると
   窮屈になるため。色は戻さない。 */

:root {
  /* --- Color --- */
  /* 色はTOPページ（app/static/css/style.css の .public-body）と同じ。
     ログインの前後で別の product に見えないように、同じ値を持つ。 */
  --primary: #9189DD;
  --primary-dark: #7169BF;
  --primary-light: #ECE9F9;
  --bg: #FBFBFE;
  --surface: #FFFFFF;
  --surface-2: #F4F2FB;
  --border: #E3E1EF;
  --border-strong: #D2CEE7;
  --text: #292B4D;
  --text-2: #68758A;
  --text-3: #8A96A8;
  --success: #24A66A;
  --warning: #E28A2E;
  --error: #D75D73;
  --success-light: #DDF5E7;
  --warning-light: #FCEAD3;
  --error-light: #FBDDE3;
  --line-green: #06C755;
  /* しるし（.pub-mark）の目と口。TOPの .public-body にしか無く、
     アプリ側で使うと色が付かずに消えていた（ログイン画面の
     「ますっち」の顔が、白い四角のまま出ていた）。 */
  --cyan: #31BDE9;

  /* 教科カラー（データ可視化用） */
  --subj-social: #D75D73;
  --subj-other: #7891A3;   /* 教科名が決まっていない記録 */
  /* 数学は、いま唯一出している教科。UIの主役色と同じにして、
     画面のなかで色が2つに割れないようにする。
     ほかの教科は、出すときに区別が要るので別の色のまま。 */
  --subj-math: #7169BF;
  --subj-eng: #E28A2E;
  --subj-sci: #24A66A;
  --subj-jpn: #7657D5;
  /* 棒グラフ用の淡いほう。チップや教科カードの濃い色をそのまま
     14本ぶん並べると、面積が広くなって画面が重くなる。
     明度をそろえてあるので、どの教科も同じ強さで読める。 */
  --subj-social-soft: #E890A0;
  --subj-other-soft: #A7B8C4;
  --subj-math-soft: #A79FE6;
  --subj-eng-soft: #EFB067;
  --subj-sci-soft: #5FC49B;
  --subj-jpn-soft: #9B8AE0;

  /* 教科色の既定（数学）。data-subject が付いた要素は下で上書きされる。
     :root に置くのが肝心で、要素側に直接書くと、
     [data-subject=…] より後ろにあるぶんだけ後勝ちしてしまう。 */
  --sc-rgb: 145,137,221; --sc-ink: #5B53A6; --sc-btn: #7169BF;
}

/* 淡い面に載せる濃い文字。白文字は淡い面だと読めなくなるので、
   面を淡くするときは必ずこちらと組みで使う（§14 コントラスト）。
   rgb は、白の上に alpha で重ねて面を作るために持っている。 */
/*   --sc-rgb  … 棒グラフと同じ色。白に重ねて淡い面を作る
     --sc-ink  … 淡い面（白〜30%）に載せる文字
     --sc-btn  … 白文字のボタン用。棒グラフの色を1段だけ濃くした点。
                 白文字とのコントラストは 2.5〜3.9:1 で、
                 WCAG AA（4.5:1）には届いていない。淡さを優先した
                 ぶんの割り切りなので、濃さを変えるときはここだけ直す。 */
[data-subject="国語"] {
  --sc-rgb: 155,138,224; --sc-ink: #4E35A0; --sc-btn: #8774CD; }
[data-subject="数学"] {
  --sc-rgb: 167,159,230; --sc-ink: #5B53A6; --sc-btn: #7169BF; }
[data-subject="理科"] {
  --sc-rgb: 95,196,155;  --sc-ink: #116A41; --sc-btn: #4BAB82; }
[data-subject="英語"] {
  --sc-rgb: 239,176,103; --sc-ink: #8A4C15; --sc-btn: #D79853; }
[data-subject="社会"] {
  --sc-rgb: 232,144,160; --sc-ink: #9C3348; --sc-btn: #D27889; }

:root {

  /* --- 形と影 ---
     InfraAcademy にそろえる。角は小さく（8〜16px）、影は薄く1段だけ。
     いままでは角30px・影2段で、面が大きく浮いて見えていた。
     情報が多い画面ほど、浮きが積み重なって読みにくくなる。 */
  --r-xl: 16px;
  --r-lg: 12px;
  --r-md: 10px;
  --r-sm: 8px;
  --shadow: 0 14px 32px rgba(15, 23, 42, .12);
  --shadow-sm: 0 1px 8px rgba(15, 23, 42, .08);
  --shadow-cta: none;

  /* Legacy aliases used by a few dashboard templates. */
  --brand: var(--primary);
  --accent: var(--primary);
  --accent-2: #65B9E5;
  --ink: var(--text);
  --muted: var(--text-2);
  --line: var(--border);
  --srf-1: var(--surface);
  --good: var(--success);
  --warn: var(--warning);
  --warn-dim: var(--warning-light);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
html { background: var(--bg); }

body {
  /* 自分の所に置いた Noto Sans JP を先に見る（app/static/css/fonts.css）。
     届くまでのあいだと、落とせなかったときは端末のゴシックで出る。 */
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont,
    "Hiragino Sans", "Segoe UI", sans-serif;
  min-height: 100vh;
  /* 地は一枚。以前は青いぼかしを2つ敷いていたが、面の影を薄くしたので、
     地に模様があるとカードの境目が読みにくくなる。 */
  background: var(--bg);
  font-feature-settings: "palt" 1;
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--primary); text-decoration: none; }
h1, h2, h3 { color: var(--text); margin: 0; letter-spacing: -.035em; line-height: 1.25; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
strong { font-weight: 650; }
button, input, textarea, select { -webkit-font-smoothing: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(35,134,200,.24);
  outline-offset: 2px;
}
::selection { background: var(--primary-light); }
img { max-width: 100%; }

/* 文字サイズ変更（§14 アクセシビリティ） */
body.font-lg { font-size: 17px; }
body.font-xl { font-size: 19px; }
/* アニメーション削減（§14） */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
body.no-anim * { animation: none !important; transition: none !important; }
/* ふりがな表示切り替え（§14） */
ruby rt { font-size: .5em; color: var(--text-2); }
body.no-ruby ruby rt { display: none; }

/* =========================================================
   タイポグラフィ（§13.4）
   ========================================================= */
/* 見出しは、はっきり太く（InfraAcademy は font-weight 900 を使う）。
   面の影を薄くしたぶん、字の強弱で階層を作る。 */
.page-title { font-size: clamp(22px, 5.5vw, 26px); font-weight: 900; letter-spacing: -.02em;
  line-height: 1.2; margin: 0 0 4px; }
.section-title { font-size: 16px; font-weight: 900; letter-spacing: -.01em; margin: 0 0 12px; }
.card-title { font-size: 14.5px; font-weight: 800; letter-spacing: -.005em; }
.sub { color: var(--text-2); font-size: 13px; line-height: 1.6; }
.muted { color: var(--text-2); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.center { text-align: center; }
.strong { font-weight: 650; }
.tnum { font-variant-numeric: tabular-nums; }
.display { font-size: 31px; font-weight: 680; letter-spacing: -.04em; line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.display .unit { font-size: 13px; font-weight: 650; color: var(--text-2); margin-left: 2px; }
.display-sm { font-size: clamp(28px, 7vw, 36px); font-weight: 680; letter-spacing: -.04em; }
.eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-3); margin: 0 0 9px; }

/* =========================================================
   レイアウト（§13.5）
   ========================================================= */
.content { width: 100%; max-width: 680px; margin: 0 auto; padding: 26px 20px 132px; }
/* 講座一覧のように格子を並べる画面は、680px だと1〜2列で止まる。
   InfraAcademy と同じ 1240px まで広げる。 */
.content.wide { max-width: 1240px; }
.content.wide { max-width: 1120px; }
section { margin-bottom: 30px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.sec-head .section-title { margin: 0; }
.row { display: flex; align-items: center; }
.between { justify-content: space-between; }
.gap { gap: 10px; }
.gap-sm { gap: 6px; }
.grow { flex: 1; min-width: 0; }
.wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 10px; }

/* =========================================================
   アイコン
   ========================================================= */
.icon { width: 22px; height: 22px; display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.icon.xs { width: 14px; height: 14px; }
.icon.sm { width: 17px; height: 17px; }
.icon.lg { width: 28px; height: 28px; }

/* =========================================================
   ヘッダー
   ========================================================= */
/* 上のバー。**TOPページ（.pub-header）と同じ形**にする。

   前は「浮いた角丸の帯」だった。TOP は画面幅いっぱいの平らな帯で、
   下に細い線が1本入る。ログインの前後で帯の形が変わると、
   同じ場所を歩いている感じが切れる。

   高さ・背景の透け方・線の色まで .pub-header と同じ値を書く。
   「似ているのに少しちがう」がいちばん目につくため。 */
.appbar { position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center;
  height: calc(64px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid #ECEAF3; }
/* 幅も TOP と同じ 1080px。中身（.content）は 680px のままでよい。
   帯は画面の幅、本文は読める幅、という二段構えは TOP と同じ。 */
.appbar-inner { display: flex; align-items: center; gap: 18px;
  width: min(1080px, calc(100% - 40px)); margin: 0 auto; min-width: 0; }

/* ロゴ。狭い画面でも**左に置く**（TOP と同じ）。
   前は真ん中に寄せていたが、TOP は左なので、移った瞬間に名前が動く。 */
.appbar .brand { display: inline-flex; align-items: center;
  flex: 0 0 auto; color: var(--text); text-decoration: none; }

/* 名前まで絵に入っているので、横に文字を足さない。
   幅は auto。高さだけ決めて、元の比（496:200）で伸ばす。
   width/height を属性に書いてあるので、読み込み前も場所を取り、
   ロゴが入った瞬間に右のものが飛ばない。 */
.brand-logo { display: block; height: 34px; width: auto; }

/* 上のナビ。**PC だけ**に出す。スマホは下のタブに任せる。
   両方に出すと、同じ行き先が画面の上下に並ぶことになる。 */
.appnav { display: none; gap: 4px; margin-right: auto; min-width: 0; }
.appnav a { padding: 7px 10px; border-radius: 9px; white-space: nowrap;
  color: #595D78; text-decoration: none; font-size: 13px;
  transition: background .16s ease, color .16s ease; }
.appnav a:hover { background: var(--surface-2); color: var(--text); }
.appnav a.active { background: var(--primary-light); color: var(--primary-dark);
  font-weight: 500; }

@media (min-width: 1024px) {
  .appnav { display: flex; align-items: center; }
  /* 下のタブが無いぶん、本文の下の余白も要らない */
  .content { padding-bottom: 40px; }
}

.appbar-icon { background: transparent; border: 1px solid var(--border);
  border-radius: 10px; cursor: pointer; color: var(--text-2); padding: 8px;
  position: relative; display: inline-flex; align-items: center;
  width: 38px; height: 38px; flex: 0 0 auto;
  justify-content: center; transition: background .16s ease, color .16s ease; }
.appbar-icon:hover { background: var(--surface-2); color: var(--primary-dark); }
.appbar-icon .icon { width: 19px; height: 19px; }
.appbar-profile { width: 34px; height: 34px; display: grid; place-items: center;
  flex: 0 0 auto;
  border-radius: 50%; color: #fff; font-size: 13px; font-weight: 500;
  background: var(--primary); overflow: hidden; }
.appbar-profile img { width: 100%; height: 100%; display: block; object-fit: cover; }
.appbar-right { display: flex; align-items: center; gap: 8px;
  margin-left: auto; flex: 0 0 auto; }

/* ボタンも TOP のヘッダと同じ。下だけに落ちる影で、押すと沈む。
   アプリ本体の .btn は影なしなので、帯の中だけ上書きする。 */
.appbar .btn { min-height: 38px; padding: 8px 13px; border: 0;
  border-radius: 10px; font-size: 13px; font-weight: 500; letter-spacing: 0;
  white-space: nowrap; box-shadow: none; transition: .18s ease; }
.appbar .btn-primary { background: var(--primary); color: #fff;
  box-shadow: 0 5px 0 #6F67BC; }
.appbar .btn-primary:hover { background: #877FD4; transform: translateY(-1px); }
.appbar .btn-primary:active { transform: translateY(3px);
  box-shadow: 0 2px 0 #6F67BC; }
/* ログインは、押させたいほうを目立たせるため、ただの文字にする（TOP と同じ） */
.appbar-login { padding: 8px 12px; color: #595D78; text-decoration: none;
  font-size: 13px; font-weight: 500; white-space: nowrap; }
.appbar-login:hover { color: var(--text); }
.notif-dot { position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px;
  background: var(--error); color: #fff; border-radius: 999px; font-size: 10px;
  font-weight: 700; display: grid; place-items: center; padding: 0 4px; border: 2px solid #fff; }
.who { color: var(--text-2); font-size: 13px; }

/* ページヘッダー（戻る＋タイトル） */
.page-head { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; }
.back-link { color: var(--text-2); display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; min-height: 44px; font-weight: 650; }
.link-more { color: var(--primary); font-size: 12px; font-weight: 650; }

/* =========================================================
   カード（§13.2 小さめのカード・角丸・控えめな影）
   ========================================================= */
.card { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 18px; margin-bottom: 14px;
  box-shadow: var(--shadow-sm); }
a.card, .card-link { transition: border-color .16s ease, box-shadow .16s ease,
  transform .16s ease; }
a.card:hover, .card-link:hover { border-color: var(--border-strong);
  box-shadow: var(--shadow); transform: translateY(-2px); }
.card.flat { box-shadow: none; }
.card.tight { padding: 16px 18px; }
.card.pad-lg { padding: 24px; }

/* カリキュラム地図にだけ載っている単元。
   まだ書いていないので、開けるカードと同じ重さで並べない。
   一覧の目的は「この先どこまで行くか」を見せることなので、
   消さずに、控えめに置いておく。 */
.card-planned { background: rgba(255,255,255,.62); box-shadow: none;
  border-style: dashed; }
.card-planned .card-title { color: var(--muted); font-weight: 600; }
.card-planned { padding: 16px 18px; margin-bottom: 12px; }

/* 単元の説明は2行で切る。長さがまちまちだとカードの高さがそろわず、
   20〜40件並んだときに題を目で拾えなくなる。続きは単元ページで読める。 */
.card-summary { margin: 5px 0 0; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* カードごと押せる単元。ボタンを別に置かず、カード全体をリンクにする。
   1画面に同じボタンが何十個も並ぶのを避けるため。 */
a.card-link { display: block; color: inherit; text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
a.card-link:hover { border-color: rgba(30,84,118,.16); box-shadow: var(--shadow); }
a.card-link:active { transform: scale(.995); }
a.card-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.card-go { color: var(--muted); display: inline-flex; align-items: center; }
a.card-link:hover .card-go { color: var(--primary); }

/* 単元一覧の領域見出し（第2分野（生命）／B 図形 など）。
   カードではないので、区切りとしてだけ効くよう控えめにする。 */
.unit-group { font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--muted); margin: 18px 0 8px 2px; }
.unit-group:first-child { margin-top: 4px; }
.card-title { font-size: 14px; font-weight: 650; }

/* リスト（行の集合） */
.list, .list-group { background: rgba(255,255,255,.96); border: 1px solid rgba(30,84,118,.075);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.lrow { display: flex; align-items: center; gap: 14px; padding: 17px 18px;
  border-top: 1px solid rgba(30,84,118,.08); color: var(--text); min-height: 64px;
  transition: background .16s ease, transform .16s ease; }
.lrow:first-child { border-top: none; }
a.lrow:hover { background: var(--surface-2); }
a.lrow:active { background: var(--primary-light); transform: scale(.995); }
.lrow .l-title { font-weight: 800; font-size: 14px; letter-spacing: -.005em; }
.lrow .l-sub { color: var(--text-2); font-size: 12px; margin-top: 2px; }
.lrow .l-end { margin-left: auto; color: var(--text-2); display: inline-flex;
  align-items: center; gap: 6px; flex: 0 0 auto; }

/* アイコンタイル */
.icon-tile { width: 42px; height: 42px; border-radius: var(--r-md);
  background: var(--primary-light); display: grid; place-items: center;
  flex: 0 0 auto; color: var(--primary-dark); }
.icon-tile .icon { width: 20px; height: 20px; }
.icon-tile.ok { background: var(--success-light); color: var(--success); }
.icon-tile.warn { background: var(--warning-light); color: var(--warning); }
.icon-tile.plain { background: #EAF3F8; color: var(--text-2); }
/* 教科の升。今日の画面と同じ淡い面＋濃い文字にそろえる */
.icon-tile.subject-tile { background: rgba(var(--sc-rgb),.22);
  color: var(--sc-ink); }
/* 章番号など、アイコンの代わりに数字を置くとき */
.icon-tile { font-size: 14px; font-weight: 700; }

/* =========================================================
   フラッシュ
   ========================================================= */
.flashes { margin-bottom: 12px; }
.flash { padding: 13px 16px; border-radius: var(--r-md); margin-bottom: 10px; font-size: 14px;
  background: var(--primary-light); color: var(--primary-dark); box-shadow: var(--shadow-sm); }
.flash-success { background: var(--success-light); color: #1E7A47; }
.flash-warning { background: var(--warning-light); color: #9A6608; }
.flash-danger { background: var(--error-light); color: #B03434; }

/* =========================================================
   ボタン（§13.2 青い主要CTA・タップ領域44px §14）
   ========================================================= */
/* ボタン。丸ではなく角丸の四角にする（InfraAcademy と同じ）。
   丸いボタンは1つなら効くが、画面に3つ4つ並ぶと形だけが目に残る。 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 18px; min-height: 44px; border-radius: var(--r-sm); border: none;
  font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
  text-decoration: none; text-align: center; line-height: 1.3;
  transition: background .16s ease, transform .1s ease, box-shadow .16s ease; }
.btn:active { transform: scale(.985); }
/* 面は1色。グラデーションと重い影をやめて、
   淡いトーンの画面から浮きすぎないようにする。 */
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-block { display: flex; width: 100%; }
.btn-lg { padding: 13px 22px; min-height: 50px; font-size: 15px; }
.btn-sm { padding: 8px 14px; min-height: 38px; font-size: 13px; }
.btn-outline { background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); }
.btn-outline:hover { background: var(--surface-2); border-color: var(--primary);
  color: var(--primary-dark); }
.btn-soft { background: var(--primary-light); color: var(--primary-dark); }
.btn-soft:hover { background: #CBE9F8; }
.btn-quiet { background: var(--surface-2); color: var(--text-2); }
.btn-ghost { background: transparent; color: var(--text-2); box-shadow: none; }
.btn-line { background: var(--line-green); color: #fff; }
.btn-text { color: var(--primary); background: none; border: none; cursor: pointer;
  font-size: 14px; font-family: inherit; padding: 8px 0; display: inline-flex;
  align-items: center; gap: 4px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-row.stack-sm { flex-direction: column; }

/* 固定CTA（画面外に出さない §18 UIテスト） */
.cta-fixed { position: sticky; bottom: 104px; z-index: 15; margin-top: 20px; }
.cta-fixed .btn-primary { box-shadow: 0 18px 38px rgba(35,134,200,.33); }

/* ソフトキーボードが出ているあいだ（<html class="kb-open">）。
   画面下に固定したものはキーボードの裏に隠れ、入力欄と重なって見えるので、
   いったん流れの中へ戻し、ナビと手書きメモのボタンは引っ込める。 */
/* 手書きメモはキーボードの裏に隠れてしまうので、入力中はいったん引っ込める
   （書いた内容は残る。キーボードを閉じればそのまま戻る） */
.kb-open .bottomnav, .kb-open .pad-open, .kb-open .pad { display: none; }
.kb-open .cta-fixed { position: static; margin-top: 12px; }
.kb-open .cta-fixed .btn-primary { box-shadow: 0 8px 18px rgba(35,134,200,.24); }
.kb-open main { padding-bottom: 24px; }
/* 入力欄にフォーカスしたとき、下の「こたえる」まで一緒に見えるようにする */
.kb-open .field input { scroll-margin-bottom: 96px; }
/* キーボードが出たら、問題文の上端まで戻して「問題 → 入力欄 → こたえる」を
   縦に並べて見せる。上に固定するとキーボードで狭まった画面を食うので、
   位置を寄せるだけにする（寄せ先は base.html の JS が呼ぶ）。 */
.q-card { scroll-margin-top: 56px; }
/* キーボードで画面が半分になるので、いまいらないものは引っ込めて場所を空ける。
   ヘッダー（ロゴ・通知）より、問題文と入力欄のほうが大事。 */
.kb-open .appbar { display: none; }
.kb-open .sticky-progress { top: 0; }
.kb-open .page-head, .kb-open .page-title { display: none; }
/* 問題が長いときでも、入力欄が画面の外へ出ないように詰める */
.kb-open .q-card { max-height: 46vh; overflow-y: auto; }
.kb-open .card { padding: 14px 16px; }
.kb-open .cta-fixed { margin-top: 12px; }

/* =========================================================
   セグメント / チップ
   ========================================================= */
.seg { display: flex; background: #E7F1F7; border-radius: 15px; padding: 4px; }
.seg a, .seg button { flex: 1; text-align: center; border: none; background: transparent;
  color: var(--text-2); padding: 10px 8px; min-height: 42px; border-radius: 12px; font-size: 14px;
  font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; }
.seg a.active, .seg button.active { background: var(--surface); color: var(--text);
  box-shadow: 0 5px 16px rgba(21,28,45,.10); }

.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tabs a, .tabs button { border: 1px solid var(--border); background: rgba(255,255,255,.9);
  color: var(--text-2); padding: 9px 16px; min-height: 42px; border-radius: 999px;
  font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
  text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; }
.tabs a.active, .tabs button.active { background: var(--primary); color: #fff;
  border-color: var(--primary); }

/* 状態バッジ（色だけで状態を表さない §14 — 必ずラベルを併記） */
/* 札。丸ではなく角丸（InfraAcademy の lesson-card-tag と同じ形） */
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px;
  padding: 4px 9px; border-radius: var(--r-sm); background: var(--surface-2);
  color: var(--text-2); font-weight: 800; white-space: nowrap; }
.chip.primary { background: var(--primary-light); color: var(--primary-dark); }
.chip.ok { background: var(--success-light); color: #1E7A47; }
.chip.warn { background: var(--warning-light); color: #9A6608; }
.chip.err { background: var(--error-light); color: #B03434; }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* 習得状態（§15） */
.st-not_started { background: #EAF3F8; color: var(--text-2); }
.st-diagnosed { background: var(--primary-light); color: var(--primary-dark); }
.st-learning { background: var(--primary-light); color: var(--primary-dark); }
.st-tentative { background: var(--warning-light); color: #9A6608; }
.st-mastered { background: var(--success-light); color: #1E7A47; }
.st-retained { background: var(--success-light); color: #14663A; }
.st-needs_review { background: var(--error-light); color: #B03434; }

/* =========================================================
   進捗
   ========================================================= */
.pbar { height: 7px; background: #DDEAF2; border-radius: 999px; overflow: hidden; }
.pbar > div { height: 100%; background: var(--primary);
  border-radius: 999px;
  transition: width .3s ease; }
.pbar.ok > div { background: var(--success); }

/* 習得（青）と定着（緑）を分けた横棒。色だけに頼らず、必ず実数も併記する。 */
.mastery-track { display: flex; width: 100%; height: 7px; overflow: hidden;
  border-radius: 999px; background: #DDEAF2; }
.mastery-track > span { display: block; height: 100%; transition: width .3s ease; }
.mastery-retained { background: var(--success); }
.mastery-learned { background: var(--primary); }

/* 単元ページの習得率。カードにせず1行にたたみ、
   学ぶ中身までのスクロールを短くする（§12.2） */
.unit-progress { margin-bottom: 18px; }
.unit-progress .up-pct { line-height: 1; flex: none; }
.unit-progress .up-count { margin: 0 0 5px; }
.ring { display: inline-block; }
/* 輪の下地。前は水色（#E4EFF5）だった。TOPの紫と並ぶと、
   下地のほうが色として主張してしまう。 */
.ring circle:first-of-type { stroke: var(--surface-2); }
.ring-text { font-size: 14px; font-weight: 680; fill: var(--text); }
.ring-cap { fill: var(--text-2); font-size: 9px; }

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.stat-grid.two { grid-template-columns: repeat(2, 1fr); }
.stat { text-align: center; padding: 2px 4px; }
.stat + .stat { border-left: 1px solid var(--border); }
.stat .n { font-size: 20px; font-weight: 680; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; }
.stat .n small { font-size: 12px; font-weight: 700; color: var(--text-2); }
.stat .l { color: var(--text-2); font-size: 12px; margin-top: 1px; }
.metric .big { font-size: 22px; font-weight: 680; letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; }
.metric .lbl { color: var(--text-2); font-size: 12px; }

/* エリアチャート */
.area-chart { width: 100%; height: auto; display: block; }
.area-chart .axis-label { fill: var(--text-2); font-size: 10.5px; font-family: inherit; }
.area-chart .axis-label.active { fill: var(--primary); font-weight: 700; }
.area-chart .value-label { fill: var(--text); font-size: 11px; font-weight: 700; }

/* ドーナツ */
.donut-wrap { display: flex; align-items: center; gap: 18px; }
.donut { border-radius: 50%; position: relative; flex: 0 0 auto; }
.donut::after { content: ''; position: absolute; inset: 26%; background: var(--surface);
  border-radius: 50%; }
.legend { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.legend-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.legend-row .lab { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.legend .swatch { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.legend .val { font-weight: 700; font-variant-numeric: tabular-nums; }

/* =========================================================
   会話画面（§12.4）
   ========================================================= */
.chat { display: flex; flex-direction: column; gap: 18px; padding: 8px 0 12px; }
.msg { display: flex; gap: 10px; align-items: flex-start; }
.msg .who-ico { width: 39px; height: 39px; border-radius: 13px; flex: 0 0 auto;
  background: #fff; border: 1px solid rgba(35,134,200,.12); display: grid; place-items: center;
  overflow: hidden; box-shadow: 0 8px 20px rgba(35,134,200,.12); }
/* 絵はもう顔だけを切ってある（img/mascot/face*.webp）ので、
   位置をずらしたり拡大したりしない。前の絵は全身の縦長で、
   顔を出すために上へ寄せて拡大していた。 */
.masucchi-icon { width: 100%; height: 100%; object-fit: cover; }
/* 幅の上限は .msg-col 側で持つ。ここでも % を指定すると入れ子で解決が循環し、
   「ユウト」のような短い返答が縦に潰れてしまう。 */
.msg .bubble { background: var(--surface); border: 1px solid rgba(30,84,118,.06);
  border-radius: 7px 19px 19px 19px; padding: 14px 16px; font-size: 15px;
  line-height: 1.75; box-shadow: 0 12px 32px rgba(21,28,45,.085); max-width: 100%; }
.msg .bubble strong { color: var(--primary-dark); }
/* 生徒の吹き出しは青地なので、太字は白のまま（濃い青だと読めない） */
.msg.me .bubble strong { color: #fff; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 2px; }
.msg.me { flex-direction: row-reverse; }
.msg.me .bubble { background-color: var(--primary); background-image: none; color: #fff;
  border-color: transparent; border-radius: 19px 7px 19px 19px;
  box-shadow: 0 13px 30px rgba(35,134,200,.24); }
.msg .name { font-size: 12px; color: var(--text-2); margin-bottom: 3px; }
.chat-meta { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; gap: 10px; }
/* 章名は長いことがあるので、折り返さず1行に省略する（ヘッダの高さを保つ） */
.chapter-label { font-size: 12px; font-weight: 700; color: var(--primary);
  text-align: center; flex: 1; min-width: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
/* 中身なりの幅にする（短い返答が折り返されないように）。上限は88%。 */
.msg-col { min-width: 0; max-width: 88%; width: fit-content; }
.msg.me .msg-col { margin-left: auto; }

/* タイプ中のカーソル */
.bubble.typing::after { content: ''; display: inline-block; width: 2px; height: 1em;
  background: var(--primary); margin-left: 2px; vertical-align: -2px;
  animation: caret .8s step-end infinite; }
@keyframes caret { 50% { opacity: 0; } }
body.no-anim .bubble.typing::after { animation: none; }

/* タイプ中のタップで全文表示するための透明レイヤ */
.skip-layer { position: fixed; inset: 0; z-index: 5; background: transparent; }
.skip-layer[hidden] { display: none; }

/* 会話が下部ナビに隠れないよう、十分な余白をとる */
.chat { padding-bottom: 4px; }

/* =========================================================
   式のアニメーション（数学）
   画面いっぱいで式の変形を見せ、終わったら会話へ戻る。
   同じ id のトークンは位置を移す（FLIP）ので、数や項が「動いて」見える。
   配色・角丸・影はサイトのトークンをそのまま使う。
   ========================================================= */
/* 背景はうっすら透かす。裏で会話が続いていることが分かるようにするため。
   ぼかしを入れて、式より後ろが目立たないようにする。 */
.anim-stage { position: fixed; inset: 0; z-index: 60;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  display: flex; flex-direction: column; opacity: 0;
  transition: opacity .25s ease; }
/* ぼかしが使えない環境では、透け過ぎないよう不透明度を上げる */
@supports not (backdrop-filter: blur(2px)) {
  .anim-stage { background: rgba(255, 255, 255, .95); }
}
.anim-stage.on { opacity: 1; }
.anim-stage[hidden] { display: none; }

.anim-head { display: flex; align-items: center; gap: 10px;
  padding: 10px 16px 8px; border-bottom: 1px solid var(--border); }
.anim-title { font-size: 13px; font-weight: 800; color: var(--primary);
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.anim-skip { background: none; border: none; color: var(--text-2);
  font-size: 12px; font-weight: 700; padding: 8px; cursor: pointer;
  min-height: 44px; }

/* 式の置き場。中央に大きく置く */
.anim-body { flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px;
  padding: 16px; text-align: center; }
.anim-eq { display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 6px 8px; max-width: 560px; }
.anim-tok { font-size: 30px; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--text);
  padding: 4px 8px; border-radius: var(--r-sm); line-height: 1.2;
  /* 位置の移動はJSが transform で行う。ここは見た目の変化だけ */
  transition: color .3s ease, background .3s ease, opacity .3s ease; }
.anim-tok.eq { color: var(--text-2); }          /* ＝ */
.anim-tok.hot { color: var(--primary); background: var(--primary-light); }
.anim-tok.gone { color: var(--text-2); opacity: .35;
  text-decoration: line-through; }
.anim-tok.enter { opacity: 0; }

/* 数直線の図。正負の数は「線の上のどこか」で決まるので、
   式を並べるだけでは伝わらない。線・目盛り・動きの矢印を描く。 */
.anim-line { width: 100%; max-width: 560px; }
.anim-line-svg { width: 100%; height: auto; display: block; }
.nl-axis { stroke: var(--text-2); stroke-width: 2; }
.nl-arrowhead { fill: var(--text-2); }
.nl-tick { stroke: var(--text-2); stroke-width: 1.5; }
.nl-tick.zero { stroke: var(--text); stroke-width: 2.5; }
.nl-label { font-size: 13px; fill: var(--text-2); text-anchor: middle;
  font-variant-numeric: tabular-nums; }
.nl-label.zero { fill: var(--text); font-weight: 800; }
.nl-span { fill: var(--primary-light); }
.nl-dot { fill: var(--text-2); }
.nl-dot.hot { fill: var(--primary); }
.nl-dot.ghost { fill: var(--border); }
.nl-dot-label { font-size: 15px; font-weight: 800; fill: var(--text);
  text-anchor: middle; font-variant-numeric: tabular-nums; }
.nl-dot-label.hot { fill: var(--primary); }
.nl-move { fill: none; stroke: var(--text-2); stroke-width: 2;
  stroke-dasharray: 4 3; }
.nl-move.hot { stroke: var(--primary); stroke-dasharray: none; }
.nl-move-head { fill: var(--text-2); }
.nl-move-head.hot { fill: var(--primary); }
.nl-move-label { font-size: 13px; font-weight: 700; fill: var(--text-2);
  text-anchor: middle; }
.nl-move-label.hot { fill: var(--primary); }

/* タイル図。x は「長さの分からない長いタイル」、1 は小さい四角。
   同じ形どうししかまとめられない、を目で分かるようにする。 */
.anim-tiles { width: 100%; max-width: 560px; }
.tile-rows { display: flex; flex-direction: column; gap: 12px; }
.tile-row { display: flex; align-items: center; gap: 12px; min-height: 42px; }
.tile-row.gone { opacity: .35; }
.tile-label { font-size: 19px; font-weight: 800; min-width: 4.2em;
  text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.tile-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.tile { display: inline-flex; align-items: center; justify-content: center;
  height: 34px; border-radius: 6px; font-size: 14px; font-weight: 700;
  border: 1.5px solid transparent;
  transition: opacity .3s ease, transform .3s ease; }
.tile-x     { width: 74px; background: var(--primary-light);
  border-color: var(--primary); color: var(--primary-dark); }
.tile-neg-x { width: 74px; background: rgba(220,80,80,.13);
  border-color: rgba(200,60,60,.7); color: rgb(170,40,40); }
.tile-one     { width: 34px; background: rgba(30,84,118,.10);
  border-color: rgba(30,84,118,.45); color: var(--text-2); }
.tile-neg-one { width: 34px; background: rgba(220,80,80,.10);
  border-color: rgba(200,60,60,.5); color: rgb(170,40,40); }
.tile.hot { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.tile.gone { opacity: .3; }
.tile-caption { margin: 14px 0 0; font-size: 13px; color: var(--text-2);
  text-align: center; }

/* 図形。作図の弧・等しい印・角の印まで描く。
   手順だけ覚えても作図はできない。針をどこに置いたかが見えることが要る。 */
.anim-fig { width: 100%; max-width: 560px; }
.anim-fig-svg { width: 100%; height: auto; display: block; overflow: visible; }
.fg-seg { stroke: var(--text); stroke-width: 2.2; stroke-linecap: round; }
.fg-seg.aux   { stroke: var(--primary); stroke-width: 1.8; }
.fg-seg.hot   { stroke: var(--primary); stroke-width: 3.2; }
.fg-seg.ghost { stroke: var(--line); stroke-width: 1.8; }
.fg-seg.dash, .fg-arc, .fg-circle.dash {
  stroke-dasharray: 6 5; }
.fg-arc { fill: none; stroke: var(--primary); stroke-width: 1.8; opacity: .85; }
.fg-arc.ghost { stroke: var(--line); opacity: .7; }
.fg-circle { fill: none; stroke: var(--text); stroke-width: 2; }
.fg-circle.aux { stroke: var(--primary); stroke-width: 1.6; }
.fg-poly { fill: var(--primary-light); stroke: var(--text); stroke-width: 2.2;
  fill-opacity: .55; }
.fg-poly.ghost { fill: none; stroke: var(--line); }
.fg-poly.hot { fill-opacity: .8; stroke: var(--primary); }
.fg-tick { stroke: var(--primary-dark); stroke-width: 2; stroke-linecap: round; }
.fg-angle { fill: none; stroke: var(--primary-dark); stroke-width: 1.8; }
.fg-right { fill: none; stroke: var(--text-2); stroke-width: 1.8; }
.fg-pt { fill: var(--text); }
.fg-pt.hot { fill: var(--primary); }
.fg-pt.ghost { fill: var(--line); }
.fg-ptlabel, .fg-text, .fg-anglelabel {
  fill: var(--text); font-size: 15px; font-weight: 700;
  font-family: inherit; }
.fg-anglelabel, .fg-text.small { font-size: 13px; fill: var(--text-2); }
.fg-ptlabel.hot, .fg-text.hot { fill: var(--primary-dark); }
.fg-text.dim { fill: var(--text-2); font-weight: 600; }
.fig-caption { margin: 12px 0 0; font-size: 13px; color: var(--text-2);
  text-align: center; }

/* 座標平面。比例・反比例は「表・式・グラフ」を行き来する単元なので、
   グラフが描けないと式だけを覚えることになってしまう。 */
.anim-plot { width: 100%; max-width: 520px; }
.anim-plot-svg { width: 100%; height: auto; display: block; overflow: visible; }
.pl-grid { stroke: var(--line); stroke-width: 1; opacity: .55; }
.pl-axis { stroke: var(--text-2); stroke-width: 1.8; }
.pl-num  { fill: var(--text-2); font-size: 12px; font-weight: 600; }
.pl-axname { fill: var(--text-2); font-size: 14px; font-style: italic;
  font-weight: 700; }
.pl-line, .pl-curve { fill: none; stroke: var(--primary);
  stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pl-line.ghost, .pl-curve.ghost { stroke: var(--line); stroke-width: 2; }
.pl-line.alt, .pl-curve.alt { stroke: rgb(200,90,60); }
.pl-seg { stroke: var(--text-2); stroke-width: 1.6; stroke-dasharray: 5 4; }
.pl-seg.hot { stroke: var(--primary-dark); stroke-dasharray: none;
  stroke-width: 2.2; }
.pl-pt { fill: var(--primary); }
.pl-pt.ghost { fill: var(--line); }
.pl-pt.alt { fill: rgb(200,90,60); }
.pl-ptlabel, .pl-text { fill: var(--text); font-size: 14px; font-weight: 700; }
.pl-text.dim { fill: var(--text-2); font-size: 13px; font-weight: 600; }
.pl-ptlabel.hot, .pl-text.hot { fill: var(--primary-dark); }
.pl-text.alt { fill: rgb(180,70,45); }

/* ヒストグラム。表の数字だけでは山の形が浮かばないので、
   柱を並べて「どこにかたまっているか」を見せる。 */
.anim-bars { width: 100%; max-width: 520px; }
.anim-bars-svg { width: 100%; height: auto; display: block; overflow: visible; }
.br-grid { stroke: var(--line); stroke-width: 1; opacity: .5; }
.br-axis { stroke: var(--text-2); stroke-width: 1.8; }
.br-bar { fill: var(--primary-light); stroke: var(--primary);
  stroke-width: 1.6; }
.br-bar.hot { fill: var(--primary); stroke: var(--primary-dark); }
.br-bar.ghost { fill: var(--line); stroke: var(--text-2); opacity: .5; }
.br-bar.alt { fill: rgba(210,110,70,.45); stroke: rgb(200,90,60); }
.br-poly { fill: none; stroke: rgb(200,90,60); stroke-width: 2.4;
  stroke-linejoin: round; }
.br-polypt { fill: rgb(200,90,60); }
.br-num, .br-lab { fill: var(--text-2); font-size: 12px; font-weight: 600; }
.br-val { fill: var(--primary-dark); font-size: 13px; font-weight: 800; }
.br-axname { fill: var(--text-2); font-size: 12px; font-weight: 700; }

/* 矢じり（光の進む向き、力の向きと大きさ） */
.fg-arrow { stroke: var(--primary); stroke-width: 2.4; stroke-linecap: round; }
.fg-arrow.aux { stroke: var(--text-2); stroke-width: 1.8; }
.fg-arrow.alt { stroke: rgb(200,90,60); }
.fg-arrowhead { fill: var(--primary); stroke: none; }
.fg-arrowhead.aux { fill: var(--text-2); }
.fg-arrowhead.alt { fill: rgb(200,90,60); }

/* 粒子モデル。状態変化で「粒は変わらず、並び方だけ変わる」を見せる */
.anim-particles { width: 100%; max-width: 560px; }
.anim-parts-svg { width: 100%; height: auto; display: block; }
.pa-box { fill: none; stroke: var(--line); stroke-width: 2; }
.pa-box.hot { stroke: var(--primary); }
.pa-dot { fill: var(--primary-light); stroke: var(--primary);
  stroke-width: 1.4; }
.pa-dot.hot { fill: var(--primary); stroke: var(--primary-dark); }
.pa-dot.alt { fill: rgba(210,110,70,.5); stroke: rgb(200,90,60); }
.pa-lab { fill: var(--text); font-size: 14px; font-weight: 700; }
.pa-top { fill: var(--text-2); font-size: 12px; font-weight: 600; }

/* 説明の一行 */
.anim-note { font-size: 15px; font-weight: 700; color: var(--text);
  min-height: 3em; max-width: 480px; }
.anim-note .sub { display: block; font-weight: 400; margin-top: 4px; }

/* 進み具合 */
.anim-dots { display: flex; gap: 6px; justify-content: center;
  padding: 0 16px 22px; }
.anim-dots i { width: 7px; height: 7px; border-radius: 50%;
  background: var(--border); transition: background .2s ease; }
.anim-dots i.on { background: var(--primary); }

@media (min-width: 768px) {
  .anim-tok { font-size: 38px; }
  .anim-note { font-size: 17px; }
}
/* 見終わったあと、会話の流れに残す「もう一度見る」 */
/* ---------------------------------------------------------
   会話の中に置く1枚の図
   ---------------------------------------------------------
   全画面の再生器は「動きを追う」ためのもの。1枚の絵にボタンを
   押させ、暗転させ、閉じさせるのは手間が勝つ。
   LINE で画像が送られてくるのと同じように、吹き出しの流れの中に置く。

   描く中身は全画面とまったく同じ（animRender* を使い回す）。
   ちがうのは置き場所と、この見た目だけ。 */
.chat-fig { max-width: min(420px, 86%); margin: 2px 0 10px 46px;
  background: var(--surface, #fff); border: 1px solid var(--border, #E8E8F0);
  border-radius: 16px; padding: 12px 12px 10px; overflow: hidden; }
.chat-fig-title { margin: 0 0 8px; font-size: 12px; font-weight: 800;
  color: var(--text-muted, #6B6B80); letter-spacing: .02em; }
.chat-fig-body { display: flex; flex-direction: column; align-items: center;
  gap: 8px; }
.chat-fig-body > [hidden] { display: none; }
/* 図は箱の幅にそろえる。全画面用の max-width は効かせない。
   縦長の図（温度計など）が画面を埋めないよう、高さにも上限を置く。
   svg は viewBox を保つので、高さで頭打ちになると幅も縮んで収まる。 */
.chat-fig .anim-fig, .chat-fig .anim-plot,
.chat-fig .anim-bars, .chat-fig .anim-line { width: 100%; max-width: 100%; }
.chat-fig svg { max-height: 260px; width: auto; max-width: 100%;
  margin: 0 auto; }
/* タイル図は、会話の箱（約240px）に対して全画面用の寸法が大きい。
   x タイル74px が5個並ぶと入りきらないので、一回り小さくする。
   それでも入らないぶんは折り返す（切れるより2段のほうが読める）。 */
.chat-fig .tile-rows { gap: 8px; }
.chat-fig .tile-row { gap: 8px; min-height: 32px; }
.chat-fig .tile-label { font-size: 16px; min-width: 3.4em; }
.chat-fig .tile { height: 26px; font-size: 12px; }
.chat-fig .tile-x, .chat-fig .tile-neg-x { width: 46px; }
.chat-fig .tile-one, .chat-fig .tile-neg-one { width: 24px; }
.chat-fig .tile-strip { gap: 4px; flex-wrap: wrap; }
.chat-fig .tile-row { flex-wrap: wrap; }
.chat-fig .tile-caption { margin-top: 10px; font-size: 12px; }
.chat-fig .anim-eq { font-size: 20px; gap: 6px; margin: 2px 0 0;
  justify-content: center; }
.chat-fig .anim-tok { font-size: 20px; }
.chat-fig-note { margin: 9px 2px 0; font-size: 13px; line-height: 1.6;
  color: var(--text, #2B2B3D); font-weight: 600; }
.chat-fig-note .sub { display: block; font-weight: 400; margin-top: 3px; }
@media (max-width: 520px) {
  .chat-fig { max-width: 92%; margin-left: 40px; }
}

.anim-replay { display: flex; justify-content: center; margin: 2px 0 2px; }
.anim-replay button { display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary-light); color: var(--primary);
  border: 1px solid transparent; border-radius: 999px;
  font-size: 12px; font-weight: 800; padding: 8px 14px; min-height: 36px;
  cursor: pointer; }
.anim-replay button:active { background: #CBE9F8; }

/* アニメーションを切っている場合は、動かさず最後のコマだけ見せる */
body.no-anim .anim-stage, body.no-anim .anim-tok { transition: none; }

/* 会話中の選択肢 */
.opts { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 16px; min-height: 58px; border: 1px solid rgba(30,84,118,.09);
  border-radius: var(--r-md); background: rgba(255,255,255,.95); color: var(--text);
  font-size: 15px; font-family: inherit; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: border .16s ease, background .16s ease, transform .12s ease; }
.opt:hover { border-color: rgba(35,134,200,.42); background: #F0F8FC; transform: translateY(-1px); }
.opt .key { width: 30px; height: 30px; border-radius: 10px; background: #E7F1F7;
  display: grid; place-items: center; font-weight: 700; font-size: 12px;
  color: var(--text-2); flex: 0 0 auto; }
.opt.correct { border-color: var(--success); background: var(--success-light); }
.opt.correct .key { background: var(--success); color: #fff; }
.opt.wrong { border-color: var(--error); background: var(--error-light); }
.opt.wrong .key { background: var(--error); color: #fff; }
/* required なラジオを display:none にすると focus できず送信がブロックされるため、
   視覚的にのみ隠す */
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt { position: relative; }
.opt:has(input:checked) { border-color: var(--primary); background: var(--primary-light); }
.opt:has(input:checked) .key { background: var(--primary); color: #fff; }
/* 選択状態は色だけで示さず、文字でも伝える（§14） */
.opt:has(input:checked)::after { content: '選択中'; margin-left: auto; font-size: 12px;
  font-weight: 700; color: var(--primary); white-space: nowrap; align-self: flex-start; }
.opt:focus-within { box-shadow: 0 0 0 3px rgba(35,134,200,.18); }
/* 選択肢が短くて数も少ないとき（学年など）は、横に並べる。
   縦に積むと、設定カードの中でだけ間延びして見える。 */
.opts-inline { flex-direction: row; flex-wrap: wrap; gap: 8px; }
/* 4つが横1列に収まるところまで詰める。iPhone SE の幅（375px）でも
   折り返さないよう、最小幅は控えめにしてある。 */
.opts-inline .opt { width: auto; flex: 1 1 0; min-width: 62px; padding: 13px 10px;
  min-height: 48px; justify-content: center; }
.opts-inline .opt:has(input:checked)::after { content: none; }

/* 関連カード（人物・年代 §12.4） */
.mini-cards { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px;
  scrollbar-width: none; }
.mini-cards::-webkit-scrollbar { display: none; }
.mini-card { flex: 0 0 auto; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 11px 14px; font-size: 12px; color: var(--text-2);
  min-width: 96px; }
.mini-card .mc-t { font-weight: 700; color: var(--text); font-size: 13px; }

/* 学習フロー図（出来事のつながり §10.5） */
.flow { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.flow-node { background: var(--surface); border: 1px solid rgba(30,84,118,.075);
  border-radius: var(--r-md); padding: 14px 16px; font-weight: 650; font-size: 14px;
  display: flex; align-items: center; gap: 10px; color: var(--text);
  box-shadow: var(--shadow-sm); min-height: 50px; }
.flow-node .l-end { margin-left: auto; color: var(--text-2); }
.flow-arrow { display: grid; place-items: center; color: #C3CDDC; height: 22px; font-size: 15px; }

/* 年表（§10.2） */
.tl { position: relative; }
.tl-item { display: flex; gap: 12px; align-items: flex-start; padding: 0 0 4px; }
.tl-year { flex: 0 0 62px; text-align: right; font-weight: 680; font-size: 12px;
  color: var(--primary); font-variant-numeric: tabular-nums; padding-top: 13px; }
.tl-line { flex: 0 0 auto; width: 14px; position: relative; align-self: stretch;
  display: flex; flex-direction: column; align-items: center; }
.tl-line::before { content: ''; position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--border); }
.tl-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--primary);
  margin-top: 17px; position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--bg); }
.tl-dot.done { background: var(--success); }
.tl-body { flex: 1; min-width: 0; padding-bottom: 10px; }
.tl-card { background: var(--surface); border: 1px solid rgba(30,84,118,.075);
  border-radius: var(--r-md); padding: 14px 15px; box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: 10px; min-height: 44px; }
.tl-card .t { font-weight: 700; font-size: 14px; color: var(--text); }
.tl-card .m { color: var(--text-2); font-size: 12px; }

/* 人物カード（§10.3） */
.person-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.person-card { background: var(--surface); border: 1px solid rgba(30,84,118,.075);
  border-radius: var(--r-lg); padding: 18px; box-shadow: var(--shadow-sm);
  display: block; color: var(--text); transition: transform .16s ease, box-shadow .16s ease; }
.person-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.person-card .pc-name { font-weight: 700; font-size: 15px; }
.person-card .pc-read { color: var(--text-2); font-size: 11px; }
.person-card .pc-role { color: var(--text-2); font-size: 12px; margin-top: 4px; }
.person-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--primary-light);
  color: var(--primary); display: grid; place-items: center; font-weight: 680;
  margin-bottom: 8px; font-size: 15px; }

/* =========================================================
   アバター
   ========================================================= */
.avatar { width: 40px; height: 40px; border-radius: 14px; background: var(--primary);
  display: grid; place-items: center; color: #fff; font-weight: 680; font-size: 14px;
  flex: 0 0 auto; overflow: hidden; box-shadow: 0 9px 22px rgba(35,134,200,.22); }
.avatar.sm { width: 32px; height: 32px; border-radius: 11px; font-size: 12px; }
.avatar.lg { width: 56px; height: 56px; border-radius: 19px; font-size: 18px; }

/* =========================================================
   学習時間の棒グラフ
   -------------------------------------------------------------------------
   カレンダーとは別の札に置く。前は同じ札の中で切りかえていたので、
   「いつやったか」と「どれだけやったか」を見くらべられなかった。
   ========================================================= */
/* 期間と合計。合計は右端に置いて、棒を押すとその日の値に入れかわる */
.bars-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; margin-bottom: 8px; }
.bars-head strong { color: var(--text); font-size: 14px; font-weight: 800; }
.study-bars.has-pick .bars-head strong { color: var(--primary-dark); }

.bars { display: grid; gap: 3px; grid-template-columns: repeat(14, 1fr);
  align-items: end; }
.bar-col { display: flex; padding: 0; border: 0; background: none;
  flex-direction: column; align-items: center; gap: 4px; min-width: 0;
  font: inherit; color: inherit; cursor: pointer; }
/* 選んだ日だけをはっきりさせる。ほかは薄くしてしまうと、
   全体の形（増えている／減っている）が読めなくなる */
.bar-col.is-picked .bar-track { outline: 2px solid var(--primary);
  outline-offset: 1px; }
.bar-col.is-picked .bar-day { color: var(--primary-dark); font-weight: 800; }
/* 高さはカレンダーの升目とそろえる。棒は細めにして、
   日付ラベルの幅（列の幅）とは切り離す */
.bar-track { display: flex; width: 62%; height: 172px; margin: 0 auto;
  align-items: flex-end; border-radius: 3px; background: var(--surface-2); }
/* 積み上げの向きをそろえる。上から「多い教科」が並ぶ */
.bar-fill { display: flex; overflow: hidden; width: 100%;
  flex-direction: column; border-radius: 3px; }
.bar-seg { display: block; width: 100%; }
.bar-day { color: var(--text-2); font-size: 9px; line-height: 1; }
.bar-col.is-today .bar-day { color: var(--primary-dark); font-weight: 800; }

.bars-legend { display: flex; flex-wrap: wrap; gap: 4px 12px;
  margin: 10px 0 0; padding: 0; list-style: none; }
.bars-legend li { display: flex; align-items: center; gap: 5px;
  color: var(--text-2); font-size: 11px; font-weight: 650; }
.bars-legend li.is-dim { opacity: .38; }
.bars-legend .dot { width: 8px; height: 8px; flex: 0 0 auto;
  border-radius: 50%; }
.bars-legend b { color: var(--text); font-weight: 800; }

@media (max-width: 380px) {
  .bar-track { height: 150px; }
  .bar-day { font-size: 8px; }
}

/* ---- 学習の記録: カレンダー と その日にやったこと ----------------
   横に並べる。カレンダーは「いつ」、右は「何を」。
   前は同じ札の中でタブ切りかえだったので、見くらべられなかった。

   狭い画面では上下に積む。積むと右側が長くなるので、
   高さの上限はPCのときだけ掛ける（下の @media を見ること）。 */
.study-history { display: grid; gap: 18px; }

.calendar-nav { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center;
  gap: 8px; margin-bottom: 10px; text-align: center; }
.calendar-nav a, .calendar-nav span { width: 32px; height: 32px; display: grid;
  place-items: center; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; color: var(--text-2); }
.calendar-nav a:hover { color: var(--primary); border-color: rgba(35,134,200,.25);
  background: var(--primary-light); }
.calendar-nav .disabled { opacity: .28; }
.calendar-nav strong { font-size: 13px; letter-spacing: -.01em; }
/* 日付は固定高にし、横幅が広い画面でも週の下に大きな空白を作らない。 */
.cal-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  text-align: center; color: var(--text-2); font-size: 11px; margin-bottom: 6px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 36px; column-gap: 5px; row-gap: 3px; align-content: start; }
/* 升目は四角。丸だと、並べたときに列が見えない（Gitの草と同じ考え） */
.cal-cell { width: 34px; height: 34px; justify-self: center; display: grid;
  place-items: center; border-radius: 8px; font-size: 12px; color: var(--text-2);
  font-variant-numeric: tabular-nums; text-decoration: none;
  background: var(--surface-2); box-shadow: 0 0 0 1px var(--border) inset; }

/* 濃さは4段。やった量で色が変わる。
   「やった／やらない」の2値だと、5分の日と2時間の日が同じ色になり、
   見て分かるのは「毎日つけているか」だけになる。
   段の切れ目は gamify.STUDY_LEVELS（30分・1時間・2時間）。 */
.cal-cell[data-level="1"] { background: #DFDCF6; box-shadow: none; color: #4C4780; }
.cal-cell[data-level="2"] { background: #BDB6EE; box-shadow: none; color: #363159; }
.cal-cell[data-level="3"] { background: #9189DD; box-shadow: none; color: #fff; }
.cal-cell[data-level="4"] { background: #6C63C4; box-shadow: none; color: #fff;
  font-weight: 700; }
.cal-day:hover { box-shadow: 0 0 0 1.5px var(--primary-dark) inset; }
.cal-cell.today { font-weight: 700; }
.cal-cell.today::after { content: ''; position: absolute; }
.cal-cell.selected { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--primary-dark); }
.cal-cell.sun[data-level="0"] { color: var(--error); }
.cal-cell.empty { visibility: hidden; }

/* 濃さの見本。色の意味を、画面の中で言い切る */
.cal-legend { display: flex; align-items: center; gap: 4px; margin: 12px 0 0; }
.cal-key { width: 13px; height: 13px; border-radius: 3px;
  background: var(--surface-2); box-shadow: 0 0 0 1px var(--border) inset; }
.cal-key[data-level="1"] { background: #DFDCF6; box-shadow: none; }
.cal-key[data-level="2"] { background: #BDB6EE; box-shadow: none; }
.cal-key[data-level="3"] { background: #9189DD; box-shadow: none; }
.cal-key[data-level="4"] { background: #6C63C4; box-shadow: none; }

/* その日にやったこと。件数が読めないので、**高さを決めて中を転がす**。
   決めないと、20問解いた日にこの札だけ画面3つぶんに伸びる。 */
.study-day { display: flex; flex-direction: column; min-width: 0;
  min-height: 0; }
.study-day-head { display: flex; align-items: flex-start;
  justify-content: space-between; gap: 10px; }
.study-day-head .eyebrow { margin-bottom: 3px; }
.study-day-head h3 { margin: 0; font-size: 16px; }
.study-day-list { margin-top: 12px; min-height: 0; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 13px;
  background: var(--surface); }
.study-day-row { display: flex; align-items: center; gap: 11px; padding: 12px;
  border-bottom: 1px solid var(--border); }
.study-day-row:last-child { border-bottom: 0; }
.study-day-row .icon-tile { width: 34px; height: 34px; border-radius: 11px; }
.study-day-row .grow { min-width: 0; display: flex; flex-direction: column;
  gap: 3px; }
.study-day-row .strong { font-size: 13.5px; line-height: 1.5; }
/* 何をしたかで、印の色を変える。文字を読まなくても種類が分かる */
.study-day-row.is-mastered .icon-tile { background: var(--success-light);
  color: var(--success); }
.study-day-row.is-practice .icon-tile { background: var(--warning-light);
  color: var(--warning); }
.study-day-empty { margin-top: 12px; padding: 18px; border-radius: 13px;
  border: 1px dashed var(--border); background: var(--surface-2);
  color: var(--text-2); font-size: 13px; text-align: center; }

@media (min-width: 720px) {
  /* カレンダーは幅が決まっている（7列×34px＋すき間）。
     残りぜんぶを右に渡す。minmax(0,1fr) が要る。既定の auto だと、
     中の長いテーマ名が列を押し広げてしまう。 */
  .study-history { grid-template-columns: auto minmax(0, 1fr); gap: 22px; }

  /* 高さの上限を**カレンダーの高さ**にする。ここが少し込み入っている。

     格子の行の高さは「いちばん高い中身」で決まる。右の一覧が長いと、
     行がそちらに引っぱられ、カレンダーまで間延びしてしまう。

     そこで右の列に height: 0 を置く。行の高さを決めるとき、
     この列は0として数えられるので、**行はカレンダーだけで決まる**。
     そのうえで min-height: 100%（＝決まった行の高さ）で戻す。
     結果、右は必ずカレンダーと同じ高さになり、あふれた中身は
     .study-day-list の中だけで転がる。 */
  .study-day { height: 0; min-height: 100%; }
}
/* =========================================================
   「学ぶ」のタブ
   ========================================================= */
/* 絞りこみのタブ。講座一覧の .course-tabs と同じ形にそろえる。
   同じ役目のものが画面ごとに別の形だと、押せるかどうかから考え直す
   ことになる。 */
.learn-tabs { display: flex; gap: 6px; margin-bottom: 14px;
  overflow-x: auto; scrollbar-width: none; }
.learn-tabs::-webkit-scrollbar { display: none; }
.learn-tabs a { flex: 1 0 auto; display: inline-flex; align-items: center;
  justify-content: center; gap: 5px; text-align: center; padding: 8px 14px;
  min-height: 40px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface);
  font-size: 13.5px; font-weight: 800;
  color: var(--text-2); text-decoration: none; white-space: nowrap;
  transition: .16s; }
.learn-tabs a:hover { border-color: var(--border-strong);
  color: var(--primary-dark); }
.learn-tabs a.active { border-color: transparent; background: var(--primary);
  color: #fff; }
/* 教科のタブは、選んだものだけ教科の色にする。
   白い札のままだと、どの教科を見ているのかが字だけの手がかりになる。 */
.learn-tabs a[data-subject].active { background: var(--sc-btn);
  border-color: transparent; color: #fff; }
/* 件数は色だけでなく数字で示す（§14） */
.tab-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 999px; background: var(--warning);
  color: #fff; font-size: 10px; font-weight: 800; }
.learn-tabs a.active .tab-n { background: var(--primary); }
/* 5教科が並ぶときは、字が入るところまで詰める */
.learn-tabs a { padding-left: 4px; padding-right: 4px; }
@media (max-width: 380px) { .learn-tabs a { font-size: 12px; } }

/* =========================================================
   答えの入力に添える記号ボタン
   ---------------------------------------------------------
   スマホの数字キーには「−」も「/」も無い。数字キーだけにすると
   負の数や分数が打てなくなるので、押して入れられるようにする。
   指で押すものなので、44px を下回らないようにしてある。
   ========================================================= */
.answer-keys { display: flex; gap: 8px; margin-top: 10px; }
.answer-key { min-width: 56px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text);
  font-size: 20px; font-weight: 700; font-family: inherit; cursor: pointer;
  line-height: 1; }
.answer-key:active { background: var(--primary-light); transform: scale(.97); }

/* =========================================================
   まだ教材を出していない教科
   ---------------------------------------------------------
   消してしまうと「無い」ことすら伝わらないので、並びには残す。
   ただし押せると、空の一覧に着いて理由が分からなくなる。
   だから **見えるが押せない** ——色を落とし、リンクにしない。
   ========================================================= */
.learn-tabs .is-locked { flex: 1 0 auto; display: inline-flex;
  align-items: center; justify-content: center; padding: 8px 14px;
  min-height: 40px; border-radius: var(--r-sm);
  border: 1px dashed var(--border); font-size: 13.5px; font-weight: 800;
  color: var(--text-3); white-space: nowrap; cursor: default; }
.lrow.is-locked { cursor: default; }
.lrow.is-locked .l-title, .lrow.is-locked .l-sub { color: var(--text-3, #93A3B4); }
.lrow.is-locked .icon-tile { background: #EDF2F6; color: #A9B7C4; }
.lrow.is-locked .chip { background: #EDF2F6; color: #7C8B99; }

/* 教科ごとの単元を学年で切り替える */
.grade-tabs { display: flex; gap: 6px; margin: 0 0 14px;
  overflow-x: auto; scrollbar-width: none; }
.grade-tabs::-webkit-scrollbar { display: none; }
.grade-tabs a { flex: 1 0 auto; display: inline-flex; align-items: center;
  justify-content: center; min-height: 40px; padding: 8px 16px;
  border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2);
  font-size: 13.5px; font-weight: 800; text-decoration: none;
  white-space: nowrap; transition: .16s; }
.grade-tabs a:hover { border-color: var(--border-strong);
  color: var(--primary-dark); }
.grade-tabs a.active { border-color: transparent; background: var(--primary);
  color: #fff; }

/* 苦手克服 */
.weak-row { border-bottom: none; padding-bottom: 6px; }
.weak-bar { height: 5px; border-radius: 999px; background: #DDEAF2;
  overflow: hidden; margin-top: 7px; max-width: 190px; }
.weak-bar > div { height: 100%; border-radius: 999px; background: var(--warning); }
.weak-actions { display: flex; gap: 8px; padding: 0 16px 14px 62px;
  border-bottom: 1px solid var(--border); }
.weak-actions:last-child { border-bottom: none; }

/* =========================================================
   練習問題
   -------------------------------------------------------------------------
   入口は4つ。どれも5問で、**どこから出すか**だけが違う。
   前はレベル1〜5の梯子で、到達の条件が画面の半分を占めていた。
   ========================================================= */
.resume-link { display: flex; align-items: center; gap: 11px;
  margin-bottom: 14px; color: inherit; text-decoration: none; }
.resume-link .icon-tile { background: var(--warning-light); color: #9A6608; }

/* いま何を範囲にしているか。押すとポップアップが開く */
.scope-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
  padding: 12px 14px; border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--surface); }
.scope-bar .eyebrow { margin: 0 0 2px; }
.scope-now { margin: 0; font-size: 14px; font-weight: 500;
  letter-spacing: -.01em; }
.scope-bar .btn { flex: 0 0 auto; gap: 5px; white-space: nowrap; }

/* 4つの入口。狭い画面は1列、広ければ2列。 */
.practice-grid { display: grid; gap: 10px; min-width: 0; }
/* min-width: 0 が要る。格子の子は既定が min-width: auto で、
   中の説明文の幅ぶんまで広がってしまう。 */
.practice-card { display: grid; grid-template-columns: auto 1fr; gap: 12px;
  align-items: start; min-width: 0; margin: 0;
  padding: 15px 16px; border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--surface);
  transition: border-color .16s ease, box-shadow .16s ease; }
.practice-card:hover { border-color: var(--border-strong); }
/* 出せないときは沈める。押せない札を、押せる札と同じ強さで出さない */
.practice-card.is-off { background: var(--surface-2); }
.practice-card.is-off .practice-card-mark { opacity: .45; }

.practice-card-mark { width: 40px; height: 40px; display: grid;
  place-items: center; border-radius: 13px;
  background: var(--primary-light); color: var(--primary-dark); }
.practice-card-mark.is-weak { background: var(--warning-light); color: #9A6608; }
.practice-card-mark.is-learned { background: var(--success-light);
  color: var(--success); }
.practice-card-body { min-width: 0; display: flex; flex-direction: column;
  gap: 3px; }
.practice-card-title { font-size: 15px; font-weight: 700;
  letter-spacing: -.01em; }
.practice-card-desc { color: var(--text-2); font-size: 12.5px;
  line-height: 1.65; }
.practice-card-count { display: block; margin-top: 2px; }
/* ボタンは2列とも下に置く。左のしるしの下は空くが、
   4枚を並べたときにボタンの高さがそろう */
.practice-card-go { grid-column: 1 / -1; margin-top: 4px; text-align: center; }
span.practice-card-go { justify-self: start; }

@media (min-width: 620px) {
  .practice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 4枚の高さをそろえる。ばらつくと、押す場所が段ちがいに並ぶ */
  .practice-card { align-content: start; }
  .practice-card-go { align-self: end; }
}

/* 範囲を選ぶポップアップ。単元は数が多いので、そこだけ転がす。
   画面の低い端末では札そのものもはみ出すので、上限を掛けておく。 */
.scope-card { text-align: left; max-height: 88vh; overflow-y: auto; }
.scope-card h2 { font-size: 17px; }
.scope-group { margin: 0 0 16px; padding: 0; border: 0; }
.scope-group legend { padding: 0; margin-bottom: 8px; font-size: 13px;
  font-weight: 700; }
.scope-group legend .tiny { margin-left: 6px; font-weight: 400; }
.scope-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.scope-units { display: grid; gap: 6px; max-height: 210px; overflow-y: auto;
  padding: 8px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-2); }
.scope-choice { display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 8px 13px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface); cursor: pointer;
  font-size: 13px; }
.scope-choice.wide { border-radius: var(--r-sm); width: 100%; }
.scope-choice input { width: 17px; height: 17px; flex: 0 0 auto;
  accent-color: var(--primary); }
/* 選んだものは、目を上げずに分かるように色を変える */
.scope-choice:has(input:checked) { border-color: var(--primary);
  background: var(--primary-light); color: var(--primary-dark);
  font-weight: 500; }
.scope-actions { display: grid; gap: 6px; margin-top: 4px; }

/* 得点の記録 */
.score-row { display: flex; gap: 14px; align-items: flex-start; }
.score-cell { flex: 1; min-width: 0; }
.score-line.small .score-n { font-size: 24px; }
.score-chart { display: flex; gap: 6px; height: 128px; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--border); }
/* 数字・棒・日付の3段。棒は真ん中の段いっぱいを基準に伸ばす */
.score-bar { flex: 1; min-width: 0; display: grid; gap: 4px;
  grid-template-rows: auto 1fr auto; justify-items: center; }
.sb-n { font-size: 11px; font-weight: 800; color: var(--text-2); }
.score-bar.last .sb-n { color: var(--primary); }
.sb-fill { width: 100%; max-width: 26px; min-height: 5px; align-self: end;
  border-radius: 6px 6px 0 0; background: #B9DDF1; }
.score-bar.last .sb-fill { background: var(--primary); }
.sb-d { font-size: 10px; color: var(--text-2); white-space: nowrap; }

/* 点数は実数だけ。%や補正した数字は生徒に出さない */
.score-line { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.score-n { font-size: 40px; font-weight: 800; letter-spacing: -.04em;
  line-height: 1.1; color: var(--primary); }
.score-d { font-size: 15px; color: var(--text-2); font-weight: 700; }

.rank-result { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.rank-result.is-up { border-top-color: var(--primary); }
.rank-up { width: 100%; display: flex; align-items: center; gap: 6px;
  font-weight: 800; color: var(--primary); font-size: 14px; }

/* 3問1ステージの結果。通過は文字でも示す（色だけに頼らない §14） */
.stage-line { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.stage-chip { display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 12px; border-radius: 13px; background: var(--surface-2);
  border: 1px solid var(--border); font-size: 13px; font-weight: 700; }
.stage-chip.passed { background: var(--primary-light); border-color: var(--primary);
  color: var(--primary); }
.stage-chip .tiny { font-size: 10px; color: var(--text-2); }
.stage-chip.passed .tiny { color: var(--primary); }

/* 学習コンテンツの下に置く復習カード。教科の行とそろえて、押せると分かる形にする */
.review-card { display: block; color: inherit; text-decoration: none; margin-top: 14px; }
.review-card:hover .l-title { color: var(--primary); }

/* 行のなかの文字を、見た目そのままでリンクにする */
.plain-link { color: inherit; text-decoration: none; display: block; min-width: 0; }
.plain-link:hover .l-title { color: var(--primary); }

/* =========================================================
   フォーム（§13）
   ========================================================= */
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 680; margin-bottom: 7px; font-size: 13px;
  color: var(--text); }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0; padding: 14px 16px; min-height: 52px;
  border: 1px solid var(--border);
  border-radius: var(--r-md); font-size: 16px; font-family: inherit;
  background: var(--surface-2); color: var(--text); transition: background .16s ease, box-shadow .16s ease; }
.field input::placeholder, .field textarea::placeholder { color: #8797A8; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; background: #fff; border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(35,134,200,.11); }
.field textarea { min-height: 92px; resize: vertical; line-height: 1.7; }
.field .err { color: var(--error); font-size: 12px; margin-top: 4px; }
.checkbox { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.checkbox input { width: auto; min-height: auto; accent-color: var(--primary); }
select { background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 11px 13px; min-height: 48px; font-family: inherit;
  font-size: 16px; }
.inline-form { display: flex; gap: 8px; }
.inline-form input { flex: 1; min-width: 0; }

/* iOS は文字が16pxより小さい入力欄にふれると、画面ごと拡大する。
   拡大されると問題文が画面の外へ出て読めなくなるので、16pxを下回らせない。
   （拡大自体は禁止しない。ピンチで大きくできるのは残す §14） */
input, select, textarea { font-size: 16px; }

/* 日付・時刻の入力欄は、中身の見た目の幅が決まっていて縮まないため、
   そのままだとカードからはみ出す。縮められるようにして左寄せにそろえる。 */
input[type="date"], input[type="time"], input[type="datetime-local"],
input[type="month"] {
  -webkit-appearance: none; appearance: none;
  min-width: 0; max-width: 100%; }
input[type="date"]::-webkit-date-and-time-value {
  text-align: left; margin: 0; min-width: 0; }
input[type="date"]::-webkit-calendar-picker-indicator { margin-left: auto; }

/* =========================================================
   分数（教材テキストの「2/3」を上下に組む）
   ========================================================= */
/* ---------------------------------------------------------
   分数 — 教科書と同じ組み方
   ---------------------------------------------------------
   ## 横線の高さ ＝ マイナス記号の高さ

   数式では、マイナスも分数の横線も**数式軸**という同じ高さに乗る。
   本文フォント（Noto Sans JP）で「−」のインクの中心を測ると、
   ベースラインから **0.3725em** 上だった。
   `vertical-align: -.5205em` は、横線がちょうどそこに来る値。
   **画面で測って合わせてある**（14〜80px で、ずれは1px以内）。

   この数字は下の `font-size` `line-height` `padding` と**セット**。
   どれかを変えると横線の高さが動くので、必ず測り直すこと。
   測り方: canvas に「−」を描いてインクの上下端を拾い、その中心と
   `.fr-n` の border-bottom の位置を比べる。

       −1/2  →  −  ──   ← 「−」と横線が一直線
                    2

   ## 行送りを広げない

   行の高さに効くのは `height: 1em` の箱だけ。分子と分母はそこから
   はみ出して描くので、分数の入った行だけ行間が空くことがない。
   本文の行間は1.65〜1.75あるので、はみ出したぶんは余白に収まる。 */
.frac { display: inline-block; height: 1em; line-height: 1;
  vertical-align: -.5205em; margin: 0 .16em; font-style: normal;
  font-weight: inherit; text-align: center;
  font-variant-numeric: lining-nums tabular-nums; }
.frac .fr-n, .frac .fr-d { display: block; font-size: .86em; line-height: 1.02;
  padding: 0 .2em; white-space: nowrap; }
/* 横線は本文の太さに比例させる（細すぎると印刷・拡大で消える） */
.frac .fr-n { border-bottom: .075em solid currentColor; padding-bottom: .06em; }
.frac .fr-d { padding-top: .06em; }

/* 分数の前に置いた符号。
   分子に入れると「(−1) ÷ 2」という別の意味に読めるうえ、
   横線の上で小さくなって見落とすので、必ず外に出す
   （app/mdtext.py の _fraction）。
   横線をマイナスの高さに合わせてあるので、符号は**素のまま**でそろう。 */
.frac-sign { font-style: normal; margin-right: .02em; }

/* 数式まわりの数字は、高さのそろった字形で出す */
.frac, .math { font-variant-numeric: lining-nums tabular-nums; }

/* =========================================================
   問題・診断
   ========================================================= */
.q-stem { font-size: 15px; line-height: 1.75; font-weight: 600; }
.q-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.q-progress .pbar { flex: 1; min-width: 0; }
.q-count { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums;
  white-space: nowrap; }
/* 残り数。位置（3/34）だけでは引き算が要るので、あと何回かを直接出す。
   「3 / 34」と続けて読まれないよう、ピルにして切り離す */
.q-left { font-size: 11px; font-weight: 680; color: var(--primary);
  background: var(--primary-light); border-radius: 999px; padding: 3px 8px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }

/* =========================================================
   上部固定の進捗（会話・問題）
   どこまで来たか・あとどれくらいかを、スクロールしても見えるようにする。
   縦を詰めるため、進捗は行を使わず下辺の細い線で表す。
   ========================================================= */
.sticky-progress { position: sticky; top: var(--appbar-h, 64px); z-index: 15;
  isolation: isolate;
  background: rgba(255,255,255,.88); border-bottom: 1px solid var(--border);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  /* 本文がバーの下へ潜り込んでいると分かるように影を落とす */
  box-shadow: 0 4px 10px rgba(16, 24, 40, .05); }
/* 中身だけ本文と同じ幅・同じ左右位置にそろえる（バーの背景は横100%） */
.sticky-progress .inner { max-width: 640px; margin: 0 auto; padding: 6px 16px 8px;
  display: flex; align-items: center; gap: 10px; min-height: 34px; }
.sticky-progress .grow { min-width: 0; }
/* 下辺いっぱいに引く進捗線。行を消してヘッダーの高さを稼ぐ */
.sticky-progress .pbar { position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; border-radius: 0; background: transparent; }
.sticky-progress .pbar > div { border-radius: 0; }
.sp-label { font-size: 12px; font-weight: 700; color: var(--primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-progress .back-link { min-height: 0; flex: 0 0 auto; }
.result-banner { padding: 15px 17px; border-radius: var(--r-md); margin: 16px 0;
  font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.result-correct { background: var(--success-light); color: #1E7A47; }
.result-incorrect { background: var(--primary-light); color: var(--primary-dark); }
.hint { background: var(--warning-light); border-left: 3px solid var(--warning);
  padding: 11px 14px; border-radius: var(--r-sm); margin: 10px 0; font-size: 14px;
  color: #8A5D06; }
.explanation { background: var(--surface); border: 1px solid rgba(30,84,118,.075); padding: 18px;
  border-radius: var(--r-lg); margin: 12px 0; font-size: 14px; line-height: 1.75;
  box-shadow: var(--shadow-sm); }
.explanation .ex-title { font-weight: 700; margin-bottom: 6px; font-size: 13px;
  color: var(--primary-dark); }
.explanation .why-wrong { color: var(--text-2); font-size: 13px; margin-top: 8px;
  padding-top: 8px; border-top: 1px dashed var(--border); }

/* =========================================================
   本文（§10.6）
   ========================================================= */
.prose { font-size: 15px; line-height: 1.9; color: var(--text); }
.prose h2 { font-size: 16px; margin: 20px 0 8px; }
.prose h3 { font-size: 14px; margin: 16px 0 6px; }
.prose p { margin: 0 0 12px; }
.prose strong { color: var(--primary-dark); }
.prose ul, .prose ol { margin: 0 0 12px; padding-left: 20px; }
.prose li { margin-bottom: 5px; }
details.collapse { background: var(--surface); border: 1px solid rgba(30,84,118,.08);
  border-radius: var(--r-md); margin-bottom: 10px; overflow: hidden; box-shadow: var(--shadow-sm); }
details.collapse > summary { padding: 14px 15px; font-weight: 700; cursor: pointer;
  list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; }
details.collapse > summary::-webkit-details-marker { display: none; }
details.collapse > summary::after { content: '＋'; margin-left: auto; color: var(--text-2);
  font-weight: 400; }
details.collapse[open] > summary::after { content: '−'; }
details.collapse .collapse-body { padding: 0 15px 15px; }

/* =========================================================
   テーブル（管理・講師）
   ========================================================= */
table.data { width: 100%; border-collapse: collapse; }
table.data th { color: var(--text-2); font-weight: 680; font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--border); }
table.data td { text-align: left; padding: 14px 10px; border-bottom: 1px solid var(--border);
  font-size: 14px; }
table.data tr:last-child td { border-bottom: none; }

/* 講師アラート */
.alert-card { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px;
  border-radius: var(--r-lg); margin-bottom: 10px; background: var(--surface);
  border: 1px solid rgba(30,84,118,.075); border-left: 4px solid var(--border);
  box-shadow: var(--shadow-sm); }
.alert-card.urgent { border-left-color: var(--error); }
.alert-card.today { border-left-color: var(--primary); }
.alert-card.watch { border-left-color: var(--warning); }
.alert-card.ok { border-left-color: var(--success); }
.alert-card .sname { font-weight: 700; }
.alert-card .cause { color: var(--primary-dark); font-size: 13px; }
.alert-card .action { color: var(--text-2); font-size: 13px; }
.dash-group { margin-bottom: 22px; }
.dash-group h2 { display: flex; align-items: center; gap: 9px; font-size: 16px; }
.grp-count { font-size: 12px; background: #EAF3F8; color: var(--text-2);
  border-radius: 999px; padding: 2px 9px; font-weight: 700; }

/* 互換 */
.skill-row { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-top: 1px solid var(--border); }
.skill-row:first-child { border-top: none; }
a.skill-row { color: var(--text); }
.status-pill { font-size: 12px; padding: 3px 9px; border-radius: 999px;
  background: #EAF3F8; color: var(--text-2); font-weight: 600; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 8px; }
.m-not_started { background: #BDD0DC; } .m-diagnosed { background: #65B9E5; }
.m-learning { background: var(--primary); } .m-tentative { background: var(--warning); }
.m-mastered { background: var(--success); } .m-retained { background: #14663A; }
.m-needs_review { background: var(--error); }
.task-item { display: flex; align-items: center; gap: 14px; padding: 15px 0;
  border-top: 1px solid var(--border); }
.task-item:first-child { border-top: none; }
.task-ico { width: 44px; height: 44px; border-radius: 15px; background: var(--primary-light);
  display: grid; place-items: center; flex: 0 0 auto; color: var(--primary); }
.task-ico .icon { width: 19px; height: 19px; }
.task-body { flex: 1; min-width: 0; }
.task-body .tt { font-weight: 600; font-size: 15px; }
.task-body .ts { color: var(--text-2); font-size: 12px; }

/* =========================================================
   下部ナビ — 青白いフローティングバー
   ========================================================= */
.bottomnav { position: fixed; bottom: max(14px, env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%); width: min(calc(100% - 24px), 430px); height: 66px;
  background: rgba(255,255,255,.92); border: 1px solid var(--border);
  border-radius: 16px; display: flex; justify-content: space-between; align-items: center;
  gap: 4px; padding: 7px 9px; z-index: 30;
  box-shadow: 0 18px 50px rgba(28,78,111,.13);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-decoration: none; color: var(--text-2); font-size: 9.5px; font-weight: 620;
  padding: 5px 2px; min-width: 0; min-height: 52px; border-radius: 10px;
  justify-content: center; transition: color .15s ease, background .15s ease; }
.bottomnav a:hover { color: var(--primary-dark); background: rgba(221,241,252,.72); }
.bottomnav a .ic { height: 24px; display: grid; place-items: center; }
.bottomnav a .ic .icon { width: 20px; height: 20px; }
.bottomnav a.active { color: var(--primary-dark); background: var(--primary-light); }
.bottomnav a.active .ic .icon { stroke-width: 2.3; }
.nav-label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.1; white-space: nowrap; }

/* =========================================================
   ランディング / 認証
   ========================================================= */
.landing { text-align: center; padding: clamp(42px, 10vh, 92px) 4px 30px; }
.landing-logo { width: 82px; height: 82px; border-radius: 26px; margin: 0 auto 24px;
  display: grid; place-items: center; background: #fff; box-shadow: var(--shadow);
  position: relative; overflow: hidden; }
.landing-logo::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid rgba(35,134,200,.12); border-radius: inherit; }
.landing .logo img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
  transform: scale(1.18); }
.landing-kicker { color: var(--primary); font-size: 9px; font-weight: 680; letter-spacing: .16em;
  margin: 0 0 12px; }
.landing h1 { font-size: clamp(32px, 9vw, 42px); line-height: 1.08; letter-spacing: -.05em;
  font-weight: 680; margin: 0 0 20px; }
.landing h1 span { color: var(--primary); }
.landing .lead { color: var(--text-2); font-size: 15px; max-width: 460px;
  line-height: 1.8; margin: 0 auto 28px; }
.landing > .btn-row { margin-bottom: 42px; }
.pillars { display: flex; flex-direction: column; gap: 10px; max-width: 420px;
  margin: 0 auto 26px; text-align: left; }
.pillar { display: flex; gap: 14px; align-items: center; background: rgba(255,255,255,.92);
  border: 1px solid rgba(30,84,118,.07); border-radius: var(--r-lg); padding: 16px;
  box-shadow: var(--shadow-sm); }
.pillar .pico { color: var(--primary); width: 44px; height: 44px; border-radius: 15px;
  background: var(--primary-light); display: grid; place-items: center; flex: 0 0 auto; }
.pillar .pico .icon { width: 20px; height: 20px; }
.pillar .ptitle { font-weight: 650; font-size: 14px; }
.pillar .pdesc { color: var(--text-2); font-size: 12px; }

/* =========================================================
   空状態
   ========================================================= */
.empty { text-align: center; padding: 32px 18px; color: var(--text-2); }
.empty .e-ico { width: 56px; height: 56px; border-radius: 19px; background: #E7F1F7;
  display: grid; place-items: center; margin: 0 auto 12px; color: #7891A3; }
.empty .e-title { font-weight: 650; color: var(--text); margin-bottom: 4px; font-size: 14px; }

/* =========================================================
   管理画面（デスクトップを前提にする）

   生徒の画面は片手で持つ前提なので 680px に絞ってある。
   管理画面は逆で、一覧と編集を並べて見たい。だから広く取り、
   会話の編集では「生徒に見える形」と「直す場所」を左右に並べる。
   ========================================================= */
.content.admin { max-width: 1320px; padding-bottom: 60px; }
.admin-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin: 6px 0 18px; }
.admin-head .page-title { margin: 2px 0 0; }

/* 左に中身、右に補助。狭い画面では縦に積む */
.admin-split { display: grid; gap: 20px; align-items: start;
  grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 1000px) { .admin-split { grid-template-columns: 1fr; } }

.admin-side { position: sticky; top: 18px; display: grid; gap: 14px; }

/* 練習問題 / 会話 の切りかえ */
.admin-tabs { display: flex; gap: 4px; margin-bottom: 18px; padding: 4px;
  border-radius: 15px; background: #E7F1F7; }
.admin-tabs a { display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: 12px; color: var(--text-2);
  font-size: 13px; font-weight: 700; text-decoration: none; }
.admin-tabs a.active { background: var(--surface); color: var(--text);
  box-shadow: 0 5px 16px rgba(21,28,45,.10); }
.admin-tabs .n { color: var(--text-2); font-weight: 650; }

/* 会話のプレビュー。生徒の画面と同じ .chat / .msg / .bubble を使い、
   囲いと編集の操作だけを管理画面のものにする */
.admin-chat { padding: 20px 22px; border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--bg); }
.admin-chat .chat { gap: 14px; }
.admin-chat .msg-col { max-width: 100%; }
.admin-step { position: relative; }
.admin-step + .admin-step { margin-top: 14px; }
.admin-step-head { display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px; }
.admin-step-head .chip { font-size: 10px; }
.admin-step-edit { margin-left: auto; padding: 3px 10px; border: 0;
  border-radius: 999px; background: rgba(35,134,200,.10);
  color: var(--primary-dark); font: inherit; font-size: 11px;
  font-weight: 700; cursor: pointer; }
.admin-step-edit:hover { background: rgba(35,134,200,.18); }
.admin-step[data-editing] .admin-step-view { display: none; }
.admin-step:not([data-editing]) .admin-step-form { display: none; }
.admin-step-form { padding: 14px; border: 1px solid rgba(35,134,200,.28);
  border-radius: var(--r-md); background: var(--surface); }
.admin-step-form textarea { min-height: 96px; }
.admin-step-form .field { margin-bottom: 10px; }
.admin-chapter { margin: 0 0 10px; padding-top: 6px; color: var(--text-2);
  font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.admin-chapter + .admin-step { margin-top: 0; }

/* 選択肢のプレビュー（問いかけの吹き出しの下） */
.admin-choices { display: grid; gap: 5px; margin: 8px 0 0; padding: 0;
  list-style: none; }
.admin-choices li { display: flex; align-items: center; gap: 7px;
  padding: 7px 11px; border: 1px solid var(--border); border-radius: 11px;
  background: var(--surface); color: var(--text-2); font-size: 12.5px; }
.admin-choices li.ok { border-color: rgba(36,166,106,.34);
  background: var(--success-light); color: #1E7A47; font-weight: 700; }
.admin-note { margin: 7px 0 0; color: var(--text-2); font-size: 11.5px; }

/* まとめて書きかえ */
.admin-bulk textarea { min-height: 420px; font-size: 12.5px; line-height: 1.7;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.admin-syntax { margin: 0; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--surface-2); color: var(--text-2);
  font-size: 11.5px; line-height: 1.85; white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* 単元一覧の絞り込み。並べるだけなので .field は使わない */
.admin-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 12px; }
.admin-filter select { padding: 9px 14px; min-height: 40px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: 14px; font-family: inherit;
  background: var(--surface); color: var(--text); }
.admin-filter select:focus { outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(35,134,200,.11); }

/* 設問の一覧 */
.admin-q { display: grid; gap: 10px; }
.admin-q-row { display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface); }
.admin-q-row .grow { min-width: 0; }
.admin-q-stem { margin: 0 0 5px; font-weight: 700; line-height: 1.6; }
.admin-q-meta { color: var(--text-2); font-size: 11.5px; }
.admin-q-actions { display: flex; gap: 6px; flex: 0 0 auto; }

/* =========================================================
   代表画面のシグネチャ
   ========================================================= */
body.today-page { background: var(--surface); }
.progress-card { background: linear-gradient(145deg, #FFFFFF 0%, #F1F8FC 100%); }
.progress-card .pbar { height: 9px; }
.hero { margin-bottom: 28px; }

.post-body { white-space: pre-wrap; line-height: 1.8; margin: 9px 0; }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.check-item { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0;
  border-bottom: 1px solid var(--border); }
.check-item:last-child { border-bottom: 0; }
.check-box { width: 25px; height: 25px; flex: 0 0 auto; border-radius: 9px;
  border: 1.5px solid #C8CDD6; background: #fff; color: #fff; display: grid;
  place-items: center; padding: 0; }
.check-box.on { background: var(--primary); border-color: var(--primary); }
.check-item .ct { padding-top: 1px; }

/* =========================================================
   会話テンポ / 用語カード
   ========================================================= */
.chat-speed-control { position: relative; flex: 0 0 auto; display: flex; align-items: center; }
.chat-speed-button { width: 28px; height: 28px; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 9px; background: #fff;
  color: var(--primary); cursor: pointer; box-shadow: 0 2px 7px rgba(15,23,42,.05); }
.chat-speed-button .icon { width: 14px; height: 14px; }
.chat-speed-button[aria-expanded="true"] { border-color: rgba(35,134,200,.34);
  background: var(--primary-light); }
.chat-speed-menu { position: absolute; z-index: 30; top: calc(100% + 9px); right: 0;
  width: 190px; padding: 8px; border: 1px solid var(--border); border-radius: 15px;
  background: rgba(255,255,255,.98); box-shadow: 0 18px 45px rgba(15,23,42,.14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.chat-speed-menu[hidden] { display: none; }
.chat-speed-menu::before { content: ''; position: absolute; top: -5px; right: 10px;
  width: 9px; height: 9px; background: #fff; border-left: 1px solid var(--border);
  border-top: 1px solid var(--border); transform: rotate(45deg); }
.chat-speed-menu > p { margin: 2px 5px 6px; color: var(--text-2); font-size: 10px;
  font-weight: 700; letter-spacing: .04em; }
.chat-speed-menu button { width: 100%; min-height: 38px; padding: 8px 10px; display: flex;
  align-items: center; justify-content: space-between; border: 0; border-radius: 10px;
  background: transparent; color: var(--text); font: inherit; font-size: 13px;
  font-weight: 700; cursor: pointer; }
.chat-speed-menu button small { color: var(--text-2); font-size: 10px; font-weight: 600; }
.chat-speed-menu button.active { background: var(--primary-light); color: var(--primary); }
.chat-speed-menu button.active::before { content: '✓'; margin-right: 7px; }
.chat-speed-menu button.active small { margin-left: auto; color: var(--primary); }
.term-trigger { appearance: none; border: 0; padding: 0; margin: 0; background: none;
  color: var(--primary); font: inherit; cursor: pointer; text-align: inherit;
  text-decoration: underline; text-decoration-color: rgba(35,134,200,.25);
  text-decoration-thickness: 2px; text-underline-offset: 3px; }
.term-sheet { position: fixed; inset: 0; z-index: 80; display: grid; align-items: end; }
.term-sheet[hidden] { display: none; }
.term-sheet-backdrop { position: absolute; inset: 0; border: 0; background: rgba(15,23,42,.28); }
.term-card { position: relative; width: min(calc(100% - 24px), 520px); margin: 12px auto;
  padding: 22px; border: 1px solid rgba(226,232,240,.9); border-radius: 24px;
  background: #fff; box-shadow: 0 24px 70px rgba(15,23,42,.2); }
.term-close { flex: 0 0 auto; width: 36px; height: 36px;
  display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%;
  background: #fff; color: var(--text); font-size: 20px; cursor: pointer; }
.term-card h2 { margin: 0 0 2px; font-size: 19px; line-height: 1.35; }
.term-reading { margin: 0 0 14px; color: var(--text-2); font-size: 12px; }
.term-card > p { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.75; }
.term-card .btn-row { margin-top: 18px; }
@keyframes chapter-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes chapter-card-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* =========================================================
   回答フィードバック / 比較問題
   ========================================================= */
/* 正解バナーと、その下の要点。2つで1枚のカードに見えるようにつなげる。
   .has-note が付いたときだけバナーの下の角を落とす。
   付け忘れると、要点の枠だけが上辺なしで浮いてしまう。 */
.feedback-compact { margin: 14px 0 10px; }
.feedback-compact .result-banner { margin-bottom: 0; }
.feedback-compact.has-note .result-banner {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.feedback-takeaway { margin: 0; padding: 14px 16px;
  border: 1px solid #CDE9D7; border-top: 0;
  border-radius: 0 0 var(--r-md) var(--r-md); background: #F7FCF9;
  color: #183A28; font-size: 14px; line-height: 1.65; font-weight: 600; }
.auto-next-note { margin: 7px 4px 0; text-align: right; }
.learning-feedback { margin: 10px 0; padding: 14px 15px; border: 1px solid rgba(35,134,200,.14);
  border-radius: 14px; background: #F0F8FC; color: var(--text); box-shadow: 0 7px 20px rgba(35,134,200,.05); }
.learning-feedback-head { display: flex; align-items: center; gap: 8px; color: var(--primary-dark);
  font-size: 12px; line-height: 1.4; font-weight: 750; letter-spacing: .01em; }
.learning-feedback-icon { width: 24px; height: 24px; display: grid; place-items: center;
  flex: 0 0 auto; border-radius: 8px; background: var(--primary-light); color: var(--primary); }
.learning-feedback-body { margin-top: 7px; font-size: 14px; line-height: 1.7; color: var(--text); }
.learning-feedback-body > :first-child { margin-top: 0; }
.learning-feedback-body > :last-child { margin-bottom: 0; }
.answer-detail { margin: 10px 0 14px; }
.compare-opt { align-items: flex-start; }
.compare-table { overflow: hidden; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; font-size: 12px; }
.compare-head, .compare-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compare-head { background: #EAF3F8; color: #526A7C; }
.compare-head > *, .compare-cells > * { min-width: 0; padding: 8px 9px; line-height: 1.5; }
.compare-head > * + *, .compare-cells > * + * { border-left: 1px solid var(--border); }
.compare-cells > * { color: var(--text); }

/* =========================================================
   復習予告
   ========================================================= */
.today-review-link { display: flex; align-items: center; gap: 12px;
  margin: -4px 0 20px; color: inherit; text-decoration: none; }
.today-review-link .grow { display: flex; flex-direction: column; gap: 2px; }
.review-date { flex: 0 0 52px; color: var(--primary); font-size: 12px; font-weight: 750; }
.memory-list { padding: 5px 16px; }
.memory-row { display: flex; align-items: center; gap: 12px; padding: 13px 0;
  color: inherit; text-decoration: none; border-bottom: 1px solid var(--border); }
.memory-row:last-child { border-bottom: 0; }
.memory-row .grow { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.memory-dots { display: flex; gap: 4px; }
.memory-dots i { width: 20px; height: 5px; border-radius: 99px; background: #E2E8F0; }
.memory-dots i.on { background: var(--primary); }

/* =========================================================
   レスポンシブ（§18: 360/390/430/768/1440）
   ========================================================= */
@media (min-width: 768px) {
  .content { padding: 34px 26px 138px; }
  .content.wide { padding-left: 34px; padding-right: 34px; }
  .sticky-progress .inner { padding: 8px 26px 10px; }
  .person-grid { grid-template-columns: repeat(3, 1fr); }
  .bottomnav { width: min(calc(100% - 48px), 500px); }
  .bottomnav a { flex-direction: row; gap: 6px; padding-left: 9px; padding-right: 9px; }
  .bottomnav a .ic { width: auto; height: 24px; }
}
@media (max-width: 360px) {
  .display { font-size: 30px; }
  .btn { padding: 12px 16px; }
  .person-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .content { padding-left: 18px; padding-right: 18px; }
  .bottomnav { height: 68px; padding: 7px 6px; }
  .bottomnav a { min-height: 52px; }
  .bottomnav a .ic { width: auto; height: 24px; }
  .landing > .btn-row { flex-direction: column; }
  .landing > .btn-row .btn { width: 100%; }
}

/* =========================================================
   レベル制の一覧（数学など、上から順に進む教科）
   ========================================================= */
.level-no { width: 34px; height: 34px; border-radius: 11px; flex: 0 0 auto;
  display: grid; place-items: center; background: var(--surface-2);
  color: var(--text-2); font-size: 14px; font-weight: 800;
  font-variant-numeric: tabular-nums; }
.level-no.ok { background: var(--success-light); color: var(--success); }
.level-no.now { background: var(--primary); color: #fff;
  box-shadow: 0 6px 16px rgba(35, 134, 200, .28); }

/* いま進むべき行を目立たせる */
.lrow-now { background: var(--primary-light); }
/* まだ会話を書いていないレベル。順路は見せるが押させない */
.lrow-soon { opacity: .5; }

/* 難易度の帯 */
.tier { display: inline-block; font-size: 10px; font-weight: 800;
  letter-spacing: .04em; padding: 2px 7px; border-radius: 999px;
  margin-right: 5px; }
.tier-basic    { background: #E8F7EF; color: #128050; }
.tier-standard { background: var(--primary-light); color: var(--primary); }
.tier-advanced { background: #FFF3E1; color: #B26A00; }
.tier-hard     { background: #F1EAFE; color: #6B3FD4; }
.tier-top      { background: #FDE9EC; color: #C22F3C; }
.tier-now      { background: var(--primary); color: #fff; }
.tier-soon     { background: var(--surface-2); color: var(--text-2); }

/* =========================================================
   手書きメモ（途中式を書き留める紙）
   =========================================================
   ふだんは小さなボタンだけ。開くと半透明の用紙が出る。
   下部ナビの上に浮かせ、操作の邪魔をしない位置に置く。

   ## 大きさと位置は、生徒が決める

   問題によって、書きたい量も「隠したくない場所」もちがう。
   図を見ながら書きたいときは紙を下げたいし、
   長い計算のときは高くしたい。だから

     --pad-h    紙の高さ（既定は**画面の半分**）
     --pad-lift 下端をどれだけ持ち上げるか

   の2つを JS から書き換える（scratchpad.js）。
   端末に覚えるので、次に開いても同じ大きさ・位置で出る。
   ========================================================= */
.pad-open { position: fixed; right: 14px; z-index: 40;
  bottom: calc(84px + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 13px; border: 1px solid var(--border); border-radius: 999px;
  background: rgba(255,255,255,.92); color: var(--text-2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 8px 22px rgba(21,28,45,.10);
  font-size: 12px; font-weight: 700; cursor: pointer; }
.pad-open span { line-height: 1; }
.pad-open.on { background: var(--primary); color: #fff; border-color: transparent; }

/* 用紙。裏の問題文が透けて見えるので、見ながら書ける */
.pad { position: fixed; left: 0; right: 0; z-index: 45;
  /* 既定は画面の半分。50svh は、スマホでアドレスバーが出入りしても
     高さが跳ねない単位（vh だと開閉のたびに紙の大きさが変わる） */
  --pad-h: 50svh;
  --pad-lift: 0px;
  height: var(--pad-h);
  bottom: calc(72px + var(--pad-lift) + env(safe-area-inset-bottom));
  margin: 0 10px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.93);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--border); box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden; }
.pad[hidden] { display: none; }
.pad-bar { display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--border); }
.pad-title { font-size: 12px; font-weight: 800; color: var(--text-2);
  display: inline-flex; align-items: center; gap: 5px; flex: 1; }
.pad-tools { display: flex; align-items: center; gap: 6px; }
.pad-tool { border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); border-radius: 999px; padding: 6px 10px;
  font-size: 11px; font-weight: 700; cursor: pointer; min-height: 32px; }
.pad-tool.is-on { background: var(--primary); color: #fff; border-color: transparent; }
.pad-close { border: none; background: none; color: var(--text-2);
  font-size: 20px; line-height: 1; padding: 4px 8px; cursor: pointer;
  min-height: 32px; }

/* つまみ。上＝高さを変える、下＝紙ごと上下に動かす。
   指で掴めるよう、見た目の線より広く当たり判定をとる。
   同じ見た目だと役目を取りちがえるので、**幅を変えて**見分けられるようにしてある。 */
.pad-grip { flex: 0 0 auto; width: 100%; border: none; background: none;
  padding: 0; height: 20px; cursor: ns-resize; touch-action: none;
  display: flex; align-items: center; justify-content: center; }
.pad-grip-bottom { cursor: grab; }
.pad-grip.is-dragging, .pad-grip-bottom:active { cursor: grabbing; }
.pad-grip::before { content: ''; display: block; width: 46px; height: 5px;
  border-radius: 999px; background: var(--border-strong);
  transition: background .12s; }
.pad-grip-bottom::before { width: 26px; }
.pad-grip:hover::before, .pad-grip.is-dragging::before {
  background: var(--primary); }

/* 罫線入りの用紙。書く場所の目安になる。
   高さは、上下のつまみとツールバーを引いた**残り全部** */
.pad-canvas { display: block; width: 100%; flex: 1 1 auto; min-height: 0;
  touch-action: none; overscroll-behavior: none;
  background-image: linear-gradient(rgba(30,84,118,.08) 1px, transparent 1px);
  background-size: 100% 30px; cursor: crosshair; }
/* 用紙の上では、なぞっても文字選択や長押しメニューが出ないようにする */
.pad { overscroll-behavior: contain; -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; }
/* 書いているあいだはページを固定する。LINE の内蔵ブラウザで上下に揺れて
   線が引けなくなるのを防ぐ（scratchpad.js が付け外しする）。 */
.pad-drawing, .pad-drawing body { overscroll-behavior: none; touch-action: none; }
@media (min-width: 768px) {
  .pad { max-width: 680px; margin: 0 auto; left: 0; right: 0; }
}

/* 確認テストの合格カウント（2問正解で合格） */
.retest-count { margin-left: auto; font-size: 12px; font-weight: 800;
  color: var(--success); }

/* アニメーションの開始ボタン（いきなり全画面にしないためのひと呼吸） */
.anim-start { display: flex; flex-direction: column; gap: 4px; }
.anim-start .tiny { margin: 2px 0 0; }

/* =========================================================
   選択シート（習得ずみのレベルを押したとき）
   ========================================================= */
.pick-sheet { position: fixed; inset: 0; z-index: 70; display: flex;
  align-items: flex-end; justify-content: center; }
.pick-sheet[hidden] { display: none; }
.pick-backdrop { position: absolute; inset: 0; border: none; padding: 0;
  background: rgba(16, 18, 23, .38); cursor: pointer; }
.pick-card { position: relative; width: 100%; max-width: 520px;
  background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
  box-shadow: var(--shadow); }
.pick-card h2 { font-size: 17px; }
.pick-card .btn { margin-bottom: 8px; }
@media (min-width: 768px) {
  .pick-sheet { align-items: center; }
  .pick-card { border-radius: var(--r-lg); margin: 0 16px; padding-bottom: 20px; }
}

/* =========================================================================
   公開ページ（LP・料金・ブログ・法務）
   -------------------------------------------------------------------------
   意匠は、いただいた見本（mathnote_lp_light）にそろえている。
   アプリ本体（青・太めの字・大きい角丸）とは別の見た目になる。

   ## どうやって別にしているか

   色や字の太さを **.public-body の中だけで置きかえる**。
   公開ページの <body> にだけ .public-body が付いているので、
   ログインしたあとの画面には一切とどかない。

   置きかえているのは本体と同じ変数名（--primary など）。
   こうしておくと、ブログ・料金・法務のように前から書いてある
   決まりが、そのまま見本の色で出る。1つずつ書き直さなくてよい。

   ## 字について

   見本は Noto Sans JP を Google Fonts から読んでいる。
   ここでは読まない（公開ページから外部を読まない決まり。
   tests/test_public_pages.py で押さえてある）。
   Android の既定は Noto Sans JP そのもの、Apple は
   ヒラギノ角ゴシックで、字面はほぼ同じに出る。

   ## 幅とブレークポイント

     --shell  … 囲いの最大幅。見本と同じ 1080px
     .prose   … 読ませる文章。720px で止める

   ブレークポイントは 768 / 1024 の2つだけ。増やさないこと。
   ========================================================================= */
.public-body {
  /* --- 見本の色。名前は本体と同じにして、中身だけ差し替える --- */
  --primary: #9189DD;
  --primary-dark: #7169BF;
  --primary-light: #ECE9F9;
  --bg: #FBFBFE;
  --surface: #FFFFFF;
  --surface-2: #F4F2FB;
  --border: #E3E1EF;
  --border-strong: #D2CEE7;
  --text: #292B4D;
  --text-2: #696E89;
  --text-3: #8A8FA6;
  --success: #3FA97D;      /* 見本の緑（#56C996）は文字だと薄いので一段濃く */
  --warning: #E0A93A;
  --shadow: 0 14px 38px rgba(53,52,91,.09);
  --shadow-sm: 0 10px 28px rgba(53,52,91,.08);
  --shadow-cta: 0 5px 0 #6F67BC;

  /* 見本だけが持つ色 */
  --cyan: #31BDE9;
  --cyan-soft: #E3F7FD;
  --yellow: #FFD45F;
  --green: #56C996;
  --navy: #252746;

  --r-xl: 30px; --r-lg: 22px; --r-md: 16px; --r-sm: 12px;
  --shell: 1080px; --prose: 720px;

  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .01em;
  font-feature-settings: "palt" 1;
}

.pub-shell { width: min(var(--shell), calc(100% - 40px)); margin: 0 auto;
  padding: 0; }
.prose { max-width: var(--prose); }

/* 画面外に置き、Tabで入ったときだけ出す（キーボードで使う人向け §14） */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--primary); color: #fff; font-weight: 500; }

/* ---- 字 -------------------------------------------------------------- */
.public-body h1, .public-body h2, .public-body h3 { letter-spacing: -.025em; }
.pub-h1, .public-body h1 { margin: 0 0 22px;
  font-size: clamp(32px, 4.4vw, 52px); line-height: 1.25;
  letter-spacing: -.035em; font-weight: 600; }
.pub-h2 { margin: 0 0 16px; font-size: clamp(25px, 3vw, 36px);
  line-height: 1.4; letter-spacing: -.025em; font-weight: 600; }
.pub-lead, .pub-sub { margin: 0 0 24px; max-width: 640px;
  color: var(--text-2); font-size: clamp(14px, 1.5vw, 17px); line-height: 1.9; }
.pub-note { margin: 14px 0 0; color: var(--text-3); font-size: 12.5px; }
.pub-eyebrow { display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 13px; color: var(--primary-dark);
  font-size: 11px; font-weight: 500; letter-spacing: .11em;
  text-transform: uppercase; }
.pub-eyebrow::before { content: ''; width: 8px; height: 8px;
  border-radius: 2px; background: var(--cyan); }

/* ---- ボタン（本体の .btn を、公開ページの中だけ上書き） -------------- */
.public-body .btn { min-height: 46px; padding: 12px 18px; border: 0;
  border-radius: 12px; font-size: 14px; font-weight: 500;
  letter-spacing: 0; box-shadow: none; transition: .18s ease; }
.public-body .btn-lg { min-height: 50px; padding: 13px 22px; font-size: 15px; }
.public-body .btn-sm { min-height: 38px; padding: 8px 13px; font-size: 13px;
  border-radius: 10px; }
/* 下だけに落ちる影。押すと沈む（見本の作り） */
.public-body .btn-primary { background: var(--primary); color: #fff;
  box-shadow: 0 5px 0 #6F67BC; }
.public-body .btn-primary:hover { background: #877FD4;
  transform: translateY(-1px); }
.public-body .btn-primary:active { transform: translateY(3px);
  box-shadow: 0 2px 0 #6F67BC; }
.public-body .btn-outline { background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); }
.public-body .btn-outline:hover { background: var(--surface-2); }
.public-body .chip { padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: #67618F; font-size: 12px; font-weight: 500; }

/* ---- ヘッダ ---------------------------------------------------------- */
.pub-header { position: sticky; top: 0; z-index: 30; height: 64px;
  display: flex; align-items: center;
  background: rgba(255,255,255,.9); backdrop-filter: blur(14px);
  border-bottom: 1px solid #ECEAF3; }
.pub-header-inner { display: flex; align-items: center; gap: 18px;
  width: min(var(--shell), calc(100% - 40px)); }
.pub-brand { display: inline-flex; align-items: center;
  color: var(--text); text-decoration: none; }

.pub-nav { display: none; gap: 4px; margin-left: 18px; }
.pub-nav a { padding: 7px 10px; border-radius: 9px;
  color: #595D78; text-decoration: none; font-size: 13px; }
.pub-nav a:hover { background: var(--surface-2); }
.pub-header-cta { display: none; align-items: center; gap: 8px;
  margin-left: auto; }
.pub-login { padding: 8px 12px; color: #595D78; text-decoration: none;
  font-size: 13px; font-weight: 500; }

/* 狭い画面のメニュー。JS を使わない（<details> だけで開く） */
.pub-menu { margin-left: auto; position: relative; }
.pub-menu summary { list-style: none; display: grid; gap: 4px;
  width: 40px; height: 40px; place-content: center; cursor: pointer; }
.pub-menu summary::-webkit-details-marker { display: none; }
.pub-menu summary span { display: block; width: 20px; height: 2px;
  border-radius: 2px; background: var(--navy); }
.pub-menu-body { position: absolute; right: 0; top: 46px; min-width: 190px;
  display: grid; gap: 2px; padding: 8px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface);
  box-shadow: var(--shadow); }
.pub-menu-body a { padding: 11px 12px; border-radius: 10px;
  color: var(--text); text-decoration: none; font-size: 14px; }
.pub-menu-body a:hover { background: var(--surface-2); }

/* ---- 節の共通 -------------------------------------------------------- */
.pub-main { min-height: 60vh; }
.pub-section { padding: 56px 0; }
.pub-section-tint { background: var(--surface-2); }
.pub-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.pub-cta-center { justify-content: center; }
.lp-head { max-width: 720px; margin-bottom: 32px; }
.lp-head .pub-sub { margin-bottom: 0; }
.lp-head-row { display: grid; gap: 16px; max-width: none; }
.lp-head-row .pub-h2 { margin-bottom: 0; }
.lp-section-tight { padding-top: 8px; }

/* ---- ヒーロー -------------------------------------------------------- */
.lp-hero { padding: 38px 0 56px; overflow-x: clip; }
.lp-hero-grid { display: grid; gap: 14px; align-items: center; }
.lp-badge { display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 19px; padding: 7px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: #68628F; font-size: 12px; font-weight: 500; }
.lp-badge b { color: #168CB3; font-weight: 500; }
.lp-hero-copy h1 span { color: var(--primary-dark); }
.lp-ticks { display: flex; flex-wrap: wrap; gap: 8px 16px;
  margin: 24px 0 0; padding: 0; list-style: none;
  color: #757A94; font-size: 12px; }
.lp-ticks li::before { content: '✓'; margin-right: 6px;
  color: var(--green); font-weight: 500; }

.lp-hero-art { position: relative; display: grid; place-items: center;
  min-height: 400px; }
.lp-hero-glow { position: absolute; width: 300px; height: 300px;
  border-radius: 50%; background: #F0EEF9; }
.lp-card { position: relative; width: 96%; max-width: 410px; padding: 17px;
  border: 2px solid var(--navy); border-radius: 24px;
  background: var(--surface); box-shadow: var(--shadow); }
.lp-card-top { display: flex; justify-content: space-between;
  margin-bottom: 14px; color: #555A75; font-size: 12px; font-weight: 500; }
.lp-bar { height: 7px; border-radius: 999px; background: #EBE9F4;
  overflow: hidden; margin-bottom: 18px; }
.lp-bar span { display: block; height: 100%; border-radius: inherit;
  background: var(--primary); }
.lp-level { display: inline-flex; padding: 6px 10px; border-radius: 999px;
  border: 1px solid #DDDAF2; background: #F0EFFB;
  color: #6D68B2; font-size: 12px; }
.lp-q { margin: 16px 0; font-size: 21px; font-weight: 500; line-height: 1.5; }
.lp-choice { display: flex; align-items: center; gap: 10px; margin-top: 8px;
  padding: 11px 12px; border: 1.5px solid #E3E1EC; border-radius: 13px;
  background: var(--surface); font-size: 14px; font-weight: 400; }
.lp-choice.is-on { border-color: #56D79F; background: #EAFFF4; }
.lp-key { display: grid; place-items: center; flex: 0 0 auto;
  width: 27px; height: 27px; border-radius: 7px;
  background: var(--primary-light); color: #6D66B5; font-size: 12px; }
/* はみ出す量は、囲いの余白（20px）より小さくしておく。
   これを超えると .lp-hero の overflow-x: clip に手が切られる。 */
.lp-float { position: absolute; right: -18px; bottom: -46px; width: 140px;
  height: auto; transform: rotate(4deg);
  filter: drop-shadow(0 14px 18px rgba(37,39,70,.12)); }

.lp-orbit { position: absolute; padding: 9px 12px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface);
  box-shadow: var(--shadow-sm); color: #5D617B; font-size: 12px; }
.lp-orbit b { font-weight: 500; }
.lp-orbit-1 { top: 30px; right: 0; transform: rotate(3deg); }
.lp-orbit-1 b { color: #B07B13; }
.lp-orbit-2 { bottom: 44px; left: 0; transform: rotate(-2deg); }
.lp-orbit-2 b { color: #31946D; }

/* ---- 帯 -------------------------------------------------------------- */
.lp-trust { padding: 8px 0 34px; }
.lp-trust-row { display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px 42px; padding: 19px 0;
  border-top: 1px solid #ECEAF3; border-bottom: 1px solid #ECEAF3;
  color: #777B92; font-size: 13px; text-align: center; }
.lp-trust-row b { color: var(--text); font-weight: 500; }

/* ---- 学び方の3段 ----------------------------------------------------- */
.lp-steps { display: grid; gap: 16px; }
.lp-step { position: relative; overflow: hidden; padding: 23px;
  border: 1px solid var(--border); border-radius: 22px;
  background: var(--surface); box-shadow: 0 7px 24px rgba(62,61,98,.04); }
.lp-step-n { display: grid; place-items: center; width: 34px; height: 34px;
  margin-bottom: 18px; border-radius: 10px;
  background: var(--primary-light); color: #6E67B8;
  font-size: 12px; font-weight: 500; }
.lp-step h3 { margin: 0 0 8px; font-size: 18px; font-weight: 500;
  line-height: 1.55; }
.lp-step > p { margin: 0; color: var(--text-2); font-size: 14px; }

.lp-phone { position: relative; overflow: hidden; height: 218px;
  margin-top: 22px; padding: 14px; border: 2px solid #DCD9E9;
  border-radius: 18px; background: var(--bg); }
.lp-phone-t { margin: 0 0 8px; color: #7A7E98; font-size: 11px;
  font-weight: 500; }
.lp-phone-q { margin: 13px 0; font-size: 17px; font-weight: 500;
  color: #26284B; }
.lp-phone-note { margin: 13px 0 0; color: #4D5074; font-size: 12px;
  font-weight: 500; }
.lp-bub { max-width: 90%; margin: 7px 0; padding: 8px 10px;
  border-radius: 11px; background: var(--primary-light); color: #4E506D;
  font-size: 11px; line-height: 1.6; }
.lp-bub.is-me { margin-left: auto; background: var(--cyan-soft); }
.lp-mini-q { margin: 6px 0; padding: 9px 10px; border: 1px solid #DFDDEA;
  border-radius: 10px; background: var(--surface); font-size: 11px; }
.lp-mini-q.is-on { border-color: #9A93E7; background: #F1EFFD; }
.lp-chart { display: flex; align-items: flex-end; gap: 9px; height: 104px;
  margin-top: 13px; padding: 0 7px; border-bottom: 1px solid #DDDBEA; }
.lp-chart i { flex: 1; border-radius: 6px 6px 0 0; background: var(--primary); }
.lp-chart i:nth-child(even) { background: var(--cyan); }
.lp-mini { position: absolute; right: -7px; bottom: -7px; width: 105px;
  height: auto; }

/* ---- 特徴 ------------------------------------------------------------ */
.lp-wrap { position: relative; overflow: hidden; padding: 34px 18px;
  border: 1px solid #E5E1F3; border-radius: 24px; background: var(--surface-2); }
.lp-features { display: grid; gap: 16px; margin-top: 34px; }
.lp-feature { position: relative; overflow: hidden; min-height: 220px;
  padding: 23px; border: 1px solid #E2DFED; border-radius: 20px;
  background: var(--surface); }
.lp-feature h3 { margin: 0 0 8px; font-size: 18px; font-weight: 500;
  line-height: 1.55; }
.lp-feature p { max-width: 67%; margin: 0; color: var(--text-2);
  font-size: 14px; }
.lp-feature img { position: absolute; right: -12px; bottom: -14px;
  width: 125px; height: auto; }
.lp-ico { display: grid; place-items: center; width: 40px; height: 40px;
  margin-bottom: 15px; border-radius: 12px;
  background: var(--primary-light); color: #766FC4; }

/* ---- 学べる単元 ------------------------------------------------------ */
.pub-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin: 32px 0 10px; }
.pub-stat { padding: 18px 12px; border: 1px solid var(--border);
  border-radius: 16px; background: var(--surface); text-align: center; }
.pub-stat-n { font-size: 26px; font-weight: 500; letter-spacing: -.02em;
  color: var(--primary-dark); }
.pub-stat-l { margin-top: 4px; color: var(--text-2); font-size: 12px; }

.lp-units { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin: 12px 0 22px; }
.lp-unit { min-height: 116px; padding: 17px 14px; border: 1px solid var(--border);
  border-radius: 16px; background: var(--surface); transition: .18s; }
.lp-unit:hover { transform: translateY(-2px); border-color: #BCB7DC; }
.lp-unit-tag { display: block; margin-bottom: 12px; color: #766FC4;
  font-size: 10px; font-weight: 500; letter-spacing: .07em; }
.lp-unit h3 { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.5; }

.pub-subjects { display: grid; gap: 8px; }
.pub-subject { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); }
.pub-subject-name { font-size: 15px; font-weight: 500; }
.pub-subject-n { color: var(--text-2); font-size: 13px; }
.pub-subject.is-soon .pub-subject-name { color: var(--text-3); }

/* ---- 記録の見えかた -------------------------------------------------- */
.lp-progress { display: grid; gap: 24px; align-items: center; }
.lp-stage { position: relative; display: grid; place-items: center;
  min-height: 285px; }
.lp-stage::before { content: ''; position: absolute; width: 240px;
  height: 240px; border-radius: 50%; background: #F0EEF9; }
.lp-stage img { position: relative; z-index: 2; width: 270px; height: auto; }
.lp-caption { margin: 0 0 10px; color: var(--text-3); font-size: 12px; }
.lp-panel { display: grid; gap: 12px; }
.lp-panel-card { padding: 17px; border: 1px solid var(--border);
  border-radius: 17px; background: var(--surface); }
.lp-panel-l { color: #7F849D; font-size: 11px; font-weight: 500; }
.lp-panel-n { display: block; margin: 2px 0 10px; font-size: 28px;
  font-weight: 500; letter-spacing: -.02em; color: var(--text); }
.lp-panel-n small { margin-left: 2px; font-size: 15px; }
.lp-panel-card .lp-bar { margin-bottom: 0; }
.lp-streak { display: flex; gap: 6px; margin-top: 9px; }
.lp-streak i { width: 19px; height: 19px; border-radius: 6px;
  background: var(--yellow); }

/* ---- 2カラムの節 ----------------------------------------------------- */
.pub-split { display: grid; gap: 26px; }
.pub-checks { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.pub-checks li { display: flex; gap: 10px; align-items: flex-start;
  padding: 15px 17px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); font-size: 14px; line-height: 1.7; }
.pub-checks svg { flex: 0 0 auto; margin-top: 3px; color: var(--green); }

/* ---- FAQ ------------------------------------------------------------- */
.lp-faq { display: grid; gap: 26px; }
.pub-faq { display: flex; flex-direction: column; gap: 9px; }
.pub-faq details { padding: 0 17px; border: 1px solid var(--border);
  border-radius: 14px; background: var(--surface); }
.pub-faq summary { position: relative; padding: 16px 30px 16px 0;
  list-style: none; cursor: pointer; font-size: 14px; font-weight: 500; }
.pub-faq summary::-webkit-details-marker { display: none; }
.pub-faq summary::after { content: '＋'; position: absolute; right: 0; top: 13px;
  color: var(--primary); font-size: 18px; font-weight: 400; }
.pub-faq details[open] summary::after { content: '−'; }
.pub-faq-a { padding: 0 0 15px; color: var(--text-2); font-size: 13px; }

/* ---- 最後の一押し ---------------------------------------------------- */
.lp-final { padding: 22px 0 66px; overflow-x: clip; }
.lp-final-box { position: relative; overflow: hidden; min-height: 385px;
  padding: 38px 22px; border: 1px solid #D8D3EE; border-radius: 28px;
  background: #EEECF9; display: flex; align-items: flex-start; }
.lp-final-copy { position: relative; z-index: 2; max-width: 620px; }
.lp-final-box .pub-sub { color: #676B84; }
.lp-final-box img { position: absolute; right: -58px; bottom: -30px;
  width: 270px; height: auto; opacity: .55;
  filter: drop-shadow(0 14px 20px rgba(37,39,70,.08)); }

/* ---- 料金 ------------------------------------------------------------ */
.pub-plans { display: grid; gap: 16px; margin: 24px 0; max-width: 420px; }
.pub-plan { padding: 26px; border: 1px solid var(--border);
  border-radius: 20px; background: var(--surface); }
.pub-plan.is-current { border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(145,137,221,.16); }
.pub-plan-name { margin: 0 0 6px; color: var(--primary-dark);
  font-size: 13px; font-weight: 500; }
.pub-plan-price { margin: 0 0 18px; font-size: 38px; font-weight: 500;
  letter-spacing: -.03em; }
.pub-plan-price small { margin-left: 4px; color: var(--text-2);
  font-size: 15px; }
.pub-plan ul { margin: 0 0 20px; padding: 0; list-style: none;
  display: grid; gap: 10px; }
.pub-plan li { display: flex; gap: 9px; align-items: flex-start;
  font-size: 14px; }
.pub-plan svg { flex: 0 0 auto; margin-top: 3px; color: var(--green); }

/* まだ始めていない仕組み（有料プランなど）についての断り書き */
.pub-pending { margin: 18px 0 26px; padding: 18px 20px;
  border-left: 4px solid var(--warning); border-radius: 0 14px 14px 0;
  background: #FFF6E5; font-size: 14px; line-height: 1.8; }
.pub-pending p { margin: 0 0 6px; }
.pub-pending p:last-child { margin: 0; }
/* 条文の中に挟む、同じ意味の短い断り */
.pub-inline-note { padding: 12px 16px; border-radius: var(--r-md);
  background: var(--surface-2); font-size: 14px; line-height: 1.85; }

/* ---- 法務ページの表（会社概要・特商法表記） --------------------------
   項目名と中身の2列。狭い画面では上下に積む。横に並べたまま縮めると、
   住所や返金の条件が1文字ずつ折り返して読めなくなる。 */
.legal-table { width: 100%; margin: 22px 0 28px; border-collapse: collapse;
  border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; font-size: 14px; line-height: 1.85; }
.legal-table tr { border-bottom: 1px solid var(--border); }
.legal-table tr:last-child { border-bottom: 0; }
.legal-table th { width: 34%; padding: 14px 16px; text-align: left;
  vertical-align: top; background: var(--surface-2);
  font-weight: 500; color: var(--text); }
.legal-table td { padding: 14px 16px; vertical-align: top;
  color: var(--text-2); background: var(--surface); }
.legal-table td .muted { color: var(--text-3); font-size: 13px; }
.legal-table a { color: var(--primary-dark); }

.legal-contact { margin: 14px 0 0; padding: 16px 18px;
  border-radius: var(--r-md); background: var(--surface-2); font-size: 14px; }
.legal-contact p { margin: 0 0 4px; }
.legal-contact p:last-child { margin: 0; }

@media (max-width: 600px) {
  .legal-table, .legal-table tbody, .legal-table tr,
  .legal-table th, .legal-table td { display: block; width: auto; }
  .legal-table th { padding-bottom: 4px; }
  .legal-table td { padding-top: 4px; }
}

/* ---- よくあるご質問のページ ------------------------------------------ */
.faq-head { max-width: 640px; margin-bottom: 30px; }
.faq-group { margin: 34px 0 12px; font-size: 17px; font-weight: 500;
  letter-spacing: -.02em; }
.faq-group:first-of-type { margin-top: 8px; }
.pub-faq-a p { margin: 0 0 8px; }
.pub-faq-a p:last-child { margin: 0; }
.faq-link a { color: var(--primary-dark); font-weight: 500; }
.faq-contact { margin: 40px 0 0; padding: 30px 24px; text-align: center;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); }
.faq-contact p { margin: 0 0 4px; color: var(--text-2); font-size: 14px; }
.faq-contact .strong { color: var(--text); font-size: 16px; font-weight: 500; }
.faq-contact .btn { margin-top: 16px; }

/* ---- 読み物（法務・保護者向け・ブログ本文） -------------------------- */
.prose h2 { margin: 34px 0 12px; font-size: 20px; font-weight: 500; }
.prose p { margin: 0 0 15px; font-size: 15px; line-height: 1.9; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 1.3em; }
.prose li { margin-bottom: 8px; font-size: 15px; line-height: 1.85; }
.prose a { color: var(--primary-dark); }

/* ---- フッタ ---------------------------------------------------------- */
.pub-footer { padding: 30px 0 42px; border-top: 1px solid #E7E5EF;
  color: #85899F; font-size: 12px; }
.pub-footer-top { display: grid; gap: 18px; }
.pub-footer-nav { display: flex; flex-wrap: wrap; gap: 18px; }
.pub-footer-nav a { color: #85899F; text-decoration: none; }
.pub-footer-nav a:hover { color: var(--text); }
.pub-copy { margin: 24px 0 0; }

/* =========================================================================
   768px 以上 — タブレット / 小さめのPC
   ========================================================================= */
@media (min-width: 768px) {
  .public-body { font-size: 15px; }
  .pub-menu { display: none; }
  .pub-nav, .pub-header-cta { display: flex; }
  .pub-section { padding: 72px 0; }
  .lp-hero { padding: 46px 0 64px; }
  .lp-hero-art { min-height: 460px; }
  .lp-float { right: -46px; bottom: -48px; width: 165px; }
  .lp-features { grid-template-columns: 1fr 1fr; }
  .lp-units { grid-template-columns: repeat(3, 1fr); }
  .lp-wrap { padding: 46px 30px; }
  .lp-head-row { grid-template-columns: 1fr auto; align-items: end; }
  .lp-panel { grid-template-columns: 1fr 1fr; }
  .lp-panel-card.is-wide { grid-column: 1 / -1; }
  .lp-progress { grid-template-columns: .9fr 1.1fr; gap: 34px; }
  .lp-stage { min-height: 330px; }
  .lp-final-box { padding: 44px 36px; align-items: center; }
  .lp-final-box img { right: -8px; bottom: -50px; width: 310px; opacity: .75; }
  .pub-footer-top { grid-template-columns: 1fr auto; align-items: start; }
}

/* =========================================================================
   1024px 以上 — PC
   ========================================================================= */
@media (min-width: 1024px) {
  .pub-section { padding: 88px 0; }
  .lp-hero { padding: 58px 0 72px; min-height: 650px; display: flex;
    align-items: center; }
  .lp-hero-grid { grid-template-columns: 1.02fr .98fr; gap: 50px;
    width: min(var(--shell), calc(100% - 40px)); }
  .lp-hero-art { min-height: 500px; }
  .lp-hero-glow { width: 390px; height: 390px; }
  .lp-card { padding: 22px; transform: rotate(-1.2deg); }
  .lp-float { right: -78px; bottom: -48px; width: 185px; }
  .lp-orbit-1 { top: 52px; right: -7px; }
  .lp-orbit-2 { bottom: 58px; left: -3px; }
  .lp-steps { grid-template-columns: repeat(3, 1fr); }
  .lp-step { min-height: 430px; }
  .lp-units { grid-template-columns: repeat(6, 1fr); }
  .lp-unit { min-height: 132px; }
  .lp-wrap { padding: 56px 50px; }
  .lp-progress { gap: 52px; }
  .lp-stage { min-height: 420px; }
  .lp-stage::before { width: 330px; height: 330px; }
  .lp-stage img { width: 340px; }
  .lp-faq { grid-template-columns: .78fr 1.22fr; gap: 52px; }
  .pub-split { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
  .pub-subjects { grid-template-columns: repeat(3, 1fr); }
  .lp-final-box { padding: 54px 50px; min-height: 330px; }
  .lp-final-box img { right: -8px; bottom: -70px; width: 355px; opacity: 1; }
}

/* 動きを減らす設定の人には、傾きを外す（§14） */
@media (prefers-reduced-motion: reduce) {
  .lp-card, .lp-orbit, .lp-float, .lp-unit { transform: none; }
}

/* =========================================================================
   ブログ
   -------------------------------------------------------------------------
   本文（.blog-body）は .prose の中に置く。1行が長いと読めないので、
   幅は 720px で止める（囲いの 1080px まで伸ばさない）。
   ========================================================================= */
.blog-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.blog-tags a { padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); text-decoration: none; font-size: 13px; }
.blog-tags a.active { border-color: var(--primary);
  background: var(--primary-light); color: var(--primary-dark); }

.blog-list { display: grid; gap: 16px; }
.blog-item { overflow: hidden; border: 1px solid var(--border);
  border-radius: 19px; background: var(--surface); transition: .18s; }
.blog-item:hover { transform: translateY(-2px); border-color: #BCB7DC; }
.blog-item-link { display: block; color: var(--text); text-decoration: none; }
.blog-item-img { display: block; width: 100%; height: 168px;
  object-fit: cover; }
.blog-item-body { padding: 22px; }
.blog-item-title { margin: 0 0 8px; font-size: 17px; font-weight: 500;
  line-height: 1.55; letter-spacing: -.012em; }
.blog-item-excerpt { margin: 0 0 13px; color: var(--text-2); font-size: 14px; }
.blog-item-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; color: #8589A0; font-size: 11px; }
.blog-chip { padding: 3px 10px; border-radius: 999px;
  background: var(--surface-2); color: #67618F; font-size: 11px;
  text-decoration: none; }
a.blog-chip:hover { background: var(--primary-light);
  color: var(--primary-dark); }

.blog-pager { display: flex; gap: 18px; align-items: center;
  justify-content: center; margin-top: 30px; color: var(--text-2);
  font-size: 14px; }
.blog-pager a { color: var(--primary-dark); text-decoration: none;
  font-weight: 500; }
.blog-empty { padding: 44px 20px; border: 1px solid var(--border);
  border-radius: 19px; background: var(--surface); color: var(--text-2);
  text-align: center; }

/* ---- 記事 ------------------------------------------------------------ */
.blog-back { margin: 0 0 18px; }
.blog-back a { display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-2); text-decoration: none; font-size: 13.5px; }
.blog-head { margin-bottom: 24px; }
.blog-hero { display: block; width: 100%; max-width: var(--prose);
  border-radius: 19px; margin-bottom: 28px; }

/* 本文。Markdown が組み立てたタグだけが来る（生HTMLは通していない） */
.blog-body h2 { margin: 40px 0 14px; padding-top: 6px;
  border-top: 1px solid var(--border); font-size: 22px; }
.blog-body h3 { margin: 28px 0 10px; font-size: 18px; font-weight: 500; }
.blog-body img { max-width: 100%; height: auto; border-radius: 16px;
  margin: 20px 0; }
.blog-body table { width: 100%; border-collapse: collapse; margin: 20px 0;
  font-size: 14px; }
.blog-body th, .blog-body td { padding: 10px 12px;
  border: 1px solid var(--border); text-align: left; }
.blog-body th { background: var(--surface-2); font-weight: 500; }
.blog-body blockquote { margin: 20px 0; padding: 2px 0 2px 16px;
  border-left: 3px solid var(--primary-light); color: var(--text-2); }
.blog-body code { padding: 2px 6px; border-radius: 6px;
  background: var(--surface-2); font-size: .92em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.blog-body pre { margin: 20px 0; padding: 16px; overflow-x: auto;
  border-radius: 16px; background: var(--surface-2); }
.blog-body pre code { padding: 0; background: none; }
.blog-body hr { margin: 32px 0; border: 0;
  border-top: 1px solid var(--border); }

.blog-related { margin-top: 48px; padding-top: 8px;
  border-top: 1px solid var(--border); }
.blog-cta { margin-top: 44px; padding: 32px 24px; border-radius: 24px;
  background: var(--surface-2); text-align: center; }
.blog-cta .pub-h2 { margin-bottom: 18px; }
.blog-cta .pub-cta-row { justify-content: center; }

@media (min-width: 768px) {
  .blog-list { grid-template-columns: repeat(2, 1fr); }
  .blog-related .blog-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .blog-list { grid-template-columns: repeat(3, 1fr); }
  .blog-related .blog-list { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================================
   ログイン・登録のカード
   -------------------------------------------------------------------------
   InfraAcademy の auth/_auth_base.html と同じ組み立て。
   色と字は公開ページ（= TOPページ）のものをそのまま使う。

   .public-body の中に置くので、変数はもう紫に置きかわっている。
   ここで色を書き直さないこと——書くと、TOPを直したときに
   ログイン画面だけ古い色で残る。

   同じカードを、教材が開けないときのポップアップにも出す。
   そのため id は必ず接頭辞を付けて組み立てる（auth/_card.html）。
   ========================================================================= */
.auth-page { padding: 40px 0 72px; }
.auth-shell { display: flex; justify-content: center; }
.auth-card { width: 100%; max-width: 430px; padding: 30px 22px;
  border: 1px solid var(--border); border-radius: 24px;
  background: var(--surface); box-shadow: var(--shadow); }

.auth-brand { display: flex; align-items: center; margin: 0 0 14px; }
.auth-brand .brand-logo { height: 30px; }
/* .public-body h1 が clamp(32px,4.4vw,52px) を当てているので、
   同じ強さでは勝てない。カードの見出しはページの見出しではないため、
   ここだけ選択子を1つ深くして上書きする。 */
.public-body .auth-title { margin: 0 0 8px; font-size: 23px; line-height: 1.45;
  letter-spacing: -.025em; font-weight: 600; }
.auth-sub { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.8; }

/* 上のタブ。押すと同じ形のもう1枚へ移る */
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  margin: 22px 0 0; padding: 4px; border-radius: 12px;
  background: var(--surface-2); }
.auth-tab { padding: 9px 0; border-radius: 9px; text-align: center;
  color: var(--text-2); text-decoration: none; font-size: 14px;
  font-weight: 500; transition: .15s; }
.auth-tab:hover { color: var(--primary-dark); }
.auth-tab.is-on { background: var(--surface); color: var(--text);
  box-shadow: 0 1px 2px rgba(53,52,91,.10); }

.auth-form { margin-top: 22px; }
.auth-form .field { margin-bottom: 14px; }
.auth-form label { display: block; margin-bottom: 6px;
  font-size: 13px; font-weight: 500; color: var(--text); }
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
  width: 100%; padding: 11px 13px; border: 1px solid var(--border-strong);
  border-radius: 10px; background: var(--surface); color: var(--text);
  font: inherit; font-size: 15px; transition: .15s; }
.auth-form input:focus { outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(145,137,221,.20); }
.auth-form .err { margin: 6px 0 0; color: #C0392B; font-size: 12px; }
.auth-form .btn { margin-top: 6px; }

.auth-more { margin: 0 0 14px; }
/* list-style: none も要る。::-webkit-details-marker だけだと、
   Firefox と新しい Chrome で三角が残る（＋の横に▶が並ぶ）。 */
.auth-more summary { cursor: pointer; color: var(--text-2);
  font-size: 13px; padding: 4px 0; list-style: none; }
.auth-more summary::-webkit-details-marker { display: none; }
.auth-more summary::before { content: '＋ '; color: var(--primary); }
.auth-more[open] summary::before { content: '− '; }

.auth-aside { margin: 14px 0 0; text-align: center; color: var(--text-3);
  font-size: 13px; }
.auth-aside a { color: var(--primary-dark); text-decoration: none;
  font-weight: 500; }
.auth-aside a:hover { text-decoration: underline; }
.auth-aside span { margin: 0 6px; }

/* 手元でだけ出る覚え書き。本番では出ない（DEBUG=False）。
   Google や LINE のボタンが消えているのは鍵が無いからだ、と
   その場で分かるようにする。無いと「機能が無い」に見える。 */
.auth-dev-note { margin: 18px 0 0; padding: 11px 13px;
  border: 1px dashed var(--border-strong); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--text-2);
  font-size: 12px; line-height: 1.8; }
.auth-dev-note code { padding: 1px 5px; border-radius: 5px;
  background: var(--surface); color: var(--primary-dark);
  font-size: 11.5px; word-break: break-all; }

.auth-or { display: flex; align-items: center; gap: 12px; margin: 20px 0;
  color: var(--text-3); font-size: 12px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px;
  background: var(--border); }

.auth-social { display: flex; align-items: center; justify-content: center;
  gap: 9px; width: 100%; min-height: 46px; margin-bottom: 8px;
  padding: 11px 14px; border: 1px solid var(--border-strong);
  border-radius: 12px; background: var(--surface); color: var(--text);
  text-decoration: none; font-size: 14px; font-weight: 500;
  transition: .15s; }
.auth-social:hover { border-color: var(--primary);
  background: var(--primary-light); color: var(--primary-dark); }
.auth-social svg { flex: 0 0 auto; }
/* LINE は色が決まっている（緑の上に白）。ここだけ変数を使わない */
.auth-social-line { border-color: transparent; background: #06C755;
  color: #fff; }
.auth-social-line:hover { border-color: transparent; background: #05B34C;
  color: #fff; }

.auth-legal { margin: 20px 0 0; padding-top: 16px;
  border-top: 1px solid var(--border); text-align: center;
  color: var(--text-3); font-size: 11px; line-height: 1.8; }
.auth-legal a { color: var(--primary-dark); }

.auth-card-center { text-align: center; }
.auth-card-center .auth-sub { margin-bottom: 0; }
.auth-ok { display: grid; place-items: center; width: 52px; height: 52px;
  margin: 0 auto 14px; border-radius: 50%;
  background: var(--primary-light); color: var(--primary-dark); }
/* 送れなかったとき。成功と同じ見た目にしない */
.auth-ok.is-warn { background: var(--warning-light); color: var(--warning); }
.auth-fine { margin: 16px 0 0; color: var(--text-3); font-size: 12px;
  line-height: 1.8; }
.auth-dev { margin-top: 18px; padding: 14px; border-radius: 12px;
  background: #FFF6E5; text-align: left; font-size: 12px; }
.auth-dev p { margin: 0 0 8px; font-weight: 500; }

@media (min-width: 768px) {
  .auth-page { padding: 64px 0 96px; }
  .auth-card { padding: 38px 34px; }
  .public-body .auth-title { font-size: 25px; }
}

/* =========================================================================
   開けない教材の案内（ポップアップ）
   -------------------------------------------------------------------------
   アプリ本体の中に出るが、中身はログイン画面と同じカードを使う。
   カードの見た目は .public-body の中でしか当たらないので、
   ここで最低限を当て直す（色は本体のまま——アプリの中だから）。
   ========================================================================= */

.access-sheet { position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: flex-end; justify-content: center; }
.access-sheet[hidden] { display: none; }
.access-backdrop { position: absolute; inset: 0; border: 0;
  background: rgba(20, 32, 51, .42); backdrop-filter: blur(2px); }
.access-card { position: relative; width: 100%; max-width: 460px;
  max-height: 88vh; overflow-y: auto;
  padding: 26px 20px calc(22px + env(safe-area-inset-bottom));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--surface); box-shadow: var(--shadow); }
.access-close { position: absolute; top: 10px; right: 12px;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: transparent; color: var(--text-2); font-size: 22px;
  line-height: 1; cursor: pointer; }
.access-close:hover { background: var(--surface-2); }
.access-title { margin: 4px 0 8px; font-size: 19px; font-weight: 800;
  line-height: 1.5; letter-spacing: -.015em; }
.access-text { margin: 0 0 18px; color: var(--text-2); font-size: 14px;
  line-height: 1.85; }
/* 月額。**Stripe から引いた値**を出す（app/payments/access.py）。
   ここが読み飛ばされると「押したら課金された」になるので、
   ボタンより先に、はっきり読める大きさで置く。 */
.access-price { margin: 0 0 6px; text-align: center; }
.access-price-amount { font-size: 30px; font-weight: 800; color: var(--text);
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em; }
.access-price-unit { font-size: 13px; font-weight: 700; color: var(--text-2);
  margin-left: 4px; }
.access-price-note { margin: 0 0 16px; text-align: center;
  font-size: 12px; line-height: 1.7; color: var(--text-2); }

.access-fine { margin: 14px 0 0; text-align: center; color: var(--text-2);
  font-size: 12px; }
.access-fine a { color: var(--primary-dark); }

/* ポップアップの中に出すログインのカードは、枠を持たない
   （外側の .access-card が枠になっている） */
.access-card .auth-card { max-width: none; padding: 0; border: 0;
  border-radius: 0; box-shadow: none; background: transparent; }
.access-card .auth-brand { display: none; }
.access-card .auth-legal { border-top-color: var(--border); }
/* アプリ本体では公開ページの変数が当たらないので、必要なぶんだけ */
.access-card .auth-tab.is-on { background: var(--surface); }
.access-card .auth-form input { border-color: var(--border); }
.access-card .auth-form input:focus { border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(35, 134, 200, .16); }

/* 開けない単元の知らせ（一覧の上に置く帯） */
.access-notice { margin-bottom: 16px; }

/* 押しても進まない行。押せないのではなく、押すと案内が出る */
.lrow-locked { opacity: .72; }
.lrow-locked .l-end { color: var(--text-2); }

/* 一覧に出す、公開範囲の札 */
.access-badge { padding: 3px 9px; border-radius: 999px; font-size: 11px;
  font-weight: 750; white-space: nowrap; }
.access-badge.is-guest { background: var(--success-light); color: #14663F; }
.access-badge.is-login { background: var(--primary-light); color: var(--primary-dark); }
.access-badge.is-paid { background: var(--warning-light); color: #8A5312; }

@media (min-width: 768px) {
  .access-sheet { align-items: center; }
  .access-card { border-radius: var(--r-lg); padding: 30px 28px; }
}

/* 有料ぶんに当たったときの画面（アプリ本体の中なので、公開ページの
   色は当たらない。本体の変数のまま） */
.locked-card { text-align: center; padding: 34px 24px; }
.locked-ico { display: grid; place-items: center; width: 56px; height: 56px;
  margin: 0 auto 18px; border-radius: 18px;
  background: var(--surface-2); color: var(--text-2); }
.locked-card p { margin: 0 0 8px; line-height: 1.85; }

/* =========================================================================
   会話と練習の画面だけ、前の見た目を残す
   -------------------------------------------------------------------------
   ほかの画面は InfraAcademy にそろえて、角を小さく・影を薄くした。
   この2つは組み立てが独特（吹き出し、図、選択肢の並び）で、
   角と影を詰めると窮屈になる。形の変数だけを元の値へ戻す。

   色は戻さない。地の色や文字の色まで別にすると、
   画面をまたいだ瞬間に別のサイトに見える。
   ========================================================================= */
.screen-lesson {
  --r-xl: 30px;
  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 13px;
  --shadow-sm: 0 10px 30px rgba(28, 78, 111, .075), 0 2px 8px rgba(28, 78, 111, .04);
}
.screen-lesson .btn { border-radius: 999px; padding: 13px 22px; min-height: 50px; }
.screen-lesson .btn-lg { padding: 15px 24px; min-height: 54px; }
.screen-lesson .btn-sm { padding: 9px 15px; min-height: 40px; }
.screen-lesson .chip { border-radius: 999px; padding: 5px 10px; }

/* =========================================================================
   講座一覧（学ぶ）
   -------------------------------------------------------------------------
   InfraAcademy の chat/topic_selection.html と同じ組み立て。

     中央寄せの見出し → 絞りこみのタブ → カードの格子

   カードの高さをそろえるのが肝心。1画面に20〜30枚並ぶので、
   高さがまちまちだと目が上下に振られて、題を拾えなくなる。
   絵の枠を固定高にして、説明は3行で切る。
   ========================================================================= */
.course-hero { text-align: center; padding: 8px 0 26px; }
.course-hero .eyebrow { display: block; }
.course-hero-title { margin: 6px 0 0; font-size: clamp(26px, 5vw, 40px);
  font-weight: 900; line-height: 1.18; letter-spacing: -.02em; }
.course-hero-lead { max-width: 620px; margin: 14px auto 0; color: var(--text-2);
  font-size: 14px; line-height: 1.9; }

/* やることがある人向けの2枚。無いときは出さない */
.course-todo { display: grid; gap: 10px; margin-bottom: 22px; }
.course-todo-item { display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--surface);
  color: var(--text); text-decoration: none;
  transition: border-color .16s ease, background .16s ease; }
.course-todo-item:hover { border-color: var(--border-strong);
  background: var(--surface-2); }

/* 絞りこみのタブ。横に流れる（学年が増えても折り返さない） */
.course-tabs { display: flex; gap: 6px; margin-bottom: 16px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; }
.course-tabs::-webkit-scrollbar { display: none; }
.course-tabs a { flex: 0 0 auto; padding: 8px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); text-decoration: none; font-size: 13.5px;
  font-weight: 800; transition: .16s; }
.course-tabs a:hover { border-color: var(--border-strong);
  color: var(--primary-dark); }
.course-tabs a.active { border-color: transparent;
  background: var(--primary); color: #fff; }

.course-count { margin: 0 0 12px; color: var(--text-3); font-size: 12.5px;
  font-weight: 800; }

/* ---- 講座の行 ---- */
.course-grid { display: grid; gap: 10px; min-width: 0; }

/* 横長の1行。左に印、まん中に題と説明、右に矢印。
   格子に並べていたころは1画面に4枚しか入らず、30単元を見るのに
   何度もスクロールすることになった。 */
/* min-width: 0 が要る。格子の子は既定が min-width: auto で、
   中の「折り返さない説明文」の幅ぶんまで広がってしまう。
   text-overflow: ellipsis は、幅が決まっていて初めて効く。 */
.course-card { display: flex; align-items: center; gap: 14px; min-width: 0;
  padding: 14px 16px; border: 1px solid var(--border);
  border-radius: var(--r-lg); background: var(--surface);
  color: var(--text); text-decoration: none;
  transition: border-color .16s ease, background .16s ease; }
a.course-card:hover { border-color: var(--border-strong);
  background: var(--surface-2); }
.course-card.is-planned { opacity: .66; }

.course-card-visual { display: grid; place-items: center; flex: 0 0 auto;
  width: 46px; height: 46px; border-radius: var(--r-md);
  background: rgba(var(--sc-rgb), .18); color: var(--sc-ink); }
.course-card-mark .icon { width: 20px; height: 20px; }

.course-card-body { flex: 1; min-width: 0; }
.course-card-meta { display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px; margin-bottom: 5px; }
.course-card-title { margin: 0 0 3px; font-size: 15px; font-weight: 900;
  line-height: 1.5; letter-spacing: -.01em; }
/* 説明は1行で切る。行の高さがそろわないと、上から順に追えない */
.course-card-desc { margin: 0; color: var(--text-2); font-size: 12.5px;
  line-height: 1.7; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.course-card-foot { display: flex; align-items: center; gap: 10px;
  margin-top: 8px; }
.course-card-foot .pbar { flex: 1; max-width: 220px; }
.course-card-go { flex: 0 0 auto; color: var(--text-3); }

@media (max-width: 520px) {
  /* 狭い画面では、説明を落として題と札だけにする。
     1行に収まらない説明を「…」で切ると、どれも同じ出だしになる */
  .course-card-desc { display: none; }
  .course-card-foot .pbar { max-width: none; }
}

/* =========================================================================
   PC では、下のタブを出さない
   -------------------------------------------------------------------------
   上のナビと同じ行き先が、画面の上下に2つ並ぶことになるため。
   この指定は .bottomnav の定義より**後ろ**に置くこと。
   前に置くと、あとから出てくる定義に負けて消えない（実際そうなった）。
   ========================================================================= */
@media (min-width: 1024px) {
  .bottomnav { display: none; }
}

/* =========================================================================
   学習管理の、上に並ぶ4枚
   -------------------------------------------------------------------------
   全体の進捗／講座の状況／練習問題の正答率／過去30日の学習日。
   輪と数字を横に並べ、狭い画面では1列、広ければ2列2行にする。

   進み具合と、続いているかを並べて置いてある。
   「何分やったか」だけでは進んでいるか分からず、
   「何％終わったか」だけでは続いているか分からない。
   ========================================================================= */
.dash-grid { display: grid; gap: 10px; margin-bottom: 22px; min-width: 0; }
/* min-width: 0 が要る。格子の子は既定が min-width: auto で、
   中の升目（30個）の幅ぶんまで広がってしまう。 */
.dash-card { display: flex; flex-direction: column; gap: 12px;
  min-width: 0; margin: 0; padding: 16px 18px; }
.dash-title { margin: 0; font-size: 13px; font-weight: 700;
  letter-spacing: -.01em; }
.dash-body { display: flex; align-items: center; gap: 16px; min-width: 0; }
.dash-body .ring { flex: 0 0 auto; }
.dash-figures { min-width: 0; }
.dash-n { margin: 0; font-size: 24px; font-weight: 800;
  letter-spacing: -.03em; line-height: 1.2; }
.dash-n small { margin-left: 2px; font-size: 13px; font-weight: 700;
  color: var(--text-2); }
.dash-n.dash-empty { color: var(--text-3); }
.dash-n-lg { font-size: 32px; }
.dash-sub { margin: 2px 0 0; color: var(--text-2); font-size: 12.5px; }
.dash-note { margin: 0; color: var(--text-3); font-size: 11.5px; }

/* 完了・学習中・未開始。数は右端でそろえる（読むのは数のほう） */
.dash-legend { flex: 1 1 auto; min-width: 0; display: grid; gap: 5px;
  margin: 0; padding: 0; list-style: none; }
.dash-legend li { display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--text-2); }
.dash-legend b { flex: 0 0 auto; color: var(--text); font-weight: 700; }
.dash-legend .dot { flex: 0 0 auto; width: 9px; height: 9px;
  border-radius: 3px; }

/* 30日ぶんの升目。カレンダーと同じ4段の濃さ（.cal-key）を使う */
.dash-body-strip { align-items: flex-end; }
.dash-strip { flex: 1 1 auto; min-width: 0; display: grid;
  grid-template-columns: repeat(10, 1fr); gap: 3px; }
.dash-strip .cal-key { width: auto; aspect-ratio: 1; }

/* 4枚は**どの幅でも2列2行**。1列に積むと縦に長くなり、
   4枚めが画面の外へ出て「いまどうなっているか」が一目で見られない。
   この4枚は、並べて見比べるためにここに置いてある。 */
.dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 狭い画面では、1枚ぶんの幅が半分になる。
   輪の横に数を置くと、どちらも潰れる。上下に積み直す。 */
@media (max-width: 619px) {
  .dash-grid { gap: 8px; }
  .dash-card { padding: 13px 12px; gap: 8px; }
  .dash-title { font-size: 12px; }
  .dash-body { flex-direction: column; align-items: stretch; gap: 9px; }
  .dash-card .ring { width: 66px; height: 66px; align-self: center; }
  .dash-figures { text-align: center; }
  .dash-n { font-size: 19px; }
  .dash-n-lg { font-size: 24px; }
  .dash-sub { font-size: 11.5px; }
  .dash-note { font-size: 11px; }
  .dash-legend { gap: 4px; }
  .dash-legend li { font-size: 11.5px; gap: 6px; }
  /* 学習日の枡は、幅の半分に30個。10列だと1つ7pxで潰れるので6列5段に */
  .dash-body-strip { align-items: stretch; }
  .dash-body-strip .dash-n { text-align: center; }
  .dash-strip { grid-template-columns: repeat(6, 1fr); gap: 3px; }
}

/* =========================================================================
   未ログインの人のヘッダ
   -------------------------------------------------------------------------
   講座を見に来た人が、そのまま登録まで進めるようにする。
   ここが空だと、行き先が画面の下（タブ）にしか無い。

   狭い画面では、リンク（講座一覧・有料会員になる）とログインを隠し、
   「新規会員登録」1つに絞る。4つ並べると字が潰れるうえ、
   「講座一覧」はいま見ている画面そのものになることが多い。
   TOP も同じ考えで、狭いときは畳んでいる。
   ========================================================================= */
@media (max-width: 1023px) {
  .appbar-guest .appbar-login { display: none; }
}