@charset "UTF-8";
/* =====================================================================
   nzw.jp 共通サイトヘッダー（site-header）
   ---------------------------------------------------------------------
   全ページで同じマークアップ・同じ JS・同じブレークポイントを使う。
   色だけスキン 2 種を CSS 変数で切り替える。

     .site-header--paper   技術書 / グッズ / 開発ノート（紙 + インク）
     .site-header--glass   トップページ（白ガラス。夜テーマで暗転する。位置は fixed）
     .site-header--plain   白い本文のページ（開発ノート / デザインシステム）
     .site-header--ink     暗い面のページ（apps）

   1180px 以上   横並びリンクを表示し、ハンバーガーを隠す
   1180px 未満   ハンバーガーだけ表示し、全項目をパネルに出す
   この値は「ナビ 7 本 + ロゴ + 右側ボタンが 1 行に収まる幅」。項目を増やしたら
   実測して上げ直すこと（site-nav.js の DESKTOP_QUERY も同じ値にする）。
   「畳んだ項目がどこからも辿れない」状態を作らないこと。旧実装は
   640px 未満でリンクごと消えていた（＝モバイルでナビが無かった）。

   使い方:
     <link rel="stylesheet" href="/static/css/design-system.css">
     <link rel="stylesheet" href="/static/css/site-nav.css">
     <script src="/static/js/site-nav.js" defer></script>
   リンク・パネル・ログインの入口・パンくずは site-nav.js が生成する。マークアップは
   html/static/notes/index.html の <header class="site-header"> を参照。
   ===================================================================== */

/* ---------------------------------------------------------------
   1. 骨格（スキン非依存）
   --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--nzw-z-header, 100);
  background: var(--sh-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sh-border);
}

.site-header-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  /* 開いたパネルの上に帯を残す */
  position: relative;
  z-index: 3;
}

.site-header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 900;
  color: var(--sh-ink);
  text-decoration: none;
  transition: color 0.15s;
}
.site-header-logo:hover { color: var(--sh-accent); text-decoration: none; }

/* リンク列は中央に寄せず、ロゴの右から始めてアクションを右端へ押しやる。
   ロゴは「サイトの識別」でナビとは別のゾーンなので、項目間（18px）より
   明確に広く離す。ここを詰めるとロゴがナビの 1 項目に見える。
   .site-header-inner の gap 16px と合わせて 44px。 */
.site-header-nav {
  display: none;
  align-items: center;
  gap: 18px;
  margin-left: 28px;
  margin-right: auto;
}

.site-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-shrink: 0;
}

.site-header-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sh-ink-sub);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}
.site-header-link:hover { color: var(--sh-accent); text-decoration: none; }
.site-header-link svg { width: 14px; height: 14px; flex-shrink: 0; }
.site-header-link img { width: 15px; height: 15px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* 現在地。下線で示す（色だけだと紙スキンでコントラストが足りない） */
.site-header-link[aria-current="page"] {
  color: var(--sh-ink);
  box-shadow: inset 0 -2px 0 var(--sh-accent);
}

/* 「トップへ」など、ページ側が置く CTA。手描きの矩形に見せる非対称の角丸 */
.site-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 3px 9px 4px 8px;
  background: var(--sh-ink);
  color: var(--sh-cta-fg);
  border: 1.5px solid var(--sh-ink);
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.site-header-cta:hover {
  background: var(--sh-ink-mid);
  color: var(--sh-cta-fg);
  text-decoration: none;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--sh-border-strong);
}
.site-header-cta svg { width: 14px; height: 14px; }

/* ログインの入口（トップ以外）。site-nav.js が差し込む。
   ハンバーガーと同じ形・同じ大きさで、右肩のボタン列として揃える。 */
.site-header-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--nzw-radius-full, 9999px);
  background: var(--sh-btn-bg);
  border: 1px solid var(--sh-border-strong);
  color: var(--sh-ink-sub);
  transition: background 0.15s, color 0.15s;
}
.site-header-login:hover { background: var(--sh-btn-bg-hover); color: var(--sh-accent); text-decoration: none; }
.site-header-login:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 2px; }
.site-header-login svg { width: 17px; height: 17px; }

/* ---------------------------------------------------------------
   1-b. パンくず（site-nav.js が生成）
   ---------------------------------------------------------------
   1180px 未満ではナビがハンバーガーに畳まれるので、開かない限り
   現在地がどこにも出ない。ヘッダーの直下に細い帯で常に出しておく。
   色はヘッダーと同じスキン変数で描くので、紙・白・暗のどれでも合う。 */

/* パンくずはヘッダーの「中」（帯の直下・パネルの上）に入る。地と外枠は
   .site-header が持っているものをそのまま使い、ここでは持たない。自前で
   background を持たせると、帯とのあいだに継ぎ目が見える。
   仕切りは帯とのあいだの上罫 1 本だけ。 */
.site-crumbs {
  border-top: 1px solid var(--sh-border);
  /* 開いたパネルの上に残す（.site-header-inner と同じ扱い） */
  position: relative;
  z-index: 3;
}

.site-crumbs-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 9px 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--sh-ink-sub);
}

.site-crumbs a {
  color: var(--sh-ink-sub);
  text-decoration: none;
  /* 指で押せる高さを確保する。文字が小さいぶん当たり判定で補う */
  padding: 4px 0;
}
.site-crumbs a:hover { color: var(--sh-accent); text-decoration: underline; }
.site-crumbs a:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 2px; }

.site-crumbs-sep { color: var(--sh-ink-sub); opacity: 0.45; }

/* 末端＝今いるところ。ここだけ濃くする */
.site-crumbs [aria-current="page"] {
  color: var(--sh-ink);
  font-weight: 700;
}

/* ---------------------------------------------------------------
   2. ハンバーガー
   --------------------------------------------------------------- */

.site-header-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--nzw-radius-full, 9999px);
  background: var(--sh-btn-bg);
  border: 1px solid var(--sh-border-strong);
  color: var(--sh-ink-sub);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.site-header-burger:hover { background: var(--sh-btn-bg-hover); color: var(--sh-accent); }
.site-header-burger:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 2px; }

/* 3 本線 → ×。JS は aria-expanded を切り替えるだけで、形は CSS が持つ */
.site-header-burger-box {
  position: relative;
  width: 16px;
  height: 12px;
  pointer-events: none;
}
.site-header-burger-box span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.15s ease, top 0.2s ease;
}
.site-header-burger-box span:nth-child(1) { top: 0; }
.site-header-burger-box span:nth-child(2) { top: 5px; }
.site-header-burger-box span:nth-child(3) { top: 10px; }

.site-header-burger[aria-expanded="true"] .site-header-burger-box span:nth-child(1) {
  top: 5px;
  transform: rotate(45deg);
}
.site-header-burger[aria-expanded="true"] .site-header-burger-box span:nth-child(2) {
  opacity: 0;
}
.site-header-burger[aria-expanded="true"] .site-header-burger-box span:nth-child(3) {
  top: 5px;
  transform: rotate(-45deg);
}

/* ---------------------------------------------------------------
   3. ドロップパネル（1024px 未満）
   --------------------------------------------------------------- */

.site-nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 2;
  background: var(--sh-panel-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--sh-border);
  box-shadow: var(--nzw-shadow-lg, 0 10px 24px rgba(0, 0, 0, 0.12));
  padding: 8px 0 12px;
  /* 画面の高さを超える分はパネル内でスクロールさせる（背後は固定したまま）。
     実際の上限は開いた時点で site-nav.js が実測して入れる。ここの値は
     JS が動く前の保険で、iOS の vh は URL バーを勘定に入れない点に注意。 */
  max-height: 78dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* iOS で慣性スクロールを効かせる */
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.site-nav-panel[data-open] { opacity: 1; transform: translateY(0); }

/* まだ下に続くとき、下端をぼかして「スクロールできる」ことを見せる。
   ここが無いと利用規約が切れているだけに見え、触ってもらえない。
   .has-more は site-nav.js が付け外しする（CSS からは判定できない）。 */
.site-nav-panel::after {
  content: "";
  position: sticky;
  bottom: 0;
  display: block;
  height: 34px;
  margin-top: -34px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  background: linear-gradient(180deg, transparent, var(--sh-panel-bg) 78%);
}
.site-nav-panel.has-more::after { opacity: 1; }

.site-nav-panel-list {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 12px;
}

.site-nav-panel-link {
  display: flex;
  align-items: center;
  gap: 12px;
  /* タップ領域を 44px 以上に保つ */
  min-height: 48px;
  padding: 0 12px;
  border-radius: var(--nzw-radius-md, 0.5rem);
  font-size: 15px;
  font-weight: 700;
  color: var(--sh-ink);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.site-nav-panel-link:hover,
.site-nav-panel-link:focus-visible {
  background: var(--sh-panel-hover);
  color: var(--sh-accent);
  text-decoration: none;
}
.site-nav-panel-link svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--sh-ink-sub); }
.site-nav-panel-link img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

.site-nav-panel-link[aria-current="page"] {
  background: var(--sh-panel-hover);
  color: var(--sh-accent);
}
.site-nav-panel-link[aria-current="page"] svg { color: var(--sh-accent); }

/* 外部リンクの矢印は右端へ逃がす */
.site-nav-panel-ext {
  margin-left: auto;
  width: 13px;
  height: 13px;
  color: var(--sh-ink-sub);
  opacity: 0.7;
}

/* パネルの小見出し。並び順の理由を言葉で出す */
.site-nav-panel-group {
  margin: 14px 12px 4px;
  font-family: var(--nzw-font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--sh-ink-sub);
  opacity: 0.75;
}
/* 先頭だけは上の余白を詰める */
.site-nav-panel-list > .site-nav-panel-group:first-child { margin-top: 4px; }

/* パネル内の表示設定（時間帯・天気）。スキン変数で描くので、
   ヘッダーの ⚙ 側（Tailwind の白いパネル）と違い夜テーマでも沈まない。
   状態表示の .active-setting はページ側の CSS が付ける。 */
.site-nav-set {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 12px;
  min-height: 44px;
}
.site-nav-set-label {
  font-size: 13px; font-weight: 700; color: var(--sh-ink-sub);
  flex: 0 0 3.5em;
}
.site-nav-set-opts {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 4px; flex: 1;
  padding: 4px;
  border-radius: var(--nzw-radius-md, 0.5rem);
  background: var(--sh-panel-hover);
}
.site-nav-set-opt {
  display: flex; align-items: center; justify-content: center;
  height: 34px; padding: 0;
  border: 0; border-radius: var(--nzw-radius-sm, 0.375rem);
  background: transparent; color: var(--sh-ink-sub);
  font-size: 14px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.site-nav-set-opt:hover { color: var(--sh-accent); }
.site-nav-set-opt:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: 1px; }
/* ページ側が付ける選択状態。トップの .setting-opt.active-setting（白塗り・
   時間帯ごとの色）が後から当たるので、詳細度を 1 段上げてパネルの地に戻す。
   暗いパネルに白いチップが乗ると、そこだけ別のUIに見える。 */
.site-nav-panel .site-nav-set-opts .site-nav-set-opt.active-setting {
  background: var(--sh-btn-bg-hover);
  color: var(--sh-accent);
  box-shadow: var(--nzw-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
}

.site-nav-panel-sep {
  height: 1px;
  margin: 8px 12px;
  background: var(--sh-border);
}

/* 規約類。本文リンクより一段落とす */
.site-nav-panel-sub .site-nav-panel-link {
  min-height: 40px;
  font-size: 13px;
  font-weight: 500;
  color: var(--sh-ink-sub);
}

/* ヘッダーの外（body 直下）に置く。ヘッダーの中に入れるとヘッダー帯自身も
   覆ってしまい、帯が灰色に沈む。z-index はヘッダーの 1 つ下。 */
.site-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--nzw-z-header, 100) - 1);
  background: rgba(15, 23, 42, 0.28);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.site-nav-backdrop[data-open] { opacity: 1; }

/* ---------------------------------------------------------------
   4. ブレークポイント
   --------------------------------------------------------------- */

/* 1180px 未満は表示設定をパネルに出すので、ヘッダーの ⚙ は畳む。
   同じ操作を 2 箇所に置かない（#display-settings-btn はトップなど一部ページだけ） */
@media (max-width: 1179px) {
  [data-display-settings] { display: none; }
}

@media (min-width: 1180px) {
  .site-header-nav { display: flex; }
  .site-header-burger { display: none; }
  /* 念のため。この幅ではパネルを開けないが、JS 前に開いた状態が残っても消す */
  .site-nav-panel,
  .site-nav-backdrop { display: none; }
}

/* ---------------------------------------------------------------
   5. スキン
   --------------------------------------------------------------- */

/* 紙 + インク。goods.css / series.css が持っていた値をそのまま引き継ぐ */
.site-header--paper {
  --sh-bg:            rgba(245, 243, 238, 0.93);
  --sh-panel-bg:      #F5F3EE;
  --sh-panel-hover:   rgba(214, 208, 194, 0.35);
  --sh-border:        #D6D0C2;
  --sh-border-strong: #D6D0C2;
  --sh-ink:           #1C1B18;
  --sh-ink-mid:       #3A3935;
  --sh-ink-sub:       #625F57;
  --sh-accent:        var(--nzw-accent-deep, #0369a1);
  --sh-cta-fg:        #F5F3EE;
  --sh-btn-bg:        rgba(255, 255, 255, 0.55);
  --sh-btn-bg-hover:  #ffffff;
  /* リング内側の塗りを紙色に合わせる（既定は #fff で、紙色の帯だと輪が浮く） */
  --nzw-icon-ring-bg: #F5F3EE;
}

/* 白系の配色。design-system.css の --nzw-* をそのまま使うので、
   本文が --nzw-bg / --nzw-card のページ（開発ノート・デザインシステム）と地色が揃う。
   --glass と --plain の違いは「位置と内寸」だけで、色はここが唯一の定義。 */
.site-header--glass,
.site-header--plain {
  --sh-bg:            rgba(255, 255, 255, 0.8);
  --sh-panel-bg:      #ffffff;
  --sh-panel-hover:   rgba(241, 245, 249, 0.9);
  --sh-border:        rgba(0, 0, 0, 0.05);
  --sh-border-strong: var(--nzw-border, #e2e8f0);
  --sh-ink:           var(--nzw-text-strong, #0f172a);
  --sh-ink-mid:       var(--nzw-text, #1e293b);
  --sh-ink-sub:       var(--nzw-sub, #64748b);
  --sh-accent:        var(--nzw-accent, #0ea5e9);
  --sh-cta-fg:        #ffffff;
  --sh-btn-bg:        rgba(255, 255, 255, 0.8);
  --sh-btn-bg-hover:  #ffffff;
  --nzw-icon-ring-bg: #ffffff;
}

/* 白ガラス。トップページ専用。
   position: fixed と内寸はトップの <main> の pt-24 前提で組まれているので、
   他ページに付けると本文がヘッダーの下に潜る。色だけ欲しいときは --plain を使う。 */
.site-header--glass {
  position: fixed;
  width: 100%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 白い本文のページ用（開発ノート・デザインシステム）。
   色は --glass と同じだが、位置は骨格の sticky のまま・内寸も既定のまま。
   帯が白同士で沈まないよう、境界だけ --paper と同じ強さの実線にする。 */
.site-header--plain {
  --sh-border: var(--nzw-border, #e2e8f0);
}
.site-header--glass .site-header-inner {
  max-width: 80rem; /* Tailwind の max-w-7xl。トップの本文幅に合わせる */
  padding: 0 16px;
  height: 64px;     /* h-16。<main> の pt-24 がこの高さ前提で組まれている */
}
@media (min-width: 640px) {
  .site-header--glass .site-header-inner { padding: 0 24px; }
}
@media (min-width: 1024px) {
  .site-header--glass .site-header-inner { padding: 0 32px; }
}
.site-header--glass .site-header-logo {
  font-family: var(--nzw-font-mono, "JetBrains Mono", monospace);
  font-size: 24px;
  letter-spacing: -0.025em;
  gap: 12px;
}

/* 夜テーマ。トップページの body.theme-night に連動する */
body.theme-night .site-header--glass {
  --sh-bg:            rgba(15, 23, 42, 0.85);
  --sh-panel-bg:      #0f172a;
  --sh-panel-hover:   rgba(51, 65, 85, 0.6);
  --sh-border:        rgba(255, 255, 255, 0.1);
  --sh-border-strong: rgba(255, 255, 255, 0.18);
  --sh-ink:           #f1f5f9;
  --sh-ink-mid:       #e2e8f0;
  --sh-ink-sub:       #94a3b8;
  --sh-accent:        var(--nzw-accent-light, #38bdf8);
  --sh-cta-fg:        #0f172a;
  --sh-btn-bg:        rgba(30, 41, 59, 0.7);
  --sh-btn-bg-hover:  rgba(51, 65, 85, 0.9);
  --nzw-icon-ring-bg: #0f172a;
}

/* 暗い面のページ用（apps の製図台調）。紙スキンの色を反転させた関係にある */
.site-header--ink {
  --sh-bg:            rgba(13, 14, 12, 0.92);
  --sh-panel-bg:      #12130F;
  --sh-panel-hover:   rgba(255, 255, 255, 0.06);
  --sh-border:        rgba(255, 255, 255, 0.10);
  --sh-border-strong: rgba(255, 255, 255, 0.18);
  --sh-ink:           rgba(255, 255, 255, 0.92);
  --sh-ink-mid:       rgba(255, 255, 255, 0.75);
  --sh-ink-sub:       rgba(255, 255, 255, 0.48);
  --sh-accent:        #7FD8CB;
  --sh-cta-fg:        #0D0E0C;
  --sh-btn-bg:        rgba(255, 255, 255, 0.06);
  --sh-btn-bg-hover:  rgba(255, 255, 255, 0.12);
  --nzw-icon-ring-bg: #0D0E0C;
}
/* CTA は反転させる。暗い地に暗いボタンだと沈む */
.site-header--ink .site-header-cta {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.92);
}
.site-header--ink .site-header-cta:hover {
  background: #fff;
  box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.18);
}

/* sticky をやめるページ用（design-system は目次側が sticky 枠を使う）。
   static ではなく relative。パネルの絶対配置がヘッダーを基準にできなくなる。 */
/* 本文を頭から敷きたいページ用（about のヒーローなど、帯の下に絵を回り込ませる）。
   本文側で帯の高さぶんの余白を確保しておくこと。 */
.site-header--fixed { position: fixed; left: 0; right: 0; }

/* ---------------------------------------------------------------
   6. モーション設定
   --------------------------------------------------------------- */

/* 背の低い端末（URL バー込みで 700px 未満）では詰める。タップ領域の下限
   44px は割らない。ここを削るより、まず入る量を増やす。 */
@media (max-height: 700px) {
  .site-nav-panel-link { min-height: 44px; font-size: 14.5px; }
  .site-nav-panel-group { margin-top: 10px; margin-bottom: 2px; }
  .site-nav-panel-sub .site-nav-panel-link { min-height: 38px; }
  .site-nav-set { min-height: 40px; padding-top: 2px; padding-bottom: 2px; }
  .site-nav-panel { padding-top: 4px; padding-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header-logo,
  .site-header-link,
  .site-header-cta,
  .site-header-login,
  .site-header-burger,
  .site-header-burger-box span,
  .site-nav-panel-link,
  .site-nav-panel,
  .site-nav-backdrop { transition: none; }
  .site-header-cta:hover { transform: none; }
  .site-nav-panel { transform: none; }
}
