/* 画像を丸く切り抜き — ツール固有 */
.cc-drop { border:2px dashed var(--sg-border,#cfd4dc); border-radius:12px; padding:34px 16px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s; }
.cc-drop:hover,.cc-drop:focus,.cc-drop.is-over { border-color:var(--sg-primary,#3b5bdb); background:rgba(59,91,219,.05); outline:none; }
.cc-drop__title { font-weight:600; margin:0 0 4px; }
.cc-drop__sub { margin:0; font-size:.85rem; color:var(--sg-muted,#777); }

.cc-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 16px; margin:12px 0; }
@media (min-width:620px){ .cc-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.cc-ctl { display:flex; flex-direction:column; gap:4px; font-size:.85rem; color:var(--sg-muted,#555); }
.cc-ctl input[type="range"]{ width:100%; }
.cc-ctl--check { flex-direction:row; align-items:center; gap:8px; }

.cc-btns { display:flex; flex-wrap:wrap; gap:8px; }

.cc-stage { text-align:center; }
.cc-canvas {
  max-width:100%; height:auto; width:340px; border-radius:8px; touch-action:none; cursor:move;
  box-shadow:0 1px 4px rgba(0,0,0,.12);
  background:
    linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%) 0 0/16px 16px,
    linear-gradient(45deg,#eee 25%,#fff 25%,#fff 75%,#eee 75%) 8px 8px/16px 16px;
}
:root.sg-dark .cc-canvas {
  background:
    linear-gradient(45deg,#333 25%,transparent 25%,transparent 75%,#333 75%) 0 0/16px 16px,
    linear-gradient(45deg,#333 25%,#222 25%,#222 75%,#333 75%) 8px 8px/16px 16px;
}
.cc-status { margin:10px 0 0; min-height:1.2em; }