/**
 * デモ3画面共通 — フォント・色・リセット（タブ切替時のピクつき防止）
 */
:root {
  --shell-nav-h: 2.75rem;

  /* 完成 LP（cream / navy / teal）に合わせたライト UI */
  --demo-bg: #faf8f5;
  --demo-surface: #ffffff;
  --demo-surface-2: #f1ede6;
  --demo-border: #d9d2c8;
  --demo-heading: #0b1d3a;
  --demo-text: #1a2332;
  --demo-text-secondary: #3d4f63;
  --demo-muted: #5c6b7f;
  --demo-link: #0b5c55;
  --demo-accent: #0d6e64;
  --demo-accent-strong: #0a524c;
  --demo-pass: #166534;
  --demo-pass-bg: #dcfce7;
  --demo-revise: #9a3412;
  --demo-revise-bg: #ffedd5;
  --demo-sub: #6d28d9;
  --demo-sub-bg: #ede9fe;

  --demo-font: "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", system-ui, sans-serif;
  --demo-title-size: 1.35rem;
  --demo-lead-size: 0.9rem;
  --demo-small-size: 0.8125rem;

  /* 制作ステージ styles.css との互換 */
  --bg: var(--demo-bg);
  --surface: var(--demo-surface);
  --surface-2: var(--demo-surface-2);
  --border: var(--demo-border);
  --text: var(--demo-text);
  --muted: var(--demo-muted);
  --accent: var(--demo-accent);
  --pass: var(--demo-pass);
  --revise: var(--demo-revise);

  /* タブバー（demo-nav.css） */
  --shell-bg: var(--demo-bg);
  --shell-surface: var(--demo-surface);
  --shell-border: var(--demo-border);
  --shell-text: var(--demo-heading);
  --shell-muted: var(--demo-text-secondary);
  --shell-accent: var(--demo-accent);
  --shell-active: var(--demo-heading);
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

body {
  margin: 0;
  font-family: var(--demo-font);
  font-size: 1rem;
  line-height: 1.5;
  background: var(--demo-bg);
  color: var(--demo-text);
  min-height: 100vh;
  /* padding-top は demo-page-* で画面ごとに指定（demo-nav.css） */
}

.demo-page-title {
  font-size: var(--demo-title-size);
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 0.35rem;
  color: var(--demo-heading);
}

.demo-page-lead {
  font-size: var(--demo-lead-size);
  color: var(--demo-text-secondary);
  line-height: 1.55;
}

.demo-page-lead strong {
  color: var(--demo-heading);
  font-weight: 700;
}

a.demo-text-link {
  color: var(--demo-link);
  font-weight: 600;
}

a.demo-text-link:hover {
  color: var(--demo-accent-strong);
}