/* ============================================================
   common.css — index.html と viewer.html で共通のスタイル
   （デザイントークン・基本リセット・ブランド表示）
   ============================================================ */
:root{
  --bg:#1b1e24; --panel:#23262e; --panel-2:#2b2f39;
  --hair:rgba(255,255,255,.08);
  --ink:#eceef2; --ink-2:#a6adba; --ink-3:#6a7280;
  --accent:#79c6c0; --accent-ink:#0c1412; --danger:#e5876b;
  --radius:10px;
  --font-ui:"Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ color:var(--ink); font-family:var(--font-ui); -webkit-font-smoothing:antialiased; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

/* 共通ブランド表示（両ページで同じマークアップ・同じ見た目） */
.brand{ display:flex; align-items:center; gap:10px; }
.brand .lock{ width:28px; height:28px; display:grid; place-items:center; border-radius:8px;
  background:rgba(121,198,192,.14); color:var(--accent); }
.brand .lock svg{ width:15px; height:15px; }
.brand .name{ letter-spacing:.15em; text-transform:uppercase; font-size:12px; font-weight:600;
  color:var(--ink-2); white-space:nowrap; }