/* セカンドバーのメニュー類：RPGのメニュー選択風

   扱っているのは次の3つ。

   1. 各パネル先頭の見出しリンク（Profile / Event Calendar / Comment＆Gallery / Bookmark）
      ウィンドウの見出しに見立てた枠付きの見た目にする

   2. Bookmark パネルのリンク一覧
      「選択できるメニュー項目」に見立て、ホバーで▶カーソルが出て色が反転する

   3. Event Calendar のイベント一覧
      2と同じ挙動。ただし背景が明るいため反転の向きを変えている

   詳細度: style2.css の `.sidebar_nav ul li a:hover`（背景色・1.6秒の変化）を
   上回る必要があるため、クラス3つ以上のセレクタにしている。
   本ファイルは style2.css より後に読み込むこと */

:root {
  --link-dark: #212529;
  --link-line: #fff;
  --link-yellow: #f7d51d;
}

/* 各パネル先頭の見出しリンクをウィンドウの見出しに見立てる。
   対象は Profile / Event Calendar / Comment＆Gallery / Bookmark の4つ。
   Update情報のパネルは先頭がリンクではないため対象外になる */
.sidebar_nav .sidebar_2ndnav > li:first-child > a {
  /* アイコンと文字を縦中央でそろえる。
     並べただけ（display:block）だと文字の下端を基準に並ぶため、
     Font Awesome のアイコンと Press Start 2P の文字で高さの取り方が違い、
     アイコンが3px下がって見えていた（実測）。
     サイドバーの項目（Update Information 等）は既に同じ指定で
     そろえてあり、見出しだけが取り残されていた */
  display: flex;
  align-items: center;
  background: var(--link-dark);
  border: 3px solid var(--link-line);
  /* 右枠は付けない。パネルはサイドバーより右へはみ出して切り取られるため、
     右端まで伸びるタイトルバーとして見せる */
  border-right: none;
  border-radius: 0;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);
  color: var(--link-line);
  padding: 10px 12px;
  margin-bottom: 12px;
  /* なめらかな変化をやめ、即時に切り替わるレトロな挙動にする */
  transition: none;
}

/* 文字サイズ: Press Start 2P は8ドットで設計されているため、
   8の倍数のときだけ輪郭が保たれる。11pxでは小さいうえ整数倍でもないため、
   ちょうど2倍にあたる16pxにしている。
   Comment＆Gallery は span が3つに分かれているが、この指定で一括して変わる。
   最も長い見出しでも切り取り位置（サイドバー右端）には届かない */
.sidebar_nav .sidebar_2ndnav > li:first-child > a span {
  font-family: "Press Start 2P", cursive;
  font-size: 16px;
  line-height: 1.4;
}

.sidebar_nav .sidebar_2ndnav > li:first-child > a i {
  color: var(--link-yellow);
}

.sidebar_nav .sidebar_2ndnav > li:first-child > a:hover {
  background: var(--link-yellow);
  color: var(--link-dark);
}

.sidebar_nav .sidebar_2ndnav > li:first-child > a:hover i {
  color: var(--link-dark);
}

/* 各リンク＝メニュー項目 */
.sidebar_nav .sidebar_2ndnav:has(> li > a > i.fa-bookmark) > li:not(:first-child) > a {
  display: block;
  position: relative;
  /* 左側はカーソル(▶)の表示位置として空けている。
     内訳: ▶の左位置8px ＋ ▶の幅16px ＋ ▶とテキストの間隔10px = 34px。
     26pxだと間隔が2pxしかなく、▶と文字がくっついて見える */
  padding: 7px 8px 7px 34px;
  /* 日本語だけドットフォント（Kappa20B）にする。英数字は Press Start 2P のまま。
     フォントの定義とライセンスは css/fonts.css を参照。

     文字サイズ: 20pxでは大きいため16pxにしている。
     見出しやUpdate欄と同じ16pxで揃う。
     英数字の Press Start 2P は8ドット設計のため、16pxはちょうど2倍で鮮明になる
     （20pxは8の倍数でなくにじんでいた）。
     一方 Kappa20B は20ドット設計のため、日本語部分の輪郭はわずかに甘くなる。
     日本語も鮮明さを優先する場合は書体を16ドット設計のものへ替える必要がある */
  font-family: "JF Dot Kappa 20 B JP", "Press Start 2P", cursive;
  font-size: 16px;
  line-height: 1.5;
  color: var(--link-line);
  background: transparent;
  border: 2px solid transparent;
  transition: none;
}

/* 選択カーソル。通常は隠しておき、ホバー時だけ出す */
.sidebar_nav .sidebar_2ndnav:has(> li > a > i.fa-bookmark) > li:not(:first-child) > a::before {
  content: "\25B6";
  position: absolute;
  left: 8px;
  color: var(--link-yellow);
  opacity: 0;
}

/* 選択中の項目のように反転させる */
.sidebar_nav .sidebar_2ndnav:has(> li > a > i.fa-bookmark) > li:not(:first-child) > a:hover {
  background: var(--link-dark);
  border-color: var(--link-line);
  color: var(--link-yellow);
}

.sidebar_nav .sidebar_2ndnav:has(> li > a > i.fa-bookmark) > li:not(:first-child) > a:hover::before {
  opacity: 1;
}

/* ===== Event Calendar のイベント一覧にも同じメニュー選択の挙動を適用する =====

   Bookmark とは背景が異なる（こちらは .update2 が ghostwhite の明るい背景）ため、
   通常時は暗い文字、ホバー時に暗い背景へ反転させる形にしている。

   詳細度: design.css の `.sidebar .sidebar_nav .update2 a`（firebrick・15px）と
   同じ形にし、本ファイルが後に読み込まれることで上書きする */
/* 日付（2026 2/14 等）はリンクの外にある文字なので、入れ物側の指定が効く。
   数字と記号だけなので Press Start 2P を当てる。
   日本語のイベント名は下のリンク側でドットフォントを指定している */
.left .sidebar .sidebar_nav .update2 {
  font-family: "Press Start 2P", cursive;
  font-size: 14px;
}

.sidebar .sidebar_nav .update2 a {
  display: block;
  position: relative;
  /* 左側はカーソル(▶)の表示位置として空けている */
  padding: 7px 8px 7px 26px;
  font-family: "JF Dot Shinonome Gothic 14", sans-serif;
  font-size: 14px;
  color: var(--link-dark);
  background: transparent;
  border: 2px solid transparent;
  transition: none;
}

/* 選択カーソル。通常は隠しておき、ホバー時だけ出す */
.sidebar .sidebar_nav .update2 a::before {
  content: "\25B6";
  position: absolute;
  left: 8px;
  color: var(--link-yellow);
  opacity: 0;
}

/* 選択中の項目のように反転させる */
.sidebar .sidebar_nav .update2 a:hover {
  background: var(--link-dark);
  border-color: var(--link-dark);
  color: var(--link-yellow);
}

.sidebar .sidebar_nav .update2 a:hover::before {
  opacity: 1;
}

/* ===== Update Information の一覧にもドットフォントを当てる =====

   構成は Event Calendar のイベント一覧と同じで、日付はリンクの外にある文字。
   日付は数字と記号だけなので Press Start 2P、
   日本語を含むリンク本文はドットフォントにする。

   詳細度: style2.css の `.left .sidebar .sidebar_nav .update a`
   （Helvetica系・17px）と同じ形にし、本ファイルが後に読み込まれることで上書きする。

   リンク本文の書体は x12y16pxMaruMonica「マルモニカ」。
   丸ゴシック長体で、他の欄（東雲ゴシック・Kappa20B）とは異なる印象になる。
   フォントの定義とライセンスは css/fonts.css を参照。

   文字サイズ: いずれも24pxで揃えている。
   Press Start 2P は8ドット設計のため、24pxはちょうど3倍で輪郭が保たれる。
   マルモニカの設計サイズは16pxのため24pxは1.5倍にあたるが、
   実測では滲みの差を判別できなかったため見た目の大きさを優先している。
   より鮮明さを求める場合、次の整数倍は32pxになる。
   一覧はもともとパネルの高さを超えてスクロールする作りのため、
   大きくしても最後の項目まで到達できる */
.left .sidebar .sidebar_nav .update {
  font-family: "Press Start 2P", cursive;
  font-size: 24px;
}

.left .sidebar .sidebar_nav .update a {
  font-family: "x12y16pxMaruMonica", sans-serif;
  font-size: 24px;
}

/* 「Menu」の見出しと、その下のメニュー各項目の高さを揃える。

   実測では見出しが67px、各項目が63pxで4pxずれていた。
   文字サイズと余白の指定がそれぞれ別（見出しは21px/0.75em、
   項目は17.28px/1.05em）のため、自然な高さが一致しない。

   両方に同じ最低の高さを与え、中身を上下中央に置くことで
   環境による文字の測り方の違いにも影響されずに揃う。

   1051px以上に限っているのは、1050px以下ではメニューが
   別のつくり（アコーディオンや全幅表示）になり、
   css/mobile.css が44pxのタップ領域を指定しているため。

   なお、この高さのままだと、ウィンドウの高さが900px程度の環境で
   メニューの下にある広告枠(300x250)が87pxはみ出して見えなくなる
   （サイドバーはスクロールできない作りのため到達もできない）。
   高さを52pxまで詰めれば広告も収まるが、見た目を優先して67pxのままにしている */
@media screen and (min-width: 1051px) {
  .left .sidebar > header,
  .left .sidebar .sidebar_nav > ul > li > a {
    display: flex;
    align-items: center;
    min-height: 67px;
    box-sizing: border-box;
  }

  /* メニューの文字を読みやすい大きさにする。
     第1階層（Update Information / Administrator など）は17.28px、
     セカンドバーの見出し（Profile / Event Calendar / Bookmark など）は16pxだった。
     行の高さ67pxに対して小さいため20pxへ上げる。

     詳細度は打ち消す相手に合わせている。
     第1階層は style2.css の `.sidebar_nav ul li a`（0.9em）、
     セカンドバーは link-menu.css 内の `.sidebar_2ndnav > li:first-child > a span`（16px） */
  .left .sidebar .sidebar_nav > ul > li > a > span,
  .left .sidebar .sidebar_nav .sidebar_2ndnav > li > a > span {
    font-size: 20px;
  }

  /* 「Menu」の文字は style2.css 側の text-align: center で中央に置かれていたが、
     display:flex にすると text-align は中身の並びに効かなくなり左へ寄る
     （実測: 左21px・右395px）。flex の指定で中央へ戻す。
     メニュー各項目はアイコンから左詰めのままにするため、見出しだけに指定する */
  .left .sidebar > header {
    justify-content: center;
  }
}

/* セカンドバーの見出し（Profile / Event Calendar / Bookmark など）を
   押して固定したときの見た目。

   押すとカーソルが離れてもパネルが開いたままになり、見出しは黄色のまま残る。
   固定の付け外しは js/sidebar-panel.js が .is-pinned で行う。

   開いた状態の指定（opacity と transform）は style2.css の .is-holding と同じ。
   ホバーが外れても効くよう、:hover を含む指定より詳細度を高くしている */
.left .sidebar .sidebar_nav .sidebar_2ndnav.is-pinned {
  opacity: 1;
  transform: translateX(0);
  /* ホバー中と同じ速度。違う値にすると固定した瞬間に動きが飛ぶ */
  transition: opacity 0.4s ease, transform 1s ease;
}

/* 固定中は見出しの黄色を保つ（ホバー時と同じ配色） */
.left .sidebar .sidebar_nav .sidebar_2ndnav.is-pinned > li:first-child > a {
  background: var(--link-yellow);
  color: var(--link-dark);
}

.left .sidebar .sidebar_nav .sidebar_2ndnav.is-pinned > li:first-child > a i {
  color: var(--link-dark);
}