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

.bl_menu_wrapper {
  background-color: #5a4d3e;
  font-size: 1.0em;
  font-family: 'nsjp';
}


@media (max-width: 35em) {

  .bl_menu_wrapper {
    background-color: #5a4d3e;
  }

}


.bl_menu {
  cursor: pointer;
}


.bl_menu_r {
  
}


.bl_menu_list {
  background-color: #6f3b23;
/*  border-width: medium;
  border-color: #5a2122;*/
  font-size: 1.0em;
  font-weight: bold;

}


.bl_menu_list > .bl_menu_item {
  background-color: #9c5f3f;
  /*margin-top: 0.4em;*/
  color: #FFFFFF;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
}

.bl_menu_list > .bl_menu_item:hover {

  color: #f0b070;

}


/* View メニューの見出し（Canvas Area）。選べる項目ではないので
   ホバーで色が変わらないよう、明るさを落として区別する */
.bl_menu_list > .bl_menu_item__heading {
  background-color: #6f3b23;
  color: #cfa07c;
  cursor: default;
  font-size: 0.85em;
  letter-spacing: 0.08em;
}

.bl_menu_list > .bl_menu_item__heading:hover {
  color: #cfa07c;
}

.bl_menu_btn {
  cursor: pointer;
  color: #e8b98a;
  font-size: 1.0em;
  font-weight: bold;
  font-family: 'nsjp';
}

.bl_menu_btn:hover {
  color: #f7e0c0;

}

#menu_back_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
}

#menu_back_btn .menu_back_icon {
  width: 20px;
  height: 20px;
  color: #e8b98a;
  transition: transform 0.2s ease, color 0.2s ease;
}

#menu_back_btn:hover .menu_back_icon {
  color: #f7e0c0;
  transform: translateX(-3px);
}

/* 狭い画面（35em 以下）ではメニューバーが left:0 から始まり、左上ロゴ（幅 69px）の下に入る。
   他のボタンは下の .ly_menu_btn の padding-left:4rem でロゴを避けているが、戻るボタンは
   上の #menu_back_btn の padding（ID 指定で優先される）がそれを打ち消し、ロゴと重なっていた
   （教材をモバイルの縦画面で開いたとき）。同じ 4rem の左余白でロゴの右へ出す。
   モバイル編集モードは mobile.css の .is-mobile-edit #menu_back_btn が優先されるので変わらない。 */
@media (max-width: 35em) {
  #menu_back_btn {
    padding-left: 4rem;
  }
}


@media (max-width: 35em) {
  .bl_menu_btn {
    cursor: pointer;
    color: #e8b98a;
    font-size: 1.5em;
  }  
}



.source_openfile {

  display: inline-block;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  /*outline: none;*/
  /*color: #fff;*/
  background-color: #8a7565;
  border: none;
  font-family: 'nsjp';


}


.source_loadfile {

  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 4px;
  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: 1em;
  font-weight: 700;
  height: 30px;
  
}

.source_loadfile:hover {

  background-color: #e0577f;
  
}



.bl_menu_login {



}


.bl_menu_login a{

  color: #a7cf82;

}


.bl_menu_login a:hover{

  color: #dd5555;

}


.bl_menu_logout {




}


.bl_menu_logout button {
  font-size: 16px;
  font-family: 'nsjp';
  font-weight: 900;
  color: #a7cf82;
  text-align: center;
  text-decoration: none;
  outline: none;
  border: none;
  background: transparent;
}


.bl_menu_logout button:hover {

  color: #dd5555;

}


.bl_menu_loginFlag {

  text-decoration: none;


}

.bl_menu_loginFlag input {
  background: transparent;
  color: #ece0cf;

}



.bl_menu_sns a{

  color: #a99e88;


} 



.bl_menu_dispAttrBox {
  cursor: pointer;
  color: #d98aa6;
  font-size: 1.0em;
  font-weight: bold;
  font-family: 'nsjp';

}


.bl_menu_dispAttrBox:hover {

  color: #ffc2d5;

}


.bl_menu_articleList {
  cursor: pointer;
  color: #d98aa6;
  font-size: 1.0em;
  font-weight: bold;
  font-family: 'nsjp';

}


.bl_menu_articleList:hover {

  color: #ffc2d5;

}



#menu_r_btn {


}


.ly_menu {
  display: inline-block;
  margin-left:  0.5em;
}


.ly_menu_seperatingline {
  height: 16px;
}


.ly_menu_item {
  display: flex;
  padding-left: 12px;
  padding-right: 12px;
}


.ly_menu_wrapper {
  left: 69px;
  width: 100%;
  position: relative;
  z-index: 10;
  display: flex;
  height: 32px;
}


@media (max-width: 35em) {
  .ly_menu_wrapper {
    left: 0%;
    width: 100%;
    position: relative;
    z-index: 2;
    display: flex;
    height: 3.0em;
  }  
}




.ly_menu_list {

  padding: 16px 16px 20px 16px;
  position: absolute;
  z-index: 10;

}


.ly_menu_list_create {

  left: 100px;
  
}



.ly_menu_list_source {


}



/* View メニュー（Canvas Area）。機種名は長いので折り返さず、
   一覧が縦に伸びても画面内で送れるようにしておく */
.ly_menu_list_view {

  white-space: nowrap;
  max-height: 70vh;
  overflow-y: auto;

}




.ly_menu_btn {
  vertical-align: top;
  display: inline-block;
  line-height: 32px;
  padding: 0 20px;

}


@media (max-width: 35em) {

  .ly_menu_btn {
    display: inline-block;
    line-height: 2rem;
    padding: 0;
    padding-top: 0.5rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 4rem;
  }

}



.ly_menu_r {
  display: inline-block;

  position: absolute;
  right: 5em;
}




.ly_menu_login {

  margin-right: 6em;
}


.ly_menu_login a{


  padding-left:  1em;
  padding-right: 1em;
  margin-right:  1em;
}


.ly_menu_logout {

  margin-right: 6em;
}


.ly_menu_logout button{


  margin-left:  8.5em;

}



.ly_menu_loginFlag {




}


.ly_menu_loginFlag input {


}


.ly_menu_sns {

  margin-top: 1px;
  padding: 0 50em 0 0;

  vertical-align: top;
  display: inline-block;
  line-height: 32px;
  padding: 0 20px;
}



.ly_menu_dispAttrBox {

  margin-top: 1px;
  padding: 0 200px 0 0;

  vertical-align: top;
  display: inline-block;
  line-height: 32px;
  padding: 0 20px;

}





.ly_menu_articleList {

  margin-top: 1px;
  padding: 0 50em 0 0;

  vertical-align: top;
  display: inline-block;
  line-height: 32px;
  padding: 0 20px;
}







/* ------------------------------------------------------------------ */
/* < 表示言語スイッチ（En / Jp / Kr） >                                 */
/* JS（ui/LangSwitch.mjs）がメニューバーへ動的に差し込むボタン群。       */
/* Root と揃えた暖色アースカラーに調和させている。                       */
/* ------------------------------------------------------------------ */

/* メニューバー右側ブロック（.bl_menu_r）の中、Layers の左に並べる。
   隣の .ly_menu_dispAttrBox が vertical-align:top の inline-block なので、
   同じ基準で揃うよう vertical-align を指定する。 */
.bl_menu_lang {
  display: inline-flex;
  align-items: center;
  vertical-align: top;
  height: 32px;
  line-height: 32px;
  margin-right: 0.8em;
}

.bl_menu_lang_btn {
  /* ly_menu_btn の広いパディングを上書きし、小さめの3連ボタンにする */
  padding: 0 8px;
  margin: 0 1px;
  min-width: 1.6em;
  text-align: center;
  color: #cba985;
  border-radius: 4px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.bl_menu_lang_btn:hover {
  color: #f7e0c0;
  background-color: #6b5c48;
}

/* 現在アクティブな言語のボタン */
.bl_menu_lang_btn.is_active {
  color: #ffffff;
  background-color: #9c5f3f;
}

.bl_menu_lang_btn.is_active:hover {
  color: #ffffff;
  background-color: #b06e49;
}

/* ------------------------------------------------------------------ */
/* < 現在修正中の JSON ファイル名 >                                      */
/* メニューバー右側ブロック（.bl_menu_r）の中、言語スイッチの左に置く。   */
/* 補助情報なので、Layers / Attributes より控えめな見た目にする。         */
/* ------------------------------------------------------------------ */
.bl_menu_filename {
  display: inline-block;
  vertical-align: top;
  height: 32px;
  line-height: 32px;
  margin-right: 0.9em;
  padding: 0 8px;

  font-size: 0.72em;
  color: #a8916f;

  /* 長いファイル名でメニューバーが崩れないようにする（全体は title 属性で確認） */
  max-width: 16em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* 属性パネル：現在編集中の言語ラベル（TEXT AREA 見出し横） */
.bl_attr_lang_current {
  margin-left: 0.4em;
  font-size: 0.85em;
  font-weight: normal;
  color: #d98aa6;
}


@media (max-width: 35em) {

  .bl_menu_lang_btn {
    font-size: 1.2em;
    padding: 0 6px;
  }

  /* 狭い画面ではメニューバーの幅を言語スイッチに譲る */
  .bl_menu_filename {
    max-width: 7em;
    margin-right: 0.4em;
    padding: 0 4px;
  }

}


@media (max-width: 35em) {

  .ly_menu {

    font-size: xx-small;




  }

  .ly_menu_r {

    display: inline-block;
    font-size: xx-small;
    margin-top: 3rem;
    right: unset;

  }


  .ly_menu_dispAttrBox {
      color: chocolate;


  }


  .bl_menu_dispAttrBox:hover {
      color: chocolate;
      

  }


}