/* n1-share 共通スタイル — N1ブランド基調のドキュメント用ベース
   ブランド: #64CAB2 → #42A4AF / 本文 #333 / 背景 #fff
   ※ このファイルは ui-design + brand-design で随時リファインする出発点 */

:root {
  --brand-from: #64cab2;
  --brand-to: #42a4af;
  --brand: #4bb7b1;
  --ink: #2b2f33;
  --ink-soft: #555b61;
  --ink-faint: #8a9197;
  --line: #e7eaec;
  --bg: #ffffff;
  --bg-soft: #f6f8f8;
  --radius: 12px;
  --maxw: 760px;
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
          "Noto Sans JP", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.8;
  font-size: 16px;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

/* レイアウト幅: 本文は読みやすい幅に収める */
.wrap, main, article { max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }

/* ヘッダー（公開ページ上部の薄いブランドバー） */
.n1-topbar {
  height: 4px;
  background: linear-gradient(90deg, var(--brand-from), var(--brand-to));
}
.n1-header {
  max-width: var(--maxw); margin-inline: auto; padding: 28px 20px 8px;
}
.n1-header .meta { color: var(--ink-faint); font-size: 13px; letter-spacing: 0.03em; }

/* 見出し */
h1, h2, h3, h4 { line-height: 1.35; font-weight: 700; color: var(--ink); }
h1 { font-size: 1.9rem; margin: 0.2em 0 0.6em; letter-spacing: 0.01em; }
h2 {
  font-size: 1.4rem; margin: 2em 0 0.6em; padding-bottom: 0.3em;
  border-bottom: 2px solid var(--line);
}
h2::before {
  content: ""; display: inline-block; width: 8px; height: 1em;
  margin-right: 0.5em; vertical-align: -0.12em; border-radius: 3px;
  background: linear-gradient(180deg, var(--brand-from), var(--brand-to));
}
h3 { font-size: 1.15rem; margin: 1.6em 0 0.4em; }

p, ul, ol, blockquote, table, pre { margin: 0 0 1.1em; }

a { color: var(--brand-to); text-decoration: none; border-bottom: 1px solid rgba(66,164,175,0.35); }
a:hover { border-bottom-color: var(--brand-to); }

strong { font-weight: 700; }
em { color: var(--ink-soft); }

ul, ol { padding-left: 1.4em; }
li { margin: 0.3em 0; }
li::marker { color: var(--brand); }

blockquote {
  margin-inline: 0; padding: 0.6em 1.1em; color: var(--ink-soft);
  background: var(--bg-soft); border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* コード */
code {
  font-family: var(--mono); font-size: 0.88em;
  background: var(--bg-soft); padding: 0.15em 0.4em; border-radius: 5px;
}
pre {
  font-family: var(--mono); font-size: 0.85em; line-height: 1.6;
  background: #1f2428; color: #e6edf3; padding: 16px 18px;
  border-radius: var(--radius); overflow-x: auto;
}
pre code { background: none; padding: 0; color: inherit; }

/* テーブル */
table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th {
  background: var(--bg-soft); font-weight: 700; color: var(--ink);
  border-bottom: 2px solid var(--line);
}
tbody tr:hover { background: #fafcfc; }

/* カード / ハイライト */
.card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; background: var(--bg);
}
.badge {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  color: #fff; padding: 2px 10px; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-from), var(--brand-to));
}

hr { border: none; border-top: 1px solid var(--line); margin: 2.4em 0; }

img { max-width: 100%; height: auto; border-radius: 8px; }

/* フッター（戻り導線など） */
.n1-footer {
  max-width: var(--maxw); margin: 4em auto 3em; padding: 18px 20px 0;
  border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 13px;
}

@media (max-width: 600px) {
  body { font-size: 15px; }
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.25rem; }
}