/* ==========================================================================
   アプリ コンポーネントスタイル (spec §3.4)
   トークン (tokens.css) のみを参照。生 hex/font 直書きなし。
   モバイルファースト → min-width で拡張。横スクロール禁止 (AC43)。
   ========================================================================== */

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

html,
body {
  margin: 0;
  padding: 0;
}

body.vg-body {
  min-width: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden; /* 横スクロール発生禁止の保険 */
}

img,
audio,
video {
  max-width: 100%;
}

/* ---- スクリーンリーダ専用 / スキップリンク ---- */
.vg-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.vg-skip-link {
  position: absolute;
  left: var(--sp-2);
  top: -3rem;
  z-index: var(--z-toast);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  transition: top 0.15s ease;
}
.vg-skip-link:focus {
  top: var(--sp-2);
}

/* ---- フォーカス可視化 (キーボード操作 AC43) ---- */
:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   ヘッダ / ナビ
   ========================================================================== */
.vg-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  row-gap: var(--sp-1);
  gap: var(--sp-3);
  /* PWA(standalone/black-translucent)時、iPhone のステータスバー(ノッチ/時計/電波)と
     ヘッダが重ならないよう safe-area の余白を上・左右に確保する。非対応環境では env() が
     0 にフォールバックし従来余白のまま。横向きのノッチ対策で左右にも inset を足す。 */
  padding: calc(var(--sp-2) + env(safe-area-inset-top, 0px))
           calc(var(--sp-4) + env(safe-area-inset-right, 0px))
           var(--sp-2)
           calc(var(--sp-4) + env(safe-area-inset-left, 0px));
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.vg-header__brand {
  font-weight: 700;
  /* 狭幅でブランド名が縮んで省略され、右側のツール(テーマ/ログアウト)を画面外へ押し出さない */
  min-width: 0;
  flex-shrink: 1;
}
.vg-brand-link {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.vg-brand-link,
.vg-nav-link {
  color: var(--c-ink);
  text-decoration: none;
}
.vg-nav-primary {
  display: flex;
  gap: var(--sp-2);
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;        /* 狭幅では折り返して必ず全項目表示（隠さない） */
}
.vg-nav-link {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  color: var(--c-ink-muted);
  flex-shrink: 0; /* ナビ内で縮めて潰さない(スクロールで逃がす) */
  white-space: nowrap;
}
.vg-nav-link:hover {
  background: var(--c-surface-2);
  color: var(--c-ink);
}
.vg-header__tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0; /* ツールは常に画面内に残す(画面外へ押し出さない) */
}
/* 極小幅(〜360px)ではヘッダの左右余白を詰めて要素の収まりを確保 */
@media (max-width: 480px) {
  .vg-header {
    /* 狭幅でも safe-area(左右ノッチ)を維持しつつ余白を詰める。 */
    padding-left: calc(var(--sp-3) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--sp-3) + env(safe-area-inset-right, 0px));
    gap: var(--sp-2);
  }
}

/* ---- アイコンボタン (≥44px) ---- */
.vg-icon-btn {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  color: var(--c-ink);
  cursor: pointer;
  font-size: var(--fs-lg);
}
.vg-icon-btn:hover {
  background: var(--c-surface-2);
}
/* テーマアイコン: 現在のテーマで表示切替 */
.vg-icon--moon {
  display: none;
}
:root[data-theme="dark"] .vg-icon--sun,
:root[data-theme="system"] .vg-icon--sun {
  display: none;
}
:root[data-theme="dark"] .vg-icon--moon,
:root[data-theme="system"] .vg-icon--moon {
  display: inline;
}
@media (prefers-color-scheme: light) {
  :root[data-theme="system"] .vg-icon--sun {
    display: inline;
  }
  :root[data-theme="system"] .vg-icon--moon {
    display: none;
  }
}

.vg-main {
  padding: var(--sp-4);
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

/* ==========================================================================
   汎用ボタン / バッジ / フォーム
   ========================================================================== */
.vg-btn {
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--fs-sm);
  cursor: pointer;
  text-decoration: none;
}
.vg-btn:hover {
  background: var(--c-surface-2);
}
.vg-btn--primary {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-accent-ink);
}
.vg-btn--danger {
  border-color: var(--c-danger);
  color: var(--c-danger);
}
.vg-btn[disabled],
.vg-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
/* <a> ボタン（書き出し等）は disabled 属性が効かないので aria-disabled で擬似無効化し、
   クリック自体を抑止する（404/不完全DLへの遷移を防ぐ）。 */
a.vg-btn[aria-disabled="true"] {
  pointer-events: none;
}

.vg-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: 999px;
  font-size: var(--fs-xs);
  border: 1px solid var(--c-border);
  background: var(--c-surface-2);
  color: var(--c-ink-muted);
  white-space: nowrap;
}
.vg-badge--ok {
  background: var(--c-ok-soft);
  color: var(--c-ok);
  border-color: var(--c-ok);
}
.vg-badge--warn {
  background: var(--c-warn-soft);
  color: var(--c-warn);
  border-color: var(--c-warn-border);
}
.vg-badge--danger {
  background: var(--c-danger-soft);
  color: var(--c-danger);
  border-color: var(--c-danger);
}
.vg-badge--human {
  background: var(--c-human-soft);
  color: var(--c-human);
  border-color: var(--c-human);
}
/* provenance バッジ色 (human/dict/rule/llm/analyzer) */
.vg-prov[data-source="human"] {
  background: var(--c-human-soft);
  color: var(--c-human);
  border-color: var(--c-human);
}

.vg-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
}
.vg-label {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}
.vg-input,
.vg-select,
.vg-textarea {
  min-height: var(--tap-min);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  color: var(--c-ink);
  font-size: var(--fs-base);
  font-family: inherit;
  width: 100%;
}
.vg-textarea {
  min-height: 6rem;
  resize: vertical;
}
.vg-error-text {
  color: var(--c-danger);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   ログイン (認証画面) — 中央寄せカード。トークン参照のみ＝ダーク/ライト両対応
   ========================================================================== */
.vg-auth {
  max-width: 26rem;
  margin: var(--sp-6) auto;
  padding: 0 var(--sp-3);
}
.vg-auth__sub {
  margin: 0 0 var(--sp-4);
  color: var(--c-ink-muted);
  font-size: var(--fs-sm);
}
.vg-auth .vg-btn {
  width: 100%;
  justify-content: center;
}
/* 「または」区切り線（OAuth ボタンとメールフォームの境目） */
.vg-auth__divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
  color: var(--c-ink-muted);
  font-size: var(--fs-sm);
}
.vg-auth__divider::before,
.vg-auth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-border);
}
/* Google ログインボタン（白地・枠線・公式配色のロゴ）。トークン参照でダーク対応。 */
.vg-btn--google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  background: var(--c-surface);
  color: var(--c-ink);
  border: 1px solid var(--c-border);
  font-weight: 600;
}
.vg-btn--google:hover {
  border-color: var(--c-accent);
  background: var(--c-surface-2, var(--c-surface));
}
.vg-btn__gicon {
  flex: 0 0 auto;
  display: block;
}
.vg-auth__error {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  background: var(--c-danger-surface, rgba(220, 38, 38, 0.1));
  color: var(--c-danger);
  font-size: var(--fs-sm);
}
.vg-auth__success {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  background: var(--c-accent-soft);
  color: var(--c-ink);
  font-size: var(--fs-sm);
}
/* テキストリンク(認証導線など)。色はトークン参照(生hex直書きなし)。 */
.vg-link {
  color: var(--c-accent);
  text-decoration: none;
}
.vg-link:hover,
.vg-link:focus-visible {
  text-decoration: underline;
}
.vg-logout-form {
  display: inline;
}

/* ==========================================================================
   セグメント行（原文＋音声プレーヤ＋再生成）/ 原稿取り込み
   ========================================================================== */
.vg-seg-row {
  list-style: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.vg-seg-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.vg-seg-row__char {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted);
}
.vg-seg-row__text {
  margin: 0 0 var(--sp-2);
  line-height: 1.7;
  word-break: break-word;
}
.vg-seg-row__media {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.vg-audio {
  width: 100%;
  max-width: 26rem;
}
.vg-ingest {
  max-width: 46rem;
}
.vg-editor__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

/* ==========================================================================
   プロジェクト一覧 (ダッシュボード §3.2)
   ========================================================================== */
.vg-grid-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 600px) {
  .vg-grid-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .vg-grid-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
.vg-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-card);
  min-width: 0;
}
.vg-card__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lg);
  word-break: break-word;
}
.vg-progress {
  height: 8px;
  background: var(--c-surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.vg-progress__bar {
  height: 100%;
  background: var(--c-accent);
}

/* ==========================================================================
   校正エディタ (§3.4) — 2カラム row レイアウト
   ========================================================================== */
.vg-editor {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.vg-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  position: sticky;
  top: var(--header-h); /* ヘッダ実高に追従(従来 56px 直書き)。狭幅の折返しでもズレない */
  z-index: 10;
  background: var(--c-bg);
  padding: var(--sp-2) 0;
}
.vg-seg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* セグメント行: モバイルは縦積み (漢字が上)、md 以上で 2カラム */
.vg-seg {
  display: grid;
  grid-template-columns: 1fr; /* < stack_breakpoint(768) */
  gap: var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-border); /* 話者色を JS/インライン variable で上書き */
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  min-width: 0;
}
.vg-seg[data-char-color] {
  border-left-color: var(--seg-char-color, var(--c-border));
}
.vg-seg:focus-within,
.vg-seg.is-active {
  box-shadow: 0 0 0 2px var(--c-focus);
}
.vg-seg.is-pending {
  opacity: 0.6; /* 楽観 UI: リクエスト中 */
}
@media (min-width: 768px) {
  .vg-seg {
    grid-template-columns: 1fr 1fr; /* md:grid-cols-2 */
  }
}

.vg-seg__pane {
  min-width: 0;
}
.vg-seg__pane-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-ink-muted);
  flex-wrap: wrap;
}

/* 左ペイン: 読み取り専用 漢字+ruby */
.vg-kanji {
  font-size: var(--fs-lg);
  line-height: 2.2;
  word-break: break-word;
}
.vg-kanji ruby {
  ruby-position: over;
}
:root[data-ruby-position="under"] .vg-kanji ruby {
  ruby-position: under;
}
.vg-kanji rt {
  font-size: var(--fs-ruby);
  color: var(--c-ink-rt); /* ≥4.5:1 (AC43) */
  font-family: var(--font-ruby);
}
/* 人手上書きトークンを amber 強調 (diff) */
.vg-kanji .tok[data-source="human"] {
  background: var(--c-human-soft);
  border-radius: var(--radius-sm);
}

/* 右ペイン: 編集可能 表音/IR ビュー */
.vg-phon {
  font-size: var(--fs-base);
  line-height: 2;
}
.vg-tok {
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 0 1px;
  min-height: var(--tap-min);
  display: inline-block;
}
.vg-tok:hover {
  background: var(--c-accent-soft);
}

/* ==========================================================================
   アクセント句 LH/HL 輪郭ウィジェット (D2 §5)
   ========================================================================== */
.vg-accent {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.vg-ap {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: var(--sp-2);
  background: var(--c-surface-2);
}
.vg-ap__svg {
  display: block;
}
.vg-ap__mora {
  font-size: var(--fs-xs);
  text-align: center;
}
/* 核セレクタ: 各モーラ下の選択ボタン (≥44px tap) */
.vg-nucleus-row {
  display: flex;
  gap: 2px;
  margin-top: var(--sp-1);
}
.vg-nucleus-btn {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--c-ink);
  font-size: var(--fs-xs);
}
.vg-nucleus-btn[aria-pressed="true"] {
  background: var(--c-accent);
  color: var(--c-accent-ink);
  border-color: var(--c-accent);
}

/* ==========================================================================
   ポップオーバ (ruby 上書き)
   ========================================================================== */
.vg-popover {
  position: absolute;
  z-index: var(--z-popover);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
  padding: var(--sp-3);
  min-width: 16rem;
  max-width: 90vw;
}

/* ==========================================================================
   AI 原文 vs 人手 差分 (show AI original)
   ========================================================================== */
.vg-diff {
  margin-top: var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: var(--fs-xs);
}
.vg-diff__head,
.vg-diff__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  align-items: center;
}
.vg-diff__head {
  background: var(--c-surface-2, var(--c-surface));
  font-weight: 600;
  border-bottom: 1px solid var(--c-border);
}
.vg-diff__row + .vg-diff__row {
  border-top: 1px solid var(--c-border);
}
.vg-diff__row.is-changed {
  background: color-mix(in srgb, var(--c-warn, #f59e0b) 12%, transparent);
}
.vg-diff__ai {
  color: var(--c-ink-muted, #6b7280);
}

/* アクセント編集の折りたたみ（段落セグメントの肥大化抑制） */
.vg-accent-details {
  margin-top: var(--sp-2);
}
.vg-accent-summary {
  cursor: pointer;
  font-size: var(--fs-xs);
  color: var(--c-ink-muted, #6b7280);
  padding: var(--sp-1) 0;
  user-select: none;
}
.vg-accent-details[open] .vg-accent-summary {
  font-weight: 600;
  color: var(--c-ink);
}

/* ==========================================================================
   音声プレビュー / ジョブ進捗
   ========================================================================== */
.vg-audio {
  width: 100%;
  margin-top: var(--sp-2);
}
.vg-job {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-base);
  flex-wrap: wrap;
}
.vg-job__bar {
  flex: 1;
  min-width: 8rem;
  height: 12px;
  background: var(--c-surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.vg-job__fill {
  height: 100%;
  width: 0;
  background: var(--c-accent);
  transition: width 0.3s ease;
}
@media (prefers-reduced-motion: reduce) { .vg-job__fill { transition: none; } }

/* 章音声生成の進捗カード（大型・存在感を強めて「動いている」と分かるように） */
.vg-job-progress {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  margin: var(--sp-3) 0;
  border: 1px solid var(--c-accent);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--radius-lg);
  background: var(--c-accent-soft);
  box-shadow: var(--shadow-md);
}
.vg-job-progress__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.vg-job-progress__title::before {
  content: "";
  width: 0.7em; height: 0.7em; border-radius: 999px;
  background: var(--c-accent); flex: none;
  animation: vg-pulse 1.4s ease-in-out infinite;
}
@keyframes vg-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .vg-job-progress__title::before { animation: none; } }
.vg-job__label {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  min-width: 9rem;
}
.vg-job__pct {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  min-width: 3.5ch;
  text-align: right;
}
.vg-job__eta {
  font-size: var(--fs-sm);
  color: var(--c-ink-muted, var(--c-ink));
  width: 100%;
}
.vg-job__eta--total {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  opacity: 1;
}

/* ==========================================================================
   トースト (楽観ロールバック通知)
   ========================================================================== */
.vg-toasts {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: min(90vw, 24rem);
}
.vg-toast {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  box-shadow: var(--shadow-popover);
  font-size: var(--fs-sm);
}
.vg-toast--error {
  border-left-color: var(--c-danger);
}

/* ==========================================================================
   縦書き (tategaki) — §3.4
   ========================================================================== */
:root[data-writing-mode="vertical-rl"] .vg-kanji,
:root[data-writing-mode="vertical-rl"] .vg-phon {
  writing-mode: vertical-rl;
  text-orientation: upright;
  max-height: 60vh;
  overflow-x: hidden;
  overflow-y: auto;
}
/* tate-chu-yoko: 2桁ラテンを横中縦に */
.tcy {
  text-combine-upright: all;
}

/* ==========================================================================
   モーション低減 (a11y)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   フォーム部品のテーマ非依存ベース配色（AA フォールバック / 横断コントラスト保証）
   Tailwind preflight 非読込のため、配色 utility(bg-*/text-*)が付かない入力・ボタンは
   ブラウザ既定にフォールバックし、<meta color-scheme="light dark"> 下で OS がダークだと
   暗くなる（ライト表示なのに入力欄が暗い等）。ここで CSS 変数により底支えする。
   utility(.bg-white/.dark:bg-zinc-900 等)が付いた要素はクラス特異性で上書きされるため不変。
   ========================================================================== */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]):not([type="button"]),
textarea,
select {
  background-color: var(--c-surface);
  color: var(--c-ink);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm, 6px);
}
input::placeholder,
textarea::placeholder {
  color: var(--c-ink-muted);
  opacity: 1;
}
/* 文字色 utility 未指定のボタンの可読性を確保（text-* が付くボタンはクラスで上書きされる） */
button {
  color: var(--c-ink);
}

/* 小サイズボタン（中断/インストール等のインライン CTA） */
.vg-btn--sm {
  padding: 0.3rem 0.7rem;
  font-size: 0.85rem;
}

/* ---- エディタ ツールバーのグループ整理（①話者 / ②音声 / 表示） ---- */
.vg-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.vg-toolbar-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding-right: 0.75rem;
  border-right: 1px solid var(--c-border, #d3d9e0);
}
.vg-toolbar-group:last-child {
  border-right: 0;
  padding-right: 0;
}
.vg-toolbar-group__label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--c-ink-muted, #515a66);
  letter-spacing: 0.02em;
  margin-right: 0.15rem;
  white-space: nowrap;
}
.vg-bulk-speaker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.vg-bulk-speaker .vg-label {
  margin: 0;
  white-space: nowrap;
}
/* スマホでは区切り線を消して縦積みを自然に */
@media (max-width: 480px) {
  .vg-toolbar-group {
    border-right: 0;
    padding-right: 0;
  }
}

/* ---- PWA インストール用トップバナー ---- */
.vg-install-banner {
  background: var(--c-accent, #1b5fa8);
  color: var(--c-accent-ink, #ffffff);
}
.vg-install-banner__inner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.5rem 0.9rem;
}
.vg-install-banner__icon {
  border-radius: 22%;
  flex: 0 0 auto;
}
.vg-install-banner__text {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 600;
  font-size: 0.95rem;
}
/* CTA は折り返さない（「インスト/ール」の不格好な改行を防ぐ） */
.vg-install-banner [data-action="pwa-install"] {
  flex: 0 0 auto;
  white-space: nowrap;
}
.vg-install-banner__close {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 0.4rem;
  min-width: 44px;
  min-height: 44px;
}
.vg-install-banner__close:hover {
  background: rgba(255, 255, 255, 0.18);
}
.vg-install-banner__hint {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 0.9rem 0.6rem;
  font-size: 0.85rem;
}
@media (max-width: 480px) {
  .vg-install-banner__text {
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ==========================================================================
   料金・使用量 / 使用枠ゲージ（Appendix B Phase 1）— 設計トークン駆動・dark自動
   ========================================================================== */
.vg-billing { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 720px; }
.vg-billing__header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.vg-billing__plan-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.vg-billing__plan-name { font-size: var(--fs-md, 1rem); }
.vg-billing__plan-fee { margin: var(--sp-2) 0 0; color: var(--c-muted); font-size: var(--fs-sm); }
.vg-billing__gauge-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.vg-billing__reset-note { margin: var(--sp-3) 0 0; color: var(--c-muted); font-size: var(--fs-sm); }
.vg-billing__cost { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.vg-billing__cost-label { font-weight: 600; }
.vg-billing__cost-value { font-size: var(--fs-lg); }
.vg-billing__cost-sub { color: var(--c-muted); font-size: var(--fs-sm); }
.vg-billing__byok { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--sp-3); }
.vg-billing__byok p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; }
.vg-billing__manage-label { font-weight: 600; }
.vg-billing__manage-note { margin: var(--sp-2) 0 0; color: var(--c-muted); font-size: var(--fs-sm); }

/* 使用枠ゲージ（本人/admin 共通） */
.vg-quota { display: flex; flex-direction: column; gap: var(--sp-2); }
.vg-quota__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.vg-quota__label { font-weight: 600; }
.vg-quota__pct { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.vg-quota__pct--ok { color: var(--c-ok); }
.vg-quota__pct--warn { color: var(--c-warn); }
.vg-quota__pct--over { color: var(--c-danger); }
.vg-quota__bar { height: 12px; background: var(--c-surface-2); border-radius: 999px; overflow: hidden; }
.vg-quota__fill { height: 100%; transition: width .3s ease; }
.vg-quota__fill--ok { background: var(--c-accent); }
.vg-quota__fill--warn { background: var(--c-warn); }
.vg-quota__fill--over { background: var(--c-danger); }
.vg-quota__detail { margin: 0; font-size: var(--fs-sm); }
.vg-quota__credit { margin: 0; font-size: var(--fs-sm); color: var(--c-ok); }
.vg-quota__note { margin: 0; font-size: var(--fs-sm); }
.vg-quota__note--warn { color: var(--c-warn); }
.vg-quota__note--over { color: var(--c-danger); }
.vg-nav-link--admin { font-weight: 700; }

/* ==========================================================================
   管理: 課金/使用量 横断ダッシュボード（Appendix B Phase 3）— 管理者専用
   ========================================================================== */
.vg-admin { display: flex; flex-direction: column; gap: var(--sp-4); }
.vg-admin__header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.vg-admin__note { margin: 0; color: var(--c-muted); font-size: var(--fs-sm); }
.vg-admin__controls { }
.vg-admin__filter { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
.vg-admin__totals { display: flex; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-2) 0; color: var(--c-muted); font-size: var(--fs-sm); }
.vg-admin__totals strong { color: var(--c-text, inherit); }
.vg-admin__rows { display: flex; flex-direction: column; gap: 2px; }
.vg-admin__row {
  display: grid; grid-template-columns: minmax(0,2.2fr) 0.8fr 0.7fr 1.4fr 0.9fr auto;
  align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  background: var(--c-surface); font-size: var(--fs-sm);
}
.vg-admin__row--head { background: var(--c-surface-2); font-weight: 600; color: var(--c-muted); border: none; }
.vg-admin__email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-admin__pct { font-weight: 700; font-variant-numeric: tabular-nums; }
.vg-admin__credit { color: var(--c-ok); }
.vg-admin__detail-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.vg-admin__detail-summary { margin: var(--sp-2) 0; font-size: var(--fs-sm); }
.vg-admin__grant { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-3) 0; padding: var(--sp-3); background: var(--c-surface-2); border-radius: var(--radius-lg); }
.vg-admin__subhead { margin: var(--sp-3) 0 var(--sp-2); font-size: var(--fs-md, 1rem); }
.vg-admin__list { display: flex; flex-direction: column; gap: 2px; }
.vg-admin__list-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; padding: var(--sp-2); border-bottom: 1px solid var(--c-border); font-size: var(--fs-sm); }
.vg-admin__ts { color: var(--c-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .vg-admin__row { grid-template-columns: 1fr 1fr; row-gap: var(--sp-2); }
  .vg-admin__row--head { display: none; }
}
.vg-admin__settings { display: flex; flex-direction: column; gap: var(--sp-2); }
.vg-admin__set-row { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-border); }
.vg-admin__set-label { flex: 1; min-width: 200px; }
.vg-admin__set-key { display: block; color: var(--c-muted); font-size: var(--fs-xs, 0.75rem); }

/* ---- Phase 4: 法務ページ / フッター / 同意ゲート ---- */
.vg-legal { max-width: 820px; margin: 0 auto; padding: var(--sp-4) var(--sp-3); }
.vg-legal__dl { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-top: var(--sp-4); }
.vg-legal__dl dt { font-weight: 700; color: var(--c-ink); }
.vg-legal__dl dd { margin: 0 0 var(--sp-2) 0; color: var(--c-ink); }
.vg-legal__note { color: var(--c-muted); font-size: var(--fs-xs, 0.78rem); line-height: 1.6; display: block; margin-top: var(--sp-1); }
.vg-legal__muted { color: var(--c-muted); }
.vg-legal__plans { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.vg-legal__body { white-space: pre-wrap; line-height: 1.85; margin-top: var(--sp-3); color: var(--c-ink); }
.vg-legal__back { margin-top: var(--sp-5); }
@media (min-width: 640px) {
  .vg-legal__dl { grid-template-columns: 220px 1fr; align-items: start; }
  .vg-legal__dl dt { grid-column: 1; }
  .vg-legal__dl dd { grid-column: 2; }
}

.vg-footer { border-top: 1px solid var(--c-border); margin-top: var(--sp-6); padding: var(--sp-4) var(--sp-3); }
.vg-footer__nav { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
.vg-footer__link { color: var(--c-muted); font-size: var(--fs-sm, 0.85rem); text-decoration: none; }
.vg-footer__link:hover { color: var(--c-accent); text-decoration: underline; }

.vg-consent { max-width: 620px; }
.vg-consent__docs { margin: var(--sp-3) 0; padding-left: var(--sp-4); display: grid; gap: var(--sp-1); }
.vg-consent__form { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); }
.vg-consent__check { display: flex; gap: var(--sp-2); align-items: flex-start; line-height: 1.6; }
.vg-consent__check input { margin-top: 0.25rem; min-width: 18px; min-height: 18px; }

/* 前受金残高 + 資金決済法 充足率（admin・Phase 4） */
.vg-admin__prepaid { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center;
  margin: var(--sp-2) 0 var(--sp-3); padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-border); border-radius: var(--radius-2, 8px); color: var(--c-muted); font-size: var(--fs-sm, 0.85rem); }
.vg-admin__prepaid strong { color: var(--c-ink); }
.vg-admin__prepaid--warn { border-color: var(--c-danger, #c0392b); background: color-mix(in srgb, var(--c-danger, #c0392b) 8%, transparent); }
.vg-admin__prepaid-flag { color: var(--c-danger, #c0392b); font-weight: var(--fw-bold); }

/* ==========================================================================
   商用UI: ローディング / スケルトン / 遷移 / 空状態 / 通知 / ボタン階層 / カード / モーダル
   (UI商用化 §1.1/§1.3) — 全て tokens 駆動・CSP安全(インラインstyle不使用)。
   ========================================================================== */

/* ---- htmx インジケータ（includeIndicatorStyles:false のため自前定義が必須） ---- */
.htmx-indicator { opacity: 0; transition: opacity 0.12s ease; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }
[aria-busy="true"] { cursor: progress; }

/* ---- スピナー（インライン・ボタン内/領域内）---- */
.vg-spinner {
  display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em;
  border: 2px solid var(--c-border);
  border-top-color: var(--c-accent);
  border-radius: var(--radius-pill);
  animation: vg-spin 0.7s linear infinite;
}
@keyframes vg-spin { to { transform: rotate(360deg); } }

/* ---- スケルトン（初回/遅延ロードのプレースホルダ。寸法予約で CLS 抑制）---- */
.vg-skeleton {
  background: linear-gradient(90deg,
    var(--c-surface-2) 25%, var(--c-border) 37%, var(--c-surface-2) 63%);
  background-size: 400% 100%;
  animation: vg-shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
  /* 既定の1行ぶんの高さ。利用側で height/width を上書きして寸法予約する。 */
  min-height: 1em;
}
.vg-skeleton--text { height: 0.8em; margin: 0.25em 0; }
.vg-skeleton--title { height: 1.4em; width: 40%; margin-bottom: var(--sp-3); }
.vg-skeleton--row { height: 2.75rem; margin-bottom: var(--sp-2); }
.vg-skeleton--card { height: 7rem; }
@keyframes vg-shimmer { to { background-position: -135% 0; } }

/* ---- htmx swap フェード（リージョン置換の視覚誘導。≤120ms）---- */
.vg-seg.htmx-swapping,
.vg-card.htmx-swapping,
.vg-fade.htmx-swapping { opacity: 0.35; }
.vg-seg.htmx-settling,
.vg-card.htmx-settling,
.vg-fade.htmx-settling { opacity: 1; transition: opacity 0.12s ease; }

@media (prefers-reduced-motion: reduce) {
  .vg-skeleton { animation: none; }
  .vg-spinner { animation-duration: 0.001ms; }
  /* View Transitions 疑似要素はブランケット指定では止まらないため明示 */
  ::view-transition-group(*) { animation: none !important; }
}

/* ---- 空状態（empty state）---- */
.vg-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-3); padding: var(--sp-7) var(--sp-4);
  color: var(--c-ink-muted);
}
.vg-empty__icon { font-size: var(--fs-3xl); line-height: 1; opacity: 0.7; }
.vg-empty__title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--c-ink); }
.vg-empty__body { margin: 0; max-width: 42ch; font-size: var(--fs-sm); }
.vg-empty__cta { margin-top: var(--sp-2); }

/* ---- インライン通知（alert: info/ok/warn/danger）---- */
.vg-alert {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md);
  border: 1px solid var(--c-border); background: var(--c-surface-2);
  color: var(--c-ink); font-size: var(--fs-sm); line-height: var(--lh-base);
}
.vg-alert__icon { flex: none; line-height: var(--lh-base); }
.vg-alert--info { border-color: var(--c-info); background: var(--c-info-soft); }
.vg-alert--ok { border-color: var(--c-ok); background: var(--c-ok-soft); }
.vg-alert--warn { border-color: var(--c-warn-border); background: var(--c-warn-soft); }
.vg-alert--danger { border-color: var(--c-danger); background: var(--c-danger-soft); }

/* ---- フォーム フィールドエラー（422 インライン）---- */
.vg-field-error,
.vg-error-text { color: var(--c-danger); font-size: var(--fs-sm); margin-top: var(--sp-1); display: block; }
[aria-invalid="true"] { border-color: var(--c-danger) !important; }

/* ---- ボタン階層拡張（既存 vg-btn を補完：secondary/ghost/subtle/lg/loading）---- */
.vg-btn--secondary {
  background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-border);
}
.vg-btn--secondary:hover { background: var(--c-surface-hover); }
.vg-btn--ghost { background: transparent; color: var(--c-accent); border: 1px solid transparent; }
.vg-btn--ghost:hover { background: var(--c-accent-soft); }
.vg-btn--subtle { background: var(--c-surface-2); color: var(--c-ink); border: 1px solid transparent; }
.vg-btn--subtle:hover { background: var(--c-surface-hover); }
.vg-btn--lg { padding: var(--sp-3) var(--sp-5); font-size: var(--fs-lg); }
/* loading: aria-busy=true でスピナーを出し操作を抑止（テキストは保持） */
.vg-btn[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
.vg-btn[aria-busy="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 1em; height: 1em; border: 2px solid var(--c-border);
  border-top-color: currentColor; border-radius: var(--radius-pill);
  animation: vg-spin 0.7s linear infinite; color: var(--c-accent-ink);
}

/* ---- カード構造化（header/body/footer + hover elevation）---- */
.vg-card--interactive { transition: box-shadow 0.15s ease, transform 0.15s ease; }
.vg-card--interactive:hover { box-shadow: var(--shadow-md); }
.vg-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.vg-card__title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.vg-card__body { color: var(--c-ink); }
.vg-card__footer { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--c-border); }

/* ---- モーダル（ネイティブ <dialog>。focus-trap/Esc/top-layer はブラウザ標準）---- */
.vg-modal {
  border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  background: var(--c-surface); color: var(--c-ink);
  box-shadow: var(--shadow-overlay); padding: 0;
  width: min(92vw, 32rem); max-height: 86vh;
}
.vg-modal::backdrop { background: var(--c-overlay); }
.vg-modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-4); border-bottom: 1px solid var(--c-border); }
.vg-modal__title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.vg-modal__body { padding: var(--sp-4); overflow-y: auto; }
.vg-modal__foot { display: flex; gap: var(--sp-2); justify-content: flex-end;
  padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-border); }
.vg-modal__close { background: none; border: none; cursor: pointer; color: var(--c-ink-muted);
  font-size: var(--fs-xl); line-height: 1; min-width: var(--tap-min); min-height: var(--tap-min); }
.vg-modal__close:hover { color: var(--c-ink); }
.vg-confirm__msg { margin: 0; line-height: var(--lh-base); color: var(--c-ink); white-space: pre-line; }

/* ---- ナビ: ☰「その他」ドロップダウン（Alpine vgNav）---- */
.vg-more { position: relative; }
.vg-nav-toggle { display: inline-flex; }   /* 常時表示（その他メニューの開閉） */
.vg-nav-more {
  position: absolute;
  top: calc(100% + var(--sp-1));
  right: 0;
  z-index: var(--z-header);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 12rem;
  padding: var(--sp-2);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.vg-nav-more .vg-nav-link { width: 100%; }

@media (max-width: 560px) {
  .vg-nav-primary {
    order: 3;
    flex-basis: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .vg-nav-primary::-webkit-scrollbar { display: none; }
}

/* ==========================================================================
   AI生成スタジオ（3タブ統合）+ ソース取込。tokens.css の配色トークンのみ参照。
   ========================================================================== */
/* Alpine 初期化前の x-show 要素のちらつき防止（CSP ビルドでも有効）。 */
[x-cloak] { display: none !important; }

.vg-ok { color: var(--c-ok); }
.vg-mt-2 { margin-top: var(--sp-2, 0.5rem); }
.vg-mb-2 { margin-bottom: var(--sp-2, 0.5rem); }
.vg-help { font-size: 0.85em; color: var(--c-ink-muted); margin: 0.25rem 0 0; }

.vg-studio__tabs {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--c-border); margin-bottom: 1rem;
}
.vg-tab {
  appearance: none; font: inherit; cursor: pointer;
  background: transparent; color: var(--c-ink-muted);
  border: 1px solid transparent; border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0; padding: 0.5rem 0.9rem; min-height: 44px;
}
.vg-tab:hover { color: var(--c-ink); background: var(--c-surface-hover); }
.vg-tab:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.vg-tab--active { color: var(--c-accent); border-bottom-color: var(--c-accent); font-weight: 600; }

.vg-studio__panel { padding-top: 0.25rem; }
.vg-source-extract {
  border: 1px solid var(--c-border); border-radius: 8px;
  padding: 1rem; background: var(--c-surface-2);
}

/* ==========================================================================
   エディタIA再編(Phase0): 工程レールの矢印・空状態・タップ領域。tokensのみ参照。
   ========================================================================== */
/* 工程グループ間の「→」（流れの可視化）。狭幅では折返しに紛れて自然に消える。 */
.vg-toolbar-arrow { color: var(--c-ink-muted); align-self: center; padding: 0 0.15rem; user-select: none; }
/* 空状態（まず素材を入れましょう）のヒーロー囲み。淡いグラデ＋アクセント帯で華やかに。 */
.vg-empty-source {
  position: relative; overflow: hidden;
  border: 1px solid var(--c-border); border-radius: var(--radius-lg);
  padding: var(--sp-5); background: var(--grad-hero); box-shadow: var(--shadow-sm);
}
/* 上端のアクセントグラデ帯（見出しの華やかさ）。 */
.vg-empty-source::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad-bar);
}
.vg-empty-source .vg-card__title {
  font-size: var(--fs-xl); background: var(--grad-bar);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* 小ボタンも最小タップ44px（WCAG 2.5.5）を満たす。 */
.vg-btn--sm { min-height: 44px; }

/* 詳細設定（複数話者・AI対話）の折りたたみ。簡単モード既定でツールバーのごちゃつきを解消。 */
.vg-advanced { margin-top: var(--sp-2); border: 1px solid var(--c-border); border-radius: var(--radius-md); background: var(--c-surface-2); }
.vg-advanced__summary { cursor: pointer; padding: var(--sp-2) var(--sp-3); min-height: 44px; display: flex; align-items: center; font-size: var(--fs-sm); color: var(--c-ink-muted); list-style: none; user-select: none; }
.vg-advanced__summary::-webkit-details-marker { display: none; }
.vg-advanced__summary::before { content: "▸"; margin-right: var(--sp-2); transition: transform .15s ease; }
.vg-advanced[open] .vg-advanced__summary::before { transform: rotate(90deg); }
.vg-advanced__summary:hover { color: var(--c-ink); }
.vg-advanced__body { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; padding: var(--sp-1) var(--sp-3) var(--sp-3); }

/* ソースの入れ方 4択タブ（空状態）。既定=原稿を取り込む(is-active)。全て<a>でCSPセーフ。
   Grid auto-fit で確実に折り返す（幅により1〜4列に自動調整）。flexだと rich タブの
   種別行が長く min-content が大きくなり、特定幅で4つ目がはみ出す事故が起きるため。 */
.vg-source-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--sp-2); }
.vg-source-tab {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap-min); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-md);
  border: 1px solid var(--c-border); background: var(--c-surface);
  color: var(--c-ink); text-decoration: none; font-size: var(--fs-sm); cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.vg-source-tab:hover { border-color: var(--c-accent); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.vg-source-tab.is-active {
  background: var(--grad-accent); color: var(--c-accent-ink); border-color: transparent;
  font-weight: var(--fw-semibold); box-shadow: var(--shadow-md);
}

/* AIスタジオタブ: 対応ソース種別を2行目に表示して「何ができるか」を明示。 */
.vg-source-tab--rich { flex-direction: column; align-items: flex-start; gap: 2px; }
.vg-source-tab__main { display: inline-flex; align-items: center; gap: var(--sp-2); }
.vg-source-tab__types { font-size: var(--fs-xs); font-weight: 400; opacity: .85; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
.vg-source-tab.is-active .vg-source-tab__types { opacity: .95; }

/* 見出しの補足（全角括弧の注記）。デスクトップは控えめ表示、スマホは vg-hide-sp で非表示。 */
.vg-subnote { font-weight: var(--fw-medium); font-size: .8em; opacity: .75; margin-left: .25em; }

/* ===== 華やかさ強化（グラデーション・立体感）。トークン経由でダーク対応維持。 ===== */
/* ページ背景に極薄グラデ（固定）。地味さ解消・本文可読性は維持。 */
body.vg-body { background: var(--grad-page); background-attachment: fixed; }
/* primary ボタンをグラデ＋ホバーで浮く。文字は accent-ink で AA。 */
.vg-btn--primary {
  background: var(--grad-accent); border-color: transparent; color: var(--c-accent-ink);
  box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.vg-btn--primary:hover { background: var(--grad-accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.vg-btn--primary:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
/* 通常ボタンもホバーでわずかに浮かせて操作感を出す。 */
.vg-btn { transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease; }
.vg-btn:not(.vg-btn--primary):hover { border-color: var(--c-accent); }
/* カードはホバーで軽く持ち上げ、影を強調（インタラクティブ感）。 */
.vg-card { transition: box-shadow .15s ease, transform .15s ease; }

/* ===== 完全レスポンシブ（モバイル最適化） ===== */
@media (max-width: 640px) {
  /* 4択タブはモバイルで縦積み・全幅にして押しやすく。 */
  .vg-source-tabs { flex-direction: column; }
  .vg-source-tab { width: 100%; }
  /* ヒーロー余白をモバイルで詰める。 */
  .vg-empty-source { padding: var(--sp-4); }
  .vg-empty-source .vg-card__title { font-size: var(--fs-lg); }
  /* 詳細設定の中身も縦積みで全幅。 */
  .vg-advanced__body { flex-direction: column; align-items: stretch; }
  .vg-advanced__body > .vg-btn { width: 100%; }

  /* --- スマホは文字を極力減らす（認知負荷低減） --- */
  /* 長い説明文(サブテキスト)は隠し、見出し＋ボタンだけ残す。
     .vg-hide-sp を付けた要素もスマホで非表示にできる汎用クラス。 */
  .vg-empty-source .vg-auth__sub,
  .vg-ingest .vg-auth__sub,
  .vg-hide-sp { display: none !important; }
  /* AIスタジオの対応種別はスマホでは省略（タブ名だけで十分）。 */
  .vg-source-tab__types { display: none; }
  /* 取込パネル見出しは上のタブ名と重複するので小さく簡潔に。 */
  #source-panel-paste .vg-card__title { font-size: var(--fs-md); }
  /* 見出しの長い注記（全角括弧の補足）は smaller に。 */
  .vg-empty-source .vg-card__title { font-size: var(--fs-md); }
}

/* 議事録の音声ファイル選択: クリック＋ドラッグ&ドロップ対応のドロップゾーン。
   OSダイアログがクリックで開きにくい環境でもD&Dで確実に渡せる。label[for]で hidden input を開く。 */
.vg-filedrop {
  position: relative; /* 透明 input オーバーレイの基準。 */
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-1);
  border: 2px dashed var(--c-border); border-radius: var(--radius-md);
  background: var(--c-surface); cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.vg-filedrop:hover { border-color: var(--c-accent); }
.vg-filedrop.is-dragover { border-color: var(--c-accent); background: var(--c-accent-soft); }
.vg-filedrop__btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-md);
  background: var(--grad-accent); color: var(--c-accent-ink);
  font-weight: var(--fw-semibold); font-size: var(--fs-sm); white-space: nowrap;
}
.vg-filedrop__name { color: var(--c-ink-muted); font-size: var(--fs-sm); word-break: break-all; min-width: 0; }
/* 本物の <input type=file> をゾーン全面に透明オーバーレイ。クリック＝ネイティブ
   ファイルダイアログ（label[for] や clip 隠しを介さないので環境差で固まらない）。
   ※現行UIは“素”の標準入力(.vg-native-file)を表に出す方式に変更（環境差最小化）。 */
.vg-filedrop__input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; font-size: 0;
}
/* ブラウザ標準のファイル入力をそのまま見せる（オーバーレイ/隠しを使わない最も確実な経路）。
   ボタン部(::file-selector-button)を主役の目立つグラデーションボタンに装飾する。 */
.vg-native-file {
  display: block; width: 100%; max-width: 100%;
  padding: var(--sp-1) 0; color: var(--c-ink-muted); font-size: var(--fs-sm); cursor: pointer;
}
.vg-native-file::file-selector-button {
  margin-right: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  border: 0; border-radius: var(--radius-md);
  background: var(--grad-accent); color: var(--c-accent-ink);
  font-weight: var(--fw-semibold); font-size: var(--fs-base); cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: filter .12s ease, transform .12s ease;
}
.vg-native-file::file-selector-button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.vg-native-file::file-selector-button:active { transform: translateY(0); }
/* 補助のドロップ箱は控えめに（主役はファイル選択ボタン）。 */
.vg-filedrop--mini {
  padding: var(--sp-2) var(--sp-3); gap: var(--sp-2);
  border-width: 1px; background: transparent;
}
.vg-filedrop--mini .vg-filedrop__btn {
  background: none; color: var(--c-ink-muted); padding: 0;
  font-weight: var(--fw-normal); font-size: var(--fs-sm);
}

/* ── AI議事録: 履歴一覧 / 個別表示 / 共有 ───────────────────────────────── */
.vg-list-reset { list-style: none; margin: 0; padding: 0; }
.vg-stack { display: flex; flex-direction: column; gap: var(--sp-2); }
.vg-prewrap { white-space: pre-wrap; word-break: break-word; }
.vg-list { margin: 0; padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-1); }

/* 履歴の各行（カード型・クリックで詳細へ） */
.vg-meeting-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); text-decoration: none; color: inherit;
}
.vg-meeting-item__title {
  font-weight: var(--fw-medium); color: var(--c-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.vg-meeting-item__meta {
  display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0;
  color: var(--c-ink-muted); font-size: var(--fs-sm);
}

/* 常時表示の使用量バロメーター（ヘッダ直下・ログイン時） */
.vg-usage-bar {
  position: relative; display: flex; align-items: center; justify-content: flex-end;
  height: 1rem; width: 100%; text-decoration: none;
  background: var(--c-surface-2); border-bottom: 1px solid var(--c-border);
}
.vg-usage-bar__fill {
  position: absolute; left: 0; top: 0; height: 100%; width: 0;
  background: light-dark(rgba(22, 163, 74, 0.30), rgba(34, 197, 94, 0.30));
  transition: width 0.4s ease;
}
.vg-usage-bar__fill--warn { background: light-dark(rgba(217, 119, 6, 0.32), rgba(245, 158, 11, 0.32)); }
.vg-usage-bar__fill--over { background: light-dark(rgba(220, 38, 38, 0.34), rgba(239, 68, 68, 0.34)); }
.vg-usage-bar__txt {
  position: relative; z-index: 1; padding-right: var(--sp-2);
  font-size: var(--fs-xs, 0.7rem); color: var(--c-ink-muted);
  font-variant-numeric: tabular-nums;
}
/* 枠逼迫時のアップグレード CTA（使用量バー右端・クリックで /billing へ）。 */
.vg-usage-bar__cta {
  position: relative; z-index: 1; padding: 0 var(--sp-2);
  font-size: var(--fs-xs, 0.7rem); font-weight: var(--fw-semibold, 600);
  color: light-dark(#b91c1c, #fecaca); white-space: nowrap;
}

/* 録音中の大きな視認インジケータ（議事録コントロール） */
.vg-rec-banner {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-2); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-lg);
  background: light-dark(#fff1f1, #3a1414);
  border: 1px solid light-dark(#ef4444, #b91c1c);
  color: light-dark(#b91c1c, #fecaca);
  font-weight: var(--fw-semibold, 600); font-size: var(--fs-lg, 1.125rem);
}
.vg-rec-banner[hidden] { display: none; }
.vg-rec-dot {
  width: 1.25rem; height: 1.25rem; border-radius: var(--radius-pill, 999px);
  background: #ef4444; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
  animation: vg-rec-pulse 1.2s ease-out infinite;
}
.vg-rec-banner__time { margin-left: auto; font-variant-numeric: tabular-nums; }
@keyframes vg-rec-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); opacity: 1; }
  70%  { box-shadow: 0 0 0 0.85rem rgba(239, 68, 68, 0); opacity: 0.55; }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .vg-rec-dot { animation: none; } }
/* 録音中は録音ボタンを赤系で強調（停止が押せると一目で分かる） */
.is-recording [data-meeting-record] { background: #ef4444; color: #fff; border-color: #ef4444; }
/* スマホでは冗長な説明を隠してすっきり（PCでは表示） */
@media (max-width: 480px) { .vg-collapse-sm { display: none; } }

/* 話者別トランスクリプト */
.vg-transcript { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.vg-transcript__row {
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-border);
}
.vg-transcript__row:last-child { border-bottom: 0; }
.vg-transcript__meta { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.vg-transcript__spk { font-weight: var(--fw-semibold); color: var(--c-accent); font-size: var(--fs-sm); }
.vg-transcript__time { color: var(--c-ink-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.vg-transcript__text { margin: 0; color: var(--c-ink); overflow-wrap: anywhere; }
.vg-transcript__orig { margin: var(--sp-1) 0 0; color: var(--c-ink-muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }

/* ============================================================
   Landing page (vg-lp) — 未定義だった LP レイアウトを実体化。
   既存トークン参照のみ（生hex禁止）・モバイルファースト・横スクロール無し・タップ44px。
   ============================================================ */
.vg-lp { max-width: 72rem; margin-inline: auto; padding-inline: var(--sp-4); overflow-x: hidden; }
.vg-lp__hero {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-6);
  align-items: center; padding: var(--sp-8) 0 var(--sp-7);
}
@media (min-width: 1024px) { .vg-lp__hero { grid-template-columns: 1.1fr 1fr; } }
.vg-lp__hero-text { min-width: 0; }
.vg-lp__title {
  font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: 1.25;
  margin: 0 0 var(--sp-3); color: var(--c-ink);
}
.vg-lp__lead {
  font-size: var(--fs-lg); color: var(--c-ink-muted);
  margin: 0 0 var(--sp-5); line-height: 1.7;
}
.vg-lp__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.vg-lp__cta-btn {
  border-radius: var(--radius-pill); padding: var(--sp-3) var(--sp-6);
  min-height: 48px; font-size: var(--fs-base);
}
.vg-lp__cta-login { min-height: var(--tap-min); display: inline-flex; align-items: center; }
.vg-lp__sample { margin: var(--sp-5) 0 0; }
.vg-lp__sample-cap { font-size: var(--fs-sm); color: var(--c-ink-muted); margin-bottom: var(--sp-2); }
.vg-lp__audio { width: 100%; max-width: 28rem; }
.vg-lp__hero-media { min-width: 0; }
.vg-lp__hero-img {
  width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  border: 1px solid var(--c-border); aspect-ratio: 3 / 2; object-fit: cover;
}

.vg-lp__section-title {
  font-size: var(--fs-2xl); font-weight: var(--fw-semibold); text-align: center;
  margin: var(--sp-7) 0 var(--sp-5); color: var(--c-ink);
}
.vg-lp__features { padding: var(--sp-5) 0; }
.vg-lp__feature-grid {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .vg-lp__feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vg-lp__feature-grid { grid-template-columns: repeat(4, 1fr); } }
.vg-lp__feature { padding: var(--sp-5); min-width: 0; }
.vg-lp__feature-title {
  font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0 0 var(--sp-2); color: var(--c-ink);
}
.vg-lp__feature-text { margin: 0; color: var(--c-ink-muted); line-height: 1.6; }

.vg-lp__pricing { padding: var(--sp-5) 0; }
.vg-lp__plans {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .vg-lp__plans { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
.vg-lp__plan { display: flex; flex-direction: column; padding: var(--sp-5); text-align: center; min-width: 0; }
.vg-lp__plan-name { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0 0 var(--sp-2); color: var(--c-ink); }
.vg-lp__plan-price { margin: 0 0 var(--sp-2); }
.vg-lp__plan-amount { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--c-ink); }
.vg-lp__plan-period { color: var(--c-ink-muted); font-size: var(--fs-sm); }
.vg-lp__plan-quota { color: var(--c-ink-muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-4); }
.vg-lp__plan-cta { margin-top: auto; border-radius: var(--radius-pill); min-height: var(--tap-min); }
.vg-lp__plan-annual { color: var(--c-ink-muted); font-size: var(--fs-xs, 0.8rem); margin: 0 0 var(--sp-3); }
.vg-lp__plan--recommended { position: relative; border: 2px solid var(--c-accent); }
.vg-lp__plan-badge {
  position: absolute; top: calc(-1 * var(--sp-3)); left: 50%; transform: translateX(-50%);
  background: var(--c-accent); color: var(--c-accent-ink, #fff);
  font-size: var(--fs-xs, 0.75rem); font-weight: var(--fw-bold, 700);
  padding: 2px var(--sp-3); border-radius: var(--radius-pill); white-space: nowrap;
}
.vg-lp__tax-note { text-align: center; color: var(--c-ink-muted); font-size: var(--fs-sm); margin-top: var(--sp-3); }
/* 課金画面: プラン1枚=月額/年額ボタンを縦に。 */
.vg-billing__plan-card { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--radius-md); margin-bottom: var(--sp-3); }
.vg-billing__plan-card-name { font-weight: var(--fw-semibold, 600); color: var(--c-ink); }
.vg-billing__topup { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }

.vg-lp__faq { padding: var(--sp-5) 0; }
.vg-lp__faq-list { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 48rem; margin-inline: auto; }
.vg-lp__faq-item { padding: var(--sp-4) var(--sp-5); }
.vg-lp__faq-q { font-weight: var(--fw-semibold); cursor: pointer; color: var(--c-ink); }
.vg-lp__faq-a { margin: var(--sp-3) 0 0; color: var(--c-ink-muted); line-height: 1.7; }

.vg-lp__cta-bottom {
  text-align: center; padding: var(--sp-7) var(--sp-5); margin: var(--sp-7) 0;
  background: var(--c-surface-2); border-radius: var(--radius-lg);
}
.vg-lp__cta-lead { font-size: var(--fs-lg); margin: 0 0 var(--sp-4); color: var(--c-ink); }

/* ============================================================
   リアルタイム字幕（プレビュー専用）。オプトイン＋開示文＋ライブ領域。
   既存トークン参照のみ・ダーク/ライト両対応・タップ44px。
   ============================================================ */
.vg-caption { margin-top: var(--sp-3); }
.vg-caption__toggle {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  cursor: pointer; color: var(--c-ink); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.vg-caption__toggle input { width: 1.1rem; height: 1.1rem; accent-color: var(--c-accent); }
.vg-caption__notice { margin: var(--sp-1) 0 0; font-size: var(--fs-xs); color: var(--c-ink-muted); }
.vg-caption__unsupported { margin: var(--sp-1) 0 0; font-size: var(--fs-xs); color: var(--c-warn); }
.vg-caption__text {
  margin: var(--sp-2) 0 0; min-height: 1.5em; color: var(--c-ink); font-size: var(--fs-base);
  line-height: 1.6; overflow-wrap: anywhere;
}
.vg-caption__text:not(:empty) {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md);
  background: var(--c-surface-2); border: 1px solid var(--c-border);
}

/* ============================================================
   議事録(minutes) / 書き起こし(transcript) 表示。
   <1024px = タブ（radio+:checked のCSSのみ・JS不要）。 >=1024px = 左右2カラム。
   ============================================================ */
.vg-mins { min-width: 0; }
/* タブ操作 radio は視覚非表示（.vg-sr-only 相当）。label をタブ見た目に。 */
.vg-mins__tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.vg-mins__tab {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 1; padding: var(--sp-2) var(--sp-3); cursor: pointer;
  border: 1px solid var(--c-border); border-radius: var(--radius-pill);
  background: var(--c-surface); color: var(--c-ink-muted);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); user-select: none;
}
/* 選択中タブ（直前兄弟 radio の :checked で着色）。 */
#vg-mins-tab-minutes:checked ~ .vg-mins__tabs label[data-tab="minutes"],
#vg-mins-tab-transcript:checked ~ .vg-mins__tabs label[data-tab="transcript"] {
  background: var(--c-accent); color: var(--c-accent-ink); border-color: var(--c-accent);
}
/* キーボードフォーカスの可視化（radio にフォーカスが乗る）。 */
#vg-mins-tab-minutes:focus-visible ~ .vg-mins__tabs label[data-tab="minutes"],
#vg-mins-tab-transcript:focus-visible ~ .vg-mins__tabs label[data-tab="transcript"] {
  outline: 2px solid var(--c-accent); outline-offset: 2px;
}
.vg-mins__pane { min-width: 0; }

/* モバイル/タブレット: タブで排他切替。 */
@media (max-width: 1023.98px) {
  .vg-mins__pane { display: none; }
  #vg-mins-tab-minutes:checked ~ .vg-mins__grid .vg-mins__pane[data-pane="minutes"],
  #vg-mins-tab-transcript:checked ~ .vg-mins__grid .vg-mins__pane[data-pane="transcript"] { display: block; }
}

/* PC: タブを隠し、左=議事録(sticky) / 右=書き起こし(独立スクロール) の2カラム。 */
@media (min-width: 1024px) {
  .vg-mins__tabs { display: none; }
  .vg-mins__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: var(--sp-5); align-items: start;
  }
  .vg-mins__pane--minutes { position: sticky; top: calc(var(--header-h) + var(--sp-3)); }
  .vg-mins__scroll { max-height: calc(100vh - var(--header-h) - var(--sp-7)); overflow-y: auto; }
}

/* 時刻チップ＝アンカー。クリック先の行を:targetでハイライト（共有可能な深リンク）。 */
a.vg-transcript__time { text-decoration: none; }
a.vg-transcript__time:hover { color: var(--c-accent); text-decoration: underline; }
.vg-transcript__row { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); transition: background-color .3s ease; }
.vg-transcript__row:target {
  background: var(--c-accent-soft); border-radius: var(--radius-md);
  padding-inline: var(--sp-2); box-shadow: 0 0 0 1px var(--c-accent);
}
@media (prefers-reduced-motion: reduce) {
  .vg-transcript__row { transition: none; scroll-behavior: auto; }
}