@charset "UTF-8";

/* ============================================================
   BARISE Console — V7 学習ツールUI
   ビジュアル正本: demo_C_tool.html（承認済みC案）
   ダーク計器盤 / 赤=進捗・現在地 / 金=達成の瞬間のみ
   ============================================================ */

:root {
  /* ---- 面と文字 ---- */
  --bg: #0E1117;                    /* 旧 #131316：純グレーの黒に青の芯を入れる */
  --panel: #161B26;                 /* 旧 #1c1c20 */
  --panel-2: #1B2130;               /* 旧 #242429 */
  --hair: rgba(163, 174, 192, .22); /* 旧 rgba(255,255,255,.08)：無色→補助色を溶かした罫 */
  --ink: #EDF1F7;                   /* 旧 #f5f5f7：16.7:1 */
  --dim: #A3AEC0;                   /* 旧 rgba(245,245,247,.55)：8.4:1 */
  --faint: #8B96A8;                 /* 旧 rgba(245,245,247,.32)＝2.6:1で基準未達 → 6.3:1 */

  /* ---- 意味を持つ色 ---- */
  --red: #E0503F;                   /* 変更なし。現在地の印・線・文字 4.9:1 */
  --red-deep: #C6412F;              /* 旧 #c0392b。白文字を載せる塗り専用 5.0:1（旧は3.9:1） */
  --gold: #E5B049;                  /* 旧 #d4a017。合格・達成のみ 9.6:1 */
  --sage: #5FBFA0;                  /* 旧 #57a58c。公式LINE導線のみ 8.5:1 */

  /* ---- 形 ---- */
  --radius-l: 14px;                 /* 旧 22px */
  --radius-m: 10px;                 /* 旧 16px */
  --radius-s: 10px;                 /* 旧 13px */

  /* ---- 影：暗背景で不可視な外側の影を廃し、効いている1pxだけ残す ---- */
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, .05);  /* 旧 0 20px 50px rgba(0,0,0,.35) ＋ inset */
  --shadow-soft: none;                                     /* 旧 0 12px 30px rgba(0,0,0,.28) */

  /* ---- 追加（2つだけ） ---- */
  --line-ui: rgba(163, 174, 192, .42); /* 操作できるものの輪郭 3.1:1（WCAG 1.4.11） */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans JP", sans-serif;
  font-feature-settings: "palt";
  -webkit-text-size-adjust: 100%; /* フォント自動拡大を無効化（ピンチズームは殺さない） */
  text-size-adjust: 100%;
}

/* 入力欄はフォント16px以上を保証し、iOS Safariのフォーカス時自動ズームを抑止する。
   viewportの user-scalable=no / maximum-scale=1 は使わない＝ピンチズームは生かす。 */
input,
textarea,
select {
  font-size: 16px;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

:focus-visible {
  outline: 2px solid rgba(224, 80, 63, .8);
  outline-offset: 2px;
}

/* スクロール先セクションへのプログラムフォーカスは枠を出さない */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
  outline: none;
}

/* ============================================================
   ステージ（430px計器盤カラム）
   ============================================================ */

.app-shell {
  min-height: 100svh;
  overflow-x: clip;
}

.stage {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100svh;
  padding: 0 20px calc(34px + env(safe-area-inset-bottom));
  position: relative;
}

/* 画面遷移: 横スライド+フェード .38s */
@keyframes screenIn {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes screenInBack {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

.stage[data-enter="fwd"] { animation: screenIn .38s cubic-bezier(.22, .8, .3, 1) both; }
.stage[data-enter="back"] { animation: screenInBack .38s cubic-bezier(.22, .8, .3, 1) both; }

/* カードの立ち上がり */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

.rise { animation: riseIn .7s cubic-bezier(.16, .8, .3, 1) both; }
.rise-1 { animation-delay: .08s; }
.rise-2 { animation-delay: .16s; }
.rise-3 { animation-delay: .24s; }
.rise-4 { animation-delay: .32s; }

/* ============================================================
   共通ヘッダー
   ============================================================ */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top)) 0 14px;
}

.brand-img {
  display: block;
  width: 108px;
  height: auto;
}

.top-sub {
  font-size: 11px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  text-align: right;
  line-height: 1.5;
}

.back {
  background: var(--panel);
  border: 1px solid var(--hair);
  color: var(--ink);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 14px;
  transition: transform .12s ease;
}

.back:active { transform: scale(.95); }

/* タブナビ（ホーム/学習/ワーク） */
.tabbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 16px;
}

.tabbar a {
  flex: 0 0 auto;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--dim);
  transition: transform .12s ease;
}

.tabbar a:active { transform: scale(.95); }

.tabbar a[aria-current="page"] {
  color: #fff;
  border-color: rgba(224, 80, 63, .55);
  background: linear-gradient(180deg, rgba(224, 80, 63, .22), rgba(192, 57, 43, .16));
}

.tabbar .tab-spacer { flex: 1; }

.text-button {
  background: none;
  border: 0;
  color: var(--faint);
  font-size: 11px;
  font-weight: 500;
  padding: 6px 2px;
}

.text-button:active { color: var(--dim); }

/* ============================================================
   ローディング / エラー
   ============================================================ */

.loading-screen {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: var(--dim);
  font-size: 12.5px;
  letter-spacing: .1em;
}

.loading-ring {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 3px solid rgba(255, 255, 255, .08);
  border-top-color: var(--red);
  animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   ログイン
   ============================================================ */

.login-screen {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100svh;
  padding: calc(60px + env(safe-area-inset-top)) 24px calc(40px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation: fadeIn .8s ease both;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.login-brand {
  display: block;
  width: 170px;
  margin: 0 auto 10px;
}

.login-tag {
  text-align: center;
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--faint);
  margin-bottom: 34px;
}

.login-panel {
  background: linear-gradient(170deg, var(--panel), #18181c);
  border: 1px solid var(--hair);
  border-radius: var(--radius-l);
  padding: 26px 22px;
  box-shadow: var(--shadow-card);
}

.login-panel .eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--red);
}

.login-panel h1 {
  font-size: 24px;
  font-weight: 900;
  margin: 8px 0 6px;
}

.login-panel .lead {
  font-size: 12px;
  color: var(--dim);
  line-height: 1.9;
  margin-bottom: 18px;
}

.login-form label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--dim);
  margin-bottom: 6px;
}

.login-form input {
  width: 100%;
  min-height: 50px;
  background: #131316;
  color: var(--ink);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 16px; /* iOS Safariの自動ズーム抑止（16px未満だとフォーカス時に拡大される） */
  outline: none;
}

.login-form input:focus {
  border-color: rgba(224, 80, 63, .6);
  box-shadow: 0 0 0 3px rgba(224, 80, 63, .16);
}

/* ---- C10: login progress ---------------------------------- */
#login-form button[type="submit"][aria-busy="true"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: wait;
}
#login-form button[type="submit"][aria-busy="true"]::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .8s linear infinite !important;
}
/* ---- C10 end ----------------------------------------------- */

.login-support-note {
  margin-top: 14px;
  font-size: 11px;
  color: var(--faint);
  text-align: center;
  line-height: 1.8;
}

/* ============================================================
   ボタン
   ============================================================ */

.primary-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  margin-top: 14px;
  background: linear-gradient(180deg, #e0503f, var(--red-deep));
  border: 0;
  border-radius: 14px;
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(192, 57, 43, .35);
  transition: transform .13s ease, opacity .13s ease;
}

.primary-button:active { transform: scale(.97); }

.primary-button:disabled,
.primary-button.is-loading {
  opacity: .6;
  pointer-events: none;
}

.ghost-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 14px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  transition: transform .13s ease;
}

.ghost-button:active { transform: scale(.97); background: var(--panel-2); }

.line-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
  background: rgba(87, 165, 140, .12);
  border: 1px solid rgba(87, 165, 140, .4);
  border-radius: 14px;
  color: var(--sage);
  font-size: 13px;
  font-weight: 700;
  transition: transform .13s ease;
}

.line-button:active { transform: scale(.97); }

.text-link {
  color: var(--dim);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* フォームエラー */
.form-error {
  margin-top: 10px;
  background: rgba(224, 80, 63, .12);
  border: 1px solid rgba(224, 80, 63, .4);
  border-radius: 12px;
  color: #f2a99f;
  font-size: 12px;
  line-height: 1.8;
  padding: 10px 14px;
}

/* ============================================================
   ホーム: 挨拶・標高リングカード
   ============================================================ */

.greet {
  font-size: 12px;
  color: var(--dim);
  margin: 4px 0 16px;
}

.greet b { color: var(--ink); }

.gauge-card {
  background: linear-gradient(170deg, var(--panel), #18181c);
  border: 1px solid var(--hair);
  border-radius: var(--radius-l);
  padding: 22px 20px;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  align-items: center;
  box-shadow: var(--shadow-card);
}

.ring-wrap {
  position: relative;
  width: 150px;
  height: 150px;
}

.ring-wrap svg { transform: rotate(-90deg); display: block; }

.ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, .07);
  stroke-width: 11;
}

.ring-fg {
  fill: none;
  stroke: url(#ringGrad);
  stroke-width: 11;
  stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgba(224, 80, 63, .55));
}

.ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ring-center b {
  font-size: 47px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -.01em;
}

.ring-center b small {
  font-size: 17px;
  color: var(--red);
}

.ring-center > span {
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--faint);
  margin-top: 6px;
}

.ring-center b span {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
}

.gauge-stats { display: grid; gap: 12px; }

.gs {
  border-left: 2px solid var(--hair);
  padding-left: 12px;
}

.gs b {
  display: block;
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.gs b em {
  font-style: normal;
  font-size: 11px;
  color: var(--faint);
  font-weight: 500;
}

.gs small {
  font-size: 9.5px;
  letter-spacing: .14em;
  color: var(--faint);
}

.gs.hot { border-left-color: var(--gold); }
.gs.hot b { color: var(--gold); }

/* ============================================================
   今日の一歩カード
   ============================================================ */

.today2 {
  margin-top: 14px;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--radius-l);
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
}

.today2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--red), var(--red-deep));
}

.t2-k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--red);
}

.today2 h2 {
  font-size: 22px;
  font-weight: 900;
  margin: 8px 0 4px;
  line-height: 1.4;
}

.today2 .t2-sub {
  font-size: 11.5px;
  color: var(--dim);
  line-height: 1.8;
}

.t2-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  width: 100%;
  min-height: 52px;
  background: linear-gradient(180deg, #e0503f, var(--red-deep));
  border: 0;
  border-radius: 14px;
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(192, 57, 43, .35);
  transition: transform .13s ease;
}

.t2-btn:active { transform: scale(.97); }

/* ============================================================
   CHAPTERS 章リスト
   ============================================================ */

.ch-list { margin-top: 22px; }

.ch-h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--faint);
  margin-bottom: 10px;
}

.ch-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--radius-m);
  padding: 14px 16px;
  margin-bottom: 8px;
  transition: transform .13s ease, background .13s ease;
}

a.ch-row { display: grid; }

.ch-row:active { transform: scale(.98); background: var(--panel-2); }

.ch-row.is-locked { opacity: .55; }
.ch-row.is-locked:active { transform: none; background: var(--panel); }

.ch-row b {
  grid-column: 1;
  grid-row: 1;
  font-size: 14px;
  font-weight: 700;
}

.ch-row b .no {
  color: var(--faint);
  font-weight: 800;
  margin-right: 8px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.ch-mini {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
}

.ch-mini .mbar {
  flex: 1;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.ch-mini .mbar span {
  display: block;
  height: 100%;
  background: var(--red);
  border-radius: inherit;
}

.ch-mini em {
  font-style: normal;
  font-size: 10.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.ch-state {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  font-size: 11px;
  font-weight: 700;
  color: var(--dim);
  white-space: nowrap;
}

.ch-state.done { color: var(--gold); }
.ch-state.here { color: var(--red); }
.ch-state.lock { color: var(--faint); }

/* 「いまここ」の波紋（常時アニメはこれのみ） */
.here-dot {
  display: inline-block;
  position: relative;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  vertical-align: 1px;
}

.here-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--red);
}

.here-dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  border: 1.5px solid var(--red);
  opacity: 0;
  animation: ripple 2.2s ease-out infinite;
}

@keyframes ripple {
  0% { transform: scale(.6); opacity: .7; }
  70% { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* ============================================================
   学習一覧: 章グループ + レッスン行
   ============================================================ */

.page-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--red);
  margin-top: 4px;
}

.page-title {
  font-size: 26px;
  font-weight: 900;
  margin: 6px 0 4px;
}

.page-lead {
  font-size: 11.5px;
  color: var(--dim);
  line-height: 1.9;
  margin-bottom: 18px;
}

.phase-group { margin-bottom: 22px; }

.phase-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 2px 10px;
}

.phase-head .ph-title { font-size: 15px; font-weight: 900; }

.phase-head .ph-title .no {
  color: var(--faint);
  font-weight: 800;
  margin-right: 8px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.phase-head .ph-count {
  font-size: 10.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.phase-head .ph-count.done { color: var(--gold); }

.phase-locked-note {
  background: var(--panel);
  border: 1px dashed var(--hair);
  border-radius: var(--radius-m);
  padding: 14px 16px;
  font-size: 11.5px;
  color: var(--faint);
  line-height: 1.8;
}

.ls-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: var(--radius-m);
  padding: 13px 16px;
  margin-bottom: 8px;
  transition: transform .13s ease, background .13s ease;
}

a.ls-row:active { transform: scale(.98); background: var(--panel-2); }

.ls-row.is-current { border-color: rgba(224, 80, 63, .45); }
.ls-row.is-locked { opacity: .55; }

.ls-row .ls-id {
  grid-column: 1;
  grid-row: 1;
  font-size: 10px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}

.ls-row h4 {
  grid-column: 1;
  grid-row: 2;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
}

.ls-row .ls-sub {
  grid-column: 1;
  grid-row: 3;
  font-size: 10.5px;
  color: var(--faint);
  margin-top: 4px;
}

.ls-side {
  grid-column: 2;
  grid-row: 1 / span 3;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.ls-state {
  font-size: 11px;
  font-weight: 700;
  color: var(--dim);
  white-space: nowrap;
}

.ls-state.done { color: var(--gold); }
.ls-state.here { color: var(--red); }
.ls-state.watched { color: var(--sage); }
.ls-state.lock { color: var(--faint); }

.ls-cta {
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #e0503f, var(--red-deep));
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}

.ls-cta--calm {
  background: var(--panel-2);
  border: 1px solid var(--hair);
  color: var(--dim);
}

/* ============================================================
   レッスン画面
   ============================================================ */

.lesson-title { margin: 6px 0 16px; }

.lesson-title .lt-k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .26em;
  color: var(--red);
}

.lesson-title h1 {
  font-size: 26px;
  font-weight: 900;
  margin-top: 6px;
  line-height: 1.4;
}

.lesson-title .lt-sub {
  font-size: 11.5px;
  color: var(--dim);
  margin-top: 6px;
  line-height: 1.8;
}

.video2 {
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(circle at 70% 20%, rgba(224, 80, 63, .25), transparent 55%),
    linear-gradient(150deg, #2a2a30, #1a1a1e);
  border: 1px solid var(--hair);
  display: flex;
  align-items: center;
  justify-content: center;
}

.video2 iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video2 .video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--dim);
  font-size: 12px;
}

.video2 .video-placeholder span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 17px;
  padding-left: 4px;
}

.watch-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 2px 4px;
  font-size: 11.5px;
  color: var(--sage);
  font-weight: 700;
}

.watch-note i { font-style: normal; }

.watch-button {
  margin-top: 12px;
}

.watch-button:disabled {
  background: var(--panel-2);
  color: var(--sage);
  box-shadow: none;
  opacity: 1;
  pointer-events: none;
  border: 1px solid rgba(87, 165, 140, .35);
}

/* パネル（ミニワーク・本ワーク・共通） */
.mini-panel {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: 18px;
  margin-top: 18px;
}

.mini-panel .mp-k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.mini-panel h3 {
  font-size: 16.5px;
  font-weight: 700;
  margin: 8px 0 6px;
  line-height: 1.6;
}

.mini-panel .mp-hint {
  font-size: 11px;
  color: var(--faint);
  line-height: 1.8;
  margin-bottom: 12px;
}

.mini-panel .mp-callout {
  background: #131316;
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 11.5px;
  color: var(--dim);
  line-height: 1.8;
  margin-bottom: 12px;
}

.mini-panel .mp-callout span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--faint);
  margin-bottom: 2px;
}

textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  background: #131316;
  color: var(--ink);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 12px;
  font-size: 16px; /* iOS Safariの自動ズーム抑止（16px未満だとフォーカス時に拡大され、確認後もズームが残る） */
  line-height: 1.8;
  outline: none;
  font-family: inherit;
}

textarea:focus {
  border-color: rgba(224, 80, 63, .6);
  box-shadow: 0 0 0 3px rgba(224, 80, 63, .16);
}

textarea[aria-invalid="true"] { border-color: rgba(224, 80, 63, .7); }

.field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--dim);
  margin: 12px 0 6px;
}

.submit2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  width: 100%;
  min-height: 52px;
  background: linear-gradient(180deg, #e0503f, var(--red-deep));
  border: 0;
  border-radius: var(--radius-s);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  transition: transform .13s ease, opacity .13s ease;
}

.submit2:active { transform: scale(.97); }

.submit2:disabled,
.submit2.is-loading { opacity: .6; pointer-events: none; }

.submission-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 10.5px;
  color: var(--faint);
}

/* このレッスンで学ぶこと（details・下部） */
.learn-details {
  margin-top: 18px;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 20px;
  overflow: hidden;
}

.learn-details summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.learn-details summary::-webkit-details-marker { display: none; }

.learn-details summary small {
  font-size: 11px;
  font-weight: 700;
  color: var(--faint);
}

.learn-details[open] summary small.closed-label { display: none; }
.learn-details:not([open]) summary small.open-label { display: none; }

.learn-details .ld-body {
  padding: 0 18px 18px;
  display: grid;
  gap: 12px;
}

.learn-details .ld-item span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--red);
  margin-bottom: 2px;
}

.learn-details .ld-item p,
.learn-details .ld-item ul {
  font-size: 12px;
  color: var(--dim);
  line-height: 1.9;
}

.learn-details .ld-item ul { padding-left: 18px; }

/* レッスン下部ナビ */
.lesson-nav { margin-top: 20px; }

.locked-next-note {
  display: block;
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--faint);
  text-align: center;
  line-height: 1.8;
}

/* ステータスバッジ */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: var(--panel-2);
  color: var(--dim);
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 10px;
  white-space: nowrap;
  letter-spacing: .04em;
}

.status-badge[data-tone="positive"] {
  color: var(--sage);
  border-color: rgba(87, 165, 140, .4);
  background: rgba(87, 165, 140, .1);
}

.status-badge[data-tone="attention"] {
  color: #f0a292;
  border-color: rgba(224, 80, 63, .4);
  background: rgba(224, 80, 63, .1);
}

.status-badge[data-tone="pending"] {
  color: var(--dim);
  border-color: var(--hair);
}

.status-badge[data-tone="support"] {
  color: #b9b3e0;
  border-color: rgba(140, 130, 220, .4);
  background: rgba(140, 130, 220, .1);
}

.status-badge[data-tone="gold"] {
  color: var(--gold);
  border-color: rgba(212, 160, 23, .45);
  background: rgba(212, 160, 23, .08);
}

/* メタチップ */
.meta-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 2px;
}

.meta-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: var(--panel-2);
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
}

.meta-chip small {
  color: var(--faint);
  font-size: 10px;
}

.meta-chip strong { font-weight: 700; color: var(--dim); }

/* 評価結果カード（インライン再訪時） */
.evaluation-card {
  margin-top: 14px;
  background: linear-gradient(170deg, var(--panel), #18181c);
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: 18px;
  box-shadow: var(--shadow-soft);
}

.evaluation-card[data-result="good"] { border-color: rgba(212, 160, 23, .35); }

.evaluation-card .ev-k {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--red);
}

.evaluation-card .ev-score {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 10px 0 4px;
}

.evaluation-card .ev-score strong {
  font-size: 34px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.evaluation-card .ev-score small {
  font-size: 10.5px;
  color: var(--faint);
}

.evaluation-card[data-result="good"] .ev-score strong { color: var(--gold); }

.evaluation-card .ev-help {
  font-size: 11.5px;
  color: var(--dim);
  line-height: 1.8;
  margin-bottom: 10px;
}

.evaluation-card .ev-cols { display: grid; gap: 10px; }

.evaluation-card .ev-cols h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--faint);
  margin-bottom: 4px;
}

.evaluation-card .ev-cols ul {
  padding-left: 18px;
  font-size: 12px;
  color: var(--dim);
  line-height: 1.9;
}

.evaluation-card .ev-cols .ev-additional-questions {
  list-style: none;
  border-left: 2px solid var(--line-ui);
  padding-left: 12px;
  margin-bottom: 8px;
}

.evaluation-card .ev-additional-questions li + li { margin-top: 6px; }

.evaluation-card .ev-next {
  margin-top: 12px;
  background: #131316;
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 12px 14px;
}

.evaluation-card .ev-next span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--faint);
}

.evaluation-card .ev-next strong,
.evaluation-card .ev-next h4 {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-top: 2px;
}

.evaluation-card .ev-next p {
  font-size: 11.5px;
  color: var(--dim);
  margin-top: 4px;
  line-height: 1.8;
}

.evaluation-card .ev-next .ghost-button { margin-top: 10px; }

/* ============================================================
   ワーク一覧・AIワーク
   ============================================================ */

.work-card {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: 18px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-soft);
}

.work-card--featured {
  background: linear-gradient(170deg, var(--panel), #18181c);
  border-color: rgba(224, 80, 63, .35);
  position: relative;
  overflow: hidden;
}

.work-card--featured::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--red), var(--red-deep));
}

.work-card .wc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 10.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.work-card h3 {
  font-size: 16px;
  font-weight: 900;
  margin: 8px 0 4px;
  line-height: 1.5;
}

.work-card .wc-desc {
  font-size: 11.5px;
  color: var(--dim);
  line-height: 1.8;
}

.work-card .wc-meta {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--dim);
}

.work-card .wc-meta div { display: flex; gap: 8px; }

.work-card .wc-meta dt {
  flex: 0 0 3.2em;
  color: var(--faint);
  font-weight: 700;
}

.work-card .wc-meta dd { margin: 0; }

.works-section { margin-bottom: 20px; }

.works-section > details > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 2px 10px;
}

.works-section > details > summary::-webkit-details-marker { display: none; }

.sec-h {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
}

.sec-h-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 2px 10px;
}

.sec-count {
  font-size: 10.5px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.empty-note {
  font-size: 11.5px;
  color: var(--faint);
  padding: 8px 2px;
  line-height: 1.8;
}

/* ホーム：クリア済みワーク（閲覧専用） */
.cleared-works { margin: 18px 0 20px; }

.cleared-work-card {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 16px;
  margin-bottom: 10px;
  overflow: hidden;
}

.cleared-work-card > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 14px 16px;
}

.cleared-work-card > summary::-webkit-details-marker { display: none; }

.cleared-work-card > summary::after {
  content: "＋";
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--faint);
  font-size: 18px;
}

.cleared-work-card[open] > summary::after { content: "−"; }

.cleared-work-meta {
  grid-column: 1;
  font-size: 10px;
  color: var(--faint);
  letter-spacing: .06em;
}

.cleared-work-card > summary strong {
  grid-column: 1;
  font-size: 13px;
  line-height: 1.5;
}

.cleared-work-result {
  grid-column: 1;
  font-size: 10.5px;
  color: var(--gold);
}

.cleared-work-body {
  border-top: 1px solid var(--hair);
  padding: 14px 16px 16px;
  display: grid;
  gap: 14px;
}

.cleared-work-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 9px 13px;
  border: 1px solid rgba(212, 160, 23, .36);
  border-radius: 999px;
  color: var(--gold);
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
}

.cleared-work-link:hover,
.cleared-work-link:focus-visible {
  border-color: var(--gold);
  background: rgba(212, 160, 23, .08);
}

.cleared-work-body h3 {
  font-size: 11px;
  color: var(--faint);
  letter-spacing: .08em;
  margin-bottom: 4px;
}

.cleared-work-body ol,
.cleared-work-body ul {
  padding-left: 18px;
  font-size: 11.5px;
  color: var(--dim);
  line-height: 1.9;
}

.cleared-work-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 11.5px;
  color: var(--dim);
  line-height: 1.9;
}

.cleared-work-judgement {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 10.5px;
}

.cleared-work-judgement div { display: flex; gap: 5px; }
.cleared-work-judgement dt { color: var(--faint); }
.cleared-work-judgement dd { color: var(--ink); margin: 0; }

.cleared-work-feedback {
  background: #131316;
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 12px 14px;
}

.cleared-work-feedback > p,
.cleared-work-feedback li {
  font-size: 11.5px;
  color: var(--dim);
  line-height: 1.9;
}

.cleared-work-feedback > div + div { margin-top: 8px; }

.cleared-work-feedback h4 {
  font-size: 10.5px;
  color: var(--faint);
  margin-bottom: 2px;
}

/* AIワーク詳細 */
.ai-panel {
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: 18px;
  margin-top: 14px;
}

.ai-panel > .ap-k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ai-panel h3 {
  font-size: 14.5px;
  font-weight: 700;
  margin: 8px 0 6px;
  line-height: 1.6;
}

.ai-panel p { font-size: 12px; color: var(--dim); line-height: 1.9; }

.ai-panel ol,
.ai-panel ul {
  padding-left: 18px;
  font-size: 12px;
  color: var(--dim);
  line-height: 1.9;
}

.ai-context-grid { display: grid; gap: 10px; margin-top: 12px; }

.ai-context-grid article {
  background: #131316;
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 10px 14px;
}

.ai-context-grid article span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--faint);
  margin-bottom: 2px;
}

.ai-context-grid article p {
  font-size: 11.5px;
  color: var(--dim);
  line-height: 1.8;
}

.ai-guidance {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.ai-guidance p {
  font-size: 11.5px;
  color: var(--dim);
  line-height: 1.8;
  padding-left: 14px;
  position: relative;
}

.ai-guidance p::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 6px;
  height: 2px;
  background: var(--red);
  border-radius: 2px;
}

.ai-prompt-box {
  background: linear-gradient(170deg, var(--panel-2), #1e1e23);
  border: 1px solid rgba(224, 80, 63, .3);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
}

.ai-prompt-box > span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .26em;
  color: var(--red);
}

.ai-prompt-box > strong {
  display: block;
  font-size: 15px;
  font-weight: 900;
  margin: 6px 0 4px;
  line-height: 1.5;
}

.ai-prompt-box > p {
  font-size: 11.5px;
  color: var(--dim);
  line-height: 1.8;
}

.ai-prompt-box .apb-block {
  margin-top: 12px;
  background: rgba(19, 19, 22, .6);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 10px 14px;
}

.ai-prompt-box .apb-block > span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--faint);
  margin-bottom: 4px;
}

.ai-prompt-box .apb-block ol,
.ai-prompt-box .apb-block ul {
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.9;
  color: var(--ink);
}

.ai-prompt-box .apb-block dl { display: grid; gap: 6px; }

.ai-prompt-box .apb-block dl div { font-size: 11.5px; }

.ai-prompt-box .apb-block dt {
  color: var(--faint);
  font-weight: 700;
  font-size: 10.5px;
}

.ai-prompt-box .apb-block dd {
  margin: 0;
  color: var(--dim);
  line-height: 1.8;
}

.ai-prompt-box details summary {
  list-style: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: var(--dim);
}

.ai-prompt-box details summary::-webkit-details-marker { display: none; }

.ai-block {
  background: #131316;
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.ai-block > span,
.ai-block h4 {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--faint);
  margin-bottom: 4px;
}

.ai-block p,
.ai-block ol,
.ai-block ul {
  font-size: 12px;
  color: var(--dim);
  line-height: 1.9;
}

.ai-block ol,
.ai-block ul { padding-left: 18px; }

.ai-block--focus { border-color: rgba(224, 80, 63, .4); }

.ai-block--gold { border-color: rgba(212, 160, 23, .4); }

.ai-summary-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.ai-summary-head strong {
  font-size: 16px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.ai-summary-head em {
  font-style: normal;
  font-size: 11px;
  color: var(--dim);
  font-weight: 700;
}

.ai-details {
  margin-top: 8px;
}

.ai-details summary {
  list-style: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: var(--dim);
  padding: 4px 0;
}

.ai-details summary::-webkit-details-marker { display: none; }

.ai-work-achievement strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

.ai-work-latest-result {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(212, 160, 23, .1);
  font-size: 12px;
  font-weight: 800;
}

.ai-work-attempts {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.ai-work-attempts > h3 {
  margin: 0;
  font-size: 14px;
}

.ai-work-attempt {
  margin: 0;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
}

.ai-work-attempt > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  padding: 12px;
}

.ai-work-attempt > summary span,
.ai-work-attempt > summary strong {
  overflow-wrap: anywhere;
}

.ai-work-attempt-body {
  padding: 0 12px 12px;
  min-width: 0;
}

.ai-work-attempt-body > h4 { margin: 8px 0 4px; }
.ai-work-attempt-body .multiline-text { overflow-wrap: anywhere; }
.ai-work-reattempt { margin-top: 12px; }

.ai-evaluation-detail-grid {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.ai-evaluation-detail-grid section + section {
  border-top: 1px solid var(--hair);
  padding-top: 8px;
}

.ai-history article {
  border-top: 1px solid var(--hair);
  padding: 8px 0;
}

.ai-history article span {
  font-size: 10px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.ai-history article p {
  font-size: 11.5px;
  color: var(--dim);
  line-height: 1.8;
}

.multiline-text { white-space: pre-line; }

/* ============================================================
   AI採点オーバーレイ ★体験の心臓部
   ============================================================ */

.judge {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(12, 12, 14, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: none;
  align-items: center;
  justify-content: center;
}

.judge.on { display: flex; }

.judge-in {
  text-align: center;
  padding: 0 30px;
  max-width: 430px;
  width: 100%;
  max-height: 100svh;
  overflow-y: auto;
  padding-top: 24px;
  padding-bottom: 24px;
}

.thinking {
  font-size: 12.5px;
  color: var(--dim);
  letter-spacing: .1em;
}

.thinking .dots i {
  font-style: normal;
  animation: blink 1.2s infinite;
}

.thinking .dots i:nth-child(2) { animation-delay: .2s; }
.thinking .dots i:nth-child(3) { animation-delay: .4s; }

@keyframes blink {
  0%, 100% { opacity: .2; }
  50% { opacity: 1; }
}

.judge-ring {
  position: relative;
  width: 190px;
  height: 190px;
  margin: 0 auto 20px;
}

.judge-ring svg { transform: rotate(-90deg); display: block; }

.jr-bg {
  fill: none;
  stroke: rgba(255, 255, 255, .08);
  stroke-width: 10;
}

.jr-fg {
  fill: none;
  stroke: url(#judgeGrad);
  stroke-width: 10;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(224, 80, 63, .5));
}

.judge-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.judge-center b {
  font-size: 52px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.judge-center span {
  font-size: 10px;
  letter-spacing: .26em;
  color: var(--faint);
  margin-top: 6px;
}

.judge-stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid rgba(212, 160, 23, .65);
  color: var(--gold);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2em;
  opacity: 0;
  transform: scale(.8);
  box-shadow: 0 0 30px rgba(212, 160, 23, .2), inset 0 0 16px rgba(212, 160, 23, .1);
}

.judge-fb {
  margin-top: 18px;
  font-size: 12px;
  line-height: 2;
  color: var(--dim);
  opacity: 0;
  white-space: pre-line;
}

.judge-next {
  margin-top: 22px;
  min-height: 52px;
  padding: 0 34px;
  background: linear-gradient(180deg, #e0503f, var(--red-deep));
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(10px);
  transition: transform .13s ease;
}

.judge-next:active { transform: scale(.96); }

.spark {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.spark i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--gold);
  opacity: 0;
  animation: fly var(--d, 1s) cubic-bezier(.15, .6, .3, 1) forwards;
}

@keyframes fly {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1); }
}

/* ============================================================
   トースト
   ============================================================ */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  transform: translate(-50%, 80px);
  z-index: 120;
  background: var(--panel-2);
  border: 1px solid var(--hair);
  color: var(--ink);
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 12.5px;
  font-weight: 700;
  opacity: 0;
  transition: all .4s cubic-bezier(.2, .9, .3, 1.1);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  max-width: min(90vw, 400px);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.toast.on {
  transform: translate(-50%, 0);
  opacity: 1;
}

.toast .g { color: var(--gold); }

/* ============================================================
   その他
   ============================================================ */

/* ---- C8: bounded row entry -------------------------------- */
/* Containers and route nodes stay visible; only row content enters. */
.d-live .stage.d-route-static,
.d-live .phase-group.d-route-static { animation: none; }
.d-live .route > .ls-row[style*="--row-entry"] > *,
.d-live .quiz-question[style*="--row-entry"] > * {
  animation-name: var(--row-entry, none);
  animation-duration: .3s;
  animation-timing-function: var(--ease-out);
  animation-delay: var(--d, 0ms);
  animation-fill-mode: backwards;
}
@keyframes dRowEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
/* ---- C8 end ------------------------------------------------ */

/* ---- C12: frame entry (route rows / cleared works) -------- */
/* v2.5: 行の箱・背景・節点ごと入場する。中身だけの入場（C8）は行では止める。 */
.d-live .route > .ls-row[style*="--row-entry"] > * { animation: none; }
.d-live .route > .ls-row[style*="--row-entry:dRowEnter"],
.d-live .cleared-works > .cleared-work-card[style*="--row-entry:dRowEnter"] {
  animation: dRowFrame .3s var(--ease-out) var(--d, 0ms) backwards;
}
/* toを書かない：終了値は各行の元の値（解放待ちの .55 など）に戻る */
@keyframes dRowFrame {
  from { opacity: 0; transform: translateY(8px); }
}
html[data-motion="off"] .d-live .route > .ls-row[style*="--row-entry"],
html[data-motion="off"] .d-live .cleared-works > .cleared-work-card[style*="--row-entry"] {
  animation: none !important;
}
/* ---- C12 end ----------------------------------------------- */

.page-foot {
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* B-022: 動画後の○×テスト */
.quiz-panel { scroll-margin-top: 24px; }

.quiz-question-list,
.quiz-explanation-list {
  display: grid;
  gap: 14px;
  margin: 18px 0;
  padding-left: 24px;
}

.quiz-question,
.quiz-explanation-list li {
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}

.quiz-question > p { margin: 0 0 12px; line-height: 1.75; }
.quiz-question > p > span { display: inline-block; margin-right: 8px; color: var(--green); font-weight: 700; }
.quiz-question fieldset { display: flex; gap: 10px; margin: 0; padding: 0; border: 0; }
.quiz-question label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 76px;
  padding: 9px 14px;
  border: 1px solid var(--line-ui);
  border-radius: 999px;
  cursor: pointer;
}

.quiz-submit-button[disabled] { cursor: not-allowed; opacity: .48; }
.quiz-result { margin-top: 18px; padding: 18px; border-radius: 14px; background: transparent; color: var(--ink); border: 1px solid var(--hair); }
.quiz-result-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.quiz-result-head strong { font-size: 1.2rem; }
.quiz-explanation-list li.is-correct { border-left: 4px solid #2f7d57; }
.quiz-explanation-list li.is-wrong { border-left: 4px solid #b25b45; }
.quiz-explanation-list p { margin: 8px 0 0; line-height: 1.7; }
.quiz-retry { margin-top: 16px; }
.quiz-retry > summary { cursor: pointer; font-weight: 700; }

/* ---- C7: quiz dark integration ---------------------------- */
.d-live .quiz-question,
.d-live .quiz-explanation-list li,
.d-live .quiz-result {
  background: var(--bg);
  color: var(--ink);
  box-shadow: none;
}
.d-live .quiz-question,
.d-live .quiz-explanation-list li {
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  padding: 14px 0;
}
.d-live .quiz-question-list,
.d-live .quiz-explanation-list { color: var(--ink); }
.d-live .quiz-question > p,
.d-live .quiz-question > p > span { color: var(--ink); }
.d-live .quiz-question > p { line-height: 1.75; }
.d-live .quiz-question fieldset {
  display: flex;
  gap: 0;
  max-width: 220px;
  border: 1px solid var(--line-ui);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
}
.d-live .quiz-question label {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  justify-content: center;
  margin: 0;
  padding: 9px 14px;
  border: 0;
  border-radius: 0;
  background: var(--bg);
  color: var(--ink);
}
.d-live .quiz-question label + label { border-left: 1px solid var(--line-ui); }
.d-live .quiz-question label.is-selected {
  font-weight: 700;
  box-shadow: inset 0 0 0 2px var(--ink);
}
.d-live .quiz-question label:focus-within {
  outline: 2px solid var(--ink);
  outline-offset: -3px;
}
.d-live .quiz-question input[type="radio"] { accent-color: var(--ink); }
.d-live .quiz-result { border: 1px solid var(--hair); }
.d-live .quiz-result-head,
.d-live .quiz-explanation-list strong,
.d-live .quiz-explanation-list p { color: var(--ink); }
.d-live .quiz-explanation-list li.is-correct {
  border-left: 4px solid var(--gold);
  padding-left: 12px;
}
.d-live .quiz-explanation-list li.is-wrong {
  border-left: 4px solid var(--red);
  padding-left: 12px;
}
/* ---- C7 end ------------------------------------------------ */

/* ---- C13: quiz fixes (v2.5) -------------------------------- */
/* c: 既存の <legend class="sr-only"> に定義が無かった。画面から消し、読み上げには残す */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* a: 設問の左右に余白 */
.d-live .quiz-question { padding: 14px 16px; }
/* b: ラジオは見た目だけ隠す（フォーカス・キーボード操作・読み上げは残る） */
.d-live .quiz-question label { position: relative; }
.d-live .quiz-question input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
/* d: 選択は背景の反転で示す（inset枠をやめ、角丸の欠けを構造的に無くす） */
.d-live .quiz-question label.is-selected {
  background: var(--ink);
  color: var(--bg);
  box-shadow: none;
}
.d-live .quiz-question label.is-selected:focus-within { outline-color: var(--bg); }
/* ---- C13 end ----------------------------------------------- */

@media (min-width: 700px) {
  body {
    background:
      radial-gradient(circle at 15% 10%, rgba(224, 80, 63, .05), transparent 40%),
      var(--bg);
  }
}

/* ============================================================
   VISUAL PHASE 1 — 移行ブロック
   切り戻し: このブロックを削除し、:root を旧版へ戻す（2手）
   ============================================================ */

/* ---- A-2 空気層（夜明け前の稜線）------------------------- */
/* html 側の background:var(--bg) が地になるので body は透明にする */
body { background: transparent; }

body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 38%, transparent 48%, rgba(5, 7, 11, .55) 100%),
    radial-gradient(115% 40% at 50% -8%, rgba(126, 146, 196, .13), transparent 60%),
    radial-gradient(80% 30% at 84% 0%,   rgba(229, 176, 73, .06),  transparent 58%),
    radial-gradient(120% 56% at 30% 104%, rgba(24, 31, 48, .9),    transparent 62%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- A-3 外側の影 → 罫線 --------------------------------- */
.login-panel,
.gauge-card,
.today2,
.evaluation-card,
.work-card {
  border: 1px solid var(--hair);
  border-top-color: rgba(255, 255, 255, .09); /* 光の当たる上端だけ明るく */
}
.primary-button,
.t2-btn,
.judge-stamp { box-shadow: none; }

/* ---- 塗りボタンを単色に（白文字 3.9:1 → 5.0:1）----------- */
.primary-button,
.t2-btn,
.ls-cta { background: var(--red-deep); }

/* ---- A-4 タップ領域 44px（実測で未達だった4箇所）--------- */
.tabbar a        { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; } /* 実測37px */
.text-button     { min-height: 44px; padding: 0 8px; }                                             /* 実測31px */
.ls-cta          { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; } /* 実測34px */
.cleared-work-link { min-height: 44px; }                                                           /* 実測40px */

/* ---- A-4 フォーカス表示：赤→インク ----------------------- */
/* 既存は outline:2px solid rgba(224,80,63,.8)。赤は「現在地」の色として温存する */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---- 触覚まわり ------------------------------------------ */
button, a, [role="button"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ---- C9: app-controlled decorative motion ----------------- */
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}
html[data-motion="off"] .stage,
html[data-motion="off"] .rise,
html[data-motion="off"] .login-screen,
html[data-motion="off"] .here-dot::after,
html[data-motion="off"] .spark i,
html[data-motion="off"] .d-live .land .glint,
html[data-motion="off"] .d-live .land .mist,
html[data-motion="off"] .d-live .route.route-play .ls-row.is-current::after,
html[data-motion="off"] .d-live .route > .ls-row[style*="--row-entry"] > *,
html[data-motion="off"] .d-live .quiz-question[style*="--row-entry"] > * {
  animation: none !important;
}
html[data-motion="off"] .d-live .land .ll,
html[data-motion="off"] .d-live .d-atmo .lyr {
  transform: translate3d(0, 0, 0) !important;
}
html[data-motion="off"] .d-live .route .spark { display: none !important; }
html[data-motion="off"] .d-live .ridge-band .rim { transition-duration: .9s !important; }
/* ---- C9 end ------------------------------------------------ */
/* ============ VISUAL PHASE 1 ここまで ============ */

/* ============ VISUAL PHASE 1-b — モーション（ここから） ============ */
/* 既存セレクタを後勝ちで上書きする。新しいセレクタは足さない。 */

/* ---- M1. 押下の手応え：押しは速く（60ms）、戻りはゆっくり（180ms）---- */
.back, .tabbar a, .primary-button, .ghost-button, .line-button,
.t2-btn, .ch-row, a.ls-row, .submit2, .judge-next {
  transition:
    transform 180ms var(--ease-out),
    background-color 180ms var(--ease-out),
    opacity 180ms var(--ease-out),
    border-color 180ms var(--ease-out);
}
.back:active, .tabbar a:active, .primary-button:active, .ghost-button:active,
.line-button:active, .t2-btn:active, .ch-row:active, a.ls-row:active,
.submit2:active, .judge-next:active {
  transition-duration: 60ms;
}

/* ---- M2. 立ち上がりを短く（.7s は待たされる）---- */
.rise { animation: riseIn .44s var(--ease-out) both; }

/* ---- M3. 画面遷移のイージングを統一 ---- */
.stage[data-enter="fwd"]  { animation: screenIn .34s var(--ease-out) both; }
.stage[data-enter="back"] { animation: screenInBack .34s var(--ease-out) both; }

/* ---- M4. ログイン画面の入りを短く ---- */
.login-screen { animation: fadeIn .5s var(--ease-out) both; }

/* ---- M5. クリア済みワークのリンク：色の変化をじわっと ---- */
.cleared-work-link {
  transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out);
}
/* ============ VISUAL PHASE 1-b ここまで ============ */

/* ============================================================
   VISUAL PHASE 4 — 全画面D「生きた背景」（ここから）
   OFFスイッチ: <body> から d-live を外すと、この節は1行も効かない。
   切り戻し: このブロックを丸ごと削除する（:root の --sky-a / --sky-b も同時に消える）。
   ============================================================ */

/* ---- 0. OFFスイッチの土台 ------------------------------------
   D の要素は既定で display:none。.d-live が付いたときだけ現れる。
   ＝ body からクラスを外せば、DOMが残っていても見た目は完全に元へ戻る。 */
.d-atmo,
.land,
.ridge-band { display: none; }

/* ---- 1. 時刻連動の空 -----------------------------------------
   フェーズ1の body::before を、変数で駆動する形に差し替える。
   .d-live が無いときは --sky-a/--sky-b の既定値が効き、見た目は現行と同じ。 */
:root {
  --sky-a: rgba(126, 146, 196, .13);
  --sky-b: rgba(229, 176, 73, .06);
}
body.d-live.tod-morning { --sky-a: rgba(229, 176, 73, .30); --sky-b: rgba(224, 120, 90, .18); --glint: rgba(229, 176, 73, .30); }
body.d-live.tod-day     { --sky-a: rgba(160, 185, 230, .22); --sky-b: rgba(126, 146, 196, .26); --glint: rgba(200, 215, 240, .22); }
body.d-live.tod-evening { --sky-a: rgba(224,  80,  63, .24); --sky-b: rgba(229, 176,  73, .20); --glint: rgba(224, 110,  63, .32); }
body.d-live.tod-night   { --sky-a: rgba(126, 146, 196, .10); --sky-b: rgba( 60,  80, 140, .24); --glint: rgba(180, 200, 240, .18); }

body.d-live::before {
  background:
    radial-gradient(ellipse at 50% 38%, transparent 48%, rgba(5, 7, 11, .55) 100%),
    radial-gradient(115% 40% at 50% -8%, var(--sky-a), transparent 60%),
    radial-gradient(80% 30% at 84% 0%,   var(--sky-b), transparent 58%),
    radial-gradient(120% 56% at 30% 104%, rgba(24, 31, 48, .9), transparent 62%);
  transition: background 1.2s ease;
}

/* ---- 2. 等高線の層（画面全体・上45%のみ・視差） ---------------- */
.d-live .d-atmo {
  display: block; position: fixed; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden;
}
.d-live .d-atmo .lyr {
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 45%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0, #000 45%, transparent 100%);
  will-change: auto;
}
.d-live .d-atmo .cstat { position: absolute; inset: -8% -8%; width: 116%; height: 116%; }
.d-live .d-atmo .cstat svg { width: 100%; height: 100%; }

/* ---- 3. 山の「窓」（高さ0。リストの裏には決して入らない）-------- */
.d-live .land {
  display: block; position: relative; z-index: 0;
  height: 0; margin: 0; pointer-events: none;
}
.d-live .land .ll {
  position: absolute; left: -18px; right: -18px; top: -52px; height: 250px;
  overflow: hidden;                  /* 霧(width:160%)が横スクロールを生むのを防ぐ */
  transform: translate3d(0, 0, 0); will-change: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 40%, transparent 82%);
          mask-image: linear-gradient(180deg, #000 0, #000 40%, transparent 82%);
}
.d-live .land .ll svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.d-live .land .ll.far  path { fill: rgba(62, 76, 112, .50); }
.d-live .land .ll.mid  path { fill: rgba(34, 44,  70, .80); }
.d-live .land .ll.near path { fill: rgba(15, 19,  30, .97); }
.d-live .land .ll.near .crest { opacity: .9; }

/* 窓の位置：画面ごと */
.d-live .land.r .ll {
  top: -168px; height: 215px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 32%, transparent 74%);
          mask-image: linear-gradient(180deg, #000 0, #000 32%, transparent 74%);
}
.d-live .land.t .ll {
  top: -150px; height: 200px; opacity: .55;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 30%, transparent 70%);
          mask-image: linear-gradient(180deg, #000 0, #000 30%, transparent 70%);
}
.d-live .land.t .ll.near { display: none; }   /* 詳細画面の窓は遠景・中景のみ */

/* ログインは画面下固定の地平 */
.d-live .login-screen { position: relative; }  /* .land.fixed の基準にする */
.d-live .land.fixed { position: absolute !important; left: 0; right: 0; bottom: 0; height: 0; }
.d-live .land.fixed .ll {
  left: 0; right: 0;               /* 画面幅の窓は左右へ広げない。高さ0の親では切り取らない */
  top: -172px; height: 220px;
  -webkit-mask-image: none; mask-image: none;
}
.d-live .land.fixed .glint { display: none; }

/* ---- 4. 常時動く2つ：頂の灯と霧（他は動かさない）--------------- */
.d-live .land .glint {
  position: absolute; width: 110px; height: 110px; border-radius: 50%;
  left: calc(73% - 55px); top: calc(10% - 55px);
  background: radial-gradient(circle, var(--glint, rgba(229,176,73,.24)), rgba(229,176,73,0) 62%);
  transition: background 1.2s ease;
  animation: dGlint 9s ease-in-out infinite;
}
/* ホームの灯は窓の内側へ収め、上端で光が切れないようにする。 */
.d-live .land.h .glint { top: 0; }
.d-live .land .mist {
  position: absolute; left: -30%; width: 160%; height: 64px; top: 38%; filter: blur(14px);
  background: linear-gradient(90deg, transparent, rgba(163,174,192,.085) 40%, rgba(163,174,192,.06) 60%, transparent);
  animation: dMist 46s ease-in-out infinite alternate;
}
@keyframes dGlint { 0%,100% { opacity:.55; transform:scale(.9) } 50% { opacity:1; transform:scale(1.08) } }
@keyframes dMist  { from { transform:translate3d(-40px,0,0) } to { transform:translate3d(40px,0,0) } }

/* スクロール中だけ will-change を付ける（常時付けると合成レイヤを食う）*/
.d-live.scrolling .d-atmo .lyr,
.d-live.scrolling .land .ll { will-change: transform; }

/* ---- 5. 窓の上のカードは文字の地を確保する --------------------- */
.d-live .gauge-card,
.d-live .today2,
.d-live .cleared-works .work-card,
.d-live .phase-group,
.d-live .ai-panel { background-color: rgba(14, 17, 23, .92); }
.d-live .login-panel { background-color: rgba(14, 17, 23, .90); }

/* ---- 6. 稜線の帯（進捗パネル下部）。光は左→右、右端の頂＝100% -- */
.d-live .gauge-card { position: relative; overflow: hidden; padding-bottom: 62px; }
.d-live .gauge-card > .ring-wrap,
.d-live .gauge-card > .gauge-stats { position: relative; z-index: 1; }
.d-live .ridge-band {
  display: block; position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 56px; z-index: 0;
}
.d-live .ridge-band .fill { fill: rgba(163, 174, 192, .07); }
.d-live .ridge-band .rim2 { fill: none; stroke: rgba(163, 174, 192, .22); stroke-width: 1; stroke-linejoin: round; }
.d-live .ridge-band .rim {
  fill: none; stroke: rgba(229, 176, 73, .8); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: var(--climb, 100);
  transition: stroke-dashoffset .9s var(--ease-out);
}
.d-live .ridge-band .head {
  fill: #FFF3D6; filter: drop-shadow(0 0 4px rgba(229, 176, 73, .9));
  transition: none;                      /* 頭は transform を WAAPI で動かす */
}
.d-live .ridge-band .head-g { will-change: transform; }
.d-live .ridge-band .head-g.hide { opacity: 0; }

/* ---- 7. reduced-motion ---------------------------------------
   霧と灯は止める。視差はJS側で登録しない。
   進捗連動（稜線の光）は「動き」ではなく「値の表示」なので例外で残す。 */

/* ---- C-2 ルートライン（v2.2 修正）------------------------------
   既存の .ls-row は一切書き換えない。足すのは
   ①区間別軌道（.route-rail） ②節点（.ls-row::before） ③光（.spark） の3つだけ。 */
/* .route は既存行の器。OFFでも display を変更しない。装飾だけ隠す。 */
.route > .route-rail,
.route > .spark { display: none; }

.d-live .route {
  position: relative; padding-left: 30px; overflow: hidden;
}
/* ① 軌道：節点間の中点で区切り、各レッスンの完了状態で塗る */
.d-live .route > .route-rail {
  display: block; position: absolute; left: 6px; top: 20px; bottom: 26px; width: 1px;
  pointer-events: none;
}
.d-live .route-rail > .route-segment {
  position: absolute; left: 0; width: 1px; background: var(--hair);
}
.d-live .route-segment[data-state="complete"] { background: var(--gold); }
.d-live .route-segment[data-state="current"] { background: var(--red); }
/* ② 節点：各行の左に1つ。色は既存の状態クラスから引く */
.d-live .route .ls-row { position: relative; }
.d-live .route .ls-row::before {
  content: ""; position: absolute; left: -28px; top: 20px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px var(--bg);
}
.d-live .route .ls-row.is-current::before { background: var(--red); }
.d-live .route .ls-row.is-locked::before {
  background: var(--bg); border: 1px solid var(--line-ui); box-shadow: 0 0 0 4px var(--bg);
}
.d-live .route .ls-row[data-state="progress"]::before { background: var(--ink); }
.d-live .route .ls-row[data-state="not-started"]::before {
  background: var(--bg); border: 1px solid var(--line-ui); box-shadow: 0 0 0 4px var(--bg);
}
/* 現在地の脈 */
.d-live .route .ls-row.is-current::after {
  content: ""; position: absolute; left: -31px; top: 17px;
  width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid var(--red); opacity: 0;
}
.d-live .route.route-play .ls-row.is-current::after {
  animation: routeHalo 2s var(--ease-out) 3 both;
}
@keyframes routeHalo {
  0%   { transform: scale(.5); opacity: .85 }
  70%  { transform: scale(1.9); opacity: 0 }
  100% { opacity: 0 }
}
/* ③ 光：上→下。読込1回だけ */
.d-live .route .spark {
  display: block; pointer-events: none; position: absolute; left: 5px; top: 20px; width: 3px; height: 56px; border-radius: 2px;
  background: linear-gradient(180deg, transparent, rgba(255, 240, 226, .9), transparent);
  opacity: 0;
}
.d-live .route.route-play .spark {
  animation: routeTrail 1.1s var(--ease-out) .25s 1 both;
}
@keyframes routeTrail {
  0%   { transform: translateY(-56px); opacity: 0 }
  18%  { opacity: 1 }
  88%  { opacity: 1 }
  100% { transform: translateY(var(--trail, 300px)); opacity: 0 }
}
/* reduced-motion：光と脈は装飾なので完全に消す。軌道の色は残す */


/* ---- C14: ring stroke (v2.5) ------------------------------- */
/* モックv11の stroke-width 2 に合わせる。外径は150px/190pxのまま */
.d-live .ring-bg,
.d-live .ring-fg { stroke-width: 2; }
.d-live .ring-fg { filter: drop-shadow(0 0 3px rgba(224, 80, 63, .45)); }
.d-live .jr-bg,
.d-live .jr-fg { stroke-width: 1.8; }
.d-live .jr-fg { filter: drop-shadow(0 0 3px rgba(224, 80, 63, .4)); }
/* ---- C14 end ----------------------------------------------- */

/* ---- C16: P1 fixes (v2.6) ---------------------------------- */
/* 既存バグの修正なので .d-live に依存させない（D_LIVE を外しても直っている）。 */
/* P1-①: Phase 1 の「.primary-button, .t2-btn, .ls-cta { background: var(--red-deep) }」が
   同じ詳細度・後勝ちで .ls-cta--calm の背景を上書きしていた。
   Phase 1 の行は書き換えず、詳細度を1段上げて落ち着いた表示に戻す。 */
.ls-cta.ls-cta--calm {
  background: var(--panel-2);
  border: 1px solid var(--hair);
  color: var(--dim);
}
/* P1-②: 解放待ちの章は <button disabled>。文字色を指定していなかったため、
   ブラウザ既定の無効時の色（Chromium で rgba(16,16,16,.3)）になっていた。
   既存トークンを明示し、弱めるのは行全体の opacity（.ch-row.is-locked の .85）だけにする。 */
button.ch-row { color: var(--ink); }
button.ch-row b .no,
button.ch-row .ch-mini em { color: var(--faint); }
/* マスター裁定: 解放待ちの番号・状態・件数も読みやすくする。 */
.ch-row.is-locked { opacity: .85; }
/* ---- C16 end ----------------------------------------------- */

/* ============ VISUAL PHASE 4 ここまで ============ */


/* ============ VISUAL FINISH（リデザイン仕上げ）============ */
/* ---- FIN C-1: ○×テストのダーク統合 ---- */
.quiz-panel .quiz-question-list,
.quiz-panel .quiz-explanation-list { list-style: none; padding-left: 0; gap: 0; margin: 12px 0; }
.quiz-panel .quiz-question,
.quiz-panel .quiz-explanation-list li {
  background: transparent; color: var(--ink); box-shadow: none;
  border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; padding: 14px 16px;
}
.quiz-panel .quiz-question > p > span {
  display: block; margin: 0 0 4px; font-size: 12px; font-weight: 500; color: var(--faint);
}
.quiz-panel .quiz-question > p { line-height: 1.75; color: var(--ink); }
.quiz-panel .quiz-result { background: transparent; color: var(--ink); border: 1px solid var(--hair); border-radius: 14px; box-shadow: none; }
.quiz-panel .quiz-result-head,
.quiz-panel .quiz-explanation-list strong,
.quiz-panel .quiz-explanation-list p { color: var(--ink); }
.quiz-panel .quiz-explanation-list li.is-correct { border-left: 4px solid var(--gold); padding-left: 12px; }
.quiz-panel .quiz-explanation-list li.is-wrong { border-left: 4px solid var(--faint); padding-left: 12px; }
.mini-panel .mp-callout {
  background: transparent; border: 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  border-radius: 0; padding: 10px 0;
}
.quiz-panel .quiz-question fieldset {
  display: flex; gap: 0; max-width: 220px; border: 1px solid var(--line-ui);
  border-radius: 10px; overflow: hidden; background: var(--bg);
}
.quiz-panel .quiz-question label {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  flex: 1; min-width: 0; min-height: 44px; justify-content: center; margin: 0;
  padding: 9px 14px; border: 0; border-radius: 0; background: var(--bg); color: var(--ink);
}
.quiz-panel .quiz-question label + label { border-left: 1px solid var(--line-ui); }
.quiz-panel .quiz-question label:focus-within { outline: 2px solid var(--ink); outline-offset: -3px; }
.quiz-panel .quiz-question input[type="radio"] {
  position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; accent-color: var(--ink);
}
.quiz-panel .quiz-question label.is-selected { font-weight: 700; background: var(--ink); color: var(--bg); box-shadow: none; }
.quiz-panel .quiz-question label.is-selected:focus-within { outline-color: var(--bg); }
/* ---- FIN C-1 end ---- */

/* ---- FIN C-3: 赤は現在地と主CTAに限定 ---- */
.tabbar a[aria-current="page"] { color: var(--ink); border-color: var(--ink); background: rgba(237,241,247,.08); }
.login-panel .eyebrow, .page-kicker, .lesson-title .lt-k,
.mini-panel .mp-k, .today2 .t2-k, .evaluation-card .ev-k,
.ai-panel > .ap-k, .ai-prompt-box > span, .learn-details .ld-item span,
.ring-center b small { color: var(--dim); }
.login-form input:focus, textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(237,241,247,.12); }
textarea[aria-invalid="true"]:focus { border-color: var(--red); }
.ch-state.here { color: var(--ink); }
.ch-state.here .here-dot::before { background: var(--ink); }
.ch-state.here .here-dot::after { border-color: var(--ink); }
.ch-mini .mbar span { background: var(--dim); }
.route .ls-row[data-state="progress"] .ls-cta { background: var(--panel-2); border: 1px solid var(--hair); color: var(--dim); }
.video2 { background: radial-gradient(circle at 70% 20%, rgba(126,146,196,.18), transparent 55%), linear-gradient(150deg, #2a2a30, #1a1a1e); }
.status-badge[data-tone="attention"] { border-color: var(--line-ui); background: transparent; color: var(--ink); }
.ai-guidance p::before { background: var(--faint); }
.ai-prompt-box { border-color: var(--hair); }
.ai-block--focus { border-color: var(--line-ui); }
.quiz-panel .quiz-explanation-list li.is-wrong { border-left-color: var(--faint); }
.work-card.work-card--featured { border-color: var(--line-ui); }
.primary-button.is-calm, .submit2.is-calm, .quiz-submit-button:disabled,
.work-card:not(.work-card--featured) .submit2, .submit2.ai-work-reattempt {
  background: transparent; border: 1px solid var(--line-ui); color: var(--ink); box-shadow: none;
}
/* マスター承認 2026-09-24: 操作の輪郭のみ3:1を確保。既存トークンは維持。 */
.primary-button.is-calm, .submit2.is-calm, .quiz-submit-button:disabled,
.work-card:not(.work-card--featured) .submit2, .submit2.ai-work-reattempt,
.quiz-panel .quiz-question fieldset, .quiz-panel .quiz-question label + label {
  border-color: rgba(163,174,192,.55);
}
/* 無効時も輪郭色を保つ。無効状態の操作制限は既存のまま。 */
.quiz-panel .quiz-submit-button:disabled { opacity: 1; }
/* ---- FIN C-3 end ---- */

/* ---- FIN C-4: クリア済みワークと登頂ルートを罫線の行へ ---- */
.cleared-works .sec-h-row { border-bottom: 1px solid var(--hair); padding-bottom: 10px; }
.cleared-works .cleared-work-card {
  background: transparent; border: 0; border-bottom: 1px solid var(--hair);
  border-radius: 0; margin-bottom: 0; overflow: visible;
}
.cleared-work-card > summary {
  grid-template-columns: 1fr auto 22px; column-gap: 12px; row-gap: 2px;
  align-items: center; padding: 13px 2px; min-height: 56px;
}
.cleared-work-meta { grid-column: 1; grid-row: 1; font-size: 11px; letter-spacing: 0; color: var(--faint); }
.cleared-work-card > summary strong { grid-column: 1; grid-row: 2; font-size: 13px; line-height: 1.5; }
.cleared-work-result {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right;
  white-space: nowrap; font-size: 12px; color: var(--gold);
}
.cleared-work-card > summary::after { grid-column: 3; grid-row: 1 / span 2; width: 22px; text-align: center; font-size: 15px; color: var(--faint); }
.cleared-work-body { border-top: 0; padding: 4px 2px 16px; }
@media (hover: hover) and (pointer: fine) {
  .cleared-work-card > summary:hover { background: rgba(255,255,255,.025); }
}
.stage .route > .ls-row {
  background: transparent; border: 0; border-bottom: 1px solid var(--hair);
  border-radius: 0; margin-bottom: 0; padding: 15px 0; min-height: 56px;
}
.stage .route > .ls-row.is-current { border-color: var(--hair); }
.stage .route > .ls-row.is-current h4 { font-size: 15px; font-weight: 700; }
.stage .route > a.ls-row:active { background: rgba(255,255,255,.03); }
/* ---- FIN C-4 end ---- */

/* ---- FIN C-5: 本ワーク詳細の外枠を残し、内部を罫線へ ---- */
.ai-context-grid {
  gap: 0; padding: 0 16px; border: 1px solid var(--hair); border-top-color: rgba(255,255,255,.09);
  border-radius: 14px; background: rgba(255,255,255,.022);
}
.ai-context-grid article {
  display: grid; grid-template-columns: 78px 1fr; gap: 12px; padding: 9px 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0;
}
.ai-context-grid article:last-child { border-bottom: 0; }
.ai-context-grid article span { margin: 0; font-size: 11px; letter-spacing: 0; line-height: 1.5; }
.ai-panel .ai-block { background: transparent; border: 0; border-top: 1px solid var(--hair); border-radius: 0; padding: 12px 0; margin: 0; }
.ai-panel .ai-block:first-child { border-top: 0; padding-top: 0; }
.ai-panel .ai-block--gold { border-left: 2px solid rgba(229,176,73,.45); padding-left: 12px; }
.ai-panel .ai-block--focus { border-left: 2px solid var(--line-ui); padding-left: 12px; }
.ai-panel .ai-prompt-box { background: transparent; border: 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); border-radius: 0; padding: 14px 0; }
.ai-panel .ai-prompt-box .apb-block { background: transparent; border: 0; border-top: 1px solid var(--hair); border-radius: 0; padding: 10px 0; }
.ai-work-latest-result { background: transparent; border-radius: 0; border-top: 1px solid var(--hair); padding: 10px 0; margin: 0; }
.ai-work-attempt { background: transparent; border: 0; border-top: 1px solid var(--hair); border-radius: 0; }
.ai-work-attempt > summary { padding: 12px 0; min-height: 48px; justify-content: flex-start; }
.ai-work-attempt > summary strong { margin-left: auto; }
.ai-work-attempt > summary::after { content: "＋"; flex: none; width: 22px; margin-left: 12px; text-align: center; color: var(--faint); font-size: 15px; }
.ai-work-attempt[open] > summary::after { content: "−"; }
.ai-work-attempt-body { padding: 0 0 12px; }
.ai-work-attempt-body .ai-block { border-top: 0; padding: 8px 0 0; }
/* ---- FIN C-5 end ---- */

/* ---- FIN 書体: 20px以上の見出し4種をNoto Serif JPへ ---- */
@font-face {
  font-family: "Noto Serif JP";
  src: url("./assets/fonts/noto-serif-jp-700-subset.woff2?v=9-3-1-live") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
:root { --min: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif; }
.login-panel h1, .today2 h2, .page-title, .lesson-title h1 {
  font-family: var(--min); font-weight: 700; line-height: 1.5; letter-spacing: 0; text-wrap: balance;
}
/* ---- FIN 書体 end ---- */


/* B-043: optional thinking guidance, visually separate from the answer form. */
.mini-panel .mini-work-prompt { color: var(--dim); font-size: 13px; }
.mini-work-thinking {
  margin: 20px 0;
  padding: 16px;
  border: 1px dashed var(--hair);
  border-radius: 12px;
  background: #131316;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.9;
  overflow-wrap: anywhere;
}
.mini-work-submission-divider { margin: 0 0 14px; text-align: center; }
.mini-work-thinking h4 { margin: 0 0 10px; font-size: 13px; color: var(--ink); }
.mini-work-options-note { margin: 0 0 10px; }
.mini-work-thinking ol, .mini-work-thinking ul { margin: 0; padding-left: 1.8em; }
.mini-work-thinking li + li { margin-top: 8px; }
.mini-work-options { margin: 12px 0 16px; }

/* Keep long criterion names distinct from their decision on narrow screens. */
.ev-layer-list li { display: grid; gap: 4px; margin-bottom: 12px; }
.ev-layer-list li > span { color: var(--dim); font-size: 11px; }