@charset "UTF-8"; /* ===================================================================== 実測（/research/）— 別刷りのテーマ --------------------------------------------------------------------- 開発ノート（notes.css / Dot Matrix）とは別のカテゴリなので、 notes.css を読まずに自前で組む。型は html/book/series.css と同じで、 design-system.css と site-nav.css は読む（共通ヘッダー・虹ライン・ アイコンリング・prefers-reduced-motion の全停止がそこから付く）。 --nzw-* は上書きせず、別名のトークンを並走させる。 語彙は「学術論文の別刷り」。サイト内の他 9 区画を棚卸しして、 次の 5 つがどこにも使われていないことを確かめたうえで選んでいる。 セリフ体の本文 ／ 枠ゼロ ／ 傍注 ／ 朱 1 色 ／ 完全静止 紙は技術書（book/series.css）と同じ #F5F3EE。共通ヘッダーの .site-header--paper（技術書・グッズ・開発ノートが使うスキン）も 同じ紙なので、帯と本文が地続きになる。技術書と分けているのは アクセント（水彩ブルー / 朱）と組み方（サンセリフ / セリフ・枠ゼロ）だけ。 「同じ紙の、本文と別刷り」という関係にしてある。 ── 貫く 3 つの規則。破ると別刷りでなくなるので、レビューで grep する ── 1. box-shadow と border-radius を 1 回も書かない （UA 既定を持つ button / summary は明示的に 0 へ戻す） 2. border は引くが 4 辺を閉じない。上下 2 本、左 1 本まで。 閉じた瞬間にカードになり、サイトの他の区画と同じ顔になる 3. transition / animation / transform を 1 つも書かない。 background-color は body 以外に書かない（SVG の中は別） ===================================================================== */ :root { /* 紙。技術書・site-header--paper と同じ値 */ --paper: #F5F3EE; /* インク 4 段（対 #F5F3EE のコントラスト比） */ --ink: #1A1A17; /* 15.9:1 見出し・強調・傍注のラベル */ --ink-text: #262622; /* 13.8:1 本文 */ --ink-sub: #55534C; /* 6.9:1 傍注・キャプション */ --ink-faint: #6F6C63; /* 4.6:1 節ラベル・軸の文字。これより薄くすると落ちる */ /* 罫 3 段。どのルールでも 4 辺を閉じない */ --rule: #201F1B; /* 版面を分ける 1 本 */ --rule-mid: #B9B5A8; /* 図版の上の 1 本、表の行 */ --rule-hair: #D8D4C8; /* 最も薄い行罫。これより薄いと 1dpr で消える */ /* 朱 1 色。用途は «図番号 / 図の中の 1 箇所 / 現在地と hover» の 3 つだけ。 朱は量を表さない。朱を外しても図は読める。朱が言うのは「ここを見ろ」だけ */ --red: #B23A2B; /* 5.4:1 */ --red-deep: #8E2A1E; /* 8.0:1 朱の文字を本文サイズで置くとき */ /* 図のインク 5 段（SVG の塗り。research-fig.css が使う） */ --fig-1: #24231F; --fig-2: #4E4B44; --fig-3: #7C786E; --fig-4: #ADA99C; --fig-5: #D7D3C7; --fig-0: var(--paper); --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif", serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* 版面。★ 本文の幅は 3 ページとも --measure で 1 本に揃える。 ここが割れると、同じ区画なのにページごとに行の長さが変わる。 */ --measure: 40rem; /* 本文 640px ≒ 17px で 40 字 */ --gutter: 2.5rem; --wide: 54.5rem; /* 幅広の図 872px。本文より広いが中央には揃える */ } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--paper); color: var(--ink-text); font-family: var(--font-serif); font-size: 17px; line-height: 1.9; font-feature-settings: "palt" 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; } /* 共通ヘッダーのスキン。 ★ --plain のままにしないこと。site-nav.css の --plain は --sh-accent: var(--nzw-accent, #0ea5e9) を持っていて、これを潰していたのは notes.css:44 の --nzw-accent: #23232a だった。notes.css を外した瞬間に Sky が現在地の下線とパネルのアイコンに出る。--paper に変えたうえで、 accent だけ朱にする（--paper の既定は --nzw-accent-deep = Sky 700）。 */ .site-header--paper { --sh-accent: var(--red); } /* ===================================================================== 版面 — 本文 1 列 ＋ 傍注 1 列。左に寄せ、右を空ける ===================================================================== */ /* ★ 3 列にして «本文そのもの» を中央の列に置く。 «本文 + 傍注» の塊を中央に置くと、塊は中央でも本文は左へ 116px ずれる。 実際それで «中央揃えになっていない» と読まれた。 左右の 1fr は同じ幅になるので、本文は画面のまん中に来る。 傍注は右の余白（3 列目）に出す。本と同じで、外側の余白が注の居場所。 */ .sheet { max-width: 1080px; /* site-header-inner と同じ */ margin-inline: auto; padding: 3rem 24px 5rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure)) minmax(0, 1fr); column-gap: var(--gutter); align-items: start; /* 傍注を行の上端に揃える（伸ばさない） */ counter-reset: fig; } .sheet > * { grid-column: 2; } /* 本文は中央の列 */ .side { grid-column: 3; } /* 傍注は右の余白 */ /* ★ 索引だけ 1 列にしない。列を減らすと版面の総幅が変わり、 本文の左端が索引（1 列）とノート（2 列）で 116px ずれて、 行き来するたびに文字が横に跳ぶ。傍注を使わないページでも 同じ格子に乗せて、右の 192px は余白として空けておく （本と同じで、外側の余白はふだん空いているのが正しい） */ /* 幅の要る図（遷移行列・トレース再生）は 2 列にまたがる。 その傍注は class="side side--under" と «明示» すること。 隣接セレクタに頼ると、あいだに要素が入った瞬間に黙って崩れる */ /* 幅広の図も «中央» に置く。1 / -1 で器いっぱいに広げると、 本文の中心と図の中心がずれて、そこだけ傾いて見える */ .fig--wide, .side--under { grid-column: 1 / -1; justify-self: center; width: min(100%, var(--wide)); } .side--under { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); } /* 傍注。 ★