.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; }


:root { color-scheme: light; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; max-width: 900px; margin: 0 auto; padding: 32px 24px 80px; color: #222; line-height: 1.7; background: #fff; }
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; }
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; }

body { margin: 0; max-width: none; padding: 0; background: #fff; }
.content-wrap { max-width: 900px; margin: 0 auto; padding: 32px 24px 80px; }

/* === 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 === */