:root {
  /* --- 色 --- */
  --bg: #f4f5fa;
  --bg-2: #eceef7;
  --surface: #ffffff;
  --surface-2: #f5f6fb;
  --line: #e3e6f0;
  --line-2: #d3d8e8;
  --text: #0f1222;
  --muted: #6b7390;

  --pri: #5b5bf5;
  --pri-2: #8b5cf6;
  --pri-soft: #eceaff;
  --ok: #06b070;
  --ok-soft: #dcfbee;
  --ng: #f2426a;
  --ng-soft: #ffe9ee;
  --warn: #e08700;
  --warn-soft: #fff2dc;
  --hot: #ff6b35;

  --grad: linear-gradient(135deg, #5b5bf5 0%, #8b5cf6 50%, #d946a6 100%);
  --grad-ok: linear-gradient(135deg, #06b070 0%, #34d399 100%);

  /* --- かたち --- */
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 26px;
  --radius: 18px;              /* 既存の指定との互換 */

  /* --- 影 --- */
  --shadow: 0 1px 2px rgba(15,18,34,.04), 0 10px 30px -12px rgba(15,18,34,.14);
  --shadow-lg: 0 2px 6px rgba(15,18,34,.05), 0 24px 48px -20px rgba(91,91,245,.32);
  --shadow-pri: 0 8px 22px -8px rgba(91,91,245,.55);

  /* --- 動き --- */
  --ease: cubic-bezier(.22,1,.36,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
}
html[data-theme="dark"] {
  --bg: #0a0b12;
  --bg-2: #0f1119;
  --surface: #14161f;
  --surface-2: #1b1e2a;
  --line: #262a38;
  --line-2: #343949;
  --text: #eef1f8;
  --muted: #9aa3bd;

  --pri: #8b8bff;
  --pri-2: #b388ff;
  --pri-soft: #1e1b3d;
  --ok: #2ee59d;
  --ok-soft: #0c2a1f;
  --ng: #ff7590;
  --ng-soft: #2e131c;
  --warn: #ffc046;
  --warn-soft: #2c2210;
  --hot: #ff8a5c;

  --grad: linear-gradient(135deg, #7c7cff 0%, #a78bfa 50%, #f472b6 100%);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 34px -14px rgba(0,0,0,.7);
  --shadow-lg: 0 2px 8px rgba(0,0,0,.5), 0 28px 56px -22px rgba(124,124,255,.35);
  --shadow-pri: 0 8px 24px -8px rgba(124,124,255,.5);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo,
               system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}
.hidden { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---------- アイコン ---------- */
/* 中身は Radix Icons の 15x15。1em で描くので、大きさは置き場所の font-size で決まる。
   色は currentColor なので、親の color を変えれば追従する。 */
.ico { width: 1em; height: 1em; flex: none; vertical-align: -.14em; }
/* 標識だけは content/signs.js の本物（Wikimedia Commons の実物・多色）。
   線画のアイコンより図が細かいぶん、同じ場所では少し大きめに置く。
   縦横比は標識ごとに違う（一方通行は横長）。ここは正方形の枠だが、
   viewBox があるので潰れずに枠の内側におさまる */
.ico-sign { width: 1.25em; height: 1.25em; vertical-align: -.3em; }
/* data-icon="…" の入れ物。svg をここに差し込むので中央にそろえておく */
[data-icon] { display: inline-flex; align-items: center; justify-content: center; }
.ox-ok { color: var(--ok); }
.ox-ng { color: var(--ng); }

/* ---------- topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  /* 帯そのものは画面幅いっぱい（下の境界線を端まで引くため）だが、
     中身は本文と同じ 880px に収める。広い画面で、上のメニューだけが
     左右いっぱいに広がって本文と揃わないのを直す。
     max() の最後の項が、880px を超えたぶんを左右に振り分ける余白 */
  padding-top: 10px; padding-bottom: 10px;
  padding-left: max(14px, env(safe-area-inset-left), calc((100% - 880px) / 2));
  padding-right: max(14px, env(safe-area-inset-right), calc((100% - 880px) / 2));
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 4px 6px; border-radius: 10px;
  font-weight: 700; letter-spacing: .01em;
}
.brand:hover { background: var(--surface-2); }
/* ブランドマークは元絵（public/brand/logo.png 由来の mark.png）をそのまま使う。
   白ヌキの PNG を mask にして currentColor で抜く。<img> で直に置くと白のままで、
   明るいテーマの白いヘッダーでは見えなくなる。
   マスクなら --pri がテーマで変わってもついてくる（明 #5b5bf5 / 暗 #8b8bff）。
   大きさと縦位置は .ico に合わせてある（このマークだけ枠が横長なので contain） */
.brand-mark {
  font-size: 21px; color: var(--pri);
  display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -.14em;
  background: currentColor;
  -webkit-mask: url(/icons/mark.png) center/contain no-repeat;
  mask: url(/icons/mark.png) center/contain no-repeat;
}
.brand-txt { font-size: 15px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.exam-meta { font-size: 13px; color: var(--muted); }
.timer {
  font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 17px;
  padding: 3px 12px; border-radius: 999px;
  background: var(--pri-soft); color: var(--pri);
}
.timer.warn { background: var(--ng-soft); color: var(--ng); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.icon-btn {
  border: 1px solid var(--line); background: var(--surface);
  width: 34px; height: 34px; border-radius: 9px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--muted);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

/* ---------- 行き先バー ----------
   使う頻度で3つに分けている。毎日ひらく「学習」を短く保つのが目的。
   画面下に浮かせるのは、スマホで親指が届くのがそこだから */
.tabbar {
  position: fixed; z-index: 50;
  left: 50%; transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; gap: 2px; padding: 5px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-lg);
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 82px; padding: 7px 14px; border: 0; background: none;
  border-radius: 999px; color: var(--muted);
  transition: color .16s, background .16s;
}
.tab .ico { font-size: 17px; }
.tab small { font-size: 11px; font-weight: 700; letter-spacing: .01em; }
.tab:hover { color: var(--text); }
.tab.on { background: var(--pri-soft); color: var(--pri); }
@media (max-width: 420px) { .tab { min-width: 0; flex: 1; padding: 7px 10px; } .tabbar { width: calc(100% - 24px); } }

/* ---------- layout ---------- */
/* 下の余白はバーのぶん。最後の項目がバーに隠れないように */
#app { max-width: 880px; margin: 0 auto; padding: 20px 16px 108px; }
.screen { animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } }
.sec-title { font-size: 15px; margin: 28px 0 12px; letter-spacing: .02em; }
.page-title { font-size: 22px; margin: 4px 0 18px; }

/* ---------- hero ---------- */
.hero { padding: 8px 0 22px; }
.hero h1 { font-size: 26px; line-height: 1.35; margin: 0 0 4px; }
.hero h1 span { color: inherit; }
.hero-tag { margin: 0 0 8px; font-size: 15px; font-weight: 700; line-height: 1.4; }
.hero-sub { margin: 0; color: var(--muted); font-size: 14px; }

/* ---------- license cards ---------- */
.license-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .license-grid { grid-template-columns: 1fr; } }
.lic-card {
  text-align: left; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
  transition: transform .12s, border-color .12s;
}
.lic-card:hover { transform: translateY(-2px); border-color: var(--pri); }
.lic-tag {
  display: inline-block; font-size: 12px; font-weight: 700;
  padding: 2px 10px; border-radius: 999px;
  background: var(--pri-soft); color: var(--pri);
}
.lic-tag.alt { background: var(--ok-soft); color: var(--ok); }
.lic-card h2 { font-size: 19px; margin: 10px 0 8px; }
.lic-card ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--muted); }
.lic-card ul b { color: var(--text); }
.lic-go { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--pri); }
/* カードを押したときに矢印だけ少し先へ進む */
.lic-go .ico { transition: transform .18s var(--ease); }
.lic-card:hover .lic-go .ico { transform: translateX(3px); }

/* ---------- mode cards ---------- */
.mode-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .mode-grid { grid-template-columns: 1fr 1fr; } }
.mode-card {
  position: relative; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.mode-card:hover { border-color: var(--pri); }
.mode-ico { font-size: 20px; color: var(--pri); }
.mode-card b { font-size: 15px; }
.mode-card small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.badge {
  position: absolute; top: 10px; right: 10px;
  min-width: 22px; text-align: center;
  background: var(--ng); color: #fff; font-size: 12px; font-weight: 700;
  border-radius: 999px; padding: 1px 7px;
}
.badge.zero { display: none; }

/* ---------- panels ---------- */
.home-cols { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .home-cols { grid-template-columns: 1fr; } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 16px 16px; }
.panel .sec-title { margin-top: 16px; }
.empty { color: var(--muted); font-size: 13px; margin: 6px 0; }

.stat-row { margin-bottom: 10px; font-size: 13px; }
.stat-row .top { display: flex; justify-content: space-between; gap: 8px; }
.stat-row .top span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.meter { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-top: 3px; border: 1px solid var(--line); }
.meter i { display: block; height: 100%; border-radius: 999px; background: var(--ok); }
.meter i.low { background: var(--ng); }
.meter i.mid { background: var(--warn); }

.history-list { display: flex; flex-direction: column; gap: 8px; }
.hist {
  display: flex; align-items: center; gap: 10px; font-size: 13px;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
}
.hist .pill { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.hist .pill.pass { background: var(--ok-soft); color: var(--ok); }
.hist .pill.fail { background: var(--ng-soft); color: var(--ng); }
.hist .when { margin-left: auto; color: var(--muted); font-size: 12px; }
.link-btn.danger:hover { color: var(--ng); }

.disclaimer { margin-top: 30px; font-size: 12px; color: var(--muted); line-height: 1.7; }

/* ---------- category ---------- */
.seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; margin-bottom: 16px; }
.seg-btn { border: 0; background: none; padding: 5px 14px; border-radius: 999px; font-size: 13px; color: var(--muted); }
.seg-btn.on { background: var(--surface); color: var(--text); font-weight: 700; box-shadow: var(--shadow); }
.cat-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.cat-card {
  text-align: left; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px;
}
.cat-card:hover { border-color: var(--pri); }
.cat-card b { display: block; font-size: 15px; }
.cat-card small { color: var(--muted); font-size: 12px; }

/* ---------- exam ---------- */
.exam-head { margin-bottom: 14px; }
.progress { height: 5px; background: var(--surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.progress-bar { height: 100%; width: 0; background: var(--pri); transition: width .2s; }
.exam-head-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.qcount { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.qcount b { font-size: 20px; color: var(--text); }
.chip { font-size: 12px; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.chip .ico { color: var(--pri); }
.spacer { flex: 1; }
.ghost-btn {
  border: 1px solid var(--line); background: var(--surface); border-radius: 9px;
  padding: 5px 11px; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px;
}
.ghost-btn [data-icon] { color: var(--muted); font-size: 14px; }
.ghost-btn:hover { background: var(--surface-2); }
.ghost-btn.on [data-icon], .ghost-btn.danger:hover [data-icon] { color: inherit; }
.ghost-btn.on { background: var(--pri-soft); border-color: var(--pri); color: var(--pri); font-weight: 700; }

.qcard {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
}
.qtext { font-size: 18px; line-height: 1.85; margin: 0 0 22px; font-weight: 500; }
@media (max-width: 520px) { .qtext { font-size: 16.5px; } .qcard { padding: 16px; } }

/* 問題文の高さを先に取っておく。
   取らないと、1行の問題と2行の問題で ○× ボタンの位置が上下に動く。
   90問を続けて押していくあいだ、押す場所が毎問ずれることになり、
   「押したつもりが外れた」の原因になる。目も毎回ボタンを探し直す。

   行数は実データから決めた（○×問題397問）:
     日本語 最長69字 … PC は約44字/行で2行、SP は約27字/行で3行
     英訳   最長158字 … PC は約100字/行で2行、SP は約62字/行で3行
   height ではなく min-height にしてあるので、想定より長い問題を足しても切れずに伸びる。
   （そのぶんだけ位置は動くが、無言で本文が隠れるよりはよい）

   :has() が無い古い環境では下の1本だけが効く＝いまと同じ挙動に戻るだけ */
/* 高さの条件付き:
   試験中の .qcard は 100dvh の残りを分けあう固定枠（この下の「1画面に収める」節）で、
   ○✕ ボタンもその枠の中にある。背の低いビューポート（横向きのスマホなど）で
   場所を先取りすると、ボタンを枠の外へ押し出して、答えるのにスクロールが要る。
   それは1画面に収めた意味を消すので、縦に余裕があるときだけ効かせる */
@media (min-height: 560px) {
  #qText { min-height: calc(2 * 1.85em); }
  /* 日本語＋訳の2段組み。.bt は上の罫線と余白で 11px 使う */
  #qText:has(.bt) { min-height: calc(2 * 1.85em + 11px + 2 * 1.75 * 0.88em); }
  /* 訳だけのときは1段。行送りが .bt.solo 側の 1.75 になる */
  #qText:has(.bt.solo) { min-height: calc(2 * 1.75em); }
}

@media (max-width: 520px) {
  /* 折り返す位置を毎回そろえる。
     幅の狭い端末だと、この行は入りきらずに折り返す。どこで折り返すかは
     カテゴリ名（#qCat）の長さ次第なので、「高速道路」と「運転者の心得」で
     見出しが2行になったり3行になったりし、その下の問題文ごと上下に動いていた。
     .spacer に行を分けさせて、上段＝進捗とカテゴリ／下段＝操作、で必ず2行にする */
  .exam-head-row .spacer { flex-basis: 100%; height: 0; }

  @media (min-height: 560px) {
    #qText { min-height: calc(3 * 1.85em); }
    #qText:has(.bt) { min-height: calc(3 * 1.85em + 11px + 3 * 1.75 * 0.88em); }
    #qText:has(.bt.solo) { min-height: calc(3 * 1.75em); }
  }
}

.ox-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ox-btn {
  border: 2px solid var(--line); background: var(--surface-2);
  border-radius: 12px; padding: 14px 8px; font-size: 15px; font-weight: 700;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: transform .08s, border-color .1s, background .1s;
}
.ox-btn span { font-size: 30px; line-height: 1.1; display: flex; align-items: center; justify-content: center; }
.ox-btn:active { transform: scale(.98); }
.ox-o:hover, .ox-o.sel { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }
.ox-x:hover, .ox-x.sel { border-color: var(--ng); background: var(--ng-soft); color: var(--ng); }

/* 危険予測 */
.hazard-box { margin-bottom: 18px; }
.hazard-svg { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #e8ecef; }
.hazard-svg svg { display: block; width: 100%; height: auto; }
.hazard-scene { font-size: 14.5px; color: var(--text); background: var(--surface-2); border-left: 3px solid var(--pri); padding: 10px 12px; margin: 12px 0 0; border-radius: 0 8px 8px 0; }
.hz-subs { display: flex; flex-direction: column; gap: 14px; }
.hz-sub { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--surface-2); }
.hz-sub .hz-q { font-size: 15.5px; line-height: 1.8; margin: 0 0 12px; }
.hz-sub .hz-q b { color: var(--pri); margin-right: 6px; }
.hz-sub .ox-row .ox-btn { padding: 9px 6px; }
.hz-sub .ox-row .ox-btn span { font-size: 22px; }

/* フィードバック（練習モード） */
.feedback { margin-top: 18px; border-radius: 12px; padding: 14px 16px; font-size: 14.5px; line-height: 1.8; border: 1px solid; }
.feedback.ok { background: var(--ok-soft); border-color: var(--ok); }
.feedback.ng { background: var(--ng-soft); border-color: var(--ng); }
.feedback .fb-head { font-weight: 700; margin: 0 0 4px; }
.feedback.ok .fb-head { color: var(--ok); }
.feedback.ng .fb-head { color: var(--ng); }
.feedback p { margin: 0; }

.exam-foot { display: flex; gap: 10px; margin-top: 18px; }
.nav-btn {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 11px; padding: 11px 18px; font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.nav-btn [data-icon] { font-size: 15px; }
.nav-btn:hover:not(:disabled) { background: var(--surface-2); }
.nav-btn:disabled { opacity: .4; cursor: default; filter: grayscale(.4); box-shadow: none; }
.nav-btn.primary { background: var(--pri); border-color: var(--pri); color: #fff; }
.nav-btn.primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--pri); }
.nav-btn.finish { margin-left: auto; background: var(--ok); border-color: var(--ok); color: #fff; }
.nav-btn.finish:hover { filter: brightness(1.08); background: var(--ok); }
.nav-btn.wide { width: 100%; margin: 14px 0 0; }
.kbd-hint { font-size: 12px; color: var(--muted); margin-top: 14px; }
kbd { border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; font-size: 11px; background: var(--surface); margin: 0 1px; }
@media (max-width: 520px) { .kbd-hint { display: none; } }

/* ---------- sheet ---------- */
.sheet { position: fixed; inset: 0; z-index: 60; background: rgba(9,13,19,.5); display: flex; justify-content: center; align-items: flex-end; }
.sheet-inner {
  background: var(--surface); width: 100%; max-width: 560px;
  border-radius: 16px 16px 0 0; padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
  max-height: 82vh; overflow: auto; animation: up .2s ease;
}
@keyframes up { from { transform: translateY(24px); } }
.sheet-head { display: flex; align-items: center; margin-bottom: 8px; }
.sheet-head b { font-size: 16px; }
.sheet-head .icon-btn { margin-left: auto; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.dot.done { background: var(--pri); }
.dot.flag { background: var(--warn); }
.dot.todo { background: var(--line); border: 1px solid var(--muted); }
.sheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 7px; }
.sq {
  border: 1px solid var(--line); background: var(--surface-2);
  border-radius: 8px; padding: 8px 0; font-size: 13px; font-variant-numeric: tabular-nums;
}
.sq.done { background: var(--pri); border-color: var(--pri); color: #fff; }
.sq.flag { box-shadow: inset 0 0 0 2px var(--warn); }
.sq.cur { outline: 2px solid var(--text); outline-offset: 1px; }

/* ---------- result ---------- */
.result-head { text-align: center; padding: 26px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.result-head.pass { background: var(--ok-soft); border-color: var(--ok); }
.result-head.fail { background: var(--ng-soft); border-color: var(--ng); }
.result-badge { display: inline-block; font-weight: 800; font-size: 14px; letter-spacing: .1em; padding: 3px 16px; border-radius: 999px; background: var(--surface); }
.result-head.pass .result-badge { color: var(--ok); }
.result-head.fail .result-badge { color: var(--ng); }
.score { margin: 8px 0 2px; font-variant-numeric: tabular-nums; }
.score b { font-size: 56px; line-height: 1; font-weight: 800; }
.score span { font-size: 20px; color: var(--muted); margin-left: 4px; }
.result-line { margin: 6px 0 0; font-size: 14px; color: var(--muted); }

.result-stats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-top: 14px; }
.rstat { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.rstat small { display: block; color: var(--muted); font-size: 12px; }
.rstat b { font-size: 20px; font-variant-numeric: tabular-nums; }

.result-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.result-actions .nav-btn { flex: 1; min-width: 150px; text-align: center; }

.review-list { display: flex; flex-direction: column; gap: 10px; }
.rev { border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; background: var(--surface); padding: 12px 14px; }
.rev.ok { border-left-color: var(--ok); }
.rev.ng { border-left-color: var(--ng); }
.rev-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 5px; flex-wrap: wrap; }
.rev-head .no { font-weight: 700; color: var(--text); }
.rev-head .mark { font-weight: 800; }
.rev.ok .mark { color: var(--ok); }
.rev.ng .mark { color: var(--ng); }
.rev-q { font-size: 15px; line-height: 1.8; margin: 0 0 8px; }
.rev-ans { font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.rev-ans b { color: var(--text); }
.rev-e { font-size: 13.5px; line-height: 1.8; background: var(--surface-2); border-radius: 8px; padding: 9px 11px; margin: 0; }
.rev-svg { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 10px; max-width: 380px; }
.rev-svg svg { display: block; width: 100%; height: auto; }
.rev-sub { border-top: 1px dashed var(--line); padding-top: 9px; margin-top: 9px; }
.rev-sign { width: 96px; margin-bottom: 8px; }
.rev-sign svg { display: block; width: 100%; height: auto; }

/* ===================================================================
   追加機能
   =================================================================== */

/* ---------- 中断した試験の再開 ---------- */
.resume-bar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--pri-soft); border: 1px solid var(--pri);
}
.resume-ico { font-size: 19px; color: var(--pri); }
.resume-bar b { display: block; font-size: 14px; }
.resume-bar small { color: var(--muted); font-size: 12px; }
.resume-bar .nav-btn { margin-left: auto; }
.nav-btn.sm { padding: 7px 14px; font-size: 14px; }

/* ---------- ペースメーター ---------- */
.pace {
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.pace.ahead { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.pace.behind { background: var(--ng-soft); border-color: var(--ng); color: var(--ng); }
@media (max-width: 620px) { .pace { display: none; } }

.icon-btn.on { background: var(--pri-soft); border-color: var(--pri); color: var(--pri); }
.mode-card.accent { border-color: var(--pri); background: var(--pri-soft); }

.sec-note { display: block; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 3px; }

/* ---------- 合格予測 ---------- */
.predict-wrap { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .predict-wrap { grid-template-columns: 1fr; } }
.predict-wrap > .empty { grid-column: 1 / -1; margin: 0; padding: 14px; background: var(--surface); border: 1px dashed var(--line); border-radius: 12px; }
.pred {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px;
}
.pred-top { display: flex; align-items: baseline; gap: 8px; }
.pred-top b { font-size: 15px; }
.pred-top .lvl { margin-left: auto; font-size: 12px; font-weight: 700; padding: 1px 10px; border-radius: 999px; }
.lvl.good { background: var(--ok-soft); color: var(--ok); }
.lvl.mid { background: #fdf3e0; color: var(--warn); }
html[data-theme="dark"] .lvl.mid { background: #2e2410; }
.lvl.bad { background: var(--ng-soft); color: var(--ng); }
.pred-prob { font-variant-numeric: tabular-nums; margin: 6px 0 2px; }
.pred-prob b { font-size: 34px; font-weight: 800; line-height: 1; }
.pred-prob span { font-size: 15px; color: var(--muted); margin-left: 3px; }
.pred-sub { font-size: 12.5px; color: var(--muted); margin: 2px 0 10px; }
.pred-bar { height: 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; position: relative; }
.pred-bar i { display: block; height: 100%; background: var(--ok); }
.pred-bar i.mid { background: var(--warn); }
.pred-bar i.bad { background: var(--ng); }
.pred-bar u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); text-decoration: none; }
.pred-weak { margin: 10px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--muted); }
.pred-weak b { color: var(--text); }

/* ---------- 引っかけワード ---------- */
.trap-list { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .trap-list { grid-template-columns: 1fr; } }
.trap-list > .empty { grid-column: 1 / -1; margin: 0; padding: 14px; background: var(--surface); border: 1px dashed var(--line); border-radius: 12px; }
.trap {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--line); border-radius: 12px; padding: 12px 14px;
}
.trap.low { border-left-color: var(--ng); }
.trap.mid { border-left-color: var(--warn); }
.trap.high { border-left-color: var(--ok); }
.trap-head { display: flex; align-items: center; gap: 8px; }
.trap-head b { font-size: 14px; }
.trap-head .rate { margin-left: auto; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.trap.low .rate { color: var(--ng); }
.trap.mid .rate { color: var(--warn); }
.trap.high .rate { color: var(--ok); }
.trap-words { display: flex; flex-wrap: wrap; gap: 4px; margin: 7px 0; }
.trap-words span { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.trap-tip { font-size: 12.5px; line-height: 1.75; color: var(--muted); margin: 0; }
.trap-tip.hidden-tip { display: none; }
.trap-more { background: none; border: 0; padding: 4px 0 0; font-size: 12px; color: var(--pri); }
.trap-more:hover { color: var(--text); }

mark.tw {
  background: #ffe9a8; color: #6b4b00; border-radius: 3px;
  padding: 0 2px; font-weight: 700;
}
html[data-theme="dark"] mark.tw { background: #4a3a10; color: #ffd979; }

.result-traps {
  margin-top: 14px; padding: 12px 16px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line);
}
.result-traps h4 { margin: 0 0 6px; font-size: 14px; }
.result-traps p { margin: 0; font-size: 13px; line-height: 1.8; color: var(--muted); }
.result-traps .tag { display: inline-block; font-weight: 700; color: var(--ng); margin-right: 8px; }

/* ---------- 標識クイズ ---------- */
.sg-box { text-align: center; }
.sg-img {
  width: 168px; margin: 0 auto 6px; padding: 10px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px;
}
.sg-img svg { display: block; width: 100%; height: auto; }
.sg-q { font-size: 15.5px !important; margin: 10px 0 16px !important; color: var(--muted); }
.sg-choices { display: grid; gap: 10px; text-align: left; }
.sg-choice {
  display: flex; align-items: center; gap: 10px;
  border: 2px solid var(--line); background: var(--surface-2);
  border-radius: 12px; padding: 12px 14px; font-size: 15px; line-height: 1.6;
}
.sg-choice:hover:not(.locked) { border-color: var(--pri); }
.sg-choice .no {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.sg-choice.sel { border-color: var(--pri); background: var(--pri-soft); }
.sg-choice.sel .no { background: var(--pri); color: #fff; border-color: var(--pri); }
.sg-choice.right { border-color: var(--ok); background: var(--ok-soft); }
.sg-choice.right .no { background: var(--ok); color: #fff; border-color: var(--ok); }
.sg-choice.wrong { border-color: var(--ng); background: var(--ng-soft); }
.sg-choice.wrong .no { background: var(--ng); color: #fff; border-color: var(--ng); }

/* ---------- 数字ドリル ---------- */
/* 選ぶのは数値だけなので、標識の選択肢より横に短く、字を大きく出す。
   4つを2列に並べると、5と10、30と50のような近い値を見比べやすい */
.nm-choices { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
.nm-choice {
  display: flex; align-items: center; gap: 10px;
  border: 2px solid var(--line); background: var(--surface-2);
  border-radius: 12px; padding: 14px; font-size: 18px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.nm-choice:hover:not(.locked) { border-color: var(--pri); }
.nm-choice .no {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.nm-choice.sel { border-color: var(--pri); background: var(--pri-soft); }
.nm-choice.sel .no { background: var(--pri); color: #fff; border-color: var(--pri); }
.nm-choice.right { border-color: var(--ok); background: var(--ok-soft); }
.nm-choice.right .no { background: var(--ok); color: #fff; border-color: var(--ok); }
.nm-choice.wrong { border-color: var(--ng); background: var(--ng-soft); }
.nm-choice.wrong .no { background: var(--ng); color: #fff; border-color: var(--ng); }
@media (max-width: 380px) { .nm-choices { grid-template-columns: 1fr; } }

/* ---------- 標識一覧 ---------- */
.sign-chart { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.sign-cell {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 10px; text-align: center;
}
.sign-cell:hover { border-color: var(--pri); }
.sign-cell svg { display: block; width: 74px; height: auto; margin: 0 auto 8px; }
.sign-cell b { display: block; font-size: 12.5px; line-height: 1.5; }
.sign-cell small { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.6; color: var(--muted); text-align: left; }
.sign-cell small.hidden-mean { display: none; }

/* ---------- ツール行 ---------- */
.tool-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-row .ghost-btn { padding: 8px 14px; }
.ghost-btn.danger:hover { border-color: var(--ng); color: var(--ng); }

/* ===================================================================
   多言語
   =================================================================== */

/* 言語ごとのフォント */
html[data-lang="ne"] body { font-family: "Kohinoor Devanagari", "Noto Sans Devanagari", "Nirmala UI", "Mangal", system-ui, sans-serif; }
html[data-lang="zh"] body { font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; }
html[data-lang="ko"] body { font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif; }
html[data-lang="vi"] body,
html[data-lang="en"] body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; }
/* 日本語を明示した要素は常に日本語フォントで */
[lang="ja"], .bj, .ja-sub { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, system-ui, sans-serif; }

.mini-sel {
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  border-radius: 9px; padding: 5px 6px; font-size: 12.5px; max-width: 132px;
}
.mini-sel:hover { background: var(--surface-2); }
/* 出題画面では選択肢の文言が長い。切り詰めるより折り返させる */
.exam-head-row .mini-sel { max-width: none; }
@media (max-width: 620px) { .mini-sel { max-width: 88px; font-size: 12px; } }

.tr-banner {
  margin: 0 0 18px; padding: 9px 13px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.7; color: var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  display: flex; align-items: flex-start; gap: 8px;
}
/* 一行目の高さにそろえる（本文が折り返しても頭に残る） */
.tr-banner > .ico, .tr-banner > [data-icon] { font-size: 14px; margin-top: 3px; }

/* 日本語と訳の併記 */
.bj { display: block; }
.bt {
  display: block; margin-top: 5px; padding-top: 5px;
  border-top: 1px dashed var(--line);
  color: var(--muted); font-size: .92em; line-height: 1.75;
}
.bt.solo { margin-top: 0; padding-top: 0; border-top: 0; color: inherit; font-size: 1em; }
.ja-sub { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); font-weight: 400; }
.qtext .bt { font-size: .88em; }
.hazard-scene .bt, .rev-e .bt, .feedback .bt { font-size: .95em; }
.sign-cell .bt { border-top: 0; padding-top: 3px; }

.fb-trap { margin-top: 8px !important; font-size: 13px; opacity: .85; }

/* ---------- 用語集 ---------- */
.gloss-search {
  width: 100%; margin: 4px 0 16px; padding: 10px 14px; font: inherit; font-size: 15px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface); color: var(--text);
}
/* 虫めがねは placeholder に文字として置けないので、入力欄に重ねる */
.search-wrap { position: relative; margin: 4px 0 16px; }
.search-wrap .gloss-search { margin: 0; padding-left: 38px; }
.search-ico {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  font-size: 15px; color: var(--muted); pointer-events: none;
}
.gloss-list { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) { .gloss-list { grid-template-columns: 1fr; } }
.gloss { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.gloss-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gloss-top b { font-size: 17px; }
.gloss .yomi { font-size: 12px; color: var(--muted); }
.gloss p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.75; color: var(--muted); }

/* 選択肢内のテキストを折り返せるように */
.sg-choice > span:last-child { flex: 1; }
.ox-btn i { font-style: normal; }

/* ===================================================================
   アカウント・課金
   =================================================================== */
.acct-btn {
  display: flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 999px; padding: 4px 11px 4px 8px; font-size: 12.5px;
}
.acct-btn:hover { background: var(--surface-2); }
.acct-ico { font-size: 14px; color: var(--muted); }
.acct-plan { font-weight: 700; white-space: nowrap; }
.acct-plan.prem { color: var(--warn); }
@media (max-width: 620px) {
  .acct-plan { display: none; }
  .acct-btn { padding: 4px 8px; }
  /* 上のバーに詰め込みすぎると、サービス名が折り返して縦に伸びる。
     ホームへ戻る役目は下の「学習」タブが持っているので、狭い画面では車だけ残す */
  .brand-txt { display: none; }
  .brand { padding: 4px; }
  .topbar { gap: 8px; }
}

.lock {
  position: absolute; top: 12px; right: 12px; font-size: 15px; opacity: .9;
  display: inline-flex; color: var(--warn);
}
.lic-card, .mode-card { position: relative; }
.lic-card.locked, .mode-card.locked { opacity: .72; }
.lic-card.locked:hover, .mode-card.locked:hover { opacity: 1; border-color: var(--warn); }

/* リンク風のボタン。下線は引かない（ボタンなので、色と太さで足りる）。
   触れたときに色が動くことで押せると分かるようにしてある */
.link-up { background: none; border: 0; padding: 0; font-weight: 700; color: var(--pri); }
.link-up:hover { color: var(--text); }
.link-up .ico { margin-left: 2px; }

.upsell {
  position: relative; grid-column: 1 / -1;
  background: var(--surface); border: 1px dashed var(--line);
  border-radius: var(--radius); padding: 18px; text-align: center;
}
.upsell .lock { position: static; display: flex; justify-content: center; font-size: 24px; margin-bottom: 6px; }
.upsell b { display: block; font-size: 15px; }
.upsell p { margin: 4px 0 12px; font-size: 13px; color: var(--muted); line-height: 1.7; }

/* ---------- モーダル ---------- */
body.modal-open { overflow: hidden; }
.modal-back {
  position: fixed; inset: 0; z-index: 80; background: rgba(9,13,19,.55);
  display: grid; place-items: center; padding: 16px; overflow: auto;
}
.modal {
  position: relative; background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  padding: 26px 24px; width: 100%; max-width: 440px; animation: pop .16s ease;
}
@keyframes pop { from { transform: translateY(10px) scale(.98); opacity: 0; } }
.modal h2 { margin: 0 0 6px; font-size: 19px; }
.modal h2 .ico { color: var(--pri); margin-right: 3px; }
/* 結果だけを大きく見せるモーダル（決済の成否など） */
.modal-ico { font-size: 40px; line-height: 1; color: var(--muted); }
.modal-ico.ok { color: var(--ok); }
.modal-ico.ng { color: var(--ng); }
.msg-warn { display: inline-flex; align-items: center; gap: 5px; }
.modal-sub { margin: 0 0 16px; font-size: 13.5px; line-height: 1.75; color: var(--muted); }
.modal-x {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px;
  border: 0; background: none; border-radius: 8px; font-size: 15px; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.modal-x:hover { background: var(--surface-2); }
.modal-input {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 15px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); color: var(--text);
}
.modal-input:focus { outline: 2px solid var(--pri); outline-offset: 1px; }
/* confirm / alert / prompt の中身（modal.js） */
.modal-ask { max-width: 400px; }
.modal-ask h2 { margin-bottom: 10px; padding-right: 24px; line-height: 1.5; }
.modal-ask .modal-sub { margin-bottom: 0; color: var(--text); font-size: 14px; }
.modal-ask .modal-sub + .modal-sub { margin-top: 10px; }
/* 「・50問」のような箇条書きを、標準ダイアログの素の改行より読みやすく出す */
.modal-list {
  list-style: none; margin: 14px 0 0; padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 14px; line-height: 1.9;
}
.modal-list li { position: relative; padding-left: 16px; }
.modal-list li::before {
  content: ''; position: absolute; left: 2px; top: .72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--pri);
}
.modal-ask .modal-list + .modal-sub { margin-top: 14px; }
.modal-ask .modal-input { margin-top: 14px; margin-bottom: 0; }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal-actions .nav-btn { flex: 1; padding: 12px 14px; }
.nav-btn.primary.danger { background: var(--ng); border-color: var(--ng); }
.nav-btn.primary.danger:hover:not(:disabled) { background: var(--ng); filter: brightness(1.08); }
@media (max-width: 420px) { .modal-actions { flex-direction: column-reverse; } }

.modal-msg { margin: 10px 0 0; font-size: 13px; color: var(--ng); line-height: 1.7; }
.modal-msg.warn { color: var(--warn); }
.dev-link {
  display: block; margin-top: 10px; padding: 10px; text-align: center; font-size: 13px;
  background: var(--surface-2); border: 1px dashed var(--warn); border-radius: 10px;
  color: var(--warn); text-decoration: none; word-break: break-all;
}
.legal-note { margin: 12px 0 0; font-size: 11.5px; line-height: 1.7; color: var(--muted); }

.feat-list { margin: 0 0 16px; padding-left: 20px; font-size: 13.5px; line-height: 1.9; }
.feat-list li::marker { color: var(--ok); }

.plan-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.plan-card {
  position: relative; text-align: center; padding: 16px 10px;
  border: 2px solid var(--line); background: var(--surface-2); border-radius: 12px;
}
.plan-card:hover { border-color: var(--pri); }
.plan-card.on { border-color: var(--pri); background: var(--pri-soft); }
.plan-card b { display: block; font-size: 13px; color: var(--muted); }
.plan-amt { display: block; margin-top: 4px; font-size: 22px; font-weight: 800; }
.plan-amt small { font-size: 12px; font-weight: 400; color: var(--muted); }
.plan-best {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: var(--ok); color: #fff; font-size: 10.5px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}

/* ---------- アカウント画面 ---------- */
.panel.pad { padding: 18px; }
.acct-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.acct-row:last-of-type { border-bottom: 0; }
.acct-row span { color: var(--muted); }
.acct-row b { word-break: break-all; text-align: right; }
.plan-pill {
  font-size: 12px; font-weight: 700; padding: 2px 11px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.plan-pill.prem { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.data-note { margin: 0 0 14px; font-size: 13px; line-height: 1.8; color: var(--muted); }
.sync-note { margin: 12px 0 0; font-size: 12.5px; color: var(--ok); }
.sync-note .ico { vertical-align: -.16em; }
.acct-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pitch {
  margin-top: 16px; background: var(--surface); border: 1px solid var(--pri);
  border-radius: var(--radius); padding: 20px;
}
.pitch h3 { margin: 0 0 4px; font-size: 16px; }
.pitch > p { margin: 0 0 12px; font-size: 13px; color: var(--muted); line-height: 1.7; }

/* ===================================================================
   モダン化レイヤー（既存コンポーネントの見た目を上書き）
   =================================================================== */

body {
  background:
    radial-gradient(1100px 520px at 12% -8%, color-mix(in srgb, var(--pri) 12%, transparent), transparent 60%),
    radial-gradient(900px 460px at 92% 2%, color-mix(in srgb, var(--pri-2) 11%, transparent), transparent 62%),
    var(--bg);
  background-attachment: fixed;
  letter-spacing: .002em;
}

/* ---------- タイポ ---------- */
.hero { padding: 22px 0 26px; }
.hero h1 {
  font-size: clamp(30px, 6.4vw, 46px);
  line-height: 1.14;
  letter-spacing: -.03em;
  font-weight: 800;
  margin: 0 0 12px;
}
/* グラデーション文字は文字ごとに濃さが変わって読みにくいので使わない。
   強調はベタ塗りの1色で行う。 */
.hero h1 .hl, .hero-tag .hl { color: var(--pri); }
.hero h1 { color: var(--text); }
/* サービス名の下に置く一行。h1 より小さく、説明文より強く */
.hero-tag { font-size: clamp(16px, 2.2vw, 19px); letter-spacing: -.01em; max-width: 46ch; }
.hero-sub { font-size: 15px; max-width: 46ch; }
.page-title { font-size: clamp(24px, 5vw, 32px); font-weight: 800; letter-spacing: -.025em; }
.sec-title { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 34px 0 14px; }
.sec-title .sec-note { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* ---------- トップバー ---------- */
.topbar {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  padding-top: 12px; padding-bottom: 12px;
}
.brand-txt { font-weight: 800; letter-spacing: -.02em; }
.brand-mark { font-size: 22px; }
.icon-btn, .mini-sel { border-radius: 12px; transition: transform .18s var(--spring), background .16s; }
.icon-btn:active { transform: scale(.9); }
.acct-btn { border-radius: 999px; transition: transform .18s var(--spring); }
.acct-btn:active { transform: scale(.94); }

/* ---------- カード全般 ---------- */
.lic-card, .mode-card, .panel, .pred, .trap, .rstat, .cat-card, .sign-cell, .gloss, .qcard, .hist, .upsell, .pitch {
  border-radius: var(--r);
}
.lic-card, .mode-card, .cat-card, .sign-cell {
  transition: transform .22s var(--spring), box-shadow .22s var(--ease), border-color .16s;
}
.lic-card:hover, .mode-card:hover, .cat-card:hover, .sign-cell:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--pri) 55%, var(--line));
}
.lic-card:active, .mode-card:active, .cat-card:active { transform: translateY(-1px) scale(.99); }

.lic-card { padding: 22px; box-shadow: var(--shadow); }
.lic-card h2 { font-size: 21px; letter-spacing: -.02em; font-weight: 800; margin: 12px 0 10px; }
.lic-card ul { list-style: none; padding: 0; }
.lic-card li { position: relative; padding-left: 18px; margin-bottom: 3px; }
.lic-card li::before {
  content: ''; position: absolute; left: 3px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--pri); opacity: .55;
}
/* 仮免カードは主役なのでグラデーションの縁をつける */
.lic-card[data-lic="karimen"] {
  border-color: transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad) border-box;
  border: 1.5px solid transparent;
}
.lic-tag { border-radius: 999px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding: 3px 11px; }
.lic-go { font-weight: 800; letter-spacing: -.01em; }

.mode-card { padding: 18px 16px; gap: 3px; }
/* 線画と標識で見た目の重さが違うので、高さをそろえて行が波打たないようにする */
.mode-ico { font-size: 23px; margin-bottom: 6px; height: 29px; display: flex; align-items: center; }
.mode-card b { font-size: 15.5px; letter-spacing: -.015em; }
.mode-card.accent {
  border-color: transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box;
  border: 1.5px solid transparent;
}
.badge {
  background: var(--grad); box-shadow: var(--shadow-pri);
  font-size: 11.5px; padding: 2px 8px; min-width: 24px;
}

/* ---------- ボタン ---------- */
.nav-btn, .ghost-btn, .seg, .seg-btn { border-radius: 999px; }
.nav-btn {
  padding: 13px 24px; font-weight: 700; letter-spacing: -.01em;
  transition: transform .18s var(--spring), box-shadow .2s var(--ease), filter .16s;
}
.nav-btn:active:not(:disabled) { transform: scale(.96); }
.nav-btn.primary {
  background: var(--grad); border-color: transparent; color: #fff;
  box-shadow: var(--shadow-pri);
}
.nav-btn.primary:hover:not(:disabled) { background: var(--grad); filter: brightness(1.07); transform: translateY(-2px); }
.nav-btn.finish { background: var(--grad-ok); border-color: transparent; box-shadow: 0 8px 22px -8px rgba(6,176,112,.55); }
.nav-btn.finish:hover { background: var(--grad-ok); filter: brightness(1.07); transform: translateY(-2px); }
.ghost-btn { padding: 8px 15px; font-weight: 600; transition: transform .18s var(--spring), background .16s; }
.ghost-btn:active { transform: scale(.95); }
.seg-btn { font-weight: 700; }

/* ---------- 問題カード ---------- */
.qcard { padding: 28px; box-shadow: var(--shadow); border-radius: var(--r-lg); }
.qtext { font-size: 19px; line-height: 1.8; font-weight: 600; letter-spacing: -.012em; }
@media (max-width: 520px) { .qcard { padding: 20px 18px; } .qtext { font-size: 17px; } }

/* ○✕ は指で押して気持ちいいサイズに */
.ox-row { gap: 14px; }
.ox-btn {
  border-radius: var(--r); padding: 20px 8px; gap: 4px; border-width: 2px;
  font-weight: 700;
  transition: transform .16s var(--spring), background .16s, border-color .16s, box-shadow .2s;
}
.ox-btn span { font-size: 40px; line-height: 1; }
.ox-btn:active { transform: scale(.95); }
.ox-o:hover, .ox-o.sel { box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--ok) 80%, transparent); }
.ox-x:hover, .ox-x.sel { box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--ng) 80%, transparent); }
.ox-btn.sel { transform: scale(1.015); }
.hz-sub .ox-btn { padding: 12px 6px; }
.hz-sub .ox-btn span { font-size: 26px; }

.sg-choice { border-radius: var(--r); transition: transform .16s var(--spring), border-color .16s, background .16s; }
.sg-choice:active:not(.locked) { transform: scale(.985); }

.progress { height: 7px; border: 0; background: var(--surface-2); }
.progress-bar { background: var(--grad); transition: width .35s var(--ease); }

.timer { font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* ---------- フィードバック ---------- */
.feedback { border-radius: var(--r); border-width: 1.5px; animation: fbIn .28s var(--spring); }
@keyframes fbIn { from { opacity: 0; transform: translateY(8px); } }
.fb-head { font-size: 15px; letter-spacing: -.01em; }

/* ---------- 結果 ---------- */
.result-head { border-radius: var(--r-lg); padding: 34px 20px; }
.score b { font-size: clamp(56px, 15vw, 76px); letter-spacing: -.04em; animation: pop-in .5s var(--spring); }
@keyframes pop-in { from { transform: scale(.6); opacity: 0; } }
.result-badge { letter-spacing: .16em; font-size: 12px; padding: 5px 18px; }
.rstat b { font-size: 22px; letter-spacing: -.02em; }

/* ---------- 学習ストリーク ---------- */
.streak-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.stat-chip {
  display: flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 17px 9px 13px; box-shadow: var(--shadow);
}
.stat-chip .ico { font-size: 19px; line-height: 1; }
.stat-chip b { font-size: 17px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat-chip small { display: block; font-size: 10.5px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.stat-chip.fire { border-color: color-mix(in srgb, var(--hot) 45%, var(--line)); }
.stat-chip.fire b { color: var(--hot); }

/* ---------- 料金プラン ---------- */
.plan-card { border-radius: var(--r); padding: 20px 12px 16px; transition: transform .2s var(--spring), border-color .16s; }
.plan-card:active { transform: scale(.97); }
.plan-card.best {
  border-color: transparent;
  background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, var(--grad) border-box;
  border: 2px solid transparent;
}
.plan-card.best.on { background: linear-gradient(var(--pri-soft), var(--pri-soft)) padding-box, var(--grad) border-box; }
.plan-amt { font-size: 26px; letter-spacing: -.03em; }
.plan-note { display: block; margin-top: 6px; font-size: 11px; color: var(--muted); line-height: 1.5; }
.plan-best { background: var(--grad); box-shadow: var(--shadow-pri); padding: 3px 12px; }
.plan-why {
  margin: 0 0 16px; padding: 11px 14px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.7; color: var(--muted);
}
.modal { border-radius: var(--r-lg); padding: 30px 26px; box-shadow: var(--shadow-lg); }
.modal h2 { font-size: 22px; font-weight: 800; letter-spacing: -.025em; }
.modal-input { border-radius: 14px; }
.feat-list { list-style: none; padding-left: 2px; }
.feat-list li { position: relative; padding-left: 26px; }
.feat-list li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--ok); font-weight: 800;
}

/* ---------- その他 ---------- */
.upsell { border-radius: var(--r); border-width: 1.5px; }
.tr-banner { border-radius: var(--r-sm); }
.resume-bar { border-radius: var(--r); border-width: 1.5px; }
.meter { height: 8px; border: 0; background: var(--surface-2); }
.meter i { transition: width .5s var(--ease); }
.meter i:not(.low):not(.mid) { background: var(--grad-ok); }
.sheet-inner { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.sq { border-radius: 11px; transition: transform .15s var(--spring); }
.sq:active { transform: scale(.9); }
.sq.done { background: var(--grad); border-color: transparent; }
.chip { border-radius: 999px; font-weight: 600; }
.pill { border-radius: 999px; }
.plan-pill { border-radius: 999px; }
.hazard-svg, .sg-img, .rev-svg { border-radius: var(--r); }
.sg-img { border-radius: var(--r-lg); }

/* 動きが苦手な人への配慮 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .lic-card:hover, .mode-card:hover, .cat-card:hover, .sign-cell:hover, .nav-btn:hover { transform: none; }
}

/* ===================================================================
   ゲーミフィケーション
   =================================================================== */

/* ---------- 今日の学習カード ---------- */
.today-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px 22px; margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.today-main { display: flex; align-items: center; gap: 18px; }
.ring-wrap { position: relative; flex: none; width: 66px; height: 66px; }
.ring { width: 66px; height: 66px; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--surface-2); stroke-width: 7; }
.ring-fg {
  fill: none; stroke: var(--pri); stroke-width: 7; stroke-linecap: round;
  transition: stroke-dashoffset .7s var(--ease);
}
.ring-wrap.done .ring-fg { stroke: var(--ok); }
.ring-num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.today-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.today-txt > b { font-size: 16px; letter-spacing: -.02em; }
.today-sub { font-size: 13px; color: var(--muted); line-height: 1.6; }
.today-txt .link-up { align-self: flex-start; font-size: 12px; margin-top: 3px; font-weight: 600; }
.streak-badge {
  flex: none; text-align: center; padding: 8px 14px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--hot) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--hot) 32%, transparent);
}
.streak-badge span { font-size: 18px; display: flex; justify-content: center; line-height: 1; color: var(--hot); }
.streak-badge b { display: block; font-size: 19px; color: var(--hot); letter-spacing: -.03em; }
.streak-badge small { font-size: 9.5px; color: var(--muted); letter-spacing: .04em; }

.lvl-row { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.lvl-tag {
  flex: none; font-size: 11.5px; font-weight: 800; letter-spacing: .03em;
  padding: 3px 11px; border-radius: 999px; background: var(--pri-soft); color: var(--pri);
}
.lvl-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.lvl-bar i { display: block; height: 100%; border-radius: 999px; background: var(--grad); transition: width .7s var(--ease); }
.lvl-row small { flex: none; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* 次のバッジ（1行）。棚は「試験」タブにあり、ここは予告だけ。
   レベルバーと同じ行組みにして、カードの中で新しい塊を作らない */
.next-badge {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--muted);
}
.next-badge .nb-ico { flex: none; display: flex; font-size: 15px; color: var(--pri); }
/* 標識バッジは多色なので、親の color には従わない（それでよい） */
.next-badge .nb-ico .ico-sign { width: 1.15em; height: 1.15em; }
.nb-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-txt b { color: var(--text); font-weight: 700; }
.nb-rest {
  flex: none; font-size: 11.5px; font-weight: 700; color: var(--pri);
  font-variant-numeric: tabular-nums; padding: 2px 9px; border-radius: 999px;
  background: var(--pri-soft);
}

@media (max-width: 520px) {
  .today-card { padding: 16px; }
  .today-main { gap: 13px; }
  .lvl-row small { display: none; }
}

/* ---------- 法務ページ ----------
   読み飛ばされる前提の文章ではあるが、読もうとした人がちゃんと読めること。
   行長を詰めすぎず、見出しと本文の差をはっきりさせる */
.legal-lead {
  margin: 0 0 20px; padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--muted); font-size: 12.5px; line-height: 1.7;
}
.legal-body { max-width: 68ch; }
.legal-sec { margin-bottom: 22px; }
.legal-sec h3 { margin: 0 0 7px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.legal-sec p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.85; color: var(--text); }
.legal-table dd { word-break: break-word; }
@media (max-width: 560px) {
  /* 1カラムに落とす。項目名と値が10文字ずつで折り返すのは読めない */
  .legal-table { grid-template-columns: 1fr; }
  .legal-table dt { padding-bottom: 2px; border-top: 1px solid var(--line); }
  .legal-table dd { padding-top: 4px; border-top: 0; }
}

/* ---------- 法務ページへの導線 ---------- */
.site-foot {
  display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center;
  margin: 36px 0 0; padding: 18px 16px 8px; border-top: 1px solid var(--line);
}
.site-foot a { color: var(--muted); font-size: 12px; text-decoration: none; }
.site-foot a:hover, .site-foot a:focus-visible { color: var(--pri); text-decoration: underline; }

/* ---------- バッジ棚 ---------- */
.badge-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.badge-item {
  text-align: center; padding: 13px 6px 10px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line);
  opacity: .45; filter: grayscale(1);
  transition: transform .2s var(--spring), opacity .2s, filter .2s;
}
.badge-item.on {
  opacity: 1; filter: none;
  border-color: color-mix(in srgb, var(--warn) 40%, var(--line));
  background: color-mix(in srgb, var(--warn) 7%, var(--surface));
}
.badge-item.on:hover { transform: translateY(-3px) scale(1.03); }
/* 取っていないバッジは鍵。取ったものだけ色をつけて棚のなかで目立たせる */
.b-ico { display: flex; justify-content: center; align-items: center; height: 26px; font-size: 23px; line-height: 1; margin-bottom: 7px; color: var(--muted); }
.badge-item.on .b-ico { color: var(--warn); }
.badge-item small { display: block; font-size: 10.5px; line-height: 1.35; color: var(--muted); }
.badge-item.on small { color: var(--text); font-weight: 600; }

/* ---------- 連続正解チップ ---------- */
.combo-chip {
  font-size: 12.5px; font-weight: 700; padding: 3px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--hot) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--hot) 40%, transparent);
  color: var(--hot); animation: comboPop .3s var(--spring);
}
.combo-chip b { font-size: 14px; }
.combo-chip .ico { font-size: 14px; }
@keyframes comboPop { from { transform: scale(.7); opacity: 0; } }

/* ---------- トースト ---------- */
.toast-root {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 90;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none; width: max-content; max-width: 92vw;
}
.toast {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 11px 22px 11px 16px;
  box-shadow: var(--shadow-lg); animation: toastIn .35s var(--spring);
}
.toast.out { animation: toastOut .4s var(--ease) forwards; }
@keyframes toastIn { from { transform: translateY(20px) scale(.9); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(12px) scale(.95); opacity: 0; } }
.t-ico { font-size: 22px; line-height: 1; display: inline-flex; color: var(--pri); }
.toast b { display: block; font-size: 14px; letter-spacing: -.01em; }
.toast small { display: block; font-size: 11.5px; color: var(--muted); }

.today-cta {
  width: 100%; margin-top: 16px; padding: 14px; border: 0; border-radius: 999px;
  background: var(--grad); color: #fff; font-size: 15.5px; font-weight: 800;
  letter-spacing: -.01em; box-shadow: var(--shadow-pri);
  transition: transform .18s var(--spring), filter .16s;
}
.today-cta:hover { filter: brightness(1.07); transform: translateY(-2px); }
.today-cta:active { transform: scale(.97); }

/* ---------- 外免切替ガイド ---------- */
.lic-tag.gai { background: var(--warn-soft); color: var(--warn); }
.gai-check h3 { margin: 0 0 12px; font-size: 16px; }
.gai-check .search-wrap { margin-bottom: 0; }
.gai-res { margin-top: 14px; padding: 14px 16px; border-radius: var(--r-sm); border: 1.5px solid; }
.gai-res b { display: block; font-size: 15px; margin-bottom: 4px; }
.gai-res p { margin: 0; font-size: 13px; line-height: 1.75; }
.gai-res.ok { background: var(--ok-soft); border-color: var(--ok); }
.gai-res.ng { background: var(--pri-soft); border-color: var(--pri); }
.gai-res.warn { background: var(--warn-soft); border-color: var(--warn); }
.gai-list { margin-top: 14px; font-size: 13px; }
.gai-list summary { cursor: pointer; color: var(--muted); font-weight: 600; }
.gai-list p { margin: 8px 0 0; line-height: 1.9; color: var(--muted); font-size: 12.5px; }
.gai-tip {
  margin: 16px 0 0; padding: 13px 16px; border-radius: var(--r-sm);
  background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  font-size: 13px; line-height: 1.8;
}
.gai-tip .ico { color: var(--warn); margin-right: 4px; }
/* 申請資格そのものに関わる注意。ヒントより強く出す */
.gai-tip.alert {
  margin: 0 0 16px; color: var(--ng);
  background: var(--ng-soft); border-color: color-mix(in srgb, var(--ng) 45%, transparent);
  font-weight: 600;
}
.gai-tip.alert .ico { color: var(--ng); }
.gai-res b .ico { margin-right: 5px; }
.gai-res.ok b .ico { color: var(--ok); }
.gai-res.ng b .ico { color: var(--pri); }
.gai-res.warn b .ico { color: var(--warn); }
.gai-steps { counter-reset: g; list-style: none; padding: 0; margin: 0; }
.gai-steps li {
  position: relative; counter-increment: g; padding: 14px 16px 14px 54px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 14px; line-height: 1.7;
}
.gai-steps li::before {
  content: counter(g); position: absolute; left: 15px; top: 13px;
  width: 26px; height: 26px; border-radius: 50%; background: var(--pri); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 800;
}
.gai-docs { display: grid; gap: 8px; }
.gai-doc {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  padding: 13px 16px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.6; transition: background .16s, border-color .16s;
}
.gai-doc input { width: 19px; height: 19px; flex: none; accent-color: var(--ok); }
.gai-doc .d-ico { font-size: 17px; flex: none; display: inline-flex; color: var(--muted); }
.gai-doc.on .d-ico { color: var(--ok); }
.gai-doc.on { background: var(--ok-soft); border-color: var(--ok); }
.gai-doc.on > span:last-child { text-decoration: line-through; opacity: .65; }
#gaiPractice { margin-top: 20px; }

/* 申込画面から規約・特商法表記へ。横に3本並べる */
.legal-links { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; }

/* 住所・電話を「請求があれば開示」で伏せているときの案内。
   表の一部ではないので、少し離して枠で囲む */
.legal-note-block {
  margin: 18px 0 0; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--pri-soft); color: var(--text);
  font-size: 12.5px; line-height: 1.75;
}

/* ---------- ホーム画面に追加のすすめ ----------
   毎日ひらく画面の一番下に置く。上に出すと学習の邪魔になり、
   閉じられたあと二度と出さない方針とも噛み合わない */
.install-card {
  display: flex; align-items: center; gap: 12px;
  margin: 28px 0 0; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
}
.install-card .install-ico { flex: none; font-size: 18px; color: var(--pri); display: flex; }
.install-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.install-txt b { font-size: 13.5px; }
.install-txt small { font-size: 12px; line-height: 1.6; color: var(--muted); }
.install-actions { flex: none; display: flex; align-items: center; gap: 6px; }
@media (max-width: 520px) {
  .install-card { align-items: flex-start; }
  .install-actions { flex-direction: column-reverse; }
}

/* ---------- 免許の取り方ガイド ----------
   2つのルートを横に並べて、費用と期間を先に読ませる。
   狭い画面では縦に積む（比較表を横スクロールさせない） */
.route-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.route-card h3 { margin: 0 0 10px; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.route-card p { margin: 8px 0 0; font-size: 13px; line-height: 1.75; }
.route-facts {
  margin: 0 0 10px; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
  font-size: 12.5px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.route-facts dt { color: var(--muted); }
.route-facts dd { margin: 0; font-weight: 700; }
.route-pro, .route-con { display: flex; gap: 6px; align-items: flex-start; }
.route-pro { color: var(--ok); }
.route-con { color: var(--warn); }
.route-pro .ico, .route-con .ico { flex: none; margin-top: 3px; }
.lic-list { margin: 8px 0 0; padding-left: 1.2em; }
.lic-list li { font-size: 13px; line-height: 1.8; margin-bottom: 4px; }

/* ---------- 書類事前チェック ----------
   質問→判定→直し方 を1枚のカードの中で完結させる。
   判定だけ別の場所に出すと、直し方を読むために画面を行き来することになり、
   予約日前夜に見る画面としては使いものにならない */
.audit-intro { display: grid; gap: 10px; }
.audit-count { margin: 0; font-size: 12.5px; color: var(--muted); font-weight: 700; }
.audit-step .progress { margin: 10px 0 18px; }
.audit-q { margin: 0 0 16px; font-size: 16.5px; line-height: 1.7; }
.audit-q .ico { color: var(--pri); margin-right: 6px; }
.audit-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.audit-opt {
  flex: 1 1 90px; padding: 13px 12px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--surface);
  font-size: 14px; font-weight: 700; color: var(--text);
  transition: background .16s, border-color .16s;
}
.audit-opt:hover { border-color: var(--pri); }
/* 選んだ答えは、その答えが意味する判定の色になる。
   「はい／いいえ」だけを塗ると、良い答えと悪い答えが同じ見た目になる */
.audit-opt.sel.ok { background: var(--ok-soft); border-color: var(--ok); }
.audit-opt.sel.warn { background: var(--warn-soft); border-color: var(--warn); }
.audit-opt.sel.block { background: var(--ng-soft); border-color: var(--ng); }
.audit-fix {
  margin: 16px 0 0; padding: 13px 16px; border-radius: var(--r-sm);
  font-size: 13px; line-height: 1.8; border: 1px solid;
}
.audit-fix b { display: block; margin-bottom: 5px; font-size: 13.5px; }
.audit-fix p { margin: 0; }
.audit-fix.ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); font-size: 12.5px; }
.audit-fix.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.audit-fix.block { background: var(--ng-soft); border-color: color-mix(in srgb, var(--ng) 45%, transparent); }
.audit-fix.warn b { color: var(--warn); }
.audit-fix.block b { color: var(--ng); }
.audit-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; }
.audit-nav button { flex: 1; }
.audit-nav button[disabled] { opacity: .4; }

.audit-head { padding: 18px 20px; border-radius: var(--r-sm); border: 1.5px solid; margin-bottom: 8px; }
.audit-head b { display: block; font-size: 17px; margin-bottom: 6px; }
.audit-head p { margin: 0; font-size: 13px; line-height: 1.8; }
.audit-head.ok { background: var(--ok-soft); border-color: var(--ok); }
.audit-head.warn { background: var(--warn-soft); border-color: var(--warn); }
.audit-head.ng { background: var(--ng-soft); border-color: var(--ng); }
.audit-head .ico { margin-right: 6px; }
.audit-list { display: grid; gap: 8px; }
.audit-row {
  padding: 14px 16px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line); border-left-width: 4px;
}
.audit-row.ng { border-left-color: var(--ng); }
.audit-row.warn { border-left-color: var(--warn); }
.audit-row.none { border-left-color: var(--line-2); }
.audit-row b { display: block; font-size: 14px; line-height: 1.65; }
.audit-row b .ico { color: var(--muted); margin-right: 6px; }
.audit-row p { margin: 7px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--muted); }
.audit-row .link-up { margin-top: 8px; }
.audit-okline { margin: 18px 0 0; font-size: 13px; color: var(--ok); font-weight: 700; }
.audit-okline .ico { margin-right: 5px; }
/* JS が無いときに出る静的な一覧（事前生成） */
.audit-static { padding-left: 20px; font-size: 13.5px; line-height: 1.8; }
.audit-static p { margin: 4px 0 12px; color: var(--muted); font-size: 12.5px; }

/* ---------- 翻訳文・期限のトラッカー ---------- */
.tracker { display: grid; gap: 16px; }
.track-count { margin: 0; font-size: 15px; font-weight: 800; color: var(--pri); }
.track-fields { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.track-field { display: grid; gap: 5px; font-size: 12.5px; color: var(--muted); font-weight: 700; }
.track-field input {
  padding: 11px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: 14px; color: var(--text); font-family: inherit;
}
.track-status { display: grid; gap: 7px; font-size: 12.5px; color: var(--muted); font-weight: 700; }
.track-status .seg { margin-bottom: 0; flex-wrap: wrap; }
.track-alerts { display: grid; gap: 8px; }
.track-al {
  margin: 0; padding: 12px 15px; border-radius: var(--r-sm);
  font-size: 13px; line-height: 1.8; border: 1px solid;
}
.track-al .ico { margin-right: 5px; }
.track-al.ng { background: var(--ng-soft); border-color: color-mix(in srgb, var(--ng) 45%, transparent); }
.track-al.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.track-al.ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.track-al.info { background: var(--surface-2); border-color: var(--line); color: var(--muted); }
.track-al.ng .ico { color: var(--ng); }
.track-al.warn .ico { color: var(--warn); }
.track-al.ok .ico { color: var(--ok); }

/* ---------- 法令用語カード ----------
   裏返すまで定義を見せないのは、読み流しを防ぐため。
   一覧で並べると「見たことがある」で終わり、思い出す練習にならない */
.card-seg { margin-bottom: 8px; }
.card-again-n { margin-left: 10px; font-size: 12.5px; color: var(--warn); font-weight: 700; }
.card-progress { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); font-weight: 700; }
.term-card { display: grid; gap: 18px; }
.card-front { text-align: center; padding: 14px 0 4px; }
.card-front b { display: block; font-size: 34px; line-height: 1.35; letter-spacing: .04em; }
.card-front .yomi { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
.card-romaji { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); font-style: italic; }
.card-back { display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; }
.card-def { margin: 0; font-size: 15px; line-height: 1.85; }
.card-key, .card-trap { padding: 13px 15px; border-radius: var(--r-sm); border: 1px solid; }
.card-key { background: var(--pri-soft); border-color: color-mix(in srgb, var(--pri) 30%, transparent); }
.card-trap { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.card-key b, .card-trap b { display: block; margin-bottom: 5px; font-size: 12.5px; }
.card-trap b { color: var(--warn); }
.card-key p, .card-trap p { margin: 0; font-size: 13px; line-height: 1.8; }
.card-vs { margin: 0; font-size: 13px; color: var(--muted); }
.card-src { margin: 0; font-size: 11.5px; color: var(--muted); opacity: .8; }
.card-actions { display: flex; gap: 10px; }
.card-actions button { flex: 1; }

/* ---------- やさしい英語の「なぜ」 ----------
   採点の解説のあとに置く。訳をやわらげるだけでは本番の文体は読めるようにならないので、
   ここが機能の本体になる */
.plain-why {
  margin: 12px 0 0; padding: 12px 15px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.85; color: var(--muted);
}
.plain-why b { display: block; margin-bottom: 4px; color: var(--text); font-size: 12.5px; }

/* ---------- 広告枠 ----------
   置き場所は各画面の末尾（content/ads.js の screens）。試験中には出さない。

   min-height を先に確保してあるのは、広告が遅れて入ったときに
   本文が下へ飛ぶのを防ぐため。読んでいる途中でレイアウトが動くと、
   直前まで見ていた行を見失う。誤クリックの原因にもなる。 */
.ad-slot {
  display: block; margin: 32px 0 8px; padding: 10px 0 0;
  border-top: 1px solid var(--line);
  min-height: 120px;
}
/* 「広告」と分かる表示。コンテンツと地続きに見せない */
.ad-label {
  display: block; margin-bottom: 8px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); opacity: .75;
}
.ad-slot .adsbygoogle { display: block; min-height: 90px; }
/* 読み込めなかったとき（オフライン・ブロッカー・審査前）は枠ごと畳む。
   空の箱と「広告」の文字だけが残るのがいちばん体裁が悪い */
.ad-slot.ad-dead { display: none; }

/* ---------- 外部プロバイダのログインボタン ----------
   Google のブランド要件に合わせて、白地・ロゴ付き・「Google でログイン」の
   文言をそのまま出す。色や文言を変えたボタンは認められていない。 */
.oauth-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin: 4px 0 0; padding: 12px 16px;
  border-radius: 999px; border: 1px solid var(--line-2);
  background: #fff; color: #1f1f1f;
  font-size: 15px; font-weight: 700; font-family: inherit;
  transition: background .16s, border-color .16s;
}
.oauth-btn:hover { background: #f6f7f9; border-color: var(--muted); }
.oauth-btn .g-mark { flex: none; display: block; }
/* 暗いテーマでも白のまま。ロゴの視認性がブランド要件に含まれる */
:root[data-theme="dark"] .oauth-btn { background: #fff; color: #1f1f1f; }

/* メールとの区切り */
.auth-or {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 12px; color: var(--muted); font-size: 12.5px;
}
.auth-or::before, .auth-or::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}

/* ---------- 並びの高さを揃える ----------
   セレクトだけ小さく見えていた。
   .mini-sel は padding 5px/6px・12.5px、隣の .ghost-btn は 8px/15px・13px で、
   同じ行に並ぶと10px以上の差が出る。セレクトは行送りがボタンと違うので、
   line-height も明示しないと揃わない。 */
.exam-head-row .mini-sel {
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.7;
  border-radius: 999px;
}

/* トップバーも同じ。アイコンボタンが 34px 固定なので、
   言語セレクトとアカウントのバッジをそれに合わせる */
.topbar-right .mini-sel,
.topbar-right .acct-btn { height: 34px; }
.topbar-right .mini-sel { line-height: 1.7; }

/* ---------- 試験タブの区切り ----------
   「本番形式の模擬試験」のカードと、その下の
   「分野別の正答率 / 受験履歴」が地続きに見えていた。
   .home-cols の前には見出しが無いので、.sec-title が持っている
   28px の間隔がどこにも入っていなかった。同じ間隔を明示して入れる。 */
.license-grid + .home-cols { margin-top: 28px; }

/* ---------- キーボード操作の見え方 ----------
   これまで :focus-visible の指定はモーダルの入力欄とフッターのリンクだけで、
   ほかは全部ブラウザ既定のリングに任せていた。outline を消してはいないので
   「見えない」わけではないが、既定のリングは配色によっては地に埋もれる。
   このアプリは暗いテーマと色つきのボタンを持つので、
   どこにいるかが常に同じ見え方になるよう自前で引く。

   :focus-visible なので、マウスで押したときには出ない（キーボードのときだけ）。 */
.nav-btn:focus-visible, .ghost-btn:focus-visible, .icon-btn:focus-visible,
.mini-sel:focus-visible, .seg-btn:focus-visible, .oauth-btn:focus-visible,
.link-up:focus-visible, .trap-more:focus-visible, .acct-btn:focus-visible,
.mode-card:focus-visible, .lic-card:focus-visible, .cat-card:focus-visible,
.ox-btn:focus-visible, .sg-choice:focus-visible, .sign-cell:focus-visible,
.audit-opt:focus-visible, .term-card:focus-visible, .tab:focus-visible,
.gai-doc:focus-within {
  outline: 2px solid var(--pri);
  outline-offset: 2px;
}

/* ---------- 触れたときの反応が無かったもの ----------
   hover が無いと、押せるものなのか読むだけのものなのか分からない。
   ox-btn は毎問さわる中心のボタンなので、とくに効く。 */
.ox-btn:hover:not(.sel):not(.locked) { border-color: var(--pri); background: var(--surface-2); }
.seg-btn:hover:not(.on) { color: var(--text); }
.gai-doc:hover:not(.on) { border-color: var(--pri); }

/* ===================================================================
   小さい画面（〜380px）
   -------------------------------------------------------------------
   対象は iPhone SE や廉価な Android の 320〜375px。
   このアプリの利用者は来日して間もない人が多く、
   高い端末を持っているとは限らない。いちばん狭い画面で
   崩れると、そこで使うのをやめられてしまう。

   既存のブレークポイントは 420px までで、それより下は
   考えられていなかった。実際、320px ではトップバーだけで
   356px 必要になり、ページ全体が横スクロールしていた。
   =================================================================== */

/* まず、どこかが少しあふれてもページ全体が横に動かないようにする。
   clip にしてあるのは、hidden だとスクロール領域が生まれて
   トップバーの position: sticky が効かなくなる環境があるため */
html, body { overflow-x: clip; }

@media (max-width: 380px) {
  /* トップバー。サービス名の文字を落とし、車輪のマークだけ残す。
     マークは押せばホームに戻るので、機能は失われない */
  .brand-txt { display: none; }
  .topbar { gap: 8px;
            padding-left: max(10px, env(safe-area-inset-left));
            padding-right: max(10px, env(safe-area-inset-right)); }
  .topbar-right { gap: 6px; }
  .mini-sel { max-width: 74px; font-size: 11.5px; }

  /* 本文の左右余白を詰める。1行に入る文字数を稼ぐほうが読みやすい */
  #app { padding-left: 12px; padding-right: 12px; }

  /* 見出しが2〜3行に折れて画面の半分を占めるのを防ぐ */
  .hero h1 { font-size: 22px; }
  .hero-tag { font-size: 14px; }
  .page-title { font-size: 20px; }

  /* 練習モードは1列にする。2列だと英語やベトナム語の見出しが
     すべて折り返して、カードの高さがばらばらになる */
  .mode-grid { grid-template-columns: 1fr; }

  /* ○✕ は指で押す面積を保ったまま、文字だけ小さくする */
  .ox-btn { padding: 12px 4px; font-size: 14px; }
  .ox-btn span { font-size: 26px; }

  /* 用語カードの見出し。駐停車禁止のような6文字でもはみ出さない */
  .card-front b { font-size: 28px; letter-spacing: .02em; }

  /* 書類チェックの選択肢。3つ並ぶと1つが極端に細くなるので、
     折り返して2段にする */
  .audit-opt { flex: 1 1 100%; }

  /* 日付の入力欄は端末側の UI が広め。1列に固定する */
  .track-fields { grid-template-columns: 1fr; }

  /* 結果画面のボタンは横に並べず縦に積む */
  .result-actions .nav-btn { min-width: 0; flex: 1 1 100%; }

  /* 試験中の見出し行。折り返したときに詰まって見えないよう間隔を足す */
  .exam-head-row { gap: 6px; row-gap: 8px; }
  .exam-head-row .ghost-btn,
  .exam-head-row .mini-sel { padding: 7px 12px; font-size: 12.5px; }
}



/* ===================================================================
   出題画面を「1画面に収める」
   -------------------------------------------------------------------
   これまではページ全体がスクロールしていたので、答えて解説が開くたびに
   「次へ / 採点する」が画面の外へ押し出され、毎問スクロールして
   ボタンを探すことになっていた。50問なら50回である。

   トップバー・見出し・操作ボタンを固定し、問題文の枠だけが内側で送られる
   形にする。ボタンは常に同じ場所にあり、指の位置を変えずに進める。

   高さは 100dvh（動的ビューポート）で取る。モバイルはアドレスバーの
   出入りで高さが変わるため、100vh だと下がはみ出す。
   =================================================================== */
body.in-exam { height: 100vh; height: 100dvh; overflow: hidden;
               display: flex; flex-direction: column; }
body.in-exam #app {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  padding-top: 12px;
}
body.in-exam #screen-exam { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.in-exam .exam-head { flex: none; }

/* 中身だけが送られる。min-height:0 が無いと flex の子は縮まない */
body.in-exam .qcard {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
/* 操作ボタンは常に下端。スクロールの影響を受けない */
body.in-exam .exam-foot { flex: none; margin-top: 12px; }
/* 1画面に収めるので、キーボードの案内は場所を譲る */
body.in-exam .kbd-hint { display: none; }

/* ---------- 前へ / 次へ / 採点する ----------
   1問ごとに押すものなので、本文より目立つ必要はない。
   3つ並んでも潰れないよう、画面幅で三段階に変える。 */
.exam-foot { display: flex; gap: 8px; }
.exam-foot .nav-btn {
  padding: 11px 14px; font-size: 14px; border-radius: 999px;
  flex: 1 1 auto; min-width: 0;
}
.exam-foot .nav-btn.finish { flex: 0 0 auto; }
/* 3つまとめて真ん中に置く。
   721px 以上ではボタンが伸びなくなる（下の min-width 130px）ので、
   余白の置きどころが要る。以前は .nav-btn.finish の margin-left:auto で
   「採点する」だけ右端へ飛ばしていた。#app は 880px あるため、
   「次へ」と「採点する」が画面の左右に分かれ、1問ごとに視線と
   マウスが横断していた。狭い画面では flex:1 1 auto で伸びきるので、
   この2行は効かないまま無害に落ちる */
.exam-foot { justify-content: center; }
.exam-foot .nav-btn.finish { margin-left: 0; }

@media (max-width: 420px) {
  .exam-foot { gap: 6px; }
  .exam-foot .nav-btn { padding: 10px 8px; font-size: 13px; gap: 4px; }
  /* 矢印を落として語だけ残す。3つ並ぶと文字のほうが先に潰れる */
  .exam-foot .nav-btn [data-icon] { display: none; }
  body.in-exam #app { padding-left: 12px; padding-right: 12px; }
  body.in-exam .qcard { padding: 16px 14px; }
}
/* 広い画面では横に伸びきらないよう上限を決める */
@media (min-width: 721px) {
  .exam-foot .nav-btn { flex: 0 1 auto; min-width: 130px; }
}

/* ---------- はじめて来た人向けの枠 ----------
   毎日ひらく画面の一番上なので、一度でも解いた人には出さない（app.js）。
   事前生成した HTML には常に入るので、検索から来た人には必ず見える。 */
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 10px; padding: 5px 12px; border-radius: 999px;
  background: var(--warn-soft); color: var(--warn);
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hero-cta .nav-btn, .hero-cta .ghost-btn { flex: 0 1 auto; }
/* 押せると分かる大きさにする。ここは1回しか押さないので本文より大きくてよい */
.hero-cta .ghost-btn { padding: 12px 18px; font-size: 14px; }
/* 特長の箇条書き。枠は中央に置きつつ、項目の中は左揃えにする。
   一行ずつ中央に寄せると、行頭が揃わず読みにくくなる */

@media (max-width: 420px) {
  /* 狭い画面では2つのボタンを縦に積む。横に並べると文字が折り返す */
  .hero-cta { gap: 8px; }
  .hero-cta .nav-btn, .hero-cta .ghost-btn { flex: 1 1 100%; justify-content: center; }
}

/* 「落ちると何を失うか」の一行。ここが読まれないと、
   受けに行く前に練習する理由が伝わらない。本文より強く出す。
   赤ではなく警告色にしてあるのは、脅すためではなく事実だから */

/* ===================================================================
   はじめて来た人向けの枠の見た目
   -------------------------------------------------------------------
   Aceternity UI のような見せ方（オーロラ・格子・ガラス）を、
   素の CSS で作る。あちらは React + Tailwind + Framer Motion が要るが、
   このアプリは依存パッケージゼロで動かしているので、
   ライブラリではなく効果のほうを持ってくる。

   文字にグラデーションはかけない。上の指定にあるとおり、
   日本語は字画が密で、文字ごとに濃さが変わって読みにくくなる。
   華やかさは背景で作り、文字はベタ塗りのまま残す。
   =================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: hidden;

  /* 画面の端から端まで伸ばす。
     #app は max-width:880px＋左右 padding で内側に寄っているので、
     左右のマージンを負にしてその枠から抜け出す。
     margin-inline を負にすると幅は自動で 100vw ぶんに広がるので、
     width は指定しない（100vw を書くと二重指定になって崩れやすい）。
     はみ出しは body の overflow-x: clip が吸収する。
     上は #app の padding-top ぶんを打ち消して、トップバーの直下に付ける */
  margin: -20px calc(50% - 50vw) 10px;

  /* 帯なので、枠線・角丸・影は付けない */
  border: 0; border-radius: 0; box-shadow: none;

  /* 中身は本文と同じ 880px 幅に収める。
     左右の padding で内側に寄せるので、横幅が狭いときは 16px まで縮む */
  padding: 34px max(16px, calc((100vw - 880px) / 2)) 30px;

  background: var(--surface);
}

/* オーロラ。ブランドの3色（藍→紫→桃）をぼかして流す。
   z-index:-2 で本文の後ろに置き、コントラストを落とさない */
.hero::before {
  content: ''; position: absolute; z-index: -2;
  inset: -45% -25% auto -25%; height: 340px;
  background:
    radial-gradient(40% 60% at 20% 40%, color-mix(in srgb, var(--pri) 40%, transparent), transparent 70%),
    radial-gradient(36% 56% at 68% 28%, color-mix(in srgb, var(--pri-2) 36%, transparent), transparent 70%),
    radial-gradient(32% 52% at 92% 62%, color-mix(in srgb, var(--hot) 26%, transparent), transparent 70%);
  filter: blur(40px);
  animation: aurora 20s var(--ease) infinite alternate;
}
@keyframes aurora {
  0%   { transform: translate3d(-4%, -2%, 0) scale(1); }
  50%  { transform: translate3d(3%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 3%, 0) scale(1.03); }
}

/* 細かい格子。上だけ見せて下へ消す（本文にかからないように） */
.hero::after {
  content: ''; position: absolute; z-index: -1; inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--line) 80%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--line) 80%, transparent) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(72% 62% at 50% 0%, #000 38%, transparent 100%);
          mask-image: radial-gradient(72% 62% at 50% 0%, #000 38%, transparent 100%);
}

/* バッジは、ブランド色の細い輪郭＋淡い塗りにして枠から浮かせる */
.hero-badge {
  background: color-mix(in srgb, var(--pri) 12%, var(--surface));
  color: var(--pri);
  border: 1px solid color-mix(in srgb, var(--pri) 30%, transparent);
  backdrop-filter: blur(6px);
}

/* 主ボタンだけ、ブランドのグラデーションを少し光らせる */
.hero-cta .nav-btn.primary { box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--pri) 70%, transparent); }

@media (max-width: 420px) {
  .hero { padding: 26px 14px 22px; margin-bottom: 8px; }
  .hero::before { height: 260px; filter: blur(32px); }
}
/* 動きを減らす設定のときは流さない（全体指定で止まるが、意図として明示する） */
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
}

/* 枠の中身を中央寄せにする。はじめて来た人に見せる1枚なので、
   説明の羅列ではなく1つの案内として読ませたい */
.hero { text-align: center; }
.hero-cta { justify-content: center; }
.hero-sub, .hero-tag { margin-left: auto; margin-right: auto; max-width: 46em; }

/* ---------- 特長の1行入れ替え ----------
   4行並べると枠が縦に伸び、「今日の学習」が下へ押し出される。
   高さを1行に固定し、4つを同じ場所に重ねて順に見せる。

   12秒で一周（1項目あたり3秒）。JS のタイマーは使わない。
   タブを裏に回したときに止まるのはブラウザ任せでよく、
   タイマーだと裏で回り続けて復帰時に飛ぶ。 */
.hero-feats {
  position: relative; display: block; margin: 16px 0 0;
  height: 1.7em; perspective: 600px;
}
.hero-feat {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 13.5px; line-height: 1.7; color: var(--muted);
  opacity: 0; transform-origin: 50% 50%;
  animation: heroFlip 12s var(--ease) infinite;
  white-space: nowrap;
}
.hero-feat .ico { color: var(--ok); flex: none; }
/* 表示 3秒 → 抜ける。上から入って下へ抜ける縦回転 */
@keyframes heroFlip {
   0%  { opacity: 0; transform: rotateX(-90deg); }
   3%  { opacity: 1; transform: rotateX(0deg); }
  22%  { opacity: 1; transform: rotateX(0deg); }
  25%  { opacity: 0; transform: rotateX(90deg); }
  100% { opacity: 0; transform: rotateX(90deg); }
}

/* 動きを減らす設定のとき。
   全体指定は animation-duration を潰すだけなので、
   そのままだと4つとも opacity:0 で消える。名前ごと外して縦に並べる */
@media (prefers-reduced-motion: reduce) {
  .hero-feats { height: auto; display: grid; gap: 6px; justify-items: center; }
  .hero-feat { animation-name: none; position: static; opacity: 1; transform: none; white-space: normal; }
}
/* 狭い画面では長い項目が入りきらないので折り返しを許す */
@media (max-width: 420px) {
  .hero-feats { height: 3.2em; }
  .hero-feat { white-space: normal; font-size: 12.5px; }
}