/* WHY3K — サブページ共通の外装。
   ここが持つのは「上部バー」「白幕と時計の遷移演出」だけ。
   トップの背景装飾（刃・インク・ガラス・定規・散乱データ）は持ち込まない。 */

@font-face {
  font-family: "Cormorant";
  src: url("../../assets/fonts/cormorant.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: block;
}

:root {
  --paper: #fbfbfa;
  --ink: #131316;
  --ink-soft: #9a9aa3;
  --faint: #c9c9d0;
  --line: #e2e2e7;
  --acc: #2f9fd0;
  --red: #d21f12;
  --mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  --disp: "Cormorant", serif;
  --tech: "Cormorant", "Hiragino Mincho ProN", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:focus { outline: none; }
:focus-visible { outline: 2px solid rgba(19,19,22,.5); outline-offset: 3px; }

html, body { min-height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* ---- 上部バー（トップと同じ体裁・同じ項目） ---- */
.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; justify-content: flex-end; gap: 34px;
  height: 54px;
  padding: 0 130px 0 40px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase;
  background: rgba(251,251,250,.78);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  border-bottom: 1px solid var(--line);
}
.topnav .brand {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 14px;
  font-family: var(--disp); font-weight: 700; font-size: 26px;
  letter-spacing: .06em; text-transform: none;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.topnav .brand i { display: block; }
.topnav .brand .ln { width: 34px; height: 1px; background: var(--faint); }
.topnav .brand .d2 { width: 7px; height: 7px; background: var(--ink); }

/* ホームへ戻る（右上・全ページ共通） */
.topnav .home {
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink); text-decoration: none;
  padding: 4px 0; transition: color .15s;
}
@media (hover: hover) and (pointer: fine) { .topnav .home:hover { color: var(--ink-soft); } }

/* 戻る/進む */
.topnav .hist { position: fixed; top: 15px; right: 42px; z-index: 5; display: flex; gap: 8px; }
.topnav .hb {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 15px; line-height: 1;
  color: var(--ink); background: none; border: none;
  cursor: pointer; padding: 6px 7px; touch-action: manipulation;
  transition: transform .15s, color .15s, opacity .15s;
}
@media (hover: hover) and (pointer: fine) {
  .topnav .hb:hover:not(:disabled) { transform: translateX(-2px); }
  .topnav .hb#histFwd:hover:not(:disabled) { transform: translateX(2px); }
}
.topnav .hb:active { opacity: .4; }
.topnav .hb:disabled { color: #d8d8de; cursor: default; pointer-events: none; }

/* スマホ：中央ブランドだけ（トップと同じ振る舞い） */
@media (max-width: 999px) {
  .topnav {
    position: sticky; height: 48px; padding: 0 20px;
    justify-content: center;
    background: rgba(251,251,250,.94);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .topnav .brand {
    position: static; transform: none; margin: 0;
    font-size: 17px; gap: 10px;
  }
  .topnav .brand .ln { width: 20px; }
  .topnav .brand .d2 { width: 5px; height: 5px; }
  .topnav .home { display: none; }
  .topnav .hist { position: absolute; top: 8px; right: 18px; }
}

/* ---- 入場の白幕（トップから来たときに白から現れる） ---- */
.warp {
  position: fixed; inset: 0; z-index: 99;
  background: var(--paper);
  opacity: 0; visibility: hidden; pointer-events: none;
}
.warp.out { visibility: visible; opacity: 0 !important; transition: opacity .34s ease; }
html.backnav .warp { visibility: visible; opacity: 1; }