/* =========================================
   サークルカットメーカー 改修レイアウト
========================================= */
/* 左右2分割にするフレックスボックス */
.cc-layout {
  display: flex;
  gap: 40px;
  margin-top: 30px;
  align-items: flex-start;
}

/* 左側：ボタン群のエリア */
.cc-controls {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* 立体ボタンの厚み(afterの飛び出し)を考慮して、ボタンの隙間を少し広めに設定 */
  gap: 28px; 
}

/* ボタンの横幅をすべて統一して綺麗に揃える */
.cc-controls .link-button a {
  max-width: 240px; /* ボタンの文字長に合わせてお好みで調整してください */
  width: 100%;
}

/* 右側：プレビュー（Canvas）エリア */
.cc-preview {
  flex: 1;
  display: flex;
  justify-content: center;
}

/* 内部解像度(870x1001)を維持したまま、CSSで見た目だけを小さくする */
#canvas {
  width: 100%;
  max-width: 360px; /* 画面上のプレビューサイズ */
  height: auto;
  border: 2px solid #ccc;
  background-color: #f5f5f5;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-radius: 6px;
}

/* スマホなどの縦長画面では、2分割を解除して縦並びにする */
@media screen and (max-width: 767px) {
  .cc-layout {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
  .cc-controls .link-button a {
    max-width: 100%;
  }
}