/* 画像に文字・透かし — ツール固有 */
.iw-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;
}
.iw-drop:hover, .iw-drop:focus, .iw-drop.is-over {
  border-color: var(--sg-primary, #3b5bdb); background: rgba(59,91,219,.05); outline: none;
}
.iw-drop__title { font-weight: 600; margin: 0 0 4px; }
.iw-drop__sub { margin: 0; font-size: .85rem; color: var(--sg-muted, #777); }

.iw-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.iw-preset {
  border: 1px solid var(--sg-border, #cfd4dc); background: var(--sg-surface, #fff);
  border-radius: 999px; padding: 4px 12px; font-size: .82rem; cursor: pointer;
  color: var(--sg-fg, #333); line-height: 1.4; transition: border-color .15s, background .15s;
}
.iw-preset:hover, .iw-preset:focus { border-color: var(--sg-primary, #3b5bdb); background: rgba(59,91,219,.06); outline: none; }

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

.iw-posrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.iw-poslabel { font-size: .85rem; color: var(--sg-muted, #555); }
.iw-posgrid { display: grid; grid-template-columns: repeat(3, 34px); grid-auto-rows: 34px; gap: 4px; }
.iw-pos {
  border: 1px solid var(--sg-border, #cfd4dc); background: var(--sg-surface, #fff);
  border-radius: 6px; cursor: pointer; font-size: 1rem; color: var(--sg-fg, #333); line-height: 1;
}
.iw-pos:hover { border-color: var(--sg-primary, #3b5bdb); }
.iw-pos.is-on { background: var(--sg-primary, #3b5bdb); color: #fff; border-color: var(--sg-primary, #3b5bdb); }

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

.iw-stage { text-align: center; }
.iw-canvas {
  max-width: 100%; height: auto; 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 .iw-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;
}
.iw-status { margin: 10px 0 0; min-height: 1.2em; }