:root{
  --bg:#f4f1ea;            /* キャンバスの地の色（紙っぽい生成り） */
  --tb-bg:#ffffff;
  --tb-border:#e3ddd2;
  --accent:#3a86ff;
  --shadow:0 1px 3px rgba(0,0,0,.16);
  --tbh:56px;             /* ツールバーの高さ */
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; height:100%; overflow:hidden; overscroll-behavior:none;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif;
  background:var(--bg); color:#222;
  -webkit-user-select:none; user-select:none;
}

/* ===== 無限キャンバス ===== */
#stage{
  position:fixed; inset:0;
  touch-action:none;              /* ブラウザ既定のスクロール/ズームを止めて自前で処理 */
  background:
    radial-gradient(circle, #d9d2c4 1px, transparent 1.4px) 0 0/26px 26px,
    var(--bg);
  overflow:hidden;
}
#world{
  position:absolute; left:0; top:0; width:1px; height:1px;
  transform-origin:0 0;
  will-change:transform;
}
#ink{
  position:absolute; left:0; top:0; width:1px; height:1px;
  overflow:visible;               /* 無限に広がる線がクリップされないように */
  pointer-events:none;            /* 線はタップを受けない（下のカードや台紙にタップを通す） */
}
#ink path{ fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* ===== オブジェクト共通 ===== */
.obj{
  position:absolute; left:0; top:0;
  transform-origin:0 0;
}
.obj.sel{ outline:2px solid var(--accent); outline-offset:2px; }

/* リサイズ用のつまみ（右下） */
.rz{
  position:absolute; right:-9px; bottom:-9px;
  width:18px; height:18px; border-radius:50%;
  background:var(--accent); border:2px solid #fff; box-shadow:var(--shadow);
  display:none; transform-origin:center;
}
.obj.sel .rz{ display:block; }

/* ===== 付箋（テキストカード） ===== */
.card{
  min-width:60px; min-height:44px; padding:10px 12px;
  border-radius:10px; box-shadow:var(--shadow);
  background:#fff3b0; color:#3a2f00;
  font-size:17px; line-height:1.4;
}
.card .card-text{
  outline:none; white-space:pre-wrap; word-break:break-word;
  min-height:22px; -webkit-user-select:text; user-select:text;
  cursor:text;
}
.card.editing{ box-shadow:0 0 0 2px var(--accent), var(--shadow); }

/* ===== 画像 ===== */
.img-el{ border-radius:8px; box-shadow:var(--shadow); overflow:hidden; background:#fff; }
.img-el img{ display:block; width:100%; height:auto; pointer-events:none; }

/* ===== ツールバー ===== */
#toolbar{
  position:fixed; top:0; left:0; right:0; height:var(--tbh);
  display:flex; align-items:center; gap:6px; padding:6px 8px;
  padding-top:calc(6px + env(safe-area-inset-top));
  height:calc(var(--tbh) + env(safe-area-inset-top));
  background:var(--tb-bg); border-bottom:1px solid var(--tb-border);
  box-shadow:0 1px 2px rgba(0,0,0,.05); z-index:10;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.tb-group{ display:flex; align-items:center; gap:4px; flex:0 0 auto; }
.tb-group.right{ margin-left:auto; }
.tb-btn{
  font-size:20px; line-height:1; width:42px; height:42px;
  border:1px solid transparent; border-radius:10px; background:transparent;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.tb-btn:active{ background:#eee; }
.tb-btn.active{ background:#eaf1ff; border-color:#c7dbff; }
.hidden{ display:none !important; }

/* 色ドット・太さ */
.dots{ display:flex; gap:6px; align-items:center; }
.dot{ width:26px; height:26px; border-radius:50%; border:2px solid #fff;
  box-shadow:0 0 0 1px #ccc; cursor:pointer; }
.dot.on{ box-shadow:0 0 0 2px var(--accent); }
.widths{ display:flex; gap:6px; align-items:center; margin-left:6px; }
.wbtn{ width:34px; height:30px; border-radius:8px; border:1px solid var(--tb-border);
  background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.wbtn.on{ border-color:var(--accent); background:#eaf1ff; }
.wbtn i{ display:block; background:#333; border-radius:99px; }

/* ===== メニュー ===== */
#menu{ position:fixed; inset:0; background:rgba(0,0,0,.3); z-index:20;
  display:flex; align-items:center; justify-content:center; }
.menu-panel{ background:#fff; border-radius:16px; padding:14px; width:min(340px,86vw);
  box-shadow:0 8px 30px rgba(0,0,0,.25); display:flex; flex-direction:column; gap:8px; }
.menu-panel button{ font-size:16px; padding:14px; border-radius:10px; border:1px solid var(--tb-border);
  background:#fafafa; text-align:left; cursor:pointer; }
.menu-panel button:active{ background:#eee; }
.menu-note{ font-size:12px; color:#888; padding:2px 4px; }
.menu-close{ text-align:center !important; margin-top:2px; background:#fff !important; }