/* 撮影・アップロードのコツ（/guide/video-quality）専用の追加スタイル。
   基本の読みものタイポグラフィは guide.css を継承し、このファイルは
   画質目安の「表」まわりの装飾だけを扱う。
   DESIGN.md 準拠: 色は var(--kr-*)、状態色は ok=#15803d / warn=#8a6200
   （DESIGN.md 認可の state 色）。ブランド色（accent/rec）はハードコードしない。 */

/* 表を横スクロール可能なコンテナに収める（モバイルで body を横スクロール
   させない）。AGENTS.md「ページ表示パフォーマンス」§5 準拠。 */
.guide-table-wrap {
  overflow-x: auto;
  margin: 0 0 12px;
  border: 1px solid var(--kr-hair);
  border-radius: var(--kr-radius-md);
  -webkit-overflow-scrolling: touch;
}

.guide-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-family: var(--kr-font-jp-stack);
  font-size: 0.94rem;
}

.guide-table th,
.guide-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--kr-hair);
  line-height: 1.6;
  vertical-align: middle;
}

.guide-table thead th {
  font-family: var(--kr-font-mono, monospace);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--kr-ink-dimmer);
  background: var(--kr-surface-2);
  white-space: nowrap;
}

.guide-table tbody tr:last-child td {
  border-bottom: none;
}

.guide-table td:first-child {
  white-space: nowrap;
}

/* 目安タグ（推奨 / 許容 / 精度低下の恐れ）。
   kr-badge のトーン設計に合わせた小さな pill。 */
.guide-table-tag {
  display: inline-block;
  font-family: var(--kr-font-mono, monospace);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.guide-table-tag--good {
  background: rgba(74, 222, 128, .16);
  color: #15803d;
}

.guide-table-tag--ok {
  background: var(--kr-surface-2);
  color: var(--kr-ink-dim);
  border: 1px solid var(--kr-hair);
}

.guide-table-tag--warn {
  background: rgba(240, 180, 41, .18);
  color: #8a6200;
}

/* 目立たせたい tip（LINE のファイル送信）。guide-note（薄い左罫の補足）より
   一段強い accent 薄帯のカード。ブランド色は accent トークンのみ使用。 */
.guide-callout {
  background: var(--kr-accent-sub);
  border: 1px solid var(--kr-hair);
  border-left: 3px solid var(--kr-accent);
  border-radius: var(--kr-radius-sm);
  padding: 14px 16px;
  margin: 0 0 1.35em;
}

.guide-article .guide-callout p {
  font-size: 0.98rem;
  line-height: 1.9;
  color: var(--kr-ink);
  margin: 0;
}

/* 表下の注記 */
.guide-article .guide-table-note {
  font-size: 0.86rem;
  color: var(--kr-ink-dim);
  line-height: 1.8;
  margin: 0 0 1.35em;
}