/* =====================================
   style.css （コメント多め・整理済み全体版）
   ===================================== */

/* -----------------------------
   ページ全体
   ----------------------------- */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: #f9fafb; /* 淡いグレー */
  color: #333;
}

/* ヘッダー */
header {
  background: #4dabf7;     /* 淡い青 */
  color: #fff;
  padding: 10px 16px;
  font-size: 18px;
  font-weight: 600;
}

/* -----------------------------
   ツールバー
   ----------------------------- */
.toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* 共通ボタン（colorPickerも高さを合わせる） */
.tool-button,
#colorPicker {
  height: 36px;
  min-width: 60px;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fdfdfd;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, border-color 0.2s;
  font-size: 14px;
}
.tool-button:hover,
#colorPicker:hover {
  background: #f3f4f6;
  transform: translateY(-1px);
}

/* 選択中のツール強調 */
.active-tool {
  background: #e7f5ff !important; /* 淡い水色 */
  border-color: #339af0 !important;
  font-weight: 600;
}

/* カラーピッカーをボタン風に */
#colorPicker {
  width: 36px;
  padding: 0;
}

/* -----------------------------
   キャンバス領域
   ----------------------------- */
.board-container {
  position: relative;         /* #textContainer を重ねるための基準 */
  width: 100%;
  height: calc(100vh - 120px); /* ヘッダー+ツールバーぶんを概算控除 */
  overflow: hidden;
}


/* -----------------------------
   カーソル（クラス切り替え用）
   ----------------------------- */
.pen-cursor     { cursor: crosshair !important; }
.eraser-cursor  { cursor: not-allowed !important; }
.text-cursor    { cursor: text !important; }

/* -----------------------------
   便利：iframe/汎用button
   ----------------------------- */
iframe {
  border: none;
  width: 100%;
  height: 100%;
}
button {
  font-family: inherit;
}