/* index.html のレイアウト調整。

   フッターそのものの見た目は css/ogulab-footer.css へ分けてある
   （記事ページと共通で使うため）。
   このファイルには index.html 固有の指定だけが入っている。
   body を画面の高さに固定する指定を含むため、
   記事ページなど他のページで読み込んではいけない。

   本ファイルは css/ogulab-footer.css より後に読み込むこと */

/* 記事一覧(#article)がフッターの高さを自動で吸収する仕組み。

   css/design.css の `.right #article { height: 780px }` という固定高さを打ち消し、
   Article列を Menu列(.sidebar の固定高 877px)にflexで揃えた上で、
   残った高さを #article が flex で埋める。
   これにより フッターの padding や font-size を変えても
   #article が同じだけ縮んで吸収するため、ページ全体の高さは変わらず、
   縦スクロールバーが出ない（調整用の数値を持たなくてよい）。

   狭い画面(1050px以下)は .wrapper が display:block で縦積みになる別設計のため、
   広い画面にのみ適用する */
@media screen and (min-width: 1051px) {
  /* ページ全体を画面の高さちょうどに収める。
     css/design.css は `.sidebar { height: 877px }` という固定値を持つため、
     画面の高さが「ヘッダー + 877px」より低い環境では必ず縦スクロールバーが出る。
     body をflex縦並びにして .wrapper に画面の残り高さを与え、
     Menu列・Article列の両方がその高さに追従するようにする */
  body {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }

  .wrapper {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Menu列: 固定高さ877pxを解除し、残り高さに追従させる。
     画面が低い環境でも中身に到達できるよう、列の内部でスクロールさせる
     （ページ全体ではなくサイドバー内部のスクロールになる） */
  main,
  .left {
    display: flex;
    min-height: 0;
  }

  .left {
    flex-direction: column;
    flex: 1;
  }

  .sidebar {
    height: auto;
    flex: 1 1 0;
    min-height: 0;
    /* 中の Menuヘッダー と ナビ を縦に並べ、ナビに残り高さを割り当てる */
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    /* スクロールバー非表示（Firefox・旧Edge/IE）。
       スクロール自体は可能なまま、バーの表示だけを消す */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  /* ナビは Menuヘッダー(67px)の下から始まるのに height:100% だったため、
     サイドバー下端を67pxはみ出し、サイドバーにスクロールが発生していた。
     パネルはサイドバー基準の絶対配置なので、サイドバーをスクロールすると
     パネルも一緒に上へ動き、下端がフッターから最大67px離れてしまう。
     ナビを残り高さちょうどにして、そのスクロール自体を発生させない */
  .sidebar_nav {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
  }

  /* スクロールバー非表示（Chrome・Safari・Edge） */
  .sidebar::-webkit-scrollbar {
    display: none;
  }

  /* セカンドバー（ホバーで出るサブメニュー）の基準をサイドバーに変える。

     従来は .sidebar_nav が基準で top:0 だったため、パネルは Menuヘッダー(67px)の分だけ
     下にずれた位置から始まるのに高さはサイドバーと同じになり、
     サイドバー下端を67pxはみ出していた。
     その結果 Event Calendar のイベント一覧の下部が切れて表示されていた。

     サイドバーを基準にして top/bottom を 0 にすることで、
     パネルの縦位置がサイドバーとちょうど一致する。
     内容が入りきらないパネルは内部スクロールで到達できるようにし、
     スクロールバーはサイト全体の方針に合わせて非表示にする */
  .sidebar {
    position: relative;
  }

  .sidebar_nav {
    position: static;
  }

  .sidebar_nav .sidebar_2ndnav {
    top: 0;
    bottom: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .sidebar_nav .sidebar_2ndnav::-webkit-scrollbar {
    display: none;
  }

  /* パネル内の一覧ボックスは元々 .update=870px / .update2=450px の固定高さで、
     画面が低い環境ではパネルからはみ出して下部が見切れていた
     （サイドバー600px相当で Update Information は270px、Event Calendar は233px が不可視）。
     残り高さを埋めるように可変にすることで、画面の高さに関わらず
     パネルの中身が最後まで収まる。一覧自体は元設計どおり内部スクロールで読める */
  .sidebar_nav .sidebar_2ndnav > li:has(> .update),
  .sidebar_nav .sidebar_2ndnav > li:has(> .update2) {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
  }

  .sidebar_nav .sidebar_2ndnav .update,
  .sidebar_nav .sidebar_2ndnav .update2 {
    height: auto;
    flex: 1 1 0;
    min-height: 0;
  }

  /* Article列: 記事一覧(#article)が残り高さを埋め、フッターの高さを自動で吸収する */
  aside {
    display: flex;
  }

  .right {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
  }

  /* 見出し「Article」が占める高さを、Menu列の見出し（67px）に合わせる。

     揃えないと aliceblue の上端が Menu 一覧の開始位置より15px高くなり、
     隣り合う2列の本文領域の頭がそろわない。
     内訳: 上余白15px ＋ 文字の高さ32px ＋ 下余白20px ＝ 67px。

     詳細度: css/style2.css の `.right p { margin-bottom: 5px }` と同じ詳細度のため、
     本ファイルが後に読み込まれることで上書きされる。
     子セレクタ(>)にしているのは、記事カード内の p に影響させないため */
  .right > p {
    margin-bottom: 20px;
  }

  .right #theme {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
  }

  /* 記事カードの開始位置を上げる。

     #theme を flex にした結果、その直下の hr は幅0に潰れて線として描かれない
     （hr のブラウザ既定の左右 auto マージンが、flex では余白を全て吸収するため）。
     見えないまま上下8pxずつの余白だけを占めているので、その分を詰める。

     1050px以下では #theme は通常のブロックのままで、
     hr が区切り線として見えている。余白を詰めると窮屈になるため、
     この指定は広い画面にのみ適用する */
  .right #theme > hr {
    margin-top: 0;
    margin-bottom: 0;
  }

  .right #article {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
  }
}

/* 狭い画面（1050px以下）でのパネル内一覧の収まり。

   上の min-width:1051px 向けの調整はここでは適用されないため、同等の指定を行う。
   .update=800px / .update2=450px の固定高さのままだと、
   サイドバー（overflow:hidden）の下端をはみ出して下部が読めなくなる
   （Event Calendar のイベント一覧が257pxぶん切り取られていた）。
   残り高さに追従させることで、パネル内に収めつつ一覧は内部スクロールで全件読める。

   詳細度: design.css の `.left .sidebar .sidebar_nav .update2`（クラス4つ）を
   上回る必要があるため、クラス5つ分のセレクタにしている */
@media screen and (max-width: 1050px) {
  .sidebar_nav .sidebar_2ndnav {
    display: flex;
    flex-direction: column;
  }

  .sidebar_nav .sidebar_2ndnav > li:has(> .update),
  .sidebar_nav .sidebar_2ndnav > li:has(> .update2) {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
  }

  .left .sidebar .sidebar_nav .sidebar_2ndnav .update,
  .left .sidebar .sidebar_nav .sidebar_2ndnav .update2 {
    height: auto;
    flex: 1 1 0;
    min-height: 0;
  }
}

/* 769〜1050px でパネルの中身が読めなくなる問題への対応。

   この幅ではサイドバーの高さが676pxしかなく（1051px以上は879px）、
   パネルは position:absolute でその中に置かれ、
   サイドバーの overflow:hidden で下端が切り取られる。

   上の一覧（.update / .update2）は flex で縮めて収めているが、
   Profile欄は「Battle枠 ＋ ミニゲーム」で高さが決まっており縮まない。
   実測では中身816pxに対し表示609pxで、207pxが完全に隠れていた。
   パネル自身は overflow:visible のためスクロールもできなかった。

   パネル内をスクロールできるようにして、隠れた分に到達できるようにする。

   768px以下を対象外にしているのは、あちらはアコーディオン（position:static）で
   高さの制限が無く、スクロールを付けると逆に読みにくくなるため */
@media screen and (min-width: 769px) and (max-width: 1050px) {
  .sidebar_nav .sidebar_2ndnav {
    overflow-y: auto;
    min-height: 0;
  }
}

/* 769〜1050px で、パネルを帯（プライバシーポリシー｜お問い合わせ）の位置まで広げる。

   パネルは .sidebar_nav を基準にした絶対配置で bottom: 0 を持つため、
   下端はナビの下端（＝サイドバーの下端）で止まる。
   帯はその下に別に並んでいるので、パネルを開いていても帯が見えたままだった。

   1051px以上では帯を絶対配置にして並びから外すことで解決しているが、
   この幅では左カラムと記事欄が縦に積まれる作りのため、同じ手を使うと
   帯が左カラムの下端からはみ出して記事欄に重なる（実測で48px）。

   代わりに、ナビの下側に帯と同じ高さの余白を足してパネルの下端を伸ばし、
   帯を同じ量だけ上へ引き戻す。
   足した分と引いた分が相殺するため、帯の見える位置・左カラムの高さ・
   記事欄の開始位置はいずれも変わらない（実測727px・904pxのまま）。

   パネルは z-index: 9 の絶対配置、帯は通常の並びのため、
   パネルを開いている間だけ帯がパネルの下に隠れる。
   閉じているときはサイドバーの背景色が帯と同じ #263238 のため見た目は変わらない。

   0.2em は style2.css が .sidebar_nav に持たせている元の下余白で、
   打ち消さないよう足し合わせている */
@media screen and (min-width: 769px) and (max-width: 1050px) {
  .left .sidebar .sidebar_nav {
    padding-bottom: calc(0.2em + var(--sidebar-footer-height));
  }

  /* 帯はナビの下側に足した余白と重なる位置に戻す。

     z-index を持たせているのは重なりの順番を決めるため。
     ナビ(.sidebar_nav)は position: relative のため、そのままでは
     通常の並びにある帯より手前に描かれ、閉じているときも
     「プライバシーポリシー｜お問い合わせ」が読めなくなる（実測で確認）。
     帯を 1、パネルを 9（style2.css の指定）とすることで、
     閉じているときは帯が見え、開いているときだけパネルが帯を覆う */
  .sidebar-footer {
    margin-top: calc(-1 * var(--sidebar-footer-height));
    position: relative;
    z-index: 1;
  }
}