/* キャンバスレイアウト */
.viewport-area {
  flex: 1;
  position: relative;
  overflow: hidden;
  background-color: var(--kaku-bg-primary);
  pointer-events: none;
  /* トレースパネル連携: リフロー時のスムーズなアニメーション */
  transition: width 0.3s ease-out, height 0.3s ease-out;
}

#viewport {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  touch-action: none; /* ブラウザ標準のパン・ズームを無効化 */
}

#canvasContainer {
  position: relative;
  transform-origin: center center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
  pointer-events: auto;
}

#mainCanvas {
  display: block;
  image-rendering: pixelated;
  touch-action: none; /* スタイラス/タッチで描画時のスクロール防止 */
}

/* 無限キャンバスモード用レイアウト固定 */
#canvasContainer.infinite-mode {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 10 !important;
  transform: none !important;
  box-shadow: none !important;
}

.viewport-area.infinite-active {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

/* 市松模様背景（正方形）- canvasContainerに適用 */
#canvasContainer.bg-transparent {
  background-color: var(--check-1);
  background-image: conic-gradient(
    var(--check-2) 0.25turn,
    transparent 0.25turn 0.5turn,
    var(--check-2) 0.5turn 0.75turn,
    transparent 0.75turn
  );
  background-size: 2px 2px;
  background-position: 0 0;
  image-rendering: pixelated;
}

/* 白紙モード - canvasContainerに適用 */
#canvasContainer.bg-paper {
  background: var(--kaku-canvas-bg) !important;
  background-image: none !important;
}

/* 対称モード用の中心ガイド線 */
.show-mirror-line::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  /* 1px幅を維持しつつ、ズーム縮小時(90%等)の消失を防ぐための設定 */
  width: 1px;
  background-color: var(--kaku-accent-primary);
  /* 
     偶数幅の画面（多くのスマホ）でぼやけるのを防ぐため、translateX(-50%) を廃止。
     これによって境界線がピクセルに一致しやすくなり、100%での「掠れ・ボヤケ」を解消します。
  */
  transform: none;
  /* 
     90%ズーム時に1px未満になって消えないよう、box-shadowで0.5px分の「厚み」を補強。
     これにより縮小時でもブラウザが描画を維持しやすくなります。
  */
  box-shadow: 0 0 0 0.5px var(--kaku-accent-primary);
  z-index: 15;
  pointer-events: none;
  opacity: 1; /* 視認性を最大化 */
}

/* 
   無限キャンバスモードではパン（移動）が可能なため、画面中央 50% 固定の CSS 線は無効化し、
   エンジンが描画する座標追従型のガイド線のみを表示する
*/
#canvasContainer.infinite-mode.show-mirror-line::before {
  display: none;
/* 
   無限キャンバスモード（および初期化中）では、パン（移動）が可能なため、
   画面中央 50% 固定の CSS 線は無効化し、エンジンが描画する座標追従型のガイド線のみを表示する。
   infinite-mode-preparing も対象にすることで、非同期 init 完了前の二重表示を防ぐ。
*/
#canvasContainer.infinite-mode.show-mirror-line::before,
#canvasContainer.infinite-mode-preparing.show-mirror-line::before {
  display: none;
}
#canvasContainer.pan-mode.panning {
  cursor: grabbing;
}