*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #f5f4f0;
  color: #1a1a1a;
  min-height: 100vh;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
}

.container { max-width: 1000px; margin: 0 auto; flex: 1; width: 100%;}
h1 { font-size: 26px; font-weight: 700; margin-bottom: 0.25rem; color: #333; }
.subtitle { font-size: 14px; color: #666; margin-bottom: 2rem; }

.panel {
  background: #ffffff; border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px; padding: 1.5rem; margin-bottom: 1.25rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}
.panel-title {
  font-size: 12px; font-weight: 700; color: #888;
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem;
}

/* アップロード枠 */
.drop-zone {
  border: 2px dashed rgba(0,0,0,0.15); border-radius: 12px;
  padding: 3rem 1rem; text-align: center; cursor: pointer; transition: background 0.15s;
}
.drop-zone:hover, .drop-zone.drag-over { background: #f8f9fa; border-color: #4a7ce8; }
.drop-zone-icon { font-size: 40px; margin-bottom: 0.75rem; }
.drop-zone p { font-size: 14px; color: #555; margin-top: 4px; }
#file-input { display: none; }

/* コントロール群 */
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 600px) { .controls { grid-template-columns: 1fr; gap: 1rem;} }
.ctrl-group label { display: block; font-size: 13px; color: #444; margin-bottom: 8px; font-weight: 700;}

.toggle-btns { display: flex; gap: 6px; }
.toggle-btn {
  flex: 1; padding: 8px 10px; font-size: 13px;
  border: 1px solid rgba(0,0,0,0.15); border-radius: 8px;
  background: #fff; color: #333; cursor: pointer; transition: all 0.15s ease; font-weight: 500;
}
.toggle-btn:hover { background: #f5f4f0; }
.toggle-btn.active { background: #e8f0fe; border-color: #4a7ce8; color: #1a4ec2; font-weight: 700; }

/* エディタワークスペース */
.editor-workspace { display: flex; flex-direction: column; gap: 1rem; }

/* ツールバー */
.editor-toolbar {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  background: #f8f9fa; padding: 12px; border-radius: 12px; border: 1px solid #eee;
}

.toolbar-group { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;}
.tool-label { font-size: 11px; font-weight: bold; color: #888; margin-right: 4px; }

.tool-btn {
  padding: 8px 12px; font-size: 13px; border: 1px solid #ddd; border-radius: 8px;
  background: #fff; cursor: pointer; transition: 0.1s; font-weight: bold; color: #444;
  display: flex; align-items: center; gap: 4px; white-space: nowrap;
}
.tool-btn:hover { background: #f0f0f0; }
.tool-btn.active { background: #4a7ce8; color: #fff; border-color: #4a7ce8; }
.tool-btn.undo-btn { background: #fff; color: #333; }
.tool-btn.undo-btn:hover { background: #ffebee; border-color: #ffcdd2; color: #d32f2f; }

/* パレット */
.palette { 
  display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; 
  background: #fff; border-radius: 8px; border: 1px solid #ddd; 
  justify-content: center; align-items: center;
}
.color-swatch {
  border-radius: 50%; border: 1px solid rgba(0,0,0,0.15);
  cursor: pointer; transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative;
  flex-shrink: 0; /* 横スクロール時に潰れないようにする */
}
.color-swatch.used { width: 32px; height: 32px; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.color-swatch.unused { width: 18px; height: 18px; opacity: 0.6; }
.color-swatch:hover { transform: scale(1.2); z-index: 2; opacity: 1;}
.color-swatch.selected { border: 2px solid #fff; box-shadow: 0 0 0 3px #1a4ec2; transform: scale(1.2); z-index: 2; opacity: 1;}
.eraser-btn { display: flex; align-items: center; justify-content: center; font-size: 16px; background: #fff; border: 2px dashed #aaa;}

/* キャンバスエリア */
.editor-main {
  width: 100%; height: 60vh; min-height: 400px;
  background: #e8e8e8; border: 1px solid #ddd; border-radius: 12px;
  display: flex; align-items: flex-start; justify-content: center; 
  overflow: auto; padding: 2rem; position: relative; 
}

/* フローティングUI */
.floating-controls { position: absolute; left: 1rem; display: flex; flex-direction: column; gap: 8px; z-index: 10; }
.floating-top { top: 1rem; }
.floating-bottom { bottom: 1rem; }

.floating-panel {
  background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(4px);
  border: 1px solid rgba(0,0,0,0.1); border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); display: flex; flex-direction: column; overflow: hidden;
}
.float-btn {
  border: none; background: transparent; cursor: pointer;
  font-size: 16px; padding: 10px 12px; font-weight: bold; color: #444; transition: 0.1s;
}
.float-btn:hover { background: rgba(0,0,0,0.05); }
.float-btn:active { background: rgba(0,0,0,0.1); }
.zoom-val-display { font-size: 12px; font-weight: bold; text-align: center; padding: 4px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; color: #666;}

.btn-fullscreen {
  background: rgba(30, 30, 30, 0.8); color: #fff; border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.2); box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  display: flex; align-items: center; gap: 6px; font-size: 13px;
}
.btn-fullscreen:hover { background: rgba(0, 0, 0, 0.9); color: #fff;}

/* キャンバス本体 */
#dot-canvas { cursor: crosshair; display: block; margin: 0 auto; max-width: 100%; max-height: 100%; object-fit: contain; }

/* フルスクリーン時のスタイル */
#editor-workspace:fullscreen { background: #f5f4f0; padding: 1rem; margin: 0; width: 100vw; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
#editor-workspace:-webkit-full-screen { background: #f5f4f0; padding: 1rem; width: 100vw; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
#editor-workspace:fullscreen .editor-main { flex: 1; min-height: 0; height: auto;}
#editor-workspace:-webkit-full-screen .editor-main { flex: 1; min-height: 0; height: auto;}

/* 元画像（極小） */
.orig-preview { display: flex; align-items: center; gap: 8px; background: #fff; padding: 4px 8px; border-radius: 8px; border: 1px solid #ddd;}
#orig-canvas { width: 40px; height: auto; border: 1px solid #eee; border-radius: 4px; }

/* リッチなダウンロードボタン */
.actions { display: flex; flex-direction: column; gap: 12px; margin-top: 2rem; align-items: center; }
.btn-large {
  width: 100%; max-width: 400px; padding: 14px 24px; font-size: 16px; font-weight: bold;
  border: none; border-radius: 12px; cursor: pointer; transition: all 0.2s ease;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-large:active { transform: translateY(2px); }
.btn-primary { background: #4a7ce8; color: #fff; box-shadow: 0 4px 12px rgba(74,124,232,0.3); }
.btn-primary:hover { background: #3b66c4; box-shadow: 0 6px 16px rgba(74,124,232,0.4); }
.btn-success { background: #34a853; color: #fff; box-shadow: 0 4px 12px rgba(52,168,83,0.3); }
.btn-success:hover { background: #2b8c46; box-shadow: 0 6px 16px rgba(52,168,83,0.4); }
.btn-text { background: transparent; color: #888; font-size: 13px; text-decoration: underline; border: none; padding: 8px; cursor: pointer; }
.btn-text:hover { color: #d32f2f; }

/* フッター */
.site-footer { margin-top: 3rem; padding: 1.5rem; text-align: center; border-top: 1px solid rgba(0,0,0,0.1); color: #666; font-size: 12px; line-height: 1.6;}
.site-footer strong { display: block; margin-bottom: 8px; color: #444; font-size: 13px;}

/* ーーーーーーーーーーーーーーーーー
   スマホ（SP）用 超・最適化レイアウト
ーーーーーーーーーーーーーーーーー */
@media (max-width: 768px) {
  body { padding: 1rem 0.5rem; }
  .panel { padding: 1rem; }
  
  /* ツールバーの余白を削る */
  .editor-toolbar { padding: 8px; gap: 8px; }
  .toolbar-group { width: 100%; justify-content: space-between; gap: 4px; }
  
  /* ボタンテキストを縮小して1行に収める */
  .tool-btn { padding: 8px 4px; font-size: 12px; flex: 1; justify-content: center; letter-spacing: -0.5px;}
  .tool-btn.undo-btn { flex: 0 0 auto; padding: 8px 12px; }
  
  /* パレットの横スクロール化（段落ち防止） */
  .palette {
    flex-wrap: nowrap; /* 段落ちさせない */
    overflow-x: auto;  /* 横スクロール可能に */
    justify-content: flex-start;
    padding: 10px 4px;
    -webkit-overflow-scrolling: touch; /* 滑らかなスクロール */
  }
  
  /* スクロールバーのデザイン（スマホでも分かりやすく） */
  .palette::-webkit-scrollbar { height: 4px; }
  .palette::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
  
  /* フローティングボタンの微調整 */
  .floating-controls { left: 0.5rem; }
  .floating-top { top: 0.5rem; }
  .floating-bottom { bottom: 0.5rem; }
  .editor-main { padding: 1rem 0.5rem; }
}