/* SITE 77 — HOST MOBILE BOOKING / design tokens
   配色: ネイビー #111827 / ホワイト #F9FAFB / ブルー #2563EB / グレー #9CA3AF
   角丸は 12px のみ（MASTER §8: 1サイト内で混在させない。隣接 SITE 76 の 4px とは別値）
   影は 2段階まで
   本文16px / 注記14px を最小値とする
   設計基準は 390px。PC は同じ情報を横に展開するだけで、SP から情報を減らさない。

   コントラスト実測値（背景 #111827 に対する比。すべて 4.5:1 以上）
     #F9FAFB 17.0:1 / #CBD3DE 11.8:1 / #9CA3AF 7.0:1 / #7FA8FF 7.6:1
     #6EE7A8 10.9:1 / #FCA5A5 9.4:1
   ブルー #2563EB は 3.4:1 のため「文字色として使わない」。
   塗りボタンの背景としてのみ使い、上に白文字（#FFFFFF / #2563EB = 5.1:1）を載せる。
   リンク・小さな強調文字には明るい #7FA8FF を使う。 */
:root {
  /* --- 面 --- */
  --c-bg: #111827;
  --c-bg-2: #172233;
  --c-bg-3: #1F2C40;
  --c-bg-inset: #0B1220;

  /* --- 罫線（グレー #9CA3AF 系） --- */
  --c-line: #2A3648;
  --c-line-strong: #9CA3AF;
  --c-line-soft: #212C3D;

  /* --- 文字 --- */
  --c-fg: #F9FAFB;
  --c-fg-2: #CBD3DE;
  --c-muted: #9CA3AF;

  /* --- アクセント（ブルー1色 + 状態色） --- */
  --c-accent: #2563EB;          /* 塗り・罫線専用（文字色に使わない） */
  --c-accent-bright: #7FA8FF;   /* リンク・強調文字（7.6:1） */
  --c-accent-deep: #1D4ED8;     /* ホバー時の塗り */
  --c-accent-ink: #FFFFFF;      /* 塗りボタン上の文字 */
  --c-accent-soft: rgba(37, 99, 235, 0.18);
  --c-accent-line: rgba(127, 168, 255, 0.45);

  --c-ok: #6EE7A8;      /* 営業中・出勤あり（10.9:1） */
  --c-off: #9CA3AF;     /* 休業・出勤なし */
  --c-alert: #FCA5A5;   /* エラー・注意（9.4:1） */
  --c-focus: #7FA8FF;

  /* --- 角丸（12px 単一） --- */
  --radius: 12px;

  /* --- 影（2段階） --- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 -10px 40px rgba(0, 0, 0, 0.55);

  /* --- 寸法 --- */
  --w-page: 1120px;
  --w-text: 720px;
  --h-header: 66px;   /* PC 64〜80px */
  --h-cta: 54px;      /* 固定CTA項目の最小高。上辺1pxボーダー込みの実高を 48〜56px に収める */
  --tap: 44px;

  /* --- 余白 --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 44px;
  --sp-8: 60px;
  --sp-9: 80px;

  /* --- 文字サイズ（最小14px） --- */
  --fs-note: 14px;   /* 注記・補足 */
  --fs-body: 16px;   /* 本文・料金・時刻・住所・ラベル */
  --fs-lead: 17px;
  --fs-h4: 18px;
  --fs-h3: 20px;
  --fs-h2: clamp(22px, 2.2vw, 28px);
  --fs-h1: clamp(26px, 3.2vw, 36px);
  --fs-display: clamp(28px, 4vw, 42px);

  --lh-tight: 1.3;
  --lh-normal: 1.6;
  --lh-long: 1.75;

  /* --- 書体（Inter + Noto Sans JP / システムフォントへフォールバック） --- */
  --font-base: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --font-num: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* --- モーション（fade-up 1種のみ） --- */
  --dur: 300ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --z-header: 60;
  --z-cta: 70;
  --z-drawer: 90;
  --z-modal: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
}

/* 電話・料金・日付・時刻に old-style 数字を使わない（tabular で桁を揃える） */
.num,
[data-num],
.tabular {
  font-family: var(--font-num);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}