.nav-bar { background: #353a80; color: #fff; padding: 12px 28px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.18); position: sticky; top: 0; z-index: 100; font-family: -apple-system, "Hiragino Kaku Gothic ProN", sans-serif; }
.nav-bar a.back { color: #fff; text-decoration: none; font-size: 13px; padding: 6px 14px; border: 1px solid rgba(255,255,255,0.4); border-radius: 4px; }
.nav-bar a.back:hover { background: rgba(255,255,255,0.15); }
.nav-bar .title { font-size: 14px; font-weight: 600; }
.nav-bar .badge { font-size: 11px; opacity: 0.85; padding: 3px 10px; border: 1px solid rgba(255,255,255,0.3); border-radius: 3px; }

.content-wrap { max-width: 900px; margin: 0 auto; padding: 24px 24px 80px; }

:root {
  color-scheme: light;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
               "メイリオ", Meiryo, sans-serif;
  max-width: 900px;
  margin: 32px auto;
  padding: 0 24px;
  color: #222;
  line-height: 1.7;
  background: #fff;
}
/* layout override after typography */
body { margin: 0 !important; max-width: none !important; padding: 32px 24px 80px !important; }

h1, h2, h3, h4, h5, h6 {
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.3;
}
h1 { font-size: 1.9em; border-bottom: 2px solid #3273dc; padding-bottom: 0.3em; }
h2 { font-size: 1.5em; border-bottom: 1px solid #ddd; padding-bottom: 0.25em; }
h3 { font-size: 1.25em; color: #444; }
h4 { font-size: 1.1em; color: #555; }
p { margin: 0.6em 0; }
strong { color: #1a1a1a; }
em { color: #444; }
ul, ol { margin: 0.6em 0; padding-left: 1.6em; }
li { margin: 0.2em 0; }
hr { border: none; border-top: 1px solid #e0e0e0; margin: 2em 0; }
blockquote {
  margin: 0.8em 0;
  padding: 0.4em 1em;
  border-left: 4px solid #b0b0b0;
  background: #f7f7f7;
  color: #555;
}
code {
  background: #f3f3f3;
  padding: 0.1em 0.35em;
  border-radius: 3px;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.92em;
}
pre {
  background: #f6f8fa;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 12px 16px;
  overflow-x: auto;
}
pre code { background: none; padding: 0; }
table {
  border-collapse: collapse;
  margin: 1em 0;
  width: 100%;
  font-size: 0.95em;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
th {
  background: #f0f4f9;
  font-weight: 600;
  color: #1a1a1a;
}
tr:nth-child(even) td { background: #fafbfc; }
a { color: #3273dc; }
.meta {
  color: #888;
  font-size: 0.85em;
  margin-bottom: 1.5em;
}

/* === mobile responsive (auto-injected) === */
@media (max-width: 768px) {
  body { -webkit-text-size-adjust: 100%; }
  .header { padding: 20px 16px 18px !important; }
  .header h1 { font-size: 22px !important; }
  .header h2 { font-size: 14px !important; }
  .header p { font-size: 12.5px !important; line-height: 1.65 !important; }
  .header .back { font-size: 12px !important; padding: 6px 12px !important; }
  .container { padding: 16px !important; max-width: 100% !important; }
  .legend { flex-wrap: wrap !important; gap: 8px !important; padding: 10px 12px !important; font-size: 12px !important; }
  .legend .sep { display: none !important; }
  .flow-section { padding: 14px !important; margin-bottom: 16px !important; }
  .flow-section h3 { font-size: 14px !important; flex-wrap: wrap !important; }
  /* お読みください card */
  .card { padding: 26px 20px !important; }
  .card h1 { font-size: 22px !important; }
  .card h2 { font-size: 14px !important; }
  .cta { padding: 14px 24px !important; font-size: 15px !important; }
  /* preview pages */
  .nav-bar { padding: 10px 14px !important; flex-wrap: wrap !important; gap: 6px !important; }
  .nav-bar .title { font-size: 12px !important; }
  .nav-bar .badge { font-size: 10px !important; }
  .content-wrap { padding: 16px !important; max-width: 100% !important; }
  /* artifacts catalog 2-col grid → 1-col */
  .grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .art .preview { min-height: auto !important; padding: 16px !important; }
  .art .info { padding: 16px !important; }
  /* 通しで見る two-col → stack */
  .layout { grid-template-columns: 1fr !important; height: auto !important; }
  html, body { overflow: visible !important; height: auto !important; }
  aside.toc { max-height: 200px; padding: 12px 0 16px !important; }
  aside.toc .brand { padding: 10px 16px 8px !important; font-size: 13px !important; }
  /* generic body wrap */
  body { padding-left: 0 !important; padding-right: 0 !important; }
  /* tables, code blocks scroll horizontally */
  pre, table { overflow-x: auto !important; max-width: 100% !important; }
}
/* === end mobile responsive === */