[x-cloak] { display: none !important; }

/* ---- 色の変数 ----
   案 B「書斎」（design/redesign_v2/redesign_v2.pen の note-readme、深緑 × 青磁白 × 真鍮）の値を置く。
   変数名は design.pen 時代の意味ベースの名前を残し、値だけ差し替えている
   （--slate-* は「墨〜青磁白の階調」、--amber-* は「真鍮の線と金文字」の意味になった）。
   Tailwind 側（tailwind.config.js）は slate / amber を含めてここを var() で参照するため、値の正はこの 1 か所。
   --brand-rgb / --ink-rgb は Tailwind の透明度付きクラス（bg-brand/5 など）のための RGB 成分。
   真鍮（--gold）は線だけに使い、文字には使わない。金で読ませる数字・ピルは --gold-text。
   コントラストの実測は scripts/dev/contrast.py で行う */
:root {
  /* 墨。本文・見出し・ヘッダ下やサイドバー右の 1px 罫線・h2 の左 3px */
  --ink: #141C18;
  --ink-rgb: 20 28 24;
  --ink-hover: #2A3630;
  /* 墨の面の上の文字（白）と補足（薄い面） */
  --on-ink: #FFFFFF;
  --ink-soft: #DDE7DF;
  /* 深緑。主ボタンの面・リンク・選択中の左バー・スピナー・シークバーの進捗・再生ボタン・FAB */
  --brand: #1F3F35;
  --brand-rgb: 31 63 53;
  --brand-hover: #173029;
  /* 薄い面（tint）。選択中ナビ・主役カード・再生中の行・「AI レビュー済」ピル・アバター */
  --brand-light: #DDE7DF;
  --on-brand: #FFFFFF;
  /* 真鍮。上端 3px の帯・主役カードの 1px 枠・再生中の行の左バー・シークバーのコメント印・未読の枠とドット。線だけ */
  --gold: #B8962E;
  /* 金文字。統計の数字・残り分数・「未読 N」・再生中の時刻 */
  --gold-text: #805310;
  /* 名前は残す。--gold-accent は真鍮の線、--gold-face は選択中ナビの面 */
  --gold-accent: #B8962E;
  --gold-face: #DDE7DF;
  /* 総評・コメントの強調（下 40% を塗る）と、コーチコメント引用の左線（真鍮） */
  --marker: #D9CFA6;
  --quote-bar: #B8962E;
  /* 完了・レビュー済。tint の面 + 深緑の字 */
  --success-bg: #DDE7DF;
  --success-fg: #1F3F35;
  --success-border: #DDE7DF;
  /* 要対応（未払い・失敗・上限）。ワインはここだけ。ピルは枠線 + 字で面を塗らない。面は is-error の箱だけ */
  --danger-bg: #F6E9EB;
  --danger-fg: #8B2F3C;
  --danger-border: #8B2F3C;
  /* 行コメントの向き（できている / 課題）。流し読みで見分けられるよう、ここだけ緑と朱で色相を分ける（#133） */
  --side-good-bg: #E3F1E2;
  --side-good-fg: #2E6B33;
  --side-good-border: #B5D8B2;
  --side-bad-bg: #FCE5DC;
  --side-bad-fg: #B0431F;
  --side-bad-border: #F0B8A3;
  --scrim: rgba(20, 28, 24, 0.5);
  /* 再生中の行の左バー（真鍮）。選択中は深緑（--brand） */
  --seg-active-bar: #B8962E;
  /* 再生中の面（tint）・真鍮の枠・金文字 */
  --amber-50: #DDE7DF;
  --amber-200: #B8962E;
  --amber-800: #805310;
  /* 処理中・未作成のピル（地の面 + 罫線の枠 + 補助文字） */
  --state-pill-bg: #F2F4F0;
  --state-pill-fg: #4F5B55;
  --state-pill-border: #CBD3CD;
  /* 名前は残す。style.css 内の参照だけ（値は tint と深緑） */
  --indigo-100: #DDE7DF;
  --indigo-700: #1F3F35;
  --indigo-800: #1F3F35;
  /* 面と枠と地。面 = サイドバー・ヘッダ・カード、地 = ページ・入力欄・カードの中のカード */
  --surface: #E4E9E3;
  --card-bg: #E4E9E3;
  --card-border: #CBD3CD;
  --page-bg: #F2F4F0;
  --page-bg-top: #F2F4F0;
  --page-bg-bottom: #F2F4F0;
  --sidebar: #E4E9E3;
  /* 入力欄・ドロップゾーン・浮きピルの枠（地の上で 3:1）。--slate-200 の罫線は紙の上で 1.5:1 しかなく、空の入力欄が見えない */
  --line-2: #78857F;
  /* 浮きピルの面（影の代わりに 92% の面 + --line-2 の枠） */
  --float-face: #E4E9E3EB;
  /* 墨〜青磁白の階調。900/800 = 文字、700/600/500 = ラベルと補足、400 = プレースホルダ、
     300 = 入力欄の枠（地の上で 3:1 以上）、400 = プレースホルダ（地の上で 4.5 以上）、200 = 罫線、100 = hover の面（tint）、50 = 地 */
  --slate-50: #F2F4F0;
  --slate-100: #DDE7DF;
  --slate-200: #CBD3CD;
  --slate-300: #78857F;
  --slate-400: #5F6D66;
  --slate-500: #4F5B55;
  --slate-600: #4F5B55;
  --slate-700: #4F5B55;
  --slate-800: #141C18;
  --slate-900: #141C18;
  /* 話者名。あなた = 深緑（redesign_v2 の StNav）、相手 = 金文字（視認性のため利用者指定。2026-10-03） */
  --speaker-a-fg: #1F3F35;
  --speaker-b-fg: #805310;
}

/* ページの地。デスクトップもスマホも青磁白の単色（redesign_v2 の SP⑰ 系に縦グラデは無い） */
body { background: var(--page-bg); }

/* 上端 3px の真鍮の帯。サイドバー（z-40）とヘッダの上に重なる */
.brand-band { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--gold); z-index: 60; pointer-events: none; }

/* ---- 書体 ----
   見出し・ワードマーク・数字の強調は Zen Kaku Gothic New 700（Google Fonts、読めない環境はヒラギノ角ゴに落ちる）。
   本文の Noto Sans JP は tailwind.config.js の fontFamily.sans が担う */
h1, h2, h3, .font-display {
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
}

/* ---- Nav links ---- */
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: var(--slate-700);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s, background-color 0.15s;
  white-space: nowrap;
}
/* 面のサイドバー（案 B）。hover は tint、選択中は base.html の navClass() が bg-gold-face と .nav-on（深緑の左バー 3px + 深緑の字）を付ける */
.nav-link:hover { color: var(--ink); background-color: var(--slate-100); }
.nav-link.nav-on { box-shadow: inset 3px 0 0 var(--brand); color: var(--brand); }
/* サイドバーの最小化（デスクトップ、design 改善案 2026-09-26 の vf-sidebar-v4-mini）。
   64px の帯にし、ラベル・見出し・氏名を隠してアイコンだけを中央に並べる。
   ラベルは title 属性でホバー時に出る */
@media (min-width: 1024px) {
  .sidebar-collapsed .nav-label { display: none; }
  .sidebar-collapsed .nav-link { justify-content: center; padding: 0.625rem; }
  .sidebar-collapsed aside nav p { display: none; }
  .sidebar-collapsed aside nav { padding-left: 0.75rem; padding-right: 0.75rem; }
  .sidebar-collapsed .sb-logo { padding-left: 0; padding-right: 0; justify-content: center; }
  .sidebar-collapsed .sb-user { flex-direction: column; gap: 0.75rem; }
}

/* ---- Cards ----
   案 B は面と枠だけで区切り、影を付けず角は 6px */
.card {
  background: var(--card-bg);
  border-radius: 0.375rem;
  border: 1px solid var(--card-border);
  padding: 1.25rem;
}

/* ---- Status badges ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.6rem;
  border-radius: 0.375rem;
  border: 1px solid transparent;
  font-size: 0.75rem;
  font-weight: 700;
}
/* ピルは 4 種（案 B）。レビュー済・契約中（success）= tint + 深緑、未読（amber）= 地 + 真鍮の枠 + 金文字、
   要対応（danger）= 面なし + ワインの枠と字、処理中・未作成（gray / blue / indigo）= 地 + 罫線の枠 + 補助文字 */
.badge-gray    { background: var(--state-pill-bg); color: var(--state-pill-fg); border-color: var(--state-pill-border); }
.badge-blue    { background: var(--state-pill-bg); color: var(--state-pill-fg); border-color: var(--state-pill-border); }
.badge-amber   { background: var(--page-bg); color: var(--gold-text); border-color: var(--gold); }
.badge-success { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-border); }
.badge-danger  { background: transparent; color: var(--danger-fg); border-color: var(--danger-border); }
.badge-indigo  { background: var(--state-pill-bg); color: var(--state-pill-fg); border-color: var(--state-pill-border); }
/* 要対応は色が見えなくても形で分かるよう「！」を前に置く。テンプレートが error アイコン（svg）を出すときは付けない */
.badge-danger:not(:has(svg))::before { content: "!"; font-weight: 900; line-height: 1; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.5rem;
  padding: 0.45rem 1.125rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 0.15s, opacity 0.15s;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* style.css は tailwind.css より後に読まれるため、.btn の display が Tailwind の hidden に勝ってしまう。
   「hidden lg:inline-flex」（スマホは FAB に任せてヘッダのボタンを隠す）をここで効かせる */
.btn.hidden { display: none; }
@media (min-width: 1024px) {
  .btn.lg\:inline-flex { display: inline-flex; }
}
/* 主ボタンは深緑の面 + 白の字（案 B の a.btn）。1 画面 1 つ */
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover:not(:disabled) { background: var(--brand-hover); }
/* 無効時は薄めるのではなく地の面 + 罫線の枠にする（design SP⑰-②b） */
.btn-primary:disabled { background: var(--state-pill-bg); color: var(--state-pill-fg); border-color: var(--state-pill-border); opacity: 1; }
/* 2 つ目以降（コピー・有効化・下書きに保存）は枠線ボタン（redesign_v2 の a.btn は罫線色の枠） */
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--card-border); }
.btn-secondary:hover:not(:disabled) { background: var(--slate-100); }
/* 危険な操作は面なし + ワインの字と枠。ワインの面は要対応の帯に取っておく */
.btn-danger { background: transparent; color: var(--danger-fg); border-color: var(--danger-border); }
.btn-danger:hover:not(:disabled) { background: var(--danger-bg); }
/* 小さいボタン。見た目は約 28px のまま、疑似要素で当たりだけ 44px に広げる（.tap-area と同じ考え方）。
   テーブルのセル内でも行の高さは変わらない。絶対配置の子は持たないこと */
.btn-sm { position: relative; min-height: 0; padding: 0.3rem 0.7rem; font-size: 0.8rem; border-radius: 0.375rem; }
.btn-sm::after { content: ""; position: absolute; inset: -0.5rem; }

/* ---- Form inputs ---- */
.input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  /* 枠は --line-2（案 B の #78857F。地の上で 3:1 以上、WCAG 1.4.11）。面は地 */
  border: 1px solid var(--line-2);
  border-radius: 0.375rem;
  font-size: 0.875rem;
  background: var(--page-bg);
  color: var(--slate-900);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
/* フォーカスは深緑の枠 + 深緑のリング */
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / 0.15); }
/* プレースホルダは slate-400（案 B の #78857F） */
.input::placeholder { color: var(--slate-400); }

textarea.input { resize: vertical; min-height: 120px; }

.label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--slate-700);
  margin-bottom: 0.35rem;
}

/* ---- Transcription ---- */
/* 文字起こしの行。面・左辺・枠は持たず、縦余白だけで区切る（design SP⑰ AiNote 風）。
   タップでコメントシートが開き、時刻のタップで再生する。
   再生中 = 真鍮枠の時刻ピル + 本文を濃く。デスクトップの面と左バーは下の lg 指定。
   コメント有りの手がかりはモバイルでは行直下の引用、デスクトップでは右カラムが担う */
.segment {
  display: flex;
  padding: 0.75rem 0;
  cursor: pointer;
  transition: background 0.1s;
  position: relative;
}
@media (min-width: 1024px) {
  .segment:hover { background: var(--slate-100); }
}

/* セッション詳細の 2 カラム。文字起こしとフィードバックを半々にする。
   どちらも読みながら往復するため、片方を狭めない。
   minmax(0, 1fr) にしているのは、中身の最小幅で列が広がるのを防ぐため。
   狭い画面では縦積みに倒す */
.session-detail-grid { grid-template-columns: 1fr; }
/* カラム幅の境界はデスクトップだけ。モバイルは 1 カラムなので出さない */
.split-handle { display: none; }
@media (min-width: 1024px) {
  .session-detail-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* 行コメントのボトムシート（モバイル主体）。
   design SP8 の bottomSheet / SP5 の cmtSheet 相当。画面下から迫り上がる。 */
.cmt-sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--scrim);
}
.cmt-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 80vh;
  padding: 0.75rem 1rem calc(1rem + env(safe-area-inset-bottom));
  background: var(--card-bg);
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
  border-top: 1px solid var(--line-2);
  transform: translateY(100%);
  transition: transform 0.22s ease;
}
.cmt-sheet-open { transform: translateY(0); }
/* デスクトップでは中央寄せのモーダルとして開く。
   右カラムの「返信」もこのシートを開くため、デスクトップでも主導線の 1 つ。 */
@media (min-width: 1024px) {
  .cmt-sheet {
    left: 50%;
    right: auto;
    bottom: 10vh;
    width: 32rem;
    max-width: 90vw;
    /* 閉じているときは bottom: 10vh のぶんも含めて画面外へ出す（120% だと背の低いシートが覗く） */
    transform: translate(-50%, calc(100% + 12vh));
    border-radius: 0.375rem;
  }
  .cmt-sheet-open { transform: translate(-50%, 0); }
}
.cmt-sheet-grabber {
  width: 2.5rem;
  height: 0.25rem;
  border-radius: 9999px;
  background: var(--slate-300);
  align-self: center;
}
.cmt-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.cmt-sheet-close {
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--slate-600);
  cursor: pointer;
}
.cmt-sheet-close:hover { background: var(--slate-100); }
.cmt-sheet-preview {
  display: flex;
  gap: 0.75rem;
  padding: 0.625rem;
  border: 1px solid var(--card-border);
  border-radius: 0.375rem;
  background: var(--page-bg);
}
.cmt-sheet-thread {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.cmt-sheet-input {
  border-top: 1px solid var(--slate-200);
  padding-top: 0.75rem;
}

/* セッション詳細（デスクトップ）: design.pen「[スクールオーナー] ① AI レビュー作成前」の columns / audio-bar-fixed。
   文字起こしとコメントの 2 カラムがヘッダー直下からプレイヤーの上端まで隙間なく埋まり、
   左カラムは白い面（カード枠なし・余白 20/24px）、右カラムは 460px 固定で背景を沈め左に境界線を引く。
   実装は、ページを「ヘッダー（4rem）を除いた高さ」の縦 flex にして main の余白（p-6）を負のマージンで打ち消し、
   2 カラムのグリッドを flex: 1 で広げ、プレイヤーを fixed から flex の末尾（通常配置）に戻して下端に接地させる。
   講師向けの帯など上に何か出ても flex が吸収する。「再生位置へ」（bottom: 9.25rem）はカラムの下端に重なって出る。
   モバイルは subhead から行直下のコメントまで 1 本で読むため、ページ全体のスクロールのまま変えない */
@media (min-width: 1024px) {
  .session-detail-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 4rem);
    height: calc(100dvh - 4rem);
    margin: -1.5rem;
    padding-bottom: 0;
  }
  .session-detail-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
  /* 左カラム | 境界（0.5rem）| 右カラム。幅の比は --split（既定 50%、Alpine が localStorage の値で上書き） */
  .session-detail-page .session-detail-grid {
    flex: 1;
    min-height: 0;
    margin-bottom: 0;
    gap: 0;
    grid-template-columns: minmax(0, calc(var(--split, 50%) - 0.25rem)) 0.5rem minmax(0, 1fr);
  }
  /* 境界。1px の線を中央に引き、hover とドラッグ中はブランド色で太くする */
  .split-handle {
    display: block;
    position: relative;
    cursor: col-resize;
    touch-action: none;
    background: var(--page-bg);
    outline: none;
  }
  .split-handle::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 0.5px);
    width: 1px;
    background: var(--card-border);
    transition: background 0.15s, width 0.15s, left 0.15s;
  }
  .split-handle:hover::after,
  .split-handle:focus-visible::after,
  .split-dragging .split-handle::after {
    left: calc(50% - 1.5px);
    width: 3px;
    background: var(--brand);
  }
  .split-dragging {
    cursor: col-resize;
    user-select: none;
  }
  .session-detail-panels {
    height: auto;
    min-height: 0;
  }
  .session-detail-page .transcript-card {
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 1.25rem 1.5rem;
  }
  /* 左の境界線は .split-handle が引く */
  .session-detail-page .feedback-col {
    border: none;
    border-radius: 0;
  }
  /* プレイヤーは flex の末尾に置く。サイドバーぶんの padding-left は main が既に持っている */
  .session-detail-page [data-fixed-player] {
    position: static;
    padding-left: 0;
    flex-shrink: 0;
  }
  /* 右スロットの共有ボタン（design SP㉔）は lg では上部バーの同じボタンが担う。
     .player-icon-btn の display が Tailwind の lg:hidden と同じ詳細度で後勝ちするため、ここで隠す */
  .session-detail-page .player-slot .player-icon-btn { display: none; }
}
/* 話者名。A/B のバッジは置かず、名前の文字色と「あなた / 相手」の文字で区別する。色の値は :root を参照 */
.segment-who { font-size: 0.9375rem; font-weight: 700; white-space: nowrap; }
.speaker-a-fg { color: var(--speaker-a-fg); }
.speaker-b-fg { color: var(--speaker-b-fg); }
/* 時刻。押すとその位置から再生する。行のタップがシートになったぶん、当たりを 32px に広げる
   （負のマージンで左端は本文と揃えたまま）。slate-500 は白背景で 4.76:1 */
.segment-time {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 2rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--slate-500);
  white-space: nowrap;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  padding: 0 0.25rem;
  margin: 0 -0.25rem;
  cursor: pointer;
}
.segment-time:hover { text-decoration: underline; }
/* 再生中の行の時刻。地の面 + 真鍮の枠 + 金文字 + 再生アイコンで、色以外の手がかりを持たせる */
.segment-time-active {
  background: var(--page-bg);
  color: var(--gold-text);
  border: 1px solid var(--gold);
  font-weight: 700;
  padding: 0 0.4375rem;
  margin: 0;
}
.segment-text { font-size: 0.96875rem; line-height: 1.65; color: var(--ink); }
/* 再生中の行は本文を濃くする */
.segment-active .segment-text { color: var(--slate-900); }
/* デスクトップの行（design 案 B）。話者名はモバイルと同じ文字色、時刻は brand の再生アイコン付き、本文 15px。
   行の飾りは「面 1 つ + 左バー 1 本」まで（Issue #129）。
   ホバー = tint、再生中 = tint の面 + 真鍮の左バー + 真鍮枠の時刻ピル、選択中 = 深緑の左バー。
   再生中 + 選択中は tint の面に深緑のバー。リングは付けない。コメントのある行は件数ピルだけ */
@media (min-width: 1024px) {
  .segment { padding: 0.625rem; border-radius: 0.375rem; }
  /* 話者名の色はモバイルと同じ（design.pen の segment-ainote と同じ変数）。大きさだけ落とす */
  .segment-who { font-size: 0.8125rem; font-weight: 600; }
  .segment-time { min-height: 1.875rem; font-size: 0.75rem; font-weight: 600; color: var(--brand); }
  .segment-text { font-size: 0.9375rem; line-height: 1.75; }
  /* 再生中は tint の面 + 真鍮の左バー。選択中が重なれば深緑のバーが勝つ */
  .segment-active, .segment-active:hover { background: var(--amber-50); box-shadow: inset 3px 0 0 var(--seg-active-bar); }
  .segment-selected, .segment-active.segment-selected { box-shadow: inset 3px 0 0 var(--brand); }
  .segment-active .segment-text { color: var(--slate-700); }
  /* リンク（?comment=）から開いた行。選択中の左バーに brand-light の面を足す（design ㉓）。
     再生中と重なったら tint の面を優先し、面を 2 つ重ねない */
  .segment-linked { background: var(--brand-light); }
  .segment-active.segment-linked { background: var(--amber-50); }
  .segment-cmt-marker {
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--slate-200);
    border-radius: 0.375rem;
    background: var(--surface);
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--slate-600);
  }
  .segment-cmt-marker svg { color: var(--slate-500); }
}
/* ---- Markdown content ---- */
.md-content h1 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
.md-content h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.4rem; margin-top: 1rem; }
.md-content h3 { font-size: 1rem; font-weight: 600; margin-top: 0.75rem; margin-bottom: 0.3rem; }
/* 日本語の長文を読みやすくするため行間を広めに取る（総評・振り返り・添削の共通） */
.md-content p  { margin-bottom: 0.6rem; font-size: 0.875rem; line-height: 1.75; }
.md-content ul, .md-content ol { padding-left: 1.25rem; margin-bottom: 0.6rem; font-size: 0.875rem; }
/* Tailwind の preflight が list-style を消すので、Markdown の箇条書きには記号と番号を戻す */
.md-content ul { list-style: disc; }
.md-content ol { list-style: decimal; }
.md-content li { margin-bottom: 0.2rem; line-height: 1.75; }
/* 表（renderMarkdown の GFM 表）。横に長いものは枠の中だけ横スクロールする */
.md-content .md-table { overflow-x: auto; margin-bottom: 0.75rem; }
.md-content table { border-collapse: collapse; font-size: 0.8125rem; line-height: 1.6; min-width: 100%; }
.md-content th,
.md-content td { border: 1px solid var(--slate-200); padding: 0.375rem 0.625rem; text-align: left; vertical-align: top; }
.md-content th { background: var(--brand-light); font-weight: 700; color: var(--slate-900); white-space: nowrap; }
.md-content code { background: var(--slate-100); padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.85em; }
.md-content blockquote { border-left: 3px solid var(--quote-bar); padding-left: 0.75rem; color: var(--slate-500); margin: 0.5rem 0; }
.md-content pre { background: var(--slate-100); border-radius: 0.375rem; padding: 0.75rem; margin-bottom: 0.6rem; overflow-x: auto; }
.md-content pre code { background: none; padding: 0; font-size: 0.8rem; line-height: 1.6; }
.md-content hr { border: 0; border-top: 1px solid var(--slate-200); margin: 1rem 0; }
.md-content a { color: var(--brand); text-decoration: underline; }
.md-content > *:last-child { margin-bottom: 0; }

/* ===== 添削項目カタログの編集画面 =====
   モーダルをやめ、URL を持つ 2 ペインにした。左で何を編集するか選び、右で編集する。
   折り畳みは作らない（「開けるのかどうか」を考えさせないため）。 */

/* Markdown は原文と描画を横に並べて常時見せる。切り替え式にすると
   「いまどちらを見ているか」を覚えていないといけない */
.md-split { margin-top: 1.25rem; }
.md-split-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}
.md-split-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.625rem;
}
@media (min-width: 1024px) {
  .md-split-body { grid-template-columns: 1fr 1fr; }
}
.md-split-body textarea { resize: vertical; }
.md-preview {
  min-height: 8rem;
  border: 1px solid var(--slate-200);
  border-radius: 0.375rem;
  padding: 0.75rem;
  background: var(--card-bg);
  overflow-x: auto;
}
.md-empty { color: var(--slate-500); font-size: 0.875rem; }

.publish-bar { position: sticky; top: 0.5rem; z-index: 20; }

.knowledge-panes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .knowledge-panes { grid-template-columns: 17rem minmax(0, 1fr); }
  .knowledge-left { position: sticky; top: 6rem; max-height: calc(100vh - 8rem); overflow-y: auto; }
}
.knowledge-left,
.knowledge-right {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 0.375rem;
}
.knowledge-left { padding: 0.625rem; }
.knowledge-right { padding: 1.25rem; min-width: 0; }

.knowledge-search {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--slate-200);
  border-radius: 0.375rem;
  background: var(--page-bg);
}

.kn-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  color: var(--slate-600);
}
.kn-row:hover { background: var(--slate-100); }
.kn-row.is-on { background: var(--brand-light); color: var(--slate-900); font-weight: 600; }
.kn-item { align-items: flex-start; }
.kn-sep { height: 1px; background: var(--slate-200); margin: 0.5rem 0; }
.kn-add {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 0.375rem;
  background: var(--slate-100);
  color: var(--slate-600);
  font-size: 0.6875rem;
  font-weight: 700;
}
.kn-add:hover { color: var(--slate-900); }
/* 公開を止めている項目へ 1 クリックで飛べるようにする */
.kn-warn {
  flex-shrink: 0;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: var(--danger-bg);
  color: var(--danger-fg);
}

/* 数値は 1 本の帯に畳む。開いた瞬間に本文が見えるようにするため */
.kn-params {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  margin-top: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--slate-200);
  border-radius: 0.375rem;
  background: var(--page-bg);
}
@media (min-width: 768px) {
  .kn-params { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.kn-block {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--slate-200);
}

/* 選抜の設定。数値だけ並べても結果が想像できないので常に換算して出す */
.kn-sim {
  margin-top: 1.25rem;
  padding: 0.875rem;
  border-radius: 0.375rem;
  background: var(--brand-light);
}
.kn-sim-row { display: flex; align-items: center; gap: 0.625rem; margin-top: 0.5rem; }
.kn-bar { flex: 1; height: 0.5rem; border-radius: 999px; background: var(--surface); overflow: hidden; }
.kn-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--brand); }

/* 作成キットの使い方は画面に直接書く（別ドキュメントへ飛ばさない） */
.kn-kit {
  margin-top: 1.25rem;
  padding: 0.875rem;
  border: 1px solid var(--slate-200);
  border-radius: 0.375rem;
  background: var(--page-bg);
}
.kn-step { display: flex; gap: 0.625rem; align-items: flex-start; }
.kn-step-n {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--slate-200);
  color: var(--slate-600);
  font-size: 0.625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kn-prompt {
  margin-top: 0.5rem;
  padding: 0.625rem;
  border-radius: 0.375rem;
  background: var(--slate-900);
}
.kn-copy {
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 0.375rem;
  background: var(--slate-800);
  color: var(--slate-300);
}

.kn-drop {
  margin-top: 1.25rem;
  padding: 1.75rem 1rem;
  border: 2px dashed var(--slate-300);
  border-radius: 0.375rem;
  background: var(--page-bg);
  text-align: center;
}
.kn-drop.is-over { border-color: var(--brand); background: var(--brand-light); }

.kn-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.375rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.375rem;
}
.kn-check.is-error { background: var(--danger-bg); color: var(--danger-fg); }
.kn-check.is-warn { background: var(--amber-50); color: var(--gold-text); }
.kn-check.is-ok { background: var(--success-bg); color: var(--success-fg); }

.kn-diff {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.375rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.375rem;
}
.kn-diff.is-add { background: var(--success-bg); }
.kn-diff.is-mod { background: var(--brand-light); }
.kn-diff.is-del { background: var(--danger-bg); }
.kn-mark {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 0.375rem;
  color: var(--on-ink);
  font-size: 0.6875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kn-mark.is-add { background: var(--success-fg); }
.kn-mark.is-mod { background: var(--brand); }
.kn-mark.is-del { background: var(--danger-fg); }

.kn-radio {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.375rem;
  padding: 0.625rem;
  border: 1px solid var(--slate-200);
  border-radius: 0.375rem;
  cursor: pointer;
}
.kn-radio.is-on { border-color: var(--brand); background: var(--brand-light); }

.kn-version {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--slate-200);
  border-radius: 0.375rem;
}
.kn-version.is-current { border-color: var(--brand); background: var(--brand-light); }

/* 公開の確認。モーダルではなく右から出すドロワーにして、左の項目リストを見せたままにする */
.kn-drawer {
  width: min(32rem, 100%);
  max-height: 100vh;
  overflow-y: auto;
  background: var(--card-bg);
  border-left: 1px solid var(--line-2);
}

/* 総評だけ見出しを強調する（振り返り・添削の見た目は変えない） */
.md-content.md-feedback h2 {
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  margin-top: 1rem;
  margin-bottom: 0.375rem;
}
/* 本文は 15px（design の 13.5px は小さいという指摘で上げた。2026-09-29） */
.md-content.md-feedback p,
.md-content.md-feedback ul,
.md-content.md-feedback ol { font-size: 0.9375rem; line-height: 1.85; color: var(--ink); }
.md-content.md-feedback li { line-height: 1.8; }
.md-content.md-feedback strong { font-weight: 700; background: linear-gradient(transparent 60%, var(--marker) 60%); }
/* AI レビューの頭（design の StSummary）。AI ピル（tint + 真鍮の枠 + 深緑の字）+ 日付、その下にラブカレくんと総評の一文 */
/* 総評はカードに載せる（design の StSummary。コメントタブのカードと同じ面） */
.feedback-card { padding: 0.875rem 1rem; }
.ai-review-head { display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.ai-review-pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  height: 1.5rem; padding: 0 0.625rem; border-radius: 0.375rem;
  background: var(--brand-light); color: var(--brand); border: 1px solid var(--gold);
  font-size: 0.71875rem; font-weight: 700; white-space: nowrap;
}
.ai-review-pill svg { width: 0.75rem; height: 0.75rem; }
.ai-review-date { font-size: 0.75rem; color: var(--slate-500); }
/* 見出しの左のラブカレくん（総評の 4 節）。見出しの行の高さに合わせて 40px */
.md-content.md-feedback h2.md-feedback-h2-mascot { display: flex; align-items: center; gap: 0.5rem; }
.mascot-heading { width: 40px; height: 40px; }
/* 総評の総合評価（星 5 段階）。点いている星だけ色を付ける */
.rating-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.rating-label { font-size: 0.75rem; font-weight: 600; color: var(--slate-500); }
.rating-stars { display: inline-flex; gap: 0.125rem; }
.rating-star { width: 1.25rem; height: 1.25rem; color: var(--slate-200); }
.rating-star.is-on { color: var(--gold-text); }
.rating-value { font-size: 0.8125rem; font-weight: 700; color: var(--slate-900); font-variant-numeric: tabular-nums; }

/* 先頭の「全体コメント」も良かった点・改善点と同じ見出しとして出す。上の余白だけ詰める */
.md-content.md-feedback > h2:first-child { margin-top: 0; }

/* 右カラム。背景を沈めることで、中の白いカードを浮かせる。
   余白は持たず（タブを上端に密着させる）、ストリーム側で取る。角丸の内側にタブの下線を収めるため clip する */
.feedback-col {
  background: var(--page-bg);
  border: 1px solid var(--card-border);
  border-radius: 0.375rem;
  padding: 0;
  overflow: hidden;
}

/* 右カラムのタブ「総評｜コメント N」。高さ 54、等分。選択中は brand の下線 2px、非選択は枠色の下線 1px
   （design [生徒] ③c 案 C） */
.annot-tabs {
  display: flex;
  flex-shrink: 0;
}
.annot-tab {
  flex: 1;
  height: 3.375rem;
  border: none;
  border-bottom: 1px solid var(--card-border);
  background: none;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--slate-500);
  cursor: pointer;
}
.annot-tab-on {
  font-weight: 700;
  color: var(--ink);
  border-bottom: 3px solid var(--ink);
}
/* タブの中身。コメントタブは行番号順のカードのストリーム、総評タブは本文だけ */
.annot-stream {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.75rem 1.25rem 1.25rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* 行コメントのカード。左辺の色は文字起こし行と同じ規則で付ける
   （再生中 = 真鍮、それ以外は無し）。カードの中のカードなので面は地（redesign_v2 の div.card） */
.comment-card {
  background: var(--page-bg);
  border: 1px solid var(--card-border);
  border-radius: 0.375rem;
  padding: 0.75rem;
}
/* 再生中の行のコメント。tint の面に真鍮の枠、左辺だけ 3px */
.comment-card-active {
  background: var(--amber-50);
  border-color: var(--seg-active-bar);
  border-left-width: 3px;
}
/* 選択中（編集中）の行のコメント。文字起こし側の選択中と同じ深緑の左辺 3px。リングは付けない */
.comment-card-selected {
  border-left: 3px solid var(--brand);
}
/* リンク（?comment=）から開いたコメント。brand-light の面に brand の枠、左辺だけ 3px（design ㉓） */
.comment-card-linked {
  background: var(--brand-light);
  border-color: var(--brand);
  border-left-width: 3px;
}
/* AI のコメントの印（tint の面 + 真鍮の枠 + 深緑の字。redesign_v2 の span.pill）。人のコメントはピルにせず .comment-author の氏名だけ */
.src-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 60%;
  padding: 0.1875rem 0.5rem;
  border-radius: 0.375rem;
  background: var(--brand-light);
  border: 1px solid var(--gold);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--brand);
  white-space: nowrap;
}
.src-tag svg { flex-shrink: 0; color: var(--brand); }
/* 人のコメントの書き手。氏名だけを太字で出す（アイコン・役職・アバターは付けない） */
.comment-author { font-size: 0.875rem; font-weight: 700; color: var(--slate-800); }
/* カードのタイムスタンプ。押すとその位置から再生する */
.comment-time {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--brand);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
.comment-time:hover { text-decoration: underline; }
/* カード右上の「リンクをコピー」。28px 角の箱なしアイコン。ホバーで薄い灰色の面（design spec コメントのリンク操作） */
.comment-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--slate-400);
  cursor: pointer;
}
.comment-link-btn:hover { background: var(--slate-100); color: var(--slate-700); }
.comment-body {
  font-size: 0.9375rem;
  line-height: 1.85;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}
/* カード下部の操作。常時出すが目立たせない */
.comment-action {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--slate-500);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
.comment-action:hover { color: var(--slate-900); text-decoration: underline; }

/* 再生中の行にコメントが無いときのプレースホルダ。
   ストリームの時系列上の正しい位置に差し込む。
   「tint の面はあるがコメントカードは無い」＝今聞いている箇所に指摘が無い、が読める */
.now-playing-gap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--seg-active-bar);
  border-left-width: 3px;
  border-radius: 0.375rem;
  background: var(--amber-50);
  font-size: 0.75rem;
  color: var(--slate-600);
}

/* 削除したカードの跡に残すインライン通知。トーストではない。
   完了した操作の報告なので無彩色に置き、深緑とも真鍮とも混ぜない */
.deleted-notice {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem;
  border: 1px solid var(--slate-300);
  border-radius: 0.375rem;
  background: var(--page-bg);
  font-size: 0.75rem;
  color: var(--slate-600);
}

/* 行コメントの入力欄。編集中は一時的な作業状態なので彩度を持たせない */
.comment-input {
  width: 100%;
  font-size: 0.8125rem;
  line-height: 1.7;
  resize: vertical;
}
/* 総評本文中のタイムスタンプ。押すとその再生位置へ移動する */
.ts-link {
  color: var(--brand-hover);
  font-weight: 600;
  font-size: inherit;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
.ts-link:hover { text-decoration: underline; }

/* ---- File drop zone ---- */
.drop-zone {
  border: 2px solid var(--slate-500);
  border-radius: 0.375rem;
  padding: 2rem;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
}
.drop-zone:hover, .drop-zone.dragover {
  border-color: var(--brand);
  background: var(--brand-light);
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 9999px; }

/* ---- Transition ---- */
.fade-enter { animation: fadeIn 0.15s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---- Spinner ---- */
.spinner {
  width: 1.25rem; height: 1.25rem;
  border: 2px solid var(--slate-200);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
/* 深緑のボタンの中で回すとき（アップロード中の送信ボタン）。地は白の半透明、進む側は白 */
.spinner-on-ink { border-color: rgba(255, 255, 255, 0.4); border-top-color: var(--on-ink); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Annotation dot ---- */
.annot-dot {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--seg-active-bar);
}

/* ---- セッション詳細（design.pen SP5 / 5-b / 8 / 9 とデスクトップ 1〜5）---- */

/* 44px のタップ領域を持つボタン。見た目の余白だけ広げる */
.btn-tap { min-height: 2.75rem; padding-left: 1.25rem; padding-right: 1.25rem; }
/* 見た目を変えずにタップ領域だけ 44px に広げる（28px の小さなアイコンボタン用）。
   親に relative が付くので、絶対配置の子を持つ要素には使わない */
.tap-area { position: relative; }
.tap-area::after { content: ""; position: absolute; inset: -0.5rem; }

/* 行の右端に出すコメントボタン。ホバー中と選択中だけ出す（箱なしのアイコン）。
   absolute で本文の折り返しに影響させない。1 行目（名前・時刻）の高さに合わせ、当たりは 44 x 32 */
.segment-cmt-btn {
  position: absolute;
  top: 0.5rem;
  right: 0;
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--brand-hover);
  cursor: pointer;
}
.segment:hover .segment-cmt-btn,
.segment-selected .segment-cmt-btn { display: inline-flex; }
/* モバイルでリンクから開いた行。行に横 padding が無いので、面と左バーを付けるときだけ左を空ける（design SP㉓） */
@media (max-width: 1023px) {
  .segment-linked {
    background: var(--brand-light);
    box-shadow: inset 3px 0 0 var(--brand);
    border-radius: 0.375rem;
    padding-left: 0.625rem;
  }
}
.segment-cmt-btn:hover { background: var(--brand-light); }

/* 行 + 行直下コメントの縦積み */
.segment-group { border-radius: 0.375rem; }

/* モバイルの subhead。メタ行 + アポの流れ + タブ「文字起こし｜総評」を文字起こしの上に常設する。
   区切り線は引かず、下の行と同じ白い面に並べる。
   左右 8px + main の 12px で design の 20px に合わせる */
.sp-subhead {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: 0;
  padding: 0 0.5rem;
}
/* モバイルの subhead（メタ行 + アポの流れ + タブ）はヘッダの直下に貼り付け、本文をスクロールしても残す（利用者の指示 2026-09-29）。
   main の左右 0.75rem の余白ぶん外へ広げ、地と同じ色で塗る。design の SP⑰-⑤ は貼り付けていないので、そこだけ design からずれる */
@media (max-width: 1023px) {
  .sp-subhead {
    position: sticky;
    top: 4rem;
    z-index: 10;
    margin: -0.75rem -0.75rem 0;
    padding: 0.75rem 1.25rem 0;
    background: var(--page-bg-top);
  }
}
/* 文字起こしのカードは地の色（redesign_v2 の StDetail 左 section.card = #F2F4F0、SP⑰-⑤ は行が地に直接並ぶ）。
   右カラムの総評・コメントは面（#E4E9E3）のままなので、左右で薄い・濃いの差が付く */
.transcript-card { background: var(--page-bg); }
/* セッション詳細（モバイル）の文字起こしカードは枠・影・余白を外し、subhead と 1 つの面にする */
@media (max-width: 1023px) {
  .transcript-card {
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0.5rem;
  }
}
/* style.css は tailwind.css より後に読まれるため、lg:hidden では display:flex に負ける。
   デスクトップの非表示はここで行う */
@media (min-width: 1024px) {
  .sp-subhead { display: none; }
}
/* メタ行。「8月20日(木) · 21分40秒 · アポ · 28歳・看護師」の 1 行 */
.sp-meta {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--slate-500);
}
/* アポの流れ。メタ行と同じ 13px / slate-500。2 行で省略し（line-clamp）、下のボタンで広げる（design 案 B）。
   .sp-flow はモバイルの head、.flow-line はデスクトップの本文先頭（lg 未満は Tailwind の hidden） */
.sp-flow,
.flow-line {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--slate-500);
  overflow-wrap: anywhere;
}
.sp-flow { font-weight: 500; margin-top: -0.5rem; }
/* デスクトップは文字起こし列の「音声記録」の直下に置く */
.flow-line { font-weight: 400; margin: 0 0 0.75rem; }
.flow-text { margin: 0; }
/* たたんだ状態。2 行で切り、末尾は「…」 */
.flow-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
/* デスクトップの「続きを読む ⌄ / たたむ ⌃」。深緑の 13px 太字 */
.flow-more {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  margin-top: 0.25rem;
  padding: 0;
  border: none;
  background: none;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--brand);
  cursor: pointer;
}
.flow-more:hover { text-decoration: underline; }
/* モバイルの矢印。本文の下の行に 16px で置く。当たりは 28px。本文の左端に揃えるため左に寄せる */
.flow-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: -0.25rem 0 -0.25rem -0.375rem;
  border: none;
  background: none;
  color: var(--slate-500);
  cursor: pointer;
}
/* スマホのタブ「文字起こし｜総評」。高さ 44、2 等分。選択中は brand の下線 2px、非選択は枠色の下線 1px
   （design SP⑰-⑤c 案 A）。subhead の gap ぶんメタ行に寄せる */
.sp-tabs {
  display: flex;
  margin-top: -0.375rem;
}
.sp-tab {
  flex: 1;
  height: 2.75rem;
  border: none;
  border-bottom: 1px solid var(--card-border);
  background: none;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--slate-500);
  cursor: pointer;
}
.sp-tab-on {
  font-weight: 700;
  color: var(--ink);
  border-bottom: 3px solid var(--ink);
}
/* タブで隠すペイン。lg 以上は 2 カラムに戻るので常に出す */
@media (max-width: 1023px) {
  .sp-pane-hidden { display: none; }
}
/* 「総評」タブの中身。枠で囲まず白い面に本文を流す。デスクトップは右カラムが担うので隠す */
.sp-summary-pane { padding: 0.875rem 0.5rem 0; }
@media (min-width: 1024px) {
  .sp-summary-pane { display: none; }
}

/* 行直下のコメント（モバイル）。本文の左端に揃えた引用として置く */
.inline-comment-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0 0 0.75rem 0;
}
@media (min-width: 1024px) {
  /* デスクトップは右カラムに出すため行直下には出さない（lg:hidden と同じ理由でここに書く） */
  .inline-comment-wrap { display: none; }
}
/* 引用。左 2px の slate の線だけで、面と角は持たない */
.inline-comment {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0 0 0 0.625rem;
  border-left: 2px solid var(--quote-bar);
  cursor: pointer;
}
/* 「山田講師 · 8/22」 */
.inline-comment-head {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}
.inline-author { font-size: 0.875rem; font-weight: 700; color: var(--slate-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inline-sep,
.inline-date { font-size: 0.8125rem; font-weight: 500; color: var(--slate-500); white-space: nowrap; }
.inline-body {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}
/* 「他 N 件の返信を表示」。文字だけのリンク色 var(--brand-hover)。44px のタップ領域 */
.inline-comment-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 2.75rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--brand-hover);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}
.inline-comment-more:hover { text-decoration: underline; }
/* 行直下カードの操作行。「他 N 件の返信を表示」と「リンクをコピー」を横に並べる */
.inline-comment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.inline-comment-link { color: var(--slate-500); }
.inline-comment-others { min-height: 2.25rem; }
/* 返信の一覧。root の下に少し下げて並べる */
.inline-replies {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--quote-bar);
}
.inline-reply { display: flex; flex-direction: column; gap: 0.25rem; }

/* シートの返信先表示 */
.sheet-reply-to {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  background: var(--brand-light);
  color: var(--brand-hover);
  font-size: 0.75rem;
  font-weight: 600;
}
.sheet-reply-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--brand-hover);
  cursor: pointer;
}
/* 見た目 32px のまま当たりを 44px に（チップの高さを増やさない） */
.sheet-reply-cancel::after { content: ""; position: absolute; inset: -0.375rem; }
.sheet-reply-cancel:hover { background: var(--indigo-100); }

/* コメントの前後移動のピル。プレイヤーの上に浮かせる。
   後ろの本文が透けて見えるよう白 60% + 弱いぼかし。シートのスクリム（z-index 40）より下。
   モバイルは画面中央、デスクトップは文字起こし列（左カラム）の下端中央 */
.cmt-nav {
  position: fixed;
  left: 50%;
  bottom: 9.25rem;
  z-index: 35;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 11.75rem;
  height: 3rem;
  padding: 0 0.125rem;
  border-radius: 9999px;
  border: 1px solid var(--line-2);
  background: var(--float-face);
}
.cmt-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.25rem;
  height: 3rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--brand-hover);
  cursor: pointer;
}
.cmt-nav-btn:hover { background: rgb(var(--brand-rgb) / 0.1); }
.cmt-nav-btn:disabled { opacity: 0.4; cursor: default; background: transparent; }
.cmt-nav-pos {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--slate-800);
}
.cmt-nav-pos svg { color: var(--slate-500); }
@media (min-width: 1024px) {
  /* 左カラムの中心 = サイドバー幅（--sidebar-w、base.html が出す）を除いた幅 × 左カラムの比（--split-ratio）の半分。
     bottom は固定プレイヤー（シーク + 時刻行 + 操作行）の高さ + 1rem */
  .cmt-nav {
    left: calc(var(--sidebar-w, 15rem) + (100vw - var(--sidebar-w, 15rem)) * var(--split-ratio, 0.5) / 2);
    bottom: 8rem;
  }
}

/* 「再生位置へ」。再生中の行が可視範囲から外れたときだけ、プレイヤーの上に出す浮動ボタン。
   ピルの右横（ピル半幅 5.875rem + 27px）にアイコンだけの角丸。ピルと同じ半透明の白 */
.jump-btn {
  position: fixed;
  left: calc(50% + 5.875rem + 27px);
  bottom: 9.25rem;
  z-index: 35;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 9999px;
  background: var(--float-face);
  color: var(--brand);
  cursor: pointer;
}
.jump-btn:hover { background: rgb(var(--brand-rgb) / 0.1); }
.jump-btn-icon { width: 1.375rem; height: 1.375rem; }
@media (min-width: 1024px) {
  /* デスクトップはピル（.cmt-nav）と同じ左カラムの中心を基準に、その右横に置く */
  .jump-btn {
    left: calc(var(--sidebar-w, 15rem) + (100vw - var(--sidebar-w, 15rem)) * var(--split-ratio, 0.5) / 2 + 5.875rem + 27px);
    bottom: 8rem;
  }
}

/* 待ち画面（4 段ステップ）。文字起こしと AI レビューで同じ型 */
.wait-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0.75rem 0.5rem;
  text-align: center;
}
.wait-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  background: var(--brand-light);
  color: var(--brand);
}
.wait-title { margin-top: 1.125rem; font-size: 1.0625rem; font-weight: 700; color: var(--slate-900); }
.wait-body { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.7; color: var(--slate-500); max-width: 24rem; }
.wait-steps {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  width: 100%;
  max-width: 20rem;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.wait-step {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--slate-500);
}
.wait-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  /* 未着手 = 強い罫線の輪郭、完了 = tint + 深緑のチェック、現在 = 深緑の面 + 白のローダー（redesign_v2 の StTranscribing） */
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--success-fg);
}
.wait-step-done .wait-dot { background: var(--success-bg); border-color: var(--success-bg); }
.wait-step-current { color: var(--slate-900); font-weight: 700; }
.wait-step-current .wait-dot { background: var(--brand); border-color: var(--brand); }
.wait-spinner {
  width: 0.625rem;
  height: 0.625rem;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--on-brand);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.wait-hint { font-size: 0.75rem; font-weight: 500; line-height: 1.6; color: var(--slate-500); }

/* 下部固定プレイヤー。上から 4px のシークバー、時刻の行、操作の行。再生ボタンを中央に置く */
/* シークバー。見た目は 4px の線、上下に 8px の余白を置いて当たりを 20px にする。
   再生済みの割合は --seek（%）で受け取り、線だけを gradient で塗る（background-clip） */
.player-seek {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 4px;
  box-sizing: content-box;
  margin: 0;
  padding: 0.5rem 0;
  border: none;
  outline: none;
  background: linear-gradient(to right, var(--brand) var(--seek, 0%), var(--slate-200) var(--seek, 0%));
  background-clip: content-box;
  cursor: pointer;
}
.player-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background: var(--brand);
}
.player-seek::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: none;
  border-radius: 50%;
  background: var(--brand);
}
.player-seek::-moz-range-track { background: transparent; }
/* シークバーの器。コメント位置の目印を絶対配置で重ねる */
.player-seek-wrap { position: relative; }
/* コメント位置の目印。線の中心（高さ 20px の当たりの中央）に 2px x 12px の縦線。操作は下の range に通す */
.player-seek-mark {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 0.75rem;
  margin-left: -1px;
  transform: translateY(-50%);
  background: var(--brand);
  pointer-events: none;
}
.player-row-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--slate-500);
}
.player-row-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.375rem 1.25rem 1.25rem;
}
.player-speed,
.player-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
}
/* 再生速度。スマホは箱なしの文字だけ、デスクトップは面のピル（design 案 B） */
.player-speed {
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--slate-900);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}
.player-speed:hover { background: var(--slate-100); }
@media (min-width: 1024px) {
  .player-speed {
    width: auto;
    min-width: 3.5rem;
    height: 2.5rem;
    padding: 0 0.875rem;
    border: 1px solid var(--card-border);
    border-radius: 9999px;
    background: var(--card-bg);
    font-size: 0.875rem;
  }
}
/* 箱なしのアイコンボタン。44px の当たりだけ確保する */
.player-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--slate-800);
  cursor: pointer;
}
.player-icon-btn:hover { background: var(--slate-100); }
/* 再生。52px の領域に 36px のアイコン、面は付けない */
.player-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--brand);
  color: var(--on-brand);
  cursor: pointer;
}
.player-play:hover { background: var(--brand-hover); }

/* ---- マイセッション一覧（design.pen SP①）---- */
/* 絞り込みチップ（component/sp-filter-chip）。高さ 44px でタップ領域を確保する */
.chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  height: 2.75rem; padding: 0 0.75rem; border-radius: 999px;
  background: var(--card-bg); border: 1px solid var(--card-border);
  font-size: 0.78rem; font-weight: 600; color: var(--slate-600);
  white-space: nowrap; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.chip:hover { background: var(--slate-100); }
/* 選択中は tint の面 + 深緑の枠と字（redesign_v2 の button.chip） */
.chip-on { background: var(--brand-light); border-color: var(--brand); color: var(--brand); }
.chip-on:hover { background: var(--brand-light); }
.chip-count {
  display: inline-flex; align-items: center; justify-content: center;
  height: 1.125rem; min-width: 1.125rem; padding: 0 0.375rem; border-radius: 999px;
  background: var(--slate-100); color: var(--slate-600); font-size: 0.6875rem; font-weight: 700;
}
.chip-on .chip-count { background: var(--brand); color: var(--on-brand); }

/* 右下の FAB（音声をアップロード）。lg 以上はヘッダーのボタンを使うので出さない */
.fab {
  position: fixed; right: 1rem; bottom: 1.5rem; z-index: 30;
  width: 3.5rem; height: 3.5rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand); color: var(--on-brand);
  transition: background 0.15s;
}
.fab:hover { background: var(--brand-hover); }

/* 文字起こし中の行の不確定バー。進捗はサーバが返さないので往復させるだけ */
.prog-indeterminate {
  position: relative; height: 5px; border-radius: 999px; overflow: hidden;
  background: var(--slate-200);
}
.prog-indeterminate::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 35%;
  border-radius: 999px; background: var(--brand);
  animation: progSlide 1.4s ease-in-out infinite;
}
@keyframes progSlide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}

/* 上限到達の警告カード（design.pen SP②-b の limitCard） */
.limit-card {
  border-radius: 0.375rem; padding: 0.75rem;
  background: var(--amber-50); border: 1px solid var(--amber-200); color: var(--amber-800);
}

/* ---- 音声をアップロード（design.pen SP⑰-② / ③ と U）---- */
/* スマホは白い 1 面に並べ、送信ボタンを画面下部に固定する（下の padding は固定フッターのぶん）。
   左右 4px は main の 12px と合わせて design の 16px */
.upload-page { max-width: 48rem; margin: 0 auto; padding: 0.125rem 0.25rem 7rem; }
.upload-title { margin-bottom: 0.875rem; font-size: 1.375rem; font-weight: 700; line-height: 1.45; color: var(--slate-900); }
.upload-card { display: flex; flex-direction: column; gap: 0.875rem; }
.upload-form .label {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem;
  margin-bottom: 0.375rem; font-size: 0.875rem; font-weight: 500; color: var(--slate-700);
}
/* 必須の印。スマホはラベルと同じ色、デスクトップは赤（design U） */
.upload-form .label .req { color: var(--gold-text); }
.upload-form .label .hint { margin-left: 0.25rem; font-size: 0.75rem; font-weight: 400; color: var(--slate-500); }
/* 入力欄は高さ 44。枠は slate-500 のまま（design U は slate-300 だが WCAG 1.4.11 の判断を優先） */
.upload-form .input { padding: 0.6875rem 0.875rem; font-size: 0.9375rem; border-radius: 0.375rem; }
.upload-form textarea.input { min-height: 6rem; }
.upload-form .drop-zone { padding: 1.5rem 1.25rem; }
.drop-zone-icon { width: 2.25rem; height: 2.25rem; }
/* 選んだファイルの行。高さ 44、白 + 枠 */
.file-row {
  display: flex; align-items: center; gap: 0.5rem;
  height: 2.75rem; padding: 0 0.75rem;
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 0.375rem;
}
.file-row-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border: none; border-radius: 0.375rem;
  background: transparent; color: var(--slate-500); cursor: pointer;
}
.file-row-btn:hover:not(:disabled) { background: var(--slate-100); color: var(--slate-700); }
.file-row-btn:disabled { opacity: 0.3; cursor: default; }
.file-row-btn-remove:hover { background: var(--danger-bg); color: var(--danger-fg); }
/* 下部固定のフッター（スマホ）。進捗 + 送信ボタン */
.upload-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; flex-direction: column; gap: 0.875rem;
  padding: 1.125rem 1rem calc(1.125rem + env(safe-area-inset-bottom));
  background: var(--card-bg); border-top: 1px solid var(--card-border);
}
.upload-submit {
  width: 100%; height: 3.125rem; justify-content: center; gap: 0.5rem;
  border-radius: 0.375rem; font-size: 0.9375rem; font-weight: 600;
}
/* アップロード中は slate-300 の面に白の文字（design SP⑰-③） */
.upload-submit.upload-submit-busy:disabled { background: var(--slate-300); color: var(--on-ink); }
.upload-progress { display: flex; flex-direction: column; gap: 0.4375rem; }
.upload-bar { height: 0.5rem; border-radius: 0.25rem; background: var(--card-border); overflow: hidden; }
.upload-bar-fill { height: 100%; border-radius: 0.25rem; background: var(--brand); transition: width 0.2s; }
/* 無料枠の案内（design U の trial） */
.trial-card { padding: 1rem 0.75rem; border-radius: 0.375rem; background: var(--brand-light); }
.trial-card-title { font-size: 0.875rem; font-weight: 600; color: var(--indigo-800); }
.trial-card-sub { margin-top: 0.25rem; font-size: 0.75rem; color: var(--slate-600); }
/* 今月の利用上限（design U の quota）。デスクトップだけ出す */
.quota-card { padding: 1rem 0.75rem; border-radius: 0.375rem; background: var(--card-bg); border: 1px solid var(--card-border); }
.quota-bar { height: 0.5rem; margin-top: 0.375rem; border-radius: 0.25rem; background: var(--slate-200); overflow: hidden; }
.quota-bar-fill { height: 100%; border-radius: 0.25rem; background: var(--brand); }
@media (min-width: 1024px) {
  .upload-page { padding: 0 0 1.5rem; }
  .upload-title { margin-bottom: 1.25rem; }
  .upload-card {
    gap: 1rem; padding: 1.25rem;
    background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 0.375rem;
  }
  .upload-form .label { font-size: 0.8125rem; font-weight: 600; }
  .upload-form .label .req { color: var(--gold-text); }
  .upload-form .input { padding: 0.6875rem 0.5625rem; font-size: 0.875rem; border-radius: 0.375rem; }
  .upload-form textarea.input { min-height: 5.25rem; }
  /* 年齢と職業は短いので design U の幅（160 / 320）にする。.input の width: 100% より後で上書き */
  .upload-form .input-age { width: 10rem; }
  .upload-form .input-job { width: 20rem; }
  .upload-form .chip { height: 2.25rem; }
  .upload-form .drop-zone { padding: 1.75rem; }
  .drop-zone-icon { width: 1.75rem; height: 1.75rem; }
  .upload-footer { position: static; padding: 0; border: none; }
  .upload-submit { height: 3.25rem; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; }
}

/* AI レビューの行コメントの向き。褒めと指摘を一目で区別する */
.ai-side-badge {
  flex-shrink: 0;
  padding: 1px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}
.ai-side-good {
  color: var(--side-good-fg);
  background: var(--side-good-bg);
  border-color: var(--side-good-border);
}
.ai-side-bad {
  color: var(--side-bad-fg);
  background: var(--side-bad-bg);
  border-color: var(--side-bad-border);
}
/* 向きのバッジの隣に出す観点名。長い名前は省略し、時刻とバッジを押し出さない */
.ai-item-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-600);
}

/* 総評の引用の頭に付ける時刻。押すとその発話へ移動する */
.quote-time { margin-right: 0.5rem; font-variant-numeric: tabular-nums; }

/* 総評の中で必ず読ませたい固定文（振り返りの進め方）。
   枠線で囲うと警告に見えるので、薄い面と左の帯だけで区切る */
.md-content .md-callout {
  margin: 0.5rem 0 1rem;
  padding: 0.875rem 1rem;
  border-left: 4px solid var(--brand);
  border-radius: 0.375rem;
  background: var(--brand-light);
  color: var(--slate-800);
}
/* 1 行目は枠の見出し */
.md-content .md-callout > p:first-child {
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  color: var(--brand-hover);
}
.md-content .md-callout p { margin-bottom: 0.25rem; }
.md-content .md-callout ul,
.md-content .md-callout ol { margin-bottom: 0.625rem; }
.md-content .md-callout li { margin-bottom: 0; }
/* 振り返りの進め方の段（1. 今日からできる / 2. 深層心理 / 3. 講師）。段の間を区切る */
.md-content .md-callout h3 {
  margin-top: 0.875rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgb(var(--brand-rgb) / 0.15);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--slate-900);
}

/* ---- 通知（トースト） ----
   design.pen の component/toast と note-toast / spec 通知（y=49200）の位置に、案 B の色を載せる。
   墨の面 + 白の字で統一し、意味は左端のアイコンの色だけで出す（面は塗り分けない）。
   右上（base.html の header h-16 の直下）に出す。スマホは左右 1rem の幅いっぱい、
   sm 以上は右寄せで最大 20rem。複数は縦に積む（積む数は app.js の TOAST_MAX）。
   入れ物は pointer-events を切り、通知の下の画面をそのまま触れるようにする */
.toast-stack {
  position: fixed;
  top: calc(4rem + 0.75rem);
  left: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  pointer-events: none;
}
@media (min-width: 640px) {
  .toast-stack { left: auto; right: 1.5rem; }
}
.toast {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--on-ink);
  border-radius: 0.375rem;
  border: 1px solid var(--line-2);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  pointer-events: auto;
  animation: toast-in 0.2s ease;
}
@media (min-width: 640px) {
  .toast { width: auto; max-width: 20rem; }
}
.toast svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
/* 種別はアイコンの色だけ。墨の面の上なので、success も無彩色（白）で、色が付くのは error（薄いワイン）と info（マーカー）だけ */
.toast-neutral svg { color: var(--ink-soft); }
.toast-success svg { color: var(--on-ink); }
.toast-error svg { color: var(--danger-border); }
.toast-info svg { color: var(--marker); }
/* 8px 上から降りてくるフェード。動きを減らす設定では出すだけにする */
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
}

/* ---- 共通部品（追加分。案 D で足し、案 B の色に載せ替えた） ----
   表: 見出し行は面なしで補助文字の 1px 下線、行の区切りは墨 1px（redesign_v2 の th.th / td.td）。テンプレートの <table> に data-table を付けて使う */
.data-table thead th {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--slate-500);
  letter-spacing: 0.04em;
  background: transparent;
  border-bottom: 1px solid var(--slate-500);
  white-space: nowrap;
}
.data-table tbody td { border-bottom: 1px solid var(--ink); }
.data-table tbody tr:last-child td { border-bottom: 0; }
/* 見出しの墨の縦線（redesign_v2 の h2.disp、左 3px）。ダッシュボードのカード見出しなどで、上辺の色付きボーダーの代わりに使う */
.h-bar { padding-left: 0.625rem; border-left: 3px solid var(--ink); line-height: 1.4; }
/* カードの見出し行（redesign_v2 の section.card の先頭の div）。h2 は .h-bar、行全体に墨 1px の下線。
   右側にボタンやピルを並べられるよう flex にする */
.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--ink);
}
/* style.css は tailwind.css より後に読まれるため、.card-head の display が Tailwind の hidden に勝ってしまう。
   「hidden lg:flex」（デスクトップだけの見出し）をここで効かせる */
.card-head.hidden { display: none; }
@media (min-width: 1024px) {
  .card-head.lg\:flex { display: flex; }
}
/* 要対応の帯（redesign_v2 の ⑯e / K2）。ワインの面に白文字。1 画面 1 か所だけに使い、ピルや文字には使わない */
.alert-band {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.375rem;
  background: var(--danger-fg);
  color: #FFFFFF;
  font-size: 0.8125rem;
  line-height: 1.6;
}
.alert-band svg { flex-shrink: 0; width: 1rem; height: 1rem; margin-top: 0.125rem; }
.alert-band a { color: inherit; text-decoration: underline; }
/* 総評・コメントの強調。下 40% をマーカーで塗る（design の .mk） */
.mk { font-weight: 700; background: linear-gradient(transparent 60%, var(--marker) 60%); }
/* ヘッダのベルの未読ドット。数は aria-label で伝える */
.notif-dot {
  position: absolute; top: 0.5rem; right: 0.5625rem;
  width: 0.5rem; height: 0.5rem; border-radius: 999px;
  background: var(--gold); border: 2px solid var(--surface);
  box-sizing: content-box;
}
/* ラブカレくん（app/static/img/mascot/）。alt は「ラブカレくん」、ロゴ横は文字があるので空にする */
.mascot { display: block; object-fit: contain; flex-shrink: 0; }
.mascot-logo { width: 34px; height: 34px; }
.mascot-hero { width: 84px; height: 84px; }
.mascot-inline { width: 44px; height: 44px; }
.mascot-summary { width: 64px; height: 64px; }
.mascot-wait { width: 120px; height: 120px; }
.mascot-empty { width: 130px; height: 130px; }
.mascot-welcome { width: 140px; height: 140px; }
.mascot-cheer { width: 150px; height: 150px; }
/* 待ち画面の丸い面をマスコットに置き換えたとき（.wait-icon の中に img を入れる） */
.wait-icon.wait-icon-mascot { width: auto; height: auto; background: none; border-radius: 0; }
/* ワードマーク（ロゴ横）。Zen Kaku Gothic New 700、19px */
.wordmark { font-family: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif; font-weight: 700; font-size: 1.1875rem; color: var(--ink); white-space: nowrap; }

/* ---- 招待受諾（design の StInvite / SpInvite）---- */
/* 主役カードは真鍮の 1px 枠で、中身を縦に並べる。見出しは 22px */
.invite-card { padding: 2rem 1.5rem; border-color: var(--gold); }
.invite-title { font-size: 1.375rem; font-weight: 700; line-height: 1.4; color: var(--ink); }
/* 「生徒として参加します」の枠付きの金ピル */
.invite-role-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--card-border);
  border-radius: 9999px;
  background: var(--brand-light);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--brand);
}
.invite-role-pill svg { color: var(--brand); }