/* 余白 — 配布物ページ共通スタイル。外部依存ゼロ。ライト/ダーク両対応 */

:root{
  --bg:#fbfaf8;
  --bg-tint:#f2efe9;
  --surface:#ffffff;
  --fg:#15181a;
  --fg-soft:#3d4448;
  --muted:#767f84;
  --line:#e6e1d8;
  --line-soft:#efebe3;
  --accent:#1c6b4e;
  --accent-fg:#0f4d37;
  --accent-wash:rgba(28,107,78,.07);
  --warn-wash:#fdf6e7;
  --warn-line:#e8d4a0;
  --warn-fg:#7a5a12;
  --term-bg:#14181b;
  --term-fg:#e4e9ea;
  --term-line:#2b3337;
  --shadow:0 1px 2px rgba(20,24,26,.04),0 8px 24px -12px rgba(20,24,26,.14);
  --shadow-lift:0 2px 4px rgba(20,24,26,.05),0 18px 40px -16px rgba(20,24,26,.22);
  --radius:14px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0d0f10;
    --bg-tint:#14181a;
    --surface:#15191b;
    --fg:#e9ecec;
    --fg-soft:#c2c8c9;
    --muted:#8b9496;
    --line:#252b2e;
    --line-soft:#1d2224;
    --accent:#5fc39a;
    --accent-fg:#7fd3ae;
    --accent-wash:rgba(95,195,154,.09);
    --warn-wash:#211d12;
    --warn-line:#4a3f22;
    --warn-fg:#d9bd77;
    --term-bg:#0a0d0e;
    --term-fg:#dfe5e6;
    --term-line:#222a2d;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lift:0 2px 4px rgba(0,0,0,.5),0 18px 40px -16px rgba(0,0,0,.75);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;overflow-x:clip;overflow-wrap:anywhere;
  background:var(--bg);
  color:var(--fg);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16.5px;
  line-height:1.95;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}

/* 読み進み度 */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:50;transition:width .1s linear}

.wrap{max-width:44rem;margin:0 auto;padding:0 1.35rem 7rem}

/* ヘッダー */
.hero{
  padding:4.5rem 0 2.75rem;margin-bottom:3rem;border-bottom:1px solid var(--line);
  background:radial-gradient(120% 80% at 50% -12%,var(--accent-wash),transparent 68%);
}
.kicker{
  display:inline-flex;align-items:center;gap:.5rem;
  margin:0 0 1.4rem;padding:.32rem .8rem;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);
  color:var(--muted);font-size:.72rem;letter-spacing:.11em;font-weight:600;
}
.kicker::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
h1{
  margin:0 0 1.1rem;
  font-size:clamp(1.85rem,5.2vw,2.6rem);
  line-height:1.34;letter-spacing:-.015em;font-weight:800;
}
.lead{margin:0;color:var(--fg-soft);font-size:1.06rem;line-height:1.9}

/* 目次 */
.toc{margin:0 0 3.25rem;padding:1.15rem 1.35rem;background:var(--bg-tint);border:1px solid var(--line-soft);border-radius:var(--radius)}
.toc p{margin:0 0 .55rem;font-size:.72rem;letter-spacing:.11em;color:var(--muted);font-weight:700}
.toc ol{margin:0;padding-left:1.15rem}
.toc li{margin:.18rem 0;font-size:.94rem}
.toc a{color:var(--fg-soft);text-decoration:none;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.toc a:hover{color:var(--accent-fg);border-bottom-color:var(--accent)}

/* 本文 */
h2{
  position:relative;margin:3.5rem 0 1.1rem;padding-top:2.25rem;
  border-top:1px solid var(--line-soft);
  font-size:1.32rem;line-height:1.5;letter-spacing:-.01em;font-weight:800;
}
h2 .num{
  display:block;margin-bottom:.35rem;
  font-family:ui-serif,"Hiragino Mincho ProN","Yu Mincho",Georgia,serif;
  font-size:.9rem;letter-spacing:.16em;color:var(--accent);font-weight:600;
}
h3{margin:2.1rem 0 .55rem;font-size:1.02rem;font-weight:700;letter-spacing:-.005em}
p{margin:0 0 1.1rem}
a{color:var(--accent-fg);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
ul,ol{padding-left:1.4rem;margin:0 0 1.2rem}
li{margin:.45rem 0}
li::marker{color:var(--muted)}
strong{font-weight:700}

/* 「要るもの」カード */
.req{
  margin:0 0 3rem;padding:1.4rem 1.5rem;
  background:var(--warn-wash);border:1px solid var(--warn-line);border-radius:var(--radius);
}
.req .req-h{display:flex;align-items:center;gap:.5rem;margin:0 0 .7rem;font-weight:800;font-size:.95rem;color:var(--warn-fg)}
.req .req-h::before{content:"！";display:grid;place-items:center;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--warn-fg);color:var(--warn-wash);font-size:.72rem;font-weight:800}
.req ul{margin:0;padding-left:1.25rem}
.req li{margin:.35rem 0;font-size:.96rem}

/* 主張パネル */
.claim{
  margin:2rem 0;padding:1.5rem 1.6rem;
  background:var(--accent-wash);
  border:1px solid transparent;border-left:3px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0;
}
.claim p:last-child{margin-bottom:0}
.claim strong{color:var(--accent-fg)}

/* コード */
.code{margin:1.1rem 0 1.6rem;border-radius:12px;overflow:hidden;background:var(--term-bg);border:1px solid var(--term-line);box-shadow:var(--shadow)}
.code-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem .55rem .5rem .95rem;border-bottom:1px solid var(--term-line)}
.code-bar span{color:#8d999c;font-size:.72rem;letter-spacing:.09em;font-weight:600}
.code-bar .btns{display:flex;gap:.4rem;flex:0 0 auto}
.copy{
  appearance:none;border:1px solid #313b3f;background:#1b2124;color:#c3cccd;
  font:inherit;font-size:.74rem;font-weight:600;letter-spacing:.03em;
  padding:.3rem .75rem;border-radius:7px;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s,transform .1s;
}
.copy:hover{background:#232b2e;color:#fff;border-color:#46534a}
.copy:active{transform:scale(.96)}
.copy.done{background:#1c6b4e;border-color:#1c6b4e;color:#fff}
.code pre{margin:0;padding:1rem 1.1rem;overflow:auto;max-height:24rem;background:none;border:0}
.code code{color:var(--term-fg);font-size:.855rem;line-height:1.8}
pre,code{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace}
/* 本文中のインラインcodeだけ。pre の中には絶対に当てない（明るい地に明るい文字になる） */
:not(pre)>code{
  background:var(--bg-tint);border:1px solid var(--line-soft);
  padding:.1em .42em;border-radius:5px;font-size:.87em;
}
.code pre code{background:none;border:0;padding:0;border-radius:0}

/* つまずいたら */
.trouble{list-style:none;padding:0;margin:0 0 1.2rem}
.trouble li{
  margin:.55rem 0;padding:.9rem 1.1rem;
  background:var(--surface);border:1px solid var(--line);border-radius:11px;
  font-size:.96rem;transition:border-color .15s,box-shadow .15s,transform .15s;
}
.trouble li:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-1px)}
.trouble b{display:block;margin-bottom:.15rem}

/* 次にやること */
.steps{list-style:none;counter-reset:s;padding:0;margin:0 0 1.2rem}
.steps li{counter-increment:s;position:relative;padding-left:2.6rem;margin:1rem 0}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:.15rem;
  display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;
  background:var(--accent-wash);border:1px solid var(--accent);color:var(--accent-fg);
  font-size:.82rem;font-weight:700;
}

/* フッター */
footer{margin-top:4.5rem;padding:1.75rem 0 0;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem}
footer p{margin:0 0 .45rem}
.ig{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:.75rem;
  padding:.55rem 1.05rem;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--fg);text-decoration:none;font-size:.9rem;font-weight:600;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.ig:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-1px)}

/* ハブ（index） */
.cards{list-style:none;padding:0;margin:0}
.cards li{margin:.85rem 0}
.cards a{
  display:block;padding:1.35rem 1.5rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  text-decoration:none;color:var(--fg);box-shadow:var(--shadow);
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.cards a:hover{border-color:var(--accent);box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.cards b{display:block;font-size:1.06rem;font-weight:700;margin-bottom:.25rem}
.cards em{display:block;font-style:normal;color:var(--muted);font-size:.92rem;line-height:1.75}

/* 出現アニメーション */
.rise{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.22,.8,.3,1),transform .6s cubic-bezier(.22,.8,.3,1)}
.rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none;transition:none}
  *{animation:none!important}
}
/* ---------- タブレット ---------- */
@media (max-width:720px){
  .wrap{padding:0 1.15rem 5rem}
  h2{margin-top:3rem;padding-top:2rem}
}

/* ---------- スマホ（実質ここが本番。閲覧はほぼスマホ） ---------- */
@media (max-width:560px){
  body{font-size:16px;line-height:1.88}
  .wrap{padding:0 1.1rem 4.5rem}

  .hero{padding:2.6rem 0 2rem;margin-bottom:2.25rem}
  .kicker{margin-bottom:1.1rem;padding:.3rem .7rem;font-size:.68rem;letter-spacing:.08em}
  h1{font-size:1.72rem;line-height:1.42}
  .lead{font-size:1rem;line-height:1.85}

  .toc{margin-bottom:2.25rem;padding:1rem 1.1rem}
  .toc li{font-size:.92rem;margin:.3rem 0}
  .req{margin-bottom:2.25rem;padding:1.15rem 1.2rem}
  .claim{padding:1.15rem 1.2rem;margin:1.5rem 0}

  h2{margin-top:2.75rem;padding-top:1.85rem;font-size:1.2rem}
  h2 .num{font-size:.82rem}
  h3{font-size:.98rem}
  ul,ol{padding-left:1.25rem}

  /* コードは画面幅いっぱいに逃がす。横スクロールはブロックの中だけ */
  .code{margin-left:-1.1rem;margin-right:-1.1rem;border-radius:0;border-left:0;border-right:0}
  .code-bar{padding:.45rem .5rem .45rem .9rem}
  .code-bar span{font-size:.66rem;letter-spacing:.07em}
  .code pre{padding:.9rem 1rem;max-height:19rem}
  .code code{font-size:.8rem;line-height:1.75}
  /* 指で押せる大きさを確保 */
  .copy{min-height:2.4rem;padding:.45rem .9rem;font-size:.76rem}

  .trouble li{padding:.85rem .95rem;font-size:.94rem}
  .trouble li:hover{transform:none;box-shadow:none}
  .steps li{padding-left:2.35rem}
  .steps li::before{width:1.6rem;height:1.6rem;font-size:.78rem}

  .cards a{padding:1.15rem 1.2rem}
  .cards a:hover{transform:none}
  .cards b{font-size:1.02rem}
  .ig{min-height:2.6rem}
}

/* タッチ端末ではホバーの浮きを切る（押した瞬間だけ動いて見えるのを防ぐ） */
@media (hover:none){
  .trouble li:hover,.cards a:hover,.ig:hover{transform:none;box-shadow:var(--shadow)}
}