/*
 * 説明のページ（プライバシーポリシー・利用規約・お問い合わせ）の見た目。
 * 色は src/ui/theme.ts のトークンの写し（紙・方眼・インク・選択の青・えだまめの緑）。字はいつもインク色。
 * 見出しは手書き（Yomogi）、本文は読みやすさを優先して OS のゴシック（字を取りに行かない）
 */
:root {
  --paper: #fbf9f4;
  --grid: #e2e8ef;
  --grid-major: #cfd9e4;
  --panel: #fffefa;
  --ink: #2b2a2e;
  --ink2: #4a4950;
  --ink3: #6b6a70;
  --ink4: #a9a8ad;
  --select: #3d7bcb;
  --pod: #4e9f5b;
  --pod-fill: #d3ebcd;
  --highlighter: rgba(247, 219, 79, 0.55);
  --hand: "Yomogi", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif;
  --body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.85;
  background-color: var(--paper);
  /* 方眼: 20px の細い線、100px（5 マス）ごとに太い線 */
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  padding-inline: 16px;
  padding-block: 24px 48px;
}

.top, .sheet, .foot { max-width: 46rem; margin-inline: auto; }

.top { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.top a { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.top img { width: 44px; height: 44px; border-radius: 10px; }
.top .name { font-family: var(--hand); font-size: 26px; line-height: 1.1; }
.top .tag { font-size: 13px; color: var(--ink3); }

/* 紙の上に置いた 1 枚のメモ。角は手で切ったように少しゆがませる */
.sheet {
  background: var(--panel);
  border: 1.5px solid var(--ink);
  border-radius: 14px 6px 12px 8px / 8px 12px 6px 14px;
  box-shadow: 3px 4px 0 rgba(43, 42, 46, 0.08);
  padding: clamp(20px, 5vw, 44px);
}

h1 {
  font-family: var(--hand);
  font-weight: 400;
  font-size: clamp(28px, 6vw, 36px);
  line-height: 1.3;
  margin: 0 0 4px;
  text-wrap: balance;
}
.updated { margin: 0 0 24px; color: var(--ink3); font-size: 14px; font-variant-numeric: tabular-nums; }

h2 {
  font-family: var(--hand);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.4;
  margin: 36px 0 8px;
  text-wrap: balance;
}
/* 見出しの下にマーカーを 1 本 */
h2 span { background: linear-gradient(transparent 58%, var(--highlighter) 58%, var(--highlighter) 92%, transparent 92%); padding-inline: 2px; }
h3 { font-size: 17px; margin: 22px 0 4px; }

p, ul, ol { margin: 0 0 12px; max-width: 40em; }
ul, ol { padding-left: 1.4em; }
li + li { margin-top: 4px; }
strong { font-weight: 700; }
small, .note { color: var(--ink2); font-size: 14px; }

a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--select); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { background: rgba(61, 123, 203, 0.08); }
a:focus-visible { outline: 2px dashed var(--select); outline-offset: 3px; border-radius: 2px; }

/* いちばん大事なこと */
.key {
  border: 1.5px solid var(--pod);
  border-radius: 10px 6px 12px 6px / 6px 12px 6px 10px;
  background: var(--pod-fill);
  padding: 14px 18px 4px;
  margin: 8px 0 8px;
}
.key h2 { margin-top: 0; font-size: 20px; }

.table-wrap { overflow-x: auto; margin: 8px 0 14px; }
table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 14.5px; line-height: 1.6; }
th, td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--grid-major); }
th { font-weight: 700; color: var(--ink2); border-bottom: 1.5px solid var(--ink); }

/* メールのあて先は、選んでコピーできる字で出す */
.mail {
  display: inline-block;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border: 1.5px dashed var(--ink3);
  border-radius: 8px;
  background: var(--paper);
  user-select: all;
  -webkit-user-select: all;
}

dl { margin: 0; }
dt { font-weight: 700; margin-top: 18px; }
dd { margin: 4px 0 0; }

ol.articles { list-style: none; padding: 0; }

.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: center;
  margin-top: 24px;
  font-size: 14px;
}
.foot a[aria-current="page"] { text-decoration: none; color: var(--ink3); pointer-events: none; }