/* watermark 固有スタイル */
#editor[hidden], #save-card[hidden] { display: none; }
.wm-ctl [hidden], .wm-imgbar[hidden] { display: none !important; }

.wm-imgbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.wm-imgbar .btn { width: auto; margin: 0; }
.wm-imgbar select { flex: 1 1 12rem; min-width: 0; width: auto; max-width: 28rem; }
.wm-imgbar .pt-hint { margin: 0; }

.wm-layers { margin-bottom: 0.6rem; }
.wm-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; }
.wm-tab {
  font: inherit; font-size: 0.88rem; padding: 0.4rem 0.7rem; cursor: pointer;
  background: var(--surface); color: var(--text); border: 1.5px solid var(--border); border-radius: var(--pt-r, 6px);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wm-tab[aria-selected="true"] { border-color: var(--pt-accent); background: var(--pt-accent-soft); color: var(--pt-accent); font-weight: 700; }
.wm-tab:focus-visible { outline: 2px solid var(--pt-accent); outline-offset: 1px; }
.wm-layer-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; }
.wm-layer-btns .btn { margin: 0; width: auto; }
.wm-layer-btns .pt-check { margin: 0 0 0 0.5rem; }

.wm-stage {
  overflow: auto; max-height: 80vh;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--pt-r, 6px);
  padding: 0.75rem;
}
.wm-page {
  position: relative; margin: 0 auto; line-height: 0;
  background: #fff; box-shadow: 0 0 0 1px var(--border);
  user-select: none; -webkit-user-select: none;
}
.wm-page canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: move; }

.wm-ctl { margin-top: 1rem; }
.wm-ctl textarea { width: 100%; font-family: inherit; font-size: 16px; resize: vertical; }
.wm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
.wm-sliders { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 1.25rem; }
.wm-sliders input[type="range"] { width: 100%; }
@media (max-width: 720px) {
  .wm-two { grid-template-columns: 1fr; }
  .wm-sliders { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) { .wm-sliders { grid-template-columns: 1fr; } }
.wm-wide { display: flex; width: 100%; }

.wm-pos { display: inline-grid; grid-template-columns: repeat(3, 2.4rem); gap: 3px; }
.wm-pos button {
  height: 1.9rem; padding: 0; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: 4px;
}
.wm-pos button:hover { border-color: var(--pt-accent); background: var(--pt-accent-soft); }
.wm-pos button:focus-visible { outline: 2px solid var(--pt-accent); outline-offset: 1px; }
.wm-pos button::after { content: ""; display: block; width: 0.45rem; height: 0.45rem; margin: auto; background: var(--text-sub); border-radius: 1px; }

.wm-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; }
.wm-color { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-weight: 400; font-size: 0.9rem; }
.wm-color.is-off { opacity: 0.45; }
.wm-color input[type="color"] { width: 2.4rem; height: 2rem; padding: 2px; border: 1.5px solid var(--border); border-radius: 4px; background: var(--surface); cursor: pointer; }
.wm-colors .pt-check { margin: 0; }