グラデーションを重ねて画像なしの背景パターン（方眼紙・ジグザグ・水玉など）を作る

.pattern {
  --line: #e2d36b;   /* 線の色 */
  --bg: #f6f2e9;     /* 下地の色 */
  background-color: var(--bg);
}

/* 方眼紙: 太線（100pxごと）と細線（20pxごと）を縦横に重ねる */
.pattern--graph {
  background-image:
    linear-gradient(var(--line) 3px, transparent 3px),
    linear-gradient(90deg, var(--line) 3px, transparent 3px),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}

/* ジグザグ: 4方向の直角三角形（25%で区切る）を組み合わせ、半マスずらす */
.pattern--zigzag {
  background-image:
    linear-gradient(135deg, var(--line) 25%, transparent 25%),
    linear-gradient(225deg, var(--line) 25%, transparent 25%),
    linear-gradient(45deg, var(--line) 25%, transparent 25%),
    linear-gradient(315deg, var(--line) 25%, transparent 25%);
  background-size: 40px 40px;
  background-position: 20px 0, 20px 0, 0 0, 0 0;
}

/* 水玉（互い違い）: 同じ円を2枚、半マスずらして重ねる */
.pattern--polka {
  background-image:
    radial-gradient(var(--line) 3px, transparent 3px),
    radial-gradient(var(--line) 3px, transparent 3px);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
}

/* 斜線ストライプ: repeating-linear-gradient なら background-size 不要 */
.pattern--diagonal {
  background-image: repeating-linear-gradient(
    45deg, var(--line) 0 8px, transparent 8px 32px
  );
}