/* ========================================
   Image Editor - 画像エディタ
   ======================================== */

.image-editor {
  position: fixed;
  inset: 0;
  z-index: 10200;
  display: flex;
  flex-direction: column;
  background: var(--color-bg, #0f1117);
}

/* ── ヘッダー ── */

.image-editor__header {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 12px;
  background: var(--color-surface, #1a1d27);
  border-bottom: 1px solid var(--color-border, #2a2d37);
  gap: 12px;
  flex-shrink: 0;
}

.image-editor__header-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text, #e0e0e0);
  margin-right: auto;
}

.image-editor__header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.image-editor__header-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--color-text-secondary, #8a94a6);
  font-size: 0.8125rem;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.image-editor__header-btn:hover {
  background: var(--color-surface-alt, #252830);
  color: var(--color-text, #e0e0e0);
}

.image-editor__header-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.image-editor__header-btn:disabled:hover {
  background: none;
  color: var(--color-text-secondary, #8a94a6);
}

.image-editor__save-btn {
  background: var(--color-accent, #a4b2dd);
  color: var(--color-button-text, #fff);
  font-weight: 500;
}

.image-editor__save-btn:hover {
  background: var(--color-accent-strong, #8a9bc7);
  color: var(--color-button-text, #fff);
}

/* ── ボディ（ツールバー + キャンバス + プロパティ） ── */

.image-editor__body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── 左ツールバー ── */

.image-editor__toolbar {
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 4px;
  background: var(--color-surface, #1a1d27);
  border-right: 1px solid var(--color-border, #2a2d37);
  flex-shrink: 0;
}

.image-editor__tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 50px;
  height: 46px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--color-text-secondary, #8a94a6);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.image-editor__tool-label {
  font-size: 0.5625rem;
  line-height: 1;
  white-space: nowrap;
}

.image-editor__tool-btn:hover {
  background: var(--color-surface-alt, #252830);
  color: var(--color-text, #e0e0e0);
}

.image-editor__tool-btn.active {
  background: rgba(var(--color-accent-rgb, 168, 184, 232), 0.22);
  color: var(--color-accent-strong, #7986cb);
}

/* ツールバーのグループ区切り */
.image-editor__tool-divider {
  width: 32px;
  height: 1px;
  background: var(--color-border, #2a2d37);
  margin: 4px 0;
  flex-shrink: 0;
}

/* ── キャンバスエリア ── */

.image-editor__canvas-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: repeating-conic-gradient(var(--color-surface-alt, #252830) 0% 25%, var(--color-bg, #0f1117) 0% 50%) 50% /
    20px 20px;
}

.image-editor__canvas-area canvas {
  max-width: 100%;
  max-height: 100%;
}

/* ── 右プロパティパネル ── */

/* ── 右パネル（ツール設定 + レイヤー） ── */

.image-editor__right-panel {
  width: 260px;
  display: flex;
  flex-direction: column;
  background: var(--color-surface, #1a1d27);
  border-left: 1px solid var(--color-border, #2a2d37);
  flex-shrink: 0;
}

.image-editor__properties {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
  min-height: 0;
}

.image-editor__panel-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text, #e0e0e0);
  margin-bottom: 12px;
}

/* ── パネル内ボタン ── */

.image-editor__transform-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.image-editor__panel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  padding: 8px;
  border: 1px solid var(--color-border, #2a2d37);
  border-radius: 6px;
  background: none;
  color: var(--color-text-secondary, #8a94a6);
  font-size: 0.75rem;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.image-editor__panel-btn:hover {
  background: var(--color-surface-alt, #252830);
  color: var(--color-text, #e0e0e0);
}

/* パネル内のトグル行 (ラベル + コア共通の .toggle-switch を左右に配置) */
.image-editor__toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 10px 0;
}

/* 初期パネルの「よく使う操作」ショートカット */
.image-editor__welcome-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text, #e0e0e0);
  margin: 16px 0 8px;
}

.image-editor__welcome-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--color-border, #2a2d37);
  border-radius: 8px;
  background: none;
  color: var(--color-text, #e0e0e0);
  cursor: pointer;
  text-align: left;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.image-editor__welcome-card:hover {
  background: var(--color-surface-alt, #252830);
  border-color: var(--color-accent, #a4b2dd);
}

.image-editor__welcome-card svg {
  flex-shrink: 0;
  color: var(--color-accent-strong, #7986cb);
}

.image-editor__welcome-card-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.8125rem;
}

.image-editor__welcome-card-text small {
  font-size: 0.6875rem;
  color: var(--color-text-secondary, #8a94a6);
}

/* AI画像生成パネル */
.image-editor__ai-image-instruction {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid var(--color-border, #2a2d37);
  border-radius: 6px;
  background: var(--color-surface-alt, #252830);
  color: var(--color-text, #e0e0e0);
  font-size: 0.8125rem;
  resize: vertical;
  margin-bottom: 10px;
}

/* プレビューは透過素材の確認のため市松背景 */
.image-editor__ai-image-preview {
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--color-border, #2a2d37);
  background: repeating-conic-gradient(var(--color-surface-alt, #252830) 0% 25%, var(--color-bg, #0f1117) 0% 50%) 50% /
    16px 16px;
  margin-bottom: 8px;
}

/* ── トリミング パネル ── */

.image-editor__crop-ratios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 16px;
}

.image-editor__crop-ratios .image-editor__panel-btn.active {
  background: rgba(var(--color-accent-rgb, 168, 184, 232), 0.22);
  color: var(--color-accent-strong, #7986cb);
  border-color: var(--color-accent, #a4b2dd);
}

.image-editor__crop-actions {
  display: flex;
  gap: 8px;
}

.image-editor__crop-cancel {
  flex: 1;
}

/* 横並びコンテナ内では primary の全幅指定を解除して等分にする
   (幅100%のまま置くと隣のキャンセルが潰れて縦書きになる) */
.image-editor__crop-actions .image-editor__panel-btn--primary,
.image-editor__save-dialog-footer .image-editor__panel-btn--primary {
  width: auto;
  flex: 1;
}

/* ── トリミング オーバーレイ ── */

.image-editor__crop-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  cursor: default;
}

.image-editor__crop-dark {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.image-editor__crop-frame {
  position: absolute;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
  cursor: move;
  box-sizing: border-box;
}

/* 3x3 グリッド線 */
.image-editor__crop-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.image-editor__crop-grid-cell {
  border-right: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.image-editor__crop-grid-cell:nth-child(3n) {
  border-right: none;
}

.image-editor__crop-grid-cell:nth-child(n + 7) {
  border-bottom: none;
}

/* ドラッグハンドル共通 */
.image-editor__crop-handle {
  position: absolute;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.3);
  z-index: 2;
}

/* 4隅ハンドル */
.image-editor__crop-handle[data-handle='nw'],
.image-editor__crop-handle[data-handle='ne'],
.image-editor__crop-handle[data-handle='sw'],
.image-editor__crop-handle[data-handle='se'] {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.image-editor__crop-handle[data-handle='nw'] {
  top: -6px;
  left: -6px;
  cursor: nw-resize;
}
.image-editor__crop-handle[data-handle='ne'] {
  top: -6px;
  right: -6px;
  cursor: ne-resize;
}
.image-editor__crop-handle[data-handle='sw'] {
  bottom: -6px;
  left: -6px;
  cursor: sw-resize;
}
.image-editor__crop-handle[data-handle='se'] {
  bottom: -6px;
  right: -6px;
  cursor: se-resize;
}

/* 4辺ハンドル */
.image-editor__crop-handle[data-handle='n'],
.image-editor__crop-handle[data-handle='s'] {
  width: 32px;
  height: 4px;
  left: 50%;
  transform: translateX(-50%);
  cursor: ns-resize;
  border-radius: 2px;
}

.image-editor__crop-handle[data-handle='n'] {
  top: -2px;
}
.image-editor__crop-handle[data-handle='s'] {
  bottom: -2px;
}

.image-editor__crop-handle[data-handle='e'],
.image-editor__crop-handle[data-handle='w'] {
  width: 4px;
  height: 32px;
  top: 50%;
  transform: translateY(-50%);
  cursor: ew-resize;
  border-radius: 2px;
}

.image-editor__crop-handle[data-handle='e'] {
  right: -2px;
}
.image-editor__crop-handle[data-handle='w'] {
  left: -2px;
}

/* ── フィルター ── */

.image-editor__filter-sliders {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.image-editor__filter-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.image-editor__filter-label {
  font-size: 0.75rem;
  color: var(--color-text-secondary, #8a94a6);
}

.image-editor__filter-slider {
  width: 100%;
  accent-color: var(--color-accent, #a4b2dd);
  cursor: pointer;
}

.image-editor__filter-value {
  font-size: 0.6875rem;
  color: var(--color-text-tertiary, #555);
  text-align: right;
}

.image-editor__filter-reset {
  width: 100%;
}

/* ── リサイズ ── */

.image-editor__resize-current {
  font-size: 0.6875rem;
  color: var(--color-text-tertiary, #555);
  margin-bottom: 10px;
}

.image-editor__resize-size-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-bottom: 6px;
}

.image-editor__resize-size-row .image-editor__save-input {
  width: 70px;
}

.image-editor__resize-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.image-editor__resize-x {
  font-size: 0.75rem;
  color: var(--color-text-tertiary, #555);
  padding-bottom: 6px;
}

.image-editor__resize-unit {
  font-size: 0.6875rem;
  color: var(--color-text-tertiary, #555);
  padding-bottom: 6px;
}

.image-editor__resize-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}

.image-editor__resize-presets .image-editor__panel-btn {
  font-size: 0.6875rem;
  padding: 4px 8px;
}

.image-editor__resize-presets .image-editor__panel-btn.active {
  background: rgba(var(--color-accent-rgb, 168, 184, 232), 0.22);
  color: var(--color-accent-strong, #7986cb);
  border-color: var(--color-accent, #a4b2dd);
}

/* ── レイヤーパネル ── */

.image-editor__layers {
  border-top: 1px solid var(--color-border, #2a2d37);
  display: flex;
  flex-direction: column;
  min-height: 120px;
  max-height: 40%;
}

.image-editor__layers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text, #e0e0e0);
}

.image-editor__layers-count {
  font-size: 0.625rem;
  color: var(--color-text-tertiary, #555);
  background: var(--color-surface-alt, #252830);
  padding: 1px 6px;
  border-radius: 8px;
}

.image-editor__layers-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 4px;
}

.image-editor__layer-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.6875rem;
  color: var(--color-text-secondary, #8a94a6);
  transition: background 0.1s;
}

.image-editor__layer-row:hover {
  background: var(--color-surface-alt, #252830);
}

.image-editor__layer-row.active {
  background: var(--color-accent-bg, #3a3f5a);
  color: var(--color-text, #e0e0e0);
}

.image-editor__layer-row.base {
  opacity: 0.7;
}

.image-editor__layer-row.dragging {
  opacity: 0.4;
}

.image-editor__layer-row.drag-above {
  border-top: 2px solid var(--color-accent, #a4b2dd);
}

.image-editor__layer-row.drag-below {
  border-bottom: 2px solid var(--color-accent, #a4b2dd);
}

.image-editor__layer-visibility {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 3px;
  background: none;
  color: var(--color-text-tertiary, #555);
  cursor: pointer;
  flex-shrink: 0;
}

.image-editor__layer-visibility.visible {
  color: var(--color-accent, #a4b2dd);
}

.image-editor__layer-icon {
  display: flex;
  align-items: center;
  color: var(--color-text-tertiary, #555);
  flex-shrink: 0;
}

.image-editor__layer-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-editor__layers-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-top: 1px solid var(--color-border, #2a2d37);
}

.image-editor__layer-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--color-text-secondary, #8a94a6);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.image-editor__layer-action-btn:hover {
  background: var(--color-surface-alt, #252830);
  color: var(--color-text, #e0e0e0);
}

/* ── 範囲選択 ── */

.image-editor__select-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  cursor: crosshair;
}

/* 選択境界の SVG (マーチングアンツ)。黒の下線 + 白の破線アニメで明暗どちらの画像でも見える */
.image-editor__select-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.image-editor__ants-under {
  fill: none;
  stroke: rgba(0, 0, 0, 0.85);
  stroke-width: 1.5;
}

.image-editor__ants {
  fill: none;
  stroke: #fff;
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  animation: image-editor-marching-ants 0.6s linear infinite;
}

.image-editor__ants--subtract {
  stroke: #ff6b6b;
}

@keyframes image-editor-marching-ants {
  to {
    stroke-dashoffset: -10;
  }
}

/* 確定済み選択の合成輪郭 (重なった領域はひとかたまりの外周のみ)。
   輪郭帯の canvas マスクに白黒ストライプを流してマーチングアンツにする */
.image-editor__select-union {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(45deg, #fff 0 4px, #000 4px 8px);
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  animation: image-editor-union-ants 0.7s linear infinite;
}

@keyframes image-editor-union-ants {
  to {
    background-position: 11.31px 0;
  }
}

/* 選択範囲への効果 (ぼかし / 明るさ) */
.image-editor__select-effects {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border, #2a2d37);
}

.image-editor__select-effects-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text, #e0e0e0);
  margin-bottom: 8px;
}

.image-editor__select-effects .image-editor__panel-btn {
  width: 100%;
  margin-bottom: 12px;
}

.image-editor__select-mode {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-accent, #a4b2dd);
  min-height: 16px;
}

.image-editor__select-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

/* ── 画像ピッカー ── */

.image-editor__image-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 100px;
  gap: 6px;
  padding: 12px 16px;
  max-height: 50vh;
  overflow-y: auto;
}

.image-editor__image-picker-item {
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s;
}

.image-editor__image-picker-item:hover {
  border-color: var(--color-accent, #a4b2dd);
}

.image-editor__image-picker-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 保存ダイアログ追加 ── */

.image-editor__save-size-info {
  font-size: 0.75rem;
  color: var(--color-text-tertiary, #555);
  text-align: center;
  padding: 4px 0;
}

/* 上書き保存の注記 (保存方法で「上書き」を選んだときだけ表示) */
.image-editor__save-note {
  font-size: 0.71875rem;
  color: var(--color-text-secondary, #8a94a6);
  line-height: 1.5;
  padding: 0 2px 8px;
}

/* ── テキスト ── */

.image-editor__text-add {
  width: 100%;
  margin-bottom: 12px;
}

.image-editor__text-props {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.image-editor__text-select {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid var(--color-border, #2a2d37);
  border-radius: 4px;
  background: var(--color-surface-alt, #252830);
  color: var(--color-text, #e0e0e0);
  font-size: 0.8125rem;
}

.image-editor__text-inline-row {
  display: flex;
  gap: 12px;
  margin-bottom: 2px;
}

.image-editor__text-inline-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.image-editor__text-inline-item .image-editor__save-input {
  width: 100%;
}

.image-editor__text-style-row {
  display: flex;
  gap: 4px;
}

.image-editor__text-style-row .image-editor__panel-btn {
  flex: 1;
  font-weight: 700;
}

.image-editor__text-style-row .image-editor__panel-btn.active {
  background: rgba(var(--color-accent-rgb, 168, 184, 232), 0.22);
  color: var(--color-accent-strong, #7986cb);
  border-color: var(--color-accent, #a4b2dd);
}

.image-editor__color-input {
  width: 32px;
  height: 24px;
  border: 1px solid var(--color-border, #2a2d37);
  border-radius: 4px;
  padding: 0;
  cursor: pointer;
  background: none;
}

/* ── 描画 ── */

.image-editor__draw-fill-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border, #2a2d37);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.image-editor__draw-fill-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.image-editor__draw-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 12px;
}

.image-editor__draw-modes .image-editor__panel-btn.active {
  background: rgba(var(--color-accent-rgb, 168, 184, 232), 0.22);
  color: var(--color-accent-strong, #7986cb);
  border-color: var(--color-accent, #a4b2dd);
}

.image-editor__stamp-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}

.image-editor__stamp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: 1px solid var(--color-border, #2a2d37);
  border-radius: 4px;
  background: none;
  color: var(--color-text-secondary, #8a94a6);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.image-editor__stamp-btn:hover {
  background: var(--color-surface-alt, #252830);
  color: var(--color-text, #e0e0e0);
}

.image-editor__stamp-btn.active {
  background: var(--color-accent-bg, #3a3f5a);
  color: var(--color-accent, #a4b2dd);
  border-color: var(--color-accent, #a4b2dd);
}

/* ── フッター ── */

.image-editor__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  background: var(--color-surface, #1a1d27);
  border-top: 1px solid var(--color-border, #2a2d37);
  font-size: 0.75rem;
  color: var(--color-text-tertiary, #555);
  flex-shrink: 0;
}

.image-editor__zoom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border: none;
  border-radius: 3px;
  background: none;
  color: var(--color-text-secondary, #8a94a6);
  cursor: pointer;
  font-size: 0.6875rem;
}

.image-editor__zoom-btn:hover {
  background: var(--color-surface-alt, #252830);
  color: var(--color-text, #e0e0e0);
}

.image-editor__zoom-slider {
  width: 120px;
  accent-color: var(--color-accent, #a4b2dd);
}

.image-editor__zoom-label {
  min-width: 40px;
  text-align: center;
}

/* ── 保存ダイアログ ── */

.image-editor__save-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 10300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
}

.image-editor__save-dialog {
  background: var(--color-surface, #1a1d27);
  border: 1px solid var(--color-border, #2a2d37);
  border-radius: 12px;
  width: 380px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.image-editor__save-dialog-title {
  padding: 16px 20px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text, #e0e0e0);
  border-bottom: 1px solid var(--color-border, #2a2d37);
}

.image-editor__save-dialog-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.image-editor__save-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.image-editor__save-row label {
  font-size: 0.8125rem;
  color: var(--color-text-secondary, #8a94a6);
  min-width: 80px;
  flex-shrink: 0;
}

.image-editor__save-row span {
  font-size: 0.75rem;
  color: var(--color-text-tertiary, #555);
  white-space: nowrap;
}

.image-editor__save-select {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--color-border, #2a2d37);
  border-radius: 4px;
  background: var(--color-surface-alt, #252830);
  color: var(--color-text, #e0e0e0);
  font-size: 0.8125rem;
}

.image-editor__save-input {
  width: 80px;
  padding: 4px 8px;
  border: 1px solid var(--color-border, #2a2d37);
  border-radius: 4px;
  background: var(--color-surface-alt, #252830);
  color: var(--color-text, #e0e0e0);
  font-size: 0.8125rem;
}

.image-editor__save-row .image-editor__filter-slider {
  flex: 1;
}

.image-editor__save-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--color-border, #2a2d37);
}

/* ── レスポンシブ ── */

@media (max-width: 768px) {
  .image-editor__right-panel {
    position: fixed;
    bottom: 36px;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    max-height: 50vh;
    border-left: none;
    border-top: 1px solid var(--color-border, #2a2d37);
    z-index: 5;
  }

  .image-editor__layers {
    max-height: 120px;
  }

  .image-editor__toolbar {
    width: 48px;
  }

  .image-editor__tool-btn {
    width: 36px;
    height: 36px;
  }

  .image-editor__zoom-slider {
    width: 80px;
  }

  .image-editor__save-dialog {
    width: 95vw;
  }
}

/* -- 塗りつぶし -- */

/* -- 背景透過 -- */

/* なぞって切り抜きのプレビュー overlay (fabric 履歴・保存に混入させない DOM 要素) */
.image-editor__scribble-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 5;
}

/* 仕上げモード: 残す / 消す の切替 */
.image-editor__bg-refine-modes {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.image-editor__bg-refine-mode {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--color-border, #444);
  border-radius: 6px;
  background: none;
  color: var(--color-text, #eee);
  font-size: 0.85rem;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.image-editor__bg-refine-mode.active {
  background: var(--color-accent, #4a9eff);
  border-color: var(--color-accent, #4a9eff);
  color: #fff;
  font-weight: 600;
}

.image-editor__panel-desc {
  color: var(--color-text-secondary, #999);
  font-size: 0.8125rem;
  line-height: 1.5;
  margin: 0 0 12px;
}

.image-editor__panel-btn--primary {
  background: var(--color-accent, #4a9eff);
  color: #fff;
  font-weight: 600;
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition:
    background 0.15s,
    opacity 0.15s;
}

.image-editor__panel-btn--primary:hover {
  background: var(--color-accent-hover, #3a8eef);
}

.image-editor__panel-btn--primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.image-editor__processing-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--color-text-secondary, #999);
  font-size: 0.8125rem;
}

.image-editor__processing-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border, #333);
  border-top-color: var(--color-accent, #4a9eff);
  border-radius: 50%;
  animation: bg-remove-spin 0.8s linear infinite;
}

@keyframes bg-remove-spin {
  to {
    transform: rotate(360deg);
  }
}

.image-editor__bg-remove-error {
  margin-top: 12px;
  padding: 8px 10px;
  background: var(--color-error-bg, rgba(255, 80, 80, 0.1));
  color: var(--color-error, #ff5050);
  border-radius: 4px;
  font-size: 0.8125rem;
  line-height: 1.4;
}