/* =====================================================================
   げんば動画スタジオ 画面の決まり(色・文字・余白・角・影)
   編集画面(/)と視聴画面(/viewer/)の両方が最初に読み込む。各画面の style.css はこの変数だけを使う。
   ・色は「面(白・薄い灰)/文字(3段)/線(3段)/スレート(左メニュー・上部の帯)」+役割の色4つだけ。
       オレンジ=押してほしいボタン・選択中・件数・リンク(差し色は1色だけ)、緑=「公開する」だけ、赤=削除・失敗。
       左メニュー・上部の帯も白地にし、濃い紺は使わない。
   ・見出しも本文と同じゴシック。
   ・角は 4px(札・小さい部品)/6px(ボタン・入力欄・カード)/10px(大きな窓)の3段。
   ・影は「浮いている物(メニュー・窓・お知らせ)」だけに付け、カード・パネルは1pxの線で区切る。
   ・ライトプランは同じ部品・同じ角のまま、地と線の色をほんのり暖かくするだけで差をつける(下の body[data-plan])。
   ===================================================================== */
:root {
  /* ---- 文字の色(白地でのコントラスト:ink 16:1 / ink-2 8:1 / ink-3 4.9:1) ---- */
  --gd-ink: #1a2027;
  --gd-ink-2: #46505c;
  --gd-ink-3: #636d79;

  /* ---- 面 ---- */
  --gd-bg: #f4f5f7;          /* 画面の地 */
  --gd-surface: #ffffff;     /* カード・パネル */
  --gd-surface-2: #f8f9fa;   /* 表の見出し・入力欄の読み取り専用の地 */
  --gd-surface-3: #eef0f3;   /* ホバー・選択中の地・空の時の丸 */

  /* ---- 線 ---- */
  --gd-line: #e1e4e8;        /* カード・区切り */
  --gd-line-strong: #c8cdd4; /* 入力欄・2番手のボタン */
  --gd-line-hover: #98a1ab;

  /* ---- スレート(編集画面の左メニュー・視聴画面の上部の帯) ---- */
  --gd-slate: #262d35;
  --gd-slate-2: #323b45;
  --gd-slate-line: rgba(255, 255, 255, 0.09);
  --gd-slate-ink: #d5dbe1;
  --gd-slate-ink-2: #9ea8b3;

  /* ---- 役割の色 ---- */
  --gd-primary: #c2500e;        /* 白文字で 4.8:1 */
  --gd-primary-hover: #a6430a;
  --gd-primary-soft: #fdf2ea;
  --gd-primary-line: #f1cfb6;
  --gd-primary-ink: #93400c;
  --gd-accent: #b4480b;         /* 選択中・件数・リンク(白地で 5.4:1)。主ボタンと同じオレンジの系統で1色にまとめる */
  --gd-accent-hover: #963c09;
  --gd-accent-soft: #fdf1e8;
  --gd-accent-line: #f0cdb3;
  --gd-success: #1b7342;        /* 白文字で 5.8:1 */
  --gd-success-hover: #155c35;
  --gd-success-soft: #e9f4ed;
  --gd-success-line: #c4e2cf;
  --gd-success-ink: #17613a;
  --gd-warn-soft: #fdf5e4;
  --gd-warn-line: #f0dcab;
  --gd-warn-ink: #6e4f00;
  --gd-danger: #b3261e;
  --gd-danger-hover: #95201a;
  --gd-danger-soft: #fcf0ef;
  --gd-danger-line: #efc8c5;

  /* ---- 角 ---- */
  --gd-r-sm: 4px;
  --gd-r-md: 6px;
  --gd-r-lg: 10px;
  --gd-r-pill: 999px;

  /* ---- 影 ---- */
  --gd-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --gd-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08), 0 1px 3px rgba(16, 24, 40, 0.05);
  --gd-shadow-lg: 0 18px 44px rgba(16, 24, 40, 0.18), 0 2px 6px rgba(16, 24, 40, 0.06);
  --gd-focus: 0 0 0 3px rgba(194, 80, 14, 0.24);

  /* ---- 余白(4の倍数だけ) ---- */
  --gd-s1: 4px;
  --gd-s2: 8px;
  --gd-s3: 12px;
  --gd-s4: 16px;
  --gd-s5: 20px;
  --gd-s6: 24px;
  --gd-s8: 32px;
  --gd-s10: 40px;

  /* ---- 押す所の高さ(スマホは 44px 以上) ---- */
  --gd-h-sm: 36px;
  --gd-h-md: 40px;
  --gd-h-lg: 48px;
  --gd-h-touch: 44px;

  /* ---- 文字の大きさ(7段)。12=注記 / 14=補足・札・小さいボタン / 15=本文・ボタン / 17=カード名・小見出し /
          20=セクション見出し / 24=ページ見出し / 28=数字の大表示。--fs-input は入力欄専用(iPhoneの自動拡大を防ぐ) ---- */
  --fs-12: 12px;
  --fs-13: 13px;   /* 札(状態・件数)・表の見出し・動画の上のボタンだけ */
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-17: 17px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-input: 16px;

  /* ---- 書体 ---- */
  --gd-font: "IBM Plex Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

/* ライトプラン(お店向け):地と線の色をほんのり暖かくするだけ。角の丸さ・部品・差し色はスタンダードと同じ */
body[data-plan="btoc_lite"] {
  --gd-bg: #f8f5f1;
  --gd-surface-2: #fbf9f6;
  --gd-surface-3: #f2ede7;
  --gd-line: #e8e2da;
  --gd-line-strong: #d3cbc1;
}

/* 読み込み中の印(くるくる)。.gd-loading の前に出す */
@keyframes gd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* 日本語の文は、文節(言葉の切れ目)と句読点でだけ折り返す。どうしても入りきらない時だけ途中で折る */
body { word-break: keep-all; overflow-wrap: anywhere; line-break: strict; }