@charset "UTF-8";

/* =========================
   favicon.css（D&D専用版）
   ========================= */

/* アプリ本体の内側余白（←これが左端くっつき対策の本命） */
.appBody {
  padding: 0 16px 16px 16px; /* 上 右 下 左 */
  /* 上は0のままでOK。必要なら 8px などにしても良い */
}

/* ドロップエリア */
.dropZone {
  border: 2px dashed #6cc8f7;
  border-radius: 18px;
  background: #ffffff;
  padding: 26px 18px;
  text-align: center;
  color: #333;
  outline: none;
  user-select: none;

  font-size: 15px;

  /* appBodyに左右paddingを入れたので、左右marginは不要（上だけ空ける） */
  margin-top: 12px;

  box-shadow: inset 0 0 0 4px rgba(108, 200, 247, 0.15);
  transition: background 0.15s ease, border-color 0.15s ease;
}

/* ドラッグ中 */
.dropZone.isOver {
  background: #e8f6ff;
  border-color: #2da9e3;
  box-shadow: inset 0 0 0 4px rgba(45, 169, 227, 0.18);
}

/* プレビュー枠：中身が飛び出さないように */
.previewWrap {
  overflow: hidden;
  margin-top: 16px;
  padding-top: 12px; /* ここで「プレビュー（実寸）」の上を空ける */
}

/* ラベル */
.previewLabel {
  font-weight: normal;
  margin-bottom: 10px;
}

/* 実寸表示のまま並べるなら「横スクロール」が最適 */
.previewGrid {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px; /* スクロールバーの余白 */
}

/* 各プレビューは縮まない（実寸のcanvas幅を尊重） */
.previewItem {
  flex: 0 0 auto;
}

.previewSize {
  font-size: 12px;
  margin-bottom: 8px;
  opacity: 0.85;
}

/* canvasをブロック化（余計な隙間対策） */
.previewItem canvas {
  display: block;
}

/* 状態テキスト */
.statusText {
  margin-top: 12px;
  font-size: 13px;
  opacity: 0.85;
}

/* ボタン行 */
.btnRow {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  margin-bottom: 8px; /* appBodyのpadding-bottomが効くので控えめでOK */
}

/* disabledボタンの見た目（button-1が既にある前提で補助） */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}