/* OGULAB運営フッター（UNDERTALE風ダイアログボックス）

   index.html と記事ページ（event2601.html など）で共通して使う。

   もともと css/ogulab-encounter.css に同居していたが、
   あちらには index.html 専用のレイアウト調整（body を画面高に固定する等）が
   含まれており、記事ページで読み込むと表示が崩れる。
   フッターの見た目だけをこのファイルへ分けている。

   前提: nes.css（.nes-container）と Press Start 2P が読み込まれていること。
   Press Start 2P は nes/style.css の @import で入る */

.ogulab-encounter {
  box-sizing: border-box;
  width: 100%;
}

/* 詳細度: nes.css の `.nes-container.is-rounded { padding: 1rem 1.5rem; margin: 4px }` に
   上書きされないよう、実際に付与している全クラスに合わせたセレクタで詳細度を上げている。
   左右マージンを0にしないと横幅をはみ出し横スクロールが発生する */
.nes-container.is-dark.is-rounded.ogulab-encounter {
  padding: 0.9rem 1.2rem;
  margin: 0.2rem 0 0;
  background-color: #263238;
}

/* 詳細度: css/style2.css の `.right p{ margin-top:15px; margin-bottom:5px; font-size:21px; }` と
   css/base.css の `footer .footerInner p{ font-size:20px; color:firebrick }` に
   上書きされないよう、親クラスとの子孫セレクタで詳細度を上げている */
.ogulab-encounter .ogulab-encounter__copyright {
  font-family: "Press Start 2P", cursive;
  font-size: 0.8rem;
  line-height: 1.1;
  color: aliceblue;
  text-align: center;
  margin: 0;
}

/* プライバシーポリシーとお問い合わせへのリンク。
   記事ページなど、左の一覧を持たないページのフッターに置いている
   （アフィリエイトASPの審査で、この2ページへの導線が求められるため）。
   index.html はサイドパネルの Github の下に置いており、フッターには出さない。

   詳細度を上げている理由は上の著作権表示と同じ。
   区切りの「｜」は ::after で入れており、最後の1つには付けない */
.ogulab-encounter .ogulab-encounter__links {
  margin: 0 0 0.6rem;
  font-size: 0.75rem;
  line-height: 1.6;
  text-align: center;
}

.ogulab-encounter .ogulab-encounter__links a {
  color: aliceblue;
  text-decoration: none;
}

.ogulab-encounter .ogulab-encounter__links a:hover {
  text-decoration: underline;
}

.ogulab-encounter .ogulab-encounter__links a::after {
  content: "｜";
  margin: 0 0.4rem;
  color: rgba(240, 248, 255, 0.5);
}

.ogulab-encounter .ogulab-encounter__links a:last-child::after {
  content: none;
}

.ogulab-encounter__cursor {
  display: inline-block;
  margin-left: 0.4rem;
  color: #fff;
  /* ▼はドットフォントに字形がなく別フォントで描かれる。
     行の高さは本文と一致している（実測でズレ0px）が、
     グリフが字面の中央寄りに描かれるため下がって見えるので、
     見た目を揃えるために持ち上げている */
  position: relative;
  top: -3px;
  animation: ogulab-encounter-blink 1s steps(2, start) infinite;
}

@keyframes ogulab-encounter-blink {
  to { opacity: 0; }
}

/* index.html のサイドパネルの下に置くリンク。

   パネル（.sidebar）は design.css で height:877px・overflow:hidden が
   指定されており、中に入れると隠れてしまうため、パネルの外へ並べている。
   背景色をパネルと揃えて、続きの帯に見えるようにしている。

   区切りの「｜」の作り方はフッターのリンクと同じ */
/* 右のフッター（.ogulab-encounter）と上下の位置・高さ・文字を揃えている。

   左右の内側余白 1.2rem と文字まわりの指定は右のフッターと同じ値。
   上下だけ 4px 足しているのは、右のフッターが nes-container の
   4pxの枠を持っており、その分だけ背が高いため
   （揃える前は高さ41pxと51pxで、上端が10pxずれていた） */
/* 帯の高さ。パネルを帯の位置まで広げる指定（css/ogulab-encounter.css の
   769〜1050px の指定）で、同じ値だけサイドバーを伸ばすために使う。

   内訳は下の .sidebar-footer の指定から導いている。
     文字の行     0.8rem × 1.1  = 0.88rem
     上下の内側余白 (0.9rem + 4px) × 2 = 1.8rem + 8px
   合計 2.68rem + 8px（実測 50.84px と一致）。
   rem で書いているため、文字サイズの設定を変えても帯と同じだけ伸縮する */
:root {
  --sidebar-footer-height: calc(2.68rem + 8px);
}

.sidebar-footer {
  margin: 0;
  padding: calc(0.9rem + 4px) 1.2rem;
  background-color: #263238;
  color: aliceblue;
  font-size: 0.8rem;
  line-height: 1.1;
  text-align: center;
}

.sidebar-footer a {
  color: aliceblue;
  text-decoration: none;
}

.sidebar-footer a:hover {
  text-decoration: underline;
}

.sidebar-footer a::after {
  content: "｜";
  margin: 0 0.4rem;
  color: rgba(240, 248, 255, 0.5);
}

.sidebar-footer a:last-child::after {
  content: none;
}

/* セカンドバーが帯の高さまで広がるようにする。

   帯は通常の並び（サイドバーの次）に置いており、その分だけサイドバーが
   縦に短くなっていた。サイドバーの高さはセカンドバーの高さでもあるため、
   パネルが帯の手前で途切れ、Update情報などの下部が読めなくなっていた。

   帯を絶対配置にして並びから外すと、サイドバーは左カラムの高さいっぱい
   （実測で735px→786px）を使えるようになり、パネルも帯の位置まで広がる。
   パネルは帯より手前に描画されるため、開いている間は帯が自然に隠れる。

   帯自体の見た目・位置は変わらない（左カラムの下端に置いたまま）。

   1050px以下は対象外。
   あちらは左カラムと記事欄が縦に積まれる別のつくりで、
   帯を絶対配置にすると左カラムの下端からはみ出し、
   記事欄の先頭に48pxほど重なってしまう。
   その幅ではパネル内のスクロールで下部に到達できる
   （css/ogulab-encounter.css の 769〜1050px の指定を参照） */
@media screen and (min-width: 1051px) {
  .left {
    position: relative;
  }

  .sidebar-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

/* 狭い画面で著作権表示を1行に収める。

   「© O.G.U Engineer Tech Life Log」は30文字あり、
   Press Start 2P は1文字が文字サイズとほぼ同じ幅になる等幅フォントのため、
   12.8pxでは約384px必要になる。390px以下の画面では入りきらず
   2行に折り返していた（実測: 320px・390pxとも2行）。

   8pxにするのは、Press Start 2P が8ドットで設計されており、
   その整数倍でないと輪郭がにじむため。8pxなら約240pxで収まる */
@media screen and (max-width: 480px) {
  .ogulab-encounter .ogulab-encounter__copyright {
    font-size: 8px;
    white-space: nowrap;
  }
}

/* 記事ページ用。
   css/base.css の `footer { border-top: gray 1px solid; box-shadow: ... }` により
   フッターの上に線と影が付き、index.html と見た目が変わってしまうため打ち消す。
   index.html のフッターは footer 要素の中に無いので影響を受けない */
footer.ogulab-encounter-footer {
  border-top: none;
  box-shadow: none;
}