:root {
  --ink: #3d2b1f;
  --ink-light: #6b5344;
  --paper: #faf6f0;
  --paper-dark: #ede5d8;
  --accent: #c0713a;
  --accent-dark: #9a5a2e;
  --accent-light: #e6c9a8;
  --accent-glow: rgba(192, 113, 58, 0.18);
  --r: 12px;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  background: var(--paper);
  color: var(--ink);
  height: auto;
  min-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  /* 読みやすさ優先で少し大きめ */
  font-size: 18px;
}

/* howto / concept などページ系は常にスクロール可 */
html.page-settings,
body.page-settings {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 100% !important;
}

/* 画面左右に余白を設ける（モバイルでも詰まりすぎない） */
body.page-settings .wrap {
  width: 100%;
  min-height: 100dvh;
  box-sizing: border-box;
  padding: clamp(12px, 3vw, 22px);
}

/* ページ上部の大きい見出し（任意で使用） */
.page-hero {
  text-align: center;
  padding: clamp(10px, 2.5vw, 18px) 0 clamp(6px, 2vw, 14px);
}
.page-hero .howto-lead {
  margin: 0 0 0.35rem;
  color: var(--ink-light);
  font-size: clamp(1rem, 3.6vw, 1.15rem);
}
.page-hero-title {
  margin: 0;
  color: var(--accent-dark);
  letter-spacing: 0.08em;
  font-weight: 800;
  font-size: clamp(1.9rem, 7vw, 3rem);
  line-height: 1.15;
}

/* 中身カードは中央寄せ＋最大幅 */
body.page-settings .howto-page {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  /* 各ページ内 style の font-size を上書きできないので、ここは控えめに */
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}