/*
 * ===============================================
 *
 * RAMAA Engine (Real-time Animated Media Application Apparatus)
 * by Gounbeee 2021 - 2026
 *
 * License ： CC BY-NC-SA (Attribution-NonCommercial-ShareAlike)
 *
 * このプロジェクトは、Gounbeeeから作成され、個人的な利用、改変が可能です。
 * 改変時、このライセンス表記を残す義務があり、改変後の作成物が本ソフトと同じライセンスを継承します。
 *
 * ===============================================
 */




/* RAMAAのメイン背景色 */
.bl_workarea {
  background-color: #d8cbb8;


}

.bl_presentationarea {
  background-color: #c9bda9;


}

.bl_svgcanvas {
  background-color: #2b2620;

}



.ly_workarea {
  display: block;
  position: absolute;
  z-index: 1;

  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;

}


/* StateEditting が #allArea 直下に置くオーバーレイSVG。
   静的フローに置かれるため上部メニュー（32px）ぶん下へずれ、画面高いっぱいの
   高さと合わさって文書が縦に 36px はみ出し、ページ全体がスクロールしていた。
   絶対配置で workarea と原点を揃え、フローから外す。 */
#svgcanvas_overlay {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* 閲覧・ファイルロード時にキャンバス全域を覆い、オブジェクト選択・ドラッグ移動を不可にし、
   キャンバス全体のスムーズなスクロール（パン・ズーム）を可能にする透明Dragパッド */
#transparent_drag_pad {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: none;
  cursor: grab;
  touch-action: none;
}
#transparent_drag_pad:active {
  cursor: grabbing;
}



/* svg は inline 要素なのでベースライン下に約4pxの余白が生まれ、
   コンテナ div が画面高より高くなってしまう。ブロック化して打ち消す。 */
#svgcanvas {
  line-height: 0;
  overflow: hidden;      /* 四隅マーカー等がレイアウト幅を押し広げないように */
  max-width: 100%;
}

#svgcanvas > svg {
  display: block;
  max-width: 100%;
}

/* 四隅マーカー（#canvas_markers）は設計上わざと領域の外へ腕を伸ばす。
   iOS Safari ではこれがレイアウトビューポートを広げ、`width:100%` の要素が
   可視幅より広くなる原因になり得るため、明示的にクリップする。 */
#canvas_dom {
  overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* 現在のズーム率を出すフロート表示（#rm_zoom_indicator）             */
/*                                                                    */
/* JS(ui/ZoomIndicator.mjs) が #workarea の子として置き、left/top を   */
/* 「見えている範囲」の実測値から流し込む（＝上部メニューに隠れない）。*/
/* SVG の中ではなく HTML 側なので viewBox のパン・ズームに巻き込まれず、*/
/* 常に同じ位置・同じ文字サイズで表示される。                          */
/*                                                                    */
/* pointer-events:none は必須。キャンバスのドラッグ（パン）や          */
/* オブジェクト選択を絶対に邪魔しないこと。                            */
/* ------------------------------------------------------------------ */
.bl_zoomIndicator {
  position: absolute;
  z-index: 7;                 /* BoundingBox(8) より下・キャンバスより上 */

  pointer-events: none;
  user-select: none;

  padding: 2px 8px;
  border: 1px solid #5a5142;
  border-radius: 4px;

  background-color: rgba(58, 51, 43, 0.82);
  color: #e8d9c5;

  font-family: 'nsjp', monospace;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  white-space: nowrap;
}


.ly_presentationarea {
  display: block;
  position: absolute;
  z-index: 1;

  top: 10%;
  left: 20%;
  width: 60%;
  height: 60%;

}

.ly_svgcanvas {

}