/* 使い方ページ・紹介ページ共通のスタイル（アプリ本体とは別立て）
 *
 * アプリは編集画面なので暗い方が映像を見やすいが、読み物であるこの 2 ページは
 * 江戸切子の器そのものに寄せて、生成りの白地＋藍の差し色にしている。
 * 長文を読むので、真っ白より少し温かみのある地色にしてある。 */
:root {
  --bg: #f7f4ed; --panel: #fffdf7; --line: #e3ddcf; --line-hard: #d2cab7;
  --text: #2b2925; --dim: #6e685d; --accent: #1d4e8f; --accent2: #24619f;
  --warm: #a8761f; --good: #2f7a4d;
}
* { box-sizing: border-box; }
html { color-scheme: light; }   /* フォームやスクロールバーも明るい方に揃える */
html { scroll-behavior: smooth; scroll-padding-top: 68px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.85 -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px;
  padding: 9px 18px; background: #fffdf7e6; backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px #2b29250f;   /* 本文の上に乗っているのが分かるように */
}
.topbar img { width: 22px; height: 22px; border-radius: 6px; display: block; }
.topbar .name { font-weight: 700; letter-spacing: .02em; }
.topbar .sub { color: var(--dim); font-size: 11.5px; }
.topbar nav { margin-left: auto; display: flex; gap: 4px; }
.topbar nav a {
  padding: 5px 11px; border-radius: 6px; font-size: 13px; color: var(--text);
  border: 1px solid transparent;
}
.topbar nav a:hover { background: #ece6d9; text-decoration: none; }
.topbar nav a.on { background: var(--accent2); border-color: #1b4c80; color: #fff; }

.wrap { max-width: 860px; margin: 0 auto; padding: 0 20px 90px; }
.hero { padding: 56px 0 30px; border-bottom: 1px solid var(--line); margin-bottom: 34px; }
.hero h1 { font-size: 34px; margin: 0 0 6px; letter-spacing: .01em; }
.hero .lead { color: var(--dim); font-size: 16px; margin: 0; }
.hero .icon { width: 74px; height: 74px; border-radius: 18px; display: block; margin-bottom: 20px; }

h2 { font-size: 21px; margin: 46px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
h3 { font-size: 16px; margin: 30px 0 8px; color: #1f3b5c; }
p { margin: 12px 0; }
ul, ol { padding-left: 1.4em; margin: 12px 0; }
li { margin: 6px 0; }

figure { margin: 20px 0 26px; }
/* 画面写真は暗いので、白地に浮かせて縁を締める */
figure img {
  width: 100%; display: block; border-radius: 8px;
  border: 1px solid #cfc7b4; background: #16181d;
  box-shadow: 0 6px 20px #2b292514;
}
figcaption { color: var(--dim); font-size: 12.5px; margin-top: 8px; }

kbd {
  background: #fffdf7; border: 1px solid #c9c1ae; border-bottom-width: 2px;
  border-radius: 4px; padding: 1px 6px; font-size: 12px; margin: 0 1px;
  font-family: inherit; white-space: nowrap;
}
code {
  background: #f0ebdf; border: 1px solid var(--line); border-radius: 4px;
  padding: 1px 5px; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
pre { background: #f2ede1; border: 1px solid var(--line); border-radius: 8px; padding: 13px 15px; overflow-x: auto; font-size: 13px; line-height: 1.7; }
pre code { background: none; border: none; padding: 0; }

table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: #4a5568; font-size: 13px; white-space: nowrap; }

.note, .warn {
  border-radius: 8px; padding: 13px 16px; margin: 20px 0; font-size: 14px;
  border: 1px solid var(--line-hard); background: var(--panel);
}
.note { border-left: 3px solid var(--accent); }
.warn { border-left: 3px solid var(--warm); }
.note p:first-child, .warn p:first-child { margin-top: 0; }
.note p:last-child, .warn p:last-child { margin-bottom: 0; }

.steps { counter-reset: step; list-style: none; padding: 0; }
.steps > li { counter-increment: step; position: relative; padding: 0 0 4px 42px; margin: 26px 0; }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 1px;
  width: 27px; height: 27px; border-radius: 50%; background: var(--accent2); color: #fff;
  display: grid; place-items: center; font-size: 14px; font-weight: 700;
}
.steps > li > h3 { margin: 0 0 6px; font-size: 17px; color: var(--text); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 14px; margin: 22px 0; }
.card { background: var(--panel); border: 1px solid var(--line-hard); border-radius: 10px; padding: 16px 18px; }
.card h3 { margin: 0 0 6px; font-size: 15px; color: var(--text); }
.card p { margin: 0; color: var(--dim); font-size: 13.5px; line-height: 1.75; }

/* 主ボタンは江戸切子の瑠璃色に寄せる（アイコンとも揃う） */
.cta { display: inline-block; background: var(--accent); border: 1px solid #163d70; color: #fff; padding: 11px 26px; border-radius: 8px; font-weight: 700; margin: 10px 8px 10px 0; }
.cta:hover { background: #24619f; text-decoration: none; }
.cta.ghost { background: var(--panel); border-color: var(--line-hard); color: var(--text); }
.cta.ghost:hover { background: #ece6d9; }

footer.foot {
  border-top: 1px solid var(--line); margin-top: 56px; padding-top: 18px;
  color: var(--dim); font-size: 12.5px; display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline;
}
footer.foot a { color: var(--dim); }
footer.foot a:hover { color: var(--accent); }
footer.foot .ver { margin-left: auto; font-variant-numeric: tabular-nums; }

.toc { background: var(--panel); border: 1px solid var(--line-hard); border-radius: 10px; padding: 14px 20px; margin: 24px 0 8px; }
.toc ol { margin: 6px 0 0; }
.toc li { margin: 3px 0; }
.toc strong { font-size: 13px; color: #4a5568; }