/* Zetter Studio β（docs/zetter-studio-design.md）。本体の styles.css には依存しない小さな画面用。 */
:root {
  --s-5: 5px;
  --s-8: 8px;
  --s-13: 13px;
  --s-21: 21px;
  --s-34: 34px;
  --s-55: 55px;
  --studio-bg: #f4f7fb;
  --studio-surface: #ffffff;
  --studio-text: #16202c;
  --studio-muted: #5b6878;
  --studio-border: #d6dfea;
  --studio-accent: #1d6fe0;
  --studio-accent-text: #ffffff;
  --studio-notice-bg: #e8f1fd;
}
@media (prefers-color-scheme: dark) {
  :root {
    --studio-bg: #0f141b;
    --studio-surface: #161d27;
    --studio-text: #e6edf5;
    --studio-muted: #9aa8b8;
    --studio-border: #2a3543;
    --studio-accent: #4b93f5;
    --studio-accent-text: #0b1220;
    --studio-notice-bg: #14263d;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--studio-bg);
  color: var(--studio-text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  line-height: 1.7;
}
.studio-header {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-13) var(--s-21);
  border-bottom: 1px solid var(--studio-border);
  background: var(--studio-surface);
}
.studio-header a { color: inherit; text-decoration: none; font-weight: 700; }
.studio-badge {
  padding: 0 var(--s-5);
  border: 1px solid var(--studio-accent);
  border-radius: 3px;
  color: var(--studio-accent);
  font-size: 12px;
  font-weight: 700;
}
.studio-notice {
  margin: 0;
  padding: var(--s-8) var(--s-21);
  background: var(--studio-notice-bg);
  font-size: 14px;
}
.studio-main {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s-34) var(--s-21) var(--s-55);
}
.studio-main h1 { margin: 0 0 var(--s-13); font-size: 24px; }
.studio-main h2 { margin: var(--s-34) 0 var(--s-8); font-size: 18px; }
.studio-main p, .studio-main li { color: var(--studio-text); }
.studio-muted { color: var(--studio-muted); font-size: 14px; }
.studio-panel {
  margin-top: var(--s-21);
  padding: var(--s-21);
  border: 1px solid var(--studio-border);
  border-radius: 6px;
  background: var(--studio-surface);
}
.studio-button {
  display: inline-block;
  padding: var(--s-8) var(--s-21);
  border: 0;
  border-radius: 6px;
  background: var(--studio-accent);
  color: var(--studio-accent-text);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.studio-button[disabled] { opacity: 0.6; cursor: default; }
.studio-footer {
  padding: var(--s-21);
  border-top: 1px solid var(--studio-border);
  color: var(--studio-muted);
  font-size: 13px;
  text-align: center;
}
.studio-footer a { color: inherit; margin: 0 var(--s-8); }
[hidden] { display: none !important; }