*{box-sizing:border-box;margin:0;padding:0}

html{font-size:100%}

body{
  background:var(--bg);
  color:var(--text);
  font-size:var(--fs-body);
  font-family:var(--font-sans);
  line-height:var(--line-body);
  -webkit-font-smoothing:antialiased;
}

/* 本文ラッパ：余白の流動はここだけに集約（モバイル肥大の防止） */
.wrap{
  max-width:var(--measure);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* 縦リズムはフィボナッチ変数のみ */
p{margin-block:0 calc(var(--rhythm) * 1)}            /* 段落間=1拍 */
h1,h2,h3{line-height:var(--line-head);color:var(--accent)}
h1{font-size:var(--fs-h1);margin-block:calc(var(--rhythm) * 3) calc(var(--rhythm) * 0.5)}
h2{font-size:var(--fs-h2);margin-block:calc(var(--rhythm) * 3) calc(var(--rhythm) * 0.5)}  /* h2の前=3拍 */
h3{font-size:var(--fs-h3);margin-block:calc(var(--rhythm) * 2) calc(var(--rhythm) * 0.5)}  /* h3の前=2拍 */
ul,ol{margin-block:var(--sp-13);padding-inline-start:var(--sp-21)}
li{margin-block:var(--sp-5)}

a{color:var(--link);text-decoration:underline;text-underline-offset:.15em}
a:hover{color:var(--accent)}

img{max-width:100%;height:auto}
/* 本文画像はブロック化（行ボックス由来のサブピクセルはみ出しを防ぐ。横長図の右端見切れ対策） */
.lesson-body img{display:block;max-width:100%;height:auto}

/* レッスンの2カラム（デスクトップ）：本文21 : サブ13（黄金比近似） */
.lesson-grid{
  display:grid;
  grid-template-columns:var(--col-toc) var(--col-main);  /* 左:目次 右:本文 */
  gap:var(--col-gap);
  max-width:calc(var(--col-toc) + var(--col-gap) + var(--col-main) + var(--gutter) * 2);
  margin-inline:auto;
  padding-inline:var(--gutter);
  border-bottom:1px solid var(--border);
  padding-bottom:var(--sp-55);
}
.lesson-main{min-width:0}
.lesson-side{
  position:sticky;
  top:0;
  align-self:start;
  max-height:100vh;
  overflow-y:auto;
  padding-top:calc(var(--rhythm) * 3);   /* タイトル上の余白と同じ3拍ぶん */
  padding-inline:var(--sp-21);            /* 左右paddingは21px（フィボナッチ項） */
  padding-bottom:var(--sp-34);
}

/* モバイル折りたたみ目次はPCでは隠す（サイド目次と排他） */
.toc-mobile{display:none}

/* モバイル：1カラムに積み替え。サブは本文の下へ */
@media (max-width:768px){
  .lesson-grid{
    grid-template-columns:1fr;
    gap:var(--sp-21);
  }
  .lesson-side{display:none}
  .toc-mobile{display:block}
}