@charset "UTF-8";
/* =============================================================================
   LessonNote — app.css   （全画面の見た目・1本）
   Haru Language Cafe / 教師用レッスンメモ

   構成
     1. リセット
     2. デザイントークン（ライト）
     3. ダークモード
     4. ベース要素
     5. 余白・汎用ユーティリティ
     6. 共通部品（ボタン／チップ／入力／カード／モーダル／トースト）
     7. アプリ骨格（スプラッシュ／ヘッダー／本体）
     8. ホーム画面
     9. 生徒・グループ編集
    10. レッスン画面（2カラム＋ドラッグ仕切り）
    11. 学習ノート（ブロック／ruby／対応色／語彙／文法／レーン）
    12. レスポンシブ
    13. アニメーション・アクセシビリティ

   ※ 印刷用は css/print.css（別担当）。このファイルには @media print を書かない。

   --- 他モジュールとの取り決め（JS側はこの通りにDOMを作れば整う）---
     .ln-lesson        … 2カラムの親。`style="--ln-split: 46%"` で左カラム幅を変えられる。
                          `data-pane="left|right"` を付けると狭い画面で片方だけ表示（タブ切替）。
     .ln-splitter      … 左右カラムの間に置く仕切り（main.js がドラッグを担当）。
     .ln-block         … `data-n="1"` を付けると左肩に通し番号の丸バッジが出る。
     .align-1〜12      … 対応色チップ。`data-i="1"` を付けると番号が上付きで併記される。
     .is-hi            … 対応のホバー強調（原文側・訳文側の両方に付ける）。
   ============================================================================= */

/* =============================================================================
   1. リセット
   ============================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html, body, div, section, article, header, footer, main, aside, nav,
h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, figure, blockquote, pre {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

/* JS側が display を直接いじる要素があるので、hidden は必ず勝たせる */
[hidden] { display: none !important; }

img, svg, video, canvas { max-width: 100%; display: block; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; }

table { border-collapse: collapse; width: 100%; }

/* .ln- で始まる未知のクラスでも崩れないように */
[class^="ln-"],
[class*=" ln-"] { box-sizing: border-box; min-width: 0; }

/* =============================================================================
   2. デザイントークン（ライト）
   ============================================================================= */

:root {
  /* --- ブランド --- */
  --brand:        #C8102E;
  --brand-ink:    #A00D25;
  --brand-soft:   #FBE4E6;
  --cream:        #FCF5EF;
  --pastel-pink:  #FBE4E6;
  --pastel-green: #E9F4EC;
  --pastel-sand:  #FBF1D8;

  /* --- 対応色12（SPEC 5.1／この順番で使う） --- */
  --al-1:  #C8102E;
  --al-2:  #1D6FB8;
  --al-3:  #1E8449;
  --al-4:  #7D3C98;
  --al-5:  #B7791F;
  --al-6:  #0E7490;
  --al-7:  #BE185D;
  --al-8:  #4D7C0F;
  --al-9:  #9A3412;
  --al-10: #3730A3;
  --al-11: #065F46;
  --al-12: #701A75;

  /* --- 面と文字 --- */
  --bg:           #FAFAF9;
  --bg-2:         #F4F4F2;
  --surface:      #FFFFFF;
  --surface-2:    #FFFFFF;   /* 学習ノートのカード＝クリーム */
  --surface-3:    #F7F6F4;
  --surface-sunk: #F2F1EE;
  --text:         #141414;
  --text-2:       #5B5955;
  --muted:        #9A9791;
  --border:       #EAE8E4;
  --border-2:     #DAD7D1;
  --overlay:      rgba(20, 20, 20, .30);

  /* --- 意味色 --- */
  --ok:      #1E8449;
  --ok-bg:   #E9F4EC;
  --warn:    #B7791F;
  --warn-bg: #FBF1D8;
  --danger:  #C8102E;
  --danger-bg: #FBE4E6;
  --info:    #1D6FB8;
  --info-bg: #E7F0F9;
  --focus:   #1D6FB8;

  /* --- 学習言語のレーン色 --- */
  --lane-ja: #C8102E;
  --lane-en: #1D6FB8;

  /* --- 余白 --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 32px;
  --sp-6b: 40px;
  --sp-7: 56px;
  --sp-8: 80px;
  --sp-9: 112px;

  /* --- 角丸 --- */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;
  --r-5: 28px;
  --r-pill: 999px;

  /* --- 影 --- */
  --sh-1: 0 1px 2px rgba(20, 20, 20, .04);
  --sh-2: 0 1px 3px rgba(20, 20, 20, .05), 0 10px 28px -18px rgba(20, 20, 20, .16);
  --sh-3: 0 24px 64px -24px rgba(20, 20, 20, .26);

  /* --- 文字 --- */
  --font: "Inter", "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", sans-serif;
  --font-jp: "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-0: .6875rem;   /* 11 */
  --fs-1: .75rem;     /* 12 */
  --fs-2: .8125rem;   /* 13 */
  --fs-3: .875rem;    /* 14 */
  --fs-4: 1rem;       /* 16 */
  --fs-5: 1.125rem;   /* 18 */
  --fs-6: 1.375rem;   /* 22 */
  --fs-7: 1.75rem;    /* 28 */
  --fs-8: 2.25rem;    /* 36 */
  --fs-9: 3rem;       /* 48 */
  --fs-10: 4rem;      /* 64 */

  /* 字間・行間（大きい見出しほど詰める＝現代的な組み） */
  --ls-display: -.035em;
  --ls-tight: -.02em;
  --ls-wide: .08em;
  --lh-body: 1.75;
  --lh-tight: 1.15;

  /* 中央に美しく置くための最大幅 */
  --wrap: 1180px;
  --wrap-wide: 1440px;

  /* --- 寸法 --- */
  --head-h: 64px;
  --ln-split: 46%;    /* 左カラム幅の既定（main.js がドラッグで % に書き換える） */
}

/* 表示サイズ（設定画面から html[data-size] を切り替える） */
html            { font-size: 16px; }
html[data-size="s"]  { font-size: 15px; }
html[data-size="m"]  { font-size: 16px; }
html[data-size="l"]  { font-size: 17.5px; }
html[data-size="xl"] { font-size: 19px; }

/* =============================================================================
   3. ダークモード
   OS設定に従う（既定）＋ html[data-theme] で明示切替できる
   ============================================================================= */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --al-1:  #FF7E8C;
    --al-2:  #7BB8EE;
    --al-3:  #6FD2A0;
    --al-4:  #C79BE8;
    --al-5:  #E7C264;
    --al-6:  #5EC8DD;
    --al-7:  #F58BB8;
    --al-8:  #AAD96C;
    --al-9:  #F0A272;
    --al-10: #9EA7F6;
    --al-11: #63CBA6;
    --al-12: #E098E1;

    --bg:           #0E0E10;
    --bg-2:         #0A0A0C;
    --surface:      #1A1A1D;
    --surface-2:    #1F1F23;   /* ノートのカード（クリームの代わり） */
    --surface-3:    #26262B;
    --surface-sunk: #141416;
    --text:         #F2EEEA;
    --text-2:       #BDB5AE;
    --muted:        #8E8781;
    --border:       #2A2A2F;
    --border-2:     #3A3A41;
    --overlay:      rgba(0, 0, 0, .58);

    --brand:      #F1657A;
    --brand-ink:  #FF8496;
    --brand-soft: #3A222A;
    --cream:      #262229;

    --ok: #6FD2A0;      --ok-bg: #1D2C25;
    --warn: #E7C264;    --warn-bg: #2E2718;
    --danger: #FF8496;  --danger-bg: #342025;
    --info: #7BB8EE;    --info-bg: #1B2530;
    --focus: #7BB8EE;

    --lane-ja: #F1657A;
    --lane-en: #7BB8EE;

    --sh-1: 0 1px 2px rgba(0, 0, 0, .40);
    --sh-2: 0 2px 10px rgba(0, 0, 0, .45);
    --sh-3: 0 12px 34px rgba(0, 0, 0, .60);
  }
}

:root[data-theme="dark"] {
  --al-1:  #FF7E8C;
  --al-2:  #7BB8EE;
  --al-3:  #6FD2A0;
  --al-4:  #C79BE8;
  --al-5:  #E7C264;
  --al-6:  #5EC8DD;
  --al-7:  #F58BB8;
  --al-8:  #AAD96C;
  --al-9:  #F0A272;
  --al-10: #9EA7F6;
  --al-11: #63CBA6;
  --al-12: #E098E1;

  --bg:           #0E0E10;
  --bg-2:         #0A0A0C;
  --surface:      #1A1A1D;
  --surface-2:    #1F1F23;
  --surface-3:    #26262B;
  --surface-sunk: #141416;
  --text:         #F2EEEA;
  --text-2:       #BDB5AE;
  --muted:        #8E8781;
  --border:       #2A2A2F;
  --border-2:     #3A3A41;
  --overlay:      rgba(0, 0, 0, .58);

  --brand:      #F1657A;
  --brand-ink:  #FF8496;
  --brand-soft: #3A222A;
  --cream:      #262229;

  --ok: #6FD2A0;      --ok-bg: #1D2C25;
  --warn: #E7C264;    --warn-bg: #2E2718;
  --danger: #FF8496;  --danger-bg: #342025;
  --info: #7BB8EE;    --info-bg: #1B2530;
  --focus: #7BB8EE;

  --lane-ja: #F1657A;
  --lane-en: #7BB8EE;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .40);
  --sh-2: 0 2px 10px rgba(0, 0, 0, .45);
  --sh-3: 0 12px 34px rgba(0, 0, 0, .60);
}

/* =============================================================================
   4. ベース要素
   ============================================================================= */

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-3);
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

#app { min-height: 100%; }

h1, h2, h3, h4 { line-height: 1.35; font-weight: 800; letter-spacing: .01em; }

::selection { background: color-mix(in srgb, var(--brand) 22%, transparent); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* スクロールバー（WebKit）＝細く控えめに */
.ln-scroll::-webkit-scrollbar,
.ln-col-left::-webkit-scrollbar,
.ln-col-right::-webkit-scrollbar,
.ln-main::-webkit-scrollbar { width: 10px; height: 10px; }

.ln-scroll::-webkit-scrollbar-thumb,
.ln-col-left::-webkit-scrollbar-thumb,
.ln-col-right::-webkit-scrollbar-thumb,
.ln-main::-webkit-scrollbar-thumb {
  background: var(--border-2);
  border-radius: var(--r-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}

/* --- ruby（SPEC R7：漢字の上にふりがな。横に（かっこ）併記はしない） --- */
ruby {
  ruby-position: over;
  -webkit-ruby-position: before;
  ruby-align: center;
}

rt {
  font-size: .55em;
  line-height: 1.15;
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: .02em;
  text-align: center;
}

rp { display: none; }

/* =============================================================================
   5. 余白・汎用ユーティリティ
   ============================================================================= */

.u-row     { display: flex; align-items: center; gap: var(--sp-2); }
.u-row-top { display: flex; align-items: flex-start; gap: var(--sp-2); }
.u-col     { display: flex; flex-direction: column; gap: var(--sp-2); }
.u-wrap    { flex-wrap: wrap; }
.u-grow    { flex: 1 1 auto; min-width: 0; }
.u-spacer  { flex: 1 1 auto; }
.u-right   { margin-left: auto; }
.u-center  { text-align: center; }
.u-nowrap  { white-space: nowrap; }
.u-hidden  { display: none !important; }
.u-muted   { color: var(--muted); }
.u-dim     { color: var(--text-2); }
.u-small   { font-size: var(--fs-1); }
.u-xsmall  { font-size: var(--fs-0); }
.u-bold    { font-weight: 700; }
.u-mono    { font-family: var(--font-mono); }
.u-break   { overflow-wrap: anywhere; word-break: break-word; }

.u-mt-0 { margin-top: 0; }        .u-mb-0 { margin-bottom: 0; }
.u-mt-1 { margin-top: var(--sp-1); }  .u-mb-1 { margin-bottom: var(--sp-1); }
.u-mt-2 { margin-top: var(--sp-2); }  .u-mb-2 { margin-bottom: var(--sp-2); }
.u-mt-3 { margin-top: var(--sp-3); }  .u-mb-3 { margin-bottom: var(--sp-3); }
.u-mt-4 { margin-top: var(--sp-4); }  .u-mb-4 { margin-bottom: var(--sp-4); }
.u-mt-5 { margin-top: var(--sp-5); }  .u-mb-5 { margin-bottom: var(--sp-5); }
.u-mt-6 { margin-top: var(--sp-6); }  .u-mb-6 { margin-bottom: var(--sp-6); }

.u-ml-1 { margin-left: var(--sp-1); }   .u-mr-1 { margin-right: var(--sp-1); }
.u-ml-2 { margin-left: var(--sp-2); }   .u-mr-2 { margin-right: var(--sp-2); }
.u-ml-3 { margin-left: var(--sp-3); }   .u-mr-3 { margin-right: var(--sp-3); }
.u-ml-auto { margin-left: auto; }

.u-p-2 { padding: var(--sp-2); }
.u-p-3 { padding: var(--sp-3); }
.u-p-4 { padding: var(--sp-4); }
.u-p-5 { padding: var(--sp-5); }

.u-gap-1 { gap: var(--sp-1); }
.u-gap-2 { gap: var(--sp-2); }
.u-gap-3 { gap: var(--sp-3); }
.u-gap-4 { gap: var(--sp-4); }

.u-scroll { overflow: auto; -webkit-overflow-scrolling: touch; }
.ln-scroll { overflow: auto; -webkit-overflow-scrolling: touch; min-height: 0; }

.u-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.ln-hr {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: var(--sp-4) 0;
}

/* =============================================================================
   6. 共通部品
   ============================================================================= */

/* --- 6.1 ボタン ------------------------------------------------------------ */

.ln-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 14px;
  font-size: var(--fs-2);
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
  box-shadow: var(--sh-1);
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
  -webkit-tap-highlight-color: transparent;
}

.ln-btn:hover { background: var(--surface-3); }
.ln-btn:active { transform: translateY(1px); }

.ln-btn[disabled],
.ln-btn.is-disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

.ln-btn[disabled]:hover,
.ln-btn.is-disabled:hover { background: var(--surface); }

/* 主要動作＝ブランド赤 */
.ln-btn.is-primary,
.ln-btn--primary {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}

.ln-btn.is-primary:hover,
.ln-btn--primary:hover { background: var(--brand-ink); border-color: var(--brand-ink); }

:root[data-theme="dark"] .ln-btn.is-primary,
:root[data-theme="dark"] .ln-btn--primary { color: #1C1917; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ln-btn.is-primary,
  :root:not([data-theme="light"]) .ln-btn--primary { color: #1C1917; }
}

/* 破壊的操作 */
.ln-btn.is-danger,
.ln-btn--danger {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
  background: var(--danger-bg);
}

.ln-btn.is-danger:hover,
.ln-btn--danger:hover { background: color-mix(in srgb, var(--danger) 16%, var(--surface)); }

/* 枠なし＝控えめ */
.ln-btn-ghost,
.ln-btn.is-ghost,
.ln-btn--ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 10px;
  font-size: var(--fs-2);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--text-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  box-shadow: none;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}

.ln-btn-ghost:hover,
.ln-btn.is-ghost:hover,
.ln-btn--ghost:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 7%, transparent);
}

.ln-btn-ghost[disabled] { opacity: .4; cursor: not-allowed; }

.ln-btn.is-sm,
.ln-btn--sm,
.ln-btn-ghost.is-sm { min-height: 26px; padding: 2px 9px; font-size: var(--fs-1); }

.ln-btn.is-lg,
.ln-btn--lg { min-height: 42px; padding: 8px 20px; font-size: var(--fs-3); }

.ln-btn.is-block,
.ln-btn--block { width: 100%; }

/* アイコンだけの小さいボタン */
.ln-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-2);
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  font-size: var(--fs-2);
  line-height: 1;
  transition: background-color .12s ease, color .12s ease;
}

.ln-icon-btn:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }

/* ボタンの並び */
.ln-btns { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* --- 6.2 チップ ------------------------------------------------------------ */

.ln-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  font-size: var(--fs-0);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--text-2);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  vertical-align: middle;
}

.ln-chip.is-ja,    .ln-chip--ja    { color: var(--lane-ja); background: color-mix(in srgb, var(--lane-ja) 10%, transparent); border-color: color-mix(in srgb, var(--lane-ja) 30%, transparent); }
.ln-chip.is-en,    .ln-chip--en    { color: var(--lane-en); background: color-mix(in srgb, var(--lane-en) 10%, transparent); border-color: color-mix(in srgb, var(--lane-en) 30%, transparent); }
.ln-chip.is-level, .ln-chip--level { color: var(--text-2); background: var(--surface); border-color: var(--border-2); font-family: var(--font-mono); font-size: var(--fs-0); }
.ln-chip.is-ok,    .ln-chip--ok    { color: var(--ok); background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.ln-chip.is-warn,  .ln-chip--warn  { color: var(--warn); background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 32%, transparent); }
.ln-chip.is-info,  .ln-chip--info  { color: var(--info); background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.ln-chip.is-muted, .ln-chip--muted { color: var(--muted); background: transparent; border-style: dashed; }

/* 辞書になし＝先生に直してほしい印 */
.ln-chip.is-unknown,
.ln-chip--unknown {
  color: var(--warn);
  background: var(--warn-bg);
  border-color: color-mix(in srgb, var(--warn) 40%, transparent);
  border-style: dashed;
}

/* --- 6.3 入力 -------------------------------------------------------------- */

.ln-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.ln-label {
  font-size: var(--fs-1);
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: .02em;
}

.ln-label .ln-req { color: var(--brand); margin-left: 3px; }

.ln-hint { font-size: var(--fs-0); color: var(--muted); line-height: 1.5; }

.ln-input,
.ln-select,
.ln-textarea {
  width: 100%;
  padding: 7px 10px;
  font-size: var(--fs-3);
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
  transition: border-color .12s ease, box-shadow .12s ease;
  -webkit-appearance: none;
  appearance: none;
}

.ln-textarea { resize: vertical; min-height: 68px; line-height: 1.75; }

.ln-select {
  padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.ln-input:focus,
.ln-select:focus,
.ln-textarea:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 20%, transparent);
}

.ln-input.is-error,
.ln-textarea.is-error,
.ln-select.is-error { border-color: var(--danger); }

.ln-error { font-size: var(--fs-1); font-weight: 700; color: var(--danger); }

.ln-input::placeholder,
.ln-textarea::placeholder { color: var(--muted); }

/* チェック／ラジオ */
.ln-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}

.ln-check:hover { border-color: var(--border-2); }
.ln-check.is-on { border-color: color-mix(in srgb, var(--brand) 45%, transparent); background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
.ln-check input { margin-top: 4px; accent-color: var(--brand); flex: none; }
.ln-check-body { min-width: 0; }
.ln-check-name { font-weight: 700; font-size: var(--fs-2); }
.ln-check-sub  { font-size: var(--fs-0); color: var(--muted); }

/* トグル（設定用の行） */
.ln-switch-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.ln-switch-row:last-child { border-bottom: 0; }
.ln-switch-row .ln-switch-label { font-weight: 700; font-size: var(--fs-2); }
.ln-switch-row .ln-switch-desc  { font-size: var(--fs-0); color: var(--muted); }
.ln-switch-row .ln-switch-ctl   { margin-left: auto; flex: none; display: flex; align-items: center; gap: var(--sp-2); }
.ln-switch-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand); }

.ln-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
}

.ln-form-grid .ln-span-2 { grid-column: 1 / -1; }

/* --- 6.4 カード・パネル ---------------------------------------------------- */

.ln-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--sh-1);
}

.ln-card-pad { padding: var(--sp-4); }

.ln-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  box-shadow: var(--sh-1);
  overflow: hidden;
}

/* 見出し＝小さいアイコンタイル＋太字＋細い罫線（幼稚にしない） */
.ln-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 9px;
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.ln-section-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 13px;
  line-height: 1;
  border-radius: var(--r-1);
  background: var(--surface-3);
  border: 1px solid var(--border);
}

.ln-section-title {
  font-size: var(--fs-4);
  font-weight: 800;
  letter-spacing: .02em;
}

.ln-section-sub {
  font-size: var(--fs-1);
  color: var(--muted);
  font-weight: 500;
}

.ln-section-act { margin-left: auto; display: flex; gap: var(--sp-2); }

/* 空っぽの時 */
.ln-empty {
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-2);
  border: 1px dashed var(--border-2);
  border-radius: var(--r-3);
  background: var(--surface-sunk);
}

.ln-empty strong { display: block; color: var(--text-2); font-size: var(--fs-3); margin-bottom: 3px; }

/* 注意帯 */
.ln-note-bar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  font-size: var(--fs-1);
  line-height: 1.6;
  color: var(--warn);
  background: var(--warn-bg);
  border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent);
  border-radius: var(--r-2);
}

/* --- 6.5 表 ---------------------------------------------------------------- */

.ln-table { width: 100%; font-size: var(--fs-2); }

.ln-table th {
  text-align: left;
  font-size: var(--fs-0);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--muted);
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.ln-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.ln-table tr:last-child td { border-bottom: 0; }
.ln-table tbody tr:hover { background: var(--surface-3); }
.ln-table .ln-td-act { text-align: right; white-space: nowrap; width: 1%; }

.ln-table-wrap { overflow-x: auto; }

/* --- 6.6 モーダル ---------------------------------------------------------- */

.ln-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: var(--overlay);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: ln-fade .12s ease-out;
}

.ln-modal-card {
  width: min(720px, 100%);
  max-height: min(86vh, 900px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  box-shadow: var(--sh-3);
  overflow: hidden;
  animation: ln-pop .14s ease-out;
}

.ln-modal-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  background: var(--surface-3);
}

.ln-modal-title { font-size: var(--fs-5); font-weight: 800; }
.ln-modal-body { padding: var(--sp-5); overflow: auto; min-height: 0; }

.ln-modal-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--surface-3);
}

.ln-modal-foot .ln-foot-right { margin-left: auto; display: flex; gap: var(--sp-2); }

/* --- 6.7 トースト ---------------------------------------------------------- */

.ln-toasts {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.ln-toast {
  padding: 8px 16px;
  font-size: var(--fs-2);
  font-weight: 700;
  color: var(--surface);
  background: var(--text);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-2);
  animation: ln-pop .14s ease-out;
}

.ln-toast.is-error { background: var(--danger); color: #fff; }

/* =============================================================================
   7. アプリ骨格
   ============================================================================= */

/* --- 7.1 スプラッシュ（辞書読み込み中） ------------------------------------ */

.ln-splash {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: var(--bg);
  transition: opacity .18s ease;
}

.ln-splash.is-done { opacity: 0; pointer-events: none; }

.ln-splash-card { width: min(360px, 100%); text-align: center; }

.ln-splash-mark {
  display: inline-block;
  padding: 2px 10px 4px;
  font-size: var(--fs-7);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text);
  border-bottom: 3px solid var(--brand);
}

.ln-splash-sub {
  margin-top: 6px;
  font-size: var(--fs-1);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.ln-splash-bar {
  margin: var(--sp-5) auto var(--sp-2);
  height: 4px;
  width: 100%;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  overflow: hidden;
}

.ln-splash-bar > i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--brand);
  transition: width .25s ease;
}

.ln-splash-msg {
  font-size: var(--fs-1);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  min-height: 1.6em;
}

.ln-splash-msg.is-error { color: var(--danger); font-weight: 700; }

/* --- 7.2 画面の枠 ---------------------------------------------------------- */

.ln-app {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  height: 100dvh;
}

/* レッスン画面のように中で個別スクロールする画面 */
.ln-app.is-fixed { overflow: hidden; }

.ln-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.ln-main.is-flush { overflow: hidden; display: flex; flex-direction: column; }

.ln-wrap {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-5) var(--sp-7);
}

/* --- 7.3 ヘッダー（固定） -------------------------------------------------- */

.ln-head {
  position: sticky;
  top: 0;
  z-index: 100;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: var(--head-h);
  padding: 0 var(--sp-4);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(var(--head-h) + env(safe-area-inset-top, 0px));
}

.ln-head-brand {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: var(--fs-4);
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
}

.ln-head-brand .ln-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  align-self: center;
  flex: none;
}

.ln-head-brand small {
  font-size: var(--fs-0);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
}

.ln-head-sep {
  width: 1px;
  height: 22px;
  background: var(--border);
  flex: none;
}

.ln-head-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.ln-head-who {
  font-weight: 700;
  font-size: var(--fs-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ln-head-act { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); flex: none; }

.ln-head-timer {
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface);
}

/* モード切替（Solo / Group） */
.ln-seg {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
}

.ln-seg > button {
  padding: 3px 12px;
  font-size: var(--fs-1);
  font-weight: 700;
  color: var(--text-2);
  border-radius: 6px;
  white-space: nowrap;
}

.ln-seg > button.is-on {
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--sh-1);
}

/* =============================================================================
   8. ホーム画面
   ============================================================================= */

.ln-home-hero {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}

.ln-home-hero h1 { font-size: var(--fs-7); letter-spacing: -.01em; }

.ln-home-hero p {
  font-size: var(--fs-2);
  color: var(--muted);
  margin-top: 2px;
}

.ln-home-hero .ln-hero-act { margin-left: auto; display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* 個人 / グループ の2枚（明確に分ける＝SPEC R8） */
.ln-home-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  align-items: start;
}

.ln-home-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  box-shadow: var(--sh-1);
  overflow: hidden;
}

/* 上端の色帯で「個人」と「グループ」を一目で区別する */
.ln-home-col > .ln-home-col-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  border-top: 3px solid var(--accent-col, var(--brand));
  background: var(--surface-3);
}

.ln-home-col.is-solo  { --accent-col: var(--brand); }
.ln-home-col.is-group { --accent-col: var(--lane-en); }

.ln-home-col-head .ln-section-ico {
  color: var(--accent-col);
  border-color: color-mix(in srgb, var(--accent-col) 32%, transparent);
  background: color-mix(in srgb, var(--accent-col) 9%, transparent);
}

.ln-home-col-title { font-size: var(--fs-4); font-weight: 800; }
.ln-home-col-desc  { font-size: var(--fs-0); color: var(--muted); }
.ln-home-col-head .ln-btn,
.ln-home-col-head .ln-btn-ghost { margin-left: auto; }

.ln-home-col-body {
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-height: 46vh;
  overflow: auto;
}

/* 生徒カード / グループカード */
.ln-person {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  background: var(--surface);
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.ln-person:hover {
  border-color: var(--border-2);
  box-shadow: var(--sh-2);
}

.ln-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-2);
  font-size: var(--fs-3);
  font-weight: 800;
  color: var(--accent-col, var(--brand));
  background: color-mix(in srgb, var(--accent-col, var(--brand)) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-col, var(--brand)) 26%, transparent);
  letter-spacing: 0;
}

.ln-person.lang-ja { --accent-col: var(--lane-ja); }
.ln-person.lang-en { --accent-col: var(--lane-en); }

.ln-person-body { min-width: 0; flex: 1 1 auto; }

.ln-person-name {
  font-weight: 800;
  font-size: var(--fs-3);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ln-person-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
  font-size: var(--fs-0);
  color: var(--muted);
}

.ln-person-act { flex: none; display: flex; align-items: center; gap: 6px; }

/* 過去レッスン */
.ln-lesson-row-topic {
  display: inline-block;
  max-width: 22em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  color: var(--text-2);
}

.ln-date {
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  white-space: nowrap;
}

/* 設定 */
.ln-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--sp-5);
}

.ln-keys { display: flex; flex-direction: column; gap: 2px; }

.ln-key-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-2);
}

.ln-key-row:last-child { border-bottom: 0; }
.ln-key-row .ln-key-name { flex: 1 1 auto; min-width: 0; }

kbd, .ln-kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 7px;
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
  color: var(--text-2);
  background: var(--surface-3);
  border: 1px solid var(--border-2);
  border-bottom-width: 2px;
  border-radius: 5px;
  white-space: nowrap;
}

.ln-kbd.is-listening {
  color: var(--brand);
  border-color: var(--brand);
  background: var(--brand-soft);
}

/* =============================================================================
   9. 生徒・グループ編集
   ============================================================================= */

.ln-editor { display: flex; flex-direction: column; gap: var(--sp-5); }

.ln-editor-note {
  padding: 9px 12px;
  font-size: var(--fs-1);
  line-height: 1.65;
  color: var(--text-2);
  background: var(--info-bg);
  border: 1px solid color-mix(in srgb, var(--info) 26%, transparent);
  border-left: 3px solid var(--info);
  border-radius: var(--r-2);
}

/* 学習言語の選択＝大きめの2択（打ち間違えると全部ずれるので目立たせる） */
.ln-langpick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }

.ln-langpick label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-3);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}

.ln-langpick label:hover { border-color: var(--border-2); background: var(--surface-3); }
.ln-langpick input { accent-color: var(--brand); }

.ln-langpick label.is-on {
  border-color: var(--pick-col, var(--brand));
  background: color-mix(in srgb, var(--pick-col, var(--brand)) 8%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--pick-col, var(--brand));
}

.ln-langpick label.for-ja { --pick-col: var(--lane-ja); }
.ln-langpick label.for-en { --pick-col: var(--lane-en); }
.ln-langpick .ln-pick-title { font-weight: 800; font-size: var(--fs-2); }
.ln-langpick .ln-pick-sub   { font-size: var(--fs-0); color: var(--muted); }

/* メンバー選択 */
.ln-members {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--sp-2);
  max-height: 46vh;
  overflow: auto;
  padding: 2px;
}

.ln-member-count {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-1);
  color: var(--text-2);
}


/* =============================================================================
   10. レッスン画面
   　 実際のDOM（ui/lesson.js）
       .ln-lesson                     … 画面全体（縦）
         .ln-head                     … ヘッダー
           .ln-brand .ln-mode .ln-who .ln-attend .ln-select-level
           .ln-meta(.ln-lesson-no .ln-clock) .ln-engine .ln-head-actions
         .ln-cols                     … 2カラム
           .ln-col-left  ( section.ln-memo ＋ section.ln-ref )
           .ln-splitter                … ドラッグ用の仕切り（main.js が差し込む）
           .ln-col-right ( section.ln-notes )
   ============================================================================= */

.ln-lesson {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}

/* --- 10.1 ヘッダー --------------------------------------------------------- */

.ln-lesson > .ln-head {
  position: relative;
  flex: none;
  flex-wrap: wrap;
  row-gap: 4px;
  height: auto;
  min-height: calc(var(--head-h) + env(safe-area-inset-top, 0px));
  padding: 5px var(--sp-4);
  padding-top: calc(5px + env(safe-area-inset-top, 0px));
}

.ln-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-3);
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
  flex: none;
}

.ln-brand::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  flex: none;
}

/* Solo / Group */
.ln-mode {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  flex: none;
}

.ln-mode-btn.ln-chip,
.ln-mode-btn {
  padding: 2px 11px;
  font-size: var(--fs-1);
  color: var(--text-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}

.ln-mode-btn.is-on {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--sh-1);
}

/* 生徒・グループ・レベルの選択 */
.ln-who { display: flex; align-items: center; gap: 6px; min-width: 0; }

.ln-head .ln-select,
.ln-select-student,
.ln-select-group,
.ln-select-level {
  width: auto;
  max-width: 190px;
  min-height: 28px;
  padding: 2px 26px 2px 9px;
  font-size: var(--fs-2);
  background-color: var(--surface);
}

.ln-select-level { max-width: 110px; }

/* 出席（グループ時） */
.ln-attend {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  max-width: 40vw;
  overflow: hidden;
}

.ln-attend:empty { display: none; }

.ln-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  white-space: nowrap;
  flex: none;
}

.ln-lesson-no { color: var(--muted); }

.ln-clock {
  padding: 1px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  background: var(--surface);
}

/* 解析エンジンの状態 */
.ln-engine {
  font-size: var(--fs-0);
  color: var(--muted);
  white-space: nowrap;
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ln-engine:empty { display: none; }

.ln-head-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  flex: 0 1 auto;
}

.ln-btn-finish {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}

.ln-btn-finish:hover { background: var(--brand-ink); border-color: var(--brand-ink); }

:root[data-theme="dark"] .ln-btn-finish { color: #1C1917; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ln-btn-finish { color: #1C1917; }
}

/* --- 10.2 2カラム ---------------------------------------------------------- */

.ln-cols {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  /* 仕切りが入る前（lesson.js が作った直後）は2列。左は --ln-split で可変。 */
  grid-template-columns: minmax(240px, var(--ln-split, 46%)) minmax(280px, 1fr);
  background: var(--bg);
}

/* main.js が仕切りを差し込むと3列になる（仕切りの実幅＝11px） */
.ln-cols.has-splitter {
  grid-template-columns: minmax(240px, var(--ln-split, 46%)) 11px minmax(280px, 1fr);
}

.ln-col-left,
.ln-col-right {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.ln-col-left {
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow: hidden;         /* 中の memo / ref がそれぞれスクロールする */
}

.ln-col-right { background: var(--bg); overflow: hidden; }

/* 仕切り（main.js が pointerdown を拾って --ln-split を書き換える） */
.ln-splitter {
  position: relative;
  cursor: col-resize;
  background: var(--border);
  border: 0;
  padding: 0;
  touch-action: none;
  transition: background-color .12s ease;
}

.ln-splitter::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 34px;
  border-radius: var(--r-pill);
  background: var(--border-2);
}

.ln-splitter:hover,
.ln-splitter.is-dragging { background: color-mix(in srgb, var(--brand) 45%, var(--border)); }
.ln-splitter:hover::before,
.ln-splitter.is-dragging::before { background: #fff; }

body.ln-dragging { cursor: col-resize; user-select: none; }
body.ln-dragging * { user-select: none !important; }

/* --- 10.3 パネル共通の見出し帯 --------------------------------------------- */

.ln-memo-head,
.ln-ref-head,
.ln-notes-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface-3);
}

.ln-memo-title,
.ln-ref-title,
.ln-notes-title {
  flex: none;                       /* 見出しは縮めない（重なるので） */
  margin: 0;
  font-size: var(--fs-0);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* --- 10.4 TEACHER MEMO（自動解析） ----------------------------------------- */

.ln-memo {
  display: flex;
  flex-direction: column;
  flex: 1 1 58%;
  min-height: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.ln-lang-toggle { margin-left: auto; display: flex; gap: 3px; flex: none; }

.ln-lang-btn { cursor: pointer; }

.ln-lang-btn.is-on {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}

:root[data-theme="dark"] .ln-lang-btn.is-on { color: #1C1917; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ln-lang-btn.is-on { color: #1C1917; }
}

.ln-memo-input,
.ln-ref-input {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  padding: var(--sp-4);
  font-family: var(--font);
  font-size: var(--fs-4);
  line-height: 2.0;
  color: var(--text);
  background: transparent;
  border: 0;
  outline: none;
  resize: none;
  overflow: auto;
}

.ln-memo-input::placeholder,
.ln-ref-input::placeholder { color: var(--muted); }

.ln-memo-status {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--sp-4);
  font-size: var(--fs-0);
  color: var(--muted);
  border-top: 1px dashed var(--border);
  background: var(--surface-3);
}

.ln-memo-status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 解析が追いつかなかった行 */
.ln-memo-dirty {
  flex: none;
  max-height: 22vh;
  overflow: auto;
  padding: 6px var(--sp-4);
  border-top: 1px solid color-mix(in srgb, var(--warn) 34%, transparent);
  background: var(--warn-bg);
  font-size: var(--fs-1);
}

.ln-memo-dirty-item { display: flex; align-items: baseline; gap: 6px; padding: 1px 0; }
.ln-memo-dirty-label { flex: none; font-weight: 800; color: var(--warn); }
.ln-memo-dirty-text { color: var(--text-2); overflow-wrap: anywhere; }

.ln-spinner {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 2px solid var(--border-2);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: ln-spin .7s linear infinite;
  flex: none;
}

/* --- 10.5 REFERENCE TEXT（選択した所だけ解析） ------------------------------ */

.ln-ref {
  display: flex;
  flex-direction: column;
  flex: 1 1 42%;
  min-height: 0;
  background: var(--surface-sunk);
  --ln-input-bg: var(--surface-sunk);
}

.ln-ref-hint {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-0);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ln-ref-tools { margin-left: auto; display: flex; gap: 4px; flex: none; }

/* 下敷き（.ln-ref-hl / .ln-ref-measure）の上に透明な textarea を重ねる作り。
   位置合わせは reference.js が computedStyle を写して行うので、ここでは触らない。 */
.ln-ref-editor {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* 選択済み範囲の色（下敷きの中の印） */
.ln-ref-mark,
span.ln-ref-hl {
  border-radius: 3px;
  background: color-mix(in srgb, var(--al-5) 26%, transparent);
}

.ln-ref-pop {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
  box-shadow: var(--sh-2);
}

.ln-ref-lookup {
  flex: none;
  max-height: 30vh;
  overflow: auto;
  padding: 8px var(--sp-4);
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: var(--fs-2);
}

.ln-ref-lookup-head { display: flex; align-items: baseline; gap: 6px; font-weight: 800; }
.ln-ref-lookup-romaji { font-size: var(--fs-0); color: var(--muted); }
.ln-ref-lookup-meaning { color: var(--text-2); }
.ln-ref-lookup-miss { color: var(--warn); font-weight: 700; }

.ln-ref-status {
  flex: none;
  padding: 4px var(--sp-4);
  font-size: var(--fs-0);
  color: var(--muted);
  border-top: 1px dashed var(--border);
}

/* =============================================================================
   11. 学習ノート（LEARNING NOTES）
   ============================================================================= */

.ln-notes {
  position: relative;              /* 「新しいノート↓」バッジの基準 */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--bg);
}

.ln-notes-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--surface-3) 92%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.ln-notes-tabs { margin-left: auto; display: flex; gap: 3px; flex: none; }

.ln-notes-tab { cursor: pointer; }

.ln-notes-tab.is-on {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}

:root[data-theme="dark"] .ln-notes-tab.is-on { color: #1C1917; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ln-notes-tab.is-on { color: #1C1917; }
}

/* notes.js が display / gap / overflow をインラインで持つ。ここは余白だけ足す。 */
.ln-notes-body { padding: var(--sp-4); }

.ln-notes-newbadge {
  box-shadow: var(--sh-2);
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}

/* --- 11.1 レーン（Solo=1本／Group=日本語・英語の2本） ---------------------- */

.ln-lane {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  align-self: stretch;
}

.ln-lane-ja,
.ln-lane-en { --lane-col: var(--border-2); }
.ln-lane-ja { --lane-col: var(--lane-ja); }
.ln-lane-en { --lane-col: var(--lane-en); }

.ln-lane-ja > .ln-lane-head,
.ln-lane-en > .ln-lane-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  font-size: var(--fs-1);
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--lane-col);
  background: color-mix(in srgb, var(--lane-col) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--lane-col) 26%, transparent);
  border-top: 3px solid var(--lane-col);
  border-radius: var(--r-2);
}

.ln-lane-head:empty { display: none; }
.ln-lane-names { color: var(--muted); font-weight: 600; }

.ln-lane-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  counter-reset: ln-block;
}

.ln-lane-fold { align-self: flex-start; }

/* --- 11.2 1文ブロック ------------------------------------------------------ */

.ln-block {
  position: relative;
  counter-increment: ln-block;
  padding: 10px var(--sp-4) 12px 42px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--sh-1);
  animation: ln-block-in .15s ease-out;
}

.ln-block:hover { border-color: var(--border-2); }
.ln-block.is-active { border-color: color-mix(in srgb, var(--brand) 55%, transparent); box-shadow: var(--sh-2); }
.ln-block.is-pinned { border-left: 3px solid var(--brand); padding-left: 40px; }
.ln-block.is-homework { background: color-mix(in srgb, var(--pastel-green) 55%, var(--surface-2)); }

/* 出典で地の色を変える */
.ln-block[data-origin="reference"] { background: color-mix(in srgb, var(--pastel-sand) 45%, var(--surface-2)); }
.ln-block[data-origin="topic"]     { background: color-mix(in srgb, var(--pastel-green) 45%, var(--surface-2)); }
.ln-block[data-origin="manual"]    { background: var(--surface); }

/* 通し番号の丸バッジ（CSSカウンタ。data-n があればそちらを優先） */
.ln-block::before {
  content: counter(ln-block);
  position: absolute;
  left: 11px;
  top: 11px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  font-size: var(--fs-0);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 50%;
}

.ln-block[data-n]::before { content: attr(data-n); }

.ln-block-no {
  position: absolute;
  left: 11px;
  top: 11px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  font-size: var(--fs-0);
  font-weight: 800;
  line-height: 1;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: 50%;
}

/* 上段＝チップと操作ボタン */
.ln-block-head {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 4px;
  min-height: 22px;
}

.ln-block-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-0);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.ln-block-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: .28;
  transition: opacity .12s ease;
}

.ln-block:hover .ln-block-actions,
.ln-block:focus-within .ln-block-actions { opacity: 1; }

/* ブロック用の極小ボタン */
.ln-btn-xs {
  min-height: 22px;
  padding: 0 7px;
  font-size: var(--fs-0);
  font-weight: 700;
  border-radius: var(--r-1);
}

/* ブロックのチップ */
.ln-chip-lang   { color: var(--lane-ja); background: color-mix(in srgb, var(--lane-ja) 10%, transparent); border-color: color-mix(in srgb, var(--lane-ja) 28%, transparent); }
.ln-block[data-lang="en"] .ln-chip-lang { color: var(--lane-en); background: color-mix(in srgb, var(--lane-en) 10%, transparent); border-color: color-mix(in srgb, var(--lane-en) 28%, transparent); }
.ln-chip-level  { font-family: var(--font-mono); background: var(--surface); border-color: var(--border-2); }
.ln-chip-origin { color: var(--muted); background: transparent; border-style: dashed; }
.ln-chip-edited { color: var(--ok); background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.ln-chip-pin    { color: var(--brand); background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 34%, transparent); }
.ln-chip-hw     { color: var(--info); background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.ln-chip-miss   { color: var(--warn); background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 40%, transparent); border-style: dashed; }

/* 原文（大きめ・ruby付き） */
.ln-block-src {
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 2.1;
  letter-spacing: .01em;
  color: var(--text);
  overflow-wrap: anywhere;
}

.ln-block[data-lang="en"] .ln-block-src { font-size: 1.22rem; line-height: 1.6; }

/* ローマ字（小さくグレー） */
.ln-block-romaji {
  margin-top: 1px;
  font-size: var(--fs-1);
  line-height: 1.6;
  letter-spacing: .015em;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* 訳（色つきの対応が入る） */
.ln-block-dst {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font-size: 1.02rem;
  line-height: 1.9;
  color: var(--text);
  overflow-wrap: anywhere;
}

.ln-block[data-lang="en"] .ln-block-dst { line-height: 2.0; }

/* 訳を直す */
.ln-dst-edit {
  width: 100%;
  margin-top: 7px;
  padding: 7px 10px;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--focus);
  border-radius: var(--r-2);
  outline: none;
  resize: vertical;
}

.ln-dst-edit-bar { display: flex; align-items: center; gap: 6px; margin-top: 5px; }

/* 先生の一言メモ */
.ln-block-note {
  margin-top: 7px;
  padding: 5px 9px;
  font-size: var(--fs-1);
  line-height: 1.6;
  color: var(--text-2);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border-left: 2px solid var(--border-2);
  border-radius: 0 var(--r-1) var(--r-1) 0;
}

/* トピックの区切り行 */
.ln-topic-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 2px;
  border-bottom: 1px solid var(--border);
}

.ln-topic-label { font-size: var(--fs-2); font-weight: 800; color: var(--text-2); }
.ln-topic-sub { font-size: var(--fs-0); color: var(--muted); }

/* --- 11.3 対応（色リンク） SPEC R6 ----------------------------------------- */

.align-1  { --al: var(--al-1);  }
.align-2  { --al: var(--al-2);  }
.align-3  { --al: var(--al-3);  }
.align-4  { --al: var(--al-4);  }
.align-5  { --al: var(--al-5);  }
.align-6  { --al: var(--al-6);  }
.align-7  { --al: var(--al-7);  }
.align-8  { --al: var(--al-8);  }
.align-9  { --al: var(--al-9);  }
.align-10 { --al: var(--al-10); }
.align-11 { --al: var(--al-11); }
.align-12 { --al: var(--al-12); }

.align-1, .align-2, .align-3, .align-4, .align-5, .align-6,
.align-7, .align-8, .align-9, .align-10, .align-11, .align-12 {
  display: inline;
  padding: 0 1px;
  border-radius: 3px;
  color: var(--al);
  background: transparent;                                    /* 古い環境むけの保険 */
  background: color-mix(in srgb, var(--al) 12%, transparent);
  border-bottom: 2px solid var(--al);
  cursor: default;
  transition: background-color .1s ease, box-shadow .1s ease;
}

/* 番号（色だけに頼らない＝色覚多様性）。
   JS が <sup class="ln-align-n"> を入れる作りなので、そちらを本命にする。
   sup が無い実装のために data-i からの併記も残す（:has が無い環境ではこの規則ごと無視される）。 */
.ln-align-n {
  font-size: .58em;
  font-weight: 800;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  line-height: 0;
  vertical-align: super;
  opacity: .85;
  letter-spacing: 0;
  margin-right: 1px;
  color: var(--al, var(--muted));
}

.align-1:not(:has(.ln-align-n))[data-i]::after,
.align-2:not(:has(.ln-align-n))[data-i]::after,
.align-3:not(:has(.ln-align-n))[data-i]::after,
.align-4:not(:has(.ln-align-n))[data-i]::after,
.align-5:not(:has(.ln-align-n))[data-i]::after,
.align-6:not(:has(.ln-align-n))[data-i]::after,
.align-7:not(:has(.ln-align-n))[data-i]::after,
.align-8:not(:has(.ln-align-n))[data-i]::after,
.align-9:not(:has(.ln-align-n))[data-i]::after,
.align-10:not(:has(.ln-align-n))[data-i]::after,
.align-11:not(:has(.ln-align-n))[data-i]::after,
.align-12:not(:has(.ln-align-n))[data-i]::after,
.align-none:not(:has(.ln-align-n))[data-i]::after {
  content: attr(data-i);
  margin-left: 1px;
  font-size: .58em;
  font-weight: 800;
  font-family: var(--font-mono);
  vertical-align: super;
  line-height: 0;
  opacity: .85;
}

/* 13個目以降＝色を使い回さず、点線＋番号だけ */
.align-none {
  display: inline;
  padding: 0 1px;
  color: inherit;
  border-bottom: 2px dotted var(--border-2);
}

.align-none .ln-align-n { color: var(--muted); }

/* ホバー強調（原文側・訳文側の両方に .is-hi が付く） */
.align-1.is-hi,  .align-2.is-hi,  .align-3.is-hi,  .align-4.is-hi,
.align-5.is-hi,  .align-6.is-hi,  .align-7.is-hi,  .align-8.is-hi,
.align-9.is-hi,  .align-10.is-hi, .align-11.is-hi, .align-12.is-hi,
.align-1:hover,  .align-2:hover,  .align-3:hover,  .align-4:hover,
.align-5:hover,  .align-6:hover,  .align-7:hover,  .align-8:hover,
.align-9:hover,  .align-10:hover, .align-11:hover, .align-12:hover {
  background: color-mix(in srgb, var(--al) 26%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--al) 26%, transparent);
}

.align-none.is-hi,
.align-none:hover {
  background: color-mix(in srgb, var(--text) 10%, transparent);
  border-bottom-color: var(--muted);
}

/* ふりがなにも色を通す */
.align-1 rt,  .align-2 rt,  .align-3 rt,  .align-4 rt,  .align-5 rt,  .align-6 rt,
.align-7 rt,  .align-8 rt,  .align-9 rt,  .align-10 rt, .align-11 rt, .align-12 rt {
  color: color-mix(in srgb, var(--al) 78%, var(--text-2));
}

/* --- 11.4 Vocabulary ------------------------------------------------------- */

.ln-vocab {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 6px;
  margin-top: var(--sp-3);
}

.ln-vocab-title,
.ln-grammar-title {
  grid-column: 1 / -1;
  margin: 0 0 1px;
  font-size: var(--fs-0);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}

.ln-vocab-item {
  /* 見出し・読み・意味は1行ずつ／レベルチップと小ボタンは最後の行に並べる */
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 4px 5px;
  padding: 6px 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
  font-size: var(--fs-1);
  line-height: 1.5;
  min-width: 0;
}

.ln-vocab-item:hover { border-color: var(--border-2); }
.ln-vocab-item > * { max-width: 100%; }
.ln-vocab-head,
.ln-vocab-romaji,
.ln-vocab-meaning,
.ln-vocab-ex { flex: 1 0 100%; }

.ln-vocab-head {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
  font-size: var(--fs-3);
  font-weight: 800;
  line-height: 1.9;
  overflow-wrap: anywhere;
}

.ln-vocab-head rt { font-size: .5em; }
.ln-vocab-head .ln-chip { font-size: var(--fs-0); font-weight: 700; }

.ln-vocab-romaji { display: block; font-size: var(--fs-0); color: var(--muted); letter-spacing: .01em; overflow-wrap: anywhere; }
.ln-vocab-meaning { display: block; font-size: var(--fs-2); color: var(--text-2); overflow-wrap: anywhere; }
.ln-vocab-ex { display: block; margin-top: 2px; padding-left: 8px; border-left: 1px solid var(--border); font-size: var(--fs-0); color: var(--muted); }
/* 語義の切り替え（▾）は、点に見えないよう枠を付けて「押せる物」にする */
.ln-vocab-switch {
  min-height: 19px;
  padding: 0 7px;
  font-size: var(--fs-1);
  line-height: 1.4;
  color: var(--muted);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
}

.ln-vocab-switch:hover { color: var(--text); border-color: var(--border-2); }
.ln-vocab-focus { margin-left: auto; }
.ln-vocab-item .ln-btn-xs { opacity: .7; }
.ln-vocab-item:hover .ln-btn-xs { opacity: 1; }
.ln-vocab-ex:empty { display: none; }

/* --- 11.5 Grammar ---------------------------------------------------------- */

.ln-grammar { margin-top: var(--sp-3); }

.ln-grammar-item {
  padding: 7px 11px;
  background: color-mix(in srgb, var(--pastel-sand) 55%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warn) 24%, var(--border));
  border-left: 3px solid var(--warn);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  font-size: var(--fs-2);
  line-height: 1.7;
}

:root[data-theme="dark"] .ln-grammar-item { background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ln-grammar-item { background: color-mix(in srgb, var(--warn) 10%, var(--surface)); }
}

.ln-grammar-item + .ln-grammar-item { margin-top: 5px; }

.ln-grammar-name { display: inline-block; font-weight: 800; font-size: var(--fs-3); line-height: 1.9; margin-right: 6px; }
.ln-grammar-meaning { display: block; color: var(--text-2); }
.ln-grammar-formation { display: block; margin-top: 1px; font-family: var(--font-mono); font-size: var(--fs-0); color: var(--muted); }
.ln-grammar-note { display: block; margin-top: 1px; font-size: var(--fs-0); color: var(--muted); font-style: italic; }

.ln-grammar-ex { margin-top: 4px; padding-left: 9px; border-left: 1px solid var(--border-2); font-size: var(--fs-1); }
.ln-grammar-ex li { padding: 1px 0; overflow-wrap: anywhere; }
.ln-grammar-ex-src { color: var(--text); }
.ln-grammar-ex-dst { color: var(--muted); margin-left: 7px; }

/* 小見出しの汎用（他の担当が使ってもよい） */
.ln-sub-label {
  display: block;
  margin: var(--sp-3) 0 4px;
  font-size: var(--fs-0);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}

/* =============================================================================
   12. オーバーレイ（Topics / 会話ログ / 教材Library）
   ============================================================================= */

html.ln-noscroll, body.ln-noscroll { overflow: hidden; }

.ln-overlay {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
}

.ln-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: ln-fade .12s ease-out;
}

.ln-overlay__panel {
  position: relative;
  z-index: 1;
  width: min(940px, 100%);
  max-height: min(88dvh, 900px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  box-shadow: var(--sh-3);
  overflow: hidden;
  animation: ln-pop .14s ease-out;
}

/* アイコンだけのボタン（× など） */
.ln-btn--icon {
  min-height: 30px;
  width: 30px;
  padding: 0;
  font-size: var(--fs-3);
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.ln-btn--icon:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }

/* --- 12.1 Topics ----------------------------------------------------------- */

/* タイルの最小幅はここで一括して決める（狭い画面では下で上書き） */
.ln-topics { --ln-tile-min: 210px; }

.ln-topics__panel { width: min(980px, 100%); }

/* JS は hidden ＋ inline style で開閉する。is-open は「開いている」印＆保険。 */
.ln-overlay.is-open { display: flex; }

.ln-topics__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border);
  background: var(--surface-3);
}

.ln-topics__head h2,
.ln-topics__head h3 { font-size: var(--fs-5); font-weight: 800; }

.ln-topics__close { flex: none; }

/* ヘッダーの並び：［もどる］パンくず　タブ　…　検索　✕ */
.ln-topics__back { flex: none; }

.ln-topics__tabs {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: none;
  margin-right: auto;        /* ここから右は検索と✕ */
}

.ln-topics__langlabel {
  font-size: var(--fs-1);
  color: var(--muted);
  white-space: nowrap;
}

/* 日本語 / English の切替タブ（グループレッスンの時だけ出る） */
.ln-tab {
  padding: 3px 13px;
  font-size: var(--fs-1);
  font-weight: 700;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
}

.ln-tab:hover { border-color: var(--border-2); color: var(--text); }

.ln-tab.is-on {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}

:root[data-theme="dark"] .ln-tab.is-on { color: #1C1917; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ln-tab.is-on { color: #1C1917; }
}

.ln-topics__search {
  flex: 0 1 240px;
  min-width: 110px;
  min-height: 30px;
  padding: 3px 12px;
  font-size: var(--fs-2);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}

.ln-topics__search::placeholder { color: var(--muted); }

.ln-topics__search:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent);
}

.ln-topics__crumb {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: var(--fs-1);
  color: var(--muted);
  min-width: 0;
}

.ln-crumb__item { color: var(--text-2); font-weight: 700; }
.ln-crumb__item:last-child { color: var(--brand); }
.ln-crumb__sep { color: var(--border-2); }

.ln-topics__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
}

.ln-topics__foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--surface-3);
  font-size: var(--fs-1);
  color: var(--muted);
}

.ln-topics__chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

/* 中身のかたまり（最近使った／場面をえらぶ／話題をえらぶ／質問） */
.ln-topics__sec + .ln-topics__sec { margin-top: var(--sp-5); }

.ln-topics__h {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: var(--fs-3);
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--text);
  padding-bottom: 6px;
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.ln-topics__h rt { font-size: .5em; }

/* Step3 の見出し行（話題名 ＋［もう一問］） */
.ln-topics__step3head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}

.ln-topics__step3head .ln-topics__h {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
  font-size: var(--fs-5);
}

.ln-topics__step3head .ln-btn,
.ln-topics__step3head .ln-btn--ghost { flex: none; align-self: center; }

/* 「最近使った」だけ少し詰める */
.ln-topics__recent .ln-topics__h { margin-bottom: var(--sp-2); }

/* 検索結果の行の並び */
.ln-topics__results {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* 見つからない／読み込み中／未整備 */
.ln-topics__empty {
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-2);
  line-height: 1.8;
}

.ln-topics__notready {
  text-align: left;
  padding: var(--sp-5);
  border: 1px dashed var(--border-2);
  border-radius: var(--r-3);
  background: var(--surface-sunk);
}

.ln-topics__notready strong { color: var(--text-2); }
.ln-topics__notready p + p { margin-top: 6px; }

.ln-topics__hint {
  font-size: var(--fs-1);
  color: var(--muted);
  line-height: 1.7;
}

/* 場面・話題のタイル（grid = 場面/話題どちらも同じ器） */
.ln-topics__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--ln-tile-min, 210px), 1fr));
  gap: var(--sp-2);
}

.ln-topics__grid--sit { --ln-tile-min: 210px; }
.ln-topics__grid--top { --ln-tile-min: 240px; }

/* 質問カードの並び */
.ln-topics__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--sp-2);
}

.ln-tile {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 2px 10px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--sh-1);
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}

.ln-tile:hover { border-color: var(--border-2); box-shadow: var(--sh-2); }

.ln-tile__emoji { flex: none; font-size: 18px; line-height: 1.4; width: 22px; text-align: center; }
.ln-tile__label { flex: 1 1 auto; min-width: 0; font-weight: 800; font-size: var(--fs-3); line-height: 1.4; }
.ln-tile__sub { flex: 1 0 100%; padding-left: 32px; font-size: var(--fs-0); color: var(--muted); line-height: 1.4; }

/* 一覧（検索結果など） */
.ln-row {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.ln-row:hover { background: var(--surface-3); }
.ln-row__q { display: block; font-weight: 700; font-size: var(--fs-3); line-height: 1.8; }
.ln-row__sub { display: block; font-size: var(--fs-1); color: var(--text-2); }
.ln-row__path { display: block; font-size: var(--fs-0); color: var(--muted); }

/* 質問カード（Conversation Starter） */
.ln-starter {
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--sh-1);
}

.ln-starter.is-used { opacity: .62; }

/* キーボードで選んでいるカード（↑↓←→ の現在地） */
.ln-starter.is-spot {
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent), var(--sh-2);
}
.ln-starter__head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 3px; }
.ln-starter__q { font-size: 1.22rem; font-weight: 700; line-height: 2.1; overflow-wrap: anywhere; }
.ln-starter__romaji { font-size: var(--fs-1); color: var(--muted); }
.ln-starter__trans { font-size: var(--fs-3); color: var(--text-2); margin-top: 2px; }

.ln-starter__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}

.ln-starter__mh {
  font-size: var(--fs-0);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.ln-starter__vocab,
.ln-starter__grammar { font-size: var(--fs-2); color: var(--text-2); line-height: 1.7; }

.ln-starter__foot { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }

/* 語彙リスト */
.ln-list { border: 1px solid var(--border); border-radius: var(--r-2); overflow: hidden; }
.ln-list__head { padding: 5px 10px; font-size: var(--fs-0); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--surface-3); border-bottom: 1px solid var(--border); }
.ln-list__item { display: flex; flex-flow: row wrap; align-items: baseline; gap: 2px 7px; padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: var(--fs-2); }
.ln-list__item:last-child { border-bottom: 0; }
.ln-list__item > .ln-list__head { flex: 1 1 auto; font-weight: 700; font-size: var(--fs-3); background: none; border: 0; padding: 0; text-transform: none; letter-spacing: 0; color: var(--text); }
.ln-list__sub { flex: 1 0 100%; font-size: var(--fs-0); color: var(--muted); }
/* ローマ字は __head の中に入ることがある（topics.js）。その時は横に小さく続ける。 */
.ln-list__romaji { flex: 1 0 100%; font-size: var(--fs-0); color: var(--muted); }
.ln-list__head > .ln-list__romaji { flex: none; margin-left: 6px; font-weight: 400; }
.ln-list__mean { flex: 1 0 100%; color: var(--text-2); }

/* Topics のチップ類 */
.ln-chip--lv     { font-family: var(--font-mono); background: var(--surface); border-color: var(--border-2); }
.ln-chip--w      { color: var(--info); background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 28%, transparent); text-transform: uppercase; }
.ln-chip--recent { color: var(--ok); background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.ln-chip--used   { color: var(--muted); background: transparent; border-style: dashed; }
.ln-chip--lang   { color: var(--text-2); background: var(--surface-3); }

/* --- 12.2 会話ログ（小さい浮きパネル） ------------------------------------- */

.ln-tlog {
  position: fixed;
  top: calc(var(--head-h) + 8px + env(safe-area-inset-top, 0px));
  right: 12px;
  z-index: 190;
  width: min(360px, calc(100vw - 24px));
  max-height: min(70dvh, 620px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-3);
  box-shadow: var(--sh-3);
  overflow: hidden;
  animation: ln-pop .14s ease-out;
}

.ln-tlog__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px var(--sp-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface-3);
}

.ln-tlog__title { font-size: var(--fs-3); font-weight: 800; }
.ln-tlog__count { font-size: var(--fs-0); color: var(--muted); }
.ln-tlog__head .ln-btn--icon { margin-left: auto; }

.ln-tlog__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.ln-tlog__empty { padding: var(--sp-4) 0; text-align: center; color: var(--muted); font-size: var(--fs-2); }

.ln-tlog__row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-2);
}

.ln-tlog__row:last-child { border-bottom: 0; }
.ln-tlog__time { flex: none; font-family: var(--font-mono); font-size: var(--fs-0); color: var(--muted); font-variant-numeric: tabular-nums; }
.ln-tlog__kind { flex: none; font-size: var(--fs-0); font-weight: 800; letter-spacing: .04em; color: var(--muted); }
.ln-tlog__label { min-width: 0; overflow-wrap: anywhere; }
.ln-tlog__row--situation .ln-tlog__kind { color: var(--brand); }
.ln-tlog__row--topic .ln-tlog__kind { color: var(--info); }
.ln-tlog__row--free .ln-tlog__kind { color: var(--muted); font-style: italic; }

/* --- 12.3 教材Library ------------------------------------------------------ */

.ln-lib__panel { width: min(1000px, 100%); }

.ln-lib--inline { position: static; display: block; padding: 0; }
.ln-lib--inline .ln-lib__panel { width: 100%; max-height: none; box-shadow: none; border-radius: var(--r-3); animation: none; }

.ln-lib__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border);
  background: var(--surface-3);
}

.ln-lib__title { font-size: var(--fs-5); font-weight: 800; }
.ln-lib__hint { font-size: var(--fs-1); color: var(--muted); }
.ln-lib__head .ln-btn--icon { margin-left: auto; }

/* ドロップ領域（ここが一覧の器も兼ねる） */
.ln-lib__drop {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--sp-4) var(--sp-5);
  transition: background-color .12s ease, box-shadow .12s ease;
}

.ln-lib__drop.is-over {
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 2px var(--brand);
}

.ln-lib__empty {
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--muted);
  font-size: var(--fs-2);
  border: 1px dashed var(--border-2);
  border-radius: var(--r-3);
}

.ln-lib__list { display: flex; flex-direction: column; gap: 6px; list-style: none; margin: 0; padding: 0; }

.ln-lib__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
}

.ln-lib__item:hover { border-color: var(--border-2); }

.ln-lib__thumb {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  font-size: 15px;
  color: var(--muted);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-1);
}

.ln-lib__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ln-lib__icon { font-size: 15px; line-height: 1; }
.ln-lib__meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ln-lib__name { display: block; font-weight: 700; font-size: var(--fs-3); line-height: 1.5; overflow-wrap: anywhere; }
.ln-lib__sub { display: block; font-size: var(--fs-0); color: var(--muted); }
.ln-lib__note { font-size: var(--fs-1); color: var(--text-2); }
.ln-lib__usage { font-size: var(--fs-0); color: var(--muted); }
.ln-lib__acts { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: wrap; max-width: 60%; }
.ln-lib__renameinput { width: 100%; padding: 3px 8px; font-size: var(--fs-3); border: 1px solid var(--focus); border-radius: var(--r-1); background: var(--surface); outline: none; }

.ln-lib__foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--surface-3);
  font-size: var(--fs-1);
  color: var(--muted);
}

/* プレビュー */
.ln-lib__viewer {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.ln-lib__viewerhead {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border);
  background: var(--surface-3);
}

.ln-lib__viewername { font-weight: 800; overflow-wrap: anywhere; }
.ln-lib__viewerbody { flex: 1 1 auto; min-height: 0; overflow: auto; padding: var(--sp-4); background: var(--surface-sunk); }

.ln-lib__img { max-width: 100%; margin: 0 auto; border-radius: var(--r-2); box-shadow: var(--sh-1); }
.ln-lib__pdf, .ln-lib__video, .ln-lib__full { width: 100%; height: 70dvh; border: 0; border-radius: var(--r-2); background: var(--surface); }

.ln-lib__pre, .ln-lib__code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  line-height: 1.75;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
}

.ln-lib__md { font-size: var(--fs-3); line-height: 1.9; padding: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2); }
.ln-lib__md h1, .ln-lib__md h2, .ln-lib__md h3 { margin: 1em 0 .4em; }
.ln-lib__md p { margin: .5em 0; }
.ln-lib__md ul, .ln-lib__md ol { margin: .5em 0 .5em 1.4em; list-style: revert; }
.ln-lib__md code { font-family: var(--font-mono); font-size: .92em; padding: 1px 5px; background: var(--surface-3); border-radius: var(--r-1); }

/* --- 12.4 Summary（Finish Lesson＝まとめ画面 ui/summary.js） ----------------
       .ln-sum                       … 画面全体（縦・ヘッダー固定・中だけスクロール）
         .ln-sum-head(.ln-head)      … 戻る / タイトル / メタ / 操作ボタン
         .ln-sum-tabs(.ln-seg)       … 日本語 / English（グループの時だけ）
         .ln-sum-body(.ln-scroll)    … ここだけスクロール
           .ln-sum-panel(.ln-wrap)   … 1言語ぶん
             .ln-sum-lang            … どちら向けかの帯
             .ln-sum-sec(.ln-card)   … 1セクション（見出しは .ln-section-head）
         .ln-sum-foot                … 一言そえる帯
   --------------------------------------------------------------------------- */

.ln-sum {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}

/* 読み込み中は中身を触らせない（ボタンは JS 側で disabled になる） */
.ln-sum.is-busy .ln-sum-body { opacity: .5; pointer-events: none; }
.ln-sum.is-busy .ln-sum-head { cursor: progress; }

.ln-sum-head {
  flex: none;
  position: relative;
  z-index: 3;
  flex-wrap: wrap;
  row-gap: 4px;
  height: auto;
  min-height: calc(var(--head-h) + env(safe-area-inset-top, 0px));
  padding-top: calc(5px + env(safe-area-inset-top, 0px));
  padding-bottom: 5px;
}

.ln-sum-title {
  flex: none;
  font-size: var(--fs-4);
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.ln-sum-meta {
  min-width: 0;
  font-size: var(--fs-1);
  color: var(--text-2);
}

.ln-sum-actions { flex: none; }

.ln-sum-tabs {
  flex: none;
  align-self: center;
  margin-top: var(--sp-3);
}

.ln-sum-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* 1言語ぶんの中身（.ln-wrap が幅と余白を持つ） */
.ln-sum-panel { min-width: 0; }

.ln-sum-lang {
  align-items: center;
  margin-bottom: var(--sp-4);
}

/* --- セクションの箱 --- */
.ln-sum-sec { margin-bottom: var(--sp-4); }
.ln-sum-sec:last-child { margin-bottom: 0; }
.ln-sum-sec-body { min-width: 0; }

/* --- チェックの行（トピック・ことば） --- */
.ln-sum-checks {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ln-sum-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 5px 8px;
  border-radius: var(--r-2);
  font-size: var(--fs-3);
  line-height: 1.8;
  cursor: pointer;
}

.ln-sum-check:hover { background: var(--surface-3); }
.ln-sum-check input { flex: none; margin-top: 6px; accent-color: var(--brand); }
.ln-sum-check:has(input:checked) .ln-sum-check-body { color: var(--text); }
.ln-sum-check:has(input:not(:checked)) { color: var(--muted); }

.ln-sum-check-body,
.ln-sum-check-label {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* --- 今日のことば --- */
.ln-sum-words {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0 var(--sp-4);
}

.ln-sum-word {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  min-width: 0;
}

.ln-sum-word-head { font-weight: 800; }
.ln-sum-word-head rt { font-size: .5em; }
.ln-sum-word-mean { overflow-wrap: anywhere; }

/* --- 候補チップ（よくできた／直す／次の一歩／前回使った教材） --- */
.ln-sum-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.ln-sum-chips > .ln-chip {
  align-items: baseline;
  max-width: 100%;
  padding: 3px 11px;
  font-size: var(--fs-1);
  line-height: 1.7;
  text-align: left;
  white-space: normal;
  cursor: pointer;
}

.ln-sum-chips > .ln-chip:hover { border-color: var(--border-2); }
.ln-sum-chip-main { font-weight: 700; }
.ln-sum-chip-sub  { font-weight: 500; color: var(--muted); }

/* --- 自分で書く行 --- */
.ln-sum-free { margin-top: var(--sp-3); }

/* --- 選んだもの（この順番でPDFに載る） --- */
.ln-sum-chosen {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--sp-3);
}

.ln-sum-chosen:empty { display: none; }

.ln-sum-chosen-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 5px;
  font-size: var(--fs-2);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
}

.ln-sum-chosen-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  font-weight: 800;
  color: #fff;
  background: var(--brand);
  border-radius: var(--r-pill);
}

:root[data-theme="dark"] .ln-sum-chosen-n { color: #1C1917; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ln-sum-chosen-n { color: #1C1917; }
}

.ln-sum-chosen-t { min-width: 0; overflow-wrap: anywhere; }

/* --- おすすめ教材 --- */
.ln-sum-res-form {
  align-items: center;
  margin-bottom: var(--sp-3);
}

/* .ln-input は width:100% なので、1行に並ぶよう上書きする */
.ln-sum-res-form > .ln-input {
  width: auto;
  flex: 1 1 170px;
  min-width: 120px;
}

.ln-sum-res-form > .ln-input.u-grow { flex: 2 1 240px; }
.ln-sum-res-form > .ln-seg { flex: none; }

.ln-sum-res-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ln-sum-res {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 6px 8px 6px 10px;
  font-size: var(--fs-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
}

.ln-sum-res-title { min-width: 0; overflow-wrap: anywhere; }
.ln-sum-res-url   { flex: 1 1 100%; }
.ln-sum-res > .ln-icon-btn { margin-left: auto; }

/* --- 宿題 --- */
.ln-sum-hw {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.ln-sum-hw-item {
  padding: 9px 12px 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
}

.ln-sum-hw-item:hover { border-color: var(--border-2); }

.ln-sum-hw-head { align-items: center; }

.ln-sum-hw-n {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-family: var(--font-mono);
  font-size: var(--fs-0);
  font-weight: 800;
  color: var(--text-2);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
}

.ln-sum-hw-head .ln-btn-ghost { opacity: .6; }
.ln-sum-hw-item:hover .ln-btn-ghost,
.ln-sum-hw-item:focus-within .ln-btn-ghost { opacity: 1; }

.ln-sum-hw-prompt { margin-top: 5px; line-height: 1.7; }

.ln-sum-hw-q {
  margin-top: 3px;
  font-size: var(--fs-4);
  font-weight: 700;
  line-height: 2.0;
  overflow-wrap: anywhere;
}

.ln-sum-hw-q rt { font-size: .5em; }

.ln-sum-hw-model {
  margin-top: 3px;
  padding-left: 10px;
  border-left: 2px solid color-mix(in srgb, var(--brand) 34%, transparent);
  color: var(--text-2);
  line-height: 1.95;
  overflow-wrap: anywhere;
}

.ln-sum-hw-model rt { font-size: .5em; }
.ln-sum-hw-model .swap { font-style: normal; font-weight: 700; color: var(--brand); }

.ln-sum-hw-opts {
  margin-top: 4px;
  font-family: var(--font-mono);
  letter-spacing: .01em;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.ln-sum-hw-edit {
  padding: var(--sp-3);
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-2);
}

.ln-sum-hw-edit .ln-input { width: 100%; }

/* --- PDFプレビュー --- */
.ln-sum-preview {
  width: min(1180px, 100%);
  margin: var(--sp-4) auto 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--sh-2);
  overflow: hidden;
}

.ln-sum-preview-bar {
  align-items: center;
  padding: 6px var(--sp-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface-3);
}

.ln-sum-preview-frame {
  display: block;
  width: 100%;
  height: min(72dvh, 900px);
  border: 0;
  background: #fff;
}

/* --- 下の帯 --- */
.ln-sum-foot {
  flex: none;
  padding: 9px var(--sp-5);
  padding-bottom: calc(9px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.ln-sum-note { line-height: 1.7; }

/* --- 12.5 こまごま（各モジュールが少しだけ使うクラス） --------------------- */

/* 教材Library：ファイル選択の <input> は隠す／ドラッグ中の見た目は is-over と同じ */
.ln-lib { min-width: 0; }
.ln-lib__file { display: none !important; }

.ln-lib__drop.is-drag {
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 2px var(--brand);
}

/* 会話ログの <ol> */
.ln-tlog__list { display: flex; flex-direction: column; }

/* 学習ノート：Soloレーン（見出しを持たない1本レーン） */
.ln-lane-solo { --lane-col: var(--border-2); flex: 1 1 auto; }
.ln-lane-solo > .ln-lane-head { display: none; }

.ln-lane-title { font-weight: 800; font-size: var(--fs-1); letter-spacing: .06em; }

.ln-lane.is-collapsed > .ln-lane-head { opacity: .65; }
.ln-lane.is-collapsed .ln-lane-list { display: none; }

/* 「重点にする」で選ばれた語 */
.ln-vocab-item.is-focus {
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  background: color-mix(in srgb, var(--brand) 7%, var(--surface));
}

/* レッスンヘッダーの出席 */
.ln-attend-chip {
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

.ln-attend-empty { font-size: var(--fs-0); color: var(--muted); white-space: nowrap; }

/* 5つのルールを出す丸ボタン（大きさは rules.js が inline で持つ） */
.ln-btn-rules { flex: none; font-size: 16px; }
.ln-btn-rules:hover { border-color: var(--brand); background: var(--brand-soft); }

/* 起動が終わらない時に出る逃げ道ボタン */
.ln-boot-escape { display: inline-flex; }

/* Reference Text に .txt / .md をドラッグしている最中 */
.ln-ref.is-drop {
  background: color-mix(in srgb, var(--brand) 5%, var(--surface));
  box-shadow: inset 0 0 0 2px var(--brand);
}


/* =============================================================================
   13. レスポンシブ
      1024px未満 … 左右 → 上下2段
      768px未満  … タブ切替（.ln-cols[data-pane] が付いた時だけ片方表示）
   ============================================================================= */

/* レッスン画面のタブ（狭い画面でだけ出す。main.js が差し込む） */
.ln-tabs {
  display: none;
  flex: none;
  gap: 2px;
  padding: 5px var(--sp-3);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.ln-tabs > button {
  flex: 1 1 0;
  padding: 6px 8px;
  font-size: var(--fs-2);
  font-weight: 700;
  color: var(--muted);
  border-radius: var(--r-2);
  border-bottom: 2px solid transparent;
}

.ln-tabs > button.is-on {
  color: var(--brand);
  background: var(--brand-soft);
  border-bottom-color: var(--brand);
}

@media (max-width: 1180px) {
  .ln-topics__cards { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .ln-topics { --ln-tile-min: 170px; }
}

@media (max-width: 1023px) {
  .ln-home-split { grid-template-columns: 1fr; }
  .ln-home-col-body { max-height: none; }

  /* 上下2段 */
  .ln-cols,
  .ln-cols.has-splitter {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(220px, 44%) minmax(0, 1fr);
  }

  .ln-col-left { border-right: 0; border-bottom: 1px solid var(--border); }
  .ln-splitter { display: none; }

  /* グループの2レーンも縦に積む */
  .ln-notes-body { --ln-notes-display: block; }
  .ln-lane + .ln-lane { margin-top: var(--sp-3); }

  /* まとめ画面：ヘッダーが2段になっても中身がスクロールできるように */
  .ln-sum-head { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .ln-sum-words { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  :root { --head-h: 52px; }

  .ln-wrap { padding: var(--sp-4) var(--sp-3) var(--sp-6); }
  .ln-home-hero h1 { font-size: var(--fs-6); }
  .ln-form-grid,
  .ln-settings-grid,
  .ln-langpick,
  .ln-members { grid-template-columns: 1fr; }
  .ln-vocab { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .ln-block { padding-left: 38px; }
  .ln-head { gap: var(--sp-2); padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .ln-head-brand small { display: none; }
  .ln-brand { font-size: var(--fs-2); }
  .ln-engine { display: none; }
  .ln-attend { max-width: 100%; }

  /* レッスン画面のヘッダーは3行に折り返す（切れるより折る） */
  .ln-lesson > .ln-head { padding: 4px var(--sp-3); gap: 6px; }
  .ln-ref-hint { display: none; }
  .ln-lesson-no { display: none; }
  .ln-meta { flex: 0 1 auto; font-size: var(--fs-0); }
  .ln-who { flex: 1 1 100%; }
  .ln-head .ln-select,
  .ln-select-student,
  .ln-select-group { max-width: 100%; flex: 1 1 auto; }
  .ln-select-level { flex: none; max-width: 92px; }
  .ln-head-actions { gap: 4px; }
  .ln-head-actions .ln-btn { min-height: 28px; padding: 3px 9px; font-size: var(--fs-1); }

  .ln-modal { padding: 0; align-items: flex-end; }
  .ln-modal-card { max-height: 92dvh; width: 100%; border-radius: var(--r-4) var(--r-4) 0 0; }
  .ln-modal-body { padding: var(--sp-4); }
  .ln-modal-head, .ln-modal-foot { padding-left: var(--sp-4); padding-right: var(--sp-4); }

  .ln-overlay { padding: 0; align-items: stretch; }
  .ln-overlay__panel { width: 100%; max-height: 100dvh; border-radius: 0; border: 0; }
  .ln-topics__body, .ln-lib__drop { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .ln-topics__head, .ln-topics__foot, .ln-lib__head, .ln-lib__foot { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .ln-tlog { left: 8px; right: 8px; width: auto; }

  .ln-person { flex-wrap: wrap; }
  .ln-person-act { width: 100%; }
  .ln-person-act .ln-btn { flex: 1 1 auto; }

  /* タブ切替。印が無いときは上下2段のまま（安全側）。
     印は2通り受ける＝ main.js の .ln-cols[data-pane="left|right"] と
     クラス版の .ln-cols.is-tab-left / .is-tab-right（どちらでも同じ動き）。 */
  .ln-tabs { display: flex; }

  .ln-cols[data-pane],
  .ln-cols[data-pane].has-splitter,
  .ln-cols.is-tab-left,
  .ln-cols.is-tab-right,
  .ln-cols.is-tab-left.has-splitter,
  .ln-cols.is-tab-right.has-splitter { grid-template-rows: minmax(0, 1fr); }

  .ln-cols[data-pane="left"]  > .ln-col-right,
  .ln-cols.is-tab-left        > .ln-col-right { display: none; }
  .ln-cols[data-pane="right"] > .ln-col-left,
  .ln-cols.is-tab-right       > .ln-col-left  { display: none; }

  .ln-cols[data-pane] > .ln-col-left,
  .ln-cols[data-pane] > .ln-col-right,
  .ln-cols.is-tab-left  > .ln-col-left,
  .ln-cols.is-tab-left  > .ln-col-right,
  .ln-cols.is-tab-right > .ln-col-left,
  .ln-cols.is-tab-right > .ln-col-right { grid-row: 1; grid-column: 1; }

  .ln-cols[data-pane] > .ln-col-left,
  .ln-cols.is-tab-left > .ln-col-left,
  .ln-cols.is-tab-right > .ln-col-left { border-bottom: 0; }

  /* 狭い画面では仕切りは出さない（タブで切り替える） */
  .ln-cols.is-tab-left > .ln-splitter,
  .ln-cols.is-tab-right > .ln-splitter { display: none; }

  /* まとめ画面：ヘッダーの操作ボタンは2段目へ回す（切れさせない） */
  .ln-sum-head { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .ln-sum-title { font-size: var(--fs-3); }
  .ln-sum-actions { flex: 1 1 100%; justify-content: flex-end; }
  .ln-sum-tabs { margin-top: var(--sp-2); }
  .ln-sum-res-form > .ln-input,
  .ln-sum-res-form > .ln-input.u-grow { flex: 1 1 100%; }
  .ln-sum-preview-frame { height: 60dvh; }
  .ln-sum-foot { padding-left: var(--sp-4); padding-right: var(--sp-4); }

  /* セクション見出しも折り返す（タイトル＋英語サブ＋操作） */
  .ln-section-head { flex-wrap: wrap; row-gap: 3px; }
  .ln-section-act { margin-left: auto; }

  /* Topics のヘッダーは2段に折り返す */
  .ln-topics__head { flex-wrap: wrap; row-gap: 6px; }
  .ln-topics__search { flex: 1 1 100%; order: 9; }
  .ln-topics { --ln-tile-min: 140px; }
}

@media (max-width: 360px) {
  .ln-wrap { padding-left: var(--sp-2); padding-right: var(--sp-2); }
  .ln-block { padding-left: 34px; padding-right: var(--sp-3); }
}

/* =============================================================================
   14. アニメーション・アクセシビリティ
   ============================================================================= */

@keyframes ln-block-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

@keyframes ln-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ln-pop {
  from { opacity: 0; transform: translateY(6px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  :root { --border: #B9B1A8; --border-2: #8C857D; --muted: #6B645D; }
}

/* ============================================================================
   STUDIO LAYER — "Language Lesson Studio"
   ----------------------------------------------------------------------------
   目指すのは管理画面ではなく、先生が授業をしながら美しい学習コンテンツが
   生まれていく「制作スタジオ」。余白・タイポグラフィ・カードで整える。
   ・色はほぼ使わない（白〜極薄グレー＋黒に近い文字）。赤はブランドの一点だけ。
   ・影は極薄。境界は 1px の罫線で。
   ・動きは控えめ（浮く・罫線が締まる、程度）。
   このセクションは既存の定義を上書きするので **必ずファイルの最後** に置く。
   ============================================================================ */

/* --- 1. 基礎：字と地 ------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: var(--lh-body);
  letter-spacing: .005em;
  font-feature-settings: "palt" 1;      /* 和文の字詰め */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 数字と英字は Inter のプロポーショナルを活かす */
.ln-date, .ln-clock, .ln-kbd, .ln-lesson-no, .ln-block-romaji, .ln-vocab-romaji {
  font-feature-settings: "tnum" 1;
}

h1, h2, h3, h4 { letter-spacing: var(--ls-tight); line-height: 1.3; font-weight: 700; }

/* 節の見出し＝小さく・大文字・字間を空けたラベル（雑誌の柱のように） */
.ln-section-head {
  display: flex; align-items: baseline; gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
  padding: 0; border: 0; background: none;
}
.ln-section-title {
  font-size: var(--fs-2); font-weight: 700;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--text); margin: 0;
}
.ln-section-sub { font-size: var(--fs-2); color: var(--muted); font-weight: 500; }
.ln-section-ico { display: none; }          /* 見出しの絵文字タイルはやめる（幼く見える） */

/* --- 2. 画面の器 ---------------------------------------------------------- */
.ln-wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--sp-6b);
}
.ln-main { padding-block: var(--sp-7) var(--sp-9); background: var(--bg); }

@media (max-width: 720px) {
  .ln-wrap { padding-inline: var(--sp-5); }
  .ln-main { padding-block: var(--sp-6) var(--sp-8); }
}

/* --- 3. ヘッダー（アプリ全体） -------------------------------------------- */
.ln-app > .ln-head,
.ln-head {
  height: var(--head-h);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
.ln-head-brand { font-size: var(--fs-4); font-weight: 800; letter-spacing: var(--ls-tight); }
.ln-head-brand small {
  font-size: 10px; letter-spacing: .14em; color: var(--muted); font-weight: 600;
}
.ln-head-brand .ln-dot { width: 7px; height: 7px; background: var(--brand); }

/* --- 4. ヒーロー（ホームの顔） -------------------------------------------- */
.ln-home-hero {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-6); flex-wrap: wrap;
  margin: var(--sp-6) 0 var(--sp-8);
  padding: 0; border: 0; background: none;
}
.ln-home-hero h1, .ln-home-hero .ln-hero-title {
  font-size: clamp(2.25rem, 5vw, var(--fs-10));
  font-weight: 800;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-3);
}
.ln-date {
  font-size: var(--fs-2); color: var(--muted); font-weight: 500;
  letter-spacing: .02em;
}
.ln-hero-act { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* --- 5. ボタン ------------------------------------------------------------ */
.ln-btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  --btn-bd: var(--border-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 16px;
  font-family: inherit; font-size: var(--fs-3); font-weight: 600;
  letter-spacing: .01em;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-bd); border-radius: var(--r-pill);
  cursor: pointer; white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.ln-btn:hover { background: var(--surface-3); border-color: var(--text-2); }
.ln-btn:active { transform: translateY(1px); }
.ln-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.ln-btn-ghost { --btn-bg: transparent; --btn-bd: transparent; color: var(--text-2); }
.ln-btn-ghost:hover { background: var(--surface-3); border-color: transparent; color: var(--text); }

/* 主役のボタン＝黒。色数を増やさない */
.ln-btn-finish, .ln-btn-primary, .ln-btn.is-primary {
  --btn-bg: var(--text); --btn-fg: var(--surface); --btn-bd: var(--text);
}
.ln-btn-finish:hover, .ln-btn-primary:hover, .ln-btn.is-primary:hover {
  --btn-bg: #000; --btn-bd: #000; color: var(--surface);
}
/* ブランドの赤は「レッスンを始める」だけに使う */
.ln-btn-brand, .ln-person-act .ln-btn:first-child {
  --btn-bg: var(--brand); --btn-fg: #fff; --btn-bd: var(--brand);
}
.ln-btn-brand:hover, .ln-person-act .ln-btn:first-child:hover {
  --btn-bg: var(--brand-ink); --btn-bd: var(--brand-ink); color: #fff;
}

/* --- 6. カード ------------------------------------------------------------ */
.ln-card, .ln-home-split > *, .ln-person, .ln-settings {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-5);
  box-shadow: none;
}

/* 個人 / グループ の2枚 */
.ln-home-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}
.ln-home-split > * { padding: var(--sp-6b); border-top: 0; }
.ln-home-col-head { display: block; margin-bottom: var(--sp-5); padding: 0; border: 0; }
.ln-home-col-title {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-6); font-weight: 800; letter-spacing: var(--ls-tight);
  margin: 0 0 6px;
}
.ln-home-col-title::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--lane-ja); flex: none;
}
.ln-home-split > *:nth-child(2) .ln-home-col-title::before { background: var(--lane-en); }
.ln-home-col-desc { font-size: var(--fs-2); color: var(--muted); line-height: 1.7; margin: 0; }
.ln-home-col-body { display: grid; gap: var(--sp-3); }

@media (max-width: 900px) { .ln-home-split { grid-template-columns: 1fr; } }

/* 生徒 / グループの1件 */
.ln-person {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-4);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.ln-person:hover {
  border-color: var(--border-2);
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}
.ln-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-2);
  font-weight: 700; font-size: var(--fs-4); letter-spacing: 0;
  border: 1px solid var(--border);
}
.ln-person-name { font-size: var(--fs-5); font-weight: 700; letter-spacing: var(--ls-tight); }
.ln-person-meta { font-size: var(--fs-1); color: var(--muted); gap: 8px; }
.ln-person-act { display: flex; gap: 8px; margin-left: auto; }

/* 空っぽの時＝罫線の箱ではなく、静かな余白 */
.ln-empty {
  background: none; border: 1px dashed var(--border);
  border-radius: var(--r-4);
  padding: var(--sp-7) var(--sp-5);
  text-align: center; color: var(--muted); font-size: var(--fs-2);
  line-height: 1.9;
}

/* --- 7. 設定は静かに ------------------------------------------------------ */
.ln-settings { padding: var(--sp-6b); margin-top: var(--sp-8); }
.ln-settings-grid { gap: var(--sp-7); }
.ln-switch-label { font-size: var(--fs-3); font-weight: 600; }
.ln-switch-desc { font-size: var(--fs-1); color: var(--muted); line-height: 1.7; }
.ln-switch-row { padding-block: var(--sp-4); border-color: var(--border); }
.ln-kbd {
  font-family: var(--font-mono); font-size: 11px;
  border: 1px solid var(--border-2); border-bottom-width: 2px;
  border-radius: var(--r-1); padding: 2px 7px; background: var(--surface-3);
  color: var(--text-2);
}

/* --- 8. ホームのカードから管理画面くささを抜く ----------------------------- */
.ln-home-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-5);
  box-shadow: none;
  overflow: visible;
  padding: var(--sp-6b);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.ln-home-col:hover { border-color: var(--border-2); }

/* 色帯とグレーの帯をやめ、小さな点だけで種類を示す */
.ln-home-col > .ln-home-col-head {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  margin-bottom: var(--sp-5);
  position: relative;
}
.ln-home-col-head .ln-btn,
.ln-home-col-head .ln-btn-ghost {
  position: absolute; top: -4px; right: 0; margin-left: 0;
}
.ln-home-col-title { font-size: var(--fs-6); font-weight: 800; letter-spacing: var(--ls-tight); }
.ln-home-col.is-solo  .ln-home-col-title::before { background: var(--brand); }
.ln-home-col.is-group .ln-home-col-title::before { background: var(--lane-en); }
.ln-home-col-desc { font-size: var(--fs-2); color: var(--muted); line-height: 1.75; max-width: 42ch; }
.ln-home-col-body { padding: 0; gap: var(--sp-3); max-height: none; overflow: visible; }

/* カードの中の空状態は入れ子の箱にしない */
.ln-home-col .ln-empty { border: 0; padding: var(--sp-6) var(--sp-3); }

/* 節（過去のレッスン・設定）は「カードの外に見出し」を置く雑誌の組み */
.ln-sec { margin-bottom: var(--sp-8); }
.ln-sec > .ln-section-head { padding-inline: 2px; }

/* 過去のレッスン一覧 */
.ln-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-5);
  overflow: hidden;
}
.ln-table { font-size: var(--fs-3); }
.ln-table th {
  font-size: var(--fs-0); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--ls-wide); color: var(--muted);
  background: none; border-bottom: 1px solid var(--border);
  padding: var(--sp-4) var(--sp-5);
}
.ln-table td { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); }
.ln-table tr:last-child td { border-bottom: 0; }
.ln-table tbody tr { transition: background .16s ease; }
.ln-table tbody tr:hover { background: var(--surface-3); }

/* --- 9. レッスン画面＝Studio ---------------------------------------------- */
.ln-lesson { background: var(--bg); }

/* 左右のカラムは「板」ではなく、余白に浮かぶ面にする */
.ln-cols { padding: var(--sp-5); gap: var(--sp-5); background: var(--bg); }
.ln-cols.has-splitter { gap: 0; }

.ln-col-left, .ln-col-right { background: transparent; border: 0; }
.ln-col-left { display: flex; flex-direction: column; gap: var(--sp-5); }

/* パネル共通（メモ・資料・ノート） */
.ln-memo, .ln-ref, .ln-notes {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-5);
  box-shadow: none;
  overflow: hidden;
}
.ln-memo { flex: 1 1 58%; min-height: 220px; }
.ln-ref  { flex: 1 1 42%; min-height: 160px; }

/* パネルの見出し＝小さな大文字ラベル。グレーの帯はやめる */
.ln-memo > :first-child, .ln-ref > :first-child, .ln-notes-head {
  background: none;
  border-bottom: 1px solid var(--border);
  padding: var(--sp-4) var(--sp-5);
  min-height: 0;
}
.ln-memo-title, .ln-ref-title, .ln-notes-title,
.ln-memo > :first-child > span:first-child,
.ln-ref  > :first-child > span:first-child {
  font-size: var(--fs-0); font-weight: 700;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--muted);
}

/* 書く所は広く・大きく */
.ln-memo textarea, .ln-ref textarea {
  padding: var(--sp-5) var(--sp-6);
  font-size: var(--fs-5);
  line-height: 2.0;
  letter-spacing: .01em;
  background: transparent;
  border: 0;
}
.ln-memo textarea::placeholder, .ln-ref textarea::placeholder {
  color: var(--muted); font-size: var(--fs-3);
}
.ln-ref { background: var(--surface-3); }
.ln-ref textarea { font-size: var(--fs-4); line-height: 1.95; }

/* 仕切り */
.ln-splitter { background: transparent; }
.ln-splitter::before {
  content: ""; display: block; width: 1px; height: 100%; margin-inline: auto;
  background: var(--border); transition: background .16s ease, width .16s ease;
}
.ln-splitter:hover::before { background: var(--brand); width: 2px; }

/* --- 10. 学習ノート＝1件ずつのコンテンツカード ---------------------------- */
.ln-notes-body { padding: var(--sp-5); background: transparent; }
.ln-lane-list { display: flex; flex-direction: column; gap: var(--sp-4); }

.ln-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  padding: var(--sp-5) var(--sp-6) var(--sp-5);
  box-shadow: none;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.ln-block:hover { border-color: var(--border-2); box-shadow: var(--sh-2); }

.ln-block-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: var(--sp-3); padding: 0; border: 0; background: none;
}
.ln-lesson-no {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: var(--muted);
  background: var(--surface-3); border: 1px solid var(--border);
}
/* 操作はふだん隠す（授業中の画面を静かに保つ） */
.ln-block-actions {
  margin-left: auto; display: flex; gap: 2px;
  opacity: 0; transition: opacity .16s ease;
}
.ln-block:hover .ln-block-actions,
.ln-block:focus-within .ln-block-actions { opacity: 1; }
.ln-block-actions .ln-btn { height: 28px; padding: 0 10px; font-size: var(--fs-1); }

/* 原文＝主役。大きく・行間を広く */
.ln-block-src {
  font-size: var(--fs-6);
  font-weight: 600;
  line-height: 2.25;
  letter-spacing: var(--ls-tight);
  margin: 0 0 6px;
}
.ln-block-romaji {
  font-size: var(--fs-1); color: var(--muted); letter-spacing: .02em;
  margin: 0 0 var(--sp-3);
}
.ln-block-dst {
  font-size: var(--fs-4); line-height: 2.0; color: var(--text-2);
  margin: 0 0 var(--sp-4);
  padding-top: var(--sp-3); border-top: 1px solid var(--border);
}

/* 見出しラベル（VOCABULARY / GRAMMAR） */
.ln-vocab-title, .ln-grammar-title {
  font-size: var(--fs-0); font-weight: 700; letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--muted);
  margin: 0 0 var(--sp-3);
}

/* 語彙＝罫線で仕切るだけの静かなグリッド */
.ln-vocab {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0; margin-bottom: var(--sp-4);
  border-top: 1px solid var(--border);
}
.ln-vocab-item {
  background: none; border: 0; border-bottom: 1px solid var(--border);
  border-radius: 0; padding: var(--sp-3) var(--sp-4) var(--sp-3) 0;
  transition: background .16s ease;
}
.ln-vocab-item:hover { background: var(--surface-3); }
.ln-vocab-head { font-size: var(--fs-4); font-weight: 700; line-height: 2.0; }
.ln-vocab-romaji { font-size: var(--fs-0); color: var(--muted); }
.ln-vocab-meaning { font-size: var(--fs-2); color: var(--text-2); line-height: 1.7; }

/* 文法＝注意書きの箱に見せない（黄色い枠をやめる） */
.ln-grammar-item {
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-left: 2px solid var(--border-2);
  border-radius: var(--r-2);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-3);
}
.ln-grammar-name { font-size: var(--fs-4); font-weight: 700; letter-spacing: var(--ls-tight); }
.ln-grammar-meaning { font-size: var(--fs-2); color: var(--text-2); line-height: 1.8; }
.ln-grammar-formation, .ln-grammar-note { font-size: var(--fs-1); color: var(--muted); }
.ln-grammar-ex { background: none; border-left: 1px solid var(--border-2); padding-left: var(--sp-4); }
.ln-grammar-ex-src { font-size: var(--fs-2); line-height: 1.95; }
.ln-grammar-ex-dst { font-size: var(--fs-1); color: var(--muted); }

/* チップは静かに */
.ln-chip {
  font-size: var(--fs-0); font-weight: 600; letter-spacing: .03em;
  border-radius: var(--r-pill); padding: 2px 9px;
  border: 1px solid var(--border); background: var(--surface-3); color: var(--text-2);
}
.ln-chip-lang { background: var(--surface-3); }
.ln-chip-miss { background: none; border-style: dashed; color: var(--muted); }

/* レーンの見出し */
.ln-lane-head {
  display: flex; align-items: center; gap: 8px;
  padding: 0 2px var(--sp-3); margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border); background: none;
}
.ln-lane-title {
  font-size: var(--fs-0); font-weight: 700; letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--text);
}
.ln-lane-names { font-size: var(--fs-1); color: var(--muted); }

/* --- 11. ノートのカードを「押したくなるコンテンツ」に ---------------------- */
/* 面が白どうしだとカードの境目が消えるので、ノート側の地を一段落とす */
.ln-notes { background: var(--surface-3); }
.ln-notes-head { background: var(--surface); }
.ln-block { background: var(--surface); border-color: var(--border-2); }

/* 語彙＝1語1枚の小さなカード。行がバラけないよう縦に組む */
.ln-vocab {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--sp-3);
  border-top: 0;
  margin-top: var(--sp-2);
}
.ln-vocab-item {
  display: grid;
  grid-template-areas: "head head" "romaji romaji" "mean mean" "foot foot";
  align-content: start;
  gap: 1px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  padding: var(--sp-3) var(--sp-4) var(--sp-3);
  transition: border-color .16s ease, background .16s ease;
}
.ln-vocab-item:hover { background: var(--surface); border-color: var(--border-2); }
.ln-vocab-head    { grid-area: head; font-size: var(--fs-5); font-weight: 700; line-height: 2.0; }
.ln-vocab-romaji  { grid-area: romaji; font-size: var(--fs-0); color: var(--muted); letter-spacing: .03em; }
.ln-vocab-meaning { grid-area: mean; font-size: var(--fs-2); color: var(--text-2); line-height: 1.7; margin-top: 3px; }

/* 語彙カードの足元（レベル・意味の切替・重点）を1行にそろえる */
.ln-vocab-item .ln-chip-level,
.ln-vocab-item .ln-vocab-switch,
.ln-vocab-item .ln-vocab-focus { grid-area: foot; }
.ln-vocab-item {
  grid-template-areas: "head head head" "romaji romaji romaji" "mean mean mean" "lv sw fav";
  grid-template-columns: auto auto 1fr;
}
.ln-vocab-item .ln-chip-level   { grid-area: lv;  justify-self: start; align-self: center; margin-top: 8px; }
.ln-vocab-item .ln-vocab-switch { grid-area: sw;  justify-self: start; align-self: center; margin-top: 8px;
  height: 22px; padding: 0 6px; font-size: 11px; color: var(--muted); }
.ln-vocab-item .ln-vocab-focus  { grid-area: fav; justify-self: end;   align-self: center; margin-top: 8px;
  height: 22px; padding: 0 8px; font-size: 11px; color: var(--muted);
  opacity: 0; transition: opacity .16s ease; }
.ln-vocab-item:hover .ln-vocab-focus,
.ln-vocab-item:focus-within .ln-vocab-focus { opacity: 1; }
.ln-vocab-item .ln-vocab-focus.is-on { opacity: 1; color: var(--brand); }

/* ふりがなが本体より広い時に隣の字を押しのけないようにする */
.ln-vocab-head ruby, .ln-block-src ruby { ruby-overhang: auto; }
.ln-vocab-head rt, .ln-block-src rt { font-size: .5em; letter-spacing: 0; }

/* --- 12. トピック＝場面を選ぶカードグリッド ------------------------------- */
.ln-overlay { background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ln-overlay__backdrop { background: transparent; }

.ln-topics__panel {
  width: min(1100px, calc(100vw - 48px));
  max-height: calc(100vh - 64px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-5);
  box-shadow: var(--sh-3);
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* 上の帯＝静かに */
.ln-topics__panel > :first-child {
  background: none; border-bottom: 1px solid var(--border);
  padding: var(--sp-5) var(--sp-6b);
}
.ln-topics__langlabel {
  font-size: var(--fs-0); font-weight: 700; letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--muted);
}
.ln-topics__search {
  height: 40px; padding: 0 16px; min-width: 260px;
  font-size: var(--fs-3); font-family: inherit;
  background: var(--surface-3);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  color: var(--text);
}
.ln-topics__search:focus { outline: none; border-color: var(--text-2); background: var(--surface); }

.ln-topics__sec { padding: var(--sp-6b); overflow: auto; }
.ln-topics__h {
  font-size: var(--fs-7); font-weight: 800; letter-spacing: var(--ls-display);
  margin: 0 0 var(--sp-5); color: var(--text);
}
.ln-topics__hint { font-size: var(--fs-2); color: var(--muted); margin-bottom: var(--sp-5); }

/* 場面 / トピックのタイル */
.ln-topics__grid {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.ln-topics__grid--sit { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.ln-topics__grid > * ,
.ln-topics__grid button {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  text-align: left;
  padding: var(--sp-5);
  min-height: 92px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-4);
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.ln-topics__grid > *:hover, .ln-topics__grid button:hover {
  border-color: var(--border-2); transform: translateY(-2px); box-shadow: var(--sh-2);
  background: var(--surface);
}
.ln-topics__grid > *:focus-visible, .ln-topics__grid button:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}
/* 絵文字は「大きなパステル円」に乗せず、素のまま控えめに */
.ln-topics__grid .ln-emoji, .ln-topics__grid > * > :first-child {
  font-size: 22px; line-height: 1.4; flex: none; background: none; border: 0; padding: 0;
}
.ln-topics__grid strong, .ln-topics__grid .ln-t-title {
  display: block; font-size: var(--fs-5); font-weight: 700;
  letter-spacing: var(--ls-tight); line-height: 1.6; margin-bottom: 2px;
}
.ln-topics__grid small, .ln-topics__grid .ln-t-sub {
  display: block; font-size: var(--fs-1); color: var(--muted); line-height: 1.6;
}

/* 質問カード（Step 3） */
.ln-starter {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-4); padding: var(--sp-5) var(--sp-6);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.ln-starter:hover { border-color: var(--border-2); box-shadow: var(--sh-2); }
.ln-starter.is-spot { border-color: var(--text-2); }
.ln-chip--w {
  font-size: var(--fs-0); font-weight: 700; letter-spacing: var(--ls-wide);
  text-transform: uppercase; color: var(--muted);
  background: none; border: 0; padding: 0;
}
.ln-crumb__item { font-size: var(--fs-2); color: var(--muted); }
.ln-crumb__sep { color: var(--border-2); }

/* 下の帯（キー操作の案内） */
.ln-topics__panel > :last-child {
  border-top: 1px solid var(--border); background: none;
  padding: var(--sp-4) var(--sp-6b);
  font-size: var(--fs-1); color: var(--muted);
}

/* --- 13. レッスンのまとめ（Finish） --------------------------------------- */
.ln-sum { background: var(--bg); }
.ln-sum-head {
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--border);
  padding: 0 var(--sp-6b); height: var(--head-h);
}
.ln-sum-title { font-size: var(--fs-5); font-weight: 800; letter-spacing: var(--ls-tight); }
.ln-sum-body { padding: var(--sp-7) var(--sp-6b) var(--sp-9); }
.ln-sum-panel { max-width: var(--wrap); margin-inline: auto; }

/* 学習言語のタブ */
.ln-sum-tabs { justify-content: center; gap: 6px; margin-bottom: var(--sp-6); border: 0; }
.ln-sum-tabs .ln-tab, .ln-sum-tabs button {
  height: 36px; padding: 0 18px; border-radius: var(--r-pill);
  border: 1px solid var(--border); background: var(--surface);
  font-size: var(--fs-3); font-weight: 600; color: var(--text-2); cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.ln-sum-tabs .is-on, .ln-sum-tabs button.is-on {
  background: var(--text); color: var(--surface); border-color: var(--text);
}

/* 各セクション＝1枚のカード */
.ln-sum-sec {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-5);
  padding: var(--sp-6b);
  margin-bottom: var(--sp-5);
}
.ln-sum-sec > :first-child { margin-bottom: var(--sp-5); }
.ln-sum-sec h2, .ln-sum-sec h3, .ln-sum-sec-title {
  font-size: var(--fs-6); font-weight: 800; letter-spacing: var(--ls-tight); margin: 0;
}

/* 候補＝押したくなるチップ（詰め込みすぎない） */
.ln-sum-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ln-sum-chips > * , .ln-sum-chips button {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  font-size: var(--fs-3); font-weight: 600; color: var(--text);
  cursor: pointer; text-align: left;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.ln-sum-chips > *:hover, .ln-sum-chips button:hover {
  border-color: var(--text-2); transform: translateY(-1px);
}
.ln-sum-chips .is-on, .ln-sum-chips button.is-on {
  background: var(--text); border-color: var(--text); color: var(--surface);
}
.ln-sum-chip-sub { font-size: var(--fs-1); color: var(--muted); font-weight: 500; }
.ln-sum-chips .is-on .ln-sum-chip-sub { color: color-mix(in srgb, var(--surface) 72%, transparent); }

/* チェックの一覧（トピック・ことば） */
.ln-sum-checks, .ln-sum-words {
  display: grid; gap: 10px var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.ln-sum-check, .ln-sum-word {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-2);
  transition: background .16s ease;
}
.ln-sum-check:hover, .ln-sum-word:hover { background: var(--surface-3); }
.ln-sum-check input[type="checkbox"], .ln-sum-word input[type="checkbox"] {
  accent-color: var(--text); width: 15px; height: 15px; flex: none;
}
.ln-sum-word-head { font-size: var(--fs-4); font-weight: 700; line-height: 1.9; }
.ln-sum-word-mean { font-size: var(--fs-2); color: var(--text-2); }

/* 宿題 */
.ln-sum-hw-item {
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: var(--r-3); padding: var(--sp-4) var(--sp-5); margin-bottom: 10px;
}
.ln-sum-hw-n {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; background: var(--surface); border: 1px solid var(--border);
  color: var(--muted);
}
.ln-sum-hw-q { font-size: var(--fs-4); line-height: 1.95; }
.ln-sum-hw-model { font-size: var(--fs-3); color: var(--text-2); line-height: 1.95; }
.ln-sum-hw-model em.swap, .swap { color: var(--brand); font-style: normal; font-weight: 700; }

/* 入力欄 */
.ln-sum-free input, .ln-sum-res-form input, .ln-sum input[type="text"], .ln-sum input[type="url"] {
  height: 40px; padding: 0 14px; font-family: inherit; font-size: var(--fs-3);
  background: var(--surface-3); border: 1px solid var(--border);
  border-radius: var(--r-2); color: var(--text); width: 100%;
}
.ln-sum input:focus { outline: none; border-color: var(--text-2); background: var(--surface); }
.ln-sum-foot {
  position: sticky; bottom: 0; background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border); padding: var(--sp-4) var(--sp-6b);
}

/* --- 14. 教材ライブラリ ---------------------------------------------------- */
.ln-lib { max-width: var(--wrap); margin-inline: auto; padding: var(--sp-7) var(--sp-6b) var(--sp-9); }
.ln-lib__head { margin-bottom: var(--sp-6); }
.ln-lib__drop {
  display: grid; place-items: center; gap: 10px;
  min-height: 220px; padding: var(--sp-7);
  background: var(--surface);
  border: 1.5px dashed var(--border-2);
  border-radius: var(--r-5);
  text-align: center; cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.ln-lib__drop:hover { border-color: var(--text-2); background: var(--surface-3); }
.ln-lib__drop.is-over, .ln-lib__drop.is-drag {
  border-color: var(--brand); background: color-mix(in srgb, var(--brand) 4%, var(--surface));
}
.ln-lib__drop strong { font-size: var(--fs-6); font-weight: 800; letter-spacing: var(--ls-tight); }
.ln-lib__hint { font-size: var(--fs-2); color: var(--muted); line-height: 1.8; }
.ln-lib__file { display: none; }

.ln-lib__list {
  display: grid; gap: var(--sp-4); margin-top: var(--sp-6);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.ln-lib__item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-4);
  overflow: hidden; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.ln-lib__item:hover { border-color: var(--border-2); transform: translateY(-2px); box-shadow: var(--sh-2); }
.ln-lib__img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; display: block; background: var(--surface-3); }
.ln-lib__icon { font-size: 26px; }
.ln-lib__empty { padding: var(--sp-7); text-align: center; color: var(--muted); font-size: var(--fs-2); }
.ln-lib__foot { margin-top: var(--sp-5); font-size: var(--fs-1); color: var(--muted); }

/* --- 15. 狭い画面 ---------------------------------------------------------- */
@media (max-width: 1100px) {
  .ln-cols { padding: var(--sp-4); gap: var(--sp-4); }
  .ln-sum-body { padding: var(--sp-6) var(--sp-5) var(--sp-8); }
  .ln-sum-sec { padding: var(--sp-5); }
}
@media (max-width: 760px) {
  :root { --head-h: 56px; }
  .ln-home-hero { margin: var(--sp-5) 0 var(--sp-6); }
  .ln-home-col, .ln-settings { padding: var(--sp-5); }
  .ln-block { padding: var(--sp-4) var(--sp-5); }
  .ln-block-src { font-size: var(--fs-5); }
  .ln-topics__sec { padding: var(--sp-5); }
  .ln-topics__h { font-size: var(--fs-6); }
}

/* ============================================================================
   COMPACT LAYER — 「大きくて見やすい」ではなく「コンパクトだけど明確で見やすい」
   ----------------------------------------------------------------------------
   画面共有した時に **最低2ブロックは画面内に入る** ことを最優先にした詰め直し。
   ・本文は 13px を下回らない／ふりがなは 9.5px を下回らない（読めなくしない）
   ・カードの内側・カード間・見出し周りの余白を削る
   ・語彙は「1語1枚の大きなカード」をやめて、罫線だけで仕切った2〜3列の詰まったリスト
   ・文法は 見出し＋意味＋接続 を1行に流し、例文は1行ずつ
   STUDIO LAYER をさらに上書きするので **必ずファイルの最後** に置く。
   ============================================================================ */

/* --- 器：ノート面の余白を削って本文の高さを稼ぐ --------------------------- */
.ln-notes-head { padding: 7px var(--sp-4); }
.ln-notes-body {
  padding: 8px var(--sp-4) 10px;
  scroll-behavior: smooth;          /* 新着に自動で追いつく時のなめらかさ（notes.js が制御） */
  overscroll-behavior: contain;
}
.ln-lane { gap: 8px; }
.ln-lane-list { gap: 8px; }
.ln-lane-head { padding: 0 2px 5px; margin-bottom: 8px; }
.ln-lane-fold { margin-top: 2px; }

.ln-notes-newbadge {
  height: 30px; padding: 0 12px;
  font-size: var(--fs-1); font-weight: 700;
  border-radius: var(--r-pill);
}

/* --- 1文ブロック ---------------------------------------------------------- */
.ln-block {
  padding: 6px 13px 7px 31px;
  border-radius: var(--r-2);
}
.ln-block.is-pinned { padding-left: 29px; }
.ln-block::before,
.ln-block-no {
  left: 8px; top: 9px;
  width: 18px; height: 18px;
  font-size: 10px;
}
.ln-block-head { gap: 4px; margin-bottom: 1px; min-height: 17px; }
.ln-block-actions { gap: 1px; }
.ln-block-actions .ln-btn,
.ln-block .ln-btn-xs { height: 20px; min-height: 20px; padding: 0 6px; font-size: var(--fs-0); }
.ln-block-head .ln-chip { padding: 0 6px; font-size: 10px; }

/* 原文＝主役。ただし 22px → 17px。行間はふりがなが乗るぶんだけ残す。 */
.ln-block-src {
  font-size: 1.0625rem;             /* 17px */
  font-weight: 600;
  line-height: 1.95;
  letter-spacing: .005em;
  margin: 0 0 1px;
}
.ln-block[data-lang="en"] .ln-block-src {
  font-size: 1.0625rem;
  line-height: 1.5;
}
.ln-block-romaji {
  font-size: var(--fs-1);           /* 12px */
  line-height: 1.4;
  margin: 0 0 3px;
}
.ln-block-dst {
  font-size: var(--fs-3);           /* 14px */
  line-height: 1.65;
  margin: 0 0 5px;
  padding-top: 3px;
}
.ln-block[data-lang="en"] .ln-block-dst { line-height: 1.9; }   /* 日本語の訳＝ふりがなが乗る */
.ln-block-note { margin-top: 5px; padding: 3px 8px; line-height: 1.5; }
.ln-dst-edit { margin-top: 4px; padding: 5px 8px; font-size: var(--fs-3); line-height: 1.6; }
.ln-dst-edit-bar { margin-top: 4px; }

/* ふりがなは小さくしすぎない（本文が縮んでも 9.5px を下回らせない） */
.ln-block-src rt,
.ln-block-dst rt,
.ln-vocab-head rt { font-size: max(9.5px, .5em); }
.ln-grammar-ex rt,
.ln-vocab-ex rt,
.ln-grammar-name rt { font-size: max(9.5px, .5em); }

/* --- VOCABULARY / GRAMMAR の見出し ---------------------------------------- */
.ln-vocab-title,
.ln-grammar-title {
  margin: 0 0 1px;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .12em;
}

/* --- 語彙＝罫線で仕切った詰まったリスト（2〜3列） -------------------------- */
.ln-vocab {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  column-gap: var(--sp-5);
  row-gap: 0;
  margin: 0 0 4px;
  border-top: 1px solid var(--border);
}
.ln-vocab-item {
  position: relative;               /* ♡ を浮かせて行を折り返させない */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 6px;
  row-gap: 0;
  padding: 1px 22px 2px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  min-width: 0;
}
.ln-vocab-item:hover { background: none; border-color: var(--border-2); }
.ln-vocab-item.is-focus { background: none; }

.ln-vocab-head {
  flex: 0 1 auto;
  font-size: var(--fs-3);           /* 14px */
  font-weight: 700;
  line-height: 1.8;                 /* ふりがなの居場所 */
  min-width: 0;
}
.ln-vocab-romaji {
  flex: 0 1 auto;
  display: inline;
  font-size: var(--fs-0);
  line-height: 1.4;
}
.ln-vocab-meaning {
  flex: 1 1 64px;
  display: inline;
  min-width: 0;
  font-size: var(--fs-2);           /* 13px */
  line-height: 1.45;
}
.ln-vocab-ex {
  flex: 1 0 100%;
  display: block;
  margin: 0 0 1px;
  padding-left: 6px;
  font-size: var(--fs-1);
  line-height: 1.7;
}
.ln-vocab-item .ln-chip-level {
  flex: none;
  margin: 0;
  padding: 0 5px;
  font-size: 10px;
}
.ln-vocab-item .ln-vocab-switch {
  flex: none;
  margin: 0;
  height: 17px; padding: 0 4px; font-size: 10px; line-height: 1;
}
/* 「重点」は行の中に置くと折り返しの原因になるので右上に浮かせる */
.ln-vocab-item .ln-vocab-focus {
  position: absolute;
  right: 0;
  top: 2px;
  flex: none;
  margin: 0;
  height: 16px; padding: 0 4px; font-size: 10px; line-height: 1;
}

/* --- 文法＝見出し・意味・接続を1行に流す ---------------------------------- */
.ln-grammar { margin-top: 0; }
.ln-grammar-item {
  padding: 0 0 1px 9px;
  margin: 0 0 2px;
  background: none;
  border: 0;
  border-left: 2px solid var(--border-2);
  border-radius: 0;
  line-height: 1.45;
}
.ln-grammar-item + .ln-grammar-item { margin-top: 0; }
.ln-grammar-name {
  display: inline;
  font-size: var(--fs-3);           /* 14px */
  line-height: 1.65;
  margin-right: 4px;
}
.ln-grammar-item .ln-chip-level { margin-right: 4px; }
.ln-grammar-meaning {
  display: inline;
  font-size: var(--fs-2);           /* 13px */
  line-height: 1.55;
}
.ln-grammar-formation {
  display: inline;
  margin: 0 0 0 6px;
  font-size: var(--fs-0);
}
.ln-grammar-note {
  display: inline;                  /* 補足も同じ段落に流す（1行ぶん節約） */
  margin: 0 0 0 6px;
  font-size: var(--fs-0);
  line-height: 1.55;
}
/* 例文は減らさず、広い時だけ2列に並べて高さを半分にする */
.ln-grammar-ex {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  column-gap: var(--sp-4);
  row-gap: 0;
  margin-top: 2px;
  padding-left: 7px;
  border-left: 1px solid var(--border-2);
}
.ln-grammar-ex li {
  padding: 0;
  line-height: 1.85;                 /* ふりがなが行から はみ出さない最小の広さ */
  min-width: 0;
  overflow-wrap: anywhere;
}
.ln-grammar-ex-src { font-size: var(--fs-2); }   /* 13px */
.ln-grammar-ex-dst { font-size: var(--fs-1); margin-left: 6px; }

/* ダークでも文法の箱は出さない（11.5 のダーク用指定より後ろで打ち消す） */
:root[data-theme="dark"] .ln-grammar-item { background: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ln-grammar-item { background: none; }
}

/* --- トピックの区切り行 --------------------------------------------------- */
.ln-topic-head { padding: 2px 2px 3px; gap: 6px; }

/* --- 動きを減らす設定では追従スクロールもすぐ着く -------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ln-notes-body { scroll-behavior: auto; }
}

/* --- 狭い画面：詰めすぎて読めなくならない程度に戻す ----------------------- */
@media (max-width: 760px) {
  .ln-block { padding: 8px 12px 10px 30px; }
  .ln-block-src { font-size: var(--fs-5); line-height: 1.9; }   /* 18px */
  .ln-vocab { grid-template-columns: 1fr; column-gap: 0; }
}

/* --- 16. 仕上げの微調整 ---------------------------------------------------- */
/* 語義の切替（▾）は、ふだんは気配だけ。触った時にはっきり出す */
.ln-vocab-switch {
  opacity: 0; color: var(--muted);
  transition: opacity .16s ease, color .16s ease;
}
.ln-vocab-item:hover .ln-vocab-switch,
.ln-vocab-item:focus-within .ln-vocab-switch { opacity: 1; }
.ln-vocab-switch:hover { color: var(--text); }
/* 意味が1つしか無い語では切替を出さない（点だけ残るのを防ぐ） */
.ln-vocab-switch:empty, .ln-vocab-switch[data-count="1"] { display: none; }

/* パネル見出しの補助文は、狭い時は消す（「選.」のような中途半端な省略を作らない） */
.ln-memo-hint, .ln-ref-hint { white-space: nowrap; overflow: hidden; }
@media (max-width: 1500px) {
  /* 「選.」のような中途半端な省略を作らない。入らないなら消す（title に全文が残る） */
  .ln-ref-hint { display: none; }
}
@media (max-width: 1320px) {
  .ln-memo-hint { display: none; }
}

/* グループの2レーンは、ノート欄が狭い時に横並びをやめて縦に積む。
   （3カラム表示だと1レーンが200px台になり、ふりがな付きの文が読めなくなる） */
.ln-notes { container-type: inline-size; }
@container (max-width: 620px) {
  .ln-notes-body .ln-lane-ja,
  .ln-notes-body .ln-lane-en { grid-column: 1 / -1; }
  .ln-notes-body { grid-template-columns: 1fr !important; display: grid; }
}