* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  /* 文字選択・長押しの虫めがね/コピーメニューを無効化（子どもの誤操作防止） */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

html, body {
  height: 100%;
  overflow: hidden;
  /* スクロール連鎖・横スワイプの「戻る/進む」を抑制 */
  overscroll-behavior: none;
  touch-action: none;
}

body {
  /* 画面を固定してラバーバンド（ゴムのように引っ張れる動き）を防ぐ */
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  font-family: "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  background: #446655;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ===== ツールバー ===== */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  z-index: 10;
}

.tool {
  width: 54px;
  height: 54px;
  border: 3px solid #1c1c1c;
  border-radius: 14px;
  background: #446655;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.08s;
}

.tool:active {
  transform: scale(0.92);
}

/* 選択中は太い二重線（黒 − 白 − 黒）で示す。色に頼らないので紛れない */
.tool.is-active {
  box-shadow: inset 0 0 0 3px #ffffff, inset 0 0 0 6px #1c1c1c;
}

/* 押せないボタン（もどす履歴なしなど） */
.tool:disabled {
  opacity: 0.3;
  cursor: default;
}

.tool:disabled:active {
  transform: none;
}

/* 色ボタン */
.color-btn {
  background: var(--c);
}

/* 太さボタン（黒板色に白い点） */
.size-btn .dot {
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  background: #ffffff;
}

/* 消しゴム・もどす・保存など（黒板色に白アイコン） */
.eraser-btn,
.icon-btn,
.clear-btn {
  background: #446655;
}

.eraser-btn svg,
.icon-btn svg,
.clear-btn svg {
  pointer-events: none;
}

/* ダウンロードと全消しは、他のボタンから離して画面右端へまとめる */
#saveBtn {
  margin-left: auto;
}

/* ===== 黒板 ===== */
.board {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #446655;
}

#canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}