/* 共通の最小限のスタイル。章ごとの実演は各章フォルダの css / js で上書きする */

:root {
  /* 書体。先頭がデザイン指定の書体、以降は入っていない環境での代替 */
  /* 石井ゴシックは Morisawa Fonts のWebフォント。太さごとに別の書体名になっている */
  --font-fallback: "A P-SK IshiiGothic StdN", "Hiragino Sans", "Yu Gothic", sans-serif;
  /* 先頭の Monument Grotesk は欧文（英数字と記号）だけを受け持ち、和文は次の石井ゴシックに渡る */
  --font-text: "Monument Grotesk", "mfw-pishiigothicstdn-m", var(--font-fallback);
  --font-text-r: "Monument Grotesk", "mfw-pishiigothicstdn-r", var(--font-fallback);
  --font-title: "mfw-ishiichumarugothicmin2-m", "A-SK IshiiChuMaruGothic Min2", "Hiragino Maru Gothic ProN", var(--font-text);
  --font-en: "ABC Stefan Simple", var(--font-text);
  --font-url: "Monument Grotesk", "Helvetica Neue", Arial, sans-serif;

  --side: 50px;
}

/* Oradano明朝GSRR（パブリックドメイン）。「最終更新」の行に使う。
   元のフォントは7MBあるので、この行に必要な文字（最終更新・数字・記号・年月日）だけを抜き出している */
/* Monument Grotesk。欧文専用にするため、対象を英数字・記号・アクセント付きの文字に限る。
   太さ500（見出し・目次など）には Medium、400（本文）には Regular が当たる */
@font-face {
  font-family: "Monument Grotesk";
  src: url("/fonts/monument-grotesk-regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-024F;
}
@font-face {
  font-family: "Monument Grotesk";
  src: url("/fonts/monument-grotesk-medium.woff") format("woff");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-024F;
}

/* ABC Stefan Simple。英語タイトルと RESET に使う */
@font-face {
  font-family: "ABC Stefan Simple";
  src: url("/fonts/ABCStefan-Simple.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Oradano Mincho GSRR";
  src: url("/fonts/OradanoGSRR-date.woff2") format("woff2");
  font-display: swap;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 30px var(--side) 26px;
  background: var(--bg, #fff);
  color: #000;
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  word-break: break-word;
}

a { color: inherit; text-decoration: none; }
p, ul, h1 { margin: 0; padding: 0; }
ul { list-style: none; }

/* ヘッダー */
.site-header {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.site-title {
  font-family: var(--font-title);
  font-size: 24px;
  line-height: 1.55;
}
.site-rule {
  flex: none;
  width: 150px;
  height: 1px;
  margin: 0 20px 0 10px;
  background: #000;
}
.site-en { font-family: var(--font-en); }

/* 2カラム: 1440px幅で 目次 50px〜 / 本文 510px〜 幅765px */
.columns {
  display: grid;
  grid-template-columns: calc(100vw / 3 - 20px) minmax(0, 765px);
  /* 本文の開始位置が小数にならないよう、1px単位に丸める（対応ブラウザのみ） */
  grid-template-columns: round(down, 100vw / 3 - 20px, 1px) minmax(0, 765px);
  margin-top: 100px;
}

/* 目次 */
.toc li + li { margin-top: 7.5px; }
.toc a { position: relative; display: inline-block; max-width: 304px; vertical-align: top; }
/* hover で引かれる手描き風の下線（underline.js） */
.toc-line { position: absolute; top: calc(100% - 5px); overflow: visible; pointer-events: none; }
.toc-line path { fill: none; stroke: #000; stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 1; }
/* 現在地: 左に50pxの罫線を出して文字を右へ送る */
.toc a[aria-current] { display: flex; align-items: center; white-space: nowrap; }
.toc a[aria-current]::before {
  content: "";
  flex: none;
  width: 50px;
  height: 1px;
  margin: 0 10px 0 -4px;
  background: #000;
}

/* 本文 */
h1 { font-size: 18px; font-weight: 500; }
.updated {
  margin-top: 30px;
  margin-left: -5px; /* 本文の左端より5px突き出す */
  font-family: "Oradano Mincho GSRR", var(--font-text);
  font-weight: 400;
  font-size: 13px;
  transform-origin: left center; /* 傾きは左端を軸にする（角度は base.njk で開くたびに決める） */
}
.text { margin-top: 23.5px; font-family: var(--font-text-r); font-weight: 400; line-height: 1.6; }
.text > * + * { margin-top: 1.5em; }
.text img { display: block; max-width: 100%; height: auto; }
/* 画像の上下には100pxの余白を取る */
.text p:has(> img) { margin-top: 100px; margin-bottom: 100px; }
.text h2, .text h3 { margin-top: 4.5em; font-family: var(--font-text); font-size: 18px; font-weight: 500; }

/* 次の記事 */
.next {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 225px;
  height: 64px;
  margin: 55px 0 0 8px;
}
.next svg { position: absolute; top: -0.5px; left: -0.5px; }

/* hover で線が一度消え、ペンで描くように引き直される */
.next path, .reset path { stroke-dasharray: 1; }
@media (prefers-reduced-motion: no-preference) {
  .next:hover path,
  .next:focus-visible path { animation: next-draw 0.9s cubic-bezier(0.45, 0, 0.3, 1); }
  /* RESET の囲みも同じ動き。線が短いぶん、少し速く描く */
  .reset:hover path,
  .reset:focus-visible path { animation: next-draw 0.6s cubic-bezier(0.45, 0, 0.3, 1); }
}
@keyframes next-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
.next span { position: relative; }

/* フッター */
.site-footer { margin-top: 220px; font-size: 13px; }
.site-footer p + p { margin-top: 10.5px; }
.site-footer .author { margin-top: 30.5px; }
.site-footer .url { font-family: var(--font-url); font-weight: 400; }

/* 線を描く機能（draw.js）。線は文字の後ろ、背景色の上に入る */
.draw-layer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}
.draw-layer path {
  fill: none;
  stroke: #000;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* 操作パネル（panel.js）。画面の右上に固定 */
.panel[hidden], .reset[hidden] { display: none; }
.panel { position: fixed; top: 30px; right: 30px; width: 20px; z-index: 1; }
.panel-button {
  all: unset;
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  margin-bottom: 20px;
  border-radius: 50%;
  cursor: pointer;
}
.panel-button > svg { position: absolute; top: -0.6px; left: -0.75px; }
/* 色のボタンの中は、次に変わる色で塗る（panel.js が決める） */
.panel-color circle { fill: var(--next-bg, #fff); }
/* 丸の中は背景色で塗る */
.panel-pen circle { fill: var(--bg, #fff); }
/* 鉛筆は画像を型抜きに使い、色をCSSで塗る */
.panel-icon {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  background: #323232;
  -webkit-mask: url("/images/icon-pen.svg") center / 12px 12px no-repeat;
  mask: url("/images/icon-pen.svg") center / 12px 12px no-repeat;
}
/* 描いている間は反転: 丸を黒く塗り、中の鉛筆を背景色にする */
.panel-pen[aria-pressed="true"] circle { fill: #000; }
.panel-pen[aria-pressed="true"] .panel-icon { background: var(--bg, #fff); }
.panel-button:focus-visible, .panel-shift:focus-visible, .reset:focus-visible { outline: 1px solid #000; outline-offset: 3px; }
/* ずれ幅のバー: 上が1px、下が30px */
.panel-shift { position: relative; width: 20px; height: 200px; cursor: pointer; touch-action: none; }
.panel-shift::before { content: ""; position: absolute; top: 0; left: 10px; width: 1px; height: 100%; background: #000; }
.panel-knob { position: absolute; left: 2.4px; max-width: none; translate: 0 -50%; pointer-events: none; }
/* RESET。画面の右下に固定 */
.reset {
  all: unset;
  position: fixed;
  right: 31.7px;
  bottom: 22.5px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74.7px;
  height: 30.1px;
  font-family: var(--font-en);
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
}
.reset svg { position: absolute; top: -0.5px; left: -0.5px; }
.reset span { position: relative; }
/* 描いている間は、文字の選択・スクロール・リンクを止める */
html.drawing { cursor: crosshair; user-select: none; -webkit-user-select: none; touch-action: none; }
html.drawing a { cursor: crosshair; }
html.drawing .panel, html.drawing .reset { touch-action: auto; }

/* 狭い画面では1カラム（デザイン未指定のため仮） */
@media (max-width: 900px) {
  :root { --side: 20px; }
  .site-header { flex-wrap: wrap; }
  .site-rule { display: none; }
  .site-en { flex-basis: 100%; white-space: normal; }
  .columns { grid-template-columns: minmax(0, 1fr); row-gap: 60px; margin-top: 60px; }
  .site-footer { margin-top: 120px; }
}