/* =====================================================================
   style.css — タイプスケール生成（モジュラースケール）ツール固有の微調整。
   共通スタイルは /_shared/shirugear.css に任せる。
   ここでは共有CSSに無いクラス（sg-modes 等）と ts- 独自パーツを補う。
   ===================================================================== */

/* 共有CSSに無い間隔ユーティリティを補完 */
.sg-mt-3 { margin-top: var(--sg-space-3, 12px); }

/* 2カラムの入力グリッド（狭い画面では1列） */
.sg-grid2 {
  display: grid;
  gap: var(--sg-space-3, 12px) var(--sg-space-4, 16px);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* 比率のラジオ群（nato-phonetic 準拠） */
.sg-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: var(--sg-space-1, 4px);
}
.sg-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.95rem;
}
.sg-input--inline {
  width: 6em;
  padding: 2px 6px;
  font-size: 0.9rem;
}

/* 等幅表示（トークン名・コード） */
.sg-mono,
.ts-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
}

/* コード出力ブロック */
.ts-code {
  white-space: pre;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.6;
  tab-size: 2;
}

/* スケール一覧テーブル */
.ts-table-wrap {
  overflow-x: auto;
}
.ts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.ts-table th,
.ts-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--sg-border, #e5e7eb);
  white-space: nowrap;
}
.ts-table th {
  font-weight: 600;
  color: var(--sg-muted, #555);
  font-size: 0.82rem;
}
.ts-table tr.is-base td {
  background: var(--sg-accent-weak, rgba(59, 91, 219, 0.08));
  font-weight: 600;
}

/* プレビュー */
.ts-preview {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ts-preview-row {
  border-bottom: 1px solid var(--sg-border, #e5e7eb);
  padding-bottom: 12px;
}
.ts-preview-meta {
  font-size: 0.78rem;
  color: var(--sg-muted, #777);
  margin-bottom: 2px;
}
.ts-preview-sample {
  overflow-x: auto;
  white-space: nowrap;
  word-break: keep-all;
}