/* ページ全体の基本設定 */
body {
  margin: 0;
  color: #eee;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* アプリ全体でブラウザ標準のスクロールバーを消す */
  overflow: hidden;
  /* iOSでのバウンススクロールなどを防ぐ */
  overscroll-behavior: none;

  /* 1. テキスト選択を無効化（青いハイライトが出ないようにする） */
  user-select: none;
  -webkit-user-select: none; /* Safari / iOS用 */
  
  /* 2. 長押しメニュー（コピー/ペーストなどの吹き出し）を無効化（iOS用） */
  -webkit-touch-callout: none;
}

/* ヘッダー領域（ボタン置き場）の設定 */
#header {
  background-color: #333;
  padding: 10px;
  border-bottom: 2px solid #555;
  display: flex;
  gap: 10px;
  align-items: center; /* 上下中央揃えを追加 */
  flex-wrap: wrap; /* 画面が狭い時に折り返す */
  position: relative;
  z-index: 3000;
}

/* ボタン共通の設定 */
button {
  padding: 0;
  cursor: pointer;
  
  /* サイズ設定 */
  height: 60px;
  min-width: 60px;
  width: 60px;

  /* 配置 */
  display: flex;
  justify-content: center;
  align-items: center;

  /* 背景画像の調整 */
  background-position: center;
  background-repeat: no-repeat;
  background-size: 85%; /* 枠に収まる良いバランスに調整 */

  /* ★デザインの大幅変更 */
  /* 1. SFチックな暗めのベースカラー */
  background-color: #222;
  
  /* 2. 金属っぽい枠線 */
  border: 2px solid #444;
  border-radius: 12px; /* 少し丸みを強める */

  /* 3. 立体感の演出（重要） */
  /* insetをつけると内側に影が落ち、ボタンが凹んで見えます */
  box-shadow: 
    inset 0 0 15px rgba(0, 0, 0, 0.8), /* 内側の濃い影 */
    0 2px 4px rgba(0, 0, 0, 0.5);      /* 外側の影（ドロップシャドウ） */

  /* 4. アニメーション */
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@media (hover: hover) {
  /* 標準ボタンのホバー */
  button:hover {
    background-color: #333;
    border-color: #666;
    transform: translateY(-2px); /* これがズレの原因でした */
    box-shadow: 
      inset 0 0 5px rgba(0, 0, 0, 0.5),
      0 5px 10px rgba(0, 0, 0, 0.6),
      0 0 8px rgba(100, 200, 255, 0.2);
  }

  /* 保存・読込ボタンのホバー（色変化もスマホだと張り付くのでここに入れるのがおすすめ） */
  .file-btn:hover {
    background-color: #3a7a3d;
    border-color: #6aca6d;
  }

  /* 削除ボタンのホバー */
  .delete-mode-btn:hover {
    background-color: #700;
    border-color: #c00;
    box-shadow: 
      inset 0 0 5px rgba(0, 0, 0, 0.5),
      0 0 10px rgba(255, 50, 50, 0.3);
  }
  
  .delete-mode-btn.active:hover {
    background-color: #f00;
    box-shadow: 0 0 30px rgba(255, 0, 0, 1);
  }

  /* トグルスイッチのホバー */
  .toggle-switch:hover .slider {
    background-color: #666;
  }
  .toggle-switch:hover input:checked + .slider {
    background-color: #5cb85c;
  }
}

/* アクティブ（クリックした）時の演出 */
button:active {
  /* 押し込んだ物理的な挙動 */
  transform: translateY(1px);
  
  /* 強く凹ませる */
  background-color: #1a1a1a;
  box-shadow: 
    inset 0 0 20px rgba(0, 0, 0, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 非活性状態のボタン（共通） */
button.disabled {
  opacity: 0.3;          /* 薄くする */
  pointer-events: none;  /* クリックできなくする */
  filter: grayscale(100%); /* 色味を抜く */
  cursor: not-allowed;
}

/* 個別ボタンの設定（文字を透明にする処理は維持） */
#btn-power, #btn-auto-switch, #btn-inverter, 
#btn-button, #btn-wall-switch, #btn-color-light {
  color: transparent;
}

/* 保存・読込ボタンなどはアイコンがないので、文字が見えるように別途調整が必要なら以下を追加 */
.file-btn {
  /* パーツボタンとは違い、横長のまま文字を見せたい場合 */
  width: auto;
  min-width: auto;
  padding: 0 15px;
  color: white !important; /* 文字色を強制的に戻す */
  background-image: none !important; /* 背景画像を消す */
  
  /* 色味も区別する（緑系） */
  background-color: #2e5e30;
  border-color: #4a8a4d;
}

.file-btn:hover {
  background-color: #3a7a3d;
  border-color: #6aca6d;
}

/* リセットボタン（黄色の警告色） */
.reset-btn {
  background-color: #8b6914 !important; /* 暗めの黄土色 */
  border-color: #d4a017 !important; /* 明るい金色の枠 */
  box-shadow: 
    inset 0 0 10px rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

.reset-btn:hover {
  background-color: #a67c1a !important; /* 少し明るい黄色 */
  border-color: #f0c419 !important;
  box-shadow: 
    inset 0 0 5px rgba(0, 0, 0, 0.3),
    0 0 10px rgba(255, 200, 50, 0.4) !important;
}

.reset-btn:active {
  background-color: #6d5510 !important; /* さらに暗く */
  box-shadow: 
    inset 0 0 15px rgba(0, 0, 0, 0.8),
    0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* ★追加: 複数選択ボタンのスタイル */
#btn-multi-select {
  /* パーツボタンの基本スタイル(button)を継承しつつ独自カスタム */
  background-color: #004455;
  border: 2px solid #0088aa;
  position: relative;
}

/* アイコン：四角い点線枠 */
#btn-multi-select::after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  border: 2px dashed #00ccff; 
  border-radius: 4px;
  background-color: rgba(0, 204, 255, 0.2);
}

#btn-multi-select:hover {
  background-color: #005566;
  border-color: #00aadd;
}

/* アクティブ（ON）状態 */
#btn-multi-select.active {
  background-color: #0088aa;
  border-color: #00ffff;
  box-shadow: 
    inset 0 0 10px rgba(0, 0, 0, 0.5),
    0 0 15px rgba(0, 255, 255, 0.6);
}

/* ★追加: 複製ボタンのスタイル */
#btn-duplicate {
  background-color: #2a4a6a; /* 少し青みがかった色 */
  border: 2px solid #4a8aca;
  position: relative;
}

#btn-duplicate:hover {
  background-color: #3a5a7a;
}

#btn-duplicate:active {
  background-color: #1a3a5a;
}

/* アイコン（2枚の重なった四角） */
#btn-duplicate::before,
#btn-duplicate::after {
  content: "";
  position: absolute;
  border: 2px solid #fff;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

/* 後ろの四角 */
#btn-duplicate::before {
  width: 16px;
  height: 20px;
  /* 修正前: top: 16px; left: 18px; */
  top: 14px;
  left: 16px;
}

/* 前の四角 */
#btn-duplicate::after {
  width: 16px;
  height: 20px;
  /* 修正前: top: 22px; left: 24px; */
  top: 20px;
  left: 22px;
  background: #2a4a6a; 
  z-index: 1;
}

/* 削除モードボタン（ベース） */
.delete-mode-btn {
  /* パーツボタンと同じサイズ・基本設定を継承しつつ上書き */
  height: 60px;
  min-width: 60px;
  width: 60px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 70%; /* ゴミ箱アイコンのサイズ感 */
  border-radius: 12px;
  transition: all 0.2s ease;
  
  /* ★区別ポイント: 赤を基調とした警戒色 */
  background-color: #500; /* 通常時は暗い赤 */
  border: 2px solid #a00; /* 赤い枠線 */
  
  /* 内側に影を落として「埋め込まれたスイッチ」感を出す */
  box-shadow: 
    inset 0 0 10px rgba(0, 0, 0, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.5);
}

/* ホバー時（削除しようとしている警告感） */
.delete-mode-btn:hover {
  background-color: #700;
  border-color: #c00;
  box-shadow: 
    inset 0 0 5px rgba(0, 0, 0, 0.5),
    0 0 10px rgba(255, 50, 50, 0.3);
}

/* 削除モードON（アクティブ）時のスタイル */
.delete-mode-btn.active {
  /* 激しく発光させて「危険モード」であることを伝える */
  background-color: #d00;
  border-color: #ff5555;
  
  /* 強い発光表現 */
  box-shadow: 
    inset 0 0 15px rgba(100, 0, 0, 0.5), /* 内側は少し暗く */
    0 0 20px rgba(255, 0, 0, 0.8);     /* 外側へ強く光る */
    
  /* 押された状態の変形 */
  transform: scale(0.95);
}

.delete-mode-btn.active:hover {
  background-color: #f00;
  box-shadow: 0 0 30px rgba(255, 0, 0, 1);
}

/* スペーサー */
.spacer {
  flex-grow: 1;
}

/* 90度スナップトグル */
.rotation-snap-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #eee;
  cursor: pointer;
  user-select: none;
}

.rotation-snap-toggle input[type="checkbox"] {
  cursor: pointer;
}

.rotation-snap-toggle span {
  font-size: 14px;
}

/* キャンバス領域の設定 */
#canvas-container {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 設定パネル（設定項目をまとめるエリア） */
.settings-panel {
  display: flex;
  flex-direction: row; /* 横並び */
  align-items: center; /* 中央揃え */
  background-color: #222;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 8px 12px;
  gap: 12px; /* アイコンとトグル群の間隔 */
  margin-right: 10px;
}

.settings-icon {
  font-size: 24px;
  cursor: default;
  opacity: 0.7;
  flex-shrink: 0; /* アイコンが縮まないようにする */
}

/* トグルスイッチをグリッドレイアウトで配置 */
.settings-toggles {
  display: grid;
  grid-template-columns: auto auto; /* 2列 */
  grid-template-rows: auto auto;    /* 2行 */
  gap: 8px;
}

/* Rotation Snap: 1列目1行目 */
.settings-toggles .toggle-switch:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}

/* Show Grid: 2列目1行目 */
.settings-toggles .toggle-switch:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

/* Grid Snap: 1列目2行目 */
.settings-toggles .toggle-switch:nth-child(3) {
  grid-column: 1;
  grid-row: 2;
}

/* トグルスイッチのコンテナ */
.toggle-switch {
  display: flex;
  align-items: center;
  padding: 0px 12px;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

/* 実際のチェックボックスは隠す */
.toggle-switch input {
  display: none;
}

/* スイッチの土台（スライダー部分） */
.slider {
  position: relative;
  width: 40px;
  height: 20px;
  background-color: #555;
  border-radius: 20px;
  transition: .3s;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

/* スイッチのつまみ（丸い部分） */
.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: .3s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* ON（チェック状態）の時のスタイル */
.toggle-switch input:checked + .slider {
  background-color: #4CAF50; /* 緑色 */
}

.toggle-switch input:checked + .slider:before {
  transform: translateX(20px); /* 右に移動 */
}

/* ラベルテキスト */
.toggle-switch .label-text {
  font-size: 14px;
  color: #eee;
  font-family: sans-serif;
  font-weight: bold;
}

/* ホバー時の反応 */
.toggle-switch:hover .slider {
  background-color: #666;
}
.toggle-switch:hover input:checked + .slider {
  background-color: #5cb85c;
}

/* =========================================
   表示切り替えシステム
   ========================================= */
/* デフォルトではスマホUIを隠す */
.mobile-ui { display: none; }

/* スマホモード時: PC用UIを隠し、スマホUIを表示 */
body.mobile-mode .pc-ui { display: none !important; }
body.mobile-mode .mobile-ui { display: block; }

/* キャンバスのスクロール設定（スマホ用） */
body.mobile-mode #canvas-container {
  margin-top: 0; /* ヘッダーがrelativeになったので自動で下に配置される */
  overflow: hidden; /* ブラウザ標準のスクロールを無効化 */
  touch-action: none; /* ピンチズームなどブラウザのタッチ操作を無効化 */
  justify-content: flex-start;
  align-items: flex-start;
}
body.mobile-mode #canvas-container canvas {
  -webkit-tap-highlight-color: transparent;
}


/* =========================================
   スマホ専用UIのデザイン
   ========================================= */

/* 1. ミニマルヘッダー */
.mobile-header {
  position: relative; /* fixedからrelativeに変更 */
  width: 100%;
  height: 44px;  /* 必要最小限の高さ */
  background: #222; /* 不透明なダークグレー */
  border-bottom: 1px solid #444;
  display: flex;
  align-items: center;
  padding: 0 10px;
  z-index: 1000;
  box-sizing: border-box;
  flex-shrink: 0; /* フレックスボックス内で縮まないようにする */
}

.app-title {
  font-size: 16px;
  font-weight: normal;
  color: #ddd;
  margin: 0;
  margin-left: 15px;
  letter-spacing: 1px;
}

.icon-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  padding: 5px;
  cursor: pointer;
  min-width: auto;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 2. FAB (Floating Action Button) */
.fab-add, .fab-delete {
  position: fixed;
  bottom: 25px;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  border: 2px solid rgba(255,255,255,0.2);
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  z-index: 900;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: white;
  transition: transform 0.2s;
  touch-action: manipulation;
}
.fab-add:active, .fab-delete:active {
  transform: scale(0.9);
}

/* 右下：追加ボタン */
.fab-add {
  right: 25px;
  background: linear-gradient(135deg, #007bff, #0056b3);
}

/* 左下：削除ボタン */
.fab-delete {
  left: 25px;
  background-color: #500 !important;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
  border-color: #a00 !important;
}

.fab-delete:active {
  background-color: #600 !important;
  border-color: #a00 !important;
  transform: scale(0.9);
}

.fab-delete:focus {
  background-color: #500 !important;
  border-color: #a00 !important;
  outline: none;
}

.fab-delete.active {
  background-color: #d00 !important;
  box-shadow: 0 0 15px #f00;
  border-color: #f88 !important;
}

.fab-delete.active:active {
  background-color: #c00 !important;
  border-color: #f88 !important;
  transform: scale(0.85);
}

.fab-delete.active:focus {
  background-color: #d00 !important;
  border-color: #f88 !important;
  outline: none;
}

/* 3. 帯状カルーセルメニュー（プロジェクション投影風デザイン） */
.parts-balloon {
  position: fixed;
  left: 50%; /* 画面中央に配置 */
  transform: translateX(-50%); /* 中央揃え */
  bottom: 100px; /* FABの上に配置 */
  
  /* より半透明の帯デザイン */
  background: rgba(20, 30, 40, 0.5);
  
  border-radius: 4px; /* よりシャープな角丸 */
  padding: 9px 5px; /* 上下のパディングを75%に縮小（12px → 9px） */
  
  /* 上下の光る境界線 */
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  
  /* プロジェクション投影のような光のエフェクト */
  box-shadow: 
    0 -2px 15px rgba(255, 255, 255, 0.3),     /* 上側の白い光 */
    0 2px 15px rgba(255, 255, 255, 0.3),      /* 下側の白い光 */
    0 0 30px rgba(100, 150, 255, 0.2),        /* 全体の青白いグロー */
    0 4px 20px rgba(0, 0, 0, 0.4);            /* 下への影 */
  
  /* 左右フェードアウトマスク（境界線・光・パーツすべてに適用） */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,                    /* 左端：完全に透明 */
    black 12%,                         /* 左から12%：不透明に */
    black 88%,                         /* 右へ88%：不透明を維持 */
    transparent 100%                   /* 右端：完全に透明 */
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 12%,
    black 88%,
    transparent 100%
  );
  
  z-index: 1900;
  opacity: 1;
  transform-origin: bottom center;
  transition: opacity 0.2s cubic-bezier(0.25, 0.8, 0.25, 1),
              transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  touch-action: pan-x; /* 横スクロールを許可 */
  max-width: 100vw; /* 画面いっぱいに広げる */
  width: 100vw; /* 確実に画面幅いっぱいにする */
}

.parts-balloon.hidden {
  opacity: 0;
  transform: translateX(-50%) scale(0.95); /* より微妙なスケール */
  pointer-events: none;
}

/* 吹き出しの矢印は削除（帯デザインには不要） */
.balloon-arrow {
  display: none;
}

.balloon-content {
  position: relative;
  overflow: hidden; /* スクロールバーを隠す親要素 */
}

/* 横スクロール可能なカルーセル形式に変更 */
.parts-grid {
  display: flex;
  flex-direction: row; /* 横並び */
  gap: 12px;
  overflow-x: auto; /* 横スクロール可能に */
  overflow-y: hidden; /* 縦スクロールは無効 */
  padding: 3px 10px; /* 上下のパディングを縮小（5px → 3px） */
  
  /* スクロールバーを隠す（iOS/Android） */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

/* Webkit系ブラウザのスクロールバーを隠す */
.parts-grid::-webkit-scrollbar {
  display: none;
}

.sheet-btn {
  width: 45px;
  height: 45px;
  flex-shrink: 0; /* 縮小しないように */
  background-color: transparent; /* 透明に */
  border: none; /* 枠線を削除 */
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;
  box-shadow: none; /* 影を削除 */
  transition: transform 0.2s;
}

.sheet-btn:active {
  transform: scale(0.9); /* タップ時の反応 */
}

/* 4. ハンバーガーメニュー */
.mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  z-index: 3000;
  display: flex;
  opacity: 1;
  transition: opacity 0.3s;
}
.mobile-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.mobile-menu-content {
  width: 50%;
  max-width: 240px;
  height: 100%;
  background: #222;
  padding: 20px;
  box-shadow: 2px 0 10px rgba(0,0,0,0.5);
  transform: translateX(0);
  transition: transform 0.3s;
}
.mobile-overlay.hidden .mobile-menu-content {
  transform: translateX(-100%);
}

.menu-header {
  font-size: 20px;
  font-weight: bold;
  border-bottom: 1px solid #444;
  padding-bottom: 15px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 15px;
  margin-bottom: 10px;
  background: #333;
  border: none;
  border-radius: 8px;
  color: #eee;
  font-size: 16px;
}
.menu-item:active {
  background: #444;
}

/* スマホメニューのシェアボタン（PC版の緑色に合わせる） */
#btn-mobile-share {
  background-color: #2e5e30 !important; /* PC版と同じ緑 */
  border: 2px solid #4a8a4d !important; /* 枠線を追加 */
  
  /* 立体感（影）の調整 */
  box-shadow: 
    inset 0 0 10px rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* タップした時の色（濃い緑） */
#btn-mobile-share:active {
  background-color: #1e3e20 !important;
  border-color: #3a6a3d !important;
  box-shadow: 
    inset 0 0 15px rgba(0, 0, 0, 0.8),
    0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* スマホメニューのリセットボタン */
.menu-item.reset-btn {
  background: #8b6914 !important;
  border: 2px solid #d4a017 !important;
  box-shadow: 
    inset 0 0 8px rgba(0, 0, 0, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.menu-item.reset-btn:active {
  background: #6d5510 !important;
  box-shadow: 
    inset 0 0 12px rgba(0, 0, 0, 0.7),
    0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.menu-label {
  font-size: 14px;
  color: #aaa;
  margin-bottom: 10px;
  margin-top: 20px;
}

/* モバイル用トグルスイッチの間隔調整 */
.mobile-toggle {
  margin-bottom: 15px; /* トグルスイッチ間の余白を追加 */
}

.mobile-toggle:last-child {
  margin-bottom: 0; /* 最後の要素は下マージン不要 */
}

/* ★共通: 削除マークのベーススタイル */
.delete-mark-base {
  box-sizing: border-box;
  background: rgba(255, 0, 0, 0.1);
  border: 4px solid #ff0000;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
  
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* マウスイベントを透過（重要） */
  
  transition: opacity 0.1s, transform 0.1s;
}

/* ★共通: ×印 */
.delete-mark-base::after {
  content: "×";
  font-family: sans-serif;
  font-weight: bold;
  font-size: 40px;
  color: #ff0000;
  line-height: 1;
  text-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
  padding-bottom: 6px;
}

/* ★追加: ターゲットにスナップした時は、カーソルの「枠」を消す（中身の×は残る） */
.delete-mark-base.target-snapped {
  border-color: transparent;    /* 枠線を透明に */
  background-color: transparent; /* 背景を透明に */
  box-shadow: none;             /* 影を消す */
}

/* オプション: スナップ時は×印を少し大きく強調する */
.delete-mark-base.target-snapped::after {
  transform: scale(1.2);
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
}

/* スマホ版削除カーソルの枠にも同じスナップ効果を適用 */
.delete-cursor-frame.target-snapped {
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
}

/* スマホ版のスナップ時の×印強調 */
.delete-cursor-frame.target-snapped .delete-cursor-x {
  transform: scale(1.2);
  text-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
  transition: transform 0.2s ease;
}

/* PC用ハイライト（初期状態は非表示） */
#pc-delete-highlight {
  position: fixed;
  z-index: 2000;
  display: none;
  /* ★追加: 位置とサイズの変更を滑らかにする */
  transition: left 0.1s cubic-bezier(0.2, 0.8, 0.2, 1), 
              top 0.1s cubic-bezier(0.2, 0.8, 0.2, 1), 
              width 0.1s, height 0.1s;
}
#pc-delete-highlight.visible {
  display: flex;
}

/* 5. 削除カーソル（スマホ専用） */
.delete-cursor {
  position: fixed;
  z-index: 2500;
  pointer-events: all;
  opacity: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  /* ★追加: スマホ版カーソルも滑らかに移動 */
  transition: left 0.1s cubic-bezier(0.2, 0.8, 0.2, 1), 
              top 0.1s cubic-bezier(0.2, 0.8, 0.2, 1), 
              opacity 0.2s;
}

.delete-cursor.hidden {
  opacity: 0;
  pointer-events: none;
}

/* 削除カーソルの枠（スマホ専用、共通スタイルを継承） */
.delete-cursor-frame {
  width: 80px;
  height: 80px;
  /* 装飾は .delete-mark-base に任せる */
}

/* delete-mark-base の × を非表示（スマホ版は独自の×を使う） */
.delete-cursor-frame::after {
  content: none;
}

/* バツマーク（スマホ専用の×表示） */
.delete-cursor-x {
  font-size: 48px;
  font-weight: bold;
  color: #ff0000;
  line-height: 1;
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
  pointer-events: none;
}

/* グラブハンドル */
.delete-cursor-handle {
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #444, #222);
  border: 2px solid #666;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  cursor: grab;
  pointer-events: all;
  touch-action: none;
  transition: all 0.2s ease;
}

.delete-cursor-handle:active {
  cursor: grabbing;
  background: linear-gradient(135deg, #555, #333);
  transform: scale(0.95);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

/* ハンドルのアイコン */
.handle-icon {
  font-size: 24px;
  font-weight: bold;
  color: #aaa;
  line-height: 1;
  letter-spacing: -2px;
  pointer-events: none;
  user-select: none;
}

/* ★追加: PC用ズームコントロール */
.zoom-controls {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #222;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 8px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1000;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
  color: #eee;
}

.zoom-controls input[type="range"] {
  width: 120px;
  cursor: pointer;
}

.zoom-icon {
  font-weight: bold;
  font-size: 18px;
  color: #aaa;
  user-select: none;
}

#zoom-value {
  font-size: 14px;
  width: 45px;
  text-align: right;
  font-variant-numeric: tabular-nums; /* 数字の幅を等幅にする */
}