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

.modal {
  background: rgba(60,40,40,0.6);
  color: #a99e88;
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  font-size: 16px;
  line-height: 150%;
  overflow: -moz-scrollbars-vertical; 
  overflow-y: scroll;

}



.modal_btn_yesorno {
/*  padding-left: 25px;
  padding-right: 25px;
  padding-top: 15px;
  padding-bottom: 15px;*/
  display: inline-block;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: none;
  background-color: #6b5c48;
  border: none;
  font-family: 'nsjp';
  color: #ed91b0;
  font-size: 1.5em;
  font-weight: 700;

  margin-top: 1em;
  margin-right: 1em;
  width: 3.5em;
  height: 3em;
}

.modal_btn_yesorno:hover {
  background-color: #8a7a62;

}


.modal.hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}


/* ------------------------------------------------------------------
   小さめモーダル（画面中央のカード）

   既定の .modal-item は height:100% のため、内容が少なくても画面全体を
   占有しているように見えてしまう。このバリエーションでは中身の分だけの
   高さを持つカードにする。
   枠外（オーバーレイ）クリックで閉じる挙動は ModalBox 側が担当。
   ------------------------------------------------------------------ */

.modal.modal_compact {
  /* 全画面スクロールバーを出さない（カードは中身の高さで収まる） */
  overflow-y: auto;
  background: rgba(30, 24, 22, 0.62);
}

.modal.modal_compact .modal-item {
  box-sizing: border-box;
  height: auto;
  width: auto;
  max-width: 26em;
  padding: 1.8em 2em 1.6em;
  background-color: #3b332c;
  border: 1px solid #6f5c48;
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  text-align: center;
  cursor: default;
}

.modal.modal_compact .modal-item h1 {
  margin: 0;
  font-size: 1.15em;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: #f0b070;
}

.modal.modal_compact .modal_desc {
  margin: 0.9em 0 0;
  font-size: 0.92em;
  line-height: 1.6;
  color: #a99e88;
}

.modal.modal_compact .modal_actions {
  display: flex;
  justify-content: center;
  gap: 0.8em;
  margin-top: 1.6em;
}

.modal.modal_compact .modal_btn_yesorno {
  margin: 0;
  width: auto;
  min-width: 6em;
  height: 2.6em;
  font-size: 1em;
  border-radius: 4px;
}

.modal-item {
  height: 100%;
  
}



.modal-item.modal-item-wide {
  max-width: none;
  width: 900px;
}

.modal-item.modal-item-source {
  height: 504px;
  max-width: none;
  width: 704px;
}

.modal h1 {
  margin-top: 3em;
  color: #a99e88;
  margin-left: 1em;
}


.modal_box_about {
  color: #ece0cf;
/*  position: relative;
  border-radius: 4px;
  padding: 48px;
  margin: 32px;
  width: 100%;*/

}

.modal_box_about h1 {

  color: #ece0cf;
  margin-left: 0;

}